/* ==========================================
   TX PLAYER — Dark Monochrome Theme
   Pure Black & White Design System
   ========================================== */

/* ---------- Reset & Base ---------- */
.tx-player-wrapper *,
.tx-player-wrapper *::before,
.tx-player-wrapper *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.tx-player-wrapper {
   --tx-black: #000000;
   --tx-black-soft: #0a0a0a;
   --tx-gray-950: #0d0d0d;
   --tx-gray-900: #111111;
   --tx-gray-850: #161616;
   --tx-gray-800: #1a1a1a;
   --tx-gray-700: #222222;
   --tx-gray-600: #333333;
   --tx-gray-500: #555555;
   --tx-gray-400: #777777;
   --tx-gray-300: #999999;
   --tx-gray-200: #bbbbbb;
   --tx-gray-100: #dddddd;
   --tx-gray-50: #f0f0f0;
   --tx-white: #ffffff;

   --tx-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

   --tx-radius-sm: 6px;
   --tx-radius-md: 12px;
   --tx-radius-lg: 20px;
   --tx-radius-xl: 28px;

   --tx-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --tx-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
   --tx-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

   --tx-glow-white: 0 0 30px rgba(255, 255, 255, 0.08);
   --tx-glow-white-strong: 0 0 60px rgba(255, 255, 255, 0.12);
}

.tx-player-wrapper {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: clip;
}

.tx-player-wrapper {
   font-family: var(--tx-font);
   background: transparent;
   color: var(--tx-white);
   min-height: auto;
   overflow: visible;
   position: relative;
   width: 100%;
}

.tx-player-wrapper

/* Prevent scrolling/jumping during intro animation bounds stretching */
html.tx-intro-active,
.tx-player-wrapper body.tx-intro-active,
.tx-player-wrapper.intro-active {
   overflow: hidden !important;
}

.tx-player-wrapper

/* ---------- Background Layers ---------- */
.bg-artwork {
   display: none;
}

.tx-player-wrapper .bg-overlay {
   display: none;
}

.tx-player-wrapper .bg-noise {
   display: none;
}

.tx-player-wrapper

/* ---------- App Container ---------- */
.app {
   position: relative;
   z-index: 3;
   display: flex;
   flex-direction: column;
   min-height: auto;
   max-width: none;
   width: 100%;
   margin: 0 auto;
}

.tx-player-wrapper

/* ---------- Header ---------- */
.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 0;
   margin-left: 0 !important;
   opacity: 0;
   transition: margin-left 0.5s;
   animation: fadeSlideDown 0.6s ease forwards;
   animation-delay: 0.2s;
   z-index: 5;
}

.tx-player-wrapper .logo {
   display: flex;
   align-items: center;
   gap: 8px;
   user-select: none;
}

.tx-player-wrapper .logo-mark {
   font-weight: 800;
   font-size: 18px;
   letter-spacing: 2px;
   color: var(--tx-white);
   background: var(--tx-white);
   color: var(--tx-black);
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--tx-radius-sm);
   font-size: 13px;
}

.tx-player-wrapper .logo-text {
   font-weight: 300;
   font-size: 14px;
   letter-spacing: 4px;
   color: var(--tx-gray-300);
   text-transform: uppercase;
}

.tx-player-wrapper .header-actions {
   display: flex;
   align-items: center;
   gap: 8px;
}

.tx-player-wrapper .settings-btn {
   background: none;
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--tx-gray-400);
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all var(--tx-transition-base);
}

.tx-player-wrapper .settings-btn svg {
   width: 16px;
   height: 16px;
}

.tx-player-wrapper .settings-btn:hover {
   color: var(--tx-white);
   border-color: rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.05);
}

.tx-player-wrapper

/* ---------- URL Bar ---------- */
.url-bar {
   margin-bottom: 16px;
   margin-left: 0 !important;
   opacity: 0;
   transition: opacity 0.5s;
   animation: fadeSlideDown 0.6s ease forwards;
   animation-delay: 0.3s;
   z-index: 5;
}

.tx-player-wrapper .url-bar-inner {
   display: flex;
   align-items: center;
   gap: 10px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--tx-radius-md);
   padding: 4px 4px 4px 14px;
   transition: border-color var(--tx-transition-base), box-shadow var(--tx-transition-base);
}

.tx-player-wrapper .url-bar-inner:focus-within {
   border-color: rgba(255, 255, 255, 0.15);
   box-shadow: 0 0 20px rgba(255, 255, 255, 0.03);
}

.tx-player-wrapper .url-bar-icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   color: var(--tx-gray-500);
}

.tx-player-wrapper .url-input {
   flex: 1;
   background: none;
   border: none;
   color: var(--tx-white);
   font-family: var(--tx-font);
   font-size: 13px;
   outline: none;
   padding: 8px 0;
   min-width: 0;
}

.tx-player-wrapper .url-input::placeholder {
   color: var(--tx-gray-500);
}

.tx-player-wrapper .url-load-btn {
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--tx-gray-300);
   width: 36px;
   height: 36px;
   border-radius: var(--tx-radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   flex-shrink: 0;
   transition: all var(--tx-transition-fast);
}

.tx-player-wrapper .url-load-btn svg {
   width: 18px;
   height: 18px;
}

.tx-player-wrapper .url-load-btn:hover {
   background: var(--tx-white);
   color: var(--tx-black);
   border-color: var(--tx-white);
}

.tx-player-wrapper .url-load-btn.is-loading {
   pointer-events: none;
   animation: spin 1s linear infinite;
}

.tx-player-wrapper .url-load-btn.is-loading svg {
   display: none;
}

.tx-player-wrapper .url-load-btn.is-loading::after {
   content: '';
   width: 14px;
   height: 14px;
   border: 2px solid var(--tx-gray-500);
   border-top-color: var(--tx-white);
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
}

.tx-player-wrapper .url-bar-status {
   font-size: 11px;
   color: var(--tx-gray-500);
   padding: 4px 14px 0;
   min-height: 18px;
   transition: color var(--tx-transition-fast);
}

.tx-player-wrapper .url-bar-status.is-error {
   color: var(--tx-gray-200);
}

.tx-player-wrapper .url-bar-status.is-success {
   color: var(--tx-gray-300);
}

.tx-player-wrapper

/* ---------- Main ---------- */
.main {
   position: relative;
   z-index: 30;
   flex: 1 0 auto;
   /* Prevent accordion squish due to bottom tracks layout */
   min-height: 600px;
   /* Reduced from 720px to save space, but enough for covers */
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   /* CRITICAL: Allows bottom sections to flow properly under the turntable row */
   align-items: flex-start;
   /* Pulls player to top ceiling rather than vertically centering */
   justify-content: flex-start;
   gap: 0;
   padding-top: 100px !important;
   /* Safe but flush reach for all orbiting covers */
   padding-left: 100px !important;
   /* Safe but flush reach for all orbiting covers */
   padding-bottom: 40px;
}

.tx-player-wrapper

/* ---------- Floating Volume ---------- */
.floating-volume {
   position: absolute;
   top: 40px;
   left: 40px;
   z-index: 50;
   opacity: 0;
   animation: fadeScaleUp 0.8s ease forwards;
   animation-delay: 0.4s;
}

.tx-player-wrapper

/* ---------- Artwork ---------- */
.artwork-wrapper {
   display: flex;
   justify-content: center;
   margin-bottom: 28px;
}

.tx-player-wrapper .artwork-container {
   position: relative;
   width: 260px;
   height: 260px;
   border-radius: var(--tx-radius-lg);
   overflow: hidden;
   box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.06);
   transition: transform var(--tx-transition-slow), box-shadow var(--tx-transition-slow);
}

.tx-player-wrapper .artwork-container:hover {
   transform: scale(1.02);
}

.tx-player-wrapper .player-card.is-playing .artwork-container {
   box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 60px rgba(255, 255, 255, 0.06);
}

.tx-player-wrapper .artwork {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform var(--tx-transition-slow);
   background: var(--tx-gray-900);
}

.tx-player-wrapper .artwork-glow {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
   pointer-events: none;
}

.tx-player-wrapper

/* ---------- Track Info ---------- */
.track-info {
   text-align: left;
   margin-bottom: 28px;
   width: 80%;
   /* Match waveform width */
   margin-left: auto;
   margin-right: auto;
}

.tx-player-wrapper .track-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 6px;
}

.tx-player-wrapper .tag {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--tx-gray-400);
}

.tx-player-wrapper .track-title {
   font-size: 20px;
   font-weight: 600;
   color: var(--tx-white);
   line-height: 1.3;
   margin-bottom: 0;
   letter-spacing: -0.3px;
   transition: opacity var(--tx-transition-base);
}

.tx-player-wrapper .track-artist {
   font-size: 14px;
   font-weight: 400;
   color: var(--tx-gray-400);
   letter-spacing: 0.2px;
}

.tx-player-wrapper

/* ---------- Waveform ---------- */
.waveform-wrapper {
   position: relative;
   height: 64px;
   margin-bottom: 6px;
   cursor: pointer;
   border-radius: var(--tx-radius-sm);
   overflow: visible !important;
}

.tx-player-wrapper .waveform-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 6px;
   /* Matches the gap between waveform and time-row */
}

.tx-player-wrapper .waveform-title {
   font-size: 11px;
   font-weight: 700;
   color: var(--tx-white);
   pointer-events: none;
   letter-spacing: 0.5px;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.tx-player-wrapper .waveform-label-name {
   font-size: 10px;
   font-weight: 500;
   color: var(--tx-gray-400);
   pointer-events: none;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   white-space: nowrap;
}

.tx-player-wrapper .waveform-wrapper:hover .waveform-hover-time {
   opacity: 1;
}

.tx-player-wrapper #waveformCanvas {
   width: 100%;
   height: 100%;
   display: block;
}

.tx-player-wrapper .waveform-hover-time {
   position: absolute;
   top: -28px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--tx-gray-800);
   color: var(--tx-white);
   font-size: 11px;
   font-weight: 500;
   padding: 3px 8px;
   border-radius: 4px;
   pointer-events: none;
   opacity: 0;
   transition: opacity var(--tx-transition-fast);
}

.tx-player-wrapper .time-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 0;
}

.tx-player-wrapper .time-current,
.tx-player-wrapper .time-duration {
   font-size: 12px;
   font-weight: 500;
   color: var(--tx-gray-400);
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.5px;
}

.tx-player-wrapper

/* ---------- Controls ---------- */
.controls {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.tx-player-wrapper .controls-center {
   display: flex;
   align-items: center;
   gap: 16px;
}

.tx-player-wrapper .ctrl-btn {
   background: none;
   border: none;
   color: var(--tx-gray-300);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--tx-transition-fast);
   padding: 0;
}

.tx-player-wrapper .ctrl-btn svg {
   width: 22px;
   height: 22px;
}

.tx-player-wrapper .ctrl-btn:hover {
   color: var(--tx-white);
   transform: scale(1.1);
}

.tx-player-wrapper .ctrl-btn:active {
   transform: scale(0.95);
}

.tx-player-wrapper #prevBtn,
.tx-player-wrapper #nextBtn {
   color: #111617 !important;
   /* Black Icons */
   background: #FFFFFF !important;
   /* White Background */
   background-color: #FFFFFF !important;
   width: 44px !important;
   /* Circular footprint */
   height: 44px !important;
   border-radius: 50% !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
}

.tx-player-wrapper #prevBtn:hover,
.tx-player-wrapper #prevBtn:focus,
.tx-player-wrapper #prevBtn:active,
.tx-player-wrapper #nextBtn:hover,
.tx-player-wrapper #nextBtn:focus,
.tx-player-wrapper #nextBtn:active {
   color: #111617 !important;
   /* Keeps Icon Black */
   background: #FFFFFF !important;
   /* Keeps Background White */
   background-color: #FFFFFF !important;
   background-image: none !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
   transform: none !important;
   filter: none !important;
   opacity: 1 !important;
}

.tx-player-wrapper

/* Play Button — Inverted */
.ctrl-play {
   width: 52px;
   height: 52px;
   background: var(--tx-white);
   color: var(--tx-black);
   border-radius: 50%;
   box-shadow: none !important;
   /* Force static flat circle out of the box, matching prev/next icons */
   transition: all var(--tx-transition-base);
}

.tx-player-wrapper .ctrl-play svg {
   width: 24px;
   height: 24px;
   margin-left: 2px;
}

.tx-player-wrapper .ctrl-play:hover,
.tx-player-wrapper .ctrl-play:focus,
.tx-player-wrapper .ctrl-play:active,
.tx-player-wrapper #playBtn:hover,
.tx-player-wrapper #playBtn:focus,
.tx-player-wrapper #playBtn:active {
   color: var(--tx-black) !important;
   background: var(--tx-white) !important;
   background-color: var(--tx-white) !important;
   background-image: none !important;
   border: none !important;
   outline: none !important;
   transform: none !important;
   /* Disable hover expansion/squash completely */
   box-shadow: none !important;
   /* Remain flat */
   filter: none !important;
   opacity: 1 !important;
}

.tx-player-wrapper .ctrl-play.is-playing svg {
   margin-left: 0;
}

.tx-player-wrapper

/* Volume */
.controls-volume {
   display: flex;
   align-items: center;
   gap: 8px;
}

.tx-player-wrapper .ctrl-vol-icon {
   flex-shrink: 0;
}

.tx-player-wrapper .ctrl-vol-icon svg {
   width: 18px;
   height: 18px;
}

.tx-player-wrapper .volume-slider-wrap {
   position: relative;
   width: 80px;
   height: 20px;
   display: flex;
   align-items: center;
}

.tx-player-wrapper .volume-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 3px;
   background: var(--tx-gray-700);
   border-radius: 2px;
   outline: none;
   cursor: pointer;
   position: relative;
   z-index: 2;
}

.tx-player-wrapper .volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--tx-white);
   cursor: pointer;
   box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
   transition: transform var(--tx-transition-fast);
}

.tx-player-wrapper .volume-slider::-webkit-slider-thumb:hover {
   transform: scale(1.3);
}

.tx-player-wrapper .volume-slider::-moz-range-thumb {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--tx-white);
   cursor: pointer;
   border: none;
   box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.tx-player-wrapper .volume-fill {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   height: 3px;
   background: var(--tx-white);
   border-radius: 2px;
   pointer-events: none;
   z-index: 1;
   transition: width 50ms linear;
}

.tx-player-wrapper

/* ---------- Circular Carousel ---------- */
.carousel-section {
   position: relative;
   flex: 1;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   /* Lean to top */
   min-height: 500px;
   overflow: visible;
}

.tx-player-wrapper .carousel-container {
   position: relative;
   width: 630px;
   /* vinyl (500) + arm (130) */
   height: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   /* Lean to top */
   overflow: visible;
}

.tx-player-wrapper .carousel {
   position: relative;
   width: 500px;
   height: 500px;
   flex-shrink: 0;
   margin-left: 0;
   /* mathematically centers the 9 o'clock track slide exactly offset from edge padding */
   border: 1px dashed transparent;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10;
   /* Intro: start centered on screen, hidden and slightly scaled down */
   opacity: 0;
   transform: translateX(0) scale(var(--tx-desktop-scale, 1)) translateZ(0);
   will-change: transform, opacity, border-color;
}

.tx-player-wrapper

/* Phase 1: Turntable is ready and centered (calculated via JS) */
.carousel.intro-centered {
   opacity: 1;
   /* Move it exactly to the viewport center measured by JS */
   transform: translate(var(--intro-x, 0), var(--intro-y, 0)) scale(var(--tx-intro-scale, 1)) rotate(0deg) translateZ(0);
   transition: opacity 0.5s ease-out;
}

.tx-player-wrapper

