/* فبركة — Site-wide Modern Redesign r14
   One mobile-first visual language for every active surface.
   IMPORTANT: everything is scoped to data-ui-mode="modern" so
   «فبركة الكلاسيكي» keeps the previous visual layer untouched. */

:root[data-ui-mode="modern"]{
  --r14-bg:#07111d;
  --r14-bg-2:#0a1726;
  --r14-panel:rgba(13,29,47,.86);
  --r14-panel-strong:#0e2033;
  --r14-panel-soft:rgba(23,45,67,.68);
  --r14-line:rgba(176,220,235,.15);
  --r14-line-strong:rgba(27,214,232,.30);
  --r14-text:#f7fbff;
  --r14-muted:#a9bdcc;
  --r14-accent:#1bd6e8;
  --r14-accent-2:#65e8f2;
  --r14-gold:#f2c14e;
  --r14-success:#4ade9a;
  --r14-danger:#ff7185;
  --r14-shadow:0 22px 64px rgba(0,0,0,.28);
  --r14-radius-lg:26px;
  --r14-radius-md:18px;
  --r14-radius-sm:14px;
  --r14-touch:48px;
  --r14-page:min(1180px,calc(100vw - 28px));
  color-scheme:dark;
}

:root[data-ui-mode="modern"] body{
  color:var(--r14-text);
  background:
    radial-gradient(900px 520px at 90% -12%,rgba(27,214,232,.12),transparent 60%),
    radial-gradient(720px 520px at -12% 22%,rgba(242,193,78,.075),transparent 62%),
    linear-gradient(180deg,var(--r14-bg),#081522 54%,#06101a);
  background-attachment:fixed;
}
:root[data-ui-mode="modern"] body::selection{background:rgba(27,214,232,.28);color:#fff}

/* One surface language across the whole product. */
:root[data-ui-mode="modern"] :where(
  .game-card,.join-panel,.resume-card,.install-card,.mood-shell,
  .card,.section-card,.setup-card,.center-card,.modal-card,
  .q-card,.q-panel,.q-modal-card,.k-card,.game-settings-modal,
  .fbrkh-tools-panel
){
  border:1px solid var(--r14-line)!important;
  background:linear-gradient(180deg,rgba(17,39,61,.88),rgba(10,25,41,.94))!important;
  box-shadow:var(--r14-shadow);
}
:root[data-ui-mode="modern"] :where(.btn,.q-btn,.k-btn,.t10-btn,.home-action,.icon-action,.nav-home,.nav-account,.nav-link,.text-action){
  min-height:var(--r14-touch);
  border-radius:var(--r14-radius-sm);
  font-weight:850;
}
:root[data-ui-mode="modern"] :where(.btn.primary,.q-btn.primary,.k-btn.primary,.t10-btn.primary,.home-action-create){
  color:#041016!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--r14-accent-2),var(--r14-accent))!important;
  box-shadow:0 12px 30px rgba(27,214,232,.20)!important;
}
:root[data-ui-mode="modern"] :where(.btn.primary,.q-btn.primary,.k-btn.primary,.t10-btn.primary,.home-action-create):hover{
  filter:brightness(1.06);transform:translateY(-1px)
}
:root[data-ui-mode="modern"] :where(input,textarea,select){
  min-height:48px;
  color:var(--r14-text)!important;
  background:rgba(4,14,24,.62)!important;
  border:1px solid var(--r14-line)!important;
  outline:none;
}
:root[data-ui-mode="modern"] :where(input,textarea,select):focus{
  border-color:rgba(27,214,232,.62)!important;
  box-shadow:0 0 0 4px rgba(27,214,232,.10)!important;
}

/* Shared navigation. */
:root[data-ui-mode="modern"] :where(.home-topbar,.q-nav,.k-top,.t10-nav,body[data-game-brand="fbrkha-online"] .topbar){
  border-bottom:1px solid rgba(176,220,235,.10)!important;
  background:linear-gradient(180deg,rgba(5,17,29,.96),rgba(5,17,29,.78))!important;
  backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
}
:root[data-ui-mode="modern"] :where(.nav-link,.nav-account,.nav-home){color:var(--r14-text)!important}

/* =========================
   HOME — new default shell
   ========================= */
:root[data-ui-mode="modern"] .platform-home .home-hero{
  position:relative;
  isolation:isolate;
}
:root[data-ui-mode="modern"] .platform-home .eyebrow,
:root[data-ui-mode="modern"] .platform-home .section-kicker{
  color:var(--r14-accent-2)!important;
  letter-spacing:.01em;
}
:root[data-ui-mode="modern"] .platform-home #homeHeroTitle{
  margin-block:10px 14px;
  font-size:clamp(2.6rem,7vw,5.7rem);
  line-height:.98;
  letter-spacing:-.035em;
}
:root[data-ui-mode="modern"] .platform-home #homeHeroTitle span{color:var(--r14-accent)}
:root[data-ui-mode="modern"] .platform-home .hero-copy>p{color:var(--r14-muted);font-size:clamp(1rem,2vw,1.18rem)}
:root[data-ui-mode="modern"] .platform-home .modern-hero-badges>span{
  color:#dcecf5;
  background:rgba(13,34,52,.72)!important;
  border-color:var(--r14-line)!important;
}
:root[data-ui-mode="modern"] .platform-home .join-panel{
  border-color:var(--r14-line-strong)!important;
  overflow:hidden;
}
:root[data-ui-mode="modern"] .platform-home .games-grid{align-items:stretch}
:root[data-ui-mode="modern"] .platform-home .game-card{
  display:grid;
  grid-template-columns:minmax(150px,.78fr) minmax(0,1.22fr);
  min-height:310px;
  border-radius:var(--r14-radius-lg)!important;
  overflow:hidden;
}
:root[data-ui-mode="modern"] .platform-home .game-card .game-mark{
  min-height:100%;
  display:grid;
  place-items:center;
  background:linear-gradient(155deg,rgba(27,214,232,.09),rgba(255,255,255,.015));
}
:root[data-ui-mode="modern"] .platform-home .game-card .game-copy{padding:clamp(18px,2.6vw,28px)}
:root[data-ui-mode="modern"] .platform-home .game-card .pill{
  border:1px solid var(--r14-line);
  background:rgba(27,214,232,.07);
  color:#dffbff;
}
:root[data-ui-mode="modern"] .platform-home .game-card h3{font-size:clamp(1.65rem,3vw,2.35rem);margin-block:8px 2px}
:root[data-ui-mode="modern"] .platform-home .game-card p{color:var(--r14-muted)}
:root[data-ui-mode="modern"] .platform-home .game-quick-facts>div{
  border:1px solid rgba(176,220,235,.10);
  background:rgba(255,255,255,.025);
  border-radius:12px;
  padding:8px 10px;
}
:root[data-ui-mode="modern"] .platform-home .fbrkha-mode-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
}
:root[data-ui-mode="modern"] .platform-home .fbrkha-online-cta{
  color:#041016!important;
  background:linear-gradient(135deg,var(--r14-accent-2),var(--r14-accent))!important;
}
:root[data-ui-mode="modern"] .platform-home .fbrkha-host-cta{
  color:var(--r14-text)!important;
  border:1px solid var(--r14-line-strong)!important;
  background:rgba(27,214,232,.07)!important;
}

