/* Lilypad Live · one stylesheet for the phone (body.player), the presenter (body.hostpage) and the big screen (body.screenpage).
   It follows lilypadlearning.ca: light pages (white and mint), navy text, green pill buttons, Poppins and Nunito Sans.
   The money machine sits on a navy panel, like the site's navy hero (.on-navy switches the tokens back to dark).
   Brand: navy #213E8C, green #30AE58, blue #2A70DE, gold #F2B33D. */

:root {
  --bg: #F7F9FB; --bg2: #FFFFFF; --card: #FFFFFF; --card2: #F2F4F7; --line: #E4E7EC; --line2: #D0D5DD;
  --ink: #101828; --dim: #475467; --dim2: #667085; --mint: #F2FAF5; --mint2: #E6F6EC; --blue-soft: #E8F0FC;
  --gold: #F2B33D; --gold-d: #B9801A; --gold-ink: #9A6400; --coral: #E5483D; --coral-d: #A8281F; --coral-l: #B42318;
  --green: #30AE58; --green-d: #1F8A45; --green-l: #1F8A45; --green-rgb: 48, 174, 88;
  --blue: #2A70DE; --blue-l: #2A70DE; --navy: #213E8C; --navy-d: #182D66; --pond: #0C3F4E;
  /* white glass for panels floating over the 3D room or the city */
  --glass: 255, 255, 255;
  --surface: #FFFFFF;
  --lift: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --shadow: 0 8px 24px rgba(16, 24, 40, .08);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, .16);
  --pads-low: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 240'%3E%3Cellipse cx='90' cy='180' rx='150' ry='46' fill='none' stroke='%23213E8C' stroke-opacity='0.05' stroke-width='1.5'/%3E%3Cellipse cx='90' cy='180' rx='110' ry='33' fill='none' stroke='%23213E8C' stroke-opacity='0.06' stroke-width='1.5'/%3E%3Cellipse cx='250' cy='100' rx='60' ry='18' fill='none' stroke='%23213E8C' stroke-opacity='0.05' stroke-width='1.5'/%3E%3Cpath transform='translate(70 190) rotate(200)' fill='%2330AE58' fill-opacity='.09' d='M0 0L67.1 20.0A70 70 0 1 1 67.1 -20.0Z'/%3E%3Cpath transform='translate(185 215) rotate(120)' fill='%2330AE58' fill-opacity='.09' d='M0 0L38.3 11.4A40 40 0 1 1 38.3 -11.4Z'/%3E%3Cpath transform='translate(250 150) rotate(300)' fill='%2330AE58' fill-opacity='.09' d='M0 0L21.1 6.3A22 22 0 1 1 21.1 -6.3Z'/%3E%3C/svg%3E");
  --pads-high: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'%3E%3Cellipse cx='100' cy='50' rx='70' ry='22' fill='none' stroke='%23213E8C' stroke-opacity='0.05' stroke-width='1.5'/%3E%3Cellipse cx='100' cy='50' rx='44' ry='14' fill='none' stroke='%23213E8C' stroke-opacity='0.06' stroke-width='1.5'/%3E%3Cpath transform='translate(110 48) rotate(40)' fill='%2330AE58' fill-opacity='.09' d='M0 0L26.8 8.0A28 28 0 1 1 26.8 -8.0Z'/%3E%3C/svg%3E");
  --f-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* One type scale (tools/typescale.mjs put every size on it). Phones and the presenter in px; the big screen in vw,
     where 1vw is about 13px on a 1280 wide projector, the smallest a room can read. Poppins 600 for labels and
     buttons, 700 for headings and big numbers; Nunito Sans 400 for sentences, 600 on small phone text. */
  --t-xs: 11px; --t-sm: 12px; --t-cap: 13px; --t-md: 14px; --t-body: 16px; --t-lg: 18px; --t-xl: 20px; --t-2xl: 24px; --t-3xl: 28px;
  --s-sm: 1vw; --s-md: 1.25vw; --s-lg: 1.5vw; --s-xl: 2vw; --s-2xl: 2.6vw; --s-3xl: 3vw;
  --r: 18px;
  color-scheme: light;
}
/* navy panels (the money machine, the recap card): the dark versions of the same tokens */
.on-navy {
  --bg: #0A1A3E; --card: #17326F; --card2: #1A3676; --line: rgba(150, 185, 255, .18); --line2: rgba(150, 185, 255, .3);
  --ink: #EDF2FC; --dim: #B4C2E4; --dim2: #8C9CC6; --green-l: #86E3A6; --coral-l: #FFB3AB; --blue-l: #86AEF7; --gold-ink: #F2B33D;
  --glass: 8, 22, 54; --surface: linear-gradient(180deg, #1C3A7E, #17326F); --lift: inset 0 1px 0 rgba(16,24,40,.08);
  color: var(--ink); color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.5 var(--f-body); -webkit-font-smoothing: antialiased; }
body.player, body.screenpage { overflow: hidden; overscroll-behavior: none; }
/* iPhone and iPad ignore user-scalable=no: without this, two quick taps zoom the page (and every drag after it is off),
   and a long press starts selecting text or opens the callout instead of picking a card up */
body.player { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.player input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }
.ic { width: 28px; height: 28px; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.red { color: var(--coral); }
kbd { font: 600 var(--t-sm) var(--f-head); background: var(--card2); border: 1px solid var(--line2); border-radius: 6px; padding: 1px 6px; }

.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--dim); font: 600 var(--t-md) var(--f-head); }
.boot-mark { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--line2); border-top-color: var(--green); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.noscript { padding: 24px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 24px; cursor: pointer;
  background: var(--green); color: #fff; font: 600 var(--t-body) var(--f-head); box-shadow: 0 3px 0 var(--green-d), 0 8px 20px rgba(var(--green-rgb), .25); transition: transform .08s, box-shadow .08s, background-color .15s; }
.btn:hover { background: #2BA050; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-d); }
.btn.big { padding: 15px 28px; font-size: var(--t-lg); }
.btn.wide { width: 100%; }
.btn.sm { padding: 9px 16px; font-size: var(--t-md); box-shadow: 0 2px 0 var(--green-d); }
.btn.ghost { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn.ghost:active { transform: translateY(1px); }
.btn.green { background: var(--green); }
.btn.gold { background: var(--gold); color: #3A2600; box-shadow: 0 3px 0 var(--gold-d); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.on-navy .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.pill-btn { border: 1px solid var(--line2); background: rgba(16,24,40,.06); color: var(--dim); border-radius: 999px; padding: 8px 14px; font: 600 var(--t-cap) var(--f-head); cursor: pointer; }
.pill-btn.on { color: var(--green); border-color: var(--green); }

/* ---------- player: screens ---------- */
.scr { position: fixed; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .4s ease-out, transform .5s cubic-bezier(.2, .8, .2, 1); padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
.scr.in { opacity: 1; transform: none; }
body.player { background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 45%, var(--mint) 100%); }
/* lily pads and ripples resting on the pond, behind every kid screen */
body.player::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: var(--pads-low) left -40px bottom -30px / 330px auto no-repeat, var(--pads-high) right -30px top 18% / 170px auto no-repeat; }

.net { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 60; white-space: nowrap; background: rgba(var(--glass),.92); border: 1px solid var(--line2); color: var(--ink); font: 600 var(--t-cap) var(--f-head); padding: 7px 14px; border-radius: 999px; }
.net.offline, .net.waiting { border-color: var(--gold-ink); color: var(--gold-ink); }

.logo { width: 92px; margin: 0 auto; filter: drop-shadow(0 8px 24px rgba(var(--green-rgb),.35)); }
.logo svg, .logo img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.wordmark { font: 700 clamp(44px, 14vw, 72px)/.9 var(--f-display); letter-spacing: -.02em; text-align: center; margin-top: 14px; }
.wordmark span { display: block; color: var(--green-l); }
.join, .title, .msg { margin: auto; width: min(420px, 100%); padding: 24px 22px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; position: relative; }
.sub { color: var(--dim); font: 600 var(--t-body) var(--f-head); }
.chapter { font: 600 var(--t-sm) var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); margin-top: 6px; }
.foot { color: var(--dim2); font-size: var(--t-cap); margin-top: 18px; }
.note { color: var(--gold-ink); font-size: var(--t-cap); }
.err { color: var(--coral); font: 600 var(--t-md) var(--f-head); }
.join-form { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 8px; }
.code-in { width: 100%; text-align: center; font: 700 38px var(--f-display); letter-spacing: .3em; padding: 14px 10px 14px calc(10px + .3em); text-transform: uppercase; border-radius: 18px; border: 2px solid var(--line2); background: rgba(16,24,40,.06); color: var(--ink); }
.code-in:focus { outline: none; border-color: var(--gold-ink); }
.code-in::placeholder { color: var(--dim2); }
.title .btn { margin-top: 14px; }
/* title hero: the logo floats on a lily pad while ripples spread */
.t-hero { position: relative; width: 230px; height: 150px; margin: 0 auto -4px; flex: none; }
.t-hero.sm { transform: scale(.82); margin: -14px auto -18px; }
.t-float { position: absolute; inset: 0; animation: bob 4.5s ease-in-out infinite; }
.t-pad { position: absolute; left: 50%; bottom: 6px; width: 210px; transform: translateX(-50%); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.t-hero .logo { position: absolute; left: 50%; bottom: 36px; width: 100px; transform: translateX(-50%); margin: 0; }
.t-rip { position: absolute; left: 50%; bottom: 4px; width: 210px; height: 76px; margin-left: -105px; border: 2px solid rgba(190, 230, 255, .3); border-radius: 50%; opacity: 0; animation: rip 4.2s ease-out infinite; }
.t-rip:nth-child(2) { animation-delay: 1.4s; } .t-rip:nth-child(3) { animation-delay: 2.8s; }
@keyframes rip { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-4px); } }
.t-chapter { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.t-chapter small, .cs-ch { font: 600 var(--t-xs) var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--green-d); }
.t-chapter b { font: 700 var(--t-2xl)/1.2 var(--f-display); letter-spacing: -.01em; }
.t-level { display: inline-flex; align-items: center; gap: 7px; background: rgba(var(--green-rgb), .14); color: var(--green-l); border: 1px solid rgba(var(--green-rgb), .4); border-radius: 999px; padding: 4px 12px 4px 8px; font: 600 var(--t-cap) var(--f-head); }
.t-level i { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(from 200deg, transparent 0 34deg, var(--green) 0); flex: none; }
.title .sub { margin-top: -4px; }
.t-go { max-width: 300px; }
.t-snd { display: inline-flex; align-items: center; gap: 7px; }
.t-snd .w { opacity: .3; } .t-snd.on .w { opacity: 1; }
/* a light sweep across the main call to action */
.btn.shine { position: relative; overflow: hidden; isolation: isolate; }
.btn.shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: shine 3.6s 1s ease-in-out infinite; }
@keyframes shine { 0% { left: -60%; } 40%, 100% { left: 130%; } }
.coins { position: absolute; inset: -40px; pointer-events: none; overflow: hidden; }
.coins i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE08A, var(--gold) 55%, var(--gold-d)); left: calc(var(--i) * 10% + 3%); bottom: -20px; opacity: .55; animation: rise 7s linear infinite; animation-delay: calc(var(--i) * -0.73s); }
@keyframes rise { to { transform: translateY(-110vh) rotate(540deg); } }
.msg h2 { font: 700 var(--t-3xl) var(--f-head); margin-top: 10px; }
.msg p { color: var(--dim); }
.toast-global { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: .3s; background: var(--gold); color: #0A1330; font: 700 var(--t-body) var(--f-head); padding: 12px 18px; border-radius: 14px; z-index: 80; }
.toast-global.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- character creator ---------- */
.cr { display: grid; grid-template-rows: auto minmax(200px, 38vh) 1fr auto; height: 100%; }
.cr-head { padding: 16px 18px 4px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
/* the presenter's "Lock in characters" countdown (title and character maker) */
.lock-in { flex: none; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--gold, #F2B33D); color: var(--navy, #213E8C); font: 700 var(--t-md)/1.2 var(--f-head); animation: lockpulse 1s ease-in-out infinite; }
.lock-in[hidden] { display: none; }
.title .lock-in { margin: 0 auto 10px; }
@keyframes lockpulse { 50% { transform: scale(1.06); } }
.cr-head small, .sv-head small, .hm small, .lb small, .rp-top small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .16em; color: var(--dim); }
.cr-head h2, .sv-head h2 { font: 700 var(--t-2xl) var(--f-head); margin-top: 2px; }
.cr-stage { position: relative; }
.cr-3d, .cr-flat { position: absolute; inset: 0; }
.cr-flat { display: grid; place-items: center; }
.cr-dice { position: absolute; right: 14px; bottom: 10px; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(var(--glass),.7); display: grid; place-items: center; cursor: pointer; }
.cr-rows { overflow-y: auto; padding: 6px 16px 10px; display: flex; flex-direction: column; gap: 12px; }
.cr-row small { display: block; font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; margin-bottom: 7px; }
.cr-opts { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.cr-opts::-webkit-scrollbar { display: none; }
.cr-opts.names { flex-wrap: wrap; }
.cr-opt { flex: none; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 13px; font: 600 var(--t-md) var(--f-head); cursor: pointer; min-height: 44px; }
.cr-opt.on { border-color: var(--green); background: var(--mint2); color: var(--green-d); }
.cr-opt.reroll { color: var(--blue-l); }
.cr-opt .sw { display: block; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }
.cr-opt:has(.sw) { padding: 6px; border-radius: 50%; min-height: 0; }
.cr-cta { padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(var(--glass),.95) 30%); }

/* ---------- survey: the moving-in checklist ---------- */
.sv { display: flex; flex-direction: column; height: 100%; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 14px; overflow-y: auto; }
.sv-boxes { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.sv-boxes i { width: 16px; height: 13px; border-radius: 3px; background: rgba(16,24,40,.1); transition: .3s; }
.sv-boxes i.done { background: var(--green); }
.sv-boxes i.now { background: var(--navy); transform: translateY(-2px); }
.sv-card { position: relative; background: #fff; color: var(--ink); border: 1px solid var(--line); border-top: 5px solid var(--green); border-radius: 16px; padding: 26px 20px 22px; min-height: 120px; display: grid; place-items: center; text-align: center;
  box-shadow: var(--shadow); transform: translateY(12px) scale(.97); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.3,1.3), opacity .25s; }
.sv-card.in { transform: none; opacity: 1; }
.sv-card.packed { transform: translateY(-30px) scale(.9) rotate(-3deg); opacity: 0; transition: .25s; }
.sv-tape { display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 38%; height: 18px; background: rgba(245, 230, 190, .75); border-radius: 0 0 4px 4px; }
.sv-q { font: 700 clamp(18px, 5vw, 22px)/1.3 var(--f-head); }
.sv-opts { display: flex; flex-direction: column; gap: 10px; }
.sv-grid { display: grid; gap: 8px; }
.sv-grid.ages { grid-template-columns: repeat(4, 1fr); }
.sv-grid.likert { grid-template-columns: repeat(5, 1fr); }
.sv-grid.pick { grid-template-columns: repeat(3, 1fr); }
.sv-grid.seven { grid-template-columns: repeat(7, 1fr); }
.sv-b { border: 1.5px solid var(--line2); background: #fff; box-shadow: var(--lift); border-radius: 14px; padding: 12px 6px; min-height: 52px; font: 700 var(--t-lg) var(--f-head); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: transform .1s, border-color .15s; }
.sv-b:active { transform: scale(.96); border-color: var(--green); background: var(--mint2); }
.sv-b small { font: 600 var(--t-xs)/1.2 var(--f-head); color: var(--dim); }
.sv-b.wide { flex-direction: row; justify-content: flex-start; padding: 14px 16px; font-size: var(--t-body); text-align: left; }
.sv-b.ghost { color: var(--dim); border-style: dashed; }
.sv-list { display: flex; flex-direction: column; gap: 8px; }
.sv-list.two { display: grid; grid-template-columns: 1fr 1fr; }
.sv-list.two .sv-b.wide { font-size: var(--t-md); padding: 12px; }
.sv-skip { align-self: center; background: none; border: 0; color: var(--dim); font: 600 var(--t-md) var(--f-head); padding: 10px; cursor: pointer; text-decoration: underline; }
.sv-ends { display: flex; justify-content: space-between; color: var(--dim); font-size: var(--t-sm); margin-top: 4px; }
.sv-note { color: var(--dim2); font-size: var(--t-cap); text-align: center; margin-top: auto; }

/* ---------- lobby, prologue, rooms ---------- */
.room3d { position: absolute; inset: 0; }
.room3d .cf-flat { position: absolute; inset: 0; display: grid; place-items: center; }
.lb { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; pointer-events: none; }
.lb-card { align-self: flex-start; display: flex; gap: 10px; align-items: center; background: rgba(var(--glass),.82); border: 1px solid var(--line2); border-radius: 18px; padding: 8px 16px 8px 8px; backdrop-filter: blur(8px); }
.lb-av { width: 56px; height: 56px; border-radius: 14px; background: #1B2B66; display: grid; place-items: center; overflow: hidden; }
.lb-card b { display: block; font: 700 var(--t-lg) var(--f-head); }
.lb-bottom { background: linear-gradient(transparent, rgba(var(--glass),.95) 25%); margin: 0 -16px -16px; padding: 60px 20px calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.lb-bottom h2 { font: 700 var(--t-2xl) var(--f-head); }
.lb-bottom p { color: var(--dim); margin-top: 4px; }
.lb-tip { color: var(--gold-ink) !important; font: 600 var(--t-md) var(--f-body); margin-top: 14px !important; min-height: 2.6em; }
.lb-tip.in { animation: fadeUp .5s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }
.pr { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 20px calc(30px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent 35%, rgba(var(--glass),.94) 70%); pointer-events: none; }
.pr-day { font: 600 var(--t-sm) var(--f-display); letter-spacing: .2em; color: var(--gold-ink); }
.pr-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pr-line { font: 700 clamp(20px, 5.8vw, 26px)/1.25 var(--f-head); opacity: 0; transform: translateY(10px); transition: .6s; }
.pr-line.in { opacity: 1; transform: none; }
.pr-line:not(:last-child) { color: var(--dim); font-size: var(--t-lg); }
.pr-keys { position: absolute; top: 18%; right: 18%; opacity: 0; }
.pr.done .pr-keys { animation: keys 1.4s forwards; }
.pr-keys .ic { width: 64px; height: 64px; }
@keyframes keys { 0% { opacity: 0; transform: translateY(-60px) rotate(-30deg); } 60% { opacity: 1; transform: translateY(8px) rotate(10deg); } 100% { opacity: 1; transform: none; } }

/* where to live */
.hm { padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; height: 100%; }
.hm h2 { font: 700 var(--t-3xl) var(--f-head); margin-top: 2px; }
.hm header p { color: var(--dim); margin-top: 4px; }
.hm-cards { display: flex; flex-direction: column; gap: 10px; }
.hm-card { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-align: left; border: 2px solid var(--line2); background: var(--surface); box-shadow: var(--lift); border-radius: 18px; padding: 14px; cursor: pointer; transition: transform .1s, border-color .15s; }
.hm-card:active { transform: scale(.98); border-color: var(--gold-ink); }
.hm-card .ic { width: 56px; height: 56px; }
.hm-card b { display: block; font: 700 var(--t-lg) var(--f-head); }
.hm-card .rent { display: block; font: 700 var(--t-xl) var(--f-head); color: var(--gold-ink); }
.hm-card small { display: block; color: var(--dim); font-size: var(--t-cap); margin-top: 2px; }
.hm-card .pct { color: var(--ink); font-weight: 700; }
.hm-foot { color: var(--dim2); font-size: var(--t-sm); text-align: center; }

/* ---------- Cash Flow ---------- */
.cf { position: relative; display: grid; grid-template-rows: 50px auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100%; overflow: hidden; }
.cf > * { min-width: 0; }
.cf-hud { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 12px 9px; border-bottom: 1px solid var(--line); background: #fff; min-width: 0; }
.cf-day { flex: none; }
.cf-snd { flex: none; }
.cf-day { display: flex; align-items: baseline; }
.cf-day b { font: 700 var(--t-lg) var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cf-day b small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-right: 5px; vertical-align: 3px; }
.cf-day.on b { font-size: var(--t-2xl); }
.cf-day span { color: var(--dim); font: 600 var(--t-sm) var(--f-head); margin-left: 6px; }
.cf-track { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 2px; background: rgba(16,24,40,.09); }
.cf-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--green-d), var(--green)); box-shadow: 0 0 8px rgba(var(--green-rgb), .7); transition: width .3s linear; }
.cf-track-fill::after { content: ""; position: absolute; right: -3.5px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px rgba(var(--green-rgb), .9); }
.cf-track-pay { position: absolute; top: -2.5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE08A, var(--gold) 55%, var(--gold-d)); box-shadow: 0 0 0 1.5px rgba(var(--glass), .9); }
.cf-next.pay::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE08A, var(--gold) 55%, var(--gold-d)); }
.cf-next { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 600 var(--t-cap) var(--f-head); color: var(--navy); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.cf-snd { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--dim2); display: grid; place-items: center; cursor: pointer; }
.cf-snd .w { opacity: .25; }
.cf-snd.on { color: var(--green); border-color: rgba(var(--green-rgb),.5); }
.cf-snd.on .w { opacity: 1; }
.cf-top { display: flex; flex-direction: column; min-height: 0; }
.cf-stage { position: relative; height: clamp(130px, 24vh, 230px); overflow: hidden; background: linear-gradient(#EEF2F8, #E4EAF3); }
.cf-3d { position: absolute; inset: 0; }
.cf-flat { display: grid; place-items: center; height: 100%; }
.cf-mood { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 8px; background: rgba(var(--glass),.78); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 12px 4px 4px; backdrop-filter: blur(6px); transition: border-color .4s; }
.cf-mood span { font: 700 var(--t-md)/1.1 var(--f-head); }
.cf-mood small { display: block; font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim); }
.cf-mood[data-m="down"] { border-color: var(--coral); }
.cf-mood[data-m="up"] { border-color: rgba(var(--green-rgb),.6); }
.face { width: 28px; height: 28px; border-radius: 50%; display: block; background: #EAF0FC center/100% no-repeat; }
.f-joy { background-color: #4CC173; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10 Q8.5 8 10 10 M14 10 Q15.5 8 17 10' stroke='%231A1320' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7.5 14 Q12 19.5 16.5 14 Z' fill='%231A1320'/%3E%3C/svg%3E"); }
.f-happy { background-color: #9BE0B0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.8' cy='10' r='1.3' fill='%231A1320'/%3E%3Ccircle cx='15.2' cy='10' r='1.3' fill='%231A1320'/%3E%3Cpath d='M8.5 14.5 Q12 18 15.5 14.5' stroke='%231A1320' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.f-neutral { background-color: #C9D3EE; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.8' cy='10' r='1.3' fill='%231A1320'/%3E%3Ccircle cx='15.2' cy='10' r='1.3' fill='%231A1320'/%3E%3Cpath d='M9 15.5 L15 15.5' stroke='%231A1320' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.f-stress { background-color: #F7A95C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.8' cy='10' r='1.3' fill='%231A1320'/%3E%3Ccircle cx='15.2' cy='10' r='1.3' fill='%231A1320'/%3E%3Cpath d='M8 16 L10 14.5 L12 16 L14 14.5 L16 16' stroke='%231A1320' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.f-sad { background-color: #FF7A6E; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.8' cy='10.5' r='1.3' fill='%231A1320'/%3E%3Ccircle cx='15.2' cy='10.5' r='1.3' fill='%231A1320'/%3E%3Cpath d='M8.5 17 Q12 13.5 15.5 17' stroke='%231A1320' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cf-bubble { position: absolute; right: 12px; top: 12px; max-width: 55%; background: #fff; color: #0A1330; font: 700 var(--t-md)/1.3 var(--f-head); padding: 8px 12px; border-radius: 14px 14px 4px 14px; opacity: 0; transform: translateY(-6px) scale(.9); transition: .25s; pointer-events: none; }
.cf-bubble.on { opacity: 1; transform: none; }
.cf-banner { position: absolute; inset: auto 8px 8px 8px; z-index: 3; display: flex; gap: 10px; align-items: center; background: rgba(var(--glass),.92); border: 2px solid var(--gold); border-radius: 14px; padding: 6px 12px 6px 8px; transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .4s cubic-bezier(.2,.9,.3,1.2), visibility 0s .4s; }
.cf-banner.on { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.2,.9,.3,1.2); }
.cf-banner .ic { width: 34px; height: 34px; flex: none; }
.cf-banner b { font: 700 var(--t-md)/1.2 var(--f-head); color: var(--gold-ink); }
.cf-banner p { font-size: var(--t-sm); color: var(--ink); line-height: 1.3; }
.cf-paused { position: absolute; inset: 50px 0 0; z-index: 38; display: grid; place-items: center; background: rgba(6,11,30,.62); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: .3s; }
.cf-paused > div { background: var(--card); border: 1px solid var(--line2); border-radius: 18px; padding: 16px 22px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.cf-paused b { display: block; font: 700 var(--t-2xl) var(--f-display); letter-spacing: .08em; }
.cf-paused span { color: var(--dim); font: 600 var(--t-md) var(--f-body); }
.cf-paused.on { opacity: 1; pointer-events: auto; }
.cf-traybox { position: relative; min-width: 0; }
.cf-tray { display: flex; gap: 8px; padding: 8px 10px; overflow-x: auto; min-height: 82px; border-bottom: 1px solid var(--line); background: rgba(var(--glass),.35); scrollbar-width: none; align-items: stretch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.cf-more { position: absolute; right: 0; top: 0; bottom: 1px; width: 46px; display: grid; place-items: center; padding-left: 10px; background: linear-gradient(90deg, transparent, rgba(var(--glass),.95) 55%); color: var(--gold-ink); font: 700 var(--t-md) var(--f-head); pointer-events: none; opacity: 0; transition: opacity .25s; }
.cf-more.on { opacity: 1; }
.cf-tray::-webkit-scrollbar { display: none; }
.cf-tray-empty { margin: auto 0; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--dim2); font: 600 var(--t-cap) var(--f-head); }
.cm-h { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim2); writing-mode: vertical-rl; transform: rotate(180deg); flex: none; }
.cm { flex: none; display: grid; grid-template-columns: 30px auto; column-gap: 7px; align-items: center; background: rgba(16,24,40,.04); border: 1px dashed var(--line2); border-radius: 12px; padding: 6px 10px 6px 6px; }
.cm .ic { grid-row: span 2; width: 30px; height: 30px; opacity: .85; }
.cm b { font: 600 var(--t-cap) var(--f-head); color: var(--ink); white-space: nowrap; }
.cm small { font: 600 var(--t-xs) var(--f-head); color: var(--dim); }
.cm.leak { border-color: rgba(127,199,255,.45); }
.cm.pay { border-color: rgba(242,179,61,.45); }
.cm.pay small { color: var(--gold-ink); }
.cm-q { color: var(--dim2); }
.cf-card { position: relative; flex: none; width: min(214px, 64vw); display: flex; gap: 10px; align-items: center; background: var(--surface); box-shadow: var(--lift); border: 2px solid var(--line2); border-radius: 16px; padding: 8px 34px 8px 8px; cursor: grab; touch-action: pan-x; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; scroll-snap-align: start; scroll-margin-left: 10px;
  transform: translateX(-30px) scale(.9); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .3s, border-color .2s; }
.cf-card.in { transform: none; opacity: 1; }
.cf-card.in .cf-card-ic .ic { animation: icPop .5s .12s cubic-bezier(.2,.9,.3,1.6) both; }
@keyframes icPop { from { transform: scale(.3) rotate(-20deg); } }
.cf-card.k-emergency.in { animation: alarm .9s .1s 2; }
@keyframes alarm { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,96,0); } 30% { box-shadow: 0 0 0 5px rgba(255,107,96,.55); } }
.cf-card.hurry { animation: hurry .7s ease-in-out infinite; }
.cf-card.hurry .cf-ring { background: conic-gradient(var(--coral) calc(var(--p, 100) * 1%), rgba(16,24,40,.08) 0); }
@keyframes hurry { 50% { transform: scale(.97); border-color: var(--coral); } }
.cf-card.used, .cf-card.skip { animation: none; }
.cf-card.lifted { opacity: .35; }
/* tapped: picked up, waiting for a tap on a tank */
.cf-card.picked { border-color: var(--gold, #F2B33D); box-shadow: 0 0 0 3px rgba(242, 179, 61, .45), var(--lift); transform: translateY(-3px); }
.cf-card.used { transform: translateY(40px) scale(.6); opacity: 0; }
.cf-card.skip { transform: translateY(-30px) scale(.8); opacity: 0; }
.cf-card.shake { animation: shake .4s; }
.cf-card.nudge { animation: nudge .6s; }
@keyframes nudge { 30% { transform: translateY(10px); } 60% { transform: translateY(-3px); } }
.cf-card.hint { animation: hint 1.4s ease-in-out infinite; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
@keyframes hint { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.cf-card.ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: .95; box-shadow: 0 20px 40px rgba(0,0,0,.5); transition: none; }
.cf-card.k-want { border-color: rgba(242,179,61,.45); }
.cf-card.k-emergency { border-color: var(--coral); background: #FEF3F2; }
.cf-card.k-income { border-color: var(--green); background: var(--mint); }
.cf-card.k-free { border-color: #7FC7FF; }
.cf-card.k-social { border-color: #F07FA8; }
.cf-card-ic { position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; }
.cf-card-ic .ic { width: 40px; height: 40px; position: relative; z-index: 1; }
.cf-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p, 100) * 1%), rgba(16,24,40,.08) 0); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); }
.k-emergency .cf-ring { background: conic-gradient(var(--coral) calc(var(--p, 100) * 1%), rgba(16,24,40,.08) 0); }
.k-income .cf-ring { background: conic-gradient(var(--green) calc(var(--p, 100) * 1%), rgba(16,24,40,.08) 0); }
.cf-card-tx { min-width: 0; }
.cf-card-tx small { display: block; font: 600 var(--t-xs) var(--f-display); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }
.cf-card-tx b { display: block; font: 700 var(--t-md)/1.2 var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-card-row { display: flex; gap: 5px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.cf-card-row .cost { font: 700 var(--t-md) var(--f-head); color: var(--gold-ink); }
.k-emergency .cost { color: var(--coral); }
.k-income .cost { color: var(--green); }
.chip { font: 600 var(--t-xs) var(--f-head); padding: 2px 6px; border-radius: 6px; }
.chip.up { background: rgba(var(--green-rgb),.16); color: var(--green-l); }
.chip.down { background: rgba(255,107,96,.16); color: var(--coral-l); }
.cf-skip { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 9px; background: rgba(16,24,40,.08); color: var(--dim); display: grid; place-items: center; cursor: pointer; }
.cf-skip:active { background: rgba(16,24,40,.16); color: var(--ink); }
.cf-skip::after { content: ""; position: absolute; inset: -8px -6px -10px -10px; }
.cf-flow { position: relative; min-height: 330px; }
.cf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.cf-coach { position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 8px; border: 1px solid var(--line); border-left: 4px solid var(--green); margin: 0 auto; max-width: 440px; display: flex; gap: 10px; align-items: center; background: #fff; color: #0A1330; border-radius: 16px; padding: 7px 8px 7px 12px; box-shadow: 0 12px 30px rgba(0,0,0,.4); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s; }
.cf-coach.on { opacity: 1; transform: none; pointer-events: auto; }
.cf-coach p { flex: 1; font: 600 var(--t-cap)/1.3 var(--f-body); }
.cf-coach-x { flex: none; align-self: center; border: 0; background: var(--navy); color: #fff; font: 600 var(--t-cap) var(--f-head); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.cf-mpop { position: absolute; left: 22px; top: 50px; z-index: 2; font: 700 var(--t-body) var(--f-head); padding: 2px 9px; border-radius: 999px; pointer-events: none; animation: mpop 1.5s ease-out forwards; }
.cf-mpop.up { background: rgba(var(--green-rgb),.95); color: #06231A; }
.cf-mpop.down { background: rgba(255,107,96,.95); color: #2A0806; }
@keyframes mpop { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
.cf-toast { position: absolute; left: 50%; top: 58px; z-index: 20; transform: translate(-50%, -12px); width: min(420px, calc(100% - 20px)); background: rgba(var(--glass),.96); border: 1px solid var(--line2); border-radius: 14px; padding: 10px 14px; font: 600 var(--t-md)/1.4 var(--f-head); opacity: 0; pointer-events: none; transition: .3s; }
.cf-toast.on { opacity: 1; transform: translate(-50%, 0); }
.cf-toast.bad { border-color: var(--coral); }
.cf-toast b.red { color: var(--coral); }
.cf-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 30; background: radial-gradient(circle at 50% 55%, rgba(var(--glass), .55), transparent 60%); }
.cf-count.on { opacity: 1; }
.cf-count span { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; font: 700 84px/1 var(--f-display); color: var(--gold-ink); background: radial-gradient(circle, rgba(var(--glass), .85) 58%, transparent 60%); box-shadow: 0 0 0 5px rgba(242, 179, 61, .9), 0 0 50px rgba(242, 179, 61, .35); text-shadow: 0 6px 24px rgba(0, 0, 0, .5); animation: countIn .9s cubic-bezier(.2, .9, .3, 1.3) both; }
.cf-count span.go { width: auto; height: auto; padding: 18px 34px; border-radius: 999px; font-size: 64px; color: #0A1A3E; background: var(--green); box-shadow: 0 6px 0 var(--green-d), 0 0 60px rgba(var(--green-rgb), .55); text-shadow: none; animation: goIn .75s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes countIn { 0% { transform: scale(1.6); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 88% { opacity: 1; } 100% { transform: scale(.9); opacity: .4; } }
@keyframes goIn { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 30% { transform: scale(1.08); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
/* Chapter 1 start card (once, at the start of set-up) */
.cf-splash { position: absolute; inset: 0; z-index: 45; display: grid; place-items: start center; overflow-y: auto; overscroll-behavior: contain; padding: 18px; pointer-events: none; visibility: hidden;
  background: var(--pads-low) left -40px bottom -30px / 330px auto no-repeat, linear-gradient(180deg, #FFFFFF, var(--mint)); opacity: 0; transition: opacity .45s, visibility 0s .45s; }
.cf-splash.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s; }
.cs-in { width: min(400px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: auto 0; }   /* centred, and scrolls from the top on a short phone */
@media (max-height: 640px) { .cf-splash { padding: 12px 14px; } .cs-in { gap: 7px; } .cs-in h2 { font-size: 34px; } .cs-how { margin: 2px 0 4px; gap: 6px; } .cs-how li { padding: 7px 10px; } }
.cs-in h2 { font: 700 clamp(38px, 12vw, 52px)/1 var(--f-display); letter-spacing: -.02em; }
.cs-goal { font: 500 var(--t-body)/1.5 var(--f-body); color: var(--dim); }
.cs-how { list-style: none; margin: 6px 0 8px; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; counter-reset: how; text-align: left; }
.cs-how li { counter-increment: how; display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; align-items: center; background: #fff; box-shadow: var(--lift); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 16px; padding: 10px 12px; }
.cs-how li::before { content: counter(how); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #0A1A3E; display: grid; place-items: center; font: 700 var(--t-md) var(--f-display); }
.cs-how li.red::before { background: var(--coral); color: #fff; }
.cs-how li.red { border-left-color: var(--coral); }
.cs-how b { font: 700 var(--t-body) var(--f-head); } .cs-how span { color: var(--dim); font: 600 var(--t-cap)/1.35 var(--f-head); }
.cf-splash .cs-in > * { opacity: 0; transform: translateY(14px); }
.cf-splash.on .cs-in > * { animation: csUp .5s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.cf-splash.on .cs-in > :nth-child(2) { animation-delay: .08s; } .cf-splash.on .cs-in > :nth-child(3) { animation-delay: .16s; } .cf-splash.on .cs-in > :nth-child(4) { animation-delay: .26s; } .cf-splash.on .cs-in > :nth-child(5) { animation-delay: .38s; } .cf-splash.on .cs-in > :nth-child(6) { animation-delay: .6s; }
.cf-splash.off .cs-in { transform: scale(.96); transition: transform .4s; }
@keyframes csUp { to { opacity: 1; transform: none; } }

/* month-end report */
.cf-report { position: absolute; inset: 0; z-index: 40; background: rgba(16,24,40,.45); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 14px; opacity: 0; pointer-events: none; transition: opacity .5s; }
.cf-report.on { opacity: 1; pointer-events: auto; }
.rp-in { width: min(440px, 100%); max-height: 100%; overflow-y: auto; background: #fff; border: 1px solid var(--line2); border-radius: 24px; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg); animation: rpIn .7s cubic-bezier(.2,.9,.3,1.2); }
@keyframes rpIn { from { transform: translateY(40px) scale(.95); opacity: 0; } }
.rp-top h2 { font: 700 var(--t-2xl)/1.2 var(--f-head); margin-top: 4px; }
.rp-hero { text-align: center; }
.rp-score { font: 700 58px/1 var(--f-display); color: var(--navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-hero small, .rp-stats small { color: var(--dim); font: 600 var(--t-sm) var(--f-head); }
.rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.rp-stats div { background: rgba(16,24,40,.05); border-radius: 12px; padding: 10px 4px; }
.rp-stats b { display: block; font: 700 var(--t-lg) var(--f-head); }
.rp-stats .bad b { color: var(--coral); }
.rp-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rp-badges span { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--green-rgb),.14); color: var(--green-l); font: 600 var(--t-cap) var(--f-head); border-radius: 999px; padding: 4px 10px 4px 4px; }
.rp-badges .ic { width: 22px; height: 22px; }
.rp-rows { list-style: none; margin: 0; padding: 0; }
.rp-rows li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font: 600 var(--t-md) var(--f-head); transition: opacity .3s, transform .3s, background-color .6s; }
.rp-rows li.hit { background-color: rgba(255,107,96,.14); }
.rp-in .pre { opacity: 0; transform: translateY(8px); }
.rp-stats div { transition: opacity .3s, transform .35s cubic-bezier(.2,.9,.3,1.4); }
.rp-stats div.pre { transform: scale(.7); }
.rp-badges span { transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.rp-badges span.pre { transform: scale(1.8) rotate(-8deg); }
.rp-split { transition: opacity .2s, transform .7s cubic-bezier(.2,.9,.3,1); transform-origin: left; }
.rp-split.pre { transform: scaleX(0); opacity: 1; }
.rp-score.tick { animation: tick .25s; }
@keyframes tick { 40% { transform: scale(1.08); } }
.rp-next { transition: opacity .4s, transform .4s; background: rgba(242,179,61,.1); border: 1px solid rgba(242,179,61,.4); border-radius: 14px; padding: 10px 12px; }
.rp-next small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--gold-ink); }
.rp-next ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.rp-next li { font: 600 var(--t-md)/1.4 var(--f-head); }
.rp-rows .pos { color: var(--green-l); } .rp-rows .neg { color: var(--coral); }
.rp-sec small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim); }
.rp-split { display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin-top: 8px; gap: 2px; }
.rp-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font: 600 var(--t-sm) var(--f-head); color: var(--dim); }
.rp-key i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.rp-sec p { color: var(--dim); font-size: var(--t-cap); margin-top: 8px; }
/* plan vs actual: one row per tank */
.rp-plan { width: 100%; border-collapse: collapse; margin-top: 10px; font: 600 var(--t-sm)/1.2 var(--f-head); font-variant-numeric: tabular-nums; }
.rp-plan th, .rp-plan td { padding: 5px 4px; text-align: right; white-space: nowrap; }
.rp-plan thead th { font: 600 var(--t-xs) var(--f-display); letter-spacing: .06em; color: var(--dim); }
.rp-plan tbody th { text-align: left; }
.rp-plan tbody th i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.rp-plan tbody tr + tr { border-top: 1px solid var(--line); }
.rp-plan td { color: var(--dim); }
.rp-plan td b { color: var(--ink); }
.rp-plan td.mv { color: var(--coral, #E5483D); }
.rp-look { text-align: center; font: 700 var(--t-body) var(--f-head); color: var(--gold-ink); }

/* recap */
.recap { margin: auto; width: min(420px, 100%); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.rc-card { background: var(--pads-high) right -20px top -14px / 150px auto no-repeat, linear-gradient(160deg, #213E8C, #0F2352 60%, #0C3F4E); border: 1px solid var(--line2); border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.rc-top { display: flex; gap: 14px; align-items: center; }
.rc-av { width: 84px; height: 84px; border-radius: 20px; background: #0A1330; display: grid; place-items: center; }
.rc-top small, .rc-next small, .rc-pledge small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim); display: block; }
.rc-top h2 { font: 700 var(--t-2xl) var(--f-head); }
.rc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.rc-stats b { display: block; font: 700 var(--t-xl) var(--f-head); color: var(--gold-ink); }
.rc-stats small { color: var(--dim); font-size: var(--t-sm); }
.rc-lesson { font: 600 var(--t-body)/1.45 var(--f-head); }
.rc-lesson small, .rc-mine small { display: block; font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim); margin-bottom: 3px; }
.rc-mine { font: 600 var(--t-md)/1.45 var(--f-head); background: rgba(242,179,61,.1); border: 1px solid rgba(242,179,61,.35); border-radius: 14px; padding: 10px 12px; }
.rc-mine small { color: var(--gold-ink); }
.rc-stats .bad b { color: var(--coral); }
.rc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-badges span { display: inline-flex; align-items: center; gap: 5px; background: rgba(var(--green-rgb),.14); color: var(--green-l); font: 600 var(--t-sm) var(--f-head); border-radius: 999px; padding: 3px 9px 3px 3px; }
.rc-badges .ic { width: 20px; height: 20px; }
.rc-split { display: flex; gap: 2px; height: 22px; border-radius: 8px; overflow: hidden; }
.rc-split i { display: grid; place-items: center; font: 600 var(--t-xs) var(--f-head); font-style: normal; color: #0A1330; white-space: nowrap; overflow: hidden; }
.rc-pledge { background: rgba(16,24,40,.06); border-radius: 14px; padding: 10px 12px; font: 700 var(--t-body) var(--f-head); }
.rc-next { border-top: 1px dashed var(--line2); padding-top: 12px; }
.rc-next b { display: block; font: 700 var(--t-body) var(--f-head); color: var(--coral); margin-top: 2px; }
.rc-next span { color: var(--dim); font-size: var(--t-md); }
.rc-bd { border-top: 1px dashed var(--line2); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.rc-bd > small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim); }
.rc-bd > b { font: 700 var(--t-body) var(--f-head); }
.rc-class { font: 600 var(--t-cap) var(--f-head); color: var(--dim); }
/* the compact recap (two or three chapters): one row per chapter */
.rc-rows { display: flex; flex-direction: column; gap: 8px; }
.rc-row { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; row-gap: 1px; align-items: baseline; background: rgba(255,255,255,.08); border-radius: 14px; padding: 10px 12px; }
.rc-row small { grid-row: span 2; align-self: center; font: 600 var(--t-xs) var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--mint-on-navy, #7FE0A1); }
.rc-row b { font: 700 var(--t-xl)/1.2 var(--f-head); color: #fff; }
.rc-row span { font: 400 var(--t-md)/1.35 var(--f-body); color: rgba(255,255,255,.85); }
.rc-row.bad span { color: #FFB3AB; }
.rc-end { font: 700 var(--t-lg) var(--f-head); color: var(--mint-on-navy, #7FE0A1); text-align: center; }
.rc-foot { text-align: center; color: var(--dim2); font-size: var(--t-cap); }

/* wide screens and Chromebooks: the game goes side by side */
@media (min-width: 860px) and (min-aspect-ratio: 5/4) {
  .cf { grid-template-rows: 54px 1fr; grid-template-columns: minmax(320px, 40%) 1fr; }
  .cf-hud { grid-column: 1 / -1; }
  .cf-top { grid-row: 2; border-right: 1px solid var(--line); }
  .cf-stage { height: auto; flex: 1; }
  .cf-tray { flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: 45%; min-height: 120px; }
  .cf-card { width: auto; }
  .cf-flow { grid-row: 2; }
  .cr { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; }
  .cr-head { grid-column: 1 / -1; }
  .cr-stage { grid-row: 2 / 4; }
  .sv, .hm { width: min(680px, 100%); margin: 0 auto; }
}

/* ---------- presenter ---------- */
body.hostpage { background: var(--bg); }
.setup { min-height: 100%; display: flex; flex-direction: column; padding: 18px; gap: 18px; }
.setup header, .hh { display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 34px; margin: 0; filter: none; }
.brand b { font: 700 var(--t-body) var(--f-display); display: block; color: var(--navy); }
.brand span { color: var(--dim); font: 600 var(--t-sm) var(--f-head); }
.tag { font: 600 var(--t-sm) var(--f-head); border-radius: 999px; padding: 5px 10px; background: rgba(var(--green-rgb),.14); color: var(--green-l); }
.tag.warn { background: rgba(242,179,61,.14); color: var(--gold-ink); }
.setup-card { width: min(640px, 100%); margin: 20px auto; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.setup-card h1 { font: 700 var(--t-3xl) var(--f-head); }
.resume { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: rgba(242,179,61,.1); border: 1px solid rgba(242,179,61,.4); border-radius: 16px; padding: 14px; }
.resume b { display: block; } .resume span { color: var(--dim); font-size: var(--t-md); }
.fl { display: flex; flex-direction: column; gap: 8px; }
.fl > span { font: 600 var(--t-xs) var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
input.in { font: 600 var(--t-body) var(--f-head); background: rgba(16,24,40,.06); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; color: var(--ink); }
input.in.code { text-transform: uppercase; letter-spacing: .2em; width: 180px; }
.lv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lv { text-align: left; border: 2px solid var(--line2); background: rgba(16,24,40,.04); border-radius: 16px; padding: 12px; cursor: pointer; }
.lv.on { border-color: var(--green); background: var(--mint2); }
.lv b { display: block; font: 700 var(--t-lg) var(--f-head); } .lv span, .lv small { display: block; color: var(--dim); font-size: var(--t-cap); }
.seg { display: inline-flex; background: rgba(16,24,40,.05); border-radius: 12px; padding: 4px; gap: 4px; align-self: flex-start; }
.seg button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font: 600 var(--t-md) var(--f-head); color: var(--dim); cursor: pointer; }
.seg button.on { background: var(--green); color: #fff; }
.more summary { cursor: pointer; color: var(--dim); font: 600 var(--t-md) var(--f-head); }
.more[open] { display: flex; flex-direction: column; gap: 14px; }
.setup-foot { text-align: center; color: var(--dim); }
.host { display: flex; flex-direction: column; min-height: 100vh; }
.hh { padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; background: rgba(var(--glass),.94); backdrop-filter: blur(8px); z-index: 10; }
.hc-code small, .hc-count small { display: block; font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim); }
.hc-code b { font: 700 var(--t-3xl)/1 var(--f-display); letter-spacing: .14em; color: var(--navy); }
.hc-count b { font: 700 var(--t-3xl)/1 var(--f-head); }
.hc-net { font: 600 var(--t-cap) var(--f-head); color: var(--gold-ink); }
.hh-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.hgrid { display: grid; grid-template-columns: 290px 1fr 330px; gap: 0; flex: 1; }
.hcol { padding: 18px; border-right: 1px solid var(--line); min-width: 0; }
.hcol:last-child { border-right: 0; }
.hcol h3 { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 18px 0 10px; }
.hcol h3:first-child { margin-top: 0; }
.hs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hs button { width: 100%; text-align: left; border: 1px solid var(--line); background: rgba(16,24,40,.03); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.hs b { display: block; font: 700 var(--t-md) var(--f-head); }
.hs small { display: block; color: var(--dim); font-size: var(--t-cap); margin-top: 4px; line-height: 1.4; }
.hs .done button { opacity: .55; }
.hs .done b::before { content: "✓ "; color: var(--green); }
.hs .now button { border-color: var(--green); background: var(--mint); box-shadow: inset 3px 0 0 var(--green); }
.hs .later { opacity: .4; padding: 8px 12px; } .hs .later b { font: 700 var(--t-md) var(--f-head); }
.hp { display: flex; flex-direction: column; gap: 16px; }
.hp-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.hp-top small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim); }
.hp-top h2 { font: 700 var(--t-3xl) var(--f-head); }
.hp-go { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.hp-lock { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hp-lock .hint { margin: 0; }
.hp-intro .hp-auto { display: flex; gap: 8px; align-items: center; font-size: var(--t-md); color: var(--dim); cursor: pointer; }
.hp-intro .hp-auto input { accent-color: var(--green, #30AE58); width: 18px; height: 18px; }
.stat { background: var(--surface); box-shadow: var(--lift); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.stat b { display: block; font: 700 var(--t-2xl) var(--f-head); font-variant-numeric: tabular-nums; }
.stat small { color: var(--dim); font-size: var(--t-cap); }
.stat.red b { color: var(--coral); }
.stat.good b { color: var(--green-d); }
.stat.done { opacity: .55; }
.hp-cores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hp-month { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.hp-month .day small { display: block; font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; color: var(--dim); }
.hp-month .day b { font: 700 40px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.hp-month .btn { margin-left: auto; }
.hp-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ev { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line2); background: var(--card); border-radius: 14px; padding: 10px; cursor: pointer; }
.ev img { width: 40px; height: 40px; }
.ev b { display: block; font: 700 var(--t-md) var(--f-head); }
.ev small { display: block; color: var(--dim); font-size: var(--t-sm); line-height: 1.35; }
.ev:hover:not(:disabled) { border-color: var(--gold-ink); }
.ev:disabled { opacity: .45; cursor: default; }
.ev.fired { border-style: dashed; }
.hint { color: var(--dim); font-size: var(--t-md); }
.switch { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font: 600 var(--t-md) var(--f-head); }
.switch input { width: 18px; height: 18px; accent-color: var(--gold-ink); }
.switch.inline { margin-left: 6px; }
.hp-news { background: #F6F3EC; color: #1A1A1A; border-radius: 14px; padding: 14px; font-family: Georgia, serif; }
.hp-news small { font: 600 var(--t-xs) Georgia, serif; letter-spacing: .18em; }
.hp-news b { display: block; font: 700 var(--t-2xl)/1.15 Georgia, serif; margin-top: 4px; }
.hp-news p { color: #444; margin-top: 4px; }
.hp-top5 { margin: 0; padding-left: 20px; }
.hp-top5 li { display: flex; gap: 10px; align-items: center; padding: 4px 0; }
.hp-top5 li span:last-child { margin-left: auto; font: 700 var(--t-body) var(--f-head); color: var(--gold-ink); }
.hf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.hf li { font-size: var(--t-md); padding: 6px 10px; border-radius: 8px; background: rgba(16,24,40,.03); }
.hf li.red { color: var(--coral-l); } .hf li.ev { color: var(--gold-ink); }
.hn, .hpl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hn li, .hpl-list li { display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; }
.hn li { border-color: rgba(242,179,61,.45); }
.hn small, .hpl-list small { grid-column: 2; color: var(--dim); font-size: var(--t-sm); }
.hpl-list li.off { opacity: .5; }
.hpl-list b, .hn b { font: 700 var(--t-md) var(--f-head); }
.pl-act { grid-column: 1 / -1; display: none; gap: 6px; }
.hpl-list li:hover .pl-act, .hpl-list li:focus-within .pl-act { display: flex; }
@media (hover: none) { .pl-act { display: flex; } }   /* a touchscreen laptop cannot hover */
.pl-act button { border: 1px solid var(--line2); background: none; border-radius: 8px; padding: 4px 8px; font: 600 var(--t-sm) var(--f-head); color: var(--dim); cursor: pointer; }
/* presenter controls: the clock card (time, skip ahead, speed, offers, restart), the big screen and players cards,
   the Skyline setting and the shortcuts */
.hp-month.hk { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.hk-top { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.hk-top .day { min-width: 130px; }
.hk-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.hk-badge { font: 600 var(--t-sm) var(--f-head); color: var(--navy); background: var(--blue-soft); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.hk-badge.gold { background: rgba(242, 179, 61, .16); color: var(--gold-ink); }
.hk-badge.warn { background: rgba(229, 72, 61, .1); color: var(--coral-l); }
.hk-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 26px; padding: 12px 16px; border-top: 1px solid var(--line); }
.hk-grp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hk-lab { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.hk-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.hk-b { border: 1.5px solid var(--line2); background: #fff; color: var(--navy); border-radius: 999px; padding: 7px 14px; font: 600 var(--t-md) var(--f-head); cursor: pointer; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.hk-b:hover:not(:disabled) { border-color: var(--navy); background: var(--blue-soft); }
.hk-b:disabled { opacity: .4; cursor: not-allowed; }
.hk-b.end { color: var(--coral-l); }
.hk-b.end:hover:not(:disabled) { border-color: var(--coral); background: rgba(229, 72, 61, .06); }
.hk-seg { padding: 3px; gap: 2px; }
.hk-seg button { padding: 6px 11px; font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.hk-offer { display: flex; flex-direction: column; align-items: flex-start; border-radius: 12px; padding: 4px 12px; line-height: 1.25; }
.hk-offer b { font: 600 var(--t-cap) var(--f-head); }
.hk-offer small { font: 600 var(--t-xs) var(--f-head); color: var(--dim); }
.hk-offer.ready { border-color: var(--gold); background: rgba(242, 179, 61, .1); }
.hk-offer.ready small { color: var(--gold-ink); }
.hk-offer.flying:disabled { opacity: 1; border-style: dashed; border-color: var(--gold); cursor: default; }
.hk-offer.flying small { color: var(--gold-ink); }
.hk-foot { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); background: rgba(16, 24, 40, .02); }
.hk-foot .hint { font-size: var(--t-cap); }
.hk-restart { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--coral-l); font: 600 var(--t-cap) var(--f-head); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.hk-restart span, .hk-restart svg { display: block; width: 15px; height: 15px; }
.hk-restart:hover { background: rgba(229, 72, 61, .08); }
.hpc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.hcol .hpc h3 { margin: 0; }
.hk-pl { margin-bottom: 10px; }
.hk-togs { display: flex; flex-direction: column; }
.hk-tog, .hk-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; border: 0; border-top: 1px solid var(--line); background: none; padding: 6px 0; font: 600 var(--t-md) var(--f-head); color: var(--ink); text-align: left; }
.hk-togs > :first-child { border-top: 0; }
.hk-tog { cursor: pointer; }
.hk-tog i { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line2); transition: background-color .15s; }
.hk-tog i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .3); transition: transform .15s; }
.hk-tog[aria-pressed="true"] i { background: var(--green); }
.hk-tog[aria-pressed="true"] i::after { transform: translateX(14px); }
.hk-tog:hover i { box-shadow: 0 0 0 3px rgba(var(--green-rgb), .15); }
.hk-line b { font-variant-numeric: tabular-nums; }
.hk-line .hk-b { padding: 5px 12px; font-size: var(--t-cap); }
.hk-cams { display: flex; flex-wrap: wrap; gap: 5px; }
.hk-cams button { border: 1px solid var(--line2); background: #fff; border-radius: 8px; padding: 5px 8px; font: 600 var(--t-cap) var(--f-head); color: var(--dim); cursor: pointer; }
.hk-cams button:hover { border-color: var(--navy); color: var(--navy); }
.hk-cams button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.hk-buzz { display: flex; gap: 6px; }
.hk-sel { min-width: 0; font: 600 var(--t-cap) var(--f-head); color: var(--ink); background: #fff; border: 1.5px solid var(--line2); border-radius: 10px; padding: 7px 8px; }
.hk-buzz .hk-sel { flex: 1; }
.hk-sel:disabled { opacity: .65; cursor: not-allowed; }
.hk-set { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.hcol .hk-set h3 { margin: 0 0 2px; }
.hk-set small { color: var(--dim); font-size: var(--t-cap); line-height: 1.4; }
.hk-keys { margin-top: 22px; }
.hk-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin: 0; font-size: var(--t-cap); color: var(--dim); }
.hk-keys dt { display: flex; gap: 3px; }
.hk-keys dd { margin: 0; }
/* presenter controls on the big screen (state.ctl): the join code over the game, the side panel hidden, a sound request */
.sc-ctl-join { position: absolute; left: 2.4vw; top: 6.6vw; z-index: 7; display: flex; align-items: center; gap: 1.4vw; width: 34vw; background-color: rgba(var(--glass), .96); border: 1px solid var(--line2); border-radius: 1.6vw; padding: 1.2vw 1.4vw; box-shadow: var(--shadow-lg); animation: fadeUp .5s; }
/* where a step's card fills the left (intros, the wrap-up), the join code goes right (no side panel there) */
body[data-phase$="-intro"] .sc-ctl-join, body[data-phase="post"] .sc-ctl-join, body[data-phase="end"] .sc-ctl-join { left: auto; right: 2.4vw; }
.sc-ctl-join .sc-qr { flex: none; width: 12vw; }
.sc-ctl-join small { display: block; font: 600 var(--s-sm) var(--f-display); letter-spacing: .14em; color: var(--dim); }
.sc-ctl-join b { display: block; font: 700 var(--s-lg) var(--f-head); color: var(--navy); }
.sc-ctl-join .sc-code { margin-top: .6vw; }
.sc-ctl-join .sc-code span { font-size: var(--s-xl); }
body[data-phase="lobby"] .sc-ctl-join { display: none; }
body.ctl-nopanel .sc-panel { display: none; }
body.ctl-nopanel .sc-ticker, body.ctl-nopanel .sc-splash { right: 2vw; }
.sc-snd.ctl-ask { color: var(--gold-ink); border-color: var(--gold); animation: tick 1s infinite; }
@media (max-width: 1100px) { .hgrid { grid-template-columns: 1fr; } .hcol { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- big screen ---------- */
body.screenpage { --sky: .6; background: linear-gradient(180deg, #CFE2FA 0%, #E8F0FC 55%, #F2FAF5 100%); }
.sc { position: fixed; inset: 0; overflow: hidden; }
.sc-3d { position: absolute; inset: 0; }
.sc-no3d { position: absolute; inset: 0; background: radial-gradient(circle at 60% 60%, #2E4FA6, transparent 60%); }
.sc-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 2vw; padding: .9vw 2.2vw; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); z-index: 5; }
.sc-brand { display: flex; align-items: center; gap: .8vw; }
.sc-logo { width: 3.6vw; min-width: 40px; filter: drop-shadow(0 .4vw 1.2vw rgba(var(--green-rgb), .45)); }
.sc-logo svg, .sc-logo img { display: block; width: 100%; height: auto; }
.sc-brand b { display: block; font: 700 var(--s-lg) var(--f-display); letter-spacing: -.01em; color: var(--navy); }
.sc-brand span { color: var(--dim); font: 600 var(--s-sm) var(--f-head); }
.sc-chapter { font: 600 var(--s-sm) var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--green-d); }
.sc-join { margin-left: auto; display: flex; align-items: baseline; gap: .8vw; background: rgba(var(--glass),.7); border: 1px solid var(--line2); border-radius: 999px; padding: .5vw 1.2vw; }
.sc-join small { font: 600 var(--s-sm) var(--f-display); letter-spacing: .14em; color: var(--dim); }
.sc-join b { font: 700 var(--s-sm) var(--f-head); }
.sc-join .code { font: 700 var(--s-lg) var(--f-display); letter-spacing: .16em; color: var(--gold-ink); }
body[data-phase="lobby"] .sc-join { display: none; }
.sc-snd { border: 1px solid var(--line2); background: rgba(var(--glass),.6); color: var(--dim); border-radius: 999px; padding: .5vw 1vw; font: 600 var(--s-sm) var(--f-head); cursor: pointer; }
.sc-snd.on { color: var(--green); border-color: var(--green); }
.sc-tags { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sc-tags .tag { position: absolute; left: 0; top: 0; background: #fff; color: #0A1330; font: 600 max(12px, var(--s-sm)) var(--f-head); padding: .25vw .6vw; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.sc-over { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.sc-lobby { position: absolute; left: 2.4vw; top: 50%; transform: translateY(-46%); display: flex; flex-direction: column; gap: 1.2vw; background-color: rgba(var(--glass),.86); border: 1px solid var(--line2); border-radius: 2vw; padding: 1.8vw; width: 25vw; backdrop-filter: blur(10px); box-shadow: 0 2vw 5vw rgba(0,0,0,.35); }
.sc-qr svg { display: block; width: 100%; border-radius: 1vw; }
.sc-lobby-tx small { font: 600 var(--s-sm) var(--f-display); letter-spacing: .14em; color: var(--dim); }
.sc-lobby-tx b { display: block; font: 700 var(--s-lg) var(--f-head); }
.sc-code { display: flex; gap: .5vw; margin-top: .8vw; }
.sc-code span { flex: 1; text-align: center; background: var(--gold); color: #0A1330; font: 700 var(--s-3xl)/1.3 var(--f-display); border-radius: .8vw; box-shadow: 0 .35vw 0 var(--gold-d); }
.sc-count { font: 700 var(--s-md) var(--f-head); color: var(--green-l); margin-top: 1vw; }
.sc-lock { display: inline-block; margin-top: .6vw; padding: .35vw 1vw; border-radius: 999px; background: var(--gold, #F2B33D); color: var(--navy, #213E8C); font: 700 var(--s-md) var(--f-head); }
.sc-lock[hidden] { display: none; }
.sc-lobby-sub { color: var(--dim); font: 600 var(--s-sm) var(--f-head); margin-top: .3vw; }
.sc-prologue { position: absolute; left: 3vw; bottom: 6vh; display: flex; flex-direction: column; gap: .8vw; max-width: 52vw; background: #fff; border: 1px solid var(--line); border-left: .35vw solid var(--green); border-radius: 1.6vw; padding: 1.8vw 2.2vw; box-shadow: var(--shadow-lg); }
.sc-prologue:empty { display: none; }
.sc-prologue p { font: 600 var(--s-2xl)/1.2 var(--f-head); color: var(--navy); opacity: 0; transform: translateY(1vw); transition: .8s; }
.sc-prologue p.in { opacity: 1; transform: none; }
.sc-prologue p:not(:last-child) { font-size: var(--s-lg); color: var(--dim2); }
.sc-card-intro { position: absolute; left: 2.4vw; top: 7.2vw; width: 40vw; background: #fff; border: 1px solid var(--line); border-radius: 1.6vw; padding: 2vw 2.2vw; box-shadow: var(--shadow-lg); animation: fadeUp .8s; }
.sc-card-intro.small { width: 34vw; }
.sc-card-intro h1 { font: 700 4.2vw/1 var(--f-display); letter-spacing: -.02em; margin-top: .3vw; color: var(--navy); }
.sc-panel { position: absolute; right: 2vw; top: 6vw; bottom: 5.5vw; width: 24vw; display: flex; flex-direction: column; gap: 1vw; z-index: 4; }
.sc-panel:empty { display: none; }
.sc-day, .sc-stats div, .sc-lobby, .pd, .sp-in { box-shadow: var(--shadow); }
.sc-day { background-color: rgba(var(--glass),.86); border: 1px solid var(--line2); border-radius: 1.2vw; padding: 1vw 1.2vw; }
.sc-day b { font: 700 var(--s-xl) var(--f-display); }
.sc-cal { display: grid; grid-template-columns: repeat(15, 1fr); gap: .25vw; margin-top: .6vw; }
.sc-cal i { height: .7vw; border-radius: .2vw; background: rgba(16,24,40,.12); }
.sc-cal i.past { background: rgba(255,255,255,.35); } .sc-cal i.now { background: var(--gold); } .sc-cal i.pay { box-shadow: inset 0 0 0 .12vw var(--green-l); }
.sc-res-wrap { position: relative; flex: 1; min-height: 0; background: rgba(var(--glass),.92); box-shadow: var(--shadow); border: 1px solid var(--line2); border-radius: 1.6vw; }
.sc-res { position: absolute; inset: 2.6vw .6vw 4vw; width: calc(100% - 1.2vw); height: calc(100% - 6.6vw); }
.sc-res-label { position: absolute; top: .9vw; left: 0; right: 0; text-align: center; font: 600 var(--s-sm) var(--f-display); letter-spacing: .16em; color: var(--coral-l); }
.sc-res-amt { position: absolute; bottom: .8vw; left: 0; right: 0; text-align: center; font: 700 var(--s-3xl) var(--f-display); color: var(--coral); font-variant-numeric: tabular-nums; }
.sc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6vw; }
.sc-stats div { background-color: rgba(var(--glass),.86); border: 1px solid var(--line); border-radius: 1vw; padding: .8vw; }
.sc-stats b { display: block; font: 700 var(--s-lg) var(--f-head); }
.sc-stats small { color: var(--dim); font-size: var(--s-sm); }
.sc-stats.end { grid-template-columns: repeat(3, 1fr); }
.sc-stats .bad b { color: var(--coral); } .sc-stats .good b { color: var(--green-l); }
.sc-paper { background: #F6F3EC; color: #1A1A1A; border-radius: 1vw; padding: 1.2vw; font-family: Georgia, serif; animation: fadeUp .8s; }
.sc-paper .mast { display: flex; justify-content: space-between; font: 700 var(--s-sm) Georgia, serif; letter-spacing: .18em; text-transform: uppercase; border-bottom: .2vw solid #1A1A1A; padding-bottom: .4vw; }
.sc-paper .head { font: 700 var(--s-xl)/1.1 Georgia, serif; margin-top: .6vw; }
.sc-paper .dek { font: 400 var(--s-sm)/1.4 Georgia, serif; color: #444; margin-top: .4vw; }
.sc-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: .6vw; }
.pd { position: relative; text-align: center; background-color: rgba(var(--glass),.86); border: 1px solid var(--line2); border-radius: 1vw 1vw .4vw .4vw; padding: .8vw .4vw; animation: fadeUp .8s both; }
.pd.p1 { padding-top: 1.6vw; border-color: var(--gold-ink); animation-delay: .6s; } .pd.p2 { animation-delay: .3s; } .pd.p3 { animation-delay: .1s; }
.pd-av svg { width: 3.6vw; height: 3.6vw; }
.pd b { display: block; font: 700 var(--s-sm)/1.2 var(--f-head); } .pd span { color: var(--gold-ink); font: 700 var(--s-sm) var(--f-head); }
.pd i { position: absolute; top: -.9vw; left: 50%; transform: translateX(-50%); width: 1.8vw; height: 1.8vw; border-radius: 50%; background: var(--gold); color: #0A1330; font: 700 var(--s-sm)/1.8vw var(--f-display); font-style: normal; }
.sc-next { color: var(--coral-l); font: 700 var(--s-sm)/1.4 var(--f-head); text-align: center; background: rgba(var(--glass),.86); border: 1px solid rgba(255,107,96,.45); border-radius: 1vw; padding: .8vw 1vw; }
.sc-wait { margin: auto; color: var(--dim); font: 600 var(--s-md) var(--f-head); }
.sc-ticker { position: absolute; left: 2vw; bottom: 1.4vw; right: 28vw; display: flex; gap: .8vw; overflow: hidden; z-index: 4; mask: linear-gradient(90deg, #000 80%, transparent); -webkit-mask: linear-gradient(90deg, #000 80%, transparent); }
body[data-phase="lobby"] .sc-ticker { right: 2vw; left: 30vw; }
.tk { flex: none; background: rgba(var(--glass),.86); border: 1px solid var(--line2); border-radius: 999px; padding: .5vw 1vw; font: 600 var(--s-sm) var(--f-head); white-space: nowrap; opacity: 0; transform: translateX(-1vw); transition: .4s; }
.tk.in { opacity: 1; transform: none; }
/* the ticker only while people are joining or playing; labels hide while the camera moves */
body.screenpage:not([data-phase="lobby"]):not([data-phase$="-play"]) .sc-ticker { display: none; }
.sc-tags { transition: opacity .5s; } .cam-moving .sc-tags { opacity: 0; }
.tk.red { border-color: rgba(255,107,96,.6); color: var(--coral-l); } .tk.good { border-color: rgba(var(--green-rgb),.6); color: var(--green-l); }
/* class events and paydays sit in the lower third, so the city (and everyone reacting) stays in view */
.sc-splash { position: absolute; left: 2vw; right: 28vw; bottom: 4.6vw; display: flex; justify-content: flex-start; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .4s; }
.sc-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
.sc-tags .bub { position: absolute; left: 0; top: 0; width: 3.4vw; height: 3.4vw; min-width: 40px; min-height: 40px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.sc-tags .bub::after { content: ""; position: absolute; bottom: -.5vw; left: 50%; margin-left: -.5vw; border: .5vw solid transparent; border-top-color: #fff; border-bottom: 0; }
.sc-tags .bub img { width: 72%; height: 72%; }
.sc-splash.on { opacity: 1; }
.sp-in { display: flex; gap: 1.4vw; align-items: center; background-color: rgba(var(--glass),.94); border: .2vw solid var(--gold); border-radius: 1.6vw; padding: 1.2vw 1.8vw; max-width: 54vw; transform: translateY(40%); transition: transform .5s cubic-bezier(.2,.9,.3,1.3); box-shadow: 0 1vw 3vw rgba(0,0,0,.4); }
.sp-in.pay { border-color: var(--green); }
.sp-in.pay small { color: var(--green-l); }
.sc-splash.on .sp-in { transform: none; }
.sp-in img { width: 6.6vw; height: 6.6vw; padding: .6vw; flex: none; border-radius: 50%; background: radial-gradient(circle, rgba(242, 179, 61, .28), rgba(242, 179, 61, .06) 70%); box-shadow: inset 0 0 0 .15vw rgba(242, 179, 61, .5); }
.sp-in.pay img { background: radial-gradient(circle, rgba(var(--green-rgb), .3), rgba(var(--green-rgb), .06) 70%); box-shadow: inset 0 0 0 .15vw rgba(var(--green-rgb), .6); }
.sp-in small { font: 600 var(--s-sm) var(--f-display); letter-spacing: .18em; color: var(--gold-ink); }
.sp-in b { display: block; font: 700 var(--s-2xl)/1.05 var(--f-display); color: var(--ink); }
.sp-in p { font: 500 var(--s-md)/1.45 var(--f-body); color: var(--dim); margin-top: .4vw; }
body[data-net="offline"] .sc-top::after { content: "Reconnecting…"; color: var(--gold-ink); font: 700 var(--s-sm) var(--f-head); }

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

/* how to play (lobby: next to the QR code; set-up: the Chapter 1 card) */
.sc-eyebrow { display: block; font: 600 var(--s-sm) var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--green-d); }
.sc-howto { position: absolute; right: 2.4vw; top: 7.2vw; width: 36vw; background: #fff; border: 1px solid var(--line); border-radius: 1.6vw; padding: 1.8vw 2vw; box-shadow: var(--shadow-lg); animation: fadeUp .8s; }
.sc-howto h2 { font: 700 var(--s-2xl)/1.1 var(--f-head); color: var(--ink); margin-top: .3vw; }
.sc-howto .goal, .sc-card-intro .goal { font: 500 var(--s-sm)/1.45 var(--f-body); color: var(--dim); margin-top: .5vw; }
.sc-steps { list-style: none; margin: 1.2vw 0 0; padding: 0; display: flex; flex-direction: column; gap: .8vw; }
.sc-steps li { position: relative; display: grid; grid-template-columns: 7vw 1fr; gap: 1.2vw; align-items: center; background: var(--bg); border: 1px solid var(--line); border-left: .3vw solid var(--green); border-radius: 1vw; padding: .7vw 1vw .7vw 1.6vw; }
.sc-steps li.red { border-left-color: var(--coral); }
.sc-step-n { position: absolute; left: -1vw; top: 50%; transform: translateY(-50%); width: 1.9vw; height: 1.9vw; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font: 700 var(--s-sm) var(--f-head); font-style: normal; box-shadow: 0 0 0 .25vw #fff; }
.sc-steps li.red .sc-step-n { background: var(--coral); }
.sc-step-art svg { display: block; width: 100%; height: auto; }
.sc-steps b { display: block; font: 700 var(--s-md)/1.2 var(--f-head); color: var(--ink); }
.sc-steps span { display: block; font: 500 var(--s-sm)/1.4 var(--f-body); color: var(--dim); margin-top: .2vw; }
.sc-steps li.red b { color: var(--coral-l); }
.sc-day:empty { display: none; }

/* ---------- Chapter 2 · Balance Due (phone) ---------- */
.bd { position: relative; display: grid; grid-template-rows: 50px 1fr; height: 100%; overflow: hidden; }
.bd-stage { position: relative; min-height: 0; }
.bd-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.bd-hud .cf-day { margin-right: auto; }
.bd-coins, .bd-score { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 11px 4px 6px; font: 600 var(--t-sm) var(--f-head); color: var(--dim); white-space: nowrap; }
.bd-coins b, .bd-score b { font: 700 var(--t-body) var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.bd-coins small, .bd-score small { font-size: var(--t-xs); }
.bd-coin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE08A, var(--gold) 55%, var(--gold-d)); flex: none; }
.bd-coins.empty { color: var(--coral-l); border-color: rgba(229, 72, 61, .4); }
.bd-coins.empty b { color: var(--coral-l); }
.bd-score { padding-left: 11px; }
.bd-score b { color: var(--sc, var(--green-d)); }
.bd-score::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sc, var(--green)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc, var(--green)) 25%, transparent); }
.bd-coach { top: 8px; bottom: auto; }
.bd-year { position: absolute; left: 50%; top: 74px; z-index: 5; transform: translate(-50%, -12px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.2, .9, .3, 1.3); width: min(320px, calc(100% - 24px));
  background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.bd-year.on { opacity: 1; transform: translate(-50%, 0); }
.bd-year.end { border-top-color: var(--coral); }
.bd-year small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim2); }
.bd-year b { font: 700 var(--t-xl) var(--f-head); color: var(--ink); }
.bd-year.pay b { color: var(--gold-ink); }
.bd-year.end b { color: var(--coral-l); }
.bd-year span { font: 600 var(--t-cap)/1.35 var(--f-body); color: var(--dim); }
.bd-year span.good { color: var(--green-d); } .bd-year span.bad { color: var(--coral-l); }
/* tap mode: this year's card (something came up: cash or credit?) */
.bd-decide { position: absolute; left: 50%; top: max(7%, 70px); z-index: 7; width: min(360px, calc(100% - 20px)); transform: translate(-50%, -10px) scale(.96); opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.2, .9, .3, 1.3); }
.bd-decide.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bd-decide.nudge .bd-dc-in { animation: nudge .5s; }
.bd-dc-in { background: #fff; border: 2.5px solid var(--navy, #213E8C); border-radius: 18px; padding: 12px 12px 10px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 140px); overflow-y: auto; }
.bd-dc-in > small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim2); }
.bd-dc-top { display: flex; align-items: flex-start; gap: 10px; }
.bd-dc-top .ic { width: 34px; height: 34px; flex: none; }
.bd-dc-top b { display: block; font: 700 var(--t-lg)/1.2 var(--f-head); color: var(--ink); }
.bd-dc-top p { margin: 2px 0 0; font: 600 var(--t-sm)/1.35 var(--f-body); color: var(--dim); }
.bd-dc-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border: 2px solid var(--line2); background: #fff; border-radius: 14px; padding: 9px 12px; cursor: pointer; font: inherit; color: inherit; touch-action: manipulation; min-height: 52px; }
.bd-dc-opt b { font: 700 var(--t-md)/1.25 var(--f-head); }
.bd-dc-opt span { font: 600 var(--t-cap)/1.35 var(--f-body); color: var(--dim); }
.bd-dc-opt.cash { border-color: var(--green, #30AE58); } .bd-dc-opt.cash b { color: var(--green-d); }
.bd-dc-opt.credit b { color: var(--navy, #213E8C); }
.bd-dc-opt.credit.bad { border-color: var(--coral); } .bd-dc-opt.credit.bad b { color: var(--coral-l); }
.bd-dc-opt:disabled { opacity: .45; cursor: default; }
.bd-dc-opt:not(:disabled):active { transform: scale(.98); }
.bd-dc-tip { font: 600 var(--t-cap)/1.3 var(--f-body); color: var(--dim); text-align: center; }
.bd-red { position: absolute; right: 10px; bottom: 14px; z-index: 4; border: 0; border-radius: 999px; padding: 9px 14px; background: #fff; color: var(--coral-l); box-shadow: inset 0 0 0 1.5px var(--coral), var(--shadow); font: 600 var(--t-cap) var(--f-head); cursor: pointer; }
.bd-red.on { background: var(--coral); color: #fff; }
.bd-gauge { flex: none; display: inline-grid; place-items: center; align-content: center; gap: 2px; width: 132px; height: 132px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle, #fff 60%, transparent 61%), conic-gradient(var(--sc, var(--green)) 0 var(--p, 60%), var(--line) var(--p, 60%) 100%); }
.bd-gauge b { font: 700 36px/1 var(--f-display); color: var(--ink); }
.bd-gauge small { font: 600 var(--t-xs) var(--f-head); color: var(--dim); }

/* ---------- Chapter 2 · Balance Due (big screen) ---------- */
.sc-tags .core-tag { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto auto; column-gap: .45vw; align-items: center; background: #fff; border: .15vw solid var(--c, var(--coral)); border-radius: .8vw; padding: .25vw .7vw .3vw .45vw; box-shadow: 0 .5vw 1.4vw rgba(16, 24, 40, .25); white-space: nowrap; }
.core-tag i { grid-row: span 2; width: .8vw; height: .8vw; min-width: 9px; min-height: 9px; border-radius: 50%; background: var(--c, var(--coral)); }
.core-tag b { font: 700 max(13px, 1.05vw)/1.1 var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.core-tag small { font: 600 max(10px, .72vw)/1.2 var(--f-head); color: var(--dim); }
.sc-bd { position: relative; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 1.6vw; padding: 1.2vw 1.2vw 1vw; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.sc-bd .sc-res-label { position: static; text-align: left; color: var(--coral-l); }
.sc-bd-total { font: 700 var(--s-3xl)/1.1 var(--f-display); color: var(--coral); font-variant-numeric: tabular-nums; margin-top: .3vw; }
.sc-bd-bar { height: .7vw; border-radius: .35vw; background: var(--line); overflow: hidden; margin-top: .5vw; }
.sc-bd-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--coral-d), var(--coral)); transition: width .6s; }
.sc-bd-sub { font: 600 var(--s-sm) var(--f-head); color: var(--dim); margin-top: .35vw; }
.sc-bd-cores { list-style: none; margin: 1vw 0 0; padding: 0; display: flex; flex-direction: column; gap: .5vw; }
.sc-bd-cores li { display: grid; grid-template-columns: 1vw 1fr auto; gap: .6vw; align-items: center; font: 600 var(--s-sm) var(--f-head); }
.sc-bd-cores li i { width: .9vw; height: .9vw; border-radius: 50%; }
.sc-bd-cores li span { font-variant-numeric: tabular-nums; color: var(--ink); }
.sc-bd-cores li.dead { color: var(--dim2); text-decoration: line-through; }
.sc-bd-cores li.dead span { color: var(--green-d); text-decoration: none; }
.sc-cal.years { grid-template-columns: repeat(6, 1fr); }
.sc-cal.years i { height: .9vw; }
.sc-credit { color: var(--sc, var(--green-d)); }
.sc-bd-goal { margin-top: 1vw; font-weight: 700; color: var(--navy); }
.sc-mvps { display: grid; grid-template-columns: 1fr 1fr; gap: .6vw; }
.mvp { display: flex; gap: .6vw; align-items: center; background: #fff; border: 1px solid var(--line); border-left: .3vw solid var(--gold); border-radius: 1vw; padding: .6vw; box-shadow: var(--shadow); animation: fadeUp .8s both; }
.mvp:nth-child(2) { animation-delay: .2s; } .mvp:nth-child(3) { animation-delay: .4s; } .mvp:nth-child(4) { animation-delay: .6s; }
.mvp .pd-av svg { width: 3vw; height: 3vw; }
.mvp small { display: block; font: 600 var(--s-sm) var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.mvp b { display: block; font: 700 var(--s-sm)/1.2 var(--f-head); }
.mvp span { font: 600 var(--s-sm) var(--f-body); color: var(--dim); }
.sc-next.good { color: var(--green-d); border-color: rgba(var(--green-rgb), .45); }
.bd-owed { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; flex-direction: column; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-left: 4px solid var(--coral); border-radius: 12px; padding: 5px 11px 6px; box-shadow: var(--shadow); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.bd-owed.on { opacity: 1; transform: none; }
.bd-owed small { font: 600 var(--t-xs) var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); }
.bd-owed b { font: 700 var(--t-lg)/1.15 var(--f-head); color: var(--coral-l); font-variant-numeric: tabular-nums; }
.bd-owed b.free, .bd-owed b.help { color: var(--green-d); }
.bd-owed span { font: 600 var(--t-cap)/1.3 var(--f-body); color: var(--dim); max-width: 170px; }
.bd-owed:has(b.free) { border-left-color: var(--green); }
.bd-coins.pop { animation: coinPop .5s cubic-bezier(.2, .9, .3, 1.6); }
@keyframes coinPop { 40% { transform: scale(1.25); border-color: var(--gold); } }
.rp-class { font: 600 var(--t-md) var(--f-head); color: var(--dim); margin-top: -6px; }
.rp-note { font: 600 var(--t-cap)/1.4 var(--f-body); color: var(--dim); background: var(--bg); border-radius: 10px; padding: 8px 10px; }
.rp-stats .good b { color: var(--green-d); }
.rp-stats .bad b { color: var(--coral-l); }
.core-pop { position: absolute; transform: translate(-50%, -50%); font: 700 max(15px, var(--s-lg)) var(--f-head); color: var(--ink); background: #fff; border-radius: 999px; padding: .2vw .8vw; box-shadow: 0 .6vw 1.6vw rgba(16, 24, 40, .25); pointer-events: none; white-space: nowrap; animation: corePop 2.4s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.core-pop.bad { color: var(--coral-l); box-shadow: 0 0 0 .15vw rgba(229, 72, 61, .5), 0 .6vw 1.6vw rgba(16, 24, 40, .25); }
.core-pop.good { color: var(--green-d); box-shadow: 0 0 0 .15vw rgba(var(--green-rgb), .6), 0 .6vw 1.6vw rgba(16, 24, 40, .25); }
.core-pop.big { font-size: max(20px, 2.2vw); padding: .4vw 1.2vw; }
@keyframes corePop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%) scale(.95); } }
.bd .cf-toast { top: auto; bottom: calc(max(58px, 10%) + 64px); transform: translate(-50%, 12px); }
.bd .cf-toast.on { transform: translate(-50%, 0); }

/* ---------- Chapter 2: game look (chunky, bold, few words) ---------- */
.bd { --hard: 0 4px 0; }
.bd .bd-coins, .bd .bd-score { border: 2px solid var(--line2); background: #fff; box-shadow: var(--hard) var(--line); padding: 3px 11px 3px 5px; }
.bd .bd-coins b, .bd .bd-score b { font: 700 var(--t-lg) var(--f-head); }
.bd .bd-coins small, .bd .bd-score small { font: 600 var(--t-xs) var(--f-head); text-transform: uppercase; letter-spacing: .04em; }
.bd .bd-coin { width: 22px; height: 22px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.bd .bd-score { padding-left: 9px; }
.bd .bd-owed { border: 2.5px solid var(--coral); border-left-width: 2.5px; border-radius: 14px; box-shadow: var(--hard) rgba(168, 40, 31, .35); padding: 4px 12px 5px; }
.bd .bd-owed:has(b.free) { border-color: var(--green); box-shadow: var(--hard) rgba(31, 138, 69, .35); }
.bd .bd-owed b { font: 700 var(--t-xl)/1.1 var(--f-head); }
.bd .bd-owed small { font: 600 var(--t-xs) var(--f-head); letter-spacing: .08em; }
/* year banners: payday (green) and interest (coral) */
.bd .bd-year { top: 14px; width: auto; min-width: 150px; max-width: calc(100% - 28px); padding: 8px 22px 10px; border: 0; border-radius: 18px; background: var(--navy); color: #fff; box-shadow: var(--hard) var(--navy-d), 0 14px 28px rgba(16, 24, 40, .22); gap: 0; transform: translate(-50%, -18px) scale(.85); transition: opacity .25s, transform .45s cubic-bezier(.2, .9, .3, 1.5); }
.bd .bd-year.on { transform: translate(-50%, 0) scale(1); }
.bd .bd-year.pay { background: var(--green); box-shadow: var(--hard) var(--green-d), 0 14px 28px rgba(16, 24, 40, .22); }
.bd .bd-year.end { background: var(--coral); box-shadow: var(--hard) var(--coral-d), 0 14px 28px rgba(16, 24, 40, .22); }
.bd .bd-year small { color: rgba(255, 255, 255, .85); font: 600 var(--t-xs) var(--f-head); letter-spacing: .14em; }
.bd .bd-year b { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 700 32px/1.1 var(--f-head); text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.bd .bd-year.pay b, .bd .bd-year.end b { color: #fff; }
.bd .bd-year b .bd-coin { width: 26px; height: 26px; }
.bd .bd-year span { color: rgba(255, 255, 255, .92); font: 600 var(--t-cap)/1.3 var(--f-body); margin-top: 2px; }
.bd .bd-year em { font: 600 var(--t-sm) var(--f-head); font-style: normal; background: #fff; border-radius: 999px; padding: 2px 10px; margin-top: 4px; }
.bd .bd-year em.good { color: var(--green-d); } .bd .bd-year em.bad { color: var(--coral-l); }
/* callouts: short, dark, one line */
.bd .cf-toast { width: auto; max-width: calc(100% - 28px); background: var(--navy); color: #fff; border: 0; border-radius: 999px; padding: 9px 18px; font: 600 var(--t-md) var(--f-head); text-align: center; white-space: nowrap; box-shadow: var(--hard) var(--navy-d), 0 10px 22px rgba(16, 24, 40, .22); }
.bd .cf-toast b { font-weight: 700; }
.bd .cf-toast.good { background: var(--green); box-shadow: var(--hard) var(--green-d), 0 10px 22px rgba(16, 24, 40, .22); }
.bd .cf-toast.bad { background: var(--coral); box-shadow: var(--hard) var(--coral-d), 0 10px 22px rgba(16, 24, 40, .22); }
/* tips: a speech bubble with a lily pad */
.bd .bd-coach { left: 12px; right: 12px; border: 2.5px solid var(--navy); border-radius: 16px; background: #fff; box-shadow: var(--hard) var(--navy-d); padding: 8px 8px 8px 42px; }
.bd .bd-coach::before { content: ""; position: absolute; left: 10px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: conic-gradient(from 200deg, transparent 0 34deg, var(--green) 0); }
.bd .bd-coach p { font: 600 var(--t-md)/1.3 var(--f-body); color: var(--ink); }
.bd .bd-coach .cf-coach-x { background: var(--green); box-shadow: 0 2px 0 var(--green-d); padding: 7px 14px; font-weight: 700; }
.bd .cf-splash .cs-how li { border-left-width: 1px; border: 2px solid var(--line); box-shadow: var(--hard) var(--line); }
/* report */
.bd .bd-rp { padding: 0 0 16px; gap: 12px; overflow: hidden auto; align-items: stretch; }
.bd-rp-top { background: var(--navy); color: #fff; padding: 16px 18px 14px; text-align: center; }
.bd-rp-top.free { background: var(--green); }
.bd-rp-top small { font: 600 var(--t-xs) var(--f-head); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.bd-rp-top h2 { font: 700 var(--t-3xl)/1.15 var(--f-head); color: #fff; margin: 2px 0; }
.bd-rp-top span { font: 600 var(--t-cap) var(--f-head); opacity: .9; }
.bd .bd-rp .bd-gauge { margin-top: 4px; }
.bd-rp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.bd-rp-stats div { background: var(--bg); border: 2px solid var(--line); border-radius: 14px; padding: 10px 6px; text-align: center; box-shadow: var(--hard) var(--line); }
.bd-rp-stats b { display: block; font: 700 var(--t-2xl) var(--f-head); }
.bd-rp-stats .bad b { color: var(--coral-l); } .bd-rp-stats .good b { color: var(--green-d); }
.bd-rp-stats small { font: 600 var(--t-xs) var(--f-head); color: var(--dim); }
.bd .bd-rp .rp-badges { padding: 0 16px; }
.bd-rp-tip { margin: 0 16px; background: var(--mint); border: 2px solid rgba(var(--green-rgb), .35); border-radius: 14px; padding: 10px 12px 10px 42px; position: relative; font: 700 var(--t-md)/1.35 var(--f-head); color: var(--ink); }
.bd-rp-tip::before { content: ""; position: absolute; left: 11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: conic-gradient(from 200deg, transparent 0 34deg, var(--green) 0); }
.bd-rp-min { margin: 0 16px; text-align: center; font: 700 var(--t-md) var(--f-head); color: var(--coral-l); }
.bd .bd-rp .rp-look { margin-top: 2px; }
.bd .bd-hud { gap: 7px; padding: 0 10px 9px; }
.bd .bd-coins small { display: none; }
.bd .bd-coins.between small { display: inline; }
.bd .bd-hud .cf-day span { display: none; }
.bd .bd-hud .cf-day b small { margin-right: 4px; }
.bd .bd-year { width: max-content; }
.bd .bd-year span { max-width: 250px; }

/* ---------- Chapter 3 · Skyline (phone) ---------- */
.sx { grid-template-rows: 50px minmax(180px, 40%) 1fr; grid-template-columns: minmax(0, 1fr); }
.sx > * { min-width: 0; }
.sx .sx-hud { gap: 6px; }
.sx .sx-wallet small { display: none; }
.sx .sx-chip b { font-size: var(--t-body); }
.sx-stage { position: relative; min-height: 0; overflow: hidden; }
.sx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sx-hud .cf-day { margin-right: auto; }
.sx-hud .cf-day span { display: inline; margin-left: 1px; font: 600 var(--t-cap) var(--f-head); color: var(--dim2); }
.sx-chip { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--line2); background: #fff; border-radius: 999px; padding: 3px 11px 3px 5px; box-shadow: var(--hard) var(--line); white-space: nowrap; }
.sx-chip b { font: 700 var(--t-body) var(--f-head); font-variant-numeric: tabular-nums; }
.sx-chip small { font: 600 var(--t-xs) var(--f-head); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.sx-wallet.full { border-color: var(--gold); box-shadow: var(--hard) rgba(185, 128, 26, .45); animation: sxPulse 1.6s ease-in-out infinite; }
@keyframes sxPulse { 50% { transform: scale(1.05); } }
.sx-worth { padding-left: 11px; }
.sx-worth b { color: var(--navy); }
.sx-debt { position: absolute; left: 10px; top: 10px; z-index: 3; display: none; flex-direction: column; background: #fff; border: 2.5px solid var(--coral); border-radius: 12px; padding: 3px 10px 4px; box-shadow: var(--hard) rgba(168, 40, 31, .35); }
.sx-debt.on { display: flex; }
.sx-debt small { font: 600 var(--t-xs) var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--coral-l); }
.sx-debt b { font: 700 var(--t-lg)/1.1 var(--f-head); color: var(--coral-l); }
.sx-debt span { font: 600 var(--t-xs) var(--f-body); color: var(--dim); }
.sx .sx-banner { top: 10px; padding: 6px 18px 8px; }
.sx .sx-banner b { font-size: var(--t-2xl); }
.sx .sx-banner small { font-size: var(--t-xs); }
.sx-panel { position: relative; min-height: 0; display: flex; flex-direction: column; background: var(--bg); border-top: 2px solid var(--line); }
.sx-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; }
.sx-bar-tx { flex: 1; min-width: 0; font: 600 var(--t-cap) var(--f-body); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-steps { display: flex; gap: 4px; flex: none; }
.sx-steps button { border: 2px solid var(--line2); background: #fff; border-radius: 999px; padding: 3px 10px; font: 600 var(--t-sm) var(--f-head); color: var(--dim); cursor: pointer; box-shadow: 0 2px 0 var(--line); }
.sx-steps button.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 2px 0 var(--navy-d); }
.sx-tiles { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 9px; padding: 12px 10px 14px; align-content: start; align-items: start; }
.sx-tile { position: relative; background: #fff; border: 2px solid var(--line); border-top: 5px solid var(--c); border-radius: 16px; padding: 7px 8px 8px; box-shadow: var(--hard) var(--line); display: flex; flex-direction: column; gap: 4px; transition: transform .15s, opacity .3s; }
.sx-tile.has { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); border-top-color: var(--c); }
.sx-tile.locked { opacity: .5; filter: grayscale(.8); }
.sx-tile.locked { padding-bottom: 6px; box-shadow: none; border-style: dashed; }
.sx-tile.locked .sx-tile-btns, .sx-tile.locked .sx-name small { display: none; }
.sx-tile.locked .sx-tile-mid { min-height: 0; }
.sx-tile-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sx-ic { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--green)) 16%, #fff); }
.sx-ic .ic { width: 22px; height: 22px; }
.sx-name { min-width: 0; flex: 1; }
.sx-name b { display: block; font: 600 var(--t-cap)/1.15 var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-name small { display: block; font: 600 var(--t-xs)/1.2 var(--f-head); color: var(--dim2); }
.sx-ret { position: absolute; right: 6px; top: -12px; font: 600 var(--t-xs) var(--f-head); padding: 1px 7px; border-radius: 999px; background: #fff; border: 2px solid var(--line2); }
.sx-ret:empty { display: none; }
.sx-ret.up { color: var(--green-d); border-color: rgba(var(--green-rgb), .5); }
.sx-ret.down { color: var(--coral-l); border-color: rgba(229, 72, 61, .45); }
.sx-ret.crash { color: #fff; background: var(--coral); border-color: var(--coral-d); }
.sx-new { position: absolute; left: 8px; top: -12px; font: 600 var(--t-xs) var(--f-head); letter-spacing: .06em; color: #0A1A3E; background: var(--gold); border-radius: 999px; padding: 1px 8px; box-shadow: 0 2px 0 var(--gold-d); animation: sxPulse 1.2s ease-in-out infinite; }
.sx-tile-mid { display: flex; align-items: baseline; gap: 6px; min-height: 22px; }
.sx-amt { font: 700 var(--t-lg) var(--f-head); font-variant-numeric: tabular-nums; }
.sx-lock { font: 600 var(--t-xs) var(--f-head); color: var(--dim2); }
.sx-tile-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }
.sx-btn { border: 0; border-radius: 12px; height: 38px; font: 700 var(--t-2xl)/1 var(--f-head); cursor: pointer; touch-action: manipulation; transition: transform .08s; }
.sx-btn:active:not(:disabled) { transform: translateY(2px); }
.sx-btn.plus { background: var(--c); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 70%, #000); }
.sx-btn.minus { background: var(--card2); color: var(--dim); box-shadow: 0 3px 0 var(--line2); }
.sx-btn:disabled { opacity: .35; cursor: default; }
.sx-moving { position: absolute; left: 50%; top: 6px; z-index: 2; transform: translateX(-50%); display: none; align-items: center; gap: 8px; background: var(--navy); color: #fff; border-radius: 999px; padding: 6px 16px; box-shadow: 0 3px 0 var(--navy-d); white-space: nowrap; }
.sx-moving.on { display: flex; }
.sx-moving b { font: 600 var(--t-cap) var(--f-head); }
.sx-moving span { font: 600 var(--t-sm) var(--f-body); opacity: .85; }
.sx-panel:has(.sx-moving.on) .sx-bar { visibility: hidden; }
.sx-coach { top: auto; bottom: 10px; }
/* lesson and setback cards */
.sx-card { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(16, 24, 40, .35); opacity: 0; pointer-events: none; transition: opacity .25s; }
.sx-card.on { opacity: 1; pointer-events: auto; }
.sx-card-in { --c: var(--navy); width: min(340px, 100%); background: #fff; border: 2.5px solid var(--c); border-radius: 22px; padding: 16px 16px 14px; box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 70%, #000), var(--shadow-lg); display: flex; flex-direction: column; gap: 10px; transform: scale(.9); transition: transform .35s cubic-bezier(.2, .9, .3, 1.4); }
.sx-card.on .sx-card-in { transform: none; }
.sx-card.setback .sx-card-in { --c: var(--coral); }
.sx-card.setback.ok .sx-card-in { --c: var(--green); }
.sx-card-top { display: flex; align-items: center; gap: 10px; }
.sx-card-top .sx-ic { width: 46px; height: 46px; border-radius: 14px; }
.sx-card-top .sx-ic .ic { width: 34px; height: 34px; }
.sx-card-top small { display: block; font: 600 var(--t-xs) var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim2); }
.sx-card-top b { display: block; font: 700 var(--t-xl)/1.15 var(--f-head); }
.sx-card-in p { font: 600 var(--t-md)/1.4 var(--f-body); color: var(--dim); }
.sx-card-in p.sx-card-kind { font: 600 var(--t-cap) var(--f-head); color: var(--c); }
.sx-cost { font: 700 34px/1 var(--f-head); color: var(--coral-l); }
.sx-card.ok .sx-cost { color: var(--ink); }
.sx-from { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sx-from li { font: 700 var(--t-md) var(--f-head); padding: 5px 10px; border-radius: 10px; background: var(--card2); }
.sx-from li.good { background: var(--mint2); color: var(--green-d); }
.sx-from li.bad { background: rgba(229, 72, 61, .1); color: var(--coral-l); }
/* report */
.sx-cmp { display: flex; flex-direction: column; gap: 7px; padding: 0 16px; }
.sx-cmp div { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: center; }
.sx-cmp span { font: 600 var(--t-xs)/1.2 var(--f-head); color: var(--dim); }
.sx-cmp i { height: 14px; border-radius: 7px; background: var(--card2); overflow: hidden; }
.sx-cmp em { display: block; height: 100%; border-radius: 7px; }
.sx-cmp b { font: 600 var(--t-cap) var(--f-head); font-variant-numeric: tabular-nums; }
.sx-three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
.sx-three b { font-size: clamp(14px, 4.4vw, 17px) !important; font-variant-numeric: tabular-nums; }
.sx-three small { display: block; line-height: 1.25; margin-top: 2px; }
.sx-nb { white-space: nowrap; }
.sx-era { margin: 0 16px; text-align: center; font: 600 var(--t-cap)/1.35 var(--f-head); color: var(--dim); }
/* report: what earned you the most and the least */
.sx-bw { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px; }
.sx-bw div { --c: var(--navy); min-width: 0; display: flex; flex-direction: column; background: var(--bg); border: 2px solid var(--line); border-left: 6px solid var(--c); border-radius: 12px; padding: 5px 10px 6px; box-shadow: var(--hard) var(--line); }
.sx-bw small { font: 600 var(--t-xs) var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); }
.sx-bw b { font: 700 var(--t-md)/1.2 var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-bw span { font: 600 var(--t-cap) var(--f-head); font-variant-numeric: tabular-nums; }
.sx-bw .good span { color: var(--green-d); } .sx-bw .bad span { color: var(--coral-l); }
/* tower or chart: a two-way switch over the stage; in chart view, which chart */
.sx-view { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; gap: 2px; padding: 3px; background: #fff; border: 2px solid var(--line2); border-radius: 999px; box-shadow: 0 3px 0 var(--line); }
.sx-view button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; border-radius: 999px; padding: 4px 10px 4px 8px; font: 600 var(--t-xs)/1.25 var(--f-head); color: var(--dim); white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.sx-view button span { display: grid; }
.sx-view button.on { background: var(--navy); color: #fff; box-shadow: 0 2px 0 var(--navy-d); }
.sx-view.sx-sub { left: 8px; right: auto; display: none; }
.sx-view.sx-sub button { padding: 4px 10px; }
.sx-view.sx-sub button.on { background: var(--green); box-shadow: 0 2px 0 var(--green-d); }
.sx.chart .sx-view.sx-sub { display: flex; }
.sx.chart .sx-debt { display: none; }
/* option names and icons open the detail sheet */
.sx-tile-top { width: 100%; border: 0; background: none; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; border-radius: 10px; }
.sx-tile-top:active .sx-ic { transform: scale(.93); }
.sx-ic { position: relative; transition: transform .1s; }
.sx-info { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); color: #fff; font: italic 800 9.5px/14px Georgia, "Times New Roman", serif; text-align: center; box-shadow: 0 0 0 2px #fff; }
.sx-tile.locked .sx-info { background: var(--dim2); }
/* the card when single companies open: their icons overlap, and a note says real or made up */
.sx-ics { display: flex; flex: none; }
.sx-ics .sx-ic { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 0 0 2.5px #fff; }
.sx-ics .sx-ic + .sx-ic { margin-left: -12px; }
.sx-ics .sx-ic .ic { width: 28px; height: 28px; }
.sx-card-in p.sx-card-note { font: 600 var(--t-cap)/1.4 var(--f-body); color: var(--dim); background: var(--card2); border-radius: 12px; padding: 8px 11px; }
.sx-card-in p.sx-card-note.real { background: var(--blue-soft); color: var(--navy); }
/* a news line from that year, under a market banner */
.sx .sx-banner .sx-news { font: 600 var(--t-xs)/1.3 var(--f-head); color: rgba(255, 255, 255, .92); margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .35); max-width: 250px; }
/* the detail sheet: slides up over the game (the game keeps running) */
.sx-sheet { position: absolute; inset: 0; z-index: 28; display: flex; align-items: flex-end; justify-content: center; background: rgba(16, 24, 40, .38); opacity: 0; pointer-events: none; transition: opacity .25s; }
.sx-sheet.on { opacity: 1; pointer-events: auto; }
.sx-sheet-in { --c: var(--navy); width: min(440px, 100%); max-height: calc(100% - 54px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 2.5px solid var(--c); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -10px 30px rgba(16, 24, 40, .2); transform: translateY(40px); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.sx-sheet.on .sx-sheet-in { transform: none; }
.sx-sheet-top { display: flex; align-items: center; gap: 10px; }
.sx-sheet-top .sx-ic { width: 44px; height: 44px; border-radius: 14px; }
.sx-sheet-top .sx-ic .ic { width: 32px; height: 32px; }
.sx-sheet-top > div { flex: 1; min-width: 0; }
.sx-sheet-top small { display: block; font: 600 var(--t-xs) var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--dim2); }
.sx-sheet-top b { display: block; font: 700 var(--t-xl)/1.15 var(--f-head); }
.sx-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line2); background: #fff; color: var(--dim); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 0 var(--line); }
.sx-x:active { transform: translateY(1px); box-shadow: none; }
.sx-sheet-tag { font: 600 var(--t-sm)/1.35 var(--f-head); color: var(--dim); background: var(--card2); border-radius: 10px; padding: 6px 10px; }
.sx-sheet-tag.real { background: var(--blue-soft); color: var(--navy); }
.sx-about { font: 600 var(--t-md)/1.4 var(--f-head); color: var(--ink); }
.sx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sx-facts > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; background: var(--bg); border: 2px solid var(--line); border-radius: 14px; padding: 7px 10px 8px; }
.sx-facts small, .sx-yearly small, .sx-hold small { font: 600 var(--t-xs) var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); }
.sx-facts b { font: 600 var(--t-cap)/1.25 var(--f-head); }
.sx-meter { display: flex; gap: 3px; margin: 2px 0 1px; }
.sx-meter i { flex: 1; height: 8px; border-radius: 4px; background: var(--line); }
.sx-meter i.on:nth-child(1) { background: #30AE58; } .sx-meter i.on:nth-child(2) { background: #7DBE3C; } .sx-meter i.on:nth-child(3) { background: #F2B33D; }
.sx-meter i.on:nth-child(4) { background: #F07F4F; } .sx-meter i.on:nth-child(5) { background: #E5483D; }
.sx-yearly { display: flex; flex-direction: column; gap: 4px; }
.sx-yearly-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sx-yearly-top span { font: 600 var(--t-xs) var(--f-head); color: var(--dim); }
.sx-bars { display: block; width: 100%; height: 88px; }
.sx-empty { font: 600 var(--t-cap)/1.35 var(--f-head); color: var(--dim); background: var(--bg); border-radius: 10px; padding: 12px; text-align: center; }
.sx-hold { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sx-hold > div { min-width: 0; text-align: center; background: var(--bg); border: 2px solid var(--line); border-radius: 12px; padding: 6px 4px 7px; box-shadow: var(--hard) var(--line); }
.sx-hold b { display: block; font: 700 var(--t-body) var(--f-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-hold .good b { color: var(--green-d); } .sx-hold .bad b { color: var(--coral-l); }
.sx-sheet-foot { text-align: center; font: 600 var(--t-cap) var(--f-head); color: var(--dim); }

/* ---------- Chapter 3 · Skyline (big screen) ---------- */
.sc-sx { gap: .5vw; }
.sc-sx-chart { display: block; width: 100%; height: 9vw; margin-top: .4vw; }
.sc-sx-ret { display: flex; flex-direction: column; gap: .35vw; margin-top: .4vw; }
.sc-sx-ret div { display: grid; grid-template-columns: .9vw 1fr auto; gap: .6vw; align-items: center; font: 600 var(--s-sm) var(--f-head); }
.sc-sx-ret i { width: .9vw; height: .9vw; border-radius: 3px; }
.sc-sx-ret span { font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 .5vw; border-radius: 999px; }
.sc-sx-ret span.up { color: var(--green-d); } .sc-sx-ret span.down { color: var(--coral-l); }
.sc-sx-ret span.crash { color: #fff; background: var(--coral); }
.sc-sx-cmp { display: flex; flex-direction: column; gap: .5vw; background: #fff; border: 1px solid var(--line); border-radius: 1.4vw; padding: 1vw 1.1vw; box-shadow: var(--shadow); }
.sc-sx-cmp div { display: grid; grid-template-columns: 8vw 1fr auto; gap: .6vw; align-items: center; }
.sc-sx-cmp span { font: 600 var(--s-sm) var(--f-head); color: var(--dim); }
.sc-sx-cmp i { height: .9vw; border-radius: .45vw; background: var(--card2); overflow: hidden; }
.sc-sx-cmp em { display: block; height: 100%; border-radius: .45vw; }
.sc-sx-cmp b { font: 700 var(--s-sm) var(--f-head); font-variant-numeric: tabular-nums; }
.sx-tag small { font-weight: 700; }
/* real or made-up companies: a line on the market card, and the reveal on the results */
.sc-sx-co { font: 600 var(--s-sm)/1.35 var(--f-head); color: var(--dim); margin-top: .5vw; }
.sc-sx-co:empty { display: none; }
.sc-sx-co.real { color: var(--navy); }
.sc-sx-co.big { margin: 0; background: #fff; border: 1px solid var(--line); border-left: .3vw solid var(--gold); border-radius: 1.2vw; padding: .8vw 1vw; font-size: var(--s-sm); box-shadow: var(--shadow); }
.sc-sx-co.big b { color: var(--coral-l); font-weight: 700; }
@media (max-width: 359px) {
  .sx .sx-worth small, .sx .sx-hud .cf-day span { display: none; }
  .sx .sx-chip { padding: 2px 9px 2px 4px; }
  .sx .sx-chip b { font-size: var(--t-md); }
  .sx .sx-steps button { padding: 3px 8px; }
  .sx .sx-view button span { display: none; }
  .sx .sx-view button { padding: 4px 9px; font-size: var(--t-xs); }
  .sx .sx-hold b { font-size: var(--t-md); }
}

/* a phone held sideways: the game is built for upright phones, so ask for that (tablets and laptops are taller) */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body.player::after { content: "Turn your phone upright to play"; position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; background: var(--navy); color: #fff; font: 700 var(--t-2xl)/1.3 var(--f-head); text-align: center; }
}

/* a phone held sideways: the game is built upright, so ask for that instead of squeezing it */
@media (orientation: landscape) and (max-height: 500px) and (hover: none) {
  body.player::after { content: "Turn your phone upright to play"; position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; text-align: center; background: linear-gradient(180deg, #FFFFFF, var(--mint, #E8F7EE)); color: var(--navy, #213E8C); font: 700 22px/1.3 var(--f-head, sans-serif); }
}