:root{
  --bg:#0d0b09; --panel:#16130f; --panel2:#1c1813; --line:#312a21;
  --gold:#d4a24c; --gold-dim:#8a6c33;
  --text:#c9bfae; --dim:#7b7266; --dimmer:#565046;
  --good:#6fbf73; --warn:#d9a441; --bad:#c9524b;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "D2Coding", monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.55 -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  padding: max(16px, env(safe-area-inset-top)) 16px 48px;
  max-width:1180px; margin:0 auto;
  -webkit-font-smoothing:antialiased;
}

.top{padding:18px 4px 14px; border-bottom:1px solid var(--line); margin-bottom:18px}
h1{margin:0 0 6px; font-size:20px; letter-spacing:-.01em; color:var(--gold); font-weight:650}
.phase{font-family:var(--mono); font-size:11px; color:var(--dim); background:var(--panel2);
  border:1px solid var(--line); border-radius:4px; padding:3px 7px; margin-left:8px; vertical-align:2px; font-weight:400}
.sub{margin:0; color:var(--dim); font-size:13px}
.sub b{color:var(--text); font-weight:600}

.warn-banner{background:#2a1f10; border:1px solid #5c451f; color:var(--warn);
  padding:9px 13px; border-radius:6px; font-size:12.5px; margin-bottom:16px}

