:root{font-family:"Microsoft YaHei",system-ui;color:#563c2a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;height:100svh;overflow:hidden;background:radial-gradient(circle at 50% 0,#fffdec,transparent 40%),linear-gradient(#d3ebbf,#f6e9ce)}button{border:0;font:inherit;font-weight:900;cursor:pointer}.app{width:min(100%,768px);height:100svh;margin:auto;padding:10px 16px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:8px}.game-title{margin:0;text-align:center;font-size:clamp(21px,6vw,29px);color:#e96e48;text-shadow:0 2px white,0 3px #f6cd91}.rack{display:flex;justify-content:center;gap:7px;padding:9px;border:5px solid #92562f;border-radius:12px;background:linear-gradient(#d7975e,#f3c789 25%,#b6703e 27%,#e2a062 37%,#f4c78d);box-shadow:inset 0 2px #ffe3b8,0 4px #79452a}.rack i,.rack button,.choice{width:clamp(46px,13vw,75px);aspect-ratio:.84;display:grid;place-items:center;border-radius:7px;background:#fffdf9;box-shadow:0 3px #c4b5a7;font-size:clamp(30px,9vw,48px);font-style:normal;color:#2398dc}.rack i:nth-child(2){color:#ed6d43}.rack i:nth-child(3){color:#8651c8}.rack i:nth-child(4),.rack button{color:#e9ad30}.rack button{border:2px dashed #ebbd6c}.rack button.selected{background:#fff1c8;border-style:solid}.wood{min-height:0;padding:12px 14px 6px;border-radius:25px;background:linear-gradient(90deg,#97572f 0 7%,#e7b475 8% 12%,#fff3d5 13% 87%,#e9b477 88% 92%,#92542f 93%);box-shadow:inset 0 0 0 4px #7d4828,0 6px #b09a71}.wood>div{height:calc(100% - 25px);display:grid;grid-template-rows:repeat(10,1fr);gap:4px}.rod{position:relative}.rod:before{content:"";position:absolute;left:2%;right:2%;top:calc(50% - 2px);height:5px;border-radius:4px;background:linear-gradient(#737f80,#f2f5ef 45%,#667174 57%,#cdd6d5)}.track{position:absolute;inset:0 3%}.bead{position:absolute;top:50%;width:clamp(21px,6vw,38px);height:clamp(21px,6vw,38px);transform:translate(-50%,-50%);border:2px solid #ffffff73;border-radius:46% 46% 42% 42%;box-shadow:inset 5px 5px 8px #ffffff9a,inset -5px -6px 9px #0004,1px 2px 2px #5e372663;transition:left .12s}.bead:after{content:"";position:absolute;left:17%;top:13%;width:40%;height:25%;border-radius:50%;background:#fff8}.bead.movable{cursor:pointer;filter:brightness(1.1)}.red{background:#ef4f47}.yellow{background:#f3c82f}.blue{background:#398fdf}.green{background:#45b96d}.purple{background:#9661d1}.wood p{height:18px;margin:3px 0 0;text-align:center;color:#79462c;font-weight:900;font-size:13px}.wood p b{display:inline-grid;min-width:28px;place-items:center;border-radius:8px;background:#fff9e7;color:#dd7042}.cards{padding:8px 11px;border-radius:18px;background:#fffdf3aa;text-align:center}.cards div{display:flex;justify-content:center;gap:10px}.choice:nth-child(2n){color:#8a58c5}.choice:nth-child(3n){color:#e87543}.choice.selected{background:#f8d873;box-shadow:0 1px #c99a32;transform:translateY(2px)}.home{justify-self:center;padding:8px 20px;border-radius:12px;background:#fff8e9;color:#917055;font-size:13px;box-shadow:0 3px #c8b195}.overlay{position:fixed;z-index:5;inset:0;display:grid;place-items:center;padding:20px;background:#31512b77;backdrop-filter:blur(3px)}.hidden{display:none}.dialog{width:min(100%,390px);padding:26px 22px 22px;border-radius:27px;text-align:center;background:#fffdf2;box-shadow:0 10px #b56841}.dialog em{display:block;font-size:55px;font-style:normal}.dialog h1{margin:5px 0;color:#eb7545;font-size:25px}.dialog p{margin:0 0 20px;color:#806950}.start{display:grid;grid-template-columns:1fr 1fr;gap:12px}.start button{padding:16px 5px 12px;border-radius:19px;background:#e2f4ca;color:#477b34;box-shadow:0 4px #91bd70}.start button+button{background:#ffedb2;color:#ca7832;box-shadow:0 4px #dbac56}.start i,.start b,.start small{display:block;font-style:normal}.start i{font-size:44px}.start b{margin:4px 0;font-size:17px}.ranges{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.ranges button{padding:13px 1px;border-radius:14px;background:#e2f4ca;color:#477b34;font-size:18px;box-shadow:0 3px #91bd70}.back,.next{width:100%;margin-top:17px;padding:13px;border-radius:14px;background:#72b947;color:white;font-size:18px;box-shadow:0 4px #4e9131}.back{background:#edd7ae;color:#815d39;box-shadow:0 4px #c7a273}@media(min-width:720px){.app{padding:16px 32px}.wood p{font-size:15px}}