/* Sketchbook theme shared by every screen: graph paper in light mode,
   chalkboard in dark mode. Loaded after index.html's inline styles and before
   homepage-sketch.css. Tokens first, then the game, dialog, and profile pages.

   Buttons inside the game, profile, and Daily dialog are pencil-outlined pills
   that get a highlighter stroke on hover; selected and primary buttons keep it. */

:root {
  --paper: #fcfaf4;
  --card: #fffffc;
  --sketch-ink: #2b3440;
  --graphite: #5d6670;
  --paper-grid: 74, 120, 160;
  --pencil-red: 196, 58, 52;
  --pencil-blue: 45, 112, 179;
  --muse-blue: #4f7fae;
  --logo-ink: #062f47;
  --logo-accent: #69a5c8;
  --tape: rgba(222, 205, 160, 0.6);
  --sticky: #fff3b8;
  --highlight: rgba(255, 214, 92, 0.6);
  --highlight-create: rgba(240, 120, 130, 0.38);
  --action-ink: #3d4247;
  --control-line: rgba(43, 52, 64, 0.22);
  --control-line-strong: rgba(43, 52, 64, 0.5);
  --control-hover: rgba(43, 52, 64, 0.05);
  --hl-orange: rgba(224, 154, 71, 0.6);
  --hl-orange-press: rgba(224, 154, 71, 0.85);
  --hl-red: rgba(192, 67, 61, 0.42);
  --hl-red-press: rgba(192, 67, 61, 0.62);
  --hl-slate: rgba(76, 111, 125, 0.38);
  --hl-slate-press: rgba(76, 111, 125, 0.58);
  --hl-green: rgba(44, 143, 103, 0.28);
  --card-shadow: 0 1px 2px rgba(40, 30, 10, 0.06), 0 10px 24px -16px rgba(40, 30, 10, 0.35);
  /* Paper tooth for backgrounds: faint brown noise laid over the surface colour. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Grain mask for text: paper shows through the letters like pencil. */
  --text-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.0 0 0 0 1.35'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  /* Clean, rounded handwriting for logos, headings, and scores. */
  --font-print: "Mali", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* The app's original tokens, remapped onto paper. */
  --bg: var(--paper);
  --panel: var(--card);
  --ink: var(--sketch-ink);
  --muted: var(--graphite);
  --line: rgba(43, 52, 64, 0.16);
  --shadow: var(--card-shadow);
}

html.dark {
  --paper: #1f2422;
  --card: #323a37;
  --sketch-ink: #f1f0e6;
  --graphite: #c6cac8;
  --paper-grid: 226, 232, 229;
  --pencil-red: 255, 138, 128;
  --pencil-blue: 150, 200, 240;
  --muse-blue: #9cc7ee;
  --logo-ink: #f1f0e6;
  --logo-accent: #9cc7ee;
  --tape: rgba(240, 235, 215, 0.22);
  --sticky: #47442f;
  --highlight: rgba(245, 215, 110, 0.9);
  --highlight-create: rgba(255, 150, 140, 0.88);
  --highlight-ink: #1c2120;
  --action-ink: #e4e3da;
  --control-line: rgba(241, 240, 230, 0.28);
  --control-line-strong: rgba(241, 240, 230, 0.6);
  --control-hover: rgba(241, 240, 230, 0.07);
  /* Highlighters stay translucent enough for light ink to keep 4.5:1. */
  --hl-orange: rgba(240, 170, 90, 0.32);
  --hl-orange-press: rgba(240, 170, 90, 0.4);
  --hl-red: rgba(240, 110, 100, 0.4);
  --hl-red-press: rgba(240, 110, 100, 0.56);
  --hl-slate: rgba(130, 170, 190, 0.36);
  --hl-slate-press: rgba(130, 170, 190, 0.47);
  --hl-green: rgba(120, 210, 160, 0.3);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 26px -14px rgba(0, 0, 0, 0.6);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .92  0 0 0 0 .92  0 0 0 0 .91  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --line: rgba(241, 240, 230, 0.16);
  --surface-raised: #3a4340;
  --surface-selected: #46504c;
}

