/* Fbrkh modern UI final layer — v3.2.51-r13
   Shared finishing pass for the platform and all active games.
   Every rule is scoped to the modern UI so “فبركة الكلاسيكي” remains intact. */

:root[data-ui-mode="modern"]{
  --fbrkh-page-pad:clamp(14px,2.6vw,32px);
  --fbrkh-section-gap:clamp(20px,4vw,48px);
  --fbrkh-card-radius:clamp(20px,2.4vw,30px);
  --fbrkh-control-radius:16px;
  --fbrkh-touch:48px;
  --fbrkh-content:1180px;
  --fbrkh-reading:760px;
  --fbrkh-glass:color-mix(in srgb,var(--surface,#211333) 86%,transparent);
  --fbrkh-soft-border:color-mix(in srgb,var(--border,rgba(255,255,255,.16)) 82%,transparent);
  --fbrkh-focus:#ffe27a;
  --fbrkh-shadow:0 20px 55px rgba(7,3,18,.24);
  color-scheme:dark;
}
:root[data-ui-mode="modern"][data-theme="light"]{color-scheme:light;--fbrkh-shadow:0 18px 46px rgba(35,47,68,.12)}

:root[data-ui-mode="modern"] *,
:root[data-ui-mode="modern"] *::before,
:root[data-ui-mode="modern"] *::after{box-sizing:border-box}
:root[data-ui-mode="modern"] html{scroll-behavior:smooth}
:root[data-ui-mode="modern"] body{min-width:0;min-height:100dvh;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
:root[data-ui-mode="modern"] img,
:root[data-ui-mode="modern"] svg,
:root[data-ui-mode="modern"] video,
:root[data-ui-mode="modern"] canvas{max-width:100%}
:root[data-ui-mode="modern"] :where(h1,h2,h3){text-wrap:balance}
:root[data-ui-mode="modern"] :where(p,small,label,li){text-wrap:pretty}
:root[data-ui-mode="modern"] :where(button,a,input,textarea,select,[role="button"]){-webkit-tap-highlight-color:transparent}
:root[data-ui-mode="modern"] :where(button,a,[role="button"]):not([disabled]){cursor:pointer}
:root[data-ui-mode="modern"] :where(button,a,input,textarea,select,[tabindex]):focus-visible{outline:3px solid var(--fbrkh-focus)!important;outline-offset:3px!important}
:root[data-ui-mode="modern"] :where(button,input,select,textarea){font:inherit}
:root[data-ui-mode="modern"] :where(input,select,textarea){max-width:100%;border-radius:var(--fbrkh-control-radius)}
:root[data-ui-mode="modern"] :where(.btn,.k-btn,.q-btn,.t10-btn,.home-action,.icon-action,.text-action,.pill-btn){min-height:var(--fbrkh-touch)}
:root[data-ui-mode="modern"] :where(.hidden,[hidden]){display:none!important}

/* Shared shells and surfaces */
:root[data-ui-mode="modern"] :where(.app-shell,.home-shell,.t10-shell,#qApp,#kApp){min-width:0}
:root[data-ui-mode="modern"] :where(.card,.section-card,.setup-card,.center-card,.q-card,.q-panel,.k-card,.join-card,.modal-card,.q-modal-card,.game-settings-modal,.resume-card){border-radius:var(--fbrkh-card-radius);border-color:var(--fbrkh-soft-border);box-shadow:var(--fbrkh-shadow)}
:root[data-ui-mode="modern"] :where(.modal,.q-modal,.fbrkh-profile-modal,[class*="modal-backdrop"]){overscroll-behavior:contain}
:root[data-ui-mode="modern"] :where(.toast,.q-toast,#kToast,#toast){max-width:min(92vw,560px);overflow-wrap:anywhere}
:root[data-ui-mode="modern"] :where(.connection-banner,.game-status-surface){max-width:100%;overflow-wrap:anywhere}

/* Navigation: stable, touch-friendly and safe-area aware. */
:root[data-ui-mode="modern"] :where(.topbar,.home-topbar,.q-nav,.k-top,.t10-nav){padding-top:max(10px,env(safe-area-inset-top));padding-inline:max(var(--fbrkh-page-pad),env(safe-area-inset-left)) max(var(--fbrkh-page-pad),env(safe-area-inset-right));min-height:68px}
:root[data-ui-mode="modern"] :where(.topbar,.home-topbar,.q-nav,.k-top,.t10-nav){backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
:root[data-ui-mode="modern"] :where(.primary-nav,.t10-nav-actions,.q-nav nav){align-items:center}
:root[data-ui-mode="modern"] :where(.nav-link,.nav-account,.nav-home,.q-nav nav>a,.q-nav nav>button){min-height:44px;display:inline-flex;align-items:center;justify-content:center}
:root[data-ui-mode="modern"] .fbrkh-tools-button-inline{flex:0 0 auto}

/* Main platform home */
:root[data-ui-mode="modern"] .platform-home main{width:min(100%,calc(var(--fbrkh-content) + (var(--fbrkh-page-pad) * 2)));margin-inline:auto;padding-inline:var(--fbrkh-page-pad);padding-bottom:max(42px,env(safe-area-inset-bottom))}
:root[data-ui-mode="modern"] .platform-home .home-hero{min-height:min(720px,calc(100svh - 78px));display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:center;gap:clamp(28px,5vw,72px);padding-block:clamp(34px,7vw,88px)}
:root[data-ui-mode="modern"] .platform-home .hero-copy{min-width:0}
:root[data-ui-mode="modern"] .platform-home .hero-copy>p{max-width:680px;line-height:1.8}
:root[data-ui-mode="modern"] .platform-home .hero-actions{display:flex;flex-wrap:wrap;gap:10px}
:root[data-ui-mode="modern"] .platform-home .hero-primary{min-width:160px}
:root[data-ui-mode="modern"] .platform-home .modern-hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-block:18px}
:root[data-ui-mode="modern"] .platform-home .modern-hero-badges>span{display:inline-flex;align-items:center;min-height:38px;padding:7px 12px;border:1px solid var(--fbrkh-soft-border);border-radius:999px;background:color-mix(in srgb,var(--surface,#211333) 72%,transparent)}
:root[data-ui-mode="modern"] .platform-home .hero-art{min-width:0;isolation:isolate}
:root[data-ui-mode="modern"] .platform-home .home-section,
:root[data-ui-mode="modern"] .platform-home .home-shell{scroll-margin-top:90px}
:root[data-ui-mode="modern"] .platform-home .join-section{margin-block:clamp(8px,2vw,20px) var(--fbrkh-section-gap)}
:root[data-ui-mode="modern"] .platform-home .join-panel{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(320px,1.3fr);gap:clamp(18px,4vw,52px);align-items:center;padding:clamp(20px,3.2vw,38px)}
:root[data-ui-mode="modern"] .platform-home .join-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
:root[data-ui-mode="modern"] .platform-home #joinCodeInput{min-height:54px;font-size:clamp(1rem,2vw,1.18rem);letter-spacing:.08em}
:root[data-ui-mode="modern"] .platform-home .games-section{padding-block:var(--fbrkh-section-gap)}
:root[data-ui-mode="modern"] .platform-home .section-heading{max-width:780px;margin-inline:auto;text-align:center;margin-bottom:clamp(22px,4vw,44px)}
:root[data-ui-mode="modern"] .platform-home .games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.5vw,26px)}
:root[data-ui-mode="modern"] .platform-home .game-card{min-width:0;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
:root[data-ui-mode="modern"] .platform-home .game-card:hover{transform:translateY(-4px)}
:root[data-ui-mode="modern"] .platform-home .game-card:focus-within{border-color:color-mix(in srgb,var(--fbrkh-focus) 62%,var(--fbrkh-soft-border))}
:root[data-ui-mode="modern"] .platform-home .game-copy{min-width:0}
:root[data-ui-mode="modern"] .platform-home .game-copy p{line-height:1.75}
:root[data-ui-mode="modern"] .platform-home .game-quick-facts{display:flex;flex-wrap:wrap;gap:8px}
:root[data-ui-mode="modern"] .platform-home .game-quick-facts>div{min-width:100px}
:root[data-ui-mode="modern"] .platform-home .card-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
:root[data-ui-mode="modern"] .platform-home .resume-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}

/* Fbrkha entry and generic room screens */
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .app-shell{width:min(100%,calc(1040px + (var(--fbrkh-page-pad) * 2)));margin-inline:auto;padding-inline:var(--fbrkh-page-pad)}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .public-screen{padding-top:clamp(20px,5vw,56px);padding-bottom:max(28px,env(safe-area-inset-bottom))}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-hero{text-align:center;margin-inline:auto;max-width:780px}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .logo-hero img{max-height:clamp(100px,20vw,190px);width:auto}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-subtitle{max-width:620px;margin-inline:auto;line-height:1.75}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block:clamp(24px,4vw,38px)}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action{text-align:start;align-items:center;min-width:0}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action small{line-height:1.45}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-features>div{min-width:0}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .floating-utility-actions{max-width:calc(100vw - 24px)}

/* Qadha: keep the board spacious on host displays without sacrificing phone controls. */
:root[data-ui-mode="modern"] body[data-game-brand="qadha"] #qApp{width:min(100%,calc(1400px + (var(--fbrkh-page-pad) * 2)));margin-inline:auto;padding-inline:var(--fbrkh-page-pad);padding-bottom:max(24px,env(safe-area-inset-bottom))}
:root[data-ui-mode="modern"] body[data-game-brand="qadha"] .hero-q{min-height:calc(100svh - 86px);display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);align-items:center;gap:clamp(20px,5vw,64px)}
:root[data-ui-mode="modern"] body[data-game-brand="qadha"] .hero-q .actions{display:flex;flex-wrap:wrap;gap:10px}
:root[data-ui-mode="modern"] body[data-game-brand="qadha"] :where(.q-board,.board,.categories-board,.question-board){min-width:0}
:root[data-ui-mode="modern"] body[data-game-brand="qadha"] :where(.q-modal-card,.q-card,.q-panel){overflow-wrap:anywhere}

/* Khaltaha */
:root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] #kApp{width:min(100%,calc(1240px + (var(--fbrkh-page-pad) * 2)));margin-inline:auto;padding-inline:var(--fbrkh-page-pad);padding-bottom:max(26px,env(safe-area-inset-bottom))}
:root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-loading{margin:clamp(26px,8vh,90px) auto;max-width:620px}
:root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.k-grid,.players-grid,.answers-grid){min-width:0}

/* Top 10 */
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-shell{width:min(100%,calc(1320px + (var(--fbrkh-page-pad) * 2)));margin-inline:auto;padding-inline:var(--fbrkh-page-pad);padding-bottom:max(24px,env(safe-area-inset-bottom))}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-grid{gap:clamp(12px,2vw,20px)}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .setup-card{min-width:0}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .game-topline{gap:8px}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .question-panel h1{font-size:clamp(1.35rem,3vw,2.45rem);line-height:1.35}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .cards-board{min-width:0}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-bar input{min-height:54px}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-host-toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* Real UI-mode picker inserted by modern-ui-r13.js. */
:root[data-ui-mode="modern"] .fbrkh-ui-mode-picker,
:root[data-ui-mode="classic"] .fbrkh-ui-mode-picker{display:grid;gap:9px;margin:12px 0;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.045)}
.fbrkh-ui-mode-picker>span{font-weight:950}.fbrkh-ui-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fbrkh-ui-mode-option{min-height:46px;border:1px solid rgba(255,255,255,.15);border-radius:13px;background:rgba(255,255,255,.07);color:inherit;font:inherit;font-weight:900;padding:8px 10px}
.fbrkh-ui-mode-option.active{background:linear-gradient(135deg,#ffe67a,#ffbd38);border-color:transparent;color:#1a1028;box-shadow:0 8px 18px rgba(255,190,56,.18)}
.fbrkh-ui-mode-picker small{color:#cfc5df;line-height:1.45}
:root[data-theme="light"] .fbrkh-ui-mode-picker{border-color:rgba(37,51,70,.13);background:#f5f6fa}
:root[data-theme="light"] .fbrkh-ui-mode-option{border-color:rgba(37,51,70,.16);background:#fff;color:#263344}
:root[data-theme="light"] .fbrkh-ui-mode-option.active{color:#21152f}
:root[data-theme="light"] .fbrkh-ui-mode-picker small{color:#586779}

/* Retired games are not part of the new platform. JS also removes them defensively. */
:root[data-ui-mode="modern"] :is([data-game="jackaroo"],[data-game="jackaro"],[data-game="jakaro"],[data-game="jackaroo-game"],[href*="jackaroo"],[href*="jackaro"]){display:none!important}

/* Mobile-first finishing pass */
@media(max-width:820px){
  :root[data-ui-mode="modern"]{--fbrkh-page-pad:max(14px,env(safe-area-inset-left));--fbrkh-card-radius:22px;--fbrkh-control-radius:14px}
  :root[data-ui-mode="modern"] :where(button,a.btn,input,select,textarea,[role="button"]){min-height:48px}
  :root[data-ui-mode="modern"] :where(input,textarea,select){font-size:16px!important}
  :root[data-ui-mode="modern"] :where(.topbar,.home-topbar,.q-nav,.k-top,.t10-nav){min-height:62px;padding-inline:14px}
  :root[data-ui-mode="modern"] .platform-home main{padding-inline:14px}
  :root[data-ui-mode="modern"] .platform-home .home-hero{grid-template-columns:1fr;min-height:auto;padding-block:28px 38px;gap:20px;text-align:center}
  :root[data-ui-mode="modern"] .platform-home .hero-copy>p{margin-inline:auto}
  :root[data-ui-mode="modern"] .platform-home .hero-actions,.platform-home .modern-hero-badges{justify-content:center}
  :root[data-ui-mode="modern"] .platform-home .hero-art{max-width:560px;width:100%;margin-inline:auto}
  :root[data-ui-mode="modern"] .platform-home .join-panel{grid-template-columns:1fr;gap:14px;padding:18px}
  :root[data-ui-mode="modern"] .platform-home .games-grid{grid-template-columns:1fr;gap:14px}
  :root[data-ui-mode="modern"] .platform-home .game-card:hover{transform:none}
  :root[data-ui-mode="modern"] .platform-home .resume-card{grid-template-columns:auto minmax(0,1fr)}
  :root[data-ui-mode="modern"] .platform-home .resume-card>.btn{grid-column:1/-1;width:100%}
  :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="fbrkha"] .home-features{grid-template-columns:1fr}
  :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .hero-q{grid-template-columns:1fr;min-height:auto;padding-block:24px;text-align:center}
  :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .hero-q .actions{justify-content:center}
  :root[data-ui-mode="modern"] body[data-game-brand="qadha"] .hero-panel{max-width:360px;margin-inline:auto}
  :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-bar{grid-template-columns:1fr}
  :root[data-ui-mode="modern"] body[data-game-brand="top10"] .answer-bar .t10-btn{width:100%}
  :root[data-ui-mode="modern"] body[data-game-brand="top10"] .game-topline{display:grid;grid-template-columns:1fr 1fr}
  :root[data-ui-mode="modern"] body[data-game-brand="top10"] .game-topline>*:nth-child(2){grid-column:1/-1;grid-row:1}
  :root[data-ui-mode="modern"] :where(.modal-card,.q-modal-card,.game-settings-modal){max-width:100%;max-height:calc(100dvh - 20px)}
}

@media(max-width:560px){
  :root[data-ui-mode="modern"] .platform-home .join-input-row{grid-template-columns:1fr}
  :root[data-ui-mode="modern"] .platform-home .join-input-row .btn{width:100%}
  :root[data-ui-mode="modern"] .platform-home .card-actions{display:grid;grid-template-columns:1fr}
  :root[data-ui-mode="modern"] .platform-home .card-actions>*{width:100%;justify-content:center;text-align:center}
  :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .public-screen{padding-top:16px}
  :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-tagline{font-size:clamp(1.05rem,5.3vw,1.35rem)}
  :root[data-ui-mode="modern"] body[data-game-brand="qadha"] #qApp,
  :root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] #kApp,
  :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-shell{padding-inline:12px}
  :root[data-ui-mode="modern"] .fbrkh-tools-panel{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:none!important;max-height:min(86dvh,760px)!important;border-radius:24px 24px 0 0!important;padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
}

/* TV / wide host display: use space without making text unreadably wide. */
@media(min-width:1500px){
  :root[data-ui-mode="modern"]{--fbrkh-content:1360px}
  :root[data-ui-mode="modern"] body[data-game-brand="qadha"] #qApp{width:min(100%,1560px)}
  :root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-shell{width:min(100%,1460px)}
}

/* Respect accessibility and device preferences. */
@media(prefers-reduced-motion:reduce){
  :root[data-ui-mode="modern"] *,
  :root[data-ui-mode="modern"] *::before,
  :root[data-ui-mode="modern"] *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}