/* Desafio Saga — the challenge page.
   Night-purple RPG board: gold is XP, purple and blue are the two sides of
   every duel, green is done. Pink marks the ONE next action
   and nothing else. The memorable piece is the theme card (sealed "?" before
   the tournament ends, the fused trio after). Everything else stays quiet. */

@font-face {
  font-family: 'DK Lemon';
  src: url('../fonts/dk-lemon.otf') format('opentype');
  font-display: swap;
}

:root {
  color-scheme: dark;
  --noite: #150A26;
  --noite-2: #1D0E35;
  --acai: #34124F;
  --acai-2: #4A1A6F;
  --uva: #A04FE8;
  --uva-2: #7A2FC0;
  --azul: #38A9FF;
  --azul-2: #1B7FD0;
  --banana: #FFD23F;
  --banana-2: #E0A800;
  --leite: #FFF4E2;
  --leite-2: #CDBCE3;
  --rosa: #FF2D6E;
  --rosa-2: #D11857;
  --verde: #3FDC8A;
  --verde-2: #1FA862;
  --gal: #C79BFF;          /* the crowd's stars (Lucas's are gold) */
  --borda: #0B0515;
  --estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E");
  --gutter: 16px;
  --barra: 68px;
  --f-disp: 'DK Lemon', 'Lilita One', 'Poppins', system-ui, sans-serif;
  --f-corpo: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* DK Lemon draws 1 like an I: every number uses Lilita One */
  --f-num: 'Lilita One', 'Poppins', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--noite);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(160, 79, 232, .32), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(56, 169, 255, .10), transparent 70%),
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 244, 226, .55) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, rgba(255, 244, 226, .45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 38%, rgba(255, 210, 63, .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 64%, rgba(255, 244, 226, .35) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 56% 82%, rgba(255, 244, 226, .4) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 90%, rgba(255, 210, 63, .35) 50%, transparent 51%);
  background-attachment: fixed;
  color: var(--leite);
  font-family: var(--f-corpo);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
.disp { font-family: var(--f-disp); font-weight: 400; letter-spacing: .01em; }
.num { font-family: var(--f-num); font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--banana); outline-offset: 3px; border-radius: 10px; }

/* ───────── the app column ───────── */
.app {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(var(--barra) + 28px + env(safe-area-inset-bottom));
}

/* ───────── header ───────── */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0 6px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marca__nome { font-family: var(--f-disp); font-size: 24px; line-height: 1; color: var(--leite); white-space: nowrap;
  text-shadow: 0 3px 0 var(--borda); }
