:root{--bg-dark: #070d19;--bg-card: rgba(13, 25, 48, .75);--bg-card-hover: rgba(20, 38, 70, .85);--border-glow: rgba(0, 240, 255, .3);--primary-cyan: #00f0ff;--primary-cyan-glow: rgba(0, 240, 255, .4);--accent-green: #00ff9d;--accent-green-glow: rgba(0, 255, 157, .4);--hit-orange: #ff9f1c;--hit-orange-glow: rgba(255, 159, 28, .6);--sunk-red: #ff3b5c;--sunk-red-glow: rgba(255, 59, 92, .7);--miss-gray: rgba(140, 170, 205, .2);--text-main: #e2f1ff;--text-muted: #7f9bbd;--grid-bg: rgba(6, 16, 33, .9);--grid-line: rgba(0, 240, 255, .15);--font-hud: "Orbitron", "Rajdhani", sans-serif;--font-body: "Rajdhani", "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(circle at 50% 0%,rgba(0,240,255,.08) 0%,transparent 60%),linear-gradient(180deg,#070d19e6,#03070ffa);background-attachment:fixed}#root{min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:3px}.glass-panel{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glow);border-radius:14px;box-shadow:0 8px 32px #0000005e,inset 0 0 12px #00f0ff0d}.glass-panel-accent{border-color:var(--accent-green);box-shadow:0 0 20px #00ff9d26}.btn-tactical{font-family:var(--font-hud);font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:.75rem 1.5rem;border-radius:8px;border:1px solid var(--primary-cyan);background:#00f0ff1a;color:var(--primary-cyan);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.btn-tactical:hover:not(:disabled){background:var(--primary-cyan);color:#03070f;box-shadow:0 0 15px var(--primary-cyan-glow);transform:translateY(-2px)}.btn-tactical:active:not(:disabled){transform:translateY(0)}.btn-tactical:disabled{opacity:.4;cursor:not-allowed;border-color:var(--text-muted);color:var(--text-muted)}.btn-green{border-color:var(--accent-green);color:var(--accent-green);background:#00ff9d1a}.btn-green:hover:not(:disabled){background:var(--accent-green);color:#03070f;box-shadow:0 0 15px var(--accent-green-glow)}.btn-red{border-color:var(--sunk-red);color:var(--sunk-red);background:#ff3b5c1a}.btn-red:hover:not(:disabled){background:var(--sunk-red);color:#fff;box-shadow:0 0 15px var(--sunk-red-glow)}.grid-container{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:2px;background:var(--grid-bg);padding:6px;border-radius:12px;border:1px solid var(--border-glow);box-shadow:inset 0 0 20px #000c;max-width:440px;width:100%;aspect-ratio:1;position:relative;overflow:hidden}.radar-sweep:after{content:"";position:absolute;top:50%;left:50%;width:150%;height:150%;background:conic-gradient(from 0deg,rgba(0,240,255,.15) 0deg,transparent 60deg,transparent 360deg);border-radius:50%;transform:translate(-50%,-50%);animation:sweep 4s linear infinite;pointer-events:none}@keyframes sweep{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border-radius:3px;border:1px solid var(--grid-line);position:relative;transition:all .15s ease}.cell-header{background:#00f0ff0d;color:var(--text-muted);font-family:var(--font-hud);font-size:.65rem;border:none}.cell-interactive{cursor:pointer}.cell-interactive:hover{background:#00f0ff40;border-color:var(--primary-cyan);box-shadow:0 0 8px var(--primary-cyan-glow)}.cell-ship{background:linear-gradient(135deg,#1b3a5c,#0d233a);border-color:var(--primary-cyan);box-shadow:inset 0 0 6px #00f0ff4d}.cell-ship-invalid{background:#ff3b5c59!important;border-color:var(--sunk-red)!important}.cell-aa-zone{box-shadow:inset 0 0 8px #00ff9d66!important;border-color:var(--accent-green)!important}.cell-mine:after{content:"💣";font-size:.85rem}.cell-radar-ping{background:#ff9f1c73!important;border-color:var(--hit-orange)!important;box-shadow:inset 0 0 12px var(--hit-orange),0 0 16px var(--hit-orange-glow)!important;animation:radarPingPulse 1s ease infinite alternate}@keyframes radarPingPulse{0%{transform:scale(1);box-shadow:inset 0 0 6px var(--hit-orange),0 0 8px var(--hit-orange-glow)}to{transform:scale(1.05);box-shadow:inset 0 0 14px var(--hit-orange),0 0 20px var(--hit-orange-glow)}}.cell-hit-orange{background:linear-gradient(135deg,#ff9f1cbf,#d97706e6)!important;border-color:var(--hit-orange)!important;box-shadow:inset 0 0 8px var(--hit-orange),0 0 10px var(--hit-orange-glow);animation:hitOrangePulse 1.2s ease infinite alternate}.cell-sunk-red{background:linear-gradient(135deg,#ff3b5ce6,#b91c1c)!important;border-color:var(--sunk-red)!important;box-shadow:inset 0 0 12px #ff0032,0 0 14px var(--sunk-red-glow)!important;animation:hitRedPulse 1s ease infinite alternate}.cell-miss{background:#78a0c81f!important;border-color:#78a0c84d!important}.cell-miss:after{content:"•";color:var(--text-muted);font-size:1.2rem}@keyframes hitOrangePulse{0%{box-shadow:inset 0 0 4px var(--hit-orange),0 0 6px var(--hit-orange-glow)}to{box-shadow:inset 0 0 10px var(--hit-orange),0 0 14px var(--hit-orange-glow)}}@keyframes hitRedPulse{0%{box-shadow:inset 0 0 6px var(--sunk-red),0 0 8px var(--sunk-red-glow)}to{box-shadow:inset 0 0 14px var(--sunk-red),0 0 16px var(--sunk-red-glow)}}.floating-emoji{position:fixed;font-size:3rem;pointer-events:none;z-index:9999;animation:floatUpFade 2.5s cubic-bezier(.25,1,.5,1) forwards}@keyframes floatUpFade{0%{transform:translateY(0) scale(.5);opacity:0}20%{transform:translateY(-30px) scale(1.2);opacity:1}80%{transform:translateY(-120px) scale(1);opacity:1}to{transform:translateY(-160px) scale(.8);opacity:0}}