/*
 * Fbrkh Design System V2 — premium party-gaming shell.
 * Scope: platform homepage only in modern mode. Classic mode remains untouched.
 * This file intentionally loads last so it can retire legacy visual overrides
 * without changing any runtime IDs, forms, or game navigation contracts.
 */
html[data-ui-mode="modern"] body.platform-home.home-v2{
  --v2-bg:#050916;
  --v2-bg-2:#081229;
  --v2-surface:rgba(8,18,40,.82);
  --v2-surface-strong:rgba(7,16,36,.95);
  --v2-line:rgba(153,179,232,.20);
  --v2-line-strong:rgba(166,190,239,.34);
  --v2-text:#fffaf2;
  --v2-muted:#aeb9cd;
  --v2-purple:#9d55ff;
  --v2-purple-2:#7536f0;
  --v2-gold:#ffc94a;
  --v2-gold-soft:#ffe49a;
  --v2-radius-sm:14px;
  --v2-radius-md:20px;
  --v2-radius-lg:28px;
  --v2-shadow:0 22px 60px rgba(0,0,0,.32);
  color:var(--v2-text)!important;
  background:var(--v2-bg)!important;
  text-rendering:optimizeLegibility;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .home-ambient{
  background:
    radial-gradient(circle at 12% 21%,rgba(255,190,88,.18),transparent 10%),
    radial-gradient(circle at 88% 20%,rgba(255,190,88,.14),transparent 10%),
    radial-gradient(ellipse at 13% 48%,rgba(122,54,218,.26),transparent 31%),
    radial-gradient(ellipse at 87% 45%,rgba(88,65,205,.22),transparent 32%),
    radial-gradient(ellipse at 50% 7%,rgba(55,80,161,.22),transparent 43%),
    linear-gradient(180deg,#071126 0%,#08132b 38%,#050916 100%)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .home-ambient::before{
  height:40%!important;
  opacity:.62!important;
  filter:blur(18px)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .home-ambient::after{
  opacity:.55!important;
}

/* Header: approved logo is the lockup; no duplicate text beside it. */
html[data-ui-mode="modern"] body.platform-home.home-v2 .home-topbar{
  width:min(1280px,calc(100% - 48px))!important;
  min-height:72px!important;
  height:72px!important;
  margin:18px auto 0!important;
  padding:0 18px!important;
  grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr)!important;
  gap:18px!important;
  border:1px solid var(--v2-line)!important;
  border-radius:var(--v2-radius-md)!important;
  background:rgba(5,13,31,.78)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.04)!important;
  backdrop-filter:blur(18px) saturate(118%)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .brand{
  grid-column:3!important;
  width:104px!important;
  min-width:104px!important;
  height:68px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .brand-mark{
  width:100px!important;
  height:75px!important;
  max-width:none!important;
  flex:0 0 100px!important;
  object-fit:contain!important;
  filter:none!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .brand-word{
  display:none!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .primary-nav{
  gap:4px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .primary-nav .nav-link{
  min-height:40px!important;
  padding:0 15px!important;
  border-radius:13px!important;
  color:#cbd3e2!important;
  font-size:12px!important;
  font-weight:700!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .primary-nav .nav-link.active{
  border-color:rgba(157,85,255,.38)!important;
  background:rgba(139,68,238,.13)!important;
  box-shadow:none!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .desktop-account{
  min-height:42px!important;
  border-color:var(--v2-line)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.035)!important;
}

/* Hero: one clear message and two actions; decorative noise is retired. */
html[data-ui-mode="modern"] body.platform-home.home-v2 .home-hero{
  width:min(1180px,calc(100% - 48px))!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:68px 24px 30px!important;
  text-align:center!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-copy{
  max-width:790px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-card-stack,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-note{
  display:none!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .home-hero h1{
  max-width:780px!important;
  font-size:clamp(48px,5vw,72px)!important;
  line-height:1.12!important;
  letter-spacing:-3px!important;
  text-wrap:balance!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-lead{
  max-width:620px!important;
  margin:15px auto 0!important;
  color:#c9d1df!important;
  font-size:15px!important;
  line-height:1.85!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-actions{
  margin-top:22px!important;
  gap:10px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-primary,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-secondary{
  min-height:52px!important;
  height:52px!important;
  padding:0 25px!important;
  border-radius:15px!important;
  font-size:13px!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-primary{
  min-width:210px!important;
  border-color:rgba(255,227,151,.76)!important;
  background:linear-gradient(180deg,#ffd86c,#ffbd35)!important;
  color:#22190b!important;
  box-shadow:0 10px 28px rgba(255,188,53,.20),inset 0 1px rgba(255,255,255,.68)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-secondary{
  min-width:175px!important;
  border-color:var(--v2-line-strong)!important;
  background:rgba(9,23,51,.58)!important;
  color:#f6f8fc!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-primary:hover,
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-secondary:hover{
  transform:translateY(-1px)!important;
}

/* Join is a primary utility, but visually subordinate to starting a game. */
html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-join{
  width:min(540px,100%)!important;
  margin:18px auto 0!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .join-input-row{
  height:58px!important;
  padding:6px!important;
  grid-template-columns:38px minmax(0,1fr) 104px!important;
  border-color:rgba(145,171,228,.28)!important;
  border-radius:15px!important;
  background:rgba(5,17,39,.74)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.035)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .join-people{
  color:#b98cff!important;
  opacity:.92!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .join-input-row input{
  height:44px!important;
  font-size:14px!important;
  letter-spacing:2.5px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .join-input-row .btn{
  height:44px!important;
  min-height:44px!important;
  border-radius:11px!important;
  border-color:rgba(204,166,255,.34)!important;
  background:linear-gradient(180deg,var(--v2-purple),var(--v2-purple-2))!important;
  box-shadow:0 8px 21px rgba(117,54,240,.22),inset 0 1px rgba(255,255,255,.16)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .join-status{
  min-height:14px!important;
  margin-top:5px!important;
}

/* Game shelf: posters stay the visual hero, framing is standardized. */
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-section{
  width:min(1280px,calc(100% - 48px))!important;
  padding:0 0 18px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid{
  gap:14px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .game-card{
  min-height:218px!important;
  aspect-ratio:1.44 / 1!important;
  border-width:1px!important;
  border-radius:18px!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
  transform:translateZ(0);
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .game-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.31)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .game-art{
  opacity:.96!important;
  transition:transform .28s ease,filter .28s ease!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .game-card:hover .game-art{
  transform:scale(1.018)!important;
  filter:saturate(1.03)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid .game-card .game-shade{
  background:linear-gradient(180deg,rgba(3,7,17,0) 0 60%,rgba(3,7,17,.09) 78%,rgba(3,7,17,.30) 100%)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .game-go{
  left:13px!important;
  bottom:13px!important;
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  border-color:rgba(255,255,255,.34)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .game-card:focus-visible{
  outline:3px solid rgba(255,210,91,.92)!important;
  outline-offset:4px!important;
}

/* Secondary information should support, not compete with the games. */
html[data-ui-mode="modern"] body.platform-home.home-v2 .feature-strip{
  width:min(1280px,calc(100% - 48px))!important;
  min-height:72px!important;
  margin-bottom:18px!important;
  border-color:var(--v2-line)!important;
  border-radius:16px!important;
  background:rgba(6,17,38,.66)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .feature{
  min-height:54px!important;
  border-left-color:rgba(145,171,225,.14)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .feature b{
  font-size:11.5px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .feature small{
  color:#96a3b8!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .quick-section{
  width:min(1280px,calc(100% - 48px))!important;
  padding-bottom:36px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .quick-head{
  margin:6px 0 14px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .quick-head h2{
  font-size:18px!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .visual-step{
  min-height:96px!important;
  border-color:var(--v2-line)!important;
  border-radius:16px!important;
  background:rgba(6,17,38,.70)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.025)!important;
}
html[data-ui-mode="modern"] body.platform-home.home-v2 .visual-steps .step-number{
  border-color:rgba(255,211,90,.32)!important;
  background:rgba(255,202,69,.08)!important;
  box-shadow:none!important;
}

/* Shared focus treatment for keyboard/TV navigation. */
html[data-ui-mode="modern"] body.platform-home.home-v2 a:focus-visible,
html[data-ui-mode="modern"] body.platform-home.home-v2 button:focus-visible,
html[data-ui-mode="modern"] body.platform-home.home-v2 input:focus-visible{
  outline:3px solid rgba(255,210,91,.88)!important;
  outline-offset:3px!important;
}

@media (max-width:1050px) and (min-width:701px){
  html[data-ui-mode="modern"] body.platform-home.home-v2 .home-topbar{
    width:calc(100% - 32px)!important;
    grid-template-columns:170px 1fr 170px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .primary-nav .nav-link{padding-inline:10px!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .home-hero{padding-top:56px!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .games-section,
  html[data-ui-mode="modern"] body.platform-home.home-v2 .feature-strip,
  html[data-ui-mode="modern"] body.platform-home.home-v2 .quick-section{width:calc(100% - 32px)!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Mobile is a purpose-built home, not compressed desktop. */
@media (max-width:700px){
  html[data-ui-mode="modern"] body.platform-home.home-v2{
    padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .home-topbar{
    width:calc(100% - 24px)!important;
    height:62px!important;
    min-height:62px!important;
    margin:10px auto 0!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    border-radius:17px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .brand{
    width:84px!important;
    min-width:84px!important;
    height:58px!important;
    display:flex!important;
    order:1!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .brand-mark{
    width:82px!important;
    height:61px!important;
    flex-basis:82px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .mobile-nav-btn{
    order:2!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border:1px solid var(--v2-line)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.035)!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .primary-nav{
    top:68px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    padding:10px!important;
    border:1px solid var(--v2-line)!important;
    border-radius:16px!important;
    background:rgba(5,13,31,.97)!important;
    box-shadow:var(--v2-shadow)!important;
    backdrop-filter:blur(18px)!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .desktop-account{display:none!important}

  html[data-ui-mode="modern"] body.platform-home.home-v2 .home-hero{
    width:100%!important;
    padding:44px 18px 22px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .home-hero h1{
    max-width:360px!important;
    font-size:clamp(38px,11.5vw,52px)!important;
    line-height:1.14!important;
    letter-spacing:-2px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-lead{
    max-width:330px!important;
    margin-top:11px!important;
    font-size:13px!important;
    line-height:1.75!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-actions{
    width:100%!important;
    margin-top:20px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-primary,
  html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-secondary{
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    min-height:54px!important;
    border-radius:14px!important;
    font-size:13px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-secondary{
    background:rgba(8,20,45,.72)!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .hero-join{
    width:100%!important;
    margin-top:12px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .join-input-row{
    width:100%!important;
    height:58px!important;
    grid-template-columns:34px minmax(0,1fr) 94px!important;
    border-radius:14px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .join-input-row .btn{
    padding-inline:12px!important;
    font-size:12px!important;
  }

  html[data-ui-mode="modern"] body.platform-home.home-v2 #games.games-section{
    width:100%!important;
    padding:8px 13px 17px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games .games-grid{
    gap:12px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games .games-grid .game-card{
    min-height:0!important;
    aspect-ratio:16 / 10!important;
    border-radius:17px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 #games .games-grid .game-go{
    left:12px!important;
    bottom:12px!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
  }

  html[data-ui-mode="modern"] body.platform-home.home-v2 .feature-strip{
    width:calc(100% - 26px)!important;
    margin-bottom:8px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-radius:15px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .feature{
    min-height:70px!important;
    padding:10px!important;
    gap:9px!important;
    border-left:0!important;
    border-bottom:1px solid rgba(145,171,225,.12)!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .feature:nth-last-child(-n+2){border-bottom:0!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .feature-icon{font-size:21px!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .feature small{font-size:8.5px!important}

  html[data-ui-mode="modern"] body.platform-home.home-v2 .mobile-bottom-nav{
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-height:62px!important;
    padding:6px!important;
    border:1px solid var(--v2-line)!important;
    border-radius:18px!important;
    background:rgba(5,13,31,.94)!important;
    box-shadow:0 18px 50px rgba(0,0,0,.42)!important;
    backdrop-filter:blur(18px) saturate(120%)!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .mobile-bottom-nav a,
  html[data-ui-mode="modern"] body.platform-home.home-v2 .mobile-bottom-nav button{
    min-height:50px!important;
    border-radius:13px!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .mobile-bottom-nav .active{
    background:rgba(157,85,255,.13)!important;
  }
  html[data-ui-mode="modern"] body.platform-home.home-v2 .fbrkh-site-footer{
    padding-bottom:calc(88px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:390px){
  html[data-ui-mode="modern"] body.platform-home.home-v2 .home-hero{padding-inline:14px!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .join-input-row{grid-template-columns:30px minmax(0,1fr) 88px!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .join-input-row input{font-size:13px!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .feature-strip{grid-template-columns:1fr!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .feature{border-bottom:1px solid rgba(145,171,225,.12)!important}
  html[data-ui-mode="modern"] body.platform-home.home-v2 .feature:last-child{border-bottom:0!important}
}

@media (prefers-reduced-motion:reduce){
  html[data-ui-mode="modern"] body.platform-home.home-v2 *,
  html[data-ui-mode="modern"] body.platform-home.home-v2 *::before,
  html[data-ui-mode="modern"] body.platform-home.home-v2 *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}