/* TAECHORA WEB v2 · SURVIVOR — 스웜 시안 톤(진홍 배경·분홍 적 떼·민트 보석·흰 코어).
   폰트 규칙: 영문·숫자는 Black Han Sans(.en), 한글과 문장은 IBM Plex Sans KR. */
:root{
  --void:#05060b;--crimson:#1a0714;--panel:#140b16;--line:rgba(255,214,228,.14);--line2:rgba(255,214,228,.26);
  --ivory:#f4efe3;--text:#f1e8ee;--mute:#b79aa8;--dim:#7d6572;--ink:#07080e;
  --gold:#f5b93f;--gold2:#ffdc8f;--pink:#ff4f7b;--rose:#ff8fb0;--mint:#6ff0b8;--teal:#48e0c8;--red:#ff3346;
  --f-disp:"Black Han Sans","IBM Plex Sans KR",sans-serif;
  --f-ui:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --skew:-12deg;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--void);color:var(--text);font:400 15px/1.55 var(--f-ui);-webkit-text-size-adjust:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;word-break:keep-all}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--void);touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.en{font-family:var(--f-disp);font-weight:400;letter-spacing:.02em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;min-width:150px;padding:0 28px;font:700 16px/1 var(--f-ui);color:var(--ink);white-space:nowrap;border:0;background:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;transform:skewX(var(--skew));background:var(--gold);box-shadow:0 10px 30px rgba(245,185,63,.28);transition:background .15s,transform .15s}
