:root{--bg: #0d1b24;--panel: #13242f;--panel2: #1a3140;--ink: #e7f1f6;--muted: #8fb0c0;--accent: #4a8cc0;--accent2: #6fc0e6;--good: #4fc97a;--bad: #e0664f;--land: #214a3a;--land2: #1a3b2f;--water: #4a8cc0;--sand: #c9a96b;--rock: #7d6f63}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}#app{min-height:100vh;display:flex;justify-content:center}.wrap{width:100%;max-width:760px;padding:14px 14px 40px}header.top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}header.top h1{font-size:1.5rem;margin:0;color:var(--accent2);letter-spacing:.5px}header.top .tag{color:var(--muted);font-size:.85rem}.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.controls .spacer{flex:1}button{background:var(--panel2);color:var(--ink);border:1px solid #2c4d5e;border-radius:8px;padding:8px 12px;font-size:.9rem;cursor:pointer;transition:background .12s,border-color .12s}button:hover{background:#234254}button.primary{background:var(--accent);border-color:var(--accent);color:#04161f;font-weight:600}button.primary:hover{background:var(--accent2)}button:disabled{opacity:.45;cursor:default}select{background:var(--panel2);color:var(--ink);border:1px solid #2c4d5e;border-radius:8px;padding:7px 10px;font-size:.9rem}.hud{display:flex;gap:14px;flex-wrap:wrap;background:var(--panel);border:1px solid #1f3a48;border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:.9rem}.hud b{color:var(--accent2)}.prompt{background:var(--panel);border:1px solid #1f3a48;border-left:4px solid var(--accent);border-radius:10px;padding:10px 14px;margin-bottom:10px;min-height:44px}.prompt .kind{color:var(--accent2);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:1px}.prompt .ask{font-size:1.05rem;margin-top:2px}.prompt .hint{color:var(--muted);font-size:.82rem;margin-top:4px}.mapwrap{position:relative;border-radius:12px;overflow:hidden;border:1px solid #1f3a48;background:#0a2230;touch-action:none}canvas{display:block;width:100%;height:auto}.nameform{display:flex;gap:8px;margin-top:10px}.nameform input{flex:1;background:#0a1820;color:var(--ink);border:1px solid #2c4d5e;border-radius:8px;padding:10px 12px;font-size:1rem}.nameform input:focus{outline:none;border-color:var(--accent2)}.nameform.hidden{display:none}.feedback{margin-top:10px;min-height:22px;font-size:.92rem}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}.overlay{background:var(--panel);border:1px solid #1f3a48;border-radius:12px;padding:18px;margin-top:12px;text-align:center}.overlay h2{margin:0 0 6px;color:var(--accent2)}.overlay .big{font-size:2.2rem;font-weight:800;color:var(--good)}.overlay table{width:100%;max-width:460px;margin:10px auto;border-collapse:collapse;font-size:.88rem}.overlay td{padding:3px 6px;border-bottom:1px solid #1f3a48;text-align:left}.overlay td.r{text-align:right;color:var(--muted)}.footer{color:var(--muted);font-size:.78rem;margin-top:14px;text-align:center}.hidden{display:none}