@font-face{font-family:Fredoka;src:url("assets/fredoka.ttf") format("truetype");font-style:normal;font-weight:300 700;font-display:swap}
:root{color-scheme:light;--ground:#b9ddc9;--ink:#173e35;--muted:#365b4f;--paper:#fffdf5;--action:#b74634;--line:#8eb8a3;--current:#bd45b4;--next:#172c32;font-family:"Fredoka","Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--ink);font-synthesis:none;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}body{margin:0;background:#e4ece4;min-height:100vh;display:flex;justify-content:center}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}button:disabled{opacity:.38;cursor:default}button:focus-visible,canvas:focus-visible{outline:3px solid #245d4b;outline-offset:3px}::selection{color:var(--paper);background:#356b55}.game-shell{width:min(100%,460px);height:100svh;height:100dvh;min-height:540px;max-height:1040px;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:var(--ground);overflow:hidden;position:relative}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 19px 8px;flex:none}.brand{display:flex;align-items:center;gap:9px;padding:0;min-height:44px;font-size:23px;font-weight:800;letter-spacing:-.7px}.brand>svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2}.brand-mark{display:grid;grid-template-columns:8px 8px;gap:3px;transform:rotate(-9deg)}.brand-mark i{width:8px;height:8px;border-radius:50%;background:#d85a46;box-shadow:inset -1px -2px 2px #9c402a,inset 1px 1px 2px #ffd4b2}.brand-mark i:nth-child(2){background:#ffcb50;box-shadow:inset -1px -2px 2px #be8b23,inset 1px 1px 2px #fff4af}.brand-mark i:nth-child(3){background:#419b9a;box-shadow:inset -1px -2px 2px #2b666c,inset 1px 1px 2px #aaeee0}.brand-mark i:nth-child(4){background:#a985bd;box-shadow:inset -1px -2px 2px #755485,inset 1px 1px 2px #e5c5ef}.top-tools{display:flex;align-items:center;gap:2px}.language-button{font-size:12px;letter-spacing:.5px;font-weight:800;padding:10px;min-height:44px;min-width:44px}.icon-button{display:grid;place-items:center;width:44px;height:44px}.icon-button svg,.utility svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button[aria-pressed=false]{opacity:.5}.level-row{display:flex;align-items:center;justify-content:space-between;padding:0 22px 8px;gap:16px;flex:none}.level-kicker{font-size:11px;font-weight:700;color:var(--muted)}h1{font-size:17px;letter-spacing:-.3px;margin:3px 0 0;font-weight:750}.score{display:flex;align-items:center;gap:5px;font-size:20px;font-variant-numeric:tabular-nums}.score svg{width:20px;height:20px;fill:#ffce54;stroke:#ae7c27;stroke-width:1.2}.game-meta{display:flex;align-items:center;gap:12px;padding:0 22px 9px;flex:none}.progress-track{height:5px;background:#96c3ad;border-radius:5px;flex:1;overflow:hidden}.progress-track>div{height:100%;width:0;background:#3f8f76;border-radius:5px;transition:width .45s ease-out}#shot-count{font-size:11px;font-weight:700;min-width:67px;text-align:right;font-variant-numeric:tabular-nums}.playfield{flex:1;min-height:260px;position:relative;isolation:isolate}#board{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px;cursor:crosshair}.tutorial{position:absolute;bottom:68px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:#365b4f;white-space:nowrap;pointer-events:none;transition:opacity .3s}.tutorial svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.tutorial.hidden{opacity:0}.toast{position:absolute;left:50%;bottom:113px;transform:translate(-50%,7px);background:#244d41;color:#fffdf5;max-width:88%;width:max-content;border-radius:10px;padding:10px 14px;font-size:12px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 5px 15px #345a3520}.toast.show{opacity:1;transform:translate(-50%,0)}.combo{position:absolute;left:50%;top:49%;font-size:25px;font-weight:850;color:#fff9d9;text-shadow:0 2px 1px #1d5f5670;transform:translate(-50%,0) scale(.85);opacity:0;pointer-events:none;white-space:nowrap}.combo.show{animation:combo .9s ease-out both}@keyframes combo{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}18%{opacity:1;transform:translate(-50%,-5px) scale(1.03)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-32px) scale(1)}}.launcher{flex:none;display:flex;align-items:center;justify-content:space-around;padding:3px 30px 0;min-height:81px;background:#b1d6c0}.utility{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;font-size:11px;width:60px;min-height:62px}.utility svg{width:20px;height:20px}.ammo{display:flex;align-items:center;flex-direction:column;gap:5px;min-width:122px;min-height:72px;font-size:11px;font-weight:650}.ammo-balls{display:block;width:86px;height:47px;position:relative}.ammo-balls i{position:absolute;display:block;border-radius:50%;box-shadow:2px 4px 5px #31574329,inset -4px -6px 8px #0003,inset 4px 4px 6px #fff6}.current-ball{width:39px;height:39px;left:8px;top:1px;background:var(--current)}.next-ball{width:25px;height:25px;left:53px;top:16px;background:var(--next);opacity:.85}.ammo-balls svg{position:absolute;right:0;top:1px;width:18px;height:18px;fill:none;stroke:#40644e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.color-caption{margin:0;background:#b1d6c0;flex:none;padding:2px 0 10px;font-size:11px;color:#315747;text-align:center;min-height:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{color:var(--ink);border:0;padding:25px;background:var(--paper);border-radius:22px;box-shadow:0 18px 65px #173e3530;width:min(calc(100% - 40px),358px);max-height:calc(100svh - 48px);overflow:auto}dialog::backdrop{background:#173e356b}.result-dialog{text-align:center}.result-art{width:110px;margin:-2px auto 4px}.result-art svg{width:100%;height:100px}.cup{fill:#ffca4b;stroke:#ca9130;stroke-width:2}.cup-handles{stroke:#e0ab3c;stroke-width:8;fill:none;stroke-linecap:round}.cup-star{fill:#fff2b5}h2{font-size:23px;line-height:1.3;margin:9px 0 8px;letter-spacing:-.5px}#result-message{font-size:13px;line-height:1.65;color:#3e5c4d;margin:0 0 17px}.result-score{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-top:1px solid #dce4d8;margin-bottom:15px}.result-score span{font-size:12px;color:#3e5c4d}.result-score strong{font-size:26px;font-variant-numeric:tabular-nums}.primary{width:100%;min-height:49px;padding:11px 18px;border-radius:12px;background:var(--action);color:#fffdf5;font-size:15px;font-weight:750;box-shadow:0 4px 10px #d85a4626}.primary:hover{background:#9d3b2d}.text-button{font-size:12px;min-height:44px;padding:10px 17px;color:#365b4f}.level-dialog{padding:15px 19px 22px}.level-dialog>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.level-dialog h2{font-size:19px}#level-list{display:flex;flex-direction:column;gap:5px}.level-choice{display:flex;align-items:center;width:100%;min-height:60px;border-radius:12px;padding:9px 12px;text-align:left;gap:12px}.level-choice.active{background:#e7efdf}.level-choice:not(:disabled):hover{background:#f0f3e8}.level-choice .level-dot{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e2e9d9;font-size:13px;font-weight:800}.level-choice .level-info{flex:1}.level-choice b{display:block;font-size:14px}.level-choice small{font-size:11px;color:#3e5c4d}.level-choice svg{height:18px;width:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}@media(min-width:600px){body{align-items:center;min-height:100svh;padding:16px}.game-shell{height:min(calc(100svh - 32px),920px);border-radius:24px;box-shadow:0 16px 60px #31503c16}}@media(max-height:700px){.topbar{padding-top:7px;padding-bottom:2px}.brand{font-size:21px}.level-row{padding-bottom:5px}.level-kicker{font-size:11px}h1{font-size:15px}.game-meta{padding-bottom:4px}.launcher{min-height:74px;padding-top:0}.color-caption{padding-bottom:6px}.tutorial{font-size:11px;bottom:62px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.combo.show{opacity:1;transform:translateX(-50%)}}

body[data-page="s"]:not([data-ready="true"]) .game-shell{visibility:hidden}

@media(max-height:540px) and (min-width:600px){
 body{padding:0;align-items:flex-start}
 .game-shell{height:100dvh;min-height:0;max-height:none;width:min(100%,700px);border-radius:0;display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:52px 48px 22px minmax(0,1fr);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
 .topbar{grid-column:1/-1;padding:2px 18px}.level-row{grid-column:1;grid-row:2}.game-meta{grid-column:1;grid-row:3}
 .playfield{grid-column:1;grid-row:4;min-height:0}.launcher{grid-column:2;grid-row:2/5;min-height:0;flex-direction:column;padding:4px 0 26px;justify-content:space-evenly}.color-caption{position:absolute;right:0;bottom:0;width:150px;padding:4px;font-size:11px}.tutorial{bottom:36px;font-size:11px}.toast{bottom:64px}
}

.safari-entry{font-size:12px;font-weight:700;min-height:44px;padding:6px}.top-tools{flex-shrink:0}
@media(max-width:340px){.topbar .brand{font-size:18px;gap:6px;white-space:nowrap}.topbar{padding-left:14px;padding-right:14px}}

.menu-instruction{margin:16px 0}.menu-step{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.6;margin:12px 0}.menu-step>b{display:grid;place-items:center;background:#173e35;color:#fffdf5;border-radius:50%;width:26px;height:26px;flex:none;font-size:13px}.menu-dots{margin-left:auto;background:#fff;color:#111;border:1px solid #c9d3cc;border-radius:9px;padding:3px 12px;letter-spacing:2px}.menu-example{background:#f2f2f4;border-radius:14px;padding:12px;margin:14px 0}.menu-example-title{text-align:center;font-size:12px;font-weight:700;color:#444;margin-bottom:10px}.menu-example-row{display:flex;align-items:center;gap:10px;background:#fff;padding:13px 14px;font:15px/1.4 system-ui;color:#171717;border-radius:10px}.menu-example-row:first-of-type{margin-bottom:6px}.menu-example-selected{outline:2px solid #b74634;outline-offset:-2px;font-weight:700;margin-top:6px}.menu-example-row svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}.menu-safari-note{font-weight:700!important;color:#173e35!important;margin:10px 0 0!important}.s-guide-intro{margin-bottom:12px}.s-browser-help{margin-bottom:12px}#s-guide-browser,#browser-menu{font-size:13px;line-height:1.75;color:var(--muted)}.guide-content .browser-help{margin-top:16px;padding-top:0;border-top:0}.guide-content .copy-link{margin-top:12px}
