.luck { padding:20px 0; animation:luck-enter .45s ease-out both; }
.luck-shop { margin-top:42px; padding-top:26px; border-top:1px solid var(--line); scroll-margin-top:85px; }
.luck-shop-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.luck-shop h2 { margin:0; }.luck-shop p { color:var(--muted); font-size:13px; line-height:1.6; }
.luck-packs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:24px 0; }
.luck-pack img.pack-item { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; }
.luck-confirm { position:fixed; inset:auto 16px max(16px,env(safe-area-inset-bottom)); margin:0 auto; width:min(480px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:0; color:var(--text); border:1px solid #39485d; border-radius:20px; background:#101722; box-shadow:0 20px 70px #0009; }
.luck-confirm[open] { animation:luck-sheet-in .3s cubic-bezier(.2,.8,.2,1) both; }
.luck-confirm::backdrop { background:#0009; animation:luck-backdrop-in .25s ease both; }
.luck-confirm.closing { animation:luck-sheet-out .2s ease both; }.luck-confirm.closing::backdrop { animation:luck-backdrop-in .2s ease reverse both; }
.luck-confirm-content { padding:28px; }.luck-confirm h2 { margin:14px 0; font-size:23px; line-height:1.4; }.luck-confirm p { color:var(--muted); font-size:14px; }.luck-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }.luck-confirm-actions button { min-height:46px; }.luck-confirm-actions button:disabled { opacity:.45; cursor:not-allowed; }.luck-confirm-actions .secondary { background:#202b3c; color:#d6e5f5; }
.luck-toast { position:fixed; z-index:1000; top:84px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100% - 32px); padding:16px 22px; border:1px solid #4b9b73; border-radius:12px; background:#12271e; color:#b9f6cf; box-shadow:0 12px 40px #0005; font-size:14px; pointer-events:none; }.luck-toast[hidden] { display:none; }.luck-toast>span { font-size:22px; }
@keyframes luck-sheet-in { from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none} }
@keyframes luck-sheet-out { from{opacity:1;transform:none}to{opacity:0;transform:translateY(80px)} }
@keyframes luck-backdrop-in { from{opacity:0}to{opacity:1} }
@media(prefers-reduced-motion:reduce){.luck-confirm[open],.luck-confirm.closing,.luck-confirm::backdrop{animation:none}}
.luck-pack { padding:22px 12px 16px; display:flex; flex-direction:column; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; background:#101722; text-align:center; transition:transform .18s,border-color .18s; }
.luck-pack:hover { transform:translateY(-4px); border-color:var(--blue); }.luck-pack h3 { margin:0; font-size:20px; }.luck-pack small { font-size:11px; color:var(--muted); min-height:30px; }.luck-pack>strong { font-size:18px; }.pack-item { width:72px; height:72px; margin-bottom:8px; filter:drop-shadow(0 8px 12px #0006); }.luck-pack form { width:100%; margin:0; }.luck-pack button,.luck-pack .button { width:100%; padding:10px 8px; min-width:0; font-size:13px; }
@media(max-width:760px){.luck-packs{grid-template-columns:repeat(2,minmax(0,1fr))}.luck-pack:last-child{grid-column:1/-1}.luck-shop-heading{gap:8px}}
@media(prefers-reduced-motion:reduce){.luck-pack{transition:none}.luck-pack:hover{transform:none}}
.luck-heading { text-align:center; margin-bottom:40px; }
.luck-heading h1 { margin:12px 0; font-size:clamp(32px,5vw,54px); letter-spacing:-.04em; }
.luck-heading p,.luck-actions>p,.luck-result p { color:var(--muted); }
.luck-reel { height:254px; overflow:hidden; position:relative; background:#080c13; border-block:1px solid var(--line); isolation:isolate; }
.luck-reel::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#080c13,transparent 18%,transparent 82%,#080c13); }
.luck-marker { position:absolute; inset:0 auto 0 50%; width:2px; z-index:3; }
.luck-marker::before,.luck-marker::after { content:''; position:absolute; left:-6px; border:7px solid transparent; }
.luck-marker::before { top:0; border-top-color:var(--blue); }.luck-marker::after { bottom:0; border-bottom-color:var(--blue); }
.luck-track { display:flex; width:max-content; gap:12px; height:100%; align-items:center; will-change:transform; }
.luck-slot { --rarity:#626a78; flex:none; width:168px; height:214px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:#111b29; color:var(--text); border-radius:12px; border-bottom:3px solid var(--rarity); padding:10px; text-align:center; line-height:1.3; font-size:13px; }
.rarity-green { --rarity:#61d997; }.rarity-purple { --rarity:#bc91ff; }.rarity-gold { --rarity:#f3ca65; }.rarity-red { --rarity:#ff6c7e; }
.luck-slot svg { width:52px; height:62px; flex:none; fill:none; stroke:var(--rarity); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.luck-slot svg.luck-avatar { width:108px; height:106px; stroke:none; }
.luck-slot strong { min-height:32px; display:flex; align-items:center; justify-content:center; }
.luck-rarity { color:var(--rarity); font-size:10px; letter-spacing:.04em; }
.luck-rarities { display:flex; flex-wrap:wrap; gap:12px 24px; margin:0 0 26px; font-size:12px; }.luck-rarities span { color:var(--rarity); }.luck-rarities span::before { content:'◆'; margin-right:7px; }
.luck-doll { animation:luck-float 2.4s ease-in-out infinite alternate; }
.luck-slot small { color:var(--muted); }
.luck-slot.luck-empty { background:#000; color:#aab0ba; }.luck-slot.luck-empty svg { stroke:#626a78; }
.luck-slot.winner { outline:2px solid var(--rarity); outline-offset:-2px; animation:luck-win .5s ease-out; }
.luck-result { text-align:center; padding:30px 16px 6px; min-height:124px; }
.luck-result>strong { font-size:25px; }.luck-result p { margin:8px auto; max-width:620px; font-size:14px; }
.luck-actions { display:flex; align-items:center; flex-direction:column; gap:12px; text-align:center; }
.luck-actions form { margin:0; }.luck-actions button,.luck-actions>a { min-width:240px; transition:transform .2s ease,opacity .2s ease; }
.luck-actions button:not(:disabled):hover,.luck-actions>a:hover { transform:translateY(-2px); }
.luck-actions button:disabled { opacity:.5; cursor:not-allowed; }.luck-actions>p { margin:0; font-size:13px; font-variant-numeric:tabular-nums; }
.luck-odds { display:grid; grid-template-columns:repeat(4,1fr); margin:48px 0 32px; border-block:1px solid var(--line); padding:24px 0; gap:24px; }
.luck-odds p { margin:0; display:grid; gap:5px; }.luck-odds strong { font-size:25px; color:var(--blue); }.luck-odds span { font-size:13px; color:var(--muted); }
.luck-rules { color:var(--muted); font-size:14px; }.luck-rules summary { color:var(--text); cursor:pointer; }.luck-back { margin-top:28px; font-size:13px; }
@keyframes luck-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes luck-win { from { filter:brightness(1.6); } to { filter:brightness(1); } }
@keyframes luck-float { from { transform:translateY(0); } to { transform:translateY(-2px); } }
@media(max-width:600px){.luck{padding:0}.luck-heading{margin-bottom:24px}.luck-reel{height:236px}.luck-slot{width:144px;height:206px}.luck-odds{grid-template-columns:repeat(2,1fr);gap:20px}.luck-result{min-height:140px}.luck-actions button{min-width:210px}}
@media(prefers-reduced-motion:reduce){.luck,.luck-slot.winner,.luck-doll{animation:none}.luck-actions button,.luck-actions>a{transition:none}}