/* ===========================================================================
   skins.css — the game themes (js/skins.js). Loaded last, so a theme has the
   final word.

   Each theme sits on Dark or Light (<html data-theme>), so every rule written
   for its base still holds, and <html data-skin> changes what makes it that
   game: the ground and the panels on it, ink, accent and money colours,
   corners, the lettering of headings and the wordmark, and the chrome people
   see on every page — the top bar, buttons, inputs and dialogs.

   Every theme also dresses the same kit (the first section): the wall the
   pages scroll over (--skin-wall, fixed behind them all), what drifts between
   the two (--skin-fx: embers, motes, clouds, a neon floor), the art standing
   behind Home's fan of cards (--skin-hero), the collection's worth in the
   theme's own material (--skin-money), the four tiles under it
   (--skin-kpi-1…4), every progress meter (--skin-meter) and the mark before
   a section's small label (--skin-mark). Only transform and opacity move, and
   only at Full motion.

   A theme brings its own accent, so the accent picked in Preferences waits
   under it for Dark and Light. Text colours are held to the app's 4.5:1 on
   the theme's grounds (test/skins.test.js checks them).
   =========================================================================== */

/* ------------------------------------------------------------ every theme */
:root[data-skin] {
  --font-display: var(--font);
  --skin-bar: linear-gradient(var(--glass), var(--glass)), var(--bg);
  --skin-wall: none;
  /* the drifting layer: one loop carries it --skin-fx-to, so the tiles in it
     are sized to divide that travel and the loop never shows a seam; it
     overhangs the screen (--skin-fx-inset) by as much as it travels */
  --skin-fx: none;
  --skin-fx-inset: 0px;
  --skin-fx-to: none;
  --skin-fx-time: 80s;
  --skin-fx-o: 1;
  --skin-fx-o2: 1;
  --skin-fx-blend: normal;
  /* What most themes drift: a scatter of motes (round) or blocks (square) in
     three colours, six layers whose tiles are all 600px tall (the travel) and
     of widths that share no rhythm, so the scatter never reads as a grid. */
  --dot-1: #fff; --dot-2: #fff; --dot-3: #fff; --dot-k: 1; --blk: 8px;
  --skin-dots:
    radial-gradient(circle at 22% 14%, var(--dot-1) 0 calc(var(--dot-k) * 1px), color-mix(in srgb, var(--dot-1) 40%, transparent) calc(var(--dot-k) * 1.8px), transparent calc(var(--dot-k) * 4.5px)) 0 0 / 410px 600px,
    radial-gradient(circle at 68% 41%, var(--dot-2) 0 calc(var(--dot-k) * 1.2px), color-mix(in srgb, var(--dot-2) 35%, transparent) calc(var(--dot-k) * 2.2px), transparent calc(var(--dot-k) * 5.5px)) 0 0 / 530px 600px,
    radial-gradient(circle at 37% 73%, var(--dot-3) 0 calc(var(--dot-k) * 1.5px), color-mix(in srgb, var(--dot-3) 30%, transparent) calc(var(--dot-k) * 3px), transparent calc(var(--dot-k) * 7px)) 0 0 / 670px 600px,
    radial-gradient(circle at 81% 88%, var(--dot-1) 0 calc(var(--dot-k) * .8px), color-mix(in srgb, var(--dot-1) 40%, transparent) calc(var(--dot-k) * 1.5px), transparent calc(var(--dot-k) * 3.5px)) 0 0 / 350px 600px,
    radial-gradient(circle at 12% 52%, var(--dot-2) 0 calc(var(--dot-k) * 1.2px), color-mix(in srgb, var(--dot-2) 30%, transparent) calc(var(--dot-k) * 2.5px), transparent calc(var(--dot-k) * 6px)) 0 0 / 590px 600px,
    radial-gradient(circle at 55% 27%, var(--dot-3) 0 calc(var(--dot-k) * 1.7px), color-mix(in srgb, var(--dot-3) 28%, transparent) calc(var(--dot-k) * 3.5px), transparent calc(var(--dot-k) * 8px)) 0 0 / 730px 600px;
  --skin-blocks:
    conic-gradient(at var(--blk) var(--blk), transparent 75%, var(--dot-1) 0) 90px 84px / 410px 600px,
    conic-gradient(at calc(var(--blk) * .75) calc(var(--blk) * .75), transparent 75%, var(--dot-2) 0) 360px 246px / 530px 600px,
    conic-gradient(at var(--blk) var(--blk), transparent 75%, var(--dot-3) 0) 248px 438px / 670px 600px,
    conic-gradient(at calc(var(--blk) * .6) calc(var(--blk) * .6), transparent 75%, var(--dot-1) 0) 283px 528px / 350px 600px,
    conic-gradient(at calc(var(--blk) * .85) calc(var(--blk) * .85), transparent 75%, var(--dot-2) 0) 70px 312px / 590px 600px,
    conic-gradient(at var(--blk) var(--blk), transparent 75%, var(--dot-3) 0) 400px 162px / 730px 600px;
  /* Home's stage: a shape behind the fan (::before) and its light (::after) */
  --skin-hero: none;
  --skin-hero-clip: none;
  --skin-hero-mask: none;
  --skin-hero-r: 0;
  --skin-hero-shadow: none;
  --skin-hero-size: clamp(240px, 28vw, 430px);
  --skin-hero-at: 0 0;
  --skin-hero-turn: 0deg;
  --skin-hero-o: 1;
  --skin-hero-anim: none;
  --skin-glow: none;
  --skin-glow-clip: none;
  --skin-glow-size: calc(var(--skin-hero-size) * 1.55);
  --skin-glow-anim: none;
  /* the worth, the tiles, the meters, the mark */
  --skin-money: linear-gradient(100deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 55%, #fff) 36%, var(--gold) 58%,
    color-mix(in srgb, var(--gold) 70%, #5a3a08) 100%);
  --skin-money-fx: none;
  --skin-money-stroke: 0 transparent;
  --skin-meter: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent));
  --skin-kpi-1: var(--accent);
  --skin-kpi-2: var(--accent-2);
  --skin-kpi-3: var(--gold);
  --skin-kpi-4: color-mix(in srgb, var(--accent) 50%, var(--accent-2));
  --skin-mark: none;
}

/* The wall stands behind every page, fixed, and the pages scroll over it; the
   theme's drifting layer lies between the two. Both are the root's own boxes,
   under everything, so no page has to know about them. */
:root[data-skin] body { background: transparent; }
:root[data-skin]::before,
:root[data-skin]::after { content: ""; position: fixed; pointer-events: none; }
:root[data-skin]::before { inset: 0; z-index: -2; background: var(--skin-wall), var(--bg); }
:root[data-skin]::after {
  inset: var(--skin-fx-inset); z-index: -1;
  background: var(--skin-fx);
  opacity: var(--skin-fx-o);
  mix-blend-mode: var(--skin-fx-blend);
}
:root[data-skin][data-motion="full"]::after {
  will-change: transform, opacity;
  animation: skin-fx var(--skin-fx-time) linear infinite, skin-twinkle 3.6s ease-in-out infinite alternate;
}
@keyframes skin-fx { to { transform: var(--skin-fx-to); } }
@keyframes skin-twinkle { from { opacity: var(--skin-fx-o); } to { opacity: var(--skin-fx-o2); } }
@media print { :root[data-skin]::before, :root[data-skin]::after { display: none; } }

/* The pages are see-through, so the wall shows under them all. */
:root[data-skin] :is(main[id^="view-"], .stage, .view-home, .view-library, .view-sets, .view-collection, .view-insights, .view-shelves, .view-profile, .view-pricing, .view-find, .view-grading, .view-feedback, .view-admin) {
  background: transparent;
}
/* Home's aurora thins out into the wall instead of into a plain ground, and
   its dot grid gives way to the theme's own. */
:root[data-skin] .home-sky::after,
:root[data-skin] .home-sky-grid { display: none; }
:root[data-skin] .home-sky {
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

:root[data-skin] :is(h1, h2, h3, .brand > span, .page-name) { font-family: var(--font-display); }
:root[data-skin] .topbar { background: var(--skin-bar); }
:root[data-skin] .topbar::after { display: none; }
/* The wordmark's foil sweep belongs to the default look. */
:root[data-skin] .brand[href]::after { display: none; }

/* The stage behind Home's fan: the theme's emblem, and the light it gives. */
:root[data-skin] .home-stage::before,
:root[data-skin] .home-stage::after {
  content: ""; position: absolute; inset: 0; margin: auto; pointer-events: none;
}
:root[data-skin] .home-stage::before {
  z-index: -1;
  width: var(--skin-hero-size); height: var(--skin-hero-size);
  translate: var(--skin-hero-at);
  rotate: var(--skin-hero-turn);
  background: var(--skin-hero);
  border-radius: var(--skin-hero-r);
  clip-path: var(--skin-hero-clip);
  -webkit-mask: var(--skin-hero-mask); mask: var(--skin-hero-mask);
  box-shadow: var(--skin-hero-shadow);
  opacity: var(--skin-hero-o);
}
:root[data-skin] .home-stage::after {
  z-index: -2;
  width: var(--skin-glow-size); height: var(--skin-glow-size);
  translate: var(--skin-hero-at);
  background: var(--skin-glow);
  clip-path: var(--skin-glow-clip);
}
:root[data-skin][data-motion="full"] .home-hero.is-live .home-stage::before { animation: var(--skin-hero-anim); }
:root[data-skin][data-motion="full"] .home-hero.is-live .home-stage::after { animation: var(--skin-glow-anim); }
@keyframes skin-float { 50% { transform: translateY(-14px); } }
@keyframes skin-spin { to { transform: rotate(360deg); } }
@keyframes skin-spin-y { to { transform: rotateY(360deg); } }
@keyframes skin-breathe { 50% { transform: scale(1.06); opacity: .78; } }
@keyframes skin-flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  30% { opacity: .82; transform: scale(.97); }
  55% { opacity: .95; transform: scale(1.03); }
  80% { opacity: .86; }
}

/* The collection's worth, in the theme's own material. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  :root[data-skin] :is(.home-worth .home-money:not(.is-masked):not(.is-none), .pg-hero .is-worth :is(.lib-stat-value:not(.is-muted), dd), .ins-worth .ins-money:not(.is-masked)) {
    background: var(--skin-money);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    -webkit-text-stroke: var(--skin-money-stroke);
    filter: var(--skin-money-fx);
  }
}
/* The four tiles under it, in the theme's palette. */
:root[data-skin] .home-kpi-item { --kpi: var(--skin-kpi-1); }
:root[data-skin] .home-kpi-item.is-cards { --kpi: var(--skin-kpi-2); }
:root[data-skin] .home-kpi-item.is-display { --kpi: var(--skin-kpi-3); }
:root[data-skin] .home-kpi-item.is-watch { --kpi: var(--skin-kpi-4); }
/* Every meter fills as the theme's gauge does. */
:root[data-skin] :is(.progress-bar, .home-kpi-meter i, .lib-stat-meter i, .stile-have-meter i, .pf-set-meter i, .srch-progress-bar) {
  background: var(--skin-meter);
}
/* A section's small label, marked as the theme marks it. */
:root[data-skin] :is(.home-kicker, .pg-kicker, .ins-kicker, .pg-hero .lib-eyebrow)::before {
  content: var(--skin-mark); margin-right: .55em; color: var(--accent-text);
}

/* ====================================================== Crystal Saga
   Final Fantasy: the blue menu window with its silver edge, crystal light,
   the Cinzel of a title screen. */
