/* THE SHELL  (R014)
   The table, the drawers, the windows, the options menu and the profiles, shared by the engines that
   lay cards on a table. The Arcana loads this first and its own sheet after it; the card game will
   do the same from R015.

   PROFILES: :root carries the Arcana profile; [data-skin="futura"] re-skins it (Futura was "Saga"
   before R014). Palisade, the card game's fantasy look, lives in the game's own copy
   (tcg-engine/shell/shell.css, R019); the Arcana offers Palisade as a deck of cards, not a look.

   An engine keeps its own layout and its own tokens (the Arcana's domain colours, its card ratio,
   its drawer widths) in its own sheet. The shell reads these from it:
     --left-w, --right-w   the stage's two drawers (left and right), on desktop
     --left-pad            the left drawer's side padding
     --tilt                the table's angle (14deg unless the engine says otherwise)

   SCALE and TYPE RULES as in the Arcana: everything in rem from the html size, type from --t-*.
   MODES: night is the default. Day redefines the colour tokens under [data-mode="day"]. */
:root {
  color-scheme: dark;
  --surface-0: #07070c;
  --surface-1: #0e0d15;
  --surface-2: #17151f;
  --plate: rgba(12, 11, 18, .84);
  --plate-solid: #0c0b12;
  --table: #0d0c13;
  --table-edge: #2a251c;
  --text-1: #ebe2cb;
  --text-2: #a99f87;
  --text-3: #6b6455;
  --accent: #d4af37;
  --accent-hi: #e6c75e;
  --accent-wash: rgba(212, 175, 55, .1);
  --stroke: #2d2921;
  --stroke-strong: #4a4232;
  --scrim: rgba(4, 4, 8, .82);
  --shadow: rgba(0, 0, 0, .8);
  --shine: rgba(255, 244, 214, .07);
  --veil-rgb: 7, 7, 12;

  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;

  /* type scale: the only sizes used on the page */
  --t-label: .6875rem;    /* Cinzel caps: labels, eyebrows, chips */
  --t-button: .75rem;     /* Cinzel caps: buttons */
  --t-num: .8125rem;      /* Cinzel: the numeral beside a card name */
  --t-small: 1rem;        /* Cormorant: notes and framing lines */
  --t-body: 1.0625rem;    /* Cormorant: running text */
  --t-lead: 1.1875rem;    /* Cormorant italic: essences */
  --t-name: 1.375rem;     /* Cormorant 600: card names */
  --t-title: clamp(1.375rem, 1.05rem + .8vw, 1.75rem); /* Cinzel: page title */
  --track-caps: .2em;
  --track-title: .08em;

  /* roles the two versions fill differently: in the Arcana both are the gold accent; in Futura the
     accent is the interface colour and lore keeps gold (the ground, the turning point, the signs) */
  --lore: var(--accent);
}
/* day: a vellum page in deep inks. Darker domain colours and stronger lines keep the wheel's depth
   on a pale ground; the wheel's own fills are raised in the script (TUNE.day). */
:root[data-mode="day"] {
  color-scheme: light;
  --surface-0: #e4d9c1;
  --surface-1: #f1e9d6;
  --surface-2: #d8cbac;
  --plate: rgba(234, 224, 200, .93);
  --plate-solid: #eee5cf;
  --table: #d8c7a2;
  --table-edge: #8a7244;
  --text-1: #1c160d;
  --text-2: #45392a;
  --text-3: #5d503a;
  --accent: #8c6412;
  --accent-hi: #6c4c08;
  --accent-wash: rgba(140, 100, 18, .13);
  --stroke: #c2ae86;
  --stroke-strong: #96805a;
  --scrim: rgba(40, 30, 16, .5);
  --shadow: rgba(62, 44, 18, .42);
  --shine: rgba(255, 252, 240, .3);
  --veil-rgb: 228, 217, 193;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* the one number that scales the interface: 16px on laptops, up to 18px on large screens */
html { font-size: clamp(1rem, .5rem + .55vw, 1.125rem); }
html.locked, html.locked body { overflow: hidden; }
body {
  margin: 0; background: var(--surface-0); color: var(--text-1);
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* SCROLLBARS: a fine gold rail with no track, in every panel that scrolls (the windows, the drawers,
   the page beside the wheel, the options menu). Its colour follows night and day (--scroll-thumb,
   set with the other tokens below). Chrome, Edge and Safari draw the rail from the ::-webkit-scrollbar
   rules; Firefox, which has no such rules, gets its own thin bar. */
:root { --scroll-thumb: rgba(212, 175, 55, .34); --scroll-thumb-hover: rgba(212, 175, 55, .6); }
:root[data-mode="day"] { --scroll-thumb: rgba(140, 100, 18, .38); --scroll-thumb-hover: rgba(140, 100, 18, .65); }
:is(.drawer-inner, .modal-content, .m-body, .j-body, .tut-nav, .tut-body, .stage, .side-menu)::-webkit-scrollbar { width: 6px; height: 6px; }
:is(.drawer-inner, .modal-content, .m-body, .j-body, .tut-nav, .tut-body, .stage, .side-menu)::-webkit-scrollbar-track { background: transparent; }
:is(.drawer-inner, .modal-content, .m-body, .j-body, .tut-nav, .tut-body, .stage, .side-menu)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
:is(.drawer-inner, .modal-content, .m-body, .j-body, .tut-nav, .tut-body, .stage, .side-menu)::-webkit-scrollbar-corner { background: transparent; }
:is(.drawer-inner, .modal-content, .m-body, .j-body, .tut-nav, .tut-body, .stage, .side-menu)::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); background-clip: padding-box; border: 1.5px solid transparent; border-radius: 3px;
}
:is(.drawer-inner, .modal-content, .m-body, .j-body, .tut-nav, .tut-body, .stage, .side-menu)::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) {
  .drawer-inner, .modal-content, .m-body, .j-body, .tut-nav, .tut-body, .stage, .side-menu { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

/* ---------- the background ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--surface-0); }
.backdrop-img { position: absolute; inset: 0; background: var(--bg-image, none) center / cover no-repeat; }
/* the artwork is portrait; on a landscape screen it is turned a quarter so it fills the width */
@media (orientation: landscape) {
  .backdrop-img { inset: auto; top: 50%; left: 50%; width: 100vh; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
}
.backdrop::after { content: ''; position: absolute; inset: 0; background: rgba(var(--veil-rgb), var(--veil-a, .6)); }

/* ---------- shared type ---------- */
.label {
  margin: 0; font-family: var(--font-display); font-size: var(--t-label); font-weight: 400;
  letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.4; color: var(--text-2);
}
.label-gold { color: var(--accent); }
.num { font-family: var(--font-display); font-size: var(--t-num); font-weight: 400; letter-spacing: .06em; color: var(--text-3); white-space: nowrap; }
.card-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5em; margin: 0; font-family: var(--font-body); font-weight: 600; line-height: 1.2; color: var(--text-1); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; white-space: nowrap;
  border: 1px solid var(--stroke-strong); border-radius: 2px; background: var(--surface-1); color: var(--text-1);
  font-family: var(--font-display); font-size: var(--t-button); font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  padding: .95rem 1.25rem; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { border-color: var(--accent); background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface-1); color: var(--accent-hi); font-weight: 600; }
.btn-primary:hover { background: var(--accent); color: var(--surface-1); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary:disabled:hover { background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface-1); color: var(--accent-hi); }
.btn:not(.btn-primary):disabled:hover { border-color: var(--stroke-strong); }
.btn-small { padding: .7rem 1rem; }
.icon-btn {
  flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--stroke-strong); border-radius: 50%;
  background: var(--surface-1); color: var(--text-2); cursor: pointer; display: grid; place-items: center;
}
.icon-btn svg { width: 46%; height: 46%; display: block; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: var(--text-1); border-color: var(--accent); }
.icon-btn:disabled { opacity: .4; cursor: default; }
.link-btn {
  justify-self: start; background: none; border: 0; padding: .15rem 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid transparent;
}
.link-btn:hover { border-bottom-color: var(--accent); }
.chip-btn {
  background: var(--surface-1); border: 1px solid var(--stroke-strong); border-radius: 2px; padding: .4rem .65rem; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
.chip-btn:hover { color: var(--text-1); border-color: var(--accent); }
.chip-btn:disabled { opacity: .45; cursor: default; }
.chip-btn:disabled:hover { color: var(--text-2); border-color: var(--stroke-strong); }

/* ================= THE OPTIONS MENU ================= */
.menu-scrim { position: fixed; inset: 0; z-index: 74; background: var(--scrim); opacity: 0; transition: opacity .3s ease; }
.menu-scrim.open { opacity: 1; }
.side-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 75; width: min(22rem, calc(100vw - 2.5rem));
  display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto;
  padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: var(--plate-solid); border-left: 1px solid var(--stroke-strong); box-shadow: -2rem 0 4rem -2rem var(--shadow);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.3, .7, .2, 1);
}
.side-menu.open { transform: none; }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--stroke); }
.menu-head h2 { font-size: var(--t-button); }
.menu-section { display: grid; gap: .65rem; }
.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--stroke-strong); border-radius: 2px; overflow: hidden; }
.mode-toggle button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--surface-1); border: 0; padding: .7rem; cursor: pointer; color: var(--text-2);
  font-family: var(--font-display); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
}
.mode-toggle button svg { width: .9rem; height: .9rem; }
.mode-toggle button[aria-checked="true"] { background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface-1); color: var(--accent-hi); box-shadow: inset 0 0 0 1px var(--accent); }
.bg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.bg-opt { display: grid; gap: .3rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-2); text-align: left; min-width: 0; }
.bg-opt .swatch { display: block; aspect-ratio: 10 / 13; border-radius: 2px; border: 1px solid var(--stroke-strong); background: var(--surface-0) center / cover no-repeat; }
.bg-opt[aria-checked="true"] .swatch { outline: 2px solid var(--accent); outline-offset: 2px; }
.bg-opt .bg-name { font-size: .875rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-opt:hover .bg-name, .bg-opt[aria-checked="true"] .bg-name { color: var(--text-1); }
.exports { display: flex; flex-wrap: wrap; gap: .4rem; }
/* table designs: each swatch shows the surface, its edge and its lines */
.tbl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.tbl-opt { display: grid; gap: .3rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-2); text-align: left; min-width: 0; }
.tbl-opt .tbl-swatch {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 4px; border: 1px solid var(--stroke-strong);
  background-position: center; background-size: cover; overflow: hidden;
}
.tbl-opt .tbl-swatch svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tbl-opt[aria-checked="true"] .tbl-swatch { outline: 2px solid var(--accent); outline-offset: 2px; }
.tbl-opt .bg-name { font-size: .875rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-opt:hover .bg-name, .tbl-opt[aria-checked="true"] .bg-name { color: var(--text-1); }
.menu-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--stroke); color: var(--text-3); }

