/* Senator Yea — $YEA
   Palet dikunci ke ../STYLE_GUIDE.md §4. Jangan tambah warna di luar daftar itu. */

:root{
  --navy:#1B2A4A;
  --red:#C8102E;
  --green:#22C55E;
  --fog:#8A9BB0;
  --walls:#D9D4C8;
  --clean:#F7F3E8;
  --ink:#141414;

  --bg:#0E1420;
  --bg-2:#141D30;
  --text:#E8EAEF;
  --muted:#93A0B5;
  --seat-off:#2A3550;

  --fog-opacity:1;      /* di-set JS: 1 - (yea / 60) */
  --glow:0;             /* 0..1, naik saat mendekati 60 */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:0 0 9rem;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--bg-2) 0%, var(--bg) 60%);
  color:var(--text);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  transition:background 1.2s ease,color 1.2s ease;
}

/* ---------- Kabut ---------- */
/* Mekanik inti: halaman jadi jernih seiring hitungan mendekati 60. */
/* Batas atas kabut sengaja 0.55, bukan 1. Di opasitas penuh halaman jadi tidak
   terbaca — dan situs ini harus mengkonversi pengunjung DexScreener dalam 10
   detik (BRAND.md §6). Perubahan berkabut -> jernih tetap terbaca jelas di 0.55. */
.fog{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:calc(var(--fog-opacity) * .55);
  transition:opacity 1.6s cubic-bezier(.4,0,.2,1);
  background:
    radial-gradient(60% 40% at 20% 15%, rgba(138,155,176,.55), transparent 70%),
    radial-gradient(55% 45% at 80% 30%, rgba(138,155,176,.50), transparent 70%),
    radial-gradient(70% 50% at 45% 75%, rgba(138,155,176,.45), transparent 70%),
    linear-gradient(180deg, rgba(138,155,176,.42), rgba(138,155,176,.30));
  backdrop-filter:blur(calc(var(--fog-opacity) * 2px));
  -webkit-backdrop-filter:blur(calc(var(--fog-opacity) * 2px));
}

main{max-width:1000px;margin:0 auto;padding:1.75rem 1.25rem 0;position:relative;z-index:10}

/* ---------- Mark ---------- */
.mark{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:0 0 2.75rem;
}
.mark img{width:40px;height:40px;display:block}
.mark span{font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:.01em}
.mark b{color:var(--green);font-weight:800}
.mark-link{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:inherit;
}
.mark-link:hover span{color:var(--text)}

/* ---------- Hero ---------- */
.hero{text-align:center}

.eyebrow{
  margin:0 0 1.25rem;
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}

.counter{
  display:flex; align-items:baseline; justify-content:center; gap:.5rem;
  font-variant-numeric:tabular-nums;
}
.count{
  font-size:clamp(4rem,16vw,8.5rem); font-weight:800; line-height:.9;
  letter-spacing:-.04em;
  color:var(--green);
  text-shadow:0 0 calc(var(--glow) * 60px) rgba(34,197,94,calc(var(--glow) * .55));
  transition:color .6s ease,text-shadow .6s ease;
}
/* Belum dilaporkan: jangan pernah tampilkan sebagai angka. Tapi juga jangan
   dirender sebesar angka — em-dash di 8.5rem terbaca sebagai balok, bukan "kosong". */
.count.unreported{
  font-size:clamp(1.5rem,5vw,2.75rem);
  color:var(--muted);
  text-shadow:none;
  letter-spacing:.1em;
  align-self:center;
}
.of{font-size:clamp(1.25rem,4vw,2rem);font-weight:700;color:var(--muted)}
.yea-label{
  font-size:.7rem; letter-spacing:.3em; color:var(--muted);
  align-self:center; padding-left:.35rem;
}

.headline{
  margin:.75rem 0 0;
  font-size:clamp(1.75rem,6vw,3.25rem); font-weight:800; letter-spacing:-.02em;
  text-transform:uppercase;
}
.headline sup{font-size:.45em;vertical-align:super}

.character{margin:1.25rem auto 0;max-width:440px}
.character img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
  transition:opacity .45s ease,transform .45s ease;
}
.character img.swapping{opacity:0;transform:translateY(10px)}

.status{margin:.25rem 0 0;color:var(--muted);font-size:.95rem}

/* ---------- Papan 100 kursi ---------- */
.board-wrap{margin:2.5rem auto 0;text-align:center}
.board{width:100%;height:auto;display:block;overflow:visible}

