/* Eventos Programados — tema celestial (estrela & lua) do canal hoshietsuki.
   Tudo original (CSS/SVG). Nenhuma arte com direitos autorais do jogo. */
:root {
  --bg0: #070a1a;
  --bg1: #0b1026;
  --bg2: #141a3a;
  --ink: #eef1ff;
  --muted: #a9b1d6;
  --star: #cdd6ff;
  --accent: #8fb4ff;
  --accent2: #c9a7ff;
  --card: rgba(255, 255, 255, 0.055);
  --stroke: rgba(255, 255, 255, 0.12);
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 800px at 75% -10%, #1b2250 0%, var(--bg1) 45%, var(--bg0) 100%);
  min-height: 100dvh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- Céu de fundo ---- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
/* Starfield em canvas (progressive enhancement). Com JS, esconde as estrelas-CSS de fallback abaixo. */
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.has-canvas .stars, .has-canvas .stars--slow { display: none; }
.stars, .stars--slow {
  position: absolute; inset: -50%;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, var(--star) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 70% 20%, var(--star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 40% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 85% 60%, var(--star) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 55% 45%, var(--star) 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 35%, var(--star) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 420px 420px;
  animation: twinkle 6s ease-in-out infinite alternate;
  opacity: .9;
}
.stars--slow { background-size: 680px 680px; animation-duration: 10s; opacity: .5; }
@keyframes twinkle { from { opacity: .35; } to { opacity: .95; } }

/* ---- Layout ---- */
.wrap { max-width: 760px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) 20px 48px; }

.hero { text-align: center; }
.eyebrow { color: var(--muted); letter-spacing: .04em; font-size: .95rem; margin: 0 0 14px; }
.eyebrow strong { color: var(--accent); }
h1 {
  font-size: clamp(1.9rem, 6vw, 3.1rem); line-height: 1.08; margin: 0 0 14px;
  letter-spacing: -.02em; font-weight: 800;
}
.grad {
  background: linear-gradient(100deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { color: var(--muted); font-size: clamp(1rem, 2.6vw, 1.18rem); max-width: 56ch; margin: 0 auto; }
.lede code { color: var(--ink); background: rgba(255,255,255,.08); padding: .05em .4em; border-radius: 6px; }

.cta { margin: 30px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cta-note { color: var(--muted); font-size: .9rem; margin: 2px 0 0; }

/* ---- Eventos ---- */
.events { margin-top: 44px; }
.events h2 { font-size: 1.05rem; color: var(--muted); font-weight: 600; text-align: center; margin: 0 0 18px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card {
  display: flex; gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius);
  padding: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* card com capa oficial do jogo ao fundo: texto legível à esquerda, arte revelada ao centro-direita e
   re-escurecida na borda direita p/ a imagem NÃO cortar seca — parece uma janelinha de arte, não um crop */
.card { overflow: hidden; }
.card--cover {
  background-image:
    linear-gradient(90deg, rgba(11,16,38,.97) 0%, rgba(11,16,38,.90) 38%, rgba(11,16,38,.58) 70%, rgba(11,16,38,.86) 100%),
    var(--cover);
  background-size: cover; background-position: center;
}
/* mantém o chip de data "preenchido" (gradiente da marca sobre base escura) p/ não parecer vazio/cortado */
.card--cover .when {
  background: linear-gradient(160deg, rgba(143,180,255,.30), rgba(201,167,255,.24)), rgba(8,11,28,.80);
  border-color: rgba(255,255,255,.18);
}

/* banner da capa na página do jogo — vinheta radial funde TODAS as bordas no fundo (a arte fica
   "embutida", sem corte seco nas laterais/baixo) */
.cover-banner {
  position: relative; z-index: 1; /* acima da lua do .sky (fixed, z-index:-1) p/ não vazar no canto */
  height: clamp(130px, 27vw, 230px); margin: 0 0 clamp(14px, 3vw, 24px); border-radius: var(--radius);
  background-color: var(--bg1); /* base opaca: cantos da vinheta não deixam o fundo aparecer */
  background-image:
    radial-gradient(135% 105% at 50% 42%, rgba(7,10,26,0) 50%, rgba(7,10,26,.45) 78%, var(--bg1) 100%),
    var(--cover);
  background-size: cover; background-position: center 42%; border: 1px solid var(--stroke);
}

.credit { opacity: .6; font-size: .72rem; margin-top: 10px; }

.when {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 14px;
  display: grid; place-content: center; text-align: center; line-height: 1;
  background: linear-gradient(160deg, rgba(143,180,255,.22), rgba(201,167,255,.18));
  border: 1px solid var(--stroke);
}
.when .d { display: block; font-size: 1.6rem; font-weight: 800; }
.when .m { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.when .y { display: block; font-size: .62rem; color: var(--accent); margin-top: 2px; letter-spacing: .06em; }
.count { color: var(--muted); font-weight: 400; }
.loading { color: var(--muted); text-align: center; list-style: none; padding: 18px; }
.info { min-width: 0; }
.info h3 { margin: 0 0 4px; font-size: 1.12rem; }
.info p { margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
/* countdown ao vivo (events.js) */
.countdown {
  display: inline-block; margin: 2px 0 10px; font-size: .82rem; font-weight: 700;
  color: var(--accent); background: rgba(143, 180, 255, .12);
  border: 1px solid var(--stroke); border-radius: 999px; padding: 3px 11px; letter-spacing: .01em;
}
/* é HOJE: pill dourada que pulsa + faísca SVG girando/piscando */
.countdown--today {
  color: #ffd98a;
  background: linear-gradient(160deg, rgba(255, 200, 120, .22), rgba(201, 167, 255, .16)), rgba(8, 11, 28, .5);
  border-color: rgba(255, 210, 140, .5);
  animation: todayGlow 1.8s ease-in-out infinite;
}
.countdown--today .spark {
  display: inline-block; vertical-align: -2px; margin-right: 4px;
  transform-origin: center; animation: twinkle 1.7s ease-in-out infinite;
}
@keyframes todayGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 200, 120, 0); }
  50% { box-shadow: 0 0 13px rgba(255, 200, 120, .5); }
}
@keyframes twinkle { /* estrela piscando: cresce/encolhe + gira de leve + varia opacidade */
  0%, 100% { transform: scale(.78) rotate(-10deg); opacity: .6; }
  50% { transform: scale(1.12) rotate(10deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .countdown--today, .countdown--today .spark { animation: none; }
}

/* ---- Rodapé ---- */
.foot { margin-top: 40px; text-align: center; color: var(--muted); font-size: .82rem; }
.foot p { margin: 8px 0; }
.foot strong { color: var(--ink); }
.foot .src { opacity: .75; }

@media (max-width: 520px) {
  .card { flex-direction: row; }
  .when { width: 56px; height: 56px; }
}

/* QR — só no desktop (quem está no PC escaneia com o celular) */
.qr { display: none; flex-direction: column; align-items: center; gap: 10px; margin: 22px auto 0; }
.qr-img { background: #fff; padding: 10px; border-radius: 14px; line-height: 0; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.qr-img svg { width: 148px; height: 148px; display: block; }
.qr-cap { color: var(--muted); font-size: .85rem; margin: 0; max-width: 34ch; text-align: center; }
@media (min-width: 721px) { .qr { display: flex; } }

/* links */
.back { color: inherit; text-decoration: none; }
.back:hover { color: var(--accent); }
.gamelink { color: var(--ink); text-decoration: none; }
.gamelink:hover { color: var(--accent); text-decoration: underline; }
.foot a { color: var(--accent); }