/* ================= MENU ================= */
#screen-menu { align-items: center; justify-content: center; padding: 16px; }
.menu-card {
  width: min(460px, 94vw);
  background: var(--sheen-card);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard), var(--shadow-soft);
  padding: 24px 20px 20px;
  text-align: center;
}
/* Everything on this screen scales with the viewport so the card still fits a
   360x640 phone without scrolling. It used to overflow by 93px there. */
/* Decorative only. It must never take a click: the bob animation puts a
   transform on it, which creates a stacking context, which painted this
   full-width block on top of the absolutely-positioned back button and
   swallowed everything but its top 2px. */
.logo {
  font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1;
  animation: bob 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bob { 50% { transform: translateY(-9px) rotate(-6deg); } }
.title {
  display: inline-block;
  font-size: clamp(2.1rem, 11.5vw, 2.9rem); margin: 10px 0 2px; color: var(--ink);
  /* sticker-style hard offset, the type equivalent of the button shadow */
  text-shadow: 3px 3px 0 var(--bronze);
  padding-bottom: 4px;
}
.tagline {
  color: var(--ink-soft); margin: 12px 0 16px; font-weight: 700;
  font-size: 0.88rem; line-height: 1.4;
}

.menu-buttons { display: flex; flex-direction: column; gap: 12px; }
.menu-buttons .btn { padding: 14px 16px; font-size: 1.05rem; }
.btn-emoji { font-size: 1.7rem; }
.btn-labels { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.btn-labels b { font-family: "Archivo Black", sans-serif; text-transform: uppercase; letter-spacing: 0; font-size: 1.05rem; }
/* 0.85 (not 0.75): on the rose primary button the ink label composites to
   4.9:1 here, where 0.75 drops it under the 4.5:1 floor. */
.btn-labels small { font-weight: 600; opacity: 0.85; font-size: 0.72rem; text-transform: none; letter-spacing: 0; margin-top: 2px; }

/* 2x2, full card width. As a stacked 220px column these sat narrower than the
   250px buttons above, which read as a misalignment, and cost four rows. */
.menu-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 0;
}
.menu-meta .chip { text-align: center; padding: 10px 6px; }
/* odd one out spans the row, so the grid never shows an empty cell */
#lang-toggle { grid-column: 1 / -1; }

.howto { margin-top: 16px; text-align: left; border-top: 2px dashed var(--ink-soft); padding: 4px 2px 0; }
.howto summary {
  cursor: pointer; font-family: "Archivo Black", sans-serif; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.82rem; padding: 11px 0; color: var(--ink);
}
.howto ul { margin: 0 0 12px; padding-left: 18px; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }
.howto b { color: var(--ink); }

/* ================= ARCADE CATEGORY PICKER ================= */
#screen-arcade { align-items: center; justify-content: center; padding: 24px; }
.back-link {
  position: absolute; top: 10px; left: 10px; border: none; background: none;
  color: var(--ink-soft); font-family: "Inter", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; cursor: pointer;
  /* explicit stacking so it cannot fall behind a decorative sibling again */
  z-index: 2;
  /* 44px minimum touch target, matching the other controls */
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 6px 14px;
}
.back-link:hover { color: var(--accent-text); }
.menu-card { position: relative; }
.logo.small { font-size: 2.3rem; }
.cats-title { font-size: 1.6rem; margin: 10px 0 4px; color: var(--ink); }
.cat-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.cat-btn { padding: 15px 18px; font-size: 1.05rem; }

/* ================= GAME ================= */
#screen-game { flex-direction: column; }
/* The HUD and panel are deliberately compact: every pixel they give back goes
   straight into the globe, which is the thing the player is actually reading. */
.hud {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: var(--border);
  background: var(--sheen-card);
}
.hud-back {
  border: 2px solid var(--line); background: var(--sheen-quiet); color: var(--ink);
  width: 36px; height: 36px; border-radius: var(--radius); font-size: 0.9rem; cursor: pointer; font-weight: 800;
  box-shadow: 0 3px 0 var(--line);
  transition: transform 0.11s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.11s ease;
}
.hud-back:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--line); }
.hud-back:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.hud-score { display: flex; flex-direction: column; line-height: 1; }
.hud-label { font-size: 0.54rem; letter-spacing: 0.18em; color: var(--ink-soft); font-weight: 800; }
#hud-score { font-family: "Archivo Black", sans-serif; font-size: 1.25rem; margin-top: 1px; }
/* What you are playing, between the score and the lives. Two short lines
   rather than one long one: at 390px a single "ARCADE · FLAGS · NORMAL" does
   not fit beside a score and three life markers. */
