:root{
  --bg:#0B0712; --panel:#170F28; --panel2:#1E1536; --line:#2C2044; --line2:#3B2C5A;
  --danger:#FF5468; --window:#FFC65A; --success:#4FE0C6; --player:#8B7DFF;
  --crack:#FF5FE0; --elemA:#4FD8C4; --elemB:#B98BFF;
  --text:#F2EFFA; --dim:#8E88AC; --dim2:#5C5578;
  /* 터치 컨트롤이 차지하는 하단 영역 높이 (버튼 104px + 여백 + 노치) */
  --tc-zone:calc(132px + env(safe-area-inset-bottom));
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;overflow:hidden;color:var(--text);
  font-family:'Rajdhani',sans-serif;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 760px at 50% -12%, rgba(139,125,255,0.12), transparent 58%),
    radial-gradient(820px 620px at 88% 116%, rgba(255,95,224,0.07), transparent 54%),
    linear-gradient(165deg,#0B0712,#0E0A1A 55%,#09060F);}
#root{display:flex;gap:22px;align-items:center;justify-content:center;padding:2vh 2vw;min-height:100vh;}
/* 스테이지: 뷰포트 높이/너비에 맞춰 520:650 비율을 유지하며 최대한 크게 → itch 풀페이지에서 화면을 채움 */
.stage{position:relative;
  height:min(94vh, calc(94vw * 650 / 520), 880px);
  aspect-ratio:520/650;width:auto;max-width:96vw;
  background:radial-gradient(circle at 50% 10%, rgba(255,84,104,0.06), transparent 50%), linear-gradient(180deg,#160E29,#0E0A1C);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(139,125,255,0.05);
  cursor:crosshair;}
canvas{display:block;width:100%;height:100%;cursor:none;}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;gap:8px;padding:15px 17px;pointer-events:none;font-family:'JetBrains Mono',monospace;z-index:2;
  background:linear-gradient(180deg, rgba(11,7,18,0.55), transparent);}
.hud-row{display:flex;justify-content:space-between;align-items:center;gap:8px;}
/* '여분의 목숨' 증강을 여러 번 고르면 점이 계속 늘어난다. 한 줄로 두면
   가운데 'BOSS · GLITCH' 라벨을 밀어내 두 줄로 접히므로, 목숨 쪽이 접히게 한다. */
.lives{display:flex;gap:7px;flex-wrap:wrap;max-width:34%;row-gap:4px;}
.phaseLabel{white-space:nowrap;flex-shrink:0;}
.life{width:11px;height:11px;border-radius:50%;background:var(--danger);box-shadow:0 0 10px rgba(255,84,104,0.8), inset 0 0 3px rgba(255,255,255,0.4);transition:all .2s;}
.life.lost{background:transparent;border:1px solid var(--dim2);box-shadow:none;}
.phaseLabel{font-size:11px;letter-spacing:3px;color:var(--window);font-weight:600;text-shadow:0 0 12px rgba(255,198,90,0.4);}
.timer{font-size:14px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums;}
#muteBtn, #settingsBtn, #langBtn, #achieveBtn, #pauseBtn, #achieveBtnStart, #langBtnStart, #settingsBtnStart{pointer-events:auto;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:8px;font-size:13px;cursor:pointer;padding:3px 8px;line-height:1.2;color:var(--text);transition:all .15s;font-family:'JetBrains Mono',monospace;}
#muteBtn:hover, #settingsBtn:hover, #langBtn:hover, #achieveBtn:hover, #pauseBtn:hover, #achieveBtnStart:hover, #langBtnStart:hover, #settingsBtnStart:hover{border-color:var(--window);color:var(--window);transform:scale(1.06);}
#pauseBtn{letter-spacing:-1px;}

/* ── 첫 판 온보딩 ──
   판을 멈추지 않는다. 안내는 위쪽에 두고 아레나 아래쪽(플레이어가 서는 자리)은
   비워 둔다 — 읽으면서 동시에 움직여야 하는 화면이라 가리면 안 된다. */
.tut-overlay{position:absolute;left:0;right:0;top:0;bottom:0;z-index:6;pointer-events:none;
  display:flex;align-items:flex-start;justify-content:center;padding:64px 20px 0;}
.tut-card{pointer-events:auto;max-width:400px;text-align:center;
  background:linear-gradient(180deg, rgba(23,15,40,0.96), rgba(14,9,26,0.94));
  border:1px solid rgba(255,198,90,0.45);border-radius:16px;padding:16px 20px 14px;
  box-shadow:0 18px 50px rgba(0,0,0,0.6), 0 0 26px rgba(255,198,90,0.12);
  animation:tutIn .3s cubic-bezier(0.18,0.89,0.32,1.28);}
@keyframes tutIn{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:translateY(0);}}
.tut-step{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:2px;color:var(--dim2);margin-bottom:5px;}
.tut-title{font-family:'Orbitron',sans-serif;font-weight:800;font-size:17px;letter-spacing:3px;color:var(--window);
  text-shadow:0 0 18px rgba(255,198,90,0.45);margin-bottom:8px;}
