.draw-grid-stage{margin:26px auto 16px;max-width:1040px;border:1px solid #d1b0781d;border-radius:22px;background:radial-gradient(ellipse at 50% 78%,#75503428,transparent 62%),linear-gradient(145deg,#181221,#0d0a13);padding:20px 22px 18px;overflow:hidden}
.draw-grid-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;margin-bottom:4px;text-align:left;color:#a395b0}.draw-grid-heading strong{color:#d6b984;font-weight:400;letter-spacing:.05em}.draw-grid-heading span{color:#918199}
.draw-grid-viewport{height:365px;position:relative;overflow:hidden;touch-action:pan-y;outline:none;cursor:grab;user-select:none;-webkit-user-select:none;isolation:isolate}
.draw-grid-viewport.dragging{cursor:grabbing}.draw-grid-viewport:focus-visible{outline:1px solid #d4b27866;outline-offset:-2px;border-radius:12px}
.draw-grid-viewport:before{content:'';position:absolute;width:calc(var(--wheel-radius)*2);height:calc(var(--wheel-radius)*2);top:calc(var(--wheel-pivot) - var(--wheel-radius));left:50%;transform:translateX(-50%);border:1px solid #c9a76625;border-radius:50%;box-shadow:0 0 0 16px #c9a76604,0 0 0 36px #c9a76603;pointer-events:none}
.draw-grid-viewport:after{content:'FOLLOW YOUR INTUITION';position:absolute;bottom:19px;left:0;right:0;text-align:center;font:9px Georgia,serif;letter-spacing:.3em;color:#867249;pointer-events:none;z-index:400}
.draw-grid{position:relative;height:100%;width:100%;isolation:isolate}
.draw-choice{position:absolute;left:calc(50% + var(--wheel-x));top:calc(65px + var(--wheel-y));width:112px;height:185px;padding:0;border-radius:11px;background:#171021 url('/assets/card-back.svg') center/cover no-repeat;border:1px solid #cbb07788;box-shadow:-6px 5px 17px #0009;transform-origin:50% 100%;transform:translateX(-50%) rotate(var(--wheel-angle));z-index:var(--wheel-order);opacity:var(--wheel-opacity,1);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;will-change:transform;cursor:grab;-webkit-tap-highlight-color:transparent}
.draw-choice[hidden]{display:none}.draw-choice:focus-visible{outline:2px solid #f2d298;outline-offset:3px;z-index:300;transform:translateX(-50%) rotate(var(--wheel-angle)) translateY(-25px)}
@media(hover:hover){.draw-grid-viewport:not(.rotating) .draw-choice:hover{z-index:300;transform:translateX(-50%) rotate(var(--wheel-angle)) translateY(-25px);border-color:#f2d298;box-shadow:0 15px 30px #0009,0 0 18px #d6b87925}}
.draw-choice.selected{transform:translateX(-50%) rotate(var(--wheel-angle)) translateY(-37px);border-color:#f0d293;box-shadow:0 0 0 2px #d1b3786b,0 15px 35px #000a;z-index:var(--selected-order,200)}
.draw-choice.selected:after{content:'✓';position:absolute;top:10px;right:8px;width:18px;height:18px;line-height:18px;border-radius:50%;background:#ddbc7d;color:#21180e;font-size:11px}
.rotating .draw-choice{transition:none}.dragging .draw-choice{cursor:grabbing}.rotating .draw-choice:focus-visible{transform:translateX(-50%) rotate(var(--wheel-angle))}
.draw-choice .selected-badge{position:absolute;bottom:12px;left:0;right:0;color:#f5d99a;font-size:11px;background:#100b1699;line-height:1.8}
.wheel-navigation{text-align:center;margin-top:0}.wheel-help{font-size:12px;color:#b49c7c;letter-spacing:.04em}.wheel-help>span{display:inline-block;margin:0 13px;color:#d8bd88}.wheel-position{font:11px Georgia,serif;color:#7f708c;letter-spacing:.08em;margin-top:9px}
.wheel-selection-slot:focus-visible{outline:2px solid #f2d298;outline-offset:4px}.wheel-selection{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:530px;margin:20px auto 0}.wheel-selection-slot{text-align:left;border-radius:10px;padding:12px 15px;background:#ffffff03;border:1px dashed #ffffff13;box-shadow:none}.wheel-selection-slot>span{display:block;color:#8b7c95;font-size:10px;margin-bottom:7px}.wheel-selection-slot>b{display:block;color:#776881;font-size:11px;font-weight:400}.wheel-selection-slot.filled{border-style:solid;border-color:#c9a86d55;background:#c9a86d08}.wheel-selection-slot.filled>b{color:#d9bb86}.wheel-selection-slot em{float:right;font-style:normal;color:#aa9575}
#drawCount{margin:18px 0 8px}#drawPanel .shuffle-btn{font-size:12px;padding:10px 14px}#drawPanel #hint{font-size:12px;margin:10px 0}#drawPanel .cards:empty{margin:0}
.face.illustrated-front{padding:0;background:#100d17}.illustrated-front>img{width:100%;height:100%;object-fit:contain}.card-preview-label{position:absolute;left:0;right:0;bottom:0;padding:9px 4px;font-size:12px;color:#f1dfb8;background:linear-gradient(transparent,#0d0911ee)}
@media(max-width:700px){.draw-grid-stage{padding:15px 9px 18px;border-radius:16px;margin-top:20px}.draw-grid-heading{font-size:10px;flex-wrap:wrap;gap:7px;padding:0 5px}.draw-grid-viewport{height:282px}.draw-grid-viewport:after{bottom:15px;font-size:8px;letter-spacing:.2em}.draw-choice{width:78px;height:130px;top:calc(54px + var(--wheel-y));border-radius:8px}.draw-choice.selected{transform:translateX(-50%) rotate(var(--wheel-angle)) translateY(-23px)}.draw-choice.selected:after{width:14px;height:14px;line-height:14px;top:7px;right:5px;font-size:9px}.draw-choice .selected-badge{font-size:9px;bottom:8px}.wheel-help{font-size:11px}.wheel-help>span{margin:0 8px}.wheel-position{font-size:10px}.wheel-selection{gap:7px;margin-top:16px}.wheel-selection-slot{padding:10px 9px}.wheel-selection-slot>b{font-size:10px}#drawPanel .screen-title{font-size:24px}}
@media(prefers-reduced-motion:reduce){.draw-choice{transition:none}}
