:root { color-scheme: light; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #dfe2ec; touch-action: none; user-select: none; }
body { display: grid; place-items: center; }
#game-shell { position: relative; width: min(100vw, 520px); height: 100dvh; max-height: 1000px; overflow: hidden; background: #e6e8f1; box-shadow: 0 0 42px #67708038; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: url('../assets/atmosphere-v2.png') center/cover no-repeat; }
.top-ui { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 17px; right: 17px; height: 20vh; display: flex; align-items: start; justify-content: flex-end; pointer-events: none; }
#score { position: absolute; top: 13vh; left: 1px; color: #3e3d42; font: 900 clamp(25px, 6vw, 36px)/1 "Arial Black", Impact, sans-serif; letter-spacing: 1px; text-shadow: 0 1px 0 #fff8; }
button { font: inherit; }
.capsule { pointer-events: auto; width: 78px; height: 32px; border: 0; border-radius: 18px; background: #ffffffc9; color: #777983; display: flex; align-items: center; justify-content: space-evenly; box-shadow: inset 0 0 0 1px #5d637026, 0 2px 8px #7b819020; }
.capsule span { position: relative; width: 24px; height: 6px; background: radial-gradient(circle,#8e919b 2px,transparent 2.5px) 0 0/8px 6px; }
.capsule i { width: 18px; height: 18px; border: 1px solid #8e919b; border-radius: 50%; position: relative; }
.capsule i::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #8e919b; left: 6px; top: 6px; }
.tutorial { position: absolute; top: 15.5%; left: 50%; transform: translateX(-50%); width: 205px; padding: 15px 18px; text-align: center; color: #4c4b50; background: #f5f6fbd9; box-shadow: 0 5px 18px #72798b10; transition: opacity .3s, transform .3s; }
.tutorial strong, .tutorial span { display: block; }
.tutorial strong { font-size: 14px; margin-bottom: 7px; }
.tutorial span { font-size: 12px; }
.tutorial.hide { opacity: 0; transform: translate(-50%, -10px); pointer-events: none; }
.assist { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px #78808f2c; }
.target, .target::before, .target i { position: absolute; border-radius: 50%; inset: 10px; border: 2px solid #4785f3; }
.target::before { content: ""; inset: 3px; border-color: #ff5369; }
.target i { inset: 8px; border: 0; background: #4785f3; }
.assist[aria-pressed="true"] { box-shadow: 0 0 0 4px #fff8, 0 0 24px #43a5ff99; }
.charge-hint { position: absolute; left: 50%; bottom: 91px; width: 120px; height: 6px; transform: translateX(-50%); border-radius: 8px; background: #ffffffaa; opacity: 0; transition: opacity .2s; overflow: hidden; }
.charge-hint.show { opacity: 1; }
.charge-hint i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#49ca86,#ffdb53,#ff654f); border-radius: inherit; }
.result { position: absolute; inset: 19% 26px auto; padding: 22px 18px 24px; text-align: center; color: #f5f5f7; background: #29292ddf; box-shadow: 0 18px 45px #30323c42; backdrop-filter: blur(6px); animation: pop .34s cubic-bezier(.2,1.5,.35,1); }
.result[hidden] { display: none; }
.new-record { display: inline-block; padding: 4px 11px; color: #fff; background: #ef3340; font-size: 12px; }
.final-score { margin: 18px 0 8px; color: #12d665; font: 700 66px/1 ui-monospace, monospace; text-shadow: 0 3px 0 #008f45; }
.share-score { border: 0; border-bottom: 1px solid #ffffff54; color: #fff; background: none; padding: 8px 22px; }
.result p { margin: 17px auto 20px; max-width: 260px; font-size: 12px; line-height: 1.65; color: #d5d5d9; }
.restart { min-width: 150px; padding: 12px 24px; border: 0; border-radius: 24px; color: #1f3429; background: #f7f8fb; box-shadow: 0 8px 18px #0003; font-weight: 700; }
.restart span { display: inline-block; width: 14px; height: 14px; margin-right: 5px; border: 3px solid #0cc567; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; position: relative; }
.restart span::after { content: ""; position: absolute; right: -3px; top: -4px; border: 4px solid transparent; border-top-color: #0cc567; transform: rotate(-25deg); }
.best { margin-top: 18px; color: #bbbcc2; font-size: 12px; }
.share-game { position: absolute; left: 16px; bottom: max(25px, env(safe-area-inset-bottom)); width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; }
.share-game i { position: absolute; left: 15px; top: 20px; width: 15px; height: 12px; border: 3px solid #55565c; border-top: 0; }
.share-game i::before { content: ""; position: absolute; left: 4px; top: -10px; width: 7px; height: 10px; border-left: 3px solid #55565c; }
.share-game i::after { content: ""; position: absolute; left: 1px; top: -12px; width: 7px; height: 7px; border-left: 3px solid #55565c; border-top: 3px solid #55565c; transform: rotate(45deg); }
@keyframes pop { from { opacity: 0; transform: scale(.86) translateY(20px); } }
@media (min-width: 521px) { #game-shell { border-radius: 22px; height: min(94vh, 980px); } }