/* 퀴즈나라 — responsive avatar rooms and classic blue game framing.
   Kept separate from game logic; no backdrop filters or costly moving shadows. */
@font-face { font-family: "NanumSquareRound"; src: url("./assets/fonts/NanumSquareRoundR.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NanumSquareRound"; src: url("./assets/fonts/NanumSquareRoundB.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "NanumSquareRound"; src: url("./assets/fonts/NanumSquareRoundEB.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  --qp-ink: #3e3654;
  --qp-muted: #7b718b;
  --qp-purple: #8162c5;
  --qp-purple-dark: #6344a6;
  --qp-lilac: #f0eafa;
  --qp-cream: #fffaf1;
  --qp-paper: #fffdf8;
  --qp-line: #e0d7eb;
  --qp-mint: #e0f3e9;
  --qp-green: #338575;
  --qp-pink: #f8ddea;
  --qp-rose: #b64e7d;
  --qp-gold: #f1c867;
  --qp-shadow: 0 4px 0 #d6cde5, 0 10px 24px #6350790a;
  --qp-top-height: 60px;
}
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--qp-ink);
  font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  background: radial-gradient(ellipse at 12% 4%, #eadff8 0, transparent 46%),
    radial-gradient(ellipse at 94% 92%, #e0f2e6 0, transparent 38%), #faf5ec;
  font-size: 14px;
  letter-spacing: -.02em;
}
button, input, textarea, select { color: var(--qp-ink); }
button { touch-action: manipulation; }
button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #9376cb; outline-offset: 3px;
}
input, textarea { user-select: text; }
input::placeholder, textarea::placeholder { color: #9b91a7; }
button:disabled { cursor: default; }
::selection { background: #e4d6f9; color: #493965; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cbbfdf; border-width: 2px; }
#deco i { background: #fffdf6; border: 1px solid #eee5f1; opacity: .55; }
#deco b { color: #c5addf; }
#stage { isolation: isolate; }
.pnl {
  background: var(--qp-paper); border: 1.5px solid var(--qp-line);
  border-radius: 22px; box-shadow: var(--qp-shadow); min-width: 0; min-height: 0;
}
.pnl-h {
  background: #f3edf9; color: #655182; font-size: 14px; padding: 12px 17px;
  border-radius: 20px 20px 0 0; border-bottom: 1px solid #e3d8ef;
  text-shadow: none; box-shadow: none; gap: 9px;
}
.pnl-h::before {
  width: 8px; height: 8px; background: #b8a0d7; box-shadow: none;
}
.btn, .btn.sm, .btn.big {
  border: 1px solid #6e52ac; background: #8869c9; color: #fff;
  text-shadow: none; box-shadow: 0 3px 0 #644b9e;
  border-radius: 13px; padding: 10px 17px; font-weight: 800;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.btn:hover { background: #795bbc; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #644b9e; }
.btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 10px; }
.btn.big { padding: 12px 23px; font-size: 18px; border-radius: 15px; }
.btn.y, .btn.sm.y {
  background: #f3ce7b; color: #755522; border-color: #d7b566;
  box-shadow: 0 3px 0 #c9a45c;
}
.btn.y:hover { background: #f0c568; }
.btn.p, .btn.sm.p {
  background: #eba4c3; color: #783553; border-color: #d88bb0;
  box-shadow: 0 3px 0 #cb7d9f;
}
.btn.p:hover { background: #e996b9; }
.btn.g, .btn.sm.g {
  background: #75bca5; color: #fff; border-color: #5fa88f;
  box-shadow: 0 3px 0 #4f947f;
}
.btn.g:hover { background: #65ad97; }
.btn.gray, .btn.sm.gray {
  background: #f4f0f8; color: #76688d; border-color: #d9cee6;
  box-shadow: 0 3px 0 #cfc1df;
}
.btn.gray:hover { background: #ede6f5; }
.btn.y:active, .btn.p:active, .btn.g:active, .btn.gray:active { box-shadow: 0 1px 0 #c0adc6; }
.btn[disabled] { opacity: .48; }
.inp {
  color: #554368; background: #fff; border: 1.5px solid #d9cce6;
  border-radius: 12px; padding: 11px 13px; outline: none; min-width: 0;
}
.inp:focus { border-color: #9b7dcf; background: #fff; box-shadow: 0 0 0 3px #ede4fa; }
.tag { padding: 4px 10px; border-radius: 9px; }
.hint { color: var(--qp-muted); font-size: 15px; line-height: 1.6; }
.row, .col { min-width: 0; }
.f1 { min-width: 0; min-height: 0; }
.scroll { overscroll-behavior: contain; }

/* A cream navigation bar keeps the character and play area in focus. */
.top {
  height: var(--qp-top-height); padding: 0 22px; gap: 10px;
  background: #fffaf5; border-bottom: 1px solid #e6dcec; color: #5a4578;
  box-shadow: 0 3px 0 #e9e0ed70;
}
.top .nm { color: #7755ae; font-size: 19px; letter-spacing: -.055em; text-shadow: none; }
.icb {
  width: 34px; height: 34px; border: 1px solid #e1d6ed; color: #7b628f;
  background: #f4edf9; box-shadow: 0 2px 0 #ddd0e9; font-size: 16px;
}
.icb.y { background: #fff0ce; color: #805a26; border-color: #eddbaf; }
.icb:active { box-shadow: 0 1px 0 #d3c4e3; }
.gold {
  background: #fff3d7; border: 1px solid #edd8a6; color: #9b763b;
  border-radius: 12px; gap: 6px; padding: 6px 12px 6px 8px; font-size: 12px;
}
.gold b { color: #806031; font-size: 16px; }
.coin { background: #f5d478; border-color: #d1ae53; box-shadow: inset 0 0 0 3px #ffe8a8; }

/* Login: soft picture-book sky, two large characters and a paper invitation. */
#login {
  min-height: 100%; height: 100%; width: 100%; padding: 20px;
  background: radial-gradient(ellipse at 50% 43%, #fffdf8 0%, #fffaf4 28%, transparent 69%),
    radial-gradient(ellipse at 10% 100%, #cbeadd 0, transparent 45%),
    radial-gradient(ellipse at 95% 12%, #e4d7f8 0, transparent 42%), #f8efee;
}
#login::before {
  content: ''; position: absolute; left: -10%; right: -10%; height: 30%; bottom: -12%;
  border-radius: 50% 50% 0 0; background: #dfeedd; border-top: 5px solid #eff8e9;
  pointer-events: none;
}
.lgSky .bub {
  background: radial-gradient(circle at 32% 26%, #ffffffab 0 17%, transparent 18%),
    linear-gradient(145deg, var(--b2, #e6dbf4), var(--b1, #bcafe0));
  border: 2px solid #ffffff8c; box-shadow: inset 0 -7px 0 #ffffff21, 0 5px 0 #c6b5db25;
  opacity: .55;
}

.lgMid { width: min(430px, 100%); position: relative; }
.lgSup { color: #a183b4; font-size: 13px; font-style: normal; letter-spacing: .14em; text-shadow: none; margin-bottom: 12px; }
.logo {
  color: #9a73c9; font-size: 58px; letter-spacing: -.055em; margin: 0 0 14px;
  text-shadow: 0 2px 0 #fff, 0 4px 0 #d7c0eb; line-height: 1.1;
}
.logo small { font-size: 12px; color: #a594b0; text-shadow: none; letter-spacing: .12em; margin-top: 12px; }
.lgPanel {
  margin-top: 14px; padding: 19px 24px 17px; border-radius: 26px;
  background: #fffdf8; border: 2px solid #eadfee; box-shadow: 0 6px 0 #e0d3e9, 0 18px 32px #6b49760a;
}
.lgTitle { color: #9b80b5; text-shadow: none; font-size: 12px; letter-spacing: .28em; margin-bottom: 14px; }
.lgForm { grid-template-columns: 66px minmax(0, 1fr) 76px; gap: 9px 8px; }
.lgForm label, .lgSex label { color: #8e7b9c; text-shadow: none; font-size: 12px; font-weight: 800; text-align: right; }
.lgForm .inp { padding: 10px 11px; font-size: 13px; }
.lgGoBtn {
  background: #a285d2; border: 1px solid #8f73be; color: #fff;
  font-size: 20px; font-style: normal; border-radius: 14px; box-shadow: 0 3px 0 #7e63aa;
}
.lgGoBtn:active { box-shadow: 0 1px 0 #7e63aa; }
.lgDots { border: 1.5px solid #ddd1e8; height: 40px; border-radius: 12px; gap: 10px; }
.lgDots i { width: 12px; height: 12px; background: #f0eaf6; border: 1px solid #e1d8eb; }
.lgDots i.f { background: #a58ac9; border-color: #8e71ba; }

.lgWide {
  background: #eddcf8; border: 1px solid #ddc8ed; color: #806099;
  font-size: 13px; text-shadow: none; box-shadow: 0 3px 0 #d6bee7;
  padding: 11px 8px; margin-top: 12px; border-radius: 13px;
}
.lgWide.ex { background: #f4f2ee; color: #a09691; border-color: #e8e1da; box-shadow: 0 2px 0 #e4dcd4; font-size: 12px; margin-top: 9px; }
.lgMsg { color: #927e9d; min-height: 18px; margin-top: 11px; }
.lgMsg b { color: #705583; }
.lgBar { color: #a68d9f; background: #fff8f1; padding: 6px 13px; font-size: 10px; margin-top: 17px; }
.lgSex { grid-template-columns: 66px minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }

/* Illustrated login hero hooks, used when the page supplies a scene image. */

.tabs { gap: 5px; padding: 12px 12px 10px; border-bottom: 1px solid #e5dcef; background: #f8f4fc; flex-shrink: 0; }
.tab { background: #eee6f5; color: #816d93; border: 1px solid #e4d8ef; border-radius: 10px; padding: 7px 10px; font-size: 11px; box-shadow: none; }
.tab.on { background: #9e80ce; color: #fff; border-color: #9371c4; box-shadow: 0 2px 0 #8263b5; }

/* Quiz stage: a warm lavender TV studio and visible social character seats. */
#prWrap, #lvWrap, #fWrap { top: var(--qp-top-height) !important; }

.choices { gap: 11px; }
.ch { color: #86689e; background: #fff; border: 1.5px solid #d9c8e6; border-radius: 15px; box-shadow: 0 3px 0 #d6c5e4; padding: 14px; font-size: 18px; }
.ch .n { background: #a990c9; width: 29px; height: 29px; font-size: 14px; }
.ch.pick { background: #fff4db; border-color: #e5c783; box-shadow: 0 3px 0 #dac17f; }
.ch.ok { background: #edf7eb; border-color: #a9c8a6; box-shadow: 0 3px 0 #96b690; }
.ch.ok .n { background: #83ad7a; }
.ch.no { background: #fbe8e9; border-color: #dab0b5; box-shadow: 0 3px 0 #cc9b9e; }
.ch.no .n { background: #c28d97; }

 
.studio { background: radial-gradient(ellipse at 50% 10%, #f4ebfc 0, transparent 70%), #e8ddee; }

.rank { background: #fff; border: 1px solid #e7dfee; border-radius: 12px; padding: 7px 8px; }
.rank .no { background: #eee6f6; color: #9c80b4; }
.rank .rs { color: #9875b2; }
.rank .rn { color: #8a749d; font-size: 12px; }
.rank.me { background: #fff3dc; border-color: #e5c98e; }
.rank.t1 .no { background: #f6da90; color: #a18448; }
.rank.t2 .no { background: #e4dfe9; color: #a094ac; }
.rank.t3 .no { background: #edc5a7; color: #a77759; }

.stone { background: #fff; border-color: #d9cae6; box-shadow: 0 2px 0 #d6c5e2; color: #b09ac0; }
.stone.cur { border-color: #d6bc7c; background: #fff1cf; color: #aa8947; box-shadow: 0 2px 0 #dec58d; }

/* OX: a spring park with two unmistakable signs and no eliminated seats. */

  

/* Cooperative crossword: a storybook castle with a legible puzzle panel. */

.cc { background: #e9e0f0; border-radius: 4px; box-shadow: none; }
.cc.open { background: #fffdf8; box-shadow: inset 0 0 0 1px #decfe9; cursor: pointer; }
.cc.open.done { background: #e2efdb; box-shadow: inset 0 0 0 1px #b9d0a7; }
.cc.open.mine { background: #fbedcb; box-shadow: inset 0 0 0 1px #e2c885; }
.cc.hi { background: #f1dff7; box-shadow: inset 0 0 0 2px #bc99d4; }
.cc .cn { color: #b9a4c7; left: 3px; top: 2px; }
.cc .cv { color: #9b7cac; }

/* Team badges and answer conversation hooks for live and local games. */

/* A gathering, with answer bubbles above each moving avatar. */

/* Reactions act on a child, so walking placement and idle breathing keep working. */
@keyframes qp-celebrate { 0%,100% { transform: translateY(0) rotate(0); } 26% { transform: translateY(-8px) rotate(-3deg); } 55% { transform: translateY(-1px) rotate(3deg); } 77% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes qp-oops { 0%,100% { transform: rotate(0); } 20%,60% { transform: rotate(-3deg); } 40%,80% { transform: rotate(3deg); } }

/* Keep small labels readable against the pale illustrated surfaces. */

.qp-pixel-avatar, .qp-pixel-avatar image { image-rendering: auto; }
.qp-pixel-avatar svg { border-radius: 0; }

/* Results and teacher tools follow the same palette. */
.night { background: radial-gradient(ellipse at 50% 25%, #8865ae, transparent 80%), #4d396c; }

 
  

.tsplit { top: var(--qp-top-height); gap: 17px; padding: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setrow { border: 1px solid #e4d9ed; border-radius: 12px; }
.setrow.on { background: #f4eafb; border-color: #bd9fd3; }
.setrow .sn { color: #a58cb8; } .setrow .sc { color: #bba5ca; }

.tt { background: #a98aca; color: #fff; border: 1px solid #c9afdf; border-radius: 15px; padding: 10px 19px; box-shadow: 0 3px 0 #81679d; }
#toast { top: 70px; }
#modal { background: #68527470; padding: 18px; }
.mbox { width: min(580px, 94vw); max-height: 88vh; border-radius: 23px; }
.mbody { padding: 20px; }

@media (max-height: 690px) and (min-width: 1000px) {
  .pnl-h { padding-block: 10px; }
  .lgPanel { padding: 15px 22px 11px; }
  .lgSup { margin-bottom: 8px; }
  .logo { font-size: 49px; margin-bottom: 8px; }
  .logo small { margin-top: 8px; }
  .lgMid { width: 400px; }
  
  .lgWide { margin-top: 10px; padding-block: 9px; }
  .lgBar { margin-top: 13px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}
@media (max-width: 1100px) {
  .top { padding-inline: 14px; gap: 8px; }
  .tabs { padding: 9px; gap: 4px; }
  .tab { padding: 6px 8px; font-size: 10px; }
  
  
  
  
  
  
  
  
  
}
@media (max-width: 850px) {
  .top .nm { font-size: 15px; }
  .top .btn.sm { padding: 6px 9px; font-size: 11px; }
  .top { gap: 6px; padding-inline: 10px; }
  .icb { width: 31px; height: 31px; font-size: 14px; }
  .gold { padding: 5px 8px 5px 5px; font-size: 10px; }
  .gold b { font-size: 14px; }
  
   
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   
  .lgMid { width: 390px; }
  .logo { font-size: 50px; }
  
  
  
  
   
  
  
  
  
  
  
  
  
  
  
  
  
}
@media (max-width: 660px) {
  :root { --qp-top-height: 100px; }
  .top { height: 100px; display: flex; flex-wrap: wrap; align-content: center; gap: 7px; padding: 9px 12px; }
  .top .nm { flex: 1; min-width: 140px; font-size: 17px; }
  .top > .f1 { flex: 1 1 100%; height: 0; }
  .top .icb { width: 30px; height: 30px; }
  .top .gold { margin-left: auto; }
  .top #tbOut { font-size: 10px; }
  #toast { top: 108px; width: 94%; }
  .tt { font-size: 12px; max-width: 100%; }
  .tabs { gap: 5px; padding: 10px; }
  .tab { font-size: 11px; padding: 7px 9px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .ch { padding: 10px; font-size: 15px; gap: 6px; }
  .ch .n { width: 25px; height: 25px; font-size: 12px; }
  .choices { gap: 9px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  #login { padding: 18px; overflow-y: auto; place-content: center; }
  
  
  
  .lgSky .bub { opacity: .25; }
  .lgMid { width: min(395px, 100%); }
  .lgSup { font-size: 10px; margin-bottom: 10px; }
  .logo { font-size: 47px; margin-bottom: 10px; }
  .logo small { font-size: 10px; margin-top: 10px; }
  .lgPanel { padding: 17px 17px 13px; border-radius: 24px; }
  .lgForm { grid-template-columns: 53px minmax(0, 1fr) 63px; gap: 8px 6px; }
  .lgForm label { font-size: 11px; }
  .lgForm .inp { font-size: 12px; padding-inline: 8px; }
  .lgGoBtn { font-size: 18px; }
  .lgSex { grid-template-columns: 53px minmax(0, 1fr); }
  
  .lgBar { font-size: 9px; line-height: 1.5; padding: 7px 10px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .tsplit { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(350px, 1fr) minmax(350px, 1fr); overflow-y: auto; padding: 13px; }
  
  
  
  
  
  
  
  
  
  
  
  
  .mbody { padding: 15px; }
}
@media (max-height: 540px) {
  #login { place-content: start center; }
  .lgMid { margin-block: 18px; }
  
  
}
@media (prefers-reduced-motion: reduce) {
  *:not(#toast):not(.qq-timebar i), *::before, *::after { transition-duration: .001ms !important; scroll-behavior: auto !important; } /* 토스트·타임바(기능 전환)는 남김(audit 2026-10-25) */
  .bob, .blink, .night::after { animation: none !important; }
  
  
  
}

/* ══════════════════════════════════════════════════════════════════
   클래식 퀴즈룸: 푸른 플라스틱 프레임, 남색 인셋 창, 픽셀 글자.
   The sizing and motion rules above stay shared across all screens.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --qp-ink: #123d65;
  --qp-muted: #315e84;
  --qp-purple: #0b8cc5;
  --qp-purple-dark: #07538f;
  --qp-lilac: #a2d9ff;
  --qp-cream: #d9f1ff;
  --qp-paper: #b6e3ff;
  --qp-line: #0b548c;
  --qp-mint: #b7f1d5;
  --qp-green: #146f58;
  --qp-pink: #cfeaff;
  --qp-rose: #174c79;
  --qp-gold: #ffda3c;
  --qp-shadow: inset 0 2px 0 #e9faff, inset 0 -3px 0 #2a81bb, 0 4px 0 #073e74;
}
body {
  font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; font-synthesis: none;
  background: repeating-linear-gradient(90deg, #ffffff08 0 40px, #004b8b08 40px 80px),
    linear-gradient(#37badd, #1d88c4 45%, #0c579b);
}
input, textarea, select, button { font-family: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline-color: #ffeb3d; outline-offset: 3px; }
input::placeholder, textarea::placeholder { color: #51789c; }
::selection { background: #ffe45c; color: #113e65; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #59afe3; border: 2px solid #184f86; border-radius: 3px; }
::-webkit-scrollbar-track { background: #184f86; }
#deco i { background: #67ceef30; border-color: #a5eafa40; opacity: .5; }
#deco b { color: #aff5ff; }
.pnl {
  background: linear-gradient(#a8e0ff, #79bee9);
  border: 3px solid #0b4a83; border-radius: 11px;
  box-shadow: inset 0 2px 0 #eafaff, inset 0 -3px 0 #4b99d3, 0 4px 0 #053767;
}
.pnl-h {
  color: #fff; background: linear-gradient(#7cd9ff 0%, #3cabe3 45%, #267dc2 52%, #2968b1 100%);
  border-bottom: 2px solid #134f8a; border-radius: 7px 7px 0 0;
  box-shadow: inset 0 1px 0 #d8f6ff; text-shadow: 0 1px 0 #1b548b;
  font-size: 13px; letter-spacing: 0;
}
.pnl-h::before { background: #cff8ff; border: 1px solid #2c76ac; box-shadow: 0 1px 0 #174c88; width: 7px; height: 7px; }
.btn, .btn.sm, .btn.big {
  background: linear-gradient(#94eaff, #53cee8 46%, #23a7d5 51%, #1389bf);
  color: #064872; border: 2px solid #12699c; border-radius: 7px;
  box-shadow: inset 0 1px 0 #d8fbff, inset 0 -1px 0 #1177ac, 0 3px 0 #074470;
  text-shadow: 0 1px 0 #8fe6f4; font-weight: 400; letter-spacing: 0;
}
.btn:hover { background: linear-gradient(#bdffff, #59def0 46%, #22b9df 51%, #1899ca); }
.btn:active { box-shadow: inset 0 1px 0 #b4f0f8, 0 1px 0 #074470; }
.btn.y, .btn.sm.y {
  background: linear-gradient(#fff897, #ffe359 46%, #ffd21c 51%, #eab715);
  color: #805608; border-color: #a17e17; box-shadow: inset 0 1px 0 #fffddc, 0 3px 0 #8a6511;
  text-shadow: 0 1px 0 #fff4a4;
}
.btn.y:hover { background: linear-gradient(#ffffcf, #ffed69 46%, #ffde26 51%, #f8c319); }
.btn.g, .btn.sm.g {
  background: linear-gradient(#c4ffbd, #82e96c 46%, #62d43c 51%, #44aa26);
  color: #275e14; border-color: #277527; box-shadow: inset 0 1px 0 #e8ffe0, 0 3px 0 #236325;
  text-shadow: 0 1px 0 #b0f6a1;
}
.btn.g:hover { background: linear-gradient(#e4ffc9, #9cf676 46%, #78e14b 51%, #53b732); }
.btn.p, .btn.sm.p { background: linear-gradient(#ffd8f0, #ef9bc8 46%, #e56ab1 51%, #be5191); color: #77325d; border-color: #9b437b; box-shadow: inset 0 1px 0 #ffecf8, 0 3px 0 #743864; text-shadow: 0 1px 0 #f9c5e2; }
.btn.p:hover { background: linear-gradient(#ffeaf6, #f4b4d7 46%, #ee87bd 51%, #ce629f); }
.btn.gray, .btn.sm.gray { background: linear-gradient(#d9efff, #a7cfef 46%, #80b7e0 51%, #6999cb); color: #174878; border-color: #356b9e; box-shadow: inset 0 1px 0 #effaff, 0 3px 0 #24557f; text-shadow: 0 1px 0 #c4e2f7; }
.btn.gray:hover { background: linear-gradient(#f3fbff, #c2e2f9 46%, #98c8e9 51%, #7dabd5); }
.btn.sm { border-radius: 5px; font-size: 11px; }
.btn.big { border-radius: 8px; font-size: 18px; }
.btn.y:active, .btn.p:active, .btn.g:active, .btn.gray:active { box-shadow: inset 0 1px 0 #fff9, 0 1px 0 #24557f; }
.inp { border: 2px solid #286a9b; border-radius: 4px; color: #153e61; background: #fff; box-shadow: inset 0 2px 0 #d2e6f3; }
.inp:focus { border-color: #19bbe1; background: #fff; box-shadow: inset 0 2px 0 #d2e6f3, 0 0 0 2px #75e6ff; }
.tag { border-radius: 5px; }
.hint { color: #27577b; font-size: 11px; line-height: 1.6; }
.top { background: linear-gradient(#8bddf8 0%, #3aa9df 44%, #227ac0 51%, #215aa3 100%); border-bottom: 3px solid #063967; color: #fff; box-shadow: inset 0 1px 0 #b7f2ff, 0 2px 0 #184474; }
.top .nm { color: #e7fbff; font-size: 20px; letter-spacing: 0; text-shadow: 0 2px 0 #084681; }
.icb { border: 2px solid #155989; background: linear-gradient(#9feaff, #34b4de 47%, #2c81c0); color: #fff; box-shadow: inset 0 1px 0 #c9f5ff, 0 2px 0 #133d73; }
.icb.y { background: linear-gradient(#ffffb4, #ffdf52 48%, #e8b525); border-color: #b69023; color: #724b07; }
.gold { color: #a8d6ff; background: #0a3974; border: 2px solid #f0cf44; border-radius: 6px; box-shadow: inset 0 1px 0 #387db2; }
.gold b { color: #fff179; }
.coin { background: #ffdf42; border-color: #a68011; box-shadow: inset 0 0 0 3px #fff098; }

.tabs { background: #489cd3; border-bottom: 2px solid #185b91; gap: 4px; padding: 9px 9px 8px; }
.tab { color: #c9ecff; background: linear-gradient(#3d92ce, #2167a7); border: 1px solid #144f8e; border-radius: 5px; box-shadow: inset 0 1px 0 #68bae9; font-size: 11px; }
.tab.on { color: #315711; background: linear-gradient(#d4ffa0, #a4ec55 50%, #7cb83a); border-color: #477e2b; box-shadow: inset 0 1px 0 #f1ffce, 0 2px 0 #24578b; }

/* Questions live in a monitor; each player stands at a name and score console. */
.studio { background: #064b79 url("./assets/quiz-studio.webp") center / cover no-repeat; isolation: isolate; }

.studio::before, .studio::after { content: ''; position: absolute; pointer-events: none; }
.studio::before { left: 18%; right: 18%; top: 15%; height: 38%; border-radius: 30px; background: linear-gradient(115deg, transparent 20%, #cbffff18 43%, #cbffff06 50%, transparent 67%); opacity: .4; animation: qp-stage-glass 9s ease-in-out infinite; z-index: 0; }
.studio::after { inset: 0; background: radial-gradient(ellipse 17px 17px at 9% 14%, #e5ffffbb, transparent 65%), radial-gradient(ellipse 18px 18px at 91% 14%, #e5ffffaa, transparent 65%), radial-gradient(ellipse 18px 18px at 12% 42%, #99f6ffaa, transparent 65%), radial-gradient(ellipse 18px 18px at 88% 42%, #caffff99, transparent 65%), radial-gradient(ellipse 14px 14px at 33% 9%, #cdfaffaa, transparent 65%), radial-gradient(ellipse 12px 12px at 66% 9%, #caffff99, transparent 65%), radial-gradient(ellipse 15px 15px at 50% 60%, #fff3a580, transparent 70%); animation: qp-stage-stars 5.6s ease-in-out infinite; z-index: 0; }

.studio::before, .studio::after { animation-delay: var(--qp-stage-phase, 0s); }
@keyframes qp-stage-glass { 0%,100% { transform: translateX(-2%); opacity: .22; } 50% { transform: translateX(3%); opacity: .65; } }
@keyframes qp-stage-stars { 0%,100% { transform: translateY(0); opacity: .35; } 45% { transform: translateY(-1px); opacity: .85; } 70% { transform: translateY(1px); opacity: .5; } }
@keyframes qp-stage-light { 0%,100% { opacity: .32; transform: scaleX(.97); } 50% { opacity: .75; transform: scaleX(1.025); } }

.rank { background: #d1ecff; border: 1px solid #5187bb; border-radius: 4px; box-shadow: inset 0 1px 0 #f1fbff; }
.rank .no { color: #e9f7ff; background: #2e80bd; border-radius: 3px; }
.rank .rn { color: #1b4976; }
.rank .rs { color: #145b8a; }
.rank.me { background: #fff2a9; border-color: #bd9327; }
.rank.t1 .no { background: #ffdb39; color: #715509; }
.rank.t2 .no { background: #c8d6e4; color: #4d647a; }
.rank.t3 .no { background: #e5b076; color: #704c2c; }
.ch { color: #16487b; background: linear-gradient(#f8feff, #cce9ff); border: 2px solid #347fb5; border-radius: 6px; box-shadow: 0 3px 0 #20598f; }
.ch .n { background: #2784bc; border-radius: 4px; }
.ch.pick { background: #fff3a3; border-color: #af8f28; box-shadow: 0 3px 0 #8b6f19; }
.ch.ok { background: #d9f8c7; border-color: #5b963c; box-shadow: 0 3px 0 #3b682c; }
.ch.no { background: #ffddd4; border-color: #ad6959; box-shadow: 0 3px 0 #884a42; }

.stone { background: linear-gradient(#e8f8ff, #92bfdd); border-color: #2d739d; color: #275982; box-shadow: 0 2px 0 #20557b; }
.stone.cur { background: linear-gradient(#fffab9, #f4da43); border-color: #ad8b27; color: #775411; box-shadow: 0 2px 0 #866e20; }

/* Entry, waiting room and teams keep the same inset window language. */
#login { background: radial-gradient(ellipse at 50% 33%, #36badc 0, transparent 60%), linear-gradient(#127cbb, #073e88); }
#login::before { background: #074b8e; border-top-color: #71d3f1; }
.lgSky .bub { background: radial-gradient(circle at 32% 26%, #ffffffc0 0 17%, transparent 18%), linear-gradient(145deg, #8feeff, #3294d6); border-color: #b8f9ff; opacity: .45; }
.lgSup { color: #bef4ff; letter-spacing: .06em; }
.logo { color: #fff18b; letter-spacing: 0; text-shadow: 0 2px 0 #035389, 0 5px 0 #063b73; }
.logo small { color: #cff7ff; letter-spacing: .08em; }
.lgPanel { background: linear-gradient(#a1deff, #6db4e7); border: 3px solid #07508c; border-radius: 12px; box-shadow: inset 0 2px 0 #e5f9ff, inset 0 -3px 0 #4396cf, 0 5px 0 #033465; }
.lgTitle { color: #145084; letter-spacing: .06em; }
.lgForm label, .lgSex label { color: #164d7c; }
.lgGoBtn { background: linear-gradient(#fffcb0, #ffe85c 45%, #ffd323 51%, #ddb323); color: #705008; border: 2px solid #9c7b1d; border-radius: 6px; box-shadow: inset 0 1px 0 #fffed9, 0 3px 0 #765d15; font-family: inherit; }
.lgGoBtn:active { box-shadow: inset 0 1px 0 #fffdd2, 0 1px 0 #765d15; }
.lgDots { background: #eef9ff; border: 2px solid #2e73a4; border-radius: 4px; }
.lgDots i { background: #b7d2e8; border-color: #76a7ce; }
.lgDots i.f { background: #168ec8; border-color: #075b94; }

.lgWide { background: linear-gradient(#c6ffb1, #8cdc56); border: 2px solid #397e2c; border-radius: 6px; color: #2d6319; box-shadow: inset 0 1px 0 #e9ffdc, 0 3px 0 #285f24; }
.lgWide.ex { background: linear-gradient(#c3e5f8, #81b4dc); border-color: #3975a5; color: #22557c; box-shadow: inset 0 1px 0 #effaff, 0 2px 0 #265a8d; }
.lgMsg { color: #164f7c; }
.lgMsg b { color: #0c3c68; }
.lgBar { color: #d5f2ff; background: #054d88; border: 1px solid #65b7df; border-radius: 4px; }

/* OX is a bright park with the quiz room's large blue question console. */

  

/* Crossword uses white letter tiles and distinct mint/yellow solved states. */

.cc { background: #195891; border-radius: 2px; }
.cc.open { background: #fffef7; box-shadow: inset 0 0 0 1px #91b7d2; }
.cc.open.done { background: #c7edb2; box-shadow: inset 0 0 0 1px #679650; }
.cc.open.mine { background: #ffe89b; box-shadow: inset 0 0 0 1px #b9922d; }
.cc.hi { background: #fff0a2; box-shadow: inset 0 0 0 2px #c29c31; }
.cc .cn { color: #3472a4; }
.cc .cv { color: #153f60; }

/* Rewards, tools and dialogs retain crisp text and visible button states. */

.night { background: radial-gradient(ellipse at 50% 25%, #197cac, transparent 75%), #0c2e66; }

 
  

.setrow { background: #e0f3ff; border-color: #5392bf; border-radius: 5px; }
.setrow.on { background: #fff0a2; border-color: #bd9333; }
.setrow .sn { color: #164d7b; } .setrow .sc { color: #5481a1; }

.tt { background: #0d6ba5; color: #fff4b7; border: 2px solid #99dded; border-radius: 6px; box-shadow: 0 3px 0 #064375; }
#modal { background: #06294a99; }
.mbox { border-radius: 10px; }
.mbody { background: #a8d8f5; border-radius: 0 0 7px 7px; }
#avatarSexChoices > .f1 { background: #0e5389 !important; border: 2px solid #72bce2 !important; border-radius: 6px !important; }
body .qp-demo-toolbar { color: #dbf2ff; background: #0b427def; border: 2px solid #72bfdf; border-radius: 7px; box-shadow: inset 0 1px 0 #1a69a2, 0 3px 0 #032b55; font-family: inherit; }
body .qp-demo-toolbar button { color: #114f7a; background: linear-gradient(#c3f7ff, #7dcced); border-color: #2779ab; border-radius: 4px; }
body .qp-demo-toolbar button.on { color: #315c1e; background: #c9f4a7; border-color: #5d9943; }
body .qp-demo-toolbar small { color: #bce6ff; }

/* Independent music and effect controls fit without squeezing their labels. */
.qp-audio-settings { display: flex; flex-direction: column; gap: 13px; }
.qp-audio-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 14px; background: #cdeaff; border: 2px solid #4a87b7; border-radius: 6px; }
.qp-audio-label { color: #154c78; font-weight: 700; font-size: 14px; }
.qp-audio-label small { display: block; color: #41749a; font-size: 11px; font-weight: 400; margin-top: 5px; }
.qp-audio-toggle { min-width: 78px; }
.qp-audio-volume { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; color: #285c80; }
.qp-audio-volume input[type="range"] { flex: 1; min-width: 0; height: 20px; accent-color: #0d91c8; cursor: pointer; }
.qp-audio-volume output, .qp-audio-state { color: #1a507d; min-width: 39px; text-align: right; font-size: 12px; }
.qp-audio-state { font-size: 11px; }

@media (max-width: 850px) {
  
  
  .top .nm { font-size: 16px; }
}
@media (max-width: 660px) {
  .top .nm { font-size: 17px; }
  .logo { font-size: 44px; }
  .lgPanel { border-radius: 10px; }
  .pnl-h { font-size: 12px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .qp-audio-row { padding: 11px; gap: 10px 8px; }
  .qp-audio-label { font-size: 13px; }
  .qp-audio-label small { font-size: 10px; }
  .qp-audio-toggle { min-width: 68px; padding-inline: 8px; }
  .qp-audio-volume { gap: 8px; }
  body .qp-demo-toolbar { max-width: calc(100vw - 24px); font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio::before, .studio::after { animation: none; opacity: .35; }
}

/* Profile preview fills its panel; only the scenery covers, while the avatar keeps its proportions. */

/* Rounded Korean letters retain open counters; real weights distinguish menus from reading text. */
.pnl-h, .tab, .btn.sm, .lgWide { font-size: 14px; font-weight: 800; }
.btn, .lgGoBtn { font-weight: 800; }
.hint { font-size: 15px; font-weight: 400; line-height: 1.6; }
.top .nm, .logo { font-weight: 800; }

.rank .rn { font-size: 14px; font-weight: 700; }

.rank .rs { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

.lgForm label, .lgSex label, .lgTitle, .lgSup, .lgMsg, .lgForm .inp { font-size: 14px; font-weight: 700; }
.lgBar, body .qp-demo-toolbar, body .qp-demo-toolbar button, body .qp-demo-toolbar small { font-size: 12px; font-weight: 400; }
.qp-audio-label, .qp-audio-volume output { font-size: 16px; font-weight: 700; }
.qp-audio-state, .qp-audio-label small { font-size: 14px; font-weight: 400; }
.pnl-h, .btn, .tab, .top .nm { text-shadow: none; }

/* Full bodies stay large enough to read eyes and separate tops from bottoms. */

@media (max-width: 660px) {
  
  
  .top .nm { font-size: 18px; }
  .pnl-h, .tab { font-size: 13px; }
  
}