#library-panel[hidden], body.visual-mode #library-panel {display:none!important}
#library-panel {min-width:0;padding:18px;gap:14px}
#library-panel h2 {font-size:21px;letter-spacing:-.04em;margin:0}
.library-split {display:grid;grid-template-columns:minmax(76px,31%) minmax(0,1fr);flex:1;min-height:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#library-nav,.collection-pane {min-width:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#405955 transparent}
#library-nav {display:flex;flex-direction:column;align-items:stretch;border-right:1px solid var(--line);padding:10px 7px 10px 0;gap:3px}
#library-nav button {background:transparent;color:var(--muted);border:0;border-radius:4px;text-align:left;font-size:12px;padding:9px 6px;overflow-wrap:anywhere}
#library-nav button[aria-pressed=true] {background:#263d38;color:#adedd4}
#library-nav button.playlist-entry {padding-left:10px;font-size:11px}
.collection-pane {padding:13px 0 12px 10px}
.collection-pane h3 {font-size:15px;margin:0;overflow-wrap:anywhere}
#library-rows {color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
#library-panel button:not(#library-nav button),#library-panel select {font:inherit;font-size:11px;min-width:0;max-width:100%;padding:7px 8px}
#library-rows article {display:grid;grid-template-columns:minmax(0,1fr) 24px 24px;gap:2px;align-items:center;padding:3px 0}
#library-rows .song-label {min-width:0}
#library-rows .song-label :is(strong,small) {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.22}
#library-rows strong {color:#edf0e8;font-size:11px;font-weight:600}
#library-rows small {font-size:10px}
#library-panel details summary {cursor:pointer;color:#a1e5c8;font-size:12px;padding:5px 0}
#library-panel #library-rows .queue-one,#library-panel #library-rows summary {display:grid;place-items:center;padding:0;width:24px;height:26px;min-height:0;font-size:15px;line-height:1}
#library-rows summary {list-style:none}
#library-rows summary::-webkit-details-marker {display:none}
#library-rows details[open] {grid-column:1/-1}
#library-rows details[open] summary {margin-left:auto}
#library-panel .library-pager {display:flex;align-items:center;gap:5px;width:100%;font-size:10px}
#library-panel .library-pager button {padding:3px 6px}
@media(pointer:coarse){
  #library-rows article {grid-template-columns:minmax(0,1fr) 32px 32px}
  #library-panel #library-rows .queue-one,#library-panel #library-rows summary {width:32px;height:32px}
}
#library-panel #library-tools {margin-top:6px}
#library-tools:empty,#library-status:empty {display:none}
#library-status {color:#afc7bf;font-size:12px;margin:0}
#library-manage form {display:grid;gap:6px;margin:8px 0}
#library-panel input {min-width:0;width:100%;padding:9px;border:1px solid var(--line);background:#11191d;color:inherit}
#library-manage label {font-size:12px}
body:not(.visual-mode) #library-panel {height:clamp(450px,64vh,590px);min-height:0}
body:not(.visual-mode) .workspace:has(#library-panel:not([hidden])) #radio-sidebar :is(#queue-panel,#history-panel) {min-height:0;overflow:auto;scrollbar-width:thin}
#library-panel :is(#library-tools,#library-rows,#library-manage) button {border:1px solid #597e74;border-radius:5px;color:#b6eed7;background:#20302f}
#library-panel button:disabled {opacity:.6}
@media(min-width:1000px){
  body:not(.visual-mode) #room-page:has(#library-panel:not([hidden])) {max-width:1640px;padding:8px clamp(16px,2vw,32px) 0}
  body:not(.visual-mode) .workspace:has(#library-panel:not([hidden])) {display:grid;grid-template-columns:minmax(235px,1fr) minmax(440px,2.05fr) minmax(235px,1fr);gap:clamp(10px,1.2vw,20px)}
  body:not(.visual-mode) #room-page .intro {margin-bottom:8px}
  body:not(.visual-mode):not(.song-wars) #room-page .intro .eyebrow {display:none}
  body:not(.visual-mode):not(.song-wars) #room-page .intro h1 {margin:0 0 2px;font-size:clamp(25px,2.2vw,31px);line-height:1.18}
  body:not(.visual-mode) #room-page .session-chip {padding:10px 14px}
  .workspace:has(#library-panel:not([hidden])) #radio-sidebar {min-height:0;height:clamp(450px,64vh,590px);padding:18px 15px 0}

  #radio-sidebar .queue-footer {margin: auto -15px 0;padding:12px 15px}
  #radio-sidebar .queue-head {flex-wrap:wrap;gap:6px}
}
@media(max-width:999px){
  body:not(.visual-mode) .workspace:has(#library-panel:not([hidden])) {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .workspace:has(#library-panel:not([hidden])) .player-column {grid-column:1/-1;grid-row:1;min-width:0}
  body:not(.visual-mode) .workspace:has(#library-panel:not([hidden])) :is(#library-panel,#radio-sidebar) {height:460px;min-height:0}
  body:not(.visual-mode):not(.song-wars) .intro .eyebrow {display:none}
  body:not(.visual-mode):not(.song-wars) .intro h1 {margin:0 0 4px}
}
@media(max-width:650px){
  body:not(.visual-mode) .workspace:has(#library-panel:not([hidden])) {grid-template-columns:minmax(0,1fr)}
  body:not(.visual-mode) .workspace:has(#library-panel:not([hidden])) :is(#library-panel,#radio-sidebar) {height:390px}
  #library-panel button,#library-panel summary {min-height:38px}
}


/* Keep the outer spacing equal around the radio. */
body:not(.visual-mode):not(.song-wars) #room-page:has(#library-panel:not([hidden])) {
  --room-gutter:clamp(16px,2vw,32px);
  display:flex;flex-direction:column;padding:var(--room-gutter) var(--room-gutter) 0;
}
body:not(.visual-mode):not(.song-wars) #room-page:has(#library-panel:not([hidden])) .intro {
  display:none;
}
@media(max-width:999px) {
  body:not(.visual-mode):not(.song-wars) #room-page:has(#library-panel:not([hidden])) {--room-gutter:32px}
}
@media(max-width:700px) {
  body:not(.visual-mode):not(.song-wars) #room-page:has(#library-panel:not([hidden])) {--room-gutter:18px}
}
#library-manage[open] {max-height:72%;overflow-y:auto;scrollbar-width:thin}

.radio-column {min-width:0;display:grid;gap:10px;align-content:start}
.room-card {min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel,#1a252a)}
.room-card .session-chip {display:flex;align-items:center;gap:10px;background:none;border:0;padding:0}
#room-page .room-card .session-chip {padding:0}
.room-card .signal {font-size:13px;flex-shrink:0}
.room-card #room-name {font-size:12px;letter-spacing:.04em}
.room-card #room-settings {margin-left:auto;flex:none;padding:6px 8px;border:1px solid #597e74;border-radius:5px;background:#20332f;color:#baf4db;font-size:11px}
#history-panel .history {padding:6px 0;gap:8px}
.player-card>#notice {color:var(--muted);font-size:10px;margin:0;padding:0 16px 8px}
body.visual-mode .player-card>#notice,.player-card>#notice:empty,body.visual-mode .radio-column,body.visual-mode .player-tools {display:none}
.player-tools {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;padding:4px 12px 10px}
.player-tools :is(.action-strip,.collection-controls) {display:contents}
.song-wars .player-tools .action-strip {display:none}
.player-tools :is(.action-strip,.collection-controls) button {flex:0 1 auto;min-height:32px;font-size:11px;line-height:1.25;padding:5px 8px}
body:not(.visual-mode) .player-card .card-top {padding:10px 16px}
body:not(.visual-mode) .player-card .track-heading {padding:9px 16px 3px}
body:not(.visual-mode) .track-heading h2 {font-size:20px;line-height:1.2;margin:0 0 2px}
body:not(.visual-mode) .player-card .timeline {padding:0 16px}
body:not(.visual-mode) .time-row {margin-top:2px}
body:not(.visual-mode) .player-card>.transport {padding:5px 16px;gap:4px}
body:not(.visual-mode) .transport-left {gap:7px}
@media (min-width:701px) and (pointer:fine) {
  body:not(.visual-mode) .player-card :is(.transport,.repeat-controls) button {min-height:32px;width:34px;height:32px}
  body:not(.visual-mode) .player-card .transport #play {width:40px;height:36px}
}
body:not(.visual-mode):not(.song-wars) .player-card>#art-stage {
  min-height:0!important;
  height:clamp(140px,calc(100dvh - var(--radio-header-height,90px) - 2 * var(--room-gutter,18px) - var(--controls-height,240px)),var(--stage-maximum,460px))!important;
}
@media (max-width:700px),(pointer:coarse) {
  .player-tools :is(.action-strip,.collection-controls) button,.room-card #room-settings {min-height:44px}
  .player-tools {column-gap:6px;row-gap:3px;padding-bottom:8px}
}

/* The player sets the single desktop row height. Long lists scroll within it. */
@media(min-width:1000px){
  body:not(.visual-mode):not(.song-wars) .workspace:has(#library-panel:not([hidden])) .radio-column {display:contents}
  body:not(.visual-mode):not(.song-wars) .workspace:has(#library-panel:not([hidden])) :is(#library-panel,#radio-sidebar) {
    align-self:stretch;height:auto;min-height:0;contain:size;
  }
}
.room-card .session-chip>div{min-width:0;overflow-wrap:anywhere}
body.visual-mode .transport>.room-card{display:none}
@media (max-width:700px) {
  .player-card {--stage-maximum:340px}
}

/* Song Wars keeps the arena beside the library and tournament sidebar. */
@media (min-width:651px) {
  body.song-wars:not(.visual-mode) .workspace:has(#library-panel:not([hidden])) #library-panel {
    height:auto;
    align-self:stretch;
    contain:size;
  }
}
@media (min-width:1000px) {
  body.song-wars:not(.visual-mode) .workspace:has(#library-panel:not([hidden])) {
    grid-template-rows:auto minmax(0,1fr);
    row-gap:0;
  }
  .song-wars .workspace:has(#library-panel:not([hidden])) .player-column {
    grid-area:1 / 2 / span 2;
  }
  .song-wars .workspace:has(#library-panel:not([hidden])) .radio-column {
    grid-area:1 / 3;
  }
}

/* Equal outer slots keep Play centered when a video exposes only one control. */
.player-card .transport-left:has(#video-toggle:not([hidden])) {
  --video-tool-width:64px;
  display:grid;
  grid-template-columns:var(--video-tool-width) repeat(3,auto) var(--video-tool-width);
  gap:5px;align-items:center;justify-content:center;
}
.transport-left #quality-control {grid-column:1}
.transport-left #back {grid-column:2}
.transport-left #play {grid-column:3}
.transport-left #skip {grid-column:4}
.transport-left #video-toggle {grid-column:5}
.player-card .transport-left #quality-control:not([hidden]),
.player-card .transport-left #video-toggle:not([hidden]) {
  position:relative;inset:auto;display:flex;align-items:center;justify-content:center;
  width:var(--video-tool-width);height:32px;min-height:32px;box-sizing:border-box;
  margin:0;padding:0 3px;border:1px solid var(--control-border);border-radius:6px;
  color:var(--control-text);background:var(--control-bg);
  font-family:inherit;font-size:10px;font-weight:600;line-height:1.15;white-space:nowrap;
}
.transport-left #quality-control::after {content:'▾';font-size:9px}
.transport-left #quality-control:focus-within {outline:2px solid var(--control-fill);outline-offset:2px}
.transport-left #quality-control select {position:absolute;inset:0;opacity:0;width:100%;height:100%;min-height:0;margin:0;padding:0}
@media (pointer:coarse),(max-width:700px) {
  .player-card .transport-left:has(#video-toggle:not([hidden])) {--video-tool-width:57px;gap:3px}
  .player-card .transport-left #quality-control:not([hidden]),.player-card .transport-left #video-toggle:not([hidden]) {height:44px}
}
@media(min-width:701px) and (max-width:1300px) and (pointer:fine) {
  body:not(.visual-mode) .player-card>.transport:has(#video-toggle:not([hidden])) {grid-template-columns:minmax(0,1fr)}
  body:not(.visual-mode) .transport:has(#video-toggle:not([hidden])) .transport-left {grid-column:1;justify-self:center}
  body:not(.visual-mode) .transport:has(#video-toggle:not([hidden])) .volume-label {grid-column:1;justify-self:end}
}

/* Room identity and access share the playback row with the transport. */
body:not(.visual-mode):not(.song-wars) .player-card {
  container-type:inline-size;
  --radio-action-columns:minmax(0,1fr) repeat(3,minmax(0,.75fr)) minmax(0,1fr);
}
body:not(.visual-mode):not(.song-wars) .player-card>:is(.transport,.player-tools) {
  display:grid;grid-template-columns:var(--radio-action-columns);align-items:center;
  padding-inline:12px;column-gap:5px;
}
body:not(.visual-mode):not(.song-wars) .player-card>.transport {
  grid-template-areas:"room playback playback playback roles" "room volume volume volume roles";row-gap:0;
}
.transport>.room-card,.transport>.room-card .session-chip {display:contents}
.transport>.room-card .signal {display:none}
.transport>.room-card .session-chip>div {grid-area:room;text-align:center;line-height:1.2}
.transport>.room-card #room-name {font-size:12px;letter-spacing:normal}
.transport>.room-card #connection {font-size:10px;margin-top:2px}
body:not(.visual-mode) .transport>.room-card #room-settings {
  grid-area:roles;justify-self:center;width:auto;max-width:100%;margin:0;height:auto;line-height:1.2;
}
body:not(.visual-mode):not(.song-wars) .player-card>.transport>.transport-left {grid-area:playback;justify-self:center}
body:not(.visual-mode):not(.song-wars) .player-card>.transport>.volume-label {grid-area:volume;justify-self:center}
body:not(.visual-mode):not(.song-wars) .player-card>.player-tools {
  grid-template-areas:"request insert fullscreen favorite save";
}
.player-tools #request {grid-area:request}
.player-tools #insert {grid-area:insert}
.player-tools #visuals {grid-area:fullscreen}
.player-tools #library-save {grid-area:save}
.player-tools #library-favorite {grid-area:favorite}
@container (max-width:530px){
  body:not(.visual-mode):not(.song-wars) .player-card>.transport {
    grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"playback playback playback" "room volume roles";
  }
  body:not(.visual-mode):not(.song-wars) .player-card>.player-tools {
    grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"request fullscreen save" "insert . favorite";
  }
  body:not(.visual-mode):not(.song-wars) .player-card>.transport>.volume-label {width:100%;min-width:0;padding:0;gap:3px}
  body:not(.visual-mode):not(.song-wars) .player-card>.transport>.volume-label input {min-width:0;width:100%;flex:1}
  body:not(.visual-mode):not(.song-wars) .player-card>.transport>.volume-label>span:first-child {display:none!important}
}
#automix[aria-pressed="true"] {background:#a1e5c8;color:#142329;border-color:#a1e5c8}
.queue-head .queue-tools {flex-wrap:wrap;justify-content:flex-end}

.collections-column {display:contents}
body.song-wars:not(.visual-mode) .collections-column {display:flex;flex-direction:column;gap:12px;align-self:start;min-width:0}
body.song-wars:not(.visual-mode) .workspace:has(#library-panel:not([hidden])) #library-panel {height:clamp(210px,30vh,295px);min-height:0;overflow:auto;contain:none;padding:14px;gap:6px}
body.song-wars #library-panel:has(#library-manage[open]) .library-split {min-height:86px}
#chance-panel {padding:16px;border:1px solid #783047;border-radius:8px;background:#281019;min-width:0}
#chance-panel h2 {margin:0;font-size:20px}
#chance-panel p {font-size:13px;line-height:1.5;overflow-wrap:anywhere}
#chance-result:empty {display:none}
#chance-result {border-top:1px solid #713144;padding-top:10px;margin-bottom:0}
.chance-actions {display:flex;gap:8px;flex-wrap:wrap}
.chance-actions button,#chance-go {border:1px solid #c4596d;border-radius:6px;background:#792638;color:white;padding:9px 12px;font:inherit;font-weight:600}
.chance-actions button:disabled {background:#302b2d;color:#aa9da1;border-color:#5a5053}
#chance-tie.tied {border-color:#ff728a}
@keyframes tie-pulse {0%,100% {box-shadow:0 0 2px #fa526b66} 50% {box-shadow:0 0 13px #fa526bcc}}
@media(prefers-reduced-motion:no-preference){#chance-tie.tied {animation:tie-pulse 1.8s ease-in-out infinite}}
body.visual-mode .collections-column {display:none}
.player-tools .collection-controls #library-save.remove-saved {background:#742c39;border-color:#de7183;color:#fff}
#feedback-form textarea {display:block;box-sizing:border-box;width:100%;margin:6px 0 14px;background:#11191d;color:inherit;border:1px solid #597e74;padding:10px;font:inherit;resize:vertical}
#chance-game {width:100%}
#feedback-status:empty {display:none}
.header-right {flex-wrap:wrap}
#play[data-paused-by] {position:relative}
#play[data-paused-by]::after {content:attr(data-paused-by);position:absolute;z-index:2;top:100%;left:50%;transform:translateX(-50%);max-width:min(210px,65vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 5px;border-radius:4px;background:#192529;color:white;font:600 11px/1.4 system-ui;pointer-events:none}
@media(pointer:coarse) {.chance-actions button,#chance-go {min-height:44px}}

#chance-table {margin-top:14px}
.chance-field {overflow:hidden;border:1px solid #724353;border-radius:8px;background:#1d141b;color:#fff4e9}
.chance-board-head {display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:9px 11px;border-bottom:1px solid #ffffff24}
.chance-board-head strong {font-size:13px}
.chance-board-head small,.lane-name,.pitch-distance,.coin-sides {font-size:11px}
.chance-board-head small {color:#e3bcc5}
.chance-surface {position:relative;display:grid;place-items:center;gap:12px;min-height:116px;padding:14px 10px;background:radial-gradient(ellipse at center,#5a2e40,#321b28);overflow:hidden;isolation:isolate}
.game-craps .chance-surface {background:radial-gradient(ellipse at top,#23584b,#112e29)}
.game-ceelo .chance-surface {background:repeating-linear-gradient(120deg,transparent 0 6px,#ffffff04 7px),linear-gradient(125deg,#34364a,#202030)}
.game-pitch .chance-surface {background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 6px),linear-gradient(110deg,#473d34,#2d2520)}
.chance-pieces {display:flex;justify-content:center;align-items:center;gap:8px;min-width:0}
.chance-lane {display:flex;flex-direction:column;align-items:center;min-width:0;gap:7px}
.lane-name {overflow-wrap:anywhere;color:#fff1dd;font-weight:650}
.chance-die {display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;width:38px;height:38px;padding:6px;border:1px solid white;border-radius:8px;background:linear-gradient(135deg,#fff8eb,#d9cbb8);box-shadow:inset -2px -3px 1px #b7aa9e,0 3px 3px #0006}
.chance-die .pip {width:6px;height:6px;background:#412536;border-radius:50%;box-shadow:inset 0 1px 1px #0009}
.chance-die.unrolled {display:grid;grid-template:1fr/1fr;color:#967e83;background:#c1b4ae}
.game-ceelo .chance-lane {flex-direction:row;justify-content:space-between;width:100%;gap:6px}
.game-ceelo .chance-die {width:30px;height:30px;padding:4px;border-radius:6px}
.game-ceelo .chance-die .pip {width:5px;height:5px}
.game-ceelo .chance-pieces {flex:none;gap:4px}
.point-puck {padding:3px 10px;border:2px solid #e4cd9e;border-radius:20px;background:#182a27;color:#f3deb6;font-weight:700;font-size:11px;letter-spacing:.06em}
.chance-coin {display:inline-grid;place-content:center;justify-items:center;flex:none;width:66px;height:66px;border:3px double #ffdf9c;border-radius:50%;background:radial-gradient(ellipse at 30% 20%,#ffeca8,#d7a24a 56%,#b2752e);color:#573519;box-shadow:inset 0 0 0 3px #aa732d,inset 0 0 0 4px #f6d797,0 4px 0 #8c591e,0 6px 7px #0007;line-height:1}
.chance-coin b {font:bold 25px/1 Georgia,serif;text-shadow:0 1px #fff4bf}
.chance-coin small {font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.chance-coin.silver {filter:grayscale(.94)}
.coin-sides {display:flex;justify-content:space-evenly;gap:10px;width:100%;overflow-wrap:anywhere;text-align:center}
.pitch-mat {width:100%;display:grid;gap:13px}
.pitch-lane {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}
.pitch-distance {color:#ecd4b8}
.pitch-ruler {position:relative;grid-column:1/-1;height:16px;margin:0 8px;border-left:2px solid #ffdfa2;border-bottom:1px solid #c6a886;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#c6a88655 calc(10% - 1px) 10%)}
.pitch-marker {position:absolute;bottom:1px;width:13px;height:13px;margin-left:-6px;border:2px double #f8d394;border-radius:50%;background:#cf943f;box-shadow:0 2px 3px #0009}
.pitch-lane:nth-child(2) .pitch-marker {filter:grayscale(1)}
.toss-pair .chance-coin {width:42px;height:42px}
.toss-pair .chance-coin b {font-size:17px}
.toss-pair .chance-coin small {font-size:6px}
.chance-moves {list-style:none;padding:8px 10px;margin:0;color:#deccd1;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.chance-moves li+li {margin-top:4px;color:white}
#chance-turn-label {margin:10px 0 5px;font-weight:700}
#chance-turn {width:100%;min-height:44px}
#chance-turn:disabled {background:#40333a;color:#cbbdc3}
#view-chance {margin-bottom:12px}
@media(prefers-reduced-motion:no-preference) {
  .chance-motion .chance-coin {animation:chance-flip .65s ease-out}
  .chance-motion .chance-die {animation:chance-roll .52s ease-out}
  .chance-motion .chance-die:nth-child(2) {animation-duration:.61s}
  .chance-motion .pitch-marker {animation:chance-pitch .55s ease-out}
}
@keyframes chance-flip {from {transform:translateY(10px) rotateX(450deg)} 44% {transform:translateY(-8px) rotateX(200deg)} to {transform:none}}
@keyframes chance-roll {from {transform:translate(8px,-7px) rotate(-100deg)} 70% {transform:translate(-2px,0) rotate(12deg)} to {transform:none}}
@keyframes chance-pitch {from {transform:translate(44px,-7px) rotate(200deg)} to {transform:none}}

#web-welcome:not([hidden]){max-width:30rem;margin:clamp(2rem,9vh,6rem) auto;padding:24px;background:var(--panel,#1a252a);border:1px solid var(--line);border-radius:8px}
#web-welcome h1{font-size:clamp(24px,4vw,34px);margin:0}
#web-welcome p,#website-code-dialog p{color:#bccecf;line-height:1.5}
#web-code-entry{margin-top:16px}
#web-code-entry summary{cursor:pointer}
#web-code-form{display:grid;gap:8px}
#web-code-form input{padding:10px;border-radius:5px;background:#11191d;color:inherit;border:1px solid #597e74;font:inherit}
#web-code-form button{justify-self:start}
#website-code-value{display:block;font:600 1.35rem monospace;text-align:center;padding:12px;color:#a1e5c8;user-select:all}
#web-login-status:empty{display:none}
body.website-guest :is(.header-avatar,#explore,#my-room,#wars-toggle,#feedback-bug,#feedback-suggestion){display:none}