/* ============================================================
   Mobile Pro v172
   Mobile-first gameplay shell + tablet polish.
   Goal: make the board readable, remove dead space, enlarge touch
   targets, and keep secondary tools in drawers.
   ============================================================ */
body.mobile-pro-v172{
  --v172-navy:#05243b;
  --v172-navy-deep:#031725;
  --v172-gold:#f5bd39;
  --v172-gold-hi:#ffe681;
  --v172-cyan:#4bdde8;
  --v172-line:#e8b842;
  --v172-safe:env(safe-area-inset-bottom,0px);
}

/* Shared compact status card, only shown on compact screens while playing. */
.v172-mobile-status{display:none}

@media (max-width:1279px){
  body.mobile-pro-v172 .v162-mobile-nav{
    height:52px!important;
    left:8px!important;right:8px!important;
    bottom:calc(6px + var(--v172-safe))!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;padding:5px!important;
    border-radius:16px!important;border:1.5px solid var(--v172-line)!important;
    background:linear-gradient(180deg,#0b3b5df8,#041c30fb)!important;
    box-shadow:0 5px 0 #65400d,0 12px 30px #0013218c,inset 0 1px #ffffff16!important;
  }
  body.mobile-pro-v172 .v162-mobile-nav button{
    min-height:40px!important;border-radius:10px!important;
    font-size:9px!important;gap:4px!important;background:#092b46!important;
  }
  body.mobile-pro-v172 .v162-mobile-nav button i{font-size:17px!important}
  body.mobile-pro-v172 .v162-mobile-nav [data-v162="exit"]{display:none!important}

  body.mobile-pro-v172 .v162-drawer{
    left:10px!important;right:10px!important;
    bottom:calc(66px + var(--v172-safe))!important;
    max-height:min(68svh,650px)!important;
    border-radius:22px!important;border-width:1.5px!important;
    box-shadow:0 22px 65px #00101fd6,0 5px 0 #65400d!important;
  }
  body.mobile-pro-v172 .v162-drawer-head{padding:12px 14px!important}
  body.mobile-pro-v172 .v162-drawer-head b{font-size:15px!important}
  body.mobile-pro-v172 .v162-drawer-head button{width:36px!important;height:36px!important;font-size:22px!important}
  body.mobile-pro-v172 .v162-drawer-body{padding:12px!important}
  body.mobile-pro-v172 .v162-action-grid{gap:9px!important}
  body.mobile-pro-v172 .v162-action-grid button{min-height:52px!important;font-size:11px!important;border-radius:13px!important}
  body.mobile-pro-v172 .v162-action-grid button i{font-size:20px!important}
}

/* ========================= PHONE GAME ========================= */
@media (max-width:760px){
  body.mobile-pro-v172{--v172-nav-h:58px;--v172-action-h:94px;--v172-top-h:92px}
  body.mobile-pro-v172 .table-screen{
    position:fixed!important;inset:0!important;width:100vw!important;height:100svh!important;
    overflow:hidden!important;background-position:center!important;background-size:cover!important;
  }

  /* ---- Top HUD: one clear hierarchy, no stacking ---- */
  body.mobile-pro-v172.reference-v120 .classic-top-center{
    top:5px!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
    width:132px!important;z-index:86!important;gap:2px!important;
  }
  body.mobile-pro-v172.reference-v120 .classic-top-center .round-chip{
    width:132px!important;min-width:132px!important;height:39px!important;
    padding:5px 8px!important;border-radius:12px!important;font-size:11px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    box-shadow:0 4px 0 #82530e,0 7px 18px #00162572,inset 0 1px #fff8c6!important;
  }
  body.mobile-pro-v172.reference-v120 .classic-stage-bar{
    width:132px!important;max-width:none!important;height:24px!important;margin-top:3px!important;
    padding:2px!important;border-radius:9px!important;display:grid!important;
    grid-template-columns:1fr 1fr!important;gap:2px!important;overflow:hidden!important;
    background:#05263ef2!important;border:1px solid #c9972f!important;
  }
  body.mobile-pro-v172.reference-v120 .classic-stage-bar>span:first-child{display:none!important}
  body.mobile-pro-v172.reference-v120 .classic-stage-bar b,
  body.mobile-pro-v172.reference-v120 .classic-stage-bar span{
    min-width:0!important;padding:2px 3px!important;font-size:6.5px!important;line-height:1.15!important;
    border-radius:5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }

  body.mobile-pro-v172.auction-timer-v171 .clock{
    display:grid!important;top:7px!important;right:8px!important;left:auto!important;
    width:38px!important;height:38px!important;z-index:87!important;
    border-width:1px!important;border-radius:12px!important;background:#062740f2!important;
    box-shadow:0 4px 0 #68430c,0 7px 14px #00172870!important;
  }
  body.mobile-pro-v172.auction-timer-v171 .clock i{width:30px!important;height:30px!important;font-size:11px!important}
  body.mobile-pro-v172 .clock-label171{display:none!important}

  /* Only one opponent on the left and the human/current card on the right. */
  body.mobile-pro-v172.reference-v120 .hud-players{
    top:48px!important;left:7px!important;right:7px!important;z-index:82!important;
    display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:8px!important;
  }
  body.mobile-pro-v172.reference-v120 .hud-col{width:126px!important;max-width:126px!important;gap:0!important}
  body.mobile-pro-v172.reference-v120 .hud-col .phud:not(:first-child){display:none!important}
  body.mobile-pro-v172.reference-v120 .phud{
    width:126px!important;min-width:0!important;max-width:126px!important;height:42px!important;
    padding:3px 5px!important;gap:5px!important;border-radius:12px!important;border-width:1.5px!important;
    box-shadow:0 4px 0 #71460c,0 8px 16px #00162660!important;background:#062945f0!important;
  }
  body.mobile-pro-v172.reference-v120 .phud>img{
    width:34px!important;height:36px!important;margin:0!important;border-radius:9px!important;object-fit:cover!important;
  }
  body.mobile-pro-v172.reference-v120 .phud-meta{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;line-height:1!important}
  body.mobile-pro-v172.reference-v120 .phud-meta>b{font-size:9px!important;line-height:1.1!important}
  body.mobile-pro-v172.reference-v120 .phud small{font-size:7px!important;line-height:1.1!important}
  body.mobile-pro-v172.reference-v120 .phud-meta .laps,
  body.mobile-pro-v172.reference-v120 .phud-meta .worth,
  body.mobile-pro-v172.reference-v120 .phud-meta .debt,
  body.mobile-pro-v172.reference-v120 .phud-cards,
  body.mobile-pro-v172.reference-v120 .xp-bar,
  body.mobile-pro-v172.reference-v120 .phud-dots{display:none!important}
  body.mobile-pro-v172 .classic-rank-badge{width:21px!important;height:21px!important;font-size:8px!important}

  /* ---- Board: deliberately a little wider than the phone.
     The small crop is a game-style camera treatment and makes labels/assets larger. ---- */
  body.mobile-pro-v172.reference-v120 .stage#stage3d{
    position:fixed!important;inset:0!important;width:100vw!important;height:100svh!important;min-height:0!important;
    padding:96px 0 calc(170px + var(--v172-safe))!important;
    display:flex!important;align-items:flex-start!important;justify-content:center!important;
    overflow:hidden!important;perspective:1600px!important;
  }
  body.mobile-pro-v172.reference-v120 .board-scene{
    width:calc(100vw + 26px)!important;max-width:none!important;max-height:none!important;
    flex:0 0 auto!important;--cam-rx:0deg!important;--cam-y:0px!important;--cam-scale:1!important;
    --cam-rz:0deg!important;transform-origin:50% 0!important;filter:drop-shadow(0 14px 18px #00354c55)!important;
  }
  body.mobile-pro-v172.board-focus-v172.reference-v120 .board-scene{
    width:calc(100vw + 58px)!important;
  }
  body.mobile-pro-v172.reference-v120 .board{border-radius:16px!important;padding:6px!important}
  body.mobile-pro-v172.reference-v120 .tile-3d{font-size:8px!important}
  body.mobile-pro-v172.reference-v120 .plate{font-size:7px!important;font-weight:900!important}
  body.mobile-pro-v172.reference-v120 .classic-center-brand{min-width:118px!important;padding:4px 9px!important}
  body.mobile-pro-v172.reference-v120 .classic-center-brand b{font-size:10px!important}

  /* ---- Context dock fills the old empty sky gap with useful information. ---- */
  body.mobile-pro-v172 .v172-mobile-status{
    position:fixed;display:grid!important;z-index:73;
    top:calc(103px + 100vw);left:8px;right:8px;height:104px;
    grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:6px 8px;
    padding:9px 10px;border:1.5px solid #e7b63f;border-radius:16px;
    background:linear-gradient(180deg,#0a3858f5,#041d31f8);
    box-shadow:0 5px 0 #67410c,0 12px 28px #0013217d,inset 0 1px #ffffff12;
    direction:rtl;color:#fff;overflow:hidden;
  }
  body.mobile-pro-v172 .v172-status-main{min-width:0;display:flex;align-items:center;gap:8px}
  body.mobile-pro-v172 .v172-status-avatar{width:38px;height:38px;border-radius:11px;object-fit:cover;border:1px solid #f1c44f;background:#061c2e}
  body.mobile-pro-v172 .v172-status-copy{min-width:0}
  body.mobile-pro-v172 .v172-status-copy small{display:block;color:#69e4ed;font-size:7px;font-weight:900}
  body.mobile-pro-v172 .v172-status-copy b{display:block;color:#ffe78c;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.mobile-pro-v172 .v172-status-copy span{display:block;color:#bed8e4;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.mobile-pro-v172 .v172-status-tools{display:flex;gap:5px;align-items:center}
  body.mobile-pro-v172 .v172-status-tools button{
    width:38px;height:38px;border-radius:11px;border:1px solid #d6aa3d;background:#082944;color:#fff;font-size:17px;
  }
  body.mobile-pro-v172 .v172-status-strip{
    grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;min-width:0;
  }
  body.mobile-pro-v172 .v172-status-strip>div{
    min-width:0;padding:5px 6px;border:1px solid #285a74;border-radius:9px;background:#061f34;text-align:center;
  }
  body.mobile-pro-v172 .v172-status-strip small{display:block;color:#80b6c9;font-size:5.5px}
  body.mobile-pro-v172 .v172-status-strip b{display:block;color:#fff1b3;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* ---- Primary touch controls: large roll + large dice; nothing else competes. ---- */
  body.mobile-pro-v172.reference-v120 .hud-dice{
    position:fixed!important;left:8px!important;right:8px!important;bottom:calc(68px + var(--v172-safe))!important;
    width:auto!important;z-index:78!important;transform:none!important;max-width:none!important;
  }
  body.mobile-pro-v172.reference-v120 .dice-hud{
    width:100%!important;height:88px!important;min-height:88px!important;padding:8px 10px!important;
    border-radius:17px!important;display:grid!important;grid-template-columns:minmax(150px,1fr) auto!important;
    align-items:center!important;justify-content:stretch!important;gap:10px!important;
    background:linear-gradient(180deg,#0b3b5e,#041d31)!important;
    border:1.5px solid #e7b63d!important;box-shadow:0 5px 0 #65400d,0 12px 26px #00132080!important;
  }
  body.mobile-pro-v172.reference-v120 .roll-orb{
    grid-column:1!important;grid-row:1!important;width:100%!important;max-width:none!important;height:68px!important;
    margin:0!important;border-radius:15px!important;font-size:22px!important;line-height:1!important;
    box-shadow:0 6px 0 #82500c,0 10px 20px #001c2e66,inset 0 2px #fff7c8!important;
  }
  body.mobile-pro-v172.reference-v120 .roll-orb small{font-size:7px!important;margin-top:4px!important}
  body.mobile-pro-v172.reference-v120 .dice-pair{grid-column:2!important;grid-row:1!important;gap:6px!important}
  body.mobile-pro-v172.reference-v120 .die3d,
  body.mobile-pro-v172.reference-v120 .die{width:49px!important;height:49px!important;padding:7px!important}
  body.mobile-pro-v172 .dice-hud>.classic-dice-caption,
  body.mobile-pro-v172 .dice-hud>.gauge-wrap,
  body.mobile-pro-v172 .dice-hud>.side-items,
  body.mobile-pro-v172 .dice-hud>.ghost,
  body.mobile-pro-v172 .dice-hud>.bank-loan,
  body.mobile-pro-v172 .dice-hud>.jail-chip,
  body.mobile-pro-v172 .dice-hud>.ultimate-btn,
  body.mobile-pro-v172 .dice-hud>.trade-btn{display:none!important}
  body.mobile-pro-v172 #action>.auction-action171{min-height:72px!important;width:100%!important;font-size:10px!important;border-radius:15px!important}

  /* Hide old floating UI that duplicates the dedicated mobile shell. */
  body.mobile-pro-v172 .ref-game-rail,
  body.mobile-pro-v172 .ref-top-tools,
  body.mobile-pro-v172 .ref-bottom-left,
  body.mobile-pro-v172 .ref-bottom-right,
  body.mobile-pro-v172 .classic-chat-shell,
  body.mobile-pro-v172 .camera-dock,
  body.mobile-pro-v172 .camera-hint3d,
  body.mobile-pro-v172 .tile-lens3d,
  body.mobile-pro-v172 .emote-fab,
  body.mobile-pro-v172 .market-ticker,
  body.mobile-pro-v172 .online-badge,
  body.mobile-pro-v172.reference-v120 .quit-btn,
  body.mobile-pro-v172.reference-v120 .book-btn{display:none!important}

  /* Decision windows become true bottom sheets on phones. */
  body.mobile-pro-v172 .popup:not(.pick-board){
    align-items:end!important;place-items:end center!important;padding:8px 8px calc(8px + var(--v172-safe))!important;
  }
  body.mobile-pro-v172 .popup:not(.pick-board)>.pop{
    width:100%!important;max-width:none!important;max-height:min(78svh,690px)!important;
    border-radius:22px 22px 16px 16px!important;overflow:auto!important;overscroll-behavior:contain!important;
  }
  body.mobile-pro-v172 #popup.auction-v171-active{align-items:center!important;place-items:center!important;padding:8px!important}
  body.mobile-pro-v172 #popup.auction-v171-active>.pop{width:100%!important;max-width:520px!important;max-height:calc(100svh - 16px)!important}

  /* Drawer/result layers must stay above the action bar, not underneath it. */
  body.mobile-pro-v172 .v162-drawer{z-index:860!important}
  body.mobile-pro-v172 .v162-drawer-backdrop{z-index:850!important}
  body.mobile-pro-v172 .v162-mobile-nav{z-index:82!important}

  /* Small phones: slightly less overscan but keep controls large. */
  @media (max-width:370px){
    body.mobile-pro-v172.reference-v120 .board-scene{width:calc(100vw + 16px)!important}
    body.mobile-pro-v172.board-focus-v172.reference-v120 .board-scene{width:calc(100vw + 42px)!important}
    body.mobile-pro-v172 .v172-mobile-status{top:calc(101px + 100vw);height:100px}
    body.mobile-pro-v172.reference-v120 .hud-dice{left:6px!important;right:6px!important}
    body.mobile-pro-v172.reference-v120 .dice-hud{grid-template-columns:minmax(136px,1fr) auto!important;gap:6px!important}
    body.mobile-pro-v172.reference-v120 .die3d,body.mobile-pro-v172.reference-v120 .die{width:45px!important;height:45px!important}
  }
}

/* Short portrait devices: status becomes slimmer so everything still fits. */
@media (max-width:760px) and (max-height:760px){
  body.mobile-pro-v172 .v172-mobile-status{height:82px;padding:6px 8px;top:calc(96px + 94vw)}
  body.mobile-pro-v172 .v172-status-avatar{width:32px;height:32px}
  body.mobile-pro-v172 .v172-status-strip>div{padding:3px 4px}
  body.mobile-pro-v172.reference-v120 .stage#stage3d{padding-top:90px!important}
  body.mobile-pro-v172.reference-v120 .board-scene{width:calc(94vw + 20px)!important}
  body.mobile-pro-v172.reference-v120 .hud-dice{bottom:calc(64px + var(--v172-safe))!important}
  body.mobile-pro-v172.reference-v120 .dice-hud{height:78px!important;min-height:78px!important}
  body.mobile-pro-v172.reference-v120 .roll-orb{height:60px!important}
}

/* ========================= TABLET GAME ========================= */
@media (min-width:761px) and (max-width:1279px){
  body.mobile-pro-v172.reference-v120 .stage#stage3d{
    padding:106px 10px 156px!important;align-items:flex-start!important;
  }
  body.mobile-pro-v172.reference-v120 .board-scene{
    width:min(calc(100vw - 30px),calc(100svh - 278px),860px)!important;
    --cam-rx:2deg!important;--cam-scale:1!important;--cam-y:0!important;
  }
  body.mobile-pro-v172.reference-v120 .hud-players{top:54px!important;left:12px!important;right:12px!important}
  body.mobile-pro-v172.reference-v120 .phud{width:min(250px,40vw)!important;height:52px!important}
  body.mobile-pro-v172.reference-v120 .phud>img{width:40px!important;height:44px!important}
  body.mobile-pro-v172.reference-v120 .classic-top-center{top:6px!important}
  body.mobile-pro-v172.reference-v120 .hud-dice{bottom:68px!important;width:min(780px,calc(100vw - 20px))!important}
  body.mobile-pro-v172.reference-v120 .dice-hud{height:86px!important;min-height:86px!important}
  body.mobile-pro-v172.reference-v120 .roll-orb{width:150px!important;height:64px!important;font-size:19px!important}
  body.mobile-pro-v172.reference-v120 .die3d,body.mobile-pro-v172.reference-v120 .die{width:44px!important;height:44px!important}
}

/* ========================= MOBILE LOBBY ========================= */
@media (max-width:760px){
  body.mobile-pro-v172 .splash{padding:0!important;align-items:flex-start!important;overflow-y:auto!important;overflow-x:hidden!important;background-attachment:fixed!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open{
    width:100%!important;max-width:none!important;margin:0!important;min-height:100svh!important;
    padding:10px 10px calc(76px + var(--v172-safe))!important;border-radius:0!important;border-left:0!important;border-right:0!important;
    overflow:visible!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .ref-lobby-badge{
    margin:0 auto 7px!important;padding:7px 12px!important;border-radius:14px!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .ref-lobby-actions{gap:28px!important;margin-bottom:8px!important}
  body.mobile-pro-v172 .ref-lobby-actions button span{width:48px!important;height:48px!important;font-size:21px!important}
  body.mobile-pro-v172 .ref-lobby-actions button b{font-size:10px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .splash-heroes{
    padding:4px 18%!important;gap:1px!important;justify-content:center!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .splash-heroes img{width:44px!important;height:44px!important;flex-basis:44px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open h1{margin:3px auto 5px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .logo-trip{font-size:16px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .logo-wealth{font-size:48px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .classic-title-mark{font-size:13px!important;padding:5px 11px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .lead{font-size:9px!important;line-height:1.55!important;margin:5px auto 7px!important;-webkit-line-clamp:3!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .classic-unofficial{display:none!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .hero-badges{margin:6px 0 9px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .hero-badges span{min-height:30px!important;padding:6px 10px!important;font-size:8px!important}

  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .auth-user{
    grid-template-columns:minmax(0,1fr) auto!important;padding:10px!important;border-radius:15px!important;gap:8px!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .auth-user b{font-size:18px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .auth-user small{font-size:8px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .auth-user .ghost{height:42px!important;min-width:74px!important;font-size:10px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .ref-account-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .ref-account-stats span{min-height:30px!important;font-size:8px!important;border-radius:9px!important}

  /* horizontal tab rail: larger labels, much shorter page */
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .lobby-hub{
    position:sticky!important;top:0!important;z-index:30!important;display:flex!important;grid-template-columns:none!important;
    gap:6px!important;margin:8px -4px 10px!important;padding:7px 4px!important;overflow-x:auto!important;overflow-y:hidden!important;
    background:linear-gradient(180deg,#062c48fa,#041f35fa)!important;scrollbar-width:none!important;
  }
  body.mobile-pro-v172 .lobby-hub::-webkit-scrollbar{display:none!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .hub-tab{
    flex:0 0 94px!important;width:94px!important;height:42px!important;min-height:42px!important;padding:5px 7px!important;
    border-radius:11px!important;font-size:9px!important;white-space:nowrap!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .hub-tab::before{font-size:14px!important}

  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open #hubPlay{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open #hubPlay>.field{
    min-height:60px!important;padding:8px!important;border-radius:12px!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open #hubPlay>.field select,
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open #hubPlay>.field input{min-height:38px!important;font-size:10px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open #hubPlay>.char-pick{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .char-card{
    height:150px!important;min-height:150px!important;padding:7px!important;border-radius:13px!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .char-card img{height:104px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .char-card b{font-size:11px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .char-card span{font-size:7px!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open #startBtn{
    position:fixed!important;left:10px!important;right:10px!important;bottom:calc(10px + var(--v172-safe))!important;z-index:70!important;
    width:auto!important;min-height:58px!important;border-radius:17px!important;font-size:18px!important;
    box-shadow:0 6px 0 #7a4b0a,0 12px 28px #001523ad,0 0 25px #ffd65d44!important;
  }
}

/* Safe landscape treatment: prioritize board; status card disappears. */
@media (max-width:980px) and (max-height:620px) and (orientation:landscape){
  body.mobile-pro-v172 .v172-mobile-status{display:none!important}
  body.mobile-pro-v172.reference-v120 .stage#stage3d{padding:72px 6px 112px!important}
  body.mobile-pro-v172.reference-v120 .board-scene{width:min(calc(100svh - 184px),calc(100vw - 280px))!important}
  body.mobile-pro-v172.reference-v120 .hud-dice{bottom:54px!important;left:10%!important;right:10%!important}
  body.mobile-pro-v172.reference-v120 .dice-hud{height:62px!important;min-height:62px!important}
  body.mobile-pro-v172.reference-v120 .roll-orb{height:48px!important}
  body.mobile-pro-v172.reference-v120 .die3d,body.mobile-pro-v172.reference-v120 .die{width:36px!important;height:36px!important}
}

@media (prefers-reduced-motion:reduce){
  body.mobile-pro-v172 .board-scene{transition:none!important}
}

/* Final phone cleanup: duplicate cinematic/tip banners are desktop effects and
   collide with the compact mobile HUD. Keep the information in the real HUD/status dock. */
@media (max-width:760px){
  body.mobile-pro-v172 #cinematicBanner,
  body.mobile-pro-v172 .cinematic-banner,
  body.mobile-pro-v172 #mapIdentity140,
  body.mobile-pro-v172 .map-identity140,
  body.mobile-pro-v172 #tip,
  body.mobile-pro-v172 .turn-flash{
    display:none!important;
  }
  body.mobile-pro-v172.reference-v120 .hud-players{pointer-events:none!important}
  body.mobile-pro-v172.reference-v120 .phud{pointer-events:auto!important}
}

/* Duplicate cinematic/tutorial banners contain information already present in the HUD.
   They are removed in v172 so they never cover the board on any target device. */
body.mobile-pro-v172 #cinematicBanner,
body.mobile-pro-v172 .cinematic-banner,
body.mobile-pro-v172 #mapIdentity140,
body.mobile-pro-v172 .map-identity140,
body.mobile-pro-v172 #tip{display:none!important}

@media (min-width:761px) and (max-width:1279px){
  body.mobile-pro-v172 .v172-mobile-status{
    display:grid!important;position:fixed;z-index:73;
    top:min(calc(116px + min(calc(100vw - 30px),calc(100svh - 278px),860px)),calc(100svh - 310px));
    left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 28px));height:118px;
    grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:8px 10px;padding:11px 13px;
    border:1.5px solid #e7b63f;border-radius:18px;background:linear-gradient(180deg,#0a3858f5,#041d31f8);
    box-shadow:0 5px 0 #67410c,0 14px 32px #00132170,inset 0 1px #ffffff12;color:#fff;direction:rtl;
  }
  body.mobile-pro-v172 .v172-status-main{display:flex;align-items:center;gap:9px;min-width:0}
  body.mobile-pro-v172 .v172-status-avatar{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid #f1c44f}
  body.mobile-pro-v172 .v172-status-copy small{display:block;color:#69e4ed;font-size:8px;font-weight:900}
  body.mobile-pro-v172 .v172-status-copy b{display:block;color:#ffe78c;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.mobile-pro-v172 .v172-status-copy span{display:block;color:#bed8e4;font-size:8px}
  body.mobile-pro-v172 .v172-status-tools{display:flex;gap:6px;align-items:center}
  body.mobile-pro-v172 .v172-status-tools button{width:42px;height:42px;border-radius:12px;border:1px solid #d6aa3d;background:#082944;color:#fff;font-size:18px}
  body.mobile-pro-v172 .v172-status-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
  body.mobile-pro-v172 .v172-status-strip>div{padding:6px;border:1px solid #285a74;border-radius:10px;background:#061f34;text-align:center}
  body.mobile-pro-v172 .v172-status-strip small{display:block;color:#80b6c9;font-size:6px}
  body.mobile-pro-v172 .v172-status-strip b{display:block;color:#fff1b3;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* iPad-class screens use the same clean primary-action philosophy as phones. */
@media (min-width:761px) and (max-width:1100px){
  body.mobile-pro-v172 .dice-hud>.classic-dice-caption,
  body.mobile-pro-v172 .dice-hud>.gauge-wrap,
  body.mobile-pro-v172 .dice-hud>.side-items,
  body.mobile-pro-v172 .dice-hud>.ghost,
  body.mobile-pro-v172 .dice-hud>.bank-loan,
  body.mobile-pro-v172 .dice-hud>.jail-chip,
  body.mobile-pro-v172 .dice-hud>.ultimate-btn,
  body.mobile-pro-v172 .dice-hud>.trade-btn{display:none!important}
  body.mobile-pro-v172.reference-v120 .dice-hud{
    display:grid!important;grid-template-columns:minmax(180px,1fr) auto!important;justify-content:center!important;gap:14px!important;padding-inline:18px!important;
  }
  body.mobile-pro-v172.reference-v120 .roll-orb{width:100%!important;max-width:260px!important;margin-inline:auto!important}
  body.mobile-pro-v172.reference-v120 .dice-pair{display:flex!important;gap:8px!important}
}

/* Never leak game-only compact chrome into the lobby/auth screens. */
@media (max-width:1279px){
  body.mobile-pro-v172:not(.v172-playing) .v162-mobile-nav,
  body.mobile-pro-v172:not(.v172-playing) .v162-drawer,
  body.mobile-pro-v172:not(.v172-playing) .v162-drawer-backdrop,
  body.mobile-pro-v172:not(.v172-playing) .v172-mobile-status{display:none!important}
}

/* Decision modal owns the screen on compact devices. No HUD/nav may sit on top of it. */
@media (max-width:1279px){
  body.mobile-pro-v172.v172-popup-open .v172-mobile-status,
  body.mobile-pro-v172.v172-popup-open .v162-mobile-nav,
  body.mobile-pro-v172.v172-popup-open .hud-dice{display:none!important}
}

/* Intrinsic-width reset for the mobile lobby. Older desktop grids could force the
   whole lobby to ~1000px even inside a 390px viewport. */
@media (max-width:760px){
  body.mobile-pro-v172 #app,
  body.mobile-pro-v172 .splash{width:100vw!important;max-width:100vw!important;min-width:0!important;overflow-x:hidden!important}
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open{
    width:100vw!important;max-width:100vw!important;min-width:0!important;justify-self:stretch!important;
  }
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open *,
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open #hubPlay,
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .hub-panel,
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .auth-user,
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .ref-account-main,
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .lobby-hub,
  body.mobile-pro-v172.reference-v120 .splash-card.lobby-open .char-pick{
    min-width:0!important;max-width:100%!important;
  }
}