:root{--jade:#5edbbd;--deep:#052b2b;--gold:#eac46b;--paper:#e9d9ae;--scale:1}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:"Microsoft YaHei",Arial,sans-serif;color:#fff7df}body{height:100svh;overflow:hidden;display:grid;place-items:center;background:#082827 url("assets/bamboo-moon.png") center/cover no-repeat}body:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,#041c1be0 0%,#062c2add 22%,#071e22b8 50%,#062b28df 100%);pointer-events:none}.game-shell{position:relative;z-index:1;width:min(96vw,1200px);height:min(97svh,790px);padding:clamp(10px,1.8vh,18px) clamp(14px,2.3vw,27px);display:flex;flex-direction:column;border:2px solid #dfc16a;border-radius:26px;background:#092a28bd;box-shadow:inset 0 0 0 1px #73e4c66b,inset 0 0 45px #0008,0 18px 80px #000b;backdrop-filter:blur(4px);transform:scale(var(--scale));transform-origin:center}.topbar{height:clamp(48px,7vh,58px);border-bottom:1px solid #dfc16a77;display:flex;align-items:flex-start;justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;color:#f8e4a3;font-weight:800;font-size:clamp(18px,2.3vw,27px);letter-spacing:.09em}.brand b{font-size:1.35em;color:var(--jade);text-shadow:0 0 15px var(--jade)}.brand small{font-size:.4em;color:#bbd8c8;letter-spacing:.14em}.top-actions{display:flex;gap:7px}.top-actions button,.utility button{height:clamp(37px,5.2vh,47px);min-width:clamp(42px,5vw,62px);border:1px solid #74d8bd;border-radius:9px;background:#082b29e8;color:#d7fff2;font-size:clamp(17px,2vw,24px);line-height:1;box-shadow:inset 0 0 13px #60ddbd25;cursor:pointer}.top-actions span{font-size:clamp(10px,1.2vw,13px);margin-left:3px}.gold{color:var(--gold)!important;border-color:var(--gold)!important}.main-area{min-height:0;flex:1;display:grid;grid-template-columns:minmax(130px,.62fr) minmax(250px,1.35fr) minmax(150px,.7fr);gap:clamp(11px,2vw,27px);padding:clamp(9px,1.5vh,13px) 0}.card{border:1px solid #70cbb0;border-radius:14px;background:linear-gradient(145deg,#133e38e8,#06211ff1);box-shadow:inset 0 0 22px #79e6c619}.card h2{margin:0;padding:clamp(9px,1.2vh,13px) clamp(9px,1.2vw,14px) 0;color:#f2d78c;font-size:clamp(13px,1.55vw,17px);letter-spacing:.1em}.card h2 small{display:block;color:#99c8b7;font-size:.57em;letter-spacing:.18em;margin-top:2px}.hold{align-self:start;padding-bottom:10px}.hold button{margin:0 10px;width:calc(100% - 20px);padding:7px;border:1px solid #7bdcbe;border-radius:7px;background:#1a4e43;color:#e0fff3;cursor:pointer}.piece{position:relative;width:86px;height:70px;margin:17px auto}.piece i,.demo-piece i{position:absolute;width:26px;height:26px;border:2px solid #f1df9a;box-shadow:0 0 12px currentColor}.piece i:nth-child(1){left:28px;top:0}.piece i:nth-child(2){left:0;top:28px}.piece i:nth-child(3){left:28px;top:28px}.piece i:nth-child(4){left:56px;top:28px}.jade-piece i{background:#55dcb9;color:#55dcb9}.plum-piece i{background:#d47abf;color:#d47abf}.console{height:100%;min-width:0;display:flex;flex-direction:column;align-items:center}.console-title{width:min(100%,360px);height:28px;display:flex;justify-content:space-between;align-items:center;color:#f4d988;font-size:clamp(12px,1.5vw,17px);letter-spacing:.12em}.console-title b{font-size:.75em;color:#a8ddc8}.board{height:calc(100% - 84px);aspect-ratio:1/2;max-width:100%;position:relative;border:4px double #e1c263;border-radius:8px;background-color:#0b2927;background-image:linear-gradient(#73b6a225 1px,transparent 1px),linear-gradient(90deg,#73b6a225 1px,transparent 1px);background-size:10% 5%;box-shadow:inset 0 0 35px #000b,0 0 18px #e1c26355}.demo-piece{position:absolute;left:41%;top:11%;width:80px;height:50px}.demo-piece i{width:24px;height:24px;background:#7ae6dc;color:#7ae6dc}.demo-piece i:nth-child(1){left:24px}.demo-piece i:nth-child(2){top:25px}.demo-piece i:nth-child(3){left:24px;top:25px}.demo-piece i:nth-child(4){left:48px;top:25px}.status{display:flex;flex-direction:column;gap:clamp(7px,1vh,10px)}.status strong{display:block;padding:3px clamp(9px,1.2vw,14px) clamp(7px,1vh,10px);font-size:clamp(25px,3vw,37px);letter-spacing:.04em}.status em{font-size:.55em;font-style:normal}.next{flex:1}.move-controls{width:min(100%,430px);display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:7px}.move-controls button{height:clamp(34px,5vh,44px);border:1px solid #dfc16a;border-radius:8px;background:#1b5145;color:#fff0bf;font-size:clamp(18px,2.2vw,25px);cursor:pointer}.move-controls .drop{font-size:clamp(11px,1.4vw,15px);font-weight:bold}.move-controls small{display:block;font-size:.55em}.utility{width:min(440px,62%);align-self:center;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:6px}.utility button{height:clamp(32px,4.5vh,40px);font-size:clamp(17px,2vw,23px)}.utility span{font-size:clamp(10px,1.15vw,13px);margin-left:3px}.help{margin:5px 0 0;color:#c4dfd1;text-align:center;font-size:clamp(9px,1.1vw,11px)}button:hover,button.active{background:#29725d!important;box-shadow:0 0 17px #6ce8c377!important;transform:translateY(-1px)}.notice{position:fixed;z-index:8;top:20px;left:50%;transform:translate(-50%,-170%);padding:10px 18px;border:1px solid #f0d47e;border-radius:9px;background:#123d35ed;color:#fff2c4;box-shadow:0 0 25px #0008;transition:.25s}.notice.show{transform:translate(-50%,0)}@media(max-width:720px){.game-shell{width:100vw;height:100svh;border-radius:0;border-width:0;padding:7px;transform:none}.topbar{height:38px}.brand{font-size:14px;gap:4px}.brand small{display:none}.top-actions{gap:2px}.top-actions button{height:28px;min-width:28px;padding:2px;border-radius:6px;font-size:15px}.top-actions span{display:none}.main-area{grid-template-columns:19% minmax(0,61%) 20%;gap:3px;padding:5px 0}.card{border-radius:7px}.card h2{padding:4px 4px 0;font-size:9px}.card h2 small{display:none}.hold{padding-bottom:3px}.hold button{margin:0 3px;width:calc(100% - 6px);padding:3px;font-size:8px}.piece{transform:scale(.56);margin:-1px auto}.status{gap:3px}.status strong{padding:2px 4px 4px;font-size:clamp(14px,5vw,22px)}.console-title{height:20px;font-size:9px}.board{height:calc(100% - 55px);border-width:2px}.move-controls{margin-top:3px;gap:3px}.move-controls button{height:28px;border-radius:5px;font-size:16px}.move-controls .drop{font-size:8px}.utility{width:65%;margin-top:3px;gap:3px}.utility button{height:28px;border-radius:5px;font-size:16px}.utility span{font-size:8px}.help{display:none}}@media(max-height:640px) and (min-width:721px){.game-shell{height:100svh;padding:7px 18px}.topbar{height:43px}.main-area{padding:5px 0}.move-controls button{height:32px}.utility{margin-top:3px}.utility button{height:29px}.help{display:none}}