.hud-meta {
  display: flex; flex-direction: column; line-height: 1.2;
  min-width: 0; justify-self: center; text-align: center;
  padding: 0 6px;
}
.hud-meta .hud-label,
.hud-sub {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.hud-sub {
  font-size: 0.55rem; letter-spacing: 0.08em; font-weight: 800;
  text-transform: uppercase; color: var(--ink);
}
/* Lives, progress and the combo badge share one right-hand slot. As separate
   grid columns the combo appearing mid-run stole width from the score and the
   mode readout, and they collided. */
.hud-right { display: flex; align-items: center; gap: 8px; justify-self: end; }
.hud-lives { font-size: 1.05rem; letter-spacing: 3px; color: var(--accent-text); font-weight: 900; }
.hud-lives .dead { color: var(--ink-soft); opacity: 0.4; }
/* a combo only exists while you are chaining correct answers, so it is green too */
.hud-combo {
  font-family: "Archivo Black", sans-serif; color: var(--on-accent);
  background: linear-gradient(180deg, #a8c47c, var(--ok)); border: 2px solid var(--line);
  padding: 5px 12px; border-radius: var(--radius-pill); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.02em;
  box-shadow: 0 3px 0 var(--line);
  animation: pop 0.3s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.hud-progress { font-family: "Archivo Black", sans-serif; color: var(--ink-soft); font-size: 0.9rem; }

/* narrow screens: the badge still reads as a multiplier without the word */
@media (max-width: 430px) {
  .hud-combo .combo-word { display: none; }
}

.stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }

/* ================= PANEL ================= */
.panel {
  background: var(--sheen-card);
  border-top: var(--border);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meter { display: flex; align-items: center; justify-content: space-between; }
.stopwatch {
  font-family: "Archivo Black", sans-serif; color: var(--ink-soft); font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.points-chip {
  font-family: "Inter", sans-serif; font-weight: 800; color: var(--on-accent);
  background: var(--sheen-primary);
  border: 2px solid var(--line);
  border-radius: var(--radius-pill); padding: 3px 11px; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.03em;
  box-shadow: 0 2px 0 var(--line);
}
.prompt { font-size: 1.18rem; font-weight: 400; margin: 0; text-align: center; color: var(--ink); line-height: 1.15; }

.guesses { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.guesses .guess {
  font-size: 0.76rem; font-weight: 700; color: var(--ink-soft);
  border: 2px solid var(--ink-soft); padding: 3px 12px; border-radius: var(--radius-pill); text-decoration: line-through;
}

.hint-log { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; min-height: 0; }
.hint-log .hint {
  font-size: 0.76rem; font-weight: 800; border: 2px solid var(--accent); color: var(--accent-text);
  background: var(--card);
  padding: 5px 12px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.03em;
  text-align: center; animation: pop 0.26s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.hint-log .hint.mono { font-family: ui-monospace, monospace; letter-spacing: 1px; text-transform: none; }
/* media hints are buttons that open the full-size view */
.hint-log button.hint {
  font-family: inherit; font-size: 0.76rem; cursor: zoom-in;
  box-shadow: 0 3px 0 var(--line);
  transition: transform 0.11s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.11s ease;
}
.hint-log button.hint:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--line); }
.hint-log button.hint:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.hint-log .hint-media { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; }
.hint-log .hint-flag { width: 34px; height: auto; border: 2px solid var(--line); border-radius: 4px; display: block; }
.hint-log .hint-shape { width: 30px; height: 30px; display: block; }
.hint-log .hint-shape path { fill: var(--accent) !important; }

.answer-row { position: relative; }
.ac { position: relative; }
.answer-input {
  width: 100%; font-family: "Inter", sans-serif; font-weight: 700;
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus,
     which is the single worst viewport jump on mobile */
  font-size: 16px;
  padding: 11px 15px; border-radius: var(--radius); border: 2px solid var(--line);
  background: var(--card); color: var(--ink); outline: none;
  /* inset shading so the field reads as carved in, the inverse of the buttons */
  box-shadow: inset 0 3px 0 rgba(51, 35, 28, 0.12);
}
/* no opacity: --ink-soft is 5.8:1 on its own, and fading it drops it under AA */
.answer-input::placeholder { color: var(--ink-soft); text-transform: none; }
.answer-input:focus { border-color: var(--accent); }
.suggestions {
  list-style: none; margin: 8px 0 0; padding: 7px; position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  background: var(--sheen-card); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-hard), var(--shadow-soft);
  z-index: 8; max-height: 42vh; overflow: auto;
}
.suggestions li { padding: 10px 13px; border-radius: var(--radius-pill); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.suggestions li.active, .suggestions li:hover { background: var(--accent); color: var(--on-accent); }
.suggestions li.active .ac-sub, .suggestions li:hover .ac-sub { color: var(--on-accent); opacity: 0.85; }
.suggestions li.ac-empty { cursor: default; color: var(--ink-soft); font-weight: 600; justify-content: center; }
.suggestions li.ac-empty:hover { background: none; color: var(--ink-soft); }
.ac-name { font-weight: 800; }
.ac-sub { font-size: 0.78rem; color: var(--ink-soft); }

.controls { display: flex; gap: 10px; }
/* 44px min-height keeps these a comfortable touch target even while compact */
.controls .btn { flex: 1; padding: 10px; font-size: 0.86rem; min-height: 44px; }

/* ================= RESULTS ================= */
#screen-results { align-items: center; justify-content: center; padding: 24px; }
.results-card {
  width: min(440px, 94vw); background: var(--sheen-card); border: var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hard), var(--shadow-soft);
  padding: 32px 26px; text-align: center;
}
#results-title { font-size: 2.2rem; margin: 0 0 8px; color: var(--ink); text-shadow: 3px 3px 0 var(--bronze); }
.results-score { margin: 14px 0 18px; }
#results-score { font-family: "Archivo Black", sans-serif; font-size: 4rem; line-height: 1; color: var(--accent-text); }
.results-score small { display: block; color: var(--ink-soft); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.66rem; margin-top: 4px; }
.results-stats { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; }
.results-stats b { color: var(--ink); font-family: "Archivo Black", sans-serif; }
.results-sub { margin: -4px 0 16px; color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; line-height: 1.4; }

/* Finishing every country in a mode is the rarest thing in the game, so it gets
   an ending that does not look like any other: a gold card instead of the usual
   cream one, a spinning globe, and a title that reads as an award. */
.results-card.results-triumph {
  background: linear-gradient(160deg, var(--custard), var(--bronze));
  border-color: var(--ink);
  box-shadow: var(--shadow-hard), 0 0 0 6px var(--sage), var(--shadow-soft);
}
/* The gold card is the same colour in both themes, so its text has to be too:
   --ink flips to cream in dark mode, which would put cream on custard. --umber
   is the fixed palette brown, and it measures 9.3:1 on the custard end of the
   gradient and 6.8:1 on the bronze end. */
.results-triumph #results-title { color: var(--umber); text-shadow: 3px 3px 0 var(--cream); }
.results-triumph #results-score,
.results-triumph .results-sub,
.results-triumph .results-stats,
.results-triumph .results-stats b,
.results-triumph .results-score small { color: var(--umber); }
/* the ghost button borrows page ink too, and it sits on the gold card */
.results-triumph .btn-ghost { color: var(--umber); }
.results-triumph .btn-secondary { background: var(--cream); color: var(--umber); border-color: var(--umber); }
.triumph-mark {
  font-size: 3.4rem; line-height: 1; margin-bottom: 6px;
  animation: triumph-spin 6s linear infinite;
  filter: drop-shadow(3px 3px 0 var(--cream));
}
@keyframes triumph-spin {
  from { transform: rotate(-8deg) scale(1); }
  50%  { transform: rotate(8deg) scale(1.08); }
  to   { transform: rotate(-8deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .triumph-mark { animation: none; } }
/* Title and date: ordinary text, free to wrap. Kept out of the pre block below
   because at the grid's type size a line like
   "Atlas Arcade · Desafio Diário 28/07/2026" simply ran off the card. */
.share-head {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card-2); border: 2px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px 14px 8px; margin: 0;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 0.82rem;
  color: var(--ink); line-height: 1.35;
  overflow-wrap: anywhere;
  box-shadow: inset 0 3px 0 rgba(51, 35, 28, 0.12);
}
.share-head span:last-child { color: var(--ink-soft); font-weight: 600; }
.share-grid {
  font-size: 1.35rem; line-height: 1.35; background: var(--card-2);
  border: 2px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  padding: 4px 14px 14px; margin: 0 0 18px;
  /* pre-wrap, not pre: five cells a row never needs to wrap, but if a narrow
     screen ever forces it the block still stays inside the card */
  white-space: pre-wrap; font-family: ui-monospace, monospace;
}
.results-buttons { display: flex; flex-direction: column; gap: 12px; }

/* ================= responsive ================= */
@media (min-width: 780px) {
  #screen-game { max-width: 900px; margin: 0 auto; }
  .prompt { font-size: 1.4rem; }
  .panel { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
}

/* Desktop: the menu stops being a 460px column floating in an empty page and
   becomes an asymmetric split (brand left, actions right). Everything below
   1024px keeps the single-column mobile layout untouched. */
@media (min-width: 1024px) {
  .menu-card {
    width: min(980px, 92vw);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    align-items: start;
    text-align: left;
    padding: 52px 48px;
  }
  .logo { font-size: 4.8rem; }
  .title { font-size: 4.2rem; margin-top: 18px; text-shadow: 5px 5px 0 var(--bronze); }
  .tagline { margin-bottom: 0; font-size: 1rem; }
  .btn-labels { text-align: left; }
  .menu-meta { gap: 11px; margin-top: 28px; }
  .howto { margin-top: 28px; }

  /* the picker uses a different layout family from the menu split: a 2-up grid */
  #screen-arcade .menu-card {
    display: block;
    width: min(760px, 92vw);
    text-align: center;
  }
  #screen-arcade .cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  /* 5 categories in a 2-col grid: the first spans both so no cell is left empty */
  #screen-arcade .cat-grid .cat-btn:first-child { grid-column: 1 / -1; }
}

/* ================= DIFFICULTY SELECTOR ================= */
/* A segmented control rather than three separate buttons: the choices are
   mutually exclusive and belong to one decision. */
.diff-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 8px;
}
.diff-btn {
  font-family: "Inter", sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 0.8rem; padding: 11px 6px; min-height: 44px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--sheen-quiet); color: var(--ink); cursor: pointer;
  box-shadow: 0 3px 0 var(--line);
  transition: transform 0.11s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.11s ease;
}
.diff-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--line); }
.diff-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.diff-btn.on { background: var(--sheen-primary); color: var(--on-accent); }
.diff-note {
  margin: 0 0 4px; color: var(--ink-soft); font-weight: 600;
  font-size: 0.78rem; line-height: 1.35; min-height: 2.1em;
}

