/* Shared styling for /fun.
 *
 * The brief for this section was "fun", and the temptation with that brief is
 * colour, emoji and a jauntier typeface. BRAND.md says decoration is suspicious
 * by default and that interesting needs a justification, so none of that is
 * here. This is the same paper, the same ink, the same single orange and the
 * same two typefaces as /tools. A dry, well-made game reads as confident; a
 * jazzy one reads as a serious firm trying to seem approachable.
 */

:root {
  --paper: #F0E9DC;
  --paper-2: #E8DFCC;
  --ink: #141414;
  --ink-2: #2A2724;
  --ink-muted: #5A5347;
  --orange: #DF5911;
  --orange-deep: #B8431A;
  --rule: #B3A887;
  /* drawn-controls.css wants this and falls back if it is absent; declaring it
     keeps the pencil marks the same graphite as the rest of the section. */
  --graphite: #33302A;
  --font-display: Newsreader, Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

/* Real text for screen readers and for search, with nothing on screen. Used by
   the room, whose objects say everything visually, and by the bookcase, where
   every one of 140 spines needs a name that can be read out loud. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
}

main { max-width: 46rem; margin: 0 auto; padding: 4rem 1.5rem; }

h1 { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.15; margin: 0 0 1rem; }
h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 2.5rem 0 .75rem; }
a { color: var(--orange); }

.lede { color: var(--ink-muted); font-size: 1.05rem; margin: 0 0 2.5rem; max-width: 34rem; }

/* Mirrors .tool-top from /tools so a visitor arriving from either section meets
   the same way back. The control itself is .btn-drawn from
   /assets/drawn-controls.css: Shaun's 2026-08-20 rule is that no flat orange
   chrome ships anywhere on absolv.ai, and this section was the last place still
   painting a solid orange fill on hover. */
.fun-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.15rem;
  margin: 0 0 1.9rem; padding: 0 0 1.15rem; border-bottom: 1px solid var(--rule);
}
.fun-top .btn-drawn { flex: none; font-size: .95rem; padding: .7rem 1.35rem; }
/* The margin, not the button's flex gap: drawn-controls.js moves the arrow
   and the label into one .dc-lbl span, so they stop being flex children. */
.fun-top .btn-drawn i { font-style: normal; font-size: 1.05em; line-height: 1; margin-right: .45em; }
.fun-what { margin: 0; flex: 1 1 21rem; min-width: 0; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.4; color: var(--ink-2); }

/* The index cards. Deliberately not a grid of tiles: a short hand-ordered list
   reads as a shelf rather than a feed, which is the point of a section that
   makes no promise about what arrives next. */
.shelf { list-style: none; margin: 0 0 3rem; padding: 0; }
.shelf li { border-top: 1px solid var(--rule); }
.shelf li:last-child { border-bottom: 1px solid var(--rule); }
.shelf a {
  display: block; padding: 1.35rem .25rem; text-decoration: none; color: inherit;
  transition: background .15s, padding .15s;
}
.shelf a:hover, .shelf a:focus-visible { background: var(--paper-2); padding-left: .75rem; }
.shelf a:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.shelf .t { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; display: block; }
.shelf .d { color: var(--ink-muted); font-size: .95rem; display: block; margin-top: .2rem; }
.shelf .k {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--orange-deep); display: block; margin-bottom: .35rem;
}

/* Shared game furniture. */
.stage {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px;
  padding: 2rem 1.5rem; margin: 2rem 0; text-align: center; min-height: 20rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;
}
/* Every control in this section is .btn-drawn from /assets/drawn-controls.css.
   There is deliberately no .btn rule here any more: a local flat-orange button
   is exactly what the 2026-08-20 decision removed from the rest of the site,
   and these pages kept it only because they were written on a branch the
   blocking hook does not scan. Only the row layout is local. */
.btn-row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.hud {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 1px solid var(--rule); padding-bottom: .6rem; margin-bottom: .5rem;
}
.hud strong { font-size: 1.1rem; color: var(--ink); font-weight: 600; }

.q { font-family: var(--font-display); font-size: 3rem; line-height: 1.1; margin: 0; }
.prompt { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.35; margin: 0; }
.reveal { font-size: .98rem; color: var(--ink-2); margin: 0; min-height: 3.2rem; }
.reveal b { color: var(--ink); }
.verdict { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.verdict.right { color: #1F6B3A; }
.verdict.wrong { color: var(--orange-deep); }

input[type=text], input[type=number] {
  font-family: var(--font-mono); font-size: 1.6rem; text-align: center;
  width: 100%; max-width: 12rem; margin: 0 auto; padding: .6rem .75rem;
  border: 2px solid var(--rule); border-radius: 5px; background: var(--paper); color: var(--ink);
}
input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-color: var(--orange); }
input.name { font-size: 1rem; max-width: 14rem; }

.score-big { font-family: var(--font-display); font-size: 4.5rem; line-height: 1; margin: 0; }
.score-sub { color: var(--ink-muted); margin: 0; }
.pct { font-family: var(--font-display); font-size: 1.6rem; margin: 0; }
.pct b { color: var(--orange-deep); }

table.board { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: .5rem; }
table.board th, table.board td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--rule); }
table.board th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; }
table.board td.n { text-align: right; font-family: var(--font-mono); }
table.board tr.you td { background: var(--paper); font-weight: 700; }

.note { color: var(--ink-muted); font-size: .88rem; }

/* Essays. One column, generous measure, no sidebar and no author box: the nav
   already says whose site this is, and BRAND.md rule 4 says do not repeat
   yourself across a view. */
.essay { max-width: 36rem; }
.essay p { margin: 0 0 1.15rem; font-size: 1.04rem; line-height: 1.72; }
.essay ul { margin: 0 0 1.6rem; padding-left: 1.1rem; }
.essay li { margin: 0 0 .5rem; line-height: 1.62; }
.essay a { color: var(--orange-deep); overflow-wrap: anywhere; }

.essay h2 {
  font-size: 1.42rem; line-height: 1.25; margin: 2.6rem 0 .9rem;
  display: flex; gap: .7rem; align-items: baseline;
}
/* The section number sits in the margin rather than in the sentence, so the
   heading reads as a title and not as a list item. */
.essay h2 .n {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 500;
  color: var(--orange-deep); flex: none; min-width: 1.4rem;
}
.essay h2:first-child { margin-top: .5rem; }

@media (max-width: 34rem) {
  .essay h2 { font-size: 1.22rem; }
  .essay p { font-size: 1rem; }
}

footer {
  max-width: 46rem; margin: 3rem auto 0; padding: 2rem 1.5rem;
  border-top: 1px solid var(--rule); color: var(--ink-muted); font-size: .9rem;
}
footer a { color: var(--orange-deep); }

@media (max-width: 34rem) {
  main { padding: 2.5rem 1.15rem; }
  h1 { font-size: 1.9rem; }
  .q { font-size: 2.4rem; }
  .score-big { font-size: 3.4rem; }
  .fun-what { flex-basis: 100%; font-size: .95rem; }
  .fun-top .btn-drawn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .shelf a:hover { padding-left: .25rem; }
}