/*
 * The game itself: screens, the writing box, the reveal.
 *
 * Shared colours, type and surfaces live in `theme.css`, which this page links
 * first. Anything here is particular to playing.
 */
/* One document, one visible screen. */
section { display: none; }
body[data-screen="loading"] section[data-when="loading"],
body[data-screen="join"]    section[data-when="join"],
body[data-screen="lobby"]   section[data-when="lobby"],
body[data-screen="writing"] section[data-when="writing"],
body[data-screen="waiting"] section[data-when="waiting"],
body[data-screen="alone"]   section[data-when="alone"],
body[data-screen="reveal"]  section[data-when="reveal"],
body[data-screen="gone"]    section[data-when="gone"] { display: block; }

label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--slate);
  margin: 16px 0 6px;
}
.card > label:first-child { margin-top: 0; }

input, textarea {
  font-family: var(--text);
  font-size: 17px; /* 16px or more, or iOS Safari zooms the page on focus */
  color: var(--ink);
  width: 100%;
  background: var(--canvas);
  border: 1.5px solid rgb(22 24 29 / 0.10);
  border-radius: var(--radius-btn);
  padding: 13px 14px;
}
/* The ring itself is theme.css's one rule. This is the field's own border
   going solid underneath it, which is the part that says "typing happens
   here"; it used to be the whole indicator, and a yellow glow on cream paper
   measures 1.4:1. */
input:focus-visible, textarea:focus-visible { border-color: var(--ink); }
textarea { resize: vertical; min-height: 92px; line-height: 1.45; }

.select {
  font-family: var(--text);
  font-size: 16px; /* 16px or more, or iOS Safari zooms the page on focus */
  font-weight: 600;
  color: var(--ink);
  width: 100%;
  min-height: 44px;
  background: var(--canvas);
  border: 1.5px solid rgb(22 24 29 / 0.10);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
}
.select:focus-visible { border-color: var(--ink); }

.code-input {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 7px;
  text-align: center;
  text-indent: 7px;
}

.code-chip {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 3px;
  background: var(--tape);
  border-radius: var(--radius-btn);
  padding: 1px 8px 2px;
}

.join-mark {
  display: block;
  width: 64px;
  height: 64px;
  margin: 2px auto 10px;
  filter: drop-shadow(0 5px 8px rgb(22 24 29 / 0.12));
}

/* MARK: Start or join */

.modes { display: flex; gap: 8px; margin-bottom: 14px; }
.mode {
  flex: 1;
  font-family: var(--text);
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1.5px solid rgb(22 24 29 / 0.12);
  background: var(--surface);
  color: var(--slate);
  cursor: pointer;
}
.mode[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

/* MARK: Host controls */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  font-family: var(--text);
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid rgb(22 24 29 / 0.12);
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
}
/* The yellow fill is the warmth; the ink edge is what makes the state legible
   without relying on a 1.39:1 difference in colour. */
.chips button[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--ink);
  color: var(--on-accent);
}

.switch {
  display: flex;
  align-items: center;
  /* The box is 22 and the row is what you actually tap, so the row is what has
     to be 44. Measured as 22 by 22 until the audit learned to look at the
     label a checkbox sits in. */
  min-height: 44px;
  gap: 10px;
  margin: 18px 0 2px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
.switch input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; flex: none; }

/* MARK: Avatar picker */

/*
 * Six across rather than eight, so each one is at least 44 by 44: the strict
 * target-size rule, and eight across came out at 34 on a phone. `auto-fill`
 * rather than a count, so a wider card gets more columns instead of bigger
 * buttons.
 */
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.palette button {
  aspect-ratio: 1;
  min-height: 44px;
  font-size: 21px;
  line-height: 1;
  padding: 0;
  background: var(--canvas);
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
/* Ink, not the signature yellow. The chosen one has to be *visible* as the
   chosen one, and yellow on cream measures 1.39:1, so the picker had no
   readable selection at all. The glow stays as the warm part. */
.palette button[aria-checked="true"] {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgb(232 175 23 / 0.45);
}

/* MARK: People */

.players { list-style: none; padding: 0; margin: 10px 0 0; }
.players li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgb(22 24 29 / 0.07);
}
.players li:first-child { border-top: none; }

.avatar {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  background: var(--canvas-deep);
  border: 2px solid var(--author, var(--slate));
}
.who { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.who small { display: block; font-size: 12px; font-weight: 400; color: var(--slate); }

.tag {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--slate);
}
.tag.done { color: var(--teal); }

.poke {
  flex: none;
  font-family: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--canvas-deep);
  border: none;
  color: var(--ink);
  cursor: pointer;
}
.poke:disabled { opacity: 0.45; cursor: default; }

/* MARK: Writing */

.roundbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 2px 2px 10px;
}
.roundbar .muted { font-weight: 600; letter-spacing: 0.4px; text-transform: none; }
/* A unit symbol keeps its case even where the label around it does not. */
.roundbar .unit { text-transform: none; }

.meter { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.count { font-size: 13px; font-weight: 700; color: var(--slate); font-variant-numeric: tabular-nums; }
.count[data-full="true"] { color: var(--amber); }

.sparks { list-style: none; padding: 0; margin: 12px 0 0; }
.sparks li { margin-top: 8px; }
.sparks button {
  font-family: var(--text);
  font-size: 15px;
  text-align: left;
  width: 100%;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1.5px dashed rgb(22 24 29 / 0.18);
  border-radius: var(--radius-btn);
  color: var(--ink);
  cursor: pointer;
}
.sparks button:hover { border-color: var(--accent); background: var(--canvas-deep); }

.error { color: var(--danger); font-size: 14px; font-weight: 600; margin-top: 10px; }

/* A way out of a game in progress. Deliberately plain: it sits on the same
   screen as "Pass it on" and must not compete with it. */
.btn.quiet {
  background: none;
  color: var(--slate);
  border: none;
  box-shadow: none;
  font-weight: 600;
  font-size: 14px;
  min-height: 44px;
  margin-top: 4px;
}
.btn.quiet:hover:not(:disabled) { background: none; color: var(--danger); }
.btn.quiet[data-armed="true"] { color: var(--danger); font-weight: 700; }

.leftnote {
  font-size: 13px;
  color: var(--slate);
  text-align: center;
  margin-top: 10px;
}

.nudge-note {
  background: var(--accent);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-btn);
  padding: 11px 14px;
}

/* MARK: Reveal */

.story { margin-bottom: 14px; }
.story h2 { margin-bottom: 10px; }
.story ol { list-style: none; padding: 0; margin: 0; }
.story li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 16px;
  line-height: 1.45;
}
.story li::before {
  content: "";
  flex: none;
  width: 4px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--author, var(--slate));
  align-self: stretch;
}
.story .by { display: block; font-size: 12px; color: var(--slate); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* MARK: The reader's own language */

/*
 * The pill itself is in theme.css, which both pages load. What is only true
 * here is when it goes away: once the writing starts, nobody is changing
 * settings, and a menu over the prompt is one more thing to hit by accident.
 */

/* Writing, revealing and the loading flash: no settings, no distraction. */
body[data-screen="writing"] .ui-language,
body[data-screen="reveal"] .ui-language,
body[data-screen="loading"] .ui-language { display: none; }

/* And with the pill gone, the page starts at the top again rather than leaving
   a band of nothing where it used to be. */
body[data-screen="writing"],
body[data-screen="reveal"],
body[data-screen="loading"] { padding-top: max(20px, env(safe-area-inset-top)); }