/* =========================
   FBRKHA — host mode
   ========================= */
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-tagline strong,
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-tagline b{color:var(--r14-accent)}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .brand-subtitle{color:var(--r14-muted)}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-actions{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  max-width:900px;
  margin-inline:auto;
}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action{
  border:1px solid var(--r14-line)!important;
  background:linear-gradient(180deg,rgba(17,39,61,.86),rgba(9,24,40,.92))!important;
  border-radius:20px!important;
  padding:16px!important;
}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action:first-child{
  border-color:var(--r14-line-strong)!important;
  background:linear-gradient(145deg,rgba(27,214,232,.15),rgba(14,35,54,.92))!important;
}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-action small,
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-features span{color:var(--r14-muted)}

/* =========================
   FBRKHA ONLINE — same brand, not a separate purple microsite
   ========================= */
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"]{
  --bg:var(--r14-bg);
  --panel:var(--r14-panel);
  --panel2:var(--r14-panel-strong);
  --line:var(--r14-line);
  --text:var(--r14-text);
  --muted:var(--r14-muted);
  --pink:var(--r14-accent);
  --purple:#55b8d7;
  --cyan:var(--r14-accent-2);
  --green:var(--r14-success);
  --danger:var(--r14-danger);
  --shadow:var(--r14-shadow);
  background:
    radial-gradient(680px 420px at 85% -8%,rgba(27,214,232,.13),transparent 62%),
    linear-gradient(180deg,var(--r14-bg),#081522 62%,#06101a)!important;
}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .ambient-a{background:var(--r14-accent);opacity:.08}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .ambient-b{background:var(--r14-gold);opacity:.05}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .shell{width:min(100%,820px)}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .card,
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .mode,
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .player,
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .vote-option,
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .reveal,
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .rank{
  border-color:var(--r14-line)!important;
  background:linear-gradient(180deg,rgba(17,39,61,.88),rgba(9,24,40,.94))!important;
}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .gradient-text{
  background:linear-gradient(90deg,#fff 5%,var(--r14-accent-2) 54%,var(--r14-accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .btn-primary{
  color:#041016!important;
  background:linear-gradient(135deg,var(--r14-accent-2),var(--r14-accent))!important;
}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .btn-secondary{
  background:rgba(27,214,232,.10)!important;
  border:1px solid var(--r14-line-strong)!important;
}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .online-pill{
  border-color:rgba(74,222,154,.32)!important;
  background:rgba(74,222,154,.08)!important;
}
:root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .online-settings{
  width:44px;height:44px;min-height:44px;border-radius:14px;
  border:1px solid var(--r14-line);background:rgba(255,255,255,.045);color:var(--r14-text);
  display:grid;place-items:center;font-size:18px;
}

/* =========================
   QADDAHA — only shell/surfaces. Approved board geometry remains authoritative.
   ========================= */
:root[data-ui-mode="modern"] body[data-game-brand="qadha"] :where(.q-card,.q-panel,.q-modal-card){
  border-color:var(--r14-line)!important;
}
:root[data-ui-mode="modern"] body[data-game-brand="qadha"] .q-nav{box-shadow:0 10px 34px rgba(0,0,0,.16)}
:root[data-ui-mode="modern"] body[data-game-brand="qadha"] :where(.q-btn,.q-action){min-height:48px}

/* =========================
   KHALTAHA
   ========================= */
:root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] :where(.k-card,.k-panel,.k-modal-card){
  border-color:var(--r14-line)!important;
}
:root[data-ui-mode="modern"] body[data-game-brand="khaltaha"] .k-top{box-shadow:0 10px 34px rgba(0,0,0,.16)}

