/* رحلة الثروة — Production shell
   Canonical tokens, layers, and layout. Loaded last so it wins stacked version CSS
   without deleting the identity styles underneath. */

:root{
  --sky:#19a8eb;
  --navy-1000:#020e1b;
  --navy-950:#03172a;
  --navy-900:#06233c;
  --navy-800:#0b3454;
  --gold-light:#ffe184;
  --gold:#f9b62c;
  --gold-dark:#a96a0d;
  --cyan:#27dbe7;
  --cream:#fff3d6;
  --success:#39d98a;
  --danger:#ff5865;
  --warning:#ffbf45;
  --text:#ffffff;
  --muted:#aebecd;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:28px;

  --shadow-soft:0 10px 28px #00101f66;
  --shadow-gold:0 5px 0 #65400d,0 12px 26px #00132080;
  --blur-panel:18px;

  --font:Cairo,Tahoma,sans-serif;
  --fs-xs:11px;
  --fs-sm:13px;
  --fs-md:16px;
  --fs-lg:22px;
  --fs-xl:34px;

  --dur-fast:160ms;
  --dur-med:280ms;

  --z-bg:0;
  --z-board:10;
  --z-board-fx:20;
  --z-hud:40;
  --z-drawer:60;
  --z-toast:80;
  --z-backdrop:90;
  --z-modal:100;
  --z-critical:120;
  --z-boot:140;

  --safe-bottom:env(safe-area-inset-bottom,0px);
  --hud-top:118px;
  --hud-bottom:156px;
}

html,body{
  overflow-x:clip;
  max-width:100%;
  background:var(--navy-1000);
}
body.production{
  font-family:var(--font);
  color:var(--text);
}

/* ---------- layers ---------- */
body.production .ambient3d-canvas,
body.production .scene-atmosphere,
body.production .weather-layer,
body.production .day-night-glow{z-index:var(--z-bg)!important}
body.production .stage#stage3d,
body.production .board-scene{z-index:var(--z-board)!important}
body.production .fx-layer,
body.production .cine-money-layer{z-index:var(--z-board-fx)!important}
body.production .hud-players,
body.production .classic-top-center,
body.production .hud-dice,
body.production .clock,
body.production .v162-mobile-nav{z-index:var(--z-hud)!important}
body.production .v162-drawer{z-index:var(--z-drawer)!important}
body.production .v162-drawer-backdrop{z-index:calc(var(--z-drawer) - 1)!important}
body.production .prod-toast,
body.production .prod-reconnect{z-index:var(--z-toast)!important}
body.production .popup{z-index:var(--z-modal)!important}
body.production .rulebook,
body.production .dice-cinema130,
body.production .victory-cinema130{z-index:var(--z-critical)!important}
body.production .boot-screen{z-index:var(--z-boot)!important}

body.production .living-city-v100,
body.production .v100-badge,
body.production .cityverse-version{display:none!important}

body.modal-open .hud-dice,
body.modal-open .hud-players,
body.modal-open .classic-top-center,
body.modal-open .clock,
body.modal-open .v162-mobile-nav,
body.modal-open .v172-mobile-status,
body.modal-open .camera-dock,
body.modal-open .emote-fab,
body.modal-open .classic-chat-shell{
  pointer-events:none!important;
  opacity:.2;
}

/* ---------- boot / reconnect / toast ---------- */
.boot-screen{
  position:fixed;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,#083a63,#031422);
  color:#fff;
}
.boot-screen.done{opacity:0;pointer-events:none;transition:opacity var(--dur-med) ease}
.boot-card{
  width:min(360px,90vw);text-align:center;padding:28px 22px;border-radius:var(--radius-xl);
  border:2px solid var(--gold);background:linear-gradient(180deg,#0b3b5ef2,#041d31f8);
  box-shadow:var(--shadow-gold);
}
.boot-card small{color:var(--cyan);font-weight:900;letter-spacing:.18em}
.boot-card b{display:block;margin:8px 0 6px;font-size:28px;color:var(--gold-light)}
.boot-card p{margin:0 0 16px;color:var(--muted);font-weight:800}
.boot-bar{display:block;height:8px;border-radius:99px;background:#06233c;overflow:hidden}
.boot-bar>i{display:block;height:100%;width:36%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-light),var(--gold));
  animation:bootSlide 1.1s ease-in-out infinite}
