/* =========================================================
   게임 화면 · 시트 · 다이얼로그 · 토스트
   ========================================================= */

/* ---------- 게임 방법 시트 ---------- */
.sheet{position:fixed;inset:0;z-index:40}
.sheet-backdrop{position:absolute;inset:0;background:rgba(5,6,14,.6);opacity:0;transition:opacity .3s}
.sheet.open .sheet-backdrop{opacity:1}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;max-height:calc(100% - var(--sat) - 24px);
  display:flex;flex-direction:column;background:var(--bg-2);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.5),inset 0 1px 0 var(--line-2);transform:translateY(100%);transition:transform .38s var(--ease)}
.sheet.open .sheet-panel{transform:none}
.sheet.dragging .sheet-panel{transition:none}
.sheet-grip{flex:none;height:40px;display:grid;place-items:center;touch-action:none}
.sheet-x{position:absolute;top:8px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--s2);color:var(--t2);box-shadow:inset 0 0 0 1px var(--line);transition:transform .15s}
.sheet-x:active{transform:scale(.9)}
.sheet-x svg{width:18px;height:18px}
.sheet-grip i{width:40px;height:5px;border-radius:9px;background:var(--line-2)}
.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 20px calc(var(--sab) + 20px);overscroll-behavior:contain;scrollbar-width:none}
.sheet-body::-webkit-scrollbar{display:none}

.gh{display:flex;gap:16px;align-items:center;padding:6px 0 4px}
.gh .gicon{width:76px;height:76px;border-radius:24px;flex:none}
.gh h2{margin:0;font-size:24px;font-weight:900;letter-spacing:-.04em}
.gh p{margin:4px 0 0;color:var(--t2);font-size:14px;line-height:1.45}
.gh .cat{display:inline-block;font-size:12px;font-weight:800;color:var(--c1);margin-bottom:4px;filter:brightness(1.25)}
.sh-t{font-size:14px;font-weight:800;color:var(--t2);margin:22px 0 10px}
.steps{display:grid;gap:8px}
.step{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:var(--r-md);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line)}
.step .n{width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c1) 22%,transparent);color:var(--c1)}
.step .n svg{width:20px;height:20px;filter:brightness(1.3)}
.step p{margin:0;font-size:14px;line-height:1.45;color:var(--t1)}
.goal{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--r-md);
  background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 20%,transparent),color-mix(in srgb,var(--c2) 8%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c1) 35%,transparent)}
.goal svg{width:24px;height:24px;flex:none;color:var(--gold)}
.goal b{display:block;font-size:15px}
.goal span{font-size:12px;color:var(--t2)}
.mystats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ms{background:var(--s1);border-radius:14px;padding:12px 6px;text-align:center;box-shadow:inset 0 0 0 1px var(--line)}
.ms b{display:block;font-size:18px;font-weight:800}
.ms span{font-size:11px;color:var(--t3);font-weight:700}
.sheet-cta{position:sticky;bottom:0;padding-top:18px;margin-top:6px;
  background:linear-gradient(rgba(16,18,40,0),var(--bg-2) 30%)}
.sheet-cta .btn{height:58px;font-size:17px;border-radius:18px}

/* ---------- 게임 레이어 ---------- */
.game{position:fixed;inset:0;z-index:50;background:var(--bg);touch-action:none;
  clip-path:circle(0 at var(--ox,50%) var(--oy,50%));transition:clip-path .5s var(--ease)}
.game.open{clip-path:circle(170vmax at var(--ox,50%) var(--oy,50%))}
.game.open.done{clip-path:none;transition:none}
.game canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.hud{position:absolute;left:0;right:0;top:0;z-index:2;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;
  padding:calc(var(--sat) + 10px) 14px 0;pointer-events:none;transition:opacity .3s}
