/* 🎛 Kompakt idarə bloku (v75.70) — ES7 / Hot Sevens / Sevens On Fire /
   Fire Rage+ / Rich Fruits ortaq. Quruluş (sahibin istəyi):
     yuxarıda ES7-nin CREDIT·WIN·BET lövhələri + LINES / BET-LINE (−/+)
     altında soldan sağa: ES7-nin GAMBLE · ORTADA Rich Fruits-in START
     (kürə + halqa + fırlanan yaşıl qövslər) · sağda Rich Fruits-in AUTO.
   Markup cpanel.js CP.block(prefix) ilə qurulur; id-lər hər oyunun
   köhnə id-ləridir (dinləyicilər dəyişmir). Şəkillər cppack.bin-dən
   kətanlara çəkilir. */
/* v75.72: blok dibə yapışmır - üstündəki/altındakı boş yer .cp-sp ilə
   2:1 bölünür (ES7/H7/SOF markup-da; RF/FR öz rfsp/frsp-i ilə eyni) */
.cp{display:flex; flex-direction:column; flex:none}
.cp-sp{flex:2 1 0; min-height:0}
.cp-sp.b{flex:1 1 0}
#frScreen .cp, #rfScreen .cp{padding:0 10px}

/* — CREDIT / WIN / BET lövhələri (ES7 metalik) — */
.cp-panel{display:flex; gap:6px}
.cp-box{flex:1; text-align:center; padding:6px 8px;
  border:1px solid #05070c; border-radius:11px;
  background:linear-gradient(180deg,#1c212c 0%,#12151e 15%,#0c0f16 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12),
    inset 0 -1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4)}
.cp-box span{font-size:10px; color:#9aa0ab; letter-spacing:1.6px;
  font-weight:800;
  text-shadow:0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.06)}
.cp-box b{display:block; font-size:15px; color:#fff;
  font-variant-numeric:tabular-nums; transition:color .2s}
