/* Layout: one-screen column on an evening building site: floor counter, crane + tower, the example, a big number pad. One deliberate dark look. */
:root{
  color-scheme:dark;
  --night:#13213a; --panel:#1c2f4d; --steel:#2b4468; --line:#3a5680;
  --ink:#eef3fa; --muted:#9fb3cf; --crane:#f0a92e; --ok:#33b886; --bad:#ec5f4a; --some:#2a6f5a;
  --b1:#7c8fa8; --b2:#5fae4e; --b3:#c9792f; --b4:#d65f8e; --b5:#2fa3b8; --b6:#4a8fdc; --b7:#22a283; --b8:#e8a03a; --b9:#9a7bd6; --bmix:#e2735a; --ball:#3d7cc0;
  --display:"Russo One","Arial Black",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--body);font-size:16px;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
button:focus-visible{outline:3px solid var(--crane);outline-offset:2px}
.app{height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;box-sizing:border-box;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
.screen{flex:1;display:flex;flex-direction:column;min-height:0;gap:12px;position:relative}
.scroll{overflow-y:auto;padding-bottom:8px}
.panel{background:var(--panel);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.panel h2,.panel h3{margin:0;font-size:17px;font-weight:800}
.sub{margin:0;color:var(--muted);font-weight:600;line-height:1.4;font-size:14px}

/* ---------- menu ---------- */
.menu{gap:14px}
.brand{text-align:center;padding-top:6px}
.brand h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,8vw,36px);line-height:1.05;margin:0;letter-spacing:.5px;text-wrap:balance}
.brand h1 span{color:var(--crane)}
.brand p{margin:6px 0 0;color:var(--muted);font-weight:700}
.daily-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.streak{font-weight:800;font-size:14px;color:var(--crane);white-space:nowrap}
.trow{display:flex;align-items:center;gap:10px;font-weight:700}
.trow .box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);display:grid;place-items:center;font-size:14px;flex:none}
.trow.done .box{background:var(--ok);border-color:var(--ok);color:#fff}
.trow.done .tl{color:var(--muted);text-decoration:line-through}
.trow .tl{flex:1}
.trow .tn{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:800}
.week{display:flex;gap:6px;justify-content:space-between;padding-top:4px}
.week span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--muted)}
.week i{width:22px;height:22px;border-radius:50%;background:var(--night);border:2px solid var(--line);box-sizing:border-box}
.week i.on{background:var(--crane);border-color:var(--crane)}
.week span.today{color:var(--ink)}
.modes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.mode{background:var(--panel);border:2px solid transparent;border-radius:16px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:transform .12s,border-color .12s,background .12s}
.mode.single{grid-column:span 2;padding:12px 4px 10px}
.mode.single .mname{font-size:14px}
.mode.wide{grid-column:span 3}
.mode:active{transform:scale(.97)}
.mode.on{border-color:var(--c);background:var(--steel)}
.tile{width:50px;height:50px;border-radius:12px;background:var(--c);display:grid;place-items:center;font-family:var(--display);font-size:26px;color:#fff}
.mname{font-weight:800;font-size:15px;line-height:1.2}
.mmeta{font-size:13px;color:var(--muted);font-weight:700}
.mode .kv{align-self:stretch;display:flex;flex-direction:column;gap:1px;padding:0 6px}
.mode .kv > span{display:flex;justify-content:space-between;gap:4px;font-size:12px;font-weight:700;color:var(--muted)}
.mode .kv b{color:var(--ink);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.mbar{align-self:stretch;margin:2px 6px 0;height:7px;border-radius:4px;background:var(--steel);overflow:hidden}
.mode.on .mbar{background:var(--line)}
.mbar i{display:block;height:100%;background:var(--ok);border-radius:4px}
.mbar i.hard{background:var(--crane)}
.htag{font-size:11px;font-weight:800;color:#1b1405;background:var(--crane);border-radius:6px;padding:1px 7px}
.goal{display:flex;justify-content:space-between;gap:8px;font-weight:800;flex-wrap:wrap}
.goal b{color:var(--crane)}
.go{background:var(--crane);color:#1b1405;font-family:var(--display);font-size:20px;border-radius:16px;padding:16px;letter-spacing:.3px;box-shadow:0 4px 0 #b37714}
.go:active{transform:translateY(3px);box-shadow:0 1px 0 #b37714}
.go:disabled{opacity:.45;cursor:default}
.nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.navbtn{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:12px 6px;font-weight:800;font-size:14px;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.navbtn svg{width:28px;height:28px}
.count{background:var(--bad);color:#fff;border-radius:999px;min-width:24px;height:24px;padding:0 7px;box-sizing:border-box;display:inline-grid;place-items:center;font-size:13px;position:absolute;top:-8px;right:-4px}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:800}
.seg{display:flex;background:var(--night);border-radius:12px;padding:3px;gap:2px}
.seg button{padding:8px 11px;border-radius:9px;font-weight:800;font-size:14px;color:var(--muted)}
.seg button.on{background:var(--steel);color:var(--ink)}

/* ---------- game ---------- */
.bar{display:flex;align-items:center;gap:10px}
.bar h2{margin:0;font-size:19px;font-weight:800}
.back{padding:8px 12px;border-radius:12px;background:var(--panel);font-weight:800;font-size:15px;flex:none}
.chip{font-family:var(--display);font-size:16px;padding:6px 10px;border-radius:10px;background:var(--c,var(--steel));color:#fff}
.extra{font-size:13px;font-weight:800;color:var(--crane);border:2px solid var(--crane);border-radius:999px;padding:3px 8px;white-space:nowrap}
.pend{margin:0;font-weight:700;font-size:14px;line-height:1.4;color:var(--ink);background:var(--steel);border-radius:12px;padding:8px 10px}
.pend b{color:var(--crane)}
.floors{margin-left:auto;font-weight:800;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
.floors b{font-family:var(--display);font-weight:400;color:var(--ink);font-size:22px}
.site{flex:1;min-height:130px;border-radius:18px;background:linear-gradient(#1a2c4a,#203a60 70%,#27466f);position:relative;overflow:hidden}
.site svg{position:absolute;inset:0;width:100%;height:100%}
.site svg.shake{animation:shake .4s}
.toast{position:absolute;left:12px;top:10px;background:var(--ok);color:#fff;font-weight:800;padding:6px 12px;border-radius:999px;font-size:15px;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100% - 24px)}
.toast.show{opacity:1;transform:none}
.toast.gold{background:var(--crane);color:#1b1405}
.ask{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.tag{position:absolute;top:-4px;right:0;background:var(--b9);color:#fff;font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.3px}
.eq{font-family:var(--display);font-size:clamp(34px,11vw,46px);line-height:1;display:flex;align-items:center;gap:.25em;font-variant-numeric:tabular-nums}
.eq .x{color:var(--crane)}
.ans{min-width:1.7em;padding:0 .12em;border-bottom:5px solid var(--crane);text-align:center;height:1.15em;display:inline-flex;align-items:center;justify-content:center}
.ans.empty{color:var(--line)}
.ans.good{color:var(--ok);border-color:var(--ok)}
.ans.bad{color:var(--bad);border-color:var(--bad);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.eq.pop{animation:pop .25s}
@keyframes pop{from{transform:scale(.85);opacity:.3}}
.hint{background:#3b3214;border:2px solid var(--crane);color:#ffe2a6;border-radius:14px;padding:8px 12px;font-weight:700;font-size:15px;line-height:1.35;text-align:center;width:100%;box-sizing:border-box}
.hint b{color:var(--crane)}
.timer{width:100%;height:8px;border-radius:99px;background:var(--panel);overflow:hidden;visibility:hidden}
.timer.on{visibility:visible}
.timer i{display:block;height:100%;background:var(--ok);transform-origin:left;transform:scaleX(1)}
.timer i.low{background:var(--bad)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{height:clamp(46px,7.4vh,64px);border-radius:14px;background:var(--steel);font-family:var(--display);font-size:28px;box-shadow:0 4px 0 #1a2c47;transition:transform .05s}
.key:active,.key.down{transform:translateY(3px);box-shadow:0 1px 0 #1a2c47}
.key.del{background:var(--panel);font-size:24px;color:var(--muted)}
.key.ok{background:var(--ok);box-shadow:0 4px 0 #1f7c59}
.key.ok:active,.key.ok.down{box-shadow:0 1px 0 #1f7c59}

/* ---------- overlay ---------- */
.overlay{position:absolute;inset:0;background:rgba(10,18,32,.72);display:grid;place-items:center;z-index:5;overflow:hidden;border-radius:18px}
.card{background:var(--panel);border-radius:20px;padding:22px 20px;width:min(340px,100%);box-sizing:border-box;text-align:center;display:flex;flex-direction:column;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,.4);position:relative;z-index:2}
.card h3{margin:0;font-family:var(--display);font-weight:400;font-size:26px}
.card .big{font-family:var(--display);font-size:44px;color:var(--crane);font-variant-numeric:tabular-nums}
.card p{margin:0;color:var(--muted);font-weight:700;line-height:1.4}
.card .prize{color:var(--ink);background:var(--steel);border-radius:12px;padding:8px 10px}
.card .prize b{color:var(--crane)}
.row{display:flex;gap:10px}
.row button{flex:1}
.ghostbtn{background:var(--steel);border-radius:16px;padding:14px;font-weight:800}
.confetti{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:fall linear forwards;z-index:1}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* ---------- hard list ---------- */
.hlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:0}
.hlist li{background:var(--panel);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.hlist .f{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums;flex:1}
.hlist .f span{color:var(--crane)}
.hlist .meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;font-weight:700;color:var(--muted)}
.dots{display:flex;gap:4px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--ok)}
.hlist li.learned{opacity:.6}
.ok-mark{color:var(--ok);font-weight:800}
.hsum{margin:0;font-weight:800;font-size:14px}
.resetbtn{padding:12px;border-radius:14px;border:2px solid var(--line);color:var(--muted);font-weight:800;font-size:15px}
.confirm{background:var(--panel);border:2px solid var(--bad);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px}
.confirm p{margin:0;font-weight:700;line-height:1.4}
.dangerbtn{background:var(--bad);color:#fff;border-radius:16px;padding:14px;font-weight:800}
.empty-note{text-align:center;padding:30px 10px;color:var(--muted);font-weight:700;line-height:1.5}

/* ---------- city ---------- */
.rank{display:flex;align-items:center;gap:14px}
.medal{width:56px;height:56px;border-radius:50%;background:var(--crane);display:grid;place-items:center;font-family:var(--display);font-size:24px;color:#1b1405;flex:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.rank .rt{font-family:var(--display);font-size:22px;line-height:1.1}
.skyline{overflow-x:auto;border-radius:16px;background:linear-gradient(#1a2c4a,#284a75);min-height:190px}
.skyline svg{display:block;height:190px}
.ranks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ranks li{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--muted)}
.ranks li i{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);box-sizing:border-box;display:grid;place-items:center;font-style:normal;font-size:13px;flex:none}
.ranks li.got{color:var(--ink)}
.ranks li.got i{background:var(--crane);border-color:var(--crane);color:#1b1405}
.ranks li span:last-child{margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- parent stats ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tilebox{background:var(--panel);border-radius:14px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.tilebox b{font-family:var(--display);font-weight:400;font-size:26px;font-variant-numeric:tabular-nums}
.tilebox span{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:4px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;min-width:0}
.bars .v{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.bars .b{width:100%;max-width:34px;border-radius:6px 6px 2px 2px;background:var(--b6);min-height:3px}
.bars .col.done .b{background:var(--crane)}
.bars .d{font-size:12px;font-weight:800;color:var(--muted)}
.bars .m{font-size:11px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:auto repeat(8,1fr) auto;gap:4px;align-items:center;font-variant-numeric:tabular-nums}
.grid .h{font-size:12px;font-weight:800;color:var(--muted);text-align:center}
.grid .t{font-family:var(--display);font-size:15px;padding-right:4px}
.grid .c{aspect-ratio:1;border-radius:6px;background:var(--night);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--muted);max-width:100%}
.grid .c.good{background:var(--ok);border-color:var(--ok);color:#fff}
.grid .c.some{background:var(--some);border-color:var(--some);color:#cdeee2}
.grid .c.weak{background:var(--bad);border-color:var(--bad);color:#fff}
.grid .p{font-size:12px;font-weight:800;color:var(--muted);text-align:right;padding-left:4px;min-width:34px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.mist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mist li{display:flex;justify-content:space-between;font-weight:700}
.mist li b{font-family:var(--display);font-weight:400;font-size:18px}
.mist li span{color:var(--muted)}
.answers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.answers li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;font-weight:700;font-size:14px;color:var(--muted)}
.answers li b{font-family:var(--display);font-weight:400;font-size:16px;color:var(--ink)}
.answers li.bad span:nth-child(2){color:var(--bad)}
.answers li.ok span:nth-child(2){color:var(--ok)}
.savebox{width:100%;box-sizing:border-box;min-height:84px;background:var(--night);color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:8px;font:12px/1.4 ui-monospace,Consolas,monospace;-webkit-user-select:text;user-select:text;resize:vertical}
.impbox{display:flex;flex-direction:column;gap:8px}
.ver{margin:0;font-size:12px;color:var(--muted);font-weight:700}
.notice{margin:0;background:#3b3214;border:2px solid var(--crane);color:#ffe2a6;border-radius:14px;padding:10px 12px;font-weight:700;line-height:1.4}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}