/* ============================================================
   Art Daily game chrome — sketchbook edition.
   Every drill wears this same paper: warm sheet, graphite ink,
   one watercolor accent (--game-accent), handwritten Caveat for
   the display type (shared with the page, OFL — /fonts/LICENSE.txt), mono for
   numbers and annotations. Paper-first: light is the default,
   dark is "night studio". Token NAMES match the Art Daily page
   so a game's canvas inks (--ink/--muted/--game-accent, read via
   getComputedStyle) follow the theme automatically.
   A game's own styles belong BELOW the marker at the end.
   ============================================================ */

@font-face {
  font-family: 'Caveat';
  src: url('../../fonts/caveat-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #F6EFDF;
  --card: #FDFAF1;
  --ink: #33291E;
  --muted: #766850; /* AA on the paper card (was #8A7B66 at ~3.9:1) */
  --line: #D9CBB2;
  --shadow: rgba(59, 47, 32, 0.16);
  --focus: #C4622F;
  --link: #3E6C8E;
  --prompt: #C4622F;

  --coral: #E26D5A;
  --sunny: #E9A93D;
  --mint: #56A382;
  --sky: #5C93B8;
  --lilac: #907BC0;
  --bubblegum: #D077A0;

  --hand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

  --game-accent: var(--sunny); /* TODO: pick this game's accent */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191511;
  --card: #221D16;
  --ink: #EFE7D7;
  --muted: #A39682;
  --line: #443A2C;
  --shadow: rgba(0, 0, 0, 0.5);
  --focus: #E88B4F;
  --link: #7FB2D8;
  --prompt: #E88B4F;

  --coral: #F08262;
  --sunny: #F2B345;
  --mint: #5FBF97;
  --sky: #6FADD6;
  --lilac: #A78FDF;
  --bubblegum: #E58AB5;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { height: 100%; scrollbar-color: var(--muted) var(--bg); }

/* Selecting text runs a highlighter over it. */
::selection { background: #F3DF7E; color: #33291E; }
:root[data-theme="dark"] ::selection { background: #B99A2E; color: #191511; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:is(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== The sheet (keeps the .term class so games need no markup edits) ===== */

.term {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px 14px 8px 12px;
  box-shadow: 0 2px 0 var(--shadow), 0 14px 30px -20px var(--shadow);
  text-align: left;
}
/* washi tape holding the sheet */
.term::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 34px;
  width: 84px;
  height: 22px;
  transform: rotate(-3deg);
  background:
    repeating-linear-gradient(105deg, transparent 0 7px, rgba(255, 255, 255, 0.28) 7px 12px),
    color-mix(in srgb, var(--game-accent) 55%, transparent);
  border-radius: 2px;
  box-shadow: 0 1px 2px var(--shadow);
  pointer-events: none;
  z-index: 1;
}

/* The old terminal title bar becomes a pencil label in the corner. */
.term-bar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px 0;
}
.dot { display: none; }
.term-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.term-body { padding: 14px 24px 26px; }

.promptline { margin: 0 0 10px; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.prompt { color: var(--prompt); font-weight: 900; user-select: none; }

/* ===== Topbar ===== */

.topbar { display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px; }
.topbar-spacer { flex: 1; }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 3px 10px 4px 9px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--shadow);
  transform: rotate(-0.6deg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.backlink:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 4px 0 var(--shadow); }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px 4px 9px 5px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  box-shadow: 0 2px 0 var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.iconbtn:hover { transform: translateY(-2px) rotate(2deg); box-shadow: 0 4px 0 var(--shadow); }

/* Light (default) shows the moon (click → dark); dark shows the sun. */
.ic-sun { display: none; }
:root[data-theme="dark"] .ic-sun { display: inline; }
:root[data-theme="dark"] .ic-moon { display: none; }

/* ===== Stage ===== */

.stage {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 20px 48px;
}
.stage.game-wide { max-width: 780px; }

.game-body { text-align: left; }

/* ===== HUD ===== */

.game-hud {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.game-name {
  margin: 0;
  font-family: var(--hand);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
}
.game-emoji { margin-right: 2px; font-size: 1.5rem; }
.game-tagline {
  margin: 2px 0 0;
  font-family: var(--hand);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--muted);
}

.hud-stats { display: flex; gap: 8px; margin: 0; }

.hud-stat {
  min-width: 64px;
  padding: 5px 10px 6px;
  border: 1px solid var(--line);
  border-radius: 4px 10px 5px 9px;
  background: color-mix(in srgb, var(--line) 14%, var(--card));
  text-align: center;
}
.hud-stat dt {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hud-stat dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  /* the 45% mix — the same ink the canvas uses — measured worst case 5.01:1 on paper (sunny); 55% left sunny at 4.09, under the 4.5 text owes */
  color: color-mix(in srgb, var(--game-accent) 45%, var(--ink));
}
/* …and pure accent on the dark sheet, where it already passes. */
:root[data-theme="dark"] .hud-stat dd { color: var(--game-accent); }

.hint { min-height: 1.6em; margin: 6px 0 10px; color: var(--muted); font-size: 0.83rem; font-weight: 600; }

/* ===== Drill stage ===== */

.game-stage { position: relative; }

/* The canvas stays transparent; this graph-paper grid shows through.
   Games repaint on ArtDaily.onTheme() so inks follow the theme. */
.game-canvas {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px 12px 6px 11px;
  background:
    radial-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--card);
  touch-action: none;      /* draw, don't scroll, on touch screens */
  cursor: crosshair;
}

/* Score pop — a little sticker. The global reduced-motion rule
   flattens the animation. */
.toast {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%) rotate(-1.5deg);
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 4px 12px 5px 10px;
  background: var(--card);
  box-shadow: 0 3px 0 var(--shadow);
  font-family: var(--hand);
  font-size: 1.2rem;
  font-weight: 700;
  white-space: nowrap;
  animation: toast-pop 0.25s ease;
}
.toast .toast-accent { color: color-mix(in srgb, var(--game-accent) 45%, var(--ink)); }
:root[data-theme="dark"] .toast .toast-accent { color: var(--game-accent); }
@keyframes toast-pop {
  from { transform: translateX(-50%) translateY(-8px) rotate(-1.5deg); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0) rotate(-1.5deg);    opacity: 1; }
}

