:root{font-family:system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;color:#553d30;background:#fff8ea;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:radial-gradient(circle at 92% 4%,#ffe2a8 0,transparent 32%),radial-gradient(circle at 0% 80%,#ffe7c9 0,transparent 28%),#fff8ea}
button{font:inherit;cursor:pointer}
.shell{max-width:1260px;margin:auto;min-height:100vh;padding:0 42px;display:flex;flex-direction:column}
.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eddbc2}
.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:800;letter-spacing:.035em;color:#553c2e}
.brand b{color:#ee9c27}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:#f8b64d;color:#fff;font-size:24px;transform:rotate(-9deg)}
.language{display:flex;gap:3px;padding:4px;background:#fff5e3;border:1px solid #e9d9bf;border-radius:14px}
.language button{border:0;border-radius:10px;background:transparent;color:#897565;padding:7px 11px;font-size:13px;font-weight:700;min-width:36px}
.language button[aria-pressed=true]{background:#fff;color:#5b4030;box-shadow:0 2px 8px #80623921}
.content{display:grid;grid-template-columns:minmax(310px,1fr) minmax(360px,480px);gap:clamp(30px,8vw,124px);align-items:center;flex:1;padding:48px 0 32px}
.intro{align-self:center;padding-bottom:55px}
.eyebrow{color:#d48a2d;font-size:13px;font-weight:800;letter-spacing:.15em;margin:0 0 22px}
h1{font-size:clamp(48px,5.4vw,82px);letter-spacing:-.065em;line-height:1.15;margin:0 0 24px;color:#503829}
h1 span{color:#f2a735}
.lead{font-size:19px;line-height:1.9;color:#806a59;max-width:490px;margin:0 0 45px}
.howto{display:flex;gap:17px;align-items:center;max-width:470px;padding:21px 23px;background:#fffdf7;border:1px solid #f0dfc6;border-radius:24px;box-shadow:0 12px 34px #a7722520}
.gesture{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:17px;background:#ffedcb;color:#de882d;font-size:31px;line-height:1}
.howto strong{display:block;font-size:16px}.howto p{margin:4px 0 0;color:#988270;font-size:13px;line-height:1.6}
.intro-note{display:flex;align-items:center;gap:9px;margin:24px 0 0 8px;color:#a58e79;font-size:13px;line-height:1.6}.mini-star{color:#f2aa40;font-size:17px}
.game-card{justify-self:center;width:100%;max-width:480px;border:9px solid #fffdfa;border-radius:33px;background:#fffdfa;box-shadow:0 26px 70px #aa6d2d2b,0 2px 8px #a46d3220;overflow:hidden}
.game-topline,.game-bottomline{display:flex;align-items:center;gap:9px;height:38px;padding:0 17px;color:#9e8267;font-size:11px;font-weight:800;letter-spacing:.09em}.game-topline-end{margin-left:auto;color:#c5a683}.status-dot{width:7px;height:7px;background:#f0aa40;border-radius:50%}
.game-bottomline{height:35px;justify-content:space-between;letter-spacing:0;font-weight:600}.game-bottomline span:last-child{color:#e7ad62;letter-spacing:4px}
.stage{position:relative;width:100%;aspect-ratio:2/3;max-height:calc(100vh - 195px);overflow:hidden;touch-action:none;outline:none;background:#ffedc9;border-radius:19px}
.stage:focus-visible{outline:3px solid #f4b452;outline-offset:-3px}
canvas{display:block;width:100%;height:100%}
.hud{pointer-events:none;position:absolute;left:16px;top:16px;display:flex;gap:8px}.hud-chip{min-width:77px;border:1px solid #fff9e5b8;border-radius:15px;background:#fffdf7e3;padding:7px 12px;box-shadow:0 4px 15px #ad743d20;backdrop-filter:blur(6px)}.hud-chip small{display:block;color:#a9896f;font-size:10px;font-weight:700;letter-spacing:.08em}.hud-chip strong{display:block;color:#65442f;font-size:21px;line-height:1.15;font-weight:800;font-variant-numeric:tabular-nums}.hud-chip.best strong{color:#d98b31}
.pause-button{position:absolute;right:17px;top:17px;width:39px;height:39px;border:1px solid #fff8;border-radius:13px;background:#fffdf7e3;color:#875d43;font-size:16px;font-weight:800;z-index:2}.pause-button[hidden]{display:none}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#fff5dc24,#f7dbb0ad);padding:25px;z-index:3}.overlay[hidden]{display:none}.overlay-panel{width:min(100%,355px);padding:28px 26px 25px;background:#fffdf9ef;backdrop-filter:blur(12px);border:1px solid #fff;border-radius:28px;box-shadow:0 24px 50px #95673440;text-align:center}.overlay-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;margin:0 auto 17px;color:white;background:linear-gradient(145deg,#ffd078,#f4a33d);font-size:34px;transform:rotate(-7deg)}.overlay-kicker{color:#df973e;font-size:11px;font-weight:800;letter-spacing:.2em;margin:0 0 10px}.overlay-panel h2{color:#553a2b;font-size:25px;line-height:1.35;letter-spacing:-.04em;margin:0 0 10px}.overlay-panel p:not(.overlay-kicker){font-size:13px;line-height:1.65;color:#8d7665;margin:0 0 20px}.overlay-panel .final-score{font-size:24px!important;font-weight:800;color:#df8c2f!important;margin-bottom:16px!important}.primary-button{border:0;border-radius:15px;background:#ee9b3c;color:#fff;font-size:15px;font-weight:800;padding:13px 23px;min-width:166px;box-shadow:0 7px 0 #cb7630,0 12px 22px #db893c55;transition:transform .15s,box-shadow .15s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 9px 0 #cb7630,0 15px 22px #db893c55}.primary-button:active{transform:translateY(5px);box-shadow:0 2px 0 #cb7630}.primary-button span{margin-left:10px}
footer{border-top:1px solid #eddbc2;padding:23px 0 28px;color:#bea58a;font-size:11px;font-weight:700;letter-spacing:.12em}
.hud-chip{min-width:69px}
.lives{position:absolute;right:16px;top:65px;display:flex;gap:5px;padding:5px 7px;background:#fffdf7e8;border:1px solid #fff9e5b8;border-radius:13px;box-shadow:0 4px 15px #ad743d20;pointer-events:none}
.lives img{display:block;width:27px;height:27px;object-fit:contain;padding:1px;border-radius:50%;background:#e7ae68;transition:opacity .18s,filter .18s}
.lives img.empty{opacity:.27;filter:grayscale(1)}
.overlay-icon{background:linear-gradient(145deg,#ffc5a1,#ee9675);font-size:27px}
.overlay-icon img{display:block;width:46px;height:46px;object-fit:contain}
.primary-button{background:#ef9b69;box-shadow:0 7px 0 #cf7758,0 12px 22px #db895c55}
.primary-button:hover{box-shadow:0 9px 0 #cf7758,0 15px 22px #db895c55}
.primary-button:active{box-shadow:0 2px 0 #cf7758}
@media(max-width:480px){.hud{left:10px;top:12px;gap:5px}.hud-chip{min-width:62px;padding:6px 9px}.hud-chip strong{font-size:19px}.pause-button{right:12px;top:12px}.lives{right:12px;top:58px}}
@media(max-width:850px){.shell{padding:0 20px}.topbar{height:68px}.content{grid-template-columns:1fr;gap:26px;padding:35px 0 30px}.intro{padding:0;max-width:550px;margin:auto;text-align:center}.eyebrow{margin-bottom:12px}h1{font-size:clamp(38px,9vw,56px);margin-bottom:13px}.lead{font-size:15px;line-height:1.7;margin:0 auto 20px}.howto,.intro-note{display:none}.game-card{max-width:430px}.stage{max-height:none}footer{text-align:center}}
@media(max-width:480px){.shell{padding:0 10px}.topbar{padding:0 9px}.brand{font-size:17px}.content{padding-top:25px}.intro{padding:0 12px}.eyebrow{font-size:11px}.lead{font-size:13px;margin-bottom:0}.game-card{border-width:6px;border-radius:24px}.stage{border-radius:15px}.overlay-panel{padding:23px 20px}.overlay-panel h2{font-size:22px}.game-topline{height:31px}.game-bottomline{height:30px;font-size:10px}footer{padding:17px 0}}