/*
Theme Name: p Social Casino - ElectroBolt MAX
Description: Ultra-energetic neon-yellow UI. Dense details, micro-interactions, textures, racing stripes & modern arcs. (NO REAL MONEY)
Version: 7.0
Author: Custom Theme
*/

/* -------------------------------------------------
   0) Fonts
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;700&family=Orbitron:wght@700;800&family=Inter:wght@500;600&display=swap');

/* -------------------------------------------------
   1) Design Tokens (ярче, глубже, контрастнее)
-------------------------------------------------- */
:root{
  /* Backgrounds */
  --bg-0:#060607;          /* almost black */
  --bg-1:#0a0b0d;          /* base */
  --bg-2:#101217;          /* cards */
  --bg-3:#0c0e12;          /* overlays/panels */

  /* Text */
  --text-0:#fffbe6;        /* main ivory */
  --text-1:#ffe98a;        /* warm soft */
  --text-2:#d8cc8a;        /* muted */
  --muted:#9a9061;

  /* Energy Yellows / Oranges */
  --volt:#ffea00;          /* main nuclear yellow */
  --volt-hot:#ffd54d;      /* warm lighter */
  --amber:#ffb300;
  --ember:#ff8f00;
  --fire:#ff6a00;          /* energetic orange */
  --scar:#ff3d00;          /* hot red-orange for small accents */

  /* Cold Spark (редкие штрихи) */
  --ice:#7fe9ff;

  /* Lines & rings */
  --line:rgba(255,234,0,.22);
  --line-strong:rgba(255,200,0,.44);
  --ring:rgba(255,234,0,.5);

  /* Shadows / glows */
  --shadow-sm:0 2px 6px rgba(0,0,0,.35);
  --shadow-md:0 12px 28px rgba(0,0,0,.55);
  --shadow-lg:0 28px 80px rgba(0,0,0,.7);

  --glow-bolt:0 0 12px rgba(255,234,0,.7), 0 0 36px rgba(255,179,0,.35);
  --glow-fire:0 0 12px rgba(255,106,0,.55), 0 0 28px rgba(255,106,0,.28);
  --glow-ice:0 0 10px rgba(127,233,255,.4), 0 0 24px rgba(127,233,255,.2);

  /* Radii */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:22px;

  /* Speeds */
  --fast:120ms;
  --normal:220ms;
  --slow:380ms;
}

/* -------------------------------------------------
   2) Reset & Base
-------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text-0);
  background:
    radial-gradient(900px 650px at 110% -10%, rgba(255,234,0,.07), transparent 70%),
    radial-gradient(800px 560px at -15% 5%, rgba(255,106,0,.06), transparent 65%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1));
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  overflow-x:hidden;
}

/* Energy noise overlay */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,234,0,.03) 0px,
      rgba(255,234,0,.03) 1px,
      transparent 2px,
      transparent 4px
    ),
    radial-gradient(1300px 900px at 80% 120%, rgba(255,106,0,.05), transparent 60%);
  mix-blend-mode:screen;
  animation:flicker 4.8s ease-in-out infinite;
  opacity:.55;
}
@keyframes flicker{
  0%, 100%{ opacity:.5 }
  48%{ opacity:.7 }
  52%{ opacity:.4 }
}

/* Subtle particles */
body::after{
  content:"";
  position:fixed; inset:-10% -10%; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle at 20% 30%, rgba(255,234,0,.065) 0 2px, transparent 2px),
                   radial-gradient(circle at 80% 70%, rgba(255,106,0,.06) 0 2px, transparent 2px);
  background-size: 220px 220px, 280px 280px;
  opacity:.4;
  filter:blur(.6px);
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Utility spacing (быстро пригодится) */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}

/* -------------------------------------------------
   3) Header — плотный, с «скоростными» штрихами
-------------------------------------------------- */
header{
  position:fixed; top:0; width:100%; z-index:1000;
  background:linear-gradient(180deg, rgba(12,12,14,.94), rgba(12,12,14,.78));
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 6px 18px rgba(0,0,0,.6);
  backdrop-filter:blur(10px) saturate(140%);
}
.header-content{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0;position:relative}

