/* scenes B: 15:00 tap, 17:00 council, 20:00 luck, 23:00 lock. Base state = final frame. */
#ch-1500 .vz,#ch-1700 .vz,#ch-2000 .vz,#ch-2300 .vz{padding:36px;justify-content:center}
#ch-1700 .vz{height:auto;min-height:300px}
.bx{display:block;width:100%}
@keyframes b-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes b-in{from{opacity:0}to{opacity:1}}
@keyframes b-out{to{opacity:0}}
@keyframes b-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes b-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* 15 tap */
.tp{display:grid}.tp>*{grid-area:1/1}
.tp-q{color:#fff;max-width:340px}
.tp-card{display:flex;flex-direction:column;gap:24px;transform-origin:left center}
.tp-btns{display:flex;gap:12px}
.tp-ok,.tp-no{position:relative;padding:10px 20px;border-radius:8px;line-height:24px}
.tp-ok{background:#fff;color:#0a0a0a;font-weight:500;overflow:visible}
.tp-no{border:1px solid rgba(255,255,255,.2);color:var(--soft)}
.tp-rip{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;border:2px solid var(--g);opacity:0;pointer-events:none}
.bcur{position:absolute;left:62%;top:58%;width:22px;height:22px;fill:#fff;stroke:#0a0a0a;stroke-width:.9;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.tp-sent{align-self:center;display:flex;align-items:center;gap:14px;opacity:0;visibility:hidden}
.tp-sent .ck{width:32px;height:32px}
.tp-card,.tp-ok,.tp-rip,.bcur,.tp-sent{will-change:transform,opacity}
.tp-sent .ck circle{transform-box:fill-box}
.tp-sent b{display:block;font-weight:500;color:#fff}.tp-sent small{display:block;color:var(--mut);font-size:15px;line-height:20px}
@keyframes b-move{0%{transform:translate(130px,80px);opacity:0}15%{opacity:1}100%{transform:none;opacity:1}}
@keyframes b-press{0%,100%{transform:none}45%{transform:scale(.95)}}
@keyframes b-rip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(6)}}
@keyframes b-collapse{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(.94) translateY(-6px);visibility:hidden}}
@keyframes b-sent{from{opacity:0;visibility:visible;transform:scale(.9)}to{opacity:1;visibility:visible;transform:none}}
.ch.on .tp-card{animation:b-up .6s var(--ease) .1s both,b-collapse .5s var(--ease) 3.3s forwards}
.ch.on .tp-ok{animation:b-press .45s var(--ease) 2.5s both}
.ch.on .tp-rip{animation:b-rip .8s var(--ease) 2.6s both}
.ch.on .bcur{animation:b-move 1.5s var(--ease) .8s both,b-out .3s var(--ease) 3.1s forwards}
.ch.on .tp-sent{animation:b-sent .5s cubic-bezier(.2,.9,.3,1.15) 3.8s both}
.ch.on .tp-sent .ck path{stroke-dasharray:1;animation:b-draw .6s var(--ease) 4s both}
.ch.on .tp-sent .ck circle{animation:b-ring 2.4s ease-in-out 4.6s infinite}
@keyframes b-ring{50%{opacity:.45}}
.ch.arm:not(.on) .tp-card,.ch.arm:not(.on) .bcur{opacity:0}
/* 17 council */
.cn{display:flex;flex-direction:column}
.cn-s,.cn-v{display:flex;gap:14px;align-items:stretch}
.cn-r{width:28px;flex:none;display:flex;flex-direction:column;align-items:center}
.cn-r b{position:relative;width:28px;height:28px;border-radius:50%;background:var(--pill);display:grid;place-items:center;font-weight:500;font-size:15px;color:var(--soft);flex:none;transition:none}
.cn-r i{flex:1;width:1px;margin:5px 0;background:rgba(111,224,174,.35);transform-origin:top;min-height:10px}
.cn-r .ck{width:24px;height:24px;margin:2px 0}
.cn-c{flex:1;display:grid;padding:2px 0 18px;min-height:30px}
.cn-v .cn-c{padding-bottom:0}.cn-v .cn-t{color:#fff}
.cn-c>*{grid-area:1/1}
.cn-t{color:var(--soft)}
.cn-r b::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 6px rgba(111,224,174,.14),inset 0 0 0 14px rgba(111,224,174,.16);opacity:0;pointer-events:none}
.cn-d{display:flex;gap:5px;align-items:flex-start;padding-top:11px;opacity:0}
.cn-d u{width:6px;height:6px;border-radius:50%;background:var(--mut);display:block;text-decoration:none}
@keyframes b-bob{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes b-dots{0%{opacity:0}10%,90%{opacity:1}100%{opacity:0}}
@keyframes b-glow{0%,100%{opacity:0}40%{opacity:1}}
.ch.on .cn-s{--t:calc(.3s + var(--i)*1.9s)}
}
.ch.on .cn-s .cn-r b{animation:b-up .5s var(--ease) var(--t) both}
.ch.on .cn-s .cn-r b::after{animation:b-glow 1.8s var(--ease) calc(var(--t) + 1s) both}
.ch.on .cn-d{animation:b-dots 1.1s linear var(--t) both}
.ch.on .cn-d u{animation:b-bob .9s ease-in-out var(--t) 1}
.ch.on .cn-d u:nth-child(2){animation-delay:calc(var(--t) + .15s)}.ch.on .cn-d u:nth-child(3){animation-delay:calc(var(--t) + .3s)}
.ch.on .cn-t{animation:b-up .6s var(--ease) calc(var(--t) + 1.05s) both}
.ch.on .cn-r i{animation:b-grow .7s var(--ease) calc(var(--t) + 1.5s) both}
.ch.on .cn-v .cn-r .ck{animation:b-in .3s linear 6s both}
.ch.on .cn-v .cn-r .ck path{stroke-dasharray:1;animation:b-draw .7s var(--ease) 6.1s both}
.ch.on .cn-v .cn-t{animation:b-up .6s var(--ease) 6s both;--t:0s}
.ch.arm:not(.on) .cn-s .cn-r b,.ch.arm:not(.on) .cn-t,.ch.arm:not(.on) .cn-v .ck{opacity:0}
/* 20 luck */
.lk-h{display:flex;justify-content:space-between;align-items:center;color:var(--mut);padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--hl);font-size:15px;line-height:20px}
.lk-n{height:20px;overflow:hidden;color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.lk-s{display:flex;flex-direction:column;animation:none}
.lk-s em{font-style:normal;height:20px;line-height:20px;text-align:right}
.lk-s{transform:translateY(-20px)}
.lk-i{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px;color:var(--mut)}
.lk-new{color:#fff;position:relative;border-radius:8px;margin:0 -12px;padding:0 12px;background:linear-gradient(90deg,rgba(31,174,116,.12),rgba(31,174,116,0))}
.lk-new::before,.lk-new::after{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;opacity:0}
.lk-new::before{background:rgba(31,174,116,.07)}
.lk-new::after{box-shadow:0 0 0 1px rgba(111,224,174,.9),0 0 26px rgba(31,174,116,.55)}
.lk-new,.lk-s,.lk-old{will-change:transform,opacity}
.lk-i .ck{width:20px;height:20px}
@keyframes b-slide{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes b-lglow{0%{opacity:1}100%{opacity:0}}
@keyframes b-shim{0%,100%{opacity:0}50%{opacity:1}}
@keyframes b-tick{from{transform:translateY(0)}to{transform:translateY(-20px)}}
@keyframes b-fresh{from{color:#fff}to{color:var(--mut)}}
.ch.on .lk-new{animation:b-slide .8s cubic-bezier(.22,1,.36,1) 1.2s both}
.ch.on .lk-new::after{animation:b-lglow 2.2s ease-out 1.5s both}
.ch.on .lk-new::before{animation:b-shim 3s ease-in-out 4s infinite}
.ch.on .lk-s{animation:b-tick .5s cubic-bezier(.22,1,.36,1) 2.1s both}
.ch.on .lk-new .ck{animation:b-in .2s linear 2.2s both}
.ch.on .lk-new .ck path{stroke-dasharray:1;animation:b-draw .6s var(--ease) 2.3s both}
.ch.on .lk-old{animation:b-up .5s var(--ease) calc(.1s + var(--k)*.12s) both}
.ch.arm:not(.on) .lk-s{transform:translateY(0)}
.ch.arm:not(.on) .lk-new,.ch.arm:not(.on) .lk-old{opacity:0}
/* 23 lock */
.mach{width:220px;margin:auto;stroke:#6b726e;stroke-width:1.5;overflow:visible}
.mach .lp{stroke-dasharray:1;stroke-dashoffset:0}
.mach .lb,.mach .sh{stroke:var(--g);stroke-width:1.6}.mach .lb{fill:var(--card)}
.mach .sh{transform-box:fill-box}
.mach .lkg{transform-box:fill-box;transform-origin:center}
.mach .dt{fill:var(--g);stroke:none}
.mach .dsp{transform-origin:80px 50.5px;animation:b-spin 12s linear infinite;will-change:transform}
.mach .clk{stroke:var(--g);stroke-width:1.4;fill:none;opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes b-spin{to{transform:rotate(360deg)}}
@keyframes b-open{from{transform:translateY(-7px) rotate(-12deg);stroke:#fff}to{transform:none;stroke:var(--g)}}
@keyframes b-click{0%{transform:none}40%{transform:scale(1.1)}100%{transform:none}}
@keyframes b-clk{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@keyframes b-dfade{from{opacity:0}to{opacity:1}}
.mach .lkg,.mach .clk{will-change:transform,opacity}
.ch.on .mach .lp{animation:b-draw 1.4s var(--ease) both}
.ch.on .mach .sh{animation:b-open .35s cubic-bezier(.5,0,.9,.4) 2.3s both}
.ch.on .mach .lkg{animation:b-click .3s ease-out 2.62s both}
.ch.on .mach .clk{animation:b-clk .7s ease-out 2.62s both}
.ch.on .mach .dts{animation:b-dfade .6s ease 2.9s both}
.ch.arm:not(.on) .mach .dts{opacity:0}
@media(prefers-reduced-motion:reduce){.mach .dsp{animation:none!important}.ch .tp-card{display:none}.ch .tp-sent{opacity:1;visibility:visible}}
@media(max-width:860px){
#ch-1500 .vz,#ch-1700 .vz,#ch-2000 .vz,#ch-2300 .vz{padding:28px}
.cn-t{font-size:16px;line-height:22px}.cn-c{padding-bottom:14px}
.lk-i{font-size:16px}
.mach{width:200px}
}