/* Now I Can Pee? — the Handle With Cannon design system (C:\Dev\Priceless\styles.css), ported 2026-09-17: ink on warm
   near-white paper, velvet green as the primary, gold for highlights; Bitter / Archivo / IBM Plex Mono. The menus, the tab
   bar, the home map's chrome, the island labels, the sheet, the level card and the report all use these tokens. The HUD and
   everything drawn over a visit (the reel, the phone, the credits) keep the stream's own yellow (--hud-gold). */
:root {
  --ink: #151a33; --ink-2: #3a4063; --paper: #f5f8fc; --paper-2: #e9f0f8; --wall: #dfe9f4;
  --gold: #ff5c9a; --gold-2: #d93a78; --gold-3: #ffa9c9; --gold-ink: #b82763;   /* the accent: bubblegum pink (names kept so every rule follows) */
  --red: #ff4a4a; --muted: #7d86a3; --muted-ink: #4f5779; --line: rgba(21, 26, 51, 0.14);
  --velvet: #2f5bea; --velvet-2: #1a2c7a; --shadow: 0 30px 60px -30px rgba(21, 26, 51, 0.45);   /* the primary: flush blue */
  --menu-bg: #f5f8fc; --menu-card: #ffffff; --menu-line: rgba(21, 26, 51, 0.09); --menu-muted: #6a7394;
  --hud-gold: #ffcf33; --blue: #1b2350; --aqua: #29c6e6; --tile: #1b2350; --tile-2: #111737;
  --display: "Bitter", "Rockwell", "Iowan Old Style", Georgia, serif; --ui: "Archivo", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--wall); color: var(--ink); font-family: var(--ui); overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
