/* Designs. Each theme sets the same variables; shared.css and the home page
   only ever read variables. The canvas colours for each theme live in
   themes.js (PAL) — keep the two in sync. html[data-theme] picks the theme. */

:root,
html[data-theme="midnight"] {
  --bg: #0f101e;
  --board: #0c0d1a;
  --panel: #1c1f36;
  --panel-2: #262a48;
  --panel-edge: #2c3052;
  --edge-hover: #3b4070;
  --grid-line: #2c3052;
  --hairline: rgba(255, 255, 255, 0.07);
  --ink: #eef0ff;
  --muted: #8e94be;
  --dim: #565c84;
  --sun: #ffcc70;
  --mint: #74e2b2;
  --rose: #ff6e8c;
  --sky: #6cb6ff;
  --lilac: #b098ff;
  --accent: var(--lilac);
  --toggle: var(--sun);
  --toggle-fg: var(--sun);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Outfit", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --ui-tracking: 0;
  --title-size: 26px;
  --title-weight: 800;
  --title-tracking: -0.01em;
  --title-transform: none;
  --hero-fill: linear-gradient(100deg, #ffd99a 0%, #ffb0c2 35%, #c8b6ff 65%, #9fe8ff 100%);
  --hero-size: clamp(44px, 8vw, 72px);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 18px;
  --r-xl: 22px;
  --border-w: 1px;

  --page-bg:
    radial-gradient(900px 520px at 12% -8%, rgba(176, 152, 255, 0.13), transparent 70%),
    radial-gradient(800px 600px at 105% 108%, rgba(96, 222, 222, 0.08), transparent 70%),
    var(--bg);
  --wrap-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(176, 152, 255, 0.04);
  --btn-shadow: none;
  --btn-shadow-press: none;
  --btn-press: translateY(1px) scale(0.98);
  --primary-bg: linear-gradient(180deg, #c0acff, #9a80fb);
  --primary-hover: linear-gradient(180deg, #cbbaff, #a68ffc);
  --primary-fg: #17112f;
  --primary-border: transparent;
  --primary-shadow: 0 6px 18px -6px rgba(154, 128, 251, 0.6), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  --card-bg: linear-gradient(180deg, rgba(40, 44, 78, 0.55), rgba(28, 31, 54, 0.55));
  --card-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  --card-hover-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(176, 152, 255, 0.12), 0 10px 40px -10px rgba(176, 152, 255, 0.25);
  --card-hover-lift: translateY(-4px);
  --modal-bg: linear-gradient(180deg, #22264a, #1c1f36);
  --modal-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  --backdrop: rgba(8, 9, 20, 0.72);
  --bar-bg: rgba(15, 16, 30, 0.82);
  --chip-bg: rgba(15, 16, 30, 0.6);
  color-scheme: dark;
}

/* ---- Classic: the original warm dark brown + gold, monospace ---- */
html[data-theme="classic"] {
  --bg: #1c1a17;
  --board: #14120f;
  --panel: #262320;
  --panel-2: #2f2b26;
  --panel-edge: #38332d;
  --edge-hover: #4a443c;
  --grid-line: #3a352e;
  --hairline: #38332d;
  --ink: #f3ede0;
  --muted: #9b9182;
  --dim: #5a544a;
  --sun: #e6b422;
  --mint: #7fb069;
  --rose: #c8323f;
  --sky: #5aa0d2;
  --lilac: #7fb069;
  --accent: #7fb069;
  --toggle: #e6b422;
  --toggle-fg: #d4b96a;

  --font: "Inconsolata", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: var(--font);
  --ui-tracking: 0.04em;
  --title-size: 20px;
  --title-weight: 700;
  --title-tracking: 0.14em;
  --title-transform: uppercase;
  --hero-fill: linear-gradient(#f3ede0, #f3ede0);
  --hero-size: 28px;

  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 10px;
  --r-xl: 14px;
  --border-w: 2px;

  --page-bg: var(--bg);
  --wrap-shadow: none;
  --primary-bg: #4a7a38;
  --primary-hover: #537f40;
  --primary-fg: #c8dfc0;
  --primary-border: #3d6630;
  --primary-shadow: none;
  --card-bg: var(--panel);
  --card-shadow: none;
  --card-hover-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --card-hover-lift: translateY(-3px);
  --modal-bg: var(--panel);
  --modal-shadow: none;
  --backdrop: rgba(20, 18, 15, 0.82);
  --bar-bg: rgba(20, 18, 15, 0.94);
  --chip-bg: rgba(30, 27, 24, 0.6);
}
html[data-theme="classic"] .back-link,
html[data-theme="classic"] .tag,
html[data-theme="classic"] .status { letter-spacing: 0.06em; }
html[data-theme="classic"] #home .card-title { text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px; }

/* ---- Studio: bright, airy creative-app look ---- */
html[data-theme="studio"] {
  --bg: #f4f4f7;
  --board: #ffffff;
  --panel: #ffffff;
  --panel-2: #f1f2f6;
  --panel-edge: #e2e4ec;
  --edge-hover: #c9ccd8;
  --grid-line: #e2e4ec;
  --hairline: #e6e8ef;
  --ink: #16171c;
  --muted: #6b7080;
  --dim: #b4b9c8;
  --sun: #f7a720;
  --mint: #16b278;
  --rose: #f03e5c;
  --sky: #247aff;
  --lilac: #6a4dff;
  --accent: #6a4dff;
  --toggle: #6a4dff;
  --toggle-fg: #5236e6;

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --title-weight: 800;
  --title-tracking: -0.03em;
  --hero-fill: linear-gradient(100deg, #16171c, #16171c);
  --hero-size: clamp(44px, 8vw, 76px);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;

  --page-bg:
    radial-gradient(700px 400px at 10% 0%, rgba(106, 77, 255, 0.07), transparent 70%),
    radial-gradient(700px 500px at 100% 100%, rgba(36, 122, 255, 0.06), transparent 70%),
    var(--bg);
  --wrap-shadow: 0 1px 2px rgba(20, 22, 40, 0.06), 0 18px 40px -18px rgba(20, 22, 40, 0.25);
  --btn-shadow: 0 1px 2px rgba(20, 22, 40, 0.06);
  --primary-bg: #16171c;
  --primary-hover: #2a2c35;
  --primary-fg: #ffffff;
  --primary-border: #16171c;
  --primary-shadow: 0 6px 16px -8px rgba(22, 23, 28, 0.6);
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(20, 22, 40, 0.06), 0 10px 30px -18px rgba(20, 22, 40, 0.3);
  --card-hover-shadow: 0 2px 4px rgba(20, 22, 40, 0.06), 0 24px 50px -20px rgba(20, 22, 40, 0.35);
  --modal-bg: #ffffff;
  --modal-shadow: 0 30px 80px -20px rgba(20, 22, 40, 0.4);
  --backdrop: rgba(240, 241, 246, 0.7);
  --bar-bg: rgba(255, 255, 255, 0.85);
  --chip-bg: rgba(255, 255, 255, 0.8);
  color-scheme: light;
}

/* ---- Paper: a sketchbook — warm paper, grain, pen colours, handwriting ---- */
html[data-theme="paper"] {
  --bg: #efe6d4;
  --board: #faf6ec;
  --panel: #f6efdf;
  --panel-2: #ece2cc;
  --panel-edge: #cdbd9c;
  --edge-hover: #a8946c;
  --grid-line: #d8c9a8;
  --hairline: #cdbd9c;
  --ink: #26304f;
  --muted: #7a6e5a;
  --dim: #b4a688;
  --sun: #e8a317;
  --mint: #3f9660;
  --rose: #d64541;
  --sky: #2e60b2;
  --lilac: #2e60b2;
  --accent: #2e60b2;
  --toggle: #d64541;
  --toggle-fg: #b8322e;

  --font: "Patrick Hand", "Comic Sans MS", cursive;
  --font-display: "Caveat", "Patrick Hand", cursive;
  --ui-tracking: 0.01em;
  --title-size: 38px;
  --title-weight: 700;
  --title-tracking: 0;
  --hero-fill: linear-gradient(#26304f, #26304f);
  --hero-size: clamp(64px, 11vw, 104px);

  --r-sm: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --r-md: 18px 6px 16px 8px;
  --r-lg: 6px 14px 8px 16px;
  --r-xl: 12px 4px 14px 6px;
  --border-w: 2px;

  --page-bg: var(--bg);
  --wrap-shadow: 3px 4px 0 rgba(38, 48, 79, 0.12);
  --btn-shadow: 2px 2px 0 rgba(38, 48, 79, 0.15);
  --btn-shadow-press: none;
  --btn-press: translate(2px, 2px);
  --primary-bg: #26304f;
  --primary-hover: #33406a;
  --primary-fg: #faf6ec;
  --primary-border: #26304f;
  --primary-shadow: 2px 2px 0 rgba(38, 48, 79, 0.25);
  --card-bg: var(--board);
  --card-shadow: 3px 4px 0 rgba(38, 48, 79, 0.12);
  --card-hover-shadow: 5px 7px 0 rgba(38, 48, 79, 0.16);
  --card-hover-lift: rotate(-0.6deg) translateY(-3px);
  --modal-bg: var(--board);
  --modal-shadow: 6px 8px 0 rgba(38, 48, 79, 0.18);
  --backdrop: rgba(239, 230, 212, 0.75);
  --bar-bg: rgba(250, 246, 236, 0.92);
  --chip-bg: rgba(250, 246, 236, 0.85);
  color-scheme: light;
}
/* paper grain over the page and on top of every canvas */
html[data-theme="paper"] body::before,
html[data-theme="paper"] #canvas-wrap::after,
html[data-theme="paper"] #home .card .preview::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="paper"] #canvas-wrap::after,
html[data-theme="paper"] #home .card .preview::after { position: absolute; z-index: 2; }
/* ruled notebook lines behind the page */
html[data-theme="paper"] body {
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(46, 96, 178, 0.10) 31px 32px);
}
html[data-theme="paper"] button,
html[data-theme="paper"] .preset-row select { font-size: 17px; }
html[data-theme="paper"] .status,
html[data-theme="paper"] .tag,
html[data-theme="paper"] .info-text { font-size: 16px; }
html[data-theme="paper"] #home .card-title { font-family: var(--font-display); font-size: 28px; }

/* ---- Brutal: dark, fine line art — hairlines, drawn-on frames, scroll + hover motion ---- */
html[data-theme="brutal"] {
  --bg: #0c0c0e;
  --board: #111114;
  --panel: #131316;
  --panel-2: #1c1c20;
  --panel-edge: rgba(242, 241, 236, 0.2);
  --edge-hover: #f2f1ec;
  --grid-line: #2c2c31;
  --hairline: rgba(242, 241, 236, 0.16);
  --ink: #f2f1ec;
  --muted: #8d8c86;
  --dim: #4a4a4f;
  --sun: #f2f1ec;
  --mint: #f2f1ec;
  --rose: #f2f1ec;
  --sky: #f2f1ec;
  --lilac: #f2f1ec;
  --accent: #f2f1ec;
  --toggle: #f2f1ec;
  --toggle-fg: #f2f1ec;

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --ui-tracking: 0;
  --title-size: 26px;
  --title-weight: 500;
  --title-tracking: -0.02em;
  --title-transform: none;
  /* hero title is an outline that fills with ink on hover (see #home h1 below) */
  --hero-fill: linear-gradient(#f2f1ec, #f2f1ec) no-repeat 0 100% / 100% 0%;
  --hero-size: clamp(64px, 14vw, 140px);

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 4px;
  --r-xl: 4px;
  --border-w: 1px;

  --page-bg: var(--bg);
  --wrap-shadow: none;
  --btn-shadow: none;
  --btn-shadow-press: none;
  --btn-press: scale(0.98);
  --primary-bg: #f2f1ec;
  --primary-hover: #f2f1ec;
  --primary-fg: #0c0c0e;
  --primary-border: #f2f1ec;
  --primary-shadow: none;
  --card-bg: transparent;
  --card-shadow: none;
  --card-hover-shadow: none;
  --card-hover-lift: none;
  --modal-bg: #131316;
  --modal-shadow: 0 0 0 1px rgba(242, 241, 236, 0.2), 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --backdrop: rgba(8, 8, 10, 0.8);
  --bar-bg: rgba(12, 12, 14, 0.9);
  --chip-bg: rgba(17, 17, 20, 0.9);
  color-scheme: dark;
}

/* guide lines sit in the gaps between the card columns (24px page padding, 28px gap);
   --gNh is the same spot for the 11px-wide horizontal bar of a + mark */
html[data-theme="brutal"] {
  --g1: calc(33.333% + 3.33px); --g1h: calc(33.333% + 2px);
  --g2: calc(66.667% - 3.33px); --g2h: calc(66.667% - 1px);
}
@media (min-width: 641px) and (max-width: 900px) {
  html[data-theme="brutal"] { --g1: 50%; --g1h: calc(50% + 0.5px); --g2: 300%; --g2h: 300%; }
}
@media (max-width: 640px) {
  html[data-theme="brutal"] { --g1: 300%; --g1h: 300%; --g2: 300%; --g2h: 300%; }
}

/* vertical guide lines run down the page and draw themselves in on load */
html[data-theme="brutal"] body::before {
  content: "";
  position: fixed;
  inset: 0 0 0 50%;
  width: min(1080px, 100vw);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(242, 241, 236, 0.09), rgba(242, 241, 236, 0.09)) 0 0 / 1px 100% no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.09), rgba(242, 241, 236, 0.09)) var(--g1) 0 / 1px 100% no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.09), rgba(242, 241, 236, 0.09)) var(--g2) 0 / 1px 100% no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.09), rgba(242, 241, 236, 0.09)) 100% 0 / 1px 100% no-repeat;
  animation: art-guides 1.6s var(--ease) both;
}
@keyframes art-guides { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
html[data-theme="brutal"] #home,
html[data-theme="brutal"] #app { position: relative; z-index: 1; }

/* buttons: outline, ink fills in from the left on hover */
html[data-theme="brutal"] button,
html[data-theme="brutal"] .preset-row select {
  background-color: transparent;
  font-weight: 500;
}
html[data-theme="brutal"] button {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 0% 100%;
  transition: background-size 0.45s var(--ease), color 0.3s, border-color 0.2s, transform 0.08s;
}
html[data-theme="brutal"] button:hover {
  background-color: transparent;
  background-size: 100% 100%;
  color: var(--bg);
  border-color: var(--ink);
}
html[data-theme="brutal"] button.primary { background-color: var(--ink); background-image: linear-gradient(var(--bg), var(--bg)); }
html[data-theme="brutal"] button.primary:hover { background-color: var(--ink); color: var(--ink); }
html[data-theme="brutal"] button.active,
html[data-theme="brutal"] button.hint-confirm { background-color: var(--panel-2); border-color: var(--ink); color: var(--ink); }
html[data-theme="brutal"] button.active:hover,
html[data-theme="brutal"] button.hint-confirm:hover { color: var(--bg); background-color: var(--panel-2); }
html[data-theme="brutal"] .preset-row select:hover { background-color: transparent; border-color: var(--ink); }
html[data-theme="brutal"] .status .dot { box-shadow: none !important; }

/* game board: hairline frame with corner brackets that tighten on hover */
html[data-theme="brutal"] #canvas-wrap { overflow: visible; border-color: var(--hairline); transition: border-color 0.3s; }
html[data-theme="brutal"] #canvas-wrap.fs { overflow: hidden; }
html[data-theme="brutal"] #canvas-wrap:not(.fs)::after,
html[data-theme="brutal"] #home .card .preview::after {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 1px 14px no-repeat;
  opacity: 0.5;
  transition: inset 0.45s var(--ease), opacity 0.3s;
}
html[data-theme="brutal"] #canvas-wrap:not(.fs):hover::after { inset: 6px; opacity: 0.8; }

