/* MMODude extras part 2 (generated by _tools/gen/fx2.py) */
/* ---------- 6. sticky category tabs ---------- */
.section-nav{ top:0 !important; transition:box-shadow .2s ease; }
.section-nav.is-stuck{ box-shadow:0 8px 22px rgba(0,0,0,.45); }
.section-nav a{ position:relative; display:inline-flex; align-items:center; transition:color .15s ease, background-color .15s ease; }
.section-nav a.svc-nav{ --cc:var(--amber); }
.section-nav a.svc-accounts{ --cc:var(--cat-acct,#a06bf5); } .section-nav a.svc-boosting{ --cc:var(--cat-boost,#4fbf6b); }
.section-nav a.svc-items{ --cc:var(--cat-items,#36c2d6); } .section-nav a.svc-topups{ --cc:var(--cat-topups,#ff7a8a); }
.section-nav a.svc-currency{ --cc:var(--cat-gold,#f5a623); }
.section-nav a .tab-n{ margin-left:7px; font:600 10.5px/1 'JetBrains Mono',monospace; padding:3px 6px; border-radius:20px;
  background:rgba(255,255,255,.07); color:var(--text-dim); transition:inherit; }
.section-nav a.is-active{ color:var(--text) !important; border-bottom-color:var(--cc,var(--amber)) !important;
  background:linear-gradient(to top,color-mix(in srgb,var(--cc,var(--amber)) 16%,transparent),transparent 85%); }
.section-nav a.is-active .tab-n{ background:var(--cc,var(--amber)); color:#0b0c0f; }
.section-nav a.svc-nav.is-active::after{ content:""; position:absolute; left:12px; right:12px; bottom:-2px; height:2px;
  background:var(--cc); box-shadow:0 0 10px var(--cc); }
main [id]{ scroll-margin-top:62px; }
.list-section, .game-guide{ scroll-margin-top:62px !important; }
@media (max-width:700px){
  .section-nav{ padding:0 8px !important; }
  .section-nav a{ padding:13px 11px !important; }
}

/* ---------- 1. Dude's Pick card ---------- */
.dudes-pick{ padding-top:28px; padding-bottom:4px; }
.dp-card{ position:relative; border:1px solid color-mix(in srgb,var(--tc) 55%,var(--border)); border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--tc) 14%,transparent),transparent 55%),
             radial-gradient(90% 120% at 0% 100%,rgba(245,166,35,.08),transparent 60%), var(--bg-2);
  box-shadow:0 0 0 1px rgba(245,166,35,.12), 0 0 30px color-mix(in srgb,var(--tc) 16%,transparent); }
.dp-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--amber),var(--tc),var(--amber)); }
.dp-ribbon{ display:flex; align-items:center; gap:10px; padding:14px 20px 0; flex-wrap:wrap; }
.dp-ava{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--amber); }
.dp-kicker{ display:inline-flex; align-items:center; gap:6px; font:700 12px/1 'Oswald',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:#0b0c0f; background:linear-gradient(180deg,#ffc95a,var(--amber)); padding:6px 10px 6px 8px; border-radius:20px; box-shadow:0 0 14px rgba(245,166,35,.35); }
.dp-kicker img{ width:15px; height:15px; filter:brightness(0) saturate(100%); opacity:.85; }
.dp-for{ font:600 12px/1.2 'Inter',sans-serif; color:var(--text-dim); letter-spacing:.04em; text-transform:uppercase; }
.dp-body{ padding:14px 20px 18px; }
.dp-id{ display:flex; align-items:center; gap:14px; }
.dp-logo{ width:52px; height:52px; flex:none; border-radius:12px; border:1px solid var(--tc); background:var(--surface,#16181d);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 16px color-mix(in srgb,var(--tc) 30%,transparent); }
.dp-logo img{ width:30px; height:30px; border-radius:6px; }
.dp-idt{ flex:1; min-width:0; }
.dp-name-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dp-name{ font:700 26px/1.1 'Oswald',sans-serif; color:var(--tc); letter-spacing:.01em; text-shadow:0 0 18px color-mix(in srgb,var(--tc) 35%,transparent); }
.dp-why{ margin:5px 0 0; font-size:13.5px; color:var(--text-dim); line-height:1.45; }
.dp-score{ flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; }
.dp-score .score-ring{ color:var(--text); font-weight:700; font-family:'JetBrains Mono',monospace; }
.dp-sl{ font:600 9.5px/1 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dimmer); }
.dp-tagline{ margin:12px 0 0; font-size:14.5px; line-height:1.5; color:var(--text); }
.dp-bars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 22px; margin-top:14px; }
.dp-bar{ display:grid; grid-template-columns:62px 1fr 28px; align-items:center; gap:8px; font-size:12px; }
.dp-bl{ color:var(--text-dim); } .dp-bv{ font:600 12px/1 'JetBrains Mono',monospace; color:var(--tc); text-align:right; }
.dp-bt{ height:6px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden; }
.dp-bt i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 50%,transparent),var(--tc)); }
.dp-cta{ display:flex; align-items:center; gap:18px; margin-top:18px; flex-wrap:wrap; }
.dp-visit{ display:inline-block; background:var(--amber); color:#0b0c0f; font:700 14px/1 'Inter',sans-serif; padding:13px 20px; border-radius:9px;
  box-shadow:0 0 18px rgba(245,166,35,.3); }
.dp-visit:hover{ background:#ffb63c; }
.dp-review{ font-size:13.5px; font-weight:600; color:var(--amber); }
.dp-also{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.dp-also-k{ font:600 10.5px/1 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dimmer); margin-right:2px; }
.dp-also a{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:6px 10px; border:1px solid var(--border); border-radius:20px; color:var(--text-dim); background:rgba(255,255,255,.02); }
.dp-also a:hover{ border-color:var(--amber); }
.dp-also a b{ color:var(--tc); font-weight:700; } .dp-al{ color:var(--text-dimmer); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.dp-as{ font:600 11px/1 'JetBrains Mono',monospace; color:var(--text); }
@media (max-width:700px){
  .dudes-pick{ padding-left:16px !important; padding-right:16px !important; padding-top:22px; }
  .dp-ribbon{ padding:12px 16px 0; } .dp-body{ padding:12px 16px 16px; }
  .dp-name{ font-size:22px; } .dp-logo{ width:44px; height:44px; } .dp-id{ gap:11px; align-items:flex-start; }
  .dp-score .score-ring.lg{ --size:52px; font-size:15px; }
  .dp-bars{ grid-template-columns:1fr; gap:7px; }
  .dp-visit{ flex:1; text-align:center; }
}

/* ---------- 4. achievement badges ---------- */
.v-ach{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.v-badge{ display:inline-flex; align-items:center; gap:5px; font:600 11px/1 'Inter',sans-serif; color:#f3d9a4; letter-spacing:.01em;
  padding:4px 9px 4px 4px; border-radius:20px; border:1px solid rgba(245,166,35,.35);
  background:linear-gradient(180deg,rgba(245,166,35,.13),rgba(245,166,35,.04)); }
.v-badge img{ width:16px; height:16px; padding:2px; box-sizing:content-box; border-radius:50%; background:#1a1408; border:1px solid rgba(245,166,35,.55); }
@media (max-width:700px){
  .v-ach{ gap:5px; }
  .v-badge{ font-size:10px; gap:4px; padding:3px 7px 3px 3px; }
  .v-badge img{ width:13px; height:13px; }
}
.ach-panel{ margin-top:18px; border:1px solid var(--border); border-radius:12px; padding:14px 16px 12px; background:rgba(255,255,255,.015); }
.ach-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ach-title{ display:inline-flex; align-items:center; gap:7px; font:600 15px/1 'Oswald',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); }
.ach-title img{ width:30px; height:30px; margin:-6px 0; filter:drop-shadow(0 0 8px rgba(245,166,35,.35)); }
.ach-count{ font:500 12.5px/1 'JetBrains Mono',monospace; color:var(--text-dim); } .ach-count b{ color:var(--text); }
.ach-meter{ flex:1; min-width:90px; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--amber) calc(var(--p)*1%),rgba(255,255,255,.08) 0); }
.ach-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.ach{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); }
.ach-ico{ width:50px; height:50px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ach-ico img{ width:50px; height:50px; }
.ach-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ach-txt b{ font:600 13.5px/1.15 'Inter',sans-serif; } .ach-txt small{ font-size:11.5px; line-height:1.3; color:var(--text-dim); }
.ach.on{ border-color:rgba(245,166,35,.4); background:linear-gradient(180deg,rgba(245,166,35,.1),rgba(245,166,35,.02)); }
.ach.on .ach-ico img{ filter:drop-shadow(0 0 9px rgba(245,166,35,.45)); }
.ach.on .ach-txt b{ color:#f8dfa8; }
.ach.off{ opacity:.55; } .ach.off .ach-ico img{ filter:grayscale(1) brightness(.55) contrast(1.1); }
.ach.off .ach-txt b{ color:var(--text-dim); }
@media (max-width:700px){
  .ach-panel{ padding:12px 12px 10px; }
  .ach-grid{ grid-template-columns:1fr 1fr; gap:6px; }
  .ach{ flex-direction:column; align-items:flex-start; gap:7px; padding:9px; }
  .ach-ico, .ach-ico img{ width:54px; height:54px; }
  .ach-txt b{ font-size:12.5px; } .ach-txt small{ font-size:11px; }
}
.ach-note{ margin:10px 0 0; font-size:11.5px; color:var(--text-dimmer); line-height:1.45; }

/* ---------- homepage hero art: "Crossroads of Worlds" (owner art, Oct 6 2026) ---------- */
.hero-bg.hero-bg-art{
  background:
    radial-gradient(ellipse 34% 26% at 50% 80%, rgba(11,12,15,.62) 0%, rgba(11,12,15,.35) 55%, rgba(11,12,15,0) 100%),
    linear-gradient(180deg, rgba(11,12,15,.55) 0%, rgba(11,12,15,.42) 38%, rgba(11,12,15,.30) 62%, rgba(11,12,15,.88) 100%),
    url(/assets/hero/home-1400.webp) center 66% / cover no-repeat,
    #0b0c0f;
}
@supports (background-image: image-set(url("/x.webp") 1x)){
  @media (min-width:701px){
    .hero-bg.hero-bg-art{
      background:
        radial-gradient(ellipse 34% 26% at 50% 80%, rgba(11,12,15,.62) 0%, rgba(11,12,15,.35) 55%, rgba(11,12,15,0) 100%),
        linear-gradient(180deg, rgba(11,12,15,.55) 0%, rgba(11,12,15,.42) 38%, rgba(11,12,15,.30) 62%, rgba(11,12,15,.88) 100%),
        image-set(url(/assets/hero/home-1400.webp) 1x, url(/assets/hero/home.webp) 2x) center 66% / cover no-repeat,
        #0b0c0f;
    }
  }
}
@media (max-width:700px){
  .hero-bg.hero-bg-art{
    background:
      linear-gradient(180deg, rgba(11,12,15,.62) 0%, rgba(11,12,15,.58) 45%, rgba(11,12,15,.55) 70%, rgba(11,12,15,.9) 100%),
      url(/assets/hero/home-1400.webp) 50% 70% / cover no-repeat,
      #0b0c0f;
  }
}

.hero-content p{ text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
/* homepage on very small phones (320-400px): let the search box, spotlight cards and widgets shrink instead of sticking out */
.search-bar input{ min-width:0; flex:1 1 auto; }
.search-bar .btn-fill{ flex:none; }
.spotlight-card, .widget{ min-width:0; }
@media (max-width:360px){ .spotlight-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px){ .widgets{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:400px){ .widgets{ padding-left:16px !important; padding-right:16px !important; } .widget{ padding:16px; } }

/* ---------- own hub banners (owner art) ---------- */
/* 1600px copies for phones and normal screens; the full 2736px file only on high-density desktop screens */
.hub-own-farming{ --hero-img:url(/assets/hero/farming-1600.webp); }
.hub-own-leveling{ --hero-img:url(/assets/hero/leveling-1600.webp); }
.hub-own-buying{ --hero-img:url(/assets/hero/buying-1600.webp); }
.hub-own-guides{ --hero-img:url(/assets/hero/guides-1600.webp); }
.hub-own-reviews{ --hero-img:url(/assets/hero/reviews-1600.webp); }
.hub-own-games{ --hero-img:url(/assets/hero/games-1600.webp); }
.hub-own-rmt{ --hero-img:url(/assets/hero/rmt-1600.webp); }
@supports (background-image: image-set(url("/x.webp") 1x)){ @media (min-width:761px){
  .hub-own-farming{ --hero-img:image-set(url(/assets/hero/farming-1600.webp) 1x, url(/assets/hero/farming.webp) 2x); }
  .hub-own-leveling{ --hero-img:image-set(url(/assets/hero/leveling-1600.webp) 1x, url(/assets/hero/leveling.webp) 2x); }
  .hub-own-buying{ --hero-img:image-set(url(/assets/hero/buying-1600.webp) 1x, url(/assets/hero/buying.webp) 2x); }
  .hub-own-guides{ --hero-img:image-set(url(/assets/hero/guides-1600.webp) 1x, url(/assets/hero/guides.webp) 2x); }
  .hub-own-reviews{ --hero-img:image-set(url(/assets/hero/reviews-1600.webp) 1x, url(/assets/hero/reviews.webp) 2x); }
  .hub-own-games{ --hero-img:image-set(url(/assets/hero/games-1600.webp) 1x, url(/assets/hero/games.webp) 2x); }
  .hub-own-rmt{ --hero-img:image-set(url(/assets/hero/rmt-1600.webp) 1x, url(/assets/hero/rmt.webp) 2x); }
} }
@media (max-width:760px){
  /* phones see only a slice of the 3:1 art; show the left scene instead of the empty dark center */
  .hub-own{ background:linear-gradient(180deg,rgba(11,12,15,.55) 0%,rgba(11,12,15,.72) 100%), var(--hero-img) 8% center / cover no-repeat, var(--bg) !important; }
}

/* ---------- homepage genre badges (painted art) ---------- */
.genre-tile .gt-icon-badge:has(img[src^="/assets/genres/"]){ width:60px; height:60px; }
.genre-tile .gt-icon-badge img[src^="/assets/genres/"]{ width:60px; height:60px; padding:0; filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)); transition:transform .2s ease, filter .2s ease; }
.genre-tile:hover .gt-icon-badge img[src^="/assets/genres/"]{ transform:scale(1.07) rotate(-3deg); filter:drop-shadow(0 0 12px rgba(245,166,35,.45)); }
.genre-tile:has(img[src^="/assets/genres/"]){ padding:12px 16px; gap:14px; }
@media (max-width:700px){ .genre-tile .gt-icon-badge:has(img[src^="/assets/genres/"]), .genre-tile .gt-icon-badge img[src^="/assets/genres/"]{ width:52px; height:52px; } }

/* ---------- 7. guide reading progress + back to top ---------- */
.rp-bar{ position:fixed; left:0; top:0; height:3px; width:100%; z-index:60; pointer-events:none; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,#c9860f,var(--amber),#ffd27a); box-shadow:0 0 10px rgba(245,166,35,.55); }
.to-top{ position:fixed; right:16px; bottom:18px; z-index:55; width:48px; height:48px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:radial-gradient(closest-side,#15171c 79%,transparent 81% 100%),conic-gradient(var(--amber) calc(var(--p,0)*1%),rgba(255,255,255,.12) 0);
  box-shadow:0 6px 18px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .2s ease, transform .2s ease; -webkit-tap-highlight-color:transparent; }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top img{ width:20px; height:20px; }
.to-top:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .to-top{ transition:none; } }
@media print{ .rp-bar,.to-top{ display:none !important; } }