/* One layout contract for touch screens; desktop keeps its existing composition. */
#game-mobile-nav{display:none}
#game-screen .game-sheet-close{display:none!important}
.panel-actions{display:contents}
#mute-btn.muted,#music-btn.muted{color:#8ba2b5;opacity:.68;box-shadow:none!important}
#mute-btn[aria-pressed="true"],#music-btn[aria-pressed="true"]{color:#eff9ff}
#tb-room-chip[role="button"],#tb-player-chip[role="button"]{cursor:pointer}
#tb-room-chip[role="button"]:focus-visible,#tb-player-chip[role="button"]:focus-visible{outline:2px solid #5bdcff;outline-offset:2px}
#game-screen.has-custom-background~#settings-backdrop,
#game-screen.has-custom-background #settings-backdrop{
 background:rgba(0,0,0,.18);
}
@media(max-width:1099px){
 #game-screen{--game-width:min(620px,calc(100vw - 16px));display:flex;position:fixed;inset:0;height:100dvh;min-height:0;overflow:hidden;align-items:center;justify-content:flex-start;gap:clamp(6px,1dvh,10px);padding:8px 8px calc(68px + env(safe-area-inset-bottom));box-sizing:border-box}
 #game-screen.hidden{display:none}
 #top-bar,#player-panels,#desktop-game-activity,#controls{width:100%;max-width:var(--game-width);flex-shrink:0}
 #top-bar{height:54px;min-height:54px;gap:5px;padding:5px;justify-content:flex-start}
 #top-bar-left,#top-bar-right{display:contents}
 #top-bar .game-brand{flex:0 1 auto;min-width:0;font-size:16px;gap:3px}
 #top-bar .game-brand img{width:32px;height:32px}#top-bar .game-brand b{font-size:6px;letter-spacing:1px}
 #top-bar #tb-pot-chip{margin-left:auto;flex:0 0 auto;padding:5px;max-width:none}
 #top-bar #tb-pot{font-size:0}#top-bar #tb-pot::after{font-size:12px}
 #top-bar #tb-player-chip{flex:0 0 auto;width:auto;height:34px;padding:0 5px;gap:3px;font-size:11px}
 #top-bar #tb-player-chip svg{width:16px;height:16px}
 #top-bar #tb-online{margin:0!important;height:34px;padding:0 6px;font-size:11px;gap:4px}
 #top-bar #settings-btn{width:36px;height:36px;flex:0 0 36px}
 #top-bar #settings-btn svg{width:20px;height:20px}
 #player-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:74px;gap:6px}
 #player-panels .player-panel{display:block;position:relative;height:74px;min-height:74px;padding:5px;border-radius:11px;overflow:hidden;box-sizing:border-box}
 #player-panels .panel-header{display:block;position:static;min-height:0;padding:0}
 #player-panels .panel-avatar,#player-panels .panel-name,#player-panels .panel-you,#player-panels .panel-color,#player-panels .panel-countdown,#player-panels .panel-pips,#player-panels .panel-info,#player-panels .turn-badge{position:absolute;margin:0;min-width:0;box-sizing:border-box}
 #player-panels .panel-avatar{left:5px;top:5px;width:30px;height:30px;font-size:12px;border-width:2px}#player-panels .panel-avatar svg{width:21px;height:21px}
 #player-panels .panel-name{left:40px;right:58px;top:5px;padding:0;font-size:11px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #player-panels .panel-you{display:block;left:40px;top:20px;padding:1px 4px;font-size:8px;line-height:10px}
 #player-panels .panel-actions{display:flex;position:absolute;right:4px;top:4px;gap:3px;height:24px}
 #player-panels .panel-actions button{display:flex;position:static;width:23px;height:24px;padding:3px;align-items:center;justify-content:center;border-radius:6px;box-sizing:border-box}
 #player-panels .panel-actions button svg{width:14px;height:14px}
 #player-panels .panel-color{left:5px;top:39px;width:30px;padding:2px 0;border-radius:7px;font-size:8px;text-align:center;text-transform:uppercase}
 #player-panels .panel-countdown{display:flex;left:40px;right:5px;top:32px;gap:4px;align-items:center;font-size:9px;line-height:11px}
 #player-panels .panel-countdown>span{display:block;flex:1;height:5px;border:1px solid #386079;border-radius:8px;background:linear-gradient(to right,#aaff00 var(--turn-progress,0%),#061722 var(--turn-progress,0%))}
 #player-panels .panel-pips{display:flex;left:40px;top:47px;gap:3px;padding:0}
 #player-panels .panel-pip{width:11px;height:11px;border-width:1px}
 #player-panels .panel-info{display:flex;left:5px;right:5px;bottom:3px;gap:2px;font-size:9px;line-height:11px}
 #player-panels .panel-stake{display:flex;align-items:center;gap:2px;max-width:calc(100% - 48px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #player-panels .panel-stake svg{width:9px;height:9px;flex-shrink:0;color:#ffda00}
 #player-panels .turn-badge{right:4px;bottom:3px;font-size:8px;padding:1px 4px;white-space:nowrap;text-transform:none;line-height:11px}
 #player-panels .empty-seat .panel-name{right:5px}.player-panel.empty-seat .panel-countdown{display:none}#player-panels .empty-seat .panel-pips{top:35px}#player-panels .empty-seat .panel-info{bottom:5px}
 #game-container{order:2;position:relative;flex:none;width:min(calc(100vw - 16px),calc(100dvh - 444px),var(--game-width));max-width:var(--game-width);height:auto!important;aspect-ratio:1;min-height:0;margin:0;overflow:hidden}
 #desktop-game-activity{order:3;display:block;overflow:visible}
 .desktop-recent-moves{min-height:42px;padding:5px 8px;gap:6px}
 .desktop-recent-moves h2{margin:0}.desktop-recent-moves h2::before{font-size:10px}.desktop-recent-moves h2 svg{width:16px;height:16px}
 #desktop-activity-list li:first-child{display:block;font-size:12px;min-height:0;line-height:16px}
 #desktop-activity-list li:first-child:has(time){display:grid;grid-template-columns:16px minmax(0,1fr) auto}
 #desktop-activity-list b{white-space:normal;overflow-wrap:anywhere}
 .desktop-recent-moves::after{display:none}
 #controls{order:4;flex:none;height:74px;min-height:74px;max-width:var(--game-width)}#controls::after{display:none}
 #controls #dice-value{flex:none;display:grid;grid-template-columns:130px 60px;grid-template-rows:60px;gap:6px;width:210px;height:74px;margin:0;padding:5px;border-width:2px}
 #controls #desktop-roll-btn{grid-area:1 / 1;width:100%;height:60px;min-height:0;font-size:24px}
 #controls #roll-btn{grid-area:1 / 2;position:relative;width:60px;height:60px;padding:0;display:grid;place-items:center}
 #controls .desktop-flat-die{display:none}#controls .dice-3d-scene{display:block;margin:0;transform:scale(.8)}
 #fab-group{display:none}
 #game-mobile-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;position:fixed;z-index:210;bottom:0;left:50%;transform:translateX(-50%);width:min(calc(100% - 16px),var(--game-width));padding:8px 0 calc(8px + env(safe-area-inset-bottom));box-sizing:border-box;background:#031522f5;border-top:1px solid #187a9e}
 #game-mobile-nav button{min-height:44px;border:1px solid #139cd2;border-radius:12px;background:#082a43;color:#eef7ff;font-size:14px;font-weight:700}
 #game-mobile-nav button[aria-expanded=true]{background:#105580;border-color:#51d5ff}
 #game-screen #desktop-quick-messages,#game-screen .desktop-room-audio{display:none}
 #game-screen[data-sheet=messages] #desktop-quick-messages,#game-screen[data-sheet=audio] .desktop-room-audio,#game-screen[data-sheet=activity] .desktop-recent-moves{display:block;position:fixed;z-index:220;inset:auto 8px calc(72px + env(safe-area-inset-bottom));width:auto;max-width:620px;max-height:calc(100dvh - 155px);margin:0 auto;overflow:auto;padding:14px;border:1px solid #19bfff;border-radius:16px;background:#041c2cfb;box-shadow:0 -15px 60px #000a;box-sizing:border-box;color:#eef6ff}
 #game-screen[data-sheet] .game-sheet-close{display:block!important;float:right;min-width:44px;min-height:36px;margin:0 0 8px 8px;border:1px solid #3887a8;border-radius:8px;background:#0b314b;color:#fff}
 #desktop-quick-messages h2,.desktop-room-audio h2{font-size:18px;margin:0 0 12px}#desktop-quick-messages h3,.room-audience h3{font-size:14px}
 #desktop-quick-messages>div,.room-audio-actions,#room-audience-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;clear:both}
 #desktop-quick-messages button:not(.game-sheet-close),.desktop-room-audio button:not(.game-sheet-close){min-height:44px;padding:6px;border:1px solid #267b9c;border-radius:9px;background:#092c43;color:white;font-size:13px}
 #desktop-quick-messages .desktop-reactions{grid-template-columns:repeat(5,minmax(0,1fr))}#desktop-quick-messages .desktop-reactions button{font-size:24px}
 .desktop-room-audio button svg{width:20px;height:20px}.desktop-room-audio em{color:#32ec95;font-size:12px}
 #game-screen[data-sheet=activity] .desktop-recent-moves h2{font-size:17px;display:block}#game-screen[data-sheet=activity] .desktop-recent-moves h2::before{display:none}
 #game-screen[data-sheet=activity] #desktop-activity-list li{display:block;padding:10px 0;border-bottom:1px solid #24516d;font-size:13px}#game-screen[data-sheet=activity] #desktop-activity-list time{float:right}
 #settings-panel{width:min(100%,360px);height:100dvh}
}
@media(min-width:700px) and (max-width:1099px){
 #game-screen{--game-width:calc(100vw - 24px);padding-inline:12px}#player-panels{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:82px}#player-panels .player-panel{height:82px;min-height:82px;padding:6px}#game-container{width:min(calc(100vw - 24px),calc(100dvh - 388px),var(--game-width))}
 #top-bar{height:62px;min-height:62px;padding:6px 9px}#top-bar .game-brand img{width:40px;height:40px}#top-bar .game-brand{font-size:19px}
 #top-bar #tb-room-chip{display:flex!important;min-width:0;flex:0 1 170px;padding:5px 7px}
 #top-bar #tb-room-chip .tb-chip-copy{display:block;min-width:0}#top-bar #tb-room-code{font-size:14px}
 #top-bar #tb-room-chip .tb-chip-divider,#top-bar #tb-copy-room{display:flex!important}
 #top-bar #tb-pot{font-size:15px}#top-bar #tb-pot::after{display:none}
 #top-bar #tb-online{font-size:12px;padding-inline:8px}
 #top-bar #mute-btn,#top-bar #music-btn{display:inline-flex!important;width:38px;height:38px;flex:0 0 38px}
 #desktop-game-activity{min-height:46px}.desktop-recent-moves{min-height:46px}#controls{height:80px;min-height:80px}
}

/* Tall phones have useful room below the roll control, so activity belongs
   there instead of separating the player cards from the board. */
@media(max-width:699px){
 #controls{order:3}
 #desktop-game-activity{order:4}
}

/* Short phones keep every section visible by compacting the header and player
   cards; the board, roll control and Recent Moves retain their normal order. */
@media(max-width:699px) and (max-height:740px){
 #game-screen{gap:4px;padding:6px 8px calc(58px + env(safe-area-inset-bottom))}
 #top-bar{height:46px;min-height:46px;padding:3px 5px}
 #top-bar .game-brand{font-size:14px}#top-bar .game-brand img{width:28px;height:28px}
 #top-bar #tb-pot-chip{height:32px;padding:3px 5px}#top-bar #tb-player-chip,#top-bar #tb-online{height:30px}
 #top-bar #settings-btn{width:32px;height:32px;flex-basis:32px}
 #player-panels{grid-auto-rows:56px;gap:4px}
 #player-panels .player-panel{height:56px;min-height:56px;padding:3px;border-radius:9px}
 #player-panels .panel-avatar{left:3px;top:3px;width:24px;height:24px;font-size:10px}
 #player-panels .panel-name{left:31px;right:52px;top:3px;font-size:9px;line-height:11px}
 #player-panels .panel-you{left:31px;top:14px;font-size:7px;line-height:8px}
 #player-panels .panel-actions{right:3px;top:3px;height:20px;gap:2px}
 #player-panels .panel-actions button{width:20px;height:20px;padding:2px}#player-panels .panel-actions button svg{width:12px;height:12px}
 #player-panels .panel-color{left:3px;top:30px;width:25px;font-size:7px;padding:1px 0}
 #player-panels .panel-countdown{left:31px;right:3px;top:24px;font-size:8px;line-height:9px}
 #player-panels .panel-countdown>span{height:3px}
 #player-panels .panel-pips{left:31px;top:36px;gap:2px}#player-panels .panel-pip{width:8px;height:8px}
 #player-panels .panel-info{left:3px;right:3px;bottom:1px;font-size:7px;line-height:8px}
 #player-panels .turn-badge{right:3px;bottom:1px;font-size:7px;line-height:8px}
 #player-panels .empty-seat .panel-pips{top:30px}#player-panels .empty-seat .panel-info{bottom:2px}
 #game-container{width:min(calc(100vw - 16px),calc(100dvh - 347px),var(--game-width))}
 #controls{height:62px;min-height:62px}
 #controls #dice-value{grid-template-columns:118px 50px;grid-template-rows:50px;width:184px;height:62px;padding:4px}
 #controls #desktop-roll-btn{height:50px;font-size:22px}#controls #roll-btn{width:50px;height:50px}#controls .dice-3d-scene{transform:scale(.66)}
 .desktop-recent-moves{min-height:34px;height:34px;padding:3px 7px}
 #desktop-activity-list li:first-child{font-size:10px;line-height:13px}
 #game-mobile-nav{padding:5px 0 calc(5px + env(safe-area-inset-bottom))}
 #game-mobile-nav button{min-height:38px;font-size:12px}
}

/* Controls remain identifiable if the optional icon CDN is unavailable. */
i[data-lucide]{display:inline-grid;place-items:center;font-style:normal}
i[data-lucide]::before{font-size:1em;line-height:1;color:currentColor}
i[data-lucide="settings"]::before{content:"\2699"}i[data-lucide="users"]::before,i[data-lucide="user-round"]::before{content:"\2637"}
i[data-lucide="copy"]::before{content:"\29C9"}i[data-lucide="coins"]::before{content:"\25CE"}i[data-lucide="log-out"]::before{content:"\21AA"}
i[data-lucide="volume-2"]::before{content:"\1F50A"}i[data-lucide="volume-x"]::before{content:"\1F507"}i[data-lucide="music-2"]::before{content:"\266B"}
i[data-lucide="mic"]::before{content:"\1F399"}i[data-lucide="audio-lines"]::before{content:"\224B"}i[data-lucide="smile"]::before{content:"\263A"}
i[data-lucide="sliders-horizontal"]::before{content:"\2637"}i[data-lucide="messages-square"]::before{content:"\25A1"}i[data-lucide="dices"]::before{content:"\2684"}
/* The animated turn fill belongs inside the dedicated countdown track on
   every layout, never on the player-card border. */
.panel-countdown>span{position:relative;overflow:hidden}
.player-panel .panel-countdown .turn-timer-bar{inset:0!important;width:100%!important;height:100%!important;border-radius:inherit!important;box-shadow:0 0 8px currentColor!important}

/* Mid-width headers have enough room for the room code. Narrow phones retain
   the deliberately minimal header. */
@media(min-width:540px) and (max-width:699px){
 #top-bar #tb-room-chip{display:flex!important;flex:0 1 118px;max-width:118px;padding:4px 6px}
 #top-bar #tb-room-chip .tb-chip-copy{display:block;min-width:0}
 #top-bar #tb-room{font-size:11px;letter-spacing:1px}
 #top-bar #tb-room-chip .tb-chip-icon{display:flex;width:15px;height:15px}
}

/* Compact bottom sheets: actions run horizontally and the board stays
   visible behind a shallow, smoothly entering drawer. */
@media(max-width:1099px){
 #game-screen[data-sheet=messages] #desktop-quick-messages,
 #game-screen[data-sheet=audio] .desktop-room-audio,
 #game-screen[data-sheet=activity] .desktop-recent-moves{max-height:min(230px,38dvh);padding:9px 10px;animation:game-sheet-in .2s ease-out both}
 #game-screen[data-sheet] .game-sheet-close{position:sticky;top:0;z-index:2;min-height:29px;height:29px;margin:0 0 4px 7px;padding:2px 8px;font-size:11px}
 #desktop-quick-messages h2,.desktop-room-audio h2{margin:0 0 6px;font-size:14px}
 #desktop-quick-messages h3,.room-audience h3{margin:6px 0 4px;font-size:11px}
 #desktop-quick-messages>div,#desktop-quick-messages .desktop-reactions{display:flex;grid-template-columns:none;gap:5px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
 #desktop-quick-messages button:not(.game-sheet-close){flex:0 0 auto;min-width:128px;min-height:34px;padding:4px 8px;font-size:11px}
 #desktop-quick-messages .desktop-reactions button{min-width:48px;min-height:36px;font-size:20px}
 .desktop-room-audio .room-audio-actions{display:flex;gap:5px;overflow-x:auto}.desktop-room-audio .room-audio-actions button:not(.game-sheet-close){flex:1 0 92px;min-height:38px;padding:3px;font-size:9px}
 .desktop-room-audio .room-audience{margin-top:5px;padding-top:4px}.desktop-room-audio #room-audience-choices{display:flex;gap:5px;overflow-x:auto}.desktop-room-audio #room-audience-choices button{flex:1 0 110px;min-height:29px!important}
 .room-device-settings{margin-top:5px;padding-top:5px}.room-device-settings select{padding:4px;font-size:10px}.room-device-settings small{display:none}
 #game-screen[data-sheet=activity] #desktop-activity-list{max-height:125px;overflow-y:auto}
 @keyframes game-sheet-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
}

/* A selected card owns its quick-message bubble. */
.player-panel>.chat-bubble-targeted{position:absolute;z-index:18;left:8px;top:8px;max-width:calc(100% - 16px);margin:0;font-size:10px;animation:chat-in .2s ease-out both}

/* Waiting rooms can use the same live room voice before the board starts. */
#lobby-room-audio-btn{display:none;position:fixed;right:18px;bottom:18px;z-index:650;align-items:center;gap:7px;min-height:42px;padding:7px 13px;border:1px solid #18bdf2;border-radius:13px;background:#082b46;color:#f2f9ff;font-weight:800;box-shadow:0 6px 22px #0008}
body:has(#lobby:not(.hidden)) #lobby-room-audio-btn{display:flex}
#lobby-room-audio-btn.active{border-color:#1bef91;background:#075038;box-shadow:0 0 14px #13e88677}

/* Keep the desktop activity column bounded so opening device settings cannot
   push Recent Moves below the viewport. */
@media(min-width:1100px){
 #desktop-game-activity{min-height:0;overflow:hidden!important}
 .desktop-room-audio{flex:0 0 auto;max-height:65%;overflow:auto}
 .desktop-recent-moves{flex:1 1 110px!important;min-height:90px!important}
}

/* Voice activity is a status light, not a control. Its three bars pulse only
   while the analyser detects speech. */
.panel-voice{cursor:default!important;gap:2px}
.panel-voice>i{display:block;width:3px;height:7px;border-radius:3px;background:currentColor;transform-origin:center;opacity:.42}
.panel-voice.active>i,.player-panel.is-speaking .panel-voice>i{opacity:1;animation:voice-pulse .62s ease-in-out infinite alternate}
.panel-voice.active>i:nth-child(2),.player-panel.is-speaking .panel-voice>i:nth-child(2){animation-delay:.14s}
.panel-voice.active>i:nth-child(3),.player-panel.is-speaking .panel-voice>i:nth-child(3){animation-delay:.28s}
@keyframes voice-pulse{from{height:5px}to{height:18px}}
@media(max-width:1099px){
 #player-panels .panel-actions .panel-voice{display:inline-flex;position:static;width:23px;height:24px;align-items:center;justify-content:center;padding:3px;border:1px solid #00a9e8;border-radius:6px;box-sizing:border-box}
 .panel-voice.active>i,.player-panel.is-speaking .panel-voice>i{animation-name:voice-pulse-small}
 @keyframes voice-pulse-small{from{height:4px}to{height:12px}}
}
i[data-lucide="mic-off"]::before{content:"\1F507"}

/* Warning extra time reuses the normal countdown row and therefore never
   covers the player's name, controls, tokens, or stake. */
.player-panel.has-player-warning .panel-countdown{display:flex!important}

/* Expanded Moves is a real shallow sheet, not the collapsed one-line ticker. */
@media(max-width:1099px){
 #game-screen[data-sheet=activity] .desktop-recent-moves{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);height:auto!important;min-height:155px!important;max-height:min(230px,38dvh)!important;overflow:hidden!important;align-items:start}
 #game-screen[data-sheet=activity] .desktop-recent-moves h2{grid-column:1;grid-row:1;align-self:center;margin:0!important;padding:0!important;border:0;font-size:15px!important}
 #game-screen[data-sheet=activity] .desktop-recent-moves .game-sheet-close{grid-column:2;grid-row:1;position:static;float:none;margin:0 0 5px 8px}
 #game-screen[data-sheet=activity] #desktop-activity-list{grid-column:1/-1;grid-row:2;width:100%;max-height:none;min-height:0;margin:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#20bdf5 #061b2b}
 #game-screen[data-sheet=activity] #desktop-activity-list li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:7px;min-height:32px;padding:4px 2px}
 #game-screen[data-sheet=activity] #desktop-activity-list::-webkit-scrollbar{width:7px}
 #game-screen[data-sheet=activity] #desktop-activity-list::-webkit-scrollbar-track{border-radius:8px;background:#061b2b}
 #game-screen[data-sheet=activity] #desktop-activity-list::-webkit-scrollbar-thumb{border:1px solid #06314a;border-radius:8px;background:linear-gradient(#34d4ff,#087fb5)}
}