/*
 * Antropeo premium material layer
 * Visual-only enhancement for app hubs and selectors.
 */
:root {
  --ant-purple-100: #ede9fe;
  --ant-purple-300: #c4b5fd;
  --ant-purple-500: #8b5cf6;
  --ant-purple-650: #6d28d9;
  --ant-purple-850: #24104d;
  --ant-purple-950: #0d061d;
  --ant-blue-accent: #38bdf8;
  --ant-gold-200: #fde68a;
  --ant-gold-400: #fbbf24;
  --ant-gold-600: #d97706;
  --ant-gold-850: #6b3205;
  --ant-ink: #070914;
  --ant-material-border: rgba(196,181,253,.25);
  --ant-material-highlight: rgba(255,255,255,.17);
  --ant-material-shadow: 0 16px 34px rgba(0,0,0,.34), 0 5px 12px rgba(4,2,16,.34);
  --ant-material-purple:
    linear-gradient(150deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.025) 24%, transparent 42%),
    linear-gradient(145deg, rgba(38,18,82,.96), rgba(18,10,48,.97) 58%, rgba(9,10,28,.98));
  --ant-material-gold:
    linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.035) 25%, transparent 44%),
    linear-gradient(145deg, rgba(104,47,5,.97), rgba(50,22,4,.98) 58%, rgba(18,10,10,.99));
}

body.antropeo-materials {
  --ant-page-glow: rgba(124,58,237,.16);
  background-color: var(--ant-ink);
  background-image:
    linear-gradient(160deg, rgba(76,29,149,.10), transparent 34%),
    linear-gradient(20deg, rgba(14,116,144,.055), transparent 38%);
}

/* Quiet orbital linework, deliberately subtler than page artwork. */
body.antropeo-materials::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: min(76vw, 330px);
  aspect-ratio: 1;
  right: min(-34vw, -118px);
  top: 18vh;
  border: 1px solid rgba(167,139,250,.07);
  border-radius: 50%;
  box-shadow:
    0 0 0 26px rgba(96,165,250,.018),
    0 0 0 58px rgba(167,139,250,.014);
  transform: rotate(-14deg);
  pointer-events: none;
}

body.antropeo-materials .app,
body.antropeo-materials .page,
body.antropeo-materials .reel-wrap {
  position: relative;
  z-index: 1;
}

/* Premium utility controls. */
body.antropeo-materials :is(.back-btn, .settings-btn, .refresh-btn, .info-btn) {
  border: 1px solid rgba(196,181,253,.24);
  background:
    linear-gradient(155deg, rgba(255,255,255,.15), rgba(255,255,255,.025) 45%),
    linear-gradient(145deg, rgba(55,29,103,.82), rgba(13,10,35,.92));
  box-shadow:
    0 7px 16px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.21),
    inset 0 -1px 0 rgba(0,0,0,.42);
}

