/* UCHIHA CUP FINAL THEME — visual override only */
:root {
  --rose: #ff263f;
  --rose-deep: #7b0713;
  --uchiha-red: #ff263f;
  --uchiha-red-2: #b50d21;
  --uchiha-red-3: #5e050c;
  --uchiha-gold: #ffcc66;
  --ink: #030204;
  --panel: #0d0608;
  --paper: #f8f4f4;
  --muted: #9f8c8e;
  --line: rgba(255, 38, 63, .24);
}

html,
body {
  background: #030204;
}

.overlay {
  background:
    radial-gradient(circle at 16% 24%, rgba(255, 38, 63, .18), transparent 24%),
    radial-gradient(circle at 84% 72%, rgba(255, 38, 63, .13), transparent 28%),
    linear-gradient(135deg, #030204 0%, #0b0507 44%, #16070a 63%, #030204 100%);
}

.overlay::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  opacity: .16;
  background:
    radial-gradient(circle at 12% 16%, transparent 0 38px, rgba(255,38,63,.85) 39px 43px, transparent 44px 86px, rgba(255,38,63,.58) 87px 91px, transparent 92px),
    radial-gradient(circle at 82% 78%, transparent 0 58px, rgba(255,38,63,.70) 59px 64px, transparent 65px 132px, rgba(255,38,63,.36) 133px 138px, transparent 139px),
    repeating-linear-gradient(115deg, transparent 0 72px, rgba(255,38,63,.09) 73px 75px, transparent 76px 148px);
  filter: blur(.2px);
}

.texture {
  opacity: .28;
  background-image:
    linear-gradient(115deg, transparent 0 46%, rgba(255, 38, 63, .038) 48% 50%, transparent 52%),
    radial-gradient(rgba(255, 38, 63, .16) .6px, transparent .7px);
}

.ambient-a {
  background: #d51025;
}

.ambient-b {
  background: #5d0610;
}

.scene::before,
.control-panel::before {
  background: linear-gradient(180deg, transparent, var(--uchiha-red) 24% 76%, transparent);
  box-shadow: 0 0 24px rgba(255,38,63,.55);
}

.kicker,
.brand-small,
.scene-header h2 em,
.start-status b,
.champion-identity span,
.upload em,
.links-card a b,
.rank-stat.points,
.mvp-copy small {
  color: var(--uchiha-red);
}

.scene-header,
.scene-footer,
.ranking-block,
.panel-card,
.control-head {
  border-color: rgba(255, 38, 63, .24);
}

.scene-header h2,
.brand-lockup h1,
.champion-copy h2,
.thumb-copy h2,
.rank-pos,
.rank-stat,
.mvp-copy h3,
.podium-card h3 {
  text-shadow: 0 10px 28px rgba(0,0,0,.62), 0 0 18px rgba(255,38,63,.08);
}

.brand-lockup strong {
  -webkit-text-stroke-color: #fff;
}

.round-badge,
.upload > strong,
.view-buttons button.active,
.primary,
.champion-label,
.thumb-copy > span {
  background: linear-gradient(135deg, var(--uchiha-red), var(--uchiha-red-2) 58%, var(--uchiha-red-3));
  box-shadow: 0 12px 34px rgba(255,38,63,.22);
}

.round-badge {
  border-color: rgba(255, 38, 63, .62);
}

.ranking-head {
  background: linear-gradient(90deg, rgba(255,38,63,.22), rgba(255,255,255,.026));
  border-bottom-color: rgba(255,38,63,.48);
  color: #e9d6d8;
}

.ranking-block {
  background:
    linear-gradient(180deg, rgba(255, 38, 63, .035), transparent 34%),
    rgba(4, 3, 5, .58);
  box-shadow: 0 24px 76px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.02);
}

.ranking-list .rank-row {
  background: rgba(255,255,255,.026);
  box-shadow: inset 4px 0 rgba(255,38,63,.30);
}

.ranking-list .rank-row:nth-child(even) {
  background: rgba(255,38,63,.045);
}

.ranking-list .rank-row.top {
  background: linear-gradient(90deg, rgba(255,38,63,.34), rgba(255,38,63,.08) 72%, rgba(255,255,255,.025));
  box-shadow: inset 4px 0 var(--uchiha-red), inset 0 0 38px rgba(255,38,63,.12);
}

.rank-trend.up {
  color: #62ff9d;
}

