:root{
  /* brand */
  --clr-primary:#8b1e3f;        
  --clr-primary-600:#741a36;
  --clr-primary-700:#5d152c;
  --clr-accent:#e9b21a;         

  /* neutrals */
  --clr-bg:#fbf8f7;
  --clr-surface:#ffffff;
  --clr-surface-2:#fff4f6;
  --clr-ink:#24141a;
  --clr-ink-2:#4a2b35;

  /* misc */
  --clr-star:#ffb400;

  /* gradients */
  --grad-hero:linear-gradient(180deg,#5d152c 0%, #8b1e3f 100%);
  --grad-header:linear-gradient(90deg, #5d152c 0%, #8b1e3f 60%, #b23a5a 100%);
  --grad-row:linear-gradient(180deg,#ffffff 0%, #fff4f6 100%);

  /* typography (fluid) */
  --fs-100:clamp(.86rem,.8rem + .3vw,.98rem);
  --fs-200:clamp(1rem,.92rem + .45vw,1.12rem);
  --fs-300:clamp(1.08rem,.98rem + .7vw,1.25rem);
  --fs-400:clamp(1.2rem,1rem + 1vw,1.5rem);
  --fs-500:clamp(1.6rem,1.2rem + 2.2vw,2.3rem);
  --fs-600:clamp(2rem,1.4rem + 3.4vw,3rem);
  --lh:1.6;

  /* sizing */
  --container:1200px;

  /* radii & shadows */
  --r-8:8px; --r-10:10px; --r-12:12px; --r-16:16px; --r-20:20px;
  --shadow-1:0 1px 8px rgba(36,20,26,.06);
  --shadow-2:0 8px 24px rgba(36,20,26,.12);
  --shadow-3:0 14px 42px rgba(36,20,26,.16);

  /* focus ring */
  --ring:0 0 0 3px rgba(139,30,63,.28);

  /* legacy mapping */
  --main-color: var(--clr-primary);
  --main-width: var(--container);
  --h1-size: var(--fs-600);
  --h2-size: var(--fs-500);
  --h3-size: var(--fs-400);
}

/* Header theming API (preserved) */
:root{--menu-color:#2a0f17;--menu-text:#ffffff;--hover-color:var(--clr-primary);--hover-text:#2a0f17;}
[data-theme="light"]{--menu-color:#ffffff;--menu-text:#2a0f17;--hover-color:var(--clr-primary);--hover-text:#ffffff;}

/* -------------------- Base -------------------- */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;padding:0;
  font-family:"Segoe UI", Arial, system-ui, -apple-system, sans-serif;
  background:var(--clr-bg);color:var(--clr-ink);
  font-size:16px;line-height:var(--lh);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;border-radius:10px}
a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.container{max-width:var(--main-width);margin:0 auto;padding:0 20px}

/* -------------------- Header & Navigation -------------------- */
header{background:var(--menu-color);position:relative;padding:10px 0;box-shadow:0 1px 0 rgba(36,20,26,.06)}
.header-container{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.desktop-menu{display:flex;list-style:none;margin:0;padding:0}
.desktop-menu>li{position:relative}
.desktop-menu>li>a{
  color:var(--menu-text);text-decoration:none;font-size:var(--fs-200);
  padding:10px 14px;display:flex;align-items:center;border-radius:var(--r-8);
  transition:background .15s,color .15s,transform .1s;outline:none
}
.desktop-menu>li>a:hover{color:var(--hover-color);background:rgba(255,255,255,.08)}
.desktop-menu>li>a:focus-visible{box-shadow:var(--ring)}
.desktop-menu>li.has-submenu>a::after{content:"▼";font-size:.6rem;margin-left:6px;opacity:.75}
.submenu{
  position:absolute;top:100%;left:0;min-width:220px;background:var(--menu-color);
  list-style:none;margin:0;padding:6px 0!important;border-radius:10px;box-shadow:var(--shadow-3);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:1000
}
.desktop-menu>li:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu li{margin:0;padding:0!important}
.submenu li a{color:var(--menu-text);display:block;text-decoration:none;padding:10px 14px;margin:0!important;transition:background .15s,color .15s}
.submenu li a:hover{background:var(--hover-color);color:var(--hover-text)}
.submenu li a:focus-visible{outline:none;box-shadow:var(--ring) inset}
.burger-menu{order:3;display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;border-radius:var(--r-8)}
.burger-menu:focus-visible{box-shadow:var(--ring)}
.mobile-menu-close{position:absolute;top:15px;right:15px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;display:none}
nav{order:2;margin-left:auto}
.logo{order:1;font-size:1.6rem;font-weight:800;color:var(--clr-primary);text-decoration:none;margin-right:auto}
.header-right{order:3;margin-left:12px}
@media (max-width:768px){
  .burger-menu{display:block;margin-left:auto}
  nav{position:fixed;inset:0 auto 0 0;width:82%;height:100dvh;transform:translateX(-100%);background:#2a0f17;z-index:1000;transition:transform .28s ease;padding:58px 18px 18px;box-shadow:8px 0 30px rgba(36,20,26,.35)}
  nav.active{transform:translateX(0)}
  .mobile-menu-close{display:block}
  .desktop-menu{flex-direction:column}
  .desktop-menu>li.has-submenu>a::after{position:absolute;right:8px;top:18px;transform:translateY(-50%)}
  .has-submenu{width:100%;padding-right:30px}
  .submenu{display:none;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;padding-left:8px}
  .submenu.active{display:block;margin-left:12px}
  .submenu li a{padding:7px 0;color:var(--menu-text)}
}

/* Language switcher */
.language-switcher{display:flex;gap:12px}
.language-switcher:empty{display:none}
.language-switcher a{color:#fff;text-decoration:none;font-size:14px}
@media (max-width:768px){.language-switcher{margin-top:8px}}

/* -------------------- HERO (universal header block) -------------------- */
.hero-section{
  position:relative;width:100%;overflow:clip;padding:clamp(32px,6vw,64px) 0;background:var(--grad-hero)
}
.hero-bg-container{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg-container svg{display:none!important}
.hero-section::before,
.hero-section::after{content:"";position:absolute;inset:0;pointer-events:none}
.hero-section::before{
  background:radial-gradient(1200px 500px at 10% 0%, rgba(255,255,255,.10), transparent 60%),
             radial-gradient(800px 400px at 85% 10%, rgba(233,178,26,.14), transparent 70%);
  opacity:.9;z-index:0
}
.hero-section::after{bottom:-1px;top:auto;height:42%;background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,.04) 60%, transparent 65%);z-index:0}
.hero-container{
  position:relative;z-index:2;max-width:var(--main-width);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:clamp(20px,4vw,44px);flex-direction:row
}
@media (max-width:900px){.hero-container{flex-direction:column;gap:24px;padding:0 12px}}
.hero-content{flex:1;min-width:0}
.hero-title{
  color:#fff;font-size:clamp(1.8rem,1.2rem + 3.2vw,3rem);line-height:1.08;font-weight:900;letter-spacing:-.015em;
  margin:0 0 .4em;text-shadow:0 2px 12px rgba(0,0,0,.28)
}
.hero-title-pulse{animation:hero-title-pulse 2.2s ease-in-out infinite}
@keyframes hero-title-pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
.hero-subtitle{color:#ffe9f0;opacity:.95;font-size:clamp(1rem,.95rem + .6vw,1.25rem);margin:6px 0 18px}

/* -------------------- BUTTONS — unify under .hero-btn -------------------- */
/* Base look for hero-btn */
.hero-btn,
.brand-link-btn,
.cta-btn{
  /* same visual for ALL buttons */
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  background: linear-gradient(135deg, var(--clr-accent) 0%, #ffd878 100%); /* gold */
  color:#2a0f17;
  border:none;border-radius:12px;
  padding:14px 28px;
  font-size:1.06rem;font-weight:900;
  text-decoration:none;cursor:pointer;outline:none;
  position:relative;overflow:hidden;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
  transition:transform .16s ease, box-shadow .22s ease, filter .22s ease, background .3s ease;
}

.brand-link-btn:hover::after,
.cta-btn:hover::after{left:100%}

.hero-btn:hover,
.brand-link-btn:hover,
.cta-btn:hover{transform:translateY(-2px);filter:brightness(1.02);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.hero-btn:focus-visible,
.brand-link-btn:focus-visible,
.cta-btn:focus-visible{box-shadow:0 0 0 3px rgba(233,178,26,.45),0 12px 28px rgba(0,0,0,.25)}

/* Variant: “brand” (burgundy) — used where previously brand buttons were */
.hero-bonus-content .hero-btn,
.brand-link-btn.brand-link-btn--brand{
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-600) 100%);
  color:#fff;
}

/* Size helpers (optional, auto-applied by context elsewhere) */
.btn-sm{padding:10px 16px;font-size:.98rem;border-radius:10px}
.btn-lg{padding:18px 36px;font-size:1.12rem;border-radius:14px}

/* -------------------- Bonus card -------------------- */
.hero-bonus{flex:0 0 350px;position:relative}
.hero-bonus-badge{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:80px;height:80px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 35%, #ffe08e, var(--clr-accent));
  border:2px solid #fff;box-shadow:0 12px 28px rgba(0,0,0,.35);z-index:3
}
.hero-bonus-badge span{color:#2a0f17;font-weight:900;font-size:1.45rem;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.hero-bonus-content{
  text-align:center;border-radius:20px;padding:60px 22px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;box-shadow:0 16px 40px rgba(0,0,0,.25)
}
.hero-bonus-content h3{margin:0 0 16px;font-size:clamp(1.1rem,1rem + .6vw,1.4rem);font-weight:900;letter-spacing:.01em;color:#ffecb3}
.hero-bonus-content .hero-btn{margin:0 auto;display:inline-flex}
@media (max-width:900px){.hero-bonus{width:100%;max-width:380px;margin:0 auto}}
@media (max-width:600px){
  .hero-section{padding:28px 0 20px}
  .hero-bonus{max-width:98vw}
  .hero-bonus-content{padding:56px 12px 16px}
  .hero-bonus-badge{width:64px;height:64px}
  .hero-btn,.brand-link-btn,.cta-btn{width:92%;padding:12px 0;font-size:1rem}
}

/* -------------------- Content Area -------------------- */
.content-container{max-width:var(--main-width);margin:0 auto;padding:52px 24px 46px}
@media (max-width:900px){.content-container{padding:36px 10px 32px}}
h1,h2,h3{font-weight:900;letter-spacing:-.012em;margin:2em 0 .8em}
h1{color:#3e1020;margin-top:.3em;font-size:var(--h1-size)}
h2{color:var(--clr-primary);font-size:var(--h2-size)}
h3{color:#b23a5a;font-size:var(--h3-size)}
p{margin:1.05em 0;font-size:var(--fs-200);color:var(--clr-ink)}
ul,ol{margin:1.25em 0 1.6em 1.6em;font-size:var(--fs-200)}
li{margin-bottom:.55em}

/* Tables */
table{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--clr-surface);
  box-shadow:var(--shadow-1);margin:1.6em 0 1.8em;border-radius:12px;overflow:hidden
}
th,td{padding:13px 17px;text-align:left}
th{background:#fff0f4;color:var(--clr-primary);font-weight:800;border-bottom:2px solid var(--clr-primary)}
tr:nth-child(even){background:#fff6f8}
tr:nth-child(odd){background:#ffffff}

/* -------------------- TOC -------------------- */
.toc-section{padding:42px 0}
.toc-section .container{display:flex;justify-content:space-between;align-items:flex-start;gap:26px}
.toc-content{flex:1;max-width:50%;text-align:left}
.toc-content a{text-decoration:none;color:var(--clr-primary-700)}
.toc-content a:hover{text-decoration:underline}
.toc-image{flex:1;max-width:50%;text-align:center}
.toc-image img{border-radius:12px;box-shadow:var(--shadow-1);transition:transform .22s,box-shadow .22s}
.toc-image img:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-2)}
@media (max-width:768px){.toc-section .container{flex-direction:column}.toc-content,.toc-image{max-width:100%}.toc-image{margin-top:16px}}

/* -------------------- Feed -------------------- */
.feed-block{margin-top:48px}
.feed-block-title{font-size:var(--fs-400);color:var(--clr-primary);font-weight:900;margin-bottom:22px}
.feed-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:900px){.feed-list{grid-template-columns:1fr 1fr;gap:18px}}
@media (max-width:650px){.feed-list{grid-template-columns:1fr;gap:12px}}
.feed-item{background:var(--clr-surface);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column;transition:transform .16s,box-shadow .2s}
.feed-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.feed-img{width:100%;height:165px;object-fit:cover}
.feed-content{padding:16px 18px 14px;display:flex;flex-direction:column;gap:8px}
.feed-title{font-size:1.1rem;font-weight:900;color:#3e1020;margin:0;line-height:1.3;text-decoration:underline}
.feed-title-link{color:inherit;text-decoration:underline}
.feed-desc{font-size:var(--fs-200);color:var(--clr-ink-2)}

/* -------------------- Random link callout -------------------- */
.random-link-block{
  display:block;margin:22px 0 18px;background:#fff9eb;color:#7a520a;font-size:1.02rem;font-weight:800;border-radius:10px;
  padding:14px 18px;border-left:6px solid var(--clr-accent);box-shadow:0 2px 12px rgba(233,178,26,.12)
}
.random-link-block a{color:#b8870a;text-decoration:underline}
.random-link-block a:hover{color:var(--clr-accent)}
@media (max-width:600px){.random-link-block{font-size:1rem;padding:10px 11px;border-radius:8px;border-left-width:4px}}

/* -------------------- Comments -------------------- */
.comments-block{
  margin-top:48px;padding:26px 22px 18px;border-radius:14px;color:#3e1020;
  background:linear-gradient(90deg,#8b1e3f 6%,#b23a5a 100%);box-shadow:0 3px 16px rgba(36,20,26,.10)
}
@media (max-width:600px){.comments-block{padding:18px 10px 12px}}
.comments-block-title{font-size:1.28rem;font-weight:900;margin:0 0 16px;letter-spacing:.3px;color:#3e1020}
.comment-list{display:flex;flex-direction:column;gap:16px}
.comment{background:#fff;border-radius:10px;padding:12px 16px;box-shadow:0 2px 7px rgba(36,20,26,.06)}
.comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.comment-name{font-weight:900;color:var(--clr-primary)}
.comment-date{font-size:.95em;color:var(--clr-primary-700)}
.comment-text{color:#4a2b35;font-size:1.03em}

/* -------------------- FAQ -------------------- */
.faq-block{
  margin-top:48px;padding:26px 22px 18px;color:#fff;border-radius:14px;box-shadow:0 2px 18px rgba(36,20,26,.10);
  background:linear-gradient(90deg,#2a0f17 6%,#8b1e3f 100%)
}
@media (max-width:600px){.faq-block{padding:14px 8px 10px}}
.faq-block-title{font-size:1.24rem;font-weight:900;margin:0 0 16px;letter-spacing:.3px}
.faq-list{display:flex;flex-direction:column;gap:14px}
.faq{background:#b23a5a;border-radius:10px;padding:14px 16px;box-shadow:0 1px 8px rgba(36,20,26,.09)}
.faq-question{font-weight:900;color:#3e1020;font-size:1.06em;margin-bottom:4px}
.faq-answer{color:#ffffff}

/* -------------------- Footer -------------------- */
footer{background:#320c18;color:#fff;padding:36px 0 20px}
.footer-inner{max-width:var(--main-width);margin:0 auto;padding:0 18px}
.footer-menu{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.footer-menu a{
  color:#fff;text-decoration:underline;font-size:1.02rem;padding:6px 10px;border-radius:8px;
  transition:background .16s,color .16s,box-shadow .16s
}
.footer-menu a:hover{background:var(--clr-primary);color:#fff;text-decoration:none}
.footer-menu a:focus-visible{box-shadow:var(--ring);outline:none}
@media (max-width:650px){.footer-menu{flex-direction:column;align-items:flex-start;gap:9px}
  .footer-menu a{padding:6px 0}
}
.footer-copyright{font-size:.98rem;text-align:center;color:#f0d8de}

/* -------------------- Central CTA (mapped to hero-btn) -------------------- */
.cta-btn-center-block{display:flex;justify-content:center;align-items:center;margin:36px 0 44px}
.cta-btn{min-width:230px}
@media (max-width:650px){.cta-btn{min-width:180px;padding:14px 22px;font-size:1.03rem}.cta-btn-center-block{margin:24px 0}}

/* -------------------- Brand Comparison Table -------------------- */
.brand-table-block{
  width:100%;margin:34px 0 42px;border-radius:18px;background:var(--clr-surface);overflow:hidden;
  box-shadow:0 8px 32px rgba(36,20,26,.08),0 2px 8px rgba(36,20,26,.06)
}
.brand-table{width:100%;display:flex;flex-direction:column}
.brand-table-head{display:flex;width:100%;color:#fff;font-weight:900;letter-spacing:.04em;text-transform:uppercase;background:var(--grad-header)}
.brand-table-head .brand-th{flex:1 1 0;padding:16px 10px;text-align:center;font-size:.98rem}
.brand-th.brand-th-casino{flex:1.7 1 0;min-width:150px}
.brand-th.brand-th-rating{flex:1.1 1 0;min-width:110px}
.brand-th.brand-th-bonus{flex:1.4 1 0;min-width:125px}
.brand-th.brand-th-pros{flex:2.2 1 0;min-width:210px}
.brand-th.brand-th-links{flex:1.2 1 0;min-width:120px}
.brand-table-rows{display:flex;flex-direction:column;width:100%}
.brand-row{
  display:flex;align-items:stretch;font-size:.97rem;background:var(--grad-row);
  border-bottom:1px solid #f2d7de;transition:transform .14s,box-shadow .2s
}
.brand-row:last-child{border-bottom:none}
.brand-row:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(36,20,26,.14),0 2px 8px rgba(36,20,26,.08);z-index:1}
.brand-td{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:68px;line-height:1.36;padding:14px 10px}
.brand-td.brand-td-casino{flex:1.7 1 0}
.brand-td.brand-td-rating{flex:1.1 1 0}
.brand-td.brand-td-bonus{flex:1.4 1 0;font-weight:800;color:var(--clr-primary-700)}
.brand-td.brand-td-pros{flex:2.2 1 0;justify-content:flex-start;align-items:flex-start;color:var(--clr-ink-2);padding-left:18px;font-size:.95em}
.brand-td.brand-td-links{flex:1.2 1 0}
.brand-td .brand-logo{width:150px;height:44px;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(36,20,26,.05)}
.brand-td .brand-rating{font-size:1.26em;color:var(--clr-star);letter-spacing:.04em}
.brand-td .brand-bonus{color:var(--clr-primary)}
.brand-td .brand-proscons{display:inline-block;text-align:left}
/* Make table button look like hero-btn */
.brand-link-btn{padding:12px 22px}
@media (max-width:900px){
  .brand-table-block{border-radius:14px}
  .brand-table-head .brand-th{padding:14px 6px}
  .brand-td{padding:11px 6px;font-size:.94rem}
  .brand-td .brand-logo{width:110px;height:36px}
  .brand-link-btn{padding:11px 16px;font-size:1rem}
}
@media (max-width:700px){
  .brand-table-head{display:none}
  .brand-row{flex-direction:column;margin:0 0 16px;border-radius:12px;border:1px solid #f2d7de;background:#ffffff;box-shadow:0 2px 13px rgba(36,20,26,.06)}
  .brand-td{width:100%;border-bottom:1px solid #f2d7de;min-height:48px;padding:12px 12px}
  .brand-td:last-child{border-bottom:none}
  .brand-td.brand-td-pros{padding-left:14px}
  .brand-td .brand-logo{width:98px;height:32px}
}
@media (max-width:480px){
  .brand-row{margin-bottom:12px;border-radius:10px}
  .brand-td{padding:9px 6px;font-size:.93rem}
  .brand-link-btn{padding:10px 10px;font-size:.97rem}
}

/* -------------------- Floating Panel -------------------- */
.brand-float-panel-placeholder{width:100%;height:80px;background:#3e1020}
.brand-float-panel{
  position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));
  height:80px;border-radius:28px;z-index:1200;
  background: linear-gradient(135deg, var(--clr-accent) 0%, #ffd878 100%);
  box-shadow:0 12px 36px rgba(36,20,26,.18);
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(120px);pointer-events:none;transition:opacity .34s,transform .42s cubic-bezier(.5,1.1,.6,1.01)
}
.brand-float-panel.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.brand-float-panel-logo{height:58px;min-width:110px;max-width:160px;margin-left:22px;display:flex;align-items:center}
.brand-float-panel-logo img,.brand-float-panel-logo svg{max-height:58px;max-width:150px}
.brand-float-panel-btn{margin-right:22px}
/* Panel button also = hero-btn */
.brand-float-panel-btn .cta-btn{padding:12px 22px;font-size:1rem;border-radius:24px}
@media (max-width:800px){
  .brand-float-panel{height:66px;border-radius:18px}
  .brand-float-panel-logo{margin-left:10px;min-width:80px;max-width:100px}
  .brand-float-panel-btn{margin-right:10px}
}
@media (max-width:600px){
  .brand-float-panel{padding:0 6px;left:8px;right:8px;height:62px;border-radius:12px}
  .brand-float-panel-logo{display:none}
  .brand-float-panel-btn{width:100%;display:flex;justify-content:center;margin:0}
  .brand-float-panel-btn .cta-btn{min-width:94vw;max-width:99vw;width:100%;font-size:.98rem;padding:12px 2px}
}

/* -------------------- Language Selector -------------------- */
.language-selector{position:relative;display:inline-block;font-family:system-ui,-apple-system,sans-serif;font-size:16px}
.language-selector-button{
  display:flex;align-items:center;padding:8px 12px;background-color:#2a0f17;border:1px solid #4a2130;color:#fbe9ee;border-radius:8px;cursor:pointer
}
.language-selector-button:hover{background-color:#341420}
.language-flag{width:24px;height:16px;margin-right:10px;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0}
.language-code{font-weight:800;width:30px;color:#fbe9ee;user-select:none}
.language-dropdown{
  position:absolute;top:100%;left:0;min-width:200px;max-width:300px;max-height:300px;overflow-y:auto;background-color:#2a0f17;
  border:1px solid #4a2130;border-radius:8px;box-shadow:var(--shadow-2);z-index:1000;display:none;margin-top:6px
}
.language-option{display:flex;align-items:center;padding:10px 12px;cursor:pointer;white-space:nowrap;color:#f1d7de;text-decoration:none}
.language-option:hover{background-color:#341420}
.language-name{margin-left:8px;color:#e7cad2;overflow:hidden;text-overflow:ellipsis}
.language-dropdown::-webkit-scrollbar{width:6px}
.language-dropdown::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:3px}
.language-dropdown::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:3px}
.language-dropdown::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.language-dropdown{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.24) rgba(255,255,255,.08)}

/* -------------------- Utilities & Reduced Motion -------------------- */
.template_invisible{display:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero-title-pulse{animation:none!important}
}

/* ===================== Universal Feed (compatible restyle) ===================== */
/* Block header */
.feed-block{
  margin: 48px 0;
}
.feed-block-title{
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem);
  color: var(--clr-primary, #8b1e3f);
}

/* Grid */
.feed-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}
@media (max-width: 900px){
  .feed-list{ grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 600px){
  .feed-list{ grid-template-columns: 1fr; gap: 12px; }
}

/* Card */
.feed-item{
  background: var(--clr-surface, #fff);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-1, 0 1px 8px rgba(36,20,26,.06));
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .22s ease;
}
.feed-item:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2, 0 8px 24px rgba(36,20,26,.12));
}

.feed-img-link{
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;      
  background: #f2eef0;       
  border-bottom: 1px solid #f2d7de;
}
.feed-img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease, filter .25s ease;
}
.feed-item:hover .feed-img{
  transform: scale(1.04);
  filter: saturate(1.02);
}

.feed-img-link::after{
  content: "⭐";
  position: absolute; left: 12px; top: 12px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-weight: 800; font-size: .86rem;
  backdrop-filter: blur(6px);
}

.feed-content{
  padding: 14px 16px 16px;
  display: grid; gap: 10px;
}
.feed-title{
  margin: 0;
  color: #3e1020;
  font-weight: 900;
  font-size: clamp(1.02rem, .98rem + .4vw, 1.18rem);
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.feed-title-link{ color: inherit; text-decoration: none; }
.feed-title-link:hover .feed-title{ color: var(--clr-primary, #8b1e3f); }

.feed-desc{
  margin: 0;
  color: var(--clr-ink-2, #4a2b35);
  font-size: var(--fs-200, 1rem);
  opacity: .98;
}

@media (max-width: 600px){
  .feed-content{ padding: 12px 12px 14px; }
}

/* ===== Footer (extended: about, licenses, badges) ===== */
.site-footer{
  background:#320c18;
  color:#ffffff;
  padding: 36px 0 20px;
}
.site-footer .footer-inner{
  max-width: var(--main-width,1200px);
  margin: 0 auto;
  padding: 0 18px;
}

/* Top grid: about, menu, badges */
.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 1000px){
  .footer-grid{
    grid-template-columns: 1.2fr 1fr 1.2fr;
  }
}
@media (max-width: 820px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* About block */
.footer-about{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px 16px;
}
.footer-about h3{
  margin: 0 0 8px 0;
  font-size: 1.05rem;
  font-weight: 900;
  color:#ffecb3;
  letter-spacing: .2px;
}
.footer-about p{
  margin: 0;
  color:#f0d8de;
  font-size: .98rem;
  line-height: 1.55;
}

/* Menu block (reuse your links) */
.footer-menu{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px 16px;
}
.footer-menu a{
  color:#ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 1rem;
  padding: 2px 0;
  border-radius: 6px;
  transition: background .16s ease, color .16s ease;
}
.footer-menu a:hover{
  background: var(--clr-primary, #8b1e3f);
  text-decoration: none;
}

/* Badges / payments / compliance */
.footer-badges{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 12px;
}
.footer-badges h4{
  margin: 0;
  font-size: .98rem;
  font-weight: 800;
  color:#ffecb3;
}

/* Logo row */
.badge-logos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.badge-logos img{
  display: block;
  height: 22px;
  width: auto;
  filter: grayscale(100%) contrast(1.1) opacity(.92);
  transition: filter .15s ease, transform .15s ease;
}
.badge-logos img:hover{
  filter: grayscale(0%) contrast(1) opacity(1);
  transform: translateY(-1px);
}

/* Legal note */
.footer-legal{
  margin: 0;
  color:#f7e7eb;
  font-size: .9rem;
  line-height: 1.5;
}
.footer-legal a{
  color:#ffe9f0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Bottom bar */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 22px;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.footer-copyright{
  font-size: .98rem;
  color:#f0d8de;
}
.footer-minilinks{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-minilinks a{
  color:#ffe9f0;
  font-size:.92rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity:.95;
}
.footer-minilinks a:hover{ opacity:1; }

:root{
  --bg:#0b0c10;
  --surface:#12131a;
  --overlay:rgba(255,255,255,.06);
  --text:#f7f7fb;
  --muted:#c9cbd6;
  --accent:#f6d46b;
  --accent-2:#ffca45;
  --chip:#1b1e29;
  --chip-bd:rgba(255,255,255,.18);
  --radius-12:12px;
  --radius-16:16px;
  --shadow-1:0 6px 20px rgba(0,0,0,.25);
  --shadow-2:0 10px 28px rgba(0,0,0,.35);
  --maxw:1040px;
}

.casino-hero{
  background: radial-gradient(120% 120% at 0% 0%, #1a1b24 0%, #111218 50%, #0b0c10 100%);
  padding: 20px 16px 28px;
  color: var(--text);
}

.hero-container{
  margin: 0 auto;
  max-width: var(--maxw);
  display: grid;
  gap: 16px;
}

.hero-title{
  font-size: clamp(24px, 4.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-wrap: balance;
}

.hero-media{
  display: grid;
}

.hero-image{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-2);
  background: #0f1016;
}

.hero-overview{
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.6;
  color: var(--muted);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--chip-bd);
  padding: 12px;
  border-radius: var(--radius-12);
}

.hero-facts{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
  scroll-snap-type: x mandatory;
}

.fact{
  min-width: 58%;
  background: var(--chip);
  border: 1px solid var(--chip-bd);
  border-radius: var(--radius-12);
  padding: 12px;
  box-shadow: var(--shadow-1);
  scroll-snap-align: start;
}

.fact-label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.fact-value{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.hero-bonuses{
  display: grid;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--chip-bd);
  border-radius: var(--radius-16);
  padding: 14px;
  box-shadow: var(--shadow-1);
}

.bonuses-title{
  font-size: clamp(18px, 4vw, 22px);
  line-height: 1.3;
  font-weight: 800;
}

.bonus-list{
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bonus-item{
  background: var(--surface);
  border: 1px solid var(--chip-bd);
  border-radius: var(--radius-12);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.bonus-name{
  font-weight: 700;
  font-size: 15px;
}

.bonus-meta{
  font-size: 13px;
  color: var(--muted);
}

.hero-btn{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-weight: 800;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: var(--radius-12);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #151515;
  box-shadow: 0 10px 24px rgba(246,212,107,.25), inset 0 1px 0 rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.12);
}

.hero-btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hero-btn:active{
  transform: translateY(1px);
}

.cta-note{
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.hero-legal{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
}

@media (min-width: 520px){
  .fact{ min-width: 40% }
}

@media (min-width: 740px){
  .hero-container{ gap: 18px }
  .hero-facts{ overflow: visible; display: grid; grid-template-columns: repeat(3, 1fr) }
  .fact{ min-width: 0 }
  .bonus-list{ grid-template-columns: 1fr 1fr }
}


.casino-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
@media (max-width:1100px){ .casino-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){  .casino-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){  .casino-grid{ grid-template-columns:1fr; } }

.casino-card{
  display:flex; flex-direction:column; gap:12px;
  padding:14px;
  background:var(--clr-surface,#fff);
  border:1px solid #f2d7de;
  border-radius:var(--r-12,12px);
  box-shadow:var(--shadow-1,0 1px 8px rgba(36,20,26,.06));
  transition:transform .16s ease, box-shadow .22s ease;
}
.casino-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2,0 8px 24px rgba(36,20,26,.12));
}

.cc-media{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-12,12px);
  aspect-ratio:16/9; background:#f2eef0;
  border:1px solid #f2d7de;
}
.cc-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .25s ease, filter .25s ease;
  background:#f2eef0;
}
.casino-card:hover .cc-media img{ transform:scale(1.03); filter:saturate(1.02); }

.cc-title{ margin:2px 2px 0; font-size:clamp(1.02rem,.98rem + .4vw,1.16rem); line-height:1.25; }
.cc-title a{
  color:#3e1020; text-decoration:underline; text-underline-offset:2px;
  font-weight:900; letter-spacing:-.01em;
}
.cc-title a:hover{ color:var(--clr-primary,#8b1e3f); }
.cc-title a:focus-visible{ outline:none; box-shadow:var(--ring,0 0 0 3px rgba(139,30,63,.28)); border-radius:6px; }

.cc-facts{ margin:0; padding:0; list-style:none; }
.cc-facts--tiles{
grid-template-columns: 1fr;
}
@media (max-width:600px){ .cc-facts--tiles{ grid-template-columns:1fr; } }
.cc-facts li{
  display:grid; grid-template-rows:auto auto;
  padding:10px 12px;
  text-align: center;
  background:var(--clr-surface-2,#fff4f6);
  border:1px solid #f2d7de;
  border-radius:var(--r-10,10px);
}
.cc-facts .l{ font-size:.82rem; color:var(--clr-ink-2,#4a2b35); opacity:.75; }
.cc-facts .v{ margin-top:2px; font-weight:900; color:var(--clr-primary-700,#5d152c); }

.cc-facts--full{ display:grid; grid-template-columns:1fr; gap:8px; }

.cc-cta{ margin-top:auto; display:flex; justify-content:center; }
.casino-card .btn,
.casino-card .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  background:linear-gradient(135deg, var(--clr-accent,#e9b21a) 0%, #ffd878 100%);
  color:#2a0f17;
  border:none; border-radius:12px;
  padding:12px 22px;
  font-size:1.02rem; font-weight:900;
  text-decoration:none; cursor:pointer; outline:none;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
  transition:transform .16s ease, box-shadow .22s ease, filter .22s ease, background .3s ease;
}
.casino-card .btn:hover,
.casino-card .cta-btn:hover{ transform:translateY(-2px); filter:brightness(1.02); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.casino-card .btn:focus-visible,
.casino-card .cta-btn:focus-visible{ box-shadow:0 0 0 3px rgba(233,178,26,.45), 0 12px 28px rgba(0,0,0,.25); }

.cc-title a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}