/* A small silver cassette player on the desk, with an orange brand stripe and chunky keys */

#walkman {
  position: relative;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.55));
}

.walkman__body {
  padding: 8px 10px 10px;
  background: linear-gradient(160deg, #d3d6d8 0%, #acb0b4 45%, #92969a 100%);
  border: 1px solid #5d6064;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
}

.walkman__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-family: var(--font-num);
  color: #3a3d40;
}
.walkman__badge b { font-size: 12px; letter-spacing: 0.22em; color: #c4521f; }
.walkman__badge span { flex: 1; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }

.walkman__led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5a1b14;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
  transition: background 0.3s, box-shadow 0.3s;
}
.walkman.is-playing .walkman__led { background: #ff5a3c; box-shadow: 0 0 8px 2px rgba(255, 90, 60, 0.65); }

/* The cassette window: two reels around the label with the title */
.walkman__window {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(#26292c, #15171a);
  border: 2px solid #4b4e52;
  border-radius: 6px;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.5);
}
.walkman__reel { width: 38px; height: 38px; }
.walkman__tape { fill: #3b2b21; stroke: #1b130e; stroke-width: 1.5; }
.walkman__spokes line { stroke: #d9d3c1; stroke-width: 2.4; stroke-linecap: round; }
.walkman__spokes { transform-box: fill-box; transform-origin: 50% 50%; }
.walkman__hub { fill: #d9d3c1; stroke: #8a8472; stroke-width: 1; }
.walkman.is-playing .walkman__reel--left .walkman__spokes { animation: wm-spin 3.2s linear infinite; }
.walkman.is-playing .walkman__reel--right .walkman__spokes { animation: wm-spin 2.4s linear infinite; }

.walkman__label {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 7px;
  overflow: hidden;
  background: #efe4c4 var(--paper-grain);
  border-bottom: 3px solid #c4521f;
  border-radius: 3px;
  box-shadow: inset 0 0 8px rgba(120, 90, 40, 0.3);
  font-family: var(--font-type);
  font-size: 12px;
  color: var(--text);
}
.walkman__title { display: block; white-space: nowrap; }
.walkman.is-empty .walkman__title { opacity: 0.55; font-style: italic; }
.walkman.is-playing .walkman__title.is-scroll { width: max-content; animation: wm-marquee 11s linear infinite; }

/* Vintage keys: raised piano keys that sink when pressed */
.walkman__keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 9px; }
.walkman__key {
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #ebe7d8;
  cursor: pointer;
  background: linear-gradient(#63676b, #34373a);
  border: 1px solid #1d1f21;
  border-bottom-width: 4px;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.07s, border-bottom-width 0.07s, filter 0.15s;
}
.walkman__key svg { width: 20px; height: 14px; fill: currentColor; }
.walkman__key--play { box-shadow: inset 0 3px 0 #4f8f5a, 0 1px 2px rgba(0, 0, 0, 0.5); }
.walkman__key--stop { box-shadow: inset 0 3px 0 #c4521f, 0 1px 2px rgba(0, 0, 0, 0.5); }
.walkman__key:hover:not(:disabled) { filter: brightness(1.18); }
.walkman__key:active:not(:disabled),
.walkman__key[aria-pressed="true"] {
  border-bottom-width: 1px;
  transform: translateY(3px);
  background: linear-gradient(#34373a, #4b4e52);
}
.walkman__key:focus-visible { outline: 2px solid #c4521f; outline-offset: 2px; }
.walkman__key:disabled { opacity: 0.4; cursor: default; }

@keyframes wm-spin { to { transform: rotate(360deg); } }
@keyframes wm-marquee {
  from { transform: translateX(40%); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .walkman.is-playing .walkman__spokes,
  .walkman.is-playing .walkman__title.is-scroll { animation: none !important; }
  .walkman__title { overflow: hidden; text-overflow: ellipsis; }
}