/* ===== THEME TOKENS ===== */
:root{
  --bg:#0b0f1e; --text:#eef1ff; --muted:#b7c0ff;
  --accent:#5865ff; --accent-2:#9b5cff;

  --container-max:1080px; --section-pad:28px; --gap:14px; --rating-gap:18px;

  --header-bg:rgba(15,19,36,.72); --header-blur:10px; --logo-size:120px;

  --thumb-w:140px; --actions-w:230px;

  --card-bg:rgba(17,22,49,.72); --card-border:#2a3470;
  --card-radius:20px; --card-pad:16px; --card-shadow:0 10px 30px rgba(0,0,0,.35);

  --thumb-radius:14px; --thumb-bg:#222a55;

  --star:#ffd76a; --rate:#ffeab5;

  --btn-bg:linear-gradient(180deg,#4050ff 0%,#2434ff 100%);
  --btn-border:1px solid rgba(255,255,255,.12);
  --btn-shadow:0 8px 18px rgba(36,52,255,.35);

  /* переопределяются из index.php */
  --bg-image:url('assets/bg-casino.jpg');
  --header-image:url('assets/header-chips.png');
  --card-illustration:url('assets/card-doodles.png');
  --hero-image:none;

  /* rank rail */
  --rank-rail-w:72px; --rank-badge:48px;
  --rank-rail-bg:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  --rank-rail-border:1px solid rgba(255,255,255,.08);

  /* ribbons for TOP-1..3 */
  --ribbon1:linear-gradient(135deg,#ffe08a 0%,#ffcf57 45%,#e2ad34 100%);
  --ribbon2:linear-gradient(135deg,#e6ecf2 0%,#cfd8dc 45%,#b0bec5 100%);
  --ribbon3:linear-gradient(135deg,#ffc187 0%,#ffad66 45%,#d4874a 100%);
  --ribbon-opacity:.16;

  /* rating progress */
  --progress-bg:rgba(255,255,255,.12);
  --progress-fill:linear-gradient(90deg,#FFD76A,#FFEDB3,#A8B4FF);

  /* stars */
  --star-size:18px; --star-gap:4px;
  --star-row-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.18)' stroke='rgba(255,255,255,0.16)' stroke-width='1' d='M12 2l3.09 6.26L22 9.27l-5 4.9L18.18 22 12 18.9 5.82 22 7 14.17l-5-4.9 6.91-1.01L12 2z'/%3E%3C/svg%3E");
  --star-row-full:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23FFD76A'/%3E%3Cstop offset='100%25' stop-color='%23FFE9A3'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23g)' d='M12 2l3.09 6.26L22 9.27l-5 4.9L18.18 22 12 18.9 5.82 22 7 14.17l-5-4.9 6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.45;position:relative
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;background:
    radial-gradient(1200px 600px at 80% -10%, rgba(155,92,255,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 90%, rgba(88,101,255,.12), transparent 60%),
    var(--bg-image);
  background-size:cover,cover,cover;background-position:center;opacity:.22
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;background:
    radial-gradient(1200px 700px at 50% -20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 600px at 0% 120%, rgba(0,0,0,.35), transparent 40%);
  pointer-events:none
}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(var(--header-blur));background:var(--header-bg);border-bottom:1px solid rgba(255,255,255,.05)}
.c-wrap{
  max-width:var(--container-max);margin:0 auto;padding:var(--section-pad) var(--gap);
  display:flex;align-items:center;gap:18px;
  background-image:var(--header-image);background-repeat:no-repeat;background-size:contain;background-position:right center;
  isolation:isolate
}
.site-logo{width:var(--logo-size);height:var(--logo-size);object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.logo-text{font-weight:800;font-size:22px;letter-spacing:.2px}

/* Optional hero banner (uses --hero-image) */
.hero-banner{
  height:220px;background:var(--hero-image) center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:var(--section-pad)
}

/* ===== Main ===== */
.container{max-width:var(--container-max);margin:var(--section-pad) auto;padding:0 var(--gap)}

/* ===== Card ===== */
.casino-box{
  position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);
  padding:var(--card-pad);margin-bottom:calc(var(--gap) + 6px);box-shadow:var(--card-shadow);overflow:hidden;
  padding-left:calc(var(--rank-rail-w) + var(--card-pad))
}
.casino-box::before{
  content:"";position:absolute;inset:-1px;z-index:0;background:
    radial-gradient(400px 220px at 10% 5%, rgba(155,92,255,.18), transparent 60%),
    radial-gradient(380px 220px at 95% 90%, rgba(88,101,255,.18), transparent 60%),
    var(--card-illustration);
  background-repeat:no-repeat,no-repeat,repeat;background-size:auto,auto,520px 520px;background-position:left top,right bottom,0 0;opacity:.06;pointer-events:none
}
.casino-box.rank-1::after,.casino-box.rank-2::after,.casino-box.rank-3::after{
  content:"";position:absolute;inset:-10% -2% -10% auto;width:38%;z-index:0;pointer-events:none;transform:skewX(-10deg);
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));opacity:var(--ribbon-opacity)
}
.casino-box.rank-1::after{background:var(--ribbon1)}
.casino-box.rank-2::after{background:var(--ribbon2)}
.casino-box.rank-3::after{background:var(--ribbon3)}
.casino-detail{position:relative;z-index:1}

/* ===== Rank rail ===== */
.rank-rail{
  position:absolute;inset:0 auto 0 0;width:var(--rank-rail-w);
  display:flex;align-items:center;justify-content:center;
  background:var(--rank-rail-bg);border-right:var(--rank-rail-border);z-index:2;
  isolation:isolate
}
.rank-badge{
  width:var(--rank-badge);height:var(--rank-badge);
  display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);color:var(--muted);
  font-weight:900;font-size:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.25);
  user-select:none;position:relative;overflow:visible;transform:translateZ(0)
}
.rank-num{font-weight:900;font-size:18px;color:var(--muted);line-height:1}
.cup-svg{display:block;width:24px;height:24px}