body.antropeo-materials :is(.coins-pill, .points-chip, .pts-chip, .shop-mini) {
  border: 1px solid rgba(251,191,36,.34) !important;
  background:
    linear-gradient(155deg, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(145deg, rgba(89,44,8,.92), rgba(35,18,8,.94)) !important;
  box-shadow:
    0 9px 20px rgba(0,0,0,.30),
    0 0 18px rgba(245,158,11,.15),
    inset 0 1px 0 rgba(255,255,255,.23) !important;
}

/* Shared bottom navigation: larger balanced icons and a polished housing. */
body.antropeo-materials .bottom-nav,
body.antropeo-materials > nav,
body.antropeo-materials .page > nav {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 32%),
    linear-gradient(180deg, rgba(16,12,35,.985), rgba(5,7,17,.99)) !important;
  border-top: 1px solid rgba(196,181,253,.18) !important;
  box-shadow:
    0 -12px 34px rgba(10,4,28,.44),
    inset 0 1px 0 rgba(255,255,255,.06);
}
body.antropeo-materials .bottom-nav::before,
body.antropeo-materials > nav::before,
body.antropeo-materials .page > nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.45), transparent);
  pointer-events: none;
}
body.antropeo-materials .nav-btn .nav-ico {
  width: 26px !important;
  height: 26px !important;
}
body.antropeo-materials .nav-btn .nav-ico img {
  opacity: .88 !important;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.44));
  transition: opacity .16s ease, transform .16s ease, filter .16s ease !important;
}
body.antropeo-materials .nav-btn.active .nav-ico img {
  transform: translateY(-2px) scale(1.08);
  filter:
    drop-shadow(0 0 8px rgba(167,139,250,.72))
    drop-shadow(0 5px 8px rgba(0,0,0,.42));
}
body.antropeo-materials .nav-btn.active {
  color: var(--ant-purple-300) !important;
}
body.antropeo-materials .feed-nav-icon {
  width: 62px !important;
  height: 62px !important;
  filter:
    drop-shadow(0 0 13px rgba(251,191,36,.36))
    drop-shadow(0 9px 13px rgba(0,0,0,.46));
}
body.antropeo-materials .nav-center-lbl {
  color: rgba(196,181,253,.72) !important;
}
body.antropeo-materials .nav-item img {
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.42));
}
body.antropeo-materials .nav-orb {
  border-color: rgba(196,181,253,.30) !important;
  background:
    linear-gradient(155deg, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(145deg, #7c3aed, #312e81) !important;
  box-shadow:
    0 0 0 3px rgba(12,7,30,.92),
    0 10px 24px rgba(0,0,0,.38),
    0 0 24px rgba(139,92,246,.43) !important;
}

/* Home: standard experiences share the purple material family. */
body.antropeo-home .home-quickbar {
  border-bottom: 1px solid rgba(196,181,253,.07);
}
body.antropeo-home :is(.xp-bar-wrap, .streak-card, .stat-card, .mini-card) {
  background: var(--ant-material-purple);
  border-color: var(--ant-material-border);
  box-shadow:
    var(--ant-material-shadow),
    inset 0 1px 0 var(--ant-material-highlight),
    inset 0 -1px 0 rgba(0,0,0,.36);
}
body.antropeo-home .mode-card {
  border-color: rgba(167,139,250,.34);
  box-shadow:
    0 15px 34px rgba(0,0,0,.40),
    0 0 24px rgba(124,58,237,.13),
    inset 0 1px 0 rgba(255,255,255,.18);
}
body.antropeo-home .solo-card .mode-card-bg {
  background: linear-gradient(155deg, #111d4d, #25206b 48%, #241148);
}
body.antropeo-home .duel-card .mode-card-bg {
  background: linear-gradient(155deg, #251047, #45145f 48%, #25113d);
}
body.antropeo-home .mode-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.045);
  pointer-events: none;
}
body.antropeo-home .mode-arrow-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 44%),
    linear-gradient(145deg, #8b5cf6, #5b21b6);
  box-shadow:
    0 5px 0 rgba(42,14,83,.75),
    0 10px 20px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.30);
}

/* Duel target screen: preserve its composition, strengthen material continuity. */
body.antropeo-duel .mode-card {
  box-shadow:
    0 20px 52px rgba(0,0,0,.54),
    0 0 32px var(--mode-glow),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.42);
}
body.antropeo-duel .mode-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 7;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
}
body.antropeo-duel .mode-theme-marathon {
  border-color: rgba(251,191,36,.70);
  box-shadow:
    0 20px 54px rgba(0,0,0,.56),
    0 0 35px rgba(245,158,11,.25),
    inset 0 1px 0 rgba(255,255,255,.20);
}
body.antropeo-duel .mode-token-icon {
  background:
    linear-gradient(155deg, rgba(255,255,255,.18), transparent 46%),
    linear-gradient(145deg, rgba(44,20,82,.95), rgba(8,8,24,.96));
}

