/* MODERA live hotfix — 2026-10-09
   Goal: professional 3D home cards + stable mobile community navigation/feed. */
:root{
  --mh-navy:#0d1b2d;
  --mh-navy-2:#162a43;
  --mh-walnut:#5a321d;
  --mh-walnut-2:#7b4b2d;
  --mh-gold:#c99a4b;
  --mh-ivory:#fbf5ea;
  --mh-cream:#efe2cf;
  --mh-ink:#1b2b3d;
}

/* HOME — replace the toy-like pastel palette with one coherent premium system. */
#home .grid > a.tile{
  position:relative!important;
  isolation:isolate!important;
  color:#273345!important;
  border:1px solid rgba(117,82,48,.18)!important;
  background:linear-gradient(145deg,#fffdf8 0%,#f5ead9 48%,#e6d2b7 100%)!important;
  box-shadow:
    0 9px 18px rgba(37,27,19,.12),
    0 2px 4px rgba(37,27,19,.09),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(111,73,39,.10)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.7)!important;
  transform:translateZ(0);
}
#home .grid > a.tile:before{
  content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(201,154,75,.75),transparent);
  opacity:.75;z-index:-1
}
#home .grid > a.tile:nth-child(3n+2){
  background:linear-gradient(145deg,#fbf3e5 0%,#ead3b4 56%,#d7b184 100%)!important;
  color:#4b301f!important;
}
#home .grid > a.tile:nth-child(3n){
  background:linear-gradient(145deg,#f5f8fb 0%,#dfe7ee 55%,#c8d4de 100%)!important;
  color:#18334e!important;
}
#home .grid > a.tile:nth-child(9),
#home .grid > a.tile:nth-child(12),
#home .grid > a.tile.modera3d-tile{
  color:#fff8ec!important;
  border-color:rgba(201,154,75,.55)!important;
  background:linear-gradient(145deg,#193451 0%,#10243a 55%,#091725 100%)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.28)!important;
  box-shadow:0 11px 22px rgba(12,26,43,.24),inset 0 1px rgba(255,255,255,.16),inset 0 -1px rgba(0,0,0,.18)!important;
}
#home .grid > a.tile:nth-child(15){
  color:#fff8ec!important;
  border-color:rgba(201,154,75,.52)!important;
  background:linear-gradient(145deg,#704225 0%,#5a321d 56%,#3e2113 100%)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.28)!important;
}
#home .grid > a.tile.community-wide-tile{
  color:#fff8ec!important;
  background:
    radial-gradient(circle at 82% 20%,rgba(201,154,75,.17),transparent 35%),
    linear-gradient(120deg,#132b45 0%,#10243a 44%,#57321f 100%)!important;
  border:1px solid rgba(201,154,75,.48)!important;
  box-shadow:0 12px 24px rgba(12,26,43,.22),inset 0 1px rgba(255,255,255,.14)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.32)!important;
}
#home .grid > a.tile.community-wide-tile span,
#home .grid > a.tile.community-wide-tile small{color:inherit!important;text-shadow:inherit!important}
#home .grid > a.tile:active{transform:translateY(2px)!important;box-shadow:0 4px 9px rgba(37,27,19,.13),inset 0 2px 5px rgba(52,33,19,.10)!important}

/* GLOBAL AD — keep a premium frame while real campaign images fill it. */
#mainApp > header.top > #moderaGlobalAdHost > #adSlider,
#mainApp > header.top > #moderaGlobalAdHost > #adSlider[hidden]{
  border:1px solid rgba(201,154,75,.24)!important;
  background:linear-gradient(145deg,#fffdf8,#f2e8d9)!important;
  box-shadow:0 9px 22px rgba(12,26,43,.10),inset 0 1px #fff!important;
}
#mainApp #adSlider .adSlide img,#mainApp #adSlider .adSlideLink img{object-fit:cover!important}

