/* Tegazumi Float GUI · first integrated release
 * PRESENTATION ONLY: all gameplay, identity, administration, and ranking code
 * remain in the existing modules. Classic layout: ?classic=1
 * The sidebar and game UI retain their existing DOM contracts.
 */
body.float-ui{
  --canvas:#fafafa;--surface:#fff;--surface-soft:#f3f4f4;
  --sidebar:#fff;--selected:#f3f4f4;--text:#29383c;--muted:#718086;
  --line:#e8ebeb;--accent:#8191de;--accent-soft:rgba(129,145,222,.13);
  --shadow:0 9px 30px rgba(34,47,52,.045);
  --sidebar-expanded:218px;--sidebar-collapsed:70px;
  --float-gradient:radial-gradient(ellipse at 50% 45%,rgba(148,160,171,.11) 0%,transparent 65%);
  background:var(--canvas);color:var(--text);
}
:root[data-theme="dark"] body.float-ui{
  --canvas:#171b1d;--surface:#202527;--surface-soft:#282e30;
  --sidebar:#202527;--selected:#292f33;--text:#f1f3f3;--muted:#b0bbbf;
  --line:#343b3e;--accent:#9aabe9;--accent-soft:rgba(147,165,245,.13);
  --shadow:0 13px 35px rgba(0,0,0,.19);
  --float-gradient:radial-gradient(ellipse at 50% 45%,rgba(130,148,164,.19) 0%,transparent 67%);
}
body.float-ui .app-shell:not(.admin-mode){min-height:100dvh;}
body.float-ui .app-shell .sidebar{
  position:sticky;top:0;align-self:flex-start;height:100dvh;min-height:100dvh;
  background:var(--sidebar);border-right:1px solid var(--line);
  overflow:visible;flex:none;transition:width .32s cubic-bezier(.2,1,.3,1);
}
body.float-ui .app-shell .sidebar-top{
  min-height:111px;height:111px;padding:18px 14px 10px;
  border-bottom:0;align-items:flex-start;position:relative;
}
body.float-ui .app-shell .side-brand{display:flex;gap:9px;font-size:16px;font-weight:850;letter-spacing:-.06em}
body.float-ui .app-shell .brand-monogram{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  background:var(--text);color:var(--canvas);border-radius:13px;
  font-size:25px;letter-spacing:-1px;
  padding-bottom:3px;padding-right:1px;
}
body.float-ui .app-shell .sidebar-brand-block{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;
}
body.float-ui .app-shell .environment-indicator{
  position:static;max-width:172px;font-size:9px;letter-spacing:.06em;
  padding:3px 7px;box-shadow:none;line-height:1.3;
}
body.float-ui .app-shell .collapse-button{width:30px;height:30px;flex:none}
body.float-ui .app-shell.sidebar-collapsed .collapse-button{
  position:absolute;left:20px;top:70px;
}
body.float-ui .app-shell.sidebar-collapsed .sidebar-top{
  padding:17px 12px 8px;justify-content:flex-start;
}
body.float-ui .app-shell.sidebar-collapsed .sidebar-top .sidebar-brand-block{
  width:100%;align-items:center;
}
body.float-ui .app-shell.sidebar-collapsed .sidebar-top .brand-monogram{
  flex:0 0 38px;
}
body.float-ui .app-shell .sidebar-content{
  overflow:hidden;min-height:0;flex:1;padding:4px 12px 0;
}
body.float-ui .app-shell .side-nav{gap:5px}
body.float-ui .app-shell .side-nav a{
  min-height:43px;border-radius:13px;padding:0 12px;gap:12px;
  color:var(--muted);font-size:12px;font-weight:710;transition:background .18s,color .18s;
}
body.float-ui .app-shell .side-nav a:hover{background:var(--surface-soft);color:var(--text)}
body.float-ui .app-shell .side-nav a[aria-current="page"]{background:var(--selected);color:var(--text)}
/* The selected playable game's colour comes from its catalogue tokens.
   Scope to game links; other sidebar destinations remain neutral. */
:root[data-theme="light"] body.float-ui .app-shell .sidebar-game-list
 .side-nav a[data-game][aria-current="page"]{
  background:color-mix(in srgb,var(--game-tint) 88%,var(--sidebar));
  color:var(--game-ink);
}
body.float-ui .app-shell .side-nav a>svg{width:19px;height:19px;flex:0 0 19px}

