/* Estimate, in the MB Arcade style: Big Shoulders Display headings, ink / cream / blaze orange,
   hard-edged buttons, mono only for numbers and labels. The game screen itself stays still:
   no grain, no moving parts, only a 150ms fade.
   Everything is prefixed est- so it can live inside the Games page without clashing.
   Values come from the "Estimation game" section of DESIGN.md. */

:root {
  --est-bg: #16181d;         /* ink, the same as the personal site */
  --est-text: #f6f1e8;       /* cream, the same as the personal site */
  --est-hot: #ff5a1f;        /* fills: primary button, range, progress */
  --est-hot-text: #ff5a1f;   /* orange text on ink (5.7 : 1) */
  --est-on-hot: #16181d;
  --est-muted: #a8a5a1;      /* cream at 65% (7.2 : 1) */
  --est-line: #3a3b3e;       /* cream at 16%, never text */

  --est-head: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --est-display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --est-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
:root[data-theme="light"] {
  --est-bg: #f6f1e8;
  --est-text: #16181d;
  --est-hot-text: #16181d;   /* orange is only 2.8 : 1 on cream, so orange stays a fill and text goes ink */
  --est-muted: #59595a;      /* ink at 70% (6.2 : 1) */
  --est-line: #d6d2cb;
}

/* ---------- full-screen page ---------- */
.est-body {
  margin: 0; background: var(--est-bg); color: var(--est-text);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-x: clip;
}
.est-body *, .est-body *::before, .est-body *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- the game, wherever it is mounted ---------- */
.est {
  color: var(--est-text);
  font: 400 16px/1.5 var(--est-display);
  font-variation-settings: "wdth" 100, "opsz" 16;
  text-align: left;
}
.est *, .est *::before, .est *::after { box-sizing: border-box; margin: 0; padding: 0; }
:where(.est) button, :where(.est) input { font: inherit; color: inherit; }   /* :where = no specificity, so component colours win */
:where(.est) button { cursor: pointer; touch-action: manipulation; }
.est :focus-visible { outline: 2px solid var(--est-hot); outline-offset: 2px; }
.est em { font-style: normal; color: var(--est-hot-text); }

.est-muted { color: var(--est-muted); }
.est-small { font-size: 13px; }
.est-label {
  font-family: var(--est-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--est-hot-text); margin-bottom: 8px;
}
.est-link { color: var(--est-hot-text); text-underline-offset: 3px; }
.est-error { color: var(--est-hot-text); min-height: 24px; font-size: 13px; }

/* Top bar */
.est-bar {
  display: flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 16px;
  background: var(--est-bg); border-bottom: 1px solid var(--est-line);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
/* MB logo + game name: always there, always leads back to the menu */
.est-home {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 0; border: 0; background: none; color: var(--est-text); text-align: left;
}
.est-logo {
  display: inline-grid; justify-items: stretch; padding-right: 12px; border-right: 1px solid var(--est-line);
}
.est-logo-mb { font-family: var(--est-head); font-weight: 900; font-size: 28px; line-height: .74; letter-spacing: -0.01em; text-align: center; }
.est-logo-bar { height: 4px; margin-top: 4px; background: var(--est-hot); }
.est-home:hover .est-bar-title { color: var(--est-hot-text); }
.est-bar-space { flex: 1; align-self: stretch; }
.est-bar-title {
  display: flex; align-items: center;
  font-family: var(--est-head); font-weight: 900;
  font-size: 22px; text-transform: uppercase; letter-spacing: -0.01em;
}
.est-bar-title em { color: var(--est-hot-text); font-size: 1.1em; margin-left: 4px; }
.est-langs { display: flex; }
.est-lang {
  min-width: 44px; min-height: 44px; padding: 0 8px;
  background: none; border: 0; border-radius: 0;
  font-family: var(--est-mono); font-size: 13px; text-transform: uppercase; color: var(--est-muted);
  transition: color 150ms, background-color 150ms;
}
.est-lang.is-on { color: var(--est-text); text-decoration: underline; text-underline-offset: 4px; }
.est-lang:hover { color: var(--est-text); }

.est-view { padding: 32px 24px 48px; }
.est-fade { animation: est-fade 150ms ease-out; }
@keyframes est-fade { from { opacity: 0; } }

/* Embedded on the Games page: a rounded panel */
.est--embed { border: 1px solid var(--est-line); border-radius: 0; overflow: hidden; background: var(--est-bg); }
.est--embed .est-bar { padding: 0 16px 0 24px; }
.est--embed .est-view { padding: 32px clamp(24px, 4vw, 48px) 48px; }

/* The game's own page: sticky bar, then the game in a panel with the intro beside it */
.est--page .est-bar { position: sticky; top: 0; z-index: 2; padding: 0 clamp(16px, 4vw, 56px); }
.est-shell {
  max-width: 1200px; margin: 0 auto;
  padding: 48px clamp(24px, 4vw, 56px) 64px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 64px; align-items: start;
}
.est--page .est-view { border: 1px solid var(--est-line); border-radius: 0; padding: 32px clamp(24px, 4vw, 48px) 48px; }
.est-aside { position: sticky; top: 104px; }
.est-title {
  font-family: var(--est-head); font-weight: 900;
  font-size: clamp(56px, 5.4vw, 88px); line-height: 0.84; letter-spacing: 0; text-transform: uppercase;
  margin-bottom: 32px;
}
.est-title em { color: var(--est-hot-text); }
.est-lede { font-size: 20px; line-height: 1.3; max-width: 24em; margin-bottom: 32px; }
.est-rules { list-style: none; counter-reset: rule; margin-bottom: 32px; }
.est-rules li { counter-increment: rule; display: grid; grid-template-columns: 48px 1fr; padding: 12px 0; border-top: 1px solid var(--est-line); }
.est-rules li:last-child { border-bottom: 1px solid var(--est-line); }
.est-rules li::before { content: "0" counter(rule); font-family: var(--est-mono); font-size: 12px; color: var(--est-hot-text); padding-top: 4px; }

/* Phones and tablets: the game comes first, the intro underneath */
@media (max-width: 1000px) {
  .est-shell { grid-template-columns: 1fr; gap: 48px; padding: 0 0 64px; }
  .est--page .est-view { border: 0; border-radius: 0; padding: 32px 24px 16px; max-width: 640px; width: 100%; margin: 0 auto; }
  .est-aside { position: static; padding: 48px 24px 0; border-top: 1px solid var(--est-line); max-width: 640px; width: 100%; margin: 0 auto; }
  .est-title { font-size: 60px; }
  .est-lede { font-size: 18px; }
}

/* ---------- home ---------- */
.est-intro { font-size: 20px; line-height: 1.35; margin-bottom: 32px; max-width: 30em; }
.est-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.est-mode { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--est-text); }
.est-mode .est-label { margin-bottom: 0; }
.est-h3 {
  font-family: var(--est-head); font-weight: 900;
  font-size: 40px; line-height: 0.9; letter-spacing: -0.015em; text-transform: uppercase;
}
.est-mode .est-btn { align-self: flex-start; margin-top: auto; }
.est-mode .est-muted { margin-bottom: 16px; }
.est-calib { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--est-line); display: grid; gap: 4px; }
.est-foot { margin-top: 32px; display: grid; gap: 16px; }
.est-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.est-foot .est-row { margin-top: 0; }
.est-row .est-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Big condensed numbers: calibration %, daily total */
.est-big {
  font-family: var(--est-head); font-weight: 900;
  font-size: 88px; line-height: 0.85; letter-spacing: -0.02em; margin: 8px 0;
}
.est-big em { color: var(--est-hot-text); font-size: 0.5em; margin-left: 4px; }

