/* No Limit Gear — waitlist. Identitas kemasan pouch: hitam, merah 032C, putih/silver, garis HUD.
   Versi "Legendary Drop": emblem N menyala + sinar (1 lapis), crawl siaran, lower-third penghitung,
   tombol START MATCHMAKING, panel MATCH FOUND. Semua animasi transform/opacity; tanpa blur/backdrop-filter.
   Efek tambahan diatur public/fx.js (jeda di luar layar, mode HP lemah, reveal). */
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 400 900; font-stretch: 100% 125%; font-display: swap; src: url(/fonts/saira.woff2) format('woff2'); }
@font-face { font-family: 'Saira'; font-style: italic; font-weight: 400 900; font-stretch: 100% 125%; font-display: swap; src: url(/fonts/saira-italic.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-display: swap; src: url(/fonts/chakra-500.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url(/fonts/chakra-600.woff2) format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap; src: url(/fonts/chakra-700.woff2) format('woff2'); }

:root {
  --bg: #060608;
  --panel: #0f0f13;
  --panel-2: #16161c;
  --line: #2a2a33;
  --line-2: #3a3a45;
  --red: #ef3340;
  --red-hot: #ff4655;
  --red-glow: #ff6b74;
  --red-deep: #8f1520;
  --white: #f5f5f7;
  --silver: #d6d8e0;
  --silver-2: #9a9da8;
  --mute: #a9a9b3;
  --mute-2: #8e8e99;
  --ok: #3ddc84;
  --cut: 16px;
  --gut: 18px;
  --display: 'Saira', 'Arial Narrow', sans-serif;
  --hud: 'Chakra Petch', 'Consolas', monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.3, 1.5, .5, 1);
  --n: url(/assets/logo-n.svg);
  /* ikon lane generik buatan sendiri (bukan aset game mana pun) */
  --i-exp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Cpath d='M5 12.5l7-6 7 6M5 19l7-6 7 6'/%3E%3C/svg%3E");
  --i-jgl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5C4 11 9.5 4.8 20 4c.2 10.5-5.6 15.8-15.5 15.5zM4.5 19.5l9-9'/%3E%3C/svg%3E");
  --i-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M12 1.5v6M12 16.5v6M1.5 12h6M16.5 12h6'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000'/%3E%3C/svg%3E");
  --i-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5l3.2 4.5-3.2 4.5-3.2-4.5z' fill='%23000'/%3E%3C/svg%3E");
  --i-roam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15.8 8.2l-2.3 5.3-5.3 2.3 2.3-5.3z' fill='%23000'/%3E%3C/svg%3E");
  --i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l6 5H9L6 2.5 3 5H0zm0 6 6 5H9L6 8.5 3 11H0z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
/* tidak boleh ada scroll horizontal: semua efek dipotong; clip (tanpa bikin kontainer scroll), fallback hidden */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--white);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  overflow-x: clip;
}
/* atmosfer: cahaya merah dari atas + scanline tipis (statis) */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90vmax 60vmax at 50% -18%, rgba(239, 51, 64, .15), transparent 62%),
    radial-gradient(60vmax 40vmax at -10% 110%, rgba(239, 51, 64, .09), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px);
}

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; }
/* elemen ber-clip-path memotong outline luar → fokus keyboard digambar di dalam */
.btn:focus-visible, .chips button:focus-visible, .faq summary:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.consent input:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
#antrian, section.block, #counter { scroll-margin-top: 62px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- HUD samping (seperti garis di pouch) ---------- */
.hud { position: fixed; top: 0; bottom: 0; width: 14px; z-index: 0; pointer-events: none; }
.hud--l { left: 0; }
.hud--r { right: 0; transform: scaleX(-1); }
.hud svg { width: 100%; height: 100%; animation: hudin 1.4s var(--ease) .1s both; }
.hud path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.hud path.thin { stroke-width: 1.2; opacity: .55; }
@keyframes hudin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- crawl siaran (paling atas, 1 baris) ---------- */
.crawl { position: relative; z-index: 3; display: flex; height: 24px; background: #0a0a0d; border-bottom: 1px solid rgba(239, 51, 64, .4); overflow: hidden;
  font: 700 10px/24px var(--hud); letter-spacing: .2em; text-transform: uppercase; }
.crawl-tag { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 16px 0 10px; background: var(--red); color: #0a0a0d; letter-spacing: .16em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.crawl-tag i { width: 6px; height: 6px; border-radius: 50%; background: #0a0a0d; }
.crawl-win { flex: 1; min-width: 0; overflow: hidden; }
.trk { display: flex; width: max-content; animation: marq 32s linear infinite; }
.trk > span { flex: none; white-space: nowrap; color: var(--silver); }
.trk b { color: var(--red); margin: 0 1em; font-weight: 700; }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- kerangka ---------- */
.wrap { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }
@media (min-width: 720px) { :root { --gut: 64px; } .hud { width: 64px; } }

.topbar { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 12px 0 4px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
.brand .n { width: 28px; height: auto; flex: none; }
.brand .word { display: flex; flex-direction: column; line-height: 1; }
.brand .word img { height: 14px; width: auto; }
.brand .word span { font-family: var(--hud); font-weight: 700; font-size: 9px; letter-spacing: .62em; color: var(--white); margin-top: 4px; padding-left: 2px; }
.pill { font-family: var(--hud); font-weight: 600; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--silver);
  padding: 6px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(90deg, rgba(239, 51, 64, .22), rgba(239, 51, 64, .04)); box-shadow: inset 0 0 0 1px rgba(239, 51, 64, .45);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.pill i { position: relative; flex: none; width: 7px; height: 7px; background: var(--red-hot); border-radius: 50%; }
.pill i::after { content: ''; position: absolute; inset: -1px; border: 2px solid var(--red-hot); border-radius: 50%; animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (max-width: 429px) {
  .brand { gap: 8px; } .brand .n { width: 26px; } .brand .word img { height: 12.5px; } .brand .word span { font-size: 8.5px; }
  .pill { font-size: 9.5px; letter-spacing: .06em; padding: 6px 9px; gap: 6px; }
}
@media (max-width: 389px) {
  .brand { gap: 7px; } .brand .n { width: 25px; } .brand .word img { height: 11.5px; } .brand .word span { font-size: 8px; }
  .pill { font-size: 9px; letter-spacing: .05em; padding: 6px 8px 6px 9px; }
  .pill i { display: none; }
}

/* =====================================================================
   HERO — legendary drop (ringkas: form tetap di layar pertama HP)
   ===================================================================== */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'a' 'card' 'b'; row-gap: 14px; padding: 0 0 30px; }
.hero > * { min-width: 0; }
.hero-a { grid-area: a; position: relative; text-align: center; }
.hero > .card, .hero > .aura { grid-area: card; }
.hero-b { grid-area: b; margin-top: 8px; }

/* lapisan efek: dipotong tepat di tepi layar (tanpa 100vw), jadi tidak ada scroll horizontal */
.fx { --cy: 152px; --rs: 460px; position: absolute; z-index: -1; top: -112px; height: 480px; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1);
  overflow: hidden; pointer-events: none; }
.fx > i, .fx > b { position: absolute; display: block; }
.fx-rays { left: 50%; top: var(--cy); width: var(--rs); height: var(--rs); margin: calc(var(--rs) / -2) 0 0 calc(var(--rs) / -2); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(239, 51, 64, 0) 0deg, rgba(255, 70, 85, .62) 5deg, rgba(239, 51, 64, 0) 10deg,
    rgba(239, 51, 64, 0) 17deg, rgba(255, 150, 160, .34) 20deg, rgba(239, 51, 64, 0) 23deg,
    rgba(239, 51, 64, 0) 30deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 0 15%, rgba(0, 0, 0, .55) 24%, #000 34%, rgba(0, 0, 0, .5) 58%, transparent 96%);
  mask-image: radial-gradient(closest-side, transparent 0 15%, rgba(0, 0, 0, .55) 24%, #000 34%, rgba(0, 0, 0, .5) 58%, transparent 96%);
  animation: spin 80s linear infinite; }
.fx-glow { left: 50%; top: var(--cy); width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8, 8, 10, .9) 0 17%, rgba(8, 8, 10, .55) 25%, rgba(255, 92, 104, .5) 36%, rgba(239, 51, 64, .22) 52%, rgba(239, 51, 64, .07) 72%, transparent); }
/* pilar cahaya loot dari emblem ke atas (statis) */
.fx-beam { left: 50%; top: 0; width: 130px; height: calc(var(--cy) + 20px); margin-left: -65px;
  background: linear-gradient(90deg, transparent 46%, rgba(255, 225, 228, .5) 50%, transparent 54%),
    radial-gradient(50% 100% at 50% 100%, rgba(255, 90, 100, .5), rgba(239, 51, 64, .14) 55%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent); }
