/* 말랑 퀴즈 파티 — "물감 대원 작전실" 테마 (2026-11-04, Q-레이서와 같던 사탕 테마를 바꿈)
   남색 작전실 바탕 + 네온 하늘색 줄 + 물감 튀김. 단추는 물감 스티커, 화면 전환은 물감이 확 덮는다.
   글꼴: Black Han Sans(제목·단추) + Pretendard(문제·설명). 미니 유물레이더스와 같은 글꼴이다. */
@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: url(vendor/fonts/Pretendard-Bold.woff2) format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: url(vendor/fonts/Pretendard-ExtraBold.woff2) format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: url(vendor/fonts/Pretendard-Black.woff2) format('woff2'); }
/* 캔버스 글자용: 굵기 없이 이름만으로 고르게 */
@font-face { font-family: 'PretendardEB'; font-display: swap; src: url(vendor/fonts/Pretendard-ExtraBold.woff2) format('woff2'); }
@font-face { font-family: 'Black Han Sans'; font-weight: 400; font-display: swap; src: url(vendor/fonts/BlackHanSans-korean.woff2) format('woff2'); }
@font-face { font-family: 'Black Han Sans'; font-weight: 400; font-display: swap; src: url(vendor/fonts/BlackHanSans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --bg0: #0b0f2b; --bg1: #141a44; --panel: #1b2357; --panel2: #243071; --line: #3a4aa0; --line2: #5466c4;
  --neon: #36f1ff; --neon-d: #0f9fc0; --txt: #f3f6ff; --mute: #a3aedd; --ink: #141838; --shadow: #060920;
  --pink: #ff4f9a; --pink-d: #b92466; --yellow: #ffcf3a; --yellow-d: #b98400; --cyan: #2ed8ff; --cyan-d: #087fa6;
  --green: #3fe08a; --green-d: #138a4c; --purple: #a46bff; --purple-d: #6337c8; --orange: #ff8a3d; --orange-d: #bf5410;
  /* 옛 이름 (코드 곳곳에서 씀) */
  --blue: var(--cyan); --blue-d: var(--cyan-d); --mint: var(--green); --mint-d: var(--green-d);
  --ui: 'Black Han Sans', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --read: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --num: 'Black Han Sans', sans-serif;
  --a0: #ff5a6e; --a0d: #b8263f; --a1: #3f8cff; --a1d: #1a54b8; --a2: #ffc02e; --a2d: #b07700; --a3: #32c97a; --a3d: #117a45;
  --splat1: url(assets/ui/splat1.svg); --splat2: url(assets/ui/splat2.svg); --blobm: url(assets/ui/blob.svg);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg0); font-family: var(--ui); color: var(--txt); user-select: none; -webkit-user-select: none; touch-action: none; }
