/* 리로드 아레나 — 디자인 토큰 + 레이아웃. 인라인 style 속성 0개(CSP unsafe-inline 없음). */
:root {
  --bg: #0b0f17;
  --bg2: #121826;
  --panel: #182031;
  --panel2: #1f293c;
  --line: #2b3752;
  --fg: #e8eef9;
  --fg-dim: #9fb0cc;
  --accent: #f5a623;
  --accent2: #ffd166;
  --red: #ff5fa2;   /* 팀0 — 빨강이었다. 바닥에 넓게 깔리면 피처럼 보여 분홍으로(2026-08-30) */
  --blue: #4fa8ff;
  --ok: #3ddc84;
  --bad: #ff6b6b;
  --gold: #ffcf3f;
  --pierce: #7ee0ff;
  --r: 14px;
  --sh: 0 10px 32px rgba(0,0,0,.45);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg); font-family: var(--font);
  overflow: hidden; -webkit-text-size-adjust: 100%; overscroll-behavior: none;
  touch-action: none;
}
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ── 로비 ─────────────────────────────────────────────── */
#lobby {
  background:
    radial-gradient(1100px 620px at 50% -10%, #1c2740 0%, transparent 62%),
    linear-gradient(180deg, #0b0f17 0%, #070a11 100%);
  overflow: auto; padding: 20px; align-items: flex-start;
}
.lobby-card {
  width: min(560px, 100%); margin: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 20px;
  box-shadow: var(--sh);
}
.brand { text-align: center; margin-bottom: 22px; }
.brand h1 { margin: 0; font-size: 2.15rem; letter-spacing: -.02em; font-weight: 800; }
.brand .accent { color: var(--accent); }
.tagline { margin: 8px 0 0; color: var(--fg-dim); font-size: .93rem; line-height: 1.5; }
.tagline strong { color: var(--accent2); }
.row { display: flex; gap: 12px; }
.row > .field { flex: 1; }
.field { display: block; margin-bottom: 16px; }
.label { display: block; font-size: .8rem; color: var(--fg-dim); margin-bottom: 7px; font-weight: 600; }
.hint { font-style: normal; font-weight: 400; opacity: .8; }
.ctl {
  width: 100%; background: var(--bg2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 12px; font-size: 1rem; font-family: inherit; min-height: 46px;
}
.ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=range].ctl { padding: 0; min-height: 30px; accent-color: var(--accent); }
.weapons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.wpn {
  background: var(--bg2); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 8px; color: var(--fg); cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 5px; min-height: 68px; text-align: center;
  transition: border-color .12s, background .12s;
}
.wpn:hover { border-color: #3c4c72; }
.wpn.selected { border-color: var(--accent); background: #2a2415; }
.wpn-name { font-weight: 700; font-size: .9rem; }
.wpn-desc { font-size: .72rem; color: var(--fg-dim); line-height: 1.35; }
.nickrow { display: flex; gap: 10px; align-items: center; }
.nick {
  flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; font-size: 1.05rem; font-weight: 700; color: var(--accent2); min-height: 46px;
  font-family: inherit;
}
.nick:focus { outline: 2px solid var(--accent2); outline-offset: 1px; }
/* 🔴 못 쓰는 이름일 때 — 색만으로 알리지 않는다(색각 이상). 아래 문구가 함께 뜬다. */
.nick.bad { border-color: #ff6b78; }
.nick-msg { margin: 6px 0 0; min-height: 1.1em; }
.nick-msg.bad { color: #ff9aa3; }
button { font-family: inherit; }
.primary, .secondary, .ghost {
  border-radius: 10px; padding: 13px 18px; font-size: 1rem; font-weight: 700;
  cursor: pointer; min-height: 46px; border: 1px solid transparent;
}
.primary { background: var(--accent); color: #221800; width: 100%; border-color: #d98f10; }
.primary:hover { background: var(--accent2); }
.secondary { background: var(--panel2); color: var(--fg); border-color: var(--line); }
.secondary:hover { border-color: #3c4c72; }
.ghost { background: transparent; color: var(--fg-dim); border-color: var(--line); }
.ghost:hover { color: var(--fg); }
.ghost.danger { color: #ff9b9b; border-color: #4a2b33; }
.actions { margin-top: 18px; }
.joinrow { display: flex; gap: 10px; margin-top: 10px; }
.joinrow .code { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; text-align: center; }
.joinrow .secondary { flex: 0 0 96px; }
.settings { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.settings summary { cursor: pointer; color: var(--fg-dim); font-size: .9rem; padding: 6px 0; min-height: 32px; }
.setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 12px; }
.check { grid-column: span 2; display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--fg-dim); min-height: 32px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.keys { margin-top: 12px; font-size: .82rem; color: var(--fg-dim); line-height: 1.9; }
kbd {
  background: var(--bg2); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; font-size: .78rem; margin-right: 3px; font-family: ui-monospace, monospace;
}
.statsbox { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.statsbox h3 { font-size: .85rem; color: var(--fg-dim); margin: 0 0 8px; }
.mystats { font-size: .85rem; color: var(--fg); line-height: 1.7; margin-bottom: 10px; }
.privacy { margin: 16px 0 0; font-size: .75rem; color: #6b7c99; text-align: center; line-height: 1.6; }

/* ── 로딩 ─────────────────────────────────────────────── */
#loading { background: var(--bg); flex-direction: column; }
.loadbox { width: min(420px, 86%); text-align: center; }
.loadbox h2 { font-size: 1.3rem; margin: 0 0 16px; }
.bar { height: 8px; background: var(--panel2); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; width: 0%; background: var(--accent); transition: width .25s; }
.load-msg { color: var(--fg-dim); font-size: .88rem; margin-top: 12px; }
/* 🔴 «왜 안 되는지»는 흐린 회색으로 쓰면 안 읽힌다 — 못 도는 기기에서 이 줄이 유일한 안내다(2026-09-22) */
.load-msg.load-error { color: #ffd0c4; font-size: 1rem; line-height: 1.6; max-width: 34rem; }
.load-msg.load-error small { color: var(--fg-dim); font-size: .85rem; }

/* ── 게임 ─────────────────────────────────────────────── */
#game { display: block; }
#view { display: block; width: 100%; height: 100%; }
.hud { position: absolute; inset: 0; pointer-events: none; user-select: none; }
/* 팀 색 화면 테두리 — 얇은 실선 + 안쪽으로 은은한 발광. 시야를 가리지 않는 세기로 둔다. */
.teamedge { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.teamedge.red { box-shadow: inset 0 0 0 3px rgba(255,95,162,.85), inset 0 0 46px 10px rgba(255,95,162,.20); }
.teamedge.blue { box-shadow: inset 0 0 0 3px rgba(79,168,255,.85), inset 0 0 46px 10px rgba(79,168,255,.20); }
/* 🔴 체력바는 팀색으로 칠하지 않는다 — «체력이 낮다»(빨강)를 덮어써서 경고가 죽는다.
   팀색은 테두리·무기·상단 배너 세 곳으로 충분하다. */
.hud-top {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 5px; align-items: stretch; padding: 8px 18px 9px;
  min-width: 340px;
  background: rgba(10,14,22,.78); border-radius: 0 0 14px 14px; border: 1px solid var(--line); border-top: 0;
}
.topline { display: flex; gap: 14px; align-items: center; }
.team-score { display: flex; align-items: baseline; gap: 8px; font-weight: 800; font-size: 1.5rem; min-width: 84px; }
.team-score.red { color: var(--red); } .team-score.blue { color: var(--blue); justify-content: flex-end; }
.team-score.ahead { text-shadow: 0 0 12px currentColor; }
/* 🔴 «내가 무슨 팀인지 모르겠다»(사용자 실측) — 내 팀 쪽에만 «나» 칩이 뜬다 */
.mine-chip {
  display: none; font-size: .58rem; font-weight: 800; letter-spacing: .06em;
  color: #0b0f17; background: var(--red); border-radius: 5px; padding: 1px 5px; align-self: center;
}
.team-score.blue .mine-chip { background: var(--blue); }
.team-score.mine .mine-chip { display: inline-block; }
.team-score.mine { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 8px; }
/* 🔴 내 팀 배너 — 상단바 안, 팀 색으로 통째로 칠한다(«어디 나와 있냐»는 실측 지적) */
.myteam {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: .74rem; font-weight: 700; color: #0b0f17;
  background: var(--red); border-radius: 8px; padding: 4px 10px; margin-top: 1px;
}
.myteam.blue { background: var(--blue); }
.myteam b { font-size: .95rem; letter-spacing: .04em; }
.myteam .mk { font-weight: 800; background: rgba(11,15,23,.30); border-radius: 5px; padding: 1px 6px; }
.myteam .mk.ally { color: #0a3d22; }
.myteam .mk.foe { color: #4d0f08; }

/* 피해 숫자 — «내가 쏜 게 맞았나»가 숫자로 보인다 */
.dmgnums { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dmg {
  position: absolute; transform: translate(-50%, -50%);
  font-weight: 900; font-size: 1.05rem; color: #ffe9a8; text-shadow: 0 2px 5px #000, 0 0 12px rgba(0,0,0,.9);
  animation: dmgfloat .85s ease-out forwards;
}
.dmg.head { color: var(--gold); font-size: 1.4rem; }
.dmg.kill { color: #7dffcf; font-size: 1.3rem; }
@keyframes dmgfloat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  18% { opacity: 1; transform: translate(-50%, -62%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -145%) scale(1); }
}
/* ── 칭찬 스티커 (P1-e) ── 자유 텍스트가 없는 대신 «고른 문구»가 머리 위에 뜬다 */
.bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bub {
  position: absolute; transform: translate(-50%, -100%);
  background: rgba(16,18,26,.92); color: #fff; border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px; padding: 3px 9px; font-size: .82rem; font-weight: 700;
  white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.5);
  animation: bubpop 2s ease-out forwards;
}
@keyframes bubpop {
  0% { opacity: 0; transform: translate(-50%, -85%) scale(.8); }
  10% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -125%) scale(1); }
}
/* 🔴 화면 **왼쪽 가운데**다. 아래 가운데에 두었더니 문제 카드를 덮었고(브라우저 실측),
   가운데는 조준점 자리다. 왼쪽 위는 순위판이 쓴다 — 남는 자리가 여기다. */
.emotes {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
  padding: 10px; border-radius: 14px; background: rgba(12,14,20,.92);
  border: 1px solid rgba(255,255,255,.16); z-index: 9;
}
.emotes .cool { grid-column: 1 / -1; text-align: center; font-size: .78rem; color: var(--gold, #ffc247); }
.emotes button[disabled] { opacity: .38; cursor: default; }
.emotes button {
  min-width: 104px; min-height: 44px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07);
  color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer;
}
.emotes button:hover, .emotes button:focus-visible { background: rgba(255,255,255,.16); }
.emotes button .k { opacity: .55; font-size: .7rem; margin-right: 5px; }
.tname { font-size: .7rem; letter-spacing: .1em; opacity: .85; }
.clock { display: flex; flex-direction: column; align-items: center; min-width: 104px; }
.clock-cap { font-size: .6rem; letter-spacing: .14em; color: var(--fg-dim); }
#clock { font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
#clock.warn { color: var(--gold); }
#clock.urgent { color: #ff6b6b; animation: tickpulse .9s steps(1,end) infinite; }
@keyframes tickpulse { 0%,60% { opacity: 1; } 61%,100% { opacity: .45; } }
.mapname { font-size: .68rem; color: var(--fg-dim); }

/* 목표 진행도 — 가운데 라벨을 기준으로 좌(RED)·우(BLUE)가 서로를 향해 찬다 */
.goal { display: flex; align-items: center; gap: 8px; }
.goalbar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.10); overflow: hidden; display: flex; }
.goalbar.red { justify-content: flex-end; }
.goalfill { height: 100%; width: 0%; transition: width .25s ease-out; }
.goalbar.red .goalfill { background: var(--red); }
.goalbar.blue .goalfill { background: var(--blue); }
.goal-cap { font-size: .62rem; color: var(--fg-dim); letter-spacing: .04em; white-space: nowrap; }
.lead { text-align: center; font-size: .74rem; font-weight: 700; color: var(--fg-dim); }
.lead.red { color: var(--red); } .lead.blue { color: var(--blue); }

/* 실시간 순위 (좌측 상단) */
.rank {
  position: absolute; left: 14px; top: 74px; width: 178px;
  background: rgba(10,14,22,.72); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px 8px;
}
.rank-head {
  font-size: .62rem; letter-spacing: .1em; color: var(--fg-dim);
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px;
}
.rank-hint { font-size: .55rem; opacity: .7; }
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rank-row { display: flex; align-items: baseline; gap: 6px; font-size: .74rem; line-height: 1.35; }
.rank-row .rk { width: 15px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.rank-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .kn { font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-row.red .nm { color: var(--red); } .rank-row.blue .nm { color: var(--blue); }
.rank-row.me { background: rgba(245,166,35,.16); border-radius: 5px; margin: 0 -3px; padding: 0 3px; }
.rank-row.me .nm { color: var(--gold); font-weight: 700; }
.rank-row.gap { opacity: .55; }

.crosshair, .hitmark { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%,-50%); }
.crosshair i { position: absolute; background: #eafcff; box-shadow: 0 0 2px #000; opacity: .9; }
.crosshair i:nth-child(1){ left:50%; top:0; width:2px; height:8px; margin-left:-1px; }
.crosshair i:nth-child(2){ left:50%; bottom:0; width:2px; height:8px; margin-left:-1px; }
.crosshair i:nth-child(3){ top:50%; left:0; width:8px; height:2px; margin-top:-1px; }
.crosshair i:nth-child(4){ top:50%; right:0; width:8px; height:2px; margin-top:-1px; }
.crosshair.wide { width: 44px; height: 44px; }
.crosshair.blocked i { background: #ff7676; }
.crosshair.lock i { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.crosshair.ally i { background: #35d07f; box-shadow: 0 0 6px #35d07f; }
/* 🔴 적을 잡았을 때 — 색 + 모양 둘 다 바꾼다(색각 이상 대비, 2026-08-30 사용자 요청).
   네 모서리 괄호는 «조준 확정»의 업계 표준 신호다. */
.crosshair.foe i { background: #ff4d3d; box-shadow: 0 0 7px #ff4d3d; }
.crosshair.foe::before, .crosshair.foe::after {
  content: ''; position: absolute; width: 9px; height: 9px; border: 2px solid #ff4d3d;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.9));
}
.crosshair.foe::before { left: -7px; top: -7px; border-right: 0; border-bottom: 0; }
.crosshair.foe::after  { right: -7px; bottom: -7px; border-left: 0; border-top: 0; }
.aim-label.foe { color: #ff8a80; font-weight: 800; }
.aim-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, 22px);
  font-size: .72rem; font-weight: 800; color: #35d07f; text-shadow: 0 1px 4px #000;
}
.crosshair.lock { width: 34px; height: 34px; }
.hitmark i { position: absolute; width: 11px; height: 2.5px; background: #fff; }
.hitmark i:nth-child(1){ left:0; top:2px; transform: rotate(45deg); }
.hitmark i:nth-child(2){ right:0; top:2px; transform: rotate(-45deg); }
.hitmark i:nth-child(3){ left:0; bottom:2px; transform: rotate(-45deg); }
.hitmark i:nth-child(4){ right:0; bottom:2px; transform: rotate(45deg); }
.hitmark.head i { background: var(--gold); height: 3.5px; }
.vignette {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  box-shadow: inset 0 0 130px 34px rgba(255,60,60,.75); transition: opacity .16s;
}
.killfeed { position: absolute; top: 74px; right: 14px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.kf {
  background: rgba(10,14,22,.78); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; font-size: .8rem; white-space: nowrap;
}
.kf .n-red { color: var(--red); font-weight: 700; }
.kf .n-blue { color: var(--blue); font-weight: 700; }
.kf .via { color: var(--fg-dim); margin: 0 5px; }
.kf.gold { border-color: var(--gold); }

.hud-left { position: absolute; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 9px; }
/* 🔴 .hp / .hp-fill 은 뺐다(2026-08-31) — «맞은 물감»과 같은 값을 뒤집은 중복이었다.
   쓰는 곳이 없어진 규칙을 남겨 두면 다음 사람이 «어디에 쓰이나» 찾다가 시간을 버린다. */
#hp-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .88rem; text-shadow: 0 1px 3px #000; }
.streak { display: flex; align-items: center; gap: 6px; background: rgba(255,207,63,.15); border: 1px solid var(--gold); color: var(--gold); border-radius: 8px; padding: 5px 10px; font-weight: 700; font-size: .85rem; }

.hud-right { position: absolute; right: 18px; bottom: 18px; text-align: right; }
.ammo { display: flex; gap: 5px; justify-content: flex-end; margin-bottom: 7px; }
.ammo .dot { width: 13px; height: 26px; border-radius: 4px; background: #26314a; border: 1px solid var(--line); }
.ammo .dot.on { background: var(--accent); border-color: var(--accent2); }
.ammo .dot.on.pierce { background: var(--pierce); border-color: #b6f0ff; }
.ammo .dot.on.gold { background: var(--gold); border-color: #fff0b8; }
.wpn-label { font-weight: 800; font-size: 1rem; text-shadow: 0 1px 3px #000; }
.tier-label { font-size: .76rem; color: var(--fg-dim); }
.tier-label.pierce { color: var(--pierce); } .tier-label.gold { color: var(--gold); }

.banner {
  position: absolute; left: 50%; top: 24%; transform: translateX(-50%);
  font-size: 2rem; font-weight: 900; text-align: center; text-shadow: 0 3px 14px #000;
  background: rgba(10,14,22,.6); padding: 10px 26px; border-radius: 14px; white-space: nowrap;
}
.respawn {
  position: absolute; left: 50%; top: 41%; transform: translateX(-50%);
  font-size: 1.1rem; background: rgba(10,14,22,.8); padding: 9px 20px; border-radius: 10px;
  border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}

/* ── 문제 카드 (하단 1/3, 크로스헤어 영역 침범 금지) ────── */
.qcard {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(760px, calc(100% - 28px)); max-height: 33vh;
  background: rgba(14,19,31,.96); border: 2px solid var(--accent); border-radius: 16px;
  padding: 12px 16px 14px; pointer-events: auto; box-shadow: 0 -8px 40px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 8px;
}
.qcard.locked { border-color: var(--bad); }
.qhead { display: flex; align-items: center; gap: 10px; }
.q-subject { background: var(--accent); color: #221800; font-weight: 800; font-size: .78rem; padding: 3px 9px; border-radius: 6px; }
.q-kind { font-size: .74rem; color: var(--fg-dim); }
/* 🔴 결전·복습은 «또 하나의 문제»가 아니다 — 카드 자체가 달라 보여야 아이가 구분한다.
   ⚠️ 640px 아래에서는 .q-kind 를 숨기므로(아래 미디어쿼리), 구분을 **글자에만** 걸면
   모바일에서 통째로 사라진다. 그래서 테두리·바탕으로도 말한다. */
#qcard.finale { border-color: #ffcf4a; box-shadow: 0 0 0 2px rgba(255, 207, 74, .35), 0 8px 30px rgba(0, 0, 0, .45); }
#qcard.finale .q-kind { color: #ffcf4a; font-weight: 700; }
#qcard.review { border-color: #63d2ff; box-shadow: 0 0 0 2px rgba(99, 210, 255, .28), 0 8px 30px rgba(0, 0, 0, .45); }
#qcard.review .q-kind { color: #63d2ff; font-weight: 700; }
/* «지난 판보다» — 나아진 것만 눈에 띄게. 나빠진 것은 조용히 적는다(아이를 혼내지 않는다). */
#result-stats .up { color: #7ef2b0; }
/* 🔴 점령 문제는 결전과 «다른 일»이다 — 결전 스타일을 빌려 쓰면 결전이 아닌데 결전처럼 보인다
   (8way gemini). 금색 대신 점령지 색(호박)으로, 테두리만 또렷하게. */
#qcard.hold { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255, 209, 102, .30), 0 8px 30px rgba(0, 0, 0, .45); }
#qcard.hold .q-kind { color: #ffd166; font-weight: 700; }
body.reduce-motion #qcard.finale, body.reduce-motion #qcard.review, body.reduce-motion #qcard.hold { box-shadow: none; }
.qtimer { flex: 1; height: 5px; background: var(--panel2); border-radius: 99px; overflow: hidden; }
.qtimer-fill { height: 100%; width: 100%; background: var(--accent); }
.qtimer-fill.warn { background: var(--bad); }
.q-text { margin: 0; font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 700; line-height: 1.45; white-space: pre-line; }   /* 빈칸 예문은 줄을 나눠 보낸다(2026-10-08) */
.q-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-choices.two { grid-template-columns: 1fr 1fr; }
.choice {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--panel2); border: 2px solid var(--line); border-radius: 10px;
  padding: 10px 12px; color: var(--fg); font-size: .98rem; cursor: pointer;
  min-height: 48px; font-family: inherit; line-height: 1.35;
}
.choice:hover { border-color: #46587f; }
.choice .mark {
  flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; border-radius: 6px; color: #10141f;
}
/* 🔴 번호는 «누를 키», 답은 «읽을 값». 붙여 놓으면 «4. 28» 이 «4.28» 로 읽힌다. */
.choice .cnum {
  flex: 0 0 auto; min-width: 17px; text-align: center;
  font-size: .72rem; font-weight: 700; color: var(--fg-dim);
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 4px; margin-right: 2px;
}
.choice .txt { font-weight: 700; font-size: 1.04rem; color: var(--fg); letter-spacing: .01em; }
.choice[data-i="0"] .mark { background: #ff6b6b; }   /* ● 빨강 */
.choice[data-i="1"] .mark { background: #4fa8ff; }   /* ■ 파랑 */
.choice[data-i="2"] .mark { background: #ffd166; }   /* ▲ 노랑 */
.choice[data-i="3"] .mark { background: #6ee7a0; }   /* ◆ 초록 */
/* 🔴 «혼자 하기» — 흐린 버튼이 아니라 **또렷한 두 번째 길**이다.
   방 만들기(주황)와 다른 색(초록)을 써서 «어느 쪽이 진짜 버튼인가»를 헷갈리지 않게 한다. */
button.solo {
  width: 100%; margin-top: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 18px; min-height: 58px; border-radius: 12px;
  background: linear-gradient(180deg, #17402f 0%, #0f2a20 100%);
  border: 1.5px solid #2fa374; color: #dcffee; font: inherit;
  box-shadow: 0 2px 0 #0b1d16, 0 6px 18px rgba(47,163,116,.14);
}
button.solo:hover { border-color: #4fe0a0; background: linear-gradient(180deg, #1d5340, #143529); }
button.solo:active { transform: translateY(1px); box-shadow: 0 1px 0 #0b1d16; }
button.solo .solo-main { font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; }
/* 이모지와 글자가 붙어 «🤖혼자» 로 읽힌다 — 폰트가 달라 공백이 좁게 잡힌다 */
button.solo .solo-ico { margin-right: 7px; font-size: 1.1em; }
button.solo .solo-sub { font-size: .82rem; font-weight: 500; color: #8fd9b3; }
button.solo .solo-sub b { color: #c7f5de; font-weight: 700; }
/* 멀티가 막힌 날에는 이 버튼이 유일한 길이다 — 한 번 눈에 띄게 알린다 */
body.mp-down button.solo { animation: soloPulse 1.8s ease-in-out 3; }
@keyframes soloPulse {
  0%, 100% { box-shadow: 0 2px 0 #0b1d16, 0 6px 18px rgba(47,163,116,.14); }
  50% { box-shadow: 0 2px 0 #0b1d16, 0 0 0 4px rgba(79,224,160,.22); }
}
body.reduce-motion button.solo { animation: none; }
.mp-down {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; font-size: .92rem;
  background: #2b2416; border: 1px solid #6b5320; color: #f4dfae;
}
.choice.hot {
  border-color: var(--accent2); background: #26314a;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, .38);
}
.choice.hot .txt { color: #fff; }
.q-hint { margin: 6px 2px 0; font-size: .78rem; color: var(--fg-dim); text-align: right; }
.choice.correct { border-color: var(--ok); background: #16351f; }
.choice.wrong { border-color: var(--bad); background: #35181c; }
.q-feedback { margin: 0; font-size: .86rem; min-height: 1.2em; color: var(--fg-dim); }
.q-feedback.ok { color: var(--ok); } .q-feedback.no { color: var(--bad); }
body.cb .choice .mark { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 3px, transparent 3px 6px); }

/* ── 스코어보드 ───────────────────────────────────────── */
.scoreboard {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: rgba(10,14,22,.95); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; max-width: min(820px, 94vw); max-height: 80vh; overflow: auto;
}
.scoreboard table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.scoreboard th, .scoreboard td { padding: 7px 11px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.scoreboard th { color: var(--fg-dim); font-size: .76rem; font-weight: 700; }
.scoreboard tr.red td:first-child { color: var(--red); font-weight: 700; }
.scoreboard tr.blue td:first-child { color: var(--blue); font-weight: 700; }
.scoreboard tr.me { background: rgba(245,166,35,.12); }
.bot-tag { font-size: .66rem; color: var(--fg-dim); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 5px; }

/* ── 모바일 터치 (탭 타깃 ≥44px) ──────────────────────── */
.touch { position: absolute; inset: 0; pointer-events: none; }
.stick {
  position: absolute; left: 22px; bottom: 22px; width: 132px; height: 132px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.2); pointer-events: auto;
}
.knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(255,255,255,.34); }
.tbtn {
  position: absolute; pointer-events: auto; border-radius: 50%; border: 2px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12); color: #fff; font-weight: 800; font-size: .88rem; font-family: inherit;
}
.tbtn.fire { right: 22px; bottom: 30px; width: 96px; height: 96px; }
.tbtn.jump { right: 130px; bottom: 34px; width: 68px; height: 68px; }
.tbtn.ask  { right: 30px; bottom: 140px; width: 68px; height: 68px; }

.perf {
  position: absolute; left: 12px; top: 12px; background: rgba(0,0,0,.66); color: #9fe6a0;
  font: 12px/1.5 ui-monospace, monospace; padding: 7px 10px; border-radius: 8px; white-space: pre;
}
.pointer-hint {
  position: absolute; left: 50%; top: 56%; transform: translateX(-50%);
  background: rgba(10,14,22,.92); border: 2px solid var(--accent); border-radius: 14px;
  padding: 16px 26px; font-size: .95rem; color: var(--fg-dim); text-align: center;
  display: flex; flex-direction: column; gap: 7px; pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.55); animation: hintPulse 1.8s ease-in-out infinite;
}
.pointer-hint strong { font-size: 1.25rem; color: var(--accent2); }
.pointer-hint .sub { font-size: .82rem; color: #7f90ad; }
.pointer-hint b { color: var(--fg); }
@keyframes hintPulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.035); } }

/* ── 결과 ─────────────────────────────────────────────── */
#result { background: rgba(7,10,17,.94); overflow: auto; padding: 20px; align-items: flex-start; }
.result-card {
  width: min(860px, 100%); margin: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px; box-shadow: var(--sh);
}
.result-card h2 { margin: 0 0 6px; font-size: 1.9rem; text-align: center; }
.result-sub { margin: 0 0 20px; text-align: center; color: var(--fg-dim); }
.result-grid { display: grid; grid-template-columns: 260px 1fr; gap: 22px; }
.result-grid h3 { font-size: .88rem; color: var(--fg-dim); margin: 0 0 10px; }
.radar { width: 100%; height: auto; }
.result-stats { font-size: .92rem; line-height: 1.9; margin-bottom: 18px; }
.result-stats b { color: var(--accent2); }
.wrong-notes { display: flex; flex-direction: column; gap: 9px; }
.wn { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--bad); border-radius: 9px; padding: 9px 12px; font-size: .85rem; line-height: 1.6; }
.wn .wn-a { color: var(--ok); font-weight: 700; }
.result-count { text-align: center; color: var(--fg-dim); margin: 20px 0 0; font-size: .9rem; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 18px; font-size: .92rem; z-index: 99;
}

@media (max-width: 720px) {
  .result-grid { grid-template-columns: 1fr; }
  .q-choices { grid-template-columns: 1fr; }
  .hud-top { padding: 6px 12px 7px; gap: 4px; min-width: 0; }
  .topline { gap: 9px; }
  .rank { display: none; }
  .team-score { font-size: 1.2rem; min-width: 66px; }
  .hp { width: 150px; }
  .weapons { grid-template-columns: 1fr; }
  .qcard { max-height: 42vh; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* 부팅(모듈 로딩) 전에는 로비 조작을 막는다 — «눌러도 아무 일 없는» 구간을 없앤다 */
body:not([data-ready]) .l2 .l2-card, body:not([data-ready]) .lobby-card .primary,
body:not([data-ready]) .lobby-card .secondary,
body:not([data-ready]) .lobby-card .ghost { opacity: .5; pointer-events: none; }
body:not([data-ready]) .lobby-card::after {
  content: '준비 중…'; display: block; text-align: center; color: var(--fg-dim);
  font-size: .8rem; margin-top: 10px;
}

.build { text-align: right; font-size: .62rem; color: var(--fg-dim); margin: 0 0 2px; }

/* ── 대기실 ─────────────────────────────────────────── */
.waitroom {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: rgba(6,9,15,.62); backdrop-filter: blur(2px);
}
.waitroom.hidden { display: none; }
.wr-card {
  width: min(92vw, 470px); text-align: center; padding: 22px 22px 18px;
  background: var(--panel, #121826); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.wr-card h2 { margin: 0 0 6px; font-size: 1.25rem; }
.wr-sub { margin: 0 0 14px; font-size: .82rem; color: var(--fg-dim); line-height: 1.5; }
.wr-code {
  display: block; font-size: 2.3rem; font-weight: 900; letter-spacing: .22em;
  color: var(--gold); background: rgba(245,166,35,.10); border: 1px dashed rgba(245,166,35,.5);
  border-radius: 12px; padding: 10px 8px 10px 18px; margin-bottom: 14px; font-variant-numeric: tabular-nums;
}
.wr-row { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.wr-row button { flex: 1 1 170px; }
.wr-status { margin: 0 0 4px; font-size: .8rem; }
.wr-status b { color: var(--gold); }
.wr-hint { margin: 0; font-size: .72rem; color: var(--fg-dim); }

/* ── 스폰 보호 표시 ─────────────────────────────────────────────────────────
   🔴 내 보호 상태가 «나에게» 보여야 한다. 종전엔 남의 무적만 아바타를 하얗게 칠했고
      정작 본인은 보호 중인지 알 수 없어, 있으나 마나였다(2026-08-29 사용자 요청). */
.shield {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: 999px;
  background: rgba(10, 22, 40, .82); border: 2px solid #7fd8ff;
  color: #dff2ff; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 0 24px rgba(127, 216, 255, .55);
  pointer-events: none; z-index: 6;
}
.shield b { font-variant-numeric: tabular-nums; color: #fff; }
.shield-ring {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 3px solid #7fd8ff; box-shadow: 0 0 10px #7fd8ff inset;
  animation: shield-pulse 1s ease-in-out infinite;
}
@keyframes shield-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* 보호 중에는 화면 테두리가 파랗게 «더» 빛난다 — 시선을 어디 두든 보인다.
   ⚠️ .teamedge.shielded 단독으로 쓰면 안 된다. .teamedge.red 와 특정도가 같은데 뒤에 있어서
      팀 색 테두리를 통째로 덮어버린다(내 팀이 뭔지 안 보이게 된다). 팀별로 겹쳐 쓴다. */
.teamedge.red.shielded {
  box-shadow: inset 0 0 0 3px rgba(255,93,108,.85), inset 0 0 90px 14px rgba(127,216,255,.55);
}
.teamedge.blue.shielded {
  box-shadow: inset 0 0 0 3px rgba(79,168,255,.85), inset 0 0 90px 14px rgba(127,216,255,.55);
}

/* ── 나가기 메뉴 ───────────────────────────────────────────────────────────
   🔴 .hud 는 pointer-events:none 이라 그 안에 두면 클릭이 안 먹는다. 바깥에 둔다. */
.btn-menu {
  position: fixed; right: .8rem; top: .8rem; z-index: 8;
  width: 2.6rem; height: 2.6rem; border-radius: .7rem;
  background: rgba(10, 18, 32, .72); border: 1px solid rgba(255,255,255,.22);
  color: #e8eefc; font-size: 1.2rem; cursor: pointer;
}
.btn-menu:hover { background: rgba(20, 34, 58, .9); }
.pause {
  position: fixed; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 16, .72);
}
.pause.hidden { display: none; }
.pause-card {
  background: #101a2c; border: 1px solid rgba(255,255,255,.16);
  border-radius: 1rem; padding: 1.6rem 1.8rem; text-align: center;
  min-width: 18rem; box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.pause-card h2 { margin: 0 0 .3rem; color: #eaf1ff; }
.pause-note { margin: 0 0 1.1rem; color: #9fb0cc; font-size: .92rem; }
.pause-card .btn { display: block; width: 100%; margin: .45rem 0; padding: .7rem; border-radius: .6rem; cursor: pointer; font-weight: 700; }
.pause-card .btn.primary { background: #3d7bff; color: #fff; border: none; }
.pause-card .btn.ghost { background: transparent; color: #ffb4b4; border: 1px solid rgba(255,120,120,.45); }
.pause-card .btn.ghost:hover { background: rgba(255,90,90,.14); }
.pause-keys { text-align: left; margin: 0 0 1rem; padding: .7rem .85rem; background: rgba(255,255,255,.05); border-radius: .55rem; }
.pause-keys p { margin: .28rem 0; color: #c9d6ee; font-size: .88rem; }
.pause-keys p.dim { color: #8fa3c4; font-size: .82rem; margin-top: .5rem; }
.pause-keys kbd { display: inline-block; padding: .05rem .35rem; margin-right: .15rem; border-radius: .25rem; background: #1d2b45; border: 1px solid rgba(255,255,255,.2); font-size: .8rem; }

/* ── 저격 조준경 ───────────────────────────────────────────────────────────
   🔴 총이 화면 가운데를 가려 «조준경과 화살표»가 안 보였다(2026-08-29 사용자 실측).
      정조준 시 뷰모델을 감추고 이 오버레이로 대신한다. */
.scope { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.scope.hidden { display: none; }
.scope::before {   /* 원형 시야 밖을 어둡게 */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 30vh, rgba(0,0,0,.92) 32vh);
}
.scope-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 60vh; height: 60vh; border-radius: 50%;
  border: 3px solid rgba(220,240,255,.75); box-shadow: 0 0 40px rgba(0,0,0,.7) inset;
}
.scope-v, .scope-h { position: absolute; background: rgba(220,240,255,.85); }
.scope-v { left: 50%; top: 20%; width: 1px; height: 60%; transform: translateX(-50%); }
.scope-h { top: 50%; left: 20%; height: 1px; width: 60%; transform: translateY(-50%); }
/* 가운데는 비워 표적이 가려지지 않게 한다 */
.scope-v::after, .scope-h::after { content: ''; position: absolute; background: transparent; }
.scope-mark { position: absolute; background: #ffdf6b; }
.scope-mark-t { left: 50%; top: calc(50% - 3.2vh); width: 2px; height: 1.4vh; transform: translateX(-50%); }
.scope-mark-b { left: 50%; top: calc(50% + 1.8vh); width: 2px; height: 1.4vh; transform: translateX(-50%); }
.scope-mark-l { top: 50%; left: calc(50% - 3.2vh); height: 2px; width: 1.4vh; transform: translateY(-50%); }
.scope-mark-r { top: 50%; left: calc(50% + 1.8vh); height: 2px; width: 1.4vh; transform: translateY(-50%); }
.scope-zoom { position: absolute; left: 50%; top: calc(50% + 20vh); transform: translateX(-50%); color: #ffdf6b; font-size: 1.1rem; }

/* ── 큰 체력(에너지) ───────────────────────────────────────────────────────
   🔴 «내 에너지를 크게 보여줘야지»(2026-08-29). 우하단 작은 바는 전투 중 눈에 안 들어온다. */
.bighp {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .9rem; border-radius: .8rem;
  background: rgba(8, 16, 30, .74); border: 1px solid rgba(255,255,255,.16);
  pointer-events: none; z-index: 5;
}
.bighp-label { color: #9fb3d4; font-size: .82rem; font-weight: 700; }
.bighp-track { width: 20rem; height: 1.15rem; border-radius: .6rem; background: rgba(255,255,255,.12); overflow: hidden; }
/* 🔴 물감이 «차오르는» 게이지. 0% = 깨끗, 100% = 흠뻑 젖어 정지. */
.bighp-fill { height: 100%; width: 0%; border-radius: .6rem; background: linear-gradient(90deg,#7fd8ff,#bfeaff); transition: width .12s linear; }
.bighp-fill.mid { background: linear-gradient(90deg,#ffc861,#ffe0a0); }
.bighp-fill.low { background: linear-gradient(90deg,#ff5d6c,#ff9aa4); animation: bighp-blink .55s ease-in-out infinite; }
@keyframes bighp-blink { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.bighp b { color: #eaf2ff; font-size: 1.5rem; font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }


/* 🔴 세로 경고 — 터치 기기에서 세로일 때만. 가장 위에 덮어 «놀 수 없는 상태»를 막는다. */
.rotate {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center;
  background: rgba(8, 11, 20, .97); padding: 24px; text-align: center;
}
.rotate.hidden { display: none; }
.rot-card { max-width: 420px; }
.rot-icon {
  font-size: 74px; line-height: 1; margin-bottom: 14px;
  display: inline-block; animation: rot-tip 1.8s ease-in-out infinite;
}
/* 아이콘이 실제로 «눕는» 동작을 보여 준다 — 글자를 못 읽는 저학년에게 이게 설명이다 */
@keyframes rot-tip {
  0%, 45% { transform: rotate(0deg); }
  70%, 100% { transform: rotate(90deg); }
}
.rotate h2 { margin: 0 0 10px; font-size: 1.5rem; color: var(--accent2); }
.rotate p { margin: 0 0 6px; color: var(--fg); line-height: 1.6; }
.rot-hint { color: var(--fg-dim); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .rot-icon { animation: none; } }


/* 🔴 **가로로 누운 폰·태블릿**(2026-08-30 사용자 요청 «스마트폰도 되게 하자»).
   기존 모바일 규칙은 `max-width: 720px` 뿐이라 가로 폰(932×323)에 **하나도 안 걸린다** —
   폰 가로의 문제는 «좁다»가 아니라 «납작하다»이기 때문이다. 높이로 잡아야 한다.
   실측(932×323): 문제 카드가 max-height 33vh=107px 로 잘려 보기 4개 중 2개만 보였고,
   분사·점프 버튼이 그 위에 겹쳐 앉았다. 즉 «문제를 읽을 수도, 고를 수도» 없었다. */
@media (max-height: 470px) and (orientation: landscape) {
  /* 카드를 좌우 조작부 «사이»로 좁힌다 — 겹치면 둘 다 못 쓴다 */
  /* 🔴 상단 대시보드를 **한 줄로 눕히고 화면 좌우를 다 쓴다**(2026-08-30 사용자 지시).
     종전엔 세로로 세 줄(점수 / 목표바 / 우세문구 / 내팀안내)이 쌓여 90px 가까이 먹었고,
     그만큼 문제 카드가 아래로 밀려 **보기 4개 중 2개가 화면 밖으로** 나갔다.
     납작한 화면에서 세로 픽셀은 가장 비싼 자원이다 — 가로로 펴면 그대로 카드 높이가 된다. */
  .hud-top {
    left: 0; right: 0; transform: none; width: 100%; min-width: 0;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 3px 74px 4px 12px;          /* 오른쪽은 ☰ 메뉴 버튼 자리를 비운다 */
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .topline { gap: 9px; flex: 0 0 auto; }
  .team-score { font-size: 1.15rem; min-width: 0; }
  .clock-cap, .mapname { display: none; }   /* 한 줄에 들어가려면 곁가지를 접는다 */
  .goal { flex: 1 1 auto; min-width: 110px; }
  .goal-cap { font-size: .66rem; }
  .lead { flex: 0 0 auto; font-size: .72rem; white-space: nowrap; }
  .myteam { margin-top: 0; flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; font-size: .66rem; padding: 3px 8px; }
  .myteam .mk { padding: 1px 5px; }

  /* 🔴 문제 카드는 **화면을 가려도 된다**(2026-08-30 사용자 지시:
     «문제 풀때는 문제카드가 앞에는 가려도 되.. 문제는 반드시 나와야지»).
     조작 버튼을 피해 폭을 좁히면 글자가 작아져 문제를 못 읽는다 — 그건 본말전도다.
     문제를 푸는 동안은 어차피 서서 답을 고르는 시간이고, 답하면 카드가 사라진다.
     그래서 좌우를 꽉 채우고 글자를 키운다. 버튼이 가려지는 건 감수한다. */
  .qcard {
    bottom: 8px; max-height: calc(100% - 48px); padding: 8px 12px 10px; gap: 6px;
    width: calc(100% - 16px);
  }
  .q-text { font-size: 1.06rem; }
  .choice { padding: 8px 11px; min-height: 40px; font-size: .98rem; }
  /* 🔴 큰 물감 게이지가 화면 아래 한가운데 고정돼 **문제 보기 3·4번을 덮는다**(실측).
     납작한 화면에서는 카드 «위»로 옮기고 폭을 줄인다 — 겹치면 둘 다 못 읽는다. */
  /* 가운데 두면 «문제를 풀 때까지 안전합니다» 안내와 겹친다 — 왼쪽으로 붙인다 */
  .bighp {
    bottom: auto; top: 42px; left: 10px; transform: none;
    padding: .2rem .5rem; gap: .35rem;
  }
  .bighp-label { font-size: .66rem; }
  .bighp-track { width: 8rem; height: .6rem; }
  /* 무기 이름표는 분사·점프 버튼과 겹친다. 무기는 로비에서 고른 것이라 여기서 안 보여도 된다 */
  .wpn-label, .tier-label { display: none; }
  .hud-right { transform: scale(.72); transform-origin: 100% 100%; }
  /* 상단 한 줄에서 목표 문구와 우세 문구가 서로 위로 올라탄다 — 목표 문구를 접는다
     (같은 내용이 «BLUE 우세 15% 대 2%» 쪽에 이미 들어 있다) */
  .goal-cap { display: none; }
  .q-text { line-height: 1.34; }
  .q-choices { grid-template-columns: 1fr 1fr; gap: 5px; }
  .qhead { gap: 7px; }
  .q-subject { font-size: .68rem; padding: 2px 6px; }
  .q-kind { display: none; }              /* 한 줄이라도 아끼면 보기가 한 줄 더 산다 */
  /* 순위표는 카드 왼쪽 위를 덮는다 — 납작한 화면에서는 접는다(Tab 으로는 계속 볼 수 있다) */
  .rank { display: none; }
  .hud-top { padding: 4px 10px 5px; gap: 3px; }
  .myteam { font-size: .78rem; }
  /* 조작부도 같이 줄인다 — 큰 버튼이 화면의 절반을 먹는다 */
  .stick { left: 14px; bottom: 12px; width: 104px; height: 104px; }
  .knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .tbtn.fire { right: 16px; bottom: 14px; width: 76px; height: 76px; }
  .tbtn.jump { right: 100px; bottom: 16px; width: 56px; height: 56px; }
  .tbtn.ask  { right: 20px; bottom: 98px; width: 56px; height: 56px; }
}

/* ── 레벨 · 일간 랭킹 ─────────────────────────────────────── */
.growbox { margin-top: 14px; padding: 12px 13px 10px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: var(--r); }
.lvrow { display: flex; align-items: center; gap: 10px; }
.lvbadge { flex: none; min-width: 52px; text-align: center; padding: 5px 8px; border-radius: 9px;
  background: linear-gradient(180deg, var(--accent2), var(--accent)); color: #241a05;
  font-weight: 800; font-size: .96rem; letter-spacing: .02em; }
.lvmid { flex: 1 1 auto; min-width: 0; }
.lvtitle { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.lvbar { height: 7px; border-radius: 5px; background: #0e1524; overflow: hidden; }
/* 🔴 초기 폭은 CSS 에서 준다. 마크업의 style="" 속성은 CSP style-src 'self' 가
   그대로 차단해 콘솔 오류가 났다 — DoD D26(«CSP 위반 0건»)이 거짓이었다(2026-09-04 실측). */
.lvbar > i { display: block; width: 0; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--ok), var(--accent2)); transition: width .5s ease; }
.lvnext { flex: none; font-size: .78rem; color: var(--fg-dim); }

.rankhead { margin: 12px 0 6px; font-size: .92rem; color: var(--fg-dim); font-weight: 700; }
.rankhead .hint { font-style: normal; font-weight: 400; font-size: .76rem; }
.ranklist { list-style: none; margin: 0; padding: 0; }
.ranklist li { display: flex; align-items: baseline; gap: 8px; padding: 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,.05); font-size: .9rem; }
.ranklist li:last-child { border-bottom: 0; }
.rank-note { margin: 6px 2px 0; font-size: 12px; line-height: 1.45; opacity: .78; }
.ranklist .rk { flex: none; width: 1.6em; text-align: right; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.ranklist li:nth-child(1) .rk { color: var(--gold); font-weight: 800; }
.ranklist li:nth-child(2) .rk, .ranklist li:nth-child(3) .rk { color: var(--accent2); font-weight: 700; }
.ranklist .rn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranklist .rtag { flex: none; font-size: .72rem; color: var(--fg-dim); }
.ranklist .rs { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; }
.ranklist .rank-empty { color: var(--fg-dim); justify-content: center; }
.rank-yday { margin: 7px 0 0; font-size: .78rem; }
/* 🔴 «묵은 랭킹»임을 밝히는 줄 — 점수판 자체보다 눈에 덜 띄되, 못 보고 지나치면 안 된다. */
.rank-note { margin: 4px 0 0; font-size: .74rem; color: var(--accent); }
.room-stale { font-size: .74rem; color: var(--accent); margin: 0 0 6px; }

/* ── 라운드 종료 카운트다운 ─────────────────────────────── */
/* 🔴 pointer-events:none — 조준 한가운데에 뜨는 물건이라 클릭을 먹으면 그 순간 못 쏜다. */
.countdown { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  font-size: clamp(4rem, 16vh, 9rem); font-weight: 900; line-height: 1;
  color: var(--accent2); text-shadow: 0 0 26px rgba(0,0,0,.85), 0 4px 0 rgba(0,0,0,.5);
  pointer-events: none; z-index: 40; font-variant-numeric: tabular-nums; }
.countdown.tick { animation: cd-pop .5s ease-out; }
.countdown.last3 { color: var(--red); }
.countdown .cd-cap { display: block; font-size: .2em; font-weight: 700; letter-spacing: .08em;
  color: var(--fg); text-align: center; margin-top: .12em; opacity: .9; }
@keyframes cd-pop { 0% { transform: translate(-50%,-50%) scale(1.5); opacity: .2; }
                    40% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
                    100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
/* 흔들림 줄이기를 켰으면 커졌다 작아지는 연출을 끈다 */
body.reduce-motion .countdown.tick { animation: none; }
@media (prefers-reduced-motion: reduce) { .countdown.tick { animation: none; } }
/* 폰 가로에서는 문제 카드를 가리지 않게 위로 올린다 */
@media (max-height: 470px) and (orientation: landscape) {
  .countdown { top: 26%; font-size: clamp(2.6rem, 13vh, 4.4rem); }
}

/* ── 열린 방 목록 ────────────────────────────────────────── */
/* 끊김 안내 — «다시 들어가기»가 눈에 보이는 자리에 남아 있어야 한다 */
.reconnect { margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid #f0a63a55; background: linear-gradient(180deg, #f0a63a1f, #f0a63a0d);
  display: flex; flex-direction: column; gap: 10px; }
.reconnect .rc-text { display: flex; flex-direction: column; gap: 2px; }
.reconnect .rc-text strong { color: #f0c07a; font-size: .98rem; }
.reconnect .rc-text span { color: var(--fg-dim); font-size: .84rem; line-height: 1.45; }
.reconnect .rc-btns { display: flex; gap: 8px; align-items: center; }
.reconnect .rc-btns .primary { flex: 1; }
.reconnect #rc-code { letter-spacing: .08em; }

.openrooms .label { display: flex; align-items: center; justify-content: space-between; }
.ghost.tiny { padding: 3px 9px; font-size: .76rem; border-radius: 8px; }
.roomlist { display: flex; flex-direction: column; gap: 6px; }
.roomlist .room-empty { margin: 0; padding: 10px 2px; color: var(--fg-dim); font-size: .86rem; text-align: center; }
.room { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel2);
  color: var(--fg); font: inherit; cursor: pointer; }
.room:hover, .room:focus-visible { border-color: var(--accent); background: #23304a; }
.room .r-main { flex: 1 1 auto; min-width: 0; }
.room .r-title { display: block; font-weight: 700; font-size: .95rem; }
.room .r-sub { display: block; font-size: .78rem; color: var(--fg-dim); margin-top: 2px; }
.room .r-people { flex: none; font-variant-numeric: tabular-nums; font-weight: 800; font-size: .95rem; }
.room .r-badge { flex: none; padding: 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.room .r-badge.wait { background: rgba(61,220,132,.16); color: var(--ok); }
.room .r-badge.live { background: rgba(245,166,35,.16); color: var(--accent2); }
.pubcheck { display: block; margin-top: 12px; line-height: 1.5; }
.pubcheck .hint { display: block; margin-left: 26px; }
.wr-rooms { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 11px; }
.wr-rooms-head { font-size: .82rem; color: var(--fg-dim); margin-bottom: 7px; font-weight: 700; }
.wr-rooms .roomlist { max-height: 148px; overflow-y: auto; }

/* ── 물감 상점 ─────────────────────────────────────────────
   🔴 아이가 «무엇을 사는지»를 글이 아니라 **눈으로** 확인해야 한다 — 그래서 화면의
      절반은 살아 움직이는 3D 미리보기다. 카드에 색 동그라미만 찍어 두면
      «샀는데 생각한 색이 아니네»가 반드시 나온다. */
.coinrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--line);
}
.coinbadge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #3a2f12, #2a230f);
  border: 1px solid #5d4a17; color: var(--accent2);
  border-radius: 999px; padding: 6px 13px; font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.coinbadge.big { font-size: 17px; padding: 8px 16px; }
.coinhint { color: var(--fg-dim); font-size: 13px; flex: 1 1 auto; }
.shopbtn { flex: 0 0 auto; padding: 8px 16px; }

#shop {
  background:
    radial-gradient(1000px 560px at 50% -10%, #1c2740 0%, transparent 62%),
    linear-gradient(180deg, #0b0f17 0%, #070a11 100%);
  overflow: auto; padding: 16px; align-items: flex-start;
}
.shop-wrap {
  width: min(1080px, 100%); margin: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; padding: 18px;
  box-shadow: var(--sh);
}
.shop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.shop-head h2 { margin: 0; font-size: 22px; flex: 1 1 auto; text-align: center; }
.shop-head .ghost { flex: 0 0 auto; padding: 8px 12px; }

.shop-body { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .shop-body { grid-template-columns: 1fr; } }

.shop-view {
  background: #0d1220; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
}
.shop-canvas { width: 100%; aspect-ratio: 4 / 3; display: block; background: #0d1220; }
.shop-view-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700;
}
.shop-team { margin: 0; font-size: 13px; font-weight: 500; color: var(--fg-dim); }

.shop-tabs { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.shop-tab {
  flex: 1 1 auto; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: var(--panel2); color: var(--fg-dim); border: 1px solid var(--line);
  font: inherit; font-weight: 700; font-size: 14px;
}
.shop-tab:hover { color: var(--fg); }
.shop-tab.selected { background: #26324c; color: var(--fg); border-color: var(--accent); }
.shop-hint { color: var(--fg-dim); font-size: 13px; margin: 0 0 10px; }

.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
  max-height: 46vh; overflow: auto; padding-right: 4px;
}
@media (max-width: 860px) { .shop-grid { max-height: none; } }
.shop-item {
  text-align: left; padding: 11px 12px; border-radius: 12px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); color: var(--fg); font: inherit;
  display: flex; flex-direction: column; gap: 3px;
}
.shop-item:hover { border-color: #3c4c72; }
.shop-item.selected { border-color: var(--accent); background: #26324c; }
.shop-item.locked { opacity: .78; }
.shop-item .si-name { font-weight: 800; font-size: 15px; }
.shop-item .si-desc { color: var(--fg-dim); font-size: 12px; }
.shop-item .si-tag { font-size: 12.5px; font-weight: 800; margin-top: 3px; }
.shop-item .si-tag.price { color: var(--accent2); }
.shop-item .si-tag.short { color: var(--fg-dim); font-weight: 600; }
.shop-item .si-tag.own { color: var(--ok); }
.shop-item .si-tag.on { color: var(--accent); }
.shop-swatch { display: flex; gap: 4px; margin-top: 2px; }
.shop-swatch i { width: 18px; height: 12px; border-radius: 3px; border: 1px solid #0006; }

.shop-act { display: flex; gap: 8px; margin-top: 12px; }
.shop-act button { flex: 1 1 auto; }
.shop-note {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--fg-dim); font-size: 12.5px; line-height: 1.6;
}
.result-coin {
  margin: 6px 0 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--accent2);
}
.result-coin em { font-style: normal; color: var(--fg-dim); font-weight: 500; font-size: 13px; }

/* ── v3 로비: 한 화면(2026-10-07 «쭉 늘어진 느낌 → 한 화면에 세련되게») ───────────────────── */
#lobby { overflow: hidden; padding: 0; align-items: stretch; }
.l2 { width: 100%; height: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column;
  gap: clamp(8px, 1.6vh, 16px); padding: clamp(10px, 2.2vh, 22px) clamp(12px, 2.4vw, 28px); }
/* 숨은 안내 줄(재접속·멀티 막힘)이 끼어도 카드가 남는 높이를 다 먹는다 — grid 행 순서는 숨은 칸 때문에 어긋났다 */
.l2-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.l2-brand { margin: 0 auto 0 0; font-size: clamp(20px, 3.4vh, 30px); letter-spacing: -.5px; white-space: nowrap; }
.l2-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; color: var(--fg); font: inherit; font-size: 14px; min-height: 40px; }
button.l2-chip { cursor: pointer; } button.l2-chip:hover { border-color: var(--accent); }
.l2-chip.gt { padding: 2px 6px; } .l2-chip.gt .ctl { background: transparent; border: 0; color: var(--fg); padding: 6px 4px; min-height: 34px; }
.school-chip b { max-width: 13em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l2-coin { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #3a2a08, #261b05);
  border: 1px solid #6b4f12; color: var(--accent2); border-radius: 999px; padding: 6px 14px; font-size: 16px; min-height: 40px; }
.l2-coin b { font-size: 18px; min-width: 1.6em; text-align: right; }
.l2-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--fg); font-size: 18px; cursor: pointer; }
.l2-cards { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.4vw, 16px); min-height: 0; max-height: 56vh; }
.l2-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; text-align: left;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.08); padding: clamp(12px, 2.2vh, 22px); color: #fff; cursor: pointer; font: inherit;
  min-height: 0; overflow: hidden; box-shadow: var(--sh); transition: transform .12s ease, box-shadow .12s ease; }
.l2-card:hover, .l2-card:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.55); outline: none; }
.l2-card .ic { position: absolute; top: clamp(10px, 2vh, 18px); right: 14px; font-size: clamp(30px, 7vh, 64px); opacity: .9; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.l2-card b { font-size: clamp(18px, 3.2vh, 28px); letter-spacing: -.3px; }
.l2-card small { font-size: clamp(12px, 1.8vh, 14px); opacity: .88; line-height: 1.35; }
.c-quiz  { background: linear-gradient(160deg, #f5a623 0%, #c06a12 100%); }
.c-solo  { background: linear-gradient(160deg, #3ddc84 0%, #138a52 100%); }
.c-multi { background: linear-gradient(160deg, #4fa8ff 0%, #2459c4 100%); }
.c-shop  { background: linear-gradient(160deg, #b277ff 0%, #6a35c4 100%); }
.l2-bottom { flex: 0 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(8px, 1.4vw, 16px); min-height: 0; }
.l2-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-height: 0; max-height: 26vh; overflow: hidden; }
.l2-box .label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-dim); margin-bottom: 6px; }
.l2-box .roomlist { max-height: calc(26vh - 40px); overflow: auto; }
#lobby .reconnect { margin: 0; }
.l2-sitelink { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 6px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
  color: var(--fg-dim); font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; }
@media (max-width: 760px) { .l2-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-height: 520px) { .l2-bottom { display: none; } .l2-cards { max-height: none; } .l2-card small { display: none; } }

/* 🏆 첫 화면 학교 랭킹 — 카드 위 고정, 모든 화면 크기에서 보인다(2026-10-10 사용자 «접지마, 랭킹 위에»).
   줄바꿈 가능한 가로 나열이라 좁거나 납작한 화면에서도 스크롤 없이 상위 5개(+내 학교)가 읽힌다. */
.l2-topboard { flex: 0 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 14px; min-height: 0; }
.l2-topboard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.l2-topboard-head .ic { font-size: 17px; }
.l2-topboard-head b { font-size: 14px; color: var(--accent2); }
.l2-topboard-list { display: flex; flex-wrap: wrap; row-gap: 2px; column-gap: 18px; }
.l2-topboard-list li { border-bottom: 0; padding: 2px 0; flex: 0 0 auto; }
.l2-topboard-list li.me { color: var(--accent2); font-weight: 700; }
.l2-topboard-list li.sep { margin-left: 2px; padding-left: 14px; border-left: 1px dashed var(--line); }
.l2-topboard .rank-note { margin: 2px 2px 0; }
/* 1.4 — 첫 화면 통계 줄 · 전체 순위(더보기). 글자 ≥12px · 누르는 곳 ≥44px */
.l2-topboard-head { flex-wrap: wrap; }
.l2-more { margin-left: auto; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--accent2); font-size: .85rem; cursor: pointer; }
.l2-more[hidden] { display: none; }
.l2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; padding: 2px 0 4px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
.l2-stats span { display: flex; flex-direction: column; min-width: 0; }
.l2-stats b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.l2-stats small { font-size: .8rem; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-tabs { display: flex; gap: 8px; justify-content: center; }
.rank-tab { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); font-size: .95rem; cursor: pointer; }
.rank-tab.on { background: var(--accent2); color: #04121c; border-color: transparent; font-weight: 700; }
.rank-all-list { max-height: min(56vh, 520px); overflow-y: auto; padding: 0 4px; touch-action: pan-y; }
.rank-all-list li { font-size: .95rem; }
.rank-all-list li.me { color: var(--accent2); font-weight: 700; }
.rank-all-list .rtag { font-size: .8rem; }
.rank-close { min-height: 44px; }
@media (max-height: 560px) {
  .l2-stats { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .l2-stats span { flex-direction: row; align-items: baseline; gap: 4px; }
  .l2-stats b { font-size: .9rem; }
  .rank-all-list { max-height: 40vh; }
  .l2-topboard { padding: 6px 12px; }
  .l2-topboard .rank-note { display: none; }
  .l2-topboard-list { font-size: .82rem; }
}

/* 시트 */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(4,7,13,.66); backdrop-filter: blur(3px); padding: 12px; }
.sheet-card { width: min(560px, 100%); max-height: calc(100vh - 24px); overflow: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--sh); display: flex; flex-direction: column; gap: 10px; }
.sheet-card.wide { width: min(920px, 100%); }
.sheet-card header { display: flex; align-items: center; gap: 10px; }
.sheet-card header h2 { margin: 0 auto 0 0; font-size: 20px; }
.sheet-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; font-size: 16px; }
.sheet .cost { font-size: 14px; color: var(--accent2); }
.sheet-act { display: flex; justify-content: flex-end; gap: 10px; }
.sheet .big { min-height: 52px; font-size: 18px; }
.setup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; }
.setup-grid .span2 { grid-column: span 3; }
.setup-grid .weapons { display: flex; flex-wrap: wrap; gap: 6px; }
.setup-grid .wpn { flex: 1 1 120px; padding: 8px 10px; }
.setup-grid .wpn-desc { display: none; }
.setup-grid .wpn.selected .wpn-desc { display: block; }
.sheet.solo .only-multi, .sheet.multi .only-solo { display: none !important; }
@media (max-width: 760px) { .setup-grid { grid-template-columns: 1fr; } .setup-grid .span2 { grid-column: auto; } }

/* 문제 묶음 */
.quizbody { display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.qcard .qsub { display: inline-block; font-size: 12px; color: var(--fg-dim); background: var(--panel); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.qcard .qtext { font-size: clamp(18px, 3vh, 24px); line-height: 1.45; margin: 0 0 12px; white-space: pre-line; }
.qcard .qchoices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qcard .qchoices button { min-height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; font-size: 17px; cursor: pointer; text-align: left; padding: 10px 14px; }
.qcard .qchoices button.on { border-color: var(--accent); background: #3a2a08; }
.qcard .qinput { width: 100%; font: inherit; font-size: 24px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); text-align: center; }
.qresult { display: grid; gap: 6px; }
.qresult li { list-style: none; background: var(--panel); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.qresult li.ok { border-left: 4px solid var(--ok); } .qresult li.no { border-left: 4px solid var(--bad); }
.qsum { font-size: 20px; } .qsum b { color: var(--accent2); }
.schoollist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.schoollist button { width: 100%; text-align: left; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; padding: 8px 12px; cursor: pointer; }
.schoollist button small { color: var(--fg-dim); margin-left: 6px; }
.sheet-card.scroll { max-height: calc(100vh - 24px); }

.l2-card .coinhint { font-size: .9em; opacity: .8; }
/* v3 설정 시트 — 모드가 6개로 늘어 폰 가로(844×390)에서 «혼자 시작»이 접힌 아래로 밀렸다(2026-10-07 실측). 시작 단추는 늘 보이게, 낮은 화면은 단추를 납작하게 */
.sheet-act { position: sticky; bottom: -16px; margin: 0 -18px -16px; padding: 10px 18px 14px; background: linear-gradient(to bottom, transparent, var(--bg2) 35%); z-index: 2; }
.setup-grid .wpn { flex: 1 1 84px; }
@media (max-height: 520px) {
  .setup-grid .wpn { padding: 5px 8px; min-height: 0; }
  .setup-grid .wpn.selected .wpn-desc { display: none; }
  .sheet-card { padding: 10px 14px; gap: 6px; }
  .sheet-act { margin: 0 -14px -10px; padding: 8px 14px 10px; bottom: -10px; }
}
/* 🔴 로비 문제 시트의 카드는 경기 중 문제 카드(.qcard = 화면 아래 absolute 고정)와 이름이 같아 그 위치를 물려받았다 —
   폰 세로에서 카드가 시트 아래로 빠져 문제·보기가 «다음» 단추 뒤로 숨었다(2026-10-07 사용자 스크린샷). 시트 안에서는 흐름대로 둔다. */
.sheet .qcard { position: static; left: auto; bottom: auto; transform: none; width: auto; max-height: none; box-shadow: none;
  background: transparent; border: 0; padding: 0; overflow: visible; }
@media (max-width: 520px) {
  .sheet .qcard .qtext { font-size: 19px; }
  .sheet .qcard .qchoices { grid-template-columns: 1fr; gap: 8px; }
  .sheet .qcard .qchoices button { min-height: 48px; font-size: 16px; }
}
/* 🔴 모바일 브라우저 하단 도구막대: 100vh 는 막대에 가린 부분까지 센다 → 시트 아래 «혼자 시작»이 막대 뒤로 잘렸다(2026-10-07 사용자 폰 세로).
   보이는 높이(dvh)를 쓰고(미지원 브라우저는 위 vh 가 남는다), 세로 폰에서는 선택지 단추를 납작하게 */
.sheet { height: 100vh; height: 100dvh; }
.sheet-card, .sheet-card.scroll { max-height: calc(100dvh - 24px); }
.setup-grid .wpn { min-height: 0; }
@media (max-width: 520px) {
  .sheet { padding: 8px; }
  .sheet-card { padding: 12px 12px; }
  .sheet-act { margin: 0 -12px -12px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); bottom: -12px; }
  .setup-grid .wpn { padding: 8px 6px; flex: 1 1 30%; }
  .setup-grid .wpn-name { font-size: 15px; }
}
/* 🔴 상점 머리줄에 «보상 받기»를 끼운 뒤 폰 세로에서 4개가 한 줄에 눌려 글자가 한 자씩 세로로 쌓였다(2026-10-07 사용자 스크린샷).
   글자는 줄바꿈하지 않고, 좁으면 «보상 받기»를 둘째 줄 전체 폭으로 내린다 */
.shop-head h2, .shop-head .coinbadge, .shop-head .ghost { white-space: nowrap; }
#shop-bonus { flex: 0 1 auto; }
@media (max-width: 760px) {
  .shop-head { flex-wrap: wrap; }
  .shop-head h2 { font-size: 19px; }
  #shop-bonus { order: 9; flex: 1 1 100%; white-space: normal; padding: 10px 12px; }
  #shop-bonus small { display: block; font-size: 12px; opacity: .85; }
}

/* 입장료 안내(2026-10-07 사용자 «코인이 몇 개 있어야 시작인지 확실히 알려줘야지») */
.qgoal { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #1d2a1a; border: 1px solid #3d6b35; color: #cdf3c4; font-size: 15px; }
#setup-cost.short { color: var(--bad); }

#quiz-solo, #quiz-multi { background: var(--accent); color: #1a1205; border: 0; font-weight: 800; min-height: 48px; padding: 0 16px; border-radius: 12px; font-size: 16px; cursor: pointer; }
#quiz-next:not(.primary) { min-height: 48px; }
.sheet .qresult { padding-left: 0; list-style: none; }
@media (max-width: 520px) { #sheet-quiz .sheet-act { flex-wrap: wrap; } #quiz-solo, #quiz-multi { flex: 1 1 45%; } #quiz-next:not(.primary) { flex: 1 1 100%; } }

/* 상단 정지·당함·순위 한 줄 + 미니맵(2026-10-07 사용자) */
.kdbar { display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; overflow: hidden; margin-top: 4px; font-size: 13px; white-space: nowrap; pointer-events: none; }
.kdbar:empty { display: none; }
.kd-me { background: rgba(255,209,102,.18); border: 1.5px solid var(--gold, #ffd166); color: #ffe9a8; border-radius: 999px; padding: 2px 10px; }
.kd-me b { color: #fff; }
.kd-top { background: rgba(10,14,24,.6); border-radius: 999px; padding: 2px 9px; color: var(--fg); }
.kd-top.red b { color: var(--red); } .kd-top.blue b { color: var(--blue); }
.kd-top.me { outline: 1.5px solid var(--gold, #ffd166); }
.minimap { position: absolute; right: 10px; top: 128px; width: 150px; height: 150px; border-radius: 12px; pointer-events: none; z-index: 5; opacity: .92; box-shadow: 0 4px 18px rgba(0,0,0,.5); }
@media (max-width: 900px), (max-height: 520px) {
  .minimap { width: 104px; height: 104px; top: 74px; right: 8px; }
  .kdbar { font-size: 11px; gap: 6px; margin-top: 2px; }
  .kd-top:nth-of-type(n+4) { display: none; }
  .myteam .mk { display: none; }
}
@media (max-width: 900px), (max-height: 520px) {
  /* 폰 가로: 상단바가 한 줄이라 그 안에 끼우면 오른쪽 끝에 눌린다 — 상단바 바로 아래 가운데 따로 띄운다 */
  .kdbar { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 380px); z-index: 6; }
}
@media (max-width: 600px) and (orientation: portrait) { .kdbar { max-width: calc(100vw - 16px); top: 64px; } }
/* 폰 가로: 상단바 아래 줄은 왼쪽 «맞은 물감» 막대와 겹쳤다(2026-10-07 사용자 폰 스크린샷) — 그 막대 아래로 내린다 */
@media (max-width: 900px), (max-height: 520px) { .kdbar { top: 88px; max-width: calc(100vw - 260px); } }
/* 폰: 미니맵이 오른쪽 «장전» 단추와 겹쳤다(2026-10-07 사용자 — 주소창 때문에 화면 높이가 낮을 때). 오른쪽은 단추 자리라
   왼쪽 «맞은 물감» 막대 아래(조이스틱 위)로 옮기고, 낮은 화면일수록 작게 */
@media (max-width: 900px), (max-height: 520px) {
  .minimap { left: 8px; right: auto; top: 88px; width: min(96px, calc(100vh - 230px)); height: min(96px, calc(100vh - 230px)); }
}

/* 과목 고르기(2026-10-08 어휘 전용) */
.subj-pick { display: flex; gap: 8px; margin: 0 0 10px; }
.subj-pick button { flex: 1; min-height: 44px; border-radius: 12px; border: 2px solid var(--line, #2b3752); background: transparent; color: inherit; font-weight: 700; font-size: 16px; }
.subj-pick button[aria-checked="true"] { border-color: var(--accent, #f5a623); background: rgba(245,166,35,.16); }

/* @gb-juice-css v1 — kit/juice/juice.css. 게임 스타일시트 끝에 그대로 붙인다(CSP style-src 'self' 라 JS 가 <style> 을 넣지 않는다). */
.gbj-layer{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.gbj-pop{position:absolute;transform:translate(-50%,-50%) scale(var(--s));font:900 22px/1 system-ui,sans-serif;text-shadow:0 2px 0 #0008,0 0 12px currentColor;white-space:nowrap;animation:gbjPop .9s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes gbjPop{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s)*.3))}15%{opacity:1;transform:translate(-50%,-80%) scale(calc(var(--s)*1.35))}35%{transform:translate(calc(-50% + var(--dx)),-120%) scale(var(--s))}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260%) scale(calc(var(--s)*.9))}}
.gbj-punch{animation:gbjPunch .32s cubic-bezier(.2,2,.4,1)}
@keyframes gbjPunch{0%{transform:scale(1)}30%{transform:scale(var(--gbj-p))}100%{transform:scale(1)}}
.gbj-flash{position:absolute;inset:0;opacity:0}
.gbj-flash.gbj-go{animation:gbjFlash .35s ease-out forwards}
@keyframes gbjFlash{to{opacity:0}}
/* 가운데 큰 글자 — 자리는 게임이 --gbj-banner-top 으로 옮긴다(HUD 배너·선택 카드와 겹치지 않게 · 2026-10-12 끝까지 진화 실측). 좁은 화면에서 넘치지 않게 vw 로 줄인다 */
.gbj-banner{position:absolute;left:50%;top:var(--gbj-banner-top,40%);transform:translate(-50%,-50%);font:900 clamp(22px,8vw,44px)/1.1 system-ui,sans-serif;text-align:center;opacity:0;text-shadow:0 3px 0 #000a,0 0 24px currentColor;max-width:92vw;width:max-content}
.gbj-banner.gbj-go{animation:gbjBan var(--d,1.4s) cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes gbjBan{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(2deg)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.gbj-pop,.gbj-banner.gbj-go,.gbj-punch{animation-duration:.01s}}
/* 리로드 아레나 보강 — ① 이 게임의 #banner(24%)·#qcard(하단)와 안 겹치게 가운데 아래로 내린다
   (createJuice host 는 document.body 다 — #hud 는 로비 화면에서 display:none 이라 거기 걸면 로비에서 안 보인다)
   ② burst(파티클)는 juice.js 가 그리지 않는다("게임이 그린다") — 여기서 화면 공간 폭발 점을 찍는다(spawnBurst, boot.js) */
.gbj-banner { --gbj-banner-top: 60%; }
.gbj-dot{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;animation:gbjDot .55s ease-out forwards}
@keyframes gbjDot{0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--bx,0),var(--by,0)) scale(.4)}}
@media (prefers-reduced-motion:reduce){.gbj-dot{animation-duration:.01s}}
#school-skip { margin-top: 10px; width: 100%; min-height: 44px; }