/* B2 classic pixel UI. Presentation only: event order, expiry and dice results
   stay with the existing controllers. Approved card/spirit artwork is reused. */
body #turn-feedback.event-feedback {
  --feedback-ink: #12356f;
  --feedback-muted: #536889;
  --feedback-accent: #174789;
  left: 50%;
  top: 50%;
  width: min(480px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  transform: translate(-50%, -50%);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(4px 5px 0 #102e62);
  text-align: left;
  pointer-events: none !important;
}

body #turn-feedback.event-feedback *,
body #toast {
  pointer-events: none !important;
}

body #turn-feedback.event-feedback section.feedback-receipt,
body #turn-feedback.event-feedback section.feedback-reward,
body #turn-feedback.event-feedback section.feedback-reward[data-kind=card] {
  --feedback-accent: #174789;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
  gap: 12px 22px;
  min-height: 180px;
  padding: 23px 25px;
  border: 3px solid #133970;
  border-radius: 0;
  background: #fffef3;
  box-shadow: inset 0 0 0 3px #42aff4, inset 0 0 0 6px #dff4ff;
  color: var(--feedback-ink);
  text-align: left;
  overflow: hidden;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, 100% 3px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) 100%, 6px 100%, 6px calc(100% - 3px), 0 calc(100% - 3px), 0 6px, 3px 6px, 3px 0);
}

body #turn-feedback.event-feedback .feedback-receipt:before,
body #turn-feedback.event-feedback .feedback-reward:before {
  inset: 8px;
  border: 1px solid #c3d8df;
  clip-path: none;
}

body #turn-feedback.event-feedback .feedback-receipt:after,
body #turn-feedback.event-feedback .feedback-reward:after,
body #turn-feedback.event-feedback .feedback-frame-corner {
  display: none;
}

body #turn-feedback.event-feedback .feedback-receipt[data-tone=income] { --feedback-accent: #147346; }
body #turn-feedback.event-feedback .feedback-receipt[data-tone=expense] { --feedback-accent: #d83246; }
body #turn-feedback.event-feedback .feedback-receipt[data-tone=neutral] { --feedback-accent: #174789; }
body #turn-feedback.event-feedback .feedback-receipt[data-kind=hospital] { --feedback-accent: #166d8d; }
body #turn-feedback.event-feedback .feedback-receipt[data-kind=prison] { --feedback-accent: #635194; }

body #turn-feedback.event-feedback .feedback-copy,
body #turn-feedback.event-feedback .feedback-card-copy {
  width: 100%;
  min-width: 0;
  padding: 0;
  text-align: left;
}

body #turn-feedback.event-feedback .feedback-symbol,
body #turn-feedback.event-feedback .feedback-symbol.v26-art-symbol {
  width: 80px;
  height: 80px;
  min-height: 0;
  margin: 0 auto;
  padding: 13px;
  display: grid;
  place-items: center;
  color: #174789;
  background: #e3f2fc;
  border: 2px solid #497bb5;
  border-radius: 0;
  box-shadow: 3px 3px #abc7db, inset 2px 2px #fffefa;
}

body #turn-feedback.event-feedback .feedback-symbol.v26-art-symbol {
  width: 92px;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

body #turn-feedback.event-feedback .feedback-receipt:has(.v26-art-symbol) {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px 22px;
}

/* A property and its bill, without introducing another character portrait. */
body #turn-feedback.event-feedback .feedback-receipt[data-kind=rent] .feedback-symbol {
  width: 98px;
  height: 98px;
  padding: 0;
  border: 0;
  background: url('../assets/ui-v31/rent-building.svg') center / contain no-repeat;
  box-shadow: none;
  image-rendering: pixelated;
}
body #turn-feedback.event-feedback .feedback-receipt[data-kind=rent] .feedback-symbol > svg { display: none; }

body #turn-feedback.event-feedback .feedback-eyebrow {
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: .015em;
  color: #12356f;
  text-align: left;
}

body #turn-feedback.event-feedback .feedback-copy h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  color: #3a567a;
}

body #turn-feedback.event-feedback .feedback-detail,
body #turn-feedback.event-feedback .feedback-caption {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #4d6381;
  text-align: left;
}

body #turn-feedback.event-feedback .feedback-caption {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid #bacddd;
  color: #9d3445;
  font-size: 11px;
}

