/* 서바이벌 OX(ox-survival.js, 2026-10-22): 큐플레이 서바이벌 OX 배치 — 위 가운데 문제판·집계판, 양옆 O·X 바닥, 가운데 물음표,
   아래 관중석, 맨 아래 넓은 채팅 바. 맵 그림은 원화만(assets/ox-survival). 경기장은 1680×720 논리 좌표를 화면 높이에 맞춰 키운다. */
.ox-room { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; isolation: isolate; background: var(--ox-edge, #2f5e22); }
.ox-room[data-map="factory"] { --ox-edge: #283246; --ox-ink: var(--bu-text); --ox-red: #ff8f6e; --ox-digit: #7fe6ff; }
.ox-room[data-map="forest"], .ox-room:not([data-map]) { --ox-edge: #2f5e22; --ox-ink: #3b2510; --ox-red: #d0281a; --ox-digit: #ffe36e; }
.ox-stage { position: relative; min-height: 0; overflow: hidden; }
.ox-arena { position: absolute; left: 0; top: 0; width: 1680px; height: 720px; transform-origin: 0 0; background: center / 100% 100% no-repeat; outline: none; cursor: pointer; touch-action: none; }
.ox-arena:focus-visible { box-shadow: inset 0 0 0 5px #ffd84a; }
.ox-floor, .ox-covers, .ox-actors { position: absolute; inset: 0; pointer-events: none; }
.ox-floor { z-index: 1; } .ox-actors { z-index: 3; } .ox-covers { z-index: 4; }
.ox-pit, .ox-cover { position: absolute; display: block; background-repeat: no-repeat; }

/* 틀린 쪽 덮개(2026-10-22 사용자 "위에서 쿵 떨어지는 뚜껑"): 숲은 나무 뚜껑이 구덩이 바로 위에서 처음부터 불투명하게
   점점 빨리 떨어져(0.27초 = ox-survival.js MAPS.impact) 쿵 닿는 순간 납작하게 눌렸다 살짝 튀어 자리 잡는다. 떨어지는 동안 땅의 그림자가
   커진다. 닿는 순간 경기장이 흔들리고 흙먼지가 터진다(JS). 잠시 뒤 위로 들려 사라진다.
   공장은 발판이 번쩍하며 용암으로 차오르고(0.2초에 가장 밝음) 다음 문제까지 부글거린다. */
.ox-cover { opacity: 0; }
.ox-cover.lid { transform-origin: 50% 85%; }
.ox-arena.cover-o .ox-cover.lid.o, .ox-arena.cover-x .ox-cover.lid.x { animation: ox-slam .62s forwards; }
@keyframes ox-slam {
  0% { opacity: 1; transform: translateY(-300px) scale(1.16); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  44% { opacity: 1; transform: translateY(0) scale(1.12, .8); animation-timing-function: steps(1, end); }
  56% { opacity: 1; transform: translateY(-16px) scale(.96, 1.06); animation-timing-function: steps(1, end); }
  70% { opacity: 1; transform: translateY(0) scale(1.05, .94); animation-timing-function: steps(1, end); }
  84%, 100% { opacity: 1; transform: none; }
}
.ox-arena.lift.cover-o .ox-cover.lid.o, .ox-arena.lift.cover-x .ox-cover.lid.x { animation: ox-lift .45s ease-in forwards; }
@keyframes ox-lift { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-80px) scale(1.06); } }
/* 떨어지는 뚜껑의 땅 그림자: 구덩이 위에서 작게 시작해 뚜껑이 닿을 때 가장 크다(닿은 뒤에는 뚜껑에 가려짐) */
.ox-cover-shadow { position: absolute; border-radius: 50%; background: #2a1a0a; opacity: 0; pointer-events: none; }
.ox-arena.cover-o .ox-cover-shadow.o, .ox-arena.cover-x .ox-cover-shadow.x { animation: ox-cover-shadow .62s forwards; }
@keyframes ox-cover-shadow { 0% { opacity: .15; transform: scale(.3); animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 44% { opacity: .55; transform: scale(1.04); } 100% { opacity: .55; transform: scale(1); } }
.ox-arena.lift .ox-cover-shadow { opacity: 0 !important; animation: none; }
.ox-arena.cover-o .ox-cover.lava.o, .ox-arena.cover-x .ox-cover.lava.x { animation: ox-lava-in .5s forwards, ox-lava 1.4s steps(3, end) .5s infinite; }
@keyframes ox-lava-in {
  0% { opacity: 0; transform: scale(.55); filter: brightness(2.2); animation-timing-function: steps(1, end); }
  20% { opacity: 1; transform: scale(.82); filter: brightness(2); animation-timing-function: steps(1, end); }
  40% { opacity: 1; transform: scale(1.1); filter: brightness(1.7); animation-timing-function: steps(1, end); }
  60% { opacity: 1; transform: scale(.96); filter: brightness(1.3); animation-timing-function: steps(1, end); }
  80%, 100% { opacity: 1; transform: none; filter: brightness(1); }
}
@keyframes ox-lava { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.14); } }
/* 쿵: 경기장 흔들림(닿는 순간, 도트 느낌으로 몇 장만) */
.ox-stage.shake { animation: ox-shake .36s steps(1, end); }
.ox-stage.shake.soft { animation-name: ox-shake-soft; }
@keyframes ox-shake { 0% { transform: translate(0, 9px); } 15% { transform: translate(-8px, -5px); } 30% { transform: translate(7px, 4px); } 45% { transform: translate(-5px, -2px); } 60% { transform: translate(3px, 2px); } 75% { transform: translate(-1px, 0); } 100% { transform: none; } }
@keyframes ox-shake-soft { 0% { transform: translate(0, 4px); } 25% { transform: translate(-4px, -2px); } 50% { transform: translate(3px, 1px); } 75% { transform: translate(-1px, 0); } 100% { transform: none; } }

/* 문제판(원화) 위 문제 글과 집계판 숫자. 자리는 tools/ox/receive-ox.cjs가 잰 칸(%). */
.ox-board { position: absolute; z-index: 2; background: center / 100% 100% no-repeat; pointer-events: none; }
.ox-paper { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 6px 18px; box-sizing: border-box; overflow: hidden; text-align: center; pointer-events: auto; color: var(--ox-ink); }
.ox-paper.qq-has-img { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; }
.ox-qtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ox-line { margin: 0; font: 800 22px/1.3 "NanumSquareRound", sans-serif; overflow-wrap: anywhere; }
.ox-line.q { font-size: 26px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ox-line.big { font-size: 28px; }
.ox-line.red { color: var(--ox-red); }
.ox-line.kicker { font-size: 18px; } .ox-line.kicker span { opacity: .7; margin-left: 6px; }
.ox-line.soft { opacity: .72; }
.ox-paper .btn { margin-top: 4px; padding: 8px 34px; font-size: 22px; }
.ox-count { position: absolute; display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.ox-count b { font: 700 42px/1 "QuizLatin", sans-serif; letter-spacing: .06em; color: var(--ox-digit); text-shadow: 0 0 8px currentColor; }
.ox-count i { font: 700 20px "QuizLatin", sans-serif; font-style: normal; color: var(--ox-digit); opacity: .8; }

/* 문제 그림: 문제판 왼쪽 작은 그림 + 돋보기(누르면 크게) */
.qq-ox-img { position: relative; display: block; width: fit-content; max-width: 220px; padding: 3px; border: 2px solid var(--bu-ink); border-radius: 10px; background: #fff; cursor: zoom-in; font: inherit; }
.qq-ox-img:focus-visible { outline: 3px solid var(--bu-focus); outline-offset: 2px; }
.qq-ox-img[hidden] { display: none; }
.qq-ox-img img { display: block; max-width: 210px; max-height: 104px; border-radius: 7px; object-fit: contain; }
.qq-ox-zoomtag { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 9px; background: #081a4fd9; font-size: 12px; }
.qq-ox-zoom { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; align-content: center; gap: 14px; background: #04103acc; cursor: zoom-out; }
.qq-ox-zoom[hidden] { display: none; }
.qq-ox-zoom img { display: block; max-width: min(90%, 1000px); max-height: 72vh; border: 4px solid #fff; border-radius: 12px; background: #fff; object-fit: contain; }

/* 시계(이동 시간)와 HURRY UP!(마지막 3초): 경기장 아래 가운데 */
.ox-clock { position: absolute; left: 840px; top: 540px; z-index: 5; translate: -50% 0; width: 92px; pointer-events: none; }
.ox-clock[hidden] { display: none; }
.ox-clock svg { width: 92px; height: 92px; filter: drop-shadow(0 4px 0 #0006); }
.ox-clock b { position: absolute; left: 0; right: 0; top: 38px; text-align: center; font: 700 28px "QuizLatin", sans-serif; color: #c23e28; }
.ox-room.hurry .ox-clock svg { animation: qq-ring .3s steps(2, end) infinite; }
.ox-hurry { position: absolute; left: 840px; top: 360px; z-index: 6; translate: -50% 0; opacity: 0; pointer-events: none; }
.ox-hurry .qp-candy { font-size: 64px; }
.ox-hurry.on { opacity: 1; animation: qq-pop .6s steps(3, end) infinite; }

/* 슬라임(ox-slime.js): 원화 조각을 겹친 상자, 아래 가운데가 발 자리 */
.qps { position: relative; display: block; }
.qps-sp, .qps-fx { position: absolute; display: block; background-repeat: no-repeat; }
.qps-icon { display: block; max-width: 92%; max-height: 92%; width: auto; height: auto; }
.qps-shadow { position: absolute; left: 14%; right: 14%; bottom: -6%; height: 16%; border-radius: 50%; background: #0000004d; }
.ox-actor { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ox-body { position: absolute; left: 0; bottom: 0; translate: -50% 0; }
.ox-av svg { height: 76px; width: auto; overflow: visible; }
/* 통통통 뛰기(2026-10-22 사용자 "되게 귀엽게 통통통"): 걷는 동안 0.36초에 한 번, 도트처럼 여섯 장 —
   말랑 웅크림 → 쭉 늘어나며 뛰어오름 → 동그랗게 꼭대기 → 늘어나며 내려옴 → 납작 착지(웅크림과 이어져 '통!'이 두 장).
   가는 쪽으로 살짝 기운다(--lean, 왼쪽이면 -1). 몸·장식(.qps-hop)만 뛰고 그림자는 땅에 남아 높이 뜰수록 작아진다.
   친구마다 박자를 엇갈리게(--hop, JS). 가만히 있을 때는 말랑말랑 흔들린다. */
.ox-actor { --lean: 1; } .ox-actor.left { --lean: -1; }
.qps-hop { position: absolute; inset: 0; transform-origin: 50% 100%; }
.ox-actor.walking .qps-hop { animation: ox-hop .36s steps(1, end) var(--hop, 0s) infinite; }
.ox-actor.walking .qps-shadow { animation: ox-hop-shadow .36s steps(1, end) var(--hop, 0s) infinite; }
@keyframes ox-hop {
  0% { transform: translateY(0) scale(1.2, .8); }
  16% { transform: translateY(-7px) rotate(calc(var(--lean) * 5deg)) scale(.84, 1.2); }
  33% { transform: translateY(-16px) rotate(calc(var(--lean) * 4deg)) scale(.96, 1.06); }
  50% { transform: translateY(-19px) rotate(calc(var(--lean) * 2deg)) scale(1.04, .97); }
  67% { transform: translateY(-9px) rotate(calc(var(--lean) * -2deg)) scale(.9, 1.12); }
  84%, 100% { transform: translateY(0) scale(1.24, .76); }
}
@keyframes ox-hop-shadow { 0% { transform: scale(1.18, 1); } 16% { transform: scale(.86); } 33% { transform: scale(.68); } 50% { transform: scale(.62); } 67% { transform: scale(.8); } 84%, 100% { transform: scale(1.22, 1); } }
.ox-actor:not(.walking) .qps-hop { animation: ox-jelly 1.6s steps(1, end) var(--hop, 0s) infinite; }
@keyframes ox-jelly { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.05, .95); } 50% { transform: scale(1, 1); } 75% { transform: scale(.97, 1.03); } }
/* 틀린 쪽에 있다 뚜껑·용암에 깔릴 때: 납작하게 눌리며 사라진다(뚜껑이 닿는 순간 시작) */
.ox-actor.sinking .ox-body { animation: ox-sink .3s steps(3, end) forwards; transform-origin: 50% 100%; }
@keyframes ox-sink { 0% { transform: none; opacity: 1; } 40% { transform: scale(1.3, .4); opacity: 1; } 100% { transform: scale(1.45, .08); opacity: 0; } }
.ox-actor.sinking .ox-name, .ox-actor.sinking .ox-say { opacity: 0; transition: opacity .4s .4s; }
.ox-actor.spectator .qps { filter: saturate(.7); }
.ox-name { position: absolute; left: 0; top: 4px; translate: -50% 0; max-width: 96px; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 9px; background: #0b1f5ecc; font: 800 13px/1.5 "NanumSquareRound", sans-serif; color: #fff; }
.ox-actor.me .ox-name { background: #f08a12; }
.ox-actor.spectator .ox-name { background: #5a6d96cc; }
.ox-actor.me::after { content: ""; position: absolute; left: -8px; top: -88px; width: 16px; height: 13px; background: #ffe36e; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 0 #6b3400); animation: ox-bob 1s steps(2, end) infinite; }
@keyframes ox-bob { 50% { transform: translateY(4px); } }
.ox-actor .ox-say { bottom: 70px; left: 0; }
.ox-fxs { position: absolute; left: 0; top: -31px; width: 0; height: 0; }
.qps-fx-cheer { animation: ox-cheer .5s steps(2, end) infinite; }
@keyframes ox-cheer { 50% { transform: scale(1.12); } }
.qps-fx-revive { animation: ox-spin 1.2s steps(6, end) infinite; }
@keyframes ox-spin { to { transform: rotate(60deg); } }
.ox-fx-at { position: absolute; left: 0; top: 0; z-index: 1000; width: 0; height: 0; pointer-events: none; }
.ox-fx-at .qps-fx { animation: ox-puff .65s steps(4, end) forwards; }
.ox-fx-at.dust .qps-fx { animation-duration: 1.05s; }
@keyframes ox-puff { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }

/* 아래 채팅 바(큐플레이처럼 넓게): 왼쪽 채팅, 오른쪽 살아남은 친구·내 상태·조작 안내 */
.ox-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 10px; padding: 8px 12px 10px; border-top: 3px solid var(--bu-rim2); background: linear-gradient(var(--bu-cobalt), var(--bu-cobalt2)); }
.ox-chat { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ox-chat-log { height: 72px; overflow: auto; padding: 4px 10px; border-radius: 8px; background: var(--bu-well2); box-shadow: var(--bu-well-shadow); font: 700 13px/1.45 "NanumSquareRound", sans-serif; color: var(--bu-text); }
.ox-chat-log p { margin: 0; overflow-wrap: anywhere; }
.ox-chat-log b { margin-right: 4px; color: #9fe0ff; }
.ox-chat-log b::before { content: "["; } .ox-chat-log b::after { content: "]"; }
.ox-chat form { display: flex; align-items: center; gap: 6px; }
.ox-chat-to { flex: none; padding: 4px 10px; border-radius: 10px; background: var(--bu-navy); font: 800 12px "NanumSquareRound", sans-serif; color: var(--bu-sky); }
.ox-chat .inp { flex: 1; min-width: 0; padding: 5px 9px; font-size: 13px; }
.ox-chat .btn { padding: 4px 12px; font-size: 13px; }
.ox-status { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--bu-well); box-shadow: inset 0 1px 3px #0008; color: var(--bu-text); font: 800 14px "NanumSquareRound", sans-serif; }
.ox-status p { margin: 0; }
.ox-alive b { color: #ff9a9a; } .ox-alive em { font-style: normal; color: var(--bu-gold); }
.ox-me { color: #bfeaff; }
.ox-keys { color: #c9d6ff; font-size: 12px; }
.ox-exit { display: flex; gap: 6px; }
.ox-exit .btn { flex: 1; padding: 3px 10px; font-size: 13px; }
.ox-room .qq-splash { z-index: 40; }

/* 방 만들기 창의 OX 맵 고르기 */
.qq-ox-maps { display: flex; gap: 10px; margin: 0; padding: 0; border: 0; }
.qq-ox-maps legend { margin-bottom: 4px; font-weight: 800; }
.qq-ox-map { flex: 1; display: grid; gap: 2px; padding: 6px; border: 2px solid var(--bu-ink); border-radius: 12px; background: var(--bu-well); color: var(--bu-text); text-align: left; cursor: pointer; }
.qq-ox-map.on { border-color: #ffd84a; box-shadow: 0 0 0 3px #ffd84a66; }
.qq-ox-map small { font-size: 15px; opacity: .85; }
.ox-thumb { display: block; height: 58px; border-radius: 8px; background: #2f5e22 center / cover no-repeat; }
.ox-thumb[data-map="factory"] { background-color: #283246; }

@media (prefers-reduced-motion: reduce) {
  .ox-actor .ox-body, .qps-hop, .qps-shadow, .ox-actor.me::after, .qps-fx, .ox-hurry.on, .ox-room.hurry .ox-clock svg, .ox-stage.shake { animation: none !important; }
  .ox-arena.cover-o .ox-cover.o, .ox-arena.cover-x .ox-cover.x { animation: none !important; opacity: 1; transform: none; }
  .ox-arena.lift .ox-cover.lid { opacity: 0 !important; }
  .ox-cover-shadow { display: none; }
  .ox-actor.sinking .ox-body { opacity: 0; }
}

/* QUIZSHOP '캐릭터 | 슬라임'(slime-shop.js): 가운데 위 큰 탭, 슬라임 탭은 큐플레이 슬라임 상점처럼 착용·기능·가방 */
.qs-kinds { flex: none; display: flex; gap: 4px; padding: 0 6px 4px; }
.qs-kind { flex: none; height: 32px; padding: 0 20px; border: 2px solid var(--bu-ink); border-radius: 14px; cursor: pointer; font: 800 15px "NanumSquareRound", sans-serif; color: #284c96; background: linear-gradient(#f4f9ff, #c9e4ff); }
.qs-kind.on { color: #fff; text-shadow: 0 1px 0 #0b2a7a; background: linear-gradient(#ffb85c, #f07a12); }
/* 낮은 노트북 화면(1280×720·1366×768): 분류 탭 줄(캐릭터: 메인·머리…, 슬라임: 전체·머리·눈·입) 오른쪽 끝에 얹어 상품 그림 자리를 지킨다
   (따로 한 줄을 쓰면 1280×720에서 상품 그림이 36px로 줄었다). */
@media (max-height: 800px) and (min-width: 1240px) {
  .qs-mid { position: relative; }
  .qs-mid > .qs-kinds { position: absolute; top: 2px; right: 6px; z-index: 1; padding: 0; gap: 3px; }
  .qs-mid > .qs-kinds .qs-kind { height: 30px; padding: 0 11px; font-size: 14px; border-radius: 12px; }
  /* 분류 탭 줄의 오른쪽 여백·탭 크기는 quizshop.css(뒤에 읽혀 기본값이 이김)의 같은 미디어 블록에 있다 */
}
.qs-root[hidden], #btnRand[hidden], #shopCatalogNote[hidden] { display: none; }
.qs-slime .qs-slime-stage { place-items: center; }
.qs-slime-wait { margin: 0; padding: 0 12px; text-align: center; font: 800 14px/1.6 "NanumSquareRound", sans-serif; color: var(--bu-sky); }
.qs-slime-colors { justify-content: center; }
/* 착용 아이템(머리·눈·입)은 캐릭터 탭처럼 미리보기 아래 세 칸(예전에는 가운데 한 줄에 넓고 납작하게 있었음, 2026-10-25 polish C) */
.qs-slime .qs-slime-worn { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 62px; padding: 6px; gap: 5px; }
.qs-slime .qs-grid { min-height: 260px; }
.qs-slot .qps-icon { max-height: 70%; }

/* 장면 움직임(원화 A1·A2·A4·A3, 2026-10-22): 슬라임은 ox-slime.js tick이 장면을 바꾸므로 CSS로 늘이거나 누르지 않는다 */
.qps.framed .qps-hop, .qps.framed .qps-shadow { animation: none !important; }
.qps-sp.qps-at-top, .qps-sp.qps-at-face { will-change: transform; }
.ox-land { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.qps-fx-frame, .qps-sink { position: absolute; display: block; background-repeat: no-repeat; }
.ox-sink { position: absolute; left: 0; bottom: 0; width: 0; height: 0; }
.ox-actor.sink-art .ox-body { animation: none !important; translate: 0 0; }
/* 용암 부글부글: 띠의 장면을 0.15초마다(정답 공개 0.5초 번쩍 뒤부터) */
.ox-arena.cover-o .ox-cover.lava.boil.o, .ox-arena.cover-x .ox-cover.lava.boil.x { animation: ox-lava-in .5s forwards, ox-boil .45s steps(1, end) .5s infinite; }
@keyframes ox-boil { 0% { opacity: 1; background-position: 0 0; } 33.33% { opacity: 1; background-position: calc(var(--fw) * -1) 0; } 66.66%, 100% { opacity: 1; background-position: calc(var(--fw) * -2) 0; } }
@media (prefers-reduced-motion: reduce) { .ox-arena.cover-o .ox-cover.lava.boil.o, .ox-arena.cover-x .ox-cover.lava.boil.x { animation: none !important; opacity: 1; } }

/* 채팅 관리 안내(약속 D): OX 아래 띠는 화면 맨 아래라 입력 칸 아래 자리가 없어, 입력 칸 바로 위(채팅 기록 아래 끝)에 붙인다. */
.ox-chat .qq-chat-note { top: auto; bottom: calc(100% + 3px); }