/* SPLIT SECOND - silver and ice blue on near-black */
:root{ --ink:#eef3f8; --dim:rgba(238,243,248,.66); --faint:rgba(238,243,248,.4); --ice:#9fe3ff; --ice2:#58c2ff; --silver:#d9e2ec; --gold:#f0cd7e; --bad:#ff6b6b; --panel:rgba(9,12,18,.82); --line:rgba(159,227,255,.22);
  --disp:'Oxanium', 'Inter', system-ui, sans-serif; --ui:'Inter', system-ui, sans-serif; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; background:#07090d; color:var(--ink); font-family:var(--ui); -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:none; overscroll-behavior:none; }
*::selection{ background:transparent; }
input, select{ -webkit-user-select:text; user-select:text; }
.hidden{ display:none !important; }
#game, #game canvas{ position:fixed; inset:0; width:100%; height:100%; display:block; }
#buildTag{ position:fixed; right:6px; bottom:4px; font:10px monospace; color:rgba(255,255,255,.22); z-index:9999; pointer-events:none; }
button{ font:inherit; color:inherit; }

/* cinema bars for the intro and replays */
#bars i{ position:fixed; left:0; right:0; height:0; background:#000; z-index:3; transition:height .6s ease; pointer-events:none; }
#bars i:first-child{ top:0; } #bars i:last-child{ bottom:0; }
#bars.on i{ height:7vh; }

.screen{ position:fixed; inset:0; z-index:20; display:flex; }

/* ---------- menu ---------- */
#menu{ flex-direction:column; padding:max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); pointer-events:none; background:linear-gradient(90deg, rgba(4,6,10,.0) 30%, rgba(4,6,10,.72) 70%); }
#menu > *{ pointer-events:auto; }
.menuTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mdt-back{ color:var(--ink); text-decoration:none; font-weight:700; font-size:14px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.acct{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); cursor:pointer; font-weight:700; font-size:14px; }
.acct .mxc{ display:inline-flex; align-items:center; gap:4px; color:var(--gold); }
.menuBody{ margin-left:auto; width:min(460px, 100%); margin-top:auto; margin-bottom:auto; display:flex; flex-direction:column; gap:14px; }
.logo{ display:flex; flex-direction:column; line-height:.86; font-family:var(--disp); font-weight:800; letter-spacing:.06em; }
.logo .l1{ font-size:clamp(46px, 8vw, 84px); color:var(--silver); text-shadow:0 0 30px rgba(159,227,255,.35); }
.logo .l2{ font-size:clamp(46px, 8vw, 84px); color:transparent; -webkit-text-stroke:2px var(--ice); text-shadow:6px 0 0 rgba(159,227,255,.18), 12px 0 0 rgba(159,227,255,.08); }
.tag{ margin:0; color:var(--dim); font-size:15px; line-height:1.45; max-width:400px; }
.levels{ display:grid; gap:8px; }
.lvl{ display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; text-align:left; padding:12px 14px; border-radius:14px; background:rgba(12,16,24,.78); border:1px solid var(--line); cursor:pointer; transition:transform .15s, border-color .15s, background .15s; }
.lvl:hover:not(.locked){ transform:translateX(-4px); border-color:var(--ice); background:rgba(20,30,44,.85); }
.lvl .n{ font-family:var(--disp); font-size:26px; font-weight:800; color:var(--ice); text-align:center; }
.lvl .t b{ display:block; font-family:var(--disp); font-size:18px; letter-spacing:.03em; }
.lvl .t small{ display:block; color:var(--faint); font-size:12.5px; margin-top:2px; }
.lvl .s{ display:flex; gap:3px; }
.lvl .s i, .stars i{ width:16px; height:16px; display:inline-block; background:rgba(255,255,255,.15); clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.lvl .s i.on{ background:var(--gold); }
.lvl.locked{ opacity:.45; cursor:default; }
.howto{ font-size:12.5px; color:var(--faint); line-height:1.5; }
.howto b{ display:block; color:var(--dim); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:2px; }
@media (max-aspect-ratio: 11/10){
  #menu{ background:linear-gradient(180deg, rgba(4,6,10,0) 25%, rgba(4,6,10,.85) 58%); }
  .menuBody{ margin:auto auto 0; width:100%; }
  .logo .l1, .logo .l2{ font-size:clamp(40px, 13vw, 64px); }
}

/* ---------- HUD ---------- */
#hud{ position:fixed; inset:0; z-index:10; pointer-events:none; }
.hudTop{ position:absolute; left:0; right:0; top:0; display:flex; justify-content:space-between; align-items:flex-start; padding:max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
.obj{ display:grid; gap:5px; }
.obj div{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(6,9,14,.6); font-size:13px; font-weight:600; max-width:min(330px, 62vw); }
.obj div i{ width:10px; height:10px; border-radius:3px; border:2px solid var(--ice); flex:0 0 auto; }
.obj div.bonus i{ border-color:var(--gold); border-radius:50%; }
.obj div.done{ color:var(--faint); } .obj div.done i{ background:var(--ice); }
.obj div.bonus.done i{ background:var(--gold); }
.obj div b{ margin-left:auto; font-family:var(--disp); color:var(--ice); padding-left:8px; }
.obj div.bonus b{ color:var(--gold); }
.hudRight{ pointer-events:auto; margin-left:auto; }
.ibtn{ width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(6,9,14,.6); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ibtn svg{ width:20px; height:20px; fill:var(--ink); }
#levelTitle{ position:absolute; left:50%; top:22%; transform:translate(-50%, 10px); text-align:center; opacity:0; transition:opacity .6s, transform .6s; width:min(90vw, 560px); }
#levelTitle.show{ opacity:1; transform:translate(-50%, 0); }
#levelTitle small{ display:block; font-family:var(--disp); letter-spacing:.3em; color:var(--ice); font-size:12px; }
#levelTitle b{ display:block; font-family:var(--disp); font-size:clamp(36px, 7vw, 64px); font-weight:800; letter-spacing:.04em; text-shadow:0 2px 30px rgba(0,0,0,.7); }
#levelTitle span{ display:block; color:var(--dim); font-size:15px; text-shadow:0 1px 10px rgba(0,0,0,.8); }
#banner{ position:absolute; left:50%; top:30%; transform:translate(-50%, 0) scale(.9); text-align:center; opacity:0; pointer-events:none; }
#banner.show{ animation:ban 2.4s ease forwards; }
@keyframes ban{ 0%{ opacity:0; transform:translate(-50%, 0) scale(1.25); filter:blur(6px); } 12%{ opacity:1; transform:translate(-50%, 0) scale(1); filter:none; } 80%{ opacity:1; } 100%{ opacity:0; } }
#banner b{ display:block; font-family:var(--disp); font-size:clamp(30px, 6vw, 54px); font-weight:800; letter-spacing:.08em; color:var(--silver); text-shadow:0 0 24px rgba(159,227,255,.6), 4px 0 0 rgba(159,227,255,.25); }
#banner span{ display:block; margin-top:4px; color:var(--dim); font-weight:600; text-shadow:0 1px 8px #000; }
#toast{ position:absolute; left:50%; top:max(64px, calc(env(safe-area-inset-top) + 56px)); transform:translate(-50%, -8px); padding:8px 14px; border-radius:999px; background:rgba(8,12,18,.82); border:1px solid var(--line); font-weight:700; font-size:13.5px; opacity:0; transition:opacity .25s, transform .25s; white-space:nowrap; }
#toast.show{ opacity:1; transform:translate(-50%, 0); }
#toast.bad{ border-color:rgba(255,107,107,.6); color:#ffd0d0; }
#prompt{ position:absolute; left:0; top:0; padding:6px 10px; border-radius:10px; background:rgba(8,12,18,.85); border:1px solid var(--ice); color:var(--ink); font-weight:700; font-size:13px; white-space:nowrap; opacity:0; transition:opacity .12s; display:flex; gap:6px; align-items:center; }
#prompt.show{ opacity:1; }
#prompt kbd{ font-family:var(--disp); font-size:11px; padding:1px 6px; border-radius:5px; background:var(--ice); color:#06121c; }
.meterWrap{ position:absolute; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(440px, 70vw); display:flex; align-items:center; gap:10px; }
.meterLbl{ display:flex; align-items:center; gap:4px; font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.1em; color:var(--ice); min-width:70px; }
.meterLbl svg{ width:16px; height:16px; fill:var(--ice); }
.meter{ flex:1; height:10px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; border:1px solid rgba(159,227,255,.25); }
.meter i{ display:block; height:100%; transform-origin:left; background:linear-gradient(90deg, #6fd0ff, #e6f6ff); box-shadow:0 0 14px rgba(159,227,255,.8); }
.meterWrap.on .meter i{ animation:shim 1s linear infinite; }
@keyframes shim{ 50%{ filter:brightness(1.35); } }
.meterWrap.low .meter i{ background:linear-gradient(90deg, #ff7a6a, #ffd0c8); }
body.slowed #hud .obj div{ background:rgba(6,9,14,.45); }

/* touch controls */
#touch{ display:none; }
body.touch #touch{ display:block; }
#stickZone{ position:absolute; left:0; bottom:0; width:45vw; height:55vh; pointer-events:auto; }
#stickBase{ position:absolute; width:110px; height:110px; margin:-55px 0 0 -55px; border-radius:50%; border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); opacity:0; transition:opacity .15s; left:22vw; top:72vh; }
#stickBase.on{ opacity:1; }
/* the ring past the rim: push out there, straight ahead, for a burst */
#stickBase::after{ content:''; position:absolute; left:50%; top:50%; width:192px; height:192px; margin:-96px; border-radius:50%; border:2px dashed rgba(240,205,126,.28); pointer-events:none; transition:border-color .15s, box-shadow .15s; }
#stickBase.boost::after{ border-style:solid; border-color:rgba(240,205,126,.9); box-shadow:0 0 18px rgba(240,205,126,.5); }
#stickBase.boost #stickKnob{ background:rgba(255,226,150,.85); }
#lockHint{ position:absolute; left:50%; top:max(64px, env(safe-area-inset-top)); transform:translateX(-50%); padding:6px 12px; border-radius:10px; background:rgba(8,12,18,.7); border:1px solid var(--line); font-size:12.5px; color:var(--ink); opacity:0; pointer-events:none; transition:opacity .25s; white-space:nowrap; }
#lockHint.show{ opacity:.9; }
#stickKnob{ position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px; border-radius:50%; background:rgba(230,240,250,.55); }
.tbtn{ position:absolute; pointer-events:auto; border-radius:50%; border:2px solid rgba(255,255,255,.2); background:rgba(8,12,18,.6); display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--disp); font-weight:800; letter-spacing:.08em; touch-action:none; }
.tbtn.speed{ right:max(22px, env(safe-area-inset-right)); bottom:max(70px, calc(env(safe-area-inset-bottom) + 56px)); width:92px; height:92px; font-size:12px; border-color:var(--ice); box-shadow:0 0 22px rgba(159,227,255,.35); }
.tbtn.speed svg{ width:34px; height:34px; fill:var(--ice); }
body.slowed .tbtn.speed{ background:rgba(159,227,255,.85); color:#06121c; } body.slowed .tbtn.speed svg{ fill:#06121c; }
.tbtn.speed.empty{ opacity:.35; border-color:rgba(255,255,255,.2); box-shadow:none; }
.tbtn.act{ right:max(124px, calc(env(safe-area-inset-right) + 104px)); bottom:max(40px, calc(env(safe-area-inset-bottom) + 30px)); width:68px; height:68px; font-size:12px; opacity:.55; }
.tbtn.act.ready{ opacity:1; border-color:var(--gold); color:var(--gold); }
body.touch .meterWrap{ bottom:max(10px, env(safe-area-inset-bottom)); width:min(300px, 46vw); }

/* ---------- cards: results, pause, sign in ---------- */
#results, #pause, #signin{ align-items:center; justify-content:center; padding:20px; background:radial-gradient(ellipse at 50% 40%, rgba(10,16,26,.55), rgba(2,3,6,.85)); }
.card{ width:min(440px, 100%); max-height:100%; overflow:auto; padding:22px 20px; border-radius:20px; background:var(--panel); border:1px solid var(--line); text-align:center; }
.kick{ font-family:var(--disp); letter-spacing:.28em; color:var(--ice); font-size:12px; }
.card h2{ font-family:var(--disp); font-size:30px; margin:6px 0 10px; letter-spacing:.04em; }
.stars{ display:flex; justify-content:center; gap:10px; margin:6px 0 14px; }
.stars i{ width:44px; height:44px; transition:transform .35s cubic-bezier(.2,1.6,.4,1), background .2s; transform:scale(.8); }
.stars i.on{ background:var(--gold); transform:scale(1); filter:drop-shadow(0 0 10px rgba(240,205,126,.7)); }
.resList{ display:grid; gap:4px; text-align:left; margin-bottom:10px; }
.resList div{ display:flex; justify-content:space-between; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.04); font-size:14px; }
.resList div.ok b{ color:var(--ice); } .resList div.no b{ color:var(--bad); }
.resList .hint{ background:none; color:var(--faint); font-size:12px; justify-content:center; }
.resMxc{ display:flex; align-items:center; justify-content:center; gap:6px; color:var(--gold); font-weight:700; font-size:14px; min-height:20px; margin-bottom:10px; }
.btns{ display:grid; gap:8px; margin-top:6px; }
.btn{ padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); font-weight:800; font-size:15px; cursor:pointer; }
.btn.gold{ background:linear-gradient(180deg, #e7f6ff, #9fd8ff); color:#06121c; border-color:transparent; }
.btn.ghost{ background:transparent; color:var(--dim); }
.btn.small{ padding:8px 12px; font-size:13px; border-radius:10px; }
.set{ display:grid; gap:10px; text-align:left; margin-bottom:10px; }
.set label{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600; font-size:14px; }
.set input[type=range]{ width:58%; accent-color:var(--ice2); }
.set select{ background:#111823; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 8px; }
.muted{ color:var(--dim); font-size:14px; margin:0 0 12px; }
#signForm{ display:grid; gap:8px; }
#signForm input{ padding:12px; border-radius:10px; border:1px solid var(--line); background:#0d131c; color:var(--ink); font-size:16px; }
.err{ color:var(--bad); font-size:13px; min-height:16px; }

/* ---------- replay ---------- */
#replayUI{ position:fixed; inset:0; z-index:12; pointer-events:none; }
.rTop{ position:absolute; left:0; right:0; top:calc(7vh + 10px); display:flex; justify-content:center; align-items:center; gap:10px; font-family:var(--disp); letter-spacing:.2em; }
.rTop b{ font-size:16px; }
.rTop span:last-child{ font-family:var(--ui); letter-spacing:0; color:var(--dim); font-size:13px; }
.rec{ width:10px; height:10px; border-radius:50%; background:#ff4a4a; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.2; } }
.rBottom{ position:absolute; left:50%; bottom:calc(7vh + 10px); transform:translateX(-50%); width:min(520px, 92vw); pointer-events:auto; }
.rBar{ height:4px; border-radius:3px; background:rgba(255,255,255,.2); overflow:hidden; margin-bottom:8px; }
.rBar i{ display:block; height:100%; width:0; background:var(--ice); }
.rBtns{ display:flex; gap:8px; justify-content:center; }

#loading{ position:fixed; inset:0; z-index:50; background:#07090d; display:flex; align-items:center; justify-content:center; transition:opacity .6s; }
#loading.gone{ opacity:0; pointer-events:none; }
.ld{ display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800; letter-spacing:.2em; color:var(--silver); }
.ld svg{ width:28px; height:28px; fill:var(--ice); animation:blink 0.8s steps(2) infinite; }

/* ---------- cutscene ---------- */
#cutUI{ position:fixed; inset:0; z-index:11; pointer-events:none; }
#cutCap{ position:absolute; left:0; right:0; bottom:calc(7vh + 18px); text-align:center; opacity:0; transform:translateY(8px); transition:opacity .7s ease, transform .7s ease; padding:0 18px; }
#cutCap.show{ opacity:1; transform:none; }
#cutCap small{ display:block; font-family:var(--disp); letter-spacing:.32em; font-size:11px; color:var(--ice); margin-bottom:4px; }
#cutCap b{ font-family:var(--ui); font-weight:600; font-size:clamp(16px, 2.6vw, 22px); text-shadow:0 2px 14px #000, 0 0 2px #000; }
#skipCut{ position:absolute; right:max(14px, env(safe-area-inset-right)); top:calc(7vh + 10px); pointer-events:auto; padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.45); font-weight:700; font-size:13px; cursor:pointer; }
#cutUI #levelTitle{ top:20%; }
.levels{ max-height:min(52vh, 430px); overflow-y:auto; padding-right:2px; }
.lvl{ padding:9px 12px; }

/* ---------- Maximus City ---------- */
.lvl.city{ border-color:rgba(240,205,126,.55); background:linear-gradient(100deg, rgba(40,32,14,.85), rgba(12,16,24,.8)); }
.lvl.city .n svg{ width:26px; height:26px; fill:var(--gold); display:block; margin:auto; }
.lvl.city .t b{ color:var(--gold); }
.lvl.city .s em{ font-style:normal; font-family:var(--disp); font-size:10.5px; letter-spacing:.14em; color:#1a1406; background:var(--gold); padding:3px 7px; border-radius:6px; }
.lvl.city:hover{ border-color:var(--gold); }
#busy{ position:fixed; inset:0; z-index:40; background:rgba(4,6,10,.88); display:flex; align-items:center; justify-content:center; }
body.city .hudTop .obj{ display:none; }
#cityHud{ position:absolute; inset:0; pointer-events:none; }
.cTop{ position:absolute; top:max(12px, env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); right:calc(max(14px, env(safe-area-inset-right)) + 166px); display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.cScore{ display:flex; align-items:baseline; gap:8px; padding:6px 12px; border-radius:12px; background:rgba(6,9,14,.6); }
.cScore b{ font-family:var(--disp); font-size:22px; font-weight:800; color:var(--silver); letter-spacing:.03em; }
.cScore span{ font-size:12.5px; color:var(--dim); font-weight:600; }
.cAlert{ display:none; align-items:center; gap:10px; padding:8px 12px 8px 10px; border-radius:14px; background:rgba(28,8,8,.82); border:1px solid rgba(255,90,70,.6); max-width:min(460px, 100%); box-shadow:0 6px 28px rgba(0,0,0,.35); }
.cAlert.show{ display:flex; animation:alertIn .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes alertIn{ from{ transform:translateY(-14px) scale(.96); opacity:0; } }
.cAlert.alert{ animation:alertIn .45s cubic-bezier(.2,1.4,.4,1), alertPulse 1.2s ease-in-out .45s infinite; }
@keyframes alertPulse{ 50%{ border-color:rgba(255,140,110,.95); box-shadow:0 0 22px rgba(255,80,60,.35); } }
.cAlert.live{ background:rgba(60,10,8,.9); border-color:#ff5a3a; }
.cAlert.done{ background:rgba(8,26,18,.85); border-color:rgba(127,224,160,.6); }
.cIco{ width:30px; height:30px; flex:0 0 auto; border-radius:9px; background:#ff5a3a center/20px no-repeat; }
.cAlert.done .cIco{ background-color:#3fbf78; }
.cAlert.gun .cIco{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2 8h17l1-2h2v5h-6l-1 2h-3l-1 3H7l1-3H5l-1 6H1l1-6z'/%3E%3C/svg%3E"); }
.cAlert.car .cIco{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11l2-5h10l2 5h1a1 1 0 0 1 1 1v5h-2a2 2 0 0 1-4 0H9a2 2 0 0 1-4 0H3v-5a1 1 0 0 1 1-1zm2.3 0h9.4l-1.2-3H8.5z'/%3E%3C/svg%3E"); }
.cAlert.crane .cIco{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 22V6H2V4h20v2H14v3h-2V6H8v16h2v-6h2v6h2v-4l2-2v6h2v2z'/%3E%3C/svg%3E"); }
.cAlert.fire .cIco{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2c1 3.5 5 5.5 5 11a5 5 0 0 1-10 0c0-2.4 1.1-4 2.4-5.4.2 1.7.9 2.9 2.1 3.4C11 8 11.2 5 12 2zm0 13.5c-.9 1-1.4 1.9-1.4 2.8a1.4 1.4 0 0 0 2.8 0c0-.9-.5-1.8-1.4-2.8z'/%3E%3C/svg%3E"); }
.cAlert.fall .cIco{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 2h18v2h-2v4h-2V4H7v4H5V4H3zm6 8.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0zM8 14l3-1.5h2L16 14l-1 1.6-2-1V18l2 4h-2.2L11 18.6 9.2 22H7l2-4v-3.4l-1 .9z'/%3E%3C/svg%3E"); }
.cAlert.bus .cIco{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 3h14a2 2 0 0 1 2 2v12h-1v2a1 1 0 0 1-2 0v-2H6v2a1 1 0 0 1-2 0v-2H3V5a2 2 0 0 1 2-2zm0 3v5h14V6zm1.5 7.5a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4zm11 0a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/%3E%3C/svg%3E"); }
.cTxt{ display:flex; flex-direction:column; min-width:0; }
.cTxt small{ font-family:var(--disp); font-weight:800; letter-spacing:.14em; font-size:12px; color:#ffb4a6; }
.cAlert.done .cTxt small{ color:#9ff0c0; }
.cTxt b{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cTxt span{ font-size:12.5px; color:var(--dim); }
.cTxt span b{ font-family:var(--disp); font-size:15px; color:#fff; }
.cMapWrap{ position:absolute; top:calc(max(12px, env(safe-area-inset-top)) + 52px); right:max(14px, env(safe-area-inset-right)); width:150px; display:flex; flex-direction:column; align-items:center; gap:4px; }
#cMap{ width:150px; height:150px; border-radius:50%; box-shadow:0 4px 20px rgba(0,0,0,.4); }
.cInfo{ display:flex; flex-direction:column; align-items:center; font-size:11.5px; font-weight:700; color:var(--ink); text-shadow:0 1px 6px #000; text-align:center; }
#cClock{ font-family:var(--disp); color:var(--ice); letter-spacing:.1em; }
#cMark{ position:absolute; left:0; top:0; display:none; flex-direction:column; align-items:center; margin:-34px 0 0 -18px; width:36px; }
#cMark.show{ display:flex; }
#cMark i{ width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-bottom:16px solid #ff5a3a; filter:drop-shadow(0 0 6px rgba(255,90,58,.8)); }
#cMark.live i{ border-bottom-color:#ffd04a; }
#cMark b{ margin-top:3px; font-family:var(--disp); font-size:12px; padding:1px 6px; border-radius:6px; background:rgba(8,10,14,.75); white-space:nowrap; }
.meterWrap.hunger{ bottom:calc(max(18px, env(safe-area-inset-bottom)) + 22px); }
.meterWrap.hunger .meterLbl, .meterWrap.hunger .meterLbl svg{ color:#ffc75a; fill:#ffc75a; }
.meterWrap.hunger .meter{ height:6px; border-color:rgba(255,199,90,.3); }
.meterWrap.hunger .meter i{ background:linear-gradient(90deg, #f0a030, #ffe0a0); box-shadow:0 0 10px rgba(255,190,90,.6); }
.meterWrap.hunger.low .meter i{ background:linear-gradient(90deg, #ff5a3a, #ffb0a0); animation:shim .6s linear infinite; }
body.touch .meterWrap.hunger{ bottom:calc(max(10px, env(safe-area-inset-bottom)) + 18px); }
@media (max-width:560px){
  .cMapWrap{ width:112px; top:calc(max(12px, env(safe-area-inset-top)) + 50px); }
  #cMap{ width:112px; height:112px; }
  .cTop{ right:calc(max(14px, env(safe-area-inset-right)) + 122px); }
  .cTxt b{ font-size:12.5px; white-space:normal; }
  .cScore b{ font-size:18px; }
}
body.touch.city .meterWrap{ left:max(14px, env(safe-area-inset-left)); transform:none; width:min(250px, 44vw); }
body.touch.city .meterWrap .meterLbl{ min-width:62px; font-size:12px; }
/* the city has no SPEED meter (it never runs out); energy takes its place */
body.city #meterWrap{ display:none; }
body.city .meterWrap.hunger{ bottom:max(18px, env(safe-area-inset-bottom)); }
body.city .meterWrap.hunger .meter{ height:10px; }
body.touch.city .meterWrap.hunger{ bottom:max(10px, env(safe-area-inset-bottom)); }
/* the dash: straight to the scene, on a long cooldown */
#dashBtn{ position:absolute; pointer-events:auto; right:max(18px, env(safe-area-inset-right)); bottom:calc(max(18px, env(safe-area-inset-bottom)) + 60px); width:76px; height:76px; border-radius:50%; border:2px solid var(--gold); background:radial-gradient(circle, rgba(60,44,10,.9), rgba(16,12,4,.85)); color:var(--gold); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-family:var(--disp); font-weight:800; font-size:11.5px; letter-spacing:.1em; cursor:pointer; touch-action:none; box-shadow:0 0 20px rgba(240,205,126,.45); animation:dashPulse 1s ease-in-out infinite; }
#dashBtn svg{ width:26px; height:26px; fill:none; stroke:var(--gold); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
#dashBtn.cool{ animation:none; opacity:.55; box-shadow:none; background:conic-gradient(rgba(10,10,10,.85) calc(var(--cd)*360deg), rgba(60,44,10,.9) 0); }
@keyframes dashPulse{ 50%{ box-shadow:0 0 34px rgba(240,205,126,.8); } }
body.touch #dashBtn{ bottom:max(176px, calc(env(safe-area-inset-bottom) + 166px)); right:max(30px, calc(env(safe-area-inset-right) + 30px)); }
.cTxt span b.urgent{ color:#ff8a70; animation:blink .5s steps(2) infinite; }

/* ---------- a hero's day (life.js) ---------- */
#lifeChip{ pointer-events:auto; display:grid; gap:4px; min-width:170px; padding:7px 10px; border-radius:12px; background:rgba(10,12,16,.72); border:1px solid rgba(255,174,58,.35); color:var(--ink); text-align:left; cursor:pointer; font:inherit; }
#lifeChip .lcR{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
#lifeChip b{ font-family:var(--disp); font-size:12.5px; color:#ffc46a; letter-spacing:.03em; white-space:nowrap; }
#lifeChip small{ font-size:11px; color:var(--dim); }
#lifeChip .lcBar{ display:block; height:4px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
#lifeChip .lcBar em{ display:block; height:100%; background:linear-gradient(90deg, #ffae3a, #ffe0a0); transform-origin:left; }
#lifeChip .lcA{ font-size:11px; color:var(--dim); }
#xpPop{ padding:4px 10px; border-radius:999px; background:rgba(40,26,6,.85); border:1px solid #ffae3a; color:#ffd890; font-weight:800; font-size:12.5px; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; pointer-events:none; white-space:nowrap; }
#xpPop.show{ opacity:1; transform:none; }
#wMark{ position:absolute; left:0; top:0; display:none; flex-direction:column; align-items:center; margin:-34px 0 0 -18px; width:36px; pointer-events:none; }
#wMark.show{ display:flex; }
#wMark i{ width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:15px solid #ffc24a; filter:drop-shadow(0 0 6px rgba(255,194,74,.8)); }
#wMark b{ margin-top:3px; font-family:var(--disp); font-size:11.5px; padding:1px 6px; border-radius:6px; background:rgba(30,20,4,.8); color:#ffe0a0; white-space:nowrap; }
#ticker{ position:absolute; left:50%; bottom:calc(max(18px, env(safe-area-inset-bottom)) + 46px); transform:translate(-50%, 10px); display:flex; gap:10px; align-items:center; max-width:min(560px, 92vw); padding:7px 14px; border-radius:10px; background:rgba(8,10,14,.85); border:1px solid rgba(255,255,255,.14); opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; }
#ticker.show{ opacity:1; transform:translate(-50%, 0); }
#ticker b{ font-size:10.5px; letter-spacing:.14em; color:#fff; background:#c8302a; padding:2px 6px; border-radius:4px; }
#ticker span{ font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#lifeFade{ position:fixed; inset:0; z-index:40; background:#000; opacity:0; pointer-events:none; transition:opacity .45s; }
#lifeFade.on{ opacity:1; }
#planner, #paper, #drill{ align-items:center; justify-content:center; padding:16px; background:radial-gradient(ellipse at 50% 40%, rgba(10,16,26,.5), rgba(2,3,6,.85)); z-index:25; touch-action:pan-y; }
.card.plan{ width:min(520px, 100%); text-align:left; touch-action:pan-y; }
.plan .pHead{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.plan .pHead small{ color:#ffc46a; font-weight:800; letter-spacing:.1em; font-size:11px; }
.plan .pHead h2{ margin:2px 0; font-size:26px; text-align:left; }
.plan .pAppr{ display:flex; flex-direction:column; align-items:center; font-family:var(--disp); font-size:24px; color:#ffd890; }
.plan .pAppr small{ font-size:10.5px; color:var(--dim); letter-spacing:.06em; }
.plan .pToday{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:12px 0 4px; }
.plan .pToday span{ display:flex; flex-direction:column; align-items:center; padding:6px 4px; border-radius:10px; background:rgba(255,255,255,.05); font-size:11px; color:var(--dim); }
.plan .pToday b{ font-family:var(--disp); font-size:18px; color:var(--ink); }
.plan h3{ margin:14px 0 6px; font-size:11.5px; letter-spacing:.14em; color:#ffc46a; }
.pRow{ display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; margin:0 0 6px; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.pRow span{ display:grid; gap:2px; min-width:0; }
.pRow b{ font-size:13.5px; }
.pRow small{ color:var(--dim); font-size:11.5px; }
.pRow em{ font-style:normal; font-family:var(--disp); font-size:12px; color:#ffd890; white-space:nowrap; }
.muted.small{ font-size:11px; text-align:center; margin-top:8px; }
.paperSheet{ width:min(600px, 100%); max-height:100%; overflow:auto; padding:20px 22px; border-radius:6px; background:#f1ebdc; color:#1c1a16; font-family:Georgia, 'Times New Roman', serif; box-shadow:0 20px 60px rgba(0,0,0,.6); touch-action:pan-y; }
.paperSheet .mast{ display:flex; justify-content:space-between; align-items:center; border-bottom:3px double #1c1a16; padding-bottom:6px; font-size:12px; font-family:var(--ui); }
.paperSheet .mast b{ font-size:clamp(20px, 5vw, 30px); letter-spacing:.06em; font-family:Georgia, serif; }
.paperSheet h1{ font-size:clamp(22px, 5.4vw, 34px); line-height:1.1; margin:14px 0 6px; }
.paperSheet .sub{ font-style:italic; margin:0 0 12px; color:#4a4438; }
.paperSheet .cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; border-top:1px solid #1c1a16; padding-top:10px; }
.paperSheet h3{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; margin:0 0 6px; }
.paperSheet ul{ margin:0; padding-left:18px; font-size:14px; line-height:1.6; }
.paperSheet p{ font-size:14px; margin:0 0 6px; }
.paperSheet .note{ font-style:italic; color:#4a4438; font-size:13px; }
.paperSheet .btn{ margin-top:14px; width:100%; }
@media (max-width:520px){ .paperSheet .cols{ grid-template-columns:1fr; } }
.drillCard .lights{ display:flex; justify-content:center; gap:10px; margin:14px 0; }
.drillCard .lights i{ width:38px; height:38px; border-radius:50%; background:#2a1a12; border:2px solid #3a2a1e; }
.drillCard .lights i.on{ background:radial-gradient(circle at 40% 35%, #ffb070, #e2401a); box-shadow:0 0 18px rgba(255,90,30,.8); }
.drillCard .drBig{ font-family:var(--disp); font-size:40px; color:#ffd890; min-height:48px; }
body.touch #lifeChip{ min-width:150px; }

/* the city rescues in the menu */
.lvlHead{ margin:12px 2px 6px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:800; }
.lvl.incity{ border-color:rgba(240,205,126,.28); }
.lvl.incity .n{ color:var(--gold); }

/* the big map (tap the minimap, or M) */
#cMap{ pointer-events:auto; cursor:pointer; touch-action:none; }
#bigMap{ align-items:center; justify-content:center; padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background:rgba(2,3,6,.86); z-index:26; }
.card.bm{ width:min(1040px, 100%); height:100%; max-height:760px; display:flex; flex-direction:column; text-align:left; padding:14px 16px; gap:10px; overflow:hidden; }
.bm .bmHead{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.bm .bmHead small{ color:#ffc46a; font-weight:800; letter-spacing:.1em; font-size:11px; }
.bm .bmHead h2{ margin:2px 0 0; font-size:22px; text-align:left; }
.bm .bmBtns{ display:flex; gap:8px; }
.bm .bmBtns .btn{ padding:8px 14px; font-size:13px; }
.bm .bmBody{ flex:1; min-height:0; display:flex; gap:12px; }
.bm .bmCanvasWrap{ flex:1; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; }
#bmCanvas{ border-radius:14px; touch-action:none; cursor:pointer; max-width:100%; max-height:100%; }
#bmList{ width:250px; overflow:auto; display:flex; flex-direction:column; gap:6px; }
#bmList h3{ margin:8px 0 2px; font-size:11px; letter-spacing:.12em; color:var(--dim); }
#bmList .bmRow{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink); cursor:pointer; font:inherit; }
#bmList .bmRow.on{ border-color:#ffd890; background:rgba(255,216,144,.12); }
#bmList .bmRow i{ flex:none; width:12px; height:12px; border-radius:50%; border:2px solid rgba(0,0,0,.5); }
#bmList .bmRow span{ flex:1; display:flex; flex-direction:column; min-width:0; }
#bmList .bmRow b{ font-size:13.5px; }
#bmList .bmRow small{ font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bmList .bmRow em{ font-style:normal; font-size:12px; color:var(--dim); }
@media (orientation:portrait){
  .bm .bmBody{ flex-direction:column; }
  #bmList{ width:auto; max-height:34%; }
}

/* the Skyline launcher's button (once you have it): hold to swing */
.tbtn.swing{ right:max(128px, calc(env(safe-area-inset-right) + 108px)); bottom:max(124px, calc(env(safe-area-inset-bottom) + 112px)); width:74px; height:74px; font-size:11px; border-color:#ff9a3a; color:#ffc27a; box-shadow:0 0 18px rgba(255,154,58,.35); }
.tbtn.swing svg{ width:28px; height:28px; fill:none; stroke:#ffb25a; stroke-width:2.2; stroke-linecap:round; }
.tbtn.swing.on{ background:rgba(255,154,58,.85); color:#1a0c02; } .tbtn.swing.on svg{ stroke:#1a0c02; }
.tbtn.hidden{ display:none; }

/* the Skyline reticle: grey when there's nothing to swing from, amber over a building */
#aimRet{ position:fixed; left:50%; top:42%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:2px solid rgba(255,255,255,.35); z-index:9; pointer-events:none; transition:border-color .12s, transform .12s; }
#aimRet i{ position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px; border-radius:50%; background:rgba(255,255,255,.6); }
#aimRet.ok{ border-color:#ffae3a; transform:scale(1.15); box-shadow:0 0 12px rgba(255,174,58,.55); }
#aimRet.ok i{ background:#ffcf7a; }
#aimRet.on{ opacity:.35; transform:scale(.8); }