/* Слоти Lucky Orbit: каталог, екран гри, правила. Кольори — змінні з index.html. */
.sl-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 6px;gap:8px}
.sl-hdr .back,.sl-hdr .bal{flex:none}
.sl-title{min-width:0;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;text-align:center;line-height:1.1}
.sl-logo{min-width:0;flex:1;text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;line-height:1;letter-spacing:.02em;text-transform:uppercase;background:linear-gradient(180deg,#FFFFFF 0%,var(--lg1,#FFE08A) 45%,var(--lg2,#FF8A1F) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(26,11,61,.9)) drop-shadow(0 0 10px var(--lgg,rgba(255,138,31,.6)))}
.sl-list{display:flex;flex-direction:column;gap:12px;padding:6px 12px 16px}
.sl-card{display:flex;min-height:148px;border-radius:22px;border:0;padding:0;text-align:left;color:var(--tx);overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.18);animation:in .45s both;font:inherit;width:100%;position:relative}
.sl-card .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:16px 0 16px 16px;position:relative;z-index:1}
.sl-card b{font-family:'Space Grotesk',sans-serif;font-size:22px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 0 rgba(26,11,61,.6)}
.sl-card .tg{font-size:13px;color:#FFF4FF;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.sl-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.sl-chips span{background:rgba(13,10,36,.6);border-radius:999px;padding:4px 9px;font-size:12px;font-weight:600}
.sl-card .art{width:132px;flex:none;display:flex;align-items:center;justify-content:center;position:relative}
.sl-card .art svg{width:104px;height:104px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));animation:slbob 3s ease-in-out infinite}
.sl-card .art svg+svg{position:absolute;width:44px;height:44px;left:4px;top:10px;animation-delay:.6s}
.sl-card .art svg+svg+svg{left:auto;right:6px;top:auto;bottom:10px;animation-delay:1.2s}

/* Сцени ігор */
#slot{background:#0D0A24}
#slot[data-kind=scatter]{--lg1:#FFE08A;--lg2:#FF8A1F;--lgg:rgba(255,138,31,.65);background:radial-gradient(circle at 50% 8%,rgba(255,214,120,.55) 0,rgba(255,214,120,0) 26%),linear-gradient(180deg,#2B0F4F 0%,#6E2462 30%,#C9483F 55%,#5A1A48 78%,#1A0B30 100%)}
#slot[data-kind=cluster]{--lg1:#FFC2F2;--lg2:#FF4FD8;--lgg:rgba(255,79,216,.7);background:radial-gradient(circle at 15% 12%,rgba(255,122,217,.55) 0,rgba(255,122,217,0) 34%),radial-gradient(circle at 85% 22%,rgba(122,217,255,.45) 0,rgba(122,217,255,0) 30%),radial-gradient(circle at 50% 90%,rgba(255,201,60,.3) 0,rgba(255,201,60,0) 40%),linear-gradient(180deg,#4A1880,#2A0E5C 60%,#160838)}
#slot[data-kind=book]{--lg1:#FFE9A0;--lg2:#D98200;--lgg:rgba(255,176,32,.6);background:radial-gradient(circle at 50% 0,rgba(255,176,32,.35) 0,rgba(255,176,32,0) 40%),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,0) 2px 46px),linear-gradient(180deg,#3A2010,#1E1008 55%,#0E0704)}
#slot[data-kind=lines]{--lg1:#BFF7FF;--lg2:#B03BFF;--lgg:rgba(62,232,255,.7);background:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 72% 9%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 88% 44%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 62%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 32%,#BFF7FF 50%,transparent 51%),radial-gradient(circle at 50% 35%,#3B1E8F 0,#14093F 55%,#07041A 100%)}

/* Рамка барабанів */
.sl-board{margin:0 10px;padding:4px;border-radius:20px;position:relative;background:linear-gradient(180deg,#FFF0B8,#E0A82E 30%,#8A5A00 70%,#FFE08A);box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 24px var(--lgg,rgba(255,201,60,.35))}
.sl-board::before{content:"";position:absolute;inset:2px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);pointer-events:none}
.sl-reels{border-radius:16px;padding:4px;background:linear-gradient(180deg,rgba(18,9,46,.92),rgba(36,16,84,.92));box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.sl-grid{position:relative;overflow:hidden;border-radius:12px;touch-action:manipulation;margin:0 auto}
.sl-reel{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 50%,rgba(255,255,255,.07));border-left:1px solid rgba(0,0,0,.35);border-right:1px solid rgba(255,255,255,.06)}
.sl-cell{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:12px}
.sl-cell svg{width:88%;height:88%;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
.sl-cell.fall{animation:slfall var(--dur,.42s) cubic-bezier(.3,.7,.4,1) var(--delay,0s) both}
.sl-cell.hot{background:radial-gradient(circle,rgba(255,224,138,.65),rgba(255,201,60,0) 70%);animation:slwin .6s ease-in-out infinite;z-index:2}
.sl-cell.hot svg{filter:drop-shadow(0 0 6px #FFE08A) drop-shadow(0 0 2px #fff)}
.sl-cell.gone{animation:slgone .22s ease-in forwards}
.sl-cell .orb{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:#fff;-webkit-text-stroke:3px #3A0A7A;paint-order:stroke fill;text-shadow:0 0 10px var(--mag)}
.sl-cell.is-orb svg{animation:slorb 1.6s ease-in-out infinite}
.sl-cell.is-sc svg{animation:slspin 9s linear infinite}
.sl-spot{position:absolute;border-radius:10px;display:flex;align-items:flex-end;justify-content:flex-end;padding:2px 4px;box-sizing:border-box;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;color:var(--gold-ink);pointer-events:none}
.sl-spot.mk{background:rgba(62,232,255,.16);box-shadow:inset 0 0 0 1px rgba(62,232,255,.5)}
.sl-spot.mx{background:rgba(255,201,60,.34);box-shadow:inset 0 0 0 2px var(--gold),0 0 10px rgba(255,201,60,.55)}
.sl-spot.mx span{background:var(--gold);border-radius:6px;padding:0 4px}
.sl-col{position:absolute;top:0;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;background:linear-gradient(180deg,rgba(255,79,216,.45),rgba(62,232,255,.35));box-shadow:0 0 22px rgba(255,79,216,.7),inset 0 0 0 2px rgba(255,255,255,.55);animation:slexpand .45s ease-out both;pointer-events:none;z-index:3}
.sl-col svg{width:78%;height:auto;filter:drop-shadow(0 0 8px #fff)}
.sl-lines{position:absolute;inset:0;pointer-events:none;z-index:4}
.sl-lines polyline{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(0,0,0,.7))}
.sl-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(58,20,110,.95),rgba(13,10,36,.92));border:2px solid var(--gold);border-radius:18px;padding:12px 22px;white-space:nowrap;box-shadow:0 0 40px rgba(255,201,60,.5);animation:slbanner 1.9s ease-out forwards;z-index:6}
.sl-banner small{display:block;color:#FFE08A;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sl-banner b{font-family:'Space Grotesk',sans-serif;font-size:34px;background:linear-gradient(180deg,#FFFFFF,#FFE08A 45%,#FF8A1F);-webkit-background-clip:text;background-clip:text;color:transparent}
.sl-banner.big b{font-size:44px}
.sl-coin{position:absolute;top:-30px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF,#FFC93C 45%,#B86800);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);pointer-events:none;z-index:7;animation:slcoin var(--t,1.6s) cubic-bezier(.4,.1,.7,1) var(--d,0s) forwards}
.sl-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle,rgba(58,20,110,.92),rgba(13,10,36,.92));border-radius:12px;z-index:8;animation:in .3s both;text-align:center;padding:16px}
.sl-intro b{font-family:'Space Grotesk',sans-serif;font-size:30px;text-transform:uppercase;background:linear-gradient(180deg,#FFFFFF,#FFE08A 45%,#FF8A1F);-webkit-background-clip:text;background-clip:text;color:transparent}
.sl-intro svg{width:90px;height:90px;animation:slwin 1s ease-in-out infinite}
.sl-hint{position:absolute;left:8px;right:8px;bottom:8px;background:var(--s2);border:1px solid var(--cyan);border-radius:14px;padding:8px 10px 8px 12px;font-size:13px;line-height:1.4;z-index:9;animation:in .3s both;display:flex;gap:10px;align-items:center}
.sl-hint button{margin-left:auto;background:var(--cyan);color:#062A33;border:0;border-radius:10px;font-weight:700;padding:8px 12px;min-height:44px;flex:none}

/* Панель керування */
.sl-meter{margin:8px 10px 0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;border-radius:14px;background:rgba(10,6,30,.72);border:1px solid rgba(255,224,138,.35);padding:0 14px;font-size:13px;color:#E6DEFF}
.sl-meter b{font-family:'Space Grotesk',sans-serif;font-size:20px;color:#fff;font-variant-numeric:tabular-nums;min-width:0}
.sl-meter b.w{color:var(--lime);text-shadow:0 0 10px rgba(140,255,90,.5)}
.sl-meter.fs{background:linear-gradient(120deg,#B03BFF,var(--mag));border-color:transparent;box-shadow:0 6px 18px rgba(255,79,216,.4);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;justify-content:space-between}
.sl-meter.fs i{font-style:normal;background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:5px 10px;font-size:14px}
.sl-ctrl{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px 12px 10px;justify-content:flex-end}
.sl-pad{display:grid;grid-template-columns:48px 48px minmax(0,1fr) 48px 48px;align-items:center;gap:8px}
.sl-rb{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(10,6,30,.7);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;padding:0}
.sl-rb[aria-pressed=true]{background:var(--mag);border-color:var(--mag);color:#2A0024}
.sl-rb:disabled{opacity:.4}
.sl-mid{display:flex;flex-direction:column;align-items:center;gap:4px}
.sl-spin{width:82px;height:82px;border-radius:50%;border:3px solid #FFF0B8;background:radial-gradient(circle at 35% 28%,#FFF6C0,#FFC93C 45%,#D98200);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 0 #8A5A00,0 10px 20px rgba(0,0,0,.45);animation:pulse 1.8s infinite;padding:0}
.sl-spin svg{width:40px;height:40px;transition:transform .5s}
.sl-spin.busy svg{animation:slspin .7s linear infinite}
.sl-spin:active{transform:translateY(3px);box-shadow:0 3px 0 #8A5A00,0 6px 12px rgba(0,0,0,.45)}
.sl-spin:disabled{animation:none;filter:saturate(.5) brightness(.8)}
.sl-betl{font-size:12px;color:#E6DEFF;font-variant-numeric:tabular-nums}
.sl-betl b{color:#fff}
.sl-row2{display:flex;gap:8px}
.sl-buy{flex:1;min-height:48px;border-radius:14px;border:2px solid #FFC2F2;background:linear-gradient(180deg,#FF6FE0,#B03BFF);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 0 #6A1A8A;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.sl-buy:disabled{opacity:.45}
.sl-buy[hidden]{display:none}
.sl-fair{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:12px;color:#CFC6F0}
.sl-sheet{position:absolute;inset:0;background:var(--bg);z-index:30;display:flex;flex-direction:column;animation:in .25s both;overflow:auto}
.sl-sheet .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sl-sheet .facts div{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
.sl-sheet .facts b{display:block;font-size:17px}
.sl-sheet .facts small{color:var(--mut);font-size:12px}
.sl-rule{display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.45}
.sl-rule svg{width:40px;height:40px;flex:none}
.sl-pay{display:grid;gap:4px;align-items:center;padding:3px 0;border-top:1px solid var(--s2);font-variant-numeric:tabular-nums;text-align:right;font-size:14px}
.sl-pay.h{color:var(--mut);font-size:12px;border-top:0}
.sl-pay svg{width:34px;height:34px}
.sl-pay b{color:var(--gold)}
.sl-confirm{position:fixed;inset:0;background:rgba(5,3,18,.7);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:in .2s both}
.sl-confirm>div{width:100%;max-width:480px;background:var(--s1);border-top:1px solid var(--line);border-radius:22px 22px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
@keyframes slfall{from{transform:translateY(var(--from,0))}to{transform:none}}
@keyframes slwin{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}
@keyframes slgone{to{transform:scale(.2);opacity:0}}
@keyframes slorb{0%,100%{filter:drop-shadow(0 0 4px #FF4FD8)}50%{filter:drop-shadow(0 0 14px #FF4FD8)}}
@keyframes slspin{to{transform:rotate(360deg)}}
@keyframes slbob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes slexpand{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes slbanner{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}18%{transform:translate(-50%,-50%) scale(1.12);opacity:1}82%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-60%) scale(.96);opacity:0}}
@keyframes slcoin{0%{transform:translateY(0) rotateY(0)}100%{transform:translateY(var(--y,420px)) rotateY(720deg);opacity:.2}}