/* ════════════════════════════════════════════════════════════════
   OnRoute Sing — Apple Music Sing-style karaoke player
   ════════════════════════════════════════════════════════════════ */

/* ── Custom properties ────────────────────────────────────────── */
.ors-player {
	/* Theme: purple (default) */
	--ors-bg-a:        #3b1a60;
	--ors-bg-b:        #9c2fbf;
	--ors-glow:        rgba(156, 47, 191, 0.35);
	--ors-accent:      #ff4fb1;

	/* Typography */
	--ors-line-dim:    rgba(255,255,255,0.18);
	--ors-line-near:   rgba(255,255,255,0.35);
	--ors-line-active: #ffffff;
	--ors-word-sung:   #ffffff;
	--ors-word-cur:    var(--ors-accent);

	/* Controls */
	--ors-ctrl-bg:     rgba(255,255,255,0.12);
	--ors-radius:      22px;
	--ors-art-w:       220px;
}

/* ── Themes ───────────────────────────────────────────────────── */
.ors-theme-sunset   { --ors-bg-a:#4a1c3a; --ors-bg-b:#e85d3a; --ors-glow:rgba(232,93,58,.35); --ors-accent:#ffb347; }
.ors-theme-ocean    { --ors-bg-a:#0d3b66; --ors-bg-b:#1d9bc9; --ors-glow:rgba(29,155,201,.3);  --ors-accent:#5eead4; }
.ors-theme-forest   { --ors-bg-a:#14301f; --ors-bg-b:#2e7d4f; --ors-glow:rgba(46,125,79,.3);   --ors-accent:#a7f3d0; }
.ors-theme-midnight { --ors-bg-a:#0b0b1e; --ors-bg-b:#2a2d55; --ors-glow:rgba(42,45,85,.5);    --ors-accent:#7c8aff; }
/* OnRoute brand: navy → slightly lighter navy, green pin accent */
.ors-theme-onroute  { --ors-bg-a:#0f1e35; --ors-bg-b:#1b3a6b; --ors-glow:rgba(109,192,68,.2); --ors-accent:#6dc044; }

/* ── Shell ────────────────────────────────────────────────────── */
.ors-player {
	position:   relative;
	display:    block;
	width:      calc(100% - 20px);
	margin:     2rem auto;
	border-radius: var(--ors-radius);
	overflow:   hidden;
	background: linear-gradient(145deg, var(--ors-bg-a) 0%, var(--ors-bg-b) 100%);
	color:      #fff;
	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 32px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
	user-select:none;
}
/* Ambient glow overlay */
.ors-player::before {
	content:"";
	position:absolute; inset:0;
	background:
		radial-gradient(ellipse 60% 50% at 20% 25%, rgba(255,255,255,.09), transparent),
		radial-gradient(ellipse 50% 40% at 85% 80%, rgba(255,255,255,.05), transparent);
	pointer-events:none;
	z-index:0;
}
.ors-player > * { position:relative; z-index:1; }

/* ── Stage ────────────────────────────────────────────────────── */
.ors-stage {
	display:    grid;
	grid-template-columns: var(--ors-art-w) 1fr;
	gap:        2rem;
	padding:    2.5rem 2.5rem 1.5rem;
	align-items:start;
	min-height: 380px;
}
.ors-player.no-art .ors-stage {
	grid-template-columns: 1fr;
}

/* ── Cover art ────────────────────────────────────────────────── */
.ors-art {
	width:         var(--ors-art-w);
	aspect-ratio:  1;
	border-radius: 14px;
	overflow:      hidden;
	box-shadow:    0 18px 50px -12px rgba(0,0,0,.6);
	background:    rgba(0,0,0,.25);
	position:      sticky;
	top:           2rem;
}
.ors-art img {
	width:100%; height:100%; object-fit:cover; display:block;
}

/* ── Meta ─────────────────────────────────────────────────────── */
.ors-meta { margin-bottom:1.25rem; }
.ors-title {
	font-size:     .78rem;
	font-weight:   700;
	letter-spacing:.1em;
	text-transform:uppercase;
	opacity:       .65;
	margin:0 0 .2rem;
}
.ors-subtitle {
	font-size:     .72rem;
	opacity:       .45;
	letter-spacing:.04em;
}

/* ── Lyrics scroll container ─────────────────────────────────── */
.ors-lyrics {
	max-height:    540px;
	overflow-y:    auto;
	/* Top padding keeps first line below the fade;
	   bottom padding ensures last line is never clipped by the container */
	padding:       3rem 0 6rem;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-ms-overflow-style:none;
	/* Fade only at top — bottom stays fully visible so text is never cut off */
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 12%,
		black 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 12%,
		black 100%
	);
}
.ors-lyrics::-webkit-scrollbar { display:none; }

/* ── Lines ────────────────────────────────────────────────────── */
.ors-line {
	font-size:     clamp(1.45rem, 3vw, 2.4rem);
	font-weight:   800;
	line-height:   1.25;
	letter-spacing:-0.01em;
	margin:        0 0 1.2rem;
	color:         var(--ors-line-dim);
	cursor:        pointer;
	/* Smooth, eased fades — matches Apple Music Sing's slow cross-fade feel.
	   Longer duration + cubic-bezier prevents the abrupt "flicker" when a line
	   completes and the next becomes active. */
	transition:    color .75s cubic-bezier(0.4, 0, 0.2, 1),
	               opacity .75s cubic-bezier(0.4, 0, 0.2, 1);
	will-change:   color, opacity;
}
.ors-line:last-child { margin-bottom:0; }

.ors-line.is-upcoming { color: var(--ors-line-near); }
.ors-line.is-active   { color: var(--ors-line-active); }
.ors-line.is-past     { color: var(--ors-line-dim); opacity:.65; }

/* Lines are not interactive-looking — remove hover brightening */

/* ── Words ────────────────────────────────────────────────────── */
.ors-word {
	display:         inline;
	color:           inherit;
	transition:      color .22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active line: pending words are slightly dimmer, sung words are bright */
.ors-line.is-active .ors-word            { color: rgba(255,255,255,.55); }
.ors-line.is-active .ors-word.is-sung    { color: var(--ors-word-sung); }

/* Current word gets the accent colour — no transform, no layout shift */
.ors-line.is-active .ors-word.is-current {
	color:     var(--ors-word-cur);
	transition:color .22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Words outside active line just inherit from the line */
.ors-line:not(.is-active) .ors-word { color: inherit; }

/* ── Controls bar ─────────────────────────────────────────────── */
.ors-controls {
	display:    flex;
	align-items:center;
	gap:        .9rem;
	padding:    .9rem 2rem 1.4rem;
	background: rgba(0,0,0,.18);
	border-top: 1px solid rgba(255,255,255,.08);
	backdrop-filter:blur(10px);
}

/* Play/Pause button */
.ors-btn-play {
	background: rgba(255,255,255,.95);
	border:     0;
	border-radius:50%;
	width:50px; height:50px;
	display:grid; place-items:center;
	cursor:pointer;
	flex-shrink:0;
	transition:transform .15s ease, background .2s;
}
.ors-btn-play:hover   { background:#fff; transform:scale(1.07); }
.ors-btn-play:active  { transform:scale(.96); }
.ors-btn-play svg     { fill:#111; width:22px; height:22px; }
.ors-btn-play .ors-icon-pause  { display:none; }
.ors-player.is-playing .ors-btn-play .ors-icon-play  { display:none; }
.ors-player.is-playing .ors-btn-play .ors-icon-pause { display:block; }

/* Time displays */
.ors-time {
	font-variant-numeric:tabular-nums;
	font-size:.82rem;
	opacity:.8;
	min-width:36px;
	text-align:center;
}

/* Progress bar */
.ors-progress-wrap {
	position:relative;
	flex:1;
	height:4px;
	background:rgba(255,255,255,.2);
	border-radius:999px;
	cursor:pointer;
}
.ors-progress-fill {
	position:absolute; left:0; top:0; bottom:0;
	width:0;
	background:#fff;
	border-radius:inherit;
	transition:width .1s linear;
	pointer-events:none;
}
.ors-scrubber {
	position:absolute; inset:0;
	width:100%; height:100%;
	opacity:0;
	cursor:pointer;
	margin:0; padding:0;
	-webkit-appearance:none;
}
/* Grow the hit target on the progress bar */
.ors-progress-wrap::before {
	content:"";
	position:absolute;
	inset:-10px 0;
}

/* Speed button */
.ors-btn-speed {
	background:var(--ors-ctrl-bg);
	border:0; color:#fff;
	padding:5px 11px;
	border-radius:999px;
	font-size:.78rem; font-weight:700;
	cursor:pointer;
	min-width:42px;
	transition:background .2s;
}
.ors-btn-speed:hover { background:rgba(255,255,255,.22); }

/* ── Frontend error (admin only) ─────────────────────────────── */
.ors-frontend-error {
	padding:12px 16px;
	background:#fff5f5; color:#8a1f1f;
	border:1px solid #f5c0c0;
	border-radius:8px;
	font-size:13px;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:768px) {
	.ors-player { --ors-art-w:130px; --ors-radius:16px; margin:1rem auto; }
	.ors-stage  { gap:1rem; padding:1.4rem 1.2rem 1rem; min-height:260px; }
	.ors-lyrics { max-height:240px; padding:2.5rem 0 5rem; }
	.ors-line   { font-size:clamp(1.1rem,5vw,1.5rem); margin-bottom:.8rem; }
	.ors-controls { padding:.7rem 1.2rem 1.2rem; gap:.6rem; }
	.ors-btn-play { width:44px; height:44px; }
}
@media (max-width:480px) {
	.ors-player.has-art .ors-stage { grid-template-columns:1fr; }
	.ors-art { width:100px; margin:0 auto; }
	.ors-lyrics { text-align:left; }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
	.ors-line, .ors-word, .ors-lyrics, .ors-btn-play { transition:none !important; }
	.ors-lyrics { scroll-behavior:auto !important; }
}

/* ════════════════════════════════════════════════════════════════
   Ad Overlay — covers the stage while an ad plays
   ════════════════════════════════════════════════════════════════ */

/* The overlay covers the ENTIRE player — stage + controls — while an ad plays */
.ors-ad-overlay {
	position:  absolute;
	inset:     0;
	z-index:   10;
	display:   none;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align: center;
	padding:   2rem 2.5rem 2rem;
	background:linear-gradient(160deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 100%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: inherit;
	animation: ors-ad-fade-in .35s ease;
}
@keyframes ors-ad-fade-in {
	from { opacity:0; transform:translateY(6px); }
	to   { opacity:1; transform:translateY(0); }
}
.ors-ad-overlay.is-visible {
	display: flex;
}
/* While ad plays, the overlay covers everything — no additional disabling needed */

/* Inner content */
.ors-ad-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            .6rem;
	max-width:      500px;
	width:          100%;
}

/* "Advertisement" badge */
.ors-ad-badge {
	font-size:     .6rem;
	font-weight:   700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:         rgba(255,255,255,.45);
	border:        1px solid rgba(255,255,255,.2);
	padding:       3px 10px;
	border-radius: 999px;
	margin-bottom: .4rem;
}

/* Sponsor logo */
.ors-ad-logo-wrap {
	height:      64px;
	display:     flex;
	align-items: center;
	justify-content: center;
}
.ors-ad-logo-wrap img {
	max-height: 64px;
	max-width:  180px;
	object-fit: contain;
	border-radius: 8px;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.ors-ad-logo-wrap:empty { display:none; }

/* Sponsor name */
.ors-ad-sponsor {
	font-size:     clamp(1.5rem, 4vw, 2.2rem);
	font-weight:   800;
	color:         #fff;
	line-height:   1.1;
	letter-spacing:-.01em;
}

/* Tagline */
.ors-ad-tagline {
	font-size:  .9rem;
	color:      rgba(255,255,255,.65);
	min-height: 1.2em;
}

/* Progress bar */
.ors-ad-progress-wrap {
	width:         100%;
	max-width:     360px;
	height:        3px;
	background:    rgba(255,255,255,.2);
	border-radius: 999px;
	margin:        .5rem 0 .2rem;
	overflow:      hidden;
}
.ors-ad-progress-fill {
	height:      100%;
	width:       0%;
	background:  rgba(255,255,255,.8);
	border-radius:inherit;
	transition:  width .25s linear;
}

/* Ad time */
.ors-ad-time {
	font-variant-numeric: tabular-nums;
	font-size:  .75rem;
	color:      rgba(255,255,255,.45);
}

/* Actions row */
.ors-ad-actions {
	display:     flex;
	align-items: center;
	gap:         .75rem;
	margin-top:  .5rem;
	flex-wrap:   wrap;
	justify-content: center;
}

/* CTA button */
.ors-ad-cta-btn {
	display:       inline-block;
	padding:       8px 22px;
	background:    #fff;
	color:         #111;
	border-radius: 999px;
	font-size:     .82rem;
	font-weight:   700;
	text-decoration:none;
	transition:    opacity .15s, transform .15s;
}
.ors-ad-cta-btn:hover { opacity:.9; transform:scale(1.03); }

/* Skip button */
.ors-ad-skip-btn {
	background:  rgba(255,255,255,.15);
	border:      1px solid rgba(255,255,255,.3);
	color:       #fff;
	padding:     7px 16px;
	border-radius:999px;
	font-size:   .78rem;
	font-weight: 600;
	cursor:      pointer;
	transition:  background .15s;
}
.ors-ad-skip-btn:hover { background:rgba(255,255,255,.25); }

/* Skip countdown */
.ors-ad-skip-countdown {
	font-size:  .78rem;
	color:      rgba(255,255,255,.5);
}

/* Mobile */
@media (max-width:768px) {
	.ors-ad-overlay { padding:1.2rem; }
	.ors-ad-sponsor { font-size:1.4rem; }
}

/* Ad controls bar — locked, no interactive elements */
.ors-ad-controls {
	position:   absolute;
	bottom:     0; left:0; right:0;
	display:    flex;
	align-items:center;
	gap:        .9rem;
	padding:    .9rem 2rem 1.4rem;
	background: rgba(0,0,0,.25);
	border-top: 1px solid rgba(255,255,255,.08);
	pointer-events: none; /* entire bar is non-interactive */
}
.ors-ad-playing-pill {
	background:    rgba(255,255,255,.15);
	border:        1px solid rgba(255,255,255,.25);
	color:         rgba(255,255,255,.7);
	padding:       6px 14px;
	border-radius: 999px;
	font-size:     .75rem;
	font-weight:   600;
	letter-spacing:.04em;
	flex-shrink:   0;
	white-space:   nowrap;
}
.ors-ad-controls .ors-time {
	font-variant-numeric:tabular-nums;
	font-size:.82rem;
	opacity:.8;
	min-width:36px;
	text-align:center;
}
.ors-ad-controls .ors-progress-wrap {
	flex:1;
	height:4px;
	background:rgba(255,255,255,.2);
	border-radius:999px;
	overflow:hidden;
}
.ors-ad-controls .ors-progress-fill {
	height:100%;
	width:0%;
	background:#fff;
	border-radius:inherit;
	transition:width .1s linear;
}
@media (max-width:768px) {
	.ors-ad-controls { padding:.7rem 1.2rem 1.2rem; gap:.6rem; }
	.ors-ad-playing-pill { font-size:.68rem; padding:5px 10px; }
}