:root{
  --core-size: 520px; /* fallback for old CEF */
  --core-opacity: 0.95;
  --loop-sweep: 2.8s;
  --loop-pulse: 4.2s;
}

/* FULL-FRAME FIX FOR GMOD CEF:
   Avoid vw/vh. Use top/left/right/bottom anchors + 100% sizes. */
html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#050608;
}

body{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
}

/* Background image anchored to all sides */
.bg{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
  pointer-events:none;

  transform:translateZ(0) scale(1.02);
  animation:cam 12s ease-in-out infinite;
  filter:saturate(1.02) contrast(1.03) brightness(0.98);
}
@keyframes cam{
  0%,100%{transform:translateZ(0) scale(1.02) translate(0,0)}
  50%{transform:translateZ(0) scale(1.04) translate(-10px,6px)}
}

.vignette{
  position:fixed; top:0; left:0; right:0; bottom:0;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(circle at 45% 45%, rgba(0,0,0,0.10), rgba(0,0,0,0.70) 70%, rgba(0,0,0,0.92));
  opacity:0.95;
}
.noise{
  position:fixed; top:-20%; left:-20%; right:-20%; bottom:-20%;
  pointer-events:none;
  z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  opacity:0.03;
  animation:noiseDrift 10s linear infinite;
}
@keyframes noiseDrift{
  0%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-1.5%,1%,0)}
  50%{transform:translate3d(-1%,-1.5%,0)}
  75%{transform:translate3d(1%,1.5%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Core centered, GMOD-safe */
.core{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  pointer-events:none;
  opacity:var(--core-opacity);
  z-index:3;
}

.coreSvg{
  width:var(--core-size);
  height:var(--core-size);
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.06));
  transform: translateY(-10px);
}

.coreGlow,.coreGlow2{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:440px;
  height:440px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%);
  mix-blend-mode:overlay;
  animation:pulse var(--loop-pulse) ease-in-out infinite;
}
.coreGlow2{
  width:560px;
  height:560px;
  opacity:0.6;
  animation:pulse2 calc(var(--loop-pulse) * 1.15) ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:translate(-50%,-50%) scale(0.98); opacity:0.18;}
  50%{transform:translate(-50%,-50%) scale(1.02); opacity:0.32;}
}
@keyframes pulse2{
  0%,100%{transform:translate(-50%,-50%) scale(0.99); opacity:0.10;}
  50%{transform:translate(-50%,-50%) scale(1.04); opacity:0.22;}
}

.ring{fill:none;stroke:rgba(255,255,255,0.45);stroke-linecap:round;}
.ringOuter{stroke-width:3.6;opacity:0.55;}
.ringInner{stroke-width:2.8;opacity:0.5;}
.ringSeg{stroke-width:8.5;stroke-dasharray:10 8;opacity:0.28;animation:segSpin 10s linear infinite;transform-origin:120px 120px;}
@keyframes segSpin{to{transform:rotate(360deg);}}

.ticks line{stroke:rgba(255,255,255,0.25);stroke-width:2;stroke-linecap:round;}
.ticks line.major{stroke:rgba(255,255,255,0.32);stroke-width:2.6;}

.sweep{fill:none;stroke:url(#sweepGrad);stroke-width:16;stroke-linecap:round;transform-origin:120px 120px;animation:sweepSpin var(--loop-sweep) linear infinite;}
@keyframes sweepSpin{to{transform:rotate(360deg);}}

.coreLabel{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%) translateY(-10px);
  text-align:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.coreTitle{font-size:12px;color:rgba(255,255,255,0.68);}
.coreSub{margin-top:8px;font-size:18px;color:rgba(255,255,255,0.88);}

/* HUD */
.hud{
  position:fixed;
  left:40px;
  bottom:34px;
  width:540px;
  max-width:calc(100% - 80px);
  color:rgba(255,255,255,0.92);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  z-index:4;
}
.welcome-title{font-size:28px;font-weight:700;}
.welcome-sub{margin-top:4px;font-size:14px;color:rgba(255,255,255,.65);font-style:italic;}
.progressWrap{
  margin-top:14px;
  padding:14px 14px 10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.22);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.progressTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.statusLine{font-size:12px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.pct{font-size:12px;color:rgba(255,255,255,.55);min-width:42px;text-align:right;}
.bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.barFill{height:100%;width:0%;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:0 0 16px rgba(255,255,255,.12);transition:width .2s ease;}
.log{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px;}
.log summary{cursor:pointer;user-select:none;font-size:12px;color:rgba(255,255,255,.55);list-style:none;}
.log summary::-webkit-details-marker{display:none;}
.logInner{
  margin-top:10px; max-height:120px; overflow:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:11px; color:rgba(255,255,255,.65); line-height:1.35;
}
.logLine{opacity:.95;padding:2px 0;}
.logLine span{color:rgba(255,255,255,.4);margin-right:8px;}