/*
* ============================================
* 统一页面布局模板 - shared/layout.css
* ============================================
*
* 适配目标：
* - iPhone 灵动岛 (Dynamic Island) 及刘海屏
* - 微信 WebView 右上角胶囊按钮 (约 87×32px)
* - 屏幕四角大圆角
* - 底部 Home Indicator
*
* 使用方式：
* 1. viewport 必须包含 viewport-fit=cover:
*
*
* 2. 引入此 CSS (在游戏自身 CSS 之前):
*
*
*
* 3. 使用标准 HTML 结构:
*
*
*
*
*
* ============================================
* 布局示意图：
* ============================================
*
* ┌─────────────────────────────────────┐
* │ ░░░░░░ 系统状态栏 / 灵动岛 ░░░░░░░░ │ ← safe-area-inset-top
* ├─────────────────────────────────────┤
* │ [← 返回] 游戏标题 [微信胶囊🔘] │ ← .game-header (44px)
* ├─────────────────────────────────────┤
* │ 难度 / 控制区域 │ ← .game-controls (可选)
* ├─────────────────────────────────────┤
* │ │
* │ 主 游 戏 区 域 │ ← .game-main (flex:1)
* │ │
* │ │
* ├─────────────────────────────────────┤
* │ 状态 / 按钮 / 音量条 │ ← .game-footer (可选)
* ├─────────────────────────────────────┤
* │ ░░░░░░░░ Home Indicator ░░░░░░░░░░ │ ← safe-area-inset-bottom
* └─────────────────────────────────────┘
*/
/* ============================================
CSS 变量
============================================ */
:root {
/* 系统安全区域 */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
/* 微信胶囊按钮：右上角约 87px 宽，需预留避让空间 */
--wechat-capsule-width: 100px;
/* 导航栏高度 */
--nav-height: 44px;
/* 页面水平内边距 */
--page-px: 16px;
/* 屏幕圆角安全余量 */
--corner-inset: 8px;
/* 主题色 - 各游戏可在自身 CSS 中覆盖 */
--title-color: white;
--title-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
--back-btn-bg: rgba(255, 255, 255, 0.15);
--back-btn-color: white;
--text-secondary: rgba(255, 255, 255, 0.8);
}
/* ============================================
基础重置
============================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ============================================
页面容器 - 全屏 flex 纵向布局
============================================ */
body.game-layout {
font-family: 'Comic Sans MS', -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
width: 100vw;
height: 100vh;
height: 100dvh;
overflow: hidden;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.game-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
/* 安全区域 + 圆角余量 */
padding-top: calc(var(--safe-top) + var(--corner-inset));
padding-bottom: calc(var(--safe-bottom) + var(--corner-inset));
padding-left: calc(var(--safe-left) + var(--page-px));
padding-right: calc(var(--safe-right) + var(--page-px));
}
/* ============================================
导航栏 / 头部
============================================ */
.game-header {
display: flex;
align-items: center;
justify-content: center;
height: var(--nav-height);
min-height: var(--nav-height);
flex-shrink: 0;
position: relative;
margin-bottom: 8px;
}
/* 返回按钮 - 左侧固定 */
.game-header .back-btn {
position: absolute;
left: 0;
padding: 6px 14px;
background: var(--back-btn-bg);
color: var(--back-btn-color);
text-decoration: none;
border-radius: 18px;
font-size: 0.85rem;
transition: background 0.3s;
white-space: nowrap;
z-index: 10;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.game-header .back-btn:active {
opacity: 0.7;
}
/* 页面标题 - 居中，避开两侧 */
.game-header .game-title,
.game-header h1 {
color: var(--title-color);
font-size: 1.15rem;
font-weight: 600;
text-shadow: var(--title-shadow);
text-align: center;
/* 避开左侧返回按钮(~80px) 和右侧微信胶囊(~100px) */
max-width: calc(100% - 80px - var(--wechat-capsule-width));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================
控制区域（难度选择等）
============================================ */
.game-controls {
flex-shrink: 0;
margin-bottom: 8px;
text-align: center;
}
/* ============================================
主游戏区域 - 自动填充剩余空间
============================================ */
.game-main {
flex: 1;
position: relative;
min-height: 0; /* 允许 flex 收缩 */
overflow: hidden;
}
/* ============================================
底部状态 / 操作区
============================================ */
.game-footer {
flex-shrink: 0;
padding-top: 8px;
text-align: center;
}