/* chalkboard.css — Hustler's Mansion Chalkboard Command Center.
 *
 * The OPPOSITE physics of cardboard: there every tile is an object; here
 * there is exactly ONE surface — the slate — and everything else is a MARK
 * on it. No fills, no bevels, no elevation on anything drawn. A press is
 * the line gone over again, harder — nothing translates, nothing scales.
 * Depth belongs only to real objects: the sticky-note action tiles and the
 * sticky-note hamburger, which is why they alone cast shadows.
 *
 * The stroke is not a border: it is drawn on a pseudo-element and MASKED
 * with the skip texture — the holes where the stick missed the low spots.
 * Corners carry radial blooms (chalk builds up where strokes start/stop).
 * The box is drawn STRAIGHT — radius 4px/3px, rotation under a quarter
 * degree — a ruled box with a convincing line beats a wonky box.
 *
 * Textures are generated feTurbulence data-URIs, no image files. The
 * residue layer rides at .10 with the arc alphas scaled up — one opacity
 * dial for a multi-layer background, so the alphas balance.
 *
 * Deliberately NOT ported into the app: the wooden frame, the chalk ledge
 * and the two loose paper notes. Those are page furniture for a standalone
 * board; on a phone there is no dead space, and the spec's own rule is
 * "notes go in dead space or they don't go."
 *
 * .saka-gain keeps its money flash — the stroke pseudo skips gain tiles
 * for the duration of the sweep, same guard the other skins use.
 */

:root[data-skin="blackboard"] {
  --bg: #141416; /* overridden below for green */
  --chalk: #F4F2EC; --chalk-soft: #C8C5BC; --chalk-faint: #8C8A83;
  --surface: #232326; --surface-2: color-mix(in srgb, #232326 80%, #000);
  --text: #F4F2EC; --muted: #C8C5BC; --faint: #8C8A83;
  --brand: #F5DE9A; --brand-weak: rgba(244,242,236,.12); --on-brand: #1C1C1E;
  --green: #A9DCA3; --green-weak: rgba(244,242,236,.1);
  --amber: #F2BB84; --amber-weak: rgba(244,242,236,.1);
  --red: #EFA0A0; --red-weak: rgba(244,242,236,.1);
  --border: rgba(244,242,236,.4); --border-2: rgba(244,242,236,.55);
  --line-soft: rgba(244,242,236,.18);
  --r-lg: 4px; --r-md: 3px;
  --ck-ghost: 244,242,236;
  --ck-stroke-w: 3.64px; --ck-stroke-a: 0.82;
  --ck-halo: 5.5px rgba(244,242,236,.92); --ck-press-w: 4.42px; --ck-press-halo: 11px rgba(244,242,236,1);
  --font-display: 'Caveat', cursive;
  color-scheme: dark;
}
:root[data-skin="blackboard"] body {
  background:
    radial-gradient(90% 60% at 22% 12%, rgba(244,242,236,.05), transparent 62%),
    radial-gradient(70% 50% at 82% 78%, rgba(244,242,236,.04), transparent 60%),
    linear-gradient(168deg, #1C1C1E, #141416 52%, #0E0E10);
  font-family: 'Patrick Hand', 'Libre Franklin', sans-serif;
  overflow-x: clip;
  /* the tooth layer below is absolute; body must be its containing block or
     it sizes against the viewport and the slate goes flat one screen down */
  position: relative;
}
/* the slate's tooth, then last night's dusting — screen blend at .10, arcs
   doing the balancing because a multi-layer background has ONE opacity dial */
:root[data-skin="blackboard"] body::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
  z-index: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22t%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20seed%3D%229%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23t%29%22%2F%3E%3C%2Fsvg%3E"); background-size: 200px 200px;
}
:root[data-skin="blackboard"] #root::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
  z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .10;
  background-image:
    radial-gradient(58% 11% at 28% 19%, rgba(244,242,236,.55), transparent 72%),
    radial-gradient(50% 9% at 70% 37%, rgba(244,242,236,.45), transparent 72%),
    radial-gradient(66% 13% at 43% 59%, rgba(244,242,236,.40), transparent 74%),
    radial-gradient(42% 8% at 76% 74%, rgba(244,242,236,.50), transparent 72%),
    radial-gradient(54% 10% at 18% 86%, rgba(244,242,236,.35), transparent 74%),
    linear-gradient(0deg, rgba(244,242,236,.5), transparent 20%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%22500%22%3E%3Cfilter%20id%3D%22r%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.004%200.016%22%20numOctaves%3D%222%22%20seed%3D%224%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23r%29%22%2F%3E%3C%2Fsvg%3E");
  background-size: auto, auto, auto, auto, auto, auto, 500px 500px;
}
:root[data-skin="blackboard"] #root { position: relative; z-index: 1; }

