/* ============================================================
   ButtonBass Synth — vintage instrument console
   Cream panel · oxblood accents · brass details
   ============================================================ */

:root {
  --cream:        #efe5d0;
  --cream-deep:   #e1d3b6;
  --cream-shadow: #c4b393;
  --ink:          #1d1410;
  --ink-soft:     #3a2a22;
  --oxblood:      #6b1f24;
  --oxblood-hot:  #a52a2f;
  --brass:        #b8893a;
  --brass-bright: #d9a953;
  --brass-dark:   #7a5a25;
  --led-on:       #ffb547;
  --led-off:      #2a1e16;
  --screen-bg:    #1a221c;
  --screen-fg:    #8de07a;
  --screen-glow:  rgba(141, 224, 122, 0.55);

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-screen:  "JetBrains Mono", ui-monospace, monospace;
  --font-ui:      "Inter Tight", -apple-system, system-ui, sans-serif;

  --radius:       6px;
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,.18), inset 0 -1px 0 rgba(255,255,255,.5);
  --shadow-panel: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 4px rgba(0,0,0,.08) inset, 0 8px 24px rgba(0,0,0,.25);

  /* SHAPE TOKENS — every skin can override these to change the silhouette
     of the synth without touching any other CSS. */
  --radius-cabinet: 8px;    /* outer cabinet shell */
  --radius-module:  6px;    /* each module box */
  --radius-button:  3px;    /* buttons + small controls */
  --radius-display: 5px;    /* LCD screens */
  --module-border-style: solid;
  --module-border-width: 1px;
  --cabinet-pattern: none;  /* background-image for the cabinet "wallpaper" */
  --cabinet-pattern-opacity: 0.22;
  --cabinet-pattern-blend: overlay;
  --sticker-content: none;  /* if set, .sticker badge becomes visible */
  --sticker-bg: var(--led-on);
  --sticker-fg: var(--ink);
  --sticker-rotation: -8deg;
  --knob-arc-color: var(--oxblood-hot);
  --knob-arc-width: 6;              /* base arc width — bump per-skin if needed */
  --knob-arc-bg-color: rgba(0,0,0,.32);
  --knob-arc-bg-width: 6;
  --keyboard-bg: var(--ink);

  /* Contrast halo behind small feature labels (module titles + knob labels) so
     they stay readable across every skin's panel colours. A dark outline helps
     light-text-on-light-panel and washed/gradient panels, while on the default
     dark-text-on-cream it just reads a touch bolder. Skins may override this
     (e.g. set a light halo, or `none`). */
  --label-halo: 0 0 1.5px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background:
    radial-gradient(ellipse at top, #2a1a14 0%, #120a07 60%, #0a0604 100%);
  font-family: var(--font-ui);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 6px 8px 6px;
}

/* ============================================================
   CABINET — main wooden frame
   ============================================================ */

.cabinet {
  width: 100%;
  max-width: 1700px;
  background:
    linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  border-radius: var(--radius-cabinet);
  padding: 6px;
  position: relative;
  box-shadow:
    0 2px 0 rgba(255,255,255,.45) inset,
    0 -3px 8px rgba(0,0,0,.08) inset,
    0 12px 40px rgba(0,0,0,.55),
    0 0 0 3px #3a2418,        /* wood bezel */
    0 0 0 4px var(--brass-dark);  /* brass trim */
}

/* paper-grain noise overlay */
.cabinet::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-cabinet);
  pointer-events: none;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(0,0,0,.04) 0, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.05) 0, transparent 50%);
  mix-blend-mode: multiply;
  opacity: .9;
}

/* Skin "wallpaper" — the ::after pseudo holds whatever pattern the active
   skin declares via --cabinet-pattern. Default skin keeps the original
   fractal-noise SVG via the body.skin-default override below. */
.cabinet::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-cabinet);
  pointer-events: none;
  background-image: var(--cabinet-pattern);
  background-size: var(--cabinet-pattern-size, auto);
  background-repeat: repeat;
  opacity: var(--cabinet-pattern-opacity);
  mix-blend-mode: var(--cabinet-pattern-blend);
}

/* Default skin keeps its original fractal-noise overlay */
body:not([class*="skin-"]) .cabinet::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>");
  opacity: .25;
  mix-blend-mode: overlay;
}

/* ============================================================
   TOP BAR
   ============================================================ */

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 1px 3px 3px;
  border-bottom: 1px solid var(--cream-shadow);
  margin-bottom: 4px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brass-bright), var(--brass) 60%, var(--brass-dark));
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(0,0,0,.35),
    0 2px 4px rgba(0,0,0,.25);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.brand-name em {
  font-style: italic;
  color: var(--oxblood);
  font-weight: 800;
}

/* SCREEN */
.display {
  background: var(--screen-bg);
  border-radius: var(--radius-display);
  padding: 4px 8px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  align-items: center;
  gap: 8px;
  font-family: var(--font-screen);
  color: var(--screen-fg);
  text-shadow: 0 0 8px var(--screen-glow);
  box-shadow:
    inset 0 0 0 1px rgba(141,224,122,.15),
    inset 0 2px 8px rgba(0,0,0,.7),
    0 1px 0 rgba(255,255,255,.4);
  position: relative;
  overflow: hidden;
  min-height: 34px;
}
/* scanlines */
.display::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgba(0,0,0,.18) 2px 3px
  );
  pointer-events: none;
}

.display-row { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.display-label { font-size: 7px; opacity: .55; letter-spacing: .12em; line-height: 1.1; }
.display-value {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.display-scope {
  width: 100%; height: 30px;
  display: block;
}

.masters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preset-bay { display: flex; gap: 4px; align-items: center; }

.preset-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--ink);
  color: var(--cream);
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  padding: 5px 32px 5px 8px;
  font-family: var(--font-screen);
  font-size: 11px;
  letter-spacing: .04em;
  cursor: pointer;
  /* Obvious dropdown affordance: a brass "well" on the right edge with a
     dark down-chevron drawn on top of it. The chevron layer is listed first
     so it paints above the brass gradient well. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%231d1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(180deg, var(--brass-bright), var(--brass) 55%, var(--brass-dark));
  background-position: calc(100% - 8px) 50%, 100% 50%;
  background-size: 12px 12px, 24px 100%;
  background-repeat: no-repeat;
  transition: border-color .12s, filter .12s;
}
.preset-select:hover {
  border-color: var(--brass-bright);
  filter: brightness(1.08);
}
.preset-select:focus {
  outline: none;
  border-color: var(--brass-bright);
  box-shadow: 0 0 0 2px rgba(217, 169, 83, .35);
}

.btn {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: var(--radius-button);
  border: 1px solid var(--brass-dark);
  background: linear-gradient(180deg, var(--cream), var(--cream-deep));
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 2px 3px rgba(0,0,0,.15);
  transition: transform .05s, box-shadow .05s;
}
.btn:hover { background: linear-gradient(180deg, #f4ead5, var(--cream-deep)); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset; }

.btn-ghost {
  background: transparent;
  border-color: var(--cream-shadow);
  color: var(--ink-soft);
}

.master-knob { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.master-knob label { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--ink); text-shadow: var(--label-halo); }

/* ============================================================
   MODULE GRID
   ============================================================ */

.modules {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  /* Modules in the same row share the row's height (default `stretch`) so
     short modules (FX vs ARP, AMP ENV vs FILTER+NOISE) line up cleanly. */
  align-items: stretch;
  gap: 5px;
}

.module {
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(0,0,0,.04)),
    var(--cream-deep);
  border: var(--module-border-width) var(--module-border-style) var(--cream-shadow);
  border-radius: var(--radius-module);
  padding: 4px 5px 5px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -1px 0 rgba(0,0,0,.05) inset,
    0 2px 4px rgba(0,0,0,.08);
  /* Flex column so the knob-row can vertically center via auto margins
     when align-items: stretch on the grid makes the module taller than
     its natural content. */
  display: flex;
  flex-direction: column;
}
/* Knob-row auto-centers in the space below the title (and below the
   waveform/strip row if one is present). Only applies to regular modules —
   the full-width SEQ and SONG modules manage their own internal layout. */
.module:not(.module-full) > .knob-row,
.module:not(.module-full) > .knob-row-tight {
  margin-top: auto;
  margin-bottom: auto;
}
.module-narrow { /* fits in narrower spaces */ }
.module-wide { grid-column: span 3; }
.module-wide-2 { grid-column: span 2; }

/* Twin-module layout: FILTER + NOISE share one bordered section, divided
   by a soft vertical rule. Keeps NOISE from inflating to its own grid row. */
.module-twin {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 8px;
}
.module-twin-side { min-width: 0; }
.module-twin-noise {
  border-left: 1px dashed var(--cream-shadow);
  padding-left: 8px;
}

/* ARP strip: ON/LCH toggles + the 5 mode buttons sit on one row. */
.arp-strip {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.arp-strip .arp-btn-row {
  flex: 0 0 auto;
  margin-bottom: 4px;
  min-width: 70px;
}
.arp-strip .wave-row.arp-mode-row {
  flex: 1;
  margin-bottom: 4px;
}

.module-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oxblood);
  text-shadow: var(--label-halo);
  margin-bottom: 3px;
  padding-bottom: 2px;
  /* dropped the border-bottom — visual separator we don't need at this density */
  display: flex; align-items: baseline; gap: 4px;
  line-height: 1.1;
}
.module-title .num {
  font-style: italic;
  color: var(--brass-dark);
  font-weight: 600;
}

/* WAVEFORM / TOGGLE ROW */
.wave-row {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
}
.wave-btn {
  flex: 1;
  min-width: 0;
  padding: 3px 2px;
  background: var(--led-off);
  color: rgba(255, 181, 71, .25);
  border: 1px solid #000;
  border-radius: var(--radius-button);
  font-family: var(--font-screen);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: color .12s, background .12s, box-shadow .12s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.wave-btn:hover { color: rgba(255, 181, 71, .55); }
.wave-btn.active {
  color: var(--led-on);
  text-shadow: 0 0 6px rgba(255, 181, 71, .9);
  background: #1a0e07;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.6),
    0 0 8px rgba(255, 181, 71, .35);
}

/* KNOB ROW */
.knob-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
  gap: 2px;
}
.knob-row-tight { gap: 1px; }

.knob-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.knob-cell label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  text-shadow: var(--label-halo);
  line-height: 1.2;
}

/* KNOB */
.knob {
  width: 32px;
  height: 32px;
  position: relative;
  cursor: ns-resize;
  touch-action: none;
}
.knob svg { width: 100%; height: 100%; display: block; }

.knob .knob-body {
  fill: url(#brassGrad);
  stroke: var(--brass-dark);
  stroke-width: 1;
}
.knob .knob-indicator {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.knob .knob-arc-bg {
  stroke: var(--knob-arc-bg-color);
  stroke-width: var(--knob-arc-bg-width);
  fill: none;
  stroke-linecap: round;
}
.knob .knob-arc {
  stroke: var(--knob-arc-color);
  stroke-width: var(--knob-arc-width);
  fill: none;
  stroke-linecap: round;
  /* Drop-shadow makes the arc pop against any cabinet color/pattern */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35));
}

/* tooltip */
.knob-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-screen);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
  z-index: 10;
}
.knob.dragging .knob-tooltip { opacity: 1; }

/* master knob (slightly larger than module knobs) */
.master-knob .knob {
  width: 36px;
  height: 36px;
}

/* ============================================================
   KEYBOARD
   ============================================================ */

.keyboard-bay {
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid var(--cream-shadow);
}

.kb-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  flex-wrap: wrap;
  font-size: 9px;
}
.kb-controls .btn { padding: 4px 7px; }
.oct-display {
  font-family: var(--font-screen);
  font-size: 11px;
  color: var(--oxblood);
  font-weight: 700;
  padding: 3px 7px;
  background: var(--cream);
  border-radius: 3px;
  border: 1px solid var(--cream-shadow);
  min-width: 38px;
  text-align: center;
}
.kb-hint {
  color: var(--ink-soft);
  font-size: 9px;
  letter-spacing: .06em;
  flex: 1;
  text-align: right;
}
.midi-status {
  font-family: var(--font-screen);
  font-size: 9px;
  color: var(--brass-dark);
  letter-spacing: .05em;
}

.keyboard {
  position: relative;
  height: 150px;
  display: flex;
  background: var(--keyboard-bg);
  border-radius: 5px;
  padding: 0;
  border: 3px solid var(--ink);
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.05);
  touch-action: none;
  overflow: hidden;
}

.key {
  flex: 1;
  position: relative;
  border-radius: 0 0 4px 4px;
  cursor: pointer;
  transition: background .04s, transform .04s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  font-family: var(--font-screen);
  font-size: 11px;
  font-weight: 700;
  -webkit-user-select: none;
  user-select: none;
}
.key.white {
  background: linear-gradient(180deg, #f6efde 0%, #e2d4b8 100%);
  border: 1px solid #1a0f08;
  margin: 0 1px;
  color: var(--ink-soft);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.1);
}
.key.white.active {
  background: linear-gradient(180deg, #e7d5a8 0%, #cdb682 100%);
  transform: translateY(1px);
}

.key.black {
  position: absolute;
  top: 0;
  width: 2.2%;          /* ~half a white key */
  height: 62%;
  background: linear-gradient(180deg, #2a1810 0%, #0a0503 100%);
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  color: var(--brass);
  z-index: 2;
  align-items: flex-end;
  padding-bottom: 8px;
  font-size: 11px;
  box-shadow:
    inset 0 -6px 0 rgba(0,0,0,.5),
    0 3px 4px rgba(0,0,0,.4);
}
.key.black.active {
  background: linear-gradient(180deg, #1a0f08 0%, #050200 100%);
  transform: translateY(2px);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.6);
}

/* ============================================================
   SPLASH
   ============================================================ */

.splash {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
}
.splash.hidden { display: none; }
.splash-card {
  background: linear-gradient(180deg, var(--cream), var(--cream-deep));
  padding: 40px 48px;
  border-radius: 12px;
  text-align: center;
  border: 6px solid var(--brass-dark);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.splash-logo {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--brass-bright), var(--brass) 60%, var(--brass-dark));
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.7), inset 0 -3px 4px rgba(0,0,0,.4);
}
.splash-card h1,
.splash-card .splash-title {
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: 6px;
  color: var(--ink);
}
.splash-card p {
  font-family: var(--font-screen);
  font-size: 12px;
  color: var(--oxblood);
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ============================================================
   TRANSPORT (rec + video + viz buttons)
   ============================================================ */

.transport {
  display: flex;
  gap: 4px;
  align-items: center;
  padding-left: 6px;
  border-left: 1px solid var(--cream-shadow);
}

.rec-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid var(--brass-dark);
  background: linear-gradient(180deg, #2a1a14 0%, #120a07 100%);
  color: var(--cream);
  font-family: var(--font-screen);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  transition: transform .05s, box-shadow .12s, background .12s;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 2px 3px rgba(0,0,0,.3);
}
.rec-btn:hover { background: linear-gradient(180deg, #3a2418, #1d1410); }
.rec-btn:active { transform: translateY(1px); }
.rec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6b1f24;
  box-shadow: inset 0 0 3px rgba(0,0,0,.5);
  transition: background .15s, box-shadow .15s;
}
.rec-btn.recording {
  background: linear-gradient(180deg, #a52a2f 0%, #6b1f24 100%);
  border-color: var(--led-on);
  animation: recPulse 1.2s infinite;
}
.rec-btn.recording .rec-dot {
  background: #ff3344;
  box-shadow: 0 0 8px rgba(255, 60, 80, .9), inset 0 0 2px rgba(0,0,0,.4);
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 80, .5), 0 2px 3px rgba(0,0,0,.3); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 60, 80, 0), 0 2px 3px rgba(0,0,0,.3); }
}
.rec-btn-video .rec-dot { background: #1f4a6b; }
.rec-btn-video.recording .rec-dot { background: #ffb547; box-shadow: 0 0 8px rgba(255,181,71,.9); }

.btn-icon {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
}

/* Dice (randomize-all) button — enlarge just the glyph so it reads clearly. */
#randomBtn {
  font-size: 20px;
  line-height: 1;
  padding: 2px 8px;
}

/* ============================================================
   ARP TOGGLES
   ============================================================ */

.arp-btn-row {
  display: flex;
  gap: 2px;
  margin-bottom: 3px;
}
.arp-toggle {
  flex: 1;
  padding: 3px 4px;
}
.arp-toggle.active {
  color: var(--led-on);
  text-shadow: 0 0 6px rgba(255, 181, 71, .9);
  background: #1a0e07;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 0 8px rgba(255,181,71,.35);
}

/* ============================================================
   SEQUENCER
   ============================================================ */

.module-full {
  grid-column: 1 / -1;
}

.seq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 3px;
  padding-bottom: 2px;
}
.seq-header .module-title {
  border: none;
  margin: 0;
  padding: 0;
}
.seq-transport {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.seq-transport .btn { padding: 3px 8px; font-size: 9px; }
.seq-play.playing {
  background: linear-gradient(180deg, var(--oxblood-hot), var(--oxblood));
  color: var(--cream);
  border-color: var(--brass);
}
.seq-knob-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.seq-knob-inline label {
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--ink);
  font-weight: 700;
  text-shadow: var(--label-halo);
}
.seq-mini-knob { width: 26px; height: 26px; }