/* ===== Controls — sticker buttons ===== */

.game-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.btn {
  font-family: var(--hand);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
  padding: 6px 18px;
  border: 1px solid var(--line);
  border-radius: 4px 12px 5px 10px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--shadow);
  cursor: pointer;
  transform: rotate(-0.5deg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 4px 0 var(--shadow); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--shadow); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: 0 1px 0 var(--shadow); }

.btn-primary {
  background: color-mix(in srgb, var(--game-accent) 26%, var(--card));
  border-color: color-mix(in srgb, var(--game-accent) 60%, var(--line));
}

.howto {
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px dashed var(--line);
  border-radius: 6px 12px 6px 12px;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
}
.howto p { margin: 4px 0; }
.howto-cmd { font-weight: 800; }

/* ---- page copy ----
   What this drill is, in prose, for the visitor who arrived from a search
   result rather than from the catalogue — the drill itself says almost
   nothing a crawler can read, because it is a canvas. It sits OUTSIDE
   <main> and is hidden in the player (see the :root.embed rule further
   down), so the arcade's iframe is exactly what it always was. */
.about {
  width: 100%;
  max-width: 860px;      /* the .stage column, so it lines up under the drill */
  margin: 0 auto;
  padding: 0 20px 40px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}
.about h2, .about h3 {
  color: var(--ink);
  font-family: var(--hand);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.about h2 { font-size: 1.5rem; margin: 8px 0 6px; }
.about h3 { font-size: 1.2rem; margin: 18px 0 4px; }
.about p { margin: 0 0 10px; }
.about a { color: var(--link); }
.about-more {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 0.86rem;
}

/* ===== Footer ===== */

.footer { text-align: center; padding: 40px 20px 28px; color: var(--muted); }
.footnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.85rem;
}
.footnav a { text-decoration: none; }
.footnav a:hover { text-decoration: underline wavy; text-decoration-thickness: 2px; }
#supportLinks { display: contents; }
.heart-ink { color: var(--coral); }
.fineprint { margin: 12px 0 0; font-size: 0.76rem; }

