/* 20 Questions — provisional styling. Structure and rhythm are settled; sizes and palette are
   Cam's to tune (he judges absolute size, I judge ratios). Mobile-first, single column. */
:root {
  --bg: #12131a;
  --card: #1b1d27;
  --ink: #f2f3f7;
  --muted: #9aa0b4;
  --accent: #7c8cff;
  --accent-dim: #2c3160;
  --you: #24273a;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* ⚠ Must come before any rule that sets `display`. An AUTHOR rule beats the browser's built-in
   [hidden]{display:none} regardless of specificity, so `.row{display:flex}` silently un-hides
   every element carrying the hidden attribute — which showed BOTH the answer buttons and the ask
   box at once, in both modes. The portal hit exactly this with its greeting bar. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  /* Fixed to the viewport, not min-height: the transcript must scroll INSIDE itself, or a long
     game grows the document and pushes the answer buttons below the fold (Cam hit this on
     question 8). 100svh = the SMALL viewport height, so a phone's collapsing toolbars can never
     make the controls unreachable. */
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
}

#app {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Without min-height:0 a flex child refuses to shrink below its content, so the log would push
     the controls out instead of scrolling. This one line is what makes the whole thing work. */
  min-height: 0;
}

/* The play surface owns the remaining height and splits it: scrolling log on top, controls
   pinned underneath. Both it and .log need min-height:0 for the same reason as above. */
#play {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

h1 { font-size: 1.9rem; margin: 0 0 .25rem; letter-spacing: -.02em; }
.sub { color: var(--muted); margin: 0 0 1.5rem; }

/* --- mode picker ------------------------------------------------------------------------ */
.modes { display: flex; flex-direction: column; gap: .75rem; }

.mode {
  display: flex; flex-direction: column; gap: .3rem;
  text-align: left; padding: 1.1rem 1.2rem;
  background: var(--card); color: inherit;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; font: inherit;
  transition: border-color .15s, transform .15s;
}
.mode-title { font-weight: 600; font-size: 1.05rem; }
.mode-desc { color: var(--muted); font-size: .92rem; }

/* Touch browsers apply :hover on tap with no pointer-leave to clear it, so a tapped card stays
   lit after navigating back. Gate hover on a real pointer — the estate-wide fix from 2026-07-31. */
@media (hover: hover) {
  .mode:hover { border-color: var(--accent); transform: translateY(-1px); }
}

/* --- play surface ----------------------------------------------------------------------- */
.bar {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1rem; gap: 1rem;
}
.turns { color: var(--muted); font-size: .9rem; }
.link {
  background: none; border: none; color: var(--accent);
  font: inherit; font-size: .9rem; cursor: pointer; padding: 0;
}

.log {
  list-style: none; margin: 0 0 1rem; padding: 0 .25rem 0 0;
  display: flex; flex-direction: column; gap: .55rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Keep a rubber-band at the top of the transcript from scrolling the page behind it. */
  overscroll-behavior: contain;
}
.line {
  padding: .7rem .95rem; border-radius: var(--radius);
  max-width: 85%; width: fit-content;
}
.line.ai { background: var(--card); }
.line.you { background: var(--you); align-self: flex-end; color: var(--muted); }
.line.guess { background: var(--accent-dim); font-weight: 600; }
.line.final { background: none; padding-left: 0; font-weight: 600; max-width: 100%; }
.line.final-guess { background: var(--card); font-style: italic; }

/* --- input rows ------------------------------------------------------------------------- */
.row { display: flex; flex-wrap: wrap; gap: .5rem; }
.row button {
  flex: 1 1 auto; min-width: 5.5rem;
  padding: .8rem .9rem; font: inherit; font-weight: 600;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--accent-dim); border-radius: var(--radius);
  cursor: pointer;
}
.row button:disabled { opacity: .45; cursor: default; }
@media (hover: hover) {
  .row button:not(:disabled):hover { border-color: var(--accent); }
}

.ask { flex-wrap: nowrap; }
.ask input {
  flex: 1 1 auto; min-width: 0;
  padding: .8rem .9rem; font: inherit;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--accent-dim); border-radius: var(--radius);
}
.ask input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.ask button { flex: 0 0 auto; min-width: 0; }
.row button.secondary { background: none; color: var(--muted); }

.status { color: var(--muted); font-size: .9rem; min-height: 1.4em; margin: .75rem 0 0; }

.home {
  /* Trimmed from 1.5rem now that the viewport is fixed: every pixel here is taken from the
     transcript, which is the part with something to say. */
  margin-top: auto; padding-top: .9rem;
  color: var(--muted); text-decoration: none; font-size: .9rem; text-align: center;
}
@media (hover: hover) { .home:hover { color: var(--accent); } }