*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:#050d14;color:#c8d8e8;font-family:monospace;display:flex;align-items:flex-start;justify-content:center;min-height:100vh;padding:24px;gap:24px}#game-wrap{position:relative;display:inline-block;line-height:0}canvas{display:block;image-rendering:pixelated;border:1px solid #1a3a52}#game-over{display:none;position:absolute;inset:0;background:#050d14bf;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;line-height:1.2}#game-over.visible{display:flex;pointer-events:auto}#game-over-headline{font-family:monospace;font-size:32px;font-weight:700;letter-spacing:.05em}#game-over-reason{font-family:monospace;font-size:13px;color:#8aa8c0}#btn-new-game{padding:8px 24px;background:#0d3520;color:#4ae090;border:1px solid #1a5a30;font-family:monospace;font-size:13px;font-weight:700;letter-spacing:.08em;cursor:pointer;white-space:nowrap;margin-top:8px}#btn-new-game:hover{background:#143d26;border-color:#4ae090;color:#80f0b0}#btn-new-game:disabled{opacity:.5;cursor:default}#btn-show-map{position:absolute;bottom:12px;background:none;border:none;color:#5a7a90;font-family:monospace;font-size:11px;cursor:pointer;padding:4px 8px;letter-spacing:.05em}#btn-show-map:hover{color:#8aa8c0}#panel{width:260px;align-self:stretch;font-size:13px;line-height:1.6;color:#8aa8c0;display:grid;grid-template-columns:1fr;align-content:start;gap:16px}#turn-header,#ship-info,#ship-actions{padding:0 8px}.panel-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#3a6a8a;margin-bottom:6px}#ship-info{display:none}#ship-info.visible{display:block}#ship-info .ship-class{font-size:15px;color:#4ac8f0;text-transform:capitalize;margin-bottom:4px}#ship-info .ship-stat{display:flex;justify-content:space-between;color:#8aa8c0}#ship-info .ship-stat span:last-child{color:#c8d8e8}#ship-actions{display:none;flex-direction:column;gap:5px}#ship-actions.visible{display:flex}.port-actions-title{margin-top:8px}.action-btn{width:100%;padding:6px 10px;background:#0a2035;color:#5ab4e0;border:1px solid #1a4a6a;font-family:monospace;font-size:12px;cursor:pointer;letter-spacing:.05em;text-align:left;display:flex;justify-content:space-between}.action-btn:hover:not(:disabled){background:#112840;border-color:#5ab4e0;color:#a0d8f0}.action-btn:disabled{opacity:.3;cursor:default}.action-btn.active{background:#0d3550;border-color:#4ac8f0;color:#a0d8f0}.action-btn.repairable{background:#2a0a0a;border-color:#882020;color:#cc4040}.action-btn.repairable:hover:not(:disabled){background:#3a1010;border-color:#cc4040;color:#ff8080}.action-btn .key-hint{color:#3a6a8a}#turn-header{display:flex;flex-direction:column;gap:6px}#turn-header-top{display:grid;grid-template-areas:"lbl-ships lbl-turn ." "ships     turn     btn";grid-template-columns:auto auto 1fr;column-gap:8px;row-gap:1px;align-items:center}#lbl-ships{grid-area:lbl-ships;font-size:8px}#lbl-turn{grid-area:lbl-turn;font-size:8px}#fleet-canvas{grid-area:ships}#turn-number{grid-area:turn}#btn-end-turn{grid-area:btn;justify-self:end}#fleet-canvas{display:block;image-rendering:pixelated}#net-status{font-size:11px;color:#5ab4e0;min-height:0}#turn-number{font-size:18px;color:#c8d8e8;line-height:1}#scenario-objective{font-size:11px;color:#5ab4e0;background:#091825;border:1px solid #1a3a52;padding:6px 8px;line-height:1.5}#activity-log{background:#050d14;border:1px solid #1a3a52;padding:6px 8px;margin-top:auto}#activity-entries{display:flex;flex-direction:column;gap:3px;max-height:110px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#1a4a6a transparent}.activity-entry{font-size:11px;line-height:1.4;display:flex;gap:6px}.activity-turn{color:#2a5a7a;flex-shrink:0;min-width:22px}.activity-msg{color:#8aa8c0}.activity-msg.cat-combat{color:#e07050}.activity-msg.cat-radar{color:#50a0d0}.activity-msg.cat-ew{color:#c8b820}.activity-msg.cat-damage{color:#e08030}.activity-msg.cat-sunk{color:#ff2020;font-weight:700}#btn-regen{padding:7px 0;background:#0a2035;color:#5ab4e0;border:1px solid #1a4a6a;font-family:monospace;font-size:12px;cursor:pointer;letter-spacing:.05em}#btn-regen:hover{background:#112840;border-color:#5ab4e0;color:#a0d8f0}#btn-end-turn{padding:5px 10px;background:#0d3520;color:#4ae090;border:1px solid #1a5a30;font-family:monospace;font-size:12px;cursor:pointer;letter-spacing:.05em;font-weight:700;white-space:nowrap}#btn-end-turn:hover:not(:disabled){background:#143d26;border-color:#4ae090;color:#80f0b0}#btn-end-turn:disabled{opacity:.4;cursor:default}.connect-overlay{position:fixed;inset:0;background:#050d14;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}.connect-top{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;padding-bottom:16px}.connect-title{font-size:22px;color:#4ac8f0;letter-spacing:.15em}.connect-subtitle{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#3a6a8a}.connect-middle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:260px;flex-shrink:0;width:100%}.connect-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;padding-top:16px}.connect-row{display:flex;gap:6px}.connect-row-wrap{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.connect-menu-row{display:flex;gap:10px}.connect-picker{display:flex;flex-direction:column;align-items:center;gap:6px}.connect-btn{padding:7px 14px;background:#0a2035;color:#5ab4e0;border:1px solid #1a4a6a;font-family:monospace;font-size:11px;cursor:pointer;letter-spacing:.06em}.connect-btn:hover{background:#112840;border-color:#5ab4e0}.connect-btn.active{background:#112840;border-color:#4ac8f0;color:#4ac8f0}.connect-btn-lg{padding:9px 22px;font-size:13px;letter-spacing:.05em;min-width:150px}.connect-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#3a6a8a}.connect-status{font-size:12px;color:#3a6a8a;min-height:18px;text-align:center}.connect-status.error{color:#e05050}.connect-blurb{font-size:11px;color:#3a6a8a;text-align:center;max-width:420px;line-height:1.5}.connect-code-display{font-size:36px;letter-spacing:.4em;color:#4ac8f0;background:#091825;border:1px solid #1a4a6a;padding:18px 28px;cursor:pointer;user-select:all;transition:border-color .15s}.connect-code-display.copied{border-color:#4ae090}.connect-join-input{width:300px;padding:14px;background:#091825;color:#4ac8f0;border:1px solid #1a4a6a;font-family:monospace;font-size:24px;letter-spacing:.3em;text-align:center;text-transform:uppercase}body.mobile{flex-direction:column;padding:0;gap:0;align-items:stretch;height:100dvh;overflow:hidden}body.mobile #game-wrap{flex:1 1 0;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;display:block;line-height:0;padding-bottom:56px}body.mobile #panel{position:fixed;bottom:0;left:0;right:0;height:56px;overflow:hidden;background:#050d14;border-top:1px solid #1a4a6a;border-left:none;z-index:10;display:flex;flex-direction:column;justify-content:center;padding:0 12px;width:100%}body.mobile #scenario-objective,body.mobile #ship-info,body.mobile #ship-actions,body.mobile #activity-log,body.mobile #btn-regen{display:none!important}body.mobile #turn-header{padding:0}body.mobile .key-hint{display:none}#mobile-sheet{position:fixed;bottom:56px;left:0;right:0;z-index:9;background:#050d14;border:1px solid #1a4a6a;border-bottom:none;border-radius:12px 12px 0 0;padding:0 12px 20px;max-height:65vh;overflow-y:auto;transform:translateY(110%);transition:transform .3s cubic-bezier(.32,.72,0,1)}#mobile-sheet.visible{transform:translateY(0)}#mobile-sheet-header{display:flex;align-items:center;justify-content:center;position:relative;padding:10px 0 14px}#mobile-handle{width:36px;height:4px;background:#2a5a7a;border-radius:2px}#mobile-close{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:none;color:#3a6a8a;font-size:16px;cursor:pointer;padding:6px 8px;line-height:1}#mobile-close:active{color:#8aa8c0}#mobile-ship-name{margin-bottom:8px}.m-ship-class{font-size:16px;color:#4ac8f0;text-transform:capitalize}.m-enemy{font-size:12px;color:#5a8aaa}#mobile-ship-stats{margin-bottom:14px}.m-stat{display:flex;justify-content:space-between;font-size:12px;color:#8aa8c0;line-height:1.7}.m-stat span:last-child{color:#c8d8e8}.m-section{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#3a6a8a;grid-column:1 / -1;margin-top:6px}#mobile-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.m-btn{padding:12px 4px;background:#0a2035;color:#5ab4e0;border:1px solid #1a4a6a;font-family:monospace;font-size:12px;cursor:pointer;letter-spacing:.03em;text-align:center;border-radius:4px;line-height:1.3}.m-btn:active:not(:disabled){background:#112840}.m-btn:disabled{opacity:.3;cursor:default}.m-btn.active{background:#0d3550;border-color:#4ac8f0;color:#a0d8f0}.m-btn.repairable{background:#2a0a0a;border-color:#882020;color:#cc4040}