/* ═══════════════════════════════════════════════════════════
   Nettikasinoot.fi – Modern Pro Theme 2026
   ═══════════════════════════════════════════════════════════ */

/* ===== SELF-HOSTED INTER VARIABLE FONT =====
   Inter Variable -fontti hostataan paikallisesti, jotta vältytään
   ulkoiselta DNS-lookupilta ja TLS-handshakelta fonts.googleapis.com /
   fonts.gstatic.com -domaineihin. Yksi variable-tiedosto kattaa kaikki
   painot (400–800), latin-ext lataa vain jos selain tarvitsee niitä
   glyyfejä (suomi pärjää 'latin' -subsettilla). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Backgrounds – layered depth system */
  --bg-primary: #09090b;
  --bg-secondary: #111113;
  --bg-card: #16161a;
  --bg-card-hover: #1c1c21;
  --bg-elevated: #1e1e23;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #f0f0f2;
  --text-muted: #c8c8d0;

  /* Accent – refined gold & pink */
  --yellow: #f5c518;
  --yellow-light: #fad94a;
  --yellow-dark: #d4a90e;
  --yellow-glow: rgba(245,197,24,.12);
  --pink: #ec4899;
  --pink-light: #f472b6;
  --pink-dark: #db2777;
  --pink-glow: rgba(236,72,153,.1);
  --blue: #3b82f6;
  --blue-light: #60a5fa;
  --blue-dark: #2563eb;
  --blue-glow: rgba(59,130,246,.12);

  /* Brand: Beatz Fight Night */
  --beatz-green: #22ff37;
  --beatz-green-dark: #15c726;
  --beatz-green-glow: rgba(34,255,55,.18);

  /* Gradients */
  --gradient-cta: linear-gradient(135deg, var(--yellow) 0%, var(--pink) 100%);
  --gradient-cta-hover: linear-gradient(135deg, var(--yellow-light) 0%, var(--pink-light) 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(245,197,24,.06) 0%, rgba(236,72,153,.04) 100%);
  --gradient-border: linear-gradient(135deg, rgba(245,197,24,.3) 0%, rgba(236,72,153,.2) 100%);

  /* Borders */
  --border-color: rgba(255,255,255,.06);
  --border-hover: rgba(255,255,255,.12);

  /* Radii */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 4px 12px rgba(0,0,0,.25);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.4);
  --shadow-glow: 0 0 40px rgba(245,197,24,.08);

  /* Layout */
  --max-width: 1200px;
  --header-height: 64px;
  --content-width: 1000px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --duration: .2s;
  --duration-md: .3s;

  /* Typography */
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px;
  min-height:100vh;min-height:100dvh;
}

body{
  font-family:var(--font-main);
  /* ===== TAUSTA =====
     Kuviointi näkyy vain sisältöalueen (max-width 1200px) ULKOPUOLELLA.
     Käytetään mask-tekniikkaa jossa keski-1200px peitetään bg-primary -värillä
     terävin reunoin (ei häivytystä). */
  background-color:var(--bg-primary);
  background-image:
    linear-gradient(
      to right,
      transparent 0,
      transparent calc(50% - 600px),
      var(--bg-primary) calc(50% - 600px),
      var(--bg-primary) calc(50% + 600px),
      transparent calc(50% + 600px),
      transparent 100%
    ),
    url('/img/bg-pattern.svg');
  background-size:auto, 640px 640px;
  background-repeat:no-repeat, repeat;
  background-attachment:fixed, fixed;
  background-position:center center, center center;
  color:var(--text-primary);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  min-height:100vh;min-height:100dvh;
}
@media (prefers-reduced-motion:reduce){
  body{background-attachment:scroll, scroll}
}

img{max-width:100%;height:auto;display:block}
a{color:var(--yellow);text-decoration:none;transition:color var(--duration) var(--ease)}
a:hover{color:var(--yellow-light)}

/* Content links: underline for WCAG link distinction */
.content-area a{
  text-decoration:underline;
  text-decoration-color:rgba(245,197,24,.35);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-skip-ink:auto;
}
.content-area a:hover{
  text-decoration-color:var(--yellow-light);
}
.content-area .review-share-btn,
.content-area .review-share-btn:hover{
  text-decoration:none;
}
.content-area .payment-logo-link,
.content-area .payment-logo-link:hover{
  text-decoration:none;
}
ul,ol{list-style:none}
/* Korostetut listamerkit: keltainen bullet/numero kaikkialla, missä lista on näkyvä */
li::marker{color:var(--yellow);font-weight:700}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}
input,textarea{font-family:inherit;font-size:inherit}

::selection{background:rgba(245,197,24,.2);color:var(--text-primary)}

/* ===== UTILITY ===== */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.gradient-text{background:var(--gradient-cta);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== HEADER ===== */
.header{
  position:sticky;top:0;z-index:1000;
  height:var(--header-height);
  border-bottom:1px solid var(--border-color);
}
.header::before{
  content:'';position:absolute;inset:0;
  background:rgba(9,9,11,.92);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  z-index:-1;
}
.header .container{display:flex;align-items:center;justify-content:space-between;height:100%;position:relative}

.logo{display:flex;align-items:center;flex-shrink:0;z-index:1002;position:relative}
.logo img{height:28px;width:auto;display:block}

/* ===== MAIN NAVIGATION ===== */
.main-nav{display:flex;align-items:center;margin-left:auto;margin-right:8px}
.nav-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav-item{position:relative}

/* Nav link wrapper for mobile dropdown toggle */
.nav-link-wrapper{
  display:flex;align-items:center;position:relative;
}
.has-dropdown .nav-link-wrapper{width:100%}

/* Dropdown toggle button - hidden on desktop */
.dropdown-toggle{
  display:none;
  align-items:center;justify-content:center;
  padding:8px 10px;
  background:none;border:none;
  color:var(--text-muted);
  cursor:pointer;
  border-radius:var(--radius-xs);
  transition:all .2s var(--ease);
  flex-shrink:0;
  margin-left:auto;
}
.dropdown-toggle:hover{
  color:var(--text-primary);
  background:rgba(255,255,255,.04);
}
.dropdown-toggle svg{
  width:14px;height:14px;
  opacity:.5;
  transition:all .2s var(--ease);
  stroke:currentColor;
}
.dropdown-toggle:hover svg{
  opacity:.8;
  color:var(--yellow);
}

.nav-link{
  display:flex;align-items:center;gap:5px;
  padding:8px 14px;
  font-size:.85rem;font-weight:500;letter-spacing:.01em;
  color:var(--text-muted);
  border-radius:var(--radius-xs);
  transition:all .2s var(--ease);
  white-space:nowrap;text-decoration:none;cursor:pointer;
  background:none;border:none;font-family:inherit;
  position:relative;
}
.nav-link::before{
  content:'';position:absolute;inset:0;
  background:var(--gradient-subtle);
  border-radius:var(--radius-xs);
  opacity:0;transition:opacity .2s var(--ease);
  z-index:-1;
}
.nav-link:hover{
  color:var(--text-primary);
  transform:translateY(-1px);
}
.nav-link:hover::before{opacity:1}
.nav-link svg{
  width:12px;height:12px;
  opacity:.5;
  transition:all .2s var(--ease);
  flex-shrink:0;
  stroke:currentColor;
}
.nav-link:hover svg{
  opacity:.8;
  color:var(--yellow);
}
.nav-link:active{
  transform:translateY(0);
}

/* Dropdown – Desktop */
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;
  min-width:240px;
  background:var(--bg-elevated);
  border:1px solid var(--border-hover);
  border-radius:var(--radius-lg);
  padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);
  z-index:1010;list-style:none;margin:0;
  transform:translateY(-8px);
}
.dropdown::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gradient-border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  opacity:.6;
}
.dropdown::after{content:'';position:absolute;top:-8px;left:0;right:0;height:8px;background:transparent}
.dropdown li{margin:0;list-style:none}
.dropdown a{
  display:block;padding:10px 14px;
  font-size:.85rem;font-weight:450;
  color:var(--text-muted);
  border-radius:var(--radius-xs);
  transition:all .15s var(--ease);
  text-decoration:none;
  position:relative;
}
.dropdown a::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;
  background:var(--gradient-cta);
  border-radius:0 2px 2px 0;
  transition:height .2s var(--ease);
}
.dropdown a:hover{
  background:rgba(255,255,255,.06);
  color:var(--text-primary);
  padding-left:18px;
  transform:translateX(2px);
}
.dropdown a:hover::before{height:60%}

/* Desktop hover */
@media(min-width:1025px){
  .nav-item.has-dropdown:hover>.dropdown{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(0);
  }
  .nav-item.has-dropdown:hover>.nav-link{
    color:var(--text-primary);
  }
  .nav-item.has-dropdown:hover>.nav-link svg{
    opacity:.9;
    color:var(--yellow);
  }
}

/* ===== HEADER RIGHT ===== */
.header-right{display:flex;align-items:center;gap:2px;flex-shrink:0;z-index:1002;position:relative}

/* ===== SEARCH ===== */
.search-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-xs);
  background:none;border:none;cursor:pointer;
  transition:background var(--duration) var(--ease);color:inherit;padding:0;
}
.search-btn:hover{background:rgba(255,255,255,.06)}
.search-btn svg{width:17px;height:17px;stroke:var(--text-muted);transition:stroke var(--duration) var(--ease)}
.search-btn:hover svg{stroke:var(--text-primary)}

.search-overlay{
  position:fixed;inset:0;
  background:rgba(9,9,11,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  z-index:2000;display:flex;align-items:flex-start;justify-content:center;
  padding:120px 24px 0;
  opacity:0;visibility:hidden;transition:all var(--duration-md) var(--ease);
}
.search-overlay.active{opacity:1;visibility:visible}
.search-box{width:100%;max-width:560px;position:relative;transform:translateY(-12px);transition:transform var(--duration-md) var(--ease)}
.search-overlay.active .search-box{transform:translateY(0)}
.search-input{
  width:100%;padding:16px 22px 16px 50px;
  font-size:1rem;font-weight:400;
  background:var(--bg-card);
  border:1px solid var(--border-hover);
  border-radius:var(--radius);
  color:var(--text-primary);outline:none;
  transition:border-color var(--duration) var(--ease);
  box-shadow:var(--shadow-lg);
}
.search-input:focus{border-color:rgba(245,197,24,.4)}
.search-input::placeholder{color:var(--text-muted)}
.search-icon-inner{position:absolute;left:16px;top:26px;transform:translateY(-50%);width:20px;height:20px;stroke:var(--text-muted);pointer-events:none}
.search-close{position:absolute;right:14px;top:26px;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);transition:background var(--duration) var(--ease)}
.search-close:hover{background:rgba(255,255,255,.06)}
.search-results{margin-top:8px;background:var(--bg-card);border:1px solid var(--border-hover);border-radius:var(--radius);max-height:360px;overflow-y:auto;display:none;box-shadow:var(--shadow-lg)}
.search-results.has-results{display:block}
.search-result-item{display:block;padding:12px 18px;border-bottom:1px solid var(--border-color);transition:background var(--duration) var(--ease)}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:rgba(255,255,255,.04)}
.search-result-item .result-title{font-weight:600;font-size:.9rem;margin-bottom:2px}
.search-result-item .result-url{font-size:.75rem;color:var(--text-muted)}

/* ===== MENU BUTTON (hamburger) ===== */
.menu-btn{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  width:40px;height:40px;background:none;border:none;cursor:pointer;
  border-radius:var(--radius-xs);transition:background var(--duration) var(--ease);
  padding:0;z-index:1002;color:inherit;
}
.menu-btn:hover{background:rgba(255,255,255,.06)}
.menu-btn span{display:block;width:20px;height:1.5px;background:var(--text-primary);border-radius:2px;transition:all var(--duration-md) var(--ease)}
.menu-btn span+span{margin-top:5px}
.menu-btn.active span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.menu-btn.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-btn.active span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}

/* ===== MOBILE ===== */
@media(max-width:1024px){
  .menu-btn{display:flex}

  .main-nav{
    position:absolute;
    top:100%;
    left:0;right:0;
    background:var(--bg-secondary);
    margin:0;padding:0;
    max-height:0;overflow:hidden;
    transition:max-height .3s var(--ease),padding .3s var(--ease);
    z-index:1001;flex:none;
    border-bottom:none;
    box-shadow:none;
    visibility:hidden;
    pointer-events:none;
  }
  .main-nav.open{
    max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:8px 0;
    border-bottom:1px solid var(--border-color);
    box-shadow:0 8px 32px rgba(0,0,0,.4);
    visibility:visible;
    pointer-events:auto;
  }

  .nav-list{flex-direction:column;gap:0;width:100%;padding:0}
  .nav-item{border-bottom:none}

  .nav-link-wrapper{
    display:flex;align-items:center;width:100%;
  }
  .nav-link{
    padding:12px 20px;font-size:.9rem;font-weight:500;
    color:var(--text-primary);border-radius:0;
    flex:1;width:auto;
  }
  .nav-link:hover,.nav-link:active{background:rgba(255,255,255,.04);color:var(--text-primary)}
  .nav-link svg{width:14px;height:14px;opacity:.35}
  
  /* Show dropdown toggle on mobile */
  .dropdown-toggle{
    display:flex;
    padding:12px 16px;
    color:var(--text-muted);
  }
  .dropdown-toggle:hover{
    background:rgba(255,255,255,.04);
    color:var(--text-primary);
  }
  .dropdown-toggle svg{
    width:14px;height:14px;
    opacity:.5;
    transition:transform .2s var(--ease);
  }
  .nav-item.open .dropdown-toggle{
    color:var(--yellow);
  }
  .nav-item.open .dropdown-toggle svg{
    transform:rotate(180deg);
    opacity:.8;
  }

  .dropdown{
    position:static;transform:none;
    opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;border:none;
    background:rgba(255,255,255,.02);
    min-width:auto;border-radius:0;
    max-height:0;overflow:hidden;
    transition:max-height .25s var(--ease);
    padding:0;margin:0;
  }
  .nav-item.open>.dropdown{max-height:500px;padding:2px 0 6px}

  .dropdown a{
    display:block;
    padding:10px 20px 10px 36px !important;
    font-size:.85rem;
    color:var(--text-muted);
    border-radius:0;
    transform:none !important;
    transition:background .15s var(--ease),color .15s var(--ease);
    text-align:left;
    width:100%;
    box-sizing:border-box;
  }
  .dropdown a::before{display:none !important}
  .dropdown a:hover,.dropdown a:active{
    background:rgba(255,255,255,.04);
    color:var(--text-primary);
    padding-left:36px !important;
    padding-right:20px !important;
    transform:none !important;
  }

  .search-overlay{padding:80px 20px 0}
}

@media(max-width:380px){
  .logo img{height:24px}
  .nav-link{font-size:.85rem;padding:11px 16px}
  .dropdown a{padding:9px 16px 9px 32px;font-size:.82rem}
}

/* ===== BREADCRUMBS ===== */
.breadcrumbs{
  padding:18px 0 0;
  font-size:.85rem;
  color:var(--text-muted);
}
.breadcrumbs ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
}
.breadcrumbs li{
  display:inline-flex;
  align-items:center;
  min-width:0;
}
.breadcrumbs li + li::before{
  content:"›";
  margin:0 8px;
  color:var(--text-muted);
  opacity:.7;
  font-size:.95em;
  line-height:1;
}
.breadcrumbs a{
  color:var(--text-secondary);
  text-decoration:none;
  transition:color .15s ease;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus{
  color:var(--yellow);
  text-decoration:underline;
}
.breadcrumbs [aria-current="page"]{
  color:var(--text-primary);
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:60vw;
}
@media (max-width:560px){
  .breadcrumbs{font-size:.8rem;padding:14px 0 0;}
  .breadcrumbs li + li::before{margin:0 6px;}
  .breadcrumbs [aria-current="page"]{max-width:50vw;}
}

/* ===== HERO ===== */
.hero{
  padding:56px 0 40px;
  text-align:center;
}
.hero h1{
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:800;
  line-height:1.15;
  margin-bottom:14px;
  letter-spacing:-.03em;
  color:var(--text-primary);
}
.hero-icon{width:100px;height:100px;margin:0 auto 20px;border-radius:var(--radius);object-fit:contain}
.hero .subtitle,
.hero .hero-sub{
  font-size:1rem;
  color:var(--text-secondary);
  max-width:560px;
  margin:0 auto;
  line-height:1.6;
  font-weight:400;
}

/* Ingressi heti hero-h1:n alla; authorbox / kuva / TOC sen jälkeen */
.article-lead{
  margin-bottom:22px;
}
.article-lead p{
  margin-bottom:0;
  color:var(--text-secondary);
  line-height:1.75;
  font-size:.925rem;
}
.article-lead p + p{
  margin-top:.75em;
}
.page-info-legal .article-lead{
  margin-bottom:20px;
}

/* ===== ARTICLE TOP (author + TOC + image) ===== */
.article-top{
  display:flex;align-items:flex-start;gap:28px;
  margin-bottom:28px;
}
.article-top-left{flex:1;min-width:0}
.article-top-image{
  flex-shrink:0;
  width:250px;height:250px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border-color);
  background:var(--bg-card);
}
.article-top-image img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Kategoria-sivujen OG-kuva: koko kuva näkyviin, kompakti vaakasuora kehys TOC:n vieressä */
.article-top-image--og{
  width:272px;
  height:auto;
  aspect-ratio:1200/630;
  background:linear-gradient(145deg,var(--bg-card) 0%,rgba(255,255,255,.03) 100%);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  border:1px solid var(--yellow);
}
.article-top-image--og img{
  object-fit:contain;
  border-radius:calc(var(--radius-lg) - 1px);
}
.article-top-aside{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  width:272px;
}
.article-top-aside .author-affiliate-disclosure{
  margin:0;
  width:100%;
}
.article-top-aside .author-affiliate-disclosure-summary{
  width:100%;
  justify-content:center;
  box-sizing:border-box;
}
.article-top-image-wide{
  width:320px;
  height:auto;
}
.article-top-image-wide img{
  height:auto;
  object-fit:contain;
}
/* Artikkelit (/artikkelit/…): hero on figure.content-img — täsmälleen samat säännöt kuin leipätekstin kuvilla */
.article-top.article-top--image-below{
  flex-direction:column;
  align-items:stretch;
  gap:20px;
}
.article-top.article-top--image-below .article-top-left{
  width:100%;
  max-width:100%;
}
.article-top.article-top--image-below > .content-img.article-top-figure{
  margin:0;
  width:100%;
  max-width:100%;
}

/* Bonuskoodisivu: TOC + kaupallinen ilmoitus, logo on widgetissä */
.article-top--bonus-code{
  display:block;
}
.article-top--bonus-code .toc{margin:0}
.article-top--bonus-code .author-affiliate-disclosure{
  margin:10px 0 0;
}

@media(max-width:768px){
  .article-top{flex-direction:column;gap:20px}
  .article-top-image{
    width:100%;height:auto;max-width:250px;
    align-self:center;
  }
  .article-top-image img{height:auto}
  .article-top-image--og{
    max-width:min(100%,360px);
    width:100%;
    align-self:center;
  }
  .article-top-image--og img{object-fit:contain}
  .article-top-aside{
    max-width:min(100%,360px);
    width:100%;
    align-self:center;
  }
  .article-top-image-wide{
    max-width:400px;
  }
}

/* ===== AUTHOR BOX ===== */
.author-box{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  margin-bottom:16px;
}
.author-avatar{
  width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:2px solid rgba(245,197,24,.3);
  box-shadow:0 0 20px rgba(245,197,24,.08);
}
.author-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.author-info{flex:1;min-width:0}
.author-name{font-weight:700;font-size:.9rem;margin-bottom:1px;letter-spacing:-.01em}
.author-meta{font-size:.75rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:10px}
.author-meta span{display:flex;align-items:center;gap:4px}
.author-meta svg{width:13px;height:13px;opacity:.5}
.author-reading-time svg{width:13px;height:13px;opacity:.5;flex-shrink:0}
.author-linkedin svg{flex-shrink:0;opacity:1}

/* Authorbox: kaupallisuus / affiliate -infopainike */
.author-affiliate-disclosure{
  margin:0 0 16px;
  max-width:100%;
}
.author-affiliate-disclosure-summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  list-style:none;
  cursor:pointer;
  padding:6px 10px;
  margin:0;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--text-muted);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-color);
  border-radius:var(--radius-xs);
  transition:background var(--duration) var(--ease),border-color var(--duration) var(--ease),color var(--duration) var(--ease);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.author-affiliate-disclosure-summary::-webkit-details-marker{display:none}
.author-affiliate-disclosure-summary::marker{content:""}
.author-affiliate-disclosure-summary:hover{
  color:var(--text-secondary);
  border-color:var(--border-hover);
  background:rgba(245,197,24,.06);
}
.author-affiliate-disclosure-summary:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}
.author-affiliate-disclosure-icon{
  flex-shrink:0;
  opacity:.75;
  stroke:var(--text-muted);
}
.author-affiliate-disclosure[open] .author-affiliate-disclosure-summary{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom-color:transparent;
}
.author-affiliate-disclosure-body{
  padding:10px 12px 12px;
  margin:0;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  border-top:none;
  border-radius:0 0 var(--radius-xs) var(--radius-xs);
}
.author-affiliate-disclosure-body p{
  margin:0;
  font-size:.8rem;
  line-height:1.55;
  color:var(--text-secondary);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
}
.author-affiliate-disclosure-body a{
  color:var(--yellow);
  text-decoration:underline;
  text-underline-offset:2px;
}
.author-affiliate-disclosure-body a:hover{color:var(--yellow-light)}

/* Vastuullinen pelaaminen -bannerikuva (authorbox ↔ sisällysluettelo) */
.article-top-responsible-banner{
  margin:0 0 16px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border-color);
  background:var(--bg-secondary);
  line-height:0;
}
.article-top-responsible-banner img{
  width:100%;
  height:auto;
  display:block;
  vertical-align:top;
  object-fit:cover;
}

/* Tietoa meistä – testaajan widget (kuva + rooli) */
.tester-widget{
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:22px 24px;
  margin-bottom:20px;
  max-width:100%;
  background:
    linear-gradient(145deg, rgba(245,197,24,.1) 0%, rgba(236,72,153,.06) 45%, var(--bg-card) 100%);
  border:1px solid rgba(245,197,24,.18);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
}
.tester-widget::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:var(--gradient-cta);
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  opacity:.95;
}
.tester-widget-photo{
  flex-shrink:0;
  width:112px;height:112px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(245,197,24,.35);
  box-shadow:0 8px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
  background:var(--bg-elevated);
}
.tester-widget-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tester-widget-body{min-width:0;flex:1;padding-left:2px}
.tester-widget-eyebrow{
  margin:0 0 6px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--yellow);
  opacity:.95;
}
.tester-widget-name{
  margin:0 0 6px;
  font-size:clamp(1.15rem,2.8vw,1.35rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--text-primary);
}
.tester-widget-role{
  margin:0 0 12px;
  font-size:.88rem;
  color:var(--text-secondary);
  line-height:1.45;
}
.tester-widget-desc{
  margin:0 0 12px;
  font-size:.9rem;
  line-height:1.65;
  color:var(--text-secondary);
}
.tester-widget-desc strong{color:var(--text-primary);font-weight:600}
.tester-widget-updated{
  margin:0;
  font-size:.75rem;
  color:var(--text-muted);
}
/* Sivun viimeisin päivitys (esim. Tietoa meistä) – widgetin ulkopuolella */
.page-updated-note{
  margin:-8px 0 20px;
  font-size:.75rem;
  color:var(--text-muted);
}
.content-area h2 + .tester-widget{
  margin-top:14px;
}
.content-area .tester-widget{
  margin-bottom:24px;
}
@media(max-width:560px){
  .tester-widget{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:20px 18px;
  }
  .tester-widget-body{padding-left:0}
  .tester-widget-photo{width:96px;height:96px}
}

/* Parhaat nettikasinot – "Mikä on paras…" -nostolaatikko */
.paras-nosto-banner{
  margin:28px 0 36px;
  padding:22px 24px;
  background:
    linear-gradient(145deg, rgba(245,197,24,.08) 0%, rgba(236,72,153,.05) 38%, var(--bg-card) 72%);
  border:1px solid rgba(245,197,24,.22);
  border-radius:var(--radius-lg);
  box-shadow:0 10px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
}
.paras-nosto-banner::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--gradient-cta);
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  opacity:.95;
}
.content-area .paras-nosto-banner h2{
  margin:0 0 6px;
  padding-left:8px;
  font-size:clamp(1.2rem,2.6vw,1.45rem);
  letter-spacing:-.02em;
  border-bottom:none;
}
.paras-nosto-lead{
  margin:0 0 14px;
  padding-left:8px;
  color:var(--text-secondary);
  font-size:.95rem;
}
.paras-nosto-list{
  list-style:none;margin:0;padding:0 0 0 8px;
  display:flex;flex-direction:column;gap:0;
}
.paras-nosto-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 12px;
  padding:11px 0;
  border-bottom:1px solid var(--border-color);
  font-size:.9rem;
  line-height:1.5;
  color:var(--text-secondary);
}
.paras-nosto-list li:last-child{border-bottom:none;padding-bottom:2px}
.paras-nosto-q{flex:1;min-width:min(100%,220px);color:var(--text-secondary)}
.paras-nosto-link{
  font-weight:700;
  color:var(--yellow);
  text-decoration:none;
  white-space:nowrap;
}
.paras-nosto-link:hover{color:var(--yellow-light);text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){
  .paras-nosto-banner{padding:18px 16px}
  .paras-nosto-list{padding-left:4px}
}

