/* Touch controls keep the original TTT HUD and Derma windows. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
.touch-help,.touch-menu-actions,.touch-only,.compact-only{display:none}
#game canvas{touch-action:none}
.touch-ui body{overscroll-behavior:none}
.touch-ui button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.touch-ui input,.touch-ui select{font-size:16px;min-height:44px}
.touch-ui .desktop-help{display:none}
.touch-ui .touch-help{display:block;font-size:13px;line-height:1.55}
.touch-ui .touch-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.touch-ui .touch-only{display:block}
.touch-ui .game-menu button{min-height:44px}
.touch-ui .menu-actions{flex-wrap:wrap;justify-content:stretch}.touch-ui .menu-actions button{flex:1}
#mobileControls{position:fixed;inset:0;z-index:15;pointer-events:none;user-select:none;-webkit-user-select:none;font-family:Tahoma,Arial,sans-serif}
#mobileControls button,#touchStick{pointer-events:auto;touch-action:none;-webkit-touch-callout:none}
#mobileControls button{color:#fff;background:#151b22a8;border:1px solid #d4e4eb70;box-shadow:inset 0 1px #ffffff25,0 2px 8px #0003;text-shadow:0 1px 2px #000;font:700 12px Tahoma,Arial,sans-serif;padding:4px}
#mobileControls button.pressed{background:#d4e4eb60;border-color:#fff}
#mobileControls button:disabled{opacity:.4}
.touch-toolbar{position:absolute;right:calc(10px + var(--safe-right));top:calc(10px + var(--safe-top));display:flex;gap:6px}
.touch-toolbar button{min-width:44px;min-height:44px;border-radius:7px}
#touchMenu{font-size:21px!important}
#touchStick{position:absolute;left:calc(18px + var(--safe-left));bottom:calc(32px + var(--safe-bottom));width:120px;height:120px;background:#0e182449;border:1px solid #ffffff65;border-radius:50%;box-shadow:inset 0 0 0 17px #ffffff06;display:grid;place-items:center}
#touchStickKnob{display:block;width:48px;height:48px;border-radius:50%;background:#d7e4e64d;border:2px solid #eefaff99;pointer-events:none;box-shadow:0 2px 9px #0004}
#touchStick small{position:absolute;bottom:9px;font-size:9px;letter-spacing:1px;color:#fff9;pointer-events:none}
.touch-round{position:absolute;border-radius:50%;width:56px;height:56px;display:grid;place-content:center}
.touch-fire{right:calc(18px + var(--safe-right));bottom:calc(170px + var(--safe-bottom));width:76px;height:76px}
.touch-fire span{font:32px/30px Arial}.touch-fire small{font-size:9px;letter-spacing:.5px}
.touch-secondary{right:calc(104px + var(--safe-right));bottom:calc(164px + var(--safe-bottom))}
.touch-jump{right:calc(18px + var(--safe-right));bottom:calc(96px + var(--safe-bottom))}
.touch-interact{right:calc(86px + var(--safe-right));bottom:calc(96px + var(--safe-bottom))}
.touch-reload{right:calc(18px + var(--safe-right));bottom:calc(26px + var(--safe-bottom));width:50px;height:50px;font-size:10px!important}
.touch-weapon{position:absolute;left:calc(150px + var(--safe-left));right:calc(80px + var(--safe-right));bottom:calc(22px + var(--safe-bottom));min-height:52px;max-width:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:7px!important;overflow:hidden}
.touch-weapon small{font:9px Tahoma;color:#d2d8df;letter-spacing:1px}.touch-weapon b{font:700 12px Tahoma;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.touch-sheet{position:fixed;inset:0;z-index:36;background:#0005;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + var(--safe-bottom))}
.touch-sheet>.derma-window{width:min(480px,100%);max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));display:flex;flex-direction:column}
.touch-sheet .derma-title{height:48px;flex-shrink:0}.touch-sheet button{min-height:48px}.touch-sheet .derma-title button{min-width:44px}
#touchWeaponList{overflow:auto;overscroll-behavior:contain;display:grid;gap:6px;padding:8px;background:#333;min-height:0}
#touchWeaponList button{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:10px 14px;background:#505355;color:#fff;border:1px solid #777}
#touchWeaponList button[aria-pressed=true]{background:#655e31;border-color:#e8ce54}#touchWeaponList span{color:#ddd;font-size:12px;white-space:nowrap}#touchDrop{margin-top:8px;flex-shrink:0}
.touch-ui .ttt-hud{left:calc(10px + var(--safe-left));top:calc(10px + var(--safe-top));bottom:auto;width:215px;height:59px;border-width:2px}
.touch-ui #role{height:29px;line-height:29px;font-size:21px}
.touch-ui #timerMode{top:2px;font-size:7px;line-height:8px}
.touch-ui #clock{top:10px;right:4px;font-size:17px;line-height:18px}
.touch-ui .meter{top:31px;height:22px}.touch-ui .meter>span{font-size:17px;line-height:22px;right:6px;top:0}
.touch-ui .ttt-hud.melee:not(.spectator){height:59px}.touch-ui .ttt-hud.spectator{height:32px;width:240px}.touch-ui .spectator #role{font-size:20px;line-height:28px;height:28px}.touch-ui .spectator #clock{top:4px;font-size:19px;line-height:22px}
.touch-ui #weaponSelector{display:none!important}
.touch-ui #target{max-width:calc(100vw - 28px);width:max-content;white-space:normal;top:calc(50% + 24px)}
.touch-ui #targetName{font-size:14px!important}.touch-ui #targetHealth{font-size:13px}.touch-ui #targetKarma,.touch-ui #targetTag{font-size:11px}
.touch-ui #notice{top:calc(100px + var(--safe-top));right:calc(10px + var(--safe-right));max-width:min(360px,calc(100vw - 20px));font-size:13px;padding:7px 10px}
.touch-ui #feed{left:calc(10px + var(--safe-left));top:calc(102px + var(--safe-top));bottom:auto;max-width:45vw;font-size:11px;opacity:.8}
.touch-ui #feed>div:nth-last-child(n+3){display:none}
.touch-ui #toolHint{top:auto;bottom:calc(260px + var(--safe-bottom));left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:88vw;text-align:center;font-size:11px;padding:6px 8px}
.touch-ui #intermission{top:calc(64px + var(--safe-top));right:calc(10px + var(--safe-right));bottom:auto;left:auto;transform:none;padding:4px 6px;gap:6px;font-size:11px;z-index:16;max-width:calc(100vw - 20px)}
.touch-ui #intermission button{min-height:44px;max-width:120px;padding:5px;font-size:11px}
.touch-ui #connectionStatus{top:calc(125px + var(--safe-top));max-width:90vw}
/* Dialogs scroll inside the visible screen, including when a phone keyboard is open. */
.touch-ui .menu-backdrop,.touch-ui .equipment-layer,.touch-ui .body-search-layer,.touch-ui .round-report-layer{top:var(--visible-top,0px);bottom:auto;height:var(--visible-height,100dvh);padding:calc(8px + var(--safe-top)) calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left))}
.touch-ui .derma-window{max-width:100%;font-size:14px}
.touch-ui .game-menu,.touch-ui .search-window,.touch-ui .equipment-window{max-height:calc(var(--visible-height,100dvh) - 16px - var(--safe-top) - var(--safe-bottom));overflow:auto;overscroll-behavior:contain}
.touch-ui .derma-title{min-height:44px;height:auto;gap:10px;padding:0 4px;flex-shrink:0}
.touch-ui .derma-title>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.touch-ui .window-close,.touch-ui .report-x{min-width:44px;min-height:44px;height:44px;font-size:24px;flex-shrink:0}
.touch-ui .report-window{height:620px;max-height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom))}
.touch-ui .report-tabs{height:44px}.touch-ui .report-tabs button,.touch-ui .report-tabs button[aria-selected=true]{height:44px;min-height:44px;padding:7px 9px}
.touch-ui .report-footer{height:auto;min-height:56px;flex-wrap:wrap;gap:6px}.touch-ui .report-footer button{height:44px;min-width:72px;min-height:44px}
.touch-ui .report-footer span{flex:1;font-size:11px}
.touch-ui .report-winner{white-space:normal;font-size:clamp(24px,6vw,44px)}
.touch-ui .report-list td{height:36px}
.touch-ui .search-info{height:auto;min-height:100px}.touch-ui .search-actions button{min-height:44px}
.touch-ui .equipment-window{display:flex;flex-direction:column;overflow:hidden}
.touch-ui .equipment-tabs{display:flex;flex-shrink:0;padding:4px;gap:2px}.touch-ui .equipment-tabs button{min-height:44px;padding:6px 8px;font-size:13px;flex:1}
.touch-ui .equipment-shop{min-height:0;flex:1;overflow:auto;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);padding:8px;gap:12px}
.touch-ui .equipment-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:350px;overflow:auto;padding:3px;min-width:0;align-self:start}
.touch-ui .equipment-item{height:90px;min-width:0}.touch-ui .equipment-item small{font-size:11px;overflow-wrap:anywhere}
.touch-ui .equipment-description{min-width:0}.touch-ui .equipment-description h3{font-size:17px}.touch-ui .equipment-description p{font-size:13px;line-height:1.45;margin:10px 0}
.touch-ui .equipment-description small{font-size:11px}.touch-ui .equipment-footer{flex-shrink:0;flex-wrap:wrap;padding:8px;gap:6px}.touch-ui .equipment-footer>span{display:none}.touch-ui .equipment-footer>b{margin-right:auto}
.touch-ui .equipment-footer button,.touch-ui .equipment-owned button,.touch-ui .equipment-transfer button{min-height:44px;font-size:13px}
.touch-ui .equipment-owned,.touch-ui .equipment-transfer{min-height:0;max-height:none;overflow:auto;flex:1}.touch-ui .equipment-owned span{font-size:13px}
.touch-ui .c4-panel{width:min(390px,calc(100vw - 24px));max-height:calc(var(--visible-height,100dvh) - 24px);top:calc(var(--visible-top,0px) + var(--visible-height,100dvh)/2);overflow:auto;padding:12px;font-size:14px}
.touch-ui .c4-panel button{min-width:44px;min-height:44px;margin:4px 0}.touch-ui .c4-wires{flex-wrap:wrap;gap:5px;justify-content:flex-start}.touch-ui .c4-wires button{flex:1}
.touch-ui #scoreboard{padding:0}.touch-ui .score-panel{top:calc(8px + var(--safe-top));width:min(700px,calc(100vw - 16px - var(--safe-left) - var(--safe-right)));max-height:calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));padding-top:135px}
.touch-ui .score-background{inset:0}.touch-ui .server-bar{top:60px}.touch-ui .score-logo{width:145px;height:145px;top:4px}.touch-ui .server-caption{top:34px;right:62px;font-size:12px}.touch-ui .server-name{top:61px;left:115px;font-size:15px}.touch-ui .map-info{top:97px;font-size:12px}.touch-ui .score-head{top:115px}.touch-ui .score-row{height:34px}.touch-ui .score-row>span{height:34px;line-height:34px}.touch-ui .score-player .nickname{font-size:12px}
#scoreboardClose{position:sticky;float:right;top:0;margin-top:-132px;min-height:44px;z-index:2}
#chatClose,#chatSend{min-width:40px;min-height:30px}
.touch-ui #textChat{left:calc(10px + var(--safe-left));top:calc(152px + var(--safe-top));bottom:auto;width:min(370px,calc(100vw - 20px - var(--safe-left) - var(--safe-right)));font-size:12px;z-index:34}
.touch-ui #chatLines{max-height:84px}.touch-ui #textChat:not(.editing){opacity:.8}
.touch-ui #textChat.editing{top:calc(var(--visible-top,0px) + 8px + var(--safe-top));height:calc(var(--visible-height,100dvh) - 16px - var(--safe-top));width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));display:flex;flex-direction:column;justify-content:flex-end;pointer-events:auto;background:linear-gradient(transparent,#121923aa);padding-bottom:8px}
.touch-ui .editing #chatLines{max-height:45%;flex:0 1 auto;padding:10px;border-radius:5px;min-height:0}
.touch-ui #chatForm{flex-shrink:0;display:grid;grid-template-columns:auto 1fr auto;padding:6px;gap:6px;border-radius:5px}
.touch-ui #chatForm input{grid-column:1/-1;grid-row:2;width:100%;max-width:100%;background:#1118;min-height:46px;font-size:16px;padding:8px}
.touch-ui #chatForm button{min-height:44px;font-size:13px;padding:7px 12px}.touch-ui #chatChannel{justify-self:start}.touch-ui #chatSend{grid-column:2;justify-self:end}.touch-ui #chatClose{grid-column:3}
/* Compact lobby: character above a real tabbed panel in portrait, beside it in landscape. */
@media(max-width:1100px),(max-height:620px),(pointer:coarse){
 #lobby .compact-only{display:block}
 #lobby{--pane-height:calc(var(--visible-height,100dvh)*.46);height:var(--visible-height,100dvh);top:var(--visible-top,0px);bottom:auto;background:linear-gradient(0deg,#12080eb3,transparent 68%)}
 #lobby .lobby-top{height:calc(64px + var(--safe-top))!important;padding:var(--safe-top) calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left))!important;gap:12px!important;background:#130a10f0}
 .tt-brand>span:last-child{display:none}.tt-mark{font-size:25px}.lobby-top nav{gap:1px}.lobby-nav{min-height:44px;padding:9px 12px;font-size:13px;transform:none;border-radius:3px}.lobby-profile{gap:5px}.lobby-profile img{width:34px;height:34px}.lobby-profile .profile-name{display:none}
 #lobby .server-select,#lobby .locker,#lobby .lobby-intro{position:absolute;left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));top:auto;bottom:calc(52px + var(--safe-bottom));width:auto;height:var(--pane-height);padding:18px 18px 24px;background:linear-gradient(150deg,#20121cf5,#170e15f5);border:1px solid #ab5b765c;border-radius:10px;overflow:auto;overscroll-behavior:contain;scroll-padding:16px;box-shadow:0 -6px 35px #08050880;display:none}
 #lobby[data-pane=play] .server-select,#lobby[data-pane=locker] .locker,#lobby[data-pane=stats] .lobby-intro{display:block}
 #lobby .character-caption{left:50%;top:calc(76px + var(--safe-top));transform:translateX(-50%);white-space:nowrap}.character-caption b{font-size:16px}.character-caption small{font-size:8px}
 #lobby .server-heading h2,#lobby .locker-heading h2{font-size:25px;margin:3px 0 12px}.server-heading .eyebrow{font-size:9px}.icon-button{width:44px;height:44px}
 #lobby .server-art{height:clamp(70px,13dvh,115px);background-position:50% 52%}.server-details{padding:10px 12px 8px}.server-details h3{font-size:16px}.server-details span,.server-meta{font-size:12px}.slots-track{margin:8px 12px 10px}.server-rule{font-size:12px;margin:12px 0}
 #lobby .join-button{height:52px;font-size:25px;transform:none;border-radius:4px;position:sticky;bottom:0;z-index:1}
 #lobby .server-select #lobbyStatus{font-size:12px}.server-select .text-button{min-height:44px;font-size:12px}
 #lobby .skin-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:5px 2px 0}.skin-choice{min-width:0}
 #lobby .skin-choice img{height:clamp(80px,15dvh,150px)}.skin-choice span{font-size:12px;padding:10px 1px}.skin-choice.selected:after{font-size:12px;width:18px;height:18px;line-height:18px}
 #lobby .callsign-label{display:flex;flex-direction:column;align-items:stretch;gap:8px;font-size:11px;margin:20px 0 0}#lobby .callsign-label input{min-height:46px;flex:auto;width:100%;max-width:100%;font-size:16px;background:#100a10dd}
 #lobby .lobby-intro>h1,#lobby .lobby-intro>p,#lobby .lobby-intro>.eyebrow{display:none}.lobby-intro:before{content:'YOUR STATS';display:block;font:italic 900 26px Arial;margin-bottom:16px}
 #lobby .level-card{margin:0;padding:20px}.level-label small{font-size:12px}.stats-row{margin-top:22px}#lobby .stats-row b{font-size:29px}.stats-row span{font-size:10px}#lobby .extra-stats{display:flex;padding:18px 5px;font-size:12px}
 #lobby .lobby-footer{height:calc(46px + var(--safe-bottom));padding:0 calc(12px + var(--safe-right)) var(--safe-bottom) calc(12px + var(--safe-left));font-size:10px}.lobby-footer b,.lobby-footer-right>span{display:none}.lobby-footer button{min-height:44px;font-size:11px}
 .lobby-help{z-index:5;position:fixed;padding:calc(10px + var(--safe-top)) 12px calc(10px + var(--safe-bottom))}.lobby-help section{padding:18px;max-height:100%;overflow:auto;width:min(540px,100%)}.lobby-help h2{font-size:24px}.lobby-help button{min-width:44px;min-height:44px}.lobby-help p{font-size:14px}
}
@media(orientation:landscape) and (max-width:1100px),(max-height:620px) and (orientation:landscape),(pointer:coarse) and (orientation:landscape){
 #lobby .server-select,#lobby .locker,#lobby .lobby-intro{left:51%;top:calc(78px + var(--safe-top));height:auto;padding:14px 16px 20px;bottom:calc(52px + var(--safe-bottom))}
 #lobby .character-caption{left:26%;top:calc(78px + var(--safe-top))}#lobby .server-art{height:75px}#lobby .skin-choice img{height:90px}.server-rule{margin:10px 0}
 .touch-ui #toolHint{bottom:auto;top:calc(65px + var(--safe-top));left:50%;max-width:40vw;font-size:10px}
 .touch-ui #feed{top:calc(103px + var(--safe-top));max-width:32vw}.touch-ui #notice{top:calc(108px + var(--safe-top));max-width:40vw}
 .touch-ui #textChat:not(.editing){top:calc(133px + var(--safe-top));max-width:35vw}.touch-ui #chatLines{max-height:65px}
 .touch-ui .touch-weapon{left:50%;right:auto;width:180px;transform:translateX(-50%);bottom:calc(16px + var(--safe-bottom))}
 .touch-ui .equipment-window{width:720px}.touch-ui .equipment-shop{grid-template-columns:1.3fr 1fr}.touch-ui .equipment-grid{max-height:none;overflow:visible;grid-template-columns:repeat(4,minmax(0,1fr))}.touch-ui #equipmentPreview{float:right;margin-left:8px;width:50px;height:50px}.touch-ui #equipmentPreview img{width:46px;height:46px}
}
@media(max-width:540px){
 .touch-ui .equipment-shop{display:flex;flex-direction:column;overflow:auto;min-height:0}.touch-ui .equipment-grid{flex-shrink:0;grid-template-columns:repeat(4,minmax(0,1fr));max-height:240px;width:100%}.touch-ui .equipment-item{height:85px}.touch-ui .equipment-item small{font-size:10px}.touch-ui .equip-glyph{width:38px;height:38px}
 .touch-ui #equipmentPreview{float:right;width:52px;height:52px;margin:0 0 8px 12px}.touch-ui #equipmentPreview img{width:46px;height:46px}.touch-ui .equipment-description{flex-shrink:0;padding:0 5px}.touch-ui .equipment-description h3{margin-top:5px}
}
@media(max-width:370px){
 .touch-toolbar{gap:4px}.touch-toolbar button{min-width:40px;font-size:11px!important}.touch-ui .ttt-hud{width:215px}
 #touchStick{width:106px;height:106px;left:12px}.touch-weapon{left:127px;right:76px}.touch-weapon b{font-size:11px}
 #lobby .lobby-top{gap:8px!important}.lobby-nav{padding:8px 9px;font-size:12px}.lobby-profile img{width:28px;height:28px}.tt-mark{font-size:22px}
 .touch-ui .report-footer span{order:3;flex-basis:100%}.touch-ui .report-footer button:last-child{margin-left:auto}
}
@media(max-height:440px) and (orientation:landscape){
 .touch-fire{bottom:calc(150px + var(--safe-bottom));width:66px;height:66px}.touch-secondary{bottom:calc(145px + var(--safe-bottom));right:calc(94px + var(--safe-right))}.touch-jump,.touch-interact{bottom:calc(81px + var(--safe-bottom))}.touch-reload{bottom:calc(17px + var(--safe-bottom))}#touchStick{bottom:calc(24px + var(--safe-bottom));width:110px;height:110px}
 .touch-ui #notice{top:calc(65px + var(--safe-top));max-width:38vw}.touch-ui #intermission{top:auto;bottom:calc(78px + var(--safe-bottom));left:50%;right:auto;transform:translateX(-50%)}
 .touch-ui .report-window{padding:0 8px 6px}.touch-ui .report-highlights{padding-top:12px}.touch-ui .report-awards{padding-top:10px}
}