/*
Theme Name: p Social Casino - Hydrion
Description: Relaxed Art-Deco ocean skin. Soft blues, sea-glass cards, wave dividers, golden-sand accents. (NO REAL MONEY)
Version: 1.0
Author: Custom Theme
*/

/* -------------------------------------------------
   0) Fonts — новый дуэт: Art-Deco + современный
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Manrope:wght@400;600;700;800&display=swap');

/* -------------------------------------------------
   1) Design Tokens — нежная океанская гамма
-------------------------------------------------- */
:root{
  /* Ocean Backgrounds */
  --bg-0:#0b1724;           /* deep navy */
  --bg-1:#0f2132;           /* base ocean */
  --bg-2:#11273a;           /* cards glass */
  --bg-3:#0d1e2c;           /* panels */

  /* Sea Text */
  --text-0:#eaf6ff;         /* main (ледяной белый) */
  --text-1:#cfe8ff;         /* мягкий */
  --text-2:#a5bed4;         /* приглушённый */

  /* Hydrion Blues / Teals */
  --aqua:#39dadd;           /* аквамарин */
  --reef:#18b6c3;           /* насыщённый бирюзовый */
  --tide:#6be0ff;           /* светлая волна */
  --deep:#005c85;           /* глубокий акцент */

  /* Sand Accent (аккуратно, как золото) */
  --sand:#f6d68b;
  --sand-50:rgba(246,214,139,.5);

  /* Lines / Rings */
  --line:rgba(105,194,230,.28);
  --line-strong:rgba(105,194,230,.45);
  --ring:rgba(57,218,221,.45);

  /* Shadows / Glows (мягкие) */
  --shadow-sm:0 2px 6px rgba(0,0,0,.28);
  --shadow-md:0 12px 28px rgba(0,0,0,.45);
  --shadow-lg:0 28px 80px rgba(0,0,0,.55);

  --glow-aqua:0 0 12px rgba(57,218,221,.35), 0 0 32px rgba(107,224,255,.18);
  --glow-sand:0 0 10px rgba(246,214,139,.35), 0 0 20px rgba(246,214,139,.18);

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

  /* Motion */
  --fast:140ms;
  --normal:240ms;
}

/* -------------------------------------------------
   2) Reset & Base
-------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text-0);
  background:
    radial-gradient(900px 650px at 110% -10%, rgba(107,224,255,.08), transparent 70%),
    radial-gradient(820px 560px at -15% 5%, rgba(24,182,195,.07), 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;
  overflow-x:hidden;
  position:relative;
}

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

/* Морская рябь (очень тонко) */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 900px at 80% 120%, rgba(57,218,221,.05), transparent 60%),
    repeating-linear-gradient( to bottom,
      rgba(107,224,255,.03) 0 2px, transparent 2px 5px );
  mix-blend-mode:screen; opacity:.45;
}

/* Плавные волны внизу экрана */
body::after{
  content:""; position:fixed; left:-10%; right:-10%; bottom:-6%; height:28%;
  background:
    radial-gradient(60% 180% at 50% 120%, rgba(24,182,195,.18), transparent 60%),
    radial-gradient(40% 160% at 70% 120%, rgba(107,224,255,.12), transparent 60%);
  filter:blur(8px); pointer-events:none; z-index:0;
}

/* -------------------------------------------------
   3) Header — спокойное стекло + арт-деко метки
-------------------------------------------------- */
header{
  position:fixed; top:0; width:100%; z-index:1000;
  background:
    linear-gradient(180deg, rgba(15,33,50,.82), rgba(15,33,50,.6));
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: var(--shadow-sm);
}
.header-content{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0}

/* ЛОГО — Art Deco */
.logo{
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:1.8rem;
  letter-spacing:.06em;
  color:var(--sand);
  text-decoration:none;
  text-shadow: var(--glow-sand);
  position:relative;
}
.logo::before,
.logo::after{
  content:"";
  position:absolute; top:50%; width:18px; height:1px;
  background: linear-gradient(90deg, transparent, var(--sand-50));
  transform: translateY(-50%);
}
.logo::before{ left:-26px }
.logo::after{ right:-26px; transform: translateY(-50%) scaleX(-1) }

