/* OnHosty Duel Hero (looping CSS cinematic battle) */

.oh-hero{
  --bg1:#030614;
  --bg2:#061a2b;
  --glowA: rgba(0,255,255,.55);
  --glowB: rgba(255,120,0,.55);
  --neon: rgba(72,255,245,.85);
  --neon2: rgba(255,209,72,.75);

  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 42px) 0;
  background:
    radial-gradient(1200px 600px at 50% 40%, rgba(0,255,255,.08), transparent 60%),
    radial-gradient(900px 500px at 70% 55%, rgba(255,120,0,.09), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.oh-hero-inner{
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
}

.oh-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: clamp(12px, 2vw, 18px);
}

.oh-brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  color:#e9f7ff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.oh-dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(0,255,255,.9);
  box-shadow: 0 0 18px rgba(0,255,255,.7), 0 0 44px rgba(0,255,255,.25);
  animation: ohPulseDot 1.6s ease-in-out infinite;
}

.oh-title{
  font-weight: 800;
  font-size: clamp(16px, 2.1vw, 20px);
}
.oh-sub{
  opacity:.75;
  font-size: clamp(10px, 1.3vw, 12px);
}

@keyframes ohPulseDot{
  0%,100%{ transform: scale(1); opacity: .9; }
  50%{ transform: scale(1.25); opacity: 1; }
}

/* PLAY BUTTON (pulsating) */
.oh-play{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing:.08em;
  text-transform: uppercase;
  color:#041018;

  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(72,255,245,.95), rgba(255,209,72,.95));
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 22px rgba(72,255,245,.32),
    0 0 38px rgba(255,209,72,.18);
  position: relative;
  isolation:isolate;
  transform: translateZ(0);
  animation: ohPlayPulse 1.35s ease-in-out infinite;
}

.oh-play::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius:inherit;
  background: radial-gradient(circle at 50% 50%, rgba(72,255,245,.45), transparent 55%);
  filter: blur(10px);
  opacity:.75;
  z-index:-1;
  animation: ohPlayHalo 1.35s ease-in-out infinite;
}

.oh-play:hover{ transform: translateY(-1px) scale(1.02); }
.oh-play:active{ transform: translateY(0) scale(.99); }

@keyframes ohPlayPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.04); }
}
@keyframes ohPlayHalo{
  0%,100%{ opacity:.55; transform: scale(.95); }
  50%{ opacity:.95; transform: scale(1.08); }
}

/* ARENA */
.oh-arena{
  position: relative;
  height: clamp(320px, 46vw, 520px);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(800px 420px at 50% 55%, rgba(0,255,255,.10), transparent 60%),
    radial-gradient(650px 360px at 50% 65%, rgba(255,120,0,.10), transparent 62%),
    linear-gradient(180deg, rgba(5,10,26,.6), rgba(3,6,20,.9));
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Cards */
.oh-card{
  position: absolute;
  top: 50%;
  width: clamp(170px, 22vw, 260px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;

  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translateY(-50%);
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.08);
  filter: saturate(1.15) contrast(1.08);
}

/* Aura glow ring */
.oh-card::before{
  content:"";
  position:absolute; inset:-14px;
  border-radius: 22px;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.18), transparent 55%),
              radial-gradient(circle at 60% 70%, rgba(0,255,255,.18), transparent 55%);
  filter: blur(10px);
  opacity:.85;
  z-index:-1;
}

/* Subtle scanline sheen */
.oh-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:
    linear-gradient(120deg, transparent 0 45%, rgba(255,255,255,.12) 50%, transparent 55% 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 6px);
  mix-blend-mode: screen;
  opacity:.38;
  animation: ohSheen 2.4s linear infinite;
  pointer-events:none;
}

@keyframes ohSheen{
  0%{ transform: translateX(-14%); opacity:.25; }
  50%{ opacity:.45; }
  100%{ transform: translateX(14%); opacity:.25; }
}

/* Left & Right positioning + motion */
.oh-left{
  left: 7%;
  animation: ohFloatL 2.3s ease-in-out infinite, ohClashL 3.2s ease-in-out infinite;
}
.oh-right{
  right: 7%;
  animation: ohFloatR 2.1s ease-in-out infinite, ohClashR 3.2s ease-in-out infinite;
}

@keyframes ohFloatL{
  0%,100%{ transform: translateY(-50%) rotate(-2deg); }
  50%{ transform: translateY(calc(-50% - 10px)) rotate(-1deg); }
}
@keyframes ohFloatR{
  0%,100%{ transform: translateY(-50%) rotate(2deg); }
  50%{ transform: translateY(calc(-50% - 12px)) rotate(1deg); }
}

