/* Toddlerboard — the Teacherboard gunmetal-ice language on a board built for banging.
   E-ink variant (/eink): html.eink flips to white ground + Kaleido-bright inks; no
   translucency, no fades (alpha dithers on e-ink panels). */

:root {
  --chrome: #1d2a3a;   /* deep chrome (bg-deep) */
  --board: #253344;    /* the drawing ground — Teacherboard's board color */
  --raise: #334252;
  --line: rgba(255, 255, 255, 0.14);
  --text: #eef2f7;
  --dim: #a3b1c2;
  --faint: #7e8c9d;
  --ice: #a6d8f0;
  --glass: #a5c4e4;
  --sans: "Selawik", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}
html.eink {
  --chrome: #ffffff;
  --board: #ffffff;
  --raise: #ffffff;
  --line: #000000;
  --text: #000000;
  --dim: #000000;
  --faint: #333333;
  --ice: #000000;
  --glass: #000000;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--chrome);
  color: var(--text);
  font-family: var(--sans);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html.eink body { -webkit-font-smoothing: auto; }
button { font-family: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.hidden { display: none !important; }

/* ---------- landing ---------- */
#landing { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.landing-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 460px; }
.mark { font-size: 24px; font-weight: 300; letter-spacing: 0.36em; text-transform: uppercase; color: var(--ice); }
.tag { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--dim); margin-top: -8px; }
.cta {
  margin-top: 8px; padding: 16px 46px; background: var(--ice); color: var(--chrome);
  font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; border-radius: 4px;
}
html.eink .cta { background: #000; color: #fff; }
.fine { font-size: 12px; line-height: 1.65; color: var(--faint); }
.fine.dim { font-size: 11px; }

/* ---------- board chrome ---------- */
#board { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--board); }
.topbar {
  height: 48px; flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 12px; background: var(--chrome); border-bottom: 1px solid var(--line);
  touch-action: none;
}
.widthrow { flex: 1; max-width: 320px; display: flex; align-items: center; gap: 10px; }
.dot { flex: none; border-radius: 50%; background: var(--glass); }
.dot.s { width: 5px; height: 5px; }
.dot.l { width: 16px; height: 16px; }
#width { -webkit-appearance: none; appearance: none; flex: 1; height: 28px; background: transparent; }
#width::-webkit-slider-runnable-track { height: 3px; background: var(--line); border-radius: 2px; margin-top: 12px; }
#width::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--board); border: 1.5px solid var(--ice); margin-top: -11px;
}
#width::-moz-range-track { height: 3px; background: var(--line); }
#width::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--board); border: 1.5px solid var(--ice); }
#btn-exit {
  margin-left: auto; width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; color: var(--dim);
}
html.eink #btn-exit { color: #000; }

.under { flex: 1; display: flex; min-height: 0; }
/* LARGE squares filling the whole column (owner 2026-08-28, round 2: fixed 72px read
   too small — the six squares should span the full height, so the column's width IS
   one sixth of the board height). vh fallback first; dvh wins where supported. */
#palette { flex: none; display: flex; flex-direction: column; touch-action: none; width: calc((100vh - 48px) / 6); }
#palette { width: calc((100dvh - 48px) / 6); }
#palette button { flex: 1; width: 100%; border: 0; border-radius: 0; }
/* Selection: an inset ring — reads on every ink, both grounds. */
#palette button.on { outline: 3px solid rgba(255, 255, 255, 0.92); outline-offset: -7px; }
html.eink #palette button.on { outline-color: rgba(255, 255, 255, 0.92); }
html.eink #palette button[data-light].on { outline-color: rgba(0, 0, 0, 0.85); }

#stage { flex: 1; position: relative; min-width: 0; touch-action: none; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* ---------- exit gate ---------- */
#exit-overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 27, 36, 0.78);
}
html.eink #exit-overlay { background: #fff; }
.exit-card {
  width: min(420px, 86vw); display: flex; flex-direction: column; align-items: center; gap: 18px;
  background: var(--chrome); border: 1px solid var(--line); border-radius: 12px; padding: 28px;
}
.exit-title { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text); }
.exit-track { width: 100%; height: 52px; border-radius: 28px; background: var(--raise); position: relative; touch-action: none; }
html.eink .exit-track { background: #fff; border: 1px solid #000; }
.exit-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); pointer-events: none;
}
.exit-thumb {
  position: absolute; top: 5px; left: 5px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ice); color: var(--chrome); display: flex; align-items: center; justify-content: center;
  font-size: 18px; touch-action: none;
}
html.eink .exit-thumb { background: #000; color: #fff; }
.exit-count { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--dim); }

/* ---------- resume scrim (fullscreen fell away without the gate) ---------- */
#resume-overlay {
  position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  background: var(--board);
}
.resume-lab { font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); }

/* ---------- session over ---------- */
#end { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.end-card {
  width: min(430px, 92vw); display: flex; flex-direction: column; gap: 14px; text-align: center;
  background: var(--board); border: 1px solid var(--line); border-radius: 12px; padding: 32px 30px 26px;
}
html.eink .end-card { background: #fff; }
.end-title { font-size: 15px; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ice); }
.pitch { font-family: var(--serif); font-size: 14px; color: var(--dim); line-height: 1.65; }
.pitch a { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; }
.pitch a:hover { color: var(--text); }
.end-card .cta { margin-top: 8px; width: 100%; }
.quiet { font-size: 12px; color: var(--faint); text-decoration: underline; align-self: center; }