/* GameSpotter — front-desk tool for gaming cafés.
   Layout: phone-first app shell. Top bar (café + sync), one screen at a time, bottom tab bar with a centre Add button.
   The one bold element is the Floor: a board of stations with live timers. Everything else stays calm. */
@font-face { font-family: "GS Indic"; font-weight: 400 500; font-display: swap; src: url(fonts/noto-deva-400.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "GS Indic"; font-weight: 600 900; font-display: swap; src: url(fonts/noto-deva-700.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "GS Indic"; font-weight: 400 500; font-display: swap; src: url(fonts/noto-telu-400.woff2) format("woff2"); unicode-range: U+0C00-0C7F, U+200C-200D, U+25CC; }
@font-face { font-family: "GS Indic"; font-weight: 600 900; font-display: swap; src: url(fonts/noto-telu-700.woff2) format("woff2"); unicode-range: U+0C00-0C7F, U+200C-200D, U+25CC; }
@font-face { font-family: "Exo 2"; font-weight: 500; font-display: swap; src: url(fonts/exo2-500.woff2) format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 600; font-display: swap; src: url(fonts/exo2-600.woff2) format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 700; font-display: swap; src: url(fonts/exo2-700.woff2) format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 800; font-display: swap; src: url(fonts/exo2-800.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 700; font-display: swap; src: url(fonts/orbitron-700.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 800; font-display: swap; src: url(fonts/orbitron-800.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 400; font-display: swap; src: url(fonts/sora-400.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url(fonts/outfit-500.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url(fonts/outfit-600.woff2) format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url(fonts/outfit-700.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 500; font-display: swap; src: url(fonts/bricolage-grotesque-500.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url(fonts/bricolage-grotesque-600.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url(fonts/bricolage-grotesque-700.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-display: swap; src: url(fonts/fraunces-500.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url(fonts/fraunces-600.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 700; font-display: swap; src: url(fonts/fraunces-700.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 500; font-display: swap; src: url(fonts/sora-500.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 600; font-display: swap; src: url(fonts/sora-600.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-display: swap; src: url(fonts/sora-700.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url(fonts/jakarta-400.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url(fonts/jakarta-500.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url(fonts/jakarta-600.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url(fonts/jakarta-700.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url(fonts/jakarta-800.woff2) format("woff2"); }

/* Themes: a full palette per theme (paper tint, brand, highlight). White by default; dark is opt-in (More → Appearance). */
:root {
  --live: #E5294F; --live-soft: #FDE7EC; --live-ink: #FFFFFF;
  --in: #0A8A5C; --in-soft: #DFF5EC; --out: #B95E0A; --out-soft: #FBEEDD; --bad: #C8283E;
  --f-display: "Outfit", "GS Indic", "Plus Jakarta Sans", Roboto, system-ui, sans-serif;
  --f-num: "Outfit", "GS Indic", "Plus Jakarta Sans", Roboto, system-ui, sans-serif; /* timers and money: always even-width digits */
  --f-body: "Plus Jakarta Sans", "GS Indic", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-s: 10px; --r-m: 16px; --r-l: 22px;
  --tab-h: 64px;
  --surface: #FFFFFF; --ink: #111216; --ink-2: #545767; --ink-3: #8D90A2;
  --shadow: 0 1px 2px rgba(17, 18, 22, .04), 0 8px 24px -14px rgba(17, 18, 22, .18);
  --brand-ink: #FFFFFF; color-scheme: light;
  --paper: #F6F6F8; --raised: #F0F1F4; --line: #E6E7EC; --brand: #16171D; --brand-soft: #F4ECD9; --accent: #A87B22;
}
:root[data-accent="sapphire"] { --paper: #F3F6FC; --raised: #EAEFF9; --line: #DEE5F2; --brand: #1E3FAE; --brand-soft: #E3EAFB; --accent: #1E3FAE; }
:root[data-accent="emerald"] { --paper: #F2F7F4; --raised: #E8F1EC; --line: #DBE8E0; --brand: #0A6A4D; --brand-soft: #DDF0E6; --accent: #0A6A4D; }
:root[data-accent="rose"] { --paper: #FBF6F6; --raised: #F5ECEC; --line: #EEDFE0; --brand: #A84E62; --brand-soft: #F7E4E8; --accent: #A0684A; }
:root[data-accent="amethyst"] { --paper: #F6F4FC; --raised: #EEEAFA; --line: #E3DDF4; --brand: #5A3BC0; --brand-soft: #ECE6FC; --accent: #5A3BC0; }
:root[data-accent="ocean"] { --paper: #F1F7F8; --raised: #E7F1F3; --line: #D9E8EB; --brand: #0C6F7A; --brand-soft: #DBF0F2; --accent: #0C6F7A; }
:root[data-accent="burgundy"] { --paper: #FAF5F6; --raised: #F3EAEC; --line: #EBDCE0; --brand: #7A1D38; --brand-soft: #F4E1E6; --accent: #9A7433; }
:root[data-accent="platinum"] { --paper: #F5F6F8; --raised: #EDEFF2; --line: #E1E4E9; --brand: #2F3644; --brand-soft: #E6E9EF; --accent: #56637A; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] { --paper: #0A0A0D; --surface: #16171C; --raised: #1F2027; --ink: #F3F3F6; --ink-2: #A8AAB9; --ink-3: #6F7283; --line: #2A2B33;
    --live: #FF5C7F; --live-soft: #3A1622; --live-ink: #1A0710;
    --in: #3AD69B; --in-soft: #10322A; --out: #F5A350; --out-soft: #382712; --bad: #FF6B7E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7); color-scheme: dark;
    --brand: #E3C47F; --brand-ink: #111216; --brand-soft: #2D2616; --accent: #E3C47F; }
  :root[data-theme="system"][data-accent="sapphire"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #8EA6FF; --brand-ink: #111216; --brand-soft: #1A2347; --accent: #8EA6FF; }
  :root[data-theme="system"][data-accent="emerald"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #43D3A2; --brand-ink: #111216; --brand-soft: #0E2E24; --accent: #43D3A2; }
  :root[data-theme="system"][data-accent="rose"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #F2A7B6; --brand-ink: #111216; --brand-soft: #3A1E25; --accent: #E9B99A; }
  :root[data-theme="system"][data-accent="amethyst"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #B4A0FF; --brand-ink: #111216; --brand-soft: #251C48; --accent: #B4A0FF; }
  :root[data-theme="system"][data-accent="ocean"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #4FD1DB; --brand-ink: #111216; --brand-soft: #0E2F33; --accent: #4FD1DB; }
  :root[data-theme="system"][data-accent="burgundy"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #F08AA6; --brand-ink: #111216; --brand-soft: #3A1724; --accent: #E0BE78; }
  :root[data-theme="system"][data-accent="platinum"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #C9D1DE; --brand-ink: #111216; --brand-soft: #232833; --accent: #C9D1DE; }
}
:root[data-theme="dark"] { --paper: #0A0A0D; --surface: #16171C; --raised: #1F2027; --ink: #F3F3F6; --ink-2: #A8AAB9; --ink-3: #6F7283; --line: #2A2B33;
    --live: #FF5C7F; --live-soft: #3A1622; --live-ink: #1A0710;
    --in: #3AD69B; --in-soft: #10322A; --out: #F5A350; --out-soft: #382712; --bad: #FF6B7E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7); color-scheme: dark;
    --brand: #E3C47F; --brand-ink: #111216; --brand-soft: #2D2616; --accent: #E3C47F; }
:root[data-theme="dark"][data-accent="sapphire"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #8EA6FF; --brand-ink: #111216; --brand-soft: #1A2347; --accent: #8EA6FF; }
:root[data-theme="dark"][data-accent="emerald"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #43D3A2; --brand-ink: #111216; --brand-soft: #0E2E24; --accent: #43D3A2; }
:root[data-theme="dark"][data-accent="rose"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #F2A7B6; --brand-ink: #111216; --brand-soft: #3A1E25; --accent: #E9B99A; }
:root[data-theme="dark"][data-accent="amethyst"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #B4A0FF; --brand-ink: #111216; --brand-soft: #251C48; --accent: #B4A0FF; }
:root[data-theme="dark"][data-accent="ocean"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #4FD1DB; --brand-ink: #111216; --brand-soft: #0E2F33; --accent: #4FD1DB; }
:root[data-theme="dark"][data-accent="burgundy"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #F08AA6; --brand-ink: #111216; --brand-soft: #3A1724; --accent: #E0BE78; }
:root[data-theme="dark"][data-accent="platinum"] { --paper: #0A0A0D; --raised: #1F2027; --line: #2A2B33; --brand: #C9D1DE; --brand-ink: #111216; --brand-soft: #232833; --accent: #C9D1DE; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
input, select, textarea { font: inherit; color: var(--ink); }
:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; }
.icon-btn { border: 0; background: transparent; width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink-2); flex: none; }
.icon-btn:active { background: var(--raised); }

/* ---------- Shell ---------- */
.shell { min-height: 100vh; padding-bottom: calc(var(--tab-h) + 24px); }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); }
.cafe-btn { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 6px 4px 0; cursor: pointer; min-width: 0; font-weight: 700; font-size: 15px; }
.cafe-btn > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cafe-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font: 700 13px var(--f-display); flex: none; letter-spacing: .02em; }
.sync { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--in); background: var(--in-soft); padding: 5px 10px; border-radius: 999px; flex: none; }
.sync.wait { color: var(--out); background: var(--out-soft); }
.sync.off { color: var(--bad); background: var(--live-soft); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding: 0 6px env(safe-area-inset-bottom, 0px); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: var(--surface); border-top: 1px solid var(--line); }
.tab { position: relative; border: 0; background: none; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.tab[aria-current="page"] { color: var(--accent); }
.tab.add span { width: 52px; height: 52px; border-radius: 18px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; box-shadow: 0 8px 20px -8px var(--brand); transform: translateY(-10px); }
.badge-dot { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--live); color: var(--live-ink); font: 700 11px/18px var(--f-display); font-style: normal; }

.view { padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto; }
.view-head h1, .subhead h1 { font: 700 25px/1.15 var(--f-display); letter-spacing: -.02em; }
.view-head p, .subhead p { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.subhead { display: flex; align-items: center; gap: 6px; margin-left: -8px; }
.lede { color: var(--ink-2); max-width: 60ch; }
.hint { color: var(--ink-3); font-size: 12.5px; line-height: 1.45; }
.hint.center, .center { text-align: center; }
.err { color: var(--bad); font-size: 13.5px; font-weight: 600; }
.note { background: var(--brand-soft); border-radius: var(--r-s); padding: 10px 12px; font-size: 13.5px; }

/* ---------- Floor ---------- */
.floor-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 4px; }
.floor-head h1 { font: 700 28px/1.1 var(--f-display); }
.floor-head p { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; }
.today-take { text-align: right; }
.today-take b { display: block; font: 700 22px/1.1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--in); }
.today-take span { font-size: 12px; color: var(--ink-3); }
.stations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .stations { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.station { position: relative; min-height: 132px; border-radius: var(--r-l); padding: 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.station.free { border: 1.5px dashed var(--line); background: transparent; justify-content: space-between; }
.station.free .st-free { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 700; font-size: 14px; }
.station.free:active { background: var(--raised); }
.station.busy { border: 0; background: var(--surface); box-shadow: var(--shadow); }
.station.busy::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--live); }
.st-label { font: 600 13px var(--f-display); color: var(--ink-2); display: flex; align-items: center; gap: 7px; letter-spacing: .02em; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.st-clock { font: 600 30px/1.05 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 4px; }
.st-who { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-meta { font-size: 12.5px; color: var(--ink-2); }
.st-bar { margin-top: auto; padding-top: 8px; display: block; }
.st-bar, .st-bar i { height: 4px; border-radius: 2px; }
.st-bar { background: linear-gradient(var(--live-soft), var(--live-soft)) 0 8px / 100% 4px no-repeat; height: 12px; }
.st-bar i { display: block; background: var(--live); transition: width 1s linear; }
.floor-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 15px; cursor: pointer; text-align: center; }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn.primary.live { background: var(--live); color: var(--live-ink); }
.btn.primary.cost { background: var(--out); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger, .btn.ghost.danger { color: var(--bad); }
.btn.small { min-height: 38px; padding: 0 12px; font-size: 13.5px; border-radius: 11px; }
.btn.google { background: var(--surface); color: var(--ink); border: 1px solid var(--line); min-height: 54px; font-size: 16px; box-shadow: var(--shadow); width: 100%; }
.btn.google .g { display: grid; place-items: center; }
.btn.apple { background: #000; color: #fff; border: 1px solid #000; min-height: 54px; font-size: 16px; width: 100%; }
.btn.apple .g { display: grid; place-items: center; }
.block-btn { width: 100%; }
.link { border: 0; background: none; color: var(--accent); font-weight: 700; padding: 12px 0 2px; cursor: pointer; text-align: left; }

/* ---------- Lists & rows ---------- */
.list { background: var(--surface); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.list.flush { box-shadow: none; background: transparent; border-radius: 0; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; border-top: 1px solid var(--line); min-height: 60px; }
.list > .row:first-child, .list > .dated:first-child .row, .list > .day:first-child .row { border-top: 0; }
.list.flush .row { padding-left: 0; padding-right: 0; }
.row:active { background: var(--raised); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main small { color: var(--ink-2); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row-amt { font: 600 15.5px var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-amt.in { color: var(--in); } .row-amt.out { color: var(--out); }
.row-clock { font: 700 18px var(--f-num); font-variant-numeric: tabular-nums; color: var(--live); }
.row.nav .nav-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--raised); display: grid; place-items: center; color: var(--brand); flex: none; }
.row.nav.danger b, .row.nav.danger .nav-ic { color: var(--bad); }
.row svg:last-child { color: var(--ink-3); flex: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font: 700 13px var(--f-display); flex: none; }
.dated { border-top: 1px solid var(--line); }
.list > .dated:first-child { border-top: 0; }
.dated .row { border-top: 0; padding-top: 4px; }
.date-tag { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-3); padding-top: 10px; }
.badge { font-size: 11.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 3px 8px; border-radius: 999px; }
.day { display: flex; flex-direction: column; gap: 8px; }
.day-head { display: flex; justify-content: space-between; font: 600 13px var(--f-body); color: var(--ink-2); padding: 0 4px; }
.day-head span:last-child { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.block h2, .card-head h2, .card h2 { font: 600 16.5px var(--f-display); letter-spacing: -.01em; }
.block { display: flex; flex-direction: column; gap: 10px; }
.empty { text-align: center; padding: 32px 20px; color: var(--ink-2); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.empty-t { font: 700 18px var(--f-display); color: var(--ink); }

/* ---------- Chips & segmented ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { border: 1px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; min-height: 40px; justify-content: center; }
.chip small { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] small { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.seg-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--raised); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: none; padding: 9px 10px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- Dashboard ---------- */
.kpi-hero { background: var(--ink); color: var(--paper); border-radius: var(--r-l); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi-hero.cost { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.k-label { font-size: 13px; font-weight: 600; opacity: .72; }
.k-big { font: 600 40px/1.05 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi-hero.cost .k-big { color: var(--out); }
.k-sub { font-size: 12.5px; opacity: .8; }
.k-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.k-card { position: relative; text-align: left; border: 0; border-radius: var(--r-m); padding: 12px; display: flex; flex-direction: column; gap: 1px; background: color-mix(in srgb, var(--paper) 10%, transparent); color: inherit; }
.kpi-hero.cost .k-card { background: var(--raised); }
button.k-card { cursor: pointer; }
.k-card span { font-size: 12.5px; font-weight: 600; opacity: .75; }
.k-card b { font: 700 21px var(--f-num); font-variant-numeric: tabular-nums; }
.k-card small { font-size: 11.5px; opacity: .65; }
.k-card svg { position: absolute; top: 12px; right: 10px; opacity: .7; }
.k-card.cost b { color: color-mix(in srgb, var(--out) 70%, var(--paper)); }
.k-card.pos b { color: color-mix(in srgb, var(--in) 75%, var(--paper)); }
.k-card.neg b { color: color-mix(in srgb, var(--live) 80%, var(--paper)); }
.trend { font-weight: 700; font-family: var(--f-display); }
.trend.up { color: var(--in); } .trend.down { color: var(--live); }
.kpi-hero .trend.up { color: color-mix(in srgb, var(--in) 70%, var(--paper)); }
.kpi-hero .trend.down { color: color-mix(in srgb, var(--live) 70%, var(--paper)); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-grid.three { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--surface); border-radius: var(--r-m); padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.stat span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.stat b { font: 700 22px/1.25 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat small { font-size: 11.5px; color: var(--ink-3); }
.card { background: var(--surface); border-radius: var(--r-l); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; border: 0; text-align: left; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-head span { font-size: 12px; color: var(--ink-3); text-align: right; }
.live-card { flex-direction: row; align-items: center; gap: 12px; cursor: pointer; background: var(--live-soft); box-shadow: none; }
.live-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.live-card small { color: var(--ink-2); font-size: 12.5px; }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--live); animation: pulse 2s infinite; flex: none; }
.link-card { flex-direction: row; align-items: center; cursor: pointer; }
.link-card > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.bar-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row b { font: 600 14.5px var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar small { font-size: 12px; color: var(--ink-3); }
.track { position: relative; height: 8px; border-radius: 4px; background: var(--raised); margin-top: 5px; }
.track.big { height: 12px; border-radius: 6px; }
.track i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.track i.c { background: var(--out); }
.track .budget { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 1px; transform: translateX(-1px); }
.recover { display: flex; flex-direction: column; gap: 4px; }
.recover .track i { background: var(--in); }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--ink-3); font: 10px var(--f-body); }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .bar { fill: color-mix(in srgb, var(--brand) 55%, var(--surface)); }
.chart .now { fill: var(--brand); }
.heat { display: grid; gap: 3px; align-items: center; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: var(--raised); display: block; }
.heat i.on { background: var(--brand); }
.heat .hy { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.heat .hx { font-size: 9.5px; color: var(--ink-3); text-align: left; white-space: nowrap; overflow: visible; }

/* ---------- Partners ---------- */
.partner-list { display: flex; flex-direction: column; gap: 12px; }
.partner header { display: flex; align-items: center; gap: 12px; }
.partner header > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.partner header small { color: var(--ink-3); font-size: 12px; }
.net { text-align: right; display: flex; flex-direction: column; }
.net b { font: 700 20px var(--f-num); font-variant-numeric: tabular-nums; }
.net b.pos { color: var(--in); } .net b.neg { color: var(--live); }
.net small { font-size: 11.5px; color: var(--ink-3); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.trio span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.trio b { font: 600 15px var(--f-num); font-variant-numeric: tabular-nums; }

/* ---------- Search ---------- */
.search-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 14px; padding: 0 12px; box-shadow: var(--shadow); color: var(--ink-3); }
.search { flex: 1; border: 0; background: transparent; min-height: 48px; outline: none; min-width: 0; }

/* ---------- Sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(10, 11, 25, 0); display: flex; align-items: flex-end; justify-content: center; transition: background .2s; }
.scrim.in { background: rgba(10, 11, 25, .48); }
.sheet { width: 100%; max-width: 640px; max-height: 92vh; background: var(--paper); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom, 0px); }
.scrim.in .sheet { transform: none; }
.sheet.tall { min-height: 70vh; }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 6px 18px; }
.sheet-head h2 { font: 700 20px var(--f-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body { overflow-y: auto; padding: 4px 18px 24px; overscroll-behavior: contain; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form h3 { font: 700 15px var(--f-display); margin-top: 4px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field input:not([type=checkbox]), .field select, .form > input, .custom-min input, .tier input, .inline-row input { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px; font-size: 16px; min-width: 0; }
.field input:focus, .custom-min input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.field input:disabled { opacity: .5; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 4px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.money { position: relative; display: flex; align-items: center; }
.money > span { position: absolute; left: 14px; font: 700 20px var(--f-display); color: var(--ink-3); pointer-events: none; }
.money input { width: 100%; min-height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px 0 34px; font: 700 24px var(--f-num); font-variant-numeric: tabular-nums; }
.money.small > span { font-size: 15px; left: 10px; }
.money.small input { min-height: 44px; font-size: 17px; padding-left: 24px; width: 104px; }
.suggest { display: flex; flex-direction: column; gap: 6px; margin-top: -8px; }
.suggest:empty { display: none; }
.suggest button { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 9px 12px; cursor: pointer; display: flex; flex-direction: column; }
.suggest span { font-size: 12.5px; color: var(--ink-2); }
.lines { display: flex; flex-direction: column; gap: 8px; }
.lines:empty { display: none; }
.line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; background: var(--surface); border-radius: 14px; padding: 8px 6px 8px 14px; box-shadow: var(--shadow); }
.line .ln { min-width: 0; display: flex; flex-direction: column; }
.line .ln span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line .ln small { font-size: 12px; color: var(--ink-2); }
.line .span { grid-column: 1 / -1; margin-top: -4px; }
.adder { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1.5px dashed var(--line); border-radius: 16px; }
.custom-min { display: flex; gap: 8px; align-items: center; }
.custom-min input { flex: 1; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 0; }
.total span { font-weight: 700; color: var(--ink-2); }
.total b { font: 700 30px var(--f-num); font-variant-numeric: tabular-nums; }
.played { display: flex; flex-direction: column; align-items: center; gap: 0; background: var(--live-soft); border-radius: var(--r-m); padding: 14px; text-align: center; }
.played span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.played b { font: 700 32px/1.15 var(--f-display); color: var(--live); }
.session-hero { text-align: center; display: flex; flex-direction: column; gap: 4px; padding: 6px 0 4px; }
.session-hero > p:first-child { font-weight: 700; color: var(--ink-2); }
.big-clock { font: 600 56px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--live); letter-spacing: -.01em; }
.station-tag { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--live); }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { display: flex; align-items: center; gap: 14px; text-align: left; border: 0; background: var(--surface); border-radius: var(--r-m); padding: 14px; cursor: pointer; box-shadow: var(--shadow); }
.choice > span:last-child { display: flex; flex-direction: column; }
.choice b { font: 700 17px var(--f-display); }
.choice small { color: var(--ink-2); font-size: 13px; }
.choice-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.choice.live .choice-ic { background: var(--live-soft); color: var(--live); }
.choice.cost .choice-ic { background: var(--out-soft); color: var(--out); }
.tiers { display: flex; flex-direction: column; gap: 8px; }
.tier { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 8px; align-items: center; }
.tier label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.tier input { min-height: 44px; padding: 0 10px; }
.inline-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.inline-row .money input { width: 130px; min-height: 42px; font-size: 16px; }
.inline-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.danger-zone h2 { color: var(--bad); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 80; margin: 0 auto; max-width: 480px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: .2s; }
.toast.in { transform: none; opacity: 1; pointer-events: auto; }
.toast button { border: 0; background: none; color: color-mix(in srgb, var(--brand) 60%, var(--paper)); font-weight: 800; cursor: pointer; }

/* ---------- Sign-in, welcome, splash ---------- */
.signin, .welcome { min-height: 100vh; padding: max(40px, env(safe-area-inset-top, 0px)) 24px 40px; display: flex; flex-direction: column; gap: 18px; justify-content: center; max-width: 480px; margin: 0 auto; }
.signin h1, .welcome h1 { font: 700 32px/1.08 var(--f-display); letter-spacing: -.03em; }
.signin-art { display: flex; flex-direction: column; gap: 22px; }
.mini-floor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-floor span { border: 1.5px dashed var(--line); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; }
.mini-floor span.on { border: 0; background: var(--surface); box-shadow: var(--shadow); border-left: 4px solid var(--live); }
.mini-floor small { font: 600 12px var(--f-display); color: var(--ink-2); }
.mini-floor b { font: 700 22px var(--f-num); font-variant-numeric: tabular-nums; }
.mini-floor span:not(.on) b { color: var(--ink-3); font-size: 15px; margin-top: 4px; }
.fine { font-size: 12.5px; color: var(--ink-3); text-align: center; }
.fine a { color: var(--brand); }
.splash { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--ink-2); }
.logo-mark svg { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.count-pill { min-width: 44px; height: 32px; padding: 0 8px; border-radius: 10px; background: var(--live-soft); color: var(--live); display: grid; place-items: center; font: 700 15px var(--f-display); flex: none; }
.note.warn { background: var(--out-soft); display: flex; flex-direction: column; gap: 6px; }
.link.center { text-align: center; align-self: center; }

/* ---------- BI dashboard ----------
   Categorical slots follow the reference palette (validated light and dark); color follows the game, never its rank. */
:root { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948; --s0: #8A8FAD;
  --q1: #cde2fb; --q2: #9ec5f4; --q3: #6da7ec; --q4: #3987e5; --q5: #256abf; --q6: #184f95; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s0: #6F7396;
  --q1: #104281; --q2: #184f95; --q3: #256abf; --q4: #3987e5; --q5: #6da7ec; --q6: #9ec5f4; } }
:root[data-theme="dark"] { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s0: #6F7396;
  --q1: #104281; --q2: #184f95; --q3: #256abf; --q4: #3987e5; --q5: #6da7ec; --q6: #9ec5f4; }
.s0 { --c: var(--s0); } .s1 { --c: var(--s1); } .s2 { --c: var(--s2); } .s3 { --c: var(--s3); } .s4 { --c: var(--s4); } .s5 { --c: var(--s5); } .s6 { --c: var(--s6); } .s7 { --c: var(--s7); } .s8 { --c: var(--s8); }
.bi { gap: 14px; }
.slicers { position: sticky; top: 56px; z-index: 5; margin: 0 -16px; padding: 6px 16px 8px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 8px; }
.slicer-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.slicer-row::-webkit-scrollbar { display: none; }
.slicer { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.slicer.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.slicer b { background: var(--brand); color: var(--brand-ink); border-radius: 8px; min-width: 18px; height: 18px; font-size: 11px; display: grid; place-items: center; padding: 0 5px; }
.slicer .caret { font-size: 10px; opacity: .6; }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; border: 0; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 5px 10px; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.link.small { padding: 4px 6px; font-size: 13px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { position: relative; background: var(--surface); border: 0; border-radius: var(--r-m); box-shadow: var(--shadow); padding: 12px 12px 8px; display: flex; flex-direction: column; text-align: left; min-width: 0; overflow: hidden; }
.kpi.tap { cursor: pointer; }
.kpi > svg:last-child:not(.spark) { position: absolute; top: 12px; right: 10px; color: var(--ink-3); }
.k-l { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.k-v { font: 700 23px/1.2 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-d { font-size: 11.5px; color: var(--ink-3); min-height: 17px; }
.spark { width: 100%; height: 28px; margin-top: 4px; display: block; }
.spark .sl { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark .sa { fill: color-mix(in srgb, var(--brand) 14%, transparent); }
.spark circle { fill: var(--brand); }
.spark.cost .sl { stroke: var(--out); } .spark.cost .sa { fill: color-mix(in srgb, var(--out) 14%, transparent); } .spark.cost circle { fill: var(--out); }
.spark.in .sl { stroke: var(--in); } .spark.in .sa { fill: color-mix(in srgb, var(--in) 14%, transparent); } .spark.in circle { fill: var(--in); }
.spark.neg .sl { stroke: var(--live); } .spark.neg .sa { fill: color-mix(in srgb, var(--live) 14%, transparent); } .spark.neg circle { fill: var(--live); }
.visual { gap: 10px; }
.vis-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .vis-grid { grid-template-columns: 1fr 1fr; } }
.chart.trend .area { fill: color-mix(in srgb, var(--s1) 16%, transparent); }
.chart.trend .line { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart.trend .prev { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .cross { stroke: var(--ink-2); stroke-width: 1; }
.chart .dot { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.chart .hit { cursor: crosshair; touch-action: pan-y; }
.chart .c-rev, .sw.c-rev { fill: var(--s1); background: var(--s1); }
.chart .c-cost, .sw.c-cost { fill: var(--s2); background: var(--s2); }
.chart.cols path { cursor: pointer; }
.viz-tip { position: fixed; z-index: 90; pointer-events: none; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; box-shadow: var(--shadow); max-width: 220px; }
.viz-tip b { font: 700 15px var(--f-num); font-variant-numeric: tabular-nums; }
.viz-tip .tp { opacity: .7; }
.hbars { display: flex; flex-direction: column; gap: 4px; }
.hbar { border: 0; background: none; text-align: left; padding: 6px 4px; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: opacity .15s; }
.hbar:active { background: var(--raised); }
.hbar.dim, .lg.dim, .seg.dim, .heat2 i.dim { opacity: .3; }
.hb-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.hb-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-top b { font: 600 14.5px var(--f-num); font-variant-numeric: tabular-nums; }
.hb-track { display: block; height: 10px; border-radius: 2px; background: var(--raised); overflow: hidden; }
.hb-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--c, var(--s1)); }
.hb-track i.mono { background: var(--brand); }
.hbar small { font-size: 12px; color: var(--ink-3); }
.hbars.compact .hbar { padding: 5px 4px; }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--s0)); display: inline-block; flex: none; }
.donut-wrap { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; }
.donut { width: 128px; height: 128px; }
.donut .seg { fill: var(--c); cursor: pointer; transition: opacity .15s; }
.donut .dc-v { font: 700 16px var(--f-display); fill: var(--ink); }
.donut .dc-l { font: 600 10px var(--f-body); fill: var(--ink-3); }
.legend { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.legend.row { flex-direction: row; gap: 14px; flex-wrap: wrap; }
.lg { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 5px 2px; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--ink); }
.lg span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg b { font: 600 13.5px var(--f-num); font-variant-numeric: tabular-nums; }
.heat2 { display: grid; gap: 3px; align-items: center; }
.heat2 i { aspect-ratio: 1; border-radius: 3px; background: var(--raised); display: block; }
.heat2 i.q1, .heat-key i.q1 { background: var(--q1); } .heat2 i.q2, .heat-key i.q2 { background: var(--q2); } .heat2 i.q3, .heat-key i.q3 { background: var(--q3); }
.heat2 i.q4, .heat-key i.q4 { background: var(--q4); } .heat2 i.q5, .heat-key i.q5 { background: var(--q5); } .heat2 i.q6, .heat-key i.q6 { background: var(--q6); }
.heat2 .hx { font-size: 9.5px; color: var(--ink-3); white-space: nowrap; }
.heat2 .hy { border: 0; background: none; font-size: 11px; font-weight: 700; color: var(--ink-3); text-align: left; padding: 2px 0; cursor: pointer; border-radius: 6px; }
.heat2 .hy.on { color: var(--brand); background: var(--brand-soft); padding-left: 4px; }
.heat-key { display: flex; align-items: center; gap: 3px; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.heat-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.heat-key span { margin: 0 4px; } .heat-key .grow { flex: 1; }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.matrix th { text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 700; padding: 6px 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.matrix td { padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.matrix td:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.matrix .n { text-align: right; white-space: nowrap; }
.matrix td.bar { position: relative; }
.matrix td.bar i { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 20px; max-width: calc(100% - 12px); border-radius: 4px; background: color-mix(in srgb, var(--s1) 16%, transparent); }
.matrix td.bar.strong i { background: color-mix(in srgb, var(--s1) 26%, transparent); }
.matrix td.bar span { position: relative; }
.matrix tfoot td { font-weight: 800; border-bottom: 0; }
.mini-av { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font: 700 10.5px var(--f-display); flex: none; }
.td-main { display: flex; flex-direction: column; min-width: 0; font-weight: 600; }
.td-main small { font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.gauge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.gauge svg { width: 88px; height: 52px; }
.gauge .g-bg { fill: none; stroke: var(--raised); stroke-width: 8; stroke-linecap: round; }
.gauge .g-fg { fill: none; stroke: var(--s1); stroke-width: 8; stroke-linecap: round; }
.gauge b { font: 700 18px var(--f-display); margin-top: -8px; }
.gauge span { font-size: 12.5px; font-weight: 700; }
.gauge small { font-size: 11px; color: var(--ink-3); }

/* ---------- Players & public side ----------
   Same calm system as the ledger. The one loud thing is the "free now" pill: it is the reason a player opens the app. */
.list-title { font: 700 13px var(--f-body); color: var(--ink-3); margin: 4px 2px -8px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.block-head .link { padding: 0; font-size: 13.5px; }
.loc-line { display: flex; align-items: center; gap: 5px; }
.loc-line .link { padding: 0; font-size: 13.5px; }
.search-wrap input { flex: 1; border: 0; background: transparent; min-height: 46px; outline: none; font-size: 15px; }

.cafe-list { display: grid; gap: 14px; }
@media (min-width: 640px) { .cafe-list { grid-template-columns: 1fr 1fr; } }
.cafe-card { display: flex; flex-direction: column; border: 0; padding: 0; background: var(--surface); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); text-align: left; cursor: pointer; }
.cover { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; background: var(--raised); }
.cover.ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 55%, var(--live)) 100%); }
.cover.ph span { font: 700 34px var(--f-display); color: #fff; opacity: .9; letter-spacing: .04em; }
.cover.mini { width: 48px; height: 48px; aspect-ratio: auto; border-radius: 12px; flex: none; }
.cover.mini span { font-size: 15px; }
.cover.hero { aspect-ratio: 16 / 10; }
.cc-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.cc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cc-top b { font: 700 17px/1.2 var(--f-display); }
.cc-body > small { color: var(--ink-2); font-size: 13px; }
.cc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.from { color: var(--ink-2); font-size: 12.5px; }
.from b { color: var(--ink); font-size: 14px; }
.rating { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--ink-2); flex: none; }
.rating svg { color: #F2A93B; fill: #F2A93B; }
.rating b { color: var(--ink); }
.rating.new { font-size: 11.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 999px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.live-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.live-pill.free { color: var(--in); background: var(--in-soft); }
.live-pill.free .dot { animation: beat 1.6s ease-in-out infinite; }
.live-pill.full { color: var(--live); background: var(--live-soft); }
.live-pill.closed, .live-pill.idle { color: var(--ink-2); background: var(--raised); font-weight: 600; }
@keyframes beat { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-pill.free .dot { animation: none; } }

.cafe-page { padding-top: 0; padding-bottom: 96px; }
.hero-photos { position: relative; margin: 0 -16px; }
.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel img { flex: none; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; scroll-snap-align: start; background: var(--raised); }
.float-back { position: absolute; top: 12px; left: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); backdrop-filter: blur(6px); box-shadow: var(--shadow); }
.photo-count { position: absolute; right: 12px; bottom: 12px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .55); padding: 4px 10px; border-radius: 999px; }
.cafe-title h1 { font: 700 28px/1.1 var(--f-display); }
.cafe-title > p { color: var(--ink-2); margin-top: 4px; }
.cafe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.cafe-meta .hours { font-size: 13px; color: var(--ink-2); }
.action-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.free-rows { display: flex; flex-direction: column; gap: 10px; }
.free-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; font-size: 14.5px; }
.free-row > span:first-child { font-weight: 600; }
.free-row b { font-size: 13px; white-space: nowrap; }
.free-row b.ok { color: var(--in); } .free-row b.no { color: var(--live); }
.free-dots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 120px; }
.free-dots i { width: 12px; height: 12px; border-radius: 4px; background: var(--live-soft); border: 1.5px solid var(--live); }
.free-dots i.on { background: var(--in); border-color: var(--in); }
.price-list { display: flex; flex-direction: column; }
.price-row { display: flex; flex-direction: column; padding: 9px 0; border-top: 1px solid var(--line); }
.price-row:first-child { border-top: 0; padding-top: 0; }
.price-row span { font-weight: 600; }
.price-row small { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.loyal h2 { display: flex; align-items: center; gap: 6px; }
.lo-bar { display: block; height: 8px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.lo-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.lo-bar.small { height: 5px; margin-top: 6px; max-width: 200px; }
.badge.gift { color: var(--in); background: var(--in-soft); }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding: 10px 16px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); z-index: 15; }
.sticky-cta .btn { width: 100%; max-width: 688px; margin: 0 auto; display: flex; }

.stars { display: inline-flex; gap: 1px; color: var(--line); }
.stars i { display: inline-flex; }
.stars i.on svg { color: #F2A93B; fill: #F2A93B; }
.stars i.half svg { color: #F2A93B; fill: color-mix(in srgb, #F2A93B 45%, transparent); }
.rev-avg { display: inline-flex; align-items: center; gap: 6px; }
.rev-avg b { font: 700 18px var(--f-display); }
.reviews { display: flex; flex-direction: column; gap: 14px; }
.review { display: flex; flex-direction: column; gap: 6px; }
.review.card { gap: 8px; }
.review .link { padding: 0; font-size: 13.5px; }
.rv-head { display: flex; align-items: center; gap: 10px; }
.rv-head > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rv-head small { color: var(--ink-3); font-size: 12px; }
.reply { background: var(--raised); border-radius: var(--r-s); padding: 8px 10px; font-size: 13.5px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.big { width: 60px; height: 60px; font-size: 20px; }
.star-pick { display: flex; justify-content: center; gap: 4px; }
.star-pick button { border: 0; background: none; padding: 4px; cursor: pointer; color: var(--line); }
.star-pick button.on svg { color: #F2A93B; fill: #F2A93B; }
.rev-summary { flex-direction: row; align-items: center; gap: 12px; }
.rev-summary > b { font: 700 34px var(--f-display); }
.rev-summary small { color: var(--ink-2); margin-left: auto; }
.pre { white-space: pre-line; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.slot { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.slot b { font-size: 14px; font-variant-numeric: tabular-nums; }
.slot small { font-size: 11.5px; color: var(--in); font-weight: 600; }
.slot[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.slot[aria-pressed="true"] small { color: var(--brand-ink); }
.slot:disabled { opacity: .45; cursor: default; }
.slot:disabled small { color: var(--ink-3); }
.estimate { background: var(--raised); border-radius: var(--r-s); padding: 10px 12px; font-size: 14px; }

.bk-list { display: flex; flex-direction: column; gap: 10px; }
.booking { background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 14px; display: grid; grid-template-columns: 112px 1fr; gap: 6px 14px; }
.booking.up { border-left: 4px solid var(--brand); }
.bk-when { display: flex; flex-direction: column; }
.bk-when b { font: 700 15px var(--f-display); }
.bk-when span { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bk-main { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.bk-main small { color: var(--ink-2); font-size: 13px; }
.bk-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.b-status { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; color: var(--ink-2); background: var(--raised); }
.b-status.confirmed { color: var(--in); background: var(--in-soft); }
.b-status.requested { color: var(--out); background: var(--out-soft); }
.b-status.arrived { color: var(--brand); background: var(--brand-soft); }
.b-status.cancelled, .b-status.declined, .b-status.noshow { color: var(--bad); background: var(--live-soft); }
.bk-row .bk-time { display: flex; flex-direction: column; align-items: flex-start; width: 64px; flex: none; }
.bk-row .bk-time b { font: 700 15px var(--f-num); font-variant-numeric: tabular-nums; }
.bk-row .bk-time small { font-size: 12px; color: var(--ink-3); }
.bk-detail { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.t-list { display: flex; flex-direction: column; gap: 10px; }
.t-card { display: flex; gap: 14px; align-items: center; border: 0; background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); padding: 12px 14px; text-align: left; cursor: pointer; width: 100%; }
.t-date { width: 52px; height: 56px; border-radius: 14px; background: var(--brand-soft); color: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.t-date b { font: 700 22px/1 var(--f-display); }
.t-date small { font-size: 11.5px; font-weight: 700; }
.t-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.t-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.t-top b { font: 700 16px/1.2 var(--f-display); }
.t-body small { color: var(--ink-2); font-size: 12.5px; }
.t-body .t-meta { color: var(--ink-3); }
.t-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.t-status.open { color: var(--in); background: var(--in-soft); }
.t-status.closed { color: var(--out); background: var(--out-soft); }
.t-status.done { color: var(--brand); background: var(--brand-soft); }
.t-status.off { color: var(--bad); background: var(--live-soft); }
.t-facts { display: flex; flex-direction: column; gap: 8px; }
.fact { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.fact svg { color: var(--accent); flex: none; margin-top: 2px; }
.joined { display: inline-flex; align-items: center; gap: 6px; color: var(--in); font-weight: 700; }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; }
.pod { background: var(--raised); border-radius: 14px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pod b { font: 700 15px var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod small { color: var(--ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-place { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.pod.p1 { order: 2; background: var(--brand); color: var(--brand-ink); padding-top: 20px; }
.pod.p1 .pod-place, .pod.p1 small { color: var(--brand-ink); opacity: .85; }
.pod.p2 { order: 1; padding-top: 14px; }
.pod.p3 { order: 3; }
.entrants { display: flex; flex-wrap: wrap; gap: 8px; }
.entrant { display: inline-flex; align-items: center; gap: 6px; background: var(--raised); border-radius: 999px; padding: 5px 12px 5px 6px; font-weight: 600; font-size: 13.5px; }
.entrant small { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 11px; color: var(--ink-3); }
.entrant.me { background: var(--brand-soft); color: var(--brand); }

.ranks { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--r-m); box-shadow: var(--shadow); overflow: hidden; }
.ranks li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ranks li:first-child { border-top: 0; }
.ranks li.me { background: var(--brand-soft); }
.rk { width: 26px; text-align: center; font: 700 16px var(--f-display); color: var(--ink-3); flex: none; }
.top1 .rk { color: #D4A017; } .top2 .rk { color: #8C96A8; } .top3 .rk { color: #B5703A; }
.rk-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rk-main small { color: var(--ink-3); font-size: 12px; }
.rk-pts { font: 700 18px var(--f-num); font-variant-numeric: tabular-nums; }
.rk-pts small { font: 600 11px var(--f-body); color: var(--ink-3); }

.profile .pf-top { display: flex; align-items: center; gap: 14px; }
.profile h1 { font: 700 24px/1.1 var(--f-display); }
.profile .pf-top p { color: var(--ink-2); font-size: 13.5px; }
.code-box { background: var(--raised); border-radius: var(--r-m); padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 4px; border: 1.5px dashed var(--line); }
.code-box small { color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.code-box > b { font: 600 30px/1.1 var(--f-display); letter-spacing: .16em; padding-left: .16em; color: var(--accent); }

.status-card { border-radius: var(--r-m); padding: 14px 16px; background: var(--raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.status-card b { font: 700 16px var(--f-display); }
.status-card p { font-size: 13.5px; color: var(--ink-2); }
.status-card.wait { background: var(--out-soft); border-color: transparent; } .status-card.wait b { color: var(--out); }
.status-card.ok { background: var(--in-soft); border-color: transparent; } .status-card.ok b { color: var(--in); }
.status-card.bad { background: var(--live-soft); border-color: transparent; } .status-card.bad b { color: var(--bad); }
.loc-box { display: flex; flex-direction: column; gap: 10px; }
.loc-box > p { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.loc-box small { color: var(--ink-3); }
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.photo-strip figure { margin: 0; position: relative; }
.photo-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; background: var(--raised); }
.photo-strip .icon-btn { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 50%; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.switch-row > span { display: flex; flex-direction: column; }
.switch-row small { color: var(--ink-3); font-size: 12.5px; }
.switch-row input { appearance: none; width: 46px; height: 28px; border-radius: 99px; background: var(--line); position: relative; flex: none; cursor: pointer; transition: background .15s; }
.switch-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch-row input:checked { background: var(--brand); }
.switch-row input:checked::after { transform: translateX(18px); }
.check.reward { background: var(--in-soft); border-radius: var(--r-s); padding: 10px 12px; align-items: flex-start; }
.check.reward span { display: flex; flex-direction: column; }
.check.reward small { color: var(--ink-2); font-size: 12.5px; }

.verify-list { display: flex; flex-direction: column; gap: 14px; }
.v-top { display: flex; gap: 12px; align-items: center; }
.v-top p { color: var(--ink-2); font-size: 13.5px; }
.v-top small { color: var(--ink-3); font-size: 12px; }
.v-facts { display: grid; grid-template-columns: 82px 1fr; gap: 6px 10px; margin: 0; font-size: 13.5px; }
.v-facts dt { color: var(--ink-3); font-weight: 600; }
.v-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.v-facts .link { padding: 0; }
.v-photos { display: flex; flex-direction: column; gap: 10px; }
.v-photos img { width: 100%; border-radius: 12px; display: block; }

.role-card { display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-l); padding: 16px; cursor: pointer; box-shadow: var(--shadow); }
.role-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.role-card b { font: 700 18px var(--f-display); }
.role-card small { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.role-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--live-soft); color: var(--live); flex: none; }
.role-ic.cafe { background: var(--brand-soft); color: var(--brand); }
.welcome.role h1 { font-size: 28px; }
.welcome > .btn { width: 100%; }
.link.report { font-size: 12.5px; color: var(--ink-3); font-weight: 600; padding: 2px 0; align-self: flex-start; }
.link.center.report { align-self: center; }
.shell.player .view { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.shell.player .view.cafe-page { padding-top: 0; }
.phone-btn { width: 100%; }
.phone-in { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.phone-in span { padding: 0 12px; font-weight: 700; color: var(--ink-2); border-right: 1px solid var(--line); align-self: stretch; display: grid; place-items: center; }
.phone-in input { border: 0 !important; flex: 1; min-height: 48px; padding: 0 12px; font-size: 17px; letter-spacing: .04em; outline: none; background: transparent; }
.otp { font: 700 26px var(--f-display) !important; letter-spacing: .5em; text-align: center; }
.link.inline { padding: 0; display: inline; }
.est-lines { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.est-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.est-line.est-sum { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--ink); align-items: baseline; }
.est-line.est-sum small { color: var(--ink-3); font-size: 12px; }
.est-sum b { font: 700 16px var(--f-display); }
.book-items { display: flex; flex-direction: column; gap: 8px; }
.book-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.book-item.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.bi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bi-info { display: flex; flex-direction: column; min-width: 0; }
.bi-head small { color: var(--ink-3); font-size: 12px; }
.bi-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.bi-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--raised); border-radius: 12px; padding: 3px; flex: none; }
.stepper button { width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--surface); font-size: 20px; font-weight: 700; color: var(--accent); cursor: pointer; box-shadow: var(--shadow); }
.stepper .step-val { min-width: 30px; text-align: center; font: 700 17px var(--f-num); font-variant-numeric: tabular-nums; }

/* Premium surfaces: crisp white cards with a hairline edge */
.card, .list, .stat, .cafe-card, .t-card, .booking, .ranks, .kpi, .role-card { border: 1px solid var(--line); }
.tabbar { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); }
.tab.add span { box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn.primary { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand) 60%, transparent); }
.theme-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; font: 600 12px/1.2 var(--f-body); color: var(--ink-2); text-align: center; padding: 0; }
.swatch i { width: 52px; height: 52px; border-radius: 50%; display: block; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(0,0,0,.35); }
.swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2.5px var(--brand), 0 6px 14px -8px rgba(0,0,0,.35); }
.swatch[aria-pressed="true"] { color: var(--ink); }
.locked-view { gap: 18px; }
.lock-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 4px; }
.lock-ic { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: var(--brand-soft); color: var(--accent); }
.lock-hero h1 { font: 700 26px/1.15 var(--f-display); }
.lock-hero p { color: var(--ink-2); max-width: 46ch; }
.lock-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; counter-reset: s; }
.lock-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.lock-steps li:first-child { border-top: 0; }
.lock-steps li::before { content: counter(s); grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--ink-2); font: 700 14px var(--f-display); align-self: center; }
.lock-steps li.done::before { content: "✓"; background: var(--in-soft); color: var(--in); }
.lock-steps li.now::before { background: var(--brand); color: var(--brand-ink); }
.lock-steps small { color: var(--ink-3); font-size: 12.5px; }
.shell.locked { padding-bottom: 32px; }
.cc-pts { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.cc-pts svg { color: var(--accent); flex: none; }
.cc-pts.mine b { color: var(--accent); }
.pts-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.pts-hero > div { background: var(--raised); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; }
.pts-hero b { font: 700 22px var(--f-num); font-variant-numeric: tabular-nums; }
.pts-hero > div:first-child b { color: var(--accent); }
.pts-hero small { color: var(--ink-3); font-size: 11.5px; }
.reward-list { display: flex; flex-direction: column; gap: 6px; }
.reward-item { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; background: var(--raised); font-size: 14px; }
.reward-item b { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.reward-item.ok { background: var(--in-soft); } .reward-item.ok b { color: var(--in); }
.pts-cards { display: flex; flex-direction: column; gap: 10px; }
.pts-card { display: flex; flex-direction: column; gap: 8px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-m); padding: 12px; cursor: pointer; box-shadow: var(--shadow); }
.pc-top { display: flex; align-items: center; gap: 12px; }
.pc-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pc-name small { color: var(--ink-3); font-size: 12.5px; }
.pc-pts { display: flex; flex-direction: column; align-items: flex-end; }
.pc-pts b { font: 700 24px/1 var(--f-display); color: var(--accent); }
.pc-pts small { color: var(--ink-3); font-size: 11px; }
.pc-next { color: var(--ink-2); font-size: 12.5px; }
.pts-card .lo-bar.small { max-width: none; margin-top: 0; }
.reward-box { background: var(--brand-soft); border-radius: var(--r-s); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.reward-box p { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.reward-box svg { color: var(--accent); }
.reward-edit { display: flex; flex-direction: column; gap: 8px; }
.reward-row { display: grid; grid-template-columns: 1fr 110px 40px; gap: 8px; align-items: center; }
.reward-row > input { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--surface); }
.reward-row .money.small span:last-child { padding: 0 8px; color: var(--ink-3); font-size: 12px; }

/* Explore: sort & filter */
.explore-bar .chip.tool { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; background: var(--surface); border-color: var(--line); font-weight: 700; }
.explore-bar .chip.tool.on { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.result-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; margin: 2px 2px 10px; }
.sort-list { display: flex; flex-direction: column; }
.sort-opt { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); background: none; font: 600 15.5px var(--f-body); color: var(--ink); text-align: left; cursor: pointer; }
.sort-opt:last-child { border-bottom: 0; }
.sort-opt span { flex: 1; }
.sort-opt small { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.sort-opt[aria-pressed="true"] { color: var(--brand); }
.sort-opt svg { color: var(--brand); }
.switch-list { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.sheet-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; position: sticky; bottom: 0; background: var(--surface); padding-top: 10px; }
.cc-cover { position: relative; display: block; }
.dist-badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 8px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: #111216; font: 700 12.5px var(--f-body); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .4); }
.deal-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--brand-soft); color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.deal-note svg { flex: none; margin-top: 1px; color: var(--accent); }

/* Font styles (More / Me → Appearance) */
:root[data-font="editorial"] { --f-display: "Bricolage Grotesque", "GS Indic", "Plus Jakarta Sans", Roboto, system-ui, sans-serif; }
:root[data-font="elegant"] { --f-display: "Fraunces", "GS Indic", Georgia, "Plus Jakarta Sans", serif; }
:root[data-font="classic"] { --f-display: "Sora", "GS Indic", "Plus Jakarta Sans", Roboto, system-ui, sans-serif; --f-num: "Sora", "GS Indic", "Plus Jakarta Sans", Roboto, system-ui, sans-serif; }
.font-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.font-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; }
.font-opt b { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.font-opt small { color: var(--ink-3); font: 500 12px var(--f-body); }
.font-opt[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 1.5px var(--brand); }

/* Tablets and wide screens: keep bars aligned with the content, use the space for more columns */
@media (min-width: 700px) {
  .topbar, .tabbar { padding-left: max(16px, calc((100% - 720px) / 2)); padding-right: max(16px, calc((100% - 720px) / 2)); }
  .hero-photos { margin: 0; border-radius: var(--r-l); overflow: hidden; margin-top: 12px; }
  .cover.hero, .carousel img { aspect-ratio: 21 / 9; max-height: 300px; width: 100%; }
  .sheet { max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
  .view { max-width: 980px; }
  .topbar, .tabbar { padding-left: max(16px, calc((100% - 980px) / 2)); padding-right: max(16px, calc((100% - 980px) / 2)); }
  .cafe-list { grid-template-columns: repeat(3, 1fr); }
  .stations { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Game library on the venue page */
.games-card .t-groups { display: flex; flex-direction: column; gap: 12px; }
.t-dev { margin: 0 0 4px; font: 700 12.5px var(--f-body); color: var(--ink-3); }
.t-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: inherit; }
button.t-row { cursor: pointer; }
.t-group .t-row:last-child { border-bottom: 0; }
.t-main { display: flex; flex-direction: column; min-width: 0; }
.t-main b { font-weight: 600; }
.t-main small { color: var(--ink-3); font-size: 12.5px; }
.t-st { flex: none; font-weight: 700; font-size: 12.5px; color: var(--ink-3); }
.t-st.ok { color: var(--in); }
.t-st.no { color: var(--live); }
.search-wrap.small { margin-bottom: 4px; }
.bi-titles { display: flex; flex-direction: column; gap: 6px; }
.bi-titles > small { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.cc-titles { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-titles svg { flex: none; color: var(--accent); }


/* ============================================================================================
   Neon Arcade (default theme): deep navy, violet-to-cyan neon, glowing edges, Exo 2 headings.
   Everything is scoped to :root[data-accent="neon"] so the other colour themes stay as they were.
   ============================================================================================ */
:root[data-accent="neon"]:root {
  --paper: #060A1C; --surface: #0D1330; --raised: #141B40; --line: rgba(139, 92, 246, .28);
  --ink: #F3F5FF; --ink-2: #AAB2DA; --ink-3: #6F78AA;
  --brand: #8B5CF6; --brand-2: #22D3EE; --brand-ink: #FFFFFF; --brand-soft: rgba(139, 92, 246, .16); --accent: #22D3EE;
  --live: #FF3D81; --live-soft: rgba(255, 61, 129, .16); --live-ink: #FFFFFF;
  --in: #2BEA9E; --in-soft: rgba(43, 234, 158, .12); --out: #FFB547; --out-soft: rgba(255, 181, 71, .14); --bad: #FF5C7A;
  --grad: linear-gradient(90deg, #8B5CF6 0%, #6D7CFF 45%, #22D3EE 100%);
  --glow: 0 0 0 1px rgba(139, 92, 246, .45), 0 0 18px -2px rgba(139, 92, 246, .55), 0 0 42px -12px rgba(34, 211, 238, .45);
  --shadow: 0 10px 30px -16px rgba(0, 0, 0, .8); color-scheme: dark;
  --f-display: "Exo 2", "GS Indic", "Sora", system-ui, sans-serif; --f-num: "Exo 2", "GS Indic", "Sora", system-ui, sans-serif;
  --f-body: "Sora", "GS Indic", "Plus Jakarta Sans", system-ui, sans-serif;
  --r-l: 20px;
}
:root[data-accent="neon"] body {
  background:
    radial-gradient(1200px 520px at 100% -10%, rgba(139, 92, 246, .22), transparent 60%),
    radial-gradient(900px 480px at -20% 30%, rgba(34, 211, 238, .10), transparent 60%),
    var(--paper);
  background-attachment: fixed; font-size: 14.5px; letter-spacing: -.005em;
}
:root[data-accent="neon"] h1, :root[data-accent="neon"] h2, :root[data-accent="neon"] h3 { letter-spacing: -.01em; }
:root[data-accent="neon"] .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Surfaces: dark glass with a thin violet edge */
:root[data-accent="neon"] .card, :root[data-accent="neon"] .list, :root[data-accent="neon"] .stat, :root[data-accent="neon"] .t-card,
:root[data-accent="neon"] .booking, :root[data-accent="neon"] .ranks, :root[data-accent="neon"] .kpi {
  background: linear-gradient(180deg, rgba(20, 27, 64, .92), rgba(13, 19, 48, .92)); border: 1px solid var(--line); box-shadow: var(--shadow);
}
:root[data-accent="neon"] .topbar { background: rgba(6, 10, 28, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(139, 92, 246, .18); }
:root[data-accent="neon"] .sheet { background: #0B1029; border-top: 1px solid rgba(139, 92, 246, .45); box-shadow: 0 -20px 60px -20px rgba(139, 92, 246, .45); }
:root[data-accent="neon"] input, :root[data-accent="neon"] textarea, :root[data-accent="neon"] select { background: rgba(20, 27, 64, .7); color: var(--ink); border-color: rgba(139, 92, 246, .3); }
:root[data-accent="neon"] input:focus, :root[data-accent="neon"] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); outline: none; }

/* Buttons: the primary action is a violet-to-cyan bar that glows */
:root[data-accent="neon"] .btn { background: rgba(20, 27, 64, .8); border-color: rgba(139, 92, 246, .35); color: var(--ink); border-radius: 16px; font-family: var(--f-display); font-weight: 700; letter-spacing: .01em; }
:root[data-accent="neon"] .btn.primary { background: var(--grad); border: 0; color: #fff; box-shadow: 0 10px 28px -10px rgba(139, 92, 246, .8), 0 0 22px -6px rgba(34, 211, 238, .55); }
:root[data-accent="neon"] .btn.primary.live { background: linear-gradient(90deg, #FF3D81, #FF7A59); box-shadow: 0 10px 28px -10px rgba(255, 61, 129, .8); }
:root[data-accent="neon"] .btn.ghost { background: transparent; border-color: transparent; }
:root[data-accent="neon"] .btn.google { background: #fff; color: #111; border: 0; box-shadow: 0 10px 30px -12px rgba(34, 211, 238, .55); }
:root[data-accent="neon"] .btn.apple { background: #000; border: 1px solid rgba(255, 255, 255, .25); }

/* Chips: outlined neon pills; selected = filled gradient */
:root[data-accent="neon"] .chip { background: rgba(13, 19, 48, .85); border: 1px solid rgba(139, 92, 246, .45); color: var(--ink); font-family: var(--f-display); font-weight: 600; padding: 9px 16px; }
:root[data-accent="neon"] .chip[aria-pressed="true"], :root[data-accent="neon"] .chip.tool.on { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 0 18px -4px rgba(139, 92, 246, .8); }
:root[data-accent="neon"] .chip svg { color: var(--accent); }
:root[data-accent="neon"] .chip[aria-pressed="true"] svg { color: #fff; }

/* Search: glowing capsule */
:root[data-accent="neon"] .search-wrap { background: rgba(13, 19, 48, .9); border-radius: 999px; padding: 0 18px; border: 1px solid rgba(139, 92, 246, .55); box-shadow: 0 0 22px -8px rgba(139, 92, 246, .7), inset 0 0 18px -12px rgba(34, 211, 238, .6); color: var(--ink-2); }
:root[data-accent="neon"] .search-wrap input { background: transparent; border: 0; box-shadow: none; min-height: 52px; font-size: 15.5px; }

/* Explore hero: big headline with a gradient phrase, neon art on the right */
:root[data-accent="neon"] .explore > .view-head { position: relative; padding: 18px 2px 8px; min-height: 168px; isolation: isolate; }
:root[data-accent="neon"] .explore > .view-head .hero-tag { display: none; }
:root[data-accent="neon"] .explore > .view-head::before { content: ""; position: absolute; inset: -16px -16px -4px -16px; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 10, 28, 0) 50%, rgba(6, 10, 28, .85) 85%, #060A1C 100%), linear-gradient(90deg, #060A1C 0%, #060A1C 28%, rgba(6, 10, 28, .7) 50%, rgba(6, 10, 28, 0) 72%), url(img/hero.jpg) right bottom / auto 112% no-repeat,
    radial-gradient(260px 160px at 88% 38%, rgba(139, 92, 246, .45), transparent 70%),
    radial-gradient(200px 120px at 72% 70%, rgba(34, 211, 238, .25), transparent 70%);
  }
:root[data-accent="neon"] .explore > .view-head h1 { font: 800 38px/1.02 var(--f-display); letter-spacing: -.025em; max-width: 70%; }
:root[data-accent="neon"] .explore > .view-head .hero-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #B794FF; margin-bottom: 10px;
  border: 1.5px solid rgba(183, 148, 255, .7); box-shadow: 0 0 18px -2px rgba(139, 92, 246, .8), inset 0 0 12px -4px rgba(139, 92, 246, .9); }
:root[data-accent="neon"] .explore > .view-head .hero-tag { position: absolute; right: 4px; top: 22px; font: 800 italic 13px/1.15 "Orbitron", var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: #D7C6FF; text-align: right; transform: rotate(-8deg); text-shadow: 0 0 10px rgba(139, 92, 246, .9); }
:root[data-accent="neon"] .loc-line { color: var(--ink-2); }
:root[data-accent="neon"] .loc-line .link { color: var(--ink); }

/* Venue cards: neon-edged tile, photo on top, gradient call to action */
:root[data-accent="neon"] .cafe-card { background: linear-gradient(180deg, #10173A, #0B1130); border: 1px solid rgba(139, 92, 246, .55); box-shadow: var(--glow); border-radius: 22px; }
:root[data-accent="neon"] .cc-cover { margin: 6px 6px 0; border-radius: 17px; overflow: hidden; }
:root[data-accent="neon"] .cc-body { padding: 14px 16px 16px; gap: 6px; }
:root[data-accent="neon"] .cc-top b { font: 800 20px/1.15 var(--f-display); }
:root[data-accent="neon"] .cc-body > small { color: var(--ink-2); font-size: 13.5px; }
:root[data-accent="neon"] .cc-foot { margin-top: 10px; }
:root[data-accent="neon"] .live-pill { padding: 8px 14px; font-size: 14px; font-family: var(--f-display); border: 1px solid currentColor; background: rgba(43, 234, 158, .08); box-shadow: 0 0 14px -6px currentColor; }
:root[data-accent="neon"] .live-pill.full { color: var(--live); background: rgba(255, 61, 129, .08); }
:root[data-accent="neon"] .live-pill.idle, :root[data-accent="neon"] .live-pill.closed { color: var(--ink-2); border-color: rgba(170, 178, 218, .35); box-shadow: none; background: transparent; }
:root[data-accent="neon"] .from { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(139, 92, 246, .55); font-size: 13.5px; color: var(--ink-2); }
:root[data-accent="neon"] .from::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE08A, #F2A93B 60%, #B86B12); box-shadow: 0 0 8px rgba(242, 169, 59, .7); }
:root[data-accent="neon"] .from b { color: var(--ink); font: 700 16px var(--f-num); }
:root[data-accent="neon"] .cc-pts { margin-top: 10px; padding: 11px 14px; border: 1px solid rgba(139, 92, 246, .35); border-radius: 14px; background: rgba(20, 27, 64, .6); color: var(--ink); font-size: 13.5px; }
:root[data-accent="neon"] .cc-pts svg { color: #FFC83D; }
:root[data-accent="neon"] .cc-cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; min-height: 50px; border-radius: 16px; background: var(--grad); color: #fff;
  font: 700 16px var(--f-display); box-shadow: 0 10px 26px -10px rgba(139, 92, 246, .9), 0 0 20px -6px rgba(34, 211, 238, .6); }
.cc-cta { display: none; }
:root[data-accent="neon"] .dist-badge { background: rgba(6, 10, 28, .75); color: #fff; border: 1px solid rgba(34, 211, 238, .5); backdrop-filter: blur(6px); }

/* Tab bar: dark glass, active tab glows cyan with an underline */
:root[data-accent="neon"] .tabbar { background: rgba(6, 10, 28, .92); border-top: 1px solid rgba(139, 92, 246, .25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 -12px 30px -18px rgba(139, 92, 246, .6); }
:root[data-accent="neon"] .tab { color: var(--ink-3); font-family: var(--f-display); font-weight: 600; font-size: 12px; }
:root[data-accent="neon"] .tab[aria-current="page"] { color: var(--accent); text-shadow: 0 0 12px rgba(34, 211, 238, .6); }
:root[data-accent="neon"] .tab[aria-current="page"] svg { filter: drop-shadow(0 0 6px rgba(34, 211, 238, .8)); }
:root[data-accent="neon"] .tab[aria-current="page"]::after { content: ""; position: absolute; bottom: 8px; width: 26px; height: 3px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 10px rgba(34, 211, 238, .8); }
:root[data-accent="neon"] .tab.add span { background: var(--grad); box-shadow: 0 0 24px -4px rgba(139, 92, 246, .9); }

/* Venue floor: running stations glow pink, free ones glow green */
:root[data-accent="neon"] .station { background: linear-gradient(180deg, #121A40, #0C1233); border: 1px solid rgba(139, 92, 246, .35); }
:root[data-accent="neon"] .station.busy { border-color: rgba(255, 61, 129, .7); box-shadow: 0 0 22px -8px rgba(255, 61, 129, .8); }
:root[data-accent="neon"] .station.free { border-style: solid; border-color: rgba(43, 234, 158, .45); }
:root[data-accent="neon"] .st-clock { text-shadow: 0 0 14px rgba(255, 61, 129, .55); }

/* ---------- Sign-in: arcade splash ---------- */
:root[data-accent="neon"] .signin { position: relative; overflow: hidden; justify-content: flex-end; gap: 16px; padding-bottom: max(36px, env(safe-area-inset-bottom, 0px)); }
:root[data-accent="neon"] .signin::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 10, 28, .15) 0%, rgba(6, 10, 28, 0) 35%, rgba(6, 10, 28, .75) 58%, #060A1C 70%), url(img/signin.jpg) center top / cover no-repeat, #060A1C; }
:root[data-accent="neon"] .signin .brand-mark { width: 84px; height: 84px; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(183, 148, 255, .8), 0 0 36px -4px rgba(139, 92, 246, .9); }
:root[data-accent="neon"] .signin .brand-mark img { width: 100%; height: 100%; display: block; }
:root[data-accent="neon"] .signin h1 { font: 800 clamp(28px, 9vw, 38px)/1 "Orbitron", var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
:root[data-accent="neon"] .signin h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(139, 92, 246, .6)); }
:root[data-accent="neon"] .signin .tagline { font: 700 18px/1.3 var(--f-display); color: var(--ink); }
:root[data-accent="neon"] .signin .lede { color: var(--ink-2); font-size: 14px; }
:root[data-accent="neon"] .signin .perks { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-accent="neon"] .signin .perks span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 600 12.5px var(--f-display); color: var(--ink); border: 1px solid rgba(139, 92, 246, .5); background: rgba(13, 19, 48, .7); }
:root[data-accent="neon"] .signin .perks svg { color: var(--accent); }
:root[data-accent="neon"] .mini-floor span { border: 1px solid rgba(139, 92, 246, .3); background: rgba(13, 19, 48, .7); }
:root[data-accent="neon"] .mini-floor span.on { background: linear-gradient(180deg, #151D46, #0E1436); border: 1px solid rgba(255, 61, 129, .65); border-left: 1px solid rgba(255, 61, 129, .65); box-shadow: 0 0 20px -8px rgba(255, 61, 129, .9); }
:root[data-accent="neon"] .mini-floor span.on b { color: #fff; text-shadow: 0 0 12px rgba(255, 61, 129, .7); }
:root[data-accent="neon"] .mini-floor span:not(.on) b { color: var(--in); }
.signin .perks, .signin .tagline, .signin .brand-mark { display: none; }
:root[data-accent="neon"] .signin .perks, :root[data-accent="neon"] .signin .tagline { display: flex; }
:root[data-accent="neon"] .signin .tagline { display: block; }
:root[data-accent="neon"] .signin .brand-mark { display: block; }
:root[data-accent="neon"] .signin > .signin-art > svg, :root[data-accent="neon"] .signin .old-logo { display: none; }
:root[data-accent="neon"] .fine { color: var(--ink-3); }
:root[data-accent="neon"] .fine a { color: var(--ink-2); }

/* Venue-owner gate */
.venue-gate .gate h2 { font: 700 19px/1.25 var(--f-display); }
.gate-list { margin: 4px 0 0 18px; display: grid; gap: 8px; color: var(--ink-2); font-size: 14px; }
.fixed-who { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.fixed-who svg { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { :root[data-accent="neon"] * { transition: none !important; } }
.new-badge { position: absolute; top: 10px; right: 10px; padding: 4px 12px; border-radius: 999px; font: 700 13px var(--f-display); color: #fff; background: var(--brand); }
:root[data-accent="neon"] .new-badge { background: linear-gradient(90deg, #A66BFF, #C084FC); box-shadow: 0 0 14px rgba(166, 107, 255, .8); }

/* Favourite heart */
.cc-top-r { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.fav-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; flex: none; }
.fav-btn.on { color: #FF4D8D; border-color: rgba(255, 77, 141, .6); }
.fav-btn.on svg { fill: currentColor; }
:root[data-accent="neon"] .fav-btn { border-color: rgba(139, 92, 246, .55); background: rgba(13, 19, 48, .7); color: #fff; }
:root[data-accent="neon"] .fav-btn.on { color: #FF4D8D; border-color: rgba(255, 77, 141, .7); box-shadow: 0 0 14px -4px rgba(255, 77, 141, .9); }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fav-btn.big { width: 44px; height: 44px; }
.switch-row { align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.switch-row span { display: flex; flex-direction: column; gap: 2px; }
.switch-row small { color: var(--ink-2); }

/* ---------- Discounts and game passes ---------- */
.deals { display: flex; flex-direction: column; gap: 12px; }
.deal-sum { background: var(--raised); border-radius: var(--r-m); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ds-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); }
.ds-row.ok span:last-child { color: var(--in); font-weight: 700; }
.ds-row.total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; color: var(--ink); font-weight: 700; }
.ds-row.total b { font-size: 20px; }
.inline-input { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.inline-input input { flex: 1; min-width: 0; }
.inline-input .unit { color: var(--ink-3); font-size: 14px; white-space: nowrap; }
.inline-input .chips { flex: none; }
.pass-list { display: flex; flex-direction: column; gap: 10px; }
.pass-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border-radius: var(--r-m); background: var(--raised); }
.pi-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pi-main small { color: var(--ink-3); font-size: 12.5px; }
.pi-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.pi-buy b { font-size: 17px; }
.pi-buy .save { color: var(--in); font-weight: 700; font-size: 12px; }
.pass-hero { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--r-m); background: var(--brand-soft); }
.pass-hero b { font-size: 26px; }
.pass-hero small { color: var(--ink-3); }
.my-pass-strip { display: flex; flex-direction: column; gap: 6px; }
/* Rupee sign inside a field: keep the amount clear of it. */
.field .money input:not([type=checkbox]) { padding-left: 34px; min-height: 56px; font: 700 22px var(--f-num); font-variant-numeric: tabular-nums; }
.field .money.small input:not([type=checkbox]) { padding-left: 24px; min-height: 44px; font-size: 17px; }
.est-line.ok span:last-child { color: var(--in); font-weight: 700; }
/* Packages (birthday party etc.) in booking and prices */
.book-item.pkg .bi-head .btn.small { flex: none; }
.bi-games { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.45; }
.bi-games small { color: var(--ink-3); font-weight: 600; }
.price-row.pkg-row { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
.price-row.pkg-row > button { grid-row: 1 / span 2; grid-column: 2; }
.toast { transition: .15s; cursor: pointer; }
/* Dashboard drill-down */
.drill-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.drill-sum > div { background: var(--raised); border-radius: var(--r-m); padding: 10px 12px; display: flex; flex-direction: column; }
.drill-sum b { font-size: 18px; font-variant-numeric: tabular-nums; }
.drill-sum small { color: var(--ink-3); font-size: 12px; }
.row-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.tap { cursor: pointer; }
tr.tap:active td { background: var(--raised); }
button.gauge { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.chart.trend { cursor: pointer; }
.heat2 i { cursor: pointer; }
.recover[role=button] { cursor: pointer; }
/* Offer ribbon: a moving shine and a gentle pulse so players spot a deal */
.offer-ribbon { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1a0b00;
  background: linear-gradient(110deg, #FBBF24 0%, #F59E0B 40%, #FDE68A 50%, #F59E0B 60%, #FBBF24 100%); background-size: 250% 100%; box-shadow: 0 4px 14px rgba(245, 158, 11, .45); animation: or-shine 2.6s linear infinite; overflow: hidden; max-width: calc(100% - 20px); }
.offer-ribbon .or-ic { width: 20px; height: 20px; border-radius: 50%; background: #1a0b00; color: #FBBF24; display: grid; place-items: center; font-weight: 900; font-size: 12px; flex: none; }
.offer-ribbon .or-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-ribbon.live { animation: or-shine 2.6s linear infinite, or-pulse 1.6s ease-in-out infinite; }
.offer-ribbon.big { position: static; margin-top: 10px; font-size: 14px; padding: 7px 14px 7px 7px; align-self: flex-start; }
.offer-ribbon.big .or-ic { width: 24px; height: 24px; font-size: 14px; }
.cafe-title { display: flex; flex-direction: column; }
@keyframes or-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes or-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(245, 158, 11, .45); } 50% { transform: scale(1.05); box-shadow: 0 6px 22px rgba(245, 158, 11, .75); } }
@media (prefers-reduced-motion: reduce) { .offer-ribbon, .offer-ribbon.live { animation: none; } }
.deals-card .reward-item.ok { animation: or-glow 2s ease-in-out infinite; }
@keyframes or-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } 50% { box-shadow: 0 0 0 3px rgba(52, 211, 153, .35); } }
@media (prefers-reduced-motion: reduce) { .deals-card .reward-item.ok { animation: none; } }
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.perm-list { display: flex; flex-direction: column; gap: 12px; }

/* ₹ prefix never sits on the digits, whatever container the amount box is in. */
.money > span:first-child + input, div.money > input:not([type=checkbox]) { padding-left: 34px; }
div.money.small > input:not([type=checkbox]) { padding-left: 26px; }
.tier .money > input, .inline-row .money > input { padding-left: 30px; }

/* ---------- Desktop and laptop (web app): side navigation, content fills the screen ---------- */
@media (min-width: 1024px) {
  :root { --side-w: 236px; }
  .shell { padding-left: var(--side-w); padding-bottom: 40px; }
  .topbar, .tabbar { padding-left: 32px; padding-right: 32px; }
  .shell > .topbar { padding-left: 32px; padding-right: 32px; }
  :root .tabbar { top: 0; bottom: 0; right: auto; width: var(--side-w); height: 100vh; padding: 92px 14px 24px; border-top: 0; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; overflow-y: auto; }
  .tabbar::before { content: "GameSpotter"; position: absolute; top: 24px; left: 18px; right: 14px; height: 44px; padding-left: 54px; display: flex; align-items: center;
    font: 800 18px var(--f-display); letter-spacing: -.01em; color: var(--ink); background: url(img/icon.png) left center / 44px 44px no-repeat; }
  .tabbar .tab { flex: none; height: 48px; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 0 14px; border-radius: 12px; font-size: 15px; }
  .tabbar .tab:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
  .tabbar .tab[aria-current="page"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
  .tabbar .tab .badge-dot { position: static; margin-left: auto; }
  .tabbar .tab.add { order: -1; height: auto; padding: 0 0 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .tabbar .tab.add:hover { background: none; }
  :root .tabbar .tab.add span { width: 100%; height: 48px; border-radius: 14px; transform: none; display: flex; gap: 8px; justify-content: center; align-items: center; }
  .tabbar .tab.add span::after { content: "New entry"; font: 700 15px var(--f-display); }

  .view { max-width: 1320px; padding: 12px 40px 40px; gap: 20px; }
  .cafe-page.view { max-width: 1160px; padding-top: 0; }
  .cafe-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .stations { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Dashboard: two columns of visuals, charts kept to a readable size */
  .view.dash.bi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .view.dash.bi > .view-head, .view.dash.bi > .slicers, .view.dash.bi > .live-card, .view.dash.bi > .kpis, .view.dash.bi > .hint, .view.dash.bi > .link-card { grid-column: 1 / -1; }
  .view.dash.bi .chart { max-height: 300px; }
  .view.dash.bi .vis-grid { grid-template-columns: 1fr; }
  .sticky-cta { left: var(--side-w); bottom: 0; }
  .toast { bottom: 28px; left: calc(var(--side-w) + 16px); }
  :root[data-accent="neon"] .explore > .view-head h1 { font-size: 46px; }

  /* Sheets open as centred dialogs */
  .scrim { align-items: center; padding: 24px; }
  .sheet { width: min(680px, 100%); max-height: 88vh; border-radius: 22px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .2s, opacity .2s; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
  .sheet.tall { min-height: 0; }
  .scrim.in .sheet { transform: none; opacity: 1; }
  .sheet .grab { display: none; }
  .sheet-head { padding-top: 14px; }

  /* Sign-in: photo on the left, sign-in on the right */
  :root .signin { max-width: none; margin: 0; min-height: 100vh; justify-content: center; padding: 64px 7vw 64px calc(56vw + 5vw); }
  :root[data-accent="neon"] .signin::before { right: 44%;
    background: linear-gradient(90deg, rgba(6, 10, 28, 0) 60%, #060A1C 100%), url(img/signin.jpg) center / cover no-repeat, #060A1C; }
  :root[data-accent="neon"] .signin h1 { font-size: 44px; }
  :root .signin .btn.google { max-width: 420px; }
}
@media (min-width: 1440px) {
  .view { max-width: 1440px; }
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cafe-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Discounted prices: normal price struck through, offer price highlighted */
.price-tag { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-tag s { color: var(--ink-3); font-weight: 500; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--live) 75%, transparent); }
.price-tag b { color: var(--in); font-weight: 800; }
.est-sum .price-tag b, .ds-row.total .price-tag b { font: 800 18px var(--f-display); }
.est-sum .price-tag s, .ds-row.total .price-tag s { font-size: 13px; }
.est-line.save, .ds-row.save { color: var(--in); font-weight: 700; }
.est-line.save b, .ds-row.save b { color: var(--in); }
.price-row small.tiers { display: block; }
.tier-p { white-space: nowrap; }

/* ---------- Messages ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 52vh; }
.chat-list { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 56vh; padding: 4px 2px; }
.chat-day { text-align: center; font-size: 12px; color: var(--ink-3); margin: 6px 0 2px; }
.msg { max-width: 82%; align-self: flex-start; background: var(--raised); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 8px 12px 6px; display: flex; flex-direction: column; gap: 2px; }
.msg p { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 16px 16px 4px 16px; }
.msg-who { font-weight: 700; color: var(--accent); font-size: 12px; }
.msg-at { align-self: flex-end; font-size: 11px; color: var(--ink-3); }
.chat-bar { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; background: var(--paper); padding-top: 6px; }
.chat-bar textarea { flex: 1; resize: none; min-height: 46px; max-height: 120px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 12px 14px; font: inherit; }
.icon-btn.send { width: 46px; height: 46px; border-radius: 14px; background: var(--brand); color: var(--brand-ink); }
.chips.quick .chip { white-space: nowrap; }
.unread-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--live); margin-left: 6px; vertical-align: middle; box-shadow: 0 0 8px var(--live); }
.late-pill { display: inline-flex; align-items: center; gap: 4px; font: 700 11.5px var(--f-display); color: #F59E0B; background: rgba(245, 158, 11, .14); border-radius: 999px; padding: 2px 8px; }
.bk-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.note.warn { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .1); }
.choices.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---------- Find teammates ---------- */
.squads .block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.squads .block-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.sq-list { display: flex; flex-direction: column; gap: 10px; }
.sq-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sq-card.in { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.sq-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.sq-when { display: flex; flex-direction: column; min-width: 64px; }
.sq-when b { font: 700 16px var(--f-display); }
.sq-when small, .sq-main small { color: var(--ink-2); font-size: 12.5px; }
.sq-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sq-main b { font-weight: 700; }
.sq-note { font-style: italic; }
.sq-need { font: 700 12px var(--f-display); color: var(--in); background: color-mix(in srgb, var(--in) 14%, transparent); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.sq-need.full { color: var(--ink-3); background: var(--raised); }
.sq-people { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sq-people small { color: var(--ink-3); margin-left: 4px; font-size: 12px; }
.avatar.tiny { width: 24px; height: 24px; font-size: 10px; border-radius: 50%; }
button.avatar { border: 0; padding: 0; cursor: pointer; }
button.avatar.tiny { width: 30px; height: 30px; font-size: 11px; }
.sq-seg { margin: 4px 0 12px; }
.friends { display: flex; flex-direction: column; gap: 14px; }
.friend-list { display: flex; flex-direction: column; gap: 8px; }
.friend { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 10px 10px 10px 12px; }
.friend-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.friend-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-main small { color: var(--ink-3); font-size: 12.5px; }
.friend-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.friend-acts .btn.small + .btn.small { margin-left: 6px; }
.icon-btn.has-dot { position: relative; color: var(--brand); }
.icon-btn.has-dot::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger, #f43f5e); }
.friend-hero { display: flex; align-items: center; gap: 12px; }
.friends .switch-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 12px 14px; }
.sq-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Help ---------- */
.help-cta { display: flex; flex-direction: column; gap: 10px; }
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 14px; }
.faq-item summary { cursor: pointer; padding: 13px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq-item summary::after { content: "+"; color: var(--accent); font-weight: 800; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 0 14px; color: var(--ink-2); line-height: 1.5; }
.sup-row { align-items: center; }
.link-row { background: none; border: 0; text-align: left; color: inherit; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; cursor: pointer; }
.badge.warn { background: rgba(245, 158, 11, .16); color: #F59E0B; }

/* ---------- Counter extras ---------- */
.view-head.with-action { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
pre.closing { white-space: pre-wrap; font: 500 14px/1.55 var(--f-body); background: var(--raised); border-radius: var(--r-m); padding: 14px; color: var(--ink); }
.checkins .row-main small { color: var(--ink-2); }
.qr-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.qr-card h2 { font: 800 24px var(--f-display); }
.qr-sub { color: var(--ink-2); font-weight: 600; }
.qr-box { width: min(320px, 80vw); background: #fff; border-radius: 18px; padding: 14px; }
.qr-box svg { width: 100%; height: auto; display: block; }
.code-box.invite b { letter-spacing: .12em; }
.lang-pick { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.lang-pick .chips { flex-wrap: nowrap; }
@media print {
  body * { visibility: hidden !important; }
  .printable, .printable * { visibility: visible !important; }
  .printable { position: fixed; inset: 0; margin: auto; width: 100%; background: #fff !important; color: #000 !important; border: 0 !important; box-shadow: none !important; padding-top: 60px; }
  .printable h2, .printable p { color: #000 !important; }
  .qr-box { width: 70mm; }
}

/* Book a slot: games and food in a horizontal strip instead of a long list */
.bi-games { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bi-games small { color: var(--ink-3); font-size: 12px; }
.pill-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.pill-scroll::-webkit-scrollbar { display: none; }
.pill { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--raised); border: 1px solid var(--line); white-space: nowrap; }
.food-scroll { gap: 10px; mask-image: none; }
.food-card { flex: none; width: 132px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); }
.food-card.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.food-card b { font-size: 13.5px; line-height: 1.25; }
.food-card small { color: var(--ink-2); }
.food-card .btn.small, .food-card .stepper { align-self: flex-start; margin-top: auto; }
.menu-list { display: flex; flex-direction: column; }
.menu-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.menu-row:first-child { border-top: 0; }
.sq-save { color: var(--in); font-weight: 600; font-size: 12px; }
.sq-tips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sq-tips::-webkit-scrollbar { display: none; }
/* Games at a venue: one swipeable row per machine instead of a long list */
.t-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; -webkit-overflow-scrolling: touch; }
.t-scroll::-webkit-scrollbar { display: none; }
.t-scroll .t-row { flex: none; width: 150px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--raised); }
.t-group .t-scroll .t-row:last-child { border-bottom: 1px solid var(--line); }
.t-scroll .t-main b { white-space: normal; line-height: 1.25; }
@media (min-width: 1024px) { .t-scroll { flex-wrap: wrap; overflow: visible; } }

/* ---------- Motion: tap ripples, screens sliding in, a pop on the tab you pick ---------- */
.rip-box { position: fixed; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.rip { position: absolute; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 38%, transparent) 0%, color-mix(in srgb, var(--brand) 18%, transparent) 45%, transparent 70%);
  transform: scale(0); opacity: 1; animation: rip .55s cubic-bezier(.2, .7, .3, 1) forwards; }
.rip.on-brand { background: radial-gradient(circle, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .18) 45%, transparent 70%); }
@keyframes rip { 70% { opacity: .9; } to { transform: scale(1); opacity: 0; } }

.btn, .chip, .slot, .cafe-card, .sq-card, .friend, .booking, .food-card, .t-card, .row, .seg button, .icon-btn, .tab { transition: transform .14s cubic-bezier(.2, .8, .2, 1), background-color .15s, border-color .15s, box-shadow .2s; }
.btn:active, .chip:active, .slot:active, .seg button:active { transform: scale(.96); }
.cafe-card:active, .sq-card:active, .friend:active, .booking:active, .food-card:active, .t-card:active { transform: scale(.985); }
.icon-btn:active, .tab:active { transform: scale(.9); }

main.view.enter, main.view.enter-fwd, main.view.enter-back { animation: var(--enter-anim) var(--enter-delay, 0ms) cubic-bezier(.2, .8, .2, 1) both; animation-duration: .34s; }
main.view.enter { --enter-anim: view-up; }
main.view.enter-fwd { --enter-anim: view-fwd; }
main.view.enter-back { --enter-anim: view-back; }
@keyframes view-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes view-fwd { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes view-back { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
/* Cards in a fresh screen arrive one after another */
main.view.enter :is(.cafe-card, .sq-card, .friend, .booking, .t-card, .event-card):nth-child(-n+8) { animation: card-in .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--enter-delay, 0ms) + 60ms); }
main.view.enter :is(.cafe-card, .sq-card, .friend, .booking, .t-card, .event-card):nth-child(2) { animation-delay: calc(var(--enter-delay, 0ms) + 110ms); }
main.view.enter :is(.cafe-card, .sq-card, .friend, .booking, .t-card, .event-card):nth-child(3) { animation-delay: calc(var(--enter-delay, 0ms) + 160ms); }
main.view.enter :is(.cafe-card, .sq-card, .friend, .booking, .t-card, .event-card):nth-child(4) { animation-delay: calc(var(--enter-delay, 0ms) + 210ms); }
main.view.enter :is(.cafe-card, .sq-card, .friend, .booking, .t-card, .event-card):nth-child(n+5) { animation-delay: calc(var(--enter-delay, 0ms) + 250ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

.tabbar.popping .tab[aria-current="page"] svg { animation: tab-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tab-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18) translateY(-2px); } 100% { transform: none; } }

.chat-list .msg:last-child { animation: msg-in .26s cubic-bezier(.2, .8, .2, 1); }
.chat-list .msg.mine:last-child { transform-origin: right bottom; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rip-box { display: none; } }

/* ---------- Switches: gold when on, so on/off is obvious in every theme ---------- */
input[type="checkbox"][role="switch"] { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 99px; background: var(--raised); border: 1.5px solid color-mix(in srgb, var(--ink-3) 55%, transparent);
  position: relative; flex: none; cursor: pointer; margin: 0; transition: background .2s, border-color .2s, box-shadow .2s; }
input[type="checkbox"][role="switch"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: color-mix(in srgb, var(--ink-3) 85%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), background .2s; }
input[type="checkbox"][role="switch"]:checked { background: linear-gradient(135deg, #FDE68A 0%, #FBBF24 45%, #F59E0B 100%); border-color: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18), 0 0 16px rgba(245, 158, 11, .45); }
input[type="checkbox"][role="switch"]:checked::after { transform: translateX(20px); background: #fff center / 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
input[type="checkbox"][role="switch"]:focus-visible { outline: 2px solid #FBBF24; outline-offset: 3px; }
input[type="checkbox"][role="switch"]:disabled { opacity: .5; cursor: default; }

/* ---------- Groups you can open, and who's in them ---------- */
.sq-card.tap, li.tap { cursor: pointer; }
.sq-members { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.sq-members > small { color: var(--ink-3); font-size: 12.5px; }
.sq-member-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.sq-member { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 4px 12px 4px 4px; font: 600 13px var(--f-body, inherit); white-space: nowrap; cursor: pointer; }
.sq-member small { color: #FBBF24; font-size: 11px; font-weight: 700; }
.chat-foot { border-top: 1px solid var(--line); padding-top: 10px; }
.sq-join { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sq-join p { margin: 0; color: var(--ink-2); font-size: 13.5px; }
button.friend-main { border: 0; background: none; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }

/* ---------- Player profile ---------- */
.profile-sheet { display: flex; flex-direction: column; gap: 14px; }
.pf-hero { display: flex; align-items: center; gap: 14px; }
.pf-hero h2 { margin: 0; font-size: 22px; }
.pf-hero p { margin: 2px 0 0; color: var(--ink-3); font-size: 13.5px; }
.stat-grid.four { grid-template-columns: repeat(4, 1fr); }
.profile-sheet .block h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 15px; }
.chip.static { cursor: default; }
.awards, .pf-played { display: flex; flex-direction: column; gap: 8px; }
.award { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.award .medal { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--f-display, inherit); color: #1f1300; flex: none; }
.award.gold .medal { background: radial-gradient(circle at 35% 30%, #FEF3C7, #FBBF24 55%, #B45309); box-shadow: 0 0 14px rgba(251, 191, 36, .45); }
.award.silver .medal { background: radial-gradient(circle at 35% 30%, #F8FAFC, #CBD5E1 55%, #64748B); }
.award.bronze .medal { background: radial-gradient(circle at 35% 30%, #FFEDD5, #FB923C 55%, #9A3412); }
.aw-main, .pl-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.aw-main small, .pl-main small { color: var(--ink-3); font-size: 12.5px; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pl-date { width: 54px; color: var(--ink-3); font-size: 12px; flex: none; }
.pl-res { font-size: 12px; font-weight: 700; color: var(--ink-2); flex: none; }
.pl-res.gold { color: #FBBF24; } .pl-res.silver { color: #CBD5E1; } .pl-res.bronze { color: #FB923C; }
.pf-top .link { margin-top: 4px; padding: 0; font-size: 13px; }
.sq-join .btn { white-space: nowrap; flex: none; }
.pl-main b { font-size: 14.5px; }