/* Lobby panels use the standard purple utility tier. */
body.antropeo-lobby :is(.feature-pills, .main-card, .share-card, .room-code-wrap) {
  background: var(--ant-material-purple);
  border-color: rgba(167,139,250,.28);
  box-shadow:
    var(--ant-material-shadow),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.34);
}
body.antropeo-lobby :is(.join-single, .copy-btn) {
  border-color: rgba(167,139,250,.34);
  background:
    linear-gradient(160deg, rgba(255,255,255,.08), transparent 44%),
    rgba(10,9,32,.78);
}
body.antropeo-lobby :is(.join-cta, .create-btn) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 43%),
    linear-gradient(145deg, #8b5cf6, #6d28d9 52%, #4c1d95);
  box-shadow:
    0 5px 0 rgba(40,16,78,.85),
    0 13px 25px rgba(0,0,0,.30),
    0 0 20px rgba(139,92,246,.24),
    inset 0 1px 0 rgba(255,255,255,.32);
}

/* Solo catalog: one purple universe, with Marathon promoted to gold. */
body.antropeo-catalog .gcard:not(.marathon) {
  background:
    linear-gradient(155deg, rgba(255,255,255,.10), transparent 35%),
    linear-gradient(135deg, #25104f, #1b123f 58%, #0d1027);
  border-color: rgba(167,139,250,.34);
  box-shadow:
    0 6px 0 rgba(7,3,18,.70),
    0 14px 25px rgba(0,0,0,.30),
    0 0 19px rgba(124,58,237,.13),
    inset 0 1px 0 rgba(255,255,255,.17);
}
body.antropeo-catalog .gcard.marathon {
  background: var(--ant-material-gold);
  border-color: rgba(251,191,36,.58);
  box-shadow:
    0 6px 0 rgba(71,31,4,.74),
    0 15px 28px rgba(0,0,0,.34),
    0 0 24px rgba(245,158,11,.19),
    inset 0 1px 0 rgba(255,255,255,.21);
}
body.antropeo-catalog .gc-arrow {
  background:
    linear-gradient(155deg, rgba(255,255,255,.18), transparent 48%),
    rgba(70,36,126,.72);
  border-color: rgba(196,181,253,.28);
  box-shadow: 0 7px 14px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18);
}

/* Mission selectors: selected challenge may be gold; normal choices stay purple. */
body.antropeo-selector :is(.rocket-banner, .hero-banner, .options-wrap, .info-row, .meta-pill, .all-card) {
  background: var(--ant-material-purple);
  border-color: rgba(167,139,250,.25);
  box-shadow:
    var(--ant-material-shadow),
    inset 0 1px 0 rgba(255,255,255,.14);
}
body.antropeo-selector :is(.mission-card, .diff-card) {
  background: var(--ant-material-purple);
  border-color: rgba(167,139,250,.24);
  box-shadow:
    0 12px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.35);
}
body.antropeo-selector :is(.card-challenge.selected, .card-hard.sel) {
  background: var(--ant-material-gold);
  border-color: rgba(251,191,36,.66);
  box-shadow:
    0 0 0 2px rgba(251,191,36,.12),
    0 15px 30px rgba(0,0,0,.34),
    0 0 26px rgba(245,158,11,.23),
    inset 0 1px 0 rgba(255,255,255,.22);
}
body.antropeo-selector .launch-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(145deg, #8b5cf6, #6d28d9 55%, #4338ca);
  border: 1px solid rgba(196,181,253,.30);
  box-shadow:
    0 6px 0 rgba(42,20,91,.78),
    0 15px 28px rgba(0,0,0,.30),
    0 0 24px rgba(139,92,246,.25),
    inset 0 1px 0 rgba(255,255,255,.32);
}

