/* Shared layout for the music room, plans and preview studio. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { font-size: 16px; overflow-wrap: break-word; }
.top, main { width: 100%; max-width: 1200px; min-width: 0; }
.top { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px 16px; padding: 24px 20px 16px; }
.top > img { width: 48px; height: 48px; border-radius: 14px; transform: none; }
.top > div { min-width: 0; }
.top h1 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.top p { margin: 4px 0 0; font-size: 14px; }
.top > nav { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.top > .room-language { grid-column: 3; grid-row: 1; }
.top > .button { justify-self: start; }
main { padding: 8px 20px 48px; }
.card, .catalog, .room-track, .room-track > div { min-width: 0; }
.card { border-radius: 20px; }
button, .button, select { min-height: 44px; }
button, .button { justify-content: center; line-height: 1.35; font-size: 14px; }
.hint, .room-track p { font-size: 14px; line-height: 1.55; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { max-width: 100%; font-size: 16px; }
input[type=range] { min-height: 36px; }
.room-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.room-controls button { grid-column: span 2; min-height: 44px; font-size: 14px; padding: 10px 6px; }
.room-controls button:nth-last-child(-n+2) { grid-column: span 3; }
.room-audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room-audience button { padding: 10px 8px; }
.room-track .room-actions { gap: 8px; }
.room-track .room-actions > :is(button, .button) { min-width: 76px; }
.room-track h3, .meme-item > :first-child { min-width: 0; overflow-wrap: anywhere; }
.room-player h2::before, .card h2::before { flex-shrink: 0; }
/* A tall sticky card can hide its footer even while the page is scrolled. */
.room-player, .preview-stage { position: static; top: auto; max-height: none; overflow: visible; }
.room-player h2 { align-items: flex-start; line-height: 1.35; }
.room-controls button, .room-audience button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.room-player input[type=range] { min-height: 44px; padding: 0; border: 0; background: transparent; }
#youtube-box { width: 100%; min-width: 0; min-height: 200px; }
.room-controls { margin-block: 12px; }
#room-status { margin-block: 12px 0; }
@media (min-width: 961px) and (min-height: 501px) {
  .room-player[data-sticky="true"], .preview-stage[data-sticky="true"] { position: sticky; top: 18px; }
}
.meme-item { align-items: start; padding-block: 12px; }
.room-section-head h2 { flex: 1 1 220px; }
.room-language select { min-width: 120px; }
.catalog { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.catalog article { display: flex; flex-direction: column; min-width: 0; }
.catalog article > :last-child { margin-top: auto; }
.catalog h3 { line-height: 1.4; }
.tune-grid button { flex: 1 1 140px; white-space: normal; }
.preview-nav a { white-space: normal; }
.room-nav a[aria-current=page] { background: var(--sel); border-color: var(--brand-2); }
@media (max-width: 960px) {
  .room-layout, .playground-layout { grid-template-columns: minmax(0, 1fr); }
  .room-player, .preview-stage { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 600px) {
  .top { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 14px 12px; gap: 12px; }
  .top > img { width: 40px; height: 40px; padding: 4px; }
  .top > .room-language { grid-column: 1 / -1; grid-row: 3; display: flex; flex-direction: row; align-items: center; gap: 12px; }
  .top > .room-language select { flex: 1; max-width: 220px; }
  .top > nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .top > nav a { min-width: 0; padding: 10px 8px; text-align: center; }
  .top > .button { grid-column: 1 / -1; width: 100%; }
  main { padding: 6px 12px calc(32px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
  .card, .preview-library .card { padding: 16px; border-radius: 18px; }
  .card h2 { font-size: 20px; gap: 10px; }
  .card h2::before { width: 32px; height: 32px; border-radius: 10px; font-size: 20px; }
  .room-library { gap: 16px; }
  .room-track { padding: 12px; }
  .room-track .room-actions > :is(button, .button) { flex: 1; }
  .room-track h3 { font-size: 16px; }
  #player-empty { min-height: 120px; font-size: 60px; }
  #youtube-box { border-radius: 12px; }
  .room-player label, .preview-library label { font-size: 14px; }
  .room-audience button { font-size: 13px; }
  .preview-controls { padding-block: 12px; }
  .reaction-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reaction-controls button { min-width: 0; padding: 10px 6px; font-size: 13px; }
  .presence-controls { padding: 12px; }
  .character-grid button { min-height: 96px; }
  .ownership-links a { padding-block: 8px; }
}
@media (max-width: 360px) { .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 500px) and (orientation: landscape) {
  .room-player, .preview-stage { position: static; max-height: none; overflow: visible; }
}