/* bara: posisi lewat :nth-child (CSP melarang atribut style) */
.embers { position: absolute; inset: 0; }
.embers i { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, #ff8a92 32%, rgba(255, 70, 85, .45) 50%, rgba(255, 70, 85, 0) 70%);
  animation: ember var(--d) linear var(--t) infinite; }
.embers i:nth-child(1) { --x: 44%; --y: 190px; --d: 3.8s; --t: -.4s; --dx: -16px; --dy: -150px; }
.embers i:nth-child(2) { --x: 57%; --y: 196px; --d: 4.4s; --t: -1.6s; --dx: 20px; --dy: -170px; }
.embers i:nth-child(3) { --x: 36%; --y: 214px; --d: 3.3s; --t: -2.4s; --dx: -26px; --dy: -140px; width: 9px; height: 9px; }
.embers i:nth-child(4) { --x: 65%; --y: 210px; --d: 4.1s; --t: -.9s; --dx: 24px; --dy: -160px; width: 9px; height: 9px; }
.embers i:nth-child(5) { --x: 50%; --y: 220px; --d: 3.1s; --t: -2.9s; --dx: 6px; --dy: -175px; }
.embers i:nth-child(6) { --x: 28%; --y: 250px; --d: 5s; --t: -3.6s; --dx: -12px; --dy: -200px; width: 9px; height: 9px; }
@keyframes ember {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
  12% { opacity: 1; }
  70% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(.35); }
}

/* panggung emblem N */
.drop { position: relative; height: 92px; margin: 0 auto; display: grid; place-items: center; pointer-events: none; }
.drop-ring { position: absolute; left: 50%; bottom: -58px; width: 176px; height: 176px; margin-left: -88px; transform: perspective(420px) rotateX(74deg);
  overflow: hidden; } /* sudut kotak svg yang berputar + perspektif sempat melebar >320px */
.drop-ring::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 90, 100, .55), rgba(239, 51, 64, .16) 60%, transparent); }
.drop-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.drop-ring circle { fill: none; stroke: var(--red-hot); }
.drop-ring .a { stroke-width: 1.8; stroke-dasharray: 3 7; opacity: .9; }
.drop-ring .b { stroke-width: 3.2; stroke-dasharray: 40 18 6 18; opacity: .75; }
.drop-ring .c { stroke-width: 1; opacity: .5; }
.drop-n { position: relative; width: 74px; aspect-ratio: 87.433 / 100; margin-top: -4px;
  animation: land .9s var(--ease) .05s both, float 4.2s ease-in-out 1.1s infinite; }
.drop-n img { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 1px rgba(255, 235, 237, .95)) drop-shadow(0 0 1px rgba(255, 235, 237, .6)) drop-shadow(0 4px 12px rgba(0, 0, 0, .85)); }
.drop-n > span { position: absolute; inset: 0; -webkit-mask: var(--n) center / contain no-repeat; mask: var(--n) center / contain no-repeat; }
.drop-bevel { background: linear-gradient(150deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .1) 26%, rgba(255, 255, 255, 0) 40%, rgba(40, 0, 6, 0) 58%, rgba(40, 0, 6, .5) 100%); }
.drop-shine { overflow: hidden; }
.drop-shine i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg); animation: nshine 3.8s ease-in-out 1.4s infinite; }
.drop-burst { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -80px 0 0 -75px; border-radius: 50%;
  border: 2px solid rgba(255, 200, 205, .9); opacity: 0; animation: burst .8s ease-out .55s both; }
