/* ═══ 🕹️ 술생 미니게임 공용 디자인 시스템 (v322) ═══
   다크 아레나 + 게임별 네온 액센트(--acc). 모든 신규 게임 페이지가 공유한다. */
:root{
  --bg0:#0a0d17; --bg1:#111527; --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.11); --ink:#eef1fa; --muted:#8b92ad; --faint:#5c6280;
  --acc:#4da3ff; --acc2:#8b6cff; --t0:#4da3ff; --t1:#ff5d7a; --gold:#ffce54; --good:#3ddc84; --bad:#ff6b6b;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg0)}
body{
  min-height:100vh;color:var(--ink);
  font-family:"Pretendard","Segoe UI",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
    radial-gradient(900px 480px at 110% 108%, color-mix(in srgb, var(--acc2) 12%, transparent), transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 60%,var(--bg0));
  max-width:640px;margin:0 auto;padding:12px 12px 90px;
}
.hidden{display:none!important}
/* ── 상단 바 ── */
.mg-top{display:flex;align-items:center;gap:10px;padding:6px 2px 12px}
.mg-top a.back{color:var(--muted);text-decoration:none;font-size:1.05rem;padding:6px 10px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box; /* v331 터치 타깃 */ border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.mg-top .ttl{flex:1;min-width:0}
.mg-top .ttl b{font-size:1.06rem;letter-spacing:.02em;display:flex;align-items:center;gap:7px}
.mg-top .ttl small{color:var(--muted);font-size:.72rem;display:block;margin-top:1px}
.mg-top .pts{font-size:.8rem;color:var(--gold);font-weight:800;background:rgba(255,206,84,.1);border:1px solid rgba(255,206,84,.25);padding:6px 10px;border-radius:10px;font-variant-numeric:tabular-nums}
/* ── 카드 ── */
.mgc{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.mgc h3{font-size:.92rem;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mgc .note{font-size:.74rem;color:var(--muted);line-height:1.65}
/* ── 히어로 ── */
.hero{position:relative;text-align:center;padding:26px 16px 22px;overflow:hidden}
.hero .big{font-size:2.6rem;filter:drop-shadow(0 0 18px color-mix(in srgb, var(--acc) 65%, transparent))}
.hero h2{font-size:1.35rem;letter-spacing:.06em;margin:6px 0 4px;background:linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--acc) 70%,#fff));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--muted);font-size:.78rem;line-height:1.6}
.hero .chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.hero .chips span{font-size:.68rem;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
/* ── 세그먼트·선택 ── */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:70px;padding:11px 8px;border-radius:11px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;transition:all .15s}
.seg button.on{background:color-mix(in srgb, var(--acc) 22%, transparent);border-color:var(--acc);color:#fff;box-shadow:0 0 14px color-mix(in srgb, var(--acc) 35%, transparent)}
.lbl{font-size:.72rem;color:var(--muted);margin:12px 0 6px;font-weight:700;letter-spacing:.04em}
/* ── 버튼 ── */
.mgb{width:100%;padding:14px;border:none;border-radius:13px;font-size:.98rem;font-weight:800;cursor:pointer;font-family:inherit;color:#081018;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 90%,#fff),var(--acc));
  box-shadow:0 6px 22px color-mix(in srgb, var(--acc) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.35);transition:transform .1s}
.mgb:active{transform:scale(.97)}
.mgb:disabled{opacity:.4;box-shadow:none}
.mgb.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.mgb.warn{background:linear-gradient(135deg,#ff8f8f,var(--bad));box-shadow:0 6px 20px rgba(255,107,107,.35)}
.mgrow{display:flex;gap:8px}
.mgrow .mgb{flex:1}
input.mgi{width:100%;padding:13px;border:1px solid var(--line);border-radius:11px;font-size:1rem;background:rgba(0,0,0,.3);color:var(--ink);font-family:inherit;text-transform:uppercase}
input.mgi:focus{outline:none;border-color:var(--acc)}
/* ── 방 목록 ── */
.rooms .rr{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:7px;cursor:pointer;transition:border-color .15s}
.rooms .rr:active{border-color:var(--acc)}
.rooms .rr .em{font-size:1.2rem}
.rooms .rr b{font-size:.86rem}
.rooms .rr small{display:block;color:var(--muted);font-size:.7rem;margin-top:2px}
.rooms .rr .fee{margin-left:auto;font-size:.74rem;color:var(--gold);font-weight:800;white-space:nowrap}
/* ── HUD (대전 화면 상단) ── */
.hud{display:flex;gap:6px;margin-bottom:10px}
.hp9{flex:1;min-width:0;padding:8px 9px;border-radius:12px;border:1px solid var(--line);background:var(--panel);text-align:center;position:relative;transition:all .2s}
.hp9 .nk{font-size:.74rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp9 .sc{font-size:.86rem;font-weight:900;font-variant-numeric:tabular-nums;margin-top:2px}
.hp9 small{font-size:.62rem;color:var(--muted);display:block}
.hp9.t0 .nk{color:var(--t0)} .hp9.t1 .nk{color:var(--t1)}
.hp9.turn{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc), 0 0 16px color-mix(in srgb,var(--acc) 40%,transparent);background:color-mix(in srgb, var(--acc) 10%, transparent)}
.hp9.turn::after{content:'▶ 차례';position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:.56rem;background:var(--acc);color:#08101c;font-weight:900;border-radius:999px;padding:1px 7px}
.hp9.gone{opacity:.35;filter:grayscale(1)}
.potbar{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:var(--muted);padding:0 4px 8px}
.potbar b{color:var(--gold)}
/* ── 스테이지 ── */
.stage{position:relative;border-radius:18px;border:1px solid var(--line);background:radial-gradient(600px 320px at 50% 0%, rgba(255,255,255,.05), transparent), rgba(0,0,0,.35);overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,.5)}
.stage canvas{display:block;width:100%;height:auto;touch-action:none}
.stage .ban{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:1.15rem;font-weight:900;text-shadow:0 2px 14px rgba(0,0,0,.8);pointer-events:none;opacity:0;transition:opacity .25s}
.stage .ban.show{opacity:1}
/* ── 게이지 ── */
.gzone{margin-top:10px}
.gz-cap{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);margin-bottom:5px;font-weight:700}
.gz{position:relative;height:34px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.4);overflow:hidden}
.gz .sweet{position:absolute;top:0;bottom:0;background:color-mix(in srgb, var(--good) 26%, transparent);border-left:1px solid var(--good);border-right:1px solid var(--good)}
.gz .fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 55%,transparent),var(--acc));box-shadow:0 0 14px var(--acc)}
.gz .pin{position:absolute;top:-3px;bottom:-3px;width:3px;background:#fff;border-radius:2px;box-shadow:0 0 8px #fff;left:0%}
.gz-hint{text-align:center;font-size:.68rem;color:var(--faint);margin-top:5px}
/* ── 결과 오버레이 ── */
.ovl{position:fixed;inset:0;background:rgba(5,8,16,.86);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:60;opacity:0;pointer-events:none;transition:opacity .3s}
.ovl.show{opacity:1;pointer-events:auto}
.ovl .box{text-align:center;padding:34px 30px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain; /* v331 예방 */ border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));max-width:320px;width:88%;position:relative}
.ovl .r-emo{font-size:3rem}
.ovl .r-t{font-size:1.5rem;font-weight:900;margin:8px 0 4px;letter-spacing:.05em}
.ovl .r-t.win{color:var(--gold);text-shadow:0 0 22px rgba(255,206,84,.5)}
.ovl .r-t.lose{color:var(--muted)}
.ovl .r-s{font-size:.8rem;color:var(--muted);margin-bottom:18px;line-height:1.6}
/* ── 토스트 ── */
#mgToast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(10,14,26,.95);border:1px solid var(--line);color:var(--ink);padding:10px 18px;border-radius:999px;font-size:.8rem;font-weight:700;opacity:0;transition:all .25s;z-index:70;pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#mgToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ── 컨트롤 도크 ── */
.dock{position:sticky;bottom:10px;z-index:20}
.dock .mgc{margin-bottom:0;box-shadow:0 -6px 30px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.35)}
/* ── 공용 배지 ── */
.tag{display:inline-block;font-size:.62rem;font-weight:800;border-radius:999px;padding:2px 8px;border:1px solid var(--line);color:var(--muted)}
.tag.t0{color:var(--t0);border-color:var(--t0)} .tag.t1{color:var(--t1);border-color:var(--t1)}
.pulse{animation:mgp 1.1s infinite}
@keyframes mgp{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes mgshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.shake{animation:mgshake .3s 2}
@media (prefers-reduced-motion: reduce){ .pulse,.shake{animation:none} }