/* Second design: the app drawn like its sketches. Notebook paper, ink outlines with
   slightly uneven corners, pastel fills that sit a little off the line, a marker font
   for headings, and orange for whatever the player does. Everything here is scoped to
   html[data-design="sketch"], so the glass design stays untouched. */

@font-face {
  font-family: "Patrick Hand";
  src: url("../fonts/patrick-hand-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root[data-design="sketch"] {
  --bg: #f7f3ea;
  --paper: #fffdf8;
  --ink: #1d1b18;
  --muted: #5c574f;
  --faint: #a39d92;
  --line: #1d1b18;
  --glass: var(--paper);
  --glass-strong: var(--paper);
  --glass-border: var(--ink);
  --pill: var(--ink);
  --on-pill: var(--paper);
  --you: #ffa866;
  --accent: #ee7a2c;
  --accent-light: #ffb27a;
  --accent-soft: #ffe2cc;
  --good: #23824a;
  --good-soft: #cdeedd;
  --bad: #c43d3d;
  --bad-soft: #ffd6dc;
  --off-peach: #ffcfae;
  --off-mint: #bfe9dc;
  --off-lilac: #d9d3ff;
  --off-sun: #ffe39a;
  --off-sky: #cfe6ff;
  --off-pink: #ffd0de;
  --shadow: none;
  --serif: "Patrick Hand", "Comic Neue", "Chalkboard SE", "Segoe Print", cursive;
  --hand-l: 22px 30px 24px 28px / 28px 22px 30px 24px;
  --hand-m: 16px 22px 18px 20px / 20px 16px 22px 18px;
  --hand-pill: 255px 22px 225px 22px / 22px 225px 22px 255px;
}

@media (prefers-color-scheme: dark) {
  :root[data-design="sketch"] {
    --bg: #1c1d1b;
    --paper: #262724;
    --ink: #f1ede4;
    --muted: #bdb7ab;
    --faint: #7d786f;
    --line: #f1ede4;
    --off-peach: #7a4a30;
    --off-mint: #2f5d50;
    --off-lilac: #4a4472;
    --off-sun: #6e5c25;
    --off-sky: #2f4a66;
    --off-pink: #6b3a4b;
    --good-soft: #1f4a35;
    --bad-soft: #5a2630;
    --accent-soft: #5a3420;
  }
}

/* Paper with a faint dot grid instead of the pastel glow */

:root[data-design="sketch"] {
  background-color: var(--bg);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

:root[data-design="sketch"] body::before {
  display: none;
}

/* Type: marker for everything that used the serif */

:root[data-design="sketch"] .page-title,
:root[data-design="sketch"] .section-title,
:root[data-design="sketch"] .card h2,
:root[data-design="sketch"] .prompt,
:root[data-design="sketch"] .top-date,
:root[data-design="sketch"] .feedback-head {
  letter-spacing: 0;
}

:root[data-design="sketch"] .prompt,
:root[data-design="sketch"] .sketch + .prompt {
  font-size: 25px;
  line-height: 1.25;
}

/* Cards, sheets and answers: ink outline, uneven corners, fill set off the line */

:root[data-design="sketch"] .card,
:root[data-design="sketch"] .option,
:root[data-design="sketch"] .feedback-inner,
:root[data-design="sketch"] .sketch {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--hand-l);
  box-shadow: 5px 5px 0 var(--off, var(--off-lilac));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root[data-design="sketch"] .card:nth-of-type(4n + 1) { --off: var(--off-peach); }
:root[data-design="sketch"] .card:nth-of-type(4n + 2) { --off: var(--off-mint); }
:root[data-design="sketch"] .card:nth-of-type(4n + 3) { --off: var(--off-sun); }
:root[data-design="sketch"] .card:nth-of-type(4n) { --off: var(--off-sky); }

:root[data-design="sketch"] .sketch {
  --off: var(--off-sun);
  background: #fffdf8;
}

:root[data-design="sketch"] .option {
  border-radius: var(--hand-m);
  box-shadow: 4px 4px 0 var(--off-lilac);
}

:root[data-design="sketch"] .option:hover:not(:disabled) {
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--you);
}

:root[data-design="sketch"] .option.is-best {
  background: var(--good-soft);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--good);
}

:root[data-design="sketch"] .option.is-wrong {
  background: var(--bad-soft);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--bad);
}

:root[data-design="sketch"] .feedback-inner {
  box-shadow: 0 -4px 0 var(--off-sun);
}

:root[data-design="sketch"] .feedback.is-good .feedback-inner {
  background: var(--good-soft);
}

:root[data-design="sketch"] .feedback.is-bad .feedback-inner {
  background: var(--bad-soft);
}

/* Buttons: hand drawn pills; the main action wears the player's orange */