/* Диагональные «ускорители» под шапкой */
header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:
    linear-gradient(90deg, transparent, var(--volt) 15%, var(--fire) 40%, transparent 70%);
  filter:blur(.2px);
  opacity:.85;
}

/* Logo */
.logo{
  font-family:'Orbitron',sans-serif;
  font-weight:800; font-size:1.9rem; letter-spacing:.06em;
  color:var(--volt); text-decoration:none; text-shadow:var(--glow-bolt);
  display:inline-flex; align-items:center; gap:.5rem; position:relative;
}
.logo::before{
  content:"//";
  font-family:'Chakra Petch',sans-serif;
  color:var(--fire); font-weight:700;
  transform:translateY(-1px);
}
.logo::after{
  content:"▶";
  color:var(--ember); font-size:1.05rem;
  transition:transform var(--fast) ease;
}
.logo:hover::after{ transform:translateX(3px) }

/* User / Auth */
.user-menu{display:flex;align-items:center;gap:1rem}
.user-info{display:flex;align-items:center;gap:1rem;font-weight:700;color:var(--text-0)}
.user-info a{color:var(--volt);text-decoration:none;border-bottom:1px dashed rgba(255,234,0,.45)}
.user-info a:hover{color:var(--fire)}
.points{
  background:linear-gradient(90deg, var(--ember), var(--volt));
  color:#151515; padding:.52rem 1rem;
  border-radius:999px; font-weight:900;
  border:1px solid var(--line-strong); box-shadow:var(--glow-bolt);
}

.auth-buttons a{
  color:var(--text-0); text-decoration:none; padding:.56rem 1rem;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:linear-gradient(180deg, rgba(40,40,28,.38), rgba(22,20,16,.18));
  transition:transform var(--fast), box-shadow var(--normal), color var(--fast), border-color var(--fast);
}
.auth-buttons a:hover{
  color:var(--volt); border-color:var(--line-strong);
  box-shadow:var(--glow-bolt); transform:translateY(-1px);
}

/* -------------------------------------------------
   4) Main / Hero / Disclaimer
-------------------------------------------------- */
main{ margin-top: 80px; padding: 2rem 0; }

.hero{text-align:center; padding:3rem 0 2rem; color:var(--text-0); position:relative; z-index:1}
.hero::before{
  content:""; position:absolute; inset:0 0 -20% 0; z-index:-1;
  background: radial-gradient(500px 260px at 50% 0%, rgba(255,234,0,.08), transparent 60%);
  filter: blur(2px);
}
.hero h1{
  font-family:'Orbitron',sans-serif; font-size:2.7rem; font-weight:800; text-transform:uppercase;
  color:var(--volt); text-shadow:var(--glow-bolt); margin-bottom:1rem; letter-spacing:.02em;
}
.hero p{
  font-size:1.14rem; max-width:860px; margin:0 auto; color:var(--text-1);
}

