/* TAECHORA WEB v2 · 펄스 디펜스(PULSE DEFENSE) — 어두운 무대 + 네온 도형. 화면 빛(공격·이퀄라이저)이 살도록 바탕은 거의 검정.
   폰트: 영문·숫자 Black Han Sans(.en), 한글·문장 IBM Plex Sans KR. 그림 파일 없음(아이콘은 SVG 선 그림). 손으로 쓴 원본. */
:root{
  --acc:#36e2ff;--acc2:#ff4fd8;--accGlow:rgba(54,226,255,.28);
  --panelA:rgba(22,14,48,.95);--panelB:rgba(6,5,16,.97);--chip:rgba(12,10,30,.72);
  --line:rgba(170,190,255,.16);--line2:rgba(170,190,255,.3);
  --logoA:#bff6ff;--logoB:#ffffff;--logoC:#ff4fd8;
  --mute:#a9a6cf;--dim:#6f6c98;--coin:#ffd36b;
}
body{background:#05040c}
#cv{background:#05040c}
.btn::before{background:var(--acc);box-shadow:0 10px 30px rgba(54,226,255,.3)}
.btn:hover::before{background:#8ff0ff}
.btn:focus-visible::before{box-shadow:0 0 0 2px #bff6ff}
.btn-line::before{background:rgba(6,5,16,.55);border-color:rgba(191,246,255,.55);box-shadow:none}
.btn-line:hover::before{background:rgba(54,226,255,.1);border-color:#bff6ff}
.kick{background:var(--acc)}
:focus-visible{outline-color:var(--acc)}

/* ---------- HUD ---------- */
.xpbar{position:absolute;left:0;right:0;top:0;height:4px;background:rgba(170,190,255,.1)}
.xpbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#36e2ff,#a35bff,#ff4fd8);box-shadow:0 0 12px rgba(54,226,255,.8);transition:width .15s}
.hud-top{align-items:flex-start}
.wchip{pointer-events:none;display:flex;align-items:baseline;gap:2px 5px;flex-wrap:wrap;width:96px;padding:6px 10px 8px;border-radius:12px;background:var(--chip);border:1px solid var(--line)}
.wchip small{font-size:11px;color:var(--mute);letter-spacing:.08em;white-space:nowrap}
#stT{flex-basis:100%;overflow:hidden;text-overflow:ellipsis}
.wchip b{font-size:26px;line-height:1;color:#fff;text-shadow:0 0 14px rgba(54,226,255,.6)}
.wchip .of{font-size:12px;letter-spacing:0;color:var(--dim)}
.wbar{display:block;width:100%;height:4px;border-radius:2px;background:rgba(170,190,255,.14);overflow:hidden}
.wbar>i{display:block;height:100%;width:0;background:var(--acc)}
.hpbox{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.hpbar{position:relative;height:22px;border-radius:11px;background:rgba(6,5,16,.85);border:1px solid var(--line2);overflow:hidden}
.hpbar>i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#1fb8ff,#36e2ff 60%,#bff6ff);box-shadow:0 0 14px rgba(54,226,255,.7);transition:width .12s}
.hpbar.low>i{background:linear-gradient(90deg,#ff3a5c,#ff8a5c)}
.hpbar span{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.hpbar.hit{animation:hit .25s}
@keyframes hit{30%{box-shadow:0 0 0 3px rgba(255,58,92,.7)}}
.subrow{display:flex;gap:6px;align-items:center;min-width:0}
.lvchip{padding:3px 10px;border-radius:999px;background:rgba(54,226,255,.14);border:1px solid rgba(54,226,255,.45);font-size:15px;line-height:1.1;color:#bff6ff;white-space:nowrap}
.coin{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 6px;border-radius:999px;background:var(--chip);border:1px solid var(--line)}
.coin i{display:block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff3c4,#ffd36b 45%,#d99a2b);box-shadow:0 0 8px rgba(255,211,107,.6)}
.coin b{font-size:16px;line-height:1;color:var(--coin);font-weight:400}
.coin.big i{width:20px;height:20px}
.coin.big b{font-size:24px}
.bossbar{--cc:#ff3a5c;position:absolute;left:50%;transform:translateX(-50%);top:calc(96px + env(safe-area-inset-top));width:min(420px,78vw);padding:5px 10px 8px;border-radius:12px;background:rgba(20,6,14,.78);border:1px solid color-mix(in srgb,var(--cc) 55%,transparent);text-align:center}
.bossbar span{display:block;font-size:13px;letter-spacing:.12em;color:color-mix(in srgb,var(--cc) 45%,#fff);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bossbar>i{display:block;height:9px;border-radius:5px;background:rgba(10,4,8,.9);border:1px solid color-mix(in srgb,var(--cc) 60%,transparent);overflow:hidden}
.bossbar>i>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--cc),color-mix(in srgb,var(--cc) 50%,#fff));box-shadow:0 0 10px var(--cc);transition:width .1s}
.bossbar.shield>i{border-color:#bff6ff;box-shadow:0 0 0 2px rgba(191,246,255,.25)}
.bossbar.shield>i>i{opacity:.55}
.banner{top:22%;text-shadow:0 0 30px var(--acc2),0 0 60px rgba(54,226,255,.5),0 4px 20px rgba(0,0,0,.6)}
.banner small{color:#bff6ff}
.combo{top:calc(140px + env(safe-area-inset-top))}
.combo b{text-shadow:0 0 22px color-mix(in srgb,var(--cc) 70%,transparent)}
.tip{position:absolute;left:50%;bottom:calc(122px + env(safe-area-inset-bottom));transform:translate(-50%,8px);width:min(440px,calc(100vw - 32px));padding:10px 14px;border-radius:14px;background:rgba(8,10,28,.82);border:1px solid rgba(191,246,255,.45);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 24px rgba(54,226,255,.25);font-size:14px;line-height:1.5;color:#e9f9ff;text-align:center;opacity:0;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.tip.on{opacity:1;transform:translate(-50%,0)}
.loadout{position:absolute;left:calc(12px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:5px;pointer-events:none}
.lrow{display:flex;gap:5px}
.slot{width:40px;height:44px;border-radius:9px;background:var(--chip);border:1px solid color-mix(in srgb,var(--cc,#fff) 55%,transparent);color:var(--cc,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 0 12px color-mix(in srgb,var(--cc,#fff) 22%,transparent)}
.slot svg{filter:drop-shadow(0 0 4px currentColor)}
.slot.empty{border:1px dashed var(--line);box-shadow:none}
.slot.evo{border:1.5px solid var(--cc);background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--cc) 30%,transparent),var(--chip) 70%);box-shadow:0 0 16px color-mix(in srgb,var(--cc) 55%,transparent)}
.lrow.sm .slot{width:32px;height:34px;border-radius:8px}
.pips{display:flex;gap:2px}
.pips i{display:block;width:5px;height:3px;border-radius:1px;background:rgba(170,190,255,.22)}
.pips i.on{background:currentColor;box-shadow:0 0 4px currentColor}
.lrow.sm .pips i{width:4px}
.gauge.od{--gc:#ff4fd8}
.gauge.od .val{stroke:var(--gc);filter:drop-shadow(0 0 4px var(--gc))}
.gauge.od span{font-size:17px}
.gauge.od.ready{color:#160418;background:radial-gradient(circle at 50% 42%,#ffd0f4,#ff4fd8 62%,#b0179a);box-shadow:0 0 0 4px rgba(255,79,216,.35),0 0 40px rgba(255,79,216,.7);animation:odReady 1s ease-in-out infinite}
.gauge.od.ready small{color:rgba(22,4,24,.65)}
.gauge.od.wait{color:#fff;background:radial-gradient(circle at 50% 42%,#ff8ae6,#b0179a)}
.gauge.od.on{color:#160418;background:radial-gradient(circle at 50% 42%,#ffffff,#ff8ae6 55%,#ff4fd8);box-shadow:0 0 50px rgba(255,79,216,.9)}
@keyframes odReady{50%{box-shadow:0 0 0 10px rgba(255,79,216,.12),0 0 60px rgba(255,79,216,.85)}}

/* ---------- 보스 등장 ---------- */
.bossin{--cc:#ff3a5c;position:fixed;inset:0;z-index:12;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.bossin .stripe{position:absolute;left:-10%;right:-10%;height:26px;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--cc) 80%,transparent) 0 14px,rgba(0,0,0,.6) 14px 28px);opacity:0;box-shadow:0 0 30px color-mix(in srgb,var(--cc) 60%,transparent)}
.bossin .stripe.top{top:calc(78px + env(safe-area-inset-top))}
.bossin .stripe.bot{bottom:calc(120px + env(safe-area-inset-bottom))}
.bossin .bcard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 26px 16px;background:linear-gradient(90deg,transparent,rgba(10,4,10,.82) 18%,rgba(10,4,10,.82) 82%,transparent);opacity:0;transform:scaleX(.4)}
.bossin .bcard small{font-size:13px;letter-spacing:.24em;color:color-mix(in srgb,var(--cc) 50%,#fff)}
.bossin .bcard b{font-size:clamp(40px,11vw,76px);line-height:1;font-weight:400;color:#fff;transform:skewX(-8deg);text-shadow:0 0 26px var(--cc),0 0 60px var(--cc)}
.bossin .bcard span{font:700 14px var(--f-ui);color:#ffe3ea}
.bossin.on .stripe{animation:bossStripe 2.7s ease both}
.bossin.on .stripe.top{--sx:-60px}
.bossin.on .stripe.bot{--sx:60px}
.bossin.on .bcard{animation:bossCard 2.7s cubic-bezier(.2,.9,.25,1) both}
@keyframes bossStripe{0%{opacity:0;transform:translateX(var(--sx))}12%,80%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(calc(var(--sx) * -1))}}
@keyframes bossCard{0%{opacity:0;transform:scaleX(.4)}14%{opacity:1;transform:scaleX(1.04)}20%,80%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.2)}}

/* ---------- 레벨업 카드 ---------- */
.screen.lvl{z-index:15;background:radial-gradient(ellipse at 50% 50%,rgba(20,12,50,.55),rgba(3,2,10,.82) 75%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.lvl-in{width:min(860px,100%);text-align:center}
.lvl-in h2.en{font-size:46px;margin:10px 0 2px}
.lvl-in h2 b{font-weight:400}
.lvtip{margin:-6px auto 6px;max-width:520px;padding:7px 12px;border-radius:10px;background:rgba(54,226,255,.1);border:1px solid rgba(54,226,255,.35);font-size:13px;line-height:1.5;color:#dff8ff}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 16px}
.card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 14px 14px;border-radius:16px;border:1.5px solid color-mix(in srgb,var(--cc) 70%,transparent);background:linear-gradient(170deg,color-mix(in srgb,var(--cc) 16%,rgba(12,10,30,.95)),rgba(6,5,16,.96) 70%);color:#fff;text-align:center;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 26px color-mix(in srgb,var(--cc) 28%,transparent),inset 0 0 30px color-mix(in srgb,var(--cc) 10%,transparent);animation:cardIn .32s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:var(--d);transition:transform .12s,box-shadow .12s,opacity .12s}
.card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 40px color-mix(in srgb,var(--cc) 55%,transparent),inset 0 0 34px color-mix(in srgb,var(--cc) 18%,transparent);outline:none}
.card:active{transform:scale(.97)}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.92)}}
.card .key{position:absolute;top:8px;left:10px;font-size:13px;color:var(--mute)}
.card .ic{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;color:var(--cc);background:radial-gradient(circle,color-mix(in srgb,var(--cc) 22%,transparent),transparent 70%)}
.card .ic svg{filter:drop-shadow(0 0 6px currentColor)}
.card .nm{font-size:21px;line-height:1.05;letter-spacing:.04em;color:#fff;text-shadow:0 0 14px var(--cc)}
.card .tg{font-size:12px;letter-spacing:.1em;color:var(--cc)}
.card.new .tg{color:#160418;background:var(--cc);padding:2px 8px 1px;border-radius:3px}
.card .ds{font-size:13px;line-height:1.5;color:#d9d6f5;min-height:3em}
.card .stt{font-size:13px;letter-spacing:.03em;color:#fff;opacity:.9}
.card .pips{color:var(--cc);margin-top:2px}
.card .pips i{width:14px;height:5px;border-radius:2px}
.card.evo{border:2px solid var(--cc);background:linear-gradient(170deg,color-mix(in srgb,var(--cc) 30%,rgba(20,14,30,.95)),rgba(10,6,16,.96) 75%);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 34px color-mix(in srgb,var(--cc) 60%,transparent),inset 0 0 40px color-mix(in srgb,var(--cc) 22%,transparent);animation:cardIn .32s cubic-bezier(.2,.9,.25,1.2) both,evoGlow 1.2s ease-in-out .4s infinite}
.card.evo .tg{color:#160418;background:linear-gradient(90deg,#fff3a0,var(--cc),#ff8ae6);padding:2px 10px 1px;border-radius:3px;letter-spacing:.18em}
.card.evo .nm{font-size:23px}
@keyframes evoGlow{50%{box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 56px color-mix(in srgb,var(--cc) 85%,transparent),inset 0 0 48px color-mix(in srgb,var(--cc) 30%,transparent)}}
.cards.banning .card.banno{opacity:.35}
.cards.banning .card.banok{border-color:#ff6b7f;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 30px rgba(255,90,110,.5)}
.cards.banning .card.banok::after{content:"";position:absolute;inset:10px;border-radius:12px;background:linear-gradient(45deg,transparent 47%,rgba(255,90,110,.65) 48% 52%,transparent 53%),linear-gradient(-45deg,transparent 47%,rgba(255,90,110,.65) 48% 52%,transparent 53%);pointer-events:none}
.card.nope{animation:nope .3s}
@keyframes nope{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.lvl-foot{display:flex;flex-direction:column;align-items:center;gap:6px}
.lvl-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.lvl-foot .btn{min-width:0;height:42px;padding:0 18px;gap:8px}
.lvl-foot .btn b{font-size:18px;font-weight:400;color:var(--acc)}
.lvl-foot .btn:disabled{opacity:.4}
#banBtn b{color:#ff8a9a}
#banBtn.on::before{background:rgba(255,90,110,.25);border-color:#ff8a9a}
.lvl-foot .keys{margin:0}
@media (max-width:640px){
  .cards{grid-template-columns:1fr;gap:9px}
  .card{display:grid;grid-template-columns:52px 1fr auto;grid-template-areas:"ic nm tg" "ic ds ds" "ic stt pp";align-items:center;gap:2px 10px;padding:11px 12px;text-align:left}
  .card .ic{grid-area:ic;width:52px;height:52px}
  .card .nm{grid-area:nm;font-size:19px}
  .card.evo .nm{font-size:20px}
  .card .tg{grid-area:tg;justify-self:end;font-size:11px}
  .card .ds{grid-area:ds;min-height:0;font-size:12.5px;line-height:1.4}
  .card .stt{grid-area:stt;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .card .pips{grid-area:pp;justify-self:end;margin:0}
  .card.evo .stt{grid-column:2/-1;white-space:normal}
  .card .pips i{width:9px;height:4px}
  .card .key{display:none}
  .lvl-in h2.en{font-size:38px;margin-top:6px}
  .lvl-in .sub{margin-bottom:6px}
}

/* ---------- 제목 ---------- */
.screen.title{background:radial-gradient(ellipse at 50% 32%,rgba(5,4,12,0) 0,rgba(5,4,12,.35) 55%,rgba(5,4,12,.85) 100%)}
.title .logo{font-size:clamp(50px,14vw,118px);--logoA:#bff6ff;--logoB:#ffffff;--logoC:#ff4fd8;filter:drop-shadow(0 0 24px rgba(54,226,255,.55)) drop-shadow(0 0 60px rgba(255,79,216,.35))}
.title .ko{text-shadow:0 2px 12px rgba(0,0,0,.8)}
.title .tag{text-shadow:0 2px 10px rgba(0,0,0,.8)}
.title .best>div{min-width:96px;background:rgba(10,8,26,.7)}
.btn.cont{flex-direction:column;gap:3px;height:62px}
.btn.cont::before{background:#ff4fd8;box-shadow:0 10px 30px rgba(255,79,216,.35)}
.btn.cont:hover::before{background:#ff8ae6}
.btn.cont small{font-size:12px;letter-spacing:.08em;color:rgba(7,8,14,.7)}
.cta.subs{margin-top:14px;gap:10px 12px}
.cta.subs .btn{min-width:0;height:40px;padding:0 16px;font-size:14px}

/* ---------- 메뉴(스테이지·기지·기록·설정) ---------- */
.screen.menu{background:radial-gradient(ellipse at 50% 18%,rgba(5,4,12,.25),rgba(5,4,12,.9) 55%);place-items:start center}
#set{z-index:25}
#set.top{background:rgba(5,4,12,.95);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.v-in{width:min(640px,100%);display:flex;flex-direction:column;gap:12px;padding-top:calc(6px + env(safe-area-inset-top))}
.v-head{display:flex;align-items:center;gap:12px}
.v-head h2{flex:1;margin:0;font:700 24px var(--f-ui);color:#fff;text-shadow:0 0 18px rgba(54,226,255,.5)}
.recn{font-size:20px;color:#ffe14f;text-shadow:0 0 14px rgba(255,225,79,.5)}
.btn.sm{height:40px;min-width:52px;padding:0 14px}
.v-body{display:flex;flex-direction:column;gap:8px}
.tabs{display:flex;gap:8px;justify-content:center}
.tab{flex:1;max-width:160px;height:36px;border:0;background:none;position:relative;isolation:isolate;font:700 14px var(--f-ui);color:#d9d6f5}
.tab::before{content:"";position:absolute;inset:0 4px;z-index:-1;border-radius:4px;transform:skewX(var(--skew));background:rgba(12,10,30,.8);border:1px solid var(--line2)}
.tab.on{color:#05040c}
.tab.on::before{background:var(--acc);border-color:var(--acc);box-shadow:0 0 18px rgba(54,226,255,.45)}
.v-note{margin:2px 2px 0;font-size:12px;color:var(--mute);line-height:1.5}
.v-note.warn{color:#ffb3c0}
.v-in>.cta{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:2;padding-top:6px}
/* 스테이지 */
.stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:20px}
.stage{--cc:#36e2ff;position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"no sn ss" "no sw sw" "no sb sg";align-items:center;gap:2px 12px;padding:14px 14px 13px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--cc) 55%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--cc) 16%,rgba(12,10,30,.92)),rgba(6,5,16,.95) 70%);color:#fff;text-align:left;box-shadow:0 0 22px color-mix(in srgb,var(--cc) 18%,transparent);transition:transform .12s,box-shadow .12s}
.stage:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 0 32px color-mix(in srgb,var(--cc) 40%,transparent)}
.stage:not(:disabled):active{transform:scale(.98)}
.stage .no{grid-area:no;font-size:46px;line-height:1;color:var(--cc);text-shadow:0 0 18px var(--cc);min-width:34px;text-align:center}
.stage .sn{grid-area:sn;font-size:15px;letter-spacing:.1em;color:color-mix(in srgb,var(--cc) 40%,#fff)}
.stage .sw{grid-area:sw;font:700 17px var(--f-ui);color:#fff}
.stage .sb{grid-area:sb;font-size:12px;color:var(--mute);letter-spacing:.06em}
.stage .sg{grid-area:sg;font-size:11px;color:var(--dim);justify-self:end}
.stage .ss{grid-area:ss;justify-self:end;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--line);color:#dfe6ff}
.stage .sl{grid-column:2/-1;font-size:12px;color:var(--mute)}
.stage.clear .ss{background:var(--cc);border-color:var(--cc);color:#08060f}
.stage.lock{filter:grayscale(.8);opacity:.5;border-style:dashed}
.stage.endless{grid-column:1/-1}
.stage.endless .no{font-size:42px}
/* 기지 */
.v-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mup{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"mi n c" "mi l c" "mi d c";gap:1px 10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--cc) 40%,transparent);background:var(--chip);text-align:left;color:#fff}
.mup .mi{grid-area:mi;color:var(--cc);filter:drop-shadow(0 0 5px currentColor)}
.mup .n{grid-area:n;font:600 13.5px var(--f-ui)}
.mup .l{grid-area:l;font-size:12.5px;color:var(--cc)}
.mup .d{grid-area:d;font-size:11.5px;color:var(--mute)}
.mup .c{grid-area:c;display:flex;align-items:center;gap:4px;padding:6px 9px;border-radius:9px;background:rgba(255,211,107,.14);font-size:16px;color:var(--coin)}
.mup .c::before{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff3c4,#ffd36b 45%,#d99a2b)}
.mup:disabled{opacity:.5}
.mup:not(:disabled):active{transform:scale(.97)}
.arms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.arm{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic nm" "ds ds" "ev ev" "st st";gap:4px 10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--cc) 45%,transparent);background:var(--chip);color:#fff}
.arm .ic{grid-area:ic;color:var(--cc);filter:drop-shadow(0 0 6px currentColor)}
.arm .nm{grid-area:nm;font-size:17px;letter-spacing:.04em}
.arm .ds{grid-area:ds;font-size:12px;line-height:1.45;color:#d9d6f5}
.arm .ev{grid-area:ev;font-size:11.5px;letter-spacing:.03em;color:var(--dim)}
.arm .ev.seen{color:var(--ec)}
.arm .state{grid-area:st;font-size:12px;color:var(--cc)}
.arm .btn{grid-area:st;min-width:0;height:38px;width:100%;gap:8px;font-size:14px}
.arm .btn b{font-size:17px;font-weight:400}
.arm .btn b::before{content:"";display:inline-block;width:12px;height:12px;margin-right:4px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff3c4,#ffd36b 45%,#d99a2b);vertical-align:-1px}
.arm .btn:disabled{opacity:.45}
.arm.lock{border-style:dashed}
.arm.lock .ic,.arm.lock .nm{opacity:.55}
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.skin{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 10px;border-radius:12px;border:1px solid color-mix(in srgb,var(--cc) 40%,transparent);background:var(--chip);color:#fff}
.skin svg{filter:drop-shadow(0 0 8px var(--cc))}
.skin .nm{font-size:16px;letter-spacing:.06em}
.skin .st{font-size:11.5px;color:var(--mute);text-align:center;line-height:1.35}
.skin.on{border:2px solid var(--cc);box-shadow:0 0 22px color-mix(in srgb,var(--cc) 45%,transparent)}
.skin.on .st{color:var(--cc)}
.skin.lock{opacity:.5;border-style:dashed}
.skin.lock svg{filter:grayscale(1)}
/* 기록 */
.achl{display:flex;flex-direction:column;gap:6px;padding-bottom:20px}
.ach{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ai an ar" "ai ad ar";gap:1px 10px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--chip);border:1px solid var(--line);color:var(--dim)}
.ach .ai{grid-area:ai;display:grid;place-items:center}
.ach .an{grid-area:an;font:700 14px var(--f-ui);color:#cfcce8}
.ach .ad{grid-area:ad;font-size:12px;color:var(--mute)}
.ach .ar{grid-area:ar;font-size:13px;font-weight:400;color:var(--dim)}
.ach.ok{border-color:rgba(255,225,79,.45);background:linear-gradient(90deg,rgba(255,225,79,.1),var(--chip) 60%);color:#ffe14f}
.ach.ok .an{color:#fff}
.ach.ok .ar{color:var(--coin)}
.dh{margin:12px 2px 0;font:700 15px var(--f-ui);color:#fff;display:flex;align-items:baseline;gap:8px}
.dh .en{font-size:14px;font-weight:400;color:var(--mute)}
.dex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dx{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic nm" "ic ds" "ic ct";gap:1px 10px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--chip);border:1px solid color-mix(in srgb,var(--cc) 35%,transparent);color:var(--cc)}
.dx>svg,.dx .dic{grid-area:ic;filter:drop-shadow(0 0 6px currentColor)}
.dx .nm{grid-area:nm;font-size:15px;color:#fff;letter-spacing:.04em}
.dx .ds{grid-area:ds;font-size:11.5px;line-height:1.4;color:var(--mute)}
.dx b{grid-area:ct;font-size:12px;font-weight:400;color:var(--cc)}
.dx.unk{color:var(--dim);border-color:var(--line);border-style:dashed}
.dx.unk>svg,.dx.unk .dic{filter:none;opacity:.35}
.songs{margin:4px 0 20px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
.songs li{display:flex;gap:8px;align-items:baseline;padding:6px 10px;border-radius:9px;background:var(--chip);font-size:12.5px;color:#dfe6ff;min-width:0}
.songs li span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.songs li .en{flex:none;width:24px;font-size:12px;color:var(--acc)}
.songs li.unk{color:var(--dim)}
/* 설정 */
.sets{display:flex;flex-direction:column;gap:8px}
.srow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--chip);border:1px solid var(--line)}
.srow .sl{flex:1;min-width:84px;font:700 14px var(--f-ui);color:#fff}
.srow .tog{min-width:92px}
.tog[aria-pressed=true]{border-color:rgba(54,226,255,.6);color:#bff6ff}
.vol{flex:1 1 140px;min-width:120px;height:28px;accent-color:var(--acc);background:none;touch-action:pan-y}
.seg{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.seg button{height:30px;padding:0 12px;border:0;border-radius:999px;background:none;font:600 13px var(--f-ui);color:var(--mute)}
.seg button[aria-pressed=true]{background:var(--acc);color:#05040c}
#tutReset:disabled{opacity:.6}
@media (max-width:460px){.v-grid,.arms,.stages,.dex,.songs{grid-template-columns:1fr}.stage.endless{grid-column:auto}}

/* ---------- 결과·일시정지 ---------- */
.now{margin:0 0 12px;font-size:12px;color:var(--mute)}
#pauseInfo{margin:2px 0 0;font-size:14px;letter-spacing:.08em;color:#bff6ff}
.screen.over .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.screen.over .st.big b{color:var(--coin);text-shadow:0 0 30px rgba(255,211,107,.4)}
@media (max-width:420px){.screen.over .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.achs{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.arow{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,rgba(255,225,79,.16),rgba(12,10,30,.7));border:1px solid rgba(255,225,79,.45);color:#ffe14f;animation:cardIn .4s cubic-bezier(.2,.9,.25,1.2) both}
.arow .an{font:700 13.5px var(--f-ui);color:#fff;text-align:left}
.arow b{font-size:14px;font-weight:400;color:var(--coin)}
.dmg{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.drow{display:grid;grid-template-columns:22px 136px 1fr 44px;align-items:center;gap:8px;color:var(--cc)}
.drow .dic{display:grid;place-items:center}
.drow .dn{font-size:12.5px;text-align:left;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow>i{display:block;height:7px;border-radius:4px;background:rgba(170,190,255,.12);overflow:hidden}
.drow>i>i{display:block;height:100%;background:var(--cc);box-shadow:0 0 8px var(--cc)}
.drow b{font-size:14px;font-weight:400;text-align:right;color:#fff}
.screen.over .cta .btn{min-width:130px}
.btn.next::before{background:#ff4fd8;box-shadow:0 10px 30px rgba(255,79,216,.35)}
.btn.next:hover::before{background:#ff8ae6}
.howto b{color:var(--acc)}
.screen.help .panel-in{max-height:calc(100vh - 40px);overflow:auto}
.tae-fullscreen{font-family:var(--f-ui)}   /* 사이트 공통 전체화면 버튼도 이 페이지 글꼴로(시스템 글꼴 대신) */

@media (min-width:900px){
  .hud-top{left:50%;right:auto;transform:translateX(-50%);width:min(620px,100%)}
  .loadout{left:24px;bottom:24px}
  .slot{width:46px;height:50px}
}
@media (max-height:620px){.card .ds{display:none}.lvtip{display:none}}
/* 스페인어: IBM Plex Sans KR에는 악센트 글자(á é ñ ¿ …)가 없어 기기 글꼴로 섞여 보인다 → 같은 Plex 계열 라틴 원본 IBM Plex Sans를 앞에(유환 2026-10-04). 한글이 섞이면 Plex KR로 넘어간다. */
html:lang(es){--f-ui:"IBM Plex Sans","IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}