:root { --gold-strong:#e5b24d; --hero-red:#ad4438; --deep-forest:#103b2c; }
body { background:linear-gradient(180deg,#f9f8f1 0,#edf1e9 100%); }

/* One persistent, small control follows the original 小聪同学 interaction model. */
.music-toggle { right:max(18px,calc(env(safe-area-inset-right) + 12px)); bottom:max(106px,calc(env(safe-area-inset-bottom) + 94px)); display:grid; width:44px; height:44px; color:#fff9e8; background:rgba(17,86,63,.96); border:1px solid rgba(246,205,112,.85); box-shadow:0 10px 26px rgba(9,49,35,.28),inset 0 0 0 3px rgba(255,255,255,.1); transition:transform 160ms ease,background 160ms ease,box-shadow 160ms ease; }
.intro-active .music-toggle { bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px)); }
.music-toggle:hover { background:#a63e35; transform:translateY(-2px); }
.music-toggle:active { transform:translateY(0) scale(.96); }
.music-toggle.is-playing { color:#173b2d; background:#f3ca68; box-shadow:0 0 0 5px rgba(243,202,104,.16),0 12px 30px rgba(9,49,35,.32); }
.music-toggle.is-playing span[aria-hidden="true"] { animation:xiaoliu-music-pulse 1.8s ease-in-out infinite; }
@keyframes xiaoliu-music-pulse { 50% { transform:scale(1.18) rotate(-7deg); } }

.intro-screen { background-position:center 45%; }
.intro-screen::before { inset:13px; border-color:rgba(255,219,128,.75); box-shadow:inset 0 0 0 4px rgba(14,59,42,.17); }
.intro-screen::after { position:absolute; z-index:1; inset:28px; content:""; pointer-events:none; border:1px solid rgba(255,255,255,.18); }
.intro-shade { background:linear-gradient(180deg,rgba(5,33,23,.54),rgba(10,57,39,.06) 42%,rgba(7,33,24,.72) 100%),linear-gradient(90deg,rgba(5,28,20,.18),transparent 36%,transparent 64%,rgba(5,28,20,.18)); }
.intro-topline { color:#fff9e9; text-shadow:0 2px 15px rgba(0,0,0,.38); }
.intro-kicker { color:#ffe09a; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.intro-copy h1 { color:#fffdf6; text-shadow:0 5px 26px rgba(0,0,0,.55),0 1px 0 rgba(255,230,166,.48); }
.intro-copy h1 i { background:#f6cb72; box-shadow:0 0 16px rgba(246,203,114,.55); }
.intro-subtitle { color:#fff0cb; }
.intro-achievement { border-color:rgba(247,211,121,.92); box-shadow:0 18px 42px rgba(0,0,0,.48),inset 0 0 0 3px rgba(255,248,216,.16); }
.intro-start { min-width:234px; color:#fffaf1; background:linear-gradient(135deg,#b84b3e,#8e3029); border-color:rgba(255,222,145,.76); box-shadow:0 15px 34px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.28); }
.intro-start:hover { background:linear-gradient(135deg,#c65849,#9f362e); transform:translateX(-50%) translateY(-2px); }

.app-header { background:rgba(255,254,248,.92); box-shadow:0 3px 18px rgba(19,56,39,.06); }
.header-avatar { background:linear-gradient(145deg,#207158,#124a37); box-shadow:inset 0 0 0 1px rgba(255,229,155,.48); }
.welcome-hero { border:1px solid rgba(229,178,77,.4); box-shadow:0 26px 68px rgba(11,52,36,.2); }
.welcome-hero::after { background:linear-gradient(90deg,rgba(7,45,31,.82),rgba(9,58,40,.36) 54%,rgba(8,44,31,.1)),linear-gradient(0deg,rgba(7,43,30,.74),transparent 62%); }
.welcome-hero-copy { text-shadow:0 4px 22px rgba(0,0,0,.38); }
.welcome-kicker { color:#ffe095; }
.welcome-tagline { color:#ffe7ab; }
.hero-primary { background:linear-gradient(135deg,#bd5143,#95342d); box-shadow:0 10px 23px rgba(49,10,8,.28); }
.hero-primary:hover { background:#ca5a4b; }
.hero-secondary { background:rgba(8,55,38,.48); border-color:rgba(255,235,185,.72); }
.hero-metrics b { color:#ffe39a; }

.zone-card,.feature-panel,.contact-section { box-shadow:0 12px 30px rgba(24,63,44,.08); }
.zone-card { border-color:rgba(32,98,75,.19); }
.zone-card:hover { box-shadow:0 17px 35px rgba(20,77,57,.16); }
.zone-card-gold { border-color:rgba(183,124,22,.28); }
.zone-card-red { border-color:rgba(173,68,56,.26); }
.feature-panel { border-width:1px; }
.upgrade-feature { box-shadow:0 16px 35px rgba(143,98,17,.1); }
.map-feature { box-shadow:0 16px 35px rgba(34,105,132,.1); }
.map-preview { box-shadow:0 14px 26px rgba(25,92,116,.15); }
.contact-section { background:linear-gradient(120deg,#103e2d,#1c684d); border:1px solid rgba(242,200,103,.34); }
.contact-card { box-shadow:inset 0 0 0 1px rgba(255,226,151,.18); }

@media (max-width:700px) {
  .music-toggle { right:12px; bottom:max(140px,calc(env(safe-area-inset-bottom) + 128px)); }
  .intro-active .music-toggle { bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px)); }
  .intro-screen::after { inset:19px; }
  .intro-screen::before { inset:9px; }
  .welcome-hero { border-radius:10px; }
  .zone-card,.feature-panel,.contact-section { box-shadow:0 10px 24px rgba(24,63,44,.08); }
}

@media (prefers-reduced-motion:reduce) { .music-toggle.is-playing span[aria-hidden="true"] { animation:none; } }