/* US States identity: a retro road trip. Big Shoulders Display plate lettering, desert sunset, asphalt with a
   yellow center line, and license-plate cards with bolt holes. One look in light and dark mode. */
.qzg-us-states .page-head h1 { font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 900; letter-spacing: .01em; text-transform: uppercase; }
.qzg-us-states .qz-stage {
  --g-stage: #2d2d2d; --g-ink: #1b2a49; --g-muted: #4d5872; --g-card: #f7f4ea; --g-card2: #ebe5d3; --g-line: #c9c0a6;
  --g-accent: #c8102e; --g-accent-ink: #fff; --g-ok: #1f8a70; --g-bad: #c8102e; --g-ok-soft: #d6f0e7; --g-bad-soft: #fbdade; --g-focus: #1b2a49;
  --g-font: "Big Shoulders Display", Impact, sans-serif; --g-r: 16px; --g-btn-r: 10px; --g-shadow: 0 14px 30px rgba(0,0,0,.4); --g-hero-h: 540px;
  --map-fill: #f1d6a5; --map-line: #fff; --map-hover: #ffc857; --map-hl: #ffb000;
  background:
    linear-gradient(90deg, transparent calc(50% - 4px), #ffd23f calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)) 0 0 / 100% 80px,
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 7px 7px,
    linear-gradient(180deg, #f28f3b 0, #d9734a 90px, #3a3a3a 90px, #2d2d2d);
}
.qzg-us-states .qz .card { border: 3px solid #1b2a49; box-shadow: inset 0 0 0 4px #f7f4ea, inset 0 0 0 5.5px #1b2a49, 0 14px 30px rgba(0,0,0,.4); }
.qzg-us-states .qz .main { box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.qzg-us-states .qz h2, .qzg-us-states .qz .qtitle { font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: 26px; }
.qzg-us-states .qz .prompt { font-weight: 800; font-size: clamp(26px, 4.4vw, 38px); text-transform: uppercase; letter-spacing: .02em; }
.qzg-us-states .qz .prompt b { color: #c8102e; }
.qzg-us-states .qz .btn.primary { font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 900; font-size: 22px; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 5px 0 #7d0a1d; border: 0; }
.qzg-us-states .qz .btn.primary:active { transform: translateY(4px); box-shadow: 0 1px 0 #7d0a1d; }
.qzg-us-states .qz .btn.ghost { border: 2px solid #1b2a49; font-weight: 900; }

.qzg-us-states .qz .hero-card { border: 4px solid #1b2a49; box-shadow: inset 0 0 0 5px #f7f4ea, inset 0 0 0 7px #1b2a49, 0 22px 50px rgba(0,0,0,.5); }
.qzg-us-states .qz .hero-card::before, .qzg-us-states .qz .hero-card::after { content: ""; position: absolute; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8a93a6 60%, #4d5872); }
.qzg-us-states .qz .hero-card::before { left: 16px; } .qzg-us-states .qz .hero-card::after { right: 16px; }
.qzg-us-states .qz .pill { font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; background: #ffd23f; color: #1b2a49; border: 3px solid #1b2a49; border-radius: 6px; }
.qzg-us-states .qz .play { font-size: 28px !important; }
.qzg-us-states .qz .tswitch input:checked + i { background: #1f8a70; }

.qzg-us-states .qz .qhead { background: #1b2a49; color: #f7f4ea; border-bottom: 0; border-radius: 12px 12px 0 0; }
.qzg-us-states .qz .qhead .sc { background: #ffd23f; color: #1b2a49; font-family: "Big Shoulders Display", Impact, sans-serif; font-size: 20px; }
.qzg-us-states .qz .ttrack { stroke: rgba(255,255,255,.2); } .qzg-us-states .qz .tarc { stroke: #ffd23f; }
.qzg-us-states .qz .prog { background: #3a3a3a; height: 10px; }
.qzg-us-states .qz .prog i { background: repeating-linear-gradient(90deg, #ffd23f 0 16px, transparent 16px 26px); }
.qzg-us-states .qz .map { background: #e3f1f4; border-radius: 12px; padding: 6px; border: 2px solid #1b2a49; }
.qzg-us-states .qz .maptools .chip { border: 2px solid #1b2a49; font-weight: 900; }
.qzg-us-states .qz .choice { font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .04em; background: #f7f4ea; border: 3px solid #1b2a49; border-radius: 12px;
  box-shadow: inset 0 0 0 3px #f7f4ea, inset 0 0 0 4.5px #1b2a49; }
.qzg-us-states .qz .choice::before, .qzg-us-states .qz .choice::after { content: ""; position: absolute; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #8a93a6; }
.qzg-us-states .qz .choice::before { left: 40%; } .qzg-us-states .qz .choice::after { right: 40%; }
.qzg-us-states .qz .choice .k { font-family: "Nunito", system-ui, sans-serif; }
@media (hover: hover) { .qzg-us-states .qz .choice:hover:not(:disabled) { border-color: #c8102e; } }
.qzg-us-states .qz .choice.right { background: var(--g-ok-soft); border-color: var(--g-ok); }
.qzg-us-states .qz .choice.wrong { background: var(--g-bad-soft); border-color: var(--g-bad); }
.qzg-us-states .qz .after.open { background: #ebe5d3; }
.qzg-us-states .qz .bulbico { color: #c8102e; }
.qzg-us-states .qz .result .big { color: #1b2a49; font-weight: 900; }
.qzg-us-states .qz .stat { background: #ebe5d3; border: 2px solid #1b2a49; }
.qzg-us-states .qz .stat b { color: #c8102e; font-weight: 900; }
.qzg-us-states .qz .more a[aria-current="page"] { background: #1b2a49; color: #ffd23f; }