:root{--bg:#0f172a;--panel:#1e293b;--line:#334155;--text:#e2e8f0;--muted:#94a3b8;--accent:#f59e0b;--good:#22c55e;--sea:#0b2440;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{min-height:100dvh;display:flex;flex-direction:column;align-items:center}
button{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.6em 1em;cursor:pointer}
button:hover{border-color:var(--muted)} button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--good);border-color:var(--good);color:#04210f;font-weight:700}
.top{width:100%;max-width:560px;display:flex;align-items:center;justify-content:space-between;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.top h1{margin:0;font-size:1.4rem;letter-spacing:.02em} .top h1 span{color:var(--accent)} .top small{font-size:.7rem;color:var(--muted);font-weight:500}
.icon{width:2.4rem;height:2.4rem;padding:0;border-radius:50%} .right{display:flex;gap:.4rem}
main{width:100%;max-width:560px;padding:.8rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.mapwrap{position:relative;width:100%;aspect-ratio:1/1;max-height:52dvh;margin:0 auto;border-radius:16px;overflow:hidden;background:#0a1222;border:1px solid var(--line)}
@media (min-width:700px){.mapwrap{max-height:none}}
canvas{width:100%;height:100%;display:block}
.pips{position:absolute;top:.6rem;right:.6rem;display:flex;gap:4px}
.pips i{width:10px;height:10px;border-radius:50%;background:var(--line)} .pips i.used{background:var(--accent)} .pips i.win{background:var(--good)}
.guesses{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.guesses li{display:grid;grid-template-columns:1fr auto 2rem 3.4rem;gap:.5rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.45rem .7rem;animation:pop .3s ease}
.guesses li.correct{background:#14532d;border-color:var(--good)}
.guesses .km,.guesses .pct{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.guesses .arrow{display:inline-block;font-size:1.2rem;text-align:center;transition:transform .6s}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.msg{min-height:1.2em;margin:0;color:var(--muted);text-align:center}
.guessform{display:flex;gap:.5rem}
.combo{position:relative;flex:1}
input{width:100%;font:inherit;font-size:16px;padding:.7em .9em;border-radius:10px;border:1px solid var(--line);background:#0b1324;color:var(--text)}
.list{position:absolute;bottom:calc(100% + 4px);left:0;right:0;margin:0;padding:.25rem;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;z-index:5;box-shadow:0 10px 30px #0008}
.list li{padding:.55em .7em;border-radius:7px;cursor:pointer} .list li[aria-selected=true],.list li:hover{background:var(--line)}
.list li small{color:var(--muted)}
.end{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem;text-align:center}
.end h2{margin:.1rem 0 .3rem} .end .row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap} .small{color:var(--muted);font-size:.85rem}
footer{color:var(--muted);font-size:.75rem;padding:1rem;text-align:center} footer a{color:inherit}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;max-width:min(420px,92vw)}
dialog::backdrop{background:#000a}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;text-align:center;margin-bottom:1rem}
.stats b{display:block;font-size:1.6rem} .stats span{font-size:.75rem;color:var(--muted)}
.dist{grid-column:1/-1;text-align:left;display:grid;gap:3px} .dist div{display:flex;gap:.4rem;align-items:center;font-size:.85rem}
.dist i{display:inline-block;background:var(--line);padding:0 .4em;min-width:1.5em;text-align:right;font-style:normal;border-radius:3px} .dist i.hi{background:var(--good);color:#04210f}
.toast{position:fixed;top:4rem;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:.6rem 1rem;border-radius:10px;font-weight:600;z-index:20}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}
.lang{font-size:.75rem;font-weight:700}
.progress{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.progress b{color:var(--text)}
.summary{list-style:none;padding:0;margin:.4rem 0 .8rem;display:grid;gap:.3rem;text-align:left}
.summary li{display:grid;grid-template-columns:1.6rem 1fr auto 2.6rem;gap:.4rem;background:#0b1324;border:1px solid var(--line);border-radius:8px;padding:.35rem .6rem;font-variant-numeric:tabular-nums}
.summary li .pts{text-align:right;font-weight:700} .summary li.fail .pts{color:#ef4444} .summary li.ok .pts{color:var(--good)}
.end .total{font-size:1.6rem;font-weight:800;margin:.2rem 0}
.mapwrap.world{aspect-ratio:16/9}