.demo-page{background:#eff5f1}.demo-layout{max-width:1120px;margin:auto;padding:30px;display:grid;grid-template-columns:1fr 420px;gap:70px;align-items:center}.demo-intro h1{font-size:clamp(40px,5vw,64px)}.demo-tip{padding:18px 0;border-block:1px solid #153d2218}.demo-intro .quiet{max-width:360px}.demo-game{min-width:0}.demo-hud,.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px}.demo-hud span{font-size:12px;color:#466457}.demo-hud strong{display:block;font:700 24px Fredoka;color:#173b2e}.demo-game button{border:0;border-radius:22px;padding:12px 18px;background:#d6e7dc;color:#193b2e;cursor:pointer;font-size:15px}.demo-game .dark,#drop{background:#173b2e;color:white}.board-wrap{position:relative;border-radius:26px;overflow:hidden;background:#173b2e url('assets/demo-forest.webp') center/cover;box-shadow:0 15px 55px #173b2e26;border:2px solid #8fab99}#board{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair;background:#09261b55}#board:focus-visible{outline:3px solid #ffd166;outline-offset:-5px}.demo-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:#0b281966;backdrop-filter:blur(8px);text-align:center}.demo-overlay[hidden]{display:none}.demo-overlay>div{padding:30px 20px;border-radius:26px;background:#f4fbf0ec;width:100%}.demo-overlay h2{font-size:38px}.demo-overlay a{display:block;margin-top:22px;font-weight:600}.demo-overlay a[hidden]{display:none}.demo-status{text-align:center;font-size:13px;margin:4px 0;min-height:22px}.demo-controls>span{font:700 17px Fredoka}.demo-page button:focus-visible{outline:3px solid #d4a63a;outline-offset:3px}@media(max-width:760px){.demo-layout{grid-template-columns:1fr;gap:18px;padding:16px;max-width:480px}.demo-intro{display:none}.demo-game{width:min(100%,calc((100svh - 195px)*.69));margin:auto;min-width:240px}.demo-controls{gap:6px;padding:9px 0}.demo-game button{padding:10px 12px;font-size:14px}.demo-hud{padding:5px 2px 10px}.demo-hud strong{font-size:21px}.demo-page nav{height:58px}.demo-page nav>a:last-child{font-size:13px}}
.demo-overlay button[hidden]{display:none}#cancel-restart{margin-top:12px}

.auto-label{font-size:12px;color:#476655}

.home-demo{max-width:1260px}.home-demo .demo-layout{padding:0;gap:60px;grid-template-columns:minmax(0,1fr) minmax(280px,420px)}.home-demo .demo-intro h2{font-size:clamp(38px,5vw,60px)}.demo-faq{margin-top:28px;border-block:1px solid #173b2e22;padding:18px 0}.demo-faq summary{cursor:pointer;font-weight:600;font-size:16px}.demo-faq p{font-size:14px;line-height:1.6}.demo-game button:focus-visible{outline:3px solid #d4a63a;outline-offset:3px}@media(max-width:760px){.home-demo .demo-layout{grid-template-columns:1fr;gap:24px;padding:0}.home-demo .demo-intro{display:block}.home-demo .demo-game{width:min(100%,380px);min-width:0}.home-demo .demo-intro h2{font-size:40px}.home-demo .demo-faq{margin-top:18px}.home-demo{padding-top:45px;padding-bottom:45px}}

.demo-celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse,#0c382d33,#071e2055)}.demo-celebration[hidden]{display:none}.celebration-badge{text-align:center;color:white;animation:celebration-pop .55s cubic-bezier(.2,1.4,.4,1) both;filter:drop-shadow(0 4px 18px #07362d)}.celebration-badge>span{display:block;color:#ffdc76;font-size:40px;letter-spacing:8px}.celebration-badge strong{display:block;font:700 100px/1.1 Fredoka,sans-serif;text-shadow:0 3px 0 #174b3e}.celebration-badge p{color:white;font:700 22px Fredoka,sans-serif;margin:12px 0}.demo-celebration>i{position:absolute;top:-20px;left:var(--x);width:8px;height:15px;border-radius:3px;animation:celebration-fall 2.2s var(--delay) cubic-bezier(.2,.5,.6,1) both}@keyframes celebration-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes celebration-fall{from{transform:translate(0,-20px) rotate(0);opacity:1}to{transform:translate(var(--dx),650px) rotate(var(--spin));opacity:0}}@media(prefers-reduced-motion:reduce){.celebration-badge,.demo-celebration>i{animation:none}.demo-celebration>i{display:none}}