/* Highlighter colour follows the screen: red for Practice, orange for Daily,
   slate for the profile. */
.app,
.profile-screen,
.daily-dialog {
  --hl-accent: rgba(202, 59, 67, 0.3);
  --hl-accent-strong: rgba(202, 59, 67, 0.5);
}

body[data-play-mode="daily"] .app,
.daily-dialog {
  --hl-accent: rgba(223, 160, 82, 0.42);
  --hl-accent-strong: rgba(223, 160, 82, 0.68);
}

.profile-screen {
  --hl-accent: var(--hl-slate);
  --hl-accent-strong: var(--hl-slate-press);
}

html.dark .app,
html.dark .daily-dialog {
  --hl-accent: rgba(240, 110, 100, 0.35);
  --hl-accent-strong: rgba(240, 110, 100, 0.55);
}

html.dark body[data-play-mode="daily"] .app,
html.dark .daily-dialog {
  --hl-accent: rgba(240, 170, 90, 0.3);
  --hl-accent-strong: rgba(240, 170, 90, 0.4);
}

/* ---------- Buttons ---------- */

/* Every state rule below starts with this same prefix, so states always win
   over the base. Exclusions sit in :where() to add no specificity. */
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)) {
  position: relative;
  isolation: isolate;
  border: 1.5px solid var(--control-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}

html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)):hover {
  border-color: var(--control-line-strong);
  background: transparent;
}

/* The highlighter stroke: slightly ragged, slightly tilted, drawn left to right. */
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton))::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 22% 10px 18% 10px;
  border-radius: 4px 10px 6px 12px / 8px 5px 10px 6px;
  background: var(--hl, var(--hl-accent));
  clip-path: polygon(0 10%, 100% 0, 99% 100%, 1% 90%);
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.15s;
}

@media (hover: hover) {
  html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)):not(:disabled):hover::before {
    transform: scaleX(1) rotate(-1deg);
  }
}

html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)):focus-visible::before,
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton))[aria-pressed="true"]::before,
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)).primary::before,
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton))#saveProfileButton::before,
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)).daily-puzzle-button[data-complete="true"]::before {
  transform: scaleX(1) rotate(-1deg);
}

html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)):active::before {
  background: var(--hl-press, var(--hl-accent-strong));
}

/* Selected toggles (mode, difficulty, motion): highlighted, firmer outline. */
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton))[aria-pressed="true"] {
  border-color: var(--control-line-strong);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  box-shadow: none;
}

/* Primary actions (Check match, Next round, Next daily, Save profile). */
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)).primary,
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton))#saveProfileButton {
  --hl: var(--hl-accent-strong);
  border-color: var(--control-line-strong);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)).primary:hover,
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton))#saveProfileButton:hover {
  border-color: var(--ink);
  background: transparent;
}

html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)).icon::before {
  inset: 20% 7px 18% 7px;
}

/* Daily puzzle tiles hold two lines, so they're rounded rectangles. */
html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)).daily-puzzle-button {
  border-radius: 10px;
}

html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)).daily-puzzle-button::before {
  inset: 14% 6px;
}