/* ===== TABLE OF CONTENTS ===== */
.toc{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  margin-bottom:36px;
  overflow:hidden;
}
.toc-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;cursor:pointer;
  font-weight:600;font-size:.875rem;
  transition:background var(--duration) var(--ease);
  user-select:none;
  color:var(--text-secondary);
}
.toc-header:hover{background:rgba(255,255,255,.03)}
.toc-header svg{width:18px;height:18px;transition:transform var(--duration-md) var(--ease);flex-shrink:0;opacity:.4}
.toc-header[aria-expanded="true"] svg{transform:rotate(180deg)}
.toc-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
/* Pitkät sisällysluettelot (esim. uudet nettikasinot): älä leikkaa 2000px:ssä — vieritä paneelin sisällä */
.toc-body.open{
  max-height:min(85vh, 6000px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.toc-list{padding:0 20px 16px}
.toc-list li{border-bottom:1px solid var(--border-color)}
.toc-list li:last-child{border-bottom:none}
.toc-list a{display:block;padding:8px 0;color:var(--text-secondary);font-size:.85rem;transition:color var(--duration) var(--ease);font-weight:450}
.toc-list a:hover{color:var(--yellow)}
.toc-list .toc-h2{padding-left:0}
.toc-list .toc-h3{padding-left:16px;font-size:.8rem;color:var(--text-muted)}

/* ===== CONTENT AREA ===== */
.content-area{max-width:var(--content-width);margin:0 auto}
.content-area h2{
  font-size:clamp(1.25rem,2.8vw,1.65rem);
  font-weight:700;
  margin:48px 0 14px;
  line-height:1.25;
  letter-spacing:-.02em;
  scroll-margin-top:calc(var(--header-height) + 20px);
}
.content-area h3{
  font-size:clamp(1.05rem,2.2vw,1.3rem);
  font-weight:600;
  margin:32px 0 10px;
  line-height:1.3;
  letter-spacing:-.01em;
  scroll-margin-top:calc(var(--header-height) + 20px);
}
.content-area p{margin-bottom:16px;color:var(--text-secondary);line-height:1.75;font-size:.925rem}
.content-area ul,.content-area ol{margin-bottom:16px;padding-left:22px}
.content-area ul{list-style:disc}
.content-area ol{list-style:decimal}
.content-area li{margin-bottom:8px;color:var(--text-secondary);font-size:.925rem;line-height:1.7}

/* ===== INFO / LEGAL PAGES (Tietoa meistä, Käyttöehdot, Tietosuojaseloste) ===== */
.page-info-legal .hero{
  position:relative;
  padding:48px 12px 36px;
  margin-bottom:6px;
}
.page-info-legal .hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(100%,720px);
  height:140px;
  background:radial-gradient(ellipse 70% 90% at 50% 0%, rgba(245,197,24,.16) 0%, rgba(236,72,153,.06) 35%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.page-info-legal .hero h1{
  position:relative;
  z-index:1;
  text-shadow:0 2px 40px rgba(245,197,24,.14);
}
.page-info-legal .hero .subtitle{
  position:relative;
  z-index:1;
}
.page-info-legal .hero::after{
  content:"";
  display:block;
  width:min(180px,48%);
  height:3px;
  margin:22px auto 0;
  border-radius:4px;
  background:var(--gradient-cta);
  opacity:.92;
  box-shadow:0 0 28px rgba(245,197,24,.28);
  position:relative;
  z-index:1;
}
.page-info-legal .content-area{
  padding:30px 28px 40px;
  background:
    linear-gradient(168deg, rgba(245,197,24,.07) 0%, rgba(236,72,153,.05) 36%, var(--bg-card) 62%);
  border:1px solid rgba(245,197,24,.16);
  border-radius:var(--radius-lg);
  box-shadow:
    0 24px 64px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.page-info-legal .article-top{
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.page-info-legal .toc{
  border-color:rgba(245,197,24,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(22,22,26,.85) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.page-info-legal .toc-header{
  color:var(--text-primary);
  font-weight:650;
  letter-spacing:-.01em;
}
.page-info-legal .toc-list a{
  font-weight:480;
}
.page-info-legal .content-area h2{
  position:relative;
  padding-left:18px;
  margin-left:-6px;
}
.page-info-legal .content-area h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.28em;
  bottom:.28em;
  width:3px;
  border-radius:3px;
  background:var(--gradient-cta);
  box-shadow:0 0 16px rgba(245,197,24,.2);
}
.page-info-legal .content-area h3{
  padding-left:14px;
  margin-left:-4px;
  border-left:2px solid rgba(245,197,24,.38);
}
.page-info-legal .content-area .table-wrap{
  border-radius:var(--radius);
  border:1px solid rgba(245,197,24,.1);
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.2);
}
.page-info-legal .content-area .table-wrap table{
  background:rgba(9,9,11,.35);
}
.page-info-legal .content-area hr{
  border:none;
  height:1px;
  margin:28px 0;
  background:linear-gradient(90deg, transparent, rgba(245,197,24,.35), rgba(236,72,153,.22), transparent);
  opacity:.9;
}
@media(max-width:640px){
  .page-info-legal .hero{
    padding:40px 8px 28px;
  }
  .page-info-legal .hero::before{
    height:100px;
  }
  .page-info-legal .content-area{
    padding:22px 18px 32px;
    border-radius:var(--radius);
  }
  .page-info-legal .content-area h2{
    margin-left:0;
    padding-left:14px;
  }
  .page-info-legal .content-area h3{
    margin-left:0;
    padding-left:12px;
  }
}

.content-placeholder{
  padding:40px;background:var(--bg-card);
  border:1px dashed var(--border-hover);border-radius:var(--radius);
  text-align:center;color:var(--text-muted);margin:24px 0;
  font-size:.9rem;
}

/* ===== CASINO LISTING ===== */
.casino-listing{margin:32px 0 48px}

/* Uusimmat kasinot -widget (sisältö, sama kortti kuin listauksessa; ei .casino-listing → suodattimet eivät koske) */
.newest-casinos-widget{margin:28px 0 36px}
.newest-casinos-widget-title{
  font-size:clamp(1.15rem,2.5vw,1.45rem);
  font-weight:700;margin:0 0 18px;line-height:1.25;
}
/* Ulkoruudukko: vähintään ~300px / solu; stretch = samankorkuiset kortit samalla rivillä */
.newest-casinos-widget-grid{
  display:grid;
  gap:16px;
  align-items:stretch;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.newest-casinos-widget-grid > .casino-card{
  min-width:0;
  max-width:100%;
  margin-bottom:0;
  height:100%;
  min-height:100%;
  box-sizing:border-box;
}
/*
  Widget-konteksti: kapea kortti (~300px).
  Sama flex-malli kuin listauksessa, tiiviimmillä mitoilla.
*/
.newest-casinos-widget .casino-card{
  padding:0;
}
.newest-casinos-widget .casino-card-body{
  grid-template-columns:64px minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  gap:10px 12px;
  padding:12px;
}
.newest-casinos-widget .casino-logo{
  grid-column:1;
  grid-row:2;
  width:64px;height:40px;border-radius:var(--radius-xs);
}
.newest-casinos-widget .casino-info{
  grid-column:2;
  grid-row:1 / 3;
  display:flex;flex-direction:column;gap:8px;
}
.newest-casinos-widget .casino-head{padding-right:0}
.newest-casinos-widget .casino-name,
.newest-casinos-widget .casino-info h3{
  font-size:.95rem;line-height:1.2;
}
.newest-casinos-widget .casino-bonus{font-size:.88rem}
.newest-casinos-widget .casino-bonus-row{padding:8px 10px}
.newest-casinos-widget .casino-card .compare-toggle{
  display:none; /* widgetissä vertailu ei ole relevantti */
}
.newest-casinos-widget .casino-action{
  grid-column:1/-1;
  grid-row:3;
  margin-top:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:8px;
  border-top:1px solid var(--border-color);
}
.newest-casinos-widget .btn-casino{padding:11px 12px;font-size:.84rem;width:100%}
.newest-casinos-widget .btn-casino-review{width:100%}
.newest-casinos-widget .casino-ev-section{
  margin:0;
  padding:10px 12px 12px;
}
@media(max-width:400px){
  .newest-casinos-widget .casino-card-body{padding:8px 10px 10px}
  .newest-casinos-widget .casino-logo{width:54px;height:34px}
}

.casino-listing-header{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:12px;gap:12px;flex-wrap:wrap;
}
.casino-listing-intro{
  margin:-4px 0 12px;font-size:.95rem;line-height:1.55;color:var(--text-secondary);
}
.casino-listing-intro p{margin:0 0 10px;}
.casino-listing-intro p:last-child{margin-bottom:0;}
.casino-listing-disclaimer{
  margin:-4px 0 12px;padding:10px 14px;
  font-size:.85rem;color:var(--text-secondary);line-height:1.5;
  background:rgba(245,197,24,.08);border:1px solid var(--yellow);border-radius:var(--radius-sm);
}

/* ── Casino Filters ── */
.casino-filters{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:14px;padding:10px 14px;
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
}

/* Search */
.cf-search{
  display:flex;align-items:center;gap:6px;
  background:var(--bg-secondary);border:1px solid var(--border-color);
  border-radius:var(--radius-xs);padding:6px 10px;flex:1 1 180px;min-width:140px;max-width:280px;
  transition:border-color var(--duration) var(--ease);
}
.cf-search:focus-within{border-color:var(--yellow)}
.cf-search svg{flex-shrink:0;color:var(--text-muted)}
.cf-search input{
  background:none;border:none;outline:none;color:var(--text-primary);
  font-size:.78rem;width:100%;font-family:inherit;
}
.cf-search input::placeholder{color:var(--text-muted);opacity:.7}

/* Dropdown button */
.cf-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;background:var(--bg-secondary);
  border:1px solid var(--border-color);border-radius:var(--radius-xs);
  color:var(--text-secondary);font-size:.75rem;font-weight:500;
  cursor:pointer;white-space:nowrap;transition:all var(--duration) var(--ease);
  font-family:inherit;
}
.cf-btn:hover,.cf-btn.active{border-color:var(--yellow);color:var(--yellow)}
.cf-btn svg{flex-shrink:0}

/* Dropdown wrapper */
.cf-dropdown-wrap{position:relative}

/* Dropdown panel */
.cf-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:50;
  min-width:240px;padding:12px 14px;
  background:var(--bg-card);border:1px solid var(--border-hover);
  border-radius:var(--radius-sm);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.cf-dropdown.open{display:block}

/* Bonus slider panel */
.cf-slider-group{margin-bottom:16px}
.cf-slider-group:last-child{margin-bottom:0}
.cf-slider-group label{
  display:block;font-size:.72rem;font-weight:600;color:var(--text-secondary);
  margin-bottom:10px;
}
.cf-slider-group label span{color:var(--yellow);font-weight:700}

.cf-range-wrap{
  position:relative;width:100%;height:28px;
}
.cf-range-track{
  position:absolute;top:12px;left:0;right:0;height:4px;
  background:var(--bg-secondary);border-radius:2px;
}
.cf-range-fill{
  position:absolute;top:12px;height:4px;
  background:var(--yellow);border-radius:2px;
  pointer-events:none;
}
.cf-range-wrap input[type="range"]{
  -webkit-appearance:none;appearance:none;
  position:absolute;top:0;left:0;
  width:100%;height:28px;
  background:transparent;
  outline:none;cursor:pointer;
  pointer-events:none;
  margin:0;padding:0;
}
.cf-range-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--yellow);border:2px solid var(--bg-primary);
  cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.35);
  pointer-events:all;position:relative;z-index:2;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cf-range-wrap input[type="range"]::-webkit-slider-thumb:hover{
  transform:scale(1.2);box-shadow:0 2px 8px rgba(245,197,24,.4);
}
.cf-range-wrap input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:none;
  background:var(--yellow);border:2px solid var(--bg-primary);
  cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.35);
  pointer-events:all;position:relative;z-index:2;
}
.cf-range-wrap input[type="range"]::-moz-range-track{
  background:transparent;border:none;height:0;
}

/* Payment checkboxes */
.cf-payment-panel{max-height:280px;overflow-y:auto}
.cf-check-label{
  display:flex;align-items:center;gap:8px;
  padding:4px 0;font-size:.75rem;color:var(--text-secondary);
  cursor:pointer;transition:color var(--duration) var(--ease);
}
.cf-check-label:hover{color:var(--text-primary)}
.cf-check-label input[type="checkbox"]{
  accent-color:var(--yellow);width:15px;height:15px;cursor:pointer;
}

/* Category tag buttons */
.cf-tag{
  display:inline-flex;align-items:center;
  padding:6px 12px;background:transparent;
  border:1px solid var(--border-color);border-radius:var(--radius-pill);
  color:var(--text-muted);font-size:.72rem;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all var(--duration) var(--ease);
  font-family:inherit;letter-spacing:.01em;
}
.cf-tag:hover{border-color:var(--yellow);color:var(--yellow)}
.cf-tag.active{
  background:rgba(245,197,24,.1);border-color:var(--yellow);color:var(--yellow);
}

/* Risk filter — korostettu väriltään muista filttereistä erottuvaksi */
.cf-risk-btn{
  background:linear-gradient(135deg,rgba(244,114,182,.16),rgba(168,85,247,.16));
  border-color:rgba(244,114,182,.45);
  color:#f9a8d4;
  font-weight:600;
}
.cf-risk-btn:hover,.cf-risk-btn.active{
  border-color:#f472b6;
  color:#fce7f3;
  background:linear-gradient(135deg,rgba(244,114,182,.28),rgba(168,85,247,.28));
  box-shadow:0 0 0 3px rgba(244,114,182,.12);
}
.cf-risk-btn .cf-risk-caret{transition:transform .2s ease;opacity:.85}
.cf-risk-btn.active .cf-risk-caret{transform:rotate(180deg)}
.cf-risk-btn.has-selection{
  border-color:currentColor;
  background:linear-gradient(135deg,rgba(244,114,182,.22),rgba(168,85,247,.22));
}
.cf-risk-btn.has-selection[data-risk="low"]{color:#4ade80;border-color:rgba(74,222,128,.55);background:linear-gradient(135deg,rgba(74,222,128,.18),rgba(34,197,94,.14))}
.cf-risk-btn.has-selection[data-risk="medium"]{color:#fbbf24;border-color:rgba(251,191,36,.55);background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(245,158,11,.14))}
.cf-risk-btn.has-selection[data-risk="high"]{color:#f87171;border-color:rgba(248,113,113,.55);background:linear-gradient(135deg,rgba(248,113,113,.2),rgba(239,68,68,.14))}

.cf-risk-panel{min-width:200px;padding:6px}
.cf-risk-opt{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;background:transparent;border:none;border-radius:var(--radius-xs);
  color:var(--text-secondary);font-size:.82rem;font-weight:500;
  cursor:pointer;text-align:left;font-family:inherit;
  transition:background var(--duration) var(--ease),color var(--duration) var(--ease);
}
.cf-risk-opt:hover{background:var(--bg-elevated);color:var(--text-primary)}
.cf-risk-opt.is-active{background:var(--bg-elevated);color:var(--text-primary);font-weight:700}
.cf-risk-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(0,0,0,.25) inset;
}
.cf-risk-opt-low .cf-risk-dot{background:#4ade80}
.cf-risk-opt-medium .cf-risk-dot{background:#fbbf24}
.cf-risk-opt-high .cf-risk-dot{background:#f87171}
.cf-risk-opt.is-active::after{
  content:"✓";margin-left:auto;font-size:.9rem;color:var(--yellow);font-weight:700;
}

/* No results */
.casino-no-results{
  text-align:center;padding:32px 16px;
  color:var(--text-muted);font-size:.85rem;
}
.casino-no-results p{margin:0}

/* Filter card hidden by filter (not same as default hidden) */
.casino-card.cf-hidden{display:none !important}

/* Filters mobile */
@media(max-width:768px){
  .casino-filters{padding:8px 10px;gap:6px}
  .cf-search{max-width:100%;flex:1 1 100%;order:-1}
  .cf-dropdown{left:-10px;right:-10px;min-width:0;width:calc(100vw - 40px)}
  .cf-tag{font-size:.68rem;padding:5px 10px}
}
@media(max-width:480px){
  .cf-btn{font-size:.7rem;padding:5px 10px}
  .cf-tag{font-size:.65rem;padding:4px 8px}
}
.casino-listing-header h2{margin:0!important;padding:0}
.casino-count{
  font-size:.72rem;font-weight:500;color:var(--text-muted);
  background:var(--bg-card);padding:3px 12px;border-radius:var(--radius-pill);
  border:1px solid var(--border-color);white-space:nowrap;
  letter-spacing:.02em;text-transform:uppercase;
}

/* ───────────────────────────────────────────────────────────
   CASINO CARD — 2026 v2
   Selkeä pino: badge-rivi → body (logo | sisältö | CTA) → EV.
   Ei display:contents-hakkeja; rating nimen vieressä; EV ilman
   negatiivisia marginaaleja.
   ─────────────────────────────────────────────────────────── */
.casino-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color var(--duration) var(--ease),
             box-shadow var(--duration) var(--ease),
             transform var(--duration) var(--ease);
}
.casino-card:hover{
  border-color:var(--border-hover);
  box-shadow:0 8px 28px rgba(0,0,0,.32);
  transform:translateY(-1px);
}
.casino-card.casino-hidden{display:none}

.casino-card.casino-top{
  border-color:rgba(245,197,24,.22);
  background:
    linear-gradient(180deg, rgba(245,197,24,.06) 0%, transparent 28%),
    var(--bg-card);
}
.casino-card.casino-top:hover{
  border-color:rgba(245,197,24,.42);
  box-shadow:0 10px 32px rgba(245,197,24,.12);
}

/* Sijoitus logon sarakkeessa nimen tasolla, Vertaa CTA-sarakkeen yläpuolella */
.casino-rank{
  grid-column:1;grid-row:1;
  align-self:start;justify-self:start;
  margin-top:1px;
  font-size:.74rem;font-weight:800;
  min-width:32px;height:24px;padding:0 9px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  background:var(--bg-secondary);
  color:var(--text-muted);
  line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--border-color);
}
.casino-top .casino-rank{
  background:linear-gradient(135deg,rgba(245,197,24,.95),rgba(236,72,153,.85));
  color:#0a0a0d;
  border-color:rgba(245,197,24,.4);
  box-shadow:0 2px 10px rgba(245,197,24,.28);
}

/* Päärunko: logo | info | CTA — desktopissa Pelaa nyt = bonusrivin taso */
.casino-card-body{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 176px;
  grid-template-rows:auto auto auto;
  gap:10px 28px;
  padding:14px 16px 16px;
  align-items:start;
}
.casino-card-body > .compare-toggle{
  grid-column:3;grid-row:1;
  align-self:start;justify-self:end;
  height:26px;
}
.casino-head .casino-ev-badge{flex-shrink:0}
.casino-added{
  flex-shrink:0;margin-left:auto;
  display:inline-flex;align-items:stretch;
  border-radius:var(--radius-pill);
  background:rgba(236,72,153,.1);
  border:1px solid rgba(236,72,153,.35);
  box-shadow:0 0 14px rgba(236,72,153,.12);
  overflow:hidden;white-space:nowrap;line-height:1.2;
}
.casino-added-icon{
  display:inline-flex;align-items:center;padding:0 8px 0 9px;
  background:linear-gradient(135deg,var(--yellow),var(--pink));
  color:#0a0a0d;
}
.casino-added-text{
  padding:4px 11px 4px 8px;
  font-size:.72rem;font-weight:600;color:var(--text-muted);
}
.casino-added-text strong{color:var(--pink-light);font-weight:800}
@media(max-width:600px){
  .casino-added-icon{padding:0 6px 0 7px}
  .casino-added-text{padding:3px 8px 3px 6px;font-size:.65rem}
}
.casino-logo{
  grid-column:1;
  grid-row:2 / 4;
  width:88px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border-radius:var(--radius-sm);
  overflow:hidden;flex-shrink:0;
  transition:background var(--duration) var(--ease);
}
.casino-card:hover .casino-logo{background:rgba(255,255,255,.09)}
.casino-logo img{width:100%;height:100%;object-fit:contain;padding:5px}

.casino-info{
  grid-column:2;
  grid-row:1 / 4;
  min-width:0;
  display:grid;
  grid-template-rows:subgrid;
}
.casino-info-rest{
  display:flex;flex-direction:column;gap:10px;
  min-width:0;
}
.casino-head{
  display:flex;align-items:center;gap:10px 12px;flex-wrap:nowrap;
  min-height:26px;
  min-width:0;
}
.casino-name,
.casino-info h3{
  font-size:1.12rem;font-weight:700;margin:0;line-height:1.2;
  letter-spacing:-.015em;color:var(--text-primary);
  min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Bonus — kortin ydin */
.casino-bonus-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;
  background:linear-gradient(135deg, rgba(245,197,24,.08) 0%, rgba(236,72,153,.05) 100%);
  border:1px solid rgba(245,197,24,.18);
  border-radius:var(--radius-sm);
}
.casino-bonus{
  font-size:.98rem;font-weight:700;color:var(--yellow);line-height:1.3;
  letter-spacing:-.005em;flex:1 1 auto;min-width:0;
}
.casino-wager{
  font-size:.74rem;color:var(--text-secondary);
  background:rgba(0,0,0,.35);
  padding:4px 10px;border-radius:var(--radius-pill);
  white-space:nowrap;font-weight:600;
  border:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.casino-wager.no-wager{
  color:#4ade80;
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.3);
}
.casino-bonus-tag{
  font-size:.7rem;font-weight:700;
  padding:4px 10px;border-radius:var(--radius-pill);
  white-space:nowrap;letter-spacing:.02em;
  flex-shrink:0;line-height:1.1;
  display:inline-flex;align-items:center;
  cursor:help;
}
.casino-bonus-tag-nonsticky{
  background:rgba(245,197,24,.14);color:var(--yellow);
  border:1px solid rgba(245,197,24,.32);
}

.casino-bullets{
  list-style:none !important;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:4px 16px;
}
.casino-bullets li{
  list-style:none !important;
  font-size:.82rem;color:var(--text-secondary);
  position:relative;padding-left:20px;line-height:1.4;
}
.casino-bullets li::marker{content:none !important;display:none !important}
.casino-bullets li::before{
  content:'';position:absolute;left:0;top:50%;
  width:14px;height:14px;border-radius:50%;
  background:rgba(245,197,24,.14);
  transform:translateY(-50%);
}
.casino-bullets li::after{
  content:'';position:absolute;left:4px;top:50%;
  width:5px;height:3px;
  border-left:1.5px solid var(--yellow);
  border-bottom:1.5px solid var(--yellow);
  transform:translateY(-78%) rotate(-45deg);
}

.casino-meta-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  min-width:0;
}
.casino-payments{
  display:flex;gap:5px;flex-wrap:wrap;align-items:center;
}
.casino-payments::before{
  content:'Maksutavat';
  font-size:.68rem;font-weight:700;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;
  margin-right:4px;
}
.casino-pm{
  font-size:.72rem;font-weight:500;
  padding:3px 8px;border-radius:var(--radius-xs);
  background:rgba(255,255,255,.04);color:var(--text-secondary);
  border:1px solid rgba(255,255,255,.08);
}
.casino-pm-bank{
  font-weight:700;
  background:rgba(34,197,94,.15);color:#4ade80;
  border-color:rgba(34,197,94,.35);
}
.casino-categories{display:flex;gap:6px;flex-wrap:wrap}
.casino-category{
  font-size:.7rem;font-weight:700;
  padding:3px 10px;border-radius:var(--radius-pill);
  background:rgba(245,197,24,.1);color:var(--yellow);
  border:1px solid rgba(245,197,24,.28);
  letter-spacing:.02em;text-transform:uppercase;
}
.casino-category.casino-category-pika{
  background:rgba(56,189,248,.1);color:#38bdf8;
  border-color:rgba(56,189,248,.32);
}

/* CTA: desktopilla Pelaa nyt bonusrivin korkeudella */
.casino-action{
  grid-column:3;
  grid-row:2 / 4;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:12px;min-width:0;
  align-self:start;
}
@supports not (grid-template-rows:subgrid){
  .casino-info{
    display:flex;flex-direction:column;gap:10px;
    grid-row:1 / 4;
  }
  .casino-logo{grid-row:2}
  .casino-action{
    grid-row:1 / 4;
    margin-top:calc(1.12rem * 1.2 + 10px);
  }
}
.btn-casino{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:12px 16px;
  background:var(--gradient-cta);color:var(--bg-primary);
  font-weight:800;font-size:.9rem;
  border-radius:var(--radius-sm);border:none;cursor:pointer;
  transition:transform var(--duration) var(--ease),
             box-shadow var(--duration) var(--ease);
  white-space:nowrap;text-decoration:none;
  letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(245,197,24,.22);
}
.btn-casino:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(245,197,24,.32);
  color:var(--bg-primary);
}
.btn-casino-review{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;padding:8px 10px;
  background:rgba(255,255,255,.05);color:var(--text-secondary);
  font-weight:600;font-size:.74rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-xs);cursor:pointer;
  transition:all var(--duration) var(--ease);
  white-space:nowrap;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.btn-casino-review:hover{
  color:var(--yellow);
  border-color:rgba(245,197,24,.4);
  background:rgba(245,197,24,.05);
}
.casino-terms{
  font-size:.65rem;color:var(--text-muted);
  text-align:center;margin:0;line-height:1.3;
}

/* Closed CTA */
.btn-casino-closed,
.btn-cta-closed,
.compare-btn-closed,
.carousel-btn-closed{
  background:linear-gradient(180deg,#3a3a42 0%,#2a2a30 100%) !important;
  color:#a1a1aa !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  pointer-events:none;
  text-decoration:none;
}
.btn-casino-closed:hover,
.btn-cta-closed:hover{
  transform:none !important;
  box-shadow:none !important;
  color:#a1a1aa !important;
}

/* Show more */
.btn-show-more{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin:8px 0 4px;padding:14px 20px;
  background:linear-gradient(180deg, rgba(239,68,68,.12) 0%, rgba(239,68,68,.06) 100%);
  border:1px solid rgba(239,68,68,.35);
  border-radius:var(--radius);
  color:#fca5a5;font-weight:700;font-size:.92rem;
  letter-spacing:.01em;
  cursor:pointer;transition:all var(--duration) var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 10px rgba(239,68,68,.08);
}
.btn-show-more:hover{
  border-color:rgba(239,68,68,.65);
  background:linear-gradient(180deg, rgba(239,68,68,.20) 0%, rgba(239,68,68,.10) 100%);
  color:#fecaca;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 4px 16px rgba(239,68,68,.18);
  transform:translateY(-1px);
}
.btn-show-more svg{transition:transform .25s var(--ease)}
.btn-show-more.expanded svg{transform:rotate(180deg)}
.btn-show-more-count{
  font-weight:600;color:rgba(252,165,165,.7);
  font-size:.88em;letter-spacing:0;
}
.btn-show-more.is-loading{
  opacity:.65;pointer-events:none;
}
.mga-register-more > summary{list-style:none}
.mga-register-more > summary::-webkit-details-marker{display:none}
.mga-register-more .mga-less-label{display:none}
.mga-register-more[open] .mga-more-label{display:none}
.mga-register-more[open] .mga-less-label{display:inline}
.mga-register-more[open] > summary svg{transform:rotate(180deg)}

/* ── Tablet ≤900px ── */
@media(max-width:900px){
  .casino-card-body{
    grid-template-columns:72px minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    gap:10px 14px;
    padding:12px 14px 14px;
  }
  .casino-logo{
    grid-column:1;
    grid-row:2 / 4;
    width:72px;height:46px;
  }
  .casino-info{
    grid-column:2;
    grid-row:1 / 4;
  }
  .casino-card-body > .compare-toggle{grid-column:2;grid-row:1}
  .casino-name,.casino-info h3{font-size:1.02rem}
  .casino-head{flex-wrap:wrap;gap:6px 10px;padding-right:84px}
  .casino-bonus{font-size:.92rem}
  .casino-action{
    grid-column:1/-1;
    grid-row:4;
    margin-top:0;
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
    gap:8px 10px;
    padding-top:4px;
    border-top:1px solid var(--border-color);
  }
  .btn-casino,
  .btn-casino-closed{grid-column:1;padding:12px 14px;font-size:.88rem}
  .btn-casino-review{grid-column:2;padding:10px 8px;font-size:.72rem}
  .casino-action:not(:has(.btn-casino-review)) .btn-casino,
  .casino-action:not(:has(.btn-casino-review)) .btn-casino-closed{grid-column:1/-1}
  .casino-terms{grid-column:1/-1}
}

/* ── Mobile ≤600px ── */
@media(max-width:600px){
  .casino-rank{min-width:28px;height:22px;font-size:.7rem;padding:0 7px}
  .casino-card-body{
    grid-template-columns:56px minmax(0,1fr);
    gap:10px 12px;
    padding:10px 12px 12px;
  }
  .casino-head{padding-right:76px}
  .casino-logo{
    grid-column:1;
    width:56px;height:36px;border-radius:var(--radius-xs);
  }
  .casino-info{grid-column:2}
  .casino-head{gap:6px 10px;flex-wrap:wrap}
  .casino-name,.casino-info h3{font-size:.95rem;white-space:normal}
  .casino-bonus-row{padding:9px 10px;gap:6px}
  .casino-bonus{font-size:.88rem}
  .casino-wager{font-size:.7rem;padding:3px 8px}
  .casino-bonus-tag{font-size:.66rem;padding:3px 8px}
  .casino-bullets{gap:3px 12px}
  .casino-bullets li{font-size:.76rem;padding-left:18px}
  .casino-pm{font-size:.68rem;padding:2px 7px}
  .casino-category{font-size:.64rem;padding:2px 8px}
  .casino-action{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:8px;
  }
  .btn-casino,
  .btn-casino-closed{padding:11px 10px;font-size:.84rem}
  .btn-casino-review{padding:8px 6px;font-size:.68rem}
  .casino-terms{font-size:.6rem}
}

/* ── Tiny ≤400px ── */
@media(max-width:400px){
  .casino-card-body{padding:10px 10px 10px;gap:8px 10px}
  .casino-logo{width:48px;height:32px}
  .casino-name,.casino-info h3{font-size:.9rem}
  .casino-bonus{font-size:.84rem}
  .btn-casino,
  .btn-casino-closed{padding:10px 8px;font-size:.8rem}
  .btn-casino-review{font-size:.64rem;padding:7px 5px}
}

/* ===== CTA BUTTON ===== */
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;background:var(--gradient-cta);color:var(--bg-primary);
  font-weight:700;font-size:.9rem;
  border-radius:var(--radius-sm);
  transition:all var(--duration) var(--ease);
  border:none;cursor:pointer;letter-spacing:.01em;
}
.btn-cta:hover{
  background:var(--gradient-cta-hover);
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(245,197,24,.25);
  color:var(--bg-primary);
}
/* Kompakti CTA sisällön taulukoissa (TOP-listat ym.) */
.content-area table .btn-cta{
  padding:5px 10px;
  font-size:.75rem;
  font-weight:700;
  gap:4px;
  white-space:nowrap;
  line-height:1.2;
}
.content-area table .btn-cta:hover{
  transform:none;
  box-shadow:0 2px 10px rgba(245,197,24,.2);
}
.btn-cta-outline{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;background:transparent;color:var(--yellow);
  font-weight:600;font-size:.9rem;
  border-radius:var(--radius-sm);
  border:1px solid rgba(245,197,24,.3);
  transition:all var(--duration) var(--ease);
}
.btn-cta-outline:hover{background:rgba(245,197,24,.08);color:var(--yellow-light);border-color:rgba(245,197,24,.5)}
.btn-pink{background:linear-gradient(135deg,var(--pink),var(--pink-dark))}
.btn-pink:hover{background:linear-gradient(135deg,var(--pink-light),var(--pink));box-shadow:0 4px 20px rgba(236,72,153,.25)}

/* ===== CTA BOX ===== */
.cta-box{
  padding:32px;background:var(--bg-card);
  border:1px solid var(--border-color);border-radius:var(--radius);
  text-align:center;margin:40px 0;
}
.cta-box.cta-gradient{
  background:var(--gradient-subtle);
  border-color:rgba(245,197,24,.15);
}
.cta-box h3{font-size:1.2rem;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.cta-box p{color:var(--text-secondary);margin-bottom:20px;font-size:.9rem}

/* ===== INFO BOX (kortti-tyyli, brand: kelta) ===== */
.info-box{
  --info-brand:var(--yellow);
  --info-brand-soft:rgba(245,197,24,.13);
  --info-brand-glow:rgba(245,197,24,.18);

  position:relative;
  padding:24px 28px;
  border-radius:var(--radius-lg);
  margin:32px 0;
  background:
    radial-gradient(120% 100% at 100% 0%, var(--info-brand-soft) 0%, transparent 55%),
    linear-gradient(160deg, #1a1a1f 0%, #0e0e11 100%);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow);
  overflow:hidden;
  isolation:isolate;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Gradient-border (sama tekniikka kuin crypto-cta-card) */
.info-box::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, var(--info-brand) 0%, transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;
  pointer-events:none;
  z-index:1;
  transition:opacity .35s var(--ease);
}
/* Koristeellinen "i" -ikoni nurkkaan (background-image data URI) */
.info-box::after{
  content:"";
  position:absolute;
  right:-32px;top:-32px;
  width:160px;height:160px;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f5c518'/%3E%3Cstop offset='1' stop-color='%23d4a90e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='url(%23g)' stroke-width='2.5'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='url(%23g)' stroke-width='1.5' opacity='.55'/%3E%3Ccircle cx='50' cy='32' r='4.5' fill='url(%23g)'/%3E%3Crect x='46' y='42' width='8' height='32' rx='2' fill='url(%23g)'/%3E%3C/svg%3E");
  opacity:.18;
  pointer-events:none;
  z-index:0;
  transition:opacity .35s var(--ease), transform .5s var(--ease);
}
.info-box:hover{
  border-color:transparent;
  box-shadow:0 10px 28px rgba(0,0,0,.32), 0 0 22px var(--info-brand-glow);
}
.info-box:hover::before{opacity:.85}
.info-box:hover::after{opacity:.26;transform:rotate(8deg) scale(1.04)}

/* Sisältö pinon päällä */
.info-box>*{position:relative;z-index:2}
.info-box>h2:first-child,
.info-box>h3:first-child,
.info-box>h4:first-child,
.info-box>h5:first-child{margin-top:0}
.info-box h2,.info-box h3,.info-box h4,.info-box h5{
  color:var(--text-primary);
  letter-spacing:-.01em;
}
.info-box>h3:first-child,
.info-box>h4:first-child{
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
}
.info-box>h3:first-child::before,
.info-box>h4:first-child::before{
  content:"";
  flex-shrink:0;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--info-brand);
  box-shadow:0 0 10px var(--info-brand);
}
.info-box p{margin-bottom:16px;font-size:.925rem;color:var(--text-secondary);line-height:1.75}
.info-box p:last-child{margin-bottom:0}
.info-box ul,.info-box ol{margin-bottom:16px;padding-left:22px}
.info-box ul{list-style:disc}
.info-box ol{list-style:decimal}
.info-box li{margin-bottom:8px;color:var(--text-secondary);font-size:.925rem;line-height:1.7}
.info-box ul li::marker,.info-box ol li::marker{color:var(--info-brand)}

/* ── Variantti: pinkki ── */
.info-box.info-pink{
  --info-brand:var(--pink);
  --info-brand-soft:rgba(236,72,153,.12);
  --info-brand-glow:rgba(236,72,153,.20);
}
.info-box.info-pink::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='gp' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ec4899'/%3E%3Cstop offset='1' stop-color='%23db2777'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='url(%23gp)' stroke-width='2.5'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='url(%23gp)' stroke-width='1.5' opacity='.55'/%3E%3Ccircle cx='50' cy='32' r='4.5' fill='url(%23gp)'/%3E%3Crect x='46' y='42' width='8' height='32' rx='2' fill='url(%23gp)'/%3E%3C/svg%3E");
}

/* ── Variantti: kelta (eksplisiittinen, sama kuin oletus) ── */
.info-box.info-yellow{
  --info-brand:var(--yellow);
  --info-brand-soft:rgba(245,197,24,.13);
  --info-brand-glow:rgba(245,197,24,.18);
}

/* ── Mobiili ── */
@media (max-width:640px){
  .info-box{
    padding:20px 18px;
    margin:24px 0;
  }
  .info-box::after{width:120px;height:120px;right:-24px;top:-24px}
}

/* ETA-maat -lista (info-box sisällä) */
.eta-countries{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:18px;
  margin:18px 0 4px;
}
.eta-countries-group{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:16px 18px;
}
.eta-countries-title{
  font-size:.78rem;
  font-weight:800;
  color:var(--yellow);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 12px;
}
.info-box .eta-countries-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px 14px;
}
.info-box .eta-countries-list--single{
  grid-template-columns:1fr;
}
.info-box .eta-countries-list li{
  position:relative;
  padding-left:14px;
  margin:0;
  font-size:.9rem;
  color:var(--text-secondary);
  line-height:1.45;
}
.info-box .eta-countries-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--yellow);
}
.info-box .eta-countries-note{
  margin:14px 0 0;
  font-size:.85rem;
  color:var(--text-muted);
  font-style:italic;
  line-height:1.6;
}
@media(max-width:760px){
  .eta-countries{
    grid-template-columns:1fr;
    gap:14px;
  }
  .info-box .eta-countries-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media(max-width:380px){
  .info-box .eta-countries-list{
    grid-template-columns:1fr;
  }
}

/* ===== VINKKI BOX ===== */
.vinkki-box{
  padding:20px 24px;border-radius:var(--radius-lg);margin:28px 0;
  background:rgba(59,130,246,.08);
  border:1px solid rgba(59,130,246,.2);
  border-left:4px solid var(--blue);
}
.vinkki-box-title{
  margin:0 0 12px 0;
  font-size:1rem;font-weight:700;
  color:var(--blue-light);
  letter-spacing:.01em;
}
.vinkki-box>h2:first-child,.vinkki-box>h3:first-child,.vinkki-box>h4:first-child{margin-top:0}
.vinkki-box p{
  margin-bottom:14px;
  font-size:.95rem;
  color:var(--text-secondary);
  line-height:1.75;
}
.vinkki-box p:last-child{margin-bottom:0}
.vinkki-box ul,.vinkki-box ol{
  margin-bottom:14px;
  padding-left:22px;
}
.vinkki-box ul{list-style:disc}
.vinkki-box ol{list-style:decimal}
.vinkki-box li{
  margin-bottom:8px;
  color:var(--text-secondary);
  font-size:.95rem;
  line-height:1.7;
}

/* ===== QUOTE BOX (:::quote – Nettikasinootin tiimin huomio) ===== */
.quote-box{
  display:flex;
  align-items:flex-start;
  gap:16px;
  position:relative;
  margin:28px 0;
  padding:20px 22px 18px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(245,197,24,.12) 0%, transparent 52%),
    var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.quote-box::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:var(--gradient-cta);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.quote-box-icon{
  width:44px;height:44px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:2px solid rgba(245,197,24,.38);
  box-shadow:0 0 18px rgba(245,197,24,.12);
  background:var(--bg-elevated);
}
.quote-box-icon img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.quote-box-body{
  min-width:0;
  flex:1;
  padding-top:2px;
}
.quote-box-body p{
  margin:0 0 10px;
  font-size:.95rem;
  line-height:1.7;
  color:var(--text-primary);
  font-weight:500;
}
.quote-box-body p:last-of-type{margin-bottom:0}
.quote-box-body p:first-of-type::before{
  content:"\201C";
  color:var(--yellow);
  font-family:Georgia,serif;
  font-size:1.15em;
  font-weight:700;
  margin-right:.12em;
  line-height:0;
}
.quote-box-body ul,.quote-box-body ol{
  margin:0 0 10px;
  padding-left:22px;
}
.quote-box-body li{
  margin-bottom:6px;
  color:var(--text-primary);
  font-size:.95rem;
  line-height:1.7;
}
.quote-box-by{
  display:block;
  margin-top:10px;
  font-size:.78rem;
  font-weight:600;
  color:var(--text-muted);
  font-style:normal;
  letter-spacing:.01em;
}
.quote-box-by cite{
  font-style:normal;
  font-weight:700;
  color:var(--yellow);
}
.quote-box-by cite::before{content:"— "}
@media(max-width:480px){
  .quote-box{padding:16px;gap:12px;margin:22px 0}
  .quote-box-icon{width:36px;height:36px}
  .quote-box-body p{font-size:.9rem}
}

/* ===== KOTIUTUSAJAN LUOKITTELU (payout speed tiers) ===== */
.payout-tiers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:28px 0;
}
.payout-tier{
  display:flex;flex-direction:column;gap:6px;
  padding:18px 20px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-left-width:4px;
  position:relative;
}
.payout-tier-fast{
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.22);
  border-left-color:#22c55e;
}
.payout-tier-medium{
  background:rgba(234,179,8,.08);
  border-color:rgba(234,179,8,.22);
  border-left-color:#eab308;
}
.payout-tier-slow{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.22);
  border-left-color:#ef4444;
}
.payout-tier-head{
  display:flex;align-items:center;gap:8px;
  font-size:.95rem;font-weight:700;
  color:var(--text-primary);
  margin:0;
}
.payout-tier-icon{font-size:1.1rem;line-height:1}
.payout-tier-time{
  display:inline-block;
  font-size:.78rem;font-weight:700;
  padding:3px 9px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.06);
  color:var(--text-primary);
  align-self:flex-start;
  letter-spacing:.02em;
}
.payout-tier-fast .payout-tier-time{background:rgba(34,197,94,.18);color:#22c55e}
.payout-tier-medium .payout-tier-time{background:rgba(234,179,8,.18);color:#eab308}
.payout-tier-slow .payout-tier-time{background:rgba(239,68,68,.18);color:#ef4444}
.payout-tier-desc{
  margin:4px 0 0;
  font-size:.85rem;line-height:1.55;
  color:var(--text-secondary);
}
@media(max-width:760px){
  .payout-tiers{grid-template-columns:1fr;gap:10px}
  .payout-tier{padding:14px 16px}
}

/* Virallinen lainaus (Verohallinto tms.) */
.content-area .legal-quote{
  margin:20px 0 26px;
  padding:20px 24px 20px 22px;
  border-radius:var(--radius-lg);
  background:var(--yellow-glow);
  border:1px solid rgba(245,197,24,.22);
  border-left:4px solid var(--yellow-dark);
  box-shadow:var(--shadow-sm);
}
.content-area .legal-quote p{
  margin:0;
  font-size:1.05rem;
  font-weight:600;
  line-height:1.65;
  color:var(--text-primary);
  letter-spacing:.01em;
}

/* ===== EROTTUVA BOX ===== */
.erottuva-box{
  padding:22px 26px;border-radius:var(--radius-lg);margin:28px 0;
  background:var(--bg-card);
  border:2px solid var(--border-hover);
  box-shadow:var(--shadow);
  position:relative;
}
.erottuva-box::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--gradient-cta);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.erottuva-box>h2:first-child,.erottuva-box>h3:first-child,.erottuva-box>h4:first-child,.erottuva-box>h5:first-child{margin-top:0}
.erottuva-box p{
  margin-bottom:16px;
  font-size:.95rem;
  color:var(--text-primary);
  line-height:1.75;
  font-weight:500;
}
.erottuva-box p:last-child{margin-bottom:0}
.erottuva-box ul,.erottuva-box ol{
  margin-bottom:16px;
  padding-left:22px;
}
.erottuva-box ul{list-style:disc}
.erottuva-box ol{list-style:decimal}
.erottuva-box li{
  margin-bottom:8px;
  color:var(--text-primary);
  font-size:.95rem;
  line-height:1.7;
  font-weight:500;
}

/* ===== COMPARE CASINOS TABLE ===== */
.compare-section{
  margin:32px 0;
}
.compare-section h2{
  margin:0 0 16px;
}
.compare-table-wrap{
  overflow-x:auto;
  border-radius:var(--radius);
  border:1px solid var(--border-color);
  -webkit-overflow-scrolling:touch;
}
.compare-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.compare-table th,
.compare-table td{
  padding:12px 16px;
  text-align:center;
  font-size:.875rem;
  border-bottom:1px solid var(--border-color);
  color:var(--text-primary);
}
.compare-table thead th{
  background:var(--card-bg);
  padding:16px 12px;
  vertical-align:middle;
}
.compare-casino-header{
  min-width:140px;
}
.compare-casino-header img{
  display:block;
  margin:0 auto 6px;
  max-height:45px;
  width:auto;
  object-fit:contain;
}
.compare-casino-header a{text-decoration:none}
.compare-review-link{
  display:inline-block;
  margin-top:6px;
  font-size:.72rem;
  color:var(--yellow);
  text-decoration:none;
  transition:opacity .15s;
}
.compare-review-link:hover{opacity:.8}
.compare-select{
  display:block;
  width:100%;
  margin-top:8px;
  padding:6px 24px 6px 10px;
  background:var(--bg, #121212);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  border-radius:6px;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  transition:border-color .15s;
}
.compare-select:hover{border-color:var(--pink)}
.compare-select:focus{border-color:var(--pink);box-shadow:0 0 0 2px rgba(232,67,147,.15)}
.compare-casino-name{
  font-size:.8rem;
  font-weight:700;
  color:var(--text-secondary);
  margin-top:4px;
}
.compare-name-only{
  font-weight:700;
  font-size:.9rem;
}
.compare-label{
  text-align:left !important;
  font-weight:600;
  color:var(--text-secondary);
  white-space:nowrap;
}
.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th{
  background:rgba(var(--pink-rgb,232,67,147),.06);
}
.compare-cta-row td{
  border-bottom:none;
  padding:16px 12px;
}
.compare-btn{
  display:inline-block;
  padding:8px 20px !important;
  font-size:.82rem !important;
  border-radius:var(--radius);
  white-space:nowrap;
}
@media(max-width:768px){
  .compare-table th,
  .compare-table td{padding:10px 12px;font-size:.82rem}
  .compare-casino-header{min-width:120px}
  .compare-select{font-size:.72rem;padding:5px 20px 5px 8px}
}

/* ===== TESTIRAPORTTI (review: frontmatter test_report) ===== */
.test-report{
  position:relative;
  margin:32px 0;
  padding:28px 28px 26px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:
    linear-gradient(155deg, rgba(236,72,153,.09) 0%, transparent 42%),
    linear-gradient(330deg, rgba(245,197,24,.06) 0%, transparent 48%),
    var(--bg-card);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 20px 56px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.test-report::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--gradient-cta);
  opacity:.85;
}
.test-report::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 100% -30%, rgba(245,197,24,.14), transparent 52%);
  pointer-events:none;
}
.test-report > *{position:relative;z-index:1}
.test-report-header{
  display:flex;align-items:flex-start;gap:14px;
  margin-bottom:12px;
}
.test-report-icon-wrap{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex-shrink:0;
  border-radius:var(--radius-sm);
  background:linear-gradient(145deg, rgba(245,197,24,.2) 0%, rgba(236,72,153,.12) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.test-report-icon{
  width:23px;height:23px;
  color:var(--yellow-light);
  filter:drop-shadow(0 0 12px rgba(245,197,24,.25));
}
.test-report-title-block{
  display:flex;flex-direction:column;gap:8px;
  min-width:0;padding-top:2px;
}
.test-report-badge{
  display:inline-flex;align-self:flex-start;
  padding:4px 11px;
  font-size:.62rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink-light);
  background:rgba(236,72,153,.12);
  border:1px solid rgba(236,72,153,.28);
  border-radius:var(--radius-pill);
}
.test-report-title{
  margin:0;
  font-size:clamp(1.15rem,2.4vw,1.38rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
  background:var(--gradient-cta);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.test-report-lead{
  margin:0 0 22px 0;
  padding-left:60px;
  font-size:.88rem;
  line-height:1.65;
  color:var(--text-muted);
  max-width:52ch;
}
.test-report-list{
  margin:0;
  display:grid;
  gap:10px;
}
.test-report-row{
  display:grid;
  grid-template-columns:minmax(158px, 230px) 1fr;
  gap:12px 20px;
  padding:14px 16px 14px 18px;
  border-radius:var(--radius-sm);
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06);
  font-size:.875rem;
  line-height:1.58;
  transition:background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.test-report-row:nth-child(odd){
  border-left:3px solid rgba(245,197,24,.45);
  margin-left:-1px;
  padding-left:16px;
}
.test-report-row:nth-child(even){
  border-left:3px solid rgba(236,72,153,.4);
  margin-left:-1px;
  padding-left:16px;
}
.test-report-row:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(245,197,24,.14);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.test-report-row dt{
  margin:0;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-muted);
  line-height:1.45;
}
.test-report-row dd{
  margin:0;
  font-size:.9rem;
  font-weight:500;
  color:var(--text-secondary);
}
@media(max-width:600px){
  .test-report{
    margin:26px 0;
    padding:22px 18px 20px;
  }
  .test-report-lead{
    padding-left:0;
    max-width:none;
    margin-bottom:18px;
    font-size:.84rem;
  }
  .test-report-icon-wrap{width:42px;height:42px}
  .test-report-icon{width:21px;height:21px}
  .test-report-row{
    grid-template-columns:1fr;
    gap:6px;
    padding:14px 14px 14px 15px;
  }
  .test-report-row:nth-child(odd),
  .test-report-row:nth-child(even){
    margin-left:0;
    padding-left:14px;
  }
  .test-report-row dt{font-size:.68rem}
  .test-report-row dd{font-size:.86rem}
}

/* ===== BLOCKQUOTE / TESTIMONIALS ===== */
blockquote.testimonial{
  position:relative;
  margin:28px 0;
  padding:24px 28px 20px 28px;
  background:var(--bg-card);
  border-left:3px solid var(--yellow);
  border-radius:var(--radius);
  font-style:italic;
  color:var(--text-secondary);
}
blockquote.testimonial::before{
  content:"\201C";
  position:absolute;top:8px;left:12px;
  font-size:2.5rem;line-height:1;
  color:var(--yellow);opacity:.2;
  font-family:Georgia,serif;font-style:normal;
}
blockquote.testimonial p{margin:0 0 10px 0;padding-left:20px;font-size:.925rem;line-height:1.7}
blockquote.testimonial p:last-of-type{margin-bottom:0}
blockquote.testimonial cite{
  display:block;margin-top:14px;padding-left:20px;
  font-style:normal;font-weight:600;font-size:.82rem;
  color:var(--pink-light);
}
blockquote.testimonial cite::before{content:"— "}

/* ===== TABLES ===== */
.table-wrap{overflow-x:auto;margin:24px 0;border-radius:var(--radius);border:1px solid var(--border-color)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:.875rem}
.table-wrap + .table-footnote,
.table-footnote{
  margin:-12px 0 24px;
  padding:0 2px;
  font-size:.8rem;
  line-height:1.45;
  color:var(--text-muted);
}
.table-footnote sup{
  font-size:.7em;
  margin-right:.15em;
  color:var(--text-secondary);
}
.table-wrap th{
  background:rgba(255,255,255,.03);padding:11px 16px;
  text-align:left;font-weight:600;font-size:.8rem;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border-hover);
  white-space:nowrap;letter-spacing:.02em;
}
.table-wrap td{padding:11px 16px;border-bottom:1px solid var(--border-color);color:var(--text-secondary);font-size:.875rem}
.table-wrap.table-cols-5 thead th{white-space:normal}
/* Riviotsikot (avain-arvo -taulukoiden vasen sarake): hillitty "avain"-hierarkia
   – haalea väri + puolilihava, arvosolu jää kirkkaammaksi. */
.table-wrap tbody th{
  background:transparent;
  padding:11px 16px;
  text-align:left;font-weight:600;font-size:.875rem;
  color:var(--text-muted);
  border-bottom:1px solid var(--border-color);
  white-space:normal;letter-spacing:normal;
}
.table-wrap tbody tr:last-child td,
.table-wrap tbody tr:last-child th{border-bottom:none}
.table-wrap tbody tr:hover{background:rgba(255,255,255,.02)}

/* ===== MASTER-VERTAILUTAULUKKO (monta saraketta) ===== */
.table-wrap.table-master table{font-size:.8rem;table-layout:auto}
.table-wrap.table-master th{font-size:.72rem;padding:10px 8px;line-height:1.3}
.table-wrap.table-master td{padding:9px 8px;font-size:.8rem;vertical-align:top;line-height:1.4}
.table-wrap.table-master td:first-child{font-weight:600;white-space:nowrap}
.table-wrap.table-master .tm-yes{color:#4ade80;font-weight:600}
.table-wrap.table-master .tm-no{color:#f87171;font-weight:600}
.table-wrap.table-master .tm-v{display:block;min-width:0}
.table-wrap.table-master small{display:block;color:var(--text-muted);font-size:.72rem}

/* ===== TESTASIMME-LAATIKOT (käytännön testit kategoriasivulla) ===== */
.testasimme-grid{display:grid;gap:18px;margin:20px 0 28px}
.testasimme{
  display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:18px 22px;
  padding:20px 22px;border-radius:var(--radius-lg);
  background:var(--bg-card);border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--yellow);
}
.testasimme--noshot{grid-template-columns:1fr}
.testasimme-body{min-width:0}
.testasimme-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.testasimme-badge{
  display:inline-flex;padding:3px 9px;border-radius:var(--radius-pill);
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--yellow-light);background:rgba(245,197,24,.12);border:1px solid rgba(245,197,24,.3);
}
.testasimme-name{margin:0;font-size:1.1rem;font-weight:800;line-height:1.2}
.testasimme-date{font-size:.78rem;color:var(--text-muted)}
.testasimme-facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px}
.testasimme-facts > div{margin:0;padding:10px 12px;border-radius:var(--radius-sm);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.05)}
.testasimme-facts dt{margin:0 0 3px;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.testasimme-facts dd{margin:0;font-size:.86rem;font-weight:500;line-height:1.45;color:var(--text-secondary)}
.testasimme-facts dd small{display:block;font-weight:400;font-size:.74rem;color:var(--text-muted)}
.testasimme-note{margin:14px 0 0;font-size:.86rem;line-height:1.6;color:var(--text-muted)}
.testasimme-more{display:inline-block;margin-top:10px;font-size:.84rem;font-weight:600}
.testasimme-shot{margin:0;align-self:start}
.testasimme-shot img{display:block;width:100%;max-height:300px;object-fit:contain;object-position:top;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25)}
.testasimme-shot figcaption{margin-top:6px;font-size:.72rem;line-height:1.4;color:var(--text-muted);font-style:italic}
@media(max-width:760px){
  .testasimme{grid-template-columns:1fr;padding:18px 16px}
  .testasimme-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .testasimme-shot{max-width:260px}
}
@media(max-width:420px){
  .testasimme-facts{grid-template-columns:1fr}
}