@keyframes bootSlide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

.prod-reconnect,.prod-toast{
  position:fixed;left:50%;transform:translateX(-50%);
  max-width:min(520px,92vw);padding:10px 16px;border-radius:14px;
  border:1.5px solid var(--gold);background:#06233cf5;color:#fff;font-weight:800;
  box-shadow:var(--shadow-soft);text-align:center;
}
.prod-reconnect{top:12px}
.prod-toast{bottom:calc(18px + var(--safe-bottom))}
.prod-reconnect.hidden,.prod-toast.hidden,.boot-screen.hidden{display:none!important}

.prod-settings{
  position:fixed;inset:auto 12px 12px 12px;max-height:min(78svh,640px);overflow:auto;
  z-index:var(--z-modal);padding:16px;border-radius:22px 22px 16px 16px;
  background:linear-gradient(180deg,#0b3b5ef8,#041d31fc);border:2px solid var(--gold);
  color:#fff;box-shadow:var(--shadow-gold);
}
.prod-settings h3{margin:0 0 10px;color:var(--gold-light)}
.prod-settings label{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #1a4a66;font-weight:800;font-size:13px}
.prod-settings select,.prod-settings input[type=range]{min-height:36px}
.prod-settings.hidden{display:none!important}

.coming-soon-note{opacity:.7}
.coming-soon-note::after{content:" · قريباً";color:var(--warning);font-size:11px}

/* compact world event */
body.production .cinematic-banner{
  top:auto!important;bottom:calc(var(--hud-bottom) + 8px)!important;
  left:50%!important;transform:translateX(-50%)!important;
  width:min(420px,92vw)!important;min-height:0!important;padding:8px 12px!important;
  font-size:12px!important;border-radius:14px!important;
}

/* ---------- lobby ---------- */
body.production .splash-card #startBtn{
  min-height:54px;font-size:18px;letter-spacing:.02em;
}
@media (max-width:760px){
  body.production .splash{padding:0!important}
  body.production .splash-card{
    width:100%!important;max-width:none!important;border-radius:0!important;
  }
  body.production .lead,
  body.production .classic-unofficial{display:none!important}
  body.production .hero-badges{display:none!important}
  body.production .kicker{font-size:10px!important;letter-spacing:.12em!important}
  body.production .lobby-hub{
    position:sticky;top:0;z-index:20;overflow-x:auto;flex-wrap:nowrap;
  }
}

@media (min-width:1280px){
  body.production .splash{padding:28px}
  body.production .splash-card:not(.lobby-open){
    width:min(1080px,96vw)!important;
    display:grid;grid-template-columns:1.1fr .9fr;gap:18px 28px;text-align:right;
  }
  body.production .splash-card:not(.lobby-open) > :not(#lobbyPanel):not(#authPanel){grid-column:1}
  body.production .splash-card:not(.lobby-open) #authPanel,
  body.production .splash-card:not(.lobby-open) #lobbyPanel{grid-column:2;grid-row:1 / span 12}
  body.production .splash-card.lobby-open{
    display:block!important;
    width:min(1240px,96vw)!important;
    max-width:1240px!important;
  }
}

/* ---------- mobile game HUD ---------- */
@media (max-width:760px){
  body.production{
    --hud-top:96px;
    --hud-bottom:calc(152px + var(--safe-bottom));
  }
  body.production .v172-mobile-status{display:none!important}
  body.production.reference-v120 .classic-top-center{
    top:4px!important;width:min(148px,42vw)!important;z-index:var(--z-hud)!important
  }
  body.production.reference-v120 .hud-players{
    top:40px!important;left:6px!important;right:6px!important
  }
  body.production.reference-v120 .phud{
    height:44px!important;width:min(148px,40vw)!important
  }
  body.production.playing.reference-v120 .stage#stage3d,
  body.production.playing.mobile-pro-v172.reference-v120 .stage#stage3d,
  body.production.playing.responsive-v162.reference-v120 .stage#stage3d{
    position:fixed!important;inset:0!important;
    padding:var(--hud-top) 0 var(--hud-bottom)!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    overflow:hidden!important;
  }
  body.production.playing.reference-v120 #boardScene.board-scene,
  body.production.playing.mobile-pro-v172.reference-v120 #boardScene.board-scene,
  body.production.playing.responsive-v162.reference-v120 #boardScene.board-scene{
    width:calc(100svh - var(--hud-top) - var(--hud-bottom))!important;
    min-width:calc(100svh - var(--hud-top) - var(--hud-bottom))!important;
    max-width:none!important;max-height:none!important;
    height:auto!important;flex:0 0 auto!important;
    margin:0!important;
    --cam-rx:0deg!important;--cam-scale:1!important;--cam-y:0px!important;
  }
  body.production.reference-v120 .hud-dice{
    bottom:calc(56px + var(--safe-bottom))!important
  }
  body.production.reference-v120 .roll-orb,
  body.production .v162-mobile-nav button{
    min-height:44px!important
  }
  body.production .popup:not(.pick-board){
    align-items:end!important;padding:8px 8px calc(8px + var(--safe-bottom))!important
  }
}

