/* Initial OAuth-return visibility guard. */


  html.xxiiiOAuthReturn #splash { display:none !important; }
  html.xxiiiOAuthReturn #startScreen { display:none !important; }


/* Music player UI. */


#xxiii-music-player{
  position:fixed; right:18px; bottom:18px; z-index:99999;
  width:min(330px,calc(100vw - 28px));
  padding:11px 12px 10px;
  display:flex; flex-direction:column; gap:8px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(16,20,30,.88),rgba(7,10,16,.82));
  box-shadow:0 12px 38px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font:600 13px/1.2 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  user-select:none;
  pointer-events:auto;
}
#xxiii-music-player .xxiii-music-top{
  display:flex; align-items:center; gap:9px; min-width:0;
}
#xxiii-music-player .xxiii-music-note{
  width:30px; height:30px; flex:0 0 30px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  font-size:15px;
  box-shadow:inset 0 0 12px rgba(255,255,255,.06);
}
#xxiii-music-player .xxiii-title-window{
  min-width:0; overflow:hidden; white-space:nowrap;
  flex:1;
}
#xxiii-music-player .xxiii-music-title{
  display:inline-block; white-space:nowrap; opacity:.96;
  transform:translateX(0);
}
#xxiii-music-player .xxiii-music-title.is-scrolling{
  animation:xxiiiMusicMarquee 9s ease-in-out infinite alternate;
}
@keyframes xxiiiMusicMarquee{
  0%,18%{transform:translateX(0)}
  82%,100%{transform:translateX(var(--xxiii-scroll-x, -80px))}
}
#xxiii-music-player .xxiii-eq-wrap{
  position:relative;
  height:42px; border-radius:12px;
  padding:5px 7px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  contain:layout paint;
}
/* The game has a global canvas rule. Override it here so the music EQ
   canvas stays inside its small panel instead of becoming a full-screen
   fixed canvas that can cover the UI and appear as a white line. */
#xxiii-music-player #xxiii-eq{
  position:static !important;
  left:auto !important; top:auto !important;
  width:100% !important; height:100% !important;
  display:block;
  pointer-events:none;
  touch-action:none;
}
#xxiii-music-player .xxiii-controls{
  display:flex; align-items:center; gap:6px;
}
#xxiii-music-player button{
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px; min-width:38px; height:34px;
  padding:5px 8px;
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
  font:700 14px/1 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:background .15s,transform .08s,border-color .15s;
}
#xxiii-music-player button:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.30)}
#xxiii-music-player button:active{transform:translateY(1px)}
#xxiii-music-player #xxiii-music-toggle{min-width:64px}
#xxiii-music-player .xxiii-volume{
  display:flex; align-items:center; gap:6px; flex:1; min-width:0;
}
#xxiii-music-player .xxiii-volume-mute{
  width:24px; min-width:24px; height:24px; padding:0; border:0; background:transparent;
  display:grid; place-items:center; cursor:pointer; font-size:15px; line-height:1; opacity:.92;
}
#xxiii-music-player .xxiii-volume-mute:hover{background:rgba(255,255,255,.10);border-color:transparent}
#xxiii-music-player .xxiii-volume{position:relative;}
#xxiii-music-player .xxiii-audio-menu{
  position:absolute; right:0; bottom:calc(100% + 8px);
  display:none; align-items:center; gap:6px; padding:7px;
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  background:rgba(15,15,18,.96); box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:50; white-space:nowrap;
}
#xxiii-music-player .xxiii-audio-menu.open{display:flex;}
#xxiii-music-player .xxiii-audio-option{
  position:relative; width:38px; min-width:38px; height:34px; padding:0;
  display:grid; place-items:center; font-size:17px;
  border:1px solid rgba(255,255,255,.16); border-radius:9px;
  background:rgba(255,255,255,.07);
}
#xxiii-music-player .xxiii-audio-option.is-muted{opacity:.52;}
#xxiii-music-player .xxiii-audio-option.is-muted::after{
  content:''; position:absolute; width:28px; height:2px;
  background:#ff5b5b; transform:rotate(-45deg); border-radius:2px;
}
#xxiii-music-player .xxiii-audio-option:hover{background:rgba(255,255,255,.15);}
#xxiii-music-player #xxiii-volume{
  width:100%; min-width:55px; accent-color:#fff; cursor:pointer;
}
@media (max-width:700px){
  #xxiii-music-player{right:10px;bottom:10px;width:min(300px,calc(100vw - 20px));padding:9px 10px}
}
#xxiii-music-player .xxiii-window-controls{
  display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto;
}
#xxiii-music-player .xxiii-winbtn{
  width:20px; height:20px; min-width:0; padding:0; border-radius:50%;
  display:grid; place-items:center; font:700 12px/1 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  border:1px solid rgba(0,0,0,.28);
}
#xxiii-music-player .xxiii-winbtn-min{ background:#f4c542; color:#5c4400; }
#xxiii-music-player .xxiii-winbtn-min:hover{ background:#ffd45e; }
#xxiii-music-player .xxiii-winbtn-max{ background:#3aa0ff; color:#062038; }
#xxiii-music-player .xxiii-winbtn-max:hover{ background:#5cb3ff; }
#xxiii-music-player .xxiii-music-top{ cursor:grab; }
#xxiii-music-player .xxiii-music-top:active{ cursor:grabbing; }
#xxiii-music-player.xxiii-minimized{
  width:auto; max-width:min(240px,calc(100vw - 24px));
  padding:6px 8px 6px 6px; gap:0; border-radius:22px;
}
#xxiii-music-player.xxiii-minimized .xxiii-eq-wrap,
#xxiii-music-player.xxiii-minimized .xxiii-controls{ display:none; }
#xxiii-music-player.xxiii-minimized .xxiii-title-window{ max-width:130px; }
#xxiii-music-player.xxiii-minimized .xxiii-music-note{ width:24px; height:24px; flex-basis:24px; font-size:13px; }
#xxiii-music-player.xxiii-minimized .xxiii-music-top{ gap:7px; }