body.float-ui .app-shell .sidebar-game-list .side-nav:empty{display:none}
body.float-ui .app-shell .games-label{margin:14px 10px 7px}
body.float-ui .app-shell .sidebar-bottom{
  margin-top:auto;padding:12px 10px 18px;border:0;flex:none;
}
body.float-ui .app-shell .sidebar-note{display:none}
body.float-ui .app-shell .float-sidebar-tools{
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
body.float-ui .app-shell .float-sidebar-tools>.profile-control,
body.float-ui .app-shell .float-sidebar-tools>.site-audio{
  position:relative;display:flex;align-items:center;justify-content:center;
}
body.float-ui .app-shell .float-sidebar-tools .icon-button,
body.float-ui .app-shell .float-sidebar-tools .account-link{
  min-width:42px;width:42px;min-height:42px;height:42px;
  padding:0;border:0;background:transparent;border-radius:13px;color:var(--muted);
}
body.float-ui .app-shell .float-sidebar-tools :is(.icon-button,.account-link):hover{
  background:var(--surface-soft);color:var(--text);
}
body.float-ui .app-shell .float-sidebar-tools .account-link span,
body.float-ui .app-shell .float-sidebar-tools .account-chevron{
  display:none;
}
body.float-ui .app-shell .float-sidebar-tools .profile-menu{
  position:absolute;bottom:0;top:auto;right:auto;left:calc(100% + 12px);
  width:258px;z-index:35;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 19px 55px rgba(0,0,0,.17);
}
body.float-ui .app-shell .float-sidebar-tools .site-audio-panel{
  position:absolute;left:calc(100% + 13px);bottom:0;top:auto;right:auto;
  z-index:36;background:var(--surface);
}
body.float-ui .app-shell .float-sidebar-tools #site-audio-expand{display:none}
body.float-ui .app-shell:not(.admin-mode) .workspace{min-width:0;min-height:100dvh}
body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar{
  min-height:0;height:0;overflow:visible;border:0;padding:0;background:transparent;
}
body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar>*{display:none}
body.float-ui .app-shell:not(.admin-mode) main#main-content{
  max-width:none;width:100%;padding:0 clamp(22px,3.8vw,64px) 38px;
  margin:0 auto;min-width:0;
}
body.float-ui .app-shell:not(.admin-mode) #main-content>.page:not([hidden]){
  max-width:1280px;margin:0 auto;
  animation:float-route-enter .26s cubic-bezier(.2,1,.3,1) both;
}
@keyframes float-route-enter{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}
body.float-ui .app-shell:not(.admin-mode) .page-header h1,
body.float-ui .app-shell:not(.admin-mode) .home-intro h1{letter-spacing:-.065em;font-weight:810}
body.float-ui .app-shell:not(.admin-mode) .home-intro{
  padding:clamp(32px,5vh,65px) 6px 26px;
}
body.float-ui .app-shell:not(.admin-mode) .home-intro h1{
  font-size:clamp(39px,4.7vw,67px);line-height:1.04;max-width:670px;
}
body.float-ui .app-shell:not(.admin-mode) .home-intro-copy>p:last-child{
  font-size:14px;color:var(--muted)
}
body.float-ui .app-shell:not(.admin-mode) .home-sticker{
  opacity:.8;transform:rotate(-7deg) scale(.92)
}
body.float-ui .app-shell:not(.admin-mode) .home-main{grid-template-columns:minmax(0,1.65fr) minmax(245px,.75fr);gap:22px}
body.float-ui .app-shell:not(.admin-mode) .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
body.float-ui .app-shell:not(.admin-mode) .game-catalog-card{
  overflow:hidden;border:0;border-radius:22px;box-shadow:none;background:var(--surface);
  transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s
}
body.float-ui .app-shell:not(.admin-mode) .game-catalog-card:hover{
  transform:translateY(-4px);box-shadow:0 14px 32px var(--shadow)
}
body.float-ui .app-shell:not(.admin-mode) .game-catalog-card .card-art{min-height:152px}
body.float-ui .app-shell:not(.admin-mode) .library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.float-ui .app-shell:not(.admin-mode) .page-header{padding-top:24px}
body.float-ui .app-shell:not(.admin-mode) .page-header h1{font-size:clamp(40px,4.7vw,64px)}
/* Keep account and admin data readable across both themes. */
body.float-ui .app-shell:not(.admin-mode) :is(.profile-menu,.player-stat-card,.stats-top-games,.plus-card){
  color:var(--text);
}
body.float-ui .app-shell:not(.admin-mode) :is(.profile-menu a,.player-stat-card a):hover{
  color:var(--text);background:var(--surface-soft);
}
body.float-ui .app-shell:not(.admin-mode) .footer{
  border-top:1px solid var(--line);padding:14px 32px 18px;color:var(--muted);
}

