html, body {
	box-sizing: border-box;
	font-family: "Josefin Sans", sans-serif;
	/*outline: 4px solid red;*/
}
*, *::before, *::after {
  box-sizing: inherit;
}

* {
  /*outline: 1px solid rgba(255,0,0,0.2);*/
}

@media (max-width: 575.98px) {
  .break-out, .para {
    max-width: 100vw;
    white-space: normal;
    float: none;
    overflow-wrap: break-word;
  }
}

.header_playing {
	background-color: #040535;
	color:#fff;	
	text-transform: uppercase;
	font-size: 30px;
}

.footer_bg {
	background-color: #05117B;
	color:#ffffff;
}

.bg_light_blue {
	background-color: #0d6efd;
}

.bg_dark_blue {
	background-color: #05117B;
}

.bg_darkest_blue {
	background-color: #040535;
}

.bg_red_warning {

	background-color: #DC3545;
}
.text_light_blue {
	color: #0d6efd;
}

.text_darkest_blue {
	color: #040535;
}

.bg_lightest_grey {
	background-color: #e9e9e9;
}

.logo_txt {
	font-size: 30px;
	font-family: 'Staatliches', cursive;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.8);
}

.logo_pirate {
	text-shadow: 2px 2px rgba(0, 0, 0, 0.8);
}

/* Responsive carousel images (no inline styling) */
#carouselExampleCaptions .carousel-inner,
#carouselExampleCaptions .carousel-item {
	width: 100%;
}

#carouselExampleCaptions .piraten-carousel-img {
	display: block;
	width: 100%;
	height: clamp(180px, 30vw, 340px);
	object-fit: cover;
	border-radius: 0.5rem;
}

/* On-Air DJ card (scoped) */
#reviewThis .piraten-dj-card {
	overflow: hidden;
	border: 0;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
	border-radius: 0.5rem;
}

#reviewThis .piraten-dj-card__cover {
	position: relative;
}

#reviewThis .piraten-dj-card__cover-inner {
	position: relative;
	min-height: 240px;
	background-image: url('/assets/images/background.png');
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	transition: background-image 0.3s ease-in-out;
}

#reviewThis .piraten-dj-card__cover-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 5, 53, 0.15) 0%, rgba(4, 5, 53, 0.75) 100%);
	pointer-events: none;
	z-index: 0;
}

#reviewThis .piraten-dj-card__body {
	position: relative;
	padding-top: 8rem;
}

/* !important needed: audioMotion-analyzer sets an inline position style on its container */
#reviewThis #analyzer_container {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: 0 !important;
	height: 100% !important;
	margin: 0 !important;
	z-index: 1;
}

#reviewThis #analyzer_container canvas {
	height: 100% !important;
}

/* Avatar overlaps the cover */
#reviewThis #djProfielFotoId.piraten-dj-card__avatar {
	position: absolute;
	left: 50%;
	bottom: -132px;
	transform: translateX(-50%);
	width: 264px;
	height: 264px;
	border-radius: 999px;
	background: #ffffff;
	padding: 6px;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
	z-index: 2;
}

#reviewThis #djNameId {
	position: absolute;
	left: 50%;
	text-transform: capitalize;
	top:15px;
    transform: translateX(-50%);
    white-space: nowrap;
	font-size: 2.2rem;
	font-weight: 700;
	color: #ffffff;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.8);
	margin-top: 0.5rem;
	z-index: 2;
}

#reviewThis #djProfielFoto.piraten-dj-card__avatar-img {
	width: 100%;
	height: 100%;
	border-radius: 999px;
	object-fit: cover;
	background: #e9e9e9;
}

#reviewThis .piraten-dj-card__program {
	margin-top: 0.25rem;
}

#reviewThis .piraten-dj-card__socials {
	margin-top: 0.5rem;
}

#reviewThis #volume-control {
	width: 100%;
}

#reviewThis .piraten-dj-card__controls {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

#reviewThis #play-button,
#reviewThis #pause-button {
	cursor: pointer;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
	transition: transform 120ms ease, opacity 120ms ease;
}