/* Shimmer underline */
.hero h1 span{
  background-image:linear-gradient(90deg, var(--volt), var(--fire));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.disclaimer-banner{
  background:
    linear-gradient(135deg, rgba(255,234,0,.08), rgba(255,106,0,.06)),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
  color:var(--text-0); padding:1.7rem; text-align:center;
  margin-bottom:2.4rem; border-radius:var(--r-md);
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.disclaimer-banner::before{
  content:""; position:absolute; inset:-40% -40% auto -40%; height:2px;
  background:linear-gradient(90deg, transparent, var(--volt) 30%, var(--fire) 60%, transparent);
  top:0; animation:scanline 6s linear infinite;
  opacity:.55; filter:blur(.4px);
}
@keyframes scanline{
  0%{transform:translateX(-30%)}
  100%{transform:translateX(130%)}
}
.disclaimer-banner h2{
  font-family:'JetBrains Mono','Chakra Petch',monospace;
  font-size:1.52rem; margin-bottom:.55rem;
  color:var(--volt); text-shadow:var(--glow-bolt); font-weight:800;
}
.disclaimer-banner p{ font-size:1.04rem; color:var(--text-0); font-weight:600 }

/* -------------------------------------------------
   5) Games Section — карточки с полосами ускорения
-------------------------------------------------- */
.games-section{ padding:3rem 0 }
.games-section h2{
  text-align:center; font-family:'Orbitron',sans-serif; font-size:2.1rem;
  color:var(--volt); text-transform:uppercase; margin-bottom:2rem; text-shadow:var(--glow-bolt);
}

.games-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.35rem; align-items:stretch;
}

.game-card{
  background:linear-gradient(180deg, #1a1a1d, #111215);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.6rem; text-align:center; position:relative; overflow:hidden;
  transition: transform var(--normal) cubic-bezier(.2,.8,.2,1), box-shadow var(--normal);
  box-shadow:var(--shadow-sm);
}
.game-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:6px;
  background:linear-gradient(90deg, var(--volt), var(--fire));
}
.game-card::after{
  /* диагональная графика */
  content:""; position:absolute; right:-40%; bottom:-40%; width:140%; height:140%;
  background:
    repeating-linear-gradient(-35deg,
      rgba(255,234,0,.06) 0 12px,
      transparent 12px 24px
    );
  pointer-events:none; opacity:.3; transform:rotate(-2deg);
}
.game-card:hover{ transform:translateY(-5px) scale(1.01); box-shadow:var(--shadow-lg) }
.game-card h3{
  color:var(--text-0); font-size:1.28rem; margin-bottom:.6rem; font-weight:800; letter-spacing:.25px;
}
.game-card p{ color:var(--text-2); margin-bottom:1.1rem; font-size:1rem }

/* Icons inside titles (emoji или svg) */
.game-card h3 .ico{ filter:drop-shadow(0 0 8px rgba(255,234,0,.45)) }

/* -------------------------------------------------
   6) Buttons — мощные и отзывчивые
-------------------------------------------------- */
.play-btn{
  background:
    radial-gradient(190px 60px at 50% 120%, rgba(255,234,0,.35), transparent 60%),
    linear-gradient(90deg, var(--ember), var(--volt));
  color:#121212; padding:.88rem 1.28rem; border:none; border-radius:999px;
  font-weight:900; letter-spacing:.22px; text-transform:uppercase;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  transition: transform var(--fast), box-shadow var(--normal), filter var(--normal);
  box-shadow: 0 12px 24px rgba(255,234,0,.22), inset 0 0 0 1px rgba(0,0,0,.25);
  position:relative; isolation:isolate;
}
.play-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(255,234,0,.0);
  transition:box-shadow var(--normal);
}
.play-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow: 0 18px 36px rgba(255,234,0,.34), 0 0 0 3px rgba(255,234,0,.18);
}
.play-btn:hover::after{ box-shadow:0 0 40px 10px rgba(255,180,0,.12) }

/* Transparent alt */
.play-btn.alt{
  background:transparent !important; color:var(--volt) !important;
  border:1px solid var(--line-strong) !important; box-shadow:none !important;
}
.play-btn.alt:hover{ box-shadow:0 0 0 3px rgba(255,234,0,.15) }

/* Small & Ghost variants (на будущее) */
.btn-sm{ padding:.6rem 1rem; border-radius:999px; font-weight:800; font-size:.95rem }
.btn-ghost{ background:transparent; border:1px dashed var(--line); color:var(--text-0) }
.btn-ghost:hover{ border-color:var(--line-strong); color:var(--volt) }

/* -------------------------------------------------
   7) Content Sections / Typography
-------------------------------------------------- */
.content-section{ padding:2.35rem 0; color:var(--text-0); position:relative }
.content-section h2{
  color:var(--volt); font-size:1.78rem; margin-bottom:1.25rem;
  text-align:center; font-weight:900; text-shadow:var(--glow-bolt);
}
.content-section p{
  font-size:1.06rem; margin-bottom:.95rem; max-width:860px; margin-inline:auto; text-align:center; color:var(--text-1);
}