/* Phase 2: Roll securely to final left position (0,0) */
.carousel.intro-rolling {
   opacity: 1;
   border-color: rgba(255, 255, 255, 0.15);
   transition: border-color 0.6s ease 0.4s;
   animation: rollTurntableIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes rollTurntableIn {
   0% {
      opacity: 1;
      /* Start perfectly 1:1 in the center */
      transform: translate(var(--intro-x, 0), var(--intro-y, 0)) scale(var(--tx-intro-scale, 1)) rotate(0deg) translateZ(0);
   }

   100% {
      opacity: 1;
      /* Finish at desktop scale to gracefully create space for the player UI */
      transform: translate(0, 0) scale(var(--tx-desktop-scale, 1)) rotate(-360deg) translateZ(0);
   }
}

.tx-player-wrapper

/* Contents inside the ring overlaying the logo */
.player-inside-circle {
   position: absolute;
   inset: 0;
   z-index: 25;
   /* Raised from 10 to 20 to overlap any thick thumbnails */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 40px;
   gap: 30px;
   /* Optional slight backdrop filter to make text pop over bright logos */
   background: none;
   /* Changed: Removed radial-gradient to display true true album cover colors */
   border-radius: 50%;
   pointer-events: none;
   /* Let logo clicks map through if needed, though buttons will have pointer-events: auto */
}

.tx-player-wrapper .player-inside-circle .waveform-container,
.tx-player-wrapper .player-inside-circle .controls-center {
   pointer-events: auto;
   /* Re-enable for UI */
   margin: 0;
   width: 100%;
}

.tx-player-wrapper .player-inside-circle .track-info {
   pointer-events: auto;
   margin: 0 auto;
   width: 90%;
}

.tx-player-wrapper .player-inside-circle .track-title {
   font-size: 24px;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.tx-player-wrapper .player-inside-circle .track-artist {
   font-size: 16px;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
   color: var(--tx-gray-200);
}

.tx-player-wrapper .player-inside-circle .waveform-wrapper {
   margin: 0 auto 6px auto;
   width: 90%;
   /* Expanded closer to circle edges */
}

.tx-player-wrapper .player-inside-circle .time-row {
   width: 90%;
   margin: 0 auto;
}

.tx-player-wrapper .player-inside-circle .controls-center {
   justify-content: center;
   gap: 24px;
}

.tx-player-wrapper

/* ---------- Turntable Platter ---------- */
.platter-base {
   position: absolute;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border-radius: 50%;
   z-index: 5;
   will-change: transform;
   transform: rotate(var(--spin-angle, 0deg)) translateZ(0);
   transform-style: preserve-3d;
   backface-visibility: hidden;
   box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 5px 25px rgba(0, 0, 0, 0.5);
}

.tx-player-wrapper .platter-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
   display: block;
}

.tx-player-wrapper

/* --- Intro Drawing Sequence --- */
.platter-bg {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background-color: #151515;
   opacity: 0;
   z-index: 1;
}

.tx-player-wrapper .platter-base.phase1-fadein .slipmat {
   opacity: 1;
   transition: opacity 0.8s ease-out;
}

.tx-player-wrapper .platter-rims {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 3;
   pointer-events: none;
   opacity: 0;
   /* Starts hidden to animate in with scale/rotate */
}

.tx-player-wrapper .platter-rims .rim-draw {
   fill: none;
   stroke: #b4b1b0;
   stroke-width: 4;
   stroke-linecap: round;
}

.tx-player-wrapper .platter-rims .rim-draw[r="393"] {
   stroke-dasharray: 2470;
   stroke-dashoffset: 2470;
}

.tx-player-wrapper .platter-rims .rim-draw[r="343.85"] {
   stroke-dasharray: 2162;
   stroke-dashoffset: 2162;
}

.tx-player-wrapper

/* Match the rims perfectly with the dots: scale, rotate, fade in, AND draw stroke simultaneously */
.platter-base.phase2-drawrims .platter-rims {
   animation: sweepDotsMask 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.tx-player-wrapper .platter-base.phase2-drawrims .platter-rims .rim-draw {
   stroke-dashoffset: 0;
   transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.tx-player-wrapper .platter-dots-wrapper {
   position: absolute;
   inset: 0;
   z-index: 2;
   /* Below rims and slipmat */
   border-radius: 50%;
   overflow: hidden;
   opacity: 0;
   /* Still start hidden for the sweep animation */
}

.tx-player-wrapper .platter-base.phase3-drawdots .platter-bg,
.tx-player-wrapper .platter-base.phase3-drawdots .platter-dots-wrapper {
   animation: sweepDotsMask 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Safari-safe flawless animation (replaces buggy conic-gradient that freezes at 180deg) */
@keyframes sweepDotsMask {
   0% {
      opacity: 0;
      transform: scale(0.9) rotate(-45deg);
      filter: blur(6px);
   }

   100% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
      filter: blur(0px);
   }
}

.tx-player-wrapper

/* ---------- Realistic Felt Slipmat ---------- */
.slipmat {
   position: absolute;
   top: 32px;
   left: 32px;
   right: 32px;
   bottom: 32px;
   border-radius: 50%;
   z-index: 15;
   /* MUST BE TOP for logo visibility */
   pointer-events: none;
   overflow: hidden;
   opacity: 0;
   box-shadow:
      inset 0 0 35px rgba(0, 0, 0, 0.95),
      inset 0 0 10px rgba(0, 0, 0, 0.8),
      0 4px 15px rgba(0, 0, 0, 0.7);
}

.tx-player-wrapper .slipmat svg {
   width: 100%;
   height: 100%;
   display: block;
}

.tx-player-wrapper

/* ---------- Fluorescent / Short Circuit Flicker ---------- */
.slipmat-logo-text.flicker {
   animation: neonShortCircuit 0.55s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes neonShortCircuit {
   0% {
      opacity: 0.9;
   }

   8% {
      opacity: 0.0;
   }

   /* Çok sert tam kopuş */
   12% {
      opacity: 0.8;
   }

   /* Hemen yanacak gibi sıçrıyor... */
   16% {
      opacity: 0.2;
   }

   /* ...ama tekrar yarı yolda kararıyor (tam istediğiniz gibi) */
   24% {
      opacity: 0.9;
   }

   /* Zorla yanıyor */
   28% {
      opacity: 0.3;
   }

   /* Güç yetmiyor, pırpırıyor */
   36% {
      opacity: 0.1;
   }

   /* Derin karanlık stresi */
   44% {
      opacity: 0.7;
   }

   /* Canlanıyor */
   48% {
      opacity: 0.4;
   }

   /* Ufak bir aksama */
   56% {
      opacity: 0.95;
   }

   /* İlk sert ve iyi parlama */
   64% {
      opacity: 0.5;
   }

   /* Kısa göz kırpması */
   72% {
      opacity: 1.0;
   }

   /* Beyaz patlama */
   80% {
      opacity: 0.9;
   }

   /* Normal moda giriş (eski bitiş) */
   83% {
      opacity: 0.3;
   }

   /* YENİ: Tam oldu derken 1. hafif sönüm */
   86% {
      opacity: 0.9;
   }

   /* Toparlama */
   89% {
      opacity: 0.4;
   }

   /* YENİ: 2. mini sönüm */
   92% {
      opacity: 0.95;
   }

   /* Toparlama */
   100% {
      opacity: 0.9;
   }

   /* Kesin kararlı moda giriş */
}

.tx-player-wrapper

/* ---------- Turntable Center Spindle Intro ---------- */
.spindle-intro {
   transform-origin: 500px 500px;
   will-change: transform, opacity;
}

.tx-player-wrapper .spindle-intro.intro-hidden {
   opacity: 0;
   transform: scale(0.2);
}

.tx-player-wrapper .spindle-intro.intro-revealed {
   opacity: 1;
   transform: scale(1);
   transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease-out;
}

.tx-player-wrapper

/* ---------- Realistic Vinyl Record ---------- */
.vinyl-record {
   position: absolute;
   top: 40px;
   left: 40px;
   right: 40px;
   bottom: 40px;
   border-radius: 50%;
   /* Base dark vinyl color */
   background-color: #080808;
   /* Layered organic grooves imitating physical records with 'tracks' (thick bands) */
   background-image:
      repeating-radial-gradient(rgba(255, 255, 255, 0.015) 0px,
         transparent 1px,
         rgba(255, 255, 255, 0.015) 2px),
      repeating-radial-gradient(rgba(0, 0, 0, 0.4) 0px,
         transparent 3px,
         rgba(0, 0, 0, 0.4) 4px),
      /* These act as the thicker, distinct album tracks / separation rings */
      repeating-radial-gradient(transparent 0%,
         transparent 12%,
         rgba(0, 0, 0, 0.25) 12.2%,
         rgba(0, 0, 0, 0.45) 13%,
         transparent 13.5%);
   z-index: 10;
   box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.7);
   will-change: transform, opacity;

   transform: rotate(var(--spin-angle, 0deg)) translateZ(0);
   scale: 1;

   transform-style: preserve-3d;
   backface-visibility: hidden;
   transition: opacity 0.4s ease-out, scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tx-player-wrapper

/* Vinyl starts completely invisible before track selection */
.vinyl-record.vinyl-hidden {
   opacity: 0;
   scale: 0.95;
   pointer-events: none;
}

@keyframes vinylFlyIn {
   0% {
      opacity: 0;
      /* Zarfın sağından çıkartırken 0 derece rotasyonla başlatıyoruz */
      transform: translate3d(600px, 100px, -100px) rotateX(50deg) rotateY(-40deg) rotateZ(0deg) scale(0.3);
   }

   30% {
      opacity: 1;
      /* Ekranın ortasında (pikap ile liste arasında, X=300px) havaya kalkar ve kameraya doğru hafif açılı durur */
      transform: translate3d(300px, -200px, 200px) rotateX(25deg) rotateY(-10deg) rotateZ(0deg) scale(1.15);
   }

   70% {
      opacity: 1;
      /* Ekranın ortasındayken, kendi etrafında 1 tam tur (360 derece) döner */
      transform: translate3d(300px, -200px, 200px) rotateX(25deg) rotateY(-10deg) rotateZ(360deg) scale(1.15);
   }

   100% {
      opacity: 1;
      /* Pikabın tam merkezine (X=0) düz inip oturur */
      transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale(1);
   }
}

.tx-player-wrapper .vinyl-record.fly-in {
   z-index: 50;
   animation: vinylFlyIn 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.tx-player-wrapper

/* ---------- Tonearm / Pickup Arm (SVG) ----------
   Vinyl-Vue logic:
     - Rest (not playing) = -15°
     - Start of playback  = -5°  (lead-in groove, dış kenar)
     - End of playback    = +33° (run-out groove, iç kenar)
   Our carousel = 500px, scale vs Vinyl-Vue 380px = 1.316
   SVG width: 85 * 1.316 ≈ 112px
   top: 10 * 1.316 ≈ 13px
   right: 20 * 1.316 ≈ 26px → left = 500 - 112 - 26 = 362px (placed inside carousel)
   transform-origin: 78.82% 20.28% (same as Vinyl-Vue, % is scale-invariant)
 -------------------------------------------- */
.tonearm {
   position: absolute;
   top: 13px;
   left: 362px;
   width: auto;
   height: auto;
   z-index: 15;
   pointer-events: none;
   /* Exact same pivot as Vinyl-Vue project */
   transform-origin: 78.82% 20.28%;
   /* Starts invisible — revealed by intro animation at Phase 7 */
   opacity: 0;
   transform: rotate(20deg) translateX(40px);
   will-change: transform, opacity;
}

.tx-player-wrapper

/* Intro: tonearm starts invisible (handled by base style above) */
.tonearm.intro-hidden {
   opacity: 0;
   transform: rotate(20deg) translateX(40px);
   transition: none;
}

.tx-player-wrapper

/* Intro: tonearm swings in to resting position */
.tonearm.intro-revealed {
   opacity: 1;
   transform: rotate(-15deg);
   transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tx-player-wrapper

/* When starting to play, use 0.5s ease for a smooth mechanical landing */
.tonearm.is-playing {
   opacity: 1;
   transition: transform 0.5s ease, opacity 0.3s ease;
}

.tx-player-wrapper

/* Tracking mode: During playback, JS takes over. Use fast linear for microscopic updates without shuddering */
.tonearm.is-tracking {
   opacity: 1;
   transition: transform 0.1s linear, opacity 0.3s ease;
}

.tx-player-wrapper

/* When returning to rest, smooth transition back (0.5s ease to match play) */
.tonearm.is-resting {
   opacity: 1;
   transform: rotate(-15deg);
   transition: transform 0.5s ease, opacity 0.3s ease;
}

.tx-player-wrapper .tonearm-svg {
   width: 112px;
   height: auto;
   display: block;
   filter: drop-shadow(-8px 12px 18px rgba(0, 0, 0, 0.7));
}

.tx-player-wrapper .vinyl-highlights {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   /* Bright reflective conical gradients to simulate studio lighting on PVC */
   background: conic-gradient(transparent 0deg,
         rgba(255, 255, 255, 0.1) 45deg,
         transparent 90deg,
         transparent 180deg,
         rgba(255, 255, 255, 0.1) 225deg,
         transparent 270deg,
         transparent 360deg);
   z-index: 1;
   pointer-events: none;
}

.tx-player-wrapper .vinyl-hole {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 16px;
   height: 16px;
   background: #111;
   border-radius: 50%;
   z-index: 5;
   /* Simulate the hole in the vinyl and shadow cast by the spindle */
   box-shadow: 0 0 0 4px #080808, 0 0 5px 4px rgba(0, 0, 0, 0.6);
}

.tx-player-wrapper .vinyl-hole::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 12px;
   height: 12px;
   background: #888;
   border-radius: 50%;
}

.tx-player-wrapper .vinyl-hole::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 4px;
   height: 4px;
   background: #fff;
   border-radius: 50%;
}

.tx-player-wrapper .carousel-logo-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) translateZ(0);
   width: 200px;
   height: 200px;
   background: var(--tx-gray-900);
   background-size: cover;
   background-position: center;
   border: 24px solid #000;
   border-radius: 50%;
   pointer-events: none;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
}

.tx-player-wrapper .carousel-logo {
   width: 95px;
   height: 95px;
   object-fit: contain;
   z-index: 3;
   pointer-events: none;
   opacity: 0.8;
}

.tx-player-wrapper .curved-text-svg {
   position: absolute;
   top: -24px;
   left: -24px;
   width: 200px;
   height: 200px;
   pointer-events: none;
   z-index: 10;
   shape-rendering: geometricPrecision;
   text-rendering: optimizeLegibility;
   transform: translateZ(0);
   backface-visibility: hidden;
}

.tx-player-wrapper .curved-title-text {
   fill: var(--tx-white);
   font-size: 11px;
   font-family: var(--tx-font);
   font-weight: 500;
   letter-spacing: 2px;
   -webkit-font-smoothing: antialiased;
   transform: translateZ(0);
}

.tx-player-wrapper .genre-text {
   font-size: 8.5px;
   fill: var(--tx-gray-400);
   letter-spacing: 3px;
   font-weight: 400;
}

.tx-player-wrapper .slide {
   position: absolute;
   top: 220px;
   left: 220px;
   border-radius: 50%;
   outline: 2px solid rgba(255, 255, 255, 0.1);
   width: 60px;
   height: 60px;
   background-size: cover;
   background-position: center;
   transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s;
   cursor: pointer;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   overflow: hidden;
   z-index: 15;
   /* keeps slide covers above the vinyl background */
}

.tx-player-wrapper

/* Intro: slides pop in with staggered delay */
.slide.intro-hidden {
   opacity: 0 !important;
   transform: scale(0.3) !important;
}

.tx-player-wrapper .slide.intro-revealed {
   opacity: 1;
   transform: scale(1);
   transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tx-player-wrapper .slide:hover {
   outline-color: rgba(255, 255, 255, 0.5);
}

.tx-player-wrapper .arrow-controls {
   position: absolute;
   bottom: 0px;
   left: 50%;
   transform: translate(-50%, 50%);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
   z-index: 30;
   /* Intro: hidden initially, slides up from below */
   opacity: 0;
   transform: translate(-50%, calc(50% + 60px));
   transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tx-player-wrapper .arrow-controls.intro-revealed {
   opacity: 1;
   transform: translate(-50%, 50%);
}

.tx-player-wrapper

/* ---------- Status Bar ---------- */
.status-bar {
   position: fixed;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
   font-size: 11px;
   color: var(--tx-gray-500);
   letter-spacing: 0.5px;
   z-index: 10;
   background: linear-gradient(to top, var(--tx-black) 40%, transparent);
   width: 100%;
   max-width: 560px;
   justify-content: center;
}

.tx-player-wrapper .status-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--tx-gray-500);
   transition: background var(--tx-transition-base);
}

.tx-player-wrapper .status-bar.is-connected .status-dot {
   background: var(--tx-white);
   box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.tx-player-wrapper .status-bar.is-error .status-dot {
   background: var(--tx-gray-300);
   animation: pulse 1.5s ease infinite;
}

.tx-player-wrapper

/* ---------- Playlist Side Panel (behind vinyl) ---------- */
.playlist-mask {
   position: absolute;
   top: 50%;
   left: 291px;
   /* 250px (radius) + 41px (margin shift) */
   transform: translateY(-50%);
   /* Stretch to fill the rest of the contained width */
   width: calc(100% - 291px);
   height: 470px;
   z-index: 5;
   /* Allow top/bottom/right shadow, clip strictly at left edge (0) to hide behind vinyl */
   clip-path: inset(-60px -60px -60px 0);
}

.tx-player-wrapper .playlist-panel {
   position: relative;
   width: 100%;
   height: 100%;
   background: transparent;
   border-radius: 0 24px 0 0;
   /* Cut bottom right corner flat to weld it to the track wrap below */
   display: flex;
   flex-direction: column;
   padding-left: 175px;
   /* 160px absolute horizontal overlap from physical vinyl record + 15px aesthetic shadow gap */
   padding-right: 30px;
   padding-top: 20px;
   padding-bottom: 20px;
   box-shadow: 15px 5px 40px rgba(0, 0, 0, 0.4);

   /* Enable vertical scrolling for the new remaining tracks content */
   overflow-y: auto;
   overflow-x: hidden;

   /* Hide scrollbar for a cleaner look */
   scrollbar-width: none;

   /* Panel zemininin sol tarafını da yumuşatıyoruz ki o keskin gri çizgi kaybolsun */
   -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%);
   mask-image: linear-gradient(to right, transparent 0%, black 15%);
   /* Intro: starts completely translating outside the left edge of the mask */
   opacity: 0;
   transform: translateX(-100%);
   will-change: transform, opacity;
}

.tx-player-wrapper .playlist-panel.intro-revealed {
   opacity: 1;
   transform: translateX(0);
   transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.tx-player-wrapper .now-playing-bar {
   display: block;
   margin-bottom: 0;
   /* Shift right padding drastically to 0 so the waveform can mathematically extend outward perfectly */
   padding: 12px 0px 4px 12px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   position: relative;
   overflow: hidden;
   background: #131617;
   /* Extend the physical box perfectly matching the visual projection of the Vinyl record shadow (-8px overhang) */
   margin-right: -8px;
}

.tx-player-wrapper .now-playing-bar>* {
   position: relative;
   z-index: 1;
}

.tx-player-wrapper .now-playing-bar .waveform-container {
   display: block;
   width: 100%;
   overflow: visible !important;
}

.tx-player-wrapper

/* Phase 4: Entire waveform area slides down */
.now-playing-bar.intro-hidden {
   opacity: 0;
   transform: translateY(-40px);
}

.tx-player-wrapper .now-playing-bar.intro-revealed {
   opacity: 1;
   transform: translateY(0);
   transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tx-player-wrapper

/* Playlist Section Titles */
.playlist-section-title {
   font-family: 'AtlasTypewriter-Bold', sans-serif;
   font-size: 24px;
   letter-spacing: normal;
   text-transform: uppercase;
   color: #FFFFFF;
   font-weight: bold;
   margin-bottom: 0 !important;
   margin-top: 35px;
   padding: 0 !important;
   line-height: 1.1;
   transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0, 0, 1), max-height 0.4s ease !important;
}

.tx-player-wrapper #last3Title {
   margin-top: 20px;
}

.tx-player-wrapper #allPodcastsTitle {
   margin-top: 0;
   margin-bottom: 0 !important;
}

.tx-player-wrapper .playlist-section-title.intro-hidden {
   opacity: 0 !important;
   transform: translateY(10px) !important;
}

.tx-player-wrapper .playlist-section-title.intro-revealed {
   opacity: 1 !important;
   transform: translateY(0) !important;
}

.tx-player-wrapper .playlist-section-desc {
   font-family: 'Outfit', sans-serif;
   font-size: 13px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.45);
   margin-top: 0 !important;
   padding: 0 !important;
   margin-bottom: 18px;
   line-height: 1.3;
   letter-spacing: 0.2px;
   transition: opacity 0.6s ease 0.1s, transform 0.6s cubic-bezier(0.2, 0, 0, 1) 0.1s !important;
}