#reviewThis #play-button:hover,
#reviewThis #pause-button:hover {
	transform: translateY(-1px) scale(1.02);
}

#reviewThis #play-button:focus-visible,
#reviewThis #pause-button:focus-visible {
	outline: 2px solid rgba(13, 110, 253, 0.9);
	outline-offset: 4px;
	border-radius: 999px;
}

/* Logged-in user card on homepage */
.piraten-user-card {
	border: 0;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.piraten-user-card__avatar {
	width: clamp(56px, 14vw, 72px);
	height: clamp(56px, 14vw, 72px);
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
	overflow: hidden;
	background: #e9ecef;
	border: 3px solid rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
	flex: 0 0 auto;
}

@media (max-width: 575.98px) {
	.piraten-user-card .card-body {
		gap: 0.75rem !important;
	}

	.piraten-user-card__avatar {
		width: 56px;
		height: 56px;
		border-width: 2px;
	}
}

.piraten-user-card__label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6c757d;
}

.piraten-user-card__name {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Logged-in users directory cards */
.piraten-user-directory-card {
	border: 1px solid rgba(5, 17, 123, 0.12);
}

.piraten-user-directory-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	object-fit: cover;
	background: #e9ecef;
	border: 2px solid #dc3545;
	flex: 0 0 auto;
}

.piraten-dj-card__artwork-wrap {
	display: flex;
	justify-content: center;
	margin: 1rem auto .75rem;
}

.piraten-dj-card__artwork {
	display: block;
	width: clamp(140px, 42vw, 250px);
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: .35rem;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
}

/* Listen modal (scoped) */
#listenModal .piraten-listen-modal {
	overflow: hidden;
	border: 0;
	border-radius: 1rem;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
	background: #ffffff;
}

#listenModal .piraten-listen-modal__cover {
	position: relative;
	min-height: 330px;
	padding: 1.25rem 1.25rem 1.75rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-image: url('/assets/images/background.png');
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

#listenModal .piraten-listen-modal__cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	z-index: 0;
}

#listenModal .piraten-listen-modal__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 5, 53, 0.25) 0%, rgba(4, 5, 53, 0.85) 100%);
	pointer-events: none;
	z-index: 1;
}

#listenModal .piraten-listen-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	filter: invert(1) grayscale(1);
	opacity: 0.9;
}

#listenModal .piraten-listen-modal__streamer {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #ffffff;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.65);
}

#listenModal h3 {
	color: #ffffff !important;
}

/* getStreamer.js injects an <img> into #streamer_popup with inline styles.
   Use !important to keep modal styling consistent. */
#listenModal #streamer_popup img {
	width: 264px !important;
	height: 264px !important;
	object-fit: cover !important;
	border-radius: 999px !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
	border: 6px solid rgba(255, 255, 255, 0.92) !important;
	background: #e9e9e9;
}

#listenModal .piraten-listen-modal__title {
	font-family: 'Pacifico', cursive;
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	line-height: 1.05;
}

#listenModal .piraten-listen-modal__subtitle {
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.95;
}

#listenModal .piraten-listen-modal__body {
	text-align: center;
	padding: 1.25rem 1.25rem 1.5rem;
	background: #ffffff;
}

#listenModal .piraten-listen-modal__question {
	font-weight: 800;
	font-size: 1.15rem;
	margin-bottom: 0.9rem;
}

#listenModal .piraten-listen-modal__actions .btn {
	border-radius: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#listenModal .piraten-listen-modal__actions .btn-outline-light {
	color: #05117B;
	border-color: rgba(5, 17, 123, 0.25);
}

#listenModal .piraten-listen-modal__actions .btn-outline-light:hover,
#listenModal .piraten-listen-modal__actions .btn-outline-light:focus {
	background: rgba(5, 17, 123, 0.08);
	border-color: rgba(5, 17, 123, 0.35);
	color: #05117B;
}

.header_txt {
	font-size: 20px;
	font-family: 'Staatliches', cursive;
	text-shadow: 2px 2px #111111;
}