main{display:flex; flex-direction:column; gap:16px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.panel-h{padding:9px 14px; border-bottom:1px solid var(--line); background:var(--panel2);
  font-size:12px; font-weight:650; color:var(--gold-dim); letter-spacing:.02em}
.dim{color:var(--dim); font-weight:400}

/* 클릭 무대 */
.stage{height:170px; background:
  repeating-linear-gradient(90deg,#141109 0 39px,#181409 39px 40px),
  #121009;
  display:grid; place-items:center; cursor:crosshair; user-select:none; touch-action:none}
.stage-hint{text-align:center; display:flex; flex-direction:column; gap:5px; pointer-events:none}
.stage-hint b{color:var(--gold); font-size:15px}
.stage-hint span{font-size:12px; color:var(--dim)}

/* HUD */
.hud{display:block; width:100%; height:290px}
.legend{display:flex; gap:16px; flex-wrap:wrap; padding:8px 14px 12px; font-size:11.5px; color:var(--dim);
  font-family:var(--mono); border-top:1px solid var(--line)}
.sw{display:inline-block; width:10px; height:10px; vertical-align:-1px; margin-right:5px}
.sw.gold{background:var(--gold); width:2px; height:12px; vertical-align:-2px}
.sw.dot{background:var(--gold); border-radius:50%; width:7px; height:7px}

.cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:900px){ .cols{grid-template-columns:1fr} }

/* 통계 */
.stats{padding:6px 14px}
.s{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:6px 0; border-bottom:1px solid #221d17}
.s:last-child{border-bottom:0}
.k{font-size:12.5px; color:var(--dim)}
.k em{font-style:normal; color:var(--dimmer); font-size:11px}
.v{font-family:var(--mono); font-size:13px; color:var(--text); font-variant-numeric:tabular-nums}
.v.good{color:var(--good)} .v.warn{color:var(--warn)} .v.bad{color:var(--bad)}

.actions{display:flex; gap:8px; padding:10px 14px 12px; border-top:1px solid var(--line)}
.btn{font:inherit; font-size:12.5px; padding:7px 13px; border-radius:5px; cursor:pointer;
  background:var(--panel2); color:var(--text); border:1px solid var(--line)}
.btn:hover{border-color:var(--gold-dim)}
.btn.primary{background:#2c2413; border-color:var(--gold-dim); color:var(--gold)}
.btn:disabled{opacity:.45; cursor:default}

.selftest{padding:11px 14px; border-top:1px solid var(--line); font-size:12px; min-height:64px}
.selftest .note{color:var(--dimmer); font-size:11.5px; line-height:1.5}
.selftest .mono{font-family:var(--mono); color:var(--text); line-height:1.7; font-size:12px}
.selftest .verdict{font-weight:700; font-size:14px; margin-bottom:5px}
.selftest.pass .verdict{color:var(--good)} .selftest.fail .verdict{color:var(--bad)}
.selftest .bar{height:5px; background:var(--panel2); border-radius:3px; overflow:hidden; margin-bottom:7px}
.selftest .bar i{display:block; height:100%; background:var(--gold); transition:width .12s linear}

/* 클릭 로그 */
.clicklog{padding:8px 14px; min-height:150px; font-family:var(--mono); font-size:11.5px}
.clicklog .empty{color:var(--dimmer); padding:24px 0; text-align:center; font-family:inherit; font-size:12px}
.clicklog .row{display:flex; gap:9px; align-items:baseline; padding:4px 0;
  border-bottom:1px solid #1e1a14; white-space:nowrap; overflow:hidden}
.clicklog .row:last-child{border-bottom:0}
.c-frame{color:var(--gold); min-width:52px}
.c-off{color:var(--dim); min-width:62px}
.c-arrow{color:var(--dimmer)}
.c-wait{min-width:86px} .c-lag{color:var(--dimmer)}
.good{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad)}

.foot{padding:10px 14px 13px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.65; color:var(--dimmer)}
.foot b{color:var(--dim)}

/* 기준 데이터 */
.cycle{padding:12px 14px; font-size:13.5px; font-family:var(--mono);
  border-bottom:1px solid var(--line); color:var(--text)}
.cycle b{color:var(--gold)}
.tables{padding:14px; gap:24px}
.tables h3{margin:0 0 8px; font-size:12px; color:var(--dim); font-weight:600}
table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px}
th{text-align:left; color:var(--dimmer); font-weight:500; padding:4px 8px 6px;
  border-bottom:1px solid var(--line); font-size:11px}
td{padding:4px 8px; border-bottom:1px solid #1e1a14; font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--gold-dim)}

/* 탭이 가려져 시계가 멈춘 상태 */
body.paused .stage{filter:grayscale(.6) brightness(.7)}
body.paused .stage-hint b::after{content:' — 일시정지'; color:var(--warn)}
.v.idle{color:var(--dimmer); font-size:12px}

/* ══════════ P1 트레이너 ══════════ */
body.app{max-width:none; padding:0; height:100vh; display:flex; flex-direction:column; overflow:hidden}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:max(8px, env(safe-area-inset-top)) 14px 8px; border-bottom:1px solid var(--line); background:var(--panel)}
.bar h1{font-size:15px; margin:0}
.bar-right{display:flex; align-items:center; gap:8px}
.gear{font-size:12px; color:var(--dim); display:flex; align-items:center; gap:6px}
.gear select{font:inherit; font-size:12px; background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:5px; padding:5px 7px}
a.btn{text-decoration:none; display:inline-block}

.train{flex:1; display:grid; grid-template-columns:1fr 320px; min-height:0}
@media (max-width:820px){ .train{grid-template-columns:1fr; grid-template-rows:1fr auto} }
.arena{width:100%; height:100%; display:block; cursor:none; background:#1d2417; touch-action:none}
body.paused .arena{filter:grayscale(.7) brightness(.6)}
.side{border-left:1px solid var(--line); overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:12px; background:var(--bg)}
@media (max-width:820px){ .side{border-left:0; border-top:1px solid var(--line); max-height:44vh} }

.result{padding:14px; text-align:center; border-bottom:1px solid var(--line)}
.result .big{font-family:var(--mono); font-size:40px; font-weight:700; line-height:1.05}
.result .unit{font-size:20px; opacity:.55; margin-left:2px}
.result .cap{font-size:11.5px; color:var(--dim); margin-top:5px; line-height:1.5}
.result.idle .big{color:var(--dimmer)}
.result.perfect .big{color:var(--good)}
.result.good .big{color:var(--gold)}
.result.meh .big{color:var(--warn)}
.result.fail .big{color:var(--bad); font-size:26px}
.live{padding:4px 14px 10px}
.v.cast{color:var(--blue, #5b8dd6)}

.histo-wrap{padding:10px 14px 14px; border-top:1px solid var(--line)}
.histo-t{font-size:11px; color:var(--dimmer); margin-bottom:7px}
.histo{display:flex; align-items:flex-end; gap:3px; height:74px}
.histo .bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; gap:3px}
.histo .bar i{display:block; width:100%; background:var(--gold-dim); border-radius:2px 2px 0 0; min-height:2px}
.histo .bar:first-child i{background:var(--good)}
.histo .bar span{font-family:var(--mono); font-size:9.5px; color:var(--dimmer)}

.howto{padding:11px 14px 13px; font-size:11.5px; line-height:1.6; color:var(--dim)}
.howto p{margin:0 0 8px}
.howto b{color:var(--text)}
.howto .key{color:var(--text); background:#1f1a12; border-left:2px solid var(--gold-dim); padding:8px 10px; border-radius:0 4px 4px 0}
.budget{margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--text)}
.budget b{color:var(--gold)}
.panel.calib p{padding:0 14px; font-size:11.5px; line-height:1.6; color:var(--dim); margin:10px 0}
.panel.calib b{color:var(--text)}
/* 사이드 패널이 flex 로 찌그러져 내용이 잘리던 것 방지 */
.side > .panel{flex:0 0 auto}
.vp-note{margin:10px 14px 0; font-family:var(--mono); font-size:11px; color:var(--dim)}
.vp-note b{color:var(--text)}
.vp-note.ok b{color:var(--good)} .vp-note.warn b{color:var(--warn)} .vp-note.bad b{color:var(--bad)}
.hint{padding:0 14px; font-size:11.5px; line-height:1.6; color:var(--warn); margin:8px 0}
.hint b{color:var(--gold)}

/* 모드 전환 */
.modes{display:flex; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden}
.mode{font:inherit; font-size:12.5px; padding:7px 14px; border:0; cursor:pointer;
  background:var(--panel2); color:var(--dim); border-right:1px solid var(--line)}
.mode:last-child{border-right:0}
.mode:hover{color:var(--text)}
.mode.on{background:#2c2413; color:var(--gold)}
.chain-only{display:none}
body.chain .chain-only{display:block}

.run-summary{padding:9px 14px; border-top:1px solid var(--line); background:#14110c}
.rs-t{font-size:10.5px; color:var(--dimmer); margin-bottom:5px}
.rs-g{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; color:var(--dim)}
.rs-g b{color:var(--text)}
.rs-g b.good{color:var(--good)} .rs-g b.warn{color:var(--warn)} .rs-g b.bad{color:var(--bad)}

/* ══════════ 스킬바 / 상대 세팅 (P3) ══════════ */
.arena-wrap{position:relative; min-height:0; display:flex; flex-direction:column}
.arena-wrap .arena{flex:1}
.skillbar{display:flex; align-items:stretch; gap:8px; padding:7px 10px;
  border-top:1px solid var(--line); background:var(--panel); flex-wrap:wrap}
.mouse-slot{display:flex; align-items:center; gap:7px; padding:5px 11px;
  border:1px solid var(--line); border-radius:5px; background:var(--panel2)}
.mouse-slot .mb{font-size:10px; color:var(--dimmer); border:1px solid var(--line);
  border-radius:3px; padding:1px 5px}
.mouse-slot .sk{font-size:12.5px; color:var(--gold); font-weight:600}
.hotkeys{display:flex; gap:6px; flex:1; flex-wrap:wrap}
.hk{display:flex; align-items:center; gap:6px; padding:5px 10px; cursor:pointer;
  border:1px solid var(--line); border-radius:5px; background:var(--panel2); color:var(--dim);
  font:inherit; font-size:12px}
.hk:hover{border-color:var(--gold-dim); color:var(--text)}
.hk.on{background:#2c2413; border-color:var(--gold-dim); color:var(--gold)}
.hk b{font-family:var(--mono); font-size:10px; color:var(--dimmer);
  border:1px solid var(--line); border-radius:3px; padding:1px 4px}
.hk.on b{color:var(--gold-dim)}
.hk.buffed{box-shadow:inset 0 0 0 1px var(--good)}

.foecfg{padding:11px 14px}
.foecfg select{width:100%; font:inherit; font-size:12.5px; padding:6px 8px;
  background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:5px}
.lockan{margin-top:10px; font-family:var(--mono); font-size:11.5px; line-height:1.75; color:var(--dim)}
.lockan b{color:var(--text)}
.lockan .verdict{display:block; margin-top:7px; padding:7px 9px; border-radius:4px;
  font-size:12px; line-height:1.5}
.lockan .verdict.lock{background:#14210f; border:1px solid #2f5426; color:var(--good)}
.lockan .verdict.free{background:#2a1710; border:1px solid #5c3320; color:var(--warn)}
.lock-only{display:none}
body.lock .lock-only{display:block}
.result .cap b.blocked{color:var(--warn)}

/* P4 — 추적 / 디싱크 */
.chase-only{display:none}
body.chase .chase-only{display:block}
.row-lbl{display:flex; align-items:center; gap:8px; margin-top:9px;
  font-size:12px; color:var(--dim)}
.row-lbl select{flex:1; font:inherit; font-size:12px; padding:5px 7px;
  background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:5px}
.row-chk{display:flex; align-items:center; gap:7px; margin-top:9px;
  font-size:11.5px; color:var(--dim); cursor:pointer}
.row-chk input{accent-color:var(--gold-dim)}

/* ══════════ P5 — 결투 ══════════ */
.mode.duel.on{background:#3a1512; color:#e8837a}
.duel-only{display:none}
body.duel .duel-only{display:block}
.row-lbl.first{margin-top:0}
.row-lbl{justify-content:space-between}
.row-lbl select{max-width:72%}

.duel-over{position:absolute; inset:0; bottom:auto; height:calc(100% - 52px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:rgba(8,6,4,.72); backdrop-filter:blur(2px)}
.duel-over[hidden]{display:none}
.dv-title{font-size:44px; font-weight:800; letter-spacing:.08em}
.dv-title.win{color:var(--gold); text-shadow:0 0 24px rgba(212,162,76,.45)}
.dv-title.lose{color:#c9524b; text-shadow:0 0 24px rgba(201,82,75,.4)}
.dv-stats{display:grid; gap:6px; min-width:260px; font-size:13px}
.dv-stats div{display:flex; justify-content:space-between; gap:18px;
  border-bottom:1px solid #2c251b; padding-bottom:5px}
.dv-stats span{color:var(--dim)}
.dv-stats b{color:var(--text); font-family:var(--mono)}

/* ══════════ 게임 화면이 절대 사라지지 않게 ══════════
   작은 창에서는 헤더가 접히고 사이드 패널이 남은 높이를 다 가져가
   게임 화면이 0px 이 되는 일이 있었다. 게임 화면에 최소 높이를 주고,
   그걸 못 지키는 창에서는 한 화면에 욱여넣는 대신 페이지를 스크롤시킨다. */
.arena-wrap{min-height:300px}
.modes{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%}
.modes::-webkit-scrollbar{display:none}
.mode{white-space:nowrap}

@media (max-width:820px), (max-height:640px){
  body.app{height:auto; min-height:100vh; overflow:auto}
  .train{grid-template-columns:1fr; grid-template-rows:auto auto}
  .arena-wrap{height:min(72vh, 620px)}
  .side{border-left:0; border-top:1px solid var(--line); max-height:none; overflow:visible}
}
/* 캔버스는 백버퍼 크기를 고유 높이로 보고한다. flex 항목의 기본 min-height:auto 가
   그 값을 바닥으로 삼으면 캔버스가 줄지 못하고 스킬바를 화면 밖으로 밀어낸다.
   백버퍼는 CSS 박스를 따라가므로(syncSize) 둘이 서로를 붙잡는 되먹임이 된다. */
.arena-wrap .arena{flex:1 1 0; min-height:0; height:auto}
.arena-wrap .skillbar{flex:0 0 auto}
/* 아이폰 하단 홈 인디케이터를 피한다 */
.arena-wrap .skillbar{padding-bottom:max(7px, env(safe-area-inset-bottom))}