.tx-player-wrapper .playlist-section-desc.intro-hidden {
   opacity: 0 !important;
   transform: translateY(10px) !important;
}

.tx-player-wrapper .playlist-section-desc.intro-revealed {
   opacity: 1 !important;
   transform: translateY(0) !important;
}

.tx-player-wrapper .popular-header-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   width: 100%;
}
.tx-player-wrapper .popular-text-col {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
}
.tx-player-wrapper .tx-visualizer-container {
   display: none; /* Mobile hidden */
   flex-grow: 1;
   height: 44px; /* Locked mathematically identical to the Title cap-height */
   margin-left: 40px;
   margin-right: -8px; /* Align precisely with the exact right bounds of the flying vinyl shadow */
   margin-bottom: 18px; /* Mirrored perfectly against the sibling desc container's existing 18px bottom margin */
   opacity: 0; 
   transform: translateY(10px);
   transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0, 0, 1);
}
.tx-player-wrapper .tx-visualizer-container.intro-revealed {
   opacity: 1;
   transform: translateY(0);
}

/* Visibility restoration for description overlay open */
.tx-player-wrapper .tx-visualizer-container.desc-active,
.tx-player-wrapper .playlist-section-title.desc-active,
.tx-player-wrapper .playlist-section-desc.desc-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.tx-player-wrapper #txLiveVisualizer {
   width: 100%;
   height: 100%;
   display: block;
}

/* ── Desktop Studio Equalizer ── */
.tx-player-wrapper .eq-mixer-toggle {
   position: absolute;
   left: 168px;
   top: 335px;
   width: 30px;
   height: 30px;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   color: var(--tx-gray-400);
   display: none; /* Hidden by default (mobile), shown via desktop media query */
   justify-content: center;
   align-items: center;
   cursor: pointer;
   z-index: 60;
   transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.tx-player-wrapper .playlist-panel.mixer-active .mixer-icon { display: none !important; }
.tx-player-wrapper .playlist-panel.mixer-active .close-icon { display: block !important; }

.tx-player-wrapper .eq-mixer-toggle:hover {
   color: var(--tx-white);
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.25);
}

.tx-player-wrapper .tx-eq-panel {
   position: absolute;
   top: 20px; /* Restored breathing room above the header */
   left: 230px; 
   right: 30px; /* Exact equivalent to the podcast padding gap of 30px */
   bottom: 12px; /* Lowered to expand mixer area down and reduce footer gap */
   background: transparent;
   border-radius: 0;
   z-index: 100;
   display: flex;
   flex-direction: column;
   padding: 0 8px 0 12px; /* Enforces an exact, mathematically symmetrical 10px gap between the dashed bounds and screw inner edges */
   opacity: 0;
   pointer-events: none;
   transform: translateY(20px) scale(0.98);
   transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1);
   box-shadow: none;
}
.tx-player-wrapper .playlist-panel.mixer-active .tx-eq-panel {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0) scale(1);
}

.tx-player-wrapper .now-playing-bar,
.tx-player-wrapper .popular-header-row,
.tx-player-wrapper .catalog-row {
   transition: opacity 0.4s ease, transform 0.4s ease;
}
.tx-player-wrapper .playlist-panel.mixer-active .now-playing-bar,
.tx-player-wrapper .playlist-panel.mixer-active .popular-header-row,
.tx-player-wrapper .playlist-panel.mixer-active .catalog-row {
   opacity: 0 !important;
   pointer-events: none;
   transform: translateY(-20px);
}

.tx-player-wrapper .eq-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid rgba(255,255,255,0.05);
   padding-bottom: 12px;
   margin-bottom: 35px;
}
.tx-player-wrapper .eq-brand {
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.tx-player-wrapper .eq-brand-name {
   color: var(--tx-white);
   font-size: 15px;
   letter-spacing: 3px;
   font-weight: 700;
   margin-bottom: 0;
}
.tx-player-wrapper .eq-brand-sub {
   color: var(--tx-gray-500);
   font-size: 9px;
   letter-spacing: 4px;
   font-weight: 500;
}

.tx-player-wrapper .eq-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: none; /* Removed separator line */
   padding-top: 6px; /* Added to balance the top/bottom spacing for genuine vertical centering */
   padding-bottom: 6px;
   margin-bottom: 14px;
}
.tx-player-wrapper .eq-reset-btn {
   background: transparent;
   border: 1px solid rgba(255,255,255,0.1);
   color: var(--tx-gray-400);
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 1px;
   padding: 4px 10px;
   border-radius: 4px;
   cursor: pointer;
   transition: color 0.3s, border-color 0.3s;
}
.tx-player-wrapper .eq-reset-btn:hover {
   color: var(--tx-white);
   border-color: rgba(255,255,255,0.3);
}
.tx-player-wrapper .eq-close-btn {
   background: rgba(255,255,255,0.05);
   border: none;
   color: var(--tx-gray-400);
   font-size: 14px;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.3s, color 0.3s;
}
.tx-player-wrapper .eq-close-btn:hover {
   background: rgba(255,255,255,0.15);
   color: white;
}

/* HardWare Knobs Layout */
.tx-player-wrapper .eq-layout {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
   flex-grow: 1;
   padding: 0;
   /* Removed height: 100% to stop vertical layout from violently overflowing */
}

/* 3-Tier Footer */
.tx-player-wrapper .eq-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-top: none; /* Removed separator line */
   padding-top: 4px; /* Reduced to bring footer text closer to the dashed layout bounds */
   margin-top: 0px; 
}

/* =======================================
   REUSABLE DIAGNOSTIC DEBUG MODE (Toggle)
   ======================================= */
.tx-player-wrapper.tx-debug-mode .tx-eq-panel { outline: 1px solid rgba(255, 0, 0, 0.5) !important; }
.tx-player-wrapper.tx-debug-mode .eq-header { outline: 1px dashed rgba(0, 255, 255, 0.8) !important; }
.tx-player-wrapper.tx-debug-mode .eq-layout { outline: 1px dashed rgba(255, 255, 0, 0.8) !important; }
.tx-player-wrapper.tx-debug-mode .eq-footer { outline: 1px dashed rgba(0, 255, 0, 0.8) !important; }
.tx-player-wrapper .eq-footer-text,
.tx-player-wrapper .eq-label,
.tx-player-wrapper .master-label,
.tx-player-wrapper .master-large,
.tx-player-wrapper .master-small,
.tx-player-wrapper .silver-knob-title,
.tx-player-wrapper .pioneer-power-label,
.tx-player-wrapper .fx-label,
.tx-player-wrapper .fx-onoff-label,
.tx-player-wrapper .fx-depth-label,
.tx-player-wrapper .hot-cue-bank-title .title-text {
   color: #AAA;
   font-size: 7.5px;
   letter-spacing: 1.5px;
   font-weight: 300;
   font-family: 'Inter', sans-serif;
   user-select: none !important;
   -webkit-user-select: none !important;
   pointer-events: none !important;
}

/* Left EQ Bank */
.tx-player-wrapper .eq-section-left {
   display: flex;
   justify-content: flex-start;
   gap: 2px;
   align-items: flex-end;
   flex: 1;
   margin-left: -4.55px; /* Mathematically offsets the 0.93x center-scale shrinkage (130*0.07/2 == 4.55) */
   padding-left: 0; 
   padding-right: 10px;
   position: relative;
}
.tx-player-wrapper .eq-section-left::after {
   content: "";
   position: absolute;
   right: 0;
   top: 0;
   bottom: 4px;
   width: 1px;
   background: rgba(255,255,255,0.06);
}

/* Hot Cue Bank Title (Above A-E) */
.tx-player-wrapper .hot-cue-bank-title {
    position: absolute;
    top: -19px; /* One last micro-adjustment higher */
    left: 4.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 244px; /* Exact span for A-E bank (44*5 + 6*4) */
    z-index: 10;
    pointer-events: none;
}
.tx-player-wrapper .hot-cue-bank-title .title-line {
    height: 1px;
    background: rgba(255,255,255,0.15);
    flex: 1;
}
.tx-player-wrapper .hot-cue-bank-title .title-text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 8px;
    color: #AAA;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* High-Fidelity Hot Cue Row strictly anchored above the digital screen (BPM sync top) */
.tx-player-wrapper .eq-hot-cues {
    position: absolute;
    top: 3px; /* RESTORED to original position as requested */
    left: 4.5px;
    display: flex;
    gap: 6px; /* Tightened gap to fit 8 buttons (A-H) matrix */
    z-index: 10;
}
.tx-player-wrapper .hot-cue-btn {
    width: 44px; /* Reduced from 46px to fit 8 units (44*8 + 6*7 = 394px) */
    height: 30px;
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1.5px solid #000;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.1);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 6px;
    overflow: hidden;
}
.tx-player-wrapper .hot-cue-btn:active {
    transform: translateY(1px) scale(0.96);
    background: #000;
}
.tx-player-wrapper .cue-letter {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-align: left;
    margin-top: 1px;
    opacity: 1; /* Always lit like an LED */
    transition: all 0.3s;
}
.tx-player-wrapper .cue-bar {
    width: 100%;
    height: 3.5px;
    border-radius: 1.5px;
    opacity: 1; /* Always lit like an LED */
    background: #555;
    transition: all 0.3s;
}

