/* 🎡 RULET ekranı (v57) - CSS/SVG, şəkil asılılığı yoxdur.
   Tək ekran, skrolsuz: boşda masa bütün yeri tutur, FIRLAT-da çarx doku
   yuxarıdan açılır, masa transform-la kiçilir (referans video üslubu). */
#rlScreen{position:fixed; inset:0; z-index:8900; display:none;
  flex-direction:column; overflow:hidden;
  padding:6px 10px calc(10px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(24,80,46,.55), transparent 60%),
    radial-gradient(120% 90% at 50% 115%, rgba(10,40,24,.6), transparent 55%),
    linear-gradient(180deg, #0b1710, #06100a 45%, #050c07);
  color:#e8eaed; font-family:inherit}
#rlScreen.on{display:flex}

/* ---- başlıq ---- */
.rltop{display:flex; align-items:center; gap:10px; flex:none; padding:2px 0 4px}
#rlBack{background:rgba(255,255,255,.07); border:1px solid rgba(212,175,55,.35);
  color:#ffd75e; border-radius:10px; padding:5px 12px; font-size:15px;
  font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent}
#rlBack:active{transform:scale(.94)}
.rltitle{font-size:16px; font-weight:900; letter-spacing:3px; color:#ffd75e;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* 🔊 v63: səs açarı başlıqda (qlobal SND.on) */
#rlSnd{margin-left:auto; background:rgba(255,255,255,.07);
  border:1px solid rgba(212,175,55,.35); color:#ffd75e; border-radius:10px;
  padding:5px 10px; font-size:14px; cursor:pointer;
  -webkit-tap-highlight-color:transparent}
#rlSnd:active{transform:scale(.94)}
.rlpf{font-size:13px; opacity:.55}

/* ---- çarx doku (fırlatmada JS height verir, boşda 0) ---- */
/* v60.3: sahibin istəyi - dok YAVAŞ və səliqəli açılıb-yığılsın (donma
   hissi olmasın); JS DOCK_MS=980 bununla sinxrondur */
#rlDock{position:relative; height:0; flex:none; overflow:hidden;
  transition:height .95s cubic-bezier(.3,.75,.25,1);
  perspective:900px}   /* v58: "aşağıdan baxış" hissi */
#rlWheelWrap{position:relative; height:100%; aspect-ratio:1; margin:0 auto;
  transform:rotateX(18deg) scale(1.05); transform-origin:50% 45%;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.6))}
#rlWheelWrap svg{position:absolute; inset:0; width:100%; height:100%; display:block}
#rlWheelWrap img{position:absolute; inset:0; width:100%; height:100%;
  display:none; pointer-events:none; -webkit-user-drag:none}
#rlRotorImg{will-change:transform}
#rlWheelWrap.img img{display:block}
#rlWheelWrap.img svg{display:none}

/* 🥣 QAB rejimi (v59): sahibin 42.4° taxta qabı + içində əyilmiş rotor müstəvisi.
   Sabitlər qab şəklinin ölçmələrindən: deşik mərkəzi (49.8%, 46.2%),
   müstəvi eni qabın 93.3%-i (rotor diski deşiyə 3% örtüklə oturur). */
#rlBowl{position:relative; height:100%; aspect-ratio:1254/1053; margin:0 auto;
  display:none; perspective:1500px; perspective-origin:49.8% 46.2%;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.65))}
#rlDock.bowl #rlBowl{display:block}
#rlDock.bowl #rlWheelWrap{display:none}
#rlBowlImg{position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; -webkit-user-drag:none}
/* v60.2: sahibin istəyi ilə rotor 13% kiçildildi (66.2%→57.6%) - qabın
   oyuğuna "oturmuş" görünüş. Mərkəz deşikdə qalır: left=49.8-W/2,
   top=46.2-(W·1254/1053)/2. */
#rlPlane{position:absolute; left:21.0%; top:11.9%; width:57.6%; aspect-ratio:1;
  transform:rotateX(42.4deg); transform-style:preserve-3d;
  pointer-events:none}