@media (min-width:761px) and (max-width:1279px){
  body.production.reference-v120 .stage#stage3d{
    padding:100px 16px 140px!important;align-items:center!important
  }
  body.production.reference-v120 .board-scene{
    width:min(92vw, calc(100svh - 250px), 920px)!important
  }
  body.production .ref-game-rail{display:none!important}
}

@media (min-width:1280px){
  body.production.playing.reference-v120 .stage#stage3d,
  body.production.playing.classic-millionaire .stage#stage3d{
    position:absolute!important;
    inset:0!important;
    width:auto!important;
    max-width:none!important;
    display:grid!important;
    place-items:center!important;
    padding:96px 28px 124px!important;
  }
  body.production.playing.reference-v120 .board-scene,
  body.production.playing.classic-millionaire .board-scene{
    width:min(calc(100vw - 64px),calc(100svh - 228px),900px)!important;
    max-width:100%!important;
    justify-self:center!important;
  }
  body.production.playing .hud-dice{
    left:50%!important;right:auto!important;
    transform:translateX(-50%)!important;
    bottom:16px!important;
    width:min(760px,calc(100vw - 48px))!important;
  }
  body.production.playing .classic-top-center{
    left:50%!important;right:auto!important;
    transform:translateX(-50%)!important;
  }
}

@media (min-width:1440px){
  body.production.playing.reference-v120 .stage#stage3d,
  body.production.playing.classic-millionaire .stage#stage3d{
    padding:96px 248px 124px!important;
  }
  body.production.playing.reference-v120 .board-scene,
  body.production.playing.classic-millionaire .board-scene{
    width:min(calc(100vw - 520px),calc(100svh - 228px),900px)!important;
  }
  body.production.playing .hud-dice{
    width:min(760px,calc(100vw - 520px))!important;
  }
}

/* auction extras */
.auction-increments171{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0
}
.auction-increments171 button,
.auction-custom171 button{
  min-height:44px;border-radius:12px;border:1px solid #d6aa3d;background:#082944;color:#fff;font-weight:900
}
.auction-custom171{display:flex;gap:8px;margin-top:8px}
.auction-custom171 input{
  flex:1;min-height:44px;border-radius:12px;border:1px solid #2a5d78;background:#041d31;color:#fff;padding:0 10px
}
.auction-history171{max-height:88px;overflow:auto;margin-top:8px;font-size:12px;color:var(--muted)}

.speech-bubble{
  position:absolute;padding:6px 10px;border-radius:12px;background:#06233cf0;border:1px solid var(--gold);
  font-size:12px;font-weight:800;pointer-events:none;z-index:var(--z-toast)
}

