/* 小游戏标准容器：舞台 + 顶部分数栏 + 控制区 + 排行榜（mobile-only）。
   接口契约：游戏脚本只在 .mg-stage（默认 579×960，可选 def.ratio 声明改比例）内渲染，
   通过容器 api 上报分数。 */
/* 舞台：默认 579×960（≈0.603，竖长接近现代手机比例并留浏览器工具栏余量）；
   def.ratio 声明后由容器 stageOf 派生尺寸、JS 在 fit 时 inline 覆盖本 CSS 初值。
   外壳弹性填充，舞台盒在剩余空间内水平/垂直双居中
   （transform 缩放不影响游戏内坐标系） */
.mg-shell { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.mg-topbar { display: flex; align-items: center; gap: 8px; flex: none; }
.mg-score { font-size: 0.78rem; color: #4a5568; }
.mg-score b { color: #5a67d8; font-size: 0.95rem; margin-left: 2px; }
.mg-topbar .mg-btn { margin-left: auto; }
.mg-topbar .mg-btn + .mg-btn { margin-left: 6px; }
/* iOS / Material 触控建议：控件高度 ≥ 44px 以保证拇指可点；按钮 padding + 字号同时放大 */
.mg-btn {
    min-height: 44px;
    padding: 8px 14px; font-size: 0.9rem; border: none; border-radius: 6px;
    background: #667eea; color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mg-btn:hover { background: #5a67d8; }
.mg-btn-secondary { background: #fff; color: #4a5568; border: 1px solid #e2e8f0; }
.mg-btn-secondary:hover { background: #edf2f7; }
.mg-btn-invite { background: #22c55e; }
.mg-btn-invite:hover { background: #16a34a; }
.mg-btn-lobby { background: #f59e0b; }
.mg-btn-lobby:hover { background: #d97706; }
/* 舞台：默认 579×960，def.ratio 派生尺寸由 JS inline 覆盖；外壳弹性填充，
   舞台盒在剩余空间内水平/垂直双居中（transform 缩放不影响游戏内坐标系） */
.mg-stage-outer {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.mg-stage-box { flex: none; }
.mg-stage {
    width: 579px; height: 960px;
    position: relative; overflow: hidden;
    background: #1a202c; border-radius: 0;
    touch-action: none;  /* 舞台上禁浏览器默认手势，交给游戏处理滑动 */
    transform-origin: top left;
}
/* 排行榜 UI 已迁到独立容器 Leaderboard（runtime/games/leaderboard.{js,css}），
   container.js 不再内嵌 .mg-board-* DOM 与样式；本文件不再含 .mg-board-* 规则。 */
/* 游戏结束遮罩（覆盖舞台，容器统一管理） */
.mg-over {
    position: absolute; inset: 0; z-index: 5;
    background: rgba(0,0,0,.68);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; gap: 10px;
}
.mg-over .mg-over-title { font-size: 1.3rem; font-weight: 700; }
.mg-over .mg-over-score { font-size: 0.95rem; opacity: .85; }
/* 游戏结束夜空幕布：与进场加载幕布（minigameaction.js .mg-loader-*）同一视觉语言
   —— 深蓝夜空渐变 + 两层错相位星屑 + 暖金满月 + 呼吸提示；点击幕布任意处 = 再来一局 */
.mg-over-night {
    background: radial-gradient(120% 90% at 50% 30%, rgba(25,33,66,.92) 0%, rgba(9,11,24,.96) 70%);
    gap: 0; cursor: pointer;
}
.mg-over-night .mg-on-stars,
.mg-over-night .mg-on-stars-far { position: absolute; inset: 0; pointer-events: none; }
.mg-over-night .mg-on-stars {
    background-image:
        radial-gradient(1.6px 1.6px at 14% 22%, rgba(255,255,255,.9), transparent),
        radial-gradient(1.4px 1.4px at 78% 16%, rgba(255,255,255,.75), transparent),
        radial-gradient(1.8px 1.8px at 64% 70%, rgba(255,255,255,.8), transparent),
        radial-gradient(1.3px 1.3px at 28% 82%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 88% 48%, rgba(255,255,255,.85), transparent);
    animation: mg-on-twinkle 3.4s ease-in-out infinite;
}
.mg-over-night .mg-on-stars-far {
    background-image:
        radial-gradient(1.2px 1.2px at 8% 56%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.1px 1.1px at 44% 10%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.3px 1.3px at 70% 34%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 22% 42%, rgba(255,255,255,.4), transparent),
        radial-gradient(1.2px 1.2px at 52% 90%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.45), transparent);
    animation: mg-on-twinkle 2.3s ease-in-out .9s infinite;
}
@keyframes mg-on-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.mg-over-night .mg-on-moon {
    position: relative;
    font-size: 76px; line-height: 1;
    filter: drop-shadow(0 0 22px rgba(255,214,110,.45)) drop-shadow(0 0 64px rgba(255,190,80,.2));
}
.mg-over-night .mg-on-title {
    position: relative; margin-top: 22px;
    font-size: 1.35rem; font-weight: 700; letter-spacing: .3em;
    color: rgba(233,239,252,.95);
}
.mg-over-night .mg-on-score {
    position: relative; margin-top: 12px;
    font-size: 1.05rem; letter-spacing: .12em;
    color: rgba(255,214,110,.95);
}
.mg-over-night .mg-on-hint {
    position: relative; margin-top: 36px;
    font-size: 15px; letter-spacing: .38em;
    color: rgba(233,239,252,.92);
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    animation: mg-on-pulse 1.6s ease-in-out infinite;
}
@keyframes mg-on-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.mg-over-night .mg-on-guest {
    position: relative; margin-top: 14px;
    font-size: .75rem; color: rgba(233,239,252,.7);
}
/* NEXT 过场（Phase 4）：roundGame:true + decidable:false 每局结束的系统统一过渡
   ——「NEXT」大字从右划入中央 → 停留 ~0.6s → 同轨迹划出右缘；固定 ~1.2s 不可
   跳过（动画期间无结算幕布、点击由容器忽略） */
.mg-next {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.mg-next span {
    font-size: 5.5rem; font-weight: 900; letter-spacing: .12em;
    color: #fff;
    text-shadow: 0 0 28px rgba(147,197,253,.85), 0 0 72px rgba(99,102,241,.45);
    animation: mg-next-flow 1.2s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes mg-next-flow {
    0% { transform: translateX(120%); opacity: 0; }
    25% { transform: translateX(0); opacity: 1; }
    75% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}
/* 冻结帧（Phase 4）：decidable:true 单机局结束 gameOver 瞬间舞台定格，整体渐变
   压暗（z4 在结算幕布 z5 之下、游戏内容之上），随后夜空幕布在其上淡入 */
.mg-freeze {
    position: absolute; inset: 0; z-index: 4;
    background: rgba(2, 6, 23, .72);
    opacity: 0; transition: opacity .35s ease;
    pointer-events: none;
}
.mg-freeze.mg-on { opacity: 1; }
.mg-over-night { animation: mg-over-fade-in .3s ease .12s both; }
@keyframes mg-over-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .mg-over-night { animation: none; }
    .mg-next span { animation: none; }
    .mg-freeze { transition: none; opacity: 1; }
    .mg-over-night .mg-on-stars,
    .mg-over-night .mg-on-stars-far,
    .mg-over-night .mg-on-hint { animation: none; }
}
/* 暂停热区：舞台顶部中央的小圆钮（仅声明了暂停能力的游戏出现） */
.mg-pause-badge {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 4;
    width: 44px; height: 44px; border-radius: 50%;
    border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 1.05rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mg-pause-badge:active { background: rgba(0,0,0,.65); }

/* ========== 标准化联机大厅层（multiplayer:{...} 对象契约） ==========
   大厅/聊天/暂停/联机结算覆盖层：与排行榜窗口（leaderboard.css
   .lb-overlay / .lb-panel.is-overlay）完全同一视觉 —— 深色半透明 +
   强 blur + saturate 抬升 + 细白边 + 浮层阴影；白文字 + 白色虚线分隔；
   标题栏 + × 关闭钮。浮层挂在 document.body（position: fixed），不再随
   舞台 transform 缩放，与排行榜全屏弹层同屏同尺寸。面板元素用 .mg-mp-*。 */
.mg-over.mg-mp {
    position: fixed;
    inset: 0;
    /* 三层层级：游戏 stdModal 4100（底）→ 联机 4125（中）→ 排行榜 4150（上），
       与排行榜 .lb-overlay 同层叠规则（游戏之上、排行榜之下）。 */
    z-index: 4125;
    background: rgba(0, 0, 0, 0.55);
    gap: 0;
    cursor: zoom-out;
}
.mg-mp-panel {
    display: flex;
    flex-direction: column;
    /* 与 .lb-panel.is-overlay 同尺寸：宽 560、max-height 随视口 */
    width: min(560px, calc(100% - 24px));
    max-height: calc(100vh - 60px);
    background: rgba(15, 20, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
/* 标题栏：同排行榜 .lb-head（虚线分隔 + 标题 + 关闭钮） */
.mg-mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}
.mg-mp-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
    font-weight: 600;
    color: #e2e8f0;
}
.mg-mp-close {
    flex: none;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.mg-mp-close:active { background: rgba(255, 255, 255, 0.12); }
/* 内容区：竖排铺满宽度（同排行榜列表密度），超高时面板内滚动 */
.mg-mp-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mg-mp-room {
    font-size: .88rem; letter-spacing: .1em;
    color: rgba(233, 239, 252, .85);
    text-align: center;
}
.mg-mp-room b { color: rgba(255, 214, 110, .95); letter-spacing: 3px; margin-left: 4px; }
.mg-mp-seats {
    width: 100%;
    display: flex; flex-direction: column;
}
/* 座位行：与排行榜 .lb-row 同款 —— 虚线分隔 + 白字，当前玩家行浅白底 */
.mg-mp-seat {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    background: transparent;
    font-size: .95rem; color: #e2e8f0;
}
.mg-mp-seat:last-child { border-bottom: none; }
.mg-mp-seat.me { background: rgba(255, 255, 255, 0.06); }
.mg-mp-seat-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500;
}
.mg-mp-seat-empty { color: rgba(233, 239, 252, .4); font-size: .85rem; }
.mg-mp-ready { color: #7ee2a0; font-size: .8rem; }
.mg-mp-unready { color: rgba(255, 214, 110, .9); font-size: .8rem; }
.mg-mp-off { color: rgba(233, 239, 252, .5); font-size: .8rem; }
.mg-mp-op {
    min-height: 30px; padding: 2px 14px; font-size: .8rem;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
    background: rgba(255, 255, 255, .08); color: #e2e8f0; cursor: pointer;
    font-family: inherit;
}
.mg-mp-op:hover { background: rgba(255, 255, 255, .16); }
/* 等待/提示文案：同排行榜 .lb-tip（呼吸提示复用 mg-on-pulse 动画，加
   .mg-mp-breathe 即得） */
.mg-mp-hint {
    text-align: center;
    font-size: .92rem;
    color: rgba(255, 255, 255, .6);
    padding: 8px 16px;
}
.mg-mp-breathe { animation: mg-on-pulse 1.6s ease-in-out infinite; }
/* 暂停浮层非房主「离开房间」按钮 */
.mg-mp-leave-btn {
    display: block; margin: 14px auto 0; padding: 8px 28px;
    border: 1px solid rgba(255,255,255,.2); border-radius: 20px;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
    font-size: .85rem; cursor: pointer;
}
.mg-mp-leave-btn:active { background: rgba(255,255,255,.18); }
/* 联机结算结果行 */
.mg-mp-result {
    text-align: center;
    font-size: 1.05rem; letter-spacing: .1em;
    color: rgba(255, 214, 110, .95);
}
/* 主行动区：竖排按钮（创建房间/随机匹配/开始游戏/邀请好友/离开房间…）。
   全部改玻璃胶囊（同排行榜 tab 的浅白底 + 细白边 + 圆角胶囊），
   邀请保留绿色调、次级按钮更透明，主/次级层级靠底色深浅区分 */
.mg-mp-actions {
    display: flex; flex-direction: column; gap: 10px;
    width: 100%;
}
.mg-mp-actions .mg-btn {
    width: 100%;
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 600;
}
.mg-mp-actions .mg-btn:hover { background: rgba(255, 255, 255, 0.28); }
.mg-mp-actions .mg-btn:disabled { opacity: .45; cursor: default; }
.mg-mp-actions .mg-btn:disabled:hover { background: rgba(255, 255, 255, 0.18); }
.mg-mp-actions .mg-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-weight: 400;
}
.mg-mp-actions .mg-btn-secondary:hover { background: rgba(255, 255, 255, 0.16); }
.mg-mp-actions .mg-btn-invite {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.45);
    color: #d1fae5;
}
.mg-mp-actions .mg-btn-invite:hover { background: rgba(34, 197, 94, 0.3); }
@media (prefers-reduced-motion: reduce) {
    .mg-mp-breathe { animation: none; }
}

/* ========== 联机顶栏（进房后替换默认顶栏：打字/表情/聊天/比分/联机） ==========
   默认顶栏（分数/重开/排名/联机）在进房后隐藏，由联机顶栏取代；回本地时还原。
   打字走 body 级 PullSearch 风格胶囊、聊天走快捷短语面板、表情走中央公告，
   均为动态浮层（样式随 container.js mpInjectMpStyle 注入）；表情选择面板绝对定位浮出。 */
.mg-shell { position: relative; }
.mg-topbar-mp { justify-content: space-evenly; }
.mg-topbar-mp .mg-btn { margin-left: 0; }
.mg-topbar-mp .mg-btn + .mg-btn { margin-left: 0; }
.mg-btn-mp {
    background: transparent;
    color: #5a67d8;
    border: 1px solid #e2e8f0;
    font-weight: 500;
}
.mg-btn-mp:hover { background: #edf2f7; color: #4c51bf; }
/* 表情面板：顶栏下方浮出的 4 列网格（display:grid 由 JS 切换） */
.mg-mp-emoji {
    position: absolute;
    top: 52px;
    left: 8px;
    z-index: 8;
    grid-template-columns: repeat(4, 44px);
    gap: 4px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.mg-mp-emoji-item {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s ease, transform .1s ease;
}
.mg-mp-emoji-item:hover { background: #edf2f7; }
.mg-mp-emoji-item:active { transform: scale(0.85); }

/* ========== 移动端沉浸模式：弹窗即游戏（类微信小程式的原生观感） ==========
   弹窗背景 = 游戏主色 var(--mg-bg)，留白区域与游戏底色一致；
   标题栏/顶栏/排行榜全部改为悬浮在游戏之上，舞台弹性填满并居中。 */
.std-modal.mg-immersive { background: var(--mg-bg, #1a202c); }
.std-modal.mg-immersive .std-modal-header {
    position: absolute;
    top: calc(6px + env(safe-area-inset-top, 0px));
    right: 8px;
    padding: 0; z-index: 8; background: transparent;
}
.std-modal.mg-immersive .std-modal-header h3 { display: none; }
.std-modal.mg-immersive .std-modal-close {
    width: 44px; height: 44px; min-height: 44px; border-radius: 50%; padding: 0;
    background: rgba(0,0,0,.4); color: #fff; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
}
.std-modal.mg-immersive .std-modal-body {
    padding: 0; overflow: hidden;
    position: relative; display: block;  /* 不用 flex 链，下面直接绝对定位钉满 */
}
.std-modal.mg-immersive .mg-shell {
    position: absolute; inset: 0;  /* 外壳 = 弹窗体，尺寸确定无疑 */
    height: auto; gap: 0; display: block;
}
.std-modal.mg-immersive .mg-stage-outer {
    position: absolute; inset: 0;  /* 画面区 = 整个外壳，居中由 flex 保证 */
    flex: none;
    display: flex; align-items: center; justify-content: center;
}
.std-modal.mg-immersive .mg-topbar {
    position: absolute;
    top: calc(6px + env(safe-area-inset-top, 0px));
    left: 8px; right: 52px; z-index: 7;
    background: rgba(0,0,0,.35); border-radius: 22px;
    height: 44px; box-sizing: border-box; padding: 0 10px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.std-modal.mg-immersive .mg-score { color: #e2e8f0; font-size: 0.82rem; }
.std-modal.mg-immersive .mg-score b { color: #fff; font-size: 0.82rem; }
/* 顶栏高度（44px）压齐右侧 X 圆圈：覆盖 .mg-btn 全局的 min-height: 44px + padding，
   按钮缩为 30px 高、靠 align-items: center 居中；分数同样由居中保证。
   沉浸模式去掉按钮方框：背景/边框清空，仅保留文字与点击热区，整体融入胶囊。 */
.std-modal.mg-immersive .mg-topbar .mg-btn {
    min-height: 0; height: 30px; padding: 0 12px; font-size: 0.82rem;
    background: transparent; border: none; color: #e2e8f0;
}
.std-modal.mg-immersive .mg-topbar .mg-btn:hover {
    background: transparent; color: #fff;
}
.std-modal.mg-immersive .mg-btn-secondary,
.std-modal.mg-immersive .mg-topbar .mg-btn-secondary {
    background: transparent; color: #e2e8f0; border: none;
}
.std-modal.mg-immersive .mg-btn-secondary:hover,
.std-modal.mg-immersive .mg-topbar .mg-btn-secondary:hover {
    background: transparent; color: #fff;
}
/* 联机顶栏快捷面板（沉浸模式）：表情选择面板钉在胶囊顶栏（44px 高）下方，同款玻璃底。
   打字胶囊 / 短语面板 / 比分面板为 body 级浮层，自带毛玻璃，无需沉浸覆盖。 */
.std-modal.mg-immersive .mg-mp-emoji {
    top: calc(56px + env(safe-area-inset-top, 0px));
    background: rgba(15, 20, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.std-modal.mg-immersive .mg-mp-emoji-item:hover { background: rgba(255, 255, 255, 0.12); }
/* 排行榜 / 联机面板：垂直居中悬浮底板，默认隐藏，点对应按钮展开。
   居中公式补偿 safe-area-inset top/bottom 差，让视觉中心落在可视区中心 */
/* 排行榜 UI 已迁出：原 .std-modal.mg-immersive .mg-board-* 一并移除（容器不再持有内嵌面板） */

/* （横屏建议提示已移除：用户反馈该提示完全无干扰价值。） */

/* ========== 游戏内瞬时横幅（mgMpBanner：联机 warn/error 的可见通道） ==========
   MobileShell.notify 全局底部 toast 已刻意下线，联机提示改走容器作用域内嵌
   横幅：挂在 #stdModalBox（position:relative）内，absolute 居中偏上，
   JS（container.js mpBanner）控制 2.5s 自动消失、重复调用复用重置不叠加。
   默认 = info 配色；未知 type（如 success）回落到默认配色。 */
.mg-mp-banner {
    position: absolute;
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;   /* 压舞台与顶栏（.mg-mp-emoji z8）；大厅等 body 级浮层（z4125+）仍在其上 */
    max-width: min(86%, 420px);
    padding: 9px 18px;
    background: rgba(15, 20, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #e7e5e4;
    font-size: .88rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;   /* 纯提示，不挡舞台输入 */
    animation: mg-mp-banner-in .18s ease-out;
}
.mg-mp-banner-warn { color: #fde68a; border-color: rgba(251, 191, 36, 0.4); }
.mg-mp-banner-error { color: #fca5a5; border-color: rgba(248, 113, 113, 0.45); }
@keyframes mg-mp-banner-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}