/* The phone main menu always begins with the compact player in its own
   bottom-right slot, leaving the central Play action completely clear. */
@media (max-width:700px) {
  body.touch #xxiii-music-player.xxiii-minimized {
    /* Position is owned by pointer dragging, never locked by CSS. */
  }
}

/* On the wide main-menu layout the player occupies the spare slot directly
   beside STORE / HELP. Its bottom edge and height are the same as the two
   menu rows plus their grid gap, so it never overlaps the action cards. */
@media (min-width:901px){
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized){
    right:18px;
    bottom:clamp(28px,4vh,48px);
    width:268px;
    height:calc(2 * clamp(44px,7.3vh,70px) + clamp(7px,1vw,14px));
    box-sizing:border-box;
    padding:5px 8px;
    gap:4px;
    justify-content:space-between;
    font-size:12px;
  }
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) .xxiii-music-top{gap:7px;}
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) .xxiii-music-note{
    width:24px;height:24px;flex-basis:24px;font-size:13px;
  }
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) .xxiii-eq-wrap{
    height:30px;padding:3px 5px;border-radius:8px;
  }
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) .xxiii-controls{gap:4px;}
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) button{
    min-width:30px;height:28px;padding:4px 6px;border-radius:8px;font-size:12px;
  }
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) #xxiii-music-toggle{min-width:50px;}
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) .xxiii-volume{gap:3px;}
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) .xxiii-volume-mute{
    width:20px;min-width:20px;height:20px;padding:0;font-size:13px;
  }
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) #xxiii-volume{min-width:44px;}
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized) .xxiii-winbtn{
    width:18px;height:18px;min-width:18px;padding:0;font-size:11px;
  }
}

/* A wide desktop has enough room for a sixth column. Reserve it explicitly
   instead of letting the music window cover STORE / HELP. */
@media (min-width:1180px){
  body.xxiii-main-menu-open{
    --xxiii-music-slot-width:268px;
    --xxiii-music-slot-gap:clamp(7px,1vw,14px);
    --xxiii-music-slot-right:18px;
    /* The fullscreen menu card has a 83px effective inset at this breakpoint. */
    --xxiii-music-slot-menu-inset:83px;
  }
  body.xxiii-main-menu-open #startCard.xxiiiNavActive.xxiiiMainMenuCompact .xxiiiMainActions{
    left:auto;
    right:calc(var(--xxiii-music-slot-right) + var(--xxiii-music-slot-width) + var(--xxiii-music-slot-gap) - var(--xxiii-music-slot-menu-inset));
    width:min(1320px,calc(100vw - var(--xxiii-music-slot-width) - var(--xxiii-music-slot-right) - var(--xxiii-music-slot-gap) - 18px));
    transform:none;
  }
  body.xxiii-main-menu-open #xxiii-music-player:not(.xxiii-minimized){
    bottom:calc(clamp(28px,4vh,48px) + 14px);
  }
}


