* {cursor: url('data:image/x-icon;base64,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'), auto;
}

body {
  background: url('https://blob.gifcities.org/gifcities/ENN7EVN2FQBVV476MPJDNFPABLLQNNQL.gif') repeat;
  color: #fff0f5;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-align: center;
  padding: 20px;
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.box {
  background-color: rgba(255, 192, 203, 0.7);
  border: 2px dashed #ff69b4;
  border-radius: 12px;
  padding: 20px;
  margin: 20px auto;
  max-width: 600px;
  box-shadow: 0 0 10px hotpink;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

button {
  font-size: 18px;
  background: linear-gradient(to right, #ff69b4, #ff1493);
  color: white;
  border: 2px solid white;
  padding: 10px 20px;
  margin: 10px;
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 1px 1px #000;
}

button:hover {
  background: #ff85c1;
}

.hidden {
  display: none;
}

marquee {
  font-size: 20px;
  color: #ffccff;
}

.sparkle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url('https://dl.glitter-graphics.com/pub/630/630165ato49lhm4b') repeat;
  opacity: 0.1;
}

h1 {
  font-size: 36px;
  text-shadow: 2px 2px #ff69b4;
  animation: pulse 1s infinite alternate;
}

.corner-gif {
  color: #fff0f5;
  font-weight: bold;
  font-family: 'Silkscreen', cursive;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 60px;
  z-index: 999;
  text-shadow: 1px 1px #000;
}

.sparkle-text {
  position: relative;
  color: #fff0f5;
  font-weight: bold;
  font-size: 20px;
  text-shadow:
    0 0 5px #ff69b4,
    0 0 10px #ff1493,
    0 0 20px #ff69b4;
  animation: sparkleAnim 2s infinite ease-in-out;
}

@keyframes sparkleAnim {
  0%, 100% {
    text-shadow:
      0 0 5px #ff69b4,
      0 0 10px #ff1493,
      0 0 20px #ff69b4;
  }
  50% {
    text-shadow:
      0 0 10px #ff85c1,
      0 0 15px #ff4da6,
      0 0 30px #ff1493;
  }
}

#soundcloudWidget {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  border: none !important;
  position: fixed;
  left: -9999px;
}

#player {
  background: #ffc0cb;
  border-radius: 20px;
  padding: 15px 25px;
  max-width: 320px;
  margin: 20px auto;
  box-shadow:
    0 0 2px rgba(204, 208, 212,0.9),
    0 15px 25px rgba(0, 0, 0, 0.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),
    0 -5px 10px rgba(255, 255, 255, 0.5),
    0 5px 10px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: space-between;
  user-select: none;
  border: 3px solid #e754a1;
  border-radius: 15px;
  position: relative;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.3) 2px, transparent 2px),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.3) 2px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 20px 20px, 15px 15px, 10px 10px;
}

/* Modos temáticos do player */
.cassette-mode #player {
  background: linear-gradient(135deg, #ff69b4, #ffb6c1);
  border-radius: 25px;
  box-shadow: 0 6px 20px rgba(255, 105, 180, 0.7), inset 0 0 25px rgba(255, 255, 255, 0.3);
}

.cassette-mode #player::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 10px;
  background: #333;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.cd-mode #player {
  background: linear-gradient(135deg, #e0e0e0, #c0c0c0);
  border: 4px solid #888;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(136, 136, 136, 0.7), inset 0 0 25px rgba(255, 255, 255, 0.4);
}

.cd-mode #player::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #c0c0c0, #808080);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.vinyl-mode #player {
  background: linear-gradient(135deg, #8b4513, #a0522d);
  border: 4px solid #654321;
  border-radius: 50px 10px 50px 10px;
  box-shadow: 0 6px 20px rgba(139, 69, 19, 0.7), inset 0 0 25px rgba(255, 255, 255, 0.2);
}

.vinyl-mode #player::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 25px;
  width: 4px;
  height: 20px;
  background: #8b4513;
  border-radius: 2px;
  transform-origin: bottom;
  animation: armSwing 3s infinite ease-in-out;
}