body #turn-feedback.event-feedback .feedback-value {
  display: block;
  margin: 7px 0 0;
  color: var(--feedback-accent);
  font-family: inherit;
  font-size: clamp(27px, 2.65vw, 36px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  text-align: left;
  text-shadow: 0 1px #fff;
  overflow-wrap: anywhere;
}

body #turn-feedback.event-feedback .feedback-card-art.v26-reward-art,
body #turn-feedback.event-feedback .v26-reward-art > .v26-card-art {
  width: 86px;
  margin: 0 auto;
  border-radius: 0;
}
body #turn-feedback.event-feedback .feedback-symbol > .v26-card-art { width: 65px; border-radius: 0; }
body #turn-feedback.event-feedback .feedback-symbol > .v26-spirit-art { width: 82px; height: 94px; }

body #turn-feedback.event-feedback .feedback-card-copy .feedback-eyebrow {
  color: #52698b;
  font-size: 12px;
  font-weight: 650;
}
body #turn-feedback.event-feedback .feedback-card-copy h3 {
  margin: 3px 0 9px;
  color: #12356f;
  font-size: 25px;
  font-weight: 850;
  line-height: 1.3;
}
body #turn-feedback.event-feedback .feedback-card-description {
  color: #405c80;
  font-size: 12px;
  line-height: 1.65;
}
body #turn-feedback.event-feedback .feedback-card-source {
  grid-column: 2;
  margin: -3px 0 0;
  padding: 7px 0 0;
  color: #c53043;
  border-top: 1px solid #bacddd;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.5;
  text-align: left;
}

body #turn-feedback.event-feedback section.feedback-reward[data-kind=hotel],
body #turn-feedback.event-feedback section.feedback-reward[data-kind=hospital],
body #turn-feedback.event-feedback section.feedback-reward[data-kind=prison] {
  --stay-accent: #216b78;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px 18px;
  min-height: 175px;
}
body #turn-feedback.event-feedback section.feedback-reward[data-kind=prison] { --stay-accent: #635194; }
body #turn-feedback.event-feedback .feedback-stay-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}
body #turn-feedback.event-feedback .feedback-stay-art {
  width: 61px;
  height: 61px;
  padding: 10px;
  border: 2px solid #497bb5;
  background: #e3f2fc;
  color: #174789;
  box-shadow: 3px 3px #abc7db;
}
body #turn-feedback.event-feedback .feedback-stay-heading .feedback-eyebrow {
  color: #52698b;
  font-size: 12px;
  font-weight: 600;
}
body #turn-feedback.event-feedback .feedback-stay-heading h3 {
  margin: 5px 0 0;
  color: #12356f;
  font-size: 21px;
  font-weight: 850;
}
body #turn-feedback.event-feedback .feedback-stay-outcome {
  padding: 9px 10px;
  color: var(--stay-accent);
  background: #e6f3ed;
  border: 2px solid #7aa6ab;
  box-shadow: 2px 2px #b3cbd2;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  max-width: 108px;
}
body #turn-feedback.event-feedback .feedback-stay-bill {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding: 11px 0 0;
  border-top: 1px solid #bacddd;
  color: #405c80;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
}
body #turn-feedback.event-feedback .feedback-stay-bill b {
  color: #cf3148;
  font-family: inherit;
  font-size: 25px;
  font-weight: 850;
  white-space: nowrap;
}
body #turn-feedback.event-feedback .feedback-stay-bill[data-waived=true] b {
  color: #147346;
  font-size: 17px;
  white-space: normal;
}
body #turn-feedback.event-feedback .v26-shopping-die {
  width: 64px;
  height: 64px;
  border: 3px solid #153e74;
  border-radius: 0;
  color: #163e70;
  background: #ffe49a;
  box-shadow: inset 3px 3px #fffbcf, inset -3px -3px #d9ae47, 4px 4px #819eb8;
}
body #turn-feedback.event-feedback .v26-shopping-die > span { font-size: 29px; }

body #toast {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: min(450px, calc(100vw - 30px));
  padding: 17px 23px;
  border: 3px solid #143a73;
  border-radius: 0;
  background: #fffef3;
  box-shadow: 4px 5px #17365c, inset 0 0 0 3px #51b0ec;
  backdrop-filter: none;
  color: #173b74;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
  text-align: center;
  overflow-wrap: anywhere;
}
body #toast strong { color: #173b74; }
body #toast span { color: #4d6381; }