/* ===== RESPONSIVE TABLES (mobile) ===== */
@media(max-width:768px){
  /* -- 2-sarakkeiset avain-arvo -taulukot -- */
  .table-wrap.table-cols-2{overflow-x:visible;border:none;border-radius:0}
  .table-wrap.table-cols-2 table,
  .table-wrap.table-cols-2 thead,
  .table-wrap.table-cols-2 tbody,
  .table-wrap.table-cols-2 tr{display:block;width:100%}
  .table-wrap.table-cols-2 thead tr{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:10px 0;
    border-bottom:1px solid var(--border-color);
    gap:8px
  }
  .table-wrap.table-cols-2 tbody tr{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:10px 0;
    border-bottom:1px solid var(--border-color);
    gap:8px
  }
  .table-wrap.table-cols-2 tbody tr:last-child{border-bottom:none}
  .table-wrap.table-cols-2 th,
  .table-wrap.table-cols-2 td{
    display:inline;
    padding:0;
    border-bottom:none;
    font-size:.84rem
  }
  .table-wrap.table-cols-2 th:first-child,
  .table-wrap.table-cols-2 td:first-child{
    font-weight:600;
    color:var(--text-secondary);
    flex-shrink:0
  }
  .table-wrap.table-cols-2 th:last-child,
  .table-wrap.table-cols-2 td:last-child{
    text-align:right;
    color:var(--text-secondary)
  }

  /* -- 3+ sarakkeiset taulukot: korttinäkymä -- */
  .table-wrap.table-cols-3,
  .table-wrap.table-cols-4,
  .table-wrap.table-cols-5,
  .table-wrap.table-cols-6,
  .table-wrap.table-master{overflow-x:visible;border:none;border-radius:0}
  .table-wrap.table-cols-3 table,
  .table-wrap.table-cols-3 thead,
  .table-wrap.table-cols-3 tbody,
  .table-wrap.table-cols-3 tr,
  .table-wrap.table-cols-3 th,
  .table-wrap.table-cols-3 td,
  .table-wrap.table-cols-4 table,
  .table-wrap.table-cols-4 thead,
  .table-wrap.table-cols-4 tbody,
  .table-wrap.table-cols-4 tr,
  .table-wrap.table-cols-4 th,
  .table-wrap.table-cols-4 td,
  .table-wrap.table-cols-5 table,
  .table-wrap.table-cols-5 thead,
  .table-wrap.table-cols-5 tbody,
  .table-wrap.table-cols-5 tr,
  .table-wrap.table-cols-5 th,
  .table-wrap.table-cols-5 td,
  .table-wrap.table-cols-6 table,
  .table-wrap.table-master table,
  .table-wrap.table-cols-6 thead,
  .table-wrap.table-master thead,
  .table-wrap.table-cols-6 tbody,
  .table-wrap.table-master tbody,
  .table-wrap.table-cols-6 tr,
  .table-wrap.table-master tr,
  .table-wrap.table-cols-6 th,
  .table-wrap.table-master th,
  .table-wrap.table-cols-6 td,
  .table-wrap.table-master td{display:block;width:100%}
  .table-wrap.table-cols-3 thead,
  .table-wrap.table-cols-4 thead,
  .table-wrap.table-cols-5 thead,
  .table-wrap.table-cols-6 thead,
  .table-wrap.table-master thead{
    position:absolute;left:-9999px;top:-9999px;
    clip:rect(0 0 0 0);height:1px;overflow:hidden
  }
  .table-wrap.table-cols-3 tbody tr,
  .table-wrap.table-cols-4 tbody tr,
  .table-wrap.table-cols-5 tbody tr,
  .table-wrap.table-cols-6 tbody tr,
  .table-wrap.table-master tbody tr{
    margin-bottom:12px;
    border:1px solid var(--border-color);
    border-radius:var(--radius);
    background:var(--bg-card);
    padding:4px 0;
    overflow:hidden
  }
  .table-wrap.table-cols-3 tbody tr:last-child,
  .table-wrap.table-cols-4 tbody tr:last-child,
  .table-wrap.table-cols-5 tbody tr:last-child,
  .table-wrap.table-cols-6 tbody tr:last-child,
  .table-wrap.table-master tbody tr:last-child{margin-bottom:0}
  .table-wrap.table-cols-3 td,
  .table-wrap.table-cols-4 td,
  .table-wrap.table-cols-5 td,
  .table-wrap.table-cols-6 td,
  .table-wrap.table-master td{
    padding:8px 14px;
    border-bottom:1px solid var(--border-color);
    text-align:right;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    font-size:.84rem
  }
  .table-wrap.table-cols-3 td::before,
  .table-wrap.table-cols-4 td::before,
  .table-wrap.table-cols-5 td::before,
  .table-wrap.table-cols-6 td::before,
  .table-wrap.table-master td::before{
    content:attr(data-label);
    font-weight:600;
    font-size:.78rem;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.02em;
    text-align:left;
    flex-shrink:0;
    max-width:40%
  }
  .table-wrap.table-cols-3 tbody tr td:last-child,
  .table-wrap.table-cols-4 tbody tr td:last-child,
  .table-wrap.table-cols-5 tbody tr td:last-child,
  .table-wrap.table-cols-6 tbody tr td:last-child,
  .table-wrap.table-master tbody tr td:last-child{border-bottom:none}
}

/* Master-taulukon korttinäkymän tarkennukset (ladataan yleisten korttisääntöjen jälkeen) */
@media(max-width:768px){
  .table-wrap.table-master td{padding:8px 12px;gap:10px}
  .table-wrap.table-master td:first-child{white-space:normal;font-size:.95rem;padding-top:10px}
  .table-wrap.table-master td::before{max-width:38%;font-size:.7rem;line-height:1.35;padding-top:1px}
  .table-wrap.table-master .tm-v{flex:1 1 auto;text-align:right;overflow-wrap:anywhere}
  .table-wrap.table-master small{font-size:.7rem}
}

/* ===== CASHBACK BRAND BANNER (/cashback-bonukset/) ===== */
.cashback-brand-banner{
  margin:28px 0;
  padding:0;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(245,197,24,.09) 0%,rgba(236,72,153,.06) 45%,rgba(59,130,246,.055) 100%);
  border:1px solid rgba(245,197,24,.22);
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}
.cashback-brand-banner--minimal{margin:32px 0}
.cashback-brand-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 90% 70% at 15% -10%,rgba(245,197,24,.14),transparent 50%);
  pointer-events:none;
}
.cashback-brand-banner-inner{
  position:relative;
  z-index:1;
  padding:22px 20px;
  text-align:center;
}
.cashback-brand-banner--minimal .cashback-brand-banner-inner{padding:18px 20px}
@media(min-width:768px){
  .cashback-brand-banner-inner{padding:24px 28px}
  .cashback-brand-banner--minimal .cashback-brand-banner-inner{padding:20px 28px}
}
.cashback-brand-banner-slogan{
  margin:0;
  font-size:clamp(1.2rem,3.6vw,1.7rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--text-primary);
}
.cashback-brand-banner-heart{
  display:inline-block;
  vertical-align:middle;
  margin:0 .1em;
  color:var(--pink-light);
  filter:drop-shadow(0 0 8px rgba(236,72,153,.45));
}

