/*
  Casinos Premium Lusos — Design System: Royal Purple / Tech Forward / Playful Bounce
  Year: 2025
*/
:root{
  --primary:#a855f7;
  --primary-glow:rgba(168,85,247,0.4);
  --secondary:#6366f1;
  --accent:#f472b6; /* red-leaning accent */
  --accent-glow:rgba(244,114,182,0.3);
  --bg-1:#1e1b4b;
  --bg-2:#312e81;
  --bg-3:#0f0a1a;
  --card-bg:rgba(30,27,75,0.0); /* Minimal Lines: no fills (transparent) */
  --card-border:rgba(168,85,247,0.2);
  --radius:8px; /* small corners 6-10px */
  --speed:0.2s;
  --ease:cubic-bezier(0.68,-0.55,0.265,1.55);
  --shadow-glow:0 0 0 1px var(--card-border), 0 0 24px var(--primary-glow);
  --text:#E9E8FF;
  --text-dim:#C4C2F5;
  --muted:#9CA3AF;
  --success:#10b981;
  --danger:#ef4444;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  background:linear-gradient(120deg,var(--bg-1),var(--bg-2),var(--bg-3));
  background-attachment:fixed;
  line-height:1.6;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;
  background-image:
    radial-gradient(600px 300px at 10% -10%, var(--primary-glow), transparent 60%),
    radial-gradient(600px 300px at 90% 110%, var(--accent-glow), transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;
  background-image:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.04) 50%, transparent 52%),
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,.08), transparent 40%);
  background-size:6px 6px, auto, auto; /* Minimal lines texture */
}

.container{width:min(100%, calc(var(--container) + 2rem));margin-inline:auto;padding-inline:1rem}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:var(--bg-1);color:#fff;padding:.5rem 1rem;border:1px solid var(--card-border);border-radius:var(--radius)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);background:linear-gradient(to right, rgba(15,10,26,.5), rgba(49,46,129,.25));border-bottom:1px solid var(--card-border)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none}
.logo-text{font-family:"Space Grotesk", system-ui, sans-serif;font-weight:700;letter-spacing:.3px}
.logo-mark{display:grid;place-items:center;transition:transform var(--speed) var(--ease)}
.logo:hover .logo-mark{transform:scale(1.08)}

