/* Game kit — shared styles for the course's games (Oct 2026).
   The look follows the films and the model: paper and ink, Newsreader for words that matter,
   Schibsted Grotesk for the interface, IBM Plex Mono for labels, the sea line with its hatching,
   and colour kept for the course model (outcomes blue, activities green, assessment rust).
   A game runs in .g-stage, which fills the window; its cover and end screens are .g-screen. */

:root {
  --paper: #f5f2ea;
  --card: #fcfaf4;
  --inset: #efeadd;
  --ink: #23261f;
  --ink-soft: #474b40;
  --muted: #6b6557;
  --hair: #ddd6c4;
  --hair-strong: #c9c1ab;
  --danger: #a8442c;
  --c-ilo: #34708b;
  --c-tla: #5d7b49;
  --c-assess: #a25e2e;
  --c-ilo-soft: #dfe8ec;
  --c-tla-soft: #e4eadc;
  --c-assess-soft: #f1e2d6;
  --text-green: #4c6a3a;
  --text-brown: #8e4f22;
  --font-ui: "Schibsted Grotesk", system-ui, sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.22, 0.8, 0.26, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
body.g-playing { overflow: hidden; }

/* paper grain over the whole window, static, as in the films */
.g-grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14  0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 0.07 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ---------- the stage ---------- */

.g-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.g-sea { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.g-fx { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.g-letter { position: absolute; left: 0; top: 0; white-space: pre; will-change: transform; }

/* ---------- the bar along the top ---------- */

.g-hud {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 20;
  height: 58px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.g-hud-left, .g-hud-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.g-hud-right { justify-content: flex-end; }
.g-hud a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair-strong); padding-bottom: 1px; }
.g-hud a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.g-icon-btn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s var(--ease-out);
}
/* the small buttons keep their size but get a tap area of about 44 px */
.g-icon-btn, .g-toggle { position: relative; }
.g-icon-btn::after { content: ""; position: absolute; inset: -6px; }
.g-toggle::after { content: ""; position: absolute; inset: -7px -4px; }
.g-icon-btn:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.g-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-icon-btn[aria-pressed="false"] .snd-on, .g-icon-btn[aria-pressed="true"] .snd-off { display: none; }

/* a switch in the bar, as the films' Slower and Captions */
.g-toggle {
  appearance: none;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--hair-strong);
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.g-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--card); }
.g-toggle:focus-visible { outline: 2px solid var(--c-ilo); outline-offset: 2px; }

/* ---------- buttons ---------- */

.g-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px 15px 24px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s, background 0.15s;
  box-shadow: 0 8px 22px rgba(35, 38, 31, 0.16);
}
.g-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(35, 38, 31, 0.2); }
.g-btn:active { transform: translateY(0); }
.g-btn-play {
  width: 0; height: 0;
  border-left: 13px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.g-btn.is-quiet { background: transparent; color: var(--ink); box-shadow: none; padding: 13px 22px; font-size: 16px; }
.g-btn.is-quiet:hover { background: var(--card); }
:where(.g-btn, .g-icon-btn, .g-link):focus-visible { outline: 2px solid var(--c-ilo); outline-offset: 3px; }

.g-key {
  display: inline-block;
  min-width: 1.7em;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  opacity: 0.7;
}

.g-link {
  color: var(--ink-soft);
  font-size: 15.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--hair-strong);
}
.g-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- cover and end screens ---------- */

.g-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.g-screen[hidden] { display: none; }
.g-screen.is-leaving { animation: g-leave 0.5s var(--ease-out) forwards; }
@keyframes g-leave { to { opacity: 0; transform: translateY(-24px); } }

.g-screen-body {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.g-eyebrow {
  margin: 0 0 20px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.g-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(64px, 11.5vw, 172px);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.g-title .w { display: inline-block; white-space: nowrap; }
.g-title .ch { display: inline-block; animation: g-drop 1s var(--ease-back) both; animation-delay: calc(var(--i) * 42ms + 120ms); }
.g-title em { font-style: italic; }
@keyframes g-drop {
  from { transform: translateY(-0.55em) rotate(-9deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.g-lead {
  margin: 26px 0 0 0;
  max-width: 33em;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.g-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }

.g-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 44px 0 0 0; padding: 0; list-style: none; max-width: 960px; }
.g-steps li { border-top: 1.5px solid var(--ink); padding-top: 12px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.g-steps b { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; color: var(--muted); }

.g-note { margin: 18px 0 0 0; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); }

/* ---------- the round wipe (as the films' chapter wipes) ---------- */

.g-wipe { position: fixed; inset: 0; z-index: 40; pointer-events: none; width: 100%; height: 100%; }
.g-wipe-shape { fill: var(--ink); }
.g-wipe-num { font-family: var(--font-display); font-size: 300px; font-weight: 500; fill: none; stroke: var(--paper); stroke-width: 2; }
.g-wipe-name { font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.32em; fill: var(--paper); }

/* ---------- a short message across the middle ---------- */

.g-toast {
  position: absolute;
  left: 50%;
  top: 74px;
  z-index: 25;
  max-width: min(640px, calc(100% - 32px));
  transform: translate(-50%, -10px);
  opacity: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  pointer-events: none;
}
.g-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- pause ---------- */

.g-pause {
  position: fixed;
  inset: 0;
  z-index: 38;
  display: grid;
  place-items: center;
  background: rgba(245, 242, 234, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.g-pause[hidden] { display: none; }
.g-pause-box { text-align: center; }
.g-pause-title { margin: 0 0 22px 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 56px; }

/* ---------- phones ---------- */

@media (max-width: 720px) {
  .g-hud { padding: 0 12px; height: 52px; gap: 8px; font-size: 11px; grid-template-columns: auto 1fr auto; }
  .g-hud-right { gap: 8px; }
  .g-wide { display: none; }   /* words a phone's bar has no room for */
  .g-screen-body { padding: 28px 18px 36px; }
  .g-lead { font-size: 18px; }
  .g-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
  .g-btn { font-size: 17px; }
  .g-pause-title { font-size: 42px; }
}

/* ---------- a phone held sideways: only during play (the cover and end screens scroll) ---------- */

.g-upright { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body.g-playing .g-upright {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px;
    background: var(--paper);
    text-align: center;
  }
  .g-upright svg { width: 56px; height: 56px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .g-upright p { margin: 0; font-family: var(--font-display); font-size: 24px; color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .g-title .ch { animation: none; }
  .g-screen.is-leaving { animation-duration: 0.01s; }
  .g-steps li { animation: none !important; }
}