/* V9.3.6 — 命运叠塔：叠叠乐比例 + 扩大移动范围 + 速度校准。仅作用于 stack- 前缀。 */

.stack-intro-stage{gap:12px;background:radial-gradient(circle at 50% 22%,rgba(140,125,178,.14),transparent 34%),linear-gradient(155deg,#161821,#0d0f15)}
.stack-pass-icon{width:92px;height:92px;margin:0 auto 4px;display:grid;place-items:center;border:1px solid rgba(151,132,190,.23);border-radius:24px;background:linear-gradient(180deg,rgba(151,132,190,.15),rgba(81,71,105,.08));box-shadow:inset 0 0 28px rgba(151,132,190,.08),0 18px 42px rgba(0,0,0,.24);color:#c8b9df;font-size:43px;transform:rotate(-3deg)}
.stack-intro-stage>p{max-width:340px;margin:0 auto 4px!important}
.stack-mini-rule{display:grid;gap:6px;width:100%;max-width:340px;margin:5px auto 9px;padding:12px 14px;border:1px solid rgba(231,220,196,.08);border-radius:15px;background:rgba(11,12,17,.45);text-align:left}
.stack-mini-rule span{position:relative;padding-left:14px;color:#aaa4af;font-size:10px;line-height:1.5}
.stack-mini-rule span::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:#9f8ab9;box-shadow:0 0 8px rgba(159,138,185,.4)}

.stack-stage{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding-bottom:max(18px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 12%,rgba(126,105,160,.12),transparent 34%),#14151c}
.stack-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.stack-hud>div{min-width:0;padding:9px 7px;border:1px solid rgba(231,220,196,.075);border-radius:13px;background:#111218;text-align:center}
.stack-hud span{display:block;margin-bottom:4px;color:#7f7b86;font-size:8px}
.stack-hud strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ded7cf;font-size:10px}
.stack-hud .state-offset strong{color:#d4bd8c}
.stack-hud .state-danger{border-color:rgba(174,104,68,.22);background:rgba(131,79,48,.09)}
.stack-hud .state-danger strong{color:#e0a87e}
.stack-instruction{text-align:center}
.stack-instruction strong{display:block;color:#eee7df;font-size:13px;line-height:1.45}
.stack-instruction span{display:block;margin-top:4px;color:#8e8994;font-size:9px;line-height:1.5}

.stack-arena{position:relative;width:100%;height:min(490px,62dvh);min-height:350px;padding:0;border:1px solid rgba(141,119,177,.18);border-radius:21px;overflow:hidden;background:
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
  radial-gradient(circle at 50% 24%,rgba(118,96,151,.16),transparent 34%),
  linear-gradient(180deg,#171820,#101117 78%);
background-size:28px 28px,28px 28px,auto,auto;color:inherit;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent}
.stack-arena[role="button"]{cursor:pointer;outline:none}
.stack-arena[role="button"]:focus-visible{box-shadow:0 0 0 3px rgba(157,136,190,.2);border-color:rgba(157,136,190,.44)}
.stack-arena[aria-disabled="true"]{cursor:default}
.stack-arena.ready{border-color:rgba(157,136,190,.34);box-shadow:inset 0 0 34px rgba(112,88,143,.05)}
.stack-arena::before{content:"";position:absolute;left:8%;right:8%;bottom:17px;height:18px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.52),transparent 72%);filter:blur(5px)}
.stack-arena::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 22%,transparent 76%,rgba(0,0,0,.16))}
.stack-arena.static{cursor:default}
.stack-arena-label{position:absolute;left:50%;top:12px;z-index:8;transform:translateX(-50%);padding:6px 10px;border:1px solid rgba(255,255,255,.055);border-radius:999px;background:rgba(8,9,13,.58);backdrop-filter:blur(8px);color:#a39baa;font-size:8px;letter-spacing:.04em;white-space:nowrap}
.stack-stage-label{position:absolute;right:12px;bottom:12px;z-index:8;padding:5px 8px;border-radius:999px;background:rgba(8,9,13,.54);color:#77717d;font-size:8px;white-space:nowrap}
.stack-world{position:absolute;inset:0;z-index:2;overflow:visible;transform:translateY(var(--camera-shift,0px)) scale(var(--camera-scale,1));transform-origin:50% 100%;transition:transform .32s cubic-bezier(.2,.75,.25,1);will-change:transform}
.stack-depth{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:7;padding:4px 8px;border-radius:999px;background:rgba(8,9,13,.7);color:#797480;font-size:8px;white-space:nowrap}
.stack-tower-body{position:absolute;inset:0;transform:rotate(var(--tower-tilt,0deg));transform-origin:50% calc(100% - 41px);transition:transform .32s cubic-bezier(.2,.75,.25,1);will-change:transform}
.stack-tower-body.balance-offset .stack-block.settled{filter:saturate(.96)}
.stack-tower-body.balance-danger .stack-block.settled{filter:saturate(.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 12px rgba(185,116,71,.07),0 6px 13px rgba(0,0,0,.22)}
.stack-tower-body.balance-danger.lean-left::after,.stack-tower-body.balance-danger.lean-right::after{content:"";position:absolute;top:12%;bottom:12%;width:22%;pointer-events:none;opacity:.36;filter:blur(15px)}
.stack-tower-body.balance-danger.lean-left::after{left:-4%;background:radial-gradient(ellipse,rgba(202,112,69,.16),transparent 68%)}
.stack-tower-body.balance-danger.lean-right::after{right:-4%;background:radial-gradient(ellipse,rgba(202,112,69,.16),transparent 68%)}
.stack-failure-line{position:absolute;left:17%;right:17%;bottom:var(--failure-bottom);z-index:9;height:2px;background:linear-gradient(90deg,transparent,rgba(219,103,91,.86),transparent);box-shadow:0 0 12px rgba(219,103,91,.45)}

.stack-block{position:absolute;left:var(--left);bottom:var(--bottom);width:var(--width);height:34px;border-radius:4px;background:linear-gradient(180deg,#b4a3c8 0%,#9b87b2 18%,#6f5c87 58%,#45394f 100%);border:1px solid rgba(222,208,240,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 13px rgba(0,0,0,.22);transform-origin:50% 100%;will-change:left,transform}
.stack-block::before{content:"";position:absolute;left:8px;right:8px;top:6px;height:2px;background:linear-gradient(90deg,transparent,rgba(238,225,255,.35),transparent)}
.stack-block::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:4px;border-radius:0 0 3px 3px;background:linear-gradient(180deg,transparent,rgba(15,12,20,.24));pointer-events:none}
.stack-block>i{position:absolute;inset:7px 8px 6px;border:1px solid rgba(255,255,255,.05);border-radius:2px}
.stack-block.base{height:38px;background:linear-gradient(180deg,#8f7caa,#554964 56%,#393340);border-color:rgba(184,164,208,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 9px 20px rgba(0,0,0,.35)}
.stack-block.top{border-color:rgba(227,204,151,.4);background:linear-gradient(180deg,#bba88b,#7f6d52 54%,#554934);box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 17px rgba(202,171,113,.18),0 7px 14px rgba(0,0,0,.25)}
.stack-block.moving{z-index:6;height:35px;background:linear-gradient(180deg,#c1b2d6,#816b9e 50%,#58486f);border-color:rgba(218,202,238,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 18px rgba(139,111,173,.24),0 9px 17px rgba(0,0,0,.28)}
.stack-block.perfect:not(.base){outline:1px solid rgba(229,204,151,.28);outline-offset:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 13px rgba(215,184,125,.11),0 8px 16px rgba(0,0,0,.24)}

.stack-result-banner{display:grid;gap:4px;padding:12px 14px;border:1px solid rgba(104,144,126,.2);border-radius:15px;background:rgba(67,119,101,.09);text-align:center}
.stack-result-banner>span{color:#91bca9;font-size:9px;font-weight:850;letter-spacing:.08em}
.stack-result-banner>strong{color:#ece7df;font-size:13px;line-height:1.45}
.stack-result-banner>small{color:#85818a;font-size:8px}
.stack-result-banner.perfect{border-color:rgba(207,176,112,.25);background:radial-gradient(circle at 50% 0,rgba(207,176,112,.13),transparent 58%),rgba(119,91,49,.08)}
.stack-result-banner.perfect>span{color:#d8ba7f}
.stack-result-banner.offset{border-color:rgba(188,151,91,.22);background:rgba(128,96,48,.08)}
.stack-result-banner.offset>span{color:#cdb17b}
.stack-result-banner.danger{border-color:rgba(190,109,67,.28);background:radial-gradient(circle at 50% 0,rgba(190,109,67,.12),transparent 62%),rgba(126,66,39,.10)}
.stack-result-banner.danger>span{color:#dda073}
.stack-result-banner.failed{border-color:rgba(174,59,82,.26);background:rgba(142,48,67,.11)}
.stack-result-banner.failed>span{color:#dda0ac}
.stack-next-player{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:-2px;padding:9px 12px;border:1px solid rgba(151,132,190,.14);border-radius:13px;background:rgba(98,78,126,.08)}
.stack-next-player span{color:#8f8996;font-size:9px}
.stack-next-player strong{color:#d7c9e7;font-size:13px}
.stack-collapse-stage .stack-arena{filter:saturate(.72)}
.stack-world.failed{animation:stackWorldShock .55s ease both}
.stack-world.failed .stack-tower-body{transition:none}

.stack-final{gap:12px}
.stack-fall-mark{width:98px;height:98px;display:grid;place-items:center;margin:2px 0;border:1px solid rgba(174,59,82,.22);border-radius:25px;background:radial-gradient(circle,rgba(142,48,67,.27),transparent 66%);color:#c46d80;font-size:43px;transform:rotate(14deg)}
.stack-final>p{margin:0!important}
.stack-final-order{width:100%;max-width:340px;padding:13px;border:1px solid rgba(231,220,196,.08);border-radius:15px;background:#15161d;text-align:left}
.stack-final-order>strong{display:block;margin-bottom:9px;color:#8f8a94;font-size:9px}
.stack-final-order>div{display:flex;flex-wrap:wrap;gap:6px}
.stack-final-order span{padding:5px 8px;border-radius:999px;background:#20212a;color:#aaa5ae;font-size:9px}
.stack-final-order span.loser{background:rgba(142,48,67,.17);color:#dba1ad;border:1px solid rgba(174,59,82,.22)}

@keyframes stackWorldShock{0%{transform:translateY(var(--camera-shift,0px)) translateX(0) scale(var(--camera-scale,1))}20%{transform:translateY(var(--camera-shift,0px)) translateX(-5px) scale(var(--camera-scale,1))}42%{transform:translateY(var(--camera-shift,0px)) translateX(4px) scale(var(--camera-scale,1))}66%{transform:translateY(var(--camera-shift,0px)) translateX(-3px) scale(var(--camera-scale,1))}100%{transform:translateY(var(--camera-shift,0px)) translateX(0) scale(var(--camera-scale,1))}}

@media(max-width:360px){
  .stack-stage{padding:14px;padding-bottom:max(16px,env(safe-area-inset-bottom))}.stack-hud{gap:5px}.stack-hud>div{padding:8px 4px}.stack-hud strong{font-size:9px}
  .stack-arena{height:min(430px,58dvh);min-height:320px}.stack-mini-rule{padding:10px 12px}.stack-stage-label{display:none}
}

@media(prefers-reduced-motion:reduce){
  .stack-world,.stack-tower-body{transition:none!important}.stack-world.failed{animation:none!important}.stack-block{transition:none!important}
}
