/* Speeltafel: the app as cards on a green felt table, in the spirit of Balatro (Plan 7). The other look of the app,
   next to Schrift (styles.css); chosen with the cards button in the tab bar, or in the account sheet (theme.js sets
   data-look on <html>, boot.js before the first paint). Everything here is under :root[data-look="speeltafel"], so
   Schrift stays exactly as it is.

   The table is felt; what's yours (tasks, habits, lists) are cards: a light face, a thick dark edge, rounded corners
   and a hard shadow, a little askew, lifting when you point at one; what the app tells you is still a yellow card;
   panels (sheets, the tab bar, a sheet's sections) are slate, as the game's. Headings, buttons and choices are in a
   pixel letter; names and titles stay in Crimson. No red here either: the main button is blue, a choice picked gold.

   Fase 1 of Plan 7 (reports/Plan 7 - Speeltafel.md): the look, from tokens and a few rules per kind of paper. The
   cards that move (a hand of cards, dealing, flying to a pile) come in its later fases.

   Pixelify Sans (fonts/pixelify-sans.woff2, Latin) by Stefie Justprince, SIL Open Font License 1.1. */

@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/pixelify-sans.woff2") format("woff2");
}

:root[data-look="speeltafel"] {
  /* the table */
  --felt-1: #2b6d55;
  --felt-2: #1d4c3c;
  --felt-3: #0f2f24;
  --slate: #2c3341;
  --slate-2: #3b4352;
  --slate-3: #232936;
  --edge: #151821;
  --edge-w: 2.5px;
  --face: #fbf6ea;
  --gold: #f5c542;
  --gold-ink: #2c2408;
  --blue: #2d63c9;
  --blue-edge: #102a63;
  --pixel: "Pixelify Sans", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --card-r: 10px;
  --lift-ease: cubic-bezier(.3, 1.55, .5, 1); /* a card lifts with a little bounce */

  /* Schrift's tokens, for a page of felt and slate panels: light ink on them (as at night) */
  --paper: #173f31;
  --grid: rgba(255, 255, 255, .07);
  --grid-strong: rgba(255, 255, 255, .17);
  --ink: #f4f1e6;
  --ink-soft: rgba(244, 241, 230, .14);
  --graphite: #ebe7da;
  --pencil: rgba(235, 231, 218, .68);
  --pencil-soft: rgba(235, 231, 218, .3);
  --marker: #f5c542;
  --marker-soft: rgba(245, 197, 66, .36);
  --marker-ink: rgba(245, 197, 66, .5);
  --note: #fff1a1;
  --note-text: #2f2a12;
  --shadow: 0 0 0 3px var(--edge), 8px 10px 0 3px rgba(0, 0, 0, .35);
  --scrap: var(--note);
  --slip: #39414f;
  --card: var(--slate-2);
  --habit-note: #dde8fa;
  --task-paper: #f9e2db;
  --list-paper: #def0d6;
  --washi: var(--slate);
  --tape: transparent;
  --tape-paper: transparent;
  --tape-row: transparent;
  --torn: none;
  --torn-task: none;
  --torn-slip: none;
  --torn-bar: none;
  --scrap-shadow: 0 0 0 var(--edge-w) var(--edge), 4px 5px 0 var(--edge-w) rgba(0, 0, 0, .3);
  --sticker-shadow: 0 0 0 var(--edge-w) var(--edge), 4px 5px 0 var(--edge-w) rgba(0, 0, 0, .32);
  --sticker-lift: 0 0 0 var(--edge-w) var(--edge), 8px 11px 0 var(--edge-w) rgba(0, 0, 0, .26);
  --scribble-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f4f1e6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.4L6.4 2.6 2.8 11.4 11.4 2.8 2.6 16.6 16.6 2.6 5.2 17.6 17.4 5.4 10.4 17.6 17.6 10.4 15.4 17.4'/%3E%3C/svg%3E");
  --skip-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23aab0bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14.8C4.2 7.2 13 5.6 15.9 12.2'/%3E%3Cpath d='M12.2 11.6l3.8 1.1 1.2-3.7'/%3E%3C/svg%3E");
  --cross-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23aab0bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5.2 5.6c3.2 2.9 6.3 6 9.4 9.1M14.6 5.2c-3.1 3.1-6 6.2-9.1 9.4'/%3E%3C/svg%3E");
  --away-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23aab0bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.6v9.2M6.4 9.4l3.6 3.6 3.6-3.6M4.6 16.4h10.8'/%3E%3C/svg%3E");
  --pause-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23596173' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7.2 5.2v9.6M12.8 5.2v9.6'/%3E%3C/svg%3E");
  --weekend-tint: rgba(245, 197, 66, .08);
  color-scheme: dark;
}
/* at night the felt is darker and the faces a little less bright */
:root[data-look="speeltafel"][data-theme="dark"] {
  --felt-1: #1f5444;
  --felt-2: #143a2e;
  --felt-3: #08201a;
  --paper: #0e241c;
  --face: #ece5d3;
  --habit-note: #c9d8f0;
  --task-paper: #ebd0c7;
  --list-paper: #cde2c4;
  --note: #f0de86;
}

