/*! MANCODE Radio Player Embed */
.mcre {
  --mcre-size: 64px;
  --mcre-btn-bg: #fff;
  --mcre-btn-fg: #000;
  --mcre-fg: #fff;
  --mcre-gold: #d4af37;
  --mcre-gold-light: #f6e27a;
  --mcre-accent: #e53935;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 15px;
  color: var(--mcre-fg);
  font: 500 12px/1.25 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.mcre *, .mcre *::before, .mcre *::after { box-sizing: border-box; }
.mcre--small  { --mcre-size: 48px; gap: 10px; font-size: 11px; }
.mcre--large  { --mcre-size: 88px; gap: 18px; font-size: 13px; }
.mcre--dark   { --mcre-btn-bg: #000; --mcre-btn-fg: #fff; --mcre-fg: #000; }
.mcre--left   { align-items: flex-start; }
.mcre--right  { align-items: flex-end; }

/* Κουμπί */
.mcre .mcre__btn {
  position: relative;
  width: var(--mcre-size); height: var(--mcre-size);
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--mcre-btn-bg); color: var(--mcre-btn-fg);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mcre .mcre__btn:hover { transform: scale(1.05); background: var(--mcre-btn-bg); color: var(--mcre-btn-fg); }
.mcre .mcre__btn:focus-visible { outline: 2px solid var(--mcre-fg); outline-offset: 8px; }

/* Χρυσό ring όσο συνδέεται */
.mcre .mcre__btn::before {
  content: "";
  position: absolute;
  inset: calc(var(--mcre-size) * -.09);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(212, 175, 55, 0) 0deg, rgba(212, 175, 55, .15) 90deg, var(--mcre-gold) 250deg, var(--mcre-gold-light) 340deg, rgba(212, 175, 55, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  opacity: 0;
  pointer-events: none;
}
.mcre[data-state="loading"] .mcre__btn::before,
.mcre[data-state="reconnecting"] .mcre__btn::before,
.mcre[data-state="offline"] .mcre__btn::before { opacity: 1; animation: mcre-spin 1s linear infinite; }

/* Εικονίδια */
.mcre .mcre__i { width: 40%; height: 40%; fill: currentColor; display: none; grid-area: 1 / 1; }
.mcre .mcre__i--play { display: block; margin-left: 6%; }
.mcre[data-state="playing"] .mcre__i--play { display: none; }
.mcre[data-state="playing"] .mcre__i--pause { display: block; }

/* Κείμενα */
.mcre .mcre__meta { display: flex; flex-direction: column; align-items: inherit; gap: 6px; }
.mcre .mcre__name { font-weight: 700; font-size: 1.15em; }
.mcre .mcre__status { display: inline-flex; align-items: center; opacity: .75; white-space: nowrap; }
.mcre[data-state="playing"] .mcre__status { opacity: 1; }
.mcre[data-state="playing"] .mcre__status::before {
  content: ""; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--mcre-accent); animation: mcre-pulse 1.6s ease-in-out infinite;
}
.mcre[data-state="blocked"] .mcre__btn { animation: mcre-nudge 2s ease-in-out infinite; }

/* Equalizer */
.mcre .mcre__eq { display: flex; align-items: flex-end; gap: 3px; height: 14px; visibility: hidden; }
.mcre[data-state="playing"] .mcre__eq { visibility: visible; }
.mcre .mcre__eq i { display: block; width: 3px; height: 100%; background: currentColor; transform-origin: bottom; transform: scaleY(.3); animation: mcre-eq 1s ease-in-out infinite; }
.mcre .mcre__eq i:nth-child(2) { animation-delay: -.3s; }
.mcre .mcre__eq i:nth-child(3) { animation-delay: -.6s; }
.mcre .mcre__eq i:nth-child(4) { animation-delay: -.85s; }

@keyframes mcre-spin  { to { transform: rotate(360deg); } }
@keyframes mcre-pulse { 50% { opacity: .3; } }
@keyframes mcre-eq    { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes mcre-nudge { 50% { box-shadow: 0 0 0 6px rgba(212, 175, 55, .4), 0 8px 28px rgba(0, 0, 0, .25); } }

@media (prefers-reduced-motion: reduce) {
  .mcre *, .mcre *::before { animation: none !important; transition: none !important; }
}