.rank-trend.down {
  color: #ff7a7a;
}

.rank-trend.same {
  color: #77696c;
}

.logo-shell {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,38,63,.18), rgba(0,0,0,.38) 68%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,38,63,.055));
  border-color: rgba(255,38,63,.28);
  box-shadow: inset 0 0 22px rgba(255,38,63,.05), 0 10px 24px rgba(0,0,0,.38);
}

.logo-shell img,
.podium-logo img,
.team-ribbon img,
.thumb-logos img {
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.65));
}

.rank-stat.points {
  background: rgba(255,38,63,.075);
  color: #ff4058;
}

.mvp-card,
.mvp-card:first-child {
  border-left-color: rgba(255,38,63,.58);
  background: linear-gradient(90deg, rgba(255,255,255,.065), rgba(255,38,63,.04), rgba(255,255,255,.018));
}

.mvp-card:first-child {
  border-left-color: var(--uchiha-red);
  background: linear-gradient(90deg, rgba(255,38,63,.34), rgba(255,38,63,.08) 55%, rgba(255,255,255,.02));
  box-shadow: 0 18px 50px rgba(255,38,63,.12);
}

.champion-rays {
  background: repeating-conic-gradient(from 10deg, rgba(255,38,63,.12) 0 3deg, transparent 3deg 16deg);
}

.champion-podium,
.podium-card {
  border-color: rgba(255,38,63,.32);
}

.podium-card.place-1 {
  background:
    radial-gradient(circle at 50% 32%, rgba(255,204,102,.26), transparent 42%),
    linear-gradient(145deg, rgba(255,38,63,.24), rgba(7,4,6,.82));
}

.podium-rank b,
.podium-stats b {
  color: #fff;
}

.control-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,38,63,.12), transparent 32%),
    linear-gradient(180deg, #0b0507, #050304);
}

.control-head {
  background: rgba(7, 4, 6, .95);
}

.panel-card {
  background:
    linear-gradient(135deg, rgba(255,38,63,.055), transparent 42%),
    #10080a;
}

.upload {
  background: linear-gradient(90deg, rgba(255,38,63,.11), rgba(255,255,255,.025));
}

.upload:hover {
  background: linear-gradient(90deg, rgba(255,38,63,.22), rgba(255,255,255,.04));
}

.instagram-download {
  background: linear-gradient(135deg, var(--uchiha-red), var(--uchiha-red-2));
}

body.instagram-mode .overlay {
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 38, 63, .25), transparent 28%),
    radial-gradient(circle at 8% 88%, rgba(255, 38, 63, .16), transparent 26%),
    linear-gradient(145deg, #030204 0%, #16070a 50%, #030204 100%);
}

/* Real-image background pass: no artificial diagonal-line/template feel. */
.overlay {
  background:
    linear-gradient(90deg, rgba(3,2,4,.86), rgba(3,2,4,.58) 46%, rgba(3,2,4,.82)),
    radial-gradient(circle at 18% 50%, rgba(255,38,63,.32), transparent 38%),
    url("assets/uchiha-final-bg.png") center / cover no-repeat;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,38,63,.16), transparent 24%),
    radial-gradient(circle at 84% 72%, rgba(255,38,63,.11), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.44));
  filter: none;
}

.texture,
.overlay .texture {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

body.instagram-mode .overlay {
  background:
    linear-gradient(90deg, rgba(3,2,4,.90), rgba(3,2,4,.62) 48%, rgba(3,2,4,.88)),
    radial-gradient(circle at 20% 48%, rgba(255,38,63,.30), transparent 40%),
    url("assets/uchiha-final-bg.png") center / cover no-repeat;
}

/* Final Uchiha identity pass — supplied cinematic background, bigger broadcast table. */
.overlay,
body.instagram-mode .overlay {
  background:
    url("assets/uchiha-final-bg.png") center / cover no-repeat !important;
}

body {
  background: #030204 url("assets/uchiha-final-bg.png") center / cover no-repeat fixed !important;
}

.overlay::after {
  opacity: 0 !important;
  background: none !important;
}

.ranking-scene {
  padding: 42px 42px 40px !important;
}

.ranking-scene .scene-header {
  height: 94px !important;
  border-bottom: 2px solid rgba(255,38,63,.62);
}

.ranking-scene .scene-header h2 {
  font-size: 66px !important;
}

.ranking-scene .kicker {
  font-size: 16px !important;
  color: #ff4058 !important;
}

.ranking-columns {
  gap: 18px !important;
  margin-top: 16px !important;
}

.ranking-block {
  border: 2px solid rgba(255,38,63,.46) !important;
  background: rgba(4,2,4,.36) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.24), inset 0 0 24px rgba(255,38,63,.05) !important;
  backdrop-filter: blur(1px);
}