.nav{display:flex;align-items:center;gap:1rem}
.hamburger{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--text)}
.nav-links{list-style:none;display:none;gap:1rem;margin:0;padding:0}
.nav-links a{color:var(--text-dim);text-decoration:none;padding:.4rem .6rem;border-radius:6px;transition:all var(--speed) var(--ease);border:1px solid transparent}
.nav-links a:hover,.nav-links a.active{color:#fff;border-color:var(--card-border);background:rgba(99,102,241,.08)}
.nav-cta{display:none;align-items:center;gap:.6rem}
.badge-18{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--card-border);border-radius:999px;padding:.15rem .45rem;font-weight:600;color:#fff;background:transparent}
.badge-18.big{font-size:1rem;padding:.25rem .6rem}
.badge-18.xl{font-size:1.4rem;padding:.35rem .85rem}

@media(min-width:768px){
  .nav-links{display:flex}
  .hamburger{display:none}
  .nav-cta{display:flex}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--radius);cursor:pointer;text-decoration:none;border:1px solid var(--card-border);color:#fff;background:transparent;transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease), border-color var(--speed) var(--ease)}
.btn:hover{transform:scale(1.08);background:linear-gradient(90deg, rgba(168,85,247,.18), rgba(244,114,182,.18));box-shadow:var(--shadow-glow);border-color:rgba(244,114,182,.5)}
.btn-outline{border-color:var(--card-border)}
.btn.danger:hover{background:linear-gradient(90deg, rgba(239,68,68,.2), rgba(244,114,182,.25));border-color:rgba(239,68,68,.6)}
.link{color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(244,114,182,.4);transition:all var(--speed) var(--ease)}
.link:hover{color:#fff;border-color:transparent}

/* Hero */
.hero{position:relative;min-height:86vh;display:grid;place-items:center;border-bottom:1px solid var(--card-border)}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(1200px 500px at 10% -10%, rgba(168,85,247,.25), transparent 60%),
  radial-gradient(800px 400px at 90% 110%, rgba(244,114,182,.2), transparent 60%),
  url('/bg.jpg') center/cover no-repeat; /* blurred casino floor */
  filter:contrast(1.1) saturate(1.1) brightness(.2);
}
.hero::after{content:"\2660\2665\2666\2663";position:absolute;inset:auto 2rem 2rem auto;color:rgba(255,255,255,.08);font-size:5rem;letter-spacing:1rem}
.hero-inner{position:relative;z-index:2;text-align:center;padding:4rem 0}
.hero-title{font-family:"Space Grotesk", system-ui, sans-serif;font-size:clamp(2rem,6vw,3.5rem);margin:0 0 .6rem}
.hero-sub{color:var(--text-dim);margin:0 0 1.2rem}
.search{display:flex;gap:.6rem;justify-content:center;align-items:center;background:rgba(15,10,26,.4);border:1px solid var(--card-border);border-radius:999px;padding:.4rem .4rem;backdrop-filter:blur(8px)}
.search input{background:transparent;border:0;outline:none;color:#fff;padding:.6rem 1rem;min-width:230px}
.search-icon{margin-left:.6rem}
.hero-chips{display:none;gap:1rem;margin-top:1.6rem}
.hero-chips img{width:92px;height:62px;border-radius:10px;border:1px solid var(--card-border);filter:saturate(1.1);transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease)}
.hero-chips img:hover{transform:scale(1.08) translateY(-2px);box-shadow:var(--shadow-glow)}
@media(min-width:640px){.hero-chips{display:flex}}

.contact-form {
  max-width: 480px;
  margin: 2rem auto;
  padding: 1.75rem 1.5rem;
  background: #0a0c12;
  border-radius: 16px;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Общие стили полей */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 12, 18, 0.9);
  color: #f9fafb;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family: inherit;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(249, 250, 251, 0.5);
}

/* Hover/Focus */
.contact-form input:hover,
.contact-form textarea:hover {
  border-color: rgba(59, 130, 246, 0.6);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.6);
  background: rgba(15, 23, 42, 0.95);
}

/* Кнопка (если у тебя уже есть .btn .btn-outline – это просто пример) */
.contact-form .btn.btn-outline {
  align-self: flex-start;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: 1px solid #22c55e;
  background: transparent;
  color: #f9fafb;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.08s ease;
}

.contact-form .btn.btn-outline:hover {
  background: #22c55e;
  color: #020617;
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.45);
  transform: translateY(-1px);
}

.contact-form .btn.btn-outline:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
}

/* Адаптив */
@media (max-width: 480px) {
  .contact-form {
    padding: 1.5rem 1.2rem;
    margin: 1.5rem 1rem;
  }

  .contact-form .btn.btn-outline {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}


/* Sections */
.section{padding:48px 0}
.section-head{margin-bottom:24px}
.section-head h2{font-family:"Space Grotesk", system-ui, sans-serif;margin:0 0 .4rem}
.section-head p{margin:0;color:var(--text-dim)}
.page-hero.minimal{padding:40px 0 10px;border-bottom:1px solid var(--card-border)}

/* Cards */
.cards-grid{display:grid;grid-template-columns:1fr;gap:16px}
.cards-grid.three{grid-template-columns:1fr}
@media(min-width:640px){.cards-grid{grid-template-columns:repeat(2,1fr)}.cards-grid.three{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.cards-grid{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--card-border);border-radius:var(--radius);background:var(--card-bg);overflow:hidden;transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease)}
.card:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-glow);border-color:rgba(244,114,182,.5)}
.card-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--card-border)}
.card-media.tight{aspect-ratio:21/9}
.card-media img{width:100%;height:100%;display:block;filter:brightness(.85)}
.card-body{padding:16px}
.rating{display:flex;align-items:center;gap:.5rem;color:var(--accent)}
.rating span{letter-spacing:2px}
.features{margin:.6rem 0 1rem;padding-left:1.2rem}
.features li{margin:.2rem 0}
.card-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

