/* Κομιανή Στράτα — player (index.html). Πρόταση σχεδίασης «c», προαγωγή στο master.
   Πρώτα το βινύλιο, μετά η σελίδα. Το chat είναι στο chat.css. */

/* ── Βινύλιο ── (από την πρόταση σχεδίασης c· βλ. docs/redesign/)
   - Το εξώφυλλο καλύπτει ΟΛΟ τον δίσκο· από πάνω αυλάκια, σκοτεινό χείλος, γυαλάδα.
   - Ο δίσκος (με το εξώφυλλο) γυρίζει μόνο όταν <html data-playing="true"> και ΟΧΙ με reduced motion.
   - Το κουμπί play/pause είναι ΣΤΑΘΕΡΟ στο κέντρο (δεν γυρίζει)· πάτημα σε όλο το κεντρικό σημείο.
   Μέγεθος: --vinyl στο .rd-vinyl (ορίζεται από κάθε εκδοχή). */

.rd-vinyl{
  --vinyl: 280px;
  --face: max(72px, min(120px, calc(var(--vinyl) * .30)));
  position:relative; width:var(--vinyl); aspect-ratio:1; flex-shrink:0; border-radius:50%;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.5));
}

/* Ο δίσκος που γυρίζει: εξώφυλλο + αυλάκια */
.rd-vinyl-disc{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; background:#151516;
  animation: rd-spin 7s linear infinite; animation-play-state: paused;
}
html[data-playing="true"] .rd-vinyl-disc{ animation-play-state: running; }
@keyframes rd-spin{ to{ transform: rotate(360deg); } }

.rd-vinyl-art{ position:absolute; inset:0; }

/* Αυλάκια (ομόκεντροι κύκλοι, χαμηλή αδιαφάνεια) + δακτύλιοι «τραγουδιών» + σκοτεινό χείλος */
.rd-vinyl-grooves{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.055) 0 1px, rgba(0,0,0,0) 1px 5px),
    radial-gradient(circle at 50% 50%,
      transparent 0 33%, rgba(0,0,0,.16) 33.3% 33.7%, transparent 34% 55%,
      rgba(0,0,0,.10) 55.3% 55.6%, transparent 55.9% 75%, rgba(0,0,0,.10) 75.3% 75.6%, transparent 75.9% 92%,
      rgba(0,0,0,.45) 97%, rgba(0,0,0,.8) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), inset 0 0 24px rgba(0,0,0,.55);
}

/* Γυαλάδα: ΔΕΝ γυρίζει (όπως το φως πάνω σε πραγματικό δίσκο) */
.rd-vinyl-shine{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    conic-gradient(from 210deg, transparent 0 8%, rgba(255,255,255,.16) 12%, transparent 19% 58%,
      rgba(255,255,255,.10) 62%, transparent 69%),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.10), transparent 45%);
  mix-blend-mode: screen;
}

/* ── Κεντρικό κουμπί play/pause (σταθερό) ── */
.rd-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max(var(--face), 50%); aspect-ratio:1; border-radius:50%;      /* περιοχή πατήματος: όλο το κέντρο */
  border:0; padding:0; background:transparent; cursor:pointer; display:grid; place-items:center;
  -webkit-tap-highlight-color: transparent;
}
.rd-center-face{
  position:relative; width:var(--face); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:rgba(14,9,5,.52);
  -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
  box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.28);
  transition:transform .15s, background .2s;
}
.rd-center:hover .rd-center-face{ background:rgba(14,9,5,.62); transform:scale(1.04); }
.rd-center:active .rd-center-face{ transform:scale(.96); }
.rd-center:focus-visible{ outline:none; }
.rd-center:focus-visible .rd-center-face{ outline:3px solid #E8B84B; outline-offset:4px; }
.rd-center-face svg.i-play, .rd-center-face svg.i-pause{ width:40%; height:40%; fill:currentColor; }
.rd-center-face svg.i-play{ margin-left:6%; } /* οπτικό κέντρο του τριγώνου */

/* Δαχτυλίδι κατάστασης γύρω από το κουμπί */
.rd-ring{ position:absolute; inset:-7px; width:calc(100% + 14px); height:calc(100% + 14px); pointer-events:none; }
.rd-ring circle{ fill:none; stroke:rgba(255,255,255,.22); stroke-width:3; transform-origin:50% 50%; }
html[data-playing="true"] .rd-ring circle{ stroke:rgba(255,255,255,.7); }
html[data-state="connecting"] .rd-ring circle,
html[data-state="buffering"] .rd-ring circle,
html[data-state="reconnecting"] .rd-ring circle{
  stroke:#F0A04B; stroke-dasharray:70 220; stroke-linecap:round; animation: rd-ring 1s linear infinite;
}
html[data-state="blocked"] .rd-ring circle,
html[data-state="resume"] .rd-ring circle{ stroke:#E8B84B; stroke-width:4; animation: rd-pulse 1.6s ease-in-out infinite; }
@keyframes rd-ring{ to{ transform:rotate(360deg); } }
@keyframes rd-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }


/* Εικονίδια play/pause σε ΚΑΘΕ κουμπί data-rd="play" */
[data-rd="play"] .i-pause{ display:none; }
[data-rd="play"].is-active .i-play{ display:none; }
[data-rd="play"].is-active .i-pause{ display:block; }

/* ── Κυλιόμενο κείμενο (το ελέγχει το app.js) ── */
[data-marquee]{ display:block; overflow:hidden; white-space:nowrap; min-width:0; }
[data-marquee] .mq-track{ display:inline-flex; gap:48px; will-change:transform; max-width:none; }
[data-marquee] .mq-b{ display:none; }
[data-marquee].mq-on{ text-align:left;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent);
          mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent); }