.tile-trait{
  display:block;font-size:8px;color:var(--cyan);font-weight:900
}

.afk-warn{
  outline:2px solid var(--warning)
}

/* a11y + graphics */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
  scroll-behavior:auto!important
}
body.large-text{font-size:18px}
body.high-contrast{
  filter:contrast(1.18) saturate(1.05)
}
body.gfx-battery .ambient3d-canvas,
body.gfx-battery .scene-atmosphere,
body.gfx-battery .weather-layer,
body.gfx-battery .fx-layer,
body.gfx-battery .cine-money-layer,
body.gfx-battery .board-ambient,
body.gfx-battery .world-ring3d{display:none!important}
body.gfx-battery .board-scene{filter:none!important;transform:none!important}

body.fast-mode .die3d,body.fast-mode .die{animation-duration:.18s!important}

@media (prefers-reduced-motion:reduce){
  body.production *{animation:none!important;transition:none!important}
}

/* ---------- hide stacked lists / leaked match chrome ---------- */
.boot-screen:not(.hidden){
  position:fixed!important;inset:0!important;width:100vw!important;height:100svh!important;
  z-index:9999!important;background:linear-gradient(180deg,#083a63,#031422)!important;
}
body.booting{overflow:hidden}
body.booting #app,
body.booting .v162-mobile-nav,
body.booting .v162-drawer,
body.booting .v162-drawer-backdrop,
body.booting .v172-mobile-status{
  visibility:hidden!important;pointer-events:none!important;
}

#table.hidden,
#app:has(#splash:not(.hidden)) #table{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
}

body:not(.playing) .v162-mobile-nav,
body:not(.playing) .v162-drawer,
body:not(.playing) .v162-drawer-backdrop,
body:not(.playing) .v172-mobile-status,
body:not(.playing) .ref-game-rail,
body:not(.playing) .ref-top-tools,
body:not(.playing) .ref-bottom-left,
body:not(.playing) .ref-bottom-right,
body:not(.playing) .map-identity140,
body:not(.playing) .map-shape150,
body:not(.playing) .city-focus-card,
body:not(.playing) .camera-dock,
body:not(.playing) .emote-fab,
body:not(.playing) .chat-panel-v164,
body:not(.playing) .sound-mixer165{
  display:none!important;
}

/* During a match: hide version badges only. Chat, camera, and tool buttons stay on desktop. */
body.playing .map-identity140,
body.playing .map-shape150,
body.playing .v172-mobile-status,
body.playing .market-ticker,
body.playing .ref-game-rail{
  display:none!important;
}

@media (min-width:1280px){
  body.production.playing .ref-bottom-left,
  body.production.playing .ref-bottom-right{
    display:flex!important;
    z-index:48!important;
  }
  body.production.playing .ref-top-tools{
    display:flex!important;
    z-index:46!important;
  }
  body.production.playing .camera-dock{
    display:flex!important;
    z-index:45!important;
    top:auto!important;
    bottom:92px!important;
    right:18px!important;
    left:auto!important;
    transform:none!important;
    opacity:.9!important;
  }
  body.production.playing .chat-panel-v164{
    left:22px!important;
    bottom:96px!important;
    z-index:770!important;
  }
}

@media (min-width:1440px){
  body.playing .ref-game-rail{
    display:flex!important;top:126px!important;bottom:128px!important;z-index:30!important;
  }
  body.production.playing .camera-dock{
    right:18px!important;
    bottom:92px!important;
  }
}

@media (max-width:1279px){
  body.playing .v162-mobile-nav{display:grid!important}
}

