/* فبركة الحديثة — additive UI layer. Classic stays untouched via data-ui-mode="classic". */ :root[data-ui-mode="modern"]{ --modern-bg:#070510; --modern-bg-2:#10071f; --modern-panel:rgba(22,13,39,.88); --modern-panel-2:rgba(32,17,55,.94); --modern-border:rgba(255,255,255,.11); --modern-border-strong:rgba(214,165,255,.28); --modern-text:#fffafc; --modern-muted:#c8bed4; --modern-purple:#8f43f7; --modern-purple-2:#5d24b6; --modern-gold:#f6c85f; --modern-gold-2:#d99a25; --modern-cyan:#35d9e8; --modern-red:#ff4967; --modern-green:#42df9b; --modern-radius:24px; --modern-shadow:0 22px 60px rgba(0,0,0,.34); color-scheme:dark; } .modern-only{display:none!important} :root[data-ui-mode="modern"] .modern-only{display:revert!important} :root[data-ui-mode="modern"] body{ color:var(--modern-text); background: radial-gradient(circle at 50% -10%,rgba(143,67,247,.22),transparent 34rem), radial-gradient(circle at 100% 14%,rgba(246,200,95,.08),transparent 28rem), radial-gradient(circle at 0 35%,rgba(53,217,232,.06),transparent 28rem), linear-gradient(160deg,var(--modern-bg-2),var(--modern-bg) 56%,#05040c)!important; background-attachment:fixed!important; } :root[data-ui-mode="modern"] body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.28; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,#000,transparent 86%); } :root[data-ui-mode="modern"] body, :root[data-ui-mode="modern"] button, :root[data-ui-mode="modern"] input, :root[data-ui-mode="modern"] select, :root[data-ui-mode="modern"] textarea{font-family:'Alexandria','Segoe UI',Tahoma,Arial,sans-serif!important} :root[data-ui-mode="modern"] :where(button,a,input,select,textarea){-webkit-tap-highlight-color:transparent} :root[data-ui-mode="modern"] :where(.card,.section-card,.setup-card,.setup-feature-block,.modal-card,.join-panel,.resume-card,.mood-shell,.install-card,.legal-section,.commerce-panel,.store-card){ border-color:var(--modern-border)!important; border-radius:var(--modern-radius)!important; } :root[data-ui-mode="modern"] :where(.btn,.button,.t10-btn,.q-toolbar-action,.text-action){border-radius:15px!important;font-weight:850!important;transition:transform .16s ease,filter .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease} @media (hover:hover) and (pointer:fine){ :root[data-ui-mode="modern"] :where(.btn,.button,.t10-btn,.q-toolbar-action,.text-action):not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.06)} } :root[data-ui-mode="modern"] :where(.btn-primary,.btn.primary,.primary,.button.primary,.t10-btn.primary){ background:linear-gradient(135deg,var(--modern-gold),#f2ae37)!important;color:#211205!important;border:1px solid rgba(255,235,179,.5)!important;box-shadow:0 10px 28px rgba(221,158,41,.18)!important } :root[data-ui-mode="modern"] :where(.btn-ghost,.ghost,.button.secondary,.t10-btn.ghost){background:rgba(255,255,255,.055)!important;color:var(--modern-text)!important;border:1px solid var(--modern-border)!important} :root[data-ui-mode="modern"] :where(input,select,textarea,.input){background:rgba(5,4,12,.64)!important;color:var(--modern-text)!important;border-color:rgba(255,255,255,.14)!important;box-shadow:inset 0 1px rgba(255,255,255,.035)} :root[data-ui-mode="modern"] :where(input,select,textarea,.input):focus{outline:none!important;border-color:rgba(246,200,95,.7)!important;box-shadow:0 0 0 3px rgba(246,200,95,.12)!important} :root[data-ui-mode="modern"] .modal{background:rgba(3,2,8,.82)!important;backdrop-filter:blur(14px)} :root[data-ui-mode="modern"] .modal-card{background:linear-gradient(160deg,rgba(34,17,57,.98),rgba(11,7,21,.99))!important;box-shadow:0 34px 100px rgba(0,0,0,.55)!important} /* Settings: UI generation switch */ .fbrkh-ui-mode-picker{display:grid;gap:9px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1)} .fbrkh-ui-mode-picker>span{font-weight:900}.fbrkh-ui-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:8px} .fbrkh-ui-mode-option{min-height:58px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#251438;color:#fff;font:inherit;font-weight:850;cursor:pointer;padding:8px} .fbrkh-ui-mode-option[data-ui-mode="modern"]{background:linear-gradient(135deg,#6d2bd0,#2c174d 58%,#9b6a1f)} .fbrkh-ui-mode-option.active{outline:2px solid #f6c85f;outline-offset:2px} .fbrkh-ui-mode-note{margin:0;color:#c9bfd5;font-size:.74rem;line-height:1.6} :root[data-ui-mode="modern"] .fbrkh-tools-panel{background:linear-gradient(160deg,rgba(28,14,47,.98),rgba(9,6,18,.99))!important;border:1px solid var(--modern-border-strong)!important;box-shadow:0 28px 80px rgba(0,0,0,.45)!important} :root[data-ui-mode="modern"] .fbrkh-design-picker{opacity:.88} /* ================= HOME / PLATFORM ================= */ :root[data-ui-mode="modern"] .platform-home .background-shapes{opacity:.25} :root[data-ui-mode="modern"] .platform-home .home-topbar{ width:min(1320px,calc(100% - 28px));min-height:72px;margin:10px auto 0;padding:8px 14px;border-radius:19px; border:1px solid rgba(255,255,255,.1);background:rgba(8,5,16,.78)!important;backdrop-filter:blur(20px);box-shadow:0 14px 50px rgba(0,0,0,.28)!important } :root[data-ui-mode="modern"] .platform-home .brand img{width:clamp(112px,10vw,148px)} :root[data-ui-mode="modern"] .platform-home .primary-nav{gap:5px} :root[data-ui-mode="modern"] .platform-home .nav-link, :root[data-ui-mode="modern"] .platform-home .nav-account{font-weight:800;border-radius:12px} :root[data-ui-mode="modern"] .platform-home .nav-link[href="#games"]{color:var(--modern-gold)} :root[data-ui-mode="modern"] .platform-home .home-hero{ width:min(1240px,calc(100% - 32px));min-height:auto;padding:72px 0 48px;grid-template-columns:1.08fr .92fr;gap:46px } :root[data-ui-mode="modern"] .platform-home .hero-copy{align-self:center} :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{width:clamp(210px,27vw,350px);filter:drop-shadow(0 16px 38px rgba(143,67,247,.25))} :root[data-ui-mode="modern"] .platform-home .hero-copy .eyebrow{border-color:rgba(246,200,95,.3);background:rgba(246,200,95,.08);color:#ffe3a1} :root[data-ui-mode="modern"] .platform-home .hero h1{font-size:clamp(50px,6.4vw,88px);letter-spacing:-2.6px;margin:12px 0 8px;line-height:1.08;background:linear-gradient(95deg,#fff 15%,#fff 55%,#f8ce73 92%);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-ui-mode="modern"] .platform-home .hero p{max-width:670px;color:#d4cadc;font-size:clamp(16px,1.6vw,20px);line-height:1.9;margin-top:15px} :root[data-ui-mode="modern"] .platform-home .hero-primary{min-width:190px;min-height:54px;font-size:1rem} :root[data-ui-mode="modern"] .platform-home .home-hero-art{ min-height:390px;height:auto;border-radius:34px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 50% 40%,rgba(143,67,247,.31),transparent 48%),linear-gradient(145deg,rgba(25,12,44,.9),rgba(7,5,14,.95))!important;box-shadow:var(--modern-shadow)!important } :root[data-ui-mode="modern"] .platform-home .hero-game-stack{width:86%;height:270px;position:relative;display:grid;place-items:center} :root[data-ui-mode="modern"] .platform-home .hero-game-chip{position:absolute;width:128px;height:128px;border-radius:28px;border:1px solid rgba(255,255,255,.13);background:rgba(17,9,29,.86);display:grid;place-items:center;box-shadow:0 18px 44px rgba(0,0,0,.32)} :root[data-ui-mode="modern"] .platform-home .hero-game-chip img{width:105px;height:105px} :root[data-ui-mode="modern"] .platform-home .hero-chip-fbrkha{transform:translate(-118px,-52px) rotate(-7deg)} :root[data-ui-mode="modern"] .platform-home .hero-chip-qadha{transform:translate(108px,-54px) rotate(6deg)} :root[data-ui-mode="modern"] .platform-home .hero-chip-khaltaha{transform:translate(-92px,80px) rotate(5deg)} :root[data-ui-mode="modern"] .platform-home .hero-chip-top10{transform:translate(100px,78px) rotate(-5deg)} :root[data-ui-mode="modern"] .platform-home .hero-art-caption{position:absolute;bottom:18px;margin:0;font-size:.9rem;color:#bfb1cb} :root[data-ui-mode="modern"] .platform-home .home-section, :root[data-ui-mode="modern"] .platform-home .games-section{padding-block:64px;background:transparent;border:0} :root[data-ui-mode="modern"] .platform-home .section-heading{margin-bottom:30px} :root[data-ui-mode="modern"] .platform-home .section-kicker{color:var(--modern-gold)!important;letter-spacing:.2px} :root[data-ui-mode="modern"] .platform-home .section-heading h2{font-size:clamp(34px,4.4vw,55px);letter-spacing:-1.5px} :root[data-ui-mode="modern"] .platform-home .games-grid{max-width:1320px;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} :root[data-ui-mode="modern"] .platform-home .game-card{ min-height:500px;padding:0;display:flex;flex-direction:column;gap:0;overflow:hidden;border-radius:28px;background:linear-gradient(180deg,rgba(32,16,53,.96),rgba(12,7,23,.98));border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 58px rgba(0,0,0,.34);position:relative } :root[data-ui-mode="modern"] .platform-home .game-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--game-accent,var(--modern-purple));z-index:2} :root[data-ui-mode="modern"] .platform-home .game-card.brand-fbrkha{--game-accent:#b565ff} :root[data-ui-mode="modern"] .platform-home .game-card.brand-qadha{--game-accent:#f0ae3f} :root[data-ui-mode="modern"] .platform-home .game-card.brand-khaltaha{--game-accent:#32d2e6} :root[data-ui-mode="modern"] .platform-home .game-card.brand-top10{--game-accent:#44d889} :root[data-ui-mode="modern"] .platform-home .game-mark{width:100%;height:190px;border-radius:0;margin:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--game-accent) 28%,transparent),transparent 55%),rgba(255,255,255,.025);border:0;border-bottom:1px solid rgba(255,255,255,.08)} :root[data-ui-mode="modern"] .platform-home .game-mark-image{width:145px;height:145px;filter:drop-shadow(0 18px 26px rgba(0,0,0,.3))} :root[data-ui-mode="modern"] .platform-home .game-copy{padding:20px 20px 18px;display:flex;flex-direction:column;flex:1} :root[data-ui-mode="modern"] .platform-home .game-title-lockup{margin-top:9px} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{font-size:clamp(26px,2.4vw,34px);margin:0 0 4px} :root[data-ui-mode="modern"] .platform-home .game-title-lockup small{color:color-mix(in srgb,var(--game-accent) 75%,white);font-weight:800} :root[data-ui-mode="modern"] .platform-home .game-card p{min-height:74px;color:#c9bfd3;line-height:1.75} :root[data-ui-mode="modern"] .platform-home .game-quick-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 2px} :root[data-ui-mode="modern"] .platform-home .game-quick-facts div{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:13px;padding:9px 10px} :root[data-ui-mode="modern"] .platform-home .game-quick-facts dt{color:#94899f;font-size:.68rem}.platform-home .game-quick-facts dd{margin:2px 0 0;font-weight:900} :root[data-ui-mode="modern"] .platform-home .card-actions{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:8px} :root[data-ui-mode="modern"] .platform-home .card-actions .btn{min-height:49px} :root[data-ui-mode="modern"] .platform-home .join-panel, :root[data-ui-mode="modern"] .platform-home .mood-shell, :root[data-ui-mode="modern"] .platform-home .steps-grid, :root[data-ui-mode="modern"] .platform-home .benefits-grid, :root[data-ui-mode="modern"] .platform-home .install-card{background:rgba(18,10,31,.72)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:none!important;backdrop-filter:blur(12px)} :root[data-ui-mode="modern"] .platform-home .mood-options button{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.1)!important} /* ================= FBRKHA ================= */ :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"]{--primary:#8f43f7!important;--primary-dark:#5b21b0!important;--yellow:#f6c85f!important;--surface:rgba(22,13,39,.9)!important;--surface-2:rgba(32,17,55,.94)!important;--border:rgba(255,255,255,.11)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .app-shell{width:min(1180px,calc(100% - 24px));margin-inline:auto} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero{padding-top:34px} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-tagline{font-size:clamp(24px,4vw,46px)!important;letter-spacing:-1px} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action{background:linear-gradient(155deg,rgba(37,19,62,.92),rgba(13,8,24,.97))!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:22px!important;box-shadow:0 16px 42px rgba(0,0,0,.22)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action-create{border-color:rgba(246,200,95,.26)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action-icon{background:rgba(246,200,95,.09)!important;color:var(--modern-gold)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-features>div{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.08)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .page-head{text-align:center;margin:18px auto 22px;max-width:780px} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .page-head h1{font-size:clamp(30px,4vw,50px);margin-bottom:7px} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .setup-card{background:linear-gradient(160deg,rgba(31,16,51,.92),rgba(12,8,23,.97))!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:var(--modern-shadow)!important;padding:clamp(18px,3vw,34px)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .setup-feature-block{background:rgba(255,255,255,.032)!important;border:1px solid rgba(255,255,255,.08)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .segment{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.1)!important;color:#eee5f5!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .segment.active{background:linear-gradient(135deg,#9b55f8,#6d2dcc)!important;color:white!important;border-color:rgba(205,170,255,.55)!important;box-shadow:0 8px 22px rgba(109,45,204,.2)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .category-choice{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.09)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .category-choice.selected{background:linear-gradient(145deg,rgba(143,67,247,.25),rgba(246,200,95,.07))!important;border-color:rgba(178,126,255,.55)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .lobby-layout{gap:18px} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .lobby-join-card, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .lobby-panel{background:linear-gradient(155deg,rgba(30,16,50,.95),rgba(11,7,21,.97))!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:26px!important;box-shadow:var(--modern-shadow)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .room-code{color:var(--modern-gold)!important;letter-spacing:.12em} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .question-stage, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .host-voting-question, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .submission-card, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .answer-entry-card{background:linear-gradient(160deg,rgba(31,16,51,.94),rgba(10,7,20,.97))!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:28px!important;box-shadow:var(--modern-shadow)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .game-hud{background:rgba(9,6,17,.84)!important;border-color:rgba(255,255,255,.09)!important;backdrop-filter:blur(16px)} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .answer-card, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .vote-option{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.09)!important;border-radius:18px!important} /* ================= KHALTAHA ================= */ :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"]{--kh-primary:#31d6e7;--kh-secondary:#8f43f7;background:radial-gradient(circle at 50% 0,rgba(36,196,215,.13),transparent 30rem),linear-gradient(160deg,#07141a,#090611 60%)!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.kh-card,.k-card,.setup-card,.panel,.game-panel,.center-card){background:linear-gradient(155deg,rgba(10,34,40,.9),rgba(11,7,21,.96))!important;border-color:rgba(88,229,239,.13)!important;border-radius:24px!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.primary,.btn-primary){background:linear-gradient(135deg,#39dbe9,#6278f7)!important;color:#06151a!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-card, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mini-game-card{border-radius:20px!important;background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.09)!important} /* ================= TOP 10 ================= */ :root[data-ui-mode="modern"] body[data-game-brand="top10"]{background:radial-gradient(circle at 50% -5%,rgba(50,213,135,.16),transparent 30rem),linear-gradient(160deg,#071610,#080510 63%)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-nav{background:rgba(6,12,9,.8)!important;border-color:rgba(255,255,255,.1)!important;backdrop-filter:blur(18px)} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-shell{width:min(1220px,calc(100% - 24px));margin-inline:auto} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-hero{background:linear-gradient(145deg,rgba(18,55,37,.78),rgba(12,8,22,.93))!important;border:1px solid rgba(94,226,151,.16)!important;border-radius:28px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-card{background:linear-gradient(155deg,rgba(18,38,29,.88),rgba(10,7,18,.96))!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:none!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .round-option, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .timer-options button, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .segmented button{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.09)!important;color:#eee!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .round-option.active, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .timer-options button.active, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .segmented button.active{background:linear-gradient(135deg,#3edd91,#1f9e68)!important;color:#06150e!important;border-color:rgba(135,255,191,.55)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .question-panel{background:linear-gradient(145deg,rgba(21,52,36,.9),rgba(11,7,20,.96))!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:26px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .cards-board{gap:10px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-card{border-radius:18px!important;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.028))!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 8px 20px rgba(0,0,0,.18)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .turn-panel{background:rgba(10,28,20,.78)!important;border:1px solid rgba(76,221,140,.19)!important;border-radius:22px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .hearts{color:#ff5874!important;letter-spacing:.12em} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-bar{background:rgba(8,15,11,.78)!important;border-color:rgba(255,255,255,.09)!important;border-radius:20px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .result-teams>*, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .final-teams>*{border-radius:20px!important;background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.09)!important} /* ================= QADHA — approved board redesign ================= */ :root[data-ui-mode="modern"] body[data-game-brand="qadha"]{ --qmodern-gold:#f3b545;--qmodern-purple:#7f3ce7;--qmodern-blue:#168cf0;--qmodern-red:#f23c55; background:radial-gradient(circle at 50% -10%,rgba(128,60,231,.2),transparent 32rem),radial-gradient(circle at 50% 78%,rgba(243,181,69,.06),transparent 28rem),linear-gradient(160deg,#0b0719,#05040c 66%)!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-nav{background:rgba(8,5,16,.82)!important;border-color:rgba(255,255,255,.09)!important;backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(0,0,0,.25)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .hero-q{background:linear-gradient(155deg,rgba(32,16,51,.9),rgba(10,7,20,.97))!important;border-color:rgba(255,255,255,.1)!important;border-radius:30px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .setup-page{background:linear-gradient(160deg,rgba(29,15,48,.92),rgba(9,6,18,.97))!important;border-color:rgba(255,255,255,.1)!important;border-radius:28px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .cat-card{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.09)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .cat-card.selected{border-color:rgba(243,181,69,.75)!important;box-shadow:0 0 0 3px rgba(243,181,69,.1)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-board{background:transparent!important;grid-template-rows:auto minmax(0,1fr) auto!important;min-height:100vh!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-toolbar{min-height:96px!important;padding:10px 22px!important;grid-template-columns:1fr auto 1fr!important;background:rgba(7,5,14,.82)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important;backdrop-filter:blur(18px)} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-toolbar .premium-turn-pill{display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-brand{display:grid;place-items:center;align-content:center;gap:1px} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-brand strong{font-size:clamp(38px,4.4vw,64px)!important;line-height:.95;background:linear-gradient(180deg,#ffe39a,#e79b20);-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(0 6px 14px rgba(238,164,37,.19))} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-slogan{display:block!important;color:#f3edf8;font-size:clamp(13px,1.2vw,18px);font-weight:800;margin-top:5px} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-slogan b{color:#f5c75f} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-toolbar-action{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.08)!important;color:#f1eaf7!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-grid{ display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr)!important;gap:12px!important;padding:14px clamp(14px,2vw,30px)!important;overflow:visible!important;min-height:0 } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel{ min-width:0;min-height:0;display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:auto minmax(0,1fr)!important;grid-template-areas:"cat cat" "right left";gap:8px;padding:9px;border-radius:22px;background:linear-gradient(165deg,rgba(28,15,48,.92),rgba(10,7,18,.96));border:1px solid color-mix(in srgb,var(--cat-accent,#8f43f7) 58%,rgba(255,255,255,.1));box-shadow:0 18px 40px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04);overflow:hidden } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-1{--cat-accent:#168cf0}:root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-2{--cat-accent:#32c981}:root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-3{--cat-accent:#8d4cf3}:root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-4{--cat-accent:#eca92d}:root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-5{--cat-accent:#ee3f5b}:root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-6{--cat-accent:#28c6d7} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat{grid-area:cat!important;min-height:88px;display:grid!important;grid-template-columns:50px minmax(0,1fr)!important;grid-template-rows:1fr!important;align-items:center;gap:6px;padding:8px 9px;border-radius:15px!important;background:color-mix(in srgb,var(--cat-accent) 16%,rgba(255,255,255,.025))!important;border:1px solid color-mix(in srgb,var(--cat-accent) 34%,transparent)!important;overflow:hidden} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat-art{min-width:0;height:52px;border-radius:12px;background:transparent!important;overflow:hidden} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat .cat-cover{width:100%!important;height:100%!important;object-fit:contain!important;padding:2px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat-fallback{font-size:34px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat strong{min-height:0!important;padding:0!important;background:none!important;color:#fff!important;text-shadow:none!important;font-size:clamp(14px,1.22vw,20px)!important;line-height:1.25!important;text-align:center!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-value-column{display:grid!important;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;min-height:0} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .value-right{grid-area:right} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .value-left{grid-area:left} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot{ min-height:70px!important;width:100%!important;height:100%!important;padding:0!important;border-radius:15px!important;border:1px solid color-mix(in srgb,var(--cat-accent) 58%,white 8%)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--cat-accent) 83%,#111),color-mix(in srgb,var(--cat-accent) 62%,#07060d))!important;color:white!important;box-shadow:0 8px 18px color-mix(in srgb,var(--cat-accent) 18%,transparent),inset 0 1px rgba(255,255,255,.14)!important;display:grid!important;place-items:center!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot span{font-size:clamp(24px,2vw,35px)!important;font-weight:900!important} @media (hover:hover) and (pointer:fine){:root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.available:hover{transform:translateY(-2px) scale(1.02)!important;filter:brightness(1.12)}} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.used, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.closed{ opacity:1!important;filter:none!important;background:linear-gradient(145deg,#18171d,#0d0c11)!important;border-color:rgba(255,255,255,.055)!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important;cursor:default } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.used span, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.closed span{display:none!important;font-size:0!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.used span::after, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.closed span::after{content:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel.category-complete{opacity:.42;filter:saturate(.2)} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel.category-complete .board-cat{background:#121116!important;border-color:rgba(255,255,255,.05)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-footer{ direction:ltr;display:grid!important;grid-template-columns:minmax(300px,1fr) minmax(180px,.42fr) minmax(300px,1fr)!important;grid-template-areas:"second turn first";align-items:center;gap:18px;padding:10px clamp(18px,3vw,44px) 14px!important;background:rgba(7,5,14,.84)!important;border-top:1px solid rgba(255,255,255,.08)!important;box-shadow:0 -12px 36px rgba(0,0,0,.2)!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box{direction:rtl;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;gap:8px 12px;padding:10px 14px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(20,13,35,.96),rgba(9,7,17,.98))!important;box-shadow:0 14px 34px rgba(0,0,0,.22)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box.team-0{grid-area:first;border-color:rgba(22,140,240,.34)!important;box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 0 0 1px rgba(22,140,240,.08)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box.team-1{grid-area:second;border-color:rgba(242,60,85,.34)!important;box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 0 0 1px rgba(242,60,85,.08)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box.active{box-shadow:0 0 0 2px rgba(246,200,95,.65),0 16px 42px rgba(246,200,95,.12)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-name-button{grid-column:1;background:transparent!important;box-shadow:none!important;justify-content:flex-start;padding:0!important;min-height:auto!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-name-button strong{font-size:clamp(18px,1.8vw,27px)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-name-button .turn-now-label{display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-0 .team-avatar-mark{color:#36a4ff} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-1 .team-avatar-mark{color:#ff5871} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-score-control{grid-column:2;grid-row:1;grid-template-columns:34px minmax(74px,1fr) 34px!important;gap:5px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-score-control button{width:34px!important;height:34px!important;border-radius:10px!important;background:rgba(255,255,255,.055)!important;color:#fff!important;box-shadow:none!important;font-size:20px!important;border:1px solid rgba(255,255,255,.08)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-score-control output{height:40px!important;min-width:78px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:white!important;font-size:clamp(28px,2.4vw,40px)!important;box-shadow:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-help-block{grid-column:1/-1;display:flex!important;align-items:center;gap:8px;margin-top:0!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-help-block>strong{display:none} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-help-buttons{display:flex!important;gap:7px!important;flex-wrap:wrap} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .help-btn{min-width:52px!important;min-height:44px!important;padding:5px 8px!important;border-radius:12px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(246,200,95,.24)!important;color:#f9e8bc!important;box-shadow:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .help-btn .help-icon{font-size:20px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .help-btn .help-copy{display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .help-btn.used, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .help-btn:disabled.used{opacity:1!important;filter:none!important;background:#111015!important;color:transparent!important;border-color:rgba(255,255,255,.045)!important;box-shadow:none!important;pointer-events:none} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .help-btn.used *{visibility:hidden!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow{ grid-area:turn;direction:rtl;min-height:76px;width:100%;position:relative;border:1px solid rgba(246,200,95,.62);background:linear-gradient(145deg,#1d132b,#0c0913);color:#ffe091;font:inherit;border-radius:17px;padding:9px 22px;display:grid!important;place-items:center;align-content:center;gap:1px;box-shadow:0 0 0 2px rgba(246,200,95,.08),0 12px 30px rgba(0,0,0,.24);cursor:pointer } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow small{font-size:.76rem;font-weight:850;color:#d8c69c} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow strong{font-size:clamp(16px,1.45vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:0;height:0;border-block:20px solid transparent} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow.turn-team-0::after{right:-20px;border-left:20px solid #f0b441} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow.turn-team-1::after{left:-20px;border-right:20px solid #f0b441} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-question-screen-v129{background:transparent!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .question-card{background:linear-gradient(155deg,rgba(30,16,50,.95),rgba(9,6,18,.98))!important;border-color:rgba(255,255,255,.09)!important;border-radius:26px!important;box-shadow:var(--modern-shadow)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .side-team{background:linear-gradient(155deg,rgba(25,14,43,.95),rgba(9,6,18,.98))!important;border-color:rgba(255,255,255,.09)!important;border-radius:22px!important} /* user-facing secondary pages */ :root[data-ui-mode="modern"] :where(.legal-shell,.store-shell,.support-shell,.library-shell){color:var(--modern-text)} :root[data-ui-mode="modern"] :where(.legal-hero,.store-hero,.support-hero){background:linear-gradient(155deg,rgba(31,16,51,.9),rgba(10,7,20,.96))!important;border-color:rgba(255,255,255,.1)!important;border-radius:28px!important} :root[data-ui-mode="modern"] :where(.legal-section,.store-card,.support-card,.library-card){background:rgba(20,12,35,.78)!important;border-color:rgba(255,255,255,.09)!important} @media(max-width:1120px){ :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important} } @media(max-width:760px){ :root[data-ui-mode="modern"] .platform-home .home-hero{grid-template-columns:1fr;padding-top:34px;text-align:center} :root[data-ui-mode="modern"] .platform-home .hero-copy{display:grid;justify-items:center} :root[data-ui-mode="modern"] .platform-home .home-hero-art{min-height:300px;order:2} :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:1fr} :root[data-ui-mode="modern"] .platform-home .game-card{min-height:auto} :root[data-ui-mode="modern"] .platform-home .game-mark{height:155px} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-actions{grid-template-columns:1fr} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-board{width:100%!important;height:auto!important;min-height:100vh!important;transform:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-toolbar{min-height:82px!important;grid-template-columns:1fr auto 1fr!important;padding-inline:10px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-brand strong{font-size:38px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-slogan{font-size:11px} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;overflow:visible!important;padding:10px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel{min-height:310px} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-footer{grid-template-columns:1fr!important;grid-template-areas:"first" "turn" "second"!important;gap:9px!important;padding:10px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow{width:min(330px,88%);justify-self:center;min-height:58px} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow::after{display:none} } @media(max-width:460px){ :root[data-ui-mode="modern"] .fbrkh-ui-mode-options{grid-template-columns:1fr} :root[data-ui-mode="modern"] .platform-home .home-topbar{width:calc(100% - 14px);margin-top:7px} :root[data-ui-mode="modern"] .platform-home .hero h1{font-size:43px} :root[data-ui-mode="modern"] .platform-home .hero-game-chip{width:100px;height:100px} :root[data-ui-mode="modern"] .platform-home .hero-game-chip img{width:82px;height:82px} :root[data-ui-mode="modern"] .platform-home .hero-chip-fbrkha{transform:translate(-82px,-45px) rotate(-7deg)} :root[data-ui-mode="modern"] .platform-home .hero-chip-qadha{transform:translate(82px,-45px) rotate(6deg)} :root[data-ui-mode="modern"] .platform-home .hero-chip-khaltaha{transform:translate(-72px,65px) rotate(5deg)} :root[data-ui-mode="modern"] .platform-home .hero-chip-top10{transform:translate(72px,65px) rotate(-5deg)} } /* ===== Modern polish pass: shared game chrome ===== */ :root[data-ui-mode="modern"] body[data-game-brand] :where(.k-top,.t10-nav,.topbar,.game-hud,.q-game-toolbar){ border-color:rgba(255,255,255,.09)!important; box-shadow:0 12px 34px rgba(0,0,0,.2)!important; } :root[data-ui-mode="modern"] body[data-game-brand] :where(.k-btn,.t10-btn,.btn){ min-height:44px; } :root[data-ui-mode="modern"] body[data-game-brand] :where(.eyebrow,.pill,.round-pill,.category-chip){ letter-spacing:0!important; } /* Khaltaha — actual generated screens */ :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-top{ min-height:68px;background:rgba(4,15,20,.82)!important;backdrop-filter:blur(18px);padding-inline:clamp(12px,3vw,30px)!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-setup-shell, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .lobby-shell, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .game-shell{ width:min(1240px,calc(100% - 24px));margin-inline:auto } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-hero{ text-align:center;padding:34px 12px 20px } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-hero>span, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .eyebrow{color:#78edf2!important;font-weight:850} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-hero h1{ font-size:clamp(48px,7vw,82px);margin:.08em 0;color:#fff;letter-spacing:-2px } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-hero p{color:#bed3d5;max-width:760px;margin:0 auto;line-height:1.8} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .setup-panel{padding:clamp(16px,3vw,32px)!important;box-shadow:var(--modern-shadow)!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .section-title{gap:12px!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .section-title small{ display:grid;place-items:center;min-width:32px;height:32px;border-radius:10px;background:rgba(49,214,231,.12);color:#75eef4;font-weight:900 } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-grid{gap:12px!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-toggle{ border:1px solid rgba(255,255,255,.09)!important;border-radius:20px!important;background:rgba(255,255,255,.038)!important;overflow:hidden;transition:transform .16s ease,border-color .16s ease,background .16s ease } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-toggle:has(input:checked), :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-toggle.selected{ border-color:rgba(81,231,240,.48)!important;background:linear-gradient(145deg,rgba(37,197,212,.16),rgba(143,67,247,.08))!important;box-shadow:inset 0 0 0 1px rgba(99,231,239,.08) } @media(hover:hover) and (pointer:fine){ :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-toggle:hover{transform:translateY(-2px);border-color:rgba(102,231,240,.28)!important} } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .setup-options, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .session-summary{ border-radius:20px!important;background:rgba(255,255,255,.028)!important;border:1px solid rgba(255,255,255,.07)!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .round-choice button, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .sound-choice{ border-radius:14px!important;background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.09)!important;color:#f6fbfb!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .round-choice button.selected, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .sound-choice.selected{ background:linear-gradient(135deg,#34d7e5,#7755ea)!important;color:#06161b!important;border-color:rgba(153,247,250,.5)!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-btn.gold{ background:linear-gradient(135deg,var(--modern-gold),#edae38)!important;color:#211305!important;border-color:rgba(255,229,154,.48)!important;box-shadow:0 10px 26px rgba(226,166,49,.14)!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .lobby-heading{text-align:center;padding-top:26px} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .lobby-heading h1{font-size:clamp(32px,4vw,52px);margin:.18em 0} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .lobby-layout{gap:16px!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .join-board, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .lobby-players{box-shadow:var(--modern-shadow)!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .qr-frame{ border-radius:22px!important;background:#fff!important;border:7px solid rgba(255,255,255,.96)!important;box-shadow:0 16px 40px rgba(0,0,0,.25)!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .room-code{color:#f7d47d!important;font-weight:950;letter-spacing:.14em} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .player-chip{ background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:17px!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .player-chip.ready{border-color:color-mix(in srgb,var(--player-tone,#45ddea) 48%,transparent)!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .game-head, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .prompt-card, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .secret-mission, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .answer-form, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .result-card, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .ranking-list{ border-radius:24px!important;background:linear-gradient(155deg,rgba(10,32,39,.9),rgba(10,7,19,.96))!important;border-color:rgba(255,255,255,.085)!important;box-shadow:0 16px 42px rgba(0,0,0,.22)!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .choice, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .guess-card, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .order-item, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .result-row, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .ranking-row{ border-radius:17px!important;background:rgba(255,255,255,.038)!important;border-color:rgba(255,255,255,.075)!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .ranking-title{text-align:center} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .rank-podium-card{border-radius:23px!important;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-settings-dialog{background:linear-gradient(160deg,rgba(16,38,44,.99),rgba(9,6,18,.99))!important;border-color:rgba(96,230,239,.2)!important;border-radius:26px!important} /* Top 10 — actual game mechanics: ten hidden answers + hearts */ :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-nav{min-height:68px;padding-inline:clamp(12px,3vw,30px)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-brand img{filter:drop-shadow(0 7px 18px rgba(65,220,145,.14))} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-view{padding-top:22px} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-hero{padding:clamp(18px,3vw,30px)!important;box-shadow:var(--modern-shadow)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-title strong{color:#91f0ba!important;text-shadow:0 10px 30px rgba(51,210,130,.18)} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-grid{gap:14px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-card{border-radius:23px!important;padding:clamp(16px,2.2vw,25px)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .section-title>span{ display:grid;place-items:center;min-width:36px;height:36px;border-radius:11px;background:rgba(60,220,142,.1);color:#8be8b4;font-weight:900 } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .team-name-fields label, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .content-pack-chip, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .category-option{ border-radius:15px!important;background:rgba(255,255,255,.038)!important;border:1px solid rgba(255,255,255,.08)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .content-pack-chip{min-height:84px;transition:transform .16s ease,border-color .16s ease} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .category-option:has(input:checked){ background:linear-gradient(145deg,rgba(56,218,139,.15),rgba(255,255,255,.035))!important;border-color:rgba(87,232,158,.4)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .favorite-star.active{color:#f6c85f!important;text-shadow:0 0 18px rgba(246,200,95,.22)} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .start-card{ background:linear-gradient(145deg,rgba(35,91,62,.42),rgba(13,8,23,.96))!important;border-color:rgba(95,232,158,.22)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-btn.primary{ background:linear-gradient(135deg,#77e7a9,#35bc7b)!important;color:#05140d!important;border-color:rgba(169,255,208,.5)!important;box-shadow:0 10px 26px rgba(52,191,124,.16)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .game-view{padding-top:14px} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .game-topline{gap:9px} :root[data-ui-mode="modern"] body[data-game-brand="top10"] :where(.round-chip,.category-chip,.progress-chip){ background:rgba(13,30,22,.75)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:14px!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .question-panel{box-shadow:0 14px 38px rgba(0,0,0,.2)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .question-panel h1{font-size:clamp(25px,3.4vw,45px)!important;line-height:1.55!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .cards-board{ grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card{ min-height:106px!important;position:relative;overflow:hidden;background:linear-gradient(155deg,rgba(24,48,35,.82),rgba(12,10,19,.96))!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card.hidden-card{ background:linear-gradient(145deg,#12281c,#0b120e)!important;border-color:rgba(80,222,145,.16)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card.hidden-card .card-rank{font-size:clamp(27px,3vw,42px)!important;color:#8de6b3!important;opacity:.95} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card.revealed{border-color:color-mix(in srgb,var(--owner,#6ce1a1) 45%,rgba(255,255,255,.12))!important;background:linear-gradient(145deg,color-mix(in srgb,var(--owner,#55d895) 14%,#15231a),#0e0b15)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card .answer-label{font-weight:950!important;font-size:clamp(15px,1.4vw,20px)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card .answer-info{color:#b9c9c0!important;line-height:1.5} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .teams-strip{gap:9px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .team-score-card{ border-radius:18px!important;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.022))!important;border:1px solid color-mix(in srgb,var(--team-color) 30%,rgba(255,255,255,.08))!important;box-shadow:none!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .team-score-card.active{box-shadow:0 0 0 2px color-mix(in srgb,var(--team-color) 64%,#fff 12%),0 12px 28px color-mix(in srgb,var(--team-color) 12%,transparent)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--team-color) 11%,#111018),#0c0a12)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .team-hearts{color:#ff5574!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .turn-panel{ display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:12px;box-shadow:0 12px 30px rgba(0,0,0,.18)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-bar{box-shadow:0 10px 30px rgba(0,0,0,.18)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-host-toolbar{gap:7px!important;flex-wrap:wrap!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-host-toolbar .text-action{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.075)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .result-team, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .final-team, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .stat-card, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .mini-card{ border-radius:18px!important;background:rgba(255,255,255,.038)!important;border:1px solid rgba(255,255,255,.08)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .final-team.winner{border-color:rgba(246,200,95,.5)!important;box-shadow:0 0 0 2px rgba(246,200,95,.1),0 16px 36px rgba(0,0,0,.22)!important} /* Qadha: retain its modern layout while keeping old 3-team sessions safe. */ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-toolbar{backdrop-filter:blur(18px)} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-team-count-3 .premium-board-footer{ grid-template-columns:repeat(3,minmax(220px,1fr))!important;grid-template-areas:"team2 team1 first"!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-team-count-3 .modern-turn-arrow{display:none!important} /* Motion is quick and functional, never theatrical. */ :root[data-ui-mode="modern"] body:not(.fbrkh-reduced-motion) :where(.game-card,.home-action,.answer-card,.slot,.team-score-card,.premium-team-box){transition:transform .16s ease,filter .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease} @media(max-width:900px){ :root[data-ui-mode="modern"] body[data-game-brand="top10"] .cards-board{grid-template-columns:repeat(2,minmax(0,1fr))!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .turn-panel{grid-template-columns:1fr auto!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .last-chance{grid-column:1/-1} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media(max-width:600px){ :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-setup-shell, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .lobby-shell, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .game-shell{width:min(100% - 12px,1240px)} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-grid{grid-template-columns:1fr!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-shell{width:calc(100% - 12px)} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .cards-board{grid-template-columns:repeat(2,minmax(0,1fr))!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card{min-height:90px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .teams-strip{grid-template-columns:1fr!important} } /* Qadha footer refinement: team identity, score and one-use helps stay readable without overlap. */ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box{ grid-template-columns:minmax(150px,1fr) minmax(150px,.72fr)!important; grid-template-rows:auto auto auto!important; grid-template-areas:"name score" "helps helps" "shield shield"!important; align-items:center!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-name-button{grid-area:name!important;grid-column:auto!important;grid-row:auto!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-score-control{grid-area:score!important;grid-column:auto!important;grid-row:auto!important;justify-self:end;min-width:155px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-help-block{ grid-area:helps!important;grid-column:auto!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;min-width:0!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-help-block>strong{display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-help-buttons{width:100%;justify-content:flex-start!important;min-width:0} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-surprise-shield-v3245{ grid-area:shield!important;margin:0!important;padding:4px 8px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;border-radius:10px!important;min-height:28px!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-surprise-shield-v3245 b{font-size:11px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-surprise-shield-v3245 small{display:none!important} @media(max-width:980px){ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box{grid-template-columns:1fr auto!important;grid-template-areas:"name score" "helps helps" "shield shield"!important} } @media(max-width:760px){ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box{grid-template-columns:minmax(0,1fr) auto!important;padding:9px 11px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-score-control{min-width:142px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-help-buttons{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:2px} } /* Qadha category header reset over legacy absolute card artwork rules. */ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat{ position:relative!important;place-content:initial!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat-art{ position:relative!important;inset:auto!important;width:52px!important;height:52px!important;grid-column:1!important;grid-row:1!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat strong{ position:static!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:auto!important;grid-column:2!important;grid-row:1!important;z-index:2!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat-shade{display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.used::after, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.closed::after, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.cancelled::after{content:none!important;display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot.cancelled span{display:none!important} /* Qadha mobile toolbar: intentional compact two-row layout, no clipped controls. */ @media(max-width:760px){ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-toolbar{ grid-template-columns:1fr!important;grid-template-rows:auto auto!important;gap:5px!important;min-height:112px!important;padding:6px 8px!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-brand{grid-row:1!important;grid-column:1!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-brand strong{font-size:34px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-slogan{font-size:10px!important;margin-top:2px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-toolbar-actions{ grid-row:2!important;grid-column:1!important;width:100%!important;display:flex!important;justify-content:center!important;gap:5px!important;overflow-x:auto!important;scrollbar-width:none;padding:0 2px 2px!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-toolbar-actions::-webkit-scrollbar{display:none} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-toolbar-action{min-width:42px!important;width:42px!important;min-height:42px!important;height:42px!important;padding:0!important;display:grid!important;place-items:center!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-toolbar-action b{display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-toolbar-action span{font-size:18px!important} } /* ==========================================================================\n فبركة الحديثة — R2 visual rebuild\n A visibly distinct modern system. Every selector remains scoped to modern\n so "فبركة الكلاسيكي" stays byte-for-byte functional underneath.\n ========================================================================== */ :root[data-ui-mode="modern"]{ --modern-bg:#05030b; --modern-bg-2:#0b0616; --modern-bg-3:#130824; --modern-surface:#120a20; --modern-surface-2:#1b0e30; --modern-surface-3:#24113d; --modern-gold:#f7c75c; --modern-gold-hi:#ffe59b; --modern-purple:#9b4dff; --modern-purple-hi:#c88cff; --modern-cyan:#31dce8; --modern-green:#46df99; --modern-red:#ff4d68; --modern-text:#fffafc; --modern-muted:#c9bfd4; --modern-line:rgba(255,255,255,.10); --modern-line-hi:rgba(255,255,255,.18); --modern-card-shadow:0 24px 70px rgba(0,0,0,.38); } :root[data-ui-mode="modern"] body{ background: radial-gradient(ellipse 56rem 34rem at 50% -14rem,rgba(123,49,210,.31),transparent 68%), radial-gradient(ellipse 34rem 28rem at 102% 18%,rgba(237,167,43,.08),transparent 70%), radial-gradient(ellipse 34rem 26rem at -7% 38%,rgba(37,178,202,.07),transparent 72%), linear-gradient(180deg,#0a0613 0,#05030b 48%,#07040f 100%)!important; color:var(--modern-text)!important; } :root[data-ui-mode="modern"] body::before{ opacity:.18!important; background-image: linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px), radial-gradient(circle at 50% 14%,rgba(153,72,255,.22),transparent 26rem)!important; background-size:58px 58px,58px 58px,100% 100%!important; } :root[data-ui-mode="modern"] :where(.btn,.button,.t10-btn,.k-btn,.q-toolbar-action,.text-action){ letter-spacing:0!important; } :root[data-ui-mode="modern"] :where(.btn-primary,.btn.primary,.primary,.button.primary,.t10-btn.primary,.k-btn.gold){ background:linear-gradient(180deg,#ffdd83 0,#f4bb48 58%,#e7a62c 100%)!important; border:1px solid rgba(255,238,184,.78)!important; color:#241503!important; box-shadow:inset 0 1px rgba(255,255,255,.55),0 9px 24px rgba(221,156,42,.22)!important; } @media(hover:hover) and (pointer:fine){ :root[data-ui-mode="modern"] :where(.btn-primary,.btn.primary,.primary,.button.primary,.t10-btn.primary,.k-btn.gold):not(:disabled):hover{ filter:brightness(1.06) saturate(1.05)!important; box-shadow:inset 0 1px rgba(255,255,255,.65),0 12px 34px rgba(221,156,42,.30)!important; } } /* ---------- Modern platform: rebuilt composition ---------- */ :root[data-ui-mode="modern"] .platform-home main{ display:flex; flex-direction:column; min-width:0; } :root[data-ui-mode="modern"] .platform-home .home-hero{order:1} :root[data-ui-mode="modern"] .platform-home .resume-section{order:2} :root[data-ui-mode="modern"] .platform-home .games-section{order:3} :root[data-ui-mode="modern"] .platform-home .why-section{order:4} :root[data-ui-mode="modern"] .platform-home .join-section{order:5} :root[data-ui-mode="modern"] .platform-home .mood-section{order:6} :root[data-ui-mode="modern"] .platform-home .steps-section{order:7} :root[data-ui-mode="modern"] .platform-home .modern-community-strip{order:8} :root[data-ui-mode="modern"] .platform-home .install-section{order:9} :root[data-ui-mode="modern"] .platform-home .home-topbar{ width:min(1380px,calc(100% - 28px))!important; min-height:70px!important; top:8px!important; margin-top:8px!important; padding:8px 12px!important; border-radius:20px!important; background:linear-gradient(180deg,rgba(13,8,24,.92),rgba(8,5,16,.86))!important; border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 14px 42px rgba(0,0,0,.32)!important; } :root[data-ui-mode="modern"] .platform-home .brand img{ width:clamp(118px,9.6vw,154px)!important; filter:drop-shadow(0 8px 20px rgba(246,188,70,.12)); } :root[data-ui-mode="modern"] .platform-home .primary-nav{ gap:4px!important; padding:3px!important; } :root[data-ui-mode="modern"] .platform-home .nav-link, :root[data-ui-mode="modern"] .platform-home .nav-account{ min-height:42px; display:inline-flex; align-items:center; justify-content:center; padding:8px 13px!important; border-radius:12px!important; color:#e8dfed!important; } :root[data-ui-mode="modern"] .platform-home .nav-link[href="#games"]{ color:#ffd978!important; background:rgba(246,199,92,.07)!important; box-shadow:inset 0 -2px #e7b84e; } :root[data-ui-mode="modern"] .platform-home .home-hero{ width:min(1360px,calc(100% - 34px))!important; min-height:520px!important; padding:54px 0 42px!important; gap:42px!important; grid-template-columns:minmax(0,1.08fr) minmax(410px,.92fr)!important; position:relative; } :root[data-ui-mode="modern"] .platform-home .hero-copy{ min-width:0; align-self:center; padding-inline:clamp(0px,1.5vw,20px); } :root[data-ui-mode="modern"] .platform-home .hero-copy .eyebrow{ min-height:35px; padding:7px 13px!important; border-color:rgba(246,199,92,.32)!important; background:linear-gradient(135deg,rgba(246,199,92,.09),rgba(155,77,255,.07))!important; color:#ffe49a!important; box-shadow:inset 0 1px rgba(255,255,255,.04); } :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{ width:clamp(156px,17vw,230px)!important; margin-top:18px; opacity:.96; } :root[data-ui-mode="modern"] .platform-home .hero h1{ margin:8px 0 9px!important; font-size:clamp(52px,6.2vw,88px)!important; line-height:1.08!important; letter-spacing:-3px!important; background:linear-gradient(90deg,#fff 2%,#fff 55%,#ffe295 86%,#f4bb49 100%)!important; -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important; text-shadow:none!important; } :root[data-ui-mode="modern"] .platform-home .hero-copy>p{ max-width:650px!important; margin:12px 0 0!important; color:#d1c6d8!important; font-size:clamp(16px,1.45vw,20px)!important; line-height:1.85!important; } :root[data-ui-mode="modern"] .platform-home .modern-hero-badges{ display:flex!important; gap:8px; flex-wrap:wrap; margin-top:20px; } :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span{ min-height:37px; display:inline-flex; align-items:center; padding:7px 12px; border:1px solid rgba(255,255,255,.10); border-radius:999px; background:rgba(255,255,255,.035); color:#ece4f0; font-size:12px; font-weight:800; } :root[data-ui-mode="modern"] .platform-home .hero-actions{margin-top:20px!important} :root[data-ui-mode="modern"] .platform-home .hero-primary{ min-width:192px!important; min-height:52px!important; border-radius:16px!important; } :root[data-ui-mode="modern"] .platform-home .home-hero-art{ min-height:410px!important; border-radius:34px!important; overflow:hidden!important; border:1px solid rgba(192,137,255,.21)!important; background: linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.035) 50%,transparent 50.5%), radial-gradient(circle at 50% 42%,rgba(153,71,255,.34),transparent 38%), radial-gradient(circle at 75% 8%,rgba(246,199,92,.12),transparent 30%), linear-gradient(155deg,#17092a 0,#0d0719 55%,#080510 100%)!important; box-shadow:0 30px 80px rgba(0,0,0,.43),inset 0 1px rgba(255,255,255,.05)!important; } :root[data-ui-mode="modern"] .platform-home .home-hero-art::before{ content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.06); border-radius:24px; pointer-events:none; background: linear-gradient(115deg,transparent 0 45%,rgba(255,255,255,.018) 46% 47%,transparent 48%), linear-gradient(245deg,transparent 0 46%,rgba(255,255,255,.016) 47% 48%,transparent 49%); } :root[data-ui-mode="modern"] .platform-home .modern-stage-sign{ position:absolute; top:24px; right:26px; display:grid!important; gap:1px; z-index:2; padding:9px 12px; border-radius:13px; border:1px solid rgba(246,199,92,.22); background:rgba(9,5,17,.56); color:#f9d472; text-align:right; } :root[data-ui-mode="modern"] .platform-home .modern-stage-sign b{font-size:18px} :root[data-ui-mode="modern"] .platform-home .modern-stage-sign small{font-size:9px;color:#cbbfd2} :root[data-ui-mode="modern"] .platform-home .hero-game-stack{ width:88%!important; height:300px!important; } :root[data-ui-mode="modern"] .platform-home .hero-game-chip{ width:132px!important; height:132px!important; border-radius:29px!important; border:1px solid rgba(255,255,255,.12)!important; background:linear-gradient(145deg,rgba(33,17,56,.94),rgba(8,5,16,.96))!important; box-shadow:0 17px 34px rgba(0,0,0,.37),inset 0 1px rgba(255,255,255,.05)!important; } :root[data-ui-mode="modern"] .platform-home .hero-game-chip::after{ content:""; position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--game-accent,#9b4dff) 22%,transparent); } :root[data-ui-mode="modern"] .platform-home .hero-game-chip img{width:106px!important;height:106px!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.28))} :root[data-ui-mode="modern"] .platform-home .hero-chip-fbrkha{--game-accent:#b865ff;transform:translate(-120px,-54px) rotate(-5deg)!important} :root[data-ui-mode="modern"] .platform-home .hero-chip-qadha{--game-accent:#f1ad3f;transform:translate(112px,-57px) rotate(5deg)!important} :root[data-ui-mode="modern"] .platform-home .hero-chip-khaltaha{--game-accent:#35d8e8;transform:translate(-100px,82px) rotate(4deg)!important} :root[data-ui-mode="modern"] .platform-home .hero-chip-top10{--game-accent:#4adf99;transform:translate(105px,80px) rotate(-4deg)!important} :root[data-ui-mode="modern"] .platform-home .hero-art-caption{ bottom:16px!important;color:#a99eb1!important;letter-spacing:.04em;font-size:11px!important } :root[data-ui-mode="modern"] .platform-home .games-section{ width:100%; padding:54px max(18px,4vw) 62px!important; border:0!important; background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 18%,transparent 82%,rgba(255,255,255,.01))!important; } :root[data-ui-mode="modern"] .platform-home .section-heading{ max-width:760px!important; margin-bottom:28px!important; } :root[data-ui-mode="modern"] .platform-home .section-heading h2{ margin:7px 0 8px!important; font-size:clamp(35px,4.3vw,55px)!important; letter-spacing:-1.7px!important; } :root[data-ui-mode="modern"] .platform-home .section-heading p{font-size:15px!important;line-height:1.75!important;color:#bfb3c7!important} :root[data-ui-mode="modern"] .platform-home .games-grid{ width:min(1360px,100%)!important; max-width:1360px!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; } :root[data-ui-mode="modern"] .platform-home .game-card{ min-height:530px!important; padding:0!important; gap:0!important; grid-template-columns:1fr!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; border-radius:25px!important; border:1px solid color-mix(in srgb,var(--game-accent) 46%,rgba(255,255,255,.12))!important; background:linear-gradient(180deg,color-mix(in srgb,var(--game-accent) 7%,#180c29) 0,#11091d 45%,#090611 100%)!important; box-shadow:0 22px 52px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035)!important; position:relative; isolation:isolate; } :root[data-ui-mode="modern"] .platform-home .game-card::before{ height:3px!important; background:linear-gradient(90deg,transparent,var(--game-accent),transparent)!important; opacity:.92; } :root[data-ui-mode="modern"] .platform-home .game-card::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(circle at 50% 19%,color-mix(in srgb,var(--game-accent) 22%,transparent),transparent 31%); } :root[data-ui-mode="modern"] .platform-home .game-card.brand-fbrkha{--game-accent:#b665ff} :root[data-ui-mode="modern"] .platform-home .game-card.brand-qadha{--game-accent:#f0a93b} :root[data-ui-mode="modern"] .platform-home .game-card.brand-khaltaha{--game-accent:#31d9e8} :root[data-ui-mode="modern"] .platform-home .game-card.brand-top10{--game-accent:#47dc98} :root[data-ui-mode="modern"] .platform-home .game-mark{ width:100%!important; height:218px!important; border-radius:0!important; margin:0!important; position:relative!important; display:grid!important; place-items:center!important; overflow:hidden!important; background: linear-gradient(145deg,color-mix(in srgb,var(--game-accent) 12%,#190d2b),rgba(9,6,17,.92))!important; border:0!important; border-bottom:1px solid color-mix(in srgb,var(--game-accent) 30%,rgba(255,255,255,.06))!important; } :root[data-ui-mode="modern"] .platform-home .game-mark::before{ content:""; position:absolute; width:220px;height:220px; border-radius:50%; border:1px solid color-mix(in srgb,var(--game-accent) 20%,transparent); box-shadow:0 0 70px color-mix(in srgb,var(--game-accent) 18%,transparent),inset 0 0 55px color-mix(in srgb,var(--game-accent) 8%,transparent); opacity:.78; } :root[data-ui-mode="modern"] .platform-home .game-mark::after{ content:""; position:absolute; inset:auto 18px 13px; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--game-accent) 72%,#fff 10%),transparent); opacity:.68; } :root[data-ui-mode="modern"] .platform-home .game-mark-image{ width:155px!important;height:155px!important;object-fit:contain!important;position:relative;z-index:2; filter:drop-shadow(0 16px 25px rgba(0,0,0,.35))!important; } :root[data-ui-mode="modern"] .platform-home .game-copy{ flex:1; display:flex!important; flex-direction:column!important; align-items:flex-start!important; padding:18px 18px 16px!important; min-width:0; } :root[data-ui-mode="modern"] .platform-home .game-copy>.pill{ background:color-mix(in srgb,var(--game-accent) 10%,rgba(255,255,255,.035))!important; border-color:color-mix(in srgb,var(--game-accent) 26%,rgba(255,255,255,.06))!important; color:color-mix(in srgb,var(--game-accent) 70%,#fff 30%)!important; font-size:10px!important; } :root[data-ui-mode="modern"] .platform-home .game-title-lockup{margin:11px 0 7px!important;gap:2px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{ font-size:clamp(28px,2.25vw,36px)!important; color:#fff!important; letter-spacing:-1px!important; } :root[data-ui-mode="modern"] .platform-home .game-title-lockup small{ color:color-mix(in srgb,var(--game-accent) 60%,#d8d0dc 40%)!important; font-size:10px!important; } :root[data-ui-mode="modern"] .platform-home .game-copy>p{ min-height:68px!important; margin:0!important; color:#c7bdcd!important; font-size:12.5px!important; line-height:1.68!important; } :root[data-ui-mode="modern"] .platform-home .game-quick-facts{ width:100%; margin:13px 0 0!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; } :root[data-ui-mode="modern"] .platform-home .game-quick-facts>div{ padding:8px 9px!important; border-radius:12px!important; border:1px solid rgba(255,255,255,.065)!important; background:rgba(255,255,255,.027)!important; } :root[data-ui-mode="modern"] .platform-home .game-quick-facts dt{font-size:9px!important;color:#8f8497!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts dd{margin:2px 0 0!important;font-size:11px!important;color:#eee7f1!important;font-weight:900!important} :root[data-ui-mode="modern"] .platform-home .game-copy .card-actions{ width:100%!important; margin-top:auto!important; padding-top:16px!important; display:grid!important; grid-template-columns:1fr!important; gap:5px!important; } :root[data-ui-mode="modern"] .platform-home [data-game-action="play"]{ width:100%!important; min-height:49px!important; border-radius:14px!important; font-size:14px!important; } :root[data-ui-mode="modern"] .platform-home [data-game-action="rules"]{ min-height:35px!important; font-size:10px!important; color:#aaa0b1!important; text-decoration:none!important; } @media(hover:hover) and (pointer:fine){ :root[data-ui-mode="modern"] .platform-home .game-card:hover{ transform:translateY(-7px)!important; border-color:color-mix(in srgb,var(--game-accent) 72%,rgba(255,255,255,.12))!important; box-shadow:0 31px 72px rgba(0,0,0,.44),0 0 0 1px color-mix(in srgb,var(--game-accent) 10%,transparent)!important; } :root[data-ui-mode="modern"] .platform-home .game-card:hover .game-mark-image{transform:scale(1.045);transition:transform .18s ease} } :root[data-ui-mode="modern"] .platform-home .why-section{ width:min(1360px,calc(100% - 30px)); margin:0 auto 26px; padding:0!important; } :root[data-ui-mode="modern"] .platform-home .why-section>.section-heading{display:none!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{ max-width:none!important; width:100%!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:0!important; padding:18px 14px!important; border:1px solid rgba(255,255,255,.09)!important; border-radius:22px!important; background:linear-gradient(180deg,rgba(21,12,36,.82),rgba(10,6,18,.84))!important; box-shadow:0 18px 48px rgba(0,0,0,.24)!important; } :root[data-ui-mode="modern"] .platform-home .benefits-grid article{ min-height:112px!important; padding:12px 16px!important; display:grid!important; align-content:center!important; justify-items:center!important; text-align:center!important; border-left:1px solid rgba(255,255,255,.065)!important; background:transparent!important; border-radius:0!important; } :root[data-ui-mode="modern"] .platform-home .benefits-grid article:last-child{border-left:0!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid article>span{ width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:50%!important; color:#f3c969!important;background:rgba(246,199,92,.08)!important;border:1px solid rgba(246,199,92,.13)!important;font-size:18px!important } :root[data-ui-mode="modern"] .platform-home .benefits-grid h3{font-size:14px!important;margin:8px 0 3px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid p{font-size:9.5px!important;line-height:1.55!important;color:#aaa0b0!important;margin:0!important} :root[data-ui-mode="modern"] .platform-home .join-section{ width:min(1180px,calc(100% - 28px))!important; padding:28px 0 52px!important; } :root[data-ui-mode="modern"] .platform-home .join-panel{ padding:24px 26px!important; border-radius:23px!important; border:1px solid rgba(155,77,255,.22)!important; background:linear-gradient(135deg,rgba(33,15,57,.88),rgba(10,6,18,.94))!important; box-shadow:0 22px 54px rgba(0,0,0,.28)!important; } :root[data-ui-mode="modern"] .platform-home .join-copy h2{font-size:clamp(26px,3vw,38px)!important;margin:3px 0!important} :root[data-ui-mode="modern"] .platform-home .join-input-row input{border-radius:14px!important;min-height:51px!important} :root[data-ui-mode="modern"] .platform-home :is(.mood-shell,.steps-grid li,.install-card){ border-color:rgba(255,255,255,.075)!important; background:linear-gradient(150deg,rgba(23,13,39,.75),rgba(10,6,18,.86))!important; box-shadow:0 17px 46px rgba(0,0,0,.22)!important; } :root[data-ui-mode="modern"] .platform-home .mood-options button{ background:rgba(255,255,255,.035)!important; border-color:rgba(255,255,255,.075)!important; border-radius:15px!important; } :root[data-ui-mode="modern"] .platform-home .mood-options button[aria-pressed="true"], :root[data-ui-mode="modern"] .platform-home .mood-options button.active{ background:linear-gradient(135deg,rgba(155,77,255,.22),rgba(246,199,92,.08))!important; border-color:rgba(173,108,255,.4)!important; } :root[data-ui-mode="modern"] .platform-home .modern-community-strip{ display:flex!important; align-items:center; justify-content:space-between; gap:18px; margin-block:16px 56px!important; padding:21px 25px; border-radius:22px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(100deg,rgba(25,12,44,.78),rgba(12,7,21,.90),rgba(246,199,92,.035)); box-shadow:0 18px 50px rgba(0,0,0,.24); } :root[data-ui-mode="modern"] .platform-home .modern-community-copy{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px} :root[data-ui-mode="modern"] .platform-home .modern-community-copy>span{grid-row:1/3;font-size:38px;color:#e6bb56;line-height:1} :root[data-ui-mode="modern"] .platform-home .modern-community-copy strong{font-size:clamp(19px,2.2vw,28px)} :root[data-ui-mode="modern"] .platform-home .modern-community-copy small{color:#a99fb0;margin-top:2px} :root[data-ui-mode="modern"] .platform-home .modern-community-points{display:flex;gap:7px;flex-wrap:wrap} :root[data-ui-mode="modern"] .platform-home .modern-community-points span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);font-size:10px;color:#cfc4d4} /* ---------- Shared game shell feels like one platform, not four unrelated pages ---------- */ :root[data-ui-mode="modern"] body[data-game-brand]{ --game-glow:rgba(155,77,255,.15); background: radial-gradient(ellipse 46rem 28rem at 50% -9rem,var(--game-glow),transparent 72%), linear-gradient(180deg,#090512,#05030a 68%,#07040e)!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"]{--game-glow:rgba(168,77,255,.22)} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"]{--game-glow:rgba(42,211,226,.16)} :root[data-ui-mode="modern"] body[data-game-brand="qadha"]{--game-glow:rgba(238,171,57,.15)} :root[data-ui-mode="modern"] body[data-game-brand="top10"]{--game-glow:rgba(65,220,145,.15)} :root[data-ui-mode="modern"] body[data-game-brand] :where(.card,.setup-card,.setup-panel,.center-card,.question-panel,.question-card,.prompt-card,.result-card,.lobby-panel,.lobby-join-card,.join-board,.ranking-list){ box-shadow:0 18px 52px rgba(0,0,0,.30)!important; } /* FBRKHA — a purple studio, not the legacy home with new paint */ :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .app-shell{ width:min(1220px,calc(100% - 26px))!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero{ position:relative; overflow:hidden; margin:30px auto 18px!important; padding:40px 28px 32px!important; border:1px solid rgba(184,101,255,.22)!important; border-radius:32px!important; background: radial-gradient(circle at 18% 24%,rgba(184,101,255,.20),transparent 24%), radial-gradient(circle at 82% 20%,rgba(246,199,92,.07),transparent 22%), linear-gradient(145deg,rgba(30,13,51,.93),rgba(9,5,17,.97))!important; box-shadow:0 28px 80px rgba(0,0,0,.40)!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero::after{ content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.05);border-radius:22px;pointer-events:none } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero .brand-tagline{ font-size:clamp(30px,4.5vw,58px)!important; letter-spacing:-1.7px!important; margin:10px 0 6px!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero .brand-subtitle{color:#c8bdd0!important;font-size:14px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-actions{ gap:12px!important; margin-top:14px!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action{ min-height:126px!important; border-radius:22px!important; background:linear-gradient(145deg,rgba(33,16,55,.90),rgba(10,6,18,.96))!important; border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 16px 42px rgba(0,0,0,.24)!important; color:#fff!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action-create{background:linear-gradient(145deg,rgba(246,200,95,.13),rgba(32,16,53,.96))!important;border-color:rgba(246,200,95,.40)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action-create b{color:#ffd96d!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action small{color:#d7ccdf!important;opacity:.9!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action-icon{ width:50px!important;height:50px!important;border-radius:15px!important; background:linear-gradient(145deg,rgba(184,101,255,.16),rgba(246,199,92,.06))!important; border:1px solid rgba(184,101,255,.22)!important; color:#e5c6ff!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-features{ border:1px solid rgba(255,255,255,.07)!important; border-radius:18px!important; background:rgba(255,255,255,.022)!important; padding:7px!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-features>div{background:transparent!important;border-color:rgba(255,255,255,.05)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .page-head{margin-top:32px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .page-head h1{font-size:clamp(34px,4.7vw,58px)!important;letter-spacing:-1.6px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .setup-card{ border-radius:28px!important; border-color:rgba(184,101,255,.16)!important; background:linear-gradient(155deg,rgba(30,15,50,.94),rgba(9,6,17,.98))!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .setup-feature-block{ border-radius:20px!important; padding:18px!important; background:rgba(255,255,255,.028)!important; border-color:rgba(255,255,255,.075)!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .segment{ min-height:45px!important;border-radius:12px!important;background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.075)!important } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .segment.active{ background:linear-gradient(145deg,#9c53f5,#6d2ec3)!important;border-color:rgba(209,169,255,.54)!important;box-shadow:inset 0 1px rgba(255,255,255,.18),0 8px 20px rgba(111,45,195,.18)!important } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :where(.lobby-join-card,.lobby-panel,.question-stage,.host-voting-question,.submission-card,.answer-entry-card){ border-radius:27px!important; background:linear-gradient(155deg,rgba(31,15,52,.95),rgba(9,6,18,.98))!important; border-color:rgba(184,101,255,.14)!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] :where(.answer-card,.vote-option){ border-radius:17px!important;background:linear-gradient(145deg,rgba(255,255,255,.048),rgba(255,255,255,.022))!important } /* KHALTAHA — cyan/purple multi-game control room */ :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-top{ background:linear-gradient(180deg,rgba(5,19,23,.94),rgba(5,10,17,.88))!important; border-bottom:1px solid rgba(49,217,232,.13)!important; } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-hero{ position:relative; margin:18px auto 14px; max-width:960px; padding:34px 22px 24px!important; border-radius:28px; border:1px solid rgba(49,217,232,.14); background:radial-gradient(circle at 50% 0,rgba(49,217,232,.12),transparent 54%),rgba(8,15,22,.48); } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-hero h1{ background:linear-gradient(90deg,#fff,#a8f4f8 60%,#d2b2ff)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .setup-panel{ border-radius:28px!important;border-color:rgba(49,217,232,.14)!important;background:linear-gradient(155deg,rgba(8,31,37,.90),rgba(9,6,18,.97))!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-toggle{ min-height:118px!important;padding:14px!important;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.018))!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-toggle:has(input:checked), :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .mode-toggle.selected{ background:linear-gradient(145deg,rgba(49,217,232,.15),rgba(145,75,242,.08))!important; box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 28px rgba(26,196,210,.08)!important } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.game-head,.prompt-card,.secret-mission,.answer-form,.result-card,.ranking-list){ border-color:rgba(49,217,232,.11)!important; background:linear-gradient(150deg,rgba(10,30,36,.91),rgba(9,6,18,.97))!important; } :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.choice,.guess-card,.order-item,.result-row,.ranking-row){ background:linear-gradient(145deg,rgba(255,255,255,.046),rgba(255,255,255,.021))!important; border-color:rgba(255,255,255,.075)!important; } /* TOP 10 — green/gold hidden-answer show */ :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-nav{ background:linear-gradient(180deg,rgba(5,18,12,.95),rgba(5,9,12,.88))!important; border-bottom:1px solid rgba(70,223,153,.12)!important; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-hero{ min-height:210px; display:grid!important; grid-template-columns:1fr auto!important; align-items:center!important; gap:22px!important; padding:28px 32px!important; border-radius:30px!important; border-color:rgba(70,223,153,.18)!important; background: radial-gradient(circle at 18% 22%,rgba(70,223,153,.18),transparent 30%), radial-gradient(circle at 84% 14%,rgba(246,199,92,.10),transparent 24%), linear-gradient(145deg,rgba(8,39,25,.91),rgba(8,6,15,.97))!important; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-title{font-size:clamp(52px,7vw,88px)!important;line-height:.95!important;margin:0!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-title span{color:#effbf4!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-title strong{color:#f4c65a!important;text-shadow:0 10px 28px rgba(238,180,51,.16)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-hero p{color:#b9cdc1!important;max-width:620px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .hero-mark{width:150px!important;height:150px!important;filter:drop-shadow(0 16px 30px rgba(0,0,0,.32))} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-grid{gap:13px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-card{ border-radius:22px!important; border-color:rgba(70,223,153,.11)!important; background:linear-gradient(150deg,rgba(12,31,22,.88),rgba(8,6,14,.97))!important; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .section-title>span{ background:rgba(70,223,153,.10)!important;color:#82ebb1!important;border:1px solid rgba(70,223,153,.14)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] :where(.round-option,.timer-options button,.segmented button){ border-radius:13px!important;background:rgba(255,255,255,.032)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] :where(.round-option.active,.timer-options button.active,.segmented button.active){ background:linear-gradient(145deg,#42dd96,#219b68)!important;color:#06150e!important;box-shadow:inset 0 1px rgba(255,255,255,.25),0 8px 20px rgba(44,201,130,.12)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .question-panel{ border-radius:24px!important;background:linear-gradient(150deg,rgba(11,40,26,.91),rgba(8,6,15,.97))!important;border-color:rgba(70,223,153,.14)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .cards-board{gap:9px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card{ border-radius:17px!important;min-height:105px!important;background:linear-gradient(145deg,rgba(255,255,255,.048),rgba(255,255,255,.021))!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card.hidden-card{ background:linear-gradient(145deg,rgba(23,50,36,.82),rgba(9,14,11,.94))!important;border-color:rgba(70,223,153,.13)!important } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-card.hidden-card .card-rank{color:#efc659!important;text-shadow:0 5px 16px rgba(235,184,64,.12)} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .turn-panel{ border-radius:20px!important;background:linear-gradient(145deg,rgba(12,37,25,.88),rgba(8,7,13,.95))!important;border-color:rgba(70,223,153,.13)!important } /* QADHA — television board matching the approved visual direction */ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-board{ background: radial-gradient(circle at 50% -8%,rgba(246,178,57,.10),transparent 29rem), radial-gradient(circle at 8% 35%,rgba(100,57,181,.11),transparent 32rem), linear-gradient(180deg,#080611 0,#05040a 67%,#090610)!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-toolbar{ min-height:104px!important; padding:10px clamp(14px,2.2vw,30px)!important; grid-template-columns:minmax(250px,1fr) auto minmax(250px,1fr)!important; border-bottom:1px solid rgba(255,255,255,.07)!important; background:linear-gradient(180deg,rgba(9,6,16,.96),rgba(7,5,12,.88))!important; box-shadow:0 15px 42px rgba(0,0,0,.30)!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-brand strong{ font-size:clamp(48px,5.2vw,72px)!important; line-height:.92!important; letter-spacing:-2px!important; background:linear-gradient(180deg,#ffe58e,#f2b63f 60%,#cf8c1f)!important; -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important; filter:drop-shadow(0 8px 16px rgba(208,142,30,.12)); } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-slogan{ display:block!important; margin-top:6px!important; color:#c9bdcf!important; font-size:12px!important; font-weight:800!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-slogan b{color:#f3c75e!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-turn-pill{visibility:hidden!important;pointer-events:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-toolbar-actions{gap:6px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-toolbar-action{ min-height:46px!important;border-radius:13px!important;background:rgba(255,255,255,.032)!important;border-color:rgba(255,255,255,.075)!important;color:#d8cedd!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-grid{ padding:14px 18px 12px!important; gap:10px!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel{ border-radius:20px!important; padding:8px!important; gap:7px!important; overflow:hidden!important; border:1px solid color-mix(in srgb,var(--q-cat,#9b4dff) 62%,rgba(255,255,255,.10))!important; background:linear-gradient(180deg,color-mix(in srgb,var(--q-cat,#9b4dff) 11%,#140b21),#090610 72%)!important; box-shadow:0 14px 34px rgba(0,0,0,.26),inset 0 1px color-mix(in srgb,var(--q-cat,#9b4dff) 16%,transparent)!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-1{--q-cat:#2e9dff} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-2{--q-cat:#3ed78c} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-3{--q-cat:#9d56f3} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-4{--q-cat:#efa62f} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-5{--q-cat:#ef435f} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-tone-6{--q-cat:#28cbd8} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat{ min-height:60px!important; padding:7px 9px!important; display:grid!important; grid-template-columns:46px minmax(0,1fr)!important; align-items:center!important; gap:8px!important; border-radius:14px!important; background:linear-gradient(145deg,color-mix(in srgb,var(--q-cat) 13%,rgba(255,255,255,.035)),rgba(255,255,255,.018))!important; border:1px solid color-mix(in srgb,var(--q-cat) 28%,rgba(255,255,255,.06))!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat-art{ width:44px!important;height:44px!important;border-radius:50%!important;overflow:hidden!important; display:grid!important;place-items:center!important; background:color-mix(in srgb,var(--q-cat) 16%,#100a19)!important; border:1px solid color-mix(in srgb,var(--q-cat) 45%,rgba(255,255,255,.08))!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat-art img{width:100%!important;height:100%!important;object-fit:cover!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat-fallback{ display:grid!important;place-items:center!important;font-size:21px!important;position:absolute!important;inset:0!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat strong{ font-size:clamp(14px,1.45vw,20px)!important;color:#fff!important;line-height:1.3!important;text-align:right!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .category-value-column{gap:7px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .slot{ min-height:0!important;height:auto!important;aspect-ratio:1.03/1!important; border-radius:14px!important; border:1px solid color-mix(in srgb,var(--q-cat) 58%,rgba(255,255,255,.09))!important; background:linear-gradient(180deg,color-mix(in srgb,var(--q-cat) 78%,#fff 4%),color-mix(in srgb,var(--q-cat) 62%,#090610 38%))!important; color:#fff!important; box-shadow:inset 0 1px rgba(255,255,255,.16),0 6px 15px rgba(0,0,0,.22)!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .slot span{font-size:clamp(21px,2.1vw,32px)!important;font-weight:950!important;text-shadow:0 2px 7px rgba(0,0,0,.28)} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .slot.used, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .slot.closed, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .slot.cancelled{ background:#0b0a10!important;border-color:rgba(255,255,255,.035)!important;box-shadow:inset 0 1px rgba(255,255,255,.015)!important;opacity:1!important;filter:none!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .slot.used span, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .slot.closed span, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .slot.cancelled span{display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel.category-complete{ filter:saturate(.06) brightness(.55)!important;opacity:.72!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-footer{ min-height:148px!important; padding:10px 16px 14px!important; gap:12px!important; background:linear-gradient(180deg,rgba(5,4,9,.72),rgba(5,4,9,.98))!important; border-top:1px solid rgba(255,255,255,.06)!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box{ min-height:114px!important; border-radius:20px!important; padding:12px 14px!important; background:linear-gradient(145deg,rgba(18,10,30,.95),rgba(7,5,12,.98))!important; border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 14px 34px rgba(0,0,0,.26)!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box.team-0{border-color:rgba(47,155,255,.55)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box.team-1{border-color:rgba(255,74,101,.52)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box.active{box-shadow:0 0 0 2px rgba(246,199,92,.68),0 16px 38px rgba(0,0,0,.30)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-name-button strong{font-size:clamp(20px,1.9vw,29px)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-score-control output{font-size:clamp(31px,2.8vw,43px)!important;font-weight:950!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .help-btn{ width:46px!important;min-width:46px!important;height:42px!important;min-height:42px!important; border-radius:11px!important;background:rgba(246,199,92,.045)!important;border-color:rgba(246,199,92,.18)!important;color:#f2cb70!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .help-btn.used, :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .help-btn:disabled.used{background:#0b0a0f!important;border-color:rgba(255,255,255,.035)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow{ min-height:82px!important; border-radius:17px 7px 7px 17px!important; border-color:rgba(246,199,92,.50)!important; background:linear-gradient(180deg,#1d1328,#0e0915)!important; color:#f7cf70!important; box-shadow:0 0 0 2px rgba(246,199,92,.07),0 12px 30px rgba(0,0,0,.26)!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow.turn-team-0::after{right:-24px!important;border-left:24px solid #e8ad3d!important;border-block-width:24px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow.turn-team-1::after{left:-24px!important;border-right:24px solid #e8ad3d!important;border-block-width:24px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow small{color:#bba87a!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow strong{font-size:clamp(17px,1.6vw,23px)!important} /* ---------- R2 responsive rules ---------- */ @media(max-width:1120px){ :root[data-ui-mode="modern"] .platform-home .home-hero{grid-template-columns:1fr .8fr!important;gap:24px!important} :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:860px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important} } @media(max-width:820px){ :root[data-ui-mode="modern"] .platform-home .home-hero{grid-template-columns:1fr!important;text-align:center!important;gap:22px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy{display:grid!important;justify-items:center!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges{justify-content:center!important} :root[data-ui-mode="modern"] .platform-home .home-hero-art{min-height:300px!important;order:2!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid article{border:0!important;border-bottom:1px solid rgba(255,255,255,.05)!important} :root[data-ui-mode="modern"] .platform-home .modern-community-strip{flex-direction:column;text-align:center!important} :root[data-ui-mode="modern"] .platform-home .modern-community-copy{justify-items:center!important;grid-template-columns:1fr!important} :root[data-ui-mode="modern"] .platform-home .modern-community-copy>span{display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-hero{grid-template-columns:1fr!important;text-align:center!important;justify-items:center!important} } @media(max-width:620px){ :root[data-ui-mode="modern"] .platform-home .home-topbar{width:calc(100% - 12px)!important;border-radius:16px!important} :root[data-ui-mode="modern"] .platform-home .home-hero{width:calc(100% - 18px)!important;padding:28px 0 30px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{width:145px!important} :root[data-ui-mode="modern"] .platform-home .hero h1{font-size:clamp(40px,12vw,56px)!important;letter-spacing:-2px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy>p{font-size:13px!important;line-height:1.72!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges{gap:5px!important;margin-top:14px!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span{font-size:9px!important;min-height:31px!important;padding:5px 8px!important} :root[data-ui-mode="modern"] .platform-home .home-hero-art{min-height:230px!important;border-radius:24px!important} :root[data-ui-mode="modern"] .platform-home .modern-stage-sign{top:14px!important;right:14px!important} :root[data-ui-mode="modern"] .platform-home .hero-game-stack{height:190px!important;width:94%!important} :root[data-ui-mode="modern"] .platform-home .hero-game-chip{width:82px!important;height:82px!important;border-radius:20px!important} :root[data-ui-mode="modern"] .platform-home .hero-game-chip img{width:68px!important;height:68px!important} :root[data-ui-mode="modern"] .platform-home .hero-chip-fbrkha{transform:translate(-74px,-36px) rotate(-4deg)!important} :root[data-ui-mode="modern"] .platform-home .hero-chip-qadha{transform:translate(74px,-36px) rotate(4deg)!important} :root[data-ui-mode="modern"] .platform-home .hero-chip-khaltaha{transform:translate(-67px,55px) rotate(3deg)!important} :root[data-ui-mode="modern"] .platform-home .hero-chip-top10{transform:translate(67px,55px) rotate(-3deg)!important} :root[data-ui-mode="modern"] .platform-home .games-section{padding-inline:10px!important;padding-top:38px!important} :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} :root[data-ui-mode="modern"] .platform-home .game-card{min-height:390px!important;border-radius:19px!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:132px!important} :root[data-ui-mode="modern"] .platform-home .game-mark::before{width:130px!important;height:130px!important} :root[data-ui-mode="modern"] .platform-home .game-mark-image{width:96px!important;height:96px!important} :root[data-ui-mode="modern"] .platform-home .game-copy{padding:11px 10px 10px!important;align-items:center!important;text-align:center!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup{margin:6px 0 4px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{font-size:22px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup small{font-size:8px!important} :root[data-ui-mode="modern"] .platform-home .game-copy>p{font-size:9.5px!important;line-height:1.52!important;min-height:44px!important;-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts{gap:4px!important;margin-top:8px!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts>div{padding:5px 3px!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts dt{font-size:7px!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts dd{font-size:9px!important} :root[data-ui-mode="modern"] .platform-home .game-copy .card-actions{padding-top:8px!important} :root[data-ui-mode="modern"] .platform-home [data-game-action="play"]{min-height:40px!important;font-size:11px!important;padding:7px 5px!important} :root[data-ui-mode="modern"] .platform-home [data-game-action="rules"]{font-size:8px!important;min-height:27px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:8px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid article{min-height:100px!important;padding:10px 7px!important} :root[data-ui-mode="modern"] .platform-home .join-section{padding-top:18px!important} :root[data-ui-mode="modern"] .platform-home .modern-community-strip{margin-inline:10px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .app-shell{width:calc(100% - 12px)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero{margin-top:12px!important;padding:25px 12px 20px!important;border-radius:24px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero .brand-tagline{font-size:30px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-hero{min-height:0!important;padding:20px 14px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .hero-mark{width:104px!important;height:104px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-title{font-size:58px!important} } @media(max-width:400px){ :root[data-ui-mode="modern"] .platform-home .game-copy>p{display:none!important} :root[data-ui-mode="modern"] .platform-home .game-card{min-height:333px!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:118px!important} :root[data-ui-mode="modern"] .platform-home .game-mark-image{width:86px!important;height:86px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{font-size:20px!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span:nth-child(3){display:none!important} } @media(max-width:760px){ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-toolbar{ min-height:104px!important;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;padding:6px 8px!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-brand strong{font-size:38px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-slogan{font-size:9px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:9px!important;gap:8px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel{min-height:286px!important;padding:6px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat{min-height:52px!important;grid-template-columns:36px minmax(0,1fr)!important;padding:5px 6px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat-art{width:35px!important;height:35px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .slot span{font-size:22px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-footer{min-height:0!important;padding:9px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow{border-radius:15px!important;min-height:56px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow::after{display:none!important} } /* ====================================================================== v3.2.48 Modern R3 — approved full homepage, not a skin over Classic. The Classic DOM remains intact; this block only changes Modern mode. ====================================================================== */ :root[data-ui-mode="modern"] body.platform-home{ --home-max:1360px; min-height:100%; background: radial-gradient(circle at 50% -8%,rgba(134,62,230,.28),transparent 34rem), radial-gradient(circle at 8% 28%,rgba(32,197,220,.08),transparent 27rem), radial-gradient(circle at 92% 24%,rgba(246,185,73,.09),transparent 25rem), linear-gradient(180deg,#090512 0%,#08050e 48%,#06040a 100%)!important; } :root[data-ui-mode="modern"] body.platform-home main{ position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; } :root[data-ui-mode="modern"] body.platform-home main::before, :root[data-ui-mode="modern"] body.platform-home main::after{ content:""; position:absolute; pointer-events:none; z-index:-1; border:1px solid rgba(166,92,255,.12); border-radius:50%; filter:blur(.1px); } :root[data-ui-mode="modern"] body.platform-home main::before{width:760px;height:760px;right:-420px;top:45px;box-shadow:0 0 80px rgba(145,67,247,.08)} :root[data-ui-mode="modern"] body.platform-home main::after{width:620px;height:620px;left:-360px;top:330px;border-color:rgba(246,190,78,.08)} /* Navigation now reads as a single premium product bar. */ :root[data-ui-mode="modern"] .platform-home .home-topbar{ width:min(1380px,calc(100% - 28px))!important; height:70px!important; min-height:70px!important; margin:12px auto 0!important; padding:8px 14px!important; border-radius:22px!important; border:1px solid rgba(222,192,255,.13)!important; background:rgba(10,6,18,.84)!important; box-shadow:0 15px 52px rgba(0,0,0,.31),inset 0 1px rgba(255,255,255,.025)!important; backdrop-filter:blur(22px) saturate(130%)!important; } :root[data-ui-mode="modern"] .platform-home .home-topbar .brand img{width:142px!important;filter:drop-shadow(0 7px 16px rgba(163,77,255,.18))} :root[data-ui-mode="modern"] .platform-home .primary-nav{gap:4px!important} :root[data-ui-mode="modern"] .platform-home .primary-nav>.nav-link, :root[data-ui-mode="modern"] .platform-home .nav-account, :root[data-ui-mode="modern"] .platform-home .fbrkh-tools-button-inline{ min-height:45px!important; border-radius:13px!important; color:#d9cedf!important; background:transparent!important; } :root[data-ui-mode="modern"] .platform-home .primary-nav>.nav-link[href="#games"]{ color:#ffd572!important; background:rgba(246,190,78,.075)!important; box-shadow:inset 0 -2px #e5ad43!important; } /* Hero: one deliberate center composition, matching the approved youthful direction. */ :root[data-ui-mode="modern"] .platform-home .home-hero{ order:1!important; width:min(1260px,calc(100% - 32px))!important; min-height:470px!important; padding:68px 20px 48px!important; margin:0 auto!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important; place-items:center!important; text-align:center!important; position:relative!important; isolation:isolate; } :root[data-ui-mode="modern"] .platform-home .home-hero::before{ content:""; position:absolute; inset:32px 1% 8px; z-index:-2; border-radius:48px; background: linear-gradient(90deg,rgba(132,52,222,.08),transparent 24%,transparent 76%,rgba(246,179,61,.055)), radial-gradient(circle at 50% 38%,rgba(121,49,209,.22),transparent 27rem), linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.005)); border:1px solid rgba(255,255,255,.045); mask-image:linear-gradient(to bottom,#000 78%,transparent); } :root[data-ui-mode="modern"] .platform-home .home-hero::after{ content:""; position:absolute; z-index:-1; width:min(720px,82%); height:145px; bottom:18px; border-radius:50%; background:radial-gradient(ellipse,rgba(132,54,225,.25),transparent 67%); filter:blur(24px); } :root[data-ui-mode="modern"] .platform-home .hero-copy{ width:min(930px,100%)!important; display:grid!important; justify-items:center!important; align-content:center!important; position:relative; z-index:2; } :root[data-ui-mode="modern"] .platform-home .hero-copy .eyebrow{ min-height:36px!important; padding:7px 14px!important; margin:0 0 12px!important; border:1px solid rgba(246,196,88,.28)!important; border-radius:999px!important; background:rgba(246,190,78,.065)!important; color:#f5cd70!important; font-size:11px!important; font-weight:900!important; } :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{ width:154px!important; max-height:72px!important; margin:2px 0 9px!important; opacity:.98; filter:drop-shadow(0 10px 23px rgba(151,62,238,.25))!important; } :root[data-ui-mode="modern"] .platform-home .home-hero h1{ margin:0!important; max-width:900px!important; font-size:clamp(58px,7.6vw,104px)!important; line-height:.98!important; letter-spacing:-3.8px!important; font-weight:950!important; background:linear-gradient(100deg,#fff 10%,#fff 57%,#f8cf78 78%,#edb54e 96%)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; text-shadow:none!important; } :root[data-ui-mode="modern"] .platform-home .hero-copy>p{ max-width:720px!important; margin:22px auto 0!important; color:#cbbfd2!important; font-size:clamp(15px,1.45vw,19px)!important; line-height:1.9!important; } :root[data-ui-mode="modern"] .platform-home .modern-hero-badges{ display:flex!important; justify-content:center!important; flex-wrap:wrap!important; gap:8px!important; margin:22px 0 0!important; } :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:38px!important; padding:7px 14px!important; border-radius:999px!important; border:1px solid rgba(255,255,255,.085)!important; background:rgba(255,255,255,.027)!important; color:#ddd3e2!important; font-size:11px!important; font-weight:850!important; } :root[data-ui-mode="modern"] .platform-home .hero-actions{margin-top:24px!important} :root[data-ui-mode="modern"] .platform-home .hero-primary{ min-width:190px!important; min-height:52px!important; padding:12px 25px!important; border-radius:15px!important; background:linear-gradient(135deg,#f5cf70,#e8a936)!important; color:#231305!important; box-shadow:0 13px 34px rgba(225,160,47,.23)!important; } /* The old collage was the part that made Modern look like Classic. Modern uses the focused hero above. */ :root[data-ui-mode="modern"] .platform-home .home-hero-art{display:none!important} /* Game shelf directly after the hero. */ :root[data-ui-mode="modern"] .platform-home #resumeSession{order:2!important} :root[data-ui-mode="modern"] .platform-home .games-section{ order:3!important; width:100%!important; padding:38px 18px 54px!important; background:linear-gradient(180deg,rgba(11,7,18,.12),rgba(19,10,31,.36) 45%,rgba(8,5,14,.08))!important; border-block:1px solid rgba(255,255,255,.035)!important; } :root[data-ui-mode="modern"] .platform-home .games-section>.section-heading{ width:min(1280px,100%)!important; max-width:none!important; margin:0 auto 30px!important; text-align:center!important; } :root[data-ui-mode="modern"] .platform-home .games-section .section-kicker{font-size:11px!important} :root[data-ui-mode="modern"] .platform-home .games-section .section-heading h2{ margin:6px 0 8px!important; font-size:clamp(35px,4.2vw,56px)!important; letter-spacing:-1.8px!important; } :root[data-ui-mode="modern"] .platform-home .games-section .section-heading p{ max-width:720px!important; margin-inline:auto!important; color:#b9adbf!important; font-size:13px!important; } :root[data-ui-mode="modern"] .platform-home .games-grid{ width:min(1320px,100%)!important; max-width:1320px!important; margin-inline:auto!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:14px!important; align-items:stretch!important; } :root[data-ui-mode="modern"] .platform-home .game-card{ --game-accent:#a958ff; --game-accent-rgb:169,88,255; min-height:478px!important; padding:0!important; display:flex!important; flex-direction:column!important; gap:0!important; border:1px solid rgba(255,255,255,.10)!important; border-radius:26px!important; overflow:hidden!important; background: radial-gradient(circle at 50% 19%,rgba(var(--game-accent-rgb),.22),transparent 11rem), linear-gradient(180deg,rgba(34,18,51,.98),rgba(12,8,20,.99))!important; box-shadow:0 20px 52px rgba(0,0,0,.30)!important; isolation:isolate!important; transform:none!important; } :root[data-ui-mode="modern"] .platform-home .game-card.brand-fbrkha{--game-accent:#b65cff;--game-accent-rgb:182,92,255} :root[data-ui-mode="modern"] .platform-home .game-card.brand-qadha{--game-accent:#f0aa38;--game-accent-rgb:240,170,56} :root[data-ui-mode="modern"] .platform-home .game-card.brand-khaltaha{--game-accent:#32cbe3;--game-accent-rgb:50,203,227} :root[data-ui-mode="modern"] .platform-home .game-card.brand-top10{--game-accent:#42d78f;--game-accent-rgb:66,215,143} :root[data-ui-mode="modern"] .platform-home .game-card::before{ content:""!important; position:absolute!important; inset:0 0 auto!important; height:3px!important; background:linear-gradient(90deg,transparent,var(--game-accent),transparent)!important; z-index:4!important; } :root[data-ui-mode="modern"] .platform-home .game-card::after{ content:""!important; position:absolute!important; width:180px!important; height:180px!important; border-radius:50%!important; top:34px!important; left:50%!important; transform:translateX(-50%)!important; background:rgba(var(--game-accent-rgb),.17)!important; filter:blur(38px)!important; z-index:-1!important; pointer-events:none!important; } :root[data-ui-mode="modern"] .platform-home .game-mark{ width:100%!important; height:205px!important; min-height:205px!important; margin:0!important; padding:20px 12px 8px!important; border:0!important; border-radius:0!important; display:grid!important; place-items:center!important; background: linear-gradient(180deg,rgba(var(--game-accent-rgb),.055),transparent), repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 13px)!important; box-shadow:none!important; overflow:hidden!important; position:relative!important; } :root[data-ui-mode="modern"] .platform-home .game-mark::before{ content:""!important; position:absolute!important; width:152px!important; height:152px!important; border-radius:38px!important; border:1px solid rgba(var(--game-accent-rgb),.24)!important; background:linear-gradient(145deg,rgba(var(--game-accent-rgb),.16),rgba(6,4,12,.3))!important; transform:rotate(-4deg)!important; box-shadow:0 18px 40px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04)!important; } :root[data-ui-mode="modern"] .platform-home .game-mark::after{display:none!important} :root[data-ui-mode="modern"] .platform-home .game-mark-image{ width:138px!important; height:138px!important; max-width:138px!important; max-height:138px!important; border-radius:0!important; position:relative!important; z-index:2!important; object-fit:contain!important; filter:drop-shadow(0 13px 23px rgba(0,0,0,.32))!important; transition:transform .18s ease!important; } :root[data-ui-mode="modern"] .platform-home .game-copy{ flex:1!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; min-height:0!important; padding:6px 17px 16px!important; text-align:center!important; position:relative!important; z-index:2!important; } :root[data-ui-mode="modern"] .platform-home .game-copy>.pill{ align-self:center!important; min-height:25px!important; padding:5px 9px!important; margin:0!important; border-radius:999px!important; border:1px solid rgba(var(--game-accent-rgb),.25)!important; background:rgba(var(--game-accent-rgb),.08)!important; color:color-mix(in srgb,var(--game-accent) 68%,white 32%)!important; font-size:9px!important; font-weight:900!important; } :root[data-ui-mode="modern"] .platform-home .game-title-lockup{margin:9px 0 6px!important;gap:1px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{ margin:0!important; color:#fff!important; font-size:clamp(29px,2.5vw,38px)!important; line-height:1.05!important; font-weight:950!important; letter-spacing:-1.2px!important; } :root[data-ui-mode="modern"] .platform-home .game-title-lockup small{ color:color-mix(in srgb,var(--game-accent) 56%,#d7cadd 44%)!important; font-size:9px!important; font-weight:850!important; } :root[data-ui-mode="modern"] .platform-home .game-copy>p{ display:block!important; min-height:58px!important; margin:5px 0 10px!important; color:#bcb0c2!important; font-size:11px!important; line-height:1.65!important; -webkit-line-clamp:3!important; text-wrap:balance!important; } :root[data-ui-mode="modern"] .platform-home .game-quick-facts{ width:100%!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:6px!important; margin:auto 0 0!important; } :root[data-ui-mode="modern"] .platform-home .game-quick-facts>div{ padding:7px 5px!important; border:1px solid rgba(255,255,255,.065)!important; border-radius:12px!important; background:rgba(255,255,255,.025)!important; } :root[data-ui-mode="modern"] .platform-home .game-quick-facts dt{color:#867b8d!important;font-size:8px!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts dd{margin:2px 0 0!important;color:#eee7f2!important;font-size:10px!important;font-weight:900!important} :root[data-ui-mode="modern"] .platform-home .game-copy .card-actions{ width:100%!important; display:grid!important; grid-template-columns:1fr!important; gap:3px!important; margin:10px 0 0!important; padding:0!important; } :root[data-ui-mode="modern"] .platform-home [data-game-action="play"]{ width:100%!important; min-width:0!important; min-height:46px!important; border-radius:13px!important; border:1px solid rgba(255,230,168,.46)!important; background:linear-gradient(135deg,#f6d173,#e9a832)!important; color:#221305!important; font-size:12px!important; font-weight:950!important; box-shadow:0 11px 25px rgba(218,153,41,.16)!important; } :root[data-ui-mode="modern"] .platform-home [data-game-action="rules"]{ min-height:31px!important; padding:4px!important; color:#8f8396!important; font-size:9px!important; background:transparent!important; border:0!important; box-shadow:none!important; } @media (hover:hover) and (pointer:fine){ :root[data-ui-mode="modern"] .platform-home .game-card:hover{ transform:translateY(-5px)!important; border-color:rgba(var(--game-accent-rgb),.30)!important; box-shadow:0 29px 72px rgba(0,0,0,.38),0 0 34px rgba(var(--game-accent-rgb),.08)!important; } :root[data-ui-mode="modern"] .platform-home .game-card:hover .game-mark-image{transform:scale(1.055)!important} } /* Modern page is intentionally concise: useful join + benefits, not the old long marketing stack. */ :root[data-ui-mode="modern"] .platform-home #moodPicker, :root[data-ui-mode="modern"] .platform-home #howItWorks{display:none!important} :root[data-ui-mode="modern"] .platform-home .why-section{ order:4!important; padding:20px 18px 24px!important; background:transparent!important; } :root[data-ui-mode="modern"] .platform-home .why-section>.section-heading{display:none!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{ width:min(1260px,100%)!important; margin-inline:auto!important; padding:10px!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:1px!important; border:1px solid rgba(255,255,255,.07)!important; border-radius:22px!important; background:rgba(17,10,28,.58)!important; box-shadow:0 18px 42px rgba(0,0,0,.16)!important; } :root[data-ui-mode="modern"] .platform-home .benefits-grid article{ min-height:112px!important; padding:14px 10px!important; display:grid!important; justify-items:center!important; align-content:center!important; text-align:center!important; border:0!important; border-left:1px solid rgba(255,255,255,.055)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } :root[data-ui-mode="modern"] .platform-home .benefits-grid article:last-child{border-left:0!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid article>span{ width:36px!important;height:36px!important;display:grid!important;place-items:center!important; border-radius:13px!important;background:rgba(145,66,238,.11)!important;color:#e5b85c!important;font-size:15px!important;font-weight:950!important } :root[data-ui-mode="modern"] .platform-home .benefits-grid h3{margin:7px 0 3px!important;font-size:12px!important;color:#f0e9f3!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid p{margin:0!important;max-width:160px!important;color:#8f8495!important;font-size:8.5px!important;line-height:1.55!important} :root[data-ui-mode="modern"] .platform-home .join-section{ order:5!important; width:min(1260px,calc(100% - 32px))!important; margin:0 auto!important; padding:14px 0 22px!important; } :root[data-ui-mode="modern"] .platform-home .join-panel{ padding:17px 19px!important; display:grid!important; grid-template-columns:minmax(220px,.7fr) minmax(360px,1.3fr)!important; gap:18px!important; align-items:center!important; border-radius:20px!important; background:linear-gradient(135deg,rgba(36,19,57,.68),rgba(12,8,21,.84))!important; border:1px solid rgba(255,255,255,.075)!important; box-shadow:none!important; } :root[data-ui-mode="modern"] .platform-home .join-copy h2{font-size:24px!important;margin:3px 0!important} :root[data-ui-mode="modern"] .platform-home .join-form{gap:5px!important} :root[data-ui-mode="modern"] .platform-home .join-form label{font-size:9px!important;color:#978b9e!important} :root[data-ui-mode="modern"] .platform-home .join-input-row input{min-height:48px!important;border-radius:12px!important} :root[data-ui-mode="modern"] .platform-home .join-input-row .btn{min-height:48px!important} :root[data-ui-mode="modern"] .platform-home .modern-community-strip{ order:6!important; width:min(1260px,calc(100% - 32px))!important; margin:14px auto 34px!important; padding:22px 26px!important; border:0!important; border-top:1px solid rgba(255,255,255,.055)!important; border-bottom:1px solid rgba(255,255,255,.055)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } :root[data-ui-mode="modern"] .platform-home .modern-community-copy strong{font-size:clamp(20px,2.2vw,29px)!important} :root[data-ui-mode="modern"] .platform-home #installFbrkh{order:7!important} @media(max-width:1120px){ :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:820px!important} :root[data-ui-mode="modern"] .platform-home .game-card{min-height:440px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid article:nth-child(3){border-left:0!important} } @media(max-width:700px){ :root[data-ui-mode="modern"] .platform-home .home-hero{min-height:390px!important;padding:45px 14px 34px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{width:128px!important;max-height:58px!important} :root[data-ui-mode="modern"] .platform-home .home-hero h1{font-size:clamp(48px,15vw,70px)!important;letter-spacing:-2.7px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy>p{font-size:13px!important;line-height:1.75!important;margin-top:16px!important} :root[data-ui-mode="modern"] .platform-home .games-section{padding:30px 10px 40px!important} :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} :root[data-ui-mode="modern"] .platform-home .game-card{min-height:362px!important;border-radius:19px!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:138px!important;min-height:138px!important;padding-top:11px!important} :root[data-ui-mode="modern"] .platform-home .game-mark::before{width:105px!important;height:105px!important;border-radius:28px!important} :root[data-ui-mode="modern"] .platform-home .game-mark-image{width:94px!important;height:94px!important;max-width:94px!important;max-height:94px!important} :root[data-ui-mode="modern"] .platform-home .game-copy{padding:4px 9px 10px!important} :root[data-ui-mode="modern"] .platform-home .game-copy>.pill{font-size:7.5px!important;padding:4px 6px!important;min-height:21px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup{margin:6px 0 3px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{font-size:22px!important;letter-spacing:-.6px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup small{font-size:7.5px!important} :root[data-ui-mode="modern"] .platform-home .game-copy>p{min-height:41px!important;margin:3px 0 7px!important;font-size:8.5px!important;line-height:1.5!important;display:-webkit-box!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts>div{padding:4px 2px!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts dt{font-size:6.5px!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts dd{font-size:8px!important} :root[data-ui-mode="modern"] .platform-home [data-game-action="play"]{min-height:39px!important;font-size:10px!important} :root[data-ui-mode="modern"] .platform-home [data-game-action="rules"]{font-size:7.5px!important;min-height:25px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:6px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid article{min-height:94px!important;padding:9px 5px!important} :root[data-ui-mode="modern"] .platform-home .join-panel{grid-template-columns:1fr!important;padding:14px!important;gap:9px!important;text-align:center!important} :root[data-ui-mode="modern"] .platform-home .join-copy h2{font-size:21px!important} } @media(max-width:390px){ :root[data-ui-mode="modern"] .platform-home .home-topbar{width:calc(100% - 10px)!important;margin-top:5px!important} :root[data-ui-mode="modern"] .platform-home .home-hero{width:calc(100% - 12px)!important;padding-top:36px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .eyebrow{font-size:9px!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span:nth-child(3){display:inline-flex!important} :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:1fr!important;max-width:330px!important;gap:11px!important} :root[data-ui-mode="modern"] .platform-home .game-card{min-height:370px!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:145px!important;min-height:145px!important} :root[data-ui-mode="modern"] .platform-home .game-copy>p{display:block!important;min-height:0!important;font-size:9.5px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{grid-template-columns:1fr 1fr!important} :root[data-ui-mode="modern"] .platform-home .modern-community-strip{padding-inline:10px!important} } /* Qadha R3 — board -> question is immediate: no animated interstitial. */ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid [data-slot].opening{ animation:none!important;opacity:1!important;cursor:progress!important;transform:none!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-instant-preview .qadha-instant-content{ min-height:0!important;display:grid!important;place-items:center!important;padding:clamp(18px,4vw,50px)!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-instant-preview .question-text{ font-size:clamp(28px,4.6vw,66px)!important;line-height:1.55!important;text-align:center!important;font-weight:900!important } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-instant-order-items{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-instant-order-items span{ padding:10px 14px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.04);font-weight:850 } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-instant-special{ text-align:center;display:grid;justify-items:center;gap:8px;color:#eee7f3 } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-instant-special-icon{ width:82px;height:82px;display:grid;place-items:center;border-radius:25px;background:rgba(246,196,86,.09);border:1px solid rgba(246,196,86,.24);color:#f5c65d;font-size:38px } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-instant-special h2{margin:4px 0 0;font-size:clamp(28px,4vw,50px)} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-instant-special p{margin:0;color:#b9aec0;max-width:560px;line-height:1.7} /* ===== R5 VISUAL LOCK — approved 2026-09-05 modern platform direction ===== */ :root[data-ui-mode="modern"] .platform-home{ background: radial-gradient(ellipse at 12% 12%,rgba(121,43,193,.18),transparent 30%), radial-gradient(ellipse at 88% 18%,rgba(93,43,174,.16),transparent 32%), radial-gradient(ellipse at 50% 56%,rgba(89,29,153,.10),transparent 38%), linear-gradient(180deg,#08040f 0%,#0d0616 38%,#090510 100%)!important; } :root[data-ui-mode="modern"] .platform-home::before{ content:"";position:fixed;inset:72px 0 auto;height:510px;pointer-events:none;z-index:-1; background: linear-gradient(90deg,rgba(128,49,207,.10),transparent 22%,transparent 78%,rgba(247,182,61,.055)), repeating-linear-gradient(90deg,transparent 0 118px,rgba(255,255,255,.012) 119px 120px); mask-image:linear-gradient(#000,transparent 96%); } :root[data-ui-mode="modern"] .platform-home .home-topbar{ width:100%!important;max-width:none!important;margin:0!important;top:0!important;min-height:72px!important; border-radius:0!important;border:0!important;border-bottom:1px solid rgba(183,120,255,.18)!important; background:rgba(8,4,15,.88)!important;box-shadow:0 12px 34px rgba(0,0,0,.20)!important; padding-inline:clamp(18px,5vw,84px)!important;backdrop-filter:blur(22px) saturate(135%)!important; } :root[data-ui-mode="modern"] .platform-home .home-topbar .brand img{width:150px!important} :root[data-ui-mode="modern"] .platform-home .primary-nav>.nav-link, :root[data-ui-mode="modern"] .platform-home .nav-account, :root[data-ui-mode="modern"] .platform-home .fbrkh-tools-button-inline{font-size:13px!important;font-weight:850!important} :root[data-ui-mode="modern"] .platform-home .home-hero{ width:min(1380px,100%)!important;min-height:330px!important;padding:44px 24px 26px!important;margin:0 auto!important; display:grid!important;grid-template-columns:1fr!important;place-items:center!important;text-align:center!important; } :root[data-ui-mode="modern"] .platform-home .home-hero::before{ inset:0!important;border:0!important;border-radius:0!important;mask-image:none!important; background: radial-gradient(circle at 50% 22%,rgba(148,64,230,.25),transparent 23rem), linear-gradient(90deg,rgba(119,41,185,.075),transparent 25%,transparent 75%,rgba(235,165,49,.045))!important; } :root[data-ui-mode="modern"] .platform-home .home-hero::after{height:100px!important;bottom:0!important;opacity:.72} :root[data-ui-mode="modern"] .platform-home .hero-copy{width:min(980px,100%)!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .eyebrow{display:none!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{width:210px!important;max-height:92px!important;margin:0 0 0!important} :root[data-ui-mode="modern"] .platform-home .home-hero h1{ margin:-4px 0 0!important;font-size:clamp(58px,7vw,96px)!important;letter-spacing:-3.6px!important;line-height:1!important; background:linear-gradient(92deg,#fff 3%,#fff 50%,#d9a3ff 65%,#f5bd4f 90%)!important; -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important; } :root[data-ui-mode="modern"] .platform-home .hero-copy>p{margin:14px auto 0!important;max-width:780px!important;font-size:17px!important;color:#d3c8d9!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges{margin-top:16px!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span{min-height:34px!important;padding:6px 13px!important;background:rgba(255,255,255,.027)!important} :root[data-ui-mode="modern"] .platform-home .hero-actions{display:none!important} :root[data-ui-mode="modern"] .platform-home .home-hero-art{display:none!important} :root[data-ui-mode="modern"] .platform-home .games-section{padding:12px 28px 28px!important;background:transparent!important;border:0!important} :root[data-ui-mode="modern"] .platform-home .games-section>.section-heading{display:none!important} :root[data-ui-mode="modern"] .platform-home .games-grid{width:min(1320px,100%)!important;max-width:1320px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important} :root[data-ui-mode="modern"] .platform-home .game-card{ min-height:490px!important;border-radius:22px!important;border:1px solid rgba(var(--game-accent-rgb),.42)!important; box-shadow:0 22px 52px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035)!important; background:linear-gradient(180deg,rgba(27,14,43,.96),rgba(11,7,19,.99))!important; } :root[data-ui-mode="modern"] .platform-home .game-mark{ height:250px!important;min-height:250px!important;padding:0!important;background-size:cover!important;background-position:center!important; box-shadow:inset 0 -70px 80px rgba(6,3,12,.55)!important; } :root[data-ui-mode="modern"] .platform-home .game-card.brand-fbrkha .game-mark{background-image:linear-gradient(180deg,rgba(12,5,24,.06),rgba(12,5,24,.34)),url('/assets/games/share/fbrkha.png')!important} :root[data-ui-mode="modern"] .platform-home .game-card.brand-qadha .game-mark{background-image:linear-gradient(180deg,rgba(12,5,24,.02),rgba(12,5,24,.34)),url('/assets/games/share/qadha.png')!important} :root[data-ui-mode="modern"] .platform-home .game-card.brand-khaltaha .game-mark{background-image:linear-gradient(180deg,rgba(12,5,24,.04),rgba(12,5,24,.34)),url('/assets/games/share/khaltaha.png')!important} :root[data-ui-mode="modern"] .platform-home .game-card.brand-top10 .game-mark{background-image:linear-gradient(180deg,rgba(12,5,24,.03),rgba(12,5,24,.34)),url('/assets/games/share/top10.png')!important} :root[data-ui-mode="modern"] .platform-home .game-mark::before, :root[data-ui-mode="modern"] .platform-home .game-mark::after, :root[data-ui-mode="modern"] .platform-home .game-mark-image{display:none!important} :root[data-ui-mode="modern"] .platform-home .game-copy{padding:14px 18px 16px!important;display:flex!important;flex:1!important;flex-direction:column!important;align-items:center!important;text-align:center!important} :root[data-ui-mode="modern"] .platform-home .game-copy>.pill{order:0!important;margin:-3px auto 4px!important;background:rgba(var(--game-accent-rgb),.11)!important;border-color:rgba(var(--game-accent-rgb),.24)!important;color:#e7dff0!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{font-size:30px!important;margin-top:2px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup small{font-size:10px!important;color:#b8abbf!important} :root[data-ui-mode="modern"] .platform-home .game-copy>p{min-height:58px!important;margin:8px 0 10px!important;font-size:11px!important;line-height:1.65!important;color:#d0c6d6!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts{width:100%!important;margin:auto 0 10px!important;gap:6px!important} :root[data-ui-mode="modern"] .platform-home .game-quick-facts>div{background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:11px!important} :root[data-ui-mode="modern"] .platform-home .card-actions{width:100%!important;margin-top:auto!important;gap:5px!important} :root[data-ui-mode="modern"] .platform-home [data-game-action="play"]{width:100%!important;min-height:50px!important;border-radius:14px!important;font-size:15px!important;font-weight:950!important} :root[data-ui-mode="modern"] .platform-home [data-game-action="rules"]{font-size:9px!important} :root[data-ui-mode="modern"] .platform-home .why-section{padding:4px 28px 14px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{width:min(1320px,100%)!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;background:rgba(16,9,27,.74)!important;border-color:rgba(169,98,238,.13)!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid article>span{background:radial-gradient(circle at 50% 35%,rgba(175,82,255,.28),rgba(120,47,201,.10))!important;color:#f6c75a!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid h3{font-size:13px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid p{font-size:9px!important} :root[data-ui-mode="modern"] .platform-home .join-section{width:min(1320px,calc(100% - 56px))!important;padding:8px 0 10px!important} :root[data-ui-mode="modern"] .platform-home .join-panel{grid-template-columns:.7fr 1.3fr!important;border-color:rgba(162,87,226,.20)!important;background:linear-gradient(135deg,rgba(37,19,58,.72),rgba(11,7,19,.88))!important} :root[data-ui-mode="modern"] .platform-home .modern-community-strip{width:min(1320px,calc(100% - 56px))!important;margin:8px auto 26px!important} @media(max-width:1120px){ :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:900px!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:235px!important;min-height:235px!important} } @media(max-width:700px){ :root[data-ui-mode="modern"] .platform-home .home-topbar{padding-inline:10px!important;min-height:62px!important} :root[data-ui-mode="modern"] .platform-home .home-hero{min-height:300px!important;padding:30px 12px 20px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{width:150px!important;max-height:66px!important} :root[data-ui-mode="modern"] .platform-home .home-hero h1{font-size:clamp(46px,14vw,70px)!important;letter-spacing:-2.4px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy>p{font-size:13px!important} :root[data-ui-mode="modern"] .platform-home .games-section{padding-inline:10px!important} :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important} :root[data-ui-mode="modern"] .platform-home .game-card{min-height:370px!important;border-radius:18px!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:175px!important;min-height:175px!important} :root[data-ui-mode="modern"] .platform-home .game-copy{padding:9px 8px 10px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{font-size:22px!important} :root[data-ui-mode="modern"] .platform-home .game-copy>p{min-height:42px!important;font-size:8.5px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} :root[data-ui-mode="modern"] .platform-home .join-section, :root[data-ui-mode="modern"] .platform-home .modern-community-strip{width:calc(100% - 20px)!important} } @media(max-width:390px){ :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:1fr!important;max-width:340px!important} :root[data-ui-mode="modern"] .platform-home .game-card{min-height:420px!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:220px!important;min-height:220px!important} } /* R5 card art correction: use clean game lockups, never crop social-share posters. */ :root[data-ui-mode="modern"] .platform-home .game-mark{ background-repeat:no-repeat!important; background-position:center!important; background-size:100% 100%,86% auto!important; } :root[data-ui-mode="modern"] .platform-home .game-card.brand-fbrkha .game-mark{background-image:radial-gradient(circle at 50% 42%,rgba(182,92,255,.20),transparent 62%),url('/assets/games/fbrkha-logo.svg')!important} :root[data-ui-mode="modern"] .platform-home .game-card.brand-qadha .game-mark{background-image:radial-gradient(circle at 50% 42%,rgba(240,170,56,.18),transparent 62%),url('/assets/games/qadha-logo.svg')!important} :root[data-ui-mode="modern"] .platform-home .game-card.brand-khaltaha .game-mark{background-image:radial-gradient(circle at 50% 42%,rgba(50,203,227,.18),transparent 62%),url('/assets/games/khaltaha-logo.svg')!important} :root[data-ui-mode="modern"] .platform-home .game-card.brand-top10 .game-mark{background-image:radial-gradient(circle at 50% 42%,rgba(66,215,143,.16),transparent 62%),url('/assets/games/top10-logo.svg')!important} /* ======================================================================== R6 VISUAL SYSTEM — approved modern direction + host-first readability ======================================================================== */ :root[data-ui-mode="modern"]{ --r6-ink:#080510; --r6-panel:#130a22; --r6-panel-2:#1b0e2e; --r6-line:rgba(255,255,255,.095); --r6-gold:#f6c85f; --r6-purple:#9654ff; --r6-soft:#d9cfe4; } :root[data-ui-mode="modern"] .modern-connection-quiet{display:none!important} /* HOME — actual new composition, not a recolor of classic */ :root[data-ui-mode="modern"] .platform-home{ background: radial-gradient(ellipse at 50% 4%,rgba(117,43,205,.28),transparent 33rem), radial-gradient(ellipse at 8% 22%,rgba(70,30,124,.22),transparent 24rem), radial-gradient(ellipse at 92% 25%,rgba(95,44,128,.19),transparent 25rem), linear-gradient(180deg,#090513 0%,#080511 58%,#05030b 100%)!important; } :root[data-ui-mode="modern"] .platform-home .home-topbar{ width:100%;max-width:none;margin:0;padding:8px max(28px,calc((100vw - 1220px)/2));border-radius:0;min-height:68px; border:0;border-bottom:1px solid rgba(191,118,255,.22);background:rgba(7,4,14,.92)!important;box-shadow:0 8px 28px rgba(0,0,0,.22)!important } :root[data-ui-mode="modern"] .platform-home .brand img{width:132px!important} :root[data-ui-mode="modern"] .platform-home .primary-nav{gap:13px;align-items:center} :root[data-ui-mode="modern"] .platform-home .nav-link, :root[data-ui-mode="modern"] .platform-home .nav-account{padding:10px 14px!important;background:transparent!important;border:0!important;color:#eee6f5!important} :root[data-ui-mode="modern"] .platform-home .nav-link[href="#games"]{color:var(--r6-gold)!important;position:relative} :root[data-ui-mode="modern"] .platform-home .nav-link[href="#games"]::after{content:"";position:absolute;height:2px;left:14px;right:14px;bottom:1px;background:linear-gradient(90deg,transparent,var(--r6-gold),transparent);box-shadow:0 0 10px rgba(246,200,95,.6)} :root[data-ui-mode="modern"] .platform-home .home-hero{ position:relative;width:min(1374px,100%);padding:62px 28px 28px;display:block!important;text-align:center;overflow:hidden;isolation:isolate; background: linear-gradient(90deg,rgba(8,4,15,.2),rgba(8,4,15,.02) 30%,rgba(8,4,15,.02) 70%,rgba(8,4,15,.2)), radial-gradient(ellipse at 50% 15%,rgba(91,34,168,.30),transparent 40%), linear-gradient(180deg,rgba(18,8,33,.45),rgba(8,5,15,.05)); } :root[data-ui-mode="modern"] .platform-home .home-hero::before, :root[data-ui-mode="modern"] .platform-home .home-hero::after{content:"";position:absolute;z-index:-1;bottom:-30px;width:31%;height:78%;border:1px solid rgba(255,255,255,.035);background:linear-gradient(155deg,rgba(64,26,92,.16),rgba(10,6,17,.02));filter:blur(.1px)} :root[data-ui-mode="modern"] .platform-home .home-hero::before{right:-7%;transform:skewX(-8deg)} :root[data-ui-mode="modern"] .platform-home .home-hero::after{left:-7%;transform:skewX(8deg)} :root[data-ui-mode="modern"] .platform-home .hero-copy{max-width:860px;margin:auto;position:relative;z-index:2} :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{width:clamp(185px,20vw,275px)!important;margin-inline:auto;filter:drop-shadow(0 12px 26px rgba(144,76,255,.34))} :root[data-ui-mode="modern"] .platform-home .hero-copy .eyebrow{display:inline-flex;margin-bottom:3px;background:rgba(159,79,255,.08);border-color:rgba(197,129,255,.20);color:#d8a6ff} :root[data-ui-mode="modern"] .platform-home .hero h1{font-size:clamp(52px,6vw,82px)!important;margin:2px 0 10px!important;letter-spacing:-2px!important;background:linear-gradient(95deg,#fff 12%,#fff 48%,#c98aff 70%,#f5c55b 95%);-webkit-background-clip:text;background-clip:text;color:transparent!important} :root[data-ui-mode="modern"] .platform-home .hero h1 span{color:inherit} :root[data-ui-mode="modern"] .platform-home .hero p{max-width:760px;margin:0 auto 17px!important;font-size:clamp(16px,1.4vw,19px)!important;color:#d8cedf!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges{justify-content:center!important;margin:18px auto 0;gap:14px!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span{min-width:190px;padding:10px 15px;border-radius:999px;background:rgba(29,14,49,.72);border:1px solid rgba(199,130,255,.2);font-size:.83rem;color:#eee7f4} :root[data-ui-mode="modern"] .platform-home .hero-actions{justify-content:center;margin-top:18px!important} :root[data-ui-mode="modern"] .platform-home .hero-primary{min-width:210px!important;background:linear-gradient(135deg,#f8d277,#f3b43c)!important;color:#211205!important} :root[data-ui-mode="modern"] .platform-home .home-hero-art{display:none!important} :root[data-ui-mode="modern"] .platform-home .modern-wall-note{position:absolute;top:86px;font-weight:700;line-height:1.6;color:#d67cff;text-shadow:0 0 18px rgba(198,86,255,.34);transform:rotate(-4deg);opacity:.85;font-size:clamp(15px,1.5vw,21px);pointer-events:none} :root[data-ui-mode="modern"] .platform-home .modern-wall-note-right{right:-155px;transform:rotate(2deg)} :root[data-ui-mode="modern"] .platform-home .modern-wall-note-left{left:-135px;transform:rotate(-5deg)} :root[data-ui-mode="modern"] .platform-home .games-section{padding:22px 28px 42px!important} :root[data-ui-mode="modern"] .platform-home .games-section .section-heading{display:none!important} :root[data-ui-mode="modern"] .platform-home .games-grid{width:min(1260px,100%);margin:auto;gap:14px!important;direction:ltr} :root[data-ui-mode="modern"] .platform-home .game-card{direction:rtl;min-height:0!important;border-radius:20px!important;background:#11091e!important;border:1px solid color-mix(in srgb,var(--game-accent) 68%,rgba(255,255,255,.14))!important;box-shadow:0 18px 50px rgba(0,0,0,.30)!important;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} @media (hover:hover) and (pointer:fine){:root[data-ui-mode="modern"] .platform-home .game-card:hover{transform:translateY(-6px);box-shadow:0 26px 70px rgba(0,0,0,.38),0 0 28px color-mix(in srgb,var(--game-accent) 13%,transparent)!important}} :root[data-ui-mode="modern"] .platform-home .game-card::before{height:2px!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:255px!important;background:#0b0712!important;overflow:hidden!important;position:relative} :root[data-ui-mode="modern"] .platform-home .game-mark .modern-game-art{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 46%!important;filter:saturate(1.05) contrast(1.02)} :root[data-ui-mode="modern"] .platform-home .game-mark .game-mark-image{display:none!important} :root[data-ui-mode="modern"] .platform-home .game-copy{padding:16px 17px 17px!important;display:grid;gap:9px!important;align-content:start} :root[data-ui-mode="modern"] .platform-home .game-copy .pill{justify-self:start;background:color-mix(in srgb,var(--game-accent) 12%,rgba(255,255,255,.035));border-color:color-mix(in srgb,var(--game-accent) 35%,transparent);color:#f1eaf5;font-size:.72rem} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{font-size:1.45rem!important;margin:0!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup small{color:#c8bcd0!important;font-size:.74rem} :root[data-ui-mode="modern"] .platform-home .game-copy>p{font-size:.84rem!important;line-height:1.7!important;color:#d0c6d7!important;min-height:58px} :root[data-ui-mode="modern"] .platform-home .game-quick-facts{display:none!important} :root[data-ui-mode="modern"] .platform-home .card-actions{margin-top:4px!important} :root[data-ui-mode="modern"] .platform-home .card-actions .btn{width:100%;min-height:50px;font-size:.93rem} :root[data-ui-mode="modern"] .platform-home .card-actions .text-link{display:none!important} :root[data-ui-mode="modern"] .platform-home .join-section{margin-top:16px!important} :root[data-ui-mode="modern"] .platform-home .join-panel{background:linear-gradient(135deg,rgba(54,22,86,.70),rgba(15,8,27,.92))!important;border-color:rgba(194,117,255,.18)!important} :root[data-ui-mode="modern"] .platform-home .steps-section{display:none!important} :root[data-ui-mode="modern"] .platform-home .why-section{padding-top:28px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{grid-template-columns:repeat(5,1fr)!important;gap:0!important;padding:20px 12px!important;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(16,8,28,.72)} :root[data-ui-mode="modern"] .platform-home .benefits-grid article{background:transparent!important;border:0!important;border-inline-start:1px solid rgba(255,255,255,.07)!important;border-radius:0!important;min-height:130px} :root[data-ui-mode="modern"] .platform-home .benefits-grid article:last-child{border-inline-start:0!important} /* FBRKHA — host lobby and live screen */ :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active{background:radial-gradient(circle at 22% 0,rgba(142,59,239,.22),transparent 28rem),linear-gradient(150deg,#16092a,#070510 65%)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .game-hud{width:min(1320px,calc(100% - 24px))!important;margin:10px auto 0!important;min-height:58px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:18px!important;background:rgba(13,7,24,.86)!important;box-shadow:0 12px 30px rgba(0,0,0,.20)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-hero{text-align:center;padding:10px 12px 16px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-hero h1{font-size:clamp(34px,4vw,58px)!important;margin:0!important;background:linear-gradient(100deg,#fff,#d296ff 65%,#f3c55a);-webkit-background-clip:text;background-clip:text;color:transparent} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-layout{width:min(1180px,100%);margin:0 auto!important;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr)!important;gap:18px!important;align-items:stretch!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-join-card, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-panel{border-radius:26px!important;border:1px solid rgba(255,255,255,.09)!important;background:linear-gradient(155deg,rgba(31,15,52,.96),rgba(10,7,19,.98))!important;box-shadow:0 20px 55px rgba(0,0,0,.25)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-join-card{display:grid!important;place-items:center!important;align-content:center!important;padding:20px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-qr{width:min(260px,70%)!important;aspect-ratio:1!important;padding:12px!important;border-radius:24px!important;background:#fff!important;border:4px solid rgba(246,200,95,.7)!important;box-shadow:0 12px 42px rgba(0,0,0,.3),0 0 30px rgba(246,200,95,.10)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-qr img{width:100%!important;height:100%!important;object-fit:contain!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .room-code{font-size:clamp(38px,5vw,64px)!important;letter-spacing:.12em!important;color:var(--r6-gold)!important;text-shadow:0 0 20px rgba(246,200,95,.18)} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .players-title{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .player-chip{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:15px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-ready-status.ready{background:rgba(66,223,155,.10)!important;color:#8ff3c7!important;border-color:rgba(66,223,155,.22)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-start{min-height:58px!important;font-size:1.15rem!important;margin-top:12px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .question-stage, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-voting-question{width:min(1120px,calc(100% - 36px))!important;min-height:280px!important;margin:22px auto 12px!important;padding:34px 34px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:14px!important;border:1px solid rgba(189,121,255,.20)!important;border-radius:32px!important;background:radial-gradient(circle at 25% 18%,rgba(140,57,230,.22),transparent 34%),linear-gradient(150deg,rgba(34,16,57,.96),rgba(9,6,18,.98))!important;box-shadow:0 25px 65px rgba(0,0,0,.28)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .question-stage::before{opacity:.16!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .question-stage h1, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-voting-question h1{font-size:clamp(34px,4vw,58px)!important;line-height:1.42!important;max-width:980px!important;text-align:center!important;margin:0!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .stage-kicker{padding:7px 14px;border-radius:999px;background:rgba(246,200,95,.09);border:1px solid rgba(246,200,95,.22);color:#f6d477!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .stage-players{width:min(1120px,calc(100% - 36px))!important;margin:0 auto calc(var(--fbrkha-host-toolbar-reserve) + 12px)!important;border-radius:22px!important;background:rgba(13,7,24,.76)!important;border:1px solid rgba(255,255,255,.075)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-tools-panel.always-visible{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(1080px,calc(100% - 24px))!important;bottom:10px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:20px!important;background:rgba(18,9,32,.94)!important;box-shadow:0 18px 48px rgba(0,0,0,.38)!important;backdrop-filter:blur(18px)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-toolbar{justify-content:center!important;gap:8px!important;padding:8px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-toolbar .btn{min-height:42px!important;padding:8px 13px!important;border-radius:12px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active #toolStartBtn{min-width:200px!important;background:linear-gradient(135deg,#f8d475,#f2af36)!important;color:#241204!important;font-size:1rem!important} /* KHALTAHA — cleaner host stage, no broken-looking chrome */ :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-top{min-height:68px!important;padding:8px 22px!important;background:rgba(6,11,17,.91)!important;border-bottom:1px solid rgba(71,222,235,.16)!important;box-shadow:0 10px 32px rgba(0,0,0,.22)!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-site-home img{width:112px!important;height:44px!important;object-fit:contain!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-game-title{display:flex!important;align-items:center!important;justify-content:center!important;min-width:180px!important;min-height:44px!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-game-title img{max-width:160px!important;max-height:48px!important;object-fit:contain!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] #connection{font-size:.78rem!important;padding:7px 11px!important;border-radius:999px!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] #kApp{width:min(1360px,calc(100% - 28px));margin:20px auto!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.kh-card,.k-card,.setup-card,.panel,.game-panel,.center-card){box-shadow:0 18px 46px rgba(0,0,0,.22)!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.question-card,.prompt-card,.round-question,.results-question){border-radius:26px!important;background:linear-gradient(135deg,rgba(54,24,77,.76),rgba(12,20,31,.90))!important;border:1px solid rgba(246,200,95,.20)!important} /* TOP10 — host-first dense layout without crowding */ :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-nav{min-height:68px!important;border-radius:0!important;padding:8px max(22px,calc((100vw - 1240px)/2))!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-brand img{width:116px!important;height:44px!important;object-fit:contain!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-shell{width:min(1240px,calc(100% - 28px))!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .game-view{padding-bottom:90px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .game-topline{gap:10px!important;margin-top:12px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .game-topline>*{min-height:54px!important;border-radius:16px!important;background:rgba(13,30,22,.78)!important;border:1px solid rgba(80,222,144,.12)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .question-panel{padding:18px 28px!important;margin:10px 0 14px!important;min-height:96px!important;display:grid!important;place-items:center!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .question-panel h1{font-size:clamp(30px,3.6vw,50px)!important;line-height:1.35!important;text-align:center!important;margin:0!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .cards-board{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] :is(.answer-card,.top10-card){min-height:104px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .teams-strip{margin-top:12px!important;gap:8px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .turn-panel{min-height:60px!important;padding:8px 14px!important;margin-top:8px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-bar{margin-top:8px!important;padding:0!important;background:transparent!important;border:0!important;gap:8px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-bar input{min-height:56px!important;border-radius:16px!important;background:#070b09!important;border:1px solid rgba(246,200,95,.35)!important;font-size:1rem!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-bar button{min-width:150px!important;min-height:56px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-host-toolbar{position:fixed!important;z-index:45;left:50%;bottom:10px;transform:translateX(-50%);width:min(920px,calc(100% - 24px));display:flex!important;justify-content:center!important;gap:7px!important;padding:8px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:18px!important;background:rgba(8,9,14,.94)!important;box-shadow:0 18px 48px rgba(0,0,0,.40)!important;backdrop-filter:blur(16px)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-host-toolbar .text-action{min-height:40px!important;padding:7px 11px!important;border-radius:11px!important;font-size:.78rem!important;white-space:nowrap} /* QADHA — match approved board proportions */ :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-board{min-height:100svh!important;max-height:100svh!important;overflow:hidden!important;grid-template-rows:96px minmax(0,1fr) 128px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-toolbar{min-height:96px!important;height:96px!important;padding:7px 18px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-brand strong{font-size:clamp(38px,4vw,56px)!important;line-height:1!important;padding-top:2px} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-board-slogan{font-size:clamp(12px,1vw,15px)!important;margin-top:2px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-grid{gap:10px!important;padding:10px 16px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel{padding:7px!important;gap:7px!important;border-radius:20px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat{min-height:68px!important;grid-template-columns:42px minmax(0,1fr)!important;padding:6px 8px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .board-category-panel .board-cat-art{height:42px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot{min-height:0!important;border-radius:13px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .qadha-reference-grid .slot span{font-size:clamp(23px,2vw,32px)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-footer{height:128px!important;grid-template-columns:minmax(300px,1fr) minmax(190px,.46fr) minmax(300px,1fr)!important;gap:14px!important;padding:8px 16px 10px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box{height:108px!important;padding:8px 12px!important;border-radius:20px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .team-name-button strong{font-size:clamp(17px,1.5vw,23px)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-score-control output{font-size:clamp(28px,2.2vw,36px)!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-turn-arrow{height:78px!important;align-self:center!important} /* MOBILE — genuine reflow */ @media (max-width:760px){ :root[data-ui-mode="modern"] .platform-home .home-topbar{padding:7px 12px!important;min-height:62px} :root[data-ui-mode="modern"] .platform-home .home-hero{padding:42px 16px 20px!important} :root[data-ui-mode="modern"] .platform-home .modern-wall-note{display:none!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{width:165px!important} :root[data-ui-mode="modern"] .platform-home .hero h1{font-size:clamp(42px,13vw,62px)!important;letter-spacing:-1px!important} :root[data-ui-mode="modern"] .platform-home .hero p{font-size:.9rem!important;line-height:1.75!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges{display:flex!important;overflow-x:auto;justify-content:flex-start!important;padding:2px 2px 7px;margin-inline:-4px!important;scrollbar-width:none} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span{min-width:max-content!important;padding:8px 12px!important} :root[data-ui-mode="modern"] .platform-home .games-section{padding:16px 14px 28px!important} :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:1fr!important;gap:14px!important} :root[data-ui-mode="modern"] .platform-home .game-card{display:grid!important;grid-template-columns:42% minmax(0,1fr)!important;min-height:210px!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:100%!important;min-height:210px!important} :root[data-ui-mode="modern"] .platform-home .game-copy{padding:13px 12px!important;gap:5px!important} :root[data-ui-mode="modern"] .platform-home .game-title-lockup h3{font-size:1.25rem!important} :root[data-ui-mode="modern"] .platform-home .game-copy>p{font-size:.77rem!important;line-height:1.55!important;min-height:0!important} :root[data-ui-mode="modern"] .platform-home .card-actions .btn{min-height:44px!important;font-size:.84rem!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid{grid-template-columns:1fr 1fr!important;padding:8px!important} :root[data-ui-mode="modern"] .platform-home .benefits-grid article{min-height:112px!important;border-inline-start:0!important;border-bottom:1px solid rgba(255,255,255,.06)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-layout{grid-template-columns:1fr!important;gap:12px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-qr{width:min(220px,62vw)!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .question-stage, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-voting-question{width:calc(100% - 20px)!important;min-height:220px!important;margin:10px auto!important;padding:22px 15px!important;border-radius:22px!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .question-stage h1, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-voting-question h1{font-size:clamp(25px,7vw,34px)!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .cards-board{grid-template-columns:repeat(2,minmax(0,1fr))!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] :is(.answer-card,.top10-card){min-height:92px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-host-toolbar{position:sticky!important;transform:none!important;left:auto!important;bottom:0!important;width:100%!important;overflow-x:auto!important;justify-content:flex-start!important;border-radius:15px!important;margin-top:8px!important} :root[data-ui-mode="modern"] body[data-game-brand="top10"] .game-view{padding-bottom:0!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-qadha-board{max-height:none!important;min-height:100svh!important;overflow:auto!important;grid-template-rows:auto auto auto!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:10px!important;gap:8px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-board-footer{height:auto!important;grid-template-columns:1fr!important;grid-template-areas:"first" "turn" "second"!important;padding:8px 10px 14px!important} :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .premium-team-box{height:auto!important;min-height:96px!important} } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .app-shell{width:min(1680px,calc(100% - 24px))!important;max-width:none!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .question-stage, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-voting-question, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .stage-players{width:min(1540px,calc(100% - 40px))!important;max-width:none!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .lobby-layout{width:min(1540px,calc(100% - 40px))!important;max-width:none!important} :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .app-shell{width:min(1740px,calc(100% - 24px))!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-site-home img, :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-game-title img{display:none!important} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-site-home::after{content:"فبركة";display:block;color:#f5c75f;font-weight:950;font-size:1.15rem;letter-spacing:-.02em} :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-game-title::after{content:"خلّطها";display:block;background:linear-gradient(100deg,#fff,#58e4ef 58%,#9c62ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:950;font-size:1.55rem;letter-spacing:-.04em} @media (max-width:760px){ :root[data-ui-mode="modern"] .platform-home .game-card{display:flex!important;flex-direction:column!important;min-height:0!important} :root[data-ui-mode="modern"] .platform-home .game-mark{height:205px!important;min-height:205px!important} :root[data-ui-mode="modern"] .platform-home .game-copy{padding:14px 15px 15px!important} } /* R6 final host-side visual polish — keep live controls in-flow and use the host viewport fully. */ @media (min-width:761px){ :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .question-stage, :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-voting-question{ min-height:clamp(310px,42vh,380px)!important; margin-top:16px!important; margin-bottom:10px!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .stage-players{ min-height:66px!important; padding:8px 12px!important; } :root[data-ui-mode="modern"] body[data-game-brand="top10"].top10-live .game-view.live-no-scroll{ grid-template-rows:auto auto minmax(0,1fr) auto auto auto!important; gap:6px!important; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .live-no-scroll .cards-board{ min-height:0!important; height:100%!important; overflow:hidden!important; margin:0 auto!important; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .live-no-scroll .cards-board .answer-card{ min-height:0!important; height:100%!important; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .live-no-scroll .teams-strip{ min-height:52px!important; margin-top:0!important; position:relative; z-index:2; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .live-no-scroll .team-score-card{ min-height:50px!important; padding:6px 10px!important; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .live-no-scroll .turn-panel{ min-height:54px!important; margin-top:0!important; position:relative; z-index:2; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .live-no-scroll .answer-bar{ min-height:50px!important; margin-top:0!important; position:relative; z-index:2; } :root[data-ui-mode="modern"] body[data-game-brand="top10"] .live-no-scroll .answer-bar input, :root[data-ui-mode="modern"] body[data-game-brand="top10"] .live-no-scroll .answer-bar button{ min-height:50px!important; } :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .modern-turn-arrow{ z-index:3!important; overflow:visible!important; } } /* R6 toolbar positioning fix: logical inset from classic CSS must not push controls off-screen in RTL. */ :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-host-toolbar{ inset-inline:auto!important; left:50%!important; right:auto!important; transform:translateX(-50%)!important; } @media (max-width:760px){ :root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-host-toolbar{ inset-inline:auto!important; left:auto!important; right:auto!important; transform:none!important; } } /* R6 Fbrkha fixed host toolbar: clear classic logical insets so RTL never pushes controls off-screen. */ :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-tools-panel.always-visible{ inset-inline:auto!important; left:50%!important; right:auto!important; transform:translateX(-50%)!important; } @media (max-width:760px){ :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-tools-panel.always-visible{ inset-inline:6px!important; left:auto!important; right:auto!important; transform:none!important; width:auto!important; bottom:max(6px,env(safe-area-inset-bottom))!important; } } /* R8 home hero legibility — keep the approved headline complete and crisp. */ :root[data-ui-mode="modern"] .platform-home .hero h1{ display:block!important; width:max-content!important; max-width:100%!important; margin:4px auto 10px!important; padding:.06em .08em .14em!important; overflow:visible!important; white-space:nowrap!important; background:none!important; -webkit-text-fill-color:currentColor!important; color:#fff!important; font-weight:950!important; line-height:1.18!important; letter-spacing:0!important; text-shadow:0 8px 28px rgba(0,0,0,.32)!important; } :root[data-ui-mode="modern"] .platform-home .hero h1 span{ display:inline!important; color:#f6c85f!important; -webkit-text-fill-color:#f6c85f!important; text-shadow:0 0 24px rgba(246,200,95,.20)!important; } @media (max-width:760px){ :root[data-ui-mode="modern"] .platform-home .hero h1{ font-size:clamp(38px,11.4vw,54px)!important; line-height:1.22!important; padding-inline:0!important; } :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{ margin-bottom:4px!important; } } @media (max-width:360px){ :root[data-ui-mode="modern"] .platform-home .hero h1{font-size:clamp(34px,10.8vw,44px)!important} } /* R8 medium host viewport: keep Fbrkha controls in normal flow so participants never sit behind them. */ @media (min-width:761px) and (max-width:1199px){ :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .host-tools-panel.always-visible{ position:sticky!important; inset:auto!important; left:auto!important; right:auto!important; bottom:8px!important; transform:none!important; width:min(1040px,calc(100% - 24px))!important; margin:12px auto 8px!important; } :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"].game-active .stage-players{ margin-bottom:10px!important; } } /* ===== R9 FINAL HOME HERO — deterministic, cache-safe, no fragile side notes ===== */ :root[data-ui-mode="modern"] .platform-home .modern-wall-note{display:none!important} :root[data-ui-mode="modern"] .platform-home .home-hero{ width:min(1240px,calc(100% - 28px))!important; min-height:500px!important; padding:56px 20px 44px!important; margin:0 auto!important; display:grid!important; grid-template-columns:1fr!important; place-items:center!important; text-align:center!important; overflow:visible!important; position:relative!important; } :root[data-ui-mode="modern"] .platform-home .home-hero::before{ inset:24px 0 8px!important; border-radius:42px!important; background: radial-gradient(circle at 50% 30%,rgba(143,67,247,.22),transparent 29rem), linear-gradient(90deg,rgba(128,52,214,.055),transparent 28%,transparent 72%,rgba(246,190,78,.04)), linear-gradient(180deg,rgba(255,255,255,.016),rgba(255,255,255,.003))!important; border:1px solid rgba(255,255,255,.04)!important; mask-image:linear-gradient(to bottom,#000 84%,transparent)!important; } :root[data-ui-mode="modern"] .platform-home .hero-copy{ width:min(940px,100%)!important; max-width:940px!important; min-width:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; overflow:visible!important; } :root[data-ui-mode="modern"] .platform-home .hero-copy .eyebrow{ margin:0 0 10px!important; min-height:34px!important; padding:6px 13px!important; font-size:11px!important; } :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{ display:block!important; width:clamp(145px,17vw,205px)!important; max-width:44vw!important; height:auto!important; max-height:88px!important; margin:0 auto 10px!important; object-fit:contain!important; object-position:center!important; } :root[data-ui-mode="modern"] .platform-home .home-hero h1, :root[data-ui-mode="modern"] .platform-home .hero h1{ display:block!important; width:auto!important; max-width:100%!important; margin:0 auto!important; padding:.05em .04em .18em!important; overflow:visible!important; white-space:nowrap!important; text-wrap:nowrap!important; font-size:clamp(50px,6.2vw,82px)!important; line-height:1.13!important; letter-spacing:-1.8px!important; font-weight:950!important; background:none!important; color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:0 9px 30px rgba(0,0,0,.34)!important; } :root[data-ui-mode="modern"] .platform-home .home-hero h1 span, :root[data-ui-mode="modern"] .platform-home .hero h1 span{ color:#f6c85f!important; -webkit-text-fill-color:#f6c85f!important; text-shadow:0 0 24px rgba(246,200,95,.18)!important; } :root[data-ui-mode="modern"] .platform-home .hero-copy>p{ max-width:760px!important; margin:14px auto 0!important; padding:0 8px!important; color:#cfc4d6!important; font-size:clamp(14px,1.35vw,18px)!important; line-height:1.85!important; text-wrap:balance!important; } :root[data-ui-mode="modern"] .platform-home .modern-hero-badges{ display:flex!important; justify-content:center!important; align-items:center!important; flex-wrap:wrap!important; gap:8px!important; margin:17px auto 0!important; overflow:visible!important; } :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span{ min-width:0!important; min-height:34px!important; padding:6px 12px!important; font-size:10.5px!important; white-space:nowrap!important; } :root[data-ui-mode="modern"] .platform-home .hero-actions{margin-top:18px!important} :root[data-ui-mode="modern"] .platform-home .hero-primary{min-height:48px!important;min-width:170px!important} :root[data-ui-mode="modern"] .platform-home .home-hero-art{display:none!important} /* Medium host/browser widths: never let the hero imitate a broken mobile stack. */ @media (min-width:761px) and (max-width:1180px){ :root[data-ui-mode="modern"] .platform-home .home-hero{min-height:450px!important;padding:48px 18px 38px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy{width:min(820px,100%)!important} :root[data-ui-mode="modern"] .platform-home .home-hero h1, :root[data-ui-mode="modern"] .platform-home .hero h1{font-size:clamp(52px,6.6vw,72px)!important;letter-spacing:-1.2px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{width:165px!important;max-height:72px!important} } @media (max-width:760px){ :root[data-ui-mode="modern"] .platform-home .home-hero{width:calc(100% - 14px)!important;min-height:0!important;padding:34px 12px 28px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy{width:100%!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .eyebrow{font-size:9.5px!important;min-height:30px!important;margin-bottom:8px!important} :root[data-ui-mode="modern"] .platform-home .hero-copy .brand-logo{width:142px!important;max-width:46vw!important;max-height:62px!important;margin-bottom:8px!important} :root[data-ui-mode="modern"] .platform-home .home-hero h1, :root[data-ui-mode="modern"] .platform-home .hero h1{font-size:clamp(39px,11.4vw,54px)!important;line-height:1.15!important;letter-spacing:-.7px!important;padding-bottom:.16em!important} :root[data-ui-mode="modern"] .platform-home .hero-copy>p{font-size:13px!important;line-height:1.7!important;margin-top:10px!important;padding-inline:4px!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges{justify-content:center!important;overflow:visible!important;gap:6px!important;margin-top:13px!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span{min-width:0!important;padding:6px 8px!important;font-size:9px!important} :root[data-ui-mode="modern"] .platform-home .hero-actions{margin-top:14px!important;width:100%!important;justify-content:center!important} :root[data-ui-mode="modern"] .platform-home .hero-primary{width:min(230px,100%)!important} } @media (max-width:360px){ :root[data-ui-mode="modern"] .platform-home .home-hero h1, :root[data-ui-mode="modern"] .platform-home .hero h1{font-size:36px!important;letter-spacing:-.4px!important} :root[data-ui-mode="modern"] .platform-home .modern-hero-badges span{font-size:8.4px!important;padding-inline:7px!important} }