/* ══════════════════════════════════════════════════════════════════════
   BUILD 124:横屏游戏 —— 进游戏就是横屏的样子(老板:「不需要转屏,进去就显示横屏」)。
   做法:手机**竖着拿**的时候把整个游戏页旋转 90° 铺满屏幕;玩家自己把手机
   **转成横的**,系统一转、这里就不再额外旋转,直接变成正的满屏横屏。
   两种拿法都对,玩家什么都不用做、也不会弹「请旋转手机」。
   只作用在 body.landscape-game(进了横屏游戏才加,退出就去掉)。
   ══════════════════════════════════════════════════════════════════════ */

/* 横屏游戏期间:顶栏 / 新手引导让位,页面不滚 */
body.landscape-game{overflow:hidden}
body.landscape-game header.top,
body.landscape-game #coach{display:none !important}

/* 视图本身铺满「看得见的那一块」屏幕
   BUILD 128(老板:「iOS 玩百家乐右边会被吃掉也按不到」):iOS 的 100vh / inset:0 算的是**浏览器工具栏收起时**的高度,
   Safari / Chrome 底下那条工具栏一出来,横过来的台面最右边(= 手机的最下面)就被压在工具栏底下。
   现在改用 app.js 量出来的 --vvw / --vvh(visualViewport 真正看得见的宽高,工具栏出现 / 收起都会重量)。 */
body.landscape-game main.view.lsview{position:fixed;top:0;left:0;right:auto;bottom:auto;
  width:100vw;height:100vh;height:100dvh;width:var(--vvw,100vw);height:var(--vvh,100dvh);
  margin:0;padding:0;z-index:40;background:#05070f;overflow:hidden}
body.landscape-game main.view.lsview > .gh{display:none !important}

/* ── 手机竖着拿:把内容转 90°,宽高对调 ───────────────────────── */
@media (orientation: portrait){
  body.landscape-game .lswrap{
    position:absolute;left:0;
    /* 转过来以后:台面的左边 = 手机的最上面(刘海 / 状态栏),台面的右边 = 手机的最下面(横条 / 浏览器工具栏),都要让开 */
    top:env(safe-area-inset-top,0px);
    width:calc(var(--vvh,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    height:var(--vvw,100vw);                 /* 宽高对调 */
    transform:rotate(90deg) translateY(-100%);
    transform-origin:top left;
    overflow:hidden;
  }
}
/* ── 手机横着拿(或平板 / 电脑):正常铺满,不旋转 ───────────────── */
@media (orientation: landscape){
  body.landscape-game .lswrap{position:absolute;top:0;bottom:0;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);
    width:auto;height:100%;transform:none;overflow:hidden}
}

/* 横屏游戏里弹出来的整页浮层(规则 / 公平性 / 充值 …)要铺满真实屏幕 ——
   #app 在宽屏里是居中的窄壳,absolute 会被夹在中间,所以改成 fixed。 */
body.landscape-game .rulesfull,
body.landscape-game .modalwrap{position:fixed;inset:0;z-index:90}
/* 宽屏里规则页别拉成一行到底:正文收窄,顶栏的「中 / EN」不要撑满 */
body.landscape-game .rulesfull .rfbar > .btn{flex:0 0 auto;width:auto;min-width:96px}
body.landscape-game .rulesfull .rfbody > *{max-width:820px;margin-left:auto;margin-right:auto}

@media(prefers-reduced-motion:reduce){body.landscape-game .lswrap{transition:none}}