:root{
  --bg:#041a4d; --bg2:#020e33; --line:#2f8fe0; --chalk:#eaf6ff; --dim:#8db9e6; --danger:#ff6b6b;
  --wood:#f0b06a; --stone:#a9c7a0; --iron:#ff8a7a; --gold:#ffd75e;
  --ui:"Bricolage Grotesque",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{
  background-color:var(--bg);color:var(--chalk);font-family:var(--ui);
  background-image:linear-gradient(rgba(47,143,224,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(47,143,224,.14) 1px,transparent 1px);
  background-size:32px 32px;
}
.screen{display:none;position:fixed;inset:0}
.screen.active{display:flex}

.btn{font:700 1rem var(--ui);background:var(--chalk);color:var(--bg2);border:0;border-radius:6px;padding:.7rem 1.3rem;cursor:pointer}
.btn:hover{background:#fff}
.btn.ghost{background:transparent;color:var(--chalk);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--chalk)}
[hidden]{display:none!important}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.actions.start{justify-content:flex-start}
.btn:disabled{opacity:.35;cursor:not-allowed}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* title */
#screen-title{align-items:center;justify-content:center;text-align:center}
.title-wrap{max-width:30rem;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
h1{font-size:clamp(3.4rem,13vw,6.5rem);font-weight:700;letter-spacing:-.04em;line-height:.95}
.title-wrap p{color:var(--dim);line-height:1.55;font-size:1.05rem}
.title-wrap small{color:var(--dim);font-family:var(--mono);font-size:.8rem}

/* game */
#screen-game{flex-direction:column;justify-content:space-between;-webkit-user-select:none;user-select:none}
#field{position:absolute;inset:0;width:100%;height:100%}
.hud{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:16px 20px;flex-wrap:wrap}
.hud-right{display:flex;align-items:center;gap:.9rem}
.stock{display:flex;gap:1.1rem;flex-wrap:wrap}
.chip{display:flex;align-items:baseline;gap:.4rem;font-family:var(--mono)}
.chip i{width:.7rem;height:.7rem;border-radius:50%;align-self:center}
.chip b{font-size:1.35rem;font-weight:600}
.chip span{color:var(--dim);font-size:.85rem}
.core-meter{width:130px;height:8px;border:1.5px solid var(--line);border-radius:4px;overflow:hidden}
#hp{height:100%;background:var(--chalk);transition:width .2s}
#hp.low{background:var(--danger)}
#walls{font-family:var(--mono);font-size:.85rem;color:var(--dim);min-width:4.5rem}
.hint{position:relative;z-index:2;text-align:center;padding:16px;color:var(--dim);font-size:.9rem}
#typer{position:absolute;opacity:0;pointer-events:none;left:0;bottom:0;width:1px;height:1px;font-size:16px}
#toast{position:absolute;z-index:3;left:50%;top:76px;transform:translateX(-50%);background:var(--bg2);border:1.5px solid var(--line);padding:.6rem 1rem;border-radius:6px;font-size:.95rem;opacity:0;transition:opacity .25s;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1}

/* shop */
#screen-mode,#screen-shop,#screen-stats,#screen-miles,#screen-hub,#screen-daily,#screen-ascend,#screen-life,#screen-echo,#screen-settings{justify-content:center;overflow-y:auto}
.shop{width:min(640px,100%);padding:2.2rem 1.5rem;display:flex;flex-direction:column;gap:1rem;align-self:flex-start}
.shop h2{font-size:2.4rem;letter-spacing:-.03em}
.sub{color:var(--dim)}
#shop-list,#miles-list,#daily-list,#echo-list{list-style:none;padding:0;margin:.5rem 0 1rem}
#shop-list li,#miles-list li,#daily-list li,#echo-list li{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;align-items:center;padding:1rem 0;border-bottom:1.5px dashed rgba(47,143,224,.5)}
.u-name{font-weight:700;font-size:1.1rem}
.u-name em{font-style:normal;font-family:var(--mono);font-weight:500;font-size:.8rem;color:var(--dim);margin-left:.6rem}
.u-desc{color:var(--dim);font-size:.92rem;grid-column:1}
.u-costs{display:flex;gap:.8rem;flex-wrap:wrap;font-family:var(--mono);font-size:.85rem;grid-column:1}
.u-costs .no{color:var(--danger)}
#shop-list .btn,#echo-list .btn{grid-column:2;grid-row:1 / span 3}
#miles-list li.done,#daily-list li.done{opacity:.55}
.hub-list{display:flex;flex-direction:column;gap:.7rem;margin:.5rem 0 1rem}
.hub-list .btn{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left}
.hub-list em{font-style:normal;font-family:var(--mono);font-size:.85rem;color:var(--dim)}
#wavebar{position:absolute;z-index:3;left:50%;bottom:44px;transform:translateX(-50%);font-family:var(--mono);font-size:.9rem;font-weight:600;padding:.4rem .9rem;border:1.5px solid var(--line);border-radius:6px;background:var(--bg2);white-space:nowrap}
#wavebar.warn{border-color:var(--danger);color:var(--danger)}
#stats-body,#asc-body,#life-body{display:grid;grid-template-columns:1fr auto;gap:.6rem 1rem;margin:.5rem 0 1rem}
#stats-body dt,#asc-body dt,#life-body dt{color:var(--dim)}
#stats-body dd,#asc-body dd,#life-body dd{font-family:var(--mono);font-weight:600;text-align:right}
#stats-body .sep,#asc-body .sep{grid-column:1/-1;border-top:1.5px dashed rgba(47,143,224,.5);margin:.4rem 0}
@media(max-width:480px){
  .core-meter{width:70px}.hud{padding:10px 12px;gap:.5rem}
  .stock{gap:.7rem}.chip b{font-size:1.1rem}.chip span{font-size:.7rem}
  .hud .btn{padding:.45rem .7rem;font-size:.85rem}
  #walls{min-width:0}
}
@media(max-height:520px){.hint{display:none}}
@media(pointer:coarse){.btn{min-height:44px}}

/* polish */
.screen.active{animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.btn{transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.chip b{display:inline-block}
.chip b.bump{animation:bump .25s}
@keyframes bump{50%{transform:scale(1.3)}}
.title-wrap{position:relative;z-index:1}
.drift-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.drift-field span{position:absolute;left:50%;top:50%;font-family:var(--mono);font-weight:600;padding:.2rem .5rem;border:1.5px solid currentColor;border-radius:6px;opacity:0;animation:drift 10s linear infinite;animation-delay:var(--d)}
@keyframes drift{0%{transform:translate(var(--x),var(--y));opacity:0}12%{opacity:.5}80%{opacity:.5}100%{transform:translate(0,0);opacity:0}}
.shop h3{margin-top:.6rem;font-size:1.1rem}
#life-runs{list-style:none;padding:0;margin:.3rem 0 1rem;font-family:var(--mono);font-size:.85rem;display:flex;flex-direction:column;gap:.5rem}
#life-runs li{padding-bottom:.5rem;border-bottom:1.5px dashed rgba(47,143,224,.5)}
#life-runs b{color:var(--gold);margin-right:.6rem}
#life-runs em{font-style:normal;color:var(--dim);margin-left:.6rem}
#life-runs .none{color:var(--dim)}
@media (prefers-reduced-motion:reduce){.screen.active,.chip b.bump{animation:none}.drift-field{display:none}}

/* pause, settings, shapes */
#pause{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(2,14,51,.78);text-align:center;cursor:pointer}
#pause strong{display:block;font-size:2.2rem;letter-spacing:-.02em}
#pause span{color:var(--dim)}
.set-list{display:flex;flex-direction:column;gap:.9rem;margin:.5rem 0 1rem}
.set-list label{display:flex;align-items:center;gap:.7rem}
.set-list input[type=range]{flex:1;max-width:240px}
.set-list input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--chalk)}
.set-list select,#set-code{font:500 .9rem var(--mono);background:var(--bg2);color:var(--chalk);border:1.5px solid var(--line);border-radius:6px;padding:.5rem}
#set-code{width:100%;resize:vertical;margin:.3rem 0 .8rem}
.sym .chip i[data-k=wood]{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.sym .chip i[data-k=stone]{border-radius:0}
.sym .chip i[data-k=iron]{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.sym .chip i[data-k=ether]{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);border-radius:0;width:.95rem;height:.95rem}

#boot-error{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:50;max-width:min(92vw,560px);padding:.6rem 1rem;border:1.5px solid var(--danger);border-radius:6px;background:var(--bg2);color:var(--chalk);font-size:.9rem;text-align:center}

/* difficulty picker */
.mode-list{display:flex;flex-direction:column;gap:.8rem;margin:.5rem 0 1rem}
.mode-list .btn{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;width:100%;text-align:left;padding:1rem 1.2rem}
.mode-list .btn strong{font-size:1.15rem}
.mode-list .btn span{font:500 .92rem/1.4 var(--ui);color:var(--dim)}

/* keyboard hint: only on screens with a physical keyboard and room for it */
#kbd{display:none;position:absolute;z-index:2;left:50%;bottom:44px;transform:translateX(-50%);width:316px;flex-direction:column;gap:4px;pointer-events:none}
body.kbd #kbd{display:flex}
body.kbd #wavebar{bottom:172px}
.krow{display:flex;gap:4px}
.krow:nth-child(2){margin-left:14px}
.krow:nth-child(3){margin-left:42px}
.krow:nth-child(4){margin-left:70px}
#kbd i{width:28px;height:26px;display:grid;place-items:center;font:600 .8rem var(--mono);font-style:normal;color:var(--dim);border:1.5px solid rgba(47,143,224,.5);border-radius:5px;background:rgba(2,14,51,.7)}
#kbd i.home{text-decoration:underline}
#kbd i.space{width:176px;font-size:.7rem}
#kbd i.on{background:var(--gold);border-color:var(--gold);color:var(--bg2)}
@media(pointer:coarse),(max-height:640px){body.kbd #kbd{display:none}body.kbd #wavebar{bottom:44px}}