/* 구구땅 — 양피지와 나무 테마.
   짙은 갈색 외곽선, 종이 패널, 나무 판자, 아래로 두께가 있는 통통한 버튼, 리본 제목.
   이미지 없이 CSS 로만 그린다(오프라인 교실에서도 똑같이 보이게). 배치는 game-layout.css 가 맡는다. */

:root {
  --outline: #3a2415;
  --paper: #fbf0d6;
  --paper-2: #f1dfb8;
  --paper-3: #e6cc98;
  --line: #d9bf8c;
  --ink: #3a2415;
  --muted: #7a5a3f;
  --wood: #8a5530;
  --wood-2: #6b3f22;
  --wood-3: #4d2c17;
  --wood-light: #a8703f;
  --red: #d9544b;
  --red-2: #a93a33;
  --teal: #2b9e9a;
  --teal-2: #1d7471;
  --olive: #97aa2c;
  --olive-2: #6e7d1c;
  --gold: #f2b53a;
  --gold-2: #c98a1d;
  --accent: #2b9e9a;
  --accent-hover: #248a86;
  --accent-soft: #e3f1dc;
  --r: 18px;
  --r-sm: 12px;
  --edge: 0 5px 0;                                 /* 버튼 두께 */
  --lift: 0 6px 0 rgba(58, 36, 21, .28), 0 14px 26px rgba(40, 22, 10, .22);
  --paper-grain:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 64%, rgba(122, 74, 42, .08) 0 1px, transparent 1.5px);
}

body { font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif; color: var(--ink); }
h1, h2, h3 { font-weight: 900; letter-spacing: -.02em; }

/* 크림색 글자에 두르는 갈색 테두리 */
.game-brand strong, .button.primary, .button.danger, .panel-eyebrow, .join-kicker,
.pad-button, .rank-row.mine .place {
  text-shadow: -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline),
               1px 1px 0 var(--outline), 0 2px 0 var(--outline);
}

