* { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; overflow-x: hidden; max-width: 100%; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
            background: linear-gradient(180deg, #0d1b2a, #1b263b);
            color: #e8e8e8; padding: 0;
            max-width: 720px; margin: 0 auto; overflow: hidden;
        }
        /* 整屏不滚动布局：游戏区填满视口，牌桌弹性收缩，行动栏常驻底部 */
        #game-section { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
        #lobby-view  { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
        #table-view  { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
        #table-area  { flex: 1; min-height: 0; overflow: hidden;
                       display: flex; flex-direction: column; justify-content: flex-start;
                       transition: padding-bottom 0.15s; }
        /* ── 横屏模式（给电脑浏览器/大屏用）──
           默认 body 被限制在 max-width:720px（按竖屏手机做的），所以大屏上整个应用只占中间
           窄窄一条、两侧全是空白 —— 这才是「横屏只有牌变大、牌桌没变大」的真正原因。
           横屏模式解除该限制，让牌桌真正铺满整个页面；牌面改以高度为主缩放，于是牌更大。*/
        body.layout-landscape { max-width: none; }
        body.layout-landscape #table-area { width: 100%; position: relative; }
        /* 铺满后横向变宽，座位环相应外扩（rx 在 ringPos 里按模式取值） */
        /* --card-h 在 :root 上是按 :root 的 --card-w 算出来的，只覆盖 --card-w 不会跟着变，必须一起覆盖 */
        body.layout-landscape { --card-w: clamp(26px, min(5.2vw, 7.4dvh), 58px);
                                --card-h: calc(clamp(26px, min(5.2vw, 7.4dvh), 58px) * 1.39); }
        /* 合规横幅 */
        #compliance-banner { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 3;
            font-size: 10.5px; letter-spacing: 1px; color: rgba(255,255,255,0.32); white-space: nowrap;
            pointer-events: none; }
        /* 环形座位层 + 中央牌面：全绝对定位，行动浮层不再推动布局
           ⚠️ 安全边距（别再删）：座位块以自身中心定位(translate -50%,-50%)，其【上方】还挂着
           名字、下注 chip 徽章、对手牌覆盖层、全押胜率徽章(top:-34px)，最多要探出约 70px。
           顶部 28px = 合规横幅(top:4px、约 14px 高) 之下再留一点余量；座位向上探出的部分由 ringPos 的半径夹取兜底。
           （房间信息水印已移回牌桌内圈，不再需要为它在顶部留一大条——那会把座位全挤到中间。）*/
        #ring-layer { position: absolute; top: 28px; right: 10px; bottom: 14px; left: 10px;
                      pointer-events: none; transform-origin: 50% 48%; }
        /* 坐下入座：整圈座位旋转入位动画 */
        #ring-layer.rotating { animation: ringRotateIn 0.6s cubic-bezier(0.22,1,0.36,1); }
        @keyframes ringRotateIn {
            0%   { transform: rotate(-22deg) scale(0.94); opacity: 0.45; }
            60%  { opacity: 1; }
            100% { transform: rotate(0deg) scale(1); opacity: 1; }
        }
        #ring-layer .ring-seat, #ring-layer .empty-seat { pointer-events: auto; }
        .ring-seat { position: absolute; transform: translate(-50%, -50%); }
        /* 底池+公共牌：落在「两侧座位之间的空档」上。
           9-max 竖屏时左右座位正好在 39% 一带，公共牌那一排会压住他们的后手筹码数字，
           所以整体下移到两排座位中间的空带（由 seatfit 的公共牌不压座位断言把关）。*/
        #board { position: absolute; left: 50%; top: 43%; transform: translate(-50%, -50%);
            text-align: center; z-index: 2; pointer-events: none; }
        #spectator-banner { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%);
            background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.7); font-size: 13px;
            padding: 6px 16px; border-radius: 16px; white-space: nowrap; z-index: 5; }
        #user-bar { flex-shrink: 0; }
        /* 管理员面板：它是 #game-section(100dvh 纵向 flex) 的直接子项。
           原来写死 flex-shrink:0 → 内容一多就顶出视口、又没有自己的滚动条，手机端直接看不全。
           改成可收缩 + 自带滚动，并限高，保证任何屏幕都能翻到底。*/
        #admin-panel { flex-shrink: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
                       max-height: 78dvh; }
        /* 预操作：两个小按钮分列在「自己人物」左右两侧（贴近中部好点，不遮手牌）*/
        #preaction-bar { position: absolute; left: 0; right: 0; bottom: 120px; z-index: 18;
            display: flex; justify-content: center; align-items: center;
            gap: clamp(150px, 52vw, 250px); pointer-events: none; }
        .pa-btn { pointer-events: auto; padding: 8px 14px; border-radius: 11px; font-size: 13px; font-weight: bold;
            background: rgba(13,22,36,0.92); border: 1.5px solid rgba(255,255,255,0.24); color: #cdd9ef; cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.45); }
        .pa-btn.sel { background: #3a86ff; border-color: #3a86ff; color: #fff; box-shadow: 0 0 0 2px rgba(58,134,255,0.35); }
        /* 行动悬浮球：悬浮在「自己座位+手牌」的正上方（德扑之星式），不遮挡手牌 */
        #action-bar {
            position: absolute; left: 6px; right: 6px; bottom: 150px; z-index: 20;
            background: none; border: none; box-shadow: none;
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            pointer-events: none;   /* 容器透传：透明空隙不拦截，下方头像可点 */
        }
        /* Straddle 小标志：贴在牌桌右边缘（在「牌谱」箭头上方），随时可点、不打断行动。
           点一下 = 下一手我 straddle；点完/下一手开始就消失。*/
        #straddle-flag { position:absolute; right:0; top:44%; transform:translateY(-50%);
            z-index:19; display:flex; flex-direction:column; align-items:center; gap:1px;
            padding:7px 5px 7px 7px; border:0; cursor:pointer;
            border-radius:10px 0 0 10px; background:rgba(120,72,10,.85);
            box-shadow:0 2px 10px rgba(0,0,0,.5); color:#ffe6a8; font-weight:800;
            animation: strPulse 1.8s ease-in-out infinite; }
        #straddle-flag .sf-tag { font-size:10px; letter-spacing:.5px; }
        #straddle-flag .sf-n { font-size:13px; color:#fff3d0; }
        @keyframes strPulse { 0%,100% { box-shadow:0 2px 10px rgba(0,0,0,.5); }
            50% { box-shadow:0 2px 10px rgba(0,0,0,.5), 0 0 14px rgba(255,190,80,.75); } }
        #action-bar button, #action-bar input, #action-bar .size-quick { pointer-events: auto; }
        /* 精调面板展开时给个底板，便于看清滑条
           注意：不要用 backdrop-filter:blur——拖动滑条会每帧重算模糊，手机上严重卡顿。
           背景已近乎不透明(0.98)，无需模糊。 */
        #sizing-row { background: rgba(13,22,36,0.98) !important;
            border: 1px solid rgba(255,255,255,0.14); contain: layout paint; }
        /* 拖动加注条时：暂停座位呼吸光/火光/环形等持续 box-shadow 重绘（手机 GPU 每帧重算=卡）*/
        body.sizing-open .seat.acting .avatar-block,
        body.sizing-open .seat.allin .avatar-block,
        body.sizing-open .seat.winner .avatar-block,
        body.sizing-open .avatar-ring,
        body.sizing-open .seat.lowtime .avatar-block { animation: none !important; }
        body.in-room .lobby-only { display: none !important; }
        body:not(.in-room) .room-only { display: none !important; }
        body.in-room #user-bar { display: none; }   /* 牌局中顶栏隐藏，控制移到底部 */
        /* 底部控制栏 */
        #table-controls {
            position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
            display: flex; justify-content: space-between; align-items: center;
            padding: 4px 8px; pointer-events: none;
        }
        body:not(.in-room) #table-controls { display: none; }
        #table-controls .tc-left, #table-controls .tc-right { display: flex; gap: 8px; pointer-events: auto; }
        .tc-btn {
            min-width: 38px; height: 34px; padding: 0 8px; border-radius: 9px;
            background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.18); color: #fff;
            font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
        }
        .tc-btn:disabled { opacity: 0.4; }
        .tc-btn.disabled { opacity: 0.5; }
        .tc-btn #tcAddInfo { font-size: 11px; }
        .set-actions { display: flex; flex-wrap: wrap; gap: 8px; }
        .sa-btn { flex: 1; min-width: 110px; background: #3a4a60; color: #fff; border: none;
            border-radius: 8px; padding: 10px; font-size: 14px; font-weight: bold; cursor: pointer; }
        .sa-btn.danger { background: #6a2a2a; color: #ff9a9a; }
        /* 窄屏 / 矮屏进一步压缩间距，保证整屏不滚动 */
        @media (max-width: 480px) {
            #user-bar { padding: 5px 10px; gap: 6px; font-size: 13px; margin-bottom: 6px; }
            #user-bar button { padding: 3px 8px; font-size: 11px; }
            #table-topbar { padding: 5px 8px; gap: 6px; margin-bottom: 5px; }
            #sng-info { font-size: 11px; }
            #table-topbar .leave-btn, #table-topbar .sound-btn, #table-topbar .dissolve-btn,
            button.start { padding: 4px 8px; font-size: 12px; }
            #table-area { padding: 8px 6px; }
            .seat { padding: 4px 6px; }
            .seat .name { font-size: 11px; }
            .seat .chips { font-size: 12px; }
            .pot-total { font-size: 16px; } #pot { margin-bottom: 5px; }
            #action-bar { padding: 7px; gap: 6px; margin: 0; }
            .action-btn { padding: 8px 10px; min-width: 52px; font-size: 12px; }
            .size-quick { padding: 4px 9px; font-size: 11px; }
        }