button { font-family: inherit; color: inherit; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* 물감 모양 (mask) */
.splat, .sp1 { -webkit-mask: var(--splat1) center / contain no-repeat; mask: var(--splat1) center / contain no-repeat; }
.sp2 { -webkit-mask: var(--splat2) center / contain no-repeat; mask: var(--splat2) center / contain no-repeat; }

/* ---- 메뉴 배경: 남색 작전실 + 격자 + 흐릿한 물감 자국 ---- */
#bgDeco { position: fixed; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(80,100,220,.35), transparent 60%),
    linear-gradient(rgba(70,90,190,.13) 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(70,90,190,.13) 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(180deg, #161c4c 0%, #0d1233 100%); }
#bgDeco i { position: absolute; width: 46vmin; height: 46vmin; opacity: .16; -webkit-mask: var(--splat1) center / contain no-repeat; mask: var(--splat1) center / contain no-repeat; animation: drift 40s ease-in-out infinite alternate; }
#bgDeco i:nth-child(even) { -webkit-mask-image: var(--splat2); mask-image: var(--splat2); }
#bgDeco i:nth-child(1) { left: -8vmin; top: -6vmin; background: var(--pink); }
#bgDeco i:nth-child(2) { right: -10vmin; top: 8vh; background: var(--cyan); width: 56vmin; height: 56vmin; animation-duration: 52s; }
#bgDeco i:nth-child(3) { left: 30vw; bottom: -16vmin; background: var(--yellow); animation-duration: 47s; }
#bgDeco i:nth-child(4) { left: 6vw; bottom: 18vh; background: var(--green); width: 24vmin; height: 24vmin; animation-duration: 36s; }
#bgDeco i:nth-child(5) { right: 18vw; bottom: -6vmin; background: var(--purple); width: 34vmin; height: 34vmin; animation-duration: 58s; }
#bgDeco i:nth-child(6) { left: 46vw; top: -12vmin; background: var(--orange); width: 22vmin; height: 22vmin; animation-duration: 44s; }
@keyframes drift { from { transform: rotate(0) scale(1); } to { transform: rotate(24deg) scale(1.12) translate(2vmin, 3vmin); } }
body.ingame #bgDeco { display: none; }

#ui { position: fixed; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 76px 4vw 30px; pointer-events: auto; }
.screen.active { display: flex; animation: scrIn .45s cubic-bezier(.2,1.3,.4,1); }
@keyframes scrIn { from { opacity: 0; transform: scale(.97) translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- 단추: 물감 스티커 (흰 테두리 + 딱딱한 그림자 + 삐뚤한 모서리) ---- */
.btn { --c: #e9edff; --d: #8f9bd6; --t: var(--ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  min-width: 120px; padding: 12px 24px 12px; border: 0; border-radius: 16px 22px 18px 24px / 22px 16px 24px 18px; cursor: pointer; font-size: 20px; color: var(--t); letter-spacing: .01em;
  background: var(--c); box-shadow: 0 0 0 3px #fff, 0 7px 0 3px var(--shadow); transition: transform .12s, box-shadow .12s, filter .15s; outline: none; isolation: isolate; }
/* 모서리에 튄 물감 방울 */
.btn::after { content: ''; position: absolute; right: -10px; top: -12px; width: 26px; height: 26px; background: var(--c); -webkit-mask: var(--splat2) center / contain no-repeat; mask: var(--splat2) center / contain no-repeat; transform: rotate(20deg); transition: transform .2s; pointer-events: none; }
.btn:hover { filter: brightness(1.06); transform: translateY(-2px) rotate(-1deg); }
.btn:hover::after { transform: rotate(60deg) scale(1.25); }
.btn:active, .btn.down { transform: translateY(5px) scale(.98); box-shadow: 0 0 0 3px #fff, 0 2px 0 3px var(--shadow); }
.btn.pink { --c: var(--pink); --t: #fff; } .btn.blue { --c: var(--cyan); --t: #06304a; } .btn.yellow { --c: var(--yellow); --t: #4a3000; }
.btn.mint { --c: var(--green); --t: #053a1e; } .btn.purple { --c: var(--purple); --t: #fff; }
.btn.pink, .btn.purple { text-shadow: 0 2px 0 rgba(0,0,0,.22); }
.btn.big { font-size: 28px; padding: 15px 38px 15px; min-width: 240px; border-radius: 22px 30px 24px 32px / 30px 22px 32px 24px; }
.btn.small { font-size: 17px; padding: 8px 16px; min-width: 0; box-shadow: 0 0 0 2.5px #fff, 0 5px 0 2.5px var(--shadow); }
.btn.small::after { width: 16px; height: 16px; right: -6px; top: -8px; }
.btn.small:active { transform: translateY(3px); box-shadow: 0 0 0 2.5px #fff, 0 1px 0 2.5px var(--shadow); }
.btn.icon { width: 48px; height: 48px; padding: 0; font-size: 22px; }
.btn[disabled] { filter: grayscale(.8) opacity(.55); pointer-events: none; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(0); animation: rip .55s ease-out forwards; pointer-events: none; z-index: 3; }
@keyframes rip { to { transform: scale(2.6); opacity: 0; } }
.row { display: flex; gap: 14px; align-items: center; } .row.center { justify-content: center; }

/* ---- 로고: "말랑"은 노란 테이프, "퀴즈파티"는 남색 테두리 물감 글자 ---- */
.logo { display: flex; flex-direction: column; align-items: center; line-height: .9; filter: drop-shadow(0 8px 0 rgba(6,9,32,.55)); }
.logo .l1 { font-size: 46px; color: var(--ink); background: var(--yellow); padding: .08em .5em .02em; transform: rotate(-5deg); margin-bottom: .12em; letter-spacing: .08em;
  box-shadow: 0 0 0 4px #fff; clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 94%, 0 46%); }
.logo .l2 { display: flex; gap: .02em; }
.logo .l2 b { font-weight: normal; font-size: 104px; color: #fff; -webkit-text-stroke: 14px var(--bg1); paint-order: stroke fill; display: inline-block; animation: hop 2.6s ease-in-out infinite; }
.logo .l2 b:nth-child(1) { color: var(--pink); } .logo .l2 b:nth-child(2) { color: var(--yellow); animation-delay: .15s; }
.logo .l2 b:nth-child(3) { color: var(--cyan); animation-delay: .3s; } .logo .l2 b:nth-child(4) { color: var(--green); animation-delay: .45s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 72% { transform: translateY(5px) scale(1.06, .92); } 82% { transform: translateY(-14px) rotate(-4deg); } 92% { transform: translateY(0) rotate(1deg); } }
.logo.small .l1 { font-size: 26px; box-shadow: 0 0 0 3px #fff; } .logo.small .l2 { font-size: 58px; color: #fff; -webkit-text-stroke: 9px var(--bg1); paint-order: stroke fill; }

/* ---- 로딩 ---- */
#scr-loading { background: radial-gradient(90% 70% at 50% 40%, #1c2560, var(--bg0)); }
.loading { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.loading .bar { width: 360px; height: 20px; border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 3px var(--line); overflow: hidden; }
.loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--yellow), var(--green), var(--cyan)); transition: width .2s; }
.loading p { font-family: var(--read); font-weight: 700; font-size: 17px; color: var(--mute); margin: 0; }

/* ---- 타이틀 ---- */
#scr-title { padding: 0; justify-content: flex-start; }
.title-bg { position: absolute; inset: 0; background: var(--bg1) center / cover; animation: kb 26s ease-in-out infinite alternate; }
/* 그림 아래쪽을 작전실 남색으로 살짝 덮어 단추가 또렷하게 */
.title-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,15,43,0) 45%, rgba(11,15,43,.55) 100%); }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.08) translateY(-1%); } }
.title-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.title-confetti i { position: absolute; top: -30px; width: 16px; height: 16px; -webkit-mask: var(--splat2) center / contain no-repeat; mask: var(--splat2) center / contain no-repeat; animation: fall linear infinite; opacity: .9; }
@keyframes fall { to { transform: translateY(112vh) rotate(540deg); } }
/* 로고는 버튼 묶음 바로 위, 버튼 묶음은 화면 중간보다 아래(윗변이 높이의 54%) — 2026-11-04 사용자 요청 위치 그대로 */
.title-wrap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 5vh; pointer-events: none; }
.title-wrap > * { pointer-events: auto; }
.title-btns { position: absolute; top: 54%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 30px); }
#scr-title .title-btns .btn { font-size: clamp(30px, 4.6vh, 44px); height: clamp(66px, 10vh, 96px); min-width: clamp(280px, 24vw, 360px); padding: 0.06em 44px 0; line-height: 1; }
/* 큰 단추 뒤에 튄 물감 */
#scr-title .title-btns .btn::before { content: ''; position: absolute; inset: -55% -16%; z-index: -1; background: var(--c); opacity: .45; -webkit-mask: var(--splat1) center / 100% 100% no-repeat; mask: var(--splat1) center / 100% 100% no-repeat; transition: transform .25s; }
#scr-title .title-btns .btn:hover::before { transform: scale(1.12) rotate(-4deg); opacity: .7; }
#scr-title .title-btns .btn::after { width: 34px; height: 34px; right: -16px; top: -16px; }
#scr-title .logo { position: absolute; left: 50%; bottom: calc(46% + clamp(16px, 4vh, 40px)); transform: translateX(-50%); }
#scr-title .logo .l1 { font-size: clamp(36px, min(7vh, 6vw), 76px); }
#scr-title .logo .l2 b { font-size: clamp(84px, min(18vh, 14vw), 180px); -webkit-text-stroke-width: 0.13em; }
.credit { position: absolute; right: 22px; bottom: 16px; z-index: 2; font-family: var(--read); font-weight: 800; font-size: 16px; color: #fff; text-shadow: 0 2px 0 var(--shadow), 0 0 8px rgba(6,9,32,.6); }

/* ---- 제목 / 단계 ---- */
.head { position: relative; margin: 0 0 16px; font-weight: normal; font-size: 44px; color: #fff; text-align: center; text-shadow: 0 4px 0 var(--shadow); }
/* 제목 밑 물감 붓질 */
.head::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 70%; height: 14px; transform: translateX(-50%) rotate(-1.5deg); border-radius: 10px 30px 12px 26px; background: var(--pink); z-index: -1; opacity: .9; }
.steps { position: relative; display: flex; gap: 34px; margin: 10px 0 28px; }
.steps::before { content: ''; position: absolute; left: 30px; right: 30px; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, var(--line2) 0 10px, transparent 10px 18px); }
.steps b { position: relative; font-weight: normal; padding: 7px 18px 6px; border-radius: 12px; background: var(--panel); color: var(--mute); font-size: 17px; box-shadow: 0 0 0 2px var(--line); }
.steps b.on { background: var(--neon); color: #052a35; box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(54,241,255,.6); }
.steps b.done { background: var(--panel2); color: var(--green); } .steps b.done::before { content: '✓ '; }
.back { position: absolute; left: 22px; bottom: 22px; }

/* ---- 학년: 물감 팔레트 위 물감 6방울 ---- */
.choice-grid { display: grid; gap: 22px; width: min(980px, 92vw); }
.palette { position: relative; grid-template-columns: repeat(3, 1fr); gap: 2vh 3vw; width: min(940px, 90vw); padding: 4.5vh 6vw 5vh 7vw;
  background: #eef1fb; border-radius: 48% 52% 44% 56% / 58% 46% 54% 42%; box-shadow: 0 0 0 6px #fff, 0 14px 0 6px var(--shadow), inset 0 -10px 0 rgba(20,24,56,.08); }
/* 엄지 구멍 */
.palette::before { content: ''; position: absolute; left: 3.2%; top: 50%; width: 7%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: var(--bg1); box-shadow: inset 0 4px 0 rgba(0,0,0,.35), 0 0 0 4px #d7ddf2; }
.blob { --c: var(--pink); --d: var(--pink-d); position: relative; border: 0; background: none; cursor: pointer; aspect-ratio: 1.15; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; animation: dropIn .55s cubic-bezier(.2,1.5,.4,1) backwards; transition: transform .15s; isolation: isolate; }
.blob::before { content: ''; position: absolute; inset: -4%; z-index: -1; background: var(--c); -webkit-mask: var(--splat1) center / contain no-repeat; mask: var(--splat1) center / contain no-repeat;
  filter: drop-shadow(0 6px 0 var(--d)); transition: transform .25s; }
.blob:nth-child(even)::before { -webkit-mask-image: var(--splat2); mask-image: var(--splat2); }
.blob b { font-weight: normal; font-size: clamp(54px, 10vh, 92px); line-height: .9; -webkit-text-stroke: 8px var(--d); paint-order: stroke fill; }
.blob small { font-size: clamp(18px, 2.8vh, 26px); -webkit-text-stroke: 5px var(--d); paint-order: stroke fill; }
.blob:hover { transform: scale(1.06) rotate(-3deg); } .blob:hover::before { transform: rotate(18deg) scale(1.05); }
.blob:active, .blob.hit { transform: scale(.92); }
.blob.hit::before { animation: splash .4s ease-out; }
@keyframes splash { 50% { transform: scale(1.3) rotate(25deg); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-60px) scale(.4); } }

/* ---- 학기: 물감통 2개 ---- */
.cans { grid-template-columns: repeat(2, auto); justify-content: center; gap: 8vw; width: auto; }
.can { --c: var(--green); --d: var(--green-d); position: relative; width: clamp(200px, 22vw, 280px); height: clamp(240px, 42vh, 340px); border: 0; padding: 0; background: none; cursor: pointer; animation: dropIn .55s cubic-bezier(.2,1.5,.4,1) backwards; transition: transform .15s; }
.can .body { position: absolute; left: 0; right: 0; top: 14%; bottom: 0; border-radius: 0 0 26px 26px / 0 0 34px 34px; background: linear-gradient(90deg, #c9d1ec, #f6f8ff 35%, #dde3f6 70%, #aeb8dc);
  box-shadow: 0 0 0 4px #fff, 0 12px 0 4px var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.can .body::before { content: ''; position: absolute; left: 0; right: 0; top: 22%; bottom: 22%; background: var(--panel); }
.can .body b, .can .body small { position: relative; font-weight: normal; color: #fff; }
.can .body b { font-size: clamp(70px, 13vh, 110px); line-height: .9; color: var(--c); -webkit-text-stroke: 7px var(--bg0); paint-order: stroke fill; }
.can .body small { font-size: clamp(22px, 3.6vh, 32px); }
.can .lid { position: absolute; left: -3%; right: -3%; top: 6%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--c) 75%, #fff) 0 40%, var(--c) 41% 70%, var(--d) 71%); box-shadow: 0 0 0 4px #fff; z-index: 2; }
/* 넘쳐 흐르는 물감 */
.can .drip { position: absolute; left: 0; right: 0; top: 15%; height: 15%; z-index: 3; }
.can .drip i { position: absolute; top: 0; width: 10%; background: var(--c); border-radius: 0 0 40px 40px; transition: height .35s; }
.can .drip i:nth-child(1) { left: 14%; height: 70%; } .can .drip i:nth-child(2) { left: 44%; height: 40%; width: 8%; } .can .drip i:nth-child(3) { left: 72%; height: 95%; width: 11%; }
.can .drip::before { content: ''; position: absolute; left: 4%; right: 4%; top: 0; height: 28%; background: var(--c); border-radius: 0 0 20px 20px; }
.can:hover { transform: translateY(-6px) rotate(-2deg); } .can:hover .drip i { height: 120%; }
.can:active, .can.hit { transform: scale(.95) rotate(2deg); }

/* ---- 과목: 대원 배지 ---- */
.badges { gap: 3vw; width: min(1100px, 94vw); }
.badges.g5 { grid-template-columns: repeat(5, 1fr); } .badges.g3 { grid-template-columns: repeat(3, 1fr); width: min(760px, 88vw); }
.badge { --c: var(--pink); --d: var(--pink-d); position: relative; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; animation: dropIn .55s cubic-bezier(.2,1.5,.4,1) backwards; transition: transform .15s; }
.badge .disc { position: relative; width: 100%; aspect-ratio: 1; max-width: 190px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, var(--d));
  box-shadow: 0 0 0 5px #fff, 0 0 0 10px var(--panel2), 0 12px 0 10px var(--shadow); display: flex; align-items: center; justify-content: center; font-size: clamp(54px, 9vh, 84px); }
/* 바느질 테두리 */
.badge .disc::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.75); }
.badge b { font-weight: normal; font-size: clamp(24px, 3.8vh, 34px); color: #fff; background: var(--panel2); padding: 4px 18px 2px; border-radius: 8px; box-shadow: 0 0 0 3px var(--c), 0 5px 0 3px var(--shadow); transform: rotate(-2deg); }
.badge:hover { transform: translateY(-6px) rotate(3deg); } .badge:active, .badge.hit { transform: scale(.94); }
.k0 { --c: #ff4f9a; --d: #b92466; } .k1 { --c: #ff8a3d; --d: #bf5410; } .k2 { --c: #ffcf3a; --d: #b98400; } .k3 { --c: #3fe08a; --d: #138a4c; } .k4 { --c: #2ed8ff; --d: #087fa6; } .k5 { --c: #a46bff; --d: #6337c8; }
/* 옛 칸 (혹시 남아 있으면) */
.ctile { --c: var(--pink); --d: var(--pink-d); border: 0; border-radius: 22px; cursor: pointer; color: #fff; font-size: 40px; padding: 30px 10px; background: var(--c); box-shadow: 0 0 0 4px #fff, 0 9px 0 4px var(--shadow); }

/* ---- 메뉴: 왼쪽 3D 내 캐릭터, 오른쪽 작전 카드 4장 ---- */
.topbar { position: absolute; top: 14px; left: 18px; right: 80px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 5; }
.topbar h2 { margin: 0; font-weight: normal; font-size: 30px; color: #fff; text-shadow: 0 3px 0 var(--shadow); }
.chip { border: 0; padding: 8px 16px 7px; border-radius: 12px; background: var(--panel); font-size: 18px; color: var(--txt); box-shadow: 0 0 0 2px var(--line), 0 4px 0 2px var(--shadow); cursor: pointer; }
.chip.subj::before { content: '🎯 '; } .chip.subj::after { content: ' ✎'; color: var(--neon); }
.coins { display: flex; align-items: center; gap: 7px; padding: 6px 16px 5px 9px; border-radius: 14px; background: var(--panel); font-family: var(--num); font-size: 22px; color: var(--yellow); box-shadow: 0 0 0 2px var(--line), 0 4px 0 2px var(--shadow); }
.coins::before { content: ''; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b0, #ffd23f 45%, #e8a100); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 2px #fff3; }
.coins.bump { animation: bump .4s; }
@keyframes bump { 40% { transform: scale(1.18); } }
#scr-menu .head { display: none; }
.menu-body { display: flex; align-items: center; gap: 4vw; width: min(1180px, 96vw); height: min(78vh, 640px); }
.hero { position: relative; flex: 0 0 34%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; }
.hero-stage { position: relative; flex: 1; width: 100%; }
.hero-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; z-index: 1; }
/* 네온 받침대 + 뒤 물감 */
.hero-stage::before { content: ''; position: absolute; left: 4%; right: 4%; top: 4%; bottom: 16%; background: var(--pink); opacity: .28; -webkit-mask: var(--splat1) center / contain no-repeat; mask: var(--splat1) center / contain no-repeat; animation: drift 30s ease-in-out infinite alternate; }
.hero-ring { position: absolute; left: 50%; bottom: 3%; width: 70%; height: 15%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(54,241,255,.35), rgba(54,241,255,0) 70%); box-shadow: 0 0 0 4px var(--neon), 0 0 26px rgba(54,241,255,.8), inset 0 0 18px rgba(54,241,255,.6); }
.hero-name { font-size: 30px; color: #fff; text-shadow: 0 3px 0 var(--shadow); text-align: center; line-height: 1.1; }
.hero-name small { display: block; font-family: var(--read); font-weight: 800; font-size: 15px; color: var(--neon); letter-spacing: .1em; }
.menu-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2vh 2.2vw; }
.tile { --c: var(--pink); --d: var(--pink-d); position: relative; height: clamp(150px, 31vh, 250px); border: 0; border-radius: 20px 28px 22px 30px / 28px 20px 30px 22px; cursor: pointer; display: grid; grid-template-columns: 42% 1fr; column-gap: 4%; grid-template-rows: 1fr auto auto 1fr; align-items: center; padding: 10px 16px 10px 6px; color: #fff; text-align: left;
  background: linear-gradient(135deg, var(--panel2), var(--panel)); box-shadow: 0 0 0 4px var(--c), 0 10px 0 4px var(--shadow); transition: transform .14s, box-shadow .14s; animation: tileIn .55s cubic-bezier(.2,1.4,.4,1) backwards; overflow: visible; isolation: isolate; }
/* 카드 안쪽 물감 자국 + 번호 테이프 */
.tile::before { content: ''; position: absolute; left: -5%; top: 0; width: 47%; height: 100%; z-index: -1; background: var(--c); opacity: .9; -webkit-mask: var(--splat1) center / contain no-repeat; mask: var(--splat1) center / contain no-repeat; transition: transform .3s; }
.tile:nth-child(even)::before { -webkit-mask-image: var(--splat2); mask-image: var(--splat2); }
.tile .no { position: absolute; right: 14px; top: -14px; font-size: 18px; color: var(--ink); background: var(--yellow); padding: 3px 12px 1px; transform: rotate(4deg); box-shadow: 0 0 0 3px #fff; clip-path: polygon(4% 0, 100% 6%, 96% 100%, 0 92%); }
.tile:nth-child(odd) { transform: rotate(-1deg); } .tile:nth-child(even) { transform: rotate(1deg); }
.tile:nth-child(2) { animation-delay: .06s; } .tile:nth-child(3) { animation-delay: .12s; } .tile:nth-child(4) { animation-delay: .18s; }
.tile:hover { transform: translateY(-5px) rotate(0); box-shadow: 0 0 0 4px #fff, 0 14px 0 4px var(--shadow); } .tile:hover::before { transform: rotate(14deg) scale(1.06); }
.tile:active { transform: translateY(6px) scale(.98); box-shadow: 0 0 0 4px var(--c), 0 3px 0 4px var(--shadow); }
.tile .ic { grid-row: 1 / 5; display: flex; align-items: center; justify-content: center; font-size: 84px; height: 100%; }
.tile .ic img { width: 88%; max-height: 86%; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(6,9,32,.45)); transition: transform .3s; }
.tile:hover .ic img { transform: scale(1.08) rotate(4deg); }
.tile b { grid-row: 2; font-weight: normal; font-size: clamp(22px, min(4.2vh, 2.6vw), 36px); white-space: nowrap; text-shadow: 0 3px 0 var(--shadow); }
.tile em { grid-row: 3; font-family: var(--read); font-weight: 700; font-style: normal; font-size: clamp(13px, 2vh, 17px); color: var(--mute); margin-top: 6px; }
@keyframes tileIn { from { opacity: 0; transform: translateY(26px) scale(.9); } }
.t1 { --c: var(--pink); } .t2 { --c: var(--cyan); } .t3 { --c: var(--yellow); } .t4 { --c: var(--green); }

/* ---- 커버플로우 (모드·캐릭터·상점 카드) ---- */
.cover { position: relative; width: 100%; height: 54vh; min-height: 300px; perspective: 1200px; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.cv-card { position: absolute; width: min(300px, 26vw); aspect-ratio: 4 / 5; border-radius: 22px; background: var(--panel); box-shadow: 0 0 0 4px var(--line2), 0 12px 0 4px var(--shadow); display: flex; flex-direction: column; align-items: center; overflow: hidden;
  transition: transform .45s cubic-bezier(.2,1.1,.3,1), opacity .35s, filter .35s, box-shadow .3s; cursor: pointer; }
.cv-card .cv-img { position: relative; width: 100%; flex: 1; background: radial-gradient(circle at 50% 45%, #33408e, #1a2156 75%); display: flex; align-items: center; justify-content: center; font-size: 110px; overflow: hidden; isolation: isolate; }
.cv-card .cv-img::before { content: ''; position: absolute; inset: 10%; z-index: -1; background: var(--pink); opacity: .55; -webkit-mask: var(--splat1) center / contain no-repeat; mask: var(--splat1) center / contain no-repeat; }
.cv-card:nth-child(3n+2) .cv-img::before { background: var(--cyan); -webkit-mask-image: var(--splat2); mask-image: var(--splat2); }
.cv-card:nth-child(3n) .cv-img::before { background: var(--yellow); }
.cv-card .cv-img img { width: 100%; height: 100%; object-fit: cover; }
.cv-card .cv-img img.fit { object-fit: contain; padding: 4%; }
.cv-card .cv-name { font-size: 28px; padding: 12px 8px 2px; color: #fff; }
.cv-card .cv-sub { font-family: var(--read); font-weight: 700; font-size: 14px; color: var(--mute); padding: 0 12px 16px; text-align: center; min-height: 38px; }
.cv-card.lock .cv-img { filter: grayscale(.75) brightness(.7); }
.cv-card .cv-lock { position: absolute; top: 14px; right: 14px; padding: 5px 12px 3px; border-radius: 10px; background: rgba(6,9,32,.8); color: #fff; font-size: 16px; }
.cv-card .cv-tag { position: absolute; top: 14px; left: 14px; padding: 5px 12px 3px; border-radius: 10px; background: var(--neon); color: #052a35; font-size: 16px; box-shadow: 0 0 0 2px #fff; }
.cv-arrow { position: absolute; top: 50%; z-index: 30; width: 70px; height: 70px; margin-top: -35px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--neon); box-shadow: 0 0 0 4px #fff, 0 7px 0 4px var(--shadow), 0 0 22px rgba(54,241,255,.5); display: flex; align-items: center; justify-content: center; transition: transform .12s, box-shadow .12s; }
.cv-arrow::before { content: ''; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.cv-arrow.l { left: 4vw; } .cv-arrow.l::before { border-right: 22px solid var(--bg1); margin-right: 5px; }
.cv-arrow.r { right: 4vw; } .cv-arrow.r::before { border-left: 22px solid var(--bg1); margin-left: 5px; }
.cv-arrow:active { transform: translateY(5px); box-shadow: 0 0 0 4px #fff, 0 2px 0 4px var(--shadow); }
.pick-info { min-height: 60px; text-align: center; font-family: var(--read); font-weight: 700; font-size: 19px; color: var(--txt); margin: 6px 0 12px; background: var(--panel); padding: 10px 24px; border-radius: 14px; max-width: 760px; box-shadow: 0 0 0 2px var(--line); }
.pick-info b { font-family: var(--ui); font-weight: normal; color: var(--neon); }
.pick-info small { color: var(--mute); }
.pick-actions { display: flex; gap: 18px; align-items: center; }
.seg { display: inline-flex; background: var(--bg1); border-radius: 14px; padding: 4px; gap: 4px; box-shadow: 0 0 0 2px var(--line); }
.seg button { border: 0; background: transparent; padding: 8px 14px 7px; border-radius: 10px; font-size: 17px; cursor: pointer; color: var(--mute); }
.seg button.on { background: var(--neon); color: #052a35; box-shadow: 0 0 12px rgba(54,241,255,.5); }
.seg .lab { padding: 8px 6px 8px 10px; font-size: 15px; color: var(--mute); align-self: center; }

/* ---- 상점 ---- */
.tabs { display: flex; gap: 12px; margin-bottom: 6px; }
.tabs button { border: 0; padding: 10px 22px 8px; border-radius: 14px; background: var(--panel); color: var(--mute); font-size: 20px; cursor: pointer; box-shadow: 0 0 0 2px var(--line), 0 5px 0 2px var(--shadow); }
.tabs button.on { background: var(--yellow); color: #4a3000; box-shadow: 0 0 0 3px #fff, 0 5px 0 3px var(--shadow); }
#scr-shop .cover { height: 46vh; }
.shop-panel { display: flex; gap: 16px; align-items: center; background: var(--panel); padding: 12px 22px; border-radius: 16px; font-size: 20px; min-height: 70px; box-shadow: 0 0 0 2px var(--line); }
.shop-panel b { font-weight: normal; color: var(--neon); }

/* ---- 공통 패널 ---- */
.settings, .rec-left, .rec-right, .card-box, .room-left, .slots, .room-ctrl, .res-reward, .res-notes {
  background: rgba(27,35,87,.94); box-shadow: 0 0 0 3px var(--line), 0 10px 0 3px var(--shadow); color: var(--txt); }

/* ---- 설정 ---- */
.settings { width: min(760px, 92vw); border-radius: 22px; padding: 22px 30px; display: flex; flex-direction: column; gap: 12px; max-height: 80vh; overflow: auto; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 21px; }
.set-row.btns { justify-content: center; margin-top: 8px; gap: 20px; }
.set-row input[type=range] { width: 50%; accent-color: var(--neon); height: 30px; }
.set-row input[type=text] { font-family: var(--read); font-weight: 800; font-size: 20px; padding: 8px 14px; border-radius: 12px; border: 3px solid var(--line2); background: var(--bg1); color: #fff; width: 220px; outline: none; }
.help { font-family: var(--read); font-weight: 700; font-size: 14px; color: var(--mute); line-height: 1.55; text-align: center; }
.help b { font-family: var(--ui); font-weight: normal; color: var(--neon); }

/* ---- 공부 기록 ---- */
.record { display: flex; gap: 22px; width: min(1100px, 94vw); height: 72vh; }
.rec-left { width: 38%; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; overflow: auto; }
.rec-right { flex: 1; border-radius: 22px; padding: 18px 22px; display: flex; flex-direction: column; overflow: hidden; }
.rec-right h3 { margin: 0; font-weight: normal; font-size: 26px; } .rec-tip { margin: 4px 0 10px; font-family: var(--read); font-weight: 700; color: var(--mute); font-size: 14px; }
.rec-ring { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--num); font-size: 34px; color: var(--ink); }
.rec-table { width: 100%; font-family: var(--read); font-weight: 700; font-size: 16px; } .rec-table div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; } .rec-table div:nth-child(odd) { background: rgba(255,255,255,.06); }
.rec-notes { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 6px; }
.note { background: var(--bg1); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: inset 4px 0 0 var(--pink); }
.note .nq { flex: 1; font-family: var(--read); font-weight: 700; font-size: 17px; } .note .na { color: var(--green); font-size: 15px; margin-top: 2px; }
.note .nw { font-family: var(--read); font-weight: 700; font-size: 13px; color: var(--pink); white-space: nowrap; }
.empty { text-align: center; font-family: var(--read); font-weight: 700; color: var(--mute); font-size: 17px; margin-top: 30px; }

/* ---- 로비 ---- */
.lobby { display: flex; gap: 26px; width: min(1000px, 94vw); }
.card-box { flex: 1; border-radius: 22px; padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.card-box h3 { margin: 0; font-weight: normal; font-size: 30px; } .card-box p { margin: 0; font-family: var(--read); font-weight: 700; color: var(--mute); font-size: 15px; line-height: 1.55; }
#joinCode { font-family: var(--num); font-size: 44px; letter-spacing: 10px; text-align: center; width: 270px; padding: 8px; border-radius: 14px; border: 4px solid var(--line2); background: var(--bg1); color: var(--neon); text-transform: uppercase; outline: none; }
#joinCode::placeholder { color: #3b4785; }
.lobby.room { align-items: stretch; }
.room-left { width: 300px; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.room-code { font-size: 20px; } .room-code b { display: block; font-family: var(--num); font-size: 52px; letter-spacing: 6px; color: var(--neon); font-weight: normal; text-shadow: 0 0 16px rgba(54,241,255,.5); }
#roomQr canvas, #roomQr img { width: 170px !important; height: 170px !important; border-radius: 12px; }
.room-subj { font-family: var(--read); font-weight: 700; font-size: 15px; color: var(--mute); text-align: center; } .room-subj b { color: #fff; }
.room-right { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border-radius: 22px; padding: 14px; }
.slot { aspect-ratio: 1; border-radius: 14px; background: var(--bg1); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; gap: 2px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 2px var(--line); }
.slot img { width: 72%; } .slot.host::after { content: '방장'; position: absolute; top: 6px; left: 6px; font-size: 12px; color: var(--ink); background: var(--yellow); padding: 2px 7px; border-radius: 6px; }
.slot.empty { color: #5562a8; } .slot.off { opacity: .45; }
.room-ctrl { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; border-radius: 22px; padding: 16px; }
.chk { font-size: 18px; display: flex; gap: 6px; align-items: center; } .chk input { width: 22px; height: 22px; accent-color: var(--neon); }
.wait { font-family: var(--read); font-weight: 700; font-size: 17px; color: var(--mute); }
body:not(.host) .hostonly { display: none !important; } body.host .guestonly { display: none !important; }

/* ---- 별판 / 결과 ---- */
#scr-board, #scr-result { background: radial-gradient(80% 60% at 50% 0%, rgba(80,100,220,.3), transparent 70%); }
.board { width: min(980px, 94vw); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: 9px 16px; }
.brow { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 14px; padding: 6px 16px; font-size: 20px; box-shadow: 0 0 0 2px var(--line), 0 5px 0 2px var(--shadow); animation: rowIn .5s cubic-bezier(.2,1.3,.4,1) backwards; transition: transform .5s; }
.brow.me { background: var(--panel2); box-shadow: 0 0 0 3px var(--neon), 0 5px 0 3px var(--shadow), 0 0 18px rgba(54,241,255,.35); }
.brow .rk { width: 40px; font-family: var(--num); font-size: 26px; color: var(--neon); text-align: center; }
.brow img, .brow .av { width: 44px; height: 44px; border-radius: 50%; background: var(--bg1); object-fit: cover; box-shadow: 0 0 0 2px var(--line2); }
.brow .nm { flex: 1; } .brow .gain { color: var(--green); font-family: var(--num); font-size: 20px; min-width: 50px; text-align: right; }
.brow .st { font-family: var(--num); font-size: 26px; color: var(--yellow); min-width: 70px; text-align: right; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-40px); } }
.board-next { margin: 16px 0; font-size: 22px; color: #fff; text-shadow: 0 3px 0 var(--shadow); }
.res-top { margin-top: -20px; }
.res-body { display: flex; gap: 22px; width: min(1150px, 96vw); height: 62vh; }
.res-left { flex: 1.1; position: relative; } .res-right { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.res-list { display: flex; flex-direction: column; gap: 7px; height: 100%; overflow: auto; padding: 4px; }
.res-reward { border-radius: 18px; padding: 14px 18px; font-size: 19px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.res-reward b { font-family: var(--num); font-weight: normal; color: var(--yellow); font-size: 26px; }
.res-notes { flex: 1; border-radius: 18px; padding: 14px 18px; overflow: auto; }
.res-notes h3 { margin: 0 0 8px; font-weight: normal; font-size: 22px; }
.res-btns { margin-top: 18px; gap: 24px; }
.rn { padding: 8px 12px; border-radius: 12px; background: var(--bg1); margin-bottom: 8px; font-family: var(--read); font-weight: 700; font-size: 16px; box-shadow: inset 4px 0 0 var(--pink); }
.rn .ra { color: var(--green); } .rn .rp { color: var(--pink); text-decoration: line-through; margin-left: 6px; }
.rn em { display: block; font-style: normal; color: var(--mute); font-size: 14px; margin-top: 2px; }

/* ---- 경기 HUD ---- */
#hud { position: absolute; inset: 0; display: none; pointer-events: none; }
#hud.on { display: block; }
.hud-tl { position: absolute; top: 12px; left: 14px; display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.hbtn { width: 54px; height: 54px; border: 0; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 3px #fff, 0 6px 0 3px var(--shadow); font-size: 22px; cursor: pointer; color: var(--neon); }
.hbtn:active { transform: translateY(4px); box-shadow: 0 0 0 3px #fff, 0 2px 0 3px var(--shadow); }
.hud-round { background: rgba(20,26,68,.9); color: #fff; padding: 7px 14px 5px; border-radius: 12px; font-size: 18px; box-shadow: 0 0 0 2px var(--line2); }
.hud-round span { margin-right: 6px; }
.hud-prog:empty, .hud-place:empty { display: none; }
.hud-prog { background: var(--neon); color: #052a35; padding: 7px 12px 5px; border-radius: 12px; font-size: 17px; box-shadow: 0 0 0 2px #fff; }
.hud-tr { position: absolute; top: 12px; right: 84px; display: flex; gap: 10px; align-items: center; }
.hud-stars { background: rgba(20,26,68,.92); color: var(--yellow); padding: 6px 18px 4px; border-radius: 14px; font-family: var(--num); font-size: 30px; box-shadow: 0 0 0 3px var(--yellow), 0 5px 0 3px var(--shadow); }
.hud-stars b { font-weight: normal; color: #fff; }
.hud-stars.bump { animation: bump .45s; }
.hud-place { background: var(--pink); color: #fff; padding: 6px 16px 4px; border-radius: 14px; font-family: var(--num); font-size: 26px; box-shadow: 0 0 0 3px #fff, 0 5px 0 3px var(--shadow); }

/* 문제 카드: 남색 작전 화면 */
.hq { position: absolute; top: 12px; left: 50%; width: min(720px, 56vw); transform: translate(-50%, -140%); background: rgba(18,24,64,.95); border-radius: 18px; padding: 14px 18px 14px;
  box-shadow: 0 0 0 3px var(--neon), 0 8px 0 3px var(--shadow), 0 0 30px rgba(54,241,255,.25); transition: transform .45s cubic-bezier(.2,1.3,.4,1); }
.hq.on { transform: translate(-50%, 0); }
.hq .qlabel { position: absolute; top: -13px; left: 22px; background: var(--yellow); color: var(--ink); font-size: 15px; padding: 3px 12px 1px; transform: rotate(-3deg); box-shadow: 0 0 0 2px #fff; clip-path: polygon(3% 0, 100% 5%, 97% 100%, 0 94%); }
.hq.again .qlabel { background: var(--orange); }
.qtext { font-family: var(--read); font-weight: 800; font-size: 26px; line-height: 1.32; text-align: center; padding: 6px 6px 12px; color: #fff; word-break: keep-all; }
.qchoices { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 10px; }
.hq[data-n="3"] .qchoices { --n: 3; } .hq[data-n="2"] .qchoices { --n: 2; }
.qc { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 6px 8px; border-radius: 12px 16px 12px 18px; color: #fff; font-family: var(--read); font-weight: 800; font-size: 19px; line-height: 1.15; text-align: center; word-break: keep-all; transition: transform .2s, box-shadow .2s, opacity .3s; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.qc i { font-style: normal; font-size: 15px; opacity: .95; flex: none; }
.qc.c0 { background: var(--a0); } .qc.c1 { background: var(--a1); } .qc.c2 { background: var(--a2); color: #4a2e00; } .qc.c3 { background: var(--a3); }
.qc.no { opacity: .4; text-decoration: line-through; }
.qc.answer { transform: scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--neon), 0 0 20px rgba(54,241,255,.6); animation: wiggle .5s; }
@keyframes wiggle { 30% { transform: scale(1.12) rotate(-3deg); } 60% { transform: scale(1.04) rotate(2deg); } }
.qtimer { margin-top: 12px; height: 10px; border-radius: 6px; background: var(--bg0); overflow: hidden; visibility: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.qtimer i { display: block; height: 100%; background: linear-gradient(90deg, var(--neon), var(--green)); transform-origin: left; border-radius: 6px; transition: transform .1s linear; box-shadow: 0 0 10px rgba(54,241,255,.7); }
.qtimer i.hurry { background: linear-gradient(90deg, var(--pink), var(--orange)); box-shadow: 0 0 10px rgba(255,79,154,.7); }
.qsec { position: absolute; right: -16px; top: -16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-family: var(--num); font-size: 26px; color: var(--ink); isolation: isolate; }
.qsec::before { content: ''; position: absolute; inset: -4px; z-index: -1; background: var(--yellow); -webkit-mask: var(--splat2) center / contain no-repeat; mask: var(--splat2) center / contain no-repeat; }
.qsec:empty { display: none; }
.reveal { position: absolute; top: 0; left: 50%; transform: translate(-50%, -150%); max-width: 70vw; background: rgba(18,24,64,.96); color: #fff; border-radius: 16px; padding: 10px 20px 10px; font-size: 21px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; box-shadow: 0 0 0 3px var(--line2), 0 6px 0 3px var(--shadow); transition: transform .4s cubic-bezier(.2,1.3,.4,1); }
.reveal.on { transform: translate(-50%, 0); top: var(--revealTop, 190px); }
.reveal.good { box-shadow: 0 0 0 3px var(--green), 0 6px 0 3px var(--shadow); } .reveal.bad { box-shadow: 0 0 0 3px var(--pink), 0 6px 0 3px var(--shadow); }
.reveal.good b { color: var(--green); } .reveal.bad b { color: var(--pink); } .reveal b { font-weight: normal; font-size: 24px; }
.reveal .ans { padding: 4px 12px 3px; border-radius: 10px; color: #fff; font-family: var(--read); font-weight: 800; } .reveal .ans i { font-style: normal; margin-right: 4px; font-size: 14px; }
.reveal .ans.c0 { background: var(--a0); } .reveal .ans.c1 { background: var(--a1); } .reveal .ans.c2 { background: var(--a2); color: #4a2e00; } .reveal .ans.c3 { background: var(--a3); }
.reveal em { font-family: var(--read); font-weight: 700; font-style: normal; font-size: 16px; color: var(--mute); width: 100%; text-align: center; }

/* 라운드 소개 카드 */
.round-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.3) rotate(-6deg); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.2,1.5,.4,1), opacity .3s; }
.round-card.on { transform: translate(-50%, -50%) scale(1) rotate(-1deg); opacity: 1; }
.rc-in { position: relative; background: rgba(18,24,64,.96); border-radius: 26px; padding: 22px 50px 26px; text-align: center; box-shadow: 0 0 0 4px #fff, 0 0 0 9px var(--pink), 0 16px 0 9px var(--shadow); min-width: 480px; isolation: isolate; }
.rc-in::before { content: ''; position: absolute; left: -60px; top: -70px; width: 190px; height: 190px; z-index: -1; background: var(--pink); -webkit-mask: var(--splat1) center / contain no-repeat; mask: var(--splat1) center / contain no-repeat; }
.rc-in::after { content: ''; position: absolute; right: -50px; bottom: -50px; width: 130px; height: 130px; z-index: -1; background: var(--cyan); -webkit-mask: var(--splat2) center / contain no-repeat; mask: var(--splat2) center / contain no-repeat; }
.rc-icon { font-size: 64px; animation: hop 1.6s infinite; } .rc-num { display: inline-block; font-size: 17px; color: var(--ink); background: var(--yellow); padding: 3px 14px 1px; transform: rotate(-3deg); clip-path: polygon(3% 0, 100% 6%, 97% 100%, 0 92%); }
.rc-in h2 { margin: 8px 0 8px; font-weight: normal; font-size: 46px; color: #fff; text-shadow: 0 4px 0 var(--pink-d); }
.rc-in p { margin: 0 0 6px; font-family: var(--read); font-weight: 800; font-size: 21px; } .rc-in small { font-family: var(--read); font-weight: 700; font-size: 16px; color: var(--mute); }
.count { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(.2); opacity: 0; font-family: var(--num); font-size: 180px; color: var(--yellow); -webkit-text-stroke: 16px var(--bg1); paint-order: stroke fill; pointer-events: none; }
.count.on { animation: countIn .8s cubic-bezier(.2,1.5,.4,1) forwards; }
.count.go { font-size: 140px; color: var(--neon); -webkit-text-stroke: 16px var(--bg1); }
@keyframes countIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-12deg); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(3deg); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
.banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.4); opacity: 0; font-size: 64px; color: #fff; -webkit-text-stroke: 12px var(--bg1); paint-order: stroke fill; pointer-events: none; white-space: nowrap; transition: transform .45s cubic-bezier(.2,1.6,.4,1), opacity .25s; }
.banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner.end { font-size: 96px; color: var(--yellow); -webkit-text-stroke: 14px var(--bg1); }
.banner.go { color: var(--neon); }
.banner.big b { font-family: var(--num); font-weight: normal; color: var(--yellow); }
.banner.good { color: var(--green); } .banner.bad { color: var(--pink); font-size: 54px; }
.toast { position: absolute; left: 50%; bottom: 22%; transform: translate(-50%, 20px); opacity: 0; background: rgba(11,15,43,.9); color: #fff; padding: 10px 22px 8px; border-radius: 14px; font-size: 20px; transition: .3s; pointer-events: none; box-shadow: 0 0 0 2px var(--line2); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.hint { position: absolute; left: 50%; bottom: 7%; transform: translate(-50%, 20px); opacity: 0; background: rgba(18,24,64,.94); color: #fff; padding: 10px 22px 9px; border-radius: 14px; font-family: var(--read); font-weight: 800; font-size: 18px; transition: .35s; pointer-events: none; box-shadow: 0 0 0 2px var(--neon), 0 5px 0 2px var(--shadow); white-space: nowrap; }
.hint b { color: var(--neon); font-weight: 900; }
.hint.on { opacity: 1; transform: translate(-50%, 0); }
#hudPops { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pop { position: absolute; transform: translate(-50%, -50%); font-size: 30px; color: #fff; -webkit-text-stroke: 7px var(--bg1); paint-order: stroke fill; animation: popUp 1.2s ease-out forwards; white-space: nowrap; }
.pop.star { font-family: var(--num); color: var(--yellow); font-size: 38px; }
.pop.bad { color: var(--pink); } .pop.good { color: var(--green); }
@keyframes popUp { 0% { transform: translate(-50%, -30%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -60%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -190%) scale(1); opacity: 0; } }

/* 먹물 */
#inkLayer { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
#inkLayer.on { opacity: 1; }
#inkLayer i { position: absolute; background: #1a1240; -webkit-mask: var(--splat1) center / contain no-repeat; mask: var(--splat1) center / contain no-repeat; }
#inkLayer i:nth-child(1) { width: 50vw; height: 50vw; left: 4vw; top: 14vh; } #inkLayer i:nth-child(2) { width: 38vw; height: 38vw; right: 8vw; top: 2vh; -webkit-mask-image: var(--splat2); mask-image: var(--splat2); } #inkLayer i:nth-child(3) { width: 32vw; height: 32vw; left: 40vw; top: 44vh; }

/* 터치 조작 */
#touch { display: none; }
body.touch #touch { display: block; }
#joyZone { position: absolute; left: 0; bottom: 0; width: 46vw; height: 62vh; pointer-events: auto; touch-action: none; }
#joyBase { position: absolute; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; background: rgba(11,15,43,.35); border: 4px solid rgba(54,241,255,.8); left: 140px; top: calc(100% - 150px); opacity: .6; transition: opacity .15s; box-shadow: 0 0 16px rgba(54,241,255,.4); }
#joyBase.on { opacity: 1; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #fff, var(--neon)); box-shadow: 0 0 0 3px #fff, 0 5px 0 3px var(--shadow); }
.joy-tip { position: absolute; left: 70px; bottom: 26px; font-family: var(--read); font-weight: 800; font-size: 13px; color: rgba(255,255,255,.95); text-shadow: 0 1px 3px rgba(6,9,32,.8); }
.tbtn { position: absolute; border: 0; border-radius: 50%; pointer-events: auto; touch-action: none; color: #fff; font-family: var(--ui); text-shadow: 0 2px 0 rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s; }
.tbtn.jump { right: 34px; bottom: 34px; width: 132px; height: 132px; font-size: 28px; background: radial-gradient(circle at 40% 30%, #ff9cc6, var(--pink) 62%); box-shadow: 0 0 0 4px #fff, 0 9px 0 4px var(--shadow); }
.tbtn.dive { right: 186px; bottom: 30px; width: 96px; height: 96px; font-size: 20px; color: #06304a; text-shadow: none; background: radial-gradient(circle at 40% 30%, #b8f4ff, var(--cyan) 62%); box-shadow: 0 0 0 4px #fff, 0 8px 0 4px var(--shadow); }
.tbtn.down { transform: translateY(6px); box-shadow: 0 0 0 4px #fff, 0 2px 0 4px var(--shadow); }

/* 모달 */
.modal { position: absolute; inset: 0; background: rgba(6,9,32,.62); display: flex; align-items: center; justify-content: center; pointer-events: auto; z-index: 50; animation: fadeIn .2s; }
.modal[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-box { position: relative; background: var(--panel); color: var(--txt); border-radius: 24px; padding: 28px 40px 30px; display: flex; flex-direction: column; align-items: center; gap: 18px; box-shadow: 0 0 0 4px #fff, 0 12px 0 4px var(--shadow); animation: pop .4s cubic-bezier(.2,1.5,.4,1); max-width: 92vw; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.modal-box h2 { margin: 0; font-weight: normal; font-size: 32px; }
.quiz-box { width: min(760px, 92vw); }
.quiz-tag { background: var(--yellow); color: var(--ink); padding: 4px 16px 2px; font-size: 17px; transform: rotate(-2deg); clip-path: polygon(3% 0, 100% 6%, 97% 100%, 0 92%); }
.quiz-box h2 { font-family: var(--read); font-weight: 800; font-size: 28px; text-align: center; line-height: 1.38; word-break: keep-all; }
.quiz-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; }
.quiz-choices.n3 { grid-template-columns: repeat(3, 1fr); }
.quiz-choices.n3 .qbtn { aspect-ratio: 1 / .9; flex-direction: column; font-size: 24px; }
.qbtn { --c: var(--a0); --d: var(--a0d); position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 16px 22px 16px 24px; padding: 16px 12px; font-family: var(--read); font-weight: 800; font-size: 22px; color: #fff; cursor: pointer;
  background: var(--c); box-shadow: 0 0 0 3px #fff, 0 7px 0 3px var(--shadow); transition: transform .12s, box-shadow .12s; word-break: keep-all; overflow: hidden; }
.qbtn i { font-style: normal; font-size: 17px; opacity: .95; }
.qbtn:active { transform: translateY(5px); box-shadow: 0 0 0 3px #fff, 0 2px 0 3px var(--shadow); }
.qbtn.c1 { --c: var(--a1); --d: var(--a1d); } .qbtn.c2 { --c: var(--a2); --d: var(--a2d); color: #4a2e00; } .qbtn.c3 { --c: var(--a3); --d: var(--a3d); }
.qbtn.right { box-shadow: 0 0 0 4px #fff, 0 0 0 9px var(--neon), 0 0 22px rgba(54,241,255,.6); animation: wiggle .5s; }
.qbtn.wrongpick { filter: grayscale(.7) brightness(.8); }
.qbtn .wrap { position: absolute; inset: -6px; border-radius: 20px; border: 5px solid #fff; animation: wrapIn .45s ease-out forwards; pointer-events: none; }
@keyframes wrapIn { from { transform: scale(1.25); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.quiz-exp { min-height: 26px; font-family: var(--read); font-weight: 700; font-size: 18px; color: var(--mute); text-align: center; }

#toast { position: absolute; left: 50%; bottom: 8%; transform: translate(-50%, 30px); opacity: 0; background: rgba(11,15,43,.94); color: #fff; padding: 12px 24px 10px; border-radius: 14px; font-size: 20px; transition: .3s; pointer-events: none; z-index: 60; box-shadow: 0 0 0 2px var(--neon); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

#fsBtn { position: fixed; top: 12px; right: 14px; z-index: 80; width: 54px; height: 54px; border: 0; border-radius: 14px; font-size: 26px; cursor: pointer; color: var(--neon); background: var(--panel); box-shadow: 0 0 0 3px #fff, 0 6px 0 3px var(--shadow); }
#fsBtn:active { transform: translateY(4px); box-shadow: 0 0 0 3px #fff, 0 2px 0 3px var(--shadow); }
#rotate { position: fixed; inset: 0; z-index: 99; display: none; align-items: center; justify-content: center; background: var(--bg1); color: #fff; font-size: 28px; text-align: center; padding: 20px; }
@media (orientation: portrait) and (max-width: 900px) { body.touch #rotate { display: flex; } }

/* 화면 전환: 물감 세 방울이 확 퍼져 화면을 덮었다가 걷힌다 */
#wipe { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
#wipe i { position: absolute; left: 50%; top: 50%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; transform: scale(0); -webkit-mask: var(--splat1) center / contain no-repeat; mask: var(--splat1) center / contain no-repeat; }
#wipe i:nth-child(1) { background: var(--pink); } #wipe i:nth-child(2) { background: var(--cyan); -webkit-mask-image: var(--splat2); mask-image: var(--splat2); } #wipe i:nth-child(3) { background: var(--bg1); }
#wipe.go i { animation: wipe .95s cubic-bezier(.6,0,.3,1) forwards; }
#wipe.go i:nth-child(2) { animation-delay: .06s; } #wipe.go i:nth-child(3) { animation-delay: .12s; }
@keyframes wipe { 0% { transform: scale(0) rotate(-30deg); opacity: 1; } 42% { transform: scale(1) rotate(0); opacity: 1; } 62% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(1.15) rotate(10deg); opacity: 0; } }

/* 작은 화면 (태블릿 세로 짧은 쪽 등) */
@media (max-height: 700px) {
  .head { font-size: 36px; margin-bottom: 12px; } .steps { margin: 4px 0 18px; }
  .logo .l2 b { font-size: 84px; } .logo .l1 { font-size: 38px; } .btn.big { font-size: 24px; padding: 12px 30px; }
  .qtext { font-size: 22px; } .qc { font-size: 17px; min-height: 40px; }
  .tbtn.jump { width: 112px; height: 112px; } .tbtn.dive { width: 84px; height: 84px; right: 160px; }
}
@media (max-width: 900px) { .menu-grid { gap: 16px; } .tile { grid-template-columns: 40% 1fr; } .hq { width: 64vw; } .badges.g5 { grid-template-columns: repeat(3, 1fr); } .hero { flex-basis: 30%; } }

/* 로비 다듬기 */
.lobby[hidden] { display: none !important; }
.lobby.room { width: min(1120px, 95vw); max-height: 80vh; }
/* 라운드가 9가지가 되어(2026-11-05) 고르기 단추가 두 줄 → 자리 칸을 납작하게 해서 "모두 출발!"이 화면 안에 들어오게 */
.slots { align-items: center; }
.slot { aspect-ratio: 2 / 1; min-height: 0; } .slot img { width: 24%; height: auto; }
.room-right { gap: 12px; min-height: 0; overflow-y: auto; }
.room-ctrl { gap: 10px; padding: 12px; }
.room-ctrl .seg { flex-wrap: wrap; justify-content: center; }
.room-ctrl .seg button { font-size: 15px; padding: 7px 10px 6px; white-space: nowrap; }
@media (max-height: 600px) {
  .room-code b { font-size: 38px; } #roomQr { width: 120px; height: 120px; }
  .slot { aspect-ratio: 2.6 / 1; } .slot img { width: 18%; } .room-ctrl .seg button { font-size: 13px; padding: 5px 8px 4px; }
}
#roomQr { width: 170px; height: 170px; background: #fff; border-radius: 12px; padding: 6px; }
#roomQr svg { width: 100%; height: 100%; }
#scr-shop .cover { height: 50vh; margin: 8px 0; }
#scr-shop .cv-card { width: min(250px, 23vw); }
#scr-pick .cover { margin-top: 10px; }
/* 시상대 */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 6px 0 4px; flex: none; }
.pd { display: flex; flex-direction: column; align-items: center; width: 30%; animation: tileIn .6s cubic-bezier(.2,1.4,.4,1) backwards; }
.pd img { width: 78%; margin-bottom: -10px; position: relative; z-index: 1; filter: drop-shadow(0 6px 6px rgba(6,9,32,.5)); }
.pd b { font-weight: normal; font-size: 17px; background: var(--panel2); padding: 3px 10px 1px; border-radius: 8px; position: relative; z-index: 2; margin-bottom: 6px; box-shadow: 0 0 0 2px var(--line2); }
.pd .step { width: 100%; border-radius: 12px 12px 4px 4px; font-family: var(--num); font-size: 34px; color: var(--ink); text-align: center; box-shadow: 0 0 0 3px #fff, 0 6px 0 3px var(--shadow); }
.pd.p1 .step { height: 74px; background: var(--yellow); } .pd.p2 .step { height: 54px; background: #cfd6f0; } .pd.p3 .step { height: 40px; background: var(--orange); }
.pd.p1 { animation-delay: .25s; } .pd.p3 { animation-delay: .12s; }
.pd.me b { background: var(--neon); color: #052a35; }
/* 왼쪽 위: 멈춤 단추 아래로 라운드 이름·진행을 세로로 (가운데 문제 카드와 겹치지 않게) */
.hud-tl { flex-direction: column; align-items: flex-start; gap: 8px; }
.hud-round, .hud-prog { font-size: 16px; padding: 6px 12px 4px; max-width: calc(50vw - min(360px, 28vw) - 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.touch .hint { bottom: 26%; }

/* Cloudflare판: 30명까지(2026-11-05). 12명이 넘으면 자리 칸을 6줄로 작게 */
.slots.many { grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px; }
.slots.many .slot { aspect-ratio: 1.6 / 1; font-size: 12px; border-radius: 10px; }
.slots.many .slot img { width: 34%; }
.slots.many .slot.host::after { font-size: 10px; padding: 1px 5px; top: 3px; left: 3px; }

/* 긴 안내(연결 점검 등)는 여러 줄로 */
#toast { max-width: min(860px, 88vw); text-align: center; line-height: 1.4; }