.tut-body{font-size:13px;line-height:1.9;color:var(--text);}
.tut-body b{color:var(--window);}
.tut-body b.gold{color:var(--window);}
.tut-body b.red{color:var(--danger);}
.tut-skip{margin-top:11px;font-family:'Rajdhani',sans-serif;font-size:11.5px;letter-spacing:1px;
  background:transparent;border:1px solid var(--line2);color:var(--dim);border-radius:999px;padding:5px 14px;cursor:pointer;transition:all .15s;}
.tut-skip:hover{color:var(--text);border-color:var(--dim);}

/* 일시정지 오버레이 — 배경을 더 진하게 깔아 "멈췄다"가 한눈에 읽히게 한다 */
#pauseOverlay{background:rgba(6,4,11,0.93);cursor:pointer;}
.pause-mark{font-family:'Orbitron',sans-serif;font-size:34px;letter-spacing:4px;color:var(--window);
  opacity:.85;text-shadow:0 0 24px rgba(255,198,90,0.5);animation:bannerpulse 1.6s ease-in-out infinite;}
.overlay-tools{position:absolute;top:14px;right:14px;display:flex;gap:6px;z-index:6;}
.settings-panel{width:min(340px,100%);text-align:left;display:flex;flex-direction:column;gap:14px;}
.settings-panel .stitle{font-family:'Orbitron',sans-serif;font-size:16px;letter-spacing:2px;color:var(--window);text-align:center;margin-bottom:4px;}
.settings-row{display:flex;flex-direction:column;gap:6px;}
.settings-row label{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;}
.settings-row label .val{color:var(--success);font-family:'JetBrains Mono',monospace;}
.lang-toggle{display:flex;gap:8px;}
/* 선택 안 된 쪽은 확실히 죽여 둔다. 둘 다 금색 테두리를 두르고 있으면
   어느 쪽이 켜져 있는지 한눈에 안 읽힌다. */
.lang-toggle .btn{flex:1;padding:8px 12px;font-size:13px;
  border-color:var(--line2);color:var(--dim);background:rgba(255,255,255,0.03);}
.lang-toggle .btn:hover{border-color:var(--window);color:var(--window);}
.lang-toggle .btn.active{background:linear-gradient(180deg,var(--window),#FFB347);color:#1a1226;border-color:var(--window);}
.settings-actions{display:flex;gap:8px;justify-content:center;margin-top:6px;}
/* 접근성 토글 */
.settings-toggle-row{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;}
.settings-toggle-row label{margin:0;flex:1;cursor:pointer;}
.toggle{position:relative;width:44px;height:24px;flex-shrink:0;border-radius:99px;cursor:pointer;
  border:1px solid var(--line2);background:rgba(255,255,255,0.05);transition:all .18s;padding:0;}
.toggle .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--dim);transition:all .18s;}
.toggle[aria-checked="true"]{border-color:var(--success);background:rgba(79,224,198,0.18);}
.toggle[aria-checked="true"] .knob{left:22px;background:var(--success);box-shadow:0 0 10px rgba(79,224,198,0.6);}
.settings-hint-sm{font-size:10.5px;color:var(--dim2);line-height:1.5;margin-top:-6px;}
/* 스크롤 되는 오버레이(메뉴·업적). 기본 스크롤바가 스테이지 테두리 위에 흰 막대로
   그대로 얹혀서 UI가 깨져 보였다 — 얇고 어둡게 바꾼다. */
.overlay.scrollable{justify-content:flex-start;overflow-y:auto;padding-top:48px;padding-bottom:28px;
  scrollbar-width:thin;scrollbar-color:rgba(255,198,90,0.28) transparent;}