/* a tile is a DRAWN BOX — no fill, no elevation, the stroke carries it */
:root[data-skin="blackboard"] .pv, :root[data-skin="blackboard"] .saka-w:not(.act), :root[data-skin="blackboard"] .set-card, :root[data-skin="blackboard"] .pvl, :root[data-skin="blackboard"] .tm-rc {
  position: relative; isolation: isolate;
  background: transparent; border: 0; border-radius: 4px;
  box-shadow: none; overflow: visible;
}
:root[data-skin="blackboard"] .pv::before, :root[data-skin="blackboard"] .saka-w:not(.act):not(.saka-gain)::before,
:root[data-skin="blackboard"] .set-card::before, :root[data-skin="blackboard"] .pvl::before, :root[data-skin="blackboard"] .tm-rc::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: var(--ck-stroke-w) solid rgba(244,242,236,var(--ck-stroke-a));
  border-radius: 4px 3px;
  filter: drop-shadow(0 0 var(--ck-halo));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 68.6px 68.6px; mask-size: 68.6px 68.6px;
  background:
    radial-gradient(9px 9px at 0 0, rgba(244,242,236,0.442), transparent 70%),
    radial-gradient(9px 9px at 100% 0, rgba(244,242,236,0.39), transparent 70%),
    radial-gradient(9px 9px at 100% 100%, rgba(244,242,236,0.364), transparent 70%),
    radial-gradient(9px 9px at 0 100%, rgba(244,242,236,0.442), transparent 70%);
  transition: border-color 150ms ease, filter 150ms ease;
}
/* press: the line gone over again, harder. Nothing moves. */
:root[data-skin="blackboard"] .saka-w:not(.act):active, :root[data-skin="blackboard"] .pv:active {
  background: rgba(244,242,236,.055);
  transform: none;
}
:root[data-skin="blackboard"] .saka-w:not(.act):active::before, :root[data-skin="blackboard"] .pv:active::before {
  border-width: var(--ck-press-w);
  border-color: rgba(244,242,236,1);
  filter: drop-shadow(0 0 var(--ck-press-halo));
}
:root[data-skin="blackboard"] .saka-grid .saka-w:nth-child(5n+1) { rotate: -0.11deg; }
:root[data-skin="blackboard"] .saka-grid .saka-w:nth-child(5n+2) { rotate: 0.08deg; }
:root[data-skin="blackboard"] .saka-grid .saka-w:nth-child(5n+3) { rotate: -0.05deg; }
:root[data-skin="blackboard"] .saka-grid .saka-w:nth-child(5n+4) { rotate: 0.12deg; }
:root[data-skin="blackboard"] .saka-grid .saka-w:nth-child(5n+0) { rotate: -0.07deg; }

:root[data-skin="blackboard"] .saka-board {
  --saka-radius: 0px; --saka-row-h: 128px;
  --saka-surface: transparent; --saka-surface-2: rgba(244,242,236,.06);
  --saka-border: transparent; --saka-border-2: transparent;
  --saka-text: #F4F2EC; --saka-muted: #C8C5BC; --saka-faint: #8C8A83;
  --saka-accent: #F5DE9A; --saka-accent-weak: rgba(244,242,236,.1); --saka-on-accent: #1C1C1E;
  --saka-green: #A9DCA3; --saka-red: #EFA0A0; --saka-amber: #F2BB84;
  --saka-font: 'Patrick Hand', sans-serif;
}
@media (max-width: 600px) { :root[data-skin="blackboard"] .saka-board { --saka-row-h: 116px; } }
:root[data-skin="blackboard"] .saka-board .saka-grid { gap: 16px; }
:root[data-skin="blackboard"] .saka-w { padding: 14px 16px 15px; }
:root[data-skin="blackboard"] .saka-w.q { padding: 12px 13px 13px; }

