:root{--ink:#10172b;--panel:#152139;--cream:#fff4dd;--lime:#d9ff63;--coral:#ff795c;--teal:#63dbde;--muted:#b4c2cc;--line:#ffffff23;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--cream);background:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:4px}[hidden]{display:none!important}#app{position:relative;height:100dvh;min-height:320px;overflow:hidden;isolation:isolate;background:#10172b}#stage{position:absolute;inset:0;display:grid;place-items:center}#game{width:min(100vw,calc(100dvh * 1.77778));height:min(100dvh,calc(100vw / 1.77778));touch-action:none;display:block;outline:none!important}
.screen{position:absolute;inset:0;z-index:30;display:none;padding:clamp(16px,3vw,42px);background:#10172bec;overflow:auto}.screen.active{display:grid;place-items:center}.screen#menu{background:linear-gradient(100deg,#10172b 40%,#15243cef);padding:0;overflow:auto}.title-layout{position:relative;display:grid;grid-template-columns:1.1fr 1fr;width:min(1150px,94vw);min-height:min(690px,100dvh);align-items:center;gap:4vw;margin:auto}.title-copy{z-index:2;padding:28px 0}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.2em;color:var(--lime);margin:0 0 15px}h1,h2{font-weight:1000;font-family:Impact,'Arial Black',system-ui,sans-serif;letter-spacing:-.045em;line-height:.9;margin:0}h1{font-size:clamp(76px,min(11.5vw,16vh),152px);transform:rotate(-3deg);transform-origin:left bottom;text-shadow:6px 6px 0 #0005}h1 em{color:var(--coral);font-style:normal}h2{font-size:clamp(32px,5vw,58px);line-height:1}.intro{font-size:clamp(20px,2.7vw,32px);font-weight:850;line-height:1.15;margin:24px 0 14px}.description{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 25px}.menu-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.primary,.secondary{border:2px solid transparent;padding:14px 22px;border-radius:8px;font-weight:950;font-size:14px;letter-spacing:.035em;min-height:49px;transition:transform .12s,background .12s;box-shadow:0 5px 0 #060c1a}.primary{background:var(--lime);color:var(--ink)}.primary span{margin-left:16px}.primary:hover{background:#eaff9e;transform:translateY(-2px)}.secondary{border-color:#ffffff3a;color:var(--cream);background:#24344d}.secondary:hover{background:#314667}.quiet{border:0;background:transparent;color:var(--muted);padding:12px;font-size:14px}.quiet:hover{color:var(--cream);text-decoration:underline}.build-label{color:#768a9c;font-size:11px;letter-spacing:.18em}.character-card{position:relative;align-self:stretch;min-height:380px;overflow:hidden}.character-card canvas{width:100%;height:100%;object-fit:contain;max-height:96dvh}.character-caption{position:absolute;bottom:9%;left:7%;right:0;transform:rotate(-4deg);padding:18px;background:var(--coral);color:var(--ink);box-shadow:7px 7px 0 #0005}.character-caption span{display:block;font-size:12px;font-weight:950;letter-spacing:.13em;margin-bottom:6px}.character-caption strong{font-size:clamp(18px,2vw,27px);line-height:1.05}.panel{background:#17243b;border:1px solid #ffffff30;border-radius:17px;box-shadow:0 18px 70px #0006;padding:clamp(22px,3vw,40px);width:100%;max-height:92dvh;overflow:auto}.wide{max-width:1100px}.compact{max-width:560px}.center{text-align:center}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.panel-head p:not(.eyebrow){color:var(--muted);margin-bottom:0}.square{flex-shrink:0;border:1px solid #ffffff35;color:var(--cream);background:#152039;border-radius:10px;width:44px;height:44px;font-weight:900;font-size:24px;display:grid;place-items:center}.square:hover{background:#344560}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.level-card{position:relative;border:1px solid #ffffff26;background:#213149;color:var(--cream);border-radius:10px;text-align:left;padding:13px;transition:.15s}.level-card:hover{border-color:var(--lime);transform:translateY(-3px)}.level-card canvas{width:100%;height:90px;background:#101b30;border-radius:5px}.level-card .num{position:absolute;top:19px;left:22px;font-weight:900;font-size:20px;color:var(--lime)}.level-card b{display:block;font-size:15px;margin:10px 0 5px}.level-card small{display:block;color:var(--muted);font-size:12px}.card-stars{display:block;color:#ffdb6d;letter-spacing:4px;font-size:21px;margin-top:8px}.note{font-size:13px;color:var(--muted);margin-bottom:0}.stack{display:grid;gap:12px;margin-top:24px}.panel ol{padding-left:22px;line-height:1.55}.panel li{padding:6px 0}.panel p{line-height:1.5}.materials{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:20px 0}.materials span{padding:13px 4px;border-radius:6px;text-align:center;font-size:11px;font-weight:950;color:#142037}.materials small{display:block;font-size:12px;font-weight:650;margin-top:6px}.wood{background:#e3a258}.glass{background:#67e5ec}.heavy{background:#7486a6}.steel{background:#344860;color:#fff!important}.keys{font-size:13px;color:var(--muted)}#hud{position:absolute;z-index:10;top:14px;left:50%;transform:translateX(-50%);width:min(1180px,96vw);display:flex;gap:16px;align-items:center;padding:10px 14px;background:#101a30ef;border:1px solid #ffffff29;border-radius:14px;box-shadow:0 5px 25px #0003}.level-title{flex:1;min-width:0}.level-title small{display:block;color:var(--teal);font-size:11px;font-weight:900;letter-spacing:.14em;margin-bottom:3px}.level-title strong{font-size:20px;white-space:nowrap}.counter{display:flex;align-items:center;gap:12px;border-left:1px solid #ffffff25;padding-left:18px}.counter small{font-size:10px;font-weight:850;letter-spacing:.1em;max-width:65px}.counter b{font-size:30px;color:var(--lime)}#playFooter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:min(1160px,94vw);z-index:10;display:flex;align-items:center;gap:14px;padding:10px 16px;background:#101a30e8;border:1px solid #ffffff20;border-radius:12px}#playFooter>div{flex:1;min-width:0}#stateLabel{display:block;color:var(--lime);font-size:12px;letter-spacing:.1em}#hintLabel{display:block;color:#d2dde5;font-size:14px;margin-top:5px}#aimPanel{position:absolute;bottom:103px;left:50%;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:20px;padding:16px;background:#15213cf5;border:1px solid var(--teal);border-radius:12px}#aimPanel label{display:grid;grid-template-columns:1fr auto;gap:5px;color:var(--teal);font-size:13px}#aimPanel input{grid-column:1/3;grid-row:2;width:160px;accent-color:var(--lime)}#globalButtons{position:absolute;right:14px;bottom:103px;display:flex;gap:6px;z-index:35}.utility{border:1px solid #ffffff25;background:#10172bd9;color:var(--muted);border-radius:6px;font-size:10px;font-weight:850;padding:9px}.big-stars{font-size:58px;letter-spacing:6px;color:#ffdc70;margin:20px 0 10px;text-shadow:0 4px #90602b}.big-stars .empty{color:#47536b;text-shadow:none}.result-stats{display:flex;justify-content:center;gap:22px;color:var(--teal);font-weight:800;font-size:13px}.result-stats b{display:block;font-size:24px;color:var(--cream)}#toast{pointer-events:none;position:absolute;z-index:50;bottom:120px;left:50%;transform:translate(-50%,20px);max-width:85vw;text-align:center;padding:13px 20px;background:#0d1629f5;border:1px solid var(--teal);border-radius:9px;color:#fff;font-size:15px;opacity:0;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:780px){.title-layout{grid-template-columns:1fr .8fr;gap:0}.character-caption{left:0;font-size:14px}.description{font-size:14px}.level-grid{grid-template-columns:repeat(2,1fr)}#hud{gap:8px;padding:8px}.counter{padding-left:9px;gap:6px}.counter small{display:none}.level-title strong{font-size:16px}.level-title small{font-size:9px}#playFooter{gap:3px;padding:10px}#hintLabel{font-size:12px}#aimPanel{width:90vw;gap:12px}#aimPanel input{width:100%}#aimPanel label{flex:1}.materials{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.title-layout{display:block;padding:0 14px}.title-copy{position:relative}.character-card{display:none}.description br{display:none}h1{font-size:82px}.menu-actions{align-items:stretch}#globalButtons{bottom:94px}.level-title strong{font-size:13px}.square{width:35px;height:35px}.counter b{font-size:24px}#hintLabel{max-width:210px}#playFooter .quiet{font-size:11px;padding:8px}.screen{padding:12px}.panel{padding:18px}.level-card canvas{height:68px}.level-card b{font-size:13px}}
@media(max-height:600px) and (min-width:650px){.title-copy{padding:18px 0}.intro{font-size:20px;margin:14px 0 10px}.description{font-size:13px;margin-bottom:12px}.menu-actions{flex-direction:row}.primary,.secondary{padding:11px 15px;min-height:42px;font-size:12px}.build-label{display:none}h1{font-size:clamp(65px,17vh,100px)}.character-card{min-height:250px}.eyebrow{margin-bottom:10px}#hud{top:5px;padding:6px}#playFooter{bottom:5px;padding:6px 12px}#globalButtons{bottom:79px}.counter b{font-size:25px}#aimPanel{bottom:90px}.level-card canvas{height:65px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.region-picker{display:flex;align-items:center;gap:1rem;margin:1rem 0;font-weight:800}.region-picker select{font:inherit;color:#fff2d8;background:#26354c;border:1px solid #63758e;border-radius:8px;padding:.7rem;max-width:100%}

#aimPanel{top:92px;bottom:auto}@media(max-height:600px){#aimPanel{top:65px;bottom:auto;padding:10px}}

.tool-picker{display:grid;gap:3px;font-size:9px;font-weight:900;color:var(--teal)}.tool-picker select{max-width:170px;border:1px solid #ffffff40;border-radius:6px;padding:8px;background:#22334b;color:var(--cream);font:inherit;font-size:12px}.tool-picker select:focus-visible{outline:3px solid var(--lime)}@media(max-width:780px){.tool-picker select{max-width:112px;padding:5px;font-size:10px}.level-title strong{white-space:normal}.level-title small{letter-spacing:0}}
/* 0.9: warmer editorial menus, quieter chrome, material depth and district accents. */
:root{--panel:#17263a;--line:#e1e8e326}button{transition:background .15s,transform .15s,border-color .15s}.screen#menu{background:radial-gradient(ellipse at 85% 30%,#42566455,transparent 60%),linear-gradient(115deg,#101b2d,#192b40)}.title-copy .eyebrow{color:#b8d8d0}.title-copy h1{text-shadow:3px 4px 0 #1b283c,7px 9px 0 #060d1980}.character-card{mask-image:linear-gradient(to bottom,#000 87%,transparent);filter:drop-shadow(10px 18px 24px #07111b80)}.character-caption{background:#f08f70;border:1px solid #ffcead80;border-radius:3px}.campaign-stamp{display:flex;gap:22px;margin-top:23px;padding-top:15px;border-top:1px solid #bbd2d128;max-width:370px}.campaign-stamp span{font-size:9px;letter-spacing:.12em;color:#a4b6c5;display:grid;gap:4px}.campaign-stamp b{font-size:23px;letter-spacing:-.04em;color:#f1e7cc}.primary{background:linear-gradient(135deg,#e5fa9f,#cde976);border-color:#edffb5;box-shadow:0 4px 0 #668239,0 8px 18px #060d1938}.secondary{background:linear-gradient(145deg,#2a3f55,#213246);border-color:#b5d1d533;box-shadow:0 4px 0 #0b182a}.panel{background:linear-gradient(140deg,#23364b,#14243b);border-color:#bbd2d133}.panel-head h2{color:#f4ebd5}.level-card{background:linear-gradient(150deg,#304960,#203247);border-color:#afc6cd33;padding:11px;box-shadow:0 4px 10px #07101d25}.level-card:hover{background:linear-gradient(150deg,#3a566a,#293e51)}.level-card canvas{border:1px solid #a2b4be24;background:#152638}.level-card .num{background:#152638d9;border-radius:3px;padding:2px 5px;font-size:16px;top:16px;left:17px}.card-stars{font-size:19px;color:#f3da87}#hud{background:linear-gradient(110deg,#101e32f5,#1a2d43ee);border-color:#c2d4d038;border-top:2px solid #c4ddd06b;box-shadow:0 8px 22px #08132638;backdrop-filter:blur(12px);border-radius:9px}#playFooter{background:linear-gradient(110deg,#122237f2,#1b2d43ed);border-color:#bed3d12e;border-radius:8px;box-shadow:0 6px 20px #07112030;backdrop-filter:blur(10px)}.square{background:#2b40515e;border-color:#bed3d138;border-radius:7px}.tool-picker select{background:#2b4053;border-color:#a9c4c84a}.counter b{color:#e1edb1}.level-title small{color:#afdacf;letter-spacing:.07em}#stateLabel{color:#deedb5;letter-spacing:.07em}.utility{background:#182b3fdd;border-color:#b7cccc2e;color:#c4d4d8}.big-stars{color:#f9dc8a;text-shadow:0 3px #866841}.region-picker select{background:#20394e;border-color:#8fabba66}.level-title strong{letter-spacing:-.025em}@media(max-height:650px){.campaign-stamp{display:none}}@media(prefers-reduced-motion:reduce){button{transition:none}.level-card:hover{transform:none}}