/* Forge: viewport-first play screen. Does not change game rules or payment flow. */
#play.screen.game.on {
  width: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  overflow-x: clip;
}
/* Small puzzle/card boards remain comfortably readable on large displays.
   On phones the stage still uses all available width. */
#play.screen.game.on > .wrap {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
}
#play.screen.game.on #stage,
#play.screen.game.on .desk-stage {
  box-sizing: border-box;
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
}
/* Flagship/3D gameplay must never be confined to the legacy 520px desk. */
#play:is(.room-streetlegal,.room-frontline,.room-golf,.room-bowling,.room-hencross).on {
  background: #0a0c10 !important;
  color: #f7ecdf;
}
#play:is(.room-streetlegal,.room-frontline,.room-golf,.room-bowling,.room-hencross).on > .wrap {
  width: 100% !important;
  max-width: none !important;
  padding: 0 max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
#play:is(.room-streetlegal,.room-frontline,.room-golf,.room-bowling,.room-hencross).on #stage {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}
#play:is(.room-streetlegal,.room-frontline,.room-golf,.room-bowling,.room-hencross).on .desk-stage {
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#play:is(.room-streetlegal,.room-frontline,.room-golf,.room-bowling,.room-hencross).on .desk-props {
  display: none !important;
}
#play.room-streetlegal.on .slc {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
}
#play.room-streetlegal.on .slc-show {
  height: clamp(280px, 62dvh, 840px) !important;
}
#play.room-streetlegal.on .slc-uihost {
  height: clamp(300px, calc(100dvh - 120px), 1080px) !important;
  min-height: 300px !important;
  max-width: 100% !important;
}
/* Native fullscreen is activated by a player tap; fixed expanded view is the
   fallback when the browser doesn't expose the Fullscreen API. */
#play.forge-expanded {
  position: fixed !important;
  inset: 0;
  z-index: 120 !important;
  height: 100dvh;
  overflow: auto !important;
  overscroll-behavior: contain;
}
body:has(#play.forge-expanded) { overflow: hidden; }
#play.forge-expanded.room-streetlegal.on .slc-uihost,
#play.room-streetlegal.on:fullscreen .slc-uihost {
  height: calc(100dvh - 72px) !important;
  max-height: none !important;
}
#play:fullscreen {
  width: 100vw !important;
  height: 100dvh !important;
  overflow: auto !important;
  background: #0a0c10;
}
#play .bar .forge-fullscreen-control {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  font: 700 23px/1 system-ui,sans-serif;
  color: #22170d;
  border: 1px solid #ae845e;
  border-radius: 10px;
  background: #fff1d9;
  cursor: pointer;
}
#play .bar .forge-fullscreen-control:focus-visible {
  outline: 3px solid #f8a44f;
  outline-offset: 3px;
}
@media(max-width:600px) {
  #play.screen.game.on > .wrap { width: 100% !important; padding-inline: 6px; }
  #play .bar { flex-wrap: wrap !important; }
  #play .bar .forge-fullscreen-control { order: 3; }
}
@media(orientation:landscape) and (max-height:550px) {
  #play.room-streetlegal.on .slc-uihost {
    height: max(240px, calc(100dvh - 92px)) !important;
    min-height: 240px !important;
  }
  #play.room-streetlegal.on .slc-show { height: max(240px, calc(100dvh - 112px)) !important; }
}

/* The fullscreen/minimize action is always unmistakable and visible. */
#play.screen.game.on > .bar {
  position: sticky;
  top: 0;
  z-index: 150;
  background: rgba(14,16,20,.95);
  border-bottom: 1px solid rgba(255,156,69,.45);
  color: #f9e5cd;
  padding-top: max(6px, env(safe-area-inset-top));
}
#play .bar .forge-fullscreen-control {
  flex: 0 0 auto !important;
  min-width: 96px !important;
  width: auto !important;
  padding: 0 10px !important;
  gap: 6px;
  background: #ff982e !important;
  border: 2px solid #ffd194 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 0 16px rgba(255,125,22,.3);
  color: #100a03 !important;
  font: 800 13px/1 system-ui,sans-serif;
}
#play .forge-fullscreen-label { font-size: 25px; line-height: 1; }
#play .forge-fullscreen-caption { font-size: 12px; font-weight: 900; letter-spacing: .01em; }
#play.forge-expanded .forge-fullscreen-caption { letter-spacing: .01em; }
#play.forge-expanded > .wrap { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
@media (max-width: 390px) {
 #play .bar .forge-fullscreen-control { min-width: 82px !important; padding-inline: 7px !important; }
 #play .forge-fullscreen-caption { font-size: 11px; }
}