/* Cashback-ehtovertailu (/cashback-bonukset/) */
.cb-compare{margin:8px 0 28px}
.cb-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.cb-filter{
  border:1px solid var(--border-color);
  background:var(--bg-card);
  color:var(--text-secondary);
  border-radius:999px;
  padding:6px 12px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
}
.cb-filter.is-active{
  border-color:rgba(245,197,24,.55);
  color:var(--text-primary);
  background:rgba(245,197,24,.12);
}
.cb-head,.cb-offer-main{
  display:grid;
  grid-template-columns:1.15fr .72fr 1.35fr .95fr .72fr 1fr .95fr;
  gap:8px 10px;
  align-items:start;
}
.cb-head{
  font-size:.68rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-muted);padding:0 12px 8px;
}
.cb-offer{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:12px;
  margin:0 0 10px;
}
.cb-cell{font-size:.84rem;color:var(--text-secondary);line-height:1.35}
.cb-offer-actions{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-start;margin-top:10px}
.cb-details{flex:1 1 100%}
.cb-details summary{cursor:pointer;font-weight:600;font-size:.84rem;color:var(--yellow)}
.content-area .cb-details ul{margin:8px 0 0}
.content-area .cb-source{margin:8px 0 0;font-size:.78rem;color:var(--text-muted)}
.content-area .cb-empty{color:var(--text-muted)}
.cbc-stats{grid-template-columns:1fr}
@media(max-width:860px){
  .cb-head{display:none}
  .cb-offer-main{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .cb-cell{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;text-align:right}
  .cb-cell::before{
    content:attr(data-label);
    font-weight:600;font-size:.72rem;color:var(--text-muted);
    text-transform:uppercase;text-align:left;
  }
  .cb-cell[data-label="Kasino"]{display:block;text-align:left;font-size:1rem;color:var(--text-primary);margin-bottom:4px}
  .cb-cell[data-label="Kasino"]::before{content:none}
  .cb-filter{min-height:40px;padding:8px 14px}
  .cb-details summary{padding:10px 0}
}

/* ===== CONTENT IMAGES ===== */
.content-img{margin:28px 0;padding:0;display:flex;flex-direction:column;align-items:center;text-align:center}
/* min-width:0: flex-lapsi (img) ei saa jäädä kiinni width="" -attribuutin intrinsiseen minimiin */
.content-img img{max-width:100%;min-width:0;height:auto;border-radius:var(--radius);border:1px solid var(--border-color)}
.content-img--wide img{width:100%}
.content-img figcaption{font-size:.78rem;color:var(--text-muted);margin-top:8px;font-style:italic}
/* Pienennetty kuva Ice Cage 8 liput (artikkelit/ice-cage-8) */
.content-img img[src*="ice-cage-8-liput"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="ice-cage-8-liput"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Shotz talletus (kasinot/shotz-casino) */
.content-img img[src*="shotz-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="shotz-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Talletusikkunat minimitalletus-sivulla: koko palsta oli liian iso */
.content-img img[src*="huippu-kasino-minimitalletus-20e"],
.content-img img[src*="minimitalletus-kasino-"]{max-width:60%;width:60%}
@media(max-width:640px){
  .content-img img[src*="huippu-kasino-minimitalletus-20e"],
  .content-img img[src*="minimitalletus-kasino-"]{max-width:92%;width:92%}
}
/* Pienennetty kuva ilmaiskierroksien-ehdot */
.content-img img[src*="ilmaiskierroksien-ehdot"]{max-width:60%;width:60%}
/* Pienennetty kuva reload-bonus-ehdot (reload-bonukset) */
.content-img img[src*="reload-bonus-ehdot"]{max-width:60%;width:60%}
@media(max-width:640px){
  .content-img img[src*="reload-bonus-ehdot"]{max-width:92%;width:92%}
}
/* Pienennetty kuva tikkari-casinon-maksutavat (Onko Tikkari Casino turvallinen? jne.) */
.content-img img[src*="tikkari-casinon-maksutavat"]{max-width:60%;width:60%}
@media(max-width:640px){
  .content-img img[src*="tikkari-casinon-maksutavat"]{max-width:92%;width:92%}
}
/* Pienennetyt pystykuvat Muhkee-artikkelissa */
.content-img img[src*="muhkee–kasinon-maksutavat"],
.content-img img[src*="muhkee-kasinon-vastuullinen-pelaaminen"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="muhkee–kasinon-maksutavat"],
  .content-img img[src*="muhkee-kasinon-vastuullinen-pelaaminen"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva sticky bonus (casino bonukset). % + width="800" ei pienennä luotettavasti; käytä px-kattoa. */
.content-img img[src*="sticky-bonus-nettikasinolla"]{
  width:auto;
  max-width:min(400px,100%);
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="sticky-bonus-nettikasinolla"]{
    max-width:min(100%,92vw);
  }
}
/* Pienennetty kuva MGA lisenssin tarkistaminen (verovapaat nettikasinot) */
.content-img img[src*="mga-lisenssi-tarkistaminen"]{max-width:55%;width:55%}
@media(max-width:640px){
  .content-img img[src*="mga-lisenssi-tarkistaminen"]{max-width:92%;width:92%}
}
/* Pienennetty kuva MGA-lisenssin tiedot portaalissa (mga-kasinot) */
.content-img img[src*="mga-lisenssin-tiedot-portaalissa"]{max-width:50%;width:50%}
@media(max-width:640px){
  .content-img img[src*="mga-lisenssin-tiedot-portaalissa"]{max-width:90%;width:90%}
}
/* Pienennetty kuva moderni-netticasino-toimii-puhelimella */
.content-img img[src*="moderni-netticasino-toimii-puhelimella"]{max-width:50%;width:50%}
@media(max-width:640px){
  .content-img img[src*="moderni-netticasino-toimii-puhelimella"]{max-width:90%;width:90%}
}
/* Pienennetty kuva uusi-casino-puhelimella (uudet-nettikasinot). % + width="800" ei pienennä luotettavasti. */
.content-img img[src*="uusi-casino-puhelimella"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="uusi-casino-puhelimella"]{
    max-width:min(100%,420px);
  }
}
/* BetBay-arvostelun pystykuvat: bonus, pelitesti, pelit */
.content-img img[src*="betbay-casino-"]{
  width:auto;
  max-width:min(320px,42%);
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="betbay-casino-"]{
    max-width:min(100%,280px);
  }
}
/* Pienennetty kuva Wheelz on toimiva mobiilikasino (/kasinot/) */
.content-img img[src*="wheelz-on-toimiva-mobiilikasino"]{max-width:32%;width:32%}
@media(max-width:640px){
  .content-img img[src*="wheelz-on-toimiva-mobiilikasino"]{max-width:70%;width:70%}
}
/* Pienennetty kuva Trumopay pikamaksu Finanssivalvonta */
.content-img img[src*="trumopay-pikamaksu-finanssivalvonta"]{max-width:50%;width:50%}
@media(max-width:640px){
  .content-img img[src*="trumopay-pikamaksu-finanssivalvonta"]{max-width:90%;width:90%}
}
/* Pienennetty kuva Trumo Finanssivalvonta (trumo-kasinot). width="800" + % ei toimi; px-katto. */
.content-img img[src*="trumo-finanssivalvonta"]{
  width:auto;
  max-width:min(280px,100%);
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="trumo-finanssivalvonta"]{
    max-width:min(100%,92vw);
  }
}
/* Pienennetty kuva Apple Pay kasino tarjoaa usein monia maksutapoja (apple-pay-kasinot) */
.content-img img[src*="apple-pay-kasino-tarjoaa-usein-monia-maksutapoja"]{max-width:50%;width:50%}
@media(max-width:640px){
  .content-img img[src*="apple-pay-kasino-tarjoaa-usein-monia-maksutapoja"]{max-width:90%;width:90%}
}
/* Pienennetty kuva ulkomainen nettikasino maksutapoja (ulkomaiset-nettikasinot) */
.content-img img[src*="ulkomainen-nettikasino-maksutapoja"]{max-width:55%;width:55%}
@media(max-width:640px){
  .content-img img[src*="ulkomainen-nettikasino-maksutapoja"]{max-width:90%;width:90%}
}
/* Pienennetty kuva Blingi Trustly talletus */
.content-img img[src*="blingi-trustly-talletus"],
.content-img img[src*="raju-kasino-trustly-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="blingi-trustly-talletus"],
  .content-img img[src*="raju-kasino-trustly-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Urho Kasino talletus */
.content-img img[src*="urho-kasino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="urho-kasino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Kaista Kasino talletus */
.content-img img[src*="kaista-kasino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="kaista-kasino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Blingi Casinon lisenssi */
.content-img img[src*="blingi-casinon-lisenssi"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="blingi-casinon-lisenssi"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva FeliceBet Anjouan-lisenssi */
.content-img img[src*="felicebet-anjouan-lisenssi"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="felicebet-anjouan-lisenssi"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Tuplaus Kasino talletus */
.content-img img[src*="tuplaus-kasino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="tuplaus-kasino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Tuplaus Casino bonus */
.content-img img[src*="tuplaus-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="tuplaus-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Pelikioski Viljo talletus */
.content-img img[src*="pelikioski-viljo-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="pelikioski-viljo-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva BigWin Casino bonus */
.content-img img[src*="bigwin-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="bigwin-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva BigWin Casino pikatalletus */
.content-img img[src*="bigwin-casino-pikatalletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="bigwin-casino-pikatalletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Lonkero Casino talletus */
.content-img img[src*="lonkero-casino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="lonkero-casino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Super Onni live chat vastaus */
.content-img img[src*="super-onni-live-chat-vastaus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="super-onni-live-chat-vastaus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Pottila asiakaspalvelutesti */
.content-img img[src*="pottila-asiakaspalvelu-testi"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="pottila-asiakaspalvelu-testi"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Beazt Casino asiakaspalvelutesti */
.content-img img[src*="beazt-casino-asiakaspalvelu-testi"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="beazt-casino-asiakaspalvelu-testi"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Pottila klubiedut */
.content-img img[src*="pottila-klubiedut"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="pottila-klubiedut"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Pelikaani Viljo talletus */
.content-img img[src*="pelikaani-viljo-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="pelikaani-viljo-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Kanuuna Kasino talletus */
.content-img img[src*="kanuuna-kasino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="kanuuna-kasino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Mainio Casino Viljo talletus */
.content-img img[src*="mainio-casino-viljo-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="mainio-casino-viljo-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Tuuri Kasino talletus */
.content-img img[src*="tuuri-kasino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="tuuri-kasino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Saletti Kasino Trustly talletus */
.content-img img[src*="saletti-kasino-trustly-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="saletti-kasino-trustly-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Valtti Kasino talletus */
.content-img img[src*="valtti-kasino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="valtti-kasino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Epic roadmap */
.content-img img[src*="epic-roadmap"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="epic-roadmap"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Joki Casino talletus */
.content-img img[src*="joki-casino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="joki-casino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Tuohi Kasino Trustly talletus */
.content-img img[src*="tuohi-kasino-trustly-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="tuohi-kasino-trustly-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Spinz Casino maksutavat */
.content-img img[src*="spinz-casino-maksutavat"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="spinz-casino-maksutavat"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Vivatbet Trustly talletus */
.content-img img[src*="vivatbet-trustly-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="vivatbet-trustly-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Uuno Kasino pikatalletus */
.content-img img[src*="uunokasino-pikatalletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="uunokasino-pikatalletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Jack Burst Casino pikatalletus */
.content-img img[src*="jackburst-pikatalletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="jackburst-pikatalletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Kiekka Casino bonus */
.content-img img[src*="kiekka-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="kiekka-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Kiekka Kasino talletus */
.content-img img[src*="kiekka-kasino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="kiekka-kasino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Vawzen Gaming talletus */
.content-img img[src*="vawzen-gaming-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="vawzen-gaming-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Spinnaus Casino bonus */
.content-img img[src*="spinnaus-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="spinnaus-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Tykitys Kasino talletus pikana */
.content-img img[src*="tykitys-kasino-talletus-pikana"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="tykitys-kasino-talletus-pikana"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Berriez Casino talletus */
.content-img img[src*="berriez-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="berriez-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Slottimonsteri talletus ilman rekisteröitymistä */
.content-img img[src*="slottimonsteri-talletus-ilman-rekisteroitymista"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="slottimonsteri-talletus-ilman-rekisteroitymista"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Speedz Casino bonus */
.content-img img[src*="speedz-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="speedz-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Speedz Casino pikatalletus */
.content-img img[src*="speedz-casino-pikatalletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="speedz-casino-pikatalletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Flamez Casino bonus */
.content-img img[src*="flamez-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="flamez-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Flamez Casino pikatalletus */
.content-img img[src*="flamez-casino-pikatalletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="flamez-casino-pikatalletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Ruhtinas Kasino talletus */
.content-img img[src*="ruhtinas-kasino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="ruhtinas-kasino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Lolo Casino bonus */
.content-img img[src*="lolo-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="lolo-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Lolo Casino talletus */
.content-img img[src*="lolo-casino-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="lolo-casino-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Pikapotti Zimpler talletus */
.content-img img[src*="pikapotti-zimpler-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="pikapotti-zimpler-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Wettson Casino bonus */
.content-img img[src*="wettson-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="wettson-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Wettson Casino pikatalletus */
.content-img img[src*="wettson-pikatalletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="wettson-pikatalletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Casino Loots bonus */
.content-img img[src*="/img/loots-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="/img/loots-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Casino Loots talletus */
.content-img img[src*="casino-loots-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="casino-loots-talletus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Zuluspins Casino bonus */
.content-img img[src*="zuluspins-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="zuluspins-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Zuluspins pikatalletus Trumolla */
.content-img img[src*="zuluspins-pikatalletus-trumolla"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="zuluspins-pikatalletus-trumolla"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Wisho Casino bonus */
.content-img img[src*="wisho-casino-bonus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="wisho-casino-bonus"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Weezybet VIP */
.content-img img[src*="weezybet-vip"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="weezybet-vip"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Kiekka Casino VIP */
.content-img img[src*="kiekka-casino-vip"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="kiekka-casino-vip"]{
    max-width:min(100%,420px);
  }
}
/* Pienennetty kuva Wheelz Casino reload bonus (casino-bonukset) */
.content-img img[src*="wheelz-casinon-reload-bonus"]{
  max-width:min(560px,72%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="wheelz-casinon-reload-bonus"]{
    max-width:min(100%,560px);
  }
}
/* Pienennetty kuva EpicBet paras pokerisivu (pokerisivut) */
.content-img img[src*="paras-pokerisivu-epicbet"]{max-width:50%;width:50%}
@media(max-width:640px){
  .content-img img[src*="paras-pokerisivu-epicbet"]{max-width:90%;width:90%}
}
/* Pienennetty kuva EpicBet verovapaa pokerisivu (pokerisivut) */
.content-img img[src*="verovapaa-pokerisivu"]{max-width:50%;width:50%}
@media(max-width:640px){
  .content-img img[src*="verovapaa-pokerisivu"]{max-width:90%;width:90%}
}
/* Pienennetty kuva KumoBet talletus */
.content-img img[src*="kumobet-talletus"]{
  max-width:min(340px,38%);
  width:auto;
  height:auto;
}
@media(max-width:640px){
  .content-img img[src*="kumobet-talletus"]{
    max-width:min(100%,420px);
  }
}
/* casino-bonus-ehdot: täyttää tekstipalstan (flex center jättää muuten kuvan kapeaksi) */
.content-img:has(> img[src*="casino-bonus-ehdot"]){
  align-items:stretch;
}
.content-img img[src*="casino-bonus-ehdot"]{
  width:100%;
  max-width:100%;
  height:auto;
}

/* ===== PROS & CONS ===== */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.pros-cons .pros,.pros-cons .cons{padding:20px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border-color)}
.pros-cons .pros{border-top:2px solid #22c55e}
.pros-cons .cons{border-top:2px solid #ef4444}
.pros-cons h3,.pros-cons h4{font-size:.9rem;margin-bottom:12px;font-weight:600}
.pros-cons ul{list-style:none;padding:0}
.pros-cons li{padding:5px 0 5px 22px;position:relative;font-size:.875rem;color:var(--text-secondary)}
.pros li::before{content:'✓';position:absolute;left:0;color:#22c55e;font-weight:700}
.cons li::before{content:'✗';position:absolute;left:0;color:#ef4444;font-weight:700}
@media(max-width:640px){.pros-cons{grid-template-columns:1fr}}

/* ===== NEUTRAL 2-COL COMPARISON (mobile-first) =====
   Käytä silloin kun verrataan kahta vaihtoehtoa rinnakkain ja molempien sisältö
   on yhtä painava (ei avain-arvo). Renderöi mobiilissa pinottuina kortteina,
   desktopissa kahtena sarakkeena. */
.compare-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.compare-cols-2 .compare-col{padding:20px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border-color);border-top:2px solid var(--yellow,#f5b400)}
.compare-cols-2 .compare-col + .compare-col{border-top-color:var(--text-muted,#6b7280)}
.compare-cols-2 h3,.compare-cols-2 h4{font-size:.95rem;margin-bottom:14px;font-weight:600;color:var(--text-primary)}
.compare-cols-2 ul{list-style:none;padding:0;margin:0}
.compare-cols-2 li{padding:8px 0 8px 22px;position:relative;font-size:.9rem;color:var(--text-secondary);line-height:1.45;border-bottom:1px solid var(--border-color)}
.compare-cols-2 li:last-child{border-bottom:none}
.compare-cols-2 li::before{content:'•';position:absolute;left:6px;color:var(--yellow,#f5b400);font-weight:700}
.compare-cols-2 .compare-col + .compare-col li::before{color:var(--text-muted,#6b7280)}
@media(max-width:640px){.compare-cols-2{grid-template-columns:1fr;gap:14px}}

/* ===== FAQ ACCORDION ===== */
.faq-section{margin:56px 0}
.faq-section>h2{margin-bottom:24px}

/* ===== PÄIVITYSHISTORIA ===== */
.changelog-section{margin:48px 0 24px}
.changelog-section>h2{margin-bottom:16px}
.changelog-list{
  margin:0;
  padding:0;
  list-style:none;
}
.changelog-list li{
  margin:0 0 10px;
  padding:0;
  color:var(--text-secondary,#4b5563);
  font-size:.95rem;
  line-height:1.55;
}
.changelog-list li strong{
  color:var(--text-primary);
  font-weight:600;
}
.faq-item{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:14px;
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.faq-item::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--gradient-cta);
  opacity:0;
  transition:opacity .25s var(--ease);
  pointer-events:none;
}
.faq-item:hover{
  border-color:var(--border-hover);
  background:var(--bg-card-hover);
}
.faq-item:has(.faq-question[aria-expanded="true"]){
  border-color:rgba(245,197,24,.35);
  background:var(--bg-card-hover);
  box-shadow:0 6px 24px rgba(245,197,24,.06);
}
.faq-item:has(.faq-question[aria-expanded="true"])::before{opacity:1}
.faq-question{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:18px 22px;
  font-weight:600;font-size:.95rem;line-height:1.45;
  color:var(--text-primary);
  cursor:pointer;
  transition:color .25s var(--ease);
  width:100%;text-align:left;user-select:none;
  background:transparent;border:none;
}
.faq-question:hover{color:var(--yellow-light)}
.faq-question[aria-expanded="true"]{color:var(--yellow)}
.faq-question svg{
  flex-shrink:0;
  width:30px;height:30px;
  padding:8px;
  box-sizing:border-box;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-color);
  color:var(--text-muted);
  transition:transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  opacity:1;
}
.faq-question:hover svg{
  background:var(--yellow-glow);
  border-color:rgba(245,197,24,.3);
  color:var(--yellow-light);
}
.faq-question[aria-expanded="true"] svg{
  background:var(--yellow);
  border-color:var(--yellow);
  color:#15151a;
  transform:rotate(180deg);
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.faq-answer.open{max-height:1200px}
.faq-answer-inner{
  margin:0 22px;
  padding:14px 0 20px;
  border-top:1px solid var(--border-color);
  color:var(--text-secondary);
  font-size:.9rem;line-height:1.75;
}
.faq-answer-inner a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
.faq-answer-inner a:hover{color:var(--yellow-light)}
.faq-answer-inner p:first-child{margin-top:0}
.faq-answer-inner p:last-child{margin-bottom:0}
@media(max-width:640px){
  .faq-question{padding:16px 18px;font-size:.9rem;gap:12px}
  .faq-question svg{width:28px;height:28px;padding:7px}
  .faq-answer-inner{margin:0 18px;padding:12px 0 18px;font-size:.875rem}
}

/* ===== CONTENT ACCORDION (sisältöosiot, ei UKK) ===== */
.content-accordion{margin:20px 0 32px}
.content-accordion-item{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:14px;
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.content-accordion-item::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--gradient-cta);
  opacity:0;
  transition:opacity .25s var(--ease);
  pointer-events:none;
}
.content-accordion-item:hover{
  border-color:var(--border-hover);
  background:var(--bg-card-hover);
}
.content-accordion-item:has(.content-accordion-toggle[aria-expanded="true"]){
  border-color:rgba(245,197,24,.35);
  background:var(--bg-card-hover);
  box-shadow:0 6px 24px rgba(245,197,24,.06);
}
.content-accordion-item:has(.content-accordion-toggle[aria-expanded="true"])::before{opacity:1}
.content-accordion-item > .content-accordion-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.content-accordion-item > .content-accordion-header > h3,
.content-accordion-item > .content-accordion-header > h4{
  margin:0;padding:18px 0 18px 22px;flex:1;min-width:0;cursor:pointer;
  font-size:1.05rem;font-weight:700;line-height:1.35;color:var(--text-primary);
}
.content-accordion-item > .content-accordion-header > h3:hover,
.content-accordion-item > .content-accordion-header > h4:hover{color:var(--yellow-light)}
.content-accordion-item:has(.content-accordion-toggle[aria-expanded="true"]) > .content-accordion-header > h3,
.content-accordion-item:has(.content-accordion-toggle[aria-expanded="true"]) > .content-accordion-header > h4{color:var(--yellow)}
.content-accordion-toggle{
  display:flex;align-items:center;justify-content:center;
  width:auto;padding:14px 22px 14px 0;flex-shrink:0;
  cursor:pointer;background:transparent;border:none;
}
.content-accordion-toggle svg{
  flex-shrink:0;
  width:30px;height:30px;
  padding:8px;
  box-sizing:border-box;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-color);
  color:var(--text-muted);
  transition:transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.content-accordion-toggle:hover svg{
  background:var(--yellow-glow);
  border-color:rgba(245,197,24,.3);
  color:var(--yellow-light);
}
.content-accordion-toggle[aria-expanded="true"] svg{
  background:var(--yellow);
  border-color:var(--yellow);
  color:#15151a;
  transform:rotate(180deg);
}
.content-accordion-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.content-accordion-panel.open{max-height:1200px}
.content-accordion-body{
  margin:0 22px;
  padding:0 0 20px;
  color:var(--text-secondary);
  font-size:.9rem;line-height:1.75;
}
.content-accordion-body a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
.content-accordion-body a:hover{color:var(--yellow-light)}
.content-accordion-body p:first-child{margin-top:0}
.content-accordion-body p:last-child{margin-bottom:0}
@media(max-width:640px){
  .content-accordion-item > .content-accordion-header > h3,
  .content-accordion-item > .content-accordion-header > h4{padding:16px 0 16px 18px;font-size:1rem}
  .content-accordion-toggle{padding:12px 18px 12px 0}
  .content-accordion-toggle svg{width:28px;height:28px;padding:7px}
  .content-accordion-body{margin:0 18px;padding:0 0 18px;font-size:.875rem}
}

/* ===== VALUES GRID ===== */
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0 40px}
.value-card{
  padding:24px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  transition:all var(--duration) var(--ease);
  position:relative;
  overflow:hidden;
}
.value-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gradient-cta);opacity:.4;
  transition:opacity var(--duration) var(--ease);
}
.value-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
.value-card:hover::before{opacity:.8}
.value-card .value-icon{font-size:1.4rem;margin-bottom:10px;display:block}
.value-card h3{font-size:.95rem;font-weight:700;margin:0 0 8px;color:var(--text-primary);letter-spacing:-.01em}
.value-card p{font-size:.85rem;color:var(--text-secondary);margin:0;line-height:1.7}
@media(max-width:640px){.values-grid{grid-template-columns:1fr}}

/* ===== CASINO CTA BANNER ===== */
.casino-cta-banner{
  display:flex;flex-direction:column;gap:16px;
  margin:40px 0;
}

/* Individual card – horizontal row */
.casino-cta-card{
  display:grid;
  grid-template-columns:64px 1fr auto;
  align-items:center;
  gap:20px;
  padding:20px 24px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-color);
  background:var(--bg-card);
  box-shadow:var(--shadow);
  transition:border-color .3s var(--ease),
             box-shadow .3s var(--ease);
  position:relative;
}
.casino-cta-card:hover{
  border-color:rgba(245,197,24,.2);
  box-shadow:0 0 24px rgba(245,197,24,.08), var(--shadow);
}

/* Logo */
.casino-cta-card .cta-logo{
  width:60px;height:60px;
  border-radius:var(--radius-sm);
  object-fit:contain;
  background:rgba(255,255,255,.06);
  padding:8px;
  border:1px solid var(--border-color);
  flex-shrink:0;
}

/* Info block */
.casino-cta-banner .cta-info{
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
.casino-cta-banner .cta-name{
  font-size:.95rem;font-weight:700;
  color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.casino-cta-banner .cta-bonus{
  font-size:.85rem;font-weight:600;
  color:var(--yellow);
  line-height:1.3;
}
.casino-cta-banner .cta-wager{
  font-size:.75rem;
  color:var(--text-muted);
}

/* Payment tags */
.casino-cta-banner .cta-payments{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;
}
.casino-cta-banner .cta-pay-tag{
  display:inline-block;
  padding:2px 8px;
  font-size:.65rem;font-weight:600;
  color:var(--text-secondary);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-color);
  border-radius:var(--radius-pill);
  white-space:nowrap;
  letter-spacing:.01em;
}

/* Action block */
.casino-cta-banner .cta-action{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  flex-shrink:0;
}
.casino-cta-banner .cta-action .btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 32px;
  background:var(--gradient-cta) !important;
  color:var(--bg-primary) !important;
  font-size:.82rem;font-weight:700;
  border-radius:var(--radius-pill);
  text-decoration:none !important;
  transition:all var(--duration) var(--ease);
  letter-spacing:.02em;
  white-space:nowrap;
  border:none;cursor:pointer;
  box-shadow:0 2px 8px rgba(245,197,24,.15);
}
.casino-cta-banner .cta-action .btn-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(245,197,24,.35);
}
.casino-cta-banner .cta-terms{
  font-size:.65rem;
  color:var(--text-muted);
  opacity:.8;
}

/* ── Mobile ── */
@media(max-width:640px){
  .casino-cta-banner{gap:12px}
  .casino-cta-card{
    grid-template-columns:52px 1fr;
    gap:12px;
    padding:16px;
  }
  .casino-cta-card .cta-logo{width:52px;height:52px;padding:6px}
  .casino-cta-banner .cta-action{
    grid-column:1/-1;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;gap:8px;
    padding-top:10px;
    border-top:1px solid var(--border-color);
    margin-top:4px;
  }
  .casino-cta-banner .cta-action .btn-cta{
    flex:1;text-align:center;padding:11px 16px;
  }
}

/* ===== CRYPTO EXCHANGE CTA (Binance / Crypto.com) ===== */
.crypto-cta-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:32px 0 40px;
}

.crypto-cta-card{
  --brand: #f0b90b;
  --brand-dark: #d9a609;
  --brand-soft: rgba(240,185,11,.14);
  --brand-glow: rgba(240,185,11,.22);
  --brand-ink: #0b0b0c;

  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  min-height:260px;
  padding:24px 22px 22px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 100% at 100% 0%, var(--brand-soft) 0%, transparent 55%),
    linear-gradient(160deg, #1a1a1f 0%, #0e0e11 100%);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow);
  text-decoration:none !important;
  color:var(--text-primary);
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--ease),
             border-color .35s var(--ease),
             box-shadow .35s var(--ease);
}

.crypto-cta-card::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, var(--brand) 0%, transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;
  pointer-events:none;
  z-index:1;
  transition:opacity .35s var(--ease);
}

.crypto-cta-card:hover{
  transform:translateY(-3px);
  border-color:transparent;
  box-shadow:0 12px 32px rgba(0,0,0,.4),
             0 0 28px var(--brand-glow);
}
.crypto-cta-card:hover::before{opacity:1}

/* Decorative coin pattern */
.crypto-cta-deco{
  position:absolute;
  right:-30px;bottom:-30px;
  width:180px;height:180px;
  opacity:.18;
  pointer-events:none;
  z-index:0;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.crypto-cta-card:hover .crypto-cta-deco{
  transform:rotate(8deg) scale(1.05);
  opacity:.28;
}

.crypto-cta-head{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:14px;
}

.crypto-cta-logo{
  width:52px;height:52px;
  border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color:var(--brand-ink);
  flex-shrink:0;
  box-shadow:0 6px 18px var(--brand-glow);
}
.crypto-cta-logo svg{width:30px;height:30px;display:block}

.crypto-cta-titles{
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.crypto-cta-eyebrow{
  font-size:.7rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);
  opacity:.9;
}
.crypto-cta-title{
  font-size:1.35rem;font-weight:700;
  color:var(--text-primary);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
}

.crypto-cta-body{
  position:relative;z-index:2;
}
.crypto-cta-desc{
  font-size:.92rem;line-height:1.55;
  color:var(--text-muted);
  margin:0;
}

.crypto-cta-foot{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  margin-top:4px;
}

.crypto-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 26px;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color:var(--brand-ink) !important;
  font-size:.88rem;font-weight:700;
  letter-spacing:.02em;
  text-decoration:none !important;
  white-space:nowrap;
  box-shadow:0 4px 14px var(--brand-glow);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.crypto-cta-btn svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.crypto-cta-card:hover .crypto-cta-btn{
  filter:brightness(1.08);
  box-shadow:0 8px 22px var(--brand-glow);
}
.crypto-cta-card:hover .crypto-cta-btn svg{transform:translateX(3px)}

.crypto-cta-meta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:600;
  color:var(--text-muted);
  letter-spacing:.02em;
}
.crypto-cta-meta::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 10px var(--brand);
}

/* ── Brand: Binance ── */
.crypto-cta-card--binance{
  --brand:#f0b90b;
  --brand-dark:#c99906;
  --brand-soft:rgba(240,185,11,.14);
  --brand-glow:rgba(240,185,11,.28);
  --brand-ink:#0b0b0c;
}

/* ── Brand: Crypto.com ── */
.crypto-cta-card--cryptocom{
  --brand:#1199fa;
  --brand-dark:#0066cc;
  --brand-soft:rgba(17,153,250,.14);
  --brand-glow:rgba(17,153,250,.28);
  --brand-ink:#ffffff;
}
.crypto-cta-card--cryptocom .crypto-cta-eyebrow{color:#5cb8ff}

/* ── Mobile ── */
@media (max-width:720px){
  .crypto-cta-row{
    grid-template-columns:1fr;
    gap:16px;
    margin:24px 0 32px;
  }
  .crypto-cta-card{
    min-height:auto;
    padding:20px 18px;
  }
  .crypto-cta-deco{width:140px;height:140px;right:-24px;bottom:-24px}
  .crypto-cta-title{font-size:1.2rem}
  .crypto-cta-desc{font-size:.88rem}
  .crypto-cta-btn{padding:10px 22px;font-size:.85rem}
}

/* ===== CASINO CAROUSEL ===== */
.casino-carousel{
  display:flex;align-items:center;
  gap:16px;
  margin:48px 0;
}

.carousel-track{
  flex:1;min-width:0;
  position:relative;
  overflow:hidden;
  height:460px;
}

.carousel-card{
  position:absolute;
  top:50%;left:50%;
  width:300px;
  display:flex;flex-direction:column;align-items:center;
  gap:12px;
  padding:32px 24px 26px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.75);
  transition:all .45s cubic-bezier(.4,0,.2,1);
  z-index:0;
}
.carousel-card[data-pos="0"]{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
  z-index:3;
  border-color:rgba(245,197,24,.2);
  box-shadow:0 12px 40px rgba(245,197,24,.1), var(--shadow-lg);
}
.carousel-card[data-pos="-1"]{
  opacity:.65;
  pointer-events:auto;
  transform:translate(calc(-50% - 280px),-50%) scale(.85);
  z-index:1;
}
.carousel-card[data-pos="1"]{
  opacity:.65;
  pointer-events:auto;
  transform:translate(calc(-50% + 280px),-50%) scale(.85);
  z-index:1;
}

.carousel-logo{
  width:calc(100% - 16px);height:auto;
  aspect-ratio:2/1;
  border-radius:var(--radius-sm);
  object-fit:contain;
  background:var(--bg-secondary);
  padding:12px 16px;
}
.carousel-name{
  font-size:1.05rem;font-weight:700;
  color:var(--text-primary);
  text-align:center;
  line-height:1.3;
}
.carousel-bonus{
  font-size:.92rem;font-weight:600;
  color:var(--yellow);
  text-align:center;
  line-height:1.3;
}
.carousel-wager{
  font-size:.78rem;
  color:var(--text-muted);
  text-align:center;
}
.carousel-payments{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  margin-top:2px;
}
.carousel-pay-tag{
  display:inline-block;
  padding:2px 8px;
  font-size:.68rem;font-weight:600;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-color);
  border-radius:var(--radius-pill);
  color:var(--text-muted);
}
.carousel-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;
  margin-top:auto;
  padding:11px 22px;
  background:var(--gradient-cta) !important;
  color:#000 !important;
  font-size:.88rem;font-weight:700;
  border-radius:var(--radius-pill);
  text-decoration:none;
  letter-spacing:.02em;
  border:none;cursor:pointer;
  box-shadow:0 2px 8px rgba(245,197,24,.15);
  transition:transform .2s var(--ease),
             box-shadow .2s var(--ease);
}
.carousel-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(245,197,24,.35);
  color:#000 !important;
}
.carousel-terms{
  font-size:.68rem;
  color:var(--text-muted);
  opacity:.8;
}

/* Carousel arrows */
.carousel-arrow{
  flex-shrink:0;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:50%;
  color:var(--text-primary);
  cursor:pointer;
  z-index:5;
  transition:background .2s var(--ease),
             border-color .2s var(--ease),
             color .2s var(--ease),
             box-shadow .2s var(--ease);
}
.carousel-arrow:hover{
  background:var(--bg-elevated);
  border-color:var(--yellow);
  color:var(--yellow);
  box-shadow:0 0 16px rgba(245,197,24,.12);
}
.carousel-arrow svg{width:20px;height:20px}

/* Carousel mobile */
@media(max-width:768px){
  .casino-carousel{gap:8px}
  .carousel-track{height:420px}
  .carousel-card{width:240px;padding:24px 18px 20px}
  .carousel-card[data-pos="-1"]{transform:translate(calc(-50% - 210px),-50%) scale(.82)}
  .carousel-card[data-pos="1"]{transform:translate(calc(-50% + 210px),-50%) scale(.82)}
  .carousel-arrow{width:36px;height:36px}
  .carousel-arrow svg{width:16px;height:16px}
}
@media(max-width:480px){
  .casino-carousel{gap:6px}
  .carousel-track{height:420px}
  .carousel-card{width:min(280px,75vw);padding:28px 20px 22px}
  .carousel-card[data-pos="-1"],
  .carousel-card[data-pos="1"]{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.75)}
  .carousel-arrow{width:32px;height:32px}
  .carousel-arrow svg{width:14px;height:14px}
}

/* ===== INFO CARD ===== */
.info-card{
  margin:24px 0;padding:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border-color);
  background:var(--bg-card);
}
.info-card-title{
  padding:14px 22px;
  font-size:.92rem;font-weight:700;
  color:var(--yellow);
  background:var(--gradient-subtle);
  border-bottom:1px solid var(--border-color);
  letter-spacing:.01em;
}
.info-card p{
  padding:0 22px;margin:14px 0;
  font-size:.88rem;line-height:1.7;
  color:var(--text-secondary);
}
.info-card p:last-child{margin-bottom:18px}

/* ===== PROS & CONS BOXES ===== */
.proscons-box{
  margin:28px 0;padding:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border-color);
  background:var(--bg-card);
}
.proscons-header{
  display:flex;align-items:center;gap:10px;
  padding:14px 22px;
  font-size:.9rem;font-weight:700;
  letter-spacing:.01em;
}
.proscons-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border-radius:50%;
  font-size:.85rem;font-weight:800;
  flex-shrink:0;
}
/* Pros */
.proscons-pros .proscons-header{
  background:rgba(34,197,94,.08);
  color:#4ade80;
  border-bottom:1px solid rgba(34,197,94,.15);
}
.proscons-pros .proscons-icon{
  background:rgba(34,197,94,.15);color:#4ade80;
}
.proscons-pros .proscons-list li::before{
  content:none;
}
/* Cons */
.proscons-cons .proscons-header{
  background:rgba(239,68,68,.08);
  color:#f87171;
  border-bottom:1px solid rgba(239,68,68,.15);
}
.proscons-cons .proscons-icon{
  background:rgba(239,68,68,.15);color:#f87171;
}
.proscons-cons .proscons-list li::before{
  content:none;
}
/* List */
.proscons-list{
  list-style:none;margin:0;padding:8px 22px 18px;
}
.proscons-list li{
  padding:10px 0;
  font-size:.88rem;line-height:1.6;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border-color);
}
.proscons-list li:last-child{border-bottom:none}

/* ===== BONUS-PICK (:::bonus-pick ID) =====
   Jokainen poiminta oma laatikkonsa; CTA upotettuna ilman toista kehystä. */
.bonus-pick{
  margin:28px 0;
  padding:22px 24px 18px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  transition:border-color var(--duration) var(--ease);
}
.bonus-pick:hover{border-color:var(--border-hover)}
.bonus-pick-title{
  margin:0 0 10px;
  font-size:1.2rem;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--text-primary);
}
.bonus-pick-facts{
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
  margin:0 0 12px;
  font-size:.78rem;
  line-height:1.3;
  color:var(--text-muted, var(--text-secondary));
}
.bonus-pick-fact{display:inline}
.bonus-pick-fact:not(:last-child)::after{
  content:" · ";
  opacity:.55;
}
.bonus-pick-lead{
  margin:0 0 4px;
  font-size:.95rem;
  line-height:1.7;
  color:var(--text-secondary);
}
.bonus-pick-bullets{
  margin:10px 0 4px;
  padding-left:1.15em;
  color:var(--text-secondary);
  font-size:.9rem;
  line-height:1.55;
}
.bonus-pick-bullets li{margin:3px 0}
.bonus-pick .casino-cta-single{
  margin:16px 0 0;
  padding:16px 0 0;
  border:none;
  border-top:1px solid var(--border-color);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.bonus-pick .casino-cta-single:hover{border-color:var(--border-color)}
@media(max-width:640px){
  .bonus-pick{padding:18px 16px 14px;margin:22px 0}
  .bonus-pick-title{font-size:1.1rem}
}

/* ===== SINGLE CASINO CTA ===== */
.casino-cta-single{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  margin:32px 0;padding:20px 24px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  transition:border-color var(--duration) var(--ease);
}
.casino-cta-single:hover{border-color:var(--border-hover)}

.cta-single-main{
  display:flex;align-items:center;gap:18px;min-width:0;flex:1;
}
.cta-single-logo{
  width:64px;height:64px;
  border-radius:var(--radius-sm);
  object-fit:contain;
  background:rgba(255,255,255,.06);
  padding:8px;
  border:1px solid var(--border-color);
  flex-shrink:0;
}
.cta-single-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.cta-single-name{
  font-size:1.05rem;font-weight:700;
  color:var(--text-primary);letter-spacing:-.01em;
}
.cta-single-bonus{
  font-size:.88rem;font-weight:600;color:var(--yellow);line-height:1.3;
}
.cta-single-wager{
  font-size:.75rem;color:var(--text-muted);
}
.cta-single-payments{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;
}
.cta-single-pay{
  display:inline-block;padding:2px 8px;
  font-size:.65rem;font-weight:600;
  color:var(--text-secondary);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-color);
  border-radius:var(--radius-pill);
  white-space:nowrap;
}

.cta-single-action{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  flex-shrink:0;
}
.casino-cta-single .cta-single-action .btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 36px;
  background:var(--gradient-cta) !important;
  color:var(--bg-primary) !important;
  font-size:.85rem;font-weight:700;
  border-radius:var(--radius-pill);
  text-decoration:none !important;
  transition:all var(--duration) var(--ease);
  letter-spacing:.02em;white-space:nowrap;
  border:none;cursor:pointer;
  box-shadow:0 2px 8px rgba(245,197,24,.15);
}
.casino-cta-single .cta-single-action .btn-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(245,197,24,.35);
}
.cta-single-terms{font-size:.65rem;color:var(--text-muted);opacity:.8}

@media(max-width:640px){
  .casino-cta-single{
    flex-direction:column;align-items:stretch;
    gap:16px;padding:18px;
  }
  .cta-single-action{
    flex-direction:row;justify-content:space-between;
    align-items:center;
    padding-top:12px;
    border-top:1px solid var(--border-color);
  }
  .casino-cta-single .cta-single-action .btn-cta{
    flex:1;text-align:center;padding:12px 20px;
  }
}

/* ===== EKSKLUSIIVINEN CTA-BANNERI =====
   Korostaa eksklusiivisuutta. Vaikuttaa VAIN .casino-cta-single--exclusive
   -luokkaan (eksklusiiviset-bonukset-sivun Vauhti-nosto), ei muihin
   .casino-cta-single -bannereihin sivustolla. */
.casino-cta-single--exclusive{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(245,197,24,.5);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(245,197,24,.14), transparent 55%),
    linear-gradient(135deg, rgba(245,197,24,.07), rgba(0,0,0,0) 60%),
    var(--bg-card);
  box-shadow:0 0 0 1px rgba(245,197,24,.14), 0 10px 30px rgba(245,197,24,.12);
}
.casino-cta-single--exclusive:hover{
  border-color:rgba(245,197,24,.8);
  box-shadow:0 0 0 1px rgba(245,197,24,.24), 0 14px 38px rgba(245,197,24,.2);
}
/* Kullanvärinen aksenttipalkki vasemmassa reunassa */
.casino-cta-single--exclusive::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--gradient-cta);
}
/* Hienovarainen kiilto oikeaan yläkulmaan */
.casino-cta-single--exclusive::after{
  content:"";
  position:absolute;top:-40%;right:-10%;
  width:220px;height:220px;
  background:radial-gradient(circle, rgba(245,197,24,.12), transparent 70%);
  pointer-events:none;
}
/* Logo saa kultaisen kehyksen eksklusiivisessa variantissa */
.casino-cta-single--exclusive .cta-single-logo{
  border-color:rgba(245,197,24,.55);
  box-shadow:0 0 0 1px rgba(245,197,24,.2), 0 0 14px rgba(245,197,24,.18);
}
/* Eksklusiivisuus-merkki bonuksen nimen yläpuolella */
.casino-cta-single--exclusive .cta-exclusive-tag{
  display:inline-flex;align-items:center;
  align-self:flex-start;
  margin-bottom:5px;
  padding:3px 11px;
  font-size:.62rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--bg-primary);
  background:var(--gradient-cta);
  border-radius:var(--radius-pill);
  box-shadow:0 2px 10px rgba(245,197,24,.3);
  white-space:nowrap;
}
/* Nostetaan sisältö taustakuvioiden yläpuolelle */
.casino-cta-single--exclusive .cta-single-main,
.casino-cta-single--exclusive .cta-single-action{
  position:relative;z-index:1;
}
@media(max-width:640px){
  .casino-cta-single--exclusive .cta-exclusive-tag{
    white-space:normal;
  }
}

/* ===== STEP BOXES ===== */
.steps-meta{
  display:flex;flex-wrap:wrap;gap:12px 24px;
  padding:16px 20px;margin:20px 0 24px;
  background:var(--bg-card);
  border:1px solid var(--border-color);border-radius:var(--radius);
  font-size:.85rem;color:var(--text-secondary);
}
.steps-meta-item{display:flex;align-items:center;gap:6px}
.steps-meta-label{font-weight:600;color:var(--text-primary)}

.steps-container{
  display:flex;flex-direction:column;gap:16px;
  margin:24px 0 32px;
  position:relative;
}
/* Vertical connector line */
.steps-container::before{
  content:'';position:absolute;
  left:23px;top:32px;bottom:32px;
  width:2px;
  background:linear-gradient(180deg,var(--yellow),var(--pink));
  border-radius:2px;
  opacity:.25;
}

.step-card{
  display:flex;align-items:flex-start;gap:16px;
  padding:20px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  transition:all var(--duration) var(--ease);
  position:relative;
}
.step-card:hover{
  border-color:var(--border-hover);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transform:translateY(-1px);
}

.step-number{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;
  background:var(--gradient-cta);
  color:var(--bg-primary);
  font-size:1rem;font-weight:800;
  border-radius:50%;
  flex-shrink:0;
  position:relative;z-index:1;
}
.step-content{flex:1}
.step-title{
  font-size:1rem;font-weight:700;
  margin:0 0 6px;
  color:var(--text-primary);
  letter-spacing:-.01em;
}
.step-card p{
  font-size:.875rem;
  color:var(--text-secondary);
  margin:0;line-height:1.7;
}

@media(max-width:480px){
  .steps-meta{flex-direction:column;gap:8px}
  .step-card{padding:16px;gap:12px}
  .step-number{min-width:34px;height:34px;font-size:.875rem}
  .steps-container::before{left:20px}
}

/* ===== COMPARISON TABLE ===== */
.comparison-table{width:100%;overflow-x:auto;margin:24px 0}
.comparison-table table{width:100%;border-collapse:collapse;min-width:600px}
.comparison-table th,.comparison-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-color);font-size:.875rem}
.comparison-table th{background:var(--bg-card);font-weight:600;color:var(--text-primary);position:sticky;top:0}
.comparison-table td{color:var(--text-secondary)}
.comparison-table tr:hover td{background:rgba(255,255,255,.02)}
@media(max-width:768px){
  .comparison-table{overflow-x:visible}
  .comparison-table table{min-width:0}
  .comparison-table table,
  .comparison-table thead,
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table th,
  .comparison-table td{display:block;width:100%}
  .comparison-table thead{
    position:absolute;left:-9999px;top:-9999px;
    clip:rect(0 0 0 0);height:1px;overflow:hidden
  }
  .comparison-table tbody tr{
    margin-bottom:12px;
    border:1px solid var(--border-color);
    border-radius:var(--radius);
    background:var(--bg-card);
    overflow:hidden
  }
  .comparison-table td{
    padding:10px 14px;
    border-bottom:1px solid var(--border-color);
    text-align:right;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px
  }
  .comparison-table td::before{
    content:attr(data-label);
    font-weight:600;
    font-size:.8rem;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.02em;
    text-align:left;
    flex-shrink:0;
    max-width:45%
  }
  .comparison-table tbody tr td:last-child{border-bottom:none}
}

/* ===== PAYMENT METHOD CARDS ===== */
.payment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:32px 0}
.payment-card{
  padding:24px;background:var(--bg-card);
  border:1px solid var(--border-color);border-radius:var(--radius);
  text-align:center;transition:all var(--duration) var(--ease);
}
.payment-card:hover{border-color:var(--border-hover);transform:translateY(-1px);box-shadow:var(--shadow)}
.payment-card h3{font-size:.95rem;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.payment-card p{font-size:.82rem;color:var(--text-muted);margin-bottom:14px}

/* ===== PAYMENT METHOD LINK CARDS ===== */
.payment-links-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
  margin:24px 0 32px;
}
.payment-links-grid--single{
  grid-template-columns:1fr;
  max-width:340px;
  margin:12px 0 20px;
}
.payment-link-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:24px 20px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  text-decoration:none;
  text-align:center;
  transition:all var(--duration) var(--ease);
}
.payment-link-card:hover{
  border-color:var(--yellow);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.payment-link-img{
  display:block;
  width:120px;
  height:56px;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  border-radius:var(--radius);
  margin-bottom:4px;
  flex-shrink:0;
}
.payment-link-more{
  font-size:.8rem;
  font-weight:600;
  color:var(--yellow);
  letter-spacing:.02em;
  margin-top:2px;
}
.payment-link-card:hover .payment-link-more{
  text-decoration:underline;
}
.payment-link-name{
  font-size:1rem;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:-.01em;
}
.payment-link-desc{
  font-size:.8rem;
  color:var(--text-muted);
  line-height:1.4;
}
.payment-link-card:hover .payment-link-name{
  color:var(--yellow);
}
@media(max-width:768px){
  .payment-links-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .payment-links-grid.payment-links-grid--single{
    grid-template-columns:1fr;
    max-width:100%;
  }
  .payment-link-card{padding:16px 12px}
  .payment-link-img{width:100px;height:48px}
  .payment-link-name{font-size:.88rem}
  .payment-link-desc{font-size:.75rem}
}
@media(max-width:480px){
  .payment-links-grid{
    grid-template-columns:1fr;
  }
}

/* ===== RATING STARS ===== */
.rating{display:flex;gap:2px;align-items:center}
.rating .star{color:var(--yellow);font-size:.9rem}
.rating .star.empty{color:var(--text-muted)}
.rating-value{margin-left:6px;font-weight:700;font-size:.85rem}

/* ===== FOOTER ===== */
.footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border-color);
  margin-top:80px;padding:48px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:32px;
  margin-bottom:0;
}
/* Footer: luottamusmerkit / kumppanilogot (DMCA, …) */
.footer-trust-badges{
  padding:24px 0 12px;
  border-top:1px solid var(--border-color);
}
.footer-trust-badges-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:20px 32px;
}
.footer-trust-badge{
  flex-shrink:0;line-height:0;
}
.footer-trust-badge img{
  display:block;max-width:120px;width:auto;height:auto;
}
.footer-trust-badge a{
  display:inline-block;
  opacity:.92;
  transition:opacity var(--duration) var(--ease);
}
.footer-trust-badge a:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
.footer-trust-badge a:hover{opacity:1}
.footer-trust-badge--local img{
  max-height:44px;
  max-width:160px;
  width:auto;
  object-fit:contain;
}

.footer-col h4{
  font-size:.75rem;font-weight:600;
  margin-bottom:14px;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.footer-col a{
  display:block;padding:3px 0;
  font-size:.82rem;color:var(--text-secondary);
  transition:color var(--duration) var(--ease);
}
.footer-col a:hover{color:var(--yellow)}
.footer-col p{font-size:.8rem;color:var(--text-muted);line-height:1.6}

.footer-info{border-top:1px solid var(--border-color);padding:28px 0}
.footer-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:768px){.footer-info-grid{grid-template-columns:1fr}}

.footer-info-box{
  padding:18px;
  background:var(--bg-card);
  border-radius:var(--radius-sm);
  font-size:.78rem;color:var(--text-muted);line-height:1.7;
  border:1px solid var(--border-color);
}
.footer-info-box h5{font-size:.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.footer-info-box a{color:var(--yellow);text-decoration:underline}

.k18-badge{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 0;
  border-top:1px solid var(--border-color);
  font-size:.78rem;color:var(--text-muted);text-align:center;
}
.k18-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  background:#b91c1c;color:#fff;
  font-size:.8rem;font-weight:800;
  border-radius:var(--radius-xs);
  flex-shrink:0;letter-spacing:-.02em;line-height:1;
}

.footer-links-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;
  padding:16px 0;
  border-top:1px solid var(--border-color);
}
.footer-links-row a{
  font-size:.8rem;color:var(--text-muted);text-decoration:none;
  transition:color .2s;
}
.footer-links-row a:hover{color:var(--yellow)}

.footer-bottom{
  border-top:1px solid var(--border-color);
  padding:18px 0;text-align:center;
  font-size:.75rem;color:var(--text-muted);
  letter-spacing:.01em;
}
.footer-bottom a{color:var(--text-muted)}
.footer-bottom a:hover{color:var(--yellow)}

/* ===== BADGES ===== */
.badge{
  display:inline-block;padding:3px 10px;
  font-size:.7rem;font-weight:600;
  border-radius:var(--radius-pill);
  letter-spacing:.04em;text-transform:uppercase;
}
.badge-new{background:rgba(236,72,153,.1);color:var(--pink-light)}
.badge-hot{background:rgba(245,197,24,.1);color:var(--yellow)}
.badge-verified{background:rgba(34,197,94,.1);color:#22c55e}

/* ===== WIDGET BAR ===== */
.widget-bar{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:32px 0}
.widget-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
}
.widget-item .widget-number{
  font-size:1.4rem;font-weight:800;
  background:var(--gradient-cta);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-variant-numeric:tabular-nums;
}
.widget-item .widget-label{font-size:.75rem;color:var(--text-muted);line-height:1.3}

/* ===== SCROLL TO TOP ===== */
.scroll-top{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom, 0px));right:24px;
  width:40px;height:40px;
  background:var(--bg-elevated);
  border:1px solid var(--border-hover);
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:all var(--duration) var(--ease);
  z-index:90;
  box-shadow:var(--shadow);
  will-change:transform;
}
.scroll-top.visible{opacity:1;visibility:visible}
body:has(.review-sticky-cta) .scroll-top{bottom:calc(100px + env(safe-area-inset-bottom, 0px))}
.scroll-top:hover{
  border-color:rgba(245,197,24,.3);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(245,197,24,.15);
}
.scroll-top svg{width:18px;height:18px;stroke:var(--text-secondary)}
.scroll-top:hover svg{stroke:var(--yellow)}

/* ===== EVÄSTEILMOITUS ===== */
/* Aina alhaalla keskellä – mobiilissa, läppärillä ja työpöydällä.
   Riittävä pelivara molemmilta sivuilta ettei mene viewportin yli ja
   tekstit pysyvät kortin sisällä. */
.cookie-banner{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:10002;
  width:min(440px, calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  padding:0;
  box-sizing:border-box;
  pointer-events:none;
}
.cookie-banner-inner{
  pointer-events:auto;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.04);
  /* Estä tekstien valuminen ulos kortin reunoista pitkillä sanoilla / linkeillä */
  overflow:hidden;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.cookie-banner-title{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin:0 0 8px;
}
.cookie-banner-text{
  font-size:.8125rem;
  line-height:1.55;
  color:var(--text-secondary);
  margin:0 0 14px;
}
.cookie-banner-text a{
  color:var(--yellow);
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-word;
}
.cookie-banner-text a:hover{color:var(--yellow-light)}
.cookie-banner-actions{
  display:flex;
  justify-content:center;
}
.cookie-banner .btn-cookie-accept{
  padding:10px 22px;
  font-size:.875rem;
  min-height:40px;
  width:100%;
  max-width:240px;
}
/* Tabletti ja siitä ylöspäin: painike oikealle ja luonnolliseen leveyteen */
@media(min-width:600px){
  .cookie-banner-actions{justify-content:flex-end}
  .cookie-banner .btn-cookie-accept{width:auto}
}
/* Kasinon arvostelusivu: sticky CTA päällä – nostetaan evästepalkki */
body:has(.review-sticky-cta) .cookie-banner{
  bottom:calc(88px + max(0px, env(safe-area-inset-bottom)));
}
@media(min-width:769px){
  body:has(.review-sticky-cta) .cookie-banner{
    bottom:calc(96px + max(0px, env(safe-area-inset-bottom)));
  }
}

/* ===== REVIEW LISTING (Arvostelut) ===== */

.reviews-filter{
  margin:24px 0 16px;
  background:var(--card-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:20px 24px;
}
.reviews-search{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--text-primary);
  font-size:.95rem;
  outline:none;
  transition:border-color .2s;
}
.reviews-search::placeholder{color:var(--text-secondary);opacity:.6}
.reviews-search:focus{border-color:var(--pink)}
.reviews-letters{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:16px 0 0;
}
.reviews-letter-btn{
  background:var(--bg);
  border:1px solid var(--border-color);
  color:var(--text-secondary);
  min-width:32px;
  padding:6px 4px;
  border-radius:6px;
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
  transition:all .15s;
  line-height:1;
  text-align:center;
}
.reviews-letter-btn[data-letter="all"]{
  min-width:auto;
  padding:6px 12px;
}
.reviews-letter-btn:hover{border-color:var(--pink);color:var(--text-primary)}
.reviews-letter-btn.active{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
}
.reviews-filter-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border-color);
}
.reviews-filter-group{}
.reviews-filter-label{
  display:block;
  font-size:.75rem;
  font-weight:700;
  color:var(--text-secondary);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.reviews-filter-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.reviews-filter-btn{
  background:var(--bg);
  border:1px solid var(--border-color);
  color:var(--text-secondary);
  padding:6px 14px;
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
}
.reviews-filter-btn:hover{border-color:var(--pink);color:var(--text-primary)}
.reviews-filter-btn.active{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
}
.reviews-result-count{
  font-size:.82rem;
  color:var(--text-secondary);
  margin:12px 0 0;
  padding-top:12px;
  border-top:1px solid var(--border-color);
}
@media(max-width:600px){
  .reviews-filter{padding:16px}
  .reviews-filter-row{grid-template-columns:1fr}
  .reviews-letter-btn{min-width:28px;padding:5px 3px;font-size:.7rem}
}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin:32px 0 40px;
}
@media(max-width:1024px){
  .reviews-grid{grid-template-columns:repeat(2, 1fr)}
}
.review-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-decoration:none;
  color:var(--text-primary);
  transition:all var(--duration) var(--ease);
}
.review-card:hover{
  border-color:var(--yellow);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.review-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  background:var(--bg-elevated);
  border-bottom:1px solid var(--border-color);
  min-height:90px;
}
.review-card-logo{
  max-width:140px;
  max-height:70px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:var(--radius);
}
.review-card-logo-placeholder{
  font-weight:700;
  font-size:1rem;
  color:var(--text-primary);
}
.review-card-rating{
  display:flex;
  align-items:baseline;
  gap:2px;
  background:linear-gradient(135deg, var(--yellow), #f59e0b);
  padding:8px 14px;
  border-radius:var(--radius);
  flex-shrink:0;
}
.review-card-rating-value{
  font-size:1.4rem;
  font-weight:800;
  color:#000;
  line-height:1;
}
.review-card-rating-max{
  font-size:.85rem;
  font-weight:600;
  color:rgba(0,0,0,.5);
}
.review-card-body{
  padding:20px 24px;
  flex:1;
}
.review-card-name{
  font-size:1.1rem;
  font-weight:700;
  margin:0 0 10px;
  letter-spacing:-.01em;
  color:var(--text-primary);
}
.review-card-bonus{
  font-size:.85rem;
  font-weight:500;
  color:var(--yellow);
  margin-bottom:14px;
  line-height:1.4;
}
.review-card-pros{
  list-style:none !important;
  padding:0;
  margin:0 0 14px;
}
.review-card-pros li{
  position:relative;
  padding-left:18px;
  font-size:.82rem;
  color:var(--text-secondary);
  line-height:1.7;
}
.review-card-pros li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:#22c55e;
  font-weight:700;
  font-size:.75rem;
}
.review-card-details{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:10px;
}
.review-card-details span{
  font-size:.78rem;
  color:var(--text-muted);
  font-weight:500;
}
.review-card-footer{
  padding:16px 24px;
  border-top:1px solid var(--border-color);
  text-align:center;
}
.review-card-link{
  font-size:.88rem;
  font-weight:600;
  color:var(--yellow);
  transition:color var(--duration) var(--ease);
}
.review-card:hover .review-card-link{
  color:#f59e0b;
}

@media(max-width:768px){
  .reviews-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* ===== LATEST REVIEWS (kasinot/ alasivut) ===== */
.latest-reviews-section{
  margin:48px 0 0;
  padding-top:32px;
  border-top:1px solid var(--border-color);
}
.latest-reviews-section h2{
  font-size:1.3rem;
  margin:0 0 20px;
  color:var(--text-primary);
}
.latest-reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
}
@media(max-width:768px){
  .latest-reviews-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* ===== VS COMPARISON CARDS ===== */

.vs-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:28px 0 32px;
}
.vs-card{
  background:var(--bg-card);
  border-radius:14px;
  padding:28px 24px;
  border:1px solid var(--border);
}
.vs-card-green{
  border-color:rgba(34,197,94,.4);
  background:linear-gradient(135deg, rgba(34,197,94,.06) 0%, var(--bg-card) 100%);
}
.vs-card-red{
  border-color:rgba(239,68,68,.4);
  background:linear-gradient(135deg, rgba(239,68,68,.06) 0%, var(--bg-card) 100%);
}
.vs-card-title{
  font-size:1.1rem;
  font-weight:800;
  margin:0 0 16px;
}
.vs-card-green .vs-card-title{color:#22c55e}
.vs-card-red .vs-card-title{color:#ef4444}
.vs-card-list{
  list-style:none !important;
  padding:0 !important;
  margin:0 0 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vs-card-list li{
  font-size:.9rem;
  color:var(--text-secondary);
  line-height:1.5;
  padding-left:20px;
  position:relative;
  list-style:none !important;
}
.vs-card-green .vs-card-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#22c55e;
  font-weight:700;
}
.vs-card-red .vs-card-list li::before{
  content:"⚠";
  position:absolute;
  left:0;
  font-size:.8rem;
}
.vs-card-verdict{
  font-size:.84rem;
  color:var(--text-muted);
  line-height:1.5;
  padding-top:14px;
  border-top:1px solid var(--border);
  font-style:italic;
}
@media(max-width:768px){
  .vs-cards{grid-template-columns:1fr;gap:16px}
}

/* ===== EVENT INFO BOX ===== */

.event-info-box{
  background:linear-gradient(135deg, #14141f 0%, #1a1a2e 100%);
  border:1px solid var(--beatz-green);
  border-radius:14px;
  padding:28px 32px;
  box-shadow:0 0 24px var(--beatz-green-glow);
  margin:32px 0;
  box-shadow:0 0 20px rgba(234,179,8,.06);
}
.event-info-title{
  font-size:1.2rem;
  font-weight:800;
  color:var(--beatz-green);
  margin:0 0 20px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.event-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 32px;
}
.event-info-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.event-info-label{
  font-size:.78rem;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.event-info-value{
  font-size:.95rem;
  font-weight:500;
  color:var(--text-primary);
  line-height:1.5;
}
.event-info-value a{
  color:var(--beatz-green);
  text-decoration:none;
  font-weight:700;
  transition:color .15s ease;
}
.event-info-value a:hover{
  color:var(--beatz-green-dark);
  text-decoration:underline;
}
@media(max-width:600px){
  .event-info-box{padding:22px 18px}
  .event-info-grid{grid-template-columns:1fr;gap:14px}
}

/* ===== VIDEO EMBED ===== */

.video-embed{
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  margin:32px 0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#000;
}
.video-embed iframe{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:0;
}

/* ===== FIGHT CARDS ===== */

.fight-card-grid{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:28px 0 36px;
}
.fight-card{
  position:relative;
  background:linear-gradient(135deg, #14141f 0%, #1a1a2e 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:28px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fight-card:hover{
  border-color:rgba(255,255,255,.15);
  box-shadow:0 4px 24px rgba(0,0,0,.3);
}
.fight-card-main{
  border-color:var(--beatz-green);
  background:linear-gradient(135deg, #0a1f0c 0%, #14201f 50%, #14141f 100%);
  box-shadow:0 0 20px var(--beatz-green-glow);
  padding-top:40px;
}
.fight-card-main:hover{
  border-color:var(--beatz-green);
  box-shadow:0 0 32px rgba(34,255,55,.28);
}
.fight-card-badge{
  position:absolute;
  top:-1px;
  left:50%;
  transform:translateX(-50%);
  background:var(--beatz-green);
  color:#000;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:4px 16px;
  border-radius:0 0 8px 8px;
}
.fight-card-sport{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--beatz-green);
  padding:4px 12px;
  background:rgba(34,255,55,.06);
  border:1px solid rgba(34,255,55,.28);
  border-radius:999px;
  align-self:center;
}
.fight-card-fighters{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
}
.fighter{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1;
  min-width:0;
}
.fighter-left{flex-direction:row}
.fighter-right{flex-direction:row-reverse}
.fighter-avatar{
  flex-shrink:0;
  width:84px;
  height:84px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:inset 0 -10px 20px rgba(0,0,0,.25);
}
.fighter-avatar--red{
  background:radial-gradient(circle at 30% 28%, #ef4444 0%, #991b1b 65%, #4c0a0a 100%);
  border-color:rgba(239,68,68,.45);
}
.fighter-avatar--blue{
  background:radial-gradient(circle at 30% 28%, #3b82f6 0%, #1e3a8a 65%, #0a1640 100%);
  border-color:rgba(59,130,246,.45);
}
.fighter-avatar img{
  width:74%;
  height:74%;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.fighter-info{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  flex:1;
}
.fighter-left .fighter-info{align-items:flex-start;text-align:left}
.fighter-right .fighter-info{align-items:flex-end;text-align:right}
.fighter-name{
  display:block;
  font-size:1.1rem;
  font-weight:700;
  color:var(--text-primary);
  line-height:1.25;
  word-break:break-word;
}
.fighter-meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  color:var(--text-muted);
  font-weight:500;
  line-height:1.3;
}
.fighter-right .fighter-meta{flex-direction:row-reverse}
.fighter-flag{
  display:inline-block;
  width:18px;
  height:13px;
  vertical-align:-2px;
  border-radius:2px;
  border:1px solid rgba(255,255,255,.18);
  object-fit:cover;
  flex-shrink:0;
}
.fighter-record{
  letter-spacing:.02em;
}
.fighter-odds{
  display:inline-block;
  margin-top:2px;
  padding:5px 14px;
  background:rgba(34,255,55,.08);
  border:1px solid rgba(34,255,55,.28);
  border-radius:6px;
  font-size:1rem;
  font-weight:800;
  color:var(--beatz-green);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  line-height:1;
  text-shadow:0 0 12px rgba(34,255,55,.25);
}
.fight-vs{
  font-size:1.1rem;
  font-weight:800;
  color:var(--beatz-green);
  flex-shrink:0;
  text-shadow:0 0 12px rgba(34,255,55,.45);
}
.fight-card-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 28px;
  background:var(--beatz-green);
  color:#000;
  font-size:.88rem;
  font-weight:700;
  border-radius:8px;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fight-card-btn:hover{
  background:var(--beatz-green-dark);
  box-shadow:0 0 18px var(--beatz-green-glow);
  transform:scale(1.03);
}
@media(max-width:760px){
  .fight-card{padding:20px 16px;gap:14px}
  .fight-card-main{padding-top:34px}
  .fight-card-fighters{gap:10px}
  .fighter{gap:10px}
  .fighter-avatar{width:60px;height:60px;border-width:1.5px}
  .fighter-name{font-size:.92rem}
  .fighter-meta{font-size:.72rem;gap:5px}
  .fighter-flag{width:15px;height:11px;vertical-align:-1px}
  .fighter-odds{font-size:.88rem;padding:4px 10px}
  .fight-vs{font-size:.95rem}
  .fight-card-btn{padding:9px 22px;font-size:.82rem}
}
@media(max-width:480px){
  .fight-card{padding:16px 12px}
  .fight-card-main{padding-top:32px}
  .fight-card-badge{font-size:.66rem;padding:3px 12px;letter-spacing:.06em}
  .fight-card-sport{font-size:.62rem;padding:3px 10px;letter-spacing:.08em}
  .fight-card-fighters{gap:6px}
  .fighter{gap:8px}
  .fighter-avatar{width:48px;height:48px}
  .fighter-name{font-size:.82rem;line-height:1.2}
  .fighter-meta{font-size:.68rem;gap:4px}
  .fighter-flag{width:13px;height:10px}
  .fighter-odds{font-size:.8rem;padding:3px 8px}
  .fight-vs{font-size:.85rem}
}

/* ===== ICE CAGE — sininen tehosteväri (#046bd2) ===== */
.ice-cage-theme{
  --beatz-green:#046bd2;
  --beatz-green-dark:#0356a8;
  --beatz-green-glow:rgba(4,107,210,.20);
}
.ice-cage-theme.fight-card-grid .fight-card-main,
.ice-cage-theme .fight-card-main{
  background:linear-gradient(135deg, #07172b 0%, #0e1d2f 50%, #14141f 100%);
}
.ice-cage-theme .fight-card-main:hover{
  box-shadow:0 0 32px rgba(4,107,210,.28);
}
.ice-cage-theme .fight-card-sport{
  background:rgba(4,107,210,.07);
  border-color:rgba(4,107,210,.30);
}
.ice-cage-theme .fighter-odds{
  background:rgba(4,107,210,.10);
  border-color:rgba(4,107,210,.30);
  text-shadow:0 0 12px rgba(4,107,210,.25);
}
.ice-cage-theme .fight-vs{
  text-shadow:0 0 12px rgba(4,107,210,.45);
}

/* ===== ARTICLE LISTING (Artikkelit) ===== */

.articles-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  margin:32px 0 40px;
}
.article-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.article-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  border-color:var(--yellow);
}
.article-card-image{
  width:100%;
  aspect-ratio:2/1;
  overflow:hidden;
  background:var(--bg-darker, #0a0a0f);
  display:flex;
  align-items:center;
  justify-content:center;
}
.article-card-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .3s ease;
}
.article-card:hover .article-card-image img{
  transform:scale(1.05);
}
.article-card-body{
  padding:24px 24px 16px;
  flex:1;
}
.article-card-title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 10px;
  line-height:1.4;
}
.article-card-desc{
  font-size:.88rem;
  color:var(--text-secondary);
  line-height:1.6;
  margin:0 0 12px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.article-card-date{
  font-size:.78rem;
  color:var(--text-muted);
}
.article-card-footer{
  padding:14px 24px;
  border-top:1px solid var(--border);
}
.article-card-link{
  font-size:.88rem;
  font-weight:600;
  color:var(--yellow);
  transition:color .15s ease;
}
.article-card:hover .article-card-link{
  color:#f59e0b;
}
@media(max-width:991px){
  .articles-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media(max-width:768px){
  .articles-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* ===== CASINO REVIEW PAGE ===== */

/* Kompakti author-box H1:n ja bannerin välissä (max-leveys kuten .review-h1) */
.review-lead-author{
  max-width:var(--content-width);
  margin:0 auto;
}
.review-lead-author .author-box{
  margin-bottom:12px;
}

/* Banner – 3-column: logo, bonus, rating */
.review-banner{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
  margin:32px 0 0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border-color);
  background:var(--bg-card);
  max-width:var(--content-width);
  margin-left:auto;margin-right:auto;
}
.review-banner-logo{
  background:var(--bg-secondary);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  min-height:180px;
}
.review-banner-logo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.review-banner-placeholder{
  padding:32px;text-align:center;
  font-size:1.1rem;font-weight:700;color:var(--text-muted);
}
.review-banner-bonus,
.review-banner-rating{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:28px 20px;text-align:center;
  border-left:1px solid var(--border-color);
}
.review-banner-label{
  font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);margin-bottom:10px;
}
.review-banner-bonus-text{
  font-size:1.05rem;font-weight:700;
  color:var(--yellow);line-height:1.35;
}
.review-banner-rating{
  background:var(--gradient-subtle);
}
.review-rating-score{
  font-size:2.2rem;font-weight:800;
  background:var(--gradient-cta);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1;letter-spacing:-.03em;
}
.review-rating-score span{
  font-size:1rem;font-weight:600;
  -webkit-text-fill-color:#ffffff;
  opacity:.6;
}
.review-rating-sub{
  font-size:.72rem;color:var(--text-muted);
  margin-top:6px;line-height:1.4;
}

/* Banner mobile */
@media(max-width:700px){
  .review-banner{
    grid-template-columns:1fr;
  }
  .review-banner-logo{min-height:200px}
  .review-banner-bonus,
  .review-banner-rating{
    border-left:none;
    border-top:1px solid var(--border-color);
    padding:20px;
  }
  .review-banner-bonus{
    display:grid;grid-template-columns:auto 1fr;
    gap:4px 12px;align-items:center;text-align:left;
  }
  .review-banner-bonus .review-banner-label{margin-bottom:0}
  .review-banner-rating{
    display:grid;grid-template-columns:auto 1fr;
    gap:0 16px;align-items:center;text-align:left;
  }
  .review-banner-rating .review-banner-label{
    grid-column:1/-1;margin-bottom:4px;
  }
  .review-rating-score{font-size:1.8rem}
  .review-rating-sub{margin-top:0;grid-column:2;grid-row:2}
}

/* Sticky CTA – sivuston alareuna (kasinot-alasivut) */
.review-sticky-cta{
  position:fixed;
  /* JS asettaa --sticky-cta-vv-bottom iOS-/Safari-näköikkunasynkissä */
  bottom:var(--sticky-cta-vv-bottom, 0px);
  left:0;
  right:0;
  z-index:800;
  background:var(--bg-card);
  border-top:1px solid var(--border-color);
  padding:12px 24px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -4px 24px rgba(0,0,0,.35);
  /* Piilotettu oletuksena: nostetaan näkyviin vasta kun lukija on
     scrollannut 25 % sivun pituudesta. E-E-A-T-syistä emme näytä
     monetisaatio-CTA:ta ennen kuin pääsisältöä on luettu. */
  transform:translateY(110%);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:transform .35s var(--ease), opacity .25s var(--ease), visibility 0s linear .35s;
}
.review-sticky-cta.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
  visibility:visible;
  transition:transform .35s var(--ease), opacity .25s var(--ease), visibility 0s linear 0s;
}
@media (prefers-reduced-motion:reduce){
  .review-sticky-cta{transition:opacity .15s linear, visibility 0s linear .15s;transform:none;}
  .review-sticky-cta.is-visible{transition:opacity .15s linear, visibility 0s linear 0s;transform:none;}
}
.review-sticky-cta::after{
  content:'';
  position:absolute;
  left:0;right:0;
  bottom:-100px;
  height:100px;
  background:var(--bg-card);
}
.review-sticky-cta-inner{
  max-width:700px;
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px 20px;
  justify-content:space-between;
}
.review-sticky-cta-logo{
  flex-shrink:0;
  width:100px;
  height:56px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--bg-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
}
.review-sticky-cta-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.review-sticky-cta-name{
  font-size:.8rem;
  font-weight:700;
  color:var(--text-muted);
  text-align:center;
  padding:4px;
  line-height:1.2;
}
.review-sticky-cta-bonus{
  flex:1;
  min-width:0;
  font-size:.875rem;
  font-weight:600;
  color:var(--text-primary);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.review-sticky-cta-btn{
  flex-shrink:0;
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* Body-padding lisätään vain kun sticky on aktivoitunut, jotta sivun alaosassa
   ei ole turhaa tyhjää tilaa ennen scrollaamista. */
body:has(.review-sticky-cta.is-visible){
  padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px));
}
@media(max-width:640px){
  .review-sticky-cta{
    padding:10px 16px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .review-sticky-cta-inner{
    width:100%;
    gap:10px 12px;
    min-width:0;
  }
  .review-sticky-cta-logo{
    width:64px;
    height:40px;
    flex-shrink:0;
  }
  .review-sticky-cta-bonus{
    font-size:.78rem;
    text-align:left;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    line-height:1.3;
  }
  .review-sticky-cta-btn{
    padding:12px 16px;
    font-size:.85rem;
    min-height:44px;
    min-width:auto;
  }
}

/* Affiliate-disclosure: näkyvä mutta hillitty luottamussignaali bonus-laatikon
   ja CTA-painikkeen välissä. E-E-A-T-syistä ei kollapsoituna. */
.review-affiliate-notice{
  max-width:var(--content-width);
  margin:14px auto 0;
  padding:10px 14px;
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-color);
  border-radius:var(--radius-xs);
  font-size:.78rem;
  color:var(--text-muted);
  line-height:1.55;
}
.review-affiliate-notice-icon{
  flex-shrink:0;
  margin-top:2px;
  opacity:.7;
}
.review-affiliate-notice p{margin:0;}
.review-affiliate-notice strong{
  color:var(--text-secondary);
  font-weight:700;
}
.review-affiliate-notice-link{
  color:var(--yellow);
  text-decoration:underline;
  text-decoration-color:var(--yellow-light);
  text-underline-offset:2px;
  white-space:nowrap;
}
.review-affiliate-notice-link:hover{
  color:var(--yellow-light);
  text-decoration-color:currentColor;
}

/* Intro + CTA */
.review-intro{
  max-width:var(--content-width);margin:24px auto 0;
  padding:24px 28px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
}
.review-intro p{
  font-size:.925rem;color:var(--text-secondary);line-height:1.75;
  margin:0 0 18px;
}
.review-intro-actions{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.review-intro-actions .btn-cta{
  padding:12px 36px;font-size:.9rem;
}
.review-disclaimer{
  font-size:.75rem;color:var(--text-muted);
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
}
.review-disclaimer-sep{opacity:.55;user-select:none;}
.review-ad{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 6px;
  font-size:.62rem;font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  border:1px solid var(--border-color);
  border-radius:var(--radius-xs);
  background:rgba(255,255,255,.04);
}
.review-k18{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  background:#b91c1c;color:#fff;
  font-size:.7rem;font-weight:800;
  border-radius:var(--radius-xs);
  letter-spacing:-.02em;line-height:1;
}

/* H1 */
.review-h1{
  max-width:var(--content-width);margin:36px auto 24px;
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:800;line-height:1.15;
  letter-spacing:-.03em;
  color:var(--text-primary);
}

/* Details grid: 3-column – details, pros, cons */
.review-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  max-width:var(--content-width);margin:24px auto 36px;
}

/* Trustpilot-linkkilaatikko (valinnainen frontmatter: trustpilot_url) */
.trustpilot-box{
  --tp-green:#00b67a;
  --tp-green-dim:rgba(0,182,122,.12);
  max-width:var(--content-width);
  margin:0 auto 32px;
  padding:22px 26px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px 28px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(135deg, var(--tp-green-dim) 0%, rgba(255,255,255,.02) 42%, var(--bg-card) 100%);
  border:1px solid rgba(0,182,122,.28);
  box-shadow:0 12px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
}
.trustpilot-box::before{
  content:"";
  position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg, var(--tp-green) 0%, rgba(0,182,122,.45) 100%);
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
}
.trustpilot-box-brand{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  min-width:0;
}
.trustpilot-stars{
  font-size:1.05rem;line-height:1;
  letter-spacing:.15em;
  color:var(--tp-green);
  text-shadow:0 0 20px rgba(0,182,122,.35);
}
.trustpilot-wordmark{
  font-size:.72rem;font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-primary);
  opacity:.92;
}
.trustpilot-box-body{min-width:0}
.trustpilot-box-title{
  margin:0 0 8px;
  font-size:1.05rem;font-weight:800;
  letter-spacing:-.02em;
  color:var(--text-primary);
  line-height:1.25;
}
.trustpilot-box-text{
  margin:0;
  font-size:.9rem;line-height:1.6;
  color:var(--text-secondary);
}
.trustpilot-box-text strong{color:var(--text-primary);font-weight:700}
.trustpilot-box-action{
  flex-shrink:0;
}
.trustpilot-box-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;
  font-size:.85rem;font-weight:700;
  color:#0a0a0b !important;
  text-decoration:none !important;
  border-radius:var(--radius-pill);
  background:linear-gradient(135deg, var(--tp-green) 0%, #00d68f 100%);
  box-shadow:0 4px 20px rgba(0,182,122,.35);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space:nowrap;
}
.trustpilot-box-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(0,182,122,.45);
}
.content-area .trustpilot-box--before-faq{
  margin-top:40px;
  max-width:100%;
}
@media(max-width:900px){
  .trustpilot-box{
    grid-template-columns:1fr;
    text-align:left;
    gap:16px;
    padding:20px 20px 22px;
  }
  .trustpilot-box-brand{
    flex-direction:row;align-items:center;gap:12px;
  }
  .trustpilot-box-action{width:100%}
  .trustpilot-box-btn{width:100%;box-sizing:border-box}
}

/* Rahapelien tukilinja / Peluuri (sisältösivut, esim. parhaat-nettikasinot) */
.support-line-banner{
  --sl-blue:#3b82f6;
  --sl-blue-dim:rgba(59,130,246,.12);
  position:relative;
  max-width:var(--content-width);
  margin:28px auto 0;
  padding:22px 24px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:18px 24px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(135deg, var(--sl-blue-dim) 0%, rgba(255,255,255,.03) 45%, var(--bg-card) 100%);
  border:1px solid rgba(59,130,246,.28);
  box-shadow:0 12px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.support-line-banner-accent{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  background:linear-gradient(180deg, var(--sl-blue) 0%, rgba(59,130,246,.45) 100%);
}
.support-line-banner-body{min-width:0;padding-left:8px}
.support-line-banner-title{
  margin:0 0 8px;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text-primary);
  line-height:1.25;
}
.support-line-banner-text{
  margin:0;
  font-size:.9rem;
  line-height:1.6;
  color:var(--text-secondary);
}
.support-line-banner-text strong{color:var(--text-primary);font-weight:700}
.support-line-banner-action{flex-shrink:0}
.support-line-banner-cta{
  white-space:nowrap;
  text-decoration:none !important;
}
.content-area .support-line-banner--inline{
  margin:40px auto 32px;
}
.content-area .support-line-banner--review{
  margin:20px 0 24px;
  max-width:100%;
}
@media(max-width:640px){
  .support-line-banner{
    grid-template-columns:1fr;
    padding:20px 20px 22px;
    gap:16px;
  }
  .support-line-banner-action{width:100%}
  .support-line-banner-cta{
    width:100%;
    box-sizing:border-box;
    justify-content:center;
  }
}
.review-box{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
}
.review-box-header{
  display:flex;align-items:center;gap:8px;
  padding:14px 18px;
  font-size:.85rem;font-weight:700;
  color:var(--text-primary);
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--border-color);
  letter-spacing:.01em;
}
.review-box-header svg{width:16px;height:16px;opacity:.5;flex-shrink:0}
.review-box-header-pros{color:#4ade80}
.review-box-header-pros svg{stroke:#4ade80;opacity:.8}
.review-box-header-cons{color:#f87171}
.review-box-header-cons svg{stroke:#f87171;opacity:.8}

/* Details table */
.review-details-table{
  width:100%;border-collapse:collapse;
}
.review-details-table tr{border-bottom:1px solid var(--border-color)}
.review-details-table tr:last-child{border-bottom:none}
.review-detail-label{
  padding:10px 14px;font-size:.8rem;font-weight:600;
  color:var(--text-muted);white-space:nowrap;
  width:40%;vertical-align:top;text-align:left;
}
.review-detail-value{
  padding:10px 14px;font-size:.8rem;
  color:var(--text-secondary);font-weight:500;
}
@media(max-width:768px){
  .review-details-table,
  .review-details-table tbody,
  .review-details-table tr,
  .review-details-table td,
  .review-details-table th{display:block;width:100%}
  .review-details-table tr{
    padding:8px 0;
    display:flex;
    flex-direction:column;
    gap:2px
  }
  .review-detail-label{
    width:100%;white-space:normal;
    padding:6px 14px 2px;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.02em
  }
  .review-detail-value{
    padding:2px 14px 6px;
    font-size:.84rem
  }
}

/* Pros/Cons lists */
.review-list{list-style:none;margin:0;padding:8px 0}
.review-list li{
  padding:9px 18px 9px 38px;
  font-size:.84rem;line-height:1.55;
  color:var(--text-secondary);
  position:relative;
  border-bottom:1px solid var(--border-color);
}
.review-list li:last-child{border-bottom:none}
.review-list-pros li::before{
  content:'✓';position:absolute;left:16px;top:9px;
  font-weight:700;font-size:.78rem;color:#4ade80;
}
.review-list-cons li::before{
  content:'✗';position:absolute;left:16px;top:9px;
  font-weight:700;font-size:.78rem;color:#f87171;
}

/* Grid responsive */
@media(max-width:900px){
  .review-grid{grid-template-columns:1fr}
}

/* ===== REVIEW BOTTOM CTA ===== */
.review-bottom-cta{
  text-align:center;
  padding:32px 24px;
  margin:40px 0;
  background:var(--gradient-subtle);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
}
.review-bottom-cta .btn-cta{
  padding:14px 40px;font-size:1rem;
}
.review-bottom-cta .review-disclaimer{
  display:flex;flex-wrap:wrap;justify-content:center;margin-top:12px;
  font-size:.75rem;color:var(--text-muted);
}

/* Vastausnosto ("verdict") artikkelin alussa – vihreä, ilman painikkeita */
.verdict-box{
  margin:8px 0 28px;
  padding:22px 26px;
  background:linear-gradient(135deg, rgba(34,197,94,.10) 0%, rgba(16,185,129,.06) 100%);
  border:1px solid rgba(34,197,94,.35);
  border-left:4px solid #22c55e;
  border-radius:var(--radius-lg);
}
.verdict-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;
  margin-bottom:10px;
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.45);
  border-radius:var(--radius-pill);
  color:#4ade80;
  font-weight:700;font-size:.82rem;
  letter-spacing:.01em;
}
.verdict-summary{
  margin:0 0 14px;
  font-size:1.05rem;line-height:1.6;
  color:var(--text-secondary);
}
.verdict-box ul.verdict-points{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
  font-size:.85rem;line-height:1.4;
}
.verdict-box ul.verdict-points li{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px 5px 10px;
  margin:0;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.3);
  border-radius:var(--radius-pill);
  color:var(--text-secondary);
  font-weight:500;
}
.verdict-box ul.verdict-points li::before{
  content:"✓";
  color:#4ade80;font-weight:800;
  font-size:.95em;line-height:1;
}
@media(max-width:640px){
  .verdict-box{padding:18px 18px}
}

/* Vihreä "turvallinen"-variantti */
.review-bottom-cta--safe{
  position:relative;
  background:linear-gradient(135deg, rgba(34,197,94,.10) 0%, rgba(16,185,129,.06) 100%);
  border:1px solid rgba(34,197,94,.35);
  box-shadow:0 0 40px rgba(34,197,94,.06);
}
.review-bottom-cta--safe::before{
  content:"✓";
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  margin:0 auto 14px;
  border-radius:50%;
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.45);
  color:#4ade80;
  font-size:1.4rem;font-weight:800;line-height:1;
}
.review-bottom-cta--safe .review-bottom-cta-title{
  color:#4ade80;
}
.review-bottom-cta--safe .btn-cta-outline{
  border-color:rgba(34,197,94,.55);
  color:#86efac;
}
.review-bottom-cta--safe .btn-cta-outline:hover{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.85);
  color:#bbf7d0;
}

/* Keltainen "turvallinen mutta varauksin" -variantti
   (esim. turvallinen kasino, jonka voitot eivät ole verovapaita) */
.verdict-box--warn{
  background:linear-gradient(135deg, rgba(245,158,11,.12) 0%, rgba(234,179,8,.07) 100%);
  border:1px solid rgba(245,158,11,.4);
  border-left:4px solid #f59e0b;
}
.verdict-box--warn .verdict-badge{
  background:rgba(245,158,11,.18);
  border:1px solid rgba(245,158,11,.5);
  color:#fbbf24;
}
.verdict-box--warn ul.verdict-points li{
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.32);
}
.verdict-box--warn ul.verdict-points li::before{
  content:"!";
  color:#fbbf24;
}

.review-bottom-cta--warn{
  position:relative;
  background:linear-gradient(135deg, rgba(245,158,11,.12) 0%, rgba(234,179,8,.07) 100%);
  border:1px solid rgba(245,158,11,.4);
  box-shadow:0 0 40px rgba(245,158,11,.07);
}
.review-bottom-cta--warn::before{
  content:"!";
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  margin:0 auto 14px;
  border-radius:50%;
  background:rgba(245,158,11,.18);
  border:1px solid rgba(245,158,11,.5);
  color:#fbbf24;
  font-size:1.4rem;font-weight:800;line-height:1;
}
.review-bottom-cta--warn .review-bottom-cta-title{
  color:#fbbf24;
}
.review-bottom-cta--warn .btn-cta-outline{
  border-color:rgba(245,158,11,.6);
  color:#fcd34d;
}
.review-bottom-cta--warn .btn-cta-outline:hover{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.9);
  color:#fde68a;
}

/* ===== JAA SOSIAALISET (kasinoarvostelut) ===== */
.review-share-banner{
  position:relative;
  max-width:var(--content-width);
  margin:2.75rem auto 0;
  padding:0;
  text-align:center;
}
.review-share-banner::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  background:var(--gradient-cta);
  opacity:.9;
  box-shadow:0 0 24px rgba(245,197,24,.2);
  z-index:1;
}
.review-share-inner{
  position:relative;
  z-index:0;
  margin-left:4px;
  padding:26px 24px 28px 26px;
  background:
    linear-gradient(145deg, rgba(245,197,24,.08) 0%, rgba(236,72,153,.05) 42%, var(--bg-card) 72%);
  border:1px solid rgba(245,197,24,.14);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow:
    0 16px 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.review-share-inner::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,197,24,.35), rgba(236,72,153,.25), transparent);
  opacity:.7;
}
.review-share-heading{
  font-size:clamp(1rem,2.5vw,1.15rem);
  font-weight:800;
  margin:0 0 .35rem;
  letter-spacing:-.03em;
  color:var(--text-primary);
  line-height:1.25;
}
.review-share-lead{
  margin:0 0 1.35rem;
  font-size:.82rem;
  font-weight:500;
  line-height:1.5;
  color:var(--text-muted);
  max-width:28rem;
  margin-left:auto;
  margin-right:auto;
}
.review-share-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:stretch;
}
.review-share-list li{
  display:flex;
}
.review-share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 18px;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.01em;
  border-radius:var(--radius-sm);
  text-decoration:none;
  color:var(--text-secondary);
  background:var(--bg-elevated);
  border:1px solid var(--border-color);
  transition:
    border-color var(--duration) var(--ease),
    background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}
.review-share-btn:hover{
  color:var(--text-primary);
  transform:translateY(-2px);
  opacity:1;
}
.review-share-btn:focus-visible{
  outline:2px solid var(--yellow-light);
  outline-offset:2px;
}
.review-share-fb:hover{
  border-color:rgba(24,119,242,.55);
  background:rgba(24,119,242,.14);
  box-shadow:0 8px 24px rgba(24,119,242,.15);
}
.review-share-li:hover{
  border-color:rgba(10,102,194,.55);
  background:rgba(10,102,194,.14);
  box-shadow:0 8px 24px rgba(10,102,194,.14);
}
.review-share-x:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  color:var(--text-primary);
}
.review-share-reddit:hover{
  border-color:rgba(255,69,0,.55);
  background:rgba(255,69,0,.12);
  box-shadow:0 8px 24px rgba(255,69,0,.14);
}
.review-share-tg:hover{
  border-color:rgba(38,165,228,.55);
  background:rgba(38,165,228,.14);
  box-shadow:0 8px 24px rgba(38,165,228,.15);
}
@media(max-width:520px){
  .review-share-inner{padding:22px 18px 24px 22px}
  .review-share-btn{min-height:44px;padding:10px 14px;font-size:.8rem}
}

/* ===== CASINO COMPARISON TABLE ===== */
.casino-comparison-section{
  margin:48px 0 32px;
  padding:32px 28px;
  background:linear-gradient(180deg, rgba(var(--yellow-rgb, 255,215,0), .035), rgba(var(--pink-rgb, 232,67,147), .03));
  border:1px solid rgba(var(--yellow-rgb, 255,215,0), .18);
  border-radius:var(--radius-lg, 16px);
}
.casino-comparison-title{
  margin:0 0 8px;
  font-size:1.5rem;
  font-weight:700;
  line-height:1.25;
  color:var(--text-primary);
  text-align:center;
}
.casino-comparison-lead{
  margin:0 auto 24px;
  max-width:640px;
  text-align:center;
  color:var(--text-secondary);
  font-size:.95rem;
  line-height:1.55;
}
.casino-comparison-wrapper{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius, 12px);
  border:1px solid var(--border-color);
  background:var(--bg-card, #fff);
}
.casino-comparison{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
  min-width:780px;
}
.casino-comparison thead th{
  text-align:left;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:14px 14px;
  background:rgba(0,0,0,.025);
  border-bottom:1px solid var(--border-color);
  white-space:nowrap;
}
.casino-comparison tbody td{
  padding:16px 14px;
  border-top:1px solid var(--border-color);
  vertical-align:middle;
  color:var(--text-primary);
}
.casino-comparison tbody tr:first-child td{
  border-top:none;
}
.casino-comparison tbody tr.is-current{
  background:linear-gradient(90deg, rgba(var(--yellow-rgb, 255,215,0), .07), rgba(var(--pink-rgb, 232,67,147), .05));
}
.casino-comparison-name-cell{
  min-width:140px;
}
.casino-comparison-name-link{
  text-decoration:none;
  font-weight:700;
}
.casino-comparison-name-link .casino-comparison-name{
  color:var(--yellow);
  transition:color var(--duration, .15s) var(--ease, ease);
}
.casino-comparison-name-link:hover .casino-comparison-name,
.casino-comparison-name-link:focus-visible .casino-comparison-name{
  color:var(--yellow-light);
  text-decoration:underline;
}
.casino-comparison-name{
  font-size:1rem;
  line-height:1.25;
  color:var(--text-primary);
}
.casino-comparison-payment{
  font-size:.82rem;
  color:var(--text-secondary);
  max-width:160px;
  line-height:1.4;
}
.casino-comparison-rating strong{
  font-size:1.15rem;
  font-weight:800;
  color:var(--text-primary);
}
.casino-comparison-rating-max{
  font-size:.78rem;
  color:var(--text-muted);
  font-weight:500;
}
.casino-comparison-bonus{
  max-width:200px;
  font-size:.85rem;
  line-height:1.45;
}
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Mobiili: pinotaan taulukko korteiksi (rivit = kortteja, sarakkeet = label/value-pareja). */
@media(max-width:760px){
  .casino-comparison-section{padding:24px 18px}
  .casino-comparison-title{font-size:1.25rem}
  .casino-comparison-wrapper{
    overflow-x:visible;
    border:none;
    background:transparent;
  }
  .casino-comparison{
    display:block;
    min-width:0;
  }
  .casino-comparison thead{display:none}
  .casino-comparison tbody,
  .casino-comparison tr{display:block}
  .casino-comparison tr{
    background:var(--bg-card, #fff);
    border:1px solid var(--border-color);
    border-radius:var(--radius, 12px);
    padding:16px 16px 12px;
    margin-bottom:14px;
  }
  .casino-comparison tbody tr.is-current{
    border-color:rgba(var(--pink-rgb, 232,67,147), .4);
    box-shadow:0 0 0 1px rgba(var(--pink-rgb, 232,67,147), .15);
  }
  .casino-comparison td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:8px 0;
    border-top:1px dashed var(--border-color);
    text-align:right;
  }
  .casino-comparison td:first-child{
    border-top:none;
    padding-top:0;
  }
  .casino-comparison td::before{
    content:attr(data-label);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-muted);
    flex-shrink:0;
  }
  .casino-comparison-name-cell::before{display:none}
  .casino-comparison-name-cell{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
}

/* ===== RELATED CASINOS ("Saatat olla kiinnostunut myös") ===== */
.related-casinos{
  margin:48px 0 32px;
  padding:32px 28px;
  border-radius:var(--radius-lg, 16px);
  background:linear-gradient(180deg, rgba(var(--pink-rgb, 232,67,147), .04), rgba(var(--yellow-rgb, 255,215,0), .03));
  border:1px solid rgba(var(--pink-rgb, 232,67,147), .12);
}
.related-casinos-title{
  margin:0 0 24px;
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-primary);
  text-align:center;
}
.related-casinos-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  max-width:720px;
  margin:0 auto;
}
.related-casino-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  background:var(--bg-card, #fff);
  border:1px solid var(--border, rgba(0,0,0,.08));
  border-radius:var(--radius, 12px);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.related-casino-card:hover,
.related-casino-card:focus-visible{
  transform:translateY(-3px);
  border-color:var(--pink, #e84393);
  box-shadow:0 12px 28px rgba(0,0,0,.10), 0 0 0 1px rgba(var(--pink-rgb, 232,67,147), .15);
  outline:none;
}
.related-casino-card-logo{
  position:relative;
  aspect-ratio:200 / 120;
  background:linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.related-casino-card-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.related-casino-card-logo-placeholder{
  font-size:1.05rem;
  font-weight:700;
  color:var(--text-secondary);
  padding:8px 12px;
  text-align:center;
}
.related-casino-card-body{
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.related-casino-card-name{
  font-size:1.05rem;
  font-weight:700;
  color:var(--text-primary);
  line-height:1.3;
}
.related-casino-card-rating{
  display:inline-block;
  width:fit-content;
  background:linear-gradient(135deg, var(--pink, #e84393), var(--yellow, #ffd700));
  color:#fff;
  font-weight:700;
  font-size:.8rem;
  padding:2px 10px;
  border-radius:999px;
}
.related-casino-card-rating span{
  font-weight:500;
  opacity:.85;
}
.related-casino-card-bonus{
  font-size:.85rem;
  color:var(--text-secondary);
  line-height:1.4;
  margin-top:2px;
}
.related-casino-card-link{
  margin-top:auto;
  padding-top:8px;
  font-size:.85rem;
  font-weight:600;
  color:var(--pink, #e84393);
}
@media(max-width:760px){
  .related-casinos{padding:24px 18px}
  .related-casinos-title{font-size:1.25rem; margin-bottom:18px}
  .related-casinos-grid{grid-template-columns:1fr; gap:14px}
}

/* ===== PROVIDER LOGOS ===== */
.provider-logos{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-bottom:1rem;
}
.provider-logos .provider-logo{
  width:120px;
  height:60px;
  object-fit:contain;
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  padding:4px;
}

/* ===== VAIHTOEHTOISET NETTIKASINOT (review-sivut) ===== */
.alternative-casinos-section{
  margin:2.5rem 0 2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--border-color);
}
.alternative-casinos-title{
  font-size:1.35rem;
  font-weight:700;
  margin:0 0 .5rem;
  color:var(--text-primary);
  letter-spacing:-.02em;
}
.alternative-casinos-intro{
  color:var(--text-secondary);
  font-size:.95rem;
  line-height:1.5;
  margin:0 0 1.5rem;
}
.alternative-casinos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  align-items:stretch;
}
.alternative-casino-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:1.5rem 1.25rem 1.25rem;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  transition:transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  overflow:hidden;
}
.alternative-casino-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--gradient-cta);
  opacity:0;
  transition:opacity var(--duration) var(--ease);
}
.alternative-casino-card:hover{
  border-color:rgba(245,197,24,.3);
  box-shadow:0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(245,197,24,.08);
  transform:translateY(-4px);
}
.alternative-casino-card:hover::before{
  opacity:1;
}
.alternative-casino-logo{
  width:100%;
  max-width:140px;
  height:70px;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-secondary);
  border-radius:var(--radius-sm);
  padding:8px;
}
.alternative-casino-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:4px;
}
.alternative-casino-logo-placeholder{
  font-size:.85rem;
  font-weight:600;
  color:var(--text-muted);
  line-height:1.2;
  padding:0 .5rem;
}
.alternative-casino-name{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 .5rem;
  color:var(--text-primary);
  line-height:1.25;
}
.alternative-casino-bonus{
  font-size:.85rem;
  color:var(--yellow-light);
  font-weight:600;
  margin:0 0 .5rem;
  line-height:1.4;
  background:rgba(245,197,24,.06);
  padding:6px 12px;
  border-radius:var(--radius-sm);
  width:100%;
}
.alternative-casino-wager{
  margin:0 0 .5rem;
  font-size:.78rem;
}
.alternative-casino-wager-badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.75rem;
  background:rgba(255,255,255,.06);
  color:var(--text-secondary);
  border:1px solid var(--border-color);
}
.alternative-casino-wager-badge.wager-free{
  background:rgba(34,197,94,.1);
  color:#22c55e;
  border-color:rgba(34,197,94,.25);
}
.alternative-casino-payments{
  font-size:.75rem;
  color:var(--text-muted);
  margin:0 0 .35rem;
  line-height:1.3;
}
.alternative-casino-rating{
  font-size:.85rem;
  font-weight:600;
  color:var(--yellow);
  margin:0 0 1rem;
  letter-spacing:.02em;
}
.alternative-casino-btn{
  margin-top:auto;
  text-decoration:none;
  padding:11px 28px;
  font-size:.88rem;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:var(--radius-sm);
}
@media(max-width:768px){
  .alternative-casinos-section{
    margin:2rem 0 1.5rem;
    padding-top:1.25rem;
  }
  .alternative-casinos-title{
    font-size:1.2rem;
  }
  .alternative-casinos-intro{
    font-size:.9rem;
    margin-bottom:1.25rem;
  }
  .alternative-casinos-grid{
    grid-template-columns:1fr;
    gap:.75rem;
  }
  .alternative-casino-card{
    display:grid;
    grid-template-columns:80px 1fr auto;
    grid-template-rows:auto auto auto auto auto;
    align-items:center;
    text-align:left;
    padding:16px 18px;
    gap:4px 14px;
    min-width:0;
    border-radius:var(--radius);
  }
  .alternative-casino-card::before{
    height:2px;
  }
  .alternative-casino-card:hover{
    transform:none;
  }
  .alternative-casino-logo{
    grid-column:1;
    grid-row:1 / -1;
    width:80px;
    height:50px;
    max-width:none;
    margin-bottom:0;
    flex-shrink:0;
    align-self:center;
  }
  .alternative-casino-name{
    grid-column:2;
    grid-row:1;
    margin:0;
    font-size:.95rem;
    min-width:0;
  }
  .alternative-casino-bonus{
    grid-column:2;
    grid-row:2;
    margin:0;
    font-size:.78rem;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    padding:4px 8px;
    width:auto;
  }
  .alternative-casino-wager{
    grid-column:2;
    grid-row:3;
    margin:0;
  }
  .alternative-casino-payments{
    grid-column:2;
    grid-row:4;
    margin:0;
    font-size:.72rem;
    min-width:0;
  }
  .alternative-casino-rating{
    grid-column:2;
    grid-row:5;
    margin:0;
    font-size:.75rem;
  }
  .alternative-casino-btn{
    grid-column:3;
    grid-row:1 / -1;
    margin:0;
    align-self:center;
    padding:10px 16px;
    font-size:.85rem;
    min-height:44px;
    width:auto;
  }
}
@media(max-width:400px){
  .alternative-casino-card{
    grid-template-columns:56px 1fr;
    grid-template-rows:auto auto auto auto auto auto;
    gap:6px 10px;
    padding:12px 14px;
  }
  .alternative-casino-logo{
    grid-column:1;
    grid-row:1 / 3;
    width:56px;
    height:36px;
  }
  .alternative-casino-name{
    grid-column:2;
    grid-row:1;
  }
  .alternative-casino-bonus{
    grid-column:2;
    grid-row:2;
  }
  .alternative-casino-wager{
    grid-column:1 / -1;
    grid-row:3;
  }
  .alternative-casino-payments{
    grid-column:1 / -1;
    grid-row:4;
  }
  .alternative-casino-rating{
    grid-column:1 / -1;
    grid-row:5;
  }
  .alternative-casino-btn{
    grid-column:1 / -1;
    grid-row:6;
    width:100%;
    justify-self:stretch;
    min-height:44px;
  }
}

/* ===== PAYMENT LOGOS (maksutapakuvat taulukon yläpuolella) ===== */
.payment-logos{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-bottom:1rem;
}
.payment-logos .payment-logo-link{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  max-width:140px;
  text-decoration:none;
  color:inherit;
  border-radius:var(--radius-sm);
  transition:opacity var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.payment-logos .payment-logo-readmore{
  display:block;
  font-size:.78rem;
  font-weight:600;
  line-height:1.25;
  text-align:center;
  color:var(--yellow);
  text-decoration:none;
}
.payment-logos .payment-logo-link:hover{
  opacity:0.92;
  box-shadow:0 0 0 2px var(--border-color);
}
.payment-logos .payment-logo-link:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}
.payment-logos .payment-logo{
  width:120px;
  height:60px;
  object-fit:contain;
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  padding:4px;
}

/* ===== PROVIDER LIST TRUNCATION ===== */
.btn-show-providers{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:12px;padding:10px 20px;
  font-size:.85rem;font-weight:600;
  color:var(--text-primary);
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  font-family:inherit;
}
.btn-show-providers:hover{
  background:var(--bg-card-hover);
  border-color:var(--border-hover);
  color:var(--yellow);
}

/* ===== SUPPORT CHANNELS BOX ===== */
.support-box{
  display:flex;flex-wrap:wrap;gap:12px;
  padding:20px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  margin-top:8px;
}
.support-channel{
  display:flex;align-items:center;gap:8px;
  padding:12px 20px;
  background:var(--bg-elevated);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:500;
  color:var(--text-secondary);
  flex:1 1 auto;min-width:140px;
  justify-content:center;
}
.support-icon{font-size:1.2rem}

@media(max-width:600px){
  .support-box{flex-direction:column}
  .support-channel{justify-content:flex-start}
}

/* ===== ANIMATIONS ===== */
@media(prefers-reduced-motion:no-preference){
  .fade-in{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .fade-in.visible{opacity:1;transform:translateY(0)}
}

/* ===== IMAGE GRID 2x2 ===== */
.image-grid-2x2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:28px auto;
  max-width:700px;
}
.image-grid-2x2.image-grid-single{
  grid-template-columns:minmax(0,342px);
  justify-content:center;
}
.image-grid-2x2 figure{
  margin:0;padding:0;text-align:center;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.image-grid-2x2 figure img{
  width:100%;height:auto;
  object-fit:contain;display:block;
}
.image-grid-2x2 figcaption{
  font-size:.78rem;color:var(--text-muted);
  padding:8px;font-style:italic;
}
/* Mobiilissa kaikki .image-grid-2x2:t muuttuvat horisontaaliseksi
   scroll-snap karuselliksi. Yksi kuva näkyy kerralla, seuraava
   kurkistaa ~14% reunasta, ja swipe napsauttaa seuraavaan. CSS-only
   (ei JS:ää), ja kaikki kuvat säilyvät DOM:ssa = SEO ei kärsi. */
@media(max-width:480px){
  .image-grid-2x2{
    display:flex;
    grid-template-columns:none;
    max-width:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:0 16px;
    gap:12px;
    padding:4px 16px 12px;
    margin-left:-16px;margin-right:-16px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .image-grid-2x2::-webkit-scrollbar{display:none}
  .image-grid-2x2 figure{
    flex:0 0 86%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
  .image-grid-2x2.image-grid-single{justify-content:center}
  .image-grid-2x2.image-grid-single figure{flex-basis:72%}
}

/* ===== IMAGE GRID 2x3 (kuusi kuvaa: kolme vierkkäin, kaksi riviä) ===== */
.image-grid-2x3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin:28px auto;
  max-width:1024px;
}
.image-grid-2x3 figure{
  margin:0;padding:0;text-align:center;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.image-grid-2x3 figure img{
  width:100%;height:auto;
  object-fit:contain;display:block;
}
.image-grid-2x3 figcaption{
  font-size:.78rem;color:var(--text-muted);
  padding:8px;font-style:italic;
}
@media(max-width:480px){
  .image-grid-2x3{
    display:flex;
    grid-template-columns:none;
    max-width:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:0 16px;
    gap:12px;
    padding:4px 16px 12px;
    margin-left:-16px;margin-right:-16px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .image-grid-2x3::-webkit-scrollbar{display:none}
  .image-grid-2x3 figure{
    flex:0 0 86%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
}

/* ===== REVIEW VIDEO =====
   Pystyvideoille (esim. 9:16 puhelimella kuvattu) rajoitetaan
   korkeutta, ei leveyttä — muuten desktopilla video venyy todella
   pitkäksi. Wrapper sisältää badgen ja play-ikonin overlayna, joilla
   video erottuu visuaalisesti staattisista kuvista. */
.review-video{
  display:block;
  margin:0 auto;
  max-width:100%;
  max-height:680px;
  width:auto;
  height:auto;
  background:#000;
  border:2px solid var(--yellow);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(245,197,24,.15);
}
.review-video-wrap{
  position:relative;
  display:inline-block;
  max-width:100%;
  line-height:0;
}
.review-video-wrap::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:72px;height:72px;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.65);
  border-radius:50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5c518'><path d='M8 5v14l11-7z'/></svg>");
  background-repeat:no-repeat;
  background-position:55% 50%;
  background-size:36px 36px;
  pointer-events:none;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  transition:opacity .25s var(--ease);
  z-index:2;
}
.review-video-wrap::after{
  content:"▶ VIDEO";
  position:absolute;
  top:10px;left:10px;
  background:var(--yellow);
  color:#1a1a1a;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.1em;
  padding:4px 9px;
  border-radius:4px;
  pointer-events:none;
  z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.review-video-wrap:hover::before{
  background-color:rgba(0,0,0,.8);
  transform:translate(-50%,-50%) scale(1.06);
}
/* Piilota play-overlay kun video alkaa toistua (CSS-only :has-tuki). */
.review-video-wrap:has(video:not([paused])):not(:has(video[paused]))::before,
.review-video-wrap:has(video:focus)::before{
  opacity:0;
}
/* Autoplay-looppivideo: ei keltaista reunusta, varjorengasta eikä
   play-/badge-overlayta (esim. lyhyt taustaklippi). */
.review-video.is-plain{
  border:none;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.review-video-wrap.is-plain::before,
.review-video-wrap.is-plain::after{
  content:none;
  display:none;
}
/* Vaakavideo täyttää tekstipalstan. Pystyvideo pysyy max-height-rajassa. */
.review-video-figure{
  margin:28px auto;
  max-width:100%;
  text-align:center;
}
.review-video-figure figcaption{
  font-size:.78rem;color:var(--text-muted);
  padding:10px 4px 0;font-style:italic;
}
@media(max-width:480px){
  .review-video{max-height:none;max-width:100%;width:100%}
  .review-video-wrap{display:block}
  .review-video-figure{max-width:100%}
  .review-video-wrap::before{width:60px;height:60px;background-size:30px 30px}
}

/* Pystyvideo + kuvakaappaus vierekkäin samassa 2x2-gridissä */
.image-grid-2x2.image-grid-media{max-width:560px}
.image-grid-media .review-video-wrap{display:block}
.image-grid-media .review-video{width:100%;max-height:none;border:none;border-radius:0;box-shadow:none}

/* ===== FEATURE GRID (2x6) ===== */
.feature-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:28px 0;
}
.feature-card{
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:22px 24px;
  transition:border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease);
}
.feature-card:hover{
  border-color:var(--border-hover);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.feature-card h4{
  margin:0 0 10px;
  font-size:.92rem;
  font-weight:700;
  color:var(--yellow);
  line-height:1.3;
}
.feature-card p{
  margin:0;
  font-size:.85rem;
  line-height:1.65;
  color:var(--text-secondary);
}
.feature-card p+p{margin-top:8px}
@media(max-width:700px){
  .feature-grid{grid-template-columns:1fr}
}

/* Mobiilikasinot: pysty/vaaka -kuvakaappausvertailu */
.image-grid-2x2.mobile-orientation-grid{
  grid-template-columns:minmax(180px, 230px) 1fr;
  align-items:center;
  max-width:980px;
  gap:24px;
}
.image-grid-2x2.mobile-orientation-grid figure{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  height:100%;
  justify-content:center;
  align-items:center;
}
.image-grid-2x2.mobile-orientation-grid figure img{
  display:block;
  margin:0 auto;
  max-width:100%;
  border-radius:18px;
  border:1px solid var(--border-color);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  background:#0b0e18;
}
.image-grid-2x2.mobile-orientation-grid figure:first-child img{
  height:520px;
  width:auto;
  max-height:60vh;
}
.image-grid-2x2.mobile-orientation-grid figure:last-child img{
  width:100%;
  height:auto;
}
.image-grid-2x2.mobile-orientation-grid figcaption{
  padding:10px 4px 0;
  font-style:normal;
  color:var(--text-secondary);
  font-size:.82rem;
  line-height:1.45;
}
@media(max-width:700px){
  .image-grid-2x2.mobile-orientation-grid{
    grid-template-columns:1fr;
    max-width:520px;
  }
  .image-grid-2x2.mobile-orientation-grid figure:first-child img{
    height:auto;
    max-height:60vh;
    width:auto;
    max-width:240px;
  }
  .image-grid-2x2.mobile-orientation-grid figure:last-child img{
    width:100%;
    max-width:100%;
  }
}

/* iOS ja Android vierekkäin, molemmat pystykuvia */
.image-grid-2x2.mobile-orientation-grid.ios-android{
  grid-template-columns:1fr 1fr;
  max-width:640px;
  align-items:start;
}
.image-grid-2x2.mobile-orientation-grid.ios-android figure:first-child img,
.image-grid-2x2.mobile-orientation-grid.ios-android figure:last-child img{
  height:auto;
  width:auto;
  max-width:100%;
  max-height:70vh;
}
@media(max-width:700px){
  .image-grid-2x2.mobile-orientation-grid.ios-android{
    grid-template-columns:1fr 1fr;
    max-width:640px;
  }
  .image-grid-2x2.mobile-orientation-grid.ios-android figure:first-child img,
  .image-grid-2x2.mobile-orientation-grid.ios-android figure:last-child img{
    max-width:100%;
    max-height:70vh;
  }
}

/* ===== IMAGE GRID 1x3 ===== */
.image-grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  margin:28px 0;
}
.image-grid-3 figure{
  margin:0;padding:0;text-align:center;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.image-grid-3 figure img{
  width:100%;height:auto;
  object-fit:contain;display:block;
}
.image-grid-3 figcaption{
  font-size:.78rem;color:var(--text-muted);
  padding:8px;font-style:italic;
}
/* Mobiilissa myös .image-grid-3 muuttuu swipe-karuselliksi (sama logiikka kuin 2x2) */
@media(max-width:480px){
  .image-grid-3{
    display:flex;
    grid-template-columns:none;
    max-width:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:0 16px;
    gap:12px;
    padding:4px 16px 12px;
    margin-left:-16px;margin-right:-16px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .image-grid-3::-webkit-scrollbar{display:none}
  .image-grid-3 figure{
    flex:0 0 86%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
}

/* ===== KUVASLIDER =====
   build.py (wrap_image_grids_in_sliders) kääriä kaikki .image-grid-* -ruudukot
   tähän kehykseen. Rata on natiivi scroll-snap-kontti, joten sormella selaus
   toimii ilman JS:ää; main.js lisää nuolipainikkeet ja selauspalkin.
   Säännöt ovat kahden luokan tarkkuudella (.img-slider > .img-slider-track),
   jotta ne voittavat ruudukoiden omat yhden luokan säännöt riippumatta
   järjestyksestä. */
.img-slider{
  --slider-gap:16px;
  --slider-per-view:3;
  --slider-bar-space:26px;
  position:relative;
  margin:28px auto;
}
/* Kehyksen leveys ei saa riippua vanhasta ruudukkoluokasta (2x2 oli 700px,
   2x3 1024px): kolmen kuvan näkymässä se kutistaisi saman kuvan eri
   kokoiseksi eri otsikoiden alla. Kaikki sliderit käyttävät saman
   sisältöpalstan leveyden, jolloin kuvapaikka on aina yhtä suuri. */

.img-slider > .img-slider-track{
  display:flex;
  grid-template-columns:none;
  gap:var(--slider-gap);
  margin:0;
  padding:2px 0 0;
  max-width:none;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* Nollaus: ruudukoiden vanha mobiilikaruselli asettaa scroll-paddingin,
     joka siirtäisi snap-kohtia 16px ja leikkaisi kuvan reunasta. */
  scroll-padding:0;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.img-slider > .img-slider-track::-webkit-scrollbar{display:none}
.img-slider > .img-slider-track:focus-visible{
  outline:2px solid var(--yellow,#f5b400);
  outline-offset:3px;
  border-radius:var(--radius);
}
.img-slider > .img-slider-track > figure{
  flex:0 0 calc((100% - (var(--slider-per-view) - 1) * var(--slider-gap)) / var(--slider-per-view));
  scroll-snap-align:start;
}
/* Selauspalkkia raahatessa snap pois päältä, muuten rata nykii vetoa vastaan */
.img-slider.is-dragging > .img-slider-track{
  scroll-behavior:auto;
  scroll-snap-type:none;
}

.img-slider-btn{
  position:absolute;
  top:0;
  bottom:var(--slider-bar-space);
  margin-block:auto;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  border:1px solid var(--border-color);
  border-radius:50%;
  background:rgba(12,15,26,.82);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:var(--text-primary);
  cursor:pointer;
  z-index:2;
  transition:background .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease;
}
/* hidden-attribuutti tulee UA-tyylistä display:none, jonka yllä oleva
   display:flex kumoaisi — siksi erikseen. */
.img-slider-btn[hidden],
.img-slider-bar[hidden]{display:none}
.img-slider-btn--prev{left:8px}
.img-slider-btn--next{right:8px}
.img-slider-btn:hover:not(:disabled){
  background:var(--yellow,#f5b400);
  border-color:var(--yellow,#f5b400);
  color:#0b0e18;
}
.img-slider-btn:disabled{opacity:.3;cursor:default}

.img-slider-bar{
  position:relative;
  height:6px;
  margin:12px auto 0;
  max-width:min(320px,70%);
  border-radius:999px;
  background:var(--border-color);
  cursor:pointer;
  touch-action:none;
}
.img-slider-bar-thumb{
  position:absolute;
  top:0;bottom:0;left:0;
  min-width:26px;
  border-radius:999px;
  background:var(--yellow,#f5b400);
  cursor:grab;
}
.img-slider.is-dragging .img-slider-bar-thumb{cursor:grabbing}
.img-slider-bar-thumb:focus-visible{
  outline:2px solid var(--yellow,#f5b400);
  outline-offset:3px;
}

/* Selausvihje: kuva täyttää kuvapaikan tarkalleen, joten mikään ei muuten
   kerro että sivussa on lisää kuvia. main.js pitää .is-hinting päällä
   kunnes käyttäjä on selannut kyseistä slideriä kerran (ja vain kun slider
   on näkyvissä). Kahva animoi inset-blockia — transform on varattu JS:n
   asettamalle sijainnille. */
@keyframes img-slider-hint-pulse{
  0%,100%{inset-block:0;box-shadow:0 0 0 0 rgba(245,180,0,0)}
  50%{inset-block:-3px;box-shadow:0 0 12px 2px rgba(245,180,0,.45)}
}
@keyframes img-slider-hint-nudge{
  0%,55%,100%{transform:translateX(0)}
  70%{transform:translateX(5px)}
  85%{transform:translateX(0)}
}
.img-slider.is-hinting .img-slider-bar-thumb{
  animation:img-slider-hint-pulse 1.9s ease-in-out infinite;
}
.img-slider.is-hinting .img-slider-btn--next{
  animation:img-slider-hint-nudge 1.9s ease-in-out infinite;
  border-color:var(--yellow,#f5b400);
}
@media(prefers-reduced-motion:reduce){
  .img-slider.is-hinting .img-slider-bar-thumb,
  .img-slider.is-hinting .img-slider-btn--next{animation:none}
}

/* Tabletilla kaksi kuvaa kerrallaan, mobiilissa yksi */
@media(max-width:900px){
  .img-slider{--slider-per-view:2}
}
@media(max-width:600px){
  .img-slider{--slider-per-view:1;--slider-gap:12px}
  .img-slider-btn{width:36px;height:36px}
  .img-slider-btn--prev{left:6px}
  .img-slider-btn--next{right:6px}
  /* Mobiilissa sivullinen on yksi kuva, joten pysäytys joka kuvaan estää
     sormella heilautuksen ohittamasta kuvia. Desktopilla sama asetus
     rajoittaisi nuolet yhteen kuvaan kolmen sijaan. */
  .img-slider > .img-slider-track > figure{scroll-snap-stop:always}
}
/* Kahden kuvan ruudukossa ei ole desktopilla selattavaa, joten se näytetään
   kahtena vierekkäin ja main.js piilottaa painikkeet ja selauspalkin.
   Kehys kavennetaan kahden kuvapaikan levyiseksi (2/3 palstasta miinus yksi
   väli), jotta kuvat pysyvät saman kokoisina kuin sliderissä — muuten kaksi
   kuvaa venyisi täyteen leveyteen ja näyttäisi muita isommalta. */
@media(min-width:901px){
  .img-slider[data-count="2"]{
    --slider-per-view:2;
    max-width:calc((200% - var(--slider-gap)) / 3);
  }
}
@media(prefers-reduced-motion:reduce){
  .img-slider > .img-slider-track{scroll-behavior:auto}
}

/* ===== WAGER CALCULATOR ===== */
.wager-calculator{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:var(--radius);padding:24px;margin:32px 0;
}
.wager-calculator h2,
.wager-calculator h3{
  font-size:1.5rem;font-weight:700;margin-bottom:12px;
  color:var(--text-primary);
}
.wager-calc-intro{
  margin:0 0 20px;font-size:.9rem;line-height:1.55;
  color:var(--text-secondary);
}
.wager-calc-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin-top:16px;
}
.wager-calc-stat{
  padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--bg-secondary);border:1px solid var(--border-color);
}
.wager-calc-stat-label{
  display:block;font-size:.75rem;font-weight:600;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:6px;
}
.wager-calc-stat-value{
  font-size:1.15rem;font-weight:700;color:var(--text-primary);
}
.wager-calc-note{
  margin:14px 0 0;font-size:.8rem;line-height:1.5;
  color:var(--text-muted);
}
.wager-calc-group{
  margin-bottom:24px;
}
.wager-calc-group:last-child{margin-bottom:0}
.wager-calc-label{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;font-size:.875rem;font-weight:600;
  color:var(--text-secondary);
}
.wager-calc-value{
  color:var(--yellow);font-weight:700;font-size:1rem;
}
.wager-calc-slider{
  position:relative;width:100%;height:32px;
}
.wager-calc-track{
  position:absolute;top:14px;left:0;right:0;height:4px;
  background:var(--bg-secondary);border-radius:2px;
}
.wager-calc-fill{
  position:absolute;top:14px;left:0;height:4px;
  background:var(--yellow);border-radius:2px;
  transition:width .2s var(--ease);
}
.wager-calc-slider input[type="range"]{
  -webkit-appearance:none;appearance:none;
  position:absolute;top:0;left:0;width:100%;height:32px;
  background:transparent;outline:none;cursor:pointer;
  margin:0;padding:0;
}
.wager-calc-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--yellow);border:3px solid var(--bg-primary);
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:transform .15s ease,box-shadow .15s ease;
}
.wager-calc-slider input[type="range"]::-webkit-slider-thumb:hover{
  transform:scale(1.15);box-shadow:0 3px 12px rgba(245,197,24,.5);
}
.wager-calc-slider input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;border:3px solid var(--bg-primary);
  background:var(--yellow);cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.wager-calc-slider input[type="range"]::-moz-range-track{
  background:transparent;border:none;height:0;
}
.wager-calc-result{
  margin-top:28px;padding:20px;
  background:var(--gradient-subtle);border-radius:var(--radius-sm);
  border:1px solid var(--border-hover);
}
.wager-calc-result-label{
  font-size:.75rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;
}
.wager-calc-result-value{
  font-size:2rem;font-weight:800;color:var(--yellow);
  line-height:1.2;
}
.wager-calc-toggle{
  display:flex;gap:8px;flex-wrap:wrap;
}
.wager-toggle-option{
  flex:1;min-width:140px;
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:var(--radius-sm);
  background:var(--bg-secondary);border:1px solid var(--border-color);
  cursor:pointer;transition:all var(--duration) var(--ease);
}
.wager-toggle-option:hover{
  background:var(--bg-card-hover);border-color:var(--border-hover);
}
.wager-toggle-option input[type="radio"]{
  margin:0;cursor:pointer;
  width:18px;height:18px;
  accent-color:var(--yellow);
}
.wager-toggle-option input[type="radio"]:checked + span{
  color:var(--yellow);font-weight:600;
}
.wager-toggle-option.checked{
  background:var(--gradient-subtle);
  border-color:rgba(245,197,24,.3);
}
.wager-toggle-option span{
  font-size:.875rem;color:var(--text-secondary);
  transition:color var(--duration) var(--ease);
}
@media(max-width:768px){
  .wager-calculator{padding:20px;margin:24px 0}
  .wager-calculator h2,
  .wager-calculator h3{font-size:1.25rem;margin-bottom:12px}
  .wager-calc-group{margin-bottom:20px}
  .wager-calc-result-value{font-size:1.75rem}
  .wager-calc-stats{grid-template-columns:1fr}
}

/* ===== BONUS WAGER CALCULATOR (työkalut) ===== */
.bwc{
  margin:28px 0 40px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:24px;
}
.bwc-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.bwc-form{display:flex;flex-direction:column;gap:18px}
.bwc-field{display:flex;flex-direction:column;gap:8px}
.bwc-fieldset{
  border:0;margin:0;padding:0;min-width:0;
}
.bwc-label,.bwc-fieldset .bwc-label{
  font-size:.875rem;font-weight:600;color:var(--text-secondary);
  padding:0;float:none;
}
.bwc-label-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.bwc-input{
  width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-secondary);
  color:var(--text-primary);
  font-size:1.05rem;font-weight:600;
  outline:none;
  transition:border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease);
}
.bwc-input:focus{
  border-color:rgba(245,197,24,.45);
  box-shadow:0 0 0 3px rgba(245,197,24,.12);
}
.bwc-input::-webkit-outer-spin-button,
.bwc-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bwc-input[type=number]{-moz-appearance:textfield;appearance:textfield}
.bwc-unit-toggle{
  display:inline-flex;
  border:1px solid var(--border-color);
  border-radius:999px;
  overflow:hidden;
  background:var(--bg-secondary);
}
.bwc-unit{
  min-width:42px;height:32px;padding:0 12px;
  border:0;background:transparent;
  color:var(--text-muted);font-weight:700;font-size:.85rem;
  cursor:pointer;transition:all var(--duration) var(--ease);
}
.bwc-unit.is-active{
  background:var(--yellow);color:#111;
}
.bwc-radio-row{display:flex;flex-direction:column;gap:8px}
.bwc-radio{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-secondary);
  cursor:pointer;
  transition:border-color var(--duration) var(--ease),background var(--duration) var(--ease);
}
.bwc-radio:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.bwc-radio:has(input:checked){
  border-color:rgba(245,197,24,.4);
  background:var(--yellow-glow);
}
.bwc-radio input{
  margin:0;width:18px;height:18px;accent-color:var(--yellow);cursor:pointer;flex-shrink:0;
}
.bwc-radio span{font-size:.9rem;color:var(--text-secondary);font-weight:500}
.bwc-radio:has(input:checked) span{color:var(--text-primary);font-weight:600}
.bwc-hint{
  margin:0;font-size:.78rem;line-height:1.45;color:var(--text-muted);
}
.bwc-advanced{
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-secondary);
  padding:0;
}
.bwc-advanced-summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  font-size:.9rem;font-weight:700;color:var(--text-primary);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.bwc-advanced-summary::-webkit-details-marker{display:none}
.bwc-advanced-summary::after{
  content:"";
  width:8px;height:8px;
  border-right:2px solid var(--text-muted);
  border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg);
  transition:transform var(--duration) var(--ease);
  flex-shrink:0;
}
.bwc-advanced[open] .bwc-advanced-summary::after{
  transform:rotate(-135deg);margin-top:4px;
}
.bwc-advanced-body{
  display:flex;flex-direction:column;gap:16px;
  padding:0 16px 16px;
  border-top:1px solid var(--border-color);
  padding-top:16px;
}
.bwc-results{
  position:sticky;top:88px;
  display:flex;flex-direction:column;gap:16px;
}
.bwc-verdict{
  padding:20px;
  border-radius:var(--radius);
  border:1px solid var(--border-hover);
  background:var(--gradient-subtle);
  display:flex;flex-direction:column;gap:6px;
}
.bwc-verdict.is-good{
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.08);
}
.bwc-verdict.is-ok{
  border-color:rgba(245,197,24,.35);
  background:var(--yellow-glow);
}
.bwc-verdict.is-bad{
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.08);
}
.bwc-verdict-label{
  font-size:.75rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;
}
.bwc-verdict-value{
  font-size:2rem;font-weight:800;line-height:1.15;color:var(--text-primary);
}
.bwc-verdict.is-good .bwc-verdict-value{color:#4ade80}
.bwc-verdict.is-ok .bwc-verdict-value{color:var(--yellow)}
.bwc-verdict.is-bad .bwc-verdict-value{color:#f87171}
.bwc-verdict-tag{
  display:inline-flex;align-self:flex-start;
  margin-top:4px;padding:4px 10px;
  border-radius:999px;font-size:.75rem;font-weight:700;
  background:rgba(255,255,255,.06);color:var(--text-secondary);
}
.bwc-stats{
  margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.bwc-stat{
  margin:0;padding:12px 14px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-secondary);
}
.bwc-stat dt{
  font-size:.72rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;
}
.bwc-stat dd{
  margin:0;font-size:1.05rem;font-weight:700;color:var(--text-primary);
}
.bwc-note{
  margin:0;font-size:.78rem;line-height:1.5;color:var(--text-muted);
}
@media(max-width:900px){
  .bwc-layout{grid-template-columns:1fr;gap:22px}
  .bwc-results{position:static}
}
/* Lisenssihaku (mga-kasinot, virolaiset-nettikasinot) */
.mga-lookup-row{display:flex;gap:10px;flex-wrap:wrap}
.mga-lookup-row .bwc-input{flex:1 1 240px}
.mga-lookup-row .btn-cta{height:42px;padding:0 22px}
.licence-lookup-results{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.licence-lookup-results .bwc-verdict .btn-cta{align-self:flex-start;margin-top:8px}
.mga-result-name{font-size:1.2rem;font-weight:800;color:var(--text-primary)}
.mga-result-lics{list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--text-secondary)}
@media(max-width:560px){
  .bwc{padding:18px}
  .bwc-stats{grid-template-columns:1fr}
  .bwc-verdict-value{font-size:1.7rem}
}

/* ===== TAX WIN CALCULATOR extras ===== */
.twc-location-row{
  display:flex;flex-direction:column;gap:8px;
}
.twc-location{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--bg-secondary);
  cursor:pointer;
  transition:border-color var(--duration) var(--ease),background var(--duration) var(--ease);
}
.twc-location:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.twc-location:has(input:checked){
  border-color:rgba(245,197,24,.4);
  background:var(--yellow-glow);
}
.twc-location input{
  margin:2px 0 0;width:18px;height:18px;accent-color:var(--yellow);cursor:pointer;flex-shrink:0;
}
.twc-location-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.twc-location-title{
  font-size:.95rem;font-weight:700;color:var(--text-primary);line-height:1.3;
}
.twc-location-desc{
  font-size:.8rem;color:var(--text-muted);line-height:1.4;
}
.twc-reset{
  align-self:flex-start;
  margin-top:4px;
  height:42px;padding:0 18px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text-secondary);
  font-size:.875rem;font-weight:600;
  cursor:pointer;
  transition:all var(--duration) var(--ease);
}
.twc-reset:hover{
  border-color:var(--border-hover);
  color:var(--text-primary);
  background:var(--bg-secondary);
}
#twc-rate-field.is-disabled{
  opacity:.45;
  pointer-events:none;
}

.bwc-stat .bwc-hint{
  margin-top:6px;
}


/* ===== BONUS EV SIMULATOR ===== */
.review-ev-section{
  margin:2rem 0;
}
.review-ev-section h3{
  margin-bottom:.75rem;
}
.review-ev-card{
  display:block;
  border:1px solid var(--border-color);
  border-radius:12px;
  padding:16px 20px;
  background:var(--card-bg);
}
.review-ev-card .casino-ev-section{
  border-top:none;
  margin-top:0;
  padding-top:0;
}
/* Best bonus pick */
.ev-best-pick{
  border:2px solid var(--brand-color,#f5c518);
  border-radius:14px;padding:24px 28px;
  background:var(--card-bg);margin:1rem 0 2rem;
  position:relative;
}
.ev-best-header{
  display:flex;align-items:center;gap:16px;
  margin-bottom:12px;
}
.ev-best-logo{
  width:80px;height:80px;object-fit:contain;
  border-radius:10px;flex-shrink:0;
  background:var(--bg-secondary,#f8f9fa);padding:6px;
}
.ev-best-header-text{display:flex;flex-direction:column;gap:2px}
.ev-best-name{margin:0;font-size:1.25rem}
.ev-best-bonus{
  font-size:.92rem;color:var(--text-secondary);font-weight:500;
}
.ev-best-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
}
.ev-best-reasons{
  margin:.75rem 0 1.25rem;padding-left:1.25rem;
  line-height:1.7;
}
.ev-best-reasons li{margin-bottom:6px}
.ev-best-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.ev-best-actions .btn-casino{
  font-size:.9rem!important;padding:10px 22px!important;
}
.ev-best-review{
  font-size:.88rem;color:var(--brand-color);text-decoration:none;
}
.ev-best-review:hover{text-decoration:underline}
.ev-best-method{
  margin-top:1.25rem;border-top:1px solid var(--border-color);
  padding-top:1rem;font-size:.9rem;line-height:1.7;
}
.ev-best-method h4{
  font-size:.95rem;margin:0 0 .5rem;
}
.ev-best-method p,.ev-best-method ul{margin:.6rem 0}
.ev-best-method ul{padding-left:1.25rem}
.ev-best-method li{margin-bottom:4px}
@media(max-width:640px){
  .ev-best-pick{padding:18px 16px}
  .ev-best-name{font-size:1.1rem}
}
/* Worst bonuses examples */
.ev-worst-section{
  margin:1.5rem 0 2rem;
}
.ev-worst-section h4{margin-bottom:.5rem}
.ev-worst-section > p{
  font-size:.93rem;color:var(--text-secondary);margin-bottom:1rem;
}
.ev-worst-card{
  border:1px solid var(--border-color);border-left:4px solid var(--danger-color,#ef4444);
  border-radius:10px;padding:16px 20px;
  background:var(--card-bg);margin-bottom:12px;
}
.ev-worst-header{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin-bottom:8px;
}
.ev-worst-header strong{font-size:1rem}
.ev-worst-bonus{font-size:.85rem;color:var(--text-secondary)}
.ev-worst-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;
}
.ev-worst-card > p{
  font-size:.88rem;color:var(--text-secondary);margin:0;line-height:1.6;
}
@media(max-width:640px){
  .ev-worst-card{padding:14px 14px}
}
/* TOP 10 EV ranking table */
.ev-top10-section{
  margin:2.5rem 0;
}
.ev-top10-section h3{
  margin-bottom:.5rem;
}
.ev-top10-section > p{
  margin-bottom:.75rem;color:var(--text-secondary);font-size:.95rem;
}
.ev-top10-method{
  font-size:.88rem!important;color:var(--text-muted,#888)!important;
  line-height:1.5;
}
.ev-top10-table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border-color);border-radius:12px;
  background:var(--card-bg);
}
.ev-top10-table{
  width:100%;border-collapse:collapse;font-size:.92rem;
  table-layout:fixed;
}
.ev-top10-table thead{
  background:var(--bg-secondary,#f8f9fa);
}
.ev-top10-table th{
  padding:10px 12px;text-align:left;font-weight:600;font-size:.82rem;
  color:var(--text-secondary);white-space:nowrap;
  border-bottom:2px solid var(--border-color);
}
.ev-top10-table td{
  padding:12px;vertical-align:middle;
}
.ev-top10-table tbody tr{
  border-bottom:1px solid var(--border-color);
}
.ev-top10-table tbody tr:last-child{border-bottom:none}
.ev-top10-table tbody tr:hover{background:var(--bg-hover,rgba(0,0,0,.02))}
.ev-top10-rank{
  font-weight:700;font-size:1.05rem;color:var(--text-secondary);
  width:40px;text-align:center;
}
.ev-top10-name{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.ev-top10-name strong{font-size:.95rem}
.ev-top10-bonus{font-size:.8rem;color:var(--text-secondary);line-height:1.3}
.ev-top10-wager{white-space:nowrap;font-size:.88rem;width:90px}
.ev-top10-ev{white-space:nowrap;width:70px}
.ev-top10-bust{white-space:nowrap;font-weight:600;width:55px}
.ev-top10-risk{white-space:nowrap;width:80px}
.ev-top10-actions{
  display:flex;flex-direction:column;gap:6px;align-items:center;
  white-space:nowrap;width:100px;
}
.ev-top10-play{
  padding:6px 14px!important;font-size:.82rem!important;
  border-radius:8px!important;min-width:auto!important;
  text-align:center;
}
@media(max-width:768px){
  .ev-top10-table{font-size:.84rem;table-layout:auto}
  .ev-top10-table th,.ev-top10-table td{padding:8px 6px}
}
/* Card-level category badges row (ribbon yläosassa) */
.casino-ev-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:var(--radius-pill);
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;line-height:1.2;
}
.casino-ev-badge-pika{
  background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.28);
  color:#38bdf8;
}
.casino-ev-badge-exclusive{
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.28);
  color:#a855f7;
}
.casino-ev-badge-time{
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.32);
  color:#22c55e;
}

/* EV-osio kortin alapalkkina — reunasta reunaan ilman negatiivisia marginaaleja */
.casino-ev-section{
  margin:0;
  padding:14px 16px 16px;
  background:rgba(59,130,246,.05);
  border-top:1px solid rgba(59,130,246,.14);
  border-radius:0;
}
.casino-ev-title{
  font-size:.85rem;font-weight:700;
  margin:0 0 8px;color:var(--text-secondary);
  letter-spacing:0;
}
.casino-ev-summary{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:10px;
}
.ev-chip{
  display:inline-flex;align-items:center;
  padding:4px 11px;border-radius:var(--radius-pill);
  font-size:.74rem;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,.04);border:1px solid var(--border-color);
  color:var(--text-secondary);white-space:nowrap;
}
.ev-chip.ev-positive{
  background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.25);
  color:#4ade80;
}
.ev-chip.ev-negative{
  background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.25);
  color:#f87171;
}
.ev-chip.ev-risk-low{
  background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.25);
  color:#4ade80;
}
.ev-chip.ev-risk-medium{
  background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.25);
  color:#fbbf24;
}
.ev-chip.ev-risk-high{
  background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.25);
  color:#f87171;
}
.ev-method-link{
  display:inline-flex;align-items:center;
  padding:4px 2px;
  font-size:.74rem;font-weight:600;
  color:var(--text-muted);
  text-decoration:underline;text-underline-offset:2px;
  white-space:nowrap;
}
.ev-method-link:hover{color:var(--text-secondary);}
/* Ankkurikohde ei jää sticky-headerin alle. */
#ev-metodologia{scroll-margin-top:80px;}
.casino-ev-toggle-btn{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:10px 12px;
  background:transparent;border:1px dashed var(--border-color);
  border-radius:var(--radius-sm);
  color:var(--text-muted);font-weight:600;font-size:.82rem;
  cursor:pointer;transition:all var(--duration) var(--ease);
  letter-spacing:.01em;
}
.casino-ev-toggle-btn:hover{
  border-color:rgba(59,130,246,.3);color:var(--blue-light);
  background:rgba(59,130,246,.04);
}
.casino-ev-toggle-btn.active{
  border-color:rgba(59,130,246,.3);color:var(--blue-light);
  background:rgba(59,130,246,.06);
  border-style:solid;
}
.casino-ev-icon{flex-shrink:0;color:var(--blue-light)}
.casino-ev-arrow{
  margin-left:auto;flex-shrink:0;
  transition:transform .25s var(--ease);
}
.casino-ev-toggle-btn.active .casino-ev-arrow{transform:rotate(180deg)}

.casino-ev-panel{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease);
  padding:0 2px;
}
.casino-ev-panel.ev-panel-open{
  max-height:none;
  overflow:visible;
  transition:none;
}

/* Results grid */
.ev-stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;margin:14px 0 12px;
}
.ev-stat-card{
  background:var(--bg-secondary);border:1px solid var(--border-color);
  border-radius:var(--radius-sm);padding:14px;
  display:flex;flex-direction:column;gap:4px;
}
.ev-stat-label{
  font-size:.7rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;
}
.ev-stat-value{
  font-size:1.15rem;font-weight:800;color:var(--text-primary);
  line-height:1.2;
}
.ev-stat-sub{
  font-size:.68rem;color:var(--text-muted);font-style:italic;
}

/* EV color coding */
.ev-positive .ev-stat-value{color:#4ade80}
.ev-negative .ev-stat-value{color:#f87171}

/* Bust probability bar */
.ev-bust-bar{
  width:100%;height:6px;background:var(--bg-card);
  border-radius:3px;margin-top:6px;overflow:hidden;
}
.ev-bust-fill{
  height:100%;border-radius:3px;
  transition:width .6s var(--ease);
}
.ev-risk-low{color:#4ade80}
.ev-risk-low.ev-bust-fill{background:#4ade80}
.ev-risk-medium{color:#fbbf24}
.ev-risk-medium.ev-bust-fill{background:#fbbf24}
.ev-risk-high{color:#f87171}
.ev-risk-high.ev-bust-fill{background:#f87171}

/* Insight text */
.ev-insight{
  font-size:.8rem;line-height:1.5;color:var(--text-secondary);
  background:var(--gradient-subtle);border-radius:var(--radius-sm);
  padding:12px 14px;margin:0 0 14px;
  border-left:3px solid var(--blue);
}

/* Controls */
.ev-controls{
  display:flex;flex-direction:column;gap:16px;
  margin-bottom:14px;
}
.ev-control{display:flex;flex-direction:column;gap:6px}
.ev-control-header{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;font-weight:600;color:var(--text-secondary);
}
.ev-control-val{
  color:var(--blue-light);font-weight:700;font-size:.88rem;
}
.ev-control-sub{
  font-size:.72rem;color:var(--text-muted);line-height:1.4;
}

/* Slider (reuses wager-calc slider aesthetic) */
.ev-slider-wrap{
  position:relative;width:100%;height:28px;
}
.ev-track{
  position:absolute;top:12px;left:0;right:0;height:4px;
  background:var(--bg-card);border-radius:2px;
}
.ev-fill{
  position:absolute;top:12px;left:0;height:4px;
  background:var(--blue);border-radius:2px;
  transition:width .15s var(--ease);
}
.ev-slider-wrap input[type="range"]{
  -webkit-appearance:none;appearance:none;
  position:absolute;top:0;left:0;width:100%;height:28px;
  background:transparent;outline:none;cursor:pointer;
  margin:0;padding:0;
}
.ev-slider-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--blue-light);border:3px solid var(--bg-primary);
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:transform .15s ease,box-shadow .15s ease;
}
.ev-slider-wrap input[type="range"]::-webkit-slider-thumb:hover{
  transform:scale(1.15);box-shadow:0 3px 12px rgba(59,130,246,.5);
}
.ev-slider-wrap input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:3px solid var(--bg-primary);
  background:var(--blue-light);cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.ev-slider-wrap input[type="range"]::-moz-range-track{
  background:transparent;border:none;height:0;
}

/* Info tooltip trigger */
.ev-stat-card{overflow:visible}
.ev-info-trigger{
  position:relative;display:inline-block;
  cursor:help;color:var(--blue-light);
  font-size:.72rem;vertical-align:middle;
  margin-left:2px;z-index:30;
}
.ev-info-tooltip{
  display:none;position:absolute;
  top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:230px;padding:10px 12px;
  background:var(--bg-elevated);border:1px solid var(--border-hover);
  border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.5);
  font-size:.73rem;font-weight:400;line-height:1.5;
  color:var(--text-secondary);letter-spacing:0;text-transform:none;
  z-index:100;pointer-events:none;
}
.ev-info-tooltip::after{
  content:'';position:absolute;
  bottom:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:var(--border-hover);
}
.ev-info-trigger:hover .ev-info-tooltip,
.ev-info-trigger:focus .ev-info-tooltip{
  display:block;
}
@media(max-width:600px){
  .ev-info-tooltip{
    width:200px;left:auto;right:-8px;transform:none;
  }
  .ev-info-tooltip::after{
    left:auto;right:12px;transform:none;
  }
}

/* Wager type note */
.ev-wager-note{
  font-size:.75rem;color:var(--text-muted);
  margin:0 0 12px;padding:8px 12px;
  background:var(--bg-secondary);border-radius:var(--radius-sm);
  border:1px solid var(--border-color);
}

/* Simulate button */
.ev-run-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:11px 20px;
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);
  border-radius:var(--radius-sm);
  color:var(--blue-light);font-weight:700;font-size:.84rem;
  cursor:pointer;transition:all var(--duration) var(--ease);
  margin-bottom:12px;
}
.ev-run-btn:hover{
  background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.4);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(59,130,246,.15);
}

/* Loading state */
.ev-loading{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:24px;font-size:.88rem;color:var(--text-muted);font-weight:600;
}
.ev-spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(59,130,246,.2);
  border-top-color:var(--blue-light);
  animation:ev-spin .7s linear infinite;
}
@keyframes ev-spin{to{transform:rotate(360deg)}}

/* Disclaimer */
.ev-disclaimer{
  font-size:.7rem;color:var(--text-muted);line-height:1.4;
  margin:0;opacity:.7;
}

/* Mobile adjustments */
@media(max-width:600px){
  .ev-stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .ev-stat-card{padding:10px}
  .ev-stat-value{font-size:1rem}
  .ev-stat-label{font-size:.65rem}
  .casino-ev-toggle-btn{font-size:.76rem;padding:8px 10px}
}
@media(max-width:600px){
  .casino-ev-badge{font-size:.65rem;padding:3px 7px}
}
@media(max-width:400px){
  .ev-stats-grid{grid-template-columns:1fr 1fr;gap:6px}
  .ev-stat-card{padding:8px}
  .ev-stat-value{font-size:.92rem}
  .ev-insight{font-size:.74rem;padding:10px 12px}
}

/* ===== UNIIKKI ETUUS CTA (sivupainike + banneri) ===== */
.cta-float-wrap{
  display:none !important;
  position:fixed;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  z-index:999;
  pointer-events:none;
}
.cta-float-close{
  display:flex;
  position:absolute;
  top:-12px;
  left:-12px;
  width:24px;
  height:24px;
  background:var(--bg-elevated);
  border:1px solid var(--border-color);
  border-radius:50%;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1;
  padding:0;
  pointer-events:auto;
  transition:background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.cta-float-close:hover{background:var(--bg-secondary);border-color:var(--border-hover)}
.cta-float-close svg{stroke:var(--text-muted)}
.cta-float-close:hover svg{stroke:var(--text-primary)}
.cta-float{
  padding:14px 18px;
  background:var(--gradient-cta);
  color:var(--bg-primary);
  font-weight:700;
  font-size:.9rem;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg), 0 0 24px var(--yellow-glow), 0 0 48px rgba(236,72,153,.15);
  cursor:pointer;
  border:none;
  pointer-events:auto;
  transition:transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  animation:cta-pulse 2s ease-in-out infinite;
}
.cta-float:hover{
  transform:scale(1.05);
  box-shadow:var(--shadow-lg), 0 0 32px var(--yellow-glow), 0 0 56px rgba(236,72,153,.25);
  animation:none;
}
.cta-float:focus-visible{
  outline:2px solid var(--yellow-light);
  outline-offset:2px;
}
@keyframes cta-pulse{
  0%,100%{ box-shadow:var(--shadow-lg), 0 0 24px var(--yellow-glow), 0 0 48px rgba(236,72,153,.15); opacity:1; }
  50%{ box-shadow:var(--shadow-lg), 0 0 36px var(--yellow-glow), 0 0 64px rgba(236,72,153,.3); opacity:.95; }
}

.cta-banner-overlay{
  position:fixed;
  inset:0;
  z-index:1001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--duration-md) var(--ease), visibility var(--duration-md) var(--ease);
}
.cta-banner-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.cta-banner-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  cursor:pointer;
}
.cta-banner{
  position:relative;
  width:100%;
  max-width:480px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.04);
  transform:scale(.96);
  transition:transform var(--duration-md) var(--ease);
}
.cta-banner-overlay.is-open .cta-banner{
  transform:scale(1);
}
.cta-banner-close{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  line-height:1;
  color:var(--text-muted);
  background:none;
  border:none;
  cursor:pointer;
  border-radius:var(--radius-sm);
  transition:color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.cta-banner-close:hover{
  color:var(--text-primary);
  background:rgba(255,255,255,.06);
}
.cta-banner-title{
  font-size:1.35rem;
  font-weight:800;
  margin:0 0 16px;
  padding-right:32px;
  color:var(--text-primary);
  letter-spacing:-.02em;
}
.cta-banner-body{
  margin-bottom:20px;
}
.cta-banner-body p{
  font-size:.95rem;
  line-height:1.65;
  color:var(--text-secondary);
  margin:0 0 12px;
}
.cta-banner-body p:last-child{
  margin-bottom:0;
}
.cta-banner-note{
  font-size:.85rem;
  color:var(--text-muted);
}
.cta-banner-btn{
  display:inline-block;
  width:100%;
  text-align:center;
  padding:14px 24px;
  background:var(--gradient-cta);
  color:var(--bg-primary);
  font-weight:700;
  font-size:1rem;
  border-radius:var(--radius);
  text-decoration:none;
  transition:background var(--duration) var(--ease), transform var(--duration) var(--ease);
  box-shadow:0 2px 12px rgba(245,197,24,.25);
}
.cta-banner-btn:hover{
  background:var(--gradient-cta-hover);
  transform:translateY(-1px);
  color:var(--bg-primary);
}

@media (max-width:768px){
  .cta-float-wrap{
    right:auto;
    left:50%;
    top:auto;
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s var(--ease), visibility .25s var(--ease), transform var(--duration) var(--ease);
  }
  .cta-float-wrap.cta-float--visible-mobile{
    opacity:1;
    visibility:visible;
  }
  .cta-float-close{
    top:-12px;
    left:auto;
    right:-6px;
    width:26px;
    height:26px;
  }
  .cta-float{
    padding:12px 20px;
    font-size:.875rem;
    border-radius:var(--radius-pill);
  }
  .cta-float:hover{
    transform:scale(1.05);
  }
  .cta-banner{
    padding:24px 20px;
  }
  .cta-banner-title{
    font-size:1.2rem;
  }
}

/* ===== SIVUSTOKARTTA ===== */
.sitemap-page{margin:1.5rem 0 2rem}
.sitemap-home{margin-bottom:1.5rem}
.sitemap-home-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:1.1rem;
  font-weight:700;
  color:var(--yellow);
  text-decoration:none;
  padding:12px 20px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.sitemap-home-link:hover{
  border-color:rgba(245,197,24,.3);
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.sitemap-category{margin-bottom:2rem}
.sitemap-category-title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 .75rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border-color);
  display:flex;
  align-items:center;
  gap:8px;
}
.sitemap-cat-icon{font-size:1.1rem}
.sitemap-count{
  font-size:.75rem;
  font-weight:600;
  color:var(--text-muted);
  background:var(--bg-secondary);
  padding:2px 8px;
  border-radius:var(--radius-pill);
  margin-left:4px;
}
.sitemap-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px 16px;
}
.sitemap-link{
  display:block;
  padding:8px 12px;
  font-size:.875rem;
  color:var(--text-secondary);
  text-decoration:none;
  border-radius:var(--radius-sm);
  transition:background var(--duration) var(--ease), color var(--duration) var(--ease);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sitemap-link:hover{
  background:var(--bg-secondary);
  color:var(--yellow);
}
@media(max-width:768px){
  .sitemap-grid{grid-template-columns:repeat(2,1fr);gap:4px 12px}
}
@media(max-width:480px){
  .sitemap-grid{grid-template-columns:1fr;gap:2px}
  .sitemap-link{padding:10px 12px}
}

/* ===== CASINO COMPARE TOOL ===== */

/* ── Compare toggle — nimen rivillä CTA-sarakkeen yläpuolella ── */
.casino-card .compare-toggle{
  position:static;
  margin-left:auto;
  z-index:3;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  width:auto;
  padding:6px 10px;
  font-size:.72rem;font-weight:600;font-family:var(--font-main);
  color:var(--text-secondary);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-xs);
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  line-height:1;
  white-space:nowrap;
  flex-shrink:0;
}
.casino-card .compare-toggle:hover{
  color:var(--yellow);
  border-color:rgba(245,197,24,.4);
  background:rgba(245,197,24,.06);
}
.casino-card .compare-toggle.active{
  color:var(--pink-light);
  border-color:rgba(236,72,153,.45);
  background:rgba(236,72,153,.1);
}
.casino-card .compare-toggle.active:hover{
  border-color:rgba(236,72,153,.6);
  background:rgba(236,72,153,.16);
}
@media(max-width:600px){
  .casino-card .compare-toggle{
    font-size:.66rem;padding:5px 9px;
  }
}
.casino-card.compare-selected{
  border-color:rgba(245,197,24,.35) !important;
  box-shadow:0 0 0 1px rgba(245,197,24,.15),0 4px 20px rgba(245,197,24,.06) !important;
}

/* ── Floating compare bar ── */
.compare-bar{
  position:fixed;bottom:-80px;left:0;right:0;
  z-index:9998;
  transition:bottom .35s var(--ease);
  pointer-events:none;
}
.compare-bar.is-visible{
  bottom:env(safe-area-inset-bottom, 0px);
  pointer-events:auto;
}
.compare-bar-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(22,22,26,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(245,197,24,.2);
  box-shadow:0 -8px 32px rgba(0,0,0,.5);
}
.compare-bar-slots{
  display:flex;gap:10px;flex:1;min-width:0;overflow-x:auto;
}
.compare-bar-slot{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;
  background:var(--bg-elevated);
  border:1px solid var(--border-color);
  border-radius:var(--radius-xs);
  flex-shrink:0;
}
.compare-bar-slot img{
  width:32px;height:20px;object-fit:contain;
  background:rgba(255,255,255,.06);border-radius:4px;
}
.compare-bar-slot span{
  font-size:.8rem;font-weight:600;color:var(--text-secondary);
  white-space:nowrap;
}
.compare-bar-actions{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.compare-bar-count{
  font-size:.78rem;font-weight:600;color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.compare-bar-go{
  padding:10px 22px;
  background:var(--gradient-cta);color:var(--bg-primary);
  font-weight:700;font-size:.85rem;font-family:var(--font-main);
  border:none;border-radius:8px;cursor:pointer;
  transition:all var(--duration) var(--ease);
  white-space:nowrap;
}
.compare-bar-go:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(245,197,24,.25);
}
.compare-bar-go:disabled{
  opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;
}
.compare-bar-clear{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-color);
  border-radius:var(--radius-xs);
  color:var(--text-muted);font-size:.9rem;
  cursor:pointer;font-family:var(--font-main);
  transition:all var(--duration) var(--ease);
}
.compare-bar-clear:hover{
  color:var(--pink-light);border-color:rgba(236,72,153,.3);
  background:rgba(236,72,153,.06);
}

/* ── Compare modal ── */
.compare-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  opacity:0;
  pointer-events:none;
}
.compare-modal.is-open{
  display:flex;
  opacity:1;
  pointer-events:auto;
  animation:compareModalIn .3s var(--ease) forwards;
}
@keyframes compareModalIn{from{opacity:0}to{opacity:1}}
.compare-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.compare-modal-content{
  position:relative;
  width:min(95vw,960px);
  max-height:90vh;
  display:flex;flex-direction:column;
  background:var(--bg-secondary);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  overflow:hidden;
  transform:translateY(20px) scale(.97);
  transition:transform .3s var(--ease);
}
.compare-modal.is-open .compare-modal-content{
  transform:translateY(0) scale(1);
}
.compare-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--border-color);
  flex-shrink:0;
}
.compare-modal-header h2{
  font-size:1.15rem;font-weight:700;margin:0;
}
.compare-modal-close{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-color);
  border-radius:var(--radius-xs);
  color:var(--text-muted);font-size:1rem;
  cursor:pointer;font-family:var(--font-main);
  transition:all var(--duration) var(--ease);
}
.compare-modal-close:hover{
  color:var(--pink-light);border-color:rgba(236,72,153,.3);
  background:rgba(236,72,153,.06);
}
.compare-modal-body{
  overflow-y:auto;overflow-x:auto;
  padding:0;
  -webkit-overflow-scrolling:touch;
}