/* подзаголовок с линиями */
.h-sub{
  display:inline-flex; align-items:center; gap:.75rem; font-family:'Chakra Petch',sans-serif; font-weight:700;
}
.h-sub::before,.h-sub::after{
  content:""; height:1px; width:46px; background:linear-gradient(90deg, transparent, var(--volt)); display:inline-block;
}

/* -------------------------------------------------
   8) FAQ — плотнее и с маркерами
-------------------------------------------------- */
.faq-item{
  background:linear-gradient(180deg,#1b1a14,#12110c);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.25rem; margin-bottom:1rem; position:relative; box-shadow:var(--shadow-md);
}
.faq-item::before{
  content:"Q"; position:absolute; left:12px; top:12px;
  font-family:'Orbitron',sans-serif; font-weight:800; color:var(--scar); opacity:.2; font-size:1.2rem;
}
.faq-item h3{
  color:var(--volt-hot); margin-bottom:.45rem; font-weight:900; text-shadow:var(--glow-bolt); padding-left:1.2rem;
}
.faq-item p{ color:var(--text-1); padding-left:1.2rem }

/* -------------------------------------------------
   9) Forms — контакт/авторизация
-------------------------------------------------- */
.contact-form, .auth-form{
  max-width:640px; margin:0 auto;
  background:linear-gradient(180deg, #201e14, #13120b);
  padding:1.7rem; border-radius:var(--r-lg);
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.contact-form::before, .auth-form::before{
  content:""; position:absolute; inset:auto -30% 0 -30%; height:2px;
  background:linear-gradient(90deg, transparent, var(--volt) 25%, var(--fire) 55%, transparent);
  opacity:.6; filter:blur(.3px);
}
.form-group{ margin-bottom:1.12rem }
.form-group label{
  display:block; color:var(--text-0); margin-bottom:.5rem; font-weight:800;
  font-family:'Chakra Petch',sans-serif; letter-spacing:.2px;
}
.form-group input, .form-group textarea{
  width:100%; padding:.92rem 1rem; border:1px solid var(--line);
  border-radius:12px; background:#141208; color:var(--text-0); font-size:1rem; outline:none;
  transition:border-color var(--fast), box-shadow var(--fast), background var(--fast);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.form-group input::placeholder, .form-group textarea::placeholder{ color:#b9ab5f }
.form-group input:focus, .form-group textarea:focus{
  border-color:var(--volt); box-shadow:0 0 0 4px var(--ring), inset 0 0 0 1px rgba(0,0,0,.35); background:#17150a;
}
.submit-btn{
  background:
    radial-gradient(210px 72px at 50% 120%, rgba(255,234,0,.35), transparent 60%),
    linear-gradient(90deg, var(--amber), var(--volt));
  color:#131313; padding:1rem 1.3rem; border:none; border-radius:14px; font-weight:900; cursor:pointer; width:100%; font-size:1.06rem;
  transition: transform var(--fast), box-shadow var(--normal), filter var(--normal);
  box-shadow: 0 14px 28px rgba(255,234,0,.26), inset 0 0 0 1px rgba(0,0,0,.25);
}
.submit-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 20px 40px rgba(255,234,0,.36), 0 0 0 3px rgba(255,234,0,.2) }

/* Toggle / Switch (на будущее) */
.switch{
  --w:44px; --h:26px;
  position:relative; width:var(--w); height:var(--h); border-radius:999px; background:#1a1a1a;
  border:1px solid var(--line); cursor:pointer; transition:background var(--fast), border-color var(--fast);
}
.switch::after{
  content:""; position:absolute; width:22px; height:22px; border-radius:50%;
  left:2px; top:50%; transform:translateY(-50%); background:var(--volt); box-shadow:var(--glow-bolt);
  transition:left var(--fast), background var(--fast);
}
.switch.is-on{ background:linear-gradient(90deg,#2b2b1a,#1a1a12); border-color:var(--line-strong) }
.switch.is-on::after{ left: calc(var(--w) - 24px); background:var(--amber) }

/* -------------------------------------------------
   10) Profile / Stats
-------------------------------------------------- */
.profile-section{
  background:linear-gradient(180deg, #211f14, #15130c);
  border-radius:var(--r-lg); padding:1.7rem; margin-bottom:1.5rem; box-shadow:var(--shadow-md); border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.profile-section h3{
  color:var(--volt); margin-bottom:.85rem; font-size:1.32rem; font-weight:900; text-shadow:var(--glow-bolt);
}
.stats-grid{ display:flex; gap:1rem; flex-wrap:wrap }
.stat-card{
  background:linear-gradient(180deg, #242116, #171409);
  padding:1rem; border-radius:var(--r-md); text-align:center; border:1px solid var(--line); flex:1; min-width:160px; box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
}
.stat-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg, var(--volt), var(--fire));
  opacity:.7;
}
.stat-value{
  font-size:1.85rem; font-weight:900; color:var(--volt);
  display:block; text-shadow:var(--glow-bolt); font-family:'Orbitron',sans-serif;
}
.stat-label{ color:var(--muted); font-size:.9rem }

/* -------------------------------------------------
   11) Footer
-------------------------------------------------- */
footer{
  background:linear-gradient(180deg, #0b0b0a, #080808);
  color:var(--text-1); text-align:center; padding:2rem 0; margin-top:3rem;
  border-top:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* -------------------------------------------------
   12) Accessibility / Focus
-------------------------------------------------- */
a{ color:var(--volt) }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--ring); outline-offset:2px; border-radius:8px;
}

/* -------------------------------------------------
   13) Loading / Skeleton (на будущее)
-------------------------------------------------- */
.skeleton{
  position:relative; background:#151515; overflow:hidden; border-radius:8px;
}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{
  0%{ transform:translateX(-100%) }
  100%{ transform:translateX(100%) }
}

/* -------------------------------------------------
   14) Badges / Chips
-------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .6rem; border-radius:999px; font-weight:800; font-size:.82rem;
  background:linear-gradient(90deg, var(--ember), var(--volt)); color:#121212; box-shadow:var(--glow-fire);
}
.badge--ghost{ background:transparent; color:var(--text-0); border:1px dashed var(--line); box-shadow:none }

/* -------------------------------------------------
   15) Tables (если где-то будут)
-------------------------------------------------- */
.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:10px; border:1px solid var(--line);
  background:linear-gradient(180deg,#181818,#101010);
}
.table th, .table td{ padding:.85rem 1rem; text-align:left }
.table th{
  background:linear-gradient(180deg,#202020,#151515);
  color:var(--text-1); font-weight:800; font-family:'Chakra Petch',sans-serif; letter-spacing:.02em;
}
.table tr + tr td{ border-top:1px solid rgba(255,234,0,.08) }
.table tr:hover td{ background:rgba(255,234,0,.03) }

/* -------------------------------------------------
   16) Tooltips (простые)
-------------------------------------------------- */
.tooltip{ position:relative; cursor:help }
.tooltip:hover::after{
  content:attr(data-tip); position:absolute; bottom:120%; left:50%; transform:translateX(-50%);
  background:#0f0f0f; border:1px solid var(--line); color:var(--text-0);
  padding:.45rem .6rem; border-radius:8px; white-space:nowrap; z-index:20; box-shadow:var(--shadow-md);
}

/* -------------------------------------------------
   17) Responsive
-------------------------------------------------- */
@media (max-width: 768px){
  .header-content{ flex-direction:column; gap:.75rem }
  .hero h1{ font-size:2.08rem }
  .games-grid{ grid-template-columns:1fr }
  .points{ padding:.46rem .9rem }
}

/* -------------------------------------------------
   18) Tiny motion helpers (rotate / pulse)
-------------------------------------------------- */
.spin-slow{ animation:spin 8s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.pulse{ animation:pulse 1.8s ease-in-out infinite }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,234,0,.2) }
  50%{ box-shadow:0 0 0 10px rgba(255,234,0,.06) }
}