/* ═══════════════════════════════════════════════════════
   PAHLAWAN ROLEPLAY — PREMIUM COUNTDOWN
   AAA-quality: Rockstar × Cyberpunk × Luxury Automotive
   ═══════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}

:root{
  --bg:#060810;
  --bg-2:#0b0e1a;
  --surface:rgba(14,18,30,.55);
  --surface-2:rgba(18,24,40,.7);
  --border:rgba(255,255,255,.05);
  --border-hi:rgba(255,255,255,.1);
  --border-glow:rgba(240,123,45,.15);
  --text:#f0f2f6;
  --text-dim:#8891a3;
  --text-mute:#4e566b;
  --amber:#f5b942;
  --orange:#f07b2d;
  --coral:#e2583e;
  --gold:#ffd166;
  --grad-accent:linear-gradient(135deg,#f5b942 0%,#f07b2d 50%,#e2583e 100%);
  --grad-glass:linear-gradient(145deg,rgba(20,26,42,.6),rgba(8,11,19,.35));
  --font-display:'Barlow Condensed',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

body.cs{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-color:var(--bg);
}

/* ── Stage ── */
.cs-stage{
  position:relative;
  min-height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ── Backdrop ── */
.cs-bg{
  position:absolute;inset:0;z-index:0;
  background:url('/static/hero-bg-desktop.webp?v=hd') center/cover no-repeat fixed;
}
@media(max-width:800px){
  .cs-bg{background:url('/static/hero-mobile.webp?v=hd') center/cover no-repeat scroll}
}
.cs-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(6,8,16,.88) 0%,
    rgba(6,8,16,.6) 30%,
    rgba(6,8,16,.55) 55%,
    rgba(6,8,16,.75) 80%,
    rgba(6,8,16,.95) 100%);
}
.cs-vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(6,8,16,.65) 100%);
}
.cs-fog{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.35;
  background:
    radial-gradient(ellipse 60% 40% at 20% 80%,rgba(240,123,45,.04),transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 70%,rgba(224,88,62,.03),transparent 60%);
  animation:fog-drift 20s ease-in-out infinite alternate;
}
@keyframes fog-drift{
  0%{transform:translateX(-10px) translateY(-5px);opacity:.25}
  100%{transform:translateX(10px) translateY(5px);opacity:.4}
}
.cs-ambient{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%,rgba(240,123,45,.06),transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 20%,rgba(245,185,66,.03),transparent 60%);
}

/* ── Header — UCP v2 glass treatment ── */
.cs-top{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:flex-start;
  min-height:64px;
  padding:10px 28px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(6,8,16,.72),rgba(6,8,16,.28));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 -1px 0 rgba(240,123,45,.035);
}
.cs-top::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;width:auto;height:1px;
  background:linear-gradient(90deg,rgba(240,123,45,.22),rgba(240,123,45,.06) 42%,transparent 78%);
  opacity:.7;box-shadow:none;
}
.cs-brand{
  position:relative;display:flex;align-items:center;
  text-decoration:none;
  transition:opacity .2s var(--ease);
}
.cs-brand:hover{opacity:.9}
.cs-brand-glow{
  position:absolute;inset:-12px -20px;
  background:radial-gradient(ellipse at center,rgba(240,123,45,.12),transparent 70%);
  border-radius:50%;
  filter:blur(12px);
  pointer-events:none;
  opacity:.6;
  animation:brand-pulse 4s ease-in-out infinite;
}
@keyframes brand-pulse{
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:.7;transform:scale(1.05)}
}
.cs-brand img{
  height:44px;width:auto;position:relative;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.4));
}
.cs-top-status{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(14,18,30,.52);
  color:#aeb7c8;
  font-family:var(--font-display);
  font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;
}
.cs-top-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 10px rgba(245,185,66,.7);
  animation:status-pulse 2.2s ease-in-out infinite;
}
@keyframes status-pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}

/* ── Hero ── */
.cs-hero{
  position:relative;z-index:10;
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;
  padding:20px 24px 40px;
  text-align:center;
}

