/* Layout only: original player.css and player.js are generated unchanged. */
.friends-shell { color: #f3e9d5; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif; }
.station-shell.friends-shell { display: block; }
.friends-shell [hidden] { display: none !important; }
.friends-stage {
  --caption-size: 150px;
  --frame-padding: clamp(16px, 4svh, 48px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--caption-size);
  gap: 20px;
  height: 100svh;
  height: 100dvh;
  padding: max(var(--frame-padding), env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(var(--frame-padding), env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.friends-player { container-type: size; position: relative; display: grid; place-items: center; min-height: 0; min-width: 0; }
.friends-player .play-button { width: min(clamp(190px, 30vw, 300px), 90cqw, 90cqh); }
/* Original GIF is 500 × 700; reserve its entire height, including arrival motion. */
.friends-player .playing-hand { width: min(clamp(270px, 42vw, 420px), 92cqw, 66cqh); }
.friends-caption { align-self: center; justify-self: center; width: min(100%, 640px); min-width: 0; text-align: center; }
#unlocked { pointer-events: none; }
#title, #artist { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#title { -webkit-line-clamp: 3; margin: 0 0 8px; font-size: 22px; line-height: 1.3; font-weight: 450; }
#artist { -webkit-line-clamp: 2; margin: 0; font-size: 15px; line-height: 1.45; font-weight: 400; }
#locked { max-width: 340px; margin: auto; }
label { display: block; font-size: 12px; margin: 0 0 8px; }
.entry { display: flex; gap: 8px; }
input { width: 100%; min-width: 0; padding: 10px; font: inherit; font-size: 16px; color: inherit; background: transparent; border: 1px solid #eadfc9; border-radius: 2px; }
#enter { flex-shrink: 0; padding: 10px 16px; font: inherit; border: 1px solid #eadfc9; border-radius: 2px; background: #eadfc9; color: #15382c; cursor: pointer; }
#enter:disabled { opacity: .55; cursor: wait; }
.friends-caption :focus-visible { outline: 2px solid #dfc17e; outline-offset: 4px; }
#message { font-size: 13px; line-height: 1.5; color: #f3e9d5; margin: 10px 0 0; }
#message:empty { display: none; }
@media (min-width: 768px) {
  .friends-stage { --caption-size: 190px; }
  #title { font-size: 28px; }
  #artist { font-size: 17px; }
}
/* Phone landscape and touch-tablet landscape use separate columns. */
@media (orientation: landscape) and (max-height: 600px), (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
  .friends-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); }
  .friends-caption { width: min(100%, 500px); text-align: left; }
  #locked { margin-left: 0; }
}
@media (orientation: landscape) and (max-height: 450px) {
  #title { font-size: 20px; }
  #artist { font-size: 14px; }
}