.room-intro{background:var(--lilac)}.room-panel{background:var(--paper);border:2px solid var(--line);border-radius:24px;padding:24px;margin:20px 0;box-shadow:4px 5px 0 var(--line)}.room-panel form{display:grid;gap:12px;margin-top:22px}.room-panel label{display:grid;gap:8px;font-weight:800}.room-panel input{min-height:48px;border:2px solid var(--line);border-radius:12px;padding:12px;font-size:18px;width:100%;background:white}.room-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.room-bar strong{display:block;font-size:28px;letter-spacing:.08em}.room-bar .eyebrow{font-size:11px}.room-players{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.room-player{background:var(--mint);border:2px solid var(--line);border-radius:18px;padding:16px}.room-player:nth-child(even){background:var(--pink)}.room-player strong,.room-player span{display:block}.room-player span{margin-top:6px}.room-art{display:block;width:min(100%,420px);aspect-ratio:1;object-fit:contain;background:var(--lilac);border-radius:22px;margin:16px auto}.room-panel h2{font-size:clamp(25px,5vw,38px);margin:0 0 12px}.room-answer{font-weight:900;font-size:26px}.room-main [hidden]{display:none!important}#roomClock{font-variant-numeric:tabular-nums;font-weight:900;background:var(--yellow);border-radius:12px;padding:12px}#roomMessage{min-height:24px}.room-panel p{line-height:1.55}#roomStage button{margin:6px 8px 6px 0}@media(max-width:600px){.room-panel{padding:18px}.room-players{grid-template-columns:1fr 1fr}.room-player{padding:12px}.room-bar strong{font-size:24px}}#roomClock:empty{display:none}@media(max-width:600px){header{gap:12px;flex-wrap:wrap}header>.logo{margin-right:auto}header>a:not(.logo){font-size:13px}.room-player strong{overflow-wrap:anywhere}}
.live-playing .room-intro{display:none}.live-playing .room-main{max-width:1440px}.live-playing #roomMessage{min-height:0;margin:8px 0}.live-playing .room-panel{padding:18px}.live-playing .room-bar{display:flex;justify-content:space-between}.live-playing .room-bar button{width:auto}.live-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px}.live-art{min-width:0;display:grid;place-items:center;background:var(--lilac);border-radius:20px;overflow:hidden}.live-art>img{width:100%;max-height:65vh;object-fit:contain}.live-studio{width:100%;height:72vh;min-height:580px;border:0;background:var(--paper)}.live-chat{display:flex;flex-direction:column;min-width:0}.live-chat h3{margin:0 0 12px}#chatLog{height:300px;overflow:auto;background:#fffaf2;border:2px solid var(--line);border-radius:16px;padding:12px;flex:1}#chatLog p{margin:0 0 10px;overflow-wrap:anywhere;font-size:14px}.correct-guess{background:var(--mint);border-radius:8px;padding:8px;font-weight:800}#guessStatus{font-size:13px}#guessForm{margin-top:0}.prompt-choices{display:flex;gap:16px;flex-wrap:wrap}.prompt-choices button{min-height:80px;flex:1;font-size:24px}.live-playing #roomStage>h2{font-size:26px}.live-playing #roomStage>p{margin-top:0;font-size:13px}
@media(max-width:800px){.live-layout{grid-template-columns:1fr}.live-studio{height:78svh;min-height:560px}.live-art>img{height:40svh;min-height:240px}.live-chat #chatLog{height:170px;max-height:170px;flex:auto}.live-playing .room-panel{padding:10px}.live-playing #roomStage>h2{font-size:23px}.live-playing .room-bar strong{font-size:18px}.live-playing .room-bar{gap:8px}.live-playing .room-bar button{padding:8px}.prompt-choices{flex-direction:column}}

/* Give the artist the same viewport and breakpoints as the regular studio. */
.live-artist{height:100dvh;overflow:hidden}
.live-artist>header{height:0;margin:0;padding:0;border:0}
.live-artist>header>*{display:none}
.live-artist>header>a:not(.logo){display:block;position:fixed;top:12px;left:24px;z-index:52;font-size:16px;font-weight:800;padding:8px;background:var(--paper);border-radius:10px}
.live-artist .room-main{margin:0;padding:0;width:100%;max-width:none}
.live-artist .room-bar,.live-artist #roomStage>p,.live-artist #roomStage>h2,.live-artist #roomGame>h2,.live-artist #roomPlayers{display:none}
.live-artist #roomStage{margin:0;padding:0;border:0;box-shadow:none}
.live-artist .live-layout{display:block}
.live-artist .live-studio{position:fixed;inset:0;width:100%;height:100dvh;min-height:0;z-index:30;display:block}
.live-artist #artistChatToggle{position:fixed;right:24px;top:10px;z-index:52;width:auto;min-height:42px;margin:0;padding:8px 16px}
.live-artist .live-chat{position:fixed;right:20px;top:72px;bottom:20px;width:min(320px,calc(100vw - 32px));z-index:51;background:var(--paper);padding:16px;border:2px solid var(--line);border-radius:18px;box-shadow:4px 5px 0 var(--line);overflow:auto}
.live-artist #chatLog{min-height:100px;height:auto;max-height:none;flex:1}
.live-artist #roomMessage:not(:empty){position:fixed;bottom:12px;left:16px;z-index:53;background:var(--paper);padding:8px;border-radius:8px;max-width:calc(100vw - 32px)}
@media(max-width:600px){.live-artist>header>a:not(.logo){top:8px;left:8px;font-size:13px}.live-artist #artistChatToggle{top:6px;right:10px;min-height:38px;font-size:13px}.live-artist .live-chat{top:60px;bottom:12px;right:12px}.live-artist #chatLog{height:auto;max-height:none;flex:1}}
/* Spectators get the remaining width/height instead of a small gallery card. */
.live-playing:not(.live-artist)>header{padding-top:10px;padding-bottom:10px;margin-bottom:0}
.live-playing:not(.live-artist) .room-main{padding-top:8px;width:100%;max-width:none}
.live-playing:not(.live-artist) .room-bar{gap:12px}
.live-playing:not(.live-artist) .room-bar strong{font-size:18px}
.live-playing:not(.live-artist) .live-art>img{height:calc(100dvh - 230px);max-height:none;min-height:280px}
@media(max-width:800px){.live-playing:not(.live-artist) .live-art>img{height:55dvh;min-height:260px}}

@media(min-width:1101px){
 .live-artist .live-chat{left:24px;right:auto;top:84px;bottom:18px;width:220px;padding:14px;box-sizing:border-box;box-shadow:2px 3px 0 var(--line)}
 .live-artist #artistChatToggle,.live-artist .live-chat>button{display:none}
 .live-artist .live-chat h3{font-size:20px}
}