.casino-card h3{margin:.2rem 0 .4rem}
.casino-card .bonus{color:var(--text-dim)}

/* Table */
.table-wrap{overflow:auto;border:1px solid var(--card-border);border-radius:var(--radius)}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--card-border)}
.table thead th{position:sticky;top:0;background:rgba(15,10,26,.5);backdrop-filter:blur(6px);text-align:left;font-weight:600}
.table tbody tr:hover{background:rgba(99,102,241,.05)}

/* Criteria */
.criteria-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.criteria-grid{grid-template-columns:repeat(3,1fr)}}
.criterion .icon{width:48px;height:48px;border:1px solid var(--card-border);border-radius:10px;display:grid;place-items:center;margin-bottom:.6rem}

/* Reviews page */
.filters{padding:12px}
.filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filter-row label{display:flex;flex-direction:column;gap:6px;font-weight:600}
select{appearance:none;background:transparent;border:1px solid var(--card-border);color:#fff;padding:.5rem .8rem;border-radius:8px}

/* Newsletter */
.newsletter{display:grid;gap:16px;align-items:center;padding:16px}
@media(min-width:768px){.newsletter{grid-template-columns:1.2fr .8fr}}
.nl-form{display:grid;gap:10px}
.nl-form input{background:transparent;border:1px solid var(--card-border);border-radius:8px;padding:.7rem;color:#fff}
.nl-small{margin:0;color:var(--muted);font-size:.9rem}

/* About */
.about-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:1024px){.about-grid{grid-template-columns:2fr 2fr 2fr}}
.team{display:grid;gap:12px}
.member{display:flex;gap:10px;align-items:center}
.member img{width:48px;height:48px;border-radius:50%;border:1px solid var(--card-border)}
.list{margin:.6rem 0 0;padding-left:1.2rem}

/* Offers */
.offers .offer h3{margin-top:.2rem}

/* Legal */
.legal .legal-copy{padding:16px}
.legal .mono{font-family:"IBM Plex Mono", monospace}
.legal .muted{color:var(--muted)}

/* Disclaimer */
.disclaimer{padding:40px 0}
.disclaimer-inner{display:flex;gap:14px;align-items:center;border:1px dashed var(--card-border);border-radius:var(--radius);padding:14px;background:rgba(15,10,26,.35)}

/* Footer */
.site-footer{border-top:1px solid var(--card-border);padding:28px 0 40px;background:linear-gradient(180deg, rgba(15,10,26,.3), rgba(15,10,26,.5))}
.footer-grid{display:grid;gap:16px;grid-template-columns:1fr}
.f-brand .foot-note{color:var(--text-dim)}
.f-links{display:grid;gap:8px}
.f-links a{color:var(--text-dim);text-decoration:none;border-bottom:1px dashed transparent;transition:all var(--speed) var(--ease)}
.f-links a:hover{color:#fff;border-color:var(--card-border)}
.f-legal{display:grid;gap:8px;justify-items:start}
@media(min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}

/* Age Modal */
.age-modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:1000;}
.age-card{max-width:520px;margin:1rem;background:rgba(15,10,26,.6);padding:16px;text-align:center}
.age-icon{font-size:2rem;margin-bottom:.4rem}
.age-actions{display:flex;gap:10px;justify-content:center;margin-top:10px}
.age-small{color:var(--muted);font-size:.9rem}

/* Floating animation */
.floaty{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--speed) ease, transform var(--speed) ease}
.reveal.in{opacity:1;transform:none}
[hidden]{
  display:none;
}