html :is(.app, .profile-screen, .daily-dialog) button:where(:not(.game-player, .brand-home, #deleteAccountButton)).daily-puzzle-button[data-complete="true"] {
  --hl: var(--hl-green);
  background: transparent;
  color: var(--ink);
}

/* Motion options were a joined segmented control; now separate pills. */
html .profile-screen .motion-options button + button {
  border-left: 1.5px solid var(--control-line);
}

html .profile-screen .motion-options button[aria-pressed="true"] {
  border-color: var(--control-line-strong);
  background: transparent;
  color: var(--ink);
}

/* The Home button sits straight on the coloured sidebar, so give it a card. */
html .app .brand-actions button:where(:not(.game-player, .brand-home)) {
  background: var(--card);
  border-color: transparent;
}

/* ---------- Game: paper, sidebar, and cards ---------- */

html .app {
  --game-workspace: #faf2ee;
  background-color: var(--game-workspace);
  background-image: var(--grain);
}

html body[data-play-mode="daily"] .app {
  --game-workspace: #fbf4e8;
}

html.dark .app,
html.dark body[data-play-mode="daily"] .app {
  --game-workspace: var(--paper);
}

html .app main {
  position: relative;
  background: transparent;
}

/* The sidebar keeps the mode colour, textured like construction paper. */
html .app > aside {
  background-color: var(--game-accent);
  background-image: var(--grain);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

html.dark .app > aside {
  background-color: #1a1e1d;
  border-color: var(--line);
}

html .app :is(.score-box, .panel) {
  border: 0;
  border-radius: 4px;
  background: var(--card);
  box-shadow: var(--card-shadow);
}

html .app .panel-title :is(h2, h3),
html .app .daily-progress-heading strong {
  font-family: var(--font-print);
  font-size: 1.12rem;
  font-weight: 700;
}

html .app .score-box strong,
html .app .metric strong {
  font-family: var(--font-print);
  font-weight: 700;
}

html .app .target-row {
  border: 0;
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
  padding: 8px 2px;
  background: transparent;
}

html .app .target-row:last-child {
  border-bottom: 0;
}

html .app :is(.mode-summary, .max-bridge, .dev-options, .level select) {
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: transparent;
}

html .app .dev-options summary:hover {
  background: var(--control-hover);
}

/* Feedback reads like a sticky note. */
html .app .feedback {
  border: 0;
  border-radius: 2px;
  background: var(--sticky);
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 8px 18px -12px rgba(40, 30, 10, 0.45);
  transform: rotate(-0.6deg);
  /* The sidebar is a scrolling flex column; without this the note is squeezed
     to its min-height and the hints spill out below it. */
  flex-shrink: 0;
}

html .app .feedback strong {
  font-family: var(--font-print);
  font-size: 1.05rem;
}

html .app .score-pill {
  border: 1px dashed var(--control-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}

/* ---------- Game: header ---------- */

html :is(.app, .profile-screen) .game-header {
  border-bottom: 1px solid var(--line);
  background-color: var(--paper);
  background-image: var(--grain);
}

/* Practice mode keeps a red-tinted top bar. */
html body[data-play-mode="practice"] .app .game-header {
  background-color: #f6e1de;
  border-bottom-color: rgba(202, 59, 67, 0.22);
}

html.dark body[data-play-mode="practice"] .app .game-header {
  background-color: #3a2e2d;
  border-bottom-color: rgba(240, 110, 100, 0.25);
}

html .game-identity strong {
  color: var(--logo-ink);
  font-family: var(--font-print);
  font-weight: 700;
  -webkit-mask-image: var(--text-grain);
  mask-image: var(--text-grain);
}

html .game-identity strong span {
  color: var(--logo-accent);
}

html :is(.app, .profile-screen) .game-player {
  color: var(--ink);
  font-family: var(--font-print);
  font-weight: 700;
}

/* ---------- Game: the graph sheet ---------- */

/* A sheet of graph paper, taped down at the top corners. */
html .app .graph-shell {
  border: 0;
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--card-shadow);
}

html .app main::before,
html .app main::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 12px;
  width: 70px;
  height: 22px;
  background: var(--tape);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
  pointer-events: none;
}

html .app main::before {
  left: 2px;
  transform: rotate(-38deg);
}

html .app main::after {
  right: 2px;
  transform: rotate(38deg);
}

/* Notebook margin: a faint red line between the gutter and the graph. */
html .app .canvas-wrap {
  background: var(--card);
}

html .app canvas {
  background: var(--card);
  border-left: 1.5px solid rgba(var(--pencil-red), 0.35);
}

html .app .graph-badge {
  border: 1px dashed var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--graphite);
  font-family: var(--font-hand);
  font-size: 1.25rem;
  line-height: 1;
  backdrop-filter: none;
}

html .app .metrics {
  border-top: 1px dashed var(--line);
}

html .app .metric + .metric {
  border-left: 1px dashed var(--line);
}

html .app .metric small {
  color: var(--graphite);
}

/* ---------- Daily results dialog ---------- */

html .daily-dialog {
  border: 0;
  border-radius: 4px;
  background: var(--card);
  box-shadow: 0 24px 60px rgba(22, 31, 39, 0.3);
}