/* the cards themselves: written on in the day's colours (dark on a light face), at night too */
:root[data-look="speeltafel"] :where(.rows > .row.task, .toc-list > .toc, .pockets > .toc, .mc-task, .make-card, .look-card, .kind-card, .make-pick, .make-step.now, .toast, .note) {
  --paper: #fffdf6;
  --ink: #1f3fa8;
  --ink-soft: rgba(31, 63, 168, .13);
  --graphite: #2b2f36;
  --pencil: rgba(43, 47, 54, .62);
  --pencil-soft: rgba(43, 47, 54, .3);
  --grid: rgba(21, 24, 33, .1);
  --grid-strong: rgba(21, 24, 33, .26);
  --card: #fffdf6;
  --marker-ink: rgba(214, 150, 0, .42);
  --marker-soft: rgba(214, 150, 0, .3);
  --scribble-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231f3fa8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.4L6.4 2.6 2.8 11.4 11.4 2.8 2.6 16.6 16.6 2.6 5.2 17.6 17.4 5.4 10.4 17.6 17.6 10.4 15.4 17.4'/%3E%3C/svg%3E");
  --skip-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237f8799' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14.8C4.2 7.2 13 5.6 15.9 12.2'/%3E%3Cpath d='M12.2 11.6l3.8 1.1 1.2-3.7'/%3E%3C/svg%3E");
}
/* (what's written on them takes those colours: the colour itself is inherited from the felt's) */
:root[data-look="speeltafel"] :where(.rows > .row.task, .toc-list > .toc, .pockets > .toc, .mc-task, .make-card, .look-card, .kind-card, .make-pick) { color: var(--graphite); }

/* ---------------------------------------------------------------- the felt */
:root[data-look="speeltafel"] { background: var(--felt-2); }
:root[data-look="speeltafel"] body { background: none; }
/* (its own layer, fixed: scrolling never paints it again) */
:root[data-look="speeltafel"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 5px),
    radial-gradient(130% 95% at 50% 32%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
  pointer-events: none;
}
:root[data-look="speeltafel"] ::selection { background: rgba(245, 197, 66, .45); }