.overlay.scrollable::-webkit-scrollbar{width:7px;}
.overlay.scrollable::-webkit-scrollbar-track{background:transparent;}
.overlay.scrollable::-webkit-scrollbar-thumb{background:rgba(255,198,90,0.26);border-radius:99px;}
.overlay.scrollable::-webkit-scrollbar-thumb:hover{background:rgba(255,198,90,0.45);}
.hint-esc{font-size:11px;color:var(--dim2);text-align:center;margin-top:4px;}
.bosshp-outer{width:100%;height:7px;background:rgba(255,255,255,0.06);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 1px 2px rgba(0,0,0,0.4);}
.bosshp-inner{height:100%;width:100%;transform-origin:left center;transform:scaleX(1);background:linear-gradient(90deg,#FF5468,#FF9A6B);box-shadow:0 0 12px rgba(255,84,104,0.6);transition:transform 0.15s ease;will-change:transform;}

/* 게이지 두 개를 가로 한 줄씩으로 눕혔다.
   세로로 쌓았을 땐 아레나 하단 92논리px — 화면 높이의 14% — 이 HUD 밑이었고,
   플레이어 이동 상한(y=634)이 그 안이라 자기 기체가 게이지에 가려 안 보였다.
   지금은 ~50논리px. 남은 경계는 constants.js의 PLAYER_MAX_Y와 맞춰 둔다. */
.hud-bottom{position:absolute;bottom:0;left:0;right:0;padding:7px 17px 9px;display:flex;flex-direction:column;gap:4px;pointer-events:none;font-family:'JetBrains Mono',monospace;z-index:2;
  background:linear-gradient(0deg, rgba(11,7,18,0.72), rgba(11,7,18,0.35) 60%, transparent);}
.meter-row{display:flex;align-items:center;gap:9px;}
.m-name{font-size:9px;letter-spacing:1.4px;color:var(--dim);text-transform:uppercase;white-space:nowrap;min-width:74px;}
.m-val{font-size:9px;color:var(--dim);min-width:30px;text-align:right;font-variant-numeric:tabular-nums;}
.meter-outer{flex:1;height:6px;background:rgba(255,255,255,0.06);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 1px 2px rgba(0,0,0,0.4);}
.meter-inner{height:100%;width:100%;transform-origin:left center;transform:scaleX(0);transition:transform 0.1s linear;border-radius:6px;will-change:transform;}
.momentum-inner{background:linear-gradient(90deg,#FFC65A,#FFE9A0);box-shadow:0 0 10px rgba(255,198,90,0.6);}
/* 만충: 숫자 자리가 조작 안내로 바뀌고 게이지가 맥동한다 — 쓸 수 있게 된 순간에만 눈에 띈다 */
.m-val.ready{color:var(--window);font-weight:700;letter-spacing:0.5px;min-width:62px;text-shadow:0 0 10px rgba(255,198,90,0.6);}
.meter-inner.ready{animation:momReady 1.1s ease-in-out infinite;}
@keyframes momReady{0%,100%{filter:brightness(1);}50%{filter:brightness(1.55);}}
.xp-inner{background:linear-gradient(90deg,#8B7DFF,#B6AEFF);box-shadow:0 0 10px rgba(139,125,255,0.5);}

/* ── 모바일 터치 컨트롤 ── */
/* 이동은 캔버스 드래그(상대 이동)라 조이스틱이 없다. 버튼은 패링/필살기 둘뿐. */
.touch-controls{position:absolute;inset:0;z-index:4;pointer-events:none;}
/* fixed = 뷰포트 기준. 세로 폰에서는 스테이지 아래 여백에 놓여 플레이 화면을 가리지 않고,
   가로/꽉 찬 화면에서는 자연스럽게 우하단에 겹쳐진다. */
.tc-btn{position:fixed;pointer-events:auto;border-radius:50%;
  font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;}
.tc-parry{right:calc(16px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));
  width:104px;height:104px;font-size:15px;
  border:2px solid var(--window);color:var(--window);
  background:radial-gradient(circle at 50% 40%, rgba(255,198,90,0.28), rgba(255,198,90,0.08));
  box-shadow:0 0 22px rgba(255,198,90,0.35), inset 0 0 18px rgba(255,198,90,0.12);}
.tc-ult{right:calc(128px + env(safe-area-inset-right));bottom:calc(39px + env(safe-area-inset-bottom));
  width:70px;height:70px;font-size:12px;
  border:2px solid var(--player);color:#C9C1FF;
  background:radial-gradient(circle at 50% 40%, rgba(139,125,255,0.26), rgba(139,125,255,0.07));
  box-shadow:0 0 18px rgba(139,125,255,0.3), inset 0 0 14px rgba(139,125,255,0.12);}
.tc-btn:active{transform:scale(0.93);filter:brightness(1.45);}
/* 터치 기기에서는 커서/호버 연출이 무의미하거나 방해가 된다 */
body.touch .stage{cursor:default;}
body.touch canvas{cursor:default;touch-action:none;}
body.touch{overscroll-behavior:none;-webkit-touch-callout:none;}

/* 메뉴에 있는 동안은 인게임 HUD를 완전히 걷어낸다.
   오버레이 배경이 88% 불투명이라 뒤의 "WAVE 1 · 00.0 · MOMENTUM 0%"가 비쳐 보였고,
   시작 화면에 죽은 게이지가 떠 있으면 만들다 만 화면으로 읽힌다. */
body.in-menu .hud-top,
body.in-menu .hud-bottom,
body.in-menu .combo-display,
body.in-menu .touch-controls{display:none !important;}

.overlay{position:absolute;inset:0;background:rgba(9,6,15,0.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;text-align:center;padding:24px;z-index:5;}
#settingsOverlay{z-index:8;}
.hidden{display:none !important;}
.title{font-family:'Orbitron',sans-serif;font-weight:800;font-size:26px;letter-spacing:3px;color:var(--window);text-shadow:0 0 24px rgba(255,198,90,0.55), 0 0 4px rgba(255,198,90,0.8);}
.best-score{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;color:var(--success);margin-top:-4px;text-shadow:0 0 12px rgba(79,224,198,0.35);}
.best-score.empty{opacity:0.45;color:var(--dim);}
.score-line{font-family:'Orbitron',sans-serif;font-weight:700;font-size:15px;letter-spacing:2px;color:var(--window);text-shadow:0 0 16px rgba(255,198,90,0.45);}
.diff-note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1.5px;color:var(--dim2);text-transform:uppercase;margin-top:-8px;}
.score-line.new-best{color:var(--success);text-shadow:0 0 18px rgba(79,224,198,0.55);animation:bannerpulse 1.1s ease-in-out infinite;}
.sub{font-size:13px;color:var(--dim);max-width:370px;line-height:1.8;}
.btn{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;letter-spacing:1px;padding:11px 32px;border-radius:999px;border:1px solid var(--window);
  background:linear-gradient(180deg, rgba(255,198,90,0.14), rgba(255,198,90,0.04));color:var(--window);cursor:pointer;transition:all .18s;}
.btn:hover{background:linear-gradient(180deg,var(--window),#FFB347);color:#1a1226;box-shadow:0 6px 24px rgba(255,198,90,0.35);transform:translateY(-1px);}
.btn.small{font-size:12px;padding:7px 18px;}
.keycap{display:inline-block;padding:2px 9px;border-radius:6px;border:1px solid rgba(255,198,90,0.5);color:var(--window);font-size:11px;margin:0 2px;font-family:'JetBrains Mono',monospace;background:rgba(255,198,90,0.06);}

/* ── 메인 메뉴 (타이틀 스크린) ── */
/* 시작 화면을 게임 메뉴처럼: 히어로(타이틀) + 탭 바 + 탭별 패널.
   게임 시작 · 무기 · 조작법 · 설정 · 업적을 모두 인라인 탭으로 통일한다.
   설정·업적은 인게임 팝업 노드를 메뉴 안으로 옮겨 표시(.inline)하며, 팝업 전용 요소는 숨긴다. */
.overlay.menu{gap:20px;justify-content:flex-start;padding-top:44px;}
.menu-hero{display:flex;flex-direction:column;align-items:center;gap:7px;}

.menu-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:5px;border-radius:14px;max-width:100%;
  background:rgba(255,255,255,0.03);border:1px solid var(--line);box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);}
.menu-tab{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:14px;letter-spacing:1px;white-space:nowrap;
  padding:9px 18px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--dim);cursor:pointer;transition:all .15s;}
.menu-tab:hover{color:var(--text);background:rgba(255,255,255,0.05);}
.menu-tab.active{color:var(--window);
  background:linear-gradient(180deg, rgba(255,198,90,0.16), rgba(255,198,90,0.04));
  border-color:rgba(255,198,90,0.45);box-shadow:0 0 14px rgba(255,198,90,0.14);}

/* 'Play' 외의 탭에서는 히어로(엠블럼·타이틀)를 줄여 목록 자리를 번다.
   ui.js showMenuTab이 이 클래스를 붙였다 뗀다. */
.overlay.menu.compact-hero{padding-top:26px;gap:13px;}
.compact-hero .menu-emblem{display:none;}
.compact-hero .title{font-size:19px;letter-spacing:2px;}
.compact-hero .best-score{font-size:11px;}

.menu-body{width:min(460px,100%);display:flex;justify-content:center;}
.menu-panel{display:none;flex-direction:column;align-items:center;gap:15px;width:100%;}
.menu-panel.active{display:flex;animation:panelFade .22s ease;}
@keyframes panelFade{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
.weapon-pick-label{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--text);text-transform:uppercase;}
.btn-start{margin-top:4px;min-width:180px;}
.howto-text{font-size:13px;color:var(--dim);line-height:2;text-align:left;width:100%;
  background:rgba(255,255,255,0.025);border:1px solid var(--line);border-radius:14px;padding:16px 20px;}
/* 조작표에 안 들어가는 규칙들. 특히 헛친 패링의 이동 잠금은 게임 안 어디에도
   드러나지 않아서, 모르면 계속 눌러대다가 이유도 모르고 죽는다. */
.howto-tips{width:100%;text-align:left;background:rgba(255,198,90,0.045);
  border:1px solid rgba(255,198,90,0.22);border-radius:14px;padding:13px 18px 15px;}
.howto-tips .tips-title{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--window);margin-bottom:9px;}
.howto-tips .tip{font-size:12px;color:var(--dim);line-height:1.65;padding-left:14px;position:relative;margin-bottom:7px;}
.howto-tips .tip:last-child{margin-bottom:0;}
.howto-tips .tip::before{content:'▸';position:absolute;left:0;color:var(--window);opacity:.65;}
.howto-tips .tip b{color:var(--text);font-weight:700;}

/* 게임 시작 탭: 현재 장착 무기를 크게 보여주고(무기 탭에서 변경) START */
.play-equip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 30px;min-width:220px;
  border-radius:16px;border:1px solid var(--line2);background:rgba(255,255,255,0.025);}
.equip-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);}
.equip-weapon{font-family:'Orbitron',sans-serif;font-weight:700;font-size:20px;color:var(--window);text-shadow:0 0 18px rgba(255,198,90,0.4);display:inline-flex;align-items:center;justify-content:center;gap:10px;}

