/* ==========================================================================
   Zusaetzliche System-Skins und ihr Look-and-Feel.
   Farben weiter nur als Variablen. Chrome (Rahmen, Leisten, Knoepfe) darf
   je Maschine anders gebaut sein: Windows 95 ist kein umgefaerbter C64.
   ========================================================================== */

/* ---------- 7. WINDOWS 95 --------------------------------------------------
   Teal-Desktop, silberne Flaechen, navy Titelleiste, 3D-Kanten. */
[data-skin='win95'] {
  --bg:        #008080;
  --bg-deep:   #007070;
  --surface:   #c0c0c0;
  --surface-2: #c0c0c0;
  --fg:        #000000;
  --fg-dim:    #404040;
  --accent:    #000080;
  --accent-2:  #000080;
  --accent-3:  #800000;
  --border:    #808080;
  --border-hi: #ffffff;
  --shadow:    #000000;
  --scanlines: 0;
  --glow: 0;
  --glow-px: 0px;
  --skin-label: 'WIN95';
  --bevel-hi:  #ffffff;
  --bevel-lo:  #000000;
  --bevel-mid: #808080;
  --title-fg:  #ffffff;
}

[data-skin='win95'] .topbar {
  background: var(--accent);
  border-bottom: 2px solid var(--bevel-lo);
}
[data-skin='win95'] .brand,
[data-skin='win95'] .brand b,
[data-skin='win95'] .nav a,
[data-skin='win95'] .lang__cur,
[data-skin='win95'] .lang__code {
  color: var(--title-fg);
}
[data-skin='win95'] .nav a:hover,
[data-skin='win95'] .nav a[aria-current='page'],
[data-skin='win95'] .brand__invader {
  color: #ffff80;
}
[data-skin='win95'] .panel,
[data-skin='win95'] .stat,
[data-skin='win95'] .std-block,
[data-skin='win95'] .cc-box {
  background: var(--surface);
  border: 2px solid;
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  box-shadow: inset -1px -1px var(--bevel-mid), inset 1px 1px #dfdfdf;
}
[data-skin='win95'] .btn {
  background: var(--surface);
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f-term);
  border: 2px solid;
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  box-shadow: inset -1px -1px var(--bevel-mid), inset 1px 1px #dfdfdf;
}
[data-skin='win95'] .btn:hover {
  color: var(--fg);
  background: #d4d4d4;
}
[data-skin='win95'] .btn:active {
  transform: none;
  border-color: var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  box-shadow: inset 1px 1px var(--bevel-mid);
}
[data-skin='win95'] h1, [data-skin='win95'] h2, [data-skin='win95'] h3 {
  text-shadow: none;
  text-transform: none;
}
[data-skin='win95'] .foot { border-top: 2px solid var(--bevel-lo); background: var(--surface); }

/* ---------- 8. MACINTOSH SYSTEM 7 ------------------------------------------
   Platin, schwarze 1-px-Kante, gestreifte Titelleiste. */
[data-skin='mac'] {
  --bg:        #cccccc;
  --bg-deep:   #aaaaaa;
  --surface:   #ffffff;
  --surface-2: #dddddd;
  --fg:        #000000;
  --fg-dim:    #444444;
  --accent:    #000000;
  --accent-2:  #000000;
  --accent-3:  #222222;
  --border:    #000000;
  --border-hi: #000000;
  --shadow:    #000000;
  --scanlines: 0;
  --glow: 0;
  --glow-px: 0px;
  --skin-label: 'MAC';
}

[data-skin='mac'] .topbar {
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
  background-image: repeating-linear-gradient(
    to bottom,
    #0000 0 2px,
    #00000022 2px 3px
  );
}
[data-skin='mac'] .brand,
[data-skin='mac'] .nav a { color: var(--fg); }
[data-skin='mac'] .nav a:hover,
[data-skin='mac'] .nav a[aria-current='page'] { color: var(--fg); text-decoration: underline; }
[data-skin='mac'] .panel,
[data-skin='mac'] .stat,
[data-skin='mac'] .std-block,
[data-skin='mac'] .cc-box {
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
}
[data-skin='mac'] .btn {
  background: var(--surface);
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
  border-radius: 6px;
}
[data-skin='mac'] .btn:hover { background: var(--fg); color: var(--surface); }
[data-skin='mac'] h1, [data-skin='mac'] h2, [data-skin='mac'] h3 { text-shadow: none; }
[data-skin='mac'] .foot { background: var(--surface-2); }

/* ---------- 9. AMIGA WORKBENCH --------------------------------------------
   Workbench-Blau, orange Gadgets, weisse Schrift. */