/* home: header */
html[data-theme="brutal"] #home .hero { position: relative; margin-bottom: 64px; padding-top: 12px; }
html[data-theme="brutal"] #home .hero::after {
  /* rule under the header; spans the whole guide area and
     marks every crossing with a small + */
  content: "";
  display: block;
  height: 11px;
  margin: 35px -24px 0;
  background:
    linear-gradient(rgba(242, 241, 236, 0.6), rgba(242, 241, 236, 0.6)) -5px 50% / 11px 1px no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.6), rgba(242, 241, 236, 0.6)) 0% 50% / 1px 11px no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.6), rgba(242, 241, 236, 0.6)) var(--g1h) 50% / 11px 1px no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.6), rgba(242, 241, 236, 0.6)) var(--g1) 50% / 1px 11px no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.6), rgba(242, 241, 236, 0.6)) var(--g2h) 50% / 11px 1px no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.6), rgba(242, 241, 236, 0.6)) var(--g2) 50% / 1px 11px no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.6), rgba(242, 241, 236, 0.6)) calc(100% + 6px) 50% / 11px 1px no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.6), rgba(242, 241, 236, 0.6)) 100% 50% / 1px 11px no-repeat,
    linear-gradient(rgba(242, 241, 236, 0.2), rgba(242, 241, 236, 0.2)) 0 50% / 100% 1px no-repeat;
}
html[data-theme="brutal"] #home h1 {
  position: relative;
  display: inline-block;
  font-weight: 500;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 2.4px var(--ink);
  transition: background-size 0.7s var(--ease);
  cursor: default;
}
/* the variable font's glyph contours overlap and the stroke would draw those inner
   lines; a bg-coloured copy on top hides the inner half of the stroke (and the overlaps) */
