/* Mobile-first game HUD. Keep the campus visible; weapon selection lives in the side bag. */
:root {
  --ink:#18263f; --muted:#59677d; --paper:#f5f7fb; --surface:#ffffff;
  --blue:#2859d9; --blue-soft:#eaf0ff; --lime:#d4ee8c; --coral:#f36d57;
  --line:#dbe2ed; --shadow:0 4px 20px #172c4d12;
  --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  color:var(--ink); font-synthesis:none; color-scheme:light;
}
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
body { background:var(--paper); font-size:14px; }
button,select { font:inherit; color:inherit; }
button,a,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:0; touch-action:manipulation; }
button:disabled { cursor:default; opacity:.5; }
button:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
button:active:not(:disabled) { transform:translateY(1px); }
[hidden] { display:none!important; }
svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; width:24px; height:24px; flex:none; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.game-shell { position:relative; height:100vh; height:100dvh; isolation:isolate; }
.game-shell > :not(canvas) { z-index:1; }
#game { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; z-index:0; cursor:crosshair; }
#game.grabbing { cursor:grabbing; }
/* The playing field has one persistent action: open the weapon bag. */
.topbar { position:absolute; top:calc(12px + var(--safe-top)); left:calc(20px + var(--safe-left)); right:calc(20px + var(--safe-right)); display:flex; align-items:center; justify-content:flex-start; gap:16px; pointer-events:none; }
.campus-progress { width:168px; flex:none; padding:8px 10px; border-radius:12px; background:#fffffff2; }
.progress-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; line-height:18px; color:var(--muted); }
.progress-heading strong { font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.damage-track { margin-top:5px; height:4px; border-radius:4px; overflow:hidden; background:#e7edf5; }
#damage-fill { height:100%; background:var(--blue); border-radius:inherit; transition:width .2s; }
.target-card { position:absolute; top:calc(62px + var(--safe-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; max-width:calc(100% - 40px); min-height:26px; padding:4px 10px; border-radius:8px; background:#ffffffeb; font-size:12px; font-weight:650; line-height:18px; pointer-events:none; opacity:0; transition:opacity .18s; }
.target-card.visible { opacity:1; }
.game-shell:has(#finale-status:not([hidden])) .target-card { opacity:0; }
#building-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#target-damage { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bag-handle { position:absolute; right:var(--safe-right); top:43%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:64px; min-height:80px; padding:9px 6px; border:1px solid #214ac0; border-right:0; border-radius:16px 0 0 16px; background:var(--blue); color:#fff; box-shadow:0 4px 12px #173d8024; font-size:12px; font-weight:750; }
.bag-handle span { font-size:11px; white-space:nowrap; letter-spacing:-.03em; }
.bag-handle svg { width:32px; height:32px; color:var(--ink); }
.bag-handle:hover { background:#204ac0; }
.current-weapon { position:absolute; left:calc(20px + var(--safe-left)); bottom:calc(24px + var(--safe-bottom)); display:grid; grid-template-columns:minmax(0,1fr); gap:5px 8px; align-items:center; max-width:calc(100vw - 40px - var(--safe-left) - var(--safe-right)); padding:6px 8px; border-radius:8px; background:#ffffffe6; pointer-events:none; }
.current-weapon strong { font-size:14px; line-height:18px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.current-weapon small { grid-column:1/-1; font-size:12px; line-height:17px; color:var(--muted); }
.current-weapon small:empty,.current-weapon:has(.rhythm-meter:not([hidden])) small { display:none; }
.rhythm-meter { grid-column:1/-1; display:grid; grid-template-columns:auto 1fr 38px; gap:6px; align-items:center; font-size:12px; line-height:16px; font-weight:600; }
.rhythm-pips { display:flex; gap:3px; }
.rhythm-pips i { display:grid; place-items:center; width:14px; height:14px; font-style:normal; font-size:10px; border-radius:4px; background:#dce3ee; color:var(--ink); }
.rhythm-meter[data-charge="1"] .rhythm-pips i:first-child,.rhythm-meter[data-charge="2"] .rhythm-pips i:nth-child(-n+2),.rhythm-meter[data-charge="3"] .rhythm-pips i { background:var(--lime); }
.rhythm-meter[data-ready="true"] { color:#a23524; }
.rhythm-meter[data-ready="true"] .rhythm-pips i:last-child { background:#ffb09f; }
.rhythm-clock { height:3px; overflow:hidden; border-radius:3px; background:#dce3ee; }
.rhythm-clock > span { display:block; height:100%; width:0; background:var(--coral); }
.gesture-hint { white-space:pre-line; position:absolute; left:50%; top:62%; transform:translate(-50%,-50%); max-width:calc(100vw - 100px); width:max-content; margin:0; padding:9px 12px; border-radius:10px; background:#18263fe6; color:#fff; font-size:13px; line-height:1.6; text-align:center; pointer-events:none; }
.map-credit { position:absolute; right:calc(12px + var(--safe-right)); bottom:calc(3px + var(--safe-bottom)); padding:0 3px; border-radius:3px; color:#46556d; background:#ffffffde; font-size:11px; line-height:16px; text-underline-offset:2px; }
/* Momentary feedback carries the playful tone. */
#toast { position:absolute; left:50%; top:calc(104px + var(--safe-top)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); margin:0; padding:11px 16px; border:1px solid #ffffff33; border-radius:14px; background:var(--ink); color:#fff; font-size:14px; font-weight:650; line-height:1.45; text-align:center; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .18s; z-index:20; }
#toast.show { opacity:1; }
#impact-text { position:absolute; opacity:0; pointer-events:none; font-weight:900; z-index:3; }
#impact-text { font-size:clamp(28px,4vw,46px); color:#fff; letter-spacing:-1px; text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink); transform:rotate(-8deg); }
#impact-text[data-finisher="true"] { color:var(--lime); font-size:clamp(32px,4.5vw,52px); }
#impact-text.show { animation:impact-pop .65s ease-out forwards; }
@keyframes impact-pop { 0%{opacity:0;scale:.8;translate:0 6px} 18%{opacity:1;scale:1.1} 65%{opacity:1} 100%{opacity:0;scale:1;translate:0 -30px} }
/* Settings are reached from the bag, without another button over the campus. */
.game-dialog { width:440px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); margin:auto; padding:24px; border:1px solid var(--line); border-radius:20px; color:var(--ink); background:var(--surface); box-shadow:0 16px 70px #10244133; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#aebdd1 transparent; }
.game-dialog::backdrop { background:#14253e70; }
.game-dialog h2 { margin:0; font-size:24px; font-weight:800; line-height:1.3; letter-spacing:-.6px; }
.dialog-copy { margin:18px 0; color:var(--muted); font-size:14px; line-height:1.7; }
.primary-button { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:12px 16px; border:1px solid transparent; border-radius:12px; color:#fff; background:var(--blue); font-size:14px; font-weight:750; line-height:1.45; }
.primary-button:hover:not(:disabled) { background:#204ac0; }
.secondary-button { width:100%; min-height:44px; padding:10px; border-radius:10px; background:none; font-size:14px; color:var(--muted); font-weight:600; }
.secondary-button:hover,.text-button:hover { background:var(--blue-soft); }
.icon-button,.close-button { position:relative; display:grid; place-items:center; width:44px; height:44px; flex:none; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.icon-button:hover,.close-button:hover { background:var(--blue-soft); }
.icon-button svg { width:22px; height:22px; }
.close-button { font-size:28px; font-weight:400; line-height:1; border-color:transparent; }
.text-button { min-width:52px; min-height:44px; padding:8px 10px; border-radius:10px; background:transparent; font-size:14px; font-weight:650; }
.muted-slash { position:absolute; width:23px; height:2px; border-radius:2px; background:var(--ink); transform:rotate(-45deg); box-shadow:0 -2px 0 var(--surface); }
.sound-button[aria-pressed=true] .muted-slash { display:none; }
.settings-actions { display:flex; gap:16px; margin-top:20px; }
.settings-actions > div { display:flex; align-items:center; gap:8px; flex:1; font-size:14px; }
.quality-control { display:block; font-size:14px; font-weight:700; margin:20px 0; }
.quality-control select { width:100%; min-height:44px; margin-top:8px; padding:9px; border:1px solid #b7c4d8; border-radius:10px; background:var(--surface); }
.quality-control small { display:block; margin-top:7px; font-size:12px; font-weight:400; line-height:1.5; color:var(--muted); }
.controls-details { margin:0 0 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.controls-details summary { min-height:44px; padding:12px 0; font-size:14px; cursor:pointer; touch-action:manipulation; }
.controls-details summary:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.help-rows p { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:9px 0; border-bottom:1px solid var(--line); font-size:12px; line-height:1.6; }
.help-rows span { color:var(--muted); }
.help-rows strong { font-weight:600; }
.map-source-note { font-size:12px; line-height:1.7; color:var(--muted); }
.map-source-note a { color:var(--blue); text-underline-offset:3px; }
.final-cleared-block { display:flex; flex-direction:column; gap:6px; margin:24px 0; }
.final-cleared-block span { font-size:14px; color:var(--muted); }
.final-cleared-block strong { font-size:42px; font-weight:800; font-variant-numeric:tabular-nums; }
/* Three tools, selected directly. The bag scrolls on short screens. */
.shop-dialog.weapon-bag { position:fixed; inset:0 0 0 auto; margin:0; display:none; width:400px; max-width:100vw; height:100vh; height:100dvh; max-height:100dvh; padding:calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) 16px; border:0; border-left:1px solid var(--line); border-radius:20px 0 0 20px; overflow:hidden; background:var(--paper); grid-template-rows:auto minmax(0,1fr); gap:20px; }
.shop-dialog.weapon-bag[open] { display:grid; animation:bag-slide-in .2s ease-out; }
@keyframes bag-slide-in { from{transform:translateX(100%)} to{transform:translateX(0)} }
.bag-header { display:flex; align-items:center; gap:8px; min-width:0; min-height:44px; }
.bag-header h2 { margin-right:auto; font-size:22px; }
.shop-items { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:12px; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#aebdd1 transparent; padding:4px; margin:-4px; scroll-padding:6px; }
.demo-weapon { display:grid; grid-template-columns:60px minmax(0,1fr); gap:5px 14px; align-content:center; width:100%; min-height:132px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-align:left; scroll-margin:6px; }
.demo-weapon-icon { grid-column:1; grid-row:1/4; display:grid; place-items:center; align-self:center; width:60px; height:72px; border-radius:12px; background:#f4f6fa; }
.demo-weapon-icon svg { width:52px; height:52px; }
.demo-weapon > strong { grid-column:2; font-size:17px; line-height:23px; font-weight:750; }
.demo-weapon-description { grid-column:2; font-size:13px; line-height:20px; color:var(--muted); word-break:keep-all; overflow-wrap:anywhere; }
.demo-weapon-state { grid-column:2; padding-top:3px; color:var(--muted); font-size:12px; line-height:18px; font-weight:650; }
.demo-weapon[aria-pressed=true] { background:var(--blue-soft); border-color:var(--blue); outline:1px solid var(--blue); outline-offset:0; }
.demo-weapon[aria-pressed=true] .demo-weapon-state { color:var(--blue); }
.demo-weapon[aria-pressed=true] .demo-weapon-icon { background:#ffffffb3; }
.demo-weapon:hover { border-color:var(--blue); }
.sound-label { display:flex; flex-direction:column; gap:2px; }
.sound-label small { font-size:12px; color:var(--muted); }
/* One brief light pulse; never repeated, never above a dialog. */
#nuclear-flash { position:absolute; inset:0; z-index:10; background:#fff7dc; opacity:0; pointer-events:none; }
#nuclear-flash.show { animation:nuclear-flash .22s ease-out both; }
@keyframes nuclear-flash { 0%{opacity:0} 15%{opacity:.76} 100%{opacity:0} }
.finale-status { position:absolute; top:calc(60px + var(--safe-top)); left:50%; transform:translateX(-50%); padding:8px 12px; border-radius:10px; color:#fff; background:#18263fe8; font-size:13px; font-weight:650; line-height:20px; text-align:center; pointer-events:none; }
/* Loading remains usable if asset preparation fails. */
.loading-overlay { position:absolute; inset:0; z-index:30!important; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; padding:24px; background:var(--paper); }
.loading-overlay strong { margin-top:12px; font-size:20px; text-align:center; }
.loading-overlay p { margin:0; font-size:14px; color:var(--muted); line-height:1.6; text-align:center; }
.loading-mark { display:flex; align-items:flex-end; gap:6px; height:42px; }
.loading-mark span { width:14px; height:25px; border-radius:5px 5px 2px 2px; background:var(--blue); animation:loading .8s ease-in-out infinite alternate; }
.loading-mark span:nth-child(2) { height:38px; background:var(--coral); animation-delay:.2s; }
.loading-mark span:nth-child(3) { height:29px; background:#9bc753; animation-delay:.4s; }
@keyframes loading { to{transform:translateY(-7px)} }
#loading-progress { width:min(280px,80vw); height:8px; accent-color:var(--blue); }
#loading-retry { max-width:280px; margin-top:12px; }
.loading-overlay[data-state=error] .loading-mark span { animation:none; }
/* Safe play area: top 96px / bottom 88px, plus device insets. */
@media(max-width:760px) {
  .topbar { left:calc(12px + var(--safe-left)); right:calc(12px + var(--safe-right)); }
  .campus-progress { width:154px; }
  .bag-handle { width:58px; min-height:76px; }
  .bag-handle svg { width:30px; height:30px; }
  .current-weapon { left:calc(12px + var(--safe-left)); max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right)); }
  .game-dialog { padding:20px; }
  .settings-actions { gap:10px; }
  .settings-actions > div { font-size:12px; gap:6px; }
  .shop-dialog.weapon-bag { max-width:calc(100vw - 8px); padding-left:calc(12px + var(--safe-left)); padding-right:calc(12px + var(--safe-right)); gap:16px; }
  .demo-weapon { padding:14px 12px; gap:5px 10px; }
}
/* Short landscape uses 64px above and 72px below the play area. */
@media(max-height:600px) and (min-width:600px) {
  .topbar { top:calc(6px + var(--safe-top)); left:calc(12px + var(--safe-left)); right:calc(12px + var(--safe-right)); }
  .target-card { top:calc(14px + var(--safe-top)); max-width:calc(100vw - 360px - var(--safe-left) - var(--safe-right)); }
  .bag-handle { top:40%; width:56px; min-height:70px; }
  .current-weapon { bottom:calc(20px + var(--safe-bottom)); padding:4px 8px; gap:3px 8px; }
  #toast { top:calc(72px + var(--safe-top)); }
  .finale-status { top:calc(14px + var(--safe-top)); }
  .shop-dialog.weapon-bag { width:720px; max-width:calc(100vw - 8px); padding:calc(8px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left)); gap:12px; }
  .shop-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .demo-weapon { grid-template-columns:minmax(0,1fr); grid-template-rows:56px auto 1fr auto; gap:8px; padding:14px 12px; align-content:start; }
  .demo-weapon-icon { grid-column:1; grid-row:1; width:56px; height:56px; }
  .demo-weapon-icon svg { width:48px; height:48px; }
  .demo-weapon > strong,.demo-weapon-description,.demo-weapon-state { grid-column:1; }
  .demo-weapon > strong { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; }
  .loading-mark span,.shop-dialog.weapon-bag[open] { animation:none; }
  #impact-text.show { animation:none; opacity:1; }
  #nuclear-flash.show { animation:none; opacity:0; }
}

/* The radar follows the paused gameplay clock; no independent CSS loop. */
.nuclear-countdown { --countdown-accent:#ffc17a; --countdown-angle:0deg; --countdown-progress:0; position:absolute; z-index:12; top:44%; left:50%; transform:translate(-50%,-50%); width:196px; height:196px; color:var(--countdown-accent); pointer-events:none; }
.nuclear-countdown[data-count="1"] { --countdown-accent:#ff866b; }
.nuclear-countdown .countdown-dial { display:block; width:100%; height:100%; stroke-width:1; stroke-linecap:butt; overflow:visible; }
.countdown-face { fill:#101b26; fill-opacity:.88; stroke:none; }
.countdown-ticks { stroke:currentColor; stroke-opacity:.65; stroke-width:1.2; }
.countdown-grid { stroke:currentColor; stroke-opacity:.14; stroke-width:.7; }
.countdown-sweep { transform-origin:100px 100px; transform:rotate(var(--countdown-angle)); }
.countdown-trail { fill:currentColor; fill-opacity:.16; stroke:none; }
.countdown-trail.faint { fill-opacity:.06; }
.countdown-hand { stroke:currentColor; stroke-opacity:.8; stroke-width:1.3; }
.countdown-tip { fill:#fff3dc; stroke:none; }
.countdown-track { stroke:currentColor; stroke-opacity:.12; stroke-width:2; }
.countdown-remaining { stroke:currentColor; stroke-width:2.4; stroke-dasharray:100; stroke-dashoffset:calc(100 * var(--countdown-progress)); transform:rotate(-90deg); transform-origin:100px 100px; }
.countdown-core { fill:#101b26; fill-opacity:.9; stroke:currentColor; stroke-opacity:.13; stroke-width:.7; }
.countdown-readout { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0; }
.countdown-label { font-size:11px; font-weight:600; letter-spacing:.13em; color:#e0c8af; }
#nuclear-countdown-value { color:#fff3dc; font-size:66px; line-height:1; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:0; padding:0; }
@media(max-width:760px) { .nuclear-countdown { width:174px; height:174px; } #nuclear-countdown-value { font-size:58px; } .countdown-label { font-size:10px; } }
@media(max-height:600px) { .nuclear-countdown { top:46%; width:148px; height:148px; } #nuclear-countdown-value { font-size:48px; } .countdown-label { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .countdown-sweep { transform:none; } }

.music-setting { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:12px 14px; margin:16px 0; border:1px solid var(--line); border-radius:12px; color:inherit; background:var(--paper); font:inherit; cursor:pointer; }
.music-setting span { font-size:13px; color:var(--muted); }

/* Aiming stays on the campus; dragging keeps the existing map controls. */
#game[data-tool="shotgun"]:not(.grabbing) { cursor:none; }
#shotgun-reticle { position:absolute; z-index:5; width:28px; height:28px; transform:translate(-50%,-50%); color:#fff; pointer-events:none; filter:drop-shadow(0 1px 2px #17202d); transition:width .12s,height .12s; }
#shotgun-reticle::before, #shotgun-reticle::after { content:""; position:absolute; inset:0; border:1.5px solid currentColor; border-radius:50%; opacity:.8; }
#shotgun-reticle::after { inset:12px; background:currentColor; border:0; }
#shotgun-reticle[data-fired="true"] { width:42px; height:42px; }
#shotgun-reticle[data-fired="true"]::after { inset:19px; }
#shotgun-reticle[data-hit="true"] { color:#ffc078; }
@media(prefers-reduced-motion:reduce) { #shotgun-reticle { transition:none; } }