/* 🏛 qüllə - FIRLANMIR, deşik mərkəzində qaldırılmış lay (aşağıdan baxış
   hissi buradan gəlir); translateY(-87%) → oturacağının mərkəzi deşik
   mərkəzinə düşür */
#rlTurret{position:absolute; left:49.8%; top:46.2%; width:11.7%;
  transform:translate(-50%,-87%); pointer-events:none; -webkit-user-drag:none;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
#rlRotorB{position:absolute; inset:0; width:100%; height:100%;
  will-change:transform; -webkit-user-drag:none}
#rlBallB{position:absolute; left:0; top:0; width:3.9%; aspect-ratio:1;   /* v63.5: -25% */
  border-radius:50%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle at 35% 30%, #ffffff, #d6dbe1 55%, #8f979f);
  background-size:cover}   /* sprayt yüklənəndə JS background-image qoyur */
#rlBallSh{position:absolute; left:0; top:0; width:4.8%; aspect-ratio:1;
  border-radius:50%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle, rgba(0,0,0,.55), rgba(0,0,0,0) 62%)}
#rlRotorSvg{will-change:transform}
#rlBall{position:absolute; left:0; top:0; width:5.4%; aspect-ratio:1;
  border-radius:50%; pointer-events:none; will-change:transform;
  background:radial-gradient(circle at 35% 30%, #ffffff, #d6dbe1 55%, #8f979f);
  box-shadow:0 2px 5px rgba(0,0,0,.65), inset -1px -2px 3px rgba(0,0,0,.25)}

/* nəticə lövhəsi: qonşu | QAZANAN | qonşu (çarxın üstündə) */
#rlPlaque{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.7);
  display:flex; align-items:center; gap:8px; z-index:3; pointer-events:none;
  opacity:0; transition:opacity .3s, transform .3s}
#rlPlaque.on{opacity:1; transform:translate(-50%,-50%) scale(1)}
#rlPlaque .nb{width:30px; height:30px; border-radius:8px; display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:900;
  color:#fff; border:1px solid rgba(255,255,255,.4); opacity:.9;
  box-shadow:0 2px 6px rgba(0,0,0,.6)}
#rlPlaque .wn{width:56px; height:56px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; font-size:26px; font-weight:900;
  color:#fff; border:2px solid #ffd867; text-shadow:0 1px 3px rgba(0,0,0,.7);
  box-shadow:0 0 18px rgba(255,216,103,.55), 0 4px 12px rgba(0,0,0,.6)}
#rlPlaque .red{background:linear-gradient(160deg,#c42230,#8f1119)}
#rlPlaque .black{background:linear-gradient(160deg,#2a2d36,#101216)}
#rlPlaque .green{background:linear-gradient(160deg,#15954e,#0a5c30)}

/* uduş uçan yazısı */
#rlWinPop{position:absolute; left:50%; top:24%; transform:translateX(-50%);
  z-index:4; font-size:22px; font-weight:900; color:#ffe9a8; opacity:0;
  text-shadow:0 0 12px rgba(255,216,103,.8), 0 2px 4px rgba(0,0,0,.8);
  pointer-events:none; white-space:nowrap}
#rlWinPop.go{animation:rlPop 1.6s ease forwards}
@keyframes rlPop{
  0%{opacity:0; transform:translateX(-50%) translateY(14px) scale(.7)}
  18%{opacity:1; transform:translateX(-50%) translateY(0) scale(1.08)}
  70%{opacity:1; transform:translateX(-50%) translateY(-16px) scale(1)}
  100%{opacity:0; transform:translateX(-50%) translateY(-34px) scale(.95)}}

/* ---- orta hissə: sol panel | masa | sağ düymələr ---- */
#rlMid{flex:1; min-height:0; display:flex; gap:5px; padding:2px 0;
  overflow:hidden}   /* kiçilmiş masanın layout qutusu ekranı uzatmasın */
.rlrail{flex:none; width:46px; display:flex; flex-direction:column;
  align-items:center; gap:8px}
