@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f5ef;--ink:#172d32;--line:#d8dfd9;--accent:#dfff75;--muted:#71817d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:transparent;border-radius:8px;padding:12px 16px;color:var(--ink);font-weight:700}button:hover{background:#e8eddf}button:disabled{opacity:.4;cursor:default}input{width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;padding:14px;color:var(--ink);margin-top:8px}input:focus,button:focus-visible{outline:2px solid #528479;outline-offset:2px}header{height:94px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--line);padding:0 5%}.brand{font-size:30px;color:var(--ink);text-decoration:none;display:flex;gap:12px;align-items:center}.brand span{font-size:15px;font-weight:800;letter-spacing:2px}.tag,#roomTag{font-size:10px;letter-spacing:1.5px;color:var(--muted)}#roomTag{margin-left:auto}main{max-width:1440px;margin:auto;padding:60px 5%}#welcome{display:grid;grid-template-columns:1.2fr 1fr;gap:8%}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:#637870}h1{font-size:clamp(36px,4.6vw,68px);line-height:1.08;letter-spacing:-3px;margin:22px 0}p{line-height:1.8;color:var(--muted);font-size:14px}h2{font-size:21px;margin:0 0 26px;letter-spacing:-.7px}.entry{padding:36px;border:1px solid var(--line);border-radius:16px;background:#fff9}label{display:block;font-size:12px;font-weight:700;margin-bottom:20px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mode{display:flex;gap:8px}.mode button{flex:1;font-size:12px}.selected{background:var(--ink)!important;color:white!important}.hint{font-size:11px;line-height:1.7}.primary{background:var(--accent);border-color:var(--accent)}#create{width:100%;margin:15px 0}.divider{text-align:center;font-size:11px;color:var(--muted);margin:15px}.join{display:flex;gap:10px}.join input{margin:0;letter-spacing:2px}.join button{white-space:nowrap}.ocean-art{height:240px;position:relative;margin-top:36px;border:1px solid #c9d4cb;border-radius:12px;background-color:#e9eee4;background-image:linear-gradient(#cdd9cf 1px,transparent 1px),linear-gradient(90deg,#cdd9cf 1px,transparent 1px);background-size:30px 30px;overflow:hidden}.ocean-art:after{content:'';position:absolute;width:180px;height:180px;left:45%;top:25px;border:1px solid #899e88;border-radius:50%;box-shadow:0 0 0 25px #8ca88012,0 0 0 55px #8ca88012}.cross{position:absolute;left:calc(45% + 68px);top:72px;font-size:60px;font-weight:400}.ocean-art span{position:absolute;bottom:12px;left:15px;font-size:10px;letter-spacing:2px}.game-top{display:flex;justify-content:space-between;align-items:center}.game-top h1{font-size:40px;letter-spacing:-1.5px;margin:12px 0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;margin-top:20px}.players{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.player{border:1px solid var(--line);padding:10px 14px;border-radius:8px;font-size:12px}.player.active{background:var(--ink);color:white}.player.out{opacity:.45}.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px}.tools span{font-size:12px;margin-right:auto}.tools button{padding:9px 12px;font-size:11px}.boards{display:grid;grid-template-columns:1fr;gap:24px}.boards.four{grid-template-columns:1fr 1fr}.board-wrap{min-width:0}.board-label{font-size:10px;letter-spacing:2px;margin-bottom:10px;color:var(--muted)}.board{display:grid;gap:3px;width:100%;max-width:600px;aspect-ratio:1}.cell{padding:0;min-width:0;border-radius:3px;border:1px solid #d0dcd3;background:#e9eee6;font-size:clamp(8px,1.5vw,20px);position:relative}.cell:hover{background:#dfff75}.cell.own{background:#8caaa2;border-color:#729188}.cell.miss{background:#f5d6d0;color:#a23e34}.cell.hit{background:#bbdce8;color:#126489}.cell.kill{background:#cee8b0;color:#386f25}.cell:disabled{opacity:1}.cell .coord{font-size:8px;position:absolute;top:2px;left:3px;color:#7b8d82}.legend{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:6px}i{display:inline-block;width:9px;height:9px;border-radius:2px}.miss{background:#f5d6d0}.hit{background:#bbdce8}.kill{background:#cee8b0}aside{border:1px solid var(--line);border-radius:12px;padding:24px;align-self:start;background:#fff8}.log-head{display:flex;justify-content:space-between;align-items:center}.log-head h2{font-size:16px;margin:0}.log-head span{font-size:12px;color:var(--muted)}#history{max-height:630px;overflow:auto}.log{border-radius:8px;padding:14px;margin-top:10px;font-size:12px}.log-top{display:flex;justify-content:space-between;margin-bottom:8px}.log small{display:block;line-height:1.7}.empty{padding:40px 0;text-align:center;color:var(--muted);font-size:12px}footer{border-top:1px solid var(--line);padding:25px 5%;font-size:10px;letter-spacing:1px;display:flex;justify-content:space-between;color:var(--muted)}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:16px 24px;border-radius:10px;z-index:5;max-width:90%}[hidden]{display:none!important}@media(max-width:900px){.layout{grid-template-columns:1fr}#welcome{gap:30px;grid-template-columns:1fr}.ocean-art{display:none}.tag{display:none}main{padding-top:35px}.entry{padding:24px}footer span{display:none}}@media(max-width:520px){#roomTag{display:none}.boards.four{grid-template-columns:1fr}.game-top{align-items:flex-start;gap:10px}.game-top button{font-size:10px}.game-top h1{font-size:30px}.cell{font-size:16px}}