/* 쿼 비스트 (Quo Beast) — 영상 영역 소유 · 로비 균일 축소 · CSS 확대 · 가상패드.
   계약: docs/minigame-framework.md §18 (앱 전체화면 API를 쓰지 않는다). */

.game-quo-beast { --game-color: 244, 114, 82; }

/* ── 루트: 항상 .video-wrap의 자식 (§18.1) ───────────────────────────── */
#quoBeastRoot {
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box;
  z-index: 40; display: none; overflow: hidden; container-type: size;
  color: #f1f5f9; font-family: inherit;
  background:
    radial-gradient(circle at 18% 12%, rgba(248, 113, 113, .18), transparent 38%),
    radial-gradient(circle at 84% 82%, rgba(96, 165, 250, .16), transparent 36%),
    #0d1117;
}
#quoBeastRoot.qb-visible { display: block; }
#quoBeastRoot * { box-sizing: border-box; }
/* `display:flex/grid`를 지정한 규칙은 UA의 `[hidden]{display:none}`을 이긴다. 그래서 숨긴
   `.qb-result`(rgba(6,10,16,.66) 전면 오버레이)가 경기 내내 3D 화면을 덮어 ~0.34배로 어둡게
   만들고 있었다 — 실측: 하늘 (143,191,230) → 페이지 합성 (53,72,90). 루트 전체에 못을 박는다. */
#quoBeastRoot [hidden] { display: none !important; }
#quoBeastRoot button { font: inherit; border: 1px solid #2c3746; border-radius: 9px; padding: 7px 12px; background: #161d27; color: #dbe3ec; cursor: pointer; }
#quoBeastRoot button:disabled { opacity: .45; cursor: default; }
#quoBeastRoot button:focus-visible { outline: 3px solid #fb923c; outline-offset: 1px; }
.qb-body { position: absolute; inset: 0; }

/* CSS 확대만 사용한다. requestFullscreen 계열 금지 (§18.3). */
#quoBeastRoot.qb-expanded {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 10000;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.qb-collapse { position: absolute; top: 8px; right: 8px; z-index: 40; display: none; font-size: 12px; font-weight: 700; }
/* 확대 중 축소 버튼은 루트 「축소」(#quoBeastCollapse) 하나다(framework §18.3, 2026-09-29 — 쿼오파 98과 같은 방식).
   로비 머리·HUD 안의 확대/축소 토글은 확대 중에 숨긴다. 예전에는 루트 축소가 HUD의 「축소」(42×26)와 🔊 위에 겹쳐 있었다.
   HUD 줄 높이(약 34px)에 맞춘 작은 알약으로 두고, HUD는 fitHud()가 그 자리를 오른쪽에 비워 둔다. */
#quoBeastRoot.qb-expanded [data-toggle-expand] { display: none; }
#quoBeastRoot .qb-collapse { top: 4px; padding: 5px 11px; font-size: 12px; font-weight: 700; line-height: 1.2; border-radius: 999px; }

