:root{--ocean:#0b1f33;--land:#d9e4d1;--line:#6f8a7a;--ink:#f3f1ea;--muted:#9fb3c8;--accent:#ff8a3d;--common:#8ec5ff;--uncommon:#6fdba5;--rare:#ffb35c;--veryrare:#ff7b7b;--outlier:#c9a0ff;--miss:#e9eef3;--card:#12304d}
[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ocean);color:var(--ink);font:15px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.app{display:flex;flex-direction:column;height:100%;max-height:100vh}
.bar{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;gap:8px}
.tabs{display:flex;gap:4px;background:#081827;border-radius:999px;padding:3px}
.tab{border:0;background:transparent;color:var(--muted);padding:5px 12px;border-radius:999px;font-weight:600;cursor:pointer}
.tab.on{background:var(--accent);color:#1a1006}
.stat{color:var(--muted);font-size:14px}.stat b{color:var(--ink)}
.prompt{padding:2px 12px 6px}
.plabel{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ptext{font-size:18px;font-weight:700;line-height:1.25}
.mapwrap{position:relative;flex:1;min-height:180px;overflow:hidden;background:radial-gradient(ellipse at center,#123a5c 0,#0b1f33 70%);touch-action:none}
#map{width:100%;height:100%;display:block;cursor:crosshair;user-select:none}
#map path.c{fill:var(--land);stroke:var(--line);stroke-width:.35;vector-effect:non-scaling-stroke}
#map path.c:hover{fill:#f2e3b3}
#map path.o{fill:#5a6c7a;stroke:#46586a;stroke-width:.3;vector-effect:non-scaling-stroke;pointer-events:none}
#map circle.t{fill:var(--land);stroke:#2b4a63;stroke-width:1;vector-effect:non-scaling-stroke}
#map .sel{fill:var(--accent)!important}
#map .t-common{fill:var(--common)!important}#map .t-uncommon{fill:var(--uncommon)!important}#map .t-rare{fill:var(--rare)!important}#map .t-veryrare{fill:var(--veryrare)!important}#map .t-outlier{fill:var(--outlier)!important}
#map .wrong{fill:#3a4652!important;stroke:#fff!important}
#map .pin{pointer-events:none}
.zoom{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:4px}
.zoom button{width:34px;height:34px;border-radius:8px;border:1px solid #2b4a63;background:#0d2741cc;color:var(--ink);font-size:18px;cursor:pointer}
.toast{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#081827e6;padding:6px 12px;border-radius:999px;font-weight:600;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.controls{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.pick{display:flex;gap:8px}
#search{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid #2b4a63;background:#081827;color:var(--ink);font-size:16px}
button.primary{border:0;border-radius:10px;padding:10px 16px;background:var(--accent);color:#1a1006;font-weight:800;font-size:15px;cursor:pointer}
button.primary:disabled{opacity:.45;cursor:not-allowed}
button.ghost{border:1px solid #2b4a63;border-radius:10px;padding:9px 14px;background:transparent;color:var(--ink);font-weight:700;cursor:pointer}
.feedback{display:flex;align-items:center;justify-content:space-between;gap:10px}
.feedback .msg{font-weight:700}.feedback .sub{font-size:13px;color:var(--muted)}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:800;color:#0b1f33}
.b-common{background:var(--common)}.b-uncommon{background:var(--uncommon)}.b-rare{background:var(--rare)}.b-veryrare{background:var(--veryrare)}.b-outlier{background:var(--outlier)}.b-miss{background:var(--miss)}
.summary{position:absolute;inset:0;background:#0b1f33f2;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.summary h2{margin:0;font-size:22px}.summary .big{font-size:34px;font-weight:900}
.summary ol{margin:0;padding-left:20px}.summary li{margin:6px 0}
.summary .row{display:flex;gap:8px;flex-wrap:wrap}
.summary .note{color:var(--muted);font-size:13px}
.legend{display:flex;gap:6px;flex-wrap:wrap;font-size:12px}
@media (max-width:480px){.ptext{font-size:16px}.tab{padding:5px 10px}}