.footer_txt {
	font-family: 'Staatliches', cursive;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.8);
	color:#fff;
}
.subfooter{
	background-color:#040535;
}
a, .nav-link{
	color:#040535;
}
a:hover, .nav-link:hover{
	color:#040535;
}
a:active{
	color:#040535;
}
a:visited{
	color:#040535;
}

/* Navbar tabs styled as danger buttons */
.navbar .navbar-nav {
	flex-wrap: wrap;
	gap: .5rem;
}

.navbar .navbar-nav .nav-link.btn {
	margin-right: 0;
	padding: .375rem .75rem;
	border-radius: .5rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
}

.navbar .navbar-nav .nav-link.btn.btn-danger {
	background-color: #dc3545;
	border-color: #dc3545;
}

.navbar .navbar-nav .nav-link.btn.btn-danger:hover,
.navbar .navbar-nav .nav-link.btn.btn-danger:focus {
	background-color: #bb2d3b;
	border-color: #b02a37;
	color: #fff !important;
}

/* Active tab: slightly "pressed" look */
.navbar .navbar-nav .nav-link.btn.btn-danger.active,
.navbar .navbar-nav .nav-link.btn.btn-danger[aria-selected="true"] {
	background-color: #a52834;
	border-color: #9b2631;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.navbar .navbar-nav .nav-link.btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

.navbar .navbar-login-btn {
	margin-left: .5rem;
	padding: .375rem .75rem;
	border-radius: .5rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.navbar .navbar-login-btn.btn-danger:hover,
.navbar .navbar-login-btn.btn-danger:focus {
	background-color: #bb2d3b;
	border-color: #b02a37;
}

.navbar .navbar-login-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

/* Tighten spacing on mobile */
@media (max-width: 991.98px) {
	.navbar .navbar-nav .nav-link.btn {
		margin: .25rem 0;
		width: 100%;
	}
	.navbar .navbar-login-btn {
		margin: .5rem 0 0;
		width: 100%;
	}
}

.play {
	cursor: pointer;
}
.pause {
	cursor: pointer;
}

.play:hover {
	color:#05117B;
}
.pause:hover {
	color:#05117B;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Pacifico', cursive;
	color: #05117B;
}

/* Reusable page header "hero" with background + overlay text */
.page-hero {
	position: relative;
	overflow: hidden;
	border-radius: .75rem;
	min-height: 120px;
	padding: 1rem 1.25rem;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	background-image: var(--page-hero-bg, url('/assets/images/background.png'));
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--page-hero-overlay, rgba(4, 5, 53, 0.55));
	pointer-events: none;
}

.page-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	text-align: center;
	color: var(--page-hero-text-color, #ffffff);
	text-shadow: 2px 2px rgba(0, 0, 0, 0.8);
}

.page-hero__title {
	font-family: 'Pacifico', cursive;
	font-size: var(--page-hero-title-size, clamp(1.5rem, 2.6vw, 2.4rem));
	line-height: 1.05;
}

.page-hero__subtitle {
	font-family: 'Pacifico', cursive;
	font-size: var(--page-hero-subtitle-size, clamp(1.0rem, 1.8vw, 1.5rem));
	opacity: 0.95;
}

@media (min-width: 768px) {
	.page-hero {
		min-height: 150px;
		padding: 1.25rem 1.5rem;
	}
}

/* Team tab: nicer profile card in #team_member_info */
.team-profile-card {
	border: 0;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
}

.team-profile-card.team-profile-card--onair {
	background: linear-gradient(180deg, rgba(13, 110, 253, 0.15), rgba(255, 255, 255, 0.92) 55%);
}

.team-profile-cover {
	height: 110px;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

.team-profile-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
}

.team-profile-avatar {
	position: relative;
	z-index: 2;
	width: 104px;
	height: 104px;
	object-fit: cover;
	border-radius: 999px;
	border: 4px solid #fff;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
	margin-top: -52px;
}

.team-profile-name {
	font-family: 'Pacifico', cursive;
	color: #05117B;
	font-size: 1.4rem;
	line-height: 1.1;
}

.team-profile-meta {
	color: rgba(5, 17, 123, 0.85);
}

.team-profile-program {
	font-weight: 700;
	color: #040535;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(4, 5, 53, 0.12);
	border-radius: .75rem;
	padding: .5rem .75rem;
}

.team-profile-actions a,
.team-profile-actions i {
	font-size: 1.15rem;
	margin: 0 .35rem;
}

@media (min-width: 768px) {
	.team-profile-cover { height: 130px; }
	.team-profile-avatar { width: 124px; height: 124px; margin-top: -62px; }
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.main-container {
	position:relative;
}
.main-container-fluid {
	height: 450px;
    position:relative;
}
.sec-container {
	height: 450px;
    width:100%;
    position:absolute;
	padding:0;
	margin:0;
    top:0;
}

.tick-wrapper{
	background-color: rgba(255, 100, 100, 0.6);
	font-family: 'Staatliches';
    font-size:20px;
    font-weight: normal;
    color:#ffffff;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.8);
}

.text-justify {
	text-align: justify;
	text-justify: inter-word;
}
.marquee3k__inner {
	display: inline-block;
	padding-left: 100%;
	animation: marquee3k-scroll linear infinite;
	white-space: nowrap;
	height:40px;
	line-height: 40px;
	font-size:20px;
}
 #messageTicker {
	background-color:#111;
	border-radius: 5px;
	width: 100%;
	overflow: hidden;
}

#footerTicker {
	width: 100%;
	overflow: hidden;
}