/* ── 종이 ─────────────────────────────────────────────── */
.panel, .expedition, dialog, .toast {
  background:
    var(--paper-grain),
    radial-gradient(120% 90% at 50% 0%, #fff8e4 0%, var(--paper) 55%, var(--paper-2) 100%);
  background-size: 7px 7px, 11px 11px, auto;
  border: 3px solid var(--outline);
  box-shadow: inset 0 0 0 3px rgba(255, 250, 235, .7), inset 0 -8px 18px rgba(160, 110, 50, .16), var(--lift);
  color: var(--ink);
}
.panel { border-radius: var(--r); backdrop-filter: none; -webkit-backdrop-filter: none; }
.expedition { border-radius: var(--r); border-bottom-width: 3px; }
.expedition.complete { box-shadow: inset 0 0 0 3px rgba(255, 250, 235, .7), 0 6px 0 var(--teal-2), 0 14px 26px rgba(40, 22, 10, .22); }

/* 대화상자·문제 카드는 나무 액자에 끼운다 */
dialog, .panel.quiz {
  box-shadow:
    inset 0 0 0 3px rgba(255, 250, 235, .7),
    inset 0 -8px 18px rgba(160, 110, 50, .16),
    0 0 0 5px var(--wood), 0 0 0 8px var(--outline),
    0 10px 0 5px rgba(58, 36, 21, .3), 0 24px 40px rgba(20, 10, 4, .35);
}
.panel.quiz { margin: 8px 8px 12px; }
dialog { border-radius: 16px; }
dialog::backdrop { background: rgba(40, 22, 10, .55); }

/* 종이 안쪽 칸: 바느질 점선 */
.target .owner, .students, .frontier, .callout, .school-selected, .atlas-ranking, .season-history, .sea-note {
  background: rgba(255, 250, 235, .7);
  border: 2px dashed rgba(122, 74, 42, .45);
  border-radius: 12px;
  box-shadow: none;
}
.callout.bad { background: #fde3dc; border-color: rgba(169, 58, 51, .5); color: var(--red-2); }
.callout.good { background: #e6f2d6; border-color: rgba(110, 125, 28, .5); color: var(--olive-2); }

/* ── 리본 제목 ────────────────────────────────────────── */
.panel-eyebrow {
  display: inline-block; position: relative;
  background: var(--red); color: #fff4dc;
  font-size: 11px; font-weight: 900; letter-spacing: .02em; text-transform: none;
  padding: 4px 16px 5px; margin: 0 0 6px -4px;
  border: 2px solid var(--outline);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%);
  border-left: 0; border-right: 0;
}
.expedition .panel-eyebrow { font-size: 10px; padding: 3px 14px 4px; }
.panel-title, dialog h2, .target .region h2 { color: var(--wood-3); }
.tag { background: var(--paper-2); border: 2px solid var(--outline); color: var(--wood-3); font-weight: 800; }

/* ── 버튼: 외곽선 + 아래 두께 ─────────────────────────── */
.button {
  border: 3px solid var(--outline); border-bottom-width: 3px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .32), inset 0 -4px 0 rgba(0, 0, 0, .14), var(--edge) var(--outline);
  border-radius: 14px; font-weight: 900; letter-spacing: -.01em;
  transition: transform var(--press), box-shadow var(--press), filter var(--press);
  margin-bottom: 5px;
}
.button:hover { filter: brightness(1.06); }
.button:active { transform: translateY(4px); border-bottom-width: 3px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 1px 0 var(--outline); }
.button.primary { background: linear-gradient(#34b3ae, var(--teal)); color: #fff8e6; }
.button.primary:hover { background: linear-gradient(#3cc0bb, #2fa9a4); }
.button.ghost {
  background: linear-gradient(var(--paper), var(--paper-2)); color: var(--wood-3);
  border-color: var(--outline); border-bottom-color: var(--outline);
}
.button.ghost:hover { background: linear-gradient(#fff8e4, var(--paper)); }
.button[disabled] { filter: grayscale(.6); opacity: .6; }
/* 가장 중요한 행동(땅 차지하기·지키기)은 빨간 깃발색 */
.target .button.primary { background: linear-gradient(#e8665d, var(--red)); }
.target .button.primary:hover { background: linear-gradient(#ef7068, #df5c53); }
#join-open { background: linear-gradient(#e8665d, var(--red)); }

/* ── 둥근 나무 아이콘 버튼 ────────────────────────────── */
.pad-button {
  color: #fbe9c8;
  background:
    repeating-linear-gradient(100deg, rgba(0, 0, 0, 0) 0 9px, rgba(60, 30, 10, .12) 9px 11px),
    radial-gradient(90% 80% at 45% 25%, var(--wood-light) 0%, var(--wood) 55%, var(--wood-2) 100%);
  border: 3px solid var(--outline); border-bottom-width: 3px;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, .35), inset 0 -3px 0 rgba(0, 0, 0, .2), 0 5px 0 var(--wood-3), 0 7px 0 var(--outline), 0 10px 14px rgba(20, 10, 4, .3);
  margin-bottom: 7px;
}
.pad-button svg { stroke-width: 2.6; filter: drop-shadow(0 1.5px 0 var(--outline)); }
.pad-button:hover { background:
    repeating-linear-gradient(100deg, rgba(0, 0, 0, 0) 0 9px, rgba(60, 30, 10, .12) 9px 11px),
    radial-gradient(90% 80% at 45% 25%, #b87c48 0%, #955d35 55%, var(--wood-2) 100%); }
.pad-button:active { transform: translateY(5px); border-bottom-width: 3px;
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, .25), 0 1px 0 var(--wood-3), 0 2px 0 var(--outline); }
.pad-button[aria-pressed='true'] {
  background: radial-gradient(90% 80% at 45% 25%, #f7c95c 0%, var(--gold) 55%, var(--gold-2) 100%);
  color: #fff8e6;
}
.dialog-close, #quiz-close {
  background: radial-gradient(90% 80% at 45% 25%, #ee7a70 0%, var(--red) 55%, var(--red-2) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 220, 200, .35), 0 4px 0 #7c2621, 0 6px 0 var(--outline);
}
.map-controls { gap: 4px; }

/* ── 상단 HUD ─────────────────────────────────────────── */
/* 제목은 나무 간판 */
.game-brand {
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 13px, rgba(40, 20, 8, .28) 13px 15px),
    linear-gradient(var(--wood-light), var(--wood) 60%, var(--wood-2));
  border: 3px solid var(--outline); border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 220, 170, .35), 0 5px 0 var(--outline), 0 10px 16px rgba(20, 10, 4, .3);
  color: #fbe9c8; padding: 6px 16px 7px; position: relative;
}
.game-brand::before, .game-brand::after {
  content: ''; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: #c9b27a; box-shadow: 0 0 0 1.5px var(--outline);
}
.game-brand::before { left: 5px; }
.game-brand::after { right: 5px; }
.game-brand strong { color: #fff1d0; font-size: 23px; }
.game-brand small { color: #f1d6a6; opacity: 1; font-weight: 700; }

/* 정보 칩은 종이 꼬리표 */
.hud-school .who, .score, .region-chip, .map-badge, .legend, .connection {
  background: linear-gradient(var(--paper), var(--paper-2));
  border: 3px solid var(--outline);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 0 rgba(58, 36, 21, .35), 0 8px 14px rgba(20, 10, 4, .18);
  color: var(--ink);
}
.hud-school .who { border-radius: 999px; }
.score { border-radius: 12px; }
.score b { color: var(--wood-3); font-weight: 900; }
.score small { color: var(--muted); }
.region-chip { border-radius: 12px; }
.region-chip svg { stroke: var(--wood-2); }
.map-badge { border-radius: 12px; font-weight: 700; }
.legend { border-radius: 12px; }
.swatch { border: 2px solid var(--outline); }
.swatch.next { border: 2px dashed var(--teal-2); }

.season-chip {
  background: linear-gradient(#fbd878, var(--gold)); color: var(--wood-3);
  border: 3px solid var(--outline); border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--outline);
  font-weight: 900;
}

/* ── 진행 막대: 까만 홈 + 반짝이는 채움 ───────────────── */
.meter-track, .expedition-track, .students-bar {
  background: #5a3a24; border: 3px solid var(--outline); border-radius: 999px;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, .35); height: 18px;
}
.expedition-track { height: 16px; }
.meter-fill, #expedition-fill {
  background: linear-gradient(#b8cc3e, var(--olive) 55%, var(--olive-2));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4);
  border-radius: 999px;
}
.meter-fill.defense { background: linear-gradient(#5cc6c2, var(--teal) 55%, var(--teal-2)); }
.pips i { background: #5a3a24; border: 2px solid var(--outline); height: 10px; }
.pips i.done { background: linear-gradient(#b8cc3e, var(--olive)); }
.pips i.miss { background: linear-gradient(#f7c95c, var(--gold)); }
.meter-top b, .meter-top span { color: var(--wood-3); font-weight: 900; }

/* ── 문제 풀이 ────────────────────────────────────────── */
.question { color: var(--wood-3); font-weight: 900; text-shadow: 0 3px 0 rgba(122, 74, 42, .18); }
#answer {
  background: #fffaf0; border: 3px solid var(--outline); border-radius: 14px; color: var(--wood-3);
  box-shadow: inset 0 4px 0 rgba(122, 74, 42, .15);
}
#answer:focus { border-color: var(--teal-2); box-shadow: inset 0 4px 0 rgba(122, 74, 42, .15), 0 0 0 3px rgba(43, 158, 154, .35); }
.keypad button {
  background: linear-gradient(#fff8e4, var(--paper-2));
  border: 3px solid var(--outline); border-radius: 14px; color: var(--wood-3); font-weight: 900;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .8), 0 4px 0 var(--outline);
  margin-bottom: 4px;
}
.keypad button:hover { background: linear-gradient(#fffdf4, #f7e7c4); }
.keypad button:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), 0 0 0 var(--outline); }
.feedback .verdict.ok { color: var(--olive-2); }
.feedback .verdict.no { color: var(--red-2); }

/* ── 순위 ─────────────────────────────────────────────── */
.rank-row { border-bottom: 2px dashed rgba(122, 74, 42, .25); }
.rank-row .place {
  background: var(--wood); color: #fbe9c8; border: 2px solid var(--outline); border-radius: 50%;
  min-width: 28px; height: 28px; padding: 0 4px; display: inline-grid; place-items: center; font-weight: 900;
  white-space: nowrap; line-height: 1; font-size: clamp(10px, 2.8vw, 14px);
}
.rank-row:first-child .place { background: linear-gradient(#f7c95c, var(--gold)); color: #fff8e6; }
.rank-row.mine { background: rgba(43, 158, 154, .12); border-radius: 10px; }
.rank-row.mine .place { background: var(--teal); }

/* ── 입력칸·목록 ──────────────────────────────────────── */
dialog input, dialog select, #region-search {
  background: #fffaf0; border: 3px solid var(--outline); border-radius: 12px; color: var(--ink);
  box-shadow: inset 0 3px 0 rgba(122, 74, 42, .12);
}
.school-result, .region-pill {
  background: linear-gradient(#fffaf0, var(--paper)); border: 2px solid var(--outline); border-radius: 12px;
  box-shadow: 0 3px 0 rgba(58, 36, 21, .5);
}
.school-result:hover, .school-result[aria-pressed='true'], .region-pill:hover, .region-pill.current {
  background: linear-gradient(#eaf6e0, #d7ecc7); border-color: var(--outline);
}
.join-kicker { background: var(--gold); color: #fff8e6; border: 2px solid var(--outline); }
.mini-flag { background: var(--red); color: #fff4dc; border: 2px solid var(--outline); }

.toast { border-radius: 14px; font-weight: 800; }
.toast[data-kind='error'] { background: #fde3dc; }

/* 지도 위 우리 땅 테두리도 갈색 외곽선 톤으로 */
#map #selection { stroke: var(--outline); }

@media (prefers-reduced-motion: reduce) {
  .button:active, .pad-button:active, .keypad button:active { transform: none; }
}

/* 출처 표시(이용 조건) — 지도 구석에 한 줄 */
.map-credit {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: 4px; margin: 0;
  font-size: 10px; color: rgba(58, 36, 21, .7); background: rgba(251, 240, 214, .7);
  padding: 1px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap;
}

/* ── 아이콘 배지 (글자 대신) ──────────────────────────── */
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 3px 10px 3px 6px; border-radius: 999px;
  background: linear-gradient(#8e3a2c, #6f2a1f); color: #fff4dc;
  border: 2.5px solid var(--outline); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 3px 0 var(--outline);
  font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1;
}
.badge .icon { width: 20px; height: 20px; filter: drop-shadow(0 1.5px 0 var(--outline)); }
.badge b { font-size: 16px; }
.badge small { font-size: 11px; opacity: .8; font-weight: 800; }
.badge.defense .icon, .badge-shield.defense .icon { color: #7fd6d2; }
.badge.enemy .icon { color: #ff9b8f; }
.badge.capture .icon, .badge-flag .icon { color: #f7c95c; }
.badge-people { background: none; border: 0; box-shadow: none; color: var(--muted); padding: 0 0 0 6px; }
.badge-people .icon { width: 14px; height: 14px; filter: none; }
.badge-people b { font-size: 11.5px; }
.hud-school .names span { display: inline-flex; align-items: center; }

/* 막대 끝에 아이콘 배지를 겹친다 */
.meter { margin: 14px 0 6px; }
.meter-bar { display: flex; align-items: center; }
.meter-bar .meter-track { flex: 1; margin-right: -14px; }
.meter-bar .badge { position: relative; z-index: 1; padding: 5px 12px 5px 8px; }
.meter-bar .badge .icon { width: 24px; height: 24px; }
.meter-bar .badge b { font-size: 18px; }
.meter-fill.enemy { background: linear-gradient(#f08a80, var(--red) 55%, var(--red-2)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.meter-fill.capture { background: linear-gradient(#fbd878, var(--gold) 55%, var(--gold-2)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4); }
.meter-note { margin-top: 4px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.meter-top { display: none; }

/* 상단 점수판: 아이콘 + 숫자 */
.score { flex-direction: row; gap: 6px; align-items: center; padding: 8px 12px; }
.score .icon { width: 20px; height: 20px; color: var(--teal-2); }
.score .icon-check { color: var(--olive-2); }
.score b { font-size: 16px; }

/* 문제 풀이 머리의 큰 배지 + 정답 효과 */
.quiz-caption { position: relative; flex-direction: row !important; align-items: center; gap: 10px; min-height: 44px; }
#quiz-step { display: inline-flex; }
.badge.big { padding: 6px 16px 6px 10px; }
.badge.big .icon { width: 30px; height: 30px; }
.badge.big b { font-size: 26px; }
.badge.big small { font-size: 14px; }
.badge.bump { animation: badge-bump 480ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes badge-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-4deg); } 100% { transform: scale(1); } }
#quiz-gain {
  position: absolute; left: 118px; top: 50%; transform: translateY(-50%);
  background: none !important; padding: 0 !important; font-size: 30px !important; font-weight: 900;
  color: var(--olive-2); pointer-events: none;
  text-shadow: -2px -2px 0 #fff8e6, 2px -2px 0 #fff8e6, -2px 2px 0 #fff8e6, 2px 2px 0 #fff8e6, 0 3px 0 var(--outline);
}
#quiz-gain[data-kind='defended'] { color: var(--teal-2); }
#quiz-gain[data-kind='attacked'] { color: var(--red-2); }
#quiz-gain[data-kind='miss'] { color: var(--muted); font-size: 18px !important; }
#quiz-gain.pop-up { animation: gain-rise 1100ms ease-out forwards; }
@keyframes gain-rise {
  0% { opacity: 0; transform: translateY(-20%) scale(.6); }
  20% { opacity: 1; transform: translateY(-60%) scale(1.25); }
  70% { opacity: 1; transform: translateY(-110%) scale(1); }
  100% { opacity: 0; transform: translateY(-160%) scale(1); }
}

/* 순위 탭 */
.rank-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.rank-tabs button {
  flex: 1; min-height: 44px; border: 3px solid var(--outline); border-radius: 12px; cursor: pointer;
  background: linear-gradient(var(--paper), var(--paper-2)); color: var(--wood-3); font-weight: 900; font-size: 15px;
  box-shadow: 0 3px 0 var(--outline);
}
.rank-tabs button[aria-selected='true'] { background: linear-gradient(#6fb85f, #4f9a40); color: #fff8e6;
  text-shadow: 0 1.5px 0 var(--outline); }
#member-list:not(:has(.rank-row)) { color: var(--muted); font-weight: 700; padding: 8px 4px; }

@media (prefers-reduced-motion: reduce) { .badge.bump, #quiz-gain.pop-up { animation: none; } }

/* ── 휴대폰 (세로 480px 이하) ─────────────────────────── */
@media (max-width: 480px) {
  :root { --hud-height: 118px; }
  .hud {
    display: grid; padding: 8px 10px; gap: 6px; align-items: center;
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px 44px;
    grid-template-areas: "who who season season season" "region region rank help set";
  }
  .hud-left, .hud-right { display: contents; }
  .game-brand, .crest, .connection { display: none !important; }
  #school-summary { grid-area: who; min-width: 0; }
  #school-summary .who { max-width: none; width: 100%; }
  #school-summary .button { width: 100%; min-height: 46px; }
  .season-chip { grid-area: season; justify-self: stretch; text-align: center; font-size: 11px; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .region-chip { grid-area: region; max-width: none !important; min-width: 0; width: 100%; font-size: 13px !important; padding: 0 10px !important; }
  .region-chip span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #rank-button { grid-area: rank; }
  #help-button { grid-area: help; }
  #settings-button { grid-area: set; }
  .hud .pad-button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; margin-bottom: 7px; }
  .map-badge { display: none; }
  .map-credit { font-size: 8px; bottom: 2px; }
}
@media (max-width: 480px) {
  .map-controls { top: calc(max(var(--hud-height), var(--hud-real, 0px)) + 6px) !important; bottom: auto !important; left: auto !important; right: 8px !important;
    flex-direction: column !important; gap: 0 !important; }
  .map-controls .pad-button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 17px; margin-bottom: 7px; }
  .legend { top: calc(var(--hud-height) + 6px); bottom: auto !important; left: 8px; padding: 5px 10px; }
}

/* ── 실시간 알림 (상단 가운데 띠) ─────────────────────── */
.notices {
  position: fixed; z-index: 60; top: calc(var(--hud-height) + 6px); left: 50%; transform: translateX(-50%);
  width: min(520px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.notice {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; pointer-events: auto;
  background: linear-gradient(var(--paper), var(--paper-2)); color: var(--ink);
  border: 3px solid var(--outline); border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 4px 0 rgba(58, 36, 21, .35), 0 10px 18px rgba(20, 10, 4, .22);
  font-size: 13px; font-weight: 800; line-height: 1.25;
  animation: notice-in 260ms cubic-bezier(.2, 1.4, .5, 1);
}
.notice i { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid var(--outline); }
.notice span { flex: 1; min-width: 0; }
.notice.good { background: linear-gradient(#eef7df, #d9ecc2); }
.notice.bad { background: linear-gradient(#ffe6df, #fbcfc4); color: var(--red-2); }
.notice.urgent { animation: notice-in 260ms cubic-bezier(.2, 1.4, .5, 1), notice-shake 500ms 260ms 2; }
.notice-go {
  flex: none; min-height: 34px; padding: 0 10px; border: 2.5px solid var(--outline); border-radius: 10px; cursor: pointer;
  background: linear-gradient(var(--paper), var(--paper-2)); color: var(--wood-3); font-weight: 900; font-size: 13px;
  box-shadow: 0 3px 0 var(--outline);
}
.notice.urgent .notice-go { background: linear-gradient(#e8665d, var(--red)); color: #fff8e6; text-shadow: 0 1.5px 0 var(--outline); }
@keyframes notice-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes notice-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 480px) {
  .notices { top: calc(var(--hud-height) + 2px); width: calc(100% - 16px); }
  .notice { gap: 6px; font-size: 11.5px; padding: 5px 5px 5px 8px; border-width: 2px; border-radius: 11px; }
  .notice i { width: 10px; height: 10px; border-width: 1.5px; }
  .notice-go { min-height: 32px; padding: 0 7px; font-size: 11.5px; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) { .notice, .notice.urgent { animation: none; } }
body.reduce-motion .notice { animation: none; }

/* ── 손가락으로 쓰기 편하게 ───────────────────────────── */
/* 버튼을 빠르게 두 번 눌러도 페이지가 확대되지 않고, 누르는 즉시 반응한다 */
button, a, input, select, label, .region-pill, .school-result { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* 지도를 아래로 끌 때 휴대폰 브라우저가 페이지를 새로고침하지 않게 */
html, body { overscroll-behavior: none; }
/* 지도에서 길게 눌러도 글자 선택·메뉴가 뜨지 않게 */
.map-viewport, #map, #atlas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#map, #atlas { touch-action: none; }

/* 휴대폰: 전국 지도 창은 화면 전체, 지도는 화면 절반 높이 */
@media (max-width: 480px) {
  dialog.wide-dialog {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0;
    border-radius: 0; border-width: 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    box-shadow: none;
  }
  .wide-dialog .atlas-wrap { margin: 8px -4px; padding: 4px; }
  #atlas { height: 52dvh !important; }
  .wide-dialog .dialog-close { position: sticky; top: 0; float: right; z-index: 3; }
}
.atlas-hover:empty { display: none; }

/* ── 연출 ─────────────────────────────────────────────── */
.fx-pop {
  position: absolute; transform: translate(-50%, -50%); font-size: 30px; font-weight: 900; pointer-events: none; color: var(--olive-2);
  text-shadow: -2px -2px 0 #fff8e6, 2px -2px 0 #fff8e6, -2px 2px 0 #fff8e6, 2px 2px 0 #fff8e6, 0 3px 0 var(--outline);
  animation: fx-pop 1s ease-out forwards;
}
.fx-pop.hit { color: var(--red-2); }
.fx-pop.defend { color: var(--teal-2); }
.fx-pop.progress { color: var(--gold-2); }
@keyframes fx-pop {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); }
  18% { opacity: 1; transform: translate(-50%, -80%) scale(1.35); }
  60% { opacity: 1; transform: translate(-50%, -130%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}
.fx-ring {
  position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; pointer-events: none;
  border: 5px solid var(--c); box-shadow: 0 0 0 3px rgba(255, 248, 230, .8), inset 0 0 0 3px rgba(255, 248, 230, .6);
  animation: fx-ring 800ms cubic-bezier(.1, .8, .3, 1) forwards;
}
.fx-ring.thin { border-width: 3px; box-shadow: none; }
.fx-ring.alarm { animation: fx-ring 700ms ease-out 3; }
@keyframes fx-ring { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(calc(3.5 * var(--s, 1))); } }
.fx-bit {
  position: absolute; width: 9px; height: 9px; margin: -4px; border-radius: 2px; pointer-events: none;
  border: 1.5px solid rgba(58, 36, 21, .7);
  animation: fx-bit 1.2s cubic-bezier(.15, .7, .4, 1) var(--d, 0ms) forwards; opacity: 0;
}
.fx-bit.big { width: 12px; height: 12px; }
.fx-bit.long { width: 6px; height: 14px; }
@keyframes fx-bit {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  60% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(calc(var(--r) * 1.4)) scale(.9); }
}
/* 깃발: 깃대 아래 끝이 구역 가운데에 꽂힌다 */
.fx-flag { position: absolute; width: 40px; height: 56px; margin: -54px 0 0 -9px; pointer-events: none; transform-origin: 9px 54px;
  animation: fx-flag-in 520ms cubic-bezier(.3, 1.6, .5, 1) both, fx-fade 400ms ease-in 1.4s forwards; }
.fx-flag svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(58, 36, 21, .35)); }
.fx-flag .cloth { transform-origin: 10px 17px; animation: fx-wave 420ms ease-in-out infinite alternate; }
.fx-flag.big { width: 64px; height: 90px; margin: -86px 0 0 -14px; transform-origin: 14px 86px;
  animation: fx-flag-drop 650ms cubic-bezier(.3, 1.5, .5, 1) both, fx-fade 500ms ease-in 2.05s forwards; }
.fx-flag.falling { animation: fx-flag-fall 1.4s cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes fx-wave { from { transform: skewY(-4deg) scaleX(.94); } to { transform: skewY(5deg) scaleX(1.04); } }
@keyframes fx-flag-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes fx-flag-drop {
  0% { opacity: 0; transform: translateY(-140px) rotate(-12deg) scale(.9); }
  55% { opacity: 1; transform: translateY(6px) rotate(3deg) scale(1.05, .92); }
  75% { transform: translateY(-8px) rotate(-2deg) scale(.98, 1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes fx-flag-fall {
  0% { opacity: 1; transform: none; }
  30% { transform: rotate(-8deg); }
  100% { opacity: 0; transform: translate(10px, 30px) rotate(80deg); }
}
@keyframes fx-fade { to { opacity: 0; transform: translateY(-6px) scale(.9); } }
.fx-shield { position: absolute; width: 46px; height: 52px; margin: -26px 0 0 -23px; pointer-events: none; }
.fx-shield svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(58, 36, 21, .35)); }
.fx-shield.hit { animation: fx-shield-hit 900ms ease-out forwards; }
.fx-shield.hit .crack { stroke-dasharray: 30; stroke-dashoffset: 30; animation: fx-crack 220ms 140ms ease-out forwards; }
.fx-shield.up { animation: fx-shield-up 900ms cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes fx-shield-hit {
  0% { opacity: 0; transform: scale(.6); }
  15% { opacity: 1; transform: scale(1.15); }
  25% { transform: translateX(-6px) rotate(-8deg); }
  35% { transform: translateX(6px) rotate(6deg); }
  45% { transform: translateX(-3px); }
  75% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px) scale(.9); }
}
@keyframes fx-crack { to { stroke-dashoffset: 0; } }
@keyframes fx-shield-up {
  0% { opacity: 0; transform: scale(.3); filter: brightness(1.6); }
  35% { opacity: 1; transform: scale(1.25); }
  60% { transform: scale(1); filter: brightness(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(.9); }
}
.fx-ribbon {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 40px 12px;
  background: var(--c); color: #fff8e6; border: 3px solid var(--outline); border-left: 0; border-right: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
  filter: drop-shadow(0 6px 0 rgba(58, 36, 21, .35));
  text-shadow: -2px -2px 0 var(--outline), 2px -2px 0 var(--outline), -2px 2px 0 var(--outline), 2px 2px 0 var(--outline), 0 3px 0 var(--outline);
  animation: fx-ribbon 2.5s cubic-bezier(.3, 1.4, .5, 1) forwards; z-index: 7; white-space: nowrap;
}
.fx-ribbon b { font-size: 40px; font-weight: 900; letter-spacing: .04em; line-height: 1; }
.fx-ribbon span { font-size: 14px; font-weight: 800; }
@keyframes fx-ribbon {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-6deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); }
  22% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(.95); }
}
.fx-shake { animation: fx-shake 420ms ease-out; }
.fx-shake-soft { animation: fx-shake-soft 380ms ease-out; }
@keyframes fx-shake { 20% { transform: translateX(-8px) rotate(-1deg); } 40% { transform: translateX(7px) rotate(1deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes fx-shake-soft { 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, 1px); } }
/* 🎁 아이템 연출(v1.3): ⚡ 번개 줄기·번쩍, 🛡️ 큰 방패, 🔭 조준경 */
.fx-lightning { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 7;
  animation: fx-lightning 860ms linear forwards; }
.fx-lightning path { fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: fx-zap 80ms 60ms cubic-bezier(.6, 0, 1, 1) forwards; }
.fx-lightning path.fork { animation-delay: 115ms; animation-duration: 60ms; }
.fx-lightning .glow { stroke: rgba(255, 205, 40, .9); stroke-width: 22; }
.fx-lightning .body { stroke: #ffe25a; stroke-width: 9; }
.fx-lightning .core { stroke: #ffffff; stroke-width: 3.6; }
.fx-lightning .glow.fork { stroke-width: 11; }
.fx-lightning .body.fork { stroke-width: 4.5; }
.fx-lightning .core.fork { stroke-width: 1.8; }
.fx-lightning.big .glow.trunk { stroke-width: 36; }
.fx-lightning.big .body.trunk { stroke-width: 15; }
.fx-lightning.big .core.trunk { stroke-width: 6; }
@keyframes fx-zap { to { stroke-dashoffset: 0; } }
/* 꽂힌 뒤 두 번 깜빡이고 사라진다 */
@keyframes fx-lightning { 0%, 26% { opacity: 1; } 32% { opacity: .15; } 38% { opacity: 1; } 46% { opacity: .3; } 52%, 64% { opacity: 1; } 100% { opacity: 0; } }
.fx-blast { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none; z-index: 7;
  background: radial-gradient(circle, #ffffff 0 30%, rgba(255, 246, 180, .95) 45%, rgba(255, 210, 60, .55) 62%, rgba(255, 190, 40, 0) 72%);
  animation: fx-blast 500ms cubic-bezier(.1, .9, .3, 1) forwards; }
.fx-blast.big { width: 140px; height: 140px; margin: -70px 0 0 -70px; }
@keyframes fx-blast { 0% { opacity: 1; transform: scale(.1); } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(2.1); } }
/* 그을음: 꽂힌 자리에 잠깐 남는다 */
.fx-scorch { position: absolute; width: 70px; height: 34px; margin: -14px 0 0 -35px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(40, 24, 12, .7) 0 35%, rgba(120, 60, 10, .45) 55%, rgba(255, 170, 40, .35) 68%, rgba(255, 170, 40, 0) 75%);
  animation: fx-scorch 1.45s ease-out forwards; }
.fx-scorch.big { width: 104px; height: 50px; margin: -20px 0 0 -52px; }
@keyframes fx-scorch { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; transform: scale(1.05); } 60% { opacity: .9; transform: scale(1); } 100% { opacity: 0; } }
.fx-arcs { position: absolute; overflow: visible; pointer-events: none; z-index: 7;
  filter: drop-shadow(0 0 4px #ffe25a) drop-shadow(0 0 8px rgba(255, 210, 60, .9)); animation: fx-arcs 440ms steps(1) forwards; }
.fx-arcs path { fill: none; stroke: #fffbe0; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes fx-arcs { 0% { opacity: 1; transform: scale(.7); } 20% { opacity: .2; transform: scale(1) rotate(8deg); } 35% { opacity: 1; transform: scale(1.05) rotate(-6deg); }
  55% { opacity: .5; transform: scale(1.15) rotate(4deg); } 70% { opacity: 1; } 100% { opacity: 0; } }
/* 화면: 잠깐 어두워졌다가(구름) 하얗게 두 번 번쩍 */
.fx-flash { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.fx-flash.strike { animation: fx-strike-flash 600ms linear forwards; }
@keyframes fx-strike-flash {
  0% { background: rgba(18, 22, 48, 0); }
  14% { background: rgba(18, 22, 48, .38); }
  23% { background: rgba(255, 253, 228, .9); }
  32% { background: rgba(255, 253, 228, .12); }
  40% { background: rgba(255, 253, 228, .6); }
  100% { background: rgba(255, 253, 228, 0); }
}
.fx-shield.big { width: 78px; height: 88px; margin: -44px 0 0 -39px; animation-duration: 1300ms; }
.fx-reticle { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none;
  animation: fx-reticle 1.45s cubic-bezier(.2, .9, .3, 1) forwards; }
.fx-reticle svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 0 rgba(58, 36, 21, .35)); }
@keyframes fx-reticle {
  0% { opacity: 0; transform: scale(2.6) rotate(-40deg); }
  45% { opacity: 1; transform: scale(.85) rotate(0); }
  55% { transform: scale(1.05); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.7); }
}
/* ⚡ 번개가 켜져 있는 동안 문제 창이 전기처럼 빛난다(정답 반짝임 .panel.quiz.fx-glow 보다 앞서게 id 로) */
#quiz-panel.bolt-on { animation: bolt-glow 1.1s ease-in-out infinite alternate; }
@keyframes bolt-glow { from { box-shadow: 0 0 0 3px #ffd84a, 0 0 14px 4px rgba(255, 216, 74, .45), 0 10px 0 var(--outline); }
  to { box-shadow: 0 0 0 5px #ffe97a, 0 0 32px 12px rgba(255, 216, 74, .8), 0 10px 0 var(--outline); } }
body.reduce-motion .fx-bit, body.reduce-motion .fx-ring { display: none; }
body.reduce-motion #quiz-panel.bolt-on { animation: none; box-shadow: 0 0 0 4px #ffd84a, 0 10px 0 var(--outline); }
@media (prefers-reduced-motion: reduce) { .fx-bit, .fx-ring { display: none; } .fx-flag, .fx-flag.big, .fx-ribbon, .fx-shield, .fx-reticle { animation-duration: 1ms; } #quiz-panel.bolt-on { animation: none; box-shadow: 0 0 0 4px #ffd84a, 0 10px 0 var(--outline); } }

/* ── 최근 소식 ────────────────────────────────────────── */
#news-button { position: relative; }
.unread {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff8e6; border: 2px solid var(--outline); font-size: 11px; font-weight: 900; line-height: 16px;
  text-shadow: none; animation: notice-in 260ms cubic-bezier(.2, 1.4, .5, 1);
}
.news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: min(60dvh, 520px); overflow-y: auto; }
.news-item {
  width: 100%; display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; text-align: left;
  padding: 9px 10px; border: 2px solid rgba(58, 36, 21, .35); border-radius: 12px; cursor: pointer;
  background: rgba(255, 250, 235, .8); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.35;
}
.news-item i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--outline); }
.news-item small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.news-item.bad { background: #fde3dc; color: var(--red-2); }
.news-item.good { background: #eaf4dc; }
.news-item.fresh { border-color: var(--outline); box-shadow: 0 3px 0 rgba(58, 36, 21, .35); }
.news-item:hover { filter: brightness(1.04); }
.news-empty { color: var(--muted); font-weight: 700; padding: 10px 4px; }
.newsing #target-panel, .newsing #quiz-panel, .newsing #rank-panel { display: none; }
@media (max-width: 480px) {
  .hud { grid-template-columns: minmax(0, 1fr) 44px 44px 44px 44px;
    grid-template-areas: "who who season season season" "region news rank help set"; }
  #news-button { grid-area: news; }
}
.game-brand strong { white-space: nowrap; }
@media (max-width: 1240px) { .game-brand small { display: none; } .game-brand strong { font-size: 19px; } }
@media (max-width: 1100px) and (min-width: 481px) { .game-brand { display: none; } }

/* ── 전국 지도 영토 점 ───────────────────────────────── */
.atlas-wrap { position: relative; }
.atlas-dots { position: absolute; pointer-events: none; z-index: 1; }
.atlas-controls, .atlas-scale, .atlas-hover { z-index: 2; }

/* ── 시상대 ──────────────────────────────────────────── */
.podium {
  list-style: none; margin: 10px 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end; gap: 6px; min-height: 170px;
}
.podium .step { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0; }
.podium .step.empty { visibility: hidden; }
.podium .medal {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff8e6;
  border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); text-shadow: 0 1.5px 0 var(--outline);
}
.podium .step-1 .medal { width: 38px; height: 38px; font-size: 18px; background: linear-gradient(#ffe08a, #f2b53a 60%, #c98a1d); }
.podium .step-2 .medal { background: linear-gradient(#f3f3f3, #c9ccd3 60%, #9aa0aa); }
.podium .step-3 .medal { background: linear-gradient(#f0b98a, #cd7f45 60%, #9c5a2c); }
.podium-dot { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--outline); }
.podium .step-1 .podium-dot { width: 24px; height: 24px; }
.podium b { font-size: 14px; font-weight: 900; color: var(--wood-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .step-1 b { font-size: 16px; }
.podium small { font-size: 11px; color: var(--muted); font-weight: 700; }
.podium .block {
  width: 100%; margin-top: 4px; display: grid; place-items: center; color: rgba(255, 248, 230, .9); font-size: 22px; font-weight: 900;
  border: 3px solid var(--outline); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 14px, rgba(40, 20, 8, .22) 14px 16px), linear-gradient(var(--wood-light), var(--wood) 60%, var(--wood-2));
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, .35); text-shadow: 0 2px 0 var(--outline);
}
.podium .step-1 .block { height: 74px; background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 14px, rgba(40,20,8,.18) 14px 16px), linear-gradient(#f7c95c, var(--gold) 60%, var(--gold-2)); }
.podium .step-2 .block { height: 52px; }
.podium .step-3 .block { height: 38px; }
.podium .step.mine b { color: var(--teal-2); }
.podium .step.mine .podium-dot { box-shadow: 0 0 0 3px var(--teal); }
.rank-list, .season-rest { list-style: none; margin: 0; padding: 0; }
.rank-gap { text-align: center; color: var(--muted); font-weight: 900; }
.rank-row.clickable { cursor: pointer; }
.rank-row.clickable:hover { background: rgba(43, 158, 154, .1); border-radius: 10px; }

/* ── 시즌 결과 창 ────────────────────────────────────── */
.season-dialog { max-width: 620px; }
.season-banner { text-align: center; margin: 2px 40px 4px; }
.season-kicker {
  display: inline-block; background: var(--red); color: #fff4dc; font-size: 12px; font-weight: 900; padding: 4px 22px 5px;
  border: 2px solid var(--outline); border-left: 0; border-right: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
  text-shadow: -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 1px 1px 0 var(--outline);
}
.season-banner h2 { font-size: 30px; margin: 6px 0 2px; color: var(--wood-3); letter-spacing: -.03em; }
.season-banner p { margin: 0; color: var(--muted); font-weight: 700; font-size: 13px; }
.season-mine {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 10px 12px;
  background: rgba(43, 158, 154, .12); border: 2px dashed rgba(29, 116, 113, .5); border-radius: 12px;
}
.season-mine b { font-size: 16px; color: var(--teal-2); }
.season-mine span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.season-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.season-totals div {
  display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px;
  background: linear-gradient(var(--paper), var(--paper-2)); border: 2.5px solid var(--outline); box-shadow: 0 3px 0 rgba(58, 36, 21, .35);
}
.season-totals b { font-size: 20px; font-weight: 900; color: var(--wood-3); font-variant-numeric: tabular-nums; }
.season-totals small { font-size: 11px; color: var(--muted); font-weight: 800; }
.timelapse { margin: 10px 0; }
.timelapse-map { position: relative; background: var(--sea); border: 3px solid var(--outline); border-radius: 14px; overflow: hidden; }
#timelapse-map { display: block; width: 100%; height: clamp(220px, 42vh, 400px); }
.timelapse-land path { fill: #f7efd9; stroke: rgba(58, 36, 21, .25); stroke-width: .6; vector-effect: non-scaling-stroke; }
.timelapse-caption {
  position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; z-index: 2; padding: 5px 10px; border-radius: 10px;
  background: rgba(251, 240, 214, .92); border: 2px solid var(--outline); font-size: 12.5px; font-weight: 800; color: var(--wood-3);
}
.timelapse-controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.timelapse-controls input { flex: 1; accent-color: var(--teal); height: 32px; }
#timelapse-play { width: 48px; height: 48px; font-size: 18px; }
@media (max-width: 480px) {
  .podium { min-height: 150px; }
  .podium .step-1 .block { height: 60px; }
  .podium .step-2 .block { height: 42px; }
  .podium .step-3 .block { height: 30px; }
  .season-banner h2 { font-size: 24px; }
  #timelapse-map { height: 38dvh; }
}
.season-mine .emblem, .season-rest .emblem, .rank-list .emblem { width: 26px; height: 26px; flex: none; }

/* ══ 게임 손맛 ══════════════════════════════════════════ */

/* ── 이번 시즌 내 기록판 ─────────────────────────────── */
.expedition.stats-board { padding: 12px 12px 10px; width: min(318px, calc(100% - 100px)); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.board-head .panel-eyebrow { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 6px;
  border: 3px solid var(--outline); border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--outline);
}
.stat svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1.5px 0 rgba(58, 36, 21, .6)); }
.stat.correct svg, .stat.captured svg { fill: currentColor; stroke: none; }
.stat b { font-size: 26px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; color: #fff8e6;
  text-shadow: -1.5px -1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline), 1.5px 1.5px 0 var(--outline), 0 3px 0 var(--outline); }
.stat small { font-size: 11px; font-weight: 900; color: rgba(255, 248, 230, .95); text-shadow: 0 1px 0 var(--outline); }
.stat.solved { background: linear-gradient(#6fb3e8, #3d86c6 60%, #2c6aa1); color: #e8f4ff; }
.stat.correct { background: linear-gradient(#b8d85a, #8cb33a 60%, #6e8f25); color: #f4ffd8; }
.stat.captured { background: linear-gradient(#f08a80, #d9544b 60%, #a93a33); color: #ffe9e4; }
.stat::after {               /* 반짝이는 윗면 */
  content: ''; position: absolute; left: 6%; right: 6%; top: 3px; height: 38%; border-radius: 10px;
  background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); pointer-events: none;
}
.stat.bump { animation: stat-bump 520ms cubic-bezier(.3, 1.8, .5, 1); }
@keyframes stat-bump { 0% { transform: scale(1); } 30% { transform: scale(1.16) rotate(-3deg); } 60% { transform: scale(.97) rotate(1deg); } 100% { transform: scale(1); } }
.board-foot { display: flex; justify-content: space-between; margin: 8px 2px 2px; font-size: 11.5px; font-weight: 800; color: var(--muted); }
/* 🎁 아이템(v1.3): 게이지 + ⚡🛡️🔭 */
.item-bar { display: flex; align-items: stretch; gap: 5px; margin-top: 8px; }
.item-bar[hidden] { display: none; }
.item-gauge { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 8px;
  border: 2.5px solid var(--outline); border-radius: 12px; background: linear-gradient(#fff3d6, #ffe4a8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--outline); font: inherit; color: #6b4513; cursor: pointer; }
.item-gauge > span:first-child { font-size: 18px; }
.item-gauge-track { flex: 1; height: 10px; border-radius: 99px; background: rgba(58, 36, 21, .14); overflow: hidden; }
.item-gauge-track i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(#c58cff, #8b4fe0); transition: width .35s; }
.item-gauge b { font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-gauge.ready { background: linear-gradient(#f3e3ff, #dcb8ff); color: #5a1f9c; animation: item-ready 900ms ease-in-out infinite alternate; }
.item-gauge.ready .item-gauge-track i { background: linear-gradient(#ffd34a, #f08a1c); }
@keyframes item-ready { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.04); filter: brightness(1.12); } }
.item-btn { position: relative; flex: none; width: 46px; min-height: 40px; padding: 0; border: 2.5px solid var(--outline); border-radius: 12px;
  background: linear-gradient(#fffaf0, #f1dfbd); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--outline); font-size: 19px; cursor: pointer; }
.item-btn .item-n { position: absolute; right: -6px; top: -7px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 99px;
  border: 2px solid var(--outline); background: #8b4fe0; color: #fff; font: 900 11px/15px 'Jua', 'Noto Sans KR', sans-serif; text-align: center; }
.item-btn.empty { filter: grayscale(1); opacity: .55; }
.item-btn.empty .item-n { background: #9a8a78; }
.item-btn.active { background: linear-gradient(#fff6b0, #ffd84a); box-shadow: 0 0 0 3px rgba(255, 216, 74, .55), 0 3px 0 var(--outline); animation: item-ready 700ms ease-in-out infinite alternate; }
.item-btn.active.empty { filter: none; opacity: 1; }          /* 마지막 번개를 켜도(0개) 켜진 동안은 빛난다 */
.item-btn.active.empty .item-n { background: #e08a00; }
.item-btn.item-pop { animation: stat-bump 520ms cubic-bezier(.3, 1.8, .5, 1); }
.item-btn:active, .item-gauge:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); }
.quiz-reward.boosted { color: #b26a00; font-weight: 900; }
.item-dialog .item-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px; }
.item-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border: 3px solid var(--outline); border-radius: 14px;
  background: linear-gradient(#fffaf0, #f1dfbd); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), 0 4px 0 var(--outline); font: inherit; color: var(--ink, #3a2415); cursor: pointer; }
.item-card:disabled { filter: grayscale(1); opacity: .5; cursor: not-allowed; }
.item-card:not(:disabled):hover { transform: translateY(-2px); }
.item-card-icon { font-size: 34px; line-height: 1.1; }
.item-card strong { font-size: 16px; }
.item-card-desc { font-size: 12px; line-height: 1.35; text-align: center; word-break: keep-all; min-height: 3em; }
.item-card-have { font-size: 11px; color: #7a5a35; }
.item-card.bolt { background: linear-gradient(#fff6c8, #ffe07a); }
.item-card.shield { background: linear-gradient(#dff0ff, #a9d3f5); }
.item-card.scope { background: linear-gradient(#efe2ff, #cfb2f5); }
.target .button.item-use.shield { background: linear-gradient(#dff0ff, #a9d3f5); }
.target .button.item-use.scope { background: linear-gradient(#efe2ff, #cfb2f5); }
/* 🎯 우리 반 목표(교사가 정했을 때만) */
.class-goal { margin-top: 8px; padding: 7px 9px 6px; border: 2.5px solid var(--outline); border-radius: 12px;
  background: linear-gradient(#fff3d6, #ffe4a8); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--outline); }
.class-goal p { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.class-goal-head { font-size: 12px; font-weight: 900; color: #6b4513; }
.class-goal-head b { font-size: 13px; color: var(--ink, #3a2415); }
.class-goal-bar { height: 9px; margin: 5px 0 4px; border-radius: 99px; background: rgba(58, 36, 21, .14); overflow: hidden; }
.class-goal-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(#ffc24a, #f08a1c); transition: width .35s; }
.class-goal-foot { font-size: 11.5px; font-weight: 800; color: #7a5a35; font-variant-numeric: tabular-nums; }
.class-goal.done { background: linear-gradient(#e6f7d0, #c8eba0); }
.class-goal.done .class-goal-bar i { background: linear-gradient(#9bd65a, #5fae2e); }
.class-goal.done #class-goal-mine { color: #3d7a1c; }
/* 🎯 우리 반 작전 목표 */
.class-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.class-targets[hidden] { display: none; }
.news-scope[hidden] { display: none; }
.news-scope { margin: 0 0 8px; }
#class-field[hidden] { display: none; }
.class-target-chip { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 38px; padding: 4px 10px;
  border: 2.5px solid var(--outline); border-radius: 10px; background: linear-gradient(#ffe8ef, #ffc9d6); color: #6b1830;
  font: 900 12.5px 'Jua', 'Noto Sans KR', 'Malgun Gothic', sans-serif; text-align: left; box-shadow: 0 3px 0 var(--outline); cursor: pointer; }
.class-target-chip small { font-size: 10.5px; color: #a33a57; white-space: nowrap; }
.class-target-chip.done { background: linear-gradient(#e6f7d0, #c8eba0); color: #2f5d12; }
.class-target-chip.done small { color: #3d7a1c; }
.class-target-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); }
#map .class-target-edge { fill: none; stroke: #e0245e; stroke-width: 3.5; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; pointer-events: none; }
#map .class-target-edge.done { stroke: #3d9a2a; stroke-dasharray: none; }
/* 🔭 망원경으로 연 땅: 보라 점선이 흐르고 🔭 와 남은 분 */
#map .scope-target-edge { fill: rgba(139, 79, 224, .16); stroke: #8b4fe0; stroke-width: 4; stroke-dasharray: 9 6; vector-effect: non-scaling-stroke;
  pointer-events: none; animation: scope-march 1.2s linear infinite; }
@keyframes scope-march { to { stroke-dashoffset: -30; } }
.scope-target { cursor: pointer; }
.scope-target-ring { fill: rgba(255, 250, 240, .95); stroke: #8b4fe0; stroke-width: 3.5; }
.scope-target-name { font: 900 12px 'Jua', 'Noto Sans KR', 'Malgun Gothic', sans-serif; fill: #6b2fc0; text-anchor: middle;
  paint-order: stroke; stroke: #fffaf0; stroke-width: 3.5px; stroke-linejoin: round; }
body.reduce-motion #map .scope-target-edge { animation: none; }
@media (prefers-reduced-motion: reduce) { #map .scope-target-edge { animation: none; } }
.class-target { cursor: pointer; }
.class-target-ring { fill: rgba(255, 250, 240, .9); stroke: #e0245e; stroke-width: 3; }
.class-target.done .class-target-ring { stroke: #3d9a2a; }
.class-target-icon { font-size: 18px; text-anchor: middle; }
.class-target-name { font: 900 12px 'Jua', 'Noto Sans KR', 'Malgun Gothic', sans-serif; fill: #c41d50; text-anchor: middle;
  paint-order: stroke; stroke: #fffaf0; stroke-width: 3.5px; stroke-linejoin: round; }
.expedition .button.suggest { margin-top: 8px; min-height: 46px; font-size: 15px; }
.streak {
  font-size: 12px; font-weight: 900; color: #fff8e6; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--outline);
  background: linear-gradient(#ffb347, #f28b30); box-shadow: 0 2px 0 var(--outline); text-shadow: 0 1px 0 var(--outline);
  animation: streak-flicker 900ms ease-in-out infinite alternate;
}
.streak::before { content: '🔥 '; }
.streak[data-level='warm'] { background: linear-gradient(#ff8a5b, #e8553a); }
.streak[data-level='hot'] { background: linear-gradient(#ff5b8a, #c9244b); animation-duration: 450ms; }
@keyframes streak-flicker { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.06); filter: brightness(1.15); } }

/* ── 누르고 싶은 버튼: 빛이 지나가고 살짝 숨 쉰다 ─────────── */
.target .button.primary, .expedition .button.suggest, #join-open, #submit-answer, #season-ok {
  position: relative; overflow: hidden;
}
.target .button.primary::after, .expedition .button.suggest::after, #join-open::after, #season-ok::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -50%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: skewX(-18deg); animation: shine 2.8s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { left: -50%; } 85%, 100% { left: 130%; } }
.target .button.primary:active { transform: translateY(3px); }

/* ── 문제 카드 ────────────────────────────────────────── */
.panel.quiz { position: relative; overflow: visible; }
.question.enter { animation: q-enter 380ms cubic-bezier(.2, 1.6, .5, 1); }
@keyframes q-enter { 0% { opacity: 0; transform: translateY(14px) scale(.7); } 100% { opacity: 1; transform: none; } }
.panel.quiz.fx-glow { animation: card-glow 520ms ease-out; }
@keyframes card-glow {
  0% { box-shadow: inset 0 0 0 3px rgba(255, 250, 235, .7), 0 0 0 5px var(--wood), 0 0 0 8px var(--outline), 0 0 0 8px rgba(184, 204, 62, .9); }
  100% { box-shadow: inset 0 0 0 3px rgba(255, 250, 235, .7), 0 0 0 5px var(--wood), 0 0 0 8px var(--outline), 0 0 0 26px rgba(184, 204, 62, 0); }
}
.fx-stamp {
  position: absolute; right: 14px; top: 64px; z-index: 5; pointer-events: none;
  font-size: 22px; font-weight: 900; padding: 6px 12px; border-radius: 12px; border: 4px solid currentColor;
  background: rgba(255, 248, 230, .85); transform: rotate(-12deg);
  animation: stamp 900ms cubic-bezier(.2, 1.8, .4, 1) forwards;
}
.fx-stamp.ok { color: var(--olive-2); }
.fx-stamp.no { color: var(--gold-2); }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-12deg) scale(2.4); }
  25% { opacity: 1; transform: rotate(-12deg) scale(.92); }
  35% { transform: rotate(-12deg) scale(1.05); }
  75% { opacity: 1; transform: rotate(-12deg) scale(1); }
  100% { opacity: 0; transform: rotate(-12deg) scale(1) translateY(-8px); }
}
.fx-combo {
  position: absolute; left: 50%; top: 38%; z-index: 6; pointer-events: none; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; padding: 10px 26px 12px; border-radius: 18px;
  background: linear-gradient(#ffcf5c, #f29b30); border: 4px solid var(--outline); box-shadow: 0 6px 0 var(--outline), 0 0 40px rgba(255, 170, 60, .7);
  color: #fff8e6; text-shadow: -2px -2px 0 var(--outline), 2px -2px 0 var(--outline), -2px 2px 0 var(--outline), 2px 2px 0 var(--outline), 0 3px 0 var(--outline);
  animation: combo 1.5s cubic-bezier(.2, 1.6, .4, 1) forwards; white-space: nowrap;
}
.fx-combo b { font-size: 38px; font-weight: 900; line-height: 1; }
.fx-combo span { font-size: 14px; font-weight: 900; }
.fx-combo::before { content: '🔥'; position: absolute; top: -26px; font-size: 34px; animation: streak-flicker 300ms ease-in-out infinite alternate; }
.fx-combo.warm { background: linear-gradient(#ff9f6b, #e8553a); }
.fx-combo.hot { background: linear-gradient(#ff7aa2, #c9244b); box-shadow: 0 6px 0 var(--outline), 0 0 60px rgba(255, 60, 120, .8); }
@keyframes combo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-10deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(4deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(.9); }
}
.keypad button { transition: transform 80ms ease-out, box-shadow 80ms ease-out, background 120ms; }
.keypad button:active { background: linear-gradient(#e9f7cf, #cfe8a8); }

/* ── 지도: 살아 있는 느낌 ─────────────────────────────── */
/* 차지할 수 있는 땅: 테두리 점선이 흐른다 */
#map .cell.reachable { stroke: var(--teal-2); stroke-width: 2.2; stroke-dasharray: 6 4; animation: march 900ms linear infinite; }
@keyframes march { to { stroke-dashoffset: -20; } }
/* 고른 땅: 빛나는 테두리가 숨 쉰다 */
#map #selection-glow { stroke: #fff4c2; animation: glow-breathe 1.4s ease-in-out infinite; }
@keyframes glow-breathe { 0%, 100% { stroke-opacity: .5; } 50% { stroke-opacity: 1; } }
/* 바다: 잔물결이 천천히 흐른다 */
.map-viewport::before {
  content: ''; position: absolute; inset: -60px; pointer-events: none; z-index: 0; opacity: .35;
  background:
    radial-gradient(ellipse 22px 6px at 20% 30%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(ellipse 18px 5px at 70% 60%, rgba(255, 255, 255, .6), transparent 70%),
    radial-gradient(ellipse 26px 6px at 45% 85%, rgba(255, 255, 255, .55), transparent 70%);
  background-size: 180px 120px;
  animation: sea-drift 14s linear infinite;
}
#map { position: relative; z-index: 1; }
@keyframes sea-drift { from { transform: translate(0, 0); } to { transform: translate(180px, 60px); } }

/* ── 패널이 나타날 때 ─────────────────────────────────── */
.panels > .panel:not([hidden]) { animation: panel-in 300ms cubic-bezier(.2, 1.4, .5, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
dialog[open] { animation: dialog-in 320ms cubic-bezier(.2, 1.4, .5, 1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }

/* 움직임 줄이기 */
body.reduce-motion #map .cell.reachable, body.reduce-motion #map #selection-glow, body.reduce-motion .map-viewport::before,
body.reduce-motion .target .button.primary, body.reduce-motion .streak, body.reduce-motion .button::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #map .cell.reachable, #map #selection-glow, .map-viewport::before, .target .button.primary, .streak,
  .target .button.primary::after, .expedition .button.suggest::after, #join-open::after, #season-ok::after { animation: none !important; }
}
@media (max-width: 480px) {
  .stat b { font-size: 22px; }
  .fx-combo b { font-size: 30px; }
}
@media (max-width: 480px) {
  /* 휴대폰: 내 기록판은 상단 아래 얇은 띠로 (타일 3개 + 추천 버튼) */
  .expedition.stats-board, .solving .expedition.stats-board {
    display: flex !important; align-items: stretch; gap: 6px; position: absolute;
    top: calc(max(var(--hud-height), var(--hud-real, 0px)) + 4px); bottom: auto; left: 8px; right: 64px; width: auto; padding: 6px; border-radius: 14px;
  }
  .expedition.stats-board[hidden] { display: none !important; }
  .stats-board .board-head, .stats-board .board-foot { display: none; }
  /* 휴대폰: 띠 바로 아래 한 줄로(제목·막대 없이 숫자만) */
  .stats-board .class-goal { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 3px 9px; border-width: 2px; border-radius: 10px; box-shadow: 0 2px 0 var(--outline); }
  .stats-board .class-goal-head span, .stats-board .class-goal-bar { display: none; }
  .stats-board .class-goal:not([hidden]) { display: flex; align-items: baseline; gap: 8px; }
  .stats-board .class-goal-head::before { content: '🎯'; margin-right: 4px; }
  .stats-board .class-goal-foot { flex: 1; }
  /* 휴대폰: 작전 목표는 띠(와 반 목표 줄) 아래 작은 단추 줄로 */
  .stats-board .class-targets:not([hidden]) { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; gap: 4px; }
  .stats-board.has-goal .class-targets:not([hidden]) { top: calc(100% + 38px); }
  .stats-board .class-target-chip { min-height: 32px; padding: 2px 8px; font-size: 11.5px; border-width: 2px; box-shadow: 0 2px 0 var(--outline); }
  .stats-board .class-target-chip small { display: none; }
  /* 휴대폰: 아이템 줄은 띠 바로 아래(반 목표·작전 목표는 그 아래로 내린다) */
  .stats-board .item-bar:not([hidden]) { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; gap: 4px; }
  .stats-board .item-gauge, .stats-board .item-btn { min-height: 34px; border-width: 2px; box-shadow: 0 2px 0 var(--outline); }
  .stats-board .item-btn { width: 40px; font-size: 16px; }
  .stats-board.has-items .class-goal { top: calc(100% + 42px); }
  .stats-board.has-items .class-targets:not([hidden]) { top: calc(100% + 42px); }
  .stats-board.has-items.has-goal .class-targets:not([hidden]) { top: calc(100% + 76px); }
  .stats-board .stats { flex: 1; gap: 4px; }
  .stats-board .stat { flex-direction: row; justify-content: center; gap: 4px; padding: 4px 2px; border-width: 2.5px; border-radius: 10px; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 3px 0 var(--outline); }
  .stats-board .stat svg { width: 16px; height: 16px; }
  .stats-board .stat b { font-size: 18px; }
  .stats-board .stat small { display: none; }
  .expedition .button.suggest { margin: 0 0 3px; min-height: 40px; width: 48px; padding: 0; flex: none; font-size: 20px; }
  .expedition .button.suggest .label { display: none; }
  .legend { display: none !important; }
}
/* 콤보 배너는 카드 위로 떠서 다음 문제를 가리지 않는다 */
.fx-combo { top: 0; transform: translate(-50%, -78%); animation-name: combo-above; }
@keyframes combo-above {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.2) rotate(-10deg); }
  18% { opacity: 1; transform: translate(-50%, -78%) scale(1.15) rotate(4deg); }
  30% { transform: translate(-50%, -78%) scale(1) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, -78%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(.9); }
}
@media (max-width: 480px) { .notices { top: calc(max(var(--hud-height), var(--hud-real, 0px)) + 2px); } }

/* ── 게임 글자: 정답!/도장/콤보 ─────────────────────── */
.feedback .verdict, .fx-stamp, .fx-combo b, .fx-ribbon b {
  font-family: 'Black Han Sans', 'Jua', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  font-weight: 900; letter-spacing: -.02em;
}
.feedback .verdict {
  display: inline-block; font-size: 30px; line-height: 1.1; margin: 2px 0 4px;
  animation: verdict-in 420ms cubic-bezier(.2, 1.8, .4, 1);
}
.feedback .verdict.ok {
  color: transparent; background: linear-gradient(180deg, #fffbd0 0%, #ffe066 40%, #f7a928 75%, #e07b12 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 2.2px #3a2415; paint-order: stroke fill;
  filter: drop-shadow(0 3px 0 #3a2415) drop-shadow(0 6px 8px rgba(58, 36, 21, .25));
}
.feedback .verdict.no {
  font-size: 22px; color: transparent; background: linear-gradient(180deg, #ffe3dc, #ff9b8f 60%, #e25a4e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1.8px #3a2415;
  filter: drop-shadow(0 2px 0 #3a2415);
}
@keyframes verdict-in { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.18) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.fx-stamp { font-size: 26px; -webkit-text-stroke: 1px currentColor; letter-spacing: .02em; }
.fx-stamp.ok { color: #4c8a1c; background: rgba(240, 255, 214, .92); box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); }
.fx-combo b {
  font-size: 40px; color: transparent; background: linear-gradient(180deg, #fffbd0, #ffe066 45%, #ff9b3d);
  -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2.4px #3a2415; text-shadow: none;
  filter: drop-shadow(0 3px 0 #3a2415);
}
/* 콤보 배너: 카드 안쪽 윗부분에 뜬다(상단 막대에 가리지 않게, 문제 글자도 가리지 않게) */
.panel.quiz .fx-combo { top: 10px; transform: translate(-50%, 0); animation-name: combo-inside; padding: 6px 22px 8px; }
.panel.quiz .fx-combo::before { top: -18px; font-size: 28px; }
@keyframes combo-inside {
  0% { opacity: 0; transform: translate(-50%, -10px) scale(.2) rotate(-10deg); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.15) rotate(3deg); }
  30% { transform: translate(-50%, 0) scale(1) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(.9); }
}
.fx-ribbon b { -webkit-text-stroke: 0; }

/* ── 이 땅에서 푼 문제 ──────────────────────────────── */
.cell-solved {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0;
  padding: 8px; border-radius: 12px; background: rgba(61, 134, 198, .1); border: 2px dashed rgba(44, 106, 161, .45);
}
.cell-solved p { grid-column: 1 / 3; margin: 0; font-size: 11.5px; font-weight: 900; color: #2c6aa1; }
.cell-solved div {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 10px; background: linear-gradient(#fffaf0, var(--paper)); border: 2px solid rgba(58, 36, 21, .5);
}
.cell-solved b { grid-row: 1 / 3; font-size: 24px; font-weight: 900; color: #2c6aa1; font-variant-numeric: tabular-nums; }
.cell-solved small { font-size: 11px; font-weight: 900; color: var(--wood-3); }
.cell-solved em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }

/* ── 게임 글자: 정답!/도장/콤보 ─────────────────────── */
.feedback .verdict, .fx-stamp, .fx-combo b, .fx-ribbon b {
  font-family: 'Black Han Sans', 'Jua', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  font-weight: 900; letter-spacing: -.02em;
}
.feedback .verdict {
  display: inline-block; font-size: 30px; line-height: 1.1; margin: 2px 0 4px;
  animation: verdict-in 420ms cubic-bezier(.2, 1.8, .4, 1);
}
.feedback .verdict.ok {
  color: transparent; background: linear-gradient(180deg, #fffbd0 0%, #ffe066 40%, #f7a928 75%, #e07b12 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 2.2px #3a2415; paint-order: stroke fill;
  filter: drop-shadow(0 3px 0 #3a2415) drop-shadow(0 6px 8px rgba(58, 36, 21, .25));
}
.feedback .verdict.no {
  font-size: 22px; color: transparent; background: linear-gradient(180deg, #ffe3dc, #ff9b8f 60%, #e25a4e);
  -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1.8px #3a2415;
  filter: drop-shadow(0 2px 0 #3a2415);
}
@keyframes verdict-in { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.18) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.fx-stamp { font-size: 26px; -webkit-text-stroke: 1px currentColor; letter-spacing: .02em; }
.fx-stamp.ok { color: #4c8a1c; background: rgba(240, 255, 214, .92); box-shadow: 0 0 0 3px rgba(255, 255, 255, .6); }
.fx-combo b {
  font-size: 40px; color: transparent; background: linear-gradient(180deg, #fffbd0, #ffe066 45%, #ff9b3d);
  -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2.4px #3a2415; text-shadow: none;
  filter: drop-shadow(0 3px 0 #3a2415);
}
/* 콤보 배너: 카드 안쪽 윗부분에 뜬다(상단 막대에 가리지 않게, 문제 글자도 가리지 않게) */
.panel.quiz .fx-combo { top: 10px; transform: translate(-50%, 0); animation-name: combo-inside; padding: 6px 22px 8px; }
.panel.quiz .fx-combo::before { top: -18px; font-size: 28px; }
@keyframes combo-inside {
  0% { opacity: 0; transform: translate(-50%, -10px) scale(.2) rotate(-10deg); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.15) rotate(3deg); }
  30% { transform: translate(-50%, 0) scale(1) rotate(0); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(.9); }
}
.fx-ribbon b { -webkit-text-stroke: 0; }

/* ── 이 땅에서 푼 문제 ──────────────────────────────── */
.cell-solved {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0;
  padding: 8px; border-radius: 12px; background: rgba(61, 134, 198, .1); border: 2px dashed rgba(44, 106, 161, .45);
}
.cell-solved p { grid-column: 1 / 3; margin: 0; font-size: 11.5px; font-weight: 900; color: #2c6aa1; }
.cell-solved div {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 10px; background: linear-gradient(#fffaf0, var(--paper)); border: 2px solid rgba(58, 36, 21, .5);
}
.cell-solved b { grid-row: 1 / 3; font-size: 24px; font-weight: 900; color: #2c6aa1; font-variant-numeric: tabular-nums; }
.cell-solved small { font-size: 11px; font-weight: 900; color: var(--wood-3); }
.cell-solved em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }

/* 움직임 줄이기(기기 설정)일 때: 연출을 없애지 않고, 움직임 없이 잠깐 보였다가 사라진다 */
@keyframes fx-still { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fx-combo, .panel.quiz .fx-combo { animation: fx-still 1.4s linear forwards !important; }
  .fx-ribbon { animation: fx-still 2.2s linear forwards !important; }
  .fx-stamp { animation: fx-still .9s linear forwards !important; }
  .fx-flag, .fx-flag.big, .fx-shield { animation: fx-still 1.6s linear forwards !important; }
  .fx-pop, #quiz-gain.pop-up { animation: fx-still 1s linear forwards !important; }
  .feedback .verdict { animation: none; }
}
/* 콤보 배너: 지도 위쪽 가운데(상단 막대·알림 아래) */
.fx-layer > .fx-combo { position: absolute; left: 50%; top: calc(var(--hud-height) + 64px); z-index: 8; transform: translate(-50%, 0); animation-name: combo-inside; }
@media (min-width: 821px) { .fx-layer > .fx-combo { left: calc((100% - var(--side-width)) / 2); } }
@media (max-width: 480px) { .fx-layer > .fx-combo { top: calc(var(--hud-height) + 130px); } }

/* ══ 시작 화면 로고·버튼 손맛 ═══════════════════════════ */
.title-screen__heading strong { font-size: clamp(96px, 11vw, 150px) !important; line-height: 1; animation: logo-drop 900ms cubic-bezier(.2, 1.5, .4, 1) both; }
.title-screen__heading span { font-size: clamp(24px, 2.6vw, 36px) !important; -webkit-text-stroke-width: 3px !important; margin-top: 8px; color: var(--title-cream); animation: logo-drop 900ms 120ms cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes logo-drop { 0% { opacity: 0; transform: translateY(-60px) scale(.7) rotate(-4deg); } 60% { opacity: 1; transform: translateY(6px) scale(1.04); } 100% { transform: none; } }
.title-screen__start:enabled { position: relative; overflow: hidden; animation: start-pulse 1.6s ease-in-out infinite; }
.title-screen__start:enabled::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 30%; left: -40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-18deg);
  animation: shine 2.4s ease-in-out infinite;
}
@keyframes start-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (max-width: 600px) { .title-screen__heading strong { font-size: clamp(76px, 22vw, 110px) !important; } .title-screen__heading span { font-size: 20px !important; } }
@media (prefers-reduced-motion: reduce) { .title-screen__heading strong, .title-screen__heading span, .title-screen__start:enabled, .title-screen__start::after { animation: none !important; } }

/* ══ 순위판 ═════════════════════════════════════════════ */
.lb { display: flex; flex-direction: column; gap: 12px; }
.lb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lb-head h3 { font-size: 20px; color: var(--wood-3); }
/* 문장(엠블럼): 학교 색 방패 + 학교 이름 두 글자 */
.lb-emblem {
  --size: 44px; position: relative; flex: none; width: var(--size); height: calc(var(--size) * 1.12);
  display: grid; place-items: center; color: #fff8e6;
  background: radial-gradient(120% 90% at 40% 20%, rgba(255, 255, 255, .45), transparent 55%), var(--c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 45'%3E%3Cpath d='M20 1 38 6v14c0 12-8 20-18 24C10 40 2 32 2 20V6Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 45'%3E%3Cpath d='M20 1 38 6v14c0 12-8 20-18 24C10 40 2 32 2 20V6Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 0 rgba(58, 36, 21, .6));
}
.lb-emblem::before {  /* 방패 테두리 */
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 45'%3E%3Cpath d='M20 1 38 6v14c0 12-8 20-18 24C10 40 2 32 2 20V6Z' fill='none' stroke='%233a2415' stroke-width='3.2'/%3E%3Cpath d='M20 5 34 9v11c0 10-6 17-14 20C12 37 6 30 6 20V9Z' fill='none' stroke='%23fff8e6' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.lb-emblem > span {
  position: relative; font-weight: 900; font-size: calc(var(--size) * .36); letter-spacing: -.06em; margin-top: -8%;
  text-shadow: -1.5px -1.5px 0 #3a2415, 1.5px -1.5px 0 #3a2415, -1.5px 1.5px 0 #3a2415, 1.5px 1.5px 0 #3a2415, 0 2px 0 #3a2415;
}
.lb-emblem.sm { --size: 34px; }
.lb-emblem.md { --size: 58px; }
.lb-emblem.lg { --size: 64px; }
.lb-emblem.xl { --size: 78px; }

/* 합계 */
.lb-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lb-total {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 4px 8px; overflow: hidden;
  border: 3px solid var(--outline); border-radius: 16px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--outline);
}
.lb-total::after { content: ''; position: absolute; left: 6%; right: 6%; top: 3px; height: 40%; border-radius: 12px; background: linear-gradient(rgba(255, 255, 255, .35), transparent); }
.lb-total b { font-size: 28px; font-weight: 900; color: #fff8e6; font-variant-numeric: tabular-nums; line-height: 1.1;
  text-shadow: -1.5px -1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline), 1.5px 1.5px 0 var(--outline), 0 3px 0 var(--outline); }
.lb-total small { font-size: 12px; font-weight: 900; color: rgba(255, 248, 230, .95); text-shadow: 0 1px 0 var(--outline); }
.lb-total.schools { background: linear-gradient(#b48be8, #8a5cc9 60%, #6b3fae); }
.lb-total.captures { background: linear-gradient(#f08a80, #d9544b 60%, #a93a33); }
.lb-total.answers { background: linear-gradient(#6fb3e8, #3d86c6 60%, #2c6aa1); }

/* 우리 학교 */
.lb-me {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; overflow: hidden;
  border: 3px solid var(--outline); border-radius: 18px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--c) 30%, #fff8e6), #fff8e6 70%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), 0 5px 0 var(--outline), 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent);
  animation: lb-pop 520ms cubic-bezier(.2, 1.5, .4, 1) both;
}
.lb-me-rank { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.lb-me-rank small { font-size: 11px; font-weight: 900; color: var(--wood-3); }
.lb-me-rank b {
  font-size: clamp(26px, 7vw, 44px); font-weight: 900; font-variant-numeric: tabular-nums; color: transparent; white-space: nowrap;
  background: linear-gradient(180deg, #fffbd0, #ffe066 45%, #f29b30); -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 2.4px #3a2415; filter: drop-shadow(0 3px 0 #3a2415);
}
.lb-me-rank b span { font-size: 18px; }
.lb-me-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-me-info strong { font-size: 16px; color: var(--wood-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-me-info span { font-size: 12px; font-weight: 700; color: var(--muted); }
.lb-me-goal { margin: 4px 0 0; font-size: 13px; font-weight: 900; color: var(--red-2); }

/* 시상대 */
.lb-podium {
  position: relative; list-style: none; margin: 8px 0 0; padding: 26px 0 0; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: 6px;
  isolation: isolate;
}
.lb-podium::before {  /* 1위 뒤에서 도는 빛줄기 */
  content: ''; position: absolute; left: 50%; top: 0; width: 280px; height: 280px; margin-left: -140px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 90, .38) 0deg 10deg, transparent 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%);
  animation: rays 14s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }
.lb-spot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.lb-spot.empty { visibility: hidden; }
.lb-spot .lb-emblem { animation: lb-drop 700ms cubic-bezier(.2, 1.6, .4, 1) both; }
.lb-spot.p1 .lb-emblem { animation-delay: 380ms; }
.lb-spot.p2 .lb-emblem { animation-delay: 200ms; }
.lb-spot.p3 .lb-emblem { animation-delay: 280ms; }
.lb-crown { width: 52px; height: 36px; margin-bottom: -6px; z-index: 2; animation: lb-drop 700ms 620ms cubic-bezier(.2, 1.8, .4, 1) both, crown-bob 2.2s 1.4s ease-in-out infinite; }
.lb-crown svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(58, 36, 21, .45)); }
@keyframes crown-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
.lb-name { max-width: 100%; font-size: 15px; font-weight: 900; color: var(--wood-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-spot.p1 .lb-name { font-size: 18px; }
.lb-spot.mine .lb-name { color: var(--teal-2); }
.lb-area {
  font-size: 12px; font-weight: 900; color: #fff8e6; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--outline);
  background: linear-gradient(#8e3a2c, #6f2a1f); box-shadow: 0 2px 0 var(--outline);
}
.lb-block {
  width: 100%; margin-top: 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 6px;
  border: 3px solid var(--outline); border-bottom: 0; border-radius: 12px 12px 0 0; transform-origin: bottom;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .45), inset 0 -8px 12px rgba(0, 0, 0, .12);
  animation: lb-rise 600ms cubic-bezier(.2, 1.3, .4, 1) both;
}
.lb-block i { font-style: normal; font-size: 30px; font-weight: 900; color: #fff8e6; text-shadow: 0 2px 0 var(--outline), -1.5px 0 0 var(--outline), 1.5px 0 0 var(--outline), 0 -1.5px 0 var(--outline); }
.lb-block small { font-size: 11px; font-weight: 900; color: rgba(255, 248, 230, .9); text-shadow: 0 1px 0 var(--outline); }
.lb-spot.p1 .lb-block { height: 96px; background: linear-gradient(#ffe689, #f7c23e 45%, #d99220); }
.lb-spot.p2 .lb-block { height: 70px; background: linear-gradient(#f4f6f8, #c7ccd4 50%, #99a1ad); animation-delay: 80ms; }
.lb-spot.p3 .lb-block { height: 52px; background: linear-gradient(#f3c49a, #cd8248 50%, #9c5a2c); animation-delay: 160ms; }
.lb-spot.p1 .lb-block i { font-size: 38px; }
@keyframes lb-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lb-drop { 0% { opacity: 0; transform: translateY(-40px) scale(.6); } 70% { opacity: 1; transform: translateY(4px) scale(1.05); } 100% { transform: none; } }
@keyframes lb-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* 4~10위 */
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  display: grid; grid-template-columns: 34px 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 6px 12px 6px 8px; border: 2.5px solid var(--outline); border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, #fffaf0), #fffaf0 40%);
  box-shadow: 0 3px 0 rgba(58, 36, 21, .45);
  animation: lb-slide 420ms cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(500ms + var(--i) * 60ms);
}
.lb-row.mine { border-color: var(--teal-2); box-shadow: 0 3px 0 var(--teal-2), 0 0 0 4px rgba(43, 158, 154, .3); }
.lb-rank {
  width: 32px; height: 32px; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #fff8e6;
  background: linear-gradient(#a8703f, #6b3f22); border: 2.5px solid var(--outline); box-shadow: 0 2px 0 var(--outline);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); border-radius: 0;
  text-shadow: 0 1.5px 0 var(--outline); white-space: nowrap; line-height: 1;
}
.lb-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-main b { font-size: 14px; font-weight: 900; color: var(--wood-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-bar { height: 8px; border-radius: 999px; background: rgba(58, 36, 21, .15); overflow: hidden; }
.lb-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 70%, #000)); animation: lb-fill 700ms cubic-bezier(.2, 1, .4, 1) both; animation-delay: calc(700ms + var(--i) * 60ms); }
.lb-val { display: flex; flex-direction: column; align-items: flex-end; font-size: 16px; font-weight: 900; color: var(--wood-3); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lb-val small { font-size: 10.5px; font-weight: 800; color: var(--muted); }
.lb-gap { text-align: center; font-weight: 900; color: var(--muted); }
@keyframes lb-slide { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes lb-fill { from { width: 0; } }

/* 시즌 창 머리 */
.season-banner { text-align: center; margin: 0 44px 10px; }
.season-banner .season-kicker { font-size: 18px; padding: 6px 30px 7px; margin: 0; }
.season-banner p { margin: 6px 0 0; font-size: 13px; color: var(--muted); font-weight: 800; }
.season-dialog #season-ok { margin-top: 12px; }

@media (max-width: 480px) {
  .lb-podium { grid-template-columns: 1fr 1.15fr 1fr; }
  .lb-emblem.xl { --size: 64px; }
  .lb-emblem.md { --size: 48px; }
  .lb-spot.p1 .lb-block { height: 80px; }
  .lb-spot.p2 .lb-block { height: 58px; }
  .lb-spot.p3 .lb-block { height: 44px; }
  .lb-name { font-size: 13px; }
  .lb-me-rank b { font-size: 36px; }
  .lb-total b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-podium::before, .lb-crown, .lb-spot .lb-emblem, .lb-block, .lb-row, .lb-bar i, .lb-me { animation: none !important; }
}
body.reduce-motion .lb-podium::before, body.reduce-motion .lb-crown, body.reduce-motion .lb-spot .lb-emblem,
body.reduce-motion .lb-block, body.reduce-motion .lb-row, body.reduce-motion .lb-bar i, body.reduce-motion .lb-me { animation: none !important; }

@media (min-width: 821px) {
  .map-controls { top: calc(max(var(--hud-height), var(--hud-real, 0px)) + 2px); bottom: auto !important; left: auto; right: 8px; flex-direction: column; gap: 0; }
  .map-badge { top: calc(max(var(--hud-height), var(--hud-real, 0px)) + 4px); left: 14px; max-width: min(44ch, calc(100% - var(--side-width) - 100px)); }
  .expedition { left: 20px; }
  .panels { right: 68px; }
  .map-controls .pad-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin-bottom: 8px; }
  .compass { display: none; }
}

/* ── 전국까지 이어지는 지도 ─────────────────────────── */
.map-dots { position: absolute; pointer-events: none; z-index: 2; }
#map #nation .nation-region {
  fill: #f3ead2; stroke: rgba(58, 36, 21, .35); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer;
  transition: fill 160ms;
}
#map #nation .nation-region:hover { fill: #fff6dc; }
#map #nation .nation-region.current { fill: #f7f1dd; stroke: var(--outline); stroke-width: 2.2; }
/* 전국이 보일 만큼 축소하면 지금 지역의 구역 테두리는 흐리게(점과 윤곽이 주인공) */
#map.nation-view .cell { stroke-opacity: .15; }
#map.nation-view #lines-dong { opacity: .25; }
#map.nation-view #schools, #map.nation-view #labels-school { display: none; }

/* ── 지도 다듬기: 땅 그림자·옆 지역과 한 몸·뱃길 ───────── */
#map #nation .nation-region { fill: var(--nation-fill, var(--land)); stroke: var(--nation-stroke, rgba(58, 36, 21, .28)); }
#map #nation .nation-region:hover { fill: var(--nation-fill, #fff8e2); }
#map #nation .nation-region.current { fill: var(--nation-fill, var(--land)); stroke: var(--nation-stroke, var(--outline)); }
#map #nation-shadow { --nation-fill: rgba(16, 64, 78, .30); --nation-stroke: rgba(16, 64, 78, .30); pointer-events: none; }
#map .cell.fringe.blank { fill-opacity: 0; stroke-opacity: 0; }
#map #sea-routes { stroke: #1f6f8b; stroke-width: 2.4; stroke-dasharray: 7 6; opacity: .9; animation: march 900ms linear infinite; }

/* ── 글꼴 ───────────────────────────────────────────────
   본문: Noto Sans KR / 제목·버튼·알림: 주아(둥글고 굵은 게임 글자) / 큰 숫자·정답!·콤보: 검은고딕(Black Han Sans)
   글꼴을 못 받으면 맑은 고딕으로 그대로 보인다. */
:root {
  --font-body: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-game: 'Jua', 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-impact: 'Black Han Sans', 'Jua', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
}
body, input, select, textarea { font-family: var(--font-body); }
/* 주아·검은고딕은 굵기가 하나뿐이라 가짜 굵게를 막는다 */
h1, h2, h3, .button, .pad-button, .toast, .notice, .panel-title, .panel-eyebrow, .season-chip, .region-chip,
.season-kicker, .quiz-caption, .question, .tag, .streak, .stat small, .lb-name, .lb-head h3, .lb-me-info strong,
.lb-me-goal, .lb-total small, .lb-row b, .dialog h2, dialog h2, .rank-tabs button, .school-marker + text,
#map .label, #atlas .label, .fx-pop, .fx-ribbon, .fx-flag, .title-screen button {
  font-family: var(--font-game); font-weight: 400; font-synthesis: none; letter-spacing: 0;
}
.feedback .verdict, .fx-stamp, .fx-combo b, .fx-ribbon b, .lb-block i, .lb-me-rank b, .lb-total b, .stat b,
.cell-solved b, .question b, .hud .score b {
  font-family: var(--font-impact); font-weight: 400; font-synthesis: none; letter-spacing: 0;
}

/* 시상대: 글자가 잘리지 않게 */
.lb-block { padding-bottom: 6px; }
.lb-spot.p1 .lb-block { height: auto; min-height: 100px; }
.lb-spot.p2 .lb-block { height: auto; min-height: 78px; }
.lb-spot.p3 .lb-block { height: auto; min-height: 64px; }
.lb-block small { white-space: nowrap; }
@media (max-width: 480px) {
  .lb-spot.p1 .lb-block { min-height: 86px; }
  .lb-spot.p2 .lb-block { min-height: 68px; }
  .lb-spot.p3 .lb-block { min-height: 58px; }
}
/* 땅은 닫힌 폴리곤으로 칠하고(같은 색 선으로 조각 사이 틈을 메움), 경계선은 따로 */
#map #nation .nation-region, #map #nation .nation-region.current, #map #nation .nation-region:hover {
  stroke: var(--nation-fill, var(--land)); stroke-width: 1.2; stroke-linejoin: round;
}
#map #nation .nation-region:hover { --land: #fff8e2; }
#map #nation .nation-edges { fill: none; stroke: var(--nation-edge, rgba(58, 36, 21, .32)); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; stroke-linejoin: round; }
#map #nation .nation-edges.current { stroke: var(--nation-edge, var(--outline)); stroke-width: 2.4; }
#map #nation-shadow { --nation-edge: transparent; }

/* ── 태블릿 렉 줄이기 ─────────────────────────────────
   끌기 중에는 지도를 GPU 층으로 옮기기만 한다(app.js liveView). 지도 안에서 계속 움직이는 선 애니메이션은
   지도 전체를 매 프레임 다시 그리게 하므로 멈춘 점선으로 바꾼다. */
#map, #map-dots { transform-origin: 0 0; }
#map.live, #map-dots.live { will-change: transform; }
#map.live { pointer-events: auto; }
#map .cell.reachable, #map #sea-routes, #map #selection-glow { animation: none !important; }
#map #selection-glow { stroke-opacity: .85; }
/* 버튼 빛줄기: left(다시 배치) 대신 transform(GPU) 으로 */
.target .button.primary::after, .expedition .button.suggest::after, #join-open::after, #season-ok::after,
.title-screen__start:enabled::after { left: -50%; animation-name: shine-move; will-change: transform; }
@keyframes shine-move { 0%, 55% { transform: translateX(0) skewX(-18deg); } 85%, 100% { transform: translateX(560%) skewX(-18deg); } }
/* 전국 땅 캔버스: 바다 위, 지역 지도(SVG) 밑 */
.map-nation { position: absolute; pointer-events: none; z-index: 0; transform-origin: 0 0; }
.map-nation.live { will-change: transform; }
/* 보급형 태블릿: 늘 움직이는 배경 효과를 끈다 */
body.lite .map-viewport::before, body.lite .lb-podium::before, body.lite .lb-crown { animation: none !important; }
body.lite .target .button.primary { animation: none; }

/* ── 전국 지도 창: 땅은 닫힌 폴리곤으로 칠하고(같은 색 선으로 조각 틈 메움), 경계선은 따로 ── */
#atlas .atlas-region { stroke-width: 1; stroke-opacity: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#atlas .atlas-base { stroke: var(--land); stroke-width: 1; vector-effect: non-scaling-stroke; }
#atlas .atlas-region[data-step='0'] { stroke: var(--land); }
#atlas .atlas-region[data-step='1'] { stroke: #cfe6d4; }
#atlas .atlas-region[data-step='2'] { stroke: #9bd0ae; }
#atlas .atlas-region[data-step='3'] { stroke: #5cb189; }
#atlas .atlas-region[data-step='4'] { stroke: #1c7a68; }
#atlas .atlas-region:hover, #atlas .atlas-region:focus-visible { stroke-width: 1; fill-opacity: .82; }
#atlas .atlas-line { fill: none; stroke: rgba(58, 36, 21, .38); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
#atlas .atlas-line.ours { stroke: #b3401f; stroke-width: 2.2; }
#atlas .atlas-line.current { stroke: var(--gold); stroke-width: 3; }
#atlas .atlas-line.hover { stroke: var(--outline); stroke-width: 2.4; }

/* 팝업 글자(정답!·도장·콤보·+1·리본·알림)는 주아 */
.feedback .verdict, .fx-stamp, .fx-combo, .fx-combo b, .fx-combo small, .fx-ribbon, .fx-ribbon b, .fx-pop, .fx-flag, .notice, .toast, #quiz-gain {
  font-family: var(--font-game); font-weight: 400; font-synthesis: none; letter-spacing: 0;
}

/* ── 이 땅에서 푼 문제: 학교별 정답 비교 ─────────────── */
.cell-solved .cell-rivals-head { margin-top: 4px; }
.cell-rivals { grid-column: 1 / 3; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cell-rivals li {
  display: grid; grid-template-columns: 12px minmax(0, 5.5em) 1fr auto; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 8px; background: rgba(255, 250, 240, .7); font-size: 12px;
}
.cell-rivals li.mine { background: #fff6d8; box-shadow: inset 0 0 0 2px rgba(58, 36, 21, .45); }
.cell-rivals i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid var(--outline); }
.cell-rivals .name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-rivals .bar { height: 8px; border-radius: 99px; background: rgba(58, 36, 21, .12); overflow: hidden; position: relative; }
.cell-rivals .bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); border-radius: 99px; }
.cell-rivals b { font-size: 12px; font-weight: 900; color: var(--wood-3); font-variant-numeric: tabular-nums; }
.cell-solved .cell-rivals b { grid-row: auto; grid-column: auto; font-size: 12px; color: var(--wood-3); white-space: nowrap; }
.cell-solved .cell-rivals li > * { grid-row: 1; }

/* ── 설정: 우리 학교·닉네임 ───────────────────────────── */
.settings-me { display: grid; gap: 0; }
.settings-me .setting-row { gap: 12px; }
.settings-me .setting-value { display: grid; min-width: 0; }
.settings-me .setting-value small { font-size: 11px; font-weight: 800; color: var(--muted); }
.settings-me .setting-value b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-me .button { flex: none; min-height: 40px; padding: 6px 12px; font-size: 13px; }
.settings-me .button[disabled] { opacity: .5; }
.alias-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 4px 0 8px; }
.alias-form .error-text { grid-column: 1 / 3; margin: 0; }
.settings-me .panel-note { margin: 8px 0 0; font-size: 12px; }

/* 학교 이름 옆 지역 (같은 이름 학교 구분) */
.school-region { font-size: .78em; font-weight: 700; color: var(--muted); white-space: nowrap; }
.lb-spot .lb-region { display: block; margin-top: -2px; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ── 땅 기록(접기): PC 는 펼침, 휴대폰은 한 줄 요약 ───────── */
.cell-solved-wrap { margin: 10px 0 0; }
.cell-solved-wrap > summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 900; color: #2c6aa1;
  padding: 6px 10px; border-radius: 10px; background: rgba(61, 134, 198, .1); border: 2px dashed rgba(44, 106, 161, .45);
}
.cell-solved-wrap > summary::-webkit-details-marker { display: none; }
.cell-solved-wrap > summary::after { content: ' ▾'; }
.cell-solved-wrap[open] > summary::after { content: ' ▴'; }
.cell-solved-wrap[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cell-solved-wrap > .cell-solved { margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.cell-solved-wrap .cell-solved > p:first-child { display: none; }

/* ── 휴대폰·세로 패드: 땅 소개가 스크롤 없이 한 화면에 ─────────── */
@media (max-width: 820px) {
  .target > .chips, .target > .cell-solved-wrap, .target > .students, .target > .sea-note, .target > .alliance-card { grid-column: 1 / 3; }
  .target .region { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .target .region h2 { font-size: 20px; margin: 0; }
  .target .region small { font-size: 11px; }
  .target .region .sea-note { margin: 0; padding: 1px 8px; font-size: 11px; }
  .target .owner { padding: 6px 10px; }
  .target .meter { margin: 4px 0; }
  .target .chips { margin: -2px 0 0; }
  .target .callout { padding: 6px 10px; font-size: 12px; }
  .target .button.big { min-height: 46px; }
  .cell-solved-wrap { margin: 0; }
}

/* ── 문제 풀 때와 맞혔을 때 창 크기를 똑같이 ───────────────
   결과 글(정답!/아깝다!), +1 표시, '다음 문제' 버튼이 나타나도 자리가 미리 잡혀 있어 창이 커지거나 줄지 않는다. */
#quiz-feedback { min-height: 56px; max-height: 56px; overflow: hidden; margin-top: 4px; }
#quiz-feedback .verdict { margin: 0; line-height: 1.1; }
#quiz-feedback p:not(.verdict) { margin: 2px 0 0; font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#quiz-feedback .callout { display: none; }
#quiz-gain[hidden] { display: inline-block !important; visibility: hidden; }
@media (max-width: 820px) {
  #quiz-feedback { min-height: 40px; max-height: 40px; margin: 0; }
  #quiz-feedback .verdict { font-size: 22px; }
  #quiz-feedback p:not(.verdict) { font-size: 11px; }
}
#answer-form #next-question { margin: 0 0 5px; }   /* '정답 확인'과 똑같은 자리·크기 */
#quiz-feedback .verdict { white-space: nowrap; }
@media (max-width: 820px) { #quiz-feedback .verdict.no { font-size: 17px; } }

/* 아이폰(사파리): 선으로 그린 아이콘에 drop-shadow 필터를 주면 아이콘이 아예 안 그려지는 경우가 있다.
   필터 대신 같은 모양을 굵은 테두리색 선으로 한 번 더 그린 효과를 쓰지 않고, 필터만 뺀다. */
.pad-button svg { filter: none; }
/* 문제 풀이 중 기록판이 반투명이면 뒤의 지도 글자가 비쳐 보인다 */
.solving .expedition { opacity: 1; }
.pad-button svg { display: block; overflow: visible; stroke: #fbe9c8; }
.pad-button[aria-pressed='true'] svg { stroke: #fff8e6; }
/* 터치 기기(폰·패드): 늘 움직이는 바다 물결 층을 멈춘다(큰 합성 층이 그래픽 메모리를 차지한다) */
@media (pointer: coarse) { .map-viewport::before { animation: none; } }

/* 모험 준비: 닉네임 칸을 학교 검색 칸과 똑같이(이름표 위, 칸은 가득) */
#alias-field, #school-code-field, #class-field { display: flex; flex-direction: column; gap: 4px; }
#class-field .class-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#class-field select { width: 100%; box-sizing: border-box; min-height: 44px; }
#class-field .search-status { margin: 0; }
#alias-field input, #school-code-field input { width: 100%; box-sizing: border-box; }

/* 카카오톡·사파리의 글자 크기 키우기가 게임 칸을 밀어내지 않게 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 키패드는 칸 폭에 맞춰 줄어든다(좁은 폰·큰 글씨에서도 창 밖으로 안 나가게) */
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.keypad button { min-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; white-space: nowrap; }
.keypad button.wordy { font-size: clamp(11px, 3.4vw, 15px); letter-spacing: -.03em; }
#answer, #answer-form, #answer-form .button { min-width: 0; max-width: 100%; box-sizing: border-box; }
.quiz > * { min-width: 0; }

/* ── 어떤 기기에서도 문제 창이 화면을 넘지 않게 ─────────────
   키패드·입력칸·문제 글자가 화면 높이(dvh)에 맞춰 줄어든다. 폴드·큰 글씨·주소창이 큰 브라우저에서도 한 화면에 들어온다. */
.keypad button { height: clamp(34px, 5.6dvh, 54px) !important; min-height: 0 !important; }
#answer { height: clamp(38px, 6dvh, 56px) !important; }
#answer-form .button.big { height: 44px !important; min-height: 44px !important; box-sizing: border-box; flex: none; padding-top: 0; padding-bottom: 0; }
.quiz .question { font-size: clamp(24px, 5.2dvh, 46px); }
.panels { max-height: calc(100dvh - var(--hud-height, 88px) - 16px); }
/* 좁은 가로(폴드 펼침 등)에서 기록판이 지역 이름표를 가린다: 지역은 윗줄 지역 칩에도 있으니 이름표를 숨긴다 */
@media (max-width: 820px) { .map-badge { display: none; } }
.hud-right > * { flex-shrink: 0; }
.hud-right .region-chip { flex: 1 1 auto; max-width: none; min-width: 0; }
.region-chip #region-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .region-chip #region-name { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.15; word-break: keep-all; }
}
/* 세로 패드: 문제 창 높이 상한을 조금 넉넉히 */
@media (max-width: 820px) and (orientation: portrait) { .solving .panels { max-height: min(66dvh, 540px); } }
/* 휴대폰을 눕힌 낮은 화면: 문제 창을 더 촘촘하게 */
@media (max-height: 500px) {
  .quiz { padding: 6px 10px !important; gap: 4px 12px !important; }
  .quiz-head { min-height: 32px !important; }
  #quiz-close { min-width: 34px !important; min-height: 34px !important; width: 34px; height: 34px; }
  .keypad { gap: 3px !important; }
  .keypad button { height: clamp(26px, 7.4dvh, 40px) !important; font-size: 15px !important; }
  #answer { height: clamp(28px, 8dvh, 40px) !important; font-size: 18px; }
  #answer-form { gap: 4px !important; }
  #answer-form .button.big { min-height: clamp(28px, 8dvh, 40px); font-size: 13px; }
  .quiz .question { font-size: clamp(20px, 8dvh, 34px); }
  #quiz-progress { max-height: 34px; }
  #quiz-feedback { min-height: 30px; max-height: 30px; }
}
/* 오른쪽 창은 윗줄(실제 높이, app.js trackHudHeight) 바로 아래에서 시작하고 화면 아래를 넘지 않는다 */
@media (min-width: 821px) {
  .panels { top: max(var(--hud-height), var(--hud-real, 0px)); max-height: calc(100dvh - max(var(--hud-height), var(--hud-real, 0px)) - 14px); }
}

/* ── 휴대폰을 눕혔을 때: 세로로 돌려 달라는 안내 (높이가 낮아 한 화면에 안 들어온다) ── */
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-hint {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 2000; text-align: center;
    background: radial-gradient(circle at 50% 40%, #2a6f7c, #123b45); color: var(--title-cream, #fff6de);
  }
  .rotate-hint b { display: block; font-size: 48px; font-family: var(--font-impact); font-weight: 400; }
  .rotate-hint p { margin: 8px 0 4px; font-family: var(--font-game); font-size: 22px; }
  .rotate-hint small { font-size: 13px; opacity: .85; }
}
/* 결과 글자의 굵은 테두리가 칸 왼쪽에서 잘리지 않게 안쪽 여백 */
#quiz-feedback { padding: 0 4px; margin-left: -4px; }
@media (max-width: 820px) and (orientation: portrait) {
  .map-controls { left: auto; right: 8px; top: calc(max(var(--hud-height), var(--hud-real, 0px)) + 6px); bottom: auto; flex-direction: column; }
  .expedition { left: 12px; }
  .panels { left: 8px; right: 8px; }
}
@media (max-width: 820px) and (orientation: portrait) and (max-height: 780px) {
  .panels { right: 64px; }
}

/* 지역 순위: 범위 안내와 전국 순위 버튼 */
.rank-scope { margin: 2px 2px 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.rank-national { margin-top: 10px; }

/* 순위가 세·네 자리(예: 1982위)여도 숫자가 잘리지 않게 육각 칸을 넓힌다 */
.lb-row { grid-template-columns: minmax(34px, max-content) 34px minmax(0, 1fr) auto; }
.lb-rank[data-digits='3'] { width: 40px; font-size: 13px; }
.lb-rank[data-digits='4'] { width: 48px; font-size: 13px; }
.lb-rank[data-digits='5'] { width: 56px; font-size: 13px; }
.lb-rank[data-digits='6'] { width: 64px; font-size: 12px; }

/* 선택한 땅 정보는 작은 빨간 닫기 버튼으로 접고, 지도를 다시 누르면 열린다. */
.panel.target { position: relative; padding-top: 18px; }
.panel-close {
  position: absolute; top: 4px; right: 4px; z-index: 2; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; border: 0; background: transparent; color: var(--red);
  font: 900 24px/1 var(--font-game); cursor: pointer; text-shadow: 0 1px 0 #fff8e6;
}
.panel-close:hover, .panel-close:focus-visible { color: var(--red-2); outline: 3px solid rgba(217, 84, 75, .3); border-radius: 10px; }
.school-location { margin-top: 0 !important; min-height: 40px; font-size: 12px; }

/* 큰 수와 긴 구구단도 줄바꿈 없이 한 줄에 맞춘다. */
.quiz .question { white-space: nowrap; font-size: clamp(20px, 5.2dvh, 46px); letter-spacing: clamp(-.06em, -0.4vw, 0); }
@media (max-width: 480px) {
  .quiz .question { font-size: clamp(18px, 5.6vw, 24px); letter-spacing: -.06em; }
}

/* ── ✈️ 공항 · 새 소식(v1.1) ─────────────────────────────── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.plane-inline { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -0.3em; overflow: visible; }
/* 공항 구역: 겉은 흰 줄, 안은 진한 파랑(확대해도 굵기 그대로) */
#airport-edges, #airport-pins { pointer-events: none; }
#airport-edges path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.airport-edge-halo { stroke: rgba(255, 255, 255, .85); stroke-width: 6px; }
.airport-edge { stroke: #2f7de1; stroke-width: 3.5px; }
.airport-name { text-anchor: middle; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; fill: #2f7de1; paint-order: stroke; stroke: rgba(247, 238, 216, .75); stroke-width: 2px; stroke-linejoin: round; }
.air-map-slot { display: block; }
.air-map { position: relative; overflow: hidden; width: 100%; max-width: 250px; margin: 6px auto; border-radius: 12px; background: #cfe7f2; border: 2px solid #9fc6d8; }
.air-map svg { display: block; width: 100%; height: 100%; }
.air-map text { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; fill: #2f7de1; dominant-baseline: middle; }
.air-map-pin.focus text { fill: #c62828; }
.air-map-ring { fill: rgba(198, 40, 40, .15); stroke: #c62828; stroke-width: 7; }
.airport-box .air-map { max-width: 200px; }
.airport-hint { margin: 0 0 6px; font-size: 12px; color: #1f4f7a; text-align: center; word-break: keep-all; }
.airport-head .plane-inline { margin-right: 4px; }
.airport-box { grid-column: 1 / -1; margin: 6px 0; padding: 8px 10px; border: 2.5px solid #2c6aa1; border-radius: 12px; background: #e9f3ff; }
.airport-head { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: #1f4f7a; word-break: keep-all; }
/* 공항 목록은 따로 스크롤하지 않는다(창 하나로 스크롤) */
.airport-routes { display: flex; flex-wrap: wrap; gap: 4px; }
.airport-tabs { display: flex; gap: 6px; margin: 6px 0; }
.airport-tab { flex: 1; padding: 5px 8px; border: 2.5px solid #2c6aa1; border-radius: 99px; background: #fffaf0; color: #2c6aa1; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.airport-tab[aria-selected="true"] { background: #2c6aa1; color: #fff; }
.airport-route { padding: 2px 8px; border: 2px solid var(--c, rgba(58, 36, 21, .35)); border-radius: 99px; background: #fffaf0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.chips.siege span:first-child { background: none; border: 0; font-weight: 900; color: var(--muted); }
.chips.siege span.mine { border-color: var(--teal-2); color: var(--teal-2); font-weight: 900; }
.update-dialog { width: min(380px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); overflow: auto; }
.update-dialog h2 { margin: 2px 0 8px; }
.update-dialog h3 { margin: 12px 0 4px; font-size: 16px; }
.update-dialog p, .update-dialog li { font-size: 14px; line-height: 1.5; word-break: keep-all; }
.update-dialog ul { margin: 4px 0; padding-left: 20px; }
.update-kicker { margin: 0; font-family: var(--font-game); color: #2c6aa1; }
.update-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.update-dialog h2 { font-size: 21px; }
.update-dialog ul { padding-left: 18px; }
.update-dialog li { font-size: 15px; }
.update-find { margin: 10px 0 6px; text-align: center; font-weight: 800; font-size: 18px !important; line-height: 1.45; word-break: keep-all; }
.update-find .nowrap { white-space: nowrap; }
.update-dialog .air-map text { font-size: 40px; }

.airport-jump svg { overflow: visible; }
.airport-local { margin: 0 0 6px; padding: 5px 8px; border-radius: 8px; background: #2f7de1; color: #fff; font-size: 12.5px; font-weight: 800; word-break: keep-all; }

/* 지금 접속자 수(지역 이름 아래 한 줄) */
#map-badge #map-mode { display: block; }
.online-count { display: block; margin-top: 2px; font-size: .92em; font-weight: 800; color: #2f7a3d; }
.online-count::before { content: ''; display: inline-block; width: .55em; height: .55em; margin-right: .35em; border-radius: 50%; background: #3bb54a; box-shadow: 0 0 0 2px rgba(59, 181, 74, .25); vertical-align: .05em; }
.online-count[hidden] { display: none; }
.alliance-link { display: inline-block; min-height: 44px; margin: 4px 0 0; padding: 8px 12px; border: 1px solid var(--outline); border-radius: 12px; background: var(--accent-soft); color: var(--ink); font: inherit; font-size: .84em; font-weight: 800; cursor: pointer; }
.alliance-link:focus-visible, .alliance-card button:focus-visible { outline: 3px solid #276bb0; outline-offset: 2px; }
.alliance-card { margin: 12px 0; padding: 12px; border: 1px solid var(--outline); border-radius: 12px; background: var(--paper-2); color: var(--ink); }
.alliance-card[hidden] { display: none; }
.alliance-card p { margin: 7px 0; line-height: 1.45; }
.alliance-card button { min-height: 44px; margin: 8px 8px 0 0; }
.alliance-card p.muted { color: var(--muted); font-size: .92em; }
.alliance-card p.alliance-result { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--outline); font-weight: 800; }
/* 🤝 동맹 학교 땅: 금색 테두리 + 바깥 흰 줄 + 흰 빗금 · 🕊️ 휴전 땅: 하늘색 점선 (공항 테두리와 같은 방식) */
#alliance-marks { pointer-events: none; }
#alliance-marks path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.alliance-mark.ally .alliance-halo { fill: url(#ally-hatch); stroke: rgba(255, 255, 255, .9); stroke-width: 6px; }
.alliance-mark.ally .alliance-edge { fill: none; stroke: #e0a526; stroke-width: 3.2px; }
.alliance-mark.truce .alliance-halo { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 4.5px; }
.alliance-mark.truce .alliance-edge { fill: none; stroke: #4fa8e0; stroke-width: 2.6px; stroke-dasharray: 7 5; }
.alliance-badge circle { fill: #fff8e6; stroke: #e0a526; stroke-width: .7; }
.alliance-badge[data-relation="truce"] circle { stroke: #4fa8e0; }
.alliance-badge text { font-size: 3.6px; text-anchor: middle; dominant-baseline: middle; }
/* 동맹 축하 리본(금색) */
.fx-ribbon.ally { background: linear-gradient(180deg, #f5c443, #d9962b); }
/* 동맹 찬반 투표 창 */
.alliance-vote h2 { font-size: 21px; text-align: center; word-break: keep-all; }
.alliance-vote p { line-height: 1.5; word-break: keep-all; }
.alliance-vote .update-actions { justify-content: center; }
.alliance-vote .update-actions .button { min-width: 112px; min-height: 48px; }
.alliance-vote #alliance-vote-later { margin-top: 8px; min-height: 44px; }
/* 폰: 지역 이름 칸은 숨기고 접속자 수만 작게 */
@media (max-width: 480px) {
  #map-badge { display: block; padding: 3px 8px; top: calc(var(--hud-height) + 72px); }
  body:not(:has(#expedition:not([hidden]))) #map-badge { top: calc(var(--hud-height) + 6px); }
  #map-badge #map-mode { display: none; }
  #map-badge .online-count { margin-top: 0; font-size: 10.5px; }
  #map-badge:has(.online-count[hidden]) { display: none; }
  #map-badge { left: 8px; top: calc(max(var(--hud-height), var(--hud-real, 0px)) + 72px); }
  body:not(:has(#expedition:not([hidden]))) #map-badge { top: calc(max(var(--hud-height), var(--hud-real, 0px)) + 6px); }
}

/* 맨 위 층(공항): 지도와 같은 자리·같은 viewBox, 영토 점 캔버스(z-index 2) 위 */
.map-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; transform-origin: 0 0; overflow: visible; }
.map-top.live { will-change: transform; }
.airport-pin use { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }

/* 🎉 빈 땅 이벤트 안내 */
.event-dialog { text-align: center; }
.event-dialog h2 { font-size: 26px; }
.event-lead { font-size: 18px !important; font-weight: 800; margin: 6px 0; }
.event-big { font-size: 20px !important; font-weight: 800; line-height: 1.5; margin: 10px 0; padding: 12px; border-radius: 14px; background: #fff3cf; }
.event-big b { color: #c2410c; font-size: 1.25em; }
.event-note { color: var(--muted); font-size: 13px !important; }
.event-dialog .update-actions { justify-content: center; }

/* v1.2 영토: 지역 목록을 나라별로 접고 편다 */
.region-country { margin-bottom: 10px; border: 2px solid var(--outline); border-radius: 12px; background: #fffaf0; }
.region-country > summary {
  cursor: pointer; list-style: none; padding: 10px 14px; font-weight: 800; color: var(--ink);
  min-height: 44px; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(var(--paper), var(--paper-2)); border-radius: 10px;
}
.region-country > summary::-webkit-details-marker { display: none; }
.region-country > summary::before { content: '▸'; transition: transform .12s ease-out; }
.region-country[open] > summary::before { transform: rotate(90deg); }
.region-country[open] > summary { border-bottom: 2px solid var(--outline); border-radius: 10px 10px 0 0; }
.region-country > .region-group { padding: 0 12px; }
.region-country > .region-group:first-of-type { padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .region-country > summary::before { transition: none; } }

/* v1.2: 이름 붙은 작은 땅(독도) 표시 */
.place-marker { cursor: pointer; }
.place-ring { fill: rgba(255, 250, 240, .35); stroke: #b23a2e; stroke-width: 2; stroke-dasharray: 4 3; }
.place-marker .place-name {
  font: 900 13px 'Jua', 'Noto Sans KR', 'Malgun Gothic', sans-serif; fill: #3a2415; text-anchor: middle;
  paint-order: stroke; stroke: #fffaf0; stroke-width: 3.5px; stroke-linejoin: round;
}
#atlas .atlas-line.foreign { stroke: rgba(58, 36, 21, .2); }

/* v1.2: 🏝️ 독도 이벤트 */
.dokdo-jump svg { overflow: visible; }
.dokdo-jump { background: linear-gradient(#e7f6ff, #bfe3f5); }
.dokdo-inline { width: 30px; height: 22px; vertical-align: -5px; margin-right: 4px; }
.place-ring { fill: rgba(255, 250, 240, .55); stroke: #b23a2e; stroke-width: 2.4; stroke-dasharray: 5 3; }
.dokdo-box { grid-column: 1 / -1; margin: 6px 0; padding: 8px 10px; border: 2.5px solid #2e7d4f; border-radius: 12px; background: #eaf7ee; }
.dokdo-head { margin: 0 0 4px; font-weight: 900; color: #1f5e3a; display: flex; align-items: center; gap: 2px; }
.dokdo-text { margin: 0; font-size: 13px; font-weight: 700; color: #24402f; word-break: keep-all; }
.dokdo-hub { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px 0 6px; padding: 6px 8px; border-radius: 10px; background: #2e7d4f; color: #fff; font-size: 12.5px; font-weight: 800; text-align: center; }
.dokdo-hub b { font-size: 17px; font-weight: 900; }
.dokdo-left { margin: 6px 0 0; padding: 5px 8px; border-radius: 8px; background: #b23a2e; color: #fff; font-size: 12.5px; font-weight: 800; }
.airport-route-heading { flex-basis: 100%; margin: 6px 0 2px; font-size: 12px; font-weight: 900; color: #2c6aa1; }

/* ── 학년별 문제(학년·반 고르기 · 문제 고르기 · 설정) ─────────────────────────── */
.grade-dialog, .qtype-dialog { width: min(460px, calc(100vw - 20px)); }
.grade-dialog form { gap: 6px; margin-top: 6px; }
.choice-field { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.choice-field legend { margin: 6px 0 6px; font-size: 13px; font-weight: 900; color: var(--wood-3); }
.choice-grid { display: grid; gap: 8px; }
.grade-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.class-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.choice {
  min-height: 52px; padding: 4px 2px; display: grid; place-items: center; gap: 0;
  font: inherit; color: var(--wood-3); cursor: pointer;
  background: linear-gradient(#fffaf0, var(--paper)); border: 2px solid var(--outline); border-radius: 12px;
  box-shadow: 0 3px 0 rgba(58, 36, 21, .5); touch-action: manipulation;
}
.choice.small { min-height: 46px; }
.choice b { font-size: 22px; line-height: 1; font-weight: 900; }
.choice.small b { font-size: 18px; }
.choice small { font-size: 11px; font-weight: 800; color: var(--muted); }
.choice[aria-checked='true'] { background: linear-gradient(#3cc0bb, var(--teal)); color: #fff8e6; transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); }
.choice[aria-checked='true'] small { color: #e8fffd; }
.choice:focus-visible, .qtype:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.class-more { display: flex; align-items: center; gap: 8px; margin-top: 10px !important; font-size: 13px !important; }
.class-more input { width: 84px; min-height: 44px; margin: 0; text-align: center; font-size: 18px; font-weight: 800; }
.grade-preview { margin: 10px 0 0; text-align: center; font-size: 22px; font-weight: 900; color: var(--wood-3); }
.grade-note { margin: 6px 0 0; font-size: 13px; font-weight: 800; }
.grade-confirm h2 { font-size: 22px; text-align: center; }
.confirm-left { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff3cf; font-weight: 900; text-align: center; }

.qtype-list { display: grid; gap: 8px; margin-top: 8px; }
.qtype {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 58px; padding: 8px 12px;
  font: inherit; text-align: left; color: var(--ink); cursor: pointer;
  background: linear-gradient(#fffaf0, var(--paper)); border: 2px solid var(--outline); border-radius: 12px;
  box-shadow: 0 3px 0 rgba(58, 36, 21, .5); touch-action: manipulation;
}
.qtype[aria-pressed='true'] { background: linear-gradient(#eaf6e0, #d7ecc7); }
.qtype-text { display: grid; min-width: 0; }
.qtype-text b { font-size: 16px; font-weight: 900; color: var(--wood-3); word-break: keep-all; }
.qtype-text small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.qtype-score { flex: none; display: grid; justify-items: center; min-width: 58px; padding: 4px 6px; border-radius: 10px; background: #fff3cf; border: 2px solid var(--gold-2); }
.qtype-score small { font-size: 10px; font-weight: 800; color: var(--muted); }
.qtype-score b { font-size: 18px; font-weight: 900; color: #c2410c; }

.settings-learning { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 2px dashed rgba(122, 74, 42, .35); }
.settings-me .setting-sub { font-style: normal; font-size: 12px; font-weight: 800; color: var(--teal-2); word-break: keep-all; }
.settings-learning .used-up { margin: 0 0 4px; color: var(--red-2); font-weight: 800; }
.limit-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.limit-chip { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 900; border: 2px solid var(--outline); }
.limit-chip.free { background: #e6f2d6; color: var(--olive-2); }
.limit-chip.capped { background: #fde3dc; color: var(--red-2); }

/* 문제 카드: 문제 종류·점수, 분수, 빈칸 */
.quiz-reward { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #fff3cf; border: 2px solid var(--gold-2); color: #9a3412; font-size: 12px; font-weight: 900; white-space: nowrap; }
.question .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: .72em; line-height: 1.05; margin: 0 .05em; }
.question .frac > span:first-child { padding: 0 .2em; border-bottom: .09em solid currentColor; }
.question .blank { display: inline-block; min-width: 1em; color: var(--teal-2); }

@media (max-width: 480px) {
  .grade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .choice { min-height: 48px; }
  .grade-preview { font-size: 19px; }
  .quiz-reward { margin-left: 0; font-size: 11px; }
  .question:has(.frac) { font-size: 36px; }
}
/* 문제 고르기: 수준 꼬리표(학년 추천 / 아래 학년 문제) */
.qtype.recommended { border-width: 3px; border-color: #c2410c; }
.qtype-level { display: inline-block; margin-right: 2px; padding: 1px 7px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 900; vertical-align: 2px;
  background: var(--paper-2); color: var(--muted); border: 1.5px solid rgba(122, 74, 42, .45); }
.qtype-level.best { background: #c2410c; color: #fff8e6; border-color: var(--outline); }

/* 새 소식: 두 줄 제목 · 목록 · 세 나라(대한민국·북한·일본) 축소 지도 */
.update-title { display: grid; gap: 2px; text-align: center; }
.update-title-main { font-size: 24px; }
.update-title-sub { font-size: 17px; color: #2c6aa1; letter-spacing: .02em; }
.update-dialog .update-list { margin: 6px 0 4px; padding-left: 20px; }
.update-dialog .update-list li { margin: 3px 0; font-size: 14.5px; line-height: 1.5; }
.update-dialog .update-list li::marker { color: #2c6aa1; }
.air-map.air-map-all { max-width: 230px; background: #d6ebf4; }
.air-map-all .air-map-pin { opacity: .9; }
.air-map .air-map-country { font-size: 52px; font-weight: 900; fill: #4d2c17; paint-order: stroke; stroke: rgba(255, 250, 235, .9); stroke-width: 10px; stroke-linejoin: round; letter-spacing: .04em; }
.air-map .air-map-country.c-KP { fill: #6b4a25; }
.air-map-dokdo circle { fill: rgba(46, 125, 79, .18); stroke: #2e7d4f; stroke-width: 6; }
.air-map .air-map-dokdo text { font-size: 42px; font-weight: 900; fill: #1f5e3a; paint-order: stroke; stroke: rgba(255, 250, 235, .9); stroke-width: 8px; }

/* 땅 정보 제목: 「남양주시 다산1동」 크게 + 「5구역」 꼬리표 */
.target .region h2 .place-name { word-break: keep-all; }
.target .region h2 .zone-chip {
  display: inline-block; padding: 1px 8px; border-radius: 99px; vertical-align: 3px;
  font-size: 13px; font-weight: 900; letter-spacing: 0; white-space: nowrap;
  background: var(--paper-2); color: var(--wood-3); border: 2px solid rgba(122, 74, 42, .5);
}

/* 알림의 「같이 지키기 · 같이 공격하기 · 되찾으러 가기」: 크게 누르기 쉽게, 남은 시간 막대 */
.notice.together { position: relative; overflow: hidden; padding-bottom: 9px; }
.notice.together::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%;
  background: currentColor; opacity: .35; transform-origin: left; animation: notice-timer 9s linear forwards;
}
.notice-go.join { min-height: 40px; padding: 0 12px; font-size: 14px; color: #fff8e6; text-shadow: 0 1.5px 0 var(--outline); white-space: nowrap; }
.notice-go.join.defend { background: linear-gradient(#3cc0bb, var(--teal)); }
.notice-go.join.attack, .notice.urgent .notice-go.join.attack { background: linear-gradient(#e8665d, var(--red)); }
.notice.urgent .notice-go.join.defend { background: linear-gradient(#3cc0bb, var(--teal)); }
@keyframes notice-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 480px) { .notice-go.join { min-height: 38px; padding: 0 9px; font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .notice.together::after { animation: none; } }
body.reduce-motion .notice.together::after { animation: none; }

/* 일본 공항 지도: 본토를 크게(공항 창 폭 전체), 공항은 파란 점, 큰 공항은 지역 이름만(나리타·간사이 …) */
.airport-box .air-map.air-map-jp { max-width: 100%; }
.air-map-jp .air-map-dot { fill: #2f7de1; stroke: #fff; stroke-width: 5; }
.air-map-jp .air-map-pin.focus .air-map-dot { fill: #c62828; }
.air-map-jp .air-map-ring { stroke-width: 6; }
.air-map.air-map-jp text { font-size: 44px; font-weight: 900; fill: #1f4f7a; paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: 10px; stroke-linejoin: round; }
.air-map-more {
  position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 99px; font: inherit; font-size: 11.5px; font-weight: 900;
  background: rgba(255, 250, 235, .95); color: #1f4f7a; border: 2px solid #9fc6d8;
}
button.air-map-more { cursor: pointer; }

/* 세로식 곱셈(몇십 몇 × 몇 - 올림 있음): 백·십·일 칸, 답은 일의 자리부터(지금 칸은 반짝이는 테두리) */
.quiz.vertical-mode #answer { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.question.vertical { display: flex; justify-content: center; margin: 2px 0 6px; text-shadow: none; }
.vgrid { display: grid; grid-template-columns: repeat(3, 1.2em); grid-auto-rows: 1.12em; font-size: 1em; line-height: 1; }
@media (max-width: 480px) { .quiz.vertical-mode .question.vertical { font-size: 38px; } .vgrid .vhead { font-size: .36em; } }
.vgrid > span, .vgrid > .vans { display: grid; place-items: center; border: 2px dotted rgba(58, 36, 21, .55); margin: -1px 0 0 -1px; }
.vgrid .vhead { border: 0; font-size: .42em; font-weight: 900; color: #2c6aa1; align-self: end; padding-bottom: 2px; height: 100%; }
.vgrid .vnum { color: var(--wood-3); }
.vgrid .vop { font-size: .8em; }
.vgrid .vans { font: inherit; font-weight: 900; color: #2c6aa1; background: #fffaf0; cursor: pointer; padding: 0; border-top: 4px solid var(--outline); }
.vgrid .vans.active { background: #e3f1dc; box-shadow: inset 0 0 0 3px var(--teal); animation: vans-blink 1s ease-in-out infinite; }
.question-answered .vgrid .vans { cursor: default; }
@keyframes vans-blink { 50% { box-shadow: inset 0 0 0 3px rgba(43, 158, 154, .25); } }
@media (prefers-reduced-motion: reduce) { .vgrid .vans.active { animation: none; } }
body.reduce-motion .vgrid .vans.active { animation: none; }

/* 일본 공항 지도: 북쪽 ↔ 남쪽 단추 */
.air-map-halves { display: grid; gap: 6px; margin: 6px 0; }
.air-map-halves .air-map { margin: 0; }
.air-map-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.air-map-switch button {
  min-height: 38px; padding: 4px 6px; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer;
  background: #fffaf0; color: #1f4f7a; border: 2px solid #9fc6d8; word-break: keep-all;
}
.air-map-switch button[aria-selected='true'] { background: #2f7de1; color: #fff; border-color: #1f4f7a; }
/* 일본 지도: 바다를 조금 진하게(땅과 잘 구분되게), 오키나와 단추는 빈 바다인 오른쪽 아래로 */
.air-map.air-map-jp { background: #bcdcec; }
.air-map-more { left: auto; right: 6px; }
/* 제목을 도부터 전부 쓴다(경기도 남양주시 다산1동): 한 줄에 들어가게 조금 작게 */
.target .region h2 .place-name { font-size: 21px; letter-spacing: -.03em; }
@media (max-width: 480px) { .target .region h2 .place-name { font-size: 18px; } }

/* 학년·반 고르기(두 단계): 1) 큰 학년 단추 6개 → 2) 학생증 + 숫자판 */
.grade-dialog { width: min(400px, calc(100vw - 20px)); }
.grade-step { display: grid; gap: 10px; }
.grade-step h2 { margin: 0; font-size: 24px; }
.step-dots { display: flex; gap: 6px; margin: 2px 0 0; }
.step-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line); }
.step-dots i.on { width: 22px; background: var(--teal); }
.grade-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grade-choice {
  min-height: 86px; display: grid; place-items: center; align-content: center; gap: 0; cursor: pointer; font: inherit; color: var(--wood-3);
  background: linear-gradient(#fffaf0, var(--paper)); border: 3px solid var(--outline); border-radius: 16px;
  box-shadow: 0 4px 0 var(--outline); touch-action: manipulation;
}
.grade-choice b { font-size: 38px; line-height: 1; font-weight: 900; }
.grade-choice small { font-size: 13px; font-weight: 800; color: var(--muted); }
.grade-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--outline); }
.grade-choice[aria-checked='true'] { background: linear-gradient(#3cc0bb, var(--teal)); color: #fff8e6; }
.grade-choice[aria-checked='true'] small { color: #e8fffd; }
.grade-choice:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.grade-hint { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }

.student-card {
  position: relative; padding: 10px 14px 12px; border-radius: 14px; background: #fff; border: 3px solid var(--outline);
  box-shadow: inset 0 -5px 0 rgba(43, 158, 154, .18);
}
.student-card small { display: block; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.card-line { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; font-size: 30px; font-weight: 900; color: var(--wood-3); }
.card-grade {
  font: inherit; color: inherit; cursor: pointer; padding: 0 6px; border-radius: 10px;
  background: var(--paper); border: 2px dashed rgba(122, 74, 42, .55);
}
.card-grade::after { content: ' ✎'; font-size: .5em; vertical-align: .5em; color: var(--muted); }
.card-class { display: inline-block; min-width: 1.4em; text-align: center; color: var(--teal-2); border-bottom: 4px solid var(--teal); }
.card-class.empty::before { content: '?'; color: rgba(43, 158, 154, .45); }
.card-class.empty, .card-class.fresh { animation: class-blink 1s steps(2, jump-none) infinite; }
@keyframes class-blink { 50% { border-bottom-color: transparent; } }
.card-unit { font-size: .8em; }
.class-pad { margin: 0; }
#grade-submit.waiting { background: linear-gradient(var(--paper), var(--paper-2)); color: var(--muted); }
@media (max-width: 480px) {
  .grade-choice { min-height: 74px; }
  .grade-choice b { font-size: 32px; }
  .card-line { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .card-class.empty, .card-class.fresh { animation: none; } }
body.reduce-motion .card-class.empty, body.reduce-motion .card-class.fresh { animation: none; }
/* 학생증 글자: .update-dialog p(14px)보다 먼저 적용되게 */
.grade-dialog .student-card .card-line { font-size: 30px; line-height: 1.15; }
.grade-dialog .card-grade::after { content: '바꾸기'; display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 6px; font-size: 11px; font-weight: 900; vertical-align: middle; color: var(--wood-3); background: var(--paper-2); }
@media (max-width: 480px) { .grade-dialog .student-card .card-line { font-size: 27px; } }

/* 🏫 작은 학교 보너스 */
.bonus-chip { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 99px; background: #e8792b; color: #fff; font-size: 11px; font-weight: 900; white-space: nowrap; }
.quiz-bonus { display: block; color: #e8792b; font-size: 11px; font-weight: 900; }
/* 일본 지도 세 장 단추: 위는 북쪽·가운데·남쪽, 아래 작은 글씨로 큰 도시 */
.air-map-switch { grid-template-columns: repeat(3, 1fr); gap: 5px; }
.air-map-switch button { display: grid; gap: 0; line-height: 1.15; padding: 4px 2px; }
.air-map-switch button b { font-size: 13.5px; font-weight: 900; }
.air-map-switch button small { font-size: 10.5px; font-weight: 800; opacity: .85; white-space: nowrap; }
/* 일본 지도 네 장(북쪽·가운데·남쪽·오키나와) 단추: 좁아도 글자가 들어가게 */
.air-map-switch.four { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.air-map-switch.four button { padding: 4px 1px; }
.air-map-switch.four button b { font-size: 12.5px; }
.air-map-switch.four button small { font-size: 9.5px; letter-spacing: -.03em; }

/* 🏝️ 독도: 공항처럼 늘 보이는 표시(누르면 독도로 간다) */
.dokdo-pin { cursor: pointer; pointer-events: auto; }
.dokdo-pin .dokdo-name { fill: #1f6b3d; }

/* ── 🏆 명예의 전당 · 학교 옆 마크 ─────────────────────────────────────── */
.school-badges { font-size: .95em; letter-spacing: .02em; white-space: nowrap; cursor: help; }
.hall-dialog { max-width: 760px; }
.hall-season { display: grid; gap: 12px; margin-top: 8px; }
.hall-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-bottom: 2px dashed var(--line); padding-bottom: 6px; }
.hall-head h3 { margin: 0; font-size: 20px; color: var(--wood-3); }
.hall-head small { color: var(--muted); font-weight: 700; word-break: keep-all; }
.hall-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.hall-card { background: #fffaf0; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: 0 3px 0 rgb(58 36 21 / .12); }
.hall-land { grid-column: 1 / -1; border-color: #e3b341; background: linear-gradient(#fff6d8, #fffaf0); }
.hall-card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.hall-icon { font-size: 28px; line-height: 1; }
.hall-card-head b { display: block; font-size: 16px; color: var(--wood-3); }
.hall-card-head small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; word-break: keep-all; }
.hall-schools { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hall-land .hall-schools { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.hall-schools li { display: grid; gap: 1px; padding: 6px 8px; border-radius: 10px; background: rgb(255 255 255 / .7); }
.hall-schools li.mine { outline: 2px solid var(--gold, #e3b341); }
.hall-schools b { font-size: 14px; word-break: keep-all; }
.hall-schools small { color: var(--muted); font-size: 12px; word-break: keep-all; }
.hall-more summary { cursor: pointer; font-weight: 800; color: var(--wood-3); padding: 4px 0 6px; }
.hall-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgb(58 36 21 / .06); color: var(--muted); font-size: 12.5px; font-weight: 700; word-break: keep-all; }

/* ── 2학기 단원 문제(2026-10): 안내 글 · 그림 · 표 ─────────────────────────────
   그림(.qfig)은 식 위 가운데에 따로 한 줄로 두고(좁은 칸에서도 식 글자가 줄지 않게), 크기는 px 로 정한다. */
.question .q-prompt {
  display: block; margin: 0 auto .3em; max-width: 100%; white-space: normal; word-break: keep-all;
  font-size: max(15px, .46em); line-height: 1.3; font-weight: 800; letter-spacing: 0; color: var(--wood-3); text-shadow: none;
}
/* 식의 앞부분(「5 kg 850 g − 4 kg 200 g」 다음 줄에 「= 1 kg □ g」): 교과서 세로 풀이처럼 두 줄로, 식 글자와 거의 같은 크기 */
.question .q-lead { display: block; margin: 0 auto .05em; font-size: .9em; line-height: 1.2; }
.question .q-lead > span { display: block; }
.question .qfig {
  display: block; margin: 0 auto .15em; width: auto; max-width: 100%; height: clamp(84px, 13dvh, 108px) !important; overflow: visible;
  letter-spacing: 0; text-shadow: none; color: var(--wood-3);
}
.question .qfig.qfig-clock { height: clamp(92px, 14dvh, 116px) !important; }
/* 꺾은선그래프는 칸 너비에 맞춘다(눈금 글씨가 읽히게) */
.question .qfig.qfig-graph { width: 100%; max-width: 300px; height: auto !important; max-height: clamp(110px, 17dvh, 150px); }
.qfig .qfig-line { stroke: currentColor; stroke-width: 2; fill: none; }
.qfig .qfig-shape { fill: #fffdf4; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; }
.qfig .qfig-face { fill: #fffdf4; stroke: currentColor; stroke-width: 3; }
.qfig .qfig-text { fill: currentColor; }
.qfig .qfig-mark { fill: var(--teal-2); font-weight: 900; }
.qfig .qfig-hour { stroke: currentColor; }
.qfig .qfig-minute { stroke: #c2410c; }
.qfig .qfig-dot { fill: currentColor; }
.qfig .qfig-stick { fill: #f2c46d; stroke: currentColor; stroke-width: 1; }
.qfig .qfig-grid { stroke: rgba(122, 74, 42, .28); stroke-width: 1; }
.qfig .qfig-plot { fill: none; stroke: #c2410c; stroke-width: 2.6; stroke-linejoin: round; }
.qfig .qfig-point { fill: #c2410c; }
.qfig .qfig-cell { fill: #fff3cf; stroke: currentColor; stroke-width: 1.6; }
.qfig .qfig-accent { stroke: #c2410c; }
.qfig text { font-family: var(--font-game, inherit); paint-order: stroke; stroke: #fffdf4; stroke-width: 4px; stroke-linejoin: round; }   /* 선 위에 겹쳐도 글이 읽히게 */
.qfig .qfig-arc { stroke-width: 1.4; }

.question .mixed { display: inline-flex; align-items: center; gap: .08em; vertical-align: middle; }
/* 표는 칸 너비에 따라 가로 표 / 세로 표(폰처럼 좁은 칸). 표 글씨는 식 글자 크기와 따로 정해 식이 줄지 않게 한다 */
.question { container-type: inline-size; }
.question .qtable-box { display: block; }
.question .qtable {
  display: table; margin: 0 auto .2em; border-collapse: collapse; background: #fffdf4;
  font-size: 15px; letter-spacing: 0; text-shadow: none; white-space: nowrap; line-height: 1.25;
}
.question .qtable.tall { display: none; }
@container (max-width: 260px) {
  .question .qtable.wide { display: none; }
  .question .qtable.tall { display: table; font-size: 13px; }
  .question .qtable.tall th, .question .qtable.tall td { padding: .1em .5em; }
}
.question .qtable th, .question .qtable td { padding: .25em .55em; border: 2px solid var(--outline); text-align: center; }
.question .qtable th { background: #fff3cf; font-weight: 800; color: var(--muted); }
.question .qtable td { font-weight: 900; }
.question .qpics { display: block; margin: 0 auto .1em; font-size: min(.8em, 34px); letter-spacing: 0; text-shadow: none; line-height: 1.1; white-space: normal; }
.question .qpics .small { font-size: .55em; }
.question .qshapes { display: block; margin: 0 auto .1em; font-size: min(.62em, 30px); letter-spacing: .06em; text-shadow: none; white-space: normal; }
.question .qunder u { color: var(--teal-2); text-decoration-thickness: .08em; text-underline-offset: .12em; }

/* 문제 고르기: 단원 묶음(이 학년 2학기는 펼치고, 기본 문제·복습은 접는다) */
.qtype-list { max-height: min(62dvh, 560px); overflow-y: auto; padding: 2px 4px 4px 0; }
.qtype-group { border: 2px solid rgba(122, 74, 42, .35); border-radius: 12px; background: rgba(255, 250, 240, .6); }
.qtype-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none;
  font-weight: 900; color: var(--wood-3); font-size: 15px;
}
.qtype-group > summary::-webkit-details-marker { display: none; }
.qtype-group > summary::before { content: '▸'; margin-right: 2px; color: var(--muted); transition: transform .15s; }
.qtype-group[open] > summary::before { transform: rotate(90deg); }
.qtype-group > summary span { flex: 1; }
.qtype-group > summary small { font-size: 12px; font-weight: 800; color: var(--muted); }
.qtype-group.own { border-color: #c2410c; background: #fff7e8; }
.qtype-items { display: grid; gap: 8px; padding: 0 8px 10px; }

/* ── 🏛️ 청사(v1.3) ─────────────────────────────────────────── */
/* 청사 구역: 겉은 흰 줄, 안은 금색(공항 파랑·독도 초록과 구별). 확대해도 굵기 그대로 */
#cityhall-edges, #cityhall-pins { pointer-events: none; }
#cityhall-edges path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cityhall-edge-halo { stroke: rgba(255, 255, 255, .85); stroke-width: 6px; }
.cityhall-edge { stroke: #b8860b; stroke-width: 3.5px; stroke-dasharray: 7 3; }
.cityhall-pin use { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.cityhall-pin[hidden] { display: none; }
.cityhall-name { text-anchor: middle; font-size: 13px; font-weight: 900; letter-spacing: -0.02em; fill: #7a5410; paint-order: stroke; stroke: rgba(255, 250, 240, .9); stroke-width: 3px; stroke-linejoin: round; }
.hall-inline { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.35em; margin-right: 4px; overflow: visible; }
.cityhall-box { grid-column: 1 / -1; margin: 6px 0; padding: 8px 10px; border: 2.5px solid #b8860b; border-radius: 12px; background: #fff6dc; }
.cityhall-head { margin: 0 0 4px; font-weight: 900; color: #6b4a0e; display: flex; align-items: center; gap: 2px; }
.cityhall-text { margin: 0; font-size: 13px; font-weight: 700; color: #4a3712; word-break: keep-all; }
.cityhall-effect { margin: 6px 0; padding: 6px 8px; border-radius: 10px; background: #b8860b; color: #fff; font-size: 13px; font-weight: 800; text-align: center; word-break: keep-all; }
.cityhall-local { margin: 0 0 6px; padding: 5px 8px; border-radius: 8px; background: #6b4a0e; color: #fff; font-size: 12.5px; font-weight: 800; word-break: keep-all; }
.cityhall-note { margin: 4px 0 0; font-size: 11.5px; font-weight: 700; color: #8a7350; }

/* ── v1.3 새 소식 ─────────────────────────────────────────── */
.update-dialog.news13 { width: min(420px, calc(100vw - 20px)); }
.news13-card { margin: 8px 0; padding: 8px 12px 6px; border: 2.5px solid rgba(122, 74, 42, .35); border-radius: 14px; background: #fffaf0; }
.news13-card h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 16.5px; font-weight: 900; color: var(--wood-3); }
.news13-card.hall { border-color: #b8860b; background: #fff6dc; }
.news13-card.hall h3 { color: #6b4a0e; }
.news13-card.item { border-color: #c2410c; background: #fff3e8; }
.news13-card.japan { border-color: #2c6aa1; background: #eef5fc; }
.news13-card.time { border-color: #2f7d4f; background: #ecf8ef; }
.news13-card.time h3 { color: #1f5c38; }
.news13-card .update-list { margin: 2px 0; }
.news13-card .update-list li { margin: 1px 0; font-size: 13.5px; line-height: 1.4; }
.update-dialog.news13 .update-title-main { font-size: 22px; }
.news13-card { margin: 6px 0; padding: 6px 12px 4px; }
.news13-icon { width: 1.6em; height: 1.6em; overflow: visible; }
.news13-emoji { font-size: 1.2em; line-height: 1; }
.news13-also { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: rgb(58 36 21 / .06); color: var(--muted); font-size: 13px !important; font-weight: 700; text-align: center; }

/* ── v1.3 문제 창: 컴퓨터·패드·폰 어디서나 스크롤 없이 한 화면에 ───────────
   세로 폰·패드에서 풀이 중에는 지도 단추를 숨기고 창을 가로 가득(문제 칸이 넓어진다), 높이도 화면 끝까지 쓸 수 있게.
   가장 작은 글자로도 넘치는 긴 문제는 잘리지 않게 줄을 바꾼다(app.js fitQuestion). */
@media (max-width: 820px) and (orientation: portrait) {
  .solving .map-controls, .solving .legend { display: none; }
  .solving .panels { left: 8px; right: 8px; max-height: calc(100dvh - 16px); }
}
.quiz .question.wrap { white-space: normal; line-height: 1.25; }
@media (max-width: 340px) { .quiz.vertical-mode .question.vertical { font-size: 32px; } }   /* 아주 좁은 폰(320px)에서 세로셈 칸이 넘치지 않게 */
/* 낮은 컴퓨터·눕힌 패드 화면(높이 720 이하): 그림(시계·도형·그래프)과 칸 사이를 화면 높이에 맞춰 더 줄인다 */
@media (min-width: 821px) and (max-height: 720px), (orientation: landscape) and (max-height: 720px) {
  .quiz { gap: 4px 14px !important; }
  .solving .panels { padding-top: 4px; padding-bottom: 4px; }
  .solving .panel.quiz { margin-top: 4px; margin-bottom: 4px; }
  .question .qfig { height: clamp(56px, 12dvh, 108px) !important; }
  .question .qfig.qfig-clock { height: clamp(62px, 13dvh, 116px) !important; }
  .question .qfig.qfig-graph { max-height: clamp(70px, 14dvh, 150px); }
  .question .qtable { font-size: 13px; }
  .question .qtable th, .question .qtable td { padding: .15em .5em; }
  /* 높이가 모자라니 좁은 칸에서도 세로 표 대신 가로 표(글자를 줄여서) */
  .question .qtable.wide { display: table !important; font-size: 12px; }
  .question .qtable.tall { display: none !important; }
  .question .qtable.wide th, .question .qtable.wide td { padding: .1em .32em; }
}
/* 좁고 눕힌 창(폭 820 이하 가로, 작은 컴퓨터 창 등): 세로 폰처럼 문제 창을 두 칸(왼쪽 문제 · 오른쪽 숫자판)으로, 풀이 중에는 가로 가득 */
@media (max-width: 820px) and (orientation: landscape) {
  .solving .map-controls, .solving .legend, .solving .expedition { display: none; }
  .solving .panels { left: 8px; right: 8px; width: auto; bottom: 8px; max-height: 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; margin: 0; }
  #answer-form { grid-column: 2; grid-row: 2 / 6; gap: 6px; }
  .feedback { grid-area: 5 / 1; margin: 0; align-self: end; }
  #next-question { margin: 0; }
  .quiz .panel-foot { display: none; }
}
/* 아주 낮은 컴퓨터 화면(높이 600 이하, 윗줄이 두 줄로 접히는 폭 등): 풀이 중에는 문제 창이 윗줄 오른쪽 위로 올라가 화면 높이를 다 쓴다(창을 닫으면 그대로) */
@media (min-width: 821px) and (max-height: 600px) {
  .solving .panels { top: 8px; z-index: 12; max-height: calc(100dvh - 16px); }
}
/* 접속자 수(v1.3): 기록판이 보이면 기록판 머리에(아이템·반 목표가 붙어 커진 기록판이 지도 이름표를 가렸다), 아니면 지도 이름표에 */
.expedition .board-head { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; }
.board-online { margin: 0 0 0 auto !important; padding: 1px 8px; border-radius: 99px; background: #eaf7ec; font-size: 11.5px !important; white-space: nowrap; }
body:has(#expedition:not([hidden])) #map-badge .online-count { display: none; }
@media (max-width: 480px) { body:has(#expedition:not([hidden])) #map-badge { display: none !important; } }
.class-target-more { align-self: center; padding: 2px 8px; border-radius: 99px; background: rgb(58 36 21 / .06); color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
/* 시즌 결과: 전국 / 우리 시·도 순위(v1.3) */
.season-scope { display: flex; gap: 6px; justify-content: center; margin: 0 0 8px; }
.season-scope button { flex: 1 1 0; min-height: 36px; padding: 4px 10px; border: 2px solid var(--outline, #3a2415); border-radius: 99px; background: #fffaf0; color: var(--wood-3); font: 800 13.5px/1.1 var(--font-game, inherit); cursor: pointer; word-break: keep-all; }
.season-scope button[aria-pressed="true"] { background: #2c6aa1; color: #fff; }
/* 시즌 결과·명예의 전당 리본 제목(v1.3): 크림 글자 + 갈색 외곽선(짙은 글자가 덮어써져 뭉개져 보이던 것) */
.season-banner .season-kicker { color: #fff4dc; text-shadow: none; -webkit-text-stroke: .2em var(--outline); paint-order: stroke fill; letter-spacing: .01em; }