@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Mono:wght@400;700&display=swap');
:root{--navy:#11293c;--navy-soft:#21445b;--ice:#e8f2f3;--white:#fbffff;--aqua:#8bd4d1;--blue:#68a9c5;--red:#e97968;--line:#aac3c5;--text:#203e4c}*{box-sizing:border-box}body{background:#dce7ed;color:var(--text);display:grid;font-family:'Space Mono',monospace;margin:0;min-height:100vh;padding:1rem;place-items:center}.phone{background:linear-gradient(145deg,#ecf5f4,#b8d0d1);border:8px solid var(--navy-soft);border-radius:30px;box-shadow:0 24px 60px #14253655,inset 0 0 0 2px #fff8;width:min(100%,760px);padding:1rem}.topbar,.footer{color:#3b6372;display:flex;font-size:.61rem;font-weight:700;justify-content:space-between;letter-spacing:.1em;text-transform:uppercase}.topbar a{color:var(--navy);text-decoration:none}.screen{background:var(--ice);border:5px solid var(--navy);border-radius:8px;box-shadow:inset 0 0 35px #80bfc433;margin:1rem 0;padding:clamp(1rem,3vw,1.6rem)}.heading{align-items:end;border-bottom:2px solid var(--line);display:flex;justify-content:space-between;padding-bottom:.8rem}.eyebrow{color:#4d7f8c;font-size:.55rem;font-weight:700;letter-spacing:.14em;margin:0 0 .25rem}h1{color:var(--navy);font-size:clamp(2rem,6vw,3.5rem);letter-spacing:-.08em;line-height:.85;margin:0}.status{color:var(--red);font-size:.6rem;font-weight:700;letter-spacing:.08em}.setup{align-items:center;display:flex;gap:.5rem;margin:1rem 0 .7rem}.setup span{font-size:.65rem;font-weight:700;margin-right:auto}.setup button,.actions button{background:var(--navy);border:0;border-bottom:3px solid #081725;color:var(--white);cursor:pointer;font:700 .58rem 'Space Mono',monospace;min-height:42px;padding:.6rem .8rem;text-transform:uppercase}.setup button:hover,.setup button:focus,.actions button:hover,.actions button:focus{background:var(--navy-soft);outline:2px solid var(--red);outline-offset:2px}.boards{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}.board-card{background:#d9e8e5;border:1px solid var(--line);padding:.65rem}.board-title{color:#4d7f8c;display:flex;font-size:.58rem;font-weight:700;justify-content:space-between;margin-bottom:.55rem}.board{display:grid;grid-template-columns:repeat(10,1fr);width:100%}.cell{aspect-ratio:1;border:1px solid #8eb4b0;cursor:pointer;min-width:0;position:relative}.cell:hover,.cell:focus{background:#b4d8d3;outline:2px solid var(--red);outline-offset:-2px;z-index:1}.cell.ship{background:var(--navy-soft);border-color:var(--navy)}.cell.hit{background:var(--red);border-color:#b64f42}.cell.miss{background:#a8c8ca}.cell.miss::after{background:var(--navy-soft);border-radius:50%;content:'';height:22%;left:39%;position:absolute;top:39%;width:22%}.cell.hit::after{color:var(--white);content:'×';font-size:clamp(.6rem,2vw,1rem);font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-54%)}.enemy .cell.ship{background:transparent;border-color:#8eb4b0}.enemy .cell.ship:hover{background:#b4d8d3}.fleet{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0}.ship-status{border-left:3px solid var(--aqua);color:#4d7f8c;font-size:.55rem;padding:.3rem .45rem}.ship-status.sunk{border-color:var(--red);color:var(--red);text-decoration:line-through}.actions{display:flex;gap:.6rem;justify-content:center}.actions button{min-width:115px}.hint{color:#5b7c85;font-size:.57rem;line-height:1.5;margin:.9rem auto 0;max-width:35rem;text-align:center}.footer{padding:.2rem .2rem 0}@media(max-width:560px){body{padding:.35rem;place-items:start center}.phone{border-width:5px;border-radius:20px;padding:.65rem;width:100%}.topbar,.footer{font-size:.48rem}.screen{border-width:3px;margin:.65rem 0;padding:.65rem}.heading{align-items:center}.status{font-size:.5rem}.setup{flex-wrap:wrap}.setup span{width:100%}.setup button{min-height:44px}.boards{gap:.5rem}.board-card{padding:.4rem}.board-title{font-size:.48rem}.cell{min-height:25px}.fleet{gap:.25rem}.ship-status{font-size:.47rem}.actions button{min-height:48px;min-width:0;width:50%}.hint{font-size:.5rem}}