/* ================= THE DRAW: THE TABLE ================= */
.stage {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transition: opacity .6s ease;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: none; /* the table shows the same background as the wheel page */
}
.stage.open { opacity: 1; }
.stage-inner { min-height: 100%; display: grid; grid-template-rows: auto 1fr; }
.stage-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 16px; border-bottom: 1px solid var(--stroke); background: var(--plate);
}
.stage-titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; min-width: 0; }
.stage-head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-1);
}
.stage-tools { display: flex; align-items: center; gap: .5rem; }
.stage-body { display: grid; grid-template-areas: "spread" "right" "left"; min-width: 0; }

/* THE TABLE: each design (TABLES in the script) sets the --tbl-* colours on the table itself.
     By night the table is lit: a fine rim, its lines glowing, a soft halo that lifts it off a dark
     background and a pool of light from above. By day it casts a shadow. */
.table {
  --tbl-light: radial-gradient(ellipse 72% 62% at 50% 36%, var(--tbl-pool, rgba(212, 175, 55, .1)), rgba(0, 0, 0, 0) 72%);
  --tbl-shadow:
    inset 0 1px 0 var(--tbl-hi, rgba(255, 240, 200, .14)),
    inset 0 0 3.5rem rgba(0, 0, 0, .5),
    0 0 0 1px var(--tbl-rim, rgba(212, 175, 55, .35)),
    0 .5rem 0 -1px var(--tbl-thick, #050408),
    0 .5rem 0 0 var(--tbl-rim-low, rgba(212, 175, 55, .12)),
    0 0 2.5rem -.25rem var(--tbl-halo, rgba(212, 175, 55, .14)),
    0 0 7rem .5rem var(--tbl-halo-far, rgba(212, 175, 55, .06)),
    0 2.75rem 3.5rem -1.5rem rgba(0, 0, 0, .85);
  --tbl-text-shadow: 0 0 .6rem rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .8);
}
:root[data-mode="day"] .table {
  --tbl-light: linear-gradient(172deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 42%, rgba(60, 40, 10, .07));
  --tbl-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 0 3rem rgba(60, 40, 10, .1),
    0 0 0 1px var(--tbl-rim, rgba(110, 85, 40, .5)),
    0 .5rem 0 -1px var(--tbl-thick, #8f7650),
    0 .7rem .5rem -.2rem rgba(40, 26, 8, .38),
    0 1.6rem 2rem -.6rem rgba(40, 26, 8, .34),
    0 3.75rem 4.5rem -1rem rgba(40, 26, 8, .3);
  --tbl-text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
/* the spread: a table seen at a slight angle */
.spread {
  grid-area: spread; container-type: inline-size; container-name: spread;
  display: grid; place-items: center; padding: 1.75rem 12px 2rem; min-width: 0;
  perspective: 1700px; perspective-origin: 50% 15%;
}
.table {
  position: relative;
  border-radius: var(--tbl-radius, 1.25rem);
  background: var(--tbl-light), linear-gradient(var(--tbl-veil, transparent), var(--tbl-veil, transparent)), var(--tbl-tex, none) center / cover no-repeat, var(--tbl-base, var(--table));
  border: 1px solid var(--tbl-edge, var(--table-edge));
  box-shadow: var(--tbl-shadow);
  transition: box-shadow .4s ease, border-color .4s ease;
  transform: rotateX(var(--tilt, 14deg));
  transform-origin: 50% 70%;
}
.table-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; clip-path: inset(0 round calc(var(--tbl-radius, 1.25rem) - 1px)); }

/* the drawers: the left and the right of the table */
.drawer { min-width: 0; padding: 0 16px; }
.drawer-tab { display: none; }
.drawer-inner { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 1.5rem; }
.drawer-left { grid-area: left; }
.drawer-right { grid-area: right; }

/* phones: the two buttons stay at the bottom of the screen */
@media (max-width: 899px) {
  .stage-inner { padding-bottom: 5.5rem; }
  .stage-tools .stage-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    padding: 1rem 16px calc(.8rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--surface-0) 72%, rgba(var(--veil-rgb), 0));
  }
  .drawer-left { border-top: 1px solid var(--stroke); padding-top: 1.25rem; }
}
.stage-actions { display: flex; gap: .5rem; }
@media (max-width: 899px) { .stage-actions .btn { white-space: normal; text-align: center; line-height: 1.3; padding-inline: .6rem; letter-spacing: .14em; } }

@media (min-width: 900px) {
  .stage { overflow: hidden; }
  .stage-inner { height: 100%; min-height: 0; }
  .stage-head { padding: .75rem 1.5rem; }
  .stage-body {
    --lw: 0rem; --rw: 0rem;
    min-height: 0; position: relative;
    grid-template-columns: var(--lw) minmax(0, 1fr) var(--rw);
    grid-template-areas: "left spread right";
    transition: grid-template-columns .45s cubic-bezier(.3, .7, .2, 1);
  }
  .stage[data-left="open"] .stage-body { --lw: var(--left-w); }
  .stage[data-right="open"] .stage-body { --rw: var(--right-w); }
  .spread { container-type: size; min-height: 0; padding: 1.25rem 2.5rem 1.75rem; overflow: hidden; }
  .stage .drawer { position: relative; padding: 0; min-height: 0; z-index: 2; }
  .stage .drawer-clip { height: 100%; overflow: hidden; background: var(--plate); }
  .stage .drawer-left .drawer-clip { border-right: 1px solid var(--stroke); }
  .stage .drawer-right .drawer-clip { border-left: 1px solid var(--stroke); display: flex; justify-content: flex-end; }
  .stage .drawer-inner {
    height: 100%; overflow-y: auto; padding: 1.5rem 1.75rem;
    transition: transform .45s cubic-bezier(.3, .7, .2, 1), opacity .3s ease;
  }
  .stage .drawer-left .drawer-inner { width: var(--left-w); padding-inline: var(--left-pad, 1.75rem); }
  .stage .drawer-right .drawer-inner { width: var(--right-w); }
  .stage[data-left="closed"] .drawer-left .drawer-inner { transform: translateX(-30%); opacity: 0; }
  .stage[data-right="closed"] .drawer-right .drawer-inner { transform: translateX(30%); opacity: 0; }
  /* the tab on each drawer's inner edge opens and closes it */
  .stage .drawer-tab {
    position: absolute; top: 50%; z-index: 3; display: grid; justify-items: center; gap: .5rem;
    width: 1.9rem; padding: .9rem 0; transform: translateY(-50%); cursor: pointer;
    background: var(--plate-solid); border: 1px solid var(--stroke-strong); color: var(--text-2);
  }
  .stage .drawer-tab:hover { color: var(--text-1); border-color: var(--accent); }
  .stage .drawer-tab .label { writing-mode: vertical-rl; color: inherit; }
  .stage .drawer-tab svg { width: .8rem; height: .8rem; transition: transform .3s ease; }
  .stage .drawer-left .drawer-tab { right: -1.9rem; border-left: 0; border-radius: 0 4px 4px 0; }
  .stage .drawer-right .drawer-tab { left: -1.9rem; border-right: 0; border-radius: 4px 0 0 4px; }
  .stage .drawer-right .drawer-tab .label { transform: rotate(180deg); }
  .stage[data-left="open"] .drawer-left .drawer-tab svg,
  .stage[data-right="closed"] .drawer-right .drawer-tab svg { transform: rotate(180deg); }
}