[data-marquee].mq-on .mq-b{ display:inline; }
/* Δύο γραμμές (τίτλος «τώρα παίζει») όσο χωράει */
[data-marquee].mq-two{ white-space:normal; }
[data-marquee].mq-two .mq-track{ display:block; }
[data-marquee].mq-two .mq-a{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
/* Χωρίς κίνηση: «…» */
[data-marquee].mq-ellipsis .mq-track{ display:block; }
[data-marquee].mq-ellipsis .mq-a{ display:block; overflow:hidden; text-overflow:ellipsis; }

/* ── Ιστορικό (το markup το φτιάχνει το app.js) ── */
.rd-h{ display:flex; align-items:center; gap:12px; list-style:none; min-width:0; }
.rd-h-cover{ width:44px; height:44px; border-radius:6px; object-fit:cover; flex-shrink:0; background:#2a1910; }
.rd-h-text{ flex:1; min-width:0; }
.rd-h-title{ font-weight:600; line-height:1.3; }
.rd-h-artist{ font-size:.85em; opacity:.75; margin-top:2px; line-height:1.3; }
.rd-h-time{ font-size:.8em; opacity:.6; font-variant-numeric:tabular-nums; flex-shrink:0; }



/* Λιγότερη κίνηση: ο δίσκος δεν γυρίζει, το δαχτυλίδι δεν περιστρέφεται, χωρίς παλμούς */
@media (prefers-reduced-motion: reduce){
  .rd-vinyl-disc{ animation:none !important; }
  .rd-ring circle{ animation:none !important; }
}

/* ── Σελίδα ── */
:root{ --bg:#0F0D0C; --surface:rgba(26,23,21,.72); --surface-2:rgba(44,39,35,.8); --text:#F4EEE8; --muted:#C2B5A7; --accent:#E2683C; --accent-2:#F0A04B; --line:rgba(244,238,232,.10); }
body{ margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; font-size:15px; -webkit-font-smoothing:antialiased; }

/* Φόντο: φωτογραφία του σταθμού (από τις ρυθμίσεις), σκουρυμένη ~75–90% και ελαφρά θολή */
.page-bg{ position:fixed; inset:-24px; z-index:0; background:#1a1310 center 55% / cover no-repeat;
  filter:blur(3px) saturate(.85); transform:scale(1.04); opacity:0; transition:opacity .8s ease; }
.page-bg.is-on{ opacity:1; }
.page-shade{ position:fixed; inset:0; z-index:0; pointer-events:none;
  /* ~70% σκούρο πάνω → ~82% κάτω (λίστες), λίγο πιο σκούρο γύρω από τον δίσκο για αντίθεση */
  background:
    radial-gradient(55% 35% at 50% 32%, rgba(15,13,12,.18), transparent 70%),
    linear-gradient(180deg, rgba(15,13,12,.66) 0%, rgba(15,13,12,.72) 45%, rgba(15,13,12,.82) 100%); }

/* Safe-area: η κεφαλίδα δεν μπαίνει κάτω από τη γραμμή κατάστασης / την «εγκοπή» του κινητού */
.app{ position:relative; z-index:1; max-width:1080px; margin:0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* Μπάρα εφαρμογής */
.topbar{ display:flex; align-items:center; gap:12px; padding:6px 0 14px; }
.avatar{ width:42px; height:42px; border-radius:12px; overflow:hidden; flex-shrink:0; background:#2a1910; box-shadow:0 0 0 1px var(--line); }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.who{ flex:1; min-width:0; }
.who b{ display:block; font-family:'Playfair Display',serif; font-size:18px; letter-spacing:.01em; }
.who small{ color:var(--muted); font-size:13px; }
.round{ width:42px; height:42px; border-radius:50%; border:0; background:var(--surface-2); color:var(--text); display:grid; place-items:center; cursor:pointer; flex-shrink:0; backdrop-filter:blur(8px); }
.round:hover{ background:rgba(60,53,47,.9); }
.live{ font-size:11px; font-weight:800; letter-spacing:.12em; color:#fff; background:#d13b2c; padding:4px 8px; border-radius:6px; }

/* Κύριο: βινύλιο + τίτλος */
.hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; padding:10px 0 4px; }
/* Κινητό: ~78% του πλάτους, με όριο ύψους ώστε τίτλος/καλλιτέχνης/«Ακολουθεί» να φαίνονται χωρίς κύλιση */
.rd-vinyl{ --vinyl:min(78vw, 42svh, 460px); }
.track{ width:100%; min-width:0; }
.track h1{ font-size:clamp(21px, 6vw, 30px); font-weight:800; letter-spacing:-.01em; line-height:1.15; margin:0; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.track p{ margin:6px 0 0; color:var(--muted); font-size:16px; font-weight:500; }

/* Ένταση: μόνο σε συσκευές με ποντίκι (desktop), μικρή και διακριτική κάτω από τον καλλιτέχνη */
.c-vol{ display:none; align-items:center; justify-content:center; gap:8px; margin-top:12px; color:var(--muted); }
.c-vol input{ width:120px; height:4px; accent-color:var(--accent); opacity:.75; }
.c-vol:hover input, .c-vol input:focus-visible{ opacity:1; }
@media (hover:hover) and (pointer:fine){ .c-vol{ display:flex; } }

/* Εξώφυλλο στο βινύλιο: στρώσεις με crossfade */
.c-layer{ position:absolute; inset:0; border-radius:50%; opacity:0; transition:opacity .8s ease; }
.c-layer.is-on{ opacity:1; }
.c-layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.c-layer.is-station img{ object-position:55% 50%; }
/* Μικρό εξώφυλλο: μαύρο βινύλιο με αυλάκια και την εικόνα ως ετικέτα (~44% της διαμέτρου) */
.c-layer.is-label{ background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.045) 0 1px, rgba(255,255,255,0) 1px 3px),
    radial-gradient(circle at 50% 50%, #1d1d1f 0 55%, #0d0d0e 100%); }
.c-layer.is-label img{ inset:28%; width:44%; height:44%; box-shadow:0 0 0 3px rgba(0,0,0,.65), 0 0 0 5px var(--accent); }
/* Όταν είναι ετικέτα, το κουμπί γίνεται πιο διάφανο ώστε να φαίνεται η εικόνα */
/* Κουμπί: δικό του σκούρο ημιδιάφανο κυκλικό φόντο, χωρίς περίγραμμα (ΕΝΑ δαχτυλίδι στο κέντρο: της ετικέτας) */
.rd-center-face{ background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.4); }
.rd-center:hover .rd-center-face{ background:rgba(0,0,0,.55); }
/* Δαχτυλίδι του κουμπιού: ΜΟΝΟ σε σύνδεση / επανασύνδεση (περιστρεφόμενο τόξο) */
.rd-ring{ display:none; }
html[data-state="connecting"] .rd-ring, html[data-state="buffering"] .rd-ring, html[data-state="reconnecting"] .rd-ring{ display:block; }
@media (prefers-reduced-motion: reduce){ .c-layer{ transition:none; } }

/* Λίστες */
.section{ margin-top:22px; }
.section h2{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.row{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px; backdrop-filter:blur(10px); }
.row img{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.row > div{ flex:1; min-width:0; }
.row b{ display:block; font-weight:700; line-height:1.3; }
.row span{ display:block; color:var(--muted); font-size:14px; }
.next-card{ transition:opacity .4s ease, max-height .4s ease, margin .4s ease; max-height:200px; overflow:hidden; }
.next-card.is-hidden{ opacity:0; max-height:0; margin-top:0; }
.list{ margin:0; padding:6px; display:grid; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(10px); }
.list .rd-h{ padding:8px; border-radius:10px; }
.list .rd-h:hover{ background:rgba(255,255,255,.04); }
.list .rd-h-title{ font-weight:600; font-size:14.5px; }
.list .rd-h-artist{ color:var(--muted); opacity:1; }
.list:empty{ display:none; }

@media (min-width: 900px){
  .app{ padding-top:24px; }
  .layout{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:start; }
  .hero{ position:sticky; top:24px; }
  .rd-vinyl{ --vinyl:min(56vh, 460px); }
  .section:first-child{ margin-top:8px; }
}

/* Κοινοποίηση: εικονίδιο στην κεφαλίδα + μικρό μενού (desktop) */
.share-wrap{ position:relative; flex-shrink:0; }
.share-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:220px; padding:6px;
  background:rgba(26,23,21,.96); border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); display:grid; gap:2px; }
.share-menu[hidden]{ display:none; }
.share-menu a, .share-menu button{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:10px;
  border:0; background:transparent; color:var(--text); font:500 14.5px/1.2 Inter,system-ui,sans-serif; text-decoration:none; cursor:pointer; text-align:left; white-space:nowrap; }
.share-menu a:hover, .share-menu button:hover, .share-menu a:focus-visible, .share-menu button:focus-visible{ background:rgba(255,255,255,.07); outline:none; }
.share-menu svg{ color:var(--muted); flex-shrink:0; }

/* Κεφαλίδα: όνομα σε μία γραμμή· σε πολύ στενές οθόνες μικρότερα κουμπιά/κενά */
.who b, .who small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who small{ display:block; }
@media (max-width:360px){
  .topbar{ gap:8px; }
  .avatar, .round{ width:38px; height:38px; }
  .who b{ font-size:16.5px; }
}