@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');

:root{
  --violet:#a020f0;
  --magenta:#ff00ff;
  --pink:#ff66ff;
  --gold:#ffcc00;
  --bg1:#2a003f;
  --bg2:#0d001a;
  --bg3:#000000;
}

*{box-sizing:border-box}

body{
  font-family:'Orbitron',sans-serif;
  background: radial-gradient(circle at 20% -10%, var(--bg1), var(--bg2) 40%, var(--bg3) 70%);
  color:#fff;
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-x:hidden;
}

h1{
  font-size:clamp(2.2rem, 3.5vw, 4rem);
  margin:28px 0 10px;
  letter-spacing:1px;
  text-shadow:0 0 20px var(--violet), 0 0 40px var(--magenta);
  animation:pulse 2.2s infinite alternate ease-in-out;
}

@keyframes pulse{
  from{ text-shadow:0 0 18px var(--violet), 0 0 36px var(--magenta); transform:translateZ(0) }
  to  { text-shadow:0 0 40px var(--magenta), 0 0 70px #ff33ff; transform:translateZ(0) }
}

.sub{
  opacity:.9;
  margin-bottom:4px;
  font-size:.95rem;
  color:#d8a6ff;
}

#countdown{
  font-size:1.1rem;
  margin-bottom:22px;
  color:#ffccff;
  text-shadow:0 0 10px var(--violet), 0 0 18px var(--magenta);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:26px;
  width:min(1200px, 92%);
  padding:24px;
  perspective:1000px;
}

.card{
  background:linear-gradient(180deg, rgba(40,0,60,.88), rgba(20,0,30,.88));
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,0,255,.28);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:conic-gradient(from 0deg, transparent 0 120deg, rgba(255,0,255,.22), transparent 240deg);
  filter:blur(12px);
  z-index:0;
  animation:spin 6s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.card:hover{
  transform:rotateY(10deg) translateY(-8px) scale(1.06);
  box-shadow:0 0 24px var(--violet), 0 0 48px var(--magenta);
  border-color:rgba(255,0,255,.6);
  cursor:pointer;
}

.card a{ text-decoration:none; color:inherit; position:relative; z-index:1; display:block }

.card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:14px;
  border:2px solid var(--magenta);
  box-shadow:0 0 10px var(--violet);
  transition:transform .3s ease;
}
.card:hover img{ transform:scale(1.03) }

.card p{
  margin:12px 0 4px;
  font-weight:700;
  font-size:1.1rem;
  color:var(--pink);
  text-shadow:0 0 10px var(--magenta);
}

/* Special Pippolordo */
.card.special{
  border:2px solid var(--gold);
  box-shadow:0 0 26px var(--gold), 0 0 60px var(--gold);
  animation:glow 1.4s infinite alternate ease-in-out;
}
.card.special p{
  color:var(--gold);
  text-shadow:0 0 12px var(--gold), 0 0 28px #ffaa00;
}
.card.special .ribbon{
  position:absolute;
  top:10px; left:-18px;
  transform:rotate(-20deg);
  background:linear-gradient(90deg,#ffdf6b,#ffb700);
  color:#3b2500;
  padding:6px 22px;
  font-weight:800;
  border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  z-index:2;
}
@keyframes glow{ from{ box-shadow:0 0 22px var(--gold) } to{ box-shadow:0 0 60px #ffaa00 } }

/* Video Page */
.video-page{
  padding:24px 12px 46px;
  background: radial-gradient(circle at 80% 10%, #310046, #120018 45%, #000 80%);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.video-wrap{
  position:relative;
  width:min(92vw, 980px);
  margin:18px auto 8px;
  border-radius:22px;
  padding:14px;
  background:linear-gradient(180deg, rgba(30,0,45,.9), rgba(15,0,25,.9));
  border:2px solid var(--magenta);
  box-shadow:0 0 30px var(--violet), 0 0 60px var(--magenta);
  overflow:hidden;
}
.video-wrap::before, .video-wrap::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:24px;
  background:conic-gradient(from 0deg, transparent 0 90deg, rgba(255,0,255,.25), transparent 180deg, rgba(160,32,240,.25), transparent);
  filter:blur(18px);
  animation:spin 8s linear infinite;
  z-index:0;
}
.video-wrap::after{ animation-direction:reverse; opacity:.6 }

video{
  position:relative;
  z-index:1;
  width:100%;
  border-radius:14px;
  border:2px solid var(--magenta);
  background:#000;
  outline:none;
}

/* Faux control bar (decorative, native controls still visible) */
.control-light{
  position:absolute;
  inset:auto 10% -4px 10%;
  height:8px;
  background: radial-gradient(ellipse at center, rgba(255,0,255,.5), rgba(255,0,255,0));
  filter:blur(6px);
  z-index:0;
}

a.back{
  display:inline-block;
  margin-top:18px;
  color:#ffccff;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,0,255,.35);
  text-shadow:0 0 8px var(--violet), 0 0 15px var(--magenta);
  transition:transform .15s ease, background .2s ease;
}
a.back:hover{ transform:translateY(-2px); background:rgba(255,0,255,.08) }

footer{
  margin:26px 0 18px;
  opacity:.7;
  font-size:.85rem;
}