/* The interaction stays on the real die button. The panel also blocks clicks
   from falling through its opaque face into the board underneath. */
body #event-dice {
  width: min(336px, calc(100vw - 30px));
  color: #173b74;
  filter: drop-shadow(4px 5px 0 #102e62);
}
body #event-dice .event-dice-panel {
  padding: 22px 25px 25px;
  border: 3px solid #143a73;
  border-radius: 0;
  background: #fffef3;
  box-shadow: inset 0 0 0 3px #42aff4, inset 0 0 0 6px #dff4ff;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  pointer-events: auto;
}
body #event-dice .event-dice-panel:before,
body #event-dice .event-dice-panel:after { display: none; }
body #event-dice .event-dice-actor { color: #52698b; font-size: 12px; }
body #event-dice .event-dice-title { color: #143a73; font-size: 22px; font-weight: 850; }
body #event-dice .event-dice-platform {
  background: #d4e9f7;
  border-color: #7aa6d0;
  box-shadow: 0 5px #94b4cf, inset 0 0 0 4px #eaf7fe, inset 0 0 0 5px #95bbd7;
}
body #event-dice .event-dice-shadow { background: #6a94b7; opacity: .45; }
body #event-dice .event-dice-face {
  border-color: #54789b;
  background: #fffef2;
  box-shadow: inset 3px 3px #fff, inset -3px -3px #bfccd2;
}
body #event-dice .event-dice-top { background: #fff; }
body #event-dice .event-dice-bottom { background: #c4d6e2; }
body #event-dice .event-dice-right { background: #d4e3e9; }
body #event-dice .event-dice-left { background: #e4eef1; }
body #event-dice .event-dice-pips i { background: #193e72; box-shadow: inset 2px 2px #0e2e58, 0 1px #fff; }
body #event-dice .event-dice-status { color: #1c7059; font-weight: 850; }
body #event-dice[data-state=rolling] .event-dice-status { color: #52698b; }
body #event-dice .event-dice-roll {
  min-height: 46px;
  border: 2px solid #8d641e;
  border-radius: 0;
  color: #153b70;
  background: #ffcf45;
  box-shadow: inset 2px 2px #fff2a8, inset -2px -4px #c98b22, 2px 3px #173a62;
  font-size: 16px;
  font-weight: 850;
  pointer-events: auto;
}
body #event-dice .event-dice-roll:hover:not(:disabled) { background: #ffdc65; filter: none; }
body #event-dice .event-dice-roll:focus-visible { outline: 3px solid #1b74bd; outline-offset: 4px; }
body #event-dice .event-dice-roll i { background: #a77513; }

