:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface2: #f2f5f8;
  --text: #202735;
  --muted: #8792a2;
  --accent: #e47f5f;
  --accent2: #7d72c7;
  --line: #e5e9ef;
  --success: #4f9b78;
  --warning: #d99348;
  --danger: #d46666;
  --shadow: 0 8px 24px rgba(36,49,67,.07);
}
html, body { background: var(--bg); color: var(--text); }
.phone { background: var(--surface); color: var(--text); }
.brand { color: var(--text); }
.avatar { border-color: #cfd6df; color: #536071; background: #fff; }
.hero h1, .section-head h2, .game-head h1, .game-intro h1, .simple-page h1, .profile-head h1, .modal-card h2, .empty h2, .legal-page h2 { color: var(--text); }
.hero-copy, .game-head p, .game-intro p, .recommend p, .category-card small, .page-copy, .simple-page label, .safety, .form-foot, .result small { color: #536071; }
.primary-btn { background: var(--accent); color: #fff; box-shadow: 0 6px 14px rgba(228,127,95,.2); }
.primary-btn:hover { background: #c96345; }
.game-card, .category-card, .result, .plan-card, .order-pay-card { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.game-card-top b, .result-label, .membership-teaser a, .form-foot a, .muted-link, .admin-link span { color: #c96345; }
.game-card-top i { color: var(--accent2); }
.game-card strong, .free-row strong, .category-card strong, .menu-list a, .plan-card > strong { color: var(--text); }
.free-symbol { background: #fff0e9; color: #c96345; }
.category-card label { color: #c96345; border-color: #f0c6b7; background: #fff0e9; }
.category-card label.vip { color: #7d72c7; border-color: #d8d4f4; background: #f0effc; }
.recommend { background: #fff8f3; border-color: #f1ddd4; box-shadow: var(--shadow); }
.pill { color: #c96345; background: #fff0e9; }
.arrow { color: var(--accent); }
.bottom-nav { background: rgba(255,255,255,.96); border-top-color: var(--line); box-shadow: 0 -5px 18px rgba(38,51,67,.05); }
.bottom-nav a { color: #9aa3af; }
.bottom-nav a.active { color: #c96345; }
.game-stage { background: #f2f5f8; border-color: var(--line); box-shadow: var(--shadow); }
.stage-ring { border-color: #f0c5b5; box-shadow: 0 0 0 11px #fff, 0 0 0 12px #f4d8ce; background: radial-gradient(circle,#fffaf7,#fff 70%); }
.stage-ring strong { color: var(--text); }
.result { background: #fff; }
.result p, .result-card p { color: var(--text); }
.profile-avatar { border-color: #d7dce4; color: #536071; background: #f2f5f8; }
.outline-btn { border-color: #efb4a2; color: #c96345; background: #fff; }
.menu-list, .menu-list a { border-color: var(--line); }
.menu-list a { color: var(--text); }
.menu-list span { color: var(--accent); }
.game-toolbar .back, .back, .icon-btn, .close-modal, .close-result { color: #536071; }
.pointer { color: #c96345; text-shadow: 0 2px 4px rgba(67,45,35,.15); }
.wheel { background: conic-gradient(#e9a28c 0 45deg,#b6b0dc 45deg 90deg,#f1c783 90deg 135deg,#9fcfc3 135deg 180deg,#e6a7bd 180deg 225deg,#a9c6de 225deg 270deg,#efbd91 270deg 315deg,#c2b5d9 315deg 360deg); border-color: #fff; box-shadow: 0 0 0 1px #d8dee7, 0 10px 30px rgba(42,57,75,.14); }
.wheel-core { background: #fff; border-color: #efb8a5; box-shadow: 0 4px 14px rgba(42,57,75,.12); }
.wheel-core span { color: var(--accent); }
.playing-card { filter: drop-shadow(0 12px 16px rgba(42,57,75,.10)); }
.card-front { background: linear-gradient(150deg,#fff8f4,#f6f1fb); border-color: #e7b09e; }
.card-front span { color: #c96345; }
.card-front strong { color: var(--text); }
.card-back { background: #f0effc; color: #7d72c7; border-color: #d8d4f4; }
.result-overlay, .modal { background: rgba(35,45,58,.28); }
.result-card, .modal-card { background: #fff; border-color: var(--line); box-shadow: 0 20px 50px rgba(35,45,58,.18); }
.result-action { color: #c96345; }
.result-actions { border-color: var(--line); }
.ghost-btn { background: #fff; border-color: #d8dee7; color: #536071; }
.ghost-btn:hover { background: #f2f5f8; }
.modal-card label, .settings-list label { border-color: var(--line); color: var(--text); }
.intensity button { background: #f2f5f8; border-color: var(--line); color: #536071; }
.intensity button.selected { background: #fff0e9; color: #c96345; border-color: #efb4a2; }
.loading span { border-color: #e4e9ef; border-top-color: var(--accent); }
.empty-icon { color: #b5beca; }
.membership-teaser { border-color: #ead8b7; background: #fffaf1; }
.membership-teaser strong { color: var(--text); }
.simple-page input { background: #fff; border-color: #d8dee7; color: var(--text); }
.simple-page input:focus { border-color: #eca68e; box-shadow: 0 0 0 3px #fff0e9; }
.vip-card { border-color: #ead8b7; background: linear-gradient(135deg,#fffaf1,#fff4ec); box-shadow: var(--shadow); }
.vip-star { color: #d99b42; }
.vip-card > strong { color: var(--text); }
.price b, .order-pay-card strong { color: #c96345; }
.benefits, .plan-card ul { color: #536071; }
.benefits li:before, .plan-card li:before { color: var(--success); }
.plan-card.recommended { border-color: #efb4a2; background: #fff8f3; }
.vip-active { background: #eaf7f0; color: #4f9b78; border-color: #bfe1ce; }
.flash-note { color: #a96523; background: #fff4e4; border-color: #f0d4a7; }
.dev-only > span { color: #d99348; }
.payment-result-icon { color: #4f9b78; }
@media (min-width: 601px) { .phone { box-shadow: 0 12px 50px rgba(36,49,67,.12); } }

/* Focused wheel layout: the wheel is the page's visual center on phones. */
.game-shell.wheel-page, .game-shell { background: #fff; }
.game-toolbar { padding-top: max(18px, env(safe-area-inset-top)); min-height: 50px; }
.game-toolbar .back { font-size: 25px; line-height: 1; margin: 0; padding: 6px 10px 6px 0; }
.game-toolbar .icon-btn { font-size: 21px; letter-spacing: 3px; line-height: 1; padding: 6px 0 6px 10px; }
.wheel-intro { padding: 10px 0 10px; text-align: center; }
.wheel-intro .pill { margin-bottom: 8px; }
.wheel-intro h1 { font-size: clamp(28px, 8vw, 36px); margin: 4px 0 8px; }
.live-result { min-height: 34px; color: var(--accent); font-size: clamp(22px, 6vw, 30px); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.wheel-intro p { margin: 8px auto 0; max-width: 300px; }
.wheel-intro .session-count { display: block; margin-top: 6px; }
.wheel-stage { background: #fff; border: 0; box-shadow: none; padding: 8px 0 0; overflow: visible; }
.wheel-wrap { height: auto; aspect-ratio: 1; width: min(90vw, 390px); margin: 2px auto 0; display: grid; place-items: center; position: relative; }
.wheel { position: relative; width: 100%; height: 100%; max-width: none; border: 9px solid #fff; box-shadow: 0 0 0 1px #d8dee7, 0 14px 28px rgba(42,57,75,.14); overflow: visible; }
.wheel-label { position: absolute; z-index: 1; left: 50%; top: 50%; width: 76px; text-align: center; color: #273142; font-size: clamp(10px, 2.8vw, 13px); line-height: 1.25; font-weight: 700; white-space: normal; overflow-wrap: anywhere; pointer-events: none; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-clamp(76px, 27vw, 124px)) rotate(var(--counter-angle)); }
.pointer { top: -8px; color: #c96345; font-size: 25px; text-shadow: none; }
.wheel-core { width: clamp(78px, 22vw, 100px); height: clamp(78px, 22vw, 100px); position: relative; z-index: 2; }
.wheel-core button { width: 100%; height: 100%; border: 0; border-radius: 50%; background: #e47f5f; color: #fff; font-size: clamp(22px, 6vw, 30px); font-weight: 800; cursor: pointer; box-shadow: 0 5px 14px rgba(228,127,95,.3); }
.wheel-core button:disabled { opacity: .6; cursor: wait; }
.stage-hint { margin: 12px 0 8px; }
.round-info { margin-top: 12px; }
.reset-wheel { display: block; margin: 18px auto 0; min-width: 100px; padding: 9px 18px; border: 1px solid #d8dee7; border-radius: 999px; background: #fff; color: #536071; font-size: 12px; cursor: pointer; }
.reset-wheel:hover { border-color: #efb4a2; color: #c96345; background: #fff8f3; }
.game-shell .safety { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
@media (max-width: 430px) { .wheel-wrap { width: min(90vw, 390px); } .wheel-label { width: 66px; } }
@media (max-width: 370px) { .wheel-label { width: 58px; font-size: 10px; } .wheel-core { width: 76px; height: 76px; } }