/* 난이도 선택 — 시작 화면 아래 절반이 통째로 비어 있던 자리를 메운다.
   숫자(diff 1.6/2.2/3.0)는 안 보여준다. 플레이어에게 의미 있는 건
   "패턴이 언제 열리느냐"지 상수값이 아니다. */
.diff-block{display:flex;flex-direction:column;align-items:center;gap:7px;}
.diffGroup{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.diffCard{font-family:'Rajdhani',sans-serif;border:1px solid var(--line2);background:rgba(255,255,255,0.025);
  border-radius:12px;padding:9px 15px;min-width:104px;cursor:pointer;transition:all .16s;color:var(--text);text-align:center;}
.diffCard:hover{border-color:var(--window);background:rgba(255,198,90,0.06);transform:translateY(-1px);}
.diffCard.selected{border-color:var(--success);background:rgba(79,224,198,0.1);box-shadow:0 0 18px rgba(79,224,198,0.18);}
.diffCard .dn{font-weight:700;font-size:14px;margin-bottom:3px;}
.diffCard.selected .dn{color:var(--success);}
.diffCard .dd{font-size:10px;color:var(--dim);line-height:1.4;}
.play-tip{font-size:12px;color:var(--dim);line-height:1.7;max-width:400px;margin-top:2px;
  border-top:1px solid var(--line);padding-top:11px;}
.play-tip b{color:var(--window);}

/* 설정·업적: 메뉴 안(.inline)에선 팝업 전용 요소(제목/닫기/ESC 힌트)를 숨긴다 */
.settings-panel.inline .stitle,
.settings-panel.inline .settings-actions,
.settings-panel.inline .hint-esc{display:none;}
.achieve-body{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;}
.achieve-body.inline .title,
.achieve-body.inline #achieveCloseBtn{display:none;}

/* ── 벡터 아이콘 (game/icons.js) ── */
/* 무기 카드 아이콘 — 무기별 색을 currentColor로 받아 글로우까지 자동 매칭 */
.wIcon{width:32px;height:32px;display:block;margin:0 auto 6px;filter:drop-shadow(0 0 4px currentColor);}
.wIcon *{stroke-linecap:round;stroke-linejoin:round;}
/* 게임 시작 탭의 장착 무기: 아이콘 + 이름 */
.equip-weapon .eq-ic{display:inline-flex;}
.eq-ic svg{width:28px;height:28px;filter:drop-shadow(0 0 4px currentColor);}
.eq-ic svg *{stroke-linecap:round;stroke-linejoin:round;}

/* ── 보스 등장 연출 ── */
.boss-intro{position:absolute;inset:0;z-index:4;pointer-events:none;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.boss-intro.show{animation:bossIntroAnim 1.6s ease forwards;}
@keyframes bossIntroAnim{0%{opacity:0;transform:scale(.82);}12%{opacity:1;transform:scale(1);}72%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.05);}}
.bi-emblem{line-height:0;margin-bottom:4px;}
.bi-emblem svg{width:116px;height:116px;filter:drop-shadow(0 0 14px currentColor);}
.bi-emblem svg *{stroke-linecap:round;stroke-linejoin:round;}
.bi-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:5px;color:var(--dim);text-transform:uppercase;}
.bi-name{font-family:'Orbitron',sans-serif;font-weight:800;font-size:40px;letter-spacing:6px;color:currentColor;text-shadow:0 0 26px currentColor,0 2px 20px rgba(0,0,0,0.5);}
.bi-sub{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:15px;letter-spacing:2px;color:var(--text);opacity:.92;}