@media(max-width:1050px){
  body.float-ui .app-shell:not(.admin-mode) .home-main{grid-template-columns:minmax(0,1fr)}
  body.float-ui .app-shell:not(.admin-mode) .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  body.float-ui .app-shell .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:51;width:260px;
    height:100dvh;min-height:100dvh;transform:translateX(-110%);
  }
  body.float-ui .app-shell.mobile-open .sidebar{transform:translateX(0)}
  body.float-ui .app-shell .sidebar-top{min-height:85px;height:85px;padding:17px}
  body.float-ui .app-shell .sidebar-content{padding:7px 13px}
  body.float-ui .app-shell .sidebar .side-brand{display:flex}
  body.float-ui .app-shell .sidebar .sidebar-label{display:initial}
  body.float-ui .app-shell .sidebar .brand-monogram{display:grid}
  body.float-ui .app-shell .float-sidebar-tools{flex-direction:row;justify-content:space-around}
  body.float-ui .app-shell .float-sidebar-tools .profile-menu{
    left:12px;bottom:58px;max-width:calc(100vw - 25px)
  }
  body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar{
    height:54px;min-height:54px;padding:0 15px;border:0;
    display:flex;gap:10px;
  }
  body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar>.mobile-menu,
  body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar>.mobile-brand-block,
  body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar>.topbar-spacer{display:flex}
  body.float-ui .app-shell:not(.admin-mode) .workspace>.topbar .mobile-menu{width:42px}
  body.float-ui .app-shell:not(.admin-mode) main#main-content{padding:0 13px 100px}
  body.float-ui .app-shell:not(.admin-mode) #main-content>.page:not([hidden]){width:100%}
  body.float-ui .app-shell:not(.admin-mode) .home-intro{padding:13px 2px 23px}
  body.float-ui .app-shell:not(.admin-mode) .home-intro h1{font-size:clamp(34px,9vw,45px)}
  body.float-ui .app-shell:not(.admin-mode) .home-sticker{display:none}
  body.float-ui .app-shell:not(.admin-mode) .catalog-grid{grid-template-columns:minmax(0,1fr)}
  body.float-ui .app-shell .mobile-bottom-nav{
    display:grid!important;position:fixed;left:0;right:0;bottom:0;
    grid-template-columns:repeat(5,minmax(0,1fr));height:70px;
    padding:6px 8px calc(7px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--surface) 93%,transparent);
    border-top:1px solid var(--line);backdrop-filter:blur(16px);z-index:35;
  }
  body.float-ui .app-shell .mobile-bottom-nav>a,
  body.float-ui .app-shell .mobile-bottom-nav>button{
    display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;padding:4px 0;color:var(--muted);border-radius:11px;
    font-size:10px;font-weight:690;background:transparent;border:0;
  }
  body.float-ui .app-shell .mobile-bottom-nav :is(a,button)[aria-current="page"]{
    color:var(--text);background:var(--selected)
  }
  body.float-ui .app-shell .mobile-bottom-nav svg{height:19px;width:19px}
  body.float-ui .app-shell:not(.admin-mode) .footer{padding-bottom:89px}
}

/* Float second pass - full product pages share the open, border-light rhythm. */
body.float-ui .app-shell .sidebar-content>.nav-section-label{margin-top:2px}
body.float-ui .app-shell .sidebar-game-list .nav-section-label{display:none}
body.float-ui .app-shell .sidebar-game-list .side-nav{
  gap:5px;margin-top:15px;padding-top:13px;border-top:1px solid var(--line)
}
body.float-ui .app-shell .sidebar-content>.side-nav{gap:5px}
body.float-ui .app-shell .sidebar-content{overscroll-behavior:contain}
body.float-ui .app-shell .float-sidebar-tools{flex-shrink:0}
body.float-ui .app-shell:not(.admin-mode) .player-stat-card{
  background:transparent;border:0;border-top:1px solid var(--line);
  box-shadow:none;border-radius:0;min-height:160px;padding:19px 7px;
}
body.float-ui .app-shell:not(.admin-mode) .page-stats .player-stat-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:none;gap:24px;margin:25px 0 32px;
}
body.float-ui .app-shell:not(.admin-mode) .page-stats .player-stat-card h2{
  color:var(--muted);font-size:13px;font-weight:710
}
body.float-ui .app-shell:not(.admin-mode) .page-stats .player-stat-card strong{
  font-size:clamp(40px,4.5vw,65px);font-weight:830;letter-spacing:-.075em
}
/* The outer Recent Games section uses the shared .plus-feature card.
   Only the inner Top 3 Games content keeps this editorial list treatment. */