footer.footer.fixed-bottom {
  width: 100vw;
  max-width: 100vw;
  left: 0;
  right: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.para {
	width:100%;
	color: #e0e0e0;
	font-size: 30px;
	font-family: 'Caveat', cursive;
	font-weight: 700;
	white-space: nowrap;
	clear: both;
	float: left;
	max-width: 100vw;
	overflow-wrap: break-word;
}

.break-out{
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: calc(-1 * (100vw - 100%) / 2);
	color: rgba(0,0,0,.6);
}

/* On small screens, 100vw often causes horizontal scrolling (scrollbar width rounding).
   Keep full-bleed effect for desktop, but clamp it for mobile. */
@media (max-width: 575.98px) {
	.break-out{
		width: 100%;
		max-width: 100vw;
		left: 0;
	}
	.para {
		white-space: normal;
		float: none;
		font-size: 20px;
		overflow-wrap: break-word;
		max-width: 100vw;
	}
}

#play-button, #play-button-3, #pause-button, #pause-button-3 {
	cursor: pointer;
}

.analyzer-container {
	height: 140px;
	width: 100%;
	background: transparent !important;
}

#analyzer_container,
#analyzer_container_2,
#analyzer_container canvas,
#analyzer_container_2 canvas {
	background: transparent !important;
}

#analyzer_container_2 canvas { opacity: 0.4; }
#analyzer_container canvas { opacity: 0.4; }

@media (min-width: 576px) {
	.analyzer-container {
		height: 160px;
	}
}

@media (min-width: 768px) {
	.analyzer-container {
		height: 190px;
	}
}

@media (min-width: 992px) {
	.analyzer-container {
		height: 220px;
	}
}

@media (min-width: 1200px) {
	.analyzer-container {
		height: 250px;
	}
}

/* Overlay typography sizing (Bootstrap breakpoints) */
#analyzer_container_2 .analyzer-overlay {
	font-size: calc(1.75rem + var(--overlay-font-offset-px, 0px));
}

@media (min-width: 576px) {
	#analyzer_container_2 .analyzer-overlay {
		font-size: calc(2rem + var(--overlay-font-offset-px, 0px));
	}
}

@media (min-width: 768px) {
	#analyzer_container_2 .analyzer-overlay {
		font-size: calc(2.5rem + var(--overlay-font-offset-px, 0px));
	}
}