/* ================= ICON + LABEL BUTTONS ================= */
/* Buttons that pair an icon with a label lay out as a fixed icon column plus a
   flexible label column, rather than the centred flex row .btn uses by default.
   Centring the pair as a group made each icon's position depend on how long its
   label was, so the icons drifted 39px down the menu and 34px down the picker
   instead of forming a column. */
.menu-buttons .btn,
.btn.cat-btn {
  display: grid;
  /* Fixed track widths, identical on every button, and the pair is centred as a
     block. That is what lets the icons line up AND the content sit centred: with
     a flexible label column the block width would follow the text and the icons
     would drift again. */
  grid-template-columns: 2.1rem minmax(0, 13rem);
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.menu-buttons .btn .btn-labels,
.btn.cat-btn .btn-labels { align-items: center; text-align: center; }
.menu-buttons .btn .btn-emoji,
.btn.cat-btn .btn-emoji {
  justify-self: center;
  line-height: 1;
}

/* ================= STATISTICS ================= */
.stats-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--sheen-quiet); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 10px 4px;
}
.stat-tile b { font-family: "Archivo Black", sans-serif; font-size: 1.25rem; line-height: 1; color: var(--ink); }
.stat-tile span {
  font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 800; color: var(--ink-soft); text-align: center; line-height: 1.2;
}
.stats-sub {
  font-family: "Archivo Black", sans-serif; text-transform: uppercase;
  font-size: 0.72rem; letter-spacing: 0.06em; margin: 4px 0 0; color: var(--ink);
}

