/* Forge brand experience: one non-tiled, fixed, mobile-safe identity across every browse page. */
body:has(.lf-top),body.forge-brand-browse{
  position:relative;
  isolation:isolate;
  background:#030310 !important;
  color:#fff4e8;
}
body:has(.lf-top)::before,body.forge-brand-browse::before{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:0;
  /* Glow only: the giant logo that used to sit here showed through as a ghost duplicate of the title. */
  background-image:radial-gradient(ellipse at 50% 30%,rgba(255,105,14,.16),transparent 68%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.66;
}
body:has(.lf-top)::after,body.forge-brand-browse::after{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(1,2,10,.58),transparent 22%,transparent 78%,rgba(1,2,10,.58)),
    linear-gradient(180deg,rgba(2,2,12,.14),rgba(2,2,12,.37));
}
body:has(.lf-top) > *,body.forge-brand-browse > *{position:relative;z-index:1}
body:has(.lf-top) .lf-top {
  background:rgba(3,4,17,.94);
  border-bottom:1px solid rgba(255,137,36,.44);
  box-shadow:0 2px 26px rgba(255,93,0,.13);
  backdrop-filter:blur(10px);
}
body:has(.lf-top) .lf-wrap,body:has(.lf-top) .lf-footer{max-width:1200px}
body:has(.lf-top) .lf-intro,body:has(.lf-top) .lf-crumbs,body:has(.lf-top) .lf-note{
  background:rgba(3,5,17,.78);
  border-radius:16px;
  padding:clamp(15px,2.5vw,25px);
  backdrop-filter:blur(8px);
}
body:has(.lf-top) .lf-intro{max-width:900px;border:1px solid rgba(255,134,38,.28)}
body:has(.lf-top) .lf-flagship{
  border-color:rgba(255,139,47,.56);
  background:linear-gradient(160deg,rgba(14,13,27,.95),rgba(7,8,19,.96));
  box-shadow:0 12px 42px rgba(0,0,0,.62),0 0 26px rgba(255,108,20,.10);
}
body:has(.lf-top) .lf-category,body:has(.lf-top) .lf-game{
  background:rgba(6,8,22,.93);
  border-color:rgba(255,139,47,.31);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
body:has(.lf-top) .lf-category:hover,body:has(.lf-top) .lf-game:hover{background:rgba(36,18,20,.97)}
body:has(.lf-top) .lf-footer{background:rgba(2,3,13,.92);border-radius:14px 14px 0 0}
.forge-brand-banner{
  display:block;max-width:1200px;margin:18px auto 0;
  padding:0 16px;text-align:center;
}
.forge-brand-banner img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;
  filter:drop-shadow(0 0 28px rgba(255,106,16,.48));
}
body.forge-brand-browse .wrap{background:rgba(3,4,17,.68);border-radius:16px}
body.forge-brand-browse :is(.box,.g,nav.cats){background:rgba(7,9,24,.93)}
body.forge-brand-browse :is(h1,h2,h3){color:#fff7eb}
body.forge-brand-browse .g{border-color:#704120}
@media(max-width:720px){
  body:has(.lf-top)::before,body.forge-brand-browse::before{
    background-size:cover,112vw auto;
    background-position:center,center 46%;
    opacity:.64;
  }
  body:has(.lf-top) .lf-top{padding:12px 14px}
  body:has(.lf-top) .lf-intro{margin-top:12px}
  .forge-brand-banner{margin-top:10px;padding:0 8px}
  .forge-brand-banner img{filter:drop-shadow(0 0 15px rgba(255,106,16,.36))}
}
/* Existing game UI stays accessible while gameplay uses the available viewport. */
#play.screen.game.on{
  min-height:100dvh;
  width:100%;
  overflow-x:clip;
}
#play.screen.game.on > .wrap{
  width:100% !important;
  max-width:none !important;
  min-width:0;
  margin:0 !important;
  box-sizing:border-box;
  padding-inline:max(6px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-right));
}
#play.screen.game.on #stage,
#play.screen.game.on .desk-stage{
  width:100% !important;
  max-width:none !important;
  min-width:0;
  box-sizing:border-box;
}
#play.screen.game.on .desk-stage{
  margin:0 auto;
  padding:clamp(4px,1vw,12px) !important;
}
#play.screen.game.on.forge-immersive-action{
  background:#050612 !important;
  background-image:radial-gradient(circle at 50% 10%,rgba(255,96,12,.1),transparent 65%) !important;
}
#play.screen.game.on.forge-immersive-action .desk-stage{background:transparent !important;border:0 !important;box-shadow:none !important}
#play.screen.game.on.forge-immersive-action .desk-props{display:none !important}
#play.screen.game.on > .bar{
  position:sticky;top:0;z-index:160;
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  background:rgba(7,9,22,.97) !important;
  color:#fff2dd;
  padding:6px max(7px,env(safe-area-inset-left));
}
#play.screen.game.on .forge-fullscreen-control{order:0; min-height:44px !important}
#play.screen.game.on .slc{max-width:none !important;width:100% !important}
#play.screen.game.on .slc-uihost{max-width:none !important; width:100% !important}
#play.screen.game.on .slc-show{width:100% !important}
#play.screen.game.on #stage :is(canvas,video,iframe){max-width:100%}
#play.screen.game.on #stage :is(.tk-board,.tk-grid,.sboard,.g2048,.bgrid){margin-inline:auto}
/* Auto side margins shrink a flex child to its content; TableKit boards size their content
   from the board itself, so without an explicit width the board collapsed to 0px (blank game). */
#play.screen.game.on #stage .tk-board{width:100%;max-width:100%}
@media (orientation:landscape) and (max-height:540px){
  #play.screen.game.on > .bar{padding-block:3px}
  #play.screen.game.on .slc-uihost{height:calc(100dvh - 62px) !important;min-height:200px !important}
}
@media (prefers-reduced-motion:reduce){.forge-brand-banner img{filter:none}}

/* Shared graphics selector belongs in the active game, not the hidden old home. */
#play.screen.game.on > .bar .fgfx-quality-play{
  display:inline-flex;
  flex:0 0 auto;
  gap:6px;
  min-height:44px;
  padding:4px 8px;
  border-radius:11px;
  color:#ffe4ba;
  background:rgba(8,16,26,.9);
  border:1px solid rgba(255,155,67,.42);
  font:800 12px/1.15 system-ui,sans-serif;
}
#play .fgfx-quality-play select{
  background:#142333;
  border:1px solid rgba(255,162,73,.6);
  color:#fff3d9;
  padding:6px 7px;
  border-radius:9px;
  min-height:36px;
  width:auto;
  min-width:98px;
  max-width:190px;
  font-size:12px;
}
#play .fgfx-quality-play select:focus-visible{outline:3px solid #ff9a37;outline-offset:2px}
@media(max-width:390px){
 #play .fgfx-quality-play{padding:3px 5px !important;gap:4px}
 #play .fgfx-quality-play select{max-width:120px;font-size:11px}
}
/* The racing flagship has its own quality pipeline and controls; do not show
   an unrelated board-graphics selector that would imply it adjusts its race. */
#play.room-streetlegal .fgfx-quality-play{display:none !important}