/* Hall v3 polish — same night surface as the personal room. Presentation only. */

/* ---------- Seats: readable names, who is studying, livelier bubbles ---------- */
.seat .label{display:inline-flex;align-items:center;gap:5px;bottom:-16px;padding:3px 9px;border-radius:99px;font-size:11.5px;letter-spacing:.02em;background:rgba(32,24,18,.82);color:#f3e6cf;border:1px solid rgba(216,176,120,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0,0,0,.28);transition:background-color .2s,box-shadow .2s}
.seat.self .label{background:linear-gradient(180deg,#f0c57c,#cf9440);color:#2b1c08;border-color:rgba(255,255,255,.5)}
.seat[data-status] .label::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#9a8f80}
.seat[data-status=""] .label::before{display:none}
.seat[data-status=study] .label::before{background:#7fd28f;box-shadow:0 0 0 0 rgba(127,210,143,.7);animation:hall-pulse 2.2s ease-out infinite}
.seat[data-status=break] .label::before{background:#f0c57c}
.seat.empty .label{color:#f3e6cf;background:rgba(32,24,18,.42);border:1px dashed rgba(243,230,207,.5);opacity:.75}
.seat.empty:hover .label,.seat.empty:focus-visible .label{opacity:1;background:rgba(32,24,18,.8)}
.seat .timer{border-radius:99px;padding:5px 12px;font-variant-numeric:tabular-nums;box-shadow:0 8px 20px rgba(0,0,0,.35);animation:hall-pop .22s cubic-bezier(.2,1.2,.3,1)}
.voice-speaking .label{box-shadow:0 0 0 2px #8fd0a3,0 0 16px rgba(143,208,163,.7)}
.speech-bubble{border:0;border-radius:14px;padding:8px 13px;font-size:13px;color:#3a2c20;background:#fffaf0;box-shadow:0 10px 26px rgba(0,0,0,.3);transform-origin:50% 100%;animation:hall-bubble-in .32s cubic-bezier(.2,1.3,.3,1),hall-bubble-out .5s ease-in 7.5s forwards}
.speech-bubble::after{content:"";position:absolute;left:50%;bottom:-5px;width:12px;height:12px;translate:-50% 0;rotate:45deg;background:#fffaf0;border-radius:0 0 3px 0}
.speech-bubble:has(.sa-chat-sticker){background:#fffaf0;padding:4px}
.sa-seat-goal{border-radius:99px;padding:3px 9px;color:#3a2c20;background:rgba(255,250,240,.92);box-shadow:0 4px 12px rgba(0,0,0,.2)}
@keyframes hall-pulse{0%{box-shadow:0 0 0 0 rgba(127,210,143,.7)}70%,100%{box-shadow:0 0 0 7px rgba(127,210,143,0)}}
@keyframes hall-pop{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
@keyframes hall-bubble-in{from{opacity:0;scale:.5;translate:0 10px}to{opacity:1;scale:1;translate:0 0}}
@keyframes hall-bubble-out{to{opacity:0;translate:0 -8px}}

/* ---------- Floating chrome ---------- */
.in-room .controls,.in-room .music,.room-voice,.scene-camera-controls{border:1px solid rgba(216,176,120,.3);border-radius:16px;background:linear-gradient(165deg,rgba(46,35,25,.86),rgba(24,18,13,.84));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 14px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,238,210,.08);animation:hall-rise .6s cubic-bezier(.2,.7,.2,1) backwards}
.in-room .music{animation-delay:.08s}
/* Press feedback uses the independent scale property: seats and wheel buttons position themselves with transform. */
.in-room button:not(.seat),.in-room select{transition:background-color .18s,border-color .18s,scale .12s}
.in-room button:not(.seat):not(:disabled):active{scale:.96}
.in-room .controls button,.in-room .music button,.room-voice button,.in-room>header button{border-radius:999px}
.own-timer b{background:linear-gradient(180deg,#fff7e8 20%,#efcd97);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}
#timerToggle,.in-room .primary{color:#2b1c08;border-color:transparent;background:linear-gradient(180deg,#f0c57c,#cf9440);box-shadow:0 6px 16px rgba(214,160,80,.3),inset 0 1px 0 rgba(255,255,255,.4)}
#timerToggle:hover,.in-room .primary:hover{background:linear-gradient(180deg,#f6d08c,#d99f49);color:#2b1c08}
.in-room>header{background:linear-gradient(rgba(18,14,10,.82),rgba(18,14,10,.4) 62%,rgba(18,14,10,0))}
.in-room>header h1{font:600 22px/1.3 "Songti SC",serif;letter-spacing:.08em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.in-room #roomMeta{text-shadow:0 1px 6px rgba(0,0,0,.7)}
@keyframes hall-rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
/* Wide screens: timer and music share one low strip instead of two stacked bars over the back row. */
@media(min-width:1180px) and (min-height:501px){
  .in-room .controls{left:20px;transform:none;bottom:calc(18px + env(safe-area-inset-bottom));max-width:calc(62% - 30px)}
  .in-room .music{left:auto;right:20px;transform:none;width:min(480px,calc(38% - 30px));bottom:calc(18px + env(safe-area-inset-bottom))}
  .in-room #private{bottom:96px}
  .in-room #status{bottom:calc(74px + env(safe-area-inset-bottom));text-align:center}
}

/* ---------- Chat and dialogs ---------- */
.chat-open #private:not([hidden]){animation:hall-rise .3s cubic-bezier(.2,.7,.2,1)}
#private{border-radius:18px;background:linear-gradient(170deg,rgba(43,33,24,.97),rgba(29,22,16,.97))}
#chat{border-radius:12px}
#chat p{animation:hall-rise .3s cubic-bezier(.2,.7,.2,1)}
#emojiWheel,#emojiWheel:has(.sa-sticker-picker){background:#2b2118;border:1px solid rgba(216,176,120,.32);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
#emojiWheel>button{font-size:22px;transition:scale .15s,background-color .18s}
#emojiWheel>button:hover{scale:1.18}
body>dialog:not(.sa-nav-menu):not(.sa-tools-dialog):not(.study-board){border-radius:20px;border:1px solid rgba(216,176,120,.4);background:linear-gradient(170deg,#2b2118,#1d1610);box-shadow:0 30px 100px rgba(0,0,0,.6)}
body>dialog h2{font:600 21px/1.3 "Songti SC",serif;letter-spacing:.08em}
.dialog-head button,#sceneryShop>button{border-radius:999px}
.scenery-grid article{border-radius:16px;border-color:rgba(216,176,120,.28);background:rgba(255,255,255,.03);transition:translate .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
.scenery-grid img{border-radius:11px}
.scenery-grid article:hover{translate:0 -3px;border-color:rgba(216,176,120,.6);box-shadow:0 12px 28px rgba(0,0,0,.4)}

/* ---------- Lobby ---------- */
#lobby .welcome{position:relative;overflow:hidden;border-color:rgba(216,176,120,.36);background:linear-gradient(100deg,rgba(29,22,16,.94) 8%,rgba(29,22,16,.62) 52%,rgba(29,22,16,.16)),url('layers-v2/room.webp') 60% center/cover;animation:hall-rise .6s cubic-bezier(.2,.7,.2,1) backwards}
#lobby .welcome h2{font-weight:600;letter-spacing:.06em;text-shadow:0 2px 16px rgba(0,0,0,.6)}
#lobby .welcome .primary{margin-top:8px;padding:12px 28px;font-size:15px;border-radius:999px}
#lobby .room-options{border-color:rgba(216,176,120,.3);background:linear-gradient(170deg,rgba(43,33,24,.95),rgba(29,22,16,.95));animation:hall-rise .6s cubic-bezier(.2,.7,.2,1) .1s backwards}
#lobby .room-options button{border-radius:999px}
#lobby .room-options :is(input,select){border-radius:11px}

@media(max-width:700px){
  .seat .label{font-size:9px;padding:2px 6px;bottom:-10px;gap:3px}
  .seat[data-status] .label::before{width:5px;height:5px}
  .speech-bubble{font-size:11px;padding:6px 10px}
  .in-room>header h1{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.in-room *,#lobby *,.speech-bubble,.seat .label::before{animation:none!important;transition:none!important}}