:root{--paper:#f0e9d8;--paper-deep:#e2d8c0;--ink:#23302f;--ink-soft:#4a5b58;--azurite:#3f6ea6;--malachite:#4f8a63;--ochre:#a05c33;--gold:#b08c46;--serif:"Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif;--sans:"PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;height:100dvh;color:var(--ink);font-family:var(--sans);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;background:#d7ded6;margin:0;overflow:hidden}#gl{width:100vw;height:100vh;outline:none;height:100dvh;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#paper{pointer-events:none;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");position:absolute;inset:0}#paper:after{content:"";background:radial-gradient(125% 95% at 50% 44%,#0000 55%,#2b363229 100%);position:absolute;inset:0}.hidden{display:none!important}.screen{text-align:center;pointer-events:auto;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:radial-gradient(120% 90% at 50% 40%,#f2ebdbf2 0%,#e4dac2eb 55%,#d0cab5e6 100%);flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.frame{pointer-events:none;border:1px solid #23302f38;position:absolute;inset:5vh 5vw;box-shadow:inset 0 0 0 5px #fffbee73,inset 0 0 0 6px #23302f24,inset 0 0 110px #78603421}.frame:before,.frame:after{content:"";background:linear-gradient(90deg,#7d5f2a 0%,#d9bd76 35%,#f2dfa4 50%,#c2a054 68%,#6f5423 100%);border-radius:7px;width:13px;position:absolute;top:-6px;bottom:-6px;box-shadow:0 2px 10px #3c2c1059}.frame:before{left:-20px}.frame:after{right:-20px}.eyebrow{font-family:var(--serif);letter-spacing:.32em;color:var(--ink-soft);margin:0 0 .6em;font-size:13px}.screen h1{font-family:var(--serif);letter-spacing:.22em;text-indent:.22em;color:var(--ink);text-shadow:0 2px #fff6;margin:0;font-size:clamp(46px,9vh,96px);font-weight:500}.screen .sub{font-family:var(--serif);letter-spacing:.08em;color:var(--ink-soft);max-width:36em;margin:1.1em 0 0;font-size:clamp(14px,2vh,18px);line-height:1.8}button{font-family:var(--serif);letter-spacing:.32em;text-indent:.32em;color:var(--ink);border:1px solid var(--ink);cursor:pointer;pointer-events:auto;background:#fffdf599;border-radius:2px;margin-top:2em;padding:.75em 2em;font-size:17px;transition:background .2s,color .2s,transform .2s}button:hover{background:var(--ink);color:var(--paper)}button.ghost{border-color:var(--ink-soft);color:var(--ink-soft);background:0 0}.screen .keys{letter-spacing:.12em;color:var(--ink-soft);opacity:.85;margin-top:2.2em;font-size:12.5px}.for-touch,body.touch .for-keyboard{display:none}body.touch .for-touch{display:block}.screen .best{font-family:var(--serif);letter-spacing:.12em;color:var(--gold);margin-top:1.4em;font-size:13px}#pigments{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#f0e9d8c7;border:1px solid #23302f40;border-radius:2px;flex-direction:column;gap:6px;padding:12px 14px;display:flex;position:absolute;top:22px;left:24px}.pig{font-family:var(--serif);letter-spacing:.08em;color:var(--ink);align-items:center;gap:8px;min-width:118px;font-size:14px;display:flex}.pig .dot{border-radius:50%;width:11px;height:11px;box-shadow:inset 0 0 0 1px #23302f59}.pig[data-pig="0"] .dot{background:var(--azurite)}.pig[data-pig="1"] .dot{background:var(--malachite)}.pig[data-pig="2"] .dot{background:var(--ochre)}.pig .name{flex:1}.pig .count{font-variant-numeric:tabular-nums;font-weight:600;display:inline-block}@keyframes countBump{0%{transform:scale(1)}40%{color:var(--gold);transform:scale(1.4)}to{transform:scale(1)}}.pig .count.bump{animation:.3s ease-out countBump}#carry{letter-spacing:.12em;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums;border-top:1px dashed #23302f40;margin-top:4px;padding-top:7px;font-size:12px}#objective{font-family:var(--serif);letter-spacing:.12em;color:var(--ink);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);white-space:nowrap;font-variant-numeric:tabular-nums;background:#f0e9d8d6;border:1px solid #23302f40;border-radius:999px;align-items:center;gap:9px;padding:8px 20px;font-size:15px;display:flex;position:absolute;top:20px;left:50%;transform:translate(-50%)}#objective-dot{width:10px;height:10px;color:var(--gold);background:currentColor;border-radius:50%;box-shadow:0 0 9px}#combo{font-family:var(--serif);letter-spacing:.1em;color:var(--gold);text-shadow:0 1px 12px #b08c4659;font-size:24px;position:absolute;top:66px;left:50%;transform:translate(-50%)}#wings{border:1px solid var(--gold);font-family:var(--serif);letter-spacing:.24em;color:var(--gold);background:#f0e9d8b3;border-radius:999px;padding:3px 10px;font-size:12px;position:absolute;top:80px;right:26px}#timer{font-family:var(--serif);letter-spacing:.18em;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:18px;position:absolute;top:24px;right:26px}#score{font-family:var(--serif);letter-spacing:.14em;color:var(--gold);font-variant-numeric:tabular-nums;font-size:13px;position:absolute;top:52px;right:26px}#guide{font-family:var(--serif);letter-spacing:.14em;color:var(--ink);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#f0e9d8d1;border:1px solid #23302f38;border-radius:999px;align-items:center;gap:10px;padding:9px 18px;font-size:14px;display:flex;position:absolute;bottom:34px;left:50%;transform:translate(-50%)}#guide-arrow{color:var(--gold);transition:transform 80ms linear;display:inline-block}#guide-dist{color:var(--ink-soft);font-variant-numeric:tabular-nums;text-align:right;min-width:4.4em}#minimap{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#f0e9d8b8;border:1px solid #23302f47;border-radius:2px;width:150px;height:260px;position:absolute;bottom:24px;right:22px}#toast{max-width:min(80vw,640px);color:var(--paper);font-family:var(--serif);letter-spacing:.1em;text-align:center;background:#23302fdb;border-radius:2px;padding:12px 26px;font-size:16px;line-height:1.6;transition:opacity .35s,transform .35s;position:absolute;top:18%;left:50%;transform:translate(-50%)}#toast.fade{opacity:0;transform:translate(-50%)translateY(-8px)}.screen .score{font-family:var(--serif);letter-spacing:.18em;color:var(--ink-soft);margin:1.2em 0 0;font-size:22px}.screen .score strong{color:var(--ink);margin-right:.15em;font-size:58px;font-weight:500}.screen .meta{font-family:var(--serif);letter-spacing:.14em;color:var(--ink-soft);margin:.8em 0 0;font-size:15px}#best-list{width:min(88vw,400px);font-family:var(--serif);letter-spacing:.08em;color:var(--ink-soft);margin:1.1em 0 0;padding:0;font-size:13px;list-style:none}#best-list:empty{display:none}#best-list li{border-bottom:1px dashed #23302f33;justify-content:space-between;gap:1em;padding:.38em .2em;display:flex}#best-list li:first-child{color:var(--gold)}.screen .row{gap:14px;margin-top:2.2em;display:flex}.screen .row button{margin-top:0}#loading{background:var(--paper);font-family:var(--serif);letter-spacing:.28em;color:var(--ink-soft);pointer-events:auto;justify-content:center;align-items:center;transition:opacity .6s;display:flex;position:absolute;inset:0}#loading.gone{opacity:0;pointer-events:none}#debug{color:var(--ink-soft);background:#f0e9d8b3;border-radius:2px;padding:5px 8px;font-family:ui-monospace,Consolas,monospace;font-size:11px;position:absolute;bottom:20px;left:24px}#touch-controls{display:none}body.touch #touch-controls{display:block}#stick{left:max(18px, env(safe-area-inset-left));bottom:max(18px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto;touch-action:none;background:#f0e9d86b;border:1.5px solid #23302f66;border-radius:50%;width:132px;height:132px;position:absolute}#stick:after{content:"骑行";font-family:var(--serif);letter-spacing:.2em;color:var(--ink-soft);font-size:11px;position:absolute;top:-20px;left:50%;transform:translate(-50%)}#stick-knob{will-change:transform;background:#23302f8c;border:2px solid #f0e9d8d9;border-radius:50%;width:58px;height:58px;margin:-29px 0 0 -29px;position:absolute;top:50%;left:50%;box-shadow:0 3px 12px #141e1e40}#touch-buttons{right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));pointer-events:none;flex-direction:row;align-items:flex-end;gap:12px;display:flex;position:absolute}#touch-buttons button{pointer-events:auto;width:60px;height:60px;color:var(--ink);font-family:var(--serif);letter-spacing:0;touch-action:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#f0e9d89e;border:1.5px solid #23302f73;border-radius:50%;margin:0;padding:0;font-size:19px;transition:background .12s,transform .12s}#touch-buttons button:hover{color:var(--ink);background:#f0e9d89e}#touch-buttons button.active{color:var(--paper);background:#23302fc7;transform:scale(.94)}#touch-buttons #btn-jump{background:#f0e9d8cc;width:78px;height:78px;font-size:25px}body.touch #pigments{top:max(10px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));transform-origin:0 0;padding:10px 12px;transform:scale(.9)}body.touch #objective{top:max(10px, env(safe-area-inset-top));letter-spacing:.08em;text-overflow:ellipsis;max-width:56vw;padding:6px 14px;font-size:13px;overflow:hidden}body.touch #timer{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));letter-spacing:.12em;font-size:15px}body.touch #score{top:40px;right:max(10px, env(safe-area-inset-right));font-size:11px}body.touch #combo{font-size:18px;top:46px}body.touch #wings{top:62px;right:max(10px, env(safe-area-inset-right));padding:2px 8px;font-size:10px}body.touch #minimap{display:none}body.touch #guide{bottom:max(168px, calc(env(safe-area-inset-bottom) + 152px));padding:6px 14px;font-size:12px}body.touch #debug{left:max(10px, env(safe-area-inset-left));bottom:max(10px, env(safe-area-inset-bottom));font-size:9px}@media (max-width:720px){#minimap{display:none}.screen h1{font-size:44px}body.touch #objective{max-width:92vw;font-size:12px;top:64px}body.touch #pigments{transform:scale(.8)}body.touch #guide,body.touch #minimap{display:none}}