:root{
  --bg0:#070b14;
  --bg1:#0b1220;
  --text:#e8eef9;
  --muted:#aab6cc;
  --line: rgba(255,255,255,.10);

  --cardBorder: rgba(255,255,255,.12);
  --shadow: 0 18px 70px rgba(0,0,0,.45);

  --accent: rgba(125,211,252,.22);
  --accent2: rgba(167,139,250,.16);

  --radius: 22px;
  --maxW: 1100px;
  --fadeMs: 420ms;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(900px 700px at 20% 10%, rgba(22,38,74,.85) 0%, transparent 55%),
    radial-gradient(700px 650px at 80% 20%, rgba(42,23,81,.75) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.wrap{
  position:relative;
  min-height:100%;
  display:grid;
  place-items:center;
  padding: clamp(12px, 3vw, 40px);
}

.card{
  width:min(100%, var(--maxW));
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border:1px solid var(--cardBorder);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 32px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero{
  display:grid;
  grid-template-columns:auto 1fr;
  gap: clamp(14px, 3vw, 22px);
  align-items:center;
}

.logoWrap{
  display:grid;
  place-items:center;
}

.logo{
  width: clamp(84px, 12vw, 120px);
  height: clamp(84px, 12vw, 120px);
  object-fit: contain;
  border-radius: clamp(16px, 2vw, 22px);
  padding: clamp(10px, 1.8vw, 14px);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
  transition:
    opacity var(--fadeMs) ease,
    transform var(--fadeMs) ease,
    filter var(--fadeMs) ease;
}

.logo.fading{
  opacity:0;
  transform: translateY(4px) scale(.98);
  filter: blur(2px);
}

.heroText{ min-width:0; }

.title{
  margin:0;
  font-size: clamp(28px, 4.6vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.subtitle{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.45;
  transition:
    opacity var(--fadeMs) ease,
    transform var(--fadeMs) ease;
}

.subtitle.fading{
  opacity:0;
  transform: translateY(4px);
}

.divider{
  margin: clamp(16px, 3vw, 24px) 0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.countdownGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
}

.countdownItem{
  --event-bg-top: rgba(125,211,252,.16);
  --event-bg-bottom: rgba(167,139,250,.08);
  --event-accent: rgba(255,255,255,.40);
  --event-accent-soft: rgba(255,255,255,.10);
  --event-tag-bg: rgba(255,255,255,.10);
  --event-tag-border: rgba(255,255,255,.14);

  background: linear-gradient(180deg, var(--event-bg-top), var(--event-bg-bottom));
  border:1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: clamp(14px, 2.2vw, 20px);
  min-width:0;
  position: relative;
  overflow: hidden;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    background 180ms ease,
    opacity 180ms ease;
}

.countdownItem::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--event-accent), var(--event-accent-soft));
  opacity: .75;
}

.countdownItem.state-upcoming{
  filter: saturate(1);
}

.countdownItem.state-live{
  border-color: rgba(255,255,255,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.03);
  filter: saturate(1.08) brightness(1.03);
}

.countdownItem.state-live .stateBadge.live{
  animation: livePulse 2.2s ease-in-out infinite;
}

.countdownItem.state-ending-soon{
  border-color: rgba(255,255,255,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 24px rgba(255,255,255,.05);
  filter: saturate(1.12) brightness(1.05);
}

.countdownItem.state-complete{
  filter: saturate(.72) brightness(.88);
  opacity: .9;
}

@keyframes livePulse{
  0%{
    box-shadow: 0 0 0 0 rgba(74,222,128,.00);
    transform: translateY(0);
  }
  50%{
    box-shadow: 0 0 0 6px rgba(74,222,128,.08);
    transform: translateY(-1px);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(74,222,128,.00);
    transform: translateY(0);
  }
}

.eventTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.eventTag,
.eventTimezone{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.eventTag{
  background: var(--event-tag-bg);
  border:1px solid var(--event-tag-border);
  color: var(--text);
}

.eventTimezone{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color: var(--muted);
}

.eventTitle{
  margin: 0;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.15;
}

.eventMeta{
  margin: 10px 0 4px;
  color: var(--text);
  opacity:.95;
  font-size: 14px;
}

.eventLocation{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}

.eventDuration{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}

.eventLinkRow{
  margin: 0 0 14px;
}

.eventLink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease;
}

.eventLink:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color: rgba(255,255,255,.20);
}

.countdown{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.timeBox{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 8px;
  text-align:center;
  min-width:0;
}

.timeValue{
  display:block;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.timeLabel{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.status{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.countdownItem.is-next-up{
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.nextUpBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

.stateBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
}

.stateBadge.live{
  background: rgba(34,197,94,.16);
  border-color: rgba(74,222,128,.28);
}

.stateBadge.ending{
  background: rgba(245,158,11,.18);
  border-color: rgba(251,191,36,.30);
}

.stateBadge.complete{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}

.stateDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}

.stateBadge.live .stateDot{
  box-shadow: 0 0 10px currentColor;
}

.footer{
  margin-top: clamp(14px, 3vw, 18px);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color: var(--muted);
  font-size: 13px;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight: 750;
}

.dot{ opacity:.6; }
.fineprint{ opacity:.95; }

.bg{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}

.blob{
  position:absolute;
  width: clamp(320px, 52vw, 560px);
  height: clamp(320px, 52vw, 560px);
  border-radius:50%;
  filter: blur(42px);
  opacity:.55;
}

.blobA{
  left:-220px;
  top:-240px;
  background: radial-gradient(circle at 30% 30%, rgba(125,211,252,.95), transparent 60%);
}

.blobB{
  right:-240px;
  bottom:-260px;
  background: radial-gradient(circle at 40% 40%, rgba(167,139,250,.95), transparent 60%);
}

.grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,.85), transparent 65%);
  opacity:.30;
}

@media (max-width: 820px){
  .countdownGrid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px){
  body{
    background:
      radial-gradient(520px 420px at 20% 8%, rgba(22,38,74,.60) 0%, transparent 58%),
      radial-gradient(420px 380px at 82% 18%, rgba(42,23,81,.52) 0%, transparent 58%),
      linear-gradient(180deg, var(--bg0), var(--bg1));
  }

  .wrap{
    padding: 10px;
  }

  .card{
    padding: 14px;
    border-radius: 20px;
  }

  .hero{
    grid-template-columns: 1fr;
    text-align:center;
    justify-items:center;
    gap: 12px;
  }

  .logo{
    width: 88px;
    height: 88px;
    padding: 10px;
  }

  .title{
    font-size: clamp(24px, 7vw, 34px);
  }

  .subtitle{
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.35;
  }

  .divider{
    margin: 14px 0;
  }

  .countdownGrid{
    gap: 12px;
  }

  .countdownItem{
    padding: 14px;
    border-radius: 18px;
  }

  .countdownItem::before{
    left: 14px;
    right: 14px;
  }

  .eventTop{
    display:grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }

  .eventTop .eventTag,
  .eventTop .eventTimezone{
    width: fit-content;
  }

  .eventTimezone{
    justify-self: start;
  }

  .eventTag,
  .eventTimezone,
  .nextUpBadge,
  .stateBadge{
    font-size: 10px;
    padding: 6px 9px;
  }

  .eventTitle{
    font-size: clamp(18px, 5.8vw, 28px);
    line-height: 1.18;
  }

  .eventMeta{
    margin: 8px 0 4px;
    font-size: 13px;
  }

  .eventLocation,
  .eventDuration{
    margin-bottom: 10px;
    font-size: 13px;
  }

  .eventLinkRow{
    margin-bottom: 10px;
  }

  .eventLink{
    font-size: 13px;
    padding: 7px 10px;
  }

  .countdown{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .timeBox{
    border-radius: 14px;
    padding: 14px 8px 12px;
    min-height: 96px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .timeValue{
    font-size: clamp(18px, 8vw, 30px);
  }

  .timeLabel{
    margin-top: 5px;
    font-size: 11px;
    letter-spacing: .05em;
  }

  .status{
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.35;
  }

  .footer{
    margin-top: 14px;
    gap: 8px;
    font-size: 12px;
  }

  .pill{
    font-size: 12px;
    padding: 6px 9px;
  }

  .blob{
    width: 280px;
    height: 280px;
    filter: blur(34px);
    opacity: .32;
  }

  .blobA{
    left: -120px;
    top: -100px;
  }

  .blobB{
    right: -120px;
    bottom: -120px;
  }

  .grid{
    background-size: 36px 36px;
    opacity: .14;
    mask-image: radial-gradient(circle at 50% 28%, rgba(0,0,0,.92), transparent 78%);
  }
}

@media (max-width: 380px){
  .wrap{
    padding: 8px;
  }

  .card{
    padding: 12px;
  }

  .countdownItem{
    padding: 12px;
  }

  .eventTitle{
    font-size: 18px;
  }

  .eventMeta,
  .eventLocation,
  .eventDuration,
  .status{
    font-size: 12px;
  }

  .timeBox{
    min-height: 88px;
    padding: 12px 6px 10px;
  }

  .timeValue{
    font-size: 16px;
  }

  .timeLabel{
    font-size: 10px;
  }

  .blob{
    width: 220px;
    height: 220px;
    filter: blur(28px);
    opacity: .24;
  }

  .grid{
    opacity: .10;
    background-size: 32px 32px;
  }
}

@media (prefers-reduced-motion: reduce){
  .logo,
  .subtitle,
  .eventLink,
  .countdownItem{
    transition: none;
  }

  .countdownItem.state-live .stateBadge.live{
    animation: none;
  }
}