/* Layout concept: a bright storybook music hall. The home page is a striped counter stall beside a ticket-shaped menu; in play, guests stand left of the keeper with the felt-lined rack on the right, and on a phone the rack drops below. */
:root {
  color-scheme: light;
  --ink: #2b2140;
  --ink-soft: #62577a;
  --paper: #fff8e8;
  --paper-2: #fbeccb;
  --line: #e7d3a6;
  --teal: #17908a;
  --teal-deep: #0e6c67;
  --coral: #e8504d;
  --brass: #f0b63e;
  --brass-hi: #ffe59e;
  --brass-lo: #b5801f;
  --oak: #c98a4b;
  --oak-hi: #e0a868;
  --oak-lo: #94602f;
  --felt: #57b9ae;
  --felt-lo: #3a9a90;
  --bad: #c92a45;
  --display: "Rozha One", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Mukta", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overscroll-behavior: none; -webkit-touch-callout: none; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.4; overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
#app { height: 100%; position: relative; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }

.screen { position: absolute; inset: 0; animation: screen-in .45s ease both; }
@keyframes screen-in { from { opacity: 0; } }
.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
.glow { animation: flicker 3.2s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 30% { opacity: .8; } 52% { opacity: .96; } 70% { opacity: .74; } }

.btn-brass {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 8px 30px;
  font-family: var(--display); font-size: 1.25rem; letter-spacing: .01em; color: #3d2706; border-radius: 14px;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 60%);
  box-shadow: 0 2px 0 #fff6d8 inset, 0 5px 0 var(--brass-lo), 0 12px 20px rgba(120, 80, 20, .28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-brass:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-brass:active { transform: translateY(4px); box-shadow: 0 2px 0 #fff6d8 inset, 0 1px 0 var(--brass-lo); }
.btn-plain { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 6px 18px; font-weight: 700; color: var(--ink); border-radius: 12px; background: var(--paper-2); box-shadow: 0 0 0 2px var(--line) inset; transition: background .12s ease, transform .1s ease; }
.btn-plain:hover { background: #ffe9b8; }
.btn-plain:active { transform: scale(.97); }
.btn-plain svg { width: 20px; height: 20px; }
.btn-danger { color: var(--bad); }

/* Token */
.token {
  --size: 52px; position: relative; display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;
  font-family: var(--display); font-size: calc(var(--size) * .42); line-height: 1; color: #55360a; padding-top: calc(var(--size) * .1);
  background: radial-gradient(circle at 34% 28%, #fff4c8, var(--brass) 52%, #c98f2b 100%);
  box-shadow: 0 0 0 2px var(--brass-lo), 0 0 0 calc(var(--size) * .05) #e6ab3a inset, 0 3px 6px rgba(70, 40, 10, .35);
}
.token::before { content: ""; position: absolute; top: calc(var(--size) * .08); left: 50%; width: calc(var(--size) * .13); height: calc(var(--size) * .13); margin-left: calc(var(--size) * -.065); border-radius: 50%; background: #6b4413; box-shadow: 0 1px 0 #fff0bf; }

/* Home */
@keyframes rise-in { from { transform: translateY(24px); opacity: 0; } }
.kicker { font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); }
.mini-stars { display: flex; gap: 2px; }
.awning { position: relative; z-index: 3; width: 104%; margin-left: -2%; height: clamp(54px, 10vh, 86px); }
@keyframes breathe { 50% { transform: translateY(-3px) scale(1.01); } }
@keyframes bob { 50% { transform: translateY(-7px) rotate(-2deg); } }

/* Modals: how to play, settings, pause */
.modal-wrap { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(50, 35, 70, .48); backdrop-filter: blur(4px); animation: screen-in .2s ease both; }
.modal { position: relative; display: flex; flex-direction: column; gap: 16px; width: min(500px, 100%); padding: 24px; background: var(--paper); border-radius: 22px; box-shadow: 0 30px 70px rgba(40, 20, 50, .4); animation: pop .26s cubic-bezier(.3, 1.3, .5, 1) both; }
.modal.wide { width: min(720px, 100%); }
.modal h2 { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.05; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-actions .btn-brass { flex: 1 1 200px; }
.modal-actions .btn-plain { flex: 1 1 120px; }

.setting { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; }
.setting > label, .setting > span { font-weight: 700; }
.setting small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .8rem; line-height: 1.2; }
.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-row output { width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-soft); }
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 28px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 9px; background: linear-gradient(90deg, var(--teal) var(--pct, 50%), var(--line) var(--pct, 50%)); }
input[type="range"]::-moz-range-track { height: 10px; border-radius: 9px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 10px; border-radius: 9px; background: var(--teal); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -8px; border-radius: 50%; border: 0; background: radial-gradient(circle at 34% 28%, #fff4c8, var(--brass) 60%); box-shadow: 0 0 0 2px var(--brass-lo), 0 2px 5px rgba(70, 40, 10, .4); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--brass); box-shadow: 0 0 0 2px var(--brass-lo); }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 12px; background: var(--paper-2); box-shadow: 0 0 0 2px var(--line) inset; }
.segmented button { min-height: 40px; padding: 2px 6px; border-radius: 9px; font-weight: 700; color: var(--ink-soft); }
.segmented button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.switch { position: relative; width: 58px; height: 32px; border-radius: 99px; background: var(--line); transition: background .15s ease; justify-self: start; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.switch[aria-checked="true"] { background: var(--teal); }
.switch[aria-checked="true"]::after { transform: translateX(26px); }
.settings-list { display: flex; flex-direction: column; gap: 8px; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.step { display: flex; flex-direction: column; gap: 6px; }
.step-art { position: relative; display: grid; place-items: center; aspect-ratio: 1.1; border-radius: 14px; background: linear-gradient(180deg, #d6f0ea, #a9dcd3); overflow: hidden; }
.step-art.wood { background: linear-gradient(180deg, var(--oak-hi), var(--oak)); }
.step-art .pair { width: 76%; }
.step-art .token { --size: 58px; }
.step-art .arrow { position: absolute; right: 8px; top: 6px; font-family: var(--display); font-size: 1.2rem; color: var(--teal-deep); }
.step h3 { font-family: var(--display); font-weight: 400; font-size: 1.08rem; line-height: 1.1; }
.step h3 small { display: inline-block; margin-right: 4px; font: inherit; color: var(--coral); }
.step p { font-size: .92rem; line-height: 1.25; color: var(--ink-soft); }
.how-note { padding: 10px 14px; border-radius: 12px; background: var(--paper-2); font-size: .95rem; line-height: 1.3; }

/* Story scenes */
.story { display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; }
.story-actor { position: absolute; bottom: 0; z-index: 1; width: min(64vh, 72vw); max-width: 560px; left: 50%; transform: translateX(-50%); animation: actor-in .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.story-actor.right { left: auto; right: 5vw; transform: none; animation-name: actor-in-r; }
.story-actor.left { left: 5vw; transform: none; animation-name: actor-in-l; }
.story-actor .person { width: 100%; filter: drop-shadow(0 10px 24px rgba(60, 30, 40, .3)); }
@keyframes actor-in-l { from { transform: translateX(-30px); opacity: 0; } }
@keyframes actor-in-r { from { transform: translateX(30px); opacity: 0; } }
@keyframes actor-in { from { opacity: 0; } }
.story-box { position: relative; z-index: 2; margin-inline: auto; margin-bottom: max(20px, env(safe-area-inset-bottom, 0px)); width: min(820px, calc(100% - 32px)); min-height: 150px; padding: 26px 28px 16px; background: var(--paper); border-radius: 20px; box-shadow: 0 0 0 3px var(--brass), 0 20px 44px rgba(50, 25, 40, .38); }
.story-name { position: absolute; top: -18px; left: 22px; padding: 2px 16px 4px; font-family: var(--display); font-size: 1.1rem; color: #fff; background: var(--coral); border-radius: 10px; box-shadow: 0 3px 0 #b93432; }
.story-text { font-size: clamp(1.1rem, 2.6vw, 1.32rem); line-height: 1.42; min-height: 3.6em; max-width: 62ch; }
.story-text.narr { font-family: var(--hand); color: var(--ink); }
.story-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; color: var(--ink-soft); font-size: .92rem; }
.story-skip { position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); background: var(--paper); }
.next-mark { animation: nudge 1s ease-in-out infinite; color: var(--coral); font-weight: 700; }
@keyframes nudge { 50% { transform: translateX(4px); } }

/* Game layout */
.game { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "hud hud" "scene rack" "desk rack"; height: 100%; }
.hud { grid-area: hud; display: flex; align-items: center; gap: 14px; padding: 6px max(12px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); background: var(--paper); box-shadow: 0 2px 0 var(--line); z-index: 5; }
.hud-title { font-family: var(--display); font-size: 1.15rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.hud-title small { font-family: var(--body); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); margin-right: 8px; }
@keyframes puff { 30% { transform: scale(1.3) translateY(-4px); } }
.tips { display: flex; align-items: center; gap: 5px; font-family: var(--display); font-size: 1.2rem; color: #8a5a10; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin { display: inline-block; width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c8, var(--brass) 60%); box-shadow: 0 0 0 1.5px var(--brass-lo); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); flex: none; }
.icon-btn:hover { background: var(--paper-2); }
.icon-btn svg { width: 23px; height: 23px; }

.scene { grid-area: scene; position: relative; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.stage-row { position: relative; display: grid; grid-template-columns: repeat(var(--seats, 3), minmax(0, 1fr)) minmax(92px, .85fr); padding-inline: 8px; min-height: 0; }
.slot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.figure { position: relative; width: min(100%, 190px); margin-bottom: -2px; }
.figure .person { width: 100%; filter: drop-shadow(0 4px 8px rgba(70, 35, 40, .3)); }
.figure.enter { animation: walk-in .55s cubic-bezier(.2, .8, .3, 1.1) both; }
.figure.leave { animation: walk-out .5s ease-in both; }
.figure.shake { animation: shake .35s; }
@keyframes walk-in { from { transform: translateX(-110%) translateY(8px); opacity: 0; } }
@keyframes walk-out { to { transform: translateX(-120%); opacity: 0; } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.bubble { position: relative; z-index: 3; width: 94%; max-width: 188px; padding: 6px 9px 7px; margin-bottom: 5px; background: #fff; color: var(--ink); border-radius: 12px; font-size: .92rem; line-height: 1.22; font-weight: 600; text-align: center; box-shadow: 0 4px 10px rgba(70, 35, 40, .25); animation: pop .22s cubic-bezier(.3, 1.5, .5, 1) both; }
.bubble::after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #fff; }
.bubble.vip { background: #fff0b8; }
.bubble.vip::after { border-top-color: #fff0b8; }
.bubble.bad { background: #ffdde1; color: #7d1730; }
.bubble.bad::after { border-top-color: #ffdde1; }
.bubble-row { display: flex; align-items: center; justify-content: center; gap: 7px; }
.bubble .token { --size: 42px; flex: none; }
.chip { display: inline-block; padding: 0 7px; margin-top: 3px; border-radius: 99px; font-size: .78rem; font-weight: 700; background: var(--teal-deep); color: #fff; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.patience { position: absolute; left: 12%; right: 12%; bottom: 7px; height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .85); overflow: hidden; box-shadow: 0 0 0 1.5px rgba(43, 33, 64, .55); }
.patience i { display: block; height: 100%; width: 100%; background: var(--teal); border-radius: inherit; transition: background .25s; }
.patience i.mid { background: var(--brass); }
.patience i.low { background: var(--coral); }

.keeper { position: relative; display: flex; align-items: flex-end; justify-content: center; min-width: 0; transition: transform .22s ease; }
.keeper .person { width: min(100%, 170px); filter: drop-shadow(0 4px 8px rgba(70, 35, 40, .3)); }
.keeper.reach { transform: translateX(12px) translateY(-5px); }
.keeper.give { transform: translateX(-14px); }
.carry { position: absolute; left: 50%; bottom: 44%; width: 64%; margin-left: -32%; z-index: 2; animation: pop .2s ease both; filter: drop-shadow(0 4px 8px rgba(40, 20, 20, .4)); }

.counter { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--seats, 3), minmax(0, 1fr)) minmax(92px, .85fr); padding: 0 8px; min-height: 58px; align-items: end; background: linear-gradient(180deg, var(--oak-hi) 0, var(--oak) 8px, var(--oak-lo) 100%); border-top: 3px solid #f0c78f; box-shadow: 0 -5px 14px rgba(70, 35, 40, .22); }
.spot { display: flex; justify-content: center; align-items: flex-end; min-width: 0; height: 62px; margin-top: -12px; }
.shoes-btn { width: min(100%, 118px); position: relative; border-radius: 10px; transition: transform .14s ease; animation: drop .3s .25s cubic-bezier(.3, 1.4, .5, 1) both; }
.shoes-btn:hover { transform: translateY(-5px) scale(1.05); }
.shoes-btn.shine::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 170, .8), transparent 66%); animation: flicker 1.3s infinite; pointer-events: none; }
@keyframes drop { from { transform: translateY(-26px); opacity: 0; } }

.desk { grid-area: desk; padding: 7px 12px 10px; background: var(--paper); box-shadow: 0 -2px 0 var(--oak-lo); padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
.ledger { position: relative; z-index: 21; min-height: 2.25em; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; font-family: var(--hand); font-size: 1.1rem; line-height: 1.12; color: var(--ink); margin-bottom: 6px; }
.ledger .btn-choice { font-family: var(--body); font-weight: 700; font-size: .95rem; min-height: 44px; padding: 4px 14px; border-radius: 10px; }
.btn-choice.good { background: var(--teal); color: #fff; }
.btn-choice.risky { background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 2px var(--line) inset; }

.rack { grid-area: rack; position: relative; display: flex; flex-direction: column; min-height: 0; background: linear-gradient(90deg, var(--oak-lo), var(--oak) 6%, var(--oak-hi) 50%, var(--oak) 94%, var(--oak-lo)); padding: 8px 14px 14px; padding-right: max(14px, env(safe-area-inset-right, 0px)); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); box-shadow: -3px 0 0 var(--oak-lo); }
.box { position: relative; min-width: 0; min-height: 0; border-radius: 4px 4px 12px 12px; background: linear-gradient(180deg, var(--felt-lo), var(--felt) 38%); box-shadow: inset 0 7px 10px rgba(10, 60, 60, .42), 0 2px 0 #f0c78f, 0 0 0 2px var(--oak-lo); transition: box-shadow .15s ease, transform .1s ease, filter .15s ease; display: grid; place-items: center; overflow: hidden; }
.box:hover { filter: brightness(1.07); box-shadow: inset 0 7px 10px rgba(10, 60, 60, .42), 0 2px 0 #f0c78f, 0 0 0 3px var(--brass-hi); }
.box:active { transform: scale(.97); }
.plate { position: absolute; left: 6px; top: 5px; min-width: 25px; padding: 0 5px; border-radius: 4px; font-family: var(--display); font-size: 1rem; line-height: 1.3; text-align: center; color: #4d3006; background: linear-gradient(180deg, var(--brass-hi), var(--brass)); box-shadow: 0 1px 3px rgba(40, 30, 10, .5); z-index: 2; }
.box .pair { width: min(82%, 118px); margin-top: 10px; animation: drop .22s ease both; }
.box.shake { animation: shake .3s; }
.pulse { animation: pulse 1.05s ease-in-out infinite !important; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 80, 77, .8); } 50% { box-shadow: 0 0 0 9px rgba(232, 80, 77, 0), 0 0 20px 6px rgba(232, 80, 77, .55); } }

.flyer { position: fixed; z-index: 40; pointer-events: none; }
.flyer .pair { width: 100%; }
.tip-pop { position: fixed; z-index: 45; font-family: var(--display); font-size: 1.5rem; color: #fff; -webkit-text-stroke: 1px #8a5a10; text-shadow: 0 2px 3px rgba(60, 30, 10, .6); pointer-events: none; animation: rise 1s ease-out both; }
.tip-pop.bad { -webkit-text-stroke-color: var(--bad); color: #ffe3e6; }
@keyframes rise { to { transform: translateY(-46px); opacity: 0; } }

/* Power cut: dim room, with a pool of lantern light around the last touch */
.blackout { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(circle 165px at var(--lx, 75%) var(--ly, 55%), rgba(255, 200, 100, .08) 0, rgba(25, 20, 60, .3) 58%, rgba(25, 20, 60, .84) 100%); }
.blackout.on { opacity: 1; animation: stutter .5s steps(2) 1; }
@keyframes stutter { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: .2; } 100% { opacity: 1; } }

.overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(50, 35, 70, .42); backdrop-filter: blur(3px); overflow: auto; animation: screen-in .3s ease both; }
.round-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: min(520px, 100%); padding: 30px 26px; background: var(--paper); border-radius: 22px; box-shadow: 0 26px 60px rgba(40, 20, 50, .35); animation: pop .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.round-card .eyebrow { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); font-size: .85rem; }
.round-card h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 7vw, 3.8rem); line-height: 1; text-wrap: balance; color: var(--coral); }
.round-card p { font-size: 1.12rem; margin-bottom: 8px; text-wrap: balance; color: var(--ink-soft); }

/* Results: a page from the keeper's ledger */
.ledger-book { width: min(470px, 100%); padding: 10px 10px 10px 24px; background: linear-gradient(90deg, #127a75, var(--teal)); border-radius: 8px 16px 16px 8px; box-shadow: 0 26px 56px rgba(40, 20, 50, .4); animation: pop .35s ease both; }
.ledger-page { padding: 20px 22px 18px; background: repeating-linear-gradient(180deg, #fffaf0 0 33px, #efe2c6 33px 34px); border-radius: 3px 10px 10px 3px; display: flex; flex-direction: column; gap: 8px; }
.ledger-page h2 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; text-wrap: balance; }
.stars { display: flex; gap: 4px; }
.ledger-rows { display: grid; grid-template-columns: 1fr auto; font-family: var(--hand); font-size: 1.22rem; line-height: 34px; }
.ledger-rows b { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.ledger-note { font-family: var(--hand); font-size: 1.15rem; line-height: 1.3; color: var(--teal-deep); }
.ledger-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

/* Ending */

/* Screens outside the round: map, rounds, shop */
.star { width: 22px; height: 22px; }
.mini-stars { display: flex; gap: 1px; }
.mini-stars .star { width: 16px; height: 16px; }
.stars { display: flex; gap: 4px; }
.stars .star { width: 40px; height: 40px; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.round-modal h2 { color: var(--coral); }
.round-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.round-facts div { display: flex; flex-direction: column; padding: 8px 4px; background: var(--paper-2); border-radius: 12px; }
.round-facts b { font: 400 1.5rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.round-facts span { font-size: .8rem; color: var(--ink-soft); }
.new-rule { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: #d9f1ec; font-size: .95rem; line-height: 1.3; }
.btn-buy { flex: none; min-height: 46px; padding: 4px 16px; font-size: 1.05rem; gap: 6px; font-variant-numeric: tabular-nums; }
.btn-buy:disabled { filter: grayscale(.9); opacity: .6; cursor: default; transform: none; }
.pips { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.pips i.on { background: var(--teal); }

/* Round: racks, line, timer and area colors */
.game[data-area="2"] { --felt: #ee9db4; --felt-lo: #d97794; --oak: #d9b98a; --oak-hi: #ecd3ac; --oak-lo: #a98858; }
.game[data-area="3"] { --felt: #6db4e0; --felt-lo: #4692c4; --oak: #d08a4a; --oak-hi: #e7ac6d; --oak-lo: #975f2d; }
.game[data-area="4"] { --felt: #8f74d0; --felt-lo: #6f54b4; --oak: #8e6a44; --oak-hi: #a98559; --oak-lo: #624626; }
.game[data-area="5"] { --felt: #cf4a5f; --felt-lo: #a93146; --oak: #c9992a; --oak-hi: #e6bd55; --oak-lo: #8f6b16; }
.game[data-skin="cherry"] { --oak: #a33a3f; --oak-hi: #c75a5d; --oak-lo: #6f2226; }
.game[data-skin="mint"] { --oak: #6fc2aa; --oak-hi: #98dac6; --oak-lo: #3f8f78; }
.game[data-skin="gold"] { --oak: #e0ae3a; --oak-hi: #f7d877; --oak-lo: #a67b17; }
.hud-timer { font: 400 1.25rem var(--display); font-variant-numeric: tabular-nums; padding: 0 10px; border-radius: 10px; background: var(--paper-2); }
.hud-timer.low { background: var(--coral); color: #fff; animation: flicker 1s infinite; }
.hud-combo { padding: 0 9px; font-weight: 700; font-size: .9rem; color: #fff; background: var(--teal); border-radius: 99px; white-space: nowrap; animation: pop .25s ease both; }
.queue-pill { position: absolute; z-index: 4; top: 8px; left: 8px; padding: 2px 12px; font-weight: 700; font-size: .9rem; color: #fff; background: rgba(43, 33, 64, .86); border-radius: 99px; }
.watcher { position: absolute; z-index: 1; left: 50%; top: 6px; width: 92px; transform: translateX(-50%); text-align: center; }
.watcher span { display: block; font-size: .68rem; font-weight: 700; line-height: 1.1; color: #fff; background: rgba(43, 33, 64, .86); border-radius: 6px; padding: 1px 4px; }
.token-btn { --size: 58px; animation: pop .25s cubic-bezier(.3, 1.6, .5, 1) both; margin-bottom: 2px; }
.token.fake::after { content: ""; position: absolute; top: 12%; right: calc(var(--size) * -.06); width: calc(var(--size) * .34); height: calc(var(--size) * .34); transform: rotate(-28deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20 3 7 10l13 7z' fill='%23fff'/%3E%3Cpath d='M20 3 7 10l13 7' fill='none' stroke='%236b4413' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.token.fake.scanned { box-shadow: 0 0 0 3px var(--bad), 0 0 0 calc(var(--size) * .05) #e6ab3a inset, 0 3px 6px rgba(70, 40, 10, .35); }
.reject-btn { min-height: 38px; padding: 2px 12px; margin-bottom: 4px; font-size: .86rem; font-weight: 700; color: #fff; background: var(--bad); border-radius: 10px; }
.clean-btn { position: absolute; right: 6px; bottom: calc(100% + 6px); z-index: 3; min-height: 40px; padding: 2px 14px; font-family: var(--body); font-size: .95rem; font-weight: 700; white-space: nowrap; color: #fff; background: var(--teal); border-radius: 10px; box-shadow: 0 3px 8px rgba(40, 20, 20, .4); }
.count-badge { position: absolute; right: -2px; top: -6px; padding: 0 6px; font-size: .78rem; font-weight: 700; color: #fff; background: var(--coral); border-radius: 99px; }
.chip-bad { background: var(--bad); }
.bubble-row .chip { margin-top: 0; white-space: nowrap; }
.bubble-row.scan { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 480px) { .game:not([style*="--seats:3"]) .bubble-row { flex-wrap: wrap; row-gap: 2px; } }
.bubble-shoe { display: block; width: 70px; }
.rain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .55; background-image: repeating-linear-gradient(105deg, transparent 0 16px, rgba(255, 255, 255, .7) 16px 17.5px, transparent 17.5px 34px); background-size: 200% 200%; animation: rain .5s linear infinite; }
@keyframes rain { to { background-position: -68px 120px; } }
.racks { flex: 1; display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); gap: 7px; min-height: 0; }
.racks[data-many="true"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rack-unit { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 3px 5px 5px; background: rgba(60, 35, 15, .2); border-radius: 8px; transition: box-shadow .15s ease; }
.rack-unit.lit { box-shadow: 0 0 0 3px var(--brass-hi), 0 0 18px 5px rgba(255, 229, 158, .85); }
.rack-unit.shake { animation: shake .35s 2; }
.rack-name { font: 400 .78rem/1.3 var(--display); color: #fff6e4; text-shadow: 0 1px 1px rgba(40, 20, 0, .5); }
.rack-slots { flex: 1; display: grid; grid-template-columns: repeat(var(--slots), minmax(0, 1fr)); gap: 5px; min-height: 0; }
.pair.small { transform: scale(.7); transform-origin: 50% 80%; }
.blackout.night { background: radial-gradient(circle 150px at var(--lx, 75%) var(--ly, 55%), rgba(255, 200, 100, .06) 0, rgba(20, 16, 60, .38) 55%, rgba(20, 16, 60, .86) 100%); }
.blackout.night.lamp-1 { background: radial-gradient(circle 230px at var(--lx, 75%) var(--ly, 55%), rgba(255, 200, 100, .06) 0, rgba(20, 16, 60, .22) 60%, rgba(20, 16, 60, .62) 100%); }
.blackout.night.lamp-2 { background: radial-gradient(circle 320px at var(--lx, 75%) var(--ly, 55%), rgba(255, 200, 100, .05) 0, rgba(20, 16, 60, .12) 60%, rgba(20, 16, 60, .4) 100%); }
.cut .ledger { color: #ffe9b0; }
.ledger-rows .neg { color: var(--bad); }
.ledger-rows .total { font-size: 1.4rem; font-weight: 700; }

/* Phone, upright: counter on top, rack below */
@media (max-aspect-ratio: 1/1) {
  .game { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(190px, 1fr) auto minmax(0, 1.05fr); grid-template-areas: "hud" "scene" "desk" "rack"; }
  .racks, .racks[data-many="true"] { gap: 5px; }
  .setting { grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
  .segmented button { font-size: .86rem; padding-inline: 2px; }
  .hud-timer { font-size: 1.05rem; padding: 0 6px; }
  .hud-title { font-size: .86rem; }
  .token-btn { --size: 44px; }
  .reject-btn { min-height: 34px; padding: 1px 8px; font-size: .76rem; }
  .bubble-shoe { width: 46px; }
  .watcher { width: 60px; }
  .rack { padding: 6px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); box-shadow: 0 -3px 0 var(--oak-lo); }
      .hud { gap: 7px; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(4px, env(safe-area-inset-right, 0px)); }
  .hud-title { font-size: .92rem; }
  .hud-title small { display: none; }
    .icon-btn { width: 36px; height: 36px; }
  .stage-row, .counter { grid-template-columns: repeat(var(--seats, 3), minmax(0, 1fr)) minmax(64px, .7fr); padding-inline: 3px; }
  .bubble { font-size: .78rem; padding: 4px 6px 5px; width: 98%; border-radius: 9px; }
  .bubble .token { --size: 32px; }
  .chip { font-size: .68rem; }
  .counter { min-height: 44px; }
  .spot { height: 46px; margin-top: -8px; }
  .desk { padding: 5px 8px 6px; }
  .ledger { font-size: .95rem; min-height: 2.1em; margin-bottom: 4px; }
        .plate { font-size: .85rem; left: 4px; top: 3px; min-width: 21px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-actor, .story-actor.left, .story-actor.right { left: 50%; right: auto; bottom: 150px; width: min(76vw, 44vh); transform: translateX(-50%); animation-name: actor-in; }
  .story-box { padding: 24px 18px 14px; }
}

/* Phone, on its side */
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .game { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .hud { padding-block: 1px; }
    .rack { padding-block: 4px; }
    .ledger { font-size: .86rem; min-height: 1.1em; margin-bottom: 2px; }
  .desk { padding: 2px 8px 4px; }
    .bubble { font-size: .72rem; padding: 2px 5px; }
  .bubble .token { --size: 26px; }
  .figure { width: min(100%, 100px); }
  .keeper .person { width: min(100%, 90px); }
  .counter { min-height: 32px; }
  .spot { height: 36px; margin-top: -6px; }
  .story-box { min-height: 90px; padding: 16px 16px 6px; margin-bottom: 6px; }
  .story-text { min-height: 2.8em; font-size: 1rem; }
  .story-actor, .story-actor.left, .story-actor.right { width: 42vh; }
  .kicker, .tag { display: none; }
  .step-art { aspect-ratio: 1.6; }
}

/* Inside the phone apps the game runs edge to edge, so screens keep clear of the notch themselves */
.native .hud { padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
.native .modal-wrap, .native .overlay { padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* A touch must not leave a button stuck in its hover pose */
@media (hover: none) {
  .btn-brass:hover, .shoes-btn:hover,   .box:hover { filter: none; box-shadow: inset 0 7px 10px rgba(10, 60, 60, .42), 0 2px 0 #f0c78f, 0 0 0 2px var(--oak-lo); }
}

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Premium shell: splash, sign-in, home, nav bar, map, shop, profile, settings
   One sunset city behind everything, cream cards on top, gold as the only foil.
   ========================================================================== */
:root {
  --plum: #2b1f55;
  --plum-2: #4a3aa8;
  --foil: linear-gradient(176deg, #fffbe6 6%, #ffe59e 38%, #f0b63e 62%, #fff0c0 86%);
  --glass: rgba(255, 250, 238, .94);
  --shadow-lg: 0 24px 60px rgba(50, 20, 80, .36), 0 2px 0 rgba(255, 255, 255, .6) inset;
  --shadow-md: 0 12px 28px rgba(50, 20, 80, .24);
}
input { font: inherit; user-select: text; -webkit-user-select: text; }
.hero-art .layer { transition: transform .5s ease-out; }
.home .l1 { transform: translate(calc(var(--px, 0) * -5px), calc(var(--py, 0) * -3px)); }
.home .l2 { transform: translate(calc(var(--px, 0) * -11px), calc(var(--py, 0) * -5px)); }
.home .l3 { transform: translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -8px)); }

.dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dust i { position: absolute; bottom: -12px; width: calc(7px * var(--s)); height: calc(7px * var(--s)); border-radius: 50%; background: radial-gradient(circle, #fff6c8, #ffd25e 55%, transparent 72%); animation: drift 11s linear infinite; }
@keyframes drift { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translate(34px, -105vh); opacity: 0; } }
.rays { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(rgba(255, 240, 190, .17) 0 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 66%); mask: radial-gradient(circle, #000 12%, transparent 66%); animation: spin 60s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.logo { position: relative; display: flex; flex-direction: column; font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 8.6vw, 7.4rem); line-height: .9; letter-spacing: -.005em; }
.logo span { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #a8651a) drop-shadow(0 5px 0 #4a2a6e) drop-shadow(0 12px 18px rgba(40, 15, 70, .5)); }
.logo span + span { margin-left: .36em; }

/* Splash */
.splash { display: grid; place-items: center; cursor: pointer; }
.splash-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.splash .logo { align-items: center; }
.splash .logo span + span { margin-left: 0; }
.splash-token { --size: clamp(92px, 16vw, 132px); animation: coin-in 1.1s cubic-bezier(.2, .8, .3, 1.15) both; box-shadow: 0 0 0 3px var(--brass-lo), 0 0 0 calc(var(--size) * .05) #e6ab3a inset, 0 0 60px 14px rgba(255, 225, 150, .75); }
@keyframes coin-in { 0% { transform: translateY(-90px) rotateY(0) scale(.5); opacity: 0; } 70% { transform: translateY(6px) rotateY(720deg) scale(1.06); opacity: 1; } 100% { transform: rotateY(720deg) scale(1); } }
.splash .logo { animation: rise-in .8s .55s cubic-bezier(.2, .9, .3, 1.1) both; }
.splash-line { font-family: var(--hand); font-size: clamp(1.1rem, 2.5vw, 1.45rem); color: #fff6dc; text-shadow: 0 2px 6px rgba(50, 20, 80, .6); animation: rise-in .7s .85s ease both; }
@keyframes rise-in { from { transform: translateY(22px); opacity: 0; } }
.loader { width: min(240px, 60vw); height: 7px; margin-top: 8px; border-radius: 9px; overflow: hidden; background: rgba(255, 255, 255, .28); animation: rise-in .6s 1s ease both; }
.loader i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe59e, #f0b63e); animation: load 2.4s .1s cubic-bezier(.4, .1, .3, 1) both; }
@keyframes load { from { width: 0; } to { width: 100%; } }

/* Sign-in */
.auth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 480px); align-items: center; gap: clamp(20px, 5vw, 72px); padding: 24px max(32px, env(safe-area-inset-right, 0px)) 24px max(32px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.auth-brand { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-width: 0; }
.auth-brand .logo { align-items: center; font-size: clamp(3.4rem, 6.4vw, 5.6rem); }
.auth-brand .logo span + span { margin-left: 0; }
.auth-brand > p { font-size: 1.12rem; max-width: 28em; color: #fff6dc; text-shadow: 0 1px 6px rgba(50, 20, 80, .7); }
.auth-brand .stall { width: min(380px, 80%); margin-top: 10px; }
.auth-card { position: relative; z-index: 2; width: 100%; padding: 28px; background: var(--glass); border-radius: 26px; box-shadow: var(--shadow-lg), 0 0 0 1.5px rgba(240, 182, 62, .7); animation: rise-in .6s cubic-bezier(.2, .9, .3, 1.1) both; }
.auth-card h2 { font: 400 clamp(1.8rem, 4vw, 2.2rem)/1.05 var(--display); color: var(--plum); }
.auth-card form { display: flex; flex-direction: column; gap: 10px; }
.auth-sub { color: var(--ink-soft); }
.demo-note { padding: 7px 12px; font-size: .86rem; line-height: 1.3; color: #0b5a55; background: #d9f1ec; border-radius: 10px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: .88rem; font-weight: 700; color: var(--plum); }
.input-wrap { display: flex; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1.5px var(--line) inset; transition: box-shadow .15s ease; }
.input-wrap:focus-within { box-shadow: 0 0 0 2px var(--plum-2) inset, 0 0 0 4px rgba(74, 58, 168, .15); }
.input-wrap.bad { box-shadow: 0 0 0 2px var(--bad) inset; }
.input-wrap input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font-size: 1rem; outline: 0; }
.eye { padding: 0 14px; height: 48px; font-size: .86rem; font-weight: 700; color: var(--plum-2); }
.field-error { font-size: .84rem; line-height: 1.2; color: var(--bad); }
.field-error:empty { display: none; }
.link { font-weight: 700; color: var(--plum-2); text-decoration: underline; text-underline-offset: 3px; min-height: 28px; }
.link-end { align-self: flex-end; font-size: .9rem; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-guest { width: 100%; }
.or { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--ink-soft); }
.or::before, .or::after { content: ""; flex: 1; height: 1.5px; background: var(--line); }
.auth-switch { text-align: center; font-size: .95rem; color: var(--ink-soft); }
.reset-sent { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sent-token { --size: 76px; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }

/* Shared shell */
.shell { overflow: hidden; }
.shell-scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; padding: 12px max(18px, env(safe-area-inset-right, 0px)) 112px max(18px, env(safe-area-inset-left, 0px)); -webkit-overflow-scrolling: touch; }
.native .shell-scroll { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.native .auth { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px 0 8px; font-family: var(--display); font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--plum); background: var(--glass); border-radius: 99px; box-shadow: var(--shadow-md), 0 0 0 1px rgba(240, 182, 62, .6); white-space: nowrap; }
.pill b { font-weight: 400; }
.coin { flex: none; display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c8, var(--brass) 62%, #c98f2b); box-shadow: 0 0 0 1.5px var(--brass-lo); }
.inline-star { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.inline-star .star { width: 20px; height: 20px; }
.meter { display: block; flex: 1; height: 7px; border-radius: 9px; overflow: hidden; background: rgba(43, 31, 85, .13); }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f0b63e, #e8504d); }
.card { background: var(--glass); border-radius: 22px; box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, .7) inset; }
.eyebrow-gold { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffe59e; text-shadow: 0 1px 4px rgba(50, 20, 80, .7); }
.page-head { display: flex; align-items: center; gap: 12px; max-width: 1040px; margin: 0 auto 14px; }
.page-title { flex: 1; min-width: 0; }
.page-title h1 { font: 400 clamp(2rem, 5vw, 3rem)/1.05 var(--display); color: #fff; text-shadow: 0 3px 0 rgba(60, 25, 90, .55), 0 8px 18px rgba(50, 20, 80, .4); overflow-wrap: anywhere; }
.back-btn { flex: none; width: 46px; height: 46px; font: 400 1.9rem/1 var(--display); color: var(--plum); background: var(--glass); border-radius: 50%; box-shadow: var(--shadow-md); }
.shell-body { display: flex; flex-direction: column; gap: 12px; max-width: 1040px; margin: 0 auto; }

/* Nav bar */
.dock { position: absolute; z-index: 20; left: 50%; bottom: max(12px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(560px, calc(100% - 20px)); padding: 6px; background: var(--glass); border-radius: 24px; box-shadow: 0 18px 44px rgba(40, 15, 70, .42), 0 0 0 1.5px rgba(240, 182, 62, .75); backdrop-filter: blur(8px); }
.dock button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 58px; font-size: .74rem; font-weight: 700; color: var(--ink-soft); border-radius: 18px; transition: color .15s ease, background .15s ease, transform .1s ease; }
.dock button:hover { color: var(--plum); }
.dock button:active { transform: scale(.94); }
.dock-icon { display: grid; place-items: center; width: 28px; height: 28px; }
.dock-icon svg { width: 25px; height: 25px; }
.dock button[aria-current="page"] { color: #fff; background: linear-gradient(170deg, #5b47bd, #3a2a8a); box-shadow: 0 6px 14px rgba(58, 42, 138, .45), 0 0 0 1px rgba(255, 229, 158, .5) inset; }
.dock button[aria-current="page"] .dock-icon { color: #ffe59e; }

/* Home */
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 1180px; margin: 0 auto; animation: rise-in .5s ease both; }
.player { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 16px 4px 4px; background: var(--glass); border-radius: 99px; box-shadow: var(--shadow-md), 0 0 0 1px rgba(240, 182, 62, .6); text-align: left; }
.avatar { flex: none; display: block; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: linear-gradient(170deg, #ffe59e, #f0b63e); box-shadow: 0 0 0 2px var(--brass-lo); }
.avatar .person { width: 150%; margin: 2px 0 0 -25%; }
.player-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.player-text b { font: 400 1.02rem var(--display); color: var(--plum); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-text small { font-size: .76rem; font-weight: 700; color: var(--teal-deep); white-space: nowrap; }
.pills { display: flex; gap: 8px; }
.pills .inline-star { margin-left: 2px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "brand stall" "action stall"; align-items: center; column-gap: clamp(16px, 4vw, 56px); max-width: 1180px; margin: 10px auto 0; }
.hero-brand { grid-area: brand; align-self: end; display: flex; flex-direction: column; gap: 12px; animation: rise-in .7s .05s cubic-bezier(.2, .9, .3, 1.1) both; }
.hero-tag { max-width: 25em; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.35; color: #fff6dc; text-shadow: 0 1px 6px rgba(50, 20, 80, .75); }
.hero-action { grid-area: action; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; animation: rise-in .7s .15s cubic-bezier(.2, .9, .3, 1.1) both; }
.cta { position: relative; display: flex; align-items: center; gap: 14px; width: min(440px, 100%); min-height: 84px; padding: 10px 18px 10px 12px; overflow: hidden; text-align: left; color: #3d2706; border-radius: 24px; background: linear-gradient(175deg, #fff0bd, #f7c552 48%, #eba92e); box-shadow: 0 2px 0 #fffbe6 inset, 0 7px 0 #a8701a, 0 20px 36px rgba(60, 25, 70, .45); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.cta::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 22%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: sweep 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { 0%, 55% { left: -30%; } 90%, 100% { left: 125%; } }
.cta:hover { filter: brightness(1.05); transform: translateY(-2px); }
.cta:active { transform: translateY(5px); box-shadow: 0 2px 0 #fffbe6 inset, 0 2px 0 #a8701a, 0 8px 14px rgba(60, 25, 70, .4); }
.cta-ring { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--plum-2) calc(var(--pct) * 1%), rgba(61, 39, 6, .18) 0); }
.cta-ring span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; background: #fff4cf; }
.cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.cta-text small { font-size: .84rem; font-weight: 700; opacity: .8; }
.cta-text b { font: 400 clamp(1.3rem, 2.4vw, 1.7rem)/1.1 var(--display); }
.cta-arrow { flex: none; font: 400 2.4rem/1 var(--display); }
.link-light { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(50, 20, 80, .7); }
.link-light svg { width: 20px; height: 20px; }

/* The stall */
.stall { grid-area: stall; position: relative; width: 100%; max-width: min(520px, 62vh); justify-self: center; animation: rise-in .8s .1s cubic-bezier(.2, .9, .3, 1.1) both; }
.stall .rays { width: 150%; z-index: 0; }
.home .stall { transform: translate(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 3px)); transition: transform .5s ease-out; animation: none; }
.awning { position: relative; z-index: 3; display: block; width: 106%; margin-left: -3%; height: clamp(50px, 9vh, 80px); filter: drop-shadow(0 8px 8px rgba(50, 20, 40, .4)); }
.stall-lamp { position: absolute; z-index: 4; top: clamp(50px, 9vh, 76px); width: 22px; height: 36px; border-radius: 4px 4px 9px 9px; background: linear-gradient(180deg, #fff3b8, #ffc94d); box-shadow: 0 0 0 2px #a8701a, 0 0 34px 12px rgba(255, 215, 120, .85); animation: flicker 3s ease-in-out infinite; }
.stall-lamp.left { left: 3%; } .stall-lamp.right { right: 3%; animation-delay: 1.2s; }
.stall-body { position: relative; z-index: 2; margin-top: -14px; padding: 26px 16px 0; background: linear-gradient(180deg, #7a3f2a, #a9663a 45%, #c98a4b); border-inline: 11px solid #5c2f1c; box-shadow: 0 26px 44px rgba(40, 15, 70, .5); }
.stall-sign { width: max-content; max-width: 90%; margin: 0 auto 10px; padding: 2px 18px 4px; font: 400 clamp(.95rem, 1.7vw, 1.2rem)/1.3 var(--display); letter-spacing: .03em; color: #ffe59e; background: var(--plum); border-radius: 8px; box-shadow: 0 0 0 2px #f0b63e, 0 5px 12px rgba(30, 10, 40, .5); }
.stall-rack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 7px; background: #5c2f1c; border-radius: 7px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 220, 170, .4); }
.stall-box { position: relative; aspect-ratio: 1.2; display: grid; place-items: end center; padding: 0 5% 8%; border-radius: 3px 3px 7px 7px; background: linear-gradient(180deg, #e8a84f, #ffe0a0 62%); box-shadow: inset 0 5px 8px rgba(90, 40, 10, .5); }
.stall-box .pair { width: 92%; }
.stall-box i { position: absolute; left: 3px; top: 3px; min-width: 15px; padding: 0 3px; font: normal .62rem/1.3 var(--display); text-align: center; color: #fff; background: var(--plum); border-radius: 3px; }
.stall-keeper { position: relative; z-index: 1; width: 38%; margin: -9% auto -3px; }
.stall-keeper .person { width: 100%; animation: breathe 3.4s ease-in-out infinite; transform-origin: bottom; filter: drop-shadow(0 6px 8px rgba(30, 10, 40, .35)); }
@keyframes breathe { 50% { transform: translateY(-3px) scale(1.01); } }
.stall-counter { position: relative; z-index: 2; height: clamp(46px, 8vh, 72px); margin-inline: -30px; background: linear-gradient(180deg, #fff0bd 0, #f0b63e 7%, #8c5128 9%, #6b3a1f 100%); border-radius: 8px; box-shadow: 0 -2px 8px rgba(30, 10, 40, .3); }
.stall-pedestal { position: absolute; left: 6%; bottom: calc(100% - 8px); width: 30%; }
.stall-pedestal::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 130%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(255, 240, 170, .8), transparent 62%); animation: flicker 2.6s infinite; }
.stall-pedestal .pair { position: relative; width: 100%; }
.token-stack { position: absolute; right: 7%; bottom: calc(100% - 6px); width: clamp(50px, 7vw, 74px); height: clamp(50px, 7vw, 74px); }
.token-stack .token { --size: clamp(46px, 6.4vw, 68px); position: absolute; right: 0; bottom: 0; z-index: 1; animation: bob 3.2s .5s ease-in-out infinite; }
.token-stack .token.back { right: 34%; bottom: 8%; z-index: 0; transform: rotate(-14deg); animation: none; filter: brightness(.92); }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }

/* Journey */
.journey { max-width: 1180px; margin: 18px auto 0; animation: rise-in .7s .25s ease both; }
.journey h2 { margin-bottom: 8px; font: 400 1.4rem var(--display); color: #fff; text-shadow: 0 2px 0 rgba(60, 25, 90, .55), 0 4px 10px rgba(50, 20, 80, .5); }
.journey-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.journey-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-align: left; background: var(--glass); border-radius: 18px; box-shadow: var(--shadow-md); transition: transform .14s ease, box-shadow .14s ease; }
.journey-card:not(:disabled):hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(50, 20, 80, .36), 0 0 0 2px #f0b63e; }
.journey-card:disabled { cursor: default; }
.journey-art { position: relative; display: block; height: 92px; overflow: hidden; }
.journey-art .backdrop { position: absolute; height: 100%; }
.journey-lock { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(43, 31, 85, .62); }
.journey-lock svg { width: 30px; height: 30px; }
.journey-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; }
.journey-body small { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); }
.journey-body b { font: 400 1rem/1.15 var(--display); color: var(--plum); min-height: 2.3em; }
.journey-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.journey-meta .star { width: 15px; height: 15px; }

/* Map */
.area-panel { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.area-desc { color: var(--ink-soft); font-size: 1.02rem; }

/* Shop */
.chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips button { flex: none; min-height: 40px; padding: 0 16px; font-weight: 700; font-size: .92rem; color: var(--plum); background: var(--glass); border-radius: 99px; box-shadow: var(--shadow-md); }
.chips button[aria-pressed="true"] { color: #fff; background: linear-gradient(170deg, #5b47bd, #3a2a8a); box-shadow: 0 6px 14px rgba(58, 42, 138, .45), 0 0 0 1px rgba(255, 229, 158, .6) inset; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; }
.shop-text { flex: 1; min-width: 0; }
.shop-text b { font: 400 1.08rem/1.15 var(--display); color: var(--plum); }
.shop-text p { font-size: .88rem; line-height: 1.22; color: var(--ink-soft); }
.shop-item.locked { opacity: .78; }
.shop-item.locked .shop-icon { filter: grayscale(1); }
.shop-note { flex: none; display: inline-flex; align-items: center; gap: 4px; max-width: 94px; text-align: right; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.shop-note svg { flex: none; width: 15px; height: 15px; }
.shop-note.owned { color: var(--teal-deep); }
.btn-buy { flex: none; min-height: 44px; padding: 2px 12px; font-size: 1rem; gap: 5px; font-variant-numeric: tabular-nums; }
.btn-buy .coin { width: 18px; height: 18px; }
.btn-buy:disabled { filter: grayscale(.85); opacity: .6; cursor: default; transform: none; }
.pips { display: inline-flex; gap: 3px; margin-left: 7px; vertical-align: middle; }
.pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.pips i.on { background: var(--teal); }

/* Profile and settings */
.profile-head { display: flex; align-items: center; gap: 14px; padding: 16px; }
.avatar.big { width: 84px; height: 84px; }
.profile-text { min-width: 0; }
.profile-text h2 { font: 400 1.7rem/1.1 var(--display); color: var(--plum); overflow-wrap: anywhere; }
.rank { display: inline-block; margin: 3px 0; padding: 0 10px; font-size: .8rem; font-weight: 700; color: #fff; background: linear-gradient(170deg, #5b47bd, #3a2a8a); border-radius: 99px; }
.profile-text p { color: var(--ink-soft); font-size: .92rem; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 4px; text-align: center; background: var(--glass); border-radius: 16px; box-shadow: var(--shadow-md); }
.stat b { font: 400 clamp(1.25rem, 3vw, 1.7rem)/1.1 var(--display); color: var(--plum); font-variant-numeric: tabular-nums; }
.stat span { font-size: .78rem; line-height: 1.15; color: var(--ink-soft); }
.profile-areas { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.profile-areas h3 { font: 400 1.2rem var(--display); color: var(--plum); }
.progress-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .9rem; }
.progress-row b { font-variant-numeric: tabular-nums; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page-actions > * { flex: 1 1 180px; }
.settings-card { padding: 16px; }

/* Ending */
.ending { display: grid; place-items: center; padding: 16px; }
.ending-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: min(560px, 100%); padding: 32px 26px; background: var(--paper); border-radius: 22px; box-shadow: 0 26px 60px rgba(40, 20, 50, .35); }
.ending-card h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; text-wrap: balance; color: var(--coral); }

/* Phone, upright */
@media (max-aspect-ratio: 1/1) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "stall" "action"; margin-top: 12px; }
  .hero-brand { align-items: center; text-align: center; gap: 6px; }
  .logo { font-size: clamp(3rem, 15vw, 5.4rem); }
  .logo span + span { margin-left: 0; }
  .hero-brand .logo { flex-direction: row; gap: .24em; font-size: clamp(2.5rem, 12.6vw, 5rem); }
  .hero-tag { font-size: .98rem; }
  .stall { max-width: min(82%, 37vh); margin-top: 8px; }
  .hero-action { align-items: center; margin-top: 16px; }
  .cta { min-height: 74px; }
  .cta-ring { width: 52px; height: 52px; }
  .cta-ring span { width: 41px; height: 41px; font-size: .78rem; }
  .journey-row { display: flex; gap: 10px; overflow-x: auto; margin-inline: -18px; padding: 2px 18px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .journey-card { flex: 0 0 156px; scroll-snap-align: start; }
  .auth { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; padding: 18px 16px; gap: 14px; }
  .auth-brand .stall, .auth-brand > p { display: none; }
  .auth-brand .logo { flex-direction: row; gap: .24em; font-size: clamp(2.5rem, 12.6vw, 4.4rem); }
  .auth-card { padding: 20px 18px; }
  .shell-scroll { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .pill { min-height: 34px; font-size: .95rem; padding: 0 10px 0 6px; }
  .pills { gap: 5px; }
  .player { padding-right: 10px; }
  .avatar { width: 38px; height: 38px; }
  .player-text b { font-size: .92rem; }
  .player-text small { font-size: .68rem; }
  .dock { width: calc(100% - 16px); bottom: max(8px, env(safe-area-inset-bottom, 0px)); border-radius: 22px; }
  .dock button { min-height: 54px; font-size: .68rem; }
}
/* Phone, on its side */
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .logo { font-size: 2.6rem; }
  .hero-tag { display: none; }
  .hero-action { margin-top: 6px; }
  .cta { min-height: 60px; }
  .stall { max-width: 260px; }
  .dock { width: min(420px, calc(100% - 20px)); bottom: 4px; }
  .dock button { min-height: 42px; }
  .dock-icon, .dock-icon svg { width: 20px; height: 20px; }
  .auth-brand .stall { display: none; }
  .journey-art { height: 60px; }
}

/* ==== World map road ==== */
.road { position: relative; display: flex; flex-direction: column; gap: 18px; padding-left: 70px; }
.road::before { content: ""; position: absolute; left: 30px; top: 20px; bottom: 40px; width: 10px; border-radius: 9px; background: repeating-linear-gradient(180deg, #ffe59e 0 16px, transparent 16px 28px), rgba(43, 31, 85, .5); box-shadow: 0 0 0 4px rgba(255, 250, 238, .5); }
.stop { position: relative; }
.stop-node { position: absolute; left: -70px; top: 44px; width: 70px; }
.medal { position: absolute; left: 12px; top: 0; display: grid; place-items: center; width: 46px; height: 46px; font: 400 1.5rem/1 var(--display); color: #fff; background: var(--c); border-radius: 50%; box-shadow: 0 0 0 4px var(--glass), 0 0 0 6px var(--c), 0 8px 18px rgba(40, 15, 70, .45); }
.medal svg { width: 22px; height: 22px; }
.stop.locked .medal { color: #efe7d5; background: #8f8aa5; box-shadow: 0 0 0 4px var(--glass), 0 0 0 6px #8f8aa5; }
.stop.complete .medal { background: linear-gradient(170deg, #ffe59e, #f0b63e); color: #5c3a0a; box-shadow: 0 0 0 4px var(--glass), 0 0 0 6px #f0b63e, 0 8px 18px rgba(40, 15, 70, .45); }
.stop.current .medal { animation: pulse-ring 1.6s ease-in-out infinite; }
@keyframes pulse-ring { 50% { box-shadow: 0 0 0 4px var(--glass), 0 0 0 10px var(--c), 0 8px 18px rgba(40, 15, 70, .45); } }
.stop-you { position: absolute; left: 10px; top: -56px; width: 52px; filter: drop-shadow(0 6px 8px rgba(40, 15, 70, .45)); animation: bob 2.4s ease-in-out infinite; }
.map-card { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); width: 100%; overflow: hidden; text-align: left; background: var(--glass); border-radius: 22px; box-shadow: var(--shadow-md), inset 6px 0 0 var(--c); transition: transform .14s ease, box-shadow .14s ease; }
.map-card:not(:disabled):hover { transform: translateX(4px); box-shadow: 0 18px 34px rgba(50, 20, 80, .36), inset 6px 0 0 var(--c), 0 0 0 2px #f0b63e; }
.map-card:disabled { cursor: default; }
.map-art { position: relative; display: block; min-height: 150px; overflow: hidden; }
.map-art .backdrop { position: absolute; height: 100%; }
.map-flag { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; font-size: .74rem; font-weight: 700; color: #fff; background: var(--plum); border-radius: 99px; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.map-flag.done { color: #5c3a0a; background: linear-gradient(170deg, #ffe59e, #f0b63e); }
.map-flag .star { width: 14px; height: 14px; }
.map-text { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 18px; font-size: .95rem; line-height: 1.28; color: var(--ink-soft); }
.map-text small { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.map-text b { font: 400 1.45rem/1.1 var(--display); color: var(--plum); }
.map-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; color: var(--ink); font-size: .86rem; font-weight: 700; }
.week-dots { display: inline-flex; gap: 4px; }
.week-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(43, 31, 85, .14); box-shadow: 0 0 0 1.5px rgba(43, 31, 85, .18) inset; }
.week-dots i.rush { border-radius: 3px; transform: rotate(45deg) scale(.86); }
.week-dots i.open { background: #fff; box-shadow: 0 0 0 2px var(--c, #f0b63e) inset; }
.week-dots i.done { background: linear-gradient(170deg, #ffe59e, #f0b63e); box-shadow: 0 0 0 1.5px #a8701a inset; }

/* ==== Week calendar ==== */
.week-panel { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.week-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.rush-key { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: #8a3a2a; }
.rush-key i { width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: linear-gradient(170deg, #ffb46e, #e8504d); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-align: center; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1.5px var(--line) inset, 0 6px 14px rgba(50, 20, 80, .12); transition: transform .14s ease, box-shadow .14s ease; }
.day:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--c) inset, 0 12px 22px rgba(50, 20, 80, .22); }
.day:disabled { cursor: default; }
.day-short { display: block; padding: 4px 0 3px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--plum); }
.day.rush .day-short { background: linear-gradient(90deg, #e8504d, #f58220); }
.day-art { position: relative; display: block; height: 58px; overflow: hidden; }
.day-art .backdrop { position: absolute; height: 100%; }
.day.locked .day-art { filter: grayscale(1) brightness(.85); }
.day-body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; }
.day-body b { font: 400 1rem/1.1 var(--display); color: var(--plum); }
.day-note { font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.rush-badge { padding: 0 8px; font-size: .68rem; font-weight: 700; color: #fff; background: linear-gradient(170deg, #f58220, #e8504d); border-radius: 99px; white-space: nowrap; }
.day-lock { color: #a99f8b; }
.day-lock svg { width: 18px; height: 18px; }
.day.locked { background: #f3ede0; }
.day.locked .day-body b { color: #8f8aa5; }
.day.current { box-shadow: 0 0 0 3px var(--brass) inset, 0 0 22px rgba(240, 182, 62, .7); }
.day.current::after { content: "Next"; position: absolute; right: 6px; top: 26px; padding: 0 7px; font-size: .62rem; font-weight: 700; color: #5c3a0a; background: linear-gradient(170deg, #ffe59e, #f0b63e); border-radius: 99px; }
.day .mini-stars .star { width: 15px; height: 15px; }

/* ==== Shop tiles ==== */
.shop-icon { flex: none; display: grid; place-items: center; width: 64px; height: 64px; background: radial-gradient(circle at 30% 25%, #fff, var(--tint, #fff0bd) 70%); border-radius: 18px; box-shadow: 0 0 0 1.5px rgba(43, 31, 85, .14), 0 6px 12px rgba(50, 20, 80, .16); }
.shop-icon svg { width: 50px; height: 50px; filter: drop-shadow(0 2px 2px rgba(40, 15, 40, .25)); }
.shop-item:not(.locked):hover .shop-icon svg { animation: wiggle .5s ease; }
@keyframes wiggle { 30% { transform: rotate(-6deg) scale(1.08); } 70% { transform: rotate(5deg) scale(1.08); } }

@media (max-aspect-ratio: 1/1) {
  .road { padding-left: 54px; gap: 14px; }
  .road::before { left: 22px; }
  .stop-node { left: -54px; width: 54px; top: 14px; }
  .medal { left: 8px; width: 38px; height: 38px; font-size: 1.2rem; }
  .stop-you { left: 2px; top: -44px; width: 46px; }
  .map-card { grid-template-columns: minmax(0, 1fr); }
  .map-art { min-height: 110px; }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .day-art { height: 42px; }
  .day-body b { font-size: .9rem; }
  .day-body { padding: 6px 4px 8px; }
  .rush-badge { font-size: .6rem; padding: 0 6px; }
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-icon { width: 56px; height: 56px; }
  .shop-icon svg { width: 44px; height: 44px; }
}

/* ==== Racks as something you grow ==== */
.slot-pill { position: absolute; z-index: 4; top: 8px; right: 8px; padding: 2px 12px; font-weight: 700; font-size: .86rem; color: #fff; background: rgba(14, 108, 103, .92); border-radius: 99px; }
.slot-pill.full { background: var(--bad); animation: flicker 1s infinite; }
.rack-unit.ghost { display: grid; place-items: center; background: transparent; border: 2px dashed rgba(255, 246, 228, .55); font: 400 .9rem var(--display); color: rgba(255, 246, 228, .85); text-align: center; }
.turned-away { padding: 8px 12px; font-size: .95rem; line-height: 1.3; color: #7d1730; background: #ffe1e5; border-radius: 10px; }
.turned-away b { display: block; }
.new-rule.warn { background: #ffe1e5; color: #7d1730; }
.first-rack { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; }
.first-rack-art { padding: 12px; background: linear-gradient(90deg, var(--oak-lo), var(--oak-hi) 50%, var(--oak-lo)); border-radius: 14px; }
.first-rack-art .rack-unit { display: flex; height: 170px; }
.first-rack-art .box { cursor: default; }
.first-rack-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.first-rack-text h2 { font: 400 clamp(1.5rem, 3.4vw, 2.1rem)/1.1 var(--display); color: var(--plum); text-wrap: balance; }
.first-rack-text p { color: var(--ink-soft); }
.first-rack-sums { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; background: var(--paper-2); border-radius: 12px; font-weight: 600; }
.first-rack-sums b { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font: 400 1.15rem var(--display); }
@media (max-aspect-ratio: 1/1) {
  .first-rack { grid-template-columns: minmax(0, 1fr); }
  .first-rack-art .rack-unit { height: 130px; }
  .slot-pill { font-size: .76rem; padding: 1px 9px; }
}

/* ==== Token tray (Area 1) ==== */
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tray-cell { position: relative; flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #e9d6ab; box-shadow: inset 0 3px 5px rgba(110, 75, 25, .45), 0 1px 0 #fff; }
.tray-cell .token { --size: 44px; touch-action: none; cursor: grab; transition: transform .12s ease, box-shadow .12s ease; }
.tray-cell .token:hover { transform: translateY(-3px); }
.tray-cell.out .token { visibility: hidden; }
.tray-cell.picked .token { transform: translateY(-9px) scale(1.14); box-shadow: 0 0 0 3px var(--teal), 0 0 18px 6px rgba(255, 229, 158, .95), 0 10px 14px rgba(70, 40, 10, .4); }
.tray-cell.shake { animation: shake .3s; }
.slot.want { cursor: pointer; }
.slot.want .figure .person { filter: drop-shadow(0 0 10px rgba(255, 215, 110, 1)) drop-shadow(0 0 3px #fff); }
.slot.want .bubble { box-shadow: 0 0 0 3px var(--brass), 0 4px 10px rgba(70, 35, 40, .25); }
.slot.pulse { border-radius: 14px; }
.drag-token { --size: 54px; position: fixed; z-index: 50; margin: -27px 0 0 -27px; pointer-events: none; box-shadow: 0 0 0 3px var(--teal), 0 12px 18px rgba(40, 20, 10, .45); }
@media (max-aspect-ratio: 1/1) {
  .tray { gap: 4px; }
  .tray-cell { width: 44px; height: 44px; }
  .tray-cell .token { --size: 38px; }
}
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .tray-cell { width: 34px; height: 34px; }
  .tray-cell .token { --size: 29px; }
}

/* ==== Tray sizes: it holds one token per slot, up to 32 ==== */
.tray { --tok: 44px; }
.tray[data-size="medium"] { --tok: 36px; }
.tray[data-size="small"] { --tok: 30px; }
.tray-cell { width: calc(var(--tok) + 6px); height: calc(var(--tok) + 6px); }
.tray-cell .token { --size: var(--tok); }
@media (max-aspect-ratio: 1/1) {
  .tray { --tok: 38px; }
  .tray[data-size="medium"] { --tok: 32px; }
  .tray[data-size="small"] { --tok: 28px; gap: 2px; }
  .tray-cell { width: calc(var(--tok) + 5px); height: calc(var(--tok) + 5px); }
  .tray-cell .token { --size: var(--tok); }
}
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .tray { --tok: 26px; }
  .tray[data-size="medium"], .tray[data-size="small"] { --tok: 22px; }
}

/* ==== Light cut: nearly black, with a small pool of light around the last touch ==== */
.blackout.power { opacity: 1; animation: stutter .5s steps(2) 1; background: radial-gradient(circle 118px at var(--lx, 50%) var(--ly, 62%), rgba(255, 196, 100, .05) 0, rgba(255, 170, 90, .03) 62%, rgba(6, 5, 20, .97) 100%); transition: opacity .2s; }
.blackout.power.lamp-1 { background: radial-gradient(circle 170px at var(--lx, 50%) var(--ly, 62%), rgba(255, 196, 100, .05) 0, rgba(255, 170, 90, .03) 62%, rgba(6, 5, 20, .93) 100%); }
.blackout.power.lamp-2 { background: radial-gradient(circle 230px at var(--lx, 50%) var(--ly, 62%), rgba(255, 196, 100, .05) 0, rgba(255, 170, 90, .03) 62%, rgba(6, 5, 20, .88) 100%); }
.tip-line { padding: 6px 12px; font-size: .92rem; line-height: 1.3; color: #0b5a55; background: #d9f1ec; border-radius: 10px; }

/* ==== Event banner ==== */
.event-banner { position: absolute; z-index: 22; left: 50%; top: 12%; display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 92%; padding: 8px 26px 10px; text-align: center; color: #3d2706; background: linear-gradient(175deg, #fff0bd, #f7c552 55%, #eba92e); border-radius: 16px; box-shadow: 0 0 0 3px #fff6d8, 0 0 0 5px #a8701a, 0 18px 34px rgba(60, 25, 70, .45); pointer-events: none; animation: banner 2.4s cubic-bezier(.2, .9, .3, 1.2) both; }
.event-banner b { font: 400 clamp(1.7rem, 5vw, 2.5rem)/1.05 var(--display); }
.event-banner span { font-size: .98rem; font-weight: 700; }
@keyframes banner { 0% { transform: translateX(-50%) scale(.5); opacity: 0; } 12%, 82% { transform: translateX(-50%) scale(1); opacity: 1; } 100% { transform: translateX(-50%) scale(1) translateY(-10px); opacity: 0; } }

/* Machines the player owns stand on the counter, each with a green light */
.led { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3fdc7c; box-shadow: 0 0 0 1.500px #fff, 0 0 6px 1px #3fdc7c; }
.gear { position: absolute; right: 6px; bottom: 5px; z-index: 3; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 4px; width: min(23%, 132px); }
.gear-item { position: relative; display: block; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 10px; background: #fff6e4; box-shadow: 0 0 0 2px var(--oak-lo), 0 3px 5px rgba(50, 25, 10, .4); }
.gear-item .shop-icon { display: block; width: 100%; height: 100%; margin: 0; padding: 3px; border-radius: 10px; }
.gear-item .shop-icon svg { display: block; width: 100%; height: 100%; }
.gear-item .led { position: absolute; top: -2px; right: -2px; }
button.gear-item { cursor: pointer; }
.gear-item.flash { animation: gear-flash .7s ease; }
.gear-item.busy { animation: gear-shake .22s linear infinite; }
.gear-item.pulse { z-index: 1; }
@keyframes gear-flash { 35% { transform: translateY(-5px) scale(1.22); box-shadow: 0 0 0 2px var(--oak-lo), 0 0 16px 6px #ffe59e; } }
@keyframes gear-shake { 25% { transform: translate(-1.500px, 1px) rotate(-3deg); } 75% { transform: translate(1.500px, -1px) rotate(3deg); } }
.machine-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.machine-label { width: 100%; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); }
.machine-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; font-size: .85rem; font-weight: 700; border-radius: 99px; background: var(--paper-2); }
.machine-chip .shop-icon { flex: none; width: 26px; height: 26px; margin: 0; padding: 2px; border-radius: 50%; }
.machine-chip .shop-icon svg { display: block; width: 100%; height: 100%; }
.on-counter { display: block; margin-top: 2px; font-size: .78rem; font-weight: 700; color: var(--teal-deep); }
.shop-note .led { margin-right: 3px; }
@media (max-width: 700px) {
  .gear { right: 3px; bottom: 3px; gap: 2px; width: 60px; }
  .gear-item { width: 27px; height: 27px; border-radius: 7px; }
  .gear-item .shop-icon { padding: 2px; border-radius: 7px; }
  .gear-item .led { width: 6px; height: 6px; }
}
@media (max-height: 480px) and (min-aspect-ratio: 1/1) {
  .gear { width: 66px; }
  .gear-item { width: 21px; height: 21px; }
  .gear-item .led { width: 6px; height: 6px; }
}
.auto-pill { position: absolute; z-index: 4; top: 36px; right: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px 2px 9px; font-weight: 700; font-size: .86rem; color: var(--ink); background: #fff6e4; border-radius: 99px; box-shadow: 0 1px 4px rgba(40, 20, 20, .3); }
@media (max-width: 700px) { .auto-pill { top: 28px; font-size: .76rem; padding: 1px 9px 1px 7px; } }

/* Hands-on cleaning: tap to put drops on the mud */
.wash { position: absolute; z-index: 5; left: 50%; bottom: 74px; width: min(260px, 74%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px 8px; font-family: var(--body); color: var(--ink); background: #fff6e4; border-radius: 16px; box-shadow: 0 0 0 3px #4aa8e8, 0 10px 24px rgba(40, 20, 20, .45); transform: translateX(-50%); cursor: pointer; animation: wash-in .18s ease both; }
.dropper { width: 34px; height: 48px; animation: dropper-bob 1s ease-in-out infinite; }
.wash-shoes { position: relative; display: block; width: 72%; }
.wash-shoes .pair { display: block; width: 100%; }
.patch { position: absolute; width: 24%; aspect-ratio: 1.3; margin: -8% 0 0 -12%; background: #3f2a14; border-radius: 48% 52% 42% 58%; box-shadow: 0 0 0 1.500px #d9b98a; transition: opacity .25s ease, transform .25s ease; }
.patch.gone { opacity: 0; transform: scale(.4); }
.droplet { position: absolute; top: -18%; width: 11px; height: 15px; margin-left: -5px; background: #4aa8e8; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; animation: droplet-fall .32s ease-in both; pointer-events: none; }
.wash-note { font-size: .92rem; font-weight: 700; }
.wash-note b { color: var(--teal-deep); }
@keyframes wash-in { from { opacity: 0; transform: translateX(-50%) scale(.88); } }
@keyframes dropper-bob { 50% { transform: translateY(4px); } }
@keyframes droplet-fall { to { top: 62%; opacity: 0; } }
@media (max-width: 700px) { .wash { bottom: 52px; } }
@media (max-height: 480px) and (min-aspect-ratio: 1/1) { .wash { bottom: 36px; padding: 2px 8px 4px; } .dropper { width: 20px; height: 28px; } .wash-shoes { width: 46%; } }

/* Areas 6 to 10 */
.game[data-area="6"] { --felt: #f0b070; --felt-lo: #d68f4c; --oak: #b9855a; --oak-hi: #d4a47a; --oak-lo: #84582f; }
.game[data-area="7"] { --felt: #7f9cc7; --felt-lo: #5d7ba8; --oak: #6d7690; --oak-hi: #8c95ad; --oak-lo: #4a5269; }
.game[data-area="8"] { --felt: #7cbf6f; --felt-lo: #5a9e4f; --oak: #8e6a44; --oak-hi: #a98559; --oak-lo: #624626; }
.game[data-area="9"] { --felt: #a8415f; --felt-lo: #862c47; --oak: #7a4a26; --oak-hi: #9c6a3f; --oak-lo: #4f2d13; }
.game[data-area="10"] { --felt: #6b3fa0; --felt-lo: #4e2c7e; --oak: #c9992a; --oak-hi: #e6bd55; --oak-lo: #8f6b16; }
.gear[data-many="true"] .gear-item { width: 28px; height: 28px; border-radius: 7px; }
.box.robbing { z-index: 2; animation: rob-shake .16s linear infinite; box-shadow: 0 0 0 4px #e8504d, 0 0 22px 8px rgba(232, 80, 77, .75); }
.box.robbing::after { content: "Thief!"; position: absolute; left: 50%; top: 50%; padding: 2px 10px; font-weight: 700; font-size: .85rem; color: #fff; background: #c62f3e; border-radius: 99px; transform: translate(-50%, -50%); pointer-events: none; }
@keyframes rob-shake { 25% { transform: translate(-2px, 1px) rotate(-1deg); } 75% { transform: translate(2px, -1px) rotate(1deg); } }
.rack-critter { position: absolute; z-index: 19; display: flex; align-items: flex-end; justify-content: flex-start; pointer-events: none; }
.rack-critter.lit { z-index: 21; }
.rack-critter svg { height: 78%; width: auto; filter: drop-shadow(0 2px 3px rgba(20, 10, 30, .55)); }
.rack-critter.thief svg { animation: critter-in .25s ease-out both; }
.rack-critter.mouse { justify-content: flex-end; }
.rack-critter.mouse svg { height: 42%; margin: 0 6% 4% 0; animation: critter-in .25s ease-out both, nibble .28s .25s ease-in-out infinite; }
.rack-critter.helper { justify-content: flex-end; }
.rack-critter.helper svg { animation: pop .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.rack-critter.flee svg { animation: critter-flee .6s ease-in both; }
.box.nibbled { z-index: 2; box-shadow: 0 0 0 3px #f0b63e, 0 0 16px 5px rgba(240, 182, 62, .7); }
@keyframes critter-in { from { transform: translateX(-30%); opacity: 0; } }
@keyframes nibble { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes critter-flee { to { transform: translateX(-140%); opacity: 0; } }
.cam-mark { position: absolute; z-index: 21; border: 3px solid #ff5a5a; border-radius: 10px; box-shadow: 0 0 22px 6px rgba(255, 90, 90, .8); pointer-events: none; animation: flicker .6s infinite; }
.wet-sign { position: absolute; left: 50%; bottom: 8px; display: flex; flex-direction: column; align-items: center; width: 74px; padding: 6px 4px; font-size: .78rem; font-weight: 700; text-align: center; color: #2b2140; background: #f7d21e; border: 3px solid #2b2140; border-radius: 8px; transform: translateX(-50%); }
.wet-sign b { font-size: 1.3rem; line-height: 1; }
.patch.crack { background: none; box-shadow: none; aspect-ratio: 1; }
.patch.crack::before { content: ""; position: absolute; inset: 15% 40%; background: #17100c; clip-path: polygon(40% 0, 100% 30%, 60% 50%, 100% 100%, 0 45%, 40% 35%); transform: scale(1.9); }
.patch.dust { background: #8f8aa5; box-shadow: none; opacity: .75; }
.patch.dust.gone { opacity: 0; }
.wage-line { display: block; margin-top: 2px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.machine-row .wage-line { width: 100%; }
.shop-actions { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.btn-unhire { min-height: 32px; padding: 2px 10px; font-size: .8rem; }

/* A guest or pair that staff are handling: clearly busy, and not the player's job right now */
.bubble.staff { color: #fff; background: var(--teal-deep); }
.bubble.staff::after { border-top-color: var(--teal-deep); }
.shoes-btn.staff-busy { opacity: .5; filter: saturate(.6); cursor: default; animation: none; }
.shoes-btn.staff-busy:hover { transform: none; }
.staff-tag { position: absolute; left: 50%; top: 34%; max-width: 96%; padding: 1px 6px; font-size: .68rem; font-weight: 700; white-space: nowrap; color: #fff; background: var(--teal-deep); border-radius: 99px; transform: translate(-50%, -50%); pointer-events: none; animation: flicker 1s infinite; }

/* Day card: a proper tip, and what to run today */
.day-tip { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 12px; background: #fff0bd; border-radius: 14px; box-shadow: inset 0 0 0 1.5px #f0b63e; }
.day-tip .shop-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; }
.day-tip .shop-icon svg { width: 40px; height: 40px; }
.day-tip-face { flex: none; display: block; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: #fff6e4; }
.day-tip-face .person { width: 100%; }
.day-tip-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: .92rem; line-height: 1.3; }
.day-tip-text b { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #8f5b0e; }
.link-btn { padding: 2px 0; font-family: var(--body); font-size: .88rem; font-weight: 700; color: var(--teal-deep); text-decoration: underline; background: none; }
.equip-panel { margin-bottom: 10px; }
.equip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.equip-head .machine-label { width: auto; }
.equip-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.equip-row { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 4px 8px 4px 4px; font-family: var(--body); text-align: left; color: var(--ink); background: var(--paper-2); border-radius: 12px; opacity: .72; }
.equip-row.on { background: #d9f1ec; opacity: 1; box-shadow: inset 0 0 0 1.5px var(--teal); }
.equip-row .shop-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; }
.equip-row .shop-icon svg { width: 29px; height: 29px; }
.equip-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.equip-name b { font-size: .86rem; }
.equip-name small { font-size: .74rem; color: var(--ink-soft); }
.equip-row .switch { flex: none; pointer-events: none; transform: scale(.78); }
.equip-row[aria-checked="true"] .switch { background: var(--teal); }
.equip-total { margin-top: 6px; font-size: .88rem; color: var(--ink-soft); }
.equip-total b { color: var(--ink); }

/* Multi-pair guests: one colored number on every pair of the set */
.box.family { box-shadow: inset 0 0 0 3px var(--fam); }
.family-tag { position: absolute; left: 50%; top: 3px; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; padding: 0 8px 1px; font: 400 .95rem/1.1 var(--display); color: #fff; background: var(--fam); border-radius: 9px; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
.family-tag small { font: 700 .6rem/1 var(--body); }
.box.family .plate { opacity: .35; }

/* Teaching: where things went wrong and what to do instead */
.game[data-holding] .box.empty { outline: 2px dashed var(--teal); outline-offset: -5px; }
.game[data-holding] .box:not(.empty) { filter: brightness(.82); }
.ledger.warn { color: #fff; background: #c62f3e; border-radius: 10px; }
.coach-x { position: absolute; z-index: 23; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; animation: pop .2s ease both; }
.coach-hand { position: absolute; z-index: 23; width: 40px; height: 50px; margin: 2px 0 0 -14px; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(30, 15, 40, .5)); animation: coach-bob .55s ease-in-out infinite; }
.coach-target { position: relative; z-index: 3; box-shadow: 0 0 0 3px #3fdc7c, 0 0 18px 7px rgba(63, 220, 124, .75) !important; }
@keyframes coach-bob { 50% { transform: translateY(-8px); } }
@media (max-width: 700px) { .family-tag { padding: 0 5px 1px; font-size: .8rem; } .family-tag small { font-size: .52rem; } .equip-list { grid-template-columns: minmax(0, 1fr); } }
.round-modal > .modal-actions { position: sticky; bottom: -1px; z-index: 2; margin-inline: -8px; padding: 10px 8px 8px; background: var(--paper, #fff8e8); border-radius: 12px 12px 0 0; box-shadow: 0 -6px 12px -6px rgba(40, 20, 40, .25); }
@media (max-width: 700px) {
  .gear[data-many="true"] { width: 74px; }
  .gear[data-many="true"] .gear-item { width: 22px; height: 22px; border-radius: 6px; }
  .gear[data-many="true"] .gear-item .led { width: 5px; height: 5px; }
}

/* Languages */
.lang-select { min-height: 40px; padding: 4px 10px; font: 700 1rem var(--body); color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 10px; justify-self: start; }
/* Right-to-left languages: pages and text flip, but the stall itself stays as drawn. */
[dir="rtl"] .game, [dir="rtl"] .racks, [dir="rtl"] .tray { direction: ltr; }
[dir="rtl"] .game .ledger, [dir="rtl"] .game .bubble, [dir="rtl"] .game .event-banner, [dir="rtl"] .game .hud-title, [dir="rtl"] .wash, [dir="rtl"] .wet-sign, [dir="rtl"] .modal, [dir="rtl"] .overlay, [dir="rtl"] .equip-row { direction: rtl; }
[dir="rtl"] .equip-row { text-align: right; }
[dir="rtl"] .switch::after { left: auto; right: 3px; }
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-26px); }
[dir="rtl"] .ledger-rows b { text-align: left; }
/* Scripts the display fonts don't cover use the phone's own font, with roomier lines. */
:lang(ur), :lang(ar), :lang(hi), :lang(ja) { line-height: 1.45; }