.ranking-head {
  height: 52px !important;
  grid-template-columns: 78px minmax(0,1fr) 76px 76px 100px !important;
  background: linear-gradient(90deg, rgba(255,38,63,.62), rgba(95,4,14,.54)) !important;
  color: #fff !important;
  border-bottom: 2px solid rgba(255,38,63,.8) !important;
  font-size: 14px !important;
}

.ranking-list {
  grid-template-rows: repeat(6, calc(125px * var(--row-scale))) !important;
}

.ranking-list .rank-row {
  grid-template-columns: 78px minmax(0,1fr) 76px 76px 100px !important;
  padding: 0 14px !important;
  background: rgba(8,4,6,.46) !important;
  box-shadow: inset 5px 0 rgba(255,38,63,.44) !important;
  border-bottom: 1px solid rgba(255,38,63,.25) !important;
}

.ranking-list .rank-row:nth-child(even) {
  background: rgba(38,5,10,.50) !important;
}

.ranking-list .rank-row.top {
  background: linear-gradient(90deg, rgba(255,38,63,.30), rgba(54,4,8,.46) 76%) !important;
  box-shadow: inset 6px 0 #ff263f, inset 0 0 46px rgba(255,38,63,.18) !important;
}

.ranking-list .rank-pos {
  font-size: calc(48px * var(--text-scale)) !important;
  color: #fff !important;
  text-shadow: 0 5px 14px #000 !important;
}

.ranking-list .logo-shell {
  width: calc(88px * var(--logo-scale)) !important;
  height: calc(88px * var(--logo-scale)) !important;
  max-width: 104px !important;
  max-height: 104px !important;
  border: 2px solid rgba(255,38,63,.36) !important;
  background: rgba(0,0,0,.34) !important;
}

.ranking-list .team-text b {
  font-size: calc(28px * var(--text-scale)) !important;
  color: #fff !important;
  letter-spacing: .02em !important;
}

.team-flag {
  width: 42px !important;
  height: 28px !important;
}

.ranking-list .rank-stat {
  height: 60px !important;
  font-size: calc(36px * var(--text-scale)) !important;
  color: #fff !important;
  border-left: 1px solid rgba(255,38,63,.34) !important;
}

.ranking-list .rank-stat.points {
  font-size: calc(44px * var(--text-scale)) !important;
  color: #ff4058 !important;
  background: rgba(255,38,63,.12) !important;
}

.round-badge {
  width: 178px !important;
  height: 86px !important;
  background: rgba(5, 2, 4, .88) !important;
  border: 2px solid rgba(255, 38, 63, .78) !important;
  box-shadow: 0 0 34px rgba(255, 38, 63, .18), inset 0 0 24px rgba(255, 38, 63, .10) !important;
}

.round-badge small,
.round-badge span {
  color: #fff !important;
  opacity: .95 !important;
}

.round-badge b {
  color: #ff4058 !important;
  text-shadow: 0 4px 14px #000, 0 0 18px rgba(255, 38, 63, .38) !important;
}

.scene-footer {
  color: #d8c7c9 !important;
}

.mvp-card,
.podium-card {
  background: rgba(6,3,5,.50) !important;
  border-color: rgba(255,38,63,.45) !important;
}

.mvp-card:first-child,
.podium-card.place-1 {
  background: linear-gradient(145deg, rgba(255,38,63,.24), rgba(6,3,5,.52)) !important;
}

.champion-copy h2 {
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 8px 26px #000, 0 0 22px rgba(255,38,63,.24) !important;
}

.podium-logo {
  background: radial-gradient(circle, rgba(255,38,63,.20), rgba(0,0,0,.58)) !important;
  border: 2px solid rgba(255,38,63,.42) !important;
}

.eligibility-trophy {
  display: inline-grid;
  place-items: center;
  margin-left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 204, 102, .35), rgba(255, 38, 63, .18));
  border: 1px solid rgba(255, 204, 102, .75);
  box-shadow: 0 0 18px rgba(255, 204, 102, .30), 0 0 28px rgba(255, 38, 63, .16);
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}

