/* QUIZQUIZ 로비·OX·라운드전 무대(quizquiz.js, round-quiz.js).
   큐플레이 진행·화면 구성, 파란 UI(blue-ui.css 색 토큰). 맵·무대 그림은 그대로 둔다. */
.qq-root { position: absolute; inset: var(--qp-top-height, 64px) 0 0; overflow: hidden; }

/* 큐플레이 파란 창(파란UI-계획 U5): 코발트 테두리·남색 제목 띠·우물 목록. 무대 점수판·OX 생존자 창 */
.qq-win { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 6px; gap: 6px; border: 2px solid var(--bu-ink); border-radius: 12px;
  background: linear-gradient(var(--bu-cobalt), var(--bu-cobalt2)); box-shadow: inset 0 0 0 2px var(--bu-rim2), inset 0 3px 0 2px var(--bu-rim), 0 3px 0 var(--bu-line), 0 6px 14px #0004; overflow: hidden; }
.qq-win-h { display: flex; align-items: center; gap: 8px; flex: none; height: 30px; padding: 0 6px 0 12px; border-radius: 15px;
  background: var(--bu-cap); border: 2px solid var(--bu-cap-line); box-shadow: var(--bu-cap-shadow); }
.qq-win-h h2 { margin: 0; font: 18px/1.2 var(--bu-outline); color: #fff;
  text-shadow: var(--bu-stroke-2-drop3); }
.qq-count { margin-left: auto; font: 800 15px "NanumSquareRound", sans-serif; color: var(--bu-gold); background: #04103a; border-radius: 10px; padding: 1px 9px; }
.qq-tag { display: inline-block; margin: 0 4px; padding: 0 6px; border-radius: 6px; font: 800 13px/1.6 "NanumSquareRound", sans-serif; vertical-align: 1px; }

/* 로비·무대 바탕. 무대(라운드전) 배경은 맵마다 round-quiz.js가 그린다(옛 숲 원화는 2026-10-22 사용자 요청으로 뺌). */
.qq-lobby, .qq-stage { position: absolute; inset: 0; background: #071640; isolation: isolate; }
.qq-ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.qq-ray { position: absolute; top: -20%; width: 16%; height: 140%; background: linear-gradient(#fff7c855, #fff7c800 70%); transform: rotate(18deg); transform-origin: top; animation: qq-ray 9s ease-in-out infinite; mix-blend-mode: screen; }
.qq-ray.r1 { left: 34%; } .qq-ray.r2 { left: 50%; width: 9%; animation-delay: -3s; } .qq-ray.r3 { left: 62%; width: 12%; animation-delay: -6s; }
@keyframes qq-ray { 0%, 100% { opacity: .25; } 50% { opacity: .75; } }
.qq-fly { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(#fffbd0, #ffe36e 45%, #ffe36e00 72%); box-shadow: 0 0 10px 3px #ffe36e66;
  animation: qq-drift 7s ease-in-out infinite alternate, qq-blink 2.6s steps(4, end) infinite; }
@keyframes qq-drift { from { transform: translate(0, 0); } 50% { transform: translate(22px, -16px); } to { transform: translate(-14px, 10px); } }
@keyframes qq-blink { 0%, 60% { opacity: 1; } 80% { opacity: .2; } 100% { opacity: .9; } }
.qq-fall { position: absolute; top: -6%; width: 22px; animation: qq-fall 12s linear infinite; opacity: .9; }
@keyframes qq-fall { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(30px, 28vh) rotate(90deg); } 50% { transform: translate(-10px, 56vh) rotate(200deg); } 75% { transform: translate(26px, 84vh) rotate(290deg); } 100% { transform: translate(0, 112vh) rotate(380deg); } }

/* ───────── Lobby: QPlay channel lobby (디자인기준/27) ───────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* 아래 줄(로비 채팅·내 정보)은 화면 높이를 따라간다: 1366×768 → 240px, 1536×864 → 294px, 1920×1080 → 330px
   (예전 210px 고정은 채팅 글이 세 줄만 보여 좁았음, 2026-10-25 사용자 "로비채팅 칸을 좀 더 늘려줘"). */
.qq-lobby { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr) clamp(240px, 34vh, 330px); gap: 10px 12px; padding: 12px 16px 14px;
  background: radial-gradient(ellipse at 50% -20%, #7ab2f2 0%, #4a7ad8 45%, #3358b4 85%); isolation: isolate; }
.qq-lobby .qq-ambient { opacity: .5; }
/* 큐플레이 로비 판(디자인기준/27): 두꺼운 은청 베벨 틀(blue-ui.css --bu-frame, 2026-10-23 큐플레이 비교 C2) + 위가 하늘빛인 코발트 몸통 */
.qq-rooms, .qq-users, .qq-mecard, .qq-chatbox { position: relative; z-index: 1; min-height: 0; border: var(--bu-frame-w) solid transparent; border-radius: 18px;
  background: var(--bu-body) padding-box, var(--bu-frame) border-box; box-shadow: var(--bu-frame-shadow); }
.qq-rooms { grid-row: 1; grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr) 34px; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 7px; }
.qq-room-grid { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px 10px; min-height: 0; }
/* Room card: green frame, navy inside, number tag, state tag, title plate. */
/* 윗줄: 번호·게임 표 · 가운데 방장 이름판(C16, 예전엔 가운데 ~340px이 빈 초록이었음) · 상태 표·인원 */
.qq-room { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "no mode host state n" "title title title title title"; align-items: center; gap: 4px 7px;
  min-height: 0; padding: 6px 8px; text-align: left; cursor: pointer; border: 2px solid #1e5a2e; border-radius: 8px;
  background: linear-gradient(#57c06a, #2f9a4a); box-shadow: inset 0 1px 0 #b9f5c2, 0 2px 0 #0b1a48; font-family: "NanumSquareRound", sans-serif; color: #fff; }
.qq-room::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: calc(50% - 6px); border-radius: 5px; background: linear-gradient(#1a2462, #121a4c); box-shadow: inset 0 1px 0 #3a4ea0; z-index: 0; }
.qq-room > * { position: relative; z-index: 1; }
.qq-room:hover:not(:disabled) { filter: brightness(1.08); }
.qq-room:focus-visible { outline: 3px solid var(--bu-focus); outline-offset: 2px; }
.qq-room:disabled { filter: grayscale(.5); cursor: default; }
/* 빈 자리(2026-10-23 큐플레이 비교 C6): 방 카드와 같은 초록 계열을 옅게, 점선 테두리 + 번호만(꺼진 남색 구멍 대신 '여기 방이 들어와요') */
.qq-room.empty { cursor: default; background: linear-gradient(#6fbf8a3d, #3f9a5a33), linear-gradient(#4d69b4, #4462ad); border: 2px dashed #a8ecbccc; box-shadow: inset 0 2px 3px #0b1f5e40; }
.qq-room.empty::after { content: ""; left: 6px; right: 6px; bottom: 6px; background: #ffffff14; box-shadow: none; }
.qq-room.empty .qq-room-no { background: #2f7f4a99; color: #e2ffe9; text-shadow: none; }
/* 첫 빈자리: '+ 방 만들기'(로비 아래 방만들기 단추와 같은 일) */
.qq-room.qq-make-slot { grid-template-columns: auto 1fr; grid-template-areas: "plus label"; align-items: center; justify-items: start; gap: 10px; padding: 6px 14px;
  background: linear-gradient(#8fe0a0, #4fb866); border: 2px dashed #ffffff; box-shadow: inset 0 1px 0 #e4ffe9, 0 2px 0 #0b1a48; }
.qq-room.qq-make-slot::after { content: none; }
.qq-make-plus { grid-area: plus; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #ffffff, #e2ffe9 55%, #a8e8b8);
  border: 2px solid #1e5a2e; font: 26px/1 var(--bu-outline); color: #1e7a3a; box-shadow: 0 2px 0 #1e5a2e; }
.qq-room.qq-make-slot b { grid-area: label; font-size: 18px; }
/* 방이 하나도 없을 때: 왼쪽 위 네 칸(2×2)을 차지하는 초대 카드 */
.qq-room.qq-invite { grid-column: span 2; grid-row: span 2; cursor: default; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text make"; align-items: center; gap: 14px; padding: 10px clamp(18px, 1.6vw, 40px); container-type: inline-size;
  background: radial-gradient(120% 140% at 0% 100%, #ffe7a066, #0000 55%), linear-gradient(#7fd894, #3f9e58); border: 2px solid #1e5a2e; box-shadow: inset 0 2px 0 #d8ffe0, 0 3px 0 #0b1a48; }
.qq-room.qq-invite::after { content: none; }
/* 글자·단추는 카드 너비(cqw)를 따라 커진다: 1366 카드(약 950px) 23px → 1536(약 1120px) 27px → 1920(약 1500px) 36px (2026-10-25, 1920·1536에서 카드에 비해 작았음) */
.qq-invite-text { grid-area: text; display: grid; gap: .2em; min-width: 0; }
.qq-invite-text b { font-size: clamp(22px, 2.4cqw, 38px); line-height: 1.25; word-break: keep-all; }
.qq-invite-text small { font: 800 clamp(15px, 1.45cqw, 22px)/1.4 "NanumSquareRound", sans-serif; color: #fff; text-shadow: var(--bu-stroke-1), 1px 1px 0 var(--bu-ink), -1px 1px 0 var(--bu-ink), 1px -1px 0 var(--bu-ink), -1px -1px 0 var(--bu-ink); word-break: keep-all; }
.qq-invite-make { grid-area: make; min-width: clamp(120px, 11cqw, 190px); padding: .5em 1em; }
/* readability.css의 `body .btn:not(.sm):not(.big) { font-size: 16px }`보다 구체적으로 */
body .qq-invite .qq-invite-make.btn:not(.sm) { font-size: clamp(18px, 1.7cqw, 26px); }
.qq-room-no { grid-area: no; padding: 0 6px; border-radius: 4px; background: #0f5a2a; font: 700 16px/1.4 "QuizLatin", sans-serif; color: #fff; text-shadow: 0 1px 0 #062a12; }
.qq-room-mode { grid-area: mode; padding: 1px 8px; border: 1px solid #8a9ab8; border-radius: 4px; background: linear-gradient(#ffffff, #dde6f2); font: 800 14px "NanumSquareRound", sans-serif; color: #1b2a5c; }
/* 방장 이름판: 흰 판에 남색 글자(큐플레이 27의 흰 이름판처럼), 길면 말줄임 */
.qq-room-host { grid-area: host; justify-self: center; min-width: 0; max-width: 100%; padding: 1px 10px; border-radius: 4px; border: 1px solid #8a9ab8; background: linear-gradient(#ffffff, #e4f1ff);
  font: 800 13px/1.5 "NanumSquareRound", sans-serif; color: #1b2a5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* PLAYING·WAITING·인원은 영어 그대로 두고 남색 1px 테두리로 대비만 올린다(2026-10-25 사용자) */
.qq-room-state { grid-area: state; justify-self: end; padding: 1px 7px; border-radius: 4px; font: 700 14px/1.4 "QuizLatin", sans-serif; letter-spacing: .03em; color: #fff; background: linear-gradient(#5cb6ff, #1f7fe0); box-shadow: inset 0 1px 0 #c4e6ff;
  text-shadow: var(--bu-stroke-1); }
.qq-room.waiting .qq-room-state { background: linear-gradient(#ffc04a, #e87a10); box-shadow: inset 0 1px 0 #ffe3a8; }
.qq-room-n { grid-area: n; font: 700 15px "QuizLatin", sans-serif; color: #fff; text-shadow: var(--bu-stroke-1), 0 2px 0 var(--bu-ink); }
.qq-room-title { grid-area: title; justify-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px "NanumSquareRound", sans-serif; color: #ffe8a8; }
.qq-room.teacher { border-color: #8a5a10; background: linear-gradient(#ffd86a, #e8a020); box-shadow: inset 0 1px 0 #fff3c4, 0 2px 0 #0b1a48, 0 0 0 2px #ffe79a; }
.qq-tstar { margin-right: 5px; font-style: normal; } /* 선생님 방: 도트 왕관(ui-icons crown, 원본 화소) */
.qq-pager { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; border-radius: 8px; background: var(--bu-well2); box-shadow: var(--bu-well-shadow); }
.qq-pager span { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 13px "QuizOutline", sans-serif; color: #fff; }
.qq-pager span i { width: 12px; height: 2px; border-radius: 1px; background: var(--bu-rim2); }
.qq-pager span small { font: 800 13px "NanumSquareRound", sans-serif; color: #9fc8f5; }
.qq-arrow { width: 26px; height: 26px; border: 1px solid #0c3784; border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--bu-rim), #3a9ae6 60%, #1c5fc4); color: #fff; font-size: 11px; cursor: pointer; box-shadow: 0 1px 0 #0b1a48; }
.qq-arrow:disabled { opacity: .45; cursor: default; } /* 꺼진 회색 대신 흐린 파랑(C12) */
/* 쪽 넘김: 도트 화살표(ui-icons send)를 90°씩만 돌려 위·아래로(화소가 그대로 맞는다) */
.qq-arrow { display: grid; place-items: center; padding: 0; }
.qq-arrow .px-icon { margin: 0; vertical-align: 0; }
.qq-arrow.up .px-icon { rotate: -90deg; } .qq-arrow.down .px-icon { rotate: 90deg; }
.qq-room-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: var(--bu-well2); box-shadow: var(--bu-well-shadow); }
.qq-room-actions .btn { min-width: 136px; padding: 8px 16px; font-size: 18px; }
.qq-room-actions .qq-make { --qb-a: #9ddcff; }
.qq-filter { display: flex; gap: 6px; margin-left: auto; }
.qq-chip { padding: 6px 13px; border: 1px solid #5a86c4; border-radius: 16px; background: linear-gradient(#ffffff, #d8ecfb); font: 800 14px "NanumSquareRound", sans-serif; color: #1b2f68; cursor: pointer; box-shadow: 0 1px 0 #0b1a48; }
/* 고른 거름 칩: 하늘 광택 위 흰 글자 + 남색 테두리(예전엔 연하늘 바탕에 흰 글자라 흐렸음, C19) */
.qq-chip.on { border-color: #0c4a94; background: linear-gradient(#9fe0ff, #2a9de8); color: #fff; text-shadow: 0 1px 0 #0b3a7a, 1px 0 0 #0b3a7a, -1px 0 0 #0b3a7a, 0 -1px 0 #0b3a7a; }
.qq-chip:focus-visible { outline: 3px solid var(--bu-focus); outline-offset: 2px; }

/* User list: pale tabs, sky header, navy rows. */
.qq-users { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; padding: 4px; }
.qq-utabs { display: flex; gap: 4px; }
.qq-utab { flex: 1; padding: 6px 8px; border-radius: 8px 8px 0 0; text-align: center; font: 800 15px "NanumSquareRound", sans-serif; color: #2c4c9e; background: linear-gradient(#a9c8ec, #7f9fd6); }
.qq-utab.on { color: #0e2a72; background: linear-gradient(#ffffff, #cfe6fb); }
.qq-utab b { color: #e8590c; }
.qq-uhead { display: grid; grid-template-columns: 50px 1fr 54px; padding: 4px 8px; background: linear-gradient(#8fd7ff, #45b0f2); border: 1px solid #1b5fb4; font: 800 14px "NanumSquareRound", sans-serif; color: #0e2a72; }
.qq-online-list { list-style: none; flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 4px; background: var(--qq-motif) no-repeat center bottom -70px / 220px 220px, repeating-linear-gradient(#ffffff0a 0 34px, #0000 34px 37px), linear-gradient(var(--bu-well), var(--bu-well2)); border-radius: 0 0 8px 8px; box-shadow: var(--bu-well-shadow); } /* 빈 줄 자리에 옅은 줄무늬(C25)·우물 무늬(C12) */
.qq-online-list li { display: flex; align-items: center; gap: 7px; padding: 4px 6px; margin-bottom: 3px; border-radius: 5px; background: linear-gradient(#5a79c4, #4b6ab6); box-shadow: inset 0 1px 0 #9fbdf0; font: 700 15px "NanumSquareRound", sans-serif; color: #fff; text-shadow: 0 1px 0 var(--bu-cap-line); }
.qq-online-list li:nth-child(even):not(.me) { background: linear-gradient(#5675c2, #4767b3); }
.qq-online-list li.me { background: linear-gradient(#4fbdf6, #2a8ce0); }
.qq-online-list li > span:last-child { margin-left: auto; padding: 0 6px; border-radius: 8px; background: var(--bu-groove); font-size: 13px; color: #ffd84a; text-shadow: none; }
.qq-online-list .qq-head { width: 34px; height: 34px; margin-block: -4px; border-color: #9fc8f5; } /* LPC 얼굴은 1배라 안쪽 30px은 돼야 두 눈이 다 들어간다. 줄 높이(34px, 줄무늬)는 그대로 두려고 위아래 4px 겹친다 */
.qq-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #e8590c; box-shadow: 0 0 0 1px #fff; }
.qq-dot.busy { background: #2f80dd; }

/* My card (파란 UI, 2026-10-21 사용자 "자기모습 상태창도 떼깔나게"): spotlight stage with a glossy pedestal,
   navy well with an outlined name band, stat rows and an orange 꾸미러 가기 pill (큐플레이 로비 오른쪽 아래 칸). */
.qq-mecard { grid-row: 2; grid-column: 2; display: grid; grid-template-columns: 124px 1fr; gap: 6px; padding: 3px; }
.qq-me-pic { display: grid; place-items: end center; border: 2px solid var(--bu-line); border-radius: 10px; overflow: hidden;
  background: radial-gradient(85% 60% at 50% 88%, #7cb2f4 0%, #4373d0 55%, #2d54a8 100%); box-shadow: inset 0 0 0 1px #9fd0ff, inset 0 3px 6px #0b1f5e8c; }
.qq-me-info { display: flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 10px; min-width: 0;
  background: linear-gradient(var(--bu-well), var(--bu-well2)); border: 2px solid var(--bu-line); box-shadow: var(--bu-well-shadow); }
.qq-me-name { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 15px; overflow: hidden; white-space: nowrap;
  background: linear-gradient(#5a90f0, #2f61cf); border: 2px solid var(--bu-line); box-shadow: inset 0 2px 0 #a9d4ff;
  font: 400 17px "QuizOutline", "QuizDisplay", sans-serif; color: #fff;
  text-shadow: 0 2px 0 var(--bu-ink), 2px 0 0 var(--bu-ink), -2px 0 0 var(--bu-ink), 0 -2px 0 var(--bu-ink), 2px 2px 0 var(--bu-ink), -2px 2px 0 var(--bu-ink), 2px -2px 0 var(--bu-ink), -2px -2px 0 var(--bu-ink); }
.qq-me-info dl { display: grid; grid-template-columns: auto 1fr; row-gap: 4px; margin: 0; font: 800 15px "NanumSquareRound", sans-serif; }
.qq-me-info :is(dt, dd) { margin: 0; padding: 5px 7px; background: var(--bu-groove); white-space: nowrap; }
.qq-me-info dt { font-size: 14px; }
.qq-me-info dt { color: #bcd6ff; border-radius: 6px 0 0 6px; }
.qq-me-info dd { color: #fff; text-align: right; border-radius: 0 6px 6px 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.qq-me-info dd.qq-me-gold { color: var(--bu-gold); font: 16px "QuizOutline", sans-serif; text-shadow: 0 1px 0 #3a1d00; }
.qq-me-shop { margin-top: auto; height: 34px; border-radius: 17px; cursor: pointer; border: 2px solid var(--bu-ink);
  background: linear-gradient(#ffe2a0 0%, #ffc04a 35%, #f26c00 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(0,0,0,.22), 0 2px 0 #051a50;
  font: 400 16px "QuizOutline", sans-serif; color: #fff;
  text-shadow: 0 2px 0 var(--bu-ink), 2px 0 0 var(--bu-ink), -2px 0 0 var(--bu-ink), 0 -2px 0 var(--bu-ink), 2px 2px 0 var(--bu-ink), -2px 2px 0 var(--bu-ink); }
.qq-me-shop:is(:hover, :focus-visible) { filter: brightness(1.08); }
.qq-me-shop:focus-visible { outline: 3px solid var(--bu-focus-dark); outline-offset: 2px; }

/* Chat: dark navy log with a 모두에게 bar. */
.qq-chatbox { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; padding: 4px; }
.qq-chat-log { flex: 1; min-height: 0; overflow: auto; padding: 6px 10px; border-radius: 8px; background: var(--bu-well2); box-shadow: var(--bu-well-shadow); font: 700 15px/1.6 "NanumSquareRound", sans-serif; color: #e8f4ff; }
.qq-chat-log p { margin: 0; overflow-wrap: anywhere; }
.qq-chat-log b { color: #9fe0ff; }
.qq-chat-log p.me b { color: #ffd84a; }
.qq-chat-hint { color: #ffd84a; }
.qq-chat-form { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.qq-to { flex: none; padding: 5px 11px; border-radius: 14px; background: linear-gradient(#8fd7ff, #2a8ce0); font: 800 14px "NanumSquareRound", sans-serif; color: #fff; text-shadow: 0 1px 0 var(--bu-ink2); }
.qq-chat-form .inp { flex: 1; min-width: 0; padding: 6px 10px; }
.qq-head { position: relative; display: inline-block; flex: none; width: 32px; height: 32px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(#e3f3fe, #a9d4f5); }
/* LPC 얼굴(avatar.js focus 'face', 1배·pixelated): 눈(판 y 147~155)과 턱(~164) 사이가 동그라미 가운데에 오게 판 (128,153)을 가운데로
   (LPC teen 얼굴에는 입 그림이 없다). focus 'face'의 기준점(128,138)은 이마라 얼굴 동그라미에 이마만 보였다. 줄이지 않고(정수 배율) 넘치는 부분만 자른다. */
.qq-head .qp-av-focus { translate: -67px -94px; }
.qq-tag { display: inline-block; margin: 0 4px; padding: 0 6px; border-radius: 6px; font: 800 13px/1.6 "NanumSquareRound", sans-serif; }
.qq-tag.teacher { color: #fff; background: #e8590c; border: 1px solid #a33d05; }
@media (max-width: 1100px) { .qq-lobby { grid-template-columns: minmax(0, 1fr) 250px; } .qq-filter { display: none; } }
/* 1280×720처럼 낮은 화면은 방 카드(최소 약 56px)가 눌리지 않게 아래 줄을 예전 높이로 */
@media (max-height: 740px) { .qq-lobby { grid-template-rows: minmax(0, 1fr) 210px; } }

/* Create-room dialog. */
.qq-create { display: grid; gap: 10px; min-width: min(460px, 80vw); }
.qq-create label { display: grid; gap: 5px; font: 800 17px "NanumSquareRound", sans-serif; color: var(--bu-text-dark); }
.qq-create .hint { font-size: 16px; }
/* 방 만들기 게임 5가지(라운드전·OX·자유·순서·팀): 그림 칸 한 줄(2026-10-22) — 게임마다 옅은 색 원 안 그림(quizquiz.js MODE_ART),
   이름은 테두리 글씨, 설명은 두 줄. 고른 칸은 하늘색 + 금색 테두리 + ✓. 소제목은 큐플레이식 ◉ 금색 점 남색 띠. */
.qq-mode-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; min-width: 0; border: 0; padding: 0; margin: 0; }
.qq-mode-pick legend { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; margin-bottom: 10px; padding: 0 14px; border-radius: 16px;
  background: var(--bu-cap); border: 2px solid var(--bu-cap-line); box-shadow: var(--bu-cap-shadow); font: 17px var(--bu-outline); color: #fff;
  text-shadow: var(--bu-stroke-1-drop2); }
.qq-mode-pick legend::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #4a2600; background: radial-gradient(circle at 35% 30%, #fff6c4, #ffc928 60%, #d89a10); }
.qq-mode { --m: #dbe9ff; --mr: #9cc4f8; position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; padding: 10px 8px; text-align: center;
  border: 2px solid var(--mr); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--mr); cursor: pointer; font-family: "NanumSquareRound", sans-serif; color: var(--bu-text-dark); }
.qq-mode.m-ox { --m: #d9f6ee; --mr: #8fd9cc; } .qq-mode.m-free { --m: #fff1c4; --mr: #f2d27a; } .qq-mode.m-order { --m: #f1e5fd; --mr: #cfa8f2; } .qq-mode.m-team { --m: #ffe2dc; --mr: #f6a597; }
.qq-mode-art { box-sizing: border-box; width: 66px; height: 66px; margin-bottom: 2px; padding: 9px; border-radius: 50%; border: 2px solid var(--mr); background: radial-gradient(circle at 50% 35%, #fff 30%, var(--m) 75%); }
.qq-mode b { font: 19px var(--bu-outline); color: var(--bu-ink); }
.qq-mode small { font: 700 15px/1.4 "NanumSquareRound", sans-serif; color: #4a6aa8; word-break: keep-all; }
.qq-mode:not(:disabled):hover { border-color: var(--bu-cobalt); }
.qq-mode:focus-visible { outline: 3px solid var(--bu-focus); outline-offset: 2px; }
.qq-mode.on { border-color: var(--bu-ink); background: linear-gradient(#f4fcff, #bfe9ff); box-shadow: 0 0 0 3px #ffd84a, 0 3px 0 var(--bu-ink); }
.qq-mode.on .qq-mode-art { border-color: var(--bu-ink); }
.qq-mode:disabled { cursor: default; opacity: .55; filter: grayscale(.7); }
.qq-create-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 닫기·방 만들기 줄은 창 안을 스크롤해도 늘 바닥에 붙어 보인다(2026-10-25 critique P0: OX를 고르면 1366·1536에서 단추가 창 밖으로 밀렸음).
   본문(.mbody) 여백 20px을 음수 여백으로 덮고 같은 종이색을 깔아 내용이 밑으로 지나간다. */
.qq-create-actions { --mbody-pad: 20px; position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; margin: 0 calc(-1 * var(--mbody-pad)) calc(-1 * var(--mbody-pad)); padding: 10px var(--mbody-pad) 16px;
  border-radius: 0 0 9px 9px; background: #f4f9ff; box-shadow: 0 -12px 10px -8px #f4f9ff; }

/* ───────── Stage ───────── */
.qq-stage { display: grid; grid-template-columns: minmax(0, 1fr) 212px; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px 12px; padding: 8px 14px 12px; }
.qq-stage-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(#0000 40%, #12301f99); }
.qq-stage-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; z-index: 2; }
.qq-room-name { font-size: 26px; }
.qq-room-meta { font: 800 13px "NanumSquareRound", sans-serif; color: var(--bu-text); background: #0b1f5ee6; border: 1.5px solid var(--bu-rim2); border-radius: 12px; padding: 3px 11px; }
.qq-board {
  grid-column: 1; grid-row: 2; justify-self: center; position: relative; z-index: 2; width: min(860px, 100%); min-height: 150px; padding: 14px 22px 16px; text-align: center;
  border: 2px solid var(--bu-ink); border-radius: 14px; background: linear-gradient(#f9fcff, #e8f2ff);
  box-shadow: inset 0 0 0 3px var(--bu-rim2), inset 0 0 0 9px var(--bu-cobalt), inset 0 0 0 11px var(--bu-well), 0 4px 0 var(--bu-line), 0 10px 20px #0005;
  color: var(--bu-text-dark); font-family: "NanumSquareRound", sans-serif;
}
.qq-board::before, .qq-board::after { content: ""; position: absolute; top: -14px; width: 14px; height: 18px; border: 2px solid var(--bu-ink); border-radius: 4px; background: linear-gradient(#8fc8ff, #2f61cf); }
.qq-board::before { left: 18%; } .qq-board::after { right: 18%; }
.qq-board-kicker { margin: 4px 0 6px; font: 800 14px "NanumSquareRound", sans-serif; color: var(--bu-cobalt2); }
.qq-board-kicker span { margin-left: 6px; color: #4a6290; }
.qq-board h3 { margin: 0 0 8px; font: 800 22px/1.4 "NanumSquareRound", sans-serif; color: var(--bu-text-dark); }
.qq-board .qq-question { font-size: 24px; }
.qq-board-note, .qq-board-wait { margin: 4px 0 10px; font: 700 14px "NanumSquareRound", sans-serif; color: #3a5490; }
.qq-board-wait { animation: qq-blink 2.4s steps(3, end) infinite; }
.qq-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 6px; text-align: left; }
.qq-choice { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; border: 2px solid #9fcaf0; border-radius: 10px; background: #fff; box-shadow: 0 2px 0 #b8d4f2; cursor: pointer; font: 800 17px "NanumSquareRound", sans-serif; color: var(--bu-text-dark); text-align: left; }
.qq-choice:disabled { cursor: default; }
.qq-choice i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bu-ink); background: radial-gradient(circle at 35% 30%, #bfe6ff, #3d7be6 60%, var(--bu-cobalt2)); color: #fff; font: 400 17px "QuizLatin", sans-serif; font-weight: 700; font-style: normal; text-shadow: 0 1px 0 var(--bu-ink); }
.qq-choice.picked { border-color: #c46a00; background: #fff1c9; box-shadow: 0 0 0 2px #ffb340; }
.qq-choice.answer { border-color: #1f8a43; background: #dff8e6; box-shadow: 0 0 0 3px #3ccf6e; animation: qq-pop .5s steps(3, end); }
.qq-choice.dim { opacity: .5; }
.qq-board-result { margin: 10px 0 0; font: 800 18px "NanumSquareRound", sans-serif; color: var(--bu-text-dark); }
.qq-board-result small { margin-left: 8px; font-size: 13px; color: #3a5490; }
@keyframes qq-pop { 0% { transform: scale(.94); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
.qq-board .btn.big { margin-top: 4px; min-width: 200px; font-size: 22px; }

.qq-clock[hidden], .qq-timebar[hidden] { display: none; }
.qq-clock { grid-column: 1; grid-row: 2; justify-self: end; align-self: start; position: relative; z-index: 3; display: grid; place-items: center; width: 74px; margin: -6px -4px 0 0; }
.qq-clock svg { width: 74px; height: 74px; filter: drop-shadow(0 3px 0 #2c1a08aa); }
.qq-clock b { position: absolute; top: 31px; font: 400 21px "QuizLatin", sans-serif; font-weight: 700; color: #3b2a1a; }
.qq-hurry { position: absolute; top: -8px; right: 74px; white-space: nowrap; padding: 3px 10px; border: 2px solid #6b1d12; border-radius: 12px; background: #fff; font: 800 15px "NanumSquareRound", sans-serif; color: #c23e28; opacity: 0; }
.qq-stage.hurry .qq-clock svg { animation: qq-ring .3s steps(2, end) infinite; }
.qq-stage.hurry .qq-hurry { opacity: 1; animation: qq-pop .6s steps(3, end) infinite; }
@keyframes qq-ring { 0% { transform: rotate(-9deg); } 100% { transform: rotate(9deg); } }
.qq-timebar { grid-column: 1; grid-row: 2; align-self: end; justify-self: center; width: min(640px, 80%); height: 14px; margin-bottom: -20px; border: 2px solid var(--bu-line); border-radius: 9px; background: var(--bu-line); overflow: hidden; z-index: 3; }
.qq-timebar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(#bff0ff, #4fb8f6); transition: width .45s linear; }
.qq-stage.hurry .qq-timebar i { background: linear-gradient(#ffb59f, #e0553c); }

/* 참가자 칸: 남색 유리 캡슐과 이름 알약, 열 칸씩 */
.qq-booths { grid-column: 1; grid-row: 3; align-self: stretch; align-content: end; container-type: size; display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); gap: 4px 6px; z-index: 1; min-height: 0; }
.qq-booth { position: relative; display: grid; justify-items: center; align-content: end; min-width: 0; height: min(250px, calc((100cqh - 4px * (var(--rows, 1) - 1)) / var(--rows, 1))); min-height: 108px; padding: 18px 2px 0; }
.qq-booth::before { content: ""; position: absolute; inset: 6px 6% 22px; border: 2px solid var(--bu-line); border-bottom: 0; border-radius: 40px 40px 6px 6px; background: linear-gradient(#3d74e0b3, #0c2160e6); box-shadow: inset 0 0 0 2px var(--bu-rim2), inset 0 5px 0 4px #ffffff1f; z-index: -1; }
.qq-booth::after { content: ""; position: absolute; top: 2px; left: 50%; width: 42%; height: 11px; translate: -50% 0; border: 2px solid var(--bu-line); border-radius: 7px; background: linear-gradient(#d6f1ff, #4fa3f0); box-shadow: inset 0 1px 0 #fff; z-index: 0; }
.qq-booth .qq-avatar { height: clamp(58px, calc(min(250px, 100cqh / var(--rows, 1)) - 64px), 160px); display: grid; place-items: end center; transform-origin: 50% 100%; }
.qq-plate { position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; max-width: 110px; margin-top: -2px; padding: 2px 4px 3px; border: 1.5px solid var(--bu-line); border-radius: 9px; background: linear-gradient(#18348a, #0b1f5e); box-shadow: inset 0 1px 0 #3a64c8, 0 2px 0 var(--bu-line); }
.qq-plate b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 12px "NanumSquareRound", sans-serif; color: #fff; }
.qq-plate small { font: 800 11px "NanumSquareRound", sans-serif; color: var(--bu-gold); }
.qq-booth.me .qq-plate { background: linear-gradient(#ffb340, #e57c0a); border-color: #6b3400; box-shadow: inset 0 1px 0 #ffe1a3, 0 2px 0 #6b3400; }
.qq-booth.me .qq-plate b { text-shadow: 0 1px 0 #6b3400; } .qq-booth.me .qq-plate small { color: #fff; }
.qq-booth.host .qq-plate b::before { content: "♛ "; color: var(--bu-gold); }
.qq-booth.empty::before { background: linear-gradient(#3d74e055, #0c216088); }
.qq-booth.empty .qq-plate { opacity: .55; }
.qq-booth.empty .qq-plate b { font-weight: 700; color: #9fb7e6; }
.qq-mark { position: absolute; top: 2px; left: 50%; translate: -50% 0; z-index: 3; width: 34px; height: 34px; }
.qq-mark svg { width: 100%; height: 100%; animation: qq-pop .45s steps(3, end); }
.qq-coin { display: grid; place-items: center; width: 30px; height: 30px; margin: 2px auto; border-radius: 50%; border: 2px solid #8a5a10; background: radial-gradient(circle at 35% 30%, #fff3b0, #f2b93b 60%, #d8901e); font: 400 19px "QuizLatin", sans-serif; font-weight: 700; font-style: normal; color: #fff; text-shadow: 0 1px 0 #6b420a; animation: qq-coin 1.2s steps(4, end) infinite; }
@keyframes qq-coin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.35); } }
.qq-booth[data-state="right"] .qq-avatar { animation: qq-hop .9s steps(4, end) 2; }
@keyframes qq-hop { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-14px) scaleY(1.04); } 50% { transform: translateY(0) scaleY(.94); } 75% { transform: translateY(-6px); } }
.qq-booth[data-state="wrong"] .qq-avatar { animation: qq-slump 1.4s steps(4, end) forwards; }
@keyframes qq-slump { 0% { transform: none; } 30% { transform: translateY(3px) rotate(-5deg) scaleY(.95); } 100% { transform: translateY(4px) rotate(-4deg) scaleY(.93); filter: saturate(.75) brightness(.9); } }

@keyframes qq-shower { from { transform: translateY(0) rotate(0); } to { transform: translateY(95px) rotate(220deg); opacity: 0; } }
.qq-say { position: absolute; bottom: calc(100% - 22px); left: 50%; translate: -50% 0; z-index: 4; max-width: 140px; padding: 3px 8px; border: 2px solid var(--bu-ink); border-radius: 10px; background: #fff; font: 700 12px/1.35 "NanumSquareRound", sans-serif; color: var(--bu-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; }
.qq-say.on { opacity: 1; animation: qq-pop .4s steps(3, end); }

.qq-rank { grid-column: 2; grid-row: 2 / 4; align-self: stretch; z-index: 2; }
.qq-rank ol { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 4px 8px; overflow: auto; border-radius: 9px; background: linear-gradient(var(--bu-well), var(--bu-well2)); border: 2px solid var(--bu-line); box-shadow: inset 0 2px 4px #04103a; }
.qq-rank li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; padding: 5px 4px; border-bottom: 1px dashed #ffffff26; font: 800 14px "NanumSquareRound", sans-serif; color: var(--bu-text); }
.qq-rank li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2f80dd; border: 1.5px solid var(--bu-line); color: #fff; font-style: normal; font: 400 14px "QuizLatin", sans-serif; font-weight: 700; }
.qq-rank li:nth-child(1) i { background: #ffc928; color: #4a2600; }
.qq-rank li.me { background: #ffffff24; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #ffb340; }
.qq-rank li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq-rank li span { color: var(--bu-gold); }

/* 답 단추: 코발트 판 위 둥근 파란 단추 1~4(큐플레이 F1~F4) */
.qq-console { grid-column: 1; grid-row: 4; justify-self: center; display: flex; gap: 14px; padding: 8px 18px 10px; z-index: 2; border: 2px solid var(--bu-ink); border-radius: 16px; background: linear-gradient(var(--bu-cobalt), var(--bu-cobalt2)); box-shadow: inset 0 0 0 2px var(--bu-rim2), inset 0 3px 0 2px var(--bu-rim), 0 3px 0 var(--bu-line); }
.qq-key { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--bu-ink); background: radial-gradient(circle at 35% 28%, #e0f4ff, #5fb0f6 50%, #2160c8); box-shadow: inset 0 2px 0 #fff, inset 0 -4px 0 #173c94, 0 3px 0 var(--bu-line); cursor: pointer; }
.qq-key b { font: 400 30px/1 "QuizLatin", sans-serif; font-weight: 700; color: #fff; text-shadow: 1px 0 var(--bu-ink), -1px 0 var(--bu-ink), 0 1px var(--bu-ink), 0 -1px var(--bu-ink), 0 3px 0 var(--bu-ink); }
.qq-key::after { content: attr(aria-label); position: absolute; bottom: -2px; right: -6px; display: none; }
.qq-key:not(:disabled):active { translate: 0 2px; box-shadow: inset 0 2px 3px #0005; }
.qq-key.picked { border-color: #6b420a; background: radial-gradient(circle at 35% 28%, #fff3b0, #f2b93b 52%, #d8901e); box-shadow: inset 0 2px 0 #fffbe6, inset 0 -4px 0 #8a5a10, 0 3px 0 #4a2e06, 0 0 0 3px #fff3b0; }
.qq-key.picked b { text-shadow: 1px 0 #6b420a, -1px 0 #6b420a, 0 1px #6b420a, 0 -1px #6b420a, 0 3px 0 #6b420a; }
.qq-key:disabled { filter: saturate(.35) brightness(.92); cursor: default; }
.qq-key:focus-visible { outline: 3px solid var(--bu-focus-dark); outline-offset: 3px; }

.qq-chat-mini { grid-column: 2; grid-row: 4; z-index: 2; display: flex; flex-direction: column; gap: 4px; align-self: end; max-height: 150px; padding: 6px; border: 2px solid var(--bu-ink); border-radius: 12px; background: linear-gradient(var(--bu-cobalt), var(--bu-cobalt2)); box-shadow: inset 0 0 0 2px var(--bu-rim2), 0 3px 0 var(--bu-line); }
.qq-chat-mini .qq-chat-log { max-height: 84px; padding: 2px 4px; font-size: 12px; }
.qq-chat-mini form { display: flex; gap: 4px; }
.qq-chat-mini .inp { flex: 1; min-width: 0; padding: 5px 7px; font-size: 13px; }
.qq-chat-mini .btn { padding: 4px 8px; font-size: 12px; }

/* One big moment per beat: title splash and the personal O/X stamp. */
.qq-splash, .qq-stamp { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 20; opacity: 0; }
.qq-splash .qp-candy { font-size: clamp(54px, 8vw, 104px); }
.qq-splash.on { animation: qq-splash 2.4s steps(8, end) forwards; }
@keyframes qq-splash { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 15% { opacity: 1; transform: scale(1.12) rotate(2deg); } 25% { transform: scale(1) rotate(0); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.qq-stamp svg { width: min(240px, 32vh); height: auto; filter: drop-shadow(0 6px 0 #0005); }
.qq-stamp.on { animation: qq-stamp 1.3s steps(6, end) forwards; }
@keyframes qq-stamp { 0% { opacity: 0; transform: scale(1.8); } 20% { opacity: 1; transform: scale(.92); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

.qq-podium { display: flex; justify-content: center; align-items: end; gap: 26px; }
.qq-podium > div { display: grid; justify-items: center; gap: 2px; font-family: "NanumSquareRound", sans-serif; }
/* LPC 아바타(span.qp-av)는 1·2·3등 모두 1배(정수 배율, 줄이거나 키우지 않음). 예전 SVG처럼 1등을 크게 하지 않고 1등 줄을 한 단 높여 단상처럼 보이게. */
.qq-podium-1 { margin-bottom: 18px; }
.qq-podium b { font: 400 16px "QuizDisplay", sans-serif; color: #3b2a1a; }
.qq-podium small { font: 800 13px "NanumSquareRound", sans-serif; color: #8a5a10; }
.qq-podium-1 { order: 2; } .qq-podium-2 { order: 1; } .qq-podium-3 { order: 3; }

@media (max-width: 1100px) {
  .qq-lobby { grid-template-columns: minmax(0, 1fr) 220px; }
  
  .qq-stage { grid-template-columns: minmax(0, 1fr) 180px; }
  .qq-key { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .qq-ambient, .qq-fly, .qq-fall, .qq-ray { animation: none !important; }
  .qq-fall { display: none; }
  .qq-booth .qq-avatar, .qq-coin, .qq-dot, .qq-board-wait, .qq-room-state { animation: none !important; }
  .qq-splash.on, .qq-stamp.on { animation-duration: .01s; }
}

/* QUIZQUIZ entry in the top bar: a sky candy Q on the cream plate. */
html body .icb.qq-entry .qp-candy { font-size: 27px; line-height: 1; }
html body .icb.qq-entry .qp-candy .ct-w { padding: 0 .06em .08em; }
.qq-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 800 18px "NanumSquareRound", sans-serif; color: #fff7de; }

/* 서바이벌 OX 경기장·슬라임은 ox-survival.css(2026-10-22). */

/* Richer QPlay detail: gloss on cards, icons in buttons, channel tag, mascot banner. */
.qq-room:not(.empty, .qq-invite)::before { content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 34%; border-radius: 6px 6px 40% 40% / 6px 6px 12px 12px; background: linear-gradient(#ffffff70, #fff0); z-index: 0; pointer-events: none; }
.qq-room:not(.empty, .qq-make-slot, .qq-invite, .teacher) { background: linear-gradient(#7be08a 0%, #3fb35a 48%, #2e9a48 52%, #23853c 100%); border-color: #0f4a1e; box-shadow: inset 0 1px 0 #d6ffdc, 0 2px 0 #0b1a48, 0 0 0 1px #9df0a8 inset; }
.qq-room.waiting:not(.empty) { animation: qq-card-glow 2.4s steps(3, end) infinite; }
@keyframes qq-card-glow { 0%, 70% { filter: none; } 85% { filter: brightness(1.12); } }
.qq-bico { width: 22px; height: 22px; margin-right: 6px; vertical-align: -5px; filter: drop-shadow(0 1px 0 #0b1a48); }
.qq-rooms { padding-top: 22px; }
.qq-channel { position: absolute; left: 14px; top: -13px; z-index: 2; padding: 3px 14px; border: 2px solid #0e2a72; border-radius: 14px; background: linear-gradient(#ffffff, #cfe6fb); font: 800 14px "NanumSquareRound", sans-serif; color: #1b3f9a; box-shadow: 0 2px 0 #0b1a48; }
.qq-channel::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #3fd06a; box-shadow: 0 0 0 1px #0f4a1e, 0 0 6px #3fd06a; vertical-align: 0; /* 깜빡임은 실제 상태와 무관해 뺌(2026-10-25 사용자 "정적으로 바꾸자") */ }
.qq-banner { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 64px; margin-top: 6px; padding: 4px 8px; border: 2px solid #0e2a72; border-radius: 8px;
  background: radial-gradient(circle at 20% 120%, #ffd84a66, #0000 50%), linear-gradient(100deg, #ff8a3d, #ffb347 40%, #2a8ce0 60%, #1f5fc0); box-shadow: inset 0 1px 0 #ffe3b0, 0 2px 0 #0b1a48; overflow: hidden; }
.qq-banner b { align-self: center; font-size: 22px; }
@keyframes lg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .qq-room.waiting { animation: none !important; } }

/* My card stays lively: a soft spotlight sweeps the backdrop and every few
   seconds the avatar gives a little hop or a happy wiggle (on top of its own
   breathing, blinking and pet animations). */
.qq-me-pic { position: relative; isolation: isolate; }
.qq-me-pic::before { content: ""; position: absolute; inset: -40% -60%; z-index: -1; background: conic-gradient(from 0deg, #fff0 0 20%, #ffffff8c 25%, #fff0 30% 70%, #ffffff66 75%, #fff0 80%); animation: qq-spot 9s linear infinite; }
.qq-me-pic::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 2px; height: 16px; z-index: -1; border-radius: 50%; background: radial-gradient(#bfe8ff, #4f8fe0 60%, #1b3f9e); border: 1.5px solid var(--bu-line); animation: qq-shadow 7s steps(4, end) infinite; }
@keyframes qq-spot { to { transform: rotate(360deg); } }
@keyframes qq-shadow { 0%, 80%, 100% { transform: scaleX(1); opacity: 1; } 84% { transform: scaleX(.75); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .qq-me-pic::before, .qq-me-pic::after { animation: none !important; } }

/* 파란 UI U3 (2026-10-21): 내 정보 숫자가 창 안에 들도록 좁은 칸 정리, 채팅 입력도 남색 우물, 방 만들기 게임 고르기 칸을 파랑으로. */
.qq-mecard { grid-template-columns: 112px minmax(0, 1fr); }
.qq-me-info dl { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.qq-me-info :is(dt, dd) { padding: 5px 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qq-me-info dd.qq-me-gold { font-size: 15px; }
.qq-chat-form .inp { height: 34px; border-radius: 17px; background: #071648; border: 1.5px solid #3d6fd0; color: var(--bu-text); font: 700 15px "NanumSquareRound", sans-serif; box-shadow: inset 0 1px 3px #000a; }
.qq-chat-form .inp::placeholder { color: #7f9fd8; }
.qq-chat-form .inp:focus-visible { outline: 3px solid var(--bu-focus-dark); outline-offset: 1px; }
.qq-chat-form .qq-send { height: 34px; min-height: 0; padding: 0 15px; border-radius: 17px; border: 2px solid var(--bu-ink); color: #fff;
  background: linear-gradient(#bfe8ff 0%, #7cd0ff 35%, #1f6fe0 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(0,0,0,.22), 0 2px 0 #051a50;
  font: 400 15px "QuizOutline", sans-serif; text-shadow: 0 1px 0 var(--bu-ink), 1px 0 0 var(--bu-ink), -1px 0 0 var(--bu-ink), 0 -1px 0 var(--bu-ink); }
.qq-mode.on::after { content: "✓"; position: absolute; right: -7px; top: -7px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: #1f6fe0; color: #fff; font: 900 13px "NanumSquareRound", sans-serif; border: 2px solid var(--bu-ink); }

/* 서바이벌 OX(맵 + 제목·묶음 + 문제 수·시간)까지 1366×768 한 화면에 들어가게(2026-10-25): 덮개 여백 12px, 창 높이는 화면에 맞추고 제목·묶음은 한 줄 */
#modal:has(.qq-create) { padding: 12px 20px; }
#modal .mbox:has(.qq-create) { width: min(780px, 94vw); max-height: calc(100vh - 24px); }
/* 창 아래 여백 4px은 본문 쪽에 둔다(blue-ui.css의 .mbox.pnl padding 4px보다 구체적인 선택자로): sticky 단추 줄이 창 안쪽 끝까지 내려가
   그 밑으로 글이 비치지 않게(125% 확대 1093×614에서 4px 틈이 보였음) */
html body #modal .mbox.pnl:has(.qq-create) { padding-bottom: 0; }
html body #modal .mbox.pnl:has(.qq-create) > .mbody { margin-bottom: 4px; }
/* 1366×768: 글씨를 키운 뒤 OX 창이 6px 넘쳐 칸 사이 틈만 좁힘 */
@media (max-height: 800px) { .qq-create { gap: 8px; } }
/* 1280×720처럼 낮은 화면: 게임 그림·맵 그림을 조금 줄여 닫기·방 만들기 단추까지 보이게 */
@media (max-height: 740px) { .qq-mode-art { width: 56px; height: 56px; padding: 7px; } .qq-create .ox-thumb { height: 46px; } .qq-mode { padding: 8px 6px; } .qq-create { gap: 8px; }
  .qq-mode b { font-size: 17px; } .qq-mode small { font-size: 13px; } .qq-create label { font-size: 15px; } .qq-create .hint { font-size: 14px; } .qq-create .qq-ox-map small { font-size: 13px; } .qq-create { gap: 7px; } }
.qq-create { min-width: 0; }
.qq-qq-only { display: grid; gap: 12px; }
.qq-qq-only[hidden] { display: none; }
.qq-room.mode-fq .qq-room-n { max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 로비 채팅(2026-10-21 사용자 "로비 채팅창에 어울리는 디자인도 넣어줘 허전하지 않게"): 남색 머리 띠(말풍선 아이콘·모두/반 탭·접속 인원),
   별 무늬 우물에 얼굴·이름표·글 줄(말풍선·병아리는 10-21 사용자 요청으로 뺌), 노란 알림 알약, 빠른 말 알약 줄. */
.qq-chatbox { gap: 6px; }
.qq-chat-head { flex: none; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 6px; border-radius: 15px;
  background: var(--bu-cap); border: 2px solid var(--bu-cap-line); box-shadow: var(--bu-cap-shadow); }
.qq-chat-ico { width: 22px; height: 22px; flex: none; }
.qq-chat-head h2 { margin: 0 6px 0 0; font-size: 17px; font-weight: normal; }
.qq-chat-online { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 800 14px "NanumSquareRound", sans-serif; color: #fff; text-shadow: var(--bu-stroke-1), 1px 1px 0 var(--bu-ink), -1px 1px 0 var(--bu-ink), 1px -1px 0 var(--bu-ink), -1px -1px 0 var(--bu-ink); }
.qq-chat-online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3fd06a; box-shadow: 0 0 0 1px #0f4a1e, 0 0 6px #3fd06a; }
.qq-chat-wrap { position: relative; flex: 1; min-height: 60px; }
.qq-chat-wrap .qq-chat-log { position: absolute; inset: 0; display: block; overflow-y: auto; padding: 8px 10px; border: 2px solid var(--bu-line);
  background:
    radial-gradient(circle at 12% 20%, #ffffff14 0 1.5px, #0000 2.5px), radial-gradient(circle at 62% 70%, #ffffff12 0 1.5px, #0000 2.5px),
    radial-gradient(circle at 88% 30%, #7fd6ff22 0 2px, #0000 3px), radial-gradient(circle at 35% 85%, #ffe36b18 0 1.5px, #0000 2.5px),
    linear-gradient(var(--bu-well), var(--bu-well2));
  background-size: 90px 70px, 120px 90px, 150px 110px, 110px 80px, auto; }
.qq-chat-log p.qq-chat-hint { display: flex; align-items: center; gap: 6px; margin: 1px 0 3px; color: #ffe9a0; font-size: 14px; }
.qq-chat-log p.qq-chat-hint span { flex: none; padding: 0 7px; border-radius: 8px; background: linear-gradient(#ffd84a, #e8a020); color: #4a2600; font: 800 13px/1.6 "NanumSquareRound", sans-serif; }
/* 채팅 줄: 이름표 + 글(얼굴 그림은 2026-10-25 사용자 요청으로 뺌) */
.qq-chat-log p.qq-chat-line { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.qq-chat-log p.qq-chat-line b { flex: none; padding: 0 8px; border-radius: 9px; background: #0a1a52; color: #9fe0ff; font: 800 14px/1.6 "NanumSquareRound", sans-serif; }
.qq-chat-log p.qq-chat-line.me b { color: #ffd84a; }
.qq-chat-text { min-width: 0; color: var(--bu-text); font: 700 15px/1.5 "NanumSquareRound", sans-serif; overflow-wrap: anywhere; }
.qq-chat-line.me .qq-chat-text { color: #fff3c4; }
  background: linear-gradient(#ffffff, #cfe6fb); color: var(--bu-text-dark); font: 800 13px "NanumSquareRound", sans-serif; box-shadow: 0 2px 0 #051a50; }
.qq-chat-form { margin-top: 0; }

/* 우물 무늬(C12, 2026-10-25): 큰 우물(방 목록 뒤·채팅·대기실)에 옅은 Q 고리 하나(흰 9%). 점처럼 잘게 흩지 않고 크게 둔다. 원작 무늬는 쓰지 않는다. */
.qq-lobby { --qq-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-linecap='round'%3E%3Ccircle cx='46' cy='46' r='34' stroke-width='11'/%3E%3Ccircle cx='46' cy='46' r='15' stroke-width='7'/%3E%3Cpath d='M66 66 L86 86' stroke-width='12'/%3E%3C/g%3E%3C/svg%3E"); }
.qq-room-grid { background: var(--qq-motif) no-repeat right 12px bottom 8px / 300px 300px; }
.qq-chat-wrap .qq-chat-log { background: var(--qq-motif) no-repeat right -30px bottom -60px / 260px 260px, var(--bu-well2); }
/* 모달이 열려 있거나 탭이 숨겨지면(html.qp-hidden, index.html visibilitychange) 로비 장식 애니메이션을 멈춘다(audit 2026-10-25: 무한 애니메이션 35개가 모달 아래에서도 돌았음). */
body:has(#modal.on) :is(.qq-fly, .qq-fall, .qq-ray, .qq-room.waiting, .qq-me-pic::before, .qq-me-pic::after),
html.qp-hidden :is(.qq-fly, .qq-fall, .qq-ray, .qq-room.waiting, .qq-me-pic::before, .qq-me-pic::after) { animation-play-state: paused; }

/* 채팅 관리 안내(약속 D, 2026-10-26): 2초 안에 또 보내거나 같은 말을 보내면 입력 칸 아래에 작은 한 줄(토스트 말고), 2초쯤 뒤 사라진다. */
.qq-chat-form, .ox-chat form { position: relative; }
.qq-chat-note { position: absolute; left: 92px; top: calc(100% - 3px); z-index: 3; padding: 1px 9px 2px; border: 1.5px solid var(--bu-line); border-radius: 9px; background: var(--bu-well2);
  font: 800 12px/1.3 "NanumSquareRound", sans-serif; color: var(--bu-gold); white-space: nowrap; pointer-events: none; }
.qq-chat-note[hidden] { display: none; }