/* Flagships outrank the old 760px wrapper on every device and resize. */
#play.screen.game.on:is(.room-streetlegal,.room-frontline,.room-golf,.room-bowling,.room-hencross) > .wrap {
 box-sizing:border-box; width:100% !important; max-width:none !important; min-width:0 !important; margin-inline:0 !important;
}
#play.screen.game.on:is(.room-streetlegal,.room-frontline,.room-golf,.room-bowling,.room-hencross) #stage,
#play.screen.game.on:is(.room-streetlegal,.room-frontline,.room-golf,.room-bowling,.room-hencross) .desk-stage {
 width:100% !important; max-width:none !important;
}
#play.screen.game.on.room-streetlegal.forge-expanded .slc-uihost,
#play.screen.game.on.room-streetlegal:fullscreen .slc-uihost {
 width:100% !important; height:max(260px,calc(100dvh - 90px)) !important; max-height:none !important;
}

/* Every casual game owns the entire screen. Keep a readable board centered
   inside that viewport instead of shrinking the whole game into an old desk. */
#play.screen.game.on:is(.room-g2048,.room-solitaire,.room-spider,.room-freecell) > .wrap {
  width:100% !important; max-width:none !important;
  min-height:calc(100dvh - 70px); padding-bottom:max(14px,env(safe-area-inset-bottom));
}
#play.screen.game.on.room-g2048 .g2048-tray {
  width:min(100%, 560px, calc(100dvh - 220px));
  min-width:0;
}

/* UNIVERSAL GAME VIEWPORT: applies to every registered game, not a shortlist.
   The browser chrome may remain visible until a user gesture permits native fullscreen. */
html:has(#play.screen.game.on),body:has(#play.screen.game.on){overscroll-behavior:none}
#play.screen.game.on{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  z-index:120!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  background:#0a0c10!important;
}
#play.screen.game.on>.wrap{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:8px max(8px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
}
#play.screen.game.on #stage,
#play.screen.game.on .desk-stage,
#play.screen.game.on .tk,
#play.screen.game.on .fs-stage{
  box-sizing:border-box;
  max-width:100%!important;
  min-width:0;
}
#play.screen.game.on>.bar{
  position:sticky!important;
  top:0!important;
  z-index:150!important;
}
@supports not (height:100dvh){
  #play.screen.game.on{height:100vh!important;min-height:100vh!important;max-height:100vh!important}
}

/* Solitaire is played ON the room's desk, not in a framed picture floating
   over the room. Extend the play surface across the viewport and let the
   existing cards remain real, interactive DOM elements. */
#play.screen.game.on:is(.room-solitaire,.room-spider,.room-freecell){
  background:linear-gradient(160deg,#281b12,#3a2719 46%,#17110d)!important;
}
#play.screen.game.on:is(.room-solitaire,.room-spider,.room-freecell)>.wrap{
  position:relative!important;
  z-index:1;
  width:100%!important;
  min-height:calc(100dvh - 64px);
  padding:clamp(6px,1.4vw,18px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#play.screen.game.on:is(.room-solitaire,.room-spider,.room-freecell) #stage{
  width:100%!important;
  max-width:none!important;
  min-height:calc(100dvh - 130px);
  padding:clamp(6px,1.5vw,22px)!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:radial-gradient(ellipse at 50% 35%,rgba(42,102,66,.94),rgba(16,56,38,.97) 78%)!important;
}
#play.screen.game.on:is(.room-solitaire,.room-spider,.room-freecell) .desk-stage,
#play.screen.game.on:is(.room-solitaire,.room-spider,.room-freecell) .desk-board,
#play.screen.game.on:is(.room-solitaire,.room-spider,.room-freecell) .desk-surface{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  transform:none!important;
}
#play.screen.game.on:is(.room-solitaire,.room-spider,.room-freecell) .desk-props{
  display:none!important;
}
html[data-forge-room] #play.screen.game.on:is(.room-solitaire,.room-spider,.room-freecell){
  background:transparent!important;
}
@media(max-width:600px){
  #play.screen.game.on:is(.room-solitaire,.room-spider,.room-freecell) #stage{
    min-height:calc(100dvh - 110px);
    padding:6px!important;
  }
}

/* Universal seamless presentation for the complete 150-game catalog.
   The entire player is the game environment, not a framed widget on a wall.
   Specific full-3D titles retain their own canvas and camera layout. */
