/* Crisp cards and restrained motion, matching the light blue-purple theme. */
dialog.is-drawing{width:min(730px,94vw);overflow:hidden;padding:30px;border-color:#c4b5df}
dialog.is-drawing>.close:disabled{visibility:hidden}
.kuji-draw{position:relative;text-align:center;color:#283247}
.draw-topline{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:23px}
.draw-kicker{font-size:10px;letter-spacing:2px;color:#6c538c;font-weight:600}
.draw-skip{font-size:12px;color:#5c427b;border:1px solid #cbb8df;border-radius:20px;padding:6px 13px;background:#fff}
.draw-skip:hover{background:#f2ebfa;border-color:#9b79bd}
.draw-heading{font-size:25px;letter-spacing:.5px;color:#30273e;margin:0 0 8px;font-weight:700}
.draw-subtitle{font-size:12px;color:#60677b;margin:0}
.draw-ticket-stage{position:relative;height:295px;max-width:440px;margin:4px auto 0;perspective:1100px;isolation:isolate}
.draw-orbit{position:absolute;left:50%;top:49%;border:1px solid #d8c7ee;border-radius:50%;width:305px;height:205px;transform:translate(-50%,-50%) rotate(-24deg);background:radial-gradient(ellipse,#f3edff80,transparent 72%);z-index:-1}
.draw-orbit-two{width:332px;height:170px;transform:translate(-50%,-50%) rotate(24deg);border-color:#c6dce9;background:none}
.draw-spark{position:absolute;color:#8051b0;font-size:28px;line-height:1}
.draw-spark-one{left:27px;top:55px}.draw-spark-two{right:22px;bottom:59px;color:#237b9a;font-size:32px}
.draw-ticket{position:absolute;width:164px;height:223px;top:33px;left:50%;margin-left:-82px;transform:translate(var(--fan-x),0) rotate(var(--fan-angle));transition:transform .42s cubic-bezier(.2,.75,.25,1),opacity .32s;transform-style:preserve-3d}
.draw-ticket-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.draw-ticket-back,.draw-ticket-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;align-items:center;border:1px solid #a392c4;box-shadow:0 10px 21px #43386824}
.draw-ticket-back{background:linear-gradient(145deg,#61479c,#514fb0 56%,#266e98);color:#fff;justify-content:space-between;padding:21px 12px 19px}
.draw-ticket-back:before{content:'';position:absolute;inset:8px;border:1px solid #ded6ff80;border-radius:9px;pointer-events:none}
.draw-ticket-back:after{content:'';width:180px;height:180px;border:1px solid #ffffff24;position:absolute;top:21px;border-radius:50%;transform:rotate(35deg) scaleY(.75);pointer-events:none}
.draw-ticket-brand{font-size:8px;letter-spacing:2px;color:#fff;position:relative;z-index:1}
.draw-ticket-seal{font-size:58px;font-weight:800;width:87px;height:90px;display:grid;place-items:center;line-height:1;border:1px solid #d6c5f5;border-radius:17px 17px 17px 4px;position:relative;z-index:1}
.draw-ticket-number{font-size:11px;letter-spacing:3px;color:#fff;position:relative;z-index:1}
.draw-ticket-front{transform:rotateY(180deg);background:#fff;padding:14px 11px 12px;border-color:#b29ccf;gap:3px}
.draw-ticket-front-label{font-size:7px;letter-spacing:2px;color:#6d5c81}
.draw-ticket-rank{font-size:32px;line-height:1.2;color:#693e9d;font-weight:800}
.draw-ticket-art{width:100%;min-height:0;height:116px;display:grid;place-items:center}
.draw-ticket-art img{width:100%;height:100%;object-fit:contain}
.draw-art-fallback{color:#865ab2;font-size:63px}
.draw-ticket-prize-name{font-size:10px;line-height:1.6;color:#4d435c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.draw-ticket-premium .draw-ticket-front{border:2px solid #9d6cc1;background:linear-gradient(140deg,#fff 60%,#f1e6fb)}
.draw-ticket-premium .draw-ticket-rank{color:#763b9d}
.kuji-draw[data-phase="gather"] .draw-ticket{animation:ticket-arrive 1.05s cubic-bezier(.16,.8,.3,1) both}
.kuji-draw[data-phase="charge"] .draw-ticket{transform:translate(0,var(--stack-y)) rotate(var(--stack-angle))}
.kuji-draw[data-phase="charge"] .draw-orbit-one{animation:orbit-tighten .65s ease-in-out both}
.kuji-draw[data-phase="charge"] .draw-spark{animation:spark-grow .6s ease both}
.kuji-draw[data-phase="reveal"] .draw-ticket{transform:translate(0,var(--stack-y)) rotate(var(--stack-angle))}
.kuji-draw[data-phase="reveal"] .draw-ticket.is-current{transform:translateY(-4px) rotate(0);z-index:30!important}
.kuji-draw[data-phase="reveal"] .draw-ticket.is-current .draw-ticket-inner{transform:rotateY(180deg)}
.kuji-draw[data-phase="reveal"] .draw-ticket.is-past{opacity:0;transform:translateY(65px) scale(.7);pointer-events:none}
.draw-revealed{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 auto 12px;max-width:420px}
.draw-revealed-chip{font-size:11px;min-width:32px;padding:4px 8px;border:1px solid #ccd2df;background:#f7f8fc;color:#667084;border-radius:5px;transition:background .2s,border-color .2s}
.draw-revealed-chip.is-revealed{color:#65368c;border-color:#bb9fd4;background:#f0e7fa;font-weight:600}
.draw-status{font-size:12px;color:#535c71;min-height:20px;margin:10px 0}
.draw-progress{height:3px;border-radius:3px;background:#e7e3ee;max-width:235px;margin:0 auto;overflow:hidden}
.draw-progress>span{display:block;width:0;height:100%;background:var(--gradient);transition:width .3s}
.draw-demo-note{font-size:11px;color:#697084;margin:17px 0 0}
.result-view .result-chips{align-items:stretch}
.result-view .result-chip{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:145px;max-width:220px;flex:1;font-size:11px}
.result-view .draw-result-image{width:100%;height:117px;object-fit:contain}
.draw-result-ticket{font-size:10px;color:#646c80;letter-spacing:1px}
.result-view .result-chip b{font-size:26px}
@keyframes ticket-arrive{from{opacity:0;transform:translate(calc(var(--fan-x) * 1.8),45px) rotate(calc(var(--fan-angle) * 1.5)) scale(.76)}to{opacity:1;transform:translate(var(--fan-x),0) rotate(var(--fan-angle)) scale(1)}}
@keyframes orbit-tighten{from{transform:translate(-50%,-50%) rotate(-24deg) scale(1.05)}to{transform:translate(-50%,-50%) rotate(22deg) scale(.94)}}
@keyframes spark-grow{0%{transform:scale(.8)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@media(max-width:680px){
 dialog.is-drawing{padding:24px 17px;width:94vw}
 .draw-topline{margin-bottom:23px;gap:9px}
 .draw-kicker{font-size:8px;letter-spacing:1.1px}
 .draw-skip{font-size:11px;padding:6px 10px}
 .draw-heading{font-size:21px}.draw-subtitle{font-size:11px}
 .draw-ticket-stage{height:281px;max-width:320px}
 .draw-ticket{width:148px;height:209px;margin-left:-74px;top:32px}
 .draw-ticket-art{height:104px}
 .draw-ticket-rank{font-size:29px}
 .draw-orbit{width:245px;height:182px}.draw-orbit-two{width:268px;height:164px}
 .draw-spark-one{left:5px;top:55px;font-size:23px}
 .draw-spark-two{right:5px;bottom:61px;font-size:26px}
 .draw-status{font-size:11px}
 .draw-revealed{gap:5px}.draw-revealed-chip{min-width:28px;padding:3px 6px;font-size:10px}
 .draw-demo-note{font-size:10px}
 .result-view .result-chip{min-width:112px;max-width:180px;padding:12px;font-size:10px}
 .result-view .draw-result-image{height:95px}
}
@media(prefers-reduced-motion:reduce){
 .kuji-draw *{animation:none!important;transition:none!important}
}


/* Three cuts before revealing; cards stay opaque and sharp. */
.draw-ticket-stage{--shuffle-distance:85px}
.kuji-draw[data-phase="shuffle"] .draw-ticket{animation:ticket-shuffle .8s cubic-bezier(.4,0,.3,1) 3 both;transition:none}
.kuji-draw[data-phase="shuffle"] .draw-orbit-one{animation:shuffle-orbit 2.4s ease-in-out both}
.kuji-draw[data-phase="reveal"] .draw-shuffle-ghost{opacity:0;pointer-events:none;transform:translateY(24px) scale(.9)}
@keyframes ticket-shuffle{
 0%,100%{transform:translate(0,var(--stack-y)) rotate(var(--stack-angle));z-index:var(--shuffle-rest-z)}
 28%{transform:translate(calc(var(--shuffle-side) * var(--shuffle-distance)),calc(-12px - var(--shuffle-lift))) rotate(calc(var(--shuffle-side) * 13deg));z-index:var(--shuffle-rest-z)}
 45%{transform:translate(calc(var(--shuffle-side) * var(--shuffle-distance)),calc(-12px - var(--shuffle-lift))) rotate(calc(var(--shuffle-side) * 13deg));z-index:var(--shuffle-front-z)}
 73%{transform:translate(calc(var(--shuffle-side) * -32px),calc(9px - var(--shuffle-lift))) rotate(calc(var(--shuffle-side) * -5deg));z-index:var(--shuffle-front-z)}
}
@keyframes shuffle-orbit{0%{transform:translate(-50%,-50%) rotate(-24deg)}50%{transform:translate(-50%,-50%) rotate(12deg)}100%{transform:translate(-50%,-50%) rotate(-24deg)}}
@media(max-width:680px){.draw-ticket-stage{--shuffle-distance:60px}}
@media(prefers-reduced-motion:reduce){.kuji-draw[data-phase="shuffle"] .draw-ticket,.kuji-draw[data-phase="shuffle"] .draw-orbit-one{animation:none!important}}