html[data-theme="brutal"] #home h1::before {
  content: attr(data-text);
  position: absolute; inset: 0;
  color: var(--bg);
  -webkit-text-stroke: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
html[data-theme="brutal"] #home h1:hover { background-size: 100% 100%; }
html[data-theme="brutal"] #home h1:hover::before { opacity: 0; }
html[data-theme="brutal"] #home .subtitle { position: relative; letter-spacing: 0.01em; }
html[data-theme="brutal"] #home .site-link { position: relative; z-index: 2; }

/* line-art drawing behind the title: strokes draw in, then react to hover + scroll */
#home .art-lines { display: none; }
html[data-theme="brutal"] #home .art-lines {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: min(920px, 100%);
  height: 100%;
  transform: translate(calc(-50% + var(--mx, 0) * 14px), calc(var(--my, 0) * 10px));
  transition: transform 0.6s var(--ease);
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
html[data-theme="brutal"] #home .art-lines path,
html[data-theme="brutal"] #home .art-lines rect,
html[data-theme="brutal"] #home .art-lines circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: art-draw 2.2s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 0.12s + 0.2s);
  transition: stroke-width 0.3s;
}
@keyframes art-draw { to { stroke-dashoffset: 0; } }
html[data-theme="brutal"] #home .hero:hover .art-lines { opacity: 0.6; }
html[data-theme="brutal"] #home .art-lines .spin {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.9s var(--ease);
}
html[data-theme="brutal"] #home .hero:hover .art-lines .spin { transform: rotate(90deg); }
html[data-theme="brutal"] #home .hero:hover .art-lines .spin-r { transform: rotate(-90deg); }
@supports (animation-timeline: scroll()) {
  html[data-theme="brutal"] #home .art-lines {
    animation: art-scroll linear both;
    animation-timeline: scroll(root);
    animation-range: 0 420px;
  }
  @keyframes art-scroll { to { opacity: 0; translate: 0 -60px; scale: 1.06; } }
}