/* Lobby hub: one scroll row instead of stacked tab lists */
body.production .lobby-hub{
  display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
body.production .hub-tab{
  flex:0 0 auto;min-width:86px;white-space:nowrap;
}

body.production.responsive-v162.reference-v120 .splash-card.lobby-open .lead,
body.production.responsive-v162.reference-v120 .splash-card.lobby-open .hero-badges,
body.production.responsive-v162.reference-v120 .splash-card.lobby-open .classic-unofficial,
body.production.responsive-v162.reference-v120 .splash-card.lobby-open .kicker,
body.production.responsive-v162.reference-v120 .splash-card.lobby-open .splash-heroes{
  display:none!important;
}
body.production.responsive-v162.reference-v120 .splash-card.lobby-open h1{
  margin:4px auto 8px!important;font-size:28px!important;
}
body.production.responsive-v162.reference-v120 .splash-card.lobby-open .lobby-hub{
  display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;
  overflow-x:auto!important;overflow-y:hidden!important;gap:6px!important;
  margin:8px 0 12px!important;padding:6px!important;
  scrollbar-width:none;
}
body.production .lobby-hub::-webkit-scrollbar{display:none;height:0}
body.production.responsive-v162.reference-v120 .splash-card.lobby-open .hub-tab{
  flex:0 0 auto!important;min-width:92px!important;width:auto!important;
  white-space:nowrap!important;
}

/* Hub panels must actually hide — lobby CSS forces #hubPlay to display:grid !important */
body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay.hidden,
body.production.responsive-v162.reference-v120 .splash-card.lobby-open .hub-panel.hidden,
body.production.classic-millionaire .splash-card.lobby-open #hubPlay.hidden,
body.production.classic-millionaire .splash-card.lobby-open .hub-panel.hidden{
  display:none!important;
}

/* ========== device bands: phone / tablet / iPad / desktop ========== */

/* Phone */
@media (max-width:760px){
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open{
    width:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;
    padding:10px 10px calc(18px + var(--safe-bottom))!important;
    transform:none!important;transform-style:flat!important;
  }
  body.production .splash,
  body.production[data-graphics="3d"] .splash,
  body.production.mobile-pro-v172:not(.playing) #app,
  body.production.mobile-pro-v172:not(.playing) .splash{
    perspective:none!important;
    overflow:visible!important;
    height:auto!important;
    min-height:100svh!important;
  }
  body.production[data-graphics="3d"] .splash-card.lobby-open > *,
  body.production #lobbyPanel{
    transform:none!important;
  }
  body.production .splash-card.lobby-open{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.production.playing .board-scene,
  body.production.playing #boardScene.board-scene{
    width:calc(100svh - var(--hud-top) - var(--hud-bottom))!important;
    min-width:calc(100svh - var(--hud-top) - var(--hud-bottom))!important;
    max-width:none!important;
  }
  body.production.playing .stage#stage3d{
    padding:var(--hud-top) 0 var(--hud-bottom)!important;
    align-items:center!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open h1{font-size:26px!important;margin:2px auto 6px!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open .lobby-hub{position:sticky!important;top:0!important;z-index:24!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay{
    display:flex!important;flex-direction:column!important;grid-template-columns:none!important;gap:8px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.char-pick{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.field,
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.mode-hint,
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>#lobbyPreview,
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>#startBtn,
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>#resumeBtn{
    width:100%!important;max-width:none!important;grid-column:auto!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #startBtn{
    position:fixed!important;left:12px!important;right:12px!important;top:auto!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    z-index:40!important;min-height:52px!important;width:auto!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay{
    padding-bottom:72px!important;
  }
}

/* Phone start button docked to <body> so position:fixed uses the real viewport */
body.production #startBtn.prod-start-docked{
  position:fixed!important;
  left:12px!important;
  right:12px!important;
  top:auto!important;
  bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  z-index:40!important;
  min-height:52px!important;
  width:auto!important;
  margin:0!important;
  grid-column:auto!important;
  grid-row:auto!important;
}
body.production.playing #startBtn.prod-start-docked{
  display:none!important;
}

/* Tablet portrait + iPad */
@media (min-width:761px) and (max-width:1023px){
  body.production .splash{padding:12px!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open{
    width:min(980px,96vw)!important;margin:0 auto!important;padding:16px 18px 22px!important;
    border-radius:22px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay{
    display:grid!important;grid-template-columns:1fr!important;gap:10px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.char-pick{
    grid-column:1/-1!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.field{
    max-width:420px;
  }
  body.production.responsive-v162.reference-v120 .stage#stage3d{
    padding:96px 12px 132px!important;
  }
  body.production.responsive-v162.reference-v120 .board-scene{
    width:min(94vw,calc(100svh - 240px),860px)!important;
  }
}

/* iPad landscape / small laptop */
@media (min-width:1024px) and (max-width:1279px){
  body.production .splash{padding:16px!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open{
    width:min(1100px,96vw)!important;padding:18px 22px 24px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay{
    display:grid!important;
    grid-template-columns:minmax(0,1.4fr) minmax(260px,.7fr)!important;
    gap:12px 18px!important;align-items:start!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.otp-hint{grid-column:1/-1!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.char-pick{
    grid-column:1!important;grid-row:2 / span 8!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.field,
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.mode-hint,
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>#lobbyPreview,
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>#startBtn,
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>#resumeBtn{
    grid-column:2!important;
  }
  body.production.responsive-v162.reference-v120 .stage#stage3d{
    padding:92px 18px 128px!important;
  }
  body.production.responsive-v162.reference-v120 .board-scene{
    width:min(88vw,calc(100svh - 230px),900px)!important;
  }
}

/* Desktop */
@media (min-width:1280px){
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open h1{font-size:34px!important;margin:6px auto 10px!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay{
    display:grid!important;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.7fr)!important;
    gap:14px 22px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.otp-hint{grid-column:1/-1!important;grid-row:1!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.char-pick{
    grid-column:1!important;grid-row:2 / span 8!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.match-mode-field{grid-column:2!important;grid-row:2!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.mode-hint{grid-column:2!important;grid-row:3!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.human-count-field{grid-column:2!important;grid-row:4!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.cpu-count-field{grid-column:2!important;grid-row:5!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>#lobbyPreview{grid-column:2!important;grid-row:6!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>#resumeBtn{grid-column:2!important;grid-row:7!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>#startBtn{grid-column:2!important;grid-row:8!important;min-height:54px!important}
}

/* Short laptops (1280×800 / 1366×768) keep the start button on screen */
@media (min-width:1280px) and (max-height:900px){
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open{
    padding:10px 18px 12px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open h1{
    font-size:26px!important;margin:2px auto 4px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open .lobby-hub{
    margin:4px 0 8px!important;padding:4px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay{
    gap:8px 16px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open .char-card{
    height:112px!important;min-height:112px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open .char-card img{
    height:74px!important;
  }
}

/* Phone landscape (iPhone / Android wide) */
@media (max-width:980px) and (max-height:540px) and (orientation:landscape){
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open{
    width:100%!important;max-width:100vw!important;min-width:0!important;margin:0!important;border-radius:0!important;
    padding:6px 12px 64px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open h1{font-size:20px!important}
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay{
    display:grid!important;
    grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)!important;
    gap:8px 14px!important;
  }
  body.production.responsive-v162.reference-v120 .splash-card.lobby-open #hubPlay>.char-pick{
    grid-column:1!important;grid-row:1 / span 8!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body.production.playing.responsive-v162.reference-v120 .stage#stage3d,
  body.production.playing.mobile-pro-v172.reference-v120 .stage#stage3d{
    padding:40px 8px 72px!important;align-items:center!important;
  }
  body.production.playing #boardScene.board-scene{
    width:min(72vh,42vw)!important;
    height:min(72vh,42vw)!important;
    min-width:min(72vh,42vw)!important;
    max-width:min(72vh,42vw)!important;
    max-height:none!important;
    flex:0 0 auto!important;
  }
  body.production.playing .hud-dice{
    display:block!important;bottom:42px!important;width:min(420px,50vw)!important;
  }
  body.production.playing .v162-mobile-nav{
    display:grid!important;height:40px!important;
  }
  body.production.playing .hud-players{top:2px!important}
  body.production.playing .phud{height:34px!important}
}