@keyframes armSwing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

#player::after {
  content: "💖";
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  animation: heartFloat 2s infinite ease-in-out;
}

@keyframes glitterPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes heartFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(10deg); }
}

@keyframes screenGlow {
  0% { box-shadow: 0 4px 8px rgba(231, 84, 161, 0.5), inset 0 2px 6px rgba(255, 182, 193, 0.7), 0 0 10px rgba(255, 105, 180, 0.8); }
  100% { box-shadow: 0 4px 8px rgba(231, 84, 161, 0.5), inset 0 2px 6px rgba(255, 182, 193, 0.7), 0 0 15px rgba(255, 105, 180, 1); }
}

#player button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: 24px;
  font-family: 'Courier New', monospace;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #666;
  background: var(--light-pink);
  border: 2px solid var(--pink-border);
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
  &::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark-pink);
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--pink-border), 0 0.3125em 0 0 var(--pink-shadow);
    transform: translate3d(0, 0.375em, -1em);
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
  }
  &:hover {
    background: var(--pink);
    transform: translate(0, 0.125em);
    &::before {
      box-shadow: 0 0 0 2px var(--pink-border), 0 0.25em 0 0 var(--pink-shadow);
      transform: translate3d(0, 0.25em, -1em);
    }
  }
  &:active {
    background: var(--pink);
    transform: translate(0em, 0.375em);
    &::before {
      box-shadow: 0 0 0 2px var(--pink-border), 0 0 var(--pink-shadow);
      transform: translate3d(0, 0, -1em);
    }
  }
}

#progressBar {
  height: 20px;
  background: rgba(255, 192, 203, 0.8);
  border: 10px solid #e754a1;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0 5px 17px rgba(231, 84, 161, 0.5), 0 0 3px 1px rgba(231, 84, 161, 0.5) inset;
  position: relative;
  z-index: 5;
  width: 200px;
  max-width: 200px;
  margin: 10px 0;
}

#progress {
  width: 0%;
  height: 100%;
  background: #ff1493;
  border-radius: 12px;
  position: relative;
  z-index: 10;
  transition: width 0.2s linear;
}

#timer {
  width: 100%;
  text-align: center;
  color: #ff1493;
  font-weight: bold;
  font-family: 'Silkscreen', cursive;
  margin-top: 5px;
}

.visor-wrapper {
  position: relative;
  height: 40px;
  overflow: hidden;
}

.cat-box {
  position: relative;
  width: 70px;
  height: 70px;
  min-width: 70px;
  background: rgba(255, 20, 147, 0.1);
  border: 1px solid rgba(255, 105, 180, 0.3);
  box-shadow:
    inset 0 0 8px rgba(255, 20, 147, 0.2),
    0 0 5px rgba(255, 105, 180, 0.2);
  border-radius: 50%;
  overflow: hidden;
  z-index: 5;
  margin-right: 15px;
  transition: all 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-box.playing {
  background: #ff1493;
  box-shadow:
    inset 0 0 5px rgba(255,255,255,0.8),
    0 0 10px #ff69b4,
    0 0 20px rgba(255, 20, 147, 0.6);
  animation: ledPulse 1.5s infinite alternate;
}

.dancing-cat {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: brightness(1.3) contrast(1.2);
}

#trackTitle {
  position: relative;
  z-index: 3;
}

.crt-screen {
  margin-top: 10px;
  padding: 8px 20px;
  background: #ffd9e8;
  color: #c72c6c;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-weight: 200;
  font-size: 18px;
  border: 3px solid #e754a1;
  border-radius: 15px;
  box-shadow: inset 0 2px 6px rgba(255, 182, 193, 0.7);
  text-align: center;
  user-select: none;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 1.5px;
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  margin-top: 0;
  text-shadow: 0 0 5px #ff69b4;
  animation: screenGlow 2s infinite alternate;
}

.freq-bars-crt {
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
}

.freq-bars-crt .bar {
  width: 3px;
  height: 15px;
  background: #ff1493;
  border-radius: 2px;
  animation: barWave 1s infinite ease-in-out;
}

