/* ============================================================ AIBIO — Room (TASK-014, v0.99.172): member /room + store publik /@user/. Di atas css/mine.css (token --gm-*). Simple (owner #21): 1 kartu hasil + Collect, 1 bar energi + Share, 1 BOX (karakter + slot), bottom nav 4 tab. AI-ANCHOR: CSS_ROOM ============================================================ */ .rm main { padding-bottom: 96px; } @media (min-width: 900px) { .rm main { padding-bottom: 48px; } } .rm-top-r { display: flex; align-items: center; gap: 8px; } .rm-bal { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 4px; border: 3px solid var(--gm-line); border-radius: 999px; background: linear-gradient(#1b2446, #0d1330); color: var(--gm-gold); font-size: 16px; font-weight: 900; text-decoration: none; } .rm-bal svg { width: 32px; height: 32px; } .rm-ib { -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: linear-gradient(#34427a, #26315e); color: var(--gm-cream); cursor: pointer; } .rm-ib svg { width: 20px; height: 20px; } .rm-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; } @media (min-width: 900px) { .rm-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; gap: 24px; padding-top: 24px; } .rm-side { display: grid; gap: 16px; position: sticky; top: 96px; } } .rm-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } /* kartu hasil */ .rm-earn { display: grid; gap: 12px; padding: 24px 16px 16px; } .rm-earn .k { color: var(--gm-mut); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .rm-earn .v { font-size: clamp(24px, 7vw, 36px); line-height: 1.1; color: var(--gm-gold); text-shadow: 0 3px 0 var(--gm-line); white-space: nowrap; overflow: hidden; } /* TASK-055 (owner #125): angka SELALU 1 baris — ukuran huruf dari lebar kolom (cqi) / jumlah karakter (--n, diisi startTick) */ @supports (width: 1cqi) { .rm-earn { container: rmearn / inline-size; } .rm-earn-l { container-type: inline-size; } .rm-earn .v { font-size: clamp(20px, calc(100cqi / (var(--n, 9) * .64)), 48px); } } .rm-earn .s { color: var(--gm-green); font-size: 14px; font-weight: 900; } .rm-earn .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rm-earn .gm-btn { min-width: 160px; } /* TASK-055 (owner #127): 1 kolom di semua lebar — angka besar di atas, baris bawah = robot (karakter status) | COLLECT */ .rm-earn-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .rm-earn-l { display: grid; gap: 8px; min-width: 0; } .rm-earn-r { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; } .rm-earn-r .col-box { --s: .8; grid-row: 1 / span 2; align-self: end; } /* ---------- AI-ANCHOR: CSS_FX_MINER — TASK-055 (owner #131): robot penambang hidup di atas COLLECT (js/fx-bots.js FX.miner) ---------- Siklus 4.8 dtk: ayunan di 9% · 25% · 41% (beliung naik → hantam batu: badan condong, lutut menekuk, kepala mengangguk, batu bergetar, percikan, 1 koin meletik per ayunan) → 50–96% menunggu hasil (beliung turun, gelembung $ muncul, menoleh, kaki mengetuk). Robot 72 px (viewBox 160 → skala .45): ujung beliung saat menghantam ≈ (73, 55) px dari kiri-atas robot = posisi batu. Hanya transform/opacity · berhenti di luar layar (.on dari colWatch) & tab tersembunyi · reduced-motion = pose diam. */ .rm-mn { display: flex; justify-content: center; } .mn-scene { position: relative; display: block; width: 160px; height: 80px; } .mn-bot { position: absolute; left: 24px; top: 0; width: 72px; } .mn-rock { position: absolute; left: 92px; top: 50px; width: 40px; height: 32px; transform-origin: 50% 100%; animation: mn-rock 4.8s linear infinite; } .mn-rock svg, .mn-bub svg { display: block; width: 100%; height: 100%; overflow: visible; } .mn-spark { position: absolute; left: 0; top: -4px; width: 16px; height: 16px; background: #fff3b0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: mn-spark 4.8s linear infinite; } .mn-bub { position: absolute; left: 0; top: 0; width: 32px; height: 28px; transform-origin: 80% 100%; opacity: 0; animation: mn-bub 4.8s cubic-bezier(.34, 1.56, .64, 1) infinite; } .mn-c { position: absolute; left: 104px; top: 48px; width: 14px; height: 14px; border: 2px solid var(--gm-line); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #ffc933 45%, #e08e00); opacity: 0; animation: mn-coin 4.8s cubic-bezier(.2, .6, .4, 1) infinite; } .mn-c.b { animation-delay: .768s; } .mn-c.c { animation-delay: 1.536s; } @keyframes mn-rock { 0%, 8%, 12%, 24%, 28%, 40%, 44%, 100% { transform: none; } 9%, 25%, 41% { transform: translateX(2px) scale(1.04, .94); } 10%, 26%, 42% { transform: translateX(-2px); } } @keyframes mn-spark { 0%, 8.5%, 13%, 24.5%, 29%, 40.5%, 45%, 100% { opacity: 0; transform: scale(.2); } 9.5%, 25.5%, 41.5% { opacity: 1; transform: scale(1.2) rotate(45deg); } } @keyframes mn-coin { 0%, 8.5% { opacity: 0; transform: none; } 10% { opacity: 1; transform: translate(4px, -10px); } 22% { opacity: 1; transform: translate(28px, -40px) rotate(200deg); } 30%, 100% { opacity: 0; transform: translate(36px, -48px) rotate(260deg); } } @keyframes mn-bub { 0%, 50% { opacity: 0; transform: scale(.4); } 56%, 90% { opacity: 1; transform: none; } 70% { transform: scale(1.08); } 96%, 100% { opacity: 0; transform: scale(.6); } } /* robot: aksi mine (sendi dari CSS_FX_BOTS mine.css) */ .rb-mine .rb-all { animation: rb-mAll 4.8s ease-in-out infinite; } .rb-mine .rb-armR { animation: rb-mArmR 4.8s ease-in-out infinite; } .rb-mine .rb-elbR { animation: rb-mElbR 4.8s ease-in-out infinite; } .rb-mine .rb-armL { animation: rb-mArmL 4.8s ease-in-out infinite; } .rb-mine .rb-elbL { transform: rotate(-30deg); } .rb-mine .rb-legL, .rb-mine .rb-legR { animation: rb-mLeg 4.8s ease-in-out infinite; } .rb-mine .rb-kneeL, .rb-mine .rb-kneeR { animation: rb-mKnee 4.8s ease-in-out infinite; } .rb-mine .rb-legR { animation-name: rb-mLegR; } .rb-mine .rb-head { animation: rb-mHead 4.8s ease-in-out infinite; } @keyframes rb-mArmR { 0%, 100% { transform: rotate(-24deg); } 5%, 21%, 37% { transform: rotate(-168deg); } 9%, 25%, 41% { transform: rotate(-66deg); } 14%, 30% { transform: rotate(-82deg); } 48% { transform: rotate(-62deg); } 56%, 94% { transform: rotate(-12deg); } } @keyframes rb-mElbR { 0%, 100% { transform: none; } 5%, 21%, 37% { transform: rotate(-28deg); } 9%, 25%, 41% { transform: none; } 56%, 94% { transform: rotate(8deg); } } @keyframes rb-mArmL { 0%, 100% { transform: rotate(10deg); } 5%, 21%, 37% { transform: rotate(-40deg); } 9%, 25%, 41% { transform: rotate(-70deg); } 48% { transform: rotate(-50deg); } 56%, 94% { transform: rotate(14deg); } } @keyframes rb-mAll { 0%, 48%, 100% { transform: none; } 5%, 21%, 37% { transform: rotate(-4deg); } 9%, 25%, 41% { transform: translateY(3px) rotate(5deg); } 56%, 94% { transform: none; } } @keyframes rb-mLeg { 0%, 50%, 100% { transform: none; } 9%, 25%, 41% { transform: rotate(-8deg); } } @keyframes rb-mLegR { 0%, 50%, 60%, 66%, 72%, 100% { transform: none; } 9%, 25%, 41% { transform: rotate(-8deg); } 63%, 69% { transform: rotate(-14deg); } } @keyframes rb-mKnee { 0%, 50%, 100% { transform: none; } 9%, 25%, 41% { transform: rotate(18deg); } } @keyframes rb-mHead { 0%, 100% { transform: none; } 9%, 25%, 41% { transform: rotate(7deg); } 58%, 78% { transform: rotate(-12deg); } 86% { transform: rotate(4deg); } } .rm-mn:not(.on) *, html.gm-hidden .rm-mn * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .rm-mn * { animation: none !important; } .mn-bub { opacity: 1; transform: none; } } .rm-earn .rm-earn-r .gm-btn { min-width: 0; width: 100%; } @media (max-width: 419px) { .rm-earn-r { gap: 8px; } .rm-earn-r .col-box { --s: .6; } } /* kartu lebar (>= 400 px, desktop/tablet): robot ukuran penuh di kanan angka (tinggi 104 = label + angka + per hari), COLLECT selebar kartu */ @container rmearn (min-width: 400px) { .rm-earn-g { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; } .rm-earn-r { display: contents; } .rm-earn-r .col-box { --s: 1; grid-column: 2; grid-row: 1; align-self: center; } .rm-earn-r .rm-mn { display: none; } .rm-earn-r .gm-btn { grid-column: 1 / -1; } } @media (max-width: 359px) { .rm-earn-r .col-box { --s: .5; } } /* ---------- AI-ANCHOR: CSS_ROOM_ZZ — TASK-055 (owner #127): robot tidur saat belum menambang ---------- Animasi robot dibekukan di pose netral, badan "bernapas" pelan (scaleY), huruf z melayang naik & memudar. Hanya transform/opacity. */ .col-box.zz .col-scene *:not(.col-bot) { animation-play-state: paused !important; } .col-box.zz .col-fly, .col-box.zz .col-star, .col-box.zz .col-glint { visibility: hidden; } .col-box.zz .col-bot { transform-origin: 50% 100%; animation: rm-breathe 3.2s ease-in-out infinite; } .col-box.zz .col-scene { filter: saturate(.55) brightness(.85); } @keyframes rm-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.02, .97); } } .rm-zz { position: absolute; left: calc(104px * var(--s)); top: calc(-8px * var(--s)); width: calc(48px * var(--s)); height: calc(48px * var(--s)); pointer-events: none; } .rm-zz i { position: absolute; left: 0; bottom: 0; color: var(--gm-cyan); font: 400 20px/1 var(--gm-f-title); font-style: normal; text-shadow: 0 2px 0 var(--gm-line); opacity: 0; animation: rm-zz 3s ease-out infinite; } .rm-zz i:nth-child(2) { animation-delay: 1s; font-size: 16px; } .rm-zz i:nth-child(3) { animation-delay: 2s; font-size: 12px; } @keyframes rm-zz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(24px * var(--s)), calc(-40px * var(--s))) scale(1.1); } } @media (prefers-reduced-motion: reduce) { .col-box.zz .col-bot { animation: none; } .rm-zz i { animation: none; opacity: 1; } .rm-zz i:nth-child(1) { transform: translate(4px, -4px); } .rm-zz i:nth-child(2) { transform: translate(14px, -18px); } .rm-zz i:nth-child(3) { transform: translate(24px, -32px); } } /* TASK-055 (owner #125): 4 tombol ubin di kartu hasil — 2 x 2, kartu lebar (>= 480 px) 4 sejajar */ .rm-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @container rmearn (min-width: 480px) { .rm-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* kartu sempit (HP <= 360 px): ubin vertikal — ikon di atas label, label tidak pernah terpotong */ @container rmearn (max-width: 319px) { .rm-acts .rm-act { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 4px; } } .rm-act { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; padding: 0 12px; border: 2px solid rgba(94, 240, 255, .22); border-radius: var(--gm-r1); background: linear-gradient(#2b3769, #1b2446); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); color: var(--gm-cream); font: 900 14px/20px var(--gm-f-body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s cubic-bezier(.22, 1, .36, 1), border-color .2s; } .rm-act > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rm-act:active { transform: scale(.96); } @media (hover: hover) { .rm-act:hover { border-color: rgba(94, 240, 255, .6); } } .rm-act-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 999px; } .rm-act-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .rm-act-ic.deposit { background: rgba(134, 232, 92, .16); color: var(--gm-green); } .rm-act-ic.withdraw { background: rgba(255, 154, 31, .16); color: var(--gm-orange); } .rm-act-ic.stats { background: rgba(94, 240, 255, .14); color: var(--gm-cyan); } .rm-act-ic.wallet { background: rgba(255, 201, 51, .16); color: var(--gm-gold); } .rm-energy .rr-cta { margin-top: 4px; } .rm-energy .rr-cta small { color: #c9d5f2; } /* energi */ .rm-energy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; } .rm-energy .row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; } .rm-energy b { font-size: 16px; font-weight: 900; } .rm-energy small { color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 1.45; } .rm-bar { height: 12px; border: 2px solid var(--gm-line); border-radius: 999px; background: var(--gm-slot); overflow: hidden; } .rm-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gm-cyan), var(--gm-green)); transform-origin: left; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .rm-bar.low i { background: linear-gradient(90deg, #f43f5e, var(--gm-orange)); } .rm-note { margin: 0; padding: 12px; border: 2px dashed rgba(94, 240, 255, .35); border-radius: var(--gm-r1); color: var(--gm-cream); font-size: 14px; font-weight: 800; line-height: 1.45; } /* ---------- AI-ANCHOR: CSS_ROOM_BOX — box: karakter + slot 5 × 2 per space ---------- */ .rm-box { position: relative; padding: 16px 12px 12px; } .rm-box-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .rm-box-h b { font: 400 20px/1.2 var(--gm-f-title); color: #fff; text-shadow: 0 2px 0 var(--gm-line); } .rm-spaces { display: flex; gap: 4px; flex-wrap: wrap; } .rm-spaces button { -webkit-appearance: none; appearance: none; min-width: 44px; min-height: 44px; padding: 0 8px; border: 2px solid var(--gm-line); border-radius: var(--gm-r1); background: #1b2446; color: var(--gm-mut); font: 900 14px/40px var(--gm-f-body); cursor: pointer; } .rm-spaces button[aria-pressed="true"] { background: var(--gm-cyan); color: var(--gm-line); } .rm-spaces button.add { color: var(--gm-gold); } .rm-floor { position: relative; display: grid; gap: 12px; padding: 12px; border: 3px solid var(--gm-line); border-radius: var(--gm-r2); background: radial-gradient(80% 60% at 50% 100%, rgba(94, 240, 255, .14), transparent 70%), linear-gradient(#141b36, #0a0f26); box-shadow: inset 0 0 0 1px rgba(94, 240, 255, .18), inset 0 8px 24px rgba(0, 0, 0, .5); overflow: hidden; } .rm-floor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: repeating-linear-gradient(90deg, rgba(94, 240, 255, .08) 0 1px, transparent 1px 32px); -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); pointer-events: none; } .rm-pilot { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 12px; } .rm-pilot img { width: 88px; height: 99px; flex: none; filter: drop-shadow(0 8px 16px rgba(94, 240, 255, .25)); } .rm-pilot .t { display: grid; gap: 4px; padding-bottom: 8px; } .rm-pilot .t b { font: 400 20px/1.2 var(--gm-f-title); color: #fff; } .rm-pilot .t span { color: var(--gm-cyan); font-size: 14px; font-weight: 900; } /* TASK-055 (owner #132): tombol Change Pilot di atas nama Pilot — elemen 44 px (target sentuh), pil visual 32 px (::before), jarak ke nama dari gap grid */ .rm-chg { -webkit-appearance: none; appearance: none; position: relative; isolation: isolate; justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 8px; border: 0; background: none; color: #e4dcff; font: 900 12px/16px var(--gm-f-body); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s cubic-bezier(.22, 1, .36, 1); } .rm-chg::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border: 2px solid rgba(167, 139, 250, .7); border-radius: 999px; background: #2e2a5e; transition: background-color .2s; } .rm-pilot .t .rm-chg span { color: inherit; font-size: 12px; } .rm-chg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: rm-chg 6s cubic-bezier(.65, 0, .35, 1) infinite; } @keyframes rm-chg { 0%, 80% { transform: none; } 92%, 100% { transform: rotate(360deg); } } .rm-chg:active { transform: scale(.96); } @media (hover: hover) { .rm-chg:hover::before { background: #3d3780; } } html.gm-hidden .rm-chg svg { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .rm-chg svg { animation: none; } } /* TASK-055 (owner #125): Buy miners + Collection — box sempit: 1 baris di bawah Pilot · box >= 520 px: bertumpuk di kanan Pilot */ .rm-box { container: rmbox / inline-size; } .rm-pilot { flex-wrap: wrap; } .rm-pilot-act { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; flex: 1 0 100%; } /* box sempit (HP <= 400 px): ubin vertikal — ikon di atas label, label tidak pernah terpotong */ @container rmbox (max-width: 319px) { .rm-pilot-act .rm-pa { flex-direction: column; gap: 4px; min-height: 56px; padding: 8px 4px; border-radius: var(--gm-r1); } } @container rmbox (min-width: 520px) { .rm-pilot-act { flex: 0 0 176px; grid-auto-flow: row; margin-left: auto; align-self: center; } } .rm-pa { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 16px; border: 2px solid rgba(94, 240, 255, .55); border-radius: 999px; background: rgba(94, 240, 255, .08); color: var(--gm-cyan); font: 900 14px/20px var(--gm-f-body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s cubic-bezier(.22, 1, .36, 1), background-color .2s; } .rm-pa.buy { border-color: var(--gm-line); background: linear-gradient(#ffd75e, var(--gm-gold)); color: var(--gm-line); box-shadow: 0 3px 0 #b8860b, inset 0 2px 0 rgba(255, 255, 255, .45); } .rm-pa > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rm-pa svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .rm-pa:active { transform: scale(.96); } @media (hover: hover) { .rm-pa:not(.buy):hover { background: rgba(94, 240, 255, .18); } } .rm-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .rm-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 2px solid rgba(94, 240, 255, .25); border-radius: var(--gm-r1); background: rgba(10, 15, 38, .75); } .rm-slot img { width: 86%; height: 86%; } .rm-slot small { position: absolute; left: 0; right: 0; bottom: 2px; overflow: hidden; color: var(--gm-mut); font-size: 10px; font-weight: 900; line-height: 12px; text-align: center; white-space: nowrap; text-overflow: clip; } .rm-slot.empty { border-style: dashed; color: rgba(94, 240, 255, .5); font: 400 24px/1 var(--gm-f-title); text-decoration: none; } a.rm-slot.empty:hover { color: var(--gm-cyan); border-color: var(--gm-cyan); } .rm-slot.r-uncommon { border-color: rgba(52, 211, 153, .6); } .rm-slot.r-rare { border-color: rgba(96, 165, 250, .7); } .rm-slot.r-epic { border-color: rgba(167, 139, 250, .8); } .rm-slot.r-legendary { border-color: rgba(255, 201, 51, .9); box-shadow: 0 0 12px rgba(255, 201, 51, .3); } .rm-slot.r-mythic { border-color: rgba(244, 114, 182, .9); box-shadow: 0 0 16px rgba(244, 114, 182, .35); } /* ---------- AI-ANCHOR: CSS_ROOM_BOXSTATS — TASK-055 (owner #133): 2 ubin statistik besar di bawah box ---------- Power: petir berdenyut + gelombang hash 8 batang (bergerak hanya bila power > 0, .on) + kilau menyapu. Slots: meter 10 segmen (terisi = n/max), segmen muncul bertahap lalu berkilau berurutan. Hanya transform/opacity; berhenti saat tab tersembunyi. */ .rm-box-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .rm-bs { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 12px; border: 2px solid rgba(94, 240, 255, .28); border-radius: var(--gm-r2); background: linear-gradient(135deg, rgba(94, 240, 255, .1), rgba(11, 16, 36, .6) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .rm-bs::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; z-index: -1; width: 40%; background: linear-gradient(90deg, transparent, rgba(94, 240, 255, .16), transparent); transform: translateX(0); animation: rm-bs-sweep 4s cubic-bezier(.45, 0, .55, 1) infinite; } .rm-bs.sl::after { animation-delay: 2s; } @keyframes rm-bs-sweep { 0%, 40% { transform: translateX(0); } 100% { transform: translateX(350%); } } .rm-bs-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--gm-r1); background: rgba(94, 240, 255, .14); box-shadow: inset 0 0 0 1px rgba(94, 240, 255, .35); color: var(--gm-cyan); } .rm-bs-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; } .rm-bs.pw .rm-bs-ic { background: rgba(255, 201, 51, .14); box-shadow: inset 0 0 0 1px rgba(255, 201, 51, .4); color: var(--gm-gold); } .rm-bs.pw .rm-bs-ic svg { fill: currentColor; stroke: none; } .rm-bs.pw.on .rm-bs-ic svg { animation: rm-bolt 1.6s ease-in-out infinite; } @keyframes rm-bolt { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .75; } } .rm-bs > span:not([class]) { display: grid; min-width: 0; } .rm-bs small { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; } .rm-bs b { overflow: hidden; color: #fff; font-size: 20px; line-height: 24px; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 12px rgba(94, 240, 255, .45); } .rm-bs.pw b { color: var(--gm-cyan); } .rm-bs-wave, .rm-bs-seg { grid-column: 1 / -1; display: grid; gap: 4px; height: 12px; } .rm-bs-wave { grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; } .rm-bs-wave i { height: 12px; border-radius: 2px; background: linear-gradient(var(--gm-cyan), rgba(94, 240, 255, .25)); transform-origin: 50% 100%; transform: scaleY(.25); opacity: .45; } .rm-bs.pw.on .rm-bs-wave i { opacity: 1; animation: rm-wave 1.2s ease-in-out infinite; } .rm-bs.pw.on .rm-bs-wave i:nth-child(2n) { animation-delay: -.3s; } .rm-bs.pw.on .rm-bs-wave i:nth-child(3n) { animation-delay: -.6s; } .rm-bs.pw.on .rm-bs-wave i:nth-child(5n) { animation-delay: -.9s; } @keyframes rm-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } .rm-bs-seg { grid-template-columns: repeat(10, minmax(0, 1fr)); } .rm-bs-seg i { border: 1px dashed rgba(94, 240, 255, .35); border-radius: 2px; transform-origin: 50% 100%; animation: rm-seg-in .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--k) * .05s) both; } .rm-bs-seg i.on { border: 0; background: linear-gradient(var(--gm-cyan), #3aa8d8); box-shadow: 0 0 8px rgba(94, 240, 255, .55); animation: rm-seg-in .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--k) * .05s) both, rm-seg-glow 2.4s ease-in-out calc(.6s + var(--k) * .12s) infinite; } @keyframes rm-seg-in { from { transform: scaleY(0); opacity: 0; } } @keyframes rm-seg-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (max-width: 359px) { .rm-bs { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 8px; } .rm-bs-ic { width: 32px; height: 32px; } .rm-bs-ic svg { width: 20px; height: 20px; } .rm-bs b { font-size: 16px; } } html.gm-hidden .rm-bs *, html.gm-hidden .rm-bs::after { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .rm-bs *, .rm-bs::after { animation: none !important; } .rm-bs.pw.on .rm-bs-wave i { transform: scaleY(.7); } } .rm-off .rm-floor { filter: saturate(.35) brightness(.7); } .rm-off .rm-slot img, .rm-off .rm-pilot img { animation-play-state: paused !important; } /* ---------- toko ---------- */ .rm-h { margin: 16px 0; font: 400 clamp(24px, 6vw, 32px)/1.15 var(--gm-f-title); color: #fff; text-shadow: 0 3px 0 var(--gm-line); } .rm-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 16px; border: 3px solid var(--gm-line); border-radius: var(--gm-r2); background: var(--gm-slot); } .rm-seg button { -webkit-appearance: none; appearance: none; min-height: 44px; border: 0; border-radius: var(--gm-r1); background: transparent; color: var(--gm-mut); font: 900 14px/44px var(--gm-f-body); cursor: pointer; } .rm-seg button[aria-selected="true"] { background: linear-gradient(#34427a, #26315e); color: #fff; box-shadow: 0 2px 0 var(--gm-line); } .rm-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .rm-shop { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } } .rm-card { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border: 3px solid var(--gm-line); border-radius: var(--gm-r2); background: linear-gradient(#26315e, #151d42); text-align: center; box-shadow: 0 4px 0 var(--gm-wood-d); } .rm-card img { width: 88px; height: 88px; } .rm-card.char img { height: 99px; } .rm-card b { font: 400 16px/1.25 var(--gm-f-title); color: #fff; } .rm-card .rar { font-size: 12px; font-weight: 900; line-height: 16px; text-transform: uppercase; letter-spacing: .06em; } .rm-card .pw { color: var(--gm-cyan); font-size: 12px; font-weight: 900; line-height: 16px; } .rm-card .est { color: var(--gm-green); font-size: 12px; font-weight: 900; line-height: 16px; } .rm-card .gm-btn { width: 100%; margin-top: 4px; } /* ---------- AI-ANCHOR: CSS_FX_PILOT — TASK-061 (owner #140): panggung Pilot di Shop (js/fx-bots.js FX.pilot) ---------- Robot bersendi warna Pilot 76 px + alat khas. Semua transform/opacity; berhenti saat kartu tak terlihat (.plx-card:not(.on)) & tab tersembunyi. */ .plx-sc { position: relative; z-index: 1; display: block; width: 128px; height: 96px; transform: scale(1.3); transform-origin: 50% 80%; } @media (max-width: 767px) { .plx-sc { transform: scale(1.1); } } @media (max-width: 359px) { .plx-sc { transform: scale(.95); } } .plx-bot { position: absolute; left: 12px; bottom: 0; width: 76px; } .plx-mn { position: absolute; left: 0; bottom: 8px; width: 128px; height: 64px; } .plx-mn .mn-scene { transform: scale(.8); transform-origin: 0 0; } .plx-pc { position: absolute; left: 4px; bottom: 4px; width: 124px; height: 78px; } .plx-pc .pc-scene { transform: scale(1.2); transform-origin: 0 100%; } .plx-col { position: absolute; left: 2px; bottom: 8px; width: 126px; height: 78px; } .plx-col .col-box { --s: .75; display: block; } .plx-holo { position: absolute; right: 4px; top: -16px; display: grid; gap: 4px; width: 48px; padding: 8px; border: 1px solid rgba(94, 240, 255, .6); border-radius: 4px; background: rgba(94, 240, 255, .12); transform: skewY(-6deg); animation: plx-holo 2.4s ease-in-out infinite; } .plx-holo i { height: 3px; border-radius: 2px; background: var(--gm-cyan); transform-origin: 0 50%; animation: plx-line 1.6s ease-in-out infinite; } .plx-holo i:nth-child(2) { width: 70%; animation-delay: .3s; } .plx-holo i:nth-child(3) { width: 85%; animation-delay: .6s; } @keyframes plx-holo { 50% { opacity: .6; transform: skewY(-6deg) translateY(-3px); } } @keyframes plx-line { 0%, 100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } } .plx-code { position: absolute; right: 8px; top: 0; width: 56px; height: 48px; } .plx-code b { position: absolute; bottom: 0; color: #4ade80; font: 900 14px/1 ui-monospace, Menlo, Consolas, monospace; text-shadow: 0 0 8px #22c55e; opacity: 0; animation: plx-code 2s linear infinite; } .plx-code b:nth-child(1) { left: 4px; } .plx-code b:nth-child(2) { left: 18px; animation-delay: .5s; } .plx-code b:nth-child(3) { left: 32px; animation-delay: 1s; } .plx-code b:nth-child(4) { left: 46px; animation-delay: 1.5s; } @keyframes plx-code { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } } .plx-drone { position: absolute; right: 4px; top: 4px; width: 48px; height: 24px; animation: plx-hover 2s ease-in-out infinite; } .plx-drone svg { display: block; width: 48px; height: 24px; overflow: visible; } .plx-rot { transform-origin: 12px 6px; animation: plx-rot .12s linear infinite alternate; } .plx-rot.b { transform-origin: 36px 6px; } @keyframes plx-rot { from { transform: scaleX(1); } to { transform: scaleX(.2); } } @keyframes plx-hover { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, 6px); } } .plx-beam { position: absolute; left: 12px; top: 22px; width: 24px; height: 40px; background: linear-gradient(rgba(56, 189, 248, .5), transparent); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); animation: sh-beam 1.2s ease-in-out infinite; } .plx-ground { position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: repeating-linear-gradient(90deg, var(--tc) 0 8px, transparent 8px 16px); opacity: .7; animation: fr-gr .5s linear infinite; } .plx-k-carry .rb-carry .rb-legL, .plx-k-carry .rb-carry .rb-legR, .plx-k-carry .rb-carry .rb-kneeL, .plx-k-carry .rb-carry .rb-kneeR { animation-duration: .6s; } .plx-lev { position: absolute; right: 8px; bottom: 4px; width: 40px; height: 48px; } .plx-lev svg, .plx-cart svg { display: block; width: 100%; height: 100%; overflow: visible; } .plx-led { animation: led-b 1s steps(1) infinite; } .plx-led.b { animation-delay: .5s; } @keyframes led-b { 50% { opacity: .2; } } .plx-k-push .plx-bot { left: 4px; } .plx-cart { position: absolute; left: 78px; bottom: 4px; width: 44px; height: 36px; } .plx-cart .col-wh { animation: rb-spin .8s linear infinite; } .plx-orb { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; animation: plx-hover 3s ease-in-out infinite; } .plx-orb i { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #22d3ee 40%, #7c3aed); box-shadow: 0 0 16px #22d3ee; animation: plx-core 1.6s ease-in-out infinite; } .plx-orb i.r { left: 0; top: 16px; width: 44px; height: 12px; border: 2px solid rgba(167, 139, 250, .9); border-radius: 50%; background: none; box-shadow: none; animation: plx-ring 3s linear infinite; } .plx-orb i.r.b { animation-duration: 4.5s; animation-direction: reverse; border-color: rgba(34, 211, 238, .9); } .plx-orb.gold i:not(.r) { background: radial-gradient(circle at 35% 35%, #fff, #fbbf24 40%, #b45309); box-shadow: 0 0 16px #fbbf24; } .plx-orb.gold i.r { border-color: rgba(251, 191, 36, .9); } .plx-orb.gold i.r.b { border-color: rgba(167, 139, 250, .9); } @keyframes plx-core { 50% { transform: scale(1.2); } } @keyframes plx-ring { to { transform: rotate(360deg); } } .plx-burst { position: absolute; left: 50px; top: 48px; } .plx-burst i { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border: 3px solid var(--tc); border-radius: 50%; opacity: 0; animation: plx-burst 1.8s ease-out infinite; } .plx-burst i:nth-child(2) { animation-delay: .6s; } .plx-burst i:nth-child(3) { animation-delay: 1.2s; } @keyframes plx-burst { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.4); } } .plx-star { position: absolute; width: 12px; height: 12px; background: #fff3b0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: spk-b 1.8s ease-in-out calc(var(--i) * .3s) infinite; } .plx-star:nth-of-type(1) { left: 92px; top: 8px; } .plx-star:nth-of-type(2) { left: 108px; top: 40px; } .plx-star:nth-of-type(3) { left: 4px; top: 16px; } .plx-star:nth-of-type(4) { left: 96px; top: 64px; } .plx-star:nth-of-type(5) { left: 16px; top: 52px; } .plx-star:nth-of-type(6) { left: 116px; top: 20px; } @keyframes spk-b { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } } .plx-card:not(.on) .sh-stage *, .plx-card:not(.on) .sh-stage *::before, html.gm-hidden .plx-sc * { animation-play-state: paused !important; } .plx-card.using::after { opacity: 1; box-shadow: inset 0 0 0 2px var(--tc), 0 0 24px var(--tc); } @media (prefers-reduced-motion: reduce) { .plx-sc *, .plx-sc *::before { animation: none !important; } } /* ---------- AI-ANCHOR: CSS_ROOM_SHOWROOM — TASK-058 (owner #138): kartu Shop = showroom mesin ---------- --tc = warna mesin. Panggung: cahaya berdenyut, sorot cahaya naik, platform cincin berputar (scaleY → tampak 3D), mesin hidup a-.svg. Tagline bercahaya + deskripsi 3 baris maks + chip spesifikasi. Hanya transform/opacity; animasi panggung berhenti saat kartu tak terlihat (.on). */ .sh-card { position: relative; isolation: isolate; overflow: hidden; align-content: start; gap: 4px; padding: 0 12px 12px; animation: rp-in .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .05s) both; } .sh-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--tc); opacity: .45; pointer-events: none; } .sh-stage { position: relative; display: grid; place-items: center; width: calc(100% + 24px); height: 144px; margin: 0 -12px 4px; overflow: hidden; background: linear-gradient(rgba(11, 16, 36, .2), rgba(11, 16, 36, .7)), linear-gradient(rgba(94, 240, 255, .06) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(94, 240, 255, .06) 1px, transparent 1px) 0 0 / 16px 16px; } .sh-glow { position: absolute; left: calc(50% - 80px); top: calc(50% - 80px); width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, var(--tc), transparent); opacity: .3; animation: sh-glow 3s ease-in-out infinite; } @keyframes sh-glow { 50% { opacity: .5; transform: scale(1.1); } } .sh-beam { position: absolute; left: calc(50% - 44px); bottom: 16px; width: 88px; height: 104px; background: linear-gradient(to top, var(--tc), transparent); opacity: .16; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); animation: sh-beam 2.4s ease-in-out infinite; } @keyframes sh-beam { 50% { opacity: .3; } } .sh-ring { position: absolute; left: calc(50% - 56px); bottom: -24px; width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--tc) 0 12%, transparent 12% 25%, var(--tc) 25% 37%, transparent 37% 50%, var(--tc) 50% 62%, transparent 62% 75%, var(--tc) 75% 87%, transparent 87%); -webkit-mask-image: radial-gradient(closest-side, transparent 78%, #000 80%, #000 96%, transparent 98%); mask-image: radial-gradient(closest-side, transparent 78%, #000 80%, #000 96%, transparent 98%); opacity: .8; transform: scaleY(.26) rotate(0deg); animation: sh-ring 6s linear infinite; } @keyframes sh-ring { to { transform: scaleY(.26) rotate(360deg); } } .sh-img { position: relative; z-index: 1; width: 120px; height: 120px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); animation: sh-float 4.2s cubic-bezier(.45, 0, .55, 1) calc(var(--i, 0) * -.7s) infinite; } @keyframes sh-float { 50% { transform: translateY(-6px); } } .sh-card b { margin-top: 4px; } .sh-tag { color: var(--tc); font: 400 14px/1.25 var(--gm-f-title); font-style: normal; letter-spacing: .02em; text-shadow: 0 0 12px var(--tc); } .sh-d { display: -webkit-box; overflow: hidden; margin: 0; color: #c9d5f2; font-size: 12px; font-weight: 800; line-height: 1.5; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .sh-spec { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; } .sh-spec > span { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(11, 16, 36, .6); } .sh-spec svg { width: 12px; height: 12px; fill: currentColor; } .sh-card .gm-btn { margin-top: 8px; } @media (hover: hover) { .sh-card { transition: transform .25s cubic-bezier(.22, 1, .36, 1); } .sh-card:hover { transform: translateY(-4px); } .sh-card:hover::after { opacity: 1; box-shadow: inset 0 0 0 2px var(--tc), 0 0 24px var(--tc); } } .sh-card:not(.on) .sh-stage *, html.gm-hidden .sh-stage * { animation-play-state: paused; } @media (max-width: 419px) { .sh-stage { height: 128px; } .sh-img { width: 104px; height: 104px; } .sh-d { -webkit-line-clamp: 4; } } @media (max-width: 359px) { .sh-stage { height: 112px; } .sh-img { width: 88px; height: 88px; } } @media (prefers-reduced-motion: reduce) { .sh-card, .sh-stage *, .sh-img { animation: none !important; } } .rar-common { color: #b4c2e6; } .rar-uncommon { color: #34d399; } .rar-rare { color: #60a5fa; } .rar-epic { color: #a78bfa; } .rar-legendary { color: #ffc933; } .rar-mythic { color: #f472b6; } .rm-space { display: grid; justify-items: center; gap: 12px; padding: 24px 16px; text-align: center; } .rm-space .n { font: 400 40px/1.1 var(--gm-f-title); color: var(--gm-gold); } /* ---------- tim / VIP ---------- */ .rm-vip { display: grid; gap: 12px; padding: 24px 16px 16px; } .rm-vip .lv-n { font: 400 40px/1.1 var(--gm-f-title); color: var(--gm-gold); text-shadow: 0 3px 0 var(--gm-line); } /* owner #171/#172: benefit VIP + tabel level */ .vip-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .vip-perks li { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px 4px; border: 2px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-slot); text-align: center; } .vip-perks span { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; overflow-wrap: anywhere; hyphens: auto; } .vip-perks b { color: var(--gm-green); font-size: 16px; font-weight: 900; line-height: 20px; overflow-wrap: anywhere; } s.vip-was { opacity: .6; font-weight: 800; } .rm-vip > a.gm-btn { justify-content: center; text-align: center; } .rp-vip { display: inline-flex; align-items: center; min-height: 24px; margin-left: 4px; padding: 0 8px; border-radius: 999px; background: linear-gradient(180deg, #ffd95a, #f5a524); color: #3a2500; font-size: 12px; font-weight: 900; vertical-align: middle; } .vip-ladder { border: 2px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-slot); } .vip-ladder summary { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--gm-cream); font-size: 14px; font-weight: 900; cursor: pointer; } .vip-ladder table { width: 100%; border-collapse: collapse; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .vip-ladder th, .vip-ladder td { padding: 8px 4px; border-top: 1px solid var(--gm-line); text-align: center; color: #c9d5f2; } .vip-ladder thead th { color: var(--gm-mut); font-size: 12px; } .vip-ladder tr.on th, .vip-ladder tr.on td { color: var(--gm-gold); background: rgba(255, 201, 51, .08); } .rm-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .rm-levels 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); } .rm-levels li b { color: var(--gm-green); font-size: 16px; font-weight: 900; } .rm-levels li span { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; } .rm-levels li.lock { opacity: .45; } .rm-levels li.lock b { color: var(--gm-mut); } .rm-link { display: flex; gap: 8px; } .rm-link input { flex: 1; min-width: 0; min-height: 48px; padding: 0 12px; border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-slot); color: var(--gm-cream); font: 800 14px/1 var(--gm-f-body); } /* ---------- nav bawah (HP) / atas tengah (desktop) ---------- */ .rm-nav { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 3px solid var(--gm-line); border-radius: var(--gm-r3); background: rgba(21, 29, 66, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } .rm-nav a { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 56px; border-radius: var(--gm-r2); color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; text-decoration: none; } .rm-nav a svg, .rm-nav a img { width: 24px; height: 24px; } @media (max-width: 399px) { .rm-nav a { font-size: 10px; line-height: 12px; letter-spacing: -.02em; } } .rm-nav a[aria-current="page"] { background: linear-gradient(#34427a, #26315e); color: #fff; box-shadow: inset 0 0 0 1px rgba(94, 240, 255, .25); } @media (min-width: 900px) { .rm-nav { left: 50%; right: auto; bottom: auto; top: 12px; width: 540px; translate: -50% 0; z-index: 50; } .rm-nav a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 14px; line-height: 20px; } } /* ---------- AI-ANCHOR: CSS_ROOM_HDNAV — TASK-055 (owner #125): nav /room di DALAM header ---------- HP: tetap melayang di bawah (position fixed). Blur header dipindah ke ::before — backdrop-filter pada header sendiri akan menjadikan header containing block untuk anak fixed (nav bawah ikut header). Desktop >= 900: header = grid 3 kolom (brand | nav | saldo), nav tepat di tengah dan secara struktur TIDAK bisa menabrak saldo. Tinggi: header 72 = 8 + 56 + 8 · nav 56 = garis 2 + padding 4 + item 44 + 4 + 2 -> tengah sama. 900-1199: mode kompak — hanya item aktif yang menampilkan label (label lain tetap dibaca screen reader). */ .rm-hd { -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---------- AI-ANCHOR: CSS_ROOM_HDBRAND — TASK-059 (owner #139): [ikon] AiBio.Store + robot menambang di header ---------- .hd-l = kolom kiri (container). #hd-mine: panggung FX.miner skala .5 (80 × 40) + rel koin mengalir, melebar mengisi sisa ruang; disembunyikan bila < 88 px. Container sempit (< 232 px, HP): ikon statis diganti robot penambang mini (#hd-mini, skala .36). Hanya transform/opacity; berhenti saat tab tersembunyi; reduced-motion = diam. */ .hd-l { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; container: hdl / inline-size; } .rm-hd .hd-brand { flex: none; gap: 8px; margin: 0; } /* TASK-067 (owner #143): logo heksagon chip neon (orbit berputar, sirkuit berdenyut, bingkai bercahaya) + wordmark Orbitron bergradien */ .hd-brand svg.hd-logo { width: 40px; height: 40px; overflow: visible; filter: drop-shadow(0 0 8px rgba(94, 240, 255, .35)); } .hd-logo .lg-orb { transform-origin: 32px 32px; animation: lg-orb 6s linear infinite; } .hd-logo .lg-fr { animation: lg-fr 3s ease-in-out infinite; } .hd-logo .lg-d { animation: lg-d 1.8s ease-in-out infinite; } .hd-logo .lg-d.b { animation-delay: .6s; } .hd-logo .lg-d.c { animation-delay: 1.2s; } .hd-logo .lg-tr { animation: lg-tr 1.8s ease-in-out infinite; } .hd-logo .lg-sp { transform-origin: 50px 10.5px; animation: lg-sp 2.4s ease-in-out infinite; } @keyframes lg-orb { to { transform: rotate(360deg); } } @keyframes lg-fr { 50% { opacity: .7; } } @keyframes lg-d { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes lg-tr { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @keyframes lg-sp { 0%, 60%, 100% { opacity: 0; transform: scale(.3); } 75% { opacity: 1; transform: scale(1.1) rotate(45deg); } } .hd-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; } .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)); } .hd-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); } html.gm-hidden .hd-logo * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .hd-logo * { animation: none !important; } } .hd-mini { display: none; position: relative; flex: none; width: 48px; height: 40px; overflow: hidden; border-radius: var(--gm-r1); background: radial-gradient(closest-side, rgba(255, 201, 51, .25), transparent); } .hd-mini .hd-sc { position: absolute; left: -4px; top: 6px; width: 160px; height: 80px; transform: scale(.36); transform-origin: 0 0; } .hd-mini .rb { width: 100%; height: auto; } /* .gm-brand svg { 40 × 40 } (mine.css) jangan ikut memaksa robot */ .hd-mine { position: relative; display: flex; align-items: flex-end; flex: 1 1 0; min-width: 0; height: 44px; container-type: inline-size; overflow: hidden; } .hd-mine .hd-sc { position: relative; flex: none; width: 80px; height: 40px; } .hd-mine .hd-sc .mn-scene { transform: scale(.5); transform-origin: 0 0; } .hd-rail { position: relative; flex: 1 1 0; min-width: 0; height: 12px; margin: 0 0 8px -12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); } .hd-rail::before { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; border-radius: 1px; background: repeating-linear-gradient(90deg, rgba(94, 240, 255, .5) 0 6px, transparent 6px 12px); } .hd-rail i { position: absolute; left: -48px; top: 0; width: calc(100% + 96px); height: 10px; background: radial-gradient(circle at 5px 5px, #ffc933 0 3.5px, #b86e00 4px, transparent 4.5px) 0 0 / 24px 10px repeat-x; animation: hd-rail 1.2s linear infinite; } @keyframes hd-rail { to { transform: translateX(24px); } } @container (max-width: 87px) { .hd-mine > * { display: none; } } /* HP: grup kanan diringkas supaya brand muat tanpa menabrak saldo */ @media (max-width: 419px) { .rm-top-r { gap: 4px; } .rm-bal { gap: 4px; padding: 0 8px 0 4px; font-size: 14px; } .rm-bal svg { width: 28px; height: 28px; } .hd-brand .hd-word { font-size: 14px; gap: 0; letter-spacing: 0; } .hd-brand .hd-word i { font-size: 10px; letter-spacing: .04em; } .hd-l { gap: 4px; } .rm-hd .hd-brand { gap: 4px; } } @media (max-width: 359px) { .hd-brand b { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .hd-brand .hd-word i { display: none; } } @container hdl (max-width: 231px) { .hd-brand .hd-logo { display: none; } .hd-mini { display: block; } .hd-mine { display: none; } } html.gm-hidden .hd-l *, html.gm-hidden .hd-l *::before { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .hd-l .mn-scene *, .hd-rail i { animation: none !important; } } .rm-hd::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; } .rm-nav a { position: relative; } .rm-nav a::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 16px; height: 3px; margin-left: -8px; border-radius: 999px; background: var(--gm-cyan); box-shadow: 0 0 8px var(--gm-cyan); opacity: 0; transform: scaleX(0); transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s; } .rm-nav a[aria-current="page"]::after { opacity: 1; transform: none; } .rm-nav a[aria-current="page"] svg { color: var(--gm-cyan); filter: drop-shadow(0 0 6px rgba(94, 240, 255, .55)); } .rm-nav a.rm-nav-free[aria-current="page"] svg { color: var(--gm-gold); filter: drop-shadow(0 0 6px rgba(255, 201, 51, .55)); } @media (min-width: 900px) { .rm-hd .gm-wrap { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 16px; min-height: 72px; } .rm-hd .gm-brand { justify-self: start; margin: 0; } .rm-hd .hd-l { justify-self: stretch; } .rm-hd .rm-top-r { justify-self: end; } .rm-hd .rm-nav { position: static; left: auto; right: auto; top: auto; bottom: auto; width: auto; translate: none; display: flex; gap: 4px; padding: 4px; border-width: 2px; border-radius: 999px; background: linear-gradient(rgba(38, 49, 94, .9), rgba(21, 29, 66, .9)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 16px rgba(0, 0, 0, .35); } .rm-hd .rm-nav a { height: 44px; padding: 0 16px; border-radius: 999px; transition: background-color .2s, color .2s; } .rm-hd .rm-nav a svg { width: 20px; height: 20px; flex: none; } .rm-hd .rm-nav a::after { bottom: 2px; } .rm-hd .rm-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(94, 240, 255, .35), 0 0 16px rgba(94, 240, 255, .18); } } @media (min-width: 900px) and (hover: hover) { .rm-hd .rm-nav a:not([aria-current="page"]):hover { background: rgba(94, 240, 255, .1); color: #fff; } } @media (min-width: 900px) and (max-width: 1199px) { .rm-hd .rm-nav a:not([aria-current="page"]) { width: 48px; padding: 0; } .rm-hd .rm-nav a:not([aria-current="page"]) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .rm-nav a::after, .rm-hd .rm-nav a { transition: none; } } /* ---------- sheet ---------- */ .rm-sheet { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; background: rgba(5, 8, 20, .6); opacity: 0; transition: opacity .25s ease; } .rm-sheet.on { opacity: 1; } .rm-sheet-in { max-height: 88vh; overflow: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); border: 3px solid var(--gm-line); border-bottom: 0; border-radius: var(--gm-r3) var(--gm-r3) 0 0; background: linear-gradient(#26315e, #151d42); transform: translate3d(0, 40px, 0); transition: transform .35s cubic-bezier(.22, 1, .36, 1); } .rm-sheet.on .rm-sheet-in { transform: none; } @media (min-width: 768px) { .rm-sheet { align-items: center; justify-items: center; } .rm-sheet-in { width: min(480px, 92vw); border-bottom: 3px solid var(--gm-line); border-radius: var(--gm-r3); } } .rm-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; } .rm-sheet-h b { font: 400 24px/1.2 var(--gm-f-title); color: #fff; } .rm-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .rm-rates li { display: grid; gap: 4px; padding: 12px; border: 2px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-slot); } .rm-rates span { color: var(--gm-mut); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; } .rm-rates b { color: var(--gm-green); font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; } .rm-share { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; } .rm-share a, .rm-share button { -webkit-appearance: none; appearance: none; display: grid; justify-items: center; gap: 4px; min-height: 64px; padding: 8px 4px; border: 2px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-slot); color: var(--gm-mut); font: 900 12px/16px var(--gm-f-body); text-decoration: none; cursor: pointer; } .rm-share svg { width: 28px; height: 28px; } /* TASK-037 B1: ikon sosmed berwarna brand dalam lingkaran gelap, angkat halus saat hover/tekan (transform saja) */ .rm-share a { transition: transform .18s ease, border-color .18s ease; } .rm-share a:hover { border-color: rgba(94, 240, 255, .55); transform: translateY(-2px); } .rm-share a:active { transform: scale(.96); } .rm-sh-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .06); } .rm-sh-ic svg { width: 24px; height: 24px; } .rm-sh-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rm-share.row { display: flex; gap: 8px; margin: 12px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rm-share.row::-webkit-scrollbar { display: none; } .rm-share.row a { flex: none; width: 64px; min-height: 64px; padding: 8px 0 4px; font-size: 10px; line-height: 12px; } .rm-toast { pointer-events: none; position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 90; max-width: min(420px, 92vw); padding: 12px 16px; border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: #1b2446; color: var(--gm-cream); font-size: 14px; font-weight: 800; line-height: 1.45; translate: -50% 0; animation: gm-pop2 .35s cubic-bezier(.34, 1.56, .64, 1); } .rm-toast.bad { background: #3b120d; } .rm-toast.good { background: #16361f; } @keyframes gm-pop2 { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.94); } } .rm-empty { padding: 48px 16px; color: var(--gm-mut); text-align: center; font-weight: 800; } /* ---------- store publik ---------- */ .rp-head { display: flex; align-items: center; gap: 12px; padding-top: 24px; } .rp-av { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border: 3px solid var(--gm-line); border-radius: 50%; background: linear-gradient(var(--gm-cyan), #a78bfa); color: var(--gm-line); font: 400 24px/1 var(--gm-f-title); } .rp-head h1 { margin: 0; font: 400 clamp(24px, 6vw, 32px)/1.15 var(--gm-f-title); color: #fff; text-shadow: 0 3px 0 var(--gm-line); overflow-wrap: anywhere; } .rp-head p { margin: 4px 0 0; color: var(--gm-mut); font-size: 14px; font-weight: 800; } .rp-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--gm-gold); color: var(--gm-line); font-size: 12px; font-weight: 900; } .rp-visit { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .rp-ring { position: relative; width: 48px; height: 48px; flex: none; } .rp-ring svg { width: 48px; height: 48px; transform: rotate(-90deg); } .rp-ring circle { fill: none; stroke-width: 5; } .rp-ring .bg { stroke: #26315e; } .rp-ring .fg { stroke: var(--gm-cyan); stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; transition: stroke-dashoffset .25s linear; } .rp-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 900; } .rp-visit p { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.45; } /* ---------- AI-ANCHOR: CSS_ROOM_PUBLIC_HERO — TASK-056 (owner #129): room publik ala landing ---------- Hero: banner bonus (sama dengan landing) · undangan @pemilik · judul · 3 ubin hadiah beranimasi · CTA besar berdenyut. Kanan (desktop) = room pemilik sebagai "panggung". CTA akhir + bar CTA lengket HP. Motion transform/opacity saja. */ .rp-hero { display: grid; gap: 24px; padding-top: 24px; } @media (min-width: 900px) { .rp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: 48px; padding-top: 32px; } } .rp-hero-l { display: grid; align-content: start; gap: 16px; min-width: 0; } .rp-hero-r { display: grid; align-content: start; gap: 12px; min-width: 0; } .rp-inv { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gm-mut); font-size: 14px; font-weight: 800; line-height: 20px; } .rp-inv .rp-av { width: 32px; height: 32px; border-width: 2px; font-size: 16px; } .rp-inv b { color: #fff; } .rp-hero .hk-bonus { justify-self: stretch; max-width: none; margin: 0; } @media (max-width: 419px) { .rp-hero .hk-bonus { grid-template-columns: 72px minmax(0, 1fr) 44px; } .rp-hero .hk-bn-art { transform: scale(.85); transform-origin: 0 50%; } } .rp-h1 { font-size: clamp(32px, 8vw, 48px); } .rp-h1 em { display: inline-block; } .rp-pk-k { margin: 0; color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; } .rp-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .rp-pk { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; padding: 12px 8px; border: 2px solid rgba(94, 240, 255, .22); border-radius: var(--gm-r2); background: linear-gradient(#2b3769, #1b2446); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); text-align: center; animation: rp-in .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .12s) both; } .rp-pk b { color: #fff; font-size: 14px; font-weight: 900; line-height: 20px; } .rp-pk small { color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 1.5; } .rp-pk-art { position: relative; display: grid; place-items: center; width: 56px; height: 56px; } .rp-pk-art img { width: 48px; height: auto; } .rp-pk.rig img { animation: rp-rig 2.4s cubic-bezier(.45, 0, .55, 1) infinite; } .rp-pk-glint { position: absolute; right: 4px; top: 4px; width: 12px; height: 12px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: rp-glint 2.4s ease-in-out infinite; } .rp-pk-tree { position: relative; width: 48px; height: 48px; } .rp-pk-tree i { position: absolute; width: 20px; height: 20px; border: 2px solid var(--gm-line); border-radius: 50%; background: linear-gradient(var(--gm-cyan), #a78bfa); animation: rp-node 2.4s cubic-bezier(.34, 1.56, .64, 1) infinite; } .rp-pk-tree i:nth-child(1) { left: 14px; top: 0; background: linear-gradient(#ffe487, var(--gm-gold)); } .rp-pk-tree i:nth-child(2) { left: 0; bottom: 4px; animation-delay: .3s; } .rp-pk-tree i:nth-child(3) { right: 0; bottom: 4px; animation-delay: .6s; } .rp-pk-tree::before { content: ""; position: absolute; left: 10px; right: 10px; top: 18px; height: 16px; border: 2px solid rgba(94, 240, 255, .5); border-bottom: 0; border-radius: 8px 8px 0 0; } @keyframes rp-in { from { opacity: 0; transform: translateY(12px); } } @keyframes rp-rig { 50% { transform: translateY(-4px) scale(1.06); } } @keyframes rp-glint { 0%, 55%, 100% { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1) rotate(90deg); } } @keyframes rp-node { 0%, 60%, 100% { transform: none; } 20% { transform: scale(1.25); } } .rp-go { display: grid; gap: 8px; } .rp-btn { animation: rp-nudge 3.2s cubic-bezier(.45, 0, .55, 1) 1.2s infinite; } @keyframes rp-nudge { 0%, 84%, 100% { transform: none; } 88% { transform: translateY(-4px) scale(1.02); } 92% { transform: none; } 95% { transform: translateY(-2px); } } .rp-rh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rp-rh b { font: 400 20px/1.2 var(--gm-f-title); color: #fff; text-shadow: 0 2px 0 var(--gm-line); overflow-wrap: anywhere; } .rp-rh small { color: var(--gm-mut); font-size: 14px; font-weight: 800; } .rp-rs { flex: 1 0 100%; margin: 0; color: var(--gm-cream); font-size: 14px; font-weight: 800; line-height: 1.45; } .rp-sec { padding-bottom: 0; } .rp-sec .gm-h2 { margin-bottom: 24px; } .rp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } @media (max-width: 479px) { .rp-row { grid-template-columns: minmax(0, 1fr); } } .rp-earn { gap: 4px; padding: 16px; } .rp-earn .v, .rm-earn.rp-earn .v { font-size: 32px; } .rp-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45; opacity: 0; transform: translateY(24px); pointer-events: none; transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s; } .rp-sticky.on { opacity: 1; transform: none; pointer-events: auto; } @media (min-width: 900px) { .rp-sticky { display: none; } } .rp-cta .col-box { --s: 1; } .rp-cta .gm-free { margin-top: -4px; } html.gm-hidden .rp-hero *, html.gm-hidden .rp-hero *::before { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .rp-pk, .rp-pk img, .rp-pk-glint, .rp-pk-tree i, .rp-btn { animation: none !important; } .rp-sticky { transition: none; } } .rp-cta { display: grid; justify-items: center; gap: 12px; padding: 24px 16px; text-align: center; } .rp-cta img { width: 96px; height: 108px; } .rp-cta h2 { margin: 0; font: 400 clamp(24px, 6vw, 32px)/1.15 var(--gm-f-title); color: #fff; text-shadow: 0 3px 0 var(--gm-line); } .rp-cta p { margin: 0; color: var(--gm-mut); font-size: 16px; font-weight: 800; line-height: 1.45; max-width: 32em; } .rp-cta .gm-btn { width: 100%; max-width: 400px; } @media (max-width: 419px) { .rm-slot small { display: none; } } /* TASK-023: visual home di member — robot bekerja di BOX + kereta koin → Your wallet di kartu hasil */ .rm-pilot .wb-wrap.rm-wb { width: 120px; flex: none; filter: drop-shadow(0 8px 16px rgba(94, 240, 255, .25)); } .rm-earn .rm-train { margin-top: 4px; } /* TASK-055 (owner #134): robot menggali di awal rel kereta — FX.collector skala .6 (100 × 64; HP < 360: .5) dicerminkan: tumpukan kiri, robot menyekop, koin terbang melengkung ke kanan jatuh tepat di gerbong awal rel (margin kanan −32 px = menumpuk di atas area pudar rel). */ .rm-train.has-dig { grid-template-columns: auto minmax(0, 1fr) auto; } .rm-dig { position: relative; z-index: 2; align-self: end; width: 100px; height: 64px; margin-right: -32px; pointer-events: none; } .rm-dig .col-box { --s: .6; display: block; transform: scaleX(-1); } .rm-dig .col-cart { visibility: hidden; } @media (max-width: 359px) { .rm-dig { width: 84px; height: 52px; margin-right: -28px; } .rm-dig .col-box { --s: .5; } } @media (max-width: 399px) { .rm-pilot .wb-wrap.rm-wb { width: 96px; } } /* ---------- AI-ANCHOR: CSS_ROOM_PROFILE — TASK-027 (owner #65): profil — kartu identitas neon, kartu akun/password/alamat, keluar ---------- */ .rm-pf { text-decoration: none; } .rm-pf[aria-current] { border-color: var(--gm-gold); color: var(--gm-gold); box-shadow: 0 0 16px rgba(255, 201, 51, .35); } .pf-hero { display: flex; align-items: center; gap: 16px; min-width: 0; margin-bottom: 16px; padding: 16px; border-radius: var(--gm-r2); box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .35), 0 0 24px rgba(94, 240, 255, .12); } .pf-av { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border: 3px solid var(--gm-line); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gm-gold) 55%, #e08e00); color: var(--gm-line); font: 400 32px/1 var(--gm-f-title); box-shadow: 0 0 0 4px rgba(255, 201, 51, .25), 0 0 24px rgba(255, 201, 51, .45); } .pf-who { display: grid; gap: 4px; min-width: 0; } .pf-who b { overflow: hidden; color: #fff; font: 400 24px/1.2 var(--gm-f-title); white-space: nowrap; text-overflow: ellipsis; } .pf-who small { overflow: hidden; color: var(--gm-mut); font-size: 14px; font-weight: 800; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; } .pf-card { display: grid; gap: 16px; margin-bottom: 16px; padding: 16px; } .pf-h { margin: 0; color: #fff; font: 400 20px/1.2 var(--gm-f-title); } .pf-card .rw-in input[readonly] { color: var(--gm-mut); } .pf-tag { flex: none; margin-right: 8px; padding: 0 8px; border: 2px solid var(--gm-line); border-radius: 999px; background: #fff; color: var(--gm-line); font-size: 12px; font-style: normal; font-weight: 900; line-height: 20px; } .pf-addrs { display: grid; gap: 8px; } .pf-addr { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-slot); } .pf-coin { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; align-items: center; min-width: 0; } .pf-coin img { grid-row: 1 / 3; width: 32px; height: 32px; } .pf-coin b { color: #fff; font-size: 14px; line-height: 20px; } .pf-coin small { color: var(--gm-dim); font-size: 12px; font-weight: 800; line-height: 16px; } .pf-addr input { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 2px solid rgba(94, 240, 255, .25); border-radius: var(--gm-r1); background: rgba(8, 12, 32, .85); color: var(--gm-cream); font: 800 14px/1 var(--gm-f-body); outline: none; } .pf-addr input:focus { border-color: var(--gm-cyan); } .pf-out { gap: 8px; margin: 8px 0 24px; border-color: #ff8a8a; background: linear-gradient(#3a1f2e, #26182a); color: #ffb3b3; box-shadow: 0 4px 0 #1a0f1a; } .pf-out svg { width: 20px; height: 20px; } @media (max-width: 359px) { .pf-addr { grid-template-columns: minmax(0, 1fr); } } .rw-saved { color: var(--gm-green); font-size: 12px; font-weight: 800; line-height: 16px; } .pf-coin b:last-child { grid-row: 1 / 3; } /* ---------- AI-ANCHOR: CSS_ROOM_STATS — TASK-030 (owner #68): tombol stats di kaki kotak room + popup statistik futuristik ---------- */ .rm-stbtn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 2px solid rgba(94, 240, 255, .55); border-radius: 999px; background: linear-gradient(rgba(94, 240, 255, .16), rgba(94, 240, 255, .06)); color: var(--gm-cyan); font: 900 14px/1.25 var(--gm-f-body); cursor: pointer; box-shadow: 0 0 16px rgba(94, 240, 255, .2); transition: transform .15s ease; } .rm-stbtn:active { transform: scale(.96); } .rm-stbtn svg { width: 18px; height: 18px; } .st { display: grid; gap: 16px; } .st > * { animation: st-in .5s cubic-bezier(.22, 1, .36, 1) both; } .st > :nth-child(2) { animation-delay: .08s; } .st > :nth-child(3) { animation-delay: .5s; } .st > :nth-child(4) { animation-delay: .6s; } @keyframes st-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } } .st-hero { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px; overflow: hidden; border-radius: var(--gm-r2); text-align: center; box-shadow: inset 0 0 0 2px rgba(134, 232, 92, .55), 0 0 24px rgba(134, 232, 92, .18); } .st-hero > * { position: relative; z-index: 1; } .st-live { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; border: 2px solid var(--gm-line); border-radius: 999px; background: var(--gm-green); color: var(--gm-line); font-size: 12px; font-weight: 900; line-height: 20px; letter-spacing: .08em; } .st-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--gm-line); animation: st-blink 1.2s ease-in-out infinite; } @keyframes st-blink { 50% { opacity: .2; transform: scale(.7); } } .st-hero small { margin-top: 4px; color: var(--gm-cream); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; } .st-day { color: var(--gm-green); font: 400 40px/1.2 var(--gm-f-title); text-shadow: 0 3px 0 var(--gm-line), 0 0 24px rgba(134, 232, 92, .5); font-variant-numeric: tabular-nums; } .st-watch { color: var(--gm-mut); font-size: 14px; font-weight: 800; line-height: 20px; } .st-watch b { color: var(--gm-gold); font-variant-numeric: tabular-nums; } .st-scan { position: absolute; left: 0; right: 0; top: 0; z-index: 0 !important; height: 48px; pointer-events: none; background: linear-gradient(transparent, rgba(134, 232, 92, .16), transparent); transform: translate3d(0, -100%, 0); animation: st-scan 3s .6s linear infinite; } @keyframes st-scan { to { transform: translate3d(0, 260px, 0); } } .st-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .st-rates li { position: relative; display: grid; gap: 4px; padding: 12px 12px 16px; overflow: hidden; border: 2px solid rgba(94, 240, 255, .25); border-radius: var(--gm-r1); background: var(--gm-slot); animation: st-in .45s var(--d) cubic-bezier(.22, 1, .36, 1) both; } .st-rates span { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; } .st-rates b { color: #fff; font-size: 16px; line-height: 20px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .st-rates li:nth-child(4) { border-color: rgba(134, 232, 92, .6); box-shadow: 0 0 16px rgba(134, 232, 92, .2); } .st-rates li:nth-child(4) b { color: var(--gm-green); } .st-rates i { position: absolute; left: 12px; right: 12px; bottom: 8px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--gm-cyan), var(--gm-green)); transform-origin: 0 50%; transform: scaleX(var(--w)); animation: st-bar .8s calc(var(--d) + .2s) cubic-bezier(.22, 1, .36, 1) both; } @keyframes st-bar { from { transform: scaleX(0); } } .st-share { display: grid; gap: 8px; padding: 12px; border: 2px solid rgba(255, 201, 51, .45); border-radius: var(--gm-r1); background: rgba(10, 15, 38, .75); } .st-share-h, .st-share-f { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .st-share-h span { color: var(--gm-cream); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; } .st-share-h b { color: var(--gm-gold); font: 400 20px/1.2 var(--gm-f-title); } .st-bar { height: 12px; overflow: hidden; border-radius: 999px; background: var(--gm-slot); box-shadow: inset 0 0 0 1px rgba(255, 201, 51, .3); } .st-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffe487, var(--gm-gold)); transform-origin: 0 50%; transform: scaleX(var(--w)); animation: st-bar 1.1s .7s cubic-bezier(.22, 1, .36, 1) both; box-shadow: 0 0 12px rgba(255, 201, 51, .6); } .st-share-f span { color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 16px; } .st-share-f b { color: var(--gm-cyan); } html.gm-hidden .st *, html.gm-hidden .st-scan { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .st *, .st > * { animation: none !important; } } .rm-box-f .rm-stbtn span { color: inherit; font-size: 14px; } /* ---------- AI-ANCHOR: CSS_ROOM_TEAMSTATS — TASK-031 (owner #69): statistik referral + riwayat di tab Team ---------- */ .tm-sec { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border-radius: var(--gm-r2); background: linear-gradient(#1d2650, #141b3c); box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .2); } .tm-sec > * { animation: st-in .45s cubic-bezier(.22, 1, .36, 1) both; } .tm-h { margin: 0; color: #fff; font: 400 20px/1.2 var(--gm-f-title); } .tm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .tm-tiles li { display: grid; justify-items: start; gap: 4px; min-width: 0; padding: 12px; border: 2px solid rgba(94, 240, 255, .25); border-radius: var(--gm-r1); background: var(--gm-slot); } .tm-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(94, 240, 255, .15); color: var(--gm-cyan); } .tm-ic svg { width: 18px; height: 18px; } .tm-k { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; } .tm-tiles > li > b { color: #fff; font: 400 24px/1.2 var(--gm-f-title); } .tm-tiles small { color: var(--gm-dim); font-size: 12px; font-weight: 800; line-height: 16px; } .tm-tiles small b { color: var(--gm-cream); } @media (max-width: 479px) { .tm-tiles { grid-template-columns: minmax(0, 1fr); } .tm-tiles li { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; } .tm-tiles .tm-ic { grid-row: 1 / 3; } .tm-tiles > li > b { grid-column: 3; grid-row: 1 / 3; } .tm-tiles small { grid-column: 2; } } .tm-conv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px; border: 2px dashed rgba(255, 201, 51, .45); border-radius: var(--gm-r1); } .tm-conv span { color: var(--gm-cream); font-size: 14px; font-weight: 900; } .tm-conv b { color: var(--gm-gold); font: 400 20px/1.2 var(--gm-f-title); } .tm-conv small { flex: 1 0 100%; color: var(--gm-dim); font-size: 12px; font-weight: 800; line-height: 16px; } .tm-chart { display: grid; gap: 8px; } .tm-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; font-weight: 800; line-height: 16px; color: var(--gm-mut); } .tm-leg span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; vertical-align: 0; } .tm-leg .c::before { background: var(--gm-cyan); } .tm-leg .v::before { background: #a78bfa; } .tm-leg .s::before { background: var(--gm-green); } .tm-leg em { margin-left: auto; font-style: normal; color: var(--gm-dim); } .tm-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; gap: 4px; height: 64px; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid rgba(94, 240, 255, .3); } .tm-bars li { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 0; height: 100%; } .tm-bars i { height: 100%; min-height: 2px; border-radius: 2px 2px 0 0; transform-origin: 50% 100%; transform: scaleY(var(--h)); animation: hk-res-bar .6s var(--d) cubic-bezier(.22, 1, .36, 1) both; } .tm-bars .c { background: var(--gm-cyan); } .tm-bars .v { background: #a78bfa; } .tm-bars .s { background: var(--gm-green); } .tm-earn { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; } .tm-earn li { display: grid; gap: 4px; min-width: 0; padding: 12px; border-radius: var(--gm-r1); background: var(--gm-slot); border: 2px solid rgba(134, 232, 92, .3); } .tm-earn li.big { border-color: rgba(134, 232, 92, .7); box-shadow: 0 0 16px rgba(134, 232, 92, .2); } .tm-earn span { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; } .tm-earn b { color: var(--gm-green); font-size: 16px; line-height: 20px; overflow-wrap: anywhere; } .tm-earn .big b { font: 400 24px/1.2 var(--gm-f-title); } @media (max-width: 419px) { .tm-earn { grid-template-columns: 1fr 1fr; } .tm-earn .big { grid-column: 1 / -1; } } .tm-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--gm-mut); font-size: 14px; font-weight: 800; line-height: 20px; } .tm-sum b { color: var(--gm-cyan); } .tm-lv { display: grid; gap: 4px; } .tm-lv-h, .tm-lv-r { display: grid; grid-template-columns: 56px repeat(2, minmax(0, .8fr)) repeat(2, minmax(0, 1.2fr)); align-items: center; gap: 8px; padding: 8px; border-radius: 8px; text-align: right; } .tm-lv-h { color: var(--gm-dim); font-size: 10px; font-weight: 900; line-height: 12px; letter-spacing: .06em; text-transform: uppercase; } .tm-lv-h span:first-child, .tm-lv-r span:first-child { text-align: left; } .tm-lv-r { background: var(--gm-slot); color: var(--gm-cream); font-size: 12px; font-weight: 800; line-height: 16px; } .tm-lv-r span { min-width: 0; overflow-wrap: anywhere; } .tm-lv-r span:first-child { display: grid; } .tm-lv-r span:first-child b { color: #fff; font-size: 14px; line-height: 16px; } .tm-lv-r small { color: var(--gm-dim); font-size: 10px; line-height: 12px; } .tm-lv-r .up { color: var(--gm-green); } .tm-lv-r.lock { background: none; box-shadow: inset 0 0 0 1px rgba(151, 166, 209, .35); } .tm-lv-r.lock small { color: var(--gm-mut); } @media (max-width: 399px) { .tm-lv-h, .tm-lv-r { grid-template-columns: 48px repeat(3, minmax(0, 1fr)); padding: 8px 4px; } .tm-lv .tm-b { display: none; } } .tm-foot { margin: 0; color: var(--gm-dim); font-size: 12px; font-weight: 800; line-height: 1.45; } .tm-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tm-chips::-webkit-scrollbar { display: none; } .tm-chips button { -webkit-appearance: none; appearance: none; flex: none; min-height: 44px; padding: 0 16px; border: 2px solid rgba(94, 240, 255, .3); border-radius: 999px; background: var(--gm-slot); color: var(--gm-mut); font: 900 14px/1 var(--gm-f-body); cursor: pointer; } .tm-chips button[aria-selected="true"] { border-color: var(--gm-gold); background: linear-gradient(#ffe487, var(--gm-gold)); color: var(--gm-line); } .tm-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .tm-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--gm-r1); background: var(--gm-slot); } .tm-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff8a8a; } .tm-list li.up .tm-dot { background: var(--gm-green); box-shadow: 0 0 8px rgba(134, 232, 92, .7); } .tm-t { display: grid; gap: 4px; min-width: 0; } .tm-t b { overflow: hidden; color: #fff; font-size: 14px; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; } .tm-t small { color: var(--gm-dim); font-size: 12px; font-weight: 800; line-height: 1.5; } .tm-list li > b { color: #ffb3b3; font-size: 14px; line-height: 20px; white-space: nowrap; } .tm-list li.up > b { color: var(--gm-green); } /* TASK-062/064 (owner #141): order deposit + daftar referral */ .tm-note { margin: -4px 0 0; color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 1.5; } .wd-list li { display: block; min-height: 0; padding: 0; background: none; } .wd-o { -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; border-radius: var(--gm-r1); background: var(--gm-slot); color: inherit; font: inherit; line-height: 1.5; text-align: left; cursor: pointer; transition: transform .15s cubic-bezier(.22, 1, .36, 1); } .wd-o:active { transform: scale(.98); } .wd-o img { width: 32px; height: 32px; } .wd-c { color: var(--gm-mut); font-size: 12px; font-style: normal; font-weight: 800; line-height: 16px; } .wd-st { padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; line-height: 16px; white-space: nowrap; } .wd-st.pending { background: rgba(255, 201, 51, .16); color: var(--gm-gold); } .wd-st.confirming { background: rgba(94, 240, 255, .16); color: var(--gm-cyan); } .wd-st.paid { background: rgba(134, 232, 92, .16); color: var(--gm-green); } .wd-st.expired { background: rgba(180, 194, 230, .12); color: var(--gm-mut); } .tm-rsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .tm-rsum li { display: grid; gap: 4px; min-width: 0; padding: 12px 8px; border-radius: var(--gm-r1); background: var(--gm-slot); text-align: center; } .tm-rsum small { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; } .tm-rsum b { color: #fff; font: 400 20px/1.2 var(--gm-f-title); } .tm-rsum .active b { color: var(--gm-green); } .tm-rsum .earned b { color: var(--gm-gold); } @media (max-width: 479px) { .tm-rsum { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tm-lv { margin-left: 4px; padding: 0 4px; border-radius: 4px; background: rgba(167, 139, 250, .2); color: #c4b5fd; font-size: 12px; font-style: normal; line-height: 16px; } /* TASK-069 (owner #145): countdown bayar + halaman order */ .rw-cd { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: rgba(255, 201, 51, .16); color: var(--gm-gold); font-size: 14px; line-height: 16px; } .rw-cd.low { background: rgba(244, 63, 94, .18); color: #ff8a8a; animation: rw-cd 1s steps(1) infinite; } @keyframes rw-cd { 50% { opacity: .55; } } .wd-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 201, 51, .16); color: var(--gm-gold); font-weight: 900; } .wd-pg { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } .wd-pg span { color: var(--gm-mut); font-size: 14px; font-weight: 900; } .wd-pg .gm-btn { min-width: 56px; } #wd-all { margin-top: 4px; } @media (prefers-reduced-motion: reduce) { .rw-cd.low { animation: none; } } .rw-status.off .rw-dot { background: var(--gm-mut); box-shadow: none; animation: none; } .tm-list .tm-empty { display: block; min-height: 0; color: var(--gm-mut); font-size: 14px; font-weight: 800; text-align: center; } @media (prefers-reduced-motion: reduce) { .tm-sec > *, .tm-bars i { animation: none !important; } } /* ---------- AI-ANCHOR: CSS_ROOM_FREE — TASK-032 (owner #70): halaman Free — banner Room, hero karakter, grup quest + tutorial, klaim, kontes. Motion transform/opacity saja; berhenti saat tab tersembunyi (html.gm-hidden); reduced-motion = diam. ---------- */ .rm-nav-free { position: relative; } .rm-nav-free svg { color: var(--gm-gold); } .fr-dot { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ff5a6a; color: #fff; font: 900 10px/16px var(--gm-f-body); font-style: normal; text-align: center; animation: fr-pop .5s cubic-bezier(.34, 1.56, .64, 1); } @keyframes fr-pop { from { transform: scale(0); } } /* banner di tab Room */ .fr-banner { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 72px; padding: 8px 12px 8px 8px; border-radius: var(--gm-r2); color: var(--gm-cream); text-decoration: none; box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .6), 0 0 24px rgba(255, 201, 51, .2); } .fr-bn-art { position: relative; align-self: stretch; } .fr-bn-gpu { position: absolute; left: 0; bottom: 4px; width: 44px; height: 44px; animation: fr-float 2.6s ease-in-out infinite; } .fr-bn-bot { position: absolute; left: 36px; bottom: 0; width: 44px; height: 50px; animation: fr-float 2.6s .4s ease-in-out infinite; } .fr-bn-gift { position: absolute; left: 30px; top: 0; width: 20px; height: 20px; color: var(--gm-gold); animation: fr-twinkle 1.8s ease-in-out infinite; } .fr-bn-t { display: grid; gap: 4px; min-width: 0; } .fr-bn-t small { color: var(--gm-gold); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; } .fr-bn-t b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #fff; font-size: 14px; line-height: 20px; } @keyframes fr-float { 50% { transform: translate3d(0, -4px, 0); } } @keyframes fr-twinkle { 50% { transform: scale(1.25) rotate(12deg); opacity: .6; } } /* TASK-055 (owner #135): banner di dalam box + robot berlari membawa GPU hadiah. Robot "carry" dipercepat jadi lari (siklus .5 dtk), pita merah di atas GPU, 3 garis kecepatan & tanah putus-putus bergerak ke kiri = kesan berlari ke kanan. Transform/opacity saja. */ .rm-box .fr-banner { margin-top: 12px; } .fr-bn-art { overflow: hidden; border-radius: var(--gm-r1); } .fr-bn-run { position: absolute; left: 16px; bottom: 2px; z-index: 1; width: 64px; } .fr-bn-run .rb-carry .rb-legL, .fr-bn-run .rb-carry .rb-legR, .fr-bn-run .rb-carry .rb-kneeL, .fr-bn-run .rb-carry .rb-kneeR { animation-duration: .5s; } .fr-bn-run .rb-carry .rb-legR, .fr-bn-run .rb-carry .rb-kneeR { animation-delay: -.25s; } .fr-bn-run .rb-carry .rb-all { animation: fr-run-bob .25s ease-in-out infinite alternate; } @keyframes fr-run-bob { from { transform: translateY(0) rotate(4deg); } to { transform: translateY(-4px) rotate(6deg); } } .fr-bn-bow { position: absolute; left: 36px; top: 22px; width: 20px; height: 14px; animation: fr-run-bob .25s ease-in-out infinite alternate; } .fr-bn-sp { position: absolute; left: 0; top: 24px; width: 20px; height: 3px; border-radius: 2px; background: rgba(255, 201, 51, .7); opacity: 0; animation: fr-sp .6s linear infinite; } .fr-bn-sp.b { top: 36px; width: 14px; animation-delay: .2s; } .fr-bn-sp.c { top: 48px; width: 24px; animation-delay: .4s; } @keyframes fr-sp { 0% { opacity: 0; transform: translateX(24px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(-16px); } } .fr-bn-gr { position: absolute; left: 0; right: -24px; bottom: 2px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 201, 51, .6) 0 8px, transparent 8px 16px); animation: fr-gr .4s linear infinite; } @keyframes fr-gr { to { transform: translateX(-16px); } } .fr-bn-art .fr-bn-gift { left: auto; right: 0; top: 4px; z-index: 2; } @media (max-width: 419px) { .fr-banner { grid-template-columns: 72px minmax(0, 1fr) 44px; } .fr-bn-run { left: 8px; width: 56px; } .fr-bn-t small { font-size: 10px; } } html.gm-hidden .fr-banner *, html.gm-hidden .fr-banner *::after { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .fr-bn-run *, .fr-bn-sp, .fr-bn-gr, .fr-bn-bow { animation: none !important; } } /* hero */ .fr-hero { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: var(--gm-r2); box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .35), 0 0 32px rgba(94, 240, 255, .12); } .fr-hero-art { position: relative; height: 128px; } .fr-orb { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 201, 51, .45), transparent); animation: fr-orb 3s ease-in-out infinite; } @keyframes fr-orb { 50% { transform: scale(1.15); opacity: .6; } } .fr-h-gpu { position: absolute; left: 0; bottom: 8px; width: 72px; height: 72px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); animation: fr-float 3s ease-in-out infinite; } .fr-h-bot { position: absolute; right: 0; bottom: 0; width: 88px; height: 99px; filter: drop-shadow(0 8px 16px rgba(94, 240, 255, .3)); animation: fr-float 3s .6s ease-in-out infinite; } .fr-h-neon { position: absolute; left: 36px; top: 0; width: 44px; height: 50px; opacity: .9; animation: fr-float 3s 1.2s ease-in-out infinite; } .fr-h-coin { position: absolute; right: 8px; top: 0; width: 24px; height: 24px; animation: fr-twinkle 2.2s ease-in-out infinite; } .fr-hero-t { display: grid; gap: 8px; min-width: 0; } .fr-hero-t small { color: var(--gm-cyan); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; } .fr-hero-t b { color: #fff; font: 400 24px/1.2 var(--gm-f-title); text-shadow: 0 3px 0 var(--gm-line); } .fr-hero-t p { margin: 0; color: var(--gm-cream); font-size: 14px; font-weight: 700; line-height: 1.5; } .fr-hero-s { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .fr-hero-s li { display: grid; gap: 4px; padding: 8px 12px; border-radius: var(--gm-r1); background: rgba(10, 15, 38, .75); text-align: center; } .fr-hero-s b { color: var(--gm-gold); font: 400 20px/1.2 var(--gm-f-title); } .fr-hero-s span { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; } @media (max-width: 479px) { .fr-hero { grid-template-columns: minmax(0, 1fr); text-align: center; } .fr-hero-art { width: 160px; justify-self: center; } } /* tab */ .fr-tabs { position: sticky; top: 72px; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 16px 0; padding: 4px; border: 3px solid var(--gm-line); border-radius: 999px; background: rgba(21, 29, 66, .94); } .fr-tabs button { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--gm-mut); font: 900 14px/1 var(--gm-f-body); cursor: pointer; } .fr-tabs button svg { width: 18px; height: 18px; } .fr-tabs button[aria-selected="true"] { background: linear-gradient(#ffe487, var(--gm-gold)); color: var(--gm-line); box-shadow: 0 3px 0 var(--gm-wood-d); } @media (min-width: 900px) { .fr-tabs { top: 80px; } } .fr-body { display: grid; gap: 16px; } /* grup quest */ .fr-grp { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: var(--gm-r2); background: linear-gradient(#1d2650, #141b3c); box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .2); animation: st-in .45s cubic-bezier(.22, 1, .36, 1) both; } .fr-g-starter { box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .55), 0 0 24px rgba(255, 201, 51, .15); } .fr-g-creator { box-shadow: inset 0 0 0 2px rgba(244, 114, 182, .5), 0 0 24px rgba(244, 114, 182, .12); } .fr-grp.won { box-shadow: inset 0 0 0 2px rgba(134, 232, 92, .6); } .fr-gh { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; } .fr-rw { display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: radial-gradient(closest-side, rgba(255, 201, 51, .35), transparent), var(--gm-slot); animation: fr-float 3s ease-in-out infinite; } .fr-rw img { width: 40px; height: 40px; object-fit: contain; } .fr-rw svg { width: 32px; height: 32px; } .fr-gh-t { display: grid; gap: 4px; min-width: 0; } .fr-gh-t small { color: var(--gm-cyan); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; } .fr-gh-t h2 { margin: 0; color: #fff; font: 400 20px/1.2 var(--gm-f-title); } .fr-gh-t p { margin: 0; color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 16px; } .fr-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; } .fr-prog span { color: var(--gm-cream); font-size: 12px; font-weight: 900; line-height: 16px; } .fr-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--gm-slot); } .fr-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gm-cyan), var(--gm-green)); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .fr-tasks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .fr-t { border-radius: var(--gm-r1); background: var(--gm-slot); animation: st-in .4s calc(var(--i) * 50ms) cubic-bezier(.22, 1, .36, 1) both; } .fr-th { -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; background: none; color: #fff; font: 800 14px/1.35 var(--gm-f-body); text-align: left; cursor: pointer; } .fr-chk { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid rgba(94, 240, 255, .45); border-radius: 50%; color: transparent; } .fr-chk svg { width: 16px; height: 16px; transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } .fr-t.done .fr-chk { border-color: var(--gm-green); background: var(--gm-green); color: var(--gm-line); box-shadow: 0 0 12px rgba(134, 232, 92, .5); } .fr-t.done .fr-chk svg { transform: scale(1); } .fr-t.done .fr-tt { color: var(--gm-mut); text-decoration: line-through; text-decoration-color: var(--gm-green); text-decoration-thickness: 2px; } .fr-tp { color: var(--gm-cyan); font-size: 12px; font-weight: 900; } .fr-chev { width: 20px; height: 20px; color: var(--gm-mut); transition: transform .25s ease; } .fr-t.open .fr-chev { transform: rotate(180deg); } .fr-tb { display: grid; gap: 12px; padding: 4px 12px 12px 52px; } .fr-tb[hidden] { display: none; } .fr-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .fr-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--gm-cream); font-size: 14px; font-weight: 700; line-height: 1.45; } .fr-sn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(94, 240, 255, .18); color: var(--gm-cyan); font-size: 12px; font-weight: 900; } .fr-acts { display: grid; gap: 4px; justify-items: center; } .fr-acts .gm-link { min-height: 44px; } .fr-hint { margin: 0; color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 16px; } .fr-proof { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .fr-proofs { display: grid; gap: 4px; } .fr-proofs small, .fr-vids small { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; } .fr-proofs a { overflow: hidden; color: var(--gm-cyan); font-size: 12px; font-weight: 800; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; } .fr-v { color: var(--gm-dim); font-size: 12px; font-weight: 800; line-height: 16px; } @media (max-width: 399px) { .fr-tb { padding-left: 12px; } .fr-proof { grid-template-columns: minmax(0, 1fr); } } .fr-rwrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 12px; border: 2px dashed rgba(255, 201, 51, .45); border-radius: var(--gm-r1); } .fr-rwrow span { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; text-transform: uppercase; letter-spacing: .06em; } .fr-rwrow b { color: var(--gm-gold); font-size: 14px; line-height: 20px; } .fr-rwrow small { color: var(--gm-dim); font-size: 12px; font-weight: 800; line-height: 16px; } .fr-claim { animation: fr-glow 1.8s ease-in-out infinite; } @keyframes fr-glow { 50% { transform: translate3d(0, -2px, 0) scale(1.02); } } .fr-st { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 8px 12px; border-radius: var(--gm-r1); font-size: 14px; font-weight: 900; line-height: 20px; text-align: center; } .fr-st svg { flex: none; width: 18px; height: 18px; } .fr-st.lock { background: var(--gm-slot); color: var(--gm-mut); } .fr-st.wait { background: rgba(255, 201, 51, .12); color: var(--gm-gold); } .fr-st.ok { background: rgba(134, 232, 92, .14); color: var(--gm-green); } .fr-st.bad { background: rgba(255, 90, 106, .12); color: #ffb3b3; } .fr-spin { flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fr-rot 1s linear infinite; } @keyframes fr-rot { to { transform: rotate(360deg); } } .fr-conf { position: absolute; left: 50%; bottom: 40px; width: 0; height: 0; pointer-events: none; } .fr-conf i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--gm-gold); animation: hk-res-conf 1.2s var(--d) cubic-bezier(.22, 1, .36, 1) both; } .fr-conf i:nth-child(3n + 2) { background: var(--gm-cyan); } .fr-conf i:nth-child(3n) { background: var(--gm-green); border-radius: 50%; } /* kontes */ .fr-season { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 16px; align-items: center; padding: 16px; border-radius: var(--gm-r2); box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .6), 0 0 32px rgba(255, 201, 51, .2); } .fr-trophy svg { width: 64px; height: 64px; filter: drop-shadow(0 0 16px rgba(255, 201, 51, .6)); animation: fr-float 3s ease-in-out infinite; } .fr-se-t { display: grid; gap: 4px; min-width: 0; } .fr-se-t small { color: var(--gm-cyan); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; } .fr-se-t b { color: var(--gm-gold); font: 400 40px/1.1 var(--gm-f-title); text-shadow: 0 3px 0 var(--gm-line), 0 0 24px rgba(255, 201, 51, .45); } .fr-se-t span { color: var(--gm-cream); font-size: 14px; font-weight: 800; line-height: 20px; } .fr-se-bar { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; } .fr-se-bar span { color: var(--gm-cream); font-size: 12px; font-weight: 900; line-height: 16px; } .fr-ct { display: grid; gap: 12px; padding: 16px; border-radius: var(--gm-r2); background: linear-gradient(#1d2650, #141b3c); box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .2); animation: st-in .45s cubic-bezier(.22, 1, .36, 1) both; } .fr-c-team { box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .55), 0 0 24px rgba(255, 201, 51, .15); } .fr-ct-h { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; } .fr-ct-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(94, 240, 255, .15); color: var(--gm-cyan); } .fr-c-team .fr-ct-ic { background: rgba(255, 201, 51, .18); color: var(--gm-gold); } .fr-ct-ic svg { width: 24px; height: 24px; } .fr-ct-h small { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; } .fr-ct-h h2 { margin: 0; color: #fff; font: 400 20px/1.2 var(--gm-f-title); } .fr-ct-h p { margin: 0; color: var(--gm-cream); font-size: 14px; font-weight: 700; line-height: 20px; } .fr-ct-prize, .fr-me { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fr-me { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fr-ct-prize > div, .fr-me > div { display: grid; gap: 4px; min-width: 0; padding: 12px; border-radius: var(--gm-r1); background: var(--gm-slot); } .fr-ct-prize small, .fr-me small { color: var(--gm-mut); font-size: 12px; font-weight: 900; line-height: 16px; } .fr-ct-prize b { color: var(--gm-gold); font: 400 24px/1.2 var(--gm-f-title); font-size: clamp(20px, 6.4vw, 24px); white-space: nowrap; } .fr-me b { color: #fff; font-size: 16px; line-height: 20px; overflow-wrap: anywhere; } .fr-how { border-radius: var(--gm-r1); background: rgba(10, 15, 38, .6); } .fr-how summary { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--gm-cyan); font-size: 14px; font-weight: 900; cursor: pointer; list-style: none; } .fr-how summary::-webkit-details-marker { display: none; } .fr-how summary::after { content: "+"; margin-left: auto; font-size: 20px; } .fr-how[open] summary::after { content: "\2212"; } .fr-how .fr-steps, .fr-ladder { padding: 0 12px 12px; } .fr-ladder { display: grid; gap: 4px; margin: 0; list-style: none; } .fr-ladder li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(94, 240, 255, .12); font-size: 14px; font-weight: 800; color: var(--gm-cream); } .fr-ladder b { color: var(--gm-gold); } .fr-ladder small { color: var(--gm-dim); font-size: 12px; } .fr-bh { margin: 0; color: #fff; font: 400 16px/1.2 var(--gm-f-title); } .fr-board { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .fr-board li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--gm-r1); background: var(--gm-slot); color: var(--gm-cream); font-size: 14px; font-weight: 800; } .fr-rk { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(94, 240, 255, .15); color: var(--gm-cyan); font-size: 12px; font-weight: 900; } .fr-board li.p1 .fr-rk { background: linear-gradient(#ffe487, var(--gm-gold)); color: var(--gm-line); box-shadow: 0 0 12px rgba(255, 201, 51, .6); } .fr-board li.p2 .fr-rk { background: linear-gradient(#f1f5f9, #94a3b8); color: var(--gm-line); } .fr-board li.p3 .fr-rk { background: linear-gradient(#fdba74, #c2410c); color: var(--gm-line); } .fr-board li.you { box-shadow: inset 0 0 0 2px var(--gm-gold); } .fr-nm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .fr-board b { color: var(--gm-green); } .fr-board .fr-empty { display: block; color: var(--gm-mut); text-align: center; } .fr-vform { display: grid; gap: 12px; padding: 12px; border: 2px dashed rgba(94, 240, 255, .35); border-radius: var(--gm-r1); } .fr-vids { display: grid; gap: 4px; } .fr-vids a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: 44px; align-items: center; padding: 8px 12px; border-radius: var(--gm-r1); background: var(--gm-slot); text-decoration: none; font-size: 12px; font-weight: 800; } .fr-vids a span { overflow: hidden; color: var(--gm-cream); white-space: nowrap; text-overflow: ellipsis; } .fr-vids a b { color: var(--gm-gold); } .fr-vids a.st-approved b { color: var(--gm-green); } .fr-vids a.st-rejected b { color: #ffb3b3; } .fr-note { margin: 0; color: var(--gm-dim); font-size: 12px; font-weight: 800; line-height: 1.5; text-align: center; } html.gm-hidden .fr-banner *, html.gm-hidden .fr-hero *, html.gm-hidden .fr-grp *, html.gm-hidden .fr-season *, html.gm-hidden .fr-claim { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .fr-banner *, .fr-hero *, .fr-grp, .fr-grp *, .fr-ct, .fr-season *, .fr-dot { animation: none !important; transition: none !important; } } /* ---------- AI-ANCHOR: CSS_ROOM_FREE_FX — TASK-035 (owner #73): Free rewards lebih hidup & futuristik. Semua efek = transform/opacity; hanya berjalan saat kartu terlihat (.fr-fx.on, IntersectionObserver di room-free.js JS_FREE_FX), berhenti saat tab tersembunyi (html.gm-hidden), diam total dengan prefers-reduced-motion. ---------- */ .fr-fx { position: relative; isolation: isolate; overflow: hidden; } .fr-fx > :not(.fr-frame):not(.fr-scan):not(.fr-conf) { position: relative; z-index: 1; } .fr-conf { z-index: 3; } /* di luar layar: hanya efek LOOP dekoratif yang dijeda — animasi masuk (st-in, fr-slide) tidak pernah dijeda supaya isi tidak tersangkut transparan */ .fr-fx:not(.on) .fr-frame::before, .fr-fx:not(.on) .fr-scan, .fr-fx:not(.on) .fr-ring, .fr-fx:not(.on) .fr-orbit, .fr-fx:not(.on) .fr-orbit svg, .fr-fx:not(.on) .fr-sparks i, .fr-fx:not(.on) .fr-rays, .fr-fx:not(.on) .fr-shine, .fr-fx:not(.on) .fr-orb, .fr-fx:not(.on) .fr-h-gpu, .fr-fx:not(.on) .fr-h-bot, .fr-fx:not(.on) .fr-h-neon, .fr-fx:not(.on) .fr-h-coin, .fr-fx:not(.on) .fr-rw, .fr-fx:not(.on) .fr-t.done .fr-chk, .fr-fx:not(.on) .fr-ct-ic, .fr-fx:not(.on) .fr-hero-t b, .fr-fx:not(.on) .fr-rk::after, .fr-fx:not(.on) .fr-claim, .fr-fx:not(.on) .fr-trophy svg, .fr-grp.ready:not(.on) { animation-play-state: paused; } /* bingkai neon berputar (kartu tugas & kontes) */ .fr-frame { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; overflow: hidden; } .fr-frame::before { content: ""; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; translate: -50% -50%; opacity: .55; background: conic-gradient(from 0deg, transparent 0 62%, rgba(94, 240, 255, .9) 72%, rgba(255, 201, 51, .9) 80%, transparent 90%); animation: fr-spin 7s linear infinite; } .fr-frame::after { content: ""; position: absolute; inset: 2px; border-radius: 14px; background: linear-gradient(#1d2650, #141b3c); } .fr-g-starter .fr-frame::before, .fr-grp.ready .fr-frame::before, .fr-c-team .fr-frame::before { opacity: 1; animation-duration: 4s; } .fr-g-creator .fr-frame::before { background: conic-gradient(from 0deg, transparent 0 62%, rgba(244, 114, 182, .9) 72%, rgba(167, 139, 250, .9) 80%, transparent 90%); opacity: .9; } .fr-grp.won .fr-frame::before { background: conic-gradient(from 0deg, transparent 0 62%, rgba(134, 232, 92, .9) 76%, transparent 90%); } @keyframes fr-spin { to { transform: rotate(360deg); } } /* hero hologram: cincin berputar, koin mengorbit, partikel naik, garis pindai */ .fr-scan { position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 64px; pointer-events: none; background: linear-gradient(transparent, rgba(94, 240, 255, .14), transparent); transform: translate3d(0, -100%, 0); animation: fr-scan 4.2s linear infinite; } @keyframes fr-scan { to { transform: translate3d(0, 520px, 0); } } .fr-ring { position: absolute; left: 50%; top: 50%; width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 50%; pointer-events: none; border: 2px dashed rgba(94, 240, 255, .45); animation: fr-spin 14s linear infinite; } .fr-ring.r2 { width: 104px; height: 104px; margin: -52px 0 0 -52px; border: 2px solid transparent; border-top-color: rgba(255, 201, 51, .8); border-bottom-color: rgba(255, 201, 51, .3); animation-duration: 3.2s; animation-direction: reverse; } .fr-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: fr-spin 6s linear infinite; } .fr-orbit i { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; } .fr-orbit i:nth-child(1) { transform: rotate(0deg) translate3d(64px, 0, 0); } .fr-orbit i:nth-child(2) { transform: rotate(120deg) translate3d(64px, 0, 0); } .fr-orbit i:nth-child(3) { transform: rotate(240deg) translate3d(64px, 0, 0); } .fr-orbit svg { display: block; width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(255, 201, 51, .8)); animation: fr-spin 6s linear infinite reverse; } .fr-sparks { position: absolute; inset: 0; pointer-events: none; } .fr-sparks i { position: absolute; bottom: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--gm-cyan); box-shadow: 0 0 8px var(--gm-cyan); opacity: 0; animation: fr-rise 2.8s ease-out infinite; } .fr-sparks i:nth-child(1) { left: 12%; } .fr-sparks i:nth-child(2) { left: 30%; animation-delay: .5s; background: var(--gm-gold); box-shadow: 0 0 8px var(--gm-gold); } .fr-sparks i:nth-child(3) { left: 48%; animation-delay: 1s; } .fr-sparks i:nth-child(4) { left: 64%; animation-delay: 1.5s; background: var(--gm-green); box-shadow: 0 0 8px var(--gm-green); } .fr-sparks i:nth-child(5) { left: 80%; animation-delay: 2s; } .fr-sparks i:nth-child(6) { left: 92%; animation-delay: 2.4s; background: var(--gm-gold); box-shadow: 0 0 8px var(--gm-gold); } @keyframes fr-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -96px, 0) scale(1.2); } } .fr-h-bot { animation: fr-bob 3s .6s ease-in-out infinite; } @keyframes fr-bob { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); } 50% { transform: translate3d(0, -8px, 0) rotate(2deg); } } .fr-hero-t b { background: linear-gradient(90deg, #fff 0 40%, #ffe487 50%, #fff 60% 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: fr-textshine 4s linear infinite; } @keyframes fr-textshine { from { background-position: 100% 0; } to { background-position: -150% 0; } } .fr-hero-s li { position: relative; overflow: hidden; } .fr-mini { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 999px; background: rgba(94, 240, 255, .15); } .fr-mini i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gm-cyan), var(--gm-green)); transform-origin: 0 50%; } /* tab: indikator meluncur */ .fr-tabs { position: sticky; } .fr-tab-ind { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 6px); border-radius: 999px; background: linear-gradient(#ffe487, var(--gm-gold)); box-shadow: 0 3px 0 var(--gm-wood-d), 0 0 16px rgba(255, 201, 51, .45); transition: transform .35s cubic-bezier(.34, 1.3, .64, 1); } .fr-tabs.c .fr-tab-ind { transform: translate3d(calc(100% + 4px), 0, 0); } .fr-tabs button { position: relative; z-index: 1; transition: color .25s ease; } .fr-tabs button[aria-selected="true"] { background: none; box-shadow: none; } /* ikon hadiah: sinar berputar */ .fr-rw { position: relative; overflow: hidden; } .fr-rw img, .fr-rw svg { position: relative; z-index: 1; } .fr-rays { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; z-index: 0; opacity: .7; background: repeating-conic-gradient(from 0deg, rgba(255, 201, 51, .45) 0 12deg, transparent 12deg 30deg); animation: fr-spin 9s linear infinite; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); } /* bar progres: kilau menyapu */ .fr-bar { position: relative; } .fr-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translate3d(-120%, 0, 0); animation: fr-shine 2.6s ease-in-out infinite; } @keyframes fr-shine { 0% { transform: translate3d(-120%, 0, 0); } 60%, 100% { transform: translate3d(420%, 0, 0); } } /* tugas: hover naik, baru selesai = kilat + cincin */ .fr-t { transition: transform .2s ease; } .fr-th:active { transform: scale(.99); } .fr-t.just { animation: fr-just .9s cubic-bezier(.22, 1, .36, 1); } @keyframes fr-just { 0% { transform: scale(1); } 30% { transform: scale(1.03); } 100% { transform: scale(1); } } .fr-t.just .fr-chk { position: relative; } .fr-t.just .fr-chk::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--gm-green); border-radius: 50%; animation: fr-ringout .9s ease-out forwards; } @keyframes fr-ringout { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(2.2); } } .fr-t.done .fr-chk { animation: fr-glowdot 2.4s ease-in-out infinite; } @keyframes fr-glowdot { 50% { transform: scale(1.08); } } /* klaim siap: kartu berdenyut emas */ .fr-grp.ready { animation: fr-readypulse 2s ease-in-out infinite; } @keyframes fr-readypulse { 50% { transform: translate3d(0, -2px, 0); } } /* kontes: trofi bersinar + partikel, papan masuk bertahap, medali berkilau */ .fr-trophy { position: relative; display: grid; place-items: center; width: 64px; height: 64px; } .fr-trophy .fr-rays { width: 120px; height: 120px; margin: -60px 0 0 -60px; opacity: .9; } .fr-trophy svg { position: relative; z-index: 1; } .fr-trophy .fr-sparks i { bottom: 16px; } .fr-board li { animation: fr-slide .45s calc(var(--i) * 60ms) cubic-bezier(.22, 1, .36, 1) both; } @keyframes fr-slide { from { opacity: 0; transform: translate3d(-16px, 0, 0); } } .fr-board li.p1 .fr-rk, .fr-board li.p2 .fr-rk, .fr-board li.p3 .fr-rk { position: relative; overflow: hidden; } .fr-board li.p1 .fr-rk::after, .fr-board li.p2 .fr-rk::after, .fr-board li.p3 .fr-rk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); transform: translate3d(-120%, 0, 0); animation: fr-shine 2.4s ease-in-out infinite; } .fr-ct-prize b { text-shadow: 0 0 16px rgba(255, 201, 51, .45); } .fr-ct-ic { animation: fr-bob 3s ease-in-out infinite; } html.gm-hidden .fr-frame::before, html.gm-hidden .fr-scan, html.gm-hidden .fr-ring, html.gm-hidden .fr-orbit, html.gm-hidden .fr-orbit svg, html.gm-hidden .fr-sparks i, html.gm-hidden .fr-rays, html.gm-hidden .fr-shine, html.gm-hidden .fr-rk::after, html.gm-hidden .fr-grp.ready { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .fr-fx *, .fr-fx *::before, .fr-fx *::after, .fr-grp.ready, .fr-t.just { animation: none !important; transition: none !important; } .fr-hero-t b { background: none; color: #fff; } .fr-sparks, .fr-orbit, .fr-scan, .fr-shine { display: none; } } .fr-gh-t small, .fr-ct-h small, .fr-se-bar span { font-variant-numeric: tabular-nums; } /* TASK-036: kartu undian + kontes baru */ .fr-c-draw .fr-frame::before { background: conic-gradient(from 0deg, transparent 0 60%, rgba(167, 139, 250, .95) 72%, rgba(255, 201, 51, .95) 82%, transparent 92%); opacity: 1; animation-duration: 3.4s; } .fr-c-draw .fr-ct-ic { background: rgba(167, 139, 250, .2); color: #c4b5fd; } .fr-c-sprint .fr-ct-ic { background: rgba(134, 232, 92, .18); color: var(--gm-green); } .fr-c-sprint .fr-frame::before { background: conic-gradient(from 0deg, transparent 0 62%, rgba(134, 232, 92, .95) 74%, rgba(94, 240, 255, .9) 82%, transparent 92%); opacity: 1; animation-duration: 3s; } .fr-tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .fr-tickets li { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 2px dashed rgba(167, 139, 250, .5); border-radius: var(--gm-r1); color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 16px; text-align: center; } .fr-tickets b { color: #c4b5fd; font: 400 20px/1.2 var(--gm-f-title); } /* ---------- AI-ANCHOR: CSS_ROOM_HANDLE — TASK-037 B7/B8/B13 (owner #79 #80 #86): kartu link @handle di Team + sheet "Claim your link" ---------- */ .tm-link { display: grid; gap: 12px; } .tm-link .rm-link { margin: 0; } .tm-handle { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 12px 12px 16px; overflow: hidden; border: 2px solid rgba(94, 240, 255, .45); border-radius: var(--gm-r1); background: linear-gradient(135deg, rgba(94, 240, 255, .12), rgba(255, 201, 51, .08)); isolation: isolate; } .tm-h-glow { position: absolute; inset: -40% auto -40% -30%; z-index: -1; width: 45%; background: linear-gradient(90deg, transparent, rgba(94, 240, 255, .28), transparent); transform: translateX(-100%) skewX(-18deg); animation: tm-sweep 3.6s ease-in-out infinite; } @keyframes tm-sweep { 0%, 35% { transform: translateX(-100%) skewX(-18deg); } 75%, 100% { transform: translateX(420%) skewX(-18deg); } } .tm-h-url { display: grid; min-width: 0; flex: 1; } .tm-h-url small { color: #c9d5f2; font-size: 12px; font-weight: 800; line-height: 16px; } .tm-h-url b { overflow: hidden; color: #5ef0ff; font: 400 24px/1.2 var(--gm-f-title); text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 16px rgba(94, 240, 255, .45); } .tm-h-edit { flex: none; min-height: 44px; } .tm-h-edit svg { width: 16px; height: 16px; } .tm-l2 { color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 1.45; } .gm-btn.ghost { background: transparent; box-shadow: none; border: 2px solid rgba(94, 240, 255, .45); color: var(--gm-cream); } .tm-claim { position: relative; display: grid; gap: 12px; } .tm-claim p { margin: 0; color: var(--gm-mut); font-size: 14px; font-weight: 700; line-height: 1.5; } .tm-claim-orb { justify-self: center; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, #5ef0ff 30%, rgba(94, 240, 255, .1) 70%); box-shadow: 0 0 32px rgba(94, 240, 255, .5); animation: tm-orb 2.4s ease-in-out infinite; } @keyframes tm-orb { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } } .tm-claim-in { display: flex; align-items: center; min-height: 52px; padding: 0 12px; border: 2px solid rgba(94, 240, 255, .45); border-radius: var(--gm-r1); background: var(--gm-slot); } .tm-claim-in span { flex: none; color: var(--gm-mut); font-size: 14px; font-weight: 800; } .tm-claim-in input { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; outline: 0; background: transparent; color: #5ef0ff; font: 800 16px/1 var(--gm-f-body); } .tm-claim-in:focus-within { border-color: #5ef0ff; } .tm-claim-msg { min-height: 20px; font-size: 12px !important; } .tm-claim-msg.ok { color: #7dff9a !important; } .tm-claim-msg.bad { color: #ff8a8a !important; } .tm-claim-sug { display: flex; flex-wrap: wrap; gap: 8px; } .tm-claim-sug:empty { display: none; } .tm-claim-sug button { min-height: 44px; padding: 0 16px; border: 2px solid rgba(94, 240, 255, .35); border-radius: 999px; background: var(--gm-slot); color: var(--gm-cream); font: 800 14px/1 var(--gm-f-body); cursor: pointer; } @media (prefers-reduced-motion: reduce) { .tm-h-glow, .tm-claim-orb { animation: none; } } html.gm-hidden .tm-h-glow, html.gm-hidden .tm-claim-orb { animation-play-state: paused; } /* TASK-037 B1: baris share di popup Your earnings (di bawah kartu LIVE) */ .st-sh { display: grid; gap: 8px; margin-top: 12px; } .st-sh-k { color: var(--gm-mut); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .st-sh .rm-share.row { margin-top: 0; } /* ---------- AI-ANCHOR: CSS_ROOM_BOXACT — TASK-037 B9 + B2 (owner #81 #76): dua tombol kaki kotak My room + progres "Share to start earning" ---------- */ .rm-box-act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; } .rm-box-act .rm-stbtn { justify-content: center; min-height: 52px; padding: 0 12px; } .rm-box-act .rm-stbtn span { color: inherit; font-size: 14px; } .rm-shbtn { -webkit-appearance: none; appearance: none; position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; padding: 4px 12px; overflow: hidden; border: 2px solid #ffd766; border-radius: 999px; background: linear-gradient(#ffc933, #f59e0b); color: #1a1405; cursor: pointer; isolation: isolate; box-shadow: 0 4px 0 #b86b00, 0 0 20px rgba(255, 201, 51, .35); transition: transform .15s ease; } .rm-shbtn:active { transform: translateY(2px) scale(.98); } .rm-shbtn svg { flex: none; width: 20px; height: 20px; } .rm-shbtn > span { display: grid; min-width: 0; text-align: left; } .rm-shbtn b { overflow: hidden; font: 900 14px/1.2 var(--gm-f-body); text-overflow: ellipsis; white-space: nowrap; } .rm-shbtn small { overflow: hidden; color: #4a3304; font: 800 12px/1.2 var(--gm-f-body); text-overflow: ellipsis; white-space: nowrap; } .rm-shbtn-glow { position: absolute; inset: 0 auto 0 -40%; z-index: -1; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(0) skewX(-20deg); animation: rm-shine 3s ease-in-out infinite; } @keyframes rm-shine { 0%, 50% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(400%) skewX(-20deg); } } .rm-shbtn.start { animation: rm-nudge 2.4s ease-in-out infinite; } @keyframes rm-nudge { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.04); } 94% { transform: scale(.99); } } .rm-req { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; } .rm-req-i { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 4px 12px 8px; overflow: hidden; border-radius: var(--gm-r1); background: rgba(255, 255, 255, .05); } .rm-req-i span { color: var(--gm-mut); font-size: 12px; font-weight: 800; } .rm-req-i b { color: #ffd766; font-size: 14px; } .rm-req-i.done b { color: #7dff9a; } .rm-req-i i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #ffc933, #7dff9a); transform: scaleX(var(--w, 0)); transform-origin: left; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } @media (max-width: 359px) { .rm-box-act { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .rm-shbtn-glow, .rm-shbtn.start { animation: none; } } html.gm-hidden .rm-shbtn-glow, html.gm-hidden .rm-shbtn.start { animation-play-state: paused; } .rm-box-act.lock { grid-template-columns: minmax(0, 1fr); } .rm-box-act.lock .rm-shbtn { order: -1; min-height: 56px; } .rm-box-act.lock .rm-shbtn b { font-size: 16px; } .rm-box-act .rm-req { margin-top: 0; } .rm-box-act.lock .rm-stbtn { order: 1; } .rm-box-act.lock .rm-shbtn small { white-space: normal; } @media (max-width: 419px) { .rm-box-act:not(.lock) .rm-shbtn { padding: 4px 8px; } .rm-box-act:not(.lock) .rm-shbtn > svg { display: none; } .rm-box-act:not(.lock) .rm-shbtn > span { text-align: center; } } /* ---------- AI-ANCHOR: CSS_ROOM_STARTMINE — TASK-037 B10 (owner #82): sheet COLLECT kosong → deposit + rig mulai $1 ---------- */ .cv { display: grid; gap: 16px; } .cv > * { animation: st-in .45s cubic-bezier(.22, 1, .36, 1) both; } .cv > *:nth-child(2) { animation-delay: 60ms; } .cv > *:nth-child(3) { animation-delay: 120ms; } .cv > *:nth-child(4) { animation-delay: 180ms; } .cv > *:nth-child(5) { animation-delay: 240ms; } .cv-hero { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px; overflow: hidden; border: 2px solid rgba(125, 255, 154, .45); border-radius: var(--gm-r2); background: linear-gradient(135deg, rgba(125, 255, 154, .14), rgba(94, 240, 255, .08)); } .cv-hero img { flex: none; filter: drop-shadow(0 0 16px rgba(125, 255, 154, .45)); } .cv-hero > div { display: grid; min-width: 0; } .cv-hero small { color: var(--gm-mut); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .cv-hero b { color: #7dff9a; font: 400 40px/1.1 var(--gm-f-title); text-shadow: 0 0 20px rgba(125, 255, 154, .45); } .cv-hero span:not(.cv-scan) { color: var(--gm-cream); font-size: 14px; font-weight: 800; } .cv-scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(125, 255, 154, .16) 50%, transparent 60%); transform: translateY(-100%); animation: cv-scan 2.8s linear infinite; pointer-events: none; } @keyframes cv-scan { to { transform: translateY(100%); } } .cv-t { margin: 0; color: var(--gm-cream); font-size: 16px; font-weight: 800; line-height: 1.45; } .cv-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cv-pick button { -webkit-appearance: none; appearance: none; display: grid; justify-items: center; gap: 4px; min-height: 96px; padding: 8px 4px; border: 2px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-slot); color: var(--gm-cream); cursor: pointer; transition: transform .15s ease, border-color .15s ease; } .cv-pick button[aria-checked="true"] { border-color: #7dff9a; box-shadow: 0 0 16px rgba(125, 255, 154, .3); transform: translateY(-2px); } .cv-pick b { font: 900 16px/1.2 var(--gm-f-body); } .cv-pick small { color: var(--gm-mut); font-size: 12px; font-weight: 800; } .cv-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .cv-steps li { display: flex; align-items: center; gap: 12px; color: var(--gm-cream); font-size: 14px; font-weight: 800; } .cv-steps i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(94, 240, 255, .16); color: #5ef0ff; font: 900 12px/1 var(--gm-f-body); font-style: normal; } @media (prefers-reduced-motion: reduce) { .cv > *, .cv-scan { animation: none; } } html.gm-hidden .cv-scan { animation-play-state: paused; } /* ---------- AI-ANCHOR: CSS_ROOM_STORAGE — TASK-037 B3: Storage hadiah (room penuh) ---------- */ .rm-store { -webkit-appearance: none; appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin-top: 12px; padding: 12px 16px; border: 2px dashed rgba(255, 215, 102, .55); border-radius: var(--gm-r1); background: rgba(255, 201, 51, .08); color: var(--gm-cream); text-align: left; cursor: pointer; } .rm-store-ic { display: flex; flex: none; } .rm-store-ic img { margin-left: -8px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); } .rm-store-ic img:first-child { margin-left: 0; } .rm-store > span:not(.rm-store-ic) { display: grid; flex: 1; min-width: 0; } .rm-store b { font: 900 16px/1.25 var(--gm-f-body); color: #ffd766; } .rm-store small { color: var(--gm-mut); font-size: 12px; font-weight: 800; } .rm-store-go { flex: none; width: 20px; height: 20px; color: #ffd766; } .rm-stl { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; } .rm-stl li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--gm-r1); background: var(--gm-slot); } .rm-stl li > span { display: grid; flex: 1; min-width: 0; } .rm-stl b { font-size: 14px; font-weight: 900; } .rm-stl small { color: #5ef0ff; font-size: 12px; font-weight: 800; } /* ---------- AI-ANCHOR: CSS_FREE_VAULT — TASK-037 B4 (owner #77): podium item EXCLUSIVE pemenang — robot juara berayun + trofi, rig melayang, podium bercahaya, kilau mengorbit. transform/opacity saja; berhenti di luar layar (.fr-fx:not(.on)) & tab tersembunyi. ---------- */ .fr-vault { display: grid; gap: 16px; margin-top: 16px; padding: 16px; border: 2px solid rgba(255, 201, 51, .5); border-radius: var(--gm-r2); background: radial-gradient(120% 80% at 50% 0%, rgba(255, 201, 51, .18), transparent 60%), linear-gradient(#1d2650, #121936); } .fr-v-beam { position: absolute; inset: -30% 30% auto; z-index: 0; height: 90%; background: conic-gradient(from 180deg at 50% 0%, transparent 40%, rgba(255, 228, 135, .22) 50%, transparent 60%); transform-origin: 50% 0; animation: fr-v-beam 6s ease-in-out infinite; pointer-events: none; } @keyframes fr-v-beam { 0%, 100% { transform: rotate(-12deg); opacity: .7; } 50% { transform: rotate(12deg); opacity: 1; } } .fr-v-head { display: flex; align-items: center; gap: 12px; } .fr-v-bot { flex: none; transform-origin: 50% 100%; animation: fr-v-sway 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); } @keyframes fr-v-sway { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-4px); } } .fr-v-cup { position: absolute; left: 52px; top: -4px; width: 32px; height: 32px; animation: fr-v-cup 2.6s ease-in-out infinite; } .fr-v-cup svg { width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(255, 201, 51, .8)); } @keyframes fr-v-cup { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-8px) rotate(8deg); } } .fr-v-head > div { display: grid; gap: 4px; min-width: 0; } .fr-v-head small { color: #ffd766; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .fr-v-head h2 { margin: 0; color: #fff; font: 400 24px/1.2 var(--gm-f-title); } .fr-v-head p { margin: 0; color: var(--gm-mut); font-size: 14px; font-weight: 700; line-height: 1.45; } .fr-v-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .fr-v-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fr-v-list li { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: var(--gm-r1); background: rgba(11, 16, 36, .55); text-align: center; } .fr-v-list b { color: #fff; font-size: 14px; font-weight: 900; line-height: 1.45; } .fr-v-list small { color: var(--gm-mut); font-size: 12px; font-weight: 800; } .fr-v-list em { color: #5ef0ff; font-size: 12px; font-style: normal; font-weight: 900; } .fr-v-ped { position: relative; display: grid; place-items: center; width: 96px; height: 88px; } .fr-v-ped img { position: relative; z-index: 1; animation: fr-v-float 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); } @keyframes fr-v-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .fr-v-glow { position: absolute; left: 50%; bottom: 0; width: 80px; height: 16px; margin-left: -40px; border-radius: 50%; background: radial-gradient(closest-side, var(--vc, #ffc933), transparent); opacity: .8; animation: fr-v-glow 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); } @keyframes fr-v-glow { 0%, 100% { transform: scaleX(1); opacity: .85; } 50% { transform: scaleX(.7); opacity: .45; } } .fr-v-sp { position: absolute; inset: 8px; z-index: 2; border-radius: 50%; animation: fr-v-orbit 4s linear infinite; } .fr-v-sp::before, .fr-v-sp::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--vc, #ffc933); } .fr-v-sp::before { top: 0; left: 50%; } .fr-v-sp::after { bottom: 8px; left: 4px; width: 4px; height: 4px; } @keyframes fr-v-orbit { to { transform: rotate(360deg); } } .fr-v-xgold { --vc: #ffc933; box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .6); } .fr-v-xsilver { --vc: #e2e8f0; box-shadow: inset 0 0 0 2px rgba(226, 232, 240, .45); } .fr-v-xbronze { --vc: #f59e0b; box-shadow: inset 0 0 0 2px rgba(217, 119, 6, .5); } .fr-v-xneon { --vc: #22d3ee; box-shadow: inset 0 0 0 2px rgba(34, 211, 238, .5); } .fr-ct-x { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px dashed rgba(255, 201, 51, .5); border-radius: var(--gm-r1); background: rgba(255, 201, 51, .08); } .fr-ct-x img { flex: none; animation: fr-v-float 3s ease-in-out infinite; } .fr-ct-x span { color: var(--gm-cream); font-size: 12px; font-weight: 800; line-height: 1.45; } .fr-fx:not(.on) .fr-v-beam, .fr-fx:not(.on) .fr-v-bot, .fr-fx:not(.on) .fr-v-cup, .fr-fx:not(.on) .fr-v-ped img, .fr-fx:not(.on) .fr-v-glow, .fr-fx:not(.on) .fr-v-sp, .fr-fx:not(.on) .fr-ct-x img { animation-play-state: paused; } html.gm-hidden .fr-vault *, html.gm-hidden .fr-ct-x img { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .fr-vault *, .fr-ct-x img { animation: none !important; } } /* ---------- AI-ANCHOR: CSS_ROOM_MISSION — TASK-057 (owner #137): panel Mission futuristik penuh warna di /room#rewards ---------- Bingkai neon konik berputar (magenta · ungu · cyan · emas · hijau), 2 aurora melayang, grid neon. Panggung: robot share + kursor → aliran "+1" warna-warni → robot menggali ke gerobak. 3 langkah (aktif berdenyut, selesai = centang hijau), kartu hadiah berikutnya + bar progres bercahaya, 1 tombol aksi. Hanya transform/opacity; semua animasi berhenti di luar layar (.on) & tab tersembunyi; reduced-motion = diam. */ .rr-ms { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 12px; margin-bottom: 16px; padding: 16px; border-radius: var(--gm-r3); box-shadow: 0 0 32px rgba(244, 114, 182, .18), 0 0 48px rgba(94, 240, 255, .12); } .rr-ms-sk { min-height: 320px; background: rgba(21, 29, 66, .6); } .rr-ms-fr { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; } .rr-ms-fr::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1200px; aspect-ratio: 1; margin: -600px 0 0 -600px; background: conic-gradient(#f472b6, #a78bfa, #5ef0ff, #86e85c, #ffc933, #f472b6); animation: hk-chip-spin 8s linear infinite; } .rr-ms-fr::after { content: ""; position: absolute; inset: 2px; border-radius: 22px; background: linear-gradient(rgba(94, 240, 255, .07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(94, 240, 255, .07) 1px, transparent 1px) 0 0 / 24px 24px, radial-gradient(90% 60% at 0% 0%, rgba(167, 139, 250, .35), transparent 70%), radial-gradient(80% 60% at 100% 100%, rgba(244, 114, 182, .28), transparent 70%), linear-gradient(160deg, #1a1446, #0e1633 55%, #0b1a3a); } .rr-ms-au { position: absolute; z-index: -1; width: 200px; height: 200px; border-radius: 50%; opacity: .45; pointer-events: none; animation: rr-au 9s ease-in-out infinite alternate; } .rr-ms-au.a { left: -60px; top: 40px; background: radial-gradient(closest-side, rgba(94, 240, 255, .6), transparent); } .rr-ms-au.b { right: -60px; top: -40px; background: radial-gradient(closest-side, rgba(244, 114, 182, .55), transparent); animation-delay: -4s; } @keyframes rr-au { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 24px) scale(1.2); } } .rr-ms-stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 0; height: 96px; } .rr-ms-stage .pc-scene { margin-right: 36px; transform: scale(1.4); transform-origin: 0 100%; } .rr-beam { position: relative; height: 56px; margin: 0 0 16px; } .rr-beam::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 2px; background: repeating-linear-gradient(90deg, rgba(94, 240, 255, .7) 0 6px, transparent 6px 12px); animation: fr-gr .6s linear infinite; } .rr-fl { position: absolute; left: 0; top: 16px; padding: 4px 8px; border-radius: 999px; font: 400 12px/16px var(--gm-f-title); color: #0b1024; opacity: 0; animation: rr-fl 2.5s linear calc(var(--k) * .5s) infinite; } .rr-fl:nth-child(5n+1) { background: #f472b6; } .rr-fl:nth-child(5n+2) { background: #5ef0ff; } .rr-fl:nth-child(5n+3) { background: #ffc933; } .rr-fl:nth-child(5n+4) { background: #86e85c; } .rr-fl:nth-child(5n) { background: #a78bfa; } @keyframes rr-fl { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 12% { opacity: 1; transform: translate(12px, -6px) scale(1); } 50% { transform: translate(calc(50cqi - 16px), 4px); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(100cqi - 24px), 0) scale(.7); } } .rr-beam { container-type: inline-size; } .rr-dig { position: relative; width: 134px; height: 83px; } .rr-dig .col-box { --s: .8; display: block; transform: scaleX(-1); } .rr-ms-k { margin: 0; color: #f9a8d4; font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; } .rr-ms-t { margin: -8px 0 0; font: 400 clamp(20px, 5vw, 24px)/1.2 var(--gm-f-title); color: #fff; text-shadow: 0 2px 0 var(--gm-line), 0 0 16px rgba(167, 139, 250, .5); } .rr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; } .rr-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; padding: 12px 4px; border: 2px solid rgba(255, 255, 255, .12); border-radius: var(--gm-r2); background: rgba(11, 16, 36, .55); text-align: center; animation: rp-in .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * .1s) both; } .rr-steps li:not(:last-child)::after { content: ""; position: absolute; right: -8px; top: 32px; width: 8px; height: 2px; background: rgba(94, 240, 255, .5); } .rr-st-ic { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(167, 139, 250, .18); color: #c4b5fd; } .rr-st-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .rr-st-ic em { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border: 2px solid var(--gm-line); border-radius: 999px; background: #a78bfa; color: #0b1024; font-size: 12px; font-style: normal; font-weight: 900; line-height: 1; } .rr-steps b { color: #fff; font-size: 12px; font-weight: 900; line-height: 1.5; } .rr-steps small { color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 1.5; } .rr-steps li.now { border-color: #5ef0ff; background: rgba(94, 240, 255, .12); box-shadow: 0 0 16px rgba(94, 240, 255, .35); } .rr-steps li.now .rr-st-ic { background: rgba(94, 240, 255, .22); color: var(--gm-cyan); } .rr-steps li.now .rr-st-ic::before { content: ""; position: absolute; inset: -4px; border: 2px solid var(--gm-cyan); border-radius: 50%; animation: rr-ring 1.6s ease-out infinite; } @keyframes rr-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.4); opacity: 0; } } .rr-steps li.now small { color: var(--gm-cyan); } .rr-steps li.done { border-color: rgba(134, 232, 92, .55); } .rr-steps li.done .rr-st-ic { background: rgba(134, 232, 92, .18); color: var(--gm-green); } .rr-steps li.done .rr-st-ic em { background: var(--gm-green); } .rr-next { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border: 2px solid rgba(255, 201, 51, .45); border-radius: var(--gm-r2); background: linear-gradient(100deg, rgba(255, 201, 51, .14), rgba(11, 16, 36, .5) 60%); } .rr-next-art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; } .rr-next-art img { position: relative; z-index: 1; width: 56px; height: 56px; animation: rp-rig 2.4s cubic-bezier(.45, 0, .55, 1) infinite; } .rr-next-art i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 201, 51, .5), transparent 40%, rgba(244, 114, 182, .5) 60%, transparent); -webkit-mask-image: radial-gradient(closest-side, transparent 70%, #000 72%); mask-image: radial-gradient(closest-side, transparent 70%, #000 72%); animation: hk-chip-spin 4s linear infinite; } .rr-next-b { display: grid; gap: 4px; min-width: 0; } .rr-next-b small { color: #ffd766; font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; } .rr-next-b b { overflow: hidden; color: #fff; font-size: 16px; font-weight: 900; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; } .rr-next-b em { color: var(--gm-cream); font-size: 12px; font-style: normal; font-weight: 900; line-height: 16px; } .rr-bar.lg { height: 12px; } .rr-bar.lg i { background: linear-gradient(90deg, #f472b6, #a78bfa, #5ef0ff); box-shadow: 0 0 12px rgba(167, 139, 250, .6); } .rr-ms-go { margin-top: 4px; } .rr-ms-go svg { width: 24px; height: 24px; } @media (max-width: 399px) { .rr-fl:nth-child(n+4) { display: none; } .rr-fl { animation-duration: 1.5s; } } @media (max-width: 359px) { .rr-ms-go { padding: 0 16px; font-size: 16px; } } .rr-ms-f { margin: -4px 0 0; color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 16px; text-align: center; } @media (max-width: 399px) { .rr-ms { padding: 12px; } .rr-ms-stage { height: 72px; } .rr-ms-stage .pc-scene { margin-right: 8px; transform: scale(1.1); } .rr-beam { margin-bottom: 8px; } .rr-dig { width: 100px; height: 62px; } .rr-dig .col-box { --s: .6; } .rr-steps li { padding: 8px 4px; } } .rr-ms:not(.on) *, .rr-ms:not(.on)::before, .rr-ms:not(.on) *::before, .rr-ms:not(.on) *::after, html.gm-hidden .rr-ms *, html.gm-hidden .rr-ms *::before, html.gm-hidden .rr-ms *::after { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .rr-ms *, .rr-ms *::before, .rr-ms *::after { animation: none !important; } .rr-fl { opacity: 0; } } /* ---------- AI-ANCHOR: CSS_ROOM_REWARDS — TASK-037 B11 (owner #84): /room#rewards Stats · Rewards (tangga klik) · Collectibles ---------- */ .rm-rr { position: relative; } .rm-top-r .rm-ib { flex: none; min-width: 44px; } .rm-rr svg { width: 22px; height: 22px; } .rm-rr-dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border: 2px solid #0b1024; border-radius: 50%; background: #ffc933; animation: tm-orb 1.6s ease-in-out infinite; } .rr { display: grid; gap: 16px; margin-top: 16px; } .rr > *, .rr-tiles li, .rr-ladder li, .rr-grid li { animation: st-in .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 40ms); } .rr-hero { position: relative; display: grid; gap: 4px; padding: 16px; overflow: hidden; border: 2px solid rgba(94, 240, 255, .45); border-radius: var(--gm-r2); background: linear-gradient(135deg, rgba(94, 240, 255, .14), rgba(125, 255, 154, .06)); } .rr-hero small { color: var(--gm-mut); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .rr-hero b { color: #5ef0ff; font: 400 40px/1.1 var(--gm-f-title); text-shadow: 0 0 20px rgba(94, 240, 255, .45); } .rr-hero > span { color: var(--gm-cream); font-size: 14px; font-weight: 800; } .rr-hero em { color: #ffd766; font-size: 12px; font-style: normal; font-weight: 900; } .rr-scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(94, 240, 255, .14), transparent); transform: translateX(-100%); animation: rr-scan 3.2s ease-in-out infinite; pointer-events: none; } @keyframes rr-scan { 60%, 100% { transform: translateX(100%); } } .rr-bar { position: relative; height: 12px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); } .rr-bar.sm { height: 6px; margin-top: 4px; } .rr-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #5ef0ff, #7dff9a); transform: scaleX(var(--w, 0)); transform-origin: left; animation: rr-fill 1s cubic-bezier(.22, 1, .36, 1) both; } @keyframes rr-fill { from { transform: scaleX(0); } } .rr-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .rr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .rr-tiles li { display: grid; gap: 4px; padding: 12px; border-radius: var(--gm-r1); background: var(--gm-slot); box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .16); } .rr-tiles span { color: var(--gm-mut); font-size: 12px; font-weight: 800; } .rr-tiles b { color: #fff; font-size: 24px; font-weight: 900; line-height: 1.2; } .rr-tiles small { color: var(--gm-dim); font-size: 12px; font-weight: 700; } .rr-lead { margin: 0; color: var(--gm-mut); font-size: 14px; font-weight: 700; line-height: 1.5; } .rr-ladder { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .rr-t { display: grid; grid-template-columns: 56px 56px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 72px; padding: 8px 12px; border-radius: var(--gm-r1); background: var(--gm-slot); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); } .rr-t-n { display: grid; color: #fff; font-size: 16px; font-weight: 900; line-height: 1.2; } .rr-t-n small { color: var(--gm-dim); font-size: 10px; font-weight: 800; text-transform: uppercase; } .rr-t-art { position: relative; display: grid; place-items: center; } .rr-t-bot { position: absolute; right: -8px; bottom: -4px; } .rr-t-b { display: grid; min-width: 0; } .rr-t-b b { color: var(--gm-cream); font-size: 14px; font-weight: 900; line-height: 1.45; overflow-wrap: anywhere; } .rr-t-b small { color: #5ef0ff; font-size: 12px; font-weight: 800; } .rr-t-left { color: var(--gm-mut); font-size: 12px; font-weight: 900; } .rr-t-ok { color: #7dff9a; font-size: 12px; font-weight: 900; } .rr-t.lock { opacity: .72; } .rr-t.lock img { filter: grayscale(.6); } .rr-t.can { box-shadow: inset 0 0 0 2px #ffc933, 0 0 20px rgba(255, 201, 51, .3); animation: st-in .45s both, rr-pulse 1.8s ease-in-out .5s infinite; } @keyframes rr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } } .rr-t.done { box-shadow: inset 0 0 0 2px rgba(125, 255, 154, .45); } .rr-t.now { box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .45); } @media (max-width: 374px) { .rr-t { grid-template-columns: 48px 48px minmax(0, 1fr); } .rr-t > :last-child { grid-column: 1 / -1; justify-self: stretch; text-align: center; } .rr-t-art img:first-child { width: 44px; height: 44px; } } .rr-col-h { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; } .rr-col-h > div { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--gm-r1); background: var(--gm-slot); } .rr-col-h small { color: var(--gm-mut); font-size: 12px; font-weight: 800; } .rr-col-h b { color: #ffd766; font: 400 32px/1.1 var(--gm-f-title); } .rr-col-h span { color: var(--gm-cream); font-size: 12px; font-weight: 800; } .rr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .rr-grid li { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; border-radius: var(--gm-r1); background: var(--gm-slot); text-align: center; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); } .rr-grid li img { animation: fr-v-float 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); } .rr-grid li.x { box-shadow: inset 0 0 0 2px #ffc933, 0 0 16px rgba(255, 201, 51, .3); background: linear-gradient(rgba(255, 201, 51, .12), var(--gm-slot)); } .rr-grid b { color: #fff; font-size: 12px; font-weight: 900; line-height: 1.45; } .rr-grid small { color: #5ef0ff; font-size: 12px; font-weight: 800; } .rr-grid li.x small { color: #ffd766; } .rr-grid em { color: var(--gm-mut); font-size: 12px; font-style: normal; font-weight: 800; } .rr-cta { display: flex; align-items: center; gap: 12px; margin-top: 16px; min-height: 64px; padding: 12px 16px; border: 2px solid rgba(255, 201, 51, .55); border-radius: var(--gm-r2); background: linear-gradient(135deg, rgba(255, 201, 51, .16), rgba(94, 240, 255, .06)); color: var(--gm-cream); text-decoration: none; } .rr-cta img { flex: none; animation: fr-v-float 3s ease-in-out infinite; } .rr-cta > span { display: grid; flex: 1; min-width: 0; } .rr-cta b { color: #ffd766; font-size: 16px; font-weight: 900; line-height: 1.25; } .rr-cta small { color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 1.45; } .rr-cta svg { flex: none; width: 20px; height: 20px; color: #ffd766; } /* ---------- AI-ANCHOR: CSS_FX_PC — TASK-055 (owner #136): robot main komputer di tombol Click rewards (js/fx-bots.js FX.pc) ---------- Siklus 2.4 dtk: kursor ke 3 titik layar & klik di 30% · 60% · 90% (riak + "+1" + bar klik naik); tangan kanan robot mengetuk di saat yang sama. Hanya transform/opacity; berhenti saat tab tersembunyi; reduced-motion = diam. */ .pc-scene, .rr-cta > .pc-scene { position: relative; flex: none; display: block; width: 88px; height: 56px; } /* .rr-cta > span { flex: 1 } jangan ikut membesarkan panggung */ .pc-scene svg { width: 100%; height: auto; color: inherit; } .pc-bot { position: absolute; left: 0; bottom: -4px; width: 48px; } .pc-mon { position: absolute; right: 0; top: 4px; width: 48px; height: 44px; } .pc-mon > svg:first-child { display: block; width: 48px; height: 44px; } .pc-bars { position: absolute; left: 10px; top: 12px; display: flex; align-items: flex-end; gap: 4px; height: 12px; } .pc-bars i { width: 4px; height: 12px; border-radius: 2px; background: var(--gm-cyan); transform-origin: 50% 100%; transform: scaleY(.3); animation: pc-bar 2.4s steps(1) infinite; } .pc-bars i:nth-child(2) { animation-delay: .72s; } .pc-bars i:nth-child(3) { animation-delay: 1.44s; background: var(--gm-green); } .pc-bars i:nth-child(4) { animation-delay: .36s; background: var(--gm-gold); } @keyframes pc-bar { 0% { transform: scaleY(.3); } 30% { transform: scaleY(.6); } 60% { transform: scaleY(.85); } 90% { transform: scaleY(1); } } .pc-scene .pc-cur { position: absolute; left: 0; top: 0; width: 10px; height: 14px; color: #fff; filter: drop-shadow(0 1px 0 #0b1024); animation: pc-cur 2.4s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes pc-cur { 0%, 100% { transform: translate(12px, 10px); } 26% { transform: translate(30px, 8px); } 30% { transform: translate(30px, 8px) scale(.8); } 34% { transform: translate(30px, 8px); } 56% { transform: translate(20px, 18px); } 60% { transform: translate(20px, 18px) scale(.8); } 64% { transform: translate(20px, 18px); } 86% { transform: translate(10px, 14px); } 90% { transform: translate(10px, 14px) scale(.8); } } .pc-rip { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border: 2px solid var(--gm-gold); border-radius: 50%; opacity: 0; animation: pc-rip 2.4s ease-out infinite; } @keyframes pc-rip { 0%, 29% { opacity: 0; transform: translate(30px, 8px) scale(.3); } 30% { opacity: 1; transform: translate(30px, 8px) scale(.3); } 40% { opacity: 0; transform: translate(30px, 8px) scale(1.6); } 59% { opacity: 0; transform: translate(20px, 18px) scale(.3); } 60% { opacity: 1; transform: translate(20px, 18px) scale(.3); } 70% { opacity: 0; transform: translate(20px, 18px) scale(1.6); } 89% { opacity: 0; transform: translate(10px, 14px) scale(.3); } 90% { opacity: 1; transform: translate(10px, 14px) scale(.3); } 100% { opacity: 0; transform: translate(10px, 14px) scale(1.6); } } .pc-scene .pc-plus { position: absolute; right: -4px; top: -8px; color: var(--gm-gold); font: 400 12px/1 var(--gm-f-title); text-shadow: 0 1px 0 #0b1024; opacity: 0; animation: pc-plus 2.4s ease-out infinite; } @keyframes pc-plus { 0%, 29%, 42%, 59%, 72%, 89% { opacity: 0; transform: translateY(4px) scale(.6); } 32%, 62%, 92% { opacity: 1; transform: none; } 40%, 70%, 100% { opacity: 0; transform: translateY(-8px); } } /* robot: aksi type */ .rb-type .rb-armR { transform: rotate(-58deg); } .rb-type .rb-elbR { animation: rb-tTap 2.4s ease-in-out infinite; } @keyframes rb-tTap { 0%, 24%, 36%, 54%, 66%, 84%, 96%, 100% { transform: rotate(-14deg); } 30%, 60%, 90% { transform: rotate(8deg); } } .rb-type .rb-armL { animation: rb-tKey .4s ease-in-out infinite alternate; } .rb-type .rb-elbL { transform: rotate(-36deg); } @keyframes rb-tKey { from { transform: rotate(-30deg); } to { transform: rotate(-38deg); } } .rb-type .rb-head { animation: rb-tHead 2.4s ease-in-out infinite; } @keyframes rb-tHead { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(10deg) translateY(1px); } } html.gm-hidden .rr-cta *, html.gm-hidden .rr-cta *::after { animation-play-state: paused !important; } /* HP sempit: panggung dikecilkan (skala .72 → 64 × 40) supaya judul tombol tidak lebih dari 2 baris */ @media (max-width: 359px) { .rm-energy .rr-cta b { font-size: 14px; } } @media (max-width: 419px) { .rr-cta .pc-scene { width: 64px; height: 40px; } .rr-cta .pc-scene > * { transform-origin: 0 0; } .pc-bot { width: 35px; } .pc-mon { transform: scale(.72); transform-origin: 100% 0; } .rr-cta { gap: 8px; padding: 12px; } } @media (prefers-reduced-motion: reduce) { .pc-scene *, .pc-scene { animation: none !important; } .pc-bars i { transform: scaleY(.8); } } html.gm-hidden .rr *, html.gm-hidden .rr-cta img, html.gm-hidden .rm-rr-dot { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .rr *, .rr-cta img, .rm-rr-dot { animation: none !important; } } /* ---------- AI-ANCHOR: CSS_ROOM_PLAY — TASK-038 (owner #87): tab Play (Lucky Spin · Friend Boost · Daily Code) + 3 tab Free ---------- */ .fr-tabs.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fr-tabs.t3 .fr-tab-ind { width: calc((100% - 16px) / 3); transform: translate3d(calc(var(--ti, 0) * (100% + 4px)), 0, 0); } .fr-tabs.t3 button { gap: 4px; padding: 0 4px; font-size: 14px; } @media (max-width: 359px) { .fr-tabs.t3 button svg { display: none; } } .pl { display: grid; gap: 16px; } .pl-card { display: grid; gap: 16px; padding: 16px; border-radius: var(--gm-r2); background: radial-gradient(120% 70% at 50% 0%, rgba(94, 240, 255, .14), transparent 60%), linear-gradient(#1d2650, #121936); box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .25); } .pl-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pl-h > div { display: grid; gap: 4px; min-width: 0; } .pl-h small { color: #5ef0ff; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .pl-h h2 { margin: 0; color: #fff; font: 400 24px/1.2 var(--gm-f-title); } .pl-h p { margin: 0; color: var(--gm-mut); font-size: 14px; font-weight: 700; line-height: 1.45; } .pl-left { display: grid; justify-items: center; flex: none; min-width: 64px; padding: 8px; border-radius: var(--gm-r1); background: rgba(255, 201, 51, .12); box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .45); } .pl-left b { color: #ffd766; font: 400 32px/1 var(--gm-f-title); } .pl-left small { color: var(--gm-mut); font-size: 10px; letter-spacing: 0; text-transform: none; } /* roda */ .sp-stage { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: end; gap: 8px; } .sp-wheel-w { position: relative; width: 100%; max-width: 280px; justify-self: center; } .sp-wheel { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 20px rgba(94, 240, 255, .3)); } .sp-rot { transform-box: view-box; transform-origin: 0 0; transition: transform 4.2s cubic-bezier(.12, .7, .08, 1); } .sp-bulb { fill: #fff3b0; animation: sp-bulb 1s steps(2) infinite; animation-delay: calc(var(--k) * -.125s); } @keyframes sp-bulb { 50% { fill: #5ef0ff; opacity: .5; } } .sp-pin { position: absolute; left: 50%; top: -8px; width: 28px; height: 36px; margin-left: -14px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); animation: sp-pin .4s ease-in-out infinite alternate; transform-origin: 50% 20%; } @keyframes sp-pin { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } } .sp-side { position: relative; display: grid; justify-items: center; } .sp-bot { width: 96px; } .sp-lever { position: relative; width: 24px; height: 72px; margin-bottom: -8px; } .sp-lever-base { position: absolute; left: 4px; bottom: 0; width: 16px; height: 16px; border: 3px solid #0b1024; border-radius: 4px; background: #4a5794; } .sp-lever-arm { position: absolute; left: 9px; bottom: 12px; width: 6px; height: 56px; border-radius: 3px; background: #9fadc8; box-shadow: 0 0 0 2px #0b1024; transform-origin: 50% 100%; transform: rotate(-20deg); } .sp-lever-arm::before { content: ""; position: absolute; left: -6px; top: -12px; width: 18px; height: 18px; border: 3px solid #0b1024; border-radius: 50%; background: #ff4d6d; } .sp-lever.pull .sp-lever-arm { animation: sp-lever 2s cubic-bezier(.6, 0, .3, 1) infinite; } @keyframes sp-lever { 0%, 35%, 100% { transform: rotate(-20deg); } 55%, 80% { transform: rotate(40deg); } } .pl-ways { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .pl-ways li { display: flex; align-items: center; gap: 12px; color: var(--gm-cream); font-size: 14px; font-weight: 800; line-height: 1.45; } .pl-ways b { display: grid; place-items: center; flex: none; width: 40px; height: 28px; border-radius: 999px; background: rgba(125, 255, 154, .16); color: #7dff9a; font-size: 14px; } .pl-more { margin: 0; color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 1.45; } .pl-more .gm-link { min-height: 44px; font-size: 12px; } .pl-ticker { overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .05); -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); } .pl-tk-in { display: flex; gap: 24px; width: max-content; padding: 8px 16px; animation: pl-tk 30s linear infinite; } .pl-tk-in span { color: var(--gm-mut); font-size: 12px; font-weight: 800; white-space: nowrap; } .pl-tk-in b { color: #ffd766; } @keyframes pl-tk { to { transform: translateX(-50%); } } /* hasil */ .pl-won { display: grid; justify-items: center; gap: 8px; text-align: center; } .pl-won-art { position: relative; display: grid; place-items: center; width: 100%; min-height: 150px; } .pl-burst { position: absolute; width: 144px; height: 144px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 201, 51, .5), transparent 12%, rgba(94, 240, 255, .45) 25%, transparent 37%, rgba(255, 201, 51, .5) 50%, transparent 62%, rgba(94, 240, 255, .45) 75%, transparent 87%); animation: rb-spin 6s linear infinite; } .pl-won-img, .pl-won-ic { position: relative; animation: pl-pop .6s cubic-bezier(.34, 1.56, .64, 1) both, fr-v-float 3s ease-in-out .6s infinite; } .pl-won-ic { font-size: 64px; line-height: 1; } @keyframes pl-pop { from { transform: scale(0) rotate(-20deg); opacity: 0; } } .pl-won-bot { position: absolute; right: 0; bottom: 0; width: 72px; } .pl-won b { color: #ffd766; font: 400 32px/1.2 var(--gm-f-title); } .pl-won p { margin: 0; color: var(--gm-cream); font-size: 14px; font-weight: 700; line-height: 1.5; } .pl-won-k { color: #5ef0ff; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; } .pl-won .rm-share.row { width: 100%; } /* boost */ .pl-track { position: relative; height: 128px; overflow: hidden; border-radius: var(--gm-r1); background: linear-gradient(#141b3c 70%, #0b1024); } .pl-road { position: absolute; left: 0; right: 0; bottom: 12px; height: 8px; background: repeating-linear-gradient(90deg, #ffc933 0 24px, transparent 24px 48px); opacity: .6; animation: pl-road .9s linear infinite; } @keyframes pl-road { to { transform: translateX(-48px); } } .pl-pusher { position: absolute; left: 8px; bottom: 2px; width: 96px; } .pl-cart { position: absolute; left: 88px; bottom: 20px; width: 88px; height: 72px; border: 3px solid #0b1024; border-radius: 8px 8px 12px 12px; background: linear-gradient(#4a5794, #26315e); animation: rb-bob .45s ease-in-out infinite; } .pl-cart img { position: absolute; left: 12px; top: -40px; animation: fr-v-float 2s ease-in-out infinite; } .pl-wheel { position: absolute; bottom: -14px; width: 22px; height: 22px; border: 3px solid #0b1024; border-radius: 50%; background: repeating-conic-gradient(#9fadc8 0 25%, #4a5794 0 50%); animation: rb-spin .6s linear infinite; } .pl-wheel.a { left: 8px; } .pl-wheel.b { right: 8px; } .pl-goal { position: absolute; right: 12px; bottom: 20px; font-size: 32px; animation: sp-pin .6s ease-in-out infinite alternate; } .pl-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #5ef0ff, #7dff9a); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .8s cubic-bezier(.22, 1, .36, 1); } .pl-helpers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .pl-helpers li { display: grid; place-items: center; aspect-ratio: 1; border: 2px dashed rgba(255, 255, 255, .2); border-radius: var(--gm-r1); background: rgba(255, 255, 255, .03); color: var(--gm-dim); font-size: 20px; font-weight: 900; } .pl-helpers li.on { border: 2px solid #7dff9a; background: rgba(125, 255, 154, .1); animation: pl-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 80ms); } .pl-helpers li .rb { width: 100%; } .pl-bstat { margin: 0; color: var(--gm-mut); font-size: 14px; font-weight: 800; } .pl-bstat b { color: #7dff9a; } /* kode */ .pl-cform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .pl-cform input { min-width: 0; height: 52px; padding: 0 16px; border: 2px solid rgba(94, 240, 255, .45); border-radius: var(--gm-r1); background: var(--gm-slot); color: #5ef0ff; font: 900 20px/1 var(--gm-f-body); letter-spacing: .2em; text-transform: uppercase; } .pl-cform .gm-btn { min-height: 52px; } .pl-ok { margin: 0; color: #7dff9a; font-size: 14px; font-weight: 800; } .fr-fx:not(.on) .sp-bulb, .fr-fx:not(.on) .sp-pin, .fr-fx:not(.on) .pl-tk-in, .fr-fx:not(.on) .pl-road, .fr-fx:not(.on) .pl-cart, .fr-fx:not(.on) .pl-cart img, .fr-fx:not(.on) .pl-wheel, .fr-fx:not(.on) .pl-goal { animation-play-state: paused; } html.gm-hidden .pl *, html.gm-hidden .pl-won * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .pl *, .pl-won * { animation: none !important; } .sp-rot { transition-duration: .01s; } } .fr-v-bot.rbw { width: 80px; flex: none; animation: none; } .fr-v-bot.rbw + .fr-v-cup { display: none; } /* TASK-038: kartu Play rata kiri & isi selebar kartu (grid .fr-fx mewarisi rata tengah) */ .pl-card { justify-items: stretch; text-align: left; } .pl-card > * { min-width: 0; } .pl-track, .pl-helpers { width: 100%; } .pl-won { text-align: center; } /* ---------- AI-ANCHOR: CSS_ROOM_TREE — TASK-047 (owner #96): pohon tim YOU di puncak + badge ganti @nama 1x. Hanya transform/opacity, berhenti di luar layar (.fx-io tanpa .on) & tab tersembunyi. ---------- */ .tm-h-side { display: grid; justify-items: center; gap: 4px; flex: none; } .tm-h-left { color: #7dff9a; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .tm-h-lock { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 201, 51, .14); box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .5); color: #ffd766; font-size: 12px; font-weight: 900; white-space: nowrap; } .tm-h-lock svg { width: 14px; height: 14px; } .tm-claim-once { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px; border-radius: var(--gm-r1); background: rgba(255, 201, 51, .1); color: #ffd766; font-size: 12px; font-weight: 800; line-height: 1.45; text-align: left; } .tm-claim-once svg { flex: none; width: 16px; height: 16px; margin-top: 1px; } .tt { display: grid; gap: 12px; } .tt .tm-h { margin: 0; } .tt-s { margin: 0; color: var(--gm-mut); font-size: 14px; font-weight: 700; line-height: 1.45; } .tt-top { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--gm-r2); background: radial-gradient(120% 120% at 0% 50%, rgba(255, 201, 51, .22), transparent 60%), rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .5); } .tt-you { position: relative; flex: none; width: 72px; } .tt-you .rb { position: relative; } .tt-halo { position: absolute; left: -4px; top: calc(50% - 44px); width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 201, 51, .7), transparent 30%, rgba(94, 240, 255, .6) 50%, transparent 80%, rgba(255, 201, 51, .7)); -webkit-mask: radial-gradient(circle, transparent 34px, #000 36px); mask: radial-gradient(circle, transparent 34px, #000 36px); animation: rb-spin 4s linear infinite; } .tt-me { display: grid; gap: 4px; min-width: 0; } .tt-me b { color: #ffd766; font: 400 32px/1.1 var(--gm-f-title); text-shadow: 0 0 16px rgba(255, 201, 51, .5); } .tt-me small { overflow: hidden; color: #5ef0ff; font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .tt-me em { color: #dfe6f3; font-size: 12px; font-style: normal; font-weight: 800; } .tt-lv { position: relative; display: grid; gap: 8px; margin: 0; padding: 0 0 0 0; list-style: none; } /* batang: garis dari YOU turun melewati semua level, koin mengalir naik */ .tt-lv::before { content: ""; position: absolute; left: 19px; top: -12px; bottom: 20px; width: 4px; border-radius: 2px; background: linear-gradient(#ffc933, rgba(94, 240, 255, .5) 40%, rgba(255, 255, 255, .12)); } .tt-flow { position: absolute; left: 15px; top: -12px; bottom: 20px; width: 12px; overflow: hidden; pointer-events: none; } .tt-flow i { position: absolute; left: 0; top: 0; width: 12px; height: 100%; animation: tt-up 3s linear infinite; } .tt-flow i::before { content: ""; position: absolute; left: 1px; bottom: 0; width: 10px; height: 10px; border: 2px solid #0b1024; border-radius: 50%; background: #ffc933; box-sizing: border-box; } .tt-flow i:nth-child(2) { animation-delay: -1s; } .tt-flow i:nth-child(3) { animation-delay: -2s; } @keyframes tt-up { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } .tt-r { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; } .tt-r::before { content: ""; position: absolute; left: 40px; top: 50%; width: 12px; height: 3px; margin-top: -1px; background: rgba(94, 240, 255, .45); } .tt-node { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 3px solid #0b1024; border-radius: 50%; background: linear-gradient(#5ef0ff, #2aa9c7); color: #0b1024; font-size: 14px; font-weight: 900; } .tt-r.has .tt-node { background: linear-gradient(#7dff9a, #22c55e); } .tt-ppl { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 32px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .04); } .tt-ppl i { flex: none; width: 24px; height: 24px; border-radius: 50%; } .tt-ppl i.g { border: 2px dashed rgba(94, 240, 255, .5); animation: tt-seat 2s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); } .tt-ppl i.g:nth-child(1)::after { content: "+"; display: grid; place-items: center; height: 100%; color: #5ef0ff; font-size: 14px; font-weight: 900; line-height: 1; } @keyframes tt-seat { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } } .tt-ppl i.p { border: 2px solid #0b1024; background: radial-gradient(circle at 50% 36%, var(--c) 0 5px, transparent 6px), radial-gradient(circle at 50% 100%, var(--c) 0 9px, transparent 10px), #1f2a52; animation: pl-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--j) * 70ms); } .tt-ppl em { color: #7dff9a; font-size: 12px; font-style: normal; font-weight: 900; } .tt-ppl svg { width: 16px; height: 16px; color: var(--gm-mut); } .tt-v { display: grid; justify-items: end; gap: 4px; text-align: right; } .tt-v b { color: #7dff9a; font-size: 16px; font-weight: 900; line-height: 1.25; } .tt-v small { color: var(--gm-mut); font-size: 12px; font-weight: 800; line-height: 1.25; white-space: nowrap; } .tt-r.lock .tt-ppl { opacity: .6; } .tt-r.lock .tt-node { background: #2a3566; color: #c9d5f2; } .tt-r.lock .tt-v b { color: var(--gm-mut); } .fx-io:not(.on) *, html.gm-hidden .fx-io * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .tt * { animation: none !important; } .tt-flow { display: none; } } /* ---------- AI-ANCHOR: CSS_ROOM_ARCADE — TASK-046 (owner #95 #97): hub 10 permainan + 8 permainan (js/room-games.js) + Daily promotion (screenshot). Hanya transform/opacity; berhenti di luar layar (.fr-fx:not(.on)) & tab tersembunyi; prefers-reduced-motion = diam. ---------- */ .fr-promo { display: grid; gap: 8px; } .fr-shot { position: relative; cursor: pointer; } .fr-shot svg { width: 20px; height: 20px; } .fr-shot.busy { opacity: .6; pointer-events: none; } .fr-shot.busy span::after { content: " …"; } .fr-shot-ok { display: inline-flex; align-items: center; gap: 4px; color: #7dff9a; font-size: 12px; font-weight: 900; } .fr-shot-ok svg { width: 14px; height: 14px; } /* hub */ .ag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 560px) { .ag-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .ag-tile { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 120px; padding: 12px 8px; border: 0; border-radius: var(--gm-r1); background: linear-gradient(#26315e, #1a2247); box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .28), 0 4px 0 #0b1024; color: #fff; font: inherit; text-align: center; cursor: pointer; transition: transform .15s; } .ag-tile:active { transform: translateY(2px); } .ag-tile-ic { display: grid; place-items: center; width: 56px; height: 56px; } .ag-tile-ic svg { width: 100%; height: 100%; overflow: visible; } .ag-tile b { font-size: 14px; font-weight: 900; line-height: 1.25; } .ag-tile small { padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #c9d5f2; font-size: 12px; font-weight: 900; line-height: 1.25; } .ag-tile small.on { background: rgba(125, 255, 154, .18); color: #7dff9a; } .ag-tile.lock small { background: rgba(255, 201, 51, .16); color: #ffd766; } .ag-tile-ic * { transform-box: fill-box; } .ag-i-rot { transform-origin: 50% 50%; animation: rb-spin 4s linear infinite; } .ag-i-bob { animation: rb-bob .6s ease-in-out infinite; } .ag-i-wh { transform-origin: 50% 50%; animation: rb-spin .8s linear infinite; } .ag-i-foil { transform-origin: 100% 100%; animation: ag-foil 2.4s ease-in-out infinite; } @keyframes ag-foil { 0%, 30% { transform: scaleX(1); } 60%, 80% { transform: scaleX(.35); } } .ag-i-coin { animation: ag-rub 2.4s ease-in-out infinite; } @keyframes ag-rub { 0%, 30% { transform: none; } 45% { transform: translate(-10px, -8px); } 60% { transform: translate(-18px, -2px); } } .ag-i-fall { animation: ag-fallI 1.4s cubic-bezier(.5, 0, 1, 1) infinite; } @keyframes ag-fallI { from { transform: translateY(-10px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(18px); opacity: 0; } } .ag-i-lid { transform-origin: 0% 100%; animation: ag-lidI 2s ease-in-out infinite; } @keyframes ag-lidI { 0%, 40%, 100% { transform: none; } 60%, 80% { transform: rotate(-24deg); } } .ag-i-sway { transform-origin: 50% 0%; animation: ag-swayI 2s ease-in-out infinite; } @keyframes ag-swayI { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } } .ag-i-reel { animation: ag-reelI .3s linear infinite; } @keyframes ag-reelI { 50% { transform: translateY(2px); opacity: .7; } } .ag-i-flip { transform-origin: 50% 50%; animation: ag-flipI 2.4s ease-in-out infinite; } @keyframes ag-flipI { 0%, 40%, 100% { transform: scaleX(1); } 55% { transform: scaleX(0); } 70% { transform: scaleX(1); } } .ag-i-ball { animation: ag-ballI 1.8s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes ag-ballI { 0% { transform: translate(0, 0); } 30% { transform: translate(-5px, 12px); } 60% { transform: translate(5px, 22px); } 100% { transform: translate(0, 32px); opacity: 0; } } .ag-i-wob { transform-origin: 50% 100%; animation: ag-wobI 1.6s ease-in-out infinite; } @keyframes ag-wobI { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-8deg); } 80% { transform: rotate(8deg); } 90% { transform: rotate(-4deg); } } /* sheet permainan */ .ag-sheet { display: grid; justify-items: stretch; gap: 12px; width: 100%; } .ag-d { margin: 0; color: #c9d5f2; font-size: 14px; font-weight: 700; line-height: 1.45; } .ag-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: 240px; overflow: hidden; border-radius: var(--gm-r2); background: radial-gradient(120% 80% at 50% 0%, rgba(94, 240, 255, .16), transparent 60%), linear-gradient(#1d2650, #121936); box-shadow: inset 0 0 0 2px rgba(94, 240, 255, .25); } .ag-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ag-left { color: #7dff9a; font-size: 14px; font-weight: 900; } .ag-bar .gm-btn { min-width: 160px; } .ag-hint { margin: 0; color: #c9d5f2; font-size: 14px; font-weight: 800; text-align: center; } .ag-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; } .ag-ic svg { width: 100%; height: 100%; } .ag-unlock { display: grid; gap: 8px; padding: 16px; border-radius: var(--gm-r1); background: rgba(255, 201, 51, .08); box-shadow: inset 0 0 0 2px rgba(255, 201, 51, .35); } .ag-unlock b { color: #ffd766; font-size: 16px; font-weight: 900; } .ag-unlock p { margin: 0; color: var(--gm-cream); font-size: 14px; font-weight: 700; line-height: 1.45; } .ag-unlock small { color: #c9d5f2; font-size: 12px; font-weight: 800; } .ag-ubar { height: 8px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .1); } .ag-ubar i { display: block; height: 100%; background: linear-gradient(90deg, #ffc933, #7dff9a); transform-origin: left; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .ag-won { display: grid; justify-items: center; gap: 8px; text-align: center; } .ag-won-art { position: relative; display: grid; place-items: center; width: 100%; min-height: 150px; } .ag-won-img { position: relative; width: 96px; height: 96px; animation: pl-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; } .ag-won-bot { position: absolute; right: 0; bottom: 0; width: 72px; } .ag-won b { color: #ffd766; font: 400 32px/1.2 var(--gm-f-title); } .ag-won p { margin: 0; color: var(--gm-cream); font-size: 14px; font-weight: 700; line-height: 1.5; } .ag-won .rm-share.row { width: 100%; } /* 1 scratch */ .ag-card { position: relative; width: min(300px, 100%); aspect-ratio: 300 / 160; border-radius: 16px; background: linear-gradient(135deg, #ffe487, #ffc933); box-shadow: 0 0 0 3px #0b1024, 0 8px 24px rgba(0, 0, 0, .4); overflow: hidden; } .ag-under { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; color: #0b1024; } .ag-under b { font-size: 16px; font-weight: 900; } .ag-under-img, .ag-under .ag-ic { width: 64px; height: 64px; } .ag-q { font: 400 40px/1 var(--gm-f-title); color: #6b4a00; } #ag-foil { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .45s; } #ag-foil.gone { opacity: 0; pointer-events: none; } /* 2 rain */ .ag-sky { position: relative; width: 100%; height: 280px; touch-action: manipulation; } .ag-hud { position: absolute; left: 12px; top: 12px; z-index: 2; display: grid; } .ag-hud b { color: #ffd766; font: 400 32px/1 var(--gm-f-title); } .ag-hud small { color: #c9d5f2; font-size: 14px; font-weight: 900; } .ag-rain-bot { position: absolute; right: 8px; bottom: 0; width: 72px; } .ag-drop { position: absolute; top: -48px; width: 44px; height: 44px; padding: 0; border: 0; background: none; animation: ag-fall 2.4s linear forwards; cursor: pointer; } .ag-drop::before { content: ""; position: absolute; inset: 6px; border: 3px solid #0b1024; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #ffc933 45%, #e08e00); } .ag-drop.bug::before { border-radius: 40%; background: radial-gradient(circle at 35% 35%, #ffb3c1, #ff4d6d 50%, #a3122f); } .ag-drop.hit { animation-play-state: paused; } .ag-drop.hit::before { animation: ag-hit .25s ease-out forwards; } @keyframes ag-fall { to { transform: translateY(340px) rotate(200deg); } } @keyframes ag-hit { to { transform: scale(1.6); opacity: 0; } } /* 3 chest */ .ag-chests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; padding: 16px; } .ag-chest { position: relative; min-height: 96px; padding: 0; border: 0; background: none; cursor: pointer; animation: rb-bob 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); } .ag-chest svg { width: 100%; height: auto; overflow: visible; } .ag-chest .ag-lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } .ag-chest.shake { animation: ag-shake .12s linear infinite; } @keyframes ag-shake { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } .ag-chest.open { animation: none; } .ag-chest.open .ag-lid { transform: rotate(-35deg) translateY(-6px); } .ag-prz { position: absolute; left: 50%; top: 0; width: 48px; margin-left: -24px; } .ag-chest.open .ag-prz { animation: ag-rise .6s cubic-bezier(.34, 1.56, .64, 1) both; } .ag-prz img { width: 48px; height: 48px; } @keyframes ag-rise { from { transform: translateY(24px) scale(.3); opacity: 0; } to { transform: translateY(-24px); } } /* 4 claw */ .ag-box { position: relative; width: 100%; height: 260px; } .ag-rail { position: absolute; left: 8px; right: 8px; top: 12px; height: 8px; border-radius: 4px; background: #9fadc8; } .ag-claw { position: absolute; left: 8px; top: 12px; width: 48px; animation: ag-move 2.6s ease-in-out infinite alternate; } @keyframes ag-move { to { transform: translateX(var(--run, 240px)); } } .ag-rope { position: absolute; left: 22px; bottom: 100%; width: 4px; height: 400px; background: #9fadc8; } .ag-claw svg { position: relative; display: block; width: 48px; height: 36px; } .ag-claw .ag-fl, .ag-claw .ag-fr { transform-box: fill-box; transition: transform .25s; } .ag-claw .ag-fl { transform-origin: 100% 0%; } .ag-claw .ag-fr { transform-origin: 0% 0%; } .ag-claw.shut .ag-fl { transform: rotate(-18deg); } .ag-claw.shut .ag-fr { transform: rotate(18deg); } .ag-grab { position: absolute; left: 8px; top: 24px; } .ag-caps { position: absolute; left: 0; right: 0; bottom: 8px; height: 56px; } .ag-cap { position: absolute; bottom: 0; left: var(--x); width: 32px; height: 32px; border: 3px solid #0b1024; border-radius: 50%; background: linear-gradient(var(--c) 50%, #fff 50%); animation: rb-bob 1.6s ease-in-out infinite; } .ag-cap.got { position: static; display: block; animation: none; } /* 5 slots */ .ag-slot { position: relative; display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; padding: 24px 16px 16px; border-radius: 16px; background: linear-gradient(#ff4d6d, #a3122f); box-shadow: 0 0 0 3px #0b1024, 0 8px 24px rgba(0, 0, 0, .4); } .ag-lamp { position: absolute; left: 16px; right: 16px; top: 8px; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, #fff3b0 0 8px, transparent 8px 16px); animation: ag-lampI 1s steps(2) infinite; } @keyframes ag-lampI { 50% { opacity: .35; } } .ag-reel { height: 64px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 3px #0b1024; } .ag-strip { display: grid; will-change: transform; } .ag-sym { display: grid; place-items: center; height: 64px; } .ag-sym svg, .ag-sym img { width: 44px; height: 44px; } .ag-slot.win { animation: ag-glow .5s ease-in-out 3; } @keyframes ag-glow { 50% { transform: scale(1.04); } } /* 6 memory */ .ag-mem { display: grid; grid-template-columns: repeat(4, minmax(0, 56px)); gap: 8px; justify-content: center; padding: 16px; } .ag-mc { position: relative; aspect-ratio: 3 / 4; min-height: 64px; padding: 0; border: 0; background: none; perspective: 400px; cursor: pointer; } .ag-mc-b, .ag-mc-f { position: absolute; inset: 0; display: grid; place-items: center; border: 3px solid #0b1024; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .35s; } .ag-mc-b { background: repeating-linear-gradient(45deg, #4a5794 0 6px, #3a467c 6px 12px); } .ag-mc-f { background: var(--c); color: #0b1024; font-size: 24px; font-weight: 900; transform: rotateY(180deg); } .ag-mc.up .ag-mc-b { transform: rotateY(-180deg); } .ag-mc.up .ag-mc-f { transform: rotateY(0); } .ag-mc.ok .ag-mc-f { box-shadow: 0 0 0 3px #7dff9a; } /* 7 plinko */ .ag-plk { position: relative; width: min(300px, 100%); padding-top: 8px; } .ag-plk svg { display: block; width: 100%; height: auto; } .ag-ball { position: absolute; left: calc(50% - 8px); top: 8px; width: 16px; height: 16px; border: 2px solid #0b1024; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #ffc933 50%, #e08e00); } .ag-bins { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; } .ag-bin { display: grid; place-items: center; height: 40px; border-radius: 0 0 8px 8px; background: rgba(94, 240, 255, .12); } .ag-bin.gpu { background: rgba(255, 201, 51, .22); } .ag-bin .ag-ic, .ag-bin img { width: 24px; height: 24px; } .ag-bin.hit { animation: ag-glow .4s ease-in-out 3; background: rgba(125, 255, 154, .4); } /* 8 egg */ .ag-egg { position: relative; width: 150px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 0 24px rgba(255, 201, 51, .45)); animation: ag-wobI 2s ease-in-out infinite; transform-origin: 50% 100%; } .ag-egg svg { display: block; width: 100%; height: auto; overflow: visible; } .ag-egg.hit { animation: ag-shake .1s linear 3; } .ag-egg .ag-cracks path { opacity: 0; transition: opacity .15s; } .ag-egg[data-k="1"] .k1, .ag-egg[data-k="2"] .k1, .ag-egg[data-k="2"] .k2, .ag-egg[data-k="3"] .k1, .ag-egg[data-k="3"] .k2, .ag-egg[data-k="3"] .k3, .ag-egg[data-k="4"] path, .ag-egg[data-k="5"] path { opacity: 1; } .ag-egg .ag-egl, .ag-egg .ag-egb { transform-box: fill-box; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .6s ease-out; } .ag-egg .ag-egl { transform-origin: 20% 100%; } .ag-egg.open { animation: none; } .ag-egg.open .ag-egl { transform: translate(-24px, -32px) rotate(-40deg); opacity: 0; } .ag-egg.open .ag-cracks { opacity: 0; } .ag-egg-prz { position: absolute; left: 50%; top: 32%; z-index: 1; width: 64px; margin-left: -32px; } .ag-egg.open .ag-egg-prz { animation: ag-rise .6s cubic-bezier(.34, 1.56, .64, 1) .2s both; } .ag-egg-prz img, .ag-egg-prz .ag-ic { width: 64px; height: 64px; } .fr-fx:not(.on) .ag-tile *, html.gm-hidden .ag-sheet *, html.gm-hidden .ag-tile * { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .ag-tile *, .ag-stage *:not(.ag-drop) { animation: none !important; } } /* AI-ANCHOR: CSS_ROOM_PF_LANG — TASK-070 (owner #146): pemilih bahasa di Profile (bendera + nama asli, menu turun ke bawah) */ .pf-lang { position: relative; z-index: 3; } .pf-lang .lang-pick { display: flex; } .pf-lang .lang-btn { width: 100%; min-height: 52px; justify-content: flex-start; padding: 0 16px; font-size: 14px; color: var(--gm-txt, #fff); } .pf-lang .lang-btn .lang-car { margin-inline-start: auto; } .pf-lang .lang-menu { inset-inline-start: 0; inset-inline-end: 0; min-width: 0; } /* ---------- AI-ANCHOR: CSS_ROOM_LANG — TASK-072: pilihan bahasa di header /room (bendera bulat + kode) + sheet 24 bahasa ---------- */ .rm-top-r .rm-lang { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; padding: 0 8px; } .rm-lang-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--gm-line), 0 0 0 3px rgba(94, 240, 255, .35); } .rm-lang-cd { color: var(--gm-cream); font-size: 12px; font-weight: 900; line-height: 16px; letter-spacing: .06em; } @media (max-width: 899px) { .rm-top-r .rm-lang { padding: 0; } .rm-lang .rm-lang-cd { display: none; } } .rm-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 8px; margin-top: 16px; } .rm-lang-o { -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 3px solid var(--gm-line); border-radius: var(--gm-r1); background: var(--gm-slot); color: var(--gm-cream); font: inherit; font-size: 14px; font-weight: 800; line-height: 1.25; text-align: start; cursor: pointer; transition: transform .15s cubic-bezier(.22, 1, .36, 1); } .rm-lang-o:active { transform: scale(.97); } .rm-lang-o img { width: 28px; height: 21px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); } .rm-lang-o span { min-width: 0; overflow-wrap: anywhere; } .rm-lang-o[aria-checked="true"] { border-color: var(--gm-gold); background: linear-gradient(#34427a, #26315e); color: #fff; box-shadow: 0 0 0 1px var(--gm-gold), 0 0 16px rgba(255, 201, 51, .25); } @media (prefers-reduced-motion: reduce) { .rm-lang-o { transition: none; } } /* TASK-072: tombol bahasa menambah 48 px di grup kanan → brand menyesuaikan lebar kolom kiri (hdl): ".Store" dilepas dulu, lalu wordmark (robot mini tetap). Ambang = lebar brand terukur (robot 48 + jarak 4 + wordmark) per ukuran huruf HP (< 420) / lebar. */ @media (max-width: 419px) { @container hdl (max-width: 135px) { .hd-brand .hd-word i { display: none; } } @container hdl (max-width: 92px) { .hd-brand .hd-word { display: none; } } } @media (min-width: 420px) { @container hdl (max-width: 177px) { .hd-brand .hd-word i { display: none; } } @container hdl (max-width: 115px) { .hd-brand .hd-word { display: none; } } }