.ranking-list .rank-row.eligible {
  box-shadow: inset 5px 0 rgba(255, 204, 102, .74), inset 0 0 30px rgba(255, 204, 102, .06) !important;
}

.ranking-list .rank-row.champion {
  border-color: rgba(255, 204, 102, .78) !important;
  background: linear-gradient(90deg, rgba(255, 204, 102, .22), rgba(255, 38, 63, .18), rgba(8, 4, 6, .54)) !important;
  box-shadow: inset 7px 0 #ffcc66, inset 0 0 54px rgba(255, 204, 102, .18), 0 0 34px rgba(255, 38, 63, .16) !important;
}

.ranking-list .rank-row.champion .rank-pos,
.ranking-list .rank-row.champion .rank-stat.points {
  color: #ffcc66 !important;
}

/*
 * FINAL BROADCAST PASS
 * Mantém a arte fornecida totalmente visível: sem gradiente, vinheta ou
 * textura por cima. Os dados usam placas independentes e translúcidas.
 */
.overlay,
body.instagram-mode .overlay,
body {
  background-image: url("assets/uchiha-final-bg.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.overlay::after,
.ambient,
.texture,
.champion-rays {
  display: none !important;
}

body:not(.instagram-mode) .scene::before {
  width: 6px;
  background: #ff263f;
  box-shadow: 0 0 22px rgba(255, 38, 63, .48);
}

/* TABELA 16:9 */
body:not(.instagram-mode) .ranking-scene {
  padding: 38px 46px 34px !important;
}

body:not(.instagram-mode) .ranking-scene .scene-header {
  height: 102px !important;
  align-items: center;
  border-bottom: 1px solid rgba(255, 38, 63, .48) !important;
}

body:not(.instagram-mode) .ranking-scene .scene-header h2 {
  font-size: 64px !important;
  line-height: .9;
}

body:not(.instagram-mode) .ranking-columns {
  gap: 22px !important;
  margin-top: 14px !important;
}

body:not(.instagram-mode) .ranking-block {
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:not(.instagram-mode) .ranking-head {
  height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 38, 63, .68) !important;
  border-bottom-width: 2px !important;
  background: rgba(93, 5, 16, .78) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

body:not(.instagram-mode) .ranking-list {
  grid-template-rows: repeat(6, calc(121px * var(--row-scale))) !important;
  gap: 6px;
  padding-top: 6px;
}

body:not(.instagram-mode) .ranking-list .rank-row,
body:not(.instagram-mode) .ranking-list .rank-row:nth-child(even) {
  padding: 0 14px !important;
  border: 1px solid rgba(255, 38, 63, .22) !important;
  border-left: 5px solid rgba(255, 38, 63, .58) !important;
  background: rgba(3, 2, 4, .68) !important;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .22) !important;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}

body:not(.instagram-mode) .ranking-list .rank-row:nth-child(even) {
  background: rgba(12, 4, 7, .70) !important;
}

body:not(.instagram-mode) .ranking-list .rank-row.top {
  border-color: rgba(255, 38, 63, .70) !important;
  border-left-color: #ff263f !important;
  background: rgba(76, 5, 15, .76) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 0 28px rgba(255, 38, 63, .08) !important;
}

body:not(.instagram-mode) .ranking-list .logo-shell {
  border: 1px solid rgba(255, 38, 63, .30) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, .34) !important;
  box-shadow: inset 0 0 20px rgba(255, 38, 63, .04), 0 8px 16px rgba(0, 0, 0, .28) !important;
}

body:not(.instagram-mode) .ranking-list .rank-stat {
  border-left-color: rgba(255, 255, 255, .10) !important;
}

body:not(.instagram-mode) .ranking-list .rank-stat.points {
  background: transparent !important;
  color: #ff4a5f !important;
}

body.instagram-mode .ranking-list .rank-stat.points {
  background: transparent !important;
}

/* Fundo cinematográfico suave no OBS, processado pela GPU. */
body:not(.instagram-mode) .overlay {
  isolation: isolate;
  background-color: #030204 !important;
  background-image: none !important;
}

body:not(.instagram-mode) .overlay::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -4%;
  display: block;
  pointer-events: none;
  background: url("assets/uchiha-final-bg.png") center / cover no-repeat;
  transform: translate3d(-10px, 0, 0) scale(1.015);
  transform-origin: center;
  will-change: transform;
  animation: uchiha-cinematic-drift 20s ease-in-out infinite alternate;
}