.freq-bars-crt .bar:nth-child(2) { animation-delay: 0.1s; }
.freq-bars-crt .bar:nth-child(3) { animation-delay: 0.2s; }
.freq-bars-crt .bar:nth-child(4) { animation-delay: 0.3s; }
.freq-bars-crt .bar:nth-child(5) { animation-delay: 0.4s; }

.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  animation: scrollText 10s linear infinite;
  padding-left: 100%;
}

@keyframes ledPulse {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

@keyframes scrollText {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

#playBtn.playing {
  animation: pulseGlow 1.2s infinite alternate;
}

@keyframes pulseGlow {
  from { box-shadow: 0 0 10px hotpink; }
  to { box-shadow: 0 0 20px deeppink; }
}

@keyframes spinTape {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Navegação por abas */
.tabs {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.tab-button {
  background: rgba(255, 192, 203, 0.8);
  border: 2px solid #ff69b4;
  padding: 10px 20px;
  margin: 0 5px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  color: #fff0f5;
  text-shadow: 1px 1px #000;
}

.tab-button.active {
  background: #ff69b4;
  color: white;
}

.tab-button:hover {
  background: #ff85c1;
}

.tab-content {
  display: none;
}

.tab-content:not(.hidden) {
  display: block;
}

/* Prateleira de CDs */
.cd-shelf {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 30px;
  padding: 20px 20px 40px 20px;
  flex-wrap: wrap;
}

.cd {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin: 0 20px;
}

.cd:hover {
  transform: scale(1.1) rotate(2deg);
}

.cd p {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  margin: 0;
  font-size: 14px;
  color: white;
  text-shadow: 2px 2px #ff69b4;
  text-align: center;
  font-family: 'Silkscreen', cursive;
  white-space: nowrap;
}

/* Fita K-7 (Cassete Tape) */
.cd:nth-child(1) {
  width: 150px;
  height: 90px;
  background: linear-gradient(to bottom, #f0e8d8 0%, #e0d8c8 100%);
  border: 1px solid #544;
  border-radius: 8px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd:nth-child(1)::before {
  content: '';
  position: absolute;
  width: 130px;
  height: 70px;
  background-color: #fffaf0;
  border: 1px solid #987;
  border-radius: 5px;
  background-image:
    radial-gradient(circle at 4px 4px, #aaa 1px, transparent 1px),
    radial-gradient(circle at 126px 4px, #aaa 1px, transparent 1px),
    radial-gradient(circle at 4px 66px, #aaa 1px, transparent 1px),
    radial-gradient(circle at 126px 66px, #aaa 1px, transparent 1px),
    linear-gradient(to bottom, transparent 15px, #4c2a4c 15px, #4c2a4c 55px, transparent 55px),
    linear-gradient(to right, transparent 15px, rgba(255, 105, 180, 0.5) 15px, rgba(255, 105, 180, 0.5) 115px, transparent 115px);
  background-repeat: no-repeat;
}

.cd:nth-child(1)::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: calc(50% - 30px);
  transform: translateY(-50%);
  box-shadow: 55px 0 0 white;
}

/* Capa de CD */
.cd:nth-child(2) {
  width: 130px;
  height: 120px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.3) 10%, rgba(200, 220, 255, 0.2) 100%),
    linear-gradient(45deg, #ffc0cb, #ff69b4);
  border-left: 12px solid rgba(150, 180, 220, 0.5);
  border-radius: 3px;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cd:nth-child(2)::before {
  content: '';
  position: absolute;
  right: 11.5px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, #e0e0e0, #b0b0b0, #e0e0e0);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
}

.cd:nth-child(2)::after {
  content: '';
  position: absolute;
  right: 51.5px;
  top: calc(50% - 7.5px);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #ddd);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
  z-index: 1;
}

/* Disco de Vinil */
.cd:nth-child(3) {
  width: 130px;
  height: 130px;
  background: #111;
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(170deg, transparent 40%, rgba(255,255,255,0.15) 48%, rgba(255,255,255,0.15) 50%, transparent 56%),
    repeating-radial-gradient(
      circle at center,
      rgba(255,255,255,0.05) 0,
      rgba(255,255,255,0.05) 1px,
      transparent 1px,
      transparent 2px
    );
}

.cd:nth-child(3)::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #f5a9a9 30%, #e08080 32%, #e08080 80%, #d46a6a 100%);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
  z-index: 1;
}

.cd:nth-child(3)::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 1px solid #333;
  z-index: 2;
}

/* Mural de mensagens */
.mural {
  background: #deb887 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIQSURBVGhB7Zq/SxxRFMf9W8zGCAvbGBkEC0EswsJ/gIW9h4R/gGAsLCzswCopBEvBQlIRCwsbYyGJd2EjGOyVGS/s7GwuYpAwK4mD2b177pl98LzZufe+53fuzL13YJQipRSpgiYgScCVgAv/0gJ2sARd6CUSC89gCT6BJbAEv+D/iH+g/4EeoApoF3gL1AXa4YmmdA20AVf9hYlCQVwA3YB3YBPYAl5An/c58y0CVs+gR+gD9gKbgA/gDtiCnsDfBbrfJTCXfgPaA/uAY+B7YEn6hJ+DXoFuwA4wA5wD3gGvgSvgCWwD3lR4F+gN3AP9gE9gC9gC/oC5wBtwC7gEvgD7gG9gD3gE3AJuAR+A05B/wKzC3kO+D7fA5sP/D+Bn+wv0D3QGWoEuwARwD+z4k2F/QDRoEWoD74D3wL4H/bA/qP+BnsB3YD5wGPiA/kBbYJ8f6E+sB7cD6Qn1oFcofgL2gK9gI7BfIBz0BHoBXYBvYAlUgc/hX6A+6Ankwy+A3aBfUL8r8xfoA+Q79A3UAVYAXsDqP+T7A/sA+f4s6BdoB/QBO4BN4CfYAT4Cj4GvwH2gD1iCngA3gZ3AC+A32AvMA/eAN+A6cAccArfAXuAf+BH4CXwO/D/4HfgC/JzC3Ub+D2AfuAR+Bv4FvgJ/gZ/An0s4qgRxD/wP3AA/gD/A38BfoC/QFXgJ3AF3gVvACnAF3AZ+As86Tz2kBFwJuBLwhgIpiZRSxJ/kBKvKNE9SgQAAAABJRU5ErkJggg==');
  border: 12px solid #8b4513;
  border-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAUABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAgME/8QAHxAAAQQCAwEBAAAAAAAAAAAAAQIDBBEAEiExQVFh/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//EABgRAQEBAQEAAAAAAAAAAAAAAAARATFB/9oADAMBAAIRAxEAPwDJKvBLhKkBCm5DSgPklpSSo2aPFno3xex2pSmS+lx50pUoJBApV9ZnmvjcaQylCwnpKWFDapBBo+KvBOPmKkOoW6hTaW0oBCQKJN9/wBEm5LYo3TnsA9//9k=') 20 / 12px / 0 round;
  border-radius: 15px;
  padding: 25px;
  max-width: 500px;
  margin: 20px auto;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.3);
}

.note {
  background: #ffffe0;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 3px;
  font-family: 'Comic Sans MS', cursive;
  color: #5b4636;
  cursor: pointer;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
  transform: rotate(-2deg);
  transition: all 0.2s ease-in-out;
  text-align: center;
}

.note:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  z-index: 10;
}

#randomMessage {
  background-color: #fffaf0;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 3px 3px 6px rgba(0,0,0,0.1);
  margin-top: 20px;
  padding: 20px;
  transform: rotate(1deg);
}

#randomMessage .sparkle-text {
  color: #c72c6c;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-shadow: 1px 1px #ffc0cb;
  animation: none;
  font-size: 18px;
  text-align: center;
}

.answer-box {
  margin: 10px 0;
}

.answer-box input {
  padding: 8px;
  border: 2px solid #ff69b4;
  border-radius: 5px;
  font-size: 16px;
  width: 100%;
  max-width: 300px;
}

/* Display de Mídia no Player */
.media-display {
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  position: relative;
  background: rgba(255, 192, 203, 0.8);
  border: 2px solid #e754a1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px #000;
}

/* Modo Cassette */
.cassette-mode .media-display::before,
.cassette-mode .media-display::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background: #4c2a4c;
  border: 2px solid #987;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.cassette-mode .media-display::before {
  left: 20%;
  animation: spinTape 2s linear infinite;
}

.cassette-mode .media-display::after {
  right: 20%;
  animation: spinTape 2s linear infinite reverse;
}

/* Modo CD */
.cd-mode .media-display::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #e0e0e0, #b0b0b0);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
  animation: spinDisc 3s linear infinite;
}

/* Modo Vinil */
.vinyl-mode .media-display::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: #111;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  animation: spinVinyl 4s linear infinite;
}

