/* ═══════════════════════════════════════════════════════════ 皇冠国际 · 移动端共享样式 v20260705 ── 三层结构 ── [1] 全局安全层：防溢出/点击优化/安全区/输入防缩放（所有手机页生效） [2] 横屏游戏层：满屏游戏整页旋转成横屏（rb-force-landscape，不动其内部布局） [3] 竖屏内容升级层：首页/钱包/体育/优惠/VIP 等竖屏内容页的 流式字号·间距·栅格·弹窗·表单·导航自适应（rb-mobile:not(.rb-force-landscape)） 配合 responsive.js： 加 rb-mobile / rb-desktop / rb-force-landscape。 ═══════════════════════════════════════════════════════════ */ /* ══════════ [1] 全局安全层 ══════════ */ html.rb-mobile, html.rb-mobile body { max-width: 100%; } html.rb-mobile img, html.rb-mobile video, html.rb-mobile canvas { max-width: 100%; } html.rb-mobile * { -webkit-tap-highlight-color: rgba(255,255,255,.08); } html.rb-mobile body { -webkit-overflow-scrolling: touch; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } /* iOS 输入聚焦时页面缩放：字号 ≥16px 可彻底避免 */ html.rb-mobile input, html.rb-mobile textarea, html.rb-mobile select { font-size: 16px; } /* ══════════ [2] 横屏游戏：进入即横屏 ══════════ 竖屏时把整页旋转 90° 铺满屏；用户把手机转到横向即为正立。 用 dvh/dvw 抵消浏览器地址栏高度误差。仅 rb-force-landscape 页生效。 */ @media screen and (orientation: portrait) { html.rb-mobile.rb-force-landscape { overflow: hidden; height: 100%; } html.rb-mobile.rb-force-landscape body { position: fixed; top: 0; left: 0; width: 100vh; width: 100dvh; height: 100vw; height: 100dvw; min-height: 0; max-width: none; max-height: none; margin: 0; overflow: hidden; transform-origin: top left; transform: rotate(90deg) translateY(-100vw); transform: rotate(90deg) translateY(-100dvw); box-sizing: border-box; } html.rb-mobile.rb-force-landscape .scene, html.rb-mobile.rb-force-landscape .table { width: 100vh !important; width: 100dvh !important; height: 100vw !important; height: 100dvw !important; max-width: none !important; max-height: none !important; } } /* ══════════ [3] 竖屏内容升级层 ══════════ 变量 --rb-fs 为流式基准字号：小屏(≈320)→14px，标准(≈390)→15.3px，大屏(≥430)→16px。 以视口宽做线性插值，天然适配任意机型（iPhone SE / 15 / Pro Max / 各安卓）。 */ html.rb-mobile:not(.rb-force-landscape) { --rb-fs: clamp(13.5px, 3.9vw, 16.5px); --rb-gap: clamp(8px, 2.6vw, 14px); --rb-pad: clamp(12px, 4vw, 20px); --rb-radius: clamp(10px, 2.8vw, 16px); } /* ── 流式正文字号（仅在页面未显式设定时兜底放大可读性）── */ html.rb-mobile:not(.rb-force-landscape) body { font-size: var(--rb-fs); } /* ── 栅格：任意「*grid*」两列自适应，超窄屏单列 ── */ html.rb-mobile:not(.rb-force-landscape) .games-grid, html.rb-mobile:not(.rb-force-landscape) .game-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--rb-gap) !important; } @media (max-width: 359px) { html.rb-mobile:not(.rb-force-landscape) .games-grid, html.rb-mobile:not(.rb-force-landscape) .game-grid { grid-template-columns: 1fr !important; } } /* 通用统计/方式/额度多列栅格 → 手机 2 列不挤 */ html.rb-mobile:not(.rb-force-landscape) .balance-row, html.rb-mobile:not(.rb-force-landscape) .method-grid, html.rb-mobile:not(.rb-force-landscape) .hero-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--rb-gap) !important; } /* ── 卡片圆角/内距随屏放缩，图标不过大 ── */ html.rb-mobile:not(.rb-force-landscape) .game-card { border-radius: var(--rb-radius) !important; } html.rb-mobile:not(.rb-force-landscape) .game-card-bg { font-size: clamp(40px, 13vw, 68px) !important; } html.rb-mobile:not(.rb-force-landscape) .game-card-name { font-size: clamp(14px, 4.2vw, 18px) !important; } html.rb-mobile:not(.rb-force-landscape) .game-card-sub { font-size: clamp(10px, 3vw, 12px) !important; } /* ── 首页 Hero：巨字流式，绝不溢出 ── */ html.rb-mobile:not(.rb-force-landscape) .hero-title-main, html.rb-mobile:not(.rb-force-landscape) .hero-title { font-size: clamp(44px, 17vw, 108px) !important; line-height: 1.02 !important; } html.rb-mobile:not(.rb-force-landscape) .hero-title-sub { font-size: clamp(20px, 6.6vw, 40px) !important; letter-spacing: .12em !important; } html.rb-mobile:not(.rb-force-landscape) .hero-desc { font-size: clamp(12px, 3.4vw, 15px) !important; } html.rb-mobile:not(.rb-force-landscape) .hero-stat-num { font-size: clamp(18px, 5.4vw, 28px) !important; } html.rb-mobile:not(.rb-force-landscape) .hero-stat-label{ font-size: clamp(9px, 2.7vw, 12px) !important; } html.rb-mobile:not(.rb-force-landscape) .hero-cta { flex-wrap: wrap !important; } /* ── 弹窗：手机上近满宽、可滚动、不出屏 ── */ html.rb-mobile:not(.rb-force-landscape) .modal, html.rb-mobile:not(.rb-force-landscape) .modal-box, html.rb-mobile:not(.rb-force-landscape) .mj-stake-box, html.rb-mobile:not(.rb-force-landscape) [class*="modal"] > [class*="box"], html.rb-mobile:not(.rb-force-landscape) [class*="-modal"] { max-width: 94vw !important; max-height: 88vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* ── 表单：全宽、字段纵向堆叠更好点 ── */ html.rb-mobile:not(.rb-force-landscape) .form-row { grid-template-columns: 1fr !important; } html.rb-mobile:not(.rb-force-landscape) .form-input, html.rb-mobile:not(.rb-force-landscape) .submit-btn { width: 100% !important; } /* ── 宽表格：包裹横向滚动，避免撑破视口 ── */ html.rb-mobile:not(.rb-force-landscape) .table-wrap, html.rb-mobile:not(.rb-force-landscape) .data-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } html.rb-mobile:not(.rb-force-landscape) table { min-width: max-content; } /* ── 点击热区：按钮/标签页最小 40px 高，好点 ── */ html.rb-mobile:not(.rb-force-landscape) .btn-login, html.rb-mobile:not(.rb-force-landscape) .btn-register, html.rb-mobile:not(.rb-force-landscape) .tab-btn, html.rb-mobile:not(.rb-force-landscape) .preset-btn, html.rb-mobile:not(.rb-force-landscape) .method-card, html.rb-mobile:not(.rb-force-landscape) .view-tab { min-height: 40px; } /* ── 顶栏：手机上压缩，logo/字号收敛，桌面导航项隐藏交给汉堡 ── */ html.rb-mobile:not(.rb-force-landscape) .navbar { padding-left: var(--rb-pad) !important; padding-right: var(--rb-pad) !important; } html.rb-mobile:not(.rb-force-landscape) .nav-logo-text { font-size: clamp(13px, 3.8vw, 16px) !important; } html.rb-mobile:not(.rb-force-landscape) .nav-logo-sub { font-size: clamp(8px, 2.4vw, 11px) !important; } /* ── 安全区：刘海/底部手势条留白 ── */ html.rb-mobile:not(.rb-force-landscape) body { padding-bottom: env(safe-area-inset-bottom); } html.rb-mobile:not(.rb-force-landscape) .navbar, html.rb-mobile:not(.rb-force-landscape) .top, html.rb-mobile:not(.rb-force-landscape) .topbar { padding-top: max(env(safe-area-inset-top), 6px); } /* ── 体育投注单：手机上不超屏、内部滚动 ── */ html.rb-mobile:not(.rb-force-landscape) .slip-sheet { max-width: 96vw !important; } html.rb-mobile:not(.rb-force-landscape) .slip-body { max-height: 52vh !important; overflow-y: auto !important; } /* ── 超小屏（≤360，如 iPhone SE / mini）再收一档 ── */ @media (max-width: 360px) { html.rb-mobile:not(.rb-force-landscape) { --rb-pad: 10px; --rb-gap: 7px; } } /* ── 大屏（Plus/Max/折叠展开）适度放大留白，不显空旷 ── */ @media (min-width: 430px) { html.rb-mobile:not(.rb-force-landscape) { --rb-pad: 22px; } html.rb-mobile:not(.rb-force-landscape) .games-grid, html.rb-mobile:not(.rb-force-landscape) .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* ══════════ [4] 手机端「华丽」视觉打磨层（安全增强，不改结构）══════════ */ html.rb-mobile:not(.rb-force-landscape) { scroll-behavior: smooth; } html.rb-mobile:not(.rb-force-landscape) * { -webkit-overflow-scrolling: touch; } /* 阅读节奏：正文舒适行距 */ html.rb-mobile:not(.rb-force-landscape) body { line-height: 1.5; letter-spacing: .2px; } /* 游戏卡片：金色发丝描边 + 立体阴影 + 按压回弹（更精致有质感）*/ html.rb-mobile:not(.rb-force-landscape) .game-card { box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 0 0 1px rgba(240,210,122,.18) !important; transition: transform .14s ease, box-shadow .14s ease !important; } html.rb-mobile:not(.rb-force-landscape) .game-card:active { transform: scale(.965) !important; box-shadow: 0 3px 12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(240,210,122,.4) !important; } /* 卡片大图标：柔和金光，突出但不刺眼 */ html.rb-mobile:not(.rb-force-landscape) .game-card-bg { filter: drop-shadow(0 3px 10px rgba(240,200,120,.28)) !important; } /* 主行动按钮：金色/红色渐变 + 轻微高光，点按下沉 */ html.rb-mobile:not(.rb-force-landscape) .btn-register, html.rb-mobile:not(.rb-force-landscape) .btn-hero-primary, html.rb-mobile:not(.rb-force-landscape) .submit-btn, html.rb-mobile:not(.rb-force-landscape) .btn-gold { box-shadow: 0 6px 18px rgba(201,168,76,.34), inset 0 1px 0 rgba(255,255,255,.28) !important; transition: transform .12s ease, filter .12s ease !important; } html.rb-mobile:not(.rb-force-landscape) .btn-register:active, html.rb-mobile:not(.rb-force-landscape) .btn-hero-primary:active, html.rb-mobile:not(.rb-force-landscape) .submit-btn:active, html.rb-mobile:not(.rb-force-landscape) .btn-gold:active { transform: translateY(2px) scale(.99) !important; filter: brightness(1.08) !important; } /* 段落标题：流式放大 + 字间距，气势更足 */ html.rb-mobile:not(.rb-force-landscape) .section-title, html.rb-mobile:not(.rb-force-landscape) .page-title { font-size: clamp(20px, 6vw, 30px) !important; letter-spacing: .5px !important; } html.rb-mobile:not(.rb-force-landscape) .section-eyebrow { letter-spacing: 2.5px !important; } /* 弹窗：登场动画更顺滑（缩放淡入），观感更高级 */ html.rb-mobile:not(.rb-force-landscape) .modal, html.rb-mobile:not(.rb-force-landscape) .modal-box { animation: rbModalIn .28s cubic-bezier(.2,.9,.3,1.1) both; } @keyframes rbModalIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } } /* 悬浮客服/社交按钮：避开底部手势条 + 更醒目 */ html.rb-mobile:not(.rb-force-landscape) .support-fab, html.rb-mobile:not(.rb-force-landscape) .cs-fab { bottom: calc(16px + env(safe-area-inset-bottom)) !important; box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 0 3px rgba(240,210,122,.25) !important; } /* 顶栏磨砂玻璃质感（华丽且不遮内容）*/ html.rb-mobile:not(.rb-force-landscape) .navbar { backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }