/* VIRUS2027 — vote landing (/v/*). Kept deliberately small: this page is the
   first thing TikTok traffic loads on mobile data.
   Typography is inherited from the landing page — Bebas Neue and Manrope only,
   no third family. The small caps labels are Manrope with wide tracking, the
   same treatment the landing uses for "INCOMING TRANSMISSION" and "DEPTH". */

:root{
  --bg:#0C0C0D; --line:#2C2C33; --line2:#3E3E48;
  --ink:#FFFFFF;          /* headings and body copy */
  --ink2:#FFFFFF;         /* was grey — all light text is white now */
  --muted:#67676F;        /* footer only, colour kept as it was */
  --acc:oklch(0.646 0.222 33); --acc2:oklch(0.705 0.191 39);
  --acc-soft:oklch(0.646 0.222 33 / 0.14); --acc-line:oklch(0.646 0.222 33 / 0.45);
  --risk:#E0574A;
  --head:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body); font-weight:400;
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100svh; display:flex; flex-direction:column; overflow-x:clip;
}

/* Backdrop: the conspiracy board, already darkened in the file itself.
   Three fixed layers — photo, vignette, scanlines — so the type stays legible
   over any part of the image. */
.bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:#0C0C0D url("/v/bg.webp") center 38% / cover no-repeat;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 78% at 50% 0%, oklch(0.646 0.222 33 / .12), transparent 60%),
    radial-gradient(150% 110% at 50% 46%, rgba(0,0,0,.62) 0%, rgba(0,0,0,.88) 62%, rgba(0,0,0,.97) 100%),
    linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.56) 24%, rgba(0,0,0,.70) 72%, rgba(0,0,0,.92) 100%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.4;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.35) 3px,rgba(0,0,0,0) 4px);
}

.shell{position:relative; z-index:1; flex:1; display:flex; flex-direction:column;
  width:100%; max-width:540px; margin:0 auto; padding:22px 20px 30px}

.top{display:flex; align-items:center; gap:12px}
.mark{font-family:var(--head); font-size:24px; letter-spacing:.05em; color:var(--ink)}
.mark i{font-style:normal; color:var(--acc)}
.lbl{font-family:var(--body); font-weight:500; font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink2); margin-left:auto; text-align:right}

.stage{display:flex; flex-direction:column; gap:18px; margin:auto 0; padding:34px 0}

/* Bare type sits straight on the photo, and the crop shifts with the viewport —
   a shadow keeps it legible over whatever ends up behind it. */
h1{font-family:var(--head); font-weight:400; margin:0; font-size:clamp(48px,14.5vw,72px);
  line-height:.88; letter-spacing:.015em; text-shadow:0 4px 26px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.7)}
h1 em{font-style:normal; color:var(--acc)}
.sub{margin:0; color:var(--ink2); font-size:17.5px; line-height:1.5; font-weight:400;
  text-shadow:0 1px 10px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.9)}

/* live vote counter — deliberately loud, it is the social proof */
.eyebrow{font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acc); text-shadow:0 1px 9px rgba(0,0,0,.92)}
.eyebrow .n{font-variant-numeric:tabular-nums}

.mark,.lbl{text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* The question is the one thing that has to be read, so it carries the accent
   outright rather than sitting in another dark panel. */
.q{background:var(--acc); color:#fff; border:0; padding:22px 20px;
  font-size:22px; line-height:1.28; font-weight:700;
  box-shadow:0 0 54px oklch(0.646 0.222 33 / .34)}

/* what happens after the voucher — shown under the claim button */
.steps{list-style:none; margin:0; padding:0; border:1px solid var(--line);
  background:rgba(14,14,16,.84); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  animation:rise .5s ease both}
.steps li{display:grid; grid-template-columns:26px minmax(0,1fr); gap:13px; align-items:baseline;
  padding:14px 17px; border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.steps .i{font-family:var(--head); font-size:22px; line-height:1; color:var(--acc); letter-spacing:.02em}
.steps li > span:last-child{font-size:16px; line-height:1.45; color:var(--ink2)}
@keyframes rise{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}

.opts{display:grid; grid-template-columns:1fr 1fr; gap:12px}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit;
  -webkit-tap-highlight-color:transparent}
.opt{border:1px solid var(--line2); background:rgba(18,18,21,.78);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); color:var(--ink);
  font-family:var(--head); font-size:31px; letter-spacing:.07em; padding:19px 8px;
  transition:border-color .15s, background .15s, color .15s}
