:root { color-scheme: light; --ink: #274c3c; --muted: #789080; --line: #d9e7dd; --green: #397b59; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse at 15% 0%, #daeae1, transparent 55%), #f5f7f1; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid #d4ae59; outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .65; }
[hidden] { display: none !important; }
.workspace { max-width: 940px; margin: auto; padding: max(18px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); }
.hub-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.hub-nav a { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 650; }
.hub-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #aec6b7; border-radius: 10px; font-size: 23px; }
.page-heading { margin: 40px 0 24px; }
.eyebrow { margin: 0 0 8px; color: #809686; font-size: 11px; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.04em; }
.page-heading > p:last-child { margin: 10px 0 0; color: #718171; font-size: 15px; }
.game-card { padding: 22px; border: 1px solid #d2e3d7; border-radius: 26px; background: linear-gradient(120deg, #fcfdf8, #eaf4ed); box-shadow: 0 12px 36px #2c593912; }
.game-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.local-label { display: inline-flex; align-items: center; gap: 6px; color: #6e8c79; font-size: 11px; }
.local-label i { width: 6px; height: 6px; border-radius: 50%; background: #77a889; }
h2 { font-size: 19px; line-height: 1.4; margin: 5px 0 0; letter-spacing: -.02em; }
.records { display: flex; gap: 6px; }
.records > div { min-width: 62px; padding: 8px 10px; background: #ffffffa8; border: 1px solid #e4ede3; border-radius: 12px; text-align: center; }
.records span { display: block; color: #879083; font-size: 10px; }
.records strong { display: block; font-size: 24px; line-height: 1.2; margin-top: 3px; }
.records .best { background: #f8f0d9c2; color: #947334; border-color: #e9dfbc; }
.stage { isolation: isolate; position: relative; height: clamp(290px, 42vw, 400px); overflow: hidden; border: 1px solid #c8e0d0; border-radius: 18px; background: linear-gradient(#e6f3eb, #f5f6e8); }
.scenery { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; width: 62px; height: 62px; border-radius: 50%; background: #f6df9188; box-shadow: 0 0 50px #ecda85b0; right: 18%; top: 18%; }
.hill { position: absolute; border-radius: 50% 50% 0 0; bottom: -14%; width: 85%; height: 40%; background: #b5d3b346; }
.hill-back { left: -20%; transform: rotate(12deg); }
.hill-front { right: -32%; bottom: -17%; background: #96c6aa55; transform: rotate(-14deg); }
.spark { position: absolute; color: #a6c6ac; opacity: .65; }.spark-one { top: 18%; left: 30%; }.spark-two { top: 34%; right: 8%; }
[data-world="2"] .stage { background: linear-gradient(#eaf1d9, #f8ebd5); }[data-world="3"] .stage { background: linear-gradient(#dde5ec, #ddebdc); }[data-world="4"] .stage { background: linear-gradient(#dee9ef, #dcece5 60%, #e6ddec); }
[data-world="3"] .orb, [data-world="4"] .orb { background: #f9f9eaa6; box-shadow: 0 0 42px #fff7b750; }
.lanes { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-evenly; }.lanes i { width: 100%; border-top: 1px dashed #65977015; }
.gate { position: absolute; top: 0; left: 0; width: 3.5%; min-width: 12px; height: 100%; transition: left 48ms linear; }
.pillar { position: absolute; width: 100%; background: linear-gradient(90deg,#799e87,#a5c1a0 42%,#74a18a); border: 1px solid #608d7350; box-shadow: 3px 0 10px #38674f0d; }.pillar.top { top: 0; border-radius: 0 0 7px 7px; }.pillar.bottom { bottom: 0; border-radius: 7px 7px 0 0; }
.pillar i { position: absolute; height: 7px; left: -12%; width: 124%; background: #8fb69a; border: 1px solid #67947540; border-radius: 5px; }.top i { bottom: 0; }.bottom i { top: 0; }
.gate.is-passed { opacity: .45; }
.reward, .jump-reward { position: absolute; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #dec784; border-radius: 50%; color: #8d7131; background: #fff2be; font-size: 11px; box-shadow: 0 0 12px #ebd79e90; }
.jump-reward { left: -600%; background: #e6f0d7; border-color: #a6c392; color: #577643; }
.bird { position: absolute; left: 20%; top: 50%; width: clamp(28px,6%,52px); aspect-ratio: 1; transform: translate(-50%,-50%); transition: top 48ms linear; filter: drop-shadow(0 4px 4px #5b784429); z-index: 2; }
.bird-body { position: absolute; inset: 6% 3%; background: radial-gradient(circle at 30% 24%, #ffe49a, #dfb957 65%, #cfa047); border-radius: 50% 48% 48% 50%; border: 1px solid #faf1c8; }
.bird-tail { position: absolute; left: -15%; bottom: 10%; width: 36%; height: 30%; background: #c9a153; border-radius: 80% 0 30% 60%; transform: rotate(-22deg); }
.bird-wing { position: absolute; left: 9%; top: 40%; width: 47%; height: 44%; background: #eac76b; border-radius: 20% 70% 65% 70%; color: #9d7c34; font-size: clamp(12px,2vw,20px); font-style: normal; text-align: center; transform-origin: 85% 15%; }
.bird-eye { position: absolute; right: 16%; top: 15%; width: 32%; height: 32%; border-radius: 50%; background: #fffbe9; }.bird-eye::after { content: ''; position: absolute; width: 28%; height: 28%; top: 28%; right: 19%; border-radius: 50%; background: #4e5339; }
.bird-beak { position: absolute; right: -15%; top: 37%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 10px solid #b68038; }
[data-phase="playing"] .bird-wing { animation: flap .24s ease-in-out infinite alternate; }.bird[data-mode="rising"] { rotate: -8deg; }.bird[data-mode="falling"] { rotate: 6deg; }
.hud { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 8px; align-items: start; z-index: 3; pointer-events: none; }
.hud > div { border: 1px solid #c9ddcd90; border-radius: 11px; padding: 8px 11px; background: #fcfff3b5; backdrop-filter: blur(6px); }
.hud span { display: block; font-size: 10px; color: #718270; }.score strong { display: block; font-size: 25px; line-height: 1.2; }.pitch { margin-left: auto; }.pitch strong { font-size: 18px; }.pitch span { margin-top: 2px; font-size: 11px; }.next strong { font-size: 12px; line-height: 1.8; }
.world-name { position: absolute; left: 12px; bottom: 12px; color: #6d917e; font-size: 11px; z-index: 1; }
.milestone { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); max-width: 85%; padding: 9px 14px; border-radius: 20px; background: #fff8e8e8; font-size: 12px; color: #957231; z-index: 4; white-space: nowrap; }
.overlay, .breath { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; background: #f2faf0b8; backdrop-filter: blur(4px); z-index: 5; }
.overlay h3 { margin: 0; font-size: clamp(21px,3vw,29px); line-height: 1.4; }.overlay p { margin: 0; font-size: 13px; color: #7c8e7d; line-height: 1.6; max-width: 27em; }
.cover-bird { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 2px solid #fff7dd; background: radial-gradient(circle at 28% 20%, #ffe79f, #d1a64a); box-shadow: 0 5px 12px #79925830; margin-bottom: 2px; }
.cover-bird span { position: absolute; left: 12px; bottom: 6px; color: #967432; font-size: 25px; }.cover-bird i { position: absolute; right: 5px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fffce3; }.cover-bird i::after { content: ''; position: absolute; width: 7px; height: 7px; background: #4d5238; border-radius: 50%; right: 4px; top: 7px; }.cover-bird b { position: absolute; right: -9px; top: 24px; border-left: 12px solid #b78539; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.howto { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 5px; }.howto span { padding: 7px 10px; border-radius: 16px; background: #fffdf1a8; color: #657d63; font-size: 12px; }
.progress { height: 5px; overflow: hidden; border-radius: 8px; background: #d8e7d9; }.progress i { display: block; height: 100%; width: 0; background: #77a383; border-radius: inherit; transition: width 80ms linear; }.calibration { width: 150px; }
.result-score { color: #998047; font-size: 20px; }.breath { inset: 20% 12%; border-radius: 22px; background: #f6faeddd; z-index: 4; }.breath strong { font-size: 24px; }.breath span { font-size: 12px; color: #7e8f74; }.breath .progress { width: 75%; }
.run-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px 4px; font-size: 12px; color: #6d896f; }.run-status > div { min-width: 0; flex: 1; }.goal { margin-top: 7px; display: flex; align-items: center; gap: 9px; font-size: 10px; }.goal .progress { width: 76px; }.breath-stock { padding: 7px 9px; background: #dcebdc; border-radius: 15px; white-space: nowrap; }
.game-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-top: 18px; }.game-controls button { border: 1px solid #bfd8c7; border-radius: 15px; padding: 13px 20px; min-height: 46px; font-size: 14px; }.start-button { display: flex; align-items: center; justify-content: center; gap: 10px; background: #3d7a58; color: #fffdf1; box-shadow: 0 3px 10px #2e604c16; font-weight: 650; }.start-button > span:first-child { font-size: 18px; }.focus-button { background: #f7fcf3; color: #55745e; }.focus-button[aria-pressed="true"] { background: #deebd8; border-color: #86ab87; }.game-controls button:active { transform: translateY(1px); }
.notice { margin: 12px 0 0; text-align: center; color: #8a9786; font-size: 11px; line-height: 1.6; }.notice.is-error { color: #a06c40; }
.page-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: #8b978b; font-size: 11px; padding: 18px 6px; }
body.is-focus .page-heading, body.is-focus .page-footer { display: none; }body.is-focus .workspace { max-width: 1200px; }body.is-focus .game-card { margin-top: 16px; }body.is-focus .stage { height: clamp(340px, 63dvh, 700px); }
@keyframes flap { to { transform: rotate(-27deg); } }
@media (max-width: 480px) { .workspace { padding-left: 14px; padding-right: 14px; }.page-heading { margin-top: 28px; margin-bottom: 20px; }.game-card { padding: 14px; border-radius: 22px; }.game-top { gap: 8px; margin-bottom: 13px; }h2 { font-size: 17px; }.records > div { min-width: 52px; padding: 7px 8px; }.records span { font-size: 9px; }.records strong { font-size: 21px; }.stage { height: 330px; }.hud { left: 8px; right: 8px; top: 8px; gap: 5px; }.hud > div { padding: 6px 8px; }.next strong { font-size: 11px; }.game-controls button { padding: 12px 15px; }.page-footer { flex-direction: column; text-align: center; padding-top: 15px; }.overlay { padding: 16px; } }
@media (max-width: 340px) { h2 { font-size: 15px; }.records > div { min-width: 46px; padding: 7px 6px; }.game-top { gap: 5px; }.overlay h3 { font-size: 20px; }.overlay p { font-size: 12px; }.stage { height: 310px; } }
@media (prefers-reduced-motion: reduce) { .bird, .gate, .progress i { transition: none; }[data-phase="playing"] .bird-wing { animation: none; } }