#rlRailL{justify-content:flex-start; padding-top:6px; gap:10px}
#rlRailR{justify-content:center}

/* isti / soyuq panellər */
.rlhc{display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(255,255,255,.05); border:1px solid rgba(212,175,55,.25);
  border-radius:999px; padding:6px 4px}
.rlhc .hch{font-size:13px; line-height:1}
.rlhc .hcn{width:24px; height:24px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:10.5px; font-weight:900;
  color:#fff; border:1px solid rgba(255,255,255,.3); padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.rlhc .hcn:active{transform:scale(.88); filter:brightness(1.4)}
.hcn.red{background:#a31621}.hcn.black{background:#15171d}.hcn.green{background:#0b6b35}

/* sağ reyl düymələri (v63.2 sahib: DÜZBUCAQLI, qara, peşəkar kazino
   üslubu - qızıl haşiyə, yuxarı işıq + alt kölgə "basılası" hiss verir) */
.rlrb{width:46px; height:40px; border-radius:7px; flex:none;
  background:linear-gradient(180deg, #23272f, #0c0e12 55%, #07090c);
  border:1px solid rgba(212,175,55,.65);
  color:#ffd75e; font-size:15px; font-weight:800; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
             inset 0 -4px 8px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.55)}
.rlrb:active{transform:scale(.94)}
.rlrb.dis{opacity:.35; pointer-events:none}
#rlSpin.spin{width:50px; height:48px; border-radius:8px; font-size:19px;
  color:#bffadb;
  background:linear-gradient(180deg, #1d5c38, #0d3b22 60%, #082a17);
  border:1px solid rgba(154,240,189,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
             0 0 14px rgba(56,200,120,.4), 0 4px 10px rgba(0,0,0,.55)}
#rlScreen.spin #rlSpin{animation:rlPulse 1s ease infinite}
@keyframes rlPulse{
  0%,100%{box-shadow:0 0 10px rgba(56,200,120,.4)}
  50%{box-shadow:0 0 22px rgba(56,200,120,.85)}}
/* çip düyməsi ÇİPDİR - dairəvi qalır (v63.2: reyl düzbucaqlı olsa da) */
.rlchipbtn{width:44px; height:44px; border-radius:50%; color:#fff;
  font-size:13px; text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* 🪙 v62: PEŞƏKAR çip üzü - kənar zolaqlı (edge-spot) klassik kazino çipi:
   ağ kənar nişanları (repeating-conic), içəridə nominal diski, üstdə parıltı.
   Aşağıdakı spesifik qaydalar (ölçü/kölgə) bunun üstünə gəlir. */
.rlchip,.rlbet .c,#rlAim,.rlchipbtn{
  background:
    radial-gradient(circle at 36% 26%, rgba(255,255,255,.34), rgba(255,255,255,0) 46%),
    radial-gradient(circle, var(--cA) 55%, rgba(0,0,0,0) 55.8%),
    repeating-conic-gradient(#f2eedd 0 16deg, var(--cB) 16deg 45deg),
    radial-gradient(circle, var(--cB) 0 100%);
  border:1px solid rgba(0,0,0,.65);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),
             inset 0 0 0 4px rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.55)}

/* ---- masa (v58.3: sahibin göndərdiyi peşəkar üslub - metalik haşiyələr,
   tünd xanalar, romb işarələri) ---- */
#rlTableWrap{flex:1; min-width:0; position:relative; display:flex;
  align-items:flex-start; justify-content:center}
#rlTable{position:relative; border-radius:14px; background:transparent;
  transform-origin:top center; touch-action:none;
  transition:transform .95s cubic-bezier(.3,.75,.25,1)}   /* dok ilə sinxron */
.rlcell{position:absolute; box-sizing:border-box;
  border:0; border-radius:0;   /* v63.5: xətlər .rlgl layındadır (bütöv) */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.5);
  color:#fff; font-weight:800; display:flex; align-items:center;
  justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none; z-index:1; text-shadow:0 1px 2px rgba(0,0,0,.8)}