.vinyl-mode .media-display::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 25px;
  background: #8b4513;
  top: 5px;
  right: 15px;
  transform-origin: bottom;
  animation: none;
}

@keyframes spinDisc {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinVinyl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Variáveis CSS para materiais */
:root {
  --color-player: #f4f3f2;
  --color-player-border: #aeaeae;
  --color-led: #ff0000;
  --color-glass: rgba(255, 255, 255, 0.1);
  --color-plastic: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
  --bg: #fff;
  --text: #382b22;
  --light-pink: #fff0f0;
  --pink: #ffe9e9;
  --dark-pink: #f9c4d2;
  --pink-border: #b18597;
  --pink-shadow: #ffe3e2;
}

/* Vitrine Transparente */
.vitrine {
  position: relative;
  width: 100%;
  height: 80px;
  background: var(--color-glass);
  backdrop-filter: blur(2px);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 0 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 10px;
}

.vitrine::before {
  display: block;
  content: "";
  position: absolute;
  top: 0.5em;
  height: calc(100% - 1em);
  width: calc(100% - 1em);
  border-top: 2px solid rgba(225,225,225, 0.2);
  border-left: 1px solid rgba(225,225,225, 0.1);
  border-right: 1px solid rgba(225,225,225, 0.3);
  z-index: 2;
}

/* LEDs */
.leds {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 15px;
}

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 2px;
  box-shadow: 0 0 5px var(--color-led);
}