.seq-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
}
.seq-step {
  position: relative;
  background: var(--led-off);
  border: 1px solid #000;
  border-radius: 3px;
  min-height: 28px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  transition: background .08s, box-shadow .08s, transform .04s;
}
.seq-step:nth-child(4n+1) {
  border-left: 2px solid var(--brass-dark);
}
.seq-step:hover {
  box-shadow: inset 0 0 0 1px var(--brass), inset 0 1px 2px rgba(0,0,0,.6);
}
.seq-step .seq-pitch-bar {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass));
  height: 0%;
  transition: height .08s;
}
.seq-step.on {
  background: #1a0e07;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.6),
    0 0 6px rgba(255, 181, 71, .35);
}
.seq-step.on .seq-pitch-bar {
  box-shadow: 0 0 6px rgba(255, 181, 71, .6);
}
.seq-step.accent .seq-pitch-bar {
  background: linear-gradient(180deg, #ff6b3d, #d94428);
}
.seq-step.playing {
  background: var(--oxblood);
  box-shadow: 0 0 12px rgba(255, 80, 80, .6);
}
.seq-step .seq-label {
  position: absolute;
  top: 1px; left: 3px;
  font-family: var(--font-screen);
  font-size: 7px;
  color: rgba(255, 181, 71, .6);
  letter-spacing: .04em;
  pointer-events: none;
}
.seq-step.on .seq-label { color: var(--led-on); text-shadow: 0 0 4px rgba(255,181,71,.6); }
.seq-step .seq-note {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-screen);
  font-size: 10px;
  font-weight: 700;
  color: var(--led-on);
  text-shadow: 0 0 6px rgba(255, 181, 71, .9), 0 1px 1px rgba(0,0,0,.7);
  letter-spacing: .02em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
  z-index: 2;
}
.seq-step.on .seq-note { opacity: 1; }
.seq-step.accent .seq-note { color: #ffd9b3; text-shadow: 0 0 6px rgba(255, 120, 60, .9); }

.seq-hint {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-screen);
  font-size: 8px;
  color: var(--ink-soft);
  letter-spacing: .02em;
  opacity: .85;
}
.seq-hint b {
  color: var(--oxblood);
  font-weight: 700;
}

/* ============================================================
   SONG SCRIPT
   ============================================================ */

.song-textarea {
  width: 100%;
  background: var(--screen-bg);
  color: var(--screen-fg);
  font-family: var(--font-screen);
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--brass-dark);
  border-radius: 4px;
  resize: vertical;
  text-shadow: 0 0 6px var(--screen-glow);
  min-height: 38px;
  letter-spacing: .04em;
  outline: none;
  caret-color: var(--led-on);
  line-height: 1.4;
  box-shadow:
    inset 0 0 0 1px rgba(141,224,122,.15),
    inset 0 2px 8px rgba(0,0,0,.7);
}
.song-textarea::placeholder {
  color: rgba(141, 224, 122, .35);
  text-shadow: none;
}
.song-textarea:focus {
  border-color: var(--brass-bright);
  box-shadow:
    inset 0 0 0 1px rgba(141,224,122,.25),
    inset 0 2px 8px rgba(0,0,0,.7),
    0 0 0 2px rgba(217, 169, 83, .35);
}
/* When the song is playing, highlight the current letter via selection range. */
.song-textarea.playing::selection {
  background: rgba(255, 181, 71, .55);
  color: var(--ink);
  text-shadow: none;
}

.song-play.playing {
  background: linear-gradient(180deg, var(--oxblood-hot), var(--oxblood));
  color: var(--cream);
  border-color: var(--brass);
}

.song-loop-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-screen);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.song-loop-label input { accent-color: var(--oxblood); }

/* ============================================================
   JAM button (the "press me" virality engine)
   ============================================================ */

.jam-btn {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass) 60%, var(--brass-dark));
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .14em;
  border-color: var(--brass-dark);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -2px 4px rgba(0,0,0,.25) inset,
    0 3px 8px rgba(184, 137, 58, .45);
  transition: transform .08s, box-shadow .12s, filter .12s;
}
.jam-btn:hover {
  filter: brightness(1.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -2px 4px rgba(0,0,0,.25) inset,
    0 4px 12px rgba(217, 169, 83, .65);
}
.jam-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -1px 3px rgba(0,0,0,.3) inset;
}
@keyframes jamPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(217, 169, 83, .8), 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 4px rgba(0,0,0,.25) inset; }
  50%     { box-shadow: 0 0 0 8px rgba(217, 169, 83, 0),  0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 4px rgba(0,0,0,.25) inset; }
}
.jam-btn.flashing { animation: jamPulse .6s ease-out 1; }

.jam-btn.jamming {
  background: linear-gradient(180deg, #d94a3a, #a02a1f 60%, #6e1a12);
  color: #fff7ec;
  border-color: #6e1a12;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -2px 4px rgba(0,0,0,.4) inset,
    0 0 0 0 rgba(217, 74, 58, .7),
    0 3px 10px rgba(217, 74, 58, .5);
  animation: jamStopPulse 1.1s ease-in-out infinite;
}
.jam-btn.jamming:hover {
  filter: brightness(1.1);
}
@keyframes jamStopPulse {
  0%,100% { box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -2px 4px rgba(0,0,0,.4) inset,
    0 0 0 0 rgba(217, 74, 58, .7),
    0 3px 10px rgba(217, 74, 58, .5); }
  50%     { box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -2px 4px rgba(0,0,0,.4) inset,
    0 0 0 6px rgba(217, 74, 58, 0),
    0 3px 14px rgba(217, 74, 58, .65); }
}

/* ============================================================
   VIZ MODE PICKER
   ============================================================ */

.viz-mode-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.viz-mode-picker .wave-btn {
  flex: 0 0 auto;
  padding: 3px 6px;
  font-size: 9px;
}

/* ============================================================
   FULLSCREEN VISUALIZER
   ============================================================ */

.viz-fullscreen {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 2000;
  display: none;
}
.viz-fullscreen.active { display: block; }
.viz-fullscreen canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.viz-overlay-text {
  position: absolute;
  top: 24px; left: 24px;
  color: rgba(255, 255, 255, .85);
  font-family: var(--font-display);
  text-shadow: 0 2px 12px rgba(0,0,0,.85);
  pointer-events: none;
}
.viz-patch {
  font-size: 14px;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .75;
}
.viz-note {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.viz-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 24px;
  font-family: var(--font-ui);
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.viz-close:hover { background: rgba(255, 255, 255, .22); }

/* ============================================================
   SHARE MODAL
   ============================================================ */

.share-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.share-modal.active { display: flex; }
.share-card {
  background: linear-gradient(180deg, var(--cream), var(--cream-deep));
  border-radius: 14px;
  padding: 22px;
  border: 6px solid var(--brass-dark);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  max-width: 95vw;
  width: 360px;
  text-align: center;
}
.share-card h2 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 12px;
}
#sharePreview {
  width: 100%;
  max-height: 60vh;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 8px;
  display: block;
  margin: 0 auto 14px;
  object-fit: cover;
}
.share-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.share-dl {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(180deg, var(--brass-bright), var(--brass));
  color: var(--ink);
  font-weight: 700;
  border-color: var(--brass-dark);
}
.share-hint {
  margin-top: 10px;
  font-family: var(--font-screen);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: .1em;
}

/* ============================================================
   TOAST
   ============================================================ */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: 6px;
  font-family: var(--font-screen);
  font-size: 12px;
  letter-spacing: .05em;
  z-index: 4000;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  border: 1px solid var(--brass-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1180px) {
  .modules { grid-template-columns: repeat(4, 1fr); }
  /* FX (span 3) + ARP (1) fills a row */
}
@media (max-width: 920px) {
  .modules { grid-template-columns: repeat(3, 1fr); }
  .module-wide { grid-column: span 2; }
  .module-full { grid-column: 1 / -1; }
  .seq-step { min-height: 28px; }
}

