:root{
  --bg0:#070A10;
  --bg1:#0b1020;
  --card: rgba(17,24,39,.66);
  --stroke: rgba(255,255,255,.10);
  --muted: rgba(233,240,255,.68);
  --txt: #eaf0ff;

  --veilA: rgba(120,180,255,.22);
  --veilB: rgba(255,90,120,.18);
  --veilC: rgba(190,120,255,.20);

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--txt);
  background:
    radial-gradient(900px 600px at 18% 0%, rgba(99,208,255,.14), transparent 60%),
    radial-gradient(900px 600px at 82% 12%, rgba(255,89,146,.12), transparent 62%),
    radial-gradient(900px 700px at 45% 110%, rgba(160,120,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.ggWrap{ max-width: 980px; margin: 0 auto; padding: 18px 14px 70px; position:relative; z-index:1; }

.ggCard{
  border-radius: var(--radius);
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16)) padding-box,
    linear-gradient(135deg, var(--veilA), var(--veilB), var(--veilC)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.ggTitle{ font-size: 22px; font-weight: 900; letter-spacing:.2px; }
.ggSub{ color: var(--muted); margin-top: 6px; line-height:1.35; }

.ggRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ggRow.between{ justify-content:space-between; }

.ggPill{
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  color: var(--muted);
  backdrop-filter: blur(10px);
}

.ggBtn{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 900;
  color: var(--txt);
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease;
}
.ggBtn:active{ transform: scale(.99); }

.ggBtn.primary{
  border: none;
  background: linear-gradient(90deg, rgba(46,213,115,.95), rgba(99,220,255,.85));
  color:#071018;
}
.ggBtn.warn{
  border-color: rgba(251,191,36,.25);
  box-shadow: 0 0 0 1px rgba(251,191,36,.16);
}
.ggBtn.bad{
  border-color: rgba(255,77,109,.28);
  box-shadow: 0 0 0 1px rgba(255,77,109,.18);
}

.ggGrid{ display:grid; gap:14px; margin-top:14px; }
@media(min-width: 920px){ .ggGrid.two{ grid-template-columns: 1fr 1fr; } }

.ggBar{
  height: 14px; border-radius: 999px;
  border:1px solid var(--stroke);
  overflow:hidden;
  background: rgba(0,0,0,.20);
}
.ggFill{
  height:100%;
  width:50%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(120,180,255,.85), rgba(255,90,120,.75), rgba(251,191,36,.85));
}

.ggLog{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 12px;
  color: var(--muted);
  line-height:1.45;
}

/* Ambient layer */
#ambient{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ambSprite{
  position:absolute;
  font-size:18px;
  opacity:.14;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  animation: ambFloat var(--dur, 14s) ease-in-out infinite;
}
.ambSprite.big{ font-size:28px; opacity:.10; }
.ambSprite.med{ font-size:22px; opacity:.12; }
.ambAngel{ text-shadow:0 0 18px rgba(120,180,255,.55); }
.ambDemon{ text-shadow:0 0 18px rgba(255,90,120,.55); }
.ambNull { text-shadow:0 0 18px rgba(190,120,255,.55); }

@keyframes ambFloat{
  0%{ transform: translate3d(0,0,0) rotate(-6deg); }
  50%{ transform: translate3d(var(--dx, 26px), var(--dy, -18px), 0) rotate(6deg); }
  100%{ transform: translate3d(0,0,0) rotate(-6deg); }
}

/* Veil storm pulse (optional) */
#veilStorm{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:0;
  background:
    radial-gradient(900px 600px at 30% 20%, rgba(120,180,255,.25), transparent 60%),
    radial-gradient(900px 600px at 70% 15%, rgba(255,90,120,.22), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28));
  transition: opacity .35s ease;
}
#veilStorm.show{ opacity:1; }