/* ==========================================================================
   90S KID-TOY SKIN FLOURISHES
   Palettes live in skin-manager.js. This file adds just the signature
   texture/shape touches that make each theme recognizable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Game Boy — dot-matrix LCD grid + chunky gray case
   -------------------------------------------------------------------------- */

body.gameboy-active .player {
  background:
    linear-gradient(180deg, #c8c8c8 0%, #b0b0b0 100%);
  border: 2px solid #4a4a4a;
  box-shadow:
    inset 0 2px 0 #ffffff80,
    inset 0 -2px 0 #00000030,
    0 6px 0 #606060,
    0 8px 24px #00000060;
  border-radius: 8px 8px 40px 8px;
}

body.gameboy-active .title-bar {
  background: linear-gradient(180deg, #a8a8a8, #909090);
  border-bottom: 1px solid #4a4a4a;
  box-shadow: inset 0 1px 0 #ffffff60;
}

body.gameboy-active .lcd-section {
  position: relative;
  background: #9bbc0f;
  border: 3px solid #4a4a4a;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px #306230,
    inset 0 2px 8px #0f380f40;
}

body.gameboy-active .lcd-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, #0f380f18 2px 3px),
    repeating-linear-gradient(0deg,  transparent 0 2px, #0f380f18 2px 3px);
  pointer-events: none;
  z-index: 4;
}

body.gameboy-active .transport-btn {
  background: linear-gradient(180deg, #5c2a5c, #3a1a3a);
  border: 1px solid #2a0a2a;
  color: #e8d8e8;
  box-shadow:
    inset 0 1px 0 #ffffff40,
    0 2px 0 #1a0a1a;
}

body.gameboy-active .transport-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px #00000060;
}

/* --------------------------------------------------------------------------
   Box TV (CRT) — barrel curve vignette + phosphor glow
   -------------------------------------------------------------------------- */

body.crt-active .player {
  background:
    radial-gradient(ellipse at center, #4a3e34 0%, #2a211c 70%, #1a1310 100%);
  border: 3px solid #1a1008;
  box-shadow:
    inset 0 0 40px #00000080,
    0 8px 32px #000000a0;
  border-radius: 12px;
}

body.crt-active .lcd-section {
  position: relative;
  background: radial-gradient(ellipse at center, #2a1a08 0%, #1a0f06 70%, #0a0604 100%);
  border-radius: 40px / 20px;
  box-shadow:
    inset 0 0 30px #000000c0,
    inset 0 0 80px #ffb00015;
  overflow: hidden;
}

body.crt-active .lcd-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    #00000040 2px 3px
  );
  pointer-events: none;
  z-index: 5;
}

body.crt-active .lcd-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, #00000090 100%);
  pointer-events: none;
  z-index: 6;
}

body.crt-active .lcd-time-digits,
body.crt-active .lcd-marquee,
body.crt-active .lcd-samplerate,
body.crt-active .lcd-bitrate {
  text-shadow:
    0 0 4px #ffb000,
    0 0 10px #ffb00080,
    0 0 20px #ff800040;
}

/* --------------------------------------------------------------------------
   Tamagotchi — egg-shaped casing
   -------------------------------------------------------------------------- */

body.tamagotchi-active .player {
  border-radius: 48px 48px 56px 56px / 30px 30px 72px 72px;
  box-shadow:
    inset 0 4px 0 #ffffff60,
    inset 0 -6px 0 #00000020,
    0 8px 24px #aa286450;
}

body.tamagotchi-active .lcd-section {
  border-radius: 12px;
  border: 3px solid #1a0810;
  box-shadow: inset 0 0 10px #00000040;
}

/* --------------------------------------------------------------------------
   Furby — fur texture
   -------------------------------------------------------------------------- */

body.furby-active .player {
  background:
    radial-gradient(circle at 20% 30%, #a85a30 0 3px, transparent 4px),
    radial-gradient(circle at 60% 70%, #6a3620 0 3px, transparent 4px),
    radial-gradient(circle at 80% 20%, #9a4a20 0 2px, transparent 3px),
    radial-gradient(circle at 35% 80%, #7a3a1a 0 2px, transparent 3px),
    linear-gradient(180deg, #8b4a2b 0%, #6a3620 100%);
  background-size: 14px 14px, 18px 18px, 12px 12px, 16px 16px, 100% 100%;
}

/* --------------------------------------------------------------------------
   Mickey Mouse phone — polka dots
   -------------------------------------------------------------------------- */

body.mickey-active .playlist-panel {
  background:
    radial-gradient(circle at 20% 30%, #ffd70018 0 8px, transparent 10px),
    radial-gradient(circle at 70% 60%, #ffd70018 0 6px, transparent 8px),
    radial-gradient(circle at 45% 85%, #ffd70018 0 7px, transparent 9px),
    #1a0505;
  background-size: 60px 60px, 50px 50px, 70px 70px, 100% 100%;
}

body.mickey-active .title-bar {
  background: linear-gradient(180deg, #d42820, #a01510);
  border-bottom: 2px solid #ffd700;
}

/* --------------------------------------------------------------------------
   Cassette — tape stripe label + reels
   -------------------------------------------------------------------------- */

body.cassette-active .title-bar {
  background:
    repeating-linear-gradient(
      90deg,
      #d4b86a 0 24px,
      #a89968 24px 26px
    );
  color: #1a1a1a;
  border-bottom: 1px solid #6a5a30;
  box-shadow: inset 0 -1px 0 #00000040;
}

body.cassette-active .title-bar-text,
body.cassette-active .title-bar-logo,
body.cassette-active .title-bar-version {
  color: #1a1a1a;
  text-shadow: 0 1px 0 #ffffff60;
}

body.cassette-active .lcd-section {
  background:
    linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  border: 1px solid #4a4433;
  box-shadow: inset 0 0 20px #00000080;
}

/* --------------------------------------------------------------------------
   Power Ranger — gold belt stripe + visor LCD
   -------------------------------------------------------------------------- */

body.powerranger-active .title-bar {
  background:
    linear-gradient(180deg, #ffd700 0 4px, #d4141c 4px 100%);
  border-bottom: 2px solid #ffd700;
}

body.powerranger-active .lcd-section {
  background: linear-gradient(180deg, #1a0008 0%, #0a0004 100%);
  border: 1px solid #ffd700;
  box-shadow:
    inset 0 0 20px #ffffff10,
    0 0 12px #ffd70040;
}

/* --------------------------------------------------------------------------
   TMNT — bandana stripe
   -------------------------------------------------------------------------- */

body.tmnt-active .title-bar {
  background: linear-gradient(180deg, #b8302a 0%, #8a1e18 100%);
  border-bottom: 2px solid #0f2010;
  color: #fff;
}

body.tmnt-active .title-bar-text,
body.tmnt-active .title-bar-logo {
  color: #fff;
  text-shadow: 0 1px 2px #000000a0;
}

/* --------------------------------------------------------------------------
   Raggedy Ann — gingham / stitch border
   -------------------------------------------------------------------------- */

body.raggedy-active .player {
  border: 2px dashed #2848a0;
  background:
    repeating-linear-gradient(45deg,
      #f4e4d2 0 10px, #eed4ba 10px 20px);
}

body.raggedy-active .title-bar {
  background: linear-gradient(180deg, #e02838, #b81828);
  color: #fff;
  border-bottom: 2px dashed #fff5ed;
}

body.raggedy-active .title-bar-text,
body.raggedy-active .title-bar-logo,
body.raggedy-active .title-bar-version {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Gak — drippy slime glow
   -------------------------------------------------------------------------- */

body.gak-active .player {
  background:
    radial-gradient(ellipse at 30% 10%, #6aff1a40 0%, transparent 40%),
    radial-gradient(ellipse at 80% 90%, #9dff2630 0%, transparent 50%),
    linear-gradient(180deg, #1a4a0d 0%, #081c04 100%);
  box-shadow:
    0 0 30px #9dff2640,
    0 0 60px #6aff1a30,
    inset 0 0 40px #0a1a0680;
  border-radius: 12px 24px 8px 20px;
}

body.gak-active .lcd-time-digits,
body.gak-active .lcd-marquee {
  text-shadow:
    0 0 6px #9dff26,
    0 0 14px #6aff1a80,
    0 0 28px #9dff2640;
}

/* --------------------------------------------------------------------------
   Trolls — rainbow hair gradient
   -------------------------------------------------------------------------- */

body.trolls-active .title-bar {
  background: linear-gradient(
    90deg,
    #ff40ff 0%,
    #ffee00 25%,
    #40ff9a 50%,
    #00c8e4 75%,
    #ff40ff 100%
  );
  background-size: 200% 100%;
  animation: trolls-rainbow 8s linear infinite;
  border-bottom: 2px solid #ffd700;
}

body.trolls-active .title-bar-text,
body.trolls-active .title-bar-logo,
body.trolls-active .title-bar-version {
  color: #1a0520;
  text-shadow: 0 1px 0 #ffffff80;
  font-weight: bold;
}

@keyframes trolls-rainbow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* --------------------------------------------------------------------------
   Polly Pocket — glossy plastic shine
   -------------------------------------------------------------------------- */

body.pollypocket-active .player {
  background:
    linear-gradient(180deg,
      #ffc4d8 0%,
      #ff9ec4 30%,
      #f07aad 100%);
  box-shadow:
    inset 0 6px 20px #ffffffa0,
    inset 0 -4px 12px #d4408a40,
    0 6px 24px #d4408a50;
  border-radius: 20px;
}

body.pollypocket-active .title-bar {
  background: linear-gradient(180deg, #ffe4f0, #ffb6d1);
  box-shadow: inset 0 1px 0 #ffffff;
  border-bottom: 1px solid #d4408a40;
}

body.pollypocket-active .lcd-section {
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px #d4408a,
    inset 0 2px 8px #d4408a30;
}

/* --------------------------------------------------------------------------
   Reduced motion — kill the one animated skin
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.trolls-active .title-bar {
    animation: none;
  }
}