@media (max-width: 720px) {
  body { padding: 6px; }
  .cabinet { padding: 8px; border-radius: 8px; }
  .topbar {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
  .display { grid-template-columns: 1fr 1fr; min-height: 36px; }
  .display-scope { display: none; }
  .brand-name { font-size: 15px; }
  .brand-mark { width: 28px; height: 28px; font-size: 12px; }
  .masters { justify-content: space-between; flex-wrap: wrap; gap: 6px; }
  .modules { grid-template-columns: 1fr 1fr; gap: 5px; }
  .module-wide { grid-column: span 2; }
  .module-full { grid-column: 1 / -1; }
  .knob { width: 36px; height: 36px; }
  .keyboard { height: 78px; }
  .kb-hint { display: none; }
  .seq-grid { gap: 2px; }
  .seq-step { min-height: 26px; }
  .viz-mode-picker { flex-wrap: wrap; }
  .viz-note { font-size: 44px; }
  .transport { border-left: none; padding-left: 0; }
}

/* ============================================================
   SKINS — body-class overrides of the CSS variable palette
   ============================================================ */

/* Each skin overrides --cream..--screen-fg; nothing else changes.
   The cabinet's paper-grain ::before is muted on darker skins via opacity. */

body.skin-midnight {
  --cream: #1a2438;
  --cream-deep: #0e1626;
  --cream-shadow: #3a4866;
  --ink: #e6eefa;
  --ink-soft: #a2b4cc;
  --oxblood: #5a8dc5;
  --oxblood-hot: #7faddb;
  --brass: #a3b3c9;
  --brass-bright: #d1d5db;
  --brass-dark: #2d3d59;
  --led-on: #5af0c5;
  --led-off: #0a1018;
  --screen-bg: #050a16;
  --screen-fg: #5af0c5;
  --screen-glow: rgba(90, 240, 197, .5);
}

body.skin-cyberpunk {
  --cream: #1a0a2e;
  --cream-deep: #0a0518;
  --cream-shadow: #5d23a0;
  --ink: #e5e7eb;
  --ink-soft: #b0a3d6;
  --oxblood: #ff00ff;
  --oxblood-hot: #ff66ff;
  --brass: #00e0ff;
  --brass-bright: #4df1ff;
  --brass-dark: #0099b3;
  --led-on: #ff00ff;
  --led-off: #14062b;
  --screen-bg: #0a0518;
  --screen-fg: #00ffff;
  --screen-glow: rgba(255, 0, 255, .6);
}

body.skin-vaporwave {
  --cream: #2d1659;
  --cream-deep: #1d0a3f;
  --cream-shadow: #6b3aa0;
  --ink: #fff0f8;
  --ink-soft: #c5a8e0;
  --oxblood: #ff71ce;
  --oxblood-hot: #ffa3df;
  --brass: #01cdfe;
  --brass-bright: #71e4ff;
  --brass-dark: #008db3;
  --led-on: #fffb96;
  --led-off: #19062c;
  --screen-bg: #15083a;
  --screen-fg: #ff71ce;
  --screen-glow: rgba(255, 113, 206, .55);
}

body.skin-matrix {
  --cream: #001a00;
  --cream-deep: #000a00;
  --cream-shadow: #054a05;
  --ink: #00ff41;
  --ink-soft: #00b32b;
  --oxblood: #00ff41;
  --oxblood-hot: #57ff8c;
  --brass: #00ff41;
  --brass-bright: #57ff8c;
  --brass-dark: #007020;
  --led-on: #00ff41;
  --led-off: #001a00;
  --screen-bg: #000a00;
  --screen-fg: #00ff41;
  --screen-glow: rgba(0, 255, 65, .7);
}

body.skin-forest {
  --cream: #d2dfc4;
  --cream-deep: #b8caa6;
  --cream-shadow: #7a8a64;
  --ink: #1f2a14;
  --ink-soft: #3d4e2a;
  --oxblood: #4b6b32;
  --oxblood-hot: #6a8c4a;
  --brass: #9c8454;
  --brass-bright: #c6a972;
  --brass-dark: #635032;
  --led-on: #ffd966;
  --led-off: #1a1a08;
  --screen-bg: #14180a;
  --screen-fg: #b4e065;
  --screen-glow: rgba(180, 224, 101, .55);
}

body.skin-sunset {
  --cream: #ffd6a5;
  --cream-deep: #ffb380;
  --cream-shadow: #c97a4a;
  --ink: #3d1810;
  --ink-soft: #6b2818;
  --oxblood: #cf2952;
  --oxblood-hot: #f04574;
  --brass: #c95830;
  --brass-bright: #ed7350;
  --brass-dark: #8a3a1c;
  --led-on: #fff056;
  --led-off: #4d1a0c;
  --screen-bg: #2a0d08;
  --screen-fg: #ffc56c;
  --screen-glow: rgba(255, 197, 108, .55);
}

body.skin-carbon {
  --cream: #2a2a2a;
  --cream-deep: #181818;
  --cream-shadow: #555;
  --ink: #f0f0f0;
  --ink-soft: #b0b0b0;
  --oxblood: #dc2626;
  --oxblood-hot: #f04848;
  --brass: #999;
  --brass-bright: #ccc;
  --brass-dark: #4a4a4a;
  --led-on: #dc2626;
  --led-off: #1a0808;
  --screen-bg: #0a0a0a;
  --screen-fg: #dc2626;
  --screen-glow: rgba(220, 38, 38, .55);
}

body.skin-gold {
  --cream: #fff4cc;
  --cream-deep: #f0d97a;
  --cream-shadow: #b88a2e;
  --ink: #3a2a08;
  --ink-soft: #6b4d12;
  --oxblood: #8b5a00;
  --oxblood-hot: #c08a20;
  --brass: #d4af37;
  --brass-bright: #ffd966;
  --brass-dark: #7a5818;
  --led-on: #ffeaa0;
  --led-off: #4d3a08;
  --screen-bg: #2a1f08;
  --screen-fg: #fff099;
  --screen-glow: rgba(255, 240, 153, .55);
}

/* -------- AD-themed silly-product skins -------- */

body.skin-drank {
  --cream: #fff056;
  --cream-deep: #ffd816;
  --cream-shadow: #b89200;
  --ink: #001a3d;
  --ink-soft: #002a66;
  --oxblood: #0040d4;
  --oxblood-hot: #2a66ff;
  --brass: #0040d4;
  --brass-bright: #4080ff;
  --brass-dark: #002080;
  --led-on: #0040d4;
  --led-off: #4d3a00;
  --screen-bg: #001a3d;
  --screen-fg: #fff056;
  --screen-glow: rgba(255, 240, 86, .7);
}

body.skin-bbq {
  --cream: #ffc857;
  --cream-deep: #e09824;
  --cream-shadow: #8a5a10;
  --ink: #2a0a00;
  --ink-soft: #4d1808;
  --oxblood: #b91c1c;
  --oxblood-hot: #ef4444;
  --brass: #7c2d12;
  --brass-bright: #c2410c;
  --brass-dark: #4a1404;
  --led-on: #fff056;
  --led-off: #2a0a00;
  --screen-bg: #1a0a00;
  --screen-fg: #ffb73a;
  --screen-glow: rgba(255, 183, 58, .6);
}

body.skin-toothpaste {
  --cream: #e0f7fa;
  --cream-deep: #b2ebf2;
  --cream-shadow: #4fb3bf;
  --ink: #003844;
  --ink-soft: #006978;
  --oxblood: #ec407a;
  --oxblood-hot: #ff5c8a;
  --brass: #00bcd4;
  --brass-bright: #4dd0e1;
  --brass-dark: #008394;
  --led-on: #fff056;
  --led-off: #003844;
  --screen-bg: #00292e;
  --screen-fg: #80f0ff;
  --screen-glow: rgba(128, 240, 255, .6);
}

body.skin-infomercial {
  --cream: #fff056;
  --cream-deep: #ffd816;
  --cream-shadow: #ad7400;
  --ink: #000;
  --ink-soft: #2a0000;
  --oxblood: #cc0000;
  --oxblood-hot: #ff0000;
  --brass: #cc0000;
  --brass-bright: #ff3838;
  --brass-dark: #800000;
  --led-on: #ff3838;
  --led-off: #4d2a00;
  --screen-bg: #1a0000;
  --screen-fg: #ff3838;
  --screen-glow: rgba(255, 56, 56, .8);
}

body.skin-cereal {
  --cream: #fff5cc;
  --cream-deep: #ffe066;
  --cream-shadow: #b88a00;
  --ink: #003580;
  --ink-soft: #002060;
  --oxblood: #e60026;
  --oxblood-hot: #ff3340;
  --brass: #003580;
  --brass-bright: #2566c0;
  --brass-dark: #001a4d;
  --led-on: #ff3340;
  --led-off: #4d3a00;
  --screen-bg: #001a4d;
  --screen-fg: #ffe066;
  --screen-glow: rgba(255, 224, 102, .6);
}

body.skin-lawyer {
  --cream: #d6dde6;
  --cream-deep: #b0b9c6;
  --cream-shadow: #5c6677;
  --ink: #0c1c33;
  --ink-soft: #1d2f4d;
  --oxblood: #1e3a8a;
  --oxblood-hot: #2954c2;
  --brass: #94795d;
  --brass-bright: #b39775;
  --brass-dark: #5c4a36;
  --led-on: #fbbf24;
  --led-off: #0a1424;
  --screen-bg: #050a14;
  --screen-fg: #fbbf24;
  --screen-glow: rgba(251, 191, 36, .55);
}

/* -------- second batch of skins -------- */

body.skin-bauhaus {
  --cream: #fff8e1;
  --cream-deep: #ffe066;
  --cream-shadow: #b58b00;
  --ink: #000;
  --ink-soft: #1a1a1a;
  --oxblood: #d62828;
  --oxblood-hot: #ff3e3e;
  --brass: #003e8a;
  --brass-bright: #1565c0;
  --brass-dark: #001f4d;
  --led-on: #ffeb3b;
  --led-off: #1a1a1a;
  --screen-bg: #000;
  --screen-fg: #ffeb3b;
  --screen-glow: rgba(255, 235, 59, .6);
}

body.skin-sakura {
  --cream: #ffe4ec;
  --cream-deep: #ffcadd;
  --cream-shadow: #d18ca7;
  --ink: #4a1d2e;
  --ink-soft: #6e3550;
  --oxblood: #c14a7c;
  --oxblood-hot: #e667a3;
  --brass: #b08aa5;
  --brass-bright: #d4afc7;
  --brass-dark: #7c5a73;
  --led-on: #ffd1e8;
  --led-off: #3e1828;
  --screen-bg: #2d0a1d;
  --screen-fg: #ffb4d6;
  --screen-glow: rgba(255, 180, 214, .6);
}

body.skin-galaxy {
  --cream: #1a1230;
  --cream-deep: #0a061a;
  --cream-shadow: #4f3a78;
  --ink: #e8e3ff;
  --ink-soft: #b3a8e0;
  --oxblood: #a64bff;
  --oxblood-hot: #c47aff;
  --brass: #7c4dff;
  --brass-bright: #b388ff;
  --brass-dark: #4a2a99;
  --led-on: #ffe066;
  --led-off: #0a061a;
  --screen-bg: #050314;
  --screen-fg: #b388ff;
  --screen-glow: rgba(179, 136, 255, .65);
}

body.skin-pastel {
  --cream: #fdf2f8;
  --cream-deep: #e9d5ff;
  --cream-shadow: #c4a7e7;
  --ink: #4c1d95;
  --ink-soft: #6d28d9;
  --oxblood: #f472b6;
  --oxblood-hot: #ff8fc7;
  --brass: #a78bfa;
  --brass-bright: #c4b5fd;
  --brass-dark: #7c3aed;
  --led-on: #fef08a;
  --led-off: #2e1057;
  --screen-bg: #1e0a3c;
  --screen-fg: #bef264;
  --screen-glow: rgba(190, 242, 100, .55);
}

/* -------- four more silly-product ad skins -------- */

body.skin-crypto {
  --cream: #f9b115;
  --cream-deep: #d68a00;
  --cream-shadow: #7a5000;
  --ink: #000;
  --ink-soft: #2a1500;
  --oxblood: #00d18c;
  --oxblood-hot: #34e6a9;
  --brass: #f9b115;
  --brass-bright: #ffd05b;
  --brass-dark: #a07300;
  --led-on: #00d18c;
  --led-off: #1a0c00;
  --screen-bg: #0a0500;
  --screen-fg: #f9b115;
  --screen-glow: rgba(249, 177, 21, .7);
}

body.skin-hotsauce {
  --cream: #1a0a05;
  --cream-deep: #0a0301;
  --cream-shadow: #6b1f0a;
  --ink: #ffe366;
  --ink-soft: #ffb84d;
  --oxblood: #ff4500;
  --oxblood-hot: #ff6a2e;
  --brass: #ff8000;
  --brass-bright: #ffaa44;
  --brass-dark: #b34000;
  --led-on: #ff4500;
  --led-off: #1a0a05;
  --screen-bg: #0d0402;
  --screen-fg: #ff7a3a;
  --screen-glow: rgba(255, 122, 58, .8);
}

body.skin-fastfood {
  --cream: #ffe55a;
  --cream-deep: #ffcc00;
  --cream-shadow: #b38a00;
  --ink: #5c0000;
  --ink-soft: #800000;
  --oxblood: #d32f2f;
  --oxblood-hot: #ff5252;
  --brass: #d32f2f;
  --brass-bright: #ff6b6b;
  --brass-dark: #8a0a0a;
  --led-on: #ff5252;
  --led-off: #3a1a00;
  --screen-bg: #2a0500;
  --screen-fg: #ffe55a;
  --screen-glow: rgba(255, 229, 90, .65);
}

body.skin-granny {
  --cream: #fff5e6;
  --cream-deep: #fde2c4;
  --cream-shadow: #a87a4a;
  --ink: #5a2a14;
  --ink-soft: #7a3a1a;
  --oxblood: #b92e1d;
  --oxblood-hot: #d44a36;
  --brass: #c2845b;
  --brass-bright: #dfa376;
  --brass-dark: #82593a;
  --led-on: #ff8c66;
  --led-off: #3a1a08;
  --screen-bg: #2c1409;
  --screen-fg: #ffd9a0;
  --screen-glow: rgba(255, 217, 160, .55);
}

/* per-ad banner palettes (new ones) */
body.skin-crypto .ad-banner    { background: #f9b115; color: #000;    border-color: #00d18c; font-family: "Bungee", "Fraunces", serif; }
body.skin-hotsauce .ad-banner  { background: #ff4500; color: #ffe366; border-color: #1a0a05; animation-duration: 1.8s;
                                 font-family: "Permanent Marker", "Fraunces", serif; }
body.skin-fastfood .ad-banner  { background: #d32f2f; color: #ffe55a; border-color: #5c0000; font-family: "Bowlby One", "Fraunces", serif; }
body.skin-granny .ad-banner    { background: #fff5e6; color: #5a2a14; border-color: #b92e1d; font-family: "Lobster", "Fraunces", cursive; font-style: normal; }

/* -------- Per-skin font character (banners + stickers + titles) -------- */
body.skin-drank .ad-banner       { font-family: "Bungee", "Fraunces", serif; }
body.skin-bbq .ad-banner         { font-family: "Bungee", "Fraunces", serif; }
body.skin-toothpaste .ad-banner  { font-family: "Bungee", "Fraunces", serif; font-style: italic; }
body.skin-infomercial .ad-banner { font-family: "Bowlby One", "Fraunces", serif; letter-spacing: .04em; }
body.skin-cereal .ad-banner      { font-family: "Bowlby One", "Fraunces", serif; }
body.skin-lawyer .ad-banner      { font-family: "Fraunces", serif; font-style: italic; font-weight: 400; }
body.skin-pets .ad-banner        { font-family: "Bowlby One", "Fraunces", serif; }
body.skin-tax .ad-banner         { font-family: "JetBrains Mono", monospace; font-weight: 700; }

body.skin-drank .sticker         { font-family: "Bungee", "Fraunces", serif; }
body.skin-bbq .sticker           { font-family: "Bungee", "Fraunces", serif; }
body.skin-granny .sticker        { font-family: "Lobster", "Fraunces", cursive; font-weight: 400; }
body.skin-infomercial .sticker   { font-family: "Bowlby One", "Fraunces", serif; }
body.skin-cereal .sticker        { font-family: "Bowlby One", "Fraunces", serif; }
body.skin-hotsauce .sticker      { font-family: "Permanent Marker", "Fraunces", serif; }
body.skin-pets .sticker          { font-family: "Bowlby One", "Fraunces", serif; }
body.skin-comic .sticker         { font-family: "Bungee", "Fraunces", serif; }
body.skin-crypto .sticker        { font-family: "JetBrains Mono", monospace; font-weight: 700; letter-spacing: .04em; }
body.skin-tax .sticker           { font-family: "JetBrains Mono", monospace; }

/* Module titles also pick up the skin font where it makes a strong statement */
body.skin-comic .module-title       { font-family: "Bungee", "Fraunces", serif; color: #000; }
body.skin-brutalist .module-title   { font-family: "Press Start 2P", "JetBrains Mono", monospace; font-size: 8px; letter-spacing: 0; }
body.skin-matrix .module-title      { font-family: "Press Start 2P", "JetBrains Mono", monospace; font-size: 8px; letter-spacing: .04em; }
body.skin-newsprint .module-title   { font-family: "Fraunces", serif; font-weight: 800; font-style: italic; }
body.skin-bubblegum .module-title   { font-family: "Lobster", "Fraunces", cursive; font-weight: 400; letter-spacing: .02em; font-size: 11px; }
body.skin-granny .module-title      { font-family: "Lobster", "Fraunces", cursive; font-weight: 400; letter-spacing: .02em; font-size: 11px; }
body.skin-cereal .module-title      { font-family: "Bowlby One", "Fraunces", serif; }
body.skin-fastfood .module-title    { font-family: "Bowlby One", "Fraunces", serif; }

/* ============================================================
   SHAPE + PATTERN OVERRIDES PER SKIN
   ============================================================ */

/* Hot Sauce — sharp angled corners, fiery diagonal stripes */
body.skin-hotsauce {
  --radius-cabinet: 2px;
  --radius-module: 2px;
  --radius-button: 1px;
  --radius-display: 2px;
  --cabinet-pattern: repeating-linear-gradient(135deg,
    transparent 0 24px,
    rgba(255, 69, 0, .22) 24px 48px);
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .35;
}

/* BBQ — horizontal smoky stripes + slightly sharper corners */
body.skin-bbq {
  --radius-cabinet: 4px;
  --radius-module: 3px;
  --radius-button: 2px;
  --cabinet-pattern: repeating-linear-gradient(0deg,
    transparent 0 22px,
    rgba(185, 28, 28, .14) 22px 34px);
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .65;
  --sticker-content: "WELL DONE";
  --sticker-bg: #fff056;
  --sticker-fg: #2a0a00;
  --sticker-rotation: -10deg;
}

/* Granny's Cookies — full gingham check */
body.skin-granny {
  --radius-cabinet: 14px;
  --radius-module: 10px;
  --radius-button: 6px;
  --cabinet-pattern:
    linear-gradient(rgba(185, 46, 29, .18), rgba(185, 46, 29, .18)),
    linear-gradient(90deg, transparent 50%, rgba(185, 46, 29, .14) 50%),
    linear-gradient(0deg, transparent 50%, rgba(185, 46, 29, .14) 50%);
  --cabinet-pattern-size: 100% 100%, 28px 28px, 28px 28px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .55;
  --sticker-content: "★ HOMEMADE ★";
  --sticker-bg: #b92e1d;
  --sticker-fg: #fff5e6;
  --sticker-rotation: -6deg;
}

/* DRANK — bold geometric, almost-square modules */
body.skin-drank {
  --radius-cabinet: 0px;
  --radius-module: 0px;
  --radius-button: 0px;
  --radius-display: 0px;
  --module-border-width: 2px;
  --cabinet-pattern: repeating-linear-gradient(45deg,
    transparent 0 30px,
    rgba(0, 64, 212, .18) 30px 32px);
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .75;
  --sticker-content: "0 CALORIES ¹";
  --sticker-bg: #0040d4;
  --sticker-fg: #fff056;
  --sticker-rotation: 12deg;
}

/* Sock-O-Matic — classic infomercial sunburst */
body.skin-infomercial {
  --radius-cabinet: 2px;
  --radius-module: 2px;
  --radius-button: 0px;
  --cabinet-pattern: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 255, 86, .25) 0deg 10deg,
    transparent 10deg 20deg);
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .55;
  --sticker-content: "ONLY $19.99!";
  --sticker-bg: #ff0000;
  --sticker-fg: #fff056;
  --sticker-rotation: -12deg;
}

/* Crunch-Wave Cereal — soft-bevel modules + dotty backdrop */
body.skin-cereal {
  --radius-cabinet: 18px;
  --radius-module: 12px;
  --radius-button: 6px;
  --cabinet-pattern: radial-gradient(circle at 25% 25%, rgba(230, 0, 38, .22) 0 8%, transparent 8.5%),
                     radial-gradient(circle at 75% 75%, rgba(0, 53, 128, .22) 0 8%, transparent 8.5%);
  --cabinet-pattern-size: 60px 60px, 60px 60px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .8;
  --sticker-content: "✨ FREE TOY INSIDE ✨";
  --sticker-bg: #fff056;
  --sticker-fg: #e60026;
  --sticker-rotation: -8deg;
}

/* Galaxy Toothpaste — round bubble shapes + minty sparkles */
body.skin-toothpaste {
  --radius-cabinet: 22px;
  --radius-module: 16px;
  --radius-button: 12px;
  --cabinet-pattern: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .35) 0 2.5%, transparent 3%),
                     radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .25) 0 1.5%, transparent 2%),
                     radial-gradient(circle at 40% 80%, rgba(236, 64, 122, .35) 0 1.5%, transparent 2%);
  --cabinet-pattern-size: 80px 80px, 60px 60px, 90px 90px;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .7;
  --sticker-content: "+ COSMIC FRESHNESS";
  --sticker-bg: #ec407a;
  --sticker-fg: #fff;
  --sticker-rotation: -6deg;
}

/* Lawyer — boring corporate, sharp + plain */
body.skin-lawyer {
  --radius-cabinet: 2px;
  --radius-module: 2px;
  --radius-button: 0px;
  --module-border-width: 2px;
  --module-border-style: double;
  --cabinet-pattern: none;
  --sticker-content: "® EST. 1987";
  --sticker-bg: #fbbf24;
  --sticker-fg: #0c1c33;
  --sticker-rotation: 0deg;
}

/* CryptoBro — angular sharp, pseudo-tech grid */
body.skin-crypto {
  --radius-cabinet: 0px;
  --radius-module: 0px;
  --radius-button: 0px;
  --module-border-width: 2px;
  --cabinet-pattern:
    linear-gradient(90deg, rgba(0, 209, 140, .15) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 209, 140, .15) 1px, transparent 1px);
  --cabinet-pattern-size: 24px 24px;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .9;
  --sticker-content: "↗ +420% LIFETIME";
  --sticker-bg: #00d18c;
  --sticker-fg: #000;
  --sticker-rotation: -4deg;
}

/* Fast Food — bubbly rounded shapes */
body.skin-fastfood {
  --radius-cabinet: 18px;
  --radius-module: 14px;
  --radius-button: 9px;
  --cabinet-pattern: radial-gradient(circle at 50% 50%, rgba(255, 229, 90, .25) 0 8%, transparent 8.5%);
  --cabinet-pattern-size: 80px 80px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .55;
  --sticker-content: "✓ DRIVE-THRU READY";
  --sticker-bg: #ffe55a;
  --sticker-fg: #d32f2f;
  --sticker-rotation: 8deg;
}

/* Stylistic skin shape touches (no sticker) */
body.skin-matrix      { --radius-cabinet: 0; --radius-module: 0; --radius-button: 0; --module-border-width: 1px;
  --cabinet-pattern: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,255,65,.08) 3px 4px);
  --cabinet-pattern-blend: screen; --cabinet-pattern-opacity: .8; }
body.skin-cyberpunk   { --radius-cabinet: 0; --radius-module: 1px; --radius-button: 0; --module-border-width: 1px;
  --cabinet-pattern: linear-gradient(90deg, rgba(255,0,255,.08) 1px, transparent 1px),
                     linear-gradient(0deg, rgba(0,255,255,.08) 1px, transparent 1px);
  --cabinet-pattern-size: 32px 32px; --cabinet-pattern-blend: screen; --cabinet-pattern-opacity: .9; }
body.skin-vaporwave   { --radius-cabinet: 14px; --radius-module: 10px; --radius-button: 6px;
  --cabinet-pattern: linear-gradient(180deg, rgba(255,113,206,.18) 1px, transparent 1px);
  --cabinet-pattern-size: 100% 16px; --cabinet-pattern-blend: screen; --cabinet-pattern-opacity: .55; }