/* Profile and progression share the same standard material. */
body.antropeo-profile .xp-card,
body.antropeo-dashboard .xp-card {
  background: var(--ant-material-purple);
  border: 1px solid rgba(167,139,250,.35);
  box-shadow:
    0 18px 38px rgba(0,0,0,.37),
    0 0 28px rgba(124,58,237,.16),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.42);
}
body.antropeo-profile .rank-badge,
body.antropeo-dashboard .xp-badge {
  background:
    linear-gradient(155deg, rgba(255,255,255,.15), transparent 46%),
    linear-gradient(145deg, #6d28d9, #4338ca);
  border: 1px solid rgba(196,181,253,.28);
  box-shadow: 0 8px 18px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.22);
}
body.antropeo-profile :is(.stat-chip, .settings-row),
body.antropeo-dashboard :is(.challenge-card, .stat-card, .record-row, .reset-bar, .records-wrap) {
  background: var(--ant-material-purple);
  border-color: rgba(167,139,250,.22);
  box-shadow:
    0 11px 23px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.12);
}
body.antropeo-dashboard .action-btn:not(.shop) {
  background:
    linear-gradient(155deg, rgba(255,255,255,.17), transparent 44%),
    linear-gradient(145deg, #6d28d9, #312e81);
  border: 1px solid rgba(167,139,250,.25);
  box-shadow: 0 6px 0 rgba(33,18,73,.76), 0 12px 22px rgba(0,0,0,.25);
}
body.antropeo-dashboard .action-btn.shop {
  background:
    linear-gradient(155deg, rgba(255,255,255,.20), transparent 44%),
    linear-gradient(145deg, #d97706, #78350f);
  box-shadow: 0 6px 0 rgba(69,31,4,.78), 0 12px 22px rgba(0,0,0,.25);
}

/* Leaderboard: purple competition surfaces; only first place is championship gold. */
body.antropeo-leaderboard :is(.my-stat, .tabs, .pod-card, .lb-row, .bonus-bar, .act-btn) {
  background: var(--ant-material-purple);
  border-color: rgba(167,139,250,.24);
  box-shadow:
    0 11px 24px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.13);
}
body.antropeo-leaderboard .p1 .pod-card {
  background: var(--ant-material-gold);
  border-color: rgba(251,191,36,.62);
  box-shadow:
    0 16px 30px rgba(0,0,0,.34),
    0 0 27px rgba(245,158,11,.22),
    inset 0 1px 0 rgba(255,255,255,.22);
}
body.antropeo-leaderboard .tab-btn.on,
body.antropeo-leaderboard .act-btn.primary {
  background:
    linear-gradient(155deg, rgba(255,255,255,.12), transparent 44%),
    linear-gradient(145deg, rgba(109,40,217,.70), rgba(49,46,129,.72));
  border-color: rgba(167,139,250,.48);
  color: var(--ant-purple-100);
}

/* Shop: standard packs purple; legendary and premium offers gold. */
body.antropeo-shop :is(.dr-chest, .free-bar, .iap-card:not(.gold)) {
  background: var(--ant-material-purple);
  border-color: rgba(167,139,250,.27);
  box-shadow:
    0 12px 25px rgba(0,0,0,.29),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.38);
}
body.antropeo-shop :is(.dr-chest.active, .dr-chest.legendary, .iap-card.gold) {
  background: var(--ant-material-gold);
  border-color: rgba(251,191,36,.60);
  box-shadow:
    0 15px 30px rgba(0,0,0,.34),
    0 0 25px rgba(245,158,11,.22),
    inset 0 1px 0 rgba(255,255,255,.22);
}
body.antropeo-shop .ad-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 43%),
    linear-gradient(145deg, #8b5cf6, #4338ca);
}
body.antropeo-shop .special-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 43%),
    linear-gradient(145deg, #f59e0b, #92400e);
  box-shadow: 0 6px 0 rgba(69,31,4,.72), 0 11px 22px rgba(0,0,0,.27);
}

/* Feed controls: premium utility tier, without obscuring photography. */
body.antropeo-feed :is(.geo-back, .action-icon, .geo-pill, .geo-baked-pill, .share-toast) {
  background:
    linear-gradient(155deg, rgba(255,255,255,.15), transparent 46%),
    rgba(25,12,52,.66);
  border-color: rgba(196,181,253,.25);
  box-shadow:
    0 10px 22px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.15);
}
body.antropeo-feed .action-btn.globe .action-icon {
  color: #a5f3fc;
  border-color: rgba(103,232,249,.38);
}

@media (prefers-reduced-motion: reduce) {
  body.antropeo-materials *,
  body.antropeo-materials *::before,
  body.antropeo-materials *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}