.btn:hover::before{background:var(--gold2)}
.btn:active::before{transform:skewX(var(--skew)) scale(.97)}
.btn .en{font-size:20px;letter-spacing:.06em}
.btn-line{color:var(--ivory)}
.btn-line::before{background:rgba(12,5,10,.45);border:1.5px solid rgba(244,239,227,.5);box-shadow:none}
.btn-line:hover::before{background:rgba(244,239,227,.1);border-color:var(--ivory)}
.btn:focus-visible{outline:none}.btn:focus-visible::before{box-shadow:0 0 0 2px var(--gold2)}
.cta{display:flex;flex-wrap:wrap;gap:14px 16px;justify-content:center;align-items:center}
.cta.col{flex-direction:column;align-items:stretch;max-width:320px;margin:0 auto}
.kick{display:inline-block;font-size:12px;line-height:1;letter-spacing:.08em;color:var(--ink);background:var(--gold);padding:5px 10px 4px;transform:skewX(var(--skew))}
.kick>span{display:inline-block;transform:skewX(12deg)}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));overflow:auto}
.screen.title{background:radial-gradient(90% 60% at 50% 42%,rgba(26,7,20,.15),rgba(5,6,11,.72) 78%)}
.title-in{text-align:center;max-width:760px;margin-top:4vh}
.logo{display:inline-block;margin:18px 0 0;font-size:clamp(50px,14vw,124px);line-height:.95;transform:skewX(-8deg);background:linear-gradient(100deg,#fff 0%,#ffe3ec 38%,var(--pink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px rgba(255,60,110,.45));padding:0 .12em}
.title .ko{margin:14px 0 0;font-size:19px;font-weight:700;color:#fff}
.title .tag{margin:6px 0 0;color:rgba(244,239,227,.82);font-size:15px}
.best{display:flex;justify-content:center;gap:10px;margin:22px 0 24px}
.best>div{min-width:120px;padding:10px 16px;border-radius:12px;background:rgba(20,8,16,.66);border:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.best small{display:block;font-size:11px;color:var(--mute);letter-spacing:.08em}
.best b{display:block;font-size:24px;line-height:1.1;color:#fff;margin-top:3px}
.keys{margin:20px 0 0;color:var(--mute);font-size:13px}
.season{margin:6px 0 0;color:var(--dim);font-size:12px}
.back{position:fixed;top:calc(14px + env(safe-area-inset-top));left:16px;z-index:21;font-size:14px;color:rgba(244,239,227,.7);letter-spacing:.06em;padding:8px 4px}
.back:hover{color:#fff}
.panel-in,.lu-in{width:min(560px,100%);text-align:center}
.panel-in{padding:26px 20px 22px;border-radius:22px;background:linear-gradient(160deg,rgba(40,12,28,.94),rgba(10,6,12,.96) 70%);border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(255,79,123,.18)}
.screen.pause,.screen.over,.screen.help{background:rgba(5,3,6,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.screen h2{margin:10px 0 6px;font:700 24px/1.3 var(--f-ui);color:#fff}
.screen h2.en{font:400 44px/1 var(--f-disp);letter-spacing:.03em;transform:skewX(-8deg);background:linear-gradient(100deg,#fff,#ffd0dd 40%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .05em}
.sub{margin:0 0 14px;color:var(--mute);font-size:13px}
.own{margin:14px 0 0;color:var(--mute);font-size:12px;line-height:1.7}
.own b{color:var(--text);font-weight:600}

/* ---------- level up ---------- */
.screen.levelup{background:rgba(5,3,6,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 12px 14px;border-radius:16px;background:linear-gradient(170deg,rgba(46,14,32,.96),rgba(14,7,14,.96));border:1.5px solid var(--line2);color:var(--text);transition:transform .14s,border-color .14s,box-shadow .14s;animation:cardIn .32s cubic-bezier(.2,.8,.2,1) both}
.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.97)}}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 30px rgba(245,185,63,.22);outline:none}
.card .tag{align-self:stretch;font:700 11px/1 var(--f-ui);letter-spacing:.02em;color:var(--mute)}
.card .tag.new{color:var(--mint)}.card .tag.evo{color:var(--gold)}
.card .ic{width:58px;height:58px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 40%,rgba(255,79,123,.28),rgba(20,8,16,.8) 70%);border:1px solid var(--line)}
.card .ic svg{width:40px;height:40px}
.card .nm{font:700 16px/1.25 var(--f-ui);color:#fff}
.card .ds{font-size:12.5px;line-height:1.5;color:var(--mute);min-height:38px}
.card .pips{display:flex;gap:4px}
.card .pips i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:rgba(255,214,228,.16)}
.card .pips i.on{background:var(--pink)}
.card .pips i.next{background:var(--gold);box-shadow:0 0 8px rgba(245,185,63,.8)}
.card .key{position:absolute;top:8px;right:10px;font-size:11px;color:var(--dim)}
.card.evo{border-color:rgba(245,185,63,.7);background:linear-gradient(170deg,rgba(70,40,10,.96),rgba(20,10,8,.96));box-shadow:0 0 34px rgba(245,185,63,.25)}
.card.evo .ic{background:radial-gradient(circle at 50% 40%,rgba(245,185,63,.4),rgba(30,16,8,.8) 70%)}
@media (max-width:560px){
  .cards{grid-template-columns:1fr;gap:9px}
  .card{flex-direction:row;text-align:left;gap:12px;padding:12px 14px}
  .card .tag{position:absolute;top:10px;right:12px;width:auto;text-align:right}
  .card .ic{width:50px;height:50px;flex:none}
  .card .ic svg{width:34px;height:34px}
  .card .txt{flex:1;min-width:0}
  .card .ds{min-height:0;margin-top:2px}
  .card .pips{margin-top:6px}
  .card .key{display:none}
  .card .txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
}
@media (min-width:561px){.card .txt{display:contents}}

/* ---------- pause / over / help ---------- */
.toggles{display:flex;gap:10px;justify-content:center;margin:16px 0 18px}
.tog{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:rgba(20,8,16,.7);font:600 13px var(--f-ui);color:var(--text)}
.tog[aria-pressed=false]{color:var(--dim);text-decoration:line-through}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 12px}
.st{padding:10px 6px;border-radius:12px;background:rgba(20,8,16,.7);border:1px solid var(--line)}
.st small{display:block;font-size:10px;color:var(--mute);letter-spacing:.06em}
.st b{display:block;font-size:22px;line-height:1.1;margin-top:3px;color:#fff}
.st.big{grid-column:1/-1;padding:14px}
.st.big b{font-size:46px;color:var(--gold2);text-shadow:0 0 30px rgba(245,185,63,.35)}
.newbest{margin:2px 0 0;font:700 14px var(--f-ui);color:var(--mint)}
.note{margin:4px 0 18px;color:var(--mute);font-size:12.5px}
.howto{list-style:none;margin:14px 0 20px;padding:0;text-align:left;display:flex;flex-direction:column;gap:10px}
.howto li{padding:12px 14px;border-radius:12px;background:rgba(20,8,16,.7);border:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--text)}
.howto b{display:block;color:var(--gold2);font-size:13px;margin-bottom:2px}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.xp{position:absolute;left:0;right:0;top:0;height:calc(5px + env(safe-area-inset-top));background:rgba(255,255,255,.06)}
.xp i{position:absolute;left:0;bottom:0;height:5px;width:0;background:linear-gradient(90deg,var(--teal),var(--mint));box-shadow:0 0 12px rgba(111,240,184,.7);transition:width .12s}
.hud-top{position:absolute;left:12px;right:12px;top:calc(14px + env(safe-area-inset-top));display:flex;align-items:center;gap:10px}
.lv{display:flex;align-items:baseline;gap:4px;padding:6px 12px 5px;border-radius:10px;background:rgba(14,6,12,.62);border:1px solid var(--line)}
.lv small{font-size:11px;color:var(--mint)}
.lv b{font-size:20px;line-height:1;color:#fff}
.hud-mid{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1}
.time{font-size:30px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.score{margin-top:4px;font-size:14px;color:var(--gold2);letter-spacing:.04em}
.icon-btn{pointer-events:auto;width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);background:rgba(14,6,12,.62);display:grid;place-items:center}
.icon-btn svg{width:20px;height:20px;fill:var(--ivory)}
.hp{position:absolute;left:50%;top:calc(70px + env(safe-area-inset-top));width:min(220px,46vw);height:6px;transform:translateX(-50%);border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}
.hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3346,#ff8fb0);transition:width .15s}
.hp.low i{animation:hpLow .6s ease-in-out infinite alternate}
@keyframes hpLow{to{filter:brightness(1.8)}}
.boss{position:absolute;left:50%;top:calc(84px + env(safe-area-inset-top));width:min(420px,78vw);transform:translateX(-50%);display:flex;align-items:center;gap:8px}
.boss small{font-size:12px;color:var(--red);letter-spacing:.1em}
.boss .bar{flex:1;height:8px;border-radius:9px;background:rgba(255,51,70,.18);overflow:hidden;border:1px solid rgba(255,51,70,.5)}
.boss i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3346,#ffae1f)}
.combo{position:absolute;right:14px;top:calc(106px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-end;line-height:1;opacity:0;transition:opacity .2s;--cc:#fff}
.combo.on{opacity:1}
.combo b{font-size:40px;color:var(--cc);text-shadow:0 0 24px color-mix(in srgb,var(--cc) 60%,transparent);transform:skewX(-8deg)}
.combo span{font-size:12px;color:var(--mute);letter-spacing:.14em;margin-top:2px}
.combo em{font-style:normal;font-size:14px;color:var(--gold2);margin-top:3px}
.combo.pop b{animation:pop .18s ease-out}
@keyframes pop{from{transform:skewX(-8deg) scale(1.35)}}
.banner{position:absolute;left:0;right:0;top:34%;text-align:center;font:400 clamp(34px,9vw,64px)/1 var(--f-disp);letter-spacing:.04em;color:#fff;opacity:0;transform:skewX(-8deg) scale(.9);text-shadow:0 0 30px rgba(255,79,123,.8),0 4px 20px rgba(0,0,0,.6);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.banner.on{opacity:1;transform:skewX(-8deg) scale(1)}
.banner small{display:block;margin-top:10px;font:700 15px var(--f-ui);letter-spacing:0;color:var(--rose);text-shadow:0 2px 10px rgba(0,0,0,.6)}
.nova{pointer-events:auto;position:absolute;right:calc(18px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));width:92px;height:92px;border:0;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(40,12,28,.9),rgba(10,4,8,.92) 70%);display:grid;place-items:center;align-content:center;gap:0;color:var(--mute);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.nova svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.nova .trk{fill:none;stroke:rgba(255,214,228,.14);stroke-width:7}
.nova .val{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5;transition:stroke-dashoffset .15s}
.nova span{position:relative;font-size:18px;letter-spacing:.06em}
.nova small{position:relative;font-size:10px;letter-spacing:.1em;color:var(--dim)}
.nova.cool .val{stroke:#6b5a66}
.nova.cool span{color:var(--dim)}
.nova.ready{color:var(--ink);background:radial-gradient(circle at 50% 42%,#ffe7a8,var(--gold) 62%,#c9861c);animation:novaReady 1s ease-in-out infinite;box-shadow:0 0 0 4px rgba(245,185,63,.35),0 0 40px rgba(245,185,63,.6)}
.nova.ready small{color:rgba(7,8,14,.6)}
@keyframes novaReady{50%{box-shadow:0 0 0 10px rgba(245,185,63,.12),0 0 60px rgba(245,185,63,.85)}}
.pc-only{}
.is-touch .pc-only{display:none!important}
.touch-only{display:none}
.is-touch .touch-only{display:inline}
@media (min-width:900px){
  .nova{width:104px;height:104px;right:28px;bottom:28px}
  .time{font-size:36px}
  .hud-top{left:24px;right:24px}
  .hp{top:calc(78px + env(safe-area-inset-top))}
  .boss{top:calc(92px + env(safe-area-inset-top))}
  .combo{top:calc(114px + env(safe-area-inset-top));right:24px}
}
@media (max-height:520px){   /* 가로로 눕힌 휴대폰: 제목 화면을 한 화면에 */
  .title-in{margin-top:0}
  .logo{margin-top:8px;font-size:clamp(40px,12vh,68px)}
  .title .ko{margin-top:6px;font-size:16px}
  .title .tag,.season{display:none}
  .best{margin:10px 0 12px}
  .best>div{padding:6px 12px}
  .best b{font-size:19px}
  .keys{margin-top:10px}
  .btn{height:46px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}