/* Clash: cards push inward + shake */
@keyframes ohClashL{
  0%,60%,100%{ transform: translateY(-50%) translateX(0) rotate(-2deg); }
  70%{ transform: translateY(-50%) translateX(16px) rotate(-1deg); }
  72%{ transform: translateY(-50%) translateX(22px) rotate(1deg); }
  76%{ transform: translateY(-50%) translateX(10px) rotate(-2deg); }
}
@keyframes ohClashR{
  0%,60%,100%{ transform: translateY(-50%) translateX(0) rotate(2deg); }
  70%{ transform: translateY(-50%) translateX(-16px) rotate(1deg); }
  72%{ transform: translateY(-50%) translateX(-22px) rotate(-1deg); }
  76%{ transform: translateY(-50%) translateX(-10px) rotate(2deg); }
}

/* Center FX container */
.oh-centerfx{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Beams */
.oh-beam{
  position:absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 70vw);
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  filter: blur(0.2px);
  opacity: .0;
}

.oh-beam-a{
  background: linear-gradient(90deg, transparent, rgba(0,255,255,.95), transparent);
  box-shadow: 0 0 22px rgba(0,255,255,.55);
  animation: ohBeamA 3.2s ease-in-out infinite;
}
.oh-beam-b{
  background: linear-gradient(90deg, transparent, rgba(255,140,0,.95), transparent);
  box-shadow: 0 0 22px rgba(255,140,0,.45);
  height: 8px;
  transform: translate(-50%, -50%) rotate(2deg);
  animation: ohBeamB 3.2s ease-in-out infinite;
}

@keyframes ohBeamA{
  0%,62%,100%{ opacity:0; transform: translate(-50%,-50%) scaleX(.2); }
  70%{ opacity:1; transform: translate(-50%,-50%) scaleX(1.0); }
  76%{ opacity:.35; transform: translate(-50%,-50%) scaleX(.85); }
}
@keyframes ohBeamB{
  0%,64%,100%{ opacity:0; transform: translate(-50%,-50%) rotate(2deg) scaleX(.25); }
  72%{ opacity:.95; transform: translate(-50%,-50%) rotate(2deg) scaleX(1.05); }
  78%{ opacity:.25; transform: translate(-50%,-50%) rotate(2deg) scaleX(.8); }
}

/* Burst in the middle */
.oh-burst{
  position:absolute;
  left:50%; top:50%;
  width: 24px; height: 24px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(0,255,255,.35), transparent 70%);
  box-shadow:
    0 0 40px rgba(255,255,255,.35),
    0 0 70px rgba(0,255,255,.22),
    0 0 90px rgba(255,140,0,.18);
  opacity: 0;
  animation: ohBurst 3.2s ease-in-out infinite;
}

@keyframes ohBurst{
  0%,66%,100%{ opacity:0; transform: translate(-50%,-50%) scale(.6); }
  72%{ opacity:1; transform: translate(-50%,-50%) scale(2.1); }
  76%{ opacity:.4; transform: translate(-50%,-50%) scale(1.4); }
}

/* Sparks (pure CSS dots) */
.oh-sparks{
  position:absolute;
  left:50%; top:50%;
  width: 2px; height: 2px;
  transform: translate(-50%,-50%);
  box-shadow:
    -120px -22px 0 1px rgba(0,255,255,.9),
    -90px  18px 0 0 rgba(255,209,72,.9),
    -40px -30px 0 1px rgba(255,140,0,.85),
     20px -10px 0 0 rgba(0,255,255,.8),
     55px  26px 0 1px rgba(255,255,255,.85),
     95px -14px 0 0 rgba(255,140,0,.8),
     135px  10px 0 1px rgba(0,255,255,.75);
  opacity:0;
  animation: ohSparks 3.2s ease-in-out infinite;
  filter: blur(.1px);
}

@keyframes ohSparks{
  0%,66%,100%{ opacity:0; transform: translate(-50%,-50%) scale(.8); }
  72%{ opacity:1; transform: translate(-50%,-50%) scale(1.2); }
  78%{ opacity:0; transform: translate(-50%,-50%) scale(1.4); }
}

/* Floor + vignette + grain */
.oh-floor{
  position:absolute; left:0; right:0; bottom:-30%;
  height: 60%;
  background:
    radial-gradient(closest-side at 50% 30%, rgba(0,255,255,.10), transparent 70%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  transform: skewY(-4deg);
  filter: blur(.2px);
}

.oh-vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}

.oh-grain{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity:.18;
  pointer-events:none;
  animation: ohGrain 1.8s steps(2) infinite;
}

@keyframes ohGrain{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(-1.2%, .8%); }
  100%{ transform: translate(0,0); }
}

/* Caption */
.oh-caption{
  margin-top: 14px;
  color: rgba(233,247,255,.92);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.oh-caption-line{
  font-weight: 800;
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: .02em;
}
.oh-caption-sub{
  opacity: .75;
  margin-top: 4px;
  font-size: clamp(12px, 1.6vw, 14px);
}

/* Mobile tweaks */
@media (max-width: 640px){
  .oh-left{ left: 4%; }
  .oh-right{ right: 4%; }
  .oh-topbar{ flex-direction: column; align-items: flex-start; }
  .oh-play{ align-self: stretch; text-align:center; }
}