/*
 ©Copyright 2026 John Anthony Papa - Proprietary and Confidential
*/

/* MetaDJ.org deck layout.
   Every deck is a normal MetaDJ card (the .container from /page.css, with the
   player layout from /player/player.css inside the mix deck). This file only
   places the three cards: it does not restyle the card itself. */

:root {
   --deck-gap: 16px;
   --deck-width: calc(275pt + 6px);   /* the .live card width */
   /* Three cards plus two gaps plus 16px of margin each side. Below this width
      the cards no longer fit side by side and the page switches to swiping. */
   --three-decks: calc(3 * var(--deck-width) + 2 * var(--deck-gap) + 32px);
}

/* Desktop: three cards in a row, centered in the window. */
.decks {
   position: relative;
   z-index: 5;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: var(--deck-gap);
   height: 100vh;
   height: 100svh;
}
.deck {
   flex: none;
}
/* The shared card is absolutely centered on .live; here it sits in the flow.
   Size matches the .live card: 275pt wide, up to 644px tall. */
.deck .container {
   position: relative;
   top: auto; right: auto; bottom: auto; left: auto;
   margin: 0;
   width: var(--deck-width);
   height: min(644px, calc(100vh - 16px));
   height: min(644px, calc(100svh - 16px));
}

/* Deck anatomy for decks 1 and 2 only (class .anatomy); the mix deck keeps the
   original player layout. Below the header (the top 10.5% of the card) the card is split
   into three parts: picture 25%, scroll area 50%, control area 25%. The picture
   sits directly under the header. A frame goes around the whole card and a
   divider line separates the parts. All three parts use the same fractions of
   the card, so every deck lines up. */
.deck.anatomy .container {
   --head: 5.25%;   /* half of the 10.5% header on the mix deck */
   --body: 89.5%;
   --line: 2px solid #707070;
   /* Top of the info area. Chosen so the bottom of the track picture (2px border
      + 20px padding + the picture's own 15.8cqw) lands on the bottom of the mix
      deck's picture (5.25% + 100cqw). */
   --box2-top: calc(5.25% + 100cqw - 22px - 15.8cqw);
}
.deck.anatomy .box1 { height: 6%; }
.deck.anatomy .graphic {
   top: var(--head);
   height: calc(var(--body) * 0.125);
   aspect-ratio: auto;
}
.deck.anatomy .scroll-area {
   position: absolute;
   box-sizing: border-box;
   left: 6px;
   width: calc(100% - 12px);
   top: calc(var(--head) + var(--body) * 0.125);
   height: calc(var(--box2-top) - var(--head) - var(--body) * 0.125 - 28px);   /* list fills down to the info area, 28px of space under it */
   overflow-y: auto;
   border-top: var(--line);
   border-bottom: var(--line);
   z-index: 5;
}
.deck.anatomy .box2 {
   top: var(--box2-top);
   height: auto;
   bottom: 0;
   border-top: var(--line);
   box-sizing: border-box;
}
/* The frame around the whole deck. */
.deck.anatomy .container::after {
   content: "";
   position: absolute;
   inset: 0;
   border: 2px solid #9a9a9a;
   border-radius: inherit;
   pointer-events: none;
   z-index: 20;
}

/* Deck contents (placeholders, nothing is wired yet).
   Top 12.5% of the body: visualizer placeholder, drawn as static bars.
   Next 25%: the track list, a scrolling region.
   Bottom 62.5%: the selected track's graphic, left side on the left deck and
   right side on the right deck. */
.deck.anatomy .viz {
   background: #000;
   cursor: pointer;
   touch-action: none;
   user-select: none;
}
/* Track graphic: one bar per slice of the track. Bars up to the play
   position are bright, the rest dim. Clicking or dragging sets the position. */