html .daily-dialog-header h2,
html .daily-result-stat strong {
  font-family: var(--font-print);
  font-weight: 700;
}

html .daily-dialog .daily-result-stat {
  border: 1px dashed var(--line);
  background: transparent;
}

html .daily-dialog .daily-component-row {
  border-bottom: 1px dashed var(--line);
}

html .daily-dialog .daily-community {
  border: 0;
  border-radius: 2px;
  background: var(--sticky);
  color: var(--ink);
}

html .daily-dialog .daily-share-preview {
  border: 1px dashed var(--line);
  background: var(--paper);
}

/* ---------- Profile page ---------- */

html .profile-screen {
  background-color: var(--paper);
  background-image: var(--grain);
}

html .profile-screen .profile-page-card {
  position: relative;
  border: 0;
  border-radius: 4px;
  background: var(--card);
  box-shadow: var(--card-shadow);
}

html .profile-screen .profile-page-card::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 116px;
  height: 26px;
  background: var(--tape);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 45%);
  transform: translateX(-50%) rotate(2deg);
}

html .profile-screen .profile-page-card h1,
html .profile-screen .profile-name strong,
html .profile-screen .home-stat strong,
html .profile-screen .profile-setting > strong {
  font-family: var(--font-print);
  font-weight: 700;
}

html .profile-screen .home-stat {
  border: 1px dashed var(--line);
  background: transparent;
}

html .profile-screen .recent-list {
  background: transparent;
}

html .profile-screen .recent-result {
  border: 0;
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
  background: transparent;
}

/* Notebook-style fields, as on the homepage login card. */
html .profile-screen :is(.profile-editor, .account-deletion) input {
  border: 0;
  border-bottom: 1.5px dashed rgba(var(--paper-grid), 0.55);
  border-radius: 0;
  padding: 0 4px;
  background: transparent;
  color: var(--ink);
}

html .profile-screen :is(.profile-editor, .account-deletion) input:focus {
  border-bottom-style: solid;
  border-bottom-color: var(--muse-blue);
  outline: none;
}

html .profile-screen .motion-options {
  gap: 6px;
  overflow: visible;
  border: 0;
}

/* Pills take a little more room than the old square buttons; keep the
   Check match / Give up / Clear row on one line. */
html .app .tool-row {
  gap: 6px;
}

html .app .tool-row button:where(:not(.icon)) {
  padding: 0 11px;
}

/* A full-width button would turn its highlighter into a long bar, so Save
   profile fits its label like the other buttons. */
html .profile-screen .profile-setting + #saveProfileButton {
  justify-self: start;
  width: auto;
  padding: 0 24px;
}

/* A small yellow pencil over the graph, drawn at 45° with its tip as the
   hotspot (5, 27) so lines start exactly where the tip touches. A white halo
   keeps it visible on the chalkboard. Falls back to a crosshair. */
html .app canvas {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><g id='p' stroke-linejoin='round'><path d='M1 16 L9 12 L9 20 Z'/><rect x='9' y='12' width='15' height='8'/><rect x='24' y='12' width='3' height='8'/><rect x='27' y='12' width='4' height='8' rx='1.5'/></g></defs><g transform='rotate(-45 16 16)'><use href='%23p' fill='white' stroke='white' stroke-width='3'/><path d='M1 16 L9 12 L9 20 Z' fill='%23f1d3a8' stroke='%232b3440' stroke-width='1.2' stroke-linejoin='round'/><path d='M1 16 L4.2 14.4 L4.2 17.6 Z' fill='%232b3440'/><rect x='9' y='12' width='15' height='8' fill='%23f2c14e' stroke='%232b3440' stroke-width='1.2'/><path d='M9 16 H24' stroke='%23d9a634' stroke-width='1'/><rect x='24' y='12' width='3' height='8' fill='%23b9c0c7' stroke='%232b3440' stroke-width='1.2'/><rect x='27' y='12' width='4' height='8' rx='1.5' fill='%23ef8fa0' stroke='%232b3440' stroke-width='1.2'/></g></svg>") 5 27, crosshair;
}