: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 90% 5%,#ffe1ad 0,transparent 31%),radial-gradient(circle at 2% 78%,#ffe7d0 0,transparent 31%),#fff8ea}button{font:inherit;cursor:pointer}
.shell{max-width:1500px;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(280px,.68fr) minmax(650px,850px);gap:clamp(28px,5vw,85px);align-items:center;flex:1;padding:42px 0 34px}.intro{padding-bottom:35px}.eyebrow{color:#d48a2d;font-size:13px;font-weight:800;letter-spacing:.15em;margin:0 0 22px}h1{font-size:clamp(47px,5vw,76px);letter-spacing:-.065em;line-height:1.15;margin:0 0 24px;color:#503829}h1 span{color:#f2a735}.lead{font-size:18px;line-height:1.85;color:#806a59;max-width:480px;margin:0 0 42px}.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}.intro-note span:first-child{color:#f2aa40;font-size:17px}
.game-card{width:100%;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}.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:#d89a4a;font-variant-numeric:tabular-nums;font-weight:800}
.game-surface{position:relative;padding:16px;background:linear-gradient(150deg,#ffeac9 0%,#ffdfb2 65%,#f8d2a4 100%);border-radius:19px;overflow:hidden}.hud{position:relative;z-index:1;display:flex;align-items:stretch;gap:8px;margin-bottom:13px}.hud-item{min-width:78px;padding:7px 11px;background:#fffdf7e3;border:1px solid #fff9e7;border-radius:14px;box-shadow:0 4px 14px #ad743d1f}.hud-item small{display:block;color:#a9896f;font-size:10px;font-weight:700;letter-spacing:.07em}.hud-item strong{display:block;color:#65442f;font-size:18px;line-height:1.25;font-weight:800;font-variant-numeric:tabular-nums}.small-button,.sound-button{align-self:center;border:1px solid #e9cba0;border-radius:10px;background:#fff9ec;color:#9c714f;font-size:11px;font-weight:800;min-height:36px;padding:7px 11px}.small-button{margin-left:auto}.sound-button{min-width:38px;font-size:16px}.small-button:hover:not(:disabled),.sound-button:hover{background:white}.small-button:disabled{opacity:.5;cursor:default}.small-button:focus-visible,.sound-button:focus-visible{outline:3px solid #9f612e;outline-offset:2px}
.canvas-wrap{position:relative;z-index:1;overflow:hidden;border:5px solid #fff9eb;border-radius:22px;background:#fff3db;box-shadow:0 12px 24px #b47a3a3d}canvas{display:block;width:100%;height:auto;aspect-ratio:840/500;touch-action:none;outline:none}canvas:focus-visible{outline:4px solid #ad742f;outline-offset:-4px}.canvas-hint{position:absolute;left:16px;bottom:15px;pointer-events:none;padding:7px 11px;border-radius:12px;background:#fffdf2dd;color:#8f603d;font-size:12px;font-weight:800;box-shadow:0 3px 12px #9e6c3e22}.canvas-hint[hidden]{display:none}.under-canvas{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:33px;margin-top:9px;color:#a37a56;font-size:12px;font-weight:700}.feedback{color:#9e6745;text-align:right}
.overlay{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:22px;background:linear-gradient(180deg,#fff5dc38,#f7dbb0b6)}.overlay[hidden]{display:none}.overlay-panel{width:min(100%,400px);padding:23px 25px 24px;background:#fffdf9f4;backdrop-filter:blur(12px);border:1px solid #fff;border-radius:28px;box-shadow:0 24px 50px #95673440;text-align:center}.reaction{display:block;width:97px;height:97px;object-fit:contain;margin:0 auto 5px}.overlay-kicker{color:#df973e;font-size:11px;font-weight:800;letter-spacing:.2em;margin:0 0 9px}.overlay-panel h2{color:#553a2b;font-size:24px;line-height:1.3;letter-spacing:-.04em;margin:0 0 9px}.overlay-panel p:not(.overlay-kicker){font-size:13px;line-height:1.65;color:#8d7665;margin:0 0 16px}.overlay-panel .overlay-score{color:#d58637!important;font-weight:800;font-size:17px!important}.overlay-score:empty{display:none}.primary-button{border:0;border-radius:14px;background:#ee9b3c;color:#fff;font-size:14px;font-weight:800;padding:12px 24px;min-width:160px;box-shadow:0 6px 0 #cb7630,0 12px 22px #db893c55}.primary-button:hover{transform:translateY(-2px)}.primary-button:active{transform:translateY(4px);box-shadow:0 2px 0 #cb7630}.primary-button:focus-visible{outline:3px solid #8e5e30;outline-offset:4px}
footer{border-top:1px solid #eddbc2;padding:23px 0 28px;color:#bea58a;font-size:11px;font-weight:700;letter-spacing:.12em}
@media(max-width:1150px){.shell{padding:0 20px}.content{width:100%;grid-template-columns:1fr;gap:25px;max-width:870px;margin:auto;padding:29px 0}.intro{padding:0;text-align:center}.eyebrow{margin-bottom:12px}h1{font-size:clamp(40px,7vw,60px);margin-bottom:14px}.lead{max-width:580px;margin:0 auto;font-size:15px}.howto,.intro-note{display:none}.game-card{max-width:850px}footer{text-align:center}}
@media(max-width:600px){.shell{padding:0 10px}.topbar{height:68px;padding:0 9px}.brand{font-size:17px}.content{padding:23px 0}.intro{padding:0 12px}.eyebrow{font-size:11px}.lead{font-size:13px}.game-card{border-width:6px;border-radius:24px}.game-topline{height:31px}.game-bottomline{height:30px;font-size:10px}.game-surface{padding:9px;border-radius:15px}.hud{gap:4px;margin-bottom:8px}.hud-item{min-width:52px;padding:5px 6px;border-radius:9px}.hud-item small{font-size:8px}.hud-item strong{font-size:13px}.small-button{font-size:9px;padding:5px;min-height:31px}.sound-button{min-width:30px;min-height:31px;font-size:13px;padding:5px}.canvas-wrap{border-width:3px;border-radius:13px}.canvas-hint{left:7px;bottom:7px;font-size:9px;padding:5px 6px}.under-canvas{font-size:9px;min-height:27px}.overlay-panel{padding:18px 17px}.reaction{width:78px;height:78px}.overlay-panel h2{font-size:20px}footer{padding:17px 0}}
@media(max-width:360px){.small-button{font-size:8px}.hud-item{min-width:48px}.game-bottomline span:last-child{font-size:8px}}