/* Capitals Quiz identity: a vintage travel postcard. Alfa Slab One with Yellowtail script, sunset sky, airmail stripes,
   postage-stamp score and a postcard of the city after each answer. One look in light and dark mode. */
.qzg-capitals .page-head h1 { font-family: "Alfa Slab One", Georgia, serif; font-weight: 400; }
.qzg-capitals .qz-stage {
  --g-stage: #1f6f78; --g-ink: #2b2d42; --g-muted: #5e5a52; --g-card: #f8efdc; --g-card2: #efe2c4; --g-line: #d9c7a1;
  --g-accent: #c8553d; --g-accent-ink: #fff; --g-ok: #2a7f62; --g-bad: #b23a48; --g-ok-soft: #dcefe2; --g-bad-soft: #f8dcdc; --g-focus: #1d3557;
  --g-font: "Alfa Slab One", Georgia, serif; --g-r: 6px; --g-btn-r: 8px; --g-shadow: 0 14px 30px rgba(43,45,66,.35); --g-hero-h: 560px;
  background:
    repeating-conic-gradient(from 0deg at 50% 110%, rgba(255,230,180,.13) 0 6deg, transparent 6deg 14deg),
    linear-gradient(180deg, #1f6f78 0%, #2a9d8f 30%, #f4a261 75%, #e76f51 100%);
}
.qzg-capitals .qz .card, .qzg-capitals .qz .hero-card {
  border: 9px solid transparent;
  background: linear-gradient(#f8efdc, #f8efdc) padding-box, repeating-linear-gradient(135deg, #c1121f 0 12px, #f8efdc 12px 20px, #1d3557 20px 32px, #f8efdc 32px 40px) border-box;
}
.qzg-capitals .qz .main { background: linear-gradient(#f8efdc, #f8efdc) padding-box, repeating-linear-gradient(135deg, #c1121f 0 12px, #f8efdc 12px 20px, #1d3557 20px 32px, #f8efdc 32px 40px) border-box; }
.qzg-capitals .qz h2, .qzg-capitals .qz .prompt, .qzg-capitals .qz .qtitle { font-weight: 400; color: #1d3557; }
.qzg-capitals .qz .btn.primary { font-family: "Alfa Slab One", Georgia, serif; font-weight: 400; letter-spacing: .03em; box-shadow: 0 4px 0 #8c3a28; border-color: #8c3a28; }
.qzg-capitals .qz .btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #8c3a28; }
.qzg-capitals .qz .btn.ghost { border-color: #1d3557; color: #1d3557; font-weight: 900; }

/* Hero: city photo behind a postcard */
.qzg-capitals .qz .hero-card { transform: rotate(-1.5deg); box-shadow: 0 22px 50px rgba(0,0,0,.4); }
.qzg-capitals .qz .hero-card::after { content: ""; position: absolute; top: 12px; right: 12px; width: 52px; height: 62px; background: radial-gradient(circle at 50% 40%, #e9c46a 0 14px, transparent 15px), #1f6f78;
  -webkit-mask: radial-gradient(circle 3.5px, transparent 3.2px, #000 3.6px) -4px -4px / 8px 8px; mask: radial-gradient(circle 3.5px, transparent 3.2px, #000 3.6px) -4px -4px / 8px 8px; opacity: .9; }
.qzg-capitals .qz .pill { font-family: "Yellowtail", cursive; font-weight: 400; font-size: 20px; background: #1d3557; color: #f8efdc; border: 0; padding: 2px 16px 4px; }
.qzg-capitals .qz .hero.has-photo .hero-photo { filter: saturate(1.15) sepia(.12); }
.qzg-capitals .qz .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(43,45,66,.45)); }
.qzg-capitals .qz .tswitch input:checked + i { background: #1f6f78; }

/* Playing */
.qzg-capitals .qz .qhead { border-bottom: 2px dashed #d9c7a1; }
.qzg-capitals .qz .qhead .sc { background: #e9c46a; color: #2b2d42; border-radius: 2px; outline: 3px dotted #f8efdc; outline-offset: -5px; padding: 9px 15px; box-shadow: 0 2px 5px rgba(43,45,66,.25); }
.qzg-capitals .qz .qstat { position: relative; }
.qzg-capitals .qz .prog { background: #efe2c4; }
.qzg-capitals .qz .prog i { background: repeating-linear-gradient(135deg, #c1121f 0 8px, #fff 8px 12px, #1d3557 12px 20px, #fff 20px 24px); }
.qzg-capitals .qz .namecard { background: #fffaf0; border: 1px solid #d9c7a1; box-shadow: 0 6px 16px rgba(43,45,66,.12); position: relative; max-width: 480px; padding: 26px 20px; }
.qzg-capitals .qz .namecard::before { content: "Par Avion"; position: absolute; top: 10px; left: 12px; font-family: "Yellowtail", cursive; color: #1d3557; font-size: 18px; transform: rotate(-8deg); opacity: .7; }
.qzg-capitals .qz .namecard .lab { color: #c8553d; }
.qzg-capitals .qz .namecard .big { font-weight: 400; color: #1d3557; }
.qzg-capitals .qz .choice { background: #fffaf0; border: 2px solid #d9c7a1; border-radius: 8px; font-size: 17px; }
@media (hover: hover) { .qzg-capitals .qz .choice:hover:not(:disabled) { border-color: #1d3557; transform: rotate(-.6deg) translateY(-2px); } }
.qzg-capitals .qz .choice.right { background: var(--g-ok-soft); border-color: var(--g-ok); }
.qzg-capitals .qz .choice.wrong { background: var(--g-bad-soft); border-color: var(--g-bad); }
.qzg-capitals .qz .after.open { background: #f3e6c9; }
.qzg-capitals .qz .bulbico { color: #c8553d; }
.qzg-capitals .qz .verdict b.yes, .qzg-capitals .qz .verdict b.no { font-family: "Yellowtail", cursive; font-weight: 400; font-size: 22px; }

/* Postcard of the capital */
.qzg-capitals .qz .pcard { background: #fff; padding: 10px 10px 8px; box-shadow: 0 8px 20px rgba(43,45,66,.25); transform: rotate(-1.2deg); max-width: 380px; }
.qzg-capitals .qz .pcard .qphoto { aspect-ratio: 16 / 10; overflow: hidden; background: #e9c46a; }
.qzg-capitals .qz .pcard .qphoto.has-photo { aspect-ratio: auto; background: transparent; }
.qzg-capitals .qz .pcard .qphoto.has-photo img { aspect-ratio: 16 / 10; }
.qzg-capitals .qz .pcard .qcredit { position: relative; }
.qzg-capitals .qz .pcard-art { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; background: linear-gradient(180deg, #2a9d8f, #f4a261 70%, #e76f51); }
.qzg-capitals .qz .pcard-art span { font-family: "Yellowtail", cursive; font-size: clamp(28px, 6vw, 40px); color: #fff; text-shadow: 2px 2px 0 #1d3557; text-align: center; padding: 0 12px; line-height: 1.1; }
.qzg-capitals .qz .stampflag { width: 64px; aspect-ratio: 4 / 3; object-fit: cover; border: 5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transform: rotate(5deg); }
.qzg-capitals .qz .pcard-note { margin: 8px 2px 0 !important; font-weight: 700; color: #2b2d42; font-size: 15px; }
.qzg-capitals .qz .pcard-note i { font-family: "Yellowtail", cursive; font-style: normal; color: #c8553d; font-size: 20px; margin-right: 4px; }
@media (prefers-reduced-motion: no-preference) { .qzg-capitals .qz .pcard { animation: pcin .5s cubic-bezier(.2,.9,.3,1.2); } @keyframes pcin { from { transform: translateY(20px) rotate(4deg); opacity: 0; } } }

.qzg-capitals .qz .result .big { color: #c8553d; font-weight: 400; }
.qzg-capitals .qz .stat { background: #efe2c4; }
.qzg-capitals .qz .stat b { color: #1d3557; font-weight: 400; }
.qzg-capitals .qz .more a[aria-current="page"] { background: #1d3557; }
@media (max-width: 520px) { .qzg-capitals .qz .hero-card { transform: rotate(-.8deg); } .qzg-capitals .qz .hero-card::after { width: 38px; height: 46px; top: 8px; right: 8px; } .qzg-capitals .qz .hero-title svg { max-width: 88%; } }