/* Shared scrollbar skin for every game page and popup. */
:root{--scroll-thumb:#ffdc00;--scroll-track:#102431}
html,body *{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
body *::-webkit-scrollbar,html::-webkit-scrollbar{width:7px;height:7px}
body *::-webkit-scrollbar-track,html::-webkit-scrollbar-track{background:var(--scroll-track)!important;border-radius:8px}
body *::-webkit-scrollbar-thumb,html::-webkit-scrollbar-thumb{background:var(--scroll-thumb)!important;border:1px solid var(--scroll-track)!important;border-radius:8px}
body *::-webkit-scrollbar-corner{background:var(--scroll-track)}
body *::-webkit-scrollbar-button{display:none}
#game-screen,#settings-panel,#chat-tray{--scroll-thumb:#20bdf5;--scroll-track:#061b2b}
#bg-options{--scroll-thumb:#ffdc00}

.leave-confirm-overlay{position:fixed;inset:0;z-index:2400;display:grid;place-items:center;padding:12px;background:#020810c9;backdrop-filter:blur(5px);color:#eef6ff}
.leave-confirm-overlay>section{box-sizing:border-box;position:relative;width:330px;max-width:calc(100vw - 24px);padding:20px;border:1px solid #20bdf5;border-radius:14px;background:linear-gradient(145deg,#0b2639,#05121e);box-shadow:0 18px 60px #000a;transform:scale(var(--leave-scale,1));transform-origin:center}
.leave-confirm-overlay h2{margin:0 25px 12px 0;font-size:20px}
.leave-confirm-overlay p{margin:0 0 12px;font-size:13px;line-height:1.5;color:#c3d2df}
.leave-confirm-overlay strong{display:block;color:#ffdc00;font-size:14px}
.leave-confirm-overlay section>div{display:flex;gap:10px;margin-top:18px}
.leave-confirm-overlay button{padding:9px 13px;border:1px solid #3c718d;border-radius:8px;background:#0b2436;color:#eef6ff;font:inherit;cursor:pointer}
.leave-confirm-overlay [data-leave-confirm]{margin-left:auto;border-color:#ff3155;background:#ad1738}
.leave-confirm-overlay .leave-confirm-close{position:absolute;top:8px;right:9px;padding:2px 8px;border:0;background:none;font-size:23px}
@media(max-width:843px){.leave-confirm-overlay>section{transform:none}}

/* Six messages and ten reactions fit in two rows each. */
#game-screen #desktop-quick-messages>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible}
#game-screen #desktop-quick-messages .desktop-reactions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow:visible}
#game-screen #desktop-quick-messages button:not(.game-sheet-close){min-width:0;min-height:32px;padding:4px 3px;gap:4px;font-size:11px;line-height:1.2}
#game-screen #desktop-quick-messages .desktop-reactions button{min-height:34px;font-size:23px}
#game-screen #desktop-quick-messages h2{margin-bottom:8px;font-size:16px}
#game-screen #desktop-quick-messages h3{margin:8px 0 6px;font-size:13px}
@media(min-width:1100px){#game-screen #desktop-quick-messages{overflow:visible}}

/* Compact game settings keep all controls reachable in a short panel. */
#settings-panel{background:linear-gradient(145deg,#092537,#051522);border-left:1px solid #18799f}
#settings-header{padding:11px 14px;font-size:18px}
#settings-body{padding:5px 14px 8px;min-height:0;overflow-x:hidden}
#settings-footer{padding:8px 14px}
#settings-panel .settings-section{padding:7px 0}
#settings-panel .settings-section-title{font-size:10px;margin-bottom:5px;letter-spacing:1px}
#settings-panel .setting-item{padding:4px 0;gap:8px}
#settings-panel .setting-item-name{font-size:12px}
#settings-panel .setting-item-hint{font-size:10px;line-height:1.25}
#settings-panel .settings-section:first-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
#settings-panel .settings-section:first-child>.settings-section-title,#settings-panel .music-style-setting,#settings-panel .audio-volume-setting,#settings-panel .audio-preview-actions{grid-column:1/-1}
#settings-panel .music-style-setting{display:flex!important;flex-direction:row;align-items:center}
#settings-panel .music-style-setting .setting-item-hint{display:none}
#settings-panel .music-style-options button,#settings-panel .audio-preview-actions button{min-height:28px;padding:0 8px;font-size:11px}
#settings-panel .audio-preview-actions{padding:0;gap:6px}
#settings-panel .audio-volume-setting{grid-template-columns:95px minmax(0,1fr) 35px;gap:7px}
#settings-panel .audio-volume-setting label{font-size:12px}
#settings-panel .audio-volume-setting output{font-size:11px}
#settings-panel .setting-toggle{width:36px;height:22px}
#settings-panel .toggle-thumb{width:16px;height:16px}
#settings-panel .setting-toggle[aria-checked=true] .toggle-thumb{transform:translateX(14px)}
#settings-panel #bg-options{gap:5px;margin:0;padding:3px 2px 7px}
#settings-panel .bg-swatch{width:54px;min-width:54px;height:40px;aspect-ratio:auto;border-radius:6px;font-size:9px}
#settings-panel .setting-full-btn{padding:6px 8px;min-height:30px;font-size:12px}
#settings-panel .speed-wrap{width:145px}
#settings-panel .speed-labels{font-size:9px}
#settings-panel{font:12px/1.3 Arial,sans-serif}
#settings-panel .setting-item-hint:not(#speed-hint):not(#settings-room-code){display:none}
#settings-panel .settings-section:first-child>.setting-item:nth-child(2){grid-column:1;grid-row:2}
#settings-panel .settings-section:first-child>.setting-item:nth-child(4){grid-column:2;grid-row:2}
#settings-panel .music-style-setting{grid-row:3}
#settings-panel input[type=range]{height:18px;margin:0}
#settings-panel .setting-item-name,#settings-panel .audio-volume-setting label{line-height:1.3}
#settings-panel .setting-item:has(#settings-copy-room) .setting-full-btn{width:auto;flex:0 0 auto}
/* The game header already contains room code and Copy. */
#settings-body>.settings-section:has(#settings-room-code){display:none}
#settings-body>.settings-section:has(#bg-options)>.setting-item{display:none}