.quiz-map-shell{display:grid;gap:12px;width:100%;max-width:1120px;min-width:0;margin-inline:auto;color:var(--text);font:inherit}
.quiz-map-upper{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.quiz-map-round{font-weight:900;font-size:clamp(1rem,2.1vw,1.28rem);letter-spacing:.06em;color:var(--brand-violet)}
.quiz-map-total{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:.82rem}
.quiz-map-total strong{color:var(--text);font-size:clamp(1.1rem,2.5vw,1.5rem);font-variant-numeric:tabular-nums}
.quiz-map-question{border:1px solid var(--line);border-radius:18px;background:var(--surface2);padding:clamp(12px,2vw,19px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:115px}
.quiz-map-question-copy{min-width:0}
.quiz-map-question .quiz-map-kicker{text-transform:uppercase;color:var(--brand-violet);font-size:.7rem;letter-spacing:.1em;font-weight:850}
.quiz-map-question h2{font-size:clamp(1.13rem,2.6vw,1.65rem);line-height:1.2;margin:7px 0;letter-spacing:-.02em;text-wrap:balance}
.quiz-map-question p{margin:0;color:var(--muted);font-size:clamp(.83rem,1.7vw,.94rem);line-height:1.35}
.quiz-map-art{display:grid;place-items:center;width:clamp(110px,23vw,230px);aspect-ratio:2.1;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--brand-aqua)}
.quiz-map-art[hidden]{display:none}
.quiz-map-art-svg{width:100%;height:100%}
.quiz-map-map-box{min-width:0;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#102842;isolation:isolate}
.quiz-map-board{display:block;width:100%;height:auto;aspect-ratio:2/1;touch-action:none;cursor:crosshair;outline:none}
.quiz-map-board:focus-visible{box-shadow:inset 0 0 0 4px var(--brand-aqua);border-radius:18px}
.quiz-map-board image{pointer-events:none}
.quiz-map-board circle,.quiz-map-board path{pointer-events:none}
.quiz-map-zoom{position:absolute;inset-block-start:12px;inset-inline-end:12px;display:grid;gap:5px;z-index:2}
.quiz-map-zoom button{width:42px;height:42px;border:1px solid #ffffff66;background:#172d49ef;color:white;border-radius:10px;font-size:1.28rem;font-weight:800;cursor:pointer;box-shadow:0 4px 12px #0004}
.quiz-map-zoom button:focus-visible{outline:3px solid var(--brand-yellow);outline-offset:2px}
.quiz-map-coordinate{position:absolute;inset-inline-start:12px;inset-block-end:10px;max-width:calc(100% - 24px);font-size:.73rem;color:#fff;background:#172d49d9;border-radius:8px;padding:4px 8px;pointer-events:none}
.quiz-map-coordinate:empty{display:none}
.quiz-map-feedback{font-size:.91rem;font-weight:700;color:var(--text);padding:5px 2px;min-height:24px}
.quiz-map-actions{display:flex;gap:12px;align-items:center;justify-content:center}
.quiz-map-actions button{min-height:48px;padding:10px 20px;border:1px solid var(--brand-violet);border-radius:13px;background:var(--brand-violet);color:white;font-weight:850;font-size:.96rem;cursor:pointer;max-width:100%;width:min(100%,360px)}
.quiz-map-actions button:disabled{opacity:.48;cursor:not-allowed}
.quiz-map-actions button:focus-visible{outline:3px solid var(--brand-aqua);outline-offset:3px}
.quiz-map-actions [hidden]{display:none}
.quiz-map-actions .quiz-map-next{background:var(--brand-aqua);color:#13273a;border-color:var(--brand-aqua)}
.quiz-map-shell.is-revealed .quiz-map-question{border-color:var(--brand-aqua)}
.quiz-map-shell.is-finished .quiz-map-question{border-color:var(--brand-violet);padding-block:22px}
@media(max-width:640px){
  .quiz-map-shell{gap:8px}
  .quiz-map-upper{gap:6px}
  .quiz-map-total{font-size:.74rem}
  .quiz-map-total strong{font-size:1.06rem}
  .quiz-map-question{grid-template-columns:1fr;min-height:0;padding:12px;gap:9px}
  .quiz-map-question h2{margin:4px 0}
  .quiz-map-art{width:min(80%,250px);aspect-ratio:2.7;justify-self:center}
  .quiz-map-map-box{border-radius:12px}
  .quiz-map-zoom{inset-block-start:7px;inset-inline-end:7px}
  .quiz-map-zoom button{width:40px;height:40px}
  .quiz-map-feedback{font-size:.83rem}
}
@media(prefers-reduced-motion:no-preference){.quiz-map-zoom button:hover{transform:scale(1.04)}.quiz-map-actions button:not(:disabled):active{transform:scale(.98)}}

.quiz-map-progress{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;min-width:0}
.quiz-map-progress-segment{height:8px;border-radius:10px;background:var(--surface3,var(--line));border:1px solid var(--line)}
.quiz-map-progress-segment[data-state="current"]{background:var(--brand-violet);border-color:var(--brand-violet)}
.quiz-map-progress-segment[data-state="close"]{background:var(--brand-aqua);border-color:var(--brand-aqua)}
.quiz-map-progress-segment[data-state="near"]{background:var(--brand-yellow);border-color:var(--brand-yellow)}
.quiz-map-progress-segment[data-state="far"]{background:var(--brand-coral);border-color:var(--brand-coral)}
.quiz-map-summary{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.quiz-map-summary[hidden]{display:none}
.quiz-map-summary li{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--line);border-inline-start:5px solid var(--brand-violet);border-radius:11px;background:var(--surface2);padding:8px 11px;min-width:0;font-size:.82rem}
.quiz-map-summary li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quiz-map-summary li strong{flex-shrink:0;font-variant-numeric:tabular-nums}
.quiz-map-summary li[data-grade="close"]{border-inline-start-color:var(--brand-aqua)}
.quiz-map-summary li[data-grade="near"]{border-inline-start-color:var(--brand-yellow)}
.quiz-map-summary li[data-grade="far"]{border-inline-start-color:var(--brand-coral)}
@media(max-width:640px){.quiz-map-summary{grid-template-columns:minmax(0,1fr)}.quiz-map-progress{gap:3px}}

/* QuizMap editorial-style play surface: high-contrast, responsive, touch friendly. */
.quiz-map-shell{gap:16px;max-width:1200px}
.quiz-map-upper{padding:14px 20px;border:1px solid var(--line);border-radius:20px;background:var(--surface2);box-shadow:0 8px 28px #142c4910}
.quiz-map-round{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;background:#ede6ff;color:#57349a;letter-spacing:.025em}
.quiz-map-total{gap:12px}
.quiz-map-total strong{padding:8px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.quiz-map-question{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 12px 32px #12294513;padding:clamp(16px,2.6vw,30px);min-height:145px}
.quiz-map-question h2{font-size:clamp(1.35rem,3vw,2rem);line-height:1.18}
.quiz-map-question .quiz-map-kicker{font-size:.78rem}
.quiz-map-art{border-radius:18px;background:#f0eaff;color:#6142a8}
.quiz-map-map-box{border:5px solid var(--surface);outline:1px solid var(--line);border-radius:24px;box-shadow:0 18px 45px #12294524}
.quiz-map-board{min-height:260px}
.quiz-map-zoom{inset-block-start:16px;inset-inline-end:16px;gap:8px}
.quiz-map-zoom button{width:46px;height:46px;border-radius:14px;background:#fff;color:#243d67;border:1px solid #d8e1ee;box-shadow:0 4px 16px #001c3340}
.quiz-map-zoom button:hover{background:#f0eaff}
.quiz-map-feedback:not(:empty){border-radius:16px;background:var(--surface2);border:1px solid var(--line);padding:14px 18px;line-height:1.5}
.quiz-map-actions button{border-radius:16px;min-height:52px;box-shadow:0 6px 16px #34206525}
.quiz-map-progress-segment{height:10px}
.quiz-map-summary li{border-radius:14px;padding:12px 14px}
@media(max-width:640px){
.quiz-map-shell{gap:10px}
.quiz-map-upper{padding:10px 12px;gap:8px;border-radius:15px}
.quiz-map-round{padding:7px 10px;font-size:.86rem}
.quiz-map-total strong{padding:6px 9px}
.quiz-map-question{border-radius:17px;padding:14px;gap:8px}
.quiz-map-question h2{font-size:1.2rem}
.quiz-map-art{width:min(100%,190px);aspect-ratio:2.7}
.quiz-map-map-box{border-width:3px;border-radius:17px}
.quiz-map-board{min-height:190px}
.quiz-map-zoom{inset-block-start:8px;inset-inline-end:8px}
.quiz-map-zoom button{width:42px;height:42px}
.quiz-map-actions button{width:100%}
}