.cp-box i{display:block; font-style:normal; font-size:10px;
  color:#9aa0ab; margin-top:1px}
.cp-box.win b{color:#4cc38a}
.cp-box.win.count b{color:#ffd968; text-shadow:0 0 10px rgba(255,217,104,.7)}

/* — LINES / BET-LINE: metalik panel + LCD + xrom −/+ (ES7) — */
.cp-steps{display:flex; gap:8px; margin-top:8px}
.cp-step{flex:1; text-align:center; border-radius:11px;
  padding:7px 8px 8px; border:1px solid #05070c;
  background:linear-gradient(180deg,#3d4557 0%,#232936 12%,#181d28 85%,
    #2b3140 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -1px 2px rgba(0,0,0,.5), 0 3px 7px rgba(0,0,0,.45)}
.cp-step span{font-size:10px; color:#c6cfdf; font-weight:800;
  letter-spacing:1.6px;
  text-shadow:0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08)}
.cp-step div{display:flex; align-items:center; justify-content:center;
  gap:7px; margin-top:5px}
.cp-step button{width:38px; height:32px; border-radius:8px;
  border:1px solid #10141d; color:#141a26; font-size:19px; font-weight:900;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(255,255,255,.9) 0%,
      rgba(255,255,255,.25) 48%, rgba(255,255,255,0) 65%),
    linear-gradient(180deg,#eef2f8 0%,#b6bfcd 46%,#8b95a6 54%,#a9b2c1 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
.cp-step button:active{transform:translateY(1px);
  background:linear-gradient(180deg,#9aa3b2 0%,#b6bfcd 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.cp-step button:disabled{opacity:.45; filter:grayscale(.3)}
.cp-step b{min-width:52px; padding:5px 8px; border-radius:7px;
  background:linear-gradient(180deg,#03040a,#0a0d16);
  border:1px solid #000; color:#7dffb0; font-size:16px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 7px rgba(125,255,176,.55);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.85),
    inset 0 -1px 1px rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.1)}

/* — idarə cərgəsi: GAMBLE · START · AUTO (START ekranın tam mərkəzində) — */
/* alt boşluq 14px: START-ın halqa qatı (164%) düymədən ~26px kənara
   çıxır - ekran (overflow:auto) sürüşməsin */
/* v75.73: 3 sütunlu grid - START DƏQİQ mərkəzdə (sol/sağ sütun bərabər),
   GAMBLE və AUTO öz sütunlarının ortasında; heç bir qat kəsilməsin deyə
   overflow açıqdır */
.cp-ctrl{display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; justify-items:center;
  margin-top:28px; padding:0 4px 14px;
  position:relative; z-index:70; overflow:visible}
/* GAMBLE (ES7 şəkli) */
.cp-gmb{position:relative; flex:0 0 100px; height:58px; border:0;
  background:none; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent}
.cp-gmb canvas, .cp-gmb img{width:100%; height:100%; object-fit:contain;
  display:block; pointer-events:none; -webkit-user-drag:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.55))}
.cp-gmb:disabled{opacity:.42; filter:grayscale(.65)}
.cp-gmb:active{transform:scale(.93)}
/* uduşdan sonra GAMBLE közərir (TAKE-ə qədər) */
.cp-gmb.gmbhot, .cp-gmb.gmbhot:disabled{opacity:1; filter:none}
.cp-gmb.gmbhot canvas, .cp-gmb.gmbhot img{
  animation:cpGmbP .7s ease-in-out infinite alternate}
@keyframes cpGmbP{
  from{filter:drop-shadow(0 0 4px rgba(255,190,60,.35))
    drop-shadow(0 3px 7px rgba(0,0,0,.55)); transform:scale(1)}
  to{filter:drop-shadow(0 0 15px rgba(255,205,75,.95))
    drop-shadow(0 3px 7px rgba(0,0,0,.55)); transform:scale(1.045)}}
/* AUTO (Rich Fruits): tünd disk + narıncı band, üstündə AUTO yazısı,
   fırlanan yaşıl qövslər; aktivdə yaşıl parıltı */
/* v75.74: z-index 3 - START-ın qatlarından (START düyməsi z2, kətan
   qatları z-auto) HƏMİŞƏ üstdə; telefonda START-ın qatı AUTO-nun yaşıl
   kölgəsinin üstünü örtürdü */
.cp-ab{position:relative; flex:none; width:52px; height:52px; border:0;
  background:none; padding:0; cursor:pointer; border-radius:50%;
  overflow:visible; z-index:3; -webkit-tap-highlight-color:transparent}
.cp-ab:active{transform:scale(.94)}
/* v75.76: AUTO halqası yenidən çəkildi - orijinal (112px) ellips idi
   (narıncı 68×60, parıltı 95×77), oxlarla heç vaxt konsentrik olmurdu.
   Yeni şəkil 184px tam dairə (orijinalın radial profili 360° fırladılıb):
   narıncı xarici r=68, oxlar (btn_arcs) r=70.5 - START-dakı kimi eyni
   miqyasda (150%) üst-üstə düşür, hər şey düymənin mərkəzindədir.
   Əlavə neon halqa (v75.74) SİLİNDİ. */
.cp-ab .sbly{position:absolute; left:50%; top:50%;
  width:150%; height:150%; transform:translate(-50%,-50%);
  pointer-events:none}
/* fırlanan qövslər KƏSİLMƏ qutusunun içindədir (.sbclip, fırlanmır):
   fırlanan kvadratın künc qutusu ekranı sürüşdürməsin (ES7/H7/SOF
   ekranı overflow:auto-dur) */
.cp-ab .sbclip{width:150%; height:150%}
.cp-ab u{position:absolute; left:50%; top:48%;
  transform:translate(-50%,-50%); text-decoration:none;
  font-size:10px; font-weight:900; letter-spacing:.5px;
  color:#cfe4d6; text-shadow:0 0 6px rgba(120,255,190,.45),
    0 1px 2px rgba(0,0,0,.8);
  z-index:1; pointer-events:none; white-space:nowrap}
.cp-ab.on .sbly{filter:drop-shadow(0 0 8px rgba(60,220,120,.6))}
/* ES7 stopmode: aktiv avtospində yazı STOP olur */
.cp-ab.stopmode u{font-size:0}
.cp-ab.stopmode u::after{content:"STOP"; font-size:10px; color:#ffb4ad;
  text-shadow:0 0 6px rgba(255,90,70,.6), 0 1px 2px rgba(0,0,0,.8)}
.cp-ab.stopmode .sbly{filter:drop-shadow(0 0 8px rgba(255,80,60,.7))}
/* qalan spin sayı nişanı */
.cp-autoN{position:absolute; right:-4px; top:-4px; z-index:2;
  display:none; align-items:center; justify-content:center;
  min-width:24px; height:22px; padding:0 6px; border-radius:99px;
  font-style:normal; font-size:12px; font-weight:900; color:#08240f;
  background:linear-gradient(180deg,#8af0b4,#4cc38a);
  border:1.5px solid #0d3a1e;
  box-shadow:0 2px 5px rgba(0,0,0,.5), 0 0 9px rgba(76,195,138,.6)}
.cp-autoN.on{display:flex}
/* START (Rich Fruits): boz halqa + ağ kürə + 4 yaşıl qövs (kətan
   qatları), mətn üstdə. Vəziyyət (CP.skin): fırlanır=tünd kürə,
   TAKE=közərən kürə + isti halqa */
.cp-startwrap{position:relative; display:flex; align-items:center;
  justify-content:center; margin:0; overflow:visible}   /* v75.73: grid orta sütun */
.cp-startwrap .sbly{position:absolute; left:50%; top:50%;
  width:164%; height:164%; transform:translate(-50%,-50%);
  pointer-events:none}
.cp-startwrap .sbclip, .cp-ab .sbclip{position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); overflow:hidden; border-radius:50%;
  pointer-events:none; display:block}
.cp-startwrap .sbclip{width:164%; height:164%}
.sbclip .sbarc{position:absolute; inset:0; width:100%; height:100%;
  display:block; animation:cpArcR 5.2s linear infinite; will-change:transform}
@keyframes cpArcR{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.cp-start{width:83px; height:83px; border-radius:50%; cursor:pointer;
  border:0; background:none; padding:0;
  color:#17221c; font-size:16px; font-weight:900; letter-spacing:.5px;
  -webkit-text-stroke:.45px currentColor;
  -webkit-tap-highlight-color:transparent;
  position:relative; z-index:2;
  text-shadow:0 1px 1px rgba(255,255,255,.5)}
.cp-start:disabled{opacity:.85}
.cp-start:active{transform:scale(.95)}
.cp-start.stop{color:#b9c6bf; text-shadow:0 1px 2px rgba(0,0,0,.65)}
.cp-start.take{color:#fff; text-shadow:0 1px 3px rgba(0,10,4,.7)}

/* — AUTO seçim paneli: cərgənin üstündə metalik popover — */
.cp-autop{position:absolute; left:6px; right:6px; bottom:calc(100% + 4px);
  display:none; gap:6px; padding:9px; border-radius:13px; z-index:9;
  border:1px solid #05070c;
  background:linear-gradient(180deg,#3d4557 0%,#232936 14%,#171c26 86%,
    #2b3140 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -1px 2px rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.65)}
.cp-autop.on{display:flex; animation:cpApUp .2s cubic-bezier(.2,1.2,.4,1)}
@keyframes cpApUp{from{opacity:0; transform:translateY(14px) scale(.97)}
  to{opacity:1; transform:translateY(0) scale(1)}}
.cp-autop button{flex:1; height:40px; border-radius:9px; cursor:pointer;
  border:1px solid #0a0d15; color:#dbe6ff;
  font-size:13.5px; font-weight:900;
  text-shadow:0 1px 1px rgba(0,0,0,.8);
  background:
    radial-gradient(120% 85% at 50% -15%, rgba(255,255,255,.4) 0%,
      rgba(255,255,255,.07) 45%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#4b5773 0%,#242c40 48%,#141a29 52%,#1b2234 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),
    inset 0 -2px 3px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.5)}
.cp-autop button:active{transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.cp-autop button.stop{color:#ff9d94;
  background:
    radial-gradient(120% 85% at 50% -15%, rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#6e3440 0%,#40202a 48%,#2a1219 52%,#341a21 100%)}

/* — alçaq / dar ekranlar — */
@media (max-height: 730px){
  .cp-ab{width:46px; height:46px}
  .cp-start{width:70px; height:70px; font-size:14.5px}
  .cp-gmb{flex:0 0 86px; height:50px}
  .cp-step button{width:34px; height:28px; font-size:17px}
  .cp-step b{font-size:14.5px; padding:4px 7px}
  .cp-ctrl{margin-top:16px; padding-bottom:12px}
  .cp-box{padding:4px 8px}
  .cp-step{padding:5px 8px 6px}
  .cp-steps{margin-top:6px}
}
@media (max-height: 600px){
  .cp-ab{width:40px; height:40px}
  .cp-start{width:61px; height:61px; font-size:13px}
  .cp-gmb{flex:0 0 74px; height:44px}
  .cp-step button{width:30px; height:25px; font-size:15px}
  .cp-step b{font-size:13px; min-width:44px}
}
@media (max-width: 380px){
  .cp-gmb{flex:0 0 88px; height:52px}
}