/* home: cards are open frames — hairline border, ink line draws along the top on hover */
html[data-theme="brutal"] #home .grid { gap: 28px; }
html[data-theme="brutal"] #home .card {
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  transition: border-color 0.35s, background-color 0.35s;
}
html[data-theme="brutal"] #home .card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 3;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease);
}
html[data-theme="brutal"] #home .card:hover::before,
html[data-theme="brutal"] #home .card:focus-visible::before { transform: scaleX(1); }
html[data-theme="brutal"] #home .card:hover { border-color: var(--ink); background-color: var(--board); }
html[data-theme="brutal"] #home .card .preview { background: transparent; border-bottom: 1px solid var(--hairline); }
html[data-theme="brutal"] #home .card canvas { transition: transform 0.9s var(--ease), opacity 0.4s; opacity: 0.9; }
html[data-theme="brutal"] #home .card:hover canvas { transform: scale(1.05); opacity: 1; }
html[data-theme="brutal"] #home .card .card-text { border-top: 0; padding: 16px 18px 18px; position: relative; }
html[data-theme="brutal"] #home .card-title {
  display: inline;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0% 1px no-repeat;
  transition: background-size 0.5s var(--ease);
}
html[data-theme="brutal"] #home .card:hover .card-title { background-size: 100% 1px; }
html[data-theme="brutal"] #home .card-text::after {
  /* arrow drawn from lines, slides in on hover */
  content: "";
  position: absolute;
  right: 18px; top: 20px;
  width: 9px; height: 9px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  opacity: 0;
  transform: translate(-8px, 8px);
  transition: opacity 0.3s, transform 0.5s var(--ease);
}
html[data-theme="brutal"] #home .card:hover .card-text::after { opacity: 1; transform: translate(0, 0); }
html[data-theme="brutal"] #home .star-btn { border-radius: 50%; background: var(--chip-bg); border-color: var(--hairline); }
html[data-theme="brutal"] #home .star-btn .star-icon { stroke-width: 1.5; }
html[data-theme="brutal"] #home .star-btn.starred .star-icon { fill: var(--ink); }