:root[data-design="sketch"] .btn {
  border: 2px solid var(--ink);
  border-radius: var(--hand-pill);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

:root[data-design="sketch"] .btn-primary,
:root[data-design="sketch"] .btn-duel {
  background: var(--you);
  color: #1d1b18;
  box-shadow: 3px 4px 0 var(--ink);
}

:root[data-design="sketch"] .btn-secondary {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 4px 0 var(--off-mint);
}

:root[data-design="sketch"] .btn-ghost {
  border-color: transparent;
}

:root[data-design="sketch"] .btn:active:not(.btn-ghost) {
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

:root[data-design="sketch"] .icon-btn,
:root[data-design="sketch"] .streak,
:root[data-design="sketch"] .tab,
:root[data-design="sketch"] .chip {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 2px 3px 0 var(--off-sky);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root[data-design="sketch"] .icon-btn {
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
}

:root[data-design="sketch"] .tab,
:root[data-design="sketch"] .streak,
:root[data-design="sketch"] .chip {
  border-radius: var(--hand-pill);
}

:root[data-design="sketch"] .tab.is-active {
  background: var(--off-sun);
  color: var(--ink);
}

:root[data-design="sketch"] .chip.is-active {
  background: var(--ink);
  color: var(--paper);
}

:root[data-design="sketch"] .fab {
  background: var(--you);
  color: #1d1b18;
  border: 2px solid var(--ink);
  border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  box-shadow: 3px 4px 0 var(--ink);
}

/* Small parts: flat pastel with an ink line, like the sketch fills */

:root[data-design="sketch"] .icon-dot,
:root[data-design="sketch"] .avatar {
  background: var(--off-sky);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: none;
}

:root[data-design="sketch"] .icon-dot.tone-1,
:root[data-design="sketch"] .avatar.tone-1 { background: var(--off-peach); }
:root[data-design="sketch"] .icon-dot.tone-2,
:root[data-design="sketch"] .avatar.tone-2 { background: var(--off-mint); }
:root[data-design="sketch"] .icon-dot.tone-3,
:root[data-design="sketch"] .avatar.tone-3 { background: var(--off-lilac); }
:root[data-design="sketch"] .avatar.tone-4 { background: var(--off-pink); }

:root[data-design="sketch"] .bar {
  height: 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}

:root[data-design="sketch"] .bar-fill {
  background: var(--you);
  border-radius: 0;
}

:root[data-design="sketch"] .progress {
  height: 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

:root[data-design="sketch"] .progress-fill {
  background: var(--you);
  border-radius: 0;
}

/* Lessons on the path */

:root[data-design="sketch"] .lesson {
  border: 2px solid var(--ink);
  border-radius: var(--hand-pill);
  background: var(--paper);
}

:root[data-design="sketch"] .lesson.is-open {
  background: var(--you);
  color: #1d1b18;
  box-shadow: 2px 3px 0 var(--ink);
}

:root[data-design="sketch"] .lesson.is-open .icon {
  color: #1d1b18;
}

:root[data-design="sketch"] .lesson.is-done {
  background: var(--off-mint);
}

:root[data-design="sketch"] .lesson.is-locked {
  border-style: dashed;
  background: transparent;
}

:root[data-design="sketch"] .unit.is-current {
  border-color: var(--ink);
  --off: var(--you);
}

/* Progress arc, drawn by hand */

:root[data-design="sketch"] .gauge-art {
  filter: url(#gauge-rough);
}

:root[data-design="sketch"] .gauge .tick {
  stroke: var(--ink);
  opacity: 0.5;
}

:root[data-design="sketch"] .gauge .tick.is-on {
  stroke: var(--accent);
  opacity: 1;
}

:root[data-design="sketch"] .gauge-track {
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0.35;
}

/* Challenge screens */

:root[data-design="sketch"] .scoreboard,
:root[data-design="sketch"] .category,
:root[data-design="sketch"] .duel-card,
:root[data-design="sketch"] .number-row {
  border-radius: var(--hand-l);
}

:root[data-design="sketch"] .duel-card.is-turn {
  border-color: var(--ink);
  --off: var(--you);
}

:root[data-design="sketch"] .row input {
  border: 2px solid var(--ink);
  border-radius: var(--hand-pill);
  background: var(--paper);
}

:root[data-design="sketch"] .mark {
  border: 1.5px solid var(--ink);
}

:root[data-design="sketch"] .note {
  border: 2px dashed var(--ink);
  background: var(--accent-soft);
}

/* Help: the design choice */

.design-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.design-choice {
  cursor: pointer;
  font-size: 15px;
  padding: 8px 18px;
}

@media (max-width: 360px) {
  :root[data-design="sketch"] .prompt,
  :root[data-design="sketch"] .sketch + .prompt {
    font-size: 22px;
  }
}