/* Language-switch UI. */


  #startHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px}
  #startHeaderTools{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex:0 0 auto}
  #startProfileSlot{display:flex;justify-content:center;width:100%}
  #startHeader h1{margin:0;font-size:34px;letter-spacing:.5px}
  #startHeader h1.brandLogo{flex:0 1 265px;min-width:0}
  #startHeader .brandLogoAsset{display:block;width:100%;max-width:265px;height:auto}
  #menuLanguageSwitch,#splashLanguageSwitch,#tutorialLanguageSwitch{position:relative;z-index:120;display:flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.20);border-radius:999px;background:rgba(8,10,9,.72);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.28);font:700 10px/1 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.7px}
  #splashLanguageSwitch{position:absolute;top:18px;right:18px}
  #menuLanguageSwitch button,#splashLanguageSwitch button,#tutorialLanguageSwitch button{border:0;background:transparent;color:rgba(255,255,255,.52);padding:6px 9px;min-width:34px;border-radius:999px;cursor:pointer;font:inherit;letter-spacing:inherit;transition:background .15s ease,color .15s ease,transform .15s ease}
  #menuLanguageSwitch button:hover,#splashLanguageSwitch button:hover,#tutorialLanguageSwitch button:hover{color:#fff;background:rgba(255,255,255,.08)}
  #menuLanguageSwitch button.active,#splashLanguageSwitch button.active,#tutorialLanguageSwitch button.active{color:#07110b;background:#8ff5b4;box-shadow:0 2px 8px rgba(51,209,122,.28)}
  #tutorialLanguageSwitch{display:none;position:relative;z-index:10}
  @media(max-width:640px){#menuLanguageSwitch button,#splashLanguageSwitch button,#tutorialLanguageSwitch button{padding:5px 8px;min-width:32px}#startHeader h1{font-size:28px}#startHeader h1.brandLogo{flex-basis:min(265px,62vw)}}
  @media(max-width:420px){#startHeader{gap:8px;flex-wrap:wrap}#startHeader h1{font-size:clamp(22px,7vw,28px)}#startHeader h1.brandLogo{flex-basis:min(265px,calc(94vw - 40px))}#startHeaderTools{margin-left:auto}#xxiiiProfileBtn{width:min(200px,48vw)}}


/* Tutorial UI. */


#xxiiiTutorialPopup{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(5px);padding:20px;box-sizing:border-box}
#xxiiiTutorialCard,#xxiiiTutorialCompleteCard{width:min(520px,92vw);background:linear-gradient(180deg,rgba(25,30,28,.99),rgba(10,13,12,.99));border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:28px;color:#fff;text-align:center;box-shadow:0 24px 90px rgba(0,0,0,.7)}
#xxiiiTutorialCard h2,#xxiiiTutorialCompleteCard h2{margin:0 0 9px;font-size:28px}
#xxiiiTutorialCard p,#xxiiiTutorialCompleteCard p{margin:8px 0 20px;color:rgba(255,255,255,.74);line-height:1.5}
.xxiiiTutBtn{border:0;border-radius:12px;padding:13px 20px;font-weight:900;cursor:pointer;font-size:15px;margin:5px;min-width:155px}
#xxiiiTutStart,#xxiiiTutorialContinue{background:#8ff5b4;color:#07110b}
#xxiiiTutSkip,#xxiiiTutReplay{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16)}
#xxiiiTutorialHUD{position:fixed;left:12px;top:58px;transform:none;z-index:9000;display:none;width:min(420px,calc(100vw - 24px));text-align:left;pointer-events:none;box-sizing:border-box}
#xxiiiTutorialBalloon{background:rgba(0,0,0,.80);border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:12px 14px;color:#fff;box-shadow:0 10px 35px rgba(0,0,0,.35);backdrop-filter:blur(5px)}
#xxiiiTutorialPrompt{display:block;background:transparent;border:0;border-radius:0;padding:0;color:#fff;font-weight:900;font-size:18px;line-height:1.25;box-shadow:none}
#xxiiiTutorialStep{margin-top:9px;padding-top:7px;border-top:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);font-size:12px;font-weight:800}
#xxiiiTutorialComplete{position:fixed;inset:0;z-index:10001;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.68);backdrop-filter:blur(5px);padding:20px;box-sizing:border-box}
#xxiiiTutorialActions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
@media(max-width:640px){#xxiiiTutorialPrompt{font-size:15px}#xxiiiTutorialHUD{left:10px;top:58px;width:min(400px,calc(100vw - 20px))}#xxiiiTutorialBalloon{padding:10px 12px}}
#xxiiiTutorialControl{margin:9px 0 0;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px;min-height:54px;pointer-events:none}
#xxiiiTutorialControl.spin-tutorial .xxiiiSpinChoices,#xxiiiTutorialControl.spin-tutorial .xxiiiControlText{flex:1 0 100%;max-width:none}
.xxiiiMouse{position:relative;width:42px;height:58px;border:2px solid rgba(255,255,255,.85);border-radius:18px;background:rgba(255,255,255,.08);box-shadow:0 5px 20px rgba(0,0,0,.3)}
.xxiiiMouse:before{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:3px;height:13px;background:rgba(255,255,255,.8);border-radius:3px}
.xxiiiMouse .left,.xxiiiMouse .right{position:absolute;top:0;width:50%;height:25px;border-radius:16px 16px 0 0}
.xxiiiMouse .left{left:0}.xxiiiMouse .right{right:0}.xxiiiMouse .active{background:rgba(143,245,180,.72);box-shadow:0 0 16px rgba(143,245,180,.5)}
 .xxiiiControlText{font-weight:900;font-size:12px;letter-spacing:.5px;color:#fff;max-width:250px;text-align:left;flex:1 1 210px}
.xxiiiArrow{font-size:25px;line-height:1;font-weight:900;color:#8ff5b4;animation:xxiiiPulse 1s infinite}
.xxiiiSpinChoices{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.xxiiiSpinChoice{padding:6px 9px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);font-size:11px;font-weight:900;color:#fff}
.xxiiiSpinChoice.active{border-color:#8ff5b4;background:rgba(143,245,180,.16);box-shadow:0 0 15px rgba(143,245,180,.18)}
@keyframes xxiiiPulse{0%,100%{transform:translateX(0);opacity:.65}50%{transform:translateX(5px);opacity:1}}


/* Mobile HUD UI. */


  /* One green in-match button opens the controls drawer on every screen size. */
  #mobileHudPanel { display:contents; }
  #mobileHudPanel[hidden] { display:none!important; }
  #mobileHudToggle, #mobileFullscreenToggle, #mobileHelpToggle { display:none; }
  #startScreen[style*="display: none"] ~ #mobileHudToggle {
    display:flex;align-items:center;justify-content:center;position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 10px);right:calc(env(safe-area-inset-right, 0px) + 10px);
    z-index:42;width:46px;height:46px;padding:0;pointer-events:auto;
    border:1px solid rgba(143,245,180,.88);border-radius:10px;background:linear-gradient(145deg,#54eaa1,#1ba565);color:#062417;
    box-shadow:0 4px 16px rgba(0,0,0,.42),0 0 18px rgba(69,235,147,.32);font-size:22px;font-weight:900;line-height:1;cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;-webkit-tap-highlight-color:transparent
  }
  #startScreen[style*="display: none"] ~ #mobileHudToggle:active { transform:scale(.96); }
  @media (hover:hover) { #startScreen[style*="display: none"] ~ #mobileHudToggle:hover { transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 8px 22px rgba(0,0,0,.42),0 0 25px rgba(69,235,147,.54); } }
  /* Fullscreen is unreliable across mobile browsers and duplicates a browser
     control, so only the green HUD drawer remains available on touch devices. */
  @media (hover:none), (pointer:coarse) {
    #startScreen[style*="display: none"] ~ #mobileFullscreenToggle {
      display:none !important;
    }
  }
  body.mobileHudOpen #mobileHudPanel {
    display:flex;flex-direction:column;align-items:stretch;gap:8px;
    position:fixed;top:calc(env(safe-area-inset-top, 0px) + 66px);right:calc(env(safe-area-inset-right, 0px) + 10px);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);z-index:41;width:min(340px,calc(100vw - 20px));
    max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);box-sizing:border-box;overflow-y:auto;
    padding:10px;border:1px solid rgba(143,245,180,.34);border-radius:14px;background:linear-gradient(155deg,rgba(12,35,25,.97),rgba(7,14,11,.97));
    box-shadow:0 14px 40px rgba(0,0,0,.54),0 0 28px rgba(57,216,131,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    pointer-events:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch
  }
  body.mobileHudOpen #mobileHudPanel > #rosterBar,
  body.mobileHudOpen #mobileHudPanel > #phaseBadge,
  body.mobileHudOpen #mobileHudPanel > #topRightControls,
  body.mobileHudOpen #mobileHudPanel > #menuBtn,
  body.mobileHudOpen #mobileHudPanel > #mobileHelpToggle,
  body.mobileHudOpen #mobileHudPanel > #hint,
  body.mobileHudOpen #mobileHudPanel > #xxiiiLiveProfileBtn {
    position:relative!important;inset:auto!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    transform:none!important;z-index:auto!important;width:100%;max-width:none;margin:0;box-sizing:border-box;
    text-align:center;pointer-events:auto
  }
  body.mobileHudOpen #mobileHudPanel > #rosterBar { align-items:stretch;gap:5px }
  body.mobileHudOpen #mobileHudPanel .rosterTeam { justify-content:flex-end;flex-wrap:wrap }
  body.mobileHudOpen #mobileHudPanel .rosterTeam .rTeamName { max-width:38vw }
  body.mobileHudOpen #mobileHudPanel .rosterP { max-width:42vw }
  body.mobileHudOpen #mobileHudPanel > #topRightControls { flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:7px }
  body.mobileHudOpen #mobileHudPanel #topRightControls > button,
  body.mobileHudOpen #mobileHudPanel > #menuBtn {
    width:100%;min-height:42px;padding:10px 12px;text-align:center;border:1px solid rgba(143,245,180,.48);border-radius:8px;
    background:linear-gradient(115deg,rgba(13,47,33,.92),rgba(9,26,19,.94));color:#f1fff6;font-family:inherit;font-size:14px;font-weight:800;
    box-shadow:inset 0 1px 0 rgba(225,255,238,.04);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease
  }
  body.mobileHudOpen #mobileHudPanel #topRightControls > button:hover:not(:disabled),
  body.mobileHudOpen #mobileHudPanel > #menuBtn:hover,
  body.mobileHudOpen #mobileHudPanel > #mobileHelpToggle:hover {
    transform:translateY(-2px);border-color:#9dffcb;background:linear-gradient(115deg,rgba(40,177,103,.42),rgba(17,77,48,.96));
    box-shadow:0 8px 18px rgba(0,0,0,.27),0 0 18px rgba(77,241,159,.23)
  }
  body.mobileHudOpen #mobileHudPanel #topRightControls > button:active:not(:disabled),
  body.mobileHudOpen #mobileHudPanel > #menuBtn:active,
  body.mobileHudOpen #mobileHudPanel > #mobileHelpToggle:active { transform:translateY(0) scale(.985) }
  body.mobileHudOpen #mobileHudPanel #topRightControls > button:disabled { border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.035);color:rgba(255,255,255,.42);box-shadow:none }
  body.mobileHudOpen #mobileHudPanel #formationChangeBtn[aria-expanded="true"],
  body.mobileHudOpen #mobileHudPanel #pauseBtn.active { border-color:#9dffcb;background:linear-gradient(115deg,rgba(64,216,132,.58),rgba(19,105,63,.96));box-shadow:0 0 19px rgba(87,245,165,.32) }
  body.mobileHudOpen #mobileHudPanel #tutorialLanguageSwitch { align-self:flex-end }
  body.mobileHudOpen #mobileHudPanel > #mobileHelpToggle {
    display:block;min-height:42px;padding:10px 12px;border-radius:8px;border:1px solid rgba(143,245,180,.48);
    background:linear-gradient(115deg,rgba(13,47,33,.92),rgba(9,26,19,.94));color:#f1fff6;font-family:inherit;font-size:14px;font-weight:800;line-height:1.2;cursor:pointer;
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease
  }
  body.mobileHudOpen #mobileHudPanel > #hint { display:none!important }
  body.mobileHudOpen.mobileHudHelpOpen #mobileHudPanel > #hint { display:block!important;padding:10px 11px;border-radius:8px;background:rgba(0,0,0,.3);color:rgba(255,255,255,.82);font-size:12px;line-height:1.45;white-space:normal }

  body.touch #mobileHudPanel > #rosterBar,
  body.touch #mobileHudPanel > #phaseBadge,
  body.touch #mobileHudPanel > #topRightControls,
  body.touch #mobileHudPanel > #menuBtn,
  body.touch #mobileHudPanel > #mobileHelpToggle,
  body.touch #mobileHudPanel > #hint {
    position:relative !important; inset:auto !important; top:auto !important;
    right:auto !important; bottom:auto !important; left:auto !important;
    transform:none !important; z-index:auto !important; width:100%; max-width:none;
    margin:0; box-sizing:border-box; text-align:right; pointer-events:auto;
  }
  body.touch #ui {
    position:fixed !important; z-index:40 !important;
    left:calc(env(safe-area-inset-left, 0px) + 10px); top:calc(env(safe-area-inset-top, 0px) + 10px);
    transform:none; max-width:calc(100vw - 76px); justify-content:flex-start; text-align:left;
  }
  body.touch #turn {
    position:fixed !important; z-index:40 !important;
    left:calc(env(safe-area-inset-left, 0px) + 10px); top:calc(env(safe-area-inset-top, 0px) + 56px);
    transform:none; max-width:calc(100vw - 76px); text-align:left;
  }
  body.touch #shotTimer {
    position:fixed !important; z-index:43 !important;
    left:calc(env(safe-area-inset-left, 0px) + 10px); top:calc(env(safe-area-inset-top, 0px) + 94px);
    right:auto !important; bottom:auto !important; transform:none !important;
  }
  body.touch.net-online-active #shotTimer {
    top:calc(env(safe-area-inset-top, 0px) + 132px) !important;
  }
  body.touch.net-online-active.net-online-m2 #shotTimer {
    top:calc(env(safe-area-inset-top, 0px) + 180px) !important;
  }
  /* The neon score HUD owns the vertical center lane. It supersedes the
     older touch offsets so turn, spin status and timer remain symmetric. */
  body.touch #ui.xxiiiScoreHud + #turn {
    position:absolute !important; z-index:11 !important;
    left:50% !important; top:65px !important; right:auto !important; bottom:auto !important;
    transform:translateX(-50%) !important; max-width:min(260px,calc(100vw - 24px)); text-align:center !important;
    width:max-content;
    padding:5px 12px;
    background:rgba(4,28,25,.94);
    border:1px solid rgba(99,239,215,.65);
    border-radius:0 0 12px 12px;
    box-shadow:0 3px 10px rgba(0,0,0,.3);
    white-space:normal;
    overflow-wrap:anywhere;
    overflow:visible;
    text-overflow:clip;
  }
  body.touch #ui.xxiiiScoreHud::after { display:none; }
  body.touch #shotTimer {
    position:absolute !important; z-index:16 !important;
    left:50% !important; top:112px !important; right:auto !important; bottom:auto !important;
    transform:translateX(-50%) !important;
  }
  /* Phone composition: keep the smaller score board in the top-left corner.
     The turn text uses the decorative lower tray of that same board instead
     of the centre of the screen. Desktop HUD rules remain untouched. */
  /* Landscape phones are wide, but retain the same compact scoreboard as
     portrait.  A height limit keeps tablets on their larger composition. */
  @media (max-width:700px), (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:520px) {
    body.touch #ui.xxiiiScoreHud {
      left:calc(env(safe-area-inset-left, 0px) + 8px) !important;
      top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
      transform:none !important;
      width:min(320px,calc(100vw - 68px)) !important;
      max-width:min(320px,calc(100vw - 68px)) !important;
      min-height:48px;
      border-radius:12px 12px 17px 17px;
    }
    body.touch #ui.xxiiiScoreHud::after { left:34%; right:34%; bottom:-16px; height:16px; border-radius:0 0 12px 12px; }
    body.touch #ui.xxiiiScoreHud .xxiiiScoreTeam { gap:4px; padding:6px 7px; }
    body.touch #ui.xxiiiScoreHud .xxiiiKitSwatch { flex-basis:8px; width:8px; height:25px; border-radius:3px; }
    body.touch #ui.xxiiiScoreHud .xxiiiScoreValue { flex-basis:27px; width:27px; height:27px; font-size:17px; border-radius:6px; }
    body.touch #ui.xxiiiScoreHud .xxiiiScoreBrand { flex-basis:66px; }
    body.touch #ui.xxiiiScoreHud .xxiiiScoreBrand strong { font-size:16px; }
    body.touch #ui.xxiiiScoreHud .xxiiiScoreBrand small { margin-top:2px; font-size:4px; }
    body.touch #ui.xxiiiScoreHud .xxiiiScoreTeamName { font-size:9px; letter-spacing:.025em; }
    body.touch #ui.xxiiiScoreHud + #turn {
      position:fixed !important;
      z-index:41 !important;
      left:calc(env(safe-area-inset-left, 0px) + 8px + min(160px,calc((100vw - 68px)/2))) !important;
      top:calc(env(safe-area-inset-top, 0px) + 58px) !important;
      transform:translateX(-50%) !important;
      width:max-content !important;
      max-width:min(320px,calc(100vw - 68px)) !important;
      font-size:9px;
      line-height:1.1;
      text-align:center !important;
    }
  }
  body.touch #mobileHudPanel > #rosterBar { max-width:none; align-items:stretch; gap:5px; }
  body.touch #mobileHudPanel .rosterTeam { justify-content:flex-end; flex-wrap:wrap; }
  body.touch #mobileHudPanel .rosterTeam .rTeamName { max-width:38vw; }
  body.touch #mobileHudPanel .rosterP { max-width:42vw; }
  body.touch #mobileHudPanel > #topRightControls {
    flex-direction:column; flex-wrap:nowrap; justify-content:flex-start;
    align-items:stretch; gap:7px;
  }
  body.touch #mobileHudPanel #topRightControls > button,
  body.touch #mobileHudPanel > #menuBtn {
    width:100%; min-height:42px; padding:10px 12px; text-align:center;
  }
  body.touch #mobileHudPanel #tutorialLanguageSwitch { align-self:flex-end; }
  body.touch #mobileHudPanel > #mobileHelpToggle {
    display:block; min-height:42px; padding:10px 12px; border-radius:8px;
    border:1px solid rgba(143,245,180,.48); background:linear-gradient(115deg,rgba(13,47,33,.92),rgba(9,26,19,.94));
    color:#f1fff6; font-family:inherit; font-size:14px; font-weight:800; line-height:1.2; cursor:pointer;
  }
  body.touch #mobileHudPanel > #hint { display:none !important; }
  body.touch.mobileHudHelpOpen #mobileHudPanel > #hint {
    display:block !important; padding:10px 11px; border-radius:8px;
    background:rgba(0,0,0,.3); color:rgba(255,255,255,.82);
    font-size:12px; line-height:1.45; text-align:right; white-space:normal;
  }
  body.fps-walk-mode #mobileHudToggle,
  body.fps-walk-mode #mobileFullscreenToggle,
  body.fps-walk-mode #mobileHudPanel { display:none !important; }

body.touch #xxiii-music-player.xxiii-minimized{width:46px!important;height:46px!important;min-width:46px;max-width:46px;padding:0!important;border-radius:50%;box-sizing:border-box;}
body.touch #xxiii-music-player.xxiii-minimized .xxiii-title-window,
body.touch #xxiii-music-player.xxiii-minimized .xxiii-window-controls{display:none!important;}
body.touch #xxiii-music-player.xxiii-minimized .xxiii-music-top{width:100%;height:100%;justify-content:center;gap:0;}
body.touch #xxiii-music-player.xxiii-minimized .xxiii-music-note{width:100%;height:100%;font-size:24px;flex:1;background:none;}
body.touch #xxiii-music-player.xxiii-minimized .xxiii-winbtn{display:none!important;}
#xxiii-music-top{touch-action:none;}