:root{
  --cr-bg:#2b0f4c;
  --cr-bg2:#1a0a30;

  --cr-surface: rgba(255,255,255,.06);
  --cr-surface2: rgba(255,255,255,.08);
  --cr-line: rgba(255,255,255,.10);

  --cr-text:#f4f3ff;
  --cr-muted: rgba(244,243,255,.72);

  --cr-green:#26ff75;
  --cr-green2:#12d85c;

  --cr-purple:#7b2cff;
  --cr-purple2:#5b1fff;

  --cr-radius: 14px;
  --cr-radius-lg: 18px;

  --cr-shadow: 0 22px 70px rgba(0,0,0,.45);
  --cr-shadow-sm: 0 14px 44px rgba(0,0,0,.32);

  --cr-container: 1260px;
  --cr-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  --cr-head: ui-sans-serif, "Arial Black", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html,body{ height:100%; }
body{
  font-family: var(--cr-font);
  color: var(--cr-text);
  background:
    radial-gradient(1200px 640px at 50% -10%, rgba(123,44,255,.20), transparent 62%),
    radial-gradient(900px 520px at 20% 10%, rgba(38,255,117,.10), transparent 62%),
    linear-gradient(180deg, var(--cr-bg) 0%, var(--cr-bg2) 100%);
}

/* subtle stars */
body::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background:
    radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(1px 1px at 28% 66%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 54% 38%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1px 1px at 78% 72%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(1px 1px at 92% 30%, rgba(255,255,255,.16), transparent 60%);
  mix-blend-mode: screen;
}

.container{ width: min(var(--cr-container), calc(100% - 36px)); margin-inline:auto; }
.cr-app{ position: relative; padding: 12px 0 34px; }

/* ---------- header ---------- */
.cr-header{
  position: sticky;
  top:0;
  z-index: 60;
  background: rgba(34,10,60,.76);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cr-header__row{
  height: 64px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.cr-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
}
.cr-burger{
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(244,243,255,.92);
  cursor:pointer;
  display:none;
}

.custom-logo-link{ display:flex; align-items:center; text-decoration:none; }
.custom-logo{ max-height: 34px; width:auto; height:auto; }

.cr-logo{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.cr-logo__mark{
  width: 32px; height: 32px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(135deg, rgba(38,255,117,.90), rgba(123,44,255,.80));
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.cr-logo__txt{
  font-family: var(--cr-head);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 950;
  font-size: 14px;
}

.cr-nav{
  display:flex;
  align-items:center;
  gap: 18px;
}
.cr-nav a{
  text-decoration:none;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(244,243,255,.86);
}
.cr-nav a:hover{ color: rgba(244,243,255,.98); }

.cr-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:flex-end;
  min-width: 360px;
}

.cr-loginMini{
  display:flex;
  gap: 10px;
  align-items:center;
}
.cr-loginMini input{
  width: 160px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  outline: none;
  color: rgba(244,243,255,.90);
  padding: 0 12px;
  font-size: 12px;
}
.cr-loginMini input::placeholder{ color: rgba(244,243,255,.48); }
.cr-go{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(38,255,117,.22);
  background: rgba(38,255,117,.10);
  color: rgba(244,243,255,.92);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.cr-btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration:none;
  font-weight: 950;
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cr-btn--green{
  color:#06140b;
  background: linear-gradient(180deg, var(--cr-green), var(--cr-green2));
  box-shadow: 0 18px 54px rgba(38,255,117,.12);
}
.cr-btn--ghost{
  color: rgba(244,243,255,.88);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

.cr-flag{
  width: 22px; height: 16px;
  border-radius: 4px;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

/* drawer */
.cr-drawer{
  position: fixed;
  inset: 0;
  z-index: 80;
  display:none;
}
.cr-drawer.is-open{ display:block; }
.cr-drawer__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.cr-drawer__panel{
  position:absolute; top:0; left:0;
  width: min(340px, 88vw);
  height:100%;
  background: rgba(34,10,60,.92);
  backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255,255,255,.10);
  padding: 14px;
  transform: translateX(-102%);
  transition: transform .22s ease;
}
.cr-drawer.is-open .cr-drawer__panel{ transform: translateX(0); }
.cr-drawer__top{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
}
.cr-drawer__close{
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(244,243,255,.92);
  cursor:pointer;
}
.cr-drawer__links{ display:grid; gap:10px; }
.cr-drawer__links a{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration:none;
  font-weight: 950;
}

@media (max-width: 980px){
  .cr-nav{ display:none; }
  .cr-loginMini{ display:none; }
  .cr-burger{ display:inline-flex; }
  .cr-actions{ min-width: auto; }
}

/* ---------- hero (3 panels visible) ---------- */
.cr-hero{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .cr-hero{ grid-template-columns: 1fr; }
}

.cr-panel{
  border-radius: var(--cr-radius-lg);
  background: rgba(0,0,0,.22);
  box-shadow: var(--cr-shadow-sm);
  overflow:hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.06);
}

.cr-form{
  padding: 14px;
}
.cr-form h3{
  margin: 0 0 10px;
  font-family: var(--cr-head);
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: 12px;
}
.cr-field{
  margin-top: 10px;
}
.cr-field label{
  display:block;
  font-size: 11px;
  color: rgba(244,243,255,.62);
  margin-bottom: 6px;
  font-weight: 900;
}
.cr-field input, .cr-field select{
  width: 100%;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(244,243,255,.90);
  padding: 0 10px;
  outline: none;
  font-size: 12px;
}
.cr-check{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(244,243,255,.68);
  font-size: 12px;
  line-height: 1.4;
}
.cr-check input{ margin-top: 3px; }
.cr-form .cr-btn{ width: 100%; margin-top: 12px; height: 40px; border-radius: 12px; }

.cr-mainHero{
  padding: 18px;
  min-height: 240px;
  background:
    radial-gradient(720px 360px at 70% 40%, rgba(38,255,117,.22), transparent 60%),
    radial-gradient(720px 360px at 35% 20%, rgba(123,44,255,.22), transparent 62%),
    rgba(0,0,0,.25);
}
.cr-mainHero h1{
  margin:0 0 10px;
  font-family: var(--cr-head);
  text-transform: uppercase;
  letter-spacing:.04em;
  font-size: clamp(20px, 2.2vw, 30px);
}
.cr-mainHero .cr-bonus{
  margin-top: 8px;
  font-family: var(--cr-head);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
}
.cr-mainHero .cr-bonus span{ color: var(--cr-green); }
.cr-mainHero .cr-sub{
  margin-top: 8px;
  color: rgba(244,243,255,.74);
  font-weight: 900;
}
.cr-mainHero .cr-btn{ margin-top: 14px; height: 44px; padding: 0 18px; border-radius: 999px; }

.cr-heroArt{
  position:absolute;
  right: 18px;
  bottom: 12px;
  font-size: 70px;
  opacity:.9;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.cr-dots{
  position:absolute;
  left: 18px;
  bottom: 12px;
  display:flex;
  gap: 8px;
}
.cr-dot{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
}
.cr-dot.is-active{ background: rgba(38,255,117,.95); }

.cr-rightStack{
  display:grid;
  gap: 12px;
  padding: 12px;
}
.cr-miniPromo{
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  padding: 12px;
  min-height: 112px;
  position: relative;
  overflow:hidden;
}
.cr-miniPromo h3{
  margin:0 0 8px;
  font-family: var(--cr-head);
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.cr-miniPromo p{
  margin:0;
  color: rgba(244,243,255,.74);
  font-size: 12px;
  line-height: 1.5;
  max-width: 30ch;
}
.cr-miniPromo .ico{
  position:absolute;
  right: 10px;
  bottom: 8px;
  font-size: 42px;
  opacity:.9;
}

/* ---------- category icons ---------- */
.cr-cats{
  margin-top: 12px;
  border-radius: var(--cr-radius-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--cr-shadow-sm);
  padding: 12px;
}
.cr-cats__row{
  display:flex;
  gap: 12px;
  overflow:auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.cr-cats__row::-webkit-scrollbar{ display:none; }
.cr-cat{
  min-width: 110px;
  height: 78px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display:grid;
  justify-items:center;
  align-content:center;
  gap: 8px;
  text-decoration:none;
  color: rgba(244,243,255,.86);
}
.cr-cat:hover{ outline: 2px solid rgba(38,255,117,.35); }
.cr-cat .ico{ font-size: 22px; color: rgba(38,255,117,.95); }
.cr-cat .txt{ font-size: 12px; font-weight: 950; }

/* ---------- slots ---------- */
.cr-sec{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.cr-sec h2{
  margin:0;
  font-family: var(--cr-head);
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 14px;
}
.cr-sec .hint{
  color: rgba(244,243,255,.62);
  font-weight: 900;
  font-size: 12px;
}
.cr-slots{
  margin-top: 10px;
  border-radius: var(--cr-radius-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--cr-shadow-sm);
  padding: 12px;
}
.cr-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 1100px){ .cr-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 820px){ .cr-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px){ .cr-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.cr-tile{
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  overflow:hidden;
  position: relative;
  transition: transform .18s ease, box-shadow .22s ease;
}
.cr-tile:hover{ transform: translateY(-3px); box-shadow: 0 22px 60px rgba(0,0,0,.45); }
.cr-tile__media{
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, rgba(123,44,255,.18), rgba(38,255,117,.10));
  position: relative;
}
.cr-tile__media img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .26s ease, filter .26s ease;
}
.cr-tile:hover .cr-tile__media img{
  transform: scale(1.08);
  filter: saturate(1.10) contrast(1.04);
}
.cr-ov{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
  opacity: 0;
  transition: opacity .2s ease;
}
.cr-tile:hover .cr-ov{ opacity: 1; }
.cr-play{
  position:absolute;
  left: 10px; right: 10px; bottom: 10px;
  height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: linear-gradient(180deg, var(--cr-green), var(--cr-green2));
  color: #06140b;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.cr-tile:hover .cr-play{ transform: translateY(0); opacity: 1; }
.cr-tile__meta{ padding: 8px 10px 10px; }
.cr-tile__title{ margin:0; font-weight: 950; font-size: 12px; }
.cr-tile__sub{ margin-top: 4px; font-size: 11px; color: rgba(244,243,255,.62); }

/* ---------- SEO ---------- */
.cr-seo{
  margin-top: 14px;
  border-radius: var(--cr-radius-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--cr-shadow-sm);
  padding: 14px;
}
.cr-seo :where(h2){ margin: 6px 0 10px; font-size: 20px; }
.cr-seo :where(h3){ margin: 14px 0 8px; font-size: 14px; }
.cr-seo :where(p,li){ color: rgba(244,243,255,.74); line-height: 1.75; }
.cr-seo :where(a){ color: rgba(38,255,117,.92); text-decoration: underline; text-underline-offset: 2px; }

/* footer */
.cr-footer{
  margin-top: 16px;
  padding: 18px 0 28px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
}
.cr-footer__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cr-footer__brand{ font-weight: 950; letter-spacing:.06em; text-transform: uppercase; }
.cr-footer__muted{ color: rgba(244,243,255,.58); font-size: 12px; margin-top: 4px; }
.cr-footer__links{ display:flex; gap: 10px; flex-wrap: wrap; }
.cr-footer__link{
  font-weight: 900;
  font-size: 12px;
  text-decoration:none;
  color: rgba(244,243,255,.68);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.cr-footer__link:hover{ color: rgba(244,243,255,.90); }