canvas{touch-action:none}button,input,select{touch-action:manipulation}input,textarea{-webkit-user-select:text;user-select:text}
.compact-only,.mobile-sheet-title{display:none}
#graphics-status{position:fixed;z-index:100;inset:0;display:grid;place-content:center;text-align:center;padding:24px;background:#0b101de8;color:#f6d78f}
@media(max-width:1023px),(pointer:coarse) and (max-width:1366px){
 html,body{height:100vh;height:100dvh;overscroll-behavior:none;overflow:hidden}
 body{--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)}
 .compact-only{display:flex}
 body.ui-compact header,body.ui-compact.network-online header{top:calc(6px + var(--safe-top));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));width:auto;max-width:none;transform:none;gap:0;z-index:50}
 header>nav{display:grid!important;grid-template-columns:minmax(0,1fr) 44px;gap:5px!important;padding:7px 10px!important;border-radius:20px!important;width:100%;min-width:0}
 header nav>div:first-child{grid-column:1;grid-row:1;min-width:0;gap:8px;padding:0}
 header nav>div:first-child>div:last-child{display:block!important;min-width:0}
 #brand-badge{width:29px;height:29px;flex-shrink:0}#brand-title{font-size:11px;white-space:nowrap}#brand-subtitle{display:none}
 #mobile-menu-button{grid-column:2;grid-row:1;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;border:1px solid #c49a4a66;color:#e9c36b;background:#b58b2730}
 #mobile-menu-button>span:last-child{display:none}
 #scoreboard{grid-column:1/-1;grid-row:2;display:grid;width:100%;min-width:0;grid-template-columns:minmax(0,1fr) minmax(102px,1.3fr) minmax(0,1fr);padding:3px 4px;gap:3px;min-height:35px}
 #scoreboard #marble-pill,#scoreboard #obsidian-pill{width:100%;min-width:0;padding:3px 4px;gap:3px}
 #scoreboard #label-team-1,#scoreboard #label-team-2{display:block!important;font-size:10px;min-width:0}
 #scoreboard #score-marble,#scoreboard #score-obsidian{width:15px;font-size:10px;padding:0}
 #scoreboard #turn-label{font-size:10px;letter-spacing:0}#scoreboard #sub-status{font-size:9px}
 #scoreboard #dot-team-2,#marble-pill>span:first-child{width:7px;height:7px}
 #canvas-container{top:var(--scene-top,104px);bottom:var(--scene-bottom,76px);height:auto;width:auto;left:0;right:0}
 #mobile-toolbar{position:fixed;bottom:calc(8px + var(--safe-bottom));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));z-index:40;padding:6px;gap:5px;border-radius:20px;background:#101724ee;border:1px solid #b88d3c55;box-shadow:0 4px 24px #0008;display:flex}
 #mobile-toolbar button{display:flex;flex:1;min-width:44px;min-height:48px;align-items:center;justify-content:center;flex-direction:column;gap:2px;border-radius:13px;color:#e8d5a5;background:#202b3d;border:1px solid #8795ac33;position:relative;font-size:10px}
 #mobile-toolbar button .material-symbols-outlined{font-size:21px}
 #mobile-toolbar button[aria-pressed="true"]{color:#ffdc80;background:#83601866;border-color:#d9a84377}
 #mobile-toolbar .online-only{display:none}body.network-online #mobile-toolbar .online-only{display:flex}
 .mobile-badge{position:absolute;top:0;right:3px;min-width:16px;padding:1px 3px;border-radius:8px;background:#9f3437;color:white;font-size:10px;line-height:14px}
 #mobile-backdrop{position:fixed;inset:0;z-index:45;background:#03060d99;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
 #main-controls,#lan-bar,body .chat-panel,body.network-online .players-panel{position:fixed;top:auto;bottom:calc(80px + var(--safe-bottom));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));margin:0 auto;width:auto;max-width:560px;max-height:min(72dvh,calc(var(--visual-height,100dvh) - 105px));overflow:auto;overscroll-behavior:contain;border-radius:20px;box-shadow:0 16px 70px #000b;z-index:60;background:#101724fa;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 #main-controls{display:none;padding:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 body.sheet-menu #main-controls{display:grid!important}
 .mobile-sheet-title{display:flex;grid-column:1/-1;justify-content:space-between;align-items:center;gap:8px;min-width:0;color:#f2d48e;font-weight:bold;font-size:14px;min-height:44px}
 #main-controls .mobile-sheet-title button{width:44px;min-width:44px;flex:0 0 44px}
 .mobile-sheet-title{position:sticky;top:0;background:#101724;z-index:2}
 .mobile-sheet-title button{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#263147;border:1px solid #77839855;color:#f2d48e}
 #main-controls>div:not(.mobile-sheet-title){grid-column:1/-1;display:flex;gap:4px;width:100%;min-width:0}
 #main-controls>div:not(.mobile-sheet-title)>button{flex:1;min-width:0}
 #main-controls button{min-height:44px;justify-content:center;display:flex;align-items:center;border-radius:13px;gap:5px;font-size:12px;min-width:0;width:auto}
 #main-controls button span:last-child{display:inline!important}#main-controls #btn-network-panel{display:none!important}
 #main-controls #mode-ai span:last-child,#main-controls #mode-pass span:last-child{font-size:11px}
 #quality-field{display:flex;grid-column:1/-1;justify-content:space-between;align-items:center;min-height:44px;font-size:12px;gap:8px}
 #quality-select{background:#202b3d;border:1px solid #77839855;border-radius:12px;min-height:44px;padding:8px;font-size:16px;max-width:65%;color:#e5d3aa}
 #lan-bar{padding:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);font-size:12px;gap:9px}
 #lan-bar #transport-field,#lan-bar #nickname-field{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0}
 #lan-bar #transport-field{grid-column:1;grid-row:2}#lan-bar #nickname-field{grid-column:2;grid-row:2}#lan-bar>.mobile-sheet-title{grid-row:1}
 #input-nickname{width:100%;flex:auto;min-width:0;font-size:16px;height:44px;padding:8px}
 #network-transport{font-size:16px;min-height:44px;min-width:0}
 #lan-bar #network-players{grid-column:1/-1;grid-row:4;grid-template-columns:minmax(0,1fr) minmax(0,1fr);font-size:11px;gap:8px}
 #lan-bar #lan-options{grid-row:3;grid-column:1/-1;min-width:0}
 #lan-options #lan-address{font-size:16px;min-height:44px;width:100%}
 #lan-bar>div:not(#room-controls):not(#lan-options):not(.mobile-sheet-title){display:none}
 #lan-bar #room-controls{grid-row:5;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;grid-column:1/-1}
 #room-controls #btn-host-room{grid-column:1;min-height:44px;justify-content:center;font-size:11px;padding:7px}
 #room-controls #btn-disconnect{grid-column:2;grid-row:1;min-height:44px;margin:0;padding:8px 12px}
 #room-controls>div{grid-column:1/-1;min-width:0;max-width:100%}
 #room-controls input{width:100%;min-width:0;font-size:16px;min-height:44px}
 #btn-join-room,#btn-copy-code{min-width:44px;min-height:44px;justify-content:center}
 #lan-status-text{max-width:none;white-space:normal;overflow:visible;font-size:12px}
 body .chat-panel,body.network-online .players-panel{display:none}
 body.sheet-chat .chat-panel:not([hidden]),body.sheet-players .players-panel:not([hidden]){display:flex;flex-direction:column}
 .social-title{flex-shrink:0;min-height:56px;padding:6px 12px;font-size:14px;position:static}
 .collapse-button{width:44px;height:44px;flex-basis:44px;border-radius:12px}.collapse-button svg{width:20px;height:20px}
 #chat-body{display:flex;flex-direction:column;min-height:0;overflow:hidden}
 #chat-messages{height:clamp(100px,30dvh,260px);min-height:50px;flex:1;padding:12px;font-size:14px;overscroll-behavior:contain;overflow:auto}
 #chat-form{flex-shrink:0;padding:8px}#chat-input{font-size:16px;min-height:44px}#chat-send{min-width:44px;min-height:44px}
 #players-body{overflow:auto;overscroll-behavior:contain}.player-row,.invite-row{padding:10px 12px}.social-action{min-height:44px;font-size:12px}.player-name{font-size:14px}
 #room-participants .participant-row{font-size:12px;line-height:1.7}
 body.keyboard-open #mobile-toolbar{display:none}
 body.keyboard-open #lan-bar,body.keyboard-open .chat-panel,body.keyboard-open .players-panel,body.keyboard-open #main-controls{bottom:calc(var(--keyboard-inset,0px) + var(--safe-bottom) + 5px);max-height:calc(var(--visual-height,100dvh) - 16px)}
 #modal-help,#modal-victory{z-index:90;padding:12px;padding-top:calc(12px + var(--safe-top));padding-bottom:calc(12px + var(--safe-bottom))}
 #modal-help>div,#modal-victory>div{max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));overflow:auto;border-radius:22px;padding:20px}
 #modal-help button,#modal-victory button{min-width:44px;min-height:44px}
 @media(orientation:landscape) and (max-height:600px){
  header>nav{grid-template-columns:150px minmax(0,1fr) 44px;padding:4px 8px!important;border-radius:17px!important;gap:6px!important}
  #brand-badge{display:none}#brand-title{font-size:10px}
  #scoreboard{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr) minmax(105px,1.1fr) minmax(0,1fr);min-height:35px}
  #mobile-menu-button{grid-column:3;grid-row:1}
  #mobile-toolbar{left:50%;right:auto;transform:translateX(-50%);width:min(440px,calc(100% - 24px));bottom:calc(5px + var(--safe-bottom));padding:4px}
  #mobile-toolbar button{min-height:44px;flex-direction:row;gap:4px}
  #main-controls,#lan-bar,body .chat-panel,body.network-online .players-panel{bottom:calc(61px + var(--safe-bottom));max-height:calc(var(--visual-height,100dvh) - 78px)}
  #main-controls{grid-template-columns:repeat(3,minmax(0,1fr))}#main-controls>div:not(.mobile-sheet-title){grid-column:1/-1}#quality-field{grid-column:1/-1}
  #chat-messages{height:120px}
 }
 @media(max-width:370px){#brand-title{font-size:10px}#scoreboard{grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr)}#scoreboard #label-team-1,#scoreboard #label-team-2{font-size:9px}#main-controls button{font-size:11px}}
}