/* scroll reveal: cards rise in while their frame fades up (class set by home.js) */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="brutal"] #home .card.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), border-color 0.35s, background-color 0.35s;
    transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s;
  }
  html[data-theme="brutal"] #home .card.reveal.in { opacity: 1; transform: none; }
  html[data-theme="brutal"] #home .card.reveal.in canvas { animation: art-preview-in 1.2s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
  @keyframes art-preview-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="brutal"] body::before,
  html[data-theme="brutal"] #home .hero::after { animation: none; }
  html[data-theme="brutal"] #home .art-lines * { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ---- Pop: neo-brutalism, thick black outlines and hard shadows ---- */
html[data-theme="pop"] {
  --bg: #fff3d6;
  --board: #ffffff;
  --panel: #ffffff;
  --panel-2: #ffe08a;
  --panel-edge: #000000;
  --edge-hover: #000000;
  --grid-line: #000000;
  --hairline: #000000;
  --ink: #000000;
  --muted: #3d3d3d;
  --dim: #9a9a9a;
  --sun: #ffc800;
  --mint: #00c878;
  --rose: #ff4d4d;
  --sky: #3c82ff;
  --lilac: #a06eff;
  --accent: #000000;
  --toggle: #ff4d4d;
  --toggle-fg: #000000;

  --font: "Space Grotesk", system-ui, sans-serif;
  --font-display: var(--font);
  --title-size: 30px;
  --title-weight: 700;
  --title-tracking: -0.03em;
  --hero-fill: linear-gradient(#000, #000);
  --hero-size: clamp(52px, 10vw, 96px);

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --border-w: 3px;

  --page-bg: var(--bg);
  --wrap-shadow: 6px 6px 0 #000;
  --btn-shadow: 3px 3px 0 #000;
  --btn-shadow-press: 0 0 0 #000;
  --btn-press: translate(3px, 3px);
  --primary-bg: #ffc800;
  --primary-hover: #ffd53d;
  --primary-fg: #000000;
  --primary-border: #000000;
  --primary-shadow: 3px 3px 0 #000;
  --card-bg: #ffffff;
  --card-shadow: 6px 6px 0 #000;
  --card-hover-shadow: 10px 10px 0 #000;
  --card-hover-lift: translate(-4px, -4px);
  --modal-bg: #ffffff;
  --modal-shadow: 10px 10px 0 #000;
  --backdrop: rgba(255, 243, 214, 0.7);
  --bar-bg: #fff3d6;
  --chip-bg: #ffffff;
  color-scheme: light;
}
html[data-theme="pop"] button.active,
html[data-theme="pop"] button.hint-confirm { background: var(--rose); color: #000; border-color: #000; }
html[data-theme="pop"] #home .card .card-text { border-top: 3px solid #000; }
html[data-theme="pop"] #home .card:nth-child(4n+1) .card-text { background: #ffc800; }
html[data-theme="pop"] #home .card:nth-child(4n+2) .card-text { background: #ff9ecf; }
html[data-theme="pop"] #home .card:nth-child(4n+3) .card-text { background: #8fd3ff; }
html[data-theme="pop"] #home .card:nth-child(4n+4) .card-text { background: #a6f0c6; }
html[data-theme="pop"] #home .card-desc { color: #000; }

/* ---- motion: every design animates a little, some more than others ----
   Cards fade/rise in on scroll (.reveal/.in set by home.js), game boards ease
   in on load. Each design tunes the vars (and adds its own hover touches). */
:root { --reveal-from: translateY(18px); --reveal-dur: 0.7s; --reveal-ease: var(--ease); --wrap-from: translateY(10px); --wrap-dur: 0.5s; --wrap-ease: var(--ease); }
@keyframes wrap-in { from { opacity: 0; transform: var(--wrap-from); } }
#canvas-wrap:not(.fs) { animation: wrap-in var(--wrap-dur) var(--wrap-ease) both; }
@media (prefers-reduced-motion: no-preference) {
  #home .card.reveal {
    opacity: 0;
    transform: var(--reveal-from);
    transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease), border-color 0.35s, background-color 0.35s;
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
  }
  #home .card.reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { #canvas-wrap:not(.fs) { animation: none; } }

/* Midnight: slow colour drift on the title, preview floats on hover */
html[data-theme="midnight"] #home h1 { background-size: 220% 100%; animation: midnight-shimmer 10s ease-in-out infinite alternate; }
@keyframes midnight-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
html[data-theme="midnight"] #home .card:hover canvas { transform: scale(1.035) translateY(-2px); }
html[data-theme="midnight"] #home .card-title { transition: transform 0.3s var(--ease); }
html[data-theme="midnight"] #home .card:hover .card-title { transform: translateX(3px); }

/* Classic: barely moves, just a quick fade and tracking on hover */
html[data-theme="classic"] { --reveal-from: translateY(8px); --reveal-dur: 0.4s; --wrap-from: translateY(4px); --wrap-dur: 0.3s; }
html[data-theme="classic"] #home .card-title { transition: letter-spacing 0.3s var(--ease); }
html[data-theme="classic"] #home .card:hover .card-title { letter-spacing: 0.17em; }

/* Studio: springy lifts */
html[data-theme="studio"] { --reveal-from: translateY(26px) scale(0.97); --reveal-ease: cubic-bezier(0.34, 1.4, 0.64, 1); --wrap-from: translateY(14px) scale(0.98); --wrap-ease: cubic-bezier(0.34, 1.4, 0.64, 1); }
html[data-theme="studio"] #home .card { transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.2s, box-shadow 0.3s; }
html[data-theme="studio"] button { transition: background 0.15s, border-color 0.15s, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.2s, color 0.15s; }
html[data-theme="studio"] button:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(20, 22, 40, 0.35); }
html[data-theme="studio"] button:active { transform: scale(0.97); box-shadow: none; }
html[data-theme="studio"] #home .card:hover canvas { transform: scale(1.05); }