/* ---------------------------------------------------------------- letters: headings, labels, buttons in pixels */
:root[data-look="speeltafel"] .page-title {
  font: 600 46px/50px var(--pixel);
  letter-spacing: .5px;
  color: var(--ink);
  text-shadow: 3px 4px 0 rgba(0, 0, 0, .42);
}
:root[data-look="speeltafel"] .kicker { font-family: var(--pixel); letter-spacing: .3px; }
:root[data-look="speeltafel"] h2 { font: 600 20px/24px var(--pixel); letter-spacing: .4px; color: var(--ink); }
/* a heading on a slate label, as the game's */
:root[data-look="speeltafel"] :is(.block > h2, .block > .agenda-top > h2, .habit-list-block > h2, .day-strip-block > h2, .review-card > h2, .trash-head > h2) {
  padding: 4px 12px 5px;
  border-radius: 8px;
  background: var(--slate);
  color: #f4f1e6;
  box-shadow: 0 0 0 var(--edge-w) var(--edge), 3px 4px 0 var(--edge-w) rgba(0, 0, 0, .3);
  rotate: -1deg;
}
:root[data-look="speeltafel"] .label, :root[data-look="speeltafel"] .sheet-sub { font-family: var(--pixel); letter-spacing: .3px; }
/* the parts of the day, and the tracker's: slate labels too */
:root[data-look="speeltafel"] :is(.daypart, .tr-part-name) { font: 600 16px/22px var(--pixel); letter-spacing: .4px; }
:root[data-look="speeltafel"] .tr-part-name { padding: 2px 11px 3px 8px; border-radius: 8px; background: var(--slate); color: #f4f1e6; box-shadow: 0 0 0 2px var(--edge), 3px 3px 0 2px rgba(0, 0, 0, .28); }
:root[data-look="speeltafel"] .daypart-now { font-family: var(--pixel); letter-spacing: .4px; }

/* ---------------------------------------------------------------- your cards: tasks, habits, lists */
:root[data-look="speeltafel"] :is(.rows > .row.task, .rows > .row.habit, .toc-list > .toc, .pockets > .toc) {
  border-radius: var(--card-r);
  transition: rotate .35s var(--lift-ease), translate .35s var(--lift-ease), box-shadow .25s ease;
}
:root[data-look="speeltafel"] .rows > .row.task { background: var(--task-paper); }
:root[data-look="speeltafel"] .rows > .row.habit { background: var(--habit-note); }
:root[data-look="speeltafel"] :is(.toc-list > .toc, .pockets > .toc) { background: var(--list-paper); box-shadow: var(--sticker-shadow); }
:root[data-look="speeltafel"] .toc-icon { border: 2px solid var(--edge); border-radius: 9px; background: #fffdf6; color: var(--graphite); box-shadow: 2px 2px 0 rgba(0, 0, 0, .18); }
:root[data-look="speeltafel"] .mc-task { border-radius: 4px; box-shadow: 0 0 0 1.5px var(--edge); }
:root[data-look="speeltafel"] :is(.rows > .row.task, .rows > .row.habit)::before,
:root[data-look="speeltafel"] :is(.rows > .row.task, .rows > .row.habit, .toc-list > .toc, .pockets > .toc)::after { display: none; }
:root[data-look="speeltafel"] .rows > .row.habit.tied::before { display: block; } /* (the line of a chain stays) */
@media (hover: hover) {
  :root[data-look="speeltafel"] :is(.rows > .row.task, .rows > .row.habit):hover,
  :root[data-look="speeltafel"] :is(.toc-list > .toc, .pockets > .toc):hover,
  :root[data-look="speeltafel"] .toc.peeking { rotate: 0deg; translate: 0 -3px; box-shadow: var(--sticker-lift); }
}
:root[data-look="speeltafel"] .rows > .row.task.is-done { box-shadow: 0 0 0 var(--edge-w) var(--edge), 2px 2px 0 var(--edge-w) rgba(0, 0, 0, .25); opacity: .82; }
:root[data-look="speeltafel"] .rows > .row.task.ghost { background: none; box-shadow: none; outline: 2px dashed rgba(255, 255, 255, .28); outline-offset: -2px; }

/* ---------------------------------------------------------------- what the app tells you: yellow cards */
:root[data-look="speeltafel"] .note,
:root[data-look="speeltafel"] :is(.hint:not(.soft):not(.day-panel-hint), .empty, .login .hint) {
  border-radius: var(--card-r);
  box-shadow: var(--scrap-shadow);
}
:root[data-look="speeltafel"] .note::before, :root[data-look="speeltafel"] .empty::before { display: none; }
:root[data-look="speeltafel"] .make { border-radius: var(--card-r); }
:root[data-look="speeltafel"] .make::before { display: none; }
@media (hover: hover) { :root[data-look="speeltafel"] .make:hover { rotate: 0deg; translate: 0 -3px; box-shadow: var(--sticker-lift); } }
:root[data-look="speeltafel"] .toast { border-radius: var(--card-r); box-shadow: var(--scrap-shadow); }
:root[data-look="speeltafel"] .toast::before { display: none; }

/* ---------------------------------------------------------------- buttons and choices */
:root[data-look="speeltafel"] .btn {
  padding: 10px 20px 9px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font: 600 16px/20px var(--pixel);
  letter-spacing: .4px;
  box-shadow: 0 0 0 var(--edge-w) var(--edge), 0 5px 0 var(--edge-w) var(--blue-edge);
  rotate: 0deg;
  transition: translate .12s ease, box-shadow .12s ease, filter .12s ease;
}
@media (hover: hover) { :root[data-look="speeltafel"] .btn:hover { transform: none; translate: 0 -1px; filter: brightness(1.1); box-shadow: 0 0 0 var(--edge-w) var(--edge), 0 6px 0 var(--edge-w) var(--blue-edge); } }
:root[data-look="speeltafel"] .btn:active { transform: none; translate: 0 4px; box-shadow: 0 0 0 var(--edge-w) var(--edge), 0 1px 0 var(--edge-w) var(--blue-edge); }
:root[data-look="speeltafel"] .act {
  border-radius: 8px;
  background: var(--slate-2);
  color: #f4f1e6;
  box-shadow: 0 0 0 2px var(--edge), 0 3px 0 2px rgba(0, 0, 0, .4);
  font-family: var(--pixel);
  letter-spacing: .3px;
}
@media (hover: hover) { :root[data-look="speeltafel"] .act:hover { filter: brightness(1.15); box-shadow: 0 0 0 2px var(--edge), 0 4px 0 2px rgba(0, 0, 0, .4); } }
:root[data-look="speeltafel"] .act.quiet { background: none; box-shadow: none; }
:root[data-look="speeltafel"] .pill {
  border-radius: 8px;
  background: var(--slate-2);
  color: #ebe7da;
  font-family: var(--pixel);
  font-size: 15px;
  letter-spacing: .3px;
  box-shadow: 0 0 0 2px var(--edge), 0 3px 0 2px rgba(0, 0, 0, .35);
  transition: color .15s, background-color .15s, box-shadow .15s, rotate .3s var(--lift-ease), translate .3s var(--lift-ease);
}
:root[data-look="speeltafel"] .pill.on { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 2px var(--edge), 0 3px 0 2px rgba(0, 0, 0, .35); translate: 0 -2px; }
:root[data-look="speeltafel"] .pill .ink-line { display: none; }
@media (hover: hover) { :root[data-look="speeltafel"] .pill:not(.on):hover { translate: 0 -2px; color: #fff; box-shadow: 0 0 0 2px var(--edge), 0 5px 0 2px rgba(0, 0, 0, .35); } }
:root[data-look="speeltafel"] .pill:active { translate: 0 2px; box-shadow: 0 0 0 2px var(--edge), 0 1px 0 2px rgba(0, 0, 0, .35); }
:root[data-look="speeltafel"] :is(.icon-btn, .sheet-close) {
  background: var(--slate-2);
  color: #f4f1e6;
  box-shadow: 0 0 0 2px var(--edge), 0 3px 0 2px rgba(0, 0, 0, .4);
}
@media (hover: hover) { :root[data-look="speeltafel"] :is(.icon-btn, .sheet-close):hover { background: var(--slate-2); filter: brightness(1.15); box-shadow: 0 0 0 2px var(--edge), 0 4px 0 2px rgba(0, 0, 0, .4); } }
:root[data-look="speeltafel"] .icon-btn.on { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 2px var(--edge), 0 3px 0 2px rgba(0, 0, 0, .4); }
:root[data-look="speeltafel"] .pencil { font-family: var(--pixel); letter-spacing: .3px; }
:root[data-look="speeltafel"] :is(.cal-day, .tcell) { border-radius: 7px; }
:root[data-look="speeltafel"] :is(.cal-day.on, .tcell.on) { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 2px var(--edge); }

/* ---------------------------------------------------------------- the tab bar: a slate strip */
:root[data-look="speeltafel"] .tabs-inner {
  background: var(--slate);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--edge), 6px 7px 0 3px rgba(0, 0, 0, .35);
}
:root[data-look="speeltafel"] .tab { font: 600 16px/24px var(--pixel); letter-spacing: .4px; color: rgba(244, 241, 230, .62); }
@media (hover: hover) { :root[data-look="speeltafel"] .tab:hover { color: #fff; } }
/* the page you're on: written on a gold card behind it */
:root[data-look="speeltafel"] .tab[aria-current="page"] { color: var(--gold-ink); }
:root[data-look="speeltafel"] .tab-marker { bottom: 6px; height: 28px; background: var(--gold); opacity: 1; border-radius: 4px; box-shadow: 0 0 0 7px var(--gold), 0 0 0 9px var(--edge), 0 3px 0 9px rgba(0, 0, 0, .3); }
:root[data-look="speeltafel"] :is(.theme-toggle, .trash-toggle, .account-toggle, .look-toggle)::after { background: var(--slate-2); box-shadow: 0 0 0 2px var(--edge), 0 2px 0 2px rgba(0, 0, 0, .35); }
:root[data-look="speeltafel"] .look-toggle::after { background: var(--gold); }
:root[data-look="speeltafel"] .look-toggle { color: var(--gold-ink); }
:root[data-look="speeltafel"] .trash-toggle[aria-current="page"]::after { background: var(--gold); box-shadow: 0 0 0 2px var(--edge); }
:root[data-look="speeltafel"] .trash-toggle[aria-current="page"] { color: var(--gold-ink); }
:root[data-look="speeltafel"] .tabs { background: linear-gradient(transparent, rgba(8, 26, 20, .55) 55%); }

/* ---------------------------------------------------------------- sheets: slate panels */
:root[data-look="speeltafel"] .sheet {
  background: var(--slate);
  background-image: none;
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--edge), inset 0 0 0 2px rgba(255, 255, 255, .06), 10px 12px 0 3px rgba(0, 0, 0, .35);
}
:root[data-look="speeltafel"] .sheet { --paper: var(--slate); }
:root[data-look="speeltafel"] .sheet-shade { background: rgba(4, 14, 10, .5); }
:root[data-look="speeltafel"] .sheet-title { font: 600 30px/36px var(--pixel); letter-spacing: .4px; color: #fff; text-shadow: 2px 3px 0 rgba(0, 0, 0, .4); }
:root[data-look="speeltafel"] .sheet-icon { border-radius: 10px; background: var(--slate-3); color: var(--gold); box-shadow: 0 0 0 2px var(--edge); }
:root[data-look="speeltafel"] .sheet-sec { border-radius: 12px; background: var(--slate-3); box-shadow: 0 0 0 2px var(--edge), 3px 4px 0 2px rgba(0, 0, 0, .25); }
:root[data-look="speeltafel"] .sec-title { padding: 2px 9px 3px; border-radius: 6px; background: var(--gold); color: var(--gold-ink); font: 600 14px/18px var(--pixel); letter-spacing: .3px; rotate: -1deg; }
:root[data-look="speeltafel"] .line { border-bottom-color: rgba(244, 241, 230, .55); }
:root[data-look="speeltafel"] .line:focus { border-bottom-color: var(--gold); }
:root[data-look="speeltafel"] .kind-card { border-radius: var(--card-r); background: var(--face); box-shadow: 0 0 0 2px var(--edge), 3px 4px 0 2px rgba(0, 0, 0, .3); transition: translate .3s var(--lift-ease), box-shadow .2s, background-color .2s; }
:root[data-look="speeltafel"] .kind-card.on { background: var(--gold); box-shadow: 0 0 0 2px var(--edge), 3px 4px 0 2px rgba(0, 0, 0, .3); translate: 0 -3px; }
:root[data-look="speeltafel"] .kind-card .kind-name { font-family: var(--pixel); letter-spacing: .3px; }
@media (hover: hover) { :root[data-look="speeltafel"] .kind-card:not(.on):not(:disabled):hover { translate: 0 -3px; box-shadow: 0 0 0 2px var(--edge), 5px 7px 0 2px rgba(0, 0, 0, .28); } }

/* ---------------------------------------------------------------- making something, one question at a time */
:root[data-look="speeltafel"] .make-step { border-radius: 8px; background: var(--slate-2); color: rgba(244, 241, 230, .7); box-shadow: 0 0 0 2px var(--edge), 0 2px 0 2px rgba(0, 0, 0, .3); font-family: var(--pixel); letter-spacing: .3px; }
:root[data-look="speeltafel"] .make-step.done { color: #f4f1e6; }
:root[data-look="speeltafel"] .make-step.done .ms-tag::before { color: var(--gold); }
:root[data-look="speeltafel"] .make-step.now { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 2px var(--edge), 0 3px 0 2px rgba(0, 0, 0, .3); translate: 0 -2px; }
:root[data-look="speeltafel"] .ms-sum { color: rgba(244, 241, 230, .6); }
:root[data-look="speeltafel"] .make-card { border-radius: 12px; box-shadow: var(--sticker-shadow); rotate: -1.2deg; animation: deal-in .5s var(--lift-ease) both; }
:root[data-look="speeltafel"] .make-card::before, :root[data-look="speeltafel"] .mk-task::after { display: none; }
:root[data-look="speeltafel"] .mk-chip { border-radius: 6px; background: #fffdf6; box-shadow: 0 0 0 1.5px var(--edge); font-family: var(--pixel); letter-spacing: .2px; }
:root[data-look="speeltafel"] .make-ask { font: 600 22px/28px var(--pixel); letter-spacing: .4px; color: #fff; text-shadow: 2px 3px 0 rgba(0, 0, 0, .35); }
:root[data-look="speeltafel"] .make-pick { border-radius: 10px; background: var(--face); box-shadow: 0 0 0 2px var(--edge), 2px 3px 0 2px rgba(0, 0, 0, .28); }
:root[data-look="speeltafel"] .make-pick.on { background: var(--gold); color: var(--gold-ink); }
:root[data-look="speeltafel"] .mp-tag { font-family: var(--pixel); letter-spacing: .3px; }
:root[data-look="speeltafel"] .look-card { border-radius: 12px; background: var(--face); box-shadow: 0 0 0 2px var(--edge), 3px 4px 0 2px rgba(0, 0, 0, .3); }
:root[data-look="speeltafel"] .look-card.on { background: var(--gold); }
@keyframes deal-in { from { opacity: 0; transform: translateY(-26px) rotate(-8deg) scale(.92); } }

/* ---------------------------------------------------------------- a phone (.phone on <html>): the tab bar a slate strip along the bottom */
:root[data-look="speeltafel"].phone .tabs-inner { border-radius: 0; box-shadow: 0 -3px 0 var(--edge), 0 -9px 0 rgba(0, 0, 0, .18); }
:root[data-look="speeltafel"].phone .tab { font: 600 10.5px/14px var(--pixel); letter-spacing: 0; }
:root[data-look="speeltafel"].phone .tab[aria-current="page"] { color: #fff; }
:root[data-look="speeltafel"].phone .tab-marker { bottom: auto; height: 8px; border-radius: 3px; box-shadow: none; }
:root[data-look="speeltafel"].phone .page-title { font-size: 38px; line-height: 44px; }
/* a sheet: a slate panel coming up from the bottom, rounded at the top (not torn out of a notebook) */
:root[data-look="speeltafel"].phone .sheet { -webkit-mask: none; mask: none; border-radius: 18px 18px 0 0; box-shadow: 0 0 0 3px var(--edge), inset 0 0 0 2px rgba(255, 255, 255, .06); }
:root[data-look="speeltafel"].phone .sheet-actions { border-top: 2px solid var(--edge); }
/* the + deals out its choices as cards */
:root[data-look="speeltafel"] .fab-item { border-radius: var(--card-r); }

/* ---------------------------------------------------------------- less motion: the cards lie still */
@media (prefers-reduced-motion: reduce) {
  :root[data-look="speeltafel"] :is(.rows > .row, .toc, .make, .pill, .kind-card, .make-card) { transition: none; animation: none; }
}