:root{
--bg:#F3F4F1; --ink:#1A1F17; --muted:#59644F; --line:#C5CCBD;
--green:#4A7612; --on-green:#FFFFFF; --tint:#E3ECD2; --coin:#E0A21A; --on-coin:#2A1D00;
--sky:#E4ECDC; --hill1:#D3E1C1; --hill2:#BCD2A2; --grass:#4A7612; --grass2:#5C8A1E; --soil:#7A6644; --wall:#EDEFE6;
--display:"Bricolage Grotesque","Helvetica Neue",Arial,system-ui,sans-serif;
--text:"Newsreader",Georgia,"Times New Roman",serif;
--px:"Press Start 2P",ui-monospace,Menlo,Consolas,monospace;
--hdr:76px;
--gap:0px;
--stage-h:calc(100vh - env(safe-area-inset-top,0px) - var(--hdr) - env(safe-area-inset-bottom,0px));
--pw:clamp(56px,12vh,88px);
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
}
@supports (height:100dvh){
:root{
--stage-h:calc(var(--vh-px,100dvh) - env(safe-area-inset-top,0px) - var(--hdr));
--pw:clamp(56px,12svh,88px);
}
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#111610; --ink:#ECEFE8; --muted:#9AA593; --line:#33402D;
--green:#8FC84A; --on-green:#0F1A08; --tint:#1E2B17; --coin:#F0B53A; --on-coin:#2A1D00;
--sky:#16201A; --hill1:#1D2B1A; --hill2:#25381F; --grass:#8FC84A; --grass2:#7DB43E; --soil:#3A3322; --wall:#243020;
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--bg:#111610; --ink:#ECEFE8; --muted:#9AA593; --line:#33402D;
--green:#8FC84A; --on-green:#0F1A08; --tint:#1E2B17; --coin:#F0B53A; --on-coin:#2A1D00;
--sky:#16201A; --hill1:#1D2B1A; --hill2:#25381F; --grass:#8FC84A; --grass2:#7DB43E; --soil:#3A3322; --wall:#243020;
color-scheme:dark;
}
/* character themes */
:root[data-char="ember"]{
--bg:#F6F1EC; --ink:#231A15; --muted:#6B5A4E; --line:#DDCFC3;
--green:#C4501F; --on-green:#FFFFFF; --tint:#F7E1D3; --coin:#F3B817;
--sky:#F9E7D8; --hill1:#F0CDB0; --hill2:#E5B48E; --grass:#B5481B; --grass2:#C95B2A; --soil:#6A4430; --wall:#FBF3EA;
}
:root[data-char="slate"]{
--bg:#EFF2F6; --ink:#141B26; --muted:#4D5A6D; --line:#C6CEDA;
--green:#2F5D9E; --on-green:#FFFFFF; --tint:#DCE6F4; --coin:#E0A21A;
--sky:#DDE8F5; --hill1:#C5D6EC; --hill2:#A9C0DE; --grass:#2F5D9E; --grass2:#3F70B5; --soil:#4B5568; --wall:#F4F7FB;
}
@media (prefers-color-scheme: dark){
:root[data-char="ember"]:not([data-theme="light"]){
--bg:#1A120D; --ink:#F4E9E0; --muted:#B9A596; --line:#46342A;
--green:#F08A4B; --on-green:#2A1204; --tint:#2E1D13; --coin:#F7C948;
--sky:#26170F; --hill1:#3A2415; --hill2:#4A2E1B; --grass:#F08A4B; --grass2:#DC7A3F; --soil:#4A3322; --wall:#2E1F16;
}
:root[data-char="slate"]:not([data-theme="light"]){
--bg:#0F1520; --ink:#E8EDF5; --muted:#98A5BA; --line:#2B3A52;
--green:#7FB0F0; --on-green:#07142A; --tint:#18263A; --coin:#F0B53A;
--sky:#121D2E; --hill1:#182740; --hill2:#20344F; --grass:#7FB0F0; --grass2:#6AA0E4; --soil:#2E3A4D; --wall:#1B2638;
}
}
:root[data-theme="dark"][data-char="ember"]{
--bg:#1A120D; --ink:#F4E9E0; --muted:#B9A596; --line:#46342A;
--green:#F08A4B; --on-green:#2A1204; --tint:#2E1D13; --coin:#F7C948;
--sky:#26170F; --hill1:#3A2415; --hill2:#4A2E1B; --grass:#F08A4B; --grass2:#DC7A3F; --soil:#4A3322; --wall:#2E1F16;
}
:root[data-theme="dark"][data-char="slate"]{
--bg:#0F1520; --ink:#E8EDF5; --muted:#98A5BA; --line:#2B3A52;
--green:#7FB0F0; --on-green:#07142A; --tint:#18263A; --coin:#F0B53A;
--sky:#121D2E; --hill1:#182740; --hill2:#20344F; --grass:#7FB0F0; --grass2:#6AA0E4; --soil:#2E3A4D; --wall:#1B2638;
}
html{scroll-behavior:auto}
*,*::before,*::after{box-sizing:border-box}
body{transition:background .3s,color .3s;margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:40}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.px{font-family:var(--px);letter-spacing:.04em;text-transform:uppercase}
.todo{background:var(--tint);border:1px dashed var(--green);border-radius:4px;padding:0 6px;font-size:.95em}
/* header + HUD */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:39;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:12px;padding:8px 20px 4px}
.bar .mono{display:block;width:30px;height:30px;flex:none}
.bar .barname{font-family:var(--display);font-weight:600;letter-spacing:.02em;font-size:.95rem}
.bar .spacer{flex:1}
.pill{font-family:var(--display);font-weight:600;font-size:.85rem;border:1.5px solid var(--green);color:var(--ink);background:transparent;border-radius:999px;padding:6px 14px;cursor:pointer}
.pill:hover{background:var(--tint)}
.pill[aria-pressed="true"]{background:var(--green);color:var(--on-green)}
.hud{display:flex;align-items:center;gap:12px;padding:6px 20px 10px;font-size:9px}
.hud .lv{flex:none;min-width:58px}
.xp{flex:1;height:10px;border:2px solid var(--green);background:var(--bg);padding:1px}
.xp i{display:block;height:100%;width:0;background:var(--green)}
.hud .coins{flex:none;display:flex;align-items:center;gap:6px}
.coin{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--coin);border:2px solid var(--on-coin);flex:none}
body.state-select .hud{display:none}
/* character select */
.select{max-width:720px;margin:0 auto;padding:36px 20px 56px}
.select h1{margin:0;font-family:var(--display);font-size:clamp(2.1rem,10vw,4.6rem);line-height:1.02;letter-spacing:.14em;text-transform:uppercase}
.select h1 .a{display:block;font-weight:300}
.select h1 .b{display:block;font-weight:800}
.select .role{margin:22px 0 0;font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,3.6vw,1.3rem);max-width:30ch;line-height:1.3}
.select .pitch{margin:14px 0 0;max-width:46ch;color:var(--muted);font-size:1.1rem}
.select .choose{margin:36px 0 14px;font-size:10px}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pick{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 6px 12px;background:transparent;border:2px solid var(--line);cursor:pointer}
.pick:hover{border-color:var(--green)}
.pick[aria-pressed="true"]{border-color:var(--green);background:var(--tint);box-shadow:4px 4px 0 var(--green)}
.pick .face{width:min(80px,22vw);aspect-ratio:16/18}
.pick .face svg{display:block;width:100%;height:100%}
.pick .nm{font-size:9px}
.go{margin-top:24px;font-family:var(--display);font-weight:700;font-size:1.05rem;padding:14px 26px;border-radius:999px;border:1.5px solid var(--green);background:var(--green);color:var(--on-green);cursor:pointer}
.howto{margin:14px 0 0;color:var(--muted);font-size:.95rem}
/* side scroller */
.game{position:relative;height:calc(var(--travel,4200px) + var(--stage-h))}
.stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr));height:var(--stage-h);min-height:480px;display:flex;flex-direction:column;overflow:hidden}
.cardwrap{flex:0 0 auto;display:grid;padding:12px 20px 10px;max-width:640px;width:100%}
.card{--acc:var(--green);grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .25s;border:2px solid var(--ink);background:var(--bg);box-shadow:4px 4px 0 var(--acc);padding:12px 14px}
.card.on{opacity:1;visibility:visible;animation:cardIn .45s ease-out both,cardPulse .8s ease-out}
@keyframes cardIn{0%{opacity:0;transform:translateX(var(--from,28px))}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes cardPulse{0%{box-shadow:0 0 0 0 var(--acc),4px 4px 0 var(--acc)}100%{box-shadow:0 0 0 16px transparent,4px 4px 0 var(--acc)}}
@supports (color:color-mix(in srgb,red,blue)){
.card[data-i="1"]{--acc:color-mix(in srgb,var(--green) 92%,var(--coin))}
.card[data-i="2"]{--acc:color-mix(in srgb,var(--green) 80%,var(--coin))}
.card[data-i="3"]{--acc:color-mix(in srgb,var(--green) 68%,var(--coin))}
.card[data-i="4"]{--acc:color-mix(in srgb,var(--green) 56%,var(--coin))}
.card[data-i="5"]{--acc:color-mix(in srgb,var(--green) 44%,var(--coin))}
.card[data-i="6"]{--acc:color-mix(in srgb,var(--green) 32%,var(--coin))}
.card[data-i="7"]{--acc:var(--coin)}
.card[data-i="5"] .lvtag,.card[data-i="6"] .lvtag,.card[data-i="7"] .lvtag{color:var(--ink)}
}
.card .pips{display:flex;gap:3px;margin-left:auto}
.card .pips i{display:block;width:7px;height:7px;background:var(--line)}
.card .pips i.f{background:var(--acc)}
.card .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px;font-size:8px}
.card .lvtag{background:var(--acc);color:var(--on-green);padding:5px 7px 4px}
.card .rank{color:var(--muted)}
.card .when{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,5vw,1.8rem);line-height:1;color:var(--acc)}
.card h2{margin:4px 0 6px;font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,3.8vw,1.35rem);line-height:1.2}
.card p{margin:0 0 6px;font-size:.98rem;line-height:1.45}
.card ul{margin:4px 0 6px;padding-left:1.1em;font-size:.95rem;line-height:1.4}
.card li{margin:0 0 4px}
.card li::marker{color:var(--acc)}
.card .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.card .stats div{border-top:2px solid var(--acc);padding-top:4px}
.card .stats b{display:block;font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1}
.card .stats span{display:block;font-size:.78rem;line-height:1.2;color:var(--muted);margin-top:2px}
.scene{position:relative;flex:1 1 auto;min-height:190px;background:linear-gradient(to bottom,var(--sky) calc(100% - var(--gap) - env(safe-area-inset-bottom,0px)),var(--soil) calc(100% - var(--gap) - env(safe-area-inset-bottom,0px)));overflow:hidden;border-top:2px solid var(--ink)}
.play{position:absolute;left:0;right:0;top:0;bottom:calc(var(--gap) + env(safe-area-inset-bottom,0px));overflow:hidden}
.far,.mid{position:absolute;left:0;right:0;bottom:36px}
.far{height:110px;background:radial-gradient(ellipse 190px 100px at 50% 100%,var(--hill1) 97%,transparent 100%) 0 100%/400px 110px repeat-x}
.mid{height:70px;background:radial-gradient(ellipse 120px 66px at 50% 100%,var(--hill2) 97%,transparent 100%) 0 100%/250px 70px repeat-x}
.world{position:absolute;left:0;top:0;bottom:0;width:0;will-change:transform}
.ground{position:absolute;left:0;right:0;bottom:0;height:36px;z-index:3;border-top:2px solid var(--ink);background:
linear-gradient(90deg,var(--grass) 50%,var(--grass2) 50%) 0 0/48px 8px repeat-x,
linear-gradient(90deg,transparent 95%,rgba(0,0,0,.14) 95%) 0 8px/40px 28px repeat-x,
var(--soil)}
.scn{position:absolute;bottom:36px;width:min(230px,56vw);height:auto;overflow:visible}
.scn *{vector-effect:non-scaling-stroke}
.gate{position:absolute;bottom:36px;width:0;z-index:1}
.gate .pole{position:absolute;left:0;bottom:0;width:3px;height:72px;background:var(--ink)}
.gate .flagpx{position:absolute;left:3px;bottom:46px;width:34px;height:22px;background:var(--green)}
.gate.fin .flagpx{background:repeating-conic-gradient(var(--ink) 0 25%,var(--bg) 0 50%) 0 0/11px 11px}
.gate .sign{position:absolute;left:-26px;bottom:76px;white-space:nowrap;font-size:8px;background:var(--ink);color:var(--bg);padding:5px 7px 4px}
.wcoin{position:absolute;bottom:calc(36px + var(--pw) * 1.125 + 4px);width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--coin);border:3px solid var(--on-coin);z-index:2;transition:opacity .25s,transform .35s}
.wcoin span{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);white-space:nowrap;font-family:var(--display);font-weight:600;font-size:.72rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:1px 5px;border-radius:3px}
.wcoin.got{opacity:0;transform:translateY(-30px) scale(1.4);pointer-events:none}
.wcoin.locked{background:transparent;border:3px dashed var(--muted);display:flex;align-items:center;justify-content:center;font-family:var(--px);font-size:9px;color:var(--muted)}
.wcoin.locked::before{content:"?"}
.wcoin.locked span{color:var(--muted)}
.player{position:absolute;left:32%;bottom:36px;width:var(--pw);height:calc(var(--pw) * 1.125);margin-left:calc(var(--pw) / -2);z-index:5}
.hopper{width:100%;height:100%}
.hopper.hop{animation:hop .5s ease-out}
.hopper.glow{animation:hop .6s ease-out,glow .9s ease-out}
.sprite{width:100%;height:100%}
.sprite svg{display:block;width:100%;height:100%}
.sprite.flip{transform:scaleX(-1)}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-34px)}70%{transform:translateY(0)}}
@keyframes glow{0%{filter:drop-shadow(0 0 0 var(--coin))}30%{filter:drop-shadow(0 0 10px var(--coin))}100%{filter:drop-shadow(0 0 0 var(--coin))}}
.team{position:absolute;left:32%;bottom:36px;width:0;height:36px;z-index:4}
.mate{position:absolute;bottom:0;width:24px;height:36px}
.mate svg{display:block;width:100%;height:100%}
.scene.walking .mate svg{animation:bob .3s steps(2) infinite}
.scene.walking .mate:nth-child(2) svg{animation-delay:.1s}
.scene.walking .mate:nth-child(3) svg{animation-delay:.2s}
@keyframes bob{0%{transform:translateY(0)}100%{transform:translateY(-3px)}}
.say{position:absolute;z-index:6;pointer-events:none;font-size:9px;white-space:nowrap;color:var(--on-coin);background:var(--coin);padding:5px 7px 4px;transform:translateX(-50%);animation:say 1.3s ease-out forwards}
@keyframes say{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}
.bubble{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) scale(.6);transform-origin:50% 100%;opacity:0;pointer-events:none;z-index:7;width:max-content;max-width:min(200px,58vw);padding:7px 11px;background:var(--bg);color:var(--ink);border:2px solid var(--ink);border-radius:14px;font-family:var(--display);font-weight:700;font-size:.8rem;line-height:1.2;text-align:center;transition:opacity .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.bubble.show{opacity:1;transform:translateX(-50%) scale(1)}
.bubble::after{content:"";position:absolute;left:50%;top:100%;width:10px;height:10px;background:var(--bg);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translate(-50%,-6px) rotate(45deg)}
.hint{position:absolute;left:50%;top:46px;transform:translateX(-50%);font-size:8px;color:var(--on-coin);background:var(--coin);padding:6px 9px 5px;white-space:nowrap;z-index:6;transition:opacity .3s;pointer-events:none}
.hint.off{opacity:0}
/* finish */
.finish-sec{max-width:720px;margin:0 auto;padding:40px 20px 80px}
.next{background:var(--green);color:var(--on-green);padding:26px 22px;border-radius:6px}
.next h2{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,4.6vw,1.7rem)}
.next .score{display:block;margin:10px 0 4px;font-size:clamp(16px,5.5vw,24px);line-height:1.2}
.next .tally{margin:0 0 14px;font-size:.95rem}
.next p{margin:0 0 10px;max-width:52ch}
.next a{font-family:var(--display);font-weight:700}
.next .todo{background:transparent;border-color:currentColor}
.next .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.next button{font-family:var(--display);font-weight:700;font-size:.9rem;padding:9px 16px;border-radius:999px;border:1.5px solid var(--on-green);background:transparent;color:var(--on-green);cursor:pointer}
.bonus{margin:6px 0 16px;padding:14px 14px 16px;border:2px dashed var(--on-green)}
.bonus .px{margin:0 0 6px;font-size:9px}
.bonus h3{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,4.4vw,1.5rem);line-height:1.15}
.bonus p{margin:0 0 12px}
.book{display:inline-block;background:var(--on-green);color:var(--green);font-family:var(--display);font-weight:800;font-size:1rem;padding:12px 22px;border-radius:999px;text-decoration:none}
.book:hover{opacity:.9}
.card .book2{display:inline-block;margin-top:4px;background:var(--green);color:var(--on-green);font-family:var(--display);font-weight:800;font-size:.95rem;padding:9px 18px;border-radius:999px;text-decoration:none}
.card .book2:hover{opacity:.9}
.next .book{margin:0}
.next .lead{margin:0 0 4px;font-size:9px}
.next .lock{margin:0 0 12px;font-size:9px;opacity:.85}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:8px 0 16px}
.chips li{border:1.5px solid var(--on-green);border-radius:999px;padding:3px 12px;font-family:var(--display);font-weight:600;font-size:.9rem}
.socials{margin:0 0 14px}
@media (max-height:760px){
.card{padding:10px 12px}
.card p{font-size:.9rem;line-height:1.4}
.card h2{font-size:1.05rem}
}
.soc{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:2px solid currentColor;border-radius:50%;margin:0 10px 0 0;color:inherit;text-decoration:none}
.soc svg{display:block;width:22px;height:22px}
.soc:hover{opacity:.8}
.socrow{margin:0 0 14px}
/* toast */
.toast{position:absolute;top:8px;left:50%;transform:translate(-50%,-10px);opacity:0;z-index:8;width:max-content;max-width:calc(100% - 24px);padding:6px 10px;background:var(--ink);color:var(--bg);font-family:var(--display);font-weight:600;font-size:.8rem;line-height:1.25;border-radius:6px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{font-family:var(--px);font-weight:400;font-size:8px;color:var(--coin);display:inline-block;margin:0 8px 0 0;letter-spacing:.04em;text-transform:uppercase}
/* plain CV */
.plaindoc{max-width:720px;margin:0 auto;padding:32px 20px 80px}
.plaindoc h1{margin:0;font-family:var(--display);font-size:2rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.plaindoc h1 b{font-weight:800}
.plaindoc h1 span{font-weight:300}
.plaindoc .role{margin:10px 0 4px;font-family:var(--display);font-weight:500}
.plaindoc .contact{margin:0 0 20px;color:var(--muted)}
.plaindoc h2{margin:28px 0 6px;font-family:var(--display);font-weight:700;font-size:1.3rem}
.plaindoc .when{margin:0;font-family:var(--display);font-weight:800;color:var(--green)}
.plaindoc p{margin:0 0 8px}
.plaindoc ul{margin:6px 0;padding-left:1.1em}
.plaindoc li::marker{color:var(--green)}
.plaindoc dl{margin:0;border-top:1px solid var(--line)}
.plaindoc dl div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.plaindoc dt{font-family:var(--display);font-weight:700}
.plaindoc dd{margin:0}
.plaindoc{display:none}
body.plain .plaindoc{display:block}
body.plain #select,body.plain #game,body.plain #finish,body.plain .hud,body.plain .toast{display:none}
body.state-select #game,body.state-select #finish{display:none}
body.state-play #select{display:none}
@media (prefers-reduced-motion: reduce){
.hopper.hop,.hopper.glow,.scene.walking .mate svg{animation:none}
.say{animation:none;opacity:1}
.card,.toast,.wcoin,.bubble{transition:none}
.card.on{animation:none}
}
@media print{
.top,.select,.game,.finish-sec,.toast{display:none}
.plaindoc{display:block}
body{background:#fff;color:#000}
}