:root { --gold-soft: #fff0c7; --hud-height: 88px; --side-width: 340px; }
[hidden] { display: none !important; }
body { overflow: hidden; }
.stage { position: relative; height: 100dvh; width: 100%; overflow: hidden; }
.hud { position: absolute; z-index: 10; top: 0; left: 0; right: 0; padding: 12px 14px; gap: 12px; flex-wrap: nowrap; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-left { flex: 1; gap: 12px; min-width: 0; }
.hud-right { gap: 8px; }
.game-brand {
  min-width: 0; line-height: 1.15; padding: 7px 14px; border-radius: 16px;
  background: rgba(16, 60, 70, .82); color: var(--paper); box-shadow: var(--lift);
}
.game-brand strong { display: block; font-size: 24px; font-weight: 900; letter-spacing: -.06em; }
.game-brand small { display: block; font-size: 10px; opacity: .8; margin-top: 4px; }
.crest { display: none; }
.hud-school { gap: 8px; }
.hud-school .who { max-width: 240px; }
.hud-school .names strong { font-size: 14px; }
.score { padding: 8px 12px; }
.score small { display: block; font-size: 10px; margin-top: 4px; }
.connection { display: none; }
.map-viewport { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; border-radius: 0; }
.map-badge { top: calc(var(--hud-height) + 4px); left: 14px; max-width: min(44ch, 40%); font-size: 12px; border-radius: 14px; }
.compass { top: calc(var(--hud-height) + 8px); right: calc(var(--side-width) + 30px); }
.map-controls { right: calc(var(--side-width) + 28px); bottom: 16px; flex-direction: column; }
.legend { bottom: 16px; font-size: 11px; gap: 12px; }
.map-hint { display: none; }
.panels {
  position: absolute; z-index: 8; top: var(--hud-height); right: 14px; bottom: 14px;
  width: var(--side-width); padding: 0; background: none; border-radius: 0;
  overflow-y: auto; overflow-x: hidden; gap: 10px; pointer-events: none; scrollbar-width: thin;
}
.panels > * { pointer-events: auto; flex: none; }
.panel {
  padding: 14px 16px; border-radius: 20px;
  background: rgba(255, 253, 246, .93); border: 1px solid rgba(29, 77, 89, .12);
  box-shadow: 0 12px 32px rgba(10, 41, 50, .18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.target { padding: 8px 4px; }
.target .region { display: block; }
.target .region h2 { font-size: 24px; margin-bottom: 8px; }
.target .region small { font-size: 12px; }
.target .owner { background: var(--paper); padding: 12px; border: 1px solid var(--line); margin: 20px 0; }
.target .meter { margin: 24px 0; }
.target .button { margin-top: 12px; }
.solving #target-panel, .ranking #target-panel, .ranking #quiz-panel { display: none; }
.solving .expedition { opacity: .85; }
.quiz { display: flex; flex-direction: column; min-height: 0; }
.quiz-head { gap: 8px; }
.quiz-target { font-size: 13px; }
.quiz-target small { font-size: 11px; line-height: 1.3; }
.pad-button.small { min-width: 44px; min-height: 44px; }
.pips { margin: 12px 0 4px; gap: 5px; }
.pips i { height: 8px; }
.quiz-caption { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--muted); }
.question { font-size: clamp(32px, 5vh, 48px); margin: 12px 0 8px; }
.quiz form { display: flex; flex-direction: column; gap: 8px; }
.question-answered .keypad { opacity: .4; pointer-events: none; }   /* 자리는 그대로 두어 창 크기가 바뀌지 않게 */
#answer { height: 52px; min-height: 44px; margin: 0; font-size: 28px; width: 100%; }
.keypad { gap: 6px; margin: 0; }
.keypad button { min-height: 44px; height: clamp(44px, 6vh, 56px); font-size: 22px; border-radius: 12px; }
.button.big { min-height: 48px; font-size: 17px; border-radius: 14px; padding: 8px 16px; }
.feedback { font-size: 12px; margin-top: 8px; }
.feedback .verdict { font-size: 18px; }
.feedback .callout { margin: 4px 0; padding: 6px 8px; font-size: 11px; }
.quiz .panel-foot { padding-top: 8px; font-size: 11px; }
.keypad button.wordy { white-space: nowrap; font-size: 13px; padding: 4px; }
.toast { top: calc(var(--hud-height) + 52px); bottom: auto; pointer-events: none; max-width: min(460px, calc(100% - 48px)); border-radius: 16px; }
#next-question { margin-top: 0; }
.rank { min-height: 0; }
.rank-row { padding: 8px 0; }
.expedition { position: absolute; left: 20px; bottom: 64px; width: min(304px, calc(100% - 100px)); padding: 16px; z-index: 4; background: var(--paper); border: 1px solid var(--line); border-bottom: 5px solid var(--gold); border-radius: 20px; box-shadow: var(--lift); }
.expedition-top { display: flex; align-items: center; gap: 10px; }
.mini-flag { width: 36px; height: 40px; display: grid; place-items: center; color: var(--accent); background: var(--gold-soft); border-radius: 12px; font-size: 28px; }
.expedition h2 { font-size: 15px; margin-top: 4px; }
.expedition .panel-eyebrow { font-size: 9px; letter-spacing: 0; }
#expedition-count { margin-left: auto; white-space: nowrap; font-size: 14px; }
.expedition-track { height: 8px; margin: 12px 0; background: var(--paper-2); border-radius: 10px; overflow: hidden; }
#expedition-fill { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 240ms ease; }
#expedition-message { font-size: 12px; color: var(--muted); }
.expedition .button { min-height: 44px; margin-top: 12px; padding: 8px; font-size: 13px; }
.expedition small { display: block; color: var(--muted); font-size: 9px; text-align: center; margin-top: 8px; }
.expedition.complete { border-bottom-color: var(--accent); }
dialog { max-height: 92dvh; overflow: auto; padding: 24px; }
.join-illustration { display: flex; align-items: center; gap: 12px; padding-right: 32px; margin-bottom: 12px; }
.join-illustration svg { width: 88px; height: 60px; }
.join-kicker { background: var(--gold-soft); color: var(--warning); font-size: 12px; font-weight: 800; padding: 8px 12px; border-radius: 10px; transform: rotate(-3deg); }
#join-dialog { width: min(500px, calc(100% - 24px)); }
#join-dialog h2 { font-size: 24px; letter-spacing: -.04em; }
#join-form { gap: 4px; margin-top: 8px; }
#school-search-field, #school-code-field { display: flex; flex-direction: column; gap: 4px; }
.search-status { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 4px 0; }
.school-results { display: grid; gap: 6px; max-height: 176px; overflow-y: auto; }
.school-result { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 8px; min-height: 48px; padding: 8px 12px; background: white; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.school-result strong { font-size: 14px; }
.school-result small { font-size: 11px; color: var(--muted); max-width: 45%; }
.school-result:hover, .school-result[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); }
.school-selected { display: flex; justify-content: space-between; gap: 8px; padding: 12px; background: var(--accent-soft); color: var(--accent); border-radius: 12px; margin-top: 4px; font-size: 13px; }
.school-selected span { font-size: 11px; }
.frontier { background: var(--accent-soft); padding: 12px; border-radius: 14px; margin-top: 12px; }
.frontier h3 { font-size: 14px; margin-bottom: 6px; }
.frontier .region-buttons { margin-top: 8px; }
.frontier .region-pill { background: var(--paper); }
dialog input:focus-visible, dialog select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 1200px) {
  :root { --side-width: 312px; }
  .game-brand { min-width: 92px; }
  .game-brand strong { font-size: 21px; }
  .hud-school .score:last-child { display: none; }
  .region-chip { max-width: 168px; }
}
@media (max-width: 960px) {
  :root { --hud-height: 112px; --side-width: 292px; }
  .hud { flex-wrap: wrap; gap: 4px; padding: 8px 0; }
  .hud-left, .hud-right { flex: 1 1 100%; }
  .hud-left { justify-content: space-between; }
  .hud-right { justify-content: flex-end; }
  .hud-school .who { max-width: 240px; }
  .score b { font-size: 14px; }
  .map-badge { font-size: 10px; }
  .expedition { left: 12px; padding: 12px; width: min(268px, calc(100% - 84px)); }
  .mini-flag { display: none; }
  .expedition h2 { font-size: 13px; }
  .panels { padding: 12px; }
}
@media (max-width: 820px) and (orientation: portrait) {
  .panels { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: min(52dvh, 420px); }
  .compass { display: none; }
  .map-controls { right: 12px; bottom: calc(min(52dvh, 420px) + 20px); }
  .legend { bottom: calc(min(52dvh, 420px) + 20px); }
  .expedition { width: 256px; bottom: calc(min(52dvh, 420px) + 64px); }
  .expedition small, .expedition .panel-eyebrow { display: none; }
  .expedition .button { margin-top: 8px; }
  .map-controls { flex-direction: row; }
  .legend { left: 12px; }
  .legend span:nth-child(2) { display: none; }
  .quiz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; gap: 4px 16px; }
  .quiz-head { grid-column: 1 / 3; }
  .quiz-head small { display: none; }
  .pips { grid-area: 2 / 1; margin: 4px 0; }
  .quiz-caption { grid-area: 3 / 1; }
  .question { grid-area: 4 / 1; align-self: center; font-size: clamp(28px, 6vw, 44px); margin: 0; }
  #answer-form { grid-column: 2; grid-row: 2 / 6; gap: 6px; }
  #answer { height: 44px; }
  .keypad button { height: 44px; min-height: 44px; font-size: 19px; }
  .keypad { gap: 4px; }
  .feedback { grid-area: 5 / 1; margin: 0; font-size: 11px; align-self: end; }
  #next-question { margin: 0; }
  .quiz .panel-foot { display: none; }
  .target { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; align-items: center; }
  .target .region { grid-column: 1 / 3; }
  .target .region h2 { display: inline; margin-right: 12px; }
  .target .owner, .target .meter { margin: 8px 0; }
  .target .button, .target .callout { grid-column: 1 / 3; margin: 0; }
  .rank-row { padding: 4px 0; }
}
@media (max-width: 480px) {
  .panels { left: 8px; right: 8px; bottom: 8px; max-height: min(58dvh, 376px); }
  .game-brand small { display: none; }
  .game-brand { min-width: 80px; }
  .game-brand strong { font-size: 20px; }
  .hud-school .who { max-width: 180px; padding: 6px; }
  .hud-school .names strong { font-size: 12px; }
  .hud-school .emblem { width: 24px; height: 24px; }
  .hud-school .score { display: none; }
  .hud-right { gap: 4px; }
  .region-chip { max-width: 144px; min-width: 0; font-size: 11px; padding: 0 8px; }
  .hud .pad-button { min-width: 44px; min-height: 44px; }
  .expedition { display: none; }
  .solving .expedition { display: none; }
  .map-controls { gap: 4px; }
  .map-badge { max-width: calc(100% - 24px); font-size: 9px; }
  .panels { padding: 10px; }
  .quiz { gap: 4px 10px; }
  .question { font-size: 28px; }
  .quiz-target { font-size: 12px; }
  .button.big { font-size: 14px; padding: 8px; }
  .target .region h2 { display: block; font-size: 21px; }
  .target .region small { font-size: 11px; }
  .target .owner { padding: 8px; }
  .owner strong { font-size: 13px; }
  .owner span { font-size: 10px; }
  .meter-top b { font-size: 11px; }
  .meter-top span { font-size: 16px; }
  .meter-note { font-size: 10px; }
}
@media (max-height: 800px) and (min-width: 821px) {
  :root { --hud-height: 72px; }
  .panels { padding: 10px; }
  .question { font-size: 32px; margin: 6px 0; }
  .quiz-target small { display: none; }
  .pips { margin: 6px 0; }
  .keypad button { height: 44px; }
  .quiz .panel-foot { display: none; }
  #answer { height: 44px; }
}

/* Actual target progress stays legible for small and large territories. */
#quiz-progress { display: flex; flex-wrap: wrap; max-height: 48px; overflow-y: auto; flex-shrink: 0; }
#quiz-progress i { flex: 0 0 16px; height: 16px; font-size: 12px; line-height: 12px; text-align: center; color: var(--paper); font-style: normal; }
#quiz-progress i.half { background: linear-gradient(90deg, var(--olive) 50%, #5a3a24 50%); }
.quiz-caption { flex-direction: column; gap: 4px; font-size: 12px; }
#quiz-gain { color: var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: 8px; font-size: 20px; }
@media (min-width: 821px) { .panels { max-height: none; } }
@media (max-width: 820px) and (orientation: portrait) { #quiz-step { display: block; } }
@media (max-height: 800px) and (min-width: 821px) {
  .quiz { padding: 8px 12px; }
  .quiz-head { min-height: 44px; }
  .quiz-target { line-height: 1.2; }
  .quiz-caption { font-size: 10px; }
  #quiz-gain { font-size: 16px; }
  .keypad { gap: 4px; }
  .question { margin: 4px 0; }
}
@media (max-width: 820px) and (orientation: portrait) {
  .solving .panels { max-height: min(64dvh, 500px); }
}
/* v1.3: 그림 문제(2학기 단원)가 생겨 한 줄 창은 높이 1050 까지 넘칠 수 있다 → 두 칸(왼쪽 문제 · 오른쪽 숫자판) 창을 높이 1050 까지 쓴다 */
@media (max-height: 1050px) and (min-width: 821px) {
  .solving .panels { width: 480px; }
  .quiz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; }
  .quiz-head { grid-column: 1 / 3; }
  #quiz-progress { grid-area: 2 / 1; }
  .quiz-caption { grid-area: 3 / 1; }
  .question { grid-area: 4 / 1; align-self: center; }
  #answer-form { grid-column: 2; grid-row: 2 / 6; }
  .feedback { grid-area: 5 / 1; }
  #next-question { margin: 0; }
}