:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; background: #11172e; color: #f7f1e5; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 50% 0%, #35457d 0, #182444 42%, #10152b 100%); }
button { font: inherit; }
.app-shell { position: relative; display: grid; place-items: center; min-height: 100vh; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); isolation: isolate; }
.app-shell::before { content: ""; position: fixed; z-index: -2; inset: 0; background: linear-gradient(#10172aa3, #0b1129d9), url("./assets/paper-flight-background.png") 72% center / cover no-repeat; filter: saturate(.78); }
.sky-noise { position: fixed; z-index: -1; inset: 0; opacity: .42; pointer-events: none; background-image: radial-gradient(circle at 16% 20%, #fff9da 0 1px, transparent 1.5px), radial-gradient(circle at 73% 24%, #fff9da 0 1px, transparent 1.5px), radial-gradient(circle at 64% 74%, #fff9da 0 1px, transparent 1.5px), radial-gradient(circle at 20% 77%, #fff9da 0 1px, transparent 1.5px); background-size: 210px 180px, 300px 220px, 250px 260px, 360px 290px; animation: drift 14s linear infinite; }
@keyframes drift { to { transform: translate3d(-22px, 14px, 0); } }
.hud { position: fixed; top: max(18px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; z-index: 2; pointer-events: none; }
.brand { display: grid; gap: 2px; color: #becdf6; font-size: 11px; letter-spacing: .16em; }
.brand strong { font-family: "Space Grotesk", sans-serif; color: #fff5d5; font-size: 13px; letter-spacing: .12em; }
.fragment-counter { padding: 8px 12px; border: 1px solid #7387c0aa; border-radius: 999px; background: #10182fcc; backdrop-filter: blur(10px); color: #d9e2ff; font-size: 13px; }
.fragment-counter b { color: #ffd36e; font-family: "Space Grotesk", sans-serif; font-size: 17px; }
.story-card, .result-card { width: min(680px, 100%); padding: clamp(28px, 6vw, 56px); border: 1px solid #a7b7ed73; border-radius: 28px; background: linear-gradient(135deg, #1a2448ea, #131936f0); box-shadow: 0 28px 90px #0508179c, inset 0 1px 0 #f7f4ff24; text-align: center; animation: card-in .55s ease both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.chapter { margin: 0 0 14px; color: #a7b9fa; font-family: "Space Grotesk", sans-serif; font-size: 12px; letter-spacing: .17em; text-transform: uppercase; }
h1, h2 { margin: 0; color: #fff7e6; font-size: clamp(30px, 6vw, 52px); line-height: 1.18; letter-spacing: -.04em; }
h2 { font-size: clamp(26px, 5vw, 40px); }
.story-copy { max-width: 510px; margin: 22px auto 0; color: #d1dbf6; font-size: clamp(15px, 2.5vw, 17px); line-height: 1.9; }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.choice-button, .quiet-button { border: 1px solid #a9bbfb; border-radius: 14px; padding: 13px 19px; cursor: pointer; color: #10172e; background: linear-gradient(135deg, #fff0c4, #ffd577); font-weight: 700; box-shadow: 0 7px 22px #00000035; transition: transform .18s ease, box-shadow .18s ease; }
.choice-button:hover, .choice-button:focus-visible { transform: translateY(-2px); box-shadow: 0 11px 28px #00000052; }
.choice-button.secondary { border-color: #8097dc; color: #dfe8ff; background: #263460; }
.game-panel { width: min(1100px, 100%); padding: 16px; border: 1px solid #9ab5f66b; border-radius: 24px; background: #0f1630b8; box-shadow: 0 30px 90px #050817a8; }
.game-topline { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 6px 6px 15px; color: #e6ecff; }
.game-topline strong { display: block; margin-top: 3px; font-size: 18px; }
.label { color: #aabcf9; font-size: 12px; letter-spacing: .12em; }
.goal { color: #ffe0a0; font-weight: 700; }
.attempts { color: #cdd8fe; }
canvas { display: block; width: 100%; height: auto; border: 1px solid #778bc6; border-radius: 16px; touch-action: none; background: #415994; }
.game-tip { padding: 13px 4px 4px; color: #bdcaef; font-size: 14px; text-align: center; }
.quiet-button { display: block; margin: 8px auto 0; padding: 9px 14px; border-color: #657bb9; color: #dce6ff; background: #202d55; font-size: 13px; }
.hidden { display: none !important; }
@media (max-width: 620px) { .app-shell { padding-inline: 12px; } .app-shell::before { background-position: 75% center; } .hud { left: 14px; right: 14px; } .brand { font-size: 9px; } .brand strong { font-size: 11px; } .fragment-counter { padding: 6px 10px; font-size: 12px; } .story-card, .result-card { padding: 32px 23px; border-radius: 22px; } .game-panel { padding: 9px; border-radius: 18px; } .game-topline { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 4px 3px 10px; font-size: 13px; } .game-topline strong { font-size: 15px; } .attempts { grid-column: 1 / -1; } }