/* shared/theme.css - 三套主题的 CSS 变量定义 * 在每个游戏页面 切换 */ /* ===== 通用基础 ===== */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --tap-min: 48px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; padding: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; } /* ===== 主题 1: 粉色温馨（适老化）===== */ :root[data-theme="cute"] { --bg: #fff5f5; --bg-2: #ffe6ec; --primary: #ff9eb5; --primary-dark: #e87a96; --accent: #ffb86b; --on-primary: #5d4e37; --text: #5d4e37; --text-soft: #8a7765; --border: #ffd1dc; --shadow: 0 4px 16px rgba(255, 158, 181, 0.20); --radius: 16px; --font: ui-rounded, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --font-display: var(--font); --font-size-base: 18px; --font-size-lg: 1.4rem; --font-size-xl: 1.8rem; } /* ===== 主题 2: 怀旧街机霓虹 ===== */ :root[data-theme="arcade"] { --bg: #0a0a14; --bg-2: #11111e; --primary: #ff2d92; --primary-dark: #c01573; --accent: #00f0ff; --on-primary: #0a0a14; --neon-purple: #b14eff; /* arcade-only — don't reference in shared rules */ --neon-yellow: #fff35e; /* arcade-only — don't reference in shared rules */ --text: #f4f4ff; --text-soft: #9090b8; --border: #2c2c44; --shadow: 0 0 20px var(--accent), 0 0 40px var(--primary); --radius: 4px; --font: "Press Start 2P", "VT323", "Courier New", monospace; --font-display: "Press Start 2P", "VT323", monospace; --font-size-base: 14px; --font-size-lg: 1.3rem; --font-size-xl: 1.6rem; } /* CRT 扫描线（可通过 .effects-off 关闭） */ :root[data-theme="arcade"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px ); mix-blend-mode: multiply; } :root[data-theme="arcade"].effects-off body::before { display: none; } /* ===== 主题 3: 纸笔报刊（数独）===== */ :root[data-theme="paper"] { --bg: #f5e8c8; --bg-2: #ecdfa9; --primary: #2c2c2c; --primary-dark: #000; --accent: #1f4e8c; --on-primary: #f5e8c8; --text: #2c2c2c; --text-soft: #6b6b6b; --border: #2c2c2c; --shadow: 2px 2px 0 #2c2c2c; --radius: 0; --font: Georgia, "Times New Roman", "Songti SC", "SimSun", serif; --font-display: Georgia, "Times New Roman", serif; --font-size-base: 18px; --font-size-lg: 1.4rem; --font-size-xl: 1.8rem; } /* 纸纹效果 */ :root[data-theme="paper"] body { background-image: radial-gradient(circle at 20% 35%, rgba(0, 0, 0, 0.02) 0, transparent 40%), radial-gradient(circle at 75% 65%, rgba(0, 0, 0, 0.025) 0, transparent 50%); } /* ===== 通用按钮（继承主题）===== */ .btn { min-width: var(--tap-min); min-height: var(--tap-min); padding: 12px 20px; font-family: var(--font); font-size: var(--font-size-base); background: var(--primary); color: var(--on-primary); border: none; border-radius: var(--radius); cursor: pointer; box-shadow: var(--shadow); transition: transform 0.06s ease; } .btn:active { transform: scale(0.96); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn--ghost { background: transparent; color: var(--text); border: 2px solid var(--border); box-shadow: none; }