/* Permanent Glow & Color Mappings (The 'Always On' LED Look) */
.tx-player-wrapper .hot-cue-btn[data-cue="A"] .cue-letter { color: #f96e6e; text-shadow: 0 0 8px rgba(249, 110, 110, 0.6); }
.tx-player-wrapper .hot-cue-btn[data-cue="A"] .cue-bar { background: #f96e6e; box-shadow: 0 0 10px rgba(249, 110, 110, 0.8); }
.tx-player-wrapper .hot-cue-btn[data-cue="B"] .cue-letter { color: #7dfdfd; text-shadow: 0 0 8px rgba(125, 253, 253, 0.6); }
.tx-player-wrapper .hot-cue-btn[data-cue="B"] .cue-bar { background: #7dfdfd; box-shadow: 0 0 10px rgba(125, 253, 253, 0.8); }
.tx-player-wrapper .hot-cue-btn[data-cue="C"] .cue-letter { color: #d1f90e; text-shadow: 0 0 8px rgba(209, 249, 14, 0.6); }
.tx-player-wrapper .hot-cue-btn[data-cue="C"] .cue-bar { background: #d1f90e; box-shadow: 0 0 10px rgba(209, 249, 14, 0.8); }
.tx-player-wrapper .hot-cue-btn[data-cue="D"] .cue-letter { color: #ddb3f9; text-shadow: 0 0 8px rgba(221, 179, 249, 0.6); }
.tx-player-wrapper .hot-cue-btn[data-cue="D"] .cue-bar { background: #ddb3f9; box-shadow: 0 0 10px rgba(221, 179, 249, 0.8); }

.tx-player-wrapper .hot-cue-btn[data-cue="E"] .cue-letter { color: #5afb14; text-shadow: 0 0 8px rgba(90, 251, 20, 0.6); }
.tx-player-wrapper .hot-cue-btn[data-cue="E"] .cue-bar { background: #5afb14; box-shadow: 0 0 10px rgba(90, 251, 20, 0.8); }
.tx-player-wrapper .hot-cue-btn[data-cue="F"] .cue-letter { color: #edb223; text-shadow: 0 0 8px rgba(237, 178, 35, 0.6); }
.tx-player-wrapper .hot-cue-btn[data-cue="F"] .cue-bar { background: #edb223; box-shadow: 0 0 10px rgba(237, 178, 35, 0.8); }
.tx-player-wrapper .hot-cue-btn[data-cue="G"] .cue-letter { color: #0cb3fb; text-shadow: 0 0 8px rgba(12, 179, 251, 0.6); }
.tx-player-wrapper .hot-cue-btn[data-cue="G"] .cue-bar { background: #0cb3fb; box-shadow: 0 0 10px rgba(12, 179, 251, 0.8); }
.tx-player-wrapper .hot-cue-btn[data-cue="H"] .cue-letter { color: #fbff53; text-shadow: 0 0 8px rgba(251, 255, 83, 0.6); }
.tx-player-wrapper .hot-cue-btn[data-cue="H"] .cue-bar { background: #fbff53; box-shadow: 0 0 10px rgba(251, 255, 83, 0.8); }

/* Sabit Yansın (Always Visible Mode) */
.tx-player-wrapper .hot-cue-btn.is-active .cue-letter { opacity: 1; }
.tx-player-wrapper .hot-cue-btn.is-active .cue-bar { opacity: 1; }

/* CDJ Startup Sweep — Sequential LED Power-On check check check check */
@keyframes hotcue-power-on {
    0% { opacity: 0; filter: brightness(0); transform: translateY(1px); }
    100% { opacity: 1; filter: brightness(1); transform: translateY(0); }
}

.tx-player-wrapper[data-power-state="on"] .hot-cue-btn .cue-letter,
.tx-player-wrapper[data-power-state="on"] .hot-cue-btn .cue-bar {
    animation: hotcue-power-on 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Staggered Delay for the 'Left-to-Right' Sweep check check check check check */
.tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="A"] .cue-letter, .tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="A"] .cue-bar { animation-delay: 0.04s; }
.tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="B"] .cue-letter, .tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="B"] .cue-bar { animation-delay: 0.08s; }
.tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="C"] .cue-letter, .tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="C"] .cue-bar { animation-delay: 0.12s; }
.tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="D"] .cue-letter, .tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="D"] .cue-bar { animation-delay: 0.16s; }
.tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="E"] .cue-letter, .tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="E"] .cue-bar { animation-delay: 0.20s; }
.tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="F"] .cue-letter, .tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="F"] .cue-bar { animation-delay: 0.24s; }
.tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="G"] .cue-letter, .tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="G"] .cue-bar { animation-delay: 0.28s; }
.tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="H"] .cue-letter, .tx-player-wrapper[data-power-state="on"] .hot-cue-btn[data-cue="H"] .cue-bar { animation-delay: 0.32s; }

/* Yanıp Sönme (Blinking Mode) */
@keyframes hotcue-blink {
    0%, 100% { opacity: 1; filter: brightness(1.8); }
    50% { opacity: 0.2; filter: brightness(0.5); }
}
.tx-player-wrapper .hot-cue-btn.is-blinking .cue-letter,
.tx-player-wrapper .hot-cue-btn.is-blinking .cue-bar {
    animation: hotcue-blink 0.4s infinite ease-in-out;
}

/* Waveform Screen wrapper to contain both canvas and boot logo */
.tx-player-wrapper .eq-waveform-screen-wrap {
    position: absolute;
    top: 40px;
    left: 4.5px;
    width: 396.6px;
    height: 30%;
    z-index: 1;
    overflow: hidden;
    border-radius: 3px;
    background: #0a0a0a;
    border: 1px solid #000;
    box-shadow: 
         inset 1px 1px 0 rgba(255,255,255,0.1),
         inset 0 1px 6px rgba(0,0,0,0.9), 
         0 1px 0 rgba(255,255,255,0.03);
}

.tx-player-wrapper .eq-waveform-canvas {
   width: 100%;
   height: 100%;
   pointer-events: none;
}

/* ── Boot Screen Overlay ── */
.tx-player-wrapper .eq-waveform-boot-screen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tx-player-wrapper .boot-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Same Pioneer Cyan check check check */
    color: #e5feff;
    filter: drop-shadow(0 0 12px rgba(229, 254, 255, 0.5));
}


.tx-player-wrapper .boot-pioneer {
    width: 180px;
    height: auto;
}

.tx-player-wrapper .boot-rekordbox {
    width: 110px;
    height: auto;
    margin-top: 8px;
}

/* Visibility classes synced with JS logic */
.tx-player-wrapper .eq-waveform-screen-wrap.booting .eq-waveform-boot-screen {
    opacity: 1;
}

/* CDJ Waveform Canvas — Absolutely positioned in the empty space above CUE buttons */
.tx-player-wrapper .eq-waveform-canvas-DEPRECATED {
   display: none;
}


/* Pioneer-style Waveform Zoom Controls */
.tx-player-wrapper .eq-waveform-zoom-controls {
   position: absolute;
   top: 40px;
   left: calc(4.5px + 396.6px - 32px); /* Inside the right edge of the canvas */
   height: 30%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 6px;
   z-index: 2;
}

.tx-player-wrapper .eq-zoom-btn {
   width: 24px;
   height: 24px;
   background: rgba(20, 20, 20, 0.8);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 4px;
   color: #fff;
   font-size: 16px;
   font-weight: 300;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-family: Arial, sans-serif;
   transition: all 0.2s ease;
   box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.tx-player-wrapper .eq-zoom-btn:hover {
   background: rgba(40, 40, 40, 0.9);
   border-color: rgba(255, 190, 60, 0.5);
}

.tx-player-wrapper .eq-zoom-btn:active {
   background: rgba(255, 190, 60, 0.2);
   border-color: rgba(255, 190, 60, 0.9);
   color: rgba(255, 190, 60, 1);
   transform: scale(0.92);
}

/* CUE Toggle Button — Centered above each knob panel */
.tx-player-wrapper .eq-cue-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 10px;
   padding: 2.5px 24px;
   border: 1px solid #000; /* Unified hardware border check check check */
   border-radius: 4px;
   font-family: Arial, sans-serif;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 1.2px;
   color: #1a1a1a;
   cursor: pointer;
   user-select: none;
   background: radial-gradient(circle at 50% 45%, #FFE070 0%, #FFB000 35%, #E65A00 75%, #762200 100%);
   box-shadow:
       inset 1px 1px 0 rgba(255,255,255,0.1), /* PERSISTENT flare check check check */
       inset 0 1px 8px rgba(0,0,0,0.9),       /* Unified depth look check check check */
       0 1px 0 rgba(255,255,255,0.02);
   transition: none !important;
   position: relative; /* Container for glass shine check check check */
   overflow: hidden;   /* Clips glass shine to button borders check check check */
   outline: none !important; /* Kill browser focus ring check check check */
}

/* Realistic surface reflection shine for CUE buttons check check check check */
.tx-player-wrapper .eq-cue-btn::after {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0; height: 50%;
   background: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, transparent 100%);
   pointer-events: none;
}

/* 1. LOCK DOWN HOVER/ACTIVE: Zero movement allowed for inactive state */
.tx-player-wrapper .eq-cue-btn:not(.active):hover,
.tx-player-wrapper .eq-cue-btn:not(.active):active,
.tx-player-wrapper .eq-cue-btn:not(.active):focus {
   transform: none !important;
   transition: none !important;
   margin: 0 auto 10px !important;
   padding: 2.5px 24px !important;
   top: 0 !important;
   bottom: 0 !important;
   outline: none !important;
   border-color: #000 !important;
   font-size: 9px !important;
}

/* 2. PERSISTENT ACTIVE STATE: ONLY move when .active class is applied via JS */
.tx-player-wrapper .eq-cue-btn.active,
.tx-player-wrapper .eq-cue-btn.active:hover,
.tx-player-wrapper .eq-cue-btn.active:active,
.tx-player-wrapper .eq-cue-btn.active:focus {
   transform: translateY(1px) !important;
   animation: cue-btn-pulse 0.5s infinite;
   transition: none !important;
}

/* 3. FOCUS OUTLINE: Kill theme-level focus stroke */
.tx-player-wrapper .eq-cue-btn:focus,
.tx-player-wrapper .eq-cue-btn:focus-visible {
   outline: none !important;
   box-shadow:
       inset 0 0 5px rgba(255,255,255,0.35),
       0 0 8px rgba(255, 100, 0, 0.5),
       0 0 18px rgba(255, 80, 0, 0.25) !important;
}

/* CUE Active — Pulse starts bright (0%) then dims (50%), same cycle as FX ON/OFF */
@keyframes cue-btn-pulse {
   0% {
       background: radial-gradient(circle at 50% 45%, #FFE070 0%, #FFB000 35%, #E65A00 75%, #762200 100%);
       box-shadow:
           inset 0 0 8px rgba(255,255,255,0.6),
           0 0 12px rgba(255, 100, 0, 0.8),
           0 0 30px rgba(255, 80, 0, 0.5);
   }
   50% {
       background: radial-gradient(circle at 50% 45%, #7A4200 0%, #2A1000 100%);
       box-shadow:
           inset 1px 2px rgba(255,255,255,0.1),
           0 0 3px rgba(255, 100, 0, 0.15);
   }
   100% {
       background: radial-gradient(circle at 50% 45%, #FFE070 0%, #FFB000 35%, #E65A00 75%, #762200 100%);
       box-shadow:
           inset 0 0 8px rgba(255,255,255,0.6),
           0 0 12px rgba(255, 100, 0, 0.8),
           0 0 30px rgba(255, 80, 0, 0.5);
   }
}
.tx-player-wrapper .eq-cue-btn.active {
   animation: cue-btn-pulse 0.5s infinite;
}

/* FX Column (Independent) */
.tx-player-wrapper .eq-section-fx {
   display: flex;
   flex-direction: column;
   align-items: center; /* Center horizontally between separators check check */
   padding: 0 12px; /* Balanced left and right space check check check check check check */
   position: relative;
}
.tx-player-wrapper .eq-section-fx::after {
   content: "";
   position: absolute;
   right: 0;
   top: 0;
   bottom: 4px;
   width: 1px;
   background: rgba(255,255,255,0.06);
}

/* Lock text selection and normalize cursor during hardware dragging check check check */
body.knob-dragging {
   user-select: none !important;
   -webkit-user-select: none !important;
   cursor: grabbing !important;
}

/* Right Master Bank */
.tx-player-wrapper .eq-section-right {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 0 0 25px; /* Shifted right to achieve a better balanced mixer layout check check check */
   gap: 2px;
   position: relative; /* Base for protruding power hardware unit check check */
}

/* 🔌 THE DEFINITIVE PIONEER POWER UNIT (+Universal Icon) check check check */
.tx-player-wrapper .tx-mixer-pioneer-power-unit {
    position: absolute;
    top: -42px; /* Shifted slightly more UP check check check */
    left: 25px; /* Compentsating for parent container's 25px left-padding check check check */
    right: 0;
    margin: 0 auto; /* CENTERED perfectly with the MASTER knob axis check check check */
    width: fit-content;
    z-index: 10;
    pointer-events: none; /* Container itself doesn't block clicks check check check */
    user-select: none; /* Prevent accidental text selection of MASTER label check check check */
    -webkit-user-select: none;
    /* Removed display: flex to prevent pushing the button check check check */
}

/* Premium hardware label for the power unit check check check */
.tx-player-wrapper .pioneer-power-label {
    position: absolute;
    right: 100%; /* Positions label to the left of the bezel without pushing it check check check */
    top: 50%;
    transform: translateY(-50%);
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 10px; /* Precise gap from the bezel edge check check check */
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    pointer-events: none;
    white-space: nowrap;
}

/* Outer Bezel (The housing Frame) check check check */
.tx-player-wrapper .pioneer-power-bezel {
    width: 38px; /* Slightly downsized frame for more refined look check check check */
    height: 32px;
    background: #0D0F11;
    border-radius: 4px;
    border: 1px solid #1a1c1e;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.08); /* Preserving ONLY the top edge bevel light check check */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
    pointer-events: auto; /* Reactive part starts here check check check */
}

/* The actual clickable recessed button with Universal Power Icon check check */
.tx-player-wrapper .pioneer-power-btn {
    width: 100%;
    height: 100%;
    background: #1c1e20;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 
        inset 0 0 4px rgba(0,0,0,0.8),
        0 1px 1px rgba(255,255,255,0.05); /* Recessed inner shadow check check */
    cursor: pointer;
    transition: all 0.1s;
}
/* Red Standby Breathing prompt for the ICON ONLY check check check check check check */
.tx-player-wrapper[data-power-state="off"] .pioneer-power-btn svg {
    color: #ff3333; /* Pioneer Standby Red check check */
    animation: standby-icon-breathe 1.8s infinite alternate ease-in-out;
    transition: color 0.3s;
}

@keyframes standby-icon-breathe {
    from {
        filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.3));
        opacity: 0.5;
    }
    to {
        filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.9));
        opacity: 1;
    }
}

.tx-player-wrapper .pioneer-power-btn svg {
    width: 35%; /* Significantly downsized for a more refined hardware look check check check */
    height: 35%;
    color: #DDD;
    filter: drop-shadow(0 0 0.5px #FFF); /* Fine-tuned silver highlight check check */
    transition: all 0.4s ease; /* Jilet gibi sönme nizamı check check check */
}

/* 🟢 POWER ON - GREEN LED STATE check check check check check */
.tx-player-wrapper[data-power-state="on"] .pioneer-power-btn svg {
    color: #4dfa4d !important; /* Perfect Green LED check check check */
    filter: drop-shadow(0 0 6px rgba(77, 250, 77, 0.85)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) !important;
}

/* Dimming ALL illuminated elements (NOT HIDING THEM) check check check */
.tx-player-wrapper[data-power-state="off"] .eq-cue-btn,
.tx-player-wrapper[data-power-state="off"] .fx-onoff-btn {
    filter: none !important; /* No color filter for clean plastic look check check */
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.1), /* PERSISTENT flare check check check */
        inset 0 1px 8px rgba(0,0,0,0.9) !important; /* Unified recessed look check check check */
    background: rgba(200, 200, 200, 0.1) !important; /* Translucent whitish plastic look check check */
    color: #555 !important;
    opacity: 1 !important;
    border: 1px solid #000 !important;
}

/* HOT CUE Shutdown: Clean black-out (No extra layers) check check check */
.tx-player-wrapper[data-power-state="off"] .hot-cue-btn .cue-bar {
    background: #1a1a1a !important; /* Dead LED bar check check */
    box-shadow: none !important;
    transition: none !important; /* Instant shutdown check check */
    opacity: 1 !important;
}
.tx-player-wrapper[data-power-state="off"] .hot-cue-btn .cue-letter {
    color: #2a2a2a !important; /* Dead LED letter check check */
    text-shadow: none !important;
    transition: none !important; /* Instant shutdown check check */
    opacity: 1 !important;
}

/* VU LEDs Power-Off: Tinted unlit plastic look (PREVENTING GRAYING) check check check */
.tx-player-wrapper[data-power-state="off"] .vu-leds span {
    background: #0d1a0d !important; /* Dead Green base check check */
    opacity: 0.25 !important;
    filter: none !important;
    box-shadow: none !important;
}
.tx-player-wrapper[data-power-state="off"] .vu-leds span.vu-yellow { background: #1a160d !important; }
.tx-player-wrapper[data-power-state="off"] .vu-leds span.vu-red { background: #1a0d0d !important; }

.tx-player-wrapper[data-power-state="off"] .fx-btn-ring {
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.1), /* PERSISTENT flare check check check */
        inset 0 1px 8px rgba(0,0,0,0.9),       /* LCD recessed logic replication check check check */
        0 0 0 1px rgba(255,255,255,0.05),
        0 0 0 2px #0a0500,
        0 0 0 5.5px rgba(255,255,255,0.02),
        0 0 0 6.5px #111 !important; /* Unlit plastic ring hardware look check check */
    background: transparent !important;
    opacity: 1 !important;
}

.tx-player-wrapper[data-power-state="off"] .clip-led,
.tx-player-wrapper[data-power-state="off"] .master-clip-window {
    filter: grayscale(1) brightness(0.25) !important;
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.1), /* PERSISTENT flare check check check */
        inset 0 2px 5px rgba(0,0,0,0.9) !important;
    background: #050505 !important;
    color: #300 !important; /* Dimmed unlit red text check check */
    opacity: 1 !important;
    border: 1px solid #000 !important;
}

.tx-player-wrapper[data-power-state="off"] .hot-cue-btn .cue-letter,
.tx-player-wrapper[data-power-state="off"] .master-clip-window {
    color: #2a2a2a !important; /* Unlit printed text look check check check */
    text-shadow: none !important;
    filter: none !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* Mixer LCD Screen content logic (Blacking out ONLY internal digital data) check check check */
.tx-player-wrapper[data-power-state="off"] .fx-screen-top,
.tx-player-wrapper[data-power-state="off"] .fx-screen-fractions,
.tx-player-wrapper[data-power-state="off"] #eqWaveformCanvas {
    opacity: 0 !important; /* Digital pixels out check check */
    transition: none !important; /* Instant shutdown synced with CUE/VU check check check */
}

/* Mixer LCD Screen Physical Backdrops & Manual Controls (STAY VISIBLE BUT DARK) check check */
.tx-player-wrapper[data-power-state="off"] .fx-screen,
.tx-player-wrapper[data-power-state="off"] #eqWaveformCanvas,
.tx-player-wrapper[data-power-state="off"] .vu-meter-container,
.tx-player-wrapper[data-power-state="off"] .master-vu {
    background: #050505 !important; /* Unified dark hardware backdrop check check */
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.1), /* PERSISTENT flare check check check */
        inset 0 1px 8px rgba(0,0,0,0.9),       /* Recessed depth check check */
        0 1px 0 rgba(255,255,255,0.02) !important;
    border: 1px solid #000 !important;
    opacity: 1 !important;
}

.tx-player-wrapper .pioneer-power-btn:active {
    background: #0d0f11;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
}

.tx-player-wrapper .eq-section-right-ORIGINAL-ANCHOR { 
    /* Anchor for next block check check check */
}

