:root{color-scheme:dark;--ink:#e9efe7;--muted:#9db6bd;--coral:#ee9a85;--navy:#102f3e;--line:#42626d}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:radial-gradient(ellipse at 15% 0,#224e5e 0,transparent 60%),#0b2735;color:var(--ink);font-family:'Segoe UI','Microsoft YaHei',sans-serif;padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));min-height:100dvh}button{font:inherit;border:1px solid var(--line);border-radius:10px;background:#1b3e4d;color:var(--ink);cursor:pointer;min-height:44px;padding:8px 13px;touch-action:manipulation}button:hover{background:#2c5260}button:focus-visible{outline:3px solid #f7c590;outline-offset:2px}button:disabled{opacity:.42;cursor:default}header{max-width:1300px;margin:0 auto 23px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand>svg{width:40px;height:40px;color:var(--coral)}h1{font-size:25px;letter-spacing:3px;margin:0 0 4px}.brand span{font-size:10px;letter-spacing:2px;color:var(--muted)}nav{display:flex;gap:8px}nav button{font-size:12px;background:transparent}main{max-width:1300px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 324px;gap:30px}.ocean-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.eyebrow{font-size:10px;letter-spacing:2px;color:#a8c4c5}h2{font-size:24px;margin:5px 0 0}.ocean-title>span{font-size:12px;color:#bfd3cf}.hud{display:flex;gap:12px;margin-bottom:13px}.hud>div{flex:1;background:#244754;border:1px solid #496572;border-radius:12px;padding:10px 15px;display:flex;justify-content:space-between;align-items:center}.hud span{color:#bcd1cf;font-size:11px}.hud b{font-size:24px;color:#f2c99a}.hud small{font-size:12px;font-weight:400;color:#a7c4c5}.water{height:min(62vh,590px);min-height:330px;position:relative;background:#327e89;border-radius:20px;overflow:hidden;border:1px solid #759c9b;box-shadow:0 20px 50px #00172255}canvas{width:100%;height:100%;display:block;touch-action:none}.state-pill{pointer-events:none;position:absolute;left:50%;top:12px;transform:translateX(-50%);background:#123e4be8;border:1px solid #86ada670;border-radius:20px;padding:6px 13px;white-space:nowrap;font-size:11px;color:#d2e3d7}.underwater{display:flex;justify-content:space-between;color:#a5c3c4;font-size:11px;margin-top:12px}aside{padding-top:1px}.deck-title{display:flex;justify-content:space-between;align-items:center}.deck-title h2{font-size:23px}.deck-count{font-family:Georgia,serif;font-size:40px;font-style:italic;color:#9bbab44d}#tip{min-height:38px;line-height:1.6;font-size:12px;color:#bdd1ce;margin:12px 0}.deck{display:grid;gap:9px}.card{display:flex;align-items:center;text-align:left;gap:12px;padding:8px 12px;border-radius:13px;background:#244753;position:relative}.card svg{width:50px;height:50px;flex-shrink:0}.card span{flex:1}.card strong{font-size:15px;display:block;color:#f0e8d5}.card small{display:block;font-size:11px;color:#a5c6c7;margin-top:4px}.card>b{font-size:17px;color:#efd0a2}.card.selected{border-color:#f6b69a;background:#40565a;box-shadow:inset 3px 0 var(--coral)}.card.unaffordable>b{color:#f2a7a0}.unit-tools{display:flex;gap:6px;margin:12px 0}.unit-tools button{font-size:11px;flex:1;padding:6px}.surge{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:#245a67;border-color:#548f9a;margin-bottom:14px;min-height:49px}.surge span{font-size:13px;color:#b6e5e5}.surge small{font-size:10px;color:#a1c9cf}.surge.selected{outline:2px solid #aedbe2}.controls{display:flex;gap:6px}.primary{background:var(--coral);color:#163747;border-color:var(--coral);font-weight:700}.primary:hover{background:#f6b49c}.controls .primary{flex:1}footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12px;color:#a8c2c2}footer button{font-size:11px;background:transparent;border:0}.save-note{font-size:10px;letter-spacing:1px;text-align:center;color:#8aa9b0;margin:4px 0}dialog{width:min(470px,calc(100vw - 28px));max-height:90dvh;overflow:auto;background:#173c4b;color:var(--ink);border:1px solid #63828b;border-radius:22px;padding:28px;box-shadow:0 30px 120px #0006}dialog::backdrop{background:#071c29bc;backdrop-filter:blur(5px)}.modal-tag{font-size:10px;letter-spacing:3px;color:#f3b39a}dialog h2{margin:10px 0 16px}#modalBody{font-size:14px;line-height:1.9;color:#c4d8d5;white-space:pre-line}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.mission-option{display:flex;justify-content:space-between;align-items:center;width:100%;margin:10px 0;text-align:left}.mission-option small{font-size:11px;color:#9ebcc0}.result-number{font-size:40px;color:#f5c295;display:block;line-height:1.4}
@media(max-width:720px) and (orientation:portrait){body{padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))}header{margin-bottom:16px}.brand>svg{width:29px;height:36px}.brand{gap:7px}h1{font-size:20px;letter-spacing:2px}.brand span{font-size:8px;letter-spacing:1px}nav{gap:4px}nav button{font-size:11px;padding:6px 9px}#sound{font-size:0;padding:6px;width:40px}#sound:after{content:'♫';font-size:19px}#sound.active{color:#f7bc97}main{display:flex;flex-direction:column;gap:12px}.ocean-title{margin-bottom:8px}.ocean-title h2{font-size:20px}.eyebrow{font-size:9px}.hud{gap:7px;margin-bottom:9px}.hud>div{padding:7px 9px;display:block}.hud span{display:block;font-size:10px}.hud b{font-size:22px}.water{height:clamp(355px,53dvh,530px);min-height:355px;border-radius:16px}.underwater{font-size:9px;margin-top:8px}.deck-title{display:none}#tip{min-height:0;margin:0 0 8px;font-size:11px}.deck{grid-template-columns:repeat(4,1fr);gap:6px}.card{flex-direction:column;gap:2px;padding:7px 3px;text-align:center}.card svg{width:37px;height:37px}.card strong{font-size:12px}.card small{display:none}.card>b{font-size:12px}.unit-tools{margin:7px 0}.unit-tools button{min-height:40px}.surge{min-height:42px;margin-bottom:8px}.controls button{font-size:13px}footer{margin-top:5px}.save-note{margin:0}}
@media(max-width:720px) and (orientation:portrait){header{margin-bottom:8px}.ocean-title .eyebrow{display:none}.ocean-title h2{margin:0;font-size:18px}.hud>div{display:flex;align-items:center;gap:3px;padding:7px}.hud b{font-size:20px}.hud span{font-size:9px}.water{height:clamp(290px,40dvh,420px);min-height:290px}.card svg{width:32px;height:32px}.card{padding:5px 3px}footer button{min-height:34px}.brand span{letter-spacing:.3px}.save-note{font-size:9px}}
@media(orientation:landscape) and (max-height:600px){body{padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}header{margin-bottom:6px}.brand>svg{width:26px;height:26px}.brand span,.ocean-title,.deck-title,.save-note{display:none}h1{font-size:20px;margin:0}nav button{min-height:34px;padding:4px 12px}main{grid-template-columns:minmax(0,1fr) 265px;gap:14px}.hud{gap:6px;margin-bottom:6px}.hud>div{padding:4px 8px}.hud span{font-size:9px}.hud b{font-size:18px}.water{height:calc(100dvh - 110px);min-height:190px;border-radius:14px}.underwater{margin-top:5px;font-size:9px}#tip{margin:0 0 5px;min-height:28px;font-size:10px;line-height:1.4}.deck{grid-template-columns:1fr 1fr;gap:5px}.card{padding:5px;gap:4px;border-radius:9px}.card svg{width:28px;height:28px}.card strong{font-size:11px}.card small{display:none}.card>b{font-size:11px}.unit-tools{margin:6px 0}.unit-tools button{min-height:34px;font-size:10px;padding:4px}.surge{min-height:38px;margin-bottom:6px;padding:6px}.surge span{font-size:11px}.surge small{font-size:9px}.controls button{min-height:40px;font-size:11px;padding:5px}footer{margin-top:3px;font-size:10px}footer button{min-height:30px;padding:4px}.state-pill{top:6px;font-size:9px;padding:4px 10px}}

/* Content navigation only; retained approved visual language. */
.content-nav{display:flex;gap:5px}.content-nav button{font-size:12px;padding:6px 10px}.level-grid{display:grid;gap:7px;margin:12px 0;max-height:50dvh;overflow:auto}.level-grid button{text-align:left;font-size:12px}dialog{max-height:90dvh;overflow:auto}.content-extra{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.content-extra button{font-size:12px}.rule-note{font-size:11px;line-height:1.5;color:#b8d0c5;margin:5px 0}.content-results{font-size:12px;line-height:1.7}