.marca__num {
  font-family: var(--f-num); font-size: 15px; line-height: 1; color: var(--borda);
  background: var(--banana); border: 2.5px solid var(--borda); border-radius: 9px;
  padding: 4px 7px 3px; box-shadow: 0 3px 0 var(--borda); transform: rotate(-4deg);
}
.conta {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--acai); border: 2.5px solid var(--borda); border-radius: 999px;
  padding: 4px 12px 4px 4px; box-shadow: 0 3px 0 var(--borda);
  font-weight: 700; font-size: 14px;
}
.conta--sair { padding: 7px 14px; }
a.conta { text-decoration: none; color: var(--leite); }
.conta__nome { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* initials avatar (Discord avatars aren't stored; color comes from the name) */
.av {
  --c: var(--uva);
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c); border: 2px solid var(--borda);
  font-family: var(--f-disp); font-size: 15px; line-height: 1; color: var(--leite);
  text-shadow: 0 1.5px 0 var(--borda);
}
.av--g { width: 44px; height: 44px; font-size: 20px; border-width: 2.5px; }

/* ───────── the stage rail (always on top) ───────── */
.trilha { margin: 10px 0 4px; }
.trilha__nos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); position: relative;
}
.trilha__nos::before {
  content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 0;
  border-top: 3px dashed rgba(205, 188, 227, .28);
}
.no { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.no__marca {
  position: relative; z-index: 1;
  width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
  background: var(--noite-2); border: 3px solid var(--acai-2); color: var(--leite-2);
  transform: rotate(45deg);
}
.no__marca svg { width: 20px; height: 20px; transform: rotate(-45deg); }
.no__nome { font-size: 12.5px; font-weight: 700; color: rgba(205, 188, 227, .6); line-height: 1.15; }
.no--feito .no__marca { background: var(--verde-2); border-color: var(--borda); color: var(--leite); }
.no--feito .no__nome { color: var(--leite-2); }
.no--agora .no__marca {
  background: var(--uva); border-color: var(--borda); color: var(--leite);
  box-shadow: 0 0 0 5px rgba(160, 79, 232, .28), 0 0 24px rgba(160, 79, 232, .7);
}
.no--agora .no__nome { color: var(--leite); }
.no__dia { font-family: var(--f-num); font-size: 12.5px; line-height: 1; color: var(--banana); margin-top: -3px; }
.no--feito .no__dia { color: rgba(205, 188, 227, .5); }
.trilha__rotulo { margin: 16px 0 0; text-align: center; font-size: 14.5px; color: var(--leite-2); font-weight: 700; }

/* the stopwatch: the time left in boxes, ticking */
.crono { display: grid; justify-items: center; gap: 9px; margin-top: 18px; }
.crono__rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--leite); text-align: center; }
.crono__rotulo svg { flex: 0 0 auto; width: 18px; height: 18px; color: #ff9b5c; }
.crono__caixas { display: flex; justify-content: center; gap: 8px; }
.crono__caixa { display: grid; justify-items: center; min-width: 64px; padding: 9px 6px 6px;
  background: linear-gradient(180deg, var(--noite-2), #12081f); border: 3px solid var(--borda); border-radius: 14px;
  box-shadow: 0 4px 0 var(--borda), inset 0 2px 0 rgba(255, 244, 226, .07); }
.crono__caixa b { font-family: var(--f-num); font-weight: 400; font-size: 34px; line-height: 1; color: var(--banana);
  text-shadow: 0 3px 0 var(--borda); font-variant-numeric: tabular-nums; }
.crono__caixa small { font-size: 11.5px; font-weight: 700; color: var(--leite-2); margin-top: 3px; }
.crono--fogo .crono__caixa b { color: #ff9b5c; }
.crono--fogo .crono__caixa { border-color: #5a1f0c; }
@media (max-width: 370px) { .crono__caixa { min-width: 56px; } .crono__caixa b { font-size: 29px; } }

/* ───────── panels ───────── */
.painel { margin-top: 18px; }
.painel__titulo { font-family: var(--f-disp); font-size: 30px; line-height: 1.05; margin: 0 0 6px;
  text-shadow: 0 3px 0 var(--borda); text-wrap: balance; }
.painel__sub { color: var(--leite-2); margin: 0 0 16px; font-size: 15px; max-width: 46ch; }
.bloco {
  background: linear-gradient(180deg, rgba(74, 26, 111, .55), rgba(29, 14, 53, .92));
  border: 3px solid var(--borda); border-radius: 22px;
  box-shadow: 0 6px 0 var(--borda), inset 0 2px 0 rgba(255, 244, 226, .08);
  padding: 20px 18px;
}
.bloco + .bloco, .bloco + .grupo, .grupo + .bloco { margin-top: 18px; }
.secao { font-family: var(--f-disp); font-size: 21px; line-height: 1.1; margin: 26px 0 10px; text-shadow: 0 2px 0 var(--borda); }
.secao:first-child { margin-top: 4px; }
.nota { color: var(--leite-2); font-size: 13.5px; margin: 10px 0 0; }
.centro { text-align: center; }
.centro .painel__sub { margin-left: auto; margin-right: auto; }

/* ───────── hero (Início) ───────── */
.heroi { text-align: center; padding: 22px 16px 20px; overflow: hidden; }
.heroi__fase { display: inline-block; font-size: 13px; font-weight: 700; color: var(--leite-2);
  background: rgba(11, 5, 21, .45); border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.heroi__titulo { font-family: var(--f-disp); font-size: 34px; line-height: 1.02; margin: 0;
  text-shadow: 0 4px 0 var(--borda); text-wrap: balance; }
.heroi__texto { color: var(--leite-2); margin: 14px auto 18px; max-width: 34ch; font-size: 15.5px; }
.heroi .btn { width: 100%; max-width: 360px; }
.heroi__depois { margin: 12px auto 0; color: var(--leite-2); font-size: 14px; max-width: 34ch; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(11, 5, 21, .5); border: 2px solid rgba(205, 188, 227, .16);
  border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 13.5px; font-weight: 600; color: var(--leite);
}
.chip svg { width: 18px; height: 18px; flex: 0 0 auto; }
.chip--ouro { color: var(--banana); border-color: rgba(255, 210, 63, .35); }
.chip--botao { cursor: pointer; }
.chip--botao:hover { border-color: rgba(205, 188, 227, .4); }

/* the theme card: sealed (one "?") and fused (three cards) */
.tema { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: center; gap: 4px; margin: 18px 0 6px; min-height: 150px; }
.carta {
  --cor: var(--uva); --cor-2: var(--uva-2);
  position: relative; width: min(104px, 22.5vw); aspect-ratio: 104 / 140; flex: 0 0 auto;
  perspective: 700px;
}
.carta__giro { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.carta__face {
  position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: grid; place-items: center; padding: 10px 6px;
  border: 3px solid var(--borda); border-radius: 16px;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .22), transparent 55%),
    linear-gradient(180deg, var(--cor), var(--cor-2));
  box-shadow: 0 5px 0 var(--borda), inset 0 0 0 3px rgba(255, 244, 226, .18);
}
.carta__face--verso {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(255, 244, 226, .06) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, var(--acai-2), var(--acai));
}
.carta__face { align-content: center; gap: 6px; }
.carta .ic-tema { width: 42%; height: auto; aspect-ratio: 1; }
.carta__nome { font-family: var(--f-disp); font-size: clamp(15px, 4.7vw, 21px); line-height: 1.02; color: var(--leite); text-align: center;
  text-shadow: 0 2px 0 var(--borda), 0 -1px 0 var(--borda), 1px 0 0 var(--borda), -1px 0 0 var(--borda);
  overflow-wrap: anywhere; hyphens: auto; }
.carta__sinal { font-family: var(--f-disp); font-size: 64px; line-height: 1; color: var(--banana); text-shadow: 0 4px 0 var(--borda); }
.carta--fixo { --cor: var(--banana); --cor-2: var(--banana-2); transform: rotate(-7deg) translateY(6px); }
.carta--fixo .carta__nome { color: var(--borda); text-shadow: none; }
.carta--a { --cor: var(--uva); --cor-2: var(--uva-2); z-index: 1; }
.carta--b { --cor: var(--azul); --cor-2: var(--azul-2); transform: rotate(7deg) translateY(6px); }
.carta--virada .carta__giro { transform: rotateY(180deg); }
.mais { font-family: var(--f-disp); font-size: 30px; color: var(--banana); text-shadow: 0 3px 0 var(--borda); margin: 0 -2px; z-index: 2; }
.carta--selada { width: 104px; transform: rotate(-3deg); }
.carta--selada .carta__face { background:
    radial-gradient(circle at 50% 42%, rgba(255, 210, 63, .28), transparent 50%),
    repeating-linear-gradient(45deg, rgba(255, 244, 226, .05) 0 9px, transparent 9px 18px),
    linear-gradient(180deg, var(--acai-2), #2a0c44); }
.carta--selada .carta__sinal { font-size: 68px; }
.carta__selo { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  background: var(--banana); color: var(--borda); border: 2.5px solid var(--borda); border-radius: 999px;
  font-size: 12px; font-weight: 800; padding: 2px 10px; white-space: nowrap; box-shadow: 0 3px 0 var(--borda); z-index: 2; }
.tema__rotulo { font-family: var(--f-disp); font-size: 26px; line-height: 1; color: var(--banana); text-shadow: 0 3px 0 var(--borda); margin: 8px 0 -2px; }
.brilho { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 210, 63, .55), transparent 62%); }
.tema--revela .brilho { animation: brilho 1.4s ease-out .9s both; }
@keyframes brilho { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }

/* ───────── buttons (chunky, game-like) ───────── */
.btn {
  --bg: var(--acai-2); --sombra: var(--borda);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 10px 22px;
  background: var(--bg); color: var(--leite);
  border: 3px solid var(--borda); border-radius: 16px;
  box-shadow: 0 5px 0 var(--sombra), inset 0 2px 0 rgba(255, 255, 255, .22);
  font-family: var(--f-disp); font-size: 21px; line-height: 1; text-decoration: none; letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(11, 5, 21, .55);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sombra), inset 0 2px 0 rgba(255, 255, 255, .22); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.btn--rosa { --bg: var(--rosa); }
.btn--rosa:hover { --bg: #ff4680; }
.btn--uva { --bg: var(--uva); }
.btn--verde { --bg: var(--verde-2); }
.btn--discord { --bg: #5865F2; }
.btn--leve { min-height: 44px; font-size: 17px; padding: 8px 16px; border-radius: 13px; box-shadow: 0 4px 0 var(--sombra), inset 0 2px 0 rgba(255,255,255,.14); }
.btn--mini { min-height: 36px; font-size: 15px; padding: 6px 12px; border-radius: 11px; border-width: 2.5px; box-shadow: 0 3px 0 var(--sombra); }
.btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.btn__conta { font-family: var(--f-corpo); font-weight: 800; font-size: 13px; background: rgba(11, 5, 21, .35);
  border-radius: 999px; padding: 3px 9px; text-shadow: none; }
.link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 4px 6px; color: var(--leite-2); font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--leite); }
.acoes { display: grid; gap: 12px; justify-items: center; margin-top: 18px; }

/* ───────── my status strip (participant) ───────── */
.status {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 16px;
}
.status__item {
  background: rgba(11, 5, 21, .42); border-radius: 14px; padding: 8px 6px 7px; text-align: center;
  border: 2px solid transparent; cursor: pointer;
}
.status__item:hover { border-color: rgba(205, 188, 227, .22); }
.status__num { font-family: var(--f-num); font-size: 25px; line-height: 1; color: var(--banana); text-shadow: 0 2px 0 var(--borda); display: block; }
.status__num--uva { color: #d2a6ff; }
.status__num--fogo { color: #ff9b5c; }
.status__rot { display: block; font-size: 11.5px; line-height: 1.25; color: var(--leite-2); font-weight: 600; margin-top: 3px; }

/* today's checklist */
.hoje { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; text-align: left; }
.hoje__item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(11, 5, 21, .38); border-radius: 14px; padding: 10px 12px;
}
.hoje__marca {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  border: 2.5px solid rgba(205, 188, 227, .35);
}
.hoje__marca svg { width: 16px; height: 16px; }
.hoje__item--feito .hoje__marca { background: var(--verde-2); border-color: var(--borda); color: var(--leite); }
.hoje__item--feito .hoje__txt { color: var(--leite-2); text-decoration: line-through; text-decoration-color: rgba(205,188,227,.4); }
.hoje__item--agora { background: var(--rosa); color: #fff; box-shadow: 0 4px 0 var(--borda); border: 2.5px solid var(--borda); padding: 12px 12px; }
.hoje__item:not(.hoje__item--feito) .hoje__marca { border: 0; background: rgba(160, 79, 232, .3); color: var(--leite); }
.hoje__item--agora:not(.hoje__item--feito) .hoje__marca { background: rgba(255, 255, 255, .24); }
.hoje__marca svg { width: 15px; height: 15px; }
.hoje__conta { font-family: var(--f-num); font-weight: 400; color: var(--banana); margin-left: 4px; }
.hoje__item--agora .hoje__conta { color: #fff; }
.hoje__seta svg { width: 100%; height: 100%; }
.hoje__item--agora .hoje__marca { border-color: rgba(255, 255, 255, .7); }
.hoje__item--agora .hoje__xp { color: #fff; text-shadow: 0 2px 0 var(--rosa-2); }
button.hoje__item { width: 100%; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
button.hoje__item.hoje__item--agora { border: 2.5px solid var(--borda); color: #fff; }
button.hoje__item:active { transform: translateY(2px); }
.hoje__seta { flex: 0 0 auto; width: 16px; height: 16px; margin-left: -4px; opacity: .7; }
.hoje__txt { flex: 1 1 auto; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.hoje__xp { font-family: var(--f-num); color: var(--banana); font-size: 16px; white-space: nowrap; }

/* ───────── arena (tournament) ───────── */
.duelo { text-align: center; }
.duelo__topo { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.chave { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--leite);
  background: rgba(11, 5, 21, .45); border-radius: 999px; padding: 3px 11px 3px 4px; }
.chave b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--banana); color: var(--borda);
  border: 2px solid var(--borda); font-family: var(--f-num); font-weight: 400; font-size: 12px; line-height: 1; }
.passos { display: flex; gap: 6px; justify-content: center; }
.passos i { width: 22px; height: 7px; border-radius: 99px; background: rgba(205, 188, 227, .22); }
.passos i.feito { background: var(--verde); }
.passos i.agora { background: var(--banana); }
/* the same dots, tappable (the crowd's carousel): a 7px bar inside a finger-sized button */
.passos button { width: 26px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.passos button::before { content: ''; width: 22px; height: 7px; border-radius: 99px; background: rgba(205, 188, 227, .22); }
.passos button.feito::before { background: var(--verde); }
.passos button.agora::before { background: var(--banana); }
.duelo__pergunta { font-family: var(--f-disp); font-size: 28px; line-height: 1.05; margin: 8px 0 18px; text-shadow: 0 3px 0 var(--borda); }
.duelo__campo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.lutador {
  --cor: var(--uva); --cor-2: var(--uva-2);
  position: relative; display: grid; align-content: center; justify-items: center; gap: 10px;
  min-height: 176px; padding: 16px 8px 14px;
  border: 3px solid var(--borda); border-radius: 20px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .2), transparent 60%),
    linear-gradient(180deg, var(--cor), var(--cor-2));
  box-shadow: 0 6px 0 var(--borda), inset 0 0 0 3px rgba(255, 244, 226, .15);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease, opacity .2s ease;
}
button.lutador:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--borda), inset 0 0 0 3px rgba(255, 244, 226, .15); }
button.lutador:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--borda); }
.lutador--B { --cor: var(--azul); --cor-2: var(--azul-2); }
.lutador__nome { font-family: var(--f-disp); font-size: 25px; line-height: 1.02; text-align: center; overflow-wrap: anywhere;
  text-shadow: 0 2px 0 var(--borda), 0 -1px 0 var(--borda), 1px 0 0 var(--borda), -1px 0 0 var(--borda); }
.lutador--meu { box-shadow: 0 6px 0 var(--borda), 0 0 0 4px var(--banana), 0 0 26px rgba(255, 210, 63, .55); }
.lutador--outro { filter: saturate(.45) brightness(.8); }
.lutador--perdeu { filter: grayscale(.8) brightness(.6); }
.lutador__fita { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--banana); color: var(--borda);
  border: 2.5px solid var(--borda); border-radius: 999px; font-size: 12px; font-weight: 800; padding: 1px 10px; white-space: nowrap; }
.lutador__barra { width: 86%; height: 10px; border-radius: 99px; background: rgba(11, 5, 21, .5); overflow: hidden; }
.lutador__barra i { display: block; height: 100%; background: var(--banana); border-radius: 99px; transition: width .6s ease; }
.lutador__pct { font-weight: 800; font-size: 14px; }
.vs {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--banana); color: var(--borda); border: 3px solid var(--borda); box-shadow: 0 4px 0 var(--borda);
  font-family: var(--f-disp); font-size: 21px; transform: rotate(-8deg); z-index: 1;
}

/* bracket, top-down: two duels → their winners meet in the final → the crown */
.chaveamento { display: grid; gap: 16px; }
.cl { background: rgba(11, 5, 21, .35); border: 2px solid rgba(205, 188, 227, .08); border-radius: 20px; padding: 12px 12px 16px; }
.cl__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.cl__ao { font-size: 12px; font-weight: 800; color: var(--leite); background: var(--uva); border: 2px solid var(--borda); border-radius: 999px; padding: 1px 10px; }
.cl__r1 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cl__duelo { display: grid; gap: 5px; padding: 6px; border-radius: 14px; background: rgba(11, 5, 21, .4); border: 2px solid transparent; min-width: 0; }
.cl__duelo--aberto { border-color: var(--uva); box-shadow: 0 0 0 3px rgba(160, 79, 232, .22), 0 0 18px rgba(160, 79, 232, .35); }
/* the lines: one stub down from each duel, then one from the final */
.cl__elo { position: relative; height: 18px; }
.cl__elo::before { content: ''; position: absolute; left: calc(50% - 1.25px); top: 0; bottom: 0; border-left: 2.5px solid rgba(205, 188, 227, .3); }
.cl__elo--dois::before { left: calc(25% - 4.75px); }
.cl__elo--dois::after { content: ''; position: absolute; right: calc(25% - 4.75px); top: 0; bottom: 0; border-left: 2.5px solid rgba(205, 188, 227, .3); }
.cl__final { position: relative; padding: 16px 6px 6px; border-radius: 14px; background: rgba(11, 5, 21, .4); border: 2px solid transparent; }
.cl__rot { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 800; color: var(--leite-2);
  background: var(--noite-2); border-radius: 999px; padding: 0 9px; white-space: nowrap; }
.cl__final-par { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.cl__vs { font-family: var(--f-num); font-size: 13px; color: var(--leite-2); }
.cl__campeao { display: grid; justify-items: center; gap: 2px; }
.cl__campeao > svg { width: 30px; height: 23px; color: rgba(205, 188, 227, .3); }
.cl__campeao--sim > svg { color: var(--banana); filter: drop-shadow(0 2px 0 var(--borda)); }
.cl-chip {
  display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 38px;
  background: var(--noite-2); border: 2px solid rgba(205, 188, 227, .14); border-radius: 11px; padding: 5px 8px;
  font-weight: 700; font-size: 13.5px; color: var(--leite);
}
.cl-chip__nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-chip b { font-family: var(--f-num); font-weight: 400; color: var(--banana); font-size: 15px; }
.cl-chip .ic-tema { width: 20px; height: 20px; filter: none; }
.cl-chip--passou { border-color: var(--banana); background: rgba(255, 210, 63, .12); }
.cl-chip--caiu { color: rgba(205, 188, 227, .45); background: transparent; }
.cl-chip--caiu .cl-chip__nome { text-decoration: line-through; text-decoration-color: rgba(205, 188, 227, .35); }
.cl-chip--caiu b { color: rgba(205, 188, 227, .45); }
.cl-chip--vazio { justify-content: center; color: rgba(205, 188, 227, .45); border-style: dashed; font-family: var(--f-disp); font-weight: 400; font-size: 17px; }
.cl__campeao .cl-chip--vazio { font-family: var(--f-corpo); font-weight: 700; font-size: 13px; padding: 6px 16px; }
.cl-chip--rei { background: var(--banana); color: var(--borda); border: 3px solid var(--borda); box-shadow: 0 4px 0 var(--borda); font-family: var(--f-disp); font-weight: 400; font-size: 21px; padding: 6px 16px 5px 10px; }
.cl-chip--rei .ic-tema { width: 26px; height: 26px; }

/* ───────── missions (how to earn XP) ───────── */
.grupo { display: grid; gap: 10px; }
.missao {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(74, 26, 111, .5), rgba(29, 14, 53, .9));
  border: 3px solid var(--borda); border-radius: 18px; padding: 12px 14px 12px 12px;
  box-shadow: 0 4px 0 var(--borda);
}
.missao__icone {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--cor, var(--uva)); border: 2.5px solid var(--borda); color: var(--leite);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25);
}
.missao__icone svg { width: 24px; height: 24px; }
.missao__nome { font-weight: 800; font-size: 15px; line-height: 1.25; margin: 0; }
.missao__desc { color: var(--leite-2); font-size: 13.5px; line-height: 1.4; margin: 2px 0 0; }
.missao__xp { font-family: var(--f-num); font-size: 19px; line-height: 1; color: var(--banana); text-shadow: 0 2px 0 var(--borda); text-align: right; white-space: nowrap; }
.missao__xp small { display: block; font-family: var(--f-corpo); font-size: 11px; font-weight: 700; color: var(--leite-2); text-shadow: none; margin-top: 3px; }
.missao--feita .missao__icone { background: var(--verde-2); }
.missao__acao { grid-column: 1 / -1; margin-top: 4px; }
.criterios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.criterio { background: rgba(11, 5, 21, .38); border-radius: 14px; padding: 10px 12px; }
.criterio b { font-family: var(--f-disp); font-weight: 400; font-size: 17px; display: block; color: var(--leite); }
.criterio span { color: var(--leite-2); font-size: 13px; line-height: 1.35; }