/* 영상 영역 **아래**의 외부 확대 버튼 (§18.3) */
#quoBeastExpand { display: none; margin: 5px auto; padding: 9px 16px; border-radius: 9px; border: 1px solid #2c3746; background: none; color: #cfd8e0; font: inherit; cursor: pointer; }
@media (pointer: coarse), (max-width: 900px) { #quoBeastExpand.qb-show { display: block; } }

/* ── 로비 패널: 고정 논리 크기를 균일 축소 (§18.2 #3) ─────────────────── */
.qb-panel {
  position: absolute; left: 50%; top: 50%; transform-origin: center;
  width: 640px; height: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(15, 21, 30, .96); border: 1px solid #23303f; border-radius: 18px;
}
@container (max-aspect-ratio: 4/5) { .qb-panel { width: 380px; } }
.qb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qb-title { margin: 0; font-size: 22px; font-weight: 850; letter-spacing: -.5px; }
.qb-sub { margin: 4px 0 0; font-size: 11px; color: #94a3b8; }
.qb-head-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#quoBeastRoot .qb-mini { padding: 5px 10px; font-size: 11px; font-weight: 700; border-radius: 999px; }
/* 효과음 토글(+ 로비 볼륨). 좁은 화면에서 로비가 커지지 않도록 슬라이더는 폭을 고정한다. */
.qb-sfx { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
#quoBeastRoot .qb-sfx-btn { padding: 5px 8px; line-height: 1; }
.qb-sfx-range { width: 48px; height: 14px; margin: 0; accent-color: #fb923c; cursor: pointer; }
.qb-sfx-range[data-bgm-range] { accent-color: #a78bfa; }
.qb-sfx-icon { font-size: 10px; line-height: 1; opacity: .8; }
@container (max-aspect-ratio: 4/5) { .qb-sfx-range { width: 34px; } }
.qb-row { display: flex; align-items: center; gap: 10px; }
.qb-label { flex: 0 0 34px; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #94a3b8; }
.qb-choices { display: flex; flex-wrap: wrap; gap: 6px; }
#quoBeastRoot .qb-chip { padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 999px; }
#quoBeastRoot .qb-chip.qb-active { background: #fb923c; border-color: #fb923c; color: #14181f; }
#quoBeastRoot .qb-chip.qb-blue.qb-active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
#quoBeastRoot .qb-chip.qb-red.qb-active { background: #ef4444; border-color: #ef4444; color: #fff; }
/* 방장이 아닌 사람에게 보이는 고정 표시(판수). 칩과 같은 높이라 줄이 흔들리지 않는다. */
.qb-static { padding: 6px 2px; font-size: 12px; font-weight: 700; color: #e2e8f0; }

.qb-roster-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #94a3b8; }
.qb-roster-head strong { color: #e2e8f0; }
/* 3D 프리로드 상태 한 줄. **명단 머리와 같은 줄**이라 로비 높이가 늘지 않는다(§18.2 수용 조건 유지). */
.qb-prep { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 10px; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 3열 × 2행이면 최대 6인이 스크롤 없이 들어온다. 카드 높이는 이름 길이에 따라 자란다. */
.qb-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@container (max-aspect-ratio: 4/5) { .qb-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qb-card {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 8px 9px; border-radius: 12px; background: #161d27; border-left: 3px solid #3f4c5c;
}
.qb-card.qb-blue { border-left-color: #3b82f6; }
.qb-card.qb-red { border-left-color: #ef4444; }
.qb-card.qb-bot { background: #141a23; }
/* 닉네임은 자르지 않는다. 한글/영문 20자가 줄바꿈으로 전부 보여야 한다 (§18.2 #5). */
.qb-name { display: block; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.25;
  white-space: normal; word-break: break-all; overflow-wrap: anywhere; overflow: visible; }
.qb-me { margin-left: 3px; font-size: 10px; font-weight: 700; color: #fb923c; }
.qb-owner { margin-left: 3px; font-size: 11px; color: #facc15; }
.qb-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.qb-tag { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .4px; padding: 1px 5px; border-radius: 999px; background: #27303c; color: #cbd5e1; }
.qb-tag-blue { background: #1d4ed8; color: #fff; }
.qb-tag-red { background: #b91c1c; color: #fff; }
.qb-off { background: #4b5563; color: #f8fafc; }
.qb-state { font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.qb-state.qb-ready { color: #86efac; }
.qb-state.qb-wait { color: #94a3b8; }
.qb-help { margin: 0; font-size: 11px; color: #94a3b8; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 조작법은 접이식 보조 패널 — 기본 로비 화면은 스크롤 없이 들어가야 한다 (§18.2). */
.qb-moves { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border-radius: 9px;
  background: #141a23; border: 1px solid #23303f; }
.qb-moves p { margin: 0; font-size: 11px; line-height: 1.4; color: #cbd5e1; }
.qb-reason { margin: 0; font-size: 11px; color: #fdba74; }
.qb-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.qb-standby { margin-right: auto; font-size: 12px; color: #94a3b8; }
#quoBeastRoot .qb-btn { font-size: 13px; font-weight: 700; }
#quoBeastRoot .qb-btn.qb-primary { background: #fb923c; border-color: #fb923c; color: #14181f; }
#quoBeastRoot .qb-btn.qb-primary.qb-armed { background: #86efac; border-color: #86efac; }

/* ── 경기 화면 ───────────────────────────────────────────────────────── */
.qb-surface { position: absolute; inset: 0; }
.qb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #0b1016; }
.qb-view-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  padding: 10px 16px; border-radius: 10px; background: rgba(15, 21, 30, .92); border: 1px solid #3f4c5c;
  font-size: 12px; color: #fdba74; text-align: center; }
.qb-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 10px; background: linear-gradient(180deg, rgba(8, 12, 18, .78), transparent); }
/* 좁은 화면에서 자리가 모자라면 **맵 이름이 먼저 줄어든다**(이미 말줄임). 점수·라운드는 읽혀야 한다. */
.qb-hud-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.qb-hud-right { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.qb-hud-center { display: flex; flex-direction: column; align-items: center; }
/* `ROUND r / N` 은 두 줄로 접히면 HUD 높이가 늘어 시계·킬피드와 겹친다. 줄을 고정하고
   맵 이름(이미 말줄임)이 대신 줄어들게 한다. 점수 칸도 같은 이유로 한 줄이다. */
.qb-round { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #fdba74; white-space: nowrap; }
.qb-map { font-size: 11px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-clock { font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums; }
.qb-sudden { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fca5a5; }
.qb-score { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 480px) { .qb-score { font-size: 10px; max-width: 46cqw; flex: 0 0 auto; } }
/* fitHud()가 HUD 한 줄의 제 폭(max-content)을 잴 때만 붙는다 — 넘치면 말줄임 대신 줄 전체를 zoom 으로 줄인다(framework §18.6). */
.qb-hud.qb-hud-measure { right: auto; width: max-content; }
.qb-hud.qb-hud-measure .qb-map, .qb-hud.qb-hud-measure .qb-score { max-width: none; }
/* 네트 상태: 기본은 아주 작은 핑 한 줄. 누르면 상세가 HUD **아래 별도 줄**로 뜬다 —
   HUD 줄이 커지면 좁은 화면에서 시계·점수와 겹친다. */
#quoBeastRoot .qb-net { padding: 2px 6px; font-size: 10px; font-weight: 700; line-height: 1.3;
  border-radius: 999px; border-color: rgba(148, 163, 184, .35); background: rgba(16, 22, 31, .6);
  color: #94a3b8; font-variant-numeric: tabular-nums; }
/* 킬피드가 top:44px 에서 시작하므로 그 위 좁은 띠 안에 들어가야 한다(높이 ≈ 14px). */
.qb-net-detail { position: absolute; right: 10px; top: 27px; z-index: 8; pointer-events: none;
  padding: 1px 8px; border-radius: 8px; background: rgba(10, 14, 20, .82); line-height: 1.2;
  font-size: 10px; color: #cbd5e1; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 렌더러가 준비되기 전(후입장·관전) 또는 라운드 시작 ready-gate 표시. 요소를 넣고 빼는 방식이다
   (`[hidden]` 은 작성자 `display:flex` 에 진다 — §11.7a CSS 함정). */
.qb-loading { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 9;
  padding: 6px 14px; border-radius: 999px; background: rgba(10, 14, 20, .82); border: 1px solid #2c3746;
  font-size: 12px; font-weight: 700; color: #cbd5e1; white-space: nowrap; pointer-events: none; }
.qb-feed { position: absolute; right: 10px; top: 44px; z-index: 7; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 3px; text-align: right; pointer-events: none; }
.qb-feed li { font-size: 11px; font-weight: 700; color: #e2e8f0; background: rgba(10, 14, 20, .7); border-radius: 6px; padding: 2px 7px; }
/* 인게임 채팅: 킬피드와 같은 계열로 왼쪽 위(가상패드·HUD 와 겹치지 않는 자리)에 몇 줄만 잠깐.
   입력창은 축구(`fb-chat-input`)와 같은 가운데 아래 한 줄이며 PC 참가자에게만 열린다. */
#quoBeastRoot .qb-chat-input { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 11;
  box-sizing: border-box; width: min(420px, 80%); padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 18px; background: rgba(11, 19, 26, .88); color: #fff; font-size: 14px; outline: none;
  pointer-events: auto; box-shadow: 0 4px 16px rgba(0, 0, 0, .6); }
#quoBeastRoot .qb-chat-input[hidden] { display: none; }
/* 라운드 안내(맵 이름 · 설명, 최장 50자)는 화면 폭 안에서 줄을 바꾸고, 그래도 높이 예산을 넘으면
   quobeast_client.js fitBanner()가 통째로 줄인다(framework §18.6) — 예전 nowrap은 폰에서 양옆이 잘렸다. */
.qb-banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 9;
  box-sizing: border-box; width: max-content; max-width: calc(100% - 24px);
  padding: 8px 18px; border-radius: 16px; background: rgba(10, 14, 20, .82); border: 1px solid #3f4c5c;
  font-size: 13px; font-weight: 800; line-height: 1.35; text-align: center;
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
/* 배너가 여러 줄이면 숫자가 배너 글자를 덮지 않게 배너 아래(--qb-banner-bottom, fitBanner)로 내려간다 */
.qb-countdown { position: absolute; left: 50%; top: max(46%, calc(var(--qb-banner-bottom, 0px) + 42px)); transform: translate(-50%, -50%); z-index: 9;
  font-size: 64px; font-weight: 900; color: #fb923c; text-shadow: 0 6px 22px rgba(0, 0, 0, .7); }
/* 결과 화면은 **승리 포즈가 보여야 한다**(R19): 전면을 66% 로 덮고 카드를 한가운데 두면 만세하는 승자가 가려진다.
   아래쪽만 옅게 어둡게 하고 카드는 위 1/5 지점에 둔다. */
.qb-result { position: absolute; inset: 0; z-index: 12; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 9%; background: linear-gradient(to bottom, rgba(6, 10, 16, .42), rgba(6, 10, 16, .10) 38%, rgba(6, 10, 16, 0) 60%); pointer-events: none; }
.qb-result > * { pointer-events: auto; }
.qb-result-card { padding: 18px 26px; border-radius: 16px; background: #10161f; border: 1px solid #2c3746; text-align: center; }
.qb-result-card h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: 2px; color: #fdba74; }
.qb-result-card p { margin: 0; font-size: 18px; font-weight: 800; }
.qb-result-card .qb-sub { margin-top: 6px; font-size: 12px; }
/* 개인전 다판 순위 점수표: 6명까지 한 화면에 들어가야 한다(가로 844×390 모바일 포함).
   카드 자체를 좁게·작게 잡고 표는 등수/이름/이번 라운드/누적 4열로만 둔다. */
.qb-result-card.qb-result-points { padding: 12px 16px; max-width: min(320px, 82cqw); }
.qb-result-card.qb-result-points p { font-size: 15px; }
.qb-points { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.qb-points td { padding: 2px 4px; line-height: 1.35; white-space: nowrap; }
.qb-points tr.qb-mine { color: #fdba74; }
.qb-pt-rank { width: 16px; text-align: right; color: #94a3b8; font-weight: 800; }
.qb-pt-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 700; }
.qb-pt-add { text-align: right; color: #86efac; font-weight: 700; }
.qb-pt-sum { text-align: right; font-weight: 850; }
/* 가로가 아주 낮은 화면(844×390)에서는 카드가 결과 오버레이 밖으로 나가지 않게 한 단계 더 줄인다. */
@container (max-height: 420px) {
  .qb-result-card.qb-result-points { padding: 8px 12px; }
  .qb-result-card.qb-result-points h3 { font-size: 13px; }
  .qb-result-card.qb-result-points p { font-size: 13px; }
  .qb-points { font-size: 11px; margin-top: 5px; }
  .qb-points td { padding: 1px 4px; line-height: 1.2; }
}

/* ── 가상패드 (§18.4): 왼손·오른손은 붙여서 배치, 들기는 토글 ─────────── */
.qb-touch { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: none;
  align-items: flex-end; justify-content: space-between; gap: 8px; padding: 8px 10px; pointer-events: none; }
.qb-touch > * { pointer-events: auto; }
/* 길게 누르기로 글자 선택·복사 메뉴·탭 강조가 뜨지 않게(2026-09-28) */
.qb-touch, .qb-touch * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.qb-touch img { pointer-events: none; -webkit-user-drag: none; }
.qb-stick { position: relative; width: 76px; height: 76px; border-radius: 50%; touch-action: none;
  background: rgba(20, 27, 36, .55); border: 2px solid rgba(148, 163, 184, .45); }
.qb-stick-knob { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: rgba(251, 146, 60, .82); }
.qb-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.qb-action-row { display: flex; gap: 6px; }
.qb-action-row.qb-hands { gap: 2px; }   /* 엄지 하나로 양손을 동시에 누를 수 있게 붙인다 */
/* 앉기·어퍼·찍기는 작게 위쪽 줄 — 필드를 덜 가린다. 앉기는 **누르고 있는 동안**이라
   손 버튼과 같은 자리를 다투면 안 된다(둘째 손가락으로 위 줄을 누른 채 엄지로 왼손/오른손). */
.qb-action-row.qb-tech { gap: 4px; }
#quoBeastRoot .qb-btn-act { width: 46px; height: 34px; padding: 0; border-radius: 10px; font-size: 11px; font-weight: 800;
  background: rgba(22, 29, 39, .82); border-color: rgba(148, 163, 184, .45); touch-action: none; }
#quoBeastRoot .qb-btn-act.qb-hand { width: 52px; }
#quoBeastRoot .qb-btn-act.qb-small { width: 38px; height: 26px; font-size: 10px; }
#quoBeastRoot .qb-btn-act.qb-on { background: #fb923c; border-color: #fb923c; color: #14181f; }
/* 세로 확대: 캔버스를 화면 전체 높이로 늘리면 가상패드가 경기장 위에 얹힌다.
   위쪽에 가로 기준 4:3(화면 높이의 절반 이내) 뷰 영역만 두고 패드는 그 아래 빈 자리에 놓는다.
   가로 확대는 기존대로 전체를 쓴다. 렌더러의 resize()는 canvas 자신의 박스를 기준으로 잰다. */
@media (orientation: portrait) {
  #quoBeastRoot.qb-expanded .qb-canvas { bottom: auto; height: min(75vw, 50dvh); }
}
#quoBeastRoot.qb-expanded .qb-touch { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
#quoBeastRoot.qb-expanded .qb-stick { width: 110px; height: 110px; }
#quoBeastRoot.qb-expanded .qb-stick-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
#quoBeastRoot.qb-expanded .qb-btn-act { width: 64px; height: 52px; font-size: 13px; }
#quoBeastRoot.qb-expanded .qb-btn-act.qb-hand { width: 72px; }
#quoBeastRoot.qb-expanded .qb-btn-act.qb-small { width: 52px; height: 36px; font-size: 11px; }

/* ── 디버그 슬라이더 (서버 QUOBEAST_DEBUG=1) ─────────────────────────── */
.qb-debug { position: absolute; left: 8px; bottom: 8px; z-index: 11; max-width: 260px;
  padding: 6px; border-radius: 10px; background: rgba(10, 14, 20, .86); border: 1px solid #2c3746; }
.qb-debug-body { display: flex; flex-direction: column; gap: 4px; max-height: 40cqh; overflow: auto; margin-top: 6px; }
.qb-debug-row { display: grid; grid-template-columns: 82px 1fr 40px; gap: 6px; align-items: center; font-size: 10px; }
.qb-debug-row output { font-variant-numeric: tabular-nums; text-align: right; }

/* ── 키 설정 패널 ────────────────────────────────────────────────────── */
.qb-keys { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 12px; background: rgba(6, 10, 16, .82); }
.qb-keys-card { width: min(420px, 100%); max-height: 100%; overflow: auto; padding: 16px 18px;
  border-radius: 16px; background: #10161f; border: 1px solid #2c3746; }
.qb-keys-card h3 { margin: 0 0 10px; font-size: 16px; }
.qb-keys-list { display: flex; flex-direction: column; gap: 4px; }
.qb-key-row { display: grid; grid-template-columns: 1fr 96px auto; gap: 8px; align-items: center; }
.qb-key-name { font-size: 13px; cursor: pointer; }
.qb-kbd { padding: 4px 6px; border-radius: 7px; background: #1a222e; border: 1px solid #2c3746;
  font-size: 11px; font-weight: 800; text-align: center; cursor: pointer; }
.qb-kbd.qb-changed { border-color: #fb923c; color: #fdba74; }
/* 배정이 비어 있는 동작 — 기존 설정과 충돌해 기본 키를 덮어쓰지 않은 경우 */
.qb-kbd.qb-unbound { border-color: #f87171; color: #fca5a5; }
.qb-keys-alert { margin: 0 0 10px; padding: 7px 9px; border-radius: 9px; font-size: 11px; line-height: 1.45;
  background: rgba(127, 29, 29, .35); border: 1px solid #b91c1c; color: #fecaca; }
#quoBeastRoot .qb-mini.qb-warn { border-color: #f87171; color: #fca5a5; }
.qb-kbd.qb-listen { border-color: #86efac; color: #86efac; }
.qb-keys-msg { margin: 10px 0; font-size: 11px; color: #94a3b8; }
.qb-keys-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* ── 신청 팝업 ───────────────────────────────────────────────────────── */
.qb-challenge { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(5, 8, 18, .75); }
.qb-challenge-card { width: min(420px, 92vw); padding: 24px; border-radius: 20px; text-align: center;
  color: #f1f5f9; background: linear-gradient(145deg, #1b2431 0%, #0d1117 100%); border: 1px solid rgba(255, 255, 255, .16); }
.qb-challenge-card h3 { margin: 0 0 10px; font-size: 21px; font-weight: 850; }
.qb-challenge-card p { margin: 0 0 10px; font-size: 14px; color: #cbd5e1; }
.qb-challenge-time { margin-bottom: 14px; font-size: 13px; font-weight: 800; color: #fbbf24; font-variant-numeric: tabular-nums; }
.qb-challenge-card > div:last-child { display: flex; justify-content: center; gap: 10px; }
.qb-challenge-card button { font: inherit; border: 1px solid #2c3746; border-radius: 9px; padding: 8px 16px; background: #161d27; color: #dbe3ec; cursor: pointer; }
.qb-challenge-card button.qb-primary { background: #fb923c; border-color: #fb923c; color: #14181f; font-weight: 800; }