/* TAECHORA WEB v2 · 게임 공통 셸 — 버튼·화면·패널·HUD 기본 틀.
   게임마다 자기 CSS에서 :root 변수(--acc, --acc2, --panelA 등)만 바꿔 톤을 입힌다.
   폰트 규칙: 영문·숫자는 Black Han Sans(.en), 한글과 문장은 IBM Plex Sans KR. 손으로 쓴 원본. */
:root{
  --void:#05060b;--ivory:#f4efe3;--text:#f1eaf2;--mute:#ab9cb8;--dim:#716683;--ink:#07080e;
  --gold:#f5b93f;--gold2:#ffdc8f;--mint:#6ff0b8;--red:#ff3346;
  --acc:#ff9a3c;--acc2:#ff5f8a;--accGlow:rgba(255,154,60,.22);
  --panelA:rgba(34,16,48,.94);--panelB:rgba(9,6,16,.96);--chip:rgba(16,9,26,.66);
  --line:rgba(255,226,214,.14);--line2:rgba(255,226,214,.26);
  --logoA:#fff;--logoB:#ffe2c4;--logoC:var(--acc);
  --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}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--void);touch-action:none}
canvas{display:block}
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}

/* ---------- 버튼 ---------- */
.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(10,6,16,.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)}

/* ---------- 화면(제목·일시정지·결과·도움말) ---------- */
.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}
.title-in{text-align:center;max-width:760px;margin-top:4vh}
.logo{display:block;width:fit-content;margin:18px auto 0;font-size:clamp(50px,14vw,124px);line-height:.95;transform:skewX(-8deg);background:linear-gradient(100deg,var(--logoA) 0%,var(--logoB) 38%,var(--logoC) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px var(--accGlow));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,.84);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:var(--chip);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,.72);letter-spacing:.06em;padding:8px 4px}
.back:hover{color:#fff}
.panel-in{width:min(560px,100%);text-align:center;padding:26px 20px 22px;border-radius:22px;background:linear-gradient(160deg,var(--panelA),var(--panelB) 70%);border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px var(--accGlow)}
.screen.pause,.screen.over,.screen.help{background:rgba(5,3,8,.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,var(--logoA),var(--logoB) 40%,var(--logoC));-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}
.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:var(--chip);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}
@media (max-width:420px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.st b{font-size:20px}}
.st{padding:10px 6px;border-radius:12px;background:var(--chip);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:var(--chip);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}
.hud-top{position:absolute;left:12px;right:12px;top:calc(14px + env(safe-area-inset-top));display:flex;align-items:center;gap:10px}
.hud-mid{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1}
.icon-btn{pointer-events:auto;width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);background:var(--chip);display:grid;place-items:center}
.icon-btn svg{width:20px;height:20px;fill:var(--ivory)}
.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:30%;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 var(--acc),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(--logoB);text-shadow:0 2px 10px rgba(0,0,0,.6)}
/* 게이지 원형 버튼(서바이버 NOVA와 같은 꼴) */
.gauge{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%,var(--panelA),rgba(8,5,12,.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)}
.gauge svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gauge .trk{fill:none;stroke:rgba(255,226,214,.14);stroke-width:7}
.gauge .val{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5;transition:stroke-dashoffset .15s}
.gauge span{position:relative;font-size:18px;letter-spacing:.06em}
.gauge small{position:relative;font-size:10px;letter-spacing:.1em;color:var(--dim)}
.gauge.ready{color:var(--ink);background:radial-gradient(circle at 50% 42%,#ffe7a8,var(--gold) 62%,#c9861c);animation:gaugeReady 1s ease-in-out infinite;box-shadow:0 0 0 4px rgba(245,185,63,.35),0 0 40px rgba(245,185,63,.6)}
.gauge.ready small{color:rgba(7,8,14,.6)}
@keyframes gaugeReady{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){
  .gauge{width:104px;height:104px;right:28px;bottom:28px}
  .hud-top{left:24px;right:24px}
  .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}
}