/* overlay bubble (number near cup) */
.rank-overlay{
  position:absolute;top:0;right:0;transform:translate(50%,-50%);-webkit-transform:translate(50%,-50%);
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#151a33;border:1px solid rgba(255,255,255,.22);
  color:#fff;font:600 12px/20px system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:center;
  pointer-events:none;z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.35)
}
/* optional "inside" mode (если элементу добавить класс .overlay-inside) */
.rank-badge.overlay-inside .rank-overlay{
  top:2px;right:2px;transform:none;min-width:18px;height:18px;padding:0 4px;font-size:11px;line-height:18px
}

/* ===== Grid ===== */
.c-grid{display:grid;grid-template-columns:var(--thumb-w) 1fr var(--actions-w);gap:var(--gap);align-items:center}
.c-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--rating-gap)}
.c-thumb-img{
  width:100%;height:auto;display:block;border-radius:var(--thumb-radius);background:var(--thumb-bg);
  box-shadow:0 10px 18px rgba(0,0,0,.25);transform:translateZ(0);transition:transform .25s ease,box-shadow .25s ease
}
.casino-box:hover .c-thumb-img{transform:scale(1.02);box-shadow:0 16px 28px rgba(0,0,0,.33)}
.casino-name{font-weight:900;font-size:18px;line-height:1.25;margin-bottom:6px;color:#f2f4ff}
.casino-bonus{font-size:16px;line-height:1.35;color:#d9deff}

/* ===== Top badge ===== */
.tag-badge{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.badge-gold{background:linear-gradient(180deg, rgba(255,240,180,.25), rgba(255,212,98,.12));color:#ffe49c}
.badge-silver{background:linear-gradient(180deg, rgba(220,230,240,.25), rgba(180,200,210,.12));color:#e6eef5}
.badge-blue{background:linear-gradient(180deg, rgba(120,160,255,.25), rgba(80,120,255,.12));color:#cfe2ff}
.badge-green{background:linear-gradient(180deg, rgba(120,255,180,.2), rgba(60,200,140,.1));color:#d9ffe9}
.badge-purple{background:linear-gradient(180deg, rgba(200,160,255,.22), rgba(150,110,255,.12));color:#efe2ff}
.badge-red{background:linear-gradient(180deg, rgba(255,160,160,.22), rgba(255,100,100,.12));color:#ffe1e1}

/* ===== Stars + progress ===== */
.rating-wrap{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.rating-block{display:flex;flex-direction:column;gap:6px}

/* ряд звёзд: серый слой снизу, цветной сверху шириной --pct */
.stars-bar{
  --pct:0%;
  display:block;position:relative;
  width:calc(var(--star-size)*5 + var(--star-gap)*4);
  height:var(--star-size);
  background-image:var(--star-row-empty);
  background-repeat:repeat-x;background-size:var(--star-size) var(--star-size)
}
.stars-bar::after{
  content:"";position:absolute;inset:0;width:var(--pct);
  background-image:var(--star-row-full);
  background-repeat:repeat-x;background-size:var(--star-size) var(--star-size)
}

/* прогресс-бар */
.rating-progress{width:120px;height:6px;background:var(--progress-bg);border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.rating-progress-fill{height:100%;width:0;background:var(--progress-fill);border-radius:999px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){ .rating-progress-fill{transition:none} }

.ratePoint{display:inline-flex;align-items:center;gap:6px;color:var(--rate);font-weight:800}

/* ===== Button ===== */
.btn-play{
  display:inline-flex;align-items:center;justify-content:center;min-width:140px;padding:12px 18px;color:#fff;text-decoration:none;
  font-weight:800;letter-spacing:.2px;background:var(--btn-bg);border:var(--btn-border);border-radius:14px;box-shadow:var(--btn-shadow);
  position:relative;overflow:hidden;transform:translateZ(0)
}
.btn-play span{position:relative;z-index:1}
.btn-play::after{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:200%;width:35%;
  background:linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-120%) rotate(12deg);transition:transform .7s ease
}
.btn-play:hover::after{transform:translateX(140%) rotate(12deg)}
.btn-play:hover{filter:saturate(1.1) brightness(1.02)}

/* ===== Footer ===== */
.footer{border-top:1px solid rgba(255,255,255,.08);margin-top:var(--section-pad)}
.copyright{max-width:var(--container-max);margin:0 auto;padding:var(--section-pad) var(--gap);text-align:center;color:#9aa3d6}

/* ===== Responsive ===== */
@media (max-width:980px){
  :root{ --thumb-w:120px; --actions-w:100%; --rank-rail-w:60px; --rank-badge:44px; }
  .c-grid{grid-template-columns:var(--thumb-w) 1fr;align-items:flex-start}
  .c-actions{justify-content:flex-start;margin-top:6px}
  .btn-play{min-width:128px}
  .hero-banner{height:180px}
}
@media (max-width:580px){
  :root{ --logo-size:90px; --rank-rail-w:54px; --rank-badge:40px; }
  .logo-text{font-size:18px}
  .casino-name{font-size:16px}
  .casino-bonus{font-size:15px}
  .hero-banner{height:160px}
}
/* курсор-рука на всех кнопках */
.btn { cursor: pointer; }
.btn-play { cursor: pointer; }          /* если нужна рука и на кнопке перехода */
.btn:disabled,
.btn[disabled] { cursor: not-allowed; opacity: .6; }