/* 抽一贴（插件 klpbbs_draw）：侧栏按钮 + 抽取弹层。颜色、圆角、阴影全用 klp.css 的变量，夜间模式自动跟上 */

/* ---------- 侧栏按钮：签到卡正上方 ---------- */
.klp-draw { margin-bottom: 10px; }
.klp-draw-btn { position: relative; width: 100%; height: 34px; overflow: hidden; }
.klp-draw-btn .k-ic { color: var(--brand); transition: transform .6s var(--ease); }
.klp-draw-btn:hover .k-ic { transform: rotate(180deg); }
/* 悬停时扫过一道流光 */
.klp-draw-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--brand) 22%, transparent) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }
.klp-draw-btn:hover::after { animation: klpDrawShine .9s var(--ease); }
.klp-draw-btn.k-busy { pointer-events: none; opacity: .7; }

/* ---------- 弹层 ---------- */
.klp-draw-pop { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; }
.klp-draw-veil { position: absolute; inset: 0; background: var(--veil); backdrop-filter: var(--veil-fx); animation: klpFade var(--dur-2) var(--ease); }
/* 外框 2px 留给一圈转动的青绿光边，面板本身是实底卡片 */
.klp-draw-frame { position: relative; width: min(420px, 100%); padding: 2px; border-radius: calc(var(--r-lg) + 2px); overflow: hidden; background: var(--line); box-shadow: var(--shadow-pop); animation: klpDrawIn .45s var(--ease); }
.klp-draw-frame::before { content: ""; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; background: conic-gradient(transparent 0 58%, var(--brand) 80%, transparent 100%); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease-io); }
.klp-draw-pop.is-spin .klp-draw-frame::before { opacity: 1; animation: klpDrawRing 1.1s linear infinite; }
.klp-draw-pop.is-hit .klp-draw-frame { box-shadow: var(--shadow-pop), 0 0 48px color-mix(in srgb, var(--brand) 45%, transparent); transition: box-shadow var(--dur-3) var(--ease); }
.klp-draw-panel { position: relative; padding: 18px; border-radius: var(--r-lg); background: var(--surface); }
.klp-draw-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; z-index: 2; }
.klp-draw-x:hover { background: var(--hover); color: var(--text); }
.klp-draw-h { display: flex; align-items: baseline; gap: 10px; padding-right: 32px; margin-bottom: 10px; }
.klp-draw-h b { font-size: 16px; }
.klp-draw-h .k-meta { font-size: 12px; }

/* 滚轮：5 行窗口，正中一行是高亮的「中奖位」，上下渐隐 */
.klp-draw-reel { position: relative; height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.klp-draw-reel::before { content: ""; position: absolute; left: 0; right: 0; top: 104px; height: 52px; border-radius: var(--r-md); background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
.klp-draw-list { position: relative; will-change: transform; }
.klp-draw-row { box-sizing: border-box; height: 52px; display: flex; align-items: center; padding: 0 16px; font-size: 14px; color: var(--text-3); transition: color var(--dur-1) var(--ease-io); }
.klp-draw-row.on { color: var(--text); font-weight: 600; }
.klp-draw-sk { display: block; height: 10px; border-radius: 5px; }
.klp-draw-reel.is-wait .klp-draw-list { animation: klpDrawLoop .55s linear infinite; }
.klp-draw-reel.is-fast .klp-draw-list { filter: blur(1.2px); }
.klp-draw-pop.is-hit .klp-draw-row.win { color: var(--soft-ink); animation: klpDrawPulse .5s var(--ease) 2; }

/* 停稳时从中奖位炸开的碎片，方向和距离由 draw.js 写进 --dx / --dy；top = 面板内边距 + 标题行 + 滚轮半高 */
.klp-draw-burst { position: absolute; left: 50%; top: 182px; width: 0; height: 0; pointer-events: none; }
.klp-draw-burst i { position: absolute; left: -4px; top: -3px; width: 8px; height: 6px; border-radius: 2px; background: var(--c); opacity: 0; animation: klpDrawBurst .95s cubic-bezier(.15,.7,.3,1) forwards; }

/* 底部「跳过动画」 */
.klp-draw-foot { display: flex; justify-content: center; margin-top: 8px; }
.klp-draw-skip { color: var(--text-3); }
.klp-draw-skip:hover { color: var(--text); background: var(--hover); }

@keyframes klpDrawShine { to { transform: translateX(100%); } }
@keyframes klpDrawIn { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes klpDrawRing { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes klpDrawLoop { to { transform: translateY(-104px); } }
@keyframes klpDrawPulse { 50% { transform: scale(1.04); } }
@keyframes klpDrawBurst {
	0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
	100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.4); }
}