.hud>*{pointer-events:auto}
.hud .hud-center{pointer-events:none;text-align:center;grid-column:2}
.hud-label{font-size:11px;font-weight:800;color:rgba(255,255,255,.55);letter-spacing:.06em;height:14px}
.hud-score{font-size:34px;font-weight:900;line-height:1.05;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 16px rgba(0,0,0,.35)}
.hud-score.bump{animation:bump .28s var(--spring)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.hud-right{grid-column:3;min-width:44px;height:34px;padding:0 12px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13px;font-weight:800;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;
  background:rgba(20,22,44,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hud-right svg{width:14px;height:14px}
.hud-right.done{color:var(--win)}
.hud-sub{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px;pointer-events:none}
.hud-bar{width:min(62%,300px);height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.hud-bar i{display:block;height:100%;width:100%;border-radius:99px;background:var(--bar,#fff);transform-origin:left;transition:transform .12s linear,background .3s}
.hud-lives{display:flex;gap:4px}
.hud-lives svg{width:18px;height:18px;color:var(--loss);transition:opacity .2s,transform .3s var(--spring)}
.hud-lives svg.off{opacity:.2;transform:scale(.8)}

.banner{position:absolute;left:50%;top:calc(var(--sat) + 104px);z-index:3;transform:translate(-50%,-10px) scale(.9);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:99px;font-size:14px;font-weight:800;white-space:nowrap;
  background:rgba(61,220,151,.16);color:var(--win);box-shadow:inset 0 0 0 1px rgba(61,220,151,.4);backdrop-filter:blur(12px);
  transition:opacity .3s,transform .4s var(--spring)}
.banner svg{width:18px;height:18px}
.banner.show{opacity:1;transform:translate(-50%,0) scale(1)}

/* ---------- 일시정지 / 결과 오버레이 ---------- */
.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;justify-content:center;
  padding:calc(var(--sat) + 20px) 14px calc(var(--sab) + 14px);background:rgba(6,7,16,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadeIn .25s ease}
@media (min-height:700px){.overlay{align-items:center}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.panel{width:100%;max-width:420px;border-radius:var(--r-xl);background:var(--bg-2);padding:26px 20px 20px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 var(--line-2);animation:panelIn .45s var(--spring)}
@keyframes panelIn{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
.panel h2{margin:0;font-size:24px;font-weight:900;letter-spacing:-.04em}
.panel .sub{margin:6px 0 0;color:var(--t2);font-size:14px}
.panel .btns{display:grid;gap:10px;margin-top:22px}
.panel .row{display:flex;gap:10px}
.panel .row .btn{flex:1}
.toggles{display:flex;justify-content:center;gap:10px;margin-top:18px}
.tgl{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:99px;background:var(--s1);font-size:13px;font-weight:700;
  color:var(--t3);box-shadow:inset 0 0 0 1px var(--line)}
.tgl svg{width:18px;height:18px}
.tgl.on{color:var(--t1);background:var(--s2)}

.outcome{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:99px;font-size:14px;font-weight:900;letter-spacing:.02em}
.outcome svg{width:18px;height:18px}
.outcome.win{background:rgba(61,220,151,.15);color:var(--win)}
.outcome.draw{background:rgba(255,203,87,.15);color:var(--draw)}
.outcome.loss{background:rgba(255,90,121,.14);color:var(--loss)}
.res-title{margin-top:14px!important}
.res-score{margin:10px 0 2px;font-size:64px;font-weight:900;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.res-best{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--t2);font-weight:700}
.res-best svg{width:16px;height:16px;color:var(--gold)}
.newbest{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:99px;margin-top:10px;
  background:linear-gradient(135deg,#FFD66B,#FF9F43);color:#3A2400;font-size:12px;font-weight:900;letter-spacing:.04em;animation:pop .6s var(--spring) .3s both}
.newbest svg{width:14px;height:14px}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.rs{background:var(--s1);border-radius:14px;padding:12px 6px;box-shadow:inset 0 0 0 1px var(--line)}
.rs b{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.rs span{font-size:11px;color:var(--t3);font-weight:700}
.panel{position:relative;overflow:hidden}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.confetti i{position:absolute;top:-14px;width:7px;height:12px;border-radius:2px;opacity:0;animation:confetti 2s cubic-bezier(.3,.6,.5,1) forwards}
@keyframes confetti{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(560px) rotate(720deg)}}
.res-record{margin-top:12px;font-size:13px;color:var(--t3);font-weight:600}
.res-record b{font-weight:800}

/* ---------- 다이얼로그 ---------- */
.dialog{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(5,6,14,.6);animation:fadeIn .2s}
.dialog-box{width:100%;max-width:340px;border-radius:26px;background:var(--s2);padding:24px 20px 16px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 var(--line-2);animation:panelIn .35s var(--spring)}
.dialog-box h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.03em}
.dialog-box p{margin:10px 0 0;color:var(--t2);font-size:14px;line-height:1.55}
.dialog-box .field{margin:16px 0 0;text-align:left}
.dialog-box .row{display:flex;gap:8px;margin-top:22px}
.dialog-box .row .btn{flex:1;height:50px}

/* ---------- 토스트 ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--sab) + 18px);z-index:90;width:max-content;max-width:calc(100% - 40px);
  transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:14px;background:#F4F5FC;color:#15182F;
  font-size:14px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:opacity .25s,transform .35s var(--spring);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}