/* =========================================================
   10-TOPCASINOONLINE.RU — основной таблиц стилей
   Тема: «карточный стол» — глубокий зелёный фетр, золото, слоновая кость
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --felt-950:#081F17;
  --felt-900:#0B3D2E;
  --felt-800:#0F4A38;
  --felt-700:#146046;
  --gold-500:#C9A227;
  --gold-400:#E8C468;
  --gold-300:#F3DFA0;
  --ivory-100:#F4EFE2;
  --ivory-200:#EDE6D3;
  --ink-900:#101613;
  --ink-700:#2B332E;
  --red-600:#B3272C;
  --red-500:#D3383D;
  --line:rgba(244,239,226,0.14);
  --shadow-card:0 12px 30px rgba(4,16,11,0.35);
  --radius-s:6px;
  --radius-m:14px;
  --radius-l:22px;
  --maxw:1180px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--felt-950);
  color:var(--ivory-100);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{padding-left:1.2em;}
table{border-collapse:collapse;width:100%;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ivory-100);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h1{font-size:clamp(2rem,4.4vw,3.25rem); font-weight:600;}
h2{font-size:clamp(1.5rem,3vw,2.1rem); margin-top:2.4em;}
h3{font-size:clamp(1.15rem,2vw,1.4rem); margin-top:1.6em; color:var(--gold-300);}
p{margin:0 0 1.1em; color:var(--ivory-200);}
.lede{font-size:1.15rem; color:var(--ivory-100);}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(8,31,23,.97), rgba(8,31,23,.93));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--ivory-100);}
.brand .chip{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--gold-300), var(--gold-500) 60%, #8a6c14 100%);
  display:flex;align-items:center;justify-content:center;
  color:var(--felt-950); font-weight:800; font-size:.85rem; font-family:var(--font-body);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.brand span.domain{color:var(--gold-400); font-size:.62em; display:block; font-family:var(--font-body); font-weight:600; letter-spacing:.02em;}
nav.main-nav{display:flex; gap:26px; align-items:center;}
nav.main-nav a{font-size:.94rem; font-weight:500; color:var(--ivory-200); padding:6px 2px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;}
nav.main-nav a:hover, nav.main-nav a:focus-visible{color:var(--gold-300); border-color:var(--gold-500);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; color:var(--ivory-100); width:42px; height:42px; font-size:1.2rem; cursor:pointer;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-weight:700; font-size:.98rem;
  border:1px solid transparent; cursor:pointer; font-family:var(--font-body);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-play{
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color:var(--felt-950);
  box-shadow:0 6px 18px rgba(201,162,39,.35);
}
.btn-play:hover{box-shadow:0 8px 22px rgba(201,162,39,.5);}
.btn-outline{background:transparent; border-color:var(--gold-500); color:var(--gold-300);}
.btn-outline:hover{background:rgba(201,162,39,.1);}
.btn-sm{padding:9px 18px; font-size:.86rem;}
.btn-block{width:100%;}

/* ---------- hero ---------- */
.hero{
  padding:64px 0 56px;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(201,162,39,.16), transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(20,96,70,.5), transparent 60%),
    var(--felt-950);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
.eyebrow-note{color:var(--gold-400); font-weight:600; font-size:.95rem; margin-bottom:14px;}
.hero p.lede{max-width:56ch;}
.hero-stats{display:flex; gap:28px; margin-top:26px; flex-wrap:wrap;}
.hero-stat b{display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--gold-300);}
.hero-stat span{font-size:.85rem; color:var(--ivory-200);}
.hero-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}

.hero-card{
  background:linear-gradient(160deg, var(--felt-800), var(--felt-900));
  border:1px solid var(--line); border-radius:var(--radius-l);
  padding:26px; box-shadow:var(--shadow-card);
}
.hero-card h3{margin-top:0; color:var(--ivory-100);}
.hero-card .pick-name{font-family:var(--font-display); font-size:1.5rem; color:var(--gold-300); margin:6px 0 2px;}
.stars{color:var(--gold-400); letter-spacing:2px; font-size:1.05rem;}
.hero-card .mini-fact{display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line); font-size:.92rem;}
.hero-card .mini-fact b{color:var(--ivory-100);}

/* ---------- rating table (top-10) ---------- */
.rank-table{margin-top:20px;}
.rank-row{
  display:grid; grid-template-columns:56px 1.6fr 1fr 1fr 1fr 160px;
  gap:16px; align-items:center;
  background:var(--felt-900); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:16px 18px; margin-bottom:12px;
}
.rank-num{
  font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--gold-400);
  width:44px; height:44px; border-radius:50%; border:1px solid var(--gold-500);
  display:flex; align-items:center; justify-content:center;
}
.rank-brand{font-family:var(--font-display); font-size:1.15rem; color:var(--ivory-100);}
.rank-brand small{display:block; font-family:var(--font-body); color:var(--ivory-200); font-weight:400; font-size:.8rem; margin-top:2px;}
.rank-meta{font-size:.86rem;}
.rank-meta b{display:block; color:var(--gold-300); font-size:.95rem;}
.rank-meta span{color:var(--ivory-200);}