/* ── 메인 메뉴 엠블럼 (타이틀 위) ── */
.menu-emblem{display:flex;justify-content:center;line-height:0;}
.menu-emblem svg{width:60px;height:60px;filter:drop-shadow(0 0 6px rgba(255,198,90,0.45));}
.menu-emblem svg *{stroke-linecap:round;stroke-linejoin:round;}

/* 2열 격자. flex-wrap이었을 땐 카드 폭이 설명 길이를 따라가서
   '2개 → 1개(가운데) → 2개'처럼 줄마다 어긋났다. 무기 여덟 개를 비교하는
   화면인데 크기가 제각각이면 비교가 안 된다. */
.choiceGroup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%;}
.choiceCard{border:1px solid var(--line2);background:rgba(255,255,255,0.025);border-radius:12px;padding:10px 12px;cursor:pointer;min-width:0;text-align:center;transition:all .16s;}
.choiceCard:hover{border-color:var(--window);background:rgba(255,198,90,0.05);transform:translateY(-1px);}
.choiceCard.selected{border-color:var(--success);background:rgba(79,224,198,0.1);box-shadow:0 0 18px rgba(79,224,198,0.18);}
.choiceCard.locked{opacity:0.45;cursor:not-allowed;border-color:rgba(255,255,255,0.08);background:rgba(0,0,0,0.2);}
.choiceCard.locked:hover{transform:none;border-color:rgba(255,255,255,0.08);background:rgba(0,0,0,0.2);}
.choiceCard .ct{font-weight:700;font-size:12.5px;margin-bottom:3px;}
.choiceCard .cd{font-size:10px;color:var(--dim);line-height:1.45;}