body:not(.instagram-mode) .scene {
  z-index: 1;
}

@keyframes uchiha-cinematic-drift {
  0% {
    transform: translate3d(-12px, 4px, 0) scale(1.015);
  }
  100% {
    transform: translate3d(12px, -5px, 0) scale(1.045);
  }
}

/* Mais fundo aparente, mantendo contraste de transmissão. */
body:not(.instagram-mode) .ranking-head {
  background: rgba(86, 4, 14, .64) !important;
}

body:not(.instagram-mode) .ranking-list .rank-row,
body:not(.instagram-mode) .ranking-list .rank-row:nth-child(even) {
  background: rgba(3, 2, 4, .48) !important;
}

body:not(.instagram-mode) .ranking-list .rank-row:nth-child(even) {
  background: rgba(12, 4, 7, .52) !important;
}

body:not(.instagram-mode) .ranking-list .rank-row.top {
  background: rgba(74, 5, 15, .63) !important;
}

body:not(.instagram-mode) .ranking-list .logo-shell,
body:not(.instagram-mode) .mvp-card .logo-shell,
body:not(.instagram-mode) .mvp-card:first-child .logo-shell {
  background: rgba(0, 0, 0, .24) !important;
}

body:not(.instagram-mode) .mvp-card,
body:not(.instagram-mode) .mvp-card:first-child {
  background: rgba(3, 2, 4, .50) !important;
}

body:not(.instagram-mode) .mvp-card:first-child {
  background: rgba(76, 5, 15, .62) !important;
}

body:not(.instagram-mode) .podium-card {
  background: rgba(3, 2, 4, .44) !important;
}

body:not(.instagram-mode) .podium-card.place-1 {
  background: rgba(64, 5, 13, .54) !important;
}

/* Pedido final: quadro menor, contador solto e movimento mais perceptível. */
body:not(.instagram-mode) .ranking-scene {
  padding: 68px 110px 64px !important;
}

body:not(.instagram-mode) .ranking-scene .scene-header {
  height: 90px !important;
}

body:not(.instagram-mode) .ranking-scene .scene-header h2 {
  font-size: 56px !important;
}

body:not(.instagram-mode) .ranking-columns {
  gap: 28px !important;
  margin-top: 14px !important;
}

body:not(.instagram-mode) .ranking-list {
  grid-template-rows: repeat(6, calc(108px * var(--row-scale))) !important;
}

body:not(.instagram-mode) .ranking-list .logo-shell {
  max-width: 88px !important;
  max-height: 88px !important;
}

body:not(.instagram-mode) .ranking-scene .round-badge {
  width: 176px !important;
  height: 70px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
}

body:not(.instagram-mode) .ranking-scene .round-badge b {
  text-shadow: 0 4px 14px #000, 0 0 20px rgba(255, 38, 63, .42) !important;
}

body:not(.instagram-mode) .ranking-list .rank-stat.points,
body.instagram-mode .ranking-list .rank-stat.points {
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:not(.instagram-mode) .ranking-scene .scene-footer {
  right: 110px;
  bottom: 29px;
  left: 110px;
}

body:not(.instagram-mode) .overlay::before {
  inset: -8%;
  animation-duration: 16s;
}

@keyframes uchiha-cinematic-drift {
  0% {
    transform: translate3d(-38px, 14px, 0) scale(1.025);
  }
  100% {
    transform: translate3d(38px, -16px, 0) scale(1.095);
  }
}

/* Logos sem cartões: a marca fica solta sobre a transmissão. */
.ranking-list .logo-shell,
.mvp-card .logo-shell,
.podium-logo {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ranking-list .logo-shell img,
.mvp-card .logo-shell img,
.podium-logo img {
  width: 96% !important;
  height: 96% !important;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .72));
}

/* Especificidade final para o enquadramento menor pedido no OBS. */
body:not(.instagram-mode) #view-ranking {
  padding: 68px 110px 64px !important;
}

body:not(.instagram-mode) #view-ranking .ranking-columns {
  gap: 28px !important;
}

body:not(.instagram-mode) #view-ranking .ranking-list {
  grid-template-rows: repeat(6, calc(108px * var(--row-scale))) !important;
}