/* Paper: tilts in like a pinned sheet, wobbles on hover */
html[data-theme="paper"] { --reveal-from: translateY(22px) rotate(-1.6deg); --reveal-dur: 0.8s; --wrap-from: translateY(10px) rotate(-0.8deg); }
@keyframes paper-wobble { 25% { transform: rotate(-1.4deg); } 75% { transform: rotate(1.2deg); } }
html[data-theme="paper"] #home h1:hover { animation: paper-wobble 0.6s ease-in-out; }
html[data-theme="paper"] button:hover { transform: rotate(-1deg) translateY(-1px); }
html[data-theme="paper"] button:active { transform: var(--btn-press); }
html[data-theme="paper"] #home .card-title { background: linear-gradient(var(--sky), var(--sky)) 0 100% / 0% 2px no-repeat; transition: background-size 0.45s var(--ease); display: inline; }
html[data-theme="paper"] #home .card:hover .card-title { background-size: 100% 2px; }

/* Pop: bouncy, chunky */
html[data-theme="pop"] { --reveal-from: translateY(34px) scale(0.86); --reveal-dur: 0.55s; --reveal-ease: cubic-bezier(0.34, 1.7, 0.5, 1); --wrap-from: scale(0.92) translateY(14px); --wrap-dur: 0.45s; --wrap-ease: cubic-bezier(0.34, 1.7, 0.5, 1); }
@keyframes pop-bounce { 30% { transform: translateY(-8px) rotate(-1deg); } 60% { transform: translateY(2px); } }
html[data-theme="pop"] #home h1:hover { animation: pop-bounce 0.5s ease-out; }
html[data-theme="pop"] button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
html[data-theme="pop"] button:active { transform: var(--btn-press); box-shadow: var(--btn-shadow-press); }
html[data-theme="pop"] #home .card:hover .star-icon { animation: pop-bounce 0.4s ease-out; }
html[data-theme="pop"] #home .card { transition: transform 0.2s cubic-bezier(0.34, 1.7, 0.5, 1), box-shadow 0.2s; }