body.float-ui .app-shell:not(.admin-mode) .page-stats .stats-top-games{
  border:0;border-top:1px solid var(--line);box-shadow:none;border-radius:0;
  padding:24px 6px;background:transparent;
}
body.float-ui .app-shell:not(.admin-mode) .page-stats .stats-history-body,
body.float-ui .app-shell:not(.admin-mode) .page-stats .player-ranking-details{
  color:var(--muted)
}
body.float-ui .app-shell:not(.admin-mode) .page-stats :is(.stats-history-row,.stats-top-games-list>*) {
  border-color:var(--line)
}
body.float-ui .app-shell:not(.admin-mode) .page-plus .plus-billing{
  margin:9px 0 24px;
}
body.float-ui .app-shell:not(.admin-mode) .page-plus .plus-plans{
  gap:clamp(28px,5vw,85px);
}
body.float-ui .app-shell:not(.admin-mode) .page-plus .plus-plan{
  border:0;border-top:2px solid var(--line);border-radius:0;
  padding:24px 0 16px;background:transparent;box-shadow:none
}
body.float-ui .app-shell:not(.admin-mode) .page-plus .plus-plan.plus-premium{
  border-top-color:var(--accent)
}
body.float-ui .app-shell:not(.admin-mode) .page-plus .plan-price{
  font-size:clamp(45px,5vw,70px);font-weight:825;letter-spacing:-.085em;line-height:1.15;
  margin:16px 0 9px
}
body.float-ui .app-shell:not(.admin-mode) .page-plus .plan-title-row h2{
  font-size:clamp(24px,3vw,36px);letter-spacing:-.055em
}
body.float-ui .app-shell:not(.admin-mode) .page-plus .plan-summary{margin-bottom:25px}
body.float-ui .app-shell:not(.admin-mode) .page-plus .plus-disclaimer{margin:20px 0 0}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-progress{
  background:transparent;border:0;box-shadow:none;
  padding:0;margin-top:0
}
body.float-ui .app-shell:not(.admin-mode) .home-progress-heading{
  padding-bottom:14px;border-bottom:1px solid var(--line)
}
body.float-ui .app-shell:not(.admin-mode) .home-progress .home-metric{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none
}
body.float-ui .app-shell:not(.admin-mode) .page-home .home-featured .section-header{
  margin-bottom:15px
}
@media(max-height:760px) and (min-width:701px){
  body.float-ui .app-shell .sidebar-top{
    height:91px;min-height:91px;padding-top:12px
  }
  body.float-ui .app-shell.sidebar-collapsed .collapse-button{top:58px}
  body.float-ui .app-shell .sidebar-content{padding-top:0}
  body.float-ui .app-shell .side-nav{gap:1px}
  body.float-ui .app-shell .side-nav a{min-height:36px}
  body.float-ui .app-shell .sidebar-game-list .side-nav{
    gap:1px;padding-top:8px;margin-top:8px
  }
  body.float-ui .app-shell .sidebar-bottom{padding:7px 9px}
  body.float-ui .app-shell .float-sidebar-tools{gap:3px}
}
@media(max-width:950px) and (min-width:701px){
  body.float-ui .app-shell.sidebar-collapsed .sidebar{
    width:var(--sidebar-collapsed)
  }
  body.float-ui .app-shell .sidebar .side-brand{
    display:flex
  }
  body.float-ui .app-shell .sidebar .sidebar-content{
    padding-inline:9px
  }
}
@media(max-width:700px){
  body.float-ui .app-shell:not(.admin-mode) .page-stats .player-stat-cards{
    grid-template-columns:1fr;gap:0;margin:12px 0 22px
  }
  body.float-ui .app-shell:not(.admin-mode) .page-stats .player-stat-card{
    min-height:110px;padding:17px 8px
  }
  body.float-ui .app-shell:not(.admin-mode) .page-stats .player-stat-card strong{
    font-size:44px
  }
  body.float-ui .app-shell:not(.admin-mode) .page-plus .plus-plans{
    grid-template-columns:1fr;gap:18px
  }
  body.float-ui .app-shell:not(.admin-mode) .page-plus .plan-price{font-size:50px}
  body.float-ui .app-shell:not(.admin-mode) .home-progress{margin-top:0}
}