.led.power {
  background: var(--color-led);
  animation: ledGlow 2s infinite alternate;
}

.led.play-indicator {
  background: #00ff00;
  opacity: 0;
}

.player.playing .led.play-indicator {
  opacity: 1;
  animation: ledGlow 1s infinite alternate;
}

@keyframes ledGlow {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* Botões Físicos */
.physical-btn {
  width: 40px;
  height: 40px;
  border: 2px solid #333;
  border-radius: 5px;
  background: var(--color-plastic);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-size: 18px;
  color: #333;
  margin: 0 5px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.physical-btn:hover {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.physical-btn:active {
  transform: translateY(2px);
}

/* Volume Knob */
#volumeFrame {
  position: relative;
  display: inline-block;
  height: 80px;
  width: 80px;
  text-align: center;
  border: 1px solid #dbdbdb;
  background: #f2f2f2;
  border-radius: 100%;
  box-shadow: inset 0 3px 10px rgba(100, 100, 100, 0.1);
  margin: 10px 0;
}

/* start and finish */
#volumeFrame:before, #volumeFrame:after {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 4px;
  height: 4px;
  content: "";
  background: transparent;
  border: 2px solid rgba(124, 124, 124, 0.9);
  border-radius: 100%;
}

/* finish */
#volumeFrame:after {
  left: auto;
  right: 5px;
  background: rgba(124, 124, 124, 0.9);
}

/* outer circle */
#volumeFrame .volumeButton {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  margin-top: 8px;
  text-align: center;
  border: 1px solid #e6e6e6;
  border-radius: 100%;
  background: linear-gradient(#fff, #f5f5f5);
  box-shadow: 0 5px 10px #CCC;
  cursor: pointer;
}

