/* Shared tokens, base styles and the glass UI that sits on top of the lot.
   The game UI floats over the canvas, so it is always dark glass. Page chrome
   (the stories sidebar) follows light/dark. */
:root{
  --bg:#D8D5CC; --panel:#ECE9E1; --ink:#1F2328; --muted:#5C6166; --line:rgba(31,35,40,.16);
  --sign:#1F5FAE; --paint:#F0C43A; --stop:#C8402F; --go:#2F8A4E;
  --grass:#4F7C3B;
  --glass:rgba(18,21,25,.78); --glass-strong:rgba(18,21,25,.94); --glass-ink:#F1EEE6; --glass-muted:rgba(241,238,230,.62); --glass-line:rgba(255,255,255,.1);
  --good:#7CE38B; --bad:#FF8A7A; --warn:#FFB020;
  --pixel:"Pixelify Sans","Courier New",monospace;
  --num:"Silkscreen","Pixelify Sans","Courier New",monospace;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1E22; --panel:#2A2F35; --ink:#ECE8DE; --muted:#A5A9AD; --line:rgba(236,232,222,.14);
    --sign:#3A7BD5;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1E22; --panel:#2A2F35; --ink:#ECE8DE; --muted:#A5A9AD; --line:rgba(236,232,222,.14);
  --sign:#3A7BD5;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.4 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;color:inherit}
:focus-visible{outline:3px solid var(--paint);outline-offset:2px}
a{color:inherit}

/* ---------- buttons ---------- */
.btn{font:600 1rem var(--pixel);padding:8px 16px;min-height:42px;border:2px solid currentColor;border-radius:8px;background:transparent;cursor:pointer}
.btn.primary{background:var(--paint);border-color:var(--paint);color:#1F2328}
.btn:disabled{opacity:.45;cursor:default}
.psign{display:inline-grid;place-items:center;width:30px;height:30px;background:#1F5FAE;color:#fff;font:600 21px/1 var(--pixel);border-radius:5px;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px #1F5FAE;flex:none}

/* ---------- game viewport: canvas fills it, UI floats over it ---------- */
.viewport{position:relative;overflow:hidden;background:var(--grass);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;cursor:pointer}
.layer{position:absolute;inset:0;pointer-events:none}
.layer > *:not(.layer){pointer-events:auto}

/* ---------- HUD ---------- */
.hud{position:absolute;top:calc(8px + var(--safe-t));left:calc(8px + var(--safe-l));right:calc(8px + var(--safe-r));display:flex;flex-wrap:wrap;gap:6px;pointer-events:none!important;color:var(--glass-ink)}
.pill{display:flex;align-items:center;gap:6px;background:var(--glass);border-radius:8px;padding:5px 9px;font:400 .95rem/1 var(--num);font-variant-numeric:tabular-nums;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pill small{font:400 .72rem/1 var(--body);color:var(--glass-muted)}
.pill.neg b{color:var(--bad)}
.pill.warn b{color:var(--warn)}
.pill .sep{width:1px;height:14px;background:var(--glass-line)}
.pill.clock{position:relative;padding-bottom:8px}
.daybar{position:absolute;left:9px;right:9px;bottom:3px;height:2px;background:var(--glass-line);border-radius:2px;overflow:hidden}
.daybar i{display:block;height:100%;background:var(--paint)}
.stars{display:inline-flex;gap:2px}
.stars i{width:12px;height:12px;display:block;background:linear-gradient(90deg,var(--paint) calc(var(--f)*100%),rgba(255,255,255,.2) 0);clip-path:polygon(50% 0,63% 36%,100% 38%,71% 60%,81% 100%,50% 76%,19% 100%,29% 60%,0 38%,37% 36%)}

/* today vs best: two slim bars */
.pill.today{flex-direction:column;align-items:stretch;gap:3px;padding:4px 9px}
.tb{display:grid;grid-template-columns:3.6em 52px auto;align-items:center;gap:6px;font-size:.8rem;line-height:1}
.tb small{font-size:.66rem}
.tb .short{display:none}
.tbar{display:block;height:4px;border-radius:2px;background:var(--glass-line);overflow:hidden}
.tbar i{display:block;height:100%;width:0;background:var(--good);border-radius:2px;transition:width .3s}
.tb.record .tbar i,.r-bar.record .tbar i{background:var(--paint)}
.tb.record b{color:var(--paint)}

/* ---------- dock ---------- */
.dock{position:absolute;left:50%;bottom:calc(10px + var(--safe-b));transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px;background:var(--glass);border-radius:14px;color:var(--glass-ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:calc(100% - 16px)}
.dock-btn{min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:9px;background:rgba(255,255,255,.08);font:400 .95rem var(--num);cursor:pointer;display:grid;place-items:center;white-space:nowrap}
.dock-btn:hover{background:rgba(255,255,255,.14)}
.dock-btn.icon{font-size:1.2rem}
.dock-btn.booth span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;font:600 1rem var(--pixel)}
.dock-btn.booth small{font:400 .66rem var(--body);color:var(--glass-muted)}
.dock-btn.booth.on{background:var(--paint);color:#1F2328}
.dock-btn.booth.on small{color:rgba(31,35,40,.7)}
.dock-gap{width:2px}
.price{display:flex;align-items:center;background:rgba(255,255,255,.08);border-radius:9px}
.price .step{width:40px;min-height:44px;border:0;background:transparent;font:600 1.3rem var(--pixel);cursor:pointer;border-radius:9px}
.price .step:hover{background:rgba(255,255,255,.1)}
.price-read{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px}
.price-val{font:400 .95rem/1 var(--num);font-variant-numeric:tabular-nums}
.meter{display:flex;gap:2px}
.meter i{width:9px;height:4px;border-radius:1px;background:rgba(255,255,255,.18)}
.meter i.on{background:var(--good)}

/* ---------- toast ---------- */
.toast{position:absolute;left:50%;top:calc(58px + var(--safe-t));transform:translate(-50%,-6px);background:var(--glass-strong);color:var(--glass-ink);padding:8px 14px;border-radius:9px;font-size:.92rem;line-height:1.3;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none!important;width:max-content;max-width:min(92%,440px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{box-shadow:inset 3px 0 0 var(--bad)}
.toast.good{box-shadow:inset 3px 0 0 var(--good)}

/* ---------- choosing where a place goes ---------- */
.placebar{position:absolute;left:50%;bottom:calc(10px + var(--safe-b));transform:translateX(-50%);width:min(calc(100% - 16px),460px);display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;background:var(--glass-strong);color:var(--glass-ink);border-radius:14px;padding:10px 12px}
.placebar p{margin:0;font-size:.92rem;line-height:1.3}
.placebar .pb-actions{grid-column:1 / -1;display:flex;gap:8px}
.placebar .btn{flex:1}

/* ---------- centered cards (title, game over) ---------- */
.card-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92%,420px);background:var(--glass-strong);color:var(--glass-ink);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px;text-align:center}
.card-center h1,.card-center h2{font:600 1.7rem/1.1 var(--pixel);margin:0;color:var(--paint)}
.card-center p{margin:0;color:var(--glass-muted)}
.card-center .logo{display:flex;align-items:center;justify-content:center;gap:12px}
.card-center .btn{width:100%}
.card-center .link{font-size:.9rem;color:var(--glass-muted)}
.linkbtn{background:none;border:0;cursor:pointer;font:inherit;padding:4px}
.card-center.anchors{width:min(94%,480px);max-height:calc(100% - 24px);overflow:auto}
.anchor-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.anchor-opt{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:10px 12px;min-height:56px;border-radius:10px;border:2px solid var(--glass-line);background:rgba(255,255,255,.04);color:var(--glass-ink);cursor:pointer;font:inherit}
.anchor-opt:hover{background:rgba(255,255,255,.08)}
.anchor-opt[aria-checked="true"]{border-color:var(--paint);background:rgba(240,196,58,.12)}
.anchor-icon{grid-row:1/3;font-size:1.5rem;line-height:1}
.anchor-name{font:600 .95rem/1.2 var(--pixel)}
.anchor-pace{color:var(--glass-muted);font-size:.8rem}
.card-center .anchor-desc{min-height:3em;color:var(--glass-ink);font-size:.95rem}

.scrim{position:absolute;inset:0;background:rgba(12,14,18,.45)}

/* ---------- day report ---------- */
.report{color:var(--glass-ink);display:flex;flex-direction:column;gap:14px}
.r-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.r-head h2{font:600 1.35rem/1.1 var(--pixel);margin:0;color:var(--paint)}
.r-sub{margin:2px 0 0;color:var(--glass-muted);font-size:.88rem}
.r-rating{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.r-rating .stars i{width:15px;height:15px}
.r-rating small{font-size:.75rem;color:var(--glass-muted)}
.r-net{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px;border-radius:9px;background:rgba(124,227,139,.1)}
.r-net b{font:400 1.7rem/1 var(--num);color:var(--good);font-variant-numeric:tabular-nums}
.r-net.neg{background:rgba(255,138,122,.1)} .r-net.neg b{color:var(--bad)}
.r-net small{color:var(--glass-muted)}
.r-rows{display:flex;flex-direction:column}
.r-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--glass-line);font-size:.92rem}
.r-row b{font:400 .92rem var(--num);font-variant-numeric:tabular-nums}
.r-row.bad b{color:var(--bad)}
.r-row.good b{color:var(--good)}
.r-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.r-stats div{background:rgba(255,255,255,.06);border-radius:8px;padding:7px 4px;text-align:center;display:flex;flex-direction:column}
.r-stats b{font:400 1rem/1.2 var(--num)}
.r-stats small{font-size:.7rem;color:var(--glass-muted);line-height:1.15}
.r-bars{display:flex;flex-direction:column;gap:6px}
.r-bar{display:grid;grid-template-columns:4em 1fr auto auto;align-items:center;gap:8px;font-size:.85rem}
.r-bar .tbar{height:6px;border-radius:3px}
.r-bar b{font:400 .9rem var(--num);font-variant-numeric:tabular-nums}
.r-bar small{color:var(--glass-muted);font-size:.72rem;min-width:5.5em;text-align:right}
.r-bar.record small{color:var(--paint)}
.r-stats .bad b{color:var(--bad)}
.r-insights{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.r-insights li{font-size:.9rem;padding-left:12px;border-left:3px solid var(--paint);color:var(--glass-ink)}
.r-shop{display:flex;flex-direction:column;gap:8px}
.r-shop-head{display:flex;justify-content:space-between;align-items:baseline}
.r-shop-head h3{font:600 1.05rem var(--pixel);margin:0}
.r-shop-head span{font-size:.85rem;color:var(--glass-muted)}
.r-shop-head b{color:var(--glass-ink);font-family:var(--num)}
.upgrades{display:flex;flex-direction:column;gap:6px}
.upgrade{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;text-align:left;padding:9px 10px;border-radius:10px;border:2px solid var(--glass-line);background:rgba(255,255,255,.05);cursor:pointer;color:var(--glass-ink)}
.upgrade:hover:not(:disabled){border-color:var(--paint)}
.upgrade:disabled{cursor:default;opacity:.5}
.upgrade.bought{opacity:1;border-color:var(--good);background:rgba(124,227,139,.08)}
.u-icon{font-size:1.4rem;text-align:center}
.u-body{display:flex;flex-direction:column;gap:1px}
.u-body b{font:600 .98rem var(--pixel)}
.u-desc{font-size:.8rem;color:var(--glass-muted);line-height:1.3}
.u-cost{font:400 .92rem var(--num);white-space:nowrap}
.upgrade.bought .u-cost{color:var(--good)}
.upgrade.grow:not(.bought){border-color:rgba(124,227,139,.45)}
.u-cost small{font:inherit;font-size:.72em;color:var(--glass-muted)}
.r-next{width:100%}

/* side sheet (desktop) / bottom sheet (phone) that holds the report */
.sheet{position:absolute;background:var(--glass-strong);overflow:auto;padding:16px;overscroll-behavior:contain}
@media (min-width:760px){
  .sheet{top:calc(12px + var(--safe-t));right:calc(12px + var(--safe-r));bottom:12px;width:380px;border-radius:14px}
}
@media (max-width:759px){
  .sheet{left:0;right:0;bottom:0;max-height:66%;border-radius:16px 16px 0 0;padding:14px 14px calc(14px + var(--safe-b))}
}

/* ---------- phones: tighter HUD & dock ---------- */
@media (max-width:520px){
  .pill{font-size:.85rem;padding:4px 7px;gap:4px}
  .pill small{font-size:.64rem}
  .pill.rating,.pill.lotpill,.pill.gate.idle{display:none}
  .tb{grid-template-columns:1.1em 30px auto;gap:4px}
  .tb .long{display:none} .tb .short{display:inline}
  .toast{top:calc(52px + var(--safe-t))}
  .stars i{width:10px;height:10px}
  .dock{gap:4px;padding:5px;bottom:calc(8px + var(--safe-b))}
  .dock-btn{padding:0 9px;min-width:42px}
  .price .step{width:34px}
  .price-read{min-width:56px}
}
@media (max-width:360px){
  .tb{grid-template-columns:1.1em 22px auto}
}