/* One series, so one hue and no legend: the heading names it. Bars start at
   zero and are labelled directly, which doubles as the axis. */
.stats-dist { display: flex; flex-direction: column; gap: 3px; }
.dist-row { display: grid; grid-template-columns: 1.1rem 1fr 1.4rem; align-items: center; gap: 8px; }
.dist-key, .dist-val {
  font-family: ui-monospace, monospace; font-size: 0.7rem; font-weight: 700;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.dist-val { text-align: right; }
.dist-track { height: 14px; background: var(--chart-track); border-radius: 4px; }
/* Ink tint rather than a palette hue, so the bars stay a neutral single series
   and invert correctly with the theme. */
.dist-bar {
  display: block; height: 100%; background: var(--chart-bar);
  border-radius: 4px; min-width: 0;
}
/* The run just finished. The first attempt used --ok against a custard bar and
   measured 1.34:1: different hue, near-identical luminance, which is precisely
   the pair a colourblind or greyscale reader cannot separate. The deeper green
   is well clear of the neutral in lightness, and the row is bolded too, so the
   highlight never rests on colour alone. */
.dist-row.on .dist-bar { background: var(--chart-bar-on); }
.dist-row.on .dist-key,
.dist-row.on .dist-val { color: var(--ok-text); font-weight: 800; }
.stats-note { margin: 2px 0 0; font-size: 0.68rem; color: var(--ink-soft); line-height: 1.35; }