.augCards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.augCard{border:1px solid rgba(255,198,90,0.4);background:linear-gradient(180deg, rgba(255,198,90,0.08), rgba(255,198,90,0.02));border-radius:14px;padding:15px;width:152px;cursor:pointer;transition:all .16s;}
.augCard:hover{background:linear-gradient(180deg, rgba(255,198,90,0.2), rgba(255,198,90,0.06));transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,198,90,0.15);}
.augCard .cat{font-size:9.5px;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase;margin-bottom:6px;}

/* 분류별 색.
   증강이 21개 4분류가 되면서 카드 넷이 전부 같아 보이는 게 문제가 됐다 —
   고르는 순간에 "이건 딜, 이건 생존"이 색으로 먼저 읽혀야 세 장을 비교할 수 있다.
   **새 색을 만들지 않고 기존 팔레트를 쓴다**: 무기=위험(붉음), 패링=창(금),
   시너지=성공(청록), 기동=플레이어(보라). 화면 다른 곳에서 이미 그 뜻으로 쓰는 색이다. */
.augCard[data-cat="weapon"]{border-color:rgba(255,84,104,0.42);background:linear-gradient(180deg,rgba(255,84,104,0.09),rgba(255,84,104,0.02));}
.augCard[data-cat="weapon"] .cat{color:var(--danger);}
.augCard[data-cat="weapon"]:hover{background:linear-gradient(180deg,rgba(255,84,104,0.2),rgba(255,84,104,0.06));box-shadow:0 10px 30px rgba(255,84,104,0.15);}

.augCard[data-cat="parry"]{border-color:rgba(255,198,90,0.42);}
.augCard[data-cat="parry"] .cat{color:var(--window);}

.augCard[data-cat="syn"]{border-color:rgba(79,224,198,0.42);background:linear-gradient(180deg,rgba(79,224,198,0.09),rgba(79,224,198,0.02));}
.augCard[data-cat="syn"] .cat{color:var(--success);}
.augCard[data-cat="syn"]:hover{background:linear-gradient(180deg,rgba(79,224,198,0.2),rgba(79,224,198,0.06));box-shadow:0 10px 30px rgba(79,224,198,0.15);}

.augCard[data-cat="mob"]{border-color:rgba(139,125,255,0.46);background:linear-gradient(180deg,rgba(139,125,255,0.10),rgba(139,125,255,0.02));}
.augCard[data-cat="mob"] .cat{color:var(--player);}
.augCard[data-cat="mob"]:hover{background:linear-gradient(180deg,rgba(139,125,255,0.22),rgba(139,125,255,0.06));box-shadow:0 10px 30px rgba(139,125,255,0.18);}
.augCard .nm{font-weight:700;font-size:14px;margin-bottom:6px;color:var(--window);}
.augCard .ds{font-size:11px;color:var(--dim);line-height:1.5;}