/* Float third pass - fixed utilities, consistent game geometry, live-score modal. */
body.float-ui .app-shell .sidebar .sidebar-bottom{
  display:flex!important;flex-direction:column;justify-content:flex-end;
  visibility:visible;overflow:visible;margin-top:auto;
  padding:10px 8px 16px;min-height:155px;flex:0 0 auto;
}
body.float-ui .app-shell .sidebar .float-sidebar-tools{
  display:flex!important;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:10px;width:100%;
  visibility:visible;opacity:1;
}
body.float-ui .app-shell .float-sidebar-tools > *{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
}
body.float-ui .app-shell .float-sidebar-tools #theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
}
body.float-ui .app-shell .float-sidebar-tools #profile-toggle{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--surface-soft);color:var(--text);
}
body.float-ui .app-shell .float-sidebar-tools #site-audio-mute{
  display:inline-flex;align-items:center;justify-content:center;
}
body.float-ui .app-shell .float-sidebar-tools .site-audio-panel{
  visibility:visible;min-width:180px;box-shadow:var(--shadow);
  border:1px solid var(--line);border-radius:14px;padding:16px;
}
body.float-ui .app-shell .float-sidebar-tools .profile-menu{
  visibility:visible;color:var(--text);border-radius:18px;
}
body.float-ui .app-shell .float-sidebar-tools .profile-menu[hidden],
body.float-ui .app-shell .float-sidebar-tools .site-audio-panel[hidden]{
  display:none!important
}
/* Return a volume control without crowding the fixed-width collapsed rail. */
body.float-ui .app-shell .float-sidebar-tools .site-audio-expand{
  position:static;display:grid!important;place-items:center;
  width:16px;height:40px;opacity:1;pointer-events:auto;
  color:var(--muted);border:0;
}
body.float-ui .app-shell .float-sidebar-tools #site-audio-mute{
  min-width:32px;width:32px;
}
body.float-ui .app-shell .float-sidebar-tools .site-audio{
  cursor:pointer
}
/* When the mute button receives right-click or keyboard focus, the existing
 * volume control remains accessible through its standard slider panel.
 * Expose a small dedicated adjust control in the expanded rail. */
body.float-ui .app-shell:not(.admin-mode):not(.sidebar-collapsed) .float-sidebar-tools .site-audio-expand{
  position:static;display:grid!important;opacity:1;pointer-events:auto;
  width:20px;height:40px
}
body.float-ui .page-stats .player-stat-card strong{font-variant-numeric:tabular-nums}
@media(max-width:700px){
  body.float-ui .app-shell .sidebar .sidebar-bottom{
    padding:10px 9px 16px;min-height:72px
  }
  body.float-ui .app-shell .sidebar .float-sidebar-tools{
    flex-direction:row;justify-content:space-evenly;gap:6px
  }
}
@media(prefers-reduced-motion:reduce){
  body.float-ui *,body.float-ui *:before,body.float-ui *:after{
    animation-duration:.01ms!important;transition-duration:.01ms!important
  }
}

/* The mobile drawer is a fixed-height flex column. Only the navigation list
   scrolls, so the identity and account tools remain reachable at all times. */
@media(max-width:700px){
 body.float-ui .app-shell .sidebar,
 body.float-ui .app-shell.sidebar-collapsed .sidebar{
   display:flex;flex-direction:column;min-height:0;height:100dvh;
 }
 body.float-ui .app-shell .sidebar .sidebar-content,
 body.float-ui .app-shell.sidebar-collapsed .sidebar .sidebar-content{
   flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;
   overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
   touch-action:pan-y;scrollbar-width:thin;
   padding-bottom:16px;
 }
}

/* Compact mobile navigation: 54px of chrome with a 44px minimum
   touch target, plus the device safe-area inset (never clipped). */
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .mobile-bottom-nav{
  height:calc(54px + env(safe-area-inset-bottom));
  padding:3px 8px calc(4px + env(safe-area-inset-bottom));
 }
 body.float-ui .app-shell:not(.admin-mode) .mobile-bottom-nav>a,
 body.float-ui .app-shell:not(.admin-mode) .mobile-bottom-nav>button{
  min-height:44px;padding:0;gap:2px;font-size:9.5px;
 }
 body.float-ui .app-shell:not(.admin-mode) .mobile-bottom-nav svg{
  width:18px;height:18px;
 }
}

/* Quiet global mobile navigation; preserve >=44px pointer targets and iOS
   safe-area padding while returning height to the game stage. */
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) .mobile-bottom-nav{
  height:calc(49px + env(safe-area-inset-bottom));
  padding:2px 8px calc(2px + env(safe-area-inset-bottom))
 }
 body.float-ui .app-shell:not(.admin-mode) .mobile-bottom-nav>a,
 body.float-ui .app-shell:not(.admin-mode) .mobile-bottom-nav>button{
  min-height:44px;gap:1px;font-size:9px
 }
 body.float-ui .app-shell:not(.admin-mode) .mobile-bottom-nav svg{
  width:16px;height:16px
 }
}