/* ---------- buttons ---------- */
.est-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px;
  border-radius: 0; border: 1px solid var(--est-muted); background: none;
  font-family: var(--est-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.est-btn--secondary:hover { background: var(--est-text); color: var(--est-bg); border-color: var(--est-text); }
.est-btn--primary { background: var(--est-hot); border-color: var(--est-hot); color: var(--est-on-hot); font-weight: 600; }
.est-btn--primary:hover { background: var(--est-text); border-color: var(--est-text); color: var(--est-bg); }
.est-btn--quiet { min-height: 44px; border-color: transparent; padding: 0 12px; color: var(--est-muted); }
.est-btn--quiet:hover { color: var(--est-text); }
.est-wide { width: 100%; }
.est a.est-btn { color: var(--est-text); text-decoration: none; }

/* ---------- question ---------- */
.est-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--est-mono); font-size: 12px; text-transform: uppercase; color: var(--est-muted);
  margin: -12px 0 8px;
}
.est-steps { display: flex; gap: 4px; margin-bottom: 24px; }
.est-step { flex: 1; height: 6px; border-radius: 0; border: 1px solid var(--est-line); }
.est-step.now { border-color: var(--est-muted); }
.est-step.good { background: var(--est-hot); border-color: var(--est-hot); }
.est-step.ok { background: var(--est-text); border-color: var(--est-text); }
.est-step.miss { border-color: var(--est-muted); }
.est-q {
  font-weight: 600; font-variation-settings: "wdth" 85, "opsz" 96;
  font-size: 32px; line-height: 1.08; letter-spacing: -0.02em;
  margin-bottom: 8px; text-wrap: pretty;
}
.est-unit { margin-bottom: 24px; }