/* dupla */
.dupla__lados { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; margin: 6px 0 14px; }
.dupla__lado { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.dupla__nome { font-weight: 800; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dupla__elo { align-self: center; margin-top: -24px; font-family: var(--f-disp); font-size: 24px; color: var(--banana); text-shadow: 0 2px 0 var(--borda); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; width: 100%; }
.checks li { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--leite-2);
  background: rgba(11, 5, 21, .38); border-radius: 10px; padding: 5px 8px; text-align: left; }
.checks li i { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 5px; border: 2px solid rgba(205, 188, 227, .4); display: grid; place-items: center; }
.checks li.ok { color: var(--leite); }
.checks li.ok i { background: var(--verde); border-color: var(--borda); }
.checks li.ok i::after { content: ''; width: 7px; height: 4px; border-left: 2px solid var(--borda); border-bottom: 2px solid var(--borda); transform: rotate(-45deg) translate(1px, -1px); }
.procurando { display: flex; justify-content: center; gap: 7px; margin: 10px 0 4px; }
.procurando i { width: 11px; height: 11px; border-radius: 50%; background: var(--uva); animation: pulo 1s ease-in-out infinite; }
.procurando i:nth-child(2) { animation-delay: .15s; background: var(--banana); }
.procurando i:nth-child(3) { animation-delay: .3s; background: var(--azul); }
@keyframes pulo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ───────── ranking ───────── */
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 10px 0 18px; }
.degrau { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.degrau__nome { font-weight: 800; font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.degrau__xp { font-family: var(--f-num); color: var(--banana); font-size: 18px; line-height: 1; text-shadow: 0 2px 0 var(--borda); }
.degrau__base {
  width: 100%; border: 3px solid var(--borda); border-radius: 14px 14px 6px 6px; display: grid; place-items: center;
  font-family: var(--f-num); font-size: 30px; color: var(--leite); text-shadow: 0 3px 0 var(--borda);
  background: linear-gradient(180deg, var(--acai-2), var(--acai)); box-shadow: 0 5px 0 var(--borda);
}
.degrau--1 .degrau__base { height: 96px; background: linear-gradient(180deg, var(--banana), var(--banana-2)); color: var(--borda); text-shadow: none; }
.degrau--2 .degrau__base { height: 72px; }
.degrau--3 .degrau__base { height: 56px; }
.coroa { width: 34px; height: 26px; color: var(--banana); filter: drop-shadow(0 2px 0 var(--borda)); margin-bottom: -4px; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.linha {
  display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 10px;
  background: rgba(29, 14, 53, .85); border: 2px solid rgba(205, 188, 227, .1); border-radius: 14px; padding: 8px 12px 8px 8px;
}
.linha__pos { font-family: var(--f-num); font-size: 18px; text-align: center; color: var(--leite-2); }
.linha__nome { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.linha__nome small { font-weight: 600; color: var(--leite-2); font-size: 12px; margin-left: 6px; }
.linha__xp { font-family: var(--f-num); font-size: 18px; color: var(--banana); white-space: nowrap; }
.linha--eu { border-color: var(--uva); background: rgba(160, 79, 232, .18); }
.marcas { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.marcas svg { width: 15px; height: 15px; }
.corte { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--banana); font-size: 12.5px; font-weight: 800; }
.corte::before, .corte::after { content: ''; flex: 1 1 auto; border-top: 2.5px dashed rgba(255, 210, 63, .55); }
.escondido { text-align: center; }
.escondido svg { width: 54px; height: 54px; color: var(--banana); margin: 0 auto 8px; }

/* ───────── gallery ───────── */
.dias { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 6px; scrollbar-width: none; }
.dias::-webkit-scrollbar { display: none; }
.dia {
  flex: 0 0 auto; border: 2.5px solid var(--borda); border-radius: 999px; padding: 6px 14px;
  background: var(--acai); color: var(--leite-2); font-weight: 700; font-size: 13.5px; box-shadow: 0 3px 0 var(--borda);
}
.dia[aria-pressed='true'] { background: var(--uva); color: var(--leite); }
.grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.arte {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden;
  border: 3px solid var(--borda); border-radius: 16px; background: var(--noite-2); box-shadow: 0 4px 0 var(--borda);
}
.arte img { width: 100%; height: 100%; object-fit: cover; }
.arte__nome {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 7px; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(11, 5, 21, .88));
  font-weight: 700; font-size: 13px; color: var(--leite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arte__selo { position: absolute; top: 8px; right: 8px; background: var(--banana); color: var(--borda); border: 2px solid var(--borda);
  border-radius: 999px; font-size: 11.5px; font-weight: 800; padding: 1px 8px; }
.arte--votada { box-shadow: 0 4px 0 var(--borda), 0 0 0 3px var(--banana); }
.arte--vence { box-shadow: 0 4px 0 var(--borda), 0 0 0 3px var(--banana), 0 0 22px rgba(255, 210, 63, .5); }
.vazio { text-align: center; color: var(--leite-2); padding: 26px 10px; }
.vazio svg { width: 48px; height: 48px; margin: 0 auto 10px; color: var(--acai-2); }

/* process timeline */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.linha-tempo li { display: grid; gap: 6px; }
.linha-tempo__dia { font-weight: 800; font-size: 13px; color: var(--leite-2); }
.linha-tempo img { border: 3px solid var(--borda); border-radius: 14px; width: 100%; }

/* ───────── evaluation flow ───────── */
.avaliar__arte { border: 3px solid var(--borda); border-radius: 18px; overflow: hidden; background: var(--noite-2); box-shadow: 0 5px 0 var(--borda); margin-bottom: 14px; }
.avaliar__arte img { width: 100%; max-height: 56vh; object-fit: contain; background: #0f0719; }
.folha .nota-linha ~ .acoes, .folha .avaliar__arte + .nota { margin-top: 8px; }
.avaliar__arte--nota img { max-height: 28vh; }
.nota-linha { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 2px solid rgba(205, 188, 227, .08); }
.nota-linha:last-of-type { border-bottom: 0; }
.nota-linha b { font-family: var(--f-disp); font-weight: 400; font-size: 18px; }
.nota-linha span { grid-column: 1; color: var(--leite-2); font-size: 12.5px; line-height: 1.3; }
.estrelas { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 2px; }
.estrela { width: 31px; height: 31px; padding: 2px; border: 0; background: none; color: rgba(205, 188, 227, .25); }
.estrela svg { width: 100%; height: 100%; }
.estrela--on { color: var(--banana); filter: drop-shadow(0 2px 0 var(--borda)); }

/* champion */
.campeao { text-align: center; }
.campeao__moldura { position: relative; margin: 26px auto 16px; max-width: 360px; }
.campeao__moldura img { width: 100%; border: 4px solid var(--banana); border-radius: 20px; box-shadow: 0 6px 0 var(--borda), 0 0 40px rgba(255, 210, 63, .45); background: var(--noite-2); }
.campeao__coroa { position: absolute; top: -30px; left: 50%; transform: translateX(-50%) rotate(-6deg); width: 64px; height: 48px; color: var(--banana); filter: drop-shadow(0 3px 0 var(--borda)); }
.campeao__nome { font-family: var(--f-disp); font-size: 40px; line-height: 1; margin: 0; text-shadow: 0 4px 0 var(--borda); }

/* ───────── tab bar ───────── */
.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(21, 10, 38, .96); border-top: 3px solid var(--borda);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.abas__lista { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.aba {
  width: 100%; display: grid; justify-items: center; gap: 2px; padding: 4px 2px 3px;
  background: none; border: 0; color: rgba(205, 188, 227, .62); font-size: 11.5px; font-weight: 700;
  -webkit-tap-highlight-color: transparent; position: relative;
}
.aba__icone { width: 46px; height: 32px; border-radius: 12px; display: grid; place-items: center; transition: background .15s ease; }
.aba__icone svg { width: 23px; height: 23px; }
.aba[aria-current] { color: var(--leite); }
.aba[aria-current] .aba__icone { background: var(--uva); box-shadow: inset 0 -3px 0 var(--uva-2), 0 0 0 2px var(--borda); }
.aba__ponto { position: absolute; top: 2px; right: calc(50% - 26px); width: 10px; height: 10px; border-radius: 50%; background: var(--rosa); border: 2px solid var(--noite); }

/* ───────── sheet, toast, overlay ───────── */
.veu { position: fixed; inset: 0; z-index: 50; background: rgba(8, 3, 15, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .18s ease; }
.veu.in { opacity: 1; }
.folha {
  width: 100%; max-width: 640px; max-height: 92dvh; overflow-y: auto;
  background: var(--noite-2); border: 3px solid var(--borda); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(24px); transition: transform .22s cubic-bezier(.2, .9, .3, 1.1);
}
.veu.in .folha { transform: none; }
.folha__puxador { width: 44px; height: 5px; border-radius: 99px; background: rgba(205, 188, 227, .28); margin: 0 auto 12px; }
.folha__fechar { float: right; margin: -2px -6px 0 8px; width: 38px; height: 38px; border-radius: 12px; border: 0; background: rgba(11, 5, 21, .45); color: var(--leite-2); display: grid; place-items: center; }
.folha__fechar svg { width: 18px; height: 18px; }
.folha__titulo { font-family: var(--f-num); font-weight: 400; font-size: 24px; line-height: 1.1; margin: 4px 0 12px; }
@media (min-width: 700px) {
  .veu { align-items: center; padding: 20px; }
  .folha { border-radius: 24px; border-bottom: 3px solid var(--borda); max-height: 88dvh; }
}
.aviso {
  position: fixed; left: 50%; bottom: calc(var(--barra) + 18px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 16px); opacity: 0; transition: opacity .2s ease, transform .2s ease;
  width: max-content; max-width: calc(100% - 32px);
  background: var(--leite); color: var(--borda); border: 3px solid var(--borda); border-radius: 14px;
  box-shadow: 0 4px 0 var(--borda); padding: 10px 14px; font-weight: 700; font-size: 14px; text-align: center;
}
.aviso { pointer-events: none; }
.aviso.in { opacity: 1; transform: translate(-50%, 0); }
.aviso--xp { background: var(--banana); }
.aviso--erro { background: #ffd0dc; }

/* celebration (joined / reveal) */
.festa { text-align: center; padding: 10px 4px 4px; }
.festa__selo { width: 92px; height: 92px; margin: 6px auto 12px; border-radius: 28px; display: grid; place-items: center;
  background: var(--verde-2); border: 3px solid var(--borda); box-shadow: 0 5px 0 var(--borda); transform: rotate(-6deg); color: var(--leite); }
.festa__selo svg { width: 50px; height: 50px; }
.festa .painel__sub { margin: 0 auto 18px; }

/* ───────── gate (password) + loading ───────── */
.portao { min-height: 100dvh; display: grid; place-items: center; padding: 24px var(--gutter); }
.portao__cartao { width: 100%; max-width: 380px; text-align: center; }
.portao__cartao .marca { justify-content: center; margin-bottom: 18px; }
.portao__cartao .marca__nome { font-size: 34px; }
.portao__cadeado { width: 64px; height: 64px; margin: 0 auto 14px; color: var(--banana); filter: drop-shadow(0 3px 0 var(--borda)); }
.campo {
  width: 100%; min-height: 52px; background: rgba(11, 5, 21, .55); color: var(--leite);
  border: 3px solid var(--borda); border-radius: 14px; padding: 10px 14px; font-size: 17px; text-align: center;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); margin-bottom: 12px;
}
.campo:focus { outline: none; border-color: var(--uva); }
/* o tema secreto: em bolinhas, com o Mostrar do lado */
.tema-secreto { display: flex; gap: 6px; align-items: center; }
.tema-secreto .campo { flex: 1; min-width: 0; }
.campo::placeholder { color: rgba(205, 188, 227, .45); }
.tremer { animation: tremer .35s ease; }
@keyframes tremer { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.carregando { min-height: 60dvh; display: grid; place-items: center; }
.carregando .carta { animation: flutua 1.6s ease-in-out infinite; }
@keyframes flutua { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.demo-faixa { display: table; margin: 0 auto; background: var(--banana); color: var(--borda);
  font-weight: 800; font-size: 11.5px; padding: 1px 12px 2px; border-radius: 0 0 10px 10px; border: 2px solid var(--borda); border-top: 0; }

/* ───────── wider screens ───────── */
@media (min-width: 560px) {
  .grade { grid-template-columns: repeat(3, 1fr); }
  .painel__titulo { font-size: 34px; }
  .heroi__titulo { font-size: 40px; }
  .carta { width: 118px; }
  .carta__nome { font-size: 23px; }
  .carta--selada { width: 118px; }
  .lutador { min-height: 196px; }
  .lutador__nome { font-size: 29px; }
}
@media (max-width: 370px) {
  :root { --gutter: 12px; }
  .marca__nome { font-size: 21px; }
  .heroi__titulo { font-size: 30px; }
  .lutador__nome { font-size: 21px; }
  .no__nome { font-size: 11.5px; }
  .criterios { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ───────── v2: review round (Fusão ceremony, prize, compact missions…) ───────── */
.heroi .tema { margin-bottom: 18px; }
.heroi__texto--forte { color: var(--leite); font-weight: 700; }
.acoes--topo { margin: 0 0 14px; }
button.linha { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.linha--sem-pos { grid-template-columns: auto 1fr auto; }
.linha--duas { grid-template-columns: 1fr auto; }
.linha--tres { grid-template-columns: auto 1fr auto; }
.linha--tres svg { width: 18px; height: 18px; }
button.degrau { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.voce { background: rgba(160, 79, 232, .18); border: 2px solid var(--uva); border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: 14.5px; margin: 0 0 14px; }
.heroi .voce { margin: 0 auto 14px; max-width: 360px; }
.marcas span { display: inline-flex; }

/* missions: one line each, the explanation opens on tap */
details.missao { display: block; padding: 0; }
details.missao > summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; cursor: pointer; }
details.missao > summary::-webkit-details-marker { display: none; }
details.missao .missao__nome { margin: 0; }
.missao__status { font-family: var(--f-num); font-weight: 400; color: var(--banana); margin-left: 2px; }
.missao__seta { width: 18px; height: 18px; color: var(--leite-2); transition: transform .15s ease; }
.missao__seta svg { width: 100%; height: 100%; }
details.missao[open] .missao__seta { transform: rotate(90deg); }
details.missao .missao__desc { margin: 0; padding: 0 14px 12px 66px; }
details.missao .missao__acao { margin: 0; padding: 0 14px 14px 66px; }
/* a mission that explains itself in steps (the crowd grade) */
details.missao .fluxo { margin: 4px auto 0; padding: 0 10px; }
details.missao .missao__criterios { margin: 10px 0 0; padding: 0 14px 14px; }
@media (max-width: 370px) { details.missao .missao__desc, details.missao .missao__acao { padding-left: 14px; } }

/* the champion emblem (Justiça, earned never bought) */
.emblema { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 46px; border-radius: 8px;
  border: 2px solid var(--banana); background: linear-gradient(180deg, var(--acai-2), var(--noite-2));
  box-shadow: inset 0 0 0 1.5px rgba(255, 210, 63, .4), 0 0 12px rgba(160, 79, 232, .6); }
.emblema i { width: 26px; height: 26px; background: var(--banana);
  -webkit-mask: url(../../shared/emblems/tarot-11-justice.svg) center / contain no-repeat;
  mask: url(../../shared/emblems/tarot-11-justice.svg) center / contain no-repeat; }
.emblema--g { width: 58px; height: 74px; border-radius: 11px; border-width: 3px; }
.emblema--g i { width: 40px; height: 40px; }

/* lightbox: walk through the day's art without closing */
.lb-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 10px; }
.lb-nav .btn { min-width: 48px; }

/* rating sheet: big stars on their own row, save button always at hand */
.folha--nota { padding-bottom: 0; }
.folha--nota .nota-linha { display: block; padding: 10px 0; }
.folha--nota .nota-linha span { display: block; margin: 2px 0 6px; }
.folha--nota .estrelas { display: flex; justify-content: space-between; max-width: 290px; }
.folha--nota .estrela { width: 48px; height: 48px; padding: 6px; }
.folha__pe { position: sticky; bottom: 0; display: grid; gap: 4px; justify-items: center; margin: 6px -18px 0;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(29, 14, 53, 0), var(--noite-2) 28%); }
.folha__pe .btn { width: 100%; max-width: 360px; }


/* the Fusão ceremony: winners come in, the secret card shakes and turns, stamp */
.cerim { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px var(--gutter); text-align: center; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(160, 79, 232, .45), transparent 70%), var(--noite); }
.cerim.in { opacity: 1; }
.cerim__pular { position: absolute; top: 8px; right: 12px; }
.cerim__topo { font-family: var(--f-disp); font-size: 28px; margin: 0; text-shadow: 0 3px 0 var(--borda); animation: cerimEntra .5s ease both; }
.cerim__mesa { position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: center; gap: 8px; min-height: 180px; }
.cerim__lado, .cerim__meio { display: grid; justify-items: center; gap: 10px; }
.cerim__rot { font-size: 12px; font-weight: 800; color: var(--leite-2); }
.cerim__lado--a { animation: cerimEntra .55s cubic-bezier(.2, 1.4, .4, 1) .4s both; }
.cerim__lado--b { animation: cerimEntra .55s cubic-bezier(.2, 1.4, .4, 1) 1s both; }
.cerim__meio { animation: cerimEntra .55s cubic-bezier(.2, 1.4, .4, 1) 1.7s both, cerimTreme .5s ease 2.35s; }
.cerim__meio .carta__giro { animation: cerimVira .8s cubic-bezier(.3, 1.4, .5, 1) 2.9s both; }
.cerim .brilho { inset: -40px; z-index: -1; animation: brilho 1.4s ease-out 3.5s both; }
.cerim__carimbo { font-family: var(--f-disp); font-size: 48px; line-height: 1; color: var(--banana); text-shadow: 0 4px 0 var(--borda);
  animation: cerimCarimbo .5s cubic-bezier(.2, 1.6, .4, 1) 3.5s both; }
.cerim__txt { margin: 0; font-size: 16px; max-width: 32ch; animation: cerimSurge .4s ease 3.9s both; }
.cerim__bora { min-width: 240px; animation: cerimSurge .4s ease 4.1s both; }
@keyframes cerimEntra { from { opacity: 0; transform: translateY(40px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes cerimTreme { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } }
@keyframes cerimVira { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }
@keyframes cerimCarimbo { from { opacity: 0; transform: rotate(-22deg) scale(2.4); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes cerimSurge { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cerim * { animation-delay: 0s !important; } }

/* ───────── v3: vote first, the live, what's next ───────── */
.app { padding-bottom: calc(var(--barra) + 104px + env(safe-area-inset-bottom)); }
/* the end of each part: the next one, reached by scrolling on (or a tap) */
.seguir { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; margin: 40px 0 0; padding: 16px 16px 20px;
  text-align: left; color: var(--leite); overflow: hidden; cursor: pointer; font: inherit;
  background: rgba(11, 5, 21, .35); border: 2.5px dashed rgba(205, 188, 227, .28); border-radius: 18px;
  transition: border-color .15s ease, background .15s ease; }
.seguir:hover { border-color: rgba(205, 188, 227, .5); }
.seguir__ic { flex: 0 0 auto; width: 38px; height: 38px; margin: 0 4px; border-radius: 11px; display: grid; place-items: center;
  transform: rotate(45deg); background: var(--acai-2); border: 3px solid var(--borda); color: var(--leite); transition: background .15s ease; }
.seguir__ic svg { width: 19px; height: 19px; transform: rotate(-45deg); }
.seguir__txt { flex: 1 1 auto; min-width: 0; }
.seguir__txt small { display: block; font-size: 13px; font-weight: 700; color: var(--leite-2); }
.seguir__txt b { display: block; font-family: var(--f-disp); font-weight: 400; font-size: 25px; line-height: 1.1; text-shadow: 0 2px 0 var(--borda); }
.seguir__seta { flex: 0 0 auto; width: 26px; height: 26px; color: var(--banana); animation: seguirDesce 1.8s ease-in-out infinite; }
.seguir__seta svg { width: 100%; height: 100%; }
@keyframes seguirDesce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.seguir__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(11, 5, 21, .5); }
.seguir__barra i { display: block; height: 100%; background: var(--banana); transform-origin: left center; transform: scaleX(var(--puxa, 0)); }
.seguir--puxando { border-style: solid; border-color: var(--banana); background: rgba(255, 210, 63, .07); }
.seguir--puxando .seguir__ic { background: var(--uva); }
/* the next part comes up from below, like turning a page */
.painel.entra { animation: painelEntra .26s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes painelEntra { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
/* the tab you just arrived at gives a little hop */
.aba--chegou .aba__icone { animation: abaPula .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes abaPula { 40% { transform: translateY(-7px) scale(1.12); } }
/* the next action, waiting above the bottom bar while its button is off screen */
.doca { position: fixed; left: 0; right: 0; bottom: calc(var(--barra) + 14px + env(safe-area-inset-bottom)); z-index: 29;
  display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.doca .btn { pointer-events: auto; width: 100%; max-width: 380px; box-shadow: 0 5px 0 var(--borda), 0 12px 28px rgba(8, 3, 15, .6), inset 0 2px 0 rgba(255, 255, 255, .22);
  animation: docaSobe .24s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes docaSobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body.com-doca .aviso { bottom: calc(var(--barra) + 92px + env(safe-area-inset-bottom)); }
/* a participant sees the theme every day: smaller cards, the day's list comes up sooner */
.heroi--compacto { padding: 16px 14px 12px; }
.heroi--compacto .heroi__fase { margin-bottom: 2px; }
.heroi--compacto .tema { min-height: 0; margin: 12px 0 6px; }
.heroi--compacto .carta { width: min(88px, 21vw); }
.heroi--compacto .carta__nome { font-size: clamp(14px, 4.2vw, 18px); }
.topcard--eu { border-color: var(--uva); box-shadow: 0 4px 0 var(--borda), 0 0 0 3px rgba(160, 79, 232, .4); }
.topcard__nome small { font-weight: 700; font-size: 11.5px; color: var(--leite-2); margin-left: 5px; }
/* the head of each part: a trail stop + title */
.cabeca { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 18px; }
.cabeca__ic { flex: 0 0 auto; width: 40px; height: 40px; margin: 6px 4px 0; border-radius: 12px; display: grid; place-items: center;
  background: var(--uva); border: 3px solid var(--borda); color: var(--leite); transform: rotate(45deg);
  box-shadow: 0 0 0 5px rgba(160, 79, 232, .22); }
.cabeca__ic svg { width: 20px; height: 20px; transform: rotate(-45deg); }
.cabeca__titulo { font-family: var(--f-disp); font-weight: 400; font-size: 30px; line-height: 1.02; margin: 0 0 6px; text-shadow: 0 3px 0 var(--borda); text-wrap: balance; }
.cabeca__sub { color: var(--leite-2); margin: 0; font-size: 15px; max-width: 46ch; }
.cabeca__sub b { color: var(--banana); font-family: var(--f-num); font-weight: 400; }
.acoes--topo { margin: 0 0 18px; }

/* the header chip: green check when you're in */
.conta__ok { display: grid; place-items: center; width: 20px; height: 20px; margin-left: -3px; border-radius: 50%;
  background: var(--verde-2); border: 2px solid var(--borda); color: var(--leite); }
.conta__ok svg { width: 12px; height: 12px; }

/* "you're in / not yet" */
.bloco.status-part { margin-top: 18px; }
.status-part__topo { display: flex; align-items: flex-start; gap: 14px; }
.status-part__selo { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(160, 79, 232, .3); border: 2.5px solid rgba(160, 79, 232, .6); color: var(--leite); }
.status-part__selo svg { width: 24px; height: 24px; }
.status-part__topo > div > b { display: block; font-family: var(--f-disp); font-weight: 400; font-size: 22px; line-height: 1.08; text-shadow: 0 2px 0 var(--borda); }
.status-part__topo > div > span { display: block; color: var(--leite-2); font-size: 14.5px; margin-top: 4px; }
.status-part .acoes { margin-top: 18px; }
.status-part .btn { width: 100%; max-width: 360px; }
.status-part .heroi__depois { text-align: center; }
.status-part__xp { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 210, 63, .08); border: 2px solid rgba(255, 210, 63, .3); font-size: 14px; color: var(--leite-2); }
.status-part__xp svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--banana); }
.status-part__xp b { color: var(--banana); font-family: var(--f-num); font-weight: 400; font-size: 16px; }
.status-part .proximo--curto { margin-top: 16px; }

/* what happens after the tap: three little steps, joined by a dashed trail */
.fluxo { list-style: none; position: relative; margin: 18px auto 0; padding: 0; max-width: 360px; display: grid; grid-template-columns: repeat(3, 1fr); }
.fluxo::before { content: ''; position: absolute; top: 20px; left: 16.7%; right: 16.7%; border-top: 3px dashed rgba(205, 188, 227, .3); }
.fluxo__passo { position: relative; display: grid; justify-items: center; align-content: start; gap: 7px; text-align: center; }
.fluxo__ic { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--noite-2); border: 3px solid rgba(205, 188, 227, .32); color: var(--leite-2); }
.fluxo__ic svg { width: 19px; height: 19px; }
.fluxo__txt { font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--leite-2); max-width: 13ch; hyphens: manual; }
.fluxo__passo--agora .fluxo__ic { background: var(--uva); border-color: var(--borda); color: var(--leite); box-shadow: 0 0 0 4px rgba(160, 79, 232, .28); }
.fluxo__passo--agora .fluxo__txt { color: var(--leite); }
.fluxo__passo--feito .fluxo__ic { background: var(--verde-2); border-color: var(--borda); color: var(--leite); }
.heroi .fluxo { margin-top: 20px; }
.status-part .fluxo { margin-top: 18px; }
/* "all set" line (account ready) */
.pronto { display: inline-flex; align-items: center; gap: 8px; margin: 6px auto 0; padding: 9px 14px; border-radius: 14px; text-align: left;
  background: rgba(31, 168, 98, .16); border: 2px solid rgba(63, 220, 138, .45); font-size: 14.5px; font-weight: 700; color: var(--leite); }
.pronto svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--verde); }

/* how to win + what you win, in one place */
.bloco.vencer { margin-top: 18px; text-align: center; padding: 22px 16px 20px;
  background: radial-gradient(ellipse 85% 55% at 50% 0%, rgba(255, 210, 63, .2), transparent 70%), linear-gradient(180deg, rgba(74, 26, 111, .6), rgba(29, 14, 53, .95)); }
.vencer__topo { display: grid; justify-items: center; gap: 6px; }
.vencer__topo > svg { width: 50px; height: 38px; color: var(--banana); filter: drop-shadow(0 3px 0 var(--borda)); }
.vencer__titulo { font-family: var(--f-disp); font-weight: 400; font-size: 27px; line-height: 1.05; margin: 0; text-shadow: 0 3px 0 var(--borda); text-wrap: balance; }
.premios { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.premio-item { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 12px 4px 10px; border-radius: 16px;
  background: rgba(11, 5, 21, .42); border: 2px solid rgba(255, 210, 63, .18); }
.premio-item .ilu { width: 64px; height: 64px; filter: drop-shadow(0 3px 0 rgba(11, 5, 21, .55)); }
.premio-item .emblema--g { width: 50px; height: 64px; }
.premio-item .emblema--g i { width: 34px; height: 34px; }
.premio-item b { font-size: 13.5px; font-weight: 800; line-height: 1.15; color: var(--leite); }
.premio-item small { font-size: 11.5px; font-weight: 600; color: var(--leite-2); line-height: 1.2; }
.vencer__xp { width: 100%; margin-top: 16px; }
/* the prize for everyone who delivers: early access to the Box Aura */
.vencer__todos { display: grid; justify-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 2px dashed rgba(255, 210, 63, .28); }
.vencer__todos-t { font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1.1; margin: 0; text-shadow: 0 3px 0 var(--borda); text-wrap: balance; }
.antecipado { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; max-width: 380px;
  padding: 12px 14px; text-align: left; border-radius: 16px; background: rgba(11, 5, 21, .42); border: 2px solid rgba(255, 210, 63, .18); }
.antecipado .ilu { width: 64px; height: 64px; filter: drop-shadow(0 3px 0 rgba(11, 5, 21, .55)); }
.antecipado b { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--leite); }
.antecipado small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--leite-2); }
.antecipado__abrir { width: 100%; max-width: 380px; }
.campeao .vencer__todos { max-width: 380px; margin: 4px auto 0; }
.campeao__levou { margin: 4px 0 0; font-size: 13px; font-weight: 800; color: var(--banana); }
.campeao .premios { margin: 8px auto 14px; max-width: 380px; }

/* the rating right on Início */
.aval-inline { margin: 18px 0 4px; padding: 14px 12px 14px; border-radius: 18px; text-align: left;
  background: rgba(11, 5, 21, .45); border: 2.5px solid var(--uva); box-shadow: 0 0 0 4px rgba(160, 79, 232, .18); }
.aval__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.aval__conta { font-family: var(--f-num); font-size: 18px; color: var(--leite); }
.aval-inline .avaliar__arte--nota img { max-height: 42vh; }
.aval-inline .nota-linha { display: block; padding: 10px 0; }
.aval-inline .nota-linha span { display: block; margin: 2px 0 6px; }
.aval-inline .estrelas { display: flex; justify-content: space-between; max-width: 290px; }
.aval-inline .estrela { width: 46px; height: 46px; padding: 6px; }
.aval__pe { display: grid; gap: 4px; justify-items: center; margin-top: 10px; }
.aval__pe .btn { width: 100%; max-width: 360px; }
.nota-feita { display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 12px; padding: 10px 14px; border-radius: 14px;
  background: rgba(31, 168, 98, .16); border: 2px solid rgba(63, 220, 138, .45); font-weight: 700; }
.nota-feita svg { width: 20px; height: 20px; color: var(--verde); }

/* my area (participant) */
.bloco.area { margin-top: 18px; }
.area__topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.area__titulo { font-family: var(--f-disp); font-weight: 400; font-size: 28px; line-height: 1.05; margin: 0; text-shadow: 0 3px 0 var(--borda); }
.selo-part { display: inline-flex; align-items: center; gap: 6px; background: var(--verde-2); color: var(--leite); border: 2.5px solid var(--borda);
  border-radius: 999px; padding: 3px 11px 3px 7px; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 var(--borda); }
.selo-part svg { width: 15px; height: 15px; }
.area__regra { color: var(--leite-2); font-size: 14px; font-weight: 600; margin: 4px 0 14px; }
.area .status { margin: 4px 0 4px; }
.area .status__rot { font-weight: 700; color: var(--leite); }
.area__sub { font-family: var(--f-disp); font-weight: 400; font-size: 20px; margin: 12px 0 8px; text-shadow: 0 2px 0 var(--borda); }
.area .hoje { margin-bottom: 14px; }
.area__mais { width: 100%; margin-top: 8px; }
.area .nota { margin: 0 0 12px; }

/* the theme icons (white figures tinted by CSS) */
.ic-tema { display: inline-grid; flex: 0 0 auto; width: 22px; height: 22px; filter: drop-shadow(0 2px 0 var(--borda)); }
.ic-tema i { display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.carta .ic-tema { color: var(--leite); filter: drop-shadow(0 2px 0 var(--borda)) drop-shadow(0 -1px 0 var(--borda)); }
.lutador .ic-tema { width: 64px; height: 64px; filter: drop-shadow(0 3px 0 var(--borda)) drop-shadow(0 -1px 0 var(--borda)); }
.lutador { gap: 8px; }
@media (min-width: 560px) { .lutador .ic-tema { width: 76px; height: 76px; } }

/* the duel timer: the bar empties, the next duel comes */
.duelo .heroi__fase { margin-bottom: 8px; }
.timer { display: grid; justify-items: center; gap: 7px; margin-top: 18px; font-size: 13.5px; font-weight: 700; color: var(--leite-2); }
.timer__trilho { display: block; width: min(100%, 260px); height: 9px; border-radius: 99px; background: rgba(11, 5, 21, .55); overflow: hidden; }
.timer__trilho i { display: block; height: 100%; border-radius: 99px; background: var(--banana); transform-origin: left center; animation: timerAnda linear forwards; }
@keyframes timerAnda { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.lutador:disabled { cursor: default; }

/* last champion (before a new challenge) and the next challenge */
.bloco.anterior { margin-top: 18px; }
.anterior__rot { font-size: 13px; font-weight: 800; color: var(--banana); }
.anterior__linha { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.anterior__linha img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 3px solid var(--banana); flex: 0 0 auto; }
.anterior__linha > div > b { display: block; font-family: var(--f-disp); font-weight: 400; font-size: 21px; line-height: 1.1; }
.anterior__linha > div > span { color: var(--leite-2); font-size: 13.5px; }
.anterior__linha .emblema { margin-left: auto; }
.proximo { display: flex; align-items: flex-start; gap: 14px; text-align: left; }
.proximo__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--azul-2); border: 2.5px solid var(--borda); color: var(--leite); box-shadow: 0 3px 0 var(--borda); }
.proximo__ic svg { width: 24px; height: 24px; }
.proximo > div > b { display: block; font-family: var(--f-disp); font-weight: 400; font-size: 22px; line-height: 1.1; text-shadow: 0 2px 0 var(--borda); margin-bottom: 3px; }
.proximo > div > span { display: block; color: var(--leite-2); font-size: 14.5px; }
.proximo--curto { background: rgba(11, 5, 21, .4); border-radius: 14px; padding: 12px; }
.proximo--curto > div > b { font-size: 19px; }

/* the evaluation hero: what's secret, my XP, my situation */
.infos { list-style: none; margin: 20px auto 0; padding: 0; max-width: 380px; display: grid; gap: 8px; text-align: left; }
.infos li { display: flex; gap: 10px; align-items: flex-start; background: rgba(11, 5, 21, .4); border-radius: 12px; padding: 10px 12px; font-size: 14px; color: var(--leite-2); line-height: 1.4; }
.infos svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--banana); margin-top: 1px; }
.infos b { color: var(--banana); font-family: var(--f-num); font-weight: 400; font-size: 16px; }

/* the live */
.live__capa { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 4px 0 18px;
  border: 3px solid var(--borda); border-radius: 16px; box-shadow: 0 5px 0 var(--borda); background: var(--noite-2); }
.live__capa--vazia { display: grid; place-items: center; color: var(--acai-2);
  background: repeating-linear-gradient(45deg, rgba(255, 244, 226, .04) 0 10px, transparent 10px 20px), var(--noite-2); }
.live__capa--vazia svg { width: 56px; height: 56px; }
.live__quando { color: var(--banana); font-family: var(--f-num); font-weight: 400; font-size: 20px; }
.live .voce { margin: 16px auto 0; }
.pulso { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff5277; margin-right: 7px; vertical-align: 1px; animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .3; } }

/* the Top 20 as a gallery (while the live happens) */
.topvinte { margin-top: 30px; }
.topvinte__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.topcard { position: relative; display: grid; gap: 4px; align-content: start; padding: 0 0 10px; overflow: hidden; text-align: left; color: inherit; font: inherit; cursor: pointer;
  background: var(--noite-2); border: 3px solid var(--borda); border-radius: 16px; box-shadow: 0 4px 0 var(--borda); }
.topcard img, .topcard__sem { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #0f0719; margin-bottom: 4px; }
.topcard__pos { position: absolute; top: 8px; left: 8px; font-family: var(--f-num); font-size: 16px; line-height: 1; color: var(--borda);
  background: var(--leite); border: 2.5px solid var(--borda); border-radius: 10px; padding: 4px 7px 3px; box-shadow: 0 3px 0 var(--borda); }
.topcard--1 { border-color: var(--banana); box-shadow: 0 4px 0 var(--borda), 0 0 24px rgba(255, 210, 63, .45); }
.topcard--1 .topcard__pos { background: var(--banana); }
.topcard__nome { padding: 0 10px; font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topcard__xp { padding: 0 10px; font-family: var(--f-num); color: var(--banana); font-size: 18px; line-height: 1.1; }
.topcard__notas { padding: 0 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.topcard__notas i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--leite); background: rgba(160, 79, 232, .3); border-radius: 999px; padding: 1px 7px; }
.topcard__notas .topcard__live { background: rgba(56, 169, 255, .3); }
@media (min-width: 560px) { .topvinte__grade { grid-template-columns: repeat(3, 1fr); } }

/* the pair invite: the XP is the hook */
.dupla-convite { position: relative; }
.dupla-convite__titulo { margin-top: 0; padding-right: 92px; }
.dupla-convite__xp { position: absolute; top: -14px; right: 14px; display: grid; justify-items: center; line-height: 1;
  background: var(--banana); color: var(--borda); border: 3px solid var(--borda); border-radius: 16px; padding: 8px 12px 7px;
  box-shadow: 0 4px 0 var(--borda); transform: rotate(5deg); }
.dupla-convite__xp b { font-family: var(--f-num); font-weight: 400; font-size: 30px; }
.dupla-convite__xp span { font-size: 12px; font-weight: 800; margin-top: 2px; }
.dupla-convite .painel__sub b { color: var(--banana); }
.dupla__regra { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; text-align: left;
  background: rgba(255, 210, 63, .08); border: 2px solid rgba(255, 210, 63, .35); font-size: 13.5px; color: var(--leite-2); }
.dupla__regra svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--banana); margin-top: 1px; }
.dupla__regra b { color: var(--leite); }

/* as regras (25/set): mesma placa escura dos criterios, com o icone na frente */
.regras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.regra { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: rgba(11, 5, 21, .38); border-radius: 14px; padding: 10px 12px; }
.regra__ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--uva-2); color: var(--leite); }
.regra__ic svg { width: 18px; height: 18px; }
.regra b { font-family: var(--f-disp); font-weight: 400; font-size: 17px; display: block; color: var(--leite); line-height: 1.15; }
.regra span { color: var(--leite-2); font-size: 13px; line-height: 1.35; }
.vencer__regras { width: 100%; margin-top: 8px; }
@media (max-width: 560px) { .regras { grid-template-columns: 1fr; } }

/* ───────── the grade in stars (26/set): partial stars, the table, the carousel ───────── */
/* partial stars: the average (4,2) fills 4 stars and a fifth of the next */
.mini-est { display: inline-block; flex: 0 0 auto; width: 60px; height: 12px; vertical-align: -1px;
  background: linear-gradient(90deg, var(--banana) calc(var(--v) / 5 * 100%), rgba(205, 188, 227, .22) 0);
  -webkit-mask: var(--estrela) 0 0 / 12px 12px repeat-x; mask: var(--estrela) 0 0 / 12px 12px repeat-x; }
.mini-est--gal { background: linear-gradient(90deg, var(--gal) calc(var(--v) / 5 * 100%), rgba(205, 188, 227, .22) 0); }

/* what each star is worth, always in sight */
.nt-conv, .aval__conv { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 1.35; color: var(--leite-2); }
.nt-conv svg, .aval__conv svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--banana); }
.nt-conv b, .aval__conv b { color: var(--banana); font-family: var(--f-num); font-weight: 400; font-size: 16px; }
.aval__conv { margin: 0 0 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 210, 63, .08); border: 2px solid rgba(255, 210, 63, .28); }