.opt:hover,.opt:focus-visible{border-color:var(--acc); background:var(--acc-soft)}
.opt.picked{border-color:var(--acc); background:var(--acc-soft); color:var(--acc)}

.bars{display:grid; gap:11px}
.bar{height:52px; background:rgba(14,14,16,.82); -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px); border:1px solid var(--line); position:relative; overflow:hidden}
.bar i{position:absolute; inset:0 auto 0 0; width:0; background:var(--acc-soft);
  border-right:2px solid var(--acc); transition:width 1s cubic-bezier(.22,.7,.3,1)}
/* direct child only — nested spans must not inherit the absolute fill */
.bar > span{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; font-weight:600; font-size:15.5px; letter-spacing:.09em; text-transform:uppercase;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.bar.mine{border-color:var(--acc-line)}
.bar.mine .tag{color:var(--acc)}
.bar .tag{color:var(--ink2)}

.vch{border:1px dashed var(--acc-line); background:rgba(26,12,9,.80);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:28px 18px; text-align:center}
.vch .amt{font-family:var(--head); font-size:72px; line-height:.88; color:var(--acc); letter-spacing:.01em}
.vch .tok{font-size:14.5px; color:var(--ink2); margin-top:11px; line-height:1.4}
.clock{font-weight:600; font-size:16px; letter-spacing:.1em; text-transform:uppercase; margin-top:16px;
  color:var(--ink2); font-variant-numeric:tabular-nums}

/* Result and voucher share one screen since the two were merged, so both halves
   give up height. The voucher turns from a centred card into a strip: amount,
   what it is, and the countdown on one line, directly above the claim button. */
.stage.packed{gap:14px; padding:24px 0}
h1.tight{font-size:clamp(34px,9.5vw,52px)}
.sub.sm{font-size:15.5px; line-height:1.45}

.vch.row{display:flex; flex-wrap:wrap; align-items:center; gap:5px 16px;
  padding:15px 18px; text-align:left}
.vch.row .amt{font-size:46px}
.vch.row .tok{flex:1 1 130px; margin-top:0; font-size:13.5px; line-height:1.35}
.vch.row .clock{margin-top:0; font-size:14px; letter-spacing:.08em; white-space:nowrap}

/* Below roughly an iPhone SE the three parts stop fitting on one line — the
   countdown drops to its own row rather than squeezing the amount. */
@media (max-width:400px){
  .vch.row{gap:4px 12px; padding:14px 15px}
  .vch.row .amt{font-size:40px}
  .vch.row .clock{flex:1 1 100%}
}
.clock b{color:var(--acc); font-weight:600}
.clock.hot b{color:var(--risk)}

.acts{display:grid; gap:12px; margin-top:4px}
.btn{display:block; width:100%; text-align:center; padding:20px 14px; font-weight:700; font-size:17.5px;
  border:1px solid transparent; text-decoration:none;
  transition:transform .12s, filter .15s, border-color .15s}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--acc); color:#fff; box-shadow:0 0 50px oklch(0.646 0.222 33 / .36)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.sec{border-color:var(--line2); color:var(--ink2); font-weight:600;
  background:rgba(14,14,16,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.btn.sec:hover{border-color:var(--ink2)}

.dead{text-align:center; display:grid; gap:16px; justify-items:center; padding:40px 0}
.dead .z{font-family:var(--head); font-size:78px; line-height:1; color:var(--line2)}

@media (min-width:560px){ .shell{padding:30px 24px 38px} }
:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}