#app { position: fixed; inset: 0; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#touch { position: absolute; inset: 0; touch-action: none; z-index: 5; cursor: crosshair; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; font-family: var(--ui); color: #fff; }
#hud.seen { box-shadow: inset 0 0 0 6px rgba(217, 65, 47, .8); }
#tank { position: absolute; left: 12px; top: calc(90px + var(--safe-t)); bottom: calc(90px + var(--safe-b)); width: 16px; border-radius: 9px; background: rgba(0,0,0,.35); overflow: hidden; border: 2px solid rgba(255,255,255,.7); }
#tank i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(#ffe46a, #f2b400); transition: height .1s linear; }
#tank span { position: absolute; bottom: -2px; left: 50%; transform: translate(-50%, 100%) rotate(-90deg); transform-origin: top; font: 700 9px var(--mono); }
#tank.low { animation: pulse .6s infinite; }
@keyframes pulse { 50% { border-color: #fff; box-shadow: 0 0 14px #ffe46a; } }
#eti { position: absolute; top: calc(14px + var(--safe-t)); left: 50px; right: 110px; height: 12px; border-radius: 7px; background: rgba(0,0,0,.35); overflow: hidden; border: 2px solid rgba(255,255,255,.7); }
#eti i { display: block; height: 100%; width: 100%; background: #7ed48a; transition: width .25s; }
#eti.bad i { background: #e8664f; }
#eti span { position: absolute; top: 14px; left: 0; font: 700 9px var(--mono); text-shadow: 0 1px 2px #000; }
#acc { position: absolute; top: calc(36px + var(--safe-t)); left: 50%; transform: translateX(-50%); font: 900 30px var(--ui); text-shadow: 0 2px 6px rgba(0,0,0,.6); letter-spacing: -.01em; }
#wind { position: absolute; top: calc(58px + var(--safe-t)); right: 14px; display: flex; align-items: center; gap: 6px; font: 700 12px var(--mono); text-shadow: 0 1px 3px #000; }
#wind .arrow { display: inline-block; font-size: 22px; transition: transform .3s; }
#chips { position: absolute; left: 40px; right: 14px; bottom: calc(18px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chipt { background: rgba(20,20,26,.6); border-radius: 10px; padding: 6px 10px; min-width: 110px; }
.chipt .nm { display: block; font: 700 12px var(--ui); }
.chipt .bar { display: block; height: 5px; background: rgba(255,255,255,.25); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.chipt .bar i { display: block; height: 100%; width: 0; background: var(--hud-gold); transition: width .2s; }
.chipt.done { background: rgba(40,110,60,.8); }
.cue { position: absolute; display: flex; align-items: center; gap: 4px; background: rgba(20,20,26,.7); border-radius: 99px; padding: 4px 10px 4px 6px; font: 700 12px var(--ui); white-space: nowrap; }
.cue .ic { font-size: 18px; }
.cue.soon { animation: pulse2 .5s infinite alternate; }
@keyframes pulse2 { to { background: rgba(217,65,47,.85); } }
#hud-pause { position: absolute; top: calc(8px + var(--safe-t)); right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); background: rgba(0,0,0,.3); color: #fff; font-weight: 900; pointer-events: auto; }
#toast { position: absolute; left: 0; right: 0; top: calc(90px + var(--safe-t)); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: rgba(18,18,22,.86); color: #fff; font: 700 16px var(--ui); padding: 9px 16px; border-radius: 12px; max-width: 86%; text-align: center; animation: tin .25s ease-out; transition: opacity .35s, transform .35s; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
#pause { position: absolute; inset: 0; z-index: 40; background: rgba(10,12,18,.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
#pause .panel { background: #f4efe4; border-radius: 18px; padding: 20px; width: 100%; max-width: 340px; text-align: center; }

#flash { position: absolute; inset: 0; z-index: 12; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: camflash .5s ease-out; }
@keyframes camflash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* live aim points: small, quiet, gold for the ideal spot */
#pts { position: absolute; top: calc(72px + var(--safe-t)); left: 50%; transform: translateX(-50%); font: 700 13px var(--mono); color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; background: rgba(15,18,24,.38); padding: 2px 9px; border-radius: 99px; }
#pts small { font-size: 10px; opacity: .7; }
#pts b { color: #ffcf33; margin-left: 2px; }
#pts.bump { animation: ptsbump .35s ease-out; }
@keyframes ptsbump { 40% { transform: translateX(-50%) scale(1.18); } }
#pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, 0); font: 700 12px var(--mono); color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.35); animation: popup .9s ease-out forwards; }
.pop.ideal { color: #ffd54a; font-size: 13px; }
@keyframes popup { from { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: .9; } to { opacity: 0; transform: translate(-50%, -28px); } }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; opacity: .7; } }
/* ---- today's condition: the modifier reel ---- */
#reel { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(12,10,14,.42); padding-inline: 16px; animation: tin .25s ease-out; transition: opacity .28s; touch-action: none; }
#reel.out { opacity: 0; }
#reel, #reel * { box-sizing: border-box; }
.reel-box { width: min(372px, 100%); background: #f5f8fc; color: #151a33; border-radius: 22px; padding: 16px 14px 12px; box-shadow: 0 16px 40px rgba(0,0,0,.35); text-align: center; }
.reel-eyebrow { font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6a7394; margin-bottom: 10px; }
/* --cw is one card: a third of the window less the two 8px gaps. The strip, the cards and the frame all use it. */
.reel-window { --gap: 8px; --cw: calc((100% - 2 * var(--gap)) / 3); position: relative; overflow: hidden; border-radius: 14px; background: #151a33; padding: 10px 0; }
.reel-strip { display: flex; gap: var(--gap); width: 100%; margin: 0; padding: 0; will-change: transform; }
.reel-card { flex: 0 0 var(--cw); width: var(--cw); min-width: 0; height: 116px; border-radius: 12px; background: #26308a; color: #eef2ff; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 40px 1fr 16px; align-items: center; justify-items: center; padding: 10px 6px 8px; overflow: hidden; transition: background .12s; }
.reel-card .rc-ic { font-size: 32px; line-height: 40px; }
.reel-card .rc-nm { width: 100%; font: 800 12px/1.12 var(--ui); text-wrap: balance; overflow-wrap: anywhere; align-self: center; }
.reel-card .rc-bn { font: 700 11px/16px var(--mono); color: #ff5c9a; }
.reel-card.near { background: #3a47b0; }
.reel-card.win { background: #ff5c9a; color: #151a33; }
.reel-card.win .rc-bn { color: #151a33; }
.reel-mark { position: absolute; top: 6px; bottom: 6px; left: calc(var(--cw) + var(--gap) - 4px); width: calc(var(--cw) + 8px); border: 3px solid #ff5c9a; border-radius: 15px; pointer-events: none; box-shadow: 0 0 0 999px rgba(0,0,0,.28); }
.reel-result { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; min-height: 66px; opacity: 0; transition: opacity .2s; }
.reel-result.on { opacity: 1; }
.reel-result b { font: 900 21px/1.15 var(--ui); text-wrap: balance; }
.reel-result span { font: 500 14px/1.3 var(--ui); color: #4f5779; text-wrap: balance; }
#reel.pick3 .reel-window { padding: 10px; }
#reel.pick3 .reel-card { flex: 1 1 0; width: auto; border: 0; font: inherit; cursor: pointer; pointer-events: auto; }
#reel.pick3 .reel-card:focus-visible { outline: 3px solid #ff5c9a; }
#reel.pick3 .pick-rand { margin-top: 10px; width: 100%; pointer-events: auto; }
.reel-skip { margin-top: 6px; font: 600 11px var(--mono); color: #8a93b5; }
.rmod { font: 700 13px var(--ui); color: #8a6a1a; margin-top: 4px; }
/* ---- texting: the phone in your other hand ---- */
#phone { position: absolute; right: 14px; bottom: calc(-360px + var(--safe-b, 0px)); z-index: 25; width: 128px; height: 236px; border-radius: 22px; background: #111; border: 3px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,.45); transform: rotate(-9deg); transition: bottom .35s cubic-bezier(.3,1.4,.5,1), transform .35s; pointer-events: none; }
#phone.up { bottom: calc(96px + var(--safe-b, 0px)); transform: rotate(-3deg); }
#phone .ph-notch { width: 40px; height: 6px; border-radius: 3px; background: #2a2a2a; margin: 6px auto 4px; }
#phone .ph-screen { position: absolute; inset: 16px 7px 10px; border-radius: 12px; background: #f4f1ea; overflow: hidden; display: flex; flex-direction: column; }
#phone .ph-top { font: 800 11px var(--ui); color: #222; padding: 5px 8px; border-bottom: 1px solid #ddd; }
#phone .ph-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 6px; }
#phone .ph-me, #phone .ph-them { font: 600 10px var(--ui); padding: 4px 7px; border-radius: 9px; max-width: 85%; }
#phone .ph-me { align-self: flex-end; background: #2f7fe8; color: #fff; }
#phone .ph-them { align-self: flex-start; background: #ddd8cc; color: #222; }
#phone .ph-type { margin: 4px 6px 6px; height: 20px; border-radius: 10px; background: #fff; border: 1px solid #ccc; font: 600 10px var(--ui); color: #222; display: flex; align-items: center; padding-inline: 7px; }
#phone .ph-type i { width: 1px; height: 11px; background: #2f7fe8; margin-left: 1px; animation: blink 1s steps(2) infinite; }
#phone .ph-thumb { position: absolute; right: -12px; bottom: 30px; width: 38px; height: 54px; border-radius: 18px 18px 14px 14px; background: #e0b48f; box-shadow: inset -4px -4px 0 rgba(0,0,0,.08); transform: rotate(-30deg); transition: transform .06s; }
#phone .ph-thumb.tap { transform: rotate(-30deg) translate(-4px, -3px); }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #phone { transition: none; } }

.style .swatch.font { display: grid; place-items: center; height: 26px; background: #fbf6e8; color: #151a33; font-size: 16px; font-weight: 700; box-shadow: none; }

.pop.penalty { font: 900 34px var(--ui); color: #ff4a3a; text-shadow: 0 2px 0 #1d0a08, 0 0 18px rgba(255,60,40,.6); transform: translate(-50%, 0) rotate(-6deg); animation: stampin 1.4s ease-out forwards; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pop.penalty small { font: 800 14px var(--mono); letter-spacing: .2em; }
#pts.hit { animation: ptshit .5s ease-out; }
@keyframes stampin { 0% { opacity: 0; transform: translate(-50%, 0) scale(2.2) rotate(-6deg); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-6deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px) scale(1) rotate(-6deg); } }
@keyframes ptshit { 0%, 100% { color: inherit; transform: none; } 30% { color: #ff4a3a; transform: translateX(-4px); } 60% { transform: translateX(4px); } }

.evidence { margin: 10px auto 14px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.evcard { width: 100%; border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.28); animation: printin .7s ease-out; }

.pointsTotal { margin-top: 6px; font: 600 14px var(--ui); color: #4f5779; }
.pointsTotal b { font: 900 20px var(--ui); color: #151a33; }
.pointsTotal span { color: #c0392b; font-size: 12px; }

/* ---- today's condition: the banner and the gags ---- */
#modban { position: absolute; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); z-index: 35; width: min(360px, calc(100% - 32px)); display: flex; gap: 10px; align-items: center; background: #151a33; color: #f5f8fc; border: 3px solid #ff5c9a; border-radius: 16px; padding: 10px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.4); animation: modin .45s cubic-bezier(.3,1.6,.5,1); pointer-events: none; transition: opacity .4s, transform .4s; }
#modban.out { opacity: 0; transform: translate(-50%, -20px); }
#modban .mb-ic { font-size: 38px; line-height: 1; }
#modban .mb-tx { display: flex; flex-direction: column; gap: 2px; text-align: left; }
#modban b { font: 900 19px var(--ui); color: #ff9cc3; }
#modban i { font: 500 13px var(--ui); font-style: normal; color: #d8ccb0; }
@keyframes modin { 0% { transform: translate(-50%, -80px) rotate(-4deg); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } }
.fxword { position: absolute; left: 50%; top: 42%; z-index: 34; transform: translate(-50%, -50%); font: 900 42px var(--ui); color: #fff; text-shadow: 0 3px 0 #151a33, 0 0 16px rgba(0,0,0,.6); pointer-events: none; animation: fxpop 1.2s ease-out forwards; white-space: nowrap; }
.fxword.ah { font-size: 30px; color: #ffe9c2; font-style: italic; }
.fxword.big { font-size: 58px; color: #ffd21a; -webkit-text-stroke: 2px #151a33; }
.fxword.hic { color: #7ee0ff; }
@keyframes fxpop { 0% { transform: translate(-50%, -50%) scale(.4) rotate(-8deg); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1) rotate(0); opacity: 0; } }
.bee { position: absolute; z-index: 33; font-size: 44px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.handtag { position: absolute; left: 50%; bottom: calc(118px + var(--safe-b)); transform: translateX(-50%) rotate(-3deg); z-index: 33; font: 900 16px var(--mono); letter-spacing: .12em; color: #fff; background: #c0392b; padding: 6px 12px; border-radius: 8px; pointer-events: none; }
.handtag.ok { background: #2f8a4a; }
.notes { position: absolute; inset: 0; z-index: 32; pointer-events: none; overflow: hidden; }
.notes span { position: absolute; bottom: 18%; font-size: 34px; color: #ff9cc3; text-shadow: 0 2px 0 #151a33; animation: noteup 1.6s ease-out forwards; }
@keyframes noteup { 0% { transform: translateY(0) rotate(-10deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-260px) rotate(20deg); opacity: 0; } }
#phone .ph-call { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(#2f7fe8, #1a3f8a); color: #fff; }
#phone.calling .ph-call { display: flex; }
#phone .ph-face { font-size: 54px; animation: facebob .8s ease-in-out infinite; }
#phone .ph-caller { font: 900 18px var(--ui); }
#phone .ph-sub { font: 600 11px var(--ui); opacity: .85; }
#phone.calling:not(.live) { animation: ringshake .12s linear infinite; }
#phone.live .ph-sub::after { content: ' 00:0' attr(data-s); }
@keyframes ringshake { 0%, 100% { transform: rotate(-3deg) translateX(-2px); } 50% { transform: rotate(3deg) translateX(2px); } }
@keyframes facebob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---- phone apps ---- */
#phone .ph-chat, #phone .ph-app { position: absolute; inset: 0; display: none; flex-direction: column; }
#phone.m-text .ph-chat { display: flex; }
#phone.m-app .ph-app { display: flex; }
#phone.big { width: 176px; height: 320px; }
#phone.big.up { bottom: calc(86px + var(--safe-b, 0px)); }
#phone .ph-apptop { font: 900 14px var(--ui); padding: 6px 8px; background: #fff; border-bottom: 1px solid #ddd; }
#phone .ph-appbody { flex: 1; overflow: hidden; position: relative; background: #eef0f3; }
#phone .feed { display: flex; flex-direction: column; gap: 6px; padding: 6px; transition: transform .35s cubic-bezier(.2,.8,.3,1); }
#phone .post { background: #fff; border-radius: 8px; padding: 6px; font: 600 10px var(--ui); color: #222; }
#phone .ph-who { font-size: 10px; } #phone .ph-txt { margin: 3px 0; font-weight: 500; }
#phone .ph-pic { font-size: 34px; text-align: center; background: #f4f1ea; border-radius: 6px; padding: 8px 0; position: relative; }
#phone .ph-pic.big { font-size: 64px; padding: 18px 0; }
#phone .ph-likes { color: #666; font-size: 9px; margin-top: 3px; }
#phone .heart { position: absolute; left: 50%; top: 50%; font-size: 40px; transform: translate(-50%,-50%) scale(0); }
#phone .heart.pop { animation: heartpop .6s ease-out; }
@keyframes heartpop { 0% { transform: translate(-50%,-50%) scale(0); opacity: 1; } 40% { transform: translate(-50%,-50%) scale(1.3); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
#phone .deck { position: absolute; inset: 6px 6px 40px; }
#phone .card { position: absolute; inset: 0; background: linear-gradient(#ffe3e8, #fff); border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,.15); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; animation: cardin .25s ease-out; transition: transform .35s ease-in, opacity .35s; }
#phone .card.swr { transform: translateX(160%) rotate(25deg); opacity: 0; }
#phone .card.swl { transform: translateX(-160%) rotate(-25deg); opacity: 0; }
@keyframes cardin { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
#phone .ph-av { font-size: 70px; line-height: 1; }
#phone .ph-nm { font: 900 14px var(--ui); color: #222; }
#phone .ph-bio { font: 600 10px var(--ui); color: #555; }
#phone .swipebar { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: space-around; font-size: 18px; }
#phone .swipebar span { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.15); color: #ff4f6d; }

/* ---- the credits ---- */
.credits { position: absolute; inset: 0; background: radial-gradient(#1d1a2e, #07060c); color: #f5f8fc; overflow: hidden; text-align: center; }
.cr-roll { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-inline: 16px; animation: roll 60s linear forwards; }
@keyframes roll { to { transform: translateY(calc(-100% - 100vh + 40vh)); } }
.cr-title { font: 900 44px var(--ui); color: #ff9cc3; letter-spacing: .04em; margin-top: 30vh; }
.cr-sub { font: italic 500 16px var(--display); color: #cfc3a8; margin-bottom: 30px; }
.cr-head { font: 700 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: #9a8fb8; margin-top: 34px; }
.cr-star { font: 900 34px var(--ui); color: #fff; }
.cr-name { font: 700 20px var(--ui); }
.cr-row { display: flex; justify-content: space-between; gap: 18px; width: min(340px, 100%); font: 600 16px var(--ui); border-bottom: 1px dashed rgba(255,255,255,.12); padding-block: 4px; }
.cr-row b { color: #ff9cc3; font-variant-numeric: tabular-nums; }
.cr-end { font: 900 64px var(--ui); color: #ff9cc3; margin-top: 50vh; }
.credits .cta { margin: 30px auto 40vh; }
@media (prefers-reduced-motion: reduce) { .cr-roll { animation: none; position: static; } }

/* ---- the end: black, then silence ---- */
#theend { position: fixed; inset: 0; z-index: 99999; background: #000; cursor: none; }
.credits.final { background: #000; }
.credits.final .cr-roll { animation-duration: 75s; }
.cr-q { font-size: 40px; letter-spacing: .04em; color: #f5f8fc; white-space: nowrap; }
.cr-qm { display: inline-block; color: #ff9cc3; animation: qm 2.4s steps(1) infinite; }
@keyframes qm { 50% { opacity: 0; } }
.credits .cr-dots { margin: 34px auto 42vh; color: #3a3648; font-size: 22px; letter-spacing: .3em; }
@media (prefers-reduced-motion: reduce) { .cr-qm { animation: none; } }

.cue.blind { display: none !important; }

.studyhud { position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); bottom: calc(64px + var(--safe-b)); width: min(320px, 86vw); background: rgba(20,24,32,.84); color: #fff; border-radius: 16px; padding: 10px 14px; text-align: center; pointer-events: none; }
.studyhud b { font: 900 15px var(--ui); letter-spacing: .02em; } .studyhud small { font: 600 11px var(--mono); opacity: .7; }
.sh-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.18); overflow: hidden; margin: 7px 0 5px; } .sh-bar i { display: block; height: 100%; background: #ffd23f; }

/* ================================================================================================================
   THE SHELL (2026-09-17): every menu screen, the tab bar, Home, the island's labels and card, the sheet, the level card
   and the report. Ported from Handle With Cannon (Priceless): .screen plates, .wordmark / .eyebrow / .tagline, .btn,
   .seg-nav, .pane, .tabbar, .topbar / .crest / .notice, .estate-toggle, .playbar, .em-label / .em-card, .ledger, .board,
   .game-card, .wing, .settings, .receipt-actions. Class names kept so the two games can share code.
   ================================================================================================================ */

/* ---------- screens: warm near-white plates ---------- */
.screen { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; padding: calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b)); overflow: auto; -webkit-overflow-scrolling: touch; text-align: center; color: var(--ink);
  background: radial-gradient(ellipse at 50% -10%, #ffffff 0%, var(--menu-bg) 55%, #f2efe7 100%); }
.screen.wide, .screen.tabbed { justify-content: flex-start; }
.screen.tabbed { padding-bottom: calc(96px + var(--safe-b)); }
.screen.dim, .screen.report-screen { background: rgba(20, 20, 22, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--paper); }
.screen.dark, .screen.pass-screen { background: radial-gradient(ellipse at 50% 0%, #1f4a40, var(--velvet-2) 70%); color: var(--paper); }
.screen.loading-screen { background: radial-gradient(ellipse at 50% 0%, rgba(47, 91, 234, 0.96), rgba(17, 23, 55, 0.98) 70%); color: var(--paper); }
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 60vh; color: var(--paper); font: italic 500 15px var(--display); }
.loading .logo .one { color: var(--paper); }
.load-bar, .progress { width: min(70vw, 320px); height: 3px; background: rgba(245, 248, 252, 0.18); margin: 18px auto 12px; }
.load-bar i, .progress-fill { display: block; height: 100%; width: 0; background: var(--gold-3); transition: width .25s; }
.load-tip, #load-tip { font-family: var(--mono); font-size: 12px; color: rgba(245, 248, 252, 0.6); }

/* type */
.wordmark { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 9vw, 84px); letter-spacing: -.02em; line-height: 1; text-transform: uppercase; color: var(--velvet); }
.wordmark .wm-line { display: block; }
.wordmark.big { font-size: clamp(48px, 8.5vw, 104px); }
.wordmark.small { font-size: clamp(24px, 4vw, 34px); font-weight: 700; }
.wordmark.light { color: var(--paper); }
.eyebrow { font-family: var(--ui); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.tagline, .lede { font-family: var(--display); font-style: italic; font-size: clamp(16px, 3vw, 20px); line-height: 1.4; color: var(--ink-2); margin: 10px 0 14px; max-width: 34ch; text-wrap: balance; }
.dim { color: var(--menu-muted); }
.footnote { margin-top: 18px; font-size: 12px; color: var(--menu-muted); max-width: 44ch; line-height: 1.45; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 4vw, 34px); line-height: 1.05; margin: 0; color: var(--velvet); }
.stack { display: flex; flex-direction: column; gap: 10px; width: min(88vw, 340px); margin: 0 auto; }
.stat-row { display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.stat-k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--menu-muted); font-weight: 600; }
.stat-v { font-family: var(--display); font-weight: 700; font-size: 26px; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--gold-2); }
@media (max-width: 430px) { .stat-row { gap: 10px 20px; margin-top: 18px; } .stat-row > div { min-width: 0; flex: 0 1 calc(50% - 20px); } .stat-k { font-size: 9.5px; letter-spacing: .1em; } .stat-v { font-size: 21px; } }

/* buttons: one pill family. .cta / .ghost / .link are the old names, kept for study.js and the sheets. */
.btn, .cta, .ghost { pointer-events: auto; font-family: var(--ui); font-weight: 600; font-size: 15px; letter-spacing: .02em; padding: 13px 20px; border-radius: 999px; border: 1px solid rgba(20, 20, 22, 0.16); background: var(--menu-card); color: var(--ink); cursor: pointer; transition: transform .08s, background .15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 16px -14px rgba(20, 20, 22, 0.55); min-height: 44px; text-decoration: none; }
.btn:hover, .ghost:hover { background: #fff; border-color: rgba(20, 20, 22, 0.35); }
.btn:active, .cta:active, .ghost:active { transform: scale(.97); }
.btn.primary, .cta { background: var(--velvet); border-color: var(--velvet); color: #fff; }
.btn.primary:hover, .cta:hover { background: #1a2c7a; }
.btn.gold, .btn.primary.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.small { padding: 9px 14px; font-size: 13px; min-height: 36px; }
.btn.alt, .link { background: none; border-color: transparent; box-shadow: none; color: var(--ink-2); font: 600 13px var(--ui); padding: 6px 10px; text-decoration: underline; text-underline-offset: 3px; min-height: 0; }
.cta, .ghost { display: flex; width: 100%; margin: 10px 0 0; }
.cta + .ghost, .ghost + .ghost, .ghost + .cta { margin-top: 8px; }
.link { display: block; margin: 10px auto 0; cursor: pointer; }
.btn:focus-visible, .cta:focus-visible, .ghost:focus-visible, .link:focus-visible, .seg-btn:focus-visible, .crest:focus-visible, .notice:focus-visible, .tab:focus-visible, .wing:focus-visible, .game-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pill { font-family: var(--mono); font-size: 11px; background: var(--gold-3); color: var(--ink); padding: 3px 8px; border-radius: 999px; }
.pill.count { background: var(--gold); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 12px; }
.chip { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(20, 20, 22, 0.16); background: var(--menu-card); color: var(--ink); font: 600 12px var(--ui); }
.chip span, .chip small { font: 500 10px var(--mono); color: var(--muted-ink); }
.chip.on { background: var(--velvet); border-color: var(--velvet); color: #fff; }
.chip.on span, .chip.on small { color: rgba(255, 255, 255, 0.78); }
.chip.quiet { cursor: default; }
.field { display: grid; gap: 6px; margin: 10px auto 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--menu-muted); font-weight: 600; width: min(88vw, 340px); text-align: left; }
.field input, .field select { font: 15px var(--ui); padding: 11px 14px; border: 1px solid rgba(20, 20, 22, 0.2); border-radius: 6px; background: #fff; color: var(--ink); width: 100%; }
.field input:focus, .field select:focus { outline: 3px solid var(--gold); outline-offset: 1px; }

/* ---------- screens that are tabs: a head, a segmented nav, and panes ---------- */
.tab-head { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: min(96vw, 760px); padding-top: 4px; margin-bottom: 10px; min-height: 40px; }
.tab-head .tab-back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; }
.seg-nav { flex: none; display: flex; gap: 6px; width: min(96vw, 760px); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.seg-nav::-webkit-scrollbar { display: none; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 12px 0 4px; }
.seg-btn { font: 600 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(20, 20, 22, 0.2); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg-btn.on { background: var(--gold-3); border-color: var(--gold-3); color: var(--ink); }
.seg-nav .seg-btn { flex: 0 0 auto; min-height: 44px; white-space: nowrap; padding: 0 16px; }
.seg-btn .sm { display: none; }
@media (max-width: 520px) { .seg-btn .lg { display: none; } .seg-btn .sm { display: inline; } .seg-nav .seg-btn { padding: 0 11px; font-size: 10px; letter-spacing: .1em; } }
.pane { flex: none; width: min(96vw, 760px); display: flex; flex-direction: column; align-items: center; animation: paneIn .18s ease-out; }
.pane > * { max-width: 100%; }
@keyframes paneIn { from { opacity: 0; translate: 0 6px; } }
.plaques-sub, .games-sub { font-family: var(--display); font-style: italic; color: var(--menu-muted); margin: -2px 0 14px; text-align: center; max-width: 46ch; }
.games-sub { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.estate-cols { width: 100%; display: grid; gap: 22px; padding-bottom: 24px; text-align: left; }
.estate-cols h3 { font: 600 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 8px; }
@media (min-width: 820px) { .estate-cols { grid-template-columns: 1fr 1fr; } }

/* old page frame (study.js, privacy): the head reads as a tab head */
.page { width: min(96vw, 760px); display: flex; flex-direction: column; align-items: center; }
.page .top { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-bottom: 10px; }
.page .top h2 { font-size: clamp(24px, 4vw, 34px); }
.back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(20, 20, 22, 0.16); background: var(--menu-card); font-size: 24px; line-height: 1; color: var(--ink); box-shadow: 0 6px 16px -14px rgba(20, 20, 22, 0.55); }
.page > .lede, .page > .dim, .page > p { max-width: 46ch; }
.page .field { margin-left: 0; margin-right: 0; width: 100%; }

/* ---------- ledger rows: a name, one compact line under it, a status on the right that never wraps ---------- */
.ledger { display: grid; gap: 6px; width: 100%; text-align: left; }
.ledger .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; background: var(--menu-card); border: 1px solid var(--menu-line); border-radius: 4px; color: var(--ink); box-shadow: 0 10px 24px -20px rgba(20, 20, 22, 0.55); text-align: left; font: inherit; width: 100%; }
button.ledger, .ledger button.row { cursor: pointer; }
.ledger .rowmain { min-width: 0; }
.ledger .k, .ledger .s { display: block; }
.ledger .k { font-family: var(--display); font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; color: var(--ink); }
.ledger .s { font: 500 11px var(--mono); color: var(--menu-muted); letter-spacing: .03em; margin-top: 2px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger .v { display: grid; justify-items: end; gap: 2px; white-space: nowrap; font-family: var(--mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.35; color: var(--ink-2); }
.ledger .v b { font: 700 14px var(--mono); }
.ledger .v .s { margin: 0; font-size: 10.5px; }
.ledger .v.good, .ledger .v.good b { color: var(--gold-ink); }
.ledger .row.locked { opacity: .6; }
.ledger .row.locked .k { color: var(--muted-ink); }
.ledger .row.settled .k { color: var(--velvet); }
.ledger .status { display: inline-block; font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; border: 1px solid rgba(20, 20, 22, 0.25); color: var(--ink-2); }
.ledger .status.settled { background: var(--gold); color: var(--ink); border-color: var(--gold); }
@media (max-width: 400px) { .ledger .k { font-size: 14px; } .ledger .s { font-size: 10px; } .ledger .v b { font-size: 13px; } }

/* the board (the Morning Routine's regulars) */
.board { width: min(88vw, 340px); margin-top: 16px; text-align: left; font-family: var(--mono); font-size: 12.5px; display: grid; gap: 4px; list-style: none; padding: 0; }
.board .row, .board li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--menu-line); }
.board .row.me, .board li.me { font-weight: 600; background: rgba(255, 92, 154, 0.12); margin: 0 -8px; padding: 6px 8px; border-radius: 4px; }
.board .head { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--menu-muted); border: 0; }
.board .rk { color: var(--muted-ink); }
.board.wide { width: min(94vw, 520px); font-size: 13.5px; }

/* ---------- the tab bar: four destinations (Play · Daily · Games · Locker); never over a visit ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 10px calc(6px + var(--safe-b)); background: linear-gradient(#26308a, #141b4d); border-top: 3px solid #ff5c9a; box-shadow: 0 -8px 24px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); pointer-events: auto; }
/* game tabs: a chunky full-colour icon on a raised tile; the active one pops up out of the bar on a gold tile */
.tab { position: relative; pointer-events: auto; background: none; border: 0; min-height: 56px; padding: 0 2px 2px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; color: rgba(225, 232, 255, 0.75); font: 800 10.5px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tab-ic { display: grid; place-items: center; width: 42px; height: 38px; border-radius: 13px; background: linear-gradient(#3a47b0, #222c7c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.3); transition: transform .22s cubic-bezier(.2, 1.6, .4, 1), background .2s; }
.tab svg { width: 30px; height: 30px; filter: saturate(.8); transition: filter .2s; }
.tab:active .tab-ic { transform: translateY(2px) scale(.94); }
.tab.on { color: #ffd0e2; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.tab.on .tab-ic { width: 52px; height: 48px; border-radius: 16px; transform: translateY(-14px); background: linear-gradient(#ff9cc3, #ff5c9a 60%, #d93a78); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), inset 0 -4px 0 rgba(120, 10, 60, 0.4), 0 4px 0 #9c1f55, 0 10px 18px -6px rgba(0, 0, 0, 0.6); }
.tab.on svg { width: 38px; height: 38px; filter: none; animation: tab-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.tab.on .tab-lb { margin-top: -14px; }
@keyframes tab-pop { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.15) rotate(4deg); } 100% { transform: none; } }
.tab .badge { position: absolute; top: -4px; left: 50%; margin-left: 10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: linear-gradient(#ff6a5e, #d8302a); color: #fff; font: 900 11px/20px var(--ui); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, 0.4); animation: badge-bob 1.6s ease-in-out infinite; z-index: 1; }
.tab.on .badge { top: -18px; }
.tab .badge.due { background: linear-gradient(#5fe0f5, #1fa9d1); color: #07324a; }
@keyframes badge-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (min-width: 900px) {   /* the web: the same four destinations as a floating dock, centred under the page */
  .tabbar { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); width: min(480px, 92vw); border-radius: 24px; border: 3px solid #ff5c9a; padding: 8px 10px 6px; box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.6); }
  .screen.tabbed { padding-bottom: 100px; }
}

/* ---------- HOME: the island, full bleed, one primary action ---------- */
.screen.map3d-screen { padding: 0; display: block; overflow: hidden; pointer-events: none; background: transparent; }
.screen.map3d-screen > .mapwrap { position: absolute; inset: 0; max-width: none; margin: 0; }
.screen.home-screen { background: transparent; }
#mapdrag { position: absolute; inset: 0; pointer-events: auto; touch-action: none; cursor: grab; }
#mapdrag:active { cursor: grabbing; }
#maplabels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.home #maplabels { z-index: 2; }
.em-loading, .maploading { position: absolute; inset: 0; display: grid; place-items: center; font: italic 500 15px var(--display); color: var(--velvet); pointer-events: none; }
.em-loading span { animation: emPulse 1.6s ease-in-out infinite; }
@keyframes emPulse { 50% { opacity: .45; } }
.topbar { position: absolute; left: 0; right: 0; top: 0; z-index: 12; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: calc(8px + var(--safe-t)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.crest { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(20, 20, 22, 0.1); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--velvet); cursor: pointer; box-shadow: 0 8px 20px -14px rgba(20, 20, 22, 0.8); padding: 0; }
.crest svg { width: 23px; height: 23px; fill: currentColor; }
.crest .one { font: 900 21px/1 var(--display); color: var(--velvet); margin-top: -3px; }
.crest.owned, .crest.stars { color: var(--gold-2); border-color: var(--gold); background: linear-gradient(140deg, #fffaf0, #fdf3d6); }
.crest .pill { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font: 700 8.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); white-space: nowrap; }
.crest:active { scale: .94; }
.crest.blank { visibility: hidden; }
.notice { flex: 0 1 auto; min-width: 0; max-width: min(100%, 440px); margin-inline: auto; height: 34px; margin-top: 5px; padding: 0 13px; border: 1px solid rgba(20, 20, 22, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--velvet); font: italic 500 12px/32px var(--display); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 8px 20px -16px rgba(20, 20, 22, 0.9); transition: opacity .18s; }
.notice.swap { opacity: 0; }
.notice:active { scale: .98; }
.notice.static { cursor: default; font-style: normal; font-weight: 700; }
.estate-toggle { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: calc(150px + var(--safe-b)); z-index: 12; display: flex; gap: 0; border: 1px solid rgba(20, 20, 22, 0.16); border-radius: 999px; padding: 3px; background: #fff; box-shadow: 0 10px 24px -18px rgba(20, 20, 22, 0.8); pointer-events: auto; }
.estate-toggle .seg-btn { border: 0 !important; padding: 0 18px; min-height: 40px; font-size: 11px; color: var(--muted-ink); }
.estate-toggle .seg-btn.on { background: var(--velvet); color: #fff; }
.playbar { position: absolute; left: 0; right: 0; bottom: calc(76px + var(--safe-b)); z-index: 13; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.btn.play-cta { pointer-events: auto; width: min(100%, 440px); min-height: 58px; padding: 16px 22px; border-radius: 18px; border: 0; background: linear-gradient(160deg, #4a73ff, #1a2c7a); color: #fff; font-family: var(--display); font-weight: 700; font-size: clamp(16px, 4.4vw, 20px); letter-spacing: .01em; cursor: pointer; box-shadow: 0 16px 34px -18px rgba(11, 38, 32, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22); transition: scale .1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.btn.play-cta:active { scale: .985; }
.btn.play-cta:hover { background: linear-gradient(160deg, #4a73ff, #1a2c7a); }
#wcard:not([hidden]) ~ .playbar, #wcard:not([hidden]) ~ .estate-toggle { display: none; }
@media (min-width: 900px) { .playbar { bottom: 96px; } .estate-toggle { bottom: 170px; } .notice { font-size: 13px; } }
/* the List view: the worlds as ledger rows over the island */
.world-list { position: absolute; inset: 0; z-index: 4; overflow: auto; -webkit-overflow-scrolling: touch; padding: calc(64px + var(--safe-t)) 16px calc(150px + var(--safe-b)); text-align: center; background: radial-gradient(ellipse at 50% -10%, #ffffff 0%, var(--menu-bg) 55%, #f2efe7 100%); pointer-events: auto; }
.world-list .ledger { max-width: 640px; margin: 10px auto 0; }
.world-list .row .k { font-size: 16px; }
.world-list .row .k .n { font: 600 10px var(--mono); letter-spacing: .12em; color: var(--gold-ink); margin-right: 8px; vertical-align: 2px; }
.world-list .row .v b { font-size: 13px; }

/* ---------- the island's labels (src/n1/overview.js): the estate map's white pills, a tail to the roof ---------- */
.ov-label { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; margin: 0; padding: 3px 8px 3px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.93); color: var(--ink); box-shadow: 0 6px 14px -8px rgba(20, 20, 22, 0.6), 0 0 0 1px rgba(20, 20, 22, 0.08); white-space: nowrap; text-align: center; pointer-events: none; transition: opacity .18s; will-change: transform; font: inherit; }
.ov-label::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -5px; width: 9px; height: 9px; background: inherit; transform: translateX(-50%) rotate(45deg); box-shadow: 2px 2px 2px -1px rgba(20, 20, 22, 0.18); }
.ov-label::before { content: ""; position: absolute; left: var(--tail, 50%); top: 100%; width: 1.5px; height: var(--lead, 0px); background: linear-gradient(rgba(20, 20, 22, .45), rgba(20, 20, 22, .1)); transform: translateX(-50%); border-radius: 1px; }
.ov-label .ov-n { display: none; font: 700 10.5px/1.15 var(--display); font-style: normal; color: var(--ink); }
.ov-label .ov-text { display: grid; justify-items: center; gap: 1px; }
.ov-label b { font: 700 11.5px/1.15 var(--display); letter-spacing: -.005em; }
.ov-label .ov-meta { font: 600 9.5px/1.2 var(--mono); letter-spacing: .06em; color: var(--gold-ink); text-transform: uppercase; }
.ov-label .ov-meta small { font-size: 9.5px; font-weight: 600; }
.ov-label .ov-star { color: var(--gold-2); }
.ov-label .ov-lock { font-size: 9px; }
.ov-label.fresh .ov-meta { background: var(--gold-3); color: var(--ink); padding: 1px 6px; border-radius: 999px; }
.ov-label.locked { background: rgba(229, 236, 247, 0.93); color: var(--muted-ink); }
.ov-label.locked b { color: var(--muted-ink); font-weight: 600; }
.ov-label.locked .ov-meta { color: var(--muted-ink); text-transform: none; letter-spacing: .02em; }
.ov-label.locked.later .ov-need { display: none; }
.ov-label.gold b::before { content: "\2691"; color: var(--gold-2); margin-right: 4px; font-size: 11px; }   /* a gold flag: every star in the world */
.ov-label.gold .ov-meta { color: var(--gold-2); }
.ov-label.on { background: var(--velvet); color: #fff; }
.ov-label.on b, .ov-label.on .ov-n { color: #fff; }
.ov-label.on .ov-meta, .ov-label.on .ov-star { color: var(--gold-3); background: none; padding: 0; }
.ov-label.on::before { width: 2px; background: linear-gradient(var(--velvet), rgba(20, 67, 58, .15)); }
.ov-label.on.locked .ov-meta { color: rgba(255, 255, 255, 0.75); }
.ov-label:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ov-label.mini { padding: 2px 8px; border-radius: 999px; grid-auto-flow: column; gap: 5px; align-items: center; }
.ov-label.mini .ov-n { display: block; }
.ov-label.mini .ov-text b, .ov-label.mini .ov-need { display: none; }
.ov-label.mini .ov-meta { font-size: 9px; }
.ov-label.mini.locked .ov-meta { display: none; }
.ov-label.mini.locked .ov-n::after { content: " \1F512"; font-size: 8px; }
.ov-label.off { opacity: 0; visibility: hidden; }
.ov-tight .ov-label:not(.mini) { padding: 2px 6px; }
.ov-tight .ov-label b { font-size: 10.5px; }
.ov-tight .ov-label .ov-meta { font-size: 8.5px; }
.ov-bubble { position: absolute; left: 0; top: 0; z-index: 60; width: max-content; max-width: min(250px, 72vw); padding: 8px 12px; pointer-events: none; border-radius: 12px; background: var(--ink); color: var(--paper); font: italic 500 13px/1.35 var(--display); text-align: center; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7); text-wrap: balance; will-change: transform; }
.ov-bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.ov-bubble.in { animation: emPop .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes emPop { from { opacity: 0; scale: .8; } }

/* the world card over the island (.em-card) */
.em-card { position: absolute; left: 10px; right: 10px; bottom: calc(86px + var(--safe-b)); z-index: 8; margin: 0 auto; max-width: 440px; padding: 12px 14px 12px 20px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 18px 40px -18px rgba(20, 20, 22, 0.6), 0 0 0 1px rgba(20, 20, 22, 0.07); overflow: hidden; text-align: left; pointer-events: auto; }
.em-card.in { animation: emCard .25s cubic-bezier(.2, .9, .3, 1); }
.em-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(var(--wc, var(--velvet)), var(--wt, var(--gold))); }
@keyframes emCard { from { opacity: 0; translate: 0 14px; } }
@media (min-width: 720px) { .em-card { right: auto; left: 14px; width: 380px; margin: 0; } }
@media (min-width: 900px) { .em-card { bottom: 110px; } }
.em-card-unit { font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); padding-right: 28px; }
.em-card-name { font: 700 clamp(19px, 2.6vw, 24px)/1.1 var(--display); margin-top: 3px; color: var(--ink); }
.em-card-blurb { font: italic 400 13px/1.4 var(--display); color: var(--ink-2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.em-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.em-card-foot { font: 500 11px/1.3 var(--mono); color: var(--muted-ink); }
.em-card-foot b { color: var(--gold-ink); font-weight: 600; }
.em-card .btn.em-enter { padding: 10px 26px; font-size: 14px; flex: none; }
.em-card-lock { font: 500 11px/1.35 var(--mono); color: var(--muted-ink); text-align: right; max-width: 55%; }
.em-card-close { position: absolute; right: 8px; top: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted-ink); font: 400 22px/1 var(--ui); cursor: pointer; }
.em-card-close:hover { background: rgba(20, 20, 22, 0.06); }
.em-card .progress { width: 100%; margin: 8px 0 0; height: 4px; border-radius: 2px; background: rgba(20, 20, 22, 0.1); }
.em-card .progress-fill { background: var(--gold); border-radius: 2px; }

.wings { display: grid; gap: 10px; width: 100%; padding-bottom: 4px; }
.wing { pointer-events: auto; position: relative; text-align: left; background: var(--menu-card); color: var(--ink); border: 1px solid var(--menu-line); padding: 14px 16px 12px; cursor: pointer; display: grid; gap: 3px; border-radius: 6px; box-shadow: 0 10px 24px -20px rgba(20, 20, 22, 0.55); font: inherit; width: 100%; }
.wing .num { font-family: var(--mono); font-size: 11px; color: var(--muted-ink); letter-spacing: .1em; text-transform: uppercase; }
.wing .name { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.05; }
.wing .blurb { font-size: 12.5px; color: var(--ink-2); font-style: italic; font-family: var(--display); line-height: 1.35; }
.wing .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--muted-ink); }
.wing .stars { color: var(--gold-2); letter-spacing: .1em; font-size: 14px; }
.wing .stars .off { color: rgba(20, 20, 22, 0.18); }
.wing.locked { background: var(--paper-2); color: var(--muted); cursor: default; }
.wing.locked .name { color: var(--muted-ink); }
.wing .lock { position: absolute; right: 12px; top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); border: 1px solid var(--gold); padding: 3px 7px; border-radius: 999px; background: #fff8dc; }
.wing.played { border-color: rgba(255, 92, 154, 0.5); }

/* ---------- the Games tab: the contests as game cards ---------- */
.games-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; width: min(96vw, 900px); }
.game-card { pointer-events: auto; cursor: pointer; text-align: left; display: grid; gap: 6px; padding: 14px 15px; border-radius: 10px; border: 1px solid var(--menu-line); background: var(--menu-card); color: var(--ink); transition: background .15s; box-shadow: 0 10px 24px -20px rgba(20, 20, 22, 0.55); font: inherit; }
.game-card:hover { background: #fff; border-color: rgba(20, 20, 22, 0.2); }
.game-card.next { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 92, 154, 0.35); }
.game-card .gc-name { font-family: var(--display); font-weight: 700; font-size: 20px; }
.game-card .gc-blurb { font-size: 13px; color: var(--muted-ink); line-height: 1.35; }
.game-card .gc-foot { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
@media (max-width: 430px) { .game-card .gc-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .game-card.next .gc-blurb { -webkit-line-clamp: 3; } }
.players { width: 100%; margin-top: 18px; }
.players .field { width: 100%; }

/* ---------- the Locker: trophies, passport, styles ---------- */
.trophies { display: grid; gap: 6px; width: 100%; text-align: left; }
.trophy { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; background: var(--paper-2); border: 1px solid var(--menu-line); border-radius: 4px; padding: 10px 12px; opacity: .62; }
.trophy i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 17px var(--display); font-style: normal; background: rgba(20, 20, 22, 0.08); color: var(--muted-ink); }
.trophy b { display: block; font: 700 15px var(--display); }
.trophy span { display: block; font: italic 400 13px/1.35 var(--display); color: var(--muted-ink); }
.trophy em { display: block; font: 500 10.5px var(--mono); font-style: normal; color: var(--gold-ink); letter-spacing: .04em; margin-top: 2px; }
.trophy.got { background: var(--menu-card); opacity: 1; box-shadow: 0 10px 24px -20px rgba(20, 20, 22, 0.55); }
.trophy.got i { background: linear-gradient(135deg, #e0bf6a 0%, #c9a24a 45%, #a8842c 100%); color: #2a2008; box-shadow: inset 0 0 0 2px rgba(255, 240, 200, 0.55), 0 6px 14px -8px rgba(20, 20, 22, 0.5); }
.newtro { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.tro-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-3); color: var(--ink); border-radius: 999px; padding: 4px 12px 4px 5px; font: 600 12px var(--ui); }
.tro-chip i { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-2); color: #fff; display: grid; place-items: center; font: 700 11px var(--display); font-style: normal; }
.styles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.style { text-align: left; background: var(--menu-card); border: 1px solid var(--menu-line); border-radius: 10px; padding: 12px; box-shadow: 0 10px 24px -20px rgba(20, 20, 22, 0.55); font: inherit; color: var(--ink); }
.style.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 92, 154, 0.35); }
.style.locked { opacity: .55; cursor: default; }
.style b { display: block; font: 700 15px var(--display); margin-top: 8px; }
.style em { display: block; font: 500 10.5px var(--mono); font-style: normal; color: var(--muted-ink); margin-top: 2px; letter-spacing: .02em; }
.swatch { display: block; height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, white)); box-shadow: 0 0 10px var(--c); }
.swatch.rainbow { background: linear-gradient(90deg, #ff4f4f, #ffb13b, #ffe45a, #5fd35f, #4fa3ff, #b06cff); box-shadow: 0 0 10px #ffb13b; }
.style .swatch.font { display: grid; place-items: center; height: 26px; background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 700; box-shadow: none; border: 1px solid var(--menu-line); }
.locker-h { width: 100%; text-align: left; margin: 18px 0 8px; }
.locker-h:first-child { margin-top: 0; }
.passport { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.stamp-page { background: var(--menu-card); border: 1px solid var(--menu-line); border-radius: 6px; padding: 12px; min-height: 160px; position: relative; font-size: 13px; text-align: left; box-shadow: 0 10px 24px -20px rgba(20, 20, 22, 0.55); }
.sp-name { font: 700 15px var(--display); }
.sp-stamp { margin: 12px auto; width: 96px; text-align: center; border: 3px solid var(--velvet); color: var(--velvet); border-radius: 50%; padding: 22px 0; font: 700 13px var(--mono); transform: rotate(-12deg); opacity: .85; }
.sp-stamp small { font-size: 9px; }
.sp-empty { font: 900 30px var(--display); color: rgba(20, 20, 22, 0.15); margin: 18px 0; text-align: center; }
.sp-drinks { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-drinks span { font: 500 10px var(--mono); border: 1px dashed rgba(20, 20, 22, 0.25); padding: 2px 5px; border-radius: 4px; color: var(--muted); }
.sp-drinks span.on { border-style: solid; color: var(--ink); border-color: var(--ink); }
.sp-cit { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 3px; }
.sp-cit i { font: 700 9px var(--mono); color: var(--red); border: 2px solid var(--red); padding: 1px 3px; transform: rotate(-8deg); font-style: normal; }
.wall .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; background: #cfd8dc; padding: 12px; border-radius: 8px; box-shadow: inset 0 0 0 6px #b0bec5; width: 100%; margin: 0; }
.wall figure { margin: 0; background: #fff; padding: 6px; transform: rotate(-1deg); }
.wall figure:nth-child(2n) { transform: rotate(1.2deg); }
.wall img { width: 100%; display: block; }
.wall figcaption { font: 500 11px var(--mono); color: #555; margin-top: 4px; }
.career .stat-row { margin-top: 6px; }

/* ---------- settings ---------- */
.settings { width: min(96vw, 640px); display: grid; gap: 20px; padding-bottom: 34px; text-align: left; }
.set-group h3 { font: 600 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 9px; }
.set-row { display: flex; flex-wrap: wrap; gap: 8px; }
.set-row + .set-row { margin-top: 8px; }
.set-row .btn { min-height: 44px; }
.set-note { font-size: 12.5px; color: var(--menu-muted); margin-top: 8px; max-width: 62ch; line-height: 1.45; }
.settings .field { width: 100%; margin: 0 0 8px; }
#dev-all { position: fixed; top: calc(6px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 50; border: 1px dashed var(--red); background: #fff4f2; color: var(--red); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
#dev-all.on { background: var(--red); color: #fff; border-style: solid; }
.screen.settings-screen { padding-top: calc(36px + var(--safe-t)); }
.consent { width: 100%; background: var(--menu-card); border: 1px solid var(--menu-line); border-radius: 10px; box-shadow: 0 10px 24px -20px rgba(20, 20, 22, 0.55); padding: 14px 16px; margin: 0 0 12px; text-align: left; }
.consent h3 { font: 700 15px var(--display); margin: 8px 0 4px; color: var(--velvet); } .consent h3:first-child { margin-top: 0; }
.consent ul { margin: 0 0 6px; padding-left: 18px; } .consent li, .consent p { font: 400 13.5px/1.45 var(--ui); color: var(--ink-2); margin: 3px 0; }
.consent .code { font: 600 18px var(--mono); letter-spacing: .06em; background: var(--paper-2); border-radius: 8px; padding: 8px 10px; text-align: center; user-select: all; }
.study .check { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.35 var(--ui); margin: 10px 0; text-align: left; width: 100%; } .study .check input { width: 22px; height: 22px; flex: none; accent-color: var(--velvet); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; width: 100%; }
.tile { text-align: left; background: var(--menu-card); border: 1px solid var(--menu-line); border-radius: 10px; box-shadow: 0 10px 24px -20px rgba(20, 20, 22, 0.55); padding: 12px 13px 11px; display: flex; flex-direction: column; gap: 3px; color: var(--ink); font: inherit; }
.tile b { font: 700 17px var(--display); } .tile span { font: 500 12px var(--ui); color: var(--menu-muted); }
.tile.wide { grid-column: 1 / -1; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 16px 0 4px; font: 400 13px var(--mono); color: var(--menu-muted); }
.stats b { color: var(--ink); }

/* ---------- the splash: play first ---------- */
.screen.splash-screen { background: radial-gradient(ellipse at 50% -10%, #ffffff 0%, var(--menu-bg) 55%, #f2efe7 100%); }
.splash { width: min(360px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.logo { position: relative; width: 120px; height: 120px; margin: 10px auto 0; }
.logo .one { display: block; font: 900 118px/120px var(--display); color: var(--velvet); }
.logo .arc { position: absolute; left: 50px; top: 8px; width: 70px; }
.logo .arc path { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 3 9; }
.loading .logo { width: 90px; height: 100px; }
.loading .logo .one { font-size: 96px; line-height: 100px; }
.splash .logo { width: 96px; height: 96px; margin-bottom: 6px; }
.splash .logo .one { font-size: 94px; line-height: 96px; }
.splash .logo .arc { left: 40px; top: 4px; width: 58px; }
.splash .eyebrow { margin-top: 6px; }
.splash h1.wordmark { margin: 4px 0 0; font-size: clamp(40px, 12vw, 64px); }
.splash .tagline { margin: 10px 0 22px; }
.splash .stack .btn.play-cta { width: 100%; }
@media (max-height: 700px) { .splash .logo { display: none; } }

/* ---------- the level card before a visit ---------- */
.screen.spot-screen { background: radial-gradient(ellipse at 50% -10%, #ffffff 0%, var(--menu-bg) 55%, #f2efe7 100%); }
.lvcard { position: relative; background: var(--menu-card); border: 1px solid var(--menu-line); padding: 26px 22px 22px; width: min(92vw, 400px); box-shadow: var(--shadow), 0 0 0 1px rgba(20, 20, 22, 0.04); border-radius: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; animation: slideUp .4s cubic-bezier(.2, .9, .2, 1); }
.lvcard .sheet-x { position: absolute; right: 10px; top: 10px; }
.lvcard .eyebrow { padding: 0 36px; }
.lvcard .wordmark.small { margin-top: 6px; text-wrap: balance; }
.lv-pips { display: flex; gap: 6px; margin: 12px 0 2px; } .lv-pips i { width: 26px; height: 6px; border-radius: 3px; background: rgba(20, 20, 22, 0.12); } .lv-pips i.done { background: var(--gold); } .lv-pips i.on { background: var(--velvet); }
.lvcard .tagline { margin: 10px 0 12px; font-size: 16px; }
.lvcard .chips { margin-bottom: 12px; }
.lvcard .drinks { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; }
.lv-best { font: 500 12px var(--mono); color: var(--muted-ink); margin: 0 0 12px; letter-spacing: .04em; }
.lvcard .stack { width: 100%; }

/* ---------- the report: the aim report as a receipt over the place, one lead action ---------- */
.screen.report-screen { padding-bottom: calc(24px + var(--safe-b)); }
.receipt-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 420px; animation: slideUp .55s cubic-bezier(.2, .9, .2, 1); }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.r-stars { text-align: center; font-size: 30px; letter-spacing: .2em; color: var(--gold-3); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); display: flex; gap: 4px; }
.r-stars i { font-style: normal; color: rgba(245, 248, 252, 0.25); }
.r-stars i.on { color: var(--gold-3); animation: starpop .45s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes starpop { from { transform: scale(0) rotate(-40deg); } }
.r-line { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 5vw, 28px); line-height: 1.1; color: var(--paper); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.r-line small { display: block; font: italic 500 14px var(--display); color: rgba(245, 248, 252, 0.85); margin-top: 3px; }
.rmod { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-3); }
.receipt { width: min(94vw, 400px); display: block; box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.04); animation: printin .7s ease-out; transform-origin: top; }
@keyframes printin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.evidence { width: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.evidence .eyebrow { color: var(--gold-3); }
.evcard { width: min(94vw, 400px); border-radius: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); }
.report .evidence .btn { color: var(--paper); border-color: rgba(245, 248, 252, 0.45); background: rgba(255, 255, 255, 0.06); }
.receipt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(94vw, 400px); margin-top: 4px; }
.receipt-actions .btn.lead, .receipt-actions .primary { grid-column: 1 / -1; padding: 14px 20px; font-size: 16px; }
.receipt-actions .btn.alt { color: var(--paper); }
.receipt-more, .report .link { pointer-events: auto; margin-top: 6px; background: none; border: 0; color: rgba(245, 248, 252, 0.82); font: 600 13px var(--ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.report .newtro { margin: 0; }
@media (max-width: 520px) { .receipt-actions .btn { padding: 10px 8px; font-size: 13px; letter-spacing: 0; line-height: 1.2; } .receipt-actions .btn.lead { padding: 14px 20px; font-size: 15px; letter-spacing: .02em; } }
.pointsTotal { font: 500 13px var(--ui); color: var(--menu-muted); }
.pointsTotal b { font: 700 18px var(--display); color: var(--ink); }
.pointsTotal span { color: var(--red); font-size: 12px; }

/* ---------- contests: pass the phone (dark velvet plates) ---------- */
.pass { text-align: center; padding-top: 8vh; width: min(92vw, 420px); }
.pass .eyebrow { color: var(--gold-3); }
.pass .lede, .pass .dim { color: rgba(245, 248, 252, 0.82); margin-left: auto; margin-right: auto; }
.passname, .pass h2 { font: 700 clamp(34px, 9vw, 46px)/1.05 var(--display); color: var(--paper); margin: 6px 0 14px; }
.cscore { font: 700 clamp(40px, 12vw, 56px)/1 var(--display); color: var(--gold-3); margin: 6px 0 12px; }
.pass .cta { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.pass .ghost { border-color: rgba(245, 248, 252, 0.45); color: var(--paper); background: rgba(255, 255, 255, 0.05); }
.pass .link { color: rgba(245, 248, 252, 0.8); }
.podium { list-style: none; padding: 0; margin: 14px 0; text-align: left; }
.podium li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(245, 248, 252, 0.12); border-radius: 4px; padding: 10px 14px; margin: 6px 0; font: 700 16px var(--display); }
.podium li.win { background: rgba(255, 169, 201, 0.2); border-color: var(--gold-3); }
.podium .md { font-size: 24px; }
.podium .sc { font: 600 13px var(--mono); color: var(--gold-3); }

/* ---------- toast + pause, in the house style ---------- */
.toast { background: var(--ink); color: var(--paper); font: 500 13px/1.35 var(--ui); padding: 10px 16px; border-radius: 999px; max-width: min(92vw, 520px); }
#pause { background: rgba(20, 20, 22, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#pause .panel { background: var(--menu-bg); border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px 22px; width: min(92vw, 360px); box-shadow: var(--shadow); text-align: center; }
#pause .panel h2 { font-size: 30px; }
#pause .panel p { font: italic 500 15px var(--display); color: var(--ink-2); margin: 8px 0 14px; }
#pause .panel .btn { width: 100%; margin-top: 8px; }

/* ---------- pointer events: the map screen switches them off and every control opts back in ---------- */
.map3d-screen :is(.topbar > *, .estate-toggle, .btn.play-cta, .em-card, .world-list, .tabbar, #mapdrag) { pointer-events: auto; }

/* legacy: the flat places list (showPlaces / showPlace, no longer on any path) */
.place, .visit { display: block; width: 100%; text-align: left; background: var(--menu-card); border: 1px solid var(--menu-line); border-radius: 6px; padding: 14px 16px; margin: 10px 0; color: var(--ink); }
.place.locked, .visit.locked { opacity: .5; cursor: default; }
.pn, .vn { font: 700 18px var(--display); } .pw, .vb { color: var(--ink-2); font: italic 400 14px var(--display); margin: 3px 0; } .ps, .vs { font: 500 12px var(--mono); color: var(--gold-ink); } .ps .dim { color: rgba(20, 20, 22, 0.2); } .drink { font: 500 12px var(--mono); color: var(--muted-ink); margin-left: 6px; }

@media (prefers-reduced-motion: reduce) {
  .pane, .em-card.in, .ov-bubble.in, .em-loading span, .receipt-wrap, .lvcard, .receipt, .r-stars i.on { animation: none; }
  .tab-ic, .tab svg, .notice, .ov-label { transition: none; } .tab.on svg, .tab .badge { animation: none; }
}

/* play first: the report's actions ride the bottom of the screen, so NEXT is always one tap away however tall the receipt */
.receipt-actions { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; padding: 10px; margin-left: auto; margin-right: auto; border-radius: 22px; background: rgba(20, 22, 20, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); }

/* the Daily tab's explainer, above Play */
.daily-how { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(47, 91, 234, 0.08); border: 1px solid rgba(47, 91, 234, 0.2); color: var(--ink-2); font: 500 14px/1.45 var(--ui); text-wrap: pretty; }
.daily-how b { color: var(--ink); }

/* the world card's places, and the level card's visit and place navigation */
.em-places { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 34vh; overflow-y: auto; }
.em-place { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--menu-line); background: var(--paper); color: var(--ink); font: 600 14px var(--ui); text-align: left; cursor: pointer; pointer-events: auto; }
.em-place b { font: 700 12px var(--mono); color: var(--gold-ink); white-space: nowrap; }
.em-place:hover { border-color: var(--velvet); }
.em-place.locked { opacity: .55; cursor: default; }
.lv-pips .lv-pip { width: 34px; height: 28px; border-radius: 8px; border: 1px solid var(--menu-line); background: var(--paper-2); color: var(--muted-ink); font: 700 12px var(--ui); cursor: pointer; padding: 0; }
.lv-pips .lv-pip.done { background: rgba(255, 92, 154, 0.18); color: var(--gold-ink); border-color: rgba(255, 92, 154, 0.4); }
.lv-pips .lv-pip.on { background: var(--velvet); color: #fff; border-color: var(--velvet); }
.lv-pips .lv-pip.locked { opacity: .45; cursor: default; }
.lv-nav { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 2px; }
.lv-nav .btn.small { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the online daily board */
.ob-head { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font: 800 13px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ob-head span { font: 700 11px var(--mono); padding: 2px 8px; border-radius: 99px; background: var(--velvet); color: #fff; }

/* the Patron's Pass and the season lock (from Handle With Cannon) */
.pass-card .perks { list-style: none; margin: 14px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pass-card .perks li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--menu-line); }
.pass-card .perks b { font: 700 14px var(--ui); color: var(--ink); }
.pass-card .perks span { font: 400 13px/1.35 var(--ui); color: var(--menu-muted); }
.pass-card .price-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 4px 0 12px; }
.pass-card .price { font: 800 28px var(--display); color: var(--gold-2); }
.pass-card .per { font: 600 12px var(--mono); color: var(--menu-muted); }
.pass-card .btn.play-cta[disabled] { opacity: .7; }
.em-opens { margin-top: 10px; font: 700 12px var(--mono); letter-spacing: .04em; color: var(--gold-ink); }
.em-early { margin-top: 8px; gap: 6px; }
.em-early .btn { pointer-events: auto; }
.em-patron { margin-top: 8px; display: inline-block; padding: 3px 10px; border-radius: 99px; background: linear-gradient(#ffd1e3, #ff9cc3); color: #7a0f3d; font: 800 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- the arcade layer (src/n1/arcade.js): a loud score, call-outs, and the live feed ---------- */
#hud.arcade #pts { top: calc(30px + var(--safe-t)); font: 900 34px/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: #fff; background: none; padding: 0; text-shadow: 0 2px 0 #1a1204, 0 0 16px rgba(255,200,40,.6), 0 0 3px #000; display: flex; align-items: center; gap: 8px; }
#hud.arcade #pts b { font: 900 15px/1 var(--ui); color: #1a1204; background: var(--hud-gold); padding: 4px 7px; border-radius: 8px; transform: rotate(-6deg); text-shadow: none; margin: 0; box-shadow: 0 2px 0 rgba(0,0,0,.45); }
#hud.arcade #pts b.m3 { background: linear-gradient(#ffb02e, #ff4a2a); color: #fff; animation: hotbadge .5s infinite alternate; }
@keyframes hotbadge { to { transform: rotate(-6deg) scale(1.14); box-shadow: 0 0 14px rgba(255,110,40,.9); } }
#hud.arcade #pts.gain { animation: ptsgain .22s ease-out; }
@keyframes ptsgain { 40% { transform: translateX(-50%) scale(1.09); color: #ffe27a; } }
#combo { position: absolute; top: calc(70px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: 132px; height: 8px; border-radius: 5px; background: rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.75); }
#combo i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #ffe46a, #ffb300); transition: width .2s linear; }
#combo b { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); font: 800 10px var(--mono); color: #fff; text-shadow: 0 1px 2px #000; }
#combo.m2 i { background: linear-gradient(90deg, #ffb300, #ff7a2a); }
#combo.m3 i { background: linear-gradient(90deg, #ff7a2a, #ff3a5a); box-shadow: 0 0 10px rgba(255,90,40,.9); }
#hud.arcade #acc { top: calc(84px + var(--safe-t)); font: 800 12px var(--mono); background: rgba(15,18,24,.45); padding: 2px 9px; border-radius: 99px; letter-spacing: 0; }
#hud.arcade #acc::after { content: ' ACC'; opacity: .65; font-size: 9px; }
#hud.arcade ~ #toast { top: calc(112px + var(--safe-t)); }
#hud.arcade .pop:not(.penalty) { font: 900 22px/1 var(--ui); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 0 #14100a, 0 0 4px #000, 0 0 10px rgba(0,0,0,.5); animation: none; opacity: 1; transform: translate(-50%, 0) rotate(var(--tilt, 0deg)); transition: left .12s linear, top .12s linear; }
#hud.arcade .pop.tick { animation: arctick .16s ease-out; }
#hud.arcade .pop.fly { animation: arcfly .65s ease-in forwards; }
@keyframes arctick { 0% { transform: translate(-50%, 0) scale(1.32) rotate(var(--tilt, 0deg)); } 100% { transform: translate(-50%, 0) scale(1) rotate(var(--tilt, 0deg)); } }
@keyframes arcfly { 0% { opacity: 1; transform: translate(-50%, 0) scale(1.15) rotate(var(--tilt, 0deg)); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(.8) rotate(var(--tilt, 0deg)); } }
#hud.arcade .pop.ideal { color: #ffd84a; font-size: 27px; text-shadow: 0 2px 0 #3a2400, 0 0 4px #000, 0 0 14px rgba(255,190,40,.8); }
#hud.arcade .pop.big { font-size: 36px; }
@keyframes arcpop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.4) rotate(var(--tilt, 0deg)); } 14% { opacity: 1; transform: translate(-50%, -4px) scale(1.28) rotate(var(--tilt, 0deg)); } 28% { transform: translate(-50%, -8px) scale(1) rotate(var(--tilt, 0deg)); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -54px) scale(.92) rotate(var(--tilt, 0deg)); } }
#callout { position: absolute; left: 0; right: 0; top: 27%; text-align: center; font: italic 900 40px/1 var(--ui); letter-spacing: .02em; text-transform: uppercase; color: var(--hud-gold); text-shadow: 0 3px 0 #2a1a00, 0 0 5px #000, 0 0 22px rgba(255,190,40,.75); opacity: 0; padding: 0 12px; }
#callout.go { animation: callout 1.15s cubic-bezier(.2,.9,.3,1) forwards; }
#callout.hot { color: #ff7a2a; text-shadow: 0 3px 0 #3a0a00, 0 0 5px #000, 0 0 26px rgba(255,80,30,.9); }
#callout.good { color: #8df08d; text-shadow: 0 3px 0 #0a2a10, 0 0 5px #000, 0 0 22px rgba(80,230,110,.7); }
#callout.bonus { color: #6fe3ff; text-shadow: 0 3px 0 #06222c, 0 0 5px #000, 0 0 22px rgba(80,210,255,.75); }
@keyframes callout { 0% { opacity: 0; transform: scale(.3) rotate(-4deg); } 16% { opacity: 1; transform: scale(1.18) rotate(-4deg); } 28% { transform: scale(1) rotate(-4deg); } 72% { opacity: 1; transform: scale(1.02) rotate(-4deg); } 100% { opacity: 0; transform: scale(1.06) translateY(-26px) rotate(-4deg); } }
#feed { position: absolute; right: 0; bottom: calc(100px + var(--safe-b)); max-width: 68%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; overflow: hidden; padding-left: 20px; }
.fl { display: inline-flex; align-items: center; gap: 6px; max-height: 30px; font: 700 11.5px/1.2 var(--mono); color: #fff; white-space: nowrap; background: rgba(12,14,22,.74); border-right: 3px solid rgba(255,255,255,.6); border-radius: 9px 0 0 9px; padding: 5px 9px 5px 9px; animation: flin .3s cubic-bezier(.2,.9,.3,1); transition: opacity .4s, transform .4s, max-height .4s, padding .4s, margin .4s; }
.fl .ic { font-size: 12px; opacity: .95; }
.fl b { color: var(--hud-gold); font-weight: 800; }
.fl i { font-style: normal; font-weight: 800; color: #1a1204; background: var(--hud-gold); border-radius: 5px; padding: 0 4px; margin-left: 2px; }
.fl.out { opacity: 0; transform: translateX(40%); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -4px; }
.fl.good { border-right-color: #7ee07e; } .fl.good .ic { color: #7ee07e; }
.fl.gold { border-right-color: var(--hud-gold); color: #ffe9a0; } .fl.gold .ic { color: var(--hud-gold); }
.fl.hot { border-right-color: #ff5a2a; background: linear-gradient(90deg, rgba(120,30,10,.85), rgba(200,70,20,.9)); }
.fl.warn { border-right-color: #ffb02e; color: #ffdc9a; }
.fl.bad { border-right-color: #ff4a3a; background: rgba(90,14,10,.85); color: #ffd0c8; }
.fl.bonus { border-right-color: #6fe3ff; color: #c8f4ff; } .fl.bonus .ic { color: #6fe3ff; }
.fl.done { border-right-color: #7ee07e; background: rgba(24,90,44,.88); }
.fl.live .ic { color: #ff3a3a; animation: liveblink .8s infinite alternate; }
@keyframes liveblink { to { opacity: .25; } }
@keyframes flin { from { opacity: 0; transform: translateX(105%); max-height: 0; padding-top: 0; padding-bottom: 0; } 60% { max-height: 30px; } }
#aimhint { position: absolute; font-size: 30px; line-height: 1; color: var(--hud-gold); text-shadow: 0 2px 0 #2a1a00, 0 0 6px #000, 0 0 16px rgba(255,190,40,.8); animation: aimhint .5s infinite alternate; }
@keyframes aimhint { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #hud.arcade .pop:not(.penalty), #callout.go, .fl, #hud.arcade #pts.gain, #aimhint { animation: none; } #callout.go { opacity: 1; transition: opacity 1s 1s; } }
/* the mark is the app icon now (tools/make_icons.py): the old "1" with its dotted arc is gone */
.logo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22%; box-shadow: 0 10px 24px -12px rgba(21, 26, 51, .55); }
.loading .logo { width: 96px; height: 96px; }