.banner{position:absolute;top:42%;left:0;right:0;text-align:center;pointer-events:none;z-index:4;}
.banner .bt{font-family:'Orbitron',sans-serif;font-weight:800;font-size:23px;letter-spacing:4px;color:var(--window);text-shadow:0 0 26px rgba(255,198,90,0.7);animation:bannerpulse 1.2s ease-in-out infinite;}
@keyframes bannerpulse{0%,100%{opacity:0.85;transform:scale(1);}50%{opacity:1;transform:scale(1.04);}}

/* 테스트 패널은 배포 빌드에서 제거됨 */
input[type=range]{width:100%;accent-color:var(--window);}

.combo-display{
  position:absolute;
  right:30px;
  bottom:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:0;
  transition:opacity 0.2s;
  pointer-events:none;
  z-index:5;
  font-family:'Orbitron',sans-serif;
}

.combo-display.active{
  opacity:1;
}

/* '화면 효과 줄이기': 반복 재생되는 CSS 애니메이션을 멈춘다.
   콤보 숫자가 계속 뛰고 배너가 맥동하는 게 캔버스 섬광만큼이나 피곤하다.
   나타나는 애니메이션(등장/토스트)은 남긴다 — 그건 정보를 전달한다. */
body.reduce-fx .combo-number,
body.reduce-fx .banner .bt,
body.reduce-fx .pause-mark,
body.reduce-fx .meter-inner.ready,
body.reduce-fx .score-line.new-best{animation:none !important;}

.combo-number{
  font-size:48px;
  font-weight:800;
  color:#FFB347;
  text-shadow:
    0 0 20px rgba(255,179,71,0.8),
    0 0 40px rgba(255,84,104,0.5);
  font-variant-numeric:tabular-nums;
  transform-origin:center;
  animation:comboPopIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.combo-number.milestone10{
  color:#FF6A3D;
  text-shadow:
    0 0 20px rgba(255,106,61,0.9),
    0 0 40px rgba(255,84,104,0.6);
}

.combo-number.milestone25{
  color:#FF5FE0;
  animation:comboPulse 0.6s infinite;
  text-shadow:
    0 0 20px rgba(255,95,224,0.9),
    0 0 60px rgba(255,95,224,0.7);
}

.combo-number.milestone50{
  font-size:56px;
  color:#FFD700;
  animation:comboUltimate 0.8s infinite;
  text-shadow:
    0 0 30px rgba(255,215,0,1),
    0 0 60px rgba(255,95,224,0.8),
    0 0 100px rgba(255,215,0,0.5);
}

@keyframes comboPopIn{
  0%{transform:scale(0.6);opacity:0;}
  70%{transform:scale(1.15);}
  100%{transform:scale(1);opacity:1;}
}

@keyframes comboPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.1);}
}

@keyframes comboUltimate{
  0%,100%{
    transform:scale(1) rotate(0deg);
  }
  50%{
    transform:scale(1.15) rotate(2deg);
  }
}

.combo-text{
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--dim);
  transition:color 0.3s;
}