/* ── Eyebrow ── */
.cs-eyebrow{
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-display);
  font-size:12px;font-weight:600;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--amber);
  text-shadow:0 0 20px rgba(245,185,66,.3);
}
.cs-eyebrow-line{
  display:block;width:36px;height:1px;
  background:linear-gradient(90deg,transparent,var(--amber));
}
.cs-eyebrow-line:last-child{
  background:linear-gradient(90deg,var(--amber),transparent);
}

/* ── Title ── */
.cs-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3.2rem,11vw,6.8rem);
  line-height:.88;
  letter-spacing:-.015em;
  text-transform:uppercase;
  color:#f5f6fa;
  text-shadow:0 4px 30px rgba(0,0,0,.5),0 1px 0 rgba(0,0,0,.2);
}
.cs-title-line{display:block}
.cs-title-accent{
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:none;
}

/* ── Launch date ── */
.cs-launch-date{
  font-family:var(--font-display);
  font-size:clamp(.85rem,2.4vw,1.05rem);
  font-weight:700;
  letter-spacing:.22em;
  color:var(--gold);
  text-shadow:0 2px 16px rgba(0,0,0,.6),0 0 30px rgba(245,185,66,.15);
}
.cs-launch-date span{color:var(--coral);padding:0 .4em}

/* ── Countdown frame: integrated dashboard ── */
.cs-countdown-frame{
  position:relative;
  padding:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(18,24,40,.45),rgba(6,8,16,.25));
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 60px rgba(240,123,45,.04);
  overflow:hidden;
}
.cs-countdown-frame::before{
  content:"LAUNCH SEQUENCE";
  display:block;
  padding:12px 0 10px;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:transparent;
  color:rgba(240,123,45,.45);
  font-family:var(--font-display);
  font-size:9px;font-weight:700;letter-spacing:.36em;
  text-transform:uppercase;
  text-align:center;
}

/* ── Countdown ── */
.cs-countdown{
  display:flex;align-items:flex-start;justify-content:center;
  gap:4px;
  padding:18px 24px 20px;
}
.cs-cell{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;
  min-width:clamp(58px,16vw,92px);
}
.cs-num{
  font-family:var(--font-display);
  font-size:clamp(2.8rem,8.5vw,5rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  color:var(--text);
  background:linear-gradient(160deg,rgba(22,28,44,.5),rgba(6,8,16,.25),rgba(14,18,30,.45));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px 20px;
  min-width:clamp(60px,15vw,100px);
  text-align:center;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    0 12px 32px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.2);
  text-shadow:0 2px 10px rgba(0,0,0,.4);
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out);
}
.cs-num--tick{
  color:var(--amber);
  border-color:rgba(240,123,45,.18);
  background:linear-gradient(160deg,rgba(28,20,10,.45),rgba(6,8,16,.2),rgba(18,12,6,.35));
  box-shadow:
    0 12px 36px rgba(240,123,45,.08),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 30px rgba(240,123,45,.05);
  text-shadow:0 0 20px rgba(245,185,66,.15);
}
.cs-num.flip{
  animation:num-flip .3s var(--ease-out);
}
@keyframes num-flip{
  0%{transform:scaleY(1);opacity:1}
  50%{transform:scaleY(.85);opacity:.6}
  100%{transform:scaleY(1);opacity:1}
}
.cs-label{
  font-family:var(--font-display);
  font-size:clamp(.58rem,1.6vw,.72rem);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(164,174,192,.78);
  margin-top:2px;
}
.cs-sep{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,6vw,3rem);
  font-weight:800;
  color:rgba(240,123,45,.3);
  line-height:1;
  padding:14px 3px 0;
  opacity:.5;
  text-shadow:0 0 8px rgba(240,123,45,.12);
}