body.skin-carbon      { --radius-cabinet: 4px; --radius-module: 3px; --radius-button: 1px;
  --cabinet-pattern: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.04) 4px 5px),
                     repeating-linear-gradient(-45deg, transparent 0 4px, rgba(255,255,255,.04) 4px 5px);
  --cabinet-pattern-blend: screen; --cabinet-pattern-opacity: .9; }
body.skin-gold        { --radius-cabinet: 14px; --radius-module: 10px; --radius-button: 6px; }
body.skin-sakura      { --radius-cabinet: 24px; --radius-module: 18px; --radius-button: 12px; }
body.skin-galaxy      {
  --cabinet-pattern: radial-gradient(circle at 15% 25%, #fff 0 .8px, transparent 1.2px),
                     radial-gradient(circle at 78% 15%, #fff 0 .6px, transparent 1px),
                     radial-gradient(circle at 35% 75%, #fff 0 .8px, transparent 1.2px),
                     radial-gradient(circle at 88% 65%, #fff 0 .6px, transparent 1px),
                     radial-gradient(circle at 55% 45%, #fff 0 .4px, transparent .8px);
  --cabinet-pattern-size: 220px 220px, 160px 160px, 200px 200px, 140px 140px, 100px 100px;
  --cabinet-pattern-blend: screen; --cabinet-pattern-opacity: .9; }
body.skin-pastel      { --radius-cabinet: 24px; --radius-module: 18px; --radius-button: 12px; }
body.skin-midnight    { --radius-cabinet: 6px; --radius-module: 4px; --radius-button: 2px; }

/* ============================================================
   STICKER BADGE
   ============================================================ */

.sticker {
  display: none;
  position: fixed;
  top: 48px;
  right: 24px;
  z-index: 998;
  pointer-events: none;
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 18px;
  border-radius: 50%;
  background: var(--sticker-bg);
  color: var(--sticker-fg);
  border: 3px solid var(--sticker-fg);
  box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 -3px 0 rgba(0,0,0,.12);
  transform: rotate(var(--sticker-rotation));
  text-align: center;
  min-width: 88px;
  line-height: 1.05;
  white-space: pre-line;
}
/* Promo corner-badge stickers (e.g. the crypto skin's "↗ +420% LIFETIME",
   "ONLY $19.99!", "🎰 JACKPOT", "0 CALORIES"...) are removed site-wide per
   request. The base rule already hides .sticker; this keeps it hidden even on
   skins that set --sticker-content or add their own display rule. */
.sticker { display: none !important; }

/* ============================================================
   FIVE NEW SHAPE-HEAVY SKINS
   ============================================================ */

body.skin-comic {
  --cream: #fff9e6;
  --cream-deep: #ffe566;
  --cream-shadow: #000;
  --ink: #000;
  --ink-soft: #1a1a1a;
  --oxblood: #d62828;
  --oxblood-hot: #ff3e3e;
  --brass: #0066ff;
  --brass-bright: #4d94ff;
  --brass-dark: #003e99;
  --led-on: #ffeb3b;
  --led-off: #000;
  --screen-bg: #000;
  --screen-fg: #fff;
  --screen-glow: rgba(255, 255, 255, .8);
  --radius-cabinet: 6px;
  --radius-module: 4px;
  --radius-button: 2px;
  --module-border-width: 3px;
  --cabinet-pattern: radial-gradient(circle, rgba(0,0,0,.28) 1.5px, transparent 2px);
  --cabinet-pattern-size: 12px 12px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .55;
  --sticker-content: "POW!";
  --sticker-bg: #ffeb3b;
  --sticker-fg: #d62828;
  --sticker-rotation: -14deg;
}

body.skin-brutalist {
  --cream: #d9d9d9;
  --cream-deep: #a8a8a8;
  --cream-shadow: #1a1a1a;
  --ink: #000;
  --ink-soft: #2a2a2a;
  --oxblood: #000;
  --oxblood-hot: #2a2a2a;
  --brass: #000;
  --brass-bright: #3a3a3a;
  --brass-dark: #000;
  --led-on: #ff5500;
  --led-off: #0a0a0a;
  --screen-bg: #000;
  --screen-fg: #ff5500;
  --screen-glow: rgba(255, 85, 0, .65);
  --radius-cabinet: 0;
  --radius-module: 0;
  --radius-button: 0;
  --radius-display: 0;
  --module-border-width: 3px;
  --cabinet-pattern: none;
}

body.skin-bubblegum {
  --cream: #ffd6f5;
  --cream-deep: #ff9ee5;
  --cream-shadow: #c46aa5;
  --ink: #5c0e4a;
  --ink-soft: #832472;
  --oxblood: #ff3ec9;
  --oxblood-hot: #ff66d4;
  --brass: #ff6fbf;
  --brass-bright: #ff9cd6;
  --brass-dark: #b03489;
  --led-on: #ffe566;
  --led-off: #4a0a3a;
  --screen-bg: #340424;
  --screen-fg: #ffe566;
  --screen-glow: rgba(255, 229, 102, .65);
  --radius-cabinet: 36px;
  --radius-module: 28px;
  --radius-button: 20px;
  --radius-display: 24px;
  --cabinet-pattern: radial-gradient(circle at 30% 30%, rgba(255,255,255,.3) 0 3%, transparent 3.5%);
  --cabinet-pattern-size: 90px 90px;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .55;
}

body.skin-mall {
  --cream: #f8e8c4;
  --cream-deep: #f0d9a1;
  --cream-shadow: #c79b62;
  --ink: #2c1e10;
  --ink-soft: #5a3c1a;
  --oxblood: #ff6f91;
  --oxblood-hot: #ff96b3;
  --brass: #00bfa6;
  --brass-bright: #4ddccc;
  --brass-dark: #008070;
  --led-on: #ff6f91;
  --led-off: #2c1e10;
  --screen-bg: #1a0e08;
  --screen-fg: #4ddccc;
  --screen-glow: rgba(77, 220, 204, .6);
  --radius-cabinet: 4px;
  --radius-module: 4px;
  --radius-button: 2px;
  --cabinet-pattern: repeating-linear-gradient(45deg,
    transparent 0 20px,
    rgba(255, 111, 145, .15) 20px 22px,
    transparent 22px 42px,
    rgba(0, 191, 166, .15) 42px 44px);
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .85;
}

body.skin-newsprint {
  --cream: #f2ece0;
  --cream-deep: #d8cfc0;
  --cream-shadow: #6e6457;
  --ink: #1a1410;
  --ink-soft: #3a342a;
  --oxblood: #1a1410;
  --oxblood-hot: #3a342a;
  --brass: #6e6457;
  --brass-bright: #948774;
  --brass-dark: #4a4234;
  --led-on: #1a1410;
  --led-off: #b8ad9a;
  --screen-bg: #e5dbc8;
  --screen-fg: #1a1410;
  --screen-glow: rgba(26, 20, 16, .25);
  --radius-cabinet: 0;
  --radius-module: 0;
  --radius-button: 0;
  --module-border-width: 1px;
  --cabinet-pattern: repeating-linear-gradient(0deg,
    transparent 0 4px,
    rgba(0, 0, 0, .04) 4px 5px);
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .9;
}

/* ============================================================
   TWO MORE AD SKINS
   ============================================================ */

body.skin-pets {
  --cream: #fff3d6;
  --cream-deep: #ffe199;
  --cream-shadow: #b87a14;
  --ink: #4a2a06;
  --ink-soft: #7a4a14;
  --oxblood: #c2410c;
  --oxblood-hot: #ea580c;
  --brass: #92400e;
  --brass-bright: #b85a16;
  --brass-dark: #5a2a08;
  --led-on: #ffc857;
  --led-off: #3a1e08;
  --screen-bg: #2a1408;
  --screen-fg: #ffc857;
  --screen-glow: rgba(255, 200, 87, .6);
  --radius-cabinet: 22px;
  --radius-module: 18px;
  --radius-button: 12px;
  --cabinet-pattern: radial-gradient(circle, rgba(74, 42, 6, .22) 1px, transparent 1.5px);
  --cabinet-pattern-size: 28px 28px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .6;
  --sticker-content: "🐾 100% \nGOOD BOY";
  --sticker-bg: #c2410c;
  --sticker-fg: #fff3d6;
  --sticker-rotation: -8deg;
}
body.skin-pets .ad-banner { background: #c2410c; color: #fff3d6; border-color: #4a2a06; }

body.skin-tax {
  --cream: #e6edf2;
  --cream-deep: #c4d0db;
  --cream-shadow: #5e6f7e;
  --ink: #0a1424;
  --ink-soft: #1e2c40;
  --oxblood: #1a3a6c;
  --oxblood-hot: #2c578a;
  --brass: #6b7785;
  --brass-bright: #94a1b3;
  --brass-dark: #3a4452;
  --led-on: #0a8a2e;
  --led-off: #0a1424;
  --screen-bg: #050d1a;
  --screen-fg: #0a8a2e;
  --screen-glow: rgba(10, 138, 46, .55);
  --radius-cabinet: 2px;
  --radius-module: 1px;
  --radius-button: 0;
  --module-border-width: 1px;
  --cabinet-pattern: none;
  --sticker-content: "FILE BY APR 15";
  --sticker-bg: #0a8a2e;
  --sticker-fg: #fff;
  --sticker-rotation: 0deg;
}
body.skin-tax .ad-banner { background: #1a3a6c; color: #fff; border-color: #0a8a2e; }

/* ============================================================
   CUSTOM KNOB SHAPES — per-skin
   Hides the SVG body circle and stamps a CSS shape underneath the
   indicator/arc. The indicator + arc stay drawn from the SVG so
   value readouts still work; only the visible "knob cap" changes.
   ============================================================ */

.knob { /* ensure ::before stacks correctly relative to the SVG */
  isolation: isolate;
}
.knob::before { content: none; }
body.skin-brutalist .knob .knob-body,
body.skin-drank .knob .knob-body,
body.skin-crypto .knob .knob-body,
body.skin-bubblegum .knob .knob-body,
body.skin-comic .knob .knob-body,
body.skin-toothpaste .knob .knob-body {
  opacity: 0;
}
/* shared positioning: a 26x26-ish cap centered in the 48-viewBox knob */
body.skin-brutalist .knob::before,
body.skin-drank .knob::before,
body.skin-crypto .knob::before,
body.skin-bubblegum .knob::before,
body.skin-comic .knob::before,
body.skin-toothpaste .knob::before {
  content: "";
  position: absolute;
  left: 22%; top: 22%;
  width: 56%; height: 56%;
  background: radial-gradient(circle at 30% 30%, var(--brass-bright), var(--brass) 60%, var(--brass-dark));
  border: 1px solid var(--brass-dark);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.3);
  z-index: 0;
  pointer-events: none;
}
body.skin-brutalist .knob::before { border-radius: 0; }                                              /* square */
body.skin-drank .knob::before     { border-radius: 0; transform: rotate(45deg); }                    /* diamond */
body.skin-crypto .knob::before    { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border: none; } /* hexagon */
body.skin-bubblegum .knob::before { border-radius: 40% 40% 50% 50% / 50% 50% 60% 60%; }              /* squishy */
body.skin-comic .knob::before     { border-radius: 0; border: 2.5px solid #000; }                    /* hard outlined square */
body.skin-toothpaste .knob::before { border-radius: 50%; box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -3px 4px rgba(0,0,0,.18), 0 0 8px rgba(255,255,255,.4); } /* extra shiny pill */

/* More knob shapes — round 2 */
body.skin-hospital .knob .knob-body,
body.skin-hawaii .knob .knob-body,
body.skin-pirate .knob .knob-body,
body.skin-steampunk .knob .knob-body,
body.skin-vegas .knob .knob-body,
body.skin-lava .knob .knob-body,
body.skin-tarot .knob .knob-body,
body.skin-disco .knob .knob-body,
body.skin-pizza .knob .knob-body,
body.skin-cereal .knob .knob-body,
body.skin-lemonade .knob .knob-body,
body.skin-y2k .knob .knob-body,
body.skin-mall .knob .knob-body,
body.skin-mallgoth .knob .knob-body,
body.skin-newsprint .knob .knob-body,
body.skin-bauhaus .knob .knob-body,
body.skin-fastfood .knob .knob-body,
body.skin-fourohfour .knob .knob-body { opacity: 0; }

body.skin-hospital .knob::before,
body.skin-hawaii .knob::before,
body.skin-pirate .knob::before,
body.skin-steampunk .knob::before,
body.skin-vegas .knob::before,
body.skin-lava .knob::before,
body.skin-tarot .knob::before,
body.skin-disco .knob::before,
body.skin-pizza .knob::before,
body.skin-cereal .knob::before,
body.skin-lemonade .knob::before,
body.skin-y2k .knob::before,
body.skin-mall .knob::before,
body.skin-mallgoth .knob::before,
body.skin-newsprint .knob::before,
body.skin-bauhaus .knob::before,
body.skin-fastfood .knob::before,
body.skin-fourohfour .knob::before {
  content: "";
  position: absolute;
  left: 22%; top: 22%;
  width: 56%; height: 56%;
  background: radial-gradient(circle at 30% 30%, var(--brass-bright), var(--brass) 60%, var(--brass-dark));
  border: 1px solid var(--brass-dark);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.3);
  z-index: 0;
  pointer-events: none;
}

/* Hospital — plus-sign cross */
body.skin-hospital .knob::before {
  clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%);
  background: var(--oxblood);
  border: none;
}

/* Hawaii — 6-petal flower */
body.skin-hawaii .knob::before {
  clip-path: polygon(
    50% 0%, 65% 18%, 85% 12%, 80% 32%, 100% 50%,
    80% 68%, 85% 88%, 65% 82%, 50% 100%, 35% 82%,
    15% 88%, 20% 68%, 0% 50%, 20% 32%, 15% 12%, 35% 18%
  );
  background: radial-gradient(circle, var(--oxblood) 35%, var(--brass) 36%);
  border: none;
}

/* Pirate — compass-rose 8-point star */
body.skin-pirate .knob::before {
  clip-path: polygon(50% 0, 60% 35%, 100% 50%, 60% 65%, 50% 100%, 40% 65%, 0 50%, 40% 35%);
  background: radial-gradient(circle, var(--brass-bright) 40%, var(--brass-dark) 70%);
  border: none;
}

/* Steampunk — 6-tooth gear silhouette */
body.skin-steampunk .knob::before {
  clip-path: polygon(
    50% 0, 60% 8%, 72% 4%, 76% 16%, 88% 18%, 88% 30%,
    100% 38%, 96% 50%, 100% 62%, 88% 70%, 88% 82%, 76% 84%,
    72% 96%, 60% 92%, 50% 100%, 40% 92%, 28% 96%, 24% 84%,
    12% 82%, 12% 70%, 0% 62%, 4% 50%, 0% 38%, 12% 30%,
    12% 18%, 24% 16%, 28% 4%, 40% 8%
  );
  background: radial-gradient(circle at 30% 30%, var(--brass-bright), var(--brass) 50%, var(--brass-dark) 80%);
  border: none;
}

/* Vegas — pointed star (5-point) */
body.skin-vegas .knob::before {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: radial-gradient(circle, var(--brass-bright) 30%, var(--brass-dark) 70%);
  border: none;
  box-shadow: 0 0 8px rgba(255, 216, 22, .7);
}

/* Lava — molten blob with asymmetric border-radius */
body.skin-lava .knob::before {
  border-radius: 70% 30% 60% 40% / 50% 60% 40% 50%;
  background: radial-gradient(circle at 25% 25%, #ff8c20, #ff5520 70%);
  border: none;
  animation: lavaWobble 4s ease-in-out infinite alternate;
}
@keyframes lavaWobble {
  0%   { border-radius: 70% 30% 60% 40% / 50% 60% 40% 50%; }
  100% { border-radius: 45% 55% 35% 65% / 60% 35% 65% 40%; }
}

/* Tarot — vesica piscis / pointed oval */
body.skin-tarot .knob::before {
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: radial-gradient(circle at 50% 30%, var(--brass-bright), var(--brass-dark));
  border: 1px solid var(--brass);
}

/* Disco — circular but with mirrored faceted highlights */
body.skin-disco .knob::before {
  border-radius: 50%;
  background:
    conic-gradient(from 45deg,
      rgba(255,255,255,.6),
      rgba(255,255,255,.1) 25%,
      rgba(255,255,255,.6) 50%,
      rgba(255,255,255,.1) 75%,
      rgba(255,255,255,.6));
  border: 1px solid var(--brass-dark);
}

/* Pizza — circular but slightly clipped like a slice missing */
body.skin-pizza .knob::before {
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 50% 60%, 40% 100%, 0 100%);
  background: radial-gradient(circle, var(--led-on), var(--brass-dark));
  border: none;
}

/* Cereal — hexagon (like cereal pieces) */
body.skin-cereal .knob::before {
  clip-path: polygon(50% 5%, 95% 28%, 95% 72%, 50% 95%, 5% 72%, 5% 28%);
  border: none;
}

/* Lemonade — circle with double-dashed outline (crayon look) */
body.skin-lemonade .knob::before {
  border-radius: 50%;
  border: 2px dashed var(--ink);
}

/* Y2K — chrome pill with extra shine highlight */
body.skin-y2k .knob::before {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.9) 0 10%, transparent 25%),
    radial-gradient(circle at 30% 30%, var(--brass-bright), var(--brass) 60%, var(--brass-dark));
  border: 1px solid var(--brass-dark);
}

/* 80s Mall — circle with diagonal bisecting "racing stripe" */
body.skin-mall .knob::before {
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 45%, rgba(255,255,255,.6) 45% 55%, transparent 55%),
    radial-gradient(circle, var(--brass-bright), var(--brass-dark) 80%);
  border: 1px solid var(--brass-dark);
}

/* Mall Goth — black square inset like a goth ring */
body.skin-mallgoth .knob::before {
  border-radius: 0;
  background: linear-gradient(135deg, #000 0 50%, var(--oxblood) 50%);
  border: 1.5px solid var(--brass);
}

/* Newsprint — flat circle (looks like printed dot) */
body.skin-newsprint .knob::before {
  border-radius: 50%;
  background: var(--ink);
  border: none;
  box-shadow: none;
}

/* Bauhaus — perfect primary color circle */
body.skin-bauhaus .knob::before {
  border-radius: 50%;
  background: var(--oxblood);
  border: 2px solid #000;
}

/* Fast Food — burger-stack: bun + patty stripes */
body.skin-fastfood .knob::before {
  border-radius: 40% 40% 50% 50% / 60% 60% 50% 50%;
  background:
    linear-gradient(180deg,
      var(--brass-bright) 0 30%,
      var(--oxblood) 30% 55%,
      #5c0000 55% 65%,
      var(--brass-bright) 65% 100%);
  border: 1px solid var(--brass-dark);
}

/* 404 — pixel block / corrupted square */
body.skin-fourohfour .knob::before {
  border-radius: 0;
  background:
    linear-gradient(180deg, #ff0080 0 50%, #00ff80 50% 100%);
  border: 1px solid #000;
  animation: glitchKnob 0.4s steps(2, end) infinite;
}
@keyframes glitchKnob {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(1px, -1px); }
}

/* ============================================================
   WAVE-BUTTON SHAPE VARIATIONS
   ============================================================ */

/* Bubblegum — pill buttons */
body.skin-bubblegum .wave-btn,
body.skin-y2k .wave-btn { border-radius: 999px; }

/* Brutalist — extra-hard square */
body.skin-brutalist .wave-btn { border-radius: 0; border-width: 2px; }

/* Comic — outlined with chunky shadow */
body.skin-comic .wave-btn { border-radius: 4px; border-width: 2px; box-shadow: 2px 2px 0 #000, inset 0 1px 2px rgba(0,0,0,.6); }

/* Steampunk — pill with rivet edges */
body.skin-steampunk .wave-btn { border-radius: 999px; border-width: 2px; }

/* Pizza — slice-shaped clip-path for each button */
body.skin-pizza .wave-btn { clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); }

/* Mall Goth — sharp pointed sides */
body.skin-mallgoth .wave-btn { clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }

/* Hot Sauce — torn-paper bottom edge */
body.skin-hotsauce .wave-btn {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 92% 100%, 76% 85%, 60% 100%, 44% 85%, 28% 100%, 12% 85%, 0 100%);
}

/* Vegas — diamond clip */
body.skin-vegas .wave-btn { clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); }

/* Lemonade — wavy cloud-like edges */
body.skin-lemonade .wave-btn { border-radius: 12px 4px 12px 4px / 4px 12px 4px 12px; }

/* Newsprint — sharp rect like newspaper ads */
body.skin-newsprint .wave-btn { border-radius: 0; }

/* 404 — sharp glitch rects */
body.skin-fourohfour .wave-btn { border-radius: 0; border: 1px dashed #ff0080; }

/* ============================================================
   KEYBOARD KEY SHAPE VARIATIONS
   ============================================================ */

/* Brutalist — flat slab keys */
body.skin-brutalist .key.white { border-radius: 0; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
body.skin-brutalist .key.black { border-radius: 0; }

/* Bubblegum — pillowy rounded keys */
body.skin-bubblegum .key.white { border-radius: 0 0 14px 14px; }
body.skin-bubblegum .key.black { border-radius: 0 0 10px 10px; }

/* Y2K — chrome capsule keys */
body.skin-y2k .key.white {
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #fff 0%, #c8d8ff 40%, #a2b8ff 100%);
}

/* Cyberpunk — flat black keys with neon edge glow */
body.skin-cyberpunk .key.white { border-radius: 0; box-shadow: inset 0 -3px 0 rgba(255,0,255,.4); }

/* Comic — outlined keys with chunky inner shadow */
body.skin-comic .key.white { border-radius: 0 0 4px 4px; border: 2px solid #000; }
body.skin-comic .key.black { border: 2px solid #000; }

/* Vegas — keys glow from inside */
body.skin-vegas .key.white { box-shadow: inset 0 -4px 0 rgba(255,216,22,.4), 0 0 8px rgba(255,216,22,.2); }

/* Lava — softly molten keys */
body.skin-lava .key.white { border-radius: 0 0 16px 16px; }
body.skin-lava .key.black { border-radius: 0 0 8px 8px; }

/* Lemonade — dashed-outlined keys */
body.skin-lemonade .key.white { border: 2px dashed var(--ink); border-radius: 0 0 6px 6px; }

/* 404 — flickering keys */
body.skin-fourohfour .key.white { border-radius: 0; animation: glitchShift 0.6s steps(2, end) infinite; }

/* Hospital — keys feel sterile and clean */
body.skin-hospital .key.white { box-shadow: inset 0 -2px 0 rgba(2,176,112,.2); }

/* Pirate — wood-grain keys */
body.skin-pirate .key.white {
  background: linear-gradient(180deg, #c5a374 0%, #a08456 60%, #836940 100%);
  color: #2a1808;
}

/* ============================================================
   KNOB INDICATOR VARIATIONS — the little tick that shows value
   ============================================================ */

/* Default indicator is the SVG line. We replace its appearance per skin
   using stroke styles and pseudo-elements layered above the body. */

/* Brutalist — thicker indicator, no rounding */
body.skin-brutalist .knob .knob-indicator { stroke-width: 4; stroke-linecap: butt; stroke: #000; }

/* Comic — thick black indicator (cartoon-bold) */
body.skin-comic .knob .knob-indicator { stroke-width: 4; stroke: #000; stroke-linecap: butt; }

/* Bubblegum — soft round dot (achieved by making the line very short + thick) */
body.skin-bubblegum .knob .knob-indicator { stroke-width: 5; stroke-linecap: round; stroke: var(--ink); }

/* CryptoBro — green terminal indicator */
body.skin-crypto .knob .knob-indicator { stroke: #00d18c; stroke-width: 3; }

/* Vegas — glowing yellow indicator */
body.skin-vegas .knob .knob-indicator { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(255,216,22,.9)); }

/* Disco — pure white indicator with halo */
body.skin-disco .knob .knob-indicator { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }

/* Lava — orange glowing indicator */
body.skin-lava .knob .knob-indicator { stroke: #fff056; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(255,85,32,.9)); }

/* Hot Sauce — flame-orange chunky */
body.skin-hotsauce .knob .knob-indicator { stroke: #ffe366; stroke-width: 4; stroke-linecap: round; }

/* Matrix — green pixel-like indicator */
body.skin-matrix .knob .knob-indicator { stroke: #00ff41; stroke-width: 3; stroke-linecap: butt; filter: drop-shadow(0 0 3px rgba(0,255,65,.8)); }

/* Cyberpunk — magenta glow indicator */
body.skin-cyberpunk .knob .knob-indicator { stroke: #00ffff; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(255,0,255,.8)); }

/* Vaporwave — magenta */
body.skin-vaporwave .knob .knob-indicator { stroke: #ff71ce; stroke-width: 3; }

/* Hospital — clinical red indicator (like a temperature gauge) */
body.skin-hospital .knob .knob-indicator { stroke: #ff3344; stroke-width: 3; stroke-linecap: round; }

/* Hawaii — bright yellow sun-ray indicator */
body.skin-hawaii .knob .knob-indicator { stroke: #fff056; stroke-width: 3; stroke-linecap: round; }

/* Pirate — pitch-black "compass needle" indicator */
body.skin-pirate .knob .knob-indicator { stroke: #2a1808; stroke-width: 3.5; stroke-linecap: butt; }

/* Tarot — gold mystical indicator */
body.skin-tarot .knob .knob-indicator { stroke: #f0d8a0; stroke-width: 2.5; filter: drop-shadow(0 0 3px rgba(212,175,55,.7)); }

/* Newsprint — ink-black thin line */
body.skin-newsprint .knob .knob-indicator { stroke: #1a1410; stroke-width: 2.5; }

/* 404 — pink/green double-stroke glitch indicator */
body.skin-fourohfour .knob .knob-indicator { stroke: #ff0080; stroke-width: 3; filter: drop-shadow(1px 0 0 #00ff80); }

/* Pizza — pizza topping (red) indicator */
body.skin-pizza .knob .knob-indicator { stroke: #c4101c; stroke-width: 3.5; stroke-linecap: round; }

/* Bauhaus — bold ink-black indicator */
body.skin-bauhaus .knob .knob-indicator { stroke: #000; stroke-width: 4; stroke-linecap: butt; }

/* ============================================================
   LCD DISPLAY (topbar screen) — per-skin font + glow color
   ============================================================ */

body.skin-matrix .display       { font-family: "Press Start 2P", monospace; }
body.skin-matrix .display-value { font-size: 10px; }
body.skin-matrix .display-label { font-size: 6px; }

body.skin-brutalist .display       { font-family: "Press Start 2P", monospace; }
body.skin-brutalist .display-value { font-size: 10px; }

body.skin-fourohfour .display       { font-family: "Press Start 2P", monospace; animation: glitchShift .4s steps(2,end) infinite; }
body.skin-fourohfour .display-value { font-size: 10px; }

body.skin-bubblegum .display-value { font-family: "Lobster", "JetBrains Mono", monospace; letter-spacing: .02em; font-size: 14px; text-transform: none; }
body.skin-granny .display-value    { font-family: "Lobster", "JetBrains Mono", monospace; font-size: 14px; text-transform: none; }
body.skin-newsprint .display-value { font-family: "Fraunces", serif; font-weight: 800; font-style: italic; }
body.skin-bbq .display-value       { font-family: "Bungee", "JetBrains Mono", monospace; }
body.skin-vegas .display-value     { font-family: "Bungee", "JetBrains Mono", monospace; text-shadow: 0 0 12px rgba(255,216,22,1); }
body.skin-tarot .display-value     { font-family: "Fraunces", serif; font-style: italic; font-weight: 800; }
body.skin-comic .display-value     { font-family: "Bungee", "JetBrains Mono", monospace; }
body.skin-lemonade .display-value  { font-family: "Permanent Marker", "JetBrains Mono", monospace; text-transform: none; }
body.skin-office .display-value    { letter-spacing: .02em; font-weight: 700; }

/* (Infomercial marquee removed alongside the ad banner.) */

/* Slight extra polish: pulse the LEDs more aggressively on certain skins */
body.skin-infomercial .wave-btn.active { animation: ledFlash .8s ease-in-out infinite; }
body.skin-drank .wave-btn.active       { animation: ledFlash 1.2s ease-in-out infinite; }
@keyframes ledFlash {
  0%,100% { box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 0 8px rgba(255, 181, 71, .35); }
  50%     { box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 0 16px rgba(255, 181, 71, .85); }
}

/* (Removed: persistent ambient falling-emoji particles. The SKIN_PARTICLES
   set is now used only for the one-shot confetti burst on skin change.) */

/* ============================================================
   CUSTOM CURSORS PER SKIN — uses inline SVG data URIs so no extra
   network requests. 32px size with 4px hotspot.
   ============================================================ */
body.skin-pets {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>🐾</text></svg>") 8 24, pointer;
}
body.skin-crypto {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>🚀</text></svg>") 8 24, pointer;
}
body.skin-bbq {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>🔥</text></svg>") 8 24, pointer;
}
body.skin-hotsauce {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>🌶️</text></svg>") 8 24, pointer;
}
body.skin-granny {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>🍪</text></svg>") 8 24, pointer;
}
body.skin-cereal {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>🥣</text></svg>") 8 24, pointer;
}
body.skin-fastfood {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>🍟</text></svg>") 8 24, pointer;
}
body.skin-toothpaste {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>✨</text></svg>") 8 24, pointer;
}
body.skin-drank {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>⚡</text></svg>") 8 24, pointer;
}
body.skin-infomercial {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>📞</text></svg>") 8 24, pointer;
}
body.skin-galaxy {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22'>⭐</text></svg>") 8 24, pointer;
}
body.skin-matrix {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><text x='4' y='24' font-size='22' fill='%2300ff41'>▮</text></svg>") 8 24, crosshair;
}

/* ============================================================
   FOUR MORE SKINS
   ============================================================ */

body.skin-pirate {
  --cream: #d8c089;
  --cream-deep: #b89a5a;
  --cream-shadow: #6e542b;
  --ink: #2a1808;
  --ink-soft: #4a3014;
  --oxblood: #8b1414;
  --oxblood-hot: #c43c1c;
  --brass: #8b5a14;
  --brass-bright: #c08a3a;
  --brass-dark: #5a3a08;
  --led-on: #ffd84a;
  --led-off: #2a1a04;
  --screen-bg: #1a0f04;
  --screen-fg: #ffd84a;
  --screen-glow: rgba(255, 216, 74, .55);
  --radius-cabinet: 4px;
  --radius-module: 3px;
  --radius-button: 2px;
  --cabinet-pattern: radial-gradient(circle at 30% 25%, rgba(110,84,43,.25) 0 14%, transparent 15%),
                     radial-gradient(circle at 75% 65%, rgba(110,84,43,.22) 0 12%, transparent 13%);
  --cabinet-pattern-size: 200px 200px, 240px 240px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .8;
}

body.skin-steampunk {
  --cream: #5a4830;
  --cream-deep: #3e2f1c;
  --cream-shadow: #261a0c;
  --ink: #f0d68a;
  --ink-soft: #c2a04a;
  --oxblood: #8a5418;
  --oxblood-hot: #b06820;
  --brass: #d4a050;
  --brass-bright: #f0c878;
  --brass-dark: #82602e;
  --led-on: #ffd84a;
  --led-off: #1f1606;
  --screen-bg: #14100a;
  --screen-fg: #d4a050;
  --screen-glow: rgba(212, 160, 80, .6);
  --radius-cabinet: 12px;
  --radius-module: 8px;
  --radius-button: 4px;
  --cabinet-pattern: radial-gradient(circle, rgba(212,160,80,.18) 0 2px, transparent 3px);
  --cabinet-pattern-size: 20px 20px;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .7;
}

body.skin-y2k {
  --cream: #c8d8ff;
  --cream-deep: #a2b8ff;
  --cream-shadow: #5870c0;
  --ink: #0a1438;
  --ink-soft: #1a2858;
  --oxblood: #6a3aff;
  --oxblood-hot: #8a5cff;
  --brass: #00d4ff;
  --brass-bright: #4de1ff;
  --brass-dark: #008aa0;
  --led-on: #ff80ff;
  --led-off: #0a1438;
  --screen-bg: #050a1e;
  --screen-fg: #80f0ff;
  --screen-glow: rgba(128, 240, 255, .7);
  --radius-cabinet: 18px;
  --radius-module: 14px;
  --radius-button: 9px;
  --cabinet-pattern: linear-gradient(135deg, rgba(255,128,255,.15) 0%, rgba(0,212,255,.15) 50%, rgba(106,58,255,.15) 100%);
  --cabinet-pattern-size: 100% 100%;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .85;
}

body.skin-hospital {
  --cream: #f4f8fa;
  --cream-deep: #dde6eb;
  --cream-shadow: #8a9aa5;
  --ink: #0a2e3a;
  --ink-soft: #1d4555;
  --oxblood: #008f5a;
  --oxblood-hot: #02b070;
  --brass: #a5b5bf;
  --brass-bright: #c5d3dc;
  --brass-dark: #5a6b75;
  --led-on: #ff3344;
  --led-off: #0a2e3a;
  --screen-bg: #050f14;
  --screen-fg: #02b070;
  --screen-glow: rgba(2, 176, 112, .55);
  --radius-cabinet: 6px;
  --radius-module: 4px;
  --radius-button: 1px;
  --module-border-width: 1px;
  --cabinet-pattern: linear-gradient(90deg, transparent 0 50%, rgba(0,143,90,.06) 50% 100%);
  --cabinet-pattern-size: 8px 8px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .9;
}

/* ============================================================
   SECTION HEADERS IN SKINS MODAL
   ============================================================ */
.skin-section-title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--oxblood);
  text-transform: uppercase;
  padding: 6px 2px 2px;
  border-bottom: 1px dashed var(--cream-shadow);
  margin-top: 4px;
}
.skin-section-title:first-child { margin-top: 0; }

/* ============================================================
   SIX MORE SKINS (round 3)
   ============================================================ */

/* Pizza Box — red+white checks, oily transparent vibe */
body.skin-pizza {
  --cream: #fff5dd;
  --cream-deep: #f0d8a0;
  --cream-shadow: #8a5a14;
  --ink: #2a0a00;
  --ink-soft: #5a1a08;
  --oxblood: #c4101c;
  --oxblood-hot: #e62e3a;
  --brass: #2d8a2d;
  --brass-bright: #4ab04a;
  --brass-dark: #1a5a1a;
  --led-on: #ffd816;
  --led-off: #2a0a00;
  --screen-bg: #1a0500;
  --screen-fg: #ffd816;
  --screen-glow: rgba(255, 216, 22, .6);
  --radius-cabinet: 6px;
  --radius-module: 4px;
  --radius-button: 2px;
  --cabinet-pattern:
    linear-gradient(45deg, rgba(196,16,28,.22) 25%, transparent 25%, transparent 50%,
                    rgba(196,16,28,.22) 50%, rgba(196,16,28,.22) 75%, transparent 75%);
  --cabinet-pattern-size: 28px 28px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .65;
  --sticker-content: "🍕 EXTRA \nCHEESE";
  --sticker-bg: #c4101c;
  --sticker-fg: #fff5dd;
  --sticker-rotation: -8deg;
}
body.skin-pizza .ad-banner { background: #c4101c; color: #ffd816; border-color: #2d8a2d;
                              font-family: "Bowlby One", "Fraunces", serif; }

/* Lava Lamp — psychedelic 70s, animated blob shapes */
body.skin-lava {
  --cream: #2a0c1e;
  --cream-deep: #1a0510;
  --cream-shadow: #5a1c40;
  --ink: #ffd6a0;
  --ink-soft: #ffab66;
  --oxblood: #ff5520;
  --oxblood-hot: #ff7a4a;
  --brass: #ff8c20;
  --brass-bright: #ffb050;
  --brass-dark: #b85410;
  --led-on: #ff5520;
  --led-off: #2a0c1e;
  --screen-bg: #170609;
  --screen-fg: #ff8c20;
  --screen-glow: rgba(255, 140, 32, .7);
  --radius-cabinet: 24px;
  --radius-module: 18px;
  --radius-button: 12px;
  --cabinet-pattern: radial-gradient(ellipse at 20% 30%, rgba(255,85,32,.35) 0 8%, transparent 12%),
                     radial-gradient(ellipse at 70% 70%, rgba(255,85,32,.3) 0 10%, transparent 14%),
                     radial-gradient(ellipse at 45% 90%, rgba(255,140,32,.3) 0 6%, transparent 10%),
                     radial-gradient(ellipse at 85% 25%, rgba(255,85,32,.25) 0 7%, transparent 11%);
  --cabinet-pattern-size: 100% 100%;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .85;
  animation: lavaBob 18s ease-in-out infinite alternate;
}
@keyframes lavaBob {
  0%   { --cabinet-pattern-blend: screen; filter: hue-rotate(0deg); }
  50%  { filter: hue-rotate(15deg); }
  100% { filter: hue-rotate(-10deg); }
}

/* Vegas Sign — flashing lightbulb border, neon glow */
body.skin-vegas {
  --cream: #1a0a2e;
  --cream-deep: #0a0518;
  --cream-shadow: #4d1a8a;
  --ink: #ffd816;
  --ink-soft: #ffab66;
  --oxblood: #ff1a8c;
  --oxblood-hot: #ff5cb0;
  --brass: #ffd816;
  --brass-bright: #fff075;
  --brass-dark: #b89010;
  --led-on: #ffd816;
  --led-off: #1a0a2e;
  --screen-bg: #0a0518;
  --screen-fg: #ffd816;
  --screen-glow: rgba(255, 216, 22, .9);
  --radius-cabinet: 8px;
  --radius-module: 5px;
  --radius-button: 3px;
  --cabinet-pattern: radial-gradient(circle, rgba(255, 216, 22, .9) 1px, transparent 2.5px);
  --cabinet-pattern-size: 18px 18px;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .55;
  --sticker-content: "🎰 JACKPOT";
  --sticker-bg: #ffd816;
  --sticker-fg: #ff1a8c;
  --sticker-rotation: -12deg;
}
body.skin-vegas .ad-banner { background: #ff1a8c; color: #ffd816; border-color: #1a0a2e;
                              font-family: "Bungee", "Fraunces", serif;
                              text-shadow: 0 0 8px rgba(255,216,22,.9); }
body.skin-vegas .sticker { font-family: "Bungee", "Fraunces", serif;
                            box-shadow: 0 0 16px rgba(255,216,22,.8), 0 6px 16px rgba(0,0,0,.5); }

/* Hawaiian Shirt — bright tropical pattern (palm tones) */
body.skin-hawaii {
  --cream: #d8f5e8;
  --cream-deep: #a0e0c8;
  --cream-shadow: #4a8a6a;
  --ink: #0e3a2a;
  --ink-soft: #1a5840;
  --oxblood: #ff5a8c;
  --oxblood-hot: #ff80a8;
  --brass: #ff8c20;
  --brass-bright: #ffb050;
  --brass-dark: #b85410;
  --led-on: #fff056;
  --led-off: #0e3a2a;
  --screen-bg: #052418;
  --screen-fg: #fff056;
  --screen-glow: rgba(255, 240, 86, .65);
  --radius-cabinet: 14px;
  --radius-module: 10px;
  --radius-button: 6px;
  --cabinet-pattern: radial-gradient(ellipse 18px 8px at 25% 20%, rgba(255,90,140,.4) 0 60%, transparent 65%),
                     radial-gradient(ellipse 18px 8px at 75% 75%, rgba(255,140,32,.4) 0 60%, transparent 65%),
                     radial-gradient(circle 12px at 50% 50%, rgba(14,58,42,.25) 0 40%, transparent 45%);
  --cabinet-pattern-size: 120px 120px, 140px 140px, 80px 80px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .65;
  --sticker-content: "🌺 ALOHA";
  --sticker-bg: #ff5a8c;
  --sticker-fg: #fff056;
  --sticker-rotation: -6deg;
}
body.skin-hawaii .ad-banner { background: #ff5a8c; color: #fff056; border-color: #0e3a2a;
                               font-family: "Lobster", "Fraunces", cursive; font-style: normal; }
body.skin-hawaii .sticker { font-family: "Lobster", "Fraunces", cursive; font-weight: 400; }

/* Mall Goth — black + hot pink, spider-web cabinet */
body.skin-mallgoth {
  --cream: #1a0a14;
  --cream-deep: #0a0408;
  --cream-shadow: #4d1a3a;
  --ink: #ff66cc;
  --ink-soft: #c44d99;
  --oxblood: #ff1a8c;
  --oxblood-hot: #ff5cb0;
  --brass: #ff66cc;
  --brass-bright: #ff9adb;
  --brass-dark: #a02e7a;
  --led-on: #ff66cc;
  --led-off: #0a0408;
  --screen-bg: #050204;
  --screen-fg: #ff66cc;
  --screen-glow: rgba(255, 102, 204, .65);
  --radius-cabinet: 0;
  --radius-module: 1px;
  --radius-button: 0;
  --module-border-width: 2px;
  --cabinet-pattern: repeating-linear-gradient(45deg, transparent 0 28px, rgba(255,102,204,.06) 28px 30px),
                     repeating-linear-gradient(-45deg, transparent 0 28px, rgba(255,102,204,.06) 28px 30px);
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .9;
}

/* Lemonade Stand — crayon palette, ad */
body.skin-lemonade {
  --cream: #fff5b8;
  --cream-deep: #ffe066;
  --cream-shadow: #b8881a;
  --ink: #2a1e08;
  --ink-soft: #5a3a14;
  --oxblood: #ff5566;
  --oxblood-hot: #ff7a88;
  --brass: #4ab800;
  --brass-bright: #6dd620;
  --brass-dark: #2a7a00;
  --led-on: #fff056;
  --led-off: #3a2a08;
  --screen-bg: #2a1e08;
  --screen-fg: #fff056;
  --screen-glow: rgba(255, 240, 86, .6);
  --radius-cabinet: 18px;
  --radius-module: 14px;
  --radius-button: 9px;
  --module-border-width: 2px;
  --module-border-style: dashed;
  --cabinet-pattern: linear-gradient(135deg, rgba(255,85,102,.16) 0 50%, transparent 50%),
                     linear-gradient(45deg, rgba(74,184,0,.16) 0 50%, transparent 50%);
  --cabinet-pattern-size: 40px 40px, 40px 40px;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .6;
  --sticker-content: "🍋 25¢ \nA CUP";
  --sticker-bg: #fff056;
  --sticker-fg: #ff5566;
  --sticker-rotation: -10deg;
}
body.skin-lemonade .ad-banner { background: #ff5566; color: #fff056; border-color: #2a7a00;
                                 font-family: "Permanent Marker", "Fraunces", cursive; font-style: normal; }
body.skin-lemonade .sticker { font-family: "Permanent Marker", "Fraunces", cursive; }
body.skin-lemonade .module-title { font-family: "Permanent Marker", "Fraunces", cursive; font-weight: 400; }

/* ============================================================
   CRT SCANLINE JITTER — extra retro polish for matrix/cyberpunk/vaporwave
   ============================================================ */
body.skin-matrix .cabinet::before,
body.skin-cyberpunk .cabinet::before,
body.skin-vaporwave .cabinet::before,
body.skin-vegas .cabinet::before {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.18) 0 1px,
      transparent 1px 3px);
  opacity: .55;
  mix-blend-mode: multiply;
  animation: crtJitter 6s steps(40, end) infinite;
}
@keyframes crtJitter {
  0%, 100% { transform: translateY(0); }
  10%      { transform: translateY(-1px); }
  20%      { transform: translateY(0.5px); }
  30%      { transform: translateY(0); }
  60%      { transform: translateY(-0.5px); }
  80%      { transform: translateY(0.3px); }
}

/* ============================================================
   PER-SKIN LAYOUT OVERRIDES
   Different grids, gaps, shadows, button shapes, keyboard variants —
   so each skin doesn't just *recolor* the synth, it rearranges it.
   ============================================================ */

/* Brutalist: dense 7-col grid, zero gap, hard shadows */
body.skin-brutalist .modules { grid-template-columns: repeat(7, 1fr); gap: 0; }
body.skin-brutalist .module {
  border-radius: 0;
  box-shadow: 4px 4px 0 #000;
  border-width: 2px;
}
body.skin-brutalist .keyboard { border-radius: 0; border-width: 0; box-shadow: 4px 4px 0 #000; }

/* Comic Book: chunky drop shadows + thick borders + halftone gaps */
body.skin-comic .module {
  box-shadow: 4px 4px 0 #000, inset 0 0 0 1px rgba(255,255,255,.4);
  border: 3px solid #000;
}
body.skin-comic .btn,
body.skin-comic .wave-btn { box-shadow: 2px 2px 0 #000; border: 2px solid #000; }
body.skin-comic .keyboard { border: 4px solid #000; box-shadow: 6px 6px 0 #000; }

/* Bubblegum: extra-wide gaps + pillowy padding */
body.skin-bubblegum .modules { gap: 12px; }
body.skin-bubblegum .module { padding: 10px 12px 12px; box-shadow: 0 6px 14px rgba(255, 62, 201, .18); }
body.skin-bubblegum .keyboard { border-radius: 20px; }

/* Newsprint: 7-column tight columnar grid */
body.skin-newsprint .modules { grid-template-columns: repeat(7, 1fr); gap: 0; }
body.skin-newsprint .module {
  border-radius: 0;
  border: 1px solid var(--ink);
  border-right: none;
  box-shadow: none;
}
body.skin-newsprint .module:last-child,
body.skin-newsprint .module-full,
body.skin-newsprint .module-wide,
body.skin-newsprint .module-wide-2 { border-right: 1px solid var(--ink); }

/* Y2K: chrome bevel — beveled border on modules, capsule keyboard */
body.skin-y2k .module {
  background: linear-gradient(180deg, var(--cream), var(--cream-deep) 60%, var(--cream-shadow));
  box-shadow: 0 4px 0 rgba(106, 58, 255, .4), inset 0 1px 0 rgba(255,255,255,.55);
}
body.skin-y2k .btn,
body.skin-y2k .wave-btn {
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 rgba(106,58,255,.4);
}
body.skin-y2k .keyboard { border-radius: 22px; box-shadow: 0 6px 0 rgba(106, 58, 255, .3), inset 0 4px 8px rgba(0,0,0,.6); }

/* Mall Goth: tight grid, jagged border patterns */
body.skin-mallgoth .modules { gap: 2px; }
body.skin-mallgoth .module {
  border-style: dashed;
  border-color: var(--brass);
  box-shadow: 0 0 12px rgba(255, 102, 204, .15);
}

/* Vegas: glowing module bevels (like backlit signs) */
body.skin-vegas .module {
  box-shadow:
    0 0 14px rgba(255, 216, 22, .25),
    inset 0 1px 0 rgba(255, 216, 22, .3);
  border-color: var(--led-on);
}
body.skin-vegas .wave-btn.active { box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 0 12px rgba(255, 216, 22, .8); }

/* Hospital: extremely flat, single-pixel borders, no shadow */
body.skin-hospital .module { box-shadow: none; }
body.skin-hospital .modules { gap: 4px; }
body.skin-hospital .keyboard { border-width: 1px; box-shadow: none; }

/* Pirate: parchment-edged modules with torn-paper feel */
body.skin-pirate .module {
  box-shadow:
    inset 0 0 12px rgba(110, 84, 43, .35),
    0 2px 6px rgba(42, 24, 8, .35);
  border-style: ridge;
  border-width: 2px;
}

/* Steampunk: heavy rivets in corners via radial gradients */
body.skin-steampunk .module::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background:
    radial-gradient(circle 3px at 4px 4px,            rgba(212, 160, 80, .9) 0 2px, transparent 2.5px),
    radial-gradient(circle 3px at calc(100% - 4px) 4px, rgba(212, 160, 80, .9) 0 2px, transparent 2.5px),
    radial-gradient(circle 3px at 4px calc(100% - 4px), rgba(212, 160, 80, .9) 0 2px, transparent 2.5px),
    radial-gradient(circle 3px at calc(100% - 4px) calc(100% - 4px), rgba(212, 160, 80, .9) 0 2px, transparent 2.5px);
}
body.skin-steampunk .btn,
body.skin-steampunk .wave-btn { border-radius: 999px; }

/* Pizza: greasy uneven module shadows */
body.skin-pizza .module {
  box-shadow: 0 4px 8px rgba(196, 16, 28, .25), inset 0 -2px 4px rgba(0,0,0,.15);
}

/* Lava: organic blob padding + soft outlines */
body.skin-lava .module {
  border: 2px solid var(--oxblood);
  border-radius: 20px 22px 18px 24px / 24px 18px 22px 20px; /* asymmetric blob */
  box-shadow: 0 0 28px rgba(255, 85, 32, .25);
}
body.skin-lava .keyboard { border-radius: 30px 28px 32px 26px / 26px 32px 28px 30px; }

/* Hawaii: rounded floral modules, slight tilt accent */
body.skin-hawaii .module { box-shadow: 0 4px 12px rgba(14, 58, 42, .2); }
body.skin-hawaii .keyboard { border-radius: 14px; }

/* Lemonade: crayon-dashed everywhere */
body.skin-lemonade .module { border-style: dashed; border-width: 2.5px; }
body.skin-lemonade .keyboard { border-style: dashed; border-width: 3px; border-radius: 14px; }

/* DRANK: pure grid, no rounding, "cassette tape" cropped corners */
body.skin-drank .modules { gap: 3px; }
body.skin-drank .module { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

/* Cyberpunk: glowing edge highlights */
body.skin-cyberpunk .module { box-shadow: 0 0 8px rgba(255, 0, 255, .25), inset 0 0 1px rgba(0, 255, 255, .4); }
body.skin-cyberpunk .keyboard { box-shadow: 0 0 18px rgba(255, 0, 255, .3), inset 0 4px 8px rgba(0,0,0,.6); }

/* Tax: ultra-corporate gray lines, no shadows */
body.skin-tax .module { box-shadow: none; background: var(--cream); }
body.skin-tax .modules { gap: 1px; }

/* CryptoBro: terminal-style green border, monospace already inherits */
body.skin-crypto .module { box-shadow: inset 0 0 12px rgba(0, 209, 140, .12); }

/* Forest: subtle natural shadow */
body.skin-forest .module { box-shadow: 0 3px 8px rgba(20, 24, 10, .15), inset 0 1px 0 rgba(255,255,255,.5); }

/* Mall (80s): pastel hair-thin double border */
body.skin-mall .module { border-style: double; border-width: 4px; }

/* Preview swatches for the new skins */
.skin-preview.p-pizza     { background: linear-gradient(180deg, #fff5dd, #c4101c 60%, #2d8a2d),
                                       repeating-linear-gradient(45deg, transparent 0 10px, rgba(196,16,28,.2) 10px 20px); }
.skin-preview.p-lava      { background: radial-gradient(ellipse at 30% 40%, #ff5520 0 30%, transparent 35%),
                                       radial-gradient(ellipse at 70% 70%, #ff8c20 0 25%, transparent 30%),
                                       linear-gradient(180deg, #2a0c1e, #1a0510); }
.skin-preview.p-vegas     { background: radial-gradient(circle, #ffd816 1px, transparent 2px) 0 0 / 10px 10px,
                                       linear-gradient(180deg, #1a0a2e, #ff1a8c 60%, #ffd816); }
.skin-preview.p-hawaii    { background: linear-gradient(180deg, #d8f5e8, #ff5a8c 55%, #ff8c20); }
.skin-preview.p-mallgoth  { background: linear-gradient(180deg, #0a0408, #ff1a8c 60%, #ff66cc); }
.skin-preview.p-lemonade  { background: linear-gradient(180deg, #fff5b8, #ff5566 55%, #4ab800); }

/* ============================================================
   ANIMATED CABINET BACKGROUNDS PER SKIN
   The cabinet::after pseudo gets animated via skin-specific
   keyframes — slow pulses, glints, drift — for living wallpaper.
   ============================================================ */

/* Lava Lamp: blobs slowly bob */
body.skin-lava .cabinet::after {
  animation: lavaBlobs 12s ease-in-out infinite alternate;
}
@keyframes lavaBlobs {
  0%   { background-position: 0% 0%,  50% 50%, 100% 100%, 75% 25%; }
  50%  { background-position: 10% 30%, 40% 70%, 90% 80%, 60% 35%; }
  100% { background-position: 5% 60%,  55% 30%, 80% 100%, 65% 15%; }
}

/* Vegas: lightbulb-flicker via opacity oscillation */
body.skin-vegas .cabinet::after {
  animation: vegasFlicker 1.6s ease-in-out infinite;
}
@keyframes vegasFlicker {
  0%, 100% { opacity: .55; }
  35%      { opacity: .25; }
  40%      { opacity: .8; }
  70%      { opacity: .4; }
  80%      { opacity: .9; }
}

/* Galaxy: stars twinkle */
body.skin-galaxy .cabinet::after {
  animation: galaxyTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes galaxyTwinkle {
  0%   { opacity: .9;  filter: hue-rotate(0deg)    brightness(1); }
  50%  { opacity: .55; filter: hue-rotate(15deg)   brightness(1.1); }
  100% { opacity: 1;   filter: hue-rotate(-10deg)  brightness(0.95); }
}

/* Vaporwave: scanlines slowly drift down */
body.skin-vaporwave .cabinet::after {
  animation: vaporDrift 9s linear infinite;
}
@keyframes vaporDrift {
  from { background-position: 0 0; }
  to   { background-position: 0 100%; }
}

/* Cyberpunk: pulse the grid brightness */
body.skin-cyberpunk .cabinet::after {
  animation: cyberPulse 3s ease-in-out infinite alternate;
}
@keyframes cyberPulse {
  0%   { opacity: .55; }
  100% { opacity: 1; }
}

/* Hawaii: warm sun-ray rotation */
body.skin-hawaii .cabinet::after {
  animation: hawaiiRotate 90s linear infinite;
}
@keyframes hawaiiRotate {
  from { transform: rotate(0deg) scale(1.5); }
  to   { transform: rotate(360deg) scale(1.5); }
}

/* Hot Sauce: flames flicker */
body.skin-hotsauce .cabinet::after {
  animation: flameFlicker 0.9s ease-in-out infinite alternate;
}
@keyframes flameFlicker {
  0%   { opacity: .25; filter: hue-rotate(0deg); }
  100% { opacity: .55; filter: hue-rotate(-12deg); }
}

/* Bubblegum: soft breathing pulse */
body.skin-bubblegum .cabinet::after {
  animation: bubblegumBreath 6s ease-in-out infinite alternate;
}
@keyframes bubblegumBreath {
  from { opacity: .35; transform: scale(1); }
  to   { opacity: .75; transform: scale(1.04); }
}

/* Vegas: also pulse the sticker like a casino sign */
body.skin-vegas .sticker { animation: vegasSticker 1.4s ease-in-out infinite alternate; }
@keyframes vegasSticker {
  from { box-shadow: 0 0 8px rgba(255,216,22,.4), 0 6px 16px rgba(0,0,0,.5); }
  to   { box-shadow: 0 0 32px rgba(255,216,22,1), 0 6px 16px rgba(0,0,0,.5); }
}

/* ============================================================
   FOUR MORE SKINS (round 4) — including a hidden Easter-egg one
   ============================================================ */

body.skin-disco {
  --cream: #1a0a1a;
  --cream-deep: #0a0410;
  --cream-shadow: #b88a14;
  --ink: #fff;
  --ink-soft: #d8a8d8;
  --oxblood: #ff00aa;
  --oxblood-hot: #ff4dc4;
  --brass: #ffd816;
  --brass-bright: #fff099;
  --brass-dark: #a07300;
  --led-on: #ff00aa;
  --led-off: #0a0410;
  --screen-bg: #0a0410;
  --screen-fg: #ffd816;
  --screen-glow: rgba(255, 216, 22, .8);
  --radius-cabinet: 10px;
  --radius-module: 6px;
  --radius-button: 4px;
  --cabinet-pattern: radial-gradient(circle 8px at 20% 30%, rgba(255,255,255,.65) 0 40%, transparent 50%),
                     radial-gradient(circle 6px at 70% 60%, rgba(255,216,22,.55) 0 40%, transparent 50%),
                     radial-gradient(circle 5px at 40% 75%, rgba(255,0,170,.55) 0 40%, transparent 50%),
                     radial-gradient(circle 7px at 85% 20%, rgba(0,255,255,.55) 0 40%, transparent 50%);
  --cabinet-pattern-size: 80px 80px, 100px 100px, 70px 70px, 90px 90px;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: 1;
  animation: discoHue 4s linear infinite;
}
@keyframes discoHue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

body.skin-tarot {
  --cream: #2a1454;
  --cream-deep: #1a0a3e;
  --cream-shadow: #6a3aa0;
  --ink: #f0d8a0;
  --ink-soft: #d4af6a;
  --oxblood: #d4af37;
  --oxblood-hot: #f0c850;
  --brass: #d4af37;
  --brass-bright: #fff099;
  --brass-dark: #7a5818;
  --led-on: #d4af37;
  --led-off: #14082a;
  --screen-bg: #100624;
  --screen-fg: #d4af37;
  --screen-glow: rgba(212, 175, 55, .55);
  --radius-cabinet: 18px;
  --radius-module: 14px;
  --radius-button: 8px;
  --module-border-width: 2px;
  --cabinet-pattern: radial-gradient(circle, rgba(212,175,55,.18) 0 1.5px, transparent 2.5px);
  --cabinet-pattern-size: 30px 30px;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .85;
  --sticker-content: "✶ FOR \nDIVINATION ✶";
  --sticker-bg: #d4af37;
  --sticker-fg: #1a0a3e;
  --sticker-rotation: -10deg;
}
body.skin-tarot .module-title { font-family: "Fraunces", serif; font-weight: 800; font-style: italic; letter-spacing: .12em; }
body.skin-tarot .sticker { font-family: "Fraunces", serif; font-weight: 800; }

body.skin-office {
  --cream: #f0f0e0;
  --cream-deep: #d8d8c8;
  --cream-shadow: #8a8a6a;
  --ink: #2a2a1a;
  --ink-soft: #4a4a2a;
  --oxblood: #7a5a44;
  --oxblood-hot: #a07a5a;
  --brass: #9a8a5a;
  --brass-bright: #b8a874;
  --brass-dark: #5a5a3a;
  --led-on: #ffc857;
  --led-off: #2a2a1a;
  --screen-bg: #1a1a0a;
  --screen-fg: #ffc857;
  --screen-glow: rgba(255, 200, 87, .4);
  --radius-cabinet: 2px;
  --radius-module: 1px;
  --radius-button: 0;
  --module-border-width: 1px;
  --cabinet-pattern: repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,0,0,.04) 18px 19px),
                     repeating-linear-gradient(90deg, transparent 0 18px, rgba(0,0,0,.04) 18px 19px);
  --cabinet-pattern-size: auto;
  --cabinet-pattern-blend: multiply;
  --cabinet-pattern-opacity: .8;
  --sticker-content: "📎 STAPLED";
  --sticker-bg: #ffc857;
  --sticker-fg: #2a2a1a;
  --sticker-rotation: 4deg;
}
body.skin-office .ad-banner { background: #ffc857; color: #2a2a1a; border-color: #7a5a44; font-family: "JetBrains Mono", monospace; }
body.skin-office .sticker { font-family: "JetBrains Mono", monospace; font-weight: 700; }

/* Hidden 404 skin — unlocked by the Konami code easter egg */
body.skin-fourohfour {
  --cream: #fff;
  --cream-deep: #f4f4f4;
  --cream-shadow: #aaa;
  --ink: #000;
  --ink-soft: #444;
  --oxblood: #ff0080;
  --oxblood-hot: #ff4099;
  --brass: #00ff80;
  --brass-bright: #40ff99;
  --brass-dark: #006040;
  --led-on: #ff0080;
  --led-off: #000;
  --screen-bg: #000;
  --screen-fg: #00ff80;
  --screen-glow: rgba(0, 255, 128, .65);
  --radius-cabinet: 0;
  --radius-module: 0;
  --radius-button: 0;
  --cabinet-pattern:
    repeating-linear-gradient(0deg,
      transparent 0 16px,
      rgba(255, 0, 128, .08) 16px 17px),
    repeating-linear-gradient(90deg,
      transparent 0 16px,
      rgba(0, 255, 128, .08) 16px 17px);
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .9;
  --sticker-content: "404 \nNOT FOUND";
  --sticker-bg: #ff0080;
  --sticker-fg: #fff;
  --sticker-rotation: -8deg;
  animation: glitchShift 0.35s steps(2, end) infinite;
}
@keyframes glitchShift {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-1px, 0); }
  40%      { transform: translate(1px, -1px); }
  60%      { transform: translate(-1px, 1px); }
  80%      { transform: translate(1px, 0); }
}
body.skin-fourohfour .module-title { font-family: "Press Start 2P", monospace; font-size: 7px; }
body.skin-fourohfour .sticker { font-family: "Press Start 2P", monospace; font-size: 10px; letter-spacing: .04em; }

/* Preview swatches for round 4 */
.skin-preview.p-disco       { background: radial-gradient(circle, #fff 0 12%, transparent 13%) 0 0 / 16px 16px,
                                          linear-gradient(135deg, #ff00aa, #ffd816 50%, #00ffff); }
.skin-preview.p-tarot       { background: radial-gradient(circle, rgba(212,175,55,.4) 0 8%, transparent 10%) 0 0 / 12px 12px,
                                          linear-gradient(180deg, #2a1454, #1a0a3e 60%, #d4af37); }
.skin-preview.p-office      { background: linear-gradient(180deg, #f0f0e0, #d8d8c8 60%, #7a5a44); }
.skin-preview.p-fourohfour  {
  background: repeating-linear-gradient(0deg, #fff 0 4px, #ff0080 4px 5px, #00ff80 5px 6px);
  animation: glitchShift 0.4s steps(2, end) infinite;
}
.skin-preview.p-holiday     { background: linear-gradient(180deg, #fff, #c8141a 50%, #1c6e2b); }
.skin-preview.p-beach       { background: linear-gradient(180deg, #c8e3f7, #ffd886 60%, #6ec1ff); }
.skin-preview.p-ufo         {
  background: radial-gradient(ellipse at 50% 60%, rgba(170, 255, 0, .8) 0 28%, transparent 35%),
              linear-gradient(180deg, #0c0820, #1a1245 60%, #aaff00);
}
.skin-preview.p-turbo       {
  background: linear-gradient(135deg, #ff4500, #ffd816 45%, #00d4ff);
}

/* ============================================================
   ADDITIONAL THEMED SKINS
   ============================================================ */

body.skin-holiday {
  --cream: #f4f4f0;
  --cream-deep: #e0e0d8;
  --cream-shadow: #8a8a82;
  --ink: #0a1f08;
  --ink-soft: #1c4422;
  --oxblood: #c8141a;
  --oxblood-hot: #e83444;
  --brass: #1c6e2b;
  --brass-bright: #3aa040;
  --brass-dark: #0e3a14;
  --led-on: #ffd816;
  --led-off: #0e1208;
  --screen-bg: #050a04;
  --screen-fg: #c8141a;
  --screen-glow: rgba(200, 20, 26, .6);
  --radius-cabinet: 10px;
  --radius-module: 6px;
  --radius-button: 3px;
  --cabinet-pattern:
    radial-gradient(circle 3px, rgba(255,255,255,.7) 0 1.5px, transparent 2px),
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(28,110,43,.1) 18px 20px);
  --cabinet-pattern-size: 90px 90px, auto;
  --cabinet-pattern-blend: screen, multiply;
  --cabinet-pattern-opacity: .9;
  --sticker-content: "🎄 \nHO HO HO";
  --sticker-bg: #c8141a;
  --sticker-fg: #fff;
  --sticker-rotation: -10deg;
}
body.skin-holiday .module-title { font-family: "Lobster", "Fraunces", cursive; font-weight: 400; }

body.skin-beach {
  --cream: #c8e3f7;
  --cream-deep: #a2cce5;
  --cream-shadow: #4a8aae;
  --ink: #0a3a5a;
  --ink-soft: #1a5a7e;
  --oxblood: #ff8a3a;
  --oxblood-hot: #ffa552;
  --brass: #ffd886;
  --brass-bright: #ffe5a8;
  --brass-dark: #b8954a;
  --led-on: #ffe366;
  --led-off: #0a3a5a;
  --screen-bg: #051a2d;
  --screen-fg: #ffe366;
  --screen-glow: rgba(255, 227, 102, .65);
  --radius-cabinet: 14px;
  --radius-module: 10px;
  --radius-button: 6px;
  --cabinet-pattern: linear-gradient(180deg, rgba(255,255,255,.15) 0 1px, transparent 1px);
  --cabinet-pattern-size: 100% 12px;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .8;
  --sticker-content: "🏖️ FUN \nIN THE SUN";
  --sticker-bg: #ff8a3a;
  --sticker-fg: #051a2d;
  --sticker-rotation: -8deg;
}

/* Hidden skins (unlocked via typed words) */

body.skin-ufo {
  --cream: #0c0820;
  --cream-deep: #050310;
  --cream-shadow: #4a3a8a;
  --ink: #aaff00;
  --ink-soft: #88c800;
  --oxblood: #aaff00;
  --oxblood-hot: #ccff66;
  --brass: #6644ff;
  --brass-bright: #9988ff;
  --brass-dark: #3a2280;
  --led-on: #aaff00;
  --led-off: #0a081c;
  --screen-bg: #04020c;
  --screen-fg: #aaff00;
  --screen-glow: rgba(170, 255, 0, .85);
  --radius-cabinet: 22px;
  --radius-module: 16px;
  --radius-button: 8px;
  --module-border-width: 1.5px;
  --cabinet-pattern: radial-gradient(circle 1.5px, rgba(170,255,0,.6) 0 1px, transparent 1.5px);
  --cabinet-pattern-size: 24px 24px;
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .8;
  --sticker-content: "🛸 THE \nTRUTH IS";
  --sticker-bg: #aaff00;
  --sticker-fg: #0c0820;
  --sticker-rotation: -8deg;
  animation: ufoFloat 4s ease-in-out infinite alternate;
}
@keyframes ufoFloat {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(40deg); }
}

body.skin-turbo {
  --cream: #14080a;
  --cream-deep: #08040a;
  --cream-shadow: #582a08;
  --ink: #ffd816;
  --ink-soft: #ff8a18;
  --oxblood: #ff4500;
  --oxblood-hot: #ff6a2e;
  --brass: #ffd816;
  --brass-bright: #fff099;
  --brass-dark: #a07300;
  --led-on: #00d4ff;
  --led-off: #14080a;
  --screen-bg: #050208;
  --screen-fg: #00d4ff;
  --screen-glow: rgba(0, 212, 255, .85);
  --radius-cabinet: 0;
  --radius-module: 2px;
  --radius-button: 0;
  --module-border-width: 2px;
  --cabinet-pattern: repeating-linear-gradient(110deg,
    transparent 0 18px,
    rgba(255, 69, 0, .25) 18px 22px,
    transparent 22px 38px,
    rgba(255, 216, 22, .2) 38px 42px,
    transparent 42px 60px,
    rgba(0, 212, 255, .2) 60px 64px);
  --cabinet-pattern-blend: screen;
  --cabinet-pattern-opacity: .9;
  --sticker-content: "⚡TURBO\nMAX⚡";
  --sticker-bg: #ffd816;
  --sticker-fg: #ff4500;
  --sticker-rotation: 8deg;
}
body.skin-turbo .module-title { font-family: "Bungee", "Fraunces", serif; }
body.skin-turbo .sticker { font-family: "Bungee", "Fraunces", serif; }

/* ============================================================
   PER-SKIN KNOB ARC + KEYBOARD BACKDROP
   ============================================================ */

/* Knob arc color overrides — the colored ring that fills as the knob turns */
body.skin-midnight     { --knob-arc-color: #5af0c5; }
body.skin-cyberpunk    { --knob-arc-color: #00ffff; --knob-arc-width: 7; }
body.skin-vaporwave    { --knob-arc-color: #fffb96; --knob-arc-width: 7; }
body.skin-matrix       { --knob-arc-color: #00ff41; }
body.skin-forest       { --knob-arc-color: #ffd966; }
body.skin-carbon       { --knob-arc-color: #dc2626; }
body.skin-gold         { --knob-arc-color: #ffeaa0; }
body.skin-bauhaus      { --knob-arc-color: #ffeb3b; --knob-arc-width: 7; }
body.skin-sakura       { --knob-arc-color: #ffd1e8; }
body.skin-galaxy       { --knob-arc-color: #ffe066; }
body.skin-pastel       { --knob-arc-color: #fef08a; }
body.skin-drank        { --knob-arc-color: #fff056; --knob-arc-width: 7; }
body.skin-bbq          { --knob-arc-color: #fff056; --knob-arc-width: 7; }
body.skin-toothpaste   { --knob-arc-color: #fff056; }
body.skin-infomercial  { --knob-arc-color: #fff056; --knob-arc-width: 7; }
body.skin-cereal       { --knob-arc-color: #fff056; }
body.skin-lawyer       { --knob-arc-color: #fbbf24; }
body.skin-crypto       { --knob-arc-color: #00d18c; --knob-arc-width: 7; }
body.skin-hotsauce     { --knob-arc-color: #fff056; --knob-arc-width: 7; }
body.skin-fastfood     { --knob-arc-color: #fff056; }
body.skin-granny       { --knob-arc-color: #ff8c66; }
body.skin-comic        { --knob-arc-color: #ffeb3b; --knob-arc-width: 7; }
body.skin-brutalist    { --knob-arc-color: #ff5500; --knob-arc-width: 7; }
body.skin-bubblegum    { --knob-arc-color: #ffe566; --knob-arc-width: 7; }
body.skin-mall         { --knob-arc-color: #4ddccc; }
body.skin-newsprint    { --knob-arc-color: #1a1410; }
body.skin-pets         { --knob-arc-color: #ffc857; }
body.skin-tax          { --knob-arc-color: #0a8a2e; }
body.skin-pirate       { --knob-arc-color: #ffd84a; }
body.skin-steampunk    { --knob-arc-color: #ffd84a; }
body.skin-y2k          { --knob-arc-color: #80f0ff; --knob-arc-width: 7; }
body.skin-hospital     { --knob-arc-color: #02b070; }
body.skin-pizza        { --knob-arc-color: #ffd816; }
body.skin-lava         { --knob-arc-color: #ff5520; --knob-arc-width: 7; }
body.skin-vegas        { --knob-arc-color: #ffd816; --knob-arc-width: 7; }
body.skin-hawaii       { --knob-arc-color: #fff056; }
body.skin-mallgoth     { --knob-arc-color: #ff66cc; }
body.skin-lemonade     { --knob-arc-color: #fff056; }
body.skin-disco        { --knob-arc-color: #ffd816; --knob-arc-width: 7; }
body.skin-tarot        { --knob-arc-color: #d4af37; }
body.skin-office       { --knob-arc-color: #ffc857; }
body.skin-fourohfour   { --knob-arc-color: #00ff80; --knob-arc-width: 7; }
body.skin-holiday      { --knob-arc-color: #ffd816; }
body.skin-beach        { --knob-arc-color: #ffe366; --knob-arc-width: 7; }
body.skin-ufo          { --knob-arc-color: #aaff00; --knob-arc-width: 7; }
body.skin-turbo        { --knob-arc-color: #00d4ff; --knob-arc-width: 7; }

/* Keyboard backdrop variations — the slab the keys sit on */
body.skin-pirate       { --keyboard-bg: linear-gradient(180deg, #2a1808 0%, #1a0f04 100%); }
body.skin-hawaii       { --keyboard-bg: linear-gradient(180deg, #0e3a2a 0%, #052418 100%); }
body.skin-holiday      { --keyboard-bg: linear-gradient(180deg, #1c6e2b 0%, #0e3a14 100%); }
body.skin-beach        { --keyboard-bg: linear-gradient(180deg, #1a5a7e 0%, #051a2d 100%); }
body.skin-disco        { --keyboard-bg: linear-gradient(180deg, #1a0a1a 0%, #050204 100%); }
body.skin-vegas        { --keyboard-bg: linear-gradient(180deg, #1a0a2e 0%, #0a0518 100%); }
body.skin-bbq          { --keyboard-bg: linear-gradient(180deg, #2a0a00 0%, #1a0500 100%); }
body.skin-y2k          { --keyboard-bg: linear-gradient(180deg, #0a1438 0%, #050a1e 100%); }
body.skin-bubblegum    { --keyboard-bg: linear-gradient(180deg, #340424 0%, #1a0212 100%); }
body.skin-ufo          { --keyboard-bg: linear-gradient(180deg, #04020c 0%, #020108 100%); }
body.skin-turbo        { --keyboard-bg: linear-gradient(180deg, #050208 0%, #020104 100%); }
body.skin-tarot        { --keyboard-bg: linear-gradient(180deg, #100624 0%, #050218 100%); }
body.skin-mallgoth     { --keyboard-bg: linear-gradient(180deg, #050204 0%, #000 100%); }
body.skin-newsprint    { --keyboard-bg: linear-gradient(180deg, #d8cfc0 0%, #b8ad9a 100%); }

/* On light keyboards, swap the white-key colors to dark for readability */
body.skin-newsprint .key.white { background: linear-gradient(180deg, #f2ece0 0%, #d8cfc0 100%); }

/* ============================================================
   PARTY MODE — auto-cycle skins for shareable demo loops
   ============================================================ */

.party-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  margin-top: 6px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff00ff, #ffd816 50%, #00ffff);
  background-size: 200% 100%;
  color: #000;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid var(--ink);
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
  -webkit-user-select: none;
  user-select: none;
  animation: partyShimmer 4s linear infinite;
}
.party-toggle.active {
  background-size: 100% 100%;
  animation: partyShimmer 1.2s linear infinite;
  box-shadow: 0 0 16px rgba(255, 0, 255, .6), 0 3px 8px rgba(0,0,0,.25);
}
.party-toggle:hover { filter: brightness(1.06); }
@keyframes partyShimmer {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* ============================================================
   CONFETTI BURST (one-shot on skin change)
   ============================================================ */
.confetti-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  overflow: hidden;
}
.confetti-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 22px;
  will-change: transform, opacity;
  animation: confettiFly 1.4s cubic-bezier(.22, .68, .24, 1.02) forwards;
  opacity: 0;
}
@keyframes confettiFly {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--cx, 0), var(--cy, 0)) rotate(var(--cr, 0deg)) scale(.9); opacity: 0; }
}

/* On any non-default skin, mute the cream-grain noise that was tuned for
   the original cream cabinet — it muddies the palette on dark themes. */
body:not(.skin-default)[class*="skin-"] .cabinet::before,
body:not(.skin-default)[class*="skin-"] .cabinet::after {
  opacity: .15;
  mix-blend-mode: overlay;
}

/* (Ad-banner pulsing strip was removed at user's request — the skin
   sticker badge still appears on ad skins.) */

/* ============================================================
   SKINS MODAL
   ============================================================ */

.skins-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
  z-index: 3500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.skins-modal.active { display: flex; }
.skins-card {
  background: linear-gradient(180deg, var(--cream), var(--cream-deep));
  border-radius: 14px;
  padding: 18px 18px 14px;
  border: 5px solid var(--brass-dark);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  width: 680px;
}

/* ---------- HELP / GLOSSARY OVERLAY ---------- */
.help-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
  z-index: 3600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.help-modal.active { display: flex; }
.help-card {
  background: linear-gradient(180deg, var(--cream), var(--cream-deep));
  border-radius: 14px;
  border: 5px solid var(--brass-dark);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  width: 760px;
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--brass-dark);
  flex-shrink: 0;
}
.help-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
}
.help-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 22px 22px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.help-body h3 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 20px 0 6px;
}
.help-body p { margin: 0 0 10px; }
.help-body ul { margin: 0 0 12px; padding-left: 20px; }
.help-body li { margin: 0 0 5px; }
.help-body strong { color: var(--ink); font-weight: 700; }
.help-body code {
  font-family: var(--font-screen, monospace);
  background: rgba(0,0,0,.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
.help-body .help-tip {
  background: rgba(107,31,36,.08);
  border-left: 3px solid var(--oxblood);
  padding: 9px 13px;
  border-radius: 5px;
  margin: 6px 0 14px;
}
.skins-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.skins-search {
  flex: 1;
  max-width: 320px;
  padding: 7px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  border: 1.5px solid var(--cream-shadow);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: var(--ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.skins-search:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(184, 137, 58, .2);
}
.skins-search::placeholder { color: var(--ink-soft); opacity: .6; }

/* Truncate long skin names on the SKIN button */
#skinsBtn {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
/* Visual cue when PARTY auto-cycle is running */
body.party-active #skinsBtn {
  background: linear-gradient(90deg, #ff00ff, #ffd816 50%, #00ffff);
  background-size: 300% 100%;
  color: #000;
  font-weight: 800;
  border-color: var(--ink);
  animation: partyShimmer 2s linear infinite;
}
body.party-active #skinsBtn::after {
  content: "🎉";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
}
.skin-tile.hidden-by-search { display: none; }
.skin-section-title.empty-section { display: none; }
.skins-card h2 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
}
.skins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.skin-tile {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  background: var(--cream-deep);
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
}
.skin-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.skin-tile.active {
  border-color: var(--oxblood);
  box-shadow: 0 0 0 2px var(--brass-bright), 0 6px 16px rgba(0,0,0,.4);
}
.skin-preview {
  height: 70px;
  position: relative;
  overflow: hidden;
}
.skin-preview::before,
.skin-preview::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Each preview swatch is just three stripes of the theme colors */
.skin-preview.p-default     { background: linear-gradient(180deg, #efe5d0, #b8893a 60%, #6b1f24); }
.skin-preview.p-midnight    { background: linear-gradient(180deg, #1a2438, #5a8dc5 60%, #5af0c5); }
.skin-preview.p-cyberpunk   { background: linear-gradient(180deg, #1a0a2e, #ff00ff 60%, #00ffff); }
.skin-preview.p-vaporwave   { background: linear-gradient(180deg, #2d1659, #ff71ce 60%, #01cdfe); }
.skin-preview.p-matrix      { background: linear-gradient(180deg, #001a00, #00ff41 60%, #007020); }
.skin-preview.p-forest      { background: linear-gradient(180deg, #d2dfc4, #4b6b32 60%, #9c8454); }
.skin-preview.p-sunset      { background: linear-gradient(180deg, #ffd6a5, #cf2952 60%, #c95830); }
.skin-preview.p-carbon      { background: linear-gradient(180deg, #181818, #555 60%, #dc2626); }
.skin-preview.p-gold        { background: linear-gradient(180deg, #fff4cc, #d4af37 60%, #7a5818); }
.skin-preview.p-drank       { background: linear-gradient(180deg, #fff056, #0040d4 60%, #001a3d); }
.skin-preview.p-bbq         { background: linear-gradient(180deg, #ffc857, #b91c1c 60%, #2a0a00); }
.skin-preview.p-toothpaste  { background: linear-gradient(180deg, #e0f7fa, #00bcd4 60%, #ec407a); }
.skin-preview.p-infomercial { background: linear-gradient(180deg, #fff056, #cc0000 60%, #000); }
.skin-preview.p-cereal      { background: linear-gradient(180deg, #fff5cc, #e60026 60%, #003580); }
.skin-preview.p-lawyer      { background: linear-gradient(180deg, #d6dde6, #1e3a8a 60%, #fbbf24); }
.skin-preview.p-bauhaus     { background: linear-gradient(180deg, #ffe066, #d62828 50%, #003e8a); }
.skin-preview.p-sakura      { background: linear-gradient(180deg, #ffe4ec, #c14a7c 60%, #b08aa5); }
.skin-preview.p-galaxy      { background: linear-gradient(180deg, #0a061a, #7c4dff 60%, #b388ff); }
.skin-preview.p-pastel      { background: linear-gradient(180deg, #fdf2f8, #f472b6 50%, #a78bfa); }
.skin-preview.p-crypto      { background: linear-gradient(180deg, #f9b115, #d68a00 60%, #00d18c); }
.skin-preview.p-hotsauce    { background: linear-gradient(180deg, #1a0a05, #ff4500 60%, #ffe366); }
.skin-preview.p-fastfood    { background: linear-gradient(180deg, #ffe55a, #d32f2f 60%, #5c0000); }
.skin-preview.p-granny      { background: linear-gradient(180deg, #fff5e6, #b92e1d 50%, #c2845b),
                                          repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,.08) 8px 16px); }
.skin-preview.p-comic       { background: linear-gradient(180deg, #ffe566, #d62828 50%, #0066ff),
                                          radial-gradient(circle, rgba(0,0,0,.4) 1px, transparent 2px) 0 0 / 8px 8px; }
.skin-preview.p-brutalist   { background: linear-gradient(180deg, #d9d9d9, #000 50%, #ff5500); }
.skin-preview.p-bubblegum   { background: linear-gradient(180deg, #ffd6f5, #ff3ec9 60%, #ffe566); border-radius: 24px; }
.skin-preview.p-mall        { background: linear-gradient(180deg, #f8e8c4, #ff6f91 50%, #00bfa6); }
.skin-preview.p-newsprint   { background: linear-gradient(180deg, #f2ece0, #6e6457 60%, #1a1410); }
.skin-preview.p-pets        { background: linear-gradient(180deg, #fff3d6, #c2410c 60%, #4a2a06); border-radius: 18px; }
.skin-preview.p-tax         { background: linear-gradient(180deg, #e6edf2, #1a3a6c 60%, #0a8a2e); }
.skin-preview.p-pirate      { background: linear-gradient(180deg, #d8c089, #8b1414 55%, #2a1808); }
.skin-preview.p-steampunk   { background: linear-gradient(180deg, #5a4830, #d4a050 60%, #82602e); }
.skin-preview.p-y2k         { background: linear-gradient(135deg, #c8d8ff, #6a3aff 50%, #00d4ff); }
.skin-preview.p-hospital    { background: linear-gradient(180deg, #f4f8fa, #008f5a 60%, #0a2e3a); }
.skin-preview.p-surprise    {
  background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ffe066, #ff4500, #00d18c, #ff00ff);
  animation: surpriseSpin 4s linear infinite;
}
@keyframes surpriseSpin { to { transform: rotate(360deg); } }

.skin-meta {
  padding: 6px 8px 8px;
}
.skin-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.skin-tagline {
  font-family: var(--font-screen);
  font-size: 9px;
  color: var(--ink-soft);
  letter-spacing: .04em;
  margin-top: 2px;
  line-height: 1.3;
}
.skin-tile.is-ad .skin-name::after {
  content: "®";
  font-size: 9px;
  vertical-align: super;
  margin-left: 2px;
  opacity: .6;
}
.skin-tile.is-ad {
  position: relative;
}
.skins-hint {
  margin-top: 12px;
  font-family: var(--font-screen);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-align: center;
}