/* Master Level Pioneer Target Aesthetics */
.tx-player-wrapper .master-knob-group {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.tx-player-wrapper .master-label-block {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 14px; /* Safely spacing the button visually identically physically lower down dynamically */
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tx-player-wrapper .master-large {
   font-size: 13px;
   font-weight: 700;
   color: #DDD;
   letter-spacing: 0.5px;
   line-height: 1;
}
.tx-player-wrapper .fx-onoff-label {
    font-size: 8px;
    font-weight: 800;
    color: #AAA;
    letter-spacing: 0.5px;
    margin-bottom: 8px; /* Standardized for baseline sync check check check check check check */
    text-shadow: 0 1px 2px #000;
}
.tx-player-wrapper .master-small {
   font-size: 8px;
   font-weight: 700;
   color: #AAA;
   letter-spacing: 0.5px;
   margin-top: 2px; /* Restored slight physical optical buffer natively */
   line-height: 1;
}

.tx-player-wrapper .eq-knob-master {
   width: 46px; /* Scaled down accurately fitting container */
   height: 46px;
   margin-bottom: 0 !important;
   position: relative;
}
.tx-player-wrapper .master-dots-svg {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 58px; /* Forcefully constrict bounding physics cleanly tightening geometric orbit natively */
   height: 58px; /* Scales inner radius matrix seamlessly collapsing distance mechanically down to 4px gap bounds */
   overflow: visible; /* Render unclipped text mapping seamlessly dynamically naturally */
   pointer-events: none;
   z-index: 1;
}

.tx-player-wrapper .master-black-dial {
   width: 46px !important;
   height: 46px !important;
   background: radial-gradient(circle at 40% 40%, #303030, #0A0A0A) !important;
   border-radius: 50%;
   box-shadow: inset 0 2px 2px rgba(255,255,255,0.08) !important; /* Stripped outer background shadow seamlessly dynamically */
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid #000;
   position: relative; /* Revert back gracefully restoring Flex alignments intrinsically correctly! */
   z-index: 5;
}
/* Recessed center adding mechanical 3D hardware depth */
.tx-player-wrapper .master-dial-inner {
   position: absolute;
   width: 36px;
   height: 36px;
   background: linear-gradient(135deg, #151515, #080808);
   border-radius: 50%;
   box-shadow: inset 0 2px 3px rgba(0,0,0,0.9);
   border: 1px solid #1A1A1A;
}
.tx-player-wrapper .master-white-line {
   position: absolute;
   width: 2.5px;
   height: 18px;
   background: #EFEFEF;
   top: 5px;
   border-radius: 1px;
   box-shadow: 0 0 2px rgba(255,255,255,0.8);
   z-index: 10;
}

/* Bounding Volume Markings mathematically mapped natively */
.tx-player-wrapper .master-limit {
   position: absolute;
   font-size: 8px;
   font-weight: 600;
   font-family: Arial, sans-serif;
   color: #999;
}
/* Positioned strictly underneath the bottom slanted hardware stems */
.tx-player-wrapper .limit-left { left: 50%; margin-left: -20px; transform: translateX(-50%); top: 92px; font-size: 7.5px; }
.tx-player-wrapper .limit-right { left: 50%; margin-left: 20px; transform: translateX(-50%); top: 92px; font-size: 7.5px; }



/* Master CLIP LED indicator centered between knob and VU meter */
.tx-player-wrapper .master-clip-window {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 16px;
   margin: 2px auto 0 auto;
   background: linear-gradient(135deg, #1A1D1F 0%, #0B0D0F 45%, #080A0B 100%); /* Depth-simulating glass base check check */
   border-radius: 2px;
   border: 1px solid #000; /* Unified hardware border check check */
   box-shadow: 
      inset 1px 1px 0 rgba(255,255,255,0.1), /* PERSISTENT flare check check check */
      inset 0 2px 5px rgba(0,0,0,0.9),
      0 0.5px 1px rgba(255,255,255,0.05); /* Hardware bezel highlight check check check */
   color: #500;
   font-size: 8px;
   font-family: Arial, sans-serif;
   position: relative;
   overflow: hidden; /* Contains the glass shine layer check check check */
   top: 14px; /* Shifted down independently without affecting other layout columns check check check */
}

/* Realistic surface reflection shine check check check check */
.tx-player-wrapper .master-clip-window::after {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0; height: 50%;
   background: linear-gradient(to bottom, rgba(255,255,255,0.06) 0%, transparent 100%);
   pointer-events: none;
}
.tx-player-wrapper .master-clip-active {
   color: #FF2020;
   text-shadow: 0 0 6px #FF2020;
}

/* --- Lower Cluster: VU Meter + Fader natively side-by-side --- */
.tx-player-wrapper .master-lower-cluster {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   transform: scale(0.80);
   transform-origin: top center;
   position: relative;
   top: 14px; /* Independent visual shift */
}

/* --- VU Meter --- */
.tx-player-wrapper .vu-meter-container,
.tx-player-wrapper .master-vu {
   display: flex;
   gap: 8px;
   background: #0A0A0A !important; /* Deeper black for LCD look check check */
   padding: 10px 8px; /* Slightly more buffer for the glass feel check check */
   border-radius: 3px;
   border: 1px solid #000 !important; /* Unified hardware border check check */
   box-shadow: 
      inset 1px 1px 0 rgba(255,255,255,0.1), /* PERSISTENT flare check check check */
      inset 0 1px 8px rgba(0,0,0,0.9);      /* Deeper recess check check */
   position: relative;
   overflow: hidden; /* Contains the glass reflection check check */
}

/* Mineral Glass Guard for VU Meters check check check */
.tx-player-wrapper .vu-meter-container::after,
.tx-player-wrapper .master-vu::after {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0; height: 100%;
   background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, transparent 100%);
   pointer-events: none;
   z-index: 10;
}
.tx-player-wrapper .vu-channel {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end; /* Drops native contents directly forcing bottom-locked identical vertical tracking physically seamlessly */
   gap: 4px;
}
.tx-player-wrapper .vu-labels {
   font-size: 9px;
   font-family: monospace;
   font-weight: 700;
   color: #666;
}
.tx-player-wrapper .vu-leds {
   display: flex;
   flex-direction: column-reverse; /* Bottom up */
   gap: 2px;
}
.tx-player-wrapper .vu-leds span {
   width: 6px;
   height: 3px;
   border-radius: 1px;
   background: #254F26; /* Dead Green */
   opacity: 0.3;
   transition: opacity 0.05s ease;
}
.tx-player-wrapper .vu-leds span.vu-yellow { background: #8E7A24; }
.tx-player-wrapper .vu-leds span.vu-red { background: #8E2525; }

/* Active lit states populated sequentially by JS */
.tx-player-wrapper .vu-leds span.led-active { opacity: 1; box-shadow: 0 0 4px currentColor; }
.tx-player-wrapper .vu-leds span.led-active { background: #39C840; color: #39C840; }
.tx-player-wrapper .vu-leds span.vu-yellow.led-active { background: #FFD628; color: #FFD628; }
.tx-player-wrapper .vu-leds span.vu-red.led-active { background: #FF2E2E; color: #FF2E2E; }

.tx-player-wrapper .vu-scale {
   display: flex;
   flex-direction: column-reverse;
   justify-content: space-between; /* Dynamically tracks identical stretches unconditionally spanning natively over entire channel lengths smoothly */
   padding-top: 15px; /* Safely perfectly clears L/R labels geometry seamlessly */
   padding-bottom: 4px; /* Matches the baseline LED height flawlessly natively */
   font-size: 8px;
   color: #555;
   font-family: monospace;
   font-weight: bold;
}

/* --- Master Volume Fader --- */
.tx-player-wrapper .master-fader-group {
   position: relative;
   display: flex;
   justify-content: center;
   height: auto; /* Allow strict implicit matching bound physically defined by stretched flex layout exactly */
   width: 58px; /* Force parity thickness geometrically accurately matching VU Meter width naturally! */
   background: #0B0D0F;
   padding: 12px 0; /* Huge mechanical buffer completely sheltering sliding knob overflow smoothly safely! */
   border-radius: 4px;
   border: 1px solid rgba(255,255,255,0.05);
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
}
.tx-player-wrapper .fader-track {
   position: relative;
   width: 40px;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}
/* The underlying chassis slot */
.tx-player-wrapper .fader-rails {
   position: absolute;
   width: 6px;
   height: 100%;
   background: #000;
   border-radius: 3px;
   box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.05);
}
/* The physical sliding hardware block */
.tx-player-wrapper .fader-thumb {
   position: absolute;
   bottom: 0; /* Origin baseline mapped accurately */
   width: 38px;
   height: 18px;
   background: linear-gradient(180deg, #333 0%, #1A1A1A 100%);
   border-radius: 4px;
   border: 1px solid #000;
   box-shadow: 0 4px 6px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.2);
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: -9px; /* Absolute offset accurately half the height correctly aligning crosshair identically */
   transform: translateY(0%); /* Controlled by Javascript */
   pointer-events: none; /* Passes interaction safely through strictly to native range element uniformly! */
}
/* White indicator painted exactly atop the physical sliding block */
.tx-player-wrapper .fader-line {
   width: 24px;
   height: 2px;
   background: #FFF;
}

/* The invisible, standard exact native web slider mapped mathematically exactly occupying the entire interactive bounds reliably */
.tx-player-wrapper .eq-hidden-range-vertical {
   -webkit-appearance: slider-vertical;
   appearance: slider-vertical; /* Fixes LINT visually reliably ensuring cross-port strictly effectively! */
   writing-mode: bt-lr; 
   position: absolute;
   top: -9px;
   left: 0;
   width: 100%;
   height: calc(100% + 18px); /* Bleed strictly to catch exact thumb extent symmetrically smoothly seamlessly */
   opacity: 0;
   z-index: 10;
   cursor: pointer;
}
.tx-player-wrapper .eq-knob-group {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
}
.tx-player-wrapper .eq-knob-label {
   color: var(--tx-white);
   font-size: 12px;
   letter-spacing: 2px;
   font-weight: 500;
   margin-bottom: 16px;
   text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tx-player-wrapper .eq-knob {
   position: relative;
   width: 72px;
   height: 72px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 12px;
}
.tx-player-wrapper .eq-knob-scale {
   position: absolute;
   top: -8px;
   left: -8px;
   width: 88px;
   height: 88px;
   pointer-events: none;
}

/* The actual physical turning knob */
.tx-player-wrapper .eq-knob-dial {
   position: relative;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   /* Base Metallic Rim overlaid dynamically forcing outer gear teeth illusions natively */
   background: 
      radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.95) 100%),
      repeating-conic-gradient(
         from 0deg,
         #333 0deg,
         #1a1a1a 4deg,
         #1a1a1a 16deg,
         #333 20deg
      );
   box-shadow: 
      inset 0 1px 2px rgba(255,255,255,0.1), 
      inset 0 -2px 3px rgba(0,0,0,0.8);
   display: flex;
   justify-content: center;
   align-items: center;
   transform: rotate(0deg); 
   transition: transform 0.1s linear; /* JavaScript updates this explicitly */
}

/* Inner Cap mimicking the physical layered texture */
.tx-player-wrapper .eq-knob-cap {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   /* Authentic diagonal brushed metallic hardware reflection matching opposite hot-spots */
   background: conic-gradient(
      from 135deg,
      #141414 0deg,
      #5a5a5a 45deg,
      #111 90deg,
      #141414 180deg,
      #777 225deg,
      #111 270deg,
      #141414 360deg
   );
   box-shadow: 
      inset 0 1px 2px rgba(255,255,255,0.2), 
      inset 0 -1px 2px rgba(0,0,0,0.8),
      0 4px 8px rgba(0,0,0,0.9), 
      0 1px 1px rgba(0,0,0,0.5);
   position: relative;
}

/* The position indicator groove */
.tx-player-wrapper .eq-knob-indicator {
   position: absolute;
   top: 4px; /* Stops precisely natively near the outer edge */
   left: 50%;
   transform: translateX(-50%);
   width: 6px; /* Bolder pill-track replica matching hardware width correctly */
   height: 25px; /* Safely sweeps physically directly into the geographic center origin */
   background: #FFF;
   border-radius: 3px;
   box-shadow: 
      inset 0 -2px 4px rgba(100,100,100,0.9), /* Internal shading carving 3D pill depth */
      -1px 0px 4px rgba(0,0,0,0.7),
      1px 0px 4px rgba(0,0,0,0.7);
   z-index: 10;
}

/* The invisible native range slider that controls the value underneath securely */
.tx-player-wrapper .eq-hidden-range {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
   z-index: 10;
   margin: 0;
   padding: 0;
   pointer-events: none; /* Disable default jump-on-click check check check */
}

.tx-player-wrapper .eq-knob-value {
   color: var(--tx-gray-400);
   font-size: 11px;
   font-family: monospace;
   font-weight: 600;
   letter-spacing: 1px;
   background: rgba(0,0,0,0.4);
   padding: 4px 10px;
   border-radius: 4px;
   border: 1px solid rgba(255,255,255,0.04);
}

@media (max-width: 991px) {
   .tx-player-wrapper .eq-mixer-toggle { display: none !important; }
}

/* ── Vinyl Sleeve Catalog (replaces tracklist) ── */
.catalog-row {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: space-between;
   margin-top: 0px;
   /* Shifted responsibility to title margin-bottom */
   margin-bottom: 24px;
   /* Space between catalog row and multi-track grid */
   gap: 12px;
   overflow: visible;
   /* Changed from hidden to visible so shadows don't get cropped */
   padding: 0 12px 16px 0;

   /* Align perfectly with the outer edge of the waveform box */
   /* Removed old horizontal mask to allow them to fill cleanly */
}

.tx-player-wrapper

/* Each record = sleeve card + peeking disc */
.catalog-item {
   position: relative;
   flex-shrink: 0;
   width: calc(32% - 8px);
   /* Distributes 3 items gracefully */
   aspect-ratio: 1.5;
   cursor: pointer;
   /* Base transition takes over after intro completes */
   transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s;
}

.tx-player-wrapper

/* Intro animation classes (Dalga / Wave effect from Right to Left) */
.catalog-item.intro-hidden {
   opacity: 0;
   /* Start them pushed to the right, slightly scaled down and rotated back */
   transform: translateX(120px) scale(0.6) rotate(8deg);
   filter: blur(8px);
}

.tx-player-wrapper .catalog-item.intro-revealed {
   opacity: 1;
   transform: translateX(0) scale(1) rotate(0deg);
   filter: blur(0px);
   /* Very smooth and springy wave landing */
   transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.6s ease-out;
}

.tx-player-wrapper

/* Hover and active states remain below so they never get overridden! */
.catalog-item:hover {
   transform: translateY(-6px) scale(1.04);
   z-index: 10;
}

.tx-player-wrapper .catalog-item.active {
   z-index: 11;
}

.tx-player-wrapper

/* ── Sleeve (the album cover card) ─────── */
.cat-sleeve {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   aspect-ratio: 1;
   /* Match parent height to make a perfect square */
   border-radius: 6px;
   /* Slightly thicker rounding for larger sizes */
   overflow: hidden;
   z-index: 3;
   background: #111;
   box-shadow:
      4px 4px 0px rgba(0, 0, 0, 0.35),
      6px 6px 0px rgba(0, 0, 0, 0.20),
      10px 16px 24px rgba(0, 0, 0, 0.5);
   /* Real oval cutout on right edge — proportional scaling via % */
   -webkit-mask-image: radial-gradient(ellipse 6% 12% at calc(100% + 1px) 50%, transparent 99%, black 100%);
   mask-image: radial-gradient(ellipse 6% 12% at calc(100% + 1px) 50%, transparent 99%, black 100%);
}

.tx-player-wrapper

/* Active sleeve gets a bright highlight border */
.catalog-item.active .cat-sleeve {
   box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.85),
      3px 8px 20px rgba(0, 0, 0, 0.6);
}

.tx-player-wrapper

/* Cardboard right-edge spine — empty, notch handled by catalog-item::after */
.cat-sleeve::after {
   display: none;
}

.tx-player-wrapper

/* Bottom open-edge shadow (disc slot) */
.cat-sleeve::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 6px;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
   z-index: 2;
   pointer-events: none;
}

.tx-player-wrapper .cat-cover {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.tx-player-wrapper

/* Gloss sheen on sleeve */
.cat-gloss {
   position: absolute;
   inset: 0;
   background:
      radial-gradient(ellipse 50% 35% at 12% 12%,
         rgba(255, 255, 255, 0.14) 0%,
         transparent 65%),
      linear-gradient(145deg,
         rgba(255, 255, 255, 0.06) 0%,
         transparent 45%,
         rgba(0, 0, 0, 0.04) 100%);
   z-index: 2;
   pointer-events: none;
}

.tx-player-wrapper .cat-disc-wrap {
   position: absolute;
   top: 0;
   right: 0;
   z-index: 1;
   height: 100%;
   aspect-ratio: 1;
   transform: rotate(3deg);
   transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.4s ease 0.1s;
   pointer-events: none;
   /* Tıklamalar plak diskinin arkasındaki doğru catalog item'a gitsin */
}

.tx-player-wrapper

/* Plak çantadan çıkıp pikaba geçtiğinde çantadaki plağin animasyonla fırlayıp kaybolması (içinin boşalması) */
.app.vinyl-equipped .catalog-item.active .cat-disc-wrap {
   transform: translateX(100%) rotate(45deg);
   opacity: 0;
}

.tx-player-wrapper
/* Oval notch — now handled by mask-image on .cat-sleeve (real cutout) */

.cat-disc {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   position: relative;
   background-image:
      repeating-radial-gradient(circle at 50% 50%,
         transparent 16px,
         rgba(255, 255, 255, 0.022) 17px,
         transparent 18px,
         transparent 21px),
      radial-gradient(circle at 38% 30%,
         #383838 0%,
         #1e1e1e 20%,
         #111 50%,
         #191919 80%,
         #141414 100%);
   box-shadow:
      2px 4px 18px rgba(0, 0, 0, 0.75),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      inset -20px -15px 50px rgba(255, 255, 255, 0.03);
}

.tx-player-wrapper

/* Center paper label — shows track cover art via inline background-image */
.cat-disc-label {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 45%;
   height: 45%;
   border-radius: 50%;
   overflow: hidden;
   border: 1.5px solid rgba(255, 255, 255, 0.12);
   box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.tx-player-wrapper

/* Spindle hole — the turntable post hole in the very center */
.cat-disc-label::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #0a0a0a;
   box-shadow:
      0 0 0 1.5px rgba(180, 180, 180, 0.35),
      inset 0 0 2px rgba(0, 0, 0, 0.8);
   z-index: 1;
}

.tx-player-wrapper

/* ── Remaining Tracks (New Multi-Track Area) ── */
.remaining-tracks-wrapper {
   position: relative;
   width: 100%;
   border-radius: 0;
   background: transparent;

   padding-top: 0px;
   padding-bottom: 20px;
   padding-left: 0px;
   padding-right: 12px;

   /* Full width responsive grid inside panel */
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 16px;

   will-change: transform, opacity;
}

.tx-player-wrapper

/* Background panel intro animation */
.remaining-tracks-wrapper.intro-hidden {
   opacity: 0;
   transform: translateY(40px);
   pointer-events: none;
}

.tx-player-wrapper .remaining-tracks-wrapper.intro-revealed {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
   transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.tx-player-wrapper .grid-cover-wrap {
   position: relative;
   /* CRITICAL for centering overlays */
   width: 100%;
   aspect-ratio: 1;
   border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
   transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s, opacity 0.25s;
}

.tx-player-wrapper

/* Balloon pop setup for bottom grid items */
.grid-cover-wrap.intro-hidden {
   opacity: 0;
   transform: scale(0.3) translateY(40px);
}

.tx-player-wrapper .grid-cover-wrap.intro-revealed {
   opacity: 1;
   transform: scale(1) translateY(0);
   transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tx-player-wrapper .grid-cover-wrap:hover {
   transform: translateY(-4px) scale(1.03);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.tx-player-wrapper

/* Play/Pause overlay on covers - Perfectly Centered */
.cover-play-btn {
   position: absolute;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) scale(0.8) !important;
   width: 48px;
   height: 48px;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   opacity: 0;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 10;
   pointer-events: none;
   border: 1px solid rgba(255, 255, 255, 0.2);
}

.tx-player-wrapper .catalog-item.active .cover-play-btn,
.tx-player-wrapper .grid-cover-wrap.active .cover-play-btn {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1.1) !important;
}

.tx-player-wrapper .catalog-item:hover .cover-play-btn,
.tx-player-wrapper .grid-cover-wrap:hover .cover-play-btn {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1) !important;
}

.tx-player-wrapper .cover-play-icon {
   width: 22px;
   height: 22px;
}

.tx-player-wrapper .grid-cover {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.tx-player-wrapper

/* ── Description Info Icon ── */
.cover-info-btn {
   position: absolute;
   top: 8px;
   left: 8px;
   width: 28px;
   height: 28px;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--tx-white);
   opacity: 0;
   cursor: pointer;
   z-index: 20;
   transition: opacity 0.2s, background 0.2s, transform 0.2s;
}

.tx-player-wrapper .cover-info-btn svg {
   width: 14px;
   height: 14px;
}

.tx-player-wrapper .catalog-item:hover .cover-info-btn,
.tx-player-wrapper .grid-cover-wrap:hover .cover-info-btn {
   opacity: 1;
}

.tx-player-wrapper .cover-info-btn:hover {
   background: var(--tx-white);
   color: var(--tx-black);
   transform: scale(1.1);
}

.tx-player-wrapper

/* ── Description Overlay Area ── */
.description-overlay {
   position: absolute;
   top: 0;
   bottom: 0px;
   margin-top: 0;
   /* Auto-matches its parent grid */
   left: 0;
   right: 0;
   width: auto;
   margin-left: 0;
   border-radius: 0 0 24px 24px;
   background: #131617;

   /* Maximum softness with easing curve */
   z-index: 5;
   /* Above remainingTracksGrid (1) */

   padding-top: 0px;
   padding-bottom: 40px;
   padding-left: 10px;
   padding-right: 10px;

   opacity: 0;
   pointer-events: none;
   transform: translateY(20px);
   transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

   display: flex;
   flex-direction: column;
   min-height: 380px;
   /* enough space for cover */
}

.tx-player-wrapper .description-overlay.is-visible {
   opacity: 1;
   pointer-events: auto !important;
   transform: translateY(0);
   position: relative;
   grid-column: 1 / -1;
   height: auto;
   bottom: auto;
}

.tx-player-wrapper .desc-close-btn {
   position: absolute;
   top: 20px;
   right: 20px;
   background: rgba(255, 255, 255, 0.08);
   border: none;
   color: var(--tx-white);
   width: 36px;
   height: 36px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s, transform 0.2s;
   z-index: 10;
}

.tx-player-wrapper .desc-close-btn:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: scale(1.05);
}

.tx-player-wrapper .desc-close-btn svg {
   width: 18px;
   height: 18px;
}

.tx-player-wrapper .desc-content-layout {
   display: block;
   width: 100%;
   overflow: visible;
   padding: 16px 12px 20px 12px;
   /* Give very generous top padding so shadow is impossible to clip */
   height: auto;
}

.tx-player-wrapper .desc-content-layout::-webkit-scrollbar {
   width: 4px;
}

.tx-player-wrapper .desc-content-layout::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 2px;
}

.tx-player-wrapper #descCoverImage {
   float: left;
   width: 250px;
   height: 250px;
   object-fit: cover;
   border-radius: 8px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
   margin-right: 30px;
   margin-bottom: 20px;
}

.tx-player-wrapper .desc-header {
   margin-bottom: 20px;
   padding-bottom: 15px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tx-player-wrapper #descTrackTitle {
   font-size: 26px;
   font-weight: 700;
   margin-bottom: 6px;
   color: var(--tx-white);
   letter-spacing: -0.5px;
}

.tx-player-wrapper #descTrackArtist {
   font-size: 15px;
   color: var(--tx-gray-400);
   font-weight: 400;
}

.tx-player-wrapper #descTrackText {
   font-size: 14px;
   line-height: 1.6;
   color: var(--tx-gray-300);
   white-space: pre-wrap;
}

.tx-player-wrapper

/* When description is open, visually hide the grid items with a spin animation */
.remaining-tracks-wrapper.desc-active {
   pointer-events: none !important;
}

.tx-player-wrapper .remaining-tracks-wrapper.desc-active .grid-cover-wrap {
   position: absolute !important;
   opacity: 0 !important;
   pointer-events: none !important;
   transition: none !important; /* Hide instantly on close */
}

/* Native Synchronous Bounce-In Reveal (Matches Initial Intro) */
.tx-player-wrapper .remaining-tracks-wrapper.desc-active .grid-cover-wrap {
   opacity: 0 !important;
   transform: scale(0.3) translateY(40px) !important;
   pointer-events: none !important;
}

/* Replicate the exact initial intro transition timing */
.tx-player-wrapper .remaining-tracks-wrapper .grid-cover-wrap {
   transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.tx-player-wrapper .modal-overlay {
   position: fixed;
   inset: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--tx-transition-base);
}

.tx-player-wrapper .modal-overlay.is-visible {
   opacity: 1;
   pointer-events: all;
}

.tx-player-wrapper .modal {
   background: var(--tx-gray-900);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--tx-radius-lg);
   width: 90%;
   max-width: 420px;
   overflow: hidden;
   transform: translateY(20px) scale(0.96);
   transition: transform var(--tx-transition-base);
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.tx-player-wrapper .modal-overlay.is-visible .modal {
   transform: translateY(0) scale(1);
}

.tx-player-wrapper .modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tx-player-wrapper .modal-header h2 {
   font-size: 16px;
   font-weight: 600;
   color: var(--tx-white);
}

.tx-player-wrapper .modal-close {
   background: none;
   border: none;
   color: var(--tx-gray-400);
   cursor: pointer;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: all var(--tx-transition-fast);
}

.tx-player-wrapper .modal-close:hover {
   color: var(--tx-white);
   background: rgba(255, 255, 255, 0.08);
}

.tx-player-wrapper .modal-close svg {
   width: 18px;
   height: 18px;
}

.tx-player-wrapper .modal-body {
   padding: 24px;
}

.tx-player-wrapper .input-label {
   display: block;
   font-size: 12px;
   font-weight: 500;
   color: var(--tx-gray-300);
   margin-bottom: 8px;
   letter-spacing: 0.5px;
}

.tx-player-wrapper .modal-input {
   width: 100%;
   padding: 12px 16px;
   background: var(--tx-gray-800);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--tx-radius-sm);
   color: var(--tx-white);
   font-family: var(--tx-font);
   font-size: 14px;
   outline: none;
   transition: border-color var(--tx-transition-fast);
}

.tx-player-wrapper .modal-input::placeholder {
   color: var(--tx-gray-500);
}

.tx-player-wrapper .modal-input:focus {
   border-color: rgba(255, 255, 255, 0.25);
}

.tx-player-wrapper .input-hint {
   font-size: 12px;
   color: var(--tx-gray-500);
   margin-top: 8px;
   line-height: 1.4;
}

.tx-player-wrapper .modal-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
   padding: 16px 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tx-player-wrapper

/* Buttons */
.btn {
   padding: 10px 20px;
   font-family: var(--tx-font);
   font-size: 13px;
   font-weight: 500;
   border-radius: var(--tx-radius-sm);
   border: none;
   cursor: pointer;
   transition: all var(--tx-transition-fast);
}

.tx-player-wrapper .btn-ghost {
   background: transparent;
   color: var(--tx-gray-400);
   border: 1px solid rgba(255, 255, 255, 0.08);
}

.tx-player-wrapper .btn-ghost:hover {
   color: var(--tx-white);
   border-color: rgba(255, 255, 255, 0.2);
   background: rgba(255, 255, 255, 0.04);
}

.tx-player-wrapper .btn-primary {
   background: var(--tx-white);
   color: var(--tx-black);
}

.tx-player-wrapper .btn-primary:hover {
   background: var(--tx-gray-100);
   box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}

/* ---------- Animations ---------- */
@keyframes fadeSlideDown {
   from {
      opacity: 0;
      transform: translateY(-12px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeSlideUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeScaleUp {
   from {
      opacity: 0;
      transform: scale(0.97) translateY(16px);
   }

   to {
      opacity: 1;
      transform: scale(1) translateY(0);
   }
}

@keyframes eqBounce {
   0% {
      height: 3px;
   }

   100% {
      height: 14px;
   }
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.4;
   }
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

.tx-player-wrapper

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
   width: 4px;
}

.tx-player-wrapper ::-webkit-scrollbar-track {
   background: transparent;
}

.tx-player-wrapper ::-webkit-scrollbar-thumb {
   background: var(--tx-gray-700);
   border-radius: 2px;
}

.tx-player-wrapper

/* ---------- Selection ---------- */
::selection {
   background: rgba(255, 255, 255, 0.15);
   color: var(--tx-white);
}

/* ==========================================
   DESKTOP ONLY OVERRIDES
   Keeps the waveform area aligned with the right
   edge gap matching the left side padding.
   ========================================== */
@media (min-width: 1025px) {
   .tx-player-wrapper

   /* ── Removed global background forced by player ── */
   .app {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      /* Full edge-to-edge control */
      padding-right: 0 !important;
   }

   .tx-player-wrapper .main {
      width: 100% !important;
      padding-left: 0 !important;
      /* Restored full width for waveform */
      padding-top: 60px !important;
      padding-right: 0 !important;
      /* Restored full width for waveform */
      overflow-x: clip !important;
      /* clip instead of hidden so sticky works */
   }

   .tx-player-wrapper

   /* Standard Layout — scroll normally with the page */
   .carousel-section {
      --tx-desktop-scale: 0.8;
      /* Shrink turntable gracefully */
      display: flex !important;
      align-items: flex-start !important;
      flex-wrap: wrap !important;
      /* CRITICAL for bottom-tracks-section to move down */
      width: 100% !important;
      /* CRITICAL for calc(100% - 460px) to work on playlist-mask */
      max-width: 100% !important;
      box-sizing: border-box !important;
   }

   .tx-player-wrapper .carousel-container {
      position: relative !important;
      width: 400px !important;
      /* Scaled down space (500 * 0.8) */
      height: 400px !important;
      /* Protective buffer for orbiting covers */
      margin-left: 60px !important;
      margin-top: 20px !important;
      flex-shrink: 0 !important;
      z-index: 20 !important;
      pointer-events: none; /* Let clicks pass through transparent/empty areas to elements below */
   }

   .tx-player-wrapper .carousel-container .carousel,
   .tx-player-wrapper .carousel-container .arrow-controls {
      pointer-events: auto; /* Re-enable clicks on the actual turntable & transport controls */
   }

   .tx-player-wrapper .carousel {
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      /* Offset physical padding caused by scale-center logic */
      margin-left: -50px !important;
      margin-top: -50px !important;
      transform: scale(var(--tx-desktop-scale)) !important;
   }

   /* Secure Desktop Intro Override */
   .tx-player-wrapper.intro-active .carousel.intro-centered {
      transform: translate(var(--intro-x, 0), var(--intro-y, 0)) scale(var(--tx-desktop-scale, 0.8)) rotate(0deg) translateZ(0) !important;
      transition: opacity 0.5s ease-out !important;
   }

   .tx-player-wrapper.intro-active .carousel.intro-rolling {
      animation: none !important;
      transform: translate(0, 0) scale(var(--tx-desktop-scale, 0.8)) rotate(-360deg) translateZ(0) !important;
      transition: border-color 0.6s ease 0.4s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
   }

   .tx-player-wrapper .playlist-mask {
      position: relative !important;
      top: auto !important;
      transform: none !important;
      background: transparent !important;
      box-shadow: none !important;
      clip-path: inset(-100px -100px -100px 0) !important;
      /* Clips strictly at the left edge under the vinyl */
      left: 0 !important;
      right: auto !important;
      margin-left: -200px !important;
      /* Keep right side perfectly flush with 30px ALL PODCASTS padding grid boundary (-260 - 30 = -290px) */
      width: calc(100% - 290px) !important;
      flex: 1 1 0% !important;
      max-width: calc(100% - 290px) !important;
      box-sizing: border-box !important;
      min-width: 0 !important;
      height: 380px !important;
      min-height: 380px !important;
      margin-top: 30px !important;
      /* Perfect vertical symmetry, 10px shy of the absolute turntable limits top and bottom */
      z-index: 5 !important;
      /* Sculpt the rectangle corners exactly into the 380px scaled circle curvature */
      border-top-left-radius: 190px !important;
      border-bottom-left-radius: 190px !important;
   }

   .tx-player-wrapper .playlist-panel {
      /* Content is tucked 200px beneath the vinyl, push 200+20=220px physical padding */
      padding-left: 220px !important;
      padding-right: 30px !important;
      padding-top: 20px !important;
      /* Shifted up closely from 60px to tightly tuck the waveform near the top edge */
      padding-bottom: 20px !important;
      height: 380px !important;
      min-height: 380px !important;
      /* Fits exactly inside turntable boundaries */
      width: 100% !important;
      max-width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      box-sizing: border-box !important;
      overflow: visible !important;
      mask-image: none !important;
      -webkit-mask-image: none !important;
      /* Dark sliding panel sliding out from turntable */
      background: #131617 !important;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45) !important;
      border-radius: 6px !important;
      /* Softened curvature reduced heavily to match the sleeve cards' exact radii */
      position: relative !important; /* Anchor for the EQ mixer toggle absolute positioning */
   }

   .tx-player-wrapper

   /* Space between waveform and POPULAR PODCASTS */
   #last3Title {
      margin-top: 24px !important;
      /* Reduced from 40px to safely keep the covers above the bottom line */
      color: #FFFFFF !important;
      /* Reverted header for dark background */
      padding-left: 0 !important; /* Snapped flush natively to the absolute left edge of the waveform BLACK BOX */
   }

   /* -- Text Colors ONLY for grid items on the Dark Background -- */
   .tx-player-wrapper .catalog-item .track-title {
      color: #FFFFFF !important;
   }

   .tx-player-wrapper .catalog-item .track-artist {
      color: #CCCCCC !important;
   }

   .tx-player-wrapper .catalog-row .catalog-item {
      max-width: 190px !important;
      /* Safely capped height for 3 full-size items so they don't break bottom bounds */
   }

   .tx-player-wrapper .catalog-row {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      padding-left: 0 !important; /* Snapped flush natively with the waveform BLACK BOX */
      padding-right: 0 !important;
      flex-wrap: wrap !important;
      /* Guard against items expanding out of bounds horizontally */
      width: 100% !important;
      box-sizing: border-box !important;
   }

   .tx-player-wrapper

   /* ── Full-width bottom section (ALL PODCASTS) ── */
   .bottom-tracks-section {
      width: 100% !important;
      flex-basis: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      display: block !important;
      padding: 50px 30px 40px 30px !important;
      background: transparent !important;
      /* Match left and right padding edge-to-edge (30px) */
      position: relative;
      z-index: 2;
   }

   .tx-player-wrapper #allPodcastsTitle {
      margin-left: 0 !important;
      width: 100% !important;
      padding-left: 0 !important;
      background: transparent !important;
      margin-top: 0 !important;
      padding-top: 0 !important;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      position: relative;
      z-index: 2;
      color: #FFFFFF !important;
   }

   .tx-player-wrapper .tx-visualizer-container {
      display: block !important;
   }

   .tx-player-wrapper .eq-mixer-toggle {
      display: flex !important;
   }

   .tx-player-wrapper .remaining-tracks-wrapper {
      margin-left: 0 !important;
      width: 100% !important;
      padding-top: 30px !important;
      padding-left: 30px !important;
      padding-right: 30px !important;
      padding-bottom: 30px !important;
      background: #131617 !important;
      border-radius: 6px !important;
      position: relative;
      z-index: 2;
      /* Balanced columns for the full-width panel */
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
   }

   .tx-player-wrapper .now-playing-bar {
      overflow: visible !important;
      min-height: 80px !important;
      background: #000000 !important;
      /* Absolute black capsule requested by user */
      border-radius: 6px !important;
      /* Sharpened specifically to synchronize meticulously with the sleeve geometry */
      padding: 8px 12px 6px 12px !important;
      /* Perfect optically symmetrical headroom and extended layout width */
   }

   .tx-player-wrapper .now-playing-bar .waveform-container {
      overflow: visible !important;
   }

   .tx-player-wrapper .now-playing-bar .waveform-header {
      margin-bottom: 2px !important;
      /* Puzıle to waveform top boundary */
   }

   .tx-player-wrapper .now-playing-bar .waveform-wrapper {
      height: 56px !important;
      margin-bottom: 2px !important;
      /* Puzzles to time-row bottom boundary */
   }

   /* Return the Javascript-drawn canvas waveform to its original pristine white-gray visual state */
   .tx-player-wrapper .now-playing-bar canvas {
      filter: none !important;
      opacity: 1;
   }

   /* ── Desktop Description Overlay Animation & Layout Fixes ── */
   .tx-player-wrapper .description-overlay {
      background: #131617 !important;
      /* Crisp white background overlay instead of ugly mobile dark gradient */
      padding: 0 0 40px 0 !important;
      /* Starts structurally directly beneath the ALL PODCASTS title, completely eliminating the 80px mobile headroom */
      border-radius: 6px !important;
      /* Meticulously synchronized curvature matching the waveform capsule and catalogue sleeves natively */
      opacity: 0;
      height: 100% !important;
      /* Bound to exactly the grid dimensions */
      overflow: hidden !important;
      /* PREVENTS INVISIBLE TEXT FROM STRETCHING THE FOOTER! */
      transform: translateY(30px);
      transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s !important;
      visibility: hidden;
      /* Takes it completely out of interactive and render flow cleanly after transition */
   }

   .tx-player-wrapper .description-overlay.is-visible {
      visibility: visible !important;
      position: relative !important;
      /* Switch to relative so it pushes the page footer down */
      top: auto !important;
      left: auto !important;
      width: 100% !important;
      height: auto !important;
      /* Expand to fit all description text */
      overflow: visible !important;
      /* No internal scroll */
      padding-bottom: 60px !important;
      z-index: 20 !important;
      opacity: 1 !important;
      transform: translateY(0) !important;
   }

   /* The grid-cover-wrap gracefully fails back to line 2125 base which handles absolute position/spin natively */
   /* Wait! We disable transitions ONLY when desc-active is applied so they instantly hide without chaotic spinning, but beautifully animate IN when the class drops! */
   .tx-player-wrapper .remaining-tracks-wrapper.desc-active .grid-cover-wrap {
      position: absolute !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transition: none !important;
      /* Instantly hide. Transform is inherited from the global particle scattered states above! */
   }

   /* Text visibility contrast on white backdrop */
   .tx-player-wrapper #descTrackTitle {
      color: #FFFFFF !important;
   }

   .tx-player-wrapper #descTrackArtist {
      color: #CCCCCC !important;
   }

   .tx-player-wrapper #descTrackText {
      color: #FFFFFF !important;
   }

   /* Adjusted subtle close button */
   .tx-player-wrapper .desc-close-btn {
      top: 16px !important;
      right: 16px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      color: #FFFFFF !important;
   }

   .tx-player-wrapper .desc-close-btn:hover {
      background: rgba(255, 255, 255, 0.2) !important;
   }

