:root{
  --bg:#f3f5f8; --bg-2:#eef1f5; --surface:#ffffff; --elev:#ffffff;
  --ink:#0e1116; --muted:#647289; --muter:#8d98aa;
  --line:#e5e8ef; --line-2:#d9dde6;
  --red:#ff3b30; --red-2:#e02b25;
  --cyan:#00e5ff; --blue:#0c5dd8;
  --radius:16px; --r-s:12px;
  --shadow-1: 0 4px 12px rgba(17,22,30,.10);
  --shadow-2: 0 10px 24px rgba(17,22,30,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body.supabet{
  margin:0; background:var(--bg); color:var(--ink);
  font: 500 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

.rail{ position:fixed; inset:0 auto 0 0; width:64px; background:#fff; border-right:1px solid var(--line); z-index:40; box-shadow:var(--shadow-1) }
.brand{ height:64px; display:grid; place-items:center; border-bottom:1px solid var(--line) }
.brand__logo{ height:22px }
.rail__nav{ display:flex; flex-direction:column; gap:10px; padding:10px 8px }
.rail__item{
  display:grid; place-items:center; width:48px; height:48px;border-radius:50%;
  background:var(--bg-2); border:1px solid var(--line); color:var(--muted); text-decoration:none;
  box-shadow: var(--shadow-1);
}
.rail__item.current{ background:#fff; border-color:#d7dbe5; color:var(--ink) }
.rail__item:hover{ filter:brightness(1.02) }

.burger{ display:none }
.scrim[hidden]{ display:none }

.topbar{
  position:sticky; top:0; z-index:30;
  height:64px; margin-left:64px; display:flex; gap:16px; align-items:center; padding:0 18px;
  background:#ffffffcc; backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line);
}
.search{ flex:1 }
.search input{
  width:100%; height:40px; border-radius:999px; padding:0 16px 0 16px; color:var(--ink);
  background:#fff; border:1px solid var(--line); outline:none; box-shadow: var(--shadow-1);
}
.search input::placeholder{ color:var(--muter) }
.auth{ display:flex; gap:10px }

.content{ margin-left:64px; padding:16px 18px 80px }

.btn{
  position:relative; display:inline-grid; place-items:center; height:40px; padding:0 18px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink); background:#fff; cursor:pointer; user-select:none;
  box-shadow: var(--shadow-1); transition: transform .06s ease, box-shadow .2s ease, background .2s;
}
.btn:active{ transform:translateY(1px) }
.btn--lg{ height:48px; padding:0 22px; font-weight:800 }
.btn--red{ background:linear-gradient(180deg, var(--red), var(--red-2)); color:#fff; border-color:#d1251f; box-shadow: 0 8px 16px rgba(255,59,48,.25) }
.btn--soft{ background:#f6f8fb }

.chip{
  height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink);
  box-shadow:var(--shadow-1); cursor:pointer;
}
.chip.is-on{ border-color:#ffb3af; box-shadow:0 6px 12px rgba(255,59,48,.18) inset, var(--shadow-1) }

.hero{ position:relative; max-width:1200px; margin:0 auto 16px }
.hero .slides{
  position:relative; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  height:clamp(260px, 32vw, 420px); border-radius:var(--radius); border:1px solid var(--line); background:#0b0f16; box-shadow:var(--shadow-2)
}
.hero .slides::-webkit-scrollbar{ display:none }
.slide{ position:relative; flex:0 0 100%; height:100%; display:flex; align-items:center; scroll-snap-align:start; overflow:hidden }
.slide.is-dark::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 100% at 0% 0%, rgba(0,0,0,.6), transparent 60%), linear-gradient(90deg, rgba(0,0,0,.7) 0%, transparent 55%) }
.slide__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; z-index:0; pointer-events:none }
.slide__content{ position:relative; z-index:2; color:#fff; padding:24px; max-width:560px; will-change:transform; transition: transform .2s ease }
.pills{ display:flex; gap:8px; margin-bottom:8px }
.pill{ height:28px; padding:0 10px; border-radius:999px; font-weight:800; background:#fff; color:#111; border:1px solid var(--line) }
.pill.on{ background:#111; color:#fff; border-color:#000 }
.eyebrow{ margin:0 0 6px; opacity:.9 }
h1{ margin:.1em 0 .6em; font-size:clamp(24px, 5vw, 44px); line-height:1.05; letter-spacing:.01em; font-weight:1000 }

.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); color:#111; background:#fff; box-shadow:var(--shadow-1);
  display:grid; place-items:center; cursor:pointer; user-select:none;
}
.hero-nav.prev{ left:10px } .hero-nav.next{ right:10px }
.dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; gap:8px; justify-content:center; z-index:4 }
.dots button{ width:8px; height:8px; border-radius:50%; border:2px solid #fff8; background:transparent }
.dots button[aria-current="true"]{ background:#fff }

.scribble{ position:absolute; inset:0; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420'%3E%3Cpath d='M200 260c120-80 240-80 360 0 140 96 260 60 380-80' fill='none' stroke='%2300e5ff' stroke-width='16' stroke-linecap='round' stroke-linejoin='round' opacity='.7'/%3E%3C/svg%3E") center / cover no-repeat;
  filter: drop-shadow(0 0 16px rgba(0,229,255,.5)); opacity:.7; pointer-events:none; z-index:1 }

.tabs{ display:flex; gap:8px; padding:12px 6px; justify-content:center }

.row{ max-width:1200px; margin:18px auto }
.row__head{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px }
.row__head h2{ margin:0; font-size:20px; letter-spacing:.02em }
.seeall{ color:var(--blue); text-decoration:none }

.cards{ display:flex; gap:12px; overflow:auto; padding:6px 4px }
.cards::-webkit-scrollbar{ height:10px }
.cards::-webkit-scrollbar-thumb{ background:#cfd6e3; border-radius:999px }
.game{
  position:relative; display:block; width:220px; aspect-ratio:220/308; flex:0 0 auto; border-radius:18px;
  background:var(--surface); border:1px solid var(--line); box-shadow: var(--shadow-2); overflow:hidden;
}
.game img{ width:100%; height:100%; object-fit:cover; display:block }
.badge{
  position:absolute; right:10px; bottom:10px; z-index:2; padding:4px 8px; border-radius:999px;
  background:var(--red); color:#fff; font-size:12px; font-weight:900; box-shadow:0 6px 16px rgba(255,59,48,.25)
}

.promo{ position:relative; max-width:1200px; margin:14px auto; border-radius:20px; background:#111; color:#fff; overflow:hidden; box-shadow:var(--shadow-2) }
.promo__media{ min-height:220px; background:#000 center/cover no-repeat; filter: saturate(1.1) }
.promo__content{ position:absolute; inset:auto auto 18px 18px }
.promo .btn--soft{ background:#eef2f7; border-color:#e0e5ef }

.foot{ margin-left:64px; padding:24px 24px 60px; background:#fff; border-top:1px solid var(--line) }
.footgrid{ max-width:1200px; margin:0 auto 18px; display:grid; grid-template-columns:repeat(6,1fr); gap:16px }
.foot h4{ margin:0 0 10px; color:#0e1116 }
.foot a{ color:#2d3b52; text-decoration:none; display:block; padding:2px 0 }
.footpay{ display:flex; gap:8px; justify-content:center; margin:12px 0 }
.pill{ height:36px; padding:0 14px; border-radius:999px; background:#f2f4f8; border:1px solid var(--line); color:#1d2430; box-shadow:var(--shadow-1) }
.fineprint{ color:#6a768c; text-align:center }

.fold{ margin:18px auto 0; max-width:1200px; border-radius:16px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-1); overflow:hidden }
.fold > summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; user-select:none }
.fold > summary::-webkit-details-marker{ display:none }
.fold__icon{ width:22px; height:22px; border-radius:6px; background:#eef2f7; border:1px solid var(--line); position:relative; flex:0 0 22px }
.fold__icon::before{ content:""; position:absolute; inset:0; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 8l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px 14px no-repeat; background:#222; transition:transform .18s }
.fold[open] .fold__icon::before{ transform:rotate(180deg) }
.fold__body{ padding:16px 16px 18px; color:#223047 }
.fold__body p{ margin:0 0 12px }

@media (max-width: 1024px){
  .content,.foot,.topbar{ margin-left:0 }
  .rail{ transform:translateX(-100%); transition:transform .2s ease }
  body.nav-open .rail{ transform:none }
  .burger{ display:block; position:fixed; left:10px; top:10px; z-index:50; background:#fff; border:1px solid var(--line); border-radius:10px; width:42px; height:42px; box-shadow:var(--shadow-1)}
  .topbar{ padding-left:60px }
  .cards{ scroll-snap-type:x proximity }
  .game{ width:66vw }
}

@media (max-width: 1024px){
.footgrid {
	display: flex;
	flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce){
  .slide__content{ transition:none }
}
img.twemoji, svg.twemoji{ width:1.05em; height:1.05em; vertical-align:-0.15em }

.rail{ width:220px }
.topbar,.content,.foot{ margin-left:220px }
.rail__nav{ padding:12px }
.rail__item{
  width:auto; height:44px; border-radius:12px; padding:0 12px;
  display:flex; align-items:center; gap:10px; justify-content:flex-start;
}
.rail__item .emoji{ width:1.1em; height:1.1em; display:inline-flex; align-items:center; filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)) }

.slide__bg{ position:absolute; inset:0; z-index:0; }
.slide__bg img{ width:100%; height:100%; object-fit:cover; display:block; }

.advantages .advgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1200px; margin:0 auto }
.adv{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-1); padding:14px }
.adv__img{ width:100%; height:140px; object-fit:cover; border-radius:12px; display:block; margin-bottom:10px }
.adv h3{ margin:6px 0 4px }
.adv p{ margin:0; color:var(--muted) }

.footpay img{ height:28px; width:auto; background:#f8c7c7; border:1px solid var(--line); border-radius:999px; padding:6px; box-shadow:var(--shadow-1) }

@media (max-width: 900px){
  .advantages .advgrid{ grid-template-columns:1fr }
}

body.supabet{ overflow-x:hidden } 

@media (max-width: 1024px){
  .topbar, .content, .foot{
    margin-left: 0 !important;
  }
  
  .rail{
    width: 220px; 
    transform: translateX(-100%);
  }
  body.nav-open .rail{
    transform: translateX(0);
  }

  .topbar{
    padding-left: 56px;
  }
  .burger{
    left: 12px; top: 10px;
  }

  .hero, .row, .promo, .fold{
    margin-left: auto; margin-right: auto;
  }

  .hero .slides{ overflow-x:hidden; }
  .scribble{ inset: 0; }
  .slide__bg{ position:absolute; inset:0; display:block; }
}

@media (max-width: 900px){
  .topbar, .content, .foot{ margin-left:0 !important; }
}

.main_404 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
    margin: 0 auto;
    max-width: 1200px;
}

.breadcrumbs_404.container_404 {
    display: flex;
    gap: 8px;
    margin-bottom: 40px;
    align-self: flex-start;
    margin-left: 20px;
}

.link-ma-b_404 {
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.link-ma-b_404:hover {
    color: #e02b25;
}

.breadcrumbs-link_404 {
    color: #999;
    font-size: 14px;
}

.container_404.page_404_content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.title_404 {
    font-size: 120px;
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1;
}

.description_404 {
    font-size: 24px;
    color: #666;
    margin: 0;
}

.btn_404.btn--primary_404 {
    background-color: #e02b25;
    color: white;
    padding: 12px 32px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.btn_404.btn--primary_404:hover {
    background-color: #e02b25;
}

@media (max-width: 768px) {
    .main_404 {
        min-height: calc(100vh - 150px);
        padding: 40px 20px;
    }
    
    .breadcrumbs_404.container_404 {
        margin-left: 0;
        margin-bottom: 30px;
        align-self: center;
    }
    
    .title_404 {
        font-size: 80px;
    }
    
    .description_404 {
        font-size: 20px;
    }
    
    .btn_404.btn--primary_404 {
        padding: 10px 24px;
    }
}

@media (max-width: 480px) {
    .title_404 {
        font-size: 60px;
    }
    
    .description_404 {
        font-size: 18px;
    }
    
    .breadcrumbs_404.container_404 {
        flex-direction: column;
        text-align: center;
        gap: 4px;
    }
}

.main_internal_page {
    margin-left: 220px;
    padding: 20px 24px 60px;
    max-width: 1200px;
    margin-right: auto;
}

.breadcrumbs_internal_page {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--line);
}

.breadcrumbs_internal_page nav {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
}

.link-home_internal_page {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.link-home_internal_page:hover {
    color: #e02b25;
}

.breadcrumbs-current_internal_page {
    color: #e02b25;
    text-decoration: none;
    font-weight: 500;
}

.prose_internal_page {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
    color: var(--ink);
}

.prose_internal_page h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 1.5rem 0;
    color: var(--ink);
    line-height: 1.2;
}

.prose_internal_page h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 2.5rem 0 1rem 0;
    color: var(--ink);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--line);
}

.prose_internal_page h3 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    color: var(--ink);
}

.prose_internal_page p {
    margin: 0 0 1.5rem 0;
    color: var(--muted);
}

.prose_internal_page ol,
.prose_internal_page ul {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
    color: var(--muted);
}

.prose_internal_page li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.prose_internal_page ol li {
    list-style-type: decimal;
}

.prose_internal_page ul li {
    list-style-type: disc;
}

.prose_internal_page a {
    color: #e02b25;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.prose_internal_page a:hover {
    color: #c02520;
    text-decoration: underline;
}

.prose_internal_page strong {
    font-weight: 600;
    color: var(--ink);
}

.prose_internal_page em {
    font-style: italic;
    color: var(--muted);
}

@media (max-width: 1024px) {
    .main_internal_page {
        margin-left: 0 !important;
        padding: 15px 18px 40px;
    }
    
    .prose_internal_page h1 {
        font-size: 2rem;
    }
    
    .prose_internal_page h2 {
        font-size: 1.5rem;
    }
    
    .breadcrumbs_internal_page nav {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .main_internal_page {
        padding: 12px 15px 30px;
    }
    
    .prose_internal_page h1 {
        font-size: 1.75rem;
    }
    
    .prose_internal_page h2 {
        font-size: 1.375rem;
    }
    
    .prose_internal_page {
        font-size: 15px;
    }
    
    .breadcrumbs_internal_page nav {
        flex-wrap: wrap;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .prose_internal_page h1 {
        font-size: 1.5rem;
    }
    
    .prose_internal_page h2 {
        font-size: 1.25rem;
    }
    
    .prose_internal_page ol,
    .prose_internal_page ul {
        padding-left: 1rem;
    }
}