:root{--color-bg:#141013;--color-bg-secondary:#242234;--color-surface:#3b3a58;--color-surface-hover:#525075;--color-border:#000;--color-border-inner:#75718a;--color-text:#f4f4f4;--color-text-secondary:#8b93af;--color-text-dim:#5c627a;--color-primary:#38bdf8;--color-hit:#ff4b2b;--color-miss:#7a7a7a;--color-ship:#525075;--color-valid:#4ecca3;--color-invalid:#ff4b2b;--color-victory:#f9d423;--color-defeat:#ff4b2b;--cell-size:42px;--grid-gap:1px;--radius-sm:0px;--radius-md:0px;--radius-lg:0px;--radius-xl:0px;--font-body:"VT323", monospace;--font-mono:"Press Start 2P", cursive;--shadow-retro:4px 4px 0px #000;--shadow-retro-small:2px 2px 0px #000}*,:before,:after{box-sizing:border-box;image-rendering:pixelated;margin:0;padding:0}.game-page{flex-direction:column;min-height:100vh;display:flex}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);background-image:linear-gradient(45deg,#1a1a1a 25%,#0000 25%),linear-gradient(-45deg,#1a1a1a 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1a1a1a 75%),linear-gradient(-45deg,#0000 75%,#1a1a1a 75%);background-position:0 0,0 2px,2px -2px,-2px 0;background-size:4px 4px;min-height:100vh;font-size:20px;overflow-x:hidden}.status-bar{border-bottom:2px solid var(--color-surface);z-index:100;width:100%;font-family:var(--font-body);background:#000;justify-content:space-between;align-items:center;padding:6px 20px;font-size:15px;display:flex;position:sticky;top:0}.lobby-name-input{z-index:10;width:100%;max-width:440px;margin:0 auto 32px;position:relative}.lobby-name-input .input-group{background:var(--color-bg-secondary);border:4px solid #000;flex-direction:column;gap:12px;padding:24px;display:flex;box-shadow:8px 8px #000}.lobby-name-input label{font-family:var(--font-mono);color:var(--color-text-secondary);text-transform:uppercase;text-align:center;font-size:14px;display:block}.lobby-name-input .input-with-icon{align-items:center;display:flex;position:relative}.lobby-name-input .input-icon{color:var(--color-primary);pointer-events:none;z-index:2;position:absolute;left:16px}.lobby-name-input input.input{padding:18px 16px 18px 52px;font-size:20px}.status-bar__left{align-items:center;gap:12px;display:flex}.status-bar__divider{color:var(--color-text-dim)}.status-bar__center{flex:1;justify-content:center;display:flex}.status-bar__vs{background:var(--color-bg-secondary);border-left:2px solid var(--color-surface);border-right:2px solid var(--color-surface);align-items:center;gap:16px;padding:2px 16px;display:flex}.status-bar__player-name{font-family:var(--font-mono);color:var(--color-primary);text-transform:uppercase;font-size:10px}.status-bar__vs-tag{font-family:var(--font-mono);color:var(--color-hit);font-size:8px;font-weight:700}.btn{border:4px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font-family:var(--font-mono);cursor:pointer;box-shadow:var(--shadow-retro);text-transform:uppercase;justify-content:center;align-items:center;gap:12px;padding:12px 24px;font-size:14px;transition:transform 50ms,box-shadow 50ms;display:inline-flex;position:relative}.btn:hover:not(:disabled){background:var(--color-surface-hover)}.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px #000}.btn:disabled{opacity:.6;cursor:not-allowed;filter:grayscale()}.btn--primary{background:#3f5efb;border-color:#000}.btn--primary:hover:not(:disabled){background:#5b76ff}.btn--secondary{background:#4a4a4a}.btn--lg{padding:16px 32px;font-size:16px}.input{border:4px solid var(--color-surface);width:100%;color:var(--color-primary);font-family:var(--font-mono);text-align:left;text-transform:uppercase;background:#000;outline:none;padding:14px 14px 14px 48px;font-size:16px;transition:all .2s;box-shadow:inset 4px 4px #00000080}.input:focus{border-color:var(--color-primary);background:#050505;box-shadow:inset 4px 4px #000c,0 0 10px #38bdf833}.status-bar__dot{background:var(--color-hit);width:12px;height:12px}.status-bar__dot--connected{background:var(--color-valid)}.status-bar__audio{align-items:center;gap:12px;display:flex}.status-bar__volume-slider{appearance:none;border:2px solid var(--color-surface);background:#000;outline:none;width:80px;height:8px}.status-bar__volume-slider::-webkit-slider-thumb{appearance:none;background:var(--color-primary);cursor:pointer;border:2px solid #000;width:12px;height:12px}.status-bar__volume-percent{font-family:var(--font-mono);min-width:32px;font-size:8px}.lobby-page{flex-direction:column;align-items:center;min-height:100vh;display:flex}.lobby-header{text-align:center;padding:40px 24px 24px}.lobby-header__icon{color:var(--color-primary);filter:drop-shadow(4px 4px #000);margin-bottom:24px}.lobby-header__title{font-family:var(--font-mono);text-shadow:6px 6px #000;color:var(--color-primary);letter-spacing:-2px;text-transform:uppercase;font-size:42px}.lobby-header__subtitle{color:var(--color-text-secondary);max-width:600px;margin-top:4px;font-size:18px}.lobby-cards{align-items:stretch;gap:32px;width:100%;max-width:1100px;padding:24px;display:flex}.lobby-divider{color:var(--color-text-dim);font-family:var(--font-mono);justify-content:center;align-items:center;font-size:14px;display:flex}.lobby-card{background:var(--color-bg-secondary);text-align:center;border:4px solid #000;flex-direction:column;flex:1;align-items:center;gap:20px;padding:32px;display:flex;box-shadow:8px 8px #000}.lobby-card__title{font-family:var(--font-mono);color:var(--color-text);font-size:18px}.lobby-card__desc{color:var(--color-text-secondary);font-size:16px;line-height:1.4}.lobby-card__form{flex-direction:column;gap:16px;width:100%;display:flex}.lobby-card__code-row{border:2px solid var(--color-surface);background:#000;justify-content:center;align-items:center;gap:12px;padding:12px;display:flex}.lobby-card__code{font-family:var(--font-mono);color:var(--color-primary);font-size:24px}.lobby-waiting{border:4px solid var(--color-surface);color:var(--color-primary);font-family:var(--font-mono);background:#000;align-items:center;gap:16px;margin-top:40px;padding:16px 32px;font-size:14px;display:flex}.lobby-waiting__spinner{border:4px solid var(--color-surface);border-top-color:var(--color-primary);width:24px;height:24px;animation:.6s steps(4,end) infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.lobby-footer{text-align:center;font-family:var(--font-body);color:var(--color-text-dim);margin-top:auto;padding:40px;font-size:24px}.lobby-footer__credits{justify-content:center;gap:16px;margin-top:12px;display:flex}.lobby-footer__credits a{color:var(--color-text-secondary);text-decoration:none}.lobby-footer__credits a:hover{color:var(--color-primary);text-decoration:underline}.waiting-screen{color:var(--color-text-secondary);font-family:var(--font-mono);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;display:flex}.waiting-screen__spinner{border:8px solid var(--color-bg-secondary);border-top-color:var(--color-primary);width:64px;height:64px;animation:.8s steps(4,end) infinite spin}.error-banner{border:4px solid var(--color-hit);color:var(--color-hit);text-align:center;font-family:var(--font-mono);box-shadow:var(--shadow-retro);background:#000;margin:32px;padding:24px}.error-banner__sub{color:var(--color-text-dim);font-size:14px;font-family:var(--font-body);margin-top:8px}.grid-container{flex-direction:column;gap:16px;display:flex}.grid-label{font-family:var(--font-mono);color:var(--color-text-secondary);text-transform:uppercase;text-align:center;font-size:14px}.grid-wrapper{flex-direction:column;display:flex}.grid-headers--col{display:flex}.grid-corner{width:28px;height:28px}.grid-header{width:var(--cell-size);height:28px;font-family:var(--font-body);color:var(--color-text-dim);justify-content:center;align-items:center;font-size:18px;display:flex}.grid-body{display:flex}.grid-headers--row{flex-direction:column;display:flex}.grid-headers--row .grid-header{width:28px;height:var(--cell-size)}.grid-cells{grid-template-columns:repeat(10, var(--cell-size));grid-template-rows:repeat(10, var(--cell-size));background:#fff3;border:4px solid #000;gap:1px;padding:1px;display:grid;position:relative}.cell{width:var(--cell-size);height:var(--cell-size);cursor:default;transition:all var(--transition-fast);z-index:2;background:#242234;justify-content:center;align-items:center;display:flex;position:relative}.cell--empty{background:#242234}.cell--ship{background:#525075}.cell--hit{background:#ff4b2b}.cell--miss{background:#4a4a4a}.cell--revealed{background:#38bdf826;box-shadow:inset 0 0 10px #38bdf84d}.cell--preview-valid{background:var(--color-valid)!important}.cell--preview-invalid{background:var(--color-invalid)!important}.cell--targetable{cursor:crosshair}.cell--targetable:hover{background:#38bdf833}.cell--last-move{outline:3px solid var(--color-hit);outline-offset:-3px;z-index:5;animation:1.5s infinite pulse-border}@keyframes pulse-border{0%{outline-color:var(--color-hit)}50%{outline-color:#0000}to{outline-color:var(--color-hit)}}.cell--disabled{cursor:not-allowed;opacity:.6}.cell__marker{font-family:var(--font-mono);font-size:24px}.combo-indicator{z-index:200;pointer-events:none;flex-direction:column;align-items:center;gap:8px;animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards combo-in;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.combo-text{font-family:var(--font-mono);color:#fc0;text-shadow:4px 4px #000,0 0 20px #ffcc0080;text-transform:uppercase;letter-spacing:4px;font-size:48px}.combo-subtext{font-family:var(--font-mono);color:#ff4b2b;text-shadow:2px 2px #000;font-size:20px}@keyframes combo-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.combo-out{animation:.3s ease-in forwards combo-out}@keyframes combo-out{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.5)}}.ship-tray{background:var(--color-bg-secondary);border:4px solid #000;flex-direction:column;gap:16px;min-width:260px;padding:24px;display:flex;box-shadow:6px 6px #000}.ship-tray__title{font-family:var(--font-mono);color:var(--color-text-secondary);text-transform:uppercase;font-size:14px}.ship-tray__list{flex-direction:column;gap:8px;display:flex}.ship-tray__item{background:var(--color-surface);cursor:pointer;border:2px solid #0000;align-items:center;gap:16px;padding:12px;display:flex}.ship-tray__item:hover{background:var(--color-surface-hover)}.ship-tray__item--selected{border-color:var(--color-primary);background:#000}.ship-tray__item--placed{opacity:.4;filter:grayscale()}.ship-tray__info{flex-direction:column;gap:4px;display:flex}.ship-tray__name{font-family:var(--font-mono);font-size:12px}.ship-tray__length{font-family:var(--font-body);color:var(--color-text-dim);font-size:16px}.ship-tray__controls{flex-direction:column;gap:8px;margin-top:16px;display:flex}.placement-view{flex-direction:column;flex:1;align-items:center;gap:20px;padding:24px;display:flex}.placement-view__header{text-align:center}.placement-view__header h2{font-family:var(--font-mono);color:var(--color-primary);text-transform:uppercase;font-size:20px}.placement-view__subtitle{font-family:var(--font-body);color:var(--color-text-secondary);margin-top:4px;font-size:16px}.placement-view__content{align-items:flex-start;gap:32px;display:flex}.placement-view__footer{flex-direction:column;align-items:center;gap:12px;display:flex}.placement-view__opponent-status{font-family:var(--font-mono);color:var(--color-valid);font-size:11px}.battle-view{flex-direction:column;flex:1;align-items:center;gap:24px;width:100%;padding:24px;display:flex}.battle-view__main{justify-content:center;align-items:center;width:100%;display:flex}.battle-view__grids{border:4px solid var(--color-surface);--cell-size:44px;background:#0006;align-items:center;gap:40px;padding:24px;display:flex;box-shadow:0 0 40px #00000080}.battle-view__actions{flex-direction:column;gap:20px;display:flex}@media (max-width:900px){.battle-view__actions{flex-direction:row;gap:16px;margin:16px 0}}.btn-label{margin-top:4px;font-size:10px}@media (max-width:1200px){.battle-view__grids{--cell-size:38px;gap:32px;padding:24px}}@media (max-width:900px){.battle-view__grids{--cell-size:32px;flex-direction:column}}.turn-indicator{background:var(--color-bg-secondary);border:4px solid #000;flex-direction:column;align-items:center;gap:4px;padding:8px 20px;display:flex;box-shadow:4px 4px #000}.turn-indicator--my-turn{border-color:var(--color-primary)}.turn-indicator__status{align-items:center;gap:12px;display:flex}.turn-indicator__dot{background:var(--color-text-dim);width:8px;height:8px}.turn-indicator__dot--active{background:var(--color-primary);animation:.5s steps(2,end) infinite blink}@keyframes blink{to{opacity:0}}.turn-indicator__text{font-family:var(--font-mono);font-size:14px}.turn-indicator__last-shot{font-family:var(--font-mono);background:#000;padding:6px 12px;font-size:11px}.modal-overlay{z-index:100;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--color-bg-secondary);border:8px solid #000;flex-direction:column;align-items:center;gap:24px;width:90%;max-width:540px;padding:60px;display:flex;box-shadow:16px 16px #00000080}.game-over-modal{text-align:center}.game-over-modal__icon{color:var(--color-victory);filter:drop-shadow(4px 4px #000)}.game-over-modal--defeat .game-over-modal__icon{color:var(--color-defeat)}.game-over-modal__title{font-family:var(--font-mono);color:var(--color-victory);text-shadow:4px 4px #000;font-size:32px}.game-over-modal--defeat .game-over-modal__title{color:var(--color-defeat)}.game-over-modal__subtitle{font-family:var(--font-body);color:var(--color-text-secondary);font-size:22px}.game-over-modal__actions{gap:16px;margin-top:16px;display:flex}.ship-sprite{z-index:10;image-rendering:pixelated}.ship-sprite--interactive:hover{filter:drop-shadow(4px 4px #000)}.ship-sprite__actions{border:2px solid var(--color-primary);z-index:50;pointer-events:auto;background:#000;gap:8px;padding:4px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ship-sprite__btn{background:var(--color-surface);color:var(--color-text);cursor:pointer;border:2px solid #000;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:flex}.ship-sprite__btn:hover{background:var(--color-primary);color:#000}.ship-sprite__btn--remove:hover{background:var(--color-hit);color:#fff}.crt-overlay{pointer-events:none;z-index:999;opacity:.3;background:linear-gradient(#12101000 50%,#0000001a 50%) 0 0/100% 4px,linear-gradient(90deg,#ff000008,#00ff0003,#0000ff08) 0 0/3px 100%;animation:.1s infinite flicker;position:fixed;inset:0}@keyframes flicker{0%{opacity:.27}5%{opacity:.32}10%{opacity:.25}15%{opacity:.35}20%{opacity:.28}25%{opacity:.33}30%{opacity:.26}to{opacity:.3}}.crt-overlay:before{content:"";background:linear-gradient(#fff0 0%,#ffffff0d 50%,#fff0 100%);width:100%;height:100px;animation:8s linear infinite scanline;position:absolute;inset:-100px 0 0}@keyframes scanline{to{top:100%}}.screen-shake{animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.quick-taunts{background:var(--color-bg-secondary);border:4px solid #000;flex-direction:column;width:200px;display:flex;box-shadow:4px 4px #000}.quick-taunts__header{background:var(--color-surface);font-family:var(--font-mono);border-bottom:2px solid #000;align-items:center;gap:8px;padding:8px 12px;font-size:10px;display:flex}.quick-taunts__list{flex-direction:column;gap:4px;max-height:350px;padding:8px;display:flex;overflow-y:auto}.quick-taunts__btn{font-family:var(--font-body);text-align:left;white-space:normal;border-width:2px;justify-content:flex-start;padding:6px 10px;font-size:14px;box-shadow:2px 2px #000}.quick-taunts__btn:active{transform:translate(1px,1px);box-shadow:1px 1px #000}@media (max-width:1024px){:root{--cell-size:34px}.battle-view__grids{gap:32px}}@media (max-width:850px){.lobby-cards{flex-direction:column;align-items:center}.lobby-divider{padding:16px 0}.placement-view__content{flex-direction:column;align-items:center;gap:32px}.battle-view__grids{flex-direction:column;align-items:center;gap:40px}.lobby-header__title{font-size:32px}}@media (max-width:480px){:root{--cell-size:28px}.lobby-header__title{font-size:24px}.btn{padding:8px 16px;font-size:12px}.status-bar{padding:8px 12px;font-size:8px}.status-bar__volume-slider{width:60px}}