/* the grade of a Top 20 art: crowd and Luska side by side */
.nt-bloco { display: grid; gap: 10px; margin: 0 0 18px; padding: 14px; border-radius: 18px;
  background: rgba(11, 5, 21, .45); border: 2.5px solid rgba(255, 210, 63, .35); }
.nt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nt th, .nt td { padding: 7px 3px; text-align: left; }
.nt thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--leite-2); font-weight: 800; }
.nt tbody th { font-weight: 700; color: var(--leite); }
.nt tbody tr { border-top: 1px solid rgba(205, 188, 227, .12); }
.nt td { white-space: nowrap; }
.nt td span { font-family: var(--f-num); color: var(--leite); margin-left: 5px; }
.nt td em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--leite-2); }
.nt .mini-est { width: 50px; height: 10px; -webkit-mask-size: 10px 10px; mask-size: 10px 10px; }
.nt tfoot th, .nt tfoot td { font-family: var(--f-num); font-weight: 400; font-size: 18px; border-top: 2px dashed rgba(205, 188, 227, .25); padding-top: 9px; }
.nt tfoot td:nth-child(2) { color: var(--gal); }
.nt tfoot td:nth-child(3) { color: var(--banana); }
.nt-fim { display: grid; gap: 2px; margin: 0; font-size: 14px; color: var(--leite-2); }
.nt-fim b { color: var(--banana); font-family: var(--f-num); font-weight: 400; font-size: 21px; }
.nt-fim span { font-size: 13px; }
.nt-nota { margin: 0; font-size: 12px; color: var(--leite-2); }
.nt-simples { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 14px; color: var(--leite-2); }
.nt-simples b { font-family: var(--f-num); font-weight: 400; font-size: 18px; color: var(--banana); }