.seat{fill:var(--seat-off);transition:fill .5s ease,opacity .5s ease}
.seat.yea{fill:var(--green)}
.seat.nay{fill:var(--red)}
.seat.pivot{
  fill:none; stroke:var(--clean); stroke-width:3;
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

.board-note{margin:1.25rem 0 0;color:var(--muted);font-size:.9rem;font-style:italic}

/* ---------- Tiga panel lore ---------- */
/* Sembilan tahun dalam tiga gambar, kiri ke kanan: menunggu -> 59 -> 60. */
.scenes{
  margin:4.5rem auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.scenes figure{margin:0}
.scenes img{
  display:block; width:100%; height:auto; border-radius:10px;
  border:1px solid rgba(232,234,239,.10);
}
.scenes figcaption{
  margin-top:.85rem; color:var(--muted); font-size:.88rem; line-height:1.45;
}
.scenes figcaption b{
  display:block; color:var(--text);
  font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:.3rem;
}

/* Panel ketiga adalah panel yang sedang terjadi. Sorot hanya saat lolos. */
body[data-state="passed"] .scenes figure:last-child img{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.22);
}

/* ---------- Lore ---------- */
.lore{
  max-width:44ch; margin:4rem auto 0; text-align:center;
  color:var(--muted); font-size:1.05rem;
}
.lore strong{color:var(--text)}

/* Paragraf lore ditutup dengan "raise the thumb." — ini gambarnya melakukan itu.
   Satu-satunya tempat pose signature (jempol tunggal + glow) muncul di situs. */
.closer{margin:1.5rem auto 0;max-width:300px}
.closer img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.4));
}

/* ---------- Contract bar ---------- */
/* z-index 60 > kabut 40. Selalu tajam: ini yang mengkonversi klik dari DexScreener. */
.ca-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(14,20,32,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(232,234,239,.12);
  padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
  text-align:center;
}
.ca-row{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  flex-wrap:wrap;
}
.ca-label{
  font-size:.65rem; letter-spacing:.2em; color:var(--muted);
  border:1px solid rgba(232,234,239,.2); border-radius:4px; padding:.15rem .4rem;
}
#ca{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88rem;
  color:var(--text); word-break:break-all; max-width:min(70vw,34rem);
}
button[data-copy]{
  font:inherit; font-size:.8rem; font-weight:700;
  background:var(--green); color:#06210F; border:0; border-radius:6px;
  padding:.38rem .8rem; cursor:pointer;
}
button[data-copy]:hover{filter:brightness(1.08)}
button[data-copy]:disabled{background:var(--seat-off);color:var(--muted);cursor:default}

.ca-links{margin-top:.5rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.ca-links a{color:var(--green);text-decoration:none;font-size:.85rem;font-weight:600}
.ca-links a:hover{text-decoration:underline}
.ca-proof{margin-top:.35rem;color:var(--muted);font-size:.72rem}
.ca-proof a{color:var(--muted)}

footer{
  position:relative; z-index:10;
  max-width:52ch; margin:5rem auto 0; padding:0 1.25rem;
  color:var(--muted); font-size:.75rem; line-height:1.55; text-align:center;
}
footer strong{color:var(--text)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- State: LOLOS ---------- */
/* Kabut hilang, halaman jadi terang. Ini satu-satunya state bercahaya. */
body[data-state="passed"]{
  background:radial-gradient(120% 90% at 50% 0%, #FFFDF6 0%, var(--clean) 60%);
  color:var(--ink);
  --muted:#6B7385;
  --seat-off:#C9CFC2;
  --text:#141414;
}
body[data-state="passed"] .headline{color:var(--green)}
body[data-state="passed"] .ca-bar{
  background:rgba(247,243,232,.94);
  border-top-color:rgba(20,20,20,.14);
}
body[data-state="passed"] .scenes img{border-color:rgba(20,20,20,.14)}
body[data-state="passed"] button[data-copy]{color:#06210F}

/* ---------- State: GAGAL ---------- */
/* Kabut TETAP ADA. Papan berhenti di bawah 60. Bukan halaman rusak — bab berikutnya. */
body[data-state="failed"] .count{color:var(--fog);text-shadow:none}
body[data-state="failed"] .headline{color:var(--fog)}

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

@media (max-width:760px){
  .scenes{grid-template-columns:1fr;gap:2rem;max-width:420px}
}

@media (max-width:640px){
  main{padding-top:1.25rem}
  .mark{margin-bottom:1.75rem}
  .character{max-width:300px}
  .lore{font-size:.98rem}
}