/* Aurora Liquid Glass theme for OnlineCasino
   Author: Copilot (assistant)
   - Provides a dynamic aurora background
   - Soft frosted glass cards
   - Accent highlights, buttons, inputs
*/
:root{
  --bg-1: #071026; /* deep navy */
  --bg-2: #0b1b3a; /* dark blue */
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.035);
  --accent: linear-gradient(90deg,#ffd166,#d4af37,#9be15d,#7ad7ff);
  --muted: rgba(230,238,248,0.6);
  --card-radius: 14px;
  --shadow: 0 10px 40px rgba(2,6,23,0.6);
  --glass-border: rgba(255,255,255,0.06);
  --accent-color: #d4af37;
}

/* Animated aurora background */
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#e6eef8; background: radial-gradient(1200px 600px at 10% 10%, rgba(156, 217, 255, 0.06), transparent 6%), radial-gradient(800px 500px at 90% 90%, rgba(212,175,55,0.04), transparent 8%), linear-gradient(180deg,var(--bg-1),var(--bg-2));
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; align-items:center; justify-content:center; padding:28px;
  overflow-y:auto;
}

/* soft moving aurora layers */
body::before, body::after{
  content:""; position:fixed; inset:0; pointer-events:none; mix-blend-mode:screen; z-index:0; opacity:0.7;
}
body::before{
  background: radial-gradient(600px 300px at 20% 20%, rgba(122,215,255,0.12), transparent 20%), radial-gradient(400px 220px at 80% 75%, rgba(155,225,135,0.09), transparent 18%);
  transform: translateZ(0); filter: blur(40px);
  animation: floatX 12s ease-in-out infinite;
}
body::after{
  background: radial-gradient(700px 360px at 70% 10%, rgba(212,175,55,0.08), transparent 18%), radial-gradient(500px 260px at 10% 80%, rgba(138,111,255,0.06), transparent 16%);
  transform: translateZ(0); filter: blur(60px) saturate(1.2);
  animation: floatY 18s ease-in-out infinite;
}
@keyframes floatX{0%{transform:translateX(-6%)}50%{transform:translateX(6%)}100%{transform:translateX(-6%)}}
@keyframes floatY{0%{transform:translateY(-4%)}50%{transform:translateY(4%)}100%{transform:translateY(-4%)}}

/* container and card styles */
.wrap, main, .card{position:relative; z-index:1}
.card{
  width:100%; max-width:980px; margin:14px; border-radius:var(--card-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow); padding:20px; backdrop-filter: blur(8px) saturate(1.1);
}

/* brand */
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#08101a;
  background: linear-gradient(135deg,#ffd166,#d4af37); box-shadow:0 6px 26px rgba(212,175,55,0.14);
}
.small{font-size:12px; color:var(--muted)}
.muted{color:var(--muted)}

/* form elements */
input[type="text"],input[type="password"],input[type="email"],input[type="number"],textarea,select{
  width:100%; padding:12px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);
  color:inherit; outline:none; font-size:14px; box-shadow: inset 0 -2px 8px rgba(0,0,0,0.2);
}
label{font-size:13px; color:var(--muted); display:block}

/* buttons */
.btn{padding:10px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:700; color:#07121b; background:linear-gradient(90deg,#e9d76a,#ffd166); box-shadow: 0 8px 20px rgba(212,175,55,0.12)}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04)}
.btn.primary{background: linear-gradient(90deg,#7ad7ff,#9be15d); color:#06121a;}
.btn:active{transform:translateY(1px)}

/* links and helpers */
a.card-link{color:inherit; text-decoration:none; padding:8px 10px; border-radius:8px; display:inline-block}

/* header layout */
header{display:flex; align-items:center; justify-content:space-between}
.actions{display:flex; gap:10px; align-items:center}

/* balance display */
.balance{display:inline-flex; align-items:baseline; gap:6px}
.balance .count{font-weight:800; font-size:18px}

/* responsive adjustments */
@media (max-width:820px){
  .card{padding:16px}
  .logo{width:48px;height:48px}
}

/* subtle glass accent border glow */
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); mix-blend-mode: overlay; opacity:0.9;
}

/* small utilities */
.row{display:flex; align-items:center; gap:12px}
.input{position:relative}
.icon{background:transparent; border:0; padding:6px; border-radius:8px; color:var(--muted)}
.icon:hover{color:var(--accent-color)}

/* card accent border animation */
@keyframes pulseAccent{0%{box-shadow:0 6px 24px rgba(122,215,255,0.03)}50%{box-shadow:0 10px 40px rgba(155,225,135,0.03)}100%{box-shadow:0 6px 24px rgba(122,215,255,0.03)}}
.card:hover{animation:pulseAccent 6s linear infinite}

/* subtle glass borders for sections */
aside .card, main.card{border-radius:12px}

/* ensure forms, inputs visible on dark bg */
input::placeholder{color:rgba(230,238,248,0.45)}

/* reduce z-index issues for floating effects */
body > *{position:relative}

/* small decorative gradient line under headers */
h1,h2{margin:0}
h2{position:relative}
h2::after{content:""; position:absolute; left:0; right:0; height:3px; border-radius:3px; background: linear-gradient(90deg,#7ad7ff,#ffd166); opacity:0.15; bottom:-10px}

/* accessibility: focus outlines */
:focus{outline:2px solid rgba(122,215,255,0.12); outline-offset:2px}