/* Hunter Log — shared visual system (Polaryeti ice-blue/teal + Solo Leveling HUD motion) */

:root{
  --bg: #070B12;
  --panel: #0C121C;
  --panel-2: #0F1826;
  --line: #1D2C3E;
  --line-soft: #141E2C;
  --ice: #DCE8F2;
  --ice-muted: #63768C;
  --accent: #2FE7C4;
  --accent-2: #7FF5DE;
  --accent-dim: rgba(47,231,196,0.12);
  --accent-glow: rgba(47,231,196,0.35);
  --danger: #F27E7E;
}
*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0;
  min-height:100vh;
  color:var(--ice);
  font-family:'Inter', sans-serif;
  position:relative;
  isolation:isolate;
}

/* animated HUD grid + scanline, sits behind all content */
body::before{
  content:'';
  position:fixed;
  inset:-2px;
  z-index:-2;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(47,231,196,0.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(47,231,196,0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(47,231,196,0.05) 0 1px, transparent 1px 48px),
    var(--bg);
  background-size: auto, 48px 48px, 48px 48px, auto;
  animation: gridDrift 34s linear infinite;
}
body::after{
  content:'';
  position:fixed;
  left:0; right:0;
  height:160px;
  top:-160px;
  z-index:-1;
  pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(47,231,196,0.05) 45%, rgba(47,231,196,0.10) 50%, rgba(47,231,196,0.05) 55%, transparent);
  animation: scanSweep 8s ease-in-out infinite;
}
@keyframes gridDrift{
  0%{ background-position: 0 0, 0 0, 0 0, 0 0; }
  100%{ background-position: 0 0, 48px 96px, 96px 48px, 0 0; }
}
@keyframes scanSweep{
  0%{ top:-160px; opacity:0; }
  10%{ opacity:1; }
  55%{ top:100vh; opacity:1; }
  65%{ opacity:0; }
  100%{ top:100vh; opacity:0; }
}

/* corner-bracket frame used on cards/headers */
.frame{ position:relative; }
.frame .corner{ position:absolute; width:12px; height:12px; border-color:var(--accent); opacity:0.6; animation: cornerPulse 3.4s ease-in-out infinite; }
.frame .corner.tl{ top:-1px; left:-1px; border-top:1.5px solid; border-left:1.5px solid; }
.frame .corner.tr{ top:-1px; right:-1px; border-top:1.5px solid; border-right:1.5px solid; animation-delay:.25s; }
.frame .corner.bl{ bottom:-1px; left:-1px; border-bottom:1.5px solid; border-left:1.5px solid; animation-delay:.5s; }
.frame .corner.br{ bottom:-1px; right:-1px; border-bottom:1.5px solid; border-right:1.5px solid; animation-delay:.75s; }
@keyframes cornerPulse{
  0%,100%{ opacity:.4; box-shadow:0 0 0 rgba(47,231,196,0); }
  50%{ opacity:1; box-shadow:0 0 9px var(--accent-glow); }
}

@keyframes fadeSlideIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes popIn{
  0%{ opacity:0; transform: scale(.55) rotate(45deg); }
  55%{ opacity:1; transform: scale(1.2) rotate(45deg); }
  100%{ opacity:1; transform: scale(1) rotate(45deg); }
}
@keyframes burstRing{
  0%{ opacity:.9; transform: scale(.5) rotate(45deg); }
  100%{ opacity:0; transform: scale(2.6) rotate(45deg); }
}
@keyframes sweepOnce{
  0%{ background-position: -150% 0; opacity:1; }
  100%{ background-position: 150% 0; opacity:1; }
}
@keyframes flicker{
  0%,100%{ opacity:1; }
  92%{ opacity:1; }
  93%{ opacity:.35; }
  94%{ opacity:1; }
  96%{ opacity:.55; }
  97%{ opacity:1; }
}
@keyframes rankFlash{
  0%{ text-shadow:0 0 0 transparent; transform:scale(1); }
  35%{ text-shadow:0 0 26px var(--accent), 0 0 50px var(--accent); transform:scale(1.35); }
  100%{ text-shadow:0 0 12px var(--accent-glow); transform:scale(1); }
}
@keyframes pulseGlow{
  0%,100%{ text-shadow:0 0 10px var(--accent-glow); }
  50%{ text-shadow:0 0 18px var(--accent-glow), 0 0 30px var(--accent-glow); }
}
@keyframes blinkCursor{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

.ambient-particle{
  position:fixed;
  bottom:-12px;
  width:3px;
  height:3px;
  border-radius:50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px var(--accent-glow), 0 0 2px var(--accent-2);
  opacity:0;
  pointer-events:none;
  z-index:1;
  animation: particleRise linear infinite;
}
@keyframes particleRise{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  8%{ opacity:0.85; }
  92%{ opacity:0.4; }
  100%{ transform: translateY(-100vh) translateX(var(--drift, 20px)); opacity:0; }
}

@keyframes smokeRise{
  0%{ transform: translateY(0) scale(0.8); opacity:0; }
  20%{ opacity:0.7; }
  100%{ transform: translateY(-160px) scale(1.5); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}