/* Flag Quiz identity: a bold vexillology poster. Anton, flat primaries, hard offset shadows, square corners.
   The game area keeps one look in light and dark mode. */
.qzg-flags .page-head h1 { font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.qzg-flags .qz-stage {
  --g-stage: #14213d; --g-ink: #14213d; --g-muted: #4f5874; --g-card: #fbf3e4; --g-card2: #f1e4cb; --g-line: #14213d;
  --g-accent: #d62828; --g-accent-ink: #fff; --g-ok: #1d7a3e; --g-bad: #c1121f; --g-ok-soft: #d7f0dc; --g-bad-soft: #ffd9d6; --g-focus: #fcbf49;
  --g-font: "Anton", Impact, sans-serif; --g-r: 4px; --g-btn-r: 3px; --g-shadow: 8px 8px 0 #d62828; --g-hero-h: 540px;
  background:
    linear-gradient(115deg, transparent 0 62%, #d62828 62% 70%, transparent 70% 74%, #fcbf49 74% 79%, transparent 79%),
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.06) 0 2px, transparent 3px) 0 0 / 26px 26px,
    #14213d;
}
.qzg-flags .qz .card { border: 3px solid #14213d; }
.qzg-flags .qz .side .card { box-shadow: 6px 6px 0 #fcbf49; }
.qzg-flags .qz h2, .qzg-flags .qz .prompt, .qzg-flags .qz .qtitle { font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
.qzg-flags .qz .btn.primary { font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; border: 3px solid #14213d; box-shadow: 4px 4px 0 #14213d; transition: transform .1s, box-shadow .1s; }
.qzg-flags .qz .btn.primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #14213d; filter: none; }
.qzg-flags .qz .btn.primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #14213d; }
.qzg-flags .qz .btn.ghost { border: 3px solid #14213d; font-weight: 900; }

/* Hero: a wall of real flags behind a poster card */
.qzg-flags .qz .hero-art { background: #14213d; }
.qzg-flags .flagwall { position: absolute; inset: -25%; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; transform: rotate(-12deg); align-content: start; }
.qzg-flags .flagwall img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; box-shadow: 0 0 0 2px #14213d, 4px 4px 0 rgba(0,0,0,.35); }
@media (prefers-reduced-motion: no-preference) { .qzg-flags .flagwall { animation: flagdrift 60s linear infinite alternate; } @keyframes flagdrift { to { transform: rotate(-12deg) translateX(-110px); } } }
.qzg-flags .qz .hero-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(20,33,61,.35), rgba(20,33,61,.82)); }
.qzg-flags .qz .hero-card { border: 3px solid #14213d; box-shadow: 12px 12px 0 #d62828; }
.qzg-flags .qz .pill { background: #fcbf49; border: 3px solid #14213d; border-radius: 0; font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.qzg-flags .qz .tswitch input:checked + i { background: #14213d; }
.qzg-flags .qz .seg, .qzg-flags .qz .chip { border-radius: 0; }
.qzg-flags .qz .seg button { border-radius: 0; }
.qzg-flags .qz .chip { border: 2px solid #14213d; }

/* Playing */
.qzg-flags .qz .qhead { background: #14213d; color: #fbf3e4; border-bottom: 0; }
.qzg-flags .qz .qhead .sc { background: #fcbf49; color: #14213d; border-radius: 0; }
.qzg-flags .qz .tarc { stroke: #fcbf49; } .qzg-flags .qz .ttrack { stroke: rgba(255,255,255,.2); }
.qzg-flags .qz .prog { background: #f1e4cb; height: 8px; }
.qzg-flags .qz .prog i { background: repeating-linear-gradient(90deg, #d62828 0 18px, #fbf3e4 18px 22px, #14213d 22px 40px); }
.qzg-flags .qz .flag { background: #fff; border-radius: 0; padding: 14px; box-shadow: 0 0 0 3px #14213d, 10px 10px 0 #fcbf49; width: min(100%, 360px); }
@media (max-width: 520px) { .qzg-flags .qz .flag { width: min(100% - 14px, 270px); } }
.qzg-flags .qz .flag img { border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
  .qzg-flags .qz .media .flag { animation: flagin .45s cubic-bezier(.2,.9,.3,1.3); transform-origin: left center; }
  @keyframes flagin { from { transform: perspective(600px) rotateY(-35deg) scale(.9); opacity: 0; } }
}
.qzg-flags .qz .choice { border: 3px solid #14213d; background: #fff; box-shadow: 4px 4px 0 #14213d; text-transform: uppercase; letter-spacing: .02em; font-size: 16px; }
@media (hover: hover) { .qzg-flags .qz .choice:hover:not(:disabled) { border-color: #14213d; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #d62828; } }
.qzg-flags .qz .choice.right { box-shadow: 4px 4px 0 var(--g-ok); background: var(--g-ok-soft); border-color: var(--g-ok); }
.qzg-flags .qz .choice.wrong { box-shadow: 4px 4px 0 var(--g-bad); background: var(--g-bad-soft); border-color: var(--g-bad); }
.qzg-flags .qz .choice .k { border-radius: 0; background: #14213d; color: #fbf3e4; }
.qzg-flags .qz .after.open { background: #fff7e8; border-top: 3px solid #14213d; }
.qzg-flags .qz .bulbico { color: #d62828; }
.qzg-flags .qz .result .big { color: #d62828; text-shadow: 3px 3px 0 #14213d; font-weight: 400; }
.qzg-flags .qz .result .big small { text-shadow: none; color: #14213d; }
.qzg-flags .qz .review h3 { font-weight: 400; text-transform: uppercase; }
.qzg-flags .qz .stat { border-radius: 0; border: 2px solid #14213d; }
.qzg-flags .qz .stat b { color: #d62828; font-weight: 400; }
.qzg-flags .qz .more a { border-radius: 0; }
.qzg-flags .qz .fact .mini { width: 26px; }