/* 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; }