/* The ticket follows its content. Nothing is positioned against viewport height. */
html { min-height: 100%; }
body, body:not(.wall-body):not(.presentation-mode) {
  padding: 0;
  background: #f6df8c !important;
  background-image: none !important;
}
.ticket-shell {
  --ticket-ink: #142b59;
  --ticket-blue: #104c9f;
  --ticket-red: #bf242b;
  container-type: inline-size;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 0 0 max(32px, env(safe-area-inset-bottom));
  color: var(--ticket-ink);
  background: #ffdf49 url('ticket-backdrop.webp') center / 100% 100% no-repeat;
  box-shadow: 0 0 36px #6a441226;
}
.ticket-hero {
  width: 100%;
  aspect-ratio: 853 / 422;
  background: url('design-1-art.webp') center top / 100% auto no-repeat;
}
.ticket-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ticket-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
  margin: 8px 8% 0;
}
.ticket-room, .ticket-points {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 66px;
  padding: 9px 7px;
  color: #fff6d5;
  border: 3px solid #fff2bf;
  border-radius: 14px !important;
  box-shadow: 0 0 0 3px var(--ticket-ink), 0 5px 0 #ac202a !important;
}
.ticket-room { background: var(--ticket-blue); }
.ticket-points { background: var(--ticket-red); flex: none; }
.ticket-room > i { font-size: 22px; flex-shrink: 0; }
.ticket-points > i { font-size: 22px; color: #ffe368; }
.ticket-room-stack, .ticket-point-stack { display: flex; flex-direction: column; min-width: 0; text-align: center; gap: 3px; }
.ticket-room-stack strong { font-size: clamp(11px, 3.1cqi, 15px); line-height: 1.25; overflow-wrap: anywhere; }
.ticket-room-stack small { font-size: 10px; line-height: 1.3; color: #ffe368; overflow-wrap: anywhere; }
.ticket-point-stack strong { font-family: 'Unbounded', sans-serif; font-size: clamp(16px, 4.6cqi, 23px); line-height: 1.15; }
.ticket-point-stack small { font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ticket-meta-star { align-self: center; color: var(--ticket-blue); font-size: 14px; }
.ticket-hint { margin: 18px 9% 11px; text-align: center; font-size: 11px; font-weight: 800; line-height: 1.5; color: #604322; }
.ticket-board-wrap { margin: 0 7.5%; }
.ticket-shell .grid { width: 100%; max-width: none; margin: 0; padding: 0; gap: clamp(6px, 1.8cqi, 9px); }
.ticket-shell .state-msg { padding: 40px 12px; color: var(--ticket-ink); }
.ticket-shell .card {
  min-width: 0;
  padding: 0;
  aspect-ratio: .94;
  border: 3px solid var(--ticket-ink) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 #8a8e8f !important;
  background: #c4cbd1 url('scratch-foil.webp') center / cover no-repeat !important;
  color: var(--ticket-ink);
  touch-action: manipulation;
}
.ticket-shell .card:hover { filter: brightness(1.05); }
.ticket-shell .card:focus-visible, .ticket-shell button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ticket-shell .card-num { position: absolute; inset: 9% 0 auto; padding: 0; border: 0; background: transparent; text-align: center; font-size: clamp(14px, 4.2cqi, 22px); line-height: 1; color: var(--ticket-ink); }
.ticket-shell .card-icon { margin: 21% 0 0; font-size: clamp(25px, 7.4cqi, 40px); line-height: 1; color: var(--ticket-ink); filter: none; }
.ticket-shell .grid[data-size="5"] .card-num { font-size: clamp(12px, 3.5cqi, 18px); }
.ticket-shell .grid[data-size="5"] .card-icon { font-size: clamp(19px, 5.8cqi, 30px); }
.ticket-shell .card.done { background: #078ccf url('reveal-blue.webp') center / cover no-repeat !important; }
.ticket-shell .card.done:nth-child(8n+6) { background-image: url('reveal-red.webp') !important; }
.ticket-shell .card.done .card-num { color: #fff; text-shadow: 1px 2px 0 #153573; }
.ticket-shell .done-selfie { opacity: .25; }
.ticket-shell .done-check { position: absolute; inset: 10% 0 0; display: grid; place-items: center; color: #fff; font-family: 'Font Awesome 6 Free'; font-size: clamp(30px, 10cqi, 52px); font-weight: 900; text-shadow: 2px 3px 0 #163469; }
.ticket-shell .grid[data-size="5"] .done-check { font-size: clamp(25px, 8cqi, 42px); }
.ticket-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 10% 0;
  min-height: 58px;
  padding: 11px 14px;
  background: var(--ticket-blue);
  color: #fff6d5;
  border: 3px solid #fff2bf;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--ticket-ink), 0 5px 0 #bd242b;
}
.ticket-progress > span { font-family: 'Unbounded', sans-serif; font-size: clamp(15px, 4.5cqi, 22px); font-weight: 900; text-transform: uppercase; }
.ticket-progress small { color: #ffe368; font-size: 11px; font-weight: 900; text-align: right; }
.ticket-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 9% 0; }
.ticket-footer button { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 58px; padding: 10px 8px; color: var(--ticket-ink); background: #fff5d2; border: 3px solid var(--ticket-ink); border-radius: 16px !important; box-shadow: 0 0 0 2px #fff0b4, 0 4px 0 #ad2028 !important; font-size: 11px; line-height: 1.35; }
.ticket-footer button i { font-size: 20px; color: var(--ticket-blue); }
.ticket-footer button span { border-left: 1px solid #214f8f; padding-left: 8px; }
.ticket-footer .reflect-fab { display: none; position: static; grid-column: 1 / -1; width: 100%; margin: 3px 0 0; animation: none; background: #d6efd3; }
.ticket-footer .reflect-fab.unlocked { display: flex; }
.ticket-reset { width: 100%; margin-top: 12px; color: #891c25; background: #fff4d0; font-size: .75rem; }
.overlay, .reflection-overlay { background: #102348d9; }
.overlay .modal, .reflection-box { background: #fff4d1; border: 3px solid #174384 !important; border-radius: 16px !important; box-shadow: 6px 7px 0 #b62830 !important; }
.overlay .modal h2, .reflection-box h2 { color: #104c9f; font-size: clamp(21px, 6vw, 28px); line-height: 1.15; }
.overlay .modal button, .reflection-box button { border-radius: 10px !important; }
.overlay .modal .btn-buy, .reflection-box .btn-yellow { background: #bd242b; color: #fff; }
.overlay .modal .btn-green { background: #c8edcf; color: #173e34; }
.overlay .modal .criteria-box { background: #ffe37e; border-color: #15376e; color: #15376e; box-shadow: 3px 3px 0 #15376e; }
.overlay .modal input:focus, .overlay .modal textarea:focus { background: #fff; outline: 3px solid #1956a4; }
.overlay .modal strong[style*="var(--yellow)"] { color: #154c93 !important; }
.overlay .modal { padding: 25px; max-height: 90dvh; }
.overlay .modal button, .reflection-box button { border-color: #15376e; box-shadow: 0 3px 0 #15376e; font-size: 12px; }
.overlay .modal .btn-ghost { background: #fff9e8; color: #15376e; }
.overlay .modal .btn-camera { border-color: #17569b; color: #15376e; background: #e9f1f6; }
.overlay .modal input, .overlay .modal textarea { border: 2px solid #b7a779 !important; border-radius: 9px !important; background: #fffaf0; color: #15376e; font-size: 16px; }
.overlay .score-panel { padding: 20px 17px; background: #104b9c; border: 2px solid #15376e; border-radius: 12px; box-shadow: 0 4px 0 #cba449; }
.overlay .score-label { color: #fff3ce; font-size: 11px; line-height: 1.4; }
.overlay .score-value { color: #fff3ce; font-size: 14px; text-align: right; }
.overlay .score-row { gap: 12px; }
.overlay .score-row:last-child { border-top: 1px solid #90acd2; }
.overlay .score-final { color: #15315c; background: #ffdc68; border: 0; border-radius: 6px; font-size: 20px !important; padding: 7px; }
.overlay #sUnclaimed { color: #ffe38a !important; }
.overlay .multiplier-track { height: 7px; background: #2c67b0; border: 0; border-radius: 4px; overflow: hidden; }
.overlay .multiplier-fill { background: #ffda63; border: 0; }
.overlay .ledger-wrap { border: 1px solid #c9b57e; border-radius: 9px; overflow: hidden; box-shadow: none; background: #fff9e8; }
.overlay th { background: #15376e; padding: 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; }
.overlay td { padding: 10px; border-bottom: 1px solid #e5d7b2; font-size: 11px; color: #15376e; overflow-wrap: anywhere; }
.overlay .pos { background: #e1edda; color: #285c39; }
.overlay .neg { background: #f6dfd6; color: #9b3038; }
.overlay .step-num { background: #104b9c; border-color: #15376e; box-shadow: 2px 2px 0 #c99f43; }
.reflection-close { float: right; width: 34px; min-height: 34px; margin: -10px -10px 5px 10px; padding: 5px; background: #fff8df; color: #15376e; }
.toast { max-width: min(90%, 480px); padding: 12px 17px; border: 2px solid #173c76; border-radius: 10px !important; box-shadow: 0 4px 0 #173c76; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; line-height: 1.4; text-transform: none; }
.toast { opacity: 0; visibility: hidden; background: #15376e; color: #fff3ce; }
.toast.up { opacity: 1; visibility: visible; }
.toast.ok { background: #e0efdb; color: #245332; border-color: #28583c; }
.toast.err { background: #fff0d2; color: #922d33; border-color: #922d33; }
@media (max-width: 350px) {
  .ticket-meta { gap: 6px; }
  .ticket-room, .ticket-points { gap: 4px; padding-inline: 5px; }
  .ticket-room > i, .ticket-points > i { font-size: 17px; }
  .ticket-footer { gap: 9px; }
  .ticket-footer button { font-size: 10px; gap: 6px; }
  .ticket-progress { padding-inline: 10px; }
  .ticket-progress small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ticket-shell *, .toast { animation: none !important; transition: none !important; } }