.combo-display.milestone10 .combo-text{color:#FF6A3D;}
.combo-display.milestone25 .combo-text{color:#FF5FE0;}
.combo-display.milestone50 .combo-text{color:#FFD700;}

.combo-timer-bar{
  width:100px;
  height:4px;
  background:rgba(255,255,255,0.1);
  border-radius:2px;
  overflow:hidden;
}

.combo-timer-bar::after{
  content:'';
  display:block;
  height:100%;
  background:linear-gradient(90deg,#4FD8C4,#FF6A3D);
  width:100%;
  transform-origin:left center;
  transform:scaleX(var(--bar-scale,1));
  transition:transform 0.1s linear;
  will-change:transform;
}

/* 실시간 업적 달성 토스트 팝업 */
.achieve-toast-container{
  position:absolute;bottom:70px;right:14px;display:flex;flex-direction:column;gap:8px;z-index:9;pointer-events:none;
}
.achieve-toast{
  background:linear-gradient(180deg, rgba(30,22,54,0.95), rgba(18,12,35,0.95));
  border:1px solid var(--window);
  box-shadow:0 10px 30px rgba(0,0,0,0.5), 0 0 15px rgba(255,198,90,0.3);
  border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;
  animation:toastslide 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  font-family:'JetBrains Mono',monospace;
}
@keyframes toastslide{0%{opacity:0;transform:translateX(50px);}100%{opacity:1;transform:translateX(0);}}
.achieve-toast .ic{font-size:22px;}
.achieve-toast .tb{display:flex;flex-direction:column;align-items:flex-start;}
.achieve-toast .tt{font-size:9.5px;letter-spacing:1.5px;color:var(--window);text-transform:uppercase;font-weight:700;}
.achieve-toast .tn{font-size:12.5px;font-weight:700;color:#FFF;}

/* 업적 도감 모달 */
.achieveGrid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:10px;width:100%;max-width:440px;margin-top:6px;}
.achieveCard{border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.03);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:left;transition:all 0.15s;}
.achieveCard.unlocked{border-color:var(--window);background:linear-gradient(180deg, rgba(255,198,90,0.12), rgba(255,198,90,0.03));box-shadow:0 0 15px rgba(255,198,90,0.12);}
/* 잠긴 업적도 읽혀야 한다 — 뭘 노려야 할지 보이는 게 도감의 목적이다.
   0.45는 어두운 배경 위에서 거의 안 보였다. */
.achieveCard.locked{opacity:0.62;}
.achieveCard .icon{font-size:24px;}
.achieveCard .info{display:flex;flex-direction:column;gap:2px;}
.achieveCard .aname{font-weight:700;font-size:12.5px;color:#FFF;}
.achieveCard.unlocked .aname{color:var(--window);}
.achieveCard .adesc{font-size:10px;color:var(--dim);line-height:1.3;}

/* ── 모바일 레이아웃 ── */
/* 스테이지는 520:650 비율 고정(캔버스가 논리 좌표를 그대로 매핑하므로 비율이 깨지면 화면이 늘어남).
   좁은 화면에서는 가로를 꽉 채워 최대한 크게. */
@media (max-width: 680px), (pointer: coarse) {
  #root{padding:0;}
  .stage{height:min(100vh, calc(100vw * 650 / 520));max-width:100vw;border-radius:0;border-left:none;border-right:none;}
}
/* 터치 + 세로로 여유가 있는 화면: 하단에 컨트롤 영역을 '예약'해 버튼이 플레이 영역과 게이지를 덮지 않게 한다.
   (itch 임베드를 520×650처럼 딱 맞게 잡으면 스테이지가 화면을 꽉 채워 버튼이 겹친다 → 520×800 권장)
   조건은 반드시 body.touch — 버튼을 띄우는 판정(main.js IS_TOUCH)과 어긋나면 안 된다.
   가로 모드(낮은 높이)에서는 예약하면 화면이 너무 작아지므로 제외 — 그땐 버튼이 스테이지 좌우 여백에 놓인다. */
@media (min-height: 600px) {
  body.touch #root{padding-bottom:var(--tc-zone);}
  body.touch .stage{height:min(calc(100vh - var(--tc-zone)), calc(100vw * 650 / 520));}
}
@media (max-width: 480px) {
  .hud-top{padding:11px 12px;}
  .hud-bottom{padding:6px 12px 8px;}
  .m-name{min-width:66px;}
  .title{font-size:22px;}
  .sub{font-size:12px;line-height:1.7;max-width:100%;}
  .overlay{padding:18px 14px;gap:12px;}
  .menu-tab{padding:7px 12px;font-size:12.5px;}
  .menu-tabs{gap:4px;padding:4px;}
  .howto-text{font-size:12px;line-height:1.85;padding:13px 15px;}
  .btn-start{min-width:150px;}
  .equip-weapon{font-size:18px;}
  .choiceCard{min-width:96px;padding:9px 12px;}
  .achieve-toast-container{bottom:190px;}
  .achieveGrid{grid-template-columns:1fr;}
  .augCard{width:132px;padding:12px;}
  .tut-overlay{padding-top:52px;}
  .tut-body{font-size:12px;line-height:1.8;}

  /* 세로 폰에서는 스테이지가 520:650 비율로 잘려서 세로 여유가 별로 없다.
     압축 전엔 '시작' 버튼이 스테이지 밖으로 밀려서, 첫 화면에서 **시작을 누르려면
     스크롤을 해야 했다.** 첫 행동이 스크롤인 게임은 안 된다.
     제목·장식부터 줄이고 버튼과 난이도는 남긴다. */
  .overlay.menu{gap:9px;padding-top:22px;padding-bottom:16px;}
  .menu-hero{gap:3px;}
  .menu-emblem svg{width:42px;height:42px;}
  .best-score{font-size:11px;}
  .play-equip{padding:9px 20px;min-width:0;gap:2px;}
  .equip-label{font-size:9px;}
  .menu-panel{gap:10px;}
  .diff-block{gap:5px;}
  .diffCard{min-width:0;flex:1;padding:7px 8px;}
  .diffCard .dn{font-size:13px;margin-bottom:1px;}
  .diffCard .dd{font-size:9px;}
  .diffGroup{gap:6px;width:100%;}
  .play-tip{font-size:11px;line-height:1.55;padding-top:8px;}
}