:root {
  --bg: #0d0908;
  --panel: rgba(28, 19, 17, 0.94);
  --panel2: #241815;
  --line: #4a2e24;
  --ember: #ff7a2f;
  --amber: #ffc04d;
  --gold: #ffd166;
  --crimson: #e8434b;
  --ash: #c9b8ad;
  --mute: #8f7a6f;
  --text: #f6e9dd;
  --cool: #7fe3ff;
  --title: 'Black Han Sans', 'Noto Sans KR', sans-serif;
  --body: 'Noto Sans KR', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--body); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#cv { position: fixed; inset: 0; display: block; }
button { font-family: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ───── HUD ───── */
.hud { position: fixed; inset: 0; pointer-events: none; padding-top: var(--safe-t); }
.xpbar { position: relative; height: 16px; background: rgba(10, 6, 5, 0.85); border-bottom: 1px solid #3a2219; }
.xpbar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #2b8fd6, #7fe3ff); box-shadow: 0 0 12px rgba(127, 227, 255, 0.6); transition: width 0.12s; }
.xpbar span { position: absolute; right: 8px; top: 0; font: 900 11px/16px var(--body); color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: 0.05em; }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; padding: 8px 10px; }
.slots { display: flex; flex-direction: column; gap: 4px; }
.slots .row { display: flex; gap: 3px; flex-wrap: wrap; }
.slot { position: relative; width: 30px; height: 30px; display: grid; place-items: center; font-size: 17px; background: rgba(20, 12, 10, 0.78); border: 1px solid #5a3626; border-radius: 7px; }
.slot.p { width: 24px; height: 24px; font-size: 13px; border-color: #3d3a52; border-radius: 6px; }
.slot b { position: absolute; right: -3px; bottom: -4px; font: 900 9px/1 var(--body); background: #1a0f0c; color: var(--amber); border: 1px solid #5a3626; border-radius: 4px; padding: 1px 3px; }
.slot.evo { border-color: #ffd166; box-shadow: 0 0 10px rgba(255, 209, 102, 0.5); }
.slot.evo b { background: #ffd166; color: #1a0f0c; }
.recipes { display: grid; gap: 4px; margin-top: 6px; font-size: 12px; }
.recipes span { padding: 5px 9px; border-radius: 8px; background: #1a110f; border: 1px solid #3a2520; }
.recipes b { color: var(--amber); }
.slot.max b { background: var(--ember); color: #1a0f0c; }
.timer { text-align: center; text-shadow: 0 2px 6px #000; }
.timer strong { display: block; font: 400 34px/1 var(--title); letter-spacing: 0.04em; color: #fff; }
.timer small { font-size: 11px; color: var(--ash); letter-spacing: 0.1em; }
.hud-right { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.stat { font-size: 13px; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.stat b { font-weight: 900; }
.icon-btn { pointer-events: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(20, 12, 10, 0.8); font-weight: 900; }
.bossbar { position: absolute; left: 50%; top: calc(var(--safe-t) + 80px); transform: translateX(-50%); width: min(520px, 86vw); text-align: center; }
.bossbar span { font: 400 16px var(--title); color: var(--gold); text-shadow: 0 2px 6px #000; letter-spacing: 0.06em; }
.bossbar div { height: 10px; margin-top: 4px; background: rgba(0, 0, 0, 0.7); border: 1px solid #6a2a1a; border-radius: 6px; overflow: hidden; }
.bossbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b5172a, #ff7a2f); transition: width 0.1s; }

.sound-btn { position: fixed; z-index: 30; right: 10px; bottom: calc(10px + var(--safe-b)); width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: rgba(20, 12, 10, 0.8); font-size: 18px; }
body.playing .sound-btn { display: none; }

/* ───── 토스트 ───── */
.toast { position: fixed; left: 50%; top: calc(var(--safe-t) + 130px); transform: translate(-50%, -10px); opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; z-index: 15;
  padding: 8px 16px; border-radius: 999px; background: rgba(20, 10, 8, 0.88); border: 1px solid var(--line); font-weight: 700; font-size: 14px; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn { border-color: #b5172a; color: #ffb3a8; }
.toast.elite { border-color: #a07a1a; color: var(--gold); }
.toast.boss { border-color: var(--ember); color: var(--amber); font-family: var(--title); font-weight: 400; font-size: 18px; }

/* ───── 가상 스틱 ───── */
.joy { position: fixed; z-index: 5; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(255, 170, 90, 0.35); background: radial-gradient(circle, rgba(255, 122, 47, 0.08), rgba(255, 122, 47, 0.02)); pointer-events: none; }
.joy i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffb37a, #ff7a2f 60%, #a3401a); box-shadow: 0 0 18px rgba(255, 122, 47, 0.55); }

/* ───── 화면 (타이틀·모달) ───── */
.screen { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: calc(var(--safe-t) + 56px) 16px calc(var(--safe-b) + 16px); overflow-y: auto; touch-action: pan-y;
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 18, 10, 0.35), rgba(8, 5, 4, 0.82) 75%); }
.screen.modal { background: rgba(8, 5, 4, 0.66); backdrop-filter: blur(2px); }
.screen.title { background: radial-gradient(ellipse at 50% 45%, rgba(30, 12, 6, 0.25), rgba(8, 5, 4, 0.78) 70%); }
.back-btn { position: fixed; left: 12px; top: calc(var(--safe-t) + 10px); z-index: 25; padding: 8px 14px; border-radius: 10px; color: var(--ash); text-decoration: none; font-size: 14px; font-weight: 700; background: rgba(20, 12, 10, 0.8); border: 1px solid var(--line); }
.back-btn:hover { color: #fff; border-color: var(--ember); }
.screen:not(.title) .back-btn { display: none; }
.panel { width: min(560px, 100%); animation: rise 0.35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(0.97); } }

/* 타이틀 */
.title-wrap { text-align: center; }
.eyebrow { font-size: 11px; letter-spacing: 0.32em; color: var(--mute); font-weight: 700; }
.logo { margin: 10px 0 0; font: 400 clamp(52px, 13vw, 92px)/1 var(--title); letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff3c4 0%, #ffc04d 35%, #ff7a2f 65%, #b5172a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 110, 40, 0.45)) drop-shadow(0 4px 0 #2a0d06); }
.logo-en { margin-top: 6px; font-weight: 900; letter-spacing: 0.55em; font-size: 12px; color: var(--ember); padding-left: 0.55em; }
.tagline { margin: 18px auto 26px; color: var(--ash); line-height: 1.7; font-size: 15px; max-width: 360px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel2); font-weight: 700; font-size: 15px; transition: transform 0.12s, border-color 0.12s, background 0.12s; }
.btn:hover { border-color: var(--ember); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { min-width: 220px; min-height: 58px; font: 400 22px var(--title); letter-spacing: 0.08em; color: #2a0d06; border: 0;
  background: linear-gradient(180deg, #ffd27a, #ff7a2f 70%, #d9481f); box-shadow: 0 6px 0 #7a2410, 0 0 30px rgba(255, 122, 47, 0.45); }
.btn.primary:hover { box-shadow: 0 7px 0 #7a2410, 0 0 44px rgba(255, 122, 47, 0.65); }
.btn-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.best { margin-top: 22px; font-size: 13px; color: var(--mute); }
.best b { color: var(--amber); }
.keys { margin-top: 18px; font-size: 12px; color: var(--mute); line-height: 1.8; }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 5px; border: 1px solid #5a3a2c; border-bottom-width: 2px; background: #1e1412; font: 700 11px var(--body); color: var(--ash); }

/* 공용 패널 */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.card h2 { margin: 0 0 4px; font: 400 30px var(--title); text-align: center; letter-spacing: 0.04em; color: var(--amber); text-shadow: 0 0 18px rgba(255, 122, 47, 0.4); }
.card .sub { text-align: center; color: var(--mute); font-size: 13px; margin: 0 0 16px; }

/* 레벨 업 카드 */
.choices { display: grid; gap: 10px; }
.choice { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid #5a3626; background: linear-gradient(180deg, #2a1c18, #1d1311); transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.choice:hover, .choice:focus-visible { border-color: var(--ember); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ember), 0 8px 24px rgba(255, 122, 47, 0.25); outline: none; }
.choice .ic { width: 56px; height: 56px; display: grid; place-items: center; font-size: 30px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #4a2a1c, #1a0f0c); border: 1px solid #5a3626; }
.choice.passive .ic { background: radial-gradient(circle at 50% 40%, #2c2a44, #12101c); border-color: #3d3a52; }
.choice .nm { font-weight: 900; font-size: 16px; }
.choice .tg { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #3a2219; color: var(--amber); vertical-align: 2px; }
.choice .tg.new { background: var(--ember); color: #1a0a05; }
.choice .ty { font-size: 11px; color: var(--mute); margin-left: 4px; }
.choice .tx { margin-top: 4px; font-size: 13px; color: var(--ash); line-height: 1.45; }
.choice .num { position: absolute; right: 10px; top: 8px; font-size: 11px; color: #6a5248; font-weight: 900; }

/* 결과·일시정지 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 16px; }
.stats div { background: #1a110f; border: 1px solid #3a2520; border-radius: 12px; padding: 10px 6px; text-align: center; }
.stats small { display: block; font-size: 11px; color: var(--mute); }
.stats b { font: 400 22px var(--title); color: #fff; letter-spacing: 0.02em; }
.dmg-list { display: grid; gap: 6px; margin-bottom: 16px; }
.dmg-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.dmg-row .bar { height: 6px; border-radius: 3px; background: #2a1c18; overflow: hidden; margin-top: 3px; }
.dmg-row .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--amber)); }
.dmg-row .v { font-weight: 900; color: var(--amber); font-variant-numeric: tabular-nums; }
.build { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 16px; }
.build span { padding: 4px 9px; border-radius: 999px; background: #1a110f; border: 1px solid #3a2520; font-size: 12px; }
.toggles { display: grid; gap: 8px; margin: 6px 0 16px; }
.toggle { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: #1a110f; border: 1px solid #3a2520; font-size: 14px; }
.toggle b { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #3a2219; color: var(--mute); }
.toggle.on b { background: var(--ember); color: #1a0a05; }
.help { font-size: 14px; line-height: 1.75; color: var(--ash); }
.help h3 { margin: 14px 0 4px; font-size: 14px; color: var(--amber); }
.help p { margin: 0; }
.chest-get { display: grid; gap: 8px; margin: 8px 0 16px; }
.chest-get .choice { cursor: default; }

.choice .hint { margin-top: 5px; font-size: 11px; font-weight: 700; color: #ffcf70; opacity: 0.85; }
.choice.evo { border-color: #ffd166; background: linear-gradient(180deg, #4a3214, #24160c); box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.5), 0 0 30px rgba(255, 190, 80, 0.35); }
.choice.evo .ic { background: radial-gradient(circle at 50% 40%, #a8701c, #3a2208); border-color: #ffd166; }
.choice.evo .tg { background: linear-gradient(90deg, #ffd166, #ff7a2f); color: #1a0a05; }
.chest-get .choice { opacity: 0; animation: cardIn 0.45s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(0.92); } to { opacity: 1; transform: none; } }
.chest-stage { position: relative; height: 96px; display: grid; place-items: center; margin-bottom: 4px; }
.chest-icon { position: relative; font-size: 62px; animation: chestShake 0.5s ease-in-out, pop 0.5s 0.5s cubic-bezier(.2, 1.6, .4, 1) both; filter: drop-shadow(0 0 24px rgba(255, 200, 90, 0.8)); }
.chest-card.big .chest-icon { filter: drop-shadow(0 0 28px rgba(140, 230, 255, 0.9)); }
.rays { position: absolute; width: 190px; height: 190px; border-radius: 50%; opacity: 0; animation: rays 6s linear infinite, fadeIn 0.4s 0.5s forwards;
  background: repeating-conic-gradient(from 0deg, rgba(255, 200, 90, 0.28) 0deg 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); }
.chest-card.has-evo .rays { background: repeating-conic-gradient(from 0deg, rgba(255, 220, 120, 0.5) 0deg 8deg, transparent 8deg 22deg); }
@keyframes chestShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg) scale(1.05); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-8deg) scale(1.08); } 80% { transform: rotate(6deg); } }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes pop { from { transform: scale(0.4); } }

@media (max-width: 520px) {
  .timer strong { font-size: 28px; }
  .hud-top { padding: 6px 8px; grid-template-columns: 1fr auto 1fr; }
  .slot { width: 26px; height: 26px; font-size: 15px; }
  .slot.p { width: 21px; height: 21px; font-size: 11px; }
  .stat { font-size: 12px; }
  .hud-right { gap: 6px; flex-wrap: wrap; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 18px 14px; }
  .choice { grid-template-columns: 48px 1fr; padding: 10px 12px; }
  .choice .ic { width: 48px; height: 48px; font-size: 26px; }
  .bossbar { top: calc(var(--safe-t) + 150px); }
  .toast { top: calc(var(--safe-t) + 196px); font-size: 13px; }
}

/* ───── 캐릭터·상점 ───── */
.gold-chip { color: var(--gold); font-weight: 900; }
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.char { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 10px 12px; border-radius: 14px; border: 1px solid #4a2e24; background: linear-gradient(180deg, #2a1c18, #1a110f); text-align: center; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.char:hover { transform: translateY(-2px); border-color: #8a4a2a; }
.char.sel { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 0 24px rgba(255, 122, 47, 0.3); }
.char.locked { opacity: 0.55; filter: grayscale(0.7); cursor: not-allowed; }
.char .av { width: 58px; height: 58px; display: grid; place-items: center; font-size: 28px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--c1), var(--c2)); box-shadow: 0 0 18px rgba(255, 122, 47, 0.25); }
.char .cn { font-weight: 900; font-size: 15px; margin-top: 4px; }
.char .cw { font-size: 12px; color: var(--amber); }
.char .cp { font-size: 11.5px; color: var(--ash); line-height: 1.45; }
.char .cp i { font-style: normal; color: var(--mute); }
.shop { display: grid; gap: 7px; margin-bottom: 16px; max-height: min(56vh, 520px); overflow-y: auto; padding-right: 2px; }
.shop-item { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; border: 1px solid #3a2520; background: #1a110f; text-align: left; transition: border-color 0.12s; }
.shop-item:hover { border-color: var(--ember); }
.shop-item .si { font-size: 22px; text-align: center; }
.shop-item .sn { font-weight: 700; font-size: 14px; }
.shop-item .sn small { display: block; font-weight: 400; font-size: 11.5px; color: var(--mute); }
.shop-item .pips { display: flex; gap: 4px; }
.shop-item .pips i { width: 8px; height: 8px; border-radius: 2px; background: #3a2520; transform: rotate(45deg); }
.shop-item .pips i.on { background: var(--ember); box-shadow: 0 0 6px var(--ember); }
.shop-item .sc { min-width: 64px; text-align: right; font-weight: 900; font-size: 13px; color: var(--gold); }
.shop-item.poor .sc { color: #7a5a4a; }
.shop-item.max { border-color: #5a4a1a; }
.shop-item.max .sc { color: var(--mute); }
.earn { text-align: center; margin: -4px 0 10px; font-size: 14px; }
.earn b { color: var(--gold); font-size: 18px; }
.earn small { display: block; color: var(--mute); font-size: 11.5px; margin-top: 2px; }
.unlock { text-align: center; margin: 0 0 10px; padding: 8px; border-radius: 10px; background: rgba(255, 209, 102, 0.1); border: 1px solid #6a5420; font-size: 14px; }
.unlock b { color: var(--gold); }
@media (max-width: 520px) {
  .chars { grid-template-columns: 1fr 1fr; gap: 8px; }
  .char .av { width: 48px; height: 48px; font-size: 23px; }
  .shop-item { grid-template-columns: 30px 1fr auto; padding: 8px 10px; }
  .shop-item .pips { grid-column: 2; }
  .shop-item .sc { grid-row: 1 / span 2; grid-column: 3; }
}
.shop, .screen { scrollbar-width: thin; scrollbar-color: #5a3626 transparent; }
.shop::-webkit-scrollbar { width: 6px; }
.shop::-webkit-scrollbar-thumb { background: #5a3626; border-radius: 3px; }

/* ───── 지역·기록 ───── */
.btn.small { min-height: 40px; padding: 0 16px; font-size: 13px; }
.stages { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.stage { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid #4a2e24; background: linear-gradient(160deg, #2e1a12, #160e0c); transition: border-color 0.12s, box-shadow 0.12s; }
.stage.st-frost { border-color: #2a3c52; background: linear-gradient(160deg, #142235, #0b1018); }
.stage.sel { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 0 22px rgba(255, 122, 47, 0.28); }
.stage.st-frost.sel { border-color: #7fd3ff; box-shadow: 0 0 0 1px #7fd3ff, 0 0 22px rgba(127, 211, 255, 0.3); }
.stage.locked { opacity: 0.5; cursor: not-allowed; }
.stage .sti { font-size: 22px; }
.stage .stn { font-weight: 900; font-size: 15px; }
.stage .std { font-size: 11.5px; color: var(--ash); line-height: 1.45; }
.stage .stb { font-size: 11px; color: var(--amber); margin-top: 2px; }
.toggle.curse { width: 100%; text-align: left; }
.toggle.curse small { display: block; font-size: 11px; color: var(--mute); font-weight: 400; margin-top: 2px; }
.toggle.curse.on { border-color: #8a1f2a; background: #2a0f12; }
.toggle.curse.on b { background: #e8434b; color: #fff; }
.rec-best { display: grid; gap: 6px; margin-bottom: 14px; }
.rec-best div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #1a110f; border: 1px solid #3a2520; font-size: 13px; }
.rec-best b { color: var(--amber); font-weight: 700; text-align: right; }
.bh { margin: 0 0 8px; font-size: 15px; color: var(--amber); }
.bh small { color: var(--mute); font-weight: 400; margin-left: 6px; }
.bestiary { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-bottom: 16px; max-height: min(40vh, 340px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #5a3626 transparent; }
.beast { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; border-radius: 10px; background: #1a110f; border: 1px solid #3a2520; text-align: center; }
.beast.boss { border-color: #6a5420; }
.beast img { width: 48px; height: 48px; }
.beast span { font-size: 11px; font-weight: 700; line-height: 1.3; }
.beast small { font-size: 10px; color: var(--mute); min-height: 12px; }
.beast.unseen img { filter: brightness(0) opacity(0.5); }
@media (max-width: 520px) {
  .stages { grid-template-columns: 1fr; }
}