/* =========================================================
   팀 아케이드 — 모바일 게임 테마 (힉스필드 그림 · 캔디 버튼 · 두꺼운 테두리)
   각 화면의 기본 스타일 위에 덮어씁니다.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
:root{ --game:'Jua','Pretendard',sans-serif; --candy1:#FF6FA0; --candy2:#E8326A; --candyD:#9E1747; --mint1:#5BF5D6; --mint2:#14B898; --mintD:#0A6E5B;
  --gold1:#FFE066; --gold2:#FFB300; --goldD:#B36B00; --panel:rgba(26,16,78,.78); --stroke:#0E0838; }

/* 배경 그림 */
body.arc-phone{ background:#1A1060 url(img/bg_tall.webp) center/cover fixed !important; }
body.arc-host{ background:#120A4A var(--stage,url(img/bg_wide.webp)) center/cover fixed !important; }
body.arc-host::before,body.arc-phone::before{ content:''; position:fixed; inset:0; background:radial-gradient(70% 60% at 50% 45%,rgba(14,8,56,.35),rgba(14,8,56,.72)); pointer-events:none; z-index:0; }
body.arc-host > *, body.arc-phone > *{ position:relative; z-index:1; }
body.arc-phone > .scr{ position:fixed; }
body.arc-host > #top,body.arc-host > #app,body.arc-host > #gate,body.arc-host > .bigcount,body.arc-host > #confetti{ position:fixed; }

/* 게임 글씨 */
h1,h2,.logo,.g-say,.count,.rank,.res-sc,.timer,.bigcount,.tbtn,.main,.rep,.btn,.g-big,.g-btn,.teamband,#gTop .nm,#gTop .tm,.gcard .t,.rrow,.pod .nm,.pill b,.code{ font-family:var(--game) !important; font-weight:400 !important; letter-spacing:0 !important; }
h1,h2{ text-shadow:0 3px 0 var(--stroke),0 0 18px rgba(255,111,160,.35); }

/* 캔디 버튼 */
.main,.btn.main,.g-big,.cta{ background:linear-gradient(180deg,#FF8DB6 0%,var(--candy1) 45%,var(--candy2) 100%) !important; border:3px solid var(--stroke) !important;
  box-shadow:0 6px 0 var(--candyD),0 10px 18px rgba(0,0,0,.35),inset 0 3px 0 rgba(255,255,255,.45) !important; color:#fff !important; text-shadow:0 2px 0 rgba(0,0,0,.25); }
.main:active,.btn.main:active,.g-big:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--candyD),inset 0 3px 0 rgba(255,255,255,.4) !important; }
.btn.mint,.g-btn.go,.g-big.stop{ background:linear-gradient(180deg,#8CFFE9,var(--mint1) 45%,var(--mint2)) !important; border:3px solid var(--stroke) !important; box-shadow:0 6px 0 var(--mintD),inset 0 3px 0 rgba(255,255,255,.5) !important; color:#05312A !important; }
.btn.gold,.rep{ background:linear-gradient(180deg,#FFF3A8,var(--gold1) 40%,var(--gold2)) !important; border:3px solid var(--stroke) !important; box-shadow:0 6px 0 var(--goldD),inset 0 3px 0 rgba(255,255,255,.6) !important; color:#4A2A00 !important; }
.btn{ border:3px solid var(--stroke) !important; background:linear-gradient(180deg,#5A4BC9,#3B2E9E) !important; box-shadow:0 5px 0 #1E1566,inset 0 2px 0 rgba(255,255,255,.25) !important; border-radius:16px !important; }
.btn:active{ transform:translateY(3px); }
.g-btn,.g-opt,.g-num,.g-foot,.g-hand,.g-pad3 .g-btn{ background:linear-gradient(180deg,#6F60E8,#4A3BC4) !important; border:3px solid var(--stroke) !important; box-shadow:0 5px 0 #231877,inset 0 3px 0 rgba(255,255,255,.28) !important; border-radius:18px !important; font-family:var(--game) !important; font-weight:400 !important; }
.g-btn:active,.g-opt:active{ transform:translateY(3px); box-shadow:0 2px 0 #231877 !important; }
.g-num.done{ opacity:.25; }

/* 패널 · 카드 */
.card,.board,.qrbox,.tcard,.gcard,.step,.g,.pc,details,form{ border:3px solid var(--stroke) !important; box-shadow:0 6px 0 rgba(14,8,56,.85),0 14px 30px rgba(0,0,0,.3) !important; }
.board{ background:var(--panel) !important; backdrop-filter:blur(6px); }
.tcard{ border-radius:22px !important; }
.teamband{ border:3px solid var(--stroke); box-shadow:0 5px 0 rgba(14,8,56,.85),inset 0 3px 0 rgba(255,255,255,.35); border-radius:20px !important; font-size:22px !important; }

/* 폰: 입장 */
.field{ border:3px solid var(--stroke) !important; background:#fff !important; color:#1B1050 !important; box-shadow:inset 0 3px 0 rgba(0,0,0,.08); font-family:var(--game) !important; font-size:20px !important; }
.tbtn{ border:3px solid var(--stroke) !important; box-shadow:0 5px 0 rgba(14,8,56,.9),inset 0 3px 0 rgba(255,255,255,.4) !important; font-size:20px !important; }
.tbtn.sel{ outline:none !important; transform:translateY(-3px) scale(1.04) !important; box-shadow:0 0 0 4px #fff,0 8px 0 rgba(14,8,56,.9),0 0 24px rgba(255,255,255,.6) !important; }
.arc-mascot{ width:min(46vw,190px); filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); animation:arcBob 1.6s ease-in-out infinite; }
@keyframes arcBob{ 50%{ transform:translateY(-10px) rotate(-3deg); } }
.arc-brand{ display:flex; align-items:center; gap:8px; font-family:var(--game); font-size:22px; color:#fff; text-shadow:0 3px 0 var(--stroke); }
.arc-brand img{ width:44px; height:44px; }
.arc-icon{ width:96px; height:96px; border-radius:26px; border:3px solid var(--stroke); box-shadow:0 6px 0 rgba(14,8,56,.9),0 10px 24px rgba(0,0,0,.4); animation:arcBob 1.8s ease-in-out infinite; }

/* 폰: 게임 머리 */
#gTop{ background:var(--panel); border:3px solid var(--stroke); border-radius:18px; padding:6px 10px; box-shadow:0 4px 0 rgba(14,8,56,.85); }
#gTop .gi{ width:34px; height:34px; border-radius:10px; border:2px solid var(--stroke); }
#gTop .sc{ background:linear-gradient(180deg,#FFF3A8,var(--gold2)) !important; color:#4A2A00 !important; border:2px solid var(--stroke); font-family:var(--game) !important; font-weight:400 !important; font-size:18px; }
#gTop .sc::before{ content:'⭐ '; }
#gBar{ height:12px !important; border:2px solid var(--stroke); background:rgba(0,0,0,.35) !important; }
#gBar i{ background:linear-gradient(90deg,var(--mint1),var(--gold1),var(--candy1)) !important; }
.count{ font-size:150px !important; color:#FFE066 !important; -webkit-text-stroke:6px var(--stroke); paint-order:stroke fill; text-shadow:0 8px 0 var(--stroke),0 0 50px rgba(255,224,102,.7) !important; animation:arcPop .9s infinite; }
@keyframes arcPop{ 0%{ transform:scale(1.35); } 30%{ transform:scale(1); } }
.res-sc{ color:#FFE066 !important; -webkit-text-stroke:4px var(--stroke); paint-order:stroke fill; text-shadow:0 6px 0 var(--stroke) !important; font-size:72px !important; }
.rank{ color:#fff; text-shadow:0 4px 0 var(--stroke); }
.g-fb{ font-family:var(--game) !important; font-weight:400 !important; font-size:36px !important; -webkit-text-stroke:3px var(--stroke); paint-order:stroke fill; }
.g-say{ text-shadow:0 3px 0 var(--stroke); font-size:34px !important; }
.g-q b{ font-family:var(--game); font-weight:400; text-shadow:0 3px 0 var(--stroke); }
.g-oxq{ background:#fff; color:#1B1050; padding:16px; border-radius:18px; border:3px solid var(--stroke); box-shadow:0 5px 0 rgba(14,8,56,.85); display:block; }
.g-hole{ border:3px solid var(--stroke); box-shadow:inset 0 8px 0 rgba(0,0,0,.35); }
.g-key{ border:3px solid var(--stroke) !important; }
.g-react{ border:4px solid var(--stroke); box-shadow:0 6px 0 rgba(14,8,56,.85); }
.g-react b{ font-family:var(--game); font-weight:400; font-size:52px !important; text-shadow:0 4px 0 rgba(0,0,0,.3); }
.g-sky{ border:3px solid var(--stroke); }
.g-wire{ border:3px solid var(--stroke); background:rgba(255,255,255,.1) !important; }
.cheer button{ border:3px solid var(--stroke) !important; background:linear-gradient(180deg,#6F60E8,#4A3BC4) !important; box-shadow:0 4px 0 #231877 !important; }

/* 진행 화면 */
#top{ background:linear-gradient(180deg,rgba(18,10,74,.92),rgba(18,10,74,.55)) !important; border-bottom:3px solid var(--stroke) !important; height:70px !important; }
#app{ top:70px !important; }
.pill{ border:3px solid var(--stroke) !important; background:var(--panel) !important; box-shadow:0 4px 0 rgba(14,8,56,.85); color:#E6E1FF !important; }
.pill b{ color:#FFE066 !important; font-size:20px !important; }
.gcard{ background:linear-gradient(180deg,rgba(86,70,210,.9),rgba(44,30,140,.92)) !important; border-radius:24px !important; text-align:center !important; padding:12px 10px 14px !important; }
.gcard:hover{ transform:translateY(-6px) scale(1.03) !important; }
.gcard .gi{ width:86%; max-width:150px; aspect-ratio:1; border-radius:22%; border:3px solid var(--stroke); box-shadow:0 5px 0 rgba(14,8,56,.85); display:block; margin:0 auto; }
.gcard .t{ font-size:21px !important; margin-top:10px !important; text-shadow:0 2px 0 var(--stroke); }
.gcard .d{ font-size:12.5px !important; }
.gcard .tag{ z-index:2; border:2px solid var(--stroke); background:var(--gold1) !important; color:#4A2A00 !important; }
.gcard.done::after{ z-index:2; background:var(--mint1); color:#05312A !important; padding:2px 8px; border-radius:999px; border:2px solid var(--stroke); }
.games{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important; gap:16px !important; }
.seg{ border:3px solid var(--stroke) !important; background:var(--panel) !important; }
.seg button{ font-family:var(--game) !important; font-weight:400 !important; font-size:17px; }
.seg button.on{ background:linear-gradient(180deg,#FFF3A8,var(--gold2)) !important; color:#4A2A00 !important; }
#vIntro .ie{ width:clamp(150px,18vw,260px); border-radius:24%; border:5px solid var(--stroke); box-shadow:0 10px 0 rgba(14,8,56,.85),0 0 60px rgba(255,224,102,.35); animation:arcBob 1.6s ease-in-out infinite; }
#vIntro h1{ font-size:clamp(56px,7vw,110px) !important; color:#fff; text-shadow:0 6px 0 var(--stroke),0 0 40px rgba(255,111,160,.5) !important; }
#vIntro .how{ background:var(--panel); border:3px solid var(--stroke); border-radius:22px; padding:14px 24px; box-shadow:0 6px 0 rgba(14,8,56,.85); }
.modechip{ border:3px solid var(--stroke); box-shadow:0 4px 0 rgba(14,8,56,.85); font-family:var(--game); font-weight:400 !important; font-size:22px !important; }
.playhead .gi{ width:72px; height:72px; border-radius:20px; border:3px solid var(--stroke); box-shadow:0 5px 0 rgba(14,8,56,.85); }
.playhead h2{ font-size:clamp(34px,4vw,56px) !important; }
.timer{ font-size:72px !important; color:#FFE066; -webkit-text-stroke:4px var(--stroke); paint-order:stroke fill; text-shadow:0 6px 0 var(--stroke); }
.bar .tr{ border:3px solid var(--stroke); border-radius:18px !important; background:rgba(14,8,56,.55) !important; }
.bar .fl{ border-radius:14px !important; box-shadow:inset 0 4px 0 rgba(255,255,255,.35),0 0 24px color-mix(in srgb,var(--c) 60%,transparent) !important; }
.bar .lb,.bar .vl{ font-family:var(--game) !important; font-weight:400 !important; text-shadow:0 3px 0 var(--stroke); }
.bigcount{ font-family:var(--game) !important; color:#FFE066 !important; -webkit-text-stroke:10px var(--stroke); paint-order:stroke fill; text-shadow:0 14px 0 var(--stroke),0 0 90px rgba(255,224,102,.7) !important; animation:arcPop 1s infinite; }
.rrow{ border:3px solid var(--stroke) !important; box-shadow:0 5px 0 rgba(14,8,56,.85),inset 0 3px 0 rgba(255,255,255,.2) !important; border-radius:22px !important; }
.rrow .pt{ color:#FFE066 !important; text-shadow:0 2px 0 var(--stroke); }
.pod .blk{ border:4px solid var(--stroke); box-shadow:inset 0 6px 0 rgba(255,255,255,.35),0 0 30px color-mix(in srgb,var(--c) 50%,transparent); font-family:var(--game) !important; font-weight:400 !important; font-size:72px !important; }
.pod .nm{ text-shadow:0 4px 0 var(--stroke); }
.pod .crown{ font-size:0 !important; width:120px; height:120px; background:url(img/trophy.webp) center/contain no-repeat; }
.lobby-mascot{ position:absolute; right:10px; bottom:6px; width:min(17vw,230px); pointer-events:none; filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)); animation:arcBob 1.7s ease-in-out infinite; }
.res-trophy{ width:110px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.5)); animation:arcBob 1.6s ease-in-out infinite; }
#vLobby{ position:relative; }
/* 소개 페이지 */
body.arc-landing{ background:#120A4A url(img/bg_wide.webp) center top/cover fixed !important; }
body.arc-landing .hero{ background:linear-gradient(180deg,rgba(18,10,74,.25),rgba(18,10,74,.85)) !important; }
body.arc-landing section{ background:rgba(18,10,74,.82) !important; }
body.arc-landing .g{ text-align:center; padding:12px 10px !important; background:linear-gradient(180deg,rgba(86,70,210,.9),rgba(44,30,140,.92)) !important; border-radius:22px !important; }
body.arc-landing .g img{ width:100%; max-width:120px; aspect-ratio:1; border-radius:22%; border:3px solid var(--stroke); box-shadow:0 4px 0 rgba(14,8,56,.85); display:block; margin:0 auto 6px; }
body.arc-landing .g b{ font-family:var(--game); font-weight:400; font-size:18px; }
.hero-mascot{ width:min(34vw,330px); display:block; margin:0 auto -30px; position:relative; z-index:2; filter:drop-shadow(0 16px 26px rgba(0,0,0,.5)); animation:arcBob 1.7s ease-in-out infinite; }
.bar .fl::after{ content:'' !important; right:4px !important; width:auto !important; height:calc(100% - 8px) !important; aspect-ratio:1; background:var(--gi) center/cover; border-radius:28%; border:2px solid var(--stroke); box-shadow:0 2px 0 rgba(0,0,0,.3); }
#gTop .sc::before{ content:'' !important; display:inline-block; width:18px; height:18px; margin-right:4px; vertical-align:-3px; background:url(img/s_coin.webp) center/contain no-repeat; }
.g-hole span{ bottom:-80% !important; width:78%; left:11% !important; right:auto !important; height:78%; font-size:12vw; }
.g-hole.up span{ bottom:4% !important; }
.arc-logo{ height:58px; width:auto; display:block; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
#top .arc-logo{ height:60px; margin:2px 4px 0 -6px; }
.arc-logo-phone{ width:min(58vw,240px); display:block; margin:-4px auto 0; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
/* 소개 첫 화면 큰 문구 — 그라데이션 글자에 그림자가 비쳐 탁하던 문제 */
body.arc-landing .hero h1{ font-size:clamp(40px,5.4vw,66px) !important; color:#fff; text-shadow:0 4px 0 var(--stroke),0 0 26px rgba(0,0,0,.65) !important; }
body.arc-landing .hero h1 em{ text-shadow:none !important; background:linear-gradient(90deg,#FFE066,#FF8DB6 55%,#FF6FA0) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
  filter:drop-shadow(0 4px 0 #0E0838) drop-shadow(0 0 16px rgba(255,111,160,.55)); }
body.arc-landing .hero p{ color:#fff !important; font-size:19px !important; font-weight:600; text-shadow:0 2px 8px rgba(0,0,0,.8); }
body.arc-landing .hero .meta{ color:#E6E1FF !important; text-shadow:0 1px 6px rgba(0,0,0,.8); }
body.arc-landing .hero .wrap > div:first-child{ position:relative; }
body.arc-landing .hero .wrap > div:first-child::before{ content:''; position:absolute; inset:-30px -40px -30px -60px; background:radial-gradient(ellipse at 40% 55%,rgba(14,8,56,.75),transparent 70%); z-index:-1; }
/* ── 실시간 팀 순위판 (큰 화면) ── */
body.arc-host{ transition:background-image .4s; }
#vPlay .bars{ position:relative; display:block !important; }
.lrow{ position:absolute; left:0; right:0; top:0; height:var(--rh,90px); display:flex; align-items:center; gap:14px; transition:transform .55s cubic-bezier(.3,1.3,.5,1);
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 38%,rgba(14,8,56,.85)),rgba(14,8,56,.78) 55%); border:3px solid var(--stroke); border-radius:calc(var(--rh,90px) * .3); padding:0 16px 0 10px;
  box-shadow:0 5px 0 rgba(14,8,56,.9),inset 0 3px 0 rgba(255,255,255,.12); backdrop-filter:blur(3px); }
.lrow.lead{ box-shadow:0 0 0 3px #FFE066,0 5px 0 rgba(14,8,56,.9),0 0 34px rgba(255,224,102,.55); z-index:2; }
.lrow .rk{ flex:0 0 auto; width:calc(var(--rh,90px) * .78); height:calc(var(--rh,90px) * .78); display:flex; align-items:center; justify-content:center; font-family:var(--game); font-size:calc(var(--rh,90px) * .42); color:#fff; text-shadow:0 3px 0 var(--stroke); }
.lrow .rk img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.lrow .tn{ flex:0 0 clamp(150px,17vw,280px); display:flex; flex-direction:column; justify-content:center; min-width:0; }
.lrow .tn b{ font-family:var(--game); font-weight:400; font-size:clamp(18px,calc(var(--rh,90px) * .44),46px); color:#fff; text-shadow:0 3px 0 var(--stroke); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.05; }
.lrow .tn small{ font-size:clamp(11px,calc(var(--rh,90px) * .17),17px); color:#E6E1FF; font-weight:700; }
.lrow .tr{ flex:1; height:58%; border:3px solid var(--stroke); border-radius:999px; background:rgba(0,0,0,.4); position:relative; overflow:hidden; }
.lrow .fl{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,color-mix(in srgb,var(--c) 75%,#000),var(--c)); transition:width .45s cubic-bezier(.2,.8,.2,1);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.35),0 0 22px color-mix(in srgb,var(--c) 60%,transparent); }
.lrow .fl::after{ content:''; position:absolute; right:3px; top:50%; transform:translateY(-50%); height:calc(100% - 6px); aspect-ratio:1; background:var(--gi) center/cover; border-radius:50%; border:2px solid var(--stroke); }
.lrow .sc{ flex:0 0 auto; min-width:clamp(110px,11vw,190px); text-align:right; display:flex; align-items:baseline; justify-content:flex-end; gap:4px; }
.lrow .sc b{ font-family:var(--game); font-weight:400; font-size:clamp(26px,calc(var(--rh,90px) * .62),74px); color:#FFE066; -webkit-text-stroke:4px var(--stroke); paint-order:stroke fill; text-shadow:0 4px 0 var(--stroke); font-variant-numeric:tabular-nums; line-height:1; display:inline-block; }
.lrow .sc b.bump{ animation:arcBump .3s; }
@keyframes arcBump{ 40%{ transform:scale(1.18); } }
.lrow .sc i{ font-style:normal; font-family:var(--game); color:#E6E1FF; font-size:clamp(12px,calc(var(--rh,90px) * .2),22px); text-shadow:0 2px 0 var(--stroke); }
.playhead{ background:var(--panel); border:3px solid var(--stroke); border-radius:24px; padding:8px 18px; box-shadow:0 5px 0 rgba(14,8,56,.85); }
#pMode{ color:#E6E1FF !important; font-family:var(--game); font-weight:400 !important; font-size:20px; }
.brow{ font-family:var(--game); font-weight:400 !important; font-size:22px; padding:10px 6px !important; }
.brow .pt{ font-size:28px !important; color:#FFE066; -webkit-text-stroke:3px var(--stroke); paint-order:stroke fill; }
.brow .dot{ width:20px !important; height:20px !important; border:2px solid var(--stroke); }
.board h3{ font-family:var(--game); font-weight:400 !important; font-size:22px !important; color:#fff !important; }
.rrow{ font-size:clamp(22px,2.4vw,34px) !important; }
.rrow .sc{ font-family:var(--game); color:#fff !important; }
/* ── 진행 화면: 무대 + 개인 순위 ── */
#vPlay{ gap:12px !important; }
.playbody{ flex:1; display:flex; gap:16px; min-height:0; }
.stage{ flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; }
.stage .bars{ flex:1; min-height:0; }
.side2{ width:clamp(240px,22vw,340px); flex:0 0 auto; display:flex; flex-direction:column; gap:10px; min-height:0; }
.ptop{ flex:1; overflow:hidden; background:var(--panel); border:3px solid var(--stroke); border-radius:22px; padding:12px; box-shadow:0 5px 0 rgba(14,8,56,.85); }
.ptop h3,.mvp h3{ font-family:var(--game); font-weight:400; font-size:22px; margin:0 0 8px; text-shadow:0 2px 0 var(--stroke); }
.pr{ display:flex; align-items:center; gap:8px; padding:6px 8px; margin-bottom:5px; border-radius:12px; background:linear-gradient(90deg,color-mix(in srgb,var(--c) 40%,transparent),rgba(255,255,255,.04)); border:2px solid rgba(14,8,56,.6); transition:transform .3s; }
.pr .n{ width:26px; text-align:center; font-family:var(--game); font-size:20px; text-shadow:0 2px 0 var(--stroke); }
.pr .nm{ flex:1; min-width:0; font-family:var(--game); font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.1; }
.pr .nm small{ display:block; font-family:Pretendard,sans-serif; font-size:11px; color:#D8D2FF; }
.pr b{ font-family:var(--game); font-weight:400; font-size:22px; color:#FFE066; text-shadow:0 2px 0 var(--stroke); }
.pr.top1{ box-shadow:0 0 0 2px #FFE066,0 0 18px rgba(255,224,102,.45); }
.pr.top1 .n::before{ content:''; } .pr.top2{ box-shadow:0 0 0 2px #D9E2F2; } .pr.top3{ box-shadow:0 0 0 2px #E2A15F; }
.feed{ height:clamp(120px,24vh,230px); overflow:hidden; display:flex; flex-direction:column; gap:5px; }
.fd{ padding:7px 12px; border-radius:12px; background:color-mix(in srgb,var(--c) 70%,#1B1050); border:2px solid var(--stroke); font-family:var(--game); font-size:18px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35); animation:fdIn .35s cubic-bezier(.3,1.4,.5,1); }
.fd b{ font-weight:400; }
@keyframes fdIn{ from{ transform:translateX(60px) scale(.8); opacity:0; } }
/* 탑 쌓기 기둥 */
.vis-tower .lrow{ top:auto; bottom:0; left:0; right:auto; width:var(--cw,140px); height:100%; flex-direction:column-reverse; justify-content:flex-start; gap:8px; padding:10px 6px; border-radius:22px; background:linear-gradient(0deg,color-mix(in srgb,var(--c) 35%,rgba(14,8,56,.85)),rgba(14,8,56,.6)); }
.vis-tower .lrow .rk{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:56px; height:56px; z-index:3; }
.vis-tower .lrow .tn{ flex:0 0 auto; align-items:center; text-align:center; width:100%; }
.vis-tower .lrow .tn b{ font-size:clamp(16px,calc(var(--cw,140px) * .2),30px); }
.vis-tower .lrow .tr{ flex:1; width:62%; height:auto; border-radius:18px; }
.vis-tower .lrow .fl{ top:auto; bottom:0; left:0; right:0; width:100% !important; border-radius:14px; transition:height .45s cubic-bezier(.2,.8,.2,1); background:repeating-linear-gradient(0deg,var(--c) 0 26px,color-mix(in srgb,var(--c) 70%,#000) 26px 30px); }
.vis-tower .lrow .fl::after{ top:-2px; right:50%; transform:translate(50%,-100%); height:auto; width:70%; }
.vis-tower .lrow .sc{ min-width:0; justify-content:center; }
.vis-tower .lrow .sc b{ font-size:clamp(24px,calc(var(--cw,140px) * .3),54px); }
/* 10초 시계 */
.tl{ display:none; }
.vis-timeline .tl{ display:block; position:relative; flex:0 0 52%; background:var(--panel); border:3px solid var(--stroke); border-radius:22px; box-shadow:0 5px 0 rgba(14,8,56,.85); overflow:hidden; }
.vis-timeline .bars{ flex:1; }
.tl-axis{ position:absolute; left:4%; right:4%; bottom:16px; height:2px; background:rgba(255,255,255,.35); }
.tl-axis span{ position:absolute; bottom:6px; transform:translateX(-50%); font-family:var(--game); font-size:16px; color:#D8D2FF; }
.tl-goal{ position:absolute; bottom:-6px; top:auto; height:9999px; width:4px; margin-left:-2px; background:linear-gradient(0deg,#FFE066,rgba(255,224,102,.1)); box-shadow:0 0 14px #FFE066; }
.tl-goal b{ position:absolute; bottom:30px; left:8px; font-family:var(--game); font-weight:400; color:#FFE066; font-size:22px; text-shadow:0 2px 0 var(--stroke); white-space:nowrap; }
.tl-dots{ position:absolute; left:4%; right:4%; top:0; bottom:40px; }
.tld{ position:absolute; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; animation:fdIn .4s; }
.tld i{ width:22px; height:22px; border-radius:50%; background:var(--c); border:3px solid var(--stroke); box-shadow:0 0 12px var(--c); }
.tld span{ margin-top:3px; padding:2px 8px; border-radius:999px; background:rgba(14,8,56,.85); font-family:var(--game); font-size:15px; white-space:nowrap; }
.tld span b{ font-weight:400; color:#FFE066; }
.tl-wait{ position:absolute; right:16px; top:10px; font-family:var(--game); font-size:18px; color:#fff; text-shadow:0 2px 0 var(--stroke); }
/* 결과 + MVP */
.rwrap{ flex:1; display:flex; gap:18px; width:min(1500px,100%); min-height:0; }
.rwrap .rlist{ flex:1; width:auto !important; }
.mvp{ width:clamp(260px,24vw,360px); background:var(--panel); border:3px solid var(--stroke); border-radius:22px; padding:14px; box-shadow:0 5px 0 rgba(14,8,56,.85); align-self:flex-start; }
.vis-tower .lrow{ padding-top:66px !important; }
.tld{ animation:none; }
.rrow .rk{ width:84px !important; white-space:nowrap; }

/* ===== 큰 화면 「실제 게임 장면」 (scenes.js) ===== */
#vPlay .vis-scene .bars,#vPlay .vis-scene .tl{ display:none !important; }
#scene{ flex:1; min-height:0; width:100%; min-width:0; position:relative; display:flex; flex-direction:column; gap:12px; }
.sc-strip{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.sc-chip{ display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; border-radius:999px; background:rgba(14,8,56,.78); border:3px solid var(--c); font-family:var(--game); font-size:clamp(15px,1.5vw,24px); transition:order .3s; }
.sc-chip em{ font-style:normal; width:1.6em; height:1.6em; border-radius:50%; background:var(--c); color:#1B1050; display:grid; place-items:center; font-size:.85em; }
.sc-chip i{ font-style:normal; color:#FFD12E; }
.sc-chip.lead{ box-shadow:0 0 0 3px #FFD12E,0 0 22px rgba(255,209,46,.6); }
.sc-pop{ position:absolute; transform:translate(-50%,0); white-space:nowrap; font-family:var(--game); font-size:clamp(16px,1.7vw,28px); color:#fff; background:var(--c); padding:4px 12px; border-radius:999px; border:3px solid #1B1050; box-shadow:0 4px 0 rgba(14,8,56,.8); animation:scPop 1.3s ease-out forwards; pointer-events:none; z-index:5; }
@keyframes scPop{ 0%{ transform:translate(-50%,10px) scale(.6); opacity:0 } 15%{ transform:translate(-50%,0) scale(1.1); opacity:1 } 100%{ transform:translate(-50%,-90px) scale(1); opacity:0 } }
.sc-fx{ position:absolute; inset:0; pointer-events:none; }

/* 달리기 */
.sc-track{ flex:1; position:relative; display:flex; flex-direction:column; border-radius:24px; overflow:hidden; border:4px solid #1B1050; box-shadow:0 8px 0 rgba(14,8,56,.85);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 9%),linear-gradient(180deg,#C8553D,#A8402C); --t0:clamp(110px,11vw,180px); --sw:clamp(110px,11vw,200px); }
.sc-finish{ position:absolute; top:0; bottom:0; right:calc(var(--sw) * .35); width:22px; background:repeating-conic-gradient(#fff 0 25%,#1B1050 0 50%) 0 0/22px 22px; z-index:1; opacity:.9; }
.sc-finish span{ position:absolute; top:6px; left:50%; transform:translateX(-50%) rotate(90deg); transform-origin:center; font-family:var(--game); color:#FFD12E; font-size:14px; text-shadow:0 2px 0 #1B1050; white-space:nowrap; display:none; }
.sc-lane{ flex:1; position:relative; border-bottom:3px dashed rgba(255,255,255,.55); min-height:0; }
.sc-lane:last-child{ border-bottom:0; }
.sc-lane::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:var(--t0); background:linear-gradient(90deg,var(--c),transparent); opacity:.55; }
.sc-tag{ position:absolute; left:10px; top:50%; transform:translateY(-50%); font-family:var(--game); font-size:clamp(15px,1.6vw,28px); color:#fff; text-shadow:0 3px 0 #1B1050; z-index:2; max-width:calc(var(--t0) - 14px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-run{ position:absolute; bottom:5%; height:88%; aspect-ratio:148/220; z-index:3; }
.sc-spr{ position:absolute; inset:0; background:url(img/runner_b.webp) var(--fx,33.333%) 0/400% 100% no-repeat; }
.sc-shirt{ position:absolute; inset:0; background:var(--c); mix-blend-mode:multiply; -webkit-mask:url(img/runner_m.webp) var(--fx,33.333%) 0/400% 100% no-repeat; mask:url(img/runner_m.webp) var(--fx,33.333%) 0/400% 100% no-repeat; }
.sc-run.mv .sc-spr{ animation:scBob .18s infinite alternate; }
@keyframes scBob{ to{ transform:translateY(-4%); } }
.sc-val{ position:absolute; left:100%; top:18%; margin-left:4px; font-family:var(--game); font-weight:400; color:#fff; background:var(--c); border:2px solid #1B1050; padding:0 8px; border-radius:10px; font-size:clamp(12px,1.3vw,22px); white-space:nowrap; z-index:4; }
.sc-dust{ position:absolute; left:-10%; bottom:2%; width:40%; height:20%; border-radius:50%; background:radial-gradient(rgba(255,240,220,.85),transparent 70%); opacity:0; }
.sc-run.mv .sc-dust{ animation:scDust .35s infinite; }
@keyframes scDust{ 0%{ opacity:.9; transform:translateX(0) scale(.6) } 100%{ opacity:0; transform:translateX(-60%) scale(1.3) } }

/* 두더지 */
.sc-field{ flex:1 1 0; min-height:0; aspect-ratio:1.45; width:auto; max-width:100%; align-self:center; display:grid; grid-template-columns:repeat(3,1fr); gap:2.2%; padding:2.5%; border-radius:28px; background:linear-gradient(180deg,#5BC85B,#2E9A3E); border:5px solid #1B1050; box-shadow:0 10px 0 rgba(14,8,56,.85); }
.sc-hole{ position:relative; border-radius:50%/42%; background:radial-gradient(ellipse at 50% 70%,#1E0F06 0 52%,#5A3317 53% 62%,transparent 63%); overflow:hidden; }
.sc-m{ position:absolute; left:15%; right:15%; bottom:-80%; height:85%; transition:bottom .12s ease-out; }
.sc-m img{ width:100%; height:100%; object-fit:contain; }
.sc-hole.up .sc-m{ bottom:12%; }
.sc-hole.whack .sc-m{ animation:scWhack .3s; }
@keyframes scWhack{ 50%{ transform:scaleY(.7) translateY(20%); filter:brightness(1.6); } }
.sc-hits{ position:absolute; left:0; right:0; top:4%; display:flex; justify-content:center; gap:3px; flex-wrap:wrap; padding:0 10%; }
.sc-hits b{ width:12px; height:12px; border-radius:50%; border:2px solid #1B1050; }

/* 퀴즈 */
.sc-qbox{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 26px; border-radius:28px; background:rgba(14,8,56,.82); border:4px solid #1B1050; box-shadow:0 10px 0 rgba(14,8,56,.85); }
.sc-qn{ font-family:var(--game); font-size:clamp(20px,2vw,34px); color:#FFD12E; }
.sc-qbar{ width:80%; height:14px; border-radius:9px; background:rgba(255,255,255,.15); overflow:hidden; }
.sc-qbar i{ display:block; height:100%; background:linear-gradient(90deg,#FFD12E,#FF8A3D); border-radius:9px; }
.sc-q{ font-size:clamp(28px,3.6vw,64px); font-weight:900; text-align:center; line-height:1.3; display:flex; flex-direction:column; align-items:center; gap:8px; min-height:2.6em; justify-content:center; }
.sc-q b{ font-family:var(--game); font-weight:400; } .sc-q small{ font-size:.45em; color:#B3AEE0; }
.sc-q .g-oxq{ font-size:.75em; padding:18px 28px; } .sc-q .g-emoji{ font-size:2.2em; } .sc-q .g-cho{ font-size:1.5em; letter-spacing:.1em; }
.sc-opts{ width:100%; display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
.sc-opts.c4{ grid-template-columns:repeat(4,1fr); }
.sc-opt{ position:relative; text-align:center; padding:18px 10px; border-radius:20px; font-family:var(--game); font-size:clamp(24px,3vw,54px); background:linear-gradient(180deg,#6F60E8,#4A3BC4); border:4px solid #1B1050; box-shadow:0 6px 0 #231877; transition:opacity .3s,transform .3s; }
.sc-opt em{ position:absolute; right:10px; top:6px; font-style:normal; font-size:.45em; color:#FFD12E; }
.sc-opt.right{ background:linear-gradient(180deg,#2ED47A,#16A35A); transform:scale(1.05); }
.sc-opt.dim{ opacity:.3; }
.sc-qinfo{ font-weight:800; color:#B3AEE0; font-size:clamp(15px,1.4vw,22px); }
.sc-qteams{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.sc-qteams span{ padding:6px 14px; border-radius:999px; border:3px solid var(--c); background:rgba(0,0,0,.35); font-weight:800; font-size:clamp(14px,1.3vw,20px); }

/* 순간포착 */
.sc-rwrap{ flex:1; min-height:0; display:flex; gap:24px; align-items:center; justify-content:center; }
.sc-light{ width:min(42vh,34vw); aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:8px solid #1B1050; box-shadow:0 12px 0 rgba(14,8,56,.85); transition:background .08s; }
.sc-light b{ font-family:var(--game); font-weight:400; font-size:clamp(34px,5vw,84px); text-shadow:0 4px 0 rgba(0,0,0,.3); }
.sc-light small{ font-weight:800; font-size:clamp(14px,1.4vw,22px); }
.sc-light.red{ background:radial-gradient(circle at 35% 30%,#FF8A8A,#D93A4A 60%); }
.sc-light.green{ background:radial-gradient(circle at 35% 30%,#8BFFB8,#1FBF6A 60%); box-shadow:0 0 60px #1FBF6A,0 12px 0 rgba(14,8,56,.85); }
.sc-light.gray{ background:radial-gradient(circle at 35% 30%,#8A86B0,#4A4670 60%); }
.sc-rlist{ width:min(420px,36%); display:flex; flex-direction:column; gap:6px; }
.sc-rlist h4{ margin:0 0 4px; font-family:var(--game); font-weight:400; font-size:clamp(18px,1.6vw,26px); }
.sc-rr{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; background:rgba(14,8,56,.8); border-left:8px solid var(--c); font-size:clamp(15px,1.4vw,22px); animation:scIn .3s; }
.sc-rr span{ width:1.6em; text-align:center; font-weight:900; } .sc-rr b{ flex:1; } .sc-rr em{ font-style:normal; font-family:var(--game); color:#FFD12E; }
.sc-foul{ margin-top:6px; color:#FF9A9A; font-weight:800; }
@keyframes scIn{ from{ transform:translateX(20px); opacity:0 } }
.g-opt.right{ background:linear-gradient(180deg,#2ED47A,#16A35A) !important; }
.g-opt.sel{ outline:4px solid #FFD12E; }

/* 단체 줄넘기 (폰) */
.jr{ position:absolute; inset:0; display:flex; flex-direction:column; }
.jr-cv{ position:absolute; left:0; right:0; top:0; height:62%; width:100%; pointer-events:none; }
.jr-back{ z-index:1; } .jr-front{ z-index:3; }
.jr-me{ position:absolute; left:50%; top:20%; height:38%; aspect-ratio:148/220; z-index:2; transform:translateX(-50%); }
.jr-me .sc-spr{ position:absolute; inset:0; }
.jr-me::after{ content:''; position:absolute; left:10%; right:10%; bottom:-4%; height:8%; border-radius:50%; background:rgba(0,0,0,.25); }
.jr-info{ position:absolute; left:0; right:0; top:64%; text-align:center; display:flex; flex-direction:column; gap:2px; }
.jr-info b{ font-family:var(--game); font-weight:400; font-size:40px; color:#FFD12E; text-shadow:0 3px 0 #1B1050; }
.jr-info span{ font-weight:800; } .jr-info span.bad{ color:#FF9A9A; }
.jr-btn{ position:absolute !important; left:6%; right:6%; bottom:3%; height:20% !important; width:auto !important; font-size:38px !important; }

/* 떡 먹은 친구 찾기 (폰·큰 화면 공통 얼굴) */
.tk-grid{ display:grid; gap:8px; width:100%; }
.tk-b{ position:relative; aspect-ratio:1; border-radius:18px; border:3px solid #1B1050; background:linear-gradient(180deg,#FFF6E0,#FFE2A8); box-shadow:0 4px 0 rgba(14,8,56,.8); padding:4px; cursor:pointer; }
.tk-b i{ position:absolute; left:6px; top:4px; font-style:normal; font-family:var(--game); color:#1B1050; font-size:14px; }
.tk-b svg{ width:100%; height:100%; display:block; }
.tk-b.sel{ outline:4px solid #FFD12E; } .tk-b.right{ background:linear-gradient(180deg,#B8FFD3,#4BE08A); transform:scale(1.06); } .tk-b.dim{ opacity:.35; }
.tk-f .ck{ transform-origin:50px 72px; transform-box:view-box; }
.tk-f .mo{ transform-box:fill-box; transform-origin:center; }
.tk-f.eat .ck{ animation:tkChew .42s ease-in-out infinite alternate; } .tk-f.eat .mo{ animation:tkMo .42s ease-in-out infinite alternate; }
.tk-f.eat.l1 .ck{ animation-name:tkChew1; } .tk-f.eat.l2 .ck{ animation-name:tkChew2; animation-duration:.55s; } .tk-f.eat.l2 .mo{ animation-name:tkMo2; animation-duration:.55s; }
@keyframes tkChew{ to{ transform:scale(1.09,.93) translateY(1.5px); } } @keyframes tkChew1{ to{ transform:scale(1.05,.96) translateY(1px); } } @keyframes tkChew2{ to{ transform:scale(1.025,.98); } }
@keyframes tkMo{ to{ transform:translateX(2px) scale(1.35,.6); } } @keyframes tkMo2{ to{ transform:translateX(1px) scale(1.12,.85); } }
.tk-f.dz .ey{ animation:tkBlink 2.2s infinite; transform-box:fill-box; transform-origin:center; } .tk-f.dz{ animation:tkSway 3s ease-in-out infinite; }
@keyframes tkBlink{ 0%,88%,100%{ transform:scaleY(1); } 93%{ transform:scaleY(.15); } } @keyframes tkSway{ 50%{ transform:rotate(3deg); } }

/* 큰 화면: 단체 줄넘기 */
.sc-jgrid{ flex:1; min-height:0; display:grid; gap:12px; }
.sc-jp{ position:relative; border-radius:22px; overflow:hidden; border:4px solid var(--c); background:linear-gradient(180deg,rgba(120,200,255,.25),rgba(60,160,80,.45) 70%,rgba(40,120,60,.7)); box-shadow:0 6px 0 rgba(14,8,56,.85); min-height:0; }
.sc-jp canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.sc-jp .bk{ z-index:1; } .sc-jp .fr{ z-index:3; }
.sc-jp h5{ position:absolute; left:12px; top:8px; margin:0; z-index:4; font-family:var(--game); font-weight:400; font-size:clamp(16px,1.6vw,28px); text-shadow:0 3px 0 #1B1050; }
.sc-jc{ position:absolute; right:12px; top:4px; z-index:4; font-family:var(--game); font-size:clamp(28px,3.2vw,60px); color:#FFD12E; text-shadow:0 4px 0 #1B1050; }
.sc-jc small{ font-size:.4em; color:#fff; margin-left:4px; }
.sc-jc.bump{ animation:scBump .4s; } @keyframes scBump{ 40%{ transform:scale(1.35); } }
.sc-jm{ position:absolute; left:8%; right:8%; bottom:10%; height:46%; z-index:2; display:flex; justify-content:center; align-items:flex-end; gap:1%; }
.sc-jk{ position:relative; height:100%; aspect-ratio:148/220; max-width:14%; }
.sc-jk .sc-spr{ position:absolute; inset:0; }
.sc-jk span{ position:absolute; left:50%; bottom:-16%; transform:translateX(-50%); white-space:nowrap; font-size:clamp(10px,.9vw,15px); font-weight:800; text-shadow:0 2px 0 #1B1050; }
.sc-jk.fail{ animation:scFail .6s; } .sc-jk.fail::after{ content:'✖'; position:absolute; left:50%; top:-14%; transform:translateX(-50%); color:#FF4D4D; font-size:clamp(18px,1.8vw,32px); text-shadow:0 2px 0 #fff; }
@keyframes scFail{ 30%{ transform:rotate(-18deg); } 60%{ transform:rotate(10deg); } }
.sc-jmsg{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); z-index:5; font-family:var(--game); font-size:clamp(20px,2.4vw,44px); color:#fff; padding:4px 16px; border-radius:999px; background:#FF4D4D; border:3px solid #1B1050; opacity:0; }
.sc-jmsg.ok{ background:#2ED47A; } .sc-jmsg.on{ animation:scMsg .9s; }
@keyframes scMsg{ 0%{ opacity:0; transform:translate(-50%,-30%) scale(.6); } 20%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-80%); } }

/* 큰 화면: 떡 먹은 친구 찾기 */
.sc-tk{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 20px; border-radius:28px; background:rgba(14,8,56,.78); border:4px solid #1B1050; }
.sc-tkh{ display:flex; gap:18px; align-items:center; font-family:var(--game); font-size:clamp(18px,1.8vw,32px); }
.sc-tkh em{ font-style:normal; color:#FFD12E; }
.sc-tk .tk-grid{ flex:1; min-height:0; width:auto; max-width:100%; align-content:center; justify-content:center; }
.sc-tk .tk-b{ cursor:default; height:100%; } .sc-tk .tk-b i{ font-size:clamp(14px,1.4vw,24px); }
.sc-tk .tk-b.right::after{ content:''; position:absolute; right:-6%; bottom:-6%; width:42%; aspect-ratio:1; background:url(img/s_tteok.webp) center/contain no-repeat; animation:scPopIn .5s; }
@keyframes scPopIn{ from{ transform:scale(0) rotate(-40deg); } }
.sc-tkw{ min-height:1.6em; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; font-weight:800; font-size:clamp(14px,1.4vw,22px); }
.sc-tkw span{ padding:4px 12px; border-radius:999px; border:3px solid var(--c); background:rgba(0,0,0,.35); }

/* ===== 게임별 팀 무대 (panels) ===== */
.sc-tracks{ flex:1; min-height:0; display:flex; gap:12px; }
.sc-tracks .sc-track{ flex:1; }
.pn-grid{ flex:1; min-height:0; width:100%; display:grid; gap:12px; grid-auto-rows:minmax(0,1fr); }
.pn{ position:relative; min-height:0; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; border:4px solid var(--c); background:rgba(14,8,56,.72); box-shadow:0 6px 0 rgba(14,8,56,.85); transition:box-shadow .3s; }
.pn.lead{ box-shadow:0 0 0 4px #FFD12E,0 0 30px rgba(255,209,46,.55),0 6px 0 rgba(14,8,56,.85); }
.pn-h{ display:flex; align-items:center; gap:8px; padding:6px 10px; background:linear-gradient(90deg,var(--c),transparent 85%); font-family:var(--game); }
.pn-h em{ font-style:normal; min-width:1.7em; height:1.7em; border-radius:50%; background:#1B1050; display:grid; place-items:center; font-size:clamp(13px,1.2vw,20px); }
.pn-h b{ flex:1; font-weight:400; font-size:clamp(15px,1.5vw,26px); text-shadow:0 2px 0 #1B1050; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pn-h i{ font-style:normal; color:#FFD12E; font-size:clamp(18px,1.9vw,34px); text-shadow:0 3px 0 #1B1050; }
.pn-h i.bump{ animation:scBump .35s; }
.pn-b{ position:relative; flex:1; min-height:0; container-type:size; overflow:hidden; }
.pn-pop{ position:absolute; bottom:30%; transform:translateX(-50%); white-space:nowrap; font-family:var(--game); font-size:max(12px,9cqmin); color:#fff; text-shadow:0 2px 0 #1B1050,0 0 8px var(--c); animation:pnPop 1.2s ease-out forwards; pointer-events:none; z-index:6; }
.pn-pop.gold{ color:#FFD12E; } .pn-pop.bad{ color:#FF8A8A; } .pn-pop.note{ color:#9FF; }
@keyframes pnPop{ 0%{ opacity:0; transform:translate(-50%,20%) scale(.6); } 15%{ opacity:1; transform:translate(-50%,0) scale(1.1); } 100%{ opacity:0; transform:translate(-50%,-160%); } }
/* 연타왕 */
.tp-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6cqmin; }
.tp-btn{ width:56cqmin; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FF8A8A,#E8323F 60%,#9E1727); border:1.4cqmin solid #1B1050; box-shadow:0 5cqmin 0 #6B0F1A,0 6cqmin 0 #1B1050; display:grid; place-items:center; transition:transform .06s; }
.tp-btn span{ font-family:var(--game); font-size:13cqmin; color:#fff; text-shadow:0 1cqmin 0 rgba(0,0,0,.35); }
.tp-btn.hit{ animation:tpHit .14s; } @keyframes tpHit{ 50%{ transform:translateY(4cqmin); box-shadow:0 1cqmin 0 #6B0F1A,0 2cqmin 0 #1B1050; } }
.tp-meter{ width:80%; height:6cqmin; border-radius:9px; background:rgba(255,255,255,.12); overflow:hidden; } .tp-meter i{ display:block; height:100%; background:var(--c); transition:width .3s; }
/* 흔들흔들 */
.sk{ position:absolute; inset:0; display:grid; place-items:center; }
.sk-bot{ position:relative; width:30cqmin; height:78cqmin; border-radius:9cqmin 9cqmin 6cqmin 6cqmin; border:1.2cqmin solid #1B1050; background:rgba(200,240,255,.25); overflow:hidden; }
.sk-cap{ position:absolute; top:-1cqmin; left:25%; right:25%; height:8cqmin; background:var(--c); border-bottom:1cqmin solid #1B1050; z-index:2; }
.sk-liq{ position:absolute; left:0; right:0; bottom:0; height:8%; background:linear-gradient(180deg,#FFF6,var(--c) 30%); transition:height .3s; }
.sk-bot u{ position:absolute; inset:0; background:radial-gradient(circle,#fff8 1.2cqmin,transparent 1.4cqmin) 0 0/9cqmin 11cqmin; animation:skBub 1.2s linear infinite; opacity:.6; }
@keyframes skBub{ to{ background-position:0 -11cqmin; } }
.sk-bot.wob{ animation:skWob .25s; } @keyframes skWob{ 25%{ transform:rotate(-12deg); } 75%{ transform:rotate(12deg); } }
.sk-bot.full .sk-cap{ animation:skPop .6s infinite; } @keyframes skPop{ 50%{ transform:translateY(-6cqmin); } }
/* 문질문질 */
.rb{ position:absolute; inset:6%; border-radius:4cqmin; border:1.2cqmin solid #8B5A2B; background:linear-gradient(180deg,#9FE3FF,#E6F8FF); overflow:hidden; display:grid; place-items:center; }
.rb img{ height:80%; }
.rb-dirt{ position:absolute; inset:0; background:radial-gradient(circle at 30% 40%,#6B4E2E,transparent 40%),radial-gradient(circle at 70% 60%,#5A4024,transparent 45%),rgba(110,85,55,.92); transition:opacity .4s; }
.rb-hand{ position:absolute; font-size:24cqmin; } .rb-shine{ position:absolute; right:8%; top:6%; font-size:18cqmin; transition:opacity .4s; opacity:0; }
/* 박자왕 */
.bt{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:6cqmin; }
.bt-eq{ position:absolute; left:6%; right:6%; top:6%; bottom:45%; display:flex; align-items:flex-end; gap:2%; } .bt-eq i{ flex:1; border-radius:2cqmin 2cqmin 0 0; background:linear-gradient(180deg,#FFD12E,var(--c)); }
.bt-drum{ font-size:34cqmin; line-height:1; } .bt-drum.hit{ animation:btHit .2s; } @keyframes btHit{ 40%{ transform:scale(1.25,.8); } }
/* 레몬짜기 */
.gg{ position:absolute; inset:0; }
.gg-l{ position:absolute; left:50%; top:4%; width:36cqmin; transform:translateX(-50%); transition:transform .15s; } .gg-l.sq{ transform:translateX(-50%) scale(1.2,.75); }
.gg-drop{ position:absolute; left:50%; top:38%; width:3cqmin; height:12cqmin; border-radius:9px; background:#FFE24A; transform:translateX(-50%); animation:ggDrop .3s linear infinite; opacity:0; } @keyframes ggDrop{ from{ transform:translate(-50%,-30%); } to{ transform:translate(-50%,60%); } }
.gg-cup{ position:absolute; left:50%; bottom:5%; width:38cqmin; height:42cqmin; transform:translateX(-50%); border:1.2cqmin solid #1B1050; border-top:0; border-radius:0 0 6cqmin 6cqmin; background:rgba(255,255,255,.25); overflow:hidden; } .gg-cup i{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,#FFF39A,#FFD12E); transition:height .3s; }
/* 피아노 */
.pi{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:6%; } .pi-keys{ width:100%; height:62%; display:flex; gap:1.2cqmin; }
.pi-keys i{ flex:1; background:#fff; border:1cqmin solid #1B1050; border-radius:0 0 2cqmin 2cqmin; } .pi-keys i.on{ animation:piOn .5s; } @keyframes piOn{ 0%{ background:var(--c); transform:translateY(3cqmin); } 100%{ background:#fff; } }
/* 색깔 풍선 */
.bl{ position:absolute; inset:0; background:linear-gradient(180deg,#7EC8FF,#CDEBFF); }
.bl-b{ position:absolute; bottom:-25%; width:14cqmin; height:18cqmin; border-radius:50% 50% 48% 48%; background:radial-gradient(circle at 35% 30%,#fff9,var(--b) 45%); border:.8cqmin solid #1B1050; animation:blUp 4s linear forwards; }
.bl-b::after{ content:''; position:absolute; left:50%; top:100%; width:.5cqmin; height:12cqmin; background:#1B1050; }
@keyframes blUp{ to{ transform:translateY(-140cqh); } } .bl-b.pop{ animation:blPop .35s forwards; bottom:30%; } @keyframes blPop{ to{ transform:scale(1.8); opacity:0; } }
/* 가위바위보 */
.rp{ position:absolute; inset:0; display:grid; place-items:center; } .rp-h{ font-size:52cqmin; line-height:1; filter:drop-shadow(0 1.5cqmin 0 #1B1050); }
.rp-h.win{ animation:rpWin .4s; } @keyframes rpWin{ 40%{ transform:scale(1.35) rotate(-10deg); filter:drop-shadow(0 0 6cqmin #FFD12E); } }
/* 폭탄 해체 */
.bm{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2cqmin; }
.bm-b{ height:46cqmin; } .bm-w{ display:flex; gap:4cqmin; } .bm-w i{ width:4cqmin; height:22cqmin; border-radius:2cqmin; background:var(--w); border:.6cqmin solid #1B1050; } .bm-w i.cut{ animation:bmCut .6s; }
@keyframes bmCut{ 30%{ clip-path:polygon(0 0,100% 0,100% 40%,0 50%,0 60%,100% 55%,100% 100%,0 100%); transform:scaleY(1.05); } }
.bm-n{ font-family:var(--game); font-weight:400; font-size:9cqmin; color:#FFD12E; } .bm.boom{ animation:bmBoom .5s; } @keyframes bmBoom{ 20%,60%{ transform:translateX(-4%); background:#FF4D4D55; } 40%,80%{ transform:translateX(4%); } }
/* 장애물 피하기 */
.pn-b .dg{ position:absolute; inset:0; background:radial-gradient(circle at 50% 120%,#3B1E8C,#0B0626 70%); overflow:hidden; }
.dg-stars{ position:absolute; inset:0; background:radial-gradient(circle,#fff 1px,transparent 1.5px) 0 0/7cqmin 9cqmin; animation:dgSt 2s linear infinite; opacity:.6; } @keyframes dgSt{ to{ background-position:0 9cqmin; } }
.dg-m{ position:absolute; top:-20%; width:13cqmin; animation:dgM 2.5s linear infinite; } @keyframes dgM{ to{ transform:translateY(140cqh) rotate(200deg); } }
.dg-r{ position:absolute; width:20cqmin; transform:translateX(-50%); transition:bottom .4s; filter:drop-shadow(0 0 3cqmin var(--c)); }
.dg-alt{ position:absolute; right:4%; top:4%; font-family:var(--game); font-weight:400; font-size:9cqmin; color:#9FF; }
/* 탑 쌓기 */
.st{ position:absolute; inset:0; background:linear-gradient(180deg,#8FD3FF,#E7F6FF); overflow:hidden; }
.st-g{ position:absolute; left:0; right:0; bottom:0; height:6%; background:#5BC85B; }
.st-t{ position:absolute; left:15%; right:15%; bottom:6%; display:flex; flex-direction:column; transition:transform .4s; }
.st-t i{ display:block; flex:none; height:7cqh; box-sizing:border-box; border:.6cqmin solid #1B1050; border-radius:1cqmin; animation:stIn .3s; } @keyframes stIn{ from{ transform:translateY(-200%); opacity:0; } }
/* 줄 지우기 */
.ln{ position:absolute; inset:5% 18%; display:flex; flex-direction:column; gap:.5cqmin; background:rgba(0,0,0,.35); border:.8cqmin solid #6F60E8; padding:1cqmin; }
.ln-r{ flex:1; display:flex; gap:.5cqmin; } .ln-r i{ flex:1; border-radius:.8cqmin; } .ln-r.clr i{ animation:lnClr .5s; } @keyframes lnClr{ 0%,60%{ background:#fff !important; } }
/* 반짝 기억 */
.mm{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqmin; }
.mm-g{ width:60cqmin; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6cqmin; } .mm-g i{ aspect-ratio:1; border-radius:2cqmin; background:rgba(255,255,255,.12); border:.6cqmin solid #6F60E8; } .mm-g i.on{ animation:mmOn .6s; } @keyframes mmOn{ 30%{ background:#FFD12E; box-shadow:0 0 4cqmin #FFD12E; } }
.mm-l{ font-family:var(--game); font-weight:400; font-size:10cqmin; color:#FFD12E; }
/* 다른 색 찾기 */
.cl{ position:absolute; inset:0; display:grid; place-items:center; } .cl-g{ width:78cqmin; aspect-ratio:1; display:grid; gap:1.2cqmin; } .cl-g i{ border-radius:1.5cqmin; } .cl-g i.odd{ animation:clOdd 2s infinite; } @keyframes clOdd{ 85%{ outline:0 solid #fff; } 92%{ outline:1cqmin solid #fff; } }
/* 숫자 사냥 */
.nm16{ position:absolute; inset:6%; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6cqmin; } .nm16 i{ display:grid; place-items:center; font-style:normal; font-family:var(--game); font-size:9cqmin; border-radius:2cqmin; background:rgba(255,255,255,.1); color:#B3AEE0; transition:all .25s; } .nm16 i.on{ background:var(--c); color:#1B1050; transform:scale(.92); }
/* 금고 열기 */
.sf{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3cqmin; perspective:600px; }
.sf-door{ width:56cqmin; aspect-ratio:1; border-radius:5cqmin; background:linear-gradient(145deg,#C9CDD6,#7D8494); border:1.4cqmin solid #1B1050; display:grid; place-items:center; transform-origin:left center; }
.sf-door.open{ animation:sfOpen 1s; } @keyframes sfOpen{ 30%,70%{ transform:rotateY(-70deg); box-shadow:inset 0 0 0 100cqmin #FFD12E; } }
.sf-dial{ width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#555 0 20%,#2B2F3A 21% 60%,#9AA0AD 61%); border:1cqmin solid #1B1050; position:relative; } .sf-dial i{ position:absolute; left:50%; top:4%; width:2cqmin; height:22%; background:#FFD12E; transform:translateX(-50%); }
.sf-n{ font-family:var(--game); font-weight:400; font-size:9cqmin; color:#FFD12E; }

/* 큰 화면 채팅 · 점수 주기 창 */
.chatbox{ position:fixed !important; left:18px; bottom:44px; z-index:40; display:flex; flex-direction:column; gap:8px; max-width:min(520px,40vw); pointer-events:none; }
.chatbox .cb{ align-self:flex-start; padding:8px 16px; border-radius:18px 18px 18px 4px; background:rgba(14,8,56,.88); border:3px solid var(--c); font-size:clamp(15px,1.4vw,24px); font-weight:800; color:#fff; animation:cbIn .3s; word-break:break-all; }
.chatbox .cb b{ color:var(--c); margin-right:8px; font-family:var(--game); font-weight:400; }
@keyframes cbIn{ from{ transform:translateX(-30px); opacity:0; } }
.bn{ display:flex; flex-direction:column; gap:8px; margin-top:12px; max-height:56vh; overflow:auto; }
.bn-r{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:14px; background:rgba(0,0,0,.25); border-left:8px solid var(--c); }
.bn-r b{ flex:1; text-align:left; font-family:var(--game); font-weight:400; font-size:18px; }
.bn-r span{ min-width:56px; font-weight:900; color:#FFD12E; }
.arcM .bn-r button{ flex:none; padding:8px 10px; font-size:16px; border-radius:12px; min-width:44px; }
.arcM .bx:has(.bn){ width:min(560px,100%); }
/* 폰 채팅 */
.chatfab{ position:fixed !important; z-index:900 !important; right:14px; bottom:16px; z-index:60; width:58px; height:58px; border-radius:50%; font-size:28px; border:3px solid #0E0838; background:linear-gradient(180deg,#8CFFE9,#14B898); box-shadow:0 5px 0 #0A6E5B; display:none; }
.chatfab.on{ display:block; } .chatfab i{ position:absolute; right:-2px; top:-2px; min-width:20px; height:20px; border-radius:10px; background:#FF4D6D; color:#fff; font-size:12px; font-style:normal; font-weight:900; display:none; place-items:center; padding:0 5px; }
.chatfab i.on{ display:grid; }
.chl{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto; margin:10px 0; text-align:left; }
.chl div{ padding:7px 12px; border-radius:14px; background:rgba(0,0,0,.28); border-left:5px solid var(--c); font-size:15px; word-break:break-all; }
.chl div b{ color:var(--c); margin-right:6px; } .chl div.me{ background:rgba(91,245,214,.18); }
.chin{ display:flex; gap:8px; } .chin input{ flex:1; min-width:0; padding:12px; border-radius:14px; border:3px solid #0E0838; font-size:16px; }
.arcM .chin button{ flex:none; padding:10px 16px; }
.bn-done{ display:flex; margin-top:16px; } .bn-done button{ flex:1; }

/* ===== 폰 게임 그림 (힉스필드) ===== */
.g-tapw{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.g-tapc{ font-family:var(--game); text-align:center; line-height:1; } .g-tapc b{ font-weight:400; font-size:64px; color:#FFD12E; text-shadow:0 4px 0 #1B1050; } .g-tapc small{ font-size:20px; margin-left:4px; }
.g-tapbtn{ position:relative; width:min(80vw,340px); aspect-ratio:1; background:none; border:0; padding:0; -webkit-tap-highlight-color:transparent; }
.g-tapbtn img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 0 rgba(14,8,56,.6)); transition:transform .05s; pointer-events:none; }
.g-tapbtn span{ position:absolute; left:0; right:0; top:32%; text-align:center; font-family:var(--game); font-size:44px; color:#fff; text-shadow:0 3px 0 #9E1727; pointer-events:none; }
.g-tapbtn.hit img{ transform:scale(.94,.88) translateY(5%); }
.g-tapfx{ position:absolute; inset:0; pointer-events:none; } .g-tapfx i{ position:absolute; font-style:normal; font-family:var(--game); font-size:28px; color:#FFD12E; text-shadow:0 2px 0 #1B1050; animation:tapUp .6s ease-out forwards; }
@keyframes tapUp{ to{ transform:translateY(-70px) scale(1.3); opacity:0; } }
.g-soda{ position:relative; width:150px; height:200px; } .g-soda img{ width:100%; height:100%; object-fit:contain; animation:wob .6s infinite; }
.g-soda.hit img{ animation:skWob .2s; } .g-fizz{ position:absolute; inset:0; pointer-events:none; } .g-fizz i{ position:absolute; top:10%; width:14px; height:14px; border-radius:50%; border:2px solid #fff; background:rgba(255,255,255,.3); animation:fzUp .9s ease-out forwards; }
@keyframes fzUp{ to{ transform:translateY(-120px) scale(1.6); opacity:0; } }
.g-win{ overflow:hidden; } .g-winimg{ position:absolute; inset:6%; width:88%; height:88%; object-fit:fill; pointer-events:none; }
.g-dirt{ position:absolute; inset:9%; border-radius:8px; background:radial-gradient(circle at 25% 30%,#7A5A36,transparent 35%),radial-gradient(circle at 70% 65%,#6B4E2E,transparent 40%),rgba(120,92,58,.88); transition:opacity .25s; pointer-events:none; }
.g-sponge{ position:absolute; left:50%; top:50%; width:110px; transform:translate(-50%,-50%); pointer-events:none; } .g-sponge img{ width:100%; }
.g-win .g-note{ position:absolute; bottom:4%; left:0; right:0; text-align:center; z-index:2; text-shadow:0 2px 0 #1B1050; }
.g-shine{ position:absolute; left:0; right:0; top:40%; text-align:center; font-family:var(--game); font-size:40px; color:#FFD12E; text-shadow:0 3px 0 #1B1050; opacity:0; }
.g-shine.show{ animation:shineA .8s; } @keyframes shineA{ 30%{ opacity:1; transform:scale(1.2); } }
.g-drum{ position:absolute; left:50%; top:50%; width:min(34vw,150px); transform:translate(-50%,-50%); pointer-events:none; } .g-drum img{ width:100%; } .g-drum.hit{ animation:drumHit .2s; }
@keyframes drumHit{ 40%{ transform:translate(-50%,-50%) scale(1.15,.85); } }
.g-lrow{ display:flex; align-items:flex-end; gap:14px; justify-content:center; }
.g-lem{ position:relative; width:76px; align-self:flex-start; transition:transform .12s; } .g-lem img{ width:100%; } .g-lem.sq{ transform:scale(1.15,.8); }
.g-drop{ position:absolute; left:46%; top:80%; width:8px; height:24px; border-radius:9px; background:#FFE24A; opacity:0; } .g-lem.pour .g-drop{ animation:ggDrop .3s linear infinite; opacity:1; }
.g-glass{ position:relative; width:84px; height:126px; } .g-glass img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.g-glass i{ position:absolute; left:26%; right:26%; bottom:8%; height:0; background:linear-gradient(180deg,#FFF39A,#FFD12E); border-radius:0 0 6px 6px; transition:height .3s; }
.g-cpu{ width:130px; height:130px; } .g-cpu img{ width:100%; height:100%; object-fit:contain; }
.g-hand img{ width:62px; height:62px; object-fit:contain; display:block; margin:0 auto; pointer-events:none; }
.g-safe{ width:120px; height:120px; } .g-safe img{ width:100%; height:100%; object-fit:contain; } .g-safe.hit{ animation:sfPop .5s; } .g-safe.no{ animation:sfNo .3s; }
@keyframes sfPop{ 40%{ transform:scale(1.25); } } @keyframes sfNo{ 25%{ transform:translateX(-8px); } 75%{ transform:translateX(8px); } }
.g-watch{ position:relative; width:120px; height:120px; } .g-watch img{ width:100%; height:100%; object-fit:contain; }
.g-hand2{ position:absolute; left:50%; top:58%; width:4px; height:30%; background:#1B1050; border-radius:4px; transform-origin:50% 100%; transform:translate(-50%,-100%); }
.g-ham{ position:absolute; right:-14%; top:-30%; width:70%; pointer-events:none; animation:hamA .3s; z-index:3; } .g-ham img{ width:100%; } @keyframes hamA{ from{ transform:rotate(-50deg); } to{ transform:rotate(20deg); } }
.g-bal{ background:none !important; width:76px !important; height:96px !important; border-radius:0 !important; } .g-bal::after{ display:none !important; }
.g-bal img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.g-bal::before{ content:''; position:absolute; inset:0; background:var(--b); mix-blend-mode:multiply; -webkit-mask:url(img/s_balloon.webp) center/contain no-repeat; mask:url(img/s_balloon.webp) center/contain no-repeat; z-index:1; pointer-events:none; }
/* 탑 쌓기 (폰) */
.g-stk{ position:absolute; inset:0; border-radius:22px; overflow:hidden; } .g-stk canvas{ width:100%; height:100%; display:block; }
.g-stkh{ position:absolute; left:12px; top:12px; font-family:var(--game); text-shadow:0 3px 0 #1B1050; pointer-events:none; } .g-stkh b{ font-weight:400; font-size:34px; color:#FFD12E; display:block; line-height:1; } .g-stkh small{ font-size:15px; }
.g-stkc{ position:absolute; left:0; right:0; top:34%; text-align:center; font-family:var(--game); font-size:34px; opacity:0; pointer-events:none; text-shadow:0 3px 0 #1B1050; }
.g-stkc.good{ color:#FFD12E; } .g-stkc.bad{ color:#FF8A8A; } .g-stkc.show{ animation:shineA .9s; }

/* ===== 큰 화면 무대 그림 (힉스필드) ===== */
.tp-btn2{ position:relative; width:62cqmin; aspect-ratio:1; } .tp-btn2 img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2cqmin 0 rgba(14,8,56,.6)); }
.tp-btn2 span{ position:absolute; left:0; right:0; top:30%; text-align:center; font-family:var(--game); font-size:10cqmin; color:#fff; text-shadow:0 .8cqmin 0 #9E1727; }
.tp-btn2.hit img{ animation:tp2 .14s; } @keyframes tp2{ 50%{ transform:scale(.94,.86) translateY(5%); } }
.sk-soda{ height:80cqmin; filter:drop-shadow(0 2cqmin 0 rgba(14,8,56,.5)); } .sk-soda.wob{ animation:skWob .25s; } .sk-soda.full{ animation:skPop .6s infinite; }
.sk{ gap:5cqmin; display:flex !important; align-items:center; justify-content:center; }
.sk-m{ position:relative; width:7cqmin; height:70cqmin; border-radius:4cqmin; background:rgba(255,255,255,.12); border:.8cqmin solid #1B1050; overflow:hidden; } .sk-m i{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,#fff,var(--c)); transition:height .3s; }
.sk-fz{ position:absolute; inset:0; pointer-events:none; } .sk-fz i{ position:absolute; top:12%; width:4cqmin; height:4cqmin; border-radius:50%; border:.6cqmin solid #fff; animation:fzUp .9s ease-out forwards; }
.rb{ background:none !important; border:0 !important; } .rb-w{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; } .rb-dirt{ inset:10% !important; border-radius:2cqmin; }
.rb img.rb-hand{ position:absolute; width:30cqmin; height:auto; }
img.bt-drum{ width:44cqmin; font-size:0; } img.bt-drum.hit{ animation:btHit .2s; }
.gg-cup{ border:0 !important; background:none !important; width:34cqmin !important; height:50cqmin !important; overflow:visible !important; } .gg-cup img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.gg-cup i{ left:27% !important; right:27% !important; bottom:8% !important; max-height:72%; border-radius:0 0 1.5cqmin 1.5cqmin; }
.bl-b{ background:none !important; border:0 !important; border-radius:0 !important; width:18cqmin !important; height:24cqmin !important; } .bl-b::after{ content:'' !important; position:absolute; inset:0; left:0 !important; top:0 !important; width:auto !important; height:auto !important; background:var(--b) !important; mix-blend-mode:multiply; -webkit-mask:url(img/s_balloon.webp) center/contain no-repeat; mask:url(img/s_balloon.webp) center/contain no-repeat; }
.bl-b img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
img.rp-h{ width:60cqmin; height:60cqmin; object-fit:contain; font-size:0; }
.sf-img{ width:50cqmin; height:50cqmin; object-fit:contain; filter:drop-shadow(0 2cqmin 0 rgba(14,8,56,.5)); } .sf-img.open{ animation:sfPop .6s; }
.sc-ham{ position:absolute; right:0; top:-10%; width:60%; z-index:4; animation:hamA .35s; pointer-events:none; }
/* 탑 쌓기 무대 */
.st{ background:linear-gradient(180deg,#8FD3FF,#CDEBFF); }
.st-stars{ position:absolute; inset:0; opacity:0; background:radial-gradient(circle,#fff 1px,transparent 1.6px) 0 0/8cqmin 10cqmin; }
.st-t{ left:34% !important; right:34% !important; bottom:7% !important; }
.st-f{ position:relative; aspect-ratio:420/127; height:auto; flex:none; animation:stIn .35s; } .st-f img{ width:100%; height:100%; object-fit:fill; display:block; }
.st-f::after{ content:''; position:absolute; inset:6%; background:hsl(var(--fh),85%,80%); mix-blend-mode:multiply; }
.st-g{ height:7% !important; transition:transform .4s; }
.st-crane{ position:absolute; left:50%; top:0; height:24%; width:32%; transform-origin:50% 0; animation:stSwing 2.2s ease-in-out infinite alternate; display:flex; flex-direction:column; align-items:center; }
.st-crane::before{ content:''; width:.5cqmin; flex:1; background:#2B2350; } .st-hook{ height:9cqh; } .st-hang{ width:100%; aspect-ratio:420/127; height:auto; object-fit:fill; flex:none; }
@keyframes stSwing{ from{ transform:translateX(-50%) rotate(-18deg); } to{ transform:translateX(-50%) rotate(18deg); } }
.st-h{ position:absolute; right:3%; top:3%; font-family:var(--game); font-weight:400; font-size:7cqmin; color:#fff; text-shadow:0 .6cqmin 0 #1B1050; }
.g-tprog{ width:86%; display:flex; align-items:center; gap:8px; font-weight:800; } .g-tprog b{ font-family:var(--game); font-weight:400; font-size:16px; white-space:nowrap; }
.g-tbar{ flex:1; height:16px; border-radius:9px; background:rgba(255,255,255,.14); overflow:hidden; border:2px solid #1B1050; } .g-tbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--team,#FFD12E),#FFD12E); transition:width .3s; }
.g-tfin{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; background:rgba(14,8,56,.82); border-radius:26px; font-size:80px; z-index:5; }
.g-tfin.on{ display:flex; animation:arcMp .4s; } .g-tfin b{ font-family:var(--game); font-weight:400; font-size:46px; color:#FFD12E; text-shadow:0 4px 0 #1B1050; } .g-tfin small{ font-size:20px; font-weight:800; }
.tp-meter{ position:relative; overflow:visible !important; } .tp-meter b{ position:absolute; right:-4cqmin; top:50%; transform:translateY(-50%); font-size:8cqmin; }
.tp-fin{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; background:rgba(14,8,56,.92); z-index:8; font-size:22cqmin; }
.tp-fin.on{ display:flex; animation:arcMp .4s; } .tp-fin b{ font-family:var(--game); font-weight:400; font-size:13cqmin; color:#FFD12E; text-shadow:0 1cqmin 0 #1B1050; } .tp-fin small{ font-size:6cqmin; font-weight:800; }
/* 북채 — 칠 때 내려침 */
.g-drum{ width:min(44vw,190px) !important; } .g-drum img{ display:block; }
.g-drum .stk, .bt-dw .stk{ position:absolute; top:-6%; width:7%; height:62%; border-radius:999px; background:linear-gradient(90deg,#E8B26A,#B9772E); border:2px solid #1B1050; transform-origin:50% 0; }
.g-drum .stk::after, .bt-dw .stk::after{ content:''; position:absolute; left:50%; bottom:-6%; width:150%; aspect-ratio:1; border-radius:50%; background:#F5E3C4; border:2px solid #1B1050; transform:translateX(-50%); }
.stk.l{ left:22%; transform:rotate(-38deg); } .stk.r{ right:22%; transform:rotate(38deg); }
.hl .stk.l{ animation:stkL .22s; } .hr .stk.r{ animation:stkR .22s; } .hl img, .hr img{ animation:drumImg .2s; } @keyframes drumImg{ 40%{ transform:scale(1.08,.9); } }
@keyframes stkL{ 40%{ transform:rotate(-5deg) translateY(10%); } } @keyframes stkR{ 40%{ transform:rotate(5deg) translateY(10%); } }
.g-drum.hl, .g-drum.hr{ animation:none; }
.bt-dw{ position:relative; width:44cqmin; } .bt-dw img.bt-drum{ width:100%; display:block; }
/* 두더지 컨트롤러 (폰) */
.g-ctrlN{ text-align:center; margin-bottom:8px; }
.g-pad9{ background:linear-gradient(180deg,#6F60E8,#4A3BC4) !important; border:3px solid #1B1050 !important; box-shadow:0 6px 0 #231877 !important; border-radius:22px !important; }
.g-pad9 b{ font-family:var(--game); font-weight:400; font-size:40px; color:#fff; text-shadow:0 3px 0 #1B1050; } .g-pad9 span{ display:none; }
.g-pad9.press{ animation:padP .15s; } @keyframes padP{ 50%{ transform:translateY(4px); box-shadow:0 2px 0 #231877 !important; background:#FFD12E !important; } }
.sc-hn{ position:absolute; left:8%; bottom:6%; font-style:normal; font-family:var(--game); font-size:clamp(14px,2vw,34px); color:#fff; text-shadow:0 3px 0 #1B1050; z-index:3; }
/* 탑 쌓기 끝 */
.g-stko{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:rgba(14,8,56,.7); animation:arcMp .4s; }
.g-stko b{ font-family:var(--game); font-weight:400; font-size:30px; } .g-stko big{ font-family:var(--game); font-size:72px; color:#FFD12E; text-shadow:0 5px 0 #1B1050; } .g-stko small{ font-weight:800; text-align:center; padding:0 20px; }

/* ===== OX 서바이벌 ===== */
.sv-st{ font-family:var(--game); font-size:22px; color:#FF8FA3; } .sv-st.out{ color:#9AA0AD; }
.sv .g-q small{ font-size:13px; color:#B3AEE0; }
.sv-zones{ display:flex; gap:12px; width:100%; } .sv-z{ flex:1; padding:22px 0; border-radius:22px; font-size:56px; border:4px solid #1B1050; box-shadow:0 6px 0 #1B1050; display:flex; flex-direction:column; align-items:center; gap:4px; }
.sv-z small{ font-size:15px; font-family:var(--game); color:#fff; } .sv-z.o{ background:linear-gradient(180deg,#5BE58F,#1FA35A); } .sv-z.x{ background:linear-gradient(180deg,#FF7B8A,#D9324A); }
.sv-z.sel{ outline:5px solid #FFD12E; transform:translateY(-4px); } .sv-z.right{ box-shadow:0 0 0 6px #FFD12E,0 6px 0 #1B1050; } .sv-z.dim{ opacity:.3; }
.sv-box{ flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; padding:16px 20px; border-radius:28px; background:rgba(14,8,56,.8); border:4px solid #1B1050; }
.sv-q{ text-align:center; font-size:clamp(24px,3vw,52px); font-weight:900; display:flex; flex-direction:column; align-items:center; gap:6px; } .sv-q small{ font-size:.4em; color:#FFD12E; font-family:var(--game); }
.sv-arena{ flex:1; min-height:0; display:flex; gap:16px; }
.sv-a{ flex:1; border-radius:24px; border:4px solid #1B1050; padding:12px; display:flex; flex-direction:column; align-items:center; gap:6px; transition:opacity .3s,box-shadow .3s; }
.sv-a.o{ background:linear-gradient(180deg,rgba(91,229,143,.45),rgba(31,163,90,.25)); } .sv-a.x{ background:linear-gradient(180deg,rgba(255,123,138,.45),rgba(217,50,74,.25)); }
.sv-a b{ font-size:clamp(40px,5vw,90px); line-height:1; } .sv-a em{ font-style:normal; font-family:var(--game); font-size:clamp(20px,2vw,36px); }
.sv-a .dots{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; } .sv-a .dots i{ width:clamp(12px,1.2vw,20px); aspect-ratio:1; border-radius:50%; border:2px solid #1B1050; animation:cbIn .3s; }
.sv-a.right{ box-shadow:0 0 0 6px #FFD12E,0 0 40px rgba(255,209,46,.6); } .sv-a.dim{ opacity:.25; }
.sv-alive{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .sv-alive span{ padding:5px 12px; border-radius:999px; border:3px solid var(--c); background:rgba(0,0,0,.35); font-size:clamp(13px,1.2vw,20px); display:flex; gap:6px; align-items:center; } .sv-alive b{ font-family:var(--game); font-weight:400; } .sv-alive small{ color:#B3AEE0; font-weight:800; }
/* ===== 타자 레이스 ===== */
.ty-n{ font-family:var(--game); font-size:22px; color:#FFD12E; }
.ty-b{ width:100%; min-height:90px; padding:16px; border-radius:20px 20px 20px 6px; background:#fff; color:#1B1050; font-size:24px; font-weight:900; line-height:1.4; border:3px solid #1B1050; box-shadow:0 5px 0 rgba(14,8,56,.8); word-break:keep-all; }
.ty-b span.ok{ color:#16A35A; } .ty-b span.no{ color:#E8323F; background:#FFE0E0; border-radius:3px; }
.ty-in{ width:100%; padding:16px; border-radius:16px; border:3px solid #1B1050; font-size:20px; font-weight:800; }
.tyc{ position:absolute; inset:0; display:flex; flex-direction:column; padding:4%; gap:3%; } .tyc-l{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:2.5cqmin; overflow:hidden; }
.tyc-m{ align-self:flex-start; max-width:96%; padding:1.6cqmin 3cqmin; border-radius:4cqmin 4cqmin 4cqmin 1cqmin; background:#fff; color:#1B1050; font-weight:800; font-size:5.2cqmin; animation:cbIn .3s; display:flex; gap:2cqmin; align-items:baseline; flex-wrap:wrap; } .tyc-m b{ color:var(--c); filter:brightness(.8); } .tyc-m small{ color:#888; font-size:.8em; }
.tyc-p{ height:5cqmin; border-radius:9px; background:rgba(255,255,255,.12); overflow:hidden; } .tyc-p i{ display:block; height:100%; background:var(--c); transition:width .3s; }
/* ===== 짝꿍 카드 ===== */
.cs-g{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; }
.cs-c{ background:none; border:0; padding:0; border-radius:16px; transition:transform .1s; } .cs-c svg{ width:100%; display:block; filter:drop-shadow(0 4px 0 rgba(14,8,56,.6)); }
.cs-c.sel{ transform:translateY(-6px) scale(1.04); } .cs-c.sel svg{ filter:drop-shadow(0 0 0 #FFD12E) drop-shadow(0 0 8px #FFD12E); outline:4px solid #FFD12E; border-radius:16px; }
.cs-c.good{ animation:csG .5s; } .cs-c.bad{ animation:sfNo .3s; } @keyframes csG{ 40%{ transform:scale(1.15); } }
.cs-box{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:14px 20px; border-radius:28px; background:rgba(14,8,56,.78); border:4px solid #1B1050; }
.cs-h{ display:flex; gap:18px; align-items:center; justify-content:center; font-family:var(--game); font-size:clamp(18px,1.8vw,32px); } .cs-h em{ font-style:normal; color:#FFD12E; }
.cs-wrap{ flex:1; min-height:0; display:flex; gap:20px; }
.cs-bg{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:14px; aspect-ratio:1; max-height:100%; margin:0 auto; }
.cs-bg .cs-c{ display:flex; } .cs-bg .cs-c svg{ width:100%; height:100%; } .cs-bg .cs-c.hit{ animation:csHit 1.2s; } @keyframes csHit{ 15%,60%{ transform:scale(1.08); filter:drop-shadow(0 0 18px var(--c)); } }
.cs-side{ width:min(360px,32%); display:flex; flex-direction:column; gap:8px; } .cs-side h4{ margin:0; font-family:var(--game); font-weight:400; font-size:clamp(18px,1.6vw,28px); }
.cs-r{ display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:14px; background:rgba(0,0,0,.35); border-left:8px solid var(--c); animation:cbIn .3s; } .cs-r b{ flex:1; font-size:clamp(14px,1.3vw,22px); } .cs-r span{ display:flex; gap:4px; } .cs-r svg{ width:clamp(26px,2.4vw,42px); }
/* ===== 팀 줄다리기 ===== */
.tg-vs{ font-family:var(--game); font-size:28px; text-shadow:0 3px 0 #1B1050; }
.tg-rope{ position:relative; width:100%; height:90px; border-radius:20px; background:linear-gradient(180deg,#7BD36B,#4CA84C); border:3px solid #1B1050; overflow:hidden; }
.tg-img{ position:absolute; left:-10%; width:120%; top:50%; margin-top:-22px; height:44px; object-fit:fill; transition:transform .25s; }
.tg-mid{ position:absolute; top:0; bottom:0; width:4px; left:50%; background:#fff; opacity:.9; transition:left .25s; z-index:2; }
.tg-l, .tg-r{ position:absolute; top:4px; font-family:var(--game); font-weight:400; font-size:16px; z-index:3; text-shadow:0 2px 0 #1B1050; } .tg-l{ left:10px; } .tg-r{ right:10px; }
.tg-rope::before, .tg-rope::after{ content:''; position:absolute; top:0; bottom:0; width:4px; background:repeating-linear-gradient(180deg,#fff 0 8px,transparent 8px 14px); left:18%; } .tg-rope::after{ left:auto; right:18%; }
.tg-btn{ width:min(80vw,320px) !important; height:auto !important; padding:40px 0 !important; font-size:44px !important; }
.sc-tug .tg-grid{ flex:1; min-height:0; display:grid; gap:14px; grid-auto-rows:minmax(0,1fr); }
.tg-m{ position:relative; min-height:0; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; border:4px solid #1B1050; background:rgba(14,8,56,.75); box-shadow:0 6px 0 rgba(14,8,56,.85); }
.tg-hd{ display:flex; justify-content:space-between; align-items:center; padding:6px 14px; font-family:var(--game); font-size:clamp(16px,1.8vw,32px); text-shadow:0 2px 0 #1B1050; } .tg-hd b{ font-weight:400; } .tg-hd span{ color:#FFD12E; }
.tg-field{ position:relative; flex:1; min-height:0; background:linear-gradient(180deg,#8BDB78,#4CA84C); overflow:hidden; container-type:size; }
.tg-line{ position:absolute; top:0; bottom:0; width:.8cqmin; background:repeating-linear-gradient(180deg,#fff 0 3cqmin,transparent 3cqmin 5cqmin); } .tg-line.l{ left:15%; } .tg-line.r{ right:15%; }
.tg-c{ position:absolute; left:50%; top:0; bottom:0; width:.6cqmin; background:#fff; transform:translateX(-50%); }
.tg-move{ position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; transition:transform .25s; }
.tg-rp{ width:30%; height:9cqh; object-fit:fill; position:relative; z-index:2; margin:0 -3%; }
.tg-team{ display:flex; width:37%; align-items:flex-end; flex:none; } .tg-team .tg-k + .tg-k{ margin-left:-6%; } .tg-team.f{ flex-direction:row-reverse; }
.tg-k{ position:relative; width:46%; height:auto; aspect-ratio:148/220; transform:rotate(-12deg); } .tg-team.f .tg-k{ transform:scaleX(-1) rotate(-12deg); } .tg-k .sc-spr{ position:absolute; inset:0; }
.tg-sc{ display:flex; justify-content:space-between; padding:4px 14px; font-weight:800; font-size:clamp(13px,1.2vw,20px); color:#FFD12E; }
.tg-win{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-family:var(--game); font-size:clamp(24px,3vw,56px); background:rgba(14,8,56,.6); color:#fff; text-shadow:0 4px 0 #1B1050,0 0 20px var(--c); z-index:5; }
.tg-win.on{ display:flex; animation:arcMp .4s; } .tg-byet{ flex:1; display:flex; align-items:center; justify-content:center; font-size:clamp(16px,1.6vw,28px); font-weight:800; color:#B3AEE0; }

/* ===== 떡 먹은 친구 찾기 (새 방식) ===== */
.tk2-t{ font-family:var(--game); font-size:20px; color:#FFD12E; }
.tk2-eye{ font-size:90px; line-height:1; } .p-mix .tk2-eye{ animation:spin .8s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } }
.tk2-m{ font-family:var(--game); font-size:28px; text-align:center; text-shadow:0 3px 0 #1B1050; }
.tk2-b{ display:none; flex-wrap:wrap; gap:10px; justify-content:center; width:100%; } .p-ans .tk2-b, .p-rev .tk2-b{ display:flex; }
.tk2-n{ width:calc(33% - 10px); max-width:110px; aspect-ratio:1; border-radius:22px; font-family:var(--game); font-size:44px; color:#fff; background:linear-gradient(180deg,#FFB547,#F07A14); border:4px solid #1B1050; box-shadow:0 6px 0 #1B1050; }
.tk2-n.sel{ outline:5px solid #fff; } .tk2-n.right{ background:linear-gradient(180deg,#5BE58F,#1FA35A); transform:scale(1.08); } .tk2-n.dim{ opacity:.3; }
.tk-st{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:12px 18px; border-radius:28px; background:rgba(14,8,56,.35); border:4px solid #1B1050; }
.tk-h{ display:flex; gap:18px; justify-content:center; font-family:var(--game); font-size:clamp(18px,1.8vw,32px); text-shadow:0 2px 0 #1B1050; } .tk-h em{ font-style:normal; color:#FFD12E; }
.tk-field{ position:relative; flex:1; min-height:0; }
.tk-k{ position:absolute; bottom:6%; height:62%; aspect-ratio:240/260; transform:translate(-50%,0); }
.tk-body{ position:absolute; inset:0; transform-origin:50% 70%; } .tk-sh{ position:absolute; left:50%; bottom:-3%; width:60%; height:8%; border-radius:50%; background:rgba(0,0,0,.45); transform:translateX(-50%); }
.tk-i{ width:100%; height:100%; object-fit:contain; object-position:bottom; display:block; }
.tk-ricecake{ position:absolute; left:50%; top:-30%; width:60%; transform:translateX(-50%); opacity:0; }
.tk-k.eat .tk-ricecake{ animation:tkEat 1.4s ease-in .2s forwards; } @keyframes tkEat{ 0%{ opacity:1; top:-40%; } 60%{ opacity:1; top:12%; transform:translateX(-50%) scale(.6); } 75%,100%{ opacity:0; top:14%; transform:translateX(-50%) scale(.2); } }
.tk-k.eat .tk-i{ animation:tkChomp .25s 1.2s 4 alternate; } @keyframes tkChomp{ to{ transform:scale(1.06,.94); } }
.tk-nyam{ position:absolute; left:70%; top:-6%; font-family:var(--game); font-weight:400; font-size:clamp(18px,2vw,36px); color:#fff; background:#FF6FA0; padding:2px 10px; border-radius:14px; border:3px solid #1B1050; opacity:0; }
.tk-k.eat .tk-nyam{ animation:tkNy 1s 1.2s forwards; } @keyframes tkNy{ 20%,80%{ opacity:1; transform:scale(1.1); } 100%{ opacity:0; } }
.tk-k.sil .tk-i{ filter:brightness(0); opacity:.85; transition:filter .4s; }
.tk-k.win{ z-index:3; } .tk-k.win .tk-i{ animation:tkWin .6s infinite alternate; } @keyframes tkWin{ to{ transform:translateY(-6%) scale(1.06); } }
.tk-k.win .tk-ricecake{ opacity:1; top:-34%; animation:none; }
.tk-num{ position:absolute; top:2%; transform:translateX(-50%); width:clamp(34px,3.6vw,66px); aspect-ratio:1; border-radius:50%; display:none; place-items:center; font-family:var(--game); font-size:clamp(20px,2.4vw,42px); color:#fff; background:radial-gradient(circle at 35% 30%,#FF8A8A,#D9324A); border:4px solid #fff; box-shadow:0 4px 0 #1B1050; z-index:4; }
.p-ans .tk-num, .p-rev .tk-num{ display:grid; animation:arcMp .3s; }
.tk-w{ min-height:1.8em; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; font-weight:800; font-size:clamp(14px,1.4vw,22px); } .tk-w span{ padding:4px 12px; border-radius:999px; border:3px solid var(--c); background:rgba(0,0,0,.45); }

/* ===== 공식 캐릭터 ===== */
.chpick{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:none; } .chpick.big{ flex-wrap:wrap; justify-content:center; overflow:visible; }
.chb{ flex:none; width:76px; padding:6px 4px 4px; border-radius:16px; border:3px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); display:flex; flex-direction:column; align-items:center; gap:2px; color:#fff; font-weight:800; font-size:12px; }
.chpick.big .chb{ width:96px; } .chb img{ width:100%; aspect-ratio:240/260; object-fit:contain; } .chb.sel{ border-color:#FFD12E; background:rgba(255,209,46,.18); box-shadow:0 0 0 2px #FFD12E; }
img.av{ width:1.6em; height:1.6em; object-fit:cover; object-position:50% 12%; border-radius:50%; background:rgba(255,255,255,.85); border:2px solid #1B1050; vertical-align:middle; flex:none; }
.tcard .wh{ display:inline-flex; align-items:center; gap:4px; margin:0 8px 4px 0; } .pr img.av.pa{ width:1.9em; height:1.9em; margin-right:4px; } .chatbox .cb img.av.ca{ width:1.7em; height:1.7em; margin-right:6px; }
.sc-jk.ch{ aspect-ratio:240/260; max-width:22%; } .sc-jk .jk-i{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom; }
#wImg{ object-fit:contain; }
.sc-run{ aspect-ratio:240/260 !important; } .sc-ri{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom; }
.sc-run.mv .sc-ri{ animation:scBob .18s infinite alternate; }
.tg-k{ aspect-ratio:240/260 !important; } .tg-k img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom; } .tg-k::after{ content:''; position:absolute; left:20%; right:20%; top:38%; height:8%; border-radius:4px; background:var(--c); opacity:.9; }

/* ===== 공식 캐릭터 전체 적용 ===== */
.arc-crew{ width:min(70vw,520px); display:block; margin:0 auto 6px; animation:arcBob 2.2s ease-in-out infinite; }
.lobby-crew{ position:absolute; right:min(17vw,230px); bottom:6px; width:min(24vw,360px); pointer-events:none; filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)); }
.hero-mascot.crew{ width:min(70vw,640px) !important; margin-bottom:-10px !important; }
.ich{ position:absolute; right:4vw; bottom:12vh; width:min(16vw,230px); filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); animation:arcBob 1.4s ease-in-out infinite; pointer-events:none; }
.i-ch{ width:96px; margin:-4px auto 4px; display:block; animation:arcBob 1.6s ease-in-out infinite; }
.res-ch{ position:relative; width:150px; margin:0 auto 6px; } .res-ch #rCh{ width:100%; display:block; animation:arcBob 1.2s ease-in-out infinite; } .res-trophy.sm{ position:absolute; right:-36px; bottom:0; width:70px !important; }
.pcrew{ display:flex; justify-content:center; align-items:flex-end; margin-bottom:4px; } .pcrew img{ width:clamp(46px,4.6vw,86px); margin:0 -8px; animation:arcBob 1s ease-in-out infinite; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)); } .pod.hid .pcrew{ visibility:hidden; }
.mvp .pr img.av.pa{ width:1.9em; height:1.9em; margin-right:6px; }
/* 떡 먹은 친구: 설정 · 얼굴 넣기 */
.tkset{ display:flex; flex-direction:column; gap:6px; align-items:center; margin:2px 0; } .tkset:empty{ display:none; }
.tk-opt{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; } .tk-opt > b{ font-family:var(--game); font-weight:400; font-size:20px; color:#FFD12E; }
.tk-chs{ display:flex; gap:6px; flex-wrap:wrap; } .tk-chs button, .tk-face button{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 8px; border-radius:14px; border:3px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-weight:800; cursor:pointer; font-size:20px; }
.tk-chs button img{ width:38px; height:40px; object-fit:contain; } .tk-chs button small{ font-size:12px; } .tk-chs button.sel, .tk-face button.sel{ border-color:#FFD12E; background:rgba(255,209,46,.2); }
.tk-face{ display:flex; gap:8px; align-items:center; } .tk-face button{ flex-direction:row; font-size:15px; padding:10px 14px; } .tk-face .tkf{ width:54px; height:54px; border-radius:50%; border:3px solid #FFD12E; }
.tk-face{ position:static; }
.tk-body .tk-face{ position:absolute; width:46%; aspect-ratio:1; border-radius:50%; left:27%; top:6%; border:2px solid #1B1050; z-index:2; pointer-events:none; }
.tk-body[data-pz="run"] .tk-face{ left:38%; top:4%; width:44%; }
.tk-body[data-pz="jump"] .tk-face{ left:28%; top:12%; width:44%; }
.tk-body[data-pz="fly"] .tk-face{ left:48%; top:32%; width:38%; }
.tk-body[data-pz="hand"] .tk-face{ left:30%; top:58%; width:40%; transform:rotate(180deg); }
.tk-body[data-pz="roll"] .tk-face{ left:16%; top:30%; width:44%; }
/* 떡 먹은 친구: 판 수 · 난이도 */
.tk-rn{ display:flex; gap:6px; flex-wrap:wrap; } .tk-rn button{ padding:8px 14px; border-radius:14px; border:3px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-weight:900; font-size:17px; cursor:pointer; } .tk-rn button.sel{ border-color:#FFD12E; background:rgba(255,209,46,.22); color:#FFD12E; }
.tk-opt small.mut{ flex-basis:100%; text-align:center; font-size:13px; }
/* ── 창문 닦기 (폰) ── */
.wp{ position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; padding:4px 2px 6px; }
.wp-hud{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .wp-pc{ font-family:var(--game); font-weight:400; font-size:40px; color:#8CFFE9; text-shadow:0 3px 0 #0E0838; min-width:3.2em; } .wp-pc.bump{ animation:arcMp .35s; }
.wp-bar{ flex:1; height:16px; border-radius:9px; background:rgba(255,255,255,.12); overflow:hidden; border:2px solid rgba(255,255,255,.2); } .wp-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#3DDC84,#8CFFE9); transition:width .25s; }
.wp-tm{ flex-basis:100%; font-weight:800; font-size:14px; color:#FFD12E; min-height:1.2em; }
.wp-f{ position:relative; flex:1; border-radius:14px; overflow:hidden; touch-action:none; border:12px solid #9A6234; box-shadow:inset 0 0 0 3px #5E3618, 0 0 0 3px #5E3618, 0 8px 0 #3E220E; background:#9ad3ff; }
.wp-f::before, .wp-f::after{ content:''; position:absolute; z-index:4; background:linear-gradient(90deg,#7A4A22,#B07A44,#7A4A22); pointer-events:none; } .wp-f::before{ left:50%; top:0; bottom:0; width:12px; margin-left:-6px; } .wp-f::after{ left:0; right:0; top:50%; height:12px; margin-top:-6px; background:linear-gradient(180deg,#7A4A22,#B07A44,#7A4A22); }
.wp-v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.wp-c{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.wp-sp{ position:absolute; left:0; top:0; width:96px; z-index:6; pointer-events:none; opacity:.55; filter:drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.wp-bb{ position:absolute; inset:0; z-index:5; pointer-events:none; } .wp-bb i{ position:absolute; border-radius:50%; background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.35) 45%,rgba(160,220,255,.25)); border:1px solid rgba(255,255,255,.8); animation:wpB .9s ease-out forwards; }
@keyframes wpB{ to{ transform:translateY(-40px) scale(1.4); opacity:0; } }
.wp-tip{ position:absolute; left:0; right:0; bottom:12%; text-align:center; z-index:6; font-weight:900; font-size:18px; color:#fff; text-shadow:0 2px 0 #1B1050,0 0 8px #000; pointer-events:none; transition:opacity .4s; }
.wp-done{ position:absolute; inset:0; z-index:7; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-family:var(--game); font-size:30px; color:#FFD12E; text-shadow:0 3px 0 #1B1050; background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%); }
.wp-done small{ font-family:inherit; font-size:15px; color:#fff; font-weight:800; margin-top:6px; } .wp.fin .wp-done{ display:flex; animation:arcMp .5s; } .wp.fin .wp-f{ box-shadow:inset 0 0 0 3px #5E3618, 0 0 0 3px #FFD12E, 0 0 30px #FFD12E; }
/* ── 창문 닦기 (큰 화면) ── */
.wp2{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5cqmin; padding:3cqmin 5cqmin; }
.wp2-f{ position:relative; width:min(100%, calc((100cqh - 22cqmin) * 1.6)); aspect-ratio:1.6; border-radius:2cqmin; overflow:hidden; border:2.6cqmin solid #9A6234; box-shadow:inset 0 0 0 .6cqmin #5E3618, 0 0 0 .6cqmin #5E3618, 0 1.4cqmin 0 #3E220E; }
.wp2-f::before, .wp2-f::after{ content:''; position:absolute; z-index:3; } .wp2-f::before{ left:50%; top:0; bottom:0; width:2.2cqmin; margin-left:-1.1cqmin; background:linear-gradient(90deg,#7A4A22,#B07A44,#7A4A22); } .wp2-f::after{ left:0; right:0; top:50%; height:2.2cqmin; margin-top:-1.1cqmin; background:linear-gradient(180deg,#7A4A22,#B07A44,#7A4A22); }
.wp2-v, .wp2-f canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wp2-sp{ position:absolute; width:22%; z-index:4; opacity:0; transition:left .35s, top .35s, opacity .3s; filter:drop-shadow(0 1cqmin 1cqmin rgba(0,0,0,.4)); }
.wp2-gl{ position:absolute; inset:0; z-index:2; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 42%,transparent 52%); transform:translateX(-120%); }
.wp2.shine .wp2-gl{ animation:wpG 1.6s infinite; } @keyframes wpG{ to{ transform:translateX(120%); } }
.wp2.shine .wp2-f{ box-shadow:inset 0 0 0 .6cqmin #5E3618, 0 0 0 .8cqmin #FFD12E, 0 0 5cqmin #FFD12E; }
.wp2-pc{ width:min(100%, calc((100cqh - 22cqmin) * 1.6)); display:flex; align-items:center; gap:3cqmin; } .wp2-pc b{ font-family:var(--game); font-weight:400; font-size:11cqmin; color:#8CFFE9; text-shadow:0 .8cqmin 0 #0E0838; min-width:3em; } .wp2-pc b.bump{ animation:arcMp .35s; }
.wp2-bar{ flex:1; height:4cqmin; border-radius:3cqmin; background:rgba(255,255,255,.12); overflow:hidden; } .wp2-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#3DDC84,#8CFFE9); transition:width .4s; }
.wp2 .tp-fin{ background:rgba(14,8,56,.55); inset:auto 0 0 0; height:42%; }
.chatfab.ingame{ width:42px !important; height:42px !important; font-size:19px !important; right:8px !important; bottom:auto !important; top:calc(max(10px, env(safe-area-inset-top)) + 84px) !important; opacity:.85; border-width:2px; }
.wp-hud{ padding-right:50px; }
/* 떡 먹은 친구: 진행 설정이 있을 때 소개 화면을 촘촘하게 */
#vIntro:has(.tkset:not(:empty)) .ie{ width:min(110px,13vh) !important; height:auto !important; margin-bottom:0 !important; }
#vIntro:has(.tkset:not(:empty)) h1{ font-size:clamp(34px,5.5vh,60px) !important; margin:2px 0 !important; }
#vIntro:has(.tkset:not(:empty)) .how{ font-size:clamp(14px,1.9vh,19px) !important; padding:10px 22px !important; margin:6px 0 !important; }
.tkset:not(:empty){ display:grid; grid-template-columns:auto auto; gap:8px 26px; align-items:center; justify-content:center; padding:10px 18px; border-radius:18px; background:rgba(14,8,56,.72); border:2px solid rgba(255,255,255,.14); }
.tkset .tk-opt{ justify-content:flex-start; gap:10px; flex-wrap:nowrap; } .tkset .tk-opt > b{ font-size:18px; white-space:nowrap; }
.tkset .tk-rn button{ padding:6px 12px; font-size:15px; } .tkset .tk-chs button{ padding:3px 6px; } .tkset .tk-chs button img{ width:28px; height:30px; }
/* ── 초성 퀴즈 (폰) ── */
.cq{ position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; padding:2px; }
.cq-h{ display:flex; justify-content:space-between; font-weight:800; font-size:15px; } .cq-n{ color:#FFD12E; } .cq-me b{ color:#8CFFE9; font-size:20px; }
.cq-t{ display:flex; justify-content:center; gap:10px; margin:4px 0; } .cq-t b{ width:78px; height:84px; border-radius:18px; display:grid; place-items:center; font-size:52px; font-weight:900; color:#1B1050; background:linear-gradient(180deg,#FFF6C2,#FFD12E); border:4px solid #0E0838; box-shadow:0 6px 0 #0E0838; }
.cq-f{ display:flex; gap:8px; } .cq-in{ flex:1; min-width:0; font-size:24px; font-weight:900; padding:14px 16px; border-radius:16px; border:3px solid #0E0838; background:#fff; color:#1B1050; } .cq-in:disabled{ opacity:.45; }
.cq-go{ padding:0 18px; border-radius:16px; border:3px solid #0E0838; font-weight:900; font-size:18px; color:#05312A; background:linear-gradient(180deg,#8CFFE9,#14B898); box-shadow:0 4px 0 #0A6E5B; }
.cq-msg{ min-height:1.4em; text-align:center; font-weight:900; font-size:16px; } .cq-msg.ok{ color:#8CFFE9; } .cq-msg.bad{ color:#FF8DA8; } .cq-msg.show{ animation:arcMp .3s; }
.cq-ws{ display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; overflow:auto; flex:1; } .cq-ws span{ padding:6px 12px; border-radius:99px; background:rgba(140,255,233,.16); border:2px solid #8CFFE9; font-weight:900; font-size:16px; animation:arcMp .3s; }
.cq.rev .cq-t b{ filter:saturate(.4); }
/* ── 초성 퀴즈 (큰 화면) ── */
.sc-cho .ch-st{ position:absolute; inset:9% 2% 2%; display:flex; flex-direction:column; gap:1.2vh; }
.ch-h{ display:flex; justify-content:space-between; font-family:var(--game); font-size:3vh; color:#FFD12E; } .ch-i{ color:#fff; }
.ch-t{ display:flex; justify-content:center; gap:2vh; } .ch-t b{ width:15vh; height:16vh; border-radius:3vh; display:grid; place-items:center; font-size:11vh; font-weight:900; color:#1B1050; background:linear-gradient(180deg,#FFF6C2,#FFD12E); border:.6vh solid #0E0838; box-shadow:0 1.2vh 0 #0E0838; animation:arcMp .45s both; }
.ch-ex{ min-height:4.2vh; text-align:center; font-size:2.6vh; font-weight:800; color:#fff; } .ch-ex b{ display:inline-block; margin:0 .4vh; padding:.3vh 1.2vh; border-radius:99px; background:rgba(255,209,46,.2); color:#FFD12E; }
.ch-g{ flex:1; display:grid; gap:1vh; min-height:0; grid-auto-rows:minmax(0,1fr); }
.ch-c{ background:rgba(14,8,56,.78); border:.4vh solid var(--c); border-radius:2vh; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.ch-ch{ display:flex; justify-content:space-between; align-items:center; padding:.6vh 1.4vh; background:var(--c); color:#fff; font-size:2.4vh; text-shadow:0 2px 2px rgba(0,0,0,.35); } .ch-ch b{ font-family:var(--game); font-weight:400; } .ch-ch em{ font-style:normal; font-family:var(--game); font-size:3.2vh; } .ch-ch em.bump{ animation:arcMp .35s; }
.ch-w{ flex:1; display:flex; flex-wrap:wrap; gap:.6vh; padding:1vh; align-content:flex-start; overflow:hidden; } .ch-w span{ display:inline-flex; align-items:baseline; gap:.5vh; padding:.4vh 1.2vh; border-radius:99px; background:rgba(255,255,255,.1); border:.25vh solid var(--c); font-size:2.4vh; font-weight:900; animation:arcMp .35s; } .ch-w small{ font-size:1.5vh; opacity:.7; }
.sc-cho .ch-st.rev .ch-t b{ background:linear-gradient(180deg,#C9FFF4,#5BF5D6); }
/* ── 관리자: 채팅 버튼 · 전체화면 채팅 ── */
#bChatTop.off{ opacity:.6; filter:grayscale(.6); }
#chatFull{ position:fixed !important; inset:0; z-index:5000 !important; display:flex; flex-direction:column; background:radial-gradient(120% 80% at 50% 0%,#2C2470,#0B0626 70%); padding:2.4vh 3vw; color:#fff; }
#chatFull .cf-h{ display:flex; align-items:center; gap:2vw; margin-bottom:2vh; } #chatFull .cf-h b{ font-family:var(--game); font-weight:400; font-size:5vh; color:#FFD12E; text-shadow:0 .6vh 0 #0E0838; } #chatFull .cf-s{ flex:1; font-size:2.2vh; font-weight:700; opacity:.8; }
#chatFull .cf-x{ font-family:var(--game); font-size:2.4vh; padding:1vh 2vw; border-radius:1.6vh; border:3px solid #0E0838; background:linear-gradient(180deg,#5A4BC9,#3B2E9E); color:#fff; cursor:pointer; }
#chatFull .cf-l{ flex:1; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:1.4vh; }
#chatFull .cf-m{ display:flex; align-items:center; gap:1.6vw; align-self:flex-start; max-width:80%; padding:1.4vh 2.4vw 1.4vh 1.2vw; border-radius:3vh 3vh 3vh .8vh; background:rgba(14,8,56,.85); border:.5vh solid var(--c); animation:cbIn .35s; }
#chatFull .cf-m:nth-child(even){ align-self:flex-end; border-radius:3vh 3vh .8vh 3vh; }
#chatFull img.av.cfa{ width:8vh; height:8vh; flex:none; } #chatFull .cf-m b{ display:block; font-family:var(--game); font-weight:400; font-size:2.6vh; color:var(--c); } #chatFull .cf-m b small{ font-size:1.8vh; color:#fff; opacity:.6; }
#chatFull .cf-m p{ margin:.3vh 0 0; font-size:4vh; font-weight:900; word-break:keep-all; line-height:1.25; }
#chatFull .cf-e{ margin:auto; font-size:3.4vh; font-weight:800; opacity:.75; }
/* ── 두더지 구멍 v2: 번호·망치가 안 가려지게 · 앞쪽 흙 테두리 ── */
.sc-hole.mh2{ overflow:visible !important; background:none !important; }
.sc-hole.mh2 .sc-pit{ position:absolute; inset:0; border-radius:50%/42%; overflow:hidden; background:radial-gradient(ellipse at 50% 70%,#1E0F06 0 52%,#5A3317 53% 62%,transparent 63%); }
.sc-hole.mh2 .sc-lip{ position:absolute; left:8%; right:8%; bottom:14%; height:22%; border-radius:50%; background:radial-gradient(ellipse at 50% 30%,#7A4A22 0 45%,#5A3317 46% 70%,transparent 71%); z-index:2; pointer-events:none; }
.sc-hole.mh2 .sc-m{ bottom:-85%; } .sc-hole.mh2.up .sc-m{ bottom:22%; }
.sc-hole.mh2 .sc-hn{ left:-2%; top:-4%; bottom:auto; width:clamp(30px,3.6vw,62px); height:clamp(30px,3.6vw,62px); border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,#FFF3A8,#FFB300); color:#1B1050; text-shadow:none; border:3px solid #1B1050; box-shadow:0 4px 0 #1B1050; z-index:6; font-size:clamp(16px,2.2vw,36px); }
.sc-hole.mh2 .sc-ham{ z-index:7; top:-30%; right:-12%; width:70%; }
.sc-hole.mh2 .sc-hits{ z-index:5; top:-6%; }
/* ── 흔들흔들 탄산병 (폰 · 큰 화면 공용, em 크기) ── */
.sd{ --lv:0; position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; }
.sd-b{ position:relative; height:86%; aspect-ratio:1; transform-origin:50% 90%; }
.sd-img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 0 rgba(14,8,56,.45)); }
.sd-in{ position:absolute; left:36%; right:36%; bottom:4%; height:0; border-radius:40% 40% 18% 18%; background:radial-gradient(circle,rgba(255,255,255,.95) 18%,transparent 20%) 0 0/22% 14%, radial-gradient(circle,rgba(255,255,255,.75) 12%,transparent 14%) 11% 7%/22% 14%, linear-gradient(180deg,rgba(255,248,230,.95),rgba(255,236,200,.55)); transition:height .2s; animation:sdIn .7s linear infinite; }
@keyframes sdIn{ to{ background-position:0 -14%, 11% -7%, 0 0; } }
.sd-top{ position:absolute; left:50%; top:2%; width:34%; height:22%; transform:translateX(-50%) scale(0); transform-origin:50% 100%; transition:transform .2s; z-index:2; }
.sd-top i{ position:absolute; bottom:0; width:46%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#FFF2D6); box-shadow:inset 0 -3px 0 rgba(200,160,110,.35); animation:sdBl .5s ease-in-out infinite alternate; }
.sd-top i:nth-child(1){ left:0; } .sd-top i:nth-child(2){ left:27%; bottom:22%; width:50%; } .sd-top i:nth-child(3){ right:0; } .sd-top i:nth-child(4){ left:14%; bottom:48%; width:36%; animation-delay:.2s; } .sd-top i:nth-child(5){ right:12%; bottom:52%; width:32%; animation-delay:.35s; }
@keyframes sdBl{ to{ transform:scale(1.12) translateY(-4%); } }
.sd.wob .sd-b{ animation:sdWob calc(.28s - var(--lv) * .1s); } @keyframes sdWob{ 25%{ transform:rotate(calc(-8deg - var(--lv) * 10deg)); } 75%{ transform:rotate(calc(8deg + var(--lv) * 10deg)); } }
.sd.hot .sd-b{ animation:sdHot .12s infinite; } @keyframes sdHot{ 50%{ transform:translateX(-2%) rotate(-3deg); } }
.sd-cap{ position:absolute; left:calc(50% - 4%); top:1%; width:8%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FF8A8A,#D21F1F); border:2px solid #5a0a0a; opacity:0; z-index:4; }
.sd.popd .sd-cap{ animation:sdCap 1.1s ease-out; } @keyframes sdCap{ 0%{ opacity:1; } 100%{ opacity:0; transform:translate(260%,-700%) rotate(720deg); } }
.sd.popd .sd-img{ clip-path:inset(7% 0 0 0); }
.sd-sp{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.sd-sp i.up{ position:absolute; top:12%; width:4%; aspect-ratio:1; border-radius:50%; border:2px solid #fff; background:rgba(255,255,255,.4); animation:sdUp .8s ease-out forwards; } @keyframes sdUp{ to{ transform:translateY(-160%) scale(1.5); opacity:0; } }
.sd-sp i.fz{ position:absolute; left:47%; top:6%; width:calc(7% * var(--s)); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#FFE9C4); animation:sdFz 1.2s cubic-bezier(.15,.8,.3,1) forwards; } @keyframes sdFz{ 70%{ opacity:1; } to{ transform:translate(var(--dx),var(--dy)); opacity:0; } }
.sd-boom{ position:absolute; left:0; right:0; top:14%; text-align:center; font-family:var(--game); font-weight:400; font-size:3em; color:#FFD12E; -webkit-text-stroke:2px #1B1050; text-shadow:0 5px 0 #1B1050; opacity:0; z-index:5; pointer-events:none; }
.sd.popd .sd-boom{ animation:sdBoom 1s ease-out; } @keyframes sdBoom{ 0%{ opacity:0; transform:scale(.3); } 20%{ opacity:1; transform:scale(1.25); } 70%{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(1.1) translateY(-20%); } }
.sd.popd::after{ content:''; position:absolute; inset:-10%; background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.75),transparent 55%); animation:sdFl .5s ease-out forwards; pointer-events:none; } @keyframes sdFl{ to{ opacity:0; } }
.shk{ gap:10px; } .shk-h{ display:flex; align-items:baseline; gap:6px; } .shk-n{ font-family:var(--game); font-weight:400; font-size:44px; color:#8CFFE9; text-shadow:0 3px 0 #0E0838; } .shk-p{ margin-left:auto; font-weight:900; font-size:18px; color:#FFD12E; }
.shk-box{ position:relative; width:100%; flex:1; min-height:260px; font-size:16px; }
.pn-b .sd{ font-size:5cqmin; } .sd-cnt{ position:absolute; right:4%; top:4%; font-family:var(--game); font-size:8cqmin; color:#FFD12E; text-shadow:0 .6cqmin 0 #1B1050; z-index:6; }
/* ── 연타왕: 진짜 아케이드 버튼 ── */
.tap2 .ab{ position:relative; width:min(78vw,330px); aspect-ratio:1; margin:6px auto 0; touch-action:none; }
.ab-base{ position:absolute; left:2%; right:2%; top:14%; bottom:0; border-radius:50%; background:radial-gradient(ellipse at 50% 35%,#4A3FA8,#1B1050 70%); border:5px solid #0E0838; box-shadow:0 14px 0 #0E0838, 0 22px 30px rgba(0,0,0,.5); }
.ab-cap{ position:absolute; left:10%; right:10%; top:0; bottom:16%; border-radius:50%; border:5px solid #0E0838; cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 38% 28%,#FFB3B8 0,#FF5468 22%,#E8233F 55%,#A8102A 100%); box-shadow:0 26px 0 #7A0A1E, 0 30px 0 #0E0838, inset 0 -12px 18px rgba(0,0,0,.25), inset 0 10px 14px rgba(255,255,255,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; transition:transform .05s, box-shadow .05s; }
.ab-cap::before{ content:''; position:absolute; left:18%; top:9%; width:34%; height:20%; border-radius:50%; background:rgba(255,255,255,.45); transform:rotate(-20deg); filter:blur(2px); }
.ab.dn .ab-cap{ transform:translateY(22px) scale(.985); box-shadow:0 4px 0 #7A0A1E, 0 8px 0 #0E0838, inset 0 -6px 14px rgba(0,0,0,.35), inset 0 12px 18px rgba(0,0,0,.2); filter:brightness(1.12); }
.ab-cap b{ font-family:var(--game); font-weight:400; font-size:clamp(64px,22vw,110px); line-height:1; text-shadow:0 5px 0 #7A0A1E, 0 0 20px rgba(255,255,255,.35); }
.ab-cap b.pp{ animation:abPop .16s; } @keyframes abPop{ 40%{ transform:scale(1.25); } }
.ab-cap small{ font-family:var(--game); font-size:22px; opacity:.85; letter-spacing:2px; }
.ab-ring{ position:absolute; left:10%; right:10%; top:0; bottom:16%; border-radius:50%; border:6px solid #FFD12E; opacity:0; pointer-events:none; }
.ab-ring.go{ animation:abRing .35s ease-out; } @keyframes abRing{ 0%{ opacity:.9; transform:scale(.95); } to{ opacity:0; transform:scale(1.35); } }
.tap2 .g-tapc{ min-height:30px; } .tap2 .tpc{ font-family:var(--game); font-weight:400; font-size:22px; color:#FFD12E; text-shadow:0 2px 0 #0E0838; }
.tap2.fire .ab-cap{ box-shadow:0 26px 0 #7A0A1E, 0 30px 0 #0E0838, 0 0 40px 10px rgba(255,140,40,.7), inset 0 -12px 18px rgba(0,0,0,.25), inset 0 10px 14px rgba(255,255,255,.35); }
.tap2.fire .ab.dn .ab-cap{ box-shadow:0 4px 0 #7A0A1E, 0 8px 0 #0E0838, 0 0 40px 10px rgba(255,140,40,.7); }
.tap2 .g-tapfx i{ font-size:28px; }
/* ── 100m 허들 달리기 (큰 화면) ── */
.sc-gr{ position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 3px,transparent 3px 60px); pointer-events:none; }
.sc-hd{ position:absolute; bottom:8%; width:clamp(10px,1.1vw,22px); height:46%; transform:translateX(-50%); z-index:2; background:linear-gradient(180deg,#fff 0 18%,#E8323F 18% 30%,#fff 30% 42%,transparent 42%), linear-gradient(90deg,#fff 0 22%,transparent 22% 78%,#fff 78%); border-top:3px solid #1B1050; filter:drop-shadow(0 2px 0 #1B1050); }
.sc-run{ overflow:visible; } .sc-bd{ position:absolute; inset:0; transform-origin:50% 85%; }
.sc-run.mv .sc-ri{ animation:none !important; }
.sc-sh{ position:absolute; left:20%; right:20%; bottom:-2%; height:9%; border-radius:50%; background:rgba(0,0,0,.28); }
.sc-spd{ position:absolute; right:78%; top:30%; width:70%; height:40%; opacity:0; background:repeating-linear-gradient(180deg,transparent 0 16%,rgba(255,255,255,.75) 16% 20%); -webkit-mask:linear-gradient(90deg,transparent,#000); mask:linear-gradient(90deg,transparent,#000); }
.sc-run.mv .sc-spd{ opacity:.55; animation:scSpd .18s linear infinite; } .sc-run.fast .sc-spd{ opacity:1; width:110%; right:72%; }
@keyframes scSpd{ 0%{ transform:translateX(12%); } 100%{ transform:translateX(-12%); } }
.sc-run.fast .sc-dust{ animation-duration:.22s !important; width:60%; }
.sc-run.fall .sc-sh{ left:0; right:-30%; }
.sc-rfx{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); white-space:nowrap; font-style:normal; font-family:var(--game); font-size:clamp(14px,1.5vw,26px); padding:2px 12px; border-radius:99px; background:#fff; color:#1B1050; border:3px solid #1B1050; opacity:0; z-index:6; pointer-events:none; }
.sc-rfx.on{ animation:scFx 1.1s ease-out forwards; } .sc-rfx.bad{ background:#FF5A6E; color:#fff; } .sc-rfx.ok{ background:#8CFFE9; }
@keyframes scFx{ 0%{ opacity:0; transform:translate(-50%,10px) scale(.6); } 15%{ opacity:1; transform:translate(-50%,0) scale(1.15); } 80%{ opacity:1; } to{ opacity:0; transform:translate(-50%,-14px); } }
.sc-run.done .sc-val{ background:#FFD12E !important; color:#1B1050 !important; }
/* ── 100m 허들 달리기 (폰) ── */
.rn{ position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; }
.rn.shake{ animation:rnSh .35s; } @keyframes rnSh{ 20%{ transform:translateX(-8px); } 40%{ transform:translateX(8px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(4px); } }
.rn-hud{ display:flex; align-items:center; gap:12px; } .rn-m{ font-family:var(--game); font-weight:400; font-size:40px; color:#8CFFE9; text-shadow:0 3px 0 #0E0838; min-width:2.6em; } .rn-m small{ font-size:20px; }
.rn-pg{ position:relative; flex:1; height:16px; border-radius:9px; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.2); } .rn-pg i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:9px; background:linear-gradient(90deg,#FFD12E,#FF7A45); transition:width .2s; }
.rn-pg u{ position:absolute; top:-5px; width:4px; height:22px; margin-left:-2px; background:#fff; border-radius:2px; } .rn-pg em{ position:absolute; right:-10px; top:-12px; font-style:normal; font-size:22px; }
.rn-tr{ position:relative; flex:1; min-height:200px; border-radius:18px; overflow:hidden; border:4px solid #1B1050; background:linear-gradient(180deg,#7FD3FF 0 34%,#5BC26A 34% 42%,#C8553D 42%); }
.rn-gr{ position:absolute; left:0; right:0; top:42%; bottom:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 4px,transparent 4px 46px), linear-gradient(180deg,transparent 46%,rgba(255,255,255,.55) 46% 48%,transparent 48%); }
.rn-wd{ position:absolute; left:28%; top:0; bottom:0; will-change:transform; }
.rn-mk{ position:absolute; bottom:4%; transform:translateX(-50%); font-family:var(--game); font-size:15px; color:#fff; text-shadow:0 2px 0 #1B1050; }
.rn-hd{ position:absolute; bottom:12%; width:58px; height:auto; z-index:1; } .rn-hd2{ position:absolute; bottom:12%; width:12px; height:70px; background:linear-gradient(180deg,#fff 0 20%,#E8323F 20% 34%,#fff 34%); border:2px solid #1B1050; }
.rn-fin{ position:absolute; top:42%; bottom:0; width:18px; background:repeating-conic-gradient(#fff 0 25%,#1B1050 0 50%) 0 0/18px 18px; }
.rn-me{ position:absolute; left:28%; bottom:10%; width:38%; max-width:170px; aspect-ratio:240/260; transform:translateX(-50%); z-index:3; }
.rn-bd{ position:absolute; inset:0; transform-origin:50% 85%; } .rn-bd img{ width:100%; height:100%; object-fit:contain; object-position:bottom; }
.rn-sh{ position:absolute; left:18%; right:18%; bottom:-3%; height:9%; border-radius:50%; background:rgba(0,0,0,.3); }
.rn-st{ position:absolute; left:50%; top:30%; font-style:normal; font-size:34px; opacity:0; transform:translateX(-50%); } .rn-me.fall .rn-st{ opacity:1; animation:rnSt .5s linear infinite; } @keyframes rnSt{ to{ transform:translateX(-50%) rotate(360deg); } }
.rn-me.mv::before{ content:''; position:absolute; right:85%; top:30%; width:70%; height:40%; background:repeating-linear-gradient(180deg,transparent 0 16%,rgba(255,255,255,.8) 16% 21%); -webkit-mask:linear-gradient(90deg,transparent,#000); mask:linear-gradient(90deg,transparent,#000); animation:scSpd .16s linear infinite; }
.rn-say{ position:absolute; left:0; right:0; top:10%; text-align:center; font-family:var(--game); font-size:26px; color:#fff; text-shadow:0 3px 0 #1B1050; opacity:0; z-index:5; pointer-events:none; } .rn-say.on{ animation:scFx2 .9s ease-out forwards; } .rn-say.bad{ color:#FF6B7F; } .rn-say.ok{ color:#FFD12E; }
@keyframes scFx2{ 0%{ opacity:0; transform:scale(.6); } 15%{ opacity:1; transform:scale(1.15); } 80%{ opacity:1; } to{ opacity:0; } }
.rn-bt{ display:grid; grid-template-columns:1fr .9fr 1fr; gap:10px; padding-bottom:4px; }
.rn-bt button{ height:min(26vh,150px); border-radius:22px; border:4px solid #1B1050; font-size:44px; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; touch-action:none; box-shadow:0 8px 0 #1B1050; -webkit-tap-highlight-color:transparent; }
.rn-bt button small{ font-family:var(--game); font-size:18px; }
.rn-f{ background:linear-gradient(180deg,#6FA8FF,#2E6BE6); } .rn-f[data-f="R"]{ background:linear-gradient(180deg,#FF8DB6,#E8326A); } .rn-f[data-f="R"] { } .rn-f[data-f="L"]{ transform:scaleX(1); }
.rn-j{ background:linear-gradient(180deg,#9AA0B8,#5A607A); opacity:.75; } .rn-j.go{ background:linear-gradient(180deg,#FFF06A,#FFB300); color:#1B1050; opacity:1; animation:rnGo .45s ease-in-out infinite alternate; box-shadow:0 8px 0 #1B1050, 0 0 26px #FFD12E; }
@keyframes rnGo{ to{ transform:scale(1.07); } }
.rn-bt button.hit{ animation:rnHit .12s; } @keyframes rnHit{ 50%{ transform:translateY(6px); box-shadow:0 2px 0 #1B1050; } }
.rn.fin .rn-tr{ box-shadow:0 0 0 4px #FFD12E, 0 0 30px #FFD12E; }
.sc-hd{ width:clamp(26px,2.8vw,52px) !important; height:auto !important; aspect-ratio:200/192; background:url(img/s_hurdle.webp) center/contain no-repeat !important; border:0 !important; bottom:10% !important; max-height:40%; }
.sd-in{ position:absolute !important; inset:0 !important; left:0 !important; right:0 !important; height:auto !important; border-radius:0 !important; background:none !important; animation:none !important; -webkit-mask:url(img/s_soda.webp) center/contain no-repeat; mask:url(img/s_soda.webp) center/contain no-repeat; pointer-events:none; }
.sd-in i{ position:absolute; left:0; right:0; bottom:3%; height:0; transition:height .2s; background:radial-gradient(circle,rgba(255,255,255,.95) 16%,transparent 19%) 0 0/9% 6%, radial-gradient(circle,rgba(255,255,255,.7) 10%,transparent 13%) 4% 3%/9% 6%, linear-gradient(180deg,rgba(255,250,235,.96),rgba(255,226,180,.72)); animation:sdIn2 .6s linear infinite; }
.sd-in i::before{ content:''; position:absolute; left:0; right:0; top:-3%; height:6%; background:radial-gradient(circle at 50% 100%,#fff 60%,transparent 62%) 0 0/8% 100% repeat-x; }
@keyframes sdIn2{ to{ background-position:0 -6%, 4% -3%, 0 0; } }
.cq-h{ padding-right:50px; }
/* ── 반짝 기억 v2 ── */
.mm .mm-g{ width:auto !important; height:58cqmin; max-width:90cqmin; } .mm .mm-g i{ aspect-ratio:auto !important; }
.mm2{ gap:10px; } .mm2-h{ display:flex; align-items:baseline; gap:6px; width:100%; } .mm2-s{ font-family:var(--game); font-weight:400; font-size:40px; color:#8CFFE9; text-shadow:0 3px 0 #0E0838; } .mm2-h small{ font-weight:800; font-size:16px; opacity:.85; } .mm2-n{ margin-left:auto; font-weight:900; font-size:16px; color:#FFD12E; }
.mm2-g{ width:min(100%, 58vh) !important; gap:8px !important; } .mm2-g .g-cell{ aspect-ratio:1; }
.mm2-p{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; } .mm2-p i{ width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.3); } .mm2-p i.on{ background:#FFD12E; border-color:#fff; box-shadow:0 0 8px #FFD12E; }
.mm2.fin .mm2-g{ box-shadow:0 0 0 4px #FFD12E, 0 0 30px #FFD12E; border-radius:14px; }
/* ── 색깔 풍선 v2 (팀 공유) ── */
.bl2{ position:relative; overflow:hidden; } .bl2-n{ position:absolute; left:0; right:0; top:52px; text-align:center; font-weight:800; font-size:13px; color:#1B1050; opacity:.7; z-index:2; pointer-events:none; }
.bl2 .g-bal{ position:absolute; left:0; top:0; } .bl2 .g-bal.popd{ animation:blP2 .25s forwards; } @keyframes blP2{ to{ transform:scale(1.7); opacity:0; } }
.bl2-by{ position:absolute; left:50%; top:30%; transform:translateX(-50%); font-style:normal; font-weight:900; font-size:13px; color:#fff; background:#1B1050; padding:1px 6px; border-radius:8px; z-index:3; white-space:nowrap; }
.bl .bl-b.b2{ animation:none !important; transition:none; } .bl .bl-b.b2.pop{ animation:blPop .4s forwards !important; }
.bl-b em{ position:absolute; left:50%; top:20%; transform:translateX(-50%); font-style:normal; font-weight:900; font-size:4cqmin; color:#fff; background:#1B1050; padding:0 1.4cqmin; border-radius:2cqmin; white-space:nowrap; z-index:3; }
.bl-t{ position:absolute; left:50%; top:3%; transform:translateX(-50%); z-index:4; display:flex; align-items:center; gap:2cqmin; padding:1cqmin 4cqmin; border-radius:6cqmin; background:rgba(14,8,56,.85); color:#fff; font-family:var(--game); font-size:7cqmin; white-space:nowrap; } .bl-t i{ width:6cqmin; height:6cqmin; border-radius:50%; border:.6cqmin solid #fff; }
/* 금고 패널: 아래 글자 잘림 방지 */
.pn-b .sf{ gap:2cqmin; padding:3cqmin 0; } .pn-b .sf-img{ width:auto !important; height:auto !important; max-height:68cqh; max-width:60cqmin; flex:0 1 auto; min-height:0; } .pn-b .sf-n{ flex:none; line-height:1.15; font-size:8cqmin; }
/* ── 팀 줄다리기: 아래로 당기기 ── */
.tg-pull{ position:relative; flex:1; min-height:220px; width:100%; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.12)); border:3px dashed rgba(255,255,255,.25); touch-action:none; overflow:hidden; }
.tg-vr{ position:absolute; left:50%; top:-10px; bottom:-10px; width:34px; margin-left:-17px; border-radius:17px; background:repeating-linear-gradient(160deg,#E2B46A 0 10px,#B8823C 10px 18px,#F0CB86 18px 26px); box-shadow:inset -6px 0 8px rgba(0,0,0,.25), 0 0 0 3px #5E3A14; }
.tg-knot{ position:absolute; left:-10px; top:40%; width:54px; height:22px; border-radius:11px; background:#E8323F; border:3px solid #5a0a0a; transition:transform .05s; }
.tg-hand{ position:absolute; left:50%; top:30%; transform:translate(-50%,-50%) scale(.8); font-size:60px; opacity:.0; pointer-events:none; transition:opacity .15s; filter:drop-shadow(0 4px 0 rgba(0,0,0,.35)); } .tg-hand.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.tg-cnt{ position:absolute; right:14px; top:10px; font-family:var(--game); font-weight:400; font-size:44px; color:#FFD12E; text-shadow:0 3px 0 #0E0838; } .tg-cnt.pp{ animation:abPop .16s; }
.tg-tip{ position:absolute; left:0; right:0; bottom:14px; text-align:center; font-family:var(--game); font-size:20px; color:#fff; text-shadow:0 2px 0 #1B1050; animation:rnGo .6s ease-in-out infinite alternate; transition:opacity .3s; pointer-events:none; }
.jr-btn.lock{ filter:grayscale(.9) brightness(.8); }
/* ── 상식 OX: 내 캐릭터 ── */
.oxc{ position:relative; width:100%; height:min(30vh,190px); border-radius:18px; background:linear-gradient(90deg,rgba(61,139,255,.28) 0 50%,rgba(255,77,77,.28) 50%); border:3px solid rgba(255,255,255,.2); overflow:hidden; flex:none; }
.oxz{ position:absolute; top:8px; font-size:34px; opacity:.85; } .oxz.o{ left:14px; } .oxz.x{ right:14px; }
.oxc::after{ content:''; position:absolute; left:50%; top:0; bottom:0; border-left:3px dashed rgba(255,255,255,.5); }
.oxc-me{ position:absolute; left:50%; bottom:6%; height:80%; aspect-ratio:240/260; transform:translateX(-50%); transition:left .5s ease-in-out; z-index:2; }
.oxc-me img{ width:100%; height:100%; object-fit:contain; object-position:bottom; } .oxc-me i{ position:absolute; left:15%; right:15%; bottom:-4%; height:9%; border-radius:50%; background:rgba(0,0,0,.3); z-index:-1; }
.oxc-me.win img{ animation:oxW .45s ease-in-out infinite alternate; } @keyframes oxW{ to{ transform:translateY(-18%); } }
.oxc-me.lose img{ transform:rotate(90deg) translateX(20%); filter:grayscale(.6); }
/* ── 상식 OX 큰 화면: 캐릭터 구역 ── */
.sc-oxf{ position:relative; width:100%; height:30vh; margin:1vh 0; border-radius:2vh; background:linear-gradient(90deg,rgba(61,139,255,.25) 0 48%,rgba(255,255,255,.06) 48% 52%,rgba(255,77,77,.25) 52%); border:.3vh solid rgba(255,255,255,.2); overflow:hidden; }
.sc-oxf > span{ position:absolute; top:1vh; font-size:4vh; opacity:.6; } .sc-oxf .o{ left:1.5%; } .sc-oxf .x{ right:1.5%; }
.sc-oxw{ position:absolute; inset:0; }
.sc-oxk{ position:absolute; width:6%; aspect-ratio:240/300; transition:left .6s ease-in-out, bottom .6s ease-in-out; transform:translateX(-50%); }
.sc-oxk img{ width:100%; aspect-ratio:240/260; object-fit:contain; object-position:bottom; transform:scaleX(var(--fl,1)); }
.sc-oxk b{ display:block; text-align:center; font-size:1.3vh; font-weight:900; color:#fff; background:var(--c); border-radius:1vh; white-space:nowrap; overflow:hidden; }
.sc-oxk.win img{ animation:oxW .45s ease-in-out infinite alternate; } .sc-oxk.lose img{ transform:rotate(90deg) translateX(20%); filter:grayscale(.7); opacity:.75; }
/* ── 타자 레이스: 기차가 목적지로 ── */
.tyt{ position:relative; width:100%; height:86px; flex:none; border-radius:16px; background:linear-gradient(180deg,#9FE0FF 0 62%,#6CC56A 62%); border:3px solid #1B1050; overflow:hidden; }
.tyt-r{ position:absolute; left:0; right:0; bottom:10px; height:8px; background:repeating-linear-gradient(90deg,#6B4423 0 6px,transparent 6px 16px), linear-gradient(#555,#555) 0 0/100% 3px no-repeat; }
.tyt-s{ position:absolute; right:2%; bottom:8px; height:80%; }
.tyt-t{ position:absolute; left:0; bottom:12px; height:62%; transition:left .9s cubic-bezier(.3,.1,.3,1); z-index:2; }
.tyt-t.go{ animation:tyGo .9s ease-in-out; } @keyframes tyGo{ 25%{ transform:translateY(-6%) rotate(-2deg); } 50%{ transform:translateY(0); } 75%{ transform:translateY(-4%) rotate(1deg); } }
.tyt-p{ position:absolute; left:8px; top:6px; font-weight:900; font-size:13px; color:#1B1050; background:rgba(255,255,255,.8); padding:1px 8px; border-radius:8px; }
.tyt.big{ height:30%; min-height:0; border-width:.6cqmin; border-radius:3cqmin; } .tyt.big .tyt-p{ font-size:4.4cqmin; padding:.3cqmin 2cqmin; border-radius:2cqmin; } .tyt.big .tyt-r{ bottom:2cqmin; height:1.6cqmin; }
.tyc .tyc-l{ flex:1; min-height:0; }
/* ── 늘 떠 있는 QR ── */
#qrMini{ position:fixed !important; right:14px; bottom:14px; z-index:45 !important; display:none; flex-direction:column; align-items:center; gap:3px; padding:8px 8px 6px; border-radius:16px; background:#fff; border:4px solid #1B1050; box-shadow:0 6px 0 rgba(14,8,56,.85); cursor:pointer; width:clamp(96px,6.8vw,128px); transition:transform .15s; }
#qrMini:hover{ transform:scale(1.05); } body.qm-on #qrMini{ display:flex; }
#qrMini .qm-c, #qrMini .qm-c img, #qrMini .qm-c canvas{ width:100% !important; height:auto !important; display:block; }
#qrMini .qm-code{ font-family:var(--game); font-weight:400; font-size:clamp(16px,1.4vw,24px); color:#E8325F; letter-spacing:.12em; line-height:1; } #qrMini small{ font-size:10px; font-weight:800; color:#333; text-align:center; line-height:1.2; }
#qrBig{ position:fixed !important; inset:0; z-index:6000 !important; display:flex; align-items:center; justify-content:center; background:rgba(8,4,32,.78); backdrop-filter:blur(6px); cursor:pointer; animation:arcMf .2s; }
#qrBig .qb-b{ background:#fff; border-radius:3vh; padding:3vh 3vh 2vh; display:flex; flex-direction:column; align-items:center; gap:1vh; border:.8vh solid #1B1050; box-shadow:0 1.6vh 0 #1B1050; animation:arcMp .3s; }
#qrBig .qb-l{ width:26vh; } #qrBig .qb-code{ font-family:var(--game); font-size:7vh; color:#E8325F; letter-spacing:.2em; line-height:1; }
#qrBig .qb-c{ width:62vh; } #qrBig .qb-c img, #qrBig .qb-c canvas{ width:100% !important; height:auto !important; }
#qrBig .qb-u{ font-weight:900; font-size:2.4vh; color:#333; } #qrBig small{ color:#888; font-weight:700; }
/* ── 함성 측정 (폰) ── */
.sh2{ gap:10px; } .sh2-n{ display:flex; flex-direction:column; align-items:center; } .sh2-n b{ font-family:var(--game); font-weight:400; font-size:72px; line-height:1; color:#8CFFE9; text-shadow:0 4px 0 #0E0838; } .sh2-n b.hot{ color:#FF6B8B; } .sh2-n small{ font-weight:800; opacity:.8; }
.sh2-m{ position:relative; width:90px; height:min(36vh,260px); border-radius:45px; background:rgba(255,255,255,.1); border:4px solid #1B1050; overflow:hidden; }
.sh2-f{ position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(0deg,#5BF5D6,#FFD12E 60%,#FF4D6D); transition:height .08s; }
.sh2-h{ position:absolute; left:6px; right:6px; height:5px; border-radius:3px; background:#fff; box-shadow:0 0 8px #fff; bottom:0; }
.sh2-m u{ position:relative; display:block; height:10%; border-bottom:2px solid rgba(14,8,56,.35); }
.sh2-ic{ font-size:64px; transition:transform .08s; } .sh2.loud .sh2-ic{ filter:drop-shadow(0 0 16px #FFD12E); }
.sh2-avg{ font-weight:900; font-size:18px; } .sh2-avg b{ font-family:var(--game); font-weight:400; font-size:30px; color:#FFD12E; }
/* ── 함성 측정 (큰 화면) ── */
.shp{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1cqmin; }
.shp-eq{ position:absolute; left:6%; right:6%; bottom:6%; top:20%; display:flex; align-items:flex-end; gap:2%; opacity:.85; } .shp-eq i{ flex:1; border-radius:2cqmin 2cqmin .6cqmin .6cqmin; height:6%; transition:height .1s; }
.shp-ic{ position:relative; font-size:30cqmin; z-index:2; filter:drop-shadow(0 2cqmin 0 rgba(14,8,56,.5)); } .shp.loud .shp-ic{ filter:drop-shadow(0 0 5cqmin #FFD12E); }
.shp-db{ position:relative; z-index:2; font-family:var(--game); font-weight:400; font-size:14cqmin; color:#fff; text-shadow:0 1cqmin 0 #0E0838; line-height:1; } .shp small{ position:relative; z-index:2; font-weight:800; font-size:5cqmin; }
/* ── 팀 미로 (폰) ── */
/* ── 팀 미로 · 모두의 항해 폰 (기울기 조종) ── */
.tl2{ gap:10px; justify-content:flex-start; padding:4px 2px 6px; }
.tl2-hud{ display:flex; gap:8px; width:100%; }
.tl2-hud>div{ flex:1; padding:6px 4px; border-radius:16px; background:linear-gradient(180deg,#3A2D9E,#2A1F80); border:3px solid #1B1050; box-shadow:0 4px 0 #0E0838; display:flex; flex-direction:column; align-items:center; }
.tl2-hud b{ font-family:var(--game); font-weight:400; font-size:30px; line-height:1.1; color:#FFE066; text-shadow:0 3px 0 #0E0838; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tl2-hud span{ font-family:var(--game); font-size:14px; color:#D8D2FF; }
.tl2-sen{ width:100%; padding:8px 10px; border-radius:14px; border:3px solid #1B1050; background:#FFE066; color:#1B1050; font-family:var(--game); font-size:16px; line-height:1.35; }
.tl2-sen.none,.tl2-sen.denied{ background:#FF9AA8; } .tl2-sen small{ font-size:13px; }
.tl2-sen button{ margin-left:6px; padding:4px 12px; border-radius:999px; border:3px solid #1B1050; background:#fff; color:#1B1050; font-family:var(--game); font-size:15px; }
.tl2-pw{ position:relative; flex:1; width:100%; min-height:200px; border-radius:24px; overflow:hidden; border:4px solid #1B1050; background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--team,#6F60E8) 35%,#2C2470),#120A4A 75%); box-shadow:0 6px 0 #0E0838; touch-action:none; }
.tl2-pw canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.tl2-tip{ position:absolute; left:0; right:0; top:8px; text-align:center; font-family:var(--game); font-size:19px; color:#fff; text-shadow:0 2px 0 #1B1050; pointer-events:none; }
.tl2-tools{ display:flex; gap:8px; width:100%; }
.tl2-tools button{ flex:1; padding:10px 6px; border-radius:16px; border:3px solid #1B1050; background:linear-gradient(180deg,#6F60E8,#4A3BC4); box-shadow:0 4px 0 #231877; color:#fff; font-family:var(--game); font-size:16px; }
.tl2-tools button:active{ transform:translateY(3px); box-shadow:0 1px 0 #231877; }
.mz2.fin .tl2-pw{ box-shadow:0 0 0 4px #FFD12E,0 0 30px #FFD12E; }
.sl2.sunk .tl2-pw{ filter:grayscale(.6) brightness(.8); }
.sl2-fx{ position:absolute; left:50%; top:22%; transform:translate(-50%,-50%) scale(.6); display:flex; flex-direction:column; align-items:center; padding:8px 18px; border-radius:18px; background:var(--fc,#6BE3FF); border:4px solid #1B1050; box-shadow:0 5px 0 #0E0838; color:#1B1050; font-family:var(--game); opacity:0; pointer-events:none; white-space:nowrap; }
.sl2-fx b{ font-weight:400; font-size:26px; } .sl2-fx small{ font-size:14px; }
.sl2-fx.on{ animation:sl2Fx 2.6s ease-out forwards; } @keyframes sl2Fx{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.5); } 12%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); } 20%,80%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1); } }
/* ── 팀 미로 (큰 화면): 나무 미로판이 팀원 기울기로 기울어요 ── */
.pn.hit{ animation:pnHit .45s; } @keyframes pnHit{ 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } }
.pn.idle .pn-b{ filter:saturate(.45) brightness(.8); }
.mz3{ position:absolute; inset:0; display:flex; flex-direction:column; }
.mz3-st{ position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.mz3-bd{ position:relative; filter:drop-shadow(0 1.4cqmin 0 rgba(14,8,56,.7)); will-change:transform; }
.mz3-bd canvas{ width:100%; height:100%; display:block; }
.mz3-ft{ flex:0 0 auto; display:flex; align-items:center; gap:1.6cqmin; padding:.6cqmin 2.4cqmin 1.2cqmin; font-family:var(--game); }
.mz3-ch{ height:max(30px,15cqmin); width:auto; margin-top:-6cqmin; filter:drop-shadow(0 .5cqmin 0 rgba(14,8,56,.6)); }
.mz3-n{ font-size:max(12px,5cqmin); color:#fff; text-shadow:0 2px 0 #1B1050; white-space:nowrap; }
.mz3-sy{ flex:1; height:max(8px,2.6cqmin); border-radius:99px; background:rgba(255,255,255,.15); border:2px solid #1B1050; overflow:hidden; } .mz3-sy i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#5BF5D6,#FFE066); transition:width .25s; }
.mz3-pc{ font-weight:400; font-size:max(16px,7cqmin); color:#FFE066; text-shadow:0 3px 0 #1B1050; min-width:2.6em; text-align:right; }
.mz3-fin{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1cqmin; background:rgba(14,8,56,.45); opacity:0; pointer-events:none; transition:opacity .3s; font-family:var(--game); z-index:4; }
.mz3-fin.on{ opacity:1; } .mz3-fin b{ font-weight:400; font-size:max(30px,22cqmin); color:#FFE066; -webkit-text-stroke:max(3px,1.2cqmin) #1B1050; paint-order:stroke fill; line-height:1; animation:arcPop 1s infinite; }
.mz3-fin span{ font-size:max(13px,6cqmin); color:#fff; padding:.6cqmin 3cqmin; border-radius:99px; background:var(--c); border:3px solid #1B1050; }
/* ── 모두의 항해 (큰 화면): 팀마다 배 한 척 ── */
.sl3{ position:absolute; inset:0; } .sl3 canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sl3-top{ position:absolute; left:0; right:0; top:1.4cqmin; display:flex; flex-direction:column; align-items:center; gap:.6cqmin; pointer-events:none; z-index:2; }
.sl3-m{ font-family:var(--game); font-weight:400; font-size:max(26px,16cqmin); line-height:1; color:#fff; -webkit-text-stroke:max(3px,1.3cqmin) #1B1050; paint-order:stroke fill; text-shadow:0 .9cqmin 0 #1B1050; font-variant-numeric:tabular-nums; }
.sl3-m small{ font-size:.5em; margin-left:.1em; }
.sl3-row{ display:flex; gap:1.4cqmin; align-items:center; padding:.4cqmin 2.4cqmin; border-radius:99px; background:rgba(27,16,80,.82); border:2px solid #1B1050; font-family:var(--game); font-size:max(11px,4.4cqmin); color:#fff; white-space:nowrap; }
.sl3-lv i{ font-style:normal; opacity:.55; }
.sl3-ft{ position:absolute; left:2cqmin; right:2cqmin; bottom:1.4cqmin; display:flex; align-items:center; gap:1.4cqmin; font-family:var(--game); font-size:max(11px,4.4cqmin); color:#fff; text-shadow:0 2px 0 #1B1050; z-index:2; pointer-events:none; }
.sl3-n{ white-space:nowrap; padding:.2cqmin 2cqmin; border-radius:99px; background:rgba(27,16,80,.75); }
.sl3-sy{ flex:1; height:max(8px,2.6cqmin); border-radius:99px; background:rgba(27,16,80,.6); border:2px solid #1B1050; overflow:hidden; } .sl3-sy i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#5BF5D6,#FFE066); transition:width .25s; }
.sl3-ov{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:1.4cqmin; background:rgba(14,8,56,.55); font-family:var(--game); text-align:center; z-index:3; }
.sl3-ov.on{ display:flex; } .sl3-ov.sunk{ background:rgba(90,10,30,.5); }
.sl3-ov b{ font-weight:400; font-size:max(22px,12cqmin); color:#fff; -webkit-text-stroke:max(3px,1cqmin) #1B1050; paint-order:stroke fill; } .sl3-ov.sunk b{ color:#FF8A9A; }
.sl3-ov span{ font-size:max(11px,4.6cqmin); color:#fff; padding:.4cqmin 2.4cqmin; border-radius:99px; background:rgba(27,16,80,.85); }

/* 연타왕 큰 화면: 진짜 아케이드 버튼 (누르면 뚜껑이 받침 속으로 쑥) */
.tp-ab{ position:relative; width:56cqmin; aspect-ratio:1.04; }
.tp-base{ position:absolute; left:0; right:0; top:18%; bottom:0; border-radius:50%; background:radial-gradient(ellipse at 50% 28%,#6FB8FF,#2E78E8 55%,#1A4BB0); border:.8cqmin solid #0E0838; box-shadow:0 2.4cqmin 0 #0E0838, 0 4cqmin 5cqmin rgba(0,0,0,.5), inset 0 1cqmin 0 rgba(255,255,255,.35); }
.tp-base::after{ content:''; position:absolute; left:9%; right:9%; top:5%; bottom:24%; border-radius:50%; background:radial-gradient(ellipse at 50% 70%,#05031A,#1B1050 80%); box-shadow:inset 0 1.2cqmin 2cqmin rgba(0,0,0,.7); }
.tp-cap{ position:absolute; z-index:1; left:12%; right:12%; top:0; bottom:26%; border-radius:50%; border:.8cqmin solid #0E0838; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff;
  background:radial-gradient(circle at 38% 28%,#FFB3B8 0,#FF5468 22%,#E8233F 55%,#A8102A 100%); box-shadow:0 4.6cqmin 0 #7A0A1E, 0 5.4cqmin 0 #0E0838, inset 0 -1.6cqmin 2.4cqmin rgba(0,0,0,.25), inset 0 1.4cqmin 2cqmin rgba(255,255,255,.35);
  transition:transform .05s ease-out, box-shadow .05s ease-out, filter .05s; }
.tp-cap::before{ content:''; position:absolute; left:18%; top:9%; width:34%; height:20%; border-radius:50%; background:rgba(255,255,255,.45); transform:rotate(-20deg); filter:blur(.3cqmin); }
.tp-ab.dn .tp-cap{ transform:translateY(4cqmin) scale(.985); box-shadow:0 .6cqmin 0 #7A0A1E, 0 1.4cqmin 0 #0E0838, inset 0 -1cqmin 2cqmin rgba(0,0,0,.4), inset 0 1.8cqmin 2.4cqmin rgba(0,0,0,.22); filter:brightness(1.15); transition-duration:.03s; }
.tp-cap span{ font-family:var(--game); font-size:13cqmin; line-height:1; text-shadow:0 .8cqmin 0 #7A0A1E, 0 0 2cqmin rgba(255,255,255,.35); }
.tp-cap span.pp{ animation:abPop .16s; }
.tp-cap small{ font-family:var(--game); font-size:3.4cqmin; opacity:.85; letter-spacing:.4cqmin; }
.tp-ring{ position:absolute; z-index:2; left:12%; right:12%; top:0; bottom:26%; border-radius:50%; border:.9cqmin solid var(--c,#FFD12E); opacity:0; pointer-events:none; }
.tp-ring.go{ animation:abRing .35s ease-out; }

/* 큰 화면 팀 칸: 우리 팀 기록(이름 · 점수)을 칸 크기에 맞춰 크게 */
.pn{ container-type:inline-size; }
.pn-h{ gap:1.6cqi; padding:1.2cqi 2.4cqi; min-height:11cqi; }
.pn-h em{ min-width:1.6em; height:1.6em; font-size:clamp(16px,6cqi,44px); }
.pn-h b{ font-size:clamp(18px,7.5cqi,56px); text-shadow:0 .5cqi 0 #1B1050; }
.pn-h i{ font-size:clamp(24px,11cqi,84px); line-height:1; text-shadow:0 .7cqi 0 #1B1050, 0 0 2cqi rgba(255,209,46,.35); }
.st-h{ font-size:clamp(16px,8cqmin,60px) !important; font-family:var(--game); text-shadow:0 .6cqmin 0 #1B1050 !important; }

/* 버튼을 누르면 진짜 눌리는 느낌 (아래 그림자가 줄면서 버튼이 쑥 내려가요) */
.main,.btn,.cta,.g-btn,.g-opt,.g-big,.rep,.tbtn,.arc-b{ transition:transform .06s ease-out, box-shadow .06s ease-out, filter .1s !important; -webkit-tap-highlight-color:transparent; }
.cta:active{ transform:translateY(5px) !important; box-shadow:0 1px 0 var(--candyD),inset 0 3px 0 rgba(255,255,255,.35) !important; filter:brightness(.97); }
.btn:active{ transform:translateY(4px) !important; box-shadow:0 1px 0 #1E1566,inset 0 2px 0 rgba(255,255,255,.2) !important; }
.btn.mint:active{ box-shadow:0 1px 0 var(--mintD) !important; } .btn.gold:active,.rep:active{ transform:translateY(4px) !important; box-shadow:0 1px 0 var(--goldD) !important; }
#gTop .sc{ font-size:24px !important; padding:6px 14px !important; }
#gTop .sc::before{ width:22px !important; height:22px !important; }

/* 게임 기본 설정 창 */
#defBox{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:2vh 2vw; background:rgba(8,4,32,.7); backdrop-filter:blur(4px); }
#defBox .df-b{ width:min(1200px,100%); max-height:94vh; display:flex; flex-direction:column; background:linear-gradient(180deg,#3B2BA8,#22176E); border:4px solid #0E0838; border-radius:26px; box-shadow:0 10px 0 #0E0838; overflow:hidden; }
#defBox .df-h{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:3px solid rgba(255,255,255,.12); flex-wrap:wrap; }
#defBox .df-h b{ font-family:var(--game); font-weight:400; font-size:28px; color:#FFD12E; text-shadow:0 3px 0 #0E0838; } #defBox .df-h span{ flex:1; font-weight:700; color:#C9C3FF; font-size:14px; }
#defBox .df-l{ overflow:auto; padding:12px 16px 18px; display:flex; flex-direction:column; gap:8px; }
#defBox .df-g{ display:grid; grid-template-columns:200px 1fr; gap:12px; align-items:center; padding:10px 12px; border-radius:16px; background:rgba(14,8,56,.55); }
#defBox .df-n{ display:flex; align-items:center; gap:10px; } #defBox .df-n img{ width:44px; height:44px; border-radius:12px; } #defBox .df-n b{ font-family:var(--game); font-weight:400; font-size:19px; }
#defBox .df-o{ display:flex; flex-wrap:wrap; gap:8px 20px; } #defBox .tk-opt{ flex-wrap:wrap !important; }

/* 모든 버튼: 누르면 쑥 눌렸다가 튀어 올라와요 (translate · scale 속성을 써서 원래 transform 위치와 겹치지 않아요) */
button, .btn, .cta, a.zd-dbb, [role="button"], .tbtn, .gcard, .g-btn, .g-opt, .g-num, .g-hand, .g-foot{ transition:translate .07s ease-out, scale .07s ease-out, filter .1s, box-shadow .07s ease-out; -webkit-tap-highlight-color:transparent; }
button:not(:disabled):active, .btn:active, .cta:active, a.zd-dbb:active, [role="button"]:active, .tbtn:active, .gcard:active,
button.prs, .g-btn.prs, .g-opt.prs, .g-num.prs, .g-hand.prs, .g-foot.prs{ translate:0 3px; scale:.97; filter:brightness(.95); }
button:disabled{ cursor:default; }
.btn.prs, .cta.prs, a.zd-dbb.prs, [role="button"].prs, .tbtn.prs, .gcard.prs{ translate:0 3px; scale:.97; filter:brightness(.95); }

/* ── 두뇌 공성전 (폰 sg2- · 큰 화면 sg-) ── */
.sg2{ justify-content:flex-start !important; gap:10px !important; padding:4px 2px; }
.sg2-hud{ width:100%; display:flex; gap:8px; align-items:stretch; }
.sg2-my{ flex:1.6; display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:16px; background:linear-gradient(180deg,#3A2D9E,#2A1F80); border:3px solid var(--stroke); box-shadow:0 4px 0 var(--stroke); }
.sg2-mn{ font-family:var(--game); font-size:14px; color:#fff; white-space:nowrap; }
.sg2-bar{ flex:1; height:16px; border-radius:9px; background:rgba(14,8,56,.6); border:2px solid var(--stroke); overflow:hidden; }
.sg2-bar i{ display:block; height:100%; width:100%; background:linear-gradient(180deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c)); transition:width .3s; }
.sg2-my.low .sg2-bar i{ background:linear-gradient(180deg,#FF9AAA,#FF4D6D); }
.sg2-hp{ font-family:var(--game); font-weight:400; font-size:24px; color:#FFE066; text-shadow:0 2px 0 var(--stroke); min-width:2.2em; text-align:right; font-variant-numeric:tabular-nums; }
.sg2-st{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px; border-radius:16px; background:linear-gradient(180deg,#3A2D9E,#2A1F80); border:3px solid var(--stroke); box-shadow:0 4px 0 var(--stroke); font-family:var(--game); font-size:14px; color:#D8D2FF; }
.sg2-st b{ font-family:var(--game); font-weight:400; font-size:24px; color:#FFE066; text-shadow:0 2px 0 var(--stroke); }
.sg2-k{ font-size:13px; color:#FFB14A; min-height:16px; }
.sg2-tg{ width:100%; display:flex; align-items:center; gap:6px; }
.sg2-tg>span{ font-family:var(--game); font-size:14px; color:#fff; white-space:nowrap; }
.sg2-tgl{ flex:1; display:flex; gap:6px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
.sg2-tgl::-webkit-scrollbar{ display:none; }
.sg2-tgl button{ flex:0 0 auto; padding:5px 10px; border-radius:12px; border:3px solid var(--stroke); background:#2A1F80; color:#fff; font-family:var(--game); font-size:15px; line-height:1.1; box-shadow:0 3px 0 var(--stroke); border-left:8px solid var(--c,#FFD23B); }
.sg2-tgl button small{ display:block; font-size:11px; color:#C9C2FF; }
.sg2-tgl button.on{ background:linear-gradient(180deg,#FFF3A8,var(--gold2)); color:#4A2A00; }
.sg2-tgl button.on small{ color:#6B4300; }
.sg2-card{ position:relative; width:100%; flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; padding:8px; border-radius:22px; background:rgba(26,16,78,.82); border:3px solid var(--stroke); box-shadow:0 5px 0 var(--stroke); transition:background .15s; }
.sg2-card.ok{ background:rgba(20,120,90,.85); }
.sg2-card.ng{ background:rgba(150,30,60,.85); animation:sgShake .3s; }
.sg2-kind{ align-self:center; font-family:var(--game); font-size:14px; color:#1B1050; background:#5BF5D6; border:2px solid var(--stroke); border-radius:10px; padding:1px 10px; }
.sg2-q{ min-height:90px !important; }
.sg2-q b{ font-size:34px !important; line-height:1.25; word-break:keep-all; }
.sg2-q b.sm{ font-size:24px !important; }
.sg2-opts{ flex:1; align-content:stretch; }
.sg2-opts .g-opt{ font-size:22px; padding:12px 6px; word-break:keep-all; }
.sg2-opts.two .g-opt{ font-size:40px; }
.sg2-opts .g-opt.wrong{ background:linear-gradient(180deg,#FF8DA0,#E8326A) !important; }
.sg2-shot{ position:absolute; left:50%; top:40%; width:90px; height:76px; pointer-events:none; opacity:0; background:center/contain no-repeat; }
.sg2-shot.kn{ background-image:url(img/s_sg_knight.webp); }
.sg2-shot.ck{ background-image:url(img/s_sg_chicken.webp); }
.sg2-shot.go{ animation:sgFly .6s ease-out; }
@keyframes sgFly{ 0%{ opacity:1; transform:translate(-50%,0) scale(.6) rotate(0); } 100%{ opacity:0; transform:translate(120%,-260%) scale(1.1) rotate(-40deg); } }
@keyframes sgShake{ 0%,100%{ transform:none; } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.sg2-grp{ position:absolute; inset:0; z-index:5; display:none; flex-direction:column; gap:10px; justify-content:center; padding:14px; background:rgba(14,8,56,.92); border-radius:18px; }
.sg2-grp.on{ display:flex; animation:arcPop .3s; }
.sg2-gh{ font-family:var(--game); font-size:26px; color:#FF9AD5; text-shadow:0 3px 0 var(--stroke); text-align:center; }
.sg2-gh b{ font-weight:400; color:#FFE066; font-size:20px; display:block; }
.sg2-gq{ font-family:var(--game); font-size:28px; color:#fff; text-align:center; word-break:keep-all; line-height:1.3; }
.sg2-go{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sg2-go button{ padding:18px 6px; border-radius:18px; border:3px solid var(--stroke); background:linear-gradient(180deg,#6F60E8,#4A3BC4); box-shadow:0 5px 0 #231877; color:#fff; font-family:var(--game); font-size:22px; word-break:keep-all; }
.sg2-go.two button{ font-size:36px; }
.sg2-go button.sel{ background:linear-gradient(180deg,#FFF3A8,var(--gold2)); color:#4A2A00; transform:translateY(3px); box-shadow:0 2px 0 var(--goldD); }
.sg2-gs{ text-align:center; font-size:14px; color:#C9C2FF; font-weight:800; }
.sg2-ov{ position:absolute; inset:0; z-index:6; display:none; flex-direction:column; gap:8px; align-items:center; justify-content:center; background:rgba(14,8,56,.86); border-radius:18px; text-align:center; }
.sg2-ov.on{ display:flex; }
.sg2-ov b{ font-family:var(--game); font-weight:400; font-size:30px; color:#fff; text-shadow:0 3px 0 var(--stroke); }
.sg2-ov span{ color:#C9C2FF; font-weight:800; }
.sc-siege{ gap:0 !important; }
.sg-wrap{ position:relative; flex:1; min-height:0; width:100%; }
.sg-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sg-gq{ position:absolute; left:50%; top:6px; transform:translateX(-50%); z-index:3; width:min(820px,92%); display:none; flex-direction:column; align-items:center; gap:8px; padding:12px 18px; border-radius:22px; background:rgba(14,8,56,.9); border:4px solid #FF9AD5; box-shadow:0 6px 0 var(--stroke),0 0 40px rgba(255,154,213,.45); font-family:var(--game); color:#fff; text-align:center; }
.sg-gq.on{ display:flex; animation:sgIn .35s; }
@keyframes sgIn{ 0%{ transform:translateX(-50%) scale(1.3); } 40%{ transform:translateX(-50%) scale(1); } }
.sg-gh{ font-size:clamp(18px,1.7vw,30px); color:#FF9AD5; text-shadow:0 3px 0 var(--stroke); }
.sg-gh b{ font-weight:400; color:#FFE066; margin-left:8px; }
.sg-gt{ font-size:clamp(22px,2.4vw,42px); text-shadow:0 3px 0 var(--stroke); word-break:keep-all; }
.sg-go{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.sg-go span{ padding:4px 14px; border-radius:14px; background:#3A2D9E; border:3px solid var(--stroke); font-size:clamp(16px,1.6vw,28px); }
.sg-gs{ font-size:clamp(13px,1vw,17px); color:#C9C2FF; }
.sg-gr{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.sg-gr span{ padding:4px 14px; border-radius:14px; background:color-mix(in srgb,var(--c) 70%,#1B1050); border:3px solid var(--stroke); font-size:clamp(16px,1.5vw,26px); text-shadow:0 2px 0 var(--stroke); }
.sg-pops{ position:absolute; left:8px; right:8px; top:6px; z-index:2; display:flex; flex-direction:row; justify-content:center; gap:8px; pointer-events:none; overflow:hidden; height:clamp(34px,5vh,52px); }
.sg-pop{ flex:0 0 auto; display:flex; align-items:center; gap:8px; white-space:nowrap; padding:4px 14px; border-radius:16px; background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 30%,#1B1050)); border:3px solid var(--stroke); box-shadow:0 4px 0 var(--stroke); font-family:var(--game); color:#fff; animation:sgPop 2.6s forwards; }
.sg-pop b{ font-weight:400; font-size:clamp(15px,1.3vw,22px); text-shadow:0 2px 0 var(--stroke); }
.sg-pop span{ font-size:clamp(14px,1.15vw,20px); color:#FFE066; text-shadow:0 2px 0 var(--stroke); }
@keyframes sgPop{ 0%{ opacity:0; transform:translateX(-30px) scale(.8); } 10%{ opacity:1; transform:none; } 85%{ opacity:1; } 100%{ opacity:0; } }
.sg-msg{ position:absolute; left:50%; bottom:12%; transform:translateX(-50%); z-index:3; display:none; padding:10px 22px; border-radius:18px; background:rgba(14,8,56,.85); border:3px solid var(--stroke); font-family:var(--game); font-size:clamp(18px,1.8vw,30px); color:#fff; }
.sg-msg.on{ display:block; }

/* =========================================================
   학습 대결 4종 (퀴즈 줄다리기 · 땅따먹기 · 몬스터 사냥 · 퀴즈 레이스) — 폰 lqg- · 큰 화면 lqx- qtg- qld- qmn- qrc-
   ========================================================= */
.lqg{ justify-content:flex-start !important; gap:8px !important; padding:6px 8px 8px; }
.lqg-hud{ width:100%; display:flex; flex-direction:column; gap:6px; padding:8px 10px; border-radius:18px; background:linear-gradient(180deg,#3A2D9E,#2A1F80); border:3px solid var(--stroke); box-shadow:0 4px 0 var(--stroke); }
.lqg-bar{ width:100%; display:flex; align-items:center; gap:8px; font-family:var(--game); font-size:15px; color:#D8D2FF; }
.lqg-c b{ font-family:var(--game); font-weight:400; font-size:24px; color:#FFE066; text-shadow:0 2px 0 var(--stroke); }
.lqg-k{ flex:1; text-align:center; color:#FFB14A; font-size:16px; } .lqg-k.hot{ color:#FFE066; animation:lqgHot .5s ease-in-out infinite alternate; }
@keyframes lqgHot{ to{ transform:scale(1.12); } }
.lqg-x{ font-size:12px; color:#A9A2E8; white-space:nowrap; }
.lqg-card{ position:relative; width:100%; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:8px 4px; border-radius:22px; background:rgba(26,16,78,.82); border:3px solid var(--stroke); box-shadow:0 5px 0 var(--stroke); overflow:hidden; transition:background .15s; }
.lqg-card.ok{ background:rgba(20,120,90,.85); } .lqg-card.ng{ background:rgba(150,30,60,.85); }
.lqg-q{ width:100%; }
.lqg-ov{ position:absolute; inset:0; z-index:4; display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(14,8,56,.86); border-radius:18px; text-align:center; padding:12px; }
.lqg-ov.on{ display:flex; animation:lqgIn .25s; } @keyframes lqgIn{ from{ opacity:0; transform:scale(1.1); } }
.lqg-ov b{ font-family:var(--game); font-weight:400; font-size:34px; color:#fff; text-shadow:0 3px 0 var(--stroke); } .lqg-ov span{ color:#C9C2FF; font-weight:800; font-size:16px; }
.lqg-vs{ font-family:var(--game); font-size:20px; color:#fff; text-shadow:0 2px 0 var(--stroke); } .lqg-vs em{ font-style:normal; color:#FFD12E; margin:0 6px; }
.lqg-rope{ position:relative; height:30px; border-radius:15px; background:linear-gradient(180deg,#7BD36B,#4CA84C); border:3px solid var(--stroke); overflow:hidden; }
.lqg-rope::before{ content:''; position:absolute; left:0; right:0; top:50%; height:6px; margin-top:-3px; background:repeating-linear-gradient(110deg,#E2B46A 0 6px,#B8823C 6px 10px); }
.lqg-ln{ position:absolute; top:0; bottom:0; width:3px; background:#fff; } .lqg-ln.l{ left:12%; } .lqg-ln.r{ right:12%; }
.lqg-flag{ position:absolute; top:50%; left:50%; transform:translate(-50%,-56%); font-size:22px; font-style:normal; transition:left .35s; filter:drop-shadow(0 2px 0 rgba(14,8,56,.6)); }
.lqg-land{ display:flex; align-items:center; gap:10px; text-align:left; } .lqg-li{ font-size:34px; }
.lqg-land b{ display:block; font-family:var(--game); font-weight:400; font-size:24px; color:#FFE066; text-shadow:0 2px 0 var(--stroke); } .lqg-land small{ color:#C9C2FF; font-weight:800; font-size:14px; }
.lqg-mon{ display:flex; align-items:center; gap:8px; } .lqg-mi{ font-size:32px; } .lqg-mw{ flex:1; text-align:left; min-width:0; }
.lqg-mn{ display:block; font-family:var(--game); font-weight:400; font-size:16px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lqg-mb{ height:16px; border-radius:9px; background:rgba(14,8,56,.6); border:2px solid var(--stroke); overflow:hidden; margin-top:3px; } .lqg-mb i{ display:block; height:100%; width:100%; background:linear-gradient(180deg,#9DFFC9,#2ED47A); transition:width .3s; }
.lqg-mr{ font-family:var(--game); font-size:20px; color:#FFE066; min-width:2.4em; text-shadow:0 2px 0 var(--stroke); }
.lqg-mon.rage{ animation:lqgRage .35s ease-in-out infinite alternate; } .lqg-mon.rage .lqg-mb i{ background:linear-gradient(180deg,#FFB27A,#FF4D2A); }
@keyframes lqgRage{ to{ transform:translateX(3px); } }
.lqg-road{ position:relative; height:38px; border-radius:12px; background:#3B3560; border:3px solid var(--stroke); overflow:hidden; }
.lqg-road::before{ content:''; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1px; background:repeating-linear-gradient(90deg,#fff 0 12px,transparent 12px 22px); opacity:.6; }
.lqg-car{ position:absolute; top:50%; left:0; transform:translateY(-55%) scaleX(-1); font-style:normal; font-size:26px; transition:left .4s; }
.lqg-fin{ position:absolute; right:4px; top:50%; transform:translateY(-55%); font-style:normal; font-size:24px; }
.lqg-rk{ font-family:var(--game); font-size:17px; color:#FFE066; text-shadow:0 2px 0 var(--stroke); }
/* 두뇌 공성전 · 학습 문제 */
.sg2-lq{ display:none; } .sg2-card.learn .sg2-q, .sg2-card.learn .sg2-opts{ display:none !important; } .sg2-card.learn .sg2-lq{ display:flex; flex:1; min-height:0; justify-content:center; }
.sg2-gv{ display:flex; justify-content:center; margin-top:4px; } .sg2-gv .lq-emo{ font-size:56px; } .sg2-gv svg{ max-width:120px; max-height:110px; }
.sg-gv{ display:flex; justify-content:center; } .sg-gv .lq-emo{ font-size:clamp(50px,6vw,110px); } .sg-gv svg{ width:min(24vw,320px); height:auto; max-height:24vh; }
.sg-gv .lq-sent, .sg-gv .lq-mbox{ font-size:clamp(18px,1.8vw,30px); }
/* 큰 화면 공통 */
.lqx-pops{ position:absolute; left:8px; right:8px; top:4px; z-index:6; display:flex; justify-content:center; gap:8px; pointer-events:none; overflow:hidden; height:clamp(34px,5vh,50px); }
.lqx-pop{ flex:0 0 auto; display:flex; align-items:center; gap:8px; white-space:nowrap; padding:4px 14px; border-radius:16px; background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 30%,#1B1050)); border:3px solid var(--stroke); box-shadow:0 4px 0 var(--stroke); font-family:var(--game); color:#fff; animation:sgPop 2.6s forwards; }
.lqx-pop b{ font-weight:400; font-size:clamp(15px,1.3vw,22px); text-shadow:0 2px 0 var(--stroke); } .lqx-pop span{ font-size:clamp(14px,1.15vw,20px); color:#FFE066; text-shadow:0 2px 0 var(--stroke); }
.lqx-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* 퀴즈 줄다리기 */
.sc-qtug{ position:relative; padding-top:clamp(38px,5.6vh,54px); }
.qtg-flag{ position:absolute; left:50%; top:50%; width:4cqmin; height:22cqh; margin-left:-.3cqmin; transform:translateY(-92%); z-index:3; border-left:.7cqmin solid #1B1050; pointer-events:none; }
.qtg-flag::after{ content:''; position:absolute; left:0; top:0; width:7cqmin; height:9cqh; background:#FF3B5C; border:.5cqmin solid #1B1050; border-radius:0 1cqmin 1cqmin 0; animation:qtgWave .6s ease-in-out infinite alternate; transform-origin:left center; }
@keyframes qtgWave{ to{ transform:skewY(-8deg) scaleX(.9); } }
.qtg-m .tg-line{ width:1cqmin; background:repeating-linear-gradient(180deg,#fff 0 3cqmin,transparent 3cqmin 5cqmin); } .qtg-m .tg-line.l{ left:15%; } .qtg-m .tg-line.r{ right:15%; }
.qtg-m .tg-team{ transition:transform .2s; } .qtg-m .tg-team.pull{ transform:translateX(-4%) rotate(-4deg); } .qtg-m .tg-team.f.pull{ transform:translateX(4%) rotate(4deg); }
.qtg-m .tg-team.slip{ animation:qtgSlip .35s ease-in-out 2; } @keyframes qtgSlip{ 25%{ transform:translateY(-6%) rotate(8deg); } 75%{ transform:translateY(4%) rotate(-8deg); } }
.qtg-fx{ position:absolute; inset:0; pointer-events:none; z-index:4; }
.qtg-yc{ position:absolute; top:22%; font-family:var(--game); font-weight:400; font-size:max(13px,6cqmin); color:#fff; text-shadow:0 .6cqmin 0 #1B1050,0 0 2cqmin var(--c); animation:pnPop 1.1s ease-out forwards; white-space:nowrap; }
.qtg-yc.big{ color:#FFE066; font-size:max(15px,8cqmin); } .qtg-yc.bad{ color:#FF9AAA; }
.tg-grid.many .tg-hd{ font-size:clamp(14px,1.3vw,22px); padding:3px 10px; } .tg-grid.many .tg-sc{ font-size:clamp(11px,.95vw,16px); padding:2px 10px; }
/* 땅따먹기 */
.sc-qland{ position:relative; gap:6px !important; }
.qld-top{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; min-height:40px; }
.qld-chip{ display:flex; align-items:center; gap:6px; padding:4px 12px 4px 4px; border-radius:999px; background:rgba(14,8,56,.8); border:3px solid var(--c); font-family:var(--game); font-size:clamp(14px,1.3vw,22px); color:#fff; }
.qld-chip em{ font-style:normal; min-width:1.6em; height:1.6em; border-radius:50%; background:var(--c); color:#1B1050; display:grid; place-items:center; font-size:.85em; } .qld-chip i{ font-style:normal; color:#FFD12E; }
.qld-chip.lead{ box-shadow:0 0 0 3px #FFD12E,0 0 18px rgba(255,209,46,.6); } .qld-more{ align-self:center; font-family:var(--game); color:#C9C2FF; }
.sc-qland .lqx-pops{ top:auto; bottom:6px; }
.qld-wrap{ position:relative; flex:1; min-height:0; width:100%; }
/* 몬스터 사냥 */
.sc-qmonster{ position:relative; }
.qmn-body{ flex:1; min-height:0; display:flex; gap:12px; width:100%; }
.qmn-stage{ position:relative; flex:1; min-width:0; }
.qmn-ban{ position:absolute; left:50%; bottom:18%; transform:translateX(-50%); z-index:3; display:none; padding:8px 20px; border-radius:18px; background:linear-gradient(90deg,#FF4D2A,#FF9A3D); border:3px solid var(--stroke); box-shadow:0 5px 0 var(--stroke); font-family:var(--game); font-size:clamp(16px,1.6vw,28px); color:#fff; text-shadow:0 2px 0 var(--stroke); white-space:nowrap; }
.qmn-ban.on{ display:block; animation:lqgRage .3s ease-in-out infinite alternate; }
.qmn-lb{ flex:0 0 clamp(220px,26%,330px); align-self:flex-start; max-height:100%; display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:20px; background:rgba(14,8,56,.78); border:3px solid var(--stroke); box-shadow:0 5px 0 var(--stroke); min-height:0; overflow:hidden; }
.qmn-lb h4{ margin:0; font-family:var(--game); font-weight:400; font-size:clamp(16px,1.4vw,24px); color:#FFE066; } .qmn-lb h4 small{ font-size:.65em; color:#C9C2FF; }
.qmn-rows{ display:flex; flex-direction:column; gap:5px; min-height:0; }
.qmn-r{ display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:12px; background:color-mix(in srgb,var(--c) 22%,#1B1050); border:2px solid var(--c); font-family:var(--game); color:#fff; }
.qmn-r em{ font-style:normal; min-width:1.5em; text-align:center; font-size:clamp(14px,1.2vw,20px); } .qmn-r span{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.qmn-r b{ font-weight:400; font-size:clamp(13px,1.15vw,19px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .qmn-r b small{ color:#FFB14A; font-size:.8em; }
.qmn-r span i{ display:block; height:6px; border-radius:3px; background:var(--c); transition:width .4s; } .qmn-r strong{ font-weight:400; color:#FFD12E; font-size:clamp(15px,1.3vw,22px); }
.qmn-more{ text-align:center; color:#C9C2FF; font-family:var(--game); }
/* 퀴즈 레이스 */
.sc-qrace{ position:relative; padding-top:clamp(38px,5.6vh,54px); }
.qrc-wrap{ flex:1; min-height:0; display:flex; gap:12px; width:100%; }
.qrc-tr{ flex:1; min-width:0; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; border:4px solid #1B1050; box-shadow:0 8px 0 rgba(14,8,56,.85); background:#3B3560; }
.qrc-ln{ position:relative; flex:1; min-height:0; display:flex; align-items:center; gap:8px; padding:0 10px; border-bottom:3px dashed rgba(255,255,255,.35); container-type:size; }
.qrc-ln:last-child{ border-bottom:0; } .qrc-ln.lead{ background:rgba(255,209,46,.12); }
.qrc-nm{ flex:0 0 clamp(70px,13%,170px); display:flex; align-items:center; gap:6px; font-family:var(--game); font-size:clamp(12px,min(1.4vw,42cqh),26px); color:#fff; text-shadow:0 2px 0 #1B1050; white-space:nowrap; overflow:hidden; border-left:6px solid var(--c); padding-left:6px; }
.qrc-nm em{ font-style:normal; color:#FFD12E; min-width:1.2em; }
.qrc-road{ --cw:min(150cqh,15cqw,190px); position:relative; flex:1; height:100%; }
.qrc-road::before{ content:''; position:absolute; left:0; right:0; top:50%; height:max(2px,3cqh); background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 24px,transparent 24px 46px); }
.qrc-fin{ position:absolute; right:0; top:0; bottom:0; width:clamp(10px,1.4%,22px); background:repeating-conic-gradient(#fff 0 25%,#1B1050 0 50%) 0 0/12px 12px; opacity:.9; }
.qrc-car{ position:absolute; left:0; top:50%; width:var(--cw); height:calc(var(--cw) * .54); transform:translateY(-50%); z-index:2; }
.qrc-body{ width:100%; height:100%; } .qrc-svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 3px 0 rgba(14,8,56,.5)); }
.qrc-car.mv .qrc-body{ animation:qrcBob .18s ease-in-out infinite alternate; } @keyframes qrcBob{ to{ transform:translateY(-6%); } }
.qrc-wh{ transform-box:fill-box; transform-origin:center; } .qrc-car.mv .qrc-wh{ animation:qrcWh .3s linear infinite; } @keyframes qrcWh{ to{ transform:rotate(360deg); } }
.qrc-car.spin .qrc-body{ animation:qrcSpin .9s ease-out; } @keyframes qrcSpin{ 0%{ transform:rotate(0); } 100%{ transform:rotate(720deg); } }
.qrc-fire{ position:absolute; right:96%; top:30%; width:60%; height:40%; border-radius:50%; background:radial-gradient(circle at 80% 50%,#FFE066,#FF7A2A 50%,transparent 72%); opacity:0; transition:opacity .2s; }
.qrc-car.boost .qrc-fire{ opacity:1; animation:qrcFire .12s infinite alternate; } @keyframes qrcFire{ to{ transform:scaleX(1.25); } }
.qrc-fx{ position:absolute; left:50%; bottom:88%; transform:translateX(-50%); font-family:var(--game); font-style:normal; font-size:clamp(13px,min(1.3vw,40cqh),24px); color:#fff; white-space:nowrap; text-shadow:0 2px 0 #1B1050; opacity:0; pointer-events:none; }
.qrc-fx.on{ animation:pnPop 1.1s ease-out forwards; } .qrc-fx.bad{ color:#FFE066; } .qrc-fx.ok{ color:#9FFFD6; }
.qrc-ban{ position:absolute; top:50%; transform:translateY(-50%); font-style:normal; font-size:min(60cqh,40px); animation:qrcBan 2.2s forwards; } @keyframes qrcBan{ 80%{ opacity:1; } 100%{ opacity:0; } }
.qrc-v{ flex:0 0 auto; min-width:3.6em; text-align:right; font-family:var(--game); font-weight:400; font-size:clamp(14px,min(1.6vw,46cqh),30px); color:#FFD12E; text-shadow:0 2px 0 #1B1050; }
.qrc-ln.done .qrc-car{ animation:qrcWin .5s ease-in-out infinite alternate; } @keyframes qrcWin{ to{ transform:translateY(-62%); } }
.qrc-tr.thin .qrc-ln{ padding:0 6px; border-bottom-width:2px; }

/* =========================================================
   삼각 조각 퍼즐 — 폰 tz- · 큰 화면 tzs-
   ========================================================= */
.tz{ justify-content:flex-start !important; gap:8px !important; padding:6px 8px 8px; }
.tz-hud{ width:100%; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:18px; background:linear-gradient(180deg,#3A2D9E,#2A1F80); border:3px solid var(--stroke); box-shadow:0 4px 0 var(--stroke); }
.tz-rk{ font-size:38px; line-height:1; filter:drop-shadow(0 3px 0 rgba(14,8,56,.5)); }
.tz-in{ flex:1; text-align:left; min-width:0; } .tz-n{ display:block; font-family:var(--game); font-weight:400; font-size:24px; color:#FFE066; text-shadow:0 2px 0 var(--stroke); } .tz-lv{ color:#C9C2FF; font-weight:800; font-size:13px; }
.tz-b{ font-family:var(--game); font-size:22px; line-height:1; padding:6px 10px; border-radius:14px; border:3px solid var(--stroke); color:#05312A; background:linear-gradient(180deg,#8CFFE9,#5BF5D6 45%,#14B898); box-shadow:0 4px 0 #0A6E5B; touch-action:manipulation; }
.tz-b small{ display:block; font-size:11px; } .tz-b:active{ translate:0 3px; box-shadow:0 1px 0 #0A6E5B; } .tz-rs{ background:linear-gradient(180deg,#FFF3A8,#FFD12E 40%,#F2A900); color:#4A2A00; box-shadow:0 4px 0 #A87300; }
.tz-box{ position:relative; width:100%; flex:1; min-height:0; border-radius:22px; background:rgba(26,16,78,.82); border:3px solid var(--stroke); box-shadow:0 5px 0 var(--stroke); overflow:hidden; touch-action:none; }
.tz-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.tz-ok{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(14,8,56,.78); text-align:center; z-index:3; }
.tz-ok.on{ display:flex; animation:lqgIn .3s; } .tz-ok b{ font-family:var(--game); font-weight:400; font-size:44px; color:#FFE066; text-shadow:0 4px 0 var(--stroke); } .tz-ok span{ color:#fff; font-weight:800; font-size:17px; }
.tz-tip{ font-weight:800; font-size:13px; color:#A9A2E8; }
.tzs{ position:absolute; inset:0; display:flex; align-items:center; gap:3cqmin; padding:2cqmin 3cqmin; }
.tzs-l{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:1cqmin; }
.tzs-e{ font-size:min(26cqh,18cqw); line-height:1; filter:drop-shadow(0 1cqmin 0 rgba(14,8,56,.6)); } .tzs-e.up{ animation:arcMp .6s; }
.tzs-r{ font-family:var(--game); font-weight:400; font-size:max(11px,min(9cqh,6cqw)); color:#FFE066; text-shadow:0 .6cqmin 0 #1B1050; white-space:nowrap; }
.tzs-m{ flex:1; min-width:0; height:100%; display:flex; flex-direction:column; gap:1cqmin; }
.tzs-m canvas{ flex:1; min-height:0; width:100%; }
.tzs-n{ font-weight:800; font-size:max(10px,min(7cqh,4.4cqw)); color:#C9C2FF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
@container (max-height: 70px){ .tzs-n{ display:none; } .tzs-l{ flex-direction:row; } .tzs-e{ font-size:min(70cqh,12cqw); } }