/* MassaCoin — R300: layout da IMAGEM DE REFERÊNCIA aprovada (rede social moderna: cartões grandes com foto/vídeo,
   autor sobre a mídia, blocos de atalho em grade azul-marinho/branco/dourado). SOMENTE apresentação (CSS):
   nenhum HTML, texto, link, botão, rota, função, banco ou tradução foi alterado — tudo que existia continua e funciona igual.
   Vídeos e fotos enviados pelos usuários continuam com os mesmos controles (a rolagem, o player e a galeria não mudam). */
:root { --vr-navy: var(--mc-p-dark, #0A4D8C); --vr-blue: var(--mc-p, #1D70B8); --vr-gold: #e0b44a; --vr-gold-2: #f4d77d; --vr-ink: #0b1b3f; --vr-bg: #f3f6fc; --vr-sh: 0 12px 28px color-mix(in srgb, var(--vr-navy) 16%, transparent); }
:root[data-mc-paleta="padrao"] { --vr-blue: #2A6AC0; --vr-navy: #174C9C; }   /* azul royal da imagem de referência (só no tema padrão; os outros temas seguem a cor escolhida) */

/* ================= FEED: cartão moderno com foto/vídeo de ponta a ponta (posts com mídia usam .post-card--rail) =================
   A ORDEM aprovada na R292 (autor e texto acima da mídia; curtir/comentar/compartilhar/salvar e visualizações abaixo) é MANTIDA. */
body .post-card.post-card--rail { position: relative; border-radius: 26px; overflow: hidden !important; box-shadow: var(--vr-sh); border: 1px solid color-mix(in srgb, var(--vr-gold) 30%, transparent); }
body .post-card.post-card--rail > .post-stage { margin-left: -15px !important; margin-right: -15px !important; width: calc(100% + 30px) !important; max-width: none !important; }
body .post-card.post-card--rail .post-stage .post-media, body .post-card.post-card--rail .post-stage .post-embed { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; }
body .post-card.post-card--rail > .post-card__head .post-card__avatar { border: 2px solid var(--vr-gold); box-shadow: 0 2px 8px color-mix(in srgb, var(--vr-navy) 25%, transparent); }
body .post-card.post-card--rail > .post-card__head .post-card__name { color: var(--vr-navy); font-weight: 800; }
body .post-card.post-card--rail .post-media--1:not(.post-media--video):not(.post-media--reel) img { border-radius: 0; }
@media (max-width: 700px) { body .post-card.post-card--rail { overflow: hidden !important; } }

/* ================= HOME: blocos de atalho como na referência ================= */
html body .pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { html body .pillars-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html body .pillar-card { min-height: 176px; padding: 62px 14px 14px !important; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: stretch !important; gap: 4px; border-radius: 24px !important; text-align: left !important; }
html body .pillar-card .highlight-card__icon { position: absolute; top: 14px; left: 14px; width: 34px; height: 34px; border-radius: 12px !important; display: grid; place-items: center; }
html body .pillar-card::before { content: ""; position: absolute; right: 10px; top: 10px; width: 46px; height: 46px; background: url(/icons/massacoin-coin-m-512.png) center/contain no-repeat; opacity: .9; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.28)); }
html body .pillar-card .highlight-card__title { font-size: 16px; font-weight: 800; line-height: 1.18; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
html body .pillar-card .highlight-card__sub { font-size: 12px; line-height: 1.3; max-width: 100%; text-align: left; }
/* 3º e 4º blocos em branco (alternância azul/branco da referência) */
html body .pillars-grid > .pillar-card:nth-child(2), html body .pillars-grid > .pillar-card:nth-child(3) { background: linear-gradient(160deg, #fff 0%, #eef3ff 100%) !important; border-color: color-mix(in srgb, var(--vr-gold) 55%, transparent) !important; box-shadow: var(--vr-sh), inset 0 1px 0 #fff !important; }
html body .pillars-grid > .pillar-card:nth-child(2) .highlight-card__title, html body .pillars-grid > .pillar-card:nth-child(3) .highlight-card__title { color: var(--vr-navy) !important; }
html body .pillars-grid > .pillar-card:nth-child(2) .highlight-card__sub, html body .pillars-grid > .pillar-card:nth-child(3) .highlight-card__sub { color: rgba(11,27,63,.74) !important; }
html body .pillars-grid > .pillar-card:nth-child(2)::after, html body .pillars-grid > .pillar-card:nth-child(3)::after { background: radial-gradient(circle, rgba(224,180,74,.28), transparent 70%); }
html body .pillars-grid > .pillar-card:last-child:nth-child(odd) { min-height: 120px; }
html body .pillars-grid > .pillar-card:last-child:nth-child(odd)::before { opacity: .55; }
@media (min-width: 900px) { html body .pillars-grid > .pillar-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Rede Social = cartão de boas-vindas grande (moeda M em destaque) */
html body .feature-bars .statement-row--spotlight { padding: 18px 16px; min-height: 96px; }
html body .feature-bars .statement-row--spotlight .statement-row__icon { width: 64px; height: 64px; border-radius: 50% !important; border: 3px solid var(--vr-gold); background: linear-gradient(160deg, var(--vr-blue), var(--vr-navy)) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--vr-navy) 30%, transparent); }
html body .feature-bars .statement-row--spotlight .statement-row__icon svg { stroke: var(--vr-gold-2) !important; width: 28px; height: 28px; }
html body .feature-bars .statement-row--spotlight .statement-row__title { font-size: 19px; text-transform: uppercase; letter-spacing: .02em; }
html body .feature-bars .statement-row .statement-row__meta { color: rgba(11,27,63,.78); font-size: 13.5px; line-height: 1.35; }

/* títulos de seção mais fortes, como na referência */
html body .section-heading { font-size: 21px; font-weight: 800; color: var(--vr-navy); }
html body .section-heading--hero { font-size: inherit; }
@media (prefers-reduced-motion: reduce) { html body .pillar-card { transition: none; } }

/* ================= HOME: faixa "Feed" (R301) — cartões com foto/vídeo e autor sobre a mídia, como na referência ================= */
html body .hf { margin: 6px 0 4px; }
html body .hf .section-heading__link { color: inherit; text-decoration: none; }
html body .hf-list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html body .hf-list::-webkit-scrollbar { display: none; }
html body .hf-card { position: relative; flex: 0 0 74%; max-width: 340px; scroll-snap-align: start; display: block; border-radius: 26px; overflow: hidden; background: #fff; text-decoration: none; color: var(--vr-ink); box-shadow: var(--vr-sh); border: 1px solid color-mix(in srgb, var(--vr-gold) 40%, transparent); }
@media (min-width: 700px) { html body .hf-card { flex-basis: calc(50% - 7px); } }
@media (min-width: 1000px) { html body .hf-card { flex-basis: calc(33.333% - 10px); } }
html body .hf-media { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--vr-blue), var(--vr-navy)); }
html body .hf-media img, html body .hf-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .hf-media::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 84px; background: linear-gradient(180deg, rgba(8,20,50,.66), rgba(8,20,50,0)); pointer-events: none; }
html body .hf-av { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; border: 2px solid var(--vr-gold); background: #fff; color: var(--vr-navy); font-weight: 800; display: grid; place-items: center; overflow: hidden; }
html body .hf-av img { width: 100%; height: 100%; object-fit: cover; }
html body .hf-name { font-weight: 800; font-size: 14px; text-shadow: 0 1px 6px rgba(0,0,0,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .hf-count { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(11,19,32,.62); color: #fff; font-size: 12px; font-weight: 700; }
html body .hf-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--vr-navy); display: grid; place-items: center; font-size: 20px; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
html body .hf-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
html body .hf-txt { font-weight: 700; font-size: 14px; color: var(--vr-navy); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html body .hf-like { flex: 0 0 auto; font-weight: 800; font-size: 13px; color: var(--vr-blue); }

/* (R306: imagens dos blocos agora são ilustrações vetoriais nítidas — ver css/visual-final.css) */

/* cartão Duelos e Desafios com colagem de fotos */
html body .dd-banner { display: block; position: relative; border-radius: 26px; overflow: hidden; padding: 16px 16px 14px; text-decoration: none; background: linear-gradient(135deg, #f6e2a1 0%, #e0b44a 100%); box-shadow: var(--vr-sh); border: 1px solid color-mix(in srgb, var(--vr-navy) 14%, transparent); margin-bottom: 18px; }
html body .dd-banner__title { display: block; font-weight: 800; font-size: 20px; color: var(--vr-ink); margin-bottom: 12px; }
html body .dd-banner__art-unused { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
html body .dd-banner__art-unused i { display: block; aspect-ratio: 3 / 4; border-radius: 16px; background-size: cover; background-position: center top; box-shadow: 0 6px 14px color-mix(in srgb, var(--vr-navy) 25%, transparent); border: 2px solid rgba(255,255,255,.85); }
@media (max-width: 520px) { html body .dd-banner__art-unused { grid-template-columns: repeat(2, 1fr); } html body .dd-banner__art-unused i { aspect-ratio: 4 / 3; } }