[data-skin='amiga'] {
  --bg:        #0055aa;
  --bg-deep:   #003388;
  --surface:   #aaaaaa;
  --surface-2: #aaaaaa;
  --fg:        #ffffff;
  --fg-dim:    #ddeeff;
  --accent:    #ff8800;
  --accent-2:  #ffcc66;
  --accent-3:  #ff8800;
  --border:    #ffffff;
  --border-hi: #ff8800;
  --shadow:    #002244;
  --scanlines: 0;
  --glow: 0;
  --glow-px: 0px;
  --skin-label: 'AMIGA';
}

[data-skin='amiga'] .topbar {
  background: var(--bg-deep);
  border-bottom: 3px solid var(--accent);
}
[data-skin='amiga'] .panel,
[data-skin='amiga'] .stat,
[data-skin='amiga'] .cc-box {
  color: #000000;
  background: var(--surface);
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
}
[data-skin='amiga'] .panel .dim,
[data-skin='amiga'] .stat .dim { color: #222244; }
[data-skin='amiga'] .stat__v { color: #000000; }
[data-skin='amiga'] .btn {
  background: var(--surface);
  color: #000000;
  text-transform: none;
  border: 2px solid;
  border-color: #ffffff #000000 #000000 #ffffff;
  box-shadow: none;
}
[data-skin='amiga'] .btn:hover { background: var(--accent); color: #000000; }
[data-skin='amiga'] h1, [data-skin='amiga'] h2, [data-skin='amiga'] h3 { text-shadow: none; }

/* ---------- 11. NES --------------------------------------------------------
   Das Gehaeuse, nicht der Bildschirm: hellgraue Platte, dunkelgrauer
   Unterbau, der rote Power-Knopf. */
[data-skin='nes'] {
  --bg:        #4a4a4a;
  --bg-deep:   #2e2e2e;
  --surface:   #d0d0cc;
  --surface-2: #c4c4c0;
  --fg:        #f2f2f0;
  --fg-dim:    #c4c4c0;
  --accent:    #e4000f;
  --accent-2:  #e4000f;
  --accent-3:  #1a1a1a;
  --border:    #2a2a2a;
  --border-hi: #e8e8e4;
  --shadow:    #1a1a1a;
  --scanlines: 0;
  --glow: 0;
  --glow-px: 0px;
  --skin-label: 'NES';
}

[data-skin='nes'] .topbar {
  background: #d0d0cc;
  border-bottom: 10px solid #2a2a2a;
}
[data-skin='nes'] .brand,
[data-skin='nes'] .brand b,
[data-skin='nes'] .nav a,
[data-skin='nes'] .lang__cur,
[data-skin='nes'] .lang__code { color: #1a1a1a; }
[data-skin='nes'] .nav a:hover,
[data-skin='nes'] .nav a[aria-current='page'],
[data-skin='nes'] .brand__invader { color: var(--accent); }
[data-skin='nes'] .panel,
[data-skin='nes'] .stat,
[data-skin='nes'] .std-block,
[data-skin='nes'] .cc-box {
  background: #d0d0cc;
  color: #1a1a1a;
  border: 3px solid #1a1a1a;
  box-shadow: 4px 4px 0 #1a1a1a;
}
[data-skin='nes'] .panel .dim,
[data-skin='nes'] .stat .dim,
[data-skin='nes'] .stat__src { color: #444444; }
[data-skin='nes'] .stat__v { color: var(--accent); }
[data-skin='nes'] .btn {
  background: #d0d0cc;
  color: #1a1a1a;
  border: 3px solid #1a1a1a;
  box-shadow: 3px 3px 0 #1a1a1a;
  text-transform: uppercase;
}
[data-skin='nes'] .btn:hover { background: var(--accent); color: #fff; }
[data-skin='nes'] h1, [data-skin='nes'] h2, [data-skin='nes'] h3 { text-shadow: none; }
[data-skin='nes'] .foot { background: #2e2e2e; border-top: 8px solid #d0d0cc; }

/* ---------- 12. PLAYSTATION ------------------------------------------------
   Das graue Plastikgehaeuse der ersten PlayStation, nicht der Startbildschirm.
   Sony-Grau, schwarzer Deckelstreifen. */
[data-skin='ps1'] {
  --bg:        #b8b5ae;
  --bg-deep:   #9a978f;
  --surface:   #d0cdc6;
  --surface-2: #c8c5be;
  --fg:        #2a2a28;
  --fg-dim:    #5c5a56;
  --accent:    #2a2a28;
  --accent-2:  #003791;
  --accent-3:  #df0024;
  --border:    #8a8780;
  --border-hi: #eceae4;
  --shadow:    #6e6b64;
  --scanlines: 0;
  --glow: 0;
  --glow-px: 0px;
  --skin-label: 'PS1';
}

[data-skin='ps1'] .topbar {
  background: #d0cdc6;
  border-bottom: 6px solid #2a2a28;
}
[data-skin='ps1'] .brand,
[data-skin='ps1'] .nav a { color: #2a2a28; }
[data-skin='ps1'] .nav a:hover,
[data-skin='ps1'] .nav a[aria-current='page'] { color: #003791; }
[data-skin='ps1'] .panel,
[data-skin='ps1'] .stat,
[data-skin='ps1'] .std-block,
[data-skin='ps1'] .cc-box {
  background: #d0cdc6;
  border: 2px solid #8a8780;
  box-shadow: 3px 3px 0 #6e6b64;
  border-radius: 4px;
}
[data-skin='ps1'] .btn {
  background: #d0cdc6;
  color: #2a2a28;
  text-transform: none;
  letter-spacing: .04em;
  border: 2px solid #6e6b64;
  border-radius: 4px;
  box-shadow: 2px 2px 0 #6e6b64;
}
[data-skin='ps1'] .btn:hover { background: #2a2a28; color: #d0cdc6; }
[data-skin='ps1'] h1, [data-skin='ps1'] h2, [data-skin='ps1'] h3 { text-shadow: none; text-transform: none; }
[data-skin='ps1'] .foot { background: #9a978f; }

/* ---------- 13. SELFIEBEATS ------------------------------------------------
   Default von selfiebeats.com: beiges Computergehaeuse, dunkle Schrift,
   rote LED, ein Hauch Phosphor. */
[data-skin='selfiebeats'] {
  --bg:        #9a927e;
  --bg-deep:   #7d7563;
  --surface:   #cbc3ae;
  --surface-2: #bfb7a3;
  --fg:        #221f17;
  --fg-dim:    #5e5746;
  --accent:    #d24b3e;
  --accent-2:  #3a8a48;
  --accent-3:  #e8923a;
  --border:    #6f6857;
  --border-hi: #d6cfba;
  --shadow:    #6f6857;
  --scanlines: 0;
  --glow: 0;
  --glow-px: 0px;
  --skin-label: 'SELFIEBEATS';
}

[data-skin='selfiebeats'] .topbar {
  background: #a79e88;
  border-bottom: 3px solid #5a5446;
}
[data-skin='selfiebeats'] .brand,
[data-skin='selfiebeats'] .nav a { color: #2c281d; }
[data-skin='selfiebeats'] .nav a:hover,
[data-skin='selfiebeats'] .nav a[aria-current='page'],
[data-skin='selfiebeats'] .brand__invader { color: #d24b3e; }
[data-skin='selfiebeats'] .panel,
[data-skin='selfiebeats'] .stat,
[data-skin='selfiebeats'] .std-block,
[data-skin='selfiebeats'] .cc-box {
  background: #cbc3ae;
  border: 2px solid #6f6857;
  box-shadow: inset 1px 1px 0 #d6cfba, 3px 3px 0 #6f6857;
}
[data-skin='selfiebeats'] .btn {
  background: #bfb7a3;
  color: #221f17;
  text-transform: none;
  border: 2px solid;
  border-color: #d6cfba #5a5446 #5a5446 #d6cfba;
  box-shadow: none;
}
[data-skin='selfiebeats'] .btn:hover { background: #d24b3e; color: #fff; }
[data-skin='selfiebeats'] h1, [data-skin='selfiebeats'] h2, [data-skin='selfiebeats'] h3 { text-shadow: none; }
[data-skin='selfiebeats'] .foot { background: #a79e88; }

/* ---------- Swatches in der Fussleiste ------------------------------------ */
.sw-win95       { background: linear-gradient(135deg, #008080 50%, #c0c0c0 50%); }
.sw-mac         { background: linear-gradient(135deg, #dddddd 50%, #000000 50%); }
.sw-amiga       { background: linear-gradient(135deg, #0055aa 50%, #ff8800 50%); }
.sw-nes         { background: linear-gradient(135deg, #d0d0cc 50%, #2a2a2a 50%); }
.sw-ps1         { background: linear-gradient(135deg, #b8b5ae 50%, #2a2a28 50%); }
.sw-selfiebeats { background: linear-gradient(135deg, #9a927e 50%, #d24b3e 50%); }

.skinbar { max-width: 22rem; }
.skinbar__b { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }