/* ⚡ OLİMP ekranı (v76.60 PROTOTİP) - simvollar/fon CSS-dir, PNG gələndə .olc[data-s] fonları dəyişir */
#olScreen{position:fixed; inset:0; z-index:8900; display:none; flex-direction:column; overflow:hidden;
  padding:6px 10px 10px;
  background:#1a1030 url(img/ol/sky.jpg?v=1) center/cover no-repeat;   /* v76.66: sahibin səma/məbəd fonu bütün ekranda */
  color:#f3ecd6; font-family:inherit; -webkit-user-select:none; user-select:none}
#olScreen.on{display:flex}
@media (min-width:700px){ #olScreen{width:520px; margin:0 auto; border-left:1px solid rgba(255,255,255,.09);
  border-right:1px solid rgba(255,255,255,.09); box-shadow:0 0 70px rgba(0,0,0,.75)} }
/* 🏛 başlıq zolağı (loqo + personaj yeri sahibdən gələcək) */
#olHead{position:relative; flex:none; height:clamp(70px, 14vh, 130px); overflow:hidden; margin:-6px -10px 2px;
  background:linear-gradient(180deg,rgba(20,8,40,.35),rgba(20,8,40,0))}
#olBack{position:absolute; left:10px; top:8px; z-index:3; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.3); color:#fff;
  border-radius:10px; padding:5px 11px; font-size:15px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent}
#olLogo{position:absolute; left:50%; top:8px; transform:translateX(-50%); text-align:center}
#olLogo span{display:block; font-size:clamp(20px, 4.5vh, 30px); font-weight:900; letter-spacing:5px; color:#ffd872; text-shadow:0 0 16px rgba(255,200,80,.7), 0 3px 4px #000}
#olLogo small{display:block; font-size:9px; letter-spacing:2px; color:#fff; opacity:.8}
#olHero{position:absolute; right:4%; top:6px; width:34%; height:78%}   /* personaj (PNG gələndə background) */
#olHint{position:absolute; left:0; right:0; bottom:4px; text-align:center; font-size:clamp(9px, 1.6vh, 12px); font-weight:900; letter-spacing:1px; color:#ffe9a8;
  text-shadow:0 2px 3px #000, 0 0 10px rgba(255,200,80,.6)}
#olHint img{height:clamp(16px, 3.2vh, 26px); vertical-align:middle; margin:0 4px}
/* frispin paneli */
#olFs{display:none; flex:none; justify-content:center; gap:10px; margin:2px 0 4px; font-weight:900; font-size:13px}
#olFs.on{display:flex}
#olFs span{background:linear-gradient(180deg,#5b3df5,#2d1d8a); border:1px solid #8f7cff; border-radius:999px; padding:4px 12px; color:#fff}
#olFs .m{background:linear-gradient(180deg,#ffb52e,#c2660a); border-color:#ffd872; color:#2a1400}
/* şəbəkə */
#olGridWrap{flex:none; display:flex; align-items:center; justify-content:center; position:relative; padding:2px 0}
#olGrid{margin:0 auto}
#olGrid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); gap:0;
  width:min(100%, 470px, calc((100dvh - 412px) * 1080 / 711)); min-width:240px; aspect-ratio:1080/711; padding:3.4% 2.3% 2.8% 2.3%; border-radius:6px;
  background:url(img/ol/bg.jpg?v=1) center/100% 100% no-repeat;   /* v76.64: sahibin çərçivəli fonu (xətlər şəkildədir) */
  overflow:hidden;   /* v76.67: tökülən simvollar çərçivədən kənara çıxmır */
  box-shadow:0 0 34px rgba(226,178,74,.25)}
.olc{position:relative; border-radius:0; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0;
  font-size:clamp(18px,6vw,30px); font-weight:900; background:transparent; border:0;
  transition:transform .18s, opacity .18s, box-shadow .2s; overflow:visible; will-change:transform}
.olc.gone{z-index:6}   /* partlama qonşu xanaların üstünə daşır (video) */
/* v76.71: şəkillər MÜTLƏQ yerləşir - xananın/sıranın hündürlüyünə təsir etmir (telefonda daşma düzəlişi) */
.olc img{position:absolute; left:7%; top:7%; width:86%; height:86%; object-fit:contain; display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.65))}
.olc.img[data-s]{background:transparent; color:transparent}   /* v76.62: şəkilli xana - rəngli fon yoxdur */
.olc.img.scat[data-s]{background:transparent}
.olc.img.scat img{left:1.5%; top:2.5%; width:97%; height:95%; object-fit:fill}   /* v76.63: scatter bütün xananı doldurur */
.olc .orb{position:absolute; left:2%; top:2%; width:96%; height:96%; display:flex; align-items:center; justify-content:center;
  font-size:clamp(12px,3.8vw,18px); color:#fff; text-shadow:0 0 6px #000, 0 2px 3px #000, 0 0 12px #2bff6a}
.olc .orb img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 8px rgba(43,255,106,.6))}
.olc .orb b{position:relative; z-index:1; font-weight:900; letter-spacing:.5px}
.olc.glow .orb img{animation:olGlowImg .6s ease-in-out infinite alternate}
@keyframes olGlowImg{from{filter:drop-shadow(0 0 6px #2bff6a)} to{filter:drop-shadow(0 0 16px #b6ff6a) drop-shadow(0 0 28px #ffd872) brightness(1.2)}}
.olc.scat{background:radial-gradient(circle,#4a2a9a,#1b1140); border-color:#b9a7ff}
.olc.hit{z-index:2; animation:olPulse .5s ease-in-out 2}
.olc.hit img{filter:drop-shadow(0 0 8px #ffd872) drop-shadow(0 0 14px #ffb52e) brightness(1.15)}
#olScreen{--spd:1}
.olc.land img, .olc.land .orb, .olc.land > span{animation:olLand calc(160ms / var(--spd)) ease-out both}   /* enişdə sıxılma */
@keyframes olLand{0%{transform:scaleY(.86) scaleX(1.08) translateY(6%)} 60%{transform:scaleY(1.04) scaleX(.98)} 100%{transform:none}}
.olc.gone img, .olc.gone .orb, .olc.gone > span{visibility:hidden}   /* partlayan simvol dərhal yoxa çıxır */
/* 🏷 qazanan qrupun məbləğ etiketi (video: "$0.80" qrupun bir xanasında, qara fon, ağ yazı) */
.olwtag{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; white-space:nowrap; font-size:12px; font-weight:900;
  color:#fff; background:rgba(0,0,0,.78); border-radius:4px; padding:3px 7px; text-shadow:0 1px 2px #000; letter-spacing:.3px;
  animation:olTagIn calc(120ms / var(--spd)) ease-out both}
@keyframes olTagIn{from{opacity:0} to{opacity:1}}
/* 🟨 qazanan xana - v76.74: video ilə yan-yana 100ms addımla müqayisə edilib (11.0→12.8s):
   çərçivə SABİT parlaq narıncı-qızılı (titrəmir), kənarı dənəvər/qığılcımlı, 1.3s qalır, 100ms-də
   sönür; simvol 0.8s-də +9% böyüyür, 0.2s-də geri; 1.1-1.3s simvol ətrafında qığılcım;
   çərçivə sönəndən sonra 300ms SAKİT, sonra partlama. */
.olc.hit img, .olc.hit .orb, .olc.hit > span{animation:olBreath calc(1300ms / var(--spd)) ease-in-out both; transform-origin:50% 50%}
@keyframes olBreath{0%{transform:scale(1)} 60%{transform:scale(1.09)} 76%{transform:scale(1)} 100%{transform:scale(1)}}
.olc.hit::before{content:""; position:absolute; inset:3%; border:2.5px solid #ffc455; border-radius:3px; pointer-events:none;
  box-shadow:0 0 4px 1px #ff9a2e, 0 0 10px rgba(255,150,40,.55), inset 0 0 7px rgba(255,190,90,.35);
  animation:olFrameIn calc(80ms / var(--spd)) ease-out both}
/* dənəvər qığılcımlı kənar: nöqtə naxışı çərçivə xətti üzərində yavaş sürüşür */
.olc.hit::after{content:""; position:absolute; inset:3%; border-radius:3px; pointer-events:none; padding:3px; opacity:.9;
  background:radial-gradient(circle, #fff6d0 0 .7px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(circle, #ffe08a 0 .6px, transparent 1.2px) 2px 3px / 7px 7px;
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:olGrain calc(600ms / var(--spd)) linear infinite}
@keyframes olGrain{from{background-position:0 0, 2px 3px} to{background-position:5px 5px, 9px 10px}}
.olc.hit .olspk{position:absolute; inset:-6%; pointer-events:none; z-index:3; opacity:0;
  background:
    radial-gradient(circle at 20% 36%, #fff 0 .6px, transparent 1.2px), radial-gradient(circle at 80% 28%, #ffe9a0 0 .6px, transparent 1.2px),
    radial-gradient(circle at 28% 78%, #ffd872 0 .6px, transparent 1.2px), radial-gradient(circle at 74% 74%, #fff 0 .6px, transparent 1.2px),
    radial-gradient(circle at 50% 14%, #ffe9a0 0 .6px, transparent 1.2px), radial-gradient(circle at 12% 58%, #ffd872 0 .5px, transparent 1px),
    radial-gradient(circle at 88% 56%, #fff 0 .5px, transparent 1px), radial-gradient(circle at 54% 88%, #ffd872 0 .6px, transparent 1.2px),
    radial-gradient(circle at 38% 24%, #fff 0 .5px, transparent 1px), radial-gradient(circle at 64% 40%, #ffe9a0 0 .5px, transparent 1px),
    radial-gradient(circle at 40% 60%, #fff 0 .5px, transparent 1px), radial-gradient(circle at 66% 62%, #ffd872 0 .5px, transparent 1px);
  animation:olSpk calc(1300ms / var(--spd)) linear both}
@keyframes olSpk{0%,78%{opacity:0; transform:scale(.85)} 86%{opacity:1; transform:scale(1)} 100%{opacity:.5; transform:scale(1.1)}}
.olc.hitoff::before, .olc.hitoff::after, .olc.hitoff .olspk, .olc.hitoff .olwtag{animation:olFrameOut calc(100ms / var(--spd)) ease-in both}
@keyframes olFrameIn{from{opacity:0} to{opacity:1}}
@keyframes olFrameOut{to{opacity:0}}
/* 💥 partlama - v76.72: SAHİBİN VİDEOSUNDAN ORİJİNAL KADRLAR (6.82s, 20 kadr, 39.44 fps = 507ms),
   tək xana ətrafından kəsilib, fon fərqlə çıxarılıb → img/ol/boom.png (5×4 sprite, 176px). Kadr 2.7 xana enindədir. */
.olboom{position:absolute; left:50%; top:50%; width:270%; aspect-ratio:1/1; transform:translate(-50%,-50%); pointer-events:none; z-index:5;
  background:url(img/ol/boom.png?v=1) 0 0 / 500% 400% no-repeat; mix-blend-mode:screen;
  animation:olBoomX calc(507ms / var(--spd)) steps(5) forwards, olBoomY calc(507ms / var(--spd)) steps(4) forwards}
@keyframes olBoomX{from{background-position-x:0%} to{background-position-x:125%}}
@keyframes olBoomY{from{background-position-y:0%} to{background-position-y:133.3333%}}
/* simvol rəngləri (placeholder - yalnız şəkil olmayanda) */
.olc[data-s="0"]{color:#ffd872; background:linear-gradient(180deg,#5a4215,#2a1d08)}
.olc[data-s="1"]{color:#ffb0b0; background:linear-gradient(180deg,#5a1a1a,#2a0909)}
.olc[data-s="2"]{color:#9fe8ff; background:linear-gradient(180deg,#1a4a5a,#092229)}
.olc[data-s="3"]{color:#ffe0a0; background:linear-gradient(180deg,#4a3a1a,#221a09)}
.olc[data-s="4"]{color:#ff5d5d} .olc[data-s="5"]{color:#c77dff} .olc[data-s="6"]{color:#ffe14d}
.olc[data-s="7"]{color:#5bff8a} .olc[data-s="8"]{color:#5db6ff}
/* uduş yazısı */
#olWinBar{flex:none; text-align:center; height:clamp(36px, 6vh, 48px); overflow:hidden; background:linear-gradient(90deg,transparent,rgba(20,8,40,.45),transparent); font-weight:900; font-size:20px; letter-spacing:2px; color:#fff; padding:4px 0 0;
  text-shadow:0 2px 4px #000, 0 0 10px rgba(255,200,80,.5); line-height:1.2}
#olWinBar .big{font-size:clamp(16px, 2.8vh, 22px); color:#ffd872}
#olWinBar .lbl{display:block; font-size:10px; letter-spacing:3px; color:#fff; opacity:.9; line-height:1}
#olWinBar .luck{font-size:clamp(14px, 2.4vh, 18px); letter-spacing:3px; color:#fff}
#olWinBar div{letter-spacing:0; line-height:1.1}
#olWinBar img, #olPay img{width:22px; height:22px; vertical-align:middle; object-fit:contain}
#olMsg{flex:none; text-align:center; font-size:11px; color:#fff; text-shadow:0 1px 3px #000, 0 0 6px #000; font-weight:700; height:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
/* ☁️ alt panel: səma/məbəd (şəkil gələndə background-image) */
#olPanel{flex:none; position:relative; margin:auto -10px calc(-10px - env(safe-area-inset-bottom,0px)); padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(30,12,40,0) 0%,rgba(30,12,40,.25) 60%,rgba(20,8,30,.55) 100%);
  display:flex; flex-direction:column; gap:clamp(3px, 1vh, 8px)}
.olcards{display:flex; gap:10px; position:relative}
.olcard{flex:1; border-radius:12px; border:3px solid #e2b24a; padding:clamp(3px, .8vh, 7px) 6px; display:flex; flex-direction:column; align-items:center; gap:2px;
  cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); -webkit-tap-highlight-color:transparent}
.olcard.buy{background:linear-gradient(180deg,#2b2a8f,#141452); color:#fff}
.olcard.buy .t{font-size:clamp(12px, 2vh, 15px); font-weight:900; letter-spacing:1px; color:#7ec8ff; text-shadow:0 2px 3px #000}
.olcard.buy .p{font-size:clamp(16px, 2.8vh, 22px); font-weight:900; color:#ffd872; text-shadow:0 2px 3px #000}
.olcard.ante{background:linear-gradient(180deg,#fff7e0,#f1dba8); color:#3a2a08}
.olcard.ante .t{font-size:13px; font-weight:900; color:#1d2a8a} .olcard.ante .t b{color:#b8860b}
.olcard.ante .s{font-size:9.5px; font-weight:800; letter-spacing:.5px; color:#1d2a8a}
.olcard.ante .sw{margin-top:3px; padding:2px 14px; border-radius:6px; background:#a01818; color:#fff; font-size:11px; font-weight:900; letter-spacing:1px}
.olcard.ante.on .sw{background:#1f8f3a}
.olcard.dis{opacity:.5; pointer-events:none}
.olspinrow{display:flex; align-items:center; justify-content:center; gap:14px; position:relative}
.olrnd{width:clamp(40px, 6.5vh, 50px); height:clamp(40px, 6.5vh, 50px); border-radius:50%; border:3px solid #e2b24a; background:#1a1020; color:#fff; font-size:26px; font-weight:900; cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.4); -webkit-tap-highlight-color:transparent}
.olrnd.dis{opacity:.45; pointer-events:none}
.olspinwrap{position:relative; width:clamp(84px, 14vh, 118px); height:clamp(84px, 14vh, 118px)}
.olarc{position:absolute; left:-12%; top:-12%; width:124%; height:124%; pointer-events:none}
.olarc text{font-size:9px; font-weight:900; letter-spacing:1.2px; fill:#fff; stroke:#000; stroke-width:.5px; paint-order:stroke}
#olSpin{position:absolute; left:50%; top:50%; width:83%; height:83%; transform:translate(-50%,-50%); border-radius:50%; border:4px solid #fff;
  background:radial-gradient(circle at 50% 35%,#4a4a52,#15151a 75%); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.55), 0 0 0 3px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; touch-action:none}
#olSpin .ico{font-size:clamp(34px, 6.5vh, 52px); line-height:1; font-weight:900; transform:translateY(-2px)}
#olSpin .fsn{position:absolute; bottom:8px; font-size:13px; font-weight:900; color:#ffd872}
#olSpin:active{transform:translate(-50%,-50%) scale(.95)} #olSpin.dis{filter:brightness(.55); pointer-events:none}
#olSpin.fsb{border-color:#b9a7ff; background:radial-gradient(circle at 50% 35%,#6b4df8,#2a1a7a 75%)}
.olbar{display:flex; justify-content:space-around; align-items:center; padding:2px 0 0}
.olbar button{width:46px; height:clamp(30px, 4.6vh, 40px); border-radius:22px; border:0; background:rgba(255,255,255,.85); color:#1a1020; font-size:18px; font-weight:900; cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.35); position:relative; -webkit-tap-highlight-color:transparent}
.olbar button.on{background:#ffd872; box-shadow:0 0 12px #ffd872}
.olbar button.dis{opacity:.45; pointer-events:none}
.olbar button[data-n]::after{content:attr(data-n); position:absolute; top:-6px; right:-4px; background:#a01818; color:#fff; font-size:10px; border-radius:9px; padding:1px 5px}
.olcredit{display:flex; justify-content:center; gap:8px; font-size:clamp(11px, 1.9vh, 14px); font-weight:900; letter-spacing:1px; color:#ffd872; text-shadow:0 2px 3px #000}
.olcredit b{color:#fff} .olcredit .gap{width:14px}
/* böyük bildirişlər */
#olOv{position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:5; pointer-events:none}
#olOv.on{display:flex}
.olbig{background:radial-gradient(circle,#4b2fd4,#1b1140 70%); border:2px solid #ffd872; border-radius:20px; padding:18px 26px; text-align:center;
  box-shadow:0 0 60px rgba(255,216,114,.5); animation:olIn .35s ease-out}
.olbig b{display:block; font-size:30px; color:#ffd872; text-shadow:0 0 16px #ffb52e}
.olbig span{font-size:13px; color:#e9e2ff}
@keyframes olIn{from{transform:scale(.6); opacity:0} to{transform:none; opacity:1}}
#olMult{position:absolute; right:8px; top:8px; z-index:4; display:none; font-weight:900; font-size:22px; color:#fff; background:radial-gradient(circle,#ffb52e,#a33a00);
  border-radius:999px; padding:8px 14px; box-shadow:0 0 24px #ffb52e; animation:olIn .3s}
#olMult.on{display:block}
/* ödəniş cədvəli */
#olPay{position:absolute; inset:0; z-index:6; display:none; overflow:auto; background:rgba(5,4,12,.96); padding:14px; font-size:13px}
#olPay.on{display:block}
#olPay table{width:100%; border-collapse:collapse} #olPay td{padding:5px 6px; border-bottom:1px solid rgba(255,255,255,.08)}
#olPayX{position:sticky; top:0; float:right; background:#3b2f6e; color:#fff; border:0; border-radius:8px; padding:6px 12px; font-weight:800}