/* the crowd's rating as a carousel: arrows on the art, tappable dots, the XP of each star */
.carrossel { position: relative; }
.carrossel .avaliar__arte { margin-bottom: 10px; }
.carrossel__seta { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -27px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(21, 10, 38, .88); border: 2.5px solid var(--borda); color: var(--leite); box-shadow: 0 3px 0 var(--borda); cursor: pointer; }
.carrossel__seta--ant { left: 8px; }
.carrossel__seta--prox { right: 8px; }
.carrossel__seta svg { width: 22px; height: 22px; }
.aval__de { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 14px; color: var(--leite-2); }
.aval__de b { color: var(--leite); }
.aval__feita { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12.5px; font-weight: 800; color: var(--verde); }
.aval__feita svg { width: 14px; height: 14px; }
.nota-linha__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nota-linha .nota-linha__xp, .aval-inline .nota-linha .nota-linha__xp, .folha--nota .nota-linha .nota-linha__xp {
  display: inline; margin: 0; font-family: var(--f-num); font-size: 17px; color: var(--banana); }
.aval__soma { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding-top: 10px;
  border-top: 2px dashed rgba(205, 188, 227, .25); font-size: 13px; color: var(--leite-2); }
.aval__soma b { font-family: var(--f-num); font-weight: 400; font-size: 19px; color: var(--banana); }
.aval__pe .btn svg, .folha__pe .btn svg { width: 18px; height: 18px; margin-left: 4px; }
.aval__pular { width: 100%; max-width: 360px; }

/* why 5 arts: the fairness, told plainly */
.porque { display: grid; gap: 14px; }
.porque__lead { margin: 0; color: var(--leite-2); }
.porque__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.porque__lista li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: rgba(11, 5, 21, .38); }
.porque__lista svg { width: 22px; height: 22px; color: var(--banana); margin-top: 2px; }
.porque__lista b { display: block; color: var(--leite); }
.porque__lista span { color: var(--leite-2); font-size: 14px; line-height: 1.4; }
.porque__conta { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 210, 63, .08); border: 2px solid rgba(255, 210, 63, .3); color: var(--leite-2); font-size: 14px; }
.porque__conta b { color: var(--banana); font-family: var(--f-num); font-weight: 400; font-size: 17px; }

/* the admin card that opens the live mode */
.modo-live-cartao { display: grid; gap: 12px; margin: 16px 0; border-color: var(--uva); }
.modo-live-cartao b { display: block; font-family: var(--f-disp); font-weight: 400; font-size: 24px; line-height: 1.05; }
.modo-live-cartao span { color: var(--leite-2); font-size: 14px; }
.modo-live-cartao .btn { width: 100%; max-width: 360px; justify-self: start; }
.modo-live-cartao .nota { margin: 0; }