:root{
  color-scheme:dark;
  --bg:#061522;--panel:#0b2539;--panel2:#0e3049;--line:#1b6b96;
  --cyan:#45c9ff;--cyan2:#0a84c6;--red:#ff5a57;--red2:#bd2636;
  --gold:#ffbd4a;--text:#f2f8fb;--muted:#9fb8c9;--water:#0a3653;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text)}
body{min-height:100vh;overflow-x:hidden}
button{font:inherit}
.hidden{display:none!important}
.app{min-height:100vh;background:radial-gradient(circle at 50% 0,#123c5a 0,#071a2d 45%,#04111d 100%)}
.start-screen{position:relative;min-height:100vh;display:grid;place-items:center;padding:24px;background:url('assets/capa-batalha-naval.png') center/cover no-repeat}
.start-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,13,24,.24),rgba(3,13,24,.68) 60%,rgba(3,13,24,.9))}
.start-card{position:relative;width:min(720px,94vw);text-align:center;padding:34px 26px;border:1px solid rgba(119,213,255,.35);background:rgba(4,20,34,.78);backdrop-filter:blur(12px);border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.eyebrow{display:inline-block;padding:7px 12px;border:1px solid rgba(69,201,255,.5);border-radius:999px;color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.12em}
.start-card h1{margin:12px 0 8px;font-size:clamp(42px,8vw,82px);line-height:.9;letter-spacing:-.055em;text-shadow:0 5px 18px #000}
.start-card h1 strong{display:block;color:var(--gold)}
.start-card p{max-width:580px;margin:18px auto;color:#d9ebf5;font-size:clamp(16px,2.5vw,20px);line-height:1.5}
.start-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.btn{min-height:48px;border:0;border-radius:12px;padding:0 20px;font-weight:800;cursor:pointer;transition:.18s transform,.18s filter;background:#17364b;color:#fff}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,#078fcf,#23bdfa);box-shadow:0 8px 25px rgba(35,189,250,.2)}
.btn-secondary{background:#183a51;border:1px solid #315f7a}.btn-ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.start-card small{display:block;margin-top:18px;color:var(--muted)}
.game-screen{min-height:100vh;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.topbar{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px max(14px,env(safe-area-inset-left));border-bottom:1px solid rgba(69,201,255,.15);background:rgba(4,17,29,.86);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-anchor{font-size:28px}.brand b{display:block;font-size:18px;letter-spacing:.03em}.brand small{display:block;color:var(--muted);margin-top:2px}
.top-actions{display:flex;gap:8px}.icon-btn{min-height:42px;border:1px solid #25506a;border-radius:10px;padding:0 12px;background:#0e2a3e;color:#eaf7ff;font-weight:700;cursor:pointer}.icon-btn.danger{border-color:#76313b;background:#3a1820;color:#ffd8dc}
.status-panel{width:min(1220px,96vw);margin:18px auto;display:grid;grid-template-columns:180px 1fr 180px;gap:12px;align-items:stretch}
.score-card,.turn-card{background:linear-gradient(180deg,rgba(14,48,73,.92),rgba(8,31,49,.92));border:1px solid rgba(107,186,226,.22);border-radius:16px;padding:12px 16px;box-shadow:inset 0 1px rgba(255,255,255,.04)}
.score-card{display:grid;text-align:center}.score-card span{font-size:13px;color:var(--muted);font-weight:700}.score-card strong{font-size:31px;line-height:1}.score-card small{font-size:11px;color:#7897aa}.player-score strong{color:var(--cyan)}.enemy-score strong{color:#ff847f}
.turn-card{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left}.turn-icon{font-size:29px}.turn-card small{display:block;font-size:10px;letter-spacing:.16em;color:#7397ad;font-weight:900}.turn-card strong{display:block;margin-top:3px;font-size:clamp(13px,1.6vw,17px)}
.boards-area{width:min(1280px,97vw);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);align-items:center;gap:14px}
.board-panel{min-width:0;border-radius:20px;padding:14px;background:linear-gradient(180deg,rgba(11,37,57,.94),rgba(6,25,39,.96));border:1px solid rgba(65,152,197,.25);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.board-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:0 0 12px;padding:0 2px}.board-title>div{display:flex;align-items:center;gap:8px}.board-title b{font-size:14px}.board-title small{color:var(--muted);font-size:11px}.dot{width:9px;height:9px;border-radius:50%}.dot.blue{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.dot.red{background:var(--red);box-shadow:0 0 10px var(--red)}
.coordinate-board{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:24px auto;gap:4px;width:100%;max-width:590px;margin:auto}.corner{grid-area:1/1}.letters{grid-area:1/2;display:grid;grid-template-columns:repeat(10,1fr);align-items:center}.numbers{grid-area:2/1;display:grid;grid-template-rows:repeat(10,1fr);align-items:center}.letters span,.numbers span{text-align:center;color:#9bc8df;font-size:clamp(9px,1vw,12px);font-weight:800}.board{grid-area:2/2;display:grid;grid-template-columns:repeat(10,1fr);width:100%;aspect-ratio:1;border:2px solid #1a6f99;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#0a3b5b,#0b2d46);box-shadow:inset 0 0 40px rgba(0,0,0,.22),0 0 0 1px rgba(69,201,255,.08)}
.cell{position:relative;border:1px solid rgba(91,193,239,.2);background:linear-gradient(135deg,rgba(13,74,110,.6),rgba(7,48,76,.66));padding:0;min-width:0;cursor:default;touch-action:manipulation}.enemy-board .cell:not(.shot){cursor:crosshair}.enemy-board .cell:not(.shot):hover{background:rgba(47,174,229,.32);box-shadow:inset 0 0 0 2px rgba(122,220,255,.45)}
.cell.ship::after{content:"";position:absolute;inset:20%;border-radius:40%;background:linear-gradient(145deg,#aebcc5,#5f7481);border:1px solid #cfe0e9;box-shadow:0 3px 5px rgba(0,0,0,.32),inset 0 2px 1px rgba(255,255,255,.45)}
.cell.miss::after{content:"";position:absolute;width:22%;aspect-ratio:1;border-radius:50%;left:39%;top:39%;background:#b9e6fa;box-shadow:0 0 8px #72cff5}
.cell.hit::before,.cell.hit::after{content:"";position:absolute;left:45%;top:16%;width:10%;height:68%;border-radius:4px;background:#ff655f;box-shadow:0 0 8px #ff3d38;z-index:2}.cell.hit::before{transform:rotate(45deg)}.cell.hit::after{transform:rotate(-45deg)}
.cell.sunk{background:radial-gradient(circle,#6d231f,#2b2024 62%,#102c3e)}.cell.sunk::before,.cell.sunk::after{background:#ffb14b;box-shadow:0 0 10px #ff6f36}.cell.disabled{pointer-events:none}
.versus{display:grid;place-items:center;width:50px;aspect-ratio:1;border-radius:50%;background:#0a2437;border:1px solid #255b79;color:#8eb9d1;font-size:14px;font-weight:900}
.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;width:min(950px,94vw);margin:18px auto 0;color:#90adbf;font-size:12px}.legend span{display:flex;gap:7px;align-items:center}.legend i{display:inline-block;width:13px;height:13px}.legend-ship{border-radius:5px;background:#8499a5}.legend-miss{border-radius:50%;background:#b9e6fa}.legend-hit{position:relative}.legend-hit::before,.legend-hit::after{content:"";position:absolute;left:5px;width:3px;height:14px;border-radius:2px;background:#ff655f;transform:rotate(45deg)}.legend-hit::after{transform:rotate(-45deg)}.legend-sunk{border-radius:3px;background:#ff9a42}
.modal{width:min(520px,92vw);border:1px solid #285875;border-radius:20px;background:#071e30;color:#eaf6fc;padding:0;box-shadow:0 25px 80px #0009}.modal::backdrop{background:rgba(0,8,15,.75);backdrop-filter:blur(4px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #163d55}.modal-head h2{margin:0}.close-btn{width:42px;height:42px;border-radius:50%;border:0;background:#16384d;color:#fff;font-size:25px;cursor:pointer}.modal-body{padding:20px;line-height:1.55;color:#c8dce8}.modal-body ol{padding-left:22px}.modal-body li{margin:9px 0}.modal-body .btn{width:100%;margin-top:8px}.end-modal{text-align:center;padding:28px}.end-badge{font-size:58px}.end-modal h2{font-size:34px;margin:10px 0 7px}.end-modal p{color:#a9c1d0}.end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
@media (max-width:980px){
  .status-panel{grid-template-columns:1fr 2fr 1fr}.boards-area{grid-template-columns:1fr;gap:12px}.versus{display:none}.board-panel{width:min(640px,96vw);margin:auto}.board-title small{display:none}.coordinate-board{max-width:520px}.legend{margin-bottom:10px}
}
@media (max-width:620px){
  .topbar{min-height:60px}.brand small,.icon-btn span{display:none}.brand b{font-size:15px}.icon-btn{width:44px;padding:0}.status-panel{width:95vw;grid-template-columns:74px 1fr 74px;gap:7px;margin:10px auto}.score-card,.turn-card{padding:9px 7px;border-radius:12px}.score-card span{font-size:9px}.score-card strong{font-size:24px}.score-card small{display:none}.turn-card{gap:7px}.turn-icon{font-size:20px}.turn-card strong{font-size:11px}.turn-card small{font-size:8px}.boards-area{width:100%}.board-panel{padding:10px;border-radius:14px}.board-title{margin-bottom:8px}.board-title b{font-size:11px}.coordinate-board{grid-template-columns:20px minmax(0,1fr);grid-template-rows:20px auto;gap:2px}.letters span,.numbers span{font-size:9px}.board{border-radius:6px}.start-card{padding:28px 16px}.start-actions{display:grid}.start-actions .btn{width:100%}.legend{gap:10px;font-size:10px}
}
@media (max-width:390px){.board-panel{padding:8px}.status-panel{grid-template-columns:62px 1fr 62px}.turn-icon{display:none}.brand-anchor{font-size:22px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}