/* ==========================================================
   PIONEER FX MODULE HARDWARE INTERFACE
   ========================================================== */
.tx-player-wrapper .eq-fx-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    overflow: visible;
}

/* Digital BPM Target Emulation Engine */
.tx-player-wrapper .fx-bpm-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6px;
    margin-right: 0px;
    gap: 0; /* Screen and TAP button are one cohesive unit */
}

/* ── Pioneer LCD Screen ── */
.tx-player-wrapper .fx-screen {
    width: 128px;
    background: #0A0A0A;
    border: 1px solid #000; /* Deep black base check check */
    border-radius: 3px;
    box-shadow: 
        inset 1px 1px 0 rgba(255,255,255,0.1), /* The top/left flare you mentioned check check check */
        inset 0 1px 6px rgba(0,0,0,0.8),       /* Recessed depth check check */
        0 1px 0 rgba(255,255,255,0.02);
    padding: 6px 8px 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    position: relative;
    overflow: visible !important;
    user-select: none;
    cursor: default;
}

/* ── Professional Mineral Glass Shield (High-Gloss Realism) ── */
.tx-player-wrapper .fx-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Muted gloss for a dark hardware look check check check */
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 25%, transparent 50%),
        linear-gradient(225deg, rgba(255,255,255,0.01) 0%, transparent 40%);
    box-shadow: 
        inset 0 1px 3px rgba(0,0,0,0.6); /* Removed all white rim lights check check check */
    pointer-events: none;
    z-index: 10; /* High priority to sit above all digital readouts check check check */
    border-radius: 3px;
    opacity: 0.9;
}
/* Diagonal gloss reflection overlay like real Pioneer LCD */
.tx-player-wrapper .fx-screen::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(255,255,255,0.07) 0%, 
        rgba(255,255,255,0.02) 35%,
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Top row: AUTO badge + BPM readout */
.tx-player-wrapper .fx-screen-top {
    display: flex;
    align-items: center;
    width: 100%;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 0;
}
.tx-player-wrapper .fx-screen-badge {
    font-size: 7px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 1px;
    line-height: 1.2;
}
.tx-player-wrapper .fx-badge-auto {
    background: #e5feff !important; /* Vivid Pioneer digital light cyan check check check */
    color: #000 !important; /* Sharp black text for high contrast check check */
    border: none !important;
}
.tx-player-wrapper .fx-screen-bpm {
    color: #e5feff !important; /* Unified Pioneer digital light cyan check check check */
    font-size: 24px;
    font-weight: 400; /* Professional weight strictly from user request check check check */
    margin-left: auto;
    letter-spacing: 0px;
    line-height: 1;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.tx-player-wrapper .bpm-small {
    font-size: 8px;
    color: #e5feff !important; /* Matches the BPM value color check check check */
    margin-left: 2px;
    font-weight: 700;
    vertical-align: super;
}

/* Digital Boot Logo Sequence Styles check check check check check */
.tx-player-wrapper .fx-screen {
    position: relative; /* Base for logo centering */
    overflow: hidden;
}

.tx-player-wrapper .fx-screen-boot-logo {
    position: absolute;
    top: 29%; left: 50%; /* Pushed to the UPPER-MOST focus check check check */
    transform: translate(-50%, -50%);
    width: 65%; height: 65%; /* Adjusted fit check check check */
    /* Synchronized with Pioneer digital light cyan (#e5feff) as requested check check check */
    background-color: #e5feff; 
    filter: drop-shadow(0 0 10px rgba(229, 254, 255, 0.6));
    -webkit-mask: url('../img/tx-logo.webp') center/contain no-repeat;
    mask: url('../img/tx-logo.webp') center/contain no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 20;
    pointer-events: none;
    /* LED Breathing animation nizam check check check check check */
    animation: led-boot-pulse 1.5s infinite alternate ease-in-out;
}

@keyframes led-boot-pulse {
    from { 
        filter: drop-shadow(0 0 5px rgba(229, 254, 255, 0.4)) brightness(0.9);
        transform: translate(-50%, -50%) scale(0.98);
    }
    to { 
        filter: drop-shadow(0 0 15px rgba(229, 254, 255, 0.8)) brightness(1.1);
        transform: translate(-50%, -50%) scale(1.02);
    }
}

.tx-player-wrapper .fx-screen-main-content {
    transition: opacity 0.3s ease;
    opacity: 0; /* Hidden by default check check */
}

/* Sequential Boot Lighting nizam check check check check check */
.tx-player-wrapper .fx-screen.booting .fx-screen-boot-logo {
    opacity: 1;
}

.tx-player-wrapper .fx-screen.booted .fx-screen-main-content {
    opacity: 1;
}

/* ── Beat Fractions Grid ── */
.tx-player-wrapper .fx-screen-fractions {
    display: flex;
    justify-content: stretch;
    width: 100%;
    margin-top: 0;
    border-top: none;
    border-bottom: none;
    padding: 0;
}
.tx-player-wrapper .fx-fraction {
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    color: rgba(229, 254, 255, 0.7); /* Symmetrical with the digital theme check check check */
    padding: 3px 0;
    text-align: center;
    border: 1px solid rgba(229, 254, 255, 0.3); /* Distinct digital blue borders strictly from request check check check */
    border-radius: 0;
    background: transparent;
    line-height: 1;
}
.tx-player-wrapper .fx-fraction.active {
    background: #e5feff !important; /* Symmetrical with the AUTO badge color check check check */
    color: #000 !important;
    font-weight: 800;
}

/* ── TAP Button (Compact, inside LCD frame) ── */
/* ── TAP/Utility Controls Layout (Side-by-Side Pioneer Formation) ── */
.tx-player-wrapper .fx-screen-controls {
    display: flex;
    justify-content: space-between; /* Strictly push outer groups to edges within padding bounds check check check */
    width: 100%;
    margin-top: 10px;
    align-items: flex-end;
    padding: 0 4px; /* Essential side buffer for concentric rings check check check */
}

.tx-player-wrapper .fx-autotap-group {
    transform: translateX(-5px) !important; /* Pushes left button further out check check check */
}

.tx-player-wrapper .fx-utility-group {
    transform: translateX(5px) !important; /* Pushes right button further out check check check */
}

.tx-player-wrapper .fx-autotap-group,
.tx-player-wrapper .fx-control-group,
.tx-player-wrapper .fx-utility-group {
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

/* ── TAP Button (Pioneer Photorealistic Hardware Reconstruction) check check check */
.tx-player-wrapper .fx-tap-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3A3A3A, #0A0A0A 55%, #000 100%) !important;
    border: none !important;
    color: #CCC !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.15),
        inset 0 -1px 3px rgba(0,0,0,0.9),
        0 0 0 2px #1A1A1A,
        0 0 0 3px #8A8A8A, /* The permanent white/silver ring check check check */
        0 0 0 3.5px #555,
        0 0 0 5px #1A1A1A,
        0 2px 4px 2px rgba(0,0,0,0.5) !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none !important; 
    padding: 0 !important;
    position: relative;
    z-index: 2;
    outline: none !important;
    transform: none !important;
}

/* ── AUTO / TAP (Stealth Black Dome) check check check check ── */
.tx-player-wrapper .fx-autotap-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3A3D40 0%, #1A1D1F 55%, #0A0C0E 100%) !important;
    border: none !important;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.1),
        inset 0 -1px 3px rgba(0,0,0,0.9),
        0 0 0 2px #1A1A1A,
        0 0 0 3px #555,
        0 0 0 4.5px #1A1A1A,
        0 1px 2px 1px rgba(0,0,0,0.6);
    cursor: pointer;
    outline: none !important;
    transition: none !important;
}