body:not(.instagram-mode) #view-ranking .ranking-list .logo-shell,
body:not(.instagram-mode) #view-mvp .mvp-card .logo-shell,
body:not(.instagram-mode) #view-champion .podium-logo,
body.instagram-mode .ranking-list .logo-shell,
body.instagram-mode .mvp-card .logo-shell,
body.instagram-mode .podium-logo {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Quadro compacto: mais área livre para o fundo e sem contador de quedas. */
body:not(.instagram-mode) #view-ranking {
  padding: 86px 160px 78px !important;
}

body:not(.instagram-mode) #view-ranking .scene-header {
  height: 82px !important;
}

body:not(.instagram-mode) #view-ranking .scene-header h2 {
  font-size: 52px !important;
}

body:not(.instagram-mode) #view-ranking .round-badge {
  display: none !important;
}

body:not(.instagram-mode) #view-ranking .ranking-columns {
  gap: 28px !important;
  margin-top: 12px !important;
}

body:not(.instagram-mode) #view-ranking .ranking-head {
  height: 44px !important;
}

body:not(.instagram-mode) #view-ranking .ranking-list {
  grid-template-rows: repeat(6, calc(96px * var(--row-scale))) !important;
  gap: 6px !important;
}

body:not(.instagram-mode) #view-ranking .ranking-list .logo-shell {
  width: calc(72px * var(--logo-scale)) !important;
  height: calc(72px * var(--logo-scale)) !important;
  max-width: 80px !important;
  max-height: 80px !important;
}

body:not(.instagram-mode) #view-ranking .ranking-list .rank-pos {
  font-size: calc(43px * var(--text-scale)) !important;
}

body:not(.instagram-mode) #view-ranking .ranking-list .team-text b {
  font-size: calc(27px * var(--text-scale)) !important;
}

body:not(.instagram-mode) #view-ranking .ranking-list .rank-stat {
  font-size: calc(34px * var(--text-scale)) !important;
}

body:not(.instagram-mode) #view-ranking .ranking-list .rank-stat.points {
  font-size: calc(39px * var(--text-scale)) !important;
}

body:not(.instagram-mode) #view-ranking .scene-footer {
  right: 160px;
  bottom: 44px;
  left: 160px;
}


body:not(.instagram-mode) .round-badge {
  background: rgba(4, 2, 4, .76) !important;
}

body:not(.instagram-mode) .ranking-scene .scene-footer {
  bottom: 21px;
  padding-top: 10px;
}

/* MVP 16:9 */
body:not(.instagram-mode) .mvp-card,
body:not(.instagram-mode) .mvp-card:first-child {
  border: 1px solid rgba(255, 38, 63, .24);
  border-left: 5px solid rgba(255, 38, 63, .55);
  background: rgba(3, 2, 4, .67) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

body:not(.instagram-mode) .mvp-card:first-child {
  border-color: rgba(255, 204, 102, .50);
  border-left-color: #ffcc66;
  background: rgba(78, 6, 16, .73) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .30), inset 0 0 32px rgba(255, 204, 102, .05);
}

body:not(.instagram-mode) .mvp-card:first-child .place {
  color: #ffcc66;
}

body:not(.instagram-mode) .mvp-card .logo-shell,
body:not(.instagram-mode) .mvp-card:first-child .logo-shell {
  border: 1px solid rgba(255, 38, 63, .30);
  background: rgba(0, 0, 0, .30);
  box-shadow: inset 0 0 22px rgba(255, 38, 63, .05);
}

/* TOP 3 / CAMPEÃ 16:9 */
body:not(.instagram-mode) .champion-scene {
  padding: 38px 66px 34px;
}

body:not(.instagram-mode) .champion-copy h2 {
  font-size: 94px !important;
  letter-spacing: .10em;
}

body:not(.instagram-mode) .champion-podium {
  height: 730px;
  gap: 22px;
  margin-top: 14px;
}

body:not(.instagram-mode) .podium-card {
  height: 590px;
  padding: 28px 30px 23px;
  border: 1px solid rgba(255, 255, 255, .17) !important;
  border-top: 5px solid #b8bec8 !important;
  background: rgba(3, 2, 4, .58) !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .34) !important;
}