/* ── Footer — UCP v2 community HUD ── */
.cs-foot{
  position:relative;z-index:20;
  display:flex;flex-direction:column;align-items:center;
  gap:17px;
  padding:28px 24px 22px;
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(0deg,rgba(6,8,16,.82),rgba(10,14,24,.38));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 -16px 40px rgba(0,0,0,.2),inset 0 1px 0 rgba(240,123,45,.03);
}
.cs-foot-divider{
  position:relative;width:88px;height:1px;
  background:linear-gradient(90deg,transparent,var(--orange),var(--amber),transparent);
  opacity:.75;box-shadow:0 0 16px rgba(240,123,45,.24);
}
.cs-foot-divider::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--amber);box-shadow:0 0 10px rgba(245,185,66,.5);
}
.cs-foot-kicker{
  font-family:var(--font-display);
  font-size:9px;font-weight:600;letter-spacing:.24em;
  color:#6d778a;text-transform:uppercase;
}
.cs-foot-kicker span{color:var(--orange);margin:0 .45em}
.cs-foot-social{
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.cs-foot-label{
  font-family:var(--font-display);
  font-size:10px;font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--amber);
  text-shadow:0 0 18px rgba(245,185,66,.16);
}
.cs-foot-links{
  display:flex;align-items:center;gap:14px;
  padding:9px 18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:rgba(14,18,30,.44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.cs-foot-links a{
  font-family:var(--font-display);
  font-size:15px;font-weight:700;
  letter-spacing:.16em;
  color:var(--text-dim);
  text-decoration:none;
  transition:color .2s var(--ease),text-shadow .2s var(--ease),transform .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.cs-foot-links a:hover{color:var(--amber);text-shadow:0 0 20px rgba(245,185,66,.3);transform:translateY(-1px)}
.cs-foot-dot{color:var(--orange);font-size:11px;text-shadow:0 0 10px rgba(240,123,45,.35)}
.cs-foot-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:center;
  font-family:var(--font-display);
  font-size:12px;letter-spacing:.08em;
  color:var(--text-mute);
}
.cs-foot-sep{color:var(--orange);opacity:.65}
.cs-foot-dev{color:var(--text-dim)}
.cs-foot-dev a{color:var(--amber);text-decoration:none;font-weight:700;transition:color .2s var(--ease),text-shadow .2s var(--ease)}
.cs-foot-dev a:hover{color:var(--gold);text-shadow:0 0 14px rgba(245,185,66,.3)}
.cs-brand:focus-visible,.cs-foot-links a:focus-visible,.cs-foot-dev a:focus-visible{
  outline:2px solid var(--amber);outline-offset:4px;border-radius:4px;
}
@media(max-width:480px){
  .cs-top-status{padding:6px 9px;font-size:8px;letter-spacing:.16em;gap:6px}
  .cs-top-status-dot{width:5px;height:5px}
  .cs-foot-kicker{font-size:8px;letter-spacing:.18em}
}
@media(max-height:700px) and (max-width:600px){
  .cs-hero{gap:14px;padding-top:10px;padding-bottom:20px}
  .cs-top{min-height:56px}
  .cs-foot{padding-top:16px;padding-bottom:13px;gap:10px}
  .cs-foot-kicker{display:none}
}

/* ── Editorial cleanup: fewer ornaments, stronger hierarchy ── */
.cs-hero{gap:20px}
.cs-countdown-frame{background:rgba(6,8,16,.84);border-color:rgba(255,255,255,.10);box-shadow:0 24px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)}
.cs-countdown-frame::before{color:rgba(245,185,66,.62);letter-spacing:.28em}
.cs-countdown{padding:14px 20px 16px;gap:3px}
.cs-num{background:rgba(18,24,40,.52);border-color:rgba(255,255,255,.08);border-radius:10px;padding:13px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.22)}
.cs-num--tick{background:rgba(36,25,12,.66);border-color:rgba(240,123,45,.28)}
.cs-foot{gap:13px;padding:22px 24px 18px}
.cs-foot-divider{display:none}
.cs-foot-kicker{font-size:8px;color:#768196;letter-spacing:.2em}
.cs-foot-links{border-color:rgba(255,255,255,.08);background:rgba(14,18,30,.42);box-shadow:none}
@media(max-width:480px){
  .cs-top{min-height:58px;padding:8px 14px}
  .cs-top::after{left:0;right:0}
  .cs-brand img{height:30px}
  .cs-top-status{padding:5px 8px;font-size:8px}
  .cs-hero{gap:16px;padding-top:10px;padding-bottom:24px}
  .cs-countdown-frame::before{padding:9px 0 7px}
  .cs-countdown{padding:12px 8px 13px}
  .cs-num{padding:9px 3px;border-radius:8px}
  .cs-foot{padding:18px 14px 15px;gap:11px}
}

/* ── Launched (end state) ── */
.cs-launched{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;
  background:radial-gradient(ellipse at center,rgba(6,8,16,.92),rgba(6,8,16,.98));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-align:center;padding:40px 24px;
}
.cs-launched[hidden]{display:none!important}
.cs-launched-eyebrow{
  font-family:var(--font-display);
  font-size:14px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
  color:#3dd68c;
}
.cs-launched-title{
  font-family:var(--font-display);
  font-size:clamp(3rem,10vw,6rem);
  font-weight:900;line-height:.9;
  text-transform:uppercase;
  color:var(--text);
}
.cs-launched-title span{
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cs-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;
  font-family:var(--font-body);
  font-size:14px;font-weight:700;letter-spacing:.04em;
  border-radius:100px;border:none;cursor:pointer;
  text-decoration:none;
  transition:transform .15s var(--ease),box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.cs-btn:active{transform:scale(.97)}
.cs-btn--primary{
  background:var(--grad-accent);color:#1a0e08;
  box-shadow:0 4px 20px rgba(240,123,45,.3);
}
.cs-btn--primary:hover{box-shadow:0 6px 28px rgba(240,123,45,.45);transform:translateY(-1px)}
.cs-btn--big{padding:18px 40px;font-size:16px}

/* ── Toast ── */
.cs-toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(20px);
  z-index:200;
  padding:12px 24px;
  background:var(--surface-2);
  border:1px solid var(--border-hi);
  border-radius:100px;
  font-size:13px;font-weight:600;
  color:var(--text);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.cs-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Responsive: Mobile (≤480px) ── */
@media(max-width:480px){
  .cs-top{min-height:62px;padding:10px 16px}
  .cs-top::after{left:16px;width:42px}
  .cs-brand img{height:32px}
  .cs-hero{gap:20px;padding:14px 14px 32px}
  .cs-eyebrow{font-size:10px;letter-spacing:.3em;gap:12px}
  .cs-eyebrow-line{width:24px}
  .cs-title{font-size:clamp(2.8rem,12vw,4.2rem)}
  .cs-launch-date{font-size:.78rem;letter-spacing:.18em}
  .cs-countdown-frame{padding:0;border-radius:16px}
  .cs-countdown-frame::before{padding:10px 0 8px;font-size:8px;letter-spacing:.28em}
  .cs-countdown{padding:14px 12px 14px;gap:2px}
  .cs-cell{min-width:0;flex:1 1 0;gap:4px}
  .cs-num{width:100%;padding:10px 4px;min-width:0;font-size:clamp(1.5rem,7.5vw,2.4rem);border-radius:10px}
  .cs-label{font-size:.5rem;letter-spacing:.12em;margin-top:1px}
  .cs-sep{font-size:1.1rem;padding:10px 0 0;opacity:.4}
  .cs-foot{padding:22px 16px 18px;gap:14px}
  .cs-foot-divider{width:68px}
  .cs-foot-label{font-size:8px;letter-spacing:.28em}
  .cs-foot-links{gap:12px;padding:8px 15px}
  .cs-foot-links a{font-size:13px}
  .cs-foot-meta{font-size:11px;flex-direction:column;gap:3px}
  .cs-foot-sep{display:none}
}

/* ── Responsive: Tablet (481–1024px) ── */
@media(min-width:481px) and (max-width:1024px){
  .cs-hero{gap:24px}
  .cs-countdown{padding:16px 20px 18px}
  .cs-num{padding:14px 16px}
}

/* ── Final editorial correction ── */
.cs-top-status{
  padding:6px 10px;
  border-color:rgba(255,255,255,.06);
  background:rgba(8,11,19,.38);
  color:#a7b0c0;
  font-size:9px;
  letter-spacing:.14em;
}
.cs-countdown-frame{
  border-radius:10px;
  background:rgba(6,8,16,.72);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04);
}
.cs-countdown-frame::before{
  padding:9px 0 8px;
  color:rgba(245,185,66,.58);
  font-size:8px;
  letter-spacing:.24em;
}
.cs-countdown{padding:13px 18px 15px;gap:2px}
.cs-num{
  background:transparent;
  border:0;
  border-radius:0;
  padding:10px 13px 7px;
  box-shadow:none;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.cs-num--tick{
  background:transparent;
  border:0;
  box-shadow:none;
  color:#f1c45b;
  text-shadow:0 0 14px rgba(245,185,66,.18);
}
.cs-label{font-size:.58rem;letter-spacing:.12em;color:rgba(174,184,201,.78)}
.cs-sep{color:rgba(240,123,45,.42);opacity:.7}
.cs-foot{padding:18px 24px 16px;gap:10px}
.cs-foot-kicker{font-size:8px;color:#738096}
.cs-foot-social{gap:7px}
.cs-foot-label{font-size:9px;letter-spacing:.24em}
.cs-foot-links{padding:7px 14px;gap:11px}
.cs-foot-links a{font-size:13px;letter-spacing:.12em}
.cs-foot-meta{font-size:11px;letter-spacing:.04em}

@media(max-width:480px){
  .cs-top{min-height:58px;padding:8px 14px}
  .cs-top::after{left:0;right:0}
  .cs-brand img{height:30px}
  .cs-top-status{padding:5px 8px;font-size:8px;letter-spacing:.11em}
  .cs-hero{justify-content:flex-start;gap:16px;padding:58px 14px 22px}
  .cs-title{font-size:clamp(2.65rem,11.5vw,4rem)}
  .cs-countdown-frame::before{padding:8px 0 7px;font-size:7px}
  .cs-countdown{padding:10px 7px 11px}
  .cs-num{padding:8px 2px 5px;font-size:clamp(1.45rem,7.2vw,2.2rem)}
  .cs-label{font-size:.55rem;letter-spacing:.08em}
  .cs-sep{font-size:1rem;padding-top:8px}
  .cs-foot{padding:16px 14px 14px;gap:9px}
  .cs-foot-kicker{font-size:7px;letter-spacing:.14em}
  .cs-foot-label{font-size:8px;letter-spacing:.2em}
  .cs-foot-links{padding:7px 13px}
  .cs-foot-links a{font-size:12px}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .cs-bg{background-attachment:scroll}
  .cs-fog{animation:none;opacity:.2}
  .cs-brand-glow{animation:none}
}

/* ── Brand correction: keep the page about Pahlawan Roleplay ── */
.cs-countdown-frame::before{content:none;display:none}
.cs-countdown-frame{border-radius:8px;background:rgba(6,8,16,.72);border:1px solid rgba(255,255,255,.07);box-shadow:0 16px 36px rgba(0,0,0,.28)}
.cs-countdown{padding:18px 20px 20px;gap:3px}
.cs-num{padding:8px 12px 5px;background:transparent;border:0;box-shadow:none;border-radius:0}
.cs-num--tick{color:var(--amber);background:transparent;border:0;box-shadow:none;text-shadow:0 0 12px rgba(245,185,66,.18)}
.cs-label{font-size:.58rem;letter-spacing:.12em;color:rgba(174,184,201,.78)}
.cs-foot{gap:11px;padding:20px 24px 17px;border-top-color:rgba(255,255,255,.05)}
.cs-foot-label{font-size:9px;letter-spacing:.2em;color:var(--text-dim)}
.cs-foot-links{padding:7px 14px;background:transparent;border-color:rgba(255,255,255,.08);box-shadow:none}
.cs-foot-links a{font-size:13px;letter-spacing:.12em}
@media(max-width:480px){
  .cs-hero{padding-top:44px}
  .cs-title{font-size:clamp(2.65rem,11.5vw,4rem)}
  .cs-countdown{padding:14px 8px 15px}
  .cs-num{padding:7px 2px 4px;font-size:clamp(1.45rem,7.2vw,2.2rem)}
  .cs-label{font-size:.54rem;letter-spacing:.08em}
  .cs-foot{padding:18px 14px 15px;gap:10px}
  .cs-foot-label{font-size:8px;letter-spacing:.16em}
  .cs-foot-links{padding:7px 13px}
  .cs-foot-links a{font-size:12px}
}
/* ═══════════════════════════════════════════════════════════════
   V2 "EMBER" — final layer. Palette locked to logo.png:
     red   #ED1C24 / #C60C1A   (P mark + PAHLAWAN wordmark)
     amber #FBB040 / #D67D12   (H mark + ROLEPLAY wordmark)
   Backgrounds are warm at source (no sepia/saturate hacks needed)
   and their centre frame is near-black by construction
   (measured: desktop centre mean luma 4.6/255, mobile top-third 5.1),
   so the scrim only needs to protect the horizon glow band.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --e-red:#ED1C24;
  --e-red-deep:#C60C1A;
  --e-amber:#FBB040;
  --e-amber-deep:#D67D12;
  --e-ink:#0A0705;
  --e-text:#FFF1DC;
  --e-muted:#BCA893;
}

body.cs{background:var(--e-ink);background-color:var(--e-ink)}

/* ── Backdrop: let the artwork read. Scrim is vertical only, so the
      dark centre stays dark and the horizon glow keeps its punch. ── */
.cs-scrim{
  background:linear-gradient(180deg,
    rgba(10,7,5,.82) 0%,
    rgba(10,7,5,.40) 26%,
    rgba(10,7,5,.22) 50%,
    rgba(10,7,5,.52) 78%,
    rgba(10,7,5,.92) 100%);
}
.cs-vignette{
  background:radial-gradient(ellipse 78% 66% at 50% 46%,transparent 34%,rgba(10,7,5,.62) 100%);
}
/* Warm haze pinned to the lower horizon where the artwork burns. */
.cs-fog{
  opacity:.5;
  background:
    radial-gradient(ellipse 70% 34% at 50% 92%,rgba(251,176,64,.10),transparent 66%),
    radial-gradient(ellipse 52% 26% at 22% 84%,rgba(237,28,36,.07),transparent 66%);
}
.cs-ambient{
  background:
    radial-gradient(ellipse 86% 42% at 50% 104%,rgba(251,176,64,.13),transparent 62%),
    radial-gradient(ellipse 60% 30% at 50% 100%,rgba(237,28,36,.09),transparent 70%);
}

/* ── Rising embers ── */
.cs-embers{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;overflow:hidden;
}
.cs-embers i{
  position:absolute;bottom:-10px;
  width:3px;height:3px;border-radius:50%;
  background:var(--e-amber);
  box-shadow:0 0 8px 2px rgba(251,176,64,.6);
  opacity:0;
  animation:ember-rise linear infinite;
  will-change:transform,opacity;
}
.cs-embers i.red{
  background:var(--e-red);
  box-shadow:0 0 8px 2px rgba(237,28,36,.55);
}
@keyframes ember-rise{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  12%{opacity:.85}
  70%{opacity:.5}
  100%{transform:translate3d(var(--dx,18px),-88vh,0) scale(.25);opacity:0}
}

/* ── Header ── */
.cs-top{
  background:linear-gradient(180deg,rgba(10,7,5,.80),rgba(10,7,5,.26));
  border-bottom-color:rgba(255,196,120,.09);
}
.cs-top::after{
  background:linear-gradient(90deg,rgba(237,28,36,.34),rgba(251,176,64,.20) 46%,transparent 82%);
  opacity:.85;
}
.cs-brand-glow{
  background:radial-gradient(ellipse at center,rgba(237,28,36,.24),transparent 72%);
  opacity:.72;
}
.cs-top-status{
  color:var(--e-amber);
  border-color:rgba(251,176,64,.30);
  background:rgba(251,176,64,.08);
}
.cs-top-status-dot{
  background:var(--e-amber);
  box-shadow:0 0 12px var(--e-amber);
}

/* ── Hero type ── */
.cs-eyebrow{
  color:var(--e-amber);
  text-shadow:0 0 22px rgba(251,176,64,.28);
}
.cs-eyebrow-line{background:linear-gradient(90deg,transparent,var(--e-red-deep),var(--e-amber))}
.cs-eyebrow-line:last-child{background:linear-gradient(90deg,var(--e-amber),var(--e-red-deep),transparent)}

.cs-title{color:var(--e-text);text-shadow:0 6px 40px rgba(0,0,0,.72)}
.cs-title-accent{
  background:linear-gradient(180deg,#FFD98A 0%,var(--e-amber) 28%,var(--e-red) 76%,var(--e-red-deep) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 8px 46px rgba(251,176,64,.34));
}
.cs-launch-date{
  color:#FFE9CB;
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.cs-launch-date span{color:var(--e-amber)}

/* ── Countdown: warm plates ── */
.cs-countdown-frame{
  border-radius:16px;
  border:1px solid rgba(255,190,120,.13);
  background:linear-gradient(180deg,rgba(38,20,10,.56),rgba(10,7,5,.72));
  box-shadow:0 22px 54px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,180,.08);
}
.cs-countdown{padding:16px 18px 18px;gap:clamp(4px,1.2vw,12px)}
.cs-num{
  color:#FFF6E8;
  border:1px solid rgba(255,190,120,.13);
  border-radius:14px;
  padding:14px 16px 11px;
  background:linear-gradient(180deg,rgba(255,170,90,.10),rgba(120,50,20,.05));
  box-shadow:inset 0 1px 0 rgba(255,220,180,.10),0 16px 36px -22px rgba(237,28,36,.5);
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.cs-num--tick{
  color:#FFD08A;
  border-color:rgba(251,176,64,.34);
  background:linear-gradient(180deg,rgba(251,176,64,.18),rgba(214,125,18,.06));
  box-shadow:inset 0 1px 0 rgba(255,235,200,.20),0 0 42px -10px rgba(251,176,64,.45);
  text-shadow:0 0 32px rgba(251,176,64,.55);
}
/* Bump label contrast — 9px muted brown failed AA on the darkest frame. */
.cs-label{
  font-size:.66rem;
  letter-spacing:.2em;
  color:var(--e-muted);
}
.cs-sep{color:rgba(255,200,150,.20)}
.cs-num.flip{animation:ember-glow .45s ease-out}
@keyframes ember-glow{
  0%{transform:scale(1.07);filter:brightness(1.45)}
  100%{transform:none;filter:none}
}

/* ── Footer ── */
.cs-foot{
  border-top-color:rgba(255,196,120,.09);
  background:linear-gradient(0deg,rgba(10,7,5,.82),transparent);
}
.cs-foot-kicker{color:#9C8B7A}
.cs-foot-kicker span{color:var(--e-amber)}
.cs-foot-label{color:var(--e-muted);text-shadow:none}
.cs-foot-links{
  border-color:rgba(255,190,120,.12);
  background:rgba(38,20,10,.30);
}
/* 44px minimum tap target — bare inline text was ~24px. */
.cs-foot-links a{
  color:#FFE9CB;
  display:inline-flex;align-items:center;
  min-height:44px;padding:0 6px;
}
.cs-foot-links a:hover{color:var(--e-amber);text-shadow:0 0 20px rgba(251,176,64,.34)}
.cs-foot-dot{color:rgba(255,200,150,.30);text-shadow:none}
.cs-foot-meta{color:#9C8B7A}
.cs-foot-sep{color:var(--e-amber);opacity:.55}
.cs-foot-dev{color:#B5A392}
.cs-foot-dev a{color:var(--e-amber)}
.cs-brand:focus-visible,.cs-foot-links a:focus-visible,.cs-foot-dev a:focus-visible{
  outline-color:var(--e-amber);
}

/* ── Launched end state ── */
.cs-launched{background:radial-gradient(ellipse at center,rgba(10,7,5,.93),rgba(10,7,5,.99))}
.cs-launched-title span{
  background:linear-gradient(180deg,var(--e-amber),var(--e-red));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cs-btn--primary{
  background:linear-gradient(100deg,var(--e-amber),var(--e-amber-deep));
  color:#1A0E05;
  box-shadow:0 4px 22px rgba(251,176,64,.34);
}
.cs-btn--primary:hover{box-shadow:0 6px 30px rgba(237,28,36,.42)}

/* ── Vertical rhythm: close the dead band between countdown and footer ── */
.cs-hero{justify-content:center;gap:clamp(16px,2.6vh,26px);padding-top:2vh;padding-bottom:2vh}

@media(max-width:480px){
  /* Mobile art burns from ~32% down, so keep the type block high where
     the sky is genuinely black (measured top-third mean luma 5.1). */
  .cs-hero{justify-content:flex-start;padding-top:34px;padding-bottom:20px;gap:15px}
  .cs-label{font-size:.6rem;letter-spacing:.14em}
  .cs-num{padding:9px 3px 6px;border-radius:11px}
  .cs-countdown{padding:12px 8px 13px;gap:4px}
  .cs-foot-links a{min-height:44px;padding:0 4px}
}

/* ── Reduced motion: the per-second tick and the embers are both motion. ── */
@media(prefers-reduced-motion:reduce){
  .cs-embers{display:none}
  .cs-num.flip{animation:none}
  .cs-num--tick{text-shadow:0 0 18px rgba(251,176,64,.4)}
}

/* ── QA pass (desktop 1440x900, headless Chrome): fixes for defects found ── */

/* 1. The DETIK tile grew taller than its siblings — its box-shadow spread and
      glow changed the layout box, so the row baseline broke and re-broke every
      second. Pin the row to a shared baseline and keep every emphasis purely
      visual (colour/shadow), never geometric. */
.cs-countdown{align-items:stretch}
.cs-cell{justify-content:flex-start}
.cs-num{display:flex;align-items:center;justify-content:center}
.cs-num--tick{padding:14px 16px 11px}

/* 2. Small tracked text sat under AA on near-black. Lift the dimmest tiers. */
.cs-label{color:#CBB9A4}
.cs-foot-label{color:#C6B3A0}
.cs-foot-meta{color:#B0A091}
.cs-foot-dev{color:#C2B2A2}
.cs-foot-kicker{color:#AC9A88}

/* 3. Firm up the card edges — the panel and pill borders were near-invisible. */
.cs-countdown-frame{border-color:rgba(255,190,120,.20)}
.cs-foot-links{border-color:rgba(255,190,120,.20)}

/* 4. Even out the countdown panel's internal rhythm (labels were crowding the
      bottom edge while the digits had generous room above). */
.cs-countdown{padding:16px 18px 14px}
.cs-cell{gap:8px}

@media(max-width:480px){
  .cs-countdown{padding:12px 8px 11px}
  .cs-cell{gap:6px}
  .cs-num--tick{padding:9px 3px 6px}
}

/* ── QA pass 2: vertical balance. On tall viewports the hero cluster ended
      around 70% height, leaving a dead band before the footer. Distribute the
      hero's own space instead of leaving one big gap, and let the artwork's
      horizon sit in that band rather than empty black. ── */
.cs-hero{padding-top:clamp(12px,3vh,40px);padding-bottom:clamp(12px,3vh,40px)}

@media(min-height:820px){
  .cs-hero{gap:clamp(20px,3.4vh,34px)}
}

/* Date line has ~10px slack at 320px — ease the tracking below 360px so a
   longer string or a larger system font can't break it onto two lines. */
@media(max-width:360px){
  .cs-launch-date{letter-spacing:.14em;font-size:.74rem}
}

/* Tiles are already tabular-nums + fixed min-width, so digits can't jitter;
   guard the 3-digit case anyway (100+ hari never occurs before launch, but the
   end-state reuse of this markup shouldn't be able to break the row). */
.cs-num{min-width:clamp(58px,14.5vw,100px)}

/* ── QA pass 3: the DETIK glow (42px blur / -10px spread) read as a SIZE
      difference to two independent visual reviews, even though DOM
      measurement confirms all four tiles are geometrically identical
      (offsetHeight 107, offsetTop 16, offsetWidth 114, transform none).
      Pull the halo in so it reads as illumination, not as a bigger tile. ── */
.cs-num--tick{
  box-shadow:inset 0 1px 0 rgba(255,235,200,.20),0 0 20px -8px rgba(251,176,64,.55);
}