@keyframes land { 0% { opacity: 0; transform: translateY(-60px) scale(.55); } 60% { opacity: 1; transform: translateY(4px) scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes nshine { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 85%, 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes burst { 0% { opacity: .9; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.6); } }

/* kicker = banner rarity */
.kicker { font-family: var(--hud); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin: 0 0 14px; }
.kicker b { color: var(--white); font-weight: 600; }
.hero .kicker { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 9px; font-size: 11px; letter-spacing: .2em; color: var(--red-glow); white-space: nowrap; }
.hero .kicker::before, .hero .kicker::after { content: ''; flex: 0 1 46px; min-width: 12px; height: 8px;
  background: linear-gradient(90deg, transparent, var(--red-hot)) left center / calc(100% - 10px) 1px no-repeat,
    conic-gradient(from 45deg, var(--red-hot) 0 25%, transparent 0 50%, var(--red-hot) 0 75%, transparent 0) right center / 6px 6px no-repeat; }
.hero .kicker::after { transform: scaleX(-1); }
@media (max-width: 379px) { .hero .kicker { letter-spacing: .12em; gap: 7px; } }

/* judul: logam putih + merah menyala */
h1 { margin: 0; font-style: italic; font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: .9; letter-spacing: -.008em;
  font-size: clamp(30px, 10.6vw, 66px); }
h1 .l1, h1 .l2 { display: block; padding: 0 .06em; -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 .l1 { font-size: .82em; background-image: linear-gradient(180deg, #fff 0%, #fff 42%, #b9bcc6 100%); background-size: 100% .9em; }
h1 .l2 { margin-top: .04em; background-image: linear-gradient(180deg, #ff8a91 0%, #ff4655 30%, #ef3340 62%, #b0141f 100%); background-size: 100% .9em; }
h1 .l1 { animation: wipe .55s var(--ease) .15s both; }
h1 .l2 { animation: wipe .55s var(--ease) .3s both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { clip-path: inset(-10% -5% -10% -5%); transform: none; } }
.slash { position: relative; height: 5px; width: 110px; margin: 10px auto 0; background: linear-gradient(90deg, var(--red-deep), var(--red-hot), var(--red-deep));
  transform: skewX(-35deg); animation: grow .6s var(--ease) .6s both; }
.slash::before, .slash::after { content: ''; position: absolute; top: 0; width: 14px; height: 5px; background: var(--red-hot); opacity: .5; }
.slash::before { left: -24px; } .slash::after { right: -24px; }
@keyframes grow { from { transform: skewX(-35deg) scaleX(0); } }

.lede { font-size: 17px; color: #d9d9de; max-width: 36ch; margin: 0; }
.lede strong { color: var(--white); font-weight: 700; }

/* plat founder: slot visual siap foto, tetap bagus tanpa foto */
.founder { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; padding: 12px 14px 12px 12px;
  background: linear-gradient(100deg, rgba(239, 51, 64, .14), rgba(22, 22, 28, .9) 45%, rgba(15, 15, 19, .9));
  box-shadow: inset 0 0 0 1px rgba(239, 51, 64, .3);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.portrait { position: relative; width: 74px; aspect-ratio: 1; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #0a0a0d 0 36%, rgba(60, 8, 14, .9) 48%, rgba(190, 34, 46, .55) 66%, rgba(239, 51, 64, .3) 78%, #0d0d11 96%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.portrait::before { content: ''; position: absolute; inset: -30%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 140, 150, 0) 0deg, rgba(255, 140, 150, .22) 6deg, rgba(255, 140, 150, 0) 14deg, rgba(255, 140, 150, 0) 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 34%, #000 50%); mask-image: radial-gradient(circle, transparent 0 34%, #000 50%); }
.portrait img { position: absolute; left: 50%; top: 50%; width: 42px; height: auto; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 1px rgba(255, 238, 240, .95)) drop-shadow(0 0 1px rgba(255, 238, 240, .55)) drop-shadow(0 2px 6px rgba(0, 0, 0, .9)); }
.sig { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; min-width: 0; }
.sig img { width: 170px; height: auto; max-width: 100%; }
.sig span { font-family: var(--hud); font-weight: 700; font-size: 10.5px; letter-spacing: .3em; color: var(--silver-2); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; }
.sig span::before { content: ''; width: 6px; height: 6px; background: var(--red-hot); transform: rotate(45deg); }

.rise { animation: rise .8s var(--ease) both; }
.d-1 { animation-delay: .1s; } .d-2 { animation-delay: .55s; } .d-3 { animation-delay: .6s; } .d-4 { animation-delay: .75s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); grid-template-areas: 'a card' 'b card'; align-items: center; column-gap: 56px; row-gap: 0; padding: 26px 0 72px; }
  .hero-a { align-self: end; } .hero-b { align-self: start; margin-top: 26px; text-align: center; }
  .fx { --cy: 232px; --rs: 900px; top: -150px; height: 820px; left: -220px; right: -220px; }
  .fx-glow { width: 520px; height: 520px; margin: -260px 0 0 -260px; }
  .fx-beam { width: 200px; margin-left: -100px; }
  .embers i:nth-child(n) { --y: 300px; }
  .embers i:nth-child(6) { --y: 340px; }
  .drop { height: 190px; }
  .drop-n { width: 140px; margin-top: -16px; }
  .drop-ring { width: 320px; height: 320px; margin-left: -160px; bottom: -104px; }
  .drop-burst { width: 280px; height: 280px; margin: -150px 0 0 -140px; }
  .hero .kicker { margin-top: 26px; font-size: 12px; }
  h1 { font-size: clamp(44px, 4.9vw, 64px); }
  .lede { margin: 0 auto; font-size: 18px; }
  .founder { max-width: 420px; margin: 18px auto 0; text-align: left; }
}

/* =====================================================================
   KARTU — bingkai legendary (sudut potong seperti jendela pouch)
   ===================================================================== */
.card { position: relative; padding: 1.5px;
  background: linear-gradient(155deg, var(--red-hot) 0%, #5a1820 30%, #2a2a33 55%, #6c6f7a 78%, var(--red) 100%);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
/* overflow clip = sama dengan clip-path secara visual, tapi juga memotong luapan scroll (cahaya nomor antrian berputar) */
.card > .in { position: relative; height: 100%; padding: 16px 16px 16px; overflow: hidden; overflow: clip;
  background:
    linear-gradient(var(--silver), var(--silver)) right 8px top 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--silver), var(--silver)) right 8px top 8px / 1.5px 12px no-repeat,
    linear-gradient(var(--silver), var(--silver)) left 8px bottom 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--silver), var(--silver)) left 8px bottom 8px / 1.5px 12px no-repeat,
    radial-gradient(120% 50% at 50% 0%, rgba(239, 51, 64, .15), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
@media (min-width: 480px) { .card > .in { padding: 24px 24px 22px; } }

/* aura di belakang kartu form (gradien statis, bukan blur) */
.aura { position: relative; z-index: -1; margin: -22px -10px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(239, 51, 64, .3), rgba(239, 51, 64, .09) 60%, transparent); }

/* kepala kartu = tab siaran */
.card-head { display: flex; justify-content: space-between; align-items: stretch; gap: 10px; min-height: 38px; margin: -16px -16px 14px;
  font-family: var(--hud); font-weight: 700; font-size: 11.5px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(90deg, rgba(239, 51, 64, .14), rgba(239, 51, 64, 0) 75%); border-bottom: 1px solid rgba(239, 51, 64, .3); }
.card-head > span:first-child { display: flex; align-items: center; gap: 9px; padding: 0 24px 0 22px; color: #fff;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 45%, var(--red-hot)); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.card-head .live { display: inline-flex; align-items: center; gap: 7px; padding-right: 26px; color: var(--mute); white-space: nowrap; }
.card-head .live::before { content: ''; width: 7px; height: 7px; background: var(--ok); border-radius: 50%; box-shadow: 0 0 0 3px rgba(61, 220, 132, .16); }
@media (min-width: 480px) { .card-head { margin: -24px -24px 18px; } }
.card-head > span { white-space: nowrap; }
.joined .card-head { letter-spacing: .08em; }
.joined .card-head > span:first-child { padding: 0 22px 0 16px; }
.joined .card-head .live { padding-right: 22px; }
@media (max-width: 379px) { .card-head, .joined .card-head { letter-spacing: .04em; font-size: 11px; } .card-head > span:first-child { padding: 0 18px 0 18px; } .card-head .live { padding-right: 22px; } .fine { font-size: 10.5px; letter-spacing: .06em; } }

/* ---------- form ---------- */
label.field { display: block; font-family: var(--hud); font-weight: 600; font-size: 11.5px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 7px; }
.phone { position: relative; display: flex; align-items: stretch; background: #09090c; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.phone:focus-within { box-shadow: inset 0 0 0 1.5px var(--red-hot), inset 0 0 22px rgba(239, 51, 64, .22); }
.phone .cc { flex: none; display: flex; align-items: center; padding: 0 12px 0 15px; font-family: var(--hud); font-weight: 700; font-size: 18px; color: var(--red-hot);
  background: linear-gradient(180deg, #1b1b22, #121217); box-shadow: inset -1px 0 0 var(--line-2); }
/* width:0 + flex:1: input tidak memaksa kolom grid melebar (bug layout 451px di HP 390) */
.phone input { flex: 1; width: 0; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--white); padding: 13px 14px;
  font-family: var(--hud); font-weight: 600; font-size: 21px; letter-spacing: .06em; }
.phone input::placeholder { color: #4f4f5a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin: 12px 0 14px; font-size: 13px; line-height: 1.48; color: var(--mute); cursor: pointer; }
.consent input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--mute-2); background: #09090c; display: grid; place-content: center; cursor: pointer;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.consent input::before { content: ''; width: 12px; height: 12px; background: var(--red-hot); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); transform: scale(0); transition: transform .18s var(--pop); }
.consent input:checked { border-color: var(--red-hot); background: #1d080c; }
.consent input:checked::before { transform: scale(1); }
.consent a { color: var(--white); }
@media (min-width: 480px) { .consent { font-size: 13.5px; margin: 14px 0 16px; } }
.ts { margin: -4px 0 14px; min-height: 0; }

/* ---------- tombol ---------- */
.btn { --skew: 14px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; border: 0; text-decoration: none;
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 118%; text-transform: uppercase; letter-spacing: .02em;
  clip-path: polygon(var(--skew) 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%); transition: transform .12s, filter .2s; overflow: hidden; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { width: 100%; padding: 17px 24px; font-size: 19px; color: #fff; text-shadow: 0 1px 0 rgba(90, 0, 10, .45);
  background: linear-gradient(180deg, #ff6670 0%, var(--red-hot) 22%, var(--red) 60%, #c41d2b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 rgba(90, 0, 12, .35); }
.btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .5) 50%, transparent 80%);
  transform: translateX(-120%); animation: bshine 3.4s ease-in-out 1.6s infinite; }
@keyframes bshine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(260%); } }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary[disabled] { filter: grayscale(.4) brightness(.78); cursor: wait; }
.btn-primary[disabled]::after { display: none; }
.btn-ghost { padding: 12px 18px; font-size: 14px; color: var(--white); background: linear-gradient(180deg, #23232b, #18181e); box-shadow: inset 0 0 0 1px #33333e; }
.btn-ghost:hover { background: #2a2a33; }
/* cahaya di bawah tombol utama (gradien, bukan blur) */
.cta, .mm { position: relative; isolation: isolate; }
.cta::before, .mm::before { content: ''; position: absolute; z-index: -1; left: 4%; right: 4%; top: 30%; bottom: -14px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 70, 85, .55), rgba(239, 51, 64, .18) 55%, transparent); }

/* START MATCHMAKING: label & cincin dekoratif di luar teks tombol (app.js menimpa textContent) */
.btn-mm { min-height: 58px; justify-content: flex-start; text-align: left; white-space: nowrap; padding: 24px 14px 10px 62px; line-height: 1;
  font-size: clamp(15px, 4.5vw, 18.5px); font-stretch: 110%; }
.btn-mm::before { content: 'Start matchmaking'; content: 'Start matchmaking' / ''; position: absolute; left: 62px; top: 11px; font: 700 9px/1 var(--hud); font-style: normal;
  letter-spacing: .3em; color: rgba(255, 255, 255, .85); text-shadow: none; }
.mm-ring { position: absolute; z-index: 2; left: 16px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #7a0d17 0 60%, #530810 62%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }
.mm-ring .spin { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: #fff; border-right-color: rgba(255, 255, 255, .35); animation: spin 1.6s linear infinite; }
.mm-ring .tri { position: absolute; left: 50%; top: 50%; width: 11px; height: 13px; margin: -6.5px 0 0 -4px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mm-go { position: absolute; z-index: 2; right: 26px; top: 50%; display: none; gap: 3px; margin-top: -7px; pointer-events: none; }
.mm-go i { width: 9px; height: 14px; background: #fff; opacity: .45; clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); }
.mm-go i:nth-child(2) { opacity: .7; } .mm-go i:nth-child(3) { opacity: 1; }
@media (min-width: 420px) { .mm-go { display: flex; } }
.mm-time { position: absolute; z-index: 2; right: 22px; top: 50%; margin-top: -9px; display: none; font: 700 15px/18px var(--hud); letter-spacing: .1em; color: #fff; pointer-events: none; }
.mm.searching .mm-go { display: none; }
.mm.searching .mm-time { display: block; }
.mm.searching .spin { animation-duration: .55s; border-right-color: #fff; }
.mm.searching .tri { width: 10px; height: 10px; margin: -5px 0 0 -5px; clip-path: none; animation: blink .8s steps(2) infinite; }
.mm.searching .btn-mm::before { content: 'Matchmaking…'; content: 'Matchmaking…' / ''; }
@media (max-width: 359px) { .btn-mm { padding-left: 54px; font-stretch: 100%; } .btn-mm::before { left: 54px; letter-spacing: .2em; } .mm-ring { left: 12px; } }

.err { min-height: 1.4em; margin: 10px 0 0; color: var(--red-hot); font-size: 14px; font-weight: 600; }
.join .err:empty { min-height: .5em; }
.fine { margin: 2px 0 0; font-family: var(--hud); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); text-align: center; }
.u18 { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--mute); text-align: center; }
.u18 a { color: var(--white); }

/* =====================================================================
   SETELAH DAFTAR — MATCH FOUND + item reveal + inventory Squad 5
   ===================================================================== */
.joined[hidden], .join[hidden] { display: none; }
.joined { position: relative; }
.mf { position: relative; margin: -2px -16px 14px; padding: 16px 0 13px; text-align: center; overflow: hidden;
  background: radial-gradient(55% 140% at 50% 50%, rgba(239, 51, 64, .42), transparent 72%);
  border-top: 1px solid rgba(239, 51, 64, .55); border-bottom: 1px solid rgba(239, 51, 64, .55); }
@media (min-width: 480px) { .mf { margin: -4px -24px 16px; } }
.mf::before, .mf::after { content: ''; position: absolute; top: calc(50% - 7px); width: 18%; height: 2px; background: linear-gradient(90deg, transparent, var(--red-hot)); }
.mf::before { left: 3%; transform-origin: right; }
.mf::after { right: 3%; background: linear-gradient(270deg, transparent, var(--red-hot)); transform-origin: left; }
.mf-t { position: relative; z-index: 1; display: inline-block; font: italic 900 clamp(28px, 8.6vw, 38px)/1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; color: #fff;
  text-shadow: 0 0 18px rgba(239, 51, 64, .85), 2px 2px 0 var(--red-deep); }
.mf-s { position: relative; z-index: 1; display: block; margin-top: 6px; font: 700 10px/1 var(--hud); letter-spacing: .4em; color: #ffb3b9; text-transform: uppercase; }
.mf-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-100%); }
.revealed .mf-t { animation: mfin .75s var(--ease) both; }
.revealed .mf::before, .revealed .mf::after { animation: mfl .7s .3s var(--ease) both; }
.revealed .mf-scan { animation: mfscan 1s .45s ease-out both; }
@keyframes mfin { 0% { transform: scale(1.9); opacity: 0; } 55% { transform: scale(.95); opacity: 1; } 100% { transform: none; } }
@keyframes mfl { from { transform: scaleX(0); } }
@keyframes mfscan { 90% { opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

.pos-label { margin: 0; font-family: var(--hud); font-weight: 600; font-size: 12px; letter-spacing: .18em; color: var(--mute); text-transform: uppercase; }
.qbox { position: relative; text-align: center; padding: 2px 0 0; }
.qbox::before, .qbox::after { content: ''; position: absolute; top: 26px; bottom: 6px; width: 14px; border: 2px solid var(--red); }
.qbox::before { left: 4%; border-right: 0; }
.qbox::after { right: 4%; border-left: 0; }
.qbox .pos-label { color: var(--silver); }
.pos { position: relative; isolation: isolate; margin: 4px 0 6px; text-align: center; font-style: italic; font-weight: 900; font-stretch: 125%;
  font-size: clamp(54px, 16vw, 80px); line-height: 1.05; color: var(--white); }
.pos span { background: linear-gradient(180deg, #fff 0%, #fff 45%, #b9bcc6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .06em; }
.pos small { color: var(--red-hot); font-size: .55em; vertical-align: .38em; margin-right: 2px; }
.pos::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255, 90, 100, .5), rgba(239, 51, 64, .14) 45%, transparent 75%),
    repeating-conic-gradient(from 0deg, rgba(239, 51, 64, 0) 0deg, rgba(239, 51, 64, .42) 5deg, rgba(239, 51, 64, 0) 11deg, rgba(239, 51, 64, 0) 22.5deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent); mask-image: radial-gradient(closest-side, #000 20%, transparent);
  animation: spin 60s linear infinite; }
.pos::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%;
  border: 2px solid rgba(255, 210, 214, .9); opacity: 0; }
.revealed .pos { animation: itempop .75s var(--pop) both; }
.revealed .pos::after { animation: burst .9s ease-out .15s both; }
.revealed::before { content: ''; position: absolute; inset: -16px; z-index: 5; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 235, 237, .85), rgba(255, 90, 100, .22) 60%, transparent); animation: flash .7s ease-out both; }
@keyframes itempop { 0% { opacity: 0; transform: scale(2.1); } 55% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* rank: lencana + sisa teman ditumpuk (tidak patah satu kata) */
.rank { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin: 2px 0 16px; text-align: center;
  font-family: var(--hud); font-weight: 600; font-size: 12.5px; line-height: 1.3; letter-spacing: .1em; color: var(--mute); text-transform: uppercase; }
.rank b { display: inline-flex; align-items: center; gap: 7px; padding: 5px 16px 5px 12px; color: #fff; font-weight: 700; letter-spacing: .14em;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 35%, var(--red-hot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.rank b::before { content: ''; width: 11px; height: 11px; background: #fff; -webkit-mask: var(--i-up) center / contain no-repeat; mask: var(--i-up) center / contain no-repeat; }
.rank span { flex: 0 0 100%; color: var(--mute-2); font-size: 11.5px; letter-spacing: .08em; }
.rank span:empty { display: none; }

/* inventory squad: markup dari app.js (span label, span.ico, span lane) */
.squad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.slot { --c: 9px; position: relative; aspect-ratio: 3 / 4.2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 2px 8px;
  color: var(--mute-2); font-family: var(--hud); font-weight: 700; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; text-align: center; overflow: hidden;
  background: linear-gradient(#2e2e38, #2e2e38) left 0 top 0 / 100% 1px no-repeat, radial-gradient(circle at 50% 50%, #15151b, #0b0b0e 70%);
  box-shadow: inset 0 0 0 1px #2a2a33;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.slot > span:first-child { order: 0; }
.slot > span:last-child { order: 2; color: var(--mute); }
.slot::before { content: ''; order: 1; width: 26px; height: 26px; flex: none; background: #44444f;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.slot .ico { position: absolute; top: 3px; right: 5px; font-family: var(--display); font-style: normal; font-weight: 900; font-size: 11px; line-height: 1; color: #55555f; }
.slot:not(.on) .ico { font-size: 13px; }
.slot.on { color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 30%) left 0 top 0 / 100% 100% no-repeat,
    radial-gradient(90% 60% at 50% 100%, rgba(255, 90, 100, .85), rgba(239, 51, 64, .25) 60%, transparent),
    linear-gradient(180deg, #3a0e15, #1a070b);
  box-shadow: inset 0 0 0 1.5px var(--red-hot), inset 0 0 16px rgba(255, 70, 85, .5); }
.slot.on > span:last-child { color: #fff; }
.slot.on::before { background: #fff; }
.slot.on .ico { color: var(--red-glow); }
.slot.on:first-child { box-shadow: inset 0 0 0 1.5px var(--silver), inset 0 0 16px rgba(255, 70, 85, .5); }
.slot.on:first-child .ico { color: var(--silver); }
.slot.on::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 50%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent); transform: translateX(-140%) skewX(-16deg); animation: slotshine 4.5s ease-in-out 1.2s infinite; }
@keyframes slotshine { 0%, 60% { transform: translateX(-140%) skewX(-16deg); } 85%, 100% { transform: translateX(280%) skewX(-16deg); } }
.slot.on.pop { animation: pop .55s var(--pop); }
@keyframes pop { 40% { transform: scale(1.12); } }
.revealed .slot { animation: slotin .5s var(--pop) both; }
.revealed .slot:nth-child(1) { animation-delay: .4s; } .revealed .slot:nth-child(2) { animation-delay: .52s; } .revealed .slot:nth-child(3) { animation-delay: .64s; }
.revealed .slot:nth-child(4) { animation-delay: .76s; } .revealed .slot:nth-child(5) { animation-delay: .88s; }
@keyframes slotin { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 100% { opacity: 1; transform: none; } }
/* tanda ★/✓/+ = lencana di pojok ikon lane, supaya tidak menabrak label "KOSONG"/"TEMAN" di HP 320–390px */
.slot .ico { top: 50%; right: auto; left: 50%; display: grid; place-items: center; width: 15px; height: 15px; margin: 1px 0 0 5px; border-radius: 50%;
  font-size: 10px; background: #0b0b0e; box-shadow: 0 0 0 1px #3a3a45; }
.slot:not(.on) .ico { font-size: 12px; color: #8e8e99; }
.slot.on .ico { color: #fff; background: var(--red-hot); box-shadow: 0 0 0 1.5px #1a070b; }
.slot.on:first-child .ico { color: #1a070b; background: var(--silver); }
.squad .slot[data-lane="EXP"] { --ic: var(--i-exp); } .squad .slot[data-lane="JUNGLE"] { --ic: var(--i-jgl); } .squad .slot[data-lane="MID"] { --ic: var(--i-mid); }
.squad .slot[data-lane="GOLD"] { --ic: var(--i-gold); } .squad .slot[data-lane="ROAM"] { --ic: var(--i-roam); }

.squad-note { margin: 0 0 18px; font-size: 13.5px; color: var(--mute); }
.squad-note b { color: var(--white); }
.squad-tmp { display: inline-block; margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--line-2); font-size: 12px; color: var(--mute-2); }
.share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.share .btn-wa { grid-column: 1 / -1; white-space: nowrap; padding: 15px 12px; font-size: clamp(13px, 3.9vw, 16px); font-stretch: 106%; background: linear-gradient(180deg, #34e077, #22c35e); color: #052e16; text-shadow: none; }
.share .btn-ghost { padding: 12px 8px; }
.sharelink { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; background: #09090c; border: 1px solid var(--line); color: var(--mute);
  font-family: var(--hud); font-size: 13px; }
.follow { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }
.follow[hidden] { display: none; }
.follow p, .profile p { margin: 0 0 10px; font-family: var(--hud); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; color: var(--mute); text-transform: uppercase; }
.follow .row { display: flex; flex-wrap: wrap; gap: 8px; }
.follow a { --skew: 10px; flex: 1 1 calc(50% - 8px); padding: 11px 14px; font-size: 13px; }
.profile { margin-top: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chips button { position: relative; font-family: var(--hud); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; padding: 8px 12px; background: #0d0d11; color: var(--mute);
  border: 0; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: transform .12s;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.chips button:active { transform: scale(.96); }
.chips button[aria-pressed='true'] { color: #fff; background: linear-gradient(180deg, #4a121a, #23090d); box-shadow: inset 0 0 0 1.5px var(--red-hot), inset 0 0 14px rgba(255, 70, 85, .45); }
.linkish { background: none; border: 0; padding: 0; margin-top: 10px; color: var(--mute-2); font-size: 13px; text-decoration: underline; cursor: pointer; font-family: inherit; }
.inline-link { color: var(--red-glow); font-weight: 700; text-decoration: none; white-space: nowrap; }
.inline-link:hover { text-decoration: underline; }
.req-nudge { display: block; margin-top: 18px; font-size: 14px; white-space: normal; }

/* ---------- pita trailer (1 pita miring) ---------- */
.tape { position: relative; height: 84px; margin: 0 calc(var(--gut) * -1); overflow: hidden; pointer-events: none; }
.tape-a { position: absolute; left: -10%; width: 120%; top: 50%; height: 40px; margin-top: -20px; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(180deg, var(--red-hot), var(--red) 55%, #c41d2b); transform: rotate(-3.2deg); box-shadow: 0 0 0 1px #000, 0 12px 26px rgba(0, 0, 0, .55); }
.tape .trk { animation-duration: 24s; }
.tape .trk > span { font: italic 900 20px/1 var(--display); font-stretch: 125%; letter-spacing: .01em; text-transform: uppercase; color: #0a0a0c; }
.tape .trk b { color: #fff; margin: 0 .7em; }
@media (min-width: 960px) { .tape { height: 100px; margin: 0 calc(50% - 50vw); } .tape-a { transform: rotate(-1.6deg); height: 46px; margin-top: -23px; } .tape .trk > span { font-size: 24px; } }

/* ---------- penghitung = lower third siaran ---------- */
.counter { position: relative; display: grid; grid-template-columns: 62px auto; grid-template-rows: auto auto; justify-content: start; margin: 4px 0 0; }
.counter[hidden] { display: none; }
.counter::before { content: ''; grid-column: 1; grid-row: 1 / 3; background: linear-gradient(180deg, var(--red-hot), var(--red) 50%, var(--red-deep));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.counter::after { content: ''; position: absolute; left: 13px; top: 50%; width: 36px; height: 41px; margin-top: -21px; background: #0a0a0c;
  -webkit-mask: var(--n) center / contain no-repeat; mask: var(--n) center / contain no-repeat; }
.counter .num { grid-column: 2; grid-row: 1; justify-self: start; position: relative; overflow: hidden; min-width: 190px; padding: 9px 44px 3px 18px;
  background: var(--white); color: #0a0a0c; font-style: italic; font-weight: 900; font-stretch: 125%; font-size: clamp(44px, 12.5vw, 76px); line-height: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); }
.counter .lbl { grid-column: 2; grid-row: 2; justify-self: start; display: flex; align-items: center; gap: 9px; padding: 9px 30px 9px 18px;
  background: #0b0b0e; color: var(--white); border-bottom: 2px solid var(--red); font: 700 11.5px/1.2 var(--hud); letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.counter .lbl::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--red); animation: blink 1s steps(2) infinite; }
.counter:not([hidden]) .num { animation: ltIn .6s var(--ease) .1s backwards; }
.counter:not([hidden]) .lbl { animation: ltIn .6s var(--ease) .25s backwards; }
@keyframes ltIn { from { transform: translateX(-30px); } }
@media (max-width: 379px) { .counter .lbl { letter-spacing: .08em; padding-right: 22px; } .counter .num { min-width: 170px; } }

/* ---------- judul seksi (menu game) ---------- */
section.block { padding: 52px 0 6px; }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sec-head .idx { flex: none; display: grid; place-items: center; width: 42px; height: 46px; font-family: var(--hud); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: #fff;
  background: linear-gradient(160deg, var(--red-hot), var(--red-deep)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
h2 { margin: 0; font-style: italic; font-weight: 900; font-stretch: 122%; text-transform: uppercase; font-size: clamp(28px, 8vw, 46px); line-height: 1; }
.sec-head::after { content: ''; flex: 1 1 20px; min-width: 16px; height: 10px; align-self: center;
  background: linear-gradient(90deg, var(--line-2), transparent) left center / 100% 1px no-repeat,
    repeating-linear-gradient(115deg, var(--red) 0 3px, transparent 3px 8px) left center / 26px 10px no-repeat; }
.sec-sub { margin: -6px 0 22px; color: var(--mute); max-width: 52ch; }

/* muncul saat discroll (kelas dipasang fx.js hanya untuk elemen di bawah layar) */
.rv { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv:not(.on) { opacity: 0; transform: translateY(22px); }

/* =====================================================================
   01 LOADING GEAR — kartu loot (pita warna tanpa kata) + loading bar bersegmen
   ===================================================================== */
.gear { display: grid; gap: 16px; }
@media (min-width: 860px) { .gear { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gear .card { background: linear-gradient(160deg, #ff8a91 0%, var(--red-hot) 18%, #5a1820 42%, #9a9daa 66%, var(--red) 100%); }
.gear .card > .in { display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
/* pita rarity: ornamen warna saja (tanpa kata, bukan klaim kualitas) */
.gear .card > .in::before { content: ''; flex: none; height: 8px; margin: -16px -16px 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 6px) right 14px center / 46px 4px no-repeat,
    linear-gradient(90deg, rgba(255, 70, 85, .95), rgba(143, 21, 32, .75) 55%, rgba(143, 21, 32, 0)); }
@media (min-width: 480px) { .gear .card > .in::before { margin: -24px -24px 0; } }
.gear-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 359px) { .gear-top { flex-wrap: wrap; } .gear-no { white-space: nowrap; } }
.gear-no { display: inline-flex; align-items: center; gap: 9px; font-family: var(--hud); font-weight: 700; font-size: 12px; letter-spacing: .18em; color: var(--silver); }
.gear-no::before { content: ''; width: 14px; height: 14px; background: linear-gradient(135deg, var(--red-hot), var(--red-deep)); clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.chip { font-family: var(--hud); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; color: var(--red-glow); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--red); background: rgba(239, 51, 64, .1); }
.chip.dim { box-shadow: inset 0 0 0 1px var(--line); color: var(--mute-2); }
.gear h3 { margin: 0; font-style: italic; font-weight: 900; font-stretch: 120%; font-size: 27px; text-transform: uppercase; line-height: 1; }
.gear p { margin: 0; color: var(--mute); font-size: 15px; }
.gear .art { position: relative; isolation: isolate; height: 146px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 62%, rgba(239, 51, 64, .36), transparent 70%), repeating-linear-gradient(135deg, #121217 0 10px, #0e0e12 10px 20px);
  box-shadow: inset 0 0 0 1px #2a1418;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.gear .art::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 58%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 90, 100, 0) 0deg, rgba(255, 90, 100, .3) 5deg, rgba(255, 90, 100, 0) 10deg, rgba(255, 90, 100, 0) 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 80%); mask-image: radial-gradient(closest-side, #000 10%, transparent 80%);
  animation: spin 60s linear infinite; }
.gear .art::after { content: ''; position: absolute; z-index: -1; left: 50%; bottom: 0; width: 90px; height: 100%; margin-left: -45px;
  background: linear-gradient(90deg, transparent 44%, rgba(255, 220, 224, .5) 50%, transparent 56%), radial-gradient(50% 100% at 50% 100%, rgba(255, 90, 100, .48), transparent 80%);
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent); mask-image: linear-gradient(to top, #000 35%, transparent); }
.gear .art svg { height: 98px; width: auto; animation: bob 3.6s ease-in-out infinite; }
.gear .card:nth-child(2) .art svg { animation-delay: -1.2s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* foil: pita kilau menyapu kartu (dipotong oleh .in) */
.gear .card:not(.locked) > .in::after { content: ''; position: absolute; z-index: 3; top: -5%; bottom: -5%; left: 0; width: 46%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 120, 130, .07) 30%, rgba(255, 255, 255, .15) 50%, rgba(205, 212, 230, .08) 70%, rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-18deg); animation: foil 6.5s ease-in-out 1s infinite; }
.gear .card:nth-child(2) > .in::after { animation-delay: 2.4s; }
@keyframes foil { 0%, 45% { transform: translateX(-130%) skewX(-18deg); } 80%, 100% { transform: translateX(320%) skewX(-18deg); } }
/* item terkunci */
.gear .locked { background: linear-gradient(160deg, #6c6f7a 0%, #2a2a33 40%, #3a3a45 70%, #6c6f7a 100%); }
.gear .locked > .in::before { background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 6px) right 14px center / 46px 4px no-repeat,
    linear-gradient(90deg, rgba(110, 112, 124, .75), rgba(42, 42, 51, .6) 55%, transparent); }
.locked .gear-no::before { background: #4a4a55; }
.locked .art { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px), repeating-linear-gradient(135deg, #111115 0 10px, #0d0d10 10px 20px); box-shadow: inset 0 0 0 1px #24242d; }
.locked .art::before { background: repeating-conic-gradient(from 0deg, rgba(200, 205, 220, 0) 0deg, rgba(200, 205, 220, .1) 5deg, rgba(200, 205, 220, 0) 10deg, rgba(200, 205, 220, 0) 24deg); animation: none; }
.locked .art::after { display: none; }
.gear .locked .art svg { filter: blur(1.5px); opacity: .55; animation: none; }
.locked .chip { color: var(--silver); box-shadow: inset 0 0 0 1px var(--line-2); background: rgba(255, 255, 255, .04); }

/* gambar seri "lab uji" (ilustrasi; teks tidak pernah ada di dalam gambar) */
.gear .art.has-img { height: auto; aspect-ratio: 5 / 3; background: #08080a; box-shadow: inset 0 0 0 1px #2a1418; }
@supports not (aspect-ratio: 1 / 1) { .gear .art.has-img { height: clamp(170px, calc(60vw - 43px), 205px); } }
.gear .art.has-img > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.gear .art.has-img::after { display: none; }
/* sapuan scan tipis, memudar tepat di garis laser gambar; disembunyikan .lite, dijeda .idle */
.gear .art.has-img::before { opacity: 0; z-index: 1; left: 18%; right: 18%; top: 10%; width: auto; height: 22%; margin: 0; border-radius: 0;
  -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 100, .55) 25%, rgba(255, 225, 228, .7) 50%, rgba(255, 90, 100, .55) 75%, transparent) top / 100% 1.5px no-repeat,
    linear-gradient(rgba(255, 70, 85, .12), transparent) top / 100% 18px no-repeat;
  animation: labscan 4.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes labscan { 0% { transform: translateY(0); opacity: 0; } 15%, 80% { opacity: .5; } 100% { transform: translateY(100%); opacity: 0; } }
.gear .card:nth-child(2) .art.has-img::before { animation-delay: -1.6s; }
.locked .art.has-img { box-shadow: inset 0 0 0 1px #24242d; }
.locked .art.has-img::before { animation: labscan 9s linear infinite;
  background: linear-gradient(90deg, transparent 20%, rgba(214, 216, 224, .45) 50%, transparent 80%) top / 100% 1px no-repeat; }
.art-tag, .art-note { position: absolute; z-index: 2; bottom: 9px; font: 600 9.5px/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; }
.art-tag { left: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--silver-2); }
.art-tag::before { content: ''; width: 6px; height: 6px; background: var(--red-hot); }
.locked .art-tag::before { background: #4a4a55; }
.art-note { right: 14px; color: var(--silver-2); letter-spacing: .1em; text-transform: none; }

/* progres tahap: loading bar bersegmen (dihitung fx.js dari .done/.now) + quest log */
.stages { list-style: none; margin: auto 0 0; padding: 12px 0 0; display: grid; gap: 8px; border-top: 1px dashed var(--line); }
.js .stages::before { content: ''; display: block; height: 7px; margin-bottom: 4px;
  background: linear-gradient(90deg, var(--red-hot), var(--red) calc(var(--p, 0) * 100%), #23232b 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--n, 5) - 3px), transparent 0 calc(100% / var(--n, 5)));
  mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--n, 5) - 3px), transparent 0 calc(100% / var(--n, 5))); }
.stages li { position: relative; display: flex; gap: 12px; align-items: center; font-family: var(--hud); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute-2); }
.stages li::before { content: ''; flex: none; width: 11px; height: 11px; margin-left: 2px; border: 1.5px solid #4a4a55; transform: rotate(45deg); }
.stages li.done { color: var(--mute); }
.stages li.done::before { background: var(--silver); border-color: var(--silver); }
.stages li.now { color: #fff; }
.stages li.now::before { background: var(--red-hot); border-color: var(--red-hot); box-shadow: 0 0 10px 1px rgba(255, 70, 85, .9); }
.stages li.now::after { content: ''; position: absolute; left: -3px; top: 50%; width: 21px; height: 21px; margin-top: -10.5px; border: 1.5px solid var(--red-hot); transform: rotate(45deg);
  animation: nodeping 1.6s ease-out infinite; }
@keyframes nodeping { 0% { opacity: .9; transform: rotate(45deg) scale(.5); } 100% { opacity: 0; transform: rotate(45deg) scale(1.3); } }
.stages li em { font-style: normal; color: var(--red-glow); margin-left: -4px; }

/* =====================================================================
   02 REQUEST GEAR — slot loadout 0/3 + tile item
   ===================================================================== */
.req-hud { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 700 11.5px/1 var(--hud); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.req-hud .pips { display: inline-flex; gap: 4px; margin-left: auto; }
.req-hud .pips i { width: 18px; height: 8px; background: #26262f; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); transition: background-color .2s; }
.req-hud[data-n='1'] .pips i:nth-child(-n+1), .req-hud[data-n='2'] .pips i:nth-child(-n+2), .req-hud[data-n='3'] .pips i { background: var(--red-hot); }
.req-hud b { color: #fff; min-width: 3ch; text-align: right; }
.req-chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-bottom: 18px; }
@media (min-width: 720px) { .req-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.req-chips button { display: flex; align-items: center; gap: 8px; text-align: left; font-size: 13px; line-height: 1.25; padding: 11px 10px; min-height: 50px; }
.req-chips button::before { content: '+'; flex: none; display: grid; place-items: center; width: 20px; height: 20px; font-family: var(--hud); font-weight: 700; font-size: 14px; color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--line-2); }
.req-chips button[aria-pressed='true']::before { content: '✓'; color: #fff; background: var(--red-hot); box-shadow: 0 0 10px rgba(255, 70, 85, .8); }
.req-other { display: block; width: 100%; margin-bottom: 16px; background: #09090c; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--white); padding: 13px 14px;
  font-family: var(--display); font-size: 16px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.req-other:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--red-hot), inset 0 0 18px rgba(239, 51, 64, .2); }
.req-top { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }
.req-top[hidden] { display: none; }
.bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.bars li { display: grid; gap: 6px; }
.bars .row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--hud); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.bars .row b { color: var(--red-glow); }
.bars .track { position: relative; height: 10px; background: #15151b; box-shadow: inset 0 0 0 1px #24242d; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.bars .fill { position: relative; height: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red-hot)); transform-origin: left; animation: barin .9s var(--ease) both;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.bars .fill::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(6, 6, 8, .55) 9px 11px); }
@keyframes barin { from { transform: scaleX(0); } }

/* =====================================================================
   03 PATCH NOTES — jalur season
   ===================================================================== */
.patch { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.patch::before { content: ''; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--red-hot), var(--red-deep) 60%, var(--line) 85%, transparent); }
.patch li { position: relative; padding: 0 0 26px 42px; }
.patch li::before { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; background: var(--bg); border: 2px solid var(--red); transform: rotate(45deg) scale(.68); }
.patch li.here { margin: 0 0 22px; padding: 14px 14px 16px 42px;
  background: linear-gradient(100deg, rgba(239, 51, 64, .18), rgba(239, 51, 64, .03) 70%); box-shadow: inset 2px 0 0 var(--red-hot); }
.patch li.here::before { top: 16px; background: var(--red-hot); border-color: #fff; transform: rotate(45deg) scale(.85); box-shadow: 0 0 14px 2px rgba(255, 70, 85, .7); }
.patch li.here::after { content: ''; position: absolute; left: 3px; top: 16px; width: 22px; height: 22px; border: 2px solid var(--red-hot); transform: rotate(45deg); animation: nodeping 1.8s ease-out infinite; }
.patch li.next { opacity: .72; } /* ≥4.5:1 untuk teks kecil */
.patch li.next::before { border-color: var(--mute-2); border-style: dashed; }
.patch .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--hud); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.patch .ver { color: var(--red-glow); padding: 1px 7px; box-shadow: inset 0 0 0 1px rgba(239, 51, 64, .55); }
.patch .date { color: var(--mute); }
.patch .tag { color: #fff; background: var(--red-hot); padding: 1px 8px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.patch h3 { margin: 7px 0 4px; font-style: italic; font-weight: 800; font-stretch: 115%; font-size: 21px; text-transform: uppercase; line-height: 1.1; }
.patch p { margin: 0; color: var(--mute); max-width: 60ch; }

/* ---------- 04 FAQ (Q01–Q08) ---------- */
.faq { display: grid; gap: 8px; max-width: 820px; counter-reset: q; }
.faq details { counter-increment: q; position: relative; background: linear-gradient(180deg, #131318, #0e0e12); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.faq details[open] { background: linear-gradient(100deg, rgba(239, 51, 64, .12), #0e0e12 60%); box-shadow: inset 2px 0 0 var(--red-hot), inset 0 0 0 1px #3a1a20; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 16px 52px 16px 16px; position: relative; font-weight: 700; font-size: 17px; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: 'Q' counter(q, decimal-leading-zero); content: 'Q' counter(q, decimal-leading-zero) / ''; flex: none; font: 700 11px/1 var(--hud); letter-spacing: .08em; color: var(--red-glow); }
.faq summary::after { content: '+'; position: absolute; right: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; display: grid; place-items: center;
  font-family: var(--hud); font-size: 18px; line-height: 1; color: var(--red-glow); box-shadow: inset 0 0 0 1px rgba(239, 51, 64, .6); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--red-hot); color: #fff; }
.faq details p { margin: 0; padding: 0 18px 18px 50px; color: var(--mute); }

/* ---------- penutup = end card ---------- */
.final { position: relative; isolation: isolate; overflow: hidden; margin: 56px calc(var(--gut) * -1) 0; padding: 140px var(--gut) 48px; text-align: center; }
.final::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); }
.final-fx { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.final-fx > i, .final-fx > img { position: absolute; display: block; }
.final-fx .fx-rays { --rs: 560px; top: 86px; }
.final-fx .fx-glow { top: 86px;
  background: radial-gradient(closest-side, rgba(8, 8, 10, .96) 0 30%, rgba(8, 8, 10, .7) 40%, rgba(239, 51, 64, .26) 54%, rgba(239, 51, 64, .08) 72%, transparent); }
.final-fx img { left: 50%; top: 86px; width: 70px; height: auto; margin: -40px 0 0 -35px; animation: float 4.2s ease-in-out infinite;
  filter: drop-shadow(0 0 1px rgba(255, 238, 240, .95)) drop-shadow(0 0 1px rgba(255, 238, 240, .6)) drop-shadow(0 4px 14px rgba(0, 0, 0, .9)); }
.final h2 { font-size: clamp(30px, 8vw, 56px); }
.final h2 span { color: var(--red-hot); }
.final .cta { display: inline-block; margin-top: 24px; }
.final .btn-primary { width: auto; padding: 18px 40px; }
@media (min-width: 960px) {
  .final { padding-top: 190px; }
  .final-fx .fx-rays { --rs: 860px; top: 112px; }
  .final-fx .fx-glow { top: 112px; width: 440px; height: 440px; margin: -220px 0 0 -220px; }
  .final-fx img { top: 112px; width: 100px; margin: -58px 0 0 -50px; }
}
footer { padding: 28px 0 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font-family: var(--hud); font-size: 12px; letter-spacing: .08em; color: var(--mute-2); text-transform: uppercase;
  border-top: 1px solid var(--line); }
footer a { color: var(--mute); text-decoration: none; }
footer a:hover { color: var(--white); }

/* ---------- bar antrian tipis (muncul setelah kartu form terlewat; diatur fx.js) ---------- */
.qbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 50px; visibility: hidden; transform: translateY(-110%);
  background: rgba(8, 8, 10, .96); border-bottom: 1px solid var(--line); transition: transform .3s var(--ease), visibility .3s; }
.qbar::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: min(46%, 380px); background: linear-gradient(90deg, var(--red), transparent); }
.qbar.show { visibility: visible; transform: none; }
.qbar-in { max-width: 1180px; height: 100%; margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 10px; }
.qbar-in img { width: 22px; height: auto; flex: none; }
.qbar-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 700 10.5px/1.2 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); white-space: nowrap; }
.qbar-t::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red-hot); }
.qbar .btn-primary { --skew: 10px; width: auto; margin-left: auto; flex: none; padding: 10px 18px; font-size: 14px; }
.qbar .btn-primary::after { display: none; }
@media (max-width: 359px) { .qbar-t { display: none; } } /* 320px: label menabrak tombol */

/* ---------- toast (notif achievement) ---------- */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 160%); z-index: 40; width: max-content; max-width: calc(100% - 32px);
  background: linear-gradient(90deg, #2a0b10, #16161c); color: #fff; padding: 12px 18px 12px 16px; box-shadow: inset 3px 0 0 var(--red-hot), inset 0 0 0 1px rgba(239, 51, 64, .45), 0 12px 30px rgba(0, 0, 0, .6);
  font-family: var(--hud); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; visibility: hidden; transition: transform .35s var(--pop), visibility .35s; }
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* ---------- hemat: jeda di luar layar / tab tersembunyi, mode HP lemah (fx.js) ---------- */
.idle, .idle *, .idle::before, .idle::after, .idle *::before, .idle *::after,
.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }
.off .pill i::after, .off .lbl::before { animation-play-state: paused; }
.lite .embers, .lite .drop-shine, .lite .gear .art::before, .lite .slot.on::after { display: none; }
.lite .drop-ring svg, .lite .gear .art svg { animation: none; }

/* ---------- reduced motion: keadaan akhir, tanpa gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .embers, .drop-shine, .drop-burst, .revealed::before, .mf-scan, .pos::after { display: none; }
  .trk { animation: none !important; }
  .rv:not(.on) { opacity: 1; transform: none; }
}

/* ---------- halaman dokumen (privasi, 404, admin) ---------- */
.doc .topbar { margin-bottom: 18px; }
.doc a.pill { text-decoration: none; color: var(--white); }
.doc-h1 { margin: 0 0 18px; font-style: italic; font-weight: 900; font-stretch: 120%; text-transform: uppercase; line-height: 1; font-size: clamp(30px, 7vw, 48px); }
.prose { max-width: 760px; padding-bottom: 40px; }
.prose h2 { font-size: 22px; font-stretch: 115%; margin: 34px 0 10px; }
.prose p, .prose li { color: #cfcfd6; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--white); }
.lost { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.lost .btn-primary { width: auto; padding: 16px 30px; margin-top: 16px; }
.admin { max-width: 980px; padding-bottom: 60px; }
.admin .bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.admin input, .admin select { background: #0b0b0e; border: 1px solid var(--line); color: var(--white); padding: 11px 12px; font-family: var(--hud); font-size: 14px; }
.admin input { flex: 1 1 240px; }
.admin .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.admin .kpi { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 14px; }
.admin .kpi div { background: var(--panel); border: 1px solid var(--line); padding: 14px; }
.admin .kpi b { display: block; font-style: italic; font-weight: 900; font-stretch: 120%; font-size: 30px; line-height: 1.1; }
.admin .kpi span { font-family: var(--hud); font-size: 11px; letter-spacing: .12em; color: var(--mute); text-transform: uppercase; }
.admin table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); font-family: var(--hud); font-size: 13px; }
.admin caption { text-align: left; padding: 0 0 6px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-size: 12px; }
.admin th, .admin td { padding: 7px 10px; border-bottom: 1px solid #1f1f26; text-align: left; }
.admin td:last-child, .admin th:last-child { text-align: right; }
.admin .msg { min-height: 1.4em; color: var(--mute); font-family: var(--hud); font-size: 13px; }
.admin h2 { font-size: 20px; margin: 30px 0 12px; }

/* ---------- cerita & siapa jess ---------- */
.story { display: grid; gap: 14px; }
@media (min-width: 900px) { .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.story-body p, .story-lead, .story-end { margin: 0 0 12px; color: #d4d4db; font-size: 15.5px; line-height: 1.6; }
.story-body p:last-child { margin-bottom: 0; }
.story-body strong, .story-end { color: var(--white); }
.story-end { margin: 14px 0 0; font-weight: 700; }
.creds { list-style: none; counter-reset: cr; margin: 0; padding: 0; display: grid; gap: 8px; }
.creds li { counter-increment: cr; position: relative; padding: 10px 12px 10px 46px; background: rgba(255, 255, 255, .025); border: 1px solid #23232b;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.creds li::before { content: counter(cr, decimal-leading-zero); position: absolute; left: 12px; top: 10px; font-family: var(--hud); font-weight: 700; font-size: 13px; color: var(--red-hot); letter-spacing: .06em; }
.creds b { display: block; font-size: 15px; line-height: 1.35; color: var(--white); }
.creds span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--mute); line-height: 1.5; }
footer .disclaim { flex-basis: 100%; margin: 6px 0 0; font-family: var(--display); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--mute-2); line-height: 1.5; max-width: 90ch; }

/* nama founder (pengganti tanda tangan sampai launch) */
.sig-name { position: relative; display: inline-block; padding-bottom: 6px; font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 118%;
  font-size: 24px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.sig-name::after { content: ''; position: absolute; left: 2px; right: 18%; bottom: 0; height: 3px; background: var(--red); transform: skewX(-30deg); }
@media (min-width: 960px) { .sig-name { font-size: 28px; } }

/* galeri bukti di kartu Siapa Jess: geser di HP, 4 kolom di desktop */
.proof { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px; margin: 0 -2px 2px; padding: 2px 2px 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--red) transparent; }
.proof figure { margin: 0; scroll-snap-align: start; position: relative; background: #0d0d11; border: 1px solid #2a2a33;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.proof img { display: block; width: 100%; height: auto; aspect-ratio: 349 / 371; object-fit: cover; }
.proof figcaption { padding: 8px 10px 9px; font-family: var(--hud); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--white);
  border-top: 2px solid var(--red); }
@media (min-width: 560px) { .proof { grid-auto-columns: 40%; } }
@media (min-width: 900px) { .proof { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; overflow: visible; }
  .proof figcaption { font-size: 12.5px; padding: 10px 12px 11px; } }

/* pilih lane sendiri untuk Squad 5 */
.lane-pick { margin: 0 0 12px; }
.lane-label { margin: 0 0 7px; font-family: var(--hud); font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); }
.lane-pick.picked .lane-label { color: var(--mute); }
.lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; }
.lanes button { padding: 8px 2px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* blok "Cara aku riset & nguji" di seksi 01 */
.method { margin: 0 0 16px; }
.method-end { margin: 12px 0 0; color: var(--white); font-weight: 700; font-size: 14.5px; line-height: 1.5; }
/* tombol toko resmi di FAQ (warna aksen tiap marketplace; logo resmi bisa menggantikan ikon tas) */
.stores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 2px; }
.store { --c: #fe2c55; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; text-align: center; text-decoration: none;
  color: var(--white); background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); border: 1px solid #2a2a33; border-radius: 4px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.store--tiktokshop { --c: #fe2c55; } .store--tokopedia { --c: #42b549; } .store--shopee { --c: #ee4d2d; }
.store-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--c); box-shadow: 0 4px 14px -4px var(--c); }
.store--tiktokshop .store-ic { background: #111; box-shadow: inset 2px 0 0 #25f4ee, inset -2px 0 0 #fe2c55, 0 4px 14px -4px #fe2c55; }
.store-ic svg { width: 21px; height: 21px; fill: #fff; }
.store--tiktokshop .store-ic svg { filter: drop-shadow(-1.4px -1px 0 #25f4ee) drop-shadow(1.4px 1px 0 #fe2c55); }
.store-ic--wide { width: 100%; max-width: 96px; }
.store-ic--wide svg { width: 76px; height: 17px; }
.store-name { font-weight: 800; font-size: 13px; line-height: 1.2; }
.store-state { font-family: var(--hud); font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-2); }
.store.is-live { border-color: var(--c); cursor: pointer; }
.store.is-live .store-state { color: var(--c); }
.store.is-live:hover, .store.is-live:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px -10px var(--c); }
.store[aria-disabled="true"] { cursor: default; }
/* Siapa Jess: galeri di atas daftar + ikon tiap poin */
.story .card .proof { margin: 4px 0 14px; }
@media (min-width: 900px) { .story .card .proof { grid-column: auto; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 46%; overflow-x: auto; gap: 10px; } }
.creds li[data-ic] { padding-right: 58px; }
.creds li[data-ic]::after { content: ''; position: absolute; right: 12px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 9px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 70, 85, .22), rgba(255, 70, 85, .06) 70%); box-shadow: inset 0 0 0 1px rgba(255, 70, 85, .35); }
.creds li[data-ic]::before { z-index: 1; }
.creds li[data-ic] > b::after { content: ''; position: absolute; right: 19px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--red-hot);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.creds li[data-ic="pad"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12a4 4 0 0 1 4 4v3a3 3 0 0 1-5.3 1.9L15 15H9l-1.7 1.9A3 3 0 0 1 2 15v-3a4 4 0 0 1 4-4ZM7 10.5v3M5.5 12h3M16 11h.01M18 13h.01'/%3E%3C/svg%3E"); }
.creds li[data-ic="crown"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5L3 8Z'/%3E%3C/svg%3E"); }
.creds li[data-ic="medal"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l-2.5 6h-3L8 3ZM12 21a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z'/%3E%3C/svg%3E"); }
.creds li[data-ic="trophy"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4ZM7 6H4a3 3 0 0 0 3 4M17 6h3a3 3 0 0 1-3 4M12 14v4M8 21h8'/%3E%3C/svg%3E"); }
.creds li[data-ic="play"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7ZM10 8.5v7l6-3.5-6-3.5Z'/%3E%3C/svg%3E"); }
/* foto masa kecil di kartu "Kenapa aku racik" */
.story-photo { position: relative; margin: 0 0 14px; background: #0d0d11; border: 1px solid #2a2a33; overflow: hidden; }
.story-photo img { display: block; width: 100%; height: auto; }
.story-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px; font-family: var(--hud); font-weight: 700; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--white); background: linear-gradient(transparent, rgba(8, 8, 10, .88)); }
.store--tokopedia .store-ic { background: #fff; box-shadow: 0 4px 14px -4px #42b549; }
.store-ic img { display: block; width: 30px; height: 30px; }
.store-credit { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--mute-2); }
/* hero: siapa "aku" (terlihat di layar pertama) */
.byline { display: inline-flex; align-items: center; gap: 12px; margin: 8px auto 0; padding: 4px 18px 4px 4px; border-radius: 999px;
  background: rgba(10, 10, 13, .72); box-shadow: inset 0 0 0 1px rgba(239, 51, 64, .45); text-align: left; }
.byline img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--red), 0 0 16px rgba(239, 51, 64, .55); }
.byline span { display: flex; flex-direction: column; line-height: 1.15; }
.byline b { font-style: italic; font-weight: 900; font-stretch: 120%; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; color: var(--white); }
.byline small { font-family: var(--hud); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-2); }
/* perbaikan review pra-rilis */
.share .btn[hidden] { display: none; }
.share.no-native #shareCopy { grid-column: 1 / -1; }
.err.ok { color: var(--ok); }
/* admin: tabel detail lebar */
.scrollx { overflow-x: auto; }
.scrollx table { min-width: 1100px; }
.admin .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mute); }
/* pop-up persetujuan (bottom sheet di HP, kartu di tengah di desktop) */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(4, 4, 6, .72); }
.sheet-card { position: relative; width: 100%; max-width: 460px; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); background: #121216;
  border: 1px solid rgba(239, 51, 64, .55); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(239, 51, 64, .25);
  animation: sheetUp .28s var(--ease) both; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) { .sheet { align-items: center; } .sheet-card { border-bottom: 1px solid rgba(239, 51, 64, .55); border-radius: 16px; } }
.sheet-kicker { margin: 0 0 6px; font-family: var(--hud); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--red-hot); }
.sheet-card h3 { margin: 0; font-style: italic; font-weight: 900; font-stretch: 115%; font-size: 21px; line-height: 1.15; text-transform: uppercase; color: var(--white); }
.sheet-num { margin: 8px 0 10px; font-family: var(--hud); font-weight: 700; font-size: 20px; letter-spacing: .06em; color: var(--white); }
.sheet-text { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--mute); }
.sheet-text a { color: var(--white); }
.sheet-ok { width: 100%; justify-content: center; padding: 16px 12px; font-size: 17px; }
.sheet-no { display: block; width: 100%; margin: 10px 0 0; padding: 10px; background: none; border: 0; color: var(--mute); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.sheet-u18 { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--mute-2); text-align: center; }
body.sheet-open { overflow: hidden; }