/* style.css — all styling */
:root{
  color-scheme:dark;
  --bg:#07111d;--panel:#0f1e2e;--panel2:#14283a;--line:#29475a;--text:#e5f1ef;
  --muted:#91a9ad;--mint:#86e0b7;--mint2:#49bc9d;--amber:#f2bc69;--danger:#ff907c;
  --shadow:0 20px 55px rgba(0,0,0,.3)
}
@media(prefers-color-scheme:light){
  :root:not([data-theme]){color-scheme:light;--bg:#e9f0ed;--panel:#fff;--panel2:#eef5f2;--line:#cadbd6;--text:#17303a;--muted:#60777b;--shadow:0 16px 35px rgba(34,74,72,.12)}
}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light;--bg:#e9f0ed;--panel:#fff;--panel2:#eef5f2;--line:#cadbd6;--text:#17303a;--muted:#60777b;--shadow:0 16px 35px rgba(34,74,72,.12)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;min-height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.app-shell{min-height:100dvh;display:flex;flex-direction:column;padding:clamp(16px,3vw,34px) clamp(14px,4vw,58px) calc(56px + env(safe-area-inset-bottom));max-width:1600px;margin:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:clamp(22px,4vw,40px)}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand-mark{width:38px;height:38px;border:2px solid var(--mint);border-radius:11px;display:flex;align-items:center;justify-content:center;gap:3px;transform:rotate(-8deg);box-shadow:0 0 22px rgba(134,224,183,.18)}
.brand-mark span{display:block;width:4px;border-radius:4px;background:var(--mint)}
.brand-mark span:nth-child(1){height:12px}.brand-mark span:nth-child(2){height:21px}.brand-mark span:nth-child(3){height:16px}
.eyebrow,.section-label{font-size:10px;letter-spacing:.16em;font-weight:800;color:var(--mint);margin:0 0 4px}
h1{font-size:clamp(20px,3vw,27px);letter-spacing:-.04em;margin:0;white-space:nowrap}
h1 strong{font-weight:800;color:var(--mint)}
.header-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.icon-button,.reset-button{min-height:44px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:9px 13px;font-size:12px;font-weight:700;transition:.2s}
.icon-button:hover,.reset-button:hover{border-color:var(--mint);transform:translateY(-1px)}
.sound-state{color:var(--mint);font-size:10px;margin-left:5px}
.dashboard{display:flex;flex-direction:column;gap:18px;flex:1;min-height:0}
.mission-panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,29px);display:flex;justify-content:space-between;gap:28px;box-shadow:var(--shadow)}
.mission-copy{min-width:0}.status-line{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--mint);display:flex;align-items:center;gap:8px}
.live-dot{width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 5px rgba(134,224,183,.11);animation:pulse 2s infinite}
h2{font-size:clamp(22px,4vw,36px);letter-spacing:-.055em;margin:10px 0 7px;line-height:1.05}
p{color:var(--muted);margin:0;line-height:1.5;font-size:13px;max-width:530px}
.mission-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.mission-badge{display:flex;flex-direction:column;gap:3px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;min-width:116px}
.mission-badge b{font-size:10px;color:var(--mint);letter-spacing:.06em}.mission-badge small{font-size:10px;color:var(--muted)}
.combo-badge b{color:var(--amber)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(65px,1fr));gap:12px;min-width:min(48%,400px)}
.stat{border-left:1px solid var(--line);padding-left:13px}.stat span,.stat small{display:block;color:var(--muted);font-size:9px;letter-spacing:.1em;font-weight:800}
.stat b{display:block;font-size:22px;letter-spacing:-.05em;margin:7px 0 2px}.stat small{font-size:9px;letter-spacing:0;font-weight:500}
.play-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,350px);gap:18px;min-height:0;flex:1}
.stage-card,.control-panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);min-width:0}
.stage-card{display:flex;flex-direction:column;min-height:390px}
.stage-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 19px;gap:12px}
.stage-tip{font-size:11px;color:var(--muted);margin-left:12px}.toolbar-right{display:flex;align-items:center;gap:12px}
.mode-pill{font-size:10px;color:var(--amber);border:1px solid rgba(242,188,105,.35);padding:7px 9px;border-radius:20px;white-space:nowrap}
.wave-progress{display:block;width:78px;height:5px;background:var(--panel2);border-radius:8px;overflow:hidden}.wave-progress i{display:block;height:100%;width:20%;background:var(--mint);border-radius:8px;transition:width .2s}
.canvas-wrap{position:relative;flex:1;min-height:280px;margin:0 10px;background:#0d1a28;border-radius:11px;overflow:hidden;touch-action:none}
.canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none}
.stage-footer{display:flex;flex-wrap:wrap;gap:13px 18px;padding:13px 19px;color:var(--muted);font-size:10px}
.legend-dot{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px}.enemy{background:#d58c4b}.tower{background:var(--mint)}.impact{background:var(--amber)}.keyboard-help{margin-left:auto}
.control-panel{padding:19px;display:flex;flex-direction:column;gap:14px}
.panel-heading{display:flex;justify-content:space-between;align-items:start}.panel-heading h3{font-size:18px;margin:4px 0 0;letter-spacing:-.03em}
.credit-badge{background:rgba(134,224,183,.12);border:1px solid rgba(134,224,183,.3);color:var(--mint);font-weight:800;border-radius:20px;padding:8px 11px;font-size:13px}
.tool-list{display:grid;gap:8px}.tool-card{min-height:57px;text-align:left;display:flex;align-items:center;gap:11px;background:var(--panel2);border:1px solid transparent;border-radius:11px;padding:8px 10px;transition:.18s}
.tool-card:hover,.tool-card.selected{border-color:var(--mint);background:rgba(134,224,183,.1)}.tool-card.selected{box-shadow:inset 3px 0 var(--mint)}
.tool-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.tool-info b{font-size:12px}.tool-info small{color:var(--muted);font-size:10px}.tool-cost{font-size:10px;color:var(--amber);font-weight:800}
.tool-icon{width:28px;height:28px;flex:none;border:1px solid var(--line);border-radius:8px;position:relative}
.cannon-icon:after{content:"";position:absolute;width:16px;height:5px;background:var(--mint);left:8px;top:11px;transform:rotate(-25deg);border-radius:3px}
.pulse-icon:after{content:"";position:absolute;inset:6px;border:2px solid var(--mint);border-radius:50%;box-shadow:0 0 0 3px rgba(134,224,183,.25)}
.barrier-icon:after{content:"";position:absolute;width:17px;height:5px;background:var(--amber);left:5px;top:11px;transform:rotate(-35deg)}
.strike-icon:after{content:"";position:absolute;width:4px;height:19px;background:var(--danger);left:12px;top:4px;transform:rotate(28deg)}
.tower-mode{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:9px}
.tower-mode-copy{display:flex;align-items:center;gap:8px}.tower-mode-copy b,.tower-mode-copy small{display:block;font-size:11px}.tower-mode-copy small{color:var(--muted);font-size:10px;margin-top:2px}
.mode-signal{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(242,188,105,.1)}
.mode-toggle{min-height:40px;border:1px solid var(--mint);background:transparent;border-radius:8px;color:var(--mint);font-size:11px;font-weight:800;padding:7px 10px}
.mode-toggle[aria-pressed="true"]{background:var(--mint);color:#10222b}
.fire-button{min-height:60px;border:0;border-radius:11px;background:var(--mint);color:#10222b;display:flex;align-items:center;gap:11px;text-align:left;padding:10px 14px;box-shadow:0 7px 0 #318c78;transition:.15s}
.fire-button:hover{filter:brightness(1.08)}.fire-button:active{transform:translateY(4px);box-shadow:0 3px 0 #318c78}
.fire-button b,.fire-button small{display:block}.fire-button b{font-size:13px}.fire-button small{font-size:10px;opacity:.72;margin-top:2px}.fire-key{margin-left:auto;border:1px solid rgba(16,34,43,.3);border-radius:5px;padding:4px 6px;font-size:9px;font-weight:800}
.fire-crosshair{width:21px;height:21px;border:2px solid #10222b;border-radius:50%;position:relative}.fire-crosshair:before,.fire-crosshair:after{content:"";position:absolute;background:#10222b}
.fire-crosshair:before{width:29px;height:2px;left:-6px;top:8px}.fire-crosshair:after{height:29px;width:2px;left:8px;top:-6px}
.challenge-card,.briefing{background:var(--panel2);border-radius:10px;padding:11px 13px}.challenge-top{display:flex;justify-content:space-between;align-items:center}.challenge-top b{color:var(--amber);font-size:15px}
.briefing-tag{font-size:9px;letter-spacing:.12em;color:var(--amber);font-weight:800}.challenge-card p,.briefing p{font-size:11px;margin-top:5px}
.bonus-meter{height:5px;background:rgba(0,0,0,.2);border-radius:6px;margin-top:10px;overflow:hidden}.bonus-meter i{display:block;height:100%;width:0;background:var(--amber);border-radius:6px;transition:width .2s}
.briefing p.flash{animation:flash .5s}.safe-footer{padding-top:15px;color:var(--muted);font-size:9px;letter-spacing:.14em;display:flex;justify-content:space-between}
@keyframes pulse{50%{opacity:.45}}@keyframes flash{50%{color:var(--mint);transform:translateX(3px)}}
@media(max-width:850px){
  .mission-panel{flex-direction:column;gap:20px}.stats{min-width:0}.play-layout{grid-template-columns:1fr}.control-panel{gap:12px}
  .tool-list{grid-template-columns:repeat(2,minmax(0,1fr))}.keyboard-help{display:none}
}
@media(max-width:480px){
  .app-shell{padding-top:14px}.topbar{margin-bottom:18px}.header-actions{gap:5px}.reset-button,.icon-button{padding:8px;font-size:10px}
  h1{font-size:20px}.mission-panel{padding:17px}.stats{gap:8px}.stat{padding-left:8px}.stat b{font-size:18px}.stat small{display:none}
  .mission-badges{margin-top:14px}.mission-badge{min-width:0;flex:1;padding:7px 8px}.mission-badge b{font-size:9px}.mission-badge small{font-size:9px}
  .stage-card{min-height:350px}.stage-toolbar{padding:13px}.stage-tip{display:block;margin:4px 0 0;font-size:10px}.canvas-wrap{min-height:225px}.stage-footer{padding:10px 13px}
  .control-panel{padding:14px}.tool-card{min-height:54px;padding:7px}.tool-info b{font-size:11px}.tool-info small{font-size:9px}.wave-progress{display:none}
}
@media(max-width:350px){
  .tool-list{grid-template-columns:1fr}.stats{grid-template-columns:repeat(4,1fr)}.stat span{font-size:8px}.stat b{font-size:16px}.canvas-wrap{min-height:205px}
  .mission-badge:nth-child(3){display:none}
}