:root{color:#eefaff;font-synthesis:none;text-rendering:optimizelegibility;background:#03131f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:#03131f;min-width:320px}body{background:radial-gradient(circle at 20% 0,#00a4d62e,#0000 35%),linear-gradient(155deg,#061e2d 0%,#03131f 55%,#020b12 100%);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}#root{min-height:100vh}.home-shell,.game-shell,.lobby-shell{width:min(1500px,100% - 32px);margin:0 auto;padding:32px 0 56px;position:relative}.panel{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(150deg,#092a3de0,#041724d1);border:1px solid #94ddf629;border-radius:24px;box-shadow:0 22px 70px #00000047,inset 0 1px #ffffff0a}.eyebrow{color:#65d7ff;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px;font-size:.76rem;font-weight:800}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.055em;margin-bottom:12px;font-size:clamp(2.15rem,6vw,5.4rem);line-height:.94}h2{margin-bottom:8px;font-size:clamp(1.2rem,2.4vw,1.8rem)}h3{margin-bottom:14px}.muted{color:#92adba;line-height:1.55}.small{font-size:.88rem}.hero-card{grid-template-columns:1.15fr .85fr;align-items:center;min-height:620px;padding:clamp(28px,6vw,88px);display:grid;overflow:hidden}.hero-copy{z-index:2;max-width:720px;position:relative}.hero-lead{color:#c0d7e1;max-width:620px;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.6}.hero-actions{flex-wrap:wrap;gap:12px;margin:30px 0 18px;display:flex}.button{border:1px solid #0000;border-radius:14px;min-height:48px;padding:0 20px;font-weight:800;transition:transform .16s,box-shadow .16s,border-color .16s}.button:hover:not(:disabled){transform:translateY(-2px)}.button--primary{color:#02131e;background:linear-gradient(135deg,#5be3ff,#8cffc1);box-shadow:0 12px 30px #38d5f033}.button--secondary{color:#e9faff;background:#4db0d617;border-color:#82e0ff47}.text-button{color:#8fe5ff;background:0 0;border:0;padding:4px 0;font-weight:700}.hero-radar{aspect-ratio:1;background:radial-gradient(circle,#52ffc224,#084e6547 55%,#010d154d);border:1px solid #69f2ff3d;border-radius:50%;justify-self:end;width:min(42vw,480px);position:relative;overflow:hidden;box-shadow:0 0 90px #00bfff1f,inset 0 0 70px #22e6cc14}.radar-circle{border:1px solid #65e7ff38;border-radius:50%;position:absolute;inset:12%}.radar-circle--two{inset:28%}.radar-circle--three{inset:44%}.hero-radar:before,.hero-radar:after{content:"";background:#6ceaff2e;position:absolute}.hero-radar:before{width:1px;top:0;bottom:0;left:50%}.hero-radar:after{height:1px;top:50%;left:0;right:0}.radar-sweep{background:conic-gradient(from 10deg, transparent 0 78%, #5fffcb6b 93%, transparent 100%);border-radius:50%;animation:4.8s linear infinite sweep;position:absolute;inset:0}.radar-blip{aspect-ratio:1;background:#9cffd3;border-radius:50%;width:9px;position:absolute;box-shadow:0 0 18px #70ffc0}.radar-blip--one{top:37%;left:31%}.radar-blip--two{top:56%;right:22%}.radar-blip--three{bottom:18%;left:55%}@keyframes sweep{to{transform:rotate(360deg)}}.feature-strip{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;display:grid}.feature-strip article{background:#02131f85;border:1px solid #87dcf81f;border-radius:18px;padding:18px 20px}.feature-strip strong,.feature-strip span{display:block}.feature-strip span{color:#809dab;margin-top:5px;font-size:.9rem}.game-header{justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px;display:flex}.game-header h1{font-size:clamp(2.2rem,5vw,4rem)}.turn-badge,.battle-status{color:#bcefff;background:#2893b71a;border:1px solid #82e0ff3d;border-radius:999px;padding:12px 18px;font-weight:800}.turn-badge--player,.battle-status--your-turn{color:#032018;background:#83ffc5;border-color:#0000}.battle-status{width:fit-content;margin:0 0 14px auto}.boards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.board-panel{min-width:0;padding:clamp(16px,2.4vw,26px)}.board-panel--enemy{box-shadow:0 22px 70px #0000004d,inset 0 0 0 1px #ff66590d}.panel-heading{justify-content:space-between;align-items:flex-start;gap:16px;min-height:72px;display:flex}.board-canvas{touch-action:manipulation;border-radius:18px;width:100%;height:min(42vw,590px);min-height:320px;display:block}.board-canvas--interactive{cursor:crosshair;filter:drop-shadow(0 0 16px #58e1ff14)}.ship-status{flex-wrap:wrap;justify-content:flex-end;gap:7px;max-width:370px;display:flex}.ship-chip{color:#c6e3ed;border:1px solid #a9e2f424;border-radius:999px;padding:6px 9px;font-size:.72rem}.ship-chip--sunk{opacity:.42;text-decoration:line-through}.ship-cells{gap:2px;margin-left:7px;display:inline-flex}.ship-cells i{background:#8db6c3;border-radius:2px;width:6px;height:4px;display:block}.ship-chip--sunk .ship-cells i{background:#ff5d6f}.lower-grid{grid-template-columns:1.25fr .75fr;gap:18px;margin-top:18px;display:grid}.lower-grid>.panel{padding:22px}.event-log{gap:7px;max-height:220px;display:grid;overflow:auto}.event-log p{color:#b8d0da;margin:0;font-size:.92rem}.event-log p:first-child{color:#f2fbff;font-weight:700}.command-panel{flex-direction:column;justify-content:center;align-items:flex-start;display:flex}.placement-layout{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:26px;padding:clamp(18px,4vw,40px);display:grid}.placement-controls{flex-direction:column;justify-content:center;align-items:stretch;gap:14px;display:flex}.placement-controls .ship-status{justify-content:flex-start;margin-bottom:16px}.lobby-shell{align-content:center;min-height:100vh;display:grid}.lobby-shell>.text-button{position:absolute;top:28px;left:0}.lobby-card{width:min(560px,100%);margin:auto;padding:clamp(26px,5vw,48px)}.lobby-card h1{font-size:clamp(2.1rem,7vw,4rem)}.field{color:#bcd5df;gap:7px;margin:24px 0 14px;font-weight:700;display:grid}input{color:#effbff;background:#010e178c;border:1px solid #81dcfa38;border-radius:13px;outline:none;width:100%;min-height:48px;padding:0 14px}input:focus{border-color:#63dcff;box-shadow:0 0 0 3px #56d9ff1a}.lobby-card>.button{width:100%}.divider{color:#668391;align-items:center;gap:10px;margin:22px 0;display:flex}.divider:before,.divider:after{content:"";background:#87dbf721;flex:1;height:1px}.join-row{grid-template-columns:1fr auto;gap:10px;display:grid}.connection{color:#ffbb7f;margin:18px 0 0;font-size:.85rem}.connection--ok{color:#7fffc4}.error-message{color:#ff8d96;margin:10px 0 0;font-weight:700}.room-code-box{background:#052536b3;border:1px solid #80e0ff33;border-radius:16px;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;min-width:190px;padding:12px 14px;display:grid}.room-code-box span{color:#7999a7;text-transform:uppercase;font-size:.72rem}.room-code-box strong{letter-spacing:.14em;grid-row:2;font-size:1.35rem}.room-code-box button{color:#78dcff;background:0 0;border:0;grid-area:1/2/3}.waiting-panel{text-align:center;justify-items:center;padding:80px 20px;display:grid}.radar-loader{aspect-ratio:1;background:conic-gradient(#0000,#72ffd0);border:1px solid #7eeaff40;border-radius:50%;width:90px;margin-bottom:22px;animation:1.4s linear infinite sweep;-webkit-mask:radial-gradient(circle,#0000 54%,#000 56%);mask:radial-gradient(circle,#0000 54%,#000 56%)}.ocean-glow{pointer-events:none;aspect-ratio:1;filter:blur(90px);opacity:.1;border-radius:50%;width:34vw;position:fixed}.ocean-glow--one{background:#00c8ff;top:5vh;left:-10vw}.ocean-glow--two{background:#4bffb5;bottom:-10vh;right:-12vw}@media (width<=980px){.hero-card{grid-template-columns:1fr;min-height:auto}.hero-radar{justify-self:center;width:min(70vw,390px);margin:40px auto 0}.boards-grid,.placement-layout{grid-template-columns:1fr}.board-canvas{height:min(85vw,620px)}.feature-strip,.lower-grid{grid-template-columns:1fr}}@media (width<=640px){.home-shell,.game-shell,.lobby-shell{width:min(100% - 18px,1500px);padding-top:18px}.panel{border-radius:18px}.hero-card{padding:28px 20px}.game-header{flex-direction:column;align-items:flex-start}.game-header h1{margin-bottom:0}.room-code-box{width:100%}.panel-heading{flex-direction:column}.ship-status{justify-content:flex-start}.board-canvas{min-height:285px}.join-row{grid-template-columns:1fr}.button{width:100%}.hero-actions{flex-direction:column}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}