/* Shared tokens, fonts and the answer "lozenge" used on every page. */

@font-face { font-family: 'Barlow SC'; font-weight: 400; font-display: swap; src: url('/fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 500; font-display: swap; src: url('/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 600; font-display: swap; src: url('/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 700; font-display: swap; src: url('/fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow SC'; font-weight: 800; font-display: swap; src: url('/fonts/barlow-semi-condensed-latin-800-normal.woff2') format('woff2'); }

:root {
  --night: #01040f;
  --deep: #040c33;
  --navy: #0a1a5e;
  --royal: #2346c8;
  --ice: #cfdaf3;
  --silver-hi: #f4f7fd;
  --silver-lo: #7f8bab;
  --gold: #f7a531;
  --gold-hi: #ffd67a;
  --gold-lo: #c46a00;
  --green: #3fbf3f;
  --green-hi: #c2f7a3;
  --green-lo: #156b15;
  --red: #e5484d;
  --text: #ffffff;
  --muted: #9aa8cf;
  --font: 'Barlow SC', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); color: var(--text); font-family: var(--font); }
button { font-family: inherit; }

/* ---------- lozenge: elongated hexagon with silver frame ---------- */
.loz {
  --cut: 46px;
  --bw: 3px;
  --frame: linear-gradient(180deg, var(--silver-hi) 0%, #aab5cf 42%, #e9eef8 52%, var(--silver-lo) 100%);
  --fill: radial-gradient(ellipse 70% 120% at 50% 0%, #2f55d8 0%, #0d2172 42%, #040b31 100%);
  --ink: var(--text);
  --letter: var(--gold);
  position: relative;
  min-height: 84px;
  display: flex;
  align-items: center;
  color: var(--ink);
  isolation: isolate;
}
.loz::before, .loz::after { content: ''; position: absolute; z-index: -1; }
.loz::before {
  inset: 0;
  background: var(--frame);
  clip-path: polygon(0 50%, var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%);
}
.loz::after {
  inset: var(--bw);
  background: var(--fill);
  clip-path: polygon(0 50%, calc(var(--cut) - 2px) 0, calc(100% - var(--cut) + 2px) 0, 100% 50%, calc(100% - var(--cut) + 2px) 100%, calc(var(--cut) - 2px) 100%);
}
.loz .gloss {
  position: absolute; inset: var(--bw); z-index: -1; pointer-events: none;
  clip-path: polygon(0 50%, calc(var(--cut) - 2px) 0, calc(100% - var(--cut) + 2px) 0, 100% 50%, 0 50%);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 80%);
}
.loz .letter { color: var(--letter); font-weight: 700; margin-right: .45em; flex: none; }
.loz .txt { flex: 1; min-width: 0; }

.loz.is-locked {
  --fill: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 48%, var(--gold-lo) 100%);
  --ink: #160a00;
  --letter: #fff6e0;
}
.loz.is-correct {
  --fill: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 50%, var(--green-lo) 100%);
  --ink: #ffffff;
  --letter: #eaffdd;
}
.loz.is-correct .txt, .loz.is-correct .letter { text-shadow: 0 1px 2px rgba(0,40,0,.6); }
.loz.is-dim { opacity: .45; }

@keyframes flashCorrect {
  0%, 24%, 52%, 80% { --fill: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 50%, var(--green-lo) 100%); }
  12%, 38%, 66% { --fill: radial-gradient(ellipse 70% 120% at 50% 0%, #2f55d8 0%, #0d2172 42%, #040b31 100%); }
}

/* Thin silver rail that runs behind every lozenge row. */
.rail { position: relative; }
.rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(160,176,214,0) 0%, #9fb0d6 6%, #eef3fd 50%, #9fb0d6 94%, rgba(160,176,214,0) 100%);
  z-index: -2;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }