/* Visual system: a quiet spacecraft archive, with the collection in focus. */
:root { --page:#101217; --panel:#191d25; --panel-raised:#202630; --line:#303641; --muted:#a1a9b7; --ink:#f4f3ed; --accent:#efbc65; --radius:16px; }
html { scroll-behavior:smooth; }
body.tcg-app { background:radial-gradient(ellipse at 85% 8%,#29251d55,transparent 45%),var(--page); color:var(--ink); font-family:Inter,'Segoe UI',sans-serif; font-size:16px; line-height:1.5; }
.ambient-asset { position:absolute; pointer-events:none; user-select:none; z-index:0; object-fit:contain; will-change:transform; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button:not(:disabled),a { touch-action:manipulation; }
button:disabled { cursor:not-allowed; opacity:.5; }
:focus-visible { outline:2px solid var(--accent)!important; outline-offset:5px; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:10000; background:var(--accent); color:var(--page); padding:12px 20px; border-radius:8px; }.skip-link:focus { top:12px; }
.tcg-app .app-header { height:84px; padding:16px max(28px,calc((100vw - 1240px)/2)); background:#101217ef; backdrop-filter:blur(18px); border-bottom:1px solid #ffffff0a; box-shadow:none; }
.app-header > .space-deco,.tcg-app footer > .space-deco { display:none; }
.app-header h1 { font-size:17px; letter-spacing:-.5px; }.brand-tag { display:inline-block; margin-left:5px; padding:3px 6px; border:1px solid #efbc6566; color:var(--accent); font-size:11px; letter-spacing:1px; border-radius:4px; vertical-align:middle; }
#logged-out-view button { padding:11px 16px; background:#e9e9f3; color:#232331; box-shadow:none; border-radius:9px; }#logged-out-view button:hover { background:white; }
#btn-mobile-menu { display:none; }
.app-nav { display:flex; justify-content:flex-start; align-items:stretch; gap:5px; padding:0 max(28px,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); background:#101217; min-height:64px; }
.nav-item { display:flex; gap:9px; align-items:center; padding:17px 21px; color:var(--muted)!important; font-size:14px; font-weight:600; border:0!important; border-bottom:2px solid transparent!important; transition:color .2s,background .2s; white-space:nowrap; }
.nav-item svg { width:19px; height:19px; }.nav-item:hover { background:#ffffff05; color:var(--ink)!important; }.nav-item.tab-active { color:var(--accent)!important; border-bottom-color:var(--accent)!important; background:transparent; }
#tab-admin { margin-left:auto; }.secondary-route { display:none!important; }.nav-item.hidden { display:none; }
.tcg-app main { padding:38px 28px 72px; max-width:1296px; width:100%; margin:0 auto; gap:24px; flex:1; }
.tcg-app main > section { max-width:none; width:100%; }.section-nav { display:flex; gap:8px; align-self:flex-start; padding:5px; background:#171b22; border:1px solid var(--line); border-radius:11px; max-width:100%; overflow-x:auto; }.section-nav.hidden { display:none; }.section-nav button { padding:9px 16px; font-size:14px; color:var(--muted); white-space:nowrap; border-radius:7px; }.section-nav button[aria-current="page"] { background:#2b3039; color:var(--ink); }
.home-section { gap:34px; }.home-hero { display:grid; grid-template-columns:1fr 1fr; min-height:470px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); padding:14px 0 40px; gap:26px; isolation:isolate; }.hero-copy { align-self:center; position:relative; z-index:2; }.hero-planet { width:168px; height:168px; top:-73px; left:-77px; opacity:.38; filter:saturate(.8) brightness(.86); animation:ambient-drift 16s ease-in-out infinite; }.hero-meteor { width:210px; height:210px; right:11%; bottom:-116px; opacity:.25; transform:rotate(-24deg); animation:meteor-pass 20s ease-in-out infinite; }.eyebrow { display:block; font-size:11px; font-weight:650; letter-spacing:2px; color:var(--accent); }.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:7px; vertical-align:2px; }.hero-copy h2 { font-size:clamp(36px,4.3vw,61px); line-height:1.1; font-weight:650; letter-spacing:-2.7px; margin:25px 0 22px; }.hero-copy h2 em { font-style:normal; color:var(--accent); }.hero-copy > p:not(.hero-caption) { color:var(--muted); max-width:440px; line-height:1.75; font-size:16px; }.hero-actions { display:flex; align-items:center; gap:24px; margin-top:28px; flex-wrap:wrap; }.button-primary { background:var(--accent); color:#211b10; padding:14px 22px; border-radius:9px; font-size:14px; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:28px; }.button-primary:hover { background:#ffd38d; transform:translateY(-1px); }.button-text { font-size:14px; color:var(--ink); padding:12px 0; }.button-text span { margin-left:10px; }.hero-caption { color:#9099a8; font-size:12px; margin-top:18px; }
.hero-showcase { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; min-width:0; min-height:415px; overflow:hidden; background:radial-gradient(ellipse at center,#c2934a14,transparent 65%); }.showcase-star { width:84px; height:84px; left:7%; bottom:22%; opacity:.35; transform:rotate(-14deg); animation:ambient-drift 10s ease-in-out infinite reverse; }.orbit { position:absolute; width:390px; height:390px; border:1px solid #efbc6512; border-radius:50%; }.orbit-two { width:520px; height:520px; }.showcase-coordinate { position:absolute; top:20px; right:18px; font:10px monospace; letter-spacing:2px; color:#6f7785; }.showcase-caption { position:absolute; bottom:4px; left:0; width:100%; text-align:center; font-size:11px; letter-spacing:.8px; color:#8e95a0; }
.featured-fan { width:100%; height:330px; position:relative; }.display-card { position:absolute; width:190px; height:285px; left:50%; top:20px; border-radius:13px; background:#1e232c; border:1px solid #efbc6555; box-shadow:0 24px 45px #0008; overflow:hidden; }.display-card:nth-child(1) { transform:translateX(-100%) rotate(-15deg) translateY(17px); z-index:1; }.display-card:nth-child(2) { transform:translateX(-50%) rotate(1deg); z-index:3; }.display-card:nth-child(3) { transform:translateX(0%) rotate(15deg) translateY(17px); z-index:2; }.card-back { display:flex; flex-direction:column; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg,transparent 0 16px,#efbc6506 17px 18px),linear-gradient(145deg,#2b3036,#13171c); outline:1px solid #efbc6528; outline-offset:-9px; }.card-back img { width:88px; height:88px; object-fit:contain; }.card-back span { font-size:8px; letter-spacing:1.8px; margin-top:18px; color:#ddbc86; }.card-back strong { font-size:40px; margin-top:12px; letter-spacing:-2px; }.display-card [class*="rank-"] { box-shadow:none!important; animation:none!important; }.display-card img { max-width:100%; }
.visitor-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; padding:0 0 30px; }.visitor-guide > div { position:relative; padding-left:43px; }.guide-number { position:absolute; left:0; top:1px; color:#6c7481; font:12px monospace; border:1px solid var(--line); border-radius:50%; width:28px; height:28px; display:grid; place-items:center; }.visitor-guide h3 { font-size:16px; font-weight:600; margin-bottom:9px; }.visitor-guide p { font-size:14px; line-height:1.7; color:var(--muted); max-width:280px; }
.community-invite { display:flex; align-items:center; justify-content:space-between; gap:22px; border-top:1px solid var(--line); padding-top:28px; }.community-invite h3 { font-size:20px; margin-top:9px; letter-spacing:-.4px; }.community-invite a { color:var(--ink); border:1px solid var(--line); font-size:14px; border-radius:9px; padding:13px 18px; }.community-invite a:hover { border-color:var(--accent); }
.overview-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:38px; }.overview-stat { padding:24px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:8px; background:var(--panel); border-right:1px solid var(--line); position:relative; }.overview-stat:last-child { border:0; }.overview-stat:hover { background:var(--panel-raised); }.overview-stat > span { font-size:13px; color:var(--muted); }.overview-stat strong { font-size:35px; letter-spacing:-1px; font-weight:550; line-height:1.3; }.overview-stat small { color:var(--muted); font-size:12px; }progress { border:0; width:100%; height:3px; border-radius:3px; background:#363c47; accent-color:var(--accent); }progress::-webkit-progress-bar { background:#363c47; }progress::-webkit-progress-value { background:var(--accent); }.section-heading h3 { margin:9px 0 22px; font-size:24px; font-weight:550; letter-spacing:-.6px; }.journey-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.journey-card { border:1px solid var(--line); padding:25px; border-radius:var(--radius); text-align:left; display:flex; flex-direction:column; align-items:flex-start; background:linear-gradient(140deg,#1c2129,#14181e); transition:border-color .2s,transform .2s; }.journey-card:hover { border-color:#efbc6577; transform:translateY(-3px); }.journey-number { font-size:10px; letter-spacing:1.8px; color:var(--accent); margin-bottom:25px; }.journey-card h3 { font-size:21px; letter-spacing:-.6px; line-height:1.3; margin-bottom:12px; }.journey-card p { color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:24px; }.journey-link { font-size:13px; display:flex; justify-content:space-between; width:100%; margin-top:auto; }.journey-link span { color:var(--accent); }
.tcg-app main > section:not(#section-home) h2 { font-size:29px; letter-spacing:-.7px; font-weight:600; color:var(--ink); text-shadow:none; filter:none; }.tcg-app main .bg-gray-800 { background-color:var(--panel); }.tcg-app main .bg-gray-900 { background-color:#12161d; }.tcg-app main .border-gray-700 { border-color:var(--line); }.tcg-app main .shadow-md,.tcg-app main .shadow-lg { box-shadow:none; }.tcg-app main .rounded-xl { border-radius:var(--radius); }.tcg-app main input:not([type=checkbox]):not([type=range]):not([type=color]),.tcg-app main select { min-height:42px; background-color:#12161d; border-color:#363e4b; border-radius:8px; padding:9px 12px; font-size:14px; }.tcg-app main input::placeholder { color:#8993a3; }.tcg-app main button { min-height:36px; }.tcg-app main .text-gray-500 { color:#9099a8; }.tcg-app main .text-gray-400 { color:var(--muted); }
#section-explore > div:first-child { background:transparent; border:0; padding:0 0 12px; box-shadow:none; }#section-explore > div:first-child > .absolute { display:none; }#explore-search-area { background:var(--panel); }#section-explore table { white-space:normal; }#section-explore th { font-size:12px; font-weight:500; padding:16px; color:var(--muted); }#section-explore td { font-size:14px; }#section-explore tbody tr:hover { background:#ffffff04; }#section-explore td button { color:var(--accent); background:#efbc6510; border:1px solid #efbc6525; border-radius:7px; padding:6px 13px; }#section-explore td img { flex-shrink:0; }
.album-filters { display:flex; gap:15px; background:var(--panel); padding:20px; border:1px solid var(--line); border-radius:var(--radius); }.album-filters label { display:flex; flex-direction:column; gap:8px; min-width:140px; }.album-filters label > span { font-size:12px; color:var(--muted); }.album-filters .search-field { flex:1; }.album-filters input,.album-filters select { width:100%; }.result-count { font-size:13px; color:var(--muted); }.album-empty { grid-column:1/-1; text-align:center; border:1px dashed var(--line); border-radius:var(--radius); padding:60px 24px; }.album-empty h3 { font-size:21px; margin-bottom:10px; }.album-empty p { color:var(--muted); font-size:14px; }.album-empty button { margin-top:20px; color:var(--accent); }.missing-card { background:linear-gradient(150deg,#1d232c,#15181f); border:1px dashed #414957; opacity:1!important; flex-direction:column; gap:12px; }.missing-card strong { font-size:14px; color:#b3bac5; }.missing-card small { color:#8792a4; font-size:12px; }#album-grid [class*="rank-"],#explore-grid [class*="rank-"] { box-shadow:0 3px 15px #0003; animation:none; }#album-grid > div:hover { transform:translateY(-4px); }#album-grid .card-interactive:focus-visible { outline-offset:6px; }#album-content > div:first-child { align-items:flex-start; gap:20px; }#album-content > div:first-child > div:last-child { gap:14px; }#album-content label:has(#toggle-owned-album) { display:none; }
.tcg-app footer { background:#0d1015; padding:30px 28px; border-top:1px solid var(--line); }.tcg-app footer .hazard-stripe { display:none; }.tcg-app footer img[alt="Among Us Brasil TCG"] { max-height:65px; object-fit:contain; }.tcg-app footer .text-\[10px\] { font-size:11px; }#btn-logout { display:block; }#user-display-name { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }#notif-dropdown { max-width:calc(100vw - 32px); }
@media(min-width:768px) { body.is-authenticated .hero-copy h2 { font-size:44px; }body.is-authenticated .home-hero { min-height:340px; }body.is-authenticated .hero-showcase { min-height:310px; }body.is-authenticated .featured-fan { transform:scale(.85); } }
@media(max-width:1023px) { .home-hero { gap:0; }.hero-copy h2 { font-size:44px; }.display-card { width:160px; height:240px; top:42px; }.hero-showcase { min-height:370px; }.hero-actions { gap:14px; }.nav-item { padding:17px 16px; }.app-header h1 { font-size:15px; }.journey-card { padding:20px; }.overview-stat { padding:19px; } }
@media(max-width:767px) {
 .tcg-app .app-header { height:72px; padding:12px 18px; }.app-header h1 { display:block; max-width:130px; font-size:13px; line-height:1.3; }.brand-tag { display:none; }#logged-out-view button { font-size:12px; padding:10px 12px; }#logged-out-view svg { width:15px; }#logged-in-view,#nav-auth-area { gap:9px; }#logged-in-view > div:first-child { display:none; }#btn-logout { font-size:12px; }#btn-notifications { margin:0; }.app-header > div:first-of-type { gap:7px; }#notif-dropdown { position:fixed; top:70px; right:16px; margin-top:0; }
 .app-nav { position:fixed; bottom:0; left:0; right:0; z-index:45; justify-content:space-around; padding:4px 6px calc(6px + env(safe-area-inset-bottom)); min-height:66px; background:#151920f5; backdrop-filter:blur(16px); border:1px solid var(--line); border-bottom:0; gap:0; }.nav-item { flex:1; flex-direction:column; justify-content:center; gap:4px; padding:7px 3px; font-size:10px; min-width:0; border-bottom:0!important; border-radius:8px; }.nav-item svg { width:20px; height:20px; }.nav-item.tab-active { background:#efbc6510; }#tab-admin { flex:.7; margin:0; font-size:10px; }.tcg-app main { padding:24px 18px 38px; gap:20px; }.tcg-app footer { padding:26px 18px 104px; }.home-section { gap:27px; }.home-hero { grid-template-columns:1fr; gap:0; padding:10px 0 20px; }.hero-copy h2 { font-size:43px; letter-spacing:-1.8px; margin:20px 0 18px; }.hero-copy > p:not(.hero-caption) { font-size:15px; }.eyebrow { font-size:9px; letter-spacing:1.6px; }.hero-actions { margin-top:23px; gap:20px; }.button-primary { padding:13px 18px; font-size:13px; }.button-text { font-size:13px; }.hero-showcase { min-height:330px; margin-top:18px; }.display-card { width:154px; height:231px; }.showcase-coordinate { top:6px; right:4px; }.showcase-caption { bottom:7px; font-size:10px; }.featured-fan { height:305px; }.visitor-guide { grid-template-columns:1fr; gap:25px; padding:0; }.visitor-guide p { max-width:none; }.visitor-guide > div { padding-left:45px; }.community-invite { align-items:flex-start; flex-direction:column; padding-top:24px; gap:20px; }.community-invite h3 { font-size:20px; }.community-invite a { font-size:13px; }.overview-grid { grid-template-columns:repeat(2,1fr); margin-bottom:26px; }.overview-stat { padding:18px; }.overview-stat:nth-child(2) { border-right:0; }.overview-stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }.overview-stat strong { font-size:30px; }.journey-grid { grid-template-columns:1fr; gap:12px; }.journey-card { padding:23px; }.journey-number { margin-bottom:16px; }.section-heading h3 { font-size:22px; }.section-nav { width:100%; }.section-nav button { padding:8px 12px; font-size:13px; }
 body.is-authenticated .hero-showcase { display:none; }body.is-authenticated .hero-copy h2 { font-size:35px; }body.is-authenticated .home-hero { min-height:0; padding-bottom:24px; }body.is-authenticated .hero-copy .eyebrow { font-size:9px; }
 .album-filters { flex-wrap:wrap; padding:16px; gap:12px; }.album-filters .search-field { flex-basis:100%; }.album-filters label { flex:1; min-width:0; }.tcg-app main > section:not(#section-home) h2 { font-size:25px; }#album-content > div:first-child { padding:18px; }#album-content > div:first-child > div:first-child { flex-wrap:wrap; }
 #section-explore table th:nth-child(n+3):nth-child(-n+9),#section-explore table td:nth-child(n+3):nth-child(-n+9) { display:none; }#section-explore table th,#section-explore table td { padding:13px 8px; }#section-explore table td:first-child { min-width:0; gap:7px; }#section-explore table td:first-child > span { font-size:12px; overflow-wrap:anywhere; }#section-explore table td:first-child > div { display:none; }#section-explore table td:first-child img { width:26px; height:26px; }#section-explore td button { font-size:11px; padding:6px 8px; white-space:nowrap; }#section-explore th:first-child { text-align:left; }#section-explore td:nth-child(2) { font-size:14px; border-right:0; }#section-explore table { table-layout:auto; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.home-ranking .section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }.home-ranking .section-heading h3 { margin-bottom:18px; }.home-ranking-list { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.ranking-preview { position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left; border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:20px 20px 20px 64px; min-width:0; }.ranking-preview:hover { border-color:#efbc6580; }.ranking-position { position:absolute; left:20px; top:24px; font:20px monospace; color:var(--accent); }.ranking-preview strong { font-size:15px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.ranking-preview small { color:var(--muted); font-size:12px; margin-top:4px; }.mobile-player-details { display:none; }
#section-gacha #inventory-premium-alert { background:linear-gradient(110deg,#30291a,#191d25); border:1px solid #efbc6566; box-shadow:none; }#section-gacha .animate-pulse,#section-achievements .animate-pulse { animation:none; }#section-gacha h3 { letter-spacing:0; }#section-gacha #pack-area { padding:28px; border:1px solid var(--line); border-radius:20px; background:radial-gradient(ellipse at center,#efbc6510,transparent 65%); }#section-fusion select { width:100%; }#section-trade > div,#section-fusion > div { max-width:100%; }#section-admin { padding-top:8px; }
@media(max-width:767px) { .home-ranking-list { grid-template-columns:1fr; gap:9px; }.home-ranking .section-heading { align-items:flex-start; flex-direction:column; gap:0; margin-bottom:15px; }.home-ranking .section-heading h3 { margin-bottom:0; }.ranking-preview { padding-top:16px; padding-bottom:16px; }.ranking-position { top:20px; }.mobile-player-details { display:block; flex-basis:100%; margin-left:39px; font-size:11px; color:var(--muted); }.mobile-player-details summary { cursor:pointer; }.mobile-player-details > div { padding-top:8px; line-height:1.8; }#section-explore table td:first-child { flex-wrap:wrap; }#section-gacha #pack-area { padding:20px 10px; } }
.tcg-audit { --accent:#efbc65; }.tcg-audit .bg-slate-800 { background-color:var(--panel); }.tcg-audit .bg-slate-900 { background-color:#12161d; }.tcg-audit .border-slate-700 { border-color:var(--line); }.tcg-audit h1,.tcg-audit h2 { letter-spacing:-.5px; }.tcg-audit input,.tcg-audit select { border-radius:8px; min-height:42px; }.tcg-audit main { max-width:1440px; }.tcg-audit .animate-pulse,.tcg-audit .animate-ping { animation:none; }
.tcg-app footer .max-w-7xl { flex-direction:row; justify-content:space-between; gap:24px; flex-wrap:wrap; }.tcg-app footer .max-w-7xl > .mb-6 { margin:0; }.tcg-app footer .grid { display:flex; flex:1; justify-content:flex-end; gap:30px; }.tcg-app footer .grid > * { background:none; border:0; padding:0; align-items:flex-start; box-shadow:none; text-align:left; }.tcg-app footer .grid > * > span:first-child { color:var(--muted); font-size:10px; letter-spacing:1.4px; margin-bottom:5px; }.tcg-app footer .grid > * > span:last-child { font-size:13px; }.tcg-app footer .max-w-7xl > div:last-child { width:100%; }
.decorated-section { position:relative; isolation:isolate; }.decorated-section > :not(.section-orbit) { position:relative; z-index:1; }.section-orbit { width:98px; height:98px; opacity:.2; filter:saturate(.78); animation:ambient-drift 12s ease-in-out infinite; }.section-rocket { width:118px; height:118px; top:-47px; right:-39px; transform:rotate(16deg); }.section-chest { width:105px; height:105px; top:19px; right:0; animation-delay:-5s; }.section-gift { width:95px; height:95px; top:-30px; right:12%; animation-delay:-3s; }.section-star { width:108px; height:108px; top:-42px; right:4%; transform:rotate(13deg); animation-delay:-7s; }.section-target { width:112px; height:112px; top:-42px; right:4%; transform:rotate(15deg); animation-delay:-2s; }.section-crystal { width:115px; height:115px; top:-41px; right:4%; animation-delay:-8s; }
@keyframes ambient-drift { 0%,100% { translate:0 0; rotate:0deg; } 50% { translate:0 -13px; rotate:4deg; } }
@keyframes meteor-pass { 0%,100% { translate:0 0; } 50% { translate:-19px -8px; } }
@media(max-width:767px) { .tcg-app footer .max-w-7xl { padding:0; align-items:flex-start; }.tcg-app footer .grid { flex-basis:100%; flex-wrap:wrap; justify-content:flex-start; gap:22px; }.hero-planet { width:130px; height:130px; top:-57px; left:-56px; opacity:.28; }.hero-meteor { width:152px; height:152px; bottom:-91px; right:-42px; opacity:.2; }.showcase-star { width:57px; height:57px; left:5%; }.section-orbit { width:62px; height:62px; opacity:.16; }.section-rocket { top:-17px; right:-18px; }.section-chest { top:2px; right:-12px; }.section-gift,.section-star,.section-target,.section-crystal { top:-22px; right:0; } }
@media(max-width:420px) { .app-header h1 { max-width:90px; font-size:12px; }.hero-copy h2 { font-size:39px; }.nav-item { font-size:11px; } }

/* Decorative assets stay quiet behind the product UI, but bring back the
   playful, floating language of the game. */
.hero-planet { width:156px; height:156px; top:8px; left:-47px; opacity:.38; filter:saturate(.72) brightness(.83); mix-blend-mode:screen; }
.hero-meteor { width:260px; height:260px; right:-21px; bottom:-152px; opacity:.47; mix-blend-mode:screen; clip-path:inset(7% 0 0); }
.visitor-guide > div { overflow:hidden; }
.guide-asset { position:absolute; width:64px; height:64px; object-fit:contain; right:11px; top:0; opacity:.25; filter:saturate(.75); animation:ambient-drift 11s ease-in-out infinite; pointer-events:none; }.guide-star { animation-delay:-3s; }.guide-target { animation-delay:-6s; }
.journey-card { position:relative; overflow:hidden; }.journey-asset { position:absolute; width:104px; height:104px; object-fit:contain; right:-14px; top:-13px; opacity:.2; filter:saturate(.8); animation:ambient-drift 12s ease-in-out infinite; pointer-events:none; }.journey-card:nth-child(2) .journey-asset { animation-delay:-3s; }.journey-card:nth-child(3) .journey-asset { animation-delay:-7s; }.journey-number { position:relative; z-index:1; }
@media(max-width:767px) { .hero-planet { width:130px; height:130px; top:-9px; left:-49px; opacity:.28; }.hero-meteor { width:170px; height:170px; right:-44px; bottom:-98px; opacity:.33; }.guide-asset { width:58px; height:58px; right:0; }.journey-asset { width:88px; height:88px; } }