/* Fabraka Final V2 — real production visual system
   Modern mode only. Classic mode remains untouched. */

html[data-ui-mode="modern"]{
  --f2-bg:#080b20;
  --f2-bg-2:#0c102b;
  --f2-panel:#111632;
  --f2-panel-2:#171d3d;
  --f2-panel-3:#20284a;
  --f2-ink:#fbf8ef;
  --f2-muted:#aab2cc;
  --f2-line:rgba(255,255,255,.095);
  --f2-line-strong:rgba(255,255,255,.16);
  --f2-gold:#f2c94c;
  --f2-gold-2:#ffe28a;
  --f2-purple:#8b5cf6;
  --f2-purple-2:#b19aff;
  --f2-fib:#8b5cf6;
  --f2-qadha:#ef5261;
  --f2-khaltaha:#1fc48f;
  --f2-top10:#3d98ff;
  --f2-shadow:0 28px 80px rgba(0,0,0,.34);
  --f2-soft-shadow:0 14px 40px rgba(0,0,0,.22);
  --f2-r-xl:32px;
  --f2-r-lg:24px;
  --f2-r-md:18px;
  --f2-r-sm:13px;
  color-scheme:dark;
  background:var(--f2-bg);
}

html[data-ui-mode="modern"] body{
  color:var(--f2-ink)!important;
  background:
    radial-gradient(900px 540px at 82% -14%,rgba(139,92,246,.18),transparent 62%),
    radial-gradient(680px 460px at -8% 18%,rgba(242,201,76,.065),transparent 65%),
    linear-gradient(180deg,#0b0e25 0%,#080b20 52%,#060818 100%)!important;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html[data-ui-mode="modern"] body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.01) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,#000,transparent 78%);
}

html[data-ui-mode="modern"] :where(button,a,input,select,textarea){-webkit-tap-highlight-color:transparent}
html[data-ui-mode="modern"] :where(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(242,201,76,.95)!important;outline-offset:3px}

/* ---------- Shared premium controls ---------- */
html[data-ui-mode="modern"] :where(.btn.primary,.btn-primary,.t10-btn.primary,#startBtn,#startSessionBtn,#qInitialNewGame,.join-form button[type="submit"]){
  color:#17130a!important;
  background:linear-gradient(135deg,var(--f2-gold-2),var(--f2-gold))!important;
  border:1px solid rgba(255,232,145,.68)!important;
  border-radius:14px!important;
  box-shadow:0 12px 28px rgba(242,201,76,.17),inset 0 1px rgba(255,255,255,.42)!important;
  font-weight:900!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
html[data-ui-mode="modern"] :where(.btn.primary,.btn-primary,.t10-btn.primary,#startBtn,#startSessionBtn,#qInitialNewGame,.join-form button[type="submit"]):hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 16px 36px rgba(242,201,76,.23)!important}
html[data-ui-mode="modern"] :where(input,select,textarea){
  color:var(--f2-ink)!important;
  background:rgba(7,10,29,.78)!important;
  border:1px solid var(--f2-line-strong)!important;
  border-radius:14px!important;
}
html[data-ui-mode="modern"] :where(input,textarea)::placeholder{color:rgba(170,178,204,.67)!important}

/* =====================================================================
   HOME V2
   ===================================================================== */
html[data-ui-mode="modern"] body.platform-home.home-v2{overflow-x:hidden;background-color:var(--f2-bg)!important}
html[data-ui-mode="modern"] .home-v2 .background-shapes{display:none!important}

html[data-ui-mode="modern"] .home-v2 .home-topbar{
  width:min(1200px,calc(100% - 28px))!important;
  min-height:68px;
  margin:12px auto 0!important;
  padding:8px 10px 8px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  position:sticky!important;
  top:10px!important;
  z-index:100!important;
  border:1px solid var(--f2-line)!important;
  border-radius:20px!important;
  background:rgba(8,11,32,.80)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}
html[data-ui-mode="modern"] .home-v2 .home-topbar.is-condensed{min-height:60px;background:rgba(6,8,24,.92)!important}
html[data-ui-mode="modern"] .home-v2 .brand{display:inline-flex!important;align-items:center!important;gap:10px!important;text-decoration:none!important;color:var(--f2-ink)!important;min-width:max-content}
html[data-ui-mode="modern"] .home-v2 .brand-mark{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(139,92,246,.24))}
html[data-ui-mode="modern"] .home-v2 .brand-word{font-size:1.48rem;font-weight:950;letter-spacing:-.045em;line-height:1}
html[data-ui-mode="modern"] .home-v2 .brand-word small{display:block;margin-top:5px;color:var(--f2-muted);font-size:.58rem;font-weight:700;letter-spacing:0}
html[data-ui-mode="modern"] .home-v2 .primary-nav{display:flex!important;align-items:center!important;gap:3px!important}
html[data-ui-mode="modern"] .home-v2 :where(.nav-link,.nav-account){min-height:44px!important;padding:10px 13px!important;border:0!important;border-radius:13px!important;background:transparent!important;color:var(--f2-muted)!important;font-weight:800!important;text-decoration:none!important}
html[data-ui-mode="modern"] .home-v2 :where(.nav-link,.nav-account):hover{background:rgba(255,255,255,.06)!important;color:var(--f2-ink)!important}
html[data-ui-mode="modern"] .home-v2 .nav-account{border:1px solid var(--f2-line)!important;background:rgba(255,255,255,.035)!important}
html[data-ui-mode="modern"] .home-v2 .mobile-nav-btn{display:none}

html[data-ui-mode="modern"] .home-v2 main{padding-bottom:72px}
html[data-ui-mode="modern"] .home-v2 .home-hero{
  width:min(1200px,calc(100% - 28px))!important;
  min-height:620px!important;
  margin:22px auto 0!important;
  padding:clamp(28px,5vw,66px)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)!important;
  gap:clamp(30px,5vw,72px)!important;
  align-items:center!important;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:1px solid var(--f2-line)!important;
  border-radius:36px!important;
  background:
    linear-gradient(102deg,rgba(7,9,27,.98) 0%,rgba(9,12,35,.93) 48%,rgba(14,17,47,.66) 100%),
    radial-gradient(560px 440px at 85% 45%,rgba(139,92,246,.26),transparent 66%)!important;
  box-shadow:var(--f2-shadow)!important;
}
html[data-ui-mode="modern"] .home-v2 .home-hero::before{
  content:"";position:absolute;inset:-1px;z-index:-2;pointer-events:none;
  background:
    radial-gradient(520px 360px at 82% 22%,rgba(177,154,255,.17),transparent 66%),
    radial-gradient(420px 300px at 95% 85%,rgba(242,201,76,.07),transparent 68%);
}
html[data-ui-mode="modern"] .home-v2 .home-hero::after{
  content:"";position:absolute;z-index:-1;left:-90px;bottom:-180px;width:430px;height:430px;border-radius:50%;
  border:1px solid rgba(242,201,76,.09);box-shadow:0 0 0 55px rgba(139,92,246,.018),0 0 0 110px rgba(139,92,246,.012)
}
html[data-ui-mode="modern"] .home-v2 .hero-copy{max-width:690px;position:relative;z-index:2}
html[data-ui-mode="modern"] .home-v2 .eyebrow{display:inline-flex!important;align-items:center!important;gap:8px!important;padding:8px 13px!important;border:1px solid rgba(177,154,255,.20)!important;border-radius:999px!important;background:rgba(139,92,246,.10)!important;color:var(--f2-purple-2)!important;font-weight:850!important;font-size:.88rem!important}
html[data-ui-mode="modern"] .home-v2 #homeHeroTitle{margin:18px 0 14px!important;max-width:760px;font-size:clamp(2.85rem,6.2vw,6.1rem)!important;line-height:.99!important;letter-spacing:-.06em!important;color:var(--f2-ink)!important;text-wrap:balance}
html[data-ui-mode="modern"] .home-v2 #homeHeroTitle .hero-gold{color:var(--f2-gold)!important}
html[data-ui-mode="modern"] .home-v2 .hero-copy>p{max-width:640px;margin:0!important;color:#d6d9e7!important;font-size:clamp(1.02rem,1.5vw,1.23rem)!important;line-height:1.85!important}
html[data-ui-mode="modern"] .home-v2 .modern-hero-badges{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:21px!important}
html[data-ui-mode="modern"] .home-v2 .modern-hero-badges span{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid var(--f2-line);border-radius:999px;background:rgba(255,255,255,.03);color:var(--f2-muted);font-size:.86rem;font-weight:750}
html[data-ui-mode="modern"] .home-v2 .hero-actions{display:flex!important;align-items:center!important;gap:10px!important;margin-top:24px!important}
html[data-ui-mode="modern"] .home-v2 .hero-primary{min-height:54px!important;padding:0 27px!important;font-size:1rem!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
html[data-ui-mode="modern"] .home-v2 .hero-secondary{min-height:54px;padding:0 22px;border:1px solid var(--f2-line-strong);border-radius:14px;color:var(--f2-ink);background:rgba(255,255,255,.035);font-weight:850;text-decoration:none;display:inline-flex;align-items:center}

/* Room join is part of the hero, not a detached old section */
html[data-ui-mode="modern"] .home-v2 #joinGame.hero-join{width:100%!important;margin:26px 0 0!important;position:relative!important;z-index:3!important}
html[data-ui-mode="modern"] .home-v2 .hero-join .join-panel{padding:13px!important;display:block!important;border:1px solid rgba(242,201,76,.20)!important;border-radius:18px!important;background:rgba(17,22,50,.82)!important;box-shadow:0 16px 40px rgba(0,0,0,.22)!important;backdrop-filter:blur(12px)}
html[data-ui-mode="modern"] .home-v2 .hero-join .join-copy{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin-bottom:9px!important}
html[data-ui-mode="modern"] .home-v2 .hero-join .join-copy h2{margin:0!important;font-size:1rem!important;font-weight:900!important;color:var(--f2-ink)!important}
html[data-ui-mode="modern"] .home-v2 .hero-join .section-kicker{font-size:.74rem!important;color:var(--f2-gold)!important;font-weight:900!important}
html[data-ui-mode="modern"] .home-v2 .hero-join .join-form{margin:0!important}
html[data-ui-mode="modern"] .home-v2 .hero-join .join-form>label{display:none!important}
html[data-ui-mode="modern"] .home-v2 .hero-join .join-input-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px!important}
html[data-ui-mode="modern"] .home-v2 .hero-join #joinCodeInput{min-height:52px!important;padding-inline:16px!important;font-weight:900!important;letter-spacing:.10em!important;text-align:center!important;text-transform:uppercase!important;background:rgba(7,10,28,.86)!important}
html[data-ui-mode="modern"] .home-v2 .hero-join button[type="submit"]{min-height:52px!important;padding:0 22px!important;white-space:nowrap!important}
html[data-ui-mode="modern"] .home-v2 .hero-join :where(#joinGameHelp,#joinStatus){display:block;margin:7px 4px 0!important;color:var(--f2-muted)!important;font-size:.76rem!important;line-height:1.45!important}

/* Hero game mosaic */
html[data-ui-mode="modern"] .home-v2 .home-hero-art{min-height:470px!important;position:relative!important;display:grid!important;place-items:center!important}
html[data-ui-mode="modern"] .home-v2 .hero-visual-label{position:absolute;top:2px;right:0;display:flex;align-items:center;gap:9px;color:var(--f2-muted);font-size:.82rem;font-weight:800}
html[data-ui-mode="modern"] .home-v2 .hero-visual-label img{width:34px;height:34px}
html[data-ui-mode="modern"] .home-v2 .hero-game-stack{width:min(430px,100%)!important;height:430px!important;position:relative!important;transform:none!important}
html[data-ui-mode="modern"] .home-v2 .hero-game-chip{position:absolute!important;width:188px!important;height:208px!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:28px!important;display:grid!important;place-items:center!important;overflow:hidden!important;box-shadow:0 28px 58px rgba(0,0,0,.30)!important;transition:transform .25s ease,filter .25s ease!important}
html[data-ui-mode="modern"] .home-v2 .hero-game-chip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 40%,rgba(0,0,0,.14));pointer-events:none}
html[data-ui-mode="modern"] .home-v2 .hero-game-chip img{width:122px!important;height:122px!important;object-fit:contain!important;position:relative;z-index:2;filter:drop-shadow(0 14px 25px rgba(0,0,0,.28))}
html[data-ui-mode="modern"] .home-v2 .hero-chip-fbrkha{right:10px;top:24px;background:linear-gradient(145deg,#3a2378,#17143d)!important;transform:rotate(5deg)!important}
html[data-ui-mode="modern"] .home-v2 .hero-chip-qadha{left:18px;top:50px;background:linear-gradient(145deg,#741e31,#2b1027)!important;transform:rotate(-6deg)!important}
html[data-ui-mode="modern"] .home-v2 .hero-chip-khaltaha{right:45px;bottom:8px;background:linear-gradient(145deg,#086346,#0b2631)!important;transform:rotate(-4deg)!important}
html[data-ui-mode="modern"] .home-v2 .hero-chip-top10{left:10px;bottom:0;background:linear-gradient(145deg,#10549f,#101d49)!important;transform:rotate(7deg)!important}
html[data-ui-mode="modern"] .home-v2 .hero-game-stack:hover .hero-game-chip{filter:brightness(1.08)}
html[data-ui-mode="modern"] .home-v2 .hero-art-caption{margin-top:6px!important;color:var(--f2-muted)!important;font-size:.82rem!important}

html[data-ui-mode="modern"] .home-v2 :where(.home-shell,.home-section){width:min(1200px,calc(100% - 28px))!important;margin-inline:auto!important}
html[data-ui-mode="modern"] .home-v2 .resume-section{margin-top:18px!important}
html[data-ui-mode="modern"] .home-v2 .resume-card{padding:16px 18px!important;border:1px solid rgba(242,201,76,.16)!important;border-radius:18px!important;background:rgba(17,22,50,.86)!important;box-shadow:var(--f2-soft-shadow)!important}

/* Game selection */
html[data-ui-mode="modern"] .home-v2 .games-section{padding-top:82px!important}
html[data-ui-mode="modern"] .home-v2 .section-heading{max-width:720px!important;margin:0 auto 30px!important;text-align:center!important}
html[data-ui-mode="modern"] .home-v2 .section-kicker{color:var(--f2-gold)!important;font-weight:900!important;font-size:.83rem!important}
html[data-ui-mode="modern"] .home-v2 .section-heading h2{margin:7px 0 10px!important;color:var(--f2-ink)!important;font-size:clamp(2rem,4vw,3.4rem)!important;line-height:1.15!important;letter-spacing:-.04em!important}
html[data-ui-mode="modern"] .home-v2 .section-heading p{margin:0!important;color:var(--f2-muted)!important;line-height:1.8!important}
html[data-ui-mode="modern"] .home-v2 .games-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important}
html[data-ui-mode="modern"] .home-v2 .game-card{min-width:0!important;display:flex!important;flex-direction:column!important;position:relative!important;overflow:hidden!important;border:1px solid var(--f2-line)!important;border-radius:26px!important;background:linear-gradient(180deg,rgba(24,30,62,.98),rgba(13,17,40,.98))!important;box-shadow:0 18px 46px rgba(0,0,0,.22)!important;cursor:pointer!important;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important}
html[data-ui-mode="modern"] .home-v2 .game-card:hover{transform:translateY(-7px)!important;border-color:rgba(255,255,255,.19)!important;box-shadow:0 28px 64px rgba(0,0,0,.32)!important}
html[data-ui-mode="modern"] .home-v2 .game-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--game-accent,var(--f2-purple));z-index:4}
html[data-ui-mode="modern"] .home-v2 .game-card[data-game="fbrkha"]{--game-accent:var(--f2-fib)}
html[data-ui-mode="modern"] .home-v2 .game-card[data-game="qadha"]{--game-accent:var(--f2-qadha)}
html[data-ui-mode="modern"] .home-v2 .game-card[data-game="khaltaha"]{--game-accent:var(--f2-khaltaha)}
html[data-ui-mode="modern"] .home-v2 .game-card[data-game="top10"]{--game-accent:var(--f2-top10)}
html[data-ui-mode="modern"] .home-v2 .game-mark{height:202px!important;position:relative!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:color-mix(in srgb,var(--game-accent) 10%,#0b102a)!important}
html[data-ui-mode="modern"] .home-v2 .modern-game-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:.42!important;filter:saturate(.95) contrast(1.04)!important;mask-image:linear-gradient(#000 55%,transparent 100%)!important}
html[data-ui-mode="modern"] .home-v2 .game-mark-image{position:relative!important;z-index:2!important;width:104px!important;height:104px!important;object-fit:contain!important;filter:drop-shadow(0 13px 22px rgba(0,0,0,.28))!important}
html[data-ui-mode="modern"] .home-v2 .game-copy{padding:18px!important;display:flex!important;flex:1!important;flex-direction:column!important;align-items:stretch!important;text-align:right!important}
html[data-ui-mode="modern"] .home-v2 .game-copy .pill{align-self:flex-start!important;padding:6px 9px!important;border-radius:999px!important;border:1px solid color-mix(in srgb,var(--game-accent) 30%,transparent)!important;background:color-mix(in srgb,var(--game-accent) 9%,transparent)!important;color:color-mix(in srgb,var(--game-accent) 72%,white)!important;font-size:.72rem!important;font-weight:850!important}
html[data-ui-mode="modern"] .home-v2 .game-title-lockup{margin-top:13px!important}
html[data-ui-mode="modern"] .home-v2 .game-title-lockup h3{margin:0!important;color:var(--f2-ink)!important;font-size:1.6rem!important;letter-spacing:-.04em!important}
html[data-ui-mode="modern"] .home-v2 .game-title-lockup small{display:block;margin-top:4px;color:color-mix(in srgb,var(--game-accent) 68%,white)!important;font-size:.78rem!important;font-weight:800!important}
html[data-ui-mode="modern"] .home-v2 .game-copy>p{min-height:72px;margin:13px 0 0!important;color:var(--f2-muted)!important;line-height:1.72!important;font-size:.9rem!important}
html[data-ui-mode="modern"] .home-v2 .game-quick-facts{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin:15px 0 0!important}
html[data-ui-mode="modern"] .home-v2 .game-quick-facts>div{padding:9px 10px!important;border:1px solid var(--f2-line)!important;border-radius:12px!important;background:rgba(255,255,255,.025)!important}
html[data-ui-mode="modern"] .home-v2 .game-quick-facts dt{color:var(--f2-muted)!important;font-size:.66rem!important}.home-v2 .game-quick-facts dd{margin:2px 0 0!important;color:var(--f2-ink)!important;font-size:.8rem!important;font-weight:850!important}
html[data-ui-mode="modern"] .home-v2 .game-copy .meta{min-height:22px;margin-top:9px!important}
html[data-ui-mode="modern"] .home-v2 .card-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin-top:auto!important;padding-top:12px!important}
html[data-ui-mode="modern"] .home-v2 .card-actions .btn{min-height:45px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;border-radius:13px!important}
html[data-ui-mode="modern"] .home-v2 .card-actions .text-link{min-height:38px!important;border:0!important;background:transparent!important;color:var(--f2-muted)!important;font-weight:800!important}
html[data-ui-mode="modern"] .home-v2 .game-card.is-recommended{border-color:rgba(242,201,76,.45)!important;box-shadow:0 0 0 1px rgba(242,201,76,.10),0 28px 65px rgba(0,0,0,.30)!important}
html[data-ui-mode="modern"] .home-v2 .mood-recommendation-badge{align-self:flex-start;margin-bottom:7px;padding:6px 9px;border-radius:999px;background:rgba(242,201,76,.12);border:1px solid rgba(242,201,76,.24);color:var(--f2-gold);font-size:.72rem;font-weight:900}

/* Lower content: compact, not marketing-heavy */
html[data-ui-mode="modern"] .home-v2 :where(.mood-section,.steps-section,.why-section){padding-top:72px!important}
html[data-ui-mode="modern"] .home-v2 .mood-shell{padding:24px!important;border:1px solid var(--f2-line)!important;border-radius:26px!important;background:linear-gradient(135deg,rgba(18,23,51,.97),rgba(11,15,39,.97))!important;box-shadow:var(--f2-soft-shadow)!important}
html[data-ui-mode="modern"] .home-v2 .mood-options{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important;margin-top:18px!important}
html[data-ui-mode="modern"] .home-v2 .mood-options button{min-height:86px!important;border:1px solid var(--f2-line)!important;border-radius:16px!important;background:rgba(255,255,255,.03)!important;color:var(--f2-ink)!important}
html[data-ui-mode="modern"] .home-v2 .mood-options button.selected{border-color:rgba(242,201,76,.43)!important;background:rgba(242,201,76,.08)!important}
html[data-ui-mode="modern"] .home-v2 .steps-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important}
html[data-ui-mode="modern"] .home-v2 .steps-grid li{padding:21px!important;border:1px solid var(--f2-line)!important;border-radius:20px!important;background:rgba(17,22,50,.72)!important}
html[data-ui-mode="modern"] .home-v2 .benefits-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px!important}
html[data-ui-mode="modern"] .home-v2 .benefits-grid article{padding:20px!important;border:1px solid var(--f2-line)!important;border-radius:20px!important;background:rgba(17,22,50,.68)!important}
html[data-ui-mode="modern"] .home-v2 .modern-community-strip{margin-top:72px!important;padding:22px 24px!important;border:1px solid rgba(139,92,246,.18)!important;border-radius:24px!important;background:linear-gradient(100deg,rgba(139,92,246,.09),rgba(17,22,50,.82),rgba(242,201,76,.045))!important}
html[data-ui-mode="modern"] .home-v2 .install-section{margin-top:24px!important}.home-v2 .install-card{border:1px solid var(--f2-line)!important;border-radius:22px!important;background:rgba(17,22,50,.85)!important}
html[data-ui-mode="modern"] .home-v2 footer{margin-top:54px!important}

/* Modal refresh */
html[data-ui-mode="modern"] .home-v2 .modal{background:rgba(3,5,15,.76)!important;backdrop-filter:blur(10px)!important}
html[data-ui-mode="modern"] .home-v2 .modal-card{border:1px solid var(--f2-line-strong)!important;border-radius:24px!important;background:linear-gradient(180deg,#171d3d,#0d1230)!important;box-shadow:var(--f2-shadow)!important;color:var(--f2-ink)!important}

/* =====================================================================
   GAME SHELLS — shared final identity
   ===================================================================== */
html[data-ui-mode="modern"] body[data-game-brand]{--game-accent:var(--f2-purple);background-color:var(--f2-bg)!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"]{--game-accent:var(--f2-fib)}
html[data-ui-mode="modern"] body[data-game-brand="qadha"]{--game-accent:var(--f2-qadha)}
html[data-ui-mode="modern"] body[data-game-brand="khaltaha"]{--game-accent:var(--f2-khaltaha)}
html[data-ui-mode="modern"] body[data-game-brand="top10"]{--game-accent:var(--f2-top10)}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"]{--game-accent:var(--f2-fib)}
html[data-ui-mode="modern"] body[data-game-brand] :where(.q-nav,.k-top,.t10-nav,.floating-utility-actions){backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* Fbrkha landing */
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] #app.home-shell.public-screen{width:min(1050px,calc(100% - 28px))!important;min-height:auto!important;margin:32px auto 72px!important;padding:0!important;background:transparent!important;box-shadow:none!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero{min-height:365px!important;padding:clamp(28px,5vw,54px)!important;border:1px solid var(--f2-line)!important;border-radius:32px!important;background:linear-gradient(120deg,rgba(20,17,55,.98),rgba(31,20,69,.92),rgba(13,16,43,.96))!important;box-shadow:var(--f2-shadow)!important;overflow:hidden!important;position:relative!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero::after{content:"";position:absolute;left:-80px;bottom:-120px;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.18),transparent 68%);pointer-events:none}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .logo-hero{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;background:none!important;filter:none!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .logo-hero .game-brand-logo{width:98px!important;height:98px!important;object-fit:contain!important;filter:drop-shadow(0 16px 28px rgba(139,92,246,.28))!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .fbrkha-v2-word{display:block;color:var(--f2-ink);font-size:clamp(3rem,8vw,6.6rem);font-weight:950;letter-spacing:-.07em;line-height:1}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-tagline{margin-top:18px!important;color:var(--f2-purple-2)!important;font-size:clamp(1.2rem,2.2vw,1.8rem)!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-subtitle{max-width:580px;color:var(--f2-muted)!important;font-size:1.02rem!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important;margin-top:16px!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action{min-height:116px!important;border:1px solid var(--f2-line)!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(25,31,66,.95),rgba(14,18,43,.96))!important;color:var(--f2-ink)!important;box-shadow:var(--f2-soft-shadow)!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action:hover{border-color:rgba(177,154,255,.28)!important;transform:translateY(-3px)!important}
html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-features{margin-top:14px!important;border:1px solid var(--f2-line)!important;border-radius:18px!important;background:rgba(17,22,50,.74)!important}

/* Qadha */
html[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-nav{width:min(1180px,calc(100% - 24px))!important;margin:10px auto 0!important;padding:8px 11px!important;border:1px solid var(--f2-line)!important;border-radius:18px!important;background:rgba(8,11,32,.82)!important;box-shadow:var(--f2-soft-shadow)!important}
html[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-brand img{width:44px!important;height:44px!important;object-fit:contain!important}.q-brand span small{color:var(--f2-muted)!important}
html[data-ui-mode="modern"] body[data-game-brand="qadha"] #qApp{width:min(1180px,calc(100% - 24px))!important;margin:18px auto 60px!important}
html[data-ui-mode="modern"] body[data-game-brand="qadha"] .hero-q.qadha-initial-home{min-height:480px!important;border:1px solid var(--f2-line)!important;border-radius:30px!important;background:linear-gradient(110deg,rgba(53,16,31,.95),rgba(20,18,49,.97))!important;box-shadow:var(--f2-shadow)!important;overflow:hidden!important}
html[data-ui-mode="modern"] body[data-game-brand="qadha"] .hero-q h1{font-size:clamp(3.3rem,8vw,7rem)!important;letter-spacing:-.07em!important}.hero-q h1 span{color:var(--f2-qadha)!important}
html[data-ui-mode="modern"] body[data-game-brand="qadha"] .hero-panel{border:1px solid rgba(239,82,97,.20)!important;border-radius:26px!important;background:rgba(239,82,97,.055)!important}
html[data-ui-mode="modern"] body[data-game-brand="qadha"] :where(.setup-card,.q-card,.board-card,.question-card){border-color:var(--f2-line)!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(24,30,62,.94),rgba(13,17,40,.96))!important;box-shadow:var(--f2-soft-shadow)!important}

/* Khaltaha */
html[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-top{width:min(1180px,calc(100% - 24px))!important;margin:10px auto 0!important;padding:8px 11px!important;border:1px solid var(--f2-line)!important;border-radius:18px!important;background:rgba(8,11,32,.82)!important;box-shadow:var(--f2-soft-shadow)!important}
html[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-site-home img{display:none!important}
html[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-site-home::before{content:"";display:block;width:42px;height:42px;background:url('/assets/fabraka-mark-v1.svg') center/contain no-repeat;filter:drop-shadow(0 9px 18px rgba(139,92,246,.22))}
html[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-game-title img{max-height:46px!important;filter:none!important}
html[data-ui-mode="modern"] body[data-game-brand="khaltaha"] #kApp{width:min(1180px,calc(100% - 24px))!important;margin:18px auto 60px!important}
html[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.k-card,.k-panel,.k-setup-card,.round-card){border-color:var(--f2-line)!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(20,38,49,.96),rgba(10,25,35,.96))!important;box-shadow:var(--f2-soft-shadow)!important}

/* Top10 */
html[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-nav{width:min(1180px,calc(100% - 24px))!important;margin:10px auto 0!important;padding:8px 11px!important;border:1px solid var(--f2-line)!important;border-radius:18px!important;background:rgba(8,11,32,.82)!important;box-shadow:var(--f2-soft-shadow)!important}
html[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-brand img{width:44px!important;height:44px!important;object-fit:contain!important}.t10-brand small{color:var(--f2-muted)!important}
html[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-shell{width:min(1180px,calc(100% - 24px))!important;margin:18px auto 60px!important}
html[data-ui-mode="modern"] body[data-game-brand="top10"] :where(.center-card,.setup-card,.game-card,.result-card){border-color:var(--f2-line)!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(18,30,58,.96),rgba(10,18,40,.97))!important;box-shadow:var(--f2-soft-shadow)!important}
html[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-hero{border:1px solid rgba(61,152,255,.18)!important;border-radius:28px!important;background:linear-gradient(110deg,rgba(14,46,89,.90),rgba(14,18,48,.97))!important;box-shadow:var(--f2-soft-shadow)!important}

/* Fbrkha Online */
html[data-ui-mode="modern"] body.game-fbrkha-online{background:linear-gradient(180deg,#0b0e25,#07091b)!important}
html[data-ui-mode="modern"] body.game-fbrkha-online .topbar{width:min(960px,calc(100% - 24px))!important;margin:10px auto 0!important;border:1px solid var(--f2-line)!important;border-radius:18px!important;background:rgba(8,11,32,.82)!important;backdrop-filter:blur(16px)!important}
html[data-ui-mode="modern"] body.game-fbrkha-online .shell{width:min(960px,calc(100% - 24px))!important;margin:18px auto 54px!important}
html[data-ui-mode="modern"] body.game-fbrkha-online :where(.card,.panel,.lobby-card,.room-card){border-color:var(--f2-line)!important;border-radius:22px!important;background:linear-gradient(180deg,rgba(24,30,62,.96),rgba(13,17,40,.97))!important;box-shadow:var(--f2-soft-shadow)!important}

/* ---------- Responsive ---------- */
@media (max-width:1050px){
  html[data-ui-mode="modern"] .home-v2 .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html[data-ui-mode="modern"] .home-v2 .benefits-grid{grid-template-columns:repeat(2,1fr)!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-actions{grid-template-columns:1fr 1fr!important}
}

@media (max-width:820px){
  html[data-ui-mode="modern"] .home-v2 .home-topbar{width:calc(100% - 20px)!important;margin-top:8px!important;top:6px!important}
  html[data-ui-mode="modern"] .home-v2 .mobile-nav-btn{display:grid!important;width:44px!important;height:44px!important;place-content:center!important;border:1px solid var(--f2-line)!important;border-radius:13px!important;background:rgba(255,255,255,.04)!important}
  html[data-ui-mode="modern"] .home-v2 .primary-nav{display:none!important;position:absolute!important;top:calc(100% + 8px)!important;right:0!important;left:0!important;padding:10px!important;flex-direction:column!important;align-items:stretch!important;border:1px solid var(--f2-line)!important;border-radius:17px!important;background:rgba(8,11,32,.97)!important;box-shadow:var(--f2-shadow)!important}
  html[data-ui-mode="modern"] .home-v2 .primary-nav.is-open{display:flex!important}
  html[data-ui-mode="modern"] .home-v2 :where(.nav-link,.nav-account){width:100%!important;text-align:right!important}
  html[data-ui-mode="modern"] .home-v2 .home-hero{width:calc(100% - 20px)!important;grid-template-columns:1fr!important;min-height:auto!important;padding:28px 20px 24px!important;border-radius:28px!important;gap:28px!important}
  html[data-ui-mode="modern"] .home-v2 #homeHeroTitle{font-size:clamp(2.75rem,14vw,5.1rem)!important;max-width:650px!important}
  html[data-ui-mode="modern"] .home-v2 .home-hero-art{min-height:340px!important}
  html[data-ui-mode="modern"] .home-v2 .hero-game-stack{height:330px!important;width:min(360px,100%)!important}
  html[data-ui-mode="modern"] .home-v2 .hero-game-chip{width:152px!important;height:160px!important;border-radius:22px!important}
  html[data-ui-mode="modern"] .home-v2 .hero-game-chip img{width:94px!important;height:94px!important}
  html[data-ui-mode="modern"] .home-v2 .hero-chip-fbrkha{right:10px;top:10px}.home-v2 .hero-chip-qadha{left:10px;top:34px}.home-v2 .hero-chip-khaltaha{right:32px;bottom:4px}.home-v2 .hero-chip-top10{left:8px;bottom:0}
  html[data-ui-mode="modern"] .home-v2 :where(.home-shell,.home-section){width:calc(100% - 20px)!important}
  html[data-ui-mode="modern"] .home-v2 .mood-options{grid-template-columns:1fr 1fr!important}
  html[data-ui-mode="modern"] .home-v2 .steps-grid{grid-template-columns:1fr!important}
}

@media (max-width:620px){
  html[data-ui-mode="modern"] .home-v2 .brand-word{font-size:1.28rem}.home-v2 .brand-word small{display:none}
  html[data-ui-mode="modern"] .home-v2 .home-hero{padding:24px 16px 18px!important}
  html[data-ui-mode="modern"] .home-v2 .eyebrow{font-size:.78rem!important}
  html[data-ui-mode="modern"] .home-v2 #homeHeroTitle{margin-top:14px!important;font-size:clamp(2.65rem,15vw,4.5rem)!important;line-height:1.02!important}
  html[data-ui-mode="modern"] .home-v2 .hero-copy>p{font-size:.98rem!important;line-height:1.75!important}
  html[data-ui-mode="modern"] .home-v2 .hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important}.home-v2 .hero-actions>*{justify-content:center!important;text-align:center!important;padding-inline:10px!important}
  html[data-ui-mode="modern"] .home-v2 .hero-join .join-copy{display:block!important}.home-v2 .hero-join .join-copy .section-kicker{display:block;margin-bottom:3px}
  html[data-ui-mode="modern"] .home-v2 .hero-join .join-input-row{grid-template-columns:1fr!important}.home-v2 .hero-join button[type="submit"]{width:100%!important}
  html[data-ui-mode="modern"] .home-v2 .home-hero-art{min-height:300px!important}
  html[data-ui-mode="modern"] .home-v2 .hero-game-stack{height:292px!important;width:min(320px,100%)!important}
  html[data-ui-mode="modern"] .home-v2 .hero-game-chip{width:138px!important;height:142px!important}
  html[data-ui-mode="modern"] .home-v2 .games-section{padding-top:58px!important}
  html[data-ui-mode="modern"] .home-v2 .games-grid{grid-template-columns:1fr!important;gap:13px!important}
  html[data-ui-mode="modern"] .home-v2 .game-card{display:grid!important;grid-template-columns:122px minmax(0,1fr)!important;border-radius:21px!important}
  html[data-ui-mode="modern"] .home-v2 .game-mark{height:100%!important;min-height:240px!important}.home-v2 .modern-game-art{mask-image:none!important;opacity:.32!important}.home-v2 .game-mark-image{width:82px!important;height:82px!important}
  html[data-ui-mode="modern"] .home-v2 .game-copy{padding:15px!important}.home-v2 .game-title-lockup h3{font-size:1.38rem!important}.home-v2 .game-copy>p{min-height:0!important;font-size:.84rem!important}.home-v2 .game-quick-facts{display:none!important}.home-v2 .card-actions{padding-top:9px!important}
  html[data-ui-mode="modern"] .home-v2 .benefits-grid{grid-template-columns:1fr!important}.home-v2 .mood-options{grid-template-columns:1fr!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] #app.home-shell.public-screen{width:calc(100% - 18px)!important;margin-top:18px!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero{min-height:330px!important;padding:25px 20px!important;border-radius:25px!important}
  html[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-actions{grid-template-columns:1fr!important}
  html[data-ui-mode="modern"] body[data-game-brand="qadha"] :where(.q-nav,#qApp),html[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.k-top,#kApp),html[data-ui-mode="modern"] body[data-game-brand="top10"] :where(.t10-nav,.t10-shell){width:calc(100% - 16px)!important}
}

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