#play.screen.game.on>.wrap,
#play.screen.game.on #stage,
#play.screen.game.on .desk-stage,
#play.screen.game.on .desk-board,
#play.screen.game.on .desk-surface{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-inline:0!important;
  border-radius:0!important;
}
#play.screen.game.on>.wrap{
  min-height:calc(100dvh - 64px);
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
#play.screen.game.on #stage{
  min-height:calc(100dvh - 132px);
  border:0!important;
  box-shadow:none!important;
}
#play.screen.game.on .desk-stage{
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
}
#play.screen.game.on .desk-props{display:none!important}
#play.screen.game.on .f3d-active{
  width:100%!important;
  max-width:none!important;
  border-radius:0!important;
  border:0!important;
  box-shadow:none!important;
}
@media(max-width:600px){
  #play.screen.game.on>.wrap{padding:6px!important}
  #play.screen.game.on #stage{min-height:calc(100dvh - 110px)}
}

/* The room and tabletop are one composition: don't paint a second opaque
   wallpaper-sized rectangle over the rendered room behind the game. */
html[data-forge-room] #play.screen.game.on{
  background:transparent!important;
  isolation:isolate;
}
html[data-forge-room] #play.screen.game.on>.wrap{
  background:transparent!important;
}
html[data-forge-room] #play.screen.game.on #stage{
  background-color:transparent!important;
  background-image:linear-gradient(180deg,rgba(12,28,21,.04),rgba(12,37,25,.48) 32%,rgba(10,30,21,.62))!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html[data-forge-room] #play.screen.game.on .forge-room{
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  pointer-events:none;
}
html[data-forge-room] #play.screen.game.on>.bar,
html[data-forge-room] #play.screen.game.on>.wrap{
  position:relative;
  z-index:2;
}
/* Games with an actual WebGL surface must keep their own scene; never
   make canvases transparent or force a different render size. */
html[data-forge-room] #play.screen.game.on #stage canvas{
  max-width:100%;
}

/* 2026-11-02: Play-first performance mode. No rendered room or diorama.
   Let the actual game fill the screen, rather than a small display in a venue. */
#play.screen.game.on{
  background:#08121b!important;
  background-image:linear-gradient(160deg,#0d2332,#0a141f 65%,#071019)!important;
}
#play.screen.game.on>.wrap{
  display:flex;
  flex-direction:column;
  min-height:calc(100dvh - 56px);
  padding:clamp(4px,1vw,12px)!important;
}
#play.screen.game.on #stage{
  flex:1 1 auto;
  min-height:calc(100dvh - 112px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(4px,1.5vw,16px)!important;
  background:transparent!important;
  background-image:none!important;
}
#play.screen.game.on #stage>.tk{
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  min-height:calc(100dvh - 144px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(8px,2vh,20px);
  margin:0!important;
}
#play.screen.game.on #stage .tk-felt,
#play.screen.game.on #stage .tk-paper{
  width:100%;
  box-sizing:border-box;
  border-radius:clamp(8px,1vw,18px);
}
#play.screen.game.on .forge-room,
#play.screen.game.on .forge-room-buddy,
#play.screen.game.on .desk-props{
  display:none!important;
}
@media(max-width:600px){
 #play.screen.game.on #stage{min-height:calc(100dvh - 102px)}
 #play.screen.game.on #stage>.tk{min-height:calc(100dvh - 132px)}
 #play.screen.game.on #stage .tk-grid{width:100%;max-width:100%}
}

/* Suppress the separate photographic wallpaper layer as well as WebGL rooms. */
body #play.screen.game.on.forge-photo-world,
body #play.screen.game.on.forge-photo-world #stage{
  background-image:none!important;
  background-color:#0b1a25!important;
  background-attachment:scroll!important;
}
body #play.screen.game.on.forge-photo-world>.wrap{
  background:transparent!important;
  box-shadow:none!important;
}

/* Premium native 2D tabletop presentation. Gameplay, not scenery, owns viewport. */
#play.screen.game.on:not(.room-frontline):not(.room-streetlegal):not(.room-golf):not(.room-lanenight) #stage>.tk{
  width:100%!important;max-width:none!important;
  min-height:calc(100dvh - 140px);
  color:#f8f2e5;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}