.tx-player-wrapper .autotap-label {
    font-size: 6px;
    color: #6A6D70;
    font-weight: 800;
    margin-bottom: 6.5px !important; /* Slightly more vertical breathing room check check check */
    line-height: 1;
    text-align: center;
    letter-spacing: 0.1px;
}
.tx-player-wrapper .fx-utility-btn {
    width: 22px; /* Slightly smaller as per Pioneer hardware mapping check check check */
    height: 22px;
    border-radius: 50%;
    /* RED CENTERED DOME strictly mapped from the reference image check check check check */
    background: radial-gradient(circle at 50% 50%, #FF0000 0%, #CC0000 15%, #2A2E32 18%, #0D0F11 100%);
    border: none !important;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.1),
        inset 0 -1px 3px rgba(0,0,0,0.9),
        0 0 0 2px #1A1A1A,
        0 0 0 3px #555,
        0 0 0 4.5px #1A1A1A,
        0 1px 2px 1px rgba(0,0,0,0.6);
    cursor: pointer;
    outline: none !important;
    transition: none !important;
}

.tx-player-wrapper .fx-utility-btn:active {
    transform: translateY(1px) !important;
}

.tx-player-wrapper .utility-label {
    font-size: 6.5px;
    color: #6A6D70;
    font-weight: 800;
    margin-bottom: 1px !important;
    padding: 0 !important;
    line-height: normal;
    letter-spacing: 0.5px;
    align-self: flex-end; /* Strictly aligns the label with the right edge of the badge check check check */
    width: 100%; /* Ensures the alignment is calculated relative to group width check check */
    text-align: right; /* Forces character-level right alignment check check check */
}

.tx-player-wrapper .wakeup-badge {
    background: #6A6D70;
    color: #000;
    font-size: 7px;
    font-weight: 900;
    padding: 0.5px 2.5px; /* Tightened horizontal padding for a compact printed hardware look check check check */
    border-radius: 1.5px;
    margin-bottom: 6.5px !important;
    letter-spacing: 0px;
    white-space: nowrap;
    display: inline-block;
    line-height: normal;
}

.tx-player-wrapper .fx-tap-btn:hover,
.tx-player-wrapper .fx-tap-btn:focus,
.tx-player-wrapper .fx-autotap-btn:hover,
.tx-player-wrapper .fx-autotap-btn:focus,
.tx-player-wrapper .fx-utility-btn:hover,
.tx-player-wrapper .fx-utility-btn:focus {
    transform: none !important; /* Prevents transform override on hover check check check check */
    outline: none !important;
}

.tx-player-wrapper .fx-autotap-group:hover,
.tx-player-wrapper .fx-utility-group:hover {
    /* Maintains the lateral shift even on hover check check check */
}

.tx-player-wrapper .fx-tap-btn:active {
    transform: translateY(1.5px) !important; 
}

.tx-player-wrapper .fx-autotap-btn:active,
.tx-player-wrapper .fx-utility-btn:active {
    transform: translateY(1px) !important;
}

/* ── FX Selector Wrapper (11-Effect Pioneer Layout) ── */
.tx-player-wrapper .fx-selector-wrapper {
    position: relative;
    width: 52px;
    height: 52px;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    transform: translateY(16px);
}

