/* 小SA自习室 · viewport audit fixes (2026-10-10): every surface checked from 320 px phones to 2560 px ultrawide for
   overlapping controls, text spilling out of its box and labels broken onto a second line. Loaded last on both pages
   (自习室 and 大厅), so each rule here wins over the component's own sheet; keep the reason next to each rule. */

/* Headings never leave a lone character on a line of its own (与小 SA 相 / 伴, 你好，这是你的见面 / 礼), nor do pool tiles
   (银票古市服装祈 / 愿); body copy in dialogs avoids a one-character last line where the browser can (text-wrap:pretty). */
dialog h1,dialog h2,dialog h3,.sap-track,.sar-result-name,.sg9-pool span{text-wrap:balance}
dialog p,dialog li,dialog small{text-wrap:pretty}

/* Phone top bar: seven buttons share ~300 px at 320–400 px wide. 回到系统 keeps only its arrow, gaps shrink, and buttons
   may narrow instead of their labels spilling under the next one (我的主页 under 衣橱). */
@media (max-width:400px){
 .sa-compact .ctrl{gap:4px;padding-left:8px;padding-right:8px}
 .sa-compact .ctrl>button{min-width:0;flex:0 1 auto;padding:0 5px}
 .sa-compact .ctrl>#saSystemBack{flex:none;width:30px;padding:0;font-size:0}
}

/* 衣橱 on phones: the balance sat absolutely in the corner, under 关闭. It now follows the title on its own line. */
@media (max-width:720px){
 #saShop .sa-shop-header{display:block!important;min-height:0!important;padding:12px 66px 10px 14px!important}
 #saShop .sa-shop-header .sa-wallet{position:static;display:flex;align-items:baseline;gap:6px;margin-top:4px;white-space:nowrap}
 #saShop .sa-shop-header .sa-wallet b{font-size:18px}
}

/* 唱片铺 on phones: the title broke into 唱片 / 铺 next to the coin pill. It keeps its width with 关闭 beside it, and
   the pill takes the next row. */
@media (max-width:760px){
 .sar-close{order:2;margin-left:auto}.sar-coins{order:3;gap:4px;padding:3px 9px}
}

/* 祈愿 on short phones: the sticky draw bar covered the featured outfit's name plate. The plate moves up. */
@media (max-width:740px) and (max-height:700px){.sg9-signature{top:224px!important}}

/* Menus at 400 px and under: two groups side by side left 120 px buttons, so 动态：开 and 总静音 broke over lines. */
@media (max-width:400px){.sa-menu-groups{grid-template-columns:1fr!important}}

/* Player header under 980 px: with the 我的音乐 / 大厅 switch the middle column narrows, and the centred heading sized
   itself to its unbroken context line, spilling over the collapse and style buttons. It now fills its column and the
   line ends in an ellipsis. */
@media (max-width:979px){.sap-heading{justify-self:stretch;min-width:0;overflow:hidden}.sap-context{max-width:100%}}

/* 大厅 status line (room messages): on wide screens it sat 74 px up, inside the timer panel over 后台播放与积分规则;
   on short landscape phones at the very bottom, over the music row. It now floats just above the panels. */
@media (min-width:1180px) and (min-height:501px){.in-room #status{bottom:calc(var(--hall-controls,120px) + 26px + env(safe-area-inset-bottom))!important}}
@media (max-width:1179px),(max-height:500px){.in-room #status{bottom:calc(var(--hall-dock,120px) + 14px + env(safe-area-inset-bottom))!important}}

/* 祈愿 on landscape phones (≤500 px tall): title, wallet and tabs took 140 px and the fixed draw bar 110 px, leaving the
   pool list half hidden behind the buttons. The wallet moves up into the title row (between the title and 关闭), the
   bar slims down (its exchange hint is
   also on the 兑换祈愿券 tab), and the stage keeps just enough room below to scroll past it. */
@media (orientation:landscape) and (max-height:500px){

 #saGacha .sg9-footer{padding:8px 14px calc(6px + env(safe-area-inset-bottom))!important}
 #saGacha .sg9-exchange{display:none}
 #saGacha .sg9-draw{min-height:40px!important;padding:4px 10px!important}
 #saGacha .sg9-stage{padding-bottom:70px}
}

/* 祈愿 on phones: the featured outfit's name plate sat on the pool card's top edge; it rides higher over the art. The
   first draw button was see-through, so the card text scrolling under the fixed bar showed through it. */
@media (max-width:740px){.sg9-signature{top:236px}#saGacha .sg9-draw:first-child{background:#fbf6ec!important}}

/* 自习室主页 header at 320 px: the title broke into three lines (自习 / 室主 / 页) beside the tabs. */
@media (max-width:400px){.sap2-head{gap:8px}.sap2-head h2{white-space:nowrap;font-size:16px}.sap2-tab{padding:6px 11px}}

/* 自习室主页 wearing list: values like 绯色 · 原作 left 作 alone on a line. */
.sap2 dd,.sap2 [class*=wear] b{text-wrap:balance}

/* 音乐桌面 bar at 360 px and under: the song title and source were squeezed to one character each (太. / 原..). The
   caption above already names the song, so the bar keeps the cover and the buttons. */
@media (max-width:380px){.smd-hud .smd-text{display:none}}

/* 歌曲库 drawer on phones: its 92% backdrop let the page's own player bar show through behind the queue. */
@media (max-width:720px){dialog.sap-sheet.sap-drawer{background:rgba(16,11,8,.985)!important}}

/* 唱片铺 · 我的唱片: the batch-recycle button sat in the page head with no button styling (a grey browser default). */
.sar-page-head .sar-recycle{padding:7px 14px;border-radius:11px;border:1px solid #9fd6a066;background:#ffffff0d;color:#e8f6df;font-size:12.5px}
.sar-page-head .sar-recycle:hover{background:#ffffff18}

/* 大厅 on landscape phones: the open chat panel reaches the top, and the voice and zoom pills peeked out over its top
   edge. While chat is open they step aside; closing chat brings them back. */
@media (max-height:500px){.in-room.chat-open .room-voice,.in-room.chat-open .scene-camera-controls{visibility:hidden}}