/* ---- theme picker ---- */
.theme-picker { position: relative; z-index: 120; }
#app > .theme-picker,
#home > .theme-picker { position: fixed; top: 14px; right: 16px; }
.theme-btn {
  flex: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px !important;
  font-size: 14px;
}
.theme-btn svg { width: 16px; height: 16px; }
html.design-pending body { visibility: hidden; }
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(560px, calc(100vw - 24px));
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: 6px;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--modal-bg);
  border: var(--border-w) solid var(--panel-edge);
  border-radius: var(--r-md);
  box-shadow: var(--modal-shadow), 0 16px 40px -12px rgba(0, 0, 0, 0.45);
  display: none;
}
.theme-picker.open .theme-menu { display: grid; animation: info-pop 0.18s var(--ease); }
.theme-opt {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: block;
  padding: 6px;
  border-radius: calc(var(--r-sm) * 0.7);
  cursor: pointer;
  color: var(--ink);
}
.theme-opt:hover, .theme-opt:focus-visible { background: var(--panel-2); }
.theme-opt[aria-checked="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
/* sample tile: theme-sample.html rendered at 560x213 and scaled to the tile width (--s, set in themes.js) */
.theme-frame {
  position: relative; display: block; width: 100%; height: calc(213px * var(--s, 0.47)); overflow: hidden;
  border-radius: calc(var(--r-sm) * 0.5); pointer-events: none;
  transition: transform 0.25s var(--ease);
}
.theme-frame iframe {
  position: absolute; left: 0; top: 0; width: 560px; height: 213px; border: 0;
  transform: scale(var(--s, 0.47)); transform-origin: 0 0; pointer-events: none; background: transparent;
}
.theme-opt:hover .theme-frame, .theme-opt:focus-visible .theme-frame { transform: scale(1.03) rotate(-0.6deg); }
/* reduce motion: heavy designs are greyed out (the click still asks first) */
.theme-opt.is-muted .theme-frame { filter: grayscale(1) contrast(0.85); opacity: 0.45; }
.theme-opt.is-muted:hover .theme-frame { opacity: 0.7; }

/* "heavily animated" warning */
.motion-warn {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px;
  background: var(--backdrop);
}
.mw-box {
  max-width: 380px; padding: 22px; box-sizing: border-box;
  background: var(--modal-bg); color: var(--ink);
  border: var(--border-w) solid var(--panel-edge); border-radius: var(--r-md); box-shadow: var(--modal-shadow);
}
.mw-box h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.2; }
.mw-box p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.mw-actions { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 520px) { .theme-menu { grid-template-columns: 1fr; } }
.theme-picker .theme-menu::-webkit-scrollbar { width: 8px; }
.theme-picker .theme-menu::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 8px; }