:root{--navy:#132f48;--sea:#214c67;--mist:#d4e6ed;--paper:#f0f3ed;--ink:#16384f;--accent:#ffca84;--hit:#a1362f}*{box-sizing:border-box}body{margin:0;background:var(--navy);color:var(--paper);font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}main{max-width:1120px;margin:auto;padding:26px 32px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #698295;padding-bottom:22px}.brand{font:36px Georgia;color:var(--paper);text-decoration:none}.brand span{display:block;font:12px system-ui;color:#c3d9e5;margin-top:3px}button{font:inherit;cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid #638a9f;border-radius:5px;background:#20475f;color:var(--paper)}button:focus-visible,summary:focus-visible,.boardScroll:focus-visible{outline:3px solid #ffca84;outline-offset:3px}button:disabled{opacity:.5;cursor:default}.heading{display:flex;justify-content:space-between;align-items:center;padding:28px 0}.mode{font-size:13px;color:#c3d9e5;margin:0 0 10px}h1{font:44px/1.08 Georgia;margin:0 0 12px}h2{font:25px Georgia;margin:0 0 12px}p{margin:0 0 16px}.compass{font-size:90px;color:#ffca84;line-height:1}.workspace{display:grid;grid-template-columns:290px minmax(0,1fr);gap:55px}aside{padding-top:20px}aside>div>p{font-size:14px;color:#c3d9e5}#fleet{display:grid;gap:8px;margin:22px 0}#fleet button{text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px}#fleet button[aria-pressed=true]{border-color:var(--accent);background:#35627a}.shipShape{display:flex;gap:3px}.shipShape i{width:13px;height:10px;background:#bdd6df;border-radius:2px}.placed{color:#a9e0c7;font-size:13px}.setupActions{display:flex;gap:8px}.setupActions button{flex:1;font-size:13px;padding:10px 6px}.primary{background:var(--accent);color:var(--navy);border-color:var(--accent);font-weight:700}#start{width:100%;margin-top:14px}.fine{font-size:12px!important;margin-top:14px}.chart{background:var(--paper);color:var(--ink);border-radius:8px;padding:22px;min-width:0;box-shadow:0 12px 35px #06192744}.chartTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.chartTop h2{margin:0}#tabs{display:flex;gap:6px}#tabs button{font-size:13px;padding:8px 10px;background:transparent;color:var(--ink);border-color:#9eb7c0}#tabs button[aria-pressed=true]{background:var(--navy);color:var(--paper)}.boardScroll{overflow:auto;padding:3px 0}#board{display:grid;grid-template-columns:20px repeat(8,minmax(44px,1fr));gap:2px;min-width:388px}#board .axis{display:flex;align-items:center;justify-content:center;font-size:12px;color:#486678;height:22px}#board .rowAxis{height:auto}#board button{border:1px solid #98b5c0;min-height:44px;aspect-ratio:1;border-radius:2px;padding:0;min-width:44px;background:#dce9ed;color:var(--ink);font-size:23px;position:relative}#board button.ship{background:#799aaa;border-color:#456c84}#board button.ship::before{content:'';position:absolute;inset:9px 5px;background:#244b64;border-radius:40%}#board button.hit{background:#f2d4bb;color:#9b332d;font-weight:800}#board button.sunk{background:#a1362f;color:white}#board button.miss{background:#e8efed;color:#4e7180}#board button.selected{outline:3px solid #a85b12;outline-offset:-4px}#board button.shot{cursor:default}#board button .mark{position:relative;z-index:1}#board button:disabled{opacity:1}.legend{display:flex;gap:25px;font-size:12px;margin:12px 0 20px}.fireline{display:flex;align-items:center;justify-content:space-between;gap:12px}.fireline p{margin:0;font-size:14px}#feedback{font-size:14px;margin:16px 0 0;min-height:42px}.rules{margin-top:24px;border-top:1px solid #698295;padding-top:18px;font-size:14px}.rules summary{cursor:pointer;min-height:44px}.rules p{color:#c3d9e5;margin-top:12px}dl{margin:24px 0}dl>div{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #698295}dt{font-size:14px}dd{font-weight:700;margin:0}#lastShot{font-size:15px;color:var(--paper)}footer{font-size:12px;color:#c3d9e5;margin-top:28px}dialog{max-width:450px;width:calc(100% - 32px);padding:28px;border:0;border-radius:8px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#061927c9}dialog p{font-size:15px}#saveWarning{padding:14px;border:1px solid #ffca84;margin-bottom:20px}[hidden]{display:none!important}@media(max-width:800px){main{padding:18px 20px}.workspace{grid-template-columns:230px minmax(0,1fr);gap:24px}.chart{padding:16px}.heading{padding:24px 0}.compass{font-size:70px}h1{font-size:37px}}@media(max-width:680px){main{padding:16px 12px}.workspace{display:flex;flex-direction:column;gap:18px}.heading{padding:22px 0 12px}.compass{display:none}h1{font-size:34px}aside{padding:0}#setup{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}#setup>h2,#setup>p,#fleet{grid-column:1/-1}#fleet{grid-template-columns:1fr 1fr;margin:6px 0}#fleet button{font-size:13px;padding:10px}.shipShape i{width:8px}#start{margin:0}.setupActions{flex-direction:column}.fine{margin:5px 0 0}.rules{margin-top:14px}.chart{padding:13px}#battleInfo h2{font-size:20px}dl{display:flex;gap:20px;margin:6px 0}dl>div{flex:1;display:block;padding:6px 0}dd{font-size:20px}#lastShot{margin:8px 0}#newGame{font-size:13px}header{padding-bottom:14px}header>button{font-size:13px}.brand{font-size:30px}.legend{gap:18px}footer{margin-top:20px}}@media(prefers-reduced-motion:no-preference){#board button.hit,#board button.sunk{animation:impact .2s ease-out}@keyframes impact{from{transform:scale(.93)}to{transform:scale(1)}}}

.panHint{display:none;font-size:12px;margin:8px 0;color:#486678}@media(max-width:680px){.workspace:has(#setup[hidden]) .chart{order:-1}}@media(max-width:460px){.panHint{display:block}}
/* Generated naval art · v1 */
body{background:#081e2d;color:#f8ecd2;background-image:radial-gradient(ellipse at 85% 0%,#1b4a58aa,transparent 60%)}main{max-width:1200px}.brand{color:#eed0a0;letter-spacing:.02em}header{border-color:#b69b684d}.welcome{min-height:620px;border:1px solid #a58a574f;border-radius:12px;margin-top:24px;background:linear-gradient(90deg,#071b2caa,transparent 70%),url('assets/harbor.webp') center/cover;display:flex;align-items:flex-start;padding:50px;box-shadow:0 24px 70px #0006}.welcomeCopy{max-width:440px;text-shadow:0 2px 12px #000c}.welcome h1{font-size:76px;color:#fff1d6;line-height:1.04;margin:26px 0}.eyebrow{font-size:11px;letter-spacing:.22em;color:#e9cd98}.welcomeCopy>p:not(.eyebrow){font-size:18px;color:#eef3ed}.welcomeNote{display:block;font-size:12px;color:#d0e2e2;margin-top:12px}.welcome .primary{margin-top:10px;padding:15px 24px}.primary{background:linear-gradient(#f5d497,#c3944c);color:#152938;border:1px solid #f0d3a0;box-shadow:inset 0 1px #fff6,0 4px 12px #0003}.heading{padding:24px 0}h1{color:#f3dfbc}.victoryMedal{width:100px;height:100px;object-fit:contain}.chart{background:linear-gradient(135deg,#18394a,#0c2332);color:#ecdfc5;border:1px solid #b697605e;padding:22px;box-shadow:0 14px 50px #0007,inset 0 0 0 4px #0a1e2d;border-radius:14px}.chartTop{margin-bottom:16px}.chartTop h2{font-style:italic}.chartTop button,#tabs button{border-color:#b3a38366;color:#ecdfc5;background:#143646}#tabs button[aria-pressed=true]{background:#c6a46b;color:#102b3d;border-color:#e7cc9d}.boardScroll{border:1px solid #baa16d6b;border-radius:6px;padding:0;box-shadow:inset 0 0 20px #0005;background:#15384b}#board{position:relative;isolation:isolate;background:url('assets/ocean.webp') center/cover;gap:2px;min-width:388px}#board .axis{color:#f2e4c9;background:#0b293ee8;z-index:4}#board button{background:#0d536413;border-color:#b4e8e827;border-radius:0;z-index:3;isolation:isolate}#board button.ship{background:#a8d5ce10;border-color:#b9dbce45}#board button.ship::before{display:none}#board button.miss{background:#38a1b20d}#board button.hit{background:#db965012}#board button.sunk{background:#ac452420}#board button.selected{outline:2px solid #ffe5a3;outline-offset:-3px;background:#f6d7a423;box-shadow:inset 0 0 18px #ffeb9b33}#board button:focus-visible{outline:3px solid #ffe5a3;outline-offset:-3px}.shipArtwork{position:absolute;z-index:2;pointer-events:none;display:block}.shipArtwork img{position:absolute;left:50%;top:50%;max-width:none;object-fit:fill;filter:drop-shadow(2px 4px 2px #00141aaa)}.shipArtwork.wreck{filter:grayscale(.9) brightness(.6)}.shotArt{position:absolute;inset:-6%;width:112%;height:112%;object-fit:contain;pointer-events:none;z-index:1}#board button .mark{position:absolute;bottom:1px;right:2px;color:#fff4d5;font:700 12px/1.1 system-ui;text-shadow:0 1px 3px #000,0 -1px 3px #000;z-index:2}#board button.miss .mark{font-size:22px;color:#eaffff}.fleetThumb{width:120px;height:47px;object-fit:contain;filter:drop-shadow(1px 4px 3px #0008)}#fleet button{display:grid;grid-template-columns:1fr auto;gap:0 8px;background:linear-gradient(120deg,#23485a,#102d40);border-color:#9d895655;min-height:84px}#fleet button>span{grid-column:1;align-self:end}#fleet button>small{grid-column:1;color:#bfd5db;font-size:11px;align-self:start}.fleetThumb{grid-column:2;grid-row:1/3}#fleet button[aria-pressed=true]{background:linear-gradient(120deg,#365f69,#183849);border-color:#e2bf7d;box-shadow:inset 3px 0 #d4b16e}#feedback{color:#f2dfb7}.panHint{color:#bdd8df}.legend{color:#c3dfe1}.fine{color:#bed1d7}.rules{border-color:#b99d6344}.heading .mode{letter-spacing:.08em;text-transform:uppercase;font-size:11px}.heading #subtitle{color:#bbd4dd}button{border-color:#a8a27c60;background:#1c4053}.fireline{border-top:1px solid #9ebec12d;padding-top:16px}footer{color:#a7c4cc}.chart #targetText{color:#d7e8e7}dialog{background:#122f40;color:#e9e7d4;border:1px solid #b4a370}dialog h2{color:#f0d49e}
@media(max-width:800px){.workspace{grid-template-columns:230px minmax(0,1fr);gap:20px}.fleetThumb{width:88px}.chart{padding:15px}.welcome{padding:35px;min-height:600px}.welcome h1{font-size:62px}}
@media(max-width:680px){.welcome{margin-top:18px;min-height:670px;padding:30px 22px;background-position:65% center;background-image:linear-gradient(180deg,#071b2cb3,transparent 70%),url('assets/harbor.webp')}.welcome h1{font-size:57px;margin:22px 0}.welcomeCopy>p:not(.eyebrow){font-size:16px}.welcomeCopy{max-width:100%}.workspace{gap:20px}.chart{padding:12px}#fleet button{grid-template-columns:1fr;min-height:105px;padding:8px}.fleetThumb{grid-column:1;grid-row:2;width:100%;height:45px}#fleet button>small{grid-row:3}#fleet button>span{grid-row:1}.heading h1{font-size:32px}.victoryMedal{width:74px;height:74px}.legend{margin-bottom:12px}}
@media(prefers-reduced-motion:no-preference){.welcomeCopy{animation:arrival .6s ease-out}.shotArt{animation:splashIn .35s ease-out}@keyframes arrival{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes splashIn{from{opacity:.3;transform:scale(.65)}to{opacity:1;transform:none}}}
@media(max-width:360px){.welcome{padding:26px 18px}.welcome h1{font-size:46px}.welcomeCopy>p:not(.eyebrow){font-size:14px}.welcomeNote{font-size:11px}}

/* Nombre elegido por Juan; conserva legibilidad en cabecera móvil. */
header .brand{font-size:28px;max-width:690px;min-width:0;line-height:1.15}header>button{flex-shrink:0}@media(max-width:680px){header{gap:12px}header .brand{font-size:22px}.brand span{font-size:11px}}
.friendButton{display:block;margin-top:12px;background:#143749eb;border-color:#bda77b;color:#ffefd4}.lobby{margin:24px auto;padding:36px;max-width:720px;border:1px solid #c4a66a66;border-radius:12px;background:#122f40}.lobby h1{font-size:42px}.lobbyActions{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:30px 0}#joinForm{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}#joinForm label{flex-basis:100%}#roomCode{width:155px;min-height:46px;font:22px monospace;letter-spacing:.12em;padding:9px;border:1px solid #b7a883;border-radius:5px;text-transform:uppercase}#lobbyStatus{margin-top:18px;min-height:24px;color:#f7d396}#onlineBar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid #a58b5b55}#onlineBar p{margin:0;font-size:13px}#activeCode{font:24px monospace;letter-spacing:.1em;margin:0 8px;color:#f7d396}#onlineBar button{font-size:12px;padding:9px}#leaveRoom{margin-left:auto}@media(max-width:680px){.lobby{padding:24px 18px}.lobby h1{font-size:32px}#onlineBar{gap:8px}#onlineBar>div{display:flex;align-items:center;flex-wrap:wrap}#onlineBar>div>span{font-size:12px}}