*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:transparent;font-family:Arial,Microsoft YaHei,sans-serif;-webkit-user-select:none;user-select:none}button{font:inherit}.screen{position:relative;width:100vw;height:100vh;overflow:hidden;background:#000}.hud{position:absolute;z-index:10;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}.top-hud{top:22px}.status-card{min-width:240px;padding:12px 22px;border-radius:22px;background:rgba(20,20,20,.45);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 26px #0000002e,inset 0 0 0 2px #ffffff47}.status-card.small{min-width:150px;text-align:right}.label{display:block;font-size:18px;letter-spacing:3px;opacity:.8}.status-card strong{display:block;margin-top:2px;font-size:clamp(42px,7vw,86px);line-height:1;text-shadow:0 6px 0 rgba(0,0,0,.22)}.stage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;overflow:hidden}.tres-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.drag-capture{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;touch-action:none;cursor:grab}.drag-capture.dragging{cursor:grabbing}.effect-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;width:100%;height:100%;pointer-events:none;overflow:hidden}.bottom-panel{position:absolute;left:0;right:0;bottom:22px;z-index:12;display:grid;gap:14px;justify-items:center}.tip{max-width:min(780px,calc(100vw - 32px));padding:12px 28px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:clamp(24px,4vw,48px);font-weight:800;line-height:1.15;text-align:center;text-shadow:0 4px 0 rgba(0,0,0,.25);box-shadow:inset 0 0 0 2px #ffffff40;overflow-wrap:anywhere}.demo-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:calc(100vw - 24px)}.demo-buttons button{border:0;border-radius:999px;padding:10px 18px;font-size:18px;font-weight:700;color:#482100;background:rgba(255,255,255,.75);box-shadow:0 8px 20px #00000026;cursor:pointer}.demo-buttons button:active{transform:translateY(2px)}.score-pop{position:absolute;left:50%;top:46%;z-index:20;color:#ffe600;font-size:clamp(58px,11vw,130px);font-weight:1000;text-shadow:0 8px 0 #d34a00,0 16px 22px rgba(0,0,0,.32);transform:translate(-50%,-50%);animation:scorePop 1s ease-out forwards;white-space:nowrap}@keyframes scorePop{0%{opacity:0;transform:translate(-50%,-38%) scale(.42) rotate(-5deg)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.14) rotate(3deg)}to{opacity:0;transform:translate(-50%,-160%) scale(1.5) rotate(-2deg)}}.banner{position:absolute;left:50%;top:25%;z-index:18;padding:18px 38px;border-radius:24px;color:#fff;font-size:clamp(42px,9vw,112px);font-weight:1000;letter-spacing:4px;text-shadow:0 8px 0 rgba(160,30,0,.65),0 18px 30px rgba(0,0,0,.28);transform:translate(-50%);animation:bannerIn 1.6s ease-out forwards}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%) scale(.55) rotate(-8deg)}18%{opacity:1;transform:translate(-50%) scale(1.08) rotate(2deg)}78%{opacity:1;transform:translate(-50%) scale(1) rotate(0)}to{opacity:0;transform:translate(-50%) scale(1.2) translateY(-50px)}}.flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;background:rgba(255,255,255,.75);animation:flash .42s ease-out forwards}@keyframes flash{0%{opacity:1}to{opacity:0}}.particle{position:absolute;z-index:16;width:var(--s);height:var(--s);transform:translate(-50%,-50%);animation:particleFly 1s ease-out forwards}.particle.jackpot{animation-duration:1.4s}.particle.coin{border-radius:50%;background:#ffd84a;box-shadow:inset 0 0 0 3px #ff9b00}.particle.star{background:#fff06a;clip-path:polygon(50% 0,61% 33%,96% 35%,67% 55%,78% 90%,50% 68%,22% 90%,33% 55%,4% 35%,39% 33%)}@keyframes particleFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}18%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.35) rotate(var(--r))}}.lil-gui.root{--background-color: rgba(14, 24, 36, .84);--widget-color: rgba(255, 255, 255, .12);--hover-color: rgba(255, 255, 255, .18);--focus-color: rgba(110, 220, 255, .28);--number-color: #baf3ff;--string-color: #baf3ff;z-index:40}.stats-panel{position:absolute!important;left:14px!important;top:auto!important;bottom:14px!important;z-index:30!important}@media (orientation: portrait){.status-card{min-width:180px}.demo-buttons button{font-size:15px;padding:8px 12px}}@media (max-width: 560px){.hud{left:14px;right:14px;gap:8px}.status-card{min-width:142px;padding:10px 16px;border-radius:18px}.status-card.small{min-width:78px}.label{font-size:14px;letter-spacing:2px}.status-card strong{font-size:clamp(34px,10vw,48px)}.bottom-panel{left:12px;right:12px}.tip{max-width:calc(100vw - 36px);padding:10px 16px;font-size:clamp(22px,7vw,32px)}.demo-buttons{gap:6px}.demo-buttons button{font-size:13px;padding:7px 10px}}