/* ===== Embedded inside the Art Daily player ===== */
/* The player supplies the sheet, so the game sheds its own. */

:root.embed .topbar,
:root.embed .footer,
:root.embed .term-bar { display: none; }
:root.embed .stage { padding: 10px 12px 16px; max-width: none; }
:root.embed .term { border: 0; box-shadow: none; border-radius: 0; background: transparent; }
:root.embed .term::before { display: none; }
:root.embed .term-body { padding: 0; }
:root.embed .about { display: none; }

@media (max-width: 480px) {
  .stage { padding: 14px 12px 36px; }
  .term-body { padding: 12px 16px 20px; }
  .game-name { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* The SDK fills this when it knows the input hardware. Scores are eased
   per device, so the drill says which device it eased for. */
.hud-input { min-width: 0; border: 0; background: none; padding: 5px 2px; display: flex; align-items: flex-end; }
.hud-input dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: 8.5rem;
  line-height: 1.25;
}

/* Shown by the SDK when a drill is played on its own page: progress
   lives per-origin, so a standalone score needs a way home. */
.handoff {
  margin: 12px 0 0;
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px dashed color-mix(in srgb, var(--game-accent) 55%, var(--line));
  border-radius: 5px 12px 6px 11px;
  background: color-mix(in srgb, var(--game-accent) 8%, transparent);
}
.handoff-link {
  font-family: var(--hand);
  font-size: 1.15rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--game-accent) 45%, var(--ink));
  text-decoration: underline;
  text-underline-offset: 3px;
}
:root[data-theme="dark"] .handoff-link { color: var(--game-accent); }

/* ============================================================
   game-specific styles below this line
   ============================================================ */

/* --sunny is a wash: 1.97:1 on the paper card, fine for the washi tape and
   the button fill, nowhere near AA for the marks this drill *means* (the
   target curve, the legend, the panel score). Canvas paints a colour string,
   not a computed blend, so the AA-safe variant is its own token the draw
   loop reads via getComputedStyle. Night studio keeps the pure accent. */
:root { --game-accent-ink: #8A6212; }                       /* 5.24:1 on --card */
:root[data-theme="dark"] { --game-accent-ink: var(--sunny); } /* 9.01:1 on --card */

/* The hatching panel is the measuring instrument, not page chrome: it is a
   sheet of paper with a graphite pencil on it in BOTH themes, because a
   value drill that inverts its values in the dark theme teaches the wrong
   thing. The night sheet is toned down so it does not glare. Scoring reads
   the ALPHA channel of the ink layer, so these two colours can change
   freely without moving a single score. */
:root {
  --panel-paper: #FCF8EF;      /* graphite on it: 14.9:1 */
  --panel-graphite: #2A2118;
}
:root[data-theme="dark"] {
  --panel-paper: #CFC5AF;      /* graphite on it: 9.7:1 */
  --panel-graphite: #241D14;
}

/* Five controls here (done / undo / clear / new round / how to play), so
   they get a real touch target rather than the 38px the type alone gives. */
.game-controls .btn { min-height: 44px; }

/* ---- tablet + phone gesture defences ----
   Hatching is dozens of short contacts with the hand parked on the glass,
   and any one of them that dwells past ~500ms trips the iOS Safari
   long-press recogniser. touch-action alone does not suppress it, and
   preventDefault on pointerdown does not cancel it: the copy/share
   callout appears mid-stroke, a text selection starts, and the browser
   steals the gesture with a pointercancel — which drops that stroke
   outright, since a cancelled contact is never committed to the ink. */
.game-canvas {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* a hatch that runs off the panel and off the canvas must not raise the
   text-selection magnifier over the HUD it lands on */
.game-stage,
.hud-stats,
.game-hud { -webkit-user-select: none; user-select: none; }

/* "undo" and "done" are tapped repeatedly between strokes; on iOS a
   double tap on a plain button zooms the page, and the new scale persists
   into the next stroke. */
.btn,
.iconbtn,
.backlink { touch-action: manipulation; }

/* the canvas sits above the fold, so a downward drag begun on the hint
   line or the HUD band pulls-to-refresh and destroys the round */
html, body { overscroll-behavior-y: contain; }