#play.screen.game.on #stage .tk-felt{
  background:radial-gradient(ellipse at 50% 10%,#225e51 0%,#123c37 45%,#092421 100%)!important;
  border:1px solid rgba(234,194,109,.45)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -20px 40px rgba(0,0,0,.16),0 12px 32px rgba(0,0,0,.28)!important;
  padding:clamp(12px,3vw,30px)!important;
}
#play.screen.game.on #stage .tk-paper{
  background:linear-gradient(145deg,#fff9ea,#e9ddc3)!important;
  border:1px solid #c6a971!important;
  box-shadow:0 12px 35px rgba(0,0,0,.3)!important;
}
#play.screen.game.on #stage .tk-card{
  border:1px solid rgba(65,40,25,.25);
  box-shadow:0 3px 1px rgba(0,0,0,.15),0 8px 16px rgba(0,0,0,.18)!important;
  transition:transform .16s ease,box-shadow .16s ease;
}
#play.screen.game.on #stage .tk-card:focus-visible,
#play.screen.game.on #stage .tk-btn:focus-visible{
  outline:3px solid #ffc56a!important;outline-offset:3px;
}
#play.screen.game.on #stage .tk-card:active{
  transform:translateY(2px) scale(.98);
}
#play.screen.game.on #stage .tk-grid{
  max-width:100%;
  min-width:0;
}
#play.screen.game.on #stage .tk-row,
#play.screen.game.on #stage .tk-hand{
  max-width:100%;min-width:0;
}
@media(max-width:600px){
 #play.screen.game.on #stage .tk-card{max-width:calc((100vw - 36px)/4);height:auto;min-height:64px}
 #play.screen.game.on #stage .tk-card.sm{min-height:52px}
 #play.screen.game.on #stage .tk-felt{padding:12px!important}
}
@media(prefers-reduced-motion:reduce){
 #play.screen.game.on #stage .tk-card{transition:none!important}
}

/* ===== Forge play shell (forge-play-fullscreen.js): the game owns the screen. =====
   One slim bar: Home, your bobblehead, title, clock, full screen, menu.
   Everything else lives in the menu; nothing floats over gameplay. */
html.fps-shell body #play.screen.game.on{
  display:flex !important;flex-direction:column !important;
  height:100dvh !important;min-height:0 !important;max-height:100dvh !important;
  overflow:hidden !important;padding:0 !important;margin:0 !important;
  background:#07070d !important;
}
html.fps-shell body #play.screen.game.on > .bar{
  position:relative !important;z-index:30 !important;
  flex:0 0 auto !important;display:flex !important;flex-wrap:nowrap !important;align-items:center !important;
  gap:6px !important;height:calc(54px + env(safe-area-inset-top)) !important;min-height:0 !important;
  padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left)) !important;
  margin:0 !important;border:0 !important;border-bottom:1px solid rgba(255,140,40,.28) !important;
  background:linear-gradient(180deg,#14141f,#0b0b12) !important;box-shadow:0 6px 18px rgba(0,0,0,.45) !important;
  overflow:visible !important;
}
html.fps-shell body #play.screen.game.on > .bar > :not(.fps-keep){display:none !important}
html.fps-shell body #play.screen.game.on > .bar > #back{
  flex:0 0 auto !important;width:40px !important;min-width:0 !important;height:40px !important;min-height:0 !important;
  padding:0 !important;margin:0 !important;border-radius:12px !important;font-size:0 !important;color:transparent !important;
  background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb35c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/22px no-repeat !important;
  border:1px solid rgba(255,160,70,.35) !important;box-shadow:none !important;
}
html.fps-shell body #play.screen.game.on > .bar > #back *{display:none !important}
html.fps-shell body #play.screen.game.on > .bar > #playTitle{
  flex:1 1 auto !important;min-width:0 !important;margin:0 0 0 4px !important;padding:0 !important;
  overflow:hidden !important;white-space:nowrap !important;text-overflow:ellipsis !important;text-align:left !important;
  background:none !important;border:0 !important;box-shadow:none !important;
  font:800 17px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif !important;letter-spacing:.01em !important;color:#fff3e2 !important;
  -webkit-text-fill-color:#fff3e2 !important;text-shadow:0 1px 0 #000 !important;
}
html.fps-shell body #play.screen.game.on > .bar > #playTitle::before,
html.fps-shell body #play.screen.game.on > .bar > #playTitle::after{display:none !important;content:none !important}
html.fps-shell body #play.screen.game.on > .bar > .fps-clock{
  flex:0 0 auto;min-width:38px;text-align:center;color:#ffcf96;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:6px 7px;border-radius:9px;background:rgba(255,255,255,.06);
}
html.fps-shell body #play.screen.game.on > .bar > .fps-clock:empty{display:none}
html.fps-shell body #play.screen.game.on > .bar > #forgeFullscreenBtn{
  flex:0 0 auto !important;order:0 !important;width:40px !important;min-width:0 !important;height:40px !important;min-height:0 !important;
  padding:0 !important;margin:0 !important;border-radius:12px !important;
  background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,160,70,.35) !important;box-shadow:none !important;color:#ffb35c !important;
}
html.fps-shell body #play.screen.game.on > .bar > #forgeFullscreenBtn .forge-fullscreen-caption{display:none !important}
html.fps-shell body #play.screen.game.on > .bar > #forgeFullscreenBtn .forge-fullscreen-label{font-size:19px !important;line-height:1 !important}
.fps-menu-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:3px;width:40px;height:40px;padding:0;
  border-radius:12px;border:1px solid rgba(255,160,70,.35);background:rgba(255,255,255,.06);cursor:pointer}
