:root{--bg: #0a1f33;--bg2: #0e2a45;--water: #16466e;--accent: #4a7cc0;--accent2: #6fb0e0;--good: #3fbf8f;--bad: #d8714f;--ink: #eaf4ff;--muted: #9fc0dd;--line: #1d4a6e}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(120% 120% at 50% 0%,#103354 0%,var(--bg) 60%,#07182a 100%);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,sans-serif;min-height:100%}.shell{max-width:880px;margin:0 auto;padding:18px 16px 60px}header h1{margin:0;font-size:1.9rem;letter-spacing:.14em;background:linear-gradient(90deg,var(--accent2),#bfe0ff);-webkit-background-clip:text;background-clip:text;color:transparent}header .sub{margin:6px 0 14px;color:var(--muted);font-size:.92rem;max-width:60ch}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}.seg{display:inline-flex;border:1px solid #245a8a;border-radius:10px;overflow:hidden}.seg button{background:transparent;color:var(--muted);border:none;padding:7px 14px;cursor:pointer;font-size:.85rem}.seg button.on{background:var(--accent);color:#fff}.seg button:hover:not(.on){background:#173e60}button.ghost{background:#143753;color:var(--ink);border:1px solid #2b6294;border-radius:10px;padding:7px 14px;cursor:pointer;font-size:.85rem}button.ghost:hover{background:#1b4a72}.status{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.pill{background:#11314e;border:1px solid #235379;color:var(--muted);padding:5px 11px;border-radius:999px;font-size:.8rem}.map{position:relative;width:100%;aspect-ratio:16 / 9;background:radial-gradient(60% 80% at 20% 40%,#1c5180 0%,transparent 60%),radial-gradient(50% 70% at 75% 65%,#14466f 0%,transparent 60%),linear-gradient(160deg,var(--water),#0c3052);border:1px solid #2a6296;border-radius:14px;margin-bottom:16px;overflow:hidden;box-shadow:inset 0 0 60px #0006}.blank{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0b2b46;border:2px solid var(--accent2);color:#cfe8ff;font-weight:700;font-size:.8rem;cursor:default;box-shadow:0 0 0 4px #4a7cc02e}.blank.ocean{border-color:#8fd0ff;width:34px;height:34px}.blank.solved{background:var(--good);border-color:#bdf0d8;color:#04261a}.namelist{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}@media(max-width:620px){.namelist{grid-template-columns:1fr}}.namerow{display:flex;align-items:center;gap:8px;background:#102f4b;border:1px solid #214f76;border-radius:10px;padding:6px 8px}.namerow.solved{background:#103a2e;border-color:#2f7a5c}.namerow .tag{flex:0 0 auto;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:.75rem;font-weight:700}.namerow .kind{flex:0 0 auto;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);width:38px}.namerow input{flex:1 1 auto;min-width:0;background:#0a2138;border:1px solid #2a5e8c;border-radius:7px;color:var(--ink);padding:6px 8px;font-size:.88rem}.namerow input:focus{outline:none;border-color:var(--accent2)}.namerow input:disabled{color:var(--good);border-color:#2f7a5c;background:#0c2e24}.hintbtn{flex:0 0 auto;background:transparent;border:1px solid #3b6f9d;color:var(--accent2);border-radius:7px;padding:5px 9px;cursor:pointer;font-size:.72rem}.hintbtn:hover{background:#173e60}.intro{color:var(--muted);font-size:.95rem;margin:4px 0 16px}.ring{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;padding:10px;background:#0e2c47;border:1px solid #235379;border-radius:14px}.node{display:flex;flex-direction:column;align-items:center;gap:4px;background:#11385a;border:2px solid #2c6293;border-radius:12px;padding:10px 14px;cursor:pointer;color:var(--ink);min-width:92px}.node:hover{border-color:var(--accent2)}.node.sel{border-color:#ffd166;box-shadow:0 0 0 3px #ffd16640}.node.good{border-color:var(--good);background:#103a2e}.node .ne{font-size:1.4rem}.node .nn{font-size:.72rem;color:var(--muted);text-align:center}.arrow{color:var(--accent2);font-size:1.1rem}.arrow.loop{color:#7fa9cf}.feedback{text-align:center;font-size:.9rem;margin-top:14px}.feedback.ok{color:var(--good)}.feedback.no{color:var(--muted)}.wincard{margin-top:18px;background:#0e2c47;border:1px solid #2c6293;border-radius:14px;padding:22px;text-align:center}.wincard h2{margin:0 0 8px}.wincard .big{font-size:1.6rem;font-weight:800;color:var(--accent2);margin:10px 0}.wincard .muted{color:var(--muted);font-size:.85rem}.wincard .standing{margin:8px 0 0;font-size:.9rem;color:var(--accent2);min-height:1em}button.primary{margin-top:12px;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 20px;cursor:pointer;font-size:.95rem}button.primary:hover{background:#5a8fd0}footer{margin-top:22px}.muted{color:var(--muted);font-size:.8rem}