/* 独立底部导航模块，不改变原页面主体样式 */
:root { --bottom-actions-height: 70px; }
body { padding-bottom: calc(var(--bottom-actions-height) + env(safe-area-inset-bottom, 0px)) !important; }
.bottom-actions, .bottom-actions *, .game-modal, .game-modal * { box-sizing: border-box; }
.bottom-actions {
 position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
 z-index: 2147482000; width: 100%; height: calc(var(--bottom-actions-height) + env(safe-area-inset-bottom, 0px));
 display: flex; gap: 12px; align-items: center; justify-content: center;
 padding: 9px max(12px, env(safe-area-inset-right, 0px)) calc(9px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
 background: linear-gradient(180deg, #fff9e8 0%, #f9e1b6 100%); border-top: 2px solid #e6b44c;
 box-shadow: 0 -4px 18px rgba(79,36,7,.18); transform: none !important;
}
.bottom-actions button, .bottom-actions a {
 display: flex !important; align-items: center; justify-content: center; flex: 1; max-width: 260px;
 height: 49px !important; min-width: 0; margin: 0 !important; padding: 0 8px !important;
 border: 1px solid #a9651e; border-radius: 13px; font-family: inherit;
 font-size: 17px !important; font-weight: 800; line-height: 1.1 !important; text-decoration: none !important;
 cursor: pointer; white-space: nowrap; box-shadow: inset 0 2px 2px #ffffff66, 0 2px 4px #68320e44;
}
.bottom-actions__play { color: #fff !important; background: linear-gradient(#ef5940, #bc1d14); }
.bottom-actions__download { color: #633006 !important; background: linear-gradient(#ffe78b, #f5b72b); }
.game-modal[hidden] { display: none !important; }
.game-modal { position: fixed !important; inset: 0 !important; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; font-size: 16px; }
.game-modal__shade { position: absolute; inset: 0; background: rgba(15,10,8,.68); }
.game-modal__panel { position: relative; width: min(100%, 420px); max-height: min(85vh, 650px); overflow: auto; background: #fffaf0; border: 2px solid #e8b85c; border-radius: 18px; padding: 18px; box-shadow: 0 15px 50px #0006; }
.game-modal__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-modal__heading h2 { font-size: 21px !important; line-height: 1.3; color: #8a390c; margin: 0; font-weight: 800; }
.game-modal__close { flex: 0 0 36px; width: 36px; height: 36px; background: #f0e1ca; border: 0; border-radius: 50%; font-size: 26px; color: #6a3b1d; cursor: pointer; }
.game-modal__hint { margin: 10px 0 15px; font-size: 14px !important; color: #795a40; }
.game-modal__links { display: grid; gap: 10px; }
.game-modal__link { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 50px; padding: 10px 14px; border: 1px solid #e8c48a; border-radius: 11px; background: #fff; color: #6d370e !important; text-decoration: none !important; font-size: 16px !important; font-weight: 700; }
.game-modal__link span:last-child { color: #b75c18; font-size: 14px; white-space: nowrap; }
.game-modal__link--disabled { opacity: .55; cursor: not-allowed; }
body.game-modal-open { overflow: hidden !important; }
/* 确保原有悬浮客服不被底部栏覆盖 */
.kf, .kf2 { z-index: 99999; }
@media (min-width: 750px) { .bottom-actions { gap: 20px; } .bottom-actions button, .bottom-actions a { font-size: 19px !important; } }
@media (max-width: 350px) { .bottom-actions { gap: 8px; } .bottom-actions button, .bottom-actions a { font-size: 15px !important; } }

/* 统一手机版画布：电脑左右纯白留白，最大宽度 430px */
html { width: 100% !important; max-width: 430px !important; margin: 0 auto !important; background: #fff !important; }
body { width: 100% !important; max-width: 430px !important; margin: 0 auto !important; overflow-x: clip; }
.bottom-actions { left: 50% !important; right: auto !important; width: min(100%, 430px) !important; transform: translateX(-50%) !important; gap: 10px; }
.game-modal { left: 50% !important; right: auto !important; width: min(100%, 430px) !important; transform: translateX(-50%) !important; }
.kf, .kf2 { right: max(0px, calc((100vw - 430px) / 2)) !important; width: min(20%, 86px) !important; }
@media (min-width: 750px) { .kf, .kf2 { right: calc((100vw - 430px) / 2) !important; } }
