/* ============================================================================
   theme-overrides.css
   Era-authentic retro texture for each cracking-group / demoscene skin.
   Additive only. Every rule is scoped :root[data-skin="ID"] and wins on
   specificity (attribute selector + element/class beats the base rules).
   Backgrounds are pure CSS (gradients / data-URI SVG). External images are
   blocked by CSP. Fonts used per theme are limited to the ones that theme
   actually loads (Press Start 2P + VT323, Righteous + Nunito, or Cinzel).
   ============================================================================ */

/* Shared: decorative full-page backdrops sit behind everything and never
   intercept clicks. Individual themes paint into body::before / body::after. */
:root[data-skin="razor1911"] body::before,
:root[data-skin="fairlight"] body::before,
:root[data-skin="radium"] body::before,
:root[data-skin="core"] body::before,
:root[data-skin="deviance"] body::before,
:root[data-skin="paradox"] body::before,
:root[data-skin="hoodlum"] body::before,
:root[data-skin="myth"] body::before,
:root[data-skin="class"] body::before,
:root[data-skin="tport"] body::before,
:root[data-skin="fff"] body::before,
:root[data-skin="psc"] body::before,
:root[data-skin="snd"] body::before,
:root[data-skin="tsrh"] body::before,
:root[data-skin="true"] body::before,
:root[data-skin="razor1911"] body::after,
:root[data-skin="fairlight"] body::after,
:root[data-skin="radium"] body::after,
:root[data-skin="core"] body::after,
:root[data-skin="deviance"] body::after,
:root[data-skin="paradox"] body::after,
:root[data-skin="hoodlum"] body::after,
:root[data-skin="myth"] body::after,
:root[data-skin="class"] body::after,
:root[data-skin="tport"] body::after,
:root[data-skin="fff"] body::after,
:root[data-skin="psc"] body::after,
:root[data-skin="snd"] body::after,
:root[data-skin="tsrh"] body::after,
:root[data-skin="true"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ============================================================================
   RAZOR 1911 — Norwegian cracking legend since 1985. Blood red on pure black,
   razor-blade slashes, sharp diagonal chrome, aggressive cracktro attitude.
   ============================================================================ */
:root[data-skin="razor1911"] body::before {
  /* dark blood field with faint diagonal blade streaks */
  background:
    repeating-linear-gradient(115deg, rgba(225,6,0,.05) 0 2px, transparent 2px 42px),
    radial-gradient(120% 80% at 50% -10%, rgba(225,6,0,.18), transparent 60%),
    #060606;
}
:root[data-skin="razor1911"] body::after {
  /* two hard red blade slashes crossing the page */
  background:
    linear-gradient(66deg, transparent calc(50% - 1px), rgba(255,59,48,.5) 50%, transparent calc(50% + 1px)),
    linear-gradient(-58deg, transparent calc(30% - 1px), rgba(225,6,0,.4) 30%, transparent calc(30% + 1px));
  mix-blend-mode: screen;
  opacity: .5;
}
:root[data-skin="razor1911"] header.top {
  background:
    linear-gradient(180deg, #1a0202, #0a0a0a) padding-box,
    #0a0a0a;
  border-bottom: 2px solid var(--color-accent);
  box-shadow: 0 0 24px rgba(225,6,0,.35);
}
:root[data-skin="razor1911"] .brand .name {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-shadow: 0 0 2px #ff3b30, 2px 2px 0 #5a0300, 0 0 18px rgba(225,6,0,.7);
}
:root[data-skin="razor1911"] .sheet {
  border: 1px solid rgba(225,6,0,.5);
  border-left: 4px solid var(--color-accent);
  box-shadow: inset 0 0 0 1px rgba(255,59,48,.12), 0 10px 40px rgba(0,0,0,.8);
}
:root[data-skin="razor1911"] .listhead h1 {
  text-transform: uppercase;
  color: #fff;
  text-shadow: 3px 3px 0 #5a0300, 0 0 12px rgba(225,6,0,.6);
}
:root[data-skin="razor1911"] .listhead h1::before { content: "◤ "; color: var(--color-accent); }
:root[data-skin="razor1911"] .agentcta {
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.35) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #b30400, #5a0300);
  border: 1px solid #ff3b30;
  box-shadow: 0 0 22px rgba(225,6,0,.5), inset 0 1px 0 rgba(255,120,120,.5);
}
:root[data-skin="razor1911"] .btn-primary,
:root[data-skin="razor1911"] .searchwrap .btn {
  background: linear-gradient(180deg, #ff3b30, #b30400);
  border: 1px solid #ff6a60;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(255,180,180,.5), 0 2px 8px rgba(225,6,0,.4);
}
:root[data-skin="razor1911"] .row .open:hover { text-shadow: 0 0 10px rgba(255,59,48,.8); }

/* ============================================================================
   FAIRLIGHT — legendary chrome demoscene look: mirrored chrome text with a
   cyan/gold sheen, deep space-blue field, starfield sparkle, glassy panels.
   ============================================================================ */
:root[data-skin="fairlight"] body::before {
  background:
    radial-gradient(1px 1px at 20% 30%, #fff 99%, transparent),
    radial-gradient(1px 1px at 70% 60%, #bfe9ff 99%, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff 99%, transparent),
    radial-gradient(2px 2px at 85% 20%, #eafcff 99%, transparent),
    radial-gradient(1px 1px at 55% 12%, #cfe8ff 99%, transparent),
    radial-gradient(120% 90% at 50% 0%, rgba(0,229,255,.12), transparent 55%),
    linear-gradient(180deg, #0a0e27, #05081a);
}
:root[data-skin="fairlight"] body::after {
  /* faint horizon sheen */
  background: linear-gradient(180deg, transparent 60%, rgba(0,229,255,.08) 78%, transparent 92%);
}
:root[data-skin="fairlight"] header.top {
  background: linear-gradient(180deg, #141a3c, #0a0e27);
  border-bottom: 1px solid rgba(0,229,255,.4);
  box-shadow: 0 2px 20px rgba(0,229,255,.2);
}
:root[data-skin="fairlight"] .brand .name,
:root[data-skin="fairlight"] .listhead h1 {
  background: linear-gradient(180deg, #eafcff 0%, #8fe6ff 38%, #0d7fa8 50%, #e9d38a 60%, #fff6d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  letter-spacing: .01em;
}
:root[data-skin="fairlight"] .sheet {
  border: 1px solid rgba(0,229,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 30px rgba(0,229,255,.15);
  background-image: linear-gradient(180deg, rgba(0,229,255,.05), transparent 30%);
}
:root[data-skin="fairlight"] .agentcta {
  background: linear-gradient(180deg, rgba(0,229,255,.22), rgba(10,26,74,.6));
  border: 1px solid rgba(0,229,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 24px rgba(0,229,255,.25);
}
:root[data-skin="fairlight"] .btn-primary,
:root[data-skin="fairlight"] .searchwrap .btn {
  background: linear-gradient(180deg, #eafcff, #7fd8ee 45%, #1a90b5 55%, #0a5f80);
  color: #04121f;
  border: 1px solid #bfeeff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ============================================================================
   RADIUM — radioactive-green audio-warez terminal. Phosphor CRT: scanlines,
   green glow, trefoil hazard, VT323 monospace glow.
   ============================================================================ */
:root[data-skin="radium"] body::before {
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(57,255,20,.06), transparent 70%),
    #030503;
}
:root[data-skin="radium"] body::after {
  /* CRT scanlines + faint radiation vignette */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    radial-gradient(90% 70% at 50% 40%, transparent 55%, rgba(0,0,0,.6));
  mix-blend-mode: multiply;
}
:root[data-skin="radium"] header.top {
  background: #030503;
  border-bottom: 1px solid var(--color-accent);
  box-shadow: 0 0 18px rgba(57,255,20,.4);
}
:root[data-skin="radium"] .brand .name,
:root[data-skin="radium"] .listhead h1 {
  color: var(--color-accent);
  text-shadow: 0 0 6px rgba(57,255,20,.9), 0 0 16px rgba(57,255,20,.5);
}
:root[data-skin="radium"] .brand .name::after {
  content: "☢";
  margin-left: .35em;
  color: var(--color-accent);
  text-shadow: 0 0 10px rgba(57,255,20,.9);
}
:root[data-skin="radium"] .sheet {
  border: 1px solid rgba(57,255,20,.4);
  box-shadow: inset 0 0 30px rgba(57,255,20,.06), 0 0 24px rgba(57,255,20,.15);
}
:root[data-skin="radium"] .agentcta {
  background: linear-gradient(180deg, rgba(57,255,20,.14), rgba(10,59,10,.5));
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 18px rgba(57,255,20,.35);
}
:root[data-skin="radium"] .btn-primary,
:root[data-skin="radium"] .searchwrap .btn {
  background: #0a1f0a;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  text-shadow: 0 0 6px rgba(57,255,20,.8);
  box-shadow: inset 0 0 10px rgba(57,255,20,.2);
}
:root[data-skin="radium"] .row .open { text-shadow: 0 0 5px rgba(57,255,20,.4); }

/* ============================================================================
   CORE — the archetypal keygen dialog window. Brushed steel window chrome,
   a title-bar strip, beveled panels, acid-green LCD readout accents.
   ============================================================================ */
:root[data-skin="core"] body::before {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #14161b, #0b0b0f);
}
:root[data-skin="core"] header.top {
  /* classic 9x title-bar gradient */
  background: linear-gradient(90deg, #202b3a 0%, #2b6f2b 100%);
  border-bottom: 2px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
:root[data-skin="core"] .brand .name {
  color: #eaffea;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 0;
}
:root[data-skin="core"] .sheet {
  /* beveled steel window: light top/left, dark bottom/right */
  background-image: linear-gradient(180deg, #1c1f26, #15171d);
  border: 2px solid;
  border-color: #3a4150 #0a0b0e #0a0b0e #3a4150;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.1), inset -1px -1px 0 rgba(0,0,0,.6), 0 8px 30px rgba(0,0,0,.6);
}
:root[data-skin="core"] .listhead h1 {
  color: var(--color-accent);
  font-family: "VT323", ui-monospace, monospace;
  text-shadow: 0 0 8px rgba(57,255,20,.6);
}
:root[data-skin="core"] .agentcta {
  background: linear-gradient(180deg, #232732, #14161b);
  border: 2px solid;
  border-color: #454d5e #0a0b0e #0a0b0e #454d5e;
  color: var(--color-accent);
}
:root[data-skin="core"] .btn-primary,
:root[data-skin="core"] .searchwrap .btn {
  /* raised steel button */
  background: linear-gradient(180deg, #2a2f3a, #1a1d24);
  border: 2px solid;
  border-color: #4a5262 #0a0b0e #0a0b0e #4a5262;
  color: #d6f5d6;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.12);
}
:root[data-skin="core"] .btn-primary:active,
:root[data-skin="core"] .searchwrap .btn:active {
  border-color: #0a0b0e #4a5262 #4a5262 #0a0b0e;
}

/* ============================================================================
   DEViANCE — chrome and spikes. Cold hard chrome gradients with hot-pink
   accents, spiked triangular edges, mirror-metal heading.
   ============================================================================ */
:root[data-skin="deviance"] body::before {
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(255,46,99,.18), transparent 60%),
    linear-gradient(180deg, #101218, #06070a);
}
:root[data-skin="deviance"] body::after {
  /* row of chrome spikes along the very top */
  height: 20px;
  bottom: auto;
  background:
    repeating-linear-gradient(90deg,
      #d7dbe4 0, #6b7180 8px, #23262e 16px, transparent 16px 32px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 32px) top/32px 20px;
  clip-path: polygon(0 0,100% 0,100% 40%,94% 100%,88% 40%,82% 100%,76% 40%,70% 100%,64% 40%,58% 100%,52% 40%,46% 100%,40% 40%,34% 100%,28% 40%,22% 100%,16% 40%,10% 100%,4% 40%,0 100%);
  opacity: .5;
}
:root[data-skin="deviance"] header.top {
  background: linear-gradient(180deg, #2a2d36 0%, #16181f 45%, #0b0c10 55%, #16181f 100%);
  border-bottom: 2px solid var(--color-accent);
}
:root[data-skin="deviance"] .brand .name,
:root[data-skin="deviance"] .listhead h1 {
  background: linear-gradient(180deg, #ffffff 0%, #c4c9d4 42%, #4a4f5b 52%, #d8dce4 62%, #ff2e63 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.7));
  text-transform: uppercase;
}
:root[data-skin="deviance"] .sheet {
  border: 1px solid #3a3e49;
  border-top: 3px solid var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 34px rgba(0,0,0,.7);
}
:root[data-skin="deviance"] .agentcta {
  background: linear-gradient(180deg, #2a2d36, #101218);
  border: 1px solid #4a4f5b;
  border-left: 3px solid var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
:root[data-skin="deviance"] .btn-primary,
:root[data-skin="deviance"] .searchwrap .btn {
  background: linear-gradient(180deg, #eef0f4, #b9bec9 48%, #7c818e 52%, #b9bec9);
  color: #101218;
  border: 1px solid #ff2e63;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* ============================================================================
   PARADOX — Amiga heritage. Horizontal copper raster bars sweeping the page,
   deep blue field, orange/cyan accents, topaz-style pixel heading.
   ============================================================================ */
:root[data-skin="paradox"] body::before {
  /* stacked copperbars */
  background:
    repeating-linear-gradient(180deg,
      #0a0e27 0 10px,
      #1b2a6b 10px 16px,
      #2f6bff 16px 20px,
      #9fd0ff 20px 22px,
      #2f6bff 22px 26px,
      #1b2a6b 26px 32px,
      #0a0e27 32px 56px);
  opacity: .5;
}
:root[data-skin="paradox"] body::after {
  background: radial-gradient(120% 80% at 50% 120%, rgba(255,122,24,.14), transparent 60%);
}
:root[data-skin="paradox"] header.top {
  background:
    repeating-linear-gradient(180deg, rgba(47,107,255,.35) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #1b2a6b, #0a0e27);
  border-bottom: 2px solid #00c2ff;
}
:root[data-skin="paradox"] .brand .name,
:root[data-skin="paradox"] .listhead h1 {
  color: #ffd27a;
  text-shadow: 0 2px 0 #ff7a18, 0 0 12px rgba(0,194,255,.6), 2px 2px 0 #0a0e27;
}
:root[data-skin="paradox"] .sheet {
  border: 1px solid rgba(0,194,255,.4);
  box-shadow: 0 0 26px rgba(47,107,255,.25), inset 0 1px 0 rgba(159,208,255,.2);
}
:root[data-skin="paradox"] .agentcta {
  background:
    repeating-linear-gradient(180deg, rgba(0,194,255,.18) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, #1b2a6b, #0a1640);
  border: 1px solid #ff7a18;
}
:root[data-skin="paradox"] .btn-primary,
:root[data-skin="paradox"] .searchwrap .btn {
  background: linear-gradient(180deg, #ffb057, #ff7a18);
  color: #0a0e27;
  border: 1px solid #ffd27a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* ============================================================================
   HOODLUM — street gang. Concrete-and-brick texture, spray-paint red tag,
   torn edges, alarm red on grimy black, stencil caps.
   ============================================================================ */
:root[data-skin="hoodlum"] body::before {
  /* rough concrete: overlapping speckle gradients */
  background:
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,.05) 99%, transparent),
    radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,.04) 99%, transparent),
    radial-gradient(2px 2px at 85% 80%, rgba(0,0,0,.4) 99%, transparent),
    radial-gradient(2px 2px at 35% 70%, rgba(0,0,0,.35) 99%, transparent),
    linear-gradient(180deg, #131316, #0a0a0c);
}
:root[data-skin="hoodlum"] body::after {
  /* diagonal caution/graffiti wash */
  background: repeating-linear-gradient(135deg, rgba(200,30,30,.05) 0 6px, transparent 6px 24px);
}
:root[data-skin="hoodlum"] header.top {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, #1c1c22, #0b0b0d);
  border-bottom: 3px solid var(--color-accent);
}
:root[data-skin="hoodlum"] .brand .name,
:root[data-skin="hoodlum"] .listhead h1 {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  transform: skewX(-6deg);
  text-shadow: 3px 3px 0 #000, 0 0 14px rgba(200,30,30,.5);
}
:root[data-skin="hoodlum"] .sheet {
  border: 2px solid #2a2a30;
  border-left: 5px solid var(--color-accent);
  box-shadow: 6px 6px 0 rgba(0,0,0,.5);
}
:root[data-skin="hoodlum"] .agentcta {
  background: linear-gradient(180deg, #2a0808, #4a0808);
  border: 2px dashed #ff5a4a;
  transform: skewX(-3deg);
}
:root[data-skin="hoodlum"] .btn-primary,
:root[data-skin="hoodlum"] .searchwrap .btn {
  background: var(--color-accent);
  color: #fff;
  border: 2px solid #000;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: 3px 3px 0 #000;
}

/* ============================================================================
   MYTH — "legend". Warm marble, engraved gold, laurels, Cinzel serif majesty.
   ============================================================================ */
:root[data-skin="myth"] body::before {
  /* veined marble field */
  background:
    linear-gradient(115deg, transparent 48%, rgba(199,162,75,.06) 49% 51%, transparent 52%),
    linear-gradient(75deg, transparent 60%, rgba(255,255,255,.03) 61% 62%, transparent 63%),
    radial-gradient(120% 80% at 50% -10%, rgba(199,162,75,.14), transparent 55%),
    linear-gradient(180deg, #1a150f, #100d09);
}
:root[data-skin="myth"] body::after {
  background: radial-gradient(80% 60% at 50% 110%, rgba(199,162,75,.1), transparent 60%);
}
:root[data-skin="myth"] header.top {
  background: linear-gradient(180deg, #241d14, #14110e);
  border-bottom: 1px solid var(--color-accent);
  box-shadow: 0 2px 18px rgba(199,162,75,.25);
}
:root[data-skin="myth"] .brand .name,
:root[data-skin="myth"] .listhead h1 {
  font-family: "Cinzel", Georgia, serif;
  background: linear-gradient(180deg, #fff3cf 0%, #e4c470 45%, #a9822f 60%, #f0d999 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
  letter-spacing: .04em;
}
:root[data-skin="myth"] .listhead h1::before { content: "❦ "; -webkit-text-fill-color: #c7a24b; }
:root[data-skin="myth"] .sheet {
  border: 1px solid rgba(199,162,75,.45);
  box-shadow: inset 0 0 0 1px rgba(199,162,75,.12), 0 10px 34px rgba(0,0,0,.6);
  background-image: linear-gradient(180deg, rgba(199,162,75,.05), transparent 24%);
}
:root[data-skin="myth"] .agentcta {
  background: linear-gradient(180deg, #3a2e18, #241d14);
  border: 1px solid var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255,240,200,.25);
}
:root[data-skin="myth"] .btn-primary,
:root[data-skin="myth"] .searchwrap .btn {
  background: linear-gradient(180deg, #f0d999, #c7a24b 55%, #8a6a28);
  color: #1a1206;
  border: 1px solid #f0d999;
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* ============================================================================
   CLASS — navy chrome premium. Deep navy, polished cyan chrome bar, glossy
   highlight, restrained high-class finish.
   ============================================================================ */
:root[data-skin="class"] body::before {
  background:
    radial-gradient(100% 60% at 50% -10%, rgba(47,208,230,.14), transparent 55%),
    linear-gradient(180deg, #0d1530, #070c1c);
}
:root[data-skin="class"] body::after {
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 20%);
}
:root[data-skin="class"] header.top {
  background: linear-gradient(180deg, #1c3369 0%, #14224a 48%, #0e1a3a 52%, #14224a 100%);
  border-bottom: 1px solid rgba(47,208,230,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 16px rgba(47,208,230,.2);
}
:root[data-skin="class"] .brand .name,
:root[data-skin="class"] .listhead h1 {
  background: linear-gradient(180deg, #eafcff 0%, #a8e6f2 42%, #2fd0e6 52%, #0e6f80 62%, #d6f6fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
:root[data-skin="class"] .sheet {
  border: 1px solid rgba(47,208,230,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 30px rgba(10,16,36,.7);
  background-image: linear-gradient(180deg, rgba(47,208,230,.06), transparent 26%);
}
:root[data-skin="class"] .agentcta {
  background: linear-gradient(180deg, rgba(47,208,230,.2), rgba(20,34,74,.6));
  border: 1px solid rgba(47,208,230,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
:root[data-skin="class"] .btn-primary,
:root[data-skin="class"] .searchwrap .btn {
  background: linear-gradient(180deg, #eafcff, #9fe2ee 46%, #2fabbf 54%, #14224a);
  color: #04121f;
  border: 1px solid #bfeff7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ============================================================================
   Keygen-music cracktro groups — each a DISTINCT demoscene effect.
   ============================================================================ */

/* --- tPORt: PLASMA -------------------------------------------------------- */
:root[data-skin="tport"] body::before {
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(176,38,255,.5), transparent 60%),
    radial-gradient(50% 50% at 80% 25%, rgba(0,224,255,.35), transparent 60%),
    radial-gradient(45% 45% at 60% 80%, rgba(255,38,180,.4), transparent 60%),
    radial-gradient(50% 50% at 25% 75%, rgba(90,10,200,.45), transparent 60%),
    #0a0518;
  filter: saturate(1.2);
}
:root[data-skin="tport"] body::after {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
:root[data-skin="tport"] header.top {
  background: linear-gradient(90deg, #2a0a5a, #160a2e);
  border-bottom: 2px solid #00e0ff;
  box-shadow: 0 0 20px rgba(176,38,255,.4);
}
:root[data-skin="tport"] .brand .name,
:root[data-skin="tport"] .listhead h1 {
  color: #00e0ff;
  text-shadow: 2px 0 #b026ff, -2px 0 #ff26b4, 0 0 14px rgba(0,224,255,.6);
}
:root[data-skin="tport"] .sheet {
  border: 1px solid rgba(176,38,255,.5);
  box-shadow: 0 0 26px rgba(176,38,255,.25);
}
:root[data-skin="tport"] .agentcta {
  background: linear-gradient(180deg, rgba(176,38,255,.3), rgba(42,10,90,.6));
  border: 1px solid #00e0ff;
}
:root[data-skin="tport"] .btn-primary,
:root[data-skin="tport"] .searchwrap .btn {
  background: linear-gradient(180deg, #b026ff, #6a0abf);
  color: #fff;
  border: 1px solid #00e0ff;
  box-shadow: 0 0 12px rgba(176,38,255,.5);
}

/* --- FFF: RASTER BARS + HAZARD SPEED (yellow/black) ------------------------ */
:root[data-skin="fff"] body::before {
  background:
    repeating-linear-gradient(180deg,
      #101008 0 14px,
      #3a3a00 14px 18px,
      #ffe000 18px 22px,
      #fff59a 22px 24px,
      #ffe000 24px 28px,
      #3a3a00 28px 32px,
      #101008 32px 60px);
  opacity: .45;
}
:root[data-skin="fff"] body::after {
  /* speed-haze hazard chevrons at the base */
  height: 26px; bottom: 0; top: auto;
  background: repeating-linear-gradient(135deg, #ffe000 0 14px, #101008 14px 28px);
  opacity: .35;
}
:root[data-skin="fff"] header.top {
  background: repeating-linear-gradient(135deg, #1a1a0c 0 16px, #24240e 16px 32px);
  border-bottom: 3px solid var(--color-accent);
}
:root[data-skin="fff"] .brand .name,
:root[data-skin="fff"] .listhead h1 {
  color: var(--color-accent);
  font-style: italic;
  transform: skewX(-10deg);
  text-shadow: 3px 0 #101008, -1px -1px 0 #fff59a, 0 0 12px rgba(255,224,0,.5);
}
:root[data-skin="fff"] .sheet {
  border: 1px solid #3a3a00;
  border-top: 4px solid var(--color-accent);
  box-shadow: 0 0 22px rgba(255,224,0,.15);
}
:root[data-skin="fff"] .agentcta {
  background: repeating-linear-gradient(135deg, #3a3a00 0 12px, #2a2a00 12px 24px);
  border: 2px solid var(--color-accent);
}
:root[data-skin="fff"] .btn-primary,
:root[data-skin="fff"] .searchwrap .btn {
  background: linear-gradient(180deg, #fff59a, #ffe000 50%, #c9b400);
  color: #101008;
  border: 2px solid #101008;
  font-style: italic;
  box-shadow: 2px 2px 0 #101008;
}

/* --- PSC: STARFIELD (cold blue) ------------------------------------------- */
:root[data-skin="psc"] body::before {
  background:
    radial-gradient(1px 1px at 10% 20%, #fff 99%, transparent),
    radial-gradient(1px 1px at 30% 70%, #bfe4ff 99%, transparent),
    radial-gradient(2px 2px at 55% 40%, #dff2ff 99%, transparent),
    radial-gradient(1px 1px at 75% 15%, #fff 99%, transparent),
    radial-gradient(1px 1px at 88% 65%, #9fd0ff 99%, transparent),
    radial-gradient(2px 2px at 45% 88%, #fff 99%, transparent),
    radial-gradient(1px 1px at 65% 78%, #bfe4ff 99%, transparent),
    radial-gradient(120% 90% at 50% 50%, rgba(34,160,255,.1), transparent 60%),
    #04101c;
}
:root[data-skin="psc"] header.top {
  background: linear-gradient(180deg, #0a1e34, #04101c);
  border-bottom: 1px solid var(--color-accent);
  box-shadow: 0 0 16px rgba(34,160,255,.3);
}
:root[data-skin="psc"] .brand .name,
:root[data-skin="psc"] .listhead h1 {
  color: #dff2ff;
  text-shadow: 0 0 6px rgba(34,160,255,.9), 0 0 18px rgba(34,160,255,.5);
}
:root[data-skin="psc"] .sheet {
  border: 1px solid rgba(34,160,255,.4);
  box-shadow: 0 0 24px rgba(34,160,255,.18);
}
:root[data-skin="psc"] .agentcta {
  background: linear-gradient(180deg, rgba(34,160,255,.2), rgba(10,42,80,.6));
  border: 1px solid var(--color-accent);
}
:root[data-skin="psc"] .btn-primary,
:root[data-skin="psc"] .searchwrap .btn {
  background: linear-gradient(180deg, #6cc4ff, #22a0ff 55%, #0a5aa0);
  color: #04101c;
  border: 1px solid #bfe4ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* --- SnD: SCROLLTEXT / FIRE (orange) -------------------------------------- */
:root[data-skin="snd"] body::before {
  /* rising flame glow from the base */
  background:
    radial-gradient(120% 70% at 50% 115%, rgba(255,122,24,.4), transparent 55%),
    radial-gradient(80% 50% at 30% 120%, rgba(255,60,0,.3), transparent 55%),
    radial-gradient(80% 50% at 70% 120%, rgba(255,180,40,.25), transparent 55%),
    #140a04;
}
:root[data-skin="snd"] body::after {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}
:root[data-skin="snd"] header.top {
  /* classic demoscene scroller strip */
  background:
    repeating-linear-gradient(90deg, rgba(255,122,24,.14) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #241206, #140a04);
  border-bottom: 2px solid var(--color-accent);
}
:root[data-skin="snd"] .brand .name,
:root[data-skin="snd"] .listhead h1 {
  color: #ffd8a8;
  text-shadow: 0 2px 0 #ff7a18, 0 4px 8px rgba(255,60,0,.5), 0 0 14px rgba(255,122,24,.6);
}
:root[data-skin="snd"] .sheet {
  border: 1px solid rgba(255,122,24,.4);
  box-shadow: 0 0 24px rgba(255,122,24,.2);
}
:root[data-skin="snd"] .agentcta {
  background: linear-gradient(180deg, #5a2600, #241206);
  border: 1px solid var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255,180,80,.4);
}
:root[data-skin="snd"] .btn-primary,
:root[data-skin="snd"] .searchwrap .btn {
  background: linear-gradient(180deg, #ffb057, #ff7a18 55%, #c74e00);
  color: #140a04;
  border: 1px solid #ffd8a8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

/* --- TSRh: CHROME TEXT (magenta) ------------------------------------------ */
:root[data-skin="tsrh"] body::before {
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(232,50,255,.2), transparent 55%),
    linear-gradient(180deg, #1c0620, #100310);
}
:root[data-skin="tsrh"] body::after {
  background: linear-gradient(180deg, transparent 55%, rgba(232,50,255,.08) 75%, transparent 90%);
}
:root[data-skin="tsrh"] header.top {
  background: linear-gradient(180deg, #3a0a44 0%, #28082e 48%, #1a061e 52%, #28082e 100%);
  border-bottom: 2px solid var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
:root[data-skin="tsrh"] .brand .name,
:root[data-skin="tsrh"] .listhead h1 {
  background: linear-gradient(180deg, #ffffff 0%, #ffc8ff 40%, #7a0e8a 52%, #ffd6ff 62%, #e832ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.7));
}
:root[data-skin="tsrh"] .sheet {
  border: 1px solid rgba(232,50,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 26px rgba(232,50,255,.2);
}
:root[data-skin="tsrh"] .agentcta {
  background: linear-gradient(180deg, rgba(232,50,255,.24), rgba(74,10,86,.6));
  border: 1px solid var(--color-accent);
}
:root[data-skin="tsrh"] .btn-primary,
:root[data-skin="tsrh"] .searchwrap .btn {
  background: linear-gradient(180deg, #ffffff, #ffc8ff 46%, #d24ee0 54%, #7a0e8a);
  color: #1a061e;
  border: 1px solid #ffd6ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* --- tRUE: VECTOR GRID FLOOR (Amiga green) -------------------------------- */
:root[data-skin="true"] body::before {
  /* perspective checker/vector floor + horizon glow */
  background:
    linear-gradient(180deg, transparent 55%, rgba(42,255,138,.12) 100%),
    repeating-linear-gradient(90deg, rgba(42,255,138,.18) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(42,255,138,.12) 0 1px, transparent 1px 40px),
    radial-gradient(120% 70% at 50% -10%, rgba(42,255,138,.14), transparent 55%),
    #04140a;
}
:root[data-skin="true"] body::after {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
:root[data-skin="true"] header.top {
  background:
    repeating-linear-gradient(90deg, rgba(42,255,138,.1) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #0a2814, #04140a);
  border-bottom: 2px solid var(--color-accent);
}
:root[data-skin="true"] .brand .name,
:root[data-skin="true"] .listhead h1 {
  color: var(--color-accent);
  text-shadow: 0 0 6px rgba(42,255,138,.8), 2px 2px 0 #04140a;
}
:root[data-skin="true"] .sheet {
  border: 1px solid rgba(42,255,138,.4);
  box-shadow: inset 0 0 24px rgba(42,255,138,.05), 0 0 24px rgba(42,255,138,.15);
}
:root[data-skin="true"] .agentcta {
  background: linear-gradient(180deg, rgba(42,255,138,.16), rgba(10,74,36,.5));
  border: 1px solid var(--color-accent);
}
:root[data-skin="true"] .btn-primary,
:root[data-skin="true"] .searchwrap .btn {
  background: linear-gradient(180deg, #7fffb8, #2aff8a 55%, #0a9a4a);
  color: #04140a;
  border: 1px solid #7fffb8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

/* ============================================================================
   Motion: gentle life for backdrops, disabled under reduced-motion.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  :root[data-skin="paradox"] body::before { animation: lv-copper 6s linear infinite; }
  :root[data-skin="fff"] body::before { animation: lv-copper 4s linear infinite; }
  :root[data-skin="tport"] body::before { animation: lv-plasma 14s ease-in-out infinite; }
  :root[data-skin="snd"] body::before { animation: lv-flicker 5s ease-in-out infinite; }
  @keyframes lv-copper { from { background-position-y: 0; } to { background-position-y: 56px; } }
  @keyframes lv-plasma {
    0%,100% { filter: saturate(1.2) hue-rotate(0deg); }
    50% { filter: saturate(1.4) hue-rotate(24deg); }
  }
  @keyframes lv-flicker { 0%,100% { opacity: 1; } 50% { opacity: .82; } }
}

/* ============================================================================
   HELE SIDEN, IKKE BARE FARGEN.
   Under her endrer hvert skin selve oppsettet, ikke bare paletten. Bredden på
   spalta, hvordan topplinja er stilt opp, formen på arket og rammene, lenke- og
   overskriftstil. Målet er at to skins skal kjennes som to forskjellige
   nettsteder fra epoken.

   To ting å vite om spesifisiteten. skins.js sprøyter inn et stilelement til
   slutt i head med regler på .sheet merket !important (ramme, skygge, flate).
   For å faktisk endre arket må reglene her ha høyere spesifisitet, derfor er de
   skrevet som .shell .sheet og merket !important. Topplinje, .topbar, main.shell
   og .tabrow rører skins.js ikke, så der holder det med et vanlig skinscope.
   ============================================================================ */

/* --- RAZOR 1911: NFO-slippet. Smal, midtstilt spalte på svart, dobbel blodrød
   ramme rundt et ark som ser ut som et tekstdokument fra en cracktro. --------- */
:root[data-skin="razor1911"] main.shell,
:root[data-skin="razor1911"] .topbar,
:root[data-skin="razor1911"] .tabrow { max-width: 880px; }
:root[data-skin="razor1911"] .topbar { justify-content: center; flex-wrap: wrap; row-gap: 10px; }
:root[data-skin="razor1911"] .brand { flex: 1 1 100%; justify-content: center; }
:root[data-skin="razor1911"] .brand .name { font-size: 40px; letter-spacing: .12em; }
:root[data-skin="razor1911"] .searchwrap { flex: 0 1 460px; }
:root[data-skin="razor1911"] .tabrow { justify-content: center; }
:root[data-skin="razor1911"] .shell .sheet {
  border-radius: 0 !important;
  border: 2px solid #ff3b30 !important;
  padding: 30px clamp(20px,3vw,44px) 40px !important;
  box-shadow: 0 0 0 2px #060606, 0 0 0 4px #b30400, inset 0 0 70px rgba(225,6,0,.07), 0 24px 60px rgba(0,0,0,.85) !important;
}
:root[data-skin="razor1911"] .listhead { justify-content: center; text-align: center; }
:root[data-skin="razor1911"] .rule { height: 0; background: none; border-top: 2px dashed rgba(255,59,48,.55); border-radius: 0; }
:root[data-skin="razor1911"] .row .open::before { content: "» "; color: #ff3b30; }

/* --- FAIRLIGHT: Frutiger Aero. Bred, lys, avrundet glassplate med speilglans,
   pilleformede kontroller, aqua-refleks i topplinja. --------------------------- */
:root[data-skin="fairlight"] main.shell,
:root[data-skin="fairlight"] .topbar,
:root[data-skin="fairlight"] .tabrow { max-width: 1080px; }
:root[data-skin="fairlight"] header.top {
  border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -14px 24px rgba(0,229,255,.12), 0 6px 22px rgba(0,229,255,.2);
}
:root[data-skin="fairlight"] .searchwrap .input { border-radius: 999px 0 0 999px; }
:root[data-skin="fairlight"] .searchwrap .btn,
:root[data-skin="fairlight"] .topmeta .btn,
:root[data-skin="fairlight"] .btn-primary { border-radius: 999px; }
:root[data-skin="fairlight"] .shell .sheet {
  border-radius: 22px !important;
  border: 1px solid rgba(0,229,255,.5) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 16%),
    linear-gradient(180deg, rgba(0,229,255,.08), transparent 34%) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -30px 60px rgba(0,229,255,.08), 0 20px 50px rgba(0,20,40,.55) !important;
}
:root[data-skin="fairlight"] .agentcta { border-radius: 16px; }

/* --- RADIUM: fosforterminalen. Smalt, monospace, et grønt terminalvindu med en
   falsk kommandolinje øverst i arket. ------------------------------------------ */
:root[data-skin="radium"] main.shell,
:root[data-skin="radium"] .topbar,
:root[data-skin="radium"] .tabrow { max-width: 820px; }
:root[data-skin="radium"] header.top { border-bottom: 1px dashed rgba(57,255,20,.6); }
:root[data-skin="radium"] .shell .sheet {
  border-radius: 0 !important;
  border: 1px solid rgba(57,255,20,.55) !important;
  padding-top: 42px !important;
  background: #050805 !important;
  box-shadow: inset 0 0 60px rgba(57,255,20,.07), 0 0 0 1px #061006, 0 0 30px rgba(57,255,20,.18) !important;
}
:root[data-skin="radium"] .shell .sheet::before {
  content: "root@radium:~/lovdata$ grep -ri" !important;
  display: block !important; position: absolute !important;
  left: 0; right: 0; top: 0; height: auto !important;
  padding: 6px 12px; border-radius: 0 !important;
  background: rgba(57,255,20,.1) !important;
  border-bottom: 1px solid rgba(57,255,20,.4) !important;
  font-family: "VT323", ui-monospace, monospace; font-size: 16px; color: #7dff5a;
}
:root[data-skin="radium"] .rule { height: 0; background: none; border-top: 1px dashed rgba(57,255,20,.5); }
:root[data-skin="radium"] .row .open::before { content: "> "; color: #39ff14; }

/* --- CORE: keygen-dialogen. Hele siden er ett lite, midtstilt programvindu med
   tittellinje. Topplinja og arket klemmes sammen til én stålramme. ------------- */
:root[data-skin="core"] main.shell { max-width: 760px; padding-top: 26px; }
:root[data-skin="core"] .topbar,
:root[data-skin="core"] .tabrow { max-width: 760px; }
:root[data-skin="core"] header.top {
  max-width: 760px; margin: 12px auto 0;
  border: 2px solid; border-color: #4a5262 #0a0b0e transparent #4a5262;
  border-radius: 5px 5px 0 0;
}
:root[data-skin="core"] .shell .sheet {
  border-radius: 0 0 5px 5px !important;
  border: 2px solid !important;
  border-color: #3a4150 #0a0b0e #0a0b0e #3a4150 !important;
  padding: 28px clamp(18px,3vw,40px) 36px !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.1), inset -1px -1px 0 rgba(0,0,0,.6), 0 14px 40px rgba(0,0,0,.7) !important;
}
:root[data-skin="core"] .listhead h1::before { content: "▚ "; color: var(--color-accent); }

/* --- DEViANCE: bredt kromoppslag. Full pigg-topp, brei kolonne, børstet
   metallplate med en kald krombjelke øverst. ----------------------------------- */
:root[data-skin="deviance"] main.shell,
:root[data-skin="deviance"] .topbar,
:root[data-skin="deviance"] .tabrow { max-width: 1180px; }
:root[data-skin="deviance"] .brand .name { font-size: 30px; letter-spacing: .06em; }
:root[data-skin="deviance"] .shell .sheet {
  border-radius: 0 !important;
  border: 1px solid #3a3e49 !important;
  border-top: 0 !important;
  padding-top: 40px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.75) !important;
}
:root[data-skin="deviance"] .shell .sheet::before {
  display: block !important; position: absolute !important; left: 0; right: 0; top: 0;
  height: 18px !important; border-radius: 0 !important;
  background: linear-gradient(180deg,#eef0f4,#b9bec9 46%,#6b7180 54%,#23262e) !important;
  box-shadow: 0 2px 0 var(--color-accent);
}
:root[data-skin="deviance"] .row .open::before { content: "◤ "; color: var(--color-accent); }

/* --- PARADOX: Amiga-demoen. Copperbar-banner på tvers øverst, midtstilt
   fastbreddespalte, pikselaktig og symmetrisk. --------------------------------- */
:root[data-skin="paradox"] main.shell,
:root[data-skin="paradox"] .topbar,
:root[data-skin="paradox"] .tabrow { max-width: 900px; }
:root[data-skin="paradox"] .topbar { justify-content: center; flex-wrap: wrap; row-gap: 10px; }
:root[data-skin="paradox"] .brand { flex: 1 1 100%; justify-content: center; }
:root[data-skin="paradox"] .searchwrap { flex: 0 1 480px; }
:root[data-skin="paradox"] .tabrow { justify-content: center; }
:root[data-skin="paradox"] .shell .sheet {
  border-radius: 0 !important;
  border: 2px solid #00c2ff !important;
  padding: 28px clamp(18px,3vw,44px) 38px !important;
  box-shadow: 0 0 0 2px #ff7a18, 0 0 0 4px #0a0e27, 0 20px 50px rgba(0,0,0,.65) !important;
}
:root[data-skin="paradox"] .listhead { justify-content: center; text-align: center; }
:root[data-skin="paradox"] .rule {
  height: 8px; border-radius: 0; background: repeating-linear-gradient(90deg,#00c2ff 0 10px,#ff7a18 10px 20px);
}

/* --- HOODLUM: gata. Ikke midtstilt. Alt er dyttet mot venstre og skjevt, med
   harde svarte offset-skygger som en stencil på betong. ------------------------ */
:root[data-skin="hoodlum"] main.shell,
:root[data-skin="hoodlum"] .topbar,
:root[data-skin="hoodlum"] .tabrow { max-width: 1000px; margin-left: max(24px, calc(50% - 500px)); margin-right: auto; }
:root[data-skin="hoodlum"] .brand .name { transform: skewX(-8deg); }
:root[data-skin="hoodlum"] .shell .sheet {
  border-radius: 0 !important;
  border: 2px solid #2a2a30 !important;
  border-left: 6px solid var(--color-accent) !important;
  box-shadow: 10px 10px 0 rgba(0,0,0,.55) !important;
}
:root[data-skin="hoodlum"] .listhead h1 { transform: skewX(-6deg); }
:root[data-skin="hoodlum"] .row .open::before { content: "// "; color: var(--color-accent); }

/* --- MYTH: monumentet. Midtstilt, symmetrisk, brede marger, gullhårstrek og
   graverte serif-overskrifter sentrert som en innskrift. ----------------------- */
:root[data-skin="myth"] main.shell,
:root[data-skin="myth"] .topbar,
:root[data-skin="myth"] .tabrow { max-width: 900px; }
:root[data-skin="myth"] .topbar { justify-content: center; flex-wrap: wrap; row-gap: 12px; }
:root[data-skin="myth"] .brand { flex: 1 1 100%; justify-content: center; }
:root[data-skin="myth"] .brand .name { font-size: 34px; letter-spacing: .12em; }
:root[data-skin="myth"] .searchwrap { flex: 0 1 460px; }
:root[data-skin="myth"] .tabrow { justify-content: center; }
:root[data-skin="myth"] .shell .sheet {
  border-radius: 0 !important;
  border: 1px solid #c7a24b !important;
  padding: 40px clamp(28px,5vw,72px) 48px !important;
  box-shadow: inset 0 0 0 1px rgba(199,162,75,.35), inset 0 0 0 6px rgba(199,162,75,.08), 0 20px 50px rgba(0,0,0,.6) !important;
}
:root[data-skin="myth"] .listhead { justify-content: center; text-align: center; }
:root[data-skin="myth"] .listhead h1 { letter-spacing: .06em; }
:root[data-skin="myth"] .rule {
  height: 0; background: none;
  border-top: 1px solid #c7a24b;
  box-shadow: 0 3px 0 -1px rgba(199,162,75,.4);
}

/* --- CLASS: marineblått Frutiger-krom. Bredt, avrundet, glassaktig som
   FairLight, men kaldere og mer nedtonet. -------------------------------------- */
:root[data-skin="class"] main.shell,
:root[data-skin="class"] .topbar,
:root[data-skin="class"] .tabrow { max-width: 1060px; }
:root[data-skin="class"] header.top {
  border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 20px rgba(47,208,230,.18);
}
:root[data-skin="class"] .searchwrap .input { border-radius: 8px 0 0 8px; }
:root[data-skin="class"] .searchwrap .btn,
:root[data-skin="class"] .topmeta .btn { border-radius: 8px; }
:root[data-skin="class"] .shell .sheet {
  border-radius: 18px !important;
  border: 1px solid rgba(47,208,230,.4) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 14%),
    linear-gradient(180deg, rgba(47,208,230,.06), transparent 30%) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 18px 46px rgba(6,12,30,.6) !important;
}

/* --- tPORt: pikselcracktro. Smal, midtstilt kolonne, Press Start 2P-banner,
   dobbel neonramme rundt arket. ------------------------------------------------ */
:root[data-skin="tport"] main.shell,
:root[data-skin="tport"] .topbar,
:root[data-skin="tport"] .tabrow { max-width: 820px; }
:root[data-skin="tport"] .topbar { justify-content: center; flex-wrap: wrap; row-gap: 12px; }
:root[data-skin="tport"] .brand { flex: 1 1 100%; justify-content: center; }
:root[data-skin="tport"] .searchwrap { flex: 0 1 480px; }
:root[data-skin="tport"] .tabrow { justify-content: center; }
:root[data-skin="tport"] .shell .sheet {
  border-radius: 0 !important;
  border: 2px solid #00e0ff !important;
  padding: 28px clamp(18px,3vw,40px) 38px !important;
  box-shadow: 0 0 0 2px #b026ff, 0 0 30px rgba(176,38,255,.4), 0 20px 50px rgba(0,0,0,.7) !important;
}
:root[data-skin="tport"] .listhead { justify-content: center; text-align: center; }
:root[data-skin="tport"] .rule { height: 4px; background: repeating-linear-gradient(90deg,#00e0ff 0 6px,#b026ff 6px 12px); border-radius: 0; }
:root[data-skin="tport"] .row .open::before { content: "* "; color: #00e0ff; }

/* --- FFF: fart. Bred, alt lener seg i kursiv, tjukk fareramme på venstre side og
   racing-stripe under overskriftene. ------------------------------------------- */
:root[data-skin="fff"] main.shell,
:root[data-skin="fff"] .topbar,
:root[data-skin="fff"] .tabrow { max-width: 1080px; }
:root[data-skin="fff"] .shell .sheet {
  border-radius: 0 !important;
  border: 2px solid #ffe000 !important;
  border-left: 10px solid #ffe000 !important;
  transform: skewX(-1.2deg);
  box-shadow: 8px 8px 0 rgba(255,224,0,.35), 0 16px 40px rgba(0,0,0,.7) !important;
}
:root[data-skin="fff"] .listhead h1 { font-style: italic; transform: skewX(-10deg); }
:root[data-skin="fff"] .rule { height: 6px; border-radius: 0; background: repeating-linear-gradient(135deg,#ffe000 0 10px,#101008 10px 20px); }
:root[data-skin="fff"] .row .open::before { content: "» "; color: #ffe000; font-style: italic; }

/* --- PSC: kald blå stjernehimmel. Smal midtstilt cracktro-kolonne, tynn
   neonramme, prikkete separatorer. --------------------------------------------- */
:root[data-skin="psc"] main.shell,
:root[data-skin="psc"] .topbar,
:root[data-skin="psc"] .tabrow { max-width: 840px; }
:root[data-skin="psc"] .topbar { justify-content: center; flex-wrap: wrap; row-gap: 10px; }
:root[data-skin="psc"] .brand { flex: 1 1 100%; justify-content: center; }
:root[data-skin="psc"] .searchwrap { flex: 0 1 460px; }
:root[data-skin="psc"] .tabrow { justify-content: center; }
:root[data-skin="psc"] .shell .sheet {
  border-radius: 0 !important;
  border: 1px solid #22a0ff !important;
  padding: 28px clamp(18px,3vw,44px) 38px !important;
  background: rgba(4,18,31,.9) !important;
  box-shadow: inset 0 0 40px rgba(34,160,255,.12), 0 0 0 1px #041020, 0 18px 46px rgba(0,0,0,.7) !important;
}
:root[data-skin="psc"] .listhead { justify-content: center; text-align: center; }
:root[data-skin="psc"] .rule { height: 0; background: none; border-top: 1px dotted rgba(34,160,255,.7); }
:root[data-skin="psc"] .row .open::before { content: "· "; color: #6cc4ff; }

/* --- SnD: flammescroller. Smal midtstilt kolonne, ramme som gløder nedenfra, en
   ildstripe under overskriftene. ----------------------------------------------- */
:root[data-skin="snd"] main.shell,
:root[data-skin="snd"] .topbar,
:root[data-skin="snd"] .tabrow { max-width: 840px; }
:root[data-skin="snd"] .topbar { justify-content: center; flex-wrap: wrap; row-gap: 10px; }
:root[data-skin="snd"] .brand { flex: 1 1 100%; justify-content: center; }
:root[data-skin="snd"] .searchwrap { flex: 0 1 460px; }
:root[data-skin="snd"] .tabrow { justify-content: center; }
:root[data-skin="snd"] .shell .sheet {
  border-radius: 0 !important;
  border: 1px solid rgba(255,122,24,.6) !important;
  padding: 28px clamp(18px,3vw,44px) 38px !important;
  box-shadow: inset 0 -40px 60px rgba(255,60,0,.1), 0 0 0 1px #241206, 0 18px 46px rgba(0,0,0,.7) !important;
}
:root[data-skin="snd"] .listhead { justify-content: center; text-align: center; }
:root[data-skin="snd"] .rule { height: 4px; border-radius: 0; background: linear-gradient(90deg,#ff3c00,#ff7a18 50%,#ffb428); }
:root[data-skin="snd"] .row .open::before { content: "▸ "; color: #ff7a18; }

/* --- TSRh: magenta krom. Midtstilt kolonne, kromkant, symmetrisk banner. ------ */
:root[data-skin="tsrh"] main.shell,
:root[data-skin="tsrh"] .topbar,
:root[data-skin="tsrh"] .tabrow { max-width: 860px; }
:root[data-skin="tsrh"] .topbar { justify-content: center; flex-wrap: wrap; row-gap: 10px; }
:root[data-skin="tsrh"] .brand { flex: 1 1 100%; justify-content: center; }
:root[data-skin="tsrh"] .searchwrap { flex: 0 1 460px; }
:root[data-skin="tsrh"] .tabrow { justify-content: center; }
:root[data-skin="tsrh"] .shell .sheet {
  border-radius: 0 !important;
  border: 1px solid rgba(232,50,255,.55) !important;
  padding: 28px clamp(18px,3vw,44px) 38px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px #1a061e, 0 0 30px rgba(232,50,255,.22), 0 18px 46px rgba(0,0,0,.7) !important;
}
:root[data-skin="tsrh"] .listhead { justify-content: center; text-align: center; }
:root[data-skin="tsrh"] .rule { height: 3px; border-radius: 0; background: linear-gradient(90deg,#7a0e8a,#e832ff 50%,#ffd6ff); }

/* --- tRUE: full neon-vektorgulv. Bredt, ingen midtstilt kort. Arket blir
   halvgjennomsiktig så rutenettet bak skinner igjennom, grønn glød i kanten. ---- */
:root[data-skin="true"] main.shell,
:root[data-skin="true"] .topbar,
:root[data-skin="true"] .tabrow { max-width: 1480px; }
:root[data-skin="true"] .shell .sheet {
  border-radius: 0 !important;
  border: 1px solid rgba(42,255,138,.55) !important;
  background: rgba(4,20,10,.74) !important;
  box-shadow: inset 0 0 60px rgba(42,255,138,.08), 0 0 0 1px #04140a, 0 0 40px rgba(42,255,138,.22) !important;
}
:root[data-skin="true"] .listhead h1::before { content: "△ "; color: var(--color-accent); }
:root[data-skin="true"] .rule { height: 0; background: none; border-top: 1px solid rgba(42,255,138,.5); box-shadow: 0 2px 8px rgba(42,255,138,.4); }
:root[data-skin="true"] .row .open::before { content: "▹ "; color: #2aff8a; }

/* Smal skjerm: fastbreddespaltene skal ikke tvinge fram vannrett rulling. Under
   940 piksler slippes bredde-låsene så alt flyter som ellers. */
@media (max-width: 940px) {
  :root[data-skin="razor1911"] main.shell, :root[data-skin="razor1911"] .topbar, :root[data-skin="razor1911"] .tabrow,
  :root[data-skin="radium"] main.shell, :root[data-skin="radium"] .topbar, :root[data-skin="radium"] .tabrow,
  :root[data-skin="core"] main.shell, :root[data-skin="core"] .topbar, :root[data-skin="core"] .tabrow, :root[data-skin="core"] header.top,
  :root[data-skin="paradox"] main.shell, :root[data-skin="paradox"] .topbar, :root[data-skin="paradox"] .tabrow,
  :root[data-skin="hoodlum"] main.shell, :root[data-skin="hoodlum"] .topbar, :root[data-skin="hoodlum"] .tabrow,
  :root[data-skin="myth"] main.shell, :root[data-skin="myth"] .topbar, :root[data-skin="myth"] .tabrow,
  :root[data-skin="tport"] main.shell, :root[data-skin="tport"] .topbar, :root[data-skin="tport"] .tabrow,
  :root[data-skin="psc"] main.shell, :root[data-skin="psc"] .topbar, :root[data-skin="psc"] .tabrow,
  :root[data-skin="snd"] main.shell, :root[data-skin="snd"] .topbar, :root[data-skin="snd"] .tabrow,
  :root[data-skin="tsrh"] main.shell, :root[data-skin="tsrh"] .topbar, :root[data-skin="tsrh"] .tabrow {
    max-width: none; margin-left: auto; margin-right: auto;
  }
}