.deck.anatomy .viz .wave {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   gap: 1px;
   padding: 4px 2px;
}
.deck.anatomy .viz .wave i {
   flex: 1 1 0;
   background: #3a3a8a;
   border-radius: 1px;
}
.deck.anatomy .viz .wave i.played { background: #8c8cff; }
.deck.anatomy .viz .playhead {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 2px;
   margin-left: -1px;
   background: #ffffff;
   pointer-events: none;
}
.deck.anatomy .viz:focus-visible { outline: 2px solid #8c8cff; outline-offset: 2px; }
.deck.anatomy .tracklist {
   list-style: none;
   margin: 0;
   padding: 0;
   font: 12px Verdana, sans-serif;
   color: #ffffff;
}
.deck.anatomy .tracklist li {
   padding: 8px 10px;
   border-bottom: 1px solid #333333;
}
.deck.anatomy .tracklist li.selected {
   background: #2a2a5a;
}
.deck.anatomy .box2 {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 20px 10px 10px;   /* extra top padding keeps the info clear of the button pills */
}
.deck.anatomy .track-art {
   flex: none;
   align-self: flex-start;   /* keeps its old size now that the area is taller */
   width: 15.8cqw;   /* half the old 31.6cqw */
   aspect-ratio: 1;
   height: auto;
   border: 4px ridge #707070;
   box-sizing: border-box;
}
/* Selected track info, placeholder text, next to the graphic. */
.deck.anatomy .track-info, .mix-track-info {
   flex: 1;
   min-width: 0;
   font: 12px Verdana, sans-serif;
   color: #ffffff;
   text-shadow: 1px 1px 2px #000;
}
.deck.anatomy .info-title, .mix-track-info .info-title { font-weight: bold; font-size: 13px; margin-bottom: 4px; }
.deck.anatomy .info-line, .mix-track-info .info-line { margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dark scrollbar for the track list. Firefox and Safari use the standard
   properties, Chrome-based browsers use the webkit pseudo-elements. */
.deck.anatomy .scroll-area {
   scrollbar-width: thin;
   scrollbar-color: #5a5a5a #101010;
}
.deck.anatomy .scroll-area::-webkit-scrollbar { width: 10px; }
.deck.anatomy .scroll-area::-webkit-scrollbar-track { background: #101010; }
.deck.anatomy .scroll-area::-webkit-scrollbar-thumb {
   background: #5a5a5a;
   border: 2px solid #101010;
   border-radius: 5px;
}

/* Mix deck: same half-height header as decks 1 and 2 (5.25%), so the picture
   moves up under it and the control band follows the square picture. */
.deck.slim .box1 { height: 6%; }
.deck.slim .container {
   --control-top: calc(5.25% + 100cqw);
}
.deck.slim .graphic { top: 5.25%; }

/* Narrow windows and phones: one deck per screen, swipe left or right.
   The row scrolls sideways and snaps so a deck always lands centered. */
@media (max-width: 1180px) {
   .decks {
      justify-content: flex-start;
      gap: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }
   .decks::-webkit-scrollbar { display: none; }
   .deck {
      flex: 0 0 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      scroll-snap-align: center;
      scroll-snap-stop: always;
   }
   .deck .container {
      width: min(373px, calc(100vw - 16px));
   }
}

/* Deck arrows for the one-deck view. Hidden on wide screens, where all three decks show.
   On narrow screens they sit at the left and right edge, centered up and down; org.js
   hides the left one on deck ONE and the right one on deck TWO. Same white text with
   a black glow as the menu links. */
.deck-nav { display: none; }
@media (max-width: 1180px) {
   .deck-nav {
      display: block;
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      width: 30px;
      height: 64px;
      padding: 0 0 6px;
      border: 0;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.45);
      color: white;
      font: bold 34px/64px Verdana, sans-serif;
      text-shadow: 0 0 3px #000000, 0 0 4px #000000, 0 0 5px #000000;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
   }
   .deck-nav-left { left: 2px; }
   .deck-nav-right { right: 2px; }
   .deck-nav:hover, .deck-nav:focus-visible { background: rgba(0, 0, 0, 0.7); }
   .deck-nav[hidden] { display: none; }
}

/* Track rows in decks 1 and 2 are clickable. */
.deck.anatomy .tracklist li { cursor: pointer; }
.deck.anatomy .tracklist li:hover { background: #1c1c3c; }
.deck.anatomy .tracklist li.selected:hover { background: #2a2a5a; }

/* Crossfader (mix deck control area). A plain range input, restyled dark. */
.crossfader {
   position: absolute;
   left: 88px;      /* AUTO moves inward, leaving the outer position for HP/LP */
   right: 88px;
   /* Same spot as the play buttons on decks 1 and 2: the fader track is centered
      on the play button's center line (66px up from the bottom of the control area). */
   top: calc(100% - 66px - 17px - 8px);   /* centered 8px above the play-button line, for room above the footer */
   display: flex;
   flex-direction: column-reverse;   /* labels go under the bar */
}
.xf-labels {
   display: flex;
   justify-content: space-between;
   margin-top: -4px;   /* the slider box has spare room under its thumb */
   font: bold 12px Verdana, sans-serif;
   color: #ffffff;
   text-shadow: 1px 1px 2px #000;
}
#crossfader,
.gain-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 34px;
   margin: 0;
   background: transparent;
   cursor: pointer;
   touch-action: pan-y;   /* a sideways drag moves the fader, not the deck swipe */
}
#crossfader::-webkit-slider-runnable-track,
.gain-slider::-webkit-slider-runnable-track {
   height: 8px;
   background: #101010;
   border: 2px solid #707070;
   border-radius: 5px;
}
#crossfader::-moz-range-track,
.gain-slider::-moz-range-track {
   height: 8px;
   background: #101010;
   border: 2px solid #707070;
   border-radius: 5px;
}
#crossfader::-webkit-slider-thumb,
.gain-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 30px;
   height: 30px;
   margin-top: -13px;
   background: linear-gradient(#b8b8b8, #6a6a6a);
   border: 2px ridge #d0d0d0;
   border-radius: 5px;
   box-shadow: 2px 2px 3px #000;
}
#crossfader::-moz-range-thumb,
.gain-slider::-moz-range-thumb {
   width: 26px;
   height: 26px;
   background: linear-gradient(#b8b8b8, #6a6a6a);
   border: 2px ridge #d0d0d0;
   border-radius: 5px;
   box-shadow: 2px 2px 3px #000;
}
#crossfader:focus-visible,
.gain-slider:focus-visible { outline: 2px solid #5a5ab0; outline-offset: 2px; }

/* Shared control skin, matching .live's silver/glass artwork. Existing
   classes keep the same sizes/positions, mobile and desktop alike. */
.mix-btn, .deck.anatomy .bpm-btn {
   background: radial-gradient(circle at 40% 30%, #e0e0e0, #adadad 65%, #858585);
   border: 2px solid #a8aaa7;
   border-top-color: #e1e3df; border-left-color: #c4c7c0;
   border-right-color: #62675f; border-bottom-color: #62675f;
   box-shadow: inset 1px 1px 2px #f3f4ef, inset -1px -1px 3px #555b50, 2px 2px 3px #000;
   color: #292929; text-shadow: 0 1px 1px #eeeeee;
}
.mix-btn { border-radius: 50%; }
.deck.anatomy .bpm-btn { border-radius: 8px; }
.play-btn {
   background: transparent url('player/image/play.webp?v=icons-20261012-1') center / contain no-repeat;
   border: 0; border-radius: 0; box-shadow: none;
}

/* Mix deck round buttons (the SYNC pair and the HP/LP pair). Placeholders: no
   action yet except the HP/LP colour toggle. */
.mix-btn {
   width: 27px;    /* 25% smaller than the first 36px */
   height: 27px;
   padding: 0;
   
   
      /* round buttons */
   
   cursor: pointer;
   
   font: bold 12px Verdana, sans-serif;
}
/* SYNC wrappers share label styling; the transport group supplies positions. */
.sync { position: absolute; top: 10px; width: 27px; display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; }   /* 27px = the button, so the label width cannot shift the button off the column */
.sync-left { left: 12px; }    /* same edge offset as the AUTO buttons, so all three line up */
.sync-right { right: 12px; }
.sync-label { font: bold 10px Verdana, sans-serif; color: #ffffff; text-shadow: 1px 1px 2px #000; }
/* HP/LP shares the two-action rows beside the crossfader. Its final
   position is defined with the mix transport layout below. Selection
   changes the HP or LP label to red through org.js. */
.hplp .hp.on,
.hplp .lp.on { color: #ff5555; }
.xf-go { position: absolute; top: calc(100% - 74px - 13.5px); z-index: 1; margin: 0; }   /* centred on the crossfader bar */
.xf-go-left { left: 68px; }
.xf-go-right { right: 68px; }
/* "AUTO" label over each auto-crossfade button: same label style as SYNC and HP/LP
   (.sync-label), centred over the button and just above it. */
.xf-auto { position: absolute; top: calc(100% - 74px - 13.5px - 15px); width: 27px; text-align: center; z-index: 1; pointer-events: none; }
.xf-auto-left { left: 68px; }
.xf-auto-right { right: 68px; }
.sync.on .sync-label { color: #4da3ff; }   /* SYNC is on */
.sync.on .mix-btn { background: radial-gradient(circle at 40% 30%, #d3edff, #87badc 65%, #4b809f); }
.mix-btn:hover { filter: brightness(1.12); }
.mix-btn:active { filter: brightness(0.9); }
.mix-btn:focus-visible { outline: 2px solid #5a5ab0; outline-offset: 2px; }

/* Shared play/pause appearance; position is supplied by its mix-side group.
   The icon is drawn with CSS: a triangle when paused (shows "play"), two
   bars when playing (shows "pause"). */
.play-btn {
   position: absolute;
   left: 50%;
   top: calc(100% - 66px);   /* sits under the EQ sliders, 9px above the footer band */
   transform: translate(-50%, -50%);
   width: 44px;
   height: 44px;
   padding: 0;
   
   
   
   
   cursor: pointer;
}
.play-btn:hover { filter: brightness(1.12); }
.play-btn:active { filter: brightness(0.9); }
.play-btn:focus-visible { outline: 2px solid #5a5ab0; outline-offset: 2px; }

/* Seven vertical EQ sliders, centered above the play button. The thumb reuses
   the crossfader's grey bevel. */
.deck.anatomy .eq {
   position: absolute;
   left: 50%;
   top: 96px;   /* 16px under the track picture */
   transform: translateX(-50%);
   display: flex;
   gap: 4px;
}
/* Equal padding on each side of the EQ group as a whole (about 50px): on deck 1
   between the deck edge and the EQ, and between the EQ and the HP / LP slider;
   deck 2 is the mirror image. So the EQ sits 13px off centre, away from its
   HP / LP slider. */
#deck1 .eq { left: calc(50% - 13px); }
#deck2 .eq { left: calc(50% + 13px); }
.deck.anatomy .eq-band { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.deck.anatomy .eq-slider {
   position: relative;
   width: 8px;
   height: 96px;
   margin: 0 9px;
   background: #101010;
   border: 2px solid #707070;
   border-radius: 5px;
   cursor: pointer;
   touch-action: none;   /* dragging moves the slider, not the page */
}
.deck.anatomy .eq-thumb {
   position: absolute;
   left: 50%;
   width: 26px;
   height: 20px;
   margin-left: -15px;
   margin-bottom: -10px;
   box-sizing: border-box;
   background: linear-gradient(#b8b8b8, #6a6a6a);
   border: 2px ridge #d0d0d0;
   border-radius: 4px;
   box-shadow: 2px 2px 3px #000;
   pointer-events: none;
}
.deck.anatomy .eq-slider:focus-visible { outline: 2px solid #5a5ab0; outline-offset: 3px; }
.deck.anatomy .eq-label { font: bold 10px Verdana, sans-serif; color: #d0d0d0; text-shadow: 1px 1px 2px #000; }

/* Short status message (for example "Loaded 8 tracks"). */
.deck.anatomy .list-note {
   position: absolute;
   left: 16px;
   right: 16px;
   top: calc(var(--box2-top) - 22px);   /* inside the bottom of the track list, clear of the track info */
   z-index: 8;
   font: 11px Verdana, sans-serif;
   color: #ffffff;
   text-shadow: 1px 1px 2px #000;
   pointer-events: none;
}


.deck.anatomy .box2 .track-art,
.deck.anatomy .box2 .track-info { position: relative; z-index: 1; }
.deck.anatomy .eq,
.play-btn,
.crossfader,
.sync { z-index: 1; }

/* Play indicator in the header of decks 1 and 2 (deck.js): a round bevelled
   light like the mix buttons. Red while stopped, green while playing. Deck 1
   has it on the right and deck 2 on the left. While playing, the track list is
   locked (deck.js ignores clicks), so the rows get a not-allowed cursor and
   the hover highlight is turned off. */
.deck.anatomy .play-led {
   position: absolute;
   top: 9px;
   width: 20px;
   height: 20px;
   box-sizing: border-box;
   border: 2px ridge #d0d0d0;
   border-radius: 50%;
   background: radial-gradient(circle at 35% 30%, #ff9a9a, #d01818 55%, #6a0a0a);
   box-shadow: 2px 2px 3px #000;
   z-index: 7;
   pointer-events: none;
}
#deck1 .play-led { right: 14px; }
#deck2 .play-led { left: 14px; }
.deck.anatomy.playing .play-led {
   background: radial-gradient(circle at 35% 30%, #a8ffa8, #18b818 55%, #0a5a0a);
   box-shadow: 2px 2px 3px #000, 0 0 8px #30e030;
}
.deck.anatomy.playing .tracklist li { cursor: not-allowed; }
.deck.anatomy.playing .tracklist li:hover { background: transparent; }
.deck.anatomy.playing .tracklist li.selected:hover { background: #2a2a5a; }

/* Gain slider on decks 1 and 2 (deck.js): a horizontal slider alongside
   the percentage readout in the old transport position, with a small
   GAIN label under it. The bar and thumb use the same rules as the crossfader
   (shared selectors above). */
.deck.anatomy .gain {
   position: absolute;
   top: calc(100% - 66px - 17px);   /* bar centered on the play button's line */
   display: flex;
   flex-direction: column-reverse;
   z-index: 1;
}
#deck1 .gain { left: 12px; right: 66px; }
#deck2 .gain { right: 12px; left: 66px; }
/* Mirrored play triangle on TWO; pause bars are symmetric. */
.gain-slider { width: 100%; }
.gain-label {
   margin-top: -4px;
   text-align: center;
   font: bold 10px Verdana, sans-serif;
   color: #ffffff;
   text-shadow: 1px 1px 2px #000;
}

/* Pause blocked (deck.js): the deck is playing and the crossfader is not all
   the way over to the other deck, so the play button is dimmed and a click
   only shows a short message in the gain label's place (class "note"). */
.play-btn.blocked { opacity: 0.45; cursor: not-allowed; }
.gain-label.note {
   color: #ffd479;
   white-space: nowrap;
   /* Dark backing keeps control text readable. */
   align-self: center;
   padding: 1px 8px;
   background: rgba(0, 0, 0, 0.75);
   border-radius: 8px;
   text-shadow: none;
}

/* BPM box in the upper right of the track info area on decks 1 and 2
   (deck.js): same dark box look as the other readouts. The title line keeps
   clear of it with right padding. */
.deck.anatomy .bpm-box {
   position: absolute;
   top: 12px;
   right: 10px;
   box-sizing: border-box;
   width: 70px;   /* matches the full minus/indicator/plus row below */
   height: 22px;
   padding: 0 8px;
   background: #101010;
   border: 2px solid #707070;
   border-radius: 5px;
   font: bold 11px/18px Verdana, sans-serif;
   color: #ffffff;
   text-align: center;
   text-shadow: 1px 1px 2px #000;
   z-index: 1;
}
.deck.anatomy .info-title { padding-right: 78px; }   /* clear the aligned 70px BPM controls */

/* Shared tempo controls: 26px buttons + 14px indicator + two 2px gaps =
   70px, with both outer edges aligned to the BPM box above. */
.deck.anatomy .bpm-btns { position: absolute; top: 40px; right: 10px; width: 70px; display: flex; gap: 2px; align-items: center; z-index: 1; }
.deck.anatomy .bpm-btn {
   flex: 1; height: 22px; padding: 0; box-sizing: border-box; cursor: pointer;
     
   font: bold 14px/16px Verdana, sans-serif;  
}
.deck.anatomy .bpm-btn:hover { filter: brightness(1.12); }
.deck.anatomy .bpm-btn:active { filter: brightness(0.9); }

/* Gain readout now occupies the vacated transport position, toward the mix
   on each track deck. Its centre stays on the gain-slider line. */
.deck.anatomy .gain-value {
   position: absolute;
   top: calc(100% - 66px - 17px + 6px);   /* centred on the slider bar */
   width: 44px;
   height: 22px;
   box-sizing: border-box;
   background: #101010;
   border: 2px solid #707070;
   border-radius: 5px;
   font: bold 9px/18px Verdana, sans-serif;
   color: #ffffff;
   text-align: center;
   text-shadow: 1px 1px 2px #000;
   z-index: 1;
}
#deck1 .gain-value { right: 12px; }
#deck2 .gain-value { left: 12px; }

/* Deck header: the title (ONE, MetaDJ, TWO) is centered, across and up and down, in the
   header bar (5.25% tall, the same height the pictures start at). On the mix deck the
   signed-in user name follows MetaDJ on the same line, as "MetaDJ name"
   (.title-user, set by deck-load.js; empty when signed out, so then nothing shows). Shared by all three decks. */
.deck .title {
   top: 0;
   left: 0;
   right: 0;
   height: 5.25%;
   display: flex;
   align-items: center;
   justify-content: center;
   white-space: pre;
}
.deck .title-user:not(:empty)::before { content: " "; }

/* Full-screen note (org.js): a small pill at the bottom of the window, above the decks. */
.fs-note {
   position: fixed;
   left: 50%;
   bottom: 12px;
   transform: translateX(-50%);
   z-index: 50;
   display: flex;
   align-items: stretch;
   max-width: calc(100% - 24px);
   background: linear-gradient(#b8b8b8, #6a6a6a);
   border: 2px ridge #d0d0d0;
   border-radius: 6px;
   box-shadow: 2px 2px 4px #000;
   font: bold 12px Verdana, sans-serif;
}
.fs-go,
.fs-close {
   margin: 0;
   padding: 10px 14px;   /* tall enough for a thumb */
   border: 0;
   background: transparent;
   color: #101010;
   font: inherit;
   cursor: pointer;
}
.fs-close { padding: 10px 12px; border-left: 1px solid #505050; }
.fs-go:hover,
.fs-close:hover { background: rgba(255, 255, 255, 0.25); }
.fs-go:focus-visible,
.fs-close:focus-visible { outline: 2px solid #5a5ab0; outline-offset: -2px; }

/* Play-only squares sit near each outer edge, above the paired mix actions. */
.transport-group {
   position: absolute;
   top: 0;
   width: 67.3px;
   height: 67.3px;
   box-sizing: border-box;
   border: 2px solid #707070;
   border-radius: 8px;
   z-index: 1;
}
.transport-left { left: 5px; }
.transport-right { right: 5px; }
.transport-group .sync { top: 5px; }
/* Paired mix actions share a button baseline and label baseline. Outer
   HP/LP keeps AUTO's former position; AUTO is 40px nearer the bar. */
#mix .sync.hplp {
   top: calc(100% - 74px - 13.5px - 15px);
   width: 27px; gap: 3px; flex-direction: column-reverse;
}
#mix .hplp .sync-label, #mix .xf-auto { line-height: 12px; }
#mix .sync-left.hplp { left: 28px; }
#mix .sync-right.hplp { right: 25px; }   /* 3px outward nudge for the right pair */
.transport-group .play-btn { top: 50%; transform: translateY(-50%); }
.transport-left .play-btn { left: 5px; right: auto; }
.transport-right .play-btn { right: 5px; left: auto; }

/* Playing transports use green beneath their unavailable translucency.
   AUTO is blue only during its handoff, never during standby downloading. */
.play-btn[aria-pressed="true"], .play-btn[aria-pressed="true"]:hover {
   background: transparent url('player/image/pause.webp?v=icons-20261012-1') center / contain no-repeat;
}
.play-btn.blocked { opacity: 0.45; cursor: not-allowed; }
/* AUTO uses John's directional artwork without trimming its margins.
   Left points toward ONE, right toward TWO. On state tracks the existing
   aria-pressed handoff status; artwork changes no timing or audio logic. */
.xf-go, .xf-go:hover { border: 0; box-shadow: none; }
.xf-go-left, .xf-go-left:hover {
   background: transparent url('player/image/x-left.webp?v=icons-20261012-1') center / contain no-repeat;
}
.xf-go-right, .xf-go-right:hover {
   background: transparent url('player/image/x-right.webp?v=icons-20261012-1') center / contain no-repeat;
}
.xf-go-left[aria-pressed="true"], .xf-go-left[aria-pressed="true"]:hover {
   background-image: url('player/image/x-leftOn.webp?v=icons-20261012-1');
}
.xf-go-right[aria-pressed="true"], .xf-go-right[aria-pressed="true"]:hover {
   background-image: url('player/image/x-rightOn.webp?v=icons-20261012-1');
}

/* An armed HP/LP effect shares the blue AUTO/SYNC action color. */
/* John's original HP/LP artwork: neutral disc, green illuminated on state.
   The HP/LP text still identifies the selected effect in blue. */
.hplp-btn, .hplp-btn:hover {
   border: 0; box-shadow: none;
   background: transparent url('player/image/hp-lp.webp?v=icons-20261012-1') center / contain no-repeat;
}
.hplp-btn[aria-pressed="true"], .hplp-btn[aria-pressed="true"]:hover {
   background: transparent url('player/image/hp-lpOn.webp?v=icons-20261012-1') center / contain no-repeat;
}


/* Track-deck status between minus and plus: small enough for mobile, not a tap
   target. The mix deck retains an unassigned grey placeholder for later use. */
.bpm-btns .sync-indicator {
   flex: 0 0 14px;
   height: 14px;
   box-sizing: border-box;
   border: 2px solid #707070;
   border-radius: 50%;
   background: #101010;
   font: bold 8px/18px Verdana, sans-serif;
   color: #ffffff;
   text-align: center;
   cursor: default;
}
.bpm-btns .sync-indicator.on { background: #2b6cb0; color: #ffffff; border-color: #6fb6ff; }
.mix-placeholder { cursor: default; }

/* Play/Pause enlarged by 30% (41px -> 53.3px). The Play-only square
   retains equal 5px padding inside its 2px border. */
.transport-group .play-btn {
   width: 53.3px;
   height: 53.3px;
   top: 5px;
   transform: none;
}

/* Armed mix actions retain the shared blue state tint. */
.xf-go[aria-pressed="true"], .hplp-btn[aria-pressed="true"] {
   border-top-color: #d1e8f2; border-left-color: #b2d7e8;
}

/* Ratio alone is smaller; deck names retain their readable size.
   Mirror deck TWO artwork so both Play arrows point toward the mix center. */
#xf-value { font-size: 9px; position: relative; top: 4px; }
.transport-right .play-btn { transform: scaleX(-1); }

/* Outer-edge EQ action: button center matches the seven neutral thumbs.
   Artwork uses the supplied margins, like the existing round mix controls. */
.deck.anatomy .eq-action {
   position: absolute; top: 117.5px; width: 27px; display: flex;
   flex-direction: column; align-items: center; gap: 3px; z-index: 1;
}
.eq-action .sync-label { line-height: 12px; }
#deck1 .eq-action { left: 14px; }
#deck2 .eq-action { right: 14px; }
.eq-btn, .eq-btn:hover { background: transparent url('player/image/eq.webp?v=icons-20261012-1') center / contain no-repeat; border: none; box-shadow: none; }
.eq-btn[aria-pressed="true"], .eq-btn[aria-pressed="true"]:hover { background-image: url('player/image/eqOn.webp?v=icons-20261012-1'); }

/* Keep flat EQ visible while disabled, but do not offer a drag cursor. */
.eq-disabled .eq-slider { cursor: default; }

/* October 8 layout preview: center the EQ groups and mirror their actions to
   the inside edge. Track filter controls move to MIX; shared behavior retained. */
#deck1 .eq, #deck2 .eq { left: 50%; }
#deck1 .eq-action { left: auto; right: 14px; }
#deck2 .eq-action { right: auto; left: 14px; }
/* Move the complete crossfade row down 15px; ratio mirrors its old offset. */
#mix .crossfader { top: calc(100% - 76px); flex-direction: column-reverse; }
#mix .xf-labels { position: absolute; left: 0; right: 0; top: -7px; justify-content: center; margin: 0; }
#mix #xf-value { top: 0; }
#mix .xf-go { top: calc(100% - 72.5px); }
#mix .xf-auto, #mix .sync.hplp { top: calc(100% - 87.5px); }

/* Dedicated HP/LP sliders occupy the two outer MIX columns. AUTO moves
   inward symmetrically to keep labels and all four rails separate. */
#mix .crossfader { left: 122px; right: 122px; }
#mix .xf-go-left, #mix .xf-auto-left { left: 98px; }
#mix .xf-go-right, #mix .xf-auto-right { right: 98px; }
#mix .sync.hplp { width: 62px; height: 27px; top: calc(100% - 72.5px); display: block; }
#mix .sync-left.hplp { left: 24px; }
#mix .sync-right.hplp { right: 24px; }
#mix .hplp-btn { position: absolute; left: 17.5px; top: 0; }
#mix .filter-pair { position: absolute; left: 0; right: 0; bottom: 36px; display: flex; justify-content: space-between; }
#mix .filter-column { width: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#mix .filter-column > span { font: bold 10px/12px Verdana, sans-serif; color: white; text-shadow: 1px 1px 2px #000; }
#mix .filter-column > span.on { color: #ff5555; }
/* Shared vertical-slider skin: identical to the EQ, but 70px tall on MIX. */
#mix .filter-slider { position: relative; box-sizing: content-box; width: 8px; height: 70px; border: 2px solid #707070; border-radius: 5px; background: #101010; cursor: pointer; touch-action: none; }
#mix .eq-thumb { position: absolute; left: 50%; width: 26px; height: 20px; margin-left: -15px; margin-bottom: -10px; box-sizing: border-box; background: linear-gradient(#b8b8b8, #6a6a6a); border: 2px ridge #d0d0d0; border-radius: 4px; box-shadow: 2px 2px 3px #000; pointer-events: none; }
#mix .filter-slider:focus-visible { outline: 2px solid #5a5ab0; outline-offset: 3px; }

/* HP O LP aligns with the crossfade bar, with the effect button between
   the labels. Outer groups use the same 8px inset on both sides. */
#mix .sync.hplp { width: 82px; }
#mix .sync-left.hplp { left: 8px; }
#mix .sync-right.hplp { right: 8px; }
#mix .hplp-btn { left: 27.5px; }
#mix .filter-pair { bottom: 7.5px; }
#mix .filter-column { gap: 12px; }
/* Minimum non-overlapping HP O LP row: 17px labels plus the 27px
   effect button, with 1px gaps. Rail thumbs retain a separate hit column. */
#mix .sync.hplp { width: 63px; }
#mix .hplp-btn { left: 18px; }
#mix .filter-column { width: 17px; }
/* The space between rails must not cover the effect button's tap target. */
#mix .filter-pair { pointer-events: none; }
#mix .filter-slider { pointer-events: auto; }

/* Compact crossfader thumb; its full-height drag target stays unchanged.
   Each play box extends inward for its own effect selector. Play stays put. */
#crossfader::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; border-radius: 4px; }
#crossfader::-moz-range-thumb { width: 16px; height: 16px; border-radius: 4px; }
.transport-group { width: 153.3px; }
.deck-effect { position: absolute; top: 18px; width: 78px; height: 28px; box-sizing: border-box;
   padding: 2px 3px; border: 1px solid #707070; border-radius: 4px;
   color: #ffffff; background: #181818; font: 11px Verdana, sans-serif; cursor: pointer;
   color-scheme: dark; }
.transport-left .deck-effect { left: 64.3px; }
.transport-right .deck-effect { right: 64.3px; }
.deck-effect:focus-visible { outline: 2px solid #5a5ab0; outline-offset: 2px; }

/* Per-side dry/wet controls under each menu; TWO reverses the direction. */
.deck-effect { top: 8px; height: 24px; }
.effect-blend { position: absolute; top: 34px; width: 78px; height: 18px; margin: 0;
   appearance: none; -webkit-appearance: none; background: transparent;
   touch-action: pan-y; cursor: pointer; }
.effect-blend::-webkit-slider-runnable-track { height: 4px; background: #101010; border: 1px solid #707070; border-radius: 3px; }
.effect-blend::-moz-range-track { height: 2px; background: #101010; border: 1px solid #707070; border-radius: 3px; }
.effect-blend::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px;
   background: linear-gradient(#b8b8b8, #6a6a6a); border: 1px ridge #d0d0d0; border-radius: 3px; }
.effect-blend::-moz-range-thumb { width: 10px; height: 10px; background: linear-gradient(#b8b8b8, #6a6a6a); border: 1px ridge #d0d0d0; border-radius: 3px; }
.effect-blend-labels { position: absolute; top: 51px; width: 78px; display: flex; justify-content: space-between;
   font: 8px/10px Verdana, sans-serif; color: #ffffff; pointer-events: none; }
.transport-left .effect-blend, .transport-left .effect-blend-labels { left: 64.3px; }
.transport-right .effect-blend, .transport-right .effect-blend-labels { right: 64.3px; }
.effect-blend:focus-visible { outline: 2px solid #5a5ab0; outline-offset: 1px; }

/* Tighter HP O LP columns: 15px labels, a 23px button, 1px gaps.
   Narrower thumbs retain separate rails without touching. */
#mix .sync.hplp { width: 55px; }
#mix .filter-column { width: 15px; }
#mix .hplp-btn { left: 16px; width: 23px; height: 23px; top: 2px; }
#mix .filter-slider .eq-thumb { width: 22px; margin-left: -11px; }
/* Both LP label/rail columns shift left together by 2px; HP/button unchanged. */
#mix .filter-column:has(.filter-lp) { transform: translateX(-2px); }

/* Track thumbnail top inset matches its 10px outer-edge inset. */
.deck.anatomy .track-art { margin-top: -10px; }
/* Nine bands stay centered with room for the inside-edge EQ button. */
.deck.anatomy .eq { gap: 2px; }
.deck.anatomy .eq-slider { margin-left: 7px; margin-right: 7px; }
/* Play centers match the midpoint between their HP/LP rails. */
.transport-left .play-btn { left: 0.85px; }
.transport-right .play-btn { right: 2.85px; }
/* Short cards keep all nine frequency labels above the gain track. */
@media (max-height: 720px) {
   .deck.anatomy .eq-slider { height: 76px; }
   .deck.anatomy .eq-action { top: 107.5px; }
}
/* Taller track EQ rails with a closer frequency label row. */
.deck.anatomy .eq { top: 84px; }
.deck.anatomy .eq-band { gap: 2px; }
.deck.anatomy .eq-slider { height: 118px; }
.deck.anatomy .eq-action { top: 116.5px; }
@media (max-height: 720px) {
   .deck.anatomy .eq-slider { height: 98px; }
   .deck.anatomy .eq-action { top: 106.5px; }
}

/* GAIN stays below its rail in the controls, centered to the full card/footer
   width rather than the gain rail's offset span. */
.deck.anatomy .gain-label {
   position: absolute; left: 50%; top: 30px; margin: 0;
   transform: translateX(-50%); white-space: nowrap;
}
#deck1 .gain-label { left: calc(50% + 27px); }
#deck2 .gain-label { left: calc(50% - 27px); }
/* Half the gap from the centered nine-band group's nearest rail to the
   inside card edge. Action width is 27px; rail edge is 118px off center. */
#deck1 .eq-action { right: calc(25% - 72.5px); }
#deck2 .eq-action { left: calc(25% - 72.5px); }

/* The MIX track title/artist uses the same shared typography as track decks.
   Center in the gap bounded by Play-box bottom and AUTO-label top. */
#mix .mix-track-info {
   position: absolute; top: calc(50% - 10.1px); left: 50%;
   transform: translate(-50%, -50%); width: calc(100% - 118px);
   text-align: center; z-index: 1; pointer-events: none;
}
#mix .mix-track-info .info-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The load-time fullscreen prompt shares this space. Hide the text while it
   is open, rather than painting the two on top of each other. */
#mix .box2:has(.fs-note) .mix-track-info { visibility: hidden; }

/* GAIN sits under its percentage readout, mirrored on each track deck. */
#deck1 .gain-label { left: calc(100% + 32px); }
#deck2 .gain-label { left: -32px; }
/* Long blocked-pause feedback still uses the full control width. */
#deck1 .gain-label.note { left: calc(50% + 27px); }
#deck2 .gain-label.note { left: calc(50% - 27px); }

/* MIX track info repeats the header's black text and white glow. */
#mix .mix-track-info {
   color: #000000;
   text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0 0 6px #ffffff, 0 0 8px #ffffff;
}

/* John's Stop artwork uses the same canvas dimensions as the Play controls.
   Center in the gap, keeping the shared vertical center. No extra CSS glow. */
#mix-stop {
   position: absolute; left: 50%; top: 33.65px;
   transform: translate(-50%, -50%); width: 53.3px; height: 53.3px;
   border: none; padding: 0; clip-path: circle(22px at 50% 50%);
   background: transparent url('player/image/stop.webp?v=icons-20261012-1') center / contain no-repeat;
   cursor: pointer; z-index: 2;
}
#mix-stop:hover { filter: brightness(1.12); }
#mix-stop:active { filter: brightness(0.9); }
#mix-stop:focus-visible { outline: 2px solid #5a5ab0; outline-offset: 2px; }