/* ---------- cards / grid ---------- */
.section{padding:56px 0;}
.section-tight{padding:40px 0;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{
  background:var(--felt-900); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:24px; box-shadow:var(--shadow-card);
}
.card h3{margin-top:0;}

.badge{
  display:inline-block; padding:4px 12px; border-radius:999px; font-size:.78rem; font-weight:700;
  background:rgba(201,162,39,.14); color:var(--gold-300); border:1px solid rgba(201,162,39,.4);
}

/* ---------- pros/cons ---------- */
.proscons{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.proscons ul{list-style:none; padding:0; margin:0;}
.proscons li{padding:9px 0 9px 30px; position:relative; border-bottom:1px dashed var(--line); font-size:.95rem; color:var(--ivory-200);}
.pros li::before{content:"✓"; position:absolute; left:0; color:#5fbf88; font-weight:700;}
.cons li::before{content:"✕"; position:absolute; left:0; color:var(--red-500); font-weight:700;}

/* ---------- data table ---------- */
.data-table{background:var(--felt-900); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;}
.data-table th, .data-table td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:.93rem;}
.data-table th{background:var(--felt-800); color:var(--gold-300); font-weight:700; font-size:.85rem;}
.data-table tr:last-child td{border-bottom:none;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  cursor:pointer; padding:18px 4px; font-weight:600; color:var(--ivory-100);
  font-family:var(--font-display); font-size:1.05rem; list-style:none; position:relative; padding-right:30px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; position:absolute; right:4px; color:var(--gold-400); font-size:1.3rem;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 4px 18px;}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{font-size:.85rem; color:var(--ivory-200); padding:16px 0;}
.breadcrumbs a{color:var(--gold-300);}
.breadcrumbs span{margin:0 6px; opacity:.5;}

/* ---------- toc ---------- */
.toc{background:var(--felt-900); border:1px solid var(--line); border-radius:var(--radius-m); padding:20px 22px;}
.toc b{font-family:var(--font-display); color:var(--gold-300); display:block; margin-bottom:8px; font-size:1.05rem;}
.toc ol{margin:0; padding-left:1.1em;}
.toc a{color:var(--ivory-200);}
.toc a:hover{color:var(--gold-300);}

/* ---------- sticky CTA bar (casino pages) ---------- */
.cta-bar{
  position:sticky; bottom:0; z-index:40;
  background:var(--felt-950); border-top:1px solid var(--line);
  padding:12px 0; margin-top:40px;
}
.cta-bar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.cta-bar .cta-info{font-size:.88rem; color:var(--ivory-200);}
.cta-bar .cta-info b{color:var(--gold-300);}

/* ---------- footer ---------- */
footer{background:var(--ink-900); border-top:1px solid var(--line); padding:48px 0 26px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;}
footer h4{color:var(--gold-300); font-size:.95rem; margin-bottom:12px; font-family:var(--font-body); font-weight:700;}
footer a{display:block; color:var(--ivory-200); font-size:.9rem; padding:5px 0;}
footer a:hover{color:var(--gold-300);}
.footer-bottom{border-top:1px solid var(--line); margin-top:30px; padding-top:20px; font-size:.8rem; color:#8b9089; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.disclaimer{font-size:.78rem; color:#7c8279; max-width:80ch; margin-top:16px;}
.age18{display:inline-flex; align-items:center; justify-content:center; width:28px;height:28px; border:1px solid var(--gold-500); border-radius:50%; color:var(--gold-400); font-size:.72rem; font-weight:800; margin-right:8px;}

/* ---------- misc ---------- */
.divider{height:1px; background:var(--line); margin:44px 0;}
.kicker{color:var(--gold-400); font-weight:600; font-size:.85rem; margin-bottom:6px; display:block;}
.link-inline{color:var(--gold-300); border-bottom:1px solid rgba(232,196,104,.4);}
.link-inline:hover{border-color:var(--gold-300);}
.provider-tags{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0;}
.provider-tags span{background:var(--felt-800); border:1px solid var(--line); padding:6px 12px; border-radius:8px; font-size:.82rem; color:var(--ivory-200);}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .rank-row{grid-template-columns:44px 1fr 1fr; grid-template-areas:"num brand brand" "meta1 meta2 meta3" "btn btn btn";}
}
@media (max-width:720px){
  nav.main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--felt-950);
    flex-direction:column; align-items:flex-start; padding:24px; gap:4px;
    transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{width:100%; padding:14px 6px; border-bottom:1px solid var(--line); border-bottom-width:1px;}
  .nav-toggle{display:block;}
  .grid-2, .grid-3{grid-template-columns:1fr;}
  .proscons{grid-template-columns:1fr;}
  .hero{padding:40px 0;}
  h1{font-size:1.8rem;}
  .rank-row{grid-template-columns:1fr; text-align:left;}
  .rank-num{margin-bottom:6px;}
  .cta-bar .wrap{flex-direction:column; align-items:stretch; text-align:center;}
  .footer-grid{grid-template-columns:1fr;}
  .data-table{overflow-x:auto; display:block;}
  .data-table table{min-width:520px;}
}
@media (max-width:420px){
  .wrap{padding:0 16px;}
  .btn{padding:12px 20px; font-size:.92rem;}
}

/* focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--gold-400); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important;}
}