*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;font-family:Courier New,Courier,monospace;color:#d4d4d4;user-select:none;-webkit-user-select:none;touch-action:none}#app{position:relative;width:100vw;height:100vh;overflow:hidden}canvas{display:block;width:100%!important;height:100%!important;touch-action:none}.screen{display:none}.screen.active{display:block}#title-screen.active,#end-screen.active,#tutorial-overlay.active,#fact-modal.active,#dice-modal.active{display:flex;align-items:center;justify-content:center}#hud.active{display:block}#fullscreen-btn{position:absolute;top:8px;right:8px;width:48px;height:48px;background:#0a141e99;color:#d4d4d4;border:1px solid #4a6a8a;font-size:22px;cursor:pointer;z-index:2000;border-radius:4px}#fullscreen-btn:active{background:#284664cc}#title-screen{position:absolute;inset:0;background:radial-gradient(ellipse at center,#1a2a3a,#000 80%);z-index:1000;padding:24px}.title-inner{max-width:900px;width:100%;text-align:center}#title-screen h1{font-size:4em;margin:0 0 4px;color:#e8e8e8;letter-spacing:.15em;text-shadow:0 0 30px rgba(120,160,200,.5)}#title-screen h2{font-size:1.3em;color:#8aa0b8;margin:0 0 24px;letter-spacing:.3em;font-weight:400}#title-screen .historical{line-height:1.55;color:#b0b8c0;margin:0 0 24px;font-size:1em}#title-screen .historical em{color:#d0d8e0}.setup-panel{background:#0a141e99;border:1px solid #4a6a8a;padding:16px 20px;margin:0 auto 24px;max-width:700px}.setup-row{display:flex;align-items:center;justify-content:space-between;margin:12px 0;gap:16px;flex-wrap:wrap}.setup-row label{color:#8aa0b8;letter-spacing:.15em;font-size:.95em;flex:0 0 auto;min-width:140px;text-align:left}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg-btn{background:#14283cb3;color:#c8d8e8;border:1px solid #4a6a8a;padding:10px 18px;font-family:inherit;font-size:.9em;cursor:pointer;min-height:44px;min-width:60px;letter-spacing:.1em}.seg-btn.active{background:#3a5a7a;color:#fff;border-color:#8aa0b8}.seg-btn:active{background:#4a6a8a}#player-names{flex-direction:column;align-items:stretch}#player-names .pn-list{display:flex;gap:8px;flex-wrap:wrap;width:100%;justify-content:center}.pn-input{display:flex;align-items:center;gap:6px;background:#14283c80;border:1px solid #4a6a8a;padding:6px 10px}.pn-input .swatch{width:18px;height:18px;border-radius:50%}.pn-input input{background:transparent;border:none;color:#fff;font-family:inherit;font-size:1em;width:80px;outline:none}#start-btn{background:#2a4a6a;color:#fff;border:2px solid #6a8aaa;padding:18px 48px;font-size:1.2em;font-family:inherit;letter-spacing:.2em;cursor:pointer;min-height:60px}#start-btn:active{background:#3a5a7a}#credits{margin-top:24px;font-size:.85em;color:#607080;line-height:1.6}#hud{position:absolute;inset:0;pointer-events:none;z-index:100}#hud .panel{position:absolute;background:#0a141ed1;border:1px solid #4a6a8a;color:#c8d8e8;pointer-events:auto;border-radius:4px}#hud-top-center{top:8px;left:50%;transform:translate(-50%);display:flex;gap:24px;padding:10px 24px;align-items:center}.hud-block{text-align:center;min-width:80px}.hud-label{font-size:.7em;color:#8aa0b8;letter-spacing:.15em}.hud-value{font-size:1.4em;color:#fff;font-weight:700;margin-top:2px}#progress-bar{height:5px;background:#1a2a3a;border:1px solid #4a6a8a;margin-top:4px;width:100px}#progress-fill{height:100%;background:linear-gradient(90deg,#4a8a4a,#6aaa6a);width:0%;transition:width .5s}#convoy-panel{top:100px;left:8px;padding:8px;width:110px}.panel-title{font-size:.75em;color:#8aa0b8;letter-spacing:.15em;margin-bottom:6px;text-align:center}#convoy-grid{display:grid;grid-template-columns:repeat(5,16px);gap:3px}.ship-icon{width:16px;height:16px;background:#4a8a4a;border:1px solid #2a4a2a;border-radius:2px}.ship-icon.damaged{background:#aaa044}.ship-icon.crippled{background:#aa6020}.ship-icon.sunk{background:#2a0a0a;border-color:#6a2020}.player-corner{position:absolute;display:none;pointer-events:auto;z-index:110}.player-corner.active{display:block}.player-corner[data-corner="0"]{bottom:8px;left:8px}.player-corner[data-corner="1"]{bottom:8px;right:8px}.player-corner[data-corner="2"]{top:80px;left:8px}.player-corner[data-corner="3"]{top:80px;right:8px}body.players-1 .player-corner[data-corner="0"]{left:50%;transform:translate(-50%);bottom:8px}.player-tag{background:#0a141ee6;border:2px solid;padding:6px 12px;font-size:.9em;font-weight:700;letter-spacing:.1em;margin-bottom:6px;border-radius:4px;text-align:center}.player-hull-row{display:flex;align-items:center;gap:8px;background:#0a141ed1;padding:6px 10px;margin-bottom:6px;border-radius:4px;border:1px solid #4a6a8a}.player-hull-row span{font-size:.75em;color:#8aa0b8;letter-spacing:.1em;flex:0 0 auto}.health-bar{flex:1;height:8px;background:#2a1a1a;border:1px solid #6a4a4a;min-width:80px;border-radius:2px;overflow:hidden}.health-fill{height:100%;background:linear-gradient(90deg,#8a4040,#aa6060);width:100%;transition:width .4s}.health-fill.good{background:linear-gradient(90deg,#4a8a4a,#6aaa6a)}.health-fill.warn{background:linear-gradient(90deg,#aa8040,#ccaa50)}.player-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.action-btn{background:#14283ce6;border:2px solid #4a6a8a;color:#d8e8f8;font-family:inherit;cursor:pointer;min-width:90px;min-height:90px;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:4px;transition:background .15s,border-color .15s,transform .05s}.action-btn:active:not(:disabled){background:#3c648cf2;transform:scale(.96)}.action-btn.armed{background:#50321ef2;border-color:#ffaa40;box-shadow:0 0 12px #ffaa4099}.action-btn:disabled{opacity:.35;cursor:not-allowed}.action-icon{font-size:1.6em;line-height:1}.action-label{font-size:.7em;letter-spacing:.08em;margin-top:3px;line-height:1.1;text-align:center}.action-status{font-size:.6em;color:#8aa0b8;margin-top:2px;letter-spacing:.08em}#btn-end-turn{position:absolute;bottom:8px;right:8px;background:#2a6a4a;color:#fff;border:2px solid #6aaa8a;font-family:inherit;font-size:1em;letter-spacing:.15em;cursor:pointer;padding:0 24px;min-height:60px;min-width:160px;border-radius:4px;pointer-events:auto;z-index:120}body.players-1 #btn-end-turn{right:8px;bottom:8px}body.players-2 #btn-end-turn{top:80px;right:8px;bottom:auto}body.players-3 #btn-end-turn,body.players-4 #btn-end-turn{bottom:50%;right:8px;transform:translateY(50%)}#btn-end-turn:active{background:#3a8a5a}#btn-end-turn:disabled{opacity:.4;cursor:not-allowed}#sonar-display{position:absolute;pointer-events:none;width:200px;height:200px;border-radius:50%;border:3px solid rgba(80,200,140,.7);transform:translate(-50%,-50%);display:none;z-index:80}#sonar-display.active{display:block;animation:sonar-ring 1.4s ease-out}@keyframes sonar-ring{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}#message-log{position:absolute;top:80px;left:130px;max-width:380px;pointer-events:none;z-index:50}.msg{background:#0a141ed9;border-left:3px solid #6a8aaa;padding:6px 10px;margin-top:4px;font-size:.85em;color:#c8d8e8;animation:msg-in .3s ease-out}.msg.warn{border-left-color:#aa8040;color:#f0d090}.msg.danger{border-left-color:#aa4040;color:#f09090}.msg.good{border-left-color:#40aa40;color:#90f090}@keyframes msg-in{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.ship-label{color:#fff;font-size:14px;font-weight:700;font-family:Arial,sans-serif;background:#000000d1;padding:3px 8px;border-radius:4px;border:1px solid rgba(255,255,255,.25);pointer-events:none;white-space:nowrap;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.9);box-shadow:0 2px 6px #00000080}.ship-label.player{font-size:15px;color:#fe8;border-color:#ffee8880;background:#000000e0}#tutorial-overlay{position:absolute;inset:0;background:#0000008c;z-index:600;padding:24px}.tutorial-box{background:#0f1923f7;border:2px solid #6a8aaa;padding:28px 36px;max-width:560px;text-align:center;border-radius:8px}.tutorial-box h3{margin:0 0 14px;color:#d8e8f8;letter-spacing:.15em;font-size:1.3em}.tutorial-box p{color:#c8d8e8;line-height:1.55;font-size:1.05em;min-height:110px;margin:0 0 18px}.tutorial-buttons{display:flex;justify-content:center;gap:12px}.tutorial-buttons button{background:#2a4a6a;color:#fff;border:1px solid #6a8aaa;padding:12px 24px;font-family:inherit;font-size:1em;cursor:pointer;letter-spacing:.1em;min-height:50px;min-width:130px;border-radius:4px}#tut-skip{background:#3a3a4a}#tut-next:active,.tutorial-buttons button:active{background:#4a6a8a}.tut-progress{margin-top:16px;font-size:.8em;color:#8aa0b8}#fact-modal{position:absolute;inset:0;background:#000000bf;z-index:700;padding:24px}.fact-box{background:linear-gradient(180deg,#2a1a1a,#1a1a2a);border:2px solid #aa4040;padding:28px 36px;max-width:560px;text-align:center;border-radius:6px;box-shadow:0 0 40px #aa404080}.fact-header{font-size:.9em;color:#ff8080;letter-spacing:.25em;margin-bottom:12px}.fact-box h2{color:#fff;margin:0 0 4px;font-size:1.7em;letter-spacing:.1em}#fact-rank{color:#acf;font-size:.9em;letter-spacing:.15em;margin-bottom:16px}.fact-box p{color:#d8d8e8;line-height:1.55;font-size:.95em;text-align:left;margin:0 0 18px}#fact-continue{background:#6a2a2a;color:#fff;border:1px solid #aa4040;padding:12px 32px;font-family:inherit;font-size:1em;cursor:pointer;letter-spacing:.15em;min-height:50px;border-radius:4px}#fact-continue:active{background:#8a3a3a}#dice-modal{position:absolute;inset:0;background:#0000008c;z-index:500}.dice-box{background:#0f1923f7;border:2px solid #6a8aaa;padding:28px 40px;text-align:center;min-width:380px;border-radius:8px}.dice-box h3{margin:0 0 14px;color:#d8e8f8;letter-spacing:.15em;font-size:1.2em}.dice-container{display:flex;gap:14px;justify-content:center;margin:20px 0;min-height:80px;align-items:center;flex-wrap:wrap}.die{width:64px;height:64px;background:#f0f0f0;color:#222;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2em;font-weight:700;box-shadow:0 4px 10px #0009}.die.rolling{animation:roll .5s ease-out}.die.hit{background:#80ff80}.die.miss{background:#ff8080}@keyframes roll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2)}to{transform:rotate(360deg) scale(1)}}.dice-outcome{margin-top:14px;color:#d8e8f8;font-size:1em;min-height:26px;line-height:1.4}.dice-outcome.success{color:#80ff80}.dice-outcome.failure{color:#ff8080}.dice-close{margin-top:16px;background:#2a4a6a;color:#fff;border:1px solid #6a8aaa;padding:12px 28px;font-family:inherit;cursor:pointer;letter-spacing:.1em;min-height:50px;border-radius:4px}.dice-close:active{background:#4a6a8a}#end-screen{position:absolute;inset:0;background:#000000eb;z-index:900;flex-direction:column;padding:32px;overflow-y:auto}#end-screen h1{font-size:3.4em;margin:0 0 16px;letter-spacing:.15em}#end-screen h1.victory{color:#80ff80;text-shadow:0 0 30px rgba(128,255,128,.5)}#end-screen h1.defeat{color:#ff8080;text-shadow:0 0 30px rgba(255,128,128,.5)}#end-stats{background:#141e28d9;border:1px solid #6a8aaa;padding:20px 40px;margin:12px 0;min-width:400px;text-align:left;border-radius:6px}#end-stats .row{display:flex;justify-content:space-between;margin:6px 0;font-size:1.05em}#end-stats .row .val{color:#fff;font-weight:700}.end-real-history{max-width:720px;background:#1e283cb3;border-left:4px solid #6a8aaa;padding:16px 24px;margin:12px 0 20px;border-radius:4px}.end-real-history p{margin:8px 0;line-height:1.55;color:#d4d4d4;font-size:.95em}.end-real-history strong{color:#fff}#restart-btn{background:#2a4a6a;color:#fff;border:2px solid #6a8aaa;padding:14px 36px;font-family:inherit;font-size:1.1em;cursor:pointer;letter-spacing:.15em;min-height:60px;border-radius:4px}#restart-btn:active{background:#3a5a7a}#leaderboard-screen{position:absolute;inset:0;background:#00050ff7;z-index:940;display:none;align-items:center;justify-content:center;padding:20px}#leaderboard-screen.active{display:flex}.lb-wrap{display:flex;flex-direction:column;width:100%;max-width:900px;max-height:96vh;gap:12px}.lb-header{text-align:center}.lb-title{font-size:1.8em;font-weight:900;color:#fc4;letter-spacing:.2em;text-shadow:0 0 24px rgba(255,200,60,.4)}.lb-subtitle{font-size:.85em;color:#8aa0b8;letter-spacing:.15em;margin-top:4px}.lb-stats-bar{display:flex;justify-content:center;gap:32px;background:#14283cb3;border:1px solid #4a6a8a;border-radius:6px;padding:10px 20px;flex-wrap:wrap}.lb-stat{text-align:center}.lb-stat-val{font-size:1.4em;font-weight:700;color:#fff}.lb-stat-lbl{font-size:.65em;color:#8aa0b8;letter-spacing:.12em}.lb-filters{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.lb-filter-btn{background:#14283cb3;border:1px solid #4a6a8a;color:#c8d8e8;font-family:inherit;font-size:.8em;letter-spacing:.08em;padding:7px 14px;cursor:pointer;border-radius:20px;min-height:36px}.lb-filter-btn.active{background:#3a5a7a;border-color:#fc4;color:#fc4}.lb-filter-btn:active{background:#4a6a8a}.lb-table-wrap{overflow-y:auto;flex:1;border:1px solid #4a6a8a;border-radius:6px;background:#0a141ed9}.lb-table{width:100%;border-collapse:collapse;font-size:1em}.lb-table thead tr{background:#1e3c5ae6;position:sticky;top:0;z-index:1}.lb-table th{padding:10px 12px;text-align:left;font-size:.7em;color:#8aa0b8;letter-spacing:.12em;border-bottom:1px solid #4a6a8a}.lb-table td{padding:10px 12px;border-bottom:1px solid rgba(74,106,138,.25);color:#c8d8e8}.lb-table tr:last-child td{border-bottom:none}.lb-table tbody tr:hover{background:#2846644d}.lb-victory td{color:#c8d8e8}.lb-defeat td{color:#a8a8b8}.lb-victory .lb-rank{color:#80ff80}.lb-defeat .lb-rank{color:#a0a0b0}.lb-rank{font-size:1.2em;width:54px}.lb-name{font-weight:700}.lb-score{color:#fc4!important;font-weight:700}.lb-date{font-size:.85em;color:#607080!important}.lb-troop{display:block;font-size:.7em;color:#6a9aba;font-weight:400;letter-spacing:.05em}.lb-empty,.lb-loading{text-align:center;padding:32px;color:#607080;font-style:italic}.lb-footer{display:flex;align-items:center;justify-content:center;gap:20px}.lb-close-btn{background:#2a4a6a;color:#fff;border:2px solid #6a8aaa;font-family:inherit;font-size:1em;letter-spacing:.15em;padding:12px 32px;cursor:pointer;border-radius:4px;min-height:50px}.lb-close-btn:active{background:#3a5a7a}.lb-countdown{font-size:.9em;color:#607080;letter-spacing:.1em;min-width:40px}.lb-title-btn{display:block;margin:10px auto 0;background:transparent;color:#8aa0b8;border:1px solid #4a6a8a;font-family:inherit;font-size:.9em;letter-spacing:.15em;padding:10px 28px;cursor:pointer;min-height:44px;border-radius:4px}.lb-title-btn:hover{color:#c8d8e8;border-color:#6a8aaa}.lb-title-btn:active{background:#28466466}#mission-log{position:absolute;inset:0;background:#00050ff5;z-index:950;display:none;align-items:center;justify-content:center;padding:24px}#mission-log.active{display:flex}.ml-box{background:linear-gradient(180deg,#0d1f2d,#0a1520);border:2px solid #3a7a5a;border-radius:10px;padding:32px 40px;max-width:560px;width:100%;box-shadow:0 0 60px #00a06433}.ml-header{font-size:1.5em;font-weight:900;color:#6aefaa;letter-spacing:.2em;text-align:center;margin-bottom:12px;text-shadow:0 0 20px rgba(100,220,160,.4)}.ml-intro{text-align:center;color:#b0c8b8;font-size:1em;margin:0 0 24px;line-height:1.5}.ml-intro strong{color:#fff}.ml-field{margin-bottom:16px}.ml-field>label{display:block;font-size:.75em;color:#8aa0b8;letter-spacing:.15em;margin-bottom:5px}.ml-field input[type=text],.ml-field input[type=email]{width:100%;background:#14283ccc;border:1px solid #4a6a8a;color:#fff;font-family:inherit;font-size:1em;padding:12px 14px;border-radius:4px;outline:none;min-height:50px;touch-action:manipulation}.ml-field input[type=text]:focus,.ml-field input[type=email]:focus{border-color:#6aefaa;box-shadow:0 0 8px #64dca04d}.ml-check-row{display:flex;align-items:flex-start;gap:12px}.ml-check-row input[type=checkbox]{width:28px;height:28px;flex-shrink:0;margin-top:2px;cursor:pointer;accent-color:#6aefaa}.ml-check-row>label{font-size:.9em;color:#c8d8e8;letter-spacing:0;line-height:1.4;margin:0;cursor:pointer}.ml-fine{font-size:.8em;color:#607080}.ml-fine a{color:#6aefaa;text-decoration:underline}.ml-opt{color:#607080;font-size:.85em;text-transform:none;letter-spacing:0}.ml-status{min-height:24px;font-size:.9em;margin-bottom:12px;text-align:center;color:#b0c8b8;line-height:1.4}.ml-status.error{color:#ff8080}.ml-status.success{color:#80ff80;font-size:1em}.ml-status.warn{color:#fc4}.ml-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.ml-btn{font-family:inherit;font-size:1em;letter-spacing:.1em;cursor:pointer;padding:14px 28px;min-height:54px;border-radius:4px}.ml-btn.primary{background:#2a6a4a;color:#fff;border:2px solid #5aaa7a;flex:1;min-width:200px}.ml-btn.primary:hover{background:#3a8a5a}.ml-btn.primary:active{background:#4a9a6a}.ml-btn.primary:disabled{opacity:.4;cursor:not-allowed}.ml-btn.secondary{background:transparent;color:#8aa0b8;border:1px solid #4a6a8a}.ml-btn.secondary:hover{color:#c8d8e8;border-color:#6a8aaa}.ml-btn.secondary:active{background:#28466466}@media (max-width: 1400px){.action-btn{min-width:78px;min-height:78px}.action-icon{font-size:1.4em}}@media (max-height: 800px){#title-screen h1{font-size:3em}.title-inner{max-width:750px}#title-screen .historical{font-size:.9em}}