/* 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(--tide); text-decoration:none; border-bottom:1px dotted var(--line-strong)
}
.user-info a:hover{ color:var(--aqua) }

.points{
  background:linear-gradient(90deg, rgba(246,214,139,.9), rgba(246,214,139,.75));
  color:#1b222a; padding:.5rem 1rem; border-radius:999px; font-weight:900;
  border:1px solid rgba(246,214,139,.55); box-shadow:var(--glow-sand);
}

/* Кнопки авторизации — стекло */
.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(22,44,64,.36), rgba(18,34,48,.18));
  transition: transform var(--fast), box-shadow var(--normal), color var(--fast), border-color var(--fast);
}
.auth-buttons a:hover{
  color:var(--tide); border-color:var(--line-strong);
  box-shadow:var(--glow-aqua); 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(520px 260px at 50% 0%, rgba(57,218,221,.12), transparent 60%),
    radial-gradient(380px 180px at 20% 0%, rgba(246,214,139,.10), transparent 70%);
  filter: blur(1.5px);
}
.hero h1{
  font-family:'Cinzel',serif; font-size:2.5rem; font-weight:700; letter-spacing:.02em;
  color:var(--sand); text-shadow:var(--glow-sand); margin-bottom:1rem;
}
.hero p{
  font-size:1.08rem; max-width:860px; margin:0 auto; color:var(--text-1);
}

/* Баннер-дисклеймер — «морское стекло» */
.disclaimer-banner{
  background:
    radial-gradient(140% 120% at 10% -10%, rgba(107,224,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(17,39,58,.85), rgba(16,35,50,.92));
  color:var(--text-0); padding:1.6rem; text-align:center;
  margin-bottom:2.2rem; border-radius:var(--r-xl);
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.disclaimer-banner::after{
  /* мягкая волна сверху */
  content:""; position:absolute; left:-10%; right:-10%; top:-1px; height:10px;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(107,224,255,.25), transparent 70%);
  filter: blur(4px);
}
.disclaimer-banner h2{
  font-family:'Cinzel',serif;
  font-size:1.42rem; margin-bottom:.5rem;
  color:var(--tide); text-shadow:var(--glow-aqua); font-weight:600;
}
.disclaimer-banner p{ font-size:1.02rem; color:var(--text-0); font-weight:600 }

/* -------------------------------------------------
   5) Games — карточки «морское стекло» с волной
-------------------------------------------------- */
.games-section{ padding:3rem 0 }
.games-section h2{
  text-align:center; font-family:'Cinzel',serif; font-size:2rem;
  color:var(--tide); margin-bottom:2rem; text-shadow:var(--glow-aqua); font-weight:600;
}

.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, rgba(22,47,68,.6), rgba(15,34,50,.88));
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.6rem; text-align:center; position:relative; overflow:hidden;
  transition: transform var(--normal) cubic-bezier(.2,.8,.2,1), box-shadow var(--normal), border-color var(--fast);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(3px) saturate(120%);
}
.game-card::before{
  /* декоративная волна */
  content:""; position:absolute; left:-20%; right:-20%; top:-22px; height:42px;
  background:
    radial-gradient(50% 120% at 50% 100%, rgba(57,218,221,.25), transparent 60%);
  filter: blur(6px);
}
.game-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--line-strong);
}
.game-card h3{
  color:var(--text-0); font-size:1.22rem; margin-bottom:.55rem; font-weight:800; letter-spacing:.2px;
}
.game-card p{ color:var(--text-2); margin-bottom:1.05rem; font-size:.98rem }

/* -------------------------------------------------
   6) Buttons — аква-градиент, мягкий свет
-------------------------------------------------- */
.play-btn{
  background:
    radial-gradient(180px 60px at 50% 120%, rgba(107,224,255,.30), transparent 60%),
    linear-gradient(90deg, var(--reef), var(--tide));
  color:#08202c;
  padding:.9rem 1.28rem; border:none; border-radius:999px;
  font-weight:800; letter-spacing:.18px;
  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(107,224,255,.22), inset 0 0 0 1px rgba(0,0,0,.25);
}
.play-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow: 0 18px 36px rgba(107,224,255,.34), 0 0 0 3px rgba(57,218,221,.18);
}

/* Прозрачная */
.play-btn[style*="background: transparent"],
.play-btn.alt{
  background:transparent !important; color:var(--tide) !important;
  border:1px solid var(--line-strong) !important; box-shadow:none !important;
}

/* -------------------------------------------------
   7) Content Sections / Типографика
-------------------------------------------------- */
.content-section{ padding:2.25rem 0; color:var(--text-0) }
.content-section h2{
  color:var(--tide); font-size:1.72rem; margin-bottom:1.15rem;
  text-align:center; font-weight:600; text-shadow:var(--glow-aqua); font-family:'Cinzel',serif;
}
.content-section p{
  font-size:1.04rem; margin-bottom:.9rem; max-width:840px; margin-inline:auto; text-align:center; color:var(--text-1);
}

