/* Milk Mixtapes: the tab on the right edge, the stereo and its pile of tapes.
   Selectors start with "html body" where themes and Elementor style buttons, so they can't restyle these. */

@font-face {
  font-family: 'MM Fat Frank';
  src: url('FatFrank-Regular.ttf') format('truetype');
  font-display: swap;
}

.mm-root {
  font-family: 'DM Sans', Arial, sans-serif;
  color: #000;
  line-height: 1.3;
  text-align: left;
}
.mm-root *,
.mm-root *::before,
.mm-root *::after { box-sizing: border-box; }
.mm-root .mm-display,
.mm-root .mm-brand,
.mm-root .mm-sticker,
.mm-root .mm-cassette-title {
  font-family: fatfrank, 'Fat Frank', 'MM Fat Frank', 'Arial Black', sans-serif;
  font-weight: 400;
}

/* ---------- The tab on the right edge, halfway down ---------- */
html body .mm-root button.mm-tab,
html body .mm-root button.mm-tab:hover,
html body .mm-root button.mm-tab:focus {
  position: fixed;
  top: 50%;
  right: -11px;
  z-index: 2147483005;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 68px;
  margin: 0;
  padding: 12.5px 20px 14.5px 9px;
  background: #FFC416;
  color: #000;
  border: 3px solid #000;
  border-right: 0;
  border-radius: 16px 0 0 16px;
  box-shadow: -5px 5px 0 #000;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}
html body .mm-root button.mm-tab {
  transform: translate(120%, -50%);
  transition: transform 0.5s cubic-bezier(0.2, 1.3, 0.4, 1), right 0.2s ease;
}
html body .mm-root.mm-shown button.mm-tab {
  transform: translate(0, -50%);
  /* every so often it peeks out a little further, out of step with the arcade and the jar */
  animation: mm-peek 9s ease-in-out 6s infinite;
}
html body .mm-root.mm-shown button.mm-tab:hover { right: 0; animation: none; }
html body .mm-root.mm-is-open button.mm-tab { transform: translate(120%, -50%); animation: none; }
html body .mm-root button.mm-tab:focus-visible { outline: 3px solid #4DBEED; outline-offset: 3px; }
.mm-root .mm-tab-icon svg { display: block; width: 38px; height: 26px; }
.mm-root .mm-tab-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@keyframes mm-peek {
  0%, 88%, 100% { translate: 0 0; }
  92% { translate: -10px 0; }
  95% { translate: 0 0; }
  97% { translate: -5px 0; }
}

/* ---------- The panel ---------- */
.mm-root .mm-panel {
  position: fixed;
  top: 50%;
  right: 16px;
  z-index: 2147483010;
  width: 420px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 16px 18px 16px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 22px;
  box-shadow: 8px 8px 0 #000;
  transform: translate(calc(100% + 40px), -50%);
  transition: transform 0.35s cubic-bezier(0.2, 1.2, 0.4, 1), width 0.25s ease;
}
.mm-root .mm-panel[hidden] { display: none !important; }
.mm-root .mm-panel.mm-in { transform: translate(0, -50%); }

.mm-root .mm-head { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; }
.mm-root .mm-head-text { flex: 1; min-width: 0; }
.mm-root .mm-title { margin: 0; padding: 0; font-size: 26px; line-height: 1.02; color: #000; letter-spacing: 0; text-transform: none; }
.mm-root .mm-sub { margin: 4px 0 0; padding: 0; font-size: 13px; font-weight: 700; color: #555; }
.mm-root .mm-now { display: none; margin: 3px 0 0; font-size: 13px; font-weight: 700; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

html body .mm-root button.mm-icon,
html body .mm-root button.mm-icon:hover,
html body .mm-root button.mm-icon:focus {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0 0 2px;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  border-radius: 50%;
  box-shadow: 2px 2px 0 #000;
  font: 700 20px/1 'DM Sans', Arial, sans-serif;
  cursor: pointer;
}
html body .mm-root button.mm-icon:focus-visible { outline: 3px solid #4DBEED; outline-offset: 2px; }
html body .mm-root button.mm-expand { display: none; padding: 0; }
.mm-root .mm-expand svg { width: 16px; height: 16px; }

/* ---------- The stereo ---------- */
.mm-root .mm-body { display: flex; align-items: flex-end; gap: 18px; }
.mm-root .mm-deck { position: relative; flex: none; width: 190px; margin-right: 6px; }
.mm-root .mm-deck-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mm-root .mm-deck.mm-thunk { animation: mm-thunk 0.4s ease; }
@keyframes mm-thunk {
  0%, 100% { transform: none; }
  30% { transform: translateY(3px) scale(1.02, 0.97); }
  65% { transform: translateY(-2px); }
}

.mm-root .mm-brand { font-size: 21px; fill: #000; }
.mm-root .mm-small { font: 800 7.5px 'DM Sans', Arial, sans-serif; letter-spacing: 0.14em; fill: #0D3447; }
.mm-root .mm-sticker { font-size: 21px; fill: #000; }
.mm-root .mm-empty-text { font: 800 13px 'DM Sans', Arial, sans-serif; fill: #fff; }
.mm-root .mm-empty-arrow { animation: mm-point 1.4s ease-in-out infinite; }
.mm-root.mm-loaded .mm-empty { display: none; }
@keyframes mm-point { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }

.mm-root .mm-led { fill: #6B1A1A; transition: fill 0.2s; }
.mm-root.mm-playing .mm-led { fill: #FF4D4D; filter: drop-shadow(0 0 4px #FF4D4D); }
.mm-root.mm-buffering .mm-led { fill: #FF9A4D; }

/* the tape in the window shows once the flying one lands */
.mm-root .mm-slot { opacity: 0; }
.mm-root .mm-slot.mm-in-slot { opacity: 1; }
.mm-root .mm-reel { transform-box: fill-box; transform-origin: 50% 50%; }
.mm-root.mm-playing .mm-slot .mm-reel { animation: mm-spin 1.6s linear infinite; }
.mm-root.mm-buffering .mm-slot .mm-reel { animation: mm-spin 4s linear infinite; }
@keyframes mm-spin { to { transform: rotate(360deg); } }
.mm-root .mm-cassette-title { font-size: 14px; fill: #000; }

/* the keys along the top edge */
.mm-root .mm-keys {
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 7.86%; /* from the top of the drawing down to the body */
  display: flex;
  gap: 4%;
}
html body .mm-root button.mm-key,
html body .mm-root button.mm-key:hover,
html body .mm-root button.mm-key:focus {
  flex: 1;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  border: 3px solid #000;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.1s;
}
html body .mm-root button.mm-key-play,
html body .mm-root button.mm-key-play:hover,
html body .mm-root button.mm-key-play:focus { background: #FFC416; }
html body .mm-root button.mm-key-eject,
html body .mm-root button.mm-key-eject:hover,
html body .mm-root button.mm-key-eject:focus { background: #F38149; }
html body .mm-root button.mm-key:hover { transform: translateY(-2px); }
html body .mm-root button.mm-key.mm-pressed { animation: mm-press 0.25s ease; }
html body .mm-root button.mm-key:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.mm-root .mm-key svg { display: block; width: 60%; max-width: 22px; height: auto; fill: #000; }
@keyframes mm-press { 0%, 100% { transform: none; } 40% { transform: translateY(5px); } }

/* ---------- The pile of tapes ---------- */
.mm-root .mm-pile {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}
.mm-root .mm-pile-item {
  max-height: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(var(--shift, 0)) rotate(var(--tilt, 0));
  transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}
.mm-root .mm-pile-item::before { content: none; }
.mm-root .mm-pile-item.mm-out { max-height: 0; margin-top: -7px; opacity: 0; pointer-events: none; }
.mm-root .mm-pile-item.mm-snap { transition: none !important; }
.mm-root .mm-pile-item.mm-landing { visibility: hidden; }
.mm-root .mm-pile.mm-nudge .mm-pile-item { animation: mm-nudge 0.5s ease; }
@keyframes mm-nudge { 0%, 100% { translate: 0 0; } 25% { translate: -8px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }

html body .mm-root button.mm-tape,
html body .mm-root button.mm-tape:hover,
html body .mm-root button.mm-tape:focus {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 37px;
  margin: 0;
  padding: 0 8px;
  background: var(--tape, #FFC416);
  color: #000;
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: transform 0.15s ease;
}
html body .mm-root button.mm-tape:hover { transform: translateX(-10px); }
html body .mm-root button.mm-tape:active { transform: translateX(-10px) translateY(2px); box-shadow: 1px 1px 0 #000; }
html body .mm-root button.mm-tape:focus-visible { outline: 3px solid #4DBEED; outline-offset: 3px; }
.mm-root .mm-tape-label {
  flex: 1;
  min-width: 0;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 3px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-root .mm-tape-c90 { flex: none; font: 800 9px/1 'DM Sans', Arial, sans-serif; letter-spacing: 0.06em; }

/* a tape on its way into the deck or back to the pile */
.mm-root .mm-flyer {
  position: fixed;
  z-index: 2147483020;
  pointer-events: none;
  transform-origin: 0 0;
  filter: drop-shadow(3px 3px 0 #000);
}
.mm-root .mm-flyer svg { display: block; width: 100%; height: 100%; }

/* ---------- Spotify's player ---------- */
.mm-root .mm-player { margin-top: 16px; }
.mm-root .mm-embed { border-radius: 12px; overflow: hidden; }
.mm-root .mm-embed iframe { display: block; width: 100%; border: 0; border-radius: 12px; }
.mm-root .mm-note { margin: 8px 0 0; padding: 0; font-size: 12px; color: #555; }
.mm-root .mm-note a { color: #000; font-weight: 700; text-decoration: underline; }

/* ---------- Mini player: the deck closed while a tape plays ---------- */
.mm-root.mm-mini .mm-panel { width: 330px; padding: 12px 14px; }
.mm-root.mm-mini .mm-head { margin-bottom: 10px; align-items: center; }
.mm-root.mm-mini .mm-title { font-size: 18px; }
.mm-root.mm-mini .mm-sub,
.mm-root.mm-mini .mm-body,
.mm-root.mm-mini .mm-note { display: none; }
.mm-root.mm-mini .mm-now { display: block; }
html body .mm-root.mm-mini button.mm-expand { display: grid; }
.mm-root.mm-mini .mm-player { margin-top: 0; }

/* phones: a smaller tab, and a panel that fits the screen */
@media (max-width: 640px) {
  html body .mm-root button.mm-tab,
  html body .mm-root button.mm-tab:hover,
  html body .mm-root button.mm-tab:focus { width: 56px; gap: 7px; padding: 9px 16px 11px 7px; }
  .mm-root .mm-tab-icon svg { width: 31px; height: 21px; }
  .mm-root .mm-tab-text { font-size: 13.5px; }
  .mm-root .mm-panel { right: 12px; width: calc(100vw - 24px); padding: 14px; }
  .mm-root .mm-title { font-size: 22px; }
  .mm-root .mm-body { gap: 12px; }
  .mm-root .mm-deck { width: 148px; margin-right: 4px; }
  html body .mm-root button.mm-tape,
  html body .mm-root button.mm-tape:hover,
  html body .mm-root button.mm-tape:focus { height: 33px; padding: 0 6px; }
  .mm-root .mm-tape-label { height: 21px; font-size: 13px; }
  .mm-root .mm-tape-c90 { display: none; }
  .mm-root.mm-mini .mm-panel { width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  html body .mm-root button.mm-tab,
  .mm-root .mm-panel,
  .mm-root .mm-pile-item { transition: none; }
  html body .mm-root.mm-shown button.mm-tab,
  .mm-root .mm-empty-arrow,
  .mm-root.mm-playing .mm-slot .mm-reel,
  .mm-root.mm-buffering .mm-slot .mm-reel { animation: none; }
}