@media (min-width: 992px) {
	#analyzer_container_2 .analyzer-overlay {
		font-size: calc(3rem + var(--overlay-font-offset-px, 0px));
	}
}

@media (min-width: 1200px) {
	#analyzer_container_2 .analyzer-overlay {
		font-size: calc(3.5rem + var(--overlay-font-offset-px, 0px));
	}
}

@media (min-width: 1400px) {
	#analyzer_container_2 .analyzer-overlay {
		font-size: calc(4rem + var(--overlay-font-offset-px, 0px));
	}
}

.logo {
	text-align: center;
	color: #05117B;
	opacity: 1;
	position: relative;
}

/* Make the second analyzer fill the logo wrapper */
.logo #analyzer_container_2 {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* Keep logo content above the analyzer */
.logo > :not(#analyzer_container_2) {
	position: relative;
	z-index: 1;
}

.logo h1 {
	font-family: 'Pacifico', cursive;
	text-shadow: 2px 2px rgba(255, 255, 255, 1);
	font-size: 3rem;
	margin: 0;
	opacity: 1;
}

.logo p {
	font-size: 1.5rem;
	margin: 0;
	color: #222;
	text-shadow: 2px 2px rgba(255, 255, 255, 1);
	opacity: 1;
}

.logo i {
	margin: 0;
	color: #0d6efd;
	text-shadow: 2px 2px rgba(255, 255, 255, 1);
	opacity: 1;
}

#logo_container {
	background-position: 50% 50%;
	background-size:cover;
}

#test_container {
	position: relative;
	background-position: 50% 50%;
	background-size: cover;
}

/* Background image opacity without affecting children */
#test_container::before {
	content: "";
	position: absolute;
	inset: 0;
	/* background-position: 50% 50%;
	background-size: cover;
	background-image: url('/assets/images/background.png'); */
	opacity: 0.8;
	pointer-events: none;
	z-index: 0;
}

#test_container > * {
	position: relative;
	z-index: 1;
}

.blur {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(8px);
	height: 100%;
	width: 100%;
	padding: 10px;
}

.fancy_text {
	font-family: 'Pacifico', cursive;
	text-shadow: 2px 2px rgba(255, 255, 255, 1);
	color: #f5f6f7;
	font-size: 2rem;
	margin: 0;
}

.card-title{
	color: #05117B;
}

.card-no-border .card {
    border-color: #d7dfe3;
    border-radius: 4px;
    margin-bottom: 30px;
    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05)
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem
}

.pro-img {
    margin-top: -80px;
    margin-bottom: 20px
}

.little-profile .pro-img img {
    width: 80%;
    height: 80%;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 100%
}

video {
	border-radius: 10px;
	overflow: hidden;
}

.emoij_wrap {
	font-size: 36px;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	padding:0px;
}

.grecaptcha-badge { 
    visibility: hidden !important;
}

canvas {
  display: block;
  width: 100%;
  height:100%;
}

.rotate-random {
  animation-name: rotate360;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate360 {
  0%   { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

.navbar-brand{
	color: #ffffff !important;
	font-family: "Pacifico", cursive;
	font-weight: 400;
	font-style: normal;
}

.spotify-card {
        background-color: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        /*transition: all 0.25s ease-in-out;*/
        cursor: pointer;
    }

    .spotify-card:hover {
        /*background-color: #f0f7ff; /* Soft blue tint on hover */
        /*border-color: #0d6efd;*/
        box-shadow: 0 8px 24px rgba(13, 110, 253, 0.12);
        /*transform: translateY(-2px);*/
    }

    .album-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }

    .play-btn-overlay {
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        background-color: #0d6efd;
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        transform: translateY(0);
        transition: all 0.2s ease-in-out;
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    }

    .play-btn-overlay:hover {
        background-color: #0b5ed7;
        transform: scale(1.05);
    }

    /* Red pause state, same always-visible treatment as the play button. */
    .pause-btn-overlay {
        background-color: #dc3545;
        opacity: 1;
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

    .pause-btn-overlay:hover {
        background-color: #bb2d3b;
        transform: scale(1.05);
    }