@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500&display=swap');

.rp-shell {
	position:relative;
	background:linear-gradient(135deg,rgba(26,29,58,.98) 0%,rgba(18,20,45,.99) 100%);
	border:1px solid rgba(99,102,241,.22);
	border-radius:18px;
	overflow:hidden;
	font-family:'DM Sans',sans-serif;
	color:#e8eaed;
	max-width:640px;
	margin:0 auto 1.5rem;
}

.rp-shell::before {
	content:'';position:absolute;top:-70px;left:-70px;
	width:220px;height:220px;
	background:radial-gradient(circle,rgba(99,102,241,.10) 0%,transparent 70%);
	pointer-events:none;z-index:0;
}
.rp-shell::after {
	content:'';position:absolute;bottom:-55px;right:-55px;
	width:200px;height:200px;
	background:radial-gradient(circle,rgba(236,72,153,.08) 0%,transparent 70%);
	pointer-events:none;z-index:0;
}

/* Top bar */
.rp-top-bar {
	height:3px;
	background:linear-gradient(90deg,rgba(99,102,241,.2),rgba(236,72,153,.15),rgba(96,165,250,.2));
	position:relative;overflow:hidden;
}
.rp-top-bar::after {
	content:'';position:absolute;inset:0;
	background:linear-gradient(90deg,#6366f1,#ec4899,#60a5fa,#6366f1);
	background-size:300% 100%;opacity:0;transition:opacity .4s;
}
.rp-shell.buffering .rp-top-bar::after {
	opacity:1;animation:rp-topbar 1.4s linear infinite;
}
@keyframes rp-topbar{0%{background-position:0%}100%{background-position:200%}}

/* Info sáv */
.rp-info-bar {
	padding:4px 16px;font-size:11px;font-weight:500;letter-spacing:.05em;
	color:#6b7280;min-height:20px;
	background:rgba(0,0,0,.18);
	border-bottom:1px solid rgba(255,255,255,.04);
	text-align:center;
}

/* Fő sor */
.rp-main {
	display:flex;align-items:center;gap:12px;
	padding:13px 15px;position:relative;z-index:1;
}

/* Play gomb + loading spinner */
.rp-play-btn {
	flex-shrink:0;width:50px;height:50px;border-radius:50%;
	background:linear-gradient(135deg,#6366f1,#ec4899);
	border:none;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:transform .2s,box-shadow .2s;
	position:relative;
}
.rp-play-btn:hover{transform:scale(1.07);box-shadow:0 0 20px rgba(99,102,241,.5);}
.rp-play-btn:active{transform:scale(.96);}
.rp-play-icon{width:18px;height:18px;fill:#fff;position:relative;z-index:1;transition:opacity .15s;}
.rp-spinner-ring {
	position:absolute;inset:0;border-radius:50%;
	display:none;
}
.rp-shell.loading .rp-spinner-ring{display:block;}
.rp-shell.loading .rp-play-icon{opacity:.3;}
.rp-spinner-ring svg{position:absolute;inset:0;width:100%;height:100%;}
.rp-spinner-arc {
	fill:none;stroke:#ffffff;stroke-width:2.5;stroke-linecap:round;
	stroke-dasharray:28 72;
	animation:rp-spin .85s linear infinite;
	transform-origin:center;
}
@keyframes rp-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Soundwave – 10 sáv, alulról nő */
.rp-waves {
	display:flex;align-items:flex-end;gap:2.5px;
	height:30px;flex-shrink:0;padding-bottom:2px;
}
.rp-waves span {
	display:block;width:2.5px;border-radius:99px;
	background:linear-gradient(180deg,#6366f1,#ec4899);
	opacity:.18;transform-origin:bottom center;
}
.rp-waves.playing span {
	opacity:.72;
	animation:rp-wave var(--rp-d,1.2s) ease-in-out infinite;
}
.rp-waves span:nth-child(1) {height:8px; --rp-d:1.00s}
.rp-waves span:nth-child(2) {height:18px;--rp-d:1.30s;animation-delay:.10s}
.rp-waves span:nth-child(3) {height:26px;--rp-d:0.90s;animation-delay:.18s}
.rp-waves span:nth-child(4) {height:14px;--rp-d:1.20s;animation-delay:.12s}
.rp-waves span:nth-child(5) {height:22px;--rp-d:1.10s;animation-delay:.22s}
.rp-waves span:nth-child(6) {height:10px;--rp-d:1.40s;animation-delay:.05s}
.rp-waves span:nth-child(7) {height:28px;--rp-d:1.00s;animation-delay:.28s}
.rp-waves span:nth-child(8) {height:16px;--rp-d:1.20s;animation-delay:.16s}
.rp-waves span:nth-child(9) {height:20px;--rp-d:0.95s;animation-delay:.08s}
.rp-waves span:nth-child(10){height:12px;--rp-d:1.35s;animation-delay:.24s}
@keyframes rp-wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.2)}}

/* Meta */
.rp-meta{flex:1;min-width:0;}
.rp-station-row{display:flex;align-items:center;gap:7px;margin-bottom:2px;}

/* Avatar */
.rp-avatar {
	width:42px;height:42px;border-radius:50%;
	background:rgba(99,102,241,.12);
	border:1.5px solid rgba(99,102,241,.28);
	overflow:hidden;flex-shrink:0;
	display:flex;align-items:center;justify-content:center;
	cursor:pointer;transition:border-color .25s,box-shadow .25s;
}
.rp-avatar:hover{border-color:rgba(99,102,241,.7);box-shadow:0 0 10px rgba(99,102,241,.35);}
.rp-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
.rp-av-autodj{width:22px;height:22px;opacity:.55;display:block;}
.rp-av-dj    {width:19px;height:19px;opacity:.4; display:block;}
.rp-shell.playing .rp-av-autodj{animation:rp-spin 4s linear infinite;}

/* DJ neve */
.rp-dj-name {
	font-family:'Syne',sans-serif;
	font-size:14px;font-weight:700;
	color:#e8eaed;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	flex:1;min-width:0;
}

/* Live pont */
.rp-live-dot{width:6px;height:6px;border-radius:50%;background:#ef4444;flex-shrink:0;display:none;}
.rp-live-dot.on{display:block;animation:rp-blink 1.3s ease-in-out infinite;}
@keyframes rp-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* "Most szól" sor */
.rp-song-text{font-size:11.5px;color:#8b92a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0;}
.rp-song-text span{color:#b4b9c5;font-weight:500;}

/* Jobb oldal */
.rp-right{flex-shrink:0;display:flex;align-items:center;gap:7px;}

.rp-badge {
	padding:2px 8px;border-radius:999px;
	font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	border:1px solid rgba(99,102,241,.3);background:rgba(99,102,241,.1);color:#a5b4fc;
	white-space:nowrap;
}
.rp-badge.live{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.1);color:#fca5a5;}

.rp-expand-btn{
	width:26px;height:26px;border-radius:7px;
	background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
	cursor:pointer;display:flex;align-items:center;justify-content:center;
	transition:background .2s,border-color .2s;flex-shrink:0;
}
.rp-expand-btn:hover{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.3);}
.rp-expand-btn svg{width:13px;height:13px;fill:none;stroke:#6b7280;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* Hangerő */
.rp-vol-wrap{display:flex;align-items:center;gap:6px;}
.rp-vol-icon{flex-shrink:0;cursor:pointer;opacity:.45;transition:opacity .2s;width:15px;height:15px;}
.rp-vol-icon:hover{opacity:1;}
.rp-vol-icon svg{width:15px;height:15px;display:block;fill:none;stroke:#b4b9c5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.rp-vol-track{width:62px;height:3.5px;background:rgba(255,255,255,.09);border-radius:99px;position:relative;cursor:pointer;touch-action:none;}
.rp-vol-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#6366f1,#ec4899);pointer-events:none;}
.rp-vol-thumb{position:absolute;top:50%;width:12px;height:12px;background:#fff;border-radius:50%;border:2px solid #6366f1;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 5px rgba(99,102,241,.4);}

/* ═══ EXPANDED OVERLAY ═══ */
.rp-expanded-overlay {
	position:fixed;inset:0;
	background:rgba(4,5,18,.9);
	backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
	z-index:9000;
	display:flex;align-items:center;justify-content:center;padding:1.5rem;
	opacity:0;pointer-events:none;transition:opacity .3s;
}
.rp-expanded-overlay.open{opacity:1;pointer-events:all;}

.rp-expanded-card {
	background:linear-gradient(160deg,rgba(20,22,48,.99) 0%,rgba(10,12,28,1) 100%);
	border:1px solid rgba(99,102,241,.18);
	border-radius:26px;width:100%;max-width:440px;max-height:88vh;
	overflow:hidden;display:flex;flex-direction:column;
	transform:translateY(28px) scale(.97);
	transition:transform .35s cubic-bezier(.22,.68,0,1.2);
}
.rp-expanded-overlay.open .rp-expanded-card{transform:translateY(0) scale(1);}

.rp-ex-top-bar{
	height:3px;flex-shrink:0;position:relative;overflow:hidden;
	background:linear-gradient(90deg,rgba(99,102,241,.2),rgba(236,72,153,.15),rgba(96,165,250,.2));
}
.rp-ex-top-bar::after{
	content:'';position:absolute;inset:0;
	background:linear-gradient(90deg,#6366f1,#ec4899,#60a5fa,#6366f1);
	background-size:300% 100%;opacity:0;transition:opacity .4s;
}
.rp-shell.buffering ~ .rp-expanded-overlay .rp-ex-top-bar::after,
.rp-ex-top-bar.buf::after{opacity:1;animation:rp-topbar 1.4s linear infinite;}

.rp-ex-header{
	display:flex;align-items:center;justify-content:space-between;
	padding:.85rem 1.3rem .55rem;flex-shrink:0;
}
.rp-ex-header-title{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6b7280;}
.rp-ex-close-btn{
	width:26px;height:26px;border-radius:50%;
	background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
	cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.rp-ex-close-btn:hover{background:rgba(99,102,241,.2);}
.rp-ex-close-btn svg{width:11px;height:11px;fill:none;stroke:#b4b9c5;stroke-width:2.5;stroke-linecap:round;}

/* Artwork */
.rp-ex-art {
	width:148px;height:148px;border-radius:16px;
	margin:0 auto .75rem;
	background:rgba(99,102,241,.1);
	border:2px solid rgba(99,102,241,.2);
	overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	flex-shrink:0;position:relative;
}
.rp-ex-art img{width:100%;height:100%;object-fit:cover;display:block;}
.rp-ex-art-autodj{width:52px;height:52px;opacity:.4;}
.rp-ex-art-dj    {width:52px;height:52px;opacity:.28;}
.rp-ex-live-badge{
	position:absolute;top:7px;right:7px;
	padding:2px 7px;border-radius:999px;
	font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
	background:rgba(239,68,68,.85);color:#fff;display:none;
}
.rp-ex-live-badge.on{display:block;}

.rp-ex-meta{text-align:center;padding:0 1.3rem .45rem;flex-shrink:0;}
.rp-ex-dj{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:800;color:#e8eaed;margin-bottom:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rp-ex-song{font-size:.84rem;color:#b4b9c5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.4rem;}
.rp-ex-stats{display:flex;justify-content:center;gap:12px;font-size:11px;color:#4a5060;}
.rp-ex-stats b{color:#8b92a3;font-weight:500;}

.rp-ex-controls{display:flex;align-items:center;justify-content:center;padding:.65rem 1.3rem;flex-shrink:0;}
.rp-ex-play-btn{
	width:56px;height:56px;border-radius:50%;
	background:linear-gradient(135deg,#6366f1,#ec4899);
	border:none;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:transform .2s,box-shadow .2s;
	box-shadow:0 4px 16px rgba(99,102,241,.35);position:relative;
}
.rp-ex-play-btn:hover{transform:scale(1.06);box-shadow:0 7px 24px rgba(99,102,241,.52);}
.rp-ex-play-icon{width:22px;height:22px;fill:#fff;position:relative;z-index:1;transition:opacity .15s;}
.rp-ex-spinner-ring{position:absolute;inset:0;border-radius:50%;display:none;}
.rp-shell.loading ~ .rp-expanded-overlay .rp-ex-spinner-ring{display:block;}
.rp-shell.loading ~ .rp-expanded-overlay .rp-ex-play-icon{opacity:.3;}
.rp-ex-spinner-ring svg{position:absolute;inset:0;width:100%;height:100%;}

.rp-ex-vol{display:flex;align-items:center;gap:9px;padding:0 1.3rem .45rem;flex-shrink:0;}
.rp-ex-vol-icon{flex-shrink:0;width:15px;height:15px;opacity:.38;}
.rp-ex-vol-icon svg{width:15px;height:15px;fill:none;stroke:#8b92a3;stroke-width:1.8;stroke-linecap:round;}
.rp-ex-vol-track{flex:1;height:3.5px;background:rgba(255,255,255,.09);border-radius:99px;position:relative;cursor:pointer;touch-action:none;}
.rp-ex-vol-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#6366f1,#ec4899);pointer-events:none;}
.rp-ex-vol-thumb{position:absolute;top:50%;width:13px;height:13px;background:#fff;border-radius:50%;border:2px solid #6366f1;transform:translate(-50%,-50%);pointer-events:none;}

/* Előzmények */
.rp-ex-history-wrap{flex:1;overflow-y:auto;min-height:0;border-top:1px solid rgba(255,255,255,.05);scrollbar-width:thin;scrollbar-color:rgba(99,102,241,.22) transparent;}
.rp-ex-history-label{
	padding:.65rem 1.3rem .3rem;font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
	color:#6b7280;display:flex;align-items:center;gap:.5rem;
	position:sticky;top:0;background:rgba(10,12,28,.96);z-index:1;
}
.rp-ex-history-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(99,102,241,.2),transparent);}
#rp-history-list{padding:0 .9rem .8rem;}
.rp-history-item{display:flex;align-items:center;gap:10px;padding:.48rem .4rem;border-radius:9px;transition:background .15s;}
.rp-history-item:hover{background:rgba(255,255,255,.04);}
.rp-history-num{font-size:11px;color:#2a2f45;font-weight:600;min-width:16px;text-align:right;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:4px;}
.rp-history-item.current .rp-h-num-text{display:none;}
.rp-history-dot{width:6px;height:6px;border-radius:50%;background:#6366f1;display:none;flex-shrink:0;animation:rp-blink 1.3s ease-in-out infinite;}
.rp-history-item.current .rp-history-dot{display:block;}
.rp-history-info{flex:1;min-width:0;}
.rp-history-title{font-size:.86rem;font-weight:600;color:#e8eaed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rp-history-item.current .rp-history-title{background:linear-gradient(90deg,#818cf8,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.rp-history-time{font-size:.7rem;color:#6b7280;margin-top:1px;}
.rp-history-empty{text-align:center;padding:1.4rem;font-size:.8rem;color:#2a2f45;}

/* Responsive mobil */
@media(max-width:440px){
	.rp-vol-wrap,.rp-waves{display:none;}
	.rp-main{flex-wrap:wrap;row-gap:8px;}
	.rp-meta{order:2;width:100%;}
	.rp-right{order:1;margin-left:auto;}
	.rp-play-btn{width:44px;height:44px;}
}