.fps-menu-btn span{width:5px;height:5px;border-radius:50%;background:#ffb35c}
.fps-menu-btn[aria-expanded="true"]{background:#ff8a1f}
.fps-menu-btn[aria-expanded="true"] span{background:#1a0d02}

/* Bobblehead: your avatar on a spring, top-left, sticking out of the bar. */
.fps-avatar{position:relative;flex:0 0 auto;width:54px;height:54px;padding:0;margin:0 0 -14px;border:0;background:none;cursor:pointer;
  align-self:flex-start;margin-top:4px;z-index:2;-webkit-tap-highlight-color:transparent}
.fps-avatar-head{position:absolute;left:0;top:0;width:54px;height:58px;border-radius:46% 46% 42% 42%;overflow:hidden;
  border:2px solid #ffb35c;background:#1b1b26;box-shadow:0 6px 14px rgba(0,0,0,.55),0 0 0 3px rgba(255,138,31,.18);
  transform-origin:50% 95%;z-index:2}
.fps-avatar-head img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(1.22);transform-origin:50% 30%}
.fps-avatar-spring{position:absolute;left:23px;top:52px;width:8px;height:12px;border-radius:3px;z-index:1;
  background:repeating-linear-gradient(180deg,#c9c9d6 0 2px,#6b6b7a 2px 4px)}
.fps-avatar.bobbling .fps-avatar-head{animation:fps-bobble 1.1s cubic-bezier(.24,.4,.19,1) both}
@keyframes fps-bobble{0%{transform:rotate(0)}12%{transform:rotate(-15deg) translateY(-3px)}28%{transform:rotate(12deg)}44%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}76%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
.fps-avatar-say{position:fixed;left:max(10px,env(safe-area-inset-left));top:calc(70px + env(safe-area-inset-top));z-index:9500;max-width:min(78vw,320px);
  padding:9px 12px;border-radius:14px 14px 14px 4px;background:#fff6e8;color:#1b1206;font:700 14px/1.3 system-ui,-apple-system,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .18s}
.fps-avatar-say.on{opacity:1;transform:none}
html:not(.fps-shell) .fps-avatar-say,#play:not(.on) .fps-avatar-say{display:none}

/* Menu sheet */
.fps-menu{position:fixed;right:max(8px,env(safe-area-inset-right));top:calc(60px + env(safe-area-inset-top));z-index:9600;
  width:min(280px,calc(100vw - 16px));max-height:calc(100dvh - 80px);overflow:auto;padding:8px;border-radius:16px;
  background:#15151f;border:1px solid rgba(255,160,70,.35);box-shadow:0 18px 48px rgba(0,0,0,.6);display:grid;gap:4px}
.fps-menu[hidden]{display:none}
.fps-item{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:11px;border:0;background:transparent;
  color:#f6eadb;font:650 15px/1.2 system-ui,-apple-system,sans-serif;cursor:pointer}
.fps-item:hover,.fps-item:focus-visible{background:rgba(255,255,255,.07);outline:none}
.fps-item.fps-primary{background:#ff8a1f;color:#1a0d02;font-weight:800;text-align:center}
.fps-item.fps-home{color:#ffb35c;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 11px 11px}
.fps-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;color:#f6eadb;font:650 15px/1.2 system-ui,sans-serif}
.fps-select{min-width:120px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,160,70,.35);background:#0d0d14;color:#fff3e2;font:600 14px system-ui,sans-serif}

/* Game area fills the rest of the screen. */
html.fps-shell body #play.screen.game.on > .wrap{
  flex:1 1 auto !important;min-height:0 !important;width:100% !important;max-width:none !important;
  margin:0 !important;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)) !important;
  overflow-x:hidden !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:flex !important;flex-direction:column !important;gap:6px !important;
}
html.fps-shell body #play.screen.game.on > .wrap > .hud{display:none !important}
html.fps-shell body #play.screen.game.on > .wrap > #stage{
  flex:1 0 auto !important;width:100% !important;max-width:none !important;margin:0 !important;
}
html.fps-shell body #play.screen.game.on #stage .tk-bar .tk-title{display:none !important}
html.fps-shell body #play.screen.game.on > .wrap > #status:empty{display:none !important}
/* Old flat bobblehead and floating helpers are replaced by the bar avatar and menu during play. */
html.fps-shell body:has(#play.screen.game.on) #forge-avatar-bobble,
html.fps-shell body:has(#play.screen.game.on) #forge-ask-open,
html.fps-shell body:has(#play.screen.game.on) #fg-open{display:none !important}
@media (orientation:landscape) and (max-height:540px){
  html.fps-shell body #play.screen.game.on > .bar{height:calc(46px + env(safe-area-inset-top)) !important}
  .fps-avatar{width:44px;height:44px;margin-bottom:-6px}
  .fps-avatar-head{width:44px;height:47px}
  .fps-avatar-spring{left:18px;top:42px}
}
@media (prefers-reduced-motion:reduce){.fps-avatar.bobbling .fps-avatar-head{animation:none}.fps-avatar-say{transition:none}}
/* TableKit games: board at the top and growing into the free space, controls at the bottom within thumb reach
   (was vertically centered, leaving empty bands above and below the board). */
html.fps-shell body #play.screen.game.on #stage > .tk{justify-content:flex-start !important}
html.fps-shell body #play.screen.game.on #stage > .tk > .tk-board{flex:1 0 auto !important;display:flex !important;flex-direction:column !important;justify-content:center !important}
html.fps-shell body #play.screen.game.on #stage > .tk > .tk-board > *{width:100%}

/* ===== 2026-11-04: the room around the game =====
   Every game sits in its own lit room (cards on a leather table, casino felt under a lamp,
   arcade cabinets, a game-show stage...). The art stays dark and behind the game so it
   sets the mood without ever competing with the board. Category comes from
   forge-play-fullscreen.js (data-fps-cat on #play). */
html.fps-shell body #play.screen.game.on{
  background-color:#07060a !important;
  background-image:
    radial-gradient(ellipse 120% 70% at 50% 0%,rgba(7,6,10,.15),rgba(7,6,10,.82) 70%),
    linear-gradient(180deg,rgba(7,6,10,.35),rgba(7,6,10,.7)),
    var(--fps-room,url("/assets/art/forge-fallback-max.jpg")) !important;
  background-size:cover,cover,cover !important;
  background-position:center,center,center 30% !important;
  background-repeat:no-repeat !important;
}
#play[data-fps-cat="card"]{--fps-room:url("/assets/art/card-table-max.jpg")}
#play[data-fps-cat="casino"]{--fps-room:url("/assets/art/casino-bg-max.jpg")}
#play[data-fps-cat="board"]{--fps-room:url("/assets/art/board-bg-max.jpg")}
#play[data-fps-cat="puzzle"]{--fps-room:url("/assets/art/puzzle-bg-max.jpg")}
#play[data-fps-cat="word"]{--fps-room:url("/assets/art/word-bg-max.jpg")}
#play[data-fps-cat="show"]{--fps-room:url("/assets/art/trivia-bg-max.jpg")}
#play[data-fps-cat="arcade"]{--fps-room:url("/assets/art/arcade-bg-max.jpg")}
#play[data-fps-cat="sports"]{--fps-room:url("/assets/art/sports-bg-max.jpg")}
#play[data-fps-cat="strategy"]{--fps-room:url("/assets/art/strategy-bg-max.jpg")}
/* 2026-11-08: the most-played games get their own scene from the owner's art (assets/art/rooms/<id>.jpg);
   same weight as the hall rules above and later in the file, so it wins for that one game. */
#play:is(.room-chess,[data-fps-game="chess"]){--fps-room:url("/assets/art/rooms/chess.jpg")}
#play:is(.room-checkers,[data-fps-game="checkers"]){--fps-room:url("/assets/art/rooms/checkers.jpg")}
#play:is(.room-domino,[data-fps-game="domino"]){--fps-room:url("/assets/art/rooms/domino.jpg")}
#play:is(.room-mahjong,[data-fps-game="mahjong"]){--fps-room:url("/assets/art/rooms/mahjong.jpg")}
#play:is(.room-solitaire,[data-fps-game="solitaire"]){--fps-room:url("/assets/art/rooms/solitaire.jpg")}
#play:is(.room-blackjack,[data-fps-game="blackjack"]){--fps-room:url("/assets/art/rooms/blackjack.jpg")}
#play:is(.room-holdem,[data-fps-game="holdem"]){--fps-room:url("/assets/art/rooms/holdem.jpg")}
#play:is(.room-drawpoker,[data-fps-game="drawpoker"]){--fps-room:url("/assets/art/rooms/drawpoker.jpg")}
#play:is(.room-hotdice,[data-fps-game="hotdice"]){--fps-room:url("/assets/art/rooms/hotdice.jpg")}
#play:is(.room-coinpusher,[data-fps-game="coinpusher"]){--fps-room:url("/assets/art/rooms/coinpusher.jpg")}
#play:is(.room-skiprun,[data-fps-game="skiprun"]){--fps-room:url("/assets/art/rooms/skiprun.jpg")}
#play:is(.room-eightball,[data-fps-game="eightball"]){--fps-room:url("/assets/art/rooms/eightball.jpg")}
#play:is(.room-lanenight,[data-fps-game="lanenight"]){--fps-room:url("/assets/art/rooms/lanenight.jpg")}
#play:is(.room-airtable,[data-fps-game="airtable"]){--fps-room:url("/assets/art/rooms/airtable.jpg")}
#play:is(.room-golf,[data-fps-game="golf"]){--fps-room:url("/assets/art/rooms/golf.jpg")}
#play:is(.room-bigcatch,[data-fps-game="bigcatch"]){--fps-room:url("/assets/art/rooms/bigcatch.jpg")}
#play:is(.room-penalty,[data-fps-game="penalty"]){--fps-room:url("/assets/art/rooms/penalty.jpg")}
#play:is(.room-zombiestand,[data-fps-game="zombiestand"]){--fps-room:url("/assets/art/rooms/zombiestand.jpg")}
#play:is(.room-nodeal,[data-fps-game="nodeal"]){--fps-room:url("/assets/art/rooms/nodeal.jpg")}
/* forge-max-overrides.css pins chess and checkers to the board hall with !important; their own scenes win here. */
html.fps-shell body #play.screen.game.on:is(.room-chess,.room-checkers,[data-fps-game="chess"],[data-fps-game="checkers"]){
  background-image:radial-gradient(ellipse 120% 70% at 50% 0%,rgba(7,6,10,.15),rgba(7,6,10,.82) 70%),linear-gradient(180deg,rgba(7,6,10,.35),rgba(7,6,10,.7)),var(--fps-room) !important;
  background-size:cover,cover,cover !important;background-position:center,center,center 30% !important;background-repeat:no-repeat !important}
/* The flagships render their own worlds edge to edge. */
html.fps-shell body #play.screen.game.on:is(.room-streetlegal,.room-frontline){background-image:none !important;background-color:#05050a !important}
html.fps-shell body #play.screen.game.on #stage{background:transparent !important}

/* Bar: a strip of dark forged iron with a molten edge. */
html.fps-shell body #play.screen.game.on > .bar{
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#1a1210,#0d0908) !important;
  border-bottom:0 !important;
  box-shadow:0 1px 0 rgba(255,138,31,.55),0 2px 14px rgba(255,98,10,.22),0 10px 24px rgba(0,0,0,.55) !important;
}
html.fps-shell body #play.screen.game.on > .bar > #playTitle{
  font:400 15px/1.05 "Bungee",system-ui,sans-serif !important;letter-spacing:0 !important;
  color:#ffe3bd !important;-webkit-text-fill-color:#ffe3bd !important;
  text-shadow:0 0 14px rgba(255,120,20,.35),0 1px 0 #000 !important;
}
/* Bigger bobblehead that hangs below the bar, over the room (not over the board's first row). */
.fps-avatar{width:62px;height:62px;margin-bottom:-22px}
.fps-avatar-head{width:62px;height:66px;border-width:3px;
  background:radial-gradient(circle at 50% 35%,#3a2a20,#120c0a);
  box-shadow:0 8px 18px rgba(0,0,0,.6),0 0 0 3px rgba(255,138,31,.22),0 0 22px rgba(255,120,20,.35)}
.fps-avatar-spring{left:27px;top:60px;height:10px}
/* Idle sway so the head reads as a bobblehead even before the first tap. */
.fps-avatar:not(.bobbling) .fps-avatar-head{animation:fps-idle 4.5s ease-in-out infinite}
@keyframes fps-idle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.fps-avatar-say{top:calc(76px + env(safe-area-inset-top))}
@media (orientation:landscape) and (max-height:540px){
  .fps-avatar{width:46px;height:46px;margin-bottom:-8px}
  .fps-avatar-head{width:46px;height:49px}
  .fps-avatar-spring{left:19px;top:44px}
}
@media (prefers-reduced-motion:reduce){.fps-avatar:not(.bobbling) .fps-avatar-head{animation:none}}

/* Helpers that used to float over gameplay live in the menu instead. */
html.fps-shell body:has(#play.screen.game.on) :is(#forge-avatar-bobble,#forge-ask-open,#fg-open,.forge-ask-open,.fg-open,#forge-best-stage){display:none !important}
/* Card tables deal from the top: the tableau grows downward toward the thumb controls. */
html.fps-shell body #play.screen.game.on[data-fps-cat="card"] #stage{justify-content:flex-start !important}

/* Trophy on the bobblehead: #1 on any leaderboard wears the crown; #2–10 wear a medal with their rank. */
.fps-trophy{display:none;position:absolute;z-index:3;pointer-events:none}
.fps-avatar.has-crown .fps-trophy{display:block;left:50%;top:-3px;width:34px;height:21px;transform:translateX(-50%) rotate(-8deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b0'/%3E%3Cstop offset='.5' stop-color='%23f2b632'/%3E%3Cstop offset='1' stop-color='%23a8670e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 21 1 6l9 7 9-11 9 11 9-7-2 15z' fill='url(%23g)' stroke='%235a3406' stroke-width='1.2' stroke-linejoin='round'/%3E%3Crect x='3' y='19' width='32' height='4' rx='1.5' fill='url(%23g)' stroke='%235a3406' stroke-width='1'/%3E%3Ccircle cx='19' cy='13' r='2.3' fill='%23d81e3a'/%3E%3Ccircle cx='10' cy='16' r='1.6' fill='%232a5bd8'/%3E%3Ccircle cx='28' cy='16' r='1.6' fill='%232a5bd8'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(255,200,60,.6))}
.fps-avatar.has-medal .fps-trophy{display:grid;place-items:center;right:-6px;bottom:-4px;width:22px;height:22px;border-radius:50%;
  font:900 11px/1 system-ui,sans-serif;color:#2a1600;background:radial-gradient(circle at 35% 30%,#fff3c0,#f0b437 55%,#a8670e);
  border:2px solid #fff0c4;box-shadow:0 2px 6px rgba(0,0,0,.6),0 0 10px rgba(255,190,60,.55)}
.fps-avatar.has-medal .fps-trophy[data-tier="top10"]{background:radial-gradient(circle at 35% 30%,#ffe0c0,#d98a4a 55%,#7a3f14);border-color:#ffd9b8}

/* Loading card while a 3D table downloads (ForgeLoading in forge-play-fullscreen.js). */
.forge-loading-card{display:grid;justify-items:center;gap:12px;width:min(92%,420px);margin:12vh auto 0;padding:18px;border-radius:18px;
  background:rgba(14,10,9,.82);box-shadow:0 0 0 1px rgba(255,150,60,.35),0 18px 40px rgba(0,0,0,.5);color:#ffe3bd;font:700 15px/1.3 system-ui,sans-serif}
.forge-loading-card img{width:100%;border-radius:12px;aspect-ratio:4/3;object-fit:cover}
.forge-loading-card i{display:block;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(255,138,31,.15),#ff8a1f,rgba(255,138,31,.15));background-size:200% 100%;animation:forge-load 1.1s linear infinite}
@keyframes forge-load{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.forge-loading-card i{animation:none}}

/* Pop-out bobblehead: the player's own character, big head on a spring (forge-play-fullscreen.js). */
.fps-bobble{position:fixed;left:max(12px,env(safe-area-inset-left));top:calc(64px + env(safe-area-inset-top));z-index:9400;width:118px;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(-26px) scale(.55);transform-origin:30px 0;transition:opacity .18s ease,transform .32s cubic-bezier(.3,1.5,.5,1),visibility 0s .32s;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.5))}
.fps-bobble.on{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .32s cubic-bezier(.3,1.5,.5,1)}
.fps-bobble img{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:auto;touch-action:none;cursor:grab}
.fps-bobble-head{will-change:transform}
.fps-bobble-base{position:absolute;left:-8%;width:116%;height:0;padding-bottom:26%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 32%,#fffaf2 0 46%,#e9dfd2 62%,#b9ab9a 100%);
  box-shadow:0 7px 0 #8c7d6c,0 9px 14px rgba(0,0,0,.45)}
.fps-bobble.on + .fps-avatar-say{left:calc(max(12px,env(safe-area-inset-left)) + 128px)}
.fps-avatar.own .fps-avatar-head img{object-position:50% 34%;transform:scale(1.6);transform-origin:50% 40%}
html:not(.fps-shell) .fps-bobble,#play:not(.on) .fps-bobble{display:none}
@media (min-width:900px){.fps-bobble{width:150px;top:calc(84px + env(safe-area-inset-top))}.fps-bobble.on + .fps-avatar-say{left:calc(max(12px,env(safe-area-inset-left)) + 162px)}}
@media (prefers-reduced-motion:reduce){.fps-bobble{transition:none}}