@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;1,500&family=EB+Garamond:ital@0;1&display=swap');
/* chrome.css — shared Areopagus chrome: top bar, texture, victory juice.
   Dropped verbatim into every game + the umbrella. Uses a fixed brass accent
   so the five distinct chambers still read as one institution. */

:root { --areo-brass: #c9a84c; }

/* --- Background texture: faint vignette + paper grain over each game's --bg --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(201,168,76,0.06), transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 110%, rgba(0,0,0,0.35), transparent 70%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* --- Top bar (injected by chrome.js) --- */
.areo-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  background: rgba(10, 9, 8, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);
}
.areo-topbar a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--areo-brass);
}
.areo-topbar svg { width: 26px; height: 26px; display: block; }
.areo-topbar .areo-wordmark {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--areo-brass);
  opacity: 0.9;
}
.areo-topbar .areo-back {
  margin-left: auto;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
}
@media (max-width: 480px) { .areo-topbar .areo-back { display: none; } }

/* --- Victory juice: every verdict pops in; top-tier verdicts glow --- */
@keyframes areo-pop {
  0%   { transform: scale(0.94); opacity: 0; }
  60%  { transform: scale(1.015); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes areo-glow {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0.0); }
  35%  { box-shadow: 0 0 28px 4px rgba(201,168,76,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.0); }
}
/* base pop on any verdict, in any of the five games */
.verdict, .feedback-verdict, .verdict-title {
  animation: areo-pop 0.45s cubic-bezier(.2,.7,.3,1) both;
}
/* the won states each game uses get an extra brass flare */
.verdict--sharp, .verdict--granted, .verdict--polymath, .verdict--unshaken,
.feedback-verdict--correct, .verdict--won {
  animation: areo-pop 0.45s cubic-bezier(.2,.7,.3,1) both, areo-glow 1.1s ease-out 0.2s 1;
}

/* count-up number styling hook (chrome.js animates the value) */
.areo-counting { font-variant-numeric: tabular-nums; }

/* ===================== DARK ACADEMIA LAYER (2026-06-23) =====================
   One candlelit ground + classical typography across all five chambers + umbrella.
   Targeted !important (chrome.css loads before each game's style.css); monospace
   guarded so scores/inputs/timers stay mono. ========================================= */
:root{ --areo-ground:#15100A; --areo-parch:#E9DFC8; --areo-candle:#E4C883; --areo-oxblood:#7E1C24; --areo-brass-d:#A8842F; }

/* warm candlelit ground unifies the near-black chambers */
body{ background-color:#15100A !important; }

/* classical voice — Garamond reading, Cinzel titles */
body{ font-family:'EB Garamond','Georgia','Times New Roman',serif !important; }
h1,h2,h3,h4,.areo-wordmark{ font-family:'Cinzel','Georgia',serif !important; letter-spacing:.05em; font-weight:600; }

/* keep monospace where the games mean it (scores, inputs, timers, code, counters) */
code,kbd,pre,samp,input,textarea,select,.mono,[class*="mono"],.areo-counting,
[class*="score"],[class*="timer"],[class*="count"],[class*="points"]{
  font-family:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace !important;
}

/* candlelight + AGED OLD-BOOK UNDERTONE darkening the margins (warm umber edges, like tanned/foxed page edges) */
body::before{
  background:
    radial-gradient(ellipse 120% 78% at 50% -6%, rgba(228,200,131,.11), transparent 56%),
    radial-gradient(ellipse 142% 112% at 50% 48%, transparent 48%, rgba(74,49,23,.30) 78%, rgba(46,29,13,.62) 100%),
    radial-gradient(ellipse 110% 70% at 50% 112%, rgba(0,0,0,.48), transparent 72%) !important;
}
/* warm the paper grain toward sepia foxing */
body::after{ opacity:.04 !important; mix-blend-mode:multiply; filter:sepia(1) saturate(1.4) brightness(.7); }

/* topbar — engraved Cinzel wordmark in candle-gold; NO crest (it read as a strange face) */
.areo-topbar{ background:rgba(18,13,8,.88) !important; border-bottom:1px solid rgba(201,168,76,.32) !important; }
.areo-topbar svg{ display:none !important; }
.acropolis-crest, .areo-crest, .hero-crest, [class*="crest"] img, img[src*="crest"]{ display:none !important; }
.areo-topbar .areo-wordmark{ font-family:'Cinzel',serif !important; font-size:.74rem !important; letter-spacing:.30em !important; color:var(--areo-candle) !important; opacity:1 !important; }

/* verdicts read like a struck brass plaque */
.verdict,.feedback-verdict,.verdict-title{ font-family:'Cinzel',serif !important; letter-spacing:.05em; }
/* ===================== END DARK ACADEMIA LAYER ===================== */