* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 16px; background: white; color: #222; font: 14px/1.5 Arial, sans-serif; }
header, .room-bar, .now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
header { margin-bottom: 24px; }
#connection, .presence { color: #666; font-size: 13px; }
button, input { font: inherit; padding: 5px 9px; }
button { cursor: pointer; }
button:disabled { cursor: default; }
input { min-width: 0; flex: 1; }
form { display: flex; gap: 6px; }
.lobby { max-width: 480px; }
.join-box { margin-top: 20px; }
label { display: block; margin-bottom: 4px; }
.error { color: #a00; }
.error:empty, #playerMessage:empty { display: none; }
.room-bar { margin-bottom: 16px; }
#roomId { font-family: monospace; font-weight: normal; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.stage, aside { min-width: 0; }
.video-wrap { width: 100%; aspect-ratio: 16/9; min-height: 200px; background: #111; }
.video-wrap > div, .video-wrap > iframe { display: block; width: 100%; height: 100%; border: 0; }
.now { margin-top: 12px; flex-wrap: nowrap; justify-content: space-between; }
h1, h2 { font-size: 16px; font-weight: normal; margin: 0 0 10px; overflow-wrap: anywhere; }
.now h1 { margin: 0; }
.now button { flex-shrink: 0; }
#playerMessage, #empty { color: #666; }
ol { list-style: none; padding: 0; margin: 12px 0; max-height: 65vh; overflow: auto; }
.item { display: flex; align-items: center; border-bottom: 1px solid #ddd; }
.item.active { background: #eee; }
.queue-play { display: grid; grid-template-columns: 24px 72px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; border: 0; background: transparent; padding: 8px 4px; flex: 1; min-width: 0; }
.queue-play:hover { background: #eee; }
.item img { width: 72px; height: 42px; object-fit: cover; }
.num { color: #666; }
.title { font-size: 13px; overflow-wrap: anywhere; }
.remove { border: 0; background: transparent; font-size: 20px; }
#toast { display: none; position: fixed; bottom: 16px; left: 16px; max-width: calc(100vw - 32px); border: 1px solid #aaa; background: white; padding: 8px 12px; pointer-events: none; }
#toast.show { display: block; }
@media (max-width: 800px) {
  main { display: block; }
  aside { margin-top: 24px; }
  ol { max-height: none; }
}