:root{
  --cx-rank-gold:#f4d37c;
  --cx-rank-amber:#ffae52;
  --cx-rank-red:#ff553d;
  --cx-rank-violet:#a48dff;
  --cx-rank-cyan:#69e5ff;
}

/* Top 3 acompanha a tela como um pódio compacto, legível e reutilizável. */
.cx-top3-rail{position:fixed;z-index:28;right:12px;top:50%;translate:0 -50%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.46))}
.cx-top3-open{position:relative;display:grid;justify-items:center;width:210px;padding:13px 12px 12px;border:1px solid rgba(244,211,124,.25);border-radius:24px;background:radial-gradient(circle at 50% 76%,rgba(255,85,61,.1),transparent 44%),linear-gradient(155deg,rgba(31,29,25,.66),rgba(12,14,19,.58));color:#f6f1e8;box-shadow:0 0 28px rgba(244,211,124,.1),0 0 0 1px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.11);backdrop-filter:blur(20px) saturate(118%);-webkit-backdrop-filter:blur(20px) saturate(118%);cursor:pointer;overflow:hidden;transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s ease,box-shadow .25s ease,background .25s ease}
.cx-top3-open::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 24%,rgba(255,255,255,.1),transparent 66%);translate:-120% 0;animation:cxRailScan 6s ease-in-out infinite;pointer-events:none}
.cx-top3-open::after{content:"";position:absolute;z-index:0;left:12%;right:12%;bottom:-20px;height:70px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,104,44,.25),transparent 68%);filter:blur(8px);animation:cxPodiumAura 3.6s ease-in-out infinite;pointer-events:none}
.cx-top3-open:hover{transform:translateX(-5px) scale(1.025);border-color:rgba(244,211,124,.5);background:radial-gradient(circle at 50% 76%,rgba(255,85,61,.14),transparent 44%),linear-gradient(155deg,rgba(35,32,27,.75),rgba(12,14,19,.68));box-shadow:0 0 38px rgba(244,211,124,.19),0 0 0 1px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.14)}
.cx-top3-label{position:relative;z-index:3;display:flex;align-items:baseline;justify-content:center;gap:7px;width:100%;margin-bottom:9px;line-height:1;text-align:center}
.cx-top3-label::before,.cx-top3-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(244,211,124,.35))}
.cx-top3-label::after{background:linear-gradient(90deg,rgba(244,211,124,.35),transparent)}
.cx-top3-label b{font:900 1.02rem Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--cx-rank-gold);white-space:nowrap}
.cx-top3-label small{font-size:.53rem;color:#afb4c0;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.cx-top3-podium{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.12fr .92fr;align-items:end;width:100%;min-height:148px}
.cx-top3-member{position:relative;display:grid;justify-items:center;align-content:end;min-width:0;color:#e8e4dd}
.cx-top3-member.rank-2{grid-column:1}.cx-top3-member.rank-1{grid-column:2}.cx-top3-member.rank-3{grid-column:3}
.cx-top3-member .cx-rank-portrait{z-index:3;width:50px;height:50px;border-width:2px;box-shadow:0 0 18px rgba(0,0,0,.48)}
.cx-top3-member.rank-1 .cx-rank-portrait{width:64px;height:64px;border-color:var(--cx-rank-gold);box-shadow:0 0 26px rgba(244,211,124,.32)}
.cx-top3-member.rank-2 .cx-rank-portrait{border-color:#d6dee9}.cx-top3-member.rank-3 .cx-rank-portrait{border-color:#d9996b}
.cx-top3-name{position:relative;z-index:4;display:block;width:100%;min-height:27px;margin:4px 0 2px;padding-inline:2px;overflow:hidden;color:#f3eee5;font-size:.59rem;line-height:1.12;text-align:center;text-overflow:ellipsis;text-wrap:balance}
.cx-top3-member.rank-1 .cx-top3-name{color:#ffe3a3;font-size:.65rem}
.cx-top3-step{position:relative;z-index:2;display:grid;place-items:center;width:58px;height:31px;border:1px solid rgba(255,255,255,.12);border-radius:7px 7px 3px 3px;background:linear-gradient(#353a44,#1a1d24);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 -5px 17px rgba(0,0,0,.22)}
.cx-top3-step i{font:900 .72rem/1 Impact,Arial,sans-serif;color:#d9e1ec}
.cx-top3-member.rank-1 .cx-top3-step{width:68px;height:46px;border-color:rgba(244,211,124,.38);background:linear-gradient(#574621,#2a2215);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 22px rgba(244,211,124,.14)}
.cx-top3-member.rank-1 .cx-top3-step i{color:#ffe09a;font-size:.86rem}
.cx-top3-member.rank-3 .cx-top3-step{width:55px;height:24px;border-color:rgba(220,153,107,.3);background:linear-gradient(#4a3025,#241b18)}
.cx-top3-crown{position:absolute;z-index:6;top:-21px;left:50%;translate:-50% 0;font-size:1.55rem;color:var(--cx-rank-gold);filter:drop-shadow(0 0 11px rgba(244,211,124,.78));animation:cxCrownHover 3s ease-in-out infinite}
.cx-top3-flame{position:absolute;z-index:1;top:7px;left:50%;translate:-50% 0;width:58px;height:70px;opacity:.78;filter:drop-shadow(0 0 10px rgba(255,94,34,.6));animation:cxFlameDance 1.65s ease-in-out infinite alternate;pointer-events:none}
.cx-top3-flame::before,.cx-top3-flame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffe07e 0 16%,#ff8e36 45%,rgba(255,50,27,.08) 86%);clip-path:polygon(50% 0,63% 24%,78% 10%,75% 39%,92% 54%,76% 82%,50% 100%,22% 83%,8% 56%,25% 34%,31% 12%);border-radius:48% 52% 50% 50%}
.cx-top3-flame::after{inset:20px 14px 5px;background:linear-gradient(#fff6b5,#ffb43e 48%,#ff553d);opacity:.92;animation:cxFlameCore 1.2s ease-in-out infinite alternate}
.cx-top3-member.rank-2 .cx-top3-flame,.cx-top3-member.rank-3 .cx-top3-flame{top:17px;width:46px;height:55px;opacity:.58;animation-delay:-.7s}

/* Ranking em janela modal: os dez lugares cabem no desktop sem rolagem. */
.cx-ranking-dialog{width:min(1080px,calc(100vw - 40px));height:min(810px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid rgba(244,211,124,.25);border-radius:26px;background:rgba(8,10,14,.42);color:#f5f1e8;box-shadow:0 0 78px rgba(244,211,124,.1),0 36px 100px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;backdrop-filter:blur(27px) saturate(108%);-webkit-backdrop-filter:blur(27px) saturate(108%)}
.cx-ranking-dialog::backdrop{background:radial-gradient(circle at 50% 46%,rgba(90,52,26,.09),rgba(7,8,12,.58) 60%);backdrop-filter:blur(8px);animation:cxBackdropIn .28s ease-out both}
.cx-ranking-shell{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;height:100%;overflow:hidden;padding:18px 26px 16px;background:radial-gradient(circle at 50% -12%,rgba(244,211,124,.08),transparent 32%),radial-gradient(circle at 5% 54%,rgba(255,85,61,.045),transparent 31%),radial-gradient(circle at 96% 26%,rgba(164,141,255,.05),transparent 28%),linear-gradient(145deg,rgba(21,23,29,.43),rgba(9,11,15,.36) 65%)}
.cx-ranking-shell::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;background-image:linear-gradient(rgba(244,211,124,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(244,211,124,.16) 1px,transparent 1px),repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,85,61,.035) 19px 20px);background-size:54px 54px,54px 54px,auto;mask-image:linear-gradient(#000,transparent 78%)}
.cx-ranking-shell::after{content:"忍";position:absolute;z-index:0;left:50%;top:55%;translate:-50% -50%;color:rgba(244,211,124,.022);font:900 min(54vw,580px)/1 Georgia,serif;pointer-events:none;filter:drop-shadow(0 0 34px rgba(255,85,61,.06))}
.cx-ranking-close{position:absolute;z-index:5;right:18px;top:18px;width:40px;height:40px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(15,17,22,.84);color:#f5f1e8;font-size:1.55rem;line-height:1;cursor:pointer;backdrop-filter:blur(12px);transition:.2s ease}
.cx-ranking-close:hover{color:var(--cx-rank-gold);border-color:rgba(244,211,124,.4);transform:rotate(4deg)}
.cx-ranking-header{position:relative;z-index:1;max-width:810px;margin:0 auto;text-align:center}
.cx-ranking-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--cx-rank-gold);font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.cx-ranking-kicker::before,.cx-ranking-kicker::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--cx-rank-red))}
.cx-ranking-kicker::after{background:linear-gradient(90deg,var(--cx-rank-red),transparent)}
.cx-ranking-header h2{margin:7px 0 5px;font:900 clamp(2.35rem,4.6vw,4rem)/.94 Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
.cx-ranking-header p{margin:0 auto;color:#c4c7cf;max-width:74ch;font-size:.84rem;line-height:1.45}
.cx-demo-chip{display:inline-flex;margin-top:8px;padding:5px 9px;border:1px solid rgba(255,174,82,.24);border-radius:999px;background:rgba(255,174,82,.07);color:#ffc47f;font-size:.59rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
/* Falha de carregamento: o vermelho separa "prévia declarada" de "não carregou".
   Sem essa distinção o usuário lê os dois avisos como se fossem a mesma coisa. */
.cx-demo-chip.is-error{border-color:rgba(255,120,90,.34);background:rgba(255,120,90,.09);color:#ff9d85;text-transform:none;letter-spacing:.01em;font-size:.66rem}

.cx-ranking-podium{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.17fr 1fr;gap:11px;align-items:end;margin:0}
.cx-ranking-podium .rank-1{order:2;min-height:194px;border-color:rgba(244,211,124,.4);background:radial-gradient(circle at 50% 18%,rgba(244,211,124,.09),transparent 44%),linear-gradient(155deg,rgba(46,39,24,.46),rgba(17,17,18,.48));box-shadow:0 0 34px rgba(244,211,124,.12),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(12px)}
.cx-ranking-podium .rank-2{order:1}.cx-ranking-podium .rank-3{order:3}
.cx-supporter-card{position:relative;display:grid;grid-template-columns:36px 50px minmax(0,1fr);gap:10px;align-items:center;min-width:0;padding:8px 11px;border:1px solid rgba(255,255,255,.085);border-radius:15px;background:linear-gradient(150deg,rgba(29,32,40,.44),rgba(15,17,22,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.055);overflow:hidden;backdrop-filter:blur(11px)}
.cx-supporter-card::after{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(var(--cx-rank-cyan),transparent);opacity:.5}
.cx-supporter-card.is-podium{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:168px;padding:11px 14px 9px}
.cx-supporter-card.is-podium .cx-supporter-position{position:absolute;left:11px;top:11px}
.cx-supporter-card.is-podium .cx-rank-portrait{width:74px;height:74px}
.cx-supporter-card.rank-1 .cx-rank-portrait{width:88px;height:88px;border-color:var(--cx-rank-gold);box-shadow:0 0 28px rgba(244,211,124,.32)}
.cx-supporter-card.rank-1::before{content:"♛";position:absolute;top:0;left:50%;translate:-50% 0;color:var(--cx-rank-gold);font-size:2rem;filter:drop-shadow(0 0 11px rgba(244,211,124,.65));animation:cxCrownHover 3s ease-in-out infinite}
.cx-supporter-position{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(244,211,124,.08);border:1px solid rgba(244,211,124,.2);color:var(--cx-rank-gold);font:900 .72rem/1 Impact,Arial,sans-serif}
.cx-rank-portrait{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;overflow:hidden;border:2px solid rgba(105,229,255,.36);border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(105,229,255,.14),#0f1116 70%);color:var(--cx-rank-gold);font-weight:900}
.cx-rank-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.cx-rank-portrait.is-empty{border-style:dashed;color:#6d7280}
.cx-supporter-copy{position:relative;z-index:1;display:grid;gap:5px;min-width:0}
.cx-supporter-copy>b{overflow:hidden;text-overflow:ellipsis;color:#f7f2e9;font-size:.92rem}
.cx-supporter-card.rank-1 .cx-supporter-copy>b{color:#ffe1a5;font-size:1.1rem}
.cx-supporter-copy>i{font-size:.7rem;color:#d3ae67;line-height:1.35}
.cx-supporter-copy>small{color:#858b98;font-size:.7rem;line-height:1.4}
.cx-supporter-meta{display:flex;justify-content:inherit;gap:5px;flex-wrap:wrap;margin-top:3px}
.cx-supporter-meta span{padding:4px 7px;border-radius:999px;font-size:.59rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.cx-rank-chip{border:1px solid rgba(244,211,124,.28);background:rgba(244,211,124,.08);color:var(--cx-rank-gold)}
.cx-founder-chip{border:1px solid rgba(255,85,61,.3);background:rgba(255,85,61,.08);color:#ff8e78}
.cx-chakra-chip{border:1px solid rgba(255,174,82,.3);background:rgba(255,174,82,.08);color:#ffc079}
.cx-ranking-list{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,minmax(57px,1fr));gap:6px;min-height:0}
.cx-ranking-list .cx-supporter-card{grid-template-columns:34px 44px minmax(0,1fr);gap:8px;padding:6px 9px}
.cx-ranking-list .cx-rank-portrait{width:44px;height:44px}
.cx-ranking-list .cx-supporter-copy{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;row-gap:1px;align-items:center}
.cx-ranking-list .cx-supporter-copy>b{grid-column:1;grid-row:1;white-space:nowrap}
.cx-ranking-list .cx-supporter-copy>i,.cx-ranking-list .cx-supporter-copy>small{grid-column:1;grid-row:2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cx-ranking-list .cx-supporter-meta{grid-column:2;grid-row:1/3;align-self:center;justify-content:flex-end;margin:0}
.cx-ranking-list .cx-supporter-meta span{padding:3px 6px;font-size:.54rem}
.cx-ranking-list .cx-supporter-card:nth-child(7){grid-column:1/-1}
.cx-supporter-card.is-vacant{opacity:.63;border-style:dashed}
.cx-ranking-footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;align-items:center;margin:0;padding-top:10px;border-top:1px solid rgba(244,211,124,.14)}
.cx-ranking-footer p{margin:0;color:#858b98;font-size:.71rem;max-width:68ch}
.cx-ranking-wall-link{flex:0 0 auto;padding:10px 14px;border:1px solid rgba(244,211,124,.35);border-radius:12px;background:rgba(244,211,124,.07);color:var(--cx-rank-gold);font-weight:900;text-decoration:none;font-size:.76rem;transition:.2s ease}
.cx-ranking-wall-link:hover{transform:translateY(-2px);background:rgba(244,211,124,.12);box-shadow:0 0 22px rgba(244,211,124,.1)}

/* Rodapé global. */
.cx-global-footer{position:relative;overflow:hidden;margin-top:36px;border-top:1px solid rgba(244,211,124,.16);background:linear-gradient(160deg,#111319,#0d0f13);color:#f5f1e8}
.cx-global-footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 0,rgba(255,85,61,.09),transparent 28%),radial-gradient(circle at 90% 100%,rgba(244,211,124,.07),transparent 28%)}
.cx-footer-shell{position:relative;z-index:1;width:min(1640px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:38px;align-items:end;padding:42px 0 34px}
.cx-footer-left{display:grid;gap:10px}
.cx-footer-brand{font-weight:950;text-transform:uppercase;letter-spacing:.08em}.cx-footer-brand b{color:var(--cx-rank-gold)}
.cx-footer-manifesto{max-width:62ch;margin:0;color:#aeb3bf;font-size:.82rem;line-height:1.65}
.cx-footer-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px}
.cx-footer-links a{position:relative;color:var(--cx-rank-gold);font-size:.78rem;font-weight:900;text-decoration:none}
.cx-footer-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:linear-gradient(90deg,var(--cx-rank-red),var(--cx-rank-gold));transition:right .25s ease}
.cx-footer-links a:hover::after{right:0}
.cx-footer-disclaimer{color:#666d7a;font-size:.66rem}
.cx-creators{display:grid;justify-self:end;justify-items:end;text-align:right}
.cx-created-label{color:#777e8c;font-size:.61rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em}
.cx-creator-row{display:flex;gap:16px;margin-top:5px}
.cx-creator{display:grid;justify-items:end}
.cx-creator-server{color:#b9a069;font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.cx-creator-name{font:900 1.3rem Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;letter-spacing:.04em;color:var(--cx-rank-gold);-webkit-text-stroke:.65px #563817;paint-order:stroke fill;text-shadow:0 1px 0 #35220d,0 3px 7px rgba(0,0,0,.72),0 0 16px rgba(244,211,124,.22);animation:cxSignatureGlow 4s ease-in-out infinite}
.cx-creator:nth-child(2) .cx-creator-name{animation-delay:-2s}

@keyframes cxRailScan{0%,68%{translate:-120% 0}84%,100%{translate:120% 0}}
@keyframes cxCrownHover{0%,100%{translate:-50% 0;rotate:-2deg}50%{translate:-50% -4px;rotate:2deg}}
@keyframes cxPodiumAura{0%,100%{opacity:.55;scale:.92}50%{opacity:1;scale:1.08}}
@keyframes cxFlameDance{0%{scale:.9 1;rotate:-2deg}100%{scale:1.08 .94;rotate:2deg}}
@keyframes cxFlameCore{0%{translate:0 2px;scale:.86}100%{translate:0 -2px;scale:1.05}}
@keyframes cxBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes cxSignatureGlow{0%,100%{color:#d9af52;text-shadow:0 1px 0 #35220d,0 3px 7px rgba(0,0,0,.72),0 0 10px rgba(244,211,124,.16)}50%{color:#ffe7a5;text-shadow:0 1px 0 #35220d,0 3px 8px rgba(0,0,0,.78),0 0 22px rgba(244,211,124,.38)}}

@media (max-height:760px) and (min-width:761px){
  .cx-ranking-dialog{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}
  .cx-ranking-shell{gap:6px;padding:12px 20px 10px}
  .cx-ranking-close{right:12px;top:12px;width:36px;height:36px}
  .cx-ranking-kicker{font-size:.58rem}.cx-ranking-header h2{margin:3px 0;font-size:2.4rem}.cx-ranking-header p{font-size:.75rem;line-height:1.3}
  .cx-demo-chip{margin-top:4px;padding:3px 7px}
  .cx-ranking-podium .cx-supporter-card{min-height:142px;padding:8px 10px}
  .cx-ranking-podium .cx-supporter-card .cx-rank-portrait{width:60px;height:60px}
  .cx-ranking-podium .cx-supporter-card.rank-1 .cx-rank-portrait{width:70px;height:70px}
  .cx-supporter-card{grid-template-columns:30px 42px minmax(0,1fr);gap:8px;padding:5px 8px}
  .cx-supporter-card .cx-rank-portrait{width:42px;height:42px}.cx-supporter-position{width:29px;height:29px}
  .cx-supporter-copy{gap:2px}.cx-supporter-copy>i{display:none}.cx-supporter-meta{margin-top:0}
  .cx-ranking-footer{padding-top:5px}.cx-ranking-footer p{font-size:.62rem}.cx-ranking-wall-link{padding:7px 10px}
}

@media (max-width:980px){
  .cx-top3-rail{right:8px}
  .cx-top3-open{width:188px}
  .cx-top3-label small{font-size:.48rem}
  .cx-ranking-shell{padding:28px 22px}
}
@media (max-width:760px){
  body{padding-bottom:224px}
  .cx-top3-rail{left:50%;right:auto;top:auto;bottom:9px;translate:-50% 0}
  .cx-top3-open{width:min(230px,calc(100vw - 24px));padding:10px 12px 9px;border-radius:22px}
  .cx-top3-podium{min-height:132px}.cx-top3-member .cx-rank-portrait{width:46px;height:46px}.cx-top3-member.rank-1 .cx-rank-portrait{width:58px;height:58px}
  .cx-top3-flame{width:52px;height:62px}.cx-top3-member.rank-2 .cx-top3-flame,.cx-top3-member.rank-3 .cx-top3-flame{width:42px;height:50px}
  .cx-ranking-dialog{width:calc(100vw - 16px);height:auto;max-height:calc(100dvh - 16px)}
  .cx-ranking-shell{display:block;height:auto;max-height:calc(100dvh - 16px);overflow:auto;padding:28px 22px}
  .cx-ranking-podium{grid-template-columns:1fr}.cx-ranking-podium .cx-supporter-card{order:initial;min-height:auto;grid-template-columns:42px 76px minmax(0,1fr);justify-items:stretch;text-align:left;padding:14px}
  .cx-ranking-podium .cx-supporter-card .cx-supporter-position{position:static}
  .cx-ranking-podium .cx-supporter-card .cx-rank-portrait,.cx-ranking-podium .cx-supporter-card.rank-1 .cx-rank-portrait{width:76px;height:76px}
  .cx-supporter-card.rank-1::before{display:none}
  .cx-ranking-list{grid-template-columns:1fr}
  .cx-ranking-footer{align-items:flex-start;flex-direction:column}
  .cx-footer-shell{grid-template-columns:1fr;align-items:start}
  .cx-creators{justify-items:start;text-align:left}
  .cx-creator{justify-items:start}
}
@media (max-width:470px){
  .cx-ranking-shell{padding:24px 14px}
  .cx-ranking-header h2{font-size:2.45rem}
  .cx-supporter-card,.cx-ranking-podium .cx-supporter-card{grid-template-columns:34px 58px minmax(0,1fr);gap:9px;padding:11px}
  .cx-ranking-podium .cx-supporter-card .cx-rank-portrait,.cx-ranking-podium .cx-supporter-card.rank-1 .cx-rank-portrait,.cx-supporter-card .cx-rank-portrait{width:58px;height:58px}
  .cx-supporter-position{width:32px;height:32px}
  .cx-creator-row{gap:10px}.cx-creator-name{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .cx-top3-open::before,.cx-top3-open::after,.cx-top3-crown,.cx-top3-flame,.cx-top3-flame::after,.cx-supporter-card.rank-1::before,.cx-creator-name{animation:none!important}
  .cx-top3-open,.cx-ranking-close,.cx-ranking-wall-link,.cx-footer-links a::after{transition:none!important}
}

/* ─── Top 3: não pode roubar o clique dos controles ──────────────────────────────────────
   Auditoria 05: o trilho é `fixed` com 210px encostado à direita. Em telas de 1280 a 1500 ele
   passa por cima da coluna de controles do Simulador e do Atlas — o usuário tenta clicar numa
   estrela e vai parar no ranking.

   A correção não remove o Top 3 (é decisão de produto do dono) nem esconde em mobile (lá ele já
   vai para o rodapé). Entre 768px e 1500px ele recolhe para uma aba estreita, que continua
   clicável e continua anunciando o Top 3, mas ocupa 44px em vez de 210px. Acima de 1500px, onde
   sobra espaço, ele volta ao formato completo.

   O botão de recolher existe em qualquer largura: quem quiser o painel fora do caminho decide. */

@media (min-width: 768px) and (max-width: 1500px) {
  body .cx-top3-rail{ right: 6px }
  /* Só o rótulo permanece; o pódio some para liberar a faixa lateral. */
  body .cx-top3-rail:not(.is-expandido) .cx-top3-open{
    width: 44px; padding: 14px 6px; border-radius: 16px;
    writing-mode: vertical-rl; text-orientation: mixed;
  }
  body .cx-top3-rail:not(.is-expandido) .cx-top3-podium{ display: none }
  body .cx-top3-rail:not(.is-expandido) .cx-top3-label{ margin: 0; gap: 4px }
  body .cx-top3-rail:not(.is-expandido) .cx-top3-label::before,
  body .cx-top3-rail:not(.is-expandido) .cx-top3-label::after{ display: none }
  body .cx-top3-rail:not(.is-expandido) .cx-top3-label b{ font-size: .8rem; letter-spacing: .12em }
  body .cx-top3-rail:not(.is-expandido) .cx-top3-label small{ display: none }
  body .cx-top3-rail:not(.is-expandido) .cx-top3-open:hover{ transform: translateX(-3px) }
}

/* Recolhido pelo usuário: vira uma aba fina, em qualquer largura. */
body .cx-top3-rail.is-recolhido .cx-top3-open{
  width: 34px; padding: 12px 4px; border-radius: 14px;
  writing-mode: vertical-rl; text-orientation: mixed;
}
body .cx-top3-rail.is-recolhido .cx-top3-podium,
body .cx-top3-rail.is-recolhido .cx-top3-label small,
body .cx-top3-rail.is-recolhido .cx-top3-label::before,
body .cx-top3-rail.is-recolhido .cx-top3-label::after{ display: none }
body .cx-top3-rail.is-recolhido .cx-top3-label b{ font-size: .72rem }

body .cx-top3-toggle{
  position: absolute; top: -9px; right: -9px; z-index: 4;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(244,211,124,.4); background: rgba(14,15,18,.92);
  color: var(--cx-rank-gold, #f4d37c); font-size: .78rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
body .cx-top3-toggle:hover{ background: rgba(30,28,24,.96); transform: scale(1.1) }
body .cx-top3-toggle:focus-visible{ outline: 2px solid var(--cx-rank-gold, #f4d37c); outline-offset: 2px }

/* O trilho não captura clique fora da própria caixa: o wrapper é transparente a ponteiro e só
   os controles reais recebem. Sem isso, a área do drop-shadow engolia cliques vizinhos. */
body .cx-top3-rail{ pointer-events: none }
body .cx-top3-open,
body .cx-top3-toggle{ pointer-events: auto }

@media (prefers-reduced-motion: reduce) {
  body .cx-top3-open, body .cx-top3-toggle{ transition: none }
  body .cx-top3-open:hover{ transform: none }
}