.fade-in { animation: fadeIn .55s ease backwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } }
.leaving { transition: opacity .45s ease, transform .45s ease !important; opacity: 0 !important; transform: translateY(14px) !important; }

/* ---------- flights ---------- */
.flylayer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.fly { position: fixed; left: 0; top: 0; transform-origin: 0 0; perspective: 1200px; will-change: transform, opacity; }
.fly-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.fly .fly-face { position: absolute; inset: 0; border-radius: var(--radius-card); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--c, var(--accent)); background: var(--surface-1); }
.fly .fly-face.back { transform: rotateY(180deg); }

/* ================= WINDOWS =================
   Two kinds. .modal is a window the size of what it holds (the Arcana's card window); .journal is a
   tall window with a head, a body and a foot (the journal, the tutorial). Both carry a fine double
   frame inside their edge (.m-frame) with a fan at each corner and a crest at the head and foot.
   --m-ink colours the frame; the engine sets it (the card window takes its card's domain). */
.modal {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; opacity: 0; transition: opacity .3s ease;
  padding: 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.modal.open { opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); }
.m-frame {
  position: absolute; inset: var(--frame-in); pointer-events: none; z-index: 0;
  border: 1px solid color-mix(in srgb, var(--m-ink, var(--accent)) 50%, transparent);
}
.m-frame::before {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid color-mix(in srgb, var(--m-ink, var(--accent)) 22%, transparent);
}
.m-orn { position: absolute; width: 2.25rem; height: 2.25rem; color: var(--m-ink, var(--accent)); overflow: visible; }
.m-orn.tl { top: -.5px; left: -.5px; }
.m-orn.tr { top: -.5px; right: -.5px; transform: scaleX(-1); }
.m-orn.bl { bottom: -.5px; left: -.5px; transform: scaleY(-1); }
.m-orn.br { bottom: -.5px; right: -.5px; transform: scale(-1, -1); }
.m-crest {
  position: absolute; left: 50%; top: 0; width: 3.25rem; height: 1.6rem; transform: translate(-50%, -50%);
  color: var(--m-ink, var(--accent)); background: var(--surface-1); overflow: visible;
}
.m-crest.foot { top: auto; bottom: 0; transform: translate(-50%, 50%); height: 1.1rem; width: 2.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.chips:empty { display: none; }
.chips li { font-family: var(--font-display); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--stroke-strong); padding: .25rem .6rem; color: var(--text-2); }
.chips li.draft { border-style: dashed; color: var(--text-3); }

.journal {
  position: fixed; inset: 0; z-index: 66; display: grid; place-items: center; opacity: 0; transition: opacity .3s ease;
  padding: 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.journal.open { opacity: 1; }
.journal-panel {
  --frame-in: .55rem;
  position: relative; width: min(100%, 52rem); height: min(100%, 60rem); overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--stroke-strong); border-radius: 4px; box-shadow: 0 30px 90px -30px var(--shadow);
}
.j-head {
  position: relative; z-index: 1; flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  margin: 0 1.6rem; padding: 2.6rem 1rem 1rem; border-bottom: 1px solid var(--stroke);
}
.j-heading { display: grid; gap: .3rem; min-width: 0; }
.j-heading h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); letter-spacing: var(--track-title); line-height: 1.2; color: var(--accent); }
.j-empty { margin: 0; font-style: italic; font-size: var(--t-small); color: var(--text-3); }
@media (max-width: 559px) {
  .j-head { margin-inline: .9rem; padding-inline: .5rem; }
  .j-head { padding-top: 2.2rem; }
}
@media (min-width: 760px) {
  .journal-panel { --frame-in: .7rem; }
  .journal-panel .m-orn { width: 2.75rem; height: 2.75rem; }
}

/* ================= THE TUTORIAL =================
   The same framed window as the journal. On desktop the sections are listed down the left, to jump
   to; on phones a drop-down list does the same. The text comes from tutorial.js. */
