/* ======================================================================
   Older eras. Each one borrows a material from its period:
   ancient      red-figure pottery (prompt) + papyrus (reveal)
   medieval     illuminated manuscript on lapis, rubric drop cap
   early-modern copperplate engraving / woodcut rules
   1800s        broadsheet newsprint + telegraph tape
   deco         1900-1959 art deco sunburst, newsreel vignette
   ====================================================================== */

/* ---- dial era plate (BC / AD) and the telegraph tape ---- */
.plate {
  align-self: stretch;
  display: grid; place-items: center;
  min-width: 44px; padding: 0 8px;
  border-radius: 10px;
  background: var(--flap); color: var(--flap-ink);
  font: 800 1.5rem/1 "Big Shoulders Display", "Arial Narrow", sans-serif;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}
.plate[hidden] { display: none; }
.tape { display: none; }

/* ---- ancient: red-figure pottery ---- */
[data-era="ancient"] {
  --bg: #d4834f;
  --bg-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 214, 170, 0.25), transparent 60%);
  --panel: #1d1712;
  --ink: #eaa871;
  --muted: #c4875a;
  --line: #6b3e22;
  --accent: #eaa871;
  --accent-ink: #1d1712;
  --on-bg: #1d1712;
  --flap: #1d1712;
  --flap-ink: #eaa871;
  --radius: 4px;
  --radius-btn: 4px;
  --panel-border: 0;
  --panel-shadow: 0 10px 24px rgba(29, 23, 18, 0.35);
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --display-weight: 800;
  --display-tracking: 0.03em;
}
/* Greek key (meander) bands above and below the prompt, drawn as SVG */
[data-era="ancient"] .prompt-card { position: relative; padding-top: 36px; padding-bottom: 34px; }
[data-era="ancient"] .prompt-card::before,
[data-era="ancient"] .prompt-card::after {
  content: ""; position: absolute; left: 14px; right: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cpath d='M0 13h22V1H6v8h10V5h-6' fill='none' stroke='%23eaa871' stroke-width='2'/%3E%3C/svg%3E") repeat-x left center / 24px 14px;
}
[data-era="ancient"] .prompt-card::before { top: 11px; }
[data-era="ancient"] .prompt-card::after { bottom: 10px; transform: scaleY(-1); }
[data-era="ancient"] .prompt-text { font-size: clamp(1.55rem, 7vw, 1.95rem); line-height: 1.15; }
[data-era="ancient"] #answer { background: #2a221b; border-color: #6b3e22; color: #f4c9a1; }
/* the reveal is a papyrus sheet: crossed fibres from layered gradients */
[data-era="ancient"] .reveal-card {
  --ink: #2a1d10; --muted: #6a5232; --accent: #a4441d;
  background-color: #e8d9ae;
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 90, 40, 0.10) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(120, 90, 40, 0.08) 0 2px, transparent 2px 9px);
  color: #2a1d10;
}

