/* C event placards and dice: miniature city materials at a compact scale. */
body #turn-feedback.event-feedback {
  --feedback-ink: #183f46;
  --feedback-muted: #63756e;
  --feedback-accent: #286f67;
  width: min(350px, calc(100vw - 24px));
  filter: drop-shadow(0 3px 0 #244f535c) drop-shadow(0 6px 8px #173d4426);
  font-family: var(--v33-display, system-ui, sans-serif);
}
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: #276f69;
  grid-template-columns: 91px minmax(0, 1fr);
  gap: 10px 15px;
  min-height: 145px;
  padding: 17px 18px;
  border: 2px solid #245c60;
  border-radius: 2px;
  background:
    linear-gradient(135deg, #e3c680 0 5px, transparent 5px) top left / 11px 11px no-repeat,
    linear-gradient(225deg, #e3c680 0 5px, transparent 5px) top right / 11px 11px no-repeat,
    linear-gradient(45deg, #e3c680 0 5px, transparent 5px) bottom left / 11px 11px no-repeat,
    linear-gradient(315deg, #e3c680 0 5px, transparent 5px) bottom right / 11px 11px no-repeat,
    linear-gradient(135deg, #fffbed, #ededdc);
  box-shadow: inset 0 0 0 2px #77a39a, inset 0 0 0 4px #fdfbed;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
body #turn-feedback.event-feedback::after {
  width: 15px;
  height: 10px;
  left: calc(50% - 7px);
  top: calc(100% - 2px);
  border: 2px solid #245c60;
  border-top: 0;
  background: #8aada0;
  box-shadow: inset 0 3px #eff3e5;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
body #turn-feedback.event-feedback .feedback-receipt[data-tone=expense] { --feedback-accent: #bd4e54; }
body #turn-feedback.event-feedback .feedback-receipt[data-tone=income] { --feedback-accent: #27805c; }
body #turn-feedback.event-feedback .feedback-receipt[data-tone=neutral] { --feedback-accent: #286f67; }
body #turn-feedback.event-feedback .feedback-receipt:has(.v26-art-symbol) { grid-template-columns: 91px minmax(0, 1fr); gap: 10px 15px; }
body #turn-feedback.event-feedback .feedback-symbol {
  width: 74px;
  height: 74px;
  padding: 11px;
  border: 1px solid #8eada0;
  border-radius: 3px;
  background: linear-gradient(135deg, #f2f3e5, #d7e4d3);
  color: #286b66;
  box-shadow: inset 1px 1px #fff, 0 2px #8ba99b;
}
body #turn-feedback.event-feedback .feedback-receipt[data-kind=rent] .feedback-symbol {
  width: 104px;
  height: 108px;
  background: url('../assets/ui-v35/property-hotel.png') center / contain no-repeat;
  image-rendering: auto;
}
body #turn-feedback.event-feedback .feedback-eyebrow { color: #183f46; font-size: 21px; font-weight: 750; line-height: 1.25; margin-bottom: 6px; text-shadow: none; letter-spacing: 0; }
body #turn-feedback.event-feedback .feedback-copy h3 { color: #466963; font-size: 13px; font-weight: 600; }
body #turn-feedback.event-feedback .feedback-detail { color: #526d65; font-size: 13px; font-weight: 500; margin-top: 5px; }
body #turn-feedback.event-feedback .feedback-value { font-size: 30px; font-weight: 750; line-height: 1.12; margin-top: 8px; text-shadow: none; }
body #turn-feedback.event-feedback .feedback-caption { border-top: 1px solid #c4d0ba; color: #9a5555; }
body #turn-feedback.event-feedback .feedback-card-art.v26-reward-art,
body #turn-feedback.event-feedback .v26-reward-art > .v26-card-art { width: 76px; }
body #turn-feedback.event-feedback .feedback-symbol.v26-art-symbol { width: 85px; }
body #turn-feedback.event-feedback .feedback-symbol > .v26-spirit-art { width: 81px; height: 94px; }
body #turn-feedback.event-feedback .feedback-symbol > .v26-card-art { width: 69px; }
body #turn-feedback.event-feedback .feedback-card-copy h3 { color: #234e54; font-size: 21px; margin-bottom: 6px; }
body #turn-feedback.event-feedback .feedback-card-copy .feedback-eyebrow { color: #628477; font-size: 12px; }
body #turn-feedback.event-feedback .feedback-card-description { color: #576f64; font-size: 12px; line-height: 1.5; }
body #turn-feedback.event-feedback .feedback-card-source { color: #b35152; border-top: 1px solid #c7d0be; font-size: 13px; }
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: minmax(0, 1fr) auto; gap: 11px; min-height: 140px; }
body #turn-feedback.event-feedback .feedback-stay-heading { gap: 10px; }
body #turn-feedback.event-feedback .feedback-stay-art { width: 45px; height: 48px; padding: 7px; border: 1px solid #87a99a; background: #e1eadb; color: #2b7069; box-shadow: inset 1px 1px #fff, 0 2px #a4baaa; }
body #turn-feedback.event-feedback .feedback-stay-heading .feedback-eyebrow { font-size: 11px; color: #64786c; }
body #turn-feedback.event-feedback .feedback-stay-heading h3 { color: #224f54; font-size: 17px; }
body #turn-feedback.event-feedback .feedback-stay-outcome { max-width: 76px; padding: 7px; border: 1px solid #8da99a; background: #dfe9d8; color: #2b7367; font-size: 16px; box-shadow: inset 1px 1px #fffff3, 0 2px #97b29f; }
body #turn-feedback.event-feedback .feedback-stay-bill { border-color: #c4d0bd; color: #5d7166; font-size: 11px; padding-top: 8px; gap: 10px; }
body #turn-feedback.event-feedback .feedback-stay-bill b { color: #b94e53; font-size: 21px; font-weight: 750; }
body #turn-feedback.event-feedback .feedback-stay-bill[data-waived=true] b { color: #287b5d; font-size: 15px; }
body #turn-feedback.event-feedback .v26-shopping-die { width: 52px; height: 52px; color: #24585c; border: 1px solid #809f8c; border-radius: 3px; background: #f3e8c4; box-shadow: inset 2px 2px #fffcef, inset -2px -2px #d3c597, 0 3px #8ba698; }
body #turn-feedback.event-feedback .v26-shopping-die > span { font-size: 24px; }

body #event-dice {
  width: min(300px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  color: #183f46;
  filter: drop-shadow(0 3px 0 #234e535c) drop-shadow(0 6px 8px #173d4426);
  font-family: var(--v33-display, system-ui, sans-serif);
}
body #event-dice .event-dice-panel {
  padding: 12px 16px 17px;
  border: 2px solid #225d61;
  border-radius: 2px;
  background:
    linear-gradient(135deg, #e3c680 0 6px, transparent 6px) top left / 13px 13px no-repeat,
    linear-gradient(225deg, #e3c680 0 6px, transparent 6px) top right / 13px 13px no-repeat,
    linear-gradient(45deg, #e3c680 0 6px, transparent 6px) bottom left / 13px 13px no-repeat,
    linear-gradient(315deg, #e3c680 0 6px, transparent 6px) bottom right / 13px 13px no-repeat,
    linear-gradient(135deg, #f8f4e4, #e1e8d7);
  box-shadow: inset 0 0 0 2px #69978b, inset 0 0 0 4px #edf3df;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
body #event-dice .event-dice-actor { margin: 0; padding: 1px 4px 5px; background: transparent; color: #5e7a6b; font-size: 11px; font-weight: 500; }
body #event-dice .event-dice-title { gap: 7px; margin: 0; padding: 0 3px 9px; border-bottom: 1px solid #afc4ad; background: transparent; color: #245c62; font-size: 23px; font-weight: 750; line-height: 1.3; text-shadow: none; }
body #event-dice .event-dice-title::before { width: 34px; height: 34px; flex: 0 0 34px; image-rendering: auto; }
body #event-dice[data-stay-kind=hotel] .event-dice-title::before { background-image: url('../assets/ui-v35/property-hotel.png'); }
body #event-dice .event-dice-stage { height: 159px; margin: 0; perspective-origin: 50% 40%; }
body #event-dice .event-dice-stage::before,
body #event-dice .event-dice-stage::after { display: none; }
body #event-dice .event-dice-platform {
  left: 10%;
  right: 10%;
  bottom: 9px;
  height: 61px;
  border: 2px solid #396f6b;
  border-radius: 2px;
  background: #70a598;
  box-shadow: 0 5px #477c70, 0 8px #2d625d, inset 0 0 0 3px #b9d3b7, inset 0 0 0 5px #558e7f;
  clip-path: polygon(9% 0, 91% 0, 100% 20%, 100% 80%, 91% 100%, 9% 100%, 0 80%, 0 20%);
}
body #event-dice .event-dice-body { width: 68px; height: 68px; left: calc(50% - 34px); top: 42px; font-size: 68px; }
body #event-dice .event-dice-face { border: 2px solid #658678; border-radius: 5px; background: #fffbed; box-shadow: inset 2px 2px #fff, inset -2px -2px #d0cdb5; }
body #event-dice .event-dice-top { background: #fffef4; }
body #event-dice .event-dice-bottom { background: #bfbea8; }
body #event-dice .event-dice-right { background: #d4d7bf; }
body #event-dice .event-dice-left { background: #e5e9d6; }
body #event-dice .event-dice-pips i { border-radius: 50%; background: #1f4b52; box-shadow: inset 1px 1px #173d45; }
body #event-dice .event-dice-shadow { bottom: 28px; background: #2f685a; width: 79px; left: calc(50% - 39px); opacity: .3; }
body #event-dice .event-dice-roll { min-height: 46px; padding: 9px; border: 1px solid #9c803e; border-radius: 2px; background: linear-gradient(135deg, #ffe28a, #eec34e); color: #224f57; box-shadow: inset 1px 1px #fff3c5, inset -1px -3px #bf953d, 0 2px #4b7771; font-size: 21px; font-weight: 750; letter-spacing: .01em; 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); }
body #event-dice .event-dice-roll:hover:not(:disabled) { background: linear-gradient(135deg, #ffebb0, #f5cd62); }
body #event-dice .event-dice-roll:focus-visible { outline-color: #2d7a73; }
body #event-dice .event-dice-roll i { height: 2px; background: #ab822f; }
body #event-dice .event-dice-status { height: 37px; line-height: 37px; color: #2b7565; font-size: 24px; font-weight: 750; }
body #event-dice[data-state=rolling] .event-dice-status { color: #58776a; font-size: 13px; }
body #toast { max-width: min(360px, calc(100vw - 28px)); padding: 12px 17px; border: 2px solid #376e69; border-radius: 2px; background: linear-gradient(135deg, #f9f5e5, #e6ecdc); color: #214a51; box-shadow: inset 0 0 0 2px #b7cdb5, 0 3px 0 #204d545c, 0 5px 12px #173d4426; font-size: 14px; font-weight: 600; }
body #toast strong { color: #214a51; }
body #toast span { color: #5a7568; }

body #tile-hover { padding: 8px 10px; border: 1px solid #77998b; border-radius: 2px; background: #f7f4e5; color: #284e55; box-shadow: 0 2px #4d7971, inset 0 1px #fffcef; font-size: 12px; }

@media (max-width: 520px) {
  body #turn-feedback.event-feedback { width: min(340px, calc(100vw - 22px)); }
  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: 84px minmax(0, 1fr); gap: 9px 13px; padding: 16px; min-height: 136px; }
  body #turn-feedback.event-feedback .feedback-receipt[data-kind=rent] .feedback-symbol { width: 95px; height: 101px; }
  body #turn-feedback.event-feedback .feedback-symbol { width: 70px; height: 70px; }
  body #turn-feedback.event-feedback .feedback-symbol.v26-art-symbol { width: 80px; }
  body #turn-feedback.event-feedback .feedback-eyebrow { font-size: 20px; }
  body #turn-feedback.event-feedback .feedback-detail { font-size: 12px; }
  body #turn-feedback.event-feedback .feedback-value { font-size: 28px; }
  body #turn-feedback.event-feedback .feedback-card-art.v26-reward-art,
  body #turn-feedback.event-feedback .v26-reward-art > .v26-card-art { width: 72px; }
  body #turn-feedback.event-feedback .feedback-symbol > .v26-spirit-art { width: 74px; height: 86px; }
  body #turn-feedback.event-feedback .feedback-symbol > .v26-card-art { width: 64px; }
  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: minmax(0, 1fr) auto; }
}
@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: 72px minmax(0, 1fr); gap: 8px 10px; padding: 15px; }
  body #turn-feedback.event-feedback .feedback-receipt[data-kind=rent] .feedback-symbol { width: 79px; height: 90px; }
  body #turn-feedback.event-feedback .feedback-eyebrow { font-size: 18px; }
  body #turn-feedback.event-feedback .feedback-value { font-size: 26px; }
  body #turn-feedback.event-feedback .feedback-card-copy h3 { font-size: 19px; }
  body #turn-feedback.event-feedback .feedback-stay-outcome { max-width: 60px; margin: 0; font-size: 14px; padding: 6px; }
  body #turn-feedback.event-feedback .feedback-stay-heading { gap: 7px; }
  body #turn-feedback.event-feedback .feedback-stay-art { width: 36px; height: 42px; }
  body #turn-feedback.event-feedback .feedback-stay-heading h3 { font-size: 15px; }
  body #turn-feedback.event-feedback .feedback-stay-bill { flex-wrap: wrap; gap: 5px; }
  body #event-dice .event-dice-panel { padding: 12px 16px 17px; }
  body #event-dice .event-dice-title { font-size: 21px; }
  body #event-dice .event-dice-title::before { width: 31px; height: 31px; flex-basis: 31px; }
  body #event-dice .event-dice-roll { font-size: 20px; min-height: 46px; }
}
@media (max-height: 500px) and (min-width: 501px) {
  body #event-dice { width: min(286px, calc(100vw - 24px)); }
  body #event-dice .event-dice-panel { padding: 9px 15px 13px; }
  body #event-dice .event-dice-actor { font-size: 10px; padding: 0 4px 3px; min-height: 11px; }
  body #event-dice .event-dice-title { font-size: 19px; padding-bottom: 6px; }
  body #event-dice .event-dice-title::before { width: 27px; height: 27px; flex-basis: 27px; }
  body #event-dice .event-dice-stage { height: 108px; }
  body #event-dice .event-dice-body { width: 54px; height: 54px; font-size: 54px; left: calc(50% - 27px); top: 21px; }
  body #event-dice .event-dice-platform { height: 47px; bottom: 3px; left: 17%; right: 17%; }
  body #event-dice .event-dice-shadow { bottom: 16px; width: 65px; left: calc(50% - 32px); }
  body #event-dice .event-dice-roll { min-height: 39px; font-size: 18px; padding: 7px; }
  body #event-dice .event-dice-status { height: 30px; line-height: 30px; font-size: 22px; }
}