/* -------------------------------------------------
   8) FAQ — гладкие карточки с тонкой кромкой песка
-------------------------------------------------- */
.faq-item{
  background: linear-gradient(180deg, rgba(18,40,58,.7), rgba(14,31,46,.92));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.2rem; margin-bottom:1rem; position:relative; box-shadow:var(--shadow-md);
}
.faq-item::after{
  content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg, rgba(246,214,139,.6), transparent);
  opacity:.6;
}
.faq-item h3{
  color:var(--sand); margin-bottom:.4rem; font-weight:700; text-shadow:var(--glow-sand);
  font-family:'Cinzel',serif;
}
.faq-item p{ color:var(--text-1) }

/* -------------------------------------------------
   9) Forms — морское стекло, аква-фокус
-------------------------------------------------- */
.contact-form, .auth-form{
  max-width:640px; margin:0 auto;
  background:linear-gradient(180deg, rgba(21,46,66,.62), rgba(14,33,49,.92));
  padding:1.6rem; border-radius:var(--r-xl);
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  position:relative; overflow:hidden; backdrop-filter: blur(2px) saturate(120%);
}
.contact-form::before, .auth-form::before{
  content:""; position:absolute; inset:auto -30% 0 -30%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(107,224,255,.6) 40%, transparent);
  opacity:.5;
}
.form-group{ margin-bottom:1.1rem }
.form-group label{
  display:block; color:var(--text-0); margin-bottom:.5rem; font-weight:800;
  font-family:'Manrope',sans-serif; letter-spacing:.2px;
}
.form-group input, .form-group textarea{
  width:100%; padding:.9rem 1rem; border:1px solid var(--line);
  border-radius:12px; background:#0f2132; 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:#93b5cc }
.form-group input:focus, .form-group textarea:focus{
  border-color:var(--tide); box-shadow:0 0 0 4px var(--ring), inset 0 0 0 1px rgba(0,0,0,.35); background:#10293f;
}
.submit-btn{
  background:
    radial-gradient(210px 72px at 50% 120%, rgba(107,224,255,.30), transparent 60%),
    linear-gradient(90deg, var(--reef), var(--tide));
  color:#08202c; padding:1rem 1.2rem; border:none; border-radius:14px; font-weight:800; cursor:pointer; width:100%; font-size:1.05rem;
  transition: transform var(--fast), box-shadow var(--normal), filter var(--normal);
  box-shadow: 0 14px 28px rgba(107,224,255,.26), inset 0 0 0 1px rgba(0,0,0,.25);
}
.submit-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 20px 40px rgba(107,224,255,.36), 0 0 0 3px rgba(57,218,221,.18) }

/* -------------------------------------------------
   10) Profile / Stats
-------------------------------------------------- */
.profile-section{
  background:linear-gradient(180deg, rgba(20,44,64,.66), rgba(14,33,49,.95));
  border-radius:var(--r-xl); 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(--tide); margin-bottom:.85rem; font-size:1.28rem; font-weight:700; text-shadow:var(--glow-aqua);
  font-family:'Cinzel',serif;
}
.stats-grid{ display:flex; gap:1rem; flex-wrap:wrap }
.stat-card{
  background:linear-gradient(180deg, rgba(22,47,68,.62), rgba(14,33,49,.95));
  padding:1rem; border-radius:var(--r-lg); 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 8% 0 8%; height:2px;
  background:linear-gradient(90deg, rgba(57,218,221,.8), transparent);
  opacity:.5;
}
.stat-value{
  font-size:1.78rem; font-weight:800; color:var(--sand);
  display:block; text-shadow:var(--glow-sand); font-family:'Cinzel',serif;
}
.stat-label{ color:var(--text-2); font-size:.9rem }

/* -------------------------------------------------
   11) Footer
-------------------------------------------------- */
footer{
  background:linear-gradient(180deg, #0f1f2d, #0b1724);
  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,.04);
}

/* -------------------------------------------------
   12) A11y / Focus
-------------------------------------------------- */
a{ color:var(--tide) }
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) Tables (на будущее)
-------------------------------------------------- */
.table{
  width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:10px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,40,58,.7),rgba(14,33,49,.95));
}
.table th, .table td{ padding:.85rem 1rem; text-align:left }
.table th{
  background:linear-gradient(180deg,rgba(24,50,72,.8),rgba(16,38,56,.95));
  color:var(--text-1); font-weight:800; font-family:'Manrope',sans-serif; letter-spacing:.02em;
}
.table tr + tr td{ border-top:1px solid rgba(107,224,255,.08) }
.table tr:hover td{ background:rgba(107,224,255,.05) }

/* -------------------------------------------------
   14) Tooltips
-------------------------------------------------- */
.tooltip{ position:relative; cursor:help }
.tooltip:hover::after{
  content:attr(data-tip); position:absolute; bottom:120%; left:50%; transform:translateX(-50%);
  background:#0f2132; 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);
}

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