/* ---- medieval: illuminated manuscript ---- */
[data-era="medieval"] {
  --bg: #22305c;
  --bg-image:
    radial-gradient(circle at 12px 12px, rgba(233, 196, 106, 0.22) 1.5px, transparent 2px),
    radial-gradient(circle at 36px 36px, rgba(233, 196, 106, 0.14) 1px, transparent 1.5px);
  --panel: #f2e6c9;
  --ink: #2b1d14;
  --muted: #6e5a43;
  --line: #c9a54a;
  --accent: #a3231f;
  --accent-ink: #f8eed6;
  --on-bg: #f2e6c9;
  --flap: #a3231f;
  --flap-ink: #f3d27a;
  --radius: 3px;
  --radius-btn: 3px;
  --panel-border: 3px double;
  --panel-shadow: 0 0 0 1px #8a6a22, 0 12px 26px rgba(10, 14, 32, 0.4);
  --font-display: "Grenze Gotisch", "Old English Text MT", Georgia, serif;
  --display-weight: 700;
  --display-tracking: 0.01em;
}
[data-era="medieval"] body { background-size: 48px 48px; }
[data-era="medieval"] .prompt-text { font-size: clamp(1.9rem, 8.6vw, 2.4rem); line-height: 1.02; }
/* rubric drop cap on a gilded square */
[data-era="medieval"] .prompt-text::first-letter {
  float: left; margin: 0.04em 0.12em 0 0; padding: 0.06em 0.16em;
  font-size: 2.3em; line-height: 0.8; color: #a3231f;
  background: linear-gradient(135deg, #f3d27a, #c9a54a); border: 2px solid #8a6a22;
}
[data-era="medieval"] .prompt-cat { font-family: "IM Fell English", Georgia, serif; font-style: italic; color: #a3231f; }
[data-era="medieval"] .stamp { color: #a3231f; }
[data-era="medieval"] .wordmark svg { color: #f3d27a; }

/* ---- early modern: copperplate engraving and woodcut ---- */
[data-era="early-modern"] {
  --bg: #e7e1d1;
  --bg-image: repeating-linear-gradient(135deg, rgba(20, 18, 16, 0.07) 0 1px, transparent 1px 4px);
  --panel: #faf6ec;
  --ink: #141210;
  --muted: #4d463c;
  --line: #141210;
  --accent: #6e2a22;
  --accent-ink: #faf6ec;
  --on-bg: #141210;
  --flap: #141210;
  --flap-ink: #faf6ec;
  --radius: 0;
  --radius-btn: 0;
  --panel-border: 3px solid;
  --panel-shadow: inset 0 0 0 4px #faf6ec, inset 0 0 0 5px #141210;
  --font-display: "IM Fell English", "Caslon", Georgia, serif;
  --display-weight: 400;
  --display-tracking: 0;
}
[data-era="early-modern"] .prompt-text { font-size: clamp(1.9rem, 8.4vw, 2.35rem); line-height: 1.05; }
[data-era="early-modern"] .prompt-cat { font-family: "IM Fell English", Georgia, serif; font-style: italic; font-size: 1rem; }
[data-era="early-modern"] .flap,
[data-era="early-modern"] .plate { border-radius: 0; }
[data-era="early-modern"] .stamp { font-style: italic; }

/* ---- 1800s: broadsheet newsprint and telegraph tape ---- */
[data-era="1800s"] {
  --bg: #d8d0bd;
  --bg-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(26, 24, 20, 0.12) calc(25% - 1px) 25%);
  --panel: #f2ede1;
  --ink: #1a1814;
  --muted: #555046;
  --line: #1a1814;
  --accent: #1a1814;
  --accent-ink: #f2ede1;
  --on-bg: #1a1814;
  --flap: #1a1814;
  --flap-ink: #f2ede1;
  --radius: 0;
  --radius-btn: 0;
  --panel-border: 0;
  --panel-shadow: none;
  --font-display: "Old Standard TT", "Times New Roman", serif;
  --display-weight: 700;
  --display-tracking: -0.005em;
}
[data-era="1800s"] .prompt-card,
[data-era="1800s"] .reveal-card { border-top: 6px double #1a1814; border-bottom: 1px solid #1a1814; }
[data-era="1800s"] .prompt-cat { font-variant: small-caps; letter-spacing: 0.06em; font-family: "Old Standard TT", serif; }
[data-era="1800s"] .prompt-text { font-size: clamp(1.9rem, 8.6vw, 2.4rem); line-height: 1.02; }
[data-era="1800s"] .flap,
[data-era="1800s"] .plate { border-radius: 2px; }
[data-era="1800s"] .tape {
  display: block; margin: -6px 0 12px; padding: 4px 10px;
  background: #f7efd6; border: 1px solid #b9ab86; border-radius: 2px;
  font: 600 1rem/1.4 "Courier New", monospace; letter-spacing: 0.08em; color: #24406b;
  white-space: nowrap; overflow: hidden;
}

/* ---- 1900-1959: art deco sunburst, newsreel vignette ---- */
[data-era="deco"] {
  --bg: #0f3b33;
  --bg-image:
    radial-gradient(110% 80% at 50% 0%, transparent 55%, rgba(0, 0, 0, 0.35)),
    repeating-conic-gradient(from 0deg at 50% 0%, rgba(233, 207, 116, 0.10) 0deg 3deg, transparent 3deg 12deg);
  --panel: #f4ecd8;
  --ink: #10251f;
  --muted: #4f5e55;
  --line: #c9a227;
  --accent: #c9a227;
  --accent-ink: #10251f;
  --on-bg: #f4ecd8;
  --flap: #10251f;
  --flap-ink: #e9cf74;
  --radius: 2px;
  --radius-btn: 2px;
  --panel-border: 2px solid;
  --panel-shadow: 0 0 0 4px #0f3b33, 0 0 0 5px #c9a227;
  --font-display: "Limelight", "Didot", Georgia, serif;
  --display-weight: 400;
  --display-tracking: 0.01em;
}
[data-era="deco"] .flap { border-radius: 2px; box-shadow: inset 0 0 0 2px #c9a227, inset 0 -3px 0 rgba(0, 0, 0, 0.35); }
[data-era="deco"] .plate { border-radius: 2px; box-shadow: inset 0 0 0 2px #c9a227; }
[data-era="deco"] .prompt-text { font-size: clamp(1.8rem, 8vw, 2.2rem); line-height: 1.08; }
[data-era="deco"] .prompt-cat { letter-spacing: 0.08em; }