:root[data-skin="crystal"] {
  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --radius-sm: 6px; --radius: 9px; --radius-lg: 12px;
  --bg: #060a24; --bg-2: #0c133d; --bg-3: #16205a; --surface: #0e1648;
  --line: #34449a; --line-soft: #1c276a; --hairline: rgba(225, 232, 255, .16);
  --ink: #f2f5ff; --ink-2: #bdc7f2; --ink-3: #95a2dc;
  --accent: #7fd8ff; --accent-2: #c9a8ff; --accent-ink: #06123a;
  --accent-text: #8fe0ff; --accent-fill: #7fd8ff; --accent-hover: #a9e8ff;
  --gold: #f2d47c; --gold-text: #f5da8c; --danger: #ff8a8a;
  --pocket: #050822; --pocket-line: #283680;
  --glass: color-mix(in srgb, #0c133d 80%, transparent);
  --glow-accent: 0 0 0 1px color-mix(in srgb, #7fd8ff 55%, transparent), 0 8px 30px color-mix(in srgb, #7fd8ff 26%, transparent);
  --pfbar-from: #10197a; --pfbar-bg: #0c133d;
  --window: linear-gradient(180deg, #2c43c2 0%, #16228a 48%, #0c1458 100%);
  --skin-bar: linear-gradient(180deg, #2a40bd, #111a6c);
  --skin-wall:
    radial-gradient(1100px 520px at 50% -160px, rgba(88, 118, 255, .34), transparent 70%),
    radial-gradient(900px 600px at 100% 100%, rgba(150, 110, 255, .14), transparent 70%),
    repeating-linear-gradient(60deg, rgba(127, 216, 255, .035) 0 1px, transparent 1px 86px),
    repeating-linear-gradient(-60deg, rgba(127, 216, 255, .035) 0 1px, transparent 1px 86px);
  /* motes of crystal light, rising */
  --skin-fx: var(--skin-dots);
  --dot-1: #ffffff; --dot-2: #dcc8ff; --dot-3: #9fe6ff; --dot-k: 1.1;
  --skin-fx-inset: 0 0 -600px 0; --skin-fx-to: translate3d(0, -600px, 0); --skin-fx-time: 90s;
  --skin-fx-o: .5; --skin-fx-o2: .95; --skin-fx-blend: screen;
  /* the crystal: tall and faceted, lit from the left */
  --skin-hero:
    linear-gradient(90deg, transparent 49.6%, rgba(255, 255, 255, .7) 50%, transparent 50.4%),
    linear-gradient(180deg, transparent 37.6%, rgba(255, 255, 255, .55) 38%, transparent 38.6%),
    linear-gradient(90deg, rgba(10, 18, 90, .32) 50%, transparent 50%),
    linear-gradient(165deg, #f0fbff 0%, #8fe0ff 30%, #5b78ef 62%, #a985ff 100%);
  --skin-hero-clip: polygon(50% 0, 80% 38%, 50% 100%, 20% 38%);
  --skin-hero-o: .62;
  --skin-hero-anim: skin-float 7s ease-in-out infinite;
  --skin-glow: radial-gradient(closest-side, rgba(127, 216, 255, .34), rgba(88, 118, 255, .12) 55%, transparent);
  --skin-glow-anim: skin-breathe 7s ease-in-out infinite;
  --skin-money: linear-gradient(100deg, #f2d47c 0%, #fff6d6 34%, #f2d47c 56%, #b98f2f 100%);
  --skin-money-fx: drop-shadow(0 0 22px rgba(242, 212, 124, .3));
  /* the ATB gauge */
  --skin-meter: linear-gradient(90deg, #3f8cff, #7fd8ff 70%, #effcff);
  --skin-kpi-1: #7fd8ff; --skin-kpi-2: #c9a8ff; --skin-kpi-3: #f2d47c; --skin-kpi-4: #7ff0c9;
  --skin-mark: "◆";
}
:root[data-skin="crystal"] :is(h1, h2, h3) { letter-spacing: .02em; font-weight: 700; }
:root[data-skin="crystal"] .topbar { --ink-2: #dfe5ff; --ink-3: #c9d2ff; border-bottom: 2px solid #d6deff; box-shadow: inset 0 -3px 0 #4256c9; }
/* the menu window: blue, lit from above, edged in silver */
:root[data-skin="crystal"] .modal,
:root[data-skin="crystal"] :is(.pmenu, .popover) {
  background: var(--window);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 2px solid #e4e9ff;
  box-shadow: inset 0 0 0 1px #5a6ee0, 0 0 0 1px #0a1048, 0 24px 60px -20px rgba(0, 0, 0, .8);
}
:root[data-skin="crystal"] :is(.home-kpi, .home-hello) {
  background: linear-gradient(180deg, rgba(44, 67, 194, .7), rgba(12, 20, 88, .82));
  border: 1.5px solid rgba(228, 233, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(90, 110, 224, .85), 0 16px 32px -20px rgba(0, 0, 0, .85);
}
:root[data-skin="crystal"] .home-kpi:hover { border-color: #fff; box-shadow: inset 0 0 0 1px rgba(127, 216, 255, .9), 0 0 24px -6px color-mix(in srgb, var(--kpi) 50%, transparent); }
:root[data-skin="crystal"] .btn {
  background: linear-gradient(180deg, #2238ad, #121c70); border-color: #8f9ff0;
}
:root[data-skin="crystal"] .btn:hover { border-color: #e4e9ff; }
:root[data-skin="crystal"] .btn-primary {
  color: #06123a; border: 1px solid #e6f8ff;
  background: linear-gradient(180deg, #d4f4ff, #7fd8ff 55%, #49b9ef);
  box-shadow: 0 0 18px rgba(127, 216, 255, .35);
}
:root[data-skin="crystal"] .input { background: #0a1140; border-color: #3d4fb0; }

/* ====================================================== Brick Builder
   LEGO: bright primaries, a studded yellow bar, chunky buttons that press in. */
:root[data-skin="brick"] {
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --radius-sm: 10px; --radius: 16px; --radius-lg: 22px;
  --bg: #f6f2e6; --bg-2: #ffffff; --bg-3: #eee7d5; --surface: #ffffff;
  --line: #d8cdb3; --line-soft: #e7dfcb; --hairline: rgba(255, 255, 255, .7);
  --ink: #1b1b1b; --ink-2: #474338; --ink-3: #635d4e;
  --accent: #d01012; --accent-2: #006cb7; --accent-ink: #ffffff;
  --accent-text: #b80d10; --accent-fill: #d01012; --accent-hover: #a80b0d;
  --gold: #f2b705; --gold-text: #845d00; --danger: #b3261e;
  --pocket: #e4dcc6; --pocket-line: #cbbf9f;
  --shadow-card: 0 4px 0 rgba(0, 0, 0, .12), 0 8px 18px rgba(0, 0, 0, .12);
  --pfbar-from: #fff6c9; --pfbar-bg: #fffaf0;
  --stud: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .42) 0 4.5px, transparent 5.5px),
    radial-gradient(circle at 50% 56%, rgba(0, 0, 0, .13) 0 6px, transparent 7px);
  --skin-bar: var(--stud) 0 0 / 26px 26px, #ffcf00;
  /* a baseplate: studs in rows, lit from the top left */
  --skin-wall:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .85) 0 5px, transparent 6px) 0 0 / 30px 30px,
    radial-gradient(circle at 54% 56%, rgba(120, 100, 50, .1) 0 7px, transparent 8px) 0 0 / 30px 30px,
    radial-gradient(1000px 460px at 50% -160px, rgba(255, 207, 0, .22), transparent 70%);
  /* a blue 2×2 brick, standing behind the fan */
  --skin-hero:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .34) 0 14%, rgba(0, 40, 90, .35) 14.5% 18%, transparent 18.5%) 0 0 / 50% 50%,
    linear-gradient(150deg, #2f8fe0, #006cb7 55%, #00528c);
  --skin-hero-size: clamp(130px, 13vw, 200px);
  --skin-hero-r: 9%;
  --skin-hero-shadow: inset 0 -12px 0 rgba(0, 0, 0, .22), inset 0 3px 0 rgba(255, 255, 255, .35), 0 30px 50px -24px rgba(60, 40, 0, .45);
  --skin-hero-at: calc(var(--skin-hero-size) * 1.2) calc(var(--skin-hero-size) * -.78);
  --skin-hero-turn: 14deg;
  --skin-hero-o: .95;
  --skin-hero-anim: skin-float 6s ease-in-out infinite;
  --skin-glow: radial-gradient(closest-side, rgba(255, 207, 0, .3), transparent);
  --skin-money: linear-gradient(100deg, #6a4a00 0%, #9a6f00 45%, #7a5600 70%, #5c4000 100%);
  /* a row of studs, as the gauge */
  --skin-meter: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .45) 0 2px, transparent 2.5px) 0 0 / 10px 100%, #d01012;
  --skin-kpi-1: #d01012; --skin-kpi-2: #006cb7; --skin-kpi-3: #b58500; --skin-kpi-4: #00852b;
  --skin-mark: "■";
}
:root[data-skin="brick"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: 0; }
:root[data-skin="brick"] .topbar {
  --ink: #1b1b1b; --ink-2: #3b3200; --ink-3: #4a3f00; --bg-3: rgba(255, 255, 255, .62);
  --line: rgba(0, 0, 0, .16); --accent-text: #b80d10;
  border-bottom: 3px solid #e0a800;
}
:root[data-skin="brick"] .btn { box-shadow: 0 3px 0 rgba(0, 0, 0, .16); border-width: 1.5px; font-weight: 700; }
:root[data-skin="brick"] .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .16); }
:root[data-skin="brick"] .btn-primary { box-shadow: 0 3px 0 #8f0a0b; }
:root[data-skin="brick"] .btn-primary:hover { box-shadow: 0 3px 0 #7a0809; }
:root[data-skin="brick"] .modal { border: 0; border-radius: 24px; box-shadow: 0 7px 0 rgba(0, 0, 0, .14), 0 30px 70px -30px rgba(0, 0, 0, .45); }
/* each tile a brick: white, a band of its colour studded along the top */
:root[data-skin="brick"] .home-kpi {
  padding-top: 20px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .5) 0 2.5px, transparent 3px) 4px 0 / 14px 10px repeat-x,
    linear-gradient(var(--kpi), var(--kpi)) 0 0 / 100% 10px no-repeat,
    #fff;
  border: 0;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .13), 0 14px 24px -14px rgba(60, 40, 0, .35);
}
:root[data-skin="brick"] .home-kpi-top { top: 17px; }
:root[data-skin="brick"] .home-kpi:hover { box-shadow: 0 6px 0 rgba(0, 0, 0, .13), 0 18px 28px -14px rgba(60, 40, 0, .4); }

/* ====================================================== Pocket Trainer
   Pokémon: a ball-red bar over a black hinge, white panels, electric yellow. */
:root[data-skin="trainer"] {
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-display: "Lilita One", "Nunito", system-ui, sans-serif;
  --radius-sm: 10px; --radius: 14px; --radius-lg: 20px;
  --bg: #f1f3f8; --bg-2: #ffffff; --bg-3: #e7eaf1; --surface: #ffffff;
  --line: #d0d5e0; --line-soft: #e2e6ee; --hairline: rgba(255, 255, 255, .8);
  --ink: #16181d; --ink-2: #474d5b; --ink-3: #5d6472;
  --accent: #e3350d; --accent-2: #3b4cca; --accent-ink: #ffffff;
  --accent-text: #c42c0a; --accent-fill: #d0300b; --accent-hover: #b02807;
  --gold: #ffcb05; --gold-text: #806300; --danger: #b8271c;
  --pocket: #e1e5ee; --pocket-line: #c7cdda;
  --pfbar-from: #f7f8fb; --pfbar-bg: #ffffff;
  --skin-bar: linear-gradient(180deg, #dc340d, #c42c0a);
  --skin-wall:
    radial-gradient(circle at 50% 50%, rgba(22, 24, 29, .05) 0 3px, transparent 3.5px 10px, rgba(22, 24, 29, .045) 10px 12px, transparent 12.5px) 0 0 / 64px 64px,
    radial-gradient(900px 420px at 85% -120px, rgba(255, 203, 5, .2), transparent 70%),
    linear-gradient(180deg, rgba(227, 53, 13, .07), transparent 300px);
  /* the ball, turning slowly behind the fan */
  --skin-hero:
    radial-gradient(circle, #fff 0 8%, #1d1d1f 8.5% 12.5%, transparent 13%),
    linear-gradient(transparent 46.5%, #1d1d1f 46.5% 53.5%, transparent 53.5%),
    linear-gradient(180deg, #f0522c 0%, #c42c0a 50%, #ffffff 50%, #dfe3ea 100%);
  --skin-hero-r: 50%;
  --skin-hero-shadow: inset 0 0 0 clamp(8px, 1vw, 13px) #1d1d1f, inset -18px -22px 40px rgba(0, 0, 0, .18), 0 30px 50px -26px rgba(20, 24, 32, .45);
  --skin-hero-size: clamp(290px, 37vw, 560px);
  --skin-hero-o: .2;
  --skin-hero-anim: skin-spin 48s linear infinite;
  --skin-glow: radial-gradient(closest-side, rgba(255, 203, 5, .38), rgba(255, 203, 5, .1) 55%, transparent);
  --skin-money: linear-gradient(100deg, #6e5400 0%, #a07a00 45%, #7a5c00 72%, #5c4500 100%);
  /* the HP bar */
  --skin-meter: linear-gradient(180deg, #7ef0a0, #2fbf60 55%, #23a050);
  --skin-kpi-1: #d0300b; --skin-kpi-2: #3b4cca; --skin-kpi-3: #b88f00; --skin-kpi-4: #1f8f4e;
  --skin-mark: "●";
}
:root[data-skin="trainer"] :is(h1, h2, h3) { font-weight: 400; letter-spacing: .01em; }
:root[data-skin="trainer"] .topbar {
  --ink: #ffffff; --ink-2: #ffffff; --ink-3: #ffffff;
  --bg-3: rgba(0, 0, 0, .16); --line: rgba(0, 0, 0, .22);
  --accent: #ffffff; --accent-text: #ffffff; --accent-fill: #ffffff; --accent-ink: #c42c0a;
  --gold: #ffe066; --gold-text: #ffe066;
  color: #fff;
}
/* the hinge between the lid and the screen, with its button */
:root[data-skin="trainer"] .topbar::after {
  display: block; inset: auto 0 -5px 0; height: 5px; z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 3px, #1d1d1f 3.5px 6px, transparent 6.5px) 50% 50% / 14px 14px no-repeat,
    #1d1d1f;
}
:root[data-skin="trainer"] .modal { border: 3px solid #1d1d1f; }
:root[data-skin="trainer"] .btn-primary { border: 2px solid #1d1d1f; }
/* the tiles: white cards, a black rim, pressed down onto the page */
:root[data-skin="trainer"] .home-kpi {
  background: linear-gradient(180deg, color-mix(in srgb, var(--kpi) 9%, #fff), #fff 46%);
  border: 2px solid #1d1d1f;
  box-shadow: 0 4px 0 #1d1d1f, 0 16px 26px -18px rgba(20, 24, 32, .5);
}
:root[data-skin="trainer"] .home-kpi:hover { border-color: #1d1d1f; box-shadow: 0 6px 0 #1d1d1f, 0 20px 30px -18px rgba(20, 24, 32, .5); }

/* ====================================================== Hero's Legend
   The Legend of Zelda: deep forest, a golden relic's trim, the cyan of
   ancient technology. */
:root[data-skin="legend"] {
  --font-display: "Marcellus SC", Georgia, serif;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --bg: #07110c; --bg-2: #0d1b14; --bg-3: #15291f; --surface: #0f1e17;
  --line: #2b4636; --line-soft: #1a2e23; --hairline: rgba(239, 231, 207, .07);
  --ink: #f0e9d2; --ink-2: #c5bb98; --ink-3: #a19673;
  --accent: #3fd2c7; --accent-2: #d9b54a; --accent-ink: #03201d;
  --accent-text: #5fe0d6; --accent-fill: #3fd2c7; --accent-hover: #74e8df;
  --gold: #e2c25a; --gold-text: #e8cb6a; --danger: #ff806f;
  --pocket: #06100b; --pocket-line: #22392c;
  --pfbar-from: #10241a; --pfbar-bg: #0d1b14;
  --skin-bar: linear-gradient(180deg, #17301f, #0e1e15);
  --skin-wall:
    radial-gradient(1000px 520px at 50% -160px, rgba(63, 210, 199, .14), transparent 70%),
    radial-gradient(800px 600px at 100% 110%, rgba(217, 181, 74, .11), transparent 70%),
    radial-gradient(700px 500px at 0% 100%, rgba(40, 110, 60, .18), transparent 70%),
    linear-gradient(60deg, transparent 49.6%, rgba(217, 181, 74, .035) 50%, transparent 50.4%) 0 0 / 120px 70px,
    linear-gradient(-60deg, transparent 49.6%, rgba(217, 181, 74, .035) 50%, transparent 50.4%) 0 0 / 120px 70px;
  /* spores and fireflies drifting up through the trees */
  --skin-fx: var(--skin-dots);
  --dot-1: #ffec96; --dot-2: #78ffec; --dot-3: #c8ffaa; --dot-k: 1.2;
  --skin-fx-inset: 0 0 -600px 0; --skin-fx-to: translate3d(0, -600px, 0); --skin-fx-time: 110s;
  --skin-fx-o: .45; --skin-fx-o2: .9; --skin-fx-blend: screen;
  /* an ancient dial, lit cyan at its heart */
  --skin-hero:
    radial-gradient(circle, rgba(170, 255, 248, .95) 0 3%, rgba(63, 210, 199, .55) 5%, transparent 10%),
    radial-gradient(circle, transparent 0 21%, rgba(63, 210, 199, .75) 21.4% 22.2%, transparent 22.6% 38%, rgba(217, 181, 74, .7) 38.4% 39.6%, transparent 40% 60%, rgba(217, 181, 74, .55) 60.4% 61%, transparent 61.4% 66%, rgba(63, 210, 199, .5) 66.4% 67%, transparent 67.4%),
    repeating-conic-gradient(from 0deg, rgba(217, 181, 74, .5) 0 1deg, transparent 1deg 7.5deg),
    repeating-conic-gradient(from 22.5deg, rgba(63, 210, 199, .16) 0 22.5deg, transparent 22.5deg 45deg);
  --skin-hero-mask: radial-gradient(circle, #000 0 66.8%, transparent 67.4%);
  --skin-hero-o: .7;
  --skin-hero-anim: skin-spin 140s linear infinite;
  --skin-glow: radial-gradient(closest-side, rgba(63, 210, 199, .24), rgba(217, 181, 74, .08) 60%, transparent);
  --skin-glow-anim: skin-breathe 9s ease-in-out infinite;
  --skin-money: linear-gradient(100deg, #e2c25a 0%, #fff1b8 36%, #e2c25a 58%, #a8862c 100%);
  --skin-money-fx: drop-shadow(0 0 20px rgba(226, 194, 90, .28));
  --skin-meter: linear-gradient(90deg, #1f9e95, #3fd2c7 60%, #c2fffa);
  --skin-kpi-1: #3fd2c7; --skin-kpi-2: #d9b54a; --skin-kpi-3: #e2c25a; --skin-kpi-4: #8fd16a;
  --skin-mark: "✦";
}
:root[data-skin="legend"] :is(h1, h2, h3) { letter-spacing: .03em; font-weight: 400; }
:root[data-skin="legend"] .topbar { border-bottom: 1px solid rgba(217, 181, 74, .55); box-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
:root[data-skin="legend"] .modal {
  border: 1px solid rgba(217, 181, 74, .6);
  box-shadow: inset 0 0 0 4px var(--bg-2), inset 0 0 0 5px rgba(217, 181, 74, .3), 0 30px 70px -30px rgba(0, 0, 0, .8);
}
:root[data-skin="legend"] .home-kpi {
  background: linear-gradient(180deg, rgba(23, 48, 31, .82), rgba(9, 20, 14, .9));
  border: 1px solid rgba(217, 181, 74, .55);
  box-shadow: inset 0 0 0 3px rgba(9, 20, 14, .9), inset 0 0 0 4px rgba(217, 181, 74, .22), 0 16px 32px -20px #000;
}
:root[data-skin="legend"] .home-kpi:hover { border-color: #e2c25a; box-shadow: inset 0 0 0 3px rgba(9, 20, 14, .9), inset 0 0 0 4px rgba(217, 181, 74, .4), 0 0 24px -8px rgba(63, 210, 199, .5); }
:root[data-skin="legend"] .btn-primary { box-shadow: 0 0 16px rgba(63, 210, 199, .4); }

/* ====================================================== Power-Up
   Super Mario: a red bar over a row of bricks, sky behind with its clouds
   going by, green hills, gold coins, cartoon outlines. */
:root[data-skin="powerup"] {
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-display: "Luckiest Guy", "Nunito", system-ui, sans-serif;
  --radius-sm: 10px; --radius: 14px; --radius-lg: 20px;
  --bg: #e4f0ff; --bg-2: #ffffff; --bg-3: #eaf1fb; --surface: #ffffff;
  --line: #c2d2e8; --line-soft: #d9e4f3; --hairline: rgba(255, 255, 255, .8);
  --ink: #141414; --ink-2: #3e4552; --ink-3: #555d6a;
  --accent: #e52521; --accent-2: #049cd8; --accent-ink: #ffffff;
  --accent-text: #c41d19; --accent-fill: #e52521; --accent-hover: #c41d19;
  --gold: #fbd000; --gold-text: #7f6400; --danger: #b3261e;
  --pocket: #dbe6f5; --pocket-line: #bccde6;
  --pfbar-from: #fff7f2; --pfbar-bg: #ffffff;
  --skin-bar: linear-gradient(180deg, #de221e, #c41d19);
  --skin-wall:
    radial-gradient(640px 210px at 8% calc(100% + 70px), #93d97c 62%, #6fbf58 64%, transparent 65%),
    radial-gradient(520px 190px at 30% calc(100% + 90px), #7fcc68 62%, transparent 64%),
    radial-gradient(700px 230px at 92% calc(100% + 80px), #8bd474 62%, #6fbf58 64%, transparent 65%),
    linear-gradient(180deg, #8ccbff 0, #c3e2ff 340px, #e4f0ff 680px);
  /* the clouds, going by */
  --skin-fx:
    radial-gradient(64px 26px at 120px 84px, #fff 60%, transparent 63%) 0 0 / 1400px 260px repeat-x,
    radial-gradient(44px 22px at 146px 66px, #fff 60%, transparent 63%) 0 0 / 1400px 260px repeat-x,
    radial-gradient(40px 18px at 96px 74px, #fff 60%, transparent 63%) 0 0 / 1400px 260px repeat-x,
    radial-gradient(80px 30px at 760px 150px, rgba(255, 255, 255, .95) 60%, transparent 63%) 0 0 / 1400px 260px repeat-x,
    radial-gradient(52px 26px at 796px 128px, rgba(255, 255, 255, .95) 60%, transparent 63%) 0 0 / 1400px 260px repeat-x,
    radial-gradient(56px 22px at 1120px 56px, rgba(255, 255, 255, .9) 60%, transparent 63%) 0 0 / 1400px 260px repeat-x,
    radial-gradient(36px 18px at 1148px 42px, rgba(255, 255, 255, .9) 60%, transparent 63%) 0 0 / 1400px 260px repeat-x;
  --skin-fx-inset: 0 0 0 -1400px; --skin-fx-to: translate3d(1400px, 0, 0); --skin-fx-time: 160s;
  /* a gold coin, spinning behind the fan */
  --skin-hero:
    linear-gradient(90deg, transparent 45%, rgba(150, 100, 0, .65) 45% 55%, transparent 55%) 50% 50% / 100% 42% no-repeat,
    radial-gradient(circle, #ffe980 0 50%, #e0a800 51% 58%, #ffd23f 59% 67%, #a87400 68% 72%, transparent 72.5%);
  --skin-hero-size: clamp(110px, 11vw, 170px);
  --skin-hero-at: calc(var(--skin-hero-size) * 1.5) calc(var(--skin-hero-size) * -.95);
  --skin-hero-anim: skin-spin-y 3.2s linear infinite;
  --skin-glow: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2) 55%, transparent);
  --skin-money: linear-gradient(180deg, #ffe14d 0%, #fbd000 48%, #e8a400 52%, #f5b800 100%);
  --skin-money-stroke: .045em #141414;
  --skin-money-fx: drop-shadow(.05em .06em 0 #141414);
  --skin-meter: linear-gradient(90deg, #e52521, #ff8a00 55%, #fbd000);
  --skin-kpi-1: #e52521; --skin-kpi-2: #049cd8; --skin-kpi-3: #c28f00; --skin-kpi-4: #2f9e3f;
  --skin-mark: "★";
}
:root[data-skin="powerup"] :is(h1, h2, h3) { font-weight: 400; letter-spacing: .02em; }
:root[data-skin="powerup"] .topbar {
  --ink: #ffffff; --ink-2: #ffffff; --ink-3: #ffffff;
  --bg-3: rgba(0, 0, 0, .16); --line: rgba(0, 0, 0, .22);
  --accent: #ffffff; --accent-text: #ffffff; --accent-fill: #ffffff; --accent-ink: #c41d19;
  --gold: #fbd000; --gold-text: #ffe14d;
  color: #fff;
}
/* a row of bricks under the bar */
:root[data-skin="powerup"] .topbar::after {
  display: block; inset: auto 0 -7px 0; height: 7px; z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45) 1px, transparent 1px) 0 0 / 16px 7px,
    linear-gradient(180deg, transparent 3px, rgba(0, 0, 0, .45) 3px 4px, transparent 4px),
    linear-gradient(90deg, rgba(0, 0, 0, .45) 1px, transparent 1px) 8px 4px / 16px 3px no-repeat,
    #c84c0c;
}
:root[data-skin="powerup"] .modal { border: 3px solid #141414; box-shadow: 7px 7px 0 rgba(20, 20, 20, .85); }
:root[data-skin="powerup"] .btn-primary { border: 2px solid #141414; box-shadow: 0 3px 0 #141414; }
:root[data-skin="powerup"] .btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #141414; }
/* the tiles: a cartoon outline and the shadow a cartoon casts */
:root[data-skin="powerup"] .home-kpi {
  background: linear-gradient(180deg, color-mix(in srgb, var(--kpi) 10%, #fff), #fff 50%);
  border: 3px solid #141414;
  box-shadow: 5px 5px 0 #141414;
}
:root[data-skin="powerup"] .home-kpi:hover { border-color: #141414; box-shadow: 7px 7px 0 #141414; }
:root[data-skin="powerup"] .home-kpi-ico { box-shadow: inset 0 0 0 2px #141414; }

/* ====================================================== Neon Arcade
   '80s arcades: magenta and cyan tubes, a sun going down behind the fan, and
   a neon floor running away to the horizon. */
:root[data-skin="arcade"] {
  --font-display: "Orbitron", "Segoe UI", system-ui, sans-serif;
  --radius-sm: 6px; --radius: 9px; --radius-lg: 14px;
  --bg: #090320; --bg-2: #11062d; --bg-3: #1c0c44; --surface: #140735;
  --line: #3b1f7a; --line-soft: #24104f; --hairline: rgba(255, 255, 255, .09);
  --ink: #fbf0ff; --ink-2: #cdb7f0; --ink-3: #a58dce;
  --accent: #ff2bd6; --accent-2: #00f0ff; --accent-ink: #1a0016;
  --accent-text: #ff6be3; --accent-fill: #ff2bd6; --accent-hover: #ff5ee0;
  --gold: #ffe14d; --gold-text: #ffe14d; --danger: #ff5c7a;
  --pocket: #070218; --pocket-line: #2c1660;
  --glow-accent: 0 0 0 1px #ff2bd6, 0 0 22px rgba(255, 43, 214, .45);
  --pfbar-from: #160838; --pfbar-bg: #11062d;
  --skin-bar: linear-gradient(180deg, #1a0942, #10052a);
  --skin-wall:
    radial-gradient(1100px 300px at 50% 70%, rgba(255, 43, 214, .28), transparent 70%),
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .7) 0 1px, transparent 1.5px) 0 0 / 170px 130px,
    radial-gradient(circle at 70% 60%, rgba(0, 240, 255, .6) 0 1px, transparent 1.5px) 0 0 / 230px 190px,
    linear-gradient(180deg, #06011a 0%, #120533 60%, #2a0a4d 69%, #090320 73%);
  --skin-fx:
    linear-gradient(90deg, rgba(0, 240, 255, .75) 2px, transparent 2px) 50% 0 / 72px 72px,
    linear-gradient(rgba(255, 43, 214, .8) 2px, transparent 2px) 0 0 / 72px 72px;
  /* the sun: a disc going from gold to magenta, banded where it meets the sea */
  --skin-hero: linear-gradient(180deg, #fff3a0 0%, #ffe14d 24%, #ff8a3d 52%, #ff2bd6 84%, #b01ad0 100%);
  --skin-hero-r: 50%;
  --skin-hero-mask: linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 67.5%, #000 67.5% 74%, transparent 74% 79.5%, #000 79.5% 85%, transparent 85% 91.5%, #000 91.5%);
  --skin-hero-o: .85;
  --skin-hero-anim: skin-breathe 8s ease-in-out infinite;
  --skin-glow: radial-gradient(closest-side, rgba(255, 43, 214, .42), rgba(255, 138, 61, .12) 55%, transparent);
  --skin-money: linear-gradient(180deg, #ffffff 0%, #fff3a0 22%, #ffb347 50%, #ff2bd6 100%);
  --skin-money-fx: drop-shadow(0 0 16px rgba(255, 43, 214, .5));
  --skin-meter: linear-gradient(90deg, #ff2bd6, #b44bff 50%, #00f0ff);
  --skin-kpi-1: #ff2bd6; --skin-kpi-2: #00f0ff; --skin-kpi-3: #ffe14d; --skin-kpi-4: #9b6bff;
  --skin-mark: "▶";
}
/* The floor: a grid laid flat, running to the horizon, drawn toward you. */
:root[data-skin="arcade"]::after {
  inset: auto -80% 0 -80%; height: 200vh;
  transform-origin: 50% 100%;
  transform: perspective(700px) rotateX(62deg);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 72%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 72%);
  opacity: .5;
}
:root[data-skin="arcade"][data-motion="full"]::after { animation: arcade-floor 2.6s linear infinite; }
@keyframes arcade-floor {
  from { transform: perspective(700px) rotateX(62deg) translateY(0); }
  to { transform: perspective(700px) rotateX(62deg) translateY(72px); }
}
:root[data-skin="arcade"] :is(h1, h2) { letter-spacing: .04em; text-shadow: 0 0 14px rgba(255, 43, 214, .55); }
:root[data-skin="arcade"] .topbar { border-bottom: 1px solid #ff2bd6; box-shadow: 0 0 18px rgba(255, 43, 214, .45); }
:root[data-skin="arcade"] .btn { border-color: rgba(0, 240, 255, .38); }
:root[data-skin="arcade"] .btn:hover { border-color: #00f0ff; box-shadow: 0 0 12px rgba(0, 240, 255, .35); }
:root[data-skin="arcade"] .btn-primary { box-shadow: 0 0 18px rgba(255, 43, 214, .6); }
:root[data-skin="arcade"] .modal { border: 1px solid #ff2bd6; box-shadow: 0 0 0 1px rgba(0, 240, 255, .25), 0 0 40px rgba(255, 43, 214, .35), 0 30px 70px -30px #000; }
/* the tiles: neon tubes in each one's colour */
:root[data-skin="arcade"] .home-kpi {
  background: linear-gradient(180deg, rgba(30, 12, 70, .78), rgba(10, 3, 30, .88));
  border: 1px solid color-mix(in srgb, var(--kpi) 75%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kpi) 18%, transparent), 0 0 22px -4px color-mix(in srgb, var(--kpi) 50%, transparent),
    inset 0 0 20px -8px color-mix(in srgb, var(--kpi) 55%, transparent);
}
:root[data-skin="arcade"] .home-kpi:hover { border-color: var(--kpi); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kpi) 35%, transparent), 0 0 30px -2px color-mix(in srgb, var(--kpi) 65%, transparent), inset 0 0 22px -6px color-mix(in srgb, var(--kpi) 60%, transparent); }
:root[data-skin="arcade"] .home-kpi-value { text-shadow: 0 0 14px color-mix(in srgb, var(--kpi) 60%, transparent); }

/* ====================================================== Overworld
   Minecraft: stone panels with a bevel, a grass-and-dirt bar, square corners,
   pixel lettering, a grass block turning slowly on Home. */
:root[data-skin="overworld"] {
  --font-display: "Pixelify Sans", ui-monospace, monospace;
  --radius-sm: 0px; --radius: 2px; --radius-lg: 3px; --radius-pill: 3px;
  --bg: #1b1a16; --bg-2: #2a2924; --bg-3: #3a3832; --surface: #2a2924;
  --line: #0e0e0c; --line-soft: #23221d; --hairline: rgba(255, 255, 255, .13);
  --ink: #f4f4ef; --ink-2: #cdcbc2; --ink-3: #a9a69b;
  --accent: #5fbf3a; --accent-2: #4de0e0; --accent-ink: #0b1a05;
  --accent-text: #7fd45b; --accent-fill: #5fbf3a; --accent-hover: #74d14f;
  --gold: #fcdb05; --gold-text: #fde047; --danger: #ff5f5f;
  --pocket: #15140f; --pocket-line: #0b0b09;
  --bevel: inset 2px 2px 0 rgba(255, 255, 255, .22), inset -2px -2px 0 rgba(0, 0, 0, .45);
  --glass-edge: var(--bevel);
  --pfbar-from: #33312b; --pfbar-bg: #2a2924;
  --skin-bar: linear-gradient(180deg, #5fbf3a 0 7px, #4a9a2c 7px 9px, #7a5434 9px), #7a5434;
  --skin-wall:
    conic-gradient(rgba(255, 255, 255, .025) 25%, transparent 0 50%, rgba(0, 0, 0, .12) 0 75%, transparent 0) 0 0 / 32px 32px,
    conic-gradient(rgba(0, 0, 0, .08) 25%, transparent 0 50%, rgba(255, 255, 255, .02) 0 75%, transparent 0) 8px 8px / 16px 16px,
    radial-gradient(1000px 500px at 50% -160px, rgba(95, 191, 58, .12), transparent 70%);
  /* square motes, rising like experience */
  --skin-fx: var(--skin-blocks);
  --dot-1: rgba(170, 255, 90, .55); --dot-2: rgba(120, 230, 230, .45); --dot-3: rgba(252, 219, 5, .4); --blk: 5px;
  --skin-fx-inset: 0 0 -600px 0; --skin-fx-to: translate3d(0, -600px, 0); --skin-fx-time: 120s;
  --skin-fx-o: .6; --skin-fx-o2: 1;
  /* a grass block, seen from a corner */
  --skin-hero:
    conic-gradient(rgba(0, 0, 0, .14) 25%, transparent 0 50%, rgba(255, 255, 255, .07) 0 75%, transparent 0) 0 0 / 12.5% 12.5%,
    linear-gradient(162deg, transparent 52%, rgba(95, 191, 58, .9) 52% 57%, transparent 57%),
    linear-gradient(-162deg, transparent 52%, rgba(74, 154, 44, .9) 52% 57%, transparent 57%),
    conic-gradient(from -60deg at 50% 50%, #6fcc48 0 120deg, #8a5f3b 0 240deg, #5e3f26 0);
  --skin-hero-clip: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  --skin-hero-size: clamp(210px, 23vw, 340px);
  --skin-hero-o: .9;
  --skin-hero-anim: skin-float 5s steps(6) infinite;
  --skin-glow: radial-gradient(closest-side, rgba(95, 191, 58, .22), transparent);
  --skin-money: linear-gradient(180deg, #fff27a, #fcdb05 50%, #e8b800);
  --skin-money-fx: drop-shadow(.05em .05em 0 rgba(0, 0, 0, .7));
  /* the experience bar: green blocks with a gap between each */
  --skin-meter: repeating-linear-gradient(90deg, #80ff20 0 16px, #3a6b10 16px 18px);
  --skin-kpi-1: #5fbf3a; --skin-kpi-2: #4de0e0; --skin-kpi-3: #fcdb05; --skin-kpi-4: #ff7a59;
  --skin-mark: "■";
}
:root[data-skin="overworld"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: .01em; text-shadow: 2px 2px 0 rgba(0, 0, 0, .55); }
:root[data-skin="overworld"] .topbar { --ink-2: #f0efe8; --ink-3: #e3e1d8; --bg-3: rgba(0, 0, 0, .28); border-bottom: 3px solid #0e0e0c; }
:root[data-skin="overworld"] .topbar :is(.brand, .nav-item) { text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); }
:root[data-skin="overworld"] .btn {
  background: linear-gradient(180deg, #7b7b77, #5e5e5a); color: #fff;
  border: 2px solid #0e0e0c; box-shadow: var(--bevel); text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}
:root[data-skin="overworld"] .btn:hover { background: linear-gradient(180deg, #8d95c9, #6c74ac); }
:root[data-skin="overworld"] .btn-primary { background: linear-gradient(180deg, #6fcc48, #4a9a2c); color: #0b1a05; text-shadow: none; }
:root[data-skin="overworld"] .modal { border: 3px solid #0e0e0c; background: #3a3832; box-shadow: var(--bevel), 0 24px 60px -20px #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-skin="overworld"] .input { border: 2px solid #0e0e0c; background: #141410; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .4); }
/* the tiles: inventory slots, stone with a bevel */
:root[data-skin="overworld"] :is(.home-kpi, .home-hello) {
  background:
    conic-gradient(rgba(255, 255, 255, .03) 25%, transparent 0 50%, rgba(0, 0, 0, .1) 0 75%, transparent 0) 0 0 / 8px 8px,
    #3a3832;
  border: 2px solid #0e0e0c;
  box-shadow: var(--bevel), 0 10px 22px -12px #000;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-skin="overworld"] .home-kpi:hover { border-color: #f4f4ef; }
:root[data-skin="overworld"] .home-kpi-value { text-shadow: 2px 2px 0 rgba(0, 0, 0, .55); }

/* ====================================================== Handheld
   Game Boy: four shades of green on a pixel screen, square corners. */
:root[data-skin="handheld"] {
  --font-display: "Silkscreen", ui-monospace, monospace;
  --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; --radius-pill: 4px;
  --bg: #9bbc0f; --bg-2: #adca33; --bg-3: #8bac0f; --surface: #adca33;
  --line: #306230; --line-soft: #84a40f; --hairline: rgba(255, 255, 255, .2);
  --ink: #0f380f; --ink-2: #123a12; --ink-3: #183f18;
  --accent: #306230; --accent-2: #0f380f; --accent-ink: #c4d96b;
  --accent-text: #0f380f; --accent-fill: #306230; --accent-hover: #0f380f;
  --gold: #306230; --gold-text: #0f380f; --danger: #5b1a0a;
  --pocket: #8bac0f; --pocket-line: #306230;
  --glass: color-mix(in srgb, #adca33 88%, transparent);
  --shadow-1: 0 1px 0 rgba(15, 56, 15, .4);
  --shadow-2: 0 6px 0 rgba(15, 56, 15, .35);
  --shadow-card: 0 3px 0 rgba(15, 56, 15, .45);
  --glow-accent: 0 0 0 2px #306230;
  --pfbar-from: #93b40f; --pfbar-bg: #a3c321; --pfbar-shade: rgba(15, 56, 15, .3); --pfbar-shade-far: rgba(15, 56, 15, .2);
  --skin-bar: #8bac0f;
  /* the screen's pixel grid, darker toward its edges */
  --skin-wall:
    linear-gradient(rgba(15, 56, 15, .06) 1px, transparent 1px) 0 0 / 4px 4px,
    linear-gradient(90deg, rgba(15, 56, 15, .06) 1px, transparent 1px) 0 0 / 4px 4px,
    radial-gradient(1300px 800px at 50% 40%, transparent 55%, rgba(15, 56, 15, .16) 100%);
  /* a heart in pixels, beating */
  --skin-hero:
    linear-gradient(rgba(196, 217, 107, .9), rgba(196, 217, 107, .9)) 25% 14.3% / 11.2% 12.6% no-repeat,
    #306230;
  --skin-hero-clip: polygon(11.11% 0, 33.33% 0, 33.33% 12.5%, 44.44% 12.5%, 44.44% 25%, 55.56% 25%, 55.56% 12.5%, 66.67% 12.5%, 66.67% 0, 88.89% 0, 88.89% 12.5%, 100% 12.5%, 100% 50%, 88.89% 50%, 88.89% 62.5%, 77.78% 62.5%, 77.78% 75%, 66.67% 75%, 66.67% 87.5%, 55.56% 87.5%, 55.56% 100%, 44.44% 100%, 44.44% 87.5%, 33.33% 87.5%, 33.33% 75%, 22.22% 75%, 22.22% 62.5%, 11.11% 62.5%, 11.11% 50%, 0 50%, 0 12.5%, 11.11% 12.5%);
  --skin-hero-size: clamp(100px, 10vw, 150px);
  --skin-hero-at: calc(var(--skin-hero-size) * 1.6) calc(var(--skin-hero-size) * -1.1);
  --skin-hero-o: .85;
  --skin-hero-anim: skin-breathe 1.6s steps(2) infinite;
  --skin-glow: radial-gradient(closest-side, rgba(196, 217, 107, .55), transparent);
  /* Four shades, no gold: the worth is drawn in the screen's darkest green. */
  --skin-money: linear-gradient(#0f380f, #0f380f);
  --skin-money-fx: drop-shadow(.04em .04em 0 rgba(48, 98, 48, .45));
  --skin-meter: repeating-linear-gradient(90deg, #0f380f 0 8px, transparent 8px 10px);
  --skin-kpi-1: #306230; --skin-kpi-2: #0f380f; --skin-kpi-3: #306230; --skin-kpi-4: #0f380f;
  --skin-mark: "▶";
}
:root[data-skin="handheld"] :is(h1, h2, h3) { font-weight: 400; letter-spacing: 0; }
:root[data-skin="handheld"] .topbar { border-bottom: 3px solid #306230; }
:root[data-skin="handheld"] .btn { border: 2px solid #306230; background: #adca33; color: #0f380f; box-shadow: 0 2px 0 #306230; }
:root[data-skin="handheld"] .btn:hover { background: #bcd54c; }
:root[data-skin="handheld"] .btn-primary { background: #306230; color: #c4d96b; border-color: #0f380f; }
:root[data-skin="handheld"] .modal { background: #adca33; border: 3px solid #0f380f; box-shadow: 0 8px 0 rgba(15, 56, 15, .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-skin="handheld"] .input { background: #c4d96b; border: 2px solid #306230; }
:root[data-skin="handheld"] :is(.home-kpi, .home-hello) {
  background: #adca33; border: 2px solid #306230;
  box-shadow: 0 3px 0 #306230;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-skin="handheld"] .home-kpi:hover { border-color: #0f380f; box-shadow: 0 5px 0 #0f380f; }
:root[data-skin="handheld"] .home-kpi-ico { color: #c4d96b; background: #306230; box-shadow: none; }
:root[data-skin="handheld"] .home-kpi-glow { display: none; }

/* ====================================================== Bonfire
   Dark Souls: ash and ember, thin worn gold, sharp corners, a serif in caps,
   a coiled sword in a fire behind the fan. */
:root[data-skin="bonfire"] {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --radius-sm: 2px; --radius: 3px; --radius-lg: 4px;
  --bg: #0a0908; --bg-2: #13110e; --bg-3: #1d1915; --surface: #15120f;
  --line: #3a3127; --line-soft: #231e18; --hairline: rgba(255, 220, 170, .06);
  --ink: #e7dfcf; --ink-2: #b9ad95; --ink-3: #958a74;
  --accent: #e8833a; --accent-2: #c9a45c; --accent-ink: #1a0a00;
  --accent-text: #f0995a; --accent-fill: #e8833a; --accent-hover: #f39a55;
  --gold: #c9a45c; --gold-text: #d6b46e; --danger: #e0625c;
  --pocket: #080706; --pocket-line: #2c251d;
  --pfbar-from: #16130f; --pfbar-bg: #13110e;
  --skin-bar: linear-gradient(180deg, #17140f, #0e0c0a);
  --skin-wall:
    radial-gradient(900px 460px at 50% calc(100% + 160px), rgba(232, 131, 58, .24), transparent 70%),
    radial-gradient(1200px 700px at 50% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%);
  /* embers, rising off the fire */
  --skin-fx: var(--skin-dots);
  --dot-1: #ffd08a; --dot-2: #ff9a4a; --dot-3: #fff0c2; --dot-k: 1.15;
  --skin-fx-inset: 0 0 -600px 0; --skin-fx-to: translate3d(0, -600px, 0); --skin-fx-time: 42s;
  --skin-fx-o: .4; --skin-fx-o2: .85; --skin-fx-blend: screen;
  /* the coiled sword, its blade in the fire */
  --skin-hero:
    linear-gradient(0deg, rgba(255, 150, 60, .95), rgba(232, 100, 40, .5) 22%, transparent 44%),
    linear-gradient(90deg, #2a221b, #6b5a46 46%, #9a8668 50%, #3a2f25 54%, #2a221b);
  --skin-hero-clip: polygon(48.4% 4%, 51.6% 4%, 51.6% 20%, 62% 20%, 62% 23.5%, 53.4% 23.5%, 53.4% 84%, 50% 94%, 46.6% 84%, 46.6% 23.5%, 38% 23.5%, 38% 20%, 48.4% 20%);
  --skin-hero-o: .95;
  --skin-glow: radial-gradient(closest-side at 50% 76%, rgba(255, 150, 60, .5), rgba(232, 100, 40, .16) 48%, transparent);
  --skin-glow-anim: skin-flicker 2.4s ease-in-out infinite;
  --skin-money: linear-gradient(100deg, #c9a45c 0%, #f3dca6 36%, #c9a45c 58%, #8a6a30 100%);
  --skin-money-fx: drop-shadow(0 0 18px rgba(232, 131, 58, .3));
  --skin-meter: linear-gradient(90deg, #7a3010, #e8833a 60%, #ffd08a);
  --skin-kpi-1: #e8833a; --skin-kpi-2: #c9a45c; --skin-kpi-3: #d6b46e; --skin-kpi-4: #9fb2c2;
  --skin-mark: "✧";
}
:root[data-skin="bonfire"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
:root[data-skin="bonfire"] .topbar { border-bottom: 1px solid rgba(201, 164, 92, .4); }
:root[data-skin="bonfire"] .btn-primary { box-shadow: 0 0 20px rgba(232, 131, 58, .35); }
:root[data-skin="bonfire"] :is(.modal, .home-kpi) {
  border: 1px solid rgba(201, 164, 92, .45);
  box-shadow: inset 0 0 0 3px var(--bg-2), inset 0 0 0 4px rgba(201, 164, 92, .22), 0 30px 80px -30px #000;
}
:root[data-skin="bonfire"] .home-kpi { background: linear-gradient(180deg, rgba(29, 25, 21, .85), rgba(13, 11, 9, .92)); }
:root[data-skin="bonfire"] .home-kpi:hover { border-color: rgba(232, 131, 58, .7); box-shadow: inset 0 0 0 3px var(--bg-2), inset 0 0 0 4px rgba(232, 131, 58, .3), 0 0 26px -8px rgba(232, 131, 58, .5); }

/* ====================================================== Netrunner
   Cyberpunk 2077: hazard yellow and glitch cyan on black, hard edges,
   clipped corners, Rajdhani throughout, a scan passing down the screen. */
:root[data-skin="netrunner"] {
  --font: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --radius-sm: 0px; --radius: 2px; --radius-lg: 3px;
  --bg: #07070a; --bg-2: #0f0f15; --bg-3: #181820; --surface: #111117;
  --line: #2c2c3a; --line-soft: #1a1a24; --hairline: rgba(0, 240, 255, .08);
  --ink: #eef8f9; --ink-2: #abc4c8; --ink-3: #84a0a4;
  --accent: #fcee0a; --accent-2: #00f0ff; --accent-ink: #0a0a00;
  --accent-text: #fcee0a; --accent-fill: #fcee0a; --accent-hover: #fff35c;
  --gold: #ffb800; --gold-text: #ffc229; --danger: #ff2a55;
  --pocket: #060608; --pocket-line: #22222e;
  --pfbar-from: #121219; --pfbar-bg: #0f0f15;
  --clip: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  --skin-bar: #fcee0a;
  --skin-wall:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, transparent 0 8%, rgba(0, 240, 255, .07) 8% 8.2%, transparent 8.2% 91.8%, rgba(252, 238, 10, .06) 91.8% 92%, transparent 92%),
    radial-gradient(900px 500px at 100% -100px, rgba(0, 240, 255, .12), transparent 70%),
    radial-gradient(700px 400px at 0% 110%, rgba(255, 42, 85, .1), transparent 70%);
  /* the scan */
  --skin-fx: linear-gradient(180deg, transparent 0, rgba(0, 240, 255, .05) 44%, rgba(0, 240, 255, .16) 50%, rgba(0, 240, 255, .05) 56%, transparent 100%) 0 0 / 100% 600px;
  --skin-fx-inset: -600px 0 0 0; --skin-fx-to: translate3d(0, 600px, 0); --skin-fx-time: 9s;
  --skin-fx-o: .8; --skin-fx-o2: 1; --skin-fx-blend: screen;
  /* a targeting ring: dashes in cyan, two arcs in yellow */
  --skin-hero:
    conic-gradient(#fcee0a 0 34deg, transparent 0 180deg, #fcee0a 0 214deg, transparent 0),
    repeating-conic-gradient(rgba(0, 240, 255, .85) 0 4deg, transparent 4deg 9deg);
  --skin-hero-mask: radial-gradient(circle, transparent 0 50%, #000 50.5% 53.5%, transparent 54% 63%, #000 63.5% 64.6%, transparent 65% 69%, #000 69.5% 71.5%, transparent 72%);
  --skin-hero-o: .8;
  --skin-hero-anim: skin-spin 36s linear infinite;
  --skin-glow: radial-gradient(closest-side, rgba(0, 240, 255, .16), rgba(252, 238, 10, .06) 60%, transparent);
  /* hazard yellow, split at its edges as a glitch splits it */
  --skin-money: linear-gradient(#fcee0a, #fcee0a);
  --skin-money-fx: drop-shadow(-.035em 0 0 rgba(0, 240, 255, .85)) drop-shadow(.035em 0 0 rgba(255, 42, 85, .7));
  --skin-meter: repeating-linear-gradient(90deg, #fcee0a 0 8px, transparent 8px 10px);
  --skin-kpi-1: #fcee0a; --skin-kpi-2: #00f0ff; --skin-kpi-3: #ffb800; --skin-kpi-4: #ff2a55;
  --skin-mark: "//";
}
:root[data-skin="netrunner"] body { font-size: 15px; font-weight: 500; }
:root[data-skin="netrunner"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
:root[data-skin="netrunner"] .topbar {
  --ink: #0a0a0a; --ink-2: #1c1c10; --ink-3: #2c2c18; --bg-3: rgba(0, 0, 0, .1);
  --line: rgba(0, 0, 0, .3);
  --accent: #0a0a0a; --accent-text: #0a0a0a; --accent-fill: #0a0a0a; --accent-ink: #fcee0a;
  --gold: #0a0a0a; --gold-text: #0a0a0a;
  color: #0a0a0a;
  border-bottom: 2px solid #00f0ff;
}
:root[data-skin="netrunner"] .btn-primary { clip-path: var(--clip); border-radius: 0; }
:root[data-skin="netrunner"] .btn { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
:root[data-skin="netrunner"] .modal { border: 1px solid rgba(0, 240, 255, .35); box-shadow: inset 3px 0 0 #fcee0a, 0 30px 80px -30px #000; }
/* the tiles: a corner cut away, a bar of each one's colour down the left */
:root[data-skin="netrunner"] .home-kpi {
  clip-path: var(--clip); border-radius: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--kpi) 10%, transparent), transparent 46%), rgba(17, 17, 23, .9);
  border: 1px solid rgba(0, 240, 255, .22);
  box-shadow: inset 3px 0 0 var(--kpi);
}
:root[data-skin="netrunner"] .home-kpi:hover { border-color: var(--kpi); box-shadow: inset 3px 0 0 var(--kpi), inset 0 0 24px -10px var(--kpi); }

/* ====================================================== Speed Zone
   Sonic the Hedgehog: hedgehog blue, gold rings, a checkered hill under the
   bar, and the air going by. */
:root[data-skin="speedzone"] {
  --font-display: "Russo One", "Segoe UI", system-ui, sans-serif;
  --radius-sm: 10px; --radius: 14px; --radius-lg: 20px;
  --bg: #04123a; --bg-2: #0a1d55; --bg-3: #12286f; --surface: #0b1f5c;
  --line: #24419c; --line-soft: #142b72; --hairline: rgba(255, 255, 255, .1);
  --ink: #f4f7ff; --ink-2: #c3d0f6; --ink-3: #9aacdf;
  --accent: #ffd21f; --accent-2: #2f6bff; --accent-ink: #1a1300;
  --accent-text: #ffd84a; --accent-fill: #ffd21f; --accent-hover: #ffe066;
  --gold: #ffd21f; --gold-text: #ffdc55; --danger: #ff7272;
  --pocket: #030d2c; --pocket-line: #1d3687;
  --pfbar-from: #0e2a7c; --pfbar-bg: #0a1d55;
  --skin-bar: linear-gradient(180deg, #1650d8, #0b2f9a);
  --skin-wall:
    radial-gradient(900px 480px at 80% -120px, rgba(47, 107, 255, .38), transparent 70%),
    radial-gradient(800px 400px at 0% 100%, rgba(60, 176, 67, .12), transparent 70%),
    radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(255, 210, 31, .09) 9px 12px, transparent 12px) 0 0 / 90px 90px,
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 110px);
  /* streaks of air, going by */
  --skin-fx:
    radial-gradient(130px 1.2px at 30% 22%, rgba(255, 255, 255, .5), transparent) 0 0 / 900px 160px,
    radial-gradient(90px 1px at 72% 64%, rgba(160, 200, 255, .5), transparent) 0 0 / 900px 220px,
    radial-gradient(200px 1.5px at 50% 40%, rgba(255, 220, 90, .32), transparent) 0 0 / 900px 370px;
  --skin-fx-inset: 0 -900px 0 0; --skin-fx-to: translate3d(-900px, 0, 0); --skin-fx-time: 7s;
  --skin-fx-o: .7;
  --skin-fx-o2: .7;
  /* a ring, spinning */
  --skin-hero: radial-gradient(circle, transparent 0 50%, #fff6c0 51%, #ffd21f 56%, #c99400 64%, #ffd21f 69%, #fff2a0 70.5%, transparent 71.5%);
  --skin-hero-size: clamp(300px, 38vw, 580px);
  --skin-hero-anim: skin-spin-y 9s linear infinite;
  --skin-glow: radial-gradient(closest-side, rgba(255, 210, 31, .3), rgba(47, 107, 255, .14) 55%, transparent);
  --skin-money: linear-gradient(180deg, #fff3a6, #ffd21f 45%, #e8a800);
  --skin-money-fx: drop-shadow(0 .05em 0 #0b2f9a) drop-shadow(0 0 18px rgba(255, 210, 31, .25));
  --skin-meter: linear-gradient(90deg, #2f6bff, #6fa0ff 55%, #ffd21f);
  --skin-kpi-1: #ffd21f; --skin-kpi-2: #5f95ff; --skin-kpi-3: #ff7272; --skin-kpi-4: #4fd15a;
  --skin-mark: "»";
}
:root[data-skin="speedzone"] :is(h1, h2, h3) { font-weight: 400; font-style: italic; letter-spacing: .01em; }
:root[data-skin="speedzone"] .topbar { --ink-2: #e6ecff; --ink-3: #d3ddff; --bg-3: rgba(0, 0, 0, .2); --line: rgba(0, 0, 0, .3); }
/* the checkered hill under the bar */
:root[data-skin="speedzone"] .topbar::after {
  display: block; inset: auto 0 -6px 0; height: 6px; z-index: 1;
  background:
    conic-gradient(#c46a2a 25%, #8a4519 0 50%, #c46a2a 0 75%, #8a4519 0) 0 0 / 12px 12px,
    #c46a2a;
  box-shadow: inset 0 2px 0 #3cb043;
}
:root[data-skin="speedzone"] .btn-primary { box-shadow: 0 0 0 2px rgba(255, 210, 31, .25), 0 6px 18px rgba(255, 210, 31, .3); }
:root[data-skin="speedzone"] .modal { border: 2px solid #2f6bff; box-shadow: 0 0 0 1px rgba(255, 210, 31, .35), 0 30px 70px -30px #000; }
:root[data-skin="speedzone"] .home-kpi {
  background: linear-gradient(160deg, rgba(22, 80, 216, .5), rgba(8, 26, 84, .86) 60%);
  border: 2px solid rgba(47, 107, 255, .65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 28px -18px #000;
}
:root[data-skin="speedzone"] .home-kpi:hover { border-color: var(--kpi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 22px -6px color-mix(in srgb, var(--kpi) 60%, transparent); }
:root[data-skin="speedzone"] .home-kpi-value { font-style: italic; }

/* ====================================================== Ink Turf
   Splatoon: lime and magenta ink splashed over charcoal, dripping off the bar. */
:root[data-skin="inkturf"] {
  --font-display: "Bungee", "Segoe UI", system-ui, sans-serif;
  --radius-sm: 12px; --radius: 18px; --radius-lg: 24px;
  --bg: #14121c; --bg-2: #1c1a27; --bg-3: #272436; --surface: #1d1b28;
  --line: #3a3650; --line-soft: #25233a; --hairline: rgba(255, 255, 255, .08);
  --ink: #f7f5ff; --ink-2: #c8c2de; --ink-3: #a19bbb;
  --accent: #c6f432; --accent-2: #f02d7d; --accent-ink: #1a2200;
  --accent-text: #c6f432; --accent-fill: #c6f432; --accent-hover: #d6ff5c;
  --gold: #ffd447; --gold-text: #ffd447; --danger: #ff6b98;
  --pocket: #100e17; --pocket-line: #322e47;
  --pfbar-from: #211e2e; --pfbar-bg: #1c1a27;
  --skin-bar: #1c1a27;
  --skin-wall:
    radial-gradient(160px 120px at 8% 18%, rgba(198, 244, 50, .14) 60%, transparent 62%),
    radial-gradient(60px 50px at 16% 31%, rgba(198, 244, 50, .11) 60%, transparent 62%),
    radial-gradient(24px 22px at 4% 34%, rgba(198, 244, 50, .1) 60%, transparent 62%),
    radial-gradient(200px 150px at 92% 72%, rgba(240, 45, 125, .15) 60%, transparent 62%),
    radial-gradient(70px 60px at 83% 87%, rgba(240, 45, 125, .12) 60%, transparent 62%),
    radial-gradient(30px 26px at 97% 58%, rgba(240, 45, 125, .11) 60%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .03) 0 1.5px, transparent 2px) 0 0 / 14px 14px;
  /* bubbles, rising through the ink */
  --skin-fx:
    radial-gradient(circle at 22% 14%, transparent 0 4px, rgba(198, 244, 50, .42) 4.5px 5.6px, transparent 6px) 0 0 / 410px 600px,
    radial-gradient(circle at 68% 41%, transparent 0 6px, rgba(240, 45, 125, .38) 6.5px 7.6px, transparent 8px) 0 0 / 530px 600px,
    radial-gradient(circle at 37% 73%, rgba(198, 244, 50, .4) 0 2.5px, transparent 3px) 0 0 / 670px 600px,
    radial-gradient(circle at 81% 88%, transparent 0 3px, rgba(255, 212, 71, .36) 3.5px 4.4px, transparent 5px) 0 0 / 350px 600px,
    radial-gradient(circle at 12% 52%, rgba(240, 45, 125, .36) 0 3px, transparent 3.5px) 0 0 / 590px 600px,
    radial-gradient(circle at 55% 27%, transparent 0 9px, rgba(198, 244, 50, .3) 9.5px 10.6px, transparent 11px) 0 0 / 730px 600px;
  --skin-fx-inset: 0 0 -600px 0; --skin-fx-to: translate3d(0, -600px, 0); --skin-fx-time: 70s;
  /* a splat of lime ink */
  --skin-hero:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .45) 0 4%, transparent 9%),
    radial-gradient(circle at 42% 38%, #ecff8c, #c6f432 46%, #8fb81a);
  --skin-hero-clip: polygon(50% 4%, 57% 20%, 72% 7%, 69% 27%, 92% 22%, 79% 40%, 99% 50%, 80% 59%, 93% 81%, 70% 74%, 63% 97%, 51% 79%, 37% 96%, 33% 76%, 9% 87%, 20% 63%, 1% 51%, 19% 40%, 6% 18%, 30% 26%, 31% 5%, 42% 21%);
  --skin-hero-o: .82;
  --skin-hero-anim: skin-breathe 5s ease-in-out infinite;
  /* and one of magenta, under it */
  --skin-glow: radial-gradient(circle at 60% 60%, #ff5c9e, #f02d7d 50%, #b51a5c);
  --skin-glow-clip: polygon(62% 30%, 70% 40%, 82% 34%, 78% 48%, 90% 56%, 77% 61%, 80% 75%, 67% 69%, 59% 80%, 55% 66%, 42% 70%, 48% 57%, 36% 50%, 50% 46%, 46% 34%, 57% 41%);
  --skin-glow-size: calc(var(--skin-hero-size) * 1.25);
  --skin-money: linear-gradient(100deg, #ffd447 0%, #f7ff9a 40%, #c6f432 70%, #a8d81f 100%);
  --skin-money-fx: drop-shadow(0 .05em 0 rgba(240, 45, 125, .65));
  --skin-meter: linear-gradient(90deg, #8fb81a, #c6f432 60%, #ecff8c);
  --skin-kpi-1: #c6f432; --skin-kpi-2: #f02d7d; --skin-kpi-3: #ffd447; --skin-kpi-4: #4fc3ff;
  --skin-mark: "●";
}
:root[data-skin="inkturf"] :is(h1, h2, h3) { font-weight: 400; letter-spacing: .01em; }
:root[data-skin="inkturf"] .topbar { border-bottom: 3px solid #c6f432; }
/* ink dripping off the bar */
:root[data-skin="inkturf"] .topbar::after {
  display: block; inset: auto 0 -10px 0; height: 10px; z-index: 1;
  background:
    radial-gradient(5px 8px at 12px 0, #c6f432 98%, transparent) 0 0 / 46px 10px repeat-x,
    radial-gradient(3px 5px at 31px 0, #c6f432 98%, transparent) 0 0 / 46px 10px repeat-x;
}
:root[data-skin="inkturf"] .btn { font-weight: 750; }
:root[data-skin="inkturf"] .btn-primary { box-shadow: 0 4px 0 #7f9e1a; }
:root[data-skin="inkturf"] .modal { border: 2px solid #f02d7d; box-shadow: 0 0 0 4px rgba(240, 45, 125, .15), 0 30px 70px -30px #000; }
/* the tiles: charcoal, inked along the foot and splashed in a corner */
:root[data-skin="inkturf"] .home-kpi {
  background:
    radial-gradient(54px 44px at calc(100% - 8px) 6px, color-mix(in srgb, var(--kpi) 26%, transparent) 60%, transparent 62%),
    radial-gradient(14px 12px at calc(100% - 58px) 30px, color-mix(in srgb, var(--kpi) 22%, transparent) 60%, transparent 62%),
    #1d1b28;
  border: 0; border-bottom: 4px solid var(--kpi);
  box-shadow: 0 12px 26px -16px #000;
}

/* ====================================================== Bounty Hunter
   Metroid: a visor's HUD in deep space, power-suit orange, scan green, the
   stars going by. */
:root[data-skin="bounty"] {
  --font-display: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px;
  --bg: #070b10; --bg-2: #0d141c; --bg-3: #152130; --surface: #0f1822;
  --line: #253747; --line-soft: #17222f; --hairline: rgba(70, 240, 140, .07);
  --ink: #e9f6ff; --ink-2: #abc5d8; --ink-3: #87a2b6;
  --accent: #ff7a1a; --accent-2: #46f08c; --accent-ink: #1a0800;
  --accent-text: #ff9445; --accent-fill: #ff7a1a; --accent-hover: #ff9445;
  --gold: #ffd166; --gold-text: #ffd166; --danger: #ff5a5a;
  --pocket: #05080c; --pocket-line: #1e2d3c;
  --pfbar-from: #101a24; --pfbar-bg: #0d141c;
  --skin-bar: linear-gradient(180deg, #111b26, #0a1018);
  --hud: rgba(70, 240, 140, .75);
  --skin-wall:
    radial-gradient(800px 500px at 50% 40%, rgba(70, 240, 140, .06), transparent 70%),
    radial-gradient(600px 600px at 100% 100%, rgba(255, 122, 26, .1), transparent 70%),
    radial-gradient(1200px 700px at 50% 50%, transparent 45%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(0deg, rgba(70, 240, 140, .03) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(60deg, rgba(70, 240, 140, .03) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(120deg, rgba(70, 240, 140, .03) 0 1px, transparent 1px 60px);
  /* stars, going by */
  --skin-fx: var(--skin-dots);
  --dot-1: #ffffff; --dot-2: #b4dcff; --dot-3: #ffffff; --dot-k: .75;
  --skin-fx-inset: -600px 0 0 0; --skin-fx-to: translate3d(0, 600px, 0); --skin-fx-time: 140s;
  --skin-fx-o: .55; --skin-fx-o2: .9; --skin-fx-blend: screen;
  /* the visor's reticle */
  --skin-hero:
    linear-gradient(90deg, transparent 49.7%, rgba(70, 240, 140, .5) 49.7% 50.3%, transparent 50.3%),
    linear-gradient(transparent 49.7%, rgba(70, 240, 140, .5) 49.7% 50.3%, transparent 50.3%),
    radial-gradient(circle, transparent 0 18%, rgba(70, 240, 140, .7) 18.4% 19.2%, transparent 19.6% 44%, rgba(70, 240, 140, .45) 44.4% 45%, transparent 45.4% 64%, rgba(255, 122, 26, .8) 64.4% 65.6%, transparent 66% 69%, rgba(70, 240, 140, .35) 69.4% 70%, transparent 70.4%),
    repeating-conic-gradient(rgba(70, 240, 140, .55) 0 1deg, transparent 1deg 10deg);
  --skin-hero-mask: radial-gradient(circle, #000 0 66%, transparent 66.4% 68.6%, #000 69% 70.4%, transparent 70.8%);
  --skin-hero-o: .7;
  --skin-hero-anim: skin-spin 90s linear infinite reverse;
  --skin-glow: radial-gradient(closest-side, rgba(70, 240, 140, .14), rgba(255, 122, 26, .08) 60%, transparent);
  --skin-glow-anim: skin-breathe 4s ease-in-out infinite;
  --skin-money: linear-gradient(180deg, #ffe39a, #ffd166 30%, #ff9445 70%, #ff7a1a);
  --skin-money-fx: drop-shadow(0 0 14px rgba(255, 122, 26, .35));
  /* energy tanks */
  --skin-meter: repeating-linear-gradient(90deg, #ff9445 0 14px, transparent 14px 17px);
  --skin-kpi-1: #ff7a1a; --skin-kpi-2: #46f08c; --skin-kpi-3: #ffd166; --skin-kpi-4: #5cc0ff;
  --skin-mark: "▸";
}
:root[data-skin="bounty"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
:root[data-skin="bounty"] .topbar { border-bottom: 1px solid #ff7a1a; box-shadow: 0 1px 14px rgba(70, 240, 140, .18); }
:root[data-skin="bounty"] .btn-primary { box-shadow: 0 0 16px rgba(255, 122, 26, .4); }
:root[data-skin="bounty"] .modal {
  border: 1px solid rgba(70, 240, 140, .45); border-radius: 4px 18px 4px 18px;
  box-shadow: inset 0 0 30px rgba(70, 240, 140, .08), 0 30px 70px -30px #000;
}
/* the tiles: HUD read-outs, bracketed at their corners */
:root[data-skin="bounty"] .home-kpi {
  border-radius: 4px;
  background:
    linear-gradient(var(--hud), var(--hud)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--hud), var(--hud)) 100% 0 / 14px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) 100% 0 / 2px 14px no-repeat,
    linear-gradient(var(--hud), var(--hud)) 0 100% / 14px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) 0 100% / 2px 14px no-repeat,
    linear-gradient(var(--hud), var(--hud)) 100% 100% / 14px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) 100% 100% / 2px 14px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--kpi) 9%, transparent), transparent 60%),
    rgba(13, 20, 28, .8);
  border: 1px solid rgba(70, 240, 140, .14);
  box-shadow: inset 0 0 24px rgba(70, 240, 140, .05);
}
:root[data-skin="bounty"] .home-kpi:hover { --hud: #ff7a1a; border-color: rgba(255, 122, 26, .4); }

/* ====================================================== Island Life
   Animal Crossing: sand and leaf green, bells, rounded speech bubbles, a
   breeze bringing leaves down. */
:root[data-skin="island"] {
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --radius-sm: 12px; --radius: 18px; --radius-lg: 26px;
  --bg: #f4efdc; --bg-2: #fffbef; --bg-3: #ebe3c8; --surface: #fffbef;
  --line: #d9cfae; --line-soft: #e8e0c6; --hairline: rgba(255, 255, 255, .7);
  --ink: #2b2a22; --ink-2: #57533f; --ink-3: #6b6651;
  --accent: #19a974; --accent-2: #4fc1e9; --accent-ink: #ffffff;
  --accent-text: #0f7a52; --accent-fill: #0f7a52; --accent-hover: #0c6644;
  --gold: #f5b700; --gold-text: #775800; --danger: #b83227;
  --pocket: #e8dfc2; --pocket-line: #cfc39c;
  --shadow-card: 0 4px 0 rgba(120, 100, 40, .14), 0 8px 18px rgba(120, 100, 40, .14);
  --pfbar-from: #eef6e4; --pfbar-bg: #fffbef;
  --skin-bar: radial-gradient(circle at 20px 14px, rgba(255, 255, 255, .1) 0 8px, transparent 9px) 0 0 / 44px 52px, linear-gradient(180deg, #23784a, #1b6340);
  --skin-wall:
    radial-gradient(1000px 420px at 50% -140px, rgba(79, 193, 233, .24), transparent 70%),
    radial-gradient(900px 300px at 50% calc(100% + 120px), rgba(25, 169, 116, .12), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(140, 115, 50, .07) 0 1.5px, transparent 2px) 0 0 / 18px 18px,
    radial-gradient(circle at 50% 50%, rgba(140, 115, 50, .05) 0 1px, transparent 1.5px) 9px 9px / 18px 18px;
  /* leaves, coming down on the breeze */
  --skin-fx:
    radial-gradient(7px 3.5px at 22% 14%, rgba(25, 169, 116, .5) 90%, transparent) 0 0 / 410px 600px,
    radial-gradient(5px 2.5px at 68% 41%, rgba(120, 190, 60, .5) 90%, transparent) 0 0 / 530px 600px,
    radial-gradient(8px 4px at 37% 73%, rgba(240, 160, 60, .42) 90%, transparent) 0 0 / 670px 600px,
    radial-gradient(4px 6px at 81% 88%, rgba(25, 169, 116, .45) 90%, transparent) 0 0 / 350px 600px,
    radial-gradient(6px 3px at 12% 52%, rgba(230, 120, 140, .38) 90%, transparent) 0 0 / 590px 600px,
    radial-gradient(3.5px 7px at 55% 27%, rgba(120, 190, 60, .45) 90%, transparent) 0 0 / 730px 600px;
  --skin-fx-inset: -600px 0 0 0; --skin-fx-to: translate3d(0, 600px, 0); --skin-fx-time: 90s;
  /* the sun, its rays turning */
  --skin-hero:
    radial-gradient(circle, #fff3c2 0 19%, #ffd65a 20% 22%, transparent 23%),
    repeating-conic-gradient(rgba(255, 210, 80, .5) 0 8deg, transparent 8deg 18deg);
  --skin-hero-mask: radial-gradient(circle, #000 0 28%, rgba(0, 0, 0, .8) 40%, transparent 70%);
  --skin-hero-o: .9;
  --skin-hero-anim: skin-spin 100s linear infinite;
  --skin-glow: radial-gradient(closest-side, rgba(255, 220, 120, .4), transparent);
  --skin-money: linear-gradient(100deg, #6b4f00 0%, #a37900 45%, #775800 70%, #5e4500 100%);
  --skin-meter: linear-gradient(90deg, #0f7a52, #19a974 55%, #7ed957);
  --skin-kpi-1: #0f7a52; --skin-kpi-2: #1f86b8; --skin-kpi-3: #a37900; --skin-kpi-4: #c2541f;
  --skin-mark: "✿";
}
:root[data-skin="island"] :is(h1, h2, h3) { font-weight: 800; letter-spacing: 0; }
:root[data-skin="island"] .topbar {
  --ink: #ffffff; --ink-2: #ffffff; --ink-3: #ffffff; --bg-3: rgba(0, 0, 0, .16); --line: rgba(0, 0, 0, .2);
  --accent: #ffffff; --accent-text: #ffffff; --accent-fill: #ffffff; --accent-ink: #0f7a52;
  --gold: #fff0a8; --gold-text: #fff0a8;
  color: #fff; border-bottom: 3px solid #17573a;
}
:root[data-skin="island"] .btn { box-shadow: 0 3px 0 rgba(120, 100, 40, .2); font-weight: 700; }
:root[data-skin="island"] .btn-primary { box-shadow: 0 3px 0 #0b5c3d; }
:root[data-skin="island"] .modal { border: 0; border-radius: 30px; box-shadow: 0 6px 0 #ddd0a4, 0 30px 70px -30px rgba(80, 60, 10, .45); }
/* the tiles: speech bubbles */
:root[data-skin="island"] :is(.home-kpi, .home-hello) {
  background: #fffbef; border: 0;
  box-shadow: 0 4px 0 #e2d5a8, 0 16px 28px -18px rgba(80, 60, 10, .4);
}
:root[data-skin="island"] .home-kpi { border-radius: 24px; }
:root[data-skin="island"] .home-kpi:hover { box-shadow: 0 6px 0 #d8c894, 0 20px 30px -18px rgba(80, 60, 10, .45); }

/* ====================================================== Dream Puff
   Kirby: bubblegum pink, a star's yellow, everything soft and round. */
:root[data-skin="dreampuff"] {
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-display: "Sniglet", "Nunito", system-ui, sans-serif;
  --radius-sm: 14px; --radius: 20px; --radius-lg: 28px;
  --bg: #fff0f6; --bg-2: #ffffff; --bg-3: #ffe3ee; --surface: #ffffff;
  --line: #f5c3d6; --line-soft: #fadbe7; --hairline: rgba(255, 255, 255, .85);
  --ink: #2e1a26; --ink-2: #66455a; --ink-3: #7a5670;
  --accent: #e8457c; --accent-2: #ffd23f; --accent-ink: #ffffff;
  --accent-text: #b82a5a; --accent-fill: #c9326a; --accent-hover: #b82a5a;
  --gold: #f2b600; --gold-text: #775900; --danger: #b8243a;
  --pocket: #fbdde9; --pocket-line: #efb9cd;
  --shadow-card: 0 6px 18px rgba(232, 69, 124, .18);
  --pfbar-from: #ffe8f1; --pfbar-bg: #ffffff;
  --skin-bar: linear-gradient(180deg, #ffc2da, #ffa8c8);
  --skin-wall:
    radial-gradient(90px 40px at 18% 90px, rgba(255, 255, 255, .95) 60%, transparent 62%),
    radial-gradient(60px 30px at 23% 76px, rgba(255, 255, 255, .95) 60%, transparent 62%),
    radial-gradient(100px 44px at 88% 170px, rgba(255, 255, 255, .9) 60%, transparent 62%),
    radial-gradient(70px 34px at 83% 156px, rgba(255, 255, 255, .9) 60%, transparent 62%),
    radial-gradient(900px 400px at 50% calc(100% + 100px), rgba(255, 210, 63, .16), transparent 70%),
    linear-gradient(180deg, #ffdcec, #fff0f6 440px);
  /* stars and sparkles, floating up */
  --skin-fx: var(--skin-dots);
  --dot-1: #ffd23f; --dot-2: rgba(232, 69, 124, .6); --dot-3: #ffffff; --dot-k: 1.6;
  --skin-fx-inset: 0 0 -600px 0; --skin-fx-to: translate3d(0, -600px, 0); --skin-fx-time: 100s;
  --skin-fx-o: .6; --skin-fx-o2: 1;
  /* a star, floating */
  --skin-hero:
    radial-gradient(circle at 42% 38%, rgba(255, 255, 255, .8) 0 6%, transparent 14%),
    radial-gradient(circle at 50% 48%, #fff6c2, #ffd23f 48%, #f5a800);
  --skin-hero-clip: polygon(50% 1%, 61.5% 35%, 98% 35.5%, 68.5% 57%, 79.5% 92%, 50% 71%, 20.5% 92%, 31.5% 57%, 2% 35.5%, 38.5% 35%);
  --skin-hero-size: clamp(300px, 38vw, 580px);
  --skin-hero-at: 0 -4%;
  --skin-hero-o: .9;
  --skin-hero-anim: dream-star 9s ease-in-out infinite;
  --skin-glow: radial-gradient(closest-side, rgba(255, 143, 184, .5), rgba(255, 210, 63, .14) 55%, transparent);
  --skin-money: linear-gradient(100deg, #b82a5a 0%, #c9326a 40%, #a8551e 75%, #8a5a00 100%);
  --skin-meter: linear-gradient(90deg, #ff8fb8, #e8457c 55%, #ffd23f);
  --skin-kpi-1: #d63a6e; --skin-kpi-2: #8e5bd8; --skin-kpi-3: #b07a00; --skin-kpi-4: #2a9d8f;
  --skin-mark: "★";
}
@keyframes dream-star {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}
:root[data-skin="dreampuff"] :is(h1, h2, h3) { font-weight: 800; letter-spacing: 0; }
:root[data-skin="dreampuff"] .topbar {
  --ink: #3a0f22; --ink-2: #4a1630; --ink-3: #5a1e3b; --bg-3: rgba(255, 255, 255, .5); --line: rgba(120, 20, 60, .18);
  --accent-text: #8f1d45; --gold-text: #5c4300;
  border-bottom: 3px solid #ff8fb8;
}
:root[data-skin="dreampuff"] .btn { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .06); }
:root[data-skin="dreampuff"] .btn-primary { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 6px 18px rgba(232, 69, 124, .3); }
:root[data-skin="dreampuff"] .modal { border: 3px solid #ffc2d8; border-radius: 32px; box-shadow: 0 30px 70px -30px rgba(232, 69, 124, .5); }
/* the tiles: pillows */
:root[data-skin="dreampuff"] :is(.home-kpi, .home-hello) {
  background: #fff; border: 2px solid #ffd1e1;
  box-shadow: 0 6px 0 #ffe0ec, 0 18px 30px -18px rgba(232, 69, 124, .38);
}
:root[data-skin="dreampuff"] .home-kpi { border-radius: 26px; }
:root[data-skin="dreampuff"] .home-kpi:hover { border-color: #ff8fb8; box-shadow: 0 8px 0 #ffd1e1, 0 22px 32px -18px rgba(232, 69, 124, .45); }

/* ====================================================== Block Drop
   Tetris: the seven pieces' colours down a black well, bevelled blocks
   falling slowly behind the page. */
:root[data-skin="blockdrop"] {
  --font-display: "Press Start 2P", ui-monospace, monospace;
  --radius-sm: 2px; --radius: 3px; --radius-lg: 4px; --radius-pill: 4px;
  --bg: #05050a; --bg-2: #0d0d16; --bg-3: #161624; --surface: #0f0f1a;
  --line: #2a2a40; --line-soft: #1a1a2a; --hairline: rgba(255, 255, 255, .1);
  --ink: #f5f5ff; --ink-2: #bcbcd8; --ink-3: #9494b4;
  --accent: #00f0f0; --accent-2: #a000f0; --accent-ink: #001a1a;
  --accent-text: #00f0f0; --accent-fill: #00f0f0; --accent-hover: #6ff8f8;
  --gold: #f0f000; --gold-text: #f0e800; --danger: #ff5050;
  --pocket: #030306; --pocket-line: #22223a;
  --block: inset 3px 3px 0 rgba(255, 255, 255, .35), inset -3px -3px 0 rgba(0, 0, 0, .35);
  --pfbar-from: #11111d; --pfbar-bg: #0d0d16;
  --skin-bar: #0d0d16;
  --skin-wall:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 30px 30px,
    radial-gradient(800px 300px at 50% calc(100% + 100px), rgba(160, 0, 240, .22), transparent 70%),
    radial-gradient(600px 400px at 100% 0%, rgba(0, 240, 240, .08), transparent 70%);
  /* blocks, falling */
  --skin-fx: var(--skin-blocks);
  --dot-1: rgba(0, 240, 240, .3); --dot-2: rgba(240, 240, 0, .26); --dot-3: rgba(176, 40, 255, .4); --blk: 14px;
  --skin-fx-inset: -600px 0 0 0; --skin-fx-to: translate3d(0, 600px, 0); --skin-fx-time: 60s;
  --skin-fx-o: .7; --skin-fx-o2: .7;
  /* a T piece, turning a quarter at a time */
  --skin-hero:
    linear-gradient(90deg, rgba(0, 0, 0, .45) 3px, transparent 3px) 0 0 / 33.333% 33.333%,
    linear-gradient(rgba(0, 0, 0, .45) 3px, transparent 3px) 0 0 / 33.333% 33.333%,
    linear-gradient(135deg, rgba(255, 255, 255, .4) 0 14%, transparent 14% 86%, rgba(0, 0, 0, .35) 86%) 0 0 / 33.333% 33.333%,
    #a000f0;
  --skin-hero-clip: polygon(0 33.333%, 100% 33.333%, 100% 66.667%, 66.667% 66.667%, 66.667% 100%, 33.333% 100%, 33.333% 66.667%, 0 66.667%);
  --skin-hero-size: clamp(300px, 40vw, 600px);
  --skin-hero-o: .55;
  --skin-hero-anim: block-turn 10s cubic-bezier(.5, 0, .2, 1) infinite;
  --skin-glow: radial-gradient(closest-side, rgba(160, 0, 240, .3), rgba(0, 240, 240, .08) 60%, transparent);
  --skin-money: linear-gradient(#f0f000, #f0f000);
  --skin-money-fx: drop-shadow(.06em .06em 0 #a000f0);
  /* the seven pieces' colours, side by side */
  --skin-meter: linear-gradient(90deg, #00f0f0 0 14.3%, #f0f000 0 28.6%, #a000f0 0 42.9%, #00f000 0 57.1%, #f00000 0 71.4%, #0000f0 0 85.7%, #f0a000 0);
  --skin-kpi-1: #00f0f0; --skin-kpi-2: #c040ff; --skin-kpi-3: #f0f000; --skin-kpi-4: #00f000;
  --skin-mark: "■";
}
@keyframes block-turn {
  0%, 20% { transform: rotate(0deg); }
  25%, 45% { transform: rotate(90deg); }
  50%, 70% { transform: rotate(180deg); }
  75%, 95% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
:root[data-skin="blockdrop"] :is(h1, h2, h3) { font-weight: 400; letter-spacing: 0; line-height: 1.45; }
:root[data-skin="blockdrop"] h1 { font-size: 20px; }
:root[data-skin="blockdrop"] h2 { font-size: min(1em, 22px); }
/* the pixel face runs wide: the wordmark steps down to fit beside the bar's buttons */
:root[data-skin="blockdrop"] .brand > span { font-size: 11px; letter-spacing: 0; }
/* the seven pieces, in a row under the bar */
:root[data-skin="blockdrop"] .topbar::after {
  display: block; inset: auto 0 -4px 0; height: 4px; z-index: 1;
  background: linear-gradient(90deg, #00f0f0 0 14.3%, #f0f000 0 28.6%, #a000f0 0 42.9%, #00f000 0 57.1%, #f00000 0 71.4%, #0000f0 0 85.7%, #f0a000 0);
}
:root[data-skin="blockdrop"] .btn { box-shadow: var(--block); border-color: #000; }
:root[data-skin="blockdrop"] .btn-primary { background: #00f0f0; }
:root[data-skin="blockdrop"] .btn-primary:hover { background: #6ff8f8; }
:root[data-skin="blockdrop"] .modal { border: 3px solid #2a2a40; box-shadow: inset 0 0 0 2px #05050a, 0 30px 70px -30px #000; -webkit-backdrop-filter: none; backdrop-filter: none; background: #0d0d16; }
/* the tiles: black, with a column of each one's piece down the left */
:root[data-skin="blockdrop"] .home-kpi {
  background:
    linear-gradient(rgba(0, 0, 0, .5) 2px, transparent 2px) 0 0 / 8px 12px repeat-y,
    linear-gradient(var(--kpi), var(--kpi)) 0 0 / 8px 100% no-repeat,
    rgba(13, 13, 22, .92);
  border: 2px solid #2a2a40;
  box-shadow: inset 0 0 0 1px #05050a, 0 14px 28px -18px #000;
}
:root[data-skin="blockdrop"] .home-kpi:hover { border-color: var(--kpi); }

/* ====================================================== Phantom
   Persona 5: red, black and white, everything cut at a slant, a starburst
   behind the fan. */
:root[data-skin="phantom"] {
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --radius-sm: 0px; --radius: 2px; --radius-lg: 3px;
  --bg: #0a0a0a; --bg-2: #141414; --bg-3: #1f1f1f; --surface: #151515;
  --line: #3a3a3a; --line-soft: #222222; --hairline: rgba(255, 255, 255, .08);
  --ink: #ffffff; --ink-2: #d4d4d4; --ink-3: #ababab;
  --accent: #e60012; --accent-2: #ffffff; --accent-ink: #ffffff;
  --accent-text: #ff4552; --accent-fill: #d40010; --accent-hover: #b8000e;
  --gold: #ffcf33; --gold-text: #ffcf33; --danger: #ff5a68;
  --pocket: #050505; --pocket-line: #2e2e2e;
  --slant: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  --burst: polygon(50% 0, 61.5% 22.3%, 81.1% 18.9%, 77.7% 38.5%, 100% 50%, 74% 60%, 82.5% 82.5%, 61.5% 77.7%, 50% 100%, 38.5% 77.7%, 18.9% 81.1%, 22.3% 61.5%, 0 50%, 26% 40%, 16.8% 16.8%, 38.5% 22.3%);
  --pfbar-from: #161616; --pfbar-bg: #141414;
  --skin-bar: linear-gradient(100deg, #d40010 0 210px, #0a0a0a 211px);
  --skin-wall:
    radial-gradient(circle at 50% 50%, rgba(230, 0, 18, .16) 0 2px, transparent 2.5px) 0 0 / 12px 12px,
    linear-gradient(115deg, transparent 0 62%, rgba(230, 0, 18, .14) 62% 70%, transparent 70%),
    linear-gradient(115deg, transparent 0 74%, rgba(255, 255, 255, .035) 74% 76%, transparent 76%),
    linear-gradient(115deg, transparent 0 18%, rgba(255, 255, 255, .025) 18% 19%, transparent 19%);
  --skin-hero:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .28) 0 2px, transparent 2.5px) 0 0 / 12px 12px,
    radial-gradient(circle, #ff2a3a, #e60012 50%, #a3000c);
  --skin-hero-clip: var(--burst);
  --skin-hero-o: .9;
  --skin-hero-anim: skin-spin 60s linear infinite;
  /* its white rim, a size larger behind it */
  --skin-glow: #ffffff;
  --skin-glow-clip: var(--burst);
  --skin-glow-size: calc(var(--skin-hero-size) * 1.07);
  --skin-glow-anim: skin-spin 60s linear infinite;
  --skin-money: linear-gradient(#ffffff, #ffffff);
  --skin-money-fx: drop-shadow(.06em .06em 0 #e60012);
  --skin-meter: repeating-linear-gradient(115deg, #e60012 0 12px, #8a0009 12px 15px);
  --skin-kpi-1: #ff4552; --skin-kpi-2: #f0f0f0; --skin-kpi-3: #ffcf33; --skin-kpi-4: #6fa8ff;
  --skin-mark: "★";
}
:root[data-skin="phantom"] :is(h1, h2, h3) { font-weight: 400; letter-spacing: .03em; text-transform: uppercase; font-style: italic; }
:root[data-skin="phantom"] .topbar { --ink-2: #e8e8e8; --ink-3: #d0d0d0; border-bottom: 3px solid #ffffff; }
:root[data-skin="phantom"] .btn-primary { clip-path: var(--slant); border-radius: 0; padding-left: 20px; padding-right: 20px; }
:root[data-skin="phantom"] .btn { text-transform: uppercase; letter-spacing: .03em; font-weight: 750; }
:root[data-skin="phantom"] .modal { border: 3px solid #ffffff; border-radius: 0; box-shadow: 9px 9px 0 #e60012, 0 30px 70px -30px #000; }
/* the tiles: black cards with a white rim, a shadow in each one's colour */
:root[data-skin="phantom"] .home-kpi {
  background: linear-gradient(115deg, transparent 0 72%, color-mix(in srgb, var(--kpi) 16%, transparent) 72% 80%, transparent 80%), #0f0f0f;
  border: 2px solid #ffffff; border-radius: 0;
  box-shadow: 5px 5px 0 var(--kpi);
}
:root[data-skin="phantom"] .home-kpi:hover { border-color: #fff; box-shadow: 8px 8px 0 var(--kpi); }
:root[data-skin="phantom"] .home-kpi-value { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }

/* ====================================================== Hollow Deep
   Hollow Knight: ink-black caverns, pale soul light, motes drifting up in
   the dark. */
:root[data-skin="hollow"] {
  --font-display: "Spectral SC", Georgia, serif;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px;
  --bg: #05070d; --bg-2: #0b0f1a; --bg-3: #131a2a; --surface: #0d1220;
  --line: #263149; --line-soft: #161e31; --hairline: rgba(238, 242, 251, .06);
  --ink: #eef2fb; --ink-2: #b6c0d6; --ink-3: #909bb3;
  --accent: #9fd3ff; --accent-2: #e8ecf5; --accent-ink: #061224;
  --accent-text: #b5ddff; --accent-fill: #9fd3ff; --accent-hover: #c4e5ff;
  --gold: #d9c38c; --gold-text: #e0cc98; --danger: #ff8080;
  --pocket: #04060b; --pocket-line: #1f283d;
  --pfbar-from: #0e1322; --pfbar-bg: #0b0f1a;
  --skin-bar: linear-gradient(180deg, #0e1322, #090c15);
  --skin-wall:
    radial-gradient(600px 900px at 30% -300px, rgba(159, 211, 255, .12), transparent 70%),
    radial-gradient(700px 500px at 90% 110%, rgba(110, 140, 200, .1), transparent 70%),
    radial-gradient(1200px 700px at 50% 50%, transparent 45%, rgba(0, 0, 0, .6) 100%);
  /* motes of soul, drifting up */
  --skin-fx: var(--skin-dots);
  --dot-1: #dceeff; --dot-2: #b5ddff; --dot-3: #ffffff; --dot-k: 1.25;
  --skin-fx-inset: 0 0 -600px 0; --skin-fx-to: translate3d(0, -600px, 0); --skin-fx-time: 120s;
  --skin-fx-o: .45; --skin-fx-o2: .95; --skin-fx-blend: screen;
  /* a pale orb of soul light, ringed */
  --skin-hero:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 5%, rgba(200, 230, 255, .7) 9%, rgba(159, 211, 255, .2) 30%, transparent 52%),
    radial-gradient(circle, transparent 0 45.6%, rgba(238, 242, 251, .32) 46% 46.6%, transparent 47% 63%, rgba(238, 242, 251, .14) 63.4% 63.8%, transparent 64.2%);
  --skin-hero-o: .85;
  --skin-hero-anim: skin-float 9s ease-in-out infinite;
  --skin-glow: radial-gradient(closest-side, rgba(159, 211, 255, .18), transparent);
  --skin-glow-anim: skin-breathe 9s ease-in-out infinite;
  --skin-money: linear-gradient(100deg, #e0cc98 0%, #fff8e6 40%, #d9c38c 60%, #a8925a 100%);
  --skin-money-fx: drop-shadow(0 0 16px rgba(238, 242, 251, .18));
  --skin-meter: linear-gradient(90deg, #5b88c8, #b5ddff 70%, #ffffff);
  --skin-kpi-1: #9fd3ff; --skin-kpi-2: #e8ecf5; --skin-kpi-3: #d9c38c; --skin-kpi-4: #b39ddb;
  --skin-mark: "◇";
}
:root[data-skin="hollow"] :is(h1, h2, h3) { font-weight: 600; letter-spacing: .04em; }
:root[data-skin="hollow"] .topbar { border-bottom: 1px solid rgba(238, 242, 251, .22); }
:root[data-skin="hollow"] .btn-primary { box-shadow: 0 0 18px rgba(159, 211, 255, .35); }
:root[data-skin="hollow"] :is(.modal, .home-kpi) {
  border: 1px solid rgba(238, 242, 251, .32);
  box-shadow: inset 0 0 0 3px var(--bg-2), inset 0 0 0 4px rgba(238, 242, 251, .1), 0 30px 80px -30px #000;
}
:root[data-skin="hollow"] .home-kpi { background: linear-gradient(180deg, rgba(19, 26, 42, .82), rgba(8, 11, 20, .9)); }
:root[data-skin="hollow"] .home-kpi:hover { border-color: rgba(238, 242, 251, .6); box-shadow: inset 0 0 0 3px var(--bg-2), inset 0 0 0 4px rgba(159, 211, 255, .18), 0 0 26px -8px rgba(159, 211, 255, .4); }

/* ====================================================== Test Chamber
   Portal: clinical white panels, a blue portal and an orange one. */
:root[data-skin="testchamber"] {
  --font: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --radius-sm: 3px; --radius: 4px; --radius-lg: 6px;
  --bg: #eef0f2; --bg-2: #ffffff; --bg-3: #e3e6ea; --surface: #ffffff;
  --line: #cdd2d8; --line-soft: #e0e4e8; --hairline: rgba(255, 255, 255, .9);
  --ink: #15181c; --ink-2: #48505a; --ink-3: #5c6570;
  --accent: #0099ff; --accent-2: #ff8a00; --accent-ink: #ffffff;
  --accent-text: #006cb8; --accent-fill: #0072c2; --accent-hover: #005e9e;
  --gold: #ff9a1f; --gold-text: #8a4c00; --danger: #c62828;
  --pocket: #e1e4e8; --pocket-line: #c6ccd3;
  --pfbar-from: #f6f7f8; --pfbar-bg: #ffffff;
  --skin-bar: #fbfcfd;
  /* the chamber's panels, lit from the two portals */
  --skin-wall:
    linear-gradient(rgba(20, 24, 28, .055) 1px, transparent 1px) 0 0 / 128px 128px,
    linear-gradient(90deg, rgba(20, 24, 28, .055) 1px, transparent 1px) 0 0 / 128px 128px,
    linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px) 0 1px / 128px 128px,
    radial-gradient(300px 480px at 2% 60%, rgba(0, 153, 255, .14), transparent 70%),
    radial-gradient(300px 480px at 98% 40%, rgba(255, 138, 0, .14), transparent 70%);
  /* the blue portal; its orange twin is the light (::after) */
  --skin-hero: radial-gradient(closest-side, rgba(0, 153, 255, .05) 0 74%, #6cc8ff 80%, #0099ff 86%, rgba(0, 153, 255, .4) 93%, transparent);
  --skin-hero-r: 50%;
  --skin-hero-size: clamp(220px, 24vw, 360px);
  --skin-hero-at: calc(var(--skin-hero-size) * -.64) 0;
  --skin-hero-anim: skin-breathe 4.5s ease-in-out infinite;
  --skin-glow: radial-gradient(closest-side, rgba(255, 138, 0, .05) 0 74%, #ffbe6a 80%, #ff8a00 86%, rgba(255, 138, 0, .4) 93%, transparent);
  --skin-glow-size: var(--skin-hero-size);
  --skin-glow-anim: skin-breathe 4.5s ease-in-out -2.25s infinite;
  --skin-money: linear-gradient(100deg, #7a4300 0%, #a85d00 45%, #8a4c00 70%, #6a3a00 100%);
  --skin-meter: linear-gradient(90deg, #0099ff, #6cc8ff 48%, #ffbe6a 52%, #ff8a00);
  --skin-kpi-1: #0072c2; --skin-kpi-2: #d96a00; --skin-kpi-3: #8a4c00; --skin-kpi-4: #0f8a6a;
  --skin-mark: "▪";
}
/* portals are ovals, stood upright, either side of the fan */
:root[data-skin="testchamber"] .home-stage::before,
:root[data-skin="testchamber"] .home-stage::after { width: calc(var(--skin-hero-size) * .46); border-radius: 50%; z-index: -1; }
:root[data-skin="testchamber"] .home-stage::after { translate: calc(var(--skin-hero-size) * .64) 0; }
:root[data-skin="testchamber"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
/* a blue portal and an orange one, under the bar */
:root[data-skin="testchamber"] .topbar::after {
  display: block; inset: auto 0 -3px 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, #0099ff 0 50%, #ff8a00 50%);
}
:root[data-skin="testchamber"] .modal { border: 1px solid #cdd2d8; border-top: 4px solid #0099ff; box-shadow: 0 30px 70px -30px rgba(20, 24, 28, .35); }
/* the tiles: white panels, each with its colour along the top */
:root[data-skin="testchamber"] .home-kpi {
  background: #fff; border: 1px solid #cdd2d8; border-radius: 4px;
  box-shadow: inset 0 3px 0 var(--kpi), 0 12px 24px -18px rgba(20, 24, 28, .4);
}
:root[data-skin="testchamber"] .home-kpi:hover { border-color: var(--kpi); }

/* ====================================================== Wasteland
   Fallout: a wrist computer's phosphor green, scanlines, mono type
   everywhere, the screen's roll passing down it and a radar sweeping. */
:root[data-skin="wasteland"] {
  --font: "Share Tech Mono", ui-monospace, monospace;
  --font-display: "VT323", "Share Tech Mono", ui-monospace, monospace;
  --radius-sm: 2px; --radius: 3px; --radius-lg: 4px;
  --bg: #020a04; --bg-2: #061409; --bg-3: #0b2212; --surface: #071a0b;
  --line: #1d5a2c; --line-soft: #0f3318; --hairline: rgba(26, 255, 128, .08);
  --ink: #9dffbd; --ink-2: #74e6a0; --ink-3: #56c882;
  --accent: #1aff80; --accent-2: #9dffbd; --accent-ink: #002210;
  --accent-text: #39ff8f; --accent-fill: #1aff80; --accent-hover: #6dffae;
  --gold: #c8ff8a; --gold-text: #c8ff8a; --danger: #ff7a5a;
  --pocket: #010603; --pocket-line: #164a22;
  --pfbar-from: #081a0c; --pfbar-bg: #061409;
  --skin-bar: #061409;
  --skin-wall:
    repeating-linear-gradient(0deg, rgba(26, 255, 128, .045) 0 1px, transparent 1px 3px),
    radial-gradient(900px 600px at 50% 40%, rgba(26, 255, 128, .08), transparent 70%),
    radial-gradient(1200px 700px at 50% 50%, transparent 50%, rgba(0, 0, 0, .65) 100%);
  /* the screen's roll */
  --skin-fx: linear-gradient(180deg, transparent 0, rgba(26, 255, 128, .04) 40%, rgba(26, 255, 128, .11) 50%, rgba(26, 255, 128, .04) 60%, transparent 100%) 0 0 / 100% 600px;
  --skin-fx-inset: -600px 0 0 0; --skin-fx-to: translate3d(0, 600px, 0); --skin-fx-time: 11s;
  --skin-fx-o: .8; --skin-fx-o2: 1; --skin-fx-blend: screen;
  /* a radar: its rings, and the sweep going round */
  --skin-hero:
    radial-gradient(circle, transparent 0 24.6%, rgba(26, 255, 128, .5) 25% 25.6%, transparent 26% 49.4%, rgba(26, 255, 128, .5) 49.8% 50.4%, transparent 50.8% 69.6%, rgba(26, 255, 128, .8) 70% 71%, transparent 71.4%),
    conic-gradient(from 0deg, rgba(26, 255, 128, .55), rgba(26, 255, 128, .12) 40deg, transparent 90deg 360deg);
  --skin-hero-mask: radial-gradient(circle, #000 0 71%, transparent 71.4%);
  --skin-hero-o: .75;
  --skin-hero-anim: skin-spin 5s linear infinite;
  --skin-glow: radial-gradient(closest-side, rgba(26, 255, 128, .14), transparent);
  --skin-money: linear-gradient(#c8ff8a, #c8ff8a);
  --skin-money-fx: drop-shadow(0 0 12px rgba(26, 255, 128, .55));
  --skin-meter: repeating-linear-gradient(90deg, #1aff80 0 10px, transparent 10px 13px);
  --skin-kpi-1: #1aff80; --skin-kpi-2: #9dffbd; --skin-kpi-3: #c8ff8a; --skin-kpi-4: #6dffae;
  --skin-mark: ">";
}
:root[data-skin="wasteland"] :is(h1, h2, h3) { font-weight: 400; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 0 10px rgba(26, 255, 128, .45); }
:root[data-skin="wasteland"] h1 { font-size: 30px; }
:root[data-skin="wasteland"] .topbar { border-bottom: 2px solid #1aff80; box-shadow: 0 0 14px rgba(26, 255, 128, .25); }
:root[data-skin="wasteland"] .btn { border-color: #1d5a2c; background: #0b2212; color: #9dffbd; }
:root[data-skin="wasteland"] .btn:hover { border-color: #1aff80; }
:root[data-skin="wasteland"] .btn-primary { background: #1aff80; color: #002210; box-shadow: 0 0 14px rgba(26, 255, 128, .4); }
:root[data-skin="wasteland"] .modal { border: 1px solid #1aff80; box-shadow: 0 0 30px rgba(26, 255, 128, .2), 0 30px 70px -30px #000; }
/* the tiles: read-outs on the screen, outlined in phosphor */
:root[data-skin="wasteland"] .home-kpi {
  background: rgba(6, 20, 9, .82); border: 1px solid #1d5a2c; border-radius: 3px;
  box-shadow: inset 0 0 20px rgba(26, 255, 128, .07);
}
:root[data-skin="wasteland"] .home-kpi:hover { border-color: #1aff80; box-shadow: inset 0 0 20px rgba(26, 255, 128, .12), 0 0 16px -4px rgba(26, 255, 128, .45); }
:root[data-skin="wasteland"] .home-kpi-value { text-shadow: 0 0 10px rgba(26, 255, 128, .45); }