body:not(.instagram-mode) .podium-card.place-1 {
  height: 700px;
  border-color: rgba(255, 204, 102, .45) !important;
  border-top-color: #ffcc66 !important;
  background: rgba(66, 5, 14, .64) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .38), inset 0 0 54px rgba(255, 204, 102, .06) !important;
}

body:not(.instagram-mode) .podium-card.place-3 {
  border-top-color: #c78360 !important;
}

body:not(.instagram-mode) .podium-logo,
body:not(.instagram-mode) .place-1 .podium-logo {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.instagram-mode) .podium-card.place-1 .podium-logo {
  width: 420px;
  height: 420px;
}

body:not(.instagram-mode) .podium-logo img {
  width: 96%;
  height: 96%;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .62)) drop-shadow(0 0 12px rgba(255, 255, 255, .06));
}

body:not(.instagram-mode) .podium-card.place-1 .podium-rank b,
body:not(.instagram-mode) .podium-card.place-1 .podium-label {
  color: #ffcc66;
}

body:not(.instagram-mode) .podium-card.place-2 .podium-label {
  color: #d8dee8;
}

body:not(.instagram-mode) .podium-card.place-3 .podium-label {
  color: #d89a75;
}

body:not(.instagram-mode) .podium-card.place-1 h3 {
  font-size: 70px;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .72), 0 0 16px rgba(255, 204, 102, .10);
}

body:not(.instagram-mode) .podium-stats {
  border-top-color: rgba(255, 255, 255, .16);
}

body:not(.instagram-mode) .podium-stats span {
  padding-top: 10px;
}

/* A versão vertical também preserva a arte original, sem placa contínua. */
body.instagram-mode .ranking-block {
  background: transparent !important;
  box-shadow: none !important;
}

body.instagram-mode .ranking-head {
  height: 42px !important;
  grid-template-columns: 92px minmax(0, 1fr) 76px 76px 92px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
}

body.instagram-mode .ranking-list {
  grid-template-rows: repeat(6, 83px) !important;
  gap: 0 !important;
  padding-top: 0 !important;
}

body.instagram-mode .ranking-list .rank-row,
body.instagram-mode .mvp-card,
body.instagram-mode .podium-card {
  background-color: rgba(3, 2, 4, .72) !important;
}

body.instagram-mode .ranking-list .rank-row {
  grid-template-columns: 92px minmax(0, 1fr) 76px 76px 92px !important;
  min-height: 83px !important;
  padding: 0 16px !important;
  clip-path: none !important;
}

/* Enquadramento final 16:9 — mais respiro para a arte Uchiha. */
body:not(.instagram-mode) .ranking-scene {
  padding: 52px 78px 52px !important;
}

body:not(.instagram-mode) .ranking-scene .scene-header {
  height: 94px !important;
}

body:not(.instagram-mode) .ranking-scene .scene-header h2 {
  font-size: 60px !important;
}

body:not(.instagram-mode) .ranking-columns {
  gap: 24px !important;
  margin-top: 14px !important;
}

body:not(.instagram-mode) .ranking-list {
  grid-template-rows: repeat(6, calc(116px * var(--row-scale))) !important;
}

body:not(.instagram-mode) .ranking-list .rank-row {
  padding-right: 12px !important;
  padding-left: 12px !important;
}

body:not(.instagram-mode) .ranking-list .logo-shell {
  max-width: 94px !important;
  max-height: 94px !important;
}

body:not(.instagram-mode) .ranking-scene .round-badge {
  width: 188px !important;
  height: 76px !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  padding: 9px 13px !important;
  column-gap: 13px;
}

body:not(.instagram-mode) .ranking-scene .round-badge b {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 38, 63, .46);
  font-size: 43px !important;
  line-height: 1;
  text-align: center !important;
}

body:not(.instagram-mode) .ranking-scene .round-badge small,
body:not(.instagram-mode) .ranking-scene .round-badge span {
  grid-column: 2 !important;
  margin: 0;
  font-size: 10px !important;
  line-height: 1;
  letter-spacing: .16em;
  text-align: left;
}

body:not(.instagram-mode) .ranking-scene .round-badge small {
  grid-row: 1 !important;
  align-self: end;
  padding-bottom: 3px;
}

body:not(.instagram-mode) .ranking-scene .round-badge span {
  grid-row: 2 !important;
  align-self: start;
  padding-top: 3px;
}

body:not(.instagram-mode) .ranking-scene .scene-footer {
  right: 78px;
  bottom: 25px;
  left: 78px;
}