: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:1320px;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(300px,.9fr) minmax(560px,650px);gap:clamp(28px,5vw,90px);align-items:center;flex:1;padding:45px 0 35px}
.intro{padding-bottom:40px}.eyebrow{color:#d48a2d;font-size:13px;font-weight:800;letter-spacing:.15em;margin:0 0 22px}h1{font-size:clamp(46px,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:20px;background:linear-gradient(150deg,#ffe9c2 0%,#ffdfb5 64%,#f9d4a8 100%);border-radius:19px;overflow:hidden}.game-surface::before{content:'';position:absolute;width:220px;height:220px;border-radius:50%;background:#fff5dc54;right:-100px;top:70px;pointer-events:none}.game-surface>*{position:relative;z-index:1}
.game-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.head-copy p{font-size:10px;letter-spacing:.16em;color:#b7895b;font-weight:800;margin:0 0 5px}.head-copy h2{font-size:25px;letter-spacing:-.03em;color:#66452f;margin:0}.stats{display:flex;gap:7px}.stats div{min-width:80px;padding:7px 11px;background:#fffdf7db;border:1px solid #fff9e5b8;border-radius:14px;box-shadow:0 4px 15px #ad743d20}.stats small{display:block;color:#a9896f;font-size:10px;font-weight:700;letter-spacing:.08em}.stats strong{display:block;color:#65442f;font-size:19px;line-height:1.2;font-weight:800;font-variant-numeric:tabular-nums}
.play-area{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:15px;align-items:start}.board-wrap{position:relative;min-width:0}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;aspect-ratio:1;padding:6px;background:#eabf83;border-radius:18px;box-shadow:inset 0 2px 8px #bb82464a,0 12px 26px #ae784337}.piece{position:relative;display:block;width:100%;aspect-ratio:1;border:2px solid #fff8ed;border-radius:10px;background-color:#fff5e3;background-size:300% 300%,300% 300%;background-repeat:no-repeat;box-shadow:0 3px 5px #a979442c;transition:transform .16s,box-shadow .16s,filter .16s}.piece:hover{transform:translateY(-2px);box-shadow:0 5px 10px #a9794450}.piece:focus-visible{outline:3px solid #9f612e;outline-offset:2px}.piece.is-selected{z-index:2;transform:scale(.94);box-shadow:0 0 0 4px #e88d36,0 7px 18px #b97f459c}.piece.is-complete{cursor:default}.piece.is-complete:hover{transform:none}.reference{padding:10px;background:#fffaf0c9;border:1px solid #fff7e8;border-radius:18px;box-shadow:0 6px 17px #a776412a}.reference-top{display:flex;justify-content:space-between;color:#9f7a5b;font-size:11px;font-weight:800;letter-spacing:.05em;margin:1px 3px 8px}.reference-top span:last-child{color:#e9a143}.reference-art{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#ffebc7,#fff9e9);border:2px solid #fff;border-radius:13px}.reference-art img{display:block;width:100%;height:100%;object-fit:contain}.reference p{font-size:11px;line-height:1.5;color:#9c826c;margin:9px 2px 2px}.win-banner{position:absolute;inset:12% 8%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;background:#fffdf4ed;backdrop-filter:blur(8px);border:2px solid #fff;border-radius:24px;box-shadow:0 14px 35px #9b6a395e;color:#63442f}.win-banner[hidden]{display:none}.win-banner>span{display:grid;place-items:center;width:49px;height:49px;border-radius:16px;background:#f3ad4c;color:white;font-size:33px;transform:rotate(-8deg)}.win-banner strong{font-size:26px}.win-banner small{font-size:13px;color:#9b765c}
.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}.action{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:1px solid #e9cda5;border-radius:13px;background:#fffaf0;color:#8d633d;font-size:13px;font-weight:800;box-shadow:0 4px 0 #dbb784;transition:transform .15s,box-shadow .15s}.action span:first-child{font-size:19px;line-height:1}.action.primary{background:#ed9c42;border-color:#ed9c42;color:white;box-shadow:0 4px 0 #c87933}.action:hover:not(:disabled){transform:translateY(-2px)}.action:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #c87933}.action:disabled{cursor:not-allowed;opacity:.48;box-shadow:0 3px 0 #dbb784}.action:focus-visible{outline:3px solid #8e5e30;outline-offset:2px}.feedback{min-height:18px;margin:14px 0 0;text-align:center;color:#9d704a;font-size:12px;font-weight:700}
footer{border-top:1px solid #eddbc2;padding:23px 0 28px;color:#bea58a;font-size:11px;font-weight:700;letter-spacing:.12em}
@media(max-width:1030px){.shell{padding:0 20px}.content{width:100%;grid-template-columns:1fr;gap:25px;max-width:680px;margin:auto;padding:30px 0}.intro{padding:0;text-align:center}.eyebrow{margin-bottom:12px}h1{font-size:clamp(40px,7vw,58px);margin-bottom:14px}.lead{max-width:570px;margin:0 auto;font-size:15px}.howto,.intro-note{display:none}.game-card{max-width:650px}footer{text-align:center}}
@media(max-width:600px){.shell{padding:0 10px}.topbar{height:68px;padding:0 9px}.brand{font-size:17px}.content{padding:24px 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:12px;border-radius:15px}.game-head{margin-bottom:12px}.head-copy h2{font-size:21px}.stats div{min-width:65px;padding:6px 8px}.stats strong{font-size:16px}.play-area{grid-template-columns:minmax(0,1fr) 96px;gap:8px}.board{gap:3px;padding:4px;border-radius:13px}.piece{border-width:1px;border-radius:6px}.reference{padding:6px;border-radius:12px}.reference-top{font-size:9px;margin:0 1px 5px}.reference-art{border-radius:8px}.reference p{font-size:9px}.actions{gap:5px;margin-top:13px}.action{font-size:11px;gap:4px;min-height:41px;padding:0 3px;border-radius:10px}.action span:first-child{font-size:16px}.feedback{font-size:11px}.win-banner strong{font-size:21px}footer{padding:17px 0}}
@media(max-width:380px){.play-area{grid-template-columns:minmax(0,1fr) 78px}.reference p{display:none}.action{font-size:10px}.stats{gap:4px}.stats div{min-width:58px}}
@media(prefers-reduced-motion:reduce){.piece,.action{transition:none}}