.tut-panel { width: min(100%, 60rem); }
.tut-panel .j-head { border-bottom: 0; padding-bottom: .35rem; }
/* the two parts of the window: how to use the wheel, and the wheel in depth */
.tut-tabs { position: relative; z-index: 1; flex: none; display: flex; gap: 1.75rem; margin: 0 1.6rem; padding: 0 1rem; border-bottom: 1px solid var(--stroke); }
.tut-tab {
  background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; padding: .7rem 0 .6rem; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-3);
}
.tut-tab:hover { color: var(--text-1); }
.tut-tab[aria-selected="true"] { color: var(--accent-hi); border-bottom-color: var(--accent); }
.tut-jump { position: relative; z-index: 1; display: none; align-items: center; gap: .75rem; margin: 0 1.6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--stroke); }
.tut-select {
  flex: 1; min-width: 0; font: inherit; font-size: var(--t-small); color: var(--text-1); background: var(--surface-2);
  border: 1px solid var(--stroke-strong); border-radius: 2px; padding: .45rem .6rem;
}
.tut-main { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 13rem minmax(0, 1fr); margin: 0 1.6rem 1.6rem; }
.tut-nav { min-height: 0; overflow-y: auto; padding: 1.25rem 1rem 1.25rem 1rem; border-right: 1px solid var(--stroke); }
.tut-nav > .label { margin-bottom: .6rem; color: var(--text-3); }
.tut-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.tut-nav a {
  position: relative; display: block; padding: .3rem 0 .3rem .9rem; text-decoration: none; line-height: 1.3;
  font-size: var(--t-small); color: var(--text-2); border-radius: 2px;
}
.tut-nav a:hover { color: var(--text-1); }
.tut-nav a[aria-current="true"] { color: var(--accent-hi); }
.tut-nav a[aria-current="true"]::before {
  content: ''; position: absolute; left: .1rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--accent); transform: rotate(45deg);
}
.tut-body { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1rem 2.5rem 2rem; outline: none; }
.tut-body:focus-visible { outline: 1px solid var(--stroke-strong); outline-offset: -4px; }
.tut-section { display: grid; gap: .8rem; max-width: 64ch; padding-bottom: 1.75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--stroke); }
.tut-section:last-child { border-bottom: 0; margin-bottom: 0; }
.tut-section h3 {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--t-button); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--accent); outline: none; scroll-margin-top: 1rem;
}
.tut-section p, .tut-section li { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.tut-section strong { font-weight: 600; color: var(--text-1); }
.tut-section ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.tut-section li { position: relative; padding-left: 1.1rem; }
.tut-section li::before { content: ''; position: absolute; left: .15rem; top: .72em; width: 4px; height: 4px; background: var(--accent); opacity: .8; transform: rotate(45deg); }
@media (max-width: 759px) {
  .tut-tabs { margin-inline: .9rem; padding-inline: .5rem; }
  .tut-jump { display: flex; }
  .tut-main { grid-template-columns: minmax(0, 1fr); margin: 0 .9rem 1.2rem; }
  .tut-nav { display: none; }
  .tut-body { padding: 1.1rem .5rem 2rem; }
}

.toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80;
  background: var(--surface-2); border: 1px solid var(--accent); color: var(--text-1); padding: .6rem 1.1rem; font-size: var(--t-small); max-width: calc(100% - 32px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ================= FUTURA =================
   The Saber Academy / Grand Saga skin, switched on from the options menu (data-skin="futura").
   It was called the Saga before R014.
   It re-skins the Arcana rather than replacing it: the layout, the components and their states are
   the Arcana's, and Futura changes only the token values below, the corners, and a few ornaments.

   THE RULES
   - Accent means "you can act on this": buttons, links, focus, the selected state, the hover arc and
     the chosen arcs. Headings are grey-violet with only the ◈ mark in the accent.
   - Gold (--lore) is kept for lore, as on the site: the ground, the turning point, the signs, drafts.
   - One glow at rest, the saber-line under the title. Everything else glows only on hover or when chosen.
   - Three corner cuts: 4px for tags and fields, 8px for buttons and boxes, 14px for windows and tables.
     The fine stroke across a cut is drawn only on windows and buttons.
   - Capitals for labels and buttons only. Card names keep their own case.

   Options, set from the menu as data- attributes on the page:
     data-font     academy | orbitron | command | lore
     data-accent   cyan | green | bone
     data-lines    saber | hairline | circuit
     data-corners  clipped | square                                                            */

/* ---------- tokens: night ---------- */
:root[data-skin="futura"] {
  color-scheme: dark;
  --surface-0: #060112;
  --surface-1: #120826;
  --surface-2: #1a0b33;
  --plate: rgba(18, 8, 38, .9);
  --plate-solid: #120826;
  --table: #0a0118;
  --table-edge: #2c1a52;
  --text-1: #eeeaff;
  --text-2: #c3badf;
  --text-3: #8f85b8;
  --stroke: #2c1a52;
  --stroke-strong: #45317a;
  --accent: #00d9ff;
  --accent-hi: #7fe7ff;
  --accent-wash: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 55%, transparent);
  --lore: #ffd23f;
  --scrim: rgba(6, 1, 18, .84);
  --shadow: rgba(0, 0, 0, .8);
  --shine: rgba(127, 231, 255, .07);
  --veil-rgb: 6, 1, 18;
  --scroll-thumb: color-mix(in srgb, var(--accent) 34%, transparent);
  --scroll-thumb-hover: color-mix(in srgb, var(--accent) 65%, transparent);

  /* the type (Academy: the site's own pair) */
  --font-display: 'Rajdhani', 'Titillium Web', 'Segoe UI', sans-serif;
  --font-body: 'Titillium Web', 'Segoe UI', system-ui, sans-serif;
  --t-label: .75rem;
  --t-button: .8125rem;
  --t-num: .8125rem;
  --t-small: .875rem;
  --t-body: .9375rem;
  --t-lead: 1rem;
  --t-name: 1.25rem;
  --t-title: clamp(1.5rem, 1.1rem + .9vw, 1.875rem);
  --track-caps: .16em;
  --track-title: .12em;

  /* the corners */
  --cut-s: 4px;
  --cut-m: 8px;
  --cut-l: 14px;
}
/* ---------- tokens: day, a pale console in violet ink ---------- */
:root[data-skin="futura"][data-mode="day"] {
  color-scheme: light;
  --surface-0: #e9e6f5;
  --surface-1: #f6f4fc;
  --surface-2: #dcd6ee;
  --plate: rgba(244, 241, 252, .93);
  --plate-solid: #f3f0fb;
  --table: #dcd6ee;
  --table-edge: #9a8cc4;
  --text-1: #150a2e;
  --text-2: #3a2d5c;
  --text-3: #62568a;
  --stroke: #d0c8e6;
  --stroke-strong: #9d90c6;
  --accent: #0086a5;
  --accent-hi: #006680;
  --lore: #8a6a00;
  --scrim: rgba(30, 20, 60, .45);
  --shadow: rgba(40, 20, 90, .35);
  --shine: rgba(255, 255, 255, .4);
  --veil-rgb: 233, 230, 245;
}
/* ---------- the accent ---------- */
:root[data-skin="futura"][data-accent="green"] { --accent: #37ff8b; --accent-hi: #a6ffcb; }
:root[data-skin="futura"][data-accent="bone"]  { --accent: #e4defa; --accent-hi: #ffffff; }
:root[data-skin="futura"][data-mode="day"][data-accent="green"] { --accent: #0b8a43; --accent-hi: #066a32; }
:root[data-skin="futura"][data-mode="day"][data-accent="bone"]  { --accent: #2a1d52; --accent-hi: #150a2e; }
/* ---------- the type ---------- */
:root[data-skin="futura"][data-font="orbitron"] {
  --font-display: 'Orbitron', 'Exo 2', sans-serif; --font-body: 'Exo 2', 'Segoe UI', sans-serif;
  --t-label: .66rem; --t-button: .72rem; --t-num: .72rem; --track-caps: .14em; --track-title: .08em;
  --t-title: clamp(1.3rem, 1rem + .75vw, 1.7rem);
}
:root[data-skin="futura"][data-font="command"] {
  --font-display: 'Chakra Petch', 'Titillium Web', sans-serif;
  --t-label: .7rem; --t-button: .78rem; --track-caps: .14em;
}
:root[data-skin="futura"][data-font="lore"] {
  --font-display: 'Cinzel', 'Trajan Pro', serif;
  --t-label: .68rem; --t-button: .75rem; --track-caps: .2em; --track-title: .08em;
}
/* ---------- square corners ---------- */
:root[data-skin="futura"][data-corners="square"] { --cut-s: 0px; --cut-m: 0px; --cut-l: 0px; }

/* ---------- the backdrop: Futura's art is landscape, so it is never turned ---------- */
.backdrop-img[data-orient="landscape"] { inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; }

/* ---------- corners ---------- */
:root[data-skin="futura"] :is(.chips li, .tut-select, .toast, .bg-opt .swatch, .tbl-opt .tbl-swatch) {
  --cut: var(--cut-s);
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
:root[data-skin="futura"] :is(.btn, .chip-btn, .icon-btn, .mode-toggle, .version-toggle) {
  --cut: var(--cut-m);
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
:root[data-skin="futura"] :is(.modal-panel, .journal-panel) {
  --cut: var(--cut-l);
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
/* the stroke across each cut, on buttons and windows only: two fine diagonals in --edge */
:root[data-skin="futura"] :is(.btn, .chip-btn, .icon-btn, .modal-panel, .journal-panel) {
  --edge: var(--stroke-strong);
  background-image:
    linear-gradient(135deg, transparent calc(50% - .6px), var(--edge) calc(50% - .6px), var(--edge) calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(135deg, transparent calc(50% - .6px), var(--edge) calc(50% - .6px), var(--edge) calc(50% + .6px), transparent calc(50% + .6px));
  background-size: var(--cut) var(--cut), var(--cut) var(--cut);
  background-position: top left, bottom right;
  background-repeat: no-repeat;
}
:root[data-skin="futura"] :is(.stage .drawer-tab, .side-menu, .stage-head, .fly .fly-face) { border-radius: 0; }

/* ---------- type ---------- */
:root[data-skin="futura"] .label { font-weight: 600; }
:root[data-skin="futura"] .label-gold { color: var(--text-3); }
:root[data-skin="futura"] .label-gold::before { content: '◈'; margin-right: .6em; color: var(--accent); font-family: var(--font-body); letter-spacing: 0; }
:root[data-skin="futura"] .num { font-weight: 500; letter-spacing: .04em; }
:root[data-skin="futura"] :focus-visible { outline-color: var(--lore); outline-offset: 2px; }
:root[data-skin="futura"] .j-heading h2 { font-weight: 700; text-transform: uppercase; color: var(--text-1); }
:root[data-skin="futura"] .tut-section h3 { font-weight: 700; color: var(--text-1); }
:root[data-skin="futura"] .tut-section li::before, :root[data-skin="futura"] .tut-nav a[aria-current="true"]::before { background: var(--accent); }
:root[data-skin="futura"] .stage-head h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; }
:root[data-skin="futura"] .chips li { font-weight: 600; background: var(--surface-2); }
:root[data-skin="futura"] .chips li.draft { border-style: solid; border-color: color-mix(in srgb, var(--lore) 60%, transparent); color: var(--lore); background: transparent; }

/* ---------- the saber-line: the one glow at rest ---------- */
.saber-line { display: none; }
:root[data-skin="futura"] .saber-line {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent-hi) 50%, var(--accent) 78%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
}
:root[data-skin="futura"][data-lines="hairline"] .saber-line { background: linear-gradient(90deg, transparent, var(--accent-line) 22%, var(--accent-line) 78%, transparent); box-shadow: none; }
:root[data-skin="futura"][data-lines="circuit"] .saber-line { position: relative; box-shadow: none; background: repeating-linear-gradient(90deg, var(--accent-line) 0 9px, transparent 9px 14px); }
:root[data-skin="futura"][data-lines="circuit"] .saber-line::before,
:root[data-skin="futura"][data-lines="circuit"] .saber-line::after { content: ''; position: absolute; top: -2px; width: 5px; height: 5px; background: var(--accent); transform: rotate(45deg); }
:root[data-skin="futura"][data-lines="circuit"] .saber-line::before { left: -2.5px; }
:root[data-skin="futura"][data-lines="circuit"] .saber-line::after { right: -2.5px; }

/* ---------- buttons: the Arcana's behaviour, the site's hover ---------- */
:root[data-skin="futura"] .btn { font-weight: 600; letter-spacing: .16em; background-color: var(--surface-1); border-color: var(--edge); }
:root[data-skin="futura"] .btn-primary { --edge: var(--accent-line); border-color: var(--accent-line); background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); color: var(--accent-hi); font-weight: 700; }
:root[data-skin="futura"] :is(.btn, .chip-btn, .icon-btn):not(:disabled):hover {
  --edge: var(--accent-line); border-color: var(--accent-line);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 22px color-mix(in srgb, var(--accent) 10%, transparent);
}
:root[data-skin="futura"] .btn:not(:disabled):hover { transform: translateY(-1px); transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s, color .15s; }
:root[data-skin="futura"] .btn-primary:not(:disabled):hover { --edge: transparent; background-color: var(--accent); color: var(--surface-0); box-shadow: none; }
:root[data-skin="futura"] .btn-primary:disabled:hover { background-color: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); color: var(--accent-hi); }
:root[data-skin="futura"] .chip-btn { font-weight: 600; background-color: var(--surface-1); border-color: var(--edge); }
:root[data-skin="futura"] .icon-btn { --cut: min(7px, var(--cut-m)); background-color: var(--surface-1); border-color: var(--edge); }
:root[data-skin="futura"] .icon-btn[aria-expanded="true"] { --edge: var(--accent-line); border-color: var(--accent-line); }
:root[data-skin="futura"] .link-btn { font-weight: 600; }
:root[data-skin="futura"] :is(.mode-toggle, .version-toggle) button { font-weight: 600; }
:root[data-skin="futura"] :is(.mode-toggle, .version-toggle) button[aria-checked="true"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- windows: the Arcana's inset double frame, clipped, with brackets for the fans ----------
   The frame is painted as gradients rather than a border, so its cut corners can follow the window's
   and the crest on its top line is never clipped. */
:root[data-skin="futura"] :is(.modal-panel, .journal-panel) { background-color: var(--surface-1); border-color: var(--stroke-strong); }
:root[data-skin="futura"] .m-orn { display: none; }
:root[data-skin="futura"] .m-frame, :root[data-skin="futura"] .m-frame::before {
  --fc: color-mix(in srgb, var(--m-ink, var(--accent)) 50%, transparent);
  --k: var(--cut-m);
  border: 0;
  background:
    linear-gradient(var(--fc), var(--fc)) right top / calc(100% - var(--k)) 1px no-repeat,
    linear-gradient(var(--fc), var(--fc)) right top / 1px calc(100% - var(--k)) no-repeat,
    linear-gradient(var(--fc), var(--fc)) left bottom / calc(100% - var(--k)) 1px no-repeat,
    linear-gradient(var(--fc), var(--fc)) left bottom / 1px calc(100% - var(--k)) no-repeat,
    linear-gradient(135deg, transparent calc(50% - .6px), var(--fc) calc(50% - .6px), var(--fc) calc(50% + .6px), transparent calc(50% + .6px)) left top / var(--k) var(--k) no-repeat,
    linear-gradient(135deg, transparent calc(50% - .6px), var(--fc) calc(50% - .6px), var(--fc) calc(50% + .6px), transparent calc(50% + .6px)) right bottom / var(--k) var(--k) no-repeat;
}
:root[data-skin="futura"] .m-frame::before { --fc: color-mix(in srgb, var(--m-ink, var(--accent)) 20%, transparent); --k: calc(var(--cut-m) * .85); }
/* brackets at the two corners that are not cut */
:root[data-skin="futura"] .m-frame::after {
  --bc: var(--m-ink, var(--accent));
  content: ''; position: absolute; inset: -1px;
  background:
    linear-gradient(var(--bc), var(--bc)) right top / 16px 2px no-repeat,
    linear-gradient(var(--bc), var(--bc)) right top / 2px 16px no-repeat,
    linear-gradient(var(--bc), var(--bc)) left bottom / 16px 2px no-repeat,
    linear-gradient(var(--bc), var(--bc)) left bottom / 2px 16px no-repeat;
}
/* windows cast their shadow from a wrapper, because clipped corners cut a box-shadow away */
.panel-lift { display: contents; }
:root[data-skin="futura"] .panel-lift { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; pointer-events: none; filter: drop-shadow(0 1.75rem 2.5rem rgba(0, 0, 0, .55)); }
:root[data-skin="futura"][data-mode="day"] .panel-lift { filter: drop-shadow(0 1.5rem 2.25rem rgba(40, 20, 90, .25)); }
:root[data-skin="futura"] .panel-lift > * { pointer-events: auto; }
:root[data-skin="futura"] .tut-tab[aria-selected="true"] { border-bottom-width: 2px; }

/* ---------- the table ---------- */
:root[data-skin="futura"] .toast { border-color: var(--accent-line); }
/* the table: square edges and clipped corners. Its thickness, halo and floor shadow ride on the
   spread, round the clipped shape: three drop-shadows by night, two by day. */
:root[data-skin="futura"] .table {
  border: 0; border-radius: 0;
  clip-path: polygon(var(--tbl-cut, 0px) 0, 100% 0, 100% calc(100% - var(--tbl-cut, 0px)), calc(100% - var(--tbl-cut, 0px)) 100%, 0 100%, 0 var(--tbl-cut, 0px));
  --tbl-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 3.5rem rgba(0, 0, 0, .45);
}
:root[data-skin="futura"][data-mode="day"] .table { --tbl-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 3rem rgba(40, 20, 90, .07); }
:root[data-skin="futura"] .table-lines { clip-path: none; }
:root[data-skin="futura"] .spread { filter: drop-shadow(0 .45rem 0 var(--tbl-thick, #050309)) drop-shadow(0 0 1.25rem var(--tbl-halo, transparent)) drop-shadow(0 2rem 1.5rem rgba(0, 0, 0, .55)); }
:root[data-skin="futura"][data-mode="day"] .spread { filter: drop-shadow(0 .45rem 0 var(--tbl-thick, #9d90c6)) drop-shadow(0 1.6rem 1.6rem rgba(40, 20, 90, .28)); }

/* ---------- the version switch and Futura's settings (in both versions' menu) ---------- */
.version-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--stroke-strong); border-radius: 2px; overflow: hidden; }
.version-toggle button {
  display: grid; gap: .1rem; justify-items: center; background: var(--surface-1); border: 0; padding: .65rem .5rem .6rem; cursor: pointer; color: var(--text-2);
  font-family: var(--font-display); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase;
}
.version-toggle button small { font-family: var(--font-body); font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.version-toggle button[aria-checked="true"] { background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface-1); color: var(--accent-hi); box-shadow: inset 0 0 0 1px var(--accent); }
.version-toggle button:hover { color: var(--text-1); }
.futura-only { display: none; }
:root[data-skin="futura"] .futura-only { display: grid; }
:root[data-skin="futura"] .arcana-only { display: none; }
.opt-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.opt-row .chip-btn[aria-checked="true"] { color: var(--accent-hi); border-color: var(--accent-line); background-color: var(--accent-wash); }
:root[data-skin="futura"] .opt-row .chip-btn[aria-checked="true"] { --edge: var(--accent-line); }
.accent-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; transform: rotate(45deg); vertical-align: .05em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.opt-row.fonts { display: grid; grid-template-columns: 1fr 1fr; }
.opt-row.fonts .chip-btn { text-align: left; padding: .5rem .65rem; letter-spacing: .1em; font-size: .62rem; color: var(--text-3); }
.font-sample { display: block; font-size: 1rem; letter-spacing: .03em; text-transform: none; margin-bottom: .1rem; color: var(--text-1); }
/* a heading over the designs a profile borrows from another, across the whole grid */
.opt-group { grid-column: 1 / -1; margin-top: .35rem; color: var(--text-3); }


/* ================= THE TABLE IN MOTION (R020, remade in R021) =================
   A design that moves, moves its own surface. The shell lays a layer in each table, under its figure
   and its cards (.table-motion), and writes the design's recipe on the table as data-motion while the
   menu's Motion is on (see THE TABLE IN MOTION in shell.js for what a design names).
     .mo-light   LIGHT THROUGH THE SURFACE'S OWN FEATURES. A group on black: windows of light (.w1 to
                 .w3, soft shapes that travel) and the design's light map (.feat) multiplied by them,
                 so the light shows only where a window and a feature meet; the group is screened over
                 the table. With data-mo-shade the same group works in shadow: windows of dark on
                 white, a shade map screened in, the group multiplied over the table.
     .mo-plane   A PLANE: the surface itself, moving (takeover: the star chart's sky, the hologram's
                 scan lines), or a part of it kept apart (layer). .p1 is what moves; .mo-sub,
                 inside it, is a light group of its own (the stars' twinkle). .mo-cap lays the
                 table's own light back over a plane. (The aurora's curtains use the light group's
                 places as a plain group of their own; see AURORA.)
     .mo-f1/.f2  a map laid over the whole table (the cyberpunk sign's reflections)
     .mo-spin    the figure's turning parts      .mo-glints   soft lights at the figure's points
   THE RULES
   - Only transform (translate, rotate, scale) and opacity move. Images and gradients stay still and the
     light is mixed in with blend modes, so the browser composes the motion and never paints the table
     again while it moves.
   - Every element that blends keeps to the table's own corners (border-radius: inherit), so nothing
     shows past a rounded edge.
   - Slow and quiet: cycles of a few seconds for a flicker, a minute or more for anything that travels.
   --mo-x, --mo-y   the centre of the table's ring (the table's middle when it has none)
   --mo-r           the ring's radius        --mo-d   a diameter from the centre to the farthest corner
   --mo-w, --mo-h   the table's size         --mo-feat, --mo-f1 ... the design's images (set by the shell) */
.table-motion { position: absolute; inset: 0; display: none; border-radius: inherit; pointer-events: none; }
.table:is([data-motion], [data-mo-layer]) > .table-motion { display: block; }
:not(.table) > .table-motion { display: none; }
.table-motion > *, .table-motion :is(.mo-light, .mo-sub) > *, .mo-plane > .p1, .mo-plane .mo-sub { display: none; position: absolute; }
.table-motion > :is(.mo-light, .mo-plane, .mo-cap, .mo-f1, .mo-f2, .mo-glints) { inset: 0; border-radius: inherit; }
.table-motion > :is(.mo-light, .mo-plane) { overflow: hidden; }
.mo-spin { inset: 0; transform-origin: var(--mo-x) var(--mo-y); }
.mo-spin > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mo-f1 { background: var(--mo-f1) center / cover no-repeat; }
.mo-f2 { background: var(--mo-f2) center / cover no-repeat; }
.mo-cap { background: var(--tbl-light), linear-gradient(var(--tbl-veil, transparent), var(--tbl-veil, transparent)); }
/* the light group, and its shadow twin */
.table { --mo-ink: 255, 255, 255; --mo-ground: #000; --mo-blend: screen; --mo-mix: multiply;
  /* the windows' shapes: a soft round light, a soft band, a whole-table wash */
  --mo-blob: radial-gradient(closest-side, rgba(var(--mo-ink), 1), rgba(var(--mo-ink), .6) 40%, rgba(var(--mo-ink), .18) 72%, rgba(var(--mo-ink), 0));
  --mo-band: linear-gradient(90deg, rgba(var(--mo-ink), 0), rgba(var(--mo-ink), .45) 30%, rgba(var(--mo-ink), 1) 50%, rgba(var(--mo-ink), .45) 70%, rgba(var(--mo-ink), 0));
  --mo-wash: rgb(var(--mo-ink)); }
.table[data-mo-shade] { --mo-ink: 0, 0, 0; --mo-ground: #fff; --mo-blend: multiply; --mo-mix: screen; }
:is(.mo-light, .mo-sub) { background: var(--mo-ground); mix-blend-mode: var(--mo-blend); }
:is(.mo-light, .mo-sub) > b { inset: 0; background: var(--mo-feat) center / cover no-repeat; mix-blend-mode: var(--mo-mix); }
.mo-glints > i { position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, var(--gc), color-mix(in srgb, var(--gc) 50%, transparent) 28%, color-mix(in srgb, var(--gc) 14%, transparent) 60%, transparent); mix-blend-mode: screen; }
:root[data-mode="day"] .mo-glints > i { mix-blend-mode: normal; }
@keyframes mo-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@supports not (mix-blend-mode: screen) { .table-motion { display: none !important; } }

/* ---- AURORA (R020's, restored in R022): curtains of light hang in the ice, flow left and right, fold
   and shimmer, with a second, fainter aurora above them. They take the light group's four places as a
   group of their own: .w1 the main curtain, .w2 the same turned round and fainter (where the two cross,
   the rays shimmer), .w3 the second aurora above, b a patch of brightness passing along them. The
   curtains are screened over each other and the group is laid over the ice as it is. By day they tint
   the pale ice instead of lighting it. With the motion off, the faint aurora frozen in the ice shows. ---- */
.table[data-motion="aurora"] .mo-light { display: block; background: none; mix-blend-mode: normal; isolation: isolate; }
.table[data-motion="aurora"] .mo-light > :is(.w1, .w2, .w3, b) { display: block; background: center / 100% 100% no-repeat; mix-blend-mode: screen; transform-origin: 50% 100%; will-change: transform, opacity; }
.table[data-motion="aurora"] .mo-light > .w1 { inset: -12% -22% 40% -22%; background-image: var(--mo-p1);
  animation: mo-aurora-a 41s ease-in-out infinite alternate, mo-aurora-glow 11s ease-in-out infinite alternate; }
.table[data-motion="aurora"] .mo-light > .w2 { inset: -10% -26% 43% -18%; background-image: var(--mo-p1);
  animation: mo-aurora-b 27s ease-in-out infinite alternate, mo-aurora-flutter 3.9s ease-in-out infinite alternate; }
.table[data-motion="aurora"] .mo-light > .w3 { inset: -24% -18% 54% -24%; background-image: var(--mo-p2);
  animation: mo-aurora-c 53s ease-in-out infinite alternate, mo-aurora-veil 17s ease-in-out infinite alternate; }
.table[data-motion="aurora"] .mo-light > b.feat { inset: 0 25%; background: radial-gradient(ellipse 50% 45% at 50% 42%, rgba(130, 255, 205, .16), rgba(130, 255, 205, 0) 70%);
  animation: mo-aurora-pass 29s ease-in-out infinite; }
@keyframes mo-aurora-a { 0% { transform: translateX(-5%) skewX(-4deg) scaleY(.94); } 30% { transform: translateX(-1%) skewX(2deg) scaleY(1.04); }
  65% { transform: translateX(2%) skewX(-1.5deg) scaleY(.98); } 100% { transform: translateX(5%) skewX(3deg) scaleY(1.06); } }
@keyframes mo-aurora-glow { from { opacity: .5; } to { opacity: .78; } }
@keyframes mo-aurora-b { 0% { transform: scaleX(-1) translateX(3%) skewX(3deg) scaleY(1.02); } 50% { transform: scaleX(-1) translateX(-1%) skewX(-2deg) scaleY(.96); }
  100% { transform: scaleX(-1) translateX(-4%) skewX(2deg) scaleY(1.05); } }
@keyframes mo-aurora-flutter { from { opacity: .14; } to { opacity: .42; } }
@keyframes mo-aurora-c { 0% { transform: translateX(4%) skewX(3deg) scaleY(1.05); } 45% { transform: translateX(0) skewX(-2deg) scaleY(.95); }
  100% { transform: translateX(-5%) skewX(-4deg) scaleY(1.02); } }
@keyframes mo-aurora-veil { from { opacity: .24; } to { opacity: .52; } }
@keyframes mo-aurora-pass { 0%, 100% { transform: translateX(-60%); opacity: 0; } 25% { opacity: 1; } 50% { transform: translateX(60%); opacity: .6; } 75% { opacity: 0; } }
:root[data-mode="day"] .table[data-motion="aurora"] .mo-light > :is(.w1, .w2, .w3, b) { mix-blend-mode: multiply; }
:root[data-mode="day"] .table[data-motion="aurora"] .mo-light { opacity: .5; }

/* ---- MOONSTONE: deep moon glows rise in the stone's own sheen and wander slowly over the whole
   table, and the whole stone breathes with them. By day the sheen deepens to blue where they pass. ---- */
.table[data-motion="moonstone"] .mo-light { display: block; opacity: .95; }
.table[data-motion="moonstone"] .mo-light > :is(.w1, .w2, .w3, b) { display: block; }
.table[data-motion="moonstone"] .mo-light > :is(.w1, .w2) { width: calc(var(--mo-w, 1200px) * .8); height: calc(var(--mo-w, 1200px) * .62); background: var(--mo-blob); }
.table[data-motion="moonstone"] .mo-light > .w3 { inset: 0; background: var(--mo-wash); }
.table[data-motion="moonstone"] .mo-light > .w1 { left: calc(var(--mo-w, 1200px) * -.4); top: -24%; animation: mo-moon-a 89s ease-in-out infinite; }
.table[data-motion="moonstone"] .mo-light > .w2 { right: calc(var(--mo-w, 1200px) * -.44); bottom: -30%; opacity: .8; animation: mo-moon-b 113s ease-in-out infinite; }
.table[data-motion="moonstone"] .mo-light > .w3 { opacity: .14; animation: mo-moon-breathe 23s ease-in-out infinite alternate; }
@keyframes mo-moon-a { 0%, 100% { translate: 0 0; } 24% { translate: 55% 32%; } 50% { translate: 112% 8%; } 76% { translate: 64% -18%; } }
@keyframes mo-moon-b { 0%, 100% { translate: 0 0; } 30% { translate: -60% -35%; } 55% { translate: -118% -10%; } 80% { translate: -50% 12%; } }
@keyframes mo-moon-breathe { from { opacity: .05; } to { opacity: .3; } }
.table[data-motion="moonstone"][data-mo-shade] .mo-light { opacity: .85; }

/* ---- ELVISH (night): a beam of moonlight crosses the stone and back, catching its silver veins and
   the pinpricks in it; the stars of the inlay twinkle, each in its own time ---- */
.table[data-motion="elvish"] .mo-light { display: block; opacity: .9; }
.table[data-motion="elvish"] .mo-light > :is(.w1, .w3, b) { display: block; }
.table[data-motion="elvish"] .mo-light > .w1 { top: -110%; left: -46%; width: 46%; height: 320%; rotate: 16deg; background: var(--mo-band); animation: mo-beam 61s ease-in-out infinite alternate; }
.table[data-motion="elvish"] .mo-light > .w3 { inset: 0; background: var(--mo-wash); opacity: .12; }
@keyframes mo-beam { from { translate: -10% 0; } to { translate: 330% 0; } }
.table[data-motion="elvish"] .mo-glints { display: block; }
.table[data-motion="elvish"] .mo-glints > i { animation: mo-twinkle 13s ease-in-out infinite; animation-delay: var(--gd); }
.table[data-motion="elvish"] .mo-glints { opacity: .8; }
@keyframes mo-twinkle { 0%, 100% { opacity: 0; scale: .45; } 5% { opacity: .95; scale: 1; } 13% { opacity: 0; scale: .65; } }

/* ---- OBSIDIAN: now and then a gleam crosses the glass and shows the violet bands in it; a deeper
   glow drifts slowly within ---- */
.table[data-motion="obsidian"] .mo-light { display: block; }
.table[data-motion="obsidian"] .mo-light > :is(.w1, .w2, b) { display: block; }
.table[data-motion="obsidian"] .mo-light > .w1 { top: -120%; left: -30%; width: 26%; height: 340%; rotate: 24deg; background: var(--mo-band); animation: mo-gleam 23s cubic-bezier(.45, .05, .35, 1) infinite; }
.table[data-motion="obsidian"] .mo-light > .w2 { width: calc(var(--mo-w, 1200px) * .7); height: calc(var(--mo-w, 1200px) * .55); background: var(--mo-blob); left: 10%; top: -20%; opacity: .55; animation: mo-deep 71s ease-in-out infinite; }
@keyframes mo-gleam { 0%, 60% { translate: -40% 0; } 100% { translate: 560% 0; } }
@keyframes mo-deep { 0%, 100% { translate: 0 0; } 33% { translate: 45% 30%; } 66% { translate: -10% 22%; } }

/* ---- ANVIL (night): heat moves through the hammered iron, its marks glowing as it passes; the iron
   pulses as if breathed on, and its hot lines with it ---- */
.table[data-motion="anvil"] .mo-light { display: block; opacity: .8; }
.table[data-motion="anvil"] .mo-light > :is(.w1, .w2, .w3, b) { display: block; }
.table[data-motion="anvil"] .mo-light > .w1 { width: calc(var(--mo-w, 1200px) * .6); height: calc(var(--mo-w, 1200px) * .42); left: -18%; top: 20%; animation: mo-heat-a 53s ease-in-out infinite; }
.table[data-motion="anvil"] .mo-light > .w2 { width: calc(var(--mo-w, 1200px) * .45); height: calc(var(--mo-w, 1200px) * .34); right: -12%; top: -10%; opacity: .75; animation: mo-heat-b 71s ease-in-out infinite; }
.table[data-motion="anvil"] .mo-light > :is(.w1, .w2) { background: var(--mo-blob); }
.table[data-motion="anvil"] .mo-light > .w3 { inset: 0; background: var(--mo-wash); animation: mo-heat-breathe 8.5s ease-in-out infinite alternate; }
.table[data-motion="anvil"] > .table-lines { animation: mo-iron 8.5s ease-in-out infinite alternate; }
@keyframes mo-heat-a { 0%, 100% { translate: 0 0; } 35% { translate: 70% -30%; } 70% { translate: 120% 10%; } }
@keyframes mo-heat-b { 0%, 100% { translate: 0 0; } 40% { translate: -90% 60%; } 75% { translate: -30% 85%; } }
@keyframes mo-heat-breathe { from { opacity: .04; } to { opacity: .26; } }
@keyframes mo-iron { from { opacity: 1; } to { opacity: .72; } }

/* ---- KYBER (night): ripples of energy run out from the centre through the crystal's own veins ---- */
.table[data-motion="kyber"] .mo-light { display: block; }
.table[data-motion="kyber"] .mo-light > :is(.w1, .w2, .w3, b) { display: block; }
.table[data-motion="kyber"] .mo-light > :is(.w1, .w2, .w3) {
  width: calc(var(--mo-d, 1600px) * 1.15); height: calc(var(--mo-d, 1600px) * 1.15); left: calc(var(--mo-x, 50%) - var(--mo-d, 1600px) * .575); top: calc(var(--mo-y, 50%) - var(--mo-d, 1600px) * .575);
  border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--mo-ink), 0) 70%, rgba(var(--mo-ink), .5) 81%, rgba(var(--mo-ink), 1) 88%, rgba(var(--mo-ink), .3) 94%, rgba(var(--mo-ink), 0));
  opacity: 0; animation: mo-ripple 10.5s cubic-bezier(.25, .5, .45, 1) infinite; }
.table[data-motion="kyber"] .mo-light > .w2 { animation-delay: -3.5s; }
.table[data-motion="kyber"] .mo-light > .w3 { animation-delay: -7s; }
@keyframes mo-ripple { 0% { scale: .04; opacity: 0; } 8% { opacity: 1; } 70% { opacity: .75; } 100% { scale: 1; opacity: 0; } }

/* ---- PHOSPHOR CRYSTAL (night): bright patches travel slowly round the table along the crystal's
   own seams, waking the dark ones as they pass ---- */
.table[data-motion="phosphor"] .mo-light { display: block; }
.table[data-motion="phosphor"] .mo-light > :is(.w1, .w2, .w3, b) { display: block; }
.table[data-motion="phosphor"] .mo-light > :is(.w1, .w2, .w3) { background: var(--mo-blob); }
.table[data-motion="phosphor"] .mo-light > .w1 { width: calc(var(--mo-w, 1200px) * .5); height: calc(var(--mo-w, 1200px) * .4); left: -10%; top: -15%; animation: mo-wander-a 47s ease-in-out infinite; }
.table[data-motion="phosphor"] .mo-light > .w2 { width: calc(var(--mo-w, 1200px) * .42); height: calc(var(--mo-w, 1200px) * .34); right: -8%; bottom: -20%; opacity: .85; animation: mo-wander-b 61s ease-in-out infinite; }
.table[data-motion="phosphor"] .mo-light > .w3 { width: calc(var(--mo-w, 1200px) * .34); height: calc(var(--mo-w, 1200px) * .28); left: 38%; top: 30%; opacity: .7; animation: mo-wander-c 79s ease-in-out infinite; }
@keyframes mo-wander-a { 0%, 100% { translate: 0 0; } 20% { translate: 70% 40%; } 40% { translate: 150% 10%; } 60% { translate: 130% 80%; } 80% { translate: 40% 90%; } }
@keyframes mo-wander-b { 0%, 100% { translate: 0 0; } 25% { translate: -90% -60%; } 50% { translate: -180% -20%; } 75% { translate: -70% -110%; } }
@keyframes mo-wander-c { 0%, 100% { translate: 0 0; } 25% { translate: -110% 50%; } 50% { translate: 60% 80%; } 75% { translate: 120% -90%; } }

/* ---- THEURGY: by night a slow light crosses the lapis and back, and the gold flecks sparkle as it
   finds them (the twinkle drifting through the light picks them one by one); by night and by day the
   seven planets circle the halo ---- */
:root:not([data-mode="day"]) .table[data-motion="theurgy"] .mo-light { display: block; }
.table[data-motion="theurgy"] .mo-light > :is(.w1, .w2, .w3, b) { display: block; }
.table[data-motion="theurgy"] .mo-light > .w1 { top: -110%; left: -40%; width: 40%; height: 320%; rotate: 28deg; background: var(--mo-band); animation: mo-beam 37s ease-in-out infinite alternate; }
.table[data-motion="theurgy"] .mo-light > :is(.w2, .w3) { inset: -256px; background: url("assets/motion/twinkle.png") 0 0 / 256px 256px repeat; }
/* (painted in this order: two twinkles that meet only here and there, the passing light over them, the flecks) */
.table[data-motion="theurgy"] .mo-light > .w2 { z-index: 1; animation: mo-tile-256 19s linear infinite; }
.table[data-motion="theurgy"] .mo-light > .w3 { z-index: 2; background-size: 200px 200px; mix-blend-mode: multiply; animation: mo-tile-200 27s linear infinite reverse; }
.table[data-motion="theurgy"] .mo-light > .w1 { z-index: 3; mix-blend-mode: screen; opacity: .7; }
.table[data-motion="theurgy"] .mo-light > b { z-index: 4; }
.table[data-motion="theurgy"] .mo-spin { display: block; animation: mo-turn 300s linear infinite; }
@keyframes mo-tile-256 { from { translate: 0 0; } to { translate: 256px 256px; } }
@keyframes mo-tile-200 { from { translate: 0 0; } to { translate: 200px -200px; } }

/* ---- HOLOTABLE: the sweep turns round the centre and lights the hex mesh it passes over, and a ring
   pings out from the centre now and then. The sweep drawn in the figure turns with it. By day the
   mesh darkens under the sweep. ---- */
.table[data-motion="holotable"] .mo-light { display: block; opacity: .62; }
.table[data-motion="holotable"] .mo-light > :is(.w1, .w2, b) { display: block; }
.table[data-motion="holotable"] .mo-light > .w1 {
  width: var(--mo-d, 1600px); height: var(--mo-d, 1600px); left: calc(var(--mo-x, 50%) - var(--mo-d, 1600px) / 2); top: calc(var(--mo-y, 50%) - var(--mo-d, 1600px) / 2); border-radius: 50%;
  background: conic-gradient(from 100deg, rgba(var(--mo-ink), 0) 0deg 280deg, rgba(var(--mo-ink), .12) 318deg, rgba(var(--mo-ink), .5) 350deg, rgba(var(--mo-ink), 1) 359.4deg, rgba(var(--mo-ink), 0) 359.6deg);
  animation: mo-turn 14s linear infinite; }
.table[data-motion="holotable"] .mo-light > .w2 {
  width: calc(var(--mo-r, 300px) * 2.8); height: calc(var(--mo-r, 300px) * 2.8); left: calc(var(--mo-x, 50%) - var(--mo-r, 300px) * 1.4); top: calc(var(--mo-y, 50%) - var(--mo-r, 300px) * 1.4); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--mo-ink), 0) 80%, rgba(var(--mo-ink), .9) 92%, rgba(var(--mo-ink), 0)); opacity: 0; animation: mo-ping 7s ease-out 2s infinite; }
.table[data-motion="holotable"] .mo-spin { display: block; animation: mo-turn 14s linear infinite; }
.table[data-motion="holotable"][data-mo-shade] .mo-light { opacity: .6; }
@keyframes mo-ping { 0% { scale: .08; opacity: 0; } 8% { opacity: .9; } 70% { scale: 1; opacity: 0; } 100% { scale: 1; opacity: 0; } }

/* ---- HOLOGRAM: its own scan lines roll slowly down the glass (takeover), a band of light follows
   them, the projection flickers now and then, and its spokes turn ---- */
.table[data-motion="hologram"] .mo-plane { display: block; }
.table[data-motion="hologram"] .mo-plane > .p1 { display: block; top: -4px; left: 0; right: 0; bottom: 0; background: var(--mo-tex); animation: mo-creep 1.8s linear infinite; }
.table[data-motion="hologram"] .mo-f1 { display: block; inset: -26% 0 auto; height: 26%; border-radius: 0; mix-blend-mode: screen; animation: mo-roll 10s linear infinite;
  background: linear-gradient(rgba(0, 0, 0, 0), color-mix(in srgb, var(--tbl-line) 10%, transparent) 40%, color-mix(in srgb, var(--tbl-line) 22%, transparent) 50%, color-mix(in srgb, var(--tbl-line) 10%, transparent) 60%, rgba(0, 0, 0, 0)); }
:root[data-mode="day"] .table[data-motion="hologram"] .mo-f1 { mix-blend-mode: normal; }
.table[data-motion="hologram"] > .table-lines { animation: mo-flicker 11s linear infinite; }
.table[data-motion="hologram"] .mo-spin { display: block; animation: mo-turn 80s linear infinite; }
@keyframes mo-creep { from { translate: 0 0; } to { translate: 0 4px; } }
@keyframes mo-roll { from { translate: 0 0; } to { translate: 0 520%; } }
@keyframes mo-flicker { 0%, 58%, 60.5%, 62%, 100% { opacity: 1; } 59% { opacity: .7; } 61.2% { opacity: .86; } }

/* ---- STAR CHART (night): the chart's own sky wheels slowly round the centre (takeover: the sky,
   extended past the surface's edges so its corners never show, one turn in 25 minutes), and its own
   stars twinkle where they are (the twinkle drifting over them picks them one by one) ---- */
.table[data-motion="starmap"] .mo-plane, .table[data-motion="starmap"] .mo-cap { display: block; }
.table[data-motion="starmap"] .mo-plane > .p1 {
  --s: max(calc(var(--mo-w, 1600px) / 1600), calc(var(--mo-h, 1000px) / 1000));
  display: block; width: calc(var(--s) * 2400); height: calc(var(--s) * 2400); left: calc(50% - var(--s) * 1200); top: calc(50% - var(--s) * 1200);
  background: var(--mo-plane) 0 0 / 100% 100% no-repeat;
  transform-origin: calc(var(--mo-x, 50%) - var(--mo-w, 1600px) / 2 + var(--s) * 1200) calc(var(--mo-y, 50%) - var(--mo-h, 1000px) / 2 + var(--s) * 1200);
  animation: mo-turn 1500s linear infinite; }
.table[data-motion="starmap"] .mo-plane .mo-sub { display: block; inset: 0; opacity: .95; }
.table[data-motion="starmap"] .mo-plane .mo-sub > :is(.t1, .t2, b) { display: block; }
.table[data-motion="starmap"] .mo-plane .mo-sub > b { background: var(--mo-p1) 0 0 / 100% 100% no-repeat; }
.table[data-motion="starmap"] .mo-plane .mo-sub > .t1 { inset: -300px; background: url("assets/motion/twinkle.png") 0 0 / 300px 300px repeat; animation: mo-tile-300 23s linear infinite; }
.table[data-motion="starmap"] .mo-plane .mo-sub > .t2 { inset: -220px; background: url("assets/motion/twinkle.png") 0 0 / 220px 220px repeat; mix-blend-mode: screen; opacity: .6; animation: mo-tile-220 31s linear infinite; }
@keyframes mo-tile-300 { from { translate: 0 0; } to { translate: 300px 0; } }
@keyframes mo-tile-220 { from { translate: 0 0; } to { translate: 0 220px; } }

/* ---- CYBERPUNK: by night the magenta sign stutters now and then, and its reflections in the wet
   asphalt dim with it (a shade map of them, .mo-f1), while the cyan reflections swell and settle
   (.mo-f2); by night and by day the vias of the circuit blink like the lights on a board ---- */
:root:not([data-mode="day"]) .table[data-motion="cyberpunk"] :is(.mo-f1, .mo-f2) { display: block; }
.table[data-motion="cyberpunk"] .mo-f1 { mix-blend-mode: multiply; opacity: 0; animation: mo-stutter 13s linear infinite; }
.table[data-motion="cyberpunk"] .mo-f2 { mix-blend-mode: screen; animation: mo-wet 9s ease-in-out infinite alternate; }
:root:not([data-mode="day"]) .table[data-motion="cyberpunk"] > .table-lines { animation: mo-stutter-lines 13s linear infinite; }
.table[data-motion="cyberpunk"] .mo-glints { display: block; }
.table[data-motion="cyberpunk"] .mo-glints > i { animation: mo-led 9s linear infinite; animation-delay: var(--gd); }
@keyframes mo-stutter { 0%, 30.8%, 33%, 73.8%, 75%, 100% { opacity: 0; } 31% { opacity: 1; } 31.5% { opacity: .3; } 32% { opacity: 1; } 32.6% { opacity: .5; } 74% { opacity: .9; } 74.6% { opacity: .2; } }
@keyframes mo-stutter-lines { 0%, 30.8%, 33%, 73.8%, 75%, 100% { opacity: 1; } 31% { opacity: .5; } 31.5% { opacity: .9; } 32% { opacity: .5; } 32.6% { opacity: .8; } 74% { opacity: .6; } 74.6% { opacity: .92; } }
@keyframes mo-wet { from { opacity: 0; } to { opacity: .55; } }
@keyframes mo-led { 0%, 100% { opacity: 0; } 2%, 8% { opacity: .95; } 10% { opacity: 0; } }

.opt-note { margin: 0; font-size: var(--t-small); line-height: 1.45; color: var(--text-3); }