/* Guessius — mobile-first, no framework, no web fonts, no external requests. */

:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --text: #14161a;
  --text-soft: #61666e;
  --line: #e4e2dd;

  --accent: #d4622a;
  --accent-text: #ffffff;
  --accent-soft: #f6e2d6;

  --correct: #1f7a4d;
  --close: #9a6b12;
  --incorrect: #a3402c;

  --radius: 999px;
  --shadow: 0 1px 2px rgb(20 22 26 / 8%), 0 8px 24px rgb(20 22 26 / 8%);
  --shadow-press: 0 1px 2px rgb(20 22 26 / 10%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --surface: #1d2026;
    --text: #f2f1ef;
    --text-soft: #9aa0a9;
    --line: #2e323a;

    --accent: #f0834c;
    --accent-text: #1a1207;
    --accent-soft: #3a2418;

    --correct: #5cc98d;
    --close: #e0b352;
    --incorrect: #f08a72;

    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 32%);
    --shadow-press: 0 1px 2px rgb(0 0 0 / 45%);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  /* minmax(0, …) rather than a bare auto column: with `place-items: center` the
     column would size to the item's max-content, and the card strip's content
     is thousands of pixels wide. That widened the whole page instead of
     scrolling inside the strip. */
  grid-template-columns: minmax(0, 30rem);
  justify-content: center;
  align-items: center;
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));

  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.app {
  width: 100%;
  max-width: 30rem;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  text-align: center;
}

[hidden] {
  display: none !important;
}

/* ---- Reveal ---------------------------------------------------------- */

.reveal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reveal__headline {
  margin: 0;
  font-size: clamp(1.5rem, 7vw, 2.125rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.reveal__temp {
  display: inline-block;
  font-size: clamp(2.75rem, 15vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.reveal__note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.875rem;
}

/* ---- Guess ----------------------------------------------------------- */

.guess {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.guess__prompt {
  color: var(--text-soft);
  font-size: 1rem;
}

.hint {
  margin: 0;
  min-height: 1.25rem;
  color: var(--text-soft);
  font-size: 0.8125rem;
}

/* ---- Card strip ------------------------------------------------------ */

.strip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.strip__track {
  flex: 1;
  min-width: 0;

  display: flex;
  gap: 0.5rem;
  /* Free horizontal scrolling with momentum — deliberately no scroll-snap, so
     a flick glides rather than paging. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  /* Room for the first and last card to reach the middle of the track. */
  padding: 0.75rem calc(50% - 2.25rem);

  scrollbar-width: none;
  /* The strip reads as a row of choices; a scrollbar under it just looks like
     a bug. Native scrolling stays fully intact. */
  -ms-overflow-style: none;

  /* Fade both ends so it's obvious the row continues past the edge. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.strip__track::-webkit-scrollbar {
  display: none;
}

.card {
  flex: 0 0 auto;
  display: grid;
  place-items: center;

  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 1.125rem;

  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-press);

  font: inherit;
  cursor: pointer;
  /* Kills the double-tap zoom delay without blocking either pan axis — the
     strip still scrolls horizontally and the page still scrolls vertically. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 120ms ease, background-color 120ms ease, color 120ms ease;
}

.card__value {
  /* Sized against the widest label the range can produce — a negative
     two-digit value like -30 — which lands at 61px inside the 72px card. */
  font-size: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.card:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

/* The confirmation beat between the tap and the reveal. */
.card[data-chosen='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  transform: scale(1.06);
  box-shadow: var(--shadow);
}

/* Once a guess is in, only submitting is over. The strip stays scrollable and
   the other cards stay legible, so the player can go and look at where the
   real answer sat relative to what they picked. */
.strip__track[data-guessed='true'] .card {
  cursor: default;
}

.strip__arrow {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);

  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.strip__arrow:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

/* Thumbs reach the middle of a phone screen far more easily than the edges,
   and the strip already scrolls by touch there. */
@media (pointer: coarse) {
  .strip__arrow {
    display: none;
  }
}

/* ---- Result ---------------------------------------------------------- */

.result {
  display: block;
  min-height: 3rem;
  font-size: 1.0625rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.result[data-verdict] {
  font-weight: 500;
}

.result[data-verdict='correct'] {
  color: var(--correct);
}
.result[data-verdict='close'] {
  color: var(--close);
}
.result[data-verdict='incorrect'] {
  color: var(--incorrect);
}

/* ---- Loading & error ------------------------------------------------- */

.skeleton {
  border-radius: 0.75rem;
  background: var(--line);
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton--headline {
  width: 100%;
  height: clamp(3.5rem, 18vw, 5.5rem);
}

.skeleton--line {
  width: 60%;
  height: 1.25rem;
}

@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}

.error__message {
  margin: 0;
  font-size: 1.125rem;
}

.button {
  min-height: 2.75rem;
  padding: 0.625rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.button:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}

/* ---- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}