/* A compact cottage radio, scoped to the listening page. */
.shared-library { padding: 12px; border-right: 3px solid #78512e; background: repeating-linear-gradient(2deg,transparent 0 8px,#efc47c22 9px 10px),linear-gradient(100deg,#ad773f,#d2a063 45%,#a56f39); box-shadow: inset 0 0 0 4px #f4d29666,3px 0 8px #5c3c2333; }
.shared-library .shelf-scroll { padding: 7px; border: 2px solid #92703e; border-radius: 12px; background: #f5e8c9; box-shadow: inset 0 2px 7px #71502b33; scrollbar-color: #b99559 #f5e8c9; }
.shared-library .track-row { border-bottom-color: #d3bd8e; border-radius: 9px; padding-left: 7px; padding-right: 7px; gap: 10px; }
.shared-library .track-row:hover { background: #eadab4; }
.shared-library .track-row.selected { background: #e1e5bf; border-color: #ae985f; box-shadow: inset 0 0 0 1px #fff5d1,0 2px 0 #c6ac75; }
.shared-library .track-index { color: #776342; }
.shared-library .mini-player { background: #f5e8c9; border-color: #b9975e; }
.radio-room .player-intro { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid #cdb783; }
body[data-page=playlist] #main {
  padding: 24px 28px;
  overflow: hidden;
  background: linear-gradient(#fff8e71a,#fff8e71a), url('/assets/prototype/radio-room-fantasy-pale.png') center 70% / cover;
  background-color: #f6ead4;
}
.radio-room { height: 100%; max-width: 1060px; margin: auto; display: grid; align-items: center; }
.radio-room .listening-room { width: 100%; height: min(100%,620px); min-height: 0; padding: 0; }
.radio-room .player-column { width: 100%; height: 100%; max-width: 960px; display: grid; grid-template-rows: minmax(0,1fr) auto auto; gap: 12px; }
.radio-room .player-card {
  min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; padding: 15px;
  border: 3px solid #704322; border-radius: 32px 32px 20px 20px;
  background: repeating-linear-gradient(2deg,#9a633600 0 6px,#eeb15e22 7px,#75452215 9px),linear-gradient(100deg,#b98246,#d69e58 24%,#ac7139 75%,#845128);
  box-shadow: inset 0 2px 0 #f5d39a, inset 0 0 0 5px #dbad6b99, 0 8px 0 #57371d, 0 22px 36px #39241170;
}
.radio-face { min-height: 0; display: grid; grid-template-columns: minmax(50px,1fr) minmax(0,3.3fr) minmax(50px,1fr); gap: 18px; padding: 7px 5px 16px; }
.radio-speaker {
  min-height: 0; border-radius: 50% 50% 20% 20% / 24% 24% 10% 10%; border: 5px solid #76552f;
  background: repeating-linear-gradient(90deg,#493f2d66 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,#e5c48a66 0 1px,transparent 1px 4px),radial-gradient(ellipse,#574732,#99805b);
  box-shadow: inset 0 0 15px #2e241acc,0 1px 0 #f5d18b; position: relative;
}
.radio-speaker:after { content: ''; position: absolute; inset: 10px 16%; border-left: 2px solid #d6b47777; border-right: 2px solid #d6b47777; border-radius: 50%; }
.radio-room .player-scene { height: auto; min-height: 0; border: 5px solid #b99a5b; border-radius: 13px; background: #354f41; box-shadow: 0 0 0 2px #5d4428,inset 0 0 12px #1d2d24; }
.radio-room .player-scene>img { position: absolute; inset: 0; height: 100%; opacity: .48; object-position: var(--image-position,center 58%) !important; }
.radio-room .player-scene:after { background: linear-gradient(#18362914,#183629a3 65%,#152d21d9); }
.radio-room .scene-label { left: 16px; top: 12px; font-size: 11px; color: #fff1c6; letter-spacing: .14em; z-index: 1; }
.radio-room .scene-title { left: 16px; right: 16px; bottom: 48px; font-size: clamp(20px,2vw,28px); line-height: 1.5; text-shadow: 0 2px 5px #142219; }
.radio-room .scene-subtitle { left: 17px; bottom: 29px; font-size: 11px; letter-spacing: .08em; }
.radio-room .visualizer { height: 25px; opacity: .6; }
.radio-room .player-main { background: #f7e9c9; border: 2px solid #a88245; border-radius: 10px; padding: 11px 20px 10px; box-shadow: inset 0 1px 0 #fff8e4; color: #3c513e; }
.radio-room .player-intro { font-size: 14px; line-height: 1.6; margin-bottom: 7px; color: #4f583c; }
.radio-room .seek-row input { height: 16px; accent-color: #537654; }
.radio-room .time-row { font-size: 12px; color: #536044; }
.radio-room .transport { margin: 6px 0 8px; gap: 25px; }
.radio-room .transport .icon-button { width: 42px; height: 42px; border: 2px solid #ad8a4f; background: radial-gradient(circle at 35% 30%,#fffae4,#dfc68e); box-shadow: 0 3px 0 #9a7841,inset 0 0 0 3px #fff3ce; color: #405b44; }
.radio-room .transport .play-main { width: 50px; height: 50px; background: radial-gradient(circle at 35% 30%,#628568,#2c513b); color: #fff6d8; border-color: #9a7b43; box-shadow: 0 3px 0 #8a6832,inset 0 0 0 3px #f3d99c; }
.radio-room .player-preferences { border-color: #cdb783; padding-top: 7px; gap: 12px; flex-wrap: nowrap; }
.radio-room .mode-select,.radio-room .vis-toggle { font-size: 13px; color: #3e5941; }
.radio-room .volume-control input { accent-color: #537654; }
.radio-room .player-status { font-size: 13px; margin-top: 5px; line-height: 1.5; }
.radio-room .mml-panel { padding: 12px 18px; gap: 12px; border: 1px solid #c8ad73; border-radius: 12px; background: #fff5ddec; box-shadow: 0 3px 9px #44301944; }
.radio-room .mml-copy { min-height: 42px; font-size: 15px; padding: 8px 18px; }
.radio-room .mml-meta { color: #526044; font-size: 12px; line-height: 1.8; }
.radio-room .mml-panel .usage-link { font-size: 12px; color: #475d40; margin-top: 7px; }
.radio-room .social-row { padding: 5px 15px; border-radius: 12px; background: #fdf1d9f0; border: 1px solid #c8ad73; box-shadow: 0 3px 9px #44301933; }
.radio-room .social-action { font-size: 13px; padding: 6px 3px; }
@media(min-width:761px) and (max-height:740px) {
  body[data-page=playlist] #main { padding: 14px 20px; }
  .radio-room .player-column { gap: 8px; }
  .radio-room .player-card { padding: 11px; border-radius: 24px 24px 16px 16px; }
  .radio-face { padding-bottom: 11px; gap: 12px; }
  .radio-room .player-main { padding: 8px 16px; }
  .radio-room .mml-panel { padding: 9px 15px; }
}
@media(max-width:760px) {
  body[data-page=playlist] #main { padding: 10px 11px; }
  body[data-page=playlist] .shared-library { height: 32%; min-height: 130px; }
  .radio-room { max-width: none; }
  .radio-room .listening-room { display: block; height: 100%; }
  .radio-room .player-column { gap: 8px; }
  .radio-room .player-card { padding: 9px; border-width: 2px; border-radius: 23px 23px 13px 13px; box-shadow: inset 0 1px 0 #f5d39a,inset 0 0 0 3px #dbad6b99,0 4px 0 #57371d,0 8px 18px #39241155; }
  .radio-face { grid-template-columns: 32px minmax(0,1fr) 32px; gap: 8px; padding: 2px 1px 9px; }
  .radio-speaker { border-width: 3px; }
  .radio-speaker:after { inset: 7px 25%; border-width: 1px; }
  .radio-room .player-scene { border-width: 3px; border-radius: 8px; }
  .radio-room .player-scene>img { object-position:var(--mobile-image-position,center 58%) !important; }
  .radio-room .scene-label { font-size: 9px; top: 8px; left: 9px; letter-spacing: .08em; }
  .radio-room .scene-title { font-size: 17px; left: 9px; right: 7px; bottom: 32px; line-height: 1.4; }
  .radio-room .scene-subtitle { font-size: 10px; left: 9px; bottom: 16px; }
  .radio-room .visualizer { height: 15px; }
  .radio-room .player-main { padding: 7px 10px; border-width: 1px; }
  .radio-room .player-intro { font-size: 12px; line-height: 1.5; margin-bottom: 4px; }
  .radio-room .transport { margin: 4px 0 6px; gap: 22px; }
  .radio-room .transport .icon-button { width: 34px; height: 34px; }
  .radio-room .transport .play-main { width: 40px; height: 40px; }
  .radio-room .player-preferences { padding-top: 5px; gap: 6px; }
  .radio-room .mode-select,.radio-room .vis-toggle { font-size: 12px; }
  .radio-room .mode-select { max-width: 110px; }
  .radio-room .volume-control input { width: 51px; }
  .radio-room .mml-panel { padding: 9px 10px; gap: 8px; }
  .radio-room .mml-copy { min-height: 36px; padding: 6px 12px; font-size: 14px; }
  .radio-room .mml-meta { font-size: 11px; line-height: 1.8; }
  .radio-room .mml-meta strong { font-size: 14px; }
  .radio-room .mml-panel .usage-link { font-size: 11px; margin-top: 5px; }
  .radio-room .social-row { padding: 3px 9px; flex-wrap: nowrap; }
  .radio-room .social-action { font-size: 12px; padding: 5px 1px; gap: 4px; }
  .radio-room .social-right { gap: 9px; }
}
@media(max-width:760px) and (max-height:740px) {
  body[data-page=playlist] .shared-library { height: 26%; min-height: 105px; }
  .radio-room .player-column { gap: 6px; }
  .radio-room .player-card { padding: 7px; }
  .radio-room .player-intro { display: block; }
  .radio-room .player-main { padding: 5px 8px; }
  .radio-room .mml-panel { padding: 7px 9px; }
  .radio-room .social-row { padding: 2px 9px; }
}
@media(max-width:760px) {
  .shared-library { padding: 7px 9px; border-right: 0; border-top: 3px solid #78512e; box-shadow: inset 0 0 0 3px #f4d29666; }
  .shared-library .shelf-scroll { padding: 3px 5px; border-radius: 8px; }
  .shared-library .mini-player { margin-bottom: 5px; border: 1px solid #b9975e; border-radius: 8px; }
  .radio-room .player-intro { margin: 5px 0 0; padding-top: 5px; }
}
@media(max-width:760px) and (max-height:740px) {
  .radio-room .scene-label { display: none; }
  .radio-room .scene-title { bottom: 25px; }
  .radio-room .scene-subtitle { bottom: 10px; }
  .radio-room .player-intro { line-height: 1.4; }
}
@media(max-width:360px) {
  .radio-face { grid-template-columns: 24px minmax(0,1fr) 24px; gap: 6px; }
  .radio-room .player-preferences { flex-wrap: wrap; justify-content: space-between; }
  .radio-room .mml-panel { grid-template-columns: 1fr auto; }
  .radio-room .mml-copy { font-size: 13px; padding: 6px 9px; }
  .radio-room .mml-meta { font-size: 10px; }
  .radio-room .mml-panel .usage-link { font-size: 10px; }
}