*{box-sizing:border-box;margin:0;padding:0}body{background:#0d1b2a;color:#c8dff0;font-family:Courier New,monospace;min-height:100vh}#root{width:100vw;height:100vh;overflow:hidden}.app{width:100%;height:100%;display:flex;flex-direction:column}.btn{background:#1a4a7a;border:1px solid #4a8ac0;color:#c8dff0;padding:8px 20px;font-family:Courier New,monospace;font-size:14px;cursor:pointer;border-radius:4px;transition:background .15s}.btn:hover{background:#2a6aaa}.btn:disabled{opacity:.4;cursor:default}.btn:disabled:hover{background:#1a4a7a}.btn-danger{background:#7a1a1a;border-color:#c04040}.btn-danger:hover{background:#9a2a2a}.btn-success{background:#1a5a3a;border-color:#40a060}.btn-success:hover{background:#2a7a4a}.input{background:#1b2838;border:1px solid #4a8ac0;color:#c8dff0;padding:8px 12px;font-family:Courier New,monospace;font-size:14px;border-radius:4px;outline:none}.input:focus{border-color:#6ab0e0}.error-banner{background:#5a1a1a;border-bottom:1px solid #c04040;padding:8px 16px;font-size:13px;text-align:center;color:#f88}.connecting-banner{background:#3a3a1a;border-bottom:1px solid #a0a040;padding:8px 16px;font-size:13px;text-align:center;color:#e0e080}.main-menu{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}.main-menu h1{font-size:36px;color:#6ab0e0;margin-bottom:16px}.main-menu .actions{display:flex;flex-direction:column;gap:12px;align-items:center}.main-menu .join-row{display:flex;gap:8px}.main-menu .waiting{color:#a0c8e0;font-size:14px}.main-menu .room-code{font-size:20px;color:gold;letter-spacing:4px;-webkit-user-select:all;user-select:all}.ai-section{margin-top:12px;padding-top:12px;border-top:1px solid #2a4a6a;text-align:center}.ai-label{font-size:14px;color:#a0c8e0;margin-bottom:8px}.ai-buttons{display:flex;gap:8px;justify-content:center}.setup-screen{flex:1;display:flex;overflow:hidden}.ship-palette{width:220px;background:#0f2030;border-right:1px solid #2a4a6a;padding:12px;overflow-y:auto;flex-shrink:0}.ship-palette h3{font-size:14px;margin-bottom:10px;color:#6ab0e0}.palette-item{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer;border-radius:4px;border:1px solid transparent;margin-bottom:2px;font-size:12px}.palette-item:hover{background:#6ab0e01a}.palette-item.selected{border-color:gold;background:#ffd7001a}.palette-item.depleted{opacity:.35;cursor:default}.palette-item .abbrev{font-weight:700;width:28px;text-align:center;color:#6ab0e0}.palette-item .name{flex:1}.palette-item .count{color:#a0c8e0;font-size:11px}.palette-total{margin-top:10px;padding-top:8px;border-top:1px solid #2a4a6a;font-size:12px;color:#a0c8e0}.setup-board{flex:1;display:flex;flex-direction:column;min-width:0}.setup-board .board-container{flex:1;min-height:0}.setup-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;border-top:1px solid #2a4a6a}.game-screen{flex:1;display:flex;flex-direction:column;overflow:hidden}.turn-indicator{padding:8px 16px;text-align:center;font-size:16px;font-weight:700;border-bottom:1px solid #2a4a6a}.turn-indicator.your-turn{background:#1a3a2a;color:#60d080}.turn-indicator.opponent-turn{background:#3a1a1a;color:#e08060}.game-body{flex:1;display:flex;overflow:hidden}.board-area{flex:1;min-width:0}.game-sidebar{width:260px;display:flex;flex-direction:column;border-left:1px solid #2a4a6a;flex-shrink:0}.sidebar-header{display:flex;justify-content:flex-end;padding:6px 8px;border-bottom:1px solid #2a4a6a}.action-panel{padding:12px;border-bottom:1px solid #2a4a6a;display:flex;flex-direction:column;gap:6px}.action-panel .idle-text{color:#6a8a9a;font-size:12px;text-align:center;padding:8px}.action-panel .ship-info{font-size:12px;color:#a0c8e0;margin-bottom:4px}.action-panel .mode-info{font-size:12px;color:#e0e080;margin-bottom:4px}.action-panel .mode-hint{font-size:11px;color:#8a9aaa;margin-bottom:2px}.action-panel .mode-hint.detached-warning{color:#e0a040}.action-panel .bomb-warning{color:#ff6040;font-weight:700}.action-panel .rank-info{color:#c8dff0}.action-panel .division-bonus{color:#50c878;font-weight:700}.battle-log{flex:1;display:flex;flex-direction:column;min-height:0}.battle-log h4{font-size:13px;padding:8px 12px;border-bottom:1px solid #2a4a6a;color:#6ab0e0}.log-entries{flex:1;overflow-y:auto;padding:4px 8px;font-size:11px}.log-entry{padding:4px 6px;border-bottom:1px solid rgba(42,74,106,.3);border-left:3px solid transparent;display:flex;align-items:baseline;gap:4px}.log-entry .log-icon{flex-shrink:0;width:14px;text-align:center;font-size:10px}.log-entry .turn{color:#6a8a9a;flex-shrink:0}.log-entry .log-player{font-size:10px;font-weight:700;flex-shrink:0}.log-entry.log-you .log-player{color:#60d080}.log-entry.log-enemy .log-player{color:#e08060}.log-entry .action{flex:1;min-width:0}.log-entry.log-move{border-left-color:#50c878}.log-entry.log-combat,.log-entry.log-torpedo{border-left-color:#e05050}.log-entry.log-bomb{border-left-color:#ff6030}.log-entry.log-depth-charge{border-left-color:#e0a040}.log-entry.log-submarine{border-left-color:#4a90d0}.log-entry.log-victory{border-left-color:gold;background:#ffd70014;font-weight:700}.log-entry.log-other{border-left-color:#6a8a9a}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.dialog-box{background:#0f2030;border:2px solid #4a8ac0;border-radius:8px;padding:24px;min-width:300px;max-width:420px;text-align:center}.dialog-box h3{color:#6ab0e0;margin-bottom:16px}.dialog-box .combatants{display:flex;justify-content:space-around;margin-bottom:16px}.dialog-box .combatant{display:flex;flex-direction:column;align-items:center;gap:4px}.dialog-box .combatant .type-badge{font-size:20px;font-weight:700;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#fff}.dialog-box .combatant .label{font-size:11px;color:#a0c8e0}.dialog-box .outcome{font-size:15px;font-weight:700;margin-bottom:12px;padding:8px;border-radius:4px}.dialog-box .special-effect{font-size:12px;color:#e0e080;margin-bottom:12px}.result-screen{flex:1;display:flex;flex-direction:column;overflow:hidden}.result-banner{padding:16px;text-align:center;font-size:24px;font-weight:700;flex-shrink:0}.result-banner.victory{background:#1a3a2a;color:#60d080}.result-banner.defeat{background:#3a1a1a;color:#e08060}.result-details{flex:1;display:flex;overflow:hidden}.result-stats-section{width:300px;flex-shrink:0;overflow-y:auto;padding:12px;border-right:1px solid #2a4a6a;font-size:12px}.result-summary{text-align:center;font-size:14px;color:#a0c8e0;padding-bottom:8px;border-bottom:1px solid #2a4a6a;margin-bottom:8px}.result-columns{display:flex;gap:12px;margin-bottom:12px}.result-col{flex:1}.col-header{font-size:13px;margin-bottom:6px}.col-header.you{color:#60d080}.col-header.enemy{color:#e08060}.stat-line{color:#a0c8e0;margin-bottom:2px}.type-breakdown{margin-top:6px;padding-top:4px;border-top:1px solid rgba(42,74,106,.3)}.type-row{display:flex;justify-content:space-between;margin-bottom:1px}.type-abbrev{color:#6ab0e0;font-weight:700}.all-lost{color:#e08060}.result-timeline{border-top:1px solid #2a4a6a;padding-top:8px;margin-bottom:12px}.result-timeline h4{font-size:12px;color:#6ab0e0;margin-bottom:6px}.timeline-entry{display:flex;gap:4px;padding:2px 0;font-size:11px}.timeline-entry .turn{color:#6a8a9a;flex-shrink:0}.tl-player{font-weight:700;flex-shrink:0;width:40px}.tl-player.you{color:#60d080}.tl-player.enemy{color:#e08060}.tl-action{color:#c8dff0;flex:1;min-width:0}.result-legend{border-top:1px solid #2a4a6a;padding-top:8px}.result-legend h4{font-size:12px;color:#6ab0e0;margin-bottom:6px}.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}.legend-item{display:flex;align-items:center;gap:4px;font-size:11px}.legend-abbrev{font-weight:700;width:22px;text-align:center}.legend-ranked{color:#2166c7}.legend-special{color:#c0392b}.legend-fort{color:#f0a500}.legend-name{color:#a0c8e0}.result-board{flex:1;min-height:0}.result-actions{display:flex;justify-content:center;padding:12px;border-top:1px solid #2a4a6a;flex-shrink:0}.turn-indicator-text{display:flex;align-items:center;justify-content:center;gap:4px}.turn-timer-seconds{font-variant-numeric:tabular-nums}.turn-skipped-notice{font-size:13px;color:gold;margin-top:2px}.turn-timer-bar{height:4px;background:#1b2838;width:100%;margin-top:4px}.turn-timer-fill{height:100%;transition:width 1s linear,background-color .5s;border-radius:2px}.rules-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:200}.rules-modal{background:#0f2030;border:2px solid #4a8ac0;border-radius:8px;width:680px;max-width:calc(100vw - 32px);max-height:calc(100vh - 64px);display:flex;flex-direction:row;overflow:hidden}.rules-nav{width:180px;background:#0a1520;border-right:1px solid #2a4a6a;padding:12px 0;overflow-y:auto;flex-shrink:0}.rules-nav-item{padding:8px 16px;cursor:pointer;font-size:13px;color:#a0c8e0;border-left:3px solid transparent}.rules-nav-item:hover{background:#6ab0e014}.rules-nav-item.active{border-left-color:#6ab0e0;color:#fff;background:#6ab0e01f}.rules-content{flex:1;padding:20px;overflow-y:auto;font-size:13px;line-height:1.6;color:#c8dff0}.rules-content h3{color:#6ab0e0;margin-bottom:12px;font-size:16px}.rules-content p{margin-bottom:10px}.rules-content ul{margin-left:20px;margin-bottom:10px}.rules-content li{margin-bottom:4px}.rules-close-btn{position:absolute;top:12px;right:12px;background:none;border:none;color:#a0c8e0;font-size:20px;cursor:pointer}.rules-close-btn:hover{color:#fff}.rules-help-btn{background:none;border:1px solid #4a8ac0;color:#6ab0e0;width:32px;height:32px;border-radius:50%;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.rules-help-btn:hover{background:#6ab0e026;color:#fff}@media(max-width:900px){.ship-palette{width:160px}.game-sidebar{width:180px}.result-stats-section{width:220px}.btn{padding:6px 14px;font-size:13px}.palette-item{font-size:11px;padding:4px 6px}.rules-modal{width:560px}.rules-nav{width:150px}}@media(max-width:600px){#root{overflow-y:auto;height:auto;min-height:100vh}.setup-screen{flex-direction:column}.ship-palette{width:100%;border-right:none;border-bottom:1px solid #2a4a6a;max-height:140px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:2px;padding:8px}.ship-palette h3{grid-column:1 / -1;margin-bottom:4px}.palette-total{grid-column:1 / -1}.game-body{flex-direction:column}.game-sidebar{width:100%;border-left:none;border-top:1px solid #2a4a6a;flex-direction:row;max-height:180px}.action-panel{flex:1;border-bottom:none;border-right:1px solid #2a4a6a;overflow-y:auto}.battle-log{flex:1;min-height:0}.board-area,.result-board{height:55vw;min-height:260px;flex:none}.result-details{flex-direction:column}.result-stats-section{width:100%;max-height:240px;border-right:none;border-bottom:1px solid #2a4a6a}.dialog-box{width:calc(100vw - 32px);min-width:0}.main-menu h1{font-size:24px}.rules-modal{flex-direction:column;max-height:calc(100vh - 32px);width:calc(100vw - 16px)}.rules-nav{width:100%;border-right:none;border-bottom:1px solid #2a4a6a;flex-direction:row;overflow-x:auto;overflow-y:hidden;display:flex;padding:0;flex-shrink:0}.rules-nav-item{white-space:nowrap;border-left:none;border-bottom:3px solid transparent;padding:8px 12px;font-size:12px}.rules-nav-item.active{border-left-color:transparent;border-bottom-color:#6ab0e0}}