/* ── Compare table ── */
.compare-table-wrap{
  min-width:100%;
}
.compare-table{
  width:100%;border-collapse:collapse;
  font-size:.88rem;
}
.compare-table thead{
  position:sticky;top:0;z-index:2;
  background:var(--bg-secondary);
}
.compare-table th,
.compare-table td{
  padding:12px 16px;
  text-align:center;
  vertical-align:top;
  border-bottom:1px solid var(--border-color);
}
.compare-table th{padding:16px}
.compare-label{
  text-align:left !important;
  font-weight:600;color:var(--text-muted);
  font-size:.82rem;
  letter-spacing:.03em;
  white-space:nowrap;
  min-width:120px;
}
.compare-label-sub{
  text-transform:none;
  font-weight:500;
  font-size:.78rem;
  padding-left:24px !important;
  color:var(--text-muted);
  opacity:.8;
}
.compare-col{
  min-width:160px;
  background:var(--bg-secondary);
}
.compare-col-logo{
  width:72px;height:44px;margin:0 auto 8px;
  background:rgba(255,255,255,.06);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.compare-col-logo img{
  width:100%;height:100%;object-fit:contain;padding:3px;
}
.compare-col-name{
  font-weight:700;font-size:.95rem;
}
.compare-val{
  font-size:.85rem;color:var(--text-secondary);
  background:var(--bg-card);
}
.compare-best{
  background:rgba(245,197,24,.06) !important;
  color:var(--yellow) !important;
  font-weight:600;
}
.compare-green{
  color:#22c55e !important;
}


/* Tags */
.compare-tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.compare-tag{
  font-size:.7rem;font-weight:500;
  padding:2px 7px;border-radius:5px;
  white-space:nowrap;
}
.compare-tag-pay{
  background:rgba(236,72,153,.06);color:var(--pink-light);
  border:1px solid rgba(236,72,153,.1);
}
.compare-tag-cat{
  background:rgba(245,197,24,.12);color:var(--yellow);
  border:1px solid rgba(245,197,24,.2);
}

/* Check/cross */
.compare-check{font-size:.95rem}
.compare-yes{color:#22c55e;font-weight:700}
.compare-no{color:var(--text-muted);opacity:.35}

/* Bullets */
.compare-bullets{
  list-style:none !important;padding:0;margin:0;
  text-align:left;
}
.compare-bullets li{
  font-size:.78rem;color:var(--text-secondary);
  padding:2px 0 2px 16px;position:relative;
}
.compare-bullets li::before{
  content:'✓';position:absolute;left:0;color:var(--yellow);font-weight:700;font-size:.72rem;
}

/* CTA row */
.compare-cta-row td{padding:16px}
.compare-cta-row .btn-casino{
  width:auto;padding:10px 20px;font-size:.84rem;
}
.compare-cta-row .compare-label{background:var(--bg-primary)}

/* Sub rows (payment matrix) */
.compare-sub-row td{padding:8px 16px}
.compare-sub-row .compare-label{
  font-size:.76rem;padding:8px 16px 8px 24px;
}

/* ── Toast ── */
.compare-toast{
  position:fixed;bottom:90px;left:50%;
  transform:translateX(-50%) translateY(10px);
  padding:10px 20px;
  background:var(--bg-elevated);
  border:1px solid rgba(245,197,24,.25);
  border-radius:var(--radius-sm);
  color:var(--yellow);
  font-size:.84rem;font-weight:600;
  z-index:10000;
  opacity:0;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  pointer-events:none;
  white-space:nowrap;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.compare-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ── Compare responsive ── */
@media(max-width:768px){
  .compare-bar-inner{
    padding:10px 14px;gap:8px;
  }
  .compare-bar-slots{gap:6px}
  .compare-bar-slot{padding:4px 8px}
  .compare-bar-slot img{width:24px;height:16px}
  .compare-bar-slot span{font-size:.72rem}
  .compare-bar-go{padding:9px 16px;font-size:.82rem}

  /* Full-screen bottom sheet modal */
  .compare-modal{align-items:flex-end}
  .compare-modal-content{
    width:100vw;max-height:92vh;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    transform:translateY(100%);
  }
  .compare-modal.is-open .compare-modal-content{
    transform:translateY(0);
  }
  .compare-modal-header{
    padding:14px 16px;
    position:relative;
  }
  .compare-modal-header::before{
    content:'';display:block;
    width:36px;height:4px;
    background:rgba(255,255,255,.15);
    border-radius:2px;
    position:absolute;top:8px;left:50%;transform:translateX(-50%);
  }
  .compare-modal-header h2{font-size:1rem;padding-top:4px}

  /* Hide table layout, use card layout (only in modal) */
  .compare-modal .compare-table{display:none}
  .compare-cards-mobile{display:flex !important}
}

/* ── Mobile card layout (generated by JS) ── */
.compare-cards-mobile{
  display:none;
  flex-direction:column;gap:0;
  padding:0 0 20px;
}
.compare-mobile-header{
  display:flex;gap:0;
  position:sticky;top:0;z-index:3;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border-color);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.compare-mobile-header::-webkit-scrollbar{display:none}
.compare-mobile-tab{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 12px 12px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all var(--duration) var(--ease);
  background:transparent;border-top:none;border-left:none;border-right:none;
  font-family:var(--font-main);
}
.compare-mobile-tab.active{
  border-bottom-color:var(--yellow);
  background:rgba(245,197,24,.04);
}
.compare-mobile-tab-logo{
  width:48px;height:30px;
  background:rgba(255,255,255,.06);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.compare-mobile-tab-logo img{width:100%;height:100%;object-fit:contain;padding:2px}
.compare-mobile-tab-name{
  font-size:.76rem;font-weight:700;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.compare-mobile-tab.active .compare-mobile-tab-name{color:var(--yellow)}

.compare-mobile-panels{
  position:relative;
  overflow:hidden;
}
.compare-mobile-panel{
  display:none;
  flex-direction:column;
  padding:0;
  animation:compareFadeIn .25s var(--ease);
}
.compare-mobile-panel.active{display:flex}
@keyframes compareFadeIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}

.compare-mobile-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 16px;
  border-bottom:1px solid var(--border-color);
  gap:12px;
}
.compare-mobile-row:last-child{border-bottom:none}
.compare-mobile-label{
  font-size:.76rem;font-weight:600;
  color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.03em;
  flex-shrink:0;min-width:100px;
  padding-top:2px;
}
.compare-mobile-value{
  font-size:.88rem;color:var(--text-secondary);
  text-align:right;flex:1;min-width:0;
  word-break:break-word;
}
.compare-mobile-value.is-best{
  color:var(--yellow);font-weight:600;
}
.compare-mobile-value.is-green{
  color:#22c55e;
}

.compare-mobile-tags{
  display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;
}

.compare-mobile-bullets{
  list-style:none !important;padding:0;margin:0;text-align:right;
}
.compare-mobile-bullets li{
  font-size:.82rem;color:var(--text-secondary);
  padding:2px 0;
}
.compare-mobile-bullets li::before{
  content:'✓ ';color:var(--yellow);font-weight:700;
}

.compare-mobile-cta{
  padding:16px;
  border-top:1px solid var(--border-color);
  margin-top:4px;
}
.compare-mobile-cta .btn-casino{
  width:100%;padding:14px 20px;font-size:.92rem;
  border-radius:10px;
}

.compare-mobile-row-sub{
  padding:10px 16px 10px 28px;
}
.compare-mobile-row-sub .compare-mobile-label{
  text-transform:none;font-size:.78rem;font-weight:500;
  min-width:80px;
}

/* Swipe hint */
.compare-mobile-swipe-hint{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px;
  font-size:.72rem;color:var(--text-muted);
  border-bottom:1px solid var(--border-color);
}
.compare-mobile-swipe-hint svg{opacity:.5}

/* Badge for winner in "all" view */
.compare-mobile-winner{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.68rem;font-weight:600;
  color:var(--yellow);
  background:rgba(245,197,24,.1);
  padding:2px 8px;border-radius:4px;
  margin-left:6px;
}

@media(max-width:480px){
  .compare-bar-inner{
    flex-direction:column;gap:8px;
  }
  .compare-bar-slots{justify-content:center}
  .compare-bar-slot span{display:none}
  .compare-bar-actions{width:100%;justify-content:center}
  .compare-bar-go{flex:1}
  .compare-bar-count{font-size:.72rem}
  .compare-mobile-tab-logo{width:40px;height:26px}
  .compare-mobile-tab-name{font-size:.7rem}
  .compare-mobile-row{padding:12px 14px}
  .compare-mobile-label{min-width:80px;font-size:.72rem}
  .compare-mobile-value{font-size:.84rem}
}

/* ===== IMAGE LIGHTBOX ===== */
img.is-zoomable{
  cursor:zoom-in;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
img.is-zoomable:hover{
  transform:scale(1.01);
  filter:brightness(1.04);
}
img.is-zoomable:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
}
body.image-lightbox-open{overflow:hidden}
.image-lightbox{
  position:fixed;
  inset:0;
  z-index:10050;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8,10,18,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .18s var(--ease);
}
.image-lightbox.is-visible{opacity:1}
.image-lightbox[hidden]{display:none!important}
.image-lightbox-figure{
  position:relative;
  margin:0;
  max-width:min(1200px, 96vw);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transform:scale(.96);
  transition:transform .22s var(--ease);
}
.image-lightbox.is-visible .image-lightbox-figure{transform:scale(1)}
.image-lightbox-img{
  display:block;
  max-width:100%;
  max-height:80vh;
  width:auto;
  height:auto;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  background:#0b0e18;
}
.image-lightbox-caption{
  color:#e8eaf2;
  font-size:.95rem;
  text-align:center;
  max-width:100%;
  padding:0 12px;
  line-height:1.4;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.image-lightbox-caption[hidden]{display:none}
.image-lightbox-close{
  position:fixed;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(20,22,32,.72);
  color:#fff;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  z-index:1;
}
.image-lightbox-close:hover{
  background:rgba(40,44,60,.92);
  border-color:rgba(255,255,255,.32);
  transform:scale(1.05);
}
.image-lightbox-close:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}
@media (max-width:600px){
  .image-lightbox{padding:12px}
  .image-lightbox-img{max-height:75vh;border-radius:10px}
  .image-lightbox-close{top:12px;right:12px;width:40px;height:40px}
  .image-lightbox-caption{font-size:.85rem}
}

/* ===== EV-simulaattorin metodologialaatikko ===== */
.review-ev-method{
  margin-top:24px;
  margin-bottom:32px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02);
}
.review-ev-method > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 16px;
  font-weight:600;
  font-size:.85rem;
  color:var(--text-secondary);
  display:flex;align-items:center;gap:8px;
  user-select:none;
}
.review-ev-method > summary::-webkit-details-marker{display:none;}
.review-ev-method > summary::before{
  content:"▸";
  display:inline-block;
  font-size:.75rem;
  color:var(--text-muted);
  transition:transform var(--duration) var(--ease);
}
.review-ev-method[open] > summary::before{transform:rotate(90deg);}
.review-ev-method > summary:hover{color:var(--text-primary);}
.review-ev-method-body{
  padding:4px 18px 16px;
  font-size:.86rem;
  line-height:1.65;
  color:var(--text-secondary);
  border-top:1px solid var(--border-color);
}
.review-ev-method-body h4{
  font-size:.92rem;
  margin:14px 0 6px;
  color:var(--text-primary);
}
.review-ev-method-body h4:first-child{margin-top:10px;}
.review-ev-method-body p{margin:0 0 8px;}
.review-ev-method-body ul{margin:0 0 8px;padding-left:20px;}
.review-ev-method-body li{margin-bottom:4px;}
.review-ev-method-body strong{color:var(--text-primary);}

/* ===== EV-simulaattorin jakaumahistogrammi ===== */
.ev-distribution{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.015);
}
.ev-distribution-header{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:6px;
  margin-bottom:10px;
}
.ev-distribution-title{
  font-size:.88rem;font-weight:700;color:var(--text-primary);
}
.ev-distribution-sub{
  font-size:.72rem;color:var(--text-muted);
}
.ev-dist-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(80px,2fr) auto;
  gap:10px;align-items:center;
  margin-bottom:6px;
  font-size:.78rem;
}
.ev-dist-label{
  color:var(--text-secondary);
  white-space:normal;
  overflow:hidden;text-overflow:ellipsis;
}
.ev-dist-bar-wrap{
  height:14px;
  background:rgba(255,255,255,.04);
  border-radius:7px;
  overflow:hidden;
  position:relative;
}
.ev-dist-bar{
  height:100%;
  border-radius:7px;
  transition:width .35s var(--ease);
  min-width:2px;
}
.ev-bucket-bust{background:#f87171;}
.ev-bucket-loss{background:#fb923c;}
.ev-bucket-loss-light{background:#fbbf24;}
.ev-bucket-win-light{background:#a3e635;}
.ev-bucket-win{background:#4ade80;}
.ev-bucket-win-big{background:#22d3ee;}
.ev-dist-pct{
  font-size:.74rem;font-weight:700;
  color:var(--text-primary);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  min-width:56px;text-align:right;
}
.ev-distribution-note{
  margin:10px 0 0;
  font-size:.72rem;color:var(--text-muted);
  font-style:italic;
}
@media (max-width:560px){
  .ev-dist-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px 10px;
  }
  .ev-dist-bar-wrap{
    grid-column:1 / -1;
  }
}

/* ===== BONUSKOODISIVU ===== */
.bonus-code-card{
  position:relative;
  margin:0 0 28px;
  padding:28px 24px 22px;
  background:var(--bg-card);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  text-align:center;
  box-shadow:var(--shadow);
}
.bonus-code-live{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px 4px 8px;
  border-radius:var(--radius-pill);
  background:rgba(34,197,94,.12);
  border:1px solid rgba(74,222,128,.35);
  color:#4ade80;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.bonus-code-live-dot{
  width:8px;height:8px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.55);
  animation:bonus-code-live-pulse 1.6s ease-out infinite;
}
@keyframes bonus-code-live-pulse{
  70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
@media (prefers-reduced-motion:reduce){
  .bonus-code-live-dot{animation:none}
}
@media (max-width:480px){
  .bonus-code-live{position:static;justify-content:center;margin:0 auto 12px;width:fit-content}
}
.bonus-code-card-head{
  display:flex;align-items:center;justify-content:center;gap:14px;
  text-align:left;margin:0 0 18px;
}
.bonus-code-card-logo{
  width:72px;height:72px;flex-shrink:0;
  object-fit:contain;padding:6px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
}
.bonus-code-card-brand{
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:4px;
}
.bonus-code-card-offer{
  font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--text-primary);
}
.bonus-code-card-label{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:8px;
}
.bonus-code-row{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
}
.bonus-code-step{
  width:100%;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);
}
.bonus-code-card--multi .bonus-code-value{font-size:1.25rem;padding:10px 16px}
.bonus-code-value{
  display:inline-block;min-width:160px;padding:12px 22px;
  font-size:1.6rem;font-weight:800;letter-spacing:.08em;
  background:var(--bg-elevated);border:1px dashed rgba(245,197,24,.45);
  border-radius:var(--radius-sm);color:var(--yellow-light);
}
.bonus-code-copy{
  appearance:none;border:0;cursor:pointer;
  padding:12px 16px;border-radius:var(--radius-sm);
  background:var(--bg-elevated);color:var(--text-primary);
  font-weight:700;font-size:.88rem;
  border:1px solid var(--border-hover);
}
.bonus-code-copy:hover{border-color:var(--yellow);color:var(--yellow)}
/* Kevyt kopioitava koodichippi (bonuskoodit-pääsivun taulukko ja CTA-nostot) */
.code-chip{
  appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;margin:1px 2px 1px 0;
  font:inherit;font-size:.82rem;font-weight:800;letter-spacing:.06em;
  background:var(--bg-elevated);
  border:1px dashed rgba(245,197,24,.45);border-radius:var(--radius-sm);
  color:var(--yellow-light);white-space:nowrap;
}
.code-chip::after{content:"⧉";font-size:.95em;font-weight:400;opacity:.7}
.code-chip:hover{border-color:var(--yellow);color:var(--yellow)}
.content-area .bonus-code-checks{
  list-style:none;margin:0 0 18px;padding:0;
  display:flex;flex-direction:column;gap:6px;align-items:center;
  font-size:.88rem;color:var(--text-secondary);
}
.bonus-code-checks li::before{content:"✓ ";color:var(--yellow);font-weight:700}
.bonus-code-card .btn-cta{min-width:220px;justify-content:center}
.bonus-code-legal{
  margin:12px 0 0;font-size:.72rem;color:var(--text-muted);
}
.bonus-code-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);
  padding:10px 16px;border-radius:var(--radius-pill);
  background:var(--bg-elevated);border:1px solid rgba(245,197,24,.4);
  color:var(--text-primary);font-size:.85rem;font-weight:600;
  opacity:0;pointer-events:none;z-index:80;
  transition:opacity .2s ease,transform .2s ease;
}
.bonus-code-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.bonus-code-status{
  display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;
  margin:0 0 22px;padding:16px 18px;
  background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);
}
.bonus-code-status-live{
  font-weight:800;color:#4ade80;letter-spacing:.04em;
}
.bonus-code-status p{margin:0 0 6px;font-size:.88rem}
.bonus-code-status ul{margin:0;padding-left:18px;font-size:.88rem;color:var(--text-secondary)}
.bonus-img-slot{margin:20px 0}
.bonus-img-slot-box{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:220px;padding:24px;
  background:var(--bg-secondary);border:1px dashed var(--border-hover);
  border-radius:var(--radius);color:var(--text-muted);font-size:.88rem;
}
.bonus-img-slot-box code{display:block;margin-top:8px;color:var(--yellow);font-size:.8rem}
.bonus-rating{margin:16px 0 20px;padding:16px 18px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius)}
.bonus-rating-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:.92rem;border-bottom:1px solid var(--border-color)}
.bonus-rating-row:last-child{border-bottom:0;font-weight:700}
.bonus-rating-stars{color:var(--yellow);letter-spacing:.06em}

/* ===== PRINT ===== */
@media print{
  .header,.footer,.scroll-top,.search-overlay,.menu-btn,.cta-float,.cta-banner-overlay,.cookie-banner,.image-lightbox{display:none!important}
  body{background:#fff;color:#000}
  .content-area{max-width:100%}
  img.is-zoomable{cursor:default}
}