/* COMMUNITY — tighter hero and a real mobile tab layout (3 + 2). */
#community.premiumCommunity{max-width:920px!important;margin:0 auto!important}
#community.premiumCommunity .premiumCommunityHero{
  border-color:rgba(201,154,75,.46)!important;
  background:radial-gradient(circle at 84% 18%,rgba(218,171,89,.20),transparent 35%),linear-gradient(120deg,#18324d 0%,#10243a 46%,#653a21 100%)!important;
  box-shadow:0 18px 38px rgba(20,27,34,.18),inset 0 1px rgba(255,255,255,.16)!important;
}
#community.premiumCommunity .communityHeroIcon{
  background:linear-gradient(145deg,#7b4b2d,#492716)!important;
  border-color:#d1a054!important;
  color:#ffe0a1!important;
}
#community.premiumCommunity .premiumCommunityNav button{
  border-color:rgba(92,61,38,.16)!important;
  background:linear-gradient(180deg,#fffefa,#eee2d2)!important;
  color:#34251b!important;
  box-shadow:0 7px 14px rgba(65,43,28,.10),inset 0 1px #fff!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#community.premiumCommunity .premiumCommunityNav button.active{
  color:#fff!important;
  background:linear-gradient(155deg,#203e60,#10243a 64%,#0a1929)!important;
  border-color:#d1a054!important;
  box-shadow:0 9px 18px rgba(16,36,58,.25),inset 0 1px rgba(255,255,255,.16)!important;
}

/* Feed fallback cards are deliberately compact and readable. */
.communityFallbackNotice{margin:0 0 12px;padding:11px 13px;border:1px solid rgba(201,154,75,.24);border-radius:15px;background:linear-gradient(180deg,#fffdf9,#f7edde);color:#66513f;font-size:12px;line-height:1.45}
.communityFallbackFeed{display:grid;gap:12px}
.communityFallbackFeed .socialCard{margin:0!important;text-align:left!important}
.communityFallbackFeed .postHead{align-items:center!important}
.communityFallbackFeed .postText{font-size:13px!important;line-height:1.55!important;color:#49382d!important}
.communityFallbackFeed .postMeta{font-size:11px!important;color:#8b7768!important}
.communityFallbackBadge{display:inline-flex;padding:4px 7px;border-radius:999px;background:#f2e2c6;color:#6b4728;font-size:9px;font-weight:900;letter-spacing:.03em;margin-left:6px}

@media(max-width:699px){
  #home.screen.active > .grid > a.tile{
    border-radius:13px!important;
    font-size:clamp(10.5px,2.9vw,12.5px)!important;
    letter-spacing:.01em!important;
    padding:5px 5px!important;
  }
  #home.screen.active > .grid > a.tile.community-wide-tile{border-radius:14px!important;font-size:clamp(12.5px,3.3vw,15px)!important}

  #community.premiumCommunity{padding:8px 10px 42px!important}
  #community.premiumCommunity .premiumBack{margin:4px 0 11px!important;padding:10px 14px!important;border-radius:14px!important}
  #community.premiumCommunity .premiumCommunityHero{
    grid-template-columns:54px 1fr!important;
    gap:12px!important;
    min-height:0!important;
    padding:15px!important;
    border-radius:21px!important;
    margin-bottom:12px!important;
  }
  #community.premiumCommunity .communityHeroIcon{width:52px!important;height:52px!important;border-radius:17px!important;font-size:24px!important}
  #community.premiumCommunity .communityHeroText h2{font-size:20px!important;line-height:1.08!important;margin:6px 0 5px!important}
  #community.premiumCommunity .communityHeroText p{font-size:12px!important;line-height:1.35!important;margin-bottom:8px!important}
  #community.premiumCommunity .communityHeroMeta{gap:5px!important}
  #community.premiumCommunity .communityHeroMeta span{font-size:8.5px!important;padding:4px 7px!important}

  #community.premiumCommunity .premiumCommunityNav{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    margin:0 0 12px!important;
    padding:0!important;
  }
  #community.premiumCommunity .premiumCommunityNav button{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:9px 5px!important;
    border-radius:14px!important;
    font-size:11px!important;
    line-height:1.1!important;
    white-space:normal!important;
  }
  #community.premiumCommunity .premiumCommunityNav button:nth-child(-n+3){grid-column:span 2!important}
  #community.premiumCommunity .premiumCommunityNav button:nth-child(n+4){grid-column:span 3!important}
  #community.premiumCommunity .premiumCommunityNav button > span{display:none!important}
  #community.premiumCommunity .communityLoadingCard,
  #community.premiumCommunity .communityOfflineCard{padding:24px 14px!important;border-radius:20px!important}
  #community.premiumCommunity .communitySkeleton{display:none!important}
  #community.premiumCommunity .socialCard{padding:14px!important;border-radius:18px!important}
}