.est-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.est-field { min-width: 0; }
.est-field .est-label { color: var(--est-muted); }
.est-field input {
  width: 100%; height: 64px; padding: 0 16px;
  background: transparent; border: 1px solid var(--est-line); border-radius: 0;
  font-family: var(--est-mono); font-size: 24px; color: var(--est-text);
}
.est-field input::placeholder { color: var(--est-muted); font-size: 13px; }
.est-field input:focus { outline: 2px solid var(--est-hot); outline-offset: 0; border-color: transparent; }
.est-parsed { min-height: 24px; padding-top: 4px; font-family: var(--est-mono); font-size: 13px; color: var(--est-muted); overflow-wrap: anywhere; }
.est-parsed.bad { color: var(--est-hot-text); }

.est-chips { display: flex; gap: 8px; margin: 8px 0 4px; }
.est-chip {
  flex: 1; min-height: 44px;
  border: 1px solid var(--est-line); border-radius: 0; background: none;
  font-family: var(--est-mono); font-size: 13px; color: var(--est-muted);
  transition: color 150ms, border-color 150ms;
}
.est-chip:hover { color: var(--est-text); border-color: var(--est-muted); }
.est-form .est-btn--primary { margin-top: 8px; }

/* Menu: the daily as one big orange button, then the four endless levels */
.est-pick-daily, .est-pick-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%;
  text-align: left; cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.est-pick-daily {
  padding: 16px 24px 24px; border-radius: 0; border: 0;
  background: var(--est-hot); color: var(--est-on-hot); margin: 8px 0 32px;
}
.est-pick-daily:hover { background: var(--est-text); color: var(--est-bg); }
.est-pick-daily.is-done { background: none; color: var(--est-text); border: 1px solid var(--est-line); }
.est-pick-daily.is-done:hover { border-color: var(--est-text); }
.est-pick-top {
  display: flex; justify-content: space-between; width: 100%;
  font-family: var(--est-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}
.est-pick-name {
  font-family: var(--est-head); font-weight: 900;
  font-size: 40px; line-height: 0.95; letter-spacing: -0.015em; text-transform: uppercase;
}
.est-pick-sub { font-family: var(--est-mono); font-size: 12px; text-transform: uppercase; opacity: 0.85; }
.est-pick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.est-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.est-pick-btn {
  min-height: 96px; padding: 16px; border-radius: 0;
  border: 1px solid var(--est-line); background: none; color: var(--est-text);
}
.est-pick-btn .est-pick-name { font-size: 32px; margin-top: auto; }
.est-pick-btn .est-pick-sub { color: var(--est-muted); }
.est-pick-btn:hover { border-color: var(--est-text); }
.est-pick-btn.is-going { border-color: var(--est-hot); }
.est-pick-btn.is-going .est-pick-sub { color: var(--est-hot-text); }

/* Difficulty chips (endless) */
.est-levels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.est-level { flex: 0 1 auto; padding: 0 16px; }
.est-level.is-on { color: var(--est-on-hot); background: var(--est-hot); border-color: var(--est-hot); }
.est-mode .est-levels + .est-btn { margin-top: 0; }

/* Endless game summary */
.est-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0 8px; }
.est-stats div { border-top: 2px solid var(--est-text); padding-top: 8px; }
.est-stats dt { font-family: var(--est-mono); font-size: 12px; text-transform: uppercase; color: var(--est-muted); }
.est-stats dd { font-family: var(--est-head); font-weight: 900; font-size: 40px; line-height: 1; }
.est-stats dd em { color: var(--est-hot-text); font-size: 0.6em; }
.est-endgame { margin-top: 16px; }

/* "Play endless instead" under a daily question */
.est-switch { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--est-line); display: grid; justify-items: start; gap: 4px; }
.est-switch .est-btn--quiet { padding: 0; color: var(--est-hot-text); }
.est-switch .est-btn--quiet:hover { color: var(--est-text); }

