/* Touch controls and compact room navigation. Desktop keeps its existing layout. */
.mobile-nav,.mobile-only{display:none}
.control-deck{min-width:0}
.joystick{position:relative;width:112px;height:112px;border:1px solid #6b5b86;border-radius:50%;background:radial-gradient(circle,#30283f 30%,#1d1b2d 72%);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:inset 0 0 0 13px #a28bc40b}
.stick-arrows{position:absolute;inset:0;display:grid;place-items:center;font-size:92px;line-height:1;color:#70617d;opacity:.6}
.stick-thumb{position:absolute;left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px;border:1px solid #d0b3fc;border-radius:50%;background:linear-gradient(145deg,#c1a2ed,#786094);box-shadow:0 4px 12px #0006;transform:translate(var(--stick-x,0px),var(--stick-y,0px));pointer-events:none}
.joystick.active{border-color:#d5b6ff;background:#342a44}
.stick-hint{font-size:11px;color:#a99bbd;text-align:center}
@media(max-width:900px),(pointer:coarse) and (max-width:1200px){
 :root{--mobile-nav-height:64px}
 html{scroll-padding-bottom:85px;-webkit-text-size-adjust:100%}
 body{min-width:0}
 button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
 button{min-height:44px;touch-action:manipulation}
 input,select,textarea,.text-input,.join-input input,.chat-input input{font-size:16px}
 .workspace,main,.home-grid,.main-column,.profile-card,.game-layout,#playPanel,.session-card{min-width:0}
 .rail{position:relative;inset:auto;width:100%;height:66px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));display:flex;align-items:center;gap:4px;border-right:0;border-bottom:1px solid var(--line)}
 .brand b{display:block;font-size:17px}.brand b span{font-size:6px}.moon-logo{font-size:38px}
 .rail-label,.rail-bottom,.nav i{display:none}.rail .nav{width:44px;min-width:44px;margin:0;padding:8px;font-size:0;justify-content:center}.rail>.nav:nth-of-type(1){margin-left:auto}.nav.active{box-shadow:none}.nav>span{font-size:23px}
 .workspace{margin-left:0}header{height:50px;padding:0 14px}.breadcrumb{font-size:11px}.breadcrumb span{padding:0 7px}.top-right{font-size:10px;gap:6px}.small-avatar{display:none}.icon-btn{min-width:44px;margin:0;padding:0 10px}
 main{padding:20px 14px max(20px,env(safe-area-inset-bottom))}.heading{gap:10px;align-items:center}.heading h1{font-size:25px}.heading p{font-size:12px;line-height:1.7}.eyebrow{font-size:8px}.heading>.secondary{min-width:44px;padding:10px}.heading>.secondary span{display:none}
 .home-grid{grid-template-columns:1fr}.profile-card{order:-1;display:grid;grid-template-columns:76px minmax(0,1fr);padding:16px;gap:8px 14px}.profile-card>.section-label{grid-column:1/-1;font-size:14px}.profile-card .avatar-stage{grid-column:1;grid-row:2/5;height:106px}.avatar-glow{width:70px;height:70px}#avatarPreview{width:74px}.avatar-spark,.profile-card .centered,.profile-card .field-label,.profile-card .divider,.profile-card .practice-note,.profile-card>.footnote{display:none}.profile-card h3{text-align:left;margin:0;font-size:14px}.profile-card .text-input{min-height:46px}.color-picker{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px 0}.color-picker button{width:44px;min-width:44px;height:44px;border-width:7px}.profile-card>.secondary{grid-column:1/-1;font-size:13px}
 .room-actions{grid-template-columns:1fr 1fr;gap:12px}.create-card{padding:18px 14px}.create-card b{font-size:15px}.create-card small{font-size:11px}.card-icon{display:none}.join-card{padding:13px 14px}.join-card label{font-size:12px}.join-input{gap:6px;align-items:center}.join-input button{min-width:72px;font-size:13px}.join-input input{min-height:44px;letter-spacing:1px}
 .map-card{height:300px}.map-footer{padding:0 14px;font-size:11px;gap:8px}.role-cards{grid-template-columns:1fr 1fr}.role-card{padding:15px;gap:12px}.role-card h3{font-size:14px}.role-card p{font-size:11px;line-height:1.7}.role-team{font-size:10px}.role-art{flex-basis:42px;height:46px;font-size:28px}.roles-heading h2{font-size:15px}.roles-heading h2 span{display:none}.text-button{font-size:12px}footer{gap:12px;flex-wrap:wrap}footer p{font-size:11px}
 /* A bounded game viewport keeps movement and skills reachable together. */
 body.in-game{height:var(--app-height,100dvh);overflow:hidden;overscroll-behavior:none}
 .in-game .workspace{height:100%}.in-game .workspace>header,.in-game .heading{display:none}
 .in-game main{height:100%;max-width:none;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px) max(10px,env(safe-area-inset-left))}
 #gameView{height:100%;display:flex;flex-direction:column;gap:8px;overflow:hidden}
 .game-top{flex:0 0 auto;align-items:center;gap:6px;margin:0;min-height:44px}.room-chip{min-width:0;gap:6px;flex-wrap:nowrap}.room-label{display:none}.room-chip b{font-size:17px;letter-spacing:2px}.game-top-actions{display:flex;align-items:center;gap:4px}.game-top #phaseBadge{display:none}#leaveRoom{padding:6px 8px;font-size:12px;white-space:nowrap}#copyCode{font-size:0;width:44px;min-width:44px;padding:0}#copyCode::before{content:'⧉';font-size:23px}.mobile-only{display:inline-grid;place-items:center;min-width:44px;font-size:20px}
 .in-game #roleSetup,.in-game #roomPanel{display:none}
 .in-game .game-layout{display:block;flex:1 1 0;min-height:0}
 #playPanel{display:grid;height:100%;min-height:0;grid-template-rows:minmax(0,1fr) auto auto auto auto;gap:6px}
 .in-game .game-map{height:auto;min-height:140px;aspect-ratio:auto;border-radius:10px;touch-action:manipulation}
 .map-top-hud{top:8px;left:8px;right:8px;gap:6px;align-items:flex-start}.role-badge,#taskProgress{font-size:11px;padding:6px 8px;line-height:1.4;max-width:65%;overflow-wrap:anywhere}#taskProgress{white-space:nowrap;max-width:none;flex-shrink:0}
 #worldLayer .actor .nameplate{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis}.game-notice{font-size:11px;line-height:1.5;bottom:8px;left:8px;right:8px;padding:5px 8px}
 .control-deck{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center;min-width:0}
 .mobile-controls{display:flex;grid-column:1;grid-row:1;flex-direction:column;align-items:center;gap:3px;margin:0}.controls{grid-column:2;grid-row:1;margin:0;display:block;min-width:0}.keyboard-help{display:none}
 #actionButtons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}#actionButtons button{min-height:48px;padding:8px 5px;font-size:12px;line-height:1.35;overflow-wrap:anywhere;border-radius:9px}#actionButtons button:only-child{grid-column:1/-1}
 .role-objective{font-size:11px;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.shield-status{justify-self:start;margin:0;padding:4px 9px;font-size:11px}
 .task-strip{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0;gap:6px;min-width:0;scrollbar-width:thin}.task-pill{font-size:11px;padding:7px 9px;white-space:nowrap;flex-shrink:0}
 .in-game .meeting-panel{inset:0;padding:16px;border:0;border-radius:10px;overscroll-behavior:contain}.meeting-panel h2{font-size:20px}.meeting-panel p{font-size:13px;line-height:1.7}.meeting-panel .vote-list{gap:8px}.vote-list button{min-height:46px;font-size:14px;padding:10px;overflow-wrap:anywhere}.meeting-panel .task-pill{white-space:normal;overflow-wrap:anywhere;font-size:12px}
 .in-game:not([data-phase="playing"]) .control-deck,.in-game:not([data-phase="playing"]) #roleObjective,.in-game:not([data-phase="playing"]) #taskList{display:none}
 #deathNotice{flex:0 0 auto;padding:9px 12px;margin:0;gap:10px}#deathNotice b{font-size:14px;overflow-wrap:anywhere}#deathNotice span:not(.death-icon){font-size:11px}.death-icon{font-size:24px}
 /* Room settings, friends, voice and chat share a scrollable second view. */
 .in-game.mobile-room #gameView{overflow-y:auto;overscroll-behavior:contain;scroll-padding-top:54px}
 .mobile-room .game-top{position:sticky;top:0;z-index:20;background:#10121bf5}
 .in-game.mobile-room #roleSetup{display:block;flex-shrink:0;margin:0;padding:15px}.in-game.mobile-room .game-layout{flex:0 0 auto;min-height:auto}
 .mobile-room #playPanel{display:none}.in-game.mobile-room #roomPanel{display:flex;margin:0;padding:16px}
 .setup-heading h2{font-size:16px}.setup-heading span,.role-setup p{font-size:12px}.setup-summary{gap:6px}.setup-chip{font-size:12px}.practice-role-choice{flex-wrap:wrap;font-size:13px}.practice-role-choice select{font-size:16px;min-height:44px;max-width:100%}
 .in-game #playerList{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.player-row{font-size:13px;min-width:0;gap:7px;margin:10px 0}.player-row>span:not(.ready){min-width:0;overflow-wrap:anywhere}.player-row .ready{font-size:11px;white-space:nowrap}.player-row svg{min-width:26px;flex-shrink:0}.section-label{font-size:14px}#readyButton{min-height:48px;font-size:15px}.footnote{font-size:12px;line-height:1.7}
 .voice-panel{padding:14px}.voice-title{font-size:14px}.voice-title>span:last-child{font-size:11px}.voice-panel p{font-size:12px}.voice-buttons button{min-height:44px;font-size:13px}.voice-peer{font-size:12px;overflow-wrap:anywhere}.voice-peer small{font-size:11px}
 .chat-title{font-size:14px}.chat-messages{height:180px;font-size:13px;line-height:1.8}.chat-input input{min-height:48px;padding:12px;font-size:16px}.chat-input button{min-width:48px;font-size:22px}
 .in-game .mobile-nav{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));padding:6px max(10px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:6px;background:#171724f5;border-top:1px solid #40354f;backdrop-filter:blur(14px)}
 .mobile-nav button{min-width:0;min-height:48px;border:0;border-radius:10px;background:transparent;color:#a79ab9;font-size:16px;display:flex;gap:7px;align-items:center;justify-content:center}.mobile-nav button span{font-size:12px}.mobile-nav button[aria-pressed="true"]{background:#382a48;color:#e5cdfc}#mobileMic[aria-pressed="true"]{background:#243a32;color:#a8dfbb}
 .in-game.keyboard-open .mobile-nav{display:none}.in-game.keyboard-open main{padding-bottom:8px}
 dialog{width:calc(100% - 24px);max-width:570px;max-height:calc(var(--app-height,100dvh) - 32px);margin:auto;padding:18px 20px 22px;border-radius:18px;overflow-y:auto;overscroll-behavior:contain}
 .dialog-close{position:sticky;top:0;float:right;right:auto;margin:-6px -8px 2px 10px;width:44px;min-height:44px;border-radius:50%;background:#282234;z-index:2}dialog h2{font-size:22px;line-height:1.4}dialog p,dialog li{font-size:14px}dialog ol{padding-left:22px}.setup-presets{gap:6px;flex-wrap:wrap}.setup-presets button{min-height:46px;font-size:13px}.setup-role b{font-size:14px}.setup-role small{font-size:12px}.setup-role input{min-height:46px;font-size:16px;width:78px}.setup-fineprint{font-size:12px!important}.vote-list{gap:8px}.vote-list button{min-width:0}.primary,.secondary{min-height:44px}#saveRoles{min-height:48px;font-size:15px}
 #toast{bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px);font-size:13px;width:max-content;max-width:calc(100vw - 28px);padding:10px 15px}
}
@media(max-width:500px){
 .room-actions,.role-cards{grid-template-columns:1fr}.create-card{min-height:80px}.map-card{height:270px}.map-footer .difficulty{display:none}.profile-card{padding:14px}.role-card{gap:15px}.top-right #connection{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:360px){
 .in-game #playerList{grid-template-columns:1fr}.control-deck{grid-template-columns:96px minmax(0,1fr);gap:8px}.joystick{width:96px;height:96px}.stick-arrows{font-size:80px}.mobile-nav button{gap:4px}.mobile-nav button span{font-size:11px}.role-badge,#taskProgress{font-size:10px}.map-top-hud{gap:4px}
}
@media(max-height:520px) and (max-width:900px),(max-height:520px) and (pointer:coarse) and (max-width:1200px){
 .in-game main{padding-top:max(4px,env(safe-area-inset-top))}.in-game #gameView{gap:4px}.in-game #playPanel{position:relative;grid-template-rows:minmax(0,1fr)}
 .in-game:not(.mobile-room) .control-deck{position:absolute;inset:auto 10px 10px;z-index:6;grid-template-columns:96px minmax(0,1fr);pointer-events:none;align-items:end}.control-deck .mobile-controls,.control-deck .controls{pointer-events:auto}.control-deck .controls{justify-self:end;width:min(280px,100%)}.joystick{width:96px;height:96px}.stick-hint{display:none}
 .in-game #roleObjective,.in-game #taskList,.in-game #shieldStatus{display:none}.in-game .game-notice{bottom:auto;top:44px;left:22%;right:22%;font-size:10px}.in-game .game-map{min-height:130px}.in-game #actionButtons button{min-height:44px;background:#30273ef0}.in-game #deathNotice{padding:5px 10px}.in-game #deathNotice span:not(.death-icon){display:none}
}
@media(prefers-reduced-motion:reduce){.task-icon{animation:none}button,#toast{transition:none}}