/* The page's furniture: colours, the full-height stage, overlays and their cards, buttons, stats and fact rows.
   game.css draws the sky road on top of this. */
:root { --bg: #0d0e12; --panel: #16181f; --text: #f5f5f7; --muted: #a3a8b5; --accent: #f5a623; --cyan: #38e4ff; --good: #7dffb0; --bad: #ff3d81; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --skin-font: var(--theme-font, var(--font)); --kit-accent: #f5a623; }
/* Hebrew and Arabic are set in Rubik, every script on the page in one family (Teddy Bible §5.5.4, §10 rule 1). The theme's
   Latin display font (--theme-font, set by js/themes.js) is kept for English and Portuguese only. js/i18n.js loads Rubik
   for these two languages and sets <html lang dir> from the launch's ?lang=. */
:root:lang(he), :root:lang(ar) { --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --skin-font: var(--font); }
/* letter-spacing tears Arabic's joined letters apart and floats Hebrew's points between letters; uppercase means nothing
   to either script */
:lang(he) *, :lang(ar) * { letter-spacing: normal !important; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); height: 100vh; height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; overscroll-behavior: none; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.hud { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.stat { display: flex; flex-direction: column; min-width: 56px; }
.stat b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; padding: 12px; overflow: hidden; }
.msg { position: absolute; top: 12px; left: 50%; transform: translate(-50%, -10px); background: rgba(0,0,0,.6); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: .25s; pointer-events: none; z-index: 5; white-space: nowrap; }
.msg.show { opacity: 1; transform: translate(-50%, 0); }
.msg.good { color: var(--good); } .msg.bad { color: var(--bad); }
.overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8,9,14,.72); backdrop-filter: blur(6px); overflow: hidden; }
.overlay[hidden] { display: none; }
.panel { width: min(520px, 100%); margin: auto; text-align: center; background: rgba(14,16,22,.94); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 28px 28px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.panel__label { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.panel h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 6px; letter-spacing: -.03em; font-weight: 900; }
.panel h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 6px; letter-spacing: -.02em; font-weight: 900; }
.panel h1, .panel h2 { font-family: var(--skin-font); }
.panel p { color: #d8dbe3; margin: 0 0 14px; line-height: 1.5; font-size: 15px; }
.panel .muted { color: var(--muted); font-size: 13px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.stats div { background: rgba(255,255,255,.04); border-radius: 8px; padding: 10px; }
.stats span { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stats b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.btn { border: 0; border-radius: 6px; padding: 12px 24px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.btn--ghost { background: rgba(255,255,255,.1); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.18); }
.btn[hidden] { display: none; }
.progress { width: min(560px, 100%); height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin: 4px 0 8px; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--good)); transition: width .25s; }
.progress i.warn { background: linear-gradient(90deg, #f5a623, #ff3d81); }
.asset { width: 100%; height: 100%; object-fit: contain; display: block; }
.asset--text { display: grid; place-items: center; font-size: 11px; font-weight: 700; text-align: center; color: #fff; }
/* facts never scroll: two columns where there is room, at most six rows, and the finish card splits answers and
   discoveries into two tabs so every question's review stays reachable on a phone */
.facttabs { display: flex; gap: 8px; justify-content: center; margin: 2px 0 6px; }
.facttabs[hidden] { display: none; }
.facttab { font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #d9ecff; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.25); border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.facttab.on { color: #10243f; background: #ffe27a; border-color: #ffe27a; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; margin: 10px 0; text-align: start; }
.fact { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: 13px; line-height: 1.3; }
.fact:nth-child(n+7) { display: none; }
.fact img { width: 36px; height: 36px; flex: none; border-radius: 8px; }
.fact b { color: #fff; }
@media (max-width: 900px) {
  .hud { order: 10; width: 100%; justify-content: space-between; gap: 8px; }
  .stat { min-width: 0; } .stat b { font-size: 15px; }
  .panel { padding: 16px 14px 14px; } .panel h1 { font-size: 1.7rem; } .panel h2 { font-size: 1.4rem; } .panel p { font-size: 13.5px; margin-bottom: 10px; }
  .stats { margin: 10px 0; gap: 8px; } .stats b { font-size: 18px; }
  .facts { grid-template-columns: 1fr; } .fact { font-size: 12.5px; padding: 5px 7px; }
  .stage { padding: 8px; }
}
@media (max-height: 700px) { .panel { padding-top: 16px; padding-bottom: 14px; } .panel h1 { margin-bottom: 4px; } }