/* inner circle */
#volumeFrame .volumeButton:before {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  width: 50px;
  height: 50px;
  content: "";
  border: 1px solid #ececec;
  border-radius: 100%;
  background: linear-gradient(#f5f5f5, #fff);
}

/* circle indicator */
#volumeFrame .volumeButton:after {
  position: absolute;
  top: 5px;
  left: 26px;
  display: block;
  width: 8px;
  height: 8px;
  content: "";
  background: rgba(100, 100, 100, 0.9);
  border-radius: 50%;
  transform-origin: 50% 25px;
}

/* Alto-falantes inspirados no exemplo */
.speakers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}

.speaker {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #334;
  position: relative;
  border: 2px solid #aaa;
  box-shadow: inset 0 1.6rem 0.8rem #333, inset 1.6rem 0 0.8rem #222, inset 0 -1.6rem 0.8rem #333, inset -1.6rem 0 0.8rem #222, 0 0 0 0.25rem #ccc;
  transition: 0.3s ease;
}

.speaker.pop {
  animation: popSpeaker 1s linear infinite;
}

@keyframes popSpeaker {
  0%, 50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

.speaker::before {
  content: "";
  position: absolute;
  height: 2rem;
  width: 2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at center, #ddd, #2226);
}


/* Animação de ejeção */
.ejecting {
  animation: eject 0.5s ease-out forwards;
}

@keyframes eject {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-10px); opacity: 0.8; }
  100% { transform: translateY(-20px); opacity: 0; }
}

/* Elementos de Cassette */
.cassette-elements {
  position: relative;
  width: 100%;
  height: 100%;
}

.tape-roll {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.tape-roll.left {
  left: 20%;
}

.tape-roll.right {
  right: 20%;
}

.player.playing.cassette-mode .tape-roll.left {
  animation: spinTape 3s linear infinite;
}

.player.playing.cassette-mode .tape-roll.right {
  animation: spinTape 3s linear infinite;
}

.tape-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 10px;
  color: #000;
}

/* Elementos de CD */
.cd-elements {
  position: relative;
  width: 100%;
  height: 100%;
}

.cd-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #e0e0e0, #b0b0b0);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.player.playing.cd-mode .cd-disc {
  animation: spinDisc 2s linear infinite;
}

.cd-arm {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 30px;
  height: 3px;
  background: #666;
  transform-origin: left;
}

.player.playing.cd-mode .cd-arm {
  animation: armMove 3s infinite ease-in-out;
}

.cd-label {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: #000;
  font-weight: bold;
}

@keyframes armMove {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

/* Elementos de Vinyl */
.vinyl-elements {
  position: relative;
  width: 100%;
  height: 100%;
}

.vinyl-record {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: #111;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.player.playing.vinyl-mode .vinyl-record {
  animation: spinVinyl 4s linear infinite;
}

.vinyl-record::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #f5a9a9, #d46a6a);
  border-radius: 50%;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.vinyl-record::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
}

.vinyl-arm {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 40px;
  height: 3px;
  background: #ededed;
  transform-origin: 90%;
}

.player.playing.vinyl-mode .vinyl-arm {
  animation: vinylArmSwing 3s infinite ease-in-out;
}

@keyframes vinylArmSwing {
  0%, 100% { transform: rotate(-45deg); }
  50% { transform: rotate(-47deg); }
}

.vinyl-spindle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.vinyl-label {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: #000;
  font-weight: bold;
}


/* Distorção Vintage no player */
.player {
  filter: contrast(1.05) brightness(0.95) saturate(0.9);
  position: relative;
}

.player::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><defs><filter id="noise"><feTurbulence baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.05"/></svg>');
  pointer-events: none;
  opacity: 0.3;
}

/* Efeito 3D simples no Player */
#player {
  --d: 20px; /* profundidade */
  border-radius: 20px;
  border-right: var(--d) solid rgba(0, 0, 0, 0.2);
  border-bottom: var(--d) solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);
}