/* ---------- reveal ---------- */
.est-reveal { display: grid; gap: 16px; }
.est-answer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; padding-top: 16px; border-top: 2px solid var(--est-text); }
.est-answer, .est-score-n {
  font-family: var(--est-head); font-weight: 900;
  font-size: 72px; line-height: 0.85; letter-spacing: -0.02em;
}
.est-answer { color: var(--est-hot-text); overflow-wrap: anywhere; }
.est-answer-unit { font-family: var(--est-display); font-weight: 600; font-size: 0.32em; letter-spacing: 0; color: var(--est-text); margin-left: 6px; }
.est-answer-row .est-label { margin-bottom: 8px; }
.est-answer-row .est-small { margin-top: 8px; }
.est-score { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; }
.est-score.is-miss .est-score-n { color: var(--est-muted); }
.est-score .est-small { font-family: var(--est-mono); text-transform: uppercase; font-size: 12px; }
.est-score.is-miss .est-small { color: var(--est-hot-text); }
.est-source { margin-bottom: 8px; }

/* Range bar */
.est-rbar { position: relative; padding: 32px 0 4px; }
.est-rbar-track { position: relative; height: 14px; border-radius: 0; background: var(--est-line); }
/* the gap between your guess (orange dot) and the answer (light bar) */
.est-rbar-range { position: absolute; top: 0; bottom: 0; border-radius: 0; background: var(--est-hot); opacity: 0.35; }
.est-rbar.is-miss .est-rbar-range { background: var(--est-muted); }
.est-rbar-guess { position: absolute; top: -4px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--est-hot); border: 3px solid var(--est-bg); }
.est-rbar.is-miss .est-rbar-guess { background: var(--est-muted); }
.est-rbar-mark { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; border-radius: 0; background: var(--est-text); }
.est-rbar-label { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--est-mono); font-size: 13px; white-space: nowrap; }
.est-rbar-scale { display: block; text-align: right; margin-top: 12px; font-family: var(--est-mono); font-size: 12px; text-transform: uppercase; color: var(--est-muted); }

/* ---------- daily results ---------- */
.est-total { font-size: 112px; }
.est-results { list-style: none; margin: 24px 0; }
.est-results li { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--est-line); }
.est-results li:last-child { border-bottom: 1px solid var(--est-line); }
.est-row-q { display: grid; gap: 4px; }
.est-row-score { font-family: var(--est-head); font-weight: 900; font-size: 32px; line-height: 0.9; }
.est-sq { width: 14px; height: 14px; margin-top: 4px; border-radius: 0; }
.est-sq.good { background: var(--est-hot); }
.est-sq.ok { background: var(--est-text); }
.est-sq.miss { border: 1px solid var(--est-muted); }
.est-share {
  font-family: var(--est-mono); font-size: 16px; white-space: pre-wrap;
  padding: 16px; margin-bottom: 12px;
  border: 1px solid var(--est-line); border-radius: 0;
  user-select: all; -webkit-user-select: all;
}
#est-copy-note { min-height: 24px; margin-top: 8px; }

/* Games page: freeze its film grain while the game is visible (set by app.js) */
html.est-calm body::after { animation-play-state: paused; }

/* ---------- narrow: follows the game's own width, so it also works in a side column ---------- */
.est { container: est / inline-size; }
.est-view { container: estview / inline-size; }
@container est (max-width: 560px) {
  .est-view { padding: 24px 24px 48px; }
}
@container estview (max-width: 440px) {
  .est-intro { font-size: 18px; }
  .est-modes { grid-template-columns: 1fr; gap: 32px; }
  .est-h3 { font-size: 34px; }
  .est-q { font-size: 26px; }
  .est-answer, .est-score-n { font-size: 56px; }
  .est-big { font-size: 72px; }
  .est-total { font-size: 88px; }
  .est-score { align-items: flex-start; text-align: left; }
  .est-stats { grid-template-columns: 1fr 1fr; }
  .est-pick-daily .est-pick-name { font-size: 34px; }
  .est-pick-btn .est-pick-name { font-size: 28px; }
}
/* Narrow phones: logo, name, EN/CZ/SK and Hide must all fit in one bar */
@media (max-width: 440px) {
  .est--page .est-bar { padding: 0 12px; gap: 4px; }
  .est-home { gap: 8px; }
  .est-logo { font-size: 20px; padding-right: 8px; }
  .est-bar-title { font-size: 18px; }
  .est-lang { min-width: 40px; padding: 0 4px; }
  }
@media (max-width: 600px) {
  .est--embed { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .est-fade { animation: none; }
}