/* ============================================================
   AIBIO — "Pilot" (TASK-012, v0.99.170; dasar TASK-011 "Gold Mine")
   Gaya game kartun: ruang server navy, panel logam berpaku, neon cyan, koin emas, tombol oranye 3D, robot Pilot + mesin GPU.
   Nama kelas .gm-* dipertahankan (gm = game) — .gm-wood kini = panel logam.
   Dipakai landing (/) dan auth (/auth). Spasi skala 4·8·12·16·24·32·48·64·96, font 12·14·16·20·24·32·40 (+ clamp hero).
   AI-ANCHOR: CSS_GM_TOKENS
   ============================================================ */
:root {
	--gm-bg: #0b1024;
	--gm-bg2: #151d42;
	--gm-slot: #0a0f26;
	--gm-line: #0b1024;
	--gm-wood: #26315e;
	--gm-wood-l: #34427a;
	--gm-wood-d: #0a0f26;
	--gm-cyan: #5ef0ff;
	--gm-gold: #ffc933;
	--gm-gold-l: #ffe487;
	--gm-gold-d: #e89200;
	--gm-cream: #eef3ff;
	--gm-mut: #b4c2e6;
	--gm-dim: #97a6d1;
	--gm-green: #86e85c;
	--gm-orange: #ff9a1f;
	--gm-orange-d: #b04c00;
	--gm-blue: #3f73c0;
	--gm-r1: 12px;
	--gm-r2: 16px;
	--gm-r3: 24px;
	--gm-f-title: "Lilita One", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
	--gm-f-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
	color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.gm {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background:
		radial-gradient(60% 40% at 50% 0%, rgba(94, 240, 255, .10), transparent 70%),
		radial-gradient(40% 30% at 0% 60%, rgba(167, 139, 250, .14), transparent 70%),
		radial-gradient(40% 30% at 100% 90%, rgba(255, 201, 51, .08), transparent 70%),
		var(--gm-bg);
	color: var(--gm-cream);
	font: 600 16px/1.5 var(--gm-f-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.gm a { color: inherit; }
.gm img, .gm svg { display: block; max-width: 100%; }
.gm .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gm-skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 16px; border-radius: var(--gm-r1); background: var(--gm-gold); color: var(--gm-line); font-weight: 800; }
.gm-skip:focus { top: 16px; }
.gm :focus-visible { outline: 3px solid var(--gm-gold); outline-offset: 3px; }
.gm-num { font-family: var(--gm-f-body); font-weight: 900; font-variant-numeric: tabular-nums; }
.gm-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- AI-ANCHOR: CSS_GM_TOPBAR ---------- */
.gm-top { position: sticky; top: 0; z-index: 40; background: linear-gradient(rgba(11, 16, 36, .96), rgba(11, 16, 36, .84)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 3px solid var(--gm-line); }
.gm-top .gm-wrap { display: flex; align-items: center; gap: 8px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.gm-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-inline-end: auto; text-decoration: none; }
.gm-brand svg { width: 40px; height: 40px; flex: none; }
.gm-brand b { font: 400 24px/1 var(--gm-f-title); letter-spacing: .01em; color: var(--gm-gold); text-shadow: 0 2px 0 var(--gm-line); }
/* TASK-067 (owner #143): wordmark futuristik AiBio.Store (Orbitron bergradien) — semua halaman; /room menambah logo beranimasi (room.css CSS_ROOM_HDBRAND) */
.gm-brand .hd-word { display: inline-flex; align-items: baseline; gap: 4px; font: 900 20px/1 "Orbitron", var(--gm-f-title); letter-spacing: .02em; white-space: nowrap; color: #fff; text-shadow: none; }
.gm-brand .hd-word span { background: linear-gradient(100deg, #5ef0ff 0%, #ffffff 45%, #ffc933 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 6px rgba(94, 240, 255, .45)); }
.gm-brand .hd-word i { color: #c4b5fd; font: 800 12px/1 "Orbitron", var(--gm-f-body); font-style: normal; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 8px rgba(167, 139, 250, .6); }
@media (max-width: 419px) { .gm-brand .hd-word { font-size: 16px; gap: 0; letter-spacing: 0; } .gm-brand .hd-word i { font-size: 10px; letter-spacing: .04em; } }
.gm-top .lang-btn { border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-bg2); color: var(--gm-mut); }

/* ---------- AI-ANCHOR: CSS_GM_BUTTONS — tombol game 3D ---------- */
.gm-btn {
	-webkit-appearance: none; appearance: none;
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 56px; padding: 0 32px;
	border: 3px solid var(--gm-line); border-radius: var(--gm-r2);
	background: linear-gradient(#ffc04d, #ff9a1f 55%, #f07800);
	box-shadow: 0 6px 0 var(--gm-orange-d), 0 10px 20px rgba(0, 0, 0, .35), inset 0 3px 0 rgba(255, 255, 255, .45);
	color: #fff;
	font: 400 20px/1 var(--gm-f-title); letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
	text-shadow: -1.5px -1.5px 0 #8a3a00, 1.5px -1.5px 0 #8a3a00, -1.5px 1.5px 0 #8a3a00, 1.5px 1.5px 0 #8a3a00, 0 3px 0 #8a3a00;
	cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
	transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s cubic-bezier(.22, 1, .36, 1);
}
.gm-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--gm-orange-d), 0 14px 24px rgba(0, 0, 0, .35), inset 0 3px 0 rgba(255, 255, 255, .45); }
.gm-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gm-orange-d), 0 4px 8px rgba(0, 0, 0, .3), inset 0 3px 0 rgba(255, 255, 255, .35); }
.gm-btn[disabled] { filter: grayscale(.5); opacity: .7; cursor: wait; }
.gm-btn svg { width: 24px; height: 24px; flex: none; filter: drop-shadow(0 2px 0 var(--gm-orange-d)); }
.gm-btn.wide { width: 100%; padding: 0 16px; }
.gm-btn.sm { min-height: 44px; padding: 0 16px; font-size: 16px; border-radius: var(--gm-r1); box-shadow: 0 4px 0 var(--gm-orange-d), inset 0 2px 0 rgba(255, 255, 255, .45); }
.gm-btn.sm:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--gm-orange-d), inset 0 2px 0 rgba(255, 255, 255, .35); }
.gm-btn.wood { background: linear-gradient(#3a4a88, #26315e); box-shadow: 0 4px 0 var(--gm-wood-d), inset 0 2px 0 rgba(255, 255, 255, .25); text-shadow: -1px -1px 0 var(--gm-line), 1px -1px 0 var(--gm-line), -1px 1px 0 var(--gm-line), 1px 1px 0 var(--gm-line), 0 2px 0 var(--gm-line); }
.gm-btn.wood:active { box-shadow: 0 2px 0 var(--gm-wood-d), inset 0 2px 0 rgba(255, 255, 255, .2); }
.gm-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--gm-mut); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.gm-link:hover { color: var(--gm-gold); }

/* ---------- AI-ANCHOR: CSS_GM_PANELS — papan kayu + slot gelap ---------- */
.gm-wood {
	position: relative;
	padding: 12px;
	border: 3px solid var(--gm-line); border-radius: var(--gm-r3);
	background: linear-gradient(#2e3b72, #222c5a 45%, #1a2350);
	box-shadow: 0 8px 0 var(--gm-wood-d), 0 16px 32px rgba(0, 0, 0, .45), inset 0 3px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(94, 240, 255, .12);
}
.gm-wood::before, .gm-wood::after { content: ""; position: absolute; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #5a6aa0; box-shadow: inset 0 -2px 0 var(--gm-line), 0 1px 0 rgba(255, 255, 255, .15); }
.gm-wood::before { left: 8px; }
.gm-wood::after { right: 8px; }
.gm-slot { border: 3px solid var(--gm-line); border-radius: var(--gm-r2); background: var(--gm-slot); box-shadow: inset 0 4px 8px rgba(0, 0, 0, .5); }

/* plakat angka (counter emas) */
.gm-plate { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 16px 4px 4px; border: 3px solid var(--gm-line); border-radius: 999px; background: linear-gradient(#1b2446, #0d1330); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 rgba(0, 0, 0, .4); }
.gm-plate .coin { width: 40px; height: 40px; flex: none; }
.gm-plate .gm-num { min-width: 0; flex: 1; overflow: hidden; color: var(--gm-gold); font-size: 20px; line-height: 1; letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 2px 0 var(--gm-line); }

/* ---------- AI-ANCHOR: CSS_GM_STAGE — layar game (counter + scene + total) ---------- */
.gm-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.gm-stage-top { display: flex; align-items: center; gap: 8px; }
.gm-stage-top .gm-plate { flex: 1; min-width: 0; }
.gm-scene { position: relative; overflow: hidden; aspect-ratio: 360 / 300; }
.gm-scene svg, .gm-scene img { width: 100%; height: 100%; }
.gm-demo { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(10, 15, 38, .8); color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 16px; }
.gm-total { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 4px 16px; border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: linear-gradient(#26315e, #1b2446); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1); font-size: 16px; font-weight: 900; }
.gm-total svg { width: 24px; height: 24px; flex: none; }
.gm-total .up { color: var(--gm-green); text-shadow: 0 2px 0 var(--gm-line); }

/* ---------- AI-ANCHOR: CSS_GM_HERO ---------- */
.gm-hero { padding: 24px 0 48px; }
.gm-hero .gm-wrap { display: grid; gap: 24px; }
.gm-hero .gm-wrap > .gm-stage { margin-bottom: 8px; }
.gm-title { margin: 0; font: 400 clamp(32px, 7.6vw, 64px)/1.1 var(--gm-f-title); letter-spacing: .01em; color: var(--gm-cream); text-shadow: 0 3px 0 var(--gm-line), 0 6px 16px rgba(0, 0, 0, .4); text-wrap: balance; }
.gm-title em { font-style: normal; color: var(--gm-gold); }
.gm-sub { margin: 8px 0 0; max-width: 32em; color: var(--gm-mut); font-size: 16px; font-weight: 700; line-height: 1.5; }
.gm-hero-cta { display: grid; gap: 12px; justify-items: stretch; }
.gm-free { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--gm-gold-l); font-size: 14px; font-weight: 800; }
.gm-free svg { width: 24px; height: 24px; flex: none; }
.gm-have { text-align: center; }

@media (min-width: 900px) {
	.gm-hero { padding: 48px 0 64px; }
	.gm-hero .gm-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head stage" "cta stage"; align-items: center; column-gap: 48px; row-gap: 32px; }
	.gm-hero-head { grid-area: head; align-self: end; }
	.gm-stage { grid-area: stage; }
	.gm-hero-cta { grid-area: cta; align-self: start; }
	.gm-hero-cta { justify-items: start; max-width: 400px; }
	.gm-free { justify-content: flex-start; }
	.gm-have { text-align: start; }
	.gm-sub { font-size: 20px; margin-top: 16px; }
}

/* ---------- AI-ANCHOR: CSS_GM_SECTIONS ---------- */
.gm-sec { padding: 48px 0; }
.gm-h2 { margin: 0 0 24px; font: 400 clamp(24px, 5vw, 40px)/1.15 var(--gm-f-title); text-align: center; color: var(--gm-cream); text-shadow: 0 3px 0 var(--gm-line); text-wrap: balance; }
.gm-h2 small { display: block; margin-top: 8px; font: 700 16px/1.5 var(--gm-f-body); color: var(--gm-mut); text-shadow: none; }

/* 3 langkah */
.gm-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.gm-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px; }
.gm-step .ic { position: relative; width: 64px; height: 64px; }
.gm-step .ic svg { width: 64px; height: 64px; }
.gm-step .ic i { position: absolute; top: -8px; left: -8px; display: grid; place-items: center; width: 24px; height: 24px; border: 3px solid var(--gm-line); border-radius: 50%; background: var(--gm-gold); color: var(--gm-line); font: 900 12px/1 var(--gm-f-body); font-style: normal; }
.gm-step h3 { margin: 0; font: 400 20px/1.2 var(--gm-f-title); color: #fff; text-shadow: -1px -1px 0 var(--gm-line), 1px -1px 0 var(--gm-line), -1px 1px 0 var(--gm-line), 1px 1px 0 var(--gm-line), 0 2px 0 var(--gm-line); letter-spacing: .01em; }
.gm-step p { margin: 4px 0 0; color: var(--gm-cream); font-size: 14px; font-weight: 800; line-height: 1.45; }
@media (min-width: 768px) {
	.gm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gm-step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 24px 16px; }
	.gm-step .ic, .gm-step .ic svg { width: 96px; height: 96px; }
}

/* kalkulator miner */
.gm-calc { max-width: 640px; margin: 0 auto; padding: 16px; }
.gm-calc-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px; }
.gm-calc-card svg { width: 96px; height: 96px; }
.gm-calc-price { margin: 0; color: var(--gm-mut); font-size: 14px; font-weight: 800; }
.gm-calc-price b { display: block; color: var(--gm-gold); font: 400 32px/1.1 var(--gm-f-title); text-shadow: 0 2px 0 var(--gm-line); }
.gm-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.gm-chip { -webkit-appearance: none; appearance: none; transition: transform .18s cubic-bezier(.22, 1, .36, 1), background-color .2s ease; min-height: 48px; padding: 0 4px; border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: linear-gradient(#26315e, #1b2446); box-shadow: 0 3px 0 rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .1); color: var(--gm-mut); font: 900 16px/42px var(--gm-f-body); cursor: pointer; }
.gm-chip:active { transform: translateY(2px); }
.gm-chip[aria-pressed="true"] { background: linear-gradient(var(--gm-gold-l), var(--gm-gold) 60%, var(--gm-gold-d)); color: var(--gm-line); box-shadow: 0 3px 0 #9a5d00, inset 0 2px 0 rgba(255, 255, 255, .6); }
.gm-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gm-out > div { display: grid; gap: 4px; justify-items: center; padding: 16px 8px; text-align: center; }
.gm-out span { color: var(--gm-mut); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.gm-out b { font-size: clamp(24px, 6vw, 32px); line-height: 1.1; color: var(--gm-green); text-shadow: 0 2px 0 var(--gm-line); }
.gm-out .gold b { color: var(--gm-gold); }
.gm-note { margin: 16px 0 0; color: var(--gm-cream); font-size: 14px; font-weight: 800; text-align: center; }

/* crew 5 level */
.gm-crew { max-width: 760px; margin: 0 auto; padding: 16px 8px; }
.gm-crew-bars { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; gap: 4px; height: 232px; padding: 16px 8px 12px; }
@media (min-width: 480px) { .gm-crew-bars { gap: 8px; padding: 16px 12px 12px; } }
.gm-bar { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 4px; height: 100%; }
.gm-bar b { font-size: 12px; color: var(--gm-gold); text-shadow: 0 2px 0 var(--gm-line); }
@media (min-width: 480px) { .gm-bar b { font-size: 14px; } }
.gm-bar .col { align-self: end; width: 100%; max-width: 64px; min-height: 12px; border: 3px solid var(--gm-line); border-radius: 8px 8px 4px 4px; background: linear-gradient(var(--gm-gold-l), var(--gm-gold) 40%, var(--gm-gold-d)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5); transform-origin: bottom; }
.gm-bar span { color: var(--gm-mut); font-size: 12px; font-weight: 900; }
.gm-crew-heads { display: flex; justify-content: center; margin: 16px 0 0; }
.gm-crew-heads svg { width: 48px; height: 48px; margin-inline-start: -12px; }
.gm-crew-heads svg:first-child { margin-inline-start: 0; }

/* CTA akhir */
.gm-final { padding: 48px 0 96px; text-align: center; }
.gm-final .gm-wood { max-width: 560px; margin: 0 auto; padding: 32px 16px; }
.gm-final .chest { width: 128px; height: 128px; margin: -64px auto 8px; filter: drop-shadow(0 8px 16px rgba(255, 201, 51, .35)); }
.gm-final .gm-h2 { margin-bottom: 16px; }
.gm-final .gm-btn { max-width: 400px; }

/* footer */
.gm-foot { padding: 24px 0 96px; border-top: 3px solid var(--gm-line); background: var(--gm-slot); color: var(--gm-dim); font-size: 14px; font-weight: 700; }
.gm-foot .gm-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.gm-foot a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--gm-mut); text-decoration: none; }
.gm-foot a:hover { color: var(--gm-gold); }
@media (min-width: 768px) { .gm-foot { padding-bottom: 24px; } }

/* bar CTA lengket (HP) — muncul setelah tombol hero lewat */
.gm-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(11, 16, 36, 0), rgba(11, 16, 36, .96) 30%); transform: translate3d(0, 110%, 0); transition: transform .45s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.gm-sticky.on { transform: none; pointer-events: auto; }
@media (min-width: 900px) { .gm-sticky { display: none; } }

/* muncul saat discroll */
.gm-rise { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.gm-rise.in { opacity: 1; transform: none; }
.gm-bar .col { transform: scaleY(.05); transition: transform 1s cubic-bezier(.34, 1.3, .64, 1); }
.in .gm-bar .col { transform: none; }
.in .gm-bar:nth-child(2) .col { transition-delay: .08s; }
.in .gm-bar:nth-child(3) .col { transition-delay: .16s; }
.in .gm-bar:nth-child(4) .col { transition-delay: .24s; }
.in .gm-bar:nth-child(5) .col { transition-delay: .32s; }
.gm-bob { animation: gm-bob 3s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform; }
@keyframes gm-bob { 50% { transform: translate3d(0, -6px, 0) rotate(-2deg); } }
.gm-paused .gm-bob, .gm-bob.paused { animation-play-state: paused; }
.no-js .gm-rise { opacity: 1; transform: none; }
.no-js .gm-bar .col { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.gm-rise, .gm-bar .col { opacity: 1; transform: none; transition: none; }
	.gm-bob { animation: none; }
	.gm-btn, .gm-sticky { transition: none; }
}
@media (max-width: 359px) {
	.gm-brand { min-width: 44px; }
	.gm-brand b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* TASK-070: bahasa dengan tombol Login panjang (de, fr, pl …) — wordmark disembunyikan bila header tidak muat (kelas .tight dari mine.js topFit) */
.gm-top.tight .gm-brand { min-width: 44px; }
.gm-top.tight .gm-brand b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gm-top.tighter .gm-wrap > .gm-btn.sm { padding: 0 12px; font-size: 14px; letter-spacing: 0; }
.gm-top.tighter .lang-btn { gap: 4px; padding: 0 8px; }
.gm-top.tighter .lang-btn > b { display: none; }

/* ---------- AI-ANCHOR: CSS_PL_CATALOG — TASK-012 katalog mesin (anchor: termahal dulu, lencana, profit besar) ---------- */
.pl-cat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .pl-cat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pl-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 8px 12px; text-align: center; text-decoration: none; color: inherit;
	border: 3px solid var(--gm-line); border-radius: var(--gm-r3); background: linear-gradient(#26315e, #151d42);
	box-shadow: 0 6px 0 var(--gm-wood-d), inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--tcg);
	transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s cubic-bezier(.22, 1, .36, 1); }
.pl-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--gm-wood-d), 0 0 24px var(--tcg), inset 0 2px 0 rgba(255, 255, 255, .1); }
.pl-card:active { transform: translateY(2px); }
.pl-art { position: relative; width: 96px; height: 96px; }
.pl-art::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(closest-side, var(--tcg), transparent); }
.pl-art img { position: relative; width: 96px; height: 96px; }
.pl-tier { font: 400 20px/1.2 var(--gm-f-title); color: var(--tc); text-shadow: 0 2px 0 var(--gm-line); letter-spacing: .01em; }
.pl-kind { color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 16px; }
.pl-price { font-size: 24px; line-height: 1.1; color: #fff; text-shadow: 0 2px 0 var(--gm-line); margin-top: 4px; }
.pl-rate { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(94, 240, 255, .12); color: var(--gm-cyan); font-size: 12px; font-weight: 900; }
.pl-profit { color: var(--gm-green); font-size: 16px; line-height: 1.45; text-shadow: 0 2px 0 var(--gm-line); }
.pl-profit small { display: block; color: var(--gm-dim); font: 800 12px/16px var(--gm-f-body); text-shadow: none; }
.pl-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 8px; border: 2px solid var(--gm-line); border-radius: 999px; background: var(--gm-gold); color: var(--gm-line); font-size: 12px; font-weight: 900; line-height: 16px; white-space: nowrap; }
.pl-badge.best { background: var(--gm-green); }
.pl-perks { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .pl-perks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pl-perks li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px 8px 8px; border: 3px solid var(--gm-line); border-radius: var(--gm-r2); background: linear-gradient(#26315e, #1b2446); font-size: 14px; font-weight: 800; line-height: 1.45; }
.pl-perks b { display: block; color: var(--gm-gold); font: 400 20px/1.2 var(--gm-f-title); text-shadow: 0 2px 0 var(--gm-line); }
.pl-perks svg, .pl-perks img { width: 48px; height: 48px; flex: none; }
.gm-step .ic img { width: 64px; height: 64px; }
@media (min-width: 768px) { .gm-step .ic img { width: 96px; height: 96px; } }
.gm-bar span.need { display: block; color: var(--gm-dim); font-size: 12px; font-weight: 800; }
.gm-final .chest { display: block; }

/* ---------- AI-ANCHOR: CSS_PL_PAY — TASK-013 strip koin + 2 gateway (Bitcart / PayKassa) ---------- */
.pl-strip { position: relative; overflow: hidden; padding: 12px 0; border-block: 3px solid var(--gm-line); background: linear-gradient(90deg, rgba(94, 240, 255, .06), rgba(167, 139, 250, .08), rgba(94, 240, 255, .06));
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.pl-strip-track { display: flex; gap: 32px; width: max-content; animation: pl-marquee 48s linear infinite; }
.pl-strip-track span { display: inline-flex; align-items: center; gap: 8px; color: var(--gm-mut); font-size: 14px; font-weight: 900; white-space: nowrap; }
.pl-strip-track img { width: 32px; height: 32px; }
@keyframes pl-marquee { to { transform: translate3d(-50%, 0, 0); } }
.pl-pay { display: grid; gap: 24px; }
@media (min-width: 900px) { .pl-pay { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: stretch; } }
.pl-gate { display: grid; align-content: start; gap: 16px; padding: 24px 16px 16px; }
.pl-gate-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pl-gate-h b { font: 400 24px/1.2 var(--gm-f-title); color: #fff; text-shadow: 0 2px 0 var(--gm-line); }
.pl-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 2px solid var(--gm-line); border-radius: 999px; background: #1b2446; color: var(--gm-cyan); font-size: 12px; font-weight: 900; line-height: 1.25; }
.pl-chip.hot { background: var(--gm-green); color: var(--gm-line); }
.pl-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pl-coin-big { display: grid; justify-items: center; gap: 4px; padding: 16px 8px; border: 3px solid var(--gm-line); border-radius: var(--gm-r2); background: var(--gm-slot); text-align: center; }
.pl-coin-big img { width: 72px; height: 72px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.pl-coin-big b { font: 400 20px/1.2 var(--gm-f-title); color: #fff; }
.pl-coin-big span { color: var(--gm-green); font-size: 16px; }
.pl-coin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 480px) { .pl-coin-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.pl-coin-grid li { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 2px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-slot); }
.pl-coin-grid img { width: 40px; height: 40px; }
.pl-coin-grid span { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; }

/* ---------- AI-ANCHOR: CSS_PL_SOCIAL — TASK-013 orbit ikon sosmed ---------- */
.pl-soc { display: grid; gap: 32px; align-items: center; overflow: hidden; overflow: clip; overflow-clip-margin: 8px; }
@media (min-width: 900px) { .pl-soc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } .pl-soc .gm-h2 { text-align: start; } }
.pl-orbit { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin: 0 auto; }
.pl-orbit::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(94, 240, 255, .22), transparent); }
.pl-ring { position: absolute; inset: 0; border-radius: 50%; }
.pl-ring.r1 { inset: 20%; border: 2px dashed rgba(94, 240, 255, .28); animation: pl-spin 36s linear infinite; }
.pl-ring.r2 { inset: 2%; border: 2px dashed rgba(167, 139, 250, .24); animation: pl-spin 56s linear infinite reverse; }
.pl-ico { position: absolute; width: 44px; height: 44px; translate: -50% -50%; }
.pl-ico i { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--gm-line); border-radius: 50%; background: linear-gradient(#26315e, #141b36); box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(94, 240, 255, .15); }
.pl-ico svg { width: 24px; height: 24px; }
.r1 .pl-ico i { animation: pl-spin 36s linear infinite reverse; }
.r2 .pl-ico i { animation: pl-spin 56s linear infinite; }
.pl-core { position: absolute; left: 32%; right: 32%; top: 30%; }
.pl-core img { width: 100%; height: auto; filter: drop-shadow(0 12px 24px rgba(94, 240, 255, .25)); }
@keyframes pl-spin { to { transform: rotate(360deg); } }
.pl-soc-pts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pl-soc-pts li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px 8px 8px; border: 3px solid var(--gm-line); border-radius: var(--gm-r2); background: linear-gradient(#26315e, #1b2446); font-size: 16px; font-weight: 800; line-height: 1.45; }
.pl-soc-pts svg, .pl-soc-pts img { width: 32px; height: 32px; flex: none; }

/* ---------- AI-ANCHOR: CSS_PL_LIVE — TASK-013 motion halus "hidup": hanya transform/opacity, jalan saat section terlihat ----------
   .lv = elemen bergerak (default PAUSE) · [data-live].vis = section di layar → jalan · html.gm-hidden (tab tersembunyi) → pause semua */
.lv-float { animation: lv-float 4.2s cubic-bezier(.45, 0, .55, 1) var(--d, 0s) infinite; will-change: transform; }
@keyframes lv-float { 50% { transform: translate3d(0, -6px, 0); } }
.lv-spin { animation: lv-coin 6s cubic-bezier(.45, 0, .55, 1) infinite; transform-origin: 50% 50%; }
@keyframes lv-coin { 0%, 70%, 100% { transform: none; } 80% { transform: scaleX(.15); } 90% { transform: scaleX(1); } }
.lv-logo { animation: lv-logo 5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes lv-logo { 50% { transform: rotate(-4deg) scale(1.04); } }
.lv-wiggle { animation: lv-wiggle 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes lv-wiggle { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-10deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } }
.lv-sheen { overflow: hidden; }
.lv-sheen::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: translate3d(-160%, 0, 0) skewX(-18deg); animation: lv-sheen 3.6s cubic-bezier(.45, 0, .55, 1) 1s infinite; pointer-events: none; }
@keyframes lv-sheen { 0% { transform: translate3d(-160%, 0, 0) skewX(-18deg); } 45%, 100% { transform: translate3d(360%, 0, 0) skewX(-18deg); } }
.pl-art.lv::before { animation: lv-breathe 3.6s cubic-bezier(.45, 0, .55, 1) var(--d, 0s) infinite; }
@keyframes lv-breathe { 50% { opacity: .45; transform: scale(.92); } }
/* status jalan/berhenti — !important supaya shorthand `animation:` di atas tidak menimpanya */
[data-live] .lv, [data-live] .lv::before, [data-live] .lv-sheen::after, [data-live] .pl-ico i { animation-play-state: paused !important; }
[data-live].vis .lv, [data-live].vis .lv::before, [data-live].vis .lv-sheen::after, [data-live].vis .pl-ico i { animation-play-state: running !important; }
html.gm-hidden [data-live].vis .lv, html.gm-hidden [data-live].vis .lv::before, html.gm-hidden [data-live].vis .lv-sheen::after, html.gm-hidden [data-live].vis .pl-ico i { animation-play-state: paused !important; }
.no-js .lv { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.lv, .lv::before, .lv-sheen::after, .pl-ring, .pl-ico i, .pl-strip-track { animation: none !important; }
}
button.gm-link { -webkit-appearance: none; appearance: none; border: 0; background: none; font-family: inherit; font-size: inherit; cursor: pointer; }
@media (min-width: 1100px) { .gm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gm-step .ic > svg { width: 64px; height: 64px; }
@media (min-width: 768px) { .gm-step .ic > svg { width: 96px; height: 96px; } }
.gm-crew-note { margin: 12px 0 0; color: var(--gm-mut); font-size: 14px; font-weight: 800; line-height: 1.45; text-align: center; }

/* ---------- AI-ANCHOR: CSS_HK — TASK-016 hook 3 detik: panggung coba-tanpa-daftar, langkah 1 baris, strip ganda, carousel ---------- */
.hk { padding: 16px 0 24px; }
.hk-wrap { display: grid; gap: 16px; }
@media (min-width: 900px) {
	.hk { padding: 48px 0; }
	.hk-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head stage" "cta stage"; align-items: center; column-gap: 48px; row-gap: 24px; }
	.hk-head { grid-area: head; align-self: end; } .hk-stage { grid-area: stage; } .hk-cta { grid-area: cta; align-self: start; }
}
.hk-head .gm-sub { margin-top: 8px; color: var(--gm-cyan); font-weight: 900; }
.hk-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
.hk-stage .gm-plate { padding-inline-end: 12px; }
/* owner #37: layar kecil — label di atas angka supaya saldo $1,000.0000 tidak terpotong */
@media (max-width: 479px) { .hk-stage .gm-plate { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; row-gap: 0; padding-block: 4px; }
	.hk-stage .gm-plate .coin { grid-row: 1 / 3; } .hk-stage .gm-plate .hk-k { font-size: 12px; line-height: 16px; } .hk-stage .gm-plate .gm-num { text-overflow: clip; } }
.hk-rate { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 4px 8px; border: 2px solid var(--gm-line); border-radius: 999px; background: rgba(10, 15, 38, .85); color: var(--gm-green); font-size: 14px; line-height: 20px; text-shadow: 0 2px 0 var(--gm-line); }
.hk-room { position: relative; display: flex; align-items: flex-end; gap: 8px; min-height: 160px; padding: 48px 12px 32px; overflow: hidden;
	background: radial-gradient(80% 60% at 50% 100%, rgba(94, 240, 255, .16), transparent 70%), linear-gradient(#141b36, #0a0f26); }
.hk-bot { width: 80px; height: 90px; flex: none; filter: drop-shadow(0 8px 16px rgba(94, 240, 255, .25)); }
.hk-slots { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.hk-slots li { display: grid; place-items: center; aspect-ratio: 1; border: 2px dashed rgba(94, 240, 255, .3); border-radius: var(--gm-r1); background: rgba(10, 15, 38, .7); }
.hk-slots li.full { border-style: solid; border-color: rgba(94, 240, 255, .6); }
.hk-slots img { width: 88%; height: 88%; }
.hk-slots li.pop img { animation: hk-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hk-pop { from { transform: scale(.2) translate3d(0, -24px, 0); opacity: 0; } }
.hk-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hk-m { -webkit-appearance: none; appearance: none; position: relative; display: grid; justify-items: center; gap: 4px; min-height: 88px; padding: 8px 4px; border: 3px solid var(--gm-line); border-radius: var(--gm-r2);
	background: linear-gradient(#34427a, #26315e); box-shadow: 0 4px 0 var(--gm-wood-d), inset 0 2px 0 rgba(255, 255, 255, .12); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s cubic-bezier(.22, 1, .36, 1); }
.hk-m:hover { transform: translateY(-2px); }
.hk-m:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gm-wood-d); }
.hk-m img { width: 40px; height: 40px; }
.hk-m b { font-size: 16px; line-height: 1.25; }
.hk-m span { color: var(--gm-green); font-size: 12px; font-weight: 900; line-height: 16px; }
.hk-m.hint { box-shadow: 0 4px 0 var(--gm-wood-d), 0 0 0 3px var(--gm-gold); animation: hk-hint 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hk-hint { 50% { transform: translateY(-4px); } }
.hk-float { position: absolute; left: 50%; top: -8px; translate: -50% 0; color: var(--gm-green); font-size: 14px; white-space: nowrap; text-shadow: 0 2px 0 var(--gm-line); pointer-events: none; animation: hk-up 1.1s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes hk-up { from { opacity: 0; transform: translate3d(0, 8px, 0); } 20% { opacity: 1; } to { opacity: 0; transform: translate3d(0, -32px, 0); } }
.hk-cta { display: grid; gap: 8px; }
.hk-cta .gm-free { justify-content: center; flex-wrap: wrap; color: var(--gm-mut); }
.hk-cta .gm-link { min-height: 44px; padding: 0 4px; color: var(--gm-cream); }
@media (min-width: 900px) { .hk-cta .gm-free { justify-content: flex-start; } }
#hk-go.save, #hk-go2.save { background: linear-gradient(#b6ff6a, #5ee06a 55%, #22a34a); box-shadow: 0 6px 0 #146b30, 0 0 24px rgba(94, 224, 106, .45), inset 0 3px 0 rgba(255, 255, 255, .45); }
.hk-steps-sec { padding: 8px 0 24px; }
.hk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.hk-steps li { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; counter-increment: st; }
.hk-steps .ic { display: grid; place-items: center; width: 64px; height: 64px; border: 3px solid var(--gm-line); border-radius: 50%; background: linear-gradient(#34427a, #1b2446); }
.hk-steps .ic img, .hk-steps .ic svg { width: 40px; height: 40px; }
.hk-steps .ic::after { content: counter(st); position: absolute; top: -4px; left: calc(50% + 16px); display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--gm-line); border-radius: 50%; background: var(--gm-gold); color: var(--gm-line); font: 900 12px/1 var(--gm-f-body); }
.hk-steps b { color: #fff; font-size: 12px; font-weight: 900; line-height: 1.45; }
@media (min-width: 480px) { .hk-steps b { font-size: 14px; line-height: 20px; } }
.hk-steps li + li::before { content: ""; position: absolute; top: 32px; right: calc(50% + 36px); width: calc(100% - 72px); height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(94, 240, 255, .5)); }
.pl-strip.rev .pl-strip-track { animation-direction: reverse; animation-duration: 40s; }
.pl-strip-track span svg { width: 32px; height: 32px; }
.hk-line { margin: 8px 16px 16px; color: var(--gm-mut); font-size: 14px; font-weight: 800; line-height: 1.45; text-align: center; }
/* TASK-017 (owner #29): HP = rail geser dengan gutter 16px + kartu intip + fade kanan (NN/g: batas carousel tidak menempel tepi layar);
   ≥768px = grid 4 kolom di dalam .gm-wrap — tidak ada kartu terpotong. scroll-padding mencegah snap melompati padding. */
.hk-rail { display: flex; gap: 12px; margin: 0 -16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
	padding: 16px 16px 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.hk-rail::-webkit-scrollbar { display: none; }
.hk-rail > li { flex: 0 0 156px; scroll-snap-align: start; }
.hk-rail > li:last-child { margin-right: 16px; }
.hk-rail .pl-card { height: 100%; }
@media (min-width: 768px) {
	.hk-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; margin: 0; padding: 16px 0 8px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
	.hk-rail > li:last-child { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .hk-m.hint, .hk-slots li.pop img, .hk-float { animation: none !important; } }

/* TASK-016 onboarding demo: label saldo, pemandu langkah, tombol nonaktif, efek selesai */
.hk-k { flex: none; color: var(--gm-mut); font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.hk-guide { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 12px; border: 2px solid rgba(94, 240, 255, .35); border-radius: var(--gm-r2); background: rgba(10, 15, 38, .8); }
.hk-guide.in { animation: hk-guide .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes hk-guide { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
.hk-step { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--gm-line); border-radius: 50%; background: var(--gm-cyan); color: var(--gm-line); font-size: 14px; }
.hk-guide p { min-height: 4.35em; margin: 0; color: #fff; font-size: 14px; font-weight: 800; line-height: 1.45; display: flex; align-items: center; } /* 3 baris tetap: tanpa lompatan */
.hk-guide .gm-btn { grid-column: 1 / -1; width: 100%; }
.hk-m[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 2px 0 var(--gm-wood-d); }
.hk-won .hk-room { box-shadow: inset 0 0 0 2px var(--gm-green), 0 0 32px rgba(94, 224, 106, .35); }
.hk-nudge { animation: hk-nudge 1.2s cubic-bezier(.45, 0, .55, 1) 3; }
@keyframes hk-nudge { 50% { transform: translate3d(0, -4px, 0) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .hk-guide.in, .hk-nudge { animation: none !important; } }

/* ---------- AI-ANCHOR: CSS_HK_COACH — TASK-016 tutorial: jari animasi + gelembung penjelasan + sorot target ---------- */
.hk-finger { position: absolute; left: 0; top: 0; z-index: 60; width: 48px; height: 56px; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.hk-finger.on { opacity: 1; }
.hk-finger svg { width: 48px; height: 56px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); animation: hk-tap 1.5s cubic-bezier(.45, 0, .55, 1) infinite; transform-origin: 40% 20%; }
.hk-finger .ring { position: absolute; left: 12px; top: -4px; width: 24px; height: 24px; margin: 0; border: 3px solid var(--gm-gold); border-radius: 50%; opacity: 0; animation: hk-ring 1.5s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes hk-tap { 0%, 100% { transform: translate3d(8px, 12px, 0) rotate(-12deg); } 45% { transform: translate3d(0, 0, 0) rotate(-12deg) scale(.92); } 55% { transform: translate3d(0, 0, 0) rotate(-12deg) scale(.92); } }
@keyframes hk-ring { 0%, 40% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
.hk-tip { position: absolute; left: 0; top: 0; z-index: 61; padding: 8px 12px; border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-gold); color: var(--gm-line); font-size: 14px; font-weight: 900; line-height: 1.45;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.hk-tip.on { opacity: 1; }
.hk-focus { position: relative; z-index: 2; box-shadow: 0 0 0 3px var(--gm-gold), 0 0 24px rgba(255, 201, 51, .45) !important; }
@media (prefers-reduced-motion: reduce) { .hk-finger svg, .hk-finger .ring { animation: none; } .hk-finger, .hk-tip { transition: none; } }
[hidden] { display: none !important; }

/* ---------- AI-ANCHOR: CSS_LP_FAQ — TASK-017: 3 keberatan teratas tepat sebelum CTA akhir. <details> native (tanpa JS), target sentuh ≥ 56px ---------- */
.lp-faq-sec { padding-bottom: 0; }
.lp-faq { display: grid; gap: 12px; max-width: 720px; margin: 0 auto; }
.lp-faq details { border: 3px solid var(--gm-line); border-radius: var(--gm-r2); background: linear-gradient(#26315e, #1b2446); box-shadow: 0 4px 0 var(--gm-wood-d), inset 0 2px 0 rgba(255, 255, 255, .08); }
.lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 16px; color: #fff; font-size: 16px; font-weight: 900; line-height: 1.25; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-top: -4px; border: solid var(--gm-gold); border-width: 0 3px 3px 0; transform: rotate(45deg); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.lp-faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.lp-faq p { margin: 0; padding: 0 16px 16px; color: var(--gm-mut); font-size: 14px; font-weight: 700; line-height: 1.5; }
.lp-faq summary:focus-visible { outline: 3px solid var(--gm-gold); outline-offset: 2px; border-radius: var(--gm-r2); }

/* ---------- AI-ANCHOR: CSS_HK_HEAD — TASK-019 (owner #31): chip · judul angka · persamaan visual $100 → robot → $/hari · baris FOMO ---------- */
/* ---------- AI-ANCHOR: CSS_HK_BONUS — TASK-028 (owner #66): banner bonus (menggantikan chip owner #62) — robot Pilot mengintip di atas tepi,
   peti hadiah bergoyang + 3 koin keluar bergiliran, 2 baris teks (label cyan · hadiah emas), tombol panah emas berdenyut.
   Bingkai neon berputar (.hk-bn-frame::before conic, rotate) + kilau menyapu. Hanya transform/opacity; pause saat tab tersembunyi; reduced-motion = diam. ---------- */
.hk-bonus { position: relative; isolation: isolate; display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px; align-items: center; gap: 8px; width: 100%; max-width: 440px; min-height: 72px;
	margin: 24px auto 16px; padding: 8px 12px 8px 8px; border-radius: var(--gm-r2); color: var(--gm-cream); text-decoration: none; -webkit-tap-highlight-color: transparent;
	box-shadow: 0 0 24px rgba(255, 201, 51, .25), 0 0 48px rgba(94, 240, 255, .12); transition: transform .2s ease; }
.hk-bonus:active { transform: scale(.98); }
.hk-bn-frame { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hk-bn-frame::before { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; aspect-ratio: 1; margin: -260px 0 0 -260px;
	background: conic-gradient(from 0deg, var(--gm-gold) 0 14%, transparent 26% 46%, var(--gm-cyan) 58% 68%, transparent 80%); animation: hk-chip-spin 5s linear infinite; }
.hk-bn-frame::after { content: ""; position: absolute; inset: 2px; border-radius: 14px;
	background: radial-gradient(70% 120% at 10% 60%, rgba(255, 201, 51, .3), transparent 70%), linear-gradient(rgba(94, 240, 255, .1) 1px, transparent 1px) 0 0 / 16px 16px,
		linear-gradient(90deg, rgba(94, 240, 255, .1) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(100deg, #2b2410, #121a3a 45%, #0e1633); }
.hk-bn-frame .hk-chip-sweep { top: 0; bottom: 0; z-index: 1; }
.hk-bn-art { position: relative; align-self: stretch; }
.hk-bn-bot { position: absolute; left: 0; bottom: -4px; z-index: 2; width: 56px; height: 63px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); transform-origin: 50% 100%; animation: hk-bn-bob 2.4s ease-in-out infinite; }
.hk-bn-chest { position: absolute; right: -4px; bottom: 0; z-index: 1; width: 44px; height: 44px; filter: drop-shadow(0 0 12px rgba(255, 201, 51, .55)); transform-origin: 50% 90%; animation: hk-bn-wig 2.4s ease-in-out infinite; }
.hk-bn-c { position: absolute; right: 12px; bottom: 24px; z-index: 0; width: 16px; height: 16px; opacity: 0; animation: hk-bn-coin 1.8s cubic-bezier(.22, 1, .36, 1) infinite; }
.hk-bn-c svg { display: block; width: 100%; height: 100%; }
.hk-bn-c:nth-child(4) { animation-delay: .6s; --x: -12px; } .hk-bn-c:nth-child(5) { animation-delay: 1.2s; --x: 10px; }
.hk-bn-t { display: grid; gap: 4px; min-width: 0; text-align: left; }
.hk-bn-t small { overflow: hidden; color: var(--gm-cyan); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.hk-bn-t b { overflow: hidden; color: var(--gm-gold); font: 400 20px/1.2 var(--gm-f-title); white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 2px 0 var(--gm-line), 0 0 16px rgba(255, 201, 51, .45); }
.hk-bn-go { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid var(--gm-line); border-radius: 50%; color: var(--gm-line);
	background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gm-gold) 55%, #e08e00); box-shadow: 0 3px 0 var(--gm-wood-d); }
.hk-bn-go::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--gm-gold); border-radius: 50%; opacity: 0; animation: hk-bn-ring 1.8s ease-out infinite; }
.hk-bn-go svg { width: 20px; height: 20px; animation: hk-chip-go 1.6s ease-in-out infinite; }
@keyframes hk-bn-bob { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); } 50% { transform: translate3d(0, -6px, 0) rotate(3deg); } }
@keyframes hk-bn-wig { 0%, 60%, 100% { transform: rotate(0); } 68% { transform: rotate(-8deg) scale(1.06); } 76% { transform: rotate(7deg) scale(1.06); } 84% { transform: rotate(-4deg); } 92% { transform: rotate(2deg); } }
@keyframes hk-bn-coin { 0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--x, 0), -36px, 0) scale(1) rotate(200deg); } }
@keyframes hk-bn-ring { 0% { opacity: .8; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes hk-chip-spin { to { transform: rotate(360deg); } }
@keyframes hk-chip-sweep { 0% { transform: translate3d(-120%, 0, 0); } 45%, 100% { transform: translate3d(260%, 0, 0); } }
@keyframes hk-chip-go { 50% { transform: translate3d(3px, 0, 0); } }
.hk-chip-sweep { position: absolute; left: 0; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent);
	transform: translate3d(-120%, 0, 0); animation: hk-chip-sweep 3.6s 1s ease-in-out infinite; }
html.gm-hidden .hk-bonus *, html.gm-hidden .hk-bonus *::before, html.gm-hidden .hk-bonus *::after, .hk-bonus.off *, .hk-bonus.off *::before, .hk-bonus.off *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hk-bonus *, .hk-bonus *::before, .hk-bonus *::after { animation: none !important; } .hk-bn-c { display: none; } }
@media (max-width: 359px) { .hk-bonus { grid-template-columns: 80px minmax(0, 1fr) 44px; } .hk-bn-t b { font-size: 16px; } .hk-bn-t small { font-size: 10px; } }
.hk-h1 { text-align: center; }

/* ---------- AI-ANCHOR: CSS_HK_RES — TASK-025 (owner #61): kartu hasil demo "Congrats" — rata tengah, grid neon (.fx-grid), masuk bertahap,
   garis naik digambar, bar 10 hari tumbuh (scaleY), konfeti sekali, garis pindai. Hanya transform/opacity. ---------- */
.hk-res { display: grid; justify-items: center; gap: 12px; padding: 16px 12px; overflow: hidden; border-radius: var(--gm-r2); text-align: center;
	box-shadow: inset 0 0 0 2px rgba(134, 232, 92, .6), 0 0 24px rgba(134, 232, 92, .22); }
.hk-res[hidden] { display: none; }
.hk-res > * { position: relative; z-index: 1; }
.hk-res.in .hk-res-top, .hk-res.in .hk-res-pnl, .hk-res.in .hk-res-roi, .hk-res.in .hk-res-chart, .hk-res.in .hk-res-stats { animation: hk-res-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.hk-res.in .hk-res-pnl { animation-delay: .1s; } .hk-res.in .hk-res-roi { animation-delay: .9s; } .hk-res.in .hk-res-chart { animation-delay: .25s; } .hk-res.in .hk-res-stats { animation-delay: .4s; }
@keyframes hk-res-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.98); } }
.hk-res-top { display: grid; justify-items: center; gap: 4px; }
.hk-res-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px; border: 2px solid var(--gm-line); border-radius: 999px; background: linear-gradient(#ffe487, var(--gm-gold));
	color: var(--gm-line); font: 400 20px/1.2 var(--gm-f-title); box-shadow: 0 0 24px rgba(255, 201, 51, .5); }
.hk-res-badge svg { width: 20px; height: 20px; fill: var(--gm-line); }
.hk-res-top small { color: var(--gm-cyan); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }
.hk-res-pnl { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; max-width: 360px; }
.hk-res-io { display: grid; gap: 4px; min-width: 0; padding: 8px; border-radius: var(--gm-r1); background: rgba(10, 15, 38, .75); }
.hk-res-io small { color: var(--gm-cream); font-size: 10px; font-weight: 900; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hk-res-io b { font: 400 20px/1.2 var(--gm-f-title); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hk-res-io.in { box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .5); } .hk-res-io.in b { color: var(--gm-cyan); }
.hk-res-io.out { box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .7), 0 0 16px rgba(255, 201, 51, .35); } .hk-res-io.out b { color: var(--gm-gold); }
.hk-res-line { width: 64px; height: 32px; overflow: visible; }
.hk-res-line path { fill: none; stroke: var(--gm-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
	filter: drop-shadow(0 0 4px rgba(134, 232, 92, .7)); animation: hk-res-draw 1.1s .5s cubic-bezier(.22, 1, .36, 1) forwards; }
.hk-res-line circle { fill: var(--gm-green); opacity: 0; transform-box: fill-box; transform-origin: center; animation: hk-res-dot 1.4s 1.6s ease-in-out infinite; }
@keyframes hk-res-draw { to { stroke-dashoffset: 0; } }
@keyframes hk-res-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.6); } }
.hk-res-roi { display: inline-block; padding: 4px 12px; border: 2px solid var(--gm-line); border-radius: 999px; background: linear-gradient(#a6f27c, var(--gm-green)); color: var(--gm-line);
	font-size: 14px; font-weight: 900; line-height: 20px; box-shadow: 0 0 16px rgba(134, 232, 92, .45); }
.hk-res-chart { display: grid; gap: 8px; width: 100%; max-width: 360px; }
.hk-res-chart small { color: var(--gm-cream); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.hk-res-bars { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; gap: 4px; height: 48px; padding: 0 4px; border-bottom: 2px solid rgba(94, 240, 255, .35); }
.hk-res-bars i { height: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(to top, rgba(94, 240, 255, .5), var(--gm-green)); transform-origin: 50% 100%; transform: scaleY(var(--h));
	animation: hk-res-bar .6s var(--d) cubic-bezier(.22, 1, .36, 1) both; }
.hk-res-bars i:last-child { background: linear-gradient(to top, var(--gm-gold), #ffe487); box-shadow: 0 0 12px rgba(255, 201, 51, .6); }
@keyframes hk-res-bar { from { transform: scaleY(0); } }
.hk-res-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; margin: 0; padding: 0; list-style: none; }
.hk-res-stats li { display: grid; gap: 4px; min-width: 0; padding: 8px 4px; border: 2px solid rgba(94, 240, 255, .25); border-radius: var(--gm-r1); background: rgba(10, 15, 38, .75); }
.hk-res-stats b { color: #fff; font-size: 16px; font-weight: 900; line-height: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hk-res-stats small { color: var(--gm-mut); font-size: 10px; font-weight: 900; line-height: 12px; letter-spacing: .06em; text-transform: uppercase; }
.hk-res-scan { position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 48px; pointer-events: none;
	background: linear-gradient(transparent, rgba(94, 240, 255, .14), transparent); transform: translate3d(0, -100%, 0); animation: hk-res-scan 3.6s 1.4s linear infinite; }
@keyframes hk-res-scan { to { transform: translate3d(0, 560px, 0); } }
.hk-res-conf { position: absolute; left: 50%; top: 32px; z-index: 2; width: 0; height: 0; pointer-events: none; }
.hk-res-conf i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--gm-gold); opacity: 0;
	animation: hk-res-conf 1.2s .15s cubic-bezier(.22, 1, .36, 1) both; }
.hk-res-conf i:nth-child(3n + 2) { background: var(--gm-cyan); } .hk-res-conf i:nth-child(3n) { background: var(--gm-green); border-radius: 50%; }
@keyframes hk-res-conf { 0% { opacity: 1; transform: rotate(var(--a)) translate3d(0, 0, 0); } 100% { opacity: 0; transform: rotate(var(--a)) translate3d(0, -96px, 0) rotate(180deg); } }
html.gm-hidden .hk-res-scan, html.gm-hidden .hk-res-line circle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hk-res.in *, .hk-res-bars i, .hk-res-scan, .hk-res-conf i { animation: none !important; } .hk-res-line path { stroke-dashoffset: 0; } .hk-res-line circle { opacity: 1; } .hk-res-conf { display: none; } }
/* .hk-h1: 2 baris tetap — lihat owner #44 di bawah */
.hk-eq { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) 24px auto 24px minmax(0, 1.15fr); align-items: center; gap: 4px; margin-top: 12px; padding: 12px; border: 3px solid var(--gm-line); border-radius: var(--gm-r2);
	background: linear-gradient(#1b2446, #0d1330); box-shadow: 0 6px 0 var(--gm-wood-d), inset 0 2px 0 rgba(255, 255, 255, .06); }
.hk-eq > span { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.hk-eq small { color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 16px; white-space: nowrap; }
.hk-eq-in svg { width: 32px; height: 32px; }
.hk-eq-in b { color: #fff; font-size: 20px; font-size: clamp(16px, 6cqi, 24px); line-height: 1.2; text-shadow: 0 2px 0 var(--gm-line); white-space: nowrap; }
.hk-eq-bot img { width: 48px; height: 54px; }
.hk-eq-out b { color: var(--gm-green); font-size: 16px; font-size: clamp(14px, 5.6cqi, 32px); line-height: 1.1; text-shadow: 0 2px 0 var(--gm-line), 0 0 16px rgba(134, 232, 92, .35); white-space: nowrap; animation: hk-glow 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hk-glow { 50% { transform: scale(1.06); } }
.hk-eq-out small.gm-num { color: var(--gm-gold); font-size: 14px; white-space: nowrap; font-weight: 900; line-height: 20px; }
/* panah: titik bergerak kiri → kanan (aliran uang) */
.hk-eq-ar { position: relative; height: 24px; overflow: hidden; }
.hk-eq-ar::before { content: ""; position: absolute; left: 0; right: 6px; top: 11px; height: 2px; border-radius: 2px; background: rgba(94, 240, 255, .35); }
.hk-eq-ar::after { content: ""; position: absolute; right: 1px; top: 7px; width: 8px; height: 8px; border: solid var(--gm-cyan); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.hk-eq-ar i { position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--gm-gold); box-shadow: 0 0 8px var(--gm-gold); animation: hk-flow 1.4s linear infinite; }
@keyframes hk-flow { 0% { transform: translate3d(-6px, 0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate3d(22px, 0, 0); opacity: 0; } }
.hk-eq-ar + span + .hk-eq-ar i { animation-delay: .7s; }
.hk-amts { display: flex; gap: 8px; margin-top: 12px; }
.hk-amts button { -webkit-appearance: none; appearance: none; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 12px; border: 3px solid var(--gm-line); border-radius: 999px; background: var(--gm-bg2); color: var(--gm-mut); font: 900 16px/1.25 var(--gm-f-body); cursor: pointer; transition: background-color .25s ease, color .25s ease, transform .15s ease; }
.hk-amts button:active { transform: translateY(2px); }
.hk-amts button[aria-pressed="true"] { background: var(--gm-gold); color: var(--gm-line); box-shadow: 0 4px 0 var(--gm-gold-d); }
/* ganti nominal: angka naik masuk (transform/opacity saja) */
.hk-swap .hk-eq-in b, .hk-swap .hk-eq-out b, .hk-swap .hk-eq-out small.gm-num { animation: hk-swap .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes hk-swap { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@media (max-width: 359px) { .hk-eq { grid-template-columns: minmax(0, 1fr) 16px auto 16px minmax(0, 1.15fr); padding: 12px 8px; } .hk-eq-bot img { width: 40px; height: 45px; } .hk-eq small { white-space: normal; } }
@media (min-width: 480px) { .hk-eq { padding: 12px 16px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .hk-eq-ar i, .hk-eq-out b, .hk-swap * { animation: none !important; } }

/* ---------- AI-ANCHOR: CSS_GM_TREE — TASK-020 (owner #36): pohon tim, "You" di puncak, 10 level melebar, koin mengalir naik ---------- */
.gm-tree { position: relative; display: grid; justify-items: center; gap: 12px; padding: 24px 12px 16px; overflow: hidden; }
.tr-you { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; padding: 12px 16px; border: 3px solid var(--gm-line); border-radius: var(--gm-r2);
	background: linear-gradient(#3a3a1e, #26315e); box-shadow: 0 0 0 2px var(--gm-gold), 0 0 32px rgba(255, 201, 51, .35); text-align: center; }
.tr-crown { position: absolute; top: -14px; left: 50%; width: 32px; height: 22px; translate: -50% 0; }
.tr-crown svg { display: block; width: 100%; height: 100%; }
.tr-you img { width: 64px; height: 72px; }
.tr-you b { color: var(--gm-gold); font: 400 24px/1.1 var(--gm-f-title); text-shadow: 0 2px 0 var(--gm-line); }
.tr-you small { color: var(--gm-cream); font-size: 12px; font-weight: 900; line-height: 16px; }
.tr-body { position: relative; width: 100%; }
/* batang pohon: garis tengah + koin naik */
.tr-flow { position: absolute; left: 50%; top: -12px; bottom: 8px; width: 4px; margin-left: -2px; border-radius: 4px; background: linear-gradient(rgba(255, 201, 51, .7), rgba(255, 201, 51, .08)); }
.tr-flow i { position: absolute; left: -4px; bottom: 0; width: 12px; height: 12px; border: 2px solid var(--gm-line); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gm-gold) 60%, var(--gm-gold-d)); animation: tr-up 3s cubic-bezier(.45, 0, .55, 1) infinite; opacity: 0; }
.tr-flow i:nth-child(2) { animation-delay: 1s; } .tr-flow i:nth-child(3) { animation-delay: 2s; }
@keyframes tr-up { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate3d(0, -360px, 0); opacity: 0; } }
.tr-lv { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tr-lv li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.tr-l { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; }
.tr-p { color: var(--gm-gold); font-size: 14px; line-height: 20px; text-align: right; text-shadow: 0 2px 0 var(--gm-line); }
.tr-dots { display: flex; justify-content: center; gap: 4px; min-width: 0; } /* titik tetap, jumlah bertambah = segitiga */
.tr-dots i { position: relative; flex: none; width: 12px; height: 12px; border: 2px solid var(--gm-line); border-radius: 50%; background: hsl(calc(190 - var(--i) * 14), 85%, 62%); }
@media (min-width: 480px) { .gm-tree { padding: 32px 24px 24px; } .tr-dots { gap: 8px; } .tr-dots i { width: 16px; height: 16px; } .tr-lv li { grid-template-columns: 40px minmax(0, 1fr) 48px; } .tr-p { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .tr-flow i { animation: none !important; opacity: 0; } }

/* ---------- AI-ANCHOR: CSS_HK_PAYOUT — owner #40: pil payout bergantian + marquee koin di kaki kartu persamaan ---------- */
.hk-eq-coins { grid-column: 1 / -1; display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 2px dashed rgba(94, 240, 255, .18); }
.hk-coins { display: contents; }
.hk-paid { position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 32px; padding: 0 12px 0 6px; border: 2px solid rgba(134, 232, 92, .5); border-radius: 999px; background: rgba(134, 232, 92, .14); }
.hk-paid img { flex: none; width: 20px; height: 20px; }
.hk-paid b { color: var(--gm-green); font-size: 14px; line-height: 20px; white-space: nowrap; }
.hk-paid.pop { animation: hk-paid .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hk-paid { 0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(.9); } 100% { opacity: 1; transform: none; } }
.hk-mq { position: relative; justify-self: stretch; width: 100%; min-width: 0; height: 28px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.hk-mq-t { display: flex; gap: 8px; width: max-content; padding-top: 2px; animation: hk-mq 18s linear infinite; }
.hk-mq-t img { width: 24px; height: 24px; flex: none; }
@keyframes hk-mq { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .hk-paid.pop, .hk-mq-t { animation: none !important; } }

/* ---------- AI-ANCHOR: CSS_LP_HOW — TASK-021 (owner #41): 1 kotak bertab ringkas & futuristik ---------- */
.lp-how-sec { padding-top: 32px; }
.lp-how { position: relative; max-width: 760px; margin: 0 auto; padding: 8px; border: 1px solid rgba(94, 240, 255, .3); border-radius: var(--gm-r3);
	background: linear-gradient(160deg, rgba(38, 49, 94, .92), rgba(10, 15, 38, .96)); box-shadow: 0 0 0 1px rgba(11, 16, 36, .9), 0 24px 48px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); overflow: hidden; }
.lp-how::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(94, 240, 255, .14), transparent 70%); pointer-events: none; }
.lp-how-tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--gm-r2); background: rgba(5, 8, 20, .6); }
.lp-how-tabs button { -webkit-appearance: none; appearance: none; position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 0; min-height: 64px; padding: 8px 4px; border: 0; border-radius: var(--gm-r1);
	background: transparent; color: var(--gm-dim); font: 900 12px/1.25 var(--gm-f-body); text-align: center; cursor: pointer; overflow: hidden; transition: background-color .25s ease, color .25s ease; }
.lp-how-tabs button img, .lp-how-tabs button svg { width: 24px; height: 24px; opacity: .7; transition: opacity .25s ease, transform .25s ease; }
.lp-how-tabs button span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-how-tabs button[aria-selected="true"] { background: linear-gradient(#34427a, #26315e); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.lp-how-tabs button[aria-selected="true"] img, .lp-how-tabs button[aria-selected="true"] svg { opacity: 1; transform: scale(1.12); }
/* bar progres tab aktif (4 dtk) */
.lp-how-tabs button i { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gm-cyan), var(--gm-green)); transform: scaleX(0); transform-origin: left; }
.lp-how-tabs button[aria-selected="true"] i { animation: hw-prog 4s linear forwards; }
.lp-how.manual .lp-how-tabs button[aria-selected="true"] i { animation: none; transform: scaleX(1); }
.lp-how.paused .lp-how-tabs button i { animation-play-state: paused; }
@keyframes hw-prog { to { transform: scaleX(1); } }
.lp-how-panels { position: relative; display: grid; padding: 16px 8px 8px; }
.lp-how-p { grid-area: 1 / 1; display: grid; align-content: center; justify-items: center; gap: 12px; min-width: 0; }
.lp-how-p[hidden] { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; }
.lp-how-p.on { animation: hw-in .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes hw-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.hw-t { max-width: 36ch; margin: 0; color: var(--gm-cream); font-size: 14px; font-weight: 800; line-height: 1.45; text-align: center; }
.hw-hero { display: flex; align-items: center; gap: 16px; }
.hw-hero > img { width: 112px; height: 126px; flex: none; filter: drop-shadow(0 8px 16px rgba(94, 240, 255, .3)); }
.hw-slots { display: grid; grid-template-columns: repeat(5, 40px); gap: 8px; }
.hw-slots i { display: grid; place-items: center; width: 40px; height: 40px; border: 2px dashed rgba(94, 240, 255, .3); border-radius: 8px; }
.hw-slots i.on { border-style: solid; border-color: rgba(94, 240, 255, .7); background: rgba(94, 240, 255, .1); }
.hw-slots img { width: 32px; height: 32px; }
.hw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; padding-top: 8px; }
.hw-m { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 8px 4px; border: 1px solid rgba(94, 240, 255, .2); border-radius: var(--gm-r1); background: rgba(5, 8, 20, .5); color: #fff; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.hw-m:hover { transform: translateY(-2px); border-color: var(--gm-cyan); }
.hw-m img { width: 40px; height: 40px; }
.hw-m b { font-size: 14px; line-height: 20px; }
.hw-m small { color: var(--gm-green); font-size: 12px; font-weight: 900; line-height: 16px; white-space: nowrap; }
.hw-m em { position: absolute; top: -8px; left: 50%; translate: -50% 0; padding: 0 4px; border-radius: 999px; background: var(--gm-green); color: var(--gm-line); font-size: 10px; font-style: normal; font-weight: 900; line-height: 16px; white-space: nowrap; }
.hw-soc { display: grid; grid-template-columns: repeat(4, 48px); gap: 12px 16px; justify-content: center; padding-top: 8px; }
.hw-soc span { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(5, 8, 20, .5); border: 1px solid rgba(94, 240, 255, .2); }
.hw-soc svg { width: 28px; height: 28px; }
.hw-soc b { position: absolute; top: -8px; right: -8px; padding: 0 4px; border-radius: 999px; background: var(--gm-gold); color: var(--gm-line); font-size: 10px; line-height: 16px; opacity: 0; }
.lp-how-p.on .hw-soc b { animation: hw-pop 2.4s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * .3s) infinite; }
@keyframes hw-pop { 0% { opacity: 0; transform: translate3d(0, 6px, 0); } 20%, 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(0, -8px, 0); } }
.hw-coins { display: grid; grid-template-columns: repeat(8, 32px); gap: 8px; justify-content: center; }
.hw-coins img { width: 32px; height: 32px; }
.lp-how-p.on .hw-coins img { animation: hw-coin 3.2s cubic-bezier(.45, 0, .55, 1) calc(var(--i) * .12s) infinite; }
@keyframes hw-coin { 0%, 70%, 100% { transform: none; } 80% { transform: translate3d(0, -6px, 0); } }
@media (max-width: 359px) { .hw-coins { grid-template-columns: repeat(8, 28px); gap: 4px; } .hw-coins img { width: 28px; height: 28px; } .hw-slots { grid-template-columns: repeat(5, 28px); gap: 4px; } .hw-slots i { width: 28px; height: 28px; } .hw-slots img { width: 20px; height: 20px; } .hw-hero { gap: 8px; } .hw-hero > img { width: 64px; height: 72px; } .hw-soc { gap: 12px; } }
@media (min-width: 360px) and (max-width: 479px) { .hw-slots { grid-template-columns: repeat(5, 32px); gap: 4px; } .hw-slots i { width: 32px; height: 32px; } .hw-slots img { width: 24px; height: 24px; } .hw-hero > img { width: 88px; height: 99px; } }
@media (min-width: 480px) { .lp-how { padding: 12px; } .lp-how-tabs button { font-size: 14px; } .lp-how-panels { padding: 24px 16px 12px; } .hw-m b { font-size: 16px; } }
.gm-hidden .lp-how *, .lp-how.paused .lp-how-p * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .lp-how-p.on, .lp-how-p.on *, .lp-how-tabs button i { animation: none !important; } }
/* owner #42: label alur Deposit → (robot) → Withdraw, sama-sama di atas angka */
.hk-eq-in small, .hk-eq-out small:first-child { order: -1; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 900; line-height: 20px; letter-spacing: .06em; text-transform: uppercase; }
.hk-eq-in small { background: rgba(94, 240, 255, .14); color: var(--gm-cyan); }
.hk-eq-out small:first-child { background: rgba(134, 232, 92, .16); color: var(--gm-green); }
.hk-eq-in svg { order: 0; }

/* owner #44: judul — tiap baris SELALU 1 baris di layar apa pun (ukuran ikut lebar kolom judul) + efek ketik AI */
.hk-head { container-type: inline-size; }
/* owner #45: SATU baris utuh "Turn $1,000 into $120 a day." di layar apa pun — ukuran dari lebar kolom judul (cqi) untuk judul
   terpanjang (±12.6em), tetap sama untuk $1/$100/$1,000 → tanpa lompatan layout. Fallback vw untuk browser tanpa container query. */
.hk-h1 { white-space: nowrap; font-size: clamp(20px, 7vw, 64px); font-size: min(64px, 7.7cqi); line-height: 1.2; }
.hk-h1 > span, .hk-h1 > em { display: inline; }
.hk-h1 .typing::after { content: ""; display: inline-block; width: .09em; height: .9em; margin-left: .06em; vertical-align: -.08em; border-radius: 2px; background: var(--gm-cyan); box-shadow: 0 0 12px var(--gm-cyan); animation: hk-caret .5s steps(1) infinite; }
.hk-h1 .typing { text-shadow: 0 3px 0 var(--gm-line), 0 0 24px rgba(94, 240, 255, .55); }
@keyframes hk-caret { 50% { opacity: 0; } }

/* ---------- owner #43: STEP 1–4 di tab, judul langkah bernomor, tombol langkah berikut ---------- */
.lp-how-tabs button { min-height: 80px; padding-top: 8px; }
.hw-step { display: block; padding: 0 4px; border-radius: 999px; background: rgba(94, 240, 255, .12); color: var(--gm-cyan); font-size: 10px; font-style: normal; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.lp-how-tabs button[aria-selected="true"] .hw-step { background: var(--gm-cyan); color: var(--gm-line); }
.hw-head { display: flex; align-items: center; gap: 12px; justify-self: stretch; }
.hw-n { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 2px solid var(--gm-line); border-radius: 50%; background: linear-gradient(var(--gm-gold-l), var(--gm-gold) 55%, var(--gm-gold-d)); color: var(--gm-line); font: 400 20px/1 var(--gm-f-title); box-shadow: 0 0 16px rgba(255, 201, 51, .4); }
.hw-head span { display: grid; min-width: 0; color: #fff; font: 400 20px/1.2 var(--gm-f-title); text-shadow: 0 2px 0 var(--gm-line); }
.hw-head small { color: var(--gm-cyan); font: 900 12px/16px var(--gm-f-body); letter-spacing: .06em; text-transform: uppercase; text-shadow: none; }
.hw-next { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(94, 240, 255, .4); border-radius: 999px; background: rgba(94, 240, 255, .08); color: var(--gm-cyan); font: 900 14px/1.25 var(--gm-f-body); cursor: pointer; }
.hw-next span { display: inline-block; transition: transform .2s ease; }
.hw-next:hover span { transform: translateX(4px); }
.hw-cta { max-width: 360px; }
/* audit: isi tetap di dalam kotak di 320–360 px */
.hw-coins { grid-template-columns: repeat(8, minmax(0, 32px)); }
.hw-coins img { width: 100%; height: auto; aspect-ratio: 1; }
@media (max-width: 399px) { .hw-m b { font-size: 12px; line-height: 16px; } .hw-m small { font-size: 10px; } .hw-head span { font-size: 16px; } .hw-n { width: 32px; height: 32px; font-size: 16px; } }
@media (max-width: 359px) { .hk-eq-in small, .hk-eq-out small:first-child { padding: 0 4px; font-size: 10px; letter-spacing: .02em; } .hw-step { font-size: 10px; letter-spacing: 0; } }
@media (prefers-reduced-motion: reduce) { .hk-h1 .typing::after { animation: none; } }

/* ---------- AI-ANCHOR: CSS_GM_WORKBOT — TASK-022 (owner #46): robot menambang dari kode (SVG + CSS), siklus 1 detik ---------- */
.wb-wrap { display: inline-grid; place-items: center; }
.wb { display: block; width: 100%; height: auto; overflow: visible; }
.wb * { transform-box: view-box; }
.wb-arm { transform-origin: 116px 98px; animation: wb-swing 1s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes wb-swing { 0% { transform: rotate(-30deg); } 40% { transform: rotate(-38deg); } 55% { transform: rotate(30deg); } 68% { transform: rotate(24deg); } 100% { transform: rotate(-30deg); } }
.wb-body { transform-origin: 84px 160px; animation: wb-bob 1s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes wb-bob { 0%, 40%, 100% { transform: none; } 56% { transform: translate3d(2px, 2px, 0) rotate(2deg); } }
.wb-spark { transform-origin: 160px 118px; opacity: 0; animation: wb-spark 1s linear infinite; }
@keyframes wb-spark { 0%, 52% { opacity: 0; transform: scale(.4); } 57% { opacity: 1; transform: scale(1); } 76%, 100% { opacity: 0; transform: scale(1.5); } }
.wb-coin { opacity: 0; animation: wb-coin 4s cubic-bezier(.22, 1, .36, 1) infinite; animation-delay: calc(var(--k) * 1s + .55s); } /* 1 koin per pukulan (siklus lengan 1 dtk) */
@keyframes wb-coin { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.5); } 5% { opacity: 1; transform: translate3d(4px, -16px, 0) scale(1.15); } 40% { opacity: 1; transform: translate3d(14px, -64px, 0) scale(1); } 50%, 100% { opacity: 0; transform: translate3d(18px, -84px, 0) scale(.9); } }
.wb-eyes { transform-origin: 84px 74px; animation: wb-blink 3.6s steps(1) infinite; }
@keyframes wb-blink { 0%, 92% { transform: none; } 94% { transform: scaleY(.15); } 96% { transform: none; } }
.wb-lamp { animation: wb-lamp 1s ease-in-out infinite; }
@keyframes wb-lamp { 50% { opacity: .55; } }
.wb-meter rect { transform-box: fill-box; transform-origin: 50% 100%; animation: wb-meter 1s ease-in-out infinite; }
.wb-meter rect:nth-child(2) { animation-delay: .2s; } .wb-meter rect:nth-child(3) { animation-delay: .4s; }
@keyframes wb-meter { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
/* anak .lv mengikuti status jalan/berhenti section (CSS_PL_LIVE) */
.wb .lv * { animation-play-state: inherit; }
[data-live]:not(.vis) .wb *, html.gm-hidden .wb * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .wb * { animation: none !important; } .wb-coin, .wb-spark { opacity: 0; } }
/* ukuran di kartu persamaan & room demo */
.hk-eq-bot .wb-wrap { width: 88px; margin: -8px 0 -4px; }
.hk-room .wb-wrap.hk-bot { width: 136px; height: auto; flex: none; filter: drop-shadow(0 8px 16px rgba(94, 240, 255, .25)); }
@media (max-width: 399px) { .hk-eq-bot .wb-wrap { width: 72px; } .hk-room .wb-wrap.hk-bot { width: 104px; } }

/* ---------- AI-ANCHOR: CSS_HK_TRAIN — owner #48: kereta tambang pembawa koin kripto di rel (menggantikan marquee logo) ---------- */
.hk-rail-t { height: 44px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
/* rel (besi) + bantalan kayu */
.hk-rail-t::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; border-radius: 2px; background: linear-gradient(#c9d3e6, #6b7aa8); box-shadow: 0 1px 0 #0b1024; }
.hk-rail-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(90deg, #7a4520 0 6px, transparent 6px 14px); opacity: .8; }
.hk-rail-t .hk-mq-t { position: relative; z-index: 1; gap: 4px; padding: 0; align-items: flex-end; height: 40px; animation: hk-train 26s linear infinite; }
@keyframes hk-train { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.hk-cart { position: relative; display: grid; justify-items: center; flex: none; width: 40px; height: 40px; }
/* sambungan antar gerbong */
.hk-cart::after { content: ""; position: absolute; right: -4px; bottom: 11px; width: 6px; height: 2px; background: #0b1024; }
.hk-cart img { position: absolute; top: 2px; left: 10px; width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(255, 201, 51, .45)); animation: hk-rattle .5s ease-in-out infinite alternate; }
.hk-cart:nth-child(even) img { animation-delay: -.25s; }
.hk-cart svg { position: absolute; left: 0; bottom: 0; width: 40px; height: 22px; overflow: visible; }
.hk-wh { transform-box: fill-box; transform-origin: 50% 50%; animation: hk-wheel .7s linear infinite; }
@keyframes hk-wheel { to { transform: rotate(360deg); } }
@keyframes hk-rattle { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -2px, 0) rotate(-4deg); } }
[data-live]:not(.vis) .hk-rail-t *, html.gm-hidden .hk-rail-t * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .hk-rail-t *, .hk-rail-t .hk-mq-t { animation: none !important; } }

/* ---------- AI-ANCHOR: CSS_HK_WALLET — owner #49: ujung kanan rel = "Your wallet" (label · dompet · jumlah masuk) ---------- */
.hk-eq-coins { grid-template-columns: minmax(0, 1fr) auto; }
.hk-wal { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 72px; }
.hk-wal small { order: -1; color: var(--gm-mut); font-size: 10px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.hk-wal-i { order: 0; width: 44px; height: 37px; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); transform-origin: 50% 80%; }
.hk-wal-i.in { animation: hk-wal-in .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes hk-wal-in { 0% { transform: scale(1); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); } 35% { transform: scale(1.14) rotate(-3deg); filter: drop-shadow(0 0 12px rgba(255, 201, 51, .8)); } 100% { transform: none; } }
.hk-wal .hk-paid { order: 1; height: auto; padding: 0; border: 0; background: none; gap: 4px; }
.hk-wal .hk-paid img { width: 14px; height: 14px; }
.hk-wal .hk-paid b { font-size: 12px; line-height: 16px; }
/* kereta "masuk" ke dompet: rel memudar di kanan */
.hk-rail-t { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 32px), transparent); }
@media (prefers-reduced-motion: reduce) { .hk-wal-i.in { animation: none; } }

/* ---------- AI-ANCHOR: CSS_FX_GRID — owner #58: latar "blok" grid neon futuristik, utilitas bersama (sheet daftar, home, dll).
   Pakai: tambahkan class .fx-grid ke kotak mana pun (background sendiri diganti). Blok menyala berkedip = ::after (opacity saja), pause di luar layar. ---------- */
/* .fx-grid.fx-grid: spesifisitas ganda supaya menang dari latar komponen yang dimuat belakangan (mis. .rm-sheet-in di room.css) */
.fx-grid.fx-grid { position: relative; isolation: isolate;
	background:
		radial-gradient(90% 60% at 50% 0%, rgba(94, 240, 255, .16), transparent 70%),
		radial-gradient(70% 50% at 100% 100%, rgba(255, 201, 51, .1), transparent 70%),
		linear-gradient(rgba(94, 240, 255, .16) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, rgba(94, 240, 255, .16) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(160deg, #1b2a62, #10173a 60%, #0c1230);
	background-attachment: local; }
.fx-grid::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
	background:
		linear-gradient(rgba(94, 240, 255, .3), rgba(94, 240, 255, .3)) calc(100% - 119px) 49px / 23px 23px no-repeat,
		linear-gradient(rgba(94, 240, 255, .18), rgba(94, 240, 255, .18)) calc(100% - 71px) 97px / 23px 23px no-repeat,
		linear-gradient(rgba(255, 201, 51, .2), rgba(255, 201, 51, .2)) 25px 193px / 23px 23px no-repeat,
		linear-gradient(rgba(94, 240, 255, .2), rgba(94, 240, 255, .2)) calc(100% - 47px) 289px / 23px 23px no-repeat,
		linear-gradient(rgba(94, 240, 255, .14), rgba(94, 240, 255, .14)) 145px 361px / 23px 23px no-repeat;
	animation: fx-grid-blink 3.6s steps(1) infinite; }
@keyframes fx-grid-blink { 0%, 100% { opacity: 1; } 25% { opacity: .35; } 50% { opacity: .8; } 75% { opacity: .15; } }
html.gm-hidden .fx-grid::after, [data-live]:not(.vis) .fx-grid::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .fx-grid::after { animation: none; } }

/* ---------- AI-ANCHOR: CSS_HSCROLL — TASK-037 B6 (owner #78): deret yang bisa digeser (js/hscroll.js) — fade tepi = petunjuk ada lanjutan ---------- */
.hs-on { cursor: grab; overscroll-behavior-x: contain; }
.hs-on.hs-drag { cursor: grabbing; }
.hs-on.hs-drag * { pointer-events: none; }
.hs-on.hs-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.hs-on.hs-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.hs-on.hs-l.hs-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* ---------- AI-ANCHOR: CSS_LP_HELP — TASK-038 (owner #87): landing: banner "kamu baru saja membantu @nama" (link Friend Boost ?help=1) */
.lp-help { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 12px; width: min(420px, calc(100% - 32px)); padding: 12px 16px; border: 2px solid #7dff9a; border-radius: 16px; background: #141b3c; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); transform: translateX(-50%); animation: pl-up .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pl-up { from { transform: translate(-50%, 120%); } }
.lp-help .rb { width: 56px; flex: none; }
.lp-help span { display: grid; flex: 1; min-width: 0; }
.lp-help b { color: #7dff9a; font-size: 14px; font-weight: 900; line-height: 1.45; }
.lp-help small { color: #c9d5f2; font-size: 12px; font-weight: 700; }
.lp-help a { flex: none; display: grid; place-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: linear-gradient(#ffe487, #ffc933); color: #0b1024; font-size: 14px; font-weight: 900; text-decoration: none; }

/* ---------- AI-ANCHOR: CSS_FX_BOTS — TASK-038 (owner #87): robot bersendi (js/fx-bots.js). Sendi = transform-origin di titik sendi (koordinat viewBox).
   walk / carry / lever / push / cheer / wave. Hanya transform; berhenti di luar layar (.fr-fx:not(.on)) & tab tersembunyi. ---------- */
.rb { display: block; width: 100%; height: auto; overflow: visible; }
.rb * { transform-box: view-box; }
.rb-all { transform-origin: 60px 148px; }
.rb-legL { transform-origin: 52px 104px; } .rb-kneeL { transform-origin: 52px 120px; }
.rb-legR { transform-origin: 68px 104px; } .rb-kneeR { transform-origin: 68px 120px; }
.rb-armL { transform-origin: 33px 75px; } .rb-elbL { transform-origin: 33px 89px; }
.rb-armR { transform-origin: 87px 75px; } .rb-elbR { transform-origin: 87px 89px; }
.rb-head { transform-origin: 60px 64px; animation: rb-look 4s ease-in-out infinite; }
.rb-eyes { transform-origin: 60px 46px; animation: wb-blink 3.6s steps(1) infinite; }
.rb-ant { transform-origin: 60px 18px; animation: rb-ant 1.2s ease-in-out infinite; }
.rb-meter rect { transform-box: fill-box; transform-origin: 50% 100%; animation: wb-meter 1s ease-in-out infinite; }
.rb-meter rect:nth-child(2) { animation-delay: .2s; } .rb-meter rect:nth-child(3) { animation-delay: .4s; }
.rb-fan { animation: rb-spin .5s linear infinite; }
@keyframes rb-look { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } }
@keyframes rb-ant { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes rb-spin { to { transform: rotate(360deg); } }
/* walk / carry / push: siklus langkah (kaki kanan setengah siklus di belakang kaki kiri) */
.rb-walk .rb-legL, .rb-carry .rb-legL, .rb-push .rb-legL { animation: rb-leg .9s ease-in-out infinite; }
.rb-walk .rb-kneeL, .rb-carry .rb-kneeL, .rb-push .rb-kneeL { animation: rb-knee .9s ease-in-out infinite; }
.rb-walk .rb-legR, .rb-carry .rb-legR, .rb-push .rb-legR { animation: rb-leg .9s ease-in-out -.45s infinite; }
.rb-walk .rb-kneeR, .rb-carry .rb-kneeR, .rb-push .rb-kneeR { animation: rb-knee .9s ease-in-out -.45s infinite; }
@keyframes rb-leg { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
@keyframes rb-knee { 0%, 100% { transform: rotate(8deg); } 15% { transform: rotate(38deg); } 45% { transform: rotate(0); } 70% { transform: rotate(0); } }
.rb-walk .rb-all, .rb-carry .rb-all { animation: rb-bob .45s ease-in-out infinite; }
@keyframes rb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.rb-walk .rb-armL { animation: rb-armw .9s ease-in-out infinite; } .rb-walk .rb-armR { animation: rb-armw .9s ease-in-out -.45s infinite; }
.rb-walk .rb-elbL, .rb-walk .rb-elbR { transform: rotate(-24deg); }
@keyframes rb-armw { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
/* carry: kedua lengan ke depan memegang GPU, GPU ikut naik-turun */
.rb-carry .rb-armL { transform: rotate(-78deg); } .rb-carry .rb-elbL { transform: rotate(-12deg); }
.rb-carry .rb-armR { transform: rotate(-66deg); } .rb-carry .rb-elbR { transform: rotate(-22deg); }
/* push: badan condong, lengan lurus ke depan dengan dorongan berulang */
.rb-push .rb-all { animation: rb-lean .9s ease-in-out infinite; }
@keyframes rb-lean { 0%, 100% { transform: rotate(9deg) translateX(0); } 50% { transform: rotate(11deg) translateX(2px); } }
.rb-push .rb-armL { animation: rb-pushA .9s ease-in-out infinite; } .rb-push .rb-armR { animation: rb-pushA .9s ease-in-out -.1s infinite; }
@keyframes rb-pushA { 0%, 100% { transform: rotate(-96deg); } 50% { transform: rotate(-86deg); } }
.rb-push .rb-elbL, .rb-push .rb-elbR { animation: rb-pushE .9s ease-in-out infinite; }
@keyframes rb-pushE { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-26deg); } }
/* lever: lengan kanan naik lalu menarik tuas ke bawah, badan & lutut ikut (2 dtk, sinkron dengan .sp-lever) */
.rb-lever .rb-armR { animation: rb-pull 2s cubic-bezier(.6, 0, .3, 1) infinite; }
.rb-lever .rb-elbR { animation: rb-pullE 2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes rb-pull { 0%, 35% { transform: rotate(-160deg); } 55%, 80% { transform: rotate(-35deg); } 100% { transform: rotate(-160deg); } }
@keyframes rb-pullE { 0%, 35% { transform: rotate(-12deg); } 55%, 80% { transform: rotate(-48deg); } 100% { transform: rotate(-12deg); } }
.rb-lever .rb-armL { transform: rotate(32deg); } .rb-lever .rb-elbL { transform: rotate(-70deg); }
.rb-lever .rb-all { animation: rb-tug 2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes rb-tug { 0%, 35%, 100% { transform: none; } 55%, 80% { transform: rotate(4deg) translateY(4px); } }
.rb-lever .rb-legL, .rb-lever .rb-legR { animation: rb-squatL 2s cubic-bezier(.6, 0, .3, 1) infinite; }
.rb-lever .rb-kneeL, .rb-lever .rb-kneeR { animation: rb-squatK 2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes rb-squatL { 0%, 35%, 100% { transform: none; } 55%, 80% { transform: rotate(-14deg); } }
@keyframes rb-squatK { 0%, 35%, 100% { transform: none; } 55%, 80% { transform: rotate(26deg); } }
/* cheer: lompat, kedua lengan melambai bergantian, lutut menekuk saat mendarat */
.rb-cheer .rb-all { animation: rb-jump 1.1s cubic-bezier(.3, 0, .3, 1) infinite; }
@keyframes rb-jump { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-16px); } 60% { transform: translateY(0); } 70% { transform: translateY(3px) scaleY(.97); } }
.rb-cheer .rb-armL { animation: rb-cheerL .55s ease-in-out infinite alternate; } .rb-cheer .rb-armR { animation: rb-cheerR .55s ease-in-out infinite alternate; }
@keyframes rb-cheerL { from { transform: rotate(140deg); } to { transform: rotate(172deg); } }
@keyframes rb-cheerR { from { transform: rotate(-172deg); } to { transform: rotate(-140deg); } }
.rb-cheer .rb-elbL, .rb-cheer .rb-elbR { animation: rb-flick .55s ease-in-out infinite alternate; }
@keyframes rb-flick { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.rb-cheer .rb-legL, .rb-cheer .rb-legR { animation: rb-tuckL 1.1s ease-in-out infinite; } .rb-cheer .rb-kneeL, .rb-cheer .rb-kneeR { animation: rb-tuckK 1.1s ease-in-out infinite; }
@keyframes rb-tuckL { 0%, 30%, 100% { transform: none; } 45% { transform: rotate(-12deg); } 70% { transform: rotate(-16deg); } }
@keyframes rb-tuckK { 0%, 30%, 100% { transform: none; } 45% { transform: rotate(30deg); } 70% { transform: rotate(34deg); } }
.rb-cheer .rb-shadow { transform-origin: 60px 152px; animation: rb-shade 1.1s ease-in-out infinite; }
@keyframes rb-shade { 35% { transform: scaleX(.7); opacity: .18; } }
/* wave: lengan kanan terangkat melambai */
.rb-wave .rb-armR { transform: rotate(-150deg); } .rb-wave .rb-elbR { animation: rb-flick .45s ease-in-out infinite alternate; }
.rb-wave .rb-armL { animation: rb-armw 2.4s ease-in-out infinite; }
.rb-wave .rb-all { animation: rb-bob 1.2s ease-in-out infinite; }
.fr-fx:not(.on) .rb *, html.gm-hidden .rb * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .rb * { animation: none !important; } }


/* ---------- AI-ANCHOR: CSS_FX_COLLECT — TASK-045 (owner #93): robot menyekop koin ke gerobak di samping tombol COLLECT (js/fx-bots.js FX.collector).
   Satu siklus --col-d (1.8 dtk) untuk semua bagian: 0–34% jongkok & menyekop tumpukan · 34–58% angkat sekop melewati kepala ·
   58–80% 2 koin terbang melengkung (X linear + Y naik-turun terpisah) · 80–90% gerobak memantul + bintang. Hanya transform/opacity;
   berhenti tanpa .on (di luar layar) & tab tersembunyi; prefers-reduced-motion = diam. ---------- */
.col-box { --s: 1; position: relative; flex: none; width: calc(168px * var(--s)); height: calc(104px * var(--s)); }
.col-scene { --col-d: 1.8s; position: absolute; left: 0; top: 0; width: 168px; height: 104px; transform: scale(var(--s)); transform-origin: 0 0; }
.col-scene::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, rgba(94, 240, 255, .45) 20%, rgba(94, 240, 255, .45) 80%, transparent); }
.col-cart { position: absolute; left: 0; bottom: 5px; width: 44px; transform-origin: 50% 100%; animation: col-cart var(--col-d) ease-in-out infinite; }
.col-cart svg, .col-pile svg { display: block; width: 100%; height: auto; overflow: visible; }
.col-wh { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes col-cart { 0%, 78%, 100% { transform: none; } 83% { transform: translateY(2px) scale(1.04, .9); } 90% { transform: translateY(-2px) scale(.98, 1.03); } }
.col-star { position: absolute; left: 50%; top: -12px; width: 16px; height: 16px; margin-left: -8px; background: #fff3b0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: col-star var(--col-d) ease-out infinite; }
@keyframes col-star { 0%, 80% { opacity: 0; transform: scale(0) rotate(0); } 86% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
.col-bot { position: absolute; left: 42px; bottom: 2px; width: 84px; }
.col-pile { position: absolute; right: 8px; bottom: 5px; width: 44px; transform-origin: 50% 100%; animation: col-pile var(--col-d) ease-in-out infinite; }
@keyframes col-pile { 0%, 18%, 60%, 100% { transform: none; } 28% { transform: scale(1.06, .86); } 40% { transform: scale(.98, 1.03); } }
.col-glint { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: col-glint 2.4s ease-in-out infinite; }
@keyframes col-glint { 0%, 60%, 100% { opacity: 0; transform: scale(.2); } 75% { opacity: 1; transform: scale(1) rotate(90deg); } }
/* koin terbang: pembungkus = gerak X (linear), anak = gerak Y (naik lalu jatuh) → lintasan parabola */
.col-fly { position: absolute; left: 51px; top: 40px; width: 14px; height: 14px; opacity: 0; animation: col-fx var(--col-d) linear infinite; }
.col-fly > i { display: block; width: 100%; height: 100%; border: 2px solid #0b1024; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #ffc933 45%, #e08e00); animation: col-fy var(--col-d) infinite; }
.col-fly.b { --dx: -24px; left: 57px; animation-delay: .06s; }
.col-fly.b > i { animation-delay: .06s; transform: scale(.85); }
@keyframes col-fx { 0%, 57% { opacity: 0; transform: translateX(0); } 59% { opacity: 1; } 79% { opacity: 1; transform: translateX(var(--dx, -32px)); } 81%, 100% { opacity: 0; transform: translateX(var(--dx, -32px)); } }
@keyframes col-fy { 0%, 58% { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); } 67% { transform: translateY(-16px) rotate(160deg); animation-timing-function: cubic-bezier(.6, 0, .8, .4); } 80%, 100% { transform: translateY(20px) rotate(320deg); } }
/* robot: aksi scoop */
.rb-scoop .rb-all { animation: rb-sAll var(--col-d, 1.8s) ease-in-out infinite; }
@keyframes rb-sAll { 0%, 100% { transform: none; } 22%, 34% { transform: translateY(5px) rotate(4deg); } 58% { transform: translateY(-2px) rotate(-5deg); } 68% { transform: rotate(-3deg); } }
.rb-scoop .rb-armR { animation: rb-sArm var(--col-d, 1.8s) ease-in-out infinite; }
@keyframes rb-sArm { 0%, 100% { transform: rotate(-20deg); } 22% { transform: rotate(-38deg); } 34% { transform: rotate(-32deg); } 58% { transform: rotate(122deg); } 68% { transform: rotate(116deg); } }
.rb-scoop .rb-elbR { animation: rb-sElb var(--col-d, 1.8s) ease-in-out infinite; }
@keyframes rb-sElb { 0%, 100% { transform: none; } 22% { transform: rotate(6deg); } 34% { transform: rotate(-4deg); } 58% { transform: rotate(-34deg); } 68% { transform: rotate(-20deg); } }
.rb-scoop .rb-armL { animation: rb-sArmL var(--col-d, 1.8s) ease-in-out infinite; }
@keyframes rb-sArmL { 0%, 100% { transform: rotate(18deg); } 22%, 34% { transform: rotate(34deg); } 58% { transform: rotate(-24deg); } }
.rb-scoop .rb-elbL { transform: rotate(-28deg); }
.rb-scoop .rb-legL, .rb-scoop .rb-legR { animation: rb-sLeg var(--col-d, 1.8s) ease-in-out infinite; }
.rb-scoop .rb-kneeL, .rb-scoop .rb-kneeR { animation: rb-sKnee var(--col-d, 1.8s) ease-in-out infinite; }
@keyframes rb-sLeg { 0%, 50%, 100% { transform: none; } 22%, 34% { transform: rotate(-12deg); } }
@keyframes rb-sKnee { 0%, 50%, 100% { transform: none; } 22%, 34% { transform: rotate(24deg); } }
.rb-scoop .rb-head { animation: rb-sHead var(--col-d, 1.8s) ease-in-out infinite; }
@keyframes rb-sHead { 0%, 100% { transform: none; } 22%, 34% { transform: rotate(8deg); } 58% { transform: rotate(-10deg); } 72% { transform: rotate(-6deg); } }
.rb-load { animation: rb-sLoad var(--col-d, 1.8s) linear infinite; }
@keyframes rb-sLoad { 0%, 21% { opacity: 0; } 25%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
/* setelah COLLECT berhasil: robot bersorak (kelas .win dari room-app.js) */
.col-box.win .col-bot { animation: col-win .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes col-win { from { transform: scale(.8); } }
.col-box:not(.on) *, html.gm-hidden .col-box * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .col-box * { animation: none !important; } .col-fly { opacity: 0; } }

/* ---------- AI-ANCHOR: CSS_GM_GSI — TASK-051 (owner #116): tombol Google di tema gelap ----------
   Halaman memakai `color-scheme: dark`; dokumen iframe Google Identity Services berskema terang → browser mengecat latar iframe
   putih solid (kotak putih di belakang pill). Samakan skema iframe → latar transparan. Bingkai kaca neon + kilau lewat
   (transform saja, berhenti saat tab tersembunyi / reduced motion). Dipakai onboarding (daftar) + /auth. */
iframe[src*="accounts.google.com"] { color-scheme: light; }
.gm-gsi { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 52px; padding: 4px; overflow: hidden;
	border: 1px solid rgba(94, 240, 255, .35); border-radius: 999px; background: linear-gradient(180deg, rgba(29, 43, 102, .55), rgba(8, 12, 32, .75));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 16px rgba(94, 240, 255, .12); transition: border-color .2s ease, box-shadow .2s ease; }
.gm-gsi:hover { border-color: rgba(94, 240, 255, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 24px rgba(94, 240, 255, .25); }
.gm-gsi::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 40%; pointer-events: none;
	background: linear-gradient(105deg, transparent, rgba(94, 240, 255, .18) 50%, transparent); transform: translate3d(-120%, 0, 0); animation: gm-gsi-sweep 5s 1.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes gm-gsi-sweep { 0% { transform: translate3d(-120%, 0, 0); } 35%, 100% { transform: translate3d(360%, 0, 0); } }
.gm-gsi:empty { display: none; }
html.gm-hidden .gm-gsi::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .gm-gsi::after { animation: none; opacity: 0; } }