/* =========================
   TOP 10
   ========================= */
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .t10-nav{box-shadow:0 10px 34px rgba(0,0,0,.16)}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] :where(.setup-card,.center-card,.question-panel){border-color:var(--r14-line)!important}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-title span{color:var(--r14-accent-2)!important}
:root[data-ui-mode="modern"] body[data-game-brand="top10"] .top10-title strong{color:var(--r14-gold)!important}

/* Settings become one consistent bottom sheet on phones. */
:root[data-ui-mode="modern"] .fbrkh-tools-panel{
  color:var(--r14-text)!important;
  border-color:var(--r14-line-strong)!important;
}
:root[data-ui-mode="modern"] .fbrkh-tools-panel :where(p,small){color:var(--r14-muted)!important}
:root[data-ui-mode="modern"] .fbrkh-ui-mode-option.active{
  color:#06131a!important;
  background:linear-gradient(135deg,var(--r14-accent-2),var(--r14-accent))!important;
  box-shadow:0 9px 24px rgba(27,214,232,.18)!important;
}

/* Jackaroo is retired everywhere, not only on the home page. */
:root :is([data-game="jackaroo"],[data-game="jackaro"],[data-game="jakaro"],[data-game="jackaroo-game"],[href*="jackaroo"],[href*="jackaro"]){display:none!important}

@media(max-width:900px){
  :root[data-ui-mode="modern"] .platform-home .game-card{grid-template-columns:130px minmax(0,1fr);min-height:270px}
  :root[data-ui-mode="modern"] .platform-home .game-card .modern-game-art{max-height:230px;object-fit:contain}
}

@media(max-width:720px){
  :root[data-ui-mode="modern"]{--r14-radius-lg:22px;--r14-radius-md:17px;--r14-page:calc(100vw - 24px)}
  :root[data-ui-mode="modern"] body{background-attachment:scroll}
  :root[data-ui-mode="modern"] .platform-home #homeHeroTitle{font-size:clamp(2.7rem,15vw,4.5rem)}
  :root[data-ui-mode="modern"] .platform-home .game-card{display:block;min-height:0}
  :root[data-ui-mode="modern"] .platform-home .game-card .game-mark{min-height:180px;max-height:220px}
  :root[data-ui-mode="modern"] .platform-home .game-card .modern-game-art{max-height:210px;width:auto}
  :root[data-ui-mode="modern"] .platform-home .fbrkha-mode-actions{grid-template-columns:1fr}
  :root[data-ui-mode="modern"] body[data-game-brand="fbrkha"] .home-actions{grid-template-columns:1fr!important}
  :root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .topbar{padding-inline:12px!important}
  :root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .shell{padding-inline:12px}
  :root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .card{padding:16px;border-radius:20px!important}
  :root[data-ui-mode="modern"] .fbrkh-tools-panel{
    left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:100%!important;max-width:none!important;max-height:min(88dvh,780px)!important;
    border-radius:24px 24px 0 0!important;padding-bottom:max(20px,env(safe-area-inset-bottom))!important;
  }
}

@media(max-width:420px){
  :root[data-ui-mode="modern"] .platform-home .game-card .game-copy{padding:16px}
  :root[data-ui-mode="modern"] body[data-game-brand="fbrkha-online"] .online-pill span{display:none}
}

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