body .map-marker {
  --marker: #246cb0;
  border: 2px solid #174678;
  border-radius: 0;
  background: #fffdf0;
  color: #20497c;
  box-shadow: 2px 3px #123966, inset 0 -2px #acd9f6;
  font-weight: 750;
  text-shadow: none;
}
body .map-marker--shop { --marker: #28755c; background: #eef9ee; color: #205f4e; }
body .map-marker--event { --marker: #7050a7; background: #f6f0ff; color: #65418c; }
body .map-marker:hover,
body .map-marker:focus-visible,
body .map-marker.is-located {
  color: #133768;
  background: #ffedac;
  outline: 2px solid #357fc4;
  outline-offset: 2px;
}
body .map-marker--shop .map-marker-icon:after { background: #eef9ee; }
body .map-marker-line { height: 2px; background: #34669e; box-shadow: 0 1px #edf8ff; }
body .map-marker-line:before { background: #fff3b9; border-radius: 0; box-shadow: 0 0 0 1px #214777; }
body .map-marker-line--shop { background: #377963; }
body .map-marker-line--event { background: #7860a6; }
body .player-locator {
  border: 2px solid #1d4179;
  border-radius: 0;
  background: #ffdc64;
  color: #173b70;
  box-shadow: 2px 2px #163c69;
  font-weight: 850;
}
body .player-locator:after { background: #ffdc64; }
body #tile-hover {
  padding: 10px 13px;
  border: 2px solid #214c7c;
  border-radius: 0;
  background: #fffef3;
  color: #173b70;
  box-shadow: 3px 3px #173a63, inset 0 -2px #b6e1fa;
  backdrop-filter: none;
  font-size: 13px;
}

@media (max-width: 520px) {
  body #turn-feedback.event-feedback { width: min(410px, calc(100vw - 24px)); }
  body #turn-feedback.event-feedback section.feedback-receipt,
  body #turn-feedback.event-feedback section.feedback-reward,
  body #turn-feedback.event-feedback section.feedback-reward[data-kind=card],
  body #turn-feedback.event-feedback .feedback-receipt:has(.v26-art-symbol) {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 11px 15px;
    min-height: 162px;
    padding: 21px 21px;
  }
  body #turn-feedback.event-feedback .feedback-symbol,
  body #turn-feedback.event-feedback .feedback-symbol.v26-art-symbol { width: 66px; }
  body #turn-feedback.event-feedback .feedback-symbol { height: 66px; padding: 10px; }
  body #turn-feedback.event-feedback .feedback-symbol.v26-art-symbol { height: auto; padding: 0; }
  body #turn-feedback.event-feedback .feedback-receipt[data-kind=rent] .feedback-symbol { width: 75px; height: 82px; }
  body #turn-feedback.event-feedback .feedback-symbol > .v26-spirit-art { width: 66px; height: 76px; }
  body #turn-feedback.event-feedback .feedback-symbol > .v26-card-art { width: 56px; }
  body #turn-feedback.event-feedback .feedback-card-art.v26-reward-art,
  body #turn-feedback.event-feedback .v26-reward-art > .v26-card-art { width: 68px; }
  body #turn-feedback.event-feedback .feedback-eyebrow { font-size: 17px; }
  body #turn-feedback.event-feedback .feedback-copy h3 { font-size: 14px; }
  body #turn-feedback.event-feedback .feedback-value { font-size: 29px; }
  body #turn-feedback.event-feedback .feedback-card-copy h3 { font-size: 22px; }
  body #turn-feedback.event-feedback .feedback-stay-heading { gap: 12px; }
  body #turn-feedback.event-feedback .feedback-stay-art { width: 48px; height: 54px; padding: 8px; }
  body #turn-feedback.event-feedback .feedback-stay-heading h3 { font-size: 18px; }
  body #turn-feedback.event-feedback .feedback-stay-outcome { max-width: 85px; padding: 7px; font-size: 17px; }
  body #turn-feedback.event-feedback .feedback-stay-bill b { font-size: 22px; }
}

@media (max-width: 360px) {
  body #turn-feedback.event-feedback section.feedback-receipt,
  body #turn-feedback.event-feedback section.feedback-reward,
  body #turn-feedback.event-feedback section.feedback-reward[data-kind=card],
  body #turn-feedback.event-feedback .feedback-receipt:has(.v26-art-symbol) {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 10px 11px;
    padding: 19px 17px;
  }
  body #turn-feedback.event-feedback .feedback-symbol { width: 55px; height: 60px; }
  body #turn-feedback.event-feedback .feedback-symbol.v26-art-symbol { width: 60px; }
  body #turn-feedback.event-feedback .feedback-receipt[data-kind=rent] .feedback-symbol { width: 65px; height: 72px; }
  body #turn-feedback.event-feedback .feedback-card-art.v26-reward-art,
  body #turn-feedback.event-feedback .v26-reward-art > .v26-card-art { width: 59px; }
  body #turn-feedback.event-feedback .feedback-eyebrow { font-size: 16px; }
  body #turn-feedback.event-feedback .feedback-value { font-size: 26px; }
  body #turn-feedback.event-feedback section.feedback-reward[data-kind=hotel],
  body #turn-feedback.event-feedback section.feedback-reward[data-kind=hospital],
  body #turn-feedback.event-feedback section.feedback-reward[data-kind=prison] { grid-template-columns: 1fr; }
  body #turn-feedback.event-feedback .feedback-stay-outcome { max-width: none; margin-left: 61px; text-align: left; }
  body #turn-feedback.event-feedback .feedback-stay-bill { flex-wrap: wrap; gap: 6px; }
  body #toast { padding: 15px 18px; font-size: 14px; }
}

@media (max-height: 500px) {
  body #event-dice .event-dice-panel { padding-top: 15px; padding-bottom: 19px; }
  body #event-dice .event-dice-stage { height: 152px; margin-top: 0; }
  body #event-dice .event-dice-body { top: 38px; }
  body #event-dice .event-dice-title { font-size: 20px; }
}