/* v63.6: sahibin istəyi - qırmızı/qara daha tünd */
.rlcell.red{background:linear-gradient(180deg,#8e0e1d,#5f0812)}
.rlcell.black{background:linear-gradient(180deg,#16181d,#060708)}
.rlcell.green{background:linear-gradient(180deg,#178a45,#0b5c2e)}
.rlcell.felt{background:linear-gradient(180deg,#1c1f24,#0c0e11); color:#f2f3f5;
  font-size:.78em; letter-spacing:.5px}
/* v63.6: yazı yuxarıdan-aşağı oxunur (əvvəl tərs idi) */
.rlcell.vert span{transform:rotate(90deg); white-space:nowrap; letter-spacing:1px}
.rlcell:active{filter:brightness(1.3)}
/* qırmızı/qara mərcləri romb işarəsi ilə (sahibin şəklindəki kimi) */
.rldia{width:56%; aspect-ratio:1; transform:rotate(45deg) scale(.72);
  border-radius:3px}
.rldia.r{background:linear-gradient(135deg,#e83345,#8c0f1c);
  box-shadow:0 0 6px rgba(220,40,60,.5)}
.rldia.b{background:linear-gradient(135deg,#2b2f36,#0a0c0f);
  box-shadow:inset 0 0 0 2px #8f959d}
/* v63.2 (sahib): uduş işıqlanması MİNİMAL və STATİK - animasiya donma
   yaradırdı; v63.6: 5 saniyəyə silinir (JS taymer) */
.rlcell.hit{z-index:2; box-shadow:inset 0 0 0 2px #ffd867}
/* 🎯 v63.6: kənar mərc qoyulanda hara aid olduğu bilinsin - mərc xanası
   qızıl haşiyə, əhatə olunan rəqəmlər çox cüzi işıqlanır */
.rlcell.betd{box-shadow:inset 0 0 0 2px rgba(255,216,103,.55)}
.rlcell.cvr{box-shadow:inset 0 0 0 1px rgba(255,216,103,.3);
  filter:brightness(1.14)}
/* ▦ bütöv masa xətləri (v63.5) - xana üstü, çip/spot altı */
.rlgl{position:absolute; background:#3b4046; z-index:2; pointer-events:none}
.rlspot{position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; z-index:3; background:transparent; border:0; padding:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent}

/* masadakı çip yığınları - v63.3: blackjack kimi ÜST-ÜSTƏ yığılır
   (JS hər çipə translateY(-3px·i) verir, DOM sırası = z sırası) */
.rlbet{position:absolute; z-index:4; pointer-events:none;
  width:26px; height:26px; transform:translate(-50%,-50%)}
.rlbet .c{position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:9.5px; font-weight:900;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.8);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),
             inset 0 0 0 4px rgba(0,0,0,.16),
             0 2px 3px rgba(0,0,0,.45)}

.rlbet.hit .c{border-color:#ffd867; box-shadow:0 0 8px #ffd867aa, 0 2px 0 rgba(0,0,0,.4)}

/* dəqiq yerləşdirmə: barmaqdan yuxarıda üzən çip + hədəf işıqlanması */
#rlAim{position:absolute; z-index:7; display:none; width:30px; height:30px;
  margin:-15px 0 0 -15px; border-radius:50%; pointer-events:none;
  align-items:center; justify-content:center; font-size:11px; font-weight:900;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.8); transform:scale(1.12);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),
             inset 0 0 0 4px rgba(0,0,0,.16),
             0 7px 16px rgba(0,0,0,.65), 0 0 0 3px rgba(255,216,103,.3)}
#rlAim.on{display:flex}

#rlAimRing{position:absolute; z-index:6; display:none; width:26px; height:26px;
  margin:-13px 0 0 -13px; border-radius:50%; border:2px dashed #ffd867;
  pointer-events:none; box-shadow:0 0 10px rgba(255,216,103,.5)}
#rlAimRing.on{display:block}
.rlcell.aim{z-index:2; filter:brightness(1.55) saturate(1.1);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}

/* çip nominal rəngləri (--cA açıq disk, --cB tünd kənar) - v63:
   0.25/1/5/10/25/100 ₼, sahibin çip şəkillərinin rənglərinə uyğun
   (şəkillər rlpack-dan gələndə bunların üstünə blob stil yazılır) */
.cd25{--cA:#d07022; --cB:#8d4a12}
.cd100{--cA:#3f6fb5; --cB:#24487e}
.cd500{--cA:#b23a48; --cB:#771f2b}
.cd1000{--cA:#8d939c; --cB:#565c66}
.cd2500{--cA:#2e9e5b; --cB:#19613a}
.cd10000{--cA:#8646b0; --cB:#552778}

/* ---- çip tepsisi (çip düyməsi açır) ---- */
#rlTray{position:absolute; bottom:96px; left:50%; transform:translateX(-50%);
  display:none; gap:8px; z-index:6; padding:8px 10px; border-radius:16px;
  background:rgba(6,14,9,.94); border:1px solid rgba(212,175,55,.45);
  box-shadow:0 8px 24px rgba(0,0,0,.6)}
#rlTray.on{display:flex}
.rlchip{position:relative; width:clamp(38px,10vw,46px); aspect-ratio:1;
  border-radius:50%; padding:0;
  color:#fff; font-weight:900; font-size:12px; cursor:pointer;
  opacity:.85; -webkit-tap-highlight-color:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.8)}

.rlchip.sel{opacity:1; transform:scale(1.12); border-color:#ffd867;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),
             inset 0 0 0 4px rgba(0,0,0,.16),
             0 0 12px #ffd86799, 0 4px 8px rgba(0,0,0,.5)}
.rlchip:active{transform:scale(.92)}

/* ---- xəbər + stat zolağı + tarixçə ---- */
#rlMsg{position:absolute; bottom:88px; left:0; right:0; text-align:center;
  font-size:12.5px; color:#ff8a8a; z-index:5; pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.9)}
#rlStat{flex:none; display:flex; gap:6px; margin-top:4px}
#rlStat > div{flex:1; display:flex; flex-direction:column; align-items:center;
  gap:1px; background:linear-gradient(180deg, #101318, #05070a);   /* v63.3: qara */
  border:1px solid rgba(212,175,55,.4);
  border-radius:11px; padding:5px 4px}
#rlStat span{font-size:8.5px; font-weight:800; letter-spacing:1.2px; color:#9aa89e}
#rlStat b{font-size:14px; font-weight:900; color:#ffe9a8; white-space:nowrap}
#rlWin.up{color:#5fe09a; text-shadow:0 0 10px rgba(95,224,154,.5)}
#rlHist{flex:none; display:flex; gap:5px; padding:6px 2px 0; overflow:hidden}
.rlh{width:24px; height:24px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:900; color:#fff;
  border:1px solid rgba(255,255,255,.35); box-shadow:0 1px 3px rgba(0,0,0,.5)}
.rlh.red{background:#a31621}.rlh.black{background:#15171d}.rlh.green{background:#0b6b35}
#rlHist .rlh:first-child{border-color:#ffd867; box-shadow:0 0 8px rgba(255,216,103,.5)}

/* dar ekranlar */
@media (max-width:360px){
  .rlrail{width:40px}
  .rlrb{width:38px; height:38px; font-size:13px}
  #rlSpin.spin{width:46px; height:46px; font-size:17px}
  .rlhc .hcn{width:21px; height:21px; font-size:9.5px}
}

/* 🖥 v62: geniş ekran (web) - masa telefondakı kimi dar sütunda qalır,
   digər oyunların görünüşünə uyğun mərkəzlənmiş çərçivə */
@media (min-width:700px){
  #rlScreen{width:520px; margin:0 auto;
    border-left:1px solid rgba(212,175,55,.28);
    border-right:1px solid rgba(212,175,55,.28);
    box-shadow:0 0 70px rgba(0,0,0,.75)}
}