/* ── FX Labels ── */
.tx-player-wrapper .fx-label {
    position: absolute;
    font-size: 6.5px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #888;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    transition: color 0.15s ease;
}
.tx-player-wrapper .fx-label.fx-active { color: #FFF; }

/* Left column: right-aligned */
.tx-player-wrapper .fx-lbl-l { text-align: right; }
.tx-player-wrapper .fx-lbl-l::after { display: none; }

/* Right column: left-aligned */
.tx-player-wrapper .fx-lbl-r { text-align: left; }
.tx-player-wrapper .fx-lbl-r::before { display: none; }

/* Radial Dial Line */
.tx-player-wrapper .fx-radial-tick {
    position: absolute;
    width: 2px;
    height: 8px; /* ray length */
    background: #888; /* ray color */
    top: 50%;
    left: 50%;
    margin-left: -1px;
    margin-top: -4px;
    pointer-events: none;
    border-radius: 1px;
}
/* ── Reusable Pioneer Selector Knob (Micro Photorealistic) ── */
.tx-player-wrapper .pioneer-knob {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    /* Thin high-gloss outer metallic bezel */
    background: linear-gradient(145deg, #444 0%, #0A0A0A 20%, #000 60%, #111 100%);
    box-shadow:
        0 0 0 1px rgba(80,80,80,0.3),
        inset 0 1px 1px rgba(255,255,255,0.08);
    position: relative;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.3, 0.8, 0.3, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    flex-shrink: 0;
}

/* Inner Asymmetric Slanted Body */
.tx-player-wrapper .pioneer-knob-cap {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* Creating the slanted 3D surface with offset gradients */
    background: 
        radial-gradient(circle at 70% 80%, rgba(255,255,255,0.04) 0%, transparent 60%),
        linear-gradient(160deg, #333 0%, #0A0A0A 50%, #000 100%);
    box-shadow: 
        inset 0 1px 3px rgba(255,255,255,0.1),
        inset 0 -2px 5px rgba(0,0,0,0.9),
        0 1px 1px rgba(0,0,0,0.3);
    position: absolute;
}

/* Central Textured Hub */
.tx-player-wrapper .pioneer-knob-cap::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px; /* Rescaled for 42px knob */
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #252525 0%, #0A0A0A 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.8);
    opacity: 0.9;
}

/* Hardware Selector Indicator Line (Long & Pronounced) */
.tx-player-wrapper .pioneer-knob-line {
    position: absolute;
    width: 2.5px;
    height: 16px; /* Rescaled for 42px knob */
    background: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
    border-radius: 1px;
    top: 3.5px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 
        0 0 3px rgba(255,255,255,0.3),
        0 1px 1px rgba(0,0,0,0.5);
    z-index: 10;
}

/* ── Reusable Phillips-Head Screw Component ── */
.tx-player-wrapper .hw-screw {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* Dark metallic dome surface */
    background: radial-gradient(circle at 40% 38%, #3A3A3A, #252525 45%, #181818 75%, #111);
    /* Prominent chrome rim ring + recessed inset */
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.25),
        0 0 0 2.5px #111,
        inset 0 1px 1px rgba(255,255,255,0.12),
        inset 0 -1px 2px rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.tx-player-wrapper .hw-screw span {
    font-size: 11px;
    font-weight: 700;
    color: #111;
    text-shadow: 0 0.5px 0 rgba(255,255,255,0.06);
    line-height: 1;
    margin-top: -1px;
}
/* Screws positioned strictly OUTSIDE the functional content bounds (dashed lines) */
.tx-player-wrapper .hw-screw-tl { top: -2px; left: -14px; }
.tx-player-wrapper .hw-screw-tr { top: -2px; right: -18px; }
.tx-player-wrapper .hw-screw-bl { bottom: 1px; left: -14px; }
.tx-player-wrapper .hw-screw-br { bottom: 1px; right: -18px; }

/* Each screw's crosshead is rotated to a unique angle — simulating hand-tightened hardware */
.tx-player-wrapper .hw-screw-tl span { transform: rotate(23deg); }
.tx-player-wrapper .hw-screw-tr span { transform: rotate(-67deg); }
.tx-player-wrapper .hw-screw-bl span { transform: rotate(41deg); }
.tx-player-wrapper .hw-screw-br span { transform: rotate(-12deg); }

/* FX Footer Controls — Horizontal layout for ON/OFF and LEVEL/DEPTH */
.tx-player-wrapper .fx-footer-controls {
    display: flex;
    justify-content: flex-end; /* Shifting BOTH to the right extreme check check check check check check */
    align-items: flex-end;
    width: 100%;
    margin-top: auto;
    padding-bottom: 5px;
    padding-left: 30px; /* Strong push from the left check check check check check check */
    padding-right: 15px; /* Subtle shift left from the right edge for better hardware balance check check check */
}

/* ON/OFF Growing Acrylic Actuator strictly mapped from sample geometry */
.tx-player-wrapper .fx-onoff-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
    margin-right: 20px; /* Maintained gap between the duo during the shift check check check check check check */
}

/* ── LEVEL / DEPTH Pioneer Section (Compact Photorealistic Reference Match) ── */
.tx-player-wrapper .fx-depth-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px; /* Shifting significantly to the right as requested check check check check check check */
    margin-bottom: 2px;
}

.tx-player-wrapper .fx-depth-label {
    font-size: 8px;
    font-weight: 800;
    color: #AAA;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap; /* Force to single flat line as requested check check check check check check */
    display: block;
    width: max-content;
}

.tx-player-wrapper .fx-depth-knob-container {
    position: relative;
    width: 60px;
    height: 48px; /* Reduced from 60 to bring bottom labels closer */
    display: flex;
    justify-content: center;
    align-items: center;
}

.tx-player-wrapper .fx-depth-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.tx-player-wrapper .fx-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, #E0E0E0 30%, #999 100%);
    border-radius: 50%;
    margin-left: -1.5px;
    margin-top: -1.5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Static scale marks below the knob */
.tx-player-wrapper .depth-scale-marks {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.tx-player-wrapper .depth-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5px;
    height: 6px;
    background: rgba(200, 200, 200, 0.35);
    margin-left: -0.75px;
    margin-top: -3px;
    border-radius: 1px;
}

/* Outer bezel ring + dark channel floor — Scaled to 36px (matches ON/OFF btn ring) */
.tx-player-wrapper .pioneer-depth-knob {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* Dark channel visible between bezel and scalloped cap */
    background:
        radial-gradient(circle, #0D0D0D 0%, #0D0D0D 78%, transparent 79%),
        linear-gradient(160deg, #444 0%, #333 20%, #222 60%, #2A2A2A 100%);
    box-shadow:
        0 0 0 1px rgba(80,80,80,0.3),
        inset 0 1px 1px rgba(255,255,255,0.06),
        inset 0 -1px 2px rgba(0,0,0,0.6);
    position: relative;
    cursor: grab;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* Scalloped / gear-grip cap — Scaled proportionally */
.tx-player-wrapper .depth-knob-cap {
    width: 28px;
    height: 28px;
    position: relative;
    /* 12-lobe scalloped shape via clip-path — Scaled path */
    clip-path: path('M 14 3.5 Q 17.47 1.04 19.25 4.9 Q 23.48 4.5 23.09 8.75 Q 26.96 10.53 24.5 14 Q 26.96 17.47 23.09 19.25 Q 23.48 23.48 19.25 23.09 Q 17.47 26.96 14 24.5 Q 10.53 26.96 8.75 23.09 Q 4.5 23.48 4.9 19.25 Q 1.04 17.47 3.5 14 Q 1.04 10.53 4.9 8.75 Q 4.5 4.5 8.75 4.9 Q 10.53 1.04 14 3.5 Z');
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.07) 0%, transparent 55%),
        radial-gradient(circle at 65% 70%, rgba(0,0,0,0.15) 0%, transparent 55%),
        linear-gradient(145deg, #3A3A3A 0%, #2E2E2E 40%, #1E1E1E 100%);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.08),
        inset 0 -2px 4px rgba(0,0,0,0.9);
}

/* Embossed pointer indicator — Scaled */
.tx-player-wrapper .depth-knob-line {
    position: absolute;
    top: 3px;
    left: 50%;
    width: 2px;
    height: 10px;
    background: linear-gradient(180deg, #FFFFFF 0%, #D8D8D8 100%);
    margin-left: -1px;
    border-radius: 1px;
    box-shadow:
        0 0 3px rgba(255,255,255,0.35),
        0 1px 1px rgba(0,0,0,0.4);
    z-index: 6;
}

.tx-player-wrapper .fx-depth-limits {
    display: flex;
    justify-content: space-between;
    width: 60px;
    margin-top: 2px;
}

.tx-player-wrapper .fx-depth-limits span {
    font-size: 8px;
    font-weight: 700;
    color: #c4c4c4;
    letter-spacing: 0.4px;
    font-family: Arial, sans-serif;
}


.tx-player-wrapper .fx-btn-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,0.1), /* The cutout flare check check check */
        inset 0 1px 8px rgba(0,0,0,0.9),       /* Unified LCD cutout look check check check */
        0 0 0 1px #5a2800,
        0 0 0 2px #0a0500,
        0 0 0 5.5px #6d3400,
        0 0 0 6.5px #111;
    position: relative;
}

.tx-player-wrapper .fx-onoff-btn {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* Center button — bright amber glow */
    background: radial-gradient(circle at 50% 42%, #FFE070 0%, #FFB000 30%, #E65A00 70%, #762200 100%);
    border: none;
    box-shadow: inset 0 0 8px rgba(255,255,255,0.35);
    cursor: pointer;
    transition: none !important;
    transform: none !important;
    position: relative; /* Container for glass shine check check check */
    overflow: hidden;   /* Clips glass shine to button borders check check check */
}

/* Realistic surface reflection shine for FX ON/OFF button check check check check */
.tx-player-wrapper .fx-onoff-btn::after {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0; height: 50%;
   background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, transparent 100%);
   pointer-events: none;
}

/* 1. LOCK DOWN HOVER: Zero movement when not toggled */
.tx-player-wrapper .fx-onoff-btn:not(.active):hover,
.tx-player-wrapper .fx-onoff-btn:not(.active):active,
.tx-player-wrapper .fx-onoff-btn:not(.active):focus {
   transform: none !important;
   transition: none !important;
   outline: none !important;
}

/* 2. ACTIVE STATE: Only button dips inward, rings stay fixed */
.tx-player-wrapper .fx-onoff-btn.active,
.tx-player-wrapper .fx-onoff-btn.active:hover,
.tx-player-wrapper .fx-onoff-btn.active:active,
.tx-player-wrapper .fx-onoff-btn.active:focus {
   transform: scale(0.92) !important;
   animation: fx-btn-pulse 0.5s infinite;
   transition: none !important;
}

/* Brilliant luminescent pulse — only the inner button glows */
@keyframes fx-btn-pulse {
    0%, 100% {
        background: radial-gradient(circle at 50% 42%, #FFE070 0%, #FFB000 30%, #E65A00 70%, #762200 100%);
        box-shadow:
            inset 0 0 12px rgba(255,255,255,0.5),
            0 0 10px rgba(255, 100, 0, 0.6);
    }
    50% {
        background: radial-gradient(circle at 50% 42%, #7A4200 0%, #2A1000 100%);
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,0.1),
            0 0 2px rgba(255, 100, 0, 0.1);
    }
}

/* ══════════════════════════════════════════════════════════
   Silver Metallic Knob Component
   ══════════════════════════════════════════════════════════ */

/* Panel — Perforated dot metal background (LANDSCAPE orientation) */
/* Stack wrapper — CUE button above the dotted panel */
.tx-player-wrapper .silver-knob-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.93);
    transform-origin: center;
}

/* Panel — Perforated dot metal background (LANDSCAPE orientation) */
.tx-player-wrapper .silver-knob-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-color: #0a0a0a;
    background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px);
    background-size: 5px 5px;
    padding: 8px 30px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.04);
    min-width: 130px;
}

/* Title — "COLOR" position (becomes LOW / MID / HI) */
.tx-player-wrapper .silver-knob-title {
    color: #fff;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 12px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    text-transform: uppercase;
    background: #000;
    padding: 0px 0px 0px 1px; /* 1px left, 0 right (letter spacing fills it) */
    border-radius: 1px;
    line-height: 1.1; /* Tightly binds text vertically */
    display: inline-block;
    padding-bottom: 0px; 
}

/* Wrap — inherits eq-knob sizing so the SVG arc still works */
.tx-player-wrapper .silver-knob-wrap {
    margin-bottom: 2px;
}

/* Hide dB value inside silver panel to keep it compact */
.tx-player-wrapper .silver-knob-panel .eq-knob-value {
    display: none;
}

/* ── The Dial: Mathematically Perfect 14-Scallop Brushed Chrome ── */
.tx-player-wrapper .silver-knob-dial {
    width: 58px !important;
    height: 58px !important;
    background:
        /* Hot-spot highlight (upper-left light source) */
        radial-gradient(circle at 38% 35%, rgba(255,255,255,0.45) 0%, transparent 50%),
        /* Primary brushed metal sunburst */
        conic-gradient(
            from 180deg,
            #aaa 0%, #e8e8e8 6%, #999 12%, #ddd 20%,
            #777 28%, #f5f5f5 36%, #aaa 44%,
            #e0e0e0 52%, #888 60%, #eee 68%,
            #999 76%, #ddd 84%, #aaa 92%, #ccc 100%
        ) !important;
    border-radius: 50% !important;
    /* 84-point smooth 14-scallop polygon — shallow rounded indentations */
    clip-path: polygon(
        50.0% 1.0%, 53.6% 2.0%, 56.9% 4.1%, 60.1% 5.6%, 63.7% 5.7%, 67.6% 5.2%,
        71.3% 5.9%, 74.1% 8.3%, 76.1% 11.7%, 78.4% 14.4%, 81.5% 16.0%, 85.3% 17.3%,
        88.3% 19.4%, 89.8% 22.9%, 90.2% 26.8%, 91.0% 30.3%, 93.2% 33.1%, 96.0% 35.8%,
        97.8% 39.1%, 97.6% 42.8%, 96.2% 46.5%, 95.5% 50.0%, 96.2% 53.5%, 97.6% 57.2%,
        97.8% 60.9%, 96.0% 64.2%, 93.2% 66.9%, 91.0% 69.7%, 90.2% 73.2%, 89.8% 77.1%,
        88.3% 80.6%, 85.3% 82.7%, 81.5% 84.0%, 78.4% 85.6%, 76.1% 88.3%, 74.1% 91.7%,
        71.3% 94.1%, 67.6% 94.8%, 63.7% 94.3%, 60.1% 94.4%, 56.9% 95.9%, 53.6% 98.0%,
        50.0% 99.0%, 46.4% 98.0%, 43.1% 95.9%, 39.9% 94.4%, 36.3% 94.3%, 32.4% 94.8%,
        28.7% 94.1%, 25.9% 91.7%, 23.9% 88.3%, 21.6% 85.6%, 18.5% 84.0%, 14.7% 82.7%,
        11.7% 80.6%, 10.2% 77.1%, 9.8% 73.2%, 9.0% 69.7%, 6.8% 66.9%, 4.0% 64.2%,
        2.2% 60.9%, 2.4% 57.2%, 3.8% 53.5%, 4.5% 50.0%, 3.8% 46.5%, 2.4% 42.8%,
        2.2% 39.1%, 4.0% 35.8%, 6.8% 33.1%, 9.0% 30.3%, 9.8% 26.8%, 10.2% 22.9%,
        11.7% 19.4%, 14.7% 17.3%, 18.5% 16.0%, 21.6% 14.4%, 23.9% 11.7%, 25.9% 8.3%,
        28.7% 5.9%, 32.4% 5.2%, 36.3% 5.7%, 39.9% 5.6%, 43.1% 4.1%, 46.4% 2.0%
    ) !important;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,0.8),
        0 3px 10px rgba(0,0,0,0.9) !important;
    border: none !important;
}

/* Inner brushed cap — second metallic layer for depth */
.tx-player-wrapper .silver-knob-cap {
    width: 74%;
    height: 74%;
    background:
        radial-gradient(circle at 40% 38%, rgba(255,255,255,0.22) 0%, transparent 55%),
        conic-gradient(from 60deg, #aaa, #e0e0e0 18%, #888 36%, #f0f0f0 54%, #999 72%, #ddd 90%, #aaa);
    border-radius: 50%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.45), 0 1px 1px rgba(255,255,255,0.2);
}

/* White position indicator line — rectangular strip matching reference */
.tx-player-wrapper .silver-knob-line {
    background: linear-gradient(180deg, #f8f8f8, #ccc) !important;
    width: 4px !important;
    height: 20px !important;
    top: 5px !important;
    border-radius: 1.5px !important;
    box-shadow: 0 0 4px rgba(255,255,255,0.7), -1px 0 2px rgba(0,0,0,0.3), 1px 0 2px rgba(0,0,0,0.3) !important;
    border: none !important;
}

/* ── Waveform Comments ───────────────── */
.tx-player-wrapper .waveform-comments {
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    height: 64px;
    pointer-events: none;
    z-index: 1000;
}

.tx-player-wrapper .comment-avatar {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background-color: #333;
    overflow: visible !important;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s, box-shadow 0.2s;
    top: 65%;
    margin-top: 3px;
    transform: translate(-50%, 0);
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
    z-index: 500;
}

.tx-player-wrapper .comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.tx-player-wrapper .comment-avatar:hover {
    border-color: #fff;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.5);
    transform: translate(-50%, -2px) scale(1.1);
}

.tx-player-wrapper .comment-tooltip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scaleX(0.9);
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 
        opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0.2s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 999999;
    height: 24px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    width: max-content;
}

/* Side positioning using data attributes */
.tx-player-wrapper .comment-tooltip[data-side="right"] {
    left: calc(100% + 10px);
    transform-origin: left center;
}
.tx-player-wrapper .comment-tooltip[data-side="left"] {
    right: calc(100% + 10px);
    transform-origin: right center;
}

.tx-player-wrapper .comment-avatar:hover .comment-tooltip,
.tx-player-wrapper .comment-avatar.active .comment-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scaleX(1);
}

/* Tooltip Arrows (Triangles) */
.tx-player-wrapper .comment-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
}

.tx-player-wrapper .comment-tooltip[data-side="right"]::after {
    right: 100%;
    border-right-color: rgba(255, 255, 255, 0.15); /* matching border */
}
.tx-player-wrapper .comment-tooltip[data-side="left"]::after {
    left: 100%;
    border-left-color: rgba(255, 255, 255, 0.15); /* matching border */
}

.tx-player-wrapper .comment-tooltip-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    white-space: nowrap;
    width: max-content;
    flex-shrink: 0;
}

.tx-player-wrapper .comment-user {
    font-weight: 800;
    color: #ff5500;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.tx-player-wrapper .comment-body {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 0;
}
}