/* chalk writing */
:root[data-skin="blackboard"] .saka-wt {
  font-family: 'Patrick Hand', sans-serif; font-size: .74rem; letter-spacing: .11em;
  color: #C8C5BC;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 85.7px 85.7px; mask-size: 85.7px 85.7px;
  text-shadow: 0 0 6px rgba(244,242,236,0.44);
}
:root[data-skin="blackboard"] .saka-big {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.8rem;
  color: #F4F2EC; text-shadow: 0 0 10px rgba(244,242,236,0.616);
}
:root[data-skin="blackboard"] .saka-big.g { color: #A9DCA3; text-shadow: 0 0 10px color-mix(in srgb, #A9DCA3 61%, transparent); }
:root[data-skin="blackboard"] .saka-big.amb { color: #F2BB84; text-shadow: 0 0 10px color-mix(in srgb, #F2BB84 61%, transparent); }
:root[data-skin="blackboard"] .saka-big.gold { color: #F5DE9A; text-shadow: 0 0 10px color-mix(in srgb, #F5DE9A 61%, transparent); }
:root[data-skin="blackboard"] .tb-name {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px;
  color: #F5DE9A; rotate: -1deg;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 110px 110px; mask-size: 110px 110px;
  text-shadow: 0 0 8px rgba(244,242,236,.6);
}
:root[data-skin="blackboard"] .pv h2, :root[data-skin="blackboard"] .hg-greet {
  font-family: 'Caveat', cursive; font-weight: 700;
  color: #F5DE9A; text-shadow: 0 0 9px color-mix(in srgb, #F5DE9A 55%, transparent);
}
/* meters: an outlined box filled with hatching — drawn, not a solid bar */
:root[data-skin="blackboard"] .splitbar {
  background: transparent; height: 9px;
  box-shadow: inset 0 0 0 1.5px rgba(244,242,236,.38);
}
:root[data-skin="blackboard"] .splitbar .a {
  background: repeating-linear-gradient(58deg, #F5DE9A 0 2px, transparent 2px 5px);
}
:root[data-skin="blackboard"] .splitbar .b { background: transparent; }

/* THE STICKY NOTES — the four Actions are paper, the one physical thing on
   the slate, so they get the depth chalk is denied. Press pushes them flat. */
:root[data-skin="blackboard"] .saka-w.act {
  background: linear-gradient(176deg, #F5EBB4, #EEDF96);
  border-radius: 2px; rotate: -0.6deg;
  box-shadow: 0 6px 10px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
}
:root[data-skin="blackboard"] .saka-w.act::before {
  content: ''; position: absolute; top: -6px; left: 50%; width: 44px; height: 13px;
  transform: translateX(-50%) rotate(1.2deg);
  background: rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.16);
}
:root[data-skin="blackboard"] .saka-w.act:active {
  transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
:root[data-skin="blackboard"] .saka-w.act b, :root[data-skin="blackboard"] .saka-w.act span { color: #3A3428; text-shadow: none; }
:root[data-skin="blackboard"] .saka-w.act .saka-ic { color: #3A3428; }
/* the hamburger IS a sticky note — paper square, taped, bars inked */
:root[data-skin="blackboard"] .ham {
  background: linear-gradient(176deg, #F5EBB4, #EEDF96);
  border-radius: 2px; box-shadow: 0 3px 6px rgba(0,0,0,.4);
  position: relative;
}
:root[data-skin="blackboard"] .ham::after {
  content: ''; position: absolute; top: -4px; left: 50%; width: 26px; height: 8px;
  transform: translateX(-50%) rotate(-1.4deg);
  background: rgba(255,255,255,.34);
}
:root[data-skin="blackboard"] .ham i { background: #2A2620; }

/* panels and chrome stay marks */
:root[data-skin="blackboard"] .tl, :root[data-skin="blackboard"] .floor {
  background: rgba(244,242,236,.04);
  border: 1.5px solid rgba(244,242,236,.3); border-radius: 4px;
}
:root[data-skin="blackboard"] .tlapt {
  background: rgba(244,242,236,.08); border: 1.5px solid rgba(244,242,236,.55);
  box-shadow: none;
}
:root[data-skin="blackboard"] .wkd {
  background: transparent; border: 1.5px solid rgba(244,242,236,.4);
  box-shadow: none; color: #F4F2EC;
}
:root[data-skin="blackboard"] .wkd.sel { background: rgba(244,242,236,.14); border-color: #F5DE9A; }
:root[data-skin="blackboard"] .mini, :root[data-skin="blackboard"] .pill {
  background: transparent; border: 1.5px solid rgba(244,242,236,.5); color: #F4F2EC;
  box-shadow: none;
}
:root[data-skin="blackboard"] .mini.gold { background: rgba(244,242,236,.12); border-color: #F5DE9A; color: #F5DE9A; }

:root[data-skin="schoolgreen"] {
  /* The GROUND is green, so --bg must be green: .topbar, .sover and every
     color-mix toward --bg consume the token, and the near-black value painted
     a black bar and black overlays over a green slate. Matches the middle of
     body's gradient below. */
  --bg: #2A4534;
  --chalk: #F0F3E9; --chalk-soft: #C4D0C0; --chalk-faint: #8CA08F;
  --surface: #3A5745; --surface-2: color-mix(in srgb, #3A5745 80%, #000);
  --text: #F0F3E9; --muted: #C4D0C0; --faint: #8CA08F;
  --brand: #F4DE93; --brand-weak: rgba(240,243,233,.12); --on-brand: #1C1C1E;
  --green: #B0E0A6; --green-weak: rgba(240,243,233,.1);
  --amber: #F1BA80; --amber-weak: rgba(240,243,233,.1);
  --red: #EEA0A0; --red-weak: rgba(240,243,233,.1);
  --border: rgba(240,243,233,.4); --border-2: rgba(240,243,233,.55);
  --line-soft: rgba(240,243,233,.18);
  --r-lg: 4px; --r-md: 3px;
  --ck-ghost: 240,243,233;
  --ck-stroke-w: 2.8px; --ck-stroke-a: 0.82;
  --ck-halo: 4px rgba(240,243,233,.672); --ck-press-w: 3.4px; --ck-press-halo: 8px rgba(240,243,233,.96);
  --font-display: 'Caveat', cursive;
  color-scheme: dark;
}
:root[data-skin="schoolgreen"] body {
  background:
    radial-gradient(90% 60% at 22% 12%, rgba(240,243,233,.05), transparent 62%),
    radial-gradient(70% 50% at 82% 78%, rgba(240,243,233,.04), transparent 60%),
    linear-gradient(168deg, #33513F, #2A4534 52%, #243B2C);
  font-family: 'Patrick Hand', 'Libre Franklin', sans-serif;
  overflow-x: clip;
  /* same containing-block rule as blackboard — see above */
  position: relative;
}
/* the slate's tooth, then last night's dusting — screen blend at .10, arcs
   doing the balancing because a multi-layer background has ONE opacity dial */
:root[data-skin="schoolgreen"] body::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
  z-index: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22t%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20seed%3D%229%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23t%29%22%2F%3E%3C%2Fsvg%3E"); background-size: 200px 200px;
}
:root[data-skin="schoolgreen"] #root::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
  z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .10;
  background-image:
    radial-gradient(58% 11% at 28% 19%, rgba(240,243,233,.55), transparent 72%),
    radial-gradient(50% 9% at 70% 37%, rgba(240,243,233,.45), transparent 72%),
    radial-gradient(66% 13% at 43% 59%, rgba(240,243,233,.40), transparent 74%),
    radial-gradient(42% 8% at 76% 74%, rgba(240,243,233,.50), transparent 72%),
    radial-gradient(54% 10% at 18% 86%, rgba(240,243,233,.35), transparent 74%),
    linear-gradient(0deg, rgba(240,243,233,.5), transparent 20%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%22500%22%3E%3Cfilter%20id%3D%22r%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.004%200.016%22%20numOctaves%3D%222%22%20seed%3D%224%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23r%29%22%2F%3E%3C%2Fsvg%3E");
  background-size: auto, auto, auto, auto, auto, auto, 500px 500px;
}
:root[data-skin="schoolgreen"] #root { position: relative; z-index: 1; }

/* a tile is a DRAWN BOX — no fill, no elevation, the stroke carries it */
:root[data-skin="schoolgreen"] .pv, :root[data-skin="schoolgreen"] .saka-w:not(.act), :root[data-skin="schoolgreen"] .set-card, :root[data-skin="schoolgreen"] .pvl, :root[data-skin="schoolgreen"] .tm-rc {
  position: relative; isolation: isolate;
  background: transparent; border: 0; border-radius: 4px;
  box-shadow: none; overflow: visible;
}
:root[data-skin="schoolgreen"] .pv::before, :root[data-skin="schoolgreen"] .saka-w:not(.act):not(.saka-gain)::before,
:root[data-skin="schoolgreen"] .set-card::before, :root[data-skin="schoolgreen"] .pvl::before, :root[data-skin="schoolgreen"] .tm-rc::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: var(--ck-stroke-w) solid rgba(240,243,233,var(--ck-stroke-a));
  border-radius: 4px 3px;
  filter: drop-shadow(0 0 var(--ck-halo));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 68.6px 68.6px; mask-size: 68.6px 68.6px;
  background:
    radial-gradient(9px 9px at 0 0, rgba(240,243,233,0.34), transparent 70%),
    radial-gradient(9px 9px at 100% 0, rgba(240,243,233,0.3), transparent 70%),
    radial-gradient(9px 9px at 100% 100%, rgba(240,243,233,0.28), transparent 70%),
    radial-gradient(9px 9px at 0 100%, rgba(240,243,233,0.34), transparent 70%);
  transition: border-color 150ms ease, filter 150ms ease;
}
/* press: the line gone over again, harder. Nothing moves. */
:root[data-skin="schoolgreen"] .saka-w:not(.act):active, :root[data-skin="schoolgreen"] .pv:active {
  background: rgba(240,243,233,.055);
  transform: none;
}
:root[data-skin="schoolgreen"] .saka-w:not(.act):active::before, :root[data-skin="schoolgreen"] .pv:active::before {
  border-width: var(--ck-press-w);
  border-color: rgba(240,243,233,1);
  filter: drop-shadow(0 0 var(--ck-press-halo));
}
:root[data-skin="schoolgreen"] .saka-grid .saka-w:nth-child(5n+1) { rotate: -0.242deg; }
:root[data-skin="schoolgreen"] .saka-grid .saka-w:nth-child(5n+2) { rotate: 0.176deg; }
:root[data-skin="schoolgreen"] .saka-grid .saka-w:nth-child(5n+3) { rotate: -0.11deg; }
:root[data-skin="schoolgreen"] .saka-grid .saka-w:nth-child(5n+4) { rotate: 0.264deg; }
:root[data-skin="schoolgreen"] .saka-grid .saka-w:nth-child(5n+0) { rotate: -0.154deg; }

:root[data-skin="schoolgreen"] .saka-board {
  --saka-radius: 0px; --saka-row-h: 128px;
  --saka-surface: transparent; --saka-surface-2: rgba(240,243,233,.06);
  --saka-border: transparent; --saka-border-2: transparent;
  --saka-text: #F0F3E9; --saka-muted: #C4D0C0; --saka-faint: #8CA08F;
  --saka-accent: #F4DE93; --saka-accent-weak: rgba(240,243,233,.1); --saka-on-accent: #1C1C1E;
  --saka-green: #B0E0A6; --saka-red: #EEA0A0; --saka-amber: #F1BA80;
  --saka-font: 'Patrick Hand', sans-serif;
}
@media (max-width: 600px) { :root[data-skin="schoolgreen"] .saka-board { --saka-row-h: 116px; } }
:root[data-skin="schoolgreen"] .saka-board .saka-grid { gap: 16px; }
:root[data-skin="schoolgreen"] .saka-w { padding: 14px 16px 15px; }
:root[data-skin="schoolgreen"] .saka-w.q { padding: 12px 13px 13px; }

/* chalk writing */
:root[data-skin="schoolgreen"] .saka-wt {
  font-family: 'Patrick Hand', sans-serif; font-size: .74rem; letter-spacing: .11em;
  color: #C4D0C0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 85.7px 85.7px; mask-size: 85.7px 85.7px;
  text-shadow: 0 0 6px rgba(240,243,233,0.32);
}
:root[data-skin="schoolgreen"] .saka-big {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.8rem;
  color: #F0F3E9; text-shadow: 0 0 10px rgba(240,243,233,0.448);
}
:root[data-skin="schoolgreen"] .saka-big.g { color: #B0E0A6; text-shadow: 0 0 10px color-mix(in srgb, #B0E0A6 44%, transparent); }
:root[data-skin="schoolgreen"] .saka-big.amb { color: #F1BA80; text-shadow: 0 0 10px color-mix(in srgb, #F1BA80 44%, transparent); }
:root[data-skin="schoolgreen"] .saka-big.gold { color: #F4DE93; text-shadow: 0 0 10px color-mix(in srgb, #F4DE93 44%, transparent); }
:root[data-skin="schoolgreen"] .tb-name {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px;
  color: #F4DE93; rotate: -1deg;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.7%200.55%22%20numOctaves%3D%223%22%20seed%3D%225%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%221%201%201%201%201%201%201%200%201%201%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 110px 110px; mask-size: 110px 110px;
  text-shadow: 0 0 8px rgba(240,243,233,.6);
}
:root[data-skin="schoolgreen"] .pv h2, :root[data-skin="schoolgreen"] .hg-greet {
  font-family: 'Caveat', cursive; font-weight: 700;
  color: #F4DE93; text-shadow: 0 0 9px color-mix(in srgb, #F4DE93 55%, transparent);
}
/* meters: an outlined box filled with hatching — drawn, not a solid bar */
:root[data-skin="schoolgreen"] .splitbar {
  background: transparent; height: 9px;
  box-shadow: inset 0 0 0 1.5px rgba(240,243,233,.38);
}
:root[data-skin="schoolgreen"] .splitbar .a {
  background: repeating-linear-gradient(58deg, #F4DE93 0 2px, transparent 2px 5px);
}
:root[data-skin="schoolgreen"] .splitbar .b { background: transparent; }

/* THE STICKY NOTES — the four Actions are paper, the one physical thing on
   the slate, so they get the depth chalk is denied. Press pushes them flat. */
:root[data-skin="schoolgreen"] .saka-w.act {
  background: linear-gradient(176deg, #F5EBB4, #EEDF96);
  border-radius: 2px; rotate: -0.6deg;
  box-shadow: 0 6px 10px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
}
:root[data-skin="schoolgreen"] .saka-w.act::before {
  content: ''; position: absolute; top: -6px; left: 50%; width: 44px; height: 13px;
  transform: translateX(-50%) rotate(1.2deg);
  background: rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.16);
}
:root[data-skin="schoolgreen"] .saka-w.act:active {
  transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
:root[data-skin="schoolgreen"] .saka-w.act b, :root[data-skin="schoolgreen"] .saka-w.act span { color: #3A3428; text-shadow: none; }
:root[data-skin="schoolgreen"] .saka-w.act .saka-ic { color: #3A3428; }
/* the hamburger IS a sticky note — paper square, taped, bars inked */
:root[data-skin="schoolgreen"] .ham {
  background: linear-gradient(176deg, #F5EBB4, #EEDF96);
  border-radius: 2px; box-shadow: 0 3px 6px rgba(0,0,0,.4);
  position: relative;
}
:root[data-skin="schoolgreen"] .ham::after {
  content: ''; position: absolute; top: -4px; left: 50%; width: 26px; height: 8px;
  transform: translateX(-50%) rotate(-1.4deg);
  background: rgba(255,255,255,.34);
}
:root[data-skin="schoolgreen"] .ham i { background: #2A2620; }

/* panels and chrome stay marks */
:root[data-skin="schoolgreen"] .tl, :root[data-skin="schoolgreen"] .floor {
  background: rgba(240,243,233,.04);
  border: 1.5px solid rgba(240,243,233,.3); border-radius: 4px;
}
:root[data-skin="schoolgreen"] .tlapt {
  background: rgba(240,243,233,.08); border: 1.5px solid rgba(240,243,233,.55);
  box-shadow: none;
}
:root[data-skin="schoolgreen"] .wkd {
  background: transparent; border: 1.5px solid rgba(240,243,233,.4);
  box-shadow: none; color: #F0F3E9;
}
:root[data-skin="schoolgreen"] .wkd.sel { background: rgba(240,243,233,.14); border-color: #F4DE93; }
:root[data-skin="schoolgreen"] .mini, :root[data-skin="schoolgreen"] .pill {
  background: transparent; border: 1.5px solid rgba(240,243,233,.5); color: #F0F3E9;
  box-shadow: none;
}
:root[data-skin="schoolgreen"] .mini.gold { background: rgba(240,243,233,.12); border-color: #F4DE93; color: #F4DE93; }

/* ── Money is drawn on the board too ──────────────────────────────────── */
:root[data-skin="blackboard"] .pcard, :root[data-skin="schoolgreen"] .pcard,
:root[data-skin="blackboard"] .hero, :root[data-skin="schoolgreen"] .hero {
  position: relative; isolation: isolate; background: transparent;
  border: 0; border-radius: 4px; box-shadow: none; overflow: visible;
}
:root[data-skin="blackboard"] .pcard::before, :root[data-skin="schoolgreen"] .pcard::before,
:root[data-skin="blackboard"] .hero::before, :root[data-skin="schoolgreen"] .hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: var(--ck-stroke-w) solid rgba(var(--ck-ghost),var(--ck-stroke-a));
  border-radius: 4px 3px;
  filter: drop-shadow(0 0 var(--ck-halo));
}
:root[data-skin="blackboard"] .hero .hnum, :root[data-skin="schoolgreen"] .hero .hnum {
  font-family: 'Caveat', cursive; font-weight: 700; color: var(--green);
  text-shadow: 0 0 10px color-mix(in srgb, var(--green) 55%, transparent);
}
:root[data-skin="blackboard"] .mchip, :root[data-skin="schoolgreen"] .mchip,
:root[data-skin="blackboard"] .method-chip, :root[data-skin="schoolgreen"] .method-chip {
  background: transparent; border: 1.5px solid rgba(var(--ck-ghost),.5);
  color: var(--chalk); box-shadow: none;
}

/* Analytics bars are DRAWN — hatched chalk, not poured fills */
:root[data-skin="blackboard"] .an-bar, :root[data-skin="schoolgreen"] .an-bar {
  background: repeating-linear-gradient(58deg, rgba(var(--ck-ghost),.5) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1.5px rgba(var(--ck-ghost),.38); border-radius: 2px;
}
:root[data-skin="blackboard"] .an-col.cur .an-bar, :root[data-skin="schoolgreen"] .an-col.cur .an-bar {
  background: repeating-linear-gradient(58deg, var(--brand) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 70%, transparent);
}
:root[data-skin="blackboard"] .an-title, :root[data-skin="schoolgreen"] .an-title,
:root[data-skin="blackboard"] .an-big, :root[data-skin="schoolgreen"] .an-big,
:root[data-skin="blackboard"] .an-big2, :root[data-skin="schoolgreen"] .an-big2 {
  font-family: 'Caveat', cursive; font-weight: 700;
  text-shadow: 0 0 9px rgba(var(--ck-ghost),.4);
}
:root[data-skin="blackboard"] .an-track, :root[data-skin="schoolgreen"] .an-track {
  background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--ck-ghost),.38); height: 9px;
}
:root[data-skin="blackboard"] .an-track i, :root[data-skin="schoolgreen"] .an-track i {
  background: repeating-linear-gradient(58deg, var(--brand) 0 2px, transparent 2px 5px);
}

/* The calendar and the menu are drawn boxes like everything else. */
:root[data-skin="blackboard"] .tl, :root[data-skin="schoolgreen"] .tl,
:root[data-skin="blackboard"] .sv-card, :root[data-skin="schoolgreen"] .sv-card {
  position: relative; isolation: isolate;
  background: rgba(var(--ck-ghost),.03); border: 0; border-radius: 4px; box-shadow: none;
}
:root[data-skin="blackboard"] .tl::before, :root[data-skin="schoolgreen"] .tl::before,
:root[data-skin="blackboard"] .sv-card::before, :root[data-skin="schoolgreen"] .sv-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: var(--ck-stroke-w) solid rgba(var(--ck-ghost),var(--ck-stroke-a));
  border-radius: 4px 3px;
  filter: drop-shadow(0 0 var(--ck-halo));
}

/* fields: a box drawn to write in — the stroke brightens when you do */
:root[data-skin="blackboard"] .chip-input input, :root[data-skin="schoolgreen"] .chip-input input {
  background: rgba(var(--ck-ghost),.05);
  border: 1.5px solid rgba(var(--ck-ghost),.5); border-radius: 4px;
  box-shadow: none; color: var(--chalk); caret-color: var(--brand); }
:root[data-skin="blackboard"] .chip-input input:focus, :root[data-skin="schoolgreen"] .chip-input input:focus {
  border-color: rgba(var(--ck-ghost),.95);
  box-shadow: 0 0 7px rgba(var(--ck-ghost),.35); background: rgba(var(--ck-ghost),.08); }

:root[data-skin="blackboard"] .tlapt, :root[data-skin="schoolgreen"] .tlapt {
  background: rgba(var(--ck-ghost),.13);
  border: 1.5px solid var(--brand); border-left-width: 3px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--brand) 35%, transparent);
}