* { box-sizing: border-box; }

:root {
  --font-serif: 'Outfit', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  --radius: 18px;
  --radius-sm: 12px;

  /* Tema claro (padrão) */
  --bg: #F2F1FC;
  --ink: #1A1633;
  --muted: #6A6590;
  --surface: #FFFFFF;
  --surface-2: #EEECFB;
  --border: #E0DDF5;

  --blue: #6B4EE6;
  --blue-soft: rgba(107, 78, 230, 0.12);
  --teal: #1F9C8A;
  --teal-soft: rgba(31, 156, 138, 0.12);
  --gold: #C4741F;
  --gold-soft: rgba(196, 116, 31, 0.14);
  --coral: #D6467A;
  --coral-soft: rgba(214, 70, 122, 0.12);

  --violet-deep: #16103A;
  --violet-mid: #3B2A8C;
  --shadow: 0 10px 30px rgba(31, 21, 80, 0.10);

  --sidebar-bg: #16103A;
  --sidebar-ink: #EDEAFB;
  --sidebar-muted: #9C94C8;
  --sidebar-border: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] {
  --bg: #0E0A22;
  --ink: #ECEAFB;
  --muted: #9D96C4;
  --surface: #181139;
  --surface-2: #221749;
  --border: #2E2360;

  --blue: #9B84FF;
  --blue-soft: rgba(155, 132, 255, 0.18);
  --teal: #3FD1B4;
  --teal-soft: rgba(63, 209, 180, 0.14);
  --gold: #F0B942;
  --gold-soft: rgba(240, 185, 66, 0.14);
  --coral: #FF7BA8;
  --coral-soft: rgba(255, 123, 168, 0.14);
  --violet-deep: #0B0720;
  --violet-mid: #3B2A8C;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------------- Shell / layout ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.side-rail {
  width: 232px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 0 6px 26px; }
.brand-seal {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  color: #14161F; font-family: var(--font-serif); font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 17px; }
.brand-kicker { font-size: 11px; color: var(--sidebar-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav button {
  display: flex; align-items: center; gap: 11px;
  background: transparent; border: none; color: var(--sidebar-muted);
  padding: 10px 12px; border-radius: var(--radius-sm); text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.side-nav button i { font-size: 17px; width: 17px; text-align: center; }
.side-nav button:hover { background: rgba(255,255,255,0.05); color: var(--sidebar-ink); }
.side-nav button.active { background: var(--blue-soft); color: #BFD0FF; }

.rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.rail-coin-row {
  display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.06);
  border: 1px solid var(--sidebar-border); border-radius: 999px; padding: 8px 12px;
  color: var(--sidebar-ink); font-size: 12.5px; width: 100%; text-align: left;
  transition: background 0.15s ease;
}
.rail-coin-row:hover { background: rgba(255,255,255,0.1); }
.rail-coin-row .icon-slot { color: var(--gold); width: 16px; height: 16px; }
.rail-coin-row .icon-slot .icon { width: 16px; height: 16px; }
.rail-coin-row strong { font-family: var(--font-serif); font-size: 14px; }
.rail-coin-row span { color: var(--sidebar-muted); font-size: 11px; }
.rail-progress-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--sidebar-muted); margin-bottom: 6px; }
.rail-track, .level-track, .xp-track-inline {
  height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden;
}
.rail-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: 4px; transition: width 0.6s ease; }
.rail-xp { margin-top: 6px; color: var(--sidebar-muted); font: 10px var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.local-mark { font-size: 10.5px; color: var(--sidebar-muted); letter-spacing: 0.03em; display: flex; align-items: center; gap: 5px; }
.local-mark .icon-slot .icon { width: 12px; height: 12px; }

.main-area { flex: 1; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 30px; border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 5;
}
.crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar-coin-badge {
  display: flex; align-items: center; gap: 6px; background: var(--gold-soft);
  border: 1px solid transparent; border-radius: 999px; padding: 7px 13px; font-size: 12.5px;
  font-weight: 700; color: var(--gold);
}
.topbar-coin-badge:hover { filter: brightness(1.05); }
.topbar-coin-badge .icon-slot { width: 15px; height: 15px; }
.topbar-coin-badge .icon-slot .icon { width: 15px; height: 15px; }
.theme-toggle {
  display: flex; align-items: center; gap: 6px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px; font-size: 12px; color: var(--ink);
}
.profile-mini { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.auth-top-button {
  display: inline-flex; align-items: center; gap: 7px; max-width: 190px;
  padding: 8px 13px; border: 1px solid var(--blue); border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 12px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter .15s ease, transform .12s ease;
}
.auth-top-button:hover { filter: brightness(1.08); }
.auth-top-button:active { transform: scale(.98); }
.auth-top-button.is-signed-in { background: var(--surface-2); border-color: var(--border); color: var(--ink); font-weight: 600; }
.auth-top-button i { flex: 0 0 auto; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
}
.avatar-art { width: 100%; height: 100%; display: block; }
.avatar-art-mini { width: 32px; height: 32px; }

.mobile-nav { display: none; }

/* ---------------- Page basics ---------------- */
.page-wrap { max-width: 1080px; padding: 28px 30px 90px; margin: 0 auto; }
.page-enter { animation: pageIn 0.35s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.page-title { font-family: var(--font-serif); font-size: 30px; font-weight: 700; margin: 0 0 8px; }
.page-subtitle { color: var(--muted); margin: 0; max-width: 620px; }

.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

.section-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.section-title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; margin: 0 0 2px; }
.section-caption { font-size: 12px; color: var(--muted); }

.empty-state { display: flex; flex-direction: column; gap: 4px; padding: 30px 10px; text-align: center; color: var(--muted); }
.empty-state strong { color: var(--ink); font-size: 14px; }

/* ---------------- Buttons / chips ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 999px;
  padding: 10px 18px; border: 1px solid transparent; font-weight: 600; font-size: 13px;
  transition: transform 0.12s ease, filter 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary, .btn-blue { background: var(--blue); color: #fff; }
.btn-primary:hover, .btn-blue:hover { filter: brightness(1.08); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-outline:hover { background: var(--surface-2); }
.btn-quiet { background: var(--surface-2); color: var(--ink); }
.btn-quiet:hover { filter: brightness(1.06); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn { background: transparent; border: none; color: var(--muted); padding: 6px; border-radius: 8px; display: inline-flex; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
}
.chip.selected { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------------- Home ---------------- */
.hero-copy { color: var(--muted); margin: 0 0 20px; max-width: 480px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.streak-flame-wrap {
  position: relative; width: 64px; height: 72px; display: grid; place-items: center;
  margin-bottom: 4px; color: var(--coral);
}
.streak-flame-svg { width: 62px; height: 72px; overflow: visible; }
.flame-layer, .flame-ember, .flame-halo { transform-box: fill-box; transform-origin: center bottom; will-change: transform, opacity; }
.streak-flame-wrap.is-active .flame-outer { animation: streak-sway 1.1s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(178, 46, 15, .3)); }
.streak-flame-wrap.is-active .flame-inner { animation: streak-flicker .85s ease-in-out infinite .06s; }
.streak-flame-wrap.is-active .flame-core { animation: streak-core-pulse .6s ease-in-out infinite .1s; }
.streak-flame-wrap.is-active .flame-halo { animation: streak-halo-pulse 1.4s ease-in-out infinite; }
.streak-flame-wrap.is-active .flame-ember { animation: streak-ember-rise 1.8s ease-in-out infinite; }
.streak-flame-wrap.is-active .ember-two { animation-delay: .7s; }
@keyframes streak-sway {
  0%, 100% { transform: rotate(-4deg) skewX(-2deg) scaleY(.97); }
  25% { transform: rotate(3deg) skewX(2deg) scaleY(1.05); }
  55% { transform: rotate(-2deg) skewX(-1deg) scaleY(1); }
  80% { transform: rotate(4deg) skewX(1deg) scaleY(1.06); }
}
@keyframes streak-flicker {
  0%, 100% { transform: translate(0, 1px) scale(.95, .95); }
  40% { transform: translate(2px, -3px) scale(1.08, 1.1); }
  75% { transform: translate(-2px, 0) scale(.97, 1.03); }
}
@keyframes streak-core-pulse {
  0%, 100% { transform: scale(.9, .94); opacity: .85; }
  50% { transform: translateY(-1px) scale(1.1, 1.16); opacity: 1; }
}
@keyframes streak-halo-pulse {
  0%, 100% { transform: scale(.85); opacity: .1; }
  50% { transform: scale(1.1); opacity: .24; }
}
@keyframes streak-ember-rise {
  0%, 100% { transform: translateY(2px) scale(.5); opacity: 0; }
  30% { opacity: .9; }
  75% { transform: translateY(-16px) scale(1); opacity: 0; }
}

/* Níveis do fogo (js/fogo.js): fica maior e mais vivo a cada marco. */
.streak-flame-wrap .flame-sparkle, .streak-flame-wrap .flame-rays { transform-box: fill-box; transform-origin: center; }
.streak-flame-wrap.fogo-n2 .streak-flame-svg { transform: scale(1.06); }
.streak-flame-wrap.fogo-n3 .streak-flame-svg { transform: scale(1.1); }
.streak-flame-wrap.fogo-n4 .streak-flame-svg { transform: scale(1.14); }
.streak-flame-wrap.fogo-n5 .streak-flame-svg { transform: scale(1.18); }
.streak-flame-wrap.is-active.fogo-n2 .flame-outer { filter: drop-shadow(0 0 7px rgba(255, 61, 23, .55)); }
.streak-flame-wrap.is-active.fogo-n3 .flame-outer { filter: drop-shadow(0 0 9px rgba(124, 92, 255, .7)); }
.streak-flame-wrap.is-active.fogo-n4 .flame-outer { filter: drop-shadow(0 0 10px rgba(240, 185, 66, .75)); }
.streak-flame-wrap.is-active.fogo-n5 .flame-outer { filter: drop-shadow(0 0 11px rgba(255, 79, 163, .75)); }
.streak-flame-wrap.is-active .ember-three { animation: streak-ember-rise 1.8s ease-in-out infinite .35s; }
.streak-flame-wrap.is-active .flame-sparkle { animation: fogo-brilho 1.9s ease-in-out infinite; }
.streak-flame-wrap.is-active .sp-two { animation-delay: .6s; }
.streak-flame-wrap.is-active .sp-three { animation-delay: 1.2s; }
.streak-flame-wrap.is-active .flame-rays { animation: fogo-raios 9s linear infinite; }
.streak-flame-wrap:not(.is-active) .flame-sparkle, .streak-flame-wrap:not(.is-active) .flame-rays { opacity: 0; }
@keyframes fogo-brilho { 0%, 100% { transform: scale(.2) rotate(0deg); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { opacity: .2; } }
@keyframes fogo-raios { to { transform: rotate(360deg); } }
html.reduce-motion .streak-flame-wrap .flame-sparkle, html.reduce-motion .streak-flame-wrap .flame-rays { animation: none !important; }

/* Tela do fogo do dia (js/fogo.js → celebrarFogo). */
.seq-overlay { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(circle at 50% 38%, rgba(255, 122, 26, .22), rgba(9, 6, 26, .86) 62%); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s ease; }
.seq-overlay.fogo-tela-n3 { background: radial-gradient(circle at 50% 38%, rgba(124, 92, 255, .3), rgba(9, 6, 26, .88) 62%); }
.seq-overlay.fogo-tela-n4 { background: radial-gradient(circle at 50% 38%, rgba(240, 185, 66, .28), rgba(9, 6, 26, .88) 62%); }
.seq-overlay.fogo-tela-n5 { background: radial-gradient(circle at 50% 38%, rgba(255, 79, 163, .28), rgba(9, 6, 26, .88) 62%); }
.seq-overlay.is-aberta { opacity: 1; }
.seq-overlay.is-saindo { opacity: 0; }
.seq-card { width: min(380px, 100%); display: grid; justify-items: center; gap: 10px; text-align: center; color: #fff;
  transform: translateY(24px) scale(.96); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.seq-overlay.is-aberta .seq-card { transform: none; }
.seq-palco { position: relative; width: 200px; height: 190px; display: grid; place-items: center; }
.seq-brilho { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 60, .55), rgba(255, 120, 30, 0) 65%);
  animation: seq-brilho-entra .6s ease-out both .45s, seq-pulsa 1.8s ease-in-out infinite 1.05s; }
.fogo-tela-n3 .seq-brilho { background: radial-gradient(circle, rgba(140, 120, 255, .6), rgba(124, 92, 255, 0) 65%); }
.fogo-tela-n4 .seq-brilho { background: radial-gradient(circle, rgba(255, 214, 110, .6), rgba(240, 185, 66, 0) 65%); }
.fogo-tela-n5 .seq-brilho { background: radial-gradient(circle, rgba(255, 120, 190, .6), rgba(255, 79, 163, 0) 65%); }
.seq-palco .seq-fogo { width: 150px; height: 170px; margin: 0; }
.seq-palco .seq-fogo .streak-flame-svg { width: 138px; height: 160px; }
/* Fogo nascendo (estilo Duolingo): uma brasa aparece na base, a chama cresce
   achatada, estica para cima, assenta com um balanço e solta uma onda no chão.
   No fogo novo (.seq-evolui), a chama antiga carrega, há um clarão e a cor nova
   sobe de baixo para cima (2,3 s = EVOLUI_MS em js/fogo.js). */
.seq-overlay { --fogo-c: 255, 140, 40; }
.seq-overlay.fogo-tela-n2 { --fogo-c: 255, 70, 25; }
.seq-overlay.fogo-tela-n3 { --fogo-c: 124, 92, 255; }
.seq-overlay.fogo-tela-n4 { --fogo-c: 240, 185, 66; }
.seq-overlay.fogo-tela-n5 { --fogo-c: 255, 79, 163; }
.seq-chama { position: absolute; inset: 10px 25px; display: grid; place-items: center; transform-origin: 50% 90%; }
.seq-chama-agora { animation: seq-chama-nasce .95s cubic-bezier(.3, .7, .4, 1) both .25s; }
@keyframes seq-chama-nasce {
  0% { opacity: 0; transform: scale(.08, .05); }
  10% { opacity: 1; transform: scale(.16, .1); }
  35% { transform: scale(.6, .34); }
  55% { transform: scale(.82, 1.24); }
  72% { transform: scale(1.12, .9); }
  86% { transform: scale(.96, 1.05); }
  100% { opacity: 1; transform: scale(1, 1); }
}
/* As camadas de dentro acendem uma depois da outra. */
.seq-chama .streak-flame-wrap.is-active .flame-inner { animation: seq-camada .45s cubic-bezier(.3, 1.6, .5, 1) both .62s, streak-flicker .85s ease-in-out infinite 1.07s; }
.seq-chama .streak-flame-wrap.is-active .flame-core { animation: seq-camada .45s cubic-bezier(.3, 1.6, .5, 1) both .8s, streak-core-pulse .6s ease-in-out infinite 1.25s; }
@keyframes seq-camada { 0% { transform: scale(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes seq-brilho-entra { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.seq-brasa {
  position: absolute; left: 50%; bottom: 30px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #FFFFFF 0 25%, rgba(var(--fogo-c), 1) 60%, rgba(var(--fogo-c), 0) 72%);
  box-shadow: 0 0 18px 6px rgba(var(--fogo-c), .6); opacity: 0; animation: seq-brasa .75s ease-out both;
}
@keyframes seq-brasa {
  0% { opacity: 0; transform: scale(0); }
  25% { opacity: 1; transform: scale(1.1); }
  42% { transform: scale(.75); }
  58% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(2.4); }
}
.seq-onda {
  position: absolute; left: 50%; bottom: 18px; width: 150px; height: 34px; margin-left: -75px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(var(--fogo-c), .9); box-shadow: 0 0 14px rgba(var(--fogo-c), .6); opacity: 0;
  animation: seq-onda .7s ease-out both .9s;
}
@keyframes seq-onda { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }

/* Transformação para o fogo novo */
.seq-evolui .seq-chama-antes { animation: seq-evolui-antes 2.6s ease-in-out both .25s; }
@keyframes seq-evolui-antes {
  0% { opacity: 0; transform: scale(.08, .05); }
  4% { opacity: 1; transform: scale(.16, .1); }
  13% { transform: scale(.6, .34); }
  20% { transform: scale(.82, 1.24); }
  26% { transform: scale(1.12, .9); }
  31% { transform: scale(.96, 1.05); }
  36% { transform: scale(1, 1); filter: brightness(1); }
  63% { transform: scale(1, 1); filter: brightness(1); }
  72% { transform: scale(1.05, .95); filter: brightness(1.3); }
  79% { opacity: 1; transform: scale(1.1, 1.08); filter: brightness(2.2); }
  92% { opacity: 0; transform: scale(1.45, 1.35); filter: brightness(2.6); }
  100% { opacity: 0; transform: scale(1.45, 1.35); }
}
/* A chama antiga treme enquanto carrega. */
.seq-evolui .seq-chama-antes .seq-fogo { animation: seq-treme .07s linear 6 1.9s; }
@keyframes seq-treme { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -2px); } }
.seq-evolui .seq-chama-agora { animation: seq-chama-revela .8s cubic-bezier(.2, .8, .2, 1) both 2.3s; }
@keyframes seq-chama-revela {
  0% { clip-path: inset(100% -40% -10% -40%); transform: scale(1.18); filter: brightness(2.2); }
  55% { clip-path: inset(-40% -40% -10% -40%); transform: scale(1.14); filter: brightness(1.5); }
  78% { transform: scale(.95); }
  100% { clip-path: inset(-40% -40% -10% -40%); transform: scale(1); filter: brightness(1); }
}
.seq-evolui .seq-chama-agora .streak-flame-wrap.is-active .flame-inner { animation-delay: 2.5s, 2.95s; }
.seq-evolui .seq-chama-agora .streak-flame-wrap.is-active .flame-core { animation-delay: 2.65s, 3.1s; }
.seq-clarao {
  position: absolute; inset: -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(var(--fogo-c), .55) 30%, rgba(var(--fogo-c), 0) 62%);
  opacity: 0; animation: seq-clarao .7s ease-out both 2.3s;
}
@keyframes seq-clarao { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.seq-onda-evolui { bottom: 50%; width: 120px; height: 120px; margin: 0 0 -60px -60px; border-width: 4px; animation: seq-onda-evolui .85s cubic-bezier(.1, .7, .3, 1) both 2.32s; }
@keyframes seq-onda-evolui { 0% { opacity: 0; transform: scale(.3); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); border-width: 1px; } }
.seq-estouro { position: absolute; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; }
.seq-estouro i {
  position: absolute; left: -3px; top: -9px; width: 6px; height: 18px; border-radius: 6px; opacity: 0;
  background: linear-gradient(#FFFFFF, rgba(var(--fogo-c), 1)); box-shadow: 0 0 10px rgba(var(--fogo-c), .9);
  transform: rotate(var(--a)) translateY(-30px); animation: seq-estouro .9s cubic-bezier(.1, .7, .3, 1) both 2.32s;
}
.seq-estouro i:nth-child(even) { height: 11px; top: -5px; animation-duration: .75s; }
@keyframes seq-estouro { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-30px); } 8% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-120px) scaleY(.4); } }
/* No fogo novo, o selo "Novo fogo" aparece depois da transformação. */
.seq-evolui .seq-novo { animation-delay: 2.85s; }
.seq-overlay.seq-calmo .seq-brasa, .seq-overlay.seq-calmo .seq-onda, .seq-overlay.seq-calmo .seq-chama-antes { display: none; }
.seq-faisca { position: absolute; left: 50%; bottom: 40px; width: 7px; height: 7px; border-radius: 50%; background: #FFC24D; box-shadow: 0 0 10px #FF9A3D;
  opacity: 0; animation: seq-faisca 1.6s ease-out infinite; animation-delay: calc(var(--i) * .13s + .5s);
  --dx: calc((var(--i) - 6) * 13px); }
.fogo-tela-n3 .seq-faisca { background: #C9F1FF; box-shadow: 0 0 10px #7C5CFF; }
.fogo-tela-n4 .seq-faisca { background: #FFF1B8; box-shadow: 0 0 10px #F0B942; }
.fogo-tela-n5 .seq-faisca { background: #FFC8E6; box-shadow: 0 0 10px #FF4FA3; }
/* Número da sequência: o de ontem aparece, carrega e vira o de hoje com um
   estouro (anel de luz + faíscas). Cor sólida com brilho em text-shadow — nada
   de degradê recortado no texto, que no Safari aparecia com um quadrado. */
.seq-numero { --seq-g: 255, 128, 32; --seq-cor: #FFF3DC; position: relative; width: 100%; height: 96px; }
.fogo-tela-n3 .seq-numero { --seq-g: 140, 110, 255; --seq-cor: #F3EEFF; }
.fogo-tela-n4 .seq-numero { --seq-g: 240, 175, 50; --seq-cor: #FFF8E1; }
.fogo-tela-n5 .seq-numero { --seq-g: 255, 79, 163; --seq-cor: #FFF0F8; }
.seq-numero::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 170px; height: 130px; margin: -65px 0 0 -85px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--seq-g), .5), rgba(var(--seq-g), 0)); opacity: .3;
  animation: seq-luz .9s ease-out both 1.25s;
}
.seq-num {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap;
  font: 800 84px/96px var(--font-serif); letter-spacing: -.03em; color: var(--seq-cor);
  text-shadow: 0 0 2px rgba(var(--seq-g), .9), 0 0 14px rgba(var(--seq-g), .85), 0 0 36px rgba(var(--seq-g), .55), 0 3px 0 rgba(0, 0, 0, .25);
}
.seq-num-antes { opacity: 0; animation: seq-antes 1s cubic-bezier(.3, 0, .2, 1) both .45s; }
.seq-num-agora { animation: seq-agora .75s cubic-bezier(.2, .9, .3, 1) both 1.25s, seq-respira 2.6s ease-in-out infinite 2.2s; }
@keyframes seq-antes {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.85); }
  22% { opacity: .7; transform: translateX(-50%) scale(.92); }
  58% { opacity: .75; transform: translateX(-50%) scale(.94); }
  74% { opacity: .9; transform: translateX(-50%) scale(1.05); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-52px) scale(.55); }
}
@keyframes seq-agora {
  0% { opacity: 0; transform: translateX(-50%) translateY(44px) scale(.4); }
  45% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.3); }
  72% { transform: translateX(-50%) scale(.94); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes seq-respira {
  0%, 100% { text-shadow: 0 0 2px rgba(var(--seq-g), .9), 0 0 14px rgba(var(--seq-g), .85), 0 0 36px rgba(var(--seq-g), .55), 0 3px 0 rgba(0, 0, 0, .25); }
  50% { text-shadow: 0 0 3px rgba(var(--seq-g), 1), 0 0 20px rgba(var(--seq-g), 1), 0 0 52px rgba(var(--seq-g), .75), 0 3px 0 rgba(0, 0, 0, .25); }
}
@keyframes seq-luz { 0% { opacity: .3; transform: scale(.8); } 30% { opacity: 1; transform: scale(1.35); } 100% { opacity: .55; transform: scale(1); } }
.seq-anel {
  position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(var(--seq-g), .95); box-shadow: 0 0 18px rgba(var(--seq-g), .8), inset 0 0 12px rgba(var(--seq-g), .6);
  opacity: 0; animation: seq-anel .75s cubic-bezier(.1, .7, .3, 1) both 1.27s;
}
@keyframes seq-anel { 0% { opacity: 0; transform: scale(.3); border-width: 6px; } 8% { opacity: 1; } 100% { opacity: 0; transform: scale(2.8); border-width: 1px; } }
.seq-num-faiscas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.seq-num-faiscas i {
  position: absolute; left: -2px; top: -7px; width: 4px; height: 14px; border-radius: 4px;
  background: linear-gradient(#FFFFFF, rgba(var(--seq-g), 1)); box-shadow: 0 0 8px rgba(var(--seq-g), .9);
  opacity: 0; transform: rotate(var(--a)) translateY(-14px); animation: seq-num-faisca .8s cubic-bezier(.1, .7, .3, 1) both 1.28s;
}
.seq-num-faiscas i:nth-child(odd) { height: 9px; top: -4px; animation-duration: .65s; }
@keyframes seq-num-faisca {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(-16px) scaleY(1.2); }
  8% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-86px) scaleY(.4); }
}
.seq-overlay.seq-calmo .seq-num-antes, .seq-overlay.seq-calmo .seq-anel, .seq-overlay.seq-calmo .seq-num-faiscas { display: none; }
.seq-rotulo { margin-top: -6px; font: 600 15px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #FFD9A8; }
.fogo-tela-n3 .seq-rotulo { color: #D9CCFF; }
.fogo-tela-n4 .seq-rotulo { color: #FFE9A8; }
.seq-novo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 14px; color: #2B1400;
  background: linear-gradient(120deg, #FFE08A, #F2B632 60%, #FF9446); box-shadow: 0 8px 24px rgba(240, 185, 66, .4); animation: seq-surge .5s cubic-bezier(.34, 1.56, .64, 1) both 1.3s; }
.seq-msg { margin: 2px 0 4px; font-size: 16px; line-height: 1.4; color: #ECEAFB; max-width: 300px; animation: seq-surge .45s ease both 1.1s; }
.seq-semana { display: flex; gap: 8px; animation: seq-surge .45s ease both 1.2s; }
.seq-dia { display: grid; justify-items: center; gap: 4px; }
.seq-dia small { font: 600 11px var(--font-mono); color: rgba(255, 255, 255, .6); }
.seq-dia b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .18); }
.seq-dia b .icon { width: 16px; height: 16px; }
.seq-dia.is-feito b { background: linear-gradient(160deg, #FF9A3D, #EC5A22); border-color: transparent; color: #fff; }
.seq-dia.is-hoje b { background: linear-gradient(160deg, #FFC24D, #FF6A1A); border-color: #FFE08A; color: #fff; box-shadow: 0 0 16px rgba(255, 154, 61, .8);
  animation: seq-hoje .6s cubic-bezier(.34, 1.56, .64, 1) both 1.5s; }
.fogo-tela-n3 .seq-dia.is-feito b, .fogo-tela-n3 .seq-dia.is-hoje b { background: linear-gradient(160deg, #9FD8FF, #7C5CFF); box-shadow: 0 0 16px rgba(124, 92, 255, .7); border-color: #D9CCFF; }
.fogo-tela-n4 .seq-dia.is-feito b, .fogo-tela-n4 .seq-dia.is-hoje b { background: linear-gradient(160deg, #FFE08A, #F0A12E); border-color: #FFF1B8; }
.fogo-tela-n5 .seq-dia.is-feito b, .fogo-tela-n5 .seq-dia.is-hoje b { background: linear-gradient(160deg, #FF9AD1, #9B4DFF); border-color: #FFC8E6; }
.seq-dia.is-hoje small { color: #fff; }
.seq-frase {
  display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 12px 16px; border-radius: 16px; text-align: left;
  font-size: 14.5px; line-height: 1.4; font-weight: 600; color: #FFF3E0;
  background: linear-gradient(135deg, rgba(255, 154, 61, .16), rgba(255, 106, 26, .06)); border: 1px solid rgba(255, 194, 77, .28);
  animation: seq-surge .45s ease both 1.35s;
}
.seq-frase .icon-slot { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(160deg, #FFC24D, #FF6A1A); color: #fff; box-shadow: 0 0 14px rgba(255, 154, 61, .55); }
.seq-frase .icon-slot .icon { width: 16px; height: 16px; }
.fogo-tela-n3 .seq-frase { background: linear-gradient(135deg, rgba(124, 92, 255, .2), rgba(159, 216, 255, .06)); border-color: rgba(217, 204, 255, .3); color: #F1ECFF; }
.fogo-tela-n3 .seq-frase .icon-slot { background: linear-gradient(160deg, #9FD8FF, #7C5CFF); box-shadow: 0 0 14px rgba(124, 92, 255, .55); }
.fogo-tela-n4 .seq-frase { background: linear-gradient(135deg, rgba(255, 214, 110, .18), rgba(240, 161, 46, .06)); border-color: rgba(255, 233, 168, .32); }
.fogo-tela-n4 .seq-frase .icon-slot { background: linear-gradient(160deg, #FFE08A, #F0A12E); }
.fogo-tela-n5 .seq-frase { background: linear-gradient(135deg, rgba(255, 79, 163, .18), rgba(155, 77, 255, .08)); border-color: rgba(255, 200, 230, .3); }
.fogo-tela-n5 .seq-frase .icon-slot { background: linear-gradient(160deg, #FF9AD1, #9B4DFF); box-shadow: 0 0 14px rgba(255, 79, 163, .5); }
.seq-continuar { margin-top: 10px; min-width: 220px; justify-content: center; text-align: center; animation: seq-surge .45s ease both 1.5s; }
@keyframes seq-pulsa { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes seq-faisca { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), -130px) scale(.2); opacity: 0; } }
@keyframes seq-rola { from { transform: translateY(0); } to { transform: translateY(-84px); } }
@keyframes seq-surge { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes seq-hoje { 0% { transform: scale(.3); } 100% { transform: none; } }
.seq-overlay.seq-calmo * { animation: none !important; }

/* ---------------- Auras do avatar (loja de cosméticos) ---------------- */
.aura-fx { transform-box: fill-box; transform-origin: center; }

/* Brilho: dois anéis suaves "respirando" atrás do personagem. */
.aura-glow-outer, .aura-glow-inner, .aura-glow-core { transform-box: fill-box; transform-origin: center; will-change: transform, opacity; }
.aura-glow-outer { opacity: .26; filter: blur(2px); animation: aura-glow-breathe 2.8s ease-in-out infinite; }
.aura-glow-inner { opacity: .42; animation: aura-glow-breathe 2.8s ease-in-out infinite .3s; }
.aura-glow-core { opacity: .55; animation: aura-glow-flicker 1.9s ease-in-out infinite; }
@keyframes aura-glow-breathe {
  0%, 100% { transform: scale(1); opacity: .26; }
  50% { transform: scale(1.09); opacity: .5; }
}
@keyframes aura-glow-flicker {
  0%, 100% { opacity: .42; }
  50% { opacity: .78; }
}

/* Faíscas: pequenas estrelas coloridas piscando em posições diferentes. */
.aura-spark-item { transform-box: fill-box; transform-origin: center; opacity: 0; will-change: transform, opacity; }
.aura-spark-a { animation: aura-spark-twinkle 1.8s ease-in-out infinite; }
.aura-spark-b { animation: aura-spark-twinkle 2.1s ease-in-out infinite .4s; }
.aura-spark-c { animation: aura-spark-twinkle 1.6s ease-in-out infinite .9s; }
.aura-spark-d { animation: aura-spark-twinkle 2.3s ease-in-out infinite .2s; }
.aura-spark-e { animation: aura-spark-twinkle 1.9s ease-in-out infinite 1.1s; }
@keyframes aura-spark-twinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* Fogo (aura mística, violeta/magenta): par de chamas espelhadas atrás dos
   ombros, com balanço mais lento e "sonhador" que o fogo real da sequência,
   e brasas próprias que sobem soltas em vez de faíscas fixas. */
.aura-flame-halo, .aura-flame-outer, .aura-flame-inner, .aura-flame-core, .aura-flame-ember {
  transform-box: fill-box; transform-origin: center bottom; will-change: transform, opacity;
}
.aura-flame-unit { mix-blend-mode: screen; }
.aura-flame-outer { animation: aura-flame-sway 2.1s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(90, 46, 145, .28)); }
.aura-flame-inner { animation: aura-flame-flicker 1.5s ease-in-out infinite .1s; }
.aura-flame-core { animation: aura-flame-pulse 1.1s ease-in-out infinite .15s; }
.aura-flame-halo { animation: aura-flame-halo-pulse 2.4s ease-in-out infinite; }
.aura-flame-ember { animation: aura-flame-ember-rise 2.6s ease-in-out infinite; opacity: 0; }
.aura-flame-ember-b { animation-delay: 1s; }
@keyframes aura-flame-sway {
  0%, 100% { transform: rotate(-2deg) scaleY(.98); }
  30% { transform: rotate(3deg) scaleY(1.04); }
  60% { transform: rotate(-3deg) scaleY(1.01); }
  85% { transform: rotate(2deg) scaleY(1.05); }
}
@keyframes aura-flame-flicker {
  0%, 100% { transform: translate(0, 1px) scale(.97, .97); }
  50% { transform: translate(1px, -2px) scale(1.05, 1.08); }
}
@keyframes aura-flame-pulse {
  0%, 100% { transform: scale(.92, .95); opacity: .85; }
  50% { transform: scale(1.06, 1.1); opacity: 1; }
}
@keyframes aura-flame-halo-pulse {
  0%, 100% { transform: scale(.88); opacity: .12; }
  50% { transform: scale(1.1); opacity: .26; }
}
@keyframes aura-flame-ember-rise {
  0%, 100% { transform: translateY(2px) scale(.5); opacity: 0; }
  25% { opacity: .8; }
  70% { transform: translateY(-14px) scale(1); opacity: 0; }
}

/* Nos avatares pequenos (navegação, ranking, opções da loja) as auras ficam
   estáticas: no tamanho mini o movimento não se vê e só pesa a lista. */
.avatar-art-mini .aura-glow-outer, .avatar-art-mini .aura-glow-inner, .avatar-art-mini .aura-glow-core,
.avatar-art-mini .aura-spark-item,
.avatar-art-mini .aura-flame-outer, .avatar-art-mini .aura-flame-inner, .avatar-art-mini .aura-flame-core, .avatar-art-mini .aura-flame-halo, .avatar-art-mini .aura-flame-ember,
.avatar-art-option .aura-glow-outer, .avatar-art-option .aura-glow-inner, .avatar-art-option .aura-glow-core,
.avatar-art-option .aura-spark-item,
.avatar-art-option .aura-flame-outer, .avatar-art-option .aura-flame-inner, .avatar-art-option .aura-flame-core, .avatar-art-option .aura-flame-halo, .avatar-art-option .aura-flame-ember {
  animation: none;
}
.avatar-art-mini .aura-spark-item, .avatar-art-option .aura-spark-item { opacity: .8; }
.avatar-art-mini .aura-flame-ember, .avatar-art-option .aura-flame-ember { opacity: .7; }




.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.metric { padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.metric-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.metric-value { font-family: var(--font-serif); font-size: 24px; }
.metric-detail { font-size: 11.5px; color: var(--muted); }

.home-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.chart-card, .achievement-card { padding: 22px; }
.chart-svg { width: 100%; height: auto; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-label { font-size: 10px; fill: var(--muted); font-family: var(--font-mono); }
.chart-area { fill: var(--blue-soft); stroke: none; }
.chart-line { fill: none; stroke: var(--blue); stroke-width: 2.2; }
.chart-dot { fill: var(--blue); }

.achievement-list { display: flex; flex-direction: column; gap: 12px; }
.achievement { display: flex; align-items: center; gap: 11px; }
.achievement-badge {
  width: 34px; height: 34px; border-radius: 10px; background: var(--gold-soft); color: var(--gold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.achievement-badge.locked { background: var(--surface-2); color: var(--muted); }
.achievement-copy { display: flex; flex-direction: column; flex: 1; }
.achievement-copy strong { font-size: 13px; }
.achievement-copy span { font-size: 11.5px; color: var(--muted); }

/* ---------------- Config / Quiz ---------------- */
.tabs { display: flex; gap: 6px; margin: 20px 0 18px; border-bottom: 1px solid var(--border); }
.tab { background: transparent; border: none; padding: 10px 4px; margin-right: 20px; color: var(--muted); font-weight: 600; font-size: 13px; border-bottom: 2px solid transparent; }
.tab.active { color: var(--ink); border-color: var(--blue); }

.form-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
.form-card, .form-side { padding: 24px; }
.field { margin-bottom: 22px; }
.field-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.field-hint { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.field-hint-inline { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 6px; }

.focus-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.focus-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 12.5px; }
.focus-item label { display: flex; align-items: center; gap: 9px; }
.rate { color: var(--teal); font-size: 11.5px; font-family: var(--font-mono); }
.rate.weak { color: var(--coral); }

.switch-row { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.form-note { font-size: 12px; color: var(--muted); margin: 4px 0 18px; }
.form-submit { width: 100%; justify-content: center; padding: 12px; }

.form-side h3 { font-family: var(--font-serif); font-size: 18px; margin: 10px 0 10px; }
.form-side p { color: var(--muted); font-size: 12.5px; }

.exam-list { display: flex; flex-direction: column; gap: 10px; }
.exam-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius-sm); }
.exam-row strong { display: block; font-size: 13.5px; }
.exam-row span { font-size: 11.5px; color: var(--muted); }

.question-shell { max-width: 720px; margin: 0 auto; }
.quiz-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-family: var(--font-mono); margin-bottom: 8px; }
.timer { color: var(--coral); }
.quiz-track { height: 5px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
.quiz-track span { display: block; height: 100%; background: var(--blue); border-radius: 4px; transition: width 0.3s ease; }

.question-card { padding: 26px; }
.question-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.subject-tag {
  font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue);
}
.subject-tag[data-subject="Matemática"] { background: var(--teal-soft); color: var(--teal); }
.subject-tag[data-subject="Direito"] { background: var(--gold-soft); color: var(--gold); }
.subject-tag[data-subject="Informática"] { background: var(--coral-soft); color: var(--coral); }
.question-index { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }
.text-base { background: var(--surface-2, rgba(0,0,0,0.03)); border-left: 3px solid var(--gold, #E8B94A); border-radius: 8px; padding: 14px 16px; margin: 0 0 18px; }
.text-base-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin-bottom: 6px; }
.text-base p { font-size: 15px; line-height: 1.55; margin: 0 0 10px; }
.text-base p:last-child { margin-bottom: 0; }
.question-text { font-family: var(--font-serif); font-size: 19px; font-weight: 400; line-height: 1.4; margin: 0 0 20px; }
.review-item > p:not(.explanation) { white-space: pre-line; }
.question-highlight { background: var(--gold-soft); color: inherit; border-radius: 3px; box-shadow: 0 0 0 2px var(--gold-soft); padding: 0 2px; font-weight: 700; }

.options { display: flex; flex-direction: column; gap: 9px; }
.option {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 13.5px; transition: border-color 0.15s ease, background 0.15s ease;
}
.option:hover:not(:disabled) { border-color: var(--blue); }
.option.selected { border-color: var(--blue); background: var(--blue-soft); }
.option-letter {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-family: var(--font-mono); flex-shrink: 0;
}
.option.rapid-correct { border-color: var(--teal); background: var(--teal-soft); }
.option.rapid-incorrect { border-color: var(--coral); background: var(--coral-soft); }
.option:disabled { cursor: default; }
.answer-icon { margin-left: auto; }

.quiz-actions { display: flex; justify-content: space-between; margin-top: 22px; }

/* ---------------- Result ---------------- */
.result-hero { padding: 28px; display: flex; align-items: center; gap: 32px; margin-bottom: 16px; flex-wrap: wrap; }
.result-score { text-align: center; }
.result-percent { font-family: var(--font-serif); font-size: 44px; font-weight: 700; }
.result-caption { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.result-breakdown { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 14px; }
.result-bar-line { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.result-meter { height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.result-meter span { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.result-meter.error span { background: var(--coral); }

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.result-card { padding: 22px; }
.recommendation { font-size: 13px; color: var(--muted); line-height: 1.55; }
.subject-bars > div { margin-bottom: 14px; }
.subject-bars > div:last-child { margin-bottom: 0; }
.subject-line-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.subject-bar { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.subject-bar span { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.subject-bar.teal span { background: var(--teal); }
.subject-bar.gold span { background: var(--gold); }
.subject-bar.coral span { background: var(--coral); }

.review-list { display: flex; flex-direction: column; gap: 14px; }
.review-item p { margin: 8px 0 0; font-size: 13px; }
.review-item .explanation { color: var(--muted); font-size: 12.5px; }

/* ---------------- Rapid ---------------- */
.flash-config { padding: 24px; max-width: 560px; }
.flash-card { padding: 26px; max-width: 640px; }
.flash-answer { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); }
.flash-answer.answer-success { background: var(--teal-soft); }
.flash-answer.answer-error { background: var(--coral-soft); }
.flash-answer strong { display: block; margin-bottom: 4px; }
.flash-answer small { display: block; color: var(--muted); margin-top: 4px; }
.flash-actions { margin-top: 18px; display: flex; justify-content: flex-end; }
.answer-hint { color: var(--muted); font-size: 12px; }
.flash-finish { padding: 32px; text-align: center; max-width: 480px; margin: 0 auto; }

/* ---------------- Profile ---------------- */
.profile-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.profile-summary { padding: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.profile-summary > .icon-slot { width: 24px; height: 24px; margin-bottom: 2px; }
.profile-summary > .icon-slot .icon { width: 21px; height: 21px; stroke-width: 1.8; }
.profile-summary > .streak-summary-icon { width: 24px; height: 28px; margin-bottom: 0; justify-content: flex-start; }
.profile-summary > .streak-summary-icon .streak-flame-svg { width: 22px; height: 27px; }
.profile-summary:nth-child(1) > .icon-slot { color: var(--blue); }
.profile-summary:nth-child(2) > .icon-slot { color: var(--teal); }
.profile-summary:nth-child(3) > .icon-slot { color: var(--coral); }
.profile-summary:nth-child(4) > .icon-slot { color: var(--gold); }
.profile-summary strong { font-family: var(--font-serif); font-size: 22px; color: var(--ink); }
.profile-summary span { font-size: 11.5px; }
.profile-season-card {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center;
  padding: 20px 24px; margin-bottom: 18px; background: linear-gradient(120deg, var(--surface), var(--gold-soft));
}
.profile-season-line { display: flex; align-items: center; gap: 9px; margin-top: 7px; flex-wrap: wrap; }
.profile-season-line > strong { font-family: var(--font-serif); font-size: 22px; color: var(--ink); }
.profile-season-line > span, .profile-season-main p { color: var(--muted); font-size: 12px; }
.profile-season-main p { margin: 7px 0 0; }
.division-badge {
  display: inline-flex; align-items: center; gap: 5px; color: var(--division-color);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--division-color) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--division-color) 30%, transparent);
  border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 700;
}
.division-badge .icon { width: 13px; height: 13px; }
.season-progress-head { display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.season-progress-head strong { color: var(--ink); }
.season-progress-track { height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 7px; }
.season-progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: inherit; transition: width .45s ease; }
.profile-season-progress .btn-ghost { margin-top: 10px; }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-card { padding: 24px; }
.profile-card.full-width { grid-column: 1 / -1; }
.profile-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.profile-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--gold-soft); color: var(--gold);
  font-family: var(--font-mono); font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.profile-intro h2 { font-family: var(--font-serif); font-size: 18px; margin: 0; }
.profile-intro p { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.profile-edit { margin-left: auto; }
.level-row { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 7px; }
.level-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: 4px; transition: width 0.5s ease; }
.trend-up { color: var(--teal); font-size: 12px; }

.attention-list { display: flex; flex-direction: column; gap: 10px; }
.attention-item { display: flex; justify-content: space-between; padding: 11px 14px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 12.5px; }
.attention-item small { color: var(--muted); }

.title-collection { grid-column: 1 / -1; }
.title-current {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 13px 15px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--gold-soft), var(--surface-2));
}
.title-current-label { color: var(--muted); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.title-current strong { font-family: var(--font-serif); font-size: 17px; }
.title-current small { color: var(--muted); font-size: 11.5px; }
.title-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.title-item {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); text-align: left; color: var(--ink);
}
button.title-item { cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
button.title-item:hover { transform: translateY(-2px); border-color: var(--blue); }
.title-item.locked { opacity: .48; filter: saturate(.35); }
.title-item.equipped { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.title-medal {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); color: var(--muted);
}
.title-copy { display: flex; flex-direction: column; min-width: 0; }
.title-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.title-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.title-copy em { color: var(--muted); font: 9px var(--font-mono); font-style: normal; text-transform: uppercase; margin-top: 4px; }
.title-equipped { position: absolute; top: 8px; right: 9px; color: var(--gold); font: 9px var(--font-mono); text-transform: uppercase; }
.xp-earned { margin-top: 8px; color: var(--teal); font: 600 12px var(--font-mono); }
.coins-earned { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--gold); font: 600 12px var(--font-mono); }
.coins-earned .icon-slot { width: 13px; height: 13px; }
.coins-earned .icon-slot .icon { width: 13px; height: 13px; }

/* ---------------- History ---------------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 16px; flex-wrap: wrap; gap: 12px; }
.toolbar-actions { display: flex; gap: 10px; }
.history-list { display: flex; flex-direction: column; }
.history-row { display: grid; grid-template-columns: 1.2fr 1.4fr 0.9fr auto; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.history-row:last-child { border-bottom: none; }
.history-date strong { display: block; font-size: 13px; }
.history-date span { font-size: 11.5px; color: var(--muted); }
.history-scope { font-size: 12.5px; color: var(--muted); }
.history-score { text-align: right; }
.history-score span { font-family: var(--font-serif); font-size: 16px; display: block; }
.history-score small { font-size: 11px; color: var(--muted); }

/* ---------------- Onboarding modal ---------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,12,20,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100;
}
.onboarding-modal { position: relative; width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; padding: 30px; }
.modal-close { position: absolute; top: 16px; right: 16px; }
.modal-mark {
  width: 40px; height: 40px; border-radius: 12px; background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.onboarding-modal h2 { font-family: var(--font-serif); font-size: 21px; margin: 0 0 8px; }
.onboarding-modal > p { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.modal-field { display: block; margin-bottom: 18px; }
.modal-field > span { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 8px; }
.modal-field input[type="text"] {
  width: 100%; padding: 10px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink);
}
.onboarding-topics { display: flex; flex-direction: column; gap: 7px; max-height: 180px; overflow-y: auto; padding-right: 4px; }
.onboarding-topics label { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 7px 10px; background: var(--surface-2); border-radius: var(--radius-sm); }
.onboarding-topics label.coming-soon { opacity: 0.55; }
.onboarding-topics small { margin-left: auto; color: var(--muted); font-size: 10.5px; }
.goal-choice { display: flex; gap: 8px; }

/* ---------------- Ranking / temporadas ---------------- */
.ranking-hero {
  display: grid; grid-template-columns: 1.5fr .8fr; gap: 24px; align-items: center;
  padding: 26px; margin-bottom: 16px; background: linear-gradient(120deg, var(--surface), var(--blue-soft));
}
.ranking-hero-copy h2 { font-family: var(--font-serif); font-size: 23px; margin: 8px 0 9px; }
.ranking-hero-copy p { color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 58ch; margin: 0 0 18px; }
.ranking-hero-division {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.28);
}
.ranking-hero-division > strong { font-family: var(--font-serif); font-size: 46px; line-height: 1; margin-top: 8px; }
.ranking-hero-division > span, .ranking-hero-division > small { color: var(--muted); font-size: 11.5px; text-align: center; }
.ranking-hero-division > small { margin-top: 4px; }
.ranking-layout { display: grid; grid-template-columns: 1.5fr .8fr; gap: 16px; align-items: start; }
.ranking-board, .ranking-side-card { padding: 22px; }
/* Lista com rolagem interna: ~10 linhas visíveis; o scroll mostra até 100 jogadores. */
.ranking-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 640px; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 8px 14px 8px; margin: -14px -8px -14px -8px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.ranking-list::-webkit-scrollbar { width: 8px; }
.ranking-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.ranking-list > .ranking-row { flex: 0 0 auto; }
.ranking-row {
  display: grid; grid-template-columns: 36px 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface-2);
}
.ranking-row.is-you { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 2px rgba(95,114,216,.1); }
.ranking-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: var(--muted); }
.ranking-empty > i { color: var(--blue); font-size: 28px; margin-bottom: 3px; }
.ranking-empty strong { color: var(--ink); font-size: 14px; }
.ranking-empty > span:not(.ranking-loader) { max-width: 42ch; font-size: 12px; line-height: 1.5; }
.ranking-empty .btn { margin-top: 8px; }
.ranking-loader { width: 25px; height: 25px; border: 3px solid var(--blue-soft); border-top-color: var(--blue); border-radius: 50%; animation: ranking-spin .8s linear infinite; }
@keyframes ranking-spin { to { transform: rotate(360deg); } }
.ranking-position { color: var(--muted); font: 700 12px var(--font-mono); text-align: center; }
/* ---- Pódio: 1º ouro, 2º prata, 3º bronze ---- */
.ranking-row.tier { position: relative; overflow: hidden; isolation: isolate; padding: 12px 12px; grid-template-columns: 40px 36px minmax(0, 1fr) auto; }
.ranking-row.tier .ranking-position { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.ranking-row.tier .ranking-person strong, .ranking-row.tier .ranking-score { color: var(--tier-ink); font-size: 14px; }
.ranking-row.tier .ranking-person small, .ranking-row.tier .ranking-score small { color: var(--tier-sub); }
.ranking-row.tier .ranking-person strong em { color: var(--tier-ink); background: rgba(255,255,255,.55); padding: 1px 6px; border-radius: 99px; }
.ranking-row.tier .ranking-avatar { width: 36px; height: 36px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tier-ring); }
.ranking-row.tier .ranking-avatar .avatar-art { width: 36px; height: 36px; }
.ranking-row.tier.is-you { outline: 2px solid var(--blue); outline-offset: 1px; }
.ranking-row.tier::before, .ranking-row.tier::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
/* faixa de brilho que atravessa a barra */
.ranking-row.tier::after { z-index: 0; background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.7) 50%, transparent 64%); transform: translateX(-130%); animation: rank-shine 3.6s ease-in-out infinite; }

.ranking-row.tier-1 {
  --tier-ink: #3d2b00; --tier-sub: #7a5a0a; --tier-ring: #e0a800;
  background: linear-gradient(105deg, #fff3c4 0%, #ffd966 34%, #f6b91f 62%, #ffe28a 100%);
  border-color: #e0a800;
  box-shadow: 0 8px 22px rgba(224,168,0,.38), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 0 rgba(160,110,0,.25);
  animation: rank-glow 2.8s ease-in-out infinite;
}
/* brilhos (estrelinhas) piscando no ouro */
.ranking-row.tier-1::before {
  background:
    radial-gradient(circle at 9% 28%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 36% 78%, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 63% 22%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 70%, #fff 0 2px, transparent 3px);
  animation: rank-twinkle 2.2s ease-in-out infinite;
}
.ranking-row.tier-2 {
  --tier-ink: #26303f; --tier-sub: #5a6577; --tier-ring: #9aa6b8;
  background: linear-gradient(105deg, #f7f9fc 0%, #dfe4ec 38%, #c3cbd8 64%, #eef1f6 100%);
  border-color: #aab4c4;
  box-shadow: 0 6px 16px rgba(120,134,158,.32), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(90,104,128,.2);
}
.ranking-row.tier-2::after { animation-duration: 4.6s; animation-delay: .8s; }
.ranking-row.tier-3 {
  --tier-ink: #3b1f08; --tier-sub: #7b4a22; --tier-ring: #c47a3d;
  background: linear-gradient(105deg, #fbe3cc 0%, #e9ad7a 38%, #cf8445 64%, #f4cfa8 100%);
  border-color: #c47a3d;
  box-shadow: 0 6px 16px rgba(180,106,48,.32), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(120,66,22,.25);
}
.ranking-row.tier-3::after { animation-duration: 5.2s; animation-delay: 1.6s; }
@keyframes rank-shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes rank-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes rank-glow { 0%, 100% { box-shadow: 0 8px 22px rgba(224,168,0,.30), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 0 rgba(160,110,0,.25); } 50% { box-shadow: 0 10px 30px rgba(255,200,40,.62), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(160,110,0,.25); } }
/* Reduzir animações: ajuste do próprio app (Perfil → engrenagem). */
html.reduce-motion .ranking-row.tier,
html.reduce-motion .ranking-row.tier::before,
html.reduce-motion .ranking-row.tier::after { animation: none !important; }
.ranking-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: block; }
.ranking-avatar .avatar-art { width: 34px; height: 34px; display: block; }
.ranking-person { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ranking-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ranking-person strong em { color: var(--blue); font: 700 10px var(--font-mono); font-style: normal; text-transform: uppercase; }
.ranking-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10.5px; }
.ranking-score { color: var(--ink); font: 700 13px var(--font-mono); white-space: nowrap; }
.ranking-score small { color: var(--muted); font-size: 10px; font-weight: 500; }
.ranking-side-card .section-title { margin: 8px 0 18px; }
.ranking-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ranking-stat-grid > div { display: flex; flex-direction: column; gap: 3px; padding: 11px; background: var(--surface-2); border-radius: var(--radius-sm); }
.ranking-stat-grid strong { font-family: var(--font-serif); font-size: 20px; }
.ranking-stat-grid span { color: var(--muted); font-size: 10.5px; }
.season-next { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); }
.season-next > span { color: var(--muted); font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.season-next > strong { display: block; font-size: 12.5px; margin-top: 5px; }
.ranking-side-card > .field-hint { margin: 18px 0 0; line-height: 1.5; }
.profile-history-card .history-list { margin: 0 -24px; border-top: 1px solid var(--border); }
.profile-history-card .btn-ghost { margin-top: 12px; }

/* ---------------- Toasts ---------------- */
.toast-container { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 13px; box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  opacity: 0; transform: translateX(14px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: none; }

/* ---------------- Authentication ---------------- */
.auth-backdrop { align-items: center; padding: 20px; }
.auth-modal {
  position: relative; width: min(100%, 430px); padding: 30px;
  box-shadow: 0 24px 70px rgba(24, 13, 73, .28);
}
.auth-modal .modal-close { position: absolute; top: 15px; right: 15px; }
.auth-mark {
  width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px;
  border-radius: 13px; background: linear-gradient(140deg, #7C5CFF, #4B31C4);
  color: #fff; font-family: var(--font-serif); font-size: 21px; font-weight: 800;
}
.auth-modal h2 { margin: 0 0 8px; font-family: var(--font-serif); font-size: 25px; }
.auth-subtitle { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.auth-field { display: grid; gap: 7px; margin-bottom: 14px; }
.auth-field span { font-size: 12px; font-weight: 700; }
.auth-field input {
  width: 100%; padding: 12px 13px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); outline: none;
}
.auth-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.btn-google { background: var(--surface); border-color: var(--border); color: var(--ink); }
.btn-google:hover { background: var(--surface-2); }
.google-mark { color: #4285F4; font-weight: 800; font-size: 16px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.auth-link { padding: 0; border: none; background: transparent; color: var(--blue); font-size: 12px; font-weight: 700; }
.auth-link:hover { text-decoration: underline; }
.auth-error, .auth-notice { margin: 12px 0; padding: 10px 12px; border-radius: 10px; font-size: 12px; }
.auth-error { background: var(--coral-soft); color: var(--coral); }
.auth-notice { background: var(--teal-soft); color: var(--teal); }
.auth-account-card { display: flex; align-items: center; gap: 12px; margin: 18px 0; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.auth-account-card > i { font-size: 22px; color: var(--blue); }
.auth-account-card div { display: grid; gap: 2px; min-width: 0; }
.auth-account-card strong, .auth-account-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-account-card span { color: var(--muted); font-size: 12px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .home-grid, .result-grid, .form-layout, .profile-grid, .ranking-hero, .ranking-layout { grid-template-columns: 1fr; }
  .profile-season-card { grid-template-columns: 1fr; gap: 14px; }
  .metrics, .profile-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .side-rail { display: none; }
  .mobile-nav {
    display: flex; justify-content: space-around; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--surface); border-top: 1px solid var(--border); padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    z-index: 50;
  }
  .mobile-nav { justify-content: center; overflow-x: hidden; }
  .mobile-nav button { min-width: 0; flex: 1 1 0; max-width: 76px; background: transparent; border: none; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 9.5px; padding: 4px 6px; }
  .mobile-nav button.active { color: var(--blue); }
  .mobile-nav button i { font-size: 18px; }
  .page-wrap { padding: 20px 16px 90px; }
  .topbar { padding: 14px 16px; }
  .crumb { display: none; }
  .topbar-actions { gap: 8px; }
  .theme-toggle, .auth-top-button {
    flex: 0 0 36px; width: 36px; height: 36px; max-width: 36px;
    justify-content: center; padding: 0; border-radius: 10px;
  }
  .theme-toggle > span:not(.icon-slot), .auth-top-button > span:not(.icon-slot) { display: none; }
  .theme-toggle .icon-slot, .auth-top-button .icon-slot { display: inline-flex; }
  .profile-mini-btn > span:not(.avatar) { display: none; }
  .metrics, .profile-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .history-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .history-scope { display: none; }
  .title-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .topbar-coin-badge { padding-left: 9px; padding-right: 9px; }
  .theme-toggle { padding-left: 9px; padding-right: 9px; }
  .theme-toggle > span:not(.icon-slot) { display: none; }
  .auth-modal { padding: 24px 18px; }
}

/* =================================================================
   Camada nova — identidade violeta + onboarding em etapas
   ================================================================= */

.side-rail {
  background: linear-gradient(175deg, #221757 0%, #16103A 55%, #120C2E 100%);
}
.side-rail::after {
  content: ""; position: absolute; inset: auto -40% -10% -40%; height: 240px;
  background: radial-gradient(60% 60% at 50% 100%, rgba(123, 92, 255, .38), transparent 70%);
  pointer-events: none;
}
.side-rail > * { position: relative; z-index: 1; }
.brand-seal { background: linear-gradient(140deg, #7C5CFF, #4B31C4) !important; color: #fff !important; }
.side-nav button.active { background: rgba(124, 92, 255, .22); }

.surface { box-shadow: var(--shadow); }
.btn-primary, .btn-blue {
  background: linear-gradient(135deg, #7C5CFF, #5A38DE);
  border-color: transparent; color: #fff;
}
.btn-primary:hover, .btn-blue:hover { filter: brightness(1.06); }

/* ---------- Onboarding em etapas ---------- */
.onboarding-modal { max-width: 620px; width: 100%; padding: 26px 28px 24px; }

.wizard-steps {
  display: flex; gap: 4px; margin: 18px 0 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.wizard-step {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: 8px; background: none; border: 0; padding: 0; opacity: .42;
  transition: opacity .2s ease;
}
.wizard-step.is-active, .wizard-step.is-done { opacity: 1; }
.wizard-dot {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; border: 1.5px solid var(--border);
  color: var(--muted); background: var(--surface-2);
}
.wizard-step.is-active .wizard-dot { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.wizard-step.is-done .wizard-dot { border-color: transparent; background: linear-gradient(135deg, #7C5CFF, #5A38DE); color: #fff; }
.wizard-label { font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 1.2; text-align: center; }
.wizard-step.is-active .wizard-label { color: var(--ink); }

.wizard-panel { animation: wizardIn .26s ease; }
@keyframes wizardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Reduzir animações: ajuste do próprio app (Perfil → engrenagem). */
html.reduce-motion .wizard-panel { animation: none; }

.wizard-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
}
.wizard-count { font: 11.5px var(--font-mono); color: var(--muted); }
.btn-ghost { background: none; border: 0; color: var(--muted); font-weight: 600; font-size: 13px; padding: 8px 4px; }
.btn-ghost:hover { color: var(--ink); }

/* Etapa 2 — matérias como blocos */
.subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.subject-tile {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--ink); transition: border-color .15s ease, background .15s ease;
}
.subject-tile i { font-size: 20px; color: var(--muted); }
.subject-tile strong { display: block; font-size: 13.5px; font-weight: 600; }
.subject-tile small { color: var(--muted); font-size: 11px; }
.subject-tile.selected { border-color: var(--blue); background: var(--blue-soft); }
.subject-tile.selected i { color: var(--blue); }

/* Etapa 3 — conteúdos, agora organizados por matéria */
.topic-board {
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 10px 4px 4px; margin-top: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.topic-board::-webkit-scrollbar { width: 8px; }
.topic-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.topic-group + .topic-group { margin-top: 10px; }
.topic-group-head {
  position: sticky; top: 0; z-index: 2; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; background: var(--surface-2); border-radius: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
}
.topic-group.is-open .topic-group-head { border-radius: 8px 8px 0 0; }
.topic-group-actions { display: flex; align-items: center; gap: 8px; }
.topic-group-head button { background: none; border: 0; color: var(--blue); font-size: 11px; font-weight: 600; }
.topic-group-head i { font-size: 14px; }
/* Acordeão: só a matéria aberta mostra a lista de conteúdos — evita a
   rolagem enorme no celular quando várias matérias têm muitos conteúdos. */
.topic-group .topic-list { display: none; }
.topic-group.is-open .topic-list { display: grid; }
.topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px 6px; }
.topic-item {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center;
  gap: 9px; min-height: 42px; padding: 8px 10px;
  border-radius: 10px; background: var(--surface); border: 1px solid transparent;
  font-size: 12.5px; line-height: 1.3; cursor: pointer;
}
.topic-item:hover { border-color: var(--border); }
.topic-item input { accent-color: var(--blue); margin: 0; }
.topic-item .topic-text { min-width: 0; }
.topic-item .topic-name { display: block; overflow-wrap: anywhere; }
.topic-item .topic-meta { display: block; font: 9.5px var(--font-mono); color: var(--teal); margin-top: 2px; }
.topic-item.has-checked { border-color: var(--blue); background: var(--blue-soft); }
.topic-item.soon { opacity: .55; cursor: not-allowed; }
.topic-item.soon .topic-meta { color: var(--muted); }

/* Etapa 4 — meta diária */
.goal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.goal-option {
  padding: 16px 12px; border-radius: var(--radius-sm); text-align: center;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink);
}
.goal-option strong { display: block; font-family: var(--font-serif); font-size: 24px; font-weight: 700; }
.goal-option small { color: var(--muted); font-size: 11px; }
.goal-option.selected { border-color: var(--blue); background: var(--blue-soft); }

/* Etapa 5 — revisão */
.review-list { display: grid; gap: 8px; }
.review-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 13px;
}
.review-row span:first-child { color: var(--muted); white-space: nowrap; }
.review-row strong { text-align: right; font-weight: 600; }
.review-note {
  margin-top: 14px; padding: 14px; border-radius: var(--radius-sm);
  background: linear-gradient(140deg, #4C34B8, #2E1E77); color: #fff; font-size: 12.5px; line-height: 1.5;
}

@media (max-width: 720px) {
  .onboarding-modal { padding: 20px 16px; }
  .wizard-label { display: none; }
  .topic-list, .subject-grid { grid-template-columns: 1fr; }
  .topic-board { max-height: 260px; }
  .avatar-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .avatar-choice-grid-hair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avatar-choice-grid-hair .avatar-art-option { width: 48px; height: 48px; }
  .avatar-preview { width: 64px; height: 64px; flex-basis: 64px; }
}

.wizard-panel h2 { font-family: var(--font-serif); font-size: 22px; letter-spacing: -.01em; margin: 0 0 8px; }
.wizard-panel > p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 20px; max-width: 54ch; }
.wizard-panel .modal-field:last-child { margin-bottom: 0; }
.wizard-step:focus-visible, .subject-tile:focus-visible, .goal-option:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Ícones em SVG (sem CDN) ---------- */
.icon-slot { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.icon-slot .icon { width: 1.15em; height: 1.15em; }
.side-nav .icon-slot .icon, .mobile-nav .icon-slot .icon { width: 18px; height: 18px; }

/* ---------- Escolha do concurso alvo ---------- */
.target-board {
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 6px; padding: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.target-board::-webkit-scrollbar { width: 8px; }
.target-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.target-option {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px;
  border: 1.5px solid transparent; background: var(--surface); color: var(--ink);
}
.target-option:hover { border-color: var(--border); }
.target-option > .icon-slot:first-child .icon { width: 20px; height: 20px; color: var(--muted); }
.target-option strong { display: block; font-size: 13.5px; font-weight: 600; }
.target-option small { color: var(--muted); font-size: 11.5px; }
.target-option .check-mark { opacity: 0; color: var(--blue); }
.target-option.selected { border-color: var(--blue); background: var(--blue-soft); }
.target-option.selected > .icon-slot:first-child .icon { color: var(--blue); }
.target-option.selected .check-mark { opacity: 1; }

/* ---------------- Duelo ---------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.field-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); font-size: 15px; letter-spacing: 0.06em; margin-top: 4px;
}
.duelo-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 760px) { .duelo-mode-grid { grid-template-columns: 1fr; } }
.duelo-mode-card { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.duelo-mode-card .icon-slot .icon { width: 26px; height: 26px; }
.duelo-mode-card .btn { margin-top: 8px; }
.duelo-waiting {
  padding: 46px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 480px; margin: 30px auto 0;
}
.duelo-waiting h2 { font-family: var(--font-serif); font-size: 20px; margin: 0; }
.duelo-waiting-icon .icon { width: 40px; height: 40px; color: var(--blue); animation: duelo-pulse 1.6s ease-in-out infinite; }
@keyframes duelo-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.duelo-codigo {
  font-family: var(--font-mono); font-size: 30px; font-weight: 700; letter-spacing: 0.22em;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 12px 22px; color: var(--gold);
}
.duelo-abandono-banner {
  display: flex; align-items: center; gap: 8px; background: var(--coral-soft); color: var(--coral);
  border: 1px solid var(--coral); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px;
  margin: 12px 0;
}
.duelo-abandono-banner .icon-slot .icon { width: 16px; height: 16px; }

/* ---------------- Duelo: animação de busca ---------------- */
.duelo-loading-art {
  position: relative; width: 220px; height: 160px; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
}
.duelo-loading-core {
  width: 68px; height: 68px; border-radius: 50%;
  background: color-mix(in srgb, var(--tema, var(--blue)) 14%, transparent);
  border: 1.5px solid var(--tema, var(--blue)); color: var(--tema, var(--blue));
  display: flex; align-items: center; justify-content: center;
  animation: duelo-core-pulse 2s ease-in-out infinite; z-index: 2;
}
.duelo-loading-core .tema-icone { width: 30px; height: 30px; }
.duelo-loading-core .tema-glifo { font-size: 26px; }
.duelo-loading-orbita {
  position: absolute; width: 132px; height: 132px; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--tema, var(--blue)) 45%, transparent);
  animation: duelo-orbita-gira 14s linear infinite;
}
@keyframes duelo-orbita-gira { to { transform: rotate(360deg); } }
@keyframes duelo-core-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tema, var(--blue)) 30%, transparent); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 12px transparent; }
}
.duelo-loading-sym {
  position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px;
  display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
  font-family: var(--font-serif); font-weight: 700; font-size: 18px; line-height: 1;
  color: var(--tema, var(--blue)); opacity: 0; pointer-events: none; white-space: nowrap;
  animation: duelo-sym-float 3.2s ease-in-out infinite;
}
.duelo-loading-sym .tema-icone { width: 22px; height: 22px; }
.duelo-loading-sym:nth-of-type(even) { color: var(--muted); }
.duelo-loading-sym.s1 { --x: -96px; --y: -14px; animation-delay: 0s; }
.duelo-loading-sym.s2 { --x: 72px; --y: -42px; animation-delay: .4s; }
.duelo-loading-sym.s3 { --x: -64px; --y: 44px; animation-delay: .8s; }
.duelo-loading-sym.s4 { --x: 90px; --y: 28px; animation-delay: 1.2s; }
.duelo-loading-sym.s5 { --x: -16px; --y: -66px; animation-delay: 1.6s; }
.duelo-loading-sym.s6 { --x: 22px; --y: 62px; animation-delay: 2s; }
.duelo-loading-sym.s7 { --x: -104px; --y: 22px; animation-delay: 2.4s; }
.duelo-loading-sym.s8 { --x: 102px; --y: -4px; animation-delay: 2.8s; }
@keyframes duelo-sym-float {
  0% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 10px)) scale(.8) rotate(-8deg); }
  15% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 16px)) scale(.9) rotate(6deg); }
}
/* Reduzir animações: ajuste do próprio app (Perfil → engrenagem). */
html.reduce-motion .duelo-loading-sym { animation: none; opacity: .8; transform: translate(var(--x), var(--y)); }
html.reduce-motion .duelo-loading-orbita,
html.reduce-motion .duelo-loading-core { animation: none; }

/* ---------------- Duelo: contagem regressiva sincronizada ---------------- */
.duelo-countdown { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 120px; }
.duelo-countdown-num {
  font-family: var(--font-serif); font-weight: 800; font-size: 72px; line-height: 1;
  background: linear-gradient(140deg, #7C5CFF, #D6467A); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.duelo-countdown-num.pulse { animation: duelo-count-pulse .9s cubic-bezier(.2,.8,.2,1); }
@keyframes duelo-count-pulse {
  0% { transform: scale(1.6); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.92); opacity: .85; }
}
.duelo-countdown-label { font-size: 12.5px; color: var(--muted); }
.duelo-confronto-rank { margin-top: 2px; }

/* ---------------- Duelo: rank tipo ELO ---------------- */
.duelo-rank-line {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted);
}
.duelo-rank-result {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px;
  border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px;
}
.duelo-rank-result strong { font-family: var(--font-mono); font-size: 14px; }
.duelo-rank-result.positivo strong { color: var(--teal); }
.duelo-rank-result.negativo strong { color: var(--coral); }
.duelo-rank-result span { color: var(--muted); margin-left: auto; }
.duelo-coin-earned { display: flex; align-items: center; gap: 4px; color: var(--gold) !important; font-weight: 700; margin-left: 0 !important; }
.duelo-coin-earned .icon-slot { width: 13px; height: 13px; }
.duelo-coin-earned .icon-slot .icon { width: 13px; height: 13px; }

/* ---------------- Duelo: tela de confronto ("encontrou oponente") ---------------- */
.duelo-confronto {
  padding: 40px 30px; text-align: center; max-width: 560px; margin: 24px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.duelo-confronto-arena {
  display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%;
}
.duelo-confronto-jogador {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
  animation: duelo-confronto-in .5s ease both;
}
.duelo-confronto-jogador:nth-child(3) { animation-delay: .12s; }
@keyframes duelo-confronto-in {
  0% { opacity: 0; transform: translateY(10px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.duelo-confronto-avatar { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--border); overflow: hidden; }
.duelo-confronto-jogador strong { font-family: var(--font-serif); font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duelo-confronto-titulo {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--gold);
  background: var(--gold-soft); border-radius: 999px; padding: 3px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duelo-confronto-titulo .icon-slot .icon { width: 12px; height: 12px; }
.duelo-confronto-vs {
  font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--coral);
  animation: duelo-core-pulse 1.6s ease-in-out infinite;
}
.duelo-confronto #btnDuelar .icon-slot .icon { width: 16px; height: 16px; }

/* ---------------- Perfil: cabeçalho, avatar e configurações ---------------- */
.profile-header-card {
  display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-bottom: 18px;
}
.profile-avatar-big {
  width: 68px; height: 68px; min-width: 68px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-2); font-size: 34px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s ease; overflow: hidden;
  padding: 0; margin: 0; -webkit-appearance: none; appearance: none; box-sizing: border-box; flex-shrink: 0;
}
.profile-avatar-big .avatar-art { width: 100%; height: 100%; }
.profile-avatar-big:hover { border-color: var(--blue); }
.profile-header-info { flex: 1; min-width: 0; }
.profile-header-info h2 { font-family: var(--font-serif); font-size: 20px; margin: 0 0 4px; }
.profile-header-title {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gold);
  background: var(--gold-soft); border-radius: 999px; padding: 3px 10px; margin-right: 8px;
}
.profile-header-title .icon-slot .icon { width: 13px; height: 13px; }
.profile-header-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.profile-settings-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; align-items: center; justify-content: center; }
.profile-settings-btn .icon-slot .icon { width: 18px; height: 18px; stroke-width: 1.8; }

.best-subject-list { display: flex; flex-direction: column; gap: 10px; }
.best-subject-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
}
.best-subject-rank { font-weight: 700; color: var(--gold); width: 22px; }
.best-subject-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.best-subject-row strong { color: var(--teal); }

.profile-settings-modal { max-width: 460px; width: 100%; padding: 26px 26px 22px; }
.profile-settings-modal { max-width: 680px; }
.profile-settings-modal > .hero-actions {
  position: sticky; bottom: -22px; z-index: 4; margin-left: -26px; margin-right: -26px;
  margin-bottom: -22px; padding: 12px 26px; background: var(--surface);
  border-top: 1px solid var(--border);
}
.avatar-modal-mark {
  width: 58px; height: 58px; padding: 0; overflow: hidden; border-radius: 18px;
  background: var(--blue-soft);
}
.avatar-modal-mark .avatar-art { width: 58px; height: 58px; }
.profile-customizer-intro { max-width: 58ch; }
.avatar-customizer {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  background: var(--surface-2);
}
.avatar-preview-wrap {
  display: flex; align-items: center; gap: 12px; padding: 2px 2px 14px;
  border-bottom: 1px solid var(--border);
}
.avatar-preview {
  width: 76px; height: 76px; flex: 0 0 76px; overflow: hidden; border-radius: 22px;
  box-shadow: 0 5px 14px rgba(27, 31, 46, .12);
}
.avatar-preview-wrap strong, .avatar-preview-wrap span { display: block; }
.avatar-preview-wrap strong { font-size: 13px; }
.avatar-preview-wrap span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.avatar-tab-list { display: flex; gap: 5px; margin: 12px 0 14px; overflow-x: auto; }
.avatar-tab {
  border: 0; border-radius: 999px; padding: 7px 11px; background: transparent;
  color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.avatar-tab.active { background: var(--blue); color: #fff; }
.avatar-field { margin-top: 13px; }
.avatar-field:first-child { margin-top: 0; }
.avatar-field-label {
  display: block; margin-bottom: 7px; color: var(--muted); font: 10px var(--font-mono);
  letter-spacing: .05em; text-transform: uppercase;
}
.avatar-choice-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.avatar-choice-grid-hair { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.avatar-choice-grid-hair .avatar-choice { padding-top: 9px; }
.avatar-choice-grid-hair .avatar-art-option { width: 54px; height: 54px; }
.avatar-choice {
  min-width: 0; border: 1px solid var(--border); border-radius: 11px; padding: 7px 4px 6px;
  background: var(--surface); color: var(--ink); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.avatar-choice:hover { border-color: var(--blue); transform: translateY(-1px); }
.avatar-choice.selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 2px rgba(95, 114, 216, .14); }
.avatar-choice small { display: block; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.avatar-swatch {
  display: block; width: 28px; height: 28px; margin: 1px auto 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(27,31,46,.12);
}
.avatar-art-option { display: block; width: 42px; height: 42px; margin: 0 auto; }
.avatar-customizer-note {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 13px; padding-top: 11px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 10.5px; line-height: 1.45;
}
.avatar-customizer-note i { color: var(--teal); margin-top: 1px; }
.avatar-choice.locked { opacity: .55; filter: saturate(.4); cursor: pointer; }
.avatar-choice.locked:hover { border-color: var(--gold); }
.avatar-choice.locked small { display: flex; align-items: center; justify-content: center; gap: 3px; }
.avatar-choice.locked small .icon-slot { width: 9px; height: 9px; color: var(--gold); }
.avatar-choice.locked small .icon-slot .icon { width: 9px; height: 9px; }

/* ---------------- Loja ---------------- */
.store-balance-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 20px 24px; margin-bottom: 16px;
}
.store-balance-label { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); flex-basis: 100%; }
.store-balance-value {
  display: flex; align-items: center; gap: 7px; font-family: var(--font-serif);
  font-size: 26px; font-weight: 700; color: var(--gold);
}
.store-balance-value .icon-slot { width: 22px; height: 22px; }
.store-balance-value .icon-slot .icon { width: 22px; height: 22px; }
.store-balance-hint { color: var(--muted); font-size: 12px; }
.store-section { padding: 22px; margin-bottom: 16px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.store-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 16px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.store-item.owned { border-color: var(--teal); background: var(--teal-soft); }
.store-item-preview { width: 64px; height: 64px; }
.store-item-preview .avatar-art-option { width: 64px; height: 64px; }
.store-item-copy { display: flex; flex-direction: column; gap: 3px; }
.store-item-copy strong { font-size: 12.5px; }
.store-item-price { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; color: var(--gold); font-weight: 600; }
.store-item-price .icon-slot { width: 12px; height: 12px; }
.store-item-price .icon-slot .icon { width: 12px; height: 12px; }
.store-item-action .btn { padding: 7px 14px; font-size: 12px; }
.store-item-status.equipped { display: flex; align-items: center; gap: 5px; color: var(--teal); font-size: 12px; font-weight: 600; }
.store-item-status.equipped .icon-slot { width: 14px; height: 14px; }
.store-item-status.equipped .icon-slot .icon { width: 14px; height: 14px; }

.duelo-opponent-status, .duelo-score-name { display: inline-flex; align-items: center; gap: 5px; }
.duelo-avatar-mini { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: 0 0 22px; }
.duelo-score-name { font-size: 12.5px; }

/* Reduzir animações: ajuste do próprio app (Perfil → engrenagem). */
html.reduce-motion .streak-flame-wrap.is-active .flame-layer,
html.reduce-motion .streak-flame-wrap.is-active .flame-ember,
html.reduce-motion .streak-flame-wrap.is-active .flame-halo,
html.reduce-motion .profile-summary .streak-summary-icon.is-active .flame-layer,
html.reduce-motion .profile-summary .streak-summary-icon.is-active .flame-ember,
html.reduce-motion .profile-summary .streak-summary-icon.is-active .flame-halo,
html.reduce-motion .aura-flame-outer,
html.reduce-motion .aura-flame-inner,
html.reduce-motion .aura-flame-core,
html.reduce-motion .aura-flame-halo,
html.reduce-motion .aura-flame-ember,
html.reduce-motion .aura-glow-outer,
html.reduce-motion .aura-glow-inner,
html.reduce-motion .aura-glow-core,
html.reduce-motion .aura-spark-item { animation: flame-reduced-pulse 2.4s ease-in-out infinite; }
html.reduce-motion .aura-spark-item { opacity: .85; }
@keyframes flame-reduced-pulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.035); opacity: 1; }
}
.title-select-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.title-select-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); cursor: pointer;
}
.title-select-option strong { font-size: 13px; }
.title-select-option small { color: var(--muted); font-size: 11px; }
.title-select-option.selected { border-color: var(--blue); background: var(--blue-soft); }
.wizard-skip { display: block; margin: 4px auto 0; text-align: center; font-size: 12.5px; }

/* =================================================================
   Tela de questão — leitura confortável, mapa de questões, rascunho
   ================================================================= */
:root { --q-scale: 1; }

/* ---------- Leitura ----------
   O enunciado saía em Outfit (fonte de título) e as alternativas em 13,5px.
   Agora tudo usa DM Sans, com tamanho e entrelinha próprios para leitura e
   um multiplicador (--q-scale) que a pessoa ajusta no botão "Aa". */
.question-card { padding: 26px 28px; }
.question-text {
  font-family: var(--font-sans); font-weight: 500;
  font-size: calc(18px * var(--q-scale)); line-height: 1.55; letter-spacing: 0;
  margin: 0 0 22px; overflow-wrap: break-word; text-wrap: pretty;
}
.text-base { padding: 16px 18px; }
/* Enunciado longo em blocos (questionTextHtml): parágrafos com respiro, itens
   com recuo e o comando final ("Assinale...") separado e em destaque. */
.qt-blocos { display: block; font-weight: 400; }
.qt-par, .qt-item, .qt-comando { display: block; }
.qt-par { margin: 0 0 .75em; }
.qt-item { margin: 0 0 .55em; padding: 2px 0 2px 12px; border-left: 2px solid var(--border); }
.qt-comando { margin-top: 1.1em; padding-top: .9em; border-top: 1px dashed var(--border); font-weight: 600; }
.qt-blocos > :last-child { margin-bottom: 0; }
.qt-blocos > .qt-comando:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.text-base p { font-size: calc(16px * var(--q-scale)); line-height: 1.65; overflow-wrap: break-word; }
.option {
  align-items: flex-start; gap: 13px; padding: 14px 15px; min-height: 54px;
  font-size: calc(15.5px * var(--q-scale)); line-height: 1.45;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.option > span:last-child { min-width: 0; overflow-wrap: break-word; }
.option-letter { width: 28px; height: 28px; font-size: 12.5px; margin-top: -1px; }
.option.selected .option-letter { background: var(--blue); border-color: var(--blue); color: #fff; }
.option:focus-visible, .q-tool:focus-visible, .q-dot:focus-visible, .q-swatch:focus-visible, .q-scale-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Barra fixa: nome, ferramentas, cronômetro e progresso ---------- */
.quiz-bar {
  position: sticky; top: var(--topbar-h, 0px); z-index: 4;
  background: var(--bg); padding: 10px 0 8px; margin-bottom: 6px;
}
.quiz-bar .quiz-top { align-items: center; gap: 10px; margin-bottom: 9px; }
.quiz-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quiz-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.quiz-bar .quiz-track { margin-bottom: 0; }
.quiz-top-end { display: inline-flex; align-items: center; gap: 10px; }

.q-tool {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0;
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  font-family: var(--font-sans); font-weight: 700; font-size: 13px; line-height: 1;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.q-tool:hover:not(:disabled) { border-color: var(--blue); }
.q-tool:active:not(:disabled) { transform: scale(.95); }
.q-tool:disabled { opacity: .4; cursor: not-allowed; }
.q-tool .icon-slot .icon { width: 19px; height: 19px; }
.q-tool.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.q-tool-label { font-size: 12.5px; font-weight: 600; margin-left: 6px; }
.q-tool.has-ink::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--gold); border: 2px solid var(--surface);
}

.quiz-timer {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 12px;
  background: var(--coral-soft); color: var(--coral);
  font-family: var(--font-mono); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums;
}
.quiz-timer .icon-slot .icon { width: 16px; height: 16px; }
.quiz-timer.is-low { background: var(--coral); color: #fff; animation: timerPulse 1s ease-in-out infinite; }
@keyframes timerPulse { 50% { opacity: .72; } }

/* ---------- Mapa de questões ---------- */
.q-map { margin: 4px 0 12px; }
.q-map-strip {
  position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.q-map-strip::-webkit-scrollbar { display: none; }
.q-dot {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--muted);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.q-dot:hover { border-color: var(--blue); }
.q-dot.is-answered { background: var(--blue); border-color: var(--blue); color: #fff; }
.q-dot.is-skipped { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); font-weight: 700; }
.q-dot.is-current { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); color: var(--ink); font-weight: 700; }
.q-dot.is-current.is-answered { color: #fff; }
.qsheet .q-dot.is-current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

/* ---------- Botões de navegação ---------- */
.quiz-actions { gap: 12px; }
.quiz-actions .btn { min-height: 46px; justify-content: center; padding: 10px 22px; font-size: 14px; }

/* ---------- Painéis (mapa, tamanho do texto, avisos) ---------- */
.qsheet-backdrop {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 6, 30, .55); animation: qFade .16s ease;
}
.qsheet {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); border-radius: 22px 22px 0 0;
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--shadow);
  animation: qSheetUp .22s ease;
}
@keyframes qFade { from { opacity: 0; } }
@keyframes qSheetUp { from { transform: translateY(24px); opacity: 0; } }
.qsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qsheet-head h3 { margin: 0; font-family: var(--font-serif); font-size: 19px; }
.qsheet-text { margin: 0 0 18px; font-size: 15px; line-height: 1.55; }
.qsheet-actions { display: grid; gap: 10px; }
.qsheet-actions .btn, .qsheet-cta { justify-content: center; min-height: 48px; font-size: 14px; }
.qsheet-cta { width: 100%; margin-top: 18px; }
.q-summary { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.q-summary strong { color: var(--ink); }
.q-summary-skip { color: var(--gold); font-weight: 700; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 10px; justify-items: center; padding: 6px 0; }
.q-grid .q-dot { width: 44px; height: 44px; font-size: 14px; }
.q-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.q-legend span { display: inline-flex; align-items: center; gap: 7px; }
.q-dot-mini { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--border); display: inline-block; }
.q-dot-mini.is-answered { background: var(--blue); border-color: var(--blue); }
.q-dot-mini.is-skipped { background: var(--gold-soft); border-color: var(--gold); }
.q-dot-mini.is-current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }

.q-scale-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.q-scale-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 12px 4px;
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 14px; color: var(--ink);
}
.q-scale-btn span { font-weight: 700; line-height: 1; }
.q-scale-btn small { font-size: 11px; color: var(--muted); }
.q-scale-btn.is-active { border-color: var(--blue); background: var(--blue-soft); }
.q-scale-preview {
  margin: 14px 0 0; padding: 14px; border-radius: 14px; background: var(--surface-2);
  font-family: var(--font-sans); font-weight: 500; line-height: 1.55; font-size: calc(17px * var(--q-scale));
}

@media (min-width: 721px) {
  .qsheet-backdrop { align-items: center; }
  .qsheet { border-radius: 22px; padding-bottom: 22px; }
}

/* ---------- Rascunho ---------- */
.scratch-backdrop { position: fixed; inset: 0; z-index: 300; display: flex; align-items: stretch; justify-content: center; background: rgba(10, 6, 30, .55); }
.scratch {
  display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
  background: var(--bg); color: var(--ink);
}
@supports (height: 100dvh) { .scratch-backdrop { height: 100dvh; } }
.scratch-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.scratch-title { flex: 1; min-width: 0; font-family: var(--font-serif); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scratch-title span { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--muted); }
.scratch-tools {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.scratch-tools::-webkit-scrollbar { display: none; }
.scratch-group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.scratch-group-end { margin-left: auto; }
.scratch-group.is-muted { opacity: .35; }
.q-size .q-size-dot { display: block; border-radius: 50%; background: currentColor; }
.q-swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); background: var(--sw);
  box-shadow: inset 0 0 0 3px var(--surface); -webkit-tap-highlight-color: transparent;
}
.q-swatch.is-active { border-color: var(--blue); }
.scratch .q-tool:disabled { opacity: .3; }
#scClear.is-armed { background: var(--coral); border-color: var(--coral); color: #fff; }
#scClear.is-armed .q-tool-label { display: inline; }

.scratch-stage {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background-color: var(--surface);
  background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}
.scratch-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.scratch-stage canvas.is-eraser { cursor: cell; }
.scratch-ref {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; max-height: 34%; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px; border-bottom: 1px solid var(--border); box-shadow: 0 6px 16px rgba(20, 10, 60, .10);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  font-size: 14.5px; line-height: 1.5;
}
.scratch-ref[hidden] { display: none; }
.scratch-ref .text-base { margin: 0 0 10px; padding: 10px 12px; }
.scratch-ref .text-base p { font-size: 14px; line-height: 1.55; }
.scratch-ref .text-base-label { display: none; }
.scratch-q { margin: 0 0 8px; font-weight: 500; }
.scratch-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.scratch-opts li { display: flex; gap: 8px; }
.scratch-opt-letter { flex: 0 0 auto; width: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding-top: 2px; }

@media (min-width: 721px) {
  .scratch-backdrop { align-items: center; padding: 3vh 4vw; }
  .scratch { max-width: 1100px; height: min(92vh, 860px); border-radius: 22px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
  .scratch-ref { max-height: 38%; }
}
@media (max-width: 560px) {
  .scratch .q-tool-label { display: none; }
  #scClear.is-armed .q-tool-label { display: inline; }
}

/* ---------- Celular: mais espaço para a questão ---------- */
@media (max-width: 720px) {
  .question-shell { max-width: none; }
  .question-card { padding: 18px 16px; }
  .question-text { font-size: calc(17px * var(--q-scale)); margin-bottom: 18px; }
  .text-base { padding: 14px; margin-bottom: 16px; }
  .options { gap: 10px; }
  .quiz-bar { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .q-map-strip { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .quiz-actions .btn { flex: 1; }
  /* o cabeçalho do app (moedas, tema) não ajuda durante a prova e ocupa ~60px */
  body.in-quiz .topbar { display: none; }
  body.in-quiz .page-wrap { padding-top: 0; }
}

/* Reduzir animações: ajuste do próprio app (Perfil → engrenagem). */
html.reduce-motion .quiz-timer.is-low,
html.reduce-motion .qsheet,
html.reduce-motion .qsheet-backdrop { animation: none; }


/* Aviso de simulado em andamento (aparece nas outras páginas) */
.quiz-resume-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 14px 18px;
  background: var(--blue-soft); border: 1px solid var(--blue); border-radius: var(--radius-sm);
}
.quiz-resume-info { display: grid; gap: 2px; min-width: 0; }
.quiz-resume-info strong { font-size: 14px; }
.quiz-resume-info span { font-size: 12.5px; color: var(--muted); }
.quiz-resume-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quiz-resume-actions .btn { min-height: 40px; }
@media (max-width: 560px) {
  .quiz-resume-actions { width: 100%; }
  .quiz-resume-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- Links legais (termos e privacidade) ---------- */
.auth-legal { margin: 16px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); text-align: center; }
.auth-legal a { color: var(--blue); font-weight: 600; }
.rail-legal { display: flex; gap: 6px; justify-content: center; font-size: 11px; color: var(--sidebar-muted); }
.rail-legal a { color: var(--sidebar-muted); text-decoration: none; }
.rail-legal a:hover { color: var(--sidebar-ink); text-decoration: underline; }

/* =================================================================
   Cabeçalho da questão (chips) e alternativas com marcador redondo
   ================================================================= */
.qhead { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.qhead-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 14px;
  border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface-2);
  color: var(--ink); font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; line-height: 1.25;
}
.qchip-id { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 35%, transparent); color: var(--blue); font-family: var(--font-mono); font-weight: 600; }
.qchip-banca { color: var(--ink); }
.qchip-materia { color: var(--muted); }
.qchip-materia[data-subject="Português"] { color: var(--blue); }
.qchip-materia[data-subject="Matemática"] { color: var(--teal); }
.qchip-materia[data-subject="Direito"] { color: var(--gold); }
.qchip-materia[data-subject="Informática"] { color: var(--coral); }
.qchip-assunto {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
  border-radius: 16px; padding: 10px 16px; font-size: calc(14.5px * var(--q-scale, 1));
}
.qchip-assunto span { min-width: 0; overflow-wrap: anywhere; }
.qchip-assunto small { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.qhead-index { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

.option { align-items: center; gap: 14px; border-radius: 14px; background: var(--surface); }
.option-radio {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--muted) 60%, transparent); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.option-letter, .option.selected .option-letter {
  width: auto; height: auto; min-width: 16px; border: none; background: none; border-radius: 0;
  font-family: var(--font-sans); font-size: calc(16px * var(--q-scale, 1)); font-weight: 800; color: var(--muted); margin: 0;
}
.option-text { min-width: 0; overflow-wrap: break-word; flex: 1; }
.option.selected .option-radio { border-color: var(--blue); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 12px var(--blue); }
.option.selected .option-letter { color: var(--blue); }
.option.rapid-correct .option-radio { border-color: var(--teal); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 12px var(--teal); }
.option.rapid-incorrect .option-radio { border-color: var(--coral); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 12px var(--coral); }
.option.rapid-correct .option-letter { color: var(--teal); }
.option.rapid-incorrect .option-letter { color: var(--coral); }
@media (max-width: 600px) {
  .qchip { font-size: 12.5px; min-height: 30px; padding: 5px 12px; }
  .qchip-assunto { padding: 9px 14px; font-size: calc(13.5px * var(--q-scale, 1)); }
  .qhead-index { width: 100%; margin-left: 0; order: -1; }
}

/* =================================================================
   Seletor com busca e rolagem (conteúdos e bancas)
   ================================================================= */
.pickbox { border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.pick-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.pick-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); background: var(--blue-soft); color: var(--blue);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.pick-tag span { font-size: 14px; line-height: 1; }
.pick-tag:hover { background: color-mix(in srgb, var(--blue) 20%, transparent); }
.pick-clear { border: none; background: none; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 5px 4px; }
.pick-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.pick-search svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.pick-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink);
  font: inherit; font-size: 14.5px; padding: 6px 0;
}
.pick-input::placeholder { color: var(--muted); }
.pick-search:focus-within { box-shadow: inset 0 -2px 0 var(--blue); }
.pick-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }
.pick-list { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; }
.pick-group + .pick-group { margin-top: 6px; }
.pick-group-title {
  position: sticky; top: -6px; z-index: 1; background: var(--surface);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px;
}
.pick-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  font-size: 14px; transition: background .12s ease;
}
.pick-item:hover { background: var(--surface-2); }
.pick-item.is-selected { background: var(--blue-soft); }
.pick-item input { width: 17px; height: 17px; accent-color: var(--blue); flex-shrink: 0; margin: 0; }
.pick-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pick-detail { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pick-detail.weak { color: var(--coral); font-weight: 600; }
.pick-empty { margin: 0; padding: 18px 10px; text-align: center; color: var(--muted); font-size: 13px; }

/* =================================================================
   Ranking: partículas no pódio e destaque do Top 10
   ================================================================= */
.ranking-avatar-wrap { position: relative; width: 34px; height: 34px; display: block; }
.ranking-row.tier .ranking-avatar-wrap { width: 36px; height: 36px; }
.rank-orbit { position: absolute; inset: -9px; z-index: 2; pointer-events: none; animation: rank-orbit-spin 6s linear infinite; }
.rank-orbit i {
  position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%;
  background: var(--orbit, #fff); box-shadow: 0 0 6px 1px var(--orbit-glow, rgba(255,255,255,.9));
  transform: rotate(calc(var(--k) * 60deg)) translateX(26px);
  animation: rank-orbit-blink 1.8s ease-in-out infinite; animation-delay: calc(var(--k) * -.3s);
}
.rank-orbit i:nth-child(1) { --k: 0; } .rank-orbit i:nth-child(2) { --k: 1; } .rank-orbit i:nth-child(3) { --k: 2; }
.rank-orbit i:nth-child(4) { --k: 3; } .rank-orbit i:nth-child(5) { --k: 4; } .rank-orbit i:nth-child(6) { --k: 5; }
.rank-orbit i:nth-child(even) { width: 3px; height: 3px; margin: -1.5px; }
.ranking-row.tier-1 { --orbit: #fff7d1; --orbit-glow: rgba(255, 196, 0, .95); }
.ranking-row.tier-2 { --orbit: #ffffff; --orbit-glow: rgba(150, 170, 200, .95); }
.ranking-row.tier-3 { --orbit: #ffe6cf; --orbit-glow: rgba(214, 120, 50, .9); }
.ranking-row.tier-2 .rank-orbit { animation-duration: 7.5s; }
.ranking-row.tier-3 .rank-orbit { animation-duration: 9s; }
@keyframes rank-orbit-spin { to { transform: rotate(360deg); } }
@keyframes rank-orbit-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.ranking-row.top10 {
  position: relative; background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(120deg, rgba(124,92,255,.65), rgba(214,70,122,.35), rgba(124,92,255,.65)) border-box;
  background-size: 100% 100%, 220% 100%;
  border: 1px solid transparent; animation: top10-border 6s linear infinite;
}
@keyframes top10-border { to { background-position: 0 0, 220% 0; } }
.top10-pos {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: linear-gradient(140deg, #7C5CFF, #4B31C4); color: #fff; font: 700 11.5px var(--font-mono);
}
/* Reduzir animações: ajuste do próprio app (Perfil → engrenagem). */
html.reduce-motion .rank-orbit,
html.reduce-motion .rank-orbit i,
html.reduce-motion .ranking-row.top10 { animation: none !important; }

/* =================================================================
   Raridades dos títulos (js/titulos.js)
   Comum (cinza) · Incomum (verde) · Raro (azul) · Épico (roxo) ·
   Lendário (laranja) · Mítico (vermelho). Quanto mais rara, mais viva:
   comum fica parado; incomum e raro ganham reflexo; épico, faíscas;
   lendário, brasas subindo; mítico, fagulhas em órbita e brilho pulsante.
   ================================================================= */
:root {
  --rc: #6F7682;
  --ri1: #146B33; --ri2: #23964A; --ri3: #3DBE68;
  --rr1: #0E5DAA; --rr2: #1C7FDB; --rr3: #4AA3F0;
  --re1: #5516C2; --re2: #7B2FF2; --re3: #A274FF;
  --rl1: #A84300; --rl2: #E06F00; --rl3: #F59E0B;
  --rm1: #8E0F1A; --rm2: #D92D2D; --rm3: #F0583A; --rm4: #FF8A5C;
  --rar-comum: #7C828D; --rar-incomum: #23964A; --rar-raro: #1C7FDB; --rar-epico: #7B2FF2; --rar-lendario: #E87500; --rar-mitico: #D92D2D;
}
:root[data-theme="dark"] {
  --rc: #B5BAC4;
  --ri1: #3DBE68; --ri2: #6FE296; --ri3: #D2FADF;
  --rr1: #3A9BF0; --rr2: #74C0FF; --rr3: #DDF0FF;
  --re1: #9461FF; --re2: #BC9BFF; --re3: #F1E8FF;
  --rl1: #FF8C1A; --rl2: #FFB547; --rl3: #FFEBB8;
  --rm1: #FF3B3B; --rm2: #FF6B5B; --rm3: #FFB08A; --rm4: #FFF1E4;
  --rar-comum: #B5BAC4; --rar-incomum: #4FD27A; --rar-raro: #4AAEFF; --rar-epico: #A97BFF; --rar-lendario: #FFA62B; --rar-mitico: #FF5555;
}
/* Faixas do pódio têm fundo claro nos dois temas: usa os tons escuros. */
.ranking-row.tier {
  --rc: #4E5560; --ri1: #0F5A2A; --ri2: #1A7F3E; --ri3: #2FA85A; --rr1: #0A4C8C; --rr2: #1468B8; --rr3: #2C8BE0;
  --re1: #4A10AD; --re2: #6A22DB; --re3: #9B63FF; --rl1: #8A3600; --rl2: #C25E00; --rl3: #E88A00;
  --rm1: #7A0B15; --rm2: #B81F28; --rm3: #E2483A; --rm4: #FF8A5C;
}

.title-fx-wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: bottom; }
.title-fx { position: relative; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.title-fx-incomum, .title-fx-raro, .title-fx-epico, .title-fx-lendario, .title-fx-mitico {
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.title-fx-comum { color: var(--rc); font-weight: 600; }
.title-fx-incomum {
  font-weight: 700; background-image: linear-gradient(100deg, var(--ri1) 0%, var(--ri2) 40%, var(--ri3) 50%, var(--ri2) 60%, var(--ri1) 100%);
  background-size: 260% 100%; animation: tfx-brilho 6s linear infinite;
}
.title-fx-raro {
  font-weight: 700; background-image: linear-gradient(100deg, var(--rr1) 0%, var(--rr2) 36%, var(--rr3) 48%, var(--rr2) 60%, var(--rr1) 100%);
  background-size: 260% 100%; animation: tfx-brilho 3.4s linear infinite;
}
.title-fx-epico {
  font-weight: 800; background-image: linear-gradient(100deg, var(--re1) 0%, var(--re2) 30%, var(--re3) 50%, var(--re2) 70%, var(--re1) 100%);
  background-size: 260% 100%; animation: tfx-brilho 2.6s linear infinite, tfx-luz-epico 2.4s ease-in-out infinite;
}
.title-fx-lendario {
  font-weight: 800; background-image: linear-gradient(90deg, var(--rl1), var(--rl2), var(--rl3), var(--rl2), var(--rl1));
  background-size: 300% 100%; animation: tfx-fluir 2.2s linear infinite, tfx-luz-lendario 1.8s ease-in-out infinite;
}
.title-fx-mitico {
  font-weight: 800; letter-spacing: .01em;
  background-image: linear-gradient(90deg, var(--rm1) 0%, var(--rm2) 22%, var(--rm3) 38%, var(--rm4) 46%, var(--rm3) 54%, var(--rm2) 70%, var(--rm1) 100%);
  background-size: 300% 100%; animation: tfx-fluir 2.6s linear infinite, tfx-luz-mitico 1.6s ease-in-out infinite;
}
/* O fundo tem 260% da largura e se repete: andar -162,5% desloca exatamente um
   padrão (1,6 × 162,5% = 260%), então a volta emenda sem pulo. */
@keyframes tfx-brilho { from { background-position: 0 0; } to { background-position: -162.5% 0; } }
@keyframes tfx-fluir { to { background-position: -300% 0; } }
@keyframes tfx-luz-epico { 0%, 100% { filter: drop-shadow(0 0 2px rgba(123, 47, 242, .35)); } 50% { filter: drop-shadow(0 0 7px rgba(169, 123, 255, .65)); } }
@keyframes tfx-luz-lendario { 0%, 100% { filter: drop-shadow(0 0 2px rgba(232, 117, 0, .4)); } 50% { filter: drop-shadow(0 0 8px rgba(255, 166, 43, .75)); } }
@keyframes tfx-luz-mitico {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(217, 45, 45, .55)); }
  45% { filter: drop-shadow(0 0 10px rgba(255, 85, 85, .85)) drop-shadow(0 0 2px rgba(255, 210, 160, .7)); }
}

/* Faíscas (épico), brasas (lendário) e fagulhas em órbita (mítico) */
.tfw-epico::before, .tfw-epico::after, .tfw-mitico::before, .tfw-mitico::after {
  content: ""; position: absolute; width: .5em; height: .5em; pointer-events: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.tfw-epico::before { top: -.3em; right: -.32em; background: var(--re3); animation: tfx-piscar 2.2s ease-in-out infinite; }
.tfw-epico::after { bottom: -.15em; left: -.34em; width: .36em; height: .36em; background: var(--re2); animation: tfx-piscar 2.2s ease-in-out infinite 1.1s; }
@keyframes tfx-piscar { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 40% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(.6) rotate(90deg); opacity: .6; } }
.tfw-lendario::before, .tfw-lendario::after {
  content: ""; position: absolute; bottom: 0; width: .26em; height: .26em; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #FFF1C9 0 30%, var(--rl2) 70%); box-shadow: 0 0 .3em var(--rl2); opacity: 0;
}
.tfw-lendario::before { left: 18%; animation: tfx-brasa 1.9s ease-out infinite; }
.tfw-lendario::after { left: 72%; animation: tfx-brasa 1.9s ease-out infinite .95s; }
@keyframes tfx-brasa { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(.3em, -1.5em) scale(.3); opacity: 0; } }
.tfw-mitico::before { background: var(--rm4); box-shadow: 0 0 .4em var(--rm2); animation: tfx-orbita 3.6s linear infinite; }
.tfw-mitico::after { width: .34em; height: .34em; background: var(--rm3); animation: tfx-orbita 3.6s linear infinite -1.8s; }
@keyframes tfx-orbita {
  0% { left: -.4em; top: 30%; transform: scale(.7); opacity: .55; }
  25% { left: 46%; top: -.55em; transform: scale(1.2) rotate(90deg); opacity: 1; }
  50% { left: calc(100% + .1em); top: 30%; transform: scale(.7) rotate(180deg); opacity: .55; }
  75% { left: 46%; top: calc(100% - .1em); transform: scale(.45) rotate(270deg); opacity: .25; }
  100% { left: -.4em; top: 30%; transform: scale(.7) rotate(360deg); opacity: .55; }
}

/* Selo da raridade (o mesmo do perfil, da conquista e da lista) */
.rar-chip {
  display: inline-flex; align-items: center; align-self: flex-start; padding: 2px 8px 3px; border-radius: 6px;
  font: 800 10px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: var(--chip, #8A8F98); text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.rar-inicial { --chip: #9D96C4; }
.rar-comum { --chip: #8A8F98; }
.rar-incomum { --chip: #2FA84F; }
.rar-raro { --chip: #1E88E5; }
.rar-epico { --chip: #7B2FF2; }
.rar-lendario { --chip: #F08C00; background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%); background-size: 260% 100%; animation: tfx-brilho 2.4s linear infinite; }
.rar-mitico { --chip: #D3263A; } /* o selo mítico completo está no bloco "Mítico" no fim do arquivo */

/* Título equipado no perfil e no confronto do duelo */
.profile-header-title[class*="title-tier-"]:not(.title-tier-default), .duelo-confronto-titulo[class*="title-tier-"]:not(.title-tier-default) {
  color: var(--rar-cor, var(--gold)); background: color-mix(in srgb, var(--rar-cor) 13%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar-cor) 45%, transparent);
}
.title-tier-comum { --rar-cor: var(--rar-comum); }
.title-tier-incomum { --rar-cor: var(--rar-incomum); }
.title-tier-raro { --rar-cor: var(--rar-raro); }
.title-tier-epico { --rar-cor: var(--rar-epico); }
.title-tier-lendario { --rar-cor: var(--rar-lendario); }
.title-tier-mitico { --rar-cor: var(--rar-mitico); }
.profile-header-title.title-tier-lendario, .duelo-confronto-titulo.title-tier-lendario,
.profile-header-title.title-tier-mitico, .duelo-confronto-titulo.title-tier-mitico { animation: tfx-halo 2.4s ease-in-out infinite; }
@keyframes tfx-halo { 50% { box-shadow: 0 0 0 1px var(--rar-cor), 0 0 18px color-mix(in srgb, var(--rar-cor) 45%, transparent); } }

/* Lista de títulos do perfil: medalha e filete na cor da raridade */
.title-item.unlocked[class*="tier-"] .title-medal { background: color-mix(in srgb, var(--rar-cor, var(--muted)) 15%, var(--surface)); color: var(--rar-cor, var(--muted)); }
.title-item.unlocked { box-shadow: inset 3px 0 0 var(--rar-cor, transparent); }
.title-item.equipped { box-shadow: inset 3px 0 0 var(--rar-cor, transparent), 0 0 0 2px var(--gold-soft); }
.title-item.tier-comum { --rar-cor: var(--rar-comum); }
.title-item.tier-incomum { --rar-cor: var(--rar-incomum); }
.title-item.tier-raro { --rar-cor: var(--rar-raro); }
.title-item.tier-epico { --rar-cor: var(--rar-epico); }
.title-item.tier-lendario { --rar-cor: var(--rar-lendario); }
.title-item.tier-mitico { --rar-cor: var(--rar-mitico); }
.title-copy .rar-chip { margin-top: 5px; font-size: 9px; padding: 1px 6px 2px; }

/* Reduzir animações: ajuste do próprio app (Perfil → engrenagem). */
html.reduce-motion .title-fx, html.reduce-motion .rar-chip,
html.reduce-motion .profile-header-title, html.reduce-motion .duelo-confronto-titulo { animation: none !important; }
html.reduce-motion .title-fx-wrap::before, html.reduce-motion .title-fx-wrap::after { display: none; }
html.reduce-motion .title-fx, html.reduce-motion .rar-chip { animation-duration: 12s; }

/* ---------- Animação de conquista de título ---------- */
@property --tc-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tc-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; overflow: hidden; background: rgba(14, 10, 34, .64); animation: tc-aparecer .25s ease both; }
.tc-overlay.tc-saindo { animation: tc-sumir .25s ease both; }
@keyframes tc-aparecer { from { opacity: 0; } }
@keyframes tc-sumir { to { opacity: 0; } }
.tc-mitico { background: radial-gradient(circle at 50% 50%, #3A0A1C 0%, #12040C 72%); }
.tc-ceu { position: absolute; inset: 0; pointer-events: none; }
.tc-ceu i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #FFE2C4; animation: tc-estrela 2.4s ease-in-out infinite; }
@keyframes tc-estrela { 50% { opacity: .15; } }
.tc-raios { position: absolute; width: 760px; height: 760px; max-width: 200vw; border-radius: 50%; pointer-events: none; opacity: 0; }
.tc-epico .tc-raios, .tc-lendario .tc-raios, .tc-mitico .tc-raios { animation: tc-raios-in .6s ease .15s forwards, tc-girar 14s linear infinite; }
.tc-epico .tc-raios { background: repeating-conic-gradient(from 0deg, rgba(169, 123, 255, .3) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); mask: radial-gradient(circle, #000 10%, transparent 62%); }
.tc-lendario .tc-raios { background: repeating-conic-gradient(from 0deg, rgba(255, 166, 43, .34) 0 7deg, transparent 7deg 15deg, rgba(255, 209, 92, .26) 15deg 22deg, transparent 22deg 30deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 64%); mask: radial-gradient(circle, #000 10%, transparent 64%); }
.tc-mitico .tc-raios { background: repeating-conic-gradient(from 0deg, rgba(255, 59, 59, .3) 0 6deg, transparent 6deg 14deg, rgba(255, 138, 92, .26) 14deg 20deg, transparent 20deg 28deg, rgba(255, 209, 92, .24) 28deg 34deg, transparent 34deg 42deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 66%); mask: radial-gradient(circle, #000 12%, transparent 66%); animation-delay: 1.2s, 0s; }
@keyframes tc-raios-in { to { opacity: 1; } }
@keyframes tc-girar { to { transform: rotate(360deg); } }
.tc-anel { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 3px solid; pointer-events: none; opacity: 0; }
.tc-comum .tc-anel { border-color: #B5BAC4; animation: tc-anel 1.1s ease-out .2s 2; }
.tc-incomum .tc-anel { border-color: #4FD27A; animation: tc-anel 1.1s ease-out .2s 2; }
.tc-raro .tc-anel { border-color: #4AAEFF; animation: tc-anel 1s ease-out .2s 3; }
@keyframes tc-anel { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.tc-card {
  position: relative; z-index: 2; width: min(380px, 100%); padding: 26px 22px 22px; border-radius: 22px; text-align: center; overflow: hidden;
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; align-items: center; gap: 10px; animation: tc-pop .55s cubic-bezier(.2, 1.5, .4, 1) both;
}
.tc-card .rar-chip { align-self: center; }
@keyframes tc-pop { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tc-eyebrow { font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tc-titulo { max-width: 100%; font-family: var(--font-serif); font-size: 26px; line-height: 1.25; padding: 4px 6px; }
.tc-card p { margin: 0; font-size: 13.5px; color: var(--muted); }
.tc-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.tc-raro .tc-card::after, .tc-epico .tc-card::after, .tc-lendario .tc-card::after {
  content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; transform: rotate(18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: tc-varrer 1.1s ease .45s both;
}
@keyframes tc-varrer { from { left: -60%; } to { left: 130%; } }
.tc-lendario .tc-card, .tc-mitico .tc-card { border: 3px solid transparent; animation: tc-pop .55s cubic-bezier(.2, 1.5, .4, 1) both, tc-borda 3s linear infinite; }
.tc-lendario .tc-card { background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--tc-ang), #FF8C1A, #FFD15C, #E87500, #FFF1C9, #FF8C1A) border-box; box-shadow: 0 0 40px rgba(255, 140, 26, .35), 0 24px 60px rgba(0, 0, 0, .35); }
.tc-mitico .tc-card { background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--tc-ang), #FF3B3B, #FF8A5C, #FFD15C, #B01226, #FF3B3B) border-box; box-shadow: 0 0 70px rgba(255, 59, 59, .5), 0 24px 60px rgba(0, 0, 0, .45); animation-delay: 1.15s, 1.15s; }
@keyframes tc-borda { to { --tc-ang: 360deg; } }
.tc-letras { background: none; overflow: visible; }
.tc-letra {
  display: inline-block; opacity: 0; transform: translateY(.4em) scale(.6); font-weight: 800;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, var(--rm1), var(--rm2), var(--rm3), var(--rm2));
  animation: tc-letra .4s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
@keyframes tc-letra { to { opacity: 1; transform: none; } }
.tc-part { position: absolute; left: 50%; top: 50%; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; z-index: 3; opacity: 0; animation: tc-voar var(--dur, 1.2s) cubic-bezier(.15, .7, .3, 1) var(--atraso, 0s) forwards; }
.tc-part.estrela { width: 12px; height: 12px; border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes tc-voar { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(.6); } }
.tc-part.converge { animation-name: tc-convergir; }
@keyframes tc-convergir { 0% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.4); } 30% { opacity: 1; } 92% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } }
.tc-clarao { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 236, 214, .95), rgba(255, 236, 214, 0) 60%); animation: tc-clarao .7s ease 1s both; }
@keyframes tc-clarao { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.tc-calmo *, .tc-calmo *::before, .tc-calmo *::after, .tc-calmo { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
html.reduce-motion .tc-overlay *, html.reduce-motion .tc-overlay *::before, html.reduce-motion .tc-overlay *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }

/* =================================================================
   Emblemas de elo e trilha de elos do duelo
   ================================================================= */
.division-badge { padding: 3px 10px 3px 4px; }
.division-badge .rank-emblem { width: 18px; height: 18px; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.rank-track-card { margin-top: 14px; padding: 18px 20px; }
.rank-track-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; }
.rank-step { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; opacity: .5; transition: opacity .2s ease; }
.rank-step:not(.is-done):not(.is-current) .rank-emblem img { filter: grayscale(.9) brightness(.9); }
.rank-step.is-done { opacity: .85; }
.rank-step.is-current { opacity: 1; }

@keyframes rank-step-float { 50% { transform: translateY(-3px); } }
.rank-step strong { font-size: 11.5px; color: var(--ink); }
.rank-step.is-current strong { color: var(--division-color); font-size: 12.5px; }
.rank-step small { font: 10px var(--font-mono); color: var(--muted); }
.rank-track-bar { height: 7px; margin-top: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rank-track-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--division-color) 60%, #fff), var(--division-color)); }
.rank-track-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rank-track-note strong { color: var(--ink); }
@media (max-width: 600px) {
  .rank-track-card { padding: 14px 10px; }
  .rank-step .rank-emblem { width: 30px; height: 30px; }
  .rank-step.is-current .rank-emblem { width: 42px; height: 42px; }
  .rank-step strong { font-size: 10px; }
  .rank-step.is-current strong { font-size: 11px; }
  .rank-step small { display: none; }
}
/* Reduzir animações: ajuste do próprio app (Perfil → engrenagem). */
html.reduce-motion .rank-step.is-current .rank-emblem { animation: none; }
.duelo-confronto-vs { animation: duelo-vs-pulse 1.6s ease-in-out infinite; }
@keyframes duelo-vs-pulse { 50% { transform: scale(1.12); } }
.pick-item[hidden], .pick-group[hidden], .pick-empty[hidden] { display: none !important; }

/* =================================================================
   Energia: pílula no topo, modal de recarga, loja
   ================================================================= */
.energia-icone { width: 15px; height: 15px; flex-shrink: 0; fill: currentColor; }
.energia-pill {
  display: flex; align-items: center; gap: 5px; border-radius: 999px; padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); background: var(--blue-soft); color: var(--blue);
  font: 700 12.5px var(--font-mono); cursor: pointer;
}
.energia-pill:hover { filter: brightness(1.05); }
.energia-pill.is-low { background: var(--coral-soft); color: var(--coral); border-color: color-mix(in srgb, var(--coral) 40%, transparent); animation: energia-alerta 1.6s ease-in-out infinite; }
.energia-pill.is-premium { background: linear-gradient(140deg, #7C5CFF, #D6467A); color: #fff; border-color: transparent; }
@keyframes energia-alerta { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 18%, transparent); } }
html.reduce-motion .energia-pill.is-low { animation: none; }

.energia-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 10, 40, .55); }
.energia-modal { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px 26px 24px; text-align: center; }
.energia-modal h2 { margin: 0; font-family: var(--font-serif); font-size: 22px; }
.energia-sub { margin: 6px auto 16px; max-width: 46ch; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.energia-msg { margin: 12px auto 0; padding: 8px 12px; border-radius: 10px; background: var(--teal-soft); color: var(--teal); font-size: 13px; max-width: 46ch; }
.energia-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; text-align: left; }
.energia-opcao { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface-2); }
.energia-opcao h3 { margin: 0; font-family: var(--font-serif); font-size: 16px; }
.energia-opcao p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1; }
.energia-opcao .btn { width: 100%; justify-content: center; min-height: 40px; font-size: 13px; }
.energia-opcao-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.energia-premium { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(140deg, #7C5CFF, #D6467A) border-box; }
.energia-premium .energia-opcao-head { flex-direction: column; align-items: flex-start; }
.energia-tag { font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: #fff; background: linear-gradient(140deg, #7C5CFF, #D6467A); padding: 3px 8px; border-radius: 999px; }
.energia-saldo { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--font-mono); color: var(--gold); }
.energia-saldo .icon-slot, .energia-preco .icon-slot { width: 13px; height: 13px; }
.energia-comprar { display: flex; justify-content: space-between !important; gap: 8px; }
.energia-preco { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-family: var(--font-mono); font-weight: 700; }
@media (max-width: 640px) {
  .energia-opcoes { grid-template-columns: 1fr; }
  .energia-modal { padding: 24px 16px 18px; }
}
.store-energia-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.store-energia-item {
  display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1.5px solid color-mix(in srgb, var(--blue) 30%, transparent); background: var(--blue-soft); color: var(--ink); font-size: 14px;
}
.store-energia-item .energia-icone { width: 22px; height: 22px; color: var(--blue); }
.store-energia-item strong { flex: 1; }
.store-energia-item span { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font: 700 13px var(--font-mono); }
.store-energia-item:disabled { opacity: .5; cursor: not-allowed; }

/* =================================================================
   Duelo: destaque do Top 3 do ranking geral
   ================================================================= */
.top-coroa { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.top-selo {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px;
  font: 800 13px var(--font-sans); letter-spacing: .08em; color: #2b1d00;
  background: linear-gradient(110deg, #ffe58a, #f5b81c 45%, #fff3c4 60%, #f0a500);
  background-size: 220% 100%; box-shadow: 0 6px 18px rgba(240, 165, 0, .45), inset 0 1px 0 rgba(255,255,255,.8);
  animation: top-selo-brilho 2.4s linear infinite, top-selo-entra .6s cubic-bezier(.2,.9,.3,1.4) both;
}
.top-selo-2 { color: #1f2733; background-image: linear-gradient(110deg, #f4f7fb, #aeb9c9 45%, #ffffff 60%, #9aa6b8); box-shadow: 0 6px 18px rgba(120, 134, 158, .45), inset 0 1px 0 #fff; }
.top-selo-3 { color: #3b1f08; background-image: linear-gradient(110deg, #fbe0c4, #d38a4c 45%, #ffe9d3 60%, #c47a3d); box-shadow: 0 6px 18px rgba(196, 122, 61, .45), inset 0 1px 0 rgba(255,255,255,.7); }
.top-selo.is-mini { padding: 2px 7px; font-size: 10px; gap: 3px; box-shadow: none; animation: top-selo-brilho 2.4s linear infinite; }
.top-selo.is-mini .top-coroa { width: 10px; height: 10px; }
@keyframes top-selo-brilho { to { background-position: -220% 0; } }
@keyframes top-selo-entra { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.duelo-confronto-avatar-wrap { position: relative; display: inline-block; border-radius: 50%; }
.duelo-confronto-jogador.is-top .duelo-confronto-avatar-wrap::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #ffd34d, #fff6cc, #f0a500, #ffd34d);
  filter: blur(6px); opacity: .9; animation: top-aura-gira 3s linear infinite;
}
.duelo-confronto-jogador.is-top-2 .duelo-confronto-avatar-wrap::before { background: conic-gradient(from 0deg, #c7d0dc, #ffffff, #8f9bb0, #c7d0dc); }
.duelo-confronto-jogador.is-top-3 .duelo-confronto-avatar-wrap::before { background: conic-gradient(from 0deg, #e3a06a, #ffe2c7, #b8662c, #e3a06a); }
.duelo-confronto-jogador.is-top .duelo-confronto-avatar { position: relative; border-color: #fff; }
.duelo-confronto-jogador { isolation: isolate; }
@keyframes top-aura-gira { to { transform: rotate(360deg); } }
.top-alerta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: #3d2b00;
  background: linear-gradient(105deg, #fff3c4, #ffd966 50%, #ffe28a); border: 1px solid #e0a800;
  animation: top-selo-entra .6s cubic-bezier(.2,.9,.3,1.4) both;
}
.top-alerta-2 { color: #26303f; background: linear-gradient(105deg, #f7f9fc, #dfe4ec 50%, #eef1f6); border-color: #aab4c4; }
.top-alerta-3 { color: #3b1f08; background: linear-gradient(105deg, #fbe3cc, #e9ad7a 50%, #f4cfa8); border-color: #c47a3d; }
.top-alerta .top-coroa { width: 18px; height: 18px; }
html.reduce-motion .top-selo, html.reduce-motion .top-alerta, html.reduce-motion .duelo-confronto-jogador.is-top .duelo-confronto-avatar-wrap::before { animation: none; }

/* Planos Premium (mensal / anual) */
.planos { display: grid; gap: 8px; }
.plano { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.plano.is-destaque { border-color: color-mix(in srgb, #7C5CFF 55%, transparent); background: color-mix(in srgb, #7C5CFF 8%, var(--surface)); }
.plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.plano-nome { font-weight: 700; font-size: 13px; }
.plano-off { font: 800 11px var(--font-mono); color: #fff; background: var(--teal); padding: 2px 7px; border-radius: 999px; }
.plano-valor { display: flex; align-items: baseline; gap: 3px; }
.plano-preco { font-family: var(--font-serif); font-size: 19px; color: var(--ink); }
.plano-valor small { color: var(--muted); font-size: 12px; }
.plano-detalhe { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.plano .btn { margin-top: 4px; }
.energia-premium p { flex: 0; }
/* Premium ocupa a linha de cima; moedas e anúncio lado a lado embaixo. */
.energia-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.energia-premium { grid-column: 1 / -1; }
.energia-premium .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .energia-opcoes, .energia-premium .planos { grid-template-columns: 1fr; }
}

/* =================================================================
   Cadastro enxuto (2 etapas)
   ================================================================= */
.onboarding-modal { max-width: 560px; }
.wiz-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wiz-top .wizard-count { font: 600 12px var(--font-mono); color: var(--muted); }
.wiz-progress { height: 6px; margin: 10px 0 22px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.wiz-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7C5CFF, #D6467A); transition: width .35s ease; }
.wizard-panel h2 { font-size: 22px; margin: 0 0 12px; }
.wiz-sub { margin: 22px 0 10px; font-family: var(--font-serif); font-size: 16px; }
.wiz-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.wizard-panel .modal-field input { font-size: 16px; padding: 14px 16px; border-radius: 14px; }
.wiz-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.wiz-target, .wiz-chip {
  display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 14px; text-align: left;
  border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--ink);
  font-size: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.wiz-target strong { font-weight: 600; }
.wiz-target .icon-slot, .wiz-chip .icon-slot { color: var(--muted); }
.wiz-target:active, .wiz-chip:active { transform: scale(.98); }
.wiz-target.selected, .wiz-chip.selected { border-color: var(--blue); background: var(--blue-soft); }
.wiz-target.selected .icon-slot, .wiz-chip.selected .icon-slot { color: var(--blue); }
.wiz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-chip { min-height: 44px; border-radius: 999px; padding: 8px 16px; }
.wiz-goal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wiz-goal .goal-option { min-height: 64px; }
.wizard-skip { margin-top: 14px; }
@media (max-width: 600px) {
  .onboarding-modal { max-height: 92vh; display: flex; flex-direction: column; }
  .onboarding-modal .wizard-panel { flex: 1; }
  .wiz-targets { grid-template-columns: 1fr 1fr; }
  .onboarding-modal .wizard-foot { position: sticky; bottom: -20px; background: var(--surface); padding: 12px 0 4px; margin-top: 8px; }
}

/* =================================================================
   Moeda do Pontua
   ================================================================= */
.moeda-pontua { filter: drop-shadow(0 1px 1px rgba(122, 74, 0, .35)); }

/* =================================================================
   Atalhos do dia (início)
   ================================================================= */
@keyframes qdia-pulso { 50% { box-shadow: 0 0 0 6px rgba(124, 92, 255, .18); } }


/* =================================================================
   Missões e baús
   ================================================================= */
.missoes-bloco { padding: 20px 22px; margin-bottom: 16px; }
.missoes-lista { display: grid; gap: 10px; margin-top: 12px; }
.missao { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.missao-info { flex: 1; min-width: 0; }
.missao-info strong { font-size: 14px; }
.missao-info small { font: 11.5px var(--font-mono); color: var(--muted); }
.missao-barra { height: 7px; margin: 7px 0 4px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.missao-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7C5CFF, #1F9C8A); transition: width .4s ease; }
.missao.is-pronta { border-color: var(--gold); background: color-mix(in srgb, #F5C33B 12%, var(--surface)); }
.missao.is-resgatada { opacity: .65; }
.missao.is-resgatada strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.missao-premio {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--gold); background: var(--surface); color: var(--gold); font: 700 13px var(--font-mono); white-space: nowrap;
}
.missao-premio .icon-slot { width: 16px; height: 16px; }
.missao.is-pronta .missao-premio { background: linear-gradient(140deg, #FFE27A, #F0A500); color: #3d2b00; border-color: transparent; animation: premio-pula 1.4s ease-in-out infinite; }
.missao-premio:disabled { opacity: .55; cursor: default; }
@keyframes premio-pula { 50% { transform: translateY(-2px) scale(1.05); } }
.missao-ok { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--teal-soft); color: var(--teal); }

.baus-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 0; }
.page-wrap > .baus-linha { margin: 0 0 16px; }
.bau-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; border-radius: 16px; cursor: pointer;
  border: 1.5px dashed var(--border); background: var(--surface); color: var(--ink);
}
.bau-card strong { display: block; font-size: 14px; }
.bau-card small { display: block; font-size: 12px; color: var(--muted); }
.bau-card:disabled { cursor: default; }
.bau-card:disabled .bau-svg { filter: grayscale(.6) opacity(.7); }
.bau-card.is-pronto { border-style: solid; border-color: var(--gold); background: color-mix(in srgb, #F5C33B 10%, var(--surface)); }
.bau-card.is-pronto.is-epico { border-color: #8B5CF6; background: color-mix(in srgb, #8B5CF6 10%, var(--surface)); }
.bau-card.is-pronto .bau-svg { animation: bau-chama 1.6s ease-in-out infinite; }
@keyframes bau-chama { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(0); } }
.bau-svg { width: 52px; height: 46px; flex-shrink: 0; overflow: visible; }
.bau-svg .bau-luz { opacity: 0; transition: opacity .4s ease; }
.bau-svg .bau-tampa { transform-origin: 8px 26px; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.bau-svg.is-aberto .bau-tampa { transform: rotate(-35deg) translate(-2px, -6px); }
.bau-svg.is-aberto .bau-luz { opacity: 1; animation: bau-brilho 1.4s ease-in-out infinite; }
.bau-svg.is-tremendo { animation: bau-treme .12s linear infinite; }
@keyframes bau-treme { 0% { transform: translateX(-2px) rotate(-3deg); } 50% { transform: translateX(2px) rotate(3deg); } 100% { transform: translateX(-2px) rotate(-3deg); } }
@keyframes bau-brilho { 50% { transform: scale(1.15); opacity: .7; } }
.bau-backdrop { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 10, 40, .6); }
.bau-modal { width: min(440px, 100%); padding: 26px 22px 22px; text-align: center; }
.bau-palco .bau-svg { width: 150px; height: 130px; }
.bau-modal .bau-palco { padding-top: 22px; }
.bau-titulo { margin: 6px 0 14px; font-family: var(--font-serif); font-size: 21px; }
.bau-premios { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.bau-premio {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; padding: 12px 10px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); opacity: 0; animation: premio-aparece .5s cubic-bezier(.2,1.4,.4,1) forwards;
}
.bau-premio strong { font: 800 20px var(--font-serif); }
.bau-premio small { font-size: 11px; color: var(--muted); }
.bau-premio .icon-slot, .bau-premio .energia-icone { width: 26px; height: 26px; color: var(--blue); }
.bau-premio.is-raro { border-color: #8B5CF6; background: color-mix(in srgb, #8B5CF6 12%, var(--surface)); box-shadow: 0 0 18px rgba(139, 92, 246, .35); }
.bau-raro-tag { font: 800 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: #fff; background: linear-gradient(140deg, #8B5CF6, #D6467A); padding: 2px 8px; border-radius: 999px; }
@keyframes premio-aparece { 0% { opacity: 0; transform: translateY(14px) scale(.6); } 100% { opacity: 1; transform: none; } }
.toast-moedas {
  position: fixed; left: 50%; bottom: 96px; z-index: 99; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: #1A1633; color: #FFE27A; font: 700 15px var(--font-mono); box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: toast-sobe 2.2s ease forwards;
}
.toast-moedas .icon-slot { width: 22px; height: 22px; }
@keyframes toast-sobe { 0% { opacity: 0; transform: translate(-50%, 16px); } 15%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@media (max-width: 600px) { .baus-linha { grid-template-columns: 1fr; } .missao { gap: 10px; padding: 10px 12px; } }

/* Combo de acertos (modo rápido) */
.combo-badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 8px 14px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue); animation: combo-pop .5s cubic-bezier(.2,1.6,.4,1);
}
.combo-x { font: 800 15px var(--font-sans); letter-spacing: .04em; }
.combo-xp { font: 700 12px var(--font-mono); opacity: .85; }
.combo-badge.is-warm { background: linear-gradient(110deg, #FFE27A, #F5A524); color: #3d2b00; }
.combo-badge.is-hot { background: linear-gradient(110deg, #FF8A3D, #E8336B, #8B5CF6); background-size: 200% 100%; color: #fff; box-shadow: 0 6px 20px rgba(232, 51, 107, .35); animation: combo-pop .5s cubic-bezier(.2,1.6,.4,1), combo-fogo 1.6s linear infinite; }
@keyframes combo-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes combo-fogo { to { background-position: -200% 0; } }

/* =================================================================
   Evolução: caderno de erros e Raio-X
   ================================================================= */
.caderno-card, .raiox-card { padding: 22px; margin-bottom: 16px; }
.caderno-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.caderno-numeros > div { padding: 14px; border-radius: 14px; background: var(--surface-2); }
.caderno-numeros strong { display: block; font: 800 26px var(--font-serif); }
.caderno-numeros small { color: var(--muted); font-size: 12px; }
.caderno-numeros .is-revisar strong { color: var(--coral); }
.caderno-numeros .is-dominada strong { color: var(--teal); }
.caderno-sub { margin: 4px 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.caderno-agenda { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.caderno-agenda > div { padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); text-align: center; min-width: 70px; }
.caderno-agenda strong { display: block; font: 700 16px var(--font-mono); }
.caderno-agenda small { color: var(--muted); font-size: 11px; }
.raiox-sugestao { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 14px 0; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--coral) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--coral) 35%, transparent); }
.raiox-sugestao strong { display: block; font-size: 16px; margin-top: 2px; }
.raiox-sugestao small { color: var(--muted); font-size: 12.5px; }
.raiox-sugestao.is-vazio { background: var(--surface-2); border-color: var(--border); display: block; }
.raiox-forte { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.raiox-forte strong { color: var(--teal); }
.raiox-legenda { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.raiox-legenda span { width: 14px; height: 14px; border-radius: 4px; margin-left: 8px; }
.raiox-grupo h3 { margin: 16px 0 8px; font-family: var(--font-serif); font-size: 15px; }
.raiox-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.raiox-cel {
  display: flex; flex-direction: column; gap: 3px; min-height: 76px; padding: 10px; text-align: left; border-radius: 12px; cursor: pointer;
  border: none; background: var(--cel); color: #fff; transition: transform .12s ease;
}
.raiox-cel:hover { transform: scale(1.03); }
.raiox-cel span { font-size: 12px; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.raiox-cel strong { font: 800 18px var(--font-mono); text-shadow: 0 1px 2px rgba(0,0,0,.25); margin-top: auto; }
.raiox-cel small { font-size: 10.5px; opacity: .9; }
.raiox-cel.is-vazia { color: var(--muted); border: 1px dashed var(--border); }
.raiox-cel.is-vazia span, .raiox-cel.is-vazia strong { text-shadow: none; }
@media (max-width: 600px) { .raiox-grade { grid-template-columns: 1fr 1fr; } .caderno-numeros strong { font-size: 22px; } }

/* Filtro do concurso-alvo (novo simulado) */
.alvo-atalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 20px; border-radius: 16px; background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); }
.alvo-atalho strong { display: block; font-size: 15px; margin-top: 2px; }
.alvo-atalho small { color: var(--muted); font-size: 12px; }
.alvo-atalho.is-ativo { background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }

/* =================================================================
   Comentário por alternativa
   ================================================================= */
.coment-lista { display: grid; gap: 6px; margin-top: 12px; text-align: left; }
.coment-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.coment { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.coment-letra { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 12px var(--font-sans); background: var(--surface-2); color: var(--muted); }
.coment.is-certa { border-color: color-mix(in srgb, var(--teal) 45%, transparent); background: color-mix(in srgb, var(--teal) 7%, var(--surface)); }
.coment.is-certa .coment-letra { background: var(--teal); color: #fff; }
.coment.is-errada.is-marcada { border-color: color-mix(in srgb, var(--coral) 45%, transparent); background: color-mix(in srgb, var(--coral) 6%, var(--surface)); }
.coment.is-errada.is-marcada .coment-letra { background: var(--coral); color: #fff; }
.coment-op { font-size: 13px; font-weight: 600; color: var(--ink); }
.coment-op em { font: 700 10px var(--font-mono); font-style: normal; text-transform: uppercase; color: var(--coral); margin-left: 4px; }
.coment.is-certa .coment-op em { color: var(--teal); }
.coment p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* =================================================================
   Questão do dia
   ================================================================= */
.qdia-login { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.qdia-leitura { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--gold); font-size: 13px; }
.qdia-leitura.is-livre { background: var(--teal-soft); color: var(--teal); }
.options.is-bloqueado .option { opacity: .55; filter: blur(1.5px); transition: filter .3s ease, opacity .3s ease; }
.qdia-resultado { padding: 22px; margin-bottom: 16px; }
.qdia-veredito { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; margin-bottom: 14px; }
.qdia-veredito strong { font: 800 20px var(--font-serif); }
.qdia-veredito span { font-size: 13px; }
.qdia-resultado.is-acerto .qdia-veredito { background: var(--teal-soft); color: var(--teal); }
.qdia-resultado.is-erro .qdia-veredito { background: var(--coral-soft); color: var(--coral); }
.qdia-gabarito p { font-size: 14px; line-height: 1.55; }
.qdia-sua { color: var(--coral); }
.qdia-exp { color: var(--muted); }
.qdia-placar { padding: 22px; }
.qdia-placar .ranking-list { max-height: none; margin-top: 12px; }

/* =================================================================
   Checkout Premium (Asaas)
   ================================================================= */
.checkout-modal { max-width: 480px; text-align: left; }
.checkout-modal h2 { text-align: center; margin-bottom: 14px; }
.checkout-planos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.checkout-plano[data-ck-plano="teste"] { grid-column: 1 / -1; border-style: dashed; }
.plano-teste-btn { width: 100%; margin-top: 10px; border-style: dashed; } /* teste interno (?teste-pagamento) */
.checkout-plano {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-align: left; cursor: pointer;
  border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--ink);
}
.checkout-plano span { font-weight: 700; font-size: 13px; }
.checkout-plano em { font: 800 11px var(--font-mono); font-style: normal; color: #fff; background: var(--teal); padding: 1px 6px; border-radius: 999px; }
.checkout-plano strong { font: 800 20px var(--font-serif); }
.checkout-plano strong small { font: 500 12px var(--font-sans); color: var(--muted); }
.checkout-plano > small { font-size: 11.5px; color: var(--muted); }
.checkout-plano.selected { border-color: #7C5CFF; background: color-mix(in srgb, #7C5CFF 9%, var(--surface)); box-shadow: 0 0 0 3px rgba(124, 92, 255, .15); }
.checkout-modal .modal-field input { font-size: 16px; }
.checkout-legal { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.checkout-espera { display: flex; justify-content: center; margin: 8px 0 14px; }
.checkout-modal #ckReabrir { width: 100%; justify-content: center; }
.assinatura-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border-radius: 14px; text-align: left; background: var(--surface-2); border: 1px solid var(--border); }
.assinatura-box strong { display: block; font-size: 15px; margin-top: 2px; }
.assinatura-box small { color: var(--muted); font-size: 12px; }
.toast-premium { color: #fff; background: linear-gradient(140deg, #7C5CFF, #D6467A); }
.toast-premium .energia-icone { width: 18px; height: 18px; }

/* =================================================================
   Nick, revanche, ligas e convites
   ================================================================= */
.nick-field { margin-bottom: 6px; }
.nick-input { display: flex; align-items: center; gap: 4px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-2); transition: border-color .15s ease; }
.nick-input > span { font: 700 16px var(--font-mono); color: var(--muted); }
.nick-input input { flex: 1; min-width: 0; border: none !important; background: transparent !important; box-shadow: none !important; padding: 14px 0 !important; font-size: 16px; outline: none; color: var(--ink); }
.nick-input.is-ok { border-color: var(--teal); }
.nick-input.is-ocupado, .nick-input.is-invalido { border-color: var(--coral); }
.nick-msg { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.nick-input.is-ok + .nick-msg { color: var(--teal); }
.nick-input.is-ocupado + .nick-msg, .nick-input.is-invalido + .nick-msg { color: var(--coral); }
.nick-sugestoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; font-size: 12px; color: var(--muted); }
.nick-sug { padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); background: var(--blue-soft); color: var(--blue); font: 600 13px var(--font-mono); cursor: pointer; }
.nick-sug:hover { background: color-mix(in srgb, var(--blue) 20%, transparent); }
.nick-outras { font-family: var(--font-sans); padding: 6px 10px; }

.revanche-avisos { position: fixed; right: 16px; bottom: 96px; z-index: 92; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.revanche-aviso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1.5px solid #7C5CFF; box-shadow: 0 12px 30px rgba(31, 21, 80, .25); animation: combo-pop .4s ease; }
.revanche-aviso > div { flex: 1 1 160px; min-width: 0; }
.revanche-aviso strong { display: block; font-size: 14px; }
.revanche-aviso small { color: var(--muted); font-size: 12px; }
.revanche-aviso .btn { min-height: 36px; padding: 6px 12px; font-size: 13px; }
@media (min-width: 900px) { .revanche-avisos { bottom: 24px; } }

.liga-board { padding: 20px; }
.liga-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.liga-topo strong { display: block; font: 800 20px var(--font-serif); }
.liga-topo small { color: var(--muted); font-size: 12px; }
.liga-aviso { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--gold); font-weight: 600; font-size: 13px; }
.liga-row.zona-sobe { border-left: 4px solid var(--teal); }
.liga-row.zona-desce { border-left: 4px solid var(--coral); }
.liga-corte { margin: 2px 0; padding: 4px 10px; font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; border-radius: 8px; }
.liga-corte.sobe { color: var(--teal); background: var(--teal-soft); }
.liga-corte.desce { color: var(--coral); background: var(--coral-soft); }

.convites-card { padding: 20px 22px; margin-bottom: 16px; grid-column: 1 / -1; }
.convite-link { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.convite-link input { flex: 1 1 220px; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font: 13px var(--font-mono); }

/* ---------------- Caixinhas de seleção personalizadas ---------------- */
.pick-item input, .topic-item input, .pick-all-row input, .switch-row input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 20px; height: 20px; min-width: 20px; margin: 0; padding: 0; flex-shrink: 0;
  border: 1.5px solid var(--muted); border-radius: 6px; background: transparent;
  display: inline-grid; place-content: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.pick-item input[type="radio"] { border-radius: 50%; }
.pick-item input::after, .topic-item input::after, .pick-all-row input::after, .switch-row input[type="checkbox"]::after {
  content: ""; width: 10px; height: 6px; border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
  transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .12s ease;
}
.pick-item input[type="radio"]::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; margin: 0; transform: scale(0); }
.pick-item input:checked, .topic-item input:checked, .pick-all-row input:checked, .switch-row input[type="checkbox"]:checked {
  background: var(--blue); border-color: var(--blue);
}
.pick-item input:checked::after, .topic-item input:checked::after, .pick-all-row input:checked::after, .switch-row input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.pick-item input[type="radio"]:checked::after { transform: scale(1); }
.pick-item input:active, .topic-item input:active, .pick-all-row input:active { transform: scale(.9); }
.pick-item input:focus-visible, .topic-item input:focus-visible, .pick-all-row input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.topic-item { grid-template-columns: 20px minmax(0, 1fr); }
.topic-item .topic-text { padding-left: 2px; }
.pick-item { gap: 12px; }
.pick-all-row {
  display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 4px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border);
}
.pick-all-row.is-selected { background: var(--blue-soft); border-color: var(--blue); }
.pick-all-row[hidden] { display: none !important; }
.topic-list .topic-all { grid-column: 1 / -1; font-weight: 600; background: var(--surface-2); }
.topic-list .topic-all.has-checked { background: var(--blue-soft); }

.profile-mini-btn { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; border-radius: 999px; }
.profile-mini-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.profile-mini-btn:hover .avatar { box-shadow: 0 0 0 2px var(--blue); }

/* ---------------- Perfil público e amigos ---------------- */
.ranking-row.is-clickable { cursor: pointer; transition: background .15s ease, transform .1s ease; }
.ranking-row.is-clickable:hover { background: var(--surface-2); }
.ranking-row.is-clickable:active { transform: scale(.99); }
.ranking-row.is-clickable:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.perfil-pub { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 0 0 22px; text-align: center; }
.perfil-pub-loading { padding: 80px 0; display: flex; justify-content: center; }
.perfil-pub .modal-close { z-index: 2; background: var(--surface); }
.perfil-pub-banner {
  height: 96px; border-radius: var(--radius) var(--radius) 0 0;
  background: radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--pp-cor) 70%, transparent), transparent 70%),
              linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--pp-cor) 60%, var(--surface-2)));
}
.perfil-pub-head { margin-top: -52px; padding: 0 22px; }
.perfil-pub-avatar {
  display: inline-flex; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--surface-2);
  border: 4px solid var(--surface); box-shadow: 0 0 0 3px var(--pp-cor), 0 10px 28px rgba(0,0,0,.25);
}
.perfil-pub-avatar .avatar-art, .perfil-pub-avatar svg { width: 100%; height: 100%; }
.perfil-pub-head h2 { margin: 12px 0 2px; font-family: var(--font-serif); font-size: 22px; overflow-wrap: anywhere; }
.perfil-pub-title { font-size: 13px; color: var(--gold); font-weight: 600; }
.perfil-pub-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.perfil-pub-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border);
}
.perfil-pub-tag svg { width: 16px; height: 16px; }
.perfil-pub-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 22px 0; }
.perfil-pub-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 12px; background: var(--surface-2); }
.perfil-pub-stat .icon-slot, .perfil-pub-stat i { color: var(--blue); }
.perfil-pub-stat strong { font-size: 17px; }
.perfil-pub-stat span:last-child { font-size: 12px; color: var(--muted); }
.perfil-pub-desde { margin: 14px 22px 0; font-size: 12.5px; color: var(--muted); }
.perfil-pub-msg { margin: 12px 22px 0; font-size: 13px; color: var(--teal); font-weight: 600; }
.perfil-pub-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 22px 0; }
.perfil-pub-acoes .btn { flex: 1 1 160px; justify-content: center; }
.perfil-pub-acoes .btn.is-amigo { color: var(--teal); border-color: var(--teal); }
.btn-danger { background: #D9455F; color: #fff; border: 0; }
.amigos-card .section-caption .amigo-meu-id { color: var(--blue); }
.amigo-busca {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 4px 4px 4px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.amigo-busca > span { color: var(--muted); font-weight: 700; }
.amigo-busca input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 8px 0; font-size: 14px; }
.amigo-busca .btn { padding: 8px 12px; }
.amigo-busca-msg { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.amigo-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; }
.amigo-lista { display: grid; gap: 4px; }
.amigo-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.amigo-row:hover { background: var(--surface-2); }
.amigo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.amigo-info strong { font-size: 14px; overflow-wrap: anywhere; }
.amigo-info small { font-size: 12px; color: var(--muted); }
.amigo-acoes { display: flex; gap: 6px; }
.amigo-acoes .btn { padding: 7px 12px; font-size: 12.5px; }
.amigo-vazio { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.amizade-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 120;
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--blue); color: #fff; font: inherit; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  animation: amizadeIn .3s ease;
}
@keyframes amizadeIn { from { opacity: 0; transform: translate(-50%, 12px); } }
.amigo-row { flex-wrap: wrap; }
.amigo-info { min-width: 140px; }
.amigo-info strong { overflow-wrap: normal; word-break: break-word; }
.amigo-acoes { margin-left: auto; }


/* =================================================================
   AVATAR NOVO, MOLDURAS E FUNDOS DE PERFIL
   ================================================================= */
.avatar-art { background: var(--surface-2); }
/* Moldura: envolve o avatar por fora do recorte redondo */
.av-mold { position: relative; display: inline-block; vertical-align: middle; line-height: 0; border-radius: 50%; }
.av-mold > :not(.fr):not(.fr-top) { position: relative; z-index: 2; }
.av-mold > .fr { position: absolute; inset: -14%; z-index: 1; pointer-events: none; }
.av-mold > .fr-top { position: absolute; inset: -14%; z-index: 3; pointer-events: none; }
.av-mold > .fr svg, .av-mold > .fr-top svg { width: 100%; height: 100%; overflow: visible; display: block; }
/* Órbita: anel em degradê girando + duas luas */
.mold-orbita .fr { inset: -7%; border-radius: 50%; background: conic-gradient(from 0deg, #6B4EE6, #3FD1B4, #F0B942, #FF7BA8, #6B4EE6);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: girar 4s linear infinite; }
.mold-orbita .fr-top { inset: -16%; animation: girar 6s linear infinite reverse; }
.mold-orbita .lua { position: absolute; width: 9%; height: 9%; border-radius: 50%; background: #FFE9A6; box-shadow: 0 0 10px 2px #F0B942; }
.mold-orbita .lua.a { top: 6%; left: 50%; } .mold-orbita .lua.b { bottom: 10%; left: 14%; width: 6%; height: 6%; background: #C9FFF6; box-shadow: 0 0 8px 2px #3FD1B4; }

/* Neon: dois anéis pulsando */
.mold-neon .fr { inset: -6%; border-radius: 50%; border: 3px solid #FF7BA8; box-shadow: 0 0 12px #FF7BA8, inset 0 0 12px #FF7BA8; animation: neon 2.4s ease-in-out infinite; }
.mold-neon .fr-top { inset: -12%; border-radius: 50%; border: 2px solid #6FB3FF; box-shadow: 0 0 14px #6FB3FF; animation: neon 2.4s ease-in-out infinite .6s; }

/* Louros de aprovação (SVG gerado) */

/* Constelação: trilha pontilhada + estrelas piscando */
.mold-constelacao .fr { inset: -16%; animation: girar 30s linear infinite; }
.mold-constelacao .st { animation: piscar 2s ease-in-out infinite; }
.mold-constelacao .st:nth-child(3n) { animation-delay: .7s; } .mold-constelacao .st:nth-child(3n+1) { animation-delay: 1.3s; }

/* Chama arcana: anel violeta tremulando */
.mold-chama .fr { inset: -10%; border-radius: 50%; background: conic-gradient(from 0deg, #5B2E91, #C77DE0, #F5A6C9, #8A4FD1, #5B2E91, #C77DE0, #5B2E91);
  filter: blur(5px); animation: girar 3s linear infinite, tremular .9s ease-in-out infinite alternate; }
.mold-chama .fr-top { inset: -4%; border-radius: 50%; border: 2px solid #F5A6C9; opacity: .8; }

/* Holográfica: brilho iridescente e reflexo varrendo */
.mold-holo .fr { inset: -7%; border-radius: 50%; background: conic-gradient(from var(--a, 0deg), #ff9fd5, #9fe6ff, #b6ffb0, #fff3a0, #d5b0ff, #ff9fd5);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  animation: girar 5s linear infinite; }
.mold-holo .fr-top { inset: -7%; border-radius: 50%; overflow: hidden;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.mold-holo .fr-top::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%); animation: reflexo 2.8s ease-in-out infinite; }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes neon { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes brilhar { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .75; } }
@keyframes varrer { 0% { opacity: 0; } 50% { opacity: .9; } 100% { opacity: 0; } }
@keyframes piscar { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes tremular { from { transform: rotate(0deg) scale(1); } to { transform: rotate(8deg) scale(1.04); } }
@keyframes reflexo { 0% { transform: translateX(-60%); } 60%,100% { transform: translateX(60%); } }



html.reduce-motion .av-mold *, html.reduce-motion .av-mold *::after, html.reduce-motion .fundo-perfil * { animation: none !important; }
/* Molduras em tamanhos pequenos (ranking, liga): anel mais fino */
.ranking-avatar-wrap .av-mold > .fr, .amigo-row .av-mold > .fr { inset: -10%; }
.ranking-avatar-wrap .av-mold.mold-orbita > .fr, .ranking-avatar-wrap .av-mold.mold-holo > .fr, .amigo-row .av-mold.mold-orbita > .fr, .amigo-row .av-mold.mold-holo > .fr {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.ranking-avatar-wrap .av-mold.mold-neon > .fr { border-width: 2px; }

/* Fundos de perfil */
.fundo-perfil { position: absolute; inset: 0; overflow: hidden; }
.fundo-perfil > * { position: absolute; inset: 0; }
.fundo-padrao { background: radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--pp-cor, #9B84FF) 70%, transparent), transparent 70%), linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--pp-cor, #3B2A8C) 60%, var(--surface-2))); }
/* ---------- Fundos ---------- */
@keyframes deriva { from { transform: translate(0,0) scale(1); } to { transform: translate(18%, 12%) scale(1.15); } }
@keyframes onda { to { transform: translateX(-50%); } }

/* =================================================================
   Fundos de perfil desenhados (js/fundos.js) — cenas em camadas.
   Os desenhos parados vêm de classes criadas pelo JS (data URI); aqui só
   posição, cor e movimento (transform/opacity, leves para o celular).
   ================================================================= */
.fp { position: absolute; inset: 0; overflow: hidden; }
.fp > i, .fp > svg, .fp > canvas, .fp > span { position: absolute; display: block; }
.fp-est { inset: 0; background-repeat: repeat; }
.fp-est1 { animation: fp-pisca 3.4s ease-in-out infinite alternate; }
.fp-est2 { animation: fp-pisca 4.8s ease-in-out infinite alternate-reverse; }
.fp-est3 { opacity: .7; }
@keyframes fp-pisca { from { opacity: .3; } to { opacity: 1; } }
@keyframes fp-respira { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.fp-grao { inset: 0; opacity: .16; mix-blend-mode: overlay; }
/* faísca de 4 pontas */
.fp-cintila { width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 50%, transparent) center / 100% 1.4px no-repeat, linear-gradient(transparent, #fff 50%, transparent) center / 1.4px 100% no-repeat, radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.6px, rgba(255, 255, 255, 0) 4px);
  animation: fp-faisca 3s ease-in-out infinite; }
@keyframes fp-faisca { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(.6) rotate(70deg); opacity: .6; } }

/* Aurora boreal */
.fp-boreal { background: linear-gradient(180deg, #01040D 0%, #041026 45%, #072238 78%, #0A3040 100%); }
.fp-boreal .fp-ceu { inset: 0; background: radial-gradient(75% 65% at 50% 100%, rgba(40, 255, 170, .2), transparent 70%); }
.bo { inset: -8% -14% 12% -14%; background-size: 100% 100%; background-repeat: no-repeat; transform-origin: 50% 100%; mix-blend-mode: screen; filter: blur(1.6px); will-change: transform; }
.bo-c1, .bo-c1b { animation: bo-onda1 9s ease-in-out infinite; }
.bo-c1b { animation: bo-onda1 9s ease-in-out infinite, bo-cintila 2.2s ease-in-out infinite alternate; }
.bo-c2 { inset: -16% -18% 24% -18%; opacity: .75; animation: bo-onda2 13s ease-in-out infinite; }
.bo-c3 { inset: -10% -30% 26% 28%; opacity: .6; animation: bo-onda3 11s ease-in-out infinite; }
@keyframes bo-onda1 { 0%, 100% { transform: translateX(-4%) skewX(-9deg) scaleY(1); } 50% { transform: translateX(4%) skewX(8deg) scaleY(1.14); } }
@keyframes bo-onda2 { 0%, 100% { transform: translateX(5%) skewX(7deg) scaleY(1.06); } 50% { transform: translateX(-5%) skewX(-7deg) scaleY(.9); } }
@keyframes bo-onda3 { 0%, 100% { transform: translateX(0) skewX(-6deg) scaleY(.88); } 50% { transform: translateX(-9%) skewX(9deg) scaleY(1.12); } }
@keyframes bo-cintila { from { opacity: 0; } to { opacity: .95; } }
.bo-brilho { inset: 35% 0 0 0; background: radial-gradient(60% 80% at 50% 100%, rgba(60, 255, 170, .26), transparent 70%); animation: fp-respira 5s ease-in-out infinite; }
.bo-montes, .ce-morro { left: 0; right: 0; bottom: 0; height: 32%; background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%; }

/* Céu estrelado (as estrelas e a Via Láctea são desenhadas no canvas, js/cosmeticos.js) */
.fp-ceu-noite { background: linear-gradient(180deg, #02030F 0%, #090B2C 45%, #19154E 75%, #35226C 100%); }
.fp-ceu-noite canvas { inset: 0; width: 100%; height: 100%; }
.ce-brilho { inset: 45% 0 0 0; background: radial-gradient(70% 90% at 70% 100%, rgba(170, 120, 255, .35), transparent 70%); }
.ce-morro { height: 26%; }

/* Galáxia */
.fp-galaxia { background: radial-gradient(80% 90% at 55% 50%, #1A1450 0%, #0A0824 55%, #04030F 100%); }
.ga-nuvem { inset: 0; background: radial-gradient(40% 60% at 22% 30%, rgba(214, 70, 160, .25), transparent 70%), radial-gradient(45% 55% at 82% 72%, rgba(60, 120, 255, .22), transparent 70%); animation: fp-respira 9s ease-in-out infinite; }
.ga-plano { left: 52%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-16deg) scaleY(.36); }
.ga-disco { position: absolute; display: block; inset: 0; background-size: contain; background-repeat: no-repeat; animation: ga-gira 80s linear infinite; will-change: transform; }
@keyframes ga-gira { to { transform: rotate(-360deg); } }
.ga-nucleo { left: 52%; top: 50%; height: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 246, 220, .95), rgba(255, 200, 140, .45) 40%, transparent); animation: ga-pulsa 4s ease-in-out infinite; }
@keyframes ga-pulsa { 0%, 100% { transform: translate(-50%, -50%) scale(.9); opacity: .85; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } }

/* Nebulosa */
.fp-nebulosa { background: #09031E; }
.nb-gas { border-radius: 50%; filter: blur(18px); mix-blend-mode: screen; will-change: transform; }
.nb-g0 { left: -12%; top: -35%; width: 62%; height: 130%; background: radial-gradient(closest-side, #E8409A, transparent); animation: nb-a 14s ease-in-out infinite alternate; }
.nb-g1 { left: 28%; top: -20%; width: 52%; height: 120%; background: radial-gradient(closest-side, #7C5CFF, transparent); animation: nb-b 17s ease-in-out infinite alternate; }
.nb-g2 { left: 58%; top: 15%; width: 52%; height: 110%; background: radial-gradient(closest-side, #2FA8FF, transparent); animation: nb-a 19s ease-in-out infinite alternate-reverse; }
.nb-g3 { left: 12%; top: 38%; width: 42%; height: 100%; background: radial-gradient(closest-side, #FF8A5C, transparent); opacity: .6; animation: nb-b 13s ease-in-out infinite alternate-reverse; }
.nb-g4 { left: 44%; top: 25%; width: 26%; height: 70%; background: radial-gradient(closest-side, #FFFFFF, transparent); opacity: .35; animation: fp-respira 6s ease-in-out infinite; }
@keyframes nb-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(10%, 8%) scale(1.15); } }
@keyframes nb-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-12%, -6%) scale(.95); } }
.nb-poeira { inset: 0; background: radial-gradient(30% 22% at 40% 58%, rgba(6, 0, 18, .75), transparent 70%), radial-gradient(24% 16% at 66% 38%, rgba(6, 0, 18, .6), transparent 70%); filter: blur(6px); animation: nb-a 22s ease-in-out infinite alternate; }
.nb-s0 { left: 18%; top: 30%; } .nb-s1 { left: 47%; top: 62%; animation-delay: 1.1s; } .nb-s2 { left: 72%; top: 24%; animation-delay: 2s; } .nb-s3 { left: 88%; top: 70%; animation-delay: .5s; }

/* Brilho roxo */
.fp-abismo { background: radial-gradient(70% 95% at 50% 50%, #2C0F70 0%, #130636 55%, #070216 100%); }
.ab-raios { left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(170, 120, 255, 0) 0deg 7deg, rgba(185, 140, 255, .2) 9deg 11deg, rgba(170, 120, 255, 0) 13deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, transparent 72%); mask-image: radial-gradient(closest-side, #000 8%, transparent 72%); animation: ab-gira 50s linear infinite; will-change: transform; }
@keyframes ab-gira { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.ab-orbe { left: 50%; top: 50%; height: 110%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 255, .95), rgba(200, 130, 255, .75) 22%, rgba(120, 60, 255, .3) 52%, transparent); animation: ab-pulsa 4s ease-in-out infinite; }
@keyframes ab-pulsa { 0%, 100% { transform: translate(-50%, -50%) scale(.88); opacity: .85; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } }
.ab-anel { left: 50%; top: 50%; height: 56%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid rgba(210, 170, 255, .7); animation: ab-onda 4s ease-out infinite; }
.ab-anel2 { animation-delay: 2s; }
@keyframes ab-onda { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
.ab-p { top: 100%; height: 100%; width: 3px; animation: fp-sobe 7s linear infinite; }
.ab-p::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #EBDDFF; box-shadow: 0 0 6px 1px #B48CFF; }
.ab-p0 { left: 8%; } .ab-p1 { left: 17%; animation-delay: -2.1s; animation-duration: 9s; } .ab-p2 { left: 27%; animation-delay: -4.3s; } .ab-p3 { left: 36%; animation-delay: -1.2s; animation-duration: 8s; } .ab-p4 { left: 47%; animation-delay: -5.5s; }
.ab-p5 { left: 58%; animation-delay: -3.1s; animation-duration: 10s; } .ab-p6 { left: 66%; animation-delay: -6.2s; } .ab-p7 { left: 75%; animation-delay: -.6s; animation-duration: 8.5s; } .ab-p8 { left: 85%; animation-delay: -4.8s; } .ab-p9 { left: 93%; animation-delay: -2.7s; animation-duration: 9.5s; }
@keyframes fp-sobe { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: .8; } 100% { transform: translateY(-108%); opacity: 0; } }

/* Neblina azul */
.fp-neblina { background: linear-gradient(180deg, #06142C 0%, #0E2A52 42%, #2A5486 78%, #5D86B5 100%); }
.ne-lua { right: 13%; top: 13%; height: 26%; max-height: 54px; min-height: 9px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #FFFDF4, #E6EDFF 60%, #C5D3F3);
  box-shadow: 0 0 16px 5px rgba(220, 235, 255, .45), 0 0 60px 26px rgba(160, 200, 255, .2); }
.ne-f { left: 0; right: 0; bottom: 0; background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%; }
.ne-f3 { height: 64%; opacity: .85; } .ne-f2 { height: 52%; } .ne-f1 { height: 40%; }
.ne-nevoa { left: 0; width: 200%; height: 46%; background: radial-gradient(28% 50% at 16% 62%, rgba(214, 230, 255, .6), transparent 70%), radial-gradient(22% 42% at 46% 48%, rgba(214, 230, 255, .45), transparent 70%), radial-gradient(30% 52% at 80% 60%, rgba(214, 230, 255, .55), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x; filter: blur(6px); animation: ne-passa 60s linear infinite; will-change: transform; }
.ne-n1 { bottom: 36%; opacity: .45; } .ne-n2 { bottom: 18%; opacity: .55; animation-duration: 44s; animation-direction: reverse; } .ne-n3 { bottom: -8%; opacity: .8; animation-duration: 30s; }
@keyframes ne-passa { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Aurora (luz líquida) */
.fp-liquida { background: #0B0626; animation: lq-cor 14s ease-in-out infinite alternate; }
@keyframes lq-cor { 0% { filter: hue-rotate(0deg) saturate(1); } 50% { filter: hue-rotate(50deg) saturate(1.15); } 100% { filter: hue-rotate(-40deg) saturate(1.1); } }
.lq { border-radius: 50%; filter: blur(22px); mix-blend-mode: screen; will-change: transform; }
.lq0 { left: -15%; top: -40%; width: 60%; height: 150%; background: radial-gradient(closest-side, #7B5CFF, transparent); animation: lq-a 9s ease-in-out infinite alternate, lq-luz 6s ease-in-out infinite alternate; }
.lq1 { left: 22%; top: -60%; width: 55%; height: 140%; background: radial-gradient(closest-side, #2EE6C0, transparent); animation: lq-b 11s ease-in-out infinite alternate, lq-luz 7s ease-in-out infinite alternate-reverse; }
.lq2 { left: 55%; top: -15%; width: 55%; height: 140%; background: radial-gradient(closest-side, #FF6FAE, transparent); animation: lq-a 10s ease-in-out infinite alternate-reverse, lq-luz 5s ease-in-out infinite alternate; }
.lq3 { left: 2%; top: 30%; width: 50%; height: 120%; background: radial-gradient(closest-side, #3D7BFF, transparent); animation: lq-b 12s ease-in-out infinite alternate-reverse, lq-luz 8s ease-in-out infinite alternate-reverse; }
.lq4 { left: 40%; top: 35%; width: 40%; height: 110%; background: radial-gradient(closest-side, #FFC15C, transparent); opacity: .7; animation: lq-c 8s ease-in-out infinite alternate, lq-luz 6.5s ease-in-out infinite alternate; }
@keyframes lq-luz { from { opacity: .35; } to { opacity: 1; } }
@keyframes lq-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(55%, 22%) scale(1.3); } }
@keyframes lq-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-50%, 25%) scale(.85); } }
@keyframes lq-c { from { transform: translate(0, 0) scale(.9); } to { transform: translate(-45%, -26%) scale(1.25); } }

/* Pôr do sol */
.fp-por { background: linear-gradient(180deg, #2B1055 0%, #7A2A8A 18%, #D9437A 34%, #FF7A55 46%, #FFB25C 56%); }
.po-sol { left: 50%; top: 27%; height: 42%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 45%, #FFF7CF, #FFD65E 45%, #FF8A3D 85%);
  box-shadow: 0 0 26px 8px rgba(255, 175, 85, .6), 0 0 90px 40px rgba(255, 110, 80, .28); animation: po-sol 18s ease-in-out infinite alternate; }
@keyframes po-sol { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(14%); } }
.po-nuvem { height: 9%; width: 42%; border-radius: 50%; background: rgba(255, 196, 206, .5); filter: blur(3px); animation: po-nuvem 38s linear infinite alternate; }
.po-nv1 { left: 6%; top: 22%; } .po-nv2 { left: 52%; top: 12%; width: 30%; opacity: .7; animation-duration: 46s; animation-direction: alternate-reverse; }
@keyframes po-nuvem { from { transform: translateX(-12%); } to { transform: translateX(22%); } }
.po-montes { left: 0; right: 0; bottom: 26%; width: 100%; height: 26%; }
.po-mar { left: 0; right: 0; bottom: 0; height: 27%; background: linear-gradient(180deg, #A13D86, #4B1A63 60%, #2A0E45); }
.po-reflexo { left: 50%; bottom: 0; height: 27%; width: 24%; transform: translateX(-50%); background: repeating-linear-gradient(180deg, rgba(255, 214, 120, .9) 0 2px, transparent 2px 6px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, #000, transparent); mask-image: radial-gradient(50% 100% at 50% 0%, #000, transparent); animation: po-reflexo 2.6s ease-in-out infinite alternate; }
@keyframes po-reflexo { from { transform: translateX(-50%) scaleX(.75); opacity: .65; } to { transform: translateX(-50%) scaleX(1.12); opacity: 1; } }
.po-aves { left: 0; top: 16%; width: 11%; min-width: 34px; height: auto; animation: po-voa 30s linear infinite; }
@keyframes po-voa { 0% { transform: translate(-120%, 0); } 50% { transform: translate(420%, -30%); } 100% { transform: translate(960%, 10%); } }

/* Caderno */
.fp-caderno { background-color: #FBF8EE; background-image: linear-gradient(90deg, transparent 44px, rgba(214, 70, 122, .55) 44px 46px, transparent 46px), repeating-linear-gradient(0deg, transparent 0 21px, rgba(47, 127, 216, .25) 21px 22px); }
.ca-espiral { left: 4px; top: -2px; bottom: 0; width: 30px; background-repeat: repeat-y; background-size: 30px 22px; }
.ca-rabiscos { left: 40px; top: 0; width: calc(100% - 40px); height: 100%; }
.ca-marca { transform-box: fill-box; transform-origin: left center; animation: ca-marca 7s ease-in-out infinite; }
@keyframes ca-marca { 0%, 8% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.ca-linha { stroke-dasharray: 150; stroke-dashoffset: 150; animation: ca-escreve 7s ease-in-out infinite; }
@keyframes ca-escreve { 0%, 30% { stroke-dashoffset: 150; } 62%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ca-lapis { transform: translate(150px, 104px) rotate(135deg); animation: ca-lapis 7s ease-in-out infinite; }
@keyframes ca-lapis { 0%, 30% { transform: translate(150px, 104px) rotate(135deg); } 41% { transform: translate(188px, 101px) rotate(130deg); } 52% { transform: translate(222px, 105px) rotate(138deg); } 62%, 90% { transform: translate(256px, 100px) rotate(133deg); } 100% { transform: translate(256px, 100px) rotate(133deg); opacity: 0; } }

/* Mapa de acertos */
.fp-mapa { background: #0B1525; }
.ma-grade { inset: 0; background-position: 8px 8px; background-repeat: repeat; }
.ma-acende { width: 10px; height: 10px; border-radius: 2.2px; background: #9BFFE6; box-shadow: 0 0 10px #3FD1B4; opacity: 0; animation: ma-acende 4.2s ease-in-out infinite; }
@keyframes ma-acende { 0%, 100% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1.15); } 40% { opacity: .9; transform: scale(1); } 60% { opacity: 0; } }
.ma-a0 { left: 8px; top: 21px; } .ma-a1 { left: 47px; top: 47px; animation-delay: .4s; } .ma-a2 { left: 86px; top: 8px; animation-delay: 1.1s; } .ma-a3 { left: 125px; top: 60px; animation-delay: 1.8s; }
.ma-a4 { left: 164px; top: 34px; animation-delay: 2.3s; } .ma-a5 { left: 216px; top: 86px; animation-delay: .8s; } .ma-a6 { left: 268px; top: 21px; animation-delay: 3s; } .ma-a7 { left: 320px; top: 73px; animation-delay: 1.5s; }
.ma-a8 { left: 372px; top: 47px; animation-delay: 2.7s; } .ma-a9 { left: 437px; top: 8px; animation-delay: .2s; } .ma-a10 { left: 502px; top: 99px; animation-delay: 3.5s; } .ma-a11 { left: 567px; top: 34px; animation-delay: 2s; }

/* Fibra de carbono */
.fp-carbono { background: #121214; }
.cb-trama { inset: 0; background-color: #131313; background-size: 20px 20px;
  background-image: linear-gradient(27deg, #151515 5px, transparent 5px), linear-gradient(207deg, #151515 5px, transparent 5px), linear-gradient(27deg, #2a2a2e 5px, transparent 5px), linear-gradient(207deg, #2a2a2e 5px, transparent 5px), linear-gradient(90deg, #1c1c1f 10px, transparent 10px), linear-gradient(#222226 25%, #19191b 25%, #19191b 50%, transparent 50%, transparent 75%, #2d2d31 75%, #2d2d31);
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0; }
.cb-reflexo { top: -60%; bottom: -60%; left: -50%; width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .08) 60%, transparent); animation: cb-passa 6s ease-in-out infinite; }
@keyframes cb-passa { 0% { transform: translateX(0) rotate(18deg); } 60%, 100% { transform: translateX(420%) rotate(18deg); } }
.cb-vinheta { inset: 0; background: radial-gradient(120% 150% at 50% 40%, transparent 45%, rgba(0, 0, 0, .6)); }

/* Ouro fosco */
.fp-ouro { background: linear-gradient(135deg, #5C3A00 0%, #A8730F 28%, #E6BA50 50%, #F8DC8C 58%, #B47E18 80%, #6E4500 100%); }
.ou-escovado { inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, rgba(0, 0, 0, .06) 1px 2px, transparent 2px 3px); mix-blend-mode: overlay; }
.ou-deco { inset: 0; background-size: 80px 44px; background-repeat: repeat; }
.ou-reflexo { top: -60%; bottom: -60%; left: -50%; width: 38%; background: linear-gradient(90deg, transparent, rgba(255, 250, 225, .5) 50%, transparent); mix-blend-mode: soft-light; animation: cb-passa 4.8s ease-in-out infinite; }
.ou-s0 { left: 14%; top: 28%; } .ou-s1 { left: 36%; top: 70%; animation-delay: .8s; } .ou-s2 { left: 58%; top: 22%; animation-delay: 1.6s; } .ou-s3 { left: 78%; top: 62%; animation-delay: 2.3s; } .ou-s4 { left: 92%; top: 30%; animation-delay: 1.1s; }

/* Brasa (modelo antigo, preferido pelo dono) */
.bg-p-brasa { background: linear-gradient(180deg, #2A0806, #6E1608 60%, #C2410C); }
.bg-p-brasa i { position: absolute; bottom: -6px; width: 5px; height: 5px; border-radius: 50%; background: #FFB347; box-shadow: 0 0 8px #FF8A1A; animation: pm-subir 3.2s linear infinite; }
.bg-p-brasa i:nth-child(1) { left: 8%; } .bg-p-brasa i:nth-child(2) { left: 20%; animation-delay: .4s; } .bg-p-brasa i:nth-child(3) { left: 33%; animation-delay: 1.6s; }
.bg-p-brasa i:nth-child(4) { left: 46%; animation-delay: .9s; } .bg-p-brasa i:nth-child(5) { left: 58%; animation-delay: 2.2s; } .bg-p-brasa i:nth-child(6) { left: 70%; animation-delay: 1.2s; }
.bg-p-brasa i:nth-child(7) { left: 82%; animation-delay: 2.7s; } .bg-p-brasa i:nth-child(8) { left: 93%; animation-delay: .2s; }
@keyframes pm-subir { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-90px) translateX(8px); opacity: 0; } }

/* Editor de avatar (modal Editar perfil) */
.av-editor { display: grid; gap: 12px; min-width: 0; }
.av-estilos { justify-self: start; display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-2); border-radius: 999px; border: 1px solid var(--border); }
.av-estilos button { font: 700 13.5px var(--font-serif); border: 0; background: transparent; color: var(--muted); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.av-estilos button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.av-abas { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.av-abas button { flex-shrink: 0; font: 600 13px var(--font-sans); padding: 7px 13px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.av-abas button[aria-selected="true"] { background: var(--blue-soft); color: var(--blue); }
.av-corpo { display: grid; gap: 16px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 4px 2px; }
.av-grupo { display: grid; gap: 8px; }
.av-grupo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.av-grupo-head h4 { margin: 0; font: 700 14px var(--font-serif); }
.av-grupo-head small { color: var(--muted); font-size: 12px; }
.av-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.av-ops-largas { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.av-op { position: relative; display: grid; gap: 4px; justify-items: center; align-content: start; padding: 8px 5px 7px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font: inherit; color: inherit; }
.av-op[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); background: var(--blue-soft); }
.av-op.is-locked .av-op-mini, .av-op.is-locked .av-mini-banner { opacity: .55; }
.av-op-mini { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: block; }
.av-op-mini .avatar-art { width: 100%; height: 100%; display: block; }
.av-op-mini-livre { overflow: visible; display: grid; place-items: center; margin: 6px 0 4px; }
.av-op-circ { display: block; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; }
.av-op-circ .avatar-art { width: 100%; height: 100%; display: block; }
.av-op-nome { font-size: 11.5px; line-height: 1.25; text-align: center; }
.av-op-preco { position: absolute; top: 4px; right: 4px; z-index: 4; display: inline-flex; align-items: center; gap: 3px; font: 700 10.5px var(--font-sans); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 2px 6px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.av-op-preco .icon-slot svg, .av-op-preco i { width: 11px; height: 11px; }
.av-mini-banner { position: relative; display: block; width: 100%; height: 48px; border-radius: 10px; overflow: hidden; }
.av-cores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.av-cor { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.av-cor[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--blue); }
.av-cor-livre { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--border); background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red); cursor: pointer; }
.av-cor-livre input { position: absolute; inset: -8px; width: 48px; height: 48px; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.av-cor-livre-rot { font-size: 12px; color: var(--muted); }
.av-creditos { margin: 0; font-size: 11px; color: var(--muted); }
.av-op:focus-visible, .av-cor:focus-visible, .av-abas button:focus-visible, .av-estilos button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.avatar-preview-big { display: flex; align-items: center; gap: 18px; }
.avatar-preview-big .avatar-preview-circ { display: block; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; border: 3px solid var(--surface); }
.avatar-preview-big .avatar-preview-circ .avatar-art { width: 100%; height: 100%; display: block; }
/* Loja: prévias novas */
.store-item-preview { display: grid; place-items: center; width: 72px; height: 72px; margin: 6px auto 2px; }
.store-avatar-circ { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.store-avatar-circ .avatar-art, .store-item-preview .avatar-art-option { width: 100%; height: 100%; display: block; }
.store-grid-largo { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.store-item-fundos .store-item-preview { width: 100%; height: 64px; }
.store-fundo-preview { position: relative; display: block; width: 100%; height: 64px; border-radius: 12px; overflow: hidden; }
.store-raridade { font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.store-raridade.rar-raro { color: #2F7FD8; } .store-raridade.rar-epico { color: #8B4FF0; } .store-raridade.rar-lendario { color: var(--gold); }
:root[data-theme="dark"] .store-raridade.rar-raro { color: #6FB3FF; } :root[data-theme="dark"] .store-raridade.rar-epico { color: #B48CFF; }
.store-creditos { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
/* Faixa de fundo no cabeçalho do perfil e no perfil público */
.profile-header-card { position: relative; overflow: hidden; padding-top: 78px; }
.profile-header-card > .fundo-perfil { bottom: auto; height: 62px; }
.profile-header-card > :not(.fundo-perfil) { position: relative; z-index: 1; }
.profile-header-card > .av-mold { flex-shrink: 0; margin-top: -40px; }
.profile-header-card .profile-avatar-big { border: 3px solid var(--surface); }
.perfil-pub-banner { position: relative; overflow: hidden; background: none; }
.perfil-pub-avatar-wrap { display: inline-block; position: relative; z-index: 1; }
.ranking-avatar-wrap .av-mold, .liga-row .av-mold { display: block; }
.duelo-confronto-avatar-wrap .av-mold { display: block; }
.profile-header-card > .profile-avatar-big { margin-top: -40px; }
.avatar-preview-big > div:last-child { display: grid; gap: 4px; min-width: 0; }
.avatar-preview-big > div:last-child span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.av-ops { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.av-op-mini { width: 52px; height: 52px; }
@media (max-width: 520px) { .avatar-preview-big .avatar-preview-circ { width: 72px; height: 72px; } .avatar-customizer { padding: 12px; } }

/* Nome + @usuário */
.perfil-pub-user { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: -2px; letter-spacing: .01em; }
.profile-header-user { display: block; font-size: 14px; font-weight: 600; color: var(--muted); margin: -2px 0 6px; }
.amigo-info small { overflow-wrap: anywhere; }

/* ---------- Configurações (engrenagem) ---------- */
.cfg-modal { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px 22px 22px; }
.cfg-modal h2 { display: flex; align-items: center; gap: 10px; margin: 0 40px 6px 0; font-size: 21px; }
.cfg-modal h2 .icon-slot { color: var(--blue); }
.cfg-sub { margin: 20px 0 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.cfg-grupo { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; cursor: pointer; }
.cfg-row + .cfg-row { border-top: 1px solid var(--border); }
.cfg-row.is-off { opacity: .5; }
.cfg-txt { display: grid; gap: 2px; min-width: 0; }
.cfg-txt strong { font-size: 14.5px; }
.cfg-txt small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.cfg-switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--border); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.cfg-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .2s; }
.cfg-switch:checked { background: var(--blue); }
.cfg-switch:checked::after { transform: translateX(18px); }
.cfg-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cfg-switch:disabled { cursor: not-allowed; }
.cfg-vol { cursor: default; }
.cfg-slider { display: flex; align-items: center; gap: 9px; flex: 1; max-width: 230px; color: var(--muted); }
.cfg-slider input { flex: 1; accent-color: var(--blue); height: 28px; }
.cfg-slider span:last-child { font-family: var(--font-mono); font-size: 12px; min-width: 36px; text-align: right; }
.cfg-exemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; }
.cfg-exemplos > span { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.cfg-ex { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 9px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 600 12.5px var(--font-sans); cursor: pointer; }
.cfg-ex .icon-slot { width: 14px; height: 14px; color: var(--blue); }
.cfg-ex:hover:not(:disabled) { border-color: var(--blue); }
.cfg-ex:disabled { opacity: .45; cursor: not-allowed; }
.cfg-nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.cfg-seg { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); flex: none; }
.cfg-seg button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted); font: 600 13px var(--font-sans); padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.cfg-seg button .icon-slot { width: 15px; height: 15px; }
.cfg-seg button.on { background: var(--blue); color: #fff; }

/* =================================================================
   Janelas no celular: cabem na área realmente visível
   ================================================================= */
/* No iPhone, "vh" conta a altura atrás das barras do navegador, então uma
   janela de 92vh centralizada ficava com o topo escondido. "dvh" usa só a
   área visível (navegadores antigos ficam com a linha em vh). */
@media (max-width: 600px) {
  .modal-backdrop { padding: 12px; height: 100vh; height: 100dvh; }
  .onboarding-modal { max-height: 86vh; max-height: 86dvh; padding: 18px 16px; border-radius: 22px; }
  .onboarding-modal .wizard-foot { bottom: -18px; }
  .profile-settings-modal > .hero-actions { bottom: -18px; margin: 0 -16px -18px; padding: 10px 16px; }
  .onboarding-modal h2, .wizard-panel h2 { font-size: 19px; margin-bottom: 10px; }
  .onboarding-modal > p, .wizard-panel > p { font-size: 12.5px; margin-bottom: 14px; }
  .wiz-progress { margin: 8px 0 16px; }
  .wizard-panel .modal-field input { padding: 11px 14px; border-radius: 12px; }
  .modal-field { margin-bottom: 14px; }
  .wiz-hint { font-size: 12px; }
  .wiz-sub { margin: 16px 0 8px; font-size: 15px; }
  .wiz-target { min-height: 42px; padding: 8px 12px; font-size: 13.5px; }
  .wiz-chip { min-height: 38px; padding: 6px 13px; }
  .avatar-customizer { padding: 10px; }
  .avatar-preview-big { gap: 12px; margin-bottom: 10px; }
  .avatar-preview-big .avatar-preview-circ { width: 64px; height: 64px; }
  .avatar-preview-big > div:last-child span { font-size: 12px; }
  .av-corpo { max-height: 38vh; max-height: 38dvh; }
  .av-ops { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
  .av-op-mini { width: 50px; height: 50px; }
}

/* Respiro entre o título/descrição da página e o primeiro bloco. */
.page-wrap > header { margin-bottom: 22px; }
.page-wrap > header .page-subtitle { line-height: 1.5; }

/* =================================================================
   Banner interativo da página inicial
   ================================================================= */
.home-banner { position: relative; margin: 0 0 18px; }
.hb-trilho {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hb-trilho::-webkit-scrollbar { display: none; }
.hb-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; overflow: hidden;
  min-height: 196px; padding: 20px 22px 20px; border-radius: 24px; color: #fff;
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.hb-relampago { background: radial-gradient(120% 140% at 100% 0%, #7C5CFF 0%, #4C34B8 45%, #2A1A6E 100%); }
.hb-temporada { background: radial-gradient(120% 140% at 100% 0%, #F0B942 0%, #C4741F 40%, #5B2E0E 100%); }
.hb-duelo { background: radial-gradient(120% 140% at 100% 0%, #FF7BA8 0%, #D6467A 40%, #4A1238 100%); }
.hb-convite { background: radial-gradient(120% 140% at 100% 0%, #3FD1B4 0%, #1F9C8A 42%, #0D3F3A 100%); }
.hb-tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.16); padding: 6px 11px; border-radius: 999px; position: relative; z-index: 1;
}
.hb-tag .icon-slot { width: 14px; height: 14px; }
.hb-enunciado, .hb-titulo, .hb-texto, .hb-botoes, .hb-resposta, .hb-cta { position: relative; z-index: 1; }
.hb-enunciado { margin: 2px 0 4px; font: 600 17px/1.4 var(--font-sans); max-width: 60ch; }
.hb-titulo { margin: 0; font: 800 22px/1.2 var(--font-serif); max-width: 22ch; }
.hb-texto { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: .92; max-width: 46ch; }
.hb-destaque { color: #FFE9A6; }
.hb-cta { align-self: flex-start; margin-top: 4px; background: #fff !important; color: #1A1633 !important; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.hb-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.hb-ce {
  flex: 1 1 120px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 14px; border: 2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.12); color: #fff; font: 700 16px var(--font-sans); cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.hb-ce:active { transform: scale(.96); }
.hb-certo:hover { background: rgba(63,209,180,.35); }
.hb-errado:hover { background: rgba(255,92,92,.35); }
.hb-resposta { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.22); }
.hb-resposta.ok { box-shadow: inset 0 0 0 2px #3FD1B4; }
.hb-resposta.erro { box-shadow: inset 0 0 0 2px #FF8A8A; }
.hb-resposta strong { font: 800 16px var(--font-serif); }
.hb-resposta span { font-size: 13px; opacity: .92; }
.hb-link { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; border: 0; background: none; color: #FFE9A6; font: 700 13px var(--font-sans); cursor: pointer; }
.hb-link .icon-slot { width: 14px; height: 14px; }
/* Arte de fundo de cada slide */
.hb-raio, .hb-trofeu, .hb-presente {
  position: absolute; right: -18px; top: 50%; transform: translateY(-50%) rotate(-12deg);
  width: 170px; height: 170px; opacity: .16; color: #fff; pointer-events: none;
}
.hb-raio .icon-slot, .hb-trofeu .icon-slot, .hb-presente .icon-slot { display: block; width: 100%; height: 100%; }
.hb-raio .icon-slot .icon, .hb-trofeu .icon-slot .icon, .hb-presente .icon-slot .icon { width: 100%; height: 100%; stroke-width: 1.2; }
.hb-raio { animation: hbPulso 2.6s ease-in-out infinite; }
.hb-vs { position: absolute; right: 16px; top: 16px; display: flex; align-items: center; gap: 6px; opacity: .95; }
.hb-av { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.8); background: rgba(255,255,255,.15); display: grid; place-items: center; }
.hb-av .avatar-art { width: 100%; height: 100%; display: block; }
.hb-av-misterio { font: 900 26px var(--font-serif); color: #fff; animation: hbPulso 1.8s ease-in-out infinite; }
.hb-vs-txt { font: 900 italic 22px var(--font-serif); color: #FFE9A6; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.hb-duelo .hb-tag { margin-top: 30px; }
.hb-pontos { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.hb-ponto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--border); cursor: pointer; transition: width .25s ease, background .25s ease; }
.hb-ponto.on { width: 22px; background: var(--blue); }
.hb-festa { animation: hbFesta .6s ease; }
.hb-tremor { animation: hbTremor .45s ease; }
@keyframes hbPulso { 0%, 100% { opacity: .14; } 50% { opacity: .3; } }
.hb-av-misterio { animation-name: hbPisca; }
@keyframes hbPisca { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes hbFesta { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes hbTremor { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.reduce-motion .hb-raio, .reduce-motion .hb-av-misterio, .reduce-motion .hb-festa, .reduce-motion .hb-tremor { animation: none; }
@media (max-width: 600px) {
  .hb-slide { min-height: 206px; padding: 18px 16px 16px; }
  .hb-enunciado { font-size: 15.5px; }
  .hb-titulo { font-size: 19px; }
  .hb-av { width: 46px; height: 46px; }
}

/* Protetor de sequência */
.protetor-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.protetor-icone { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #3FD1B4, #1F9C8A); box-shadow: 0 8px 20px rgba(31,156,138,.35); }
.protetor-icone .icon-slot .icon { width: 34px; height: 34px; }
.protetor-texto { display: grid; gap: 4px; }
.protetor-texto strong { font: 700 16px var(--font-serif); }
.protetor-texto span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.protetor-estoque b { color: var(--teal); }
.protetor-selo { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 11px; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal); font: 700 12px var(--font-sans); }
.toast-protetor { max-width: min(92vw, 420px); text-align: center; }
@media (max-width: 600px) {
  .protetor-card { grid-template-columns: auto 1fr; }
  .protetor-acao { grid-column: 1 / -1; }
  .protetor-acao .btn { width: 100%; justify-content: center; }
}

/* Convite para ligar o lembrete (início) */
.lembrete-convite { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 16px; }
.lembrete-convite > .icon-slot { flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--gold-soft); color: var(--gold); }
.lembrete-convite > .icon-slot .icon { width: 22px; height: 22px; }
.lembrete-convite > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.lembrete-convite strong { font: 700 14.5px var(--font-serif); }
.lembrete-convite span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.lembrete-convite .btn { flex: none; }

/* Duelo fantasma */
.fantasma-dica { margin: 4px 0 14px; font-size: 12.5px; color: var(--muted); }
.fantasma-oferta { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; text-align: left;
  margin: 6px 0 16px; padding: 16px; border-radius: 18px; border: 1px dashed var(--blue); background: var(--blue-soft); }
.fantasma-oferta > div:nth-child(2) { display: grid; gap: 4px; }
.fantasma-oferta strong { font: 700 15px var(--font-serif); }
.fantasma-oferta span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.fantasma-oferta .btn, .fantasma-aviso { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
.fantasma-aviso { margin: 0; font-size: 13px; color: var(--coral); }
.fantasma-icone { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #9B84FF, #6B4EE6); animation: fantasmaFlutua 2.4s ease-in-out infinite; }
.fantasma-icone .icon-slot .icon { width: 26px; height: 26px; }
@keyframes fantasmaFlutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.reduce-motion .fantasma-icone { animation: none; }
.fantasma-resultado { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 1.45; }
.fantasma-resultado b { color: var(--gold); }

/* =================================================================
   Novo simulado: modos em cartões e matérias em blocos
   ================================================================= */
.modo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 18px; }
.modo-card {
  --modo: var(--blue); --modo-soft: var(--blue-soft);
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; min-height: 76px;
  border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.modo-gold { --modo: var(--gold); --modo-soft: var(--gold-soft); }
.modo-teal { --modo: var(--teal); --modo-soft: var(--teal-soft); }
.modo-card:active { transform: scale(.98); }
.modo-icone { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--modo-soft); color: var(--modo); }
.modo-icone .icon-slot .icon { width: 22px; height: 22px; }
.modo-txt { display: grid; gap: 2px; min-width: 0; }
.modo-txt strong { font: 700 15px var(--font-serif); }
.modo-txt small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.modo-card.active { border-color: var(--modo); background: var(--modo-soft); box-shadow: 0 8px 22px -10px var(--modo); }
.modo-card.active .modo-icone { background: var(--modo); color: #fff; }
@media (max-width: 720px) {
  .modo-cards { grid-template-columns: 1fr; gap: 8px; }
  .modo-card { min-height: 64px; padding: 11px 13px; }
}
.materia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.chip.materia-bloco {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 12px; min-height: 56px;
  border-radius: 14px; white-space: normal;
}
.chip.materia-bloco > .icon-slot { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--surface-2); color: var(--blue); }
.chip.materia-bloco > .icon-slot .icon { width: 18px; height: 18px; }
.chip.materia-bloco > span:last-child { display: grid; gap: 1px; min-width: 0; }
.chip.materia-bloco strong { font-size: 13.5px; line-height: 1.2; }
.chip.materia-bloco small { font-size: 11.5px; opacity: .75; font-weight: 500; }
.chip.materia-bloco.selected > .icon-slot { background: rgba(255,255,255,.22); color: inherit; }
.chip.materia-todas { grid-column: 1 / -1; }
@media (max-width: 600px) { .materia-grid { grid-template-columns: 1fr 1fr; } }

/* =================================================================
   Cartão da patente (ranking)
   ================================================================= */
.patente-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 18px 18px; border-radius: 24px; color: #fff; text-align: center;
  background: linear-gradient(180deg, var(--div-cor), #1A1633); /* reserva para navegadores sem color-mix */
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--div-cor) 85%, #fff 15%) 0%, var(--div-cor) 38%, color-mix(in srgb, var(--div-cor) 35%, #0B0720) 100%);
  box-shadow: 0 18px 40px -18px var(--div-cor), inset 0 1px 0 rgba(255,255,255,.25);
}
.patente-raios {
  position: absolute; inset: -40%; z-index: -1; opacity: .15;
  background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(255,255,255,.55) 0deg 8deg, transparent 8deg 22deg);
  animation: patenteGira 26s linear infinite;
}
.patente-brilho {
  position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  animation: patenteBrilho 4.5s ease-in-out infinite;
}
.patente-emblema { width: 104px; height: 104px; display: grid; place-items: center; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)) drop-shadow(0 0 22px rgba(255,255,255,.35)); animation: patenteFlutua 3.2s ease-in-out infinite; }
.patente-emblema svg { width: 100%; height: 100%; }
.patente-nome { font: 900 15px var(--font-mono); letter-spacing: .28em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0,0,0,.3); }
.patente-pontos { display: grid; gap: 0; }
.patente-pontos strong { font: 900 46px/1 var(--font-serif); text-shadow: 0 3px 12px rgba(0,0,0,.3); }
.patente-pontos span { font-size: 12px; opacity: .85; }
.patente-pos { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.22); font: 600 12.5px var(--font-sans); }
.patente-pos .icon-slot { width: 14px; height: 14px; }
.patente-prog { width: 100%; max-width: 280px; display: grid; gap: 6px; margin-top: 6px; }
.patente-trilho { height: 8px; border-radius: 99px; background: rgba(0,0,0,.28); overflow: hidden; }
.patente-trilho span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fff, #FFE9A6); box-shadow: 0 0 12px rgba(255,255,255,.7); }
.patente-prog small { font-size: 12px; opacity: .9; }
.patente-prog b { color: #FFE9A6; }
@keyframes patenteGira { to { transform: rotate(360deg); } }
@keyframes patenteBrilho { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes patenteFlutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.reduce-motion .patente-raios, .reduce-motion .patente-brilho, .reduce-motion .patente-emblema { animation: none; }

/* =================================================================
   Qualquer janela no celular cabe na área visível (configurações,
   energia, baú, pagamento, autenticação...)
   ================================================================= */
@media (max-width: 600px) {
  .modal-backdrop > .surface, .modal-backdrop > section, .modal-backdrop > div:not(.surface) > .surface {
    max-height: 86vh; max-height: 86dvh; overflow-y: auto;
  }
  .cfg-modal { padding: 18px 16px 16px; border-radius: 22px; }
  .cfg-modal h2 { font-size: 19px; }
  .cfg-row { padding-top: 10px; padding-bottom: 10px; }
  .energia-modal { padding: 20px 16px 16px; }
}

/* Energia no meio do simulado */
.qsheet-head h3 .icon-slot { color: var(--gold); margin-right: 4px; vertical-align: -3px; }
.qsheet-actions.qsheet-col { display: grid; gap: 8px; }
.qsheet-actions.qsheet-col .btn { width: 100%; justify-content: center; }
.enq-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
.enq-opcao { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 12px; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--surface-2); color: var(--ink); cursor: pointer; font: inherit; }
.enq-opcao:not(:disabled):not(.is-off):active { transform: scale(.98); }
.enq-opcao:disabled, .enq-opcao.is-off { opacity: .5; cursor: default; }
.enq-opcao > span:last-child { display: grid; gap: 1px; min-width: 0; }
.enq-opcao strong { font: 700 13.5px var(--font-serif); }
.enq-opcao small { font-size: 11.5px; color: var(--muted); }
.enq-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; }
.enq-ic .icon-slot .icon, .enq-ic .icon { width: 18px; height: 18px; }
.enq-ic-moeda { background: var(--gold-soft); }
.enq-ic-ad { background: var(--teal-soft); color: var(--teal); }
.enq-ic-premium { background: var(--blue); color: #fff; }
.enq-premium { border-color: var(--blue); background: var(--blue-soft); grid-column: 1 / -1; }
.enq-saldo { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.enq-saldo .icon-slot { width: 14px; height: 14px; }

/* Topo: "Meu perfil" ao lado do avatar (saiu do menu de baixo) */
.profile-mini-btn { padding: 4px 12px 4px 4px; border: 1px solid var(--border); background: var(--surface); }
.profile-mini-btn.active { border-color: var(--blue); background: var(--blue-soft); }
.profile-mini-label { font: 700 13px var(--font-sans); color: var(--ink); white-space: nowrap; }
@media (max-width: 720px) {
  .profile-mini-btn > span.profile-mini-label { display: inline; font-size: 12px; }
  .profile-mini-btn { gap: 6px; padding: 3px 10px 3px 3px; }
  /* Logado, a conta fica dentro de "Meu perfil": libera espaço no topo. */
  .auth-top-button.is-signed-in { display: none; }
  .topbar-actions { gap: 6px; }
}
.perfil-conta-btn { margin-top: 12px; }

/* =================================================================
   Trilha
   ================================================================= */
.trilha-materias { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px 6px; scrollbar-width: none; }
.trilha-materias::-webkit-scrollbar { display: none; }
.trilha-materia { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.trilha-materia > .icon-slot { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--blue); }
.trilha-materia > .icon-slot .icon { width: 16px; height: 16px; }
.trilha-materia > span:last-child { display: grid; text-align: left; line-height: 1.15; }
.trilha-materia strong { font-size: 13px; }
.trilha-materia small { font-size: 11px; color: var(--muted); }
.trilha-materia > .icon-slot { color: var(--mc, var(--blue)); }
.trilha-materia.active { border-color: var(--mc, var(--blue)); background: color-mix(in srgb, var(--mc, var(--blue)) 12%, var(--surface)); }
.trilha-materia.active > .icon-slot { background: var(--mc, var(--blue)); color: #fff; }

.trilha-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: center; padding: 16px; margin-bottom: 22px; }
.trilha-resumo-num strong { display: block; font: 900 28px/1 var(--font-serif); }
.trilha-resumo-num strong span { font-size: 15px; color: var(--muted); font-weight: 700; }
.trilha-resumo-num small { font-size: 12px; color: var(--muted); }
.trilha-resumo-barra { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.trilha-resumo-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7C5CFF, #F0B942); }
.trilha-continuar { grid-column: 1 / -1; justify-content: center; }
.trilha-completa { grid-column: 1 / -1; margin: 0; display: flex; gap: 8px; align-items: center; color: var(--gold); font-weight: 700; font-size: 13.5px; }

.trilha-unidade { margin: 0 0 26px; }
.trilha-unidade-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(120deg, var(--violet-mid, #3B2A8C), #6B4EE6); color: #fff; margin-bottom: 18px; }
.trilha-unidade-head > div { display: grid; gap: 2px; min-width: 0; }
.trilha-unidade-num { font: 700 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.trilha-unidade-head strong { font: 700 14px/1.3 var(--font-serif); }
.trilha-unidade-est { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--font-sans); background: rgba(0,0,0,.2); padding: 5px 10px; border-radius: 99px; }
.trilha-unidade-est .trilha-estrelas svg:not(:first-child) { display: none; }

.trilha-caminho { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.trilha-no-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateX(var(--x)); }
.trilha-no {
  --c1: #7C5CFF; --c2: #4B32C3;
  width: 66px; height: 66px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2)); box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 10px 18px -8px var(--c2);
  transition: transform .12s ease;
}
.trilha-no:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.trilha-no .icon-slot .icon { width: 28px; height: 28px; }
.trilha-no.feito { --c1: #F0B942; --c2: #C4741F; }
.trilha-no.bloqueado { --c1: var(--surface-2); --c2: var(--border); color: var(--muted); box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.trilha-no.chefe { width: 82px; height: 82px; border-radius: 26px; --c1: #FF7BA8; --c2: #8E1F55; }
.trilha-no.chefe.feito { --c1: #FFE08A; --c2: #C4741F; }
.trilha-no.chefe.bloqueado { --c1: var(--surface-2); --c2: var(--border); }
.trilha-no.atual { animation: trilhaPulso 1.8s ease-in-out infinite; }
@keyframes trilhaPulso { 0%, 100% { box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 0 0 rgba(124,92,255,.55); } 50% { box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 0 12px rgba(124,92,255,0); } }
.reduce-motion .trilha-no.atual { animation: none; }
.trilha-balao { position: absolute; bottom: calc(100% + 6px); white-space: nowrap; padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1.5px solid var(--blue);
  color: var(--blue); font: 800 12px var(--font-sans); text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.trilha-balao::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--blue); }
.trilha-no-nome { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.trilha-estrelas { display: inline-flex; gap: 1px; }
.trilha-estrelas svg { width: 15px; height: 15px; fill: var(--border); }
.trilha-estrelas svg.on { fill: #F0B942; filter: drop-shadow(0 1px 2px rgba(196,116,31,.5)); }
.trilha-estrelas.grande { gap: 6px; }
.trilha-estrelas.grande svg { width: 46px; height: 46px; }
.trilha-estrelas.grande svg.on { animation: estrelaEntra .5s cubic-bezier(.2,1.6,.4,1) both; }
.trilha-estrelas.grande svg:nth-child(2) { animation-delay: .15s; transform: translateY(-8px); }
.trilha-estrelas.grande svg:nth-child(3) { animation-delay: .3s; }
@keyframes estrelaEntra { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.trilha-no-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.trilha-no-info > div { padding: 10px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.trilha-no-info strong { display: block; font: 800 17px var(--font-serif); }
.trilha-no-info small { font-size: 11px; color: var(--muted); }
.trilha-no-assuntos { color: var(--muted); }

.trilha-resultado { text-align: center; display: grid; justify-items: center; gap: 6px; padding: 22px 18px; margin-bottom: 18px; }
.trilha-resultado.passou { background: linear-gradient(180deg, var(--gold-soft), var(--surface)); }
.trilha-resultado h2 { margin: 6px 0 0; font: 900 26px var(--font-serif); }
.trilha-res-sub { margin: 0; color: var(--muted); font-weight: 600; }
.trilha-res-txt { margin: 0; font-size: 13.5px; max-width: 44ch; }
.trilha-bonus { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--gold-soft); color: var(--gold); font-weight: 800; font-size: 13px; }
.trilha-res-acoes { justify-content: center; margin-top: 8px; }
.trilha-no-wrap.tem-balao { margin-top: 30px; }
.trilha-assunto { width: 100%; display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: var(--muted); font: 700 12px var(--font-sans); text-transform: uppercase; letter-spacing: .06em; }
.trilha-assunto::before, .trilha-assunto::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.trilha-assunto span { max-width: 70%; text-align: center; }

/* =================================================================
   Sobrevivência
   ================================================================= */
.modo-coral { --modo: var(--coral); --modo-soft: var(--coral-soft); }
@media (min-width: 721px) { .modo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-hero { display: grid; gap: 16px; padding: 20px; margin-bottom: 18px; }
.sv-hero-arte { display: flex; justify-content: center; }
.sv-hero-arte .sv-vidas .icon-slot .icon { width: 40px; height: 40px; }
.sv-vidas { display: inline-flex; gap: 3px; }
.sv-vidas .icon-slot { color: var(--border); }
.sv-vidas .icon-slot.on, .sv-vidas .on { color: #FF4D6D; }
.sv-vidas .on .icon { fill: #FF4D6D; animation: svBate 1.6s ease-in-out infinite; }
.sv-vidas .icon-slot .icon { width: 24px; height: 24px; }
@keyframes svBate { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.15); } 24% { transform: scale(1); } }
.reduce-motion .sv-vidas .on .icon { animation: none; }
.sv-regras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv-regras > div { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; line-height: 1.35; }
.sv-regras .icon-slot { flex: none; color: var(--coral); }
.sv-recordes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv-recordes > div { padding: 12px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.sv-recordes small { display: block; font-size: 11.5px; color: var(--muted); }
.sv-recordes strong { font: 900 24px var(--font-serif); }
.sv-jogar { justify-content: center; min-height: 52px; font-size: 16px; background: linear-gradient(135deg, #FF7BA8, #D6467A) !important; }
.sv-nota { margin: -6px 0 0; text-align: center; }
.sv-card { margin-bottom: 18px; padding: 18px; }
.sv-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sv-ranking li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.sv-ranking li.eu { box-shadow: inset 0 0 0 2px var(--blue); }
.sv-pos { width: 22px; text-align: center; font: 800 14px var(--font-serif); color: var(--muted); }
.sv-ranking li:nth-child(1) .sv-pos { color: #F0B942; } .sv-ranking li:nth-child(2) .sv-pos { color: #A0AEC0; } .sv-ranking li:nth-child(3) .sv-pos { color: #C27C4A; }
.sv-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; }
.sv-av .avatar-art { width: 100%; height: 100%; display: block; }
.sv-nome { flex: 1; min-width: 0; display: grid; font-weight: 700; font-size: 13.5px; }
.sv-nome small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.sv-ranking strong { font: 800 15px var(--font-serif); }

.sv-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sv-nivel { padding: 5px 11px; border-radius: 99px; background: var(--blue-soft); color: var(--blue); font: 700 12px var(--font-sans); }
.sv-pontos { margin-left: auto; font-size: 12px; color: var(--muted); }
.sv-pontos strong { font: 900 22px var(--font-serif); color: var(--ink); }
.sv-tempo { position: relative; height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 12px; }
.sv-tempo span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3FD1B4, #9B84FF); transition: width .2s linear; }
.sv-tempo.alerta span { background: linear-gradient(90deg, #FF7BA8, #FF4D6D); }
.sv-tempo.parado span { opacity: .45; }
.sv-tempo b { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 700 10px var(--font-mono); color: var(--ink); }
.sv-seq { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 5px 11px; border-radius: 99px; background: var(--gold-soft); color: var(--gold); font: 800 12.5px var(--font-sans); }
.sv-aviso { display: block; margin-top: 4px; color: var(--gold); font-weight: 800; }
.sv-sair { display: flex; justify-content: center; margin-top: 12px; }
.sv-fim { text-align: center; display: grid; justify-items: center; gap: 10px; padding: 26px 18px; margin-bottom: 18px; }
.sv-selo-recorde { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; background: linear-gradient(135deg, #F0B942, #C4741F); color: #1A1633; font: 900 13px var(--font-sans); animation: estrelaEntra .5s cubic-bezier(.2,1.6,.4,1) both; }
.sv-selo-recorde.semana { background: linear-gradient(135deg, #9B84FF, #6B4EE6); color: #fff; }
.sv-fim-pontos strong { display: block; font: 900 56px/1 var(--font-serif); }
.sv-fim-pontos span { font-size: 13px; color: var(--muted); }
.sv-fim-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 380px; }
.sv-fim-stats > div { padding: 10px; border-radius: 12px; background: var(--surface-2); }
.sv-fim-stats strong { display: block; font: 800 20px var(--font-serif); }
.sv-fim-stats small { font-size: 11px; color: var(--muted); }
.sv-fim-ganhos { display: flex; gap: 10px; margin: 0; font-weight: 800; color: var(--teal); }
.sv-fim-ganhos span:last-child { color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.sv-fim-acoes { justify-content: center; }

/* =================================================================
   Desafios entre amigos
   ================================================================= */
.dsf-secao { padding: 18px; margin-top: 18px; display: grid; gap: 10px; }
.dsf-novo { justify-content: center; background: linear-gradient(135deg, #3FD1B4, #1F9C8A) !important; }
.dsf-lista { display: grid; gap: 6px; }
.dsf-linha { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: var(--surface-2); }
.dsf-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface); }
.dsf-av .avatar-art, .dsf-av svg { width: 100%; height: 100%; display: block; }
.dsf-info { flex: 1; min-width: 0; display: grid; }
.dsf-info strong { font-size: 13.5px; }
.dsf-info small { font-size: 11.5px; color: var(--muted); }
.dsf-info small.ok { color: var(--teal); font-weight: 700; }
.dsf-info small.perdeu { color: var(--coral); font-weight: 700; }
.dsf-acoes { display: flex; gap: 6px; }
.dsf-acoes .btn { padding: 7px 12px; min-height: 0; font-size: 12.5px; }
.dsf-amigos { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; }
.dsf-amigo { flex: none; width: 82px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--ink); font: 600 11.5px var(--font-sans); cursor: pointer; }
.dsf-amigo .dsf-av { width: 46px; height: 46px; }
.dsf-amigo span:last-child { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsf-amigo.sel { border-color: var(--teal); background: var(--teal-soft); }
.dsf-materias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dsf-aviso { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 16px; border: 1.5px solid var(--teal); background: var(--teal-soft); }
.dsf-aviso .dsf-av { width: 44px; height: 44px; }
.dsf-aviso > div { flex: 1; display: grid; min-width: 0; }
.dsf-aviso strong { font: 700 14.5px var(--font-serif); }
.dsf-aviso span { font-size: 12.5px; color: var(--muted); }
.dsf-enviado { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 28px 18px; }
.dsf-enviado-ic { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3FD1B4, #1F9C8A); }
.dsf-enviado-ic .icon-slot .icon { width: 34px; height: 34px; }
.dsf-enviado h2 { margin: 6px 0 0; font: 900 24px var(--font-serif); }
.dsf-enviado p { margin: 0; }
.mobile-nav button, .side-nav button { position: relative; }
.nav-selo { position: absolute; top: 2px; right: calc(50% - 20px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #FF4D6D; color: #fff; font: 800 10px/17px var(--font-sans); text-align: center; }

/* =================================================================
   Chefão da semana
   ================================================================= */
.chefao-hero { --chefe: #6B4EE6; display: grid; gap: 14px; padding: 20px; margin-bottom: 18px; border: 1.5px solid var(--chefe);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--chefe) 22%, transparent), transparent 60%), var(--surface); }
.chefao-hero, .chefao-atalho, .hb-chefao-linha { --x: 0; }
.chefao-hero > .chefao-arte + .chefao-info, .chefao-atalho, .hb-chefao-linha { }
.chefao-hero { grid-template-columns: auto 1fr; align-items: center; }
.chefao-hero > .chefao-meta, .chefao-hero > .btn, .chefao-hero > .chefao-meu, .chefao-hero > .chefao-batalhas, .chefao-hero > p { grid-column: 1 / -1; }
.chefao-arte { position: relative; width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; color: #fff; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--chefe) 70%, #fff), var(--chefe) 55%, color-mix(in srgb, var(--chefe) 50%, #000));
  box-shadow: 0 10px 24px -8px var(--chefe); animation: chefaoRespira 2.6s ease-in-out infinite; }
.chefao-arte .icon-slot .icon { width: 42px; height: 42px; stroke-width: 1.6; }
.chefao-arte.caiu { filter: grayscale(.85); animation: none; }
.chefao-carimbo { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(-8deg); padding: 3px 8px; border-radius: 6px; background: var(--coral); color: #fff; font: 900 10px var(--font-sans); text-transform: uppercase; letter-spacing: .06em; }
@keyframes chefaoRespira { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.05) rotate(-2deg); } }
.reduce-motion .chefao-arte { animation: none; }
.chefao-info { display: grid; gap: 4px; min-width: 0; }
.chefao-tag { font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chefao-nome { font: 900 20px/1.15 var(--font-serif); }
.chefao-vida { display: grid; gap: 3px; margin-top: 4px; }
.chefao-vida-barra { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.chefao-vida-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FF4D6D, #FF7BA8); transition: width .6s ease; }
.chefao-vida small { font-size: 11.5px; color: var(--muted); }
.chefao-vida b { color: var(--ink); }
.chefao-carregando { font-size: 12px; color: var(--muted); }
.chefao-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.chefao-meta span { display: inline-flex; align-items: center; gap: 5px; }
.chefao-hero > .btn { justify-content: center; min-height: 50px; }
.chefao-meu { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); display: flex; align-items: center; gap: 8px; font-size: 14px; }
.chefao-bau { background: linear-gradient(135deg, #F0B942, #C4741F) !important; color: #1A1633 !important; }
.chefao-ok { margin: 0; color: var(--teal); font-weight: 700; display: flex; gap: 6px; align-items: center; }
.chefao-top { padding: 18px; margin-bottom: 18px; }
.chefao-anterior { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 16px; border: 1.5px solid var(--gold); background: var(--gold-soft); }
.chefao-anterior > div { flex: 1; display: grid; }
.chefao-anterior span { font-size: 12.5px; color: var(--muted); }
.chefao-atalho { --chefe: #6B4EE6; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; margin: 0 0 16px; text-align: left;
  border: 1.5px solid var(--chefe); cursor: pointer; color: var(--ink); font: inherit; }
.chefao-atalho .chefao-arte { width: 60px; height: 60px; border-radius: 18px; }
.chefao-atalho .chefao-arte .icon-slot .icon { width: 30px; height: 30px; }
.chefao-resultado { --chefe: #6B4EE6; display: grid; gap: 4px; justify-items: start; padding: 18px; margin-bottom: 18px; border: 1.5px solid var(--chefe); }
.chefao-res-topo { display: flex; gap: 14px; align-items: center; }
.chefao-resultado .chefao-dano-partes { justify-self: stretch; }
.chefao-resultado h2 { margin: 4px 0; font: 900 22px var(--font-serif); }
.chefao-resultado p { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
/* 3 batalhas da semana (segunda, quarta e sexta) */
.chefao-batalhas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chefao-bat { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid transparent; text-align: center; min-width: 0; }
.chefao-bat-n { font: 700 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chefao-bat strong { font: 900 20px/1.1 var(--font-sans); color: var(--ink); min-height: 24px; display: grid; place-items: center; }
.chefao-bat strong .ti { font-size: 20px; }
.chefao-bat small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.chefao-bat.is-feita { background: color-mix(in srgb, var(--teal) 12%, var(--surface-2)); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.chefao-bat.is-feita strong { color: var(--teal); }
.chefao-bat.is-pronta, .chefao-bat.is-agora { border-color: var(--chefe); background: color-mix(in srgb, var(--chefe) 12%, var(--surface-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--chefe) 16%, transparent); }
.chefao-bat.is-pronta strong, .chefao-bat.is-agora strong { color: var(--chefe); }
.chefao-bat.is-bloqueada, .chefao-bat.is-encerrada { border-style: dashed; border-color: var(--border); opacity: .75; }
.chefao-regras { margin: 0 0 10px; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--muted); }
.chefao-regras b { color: var(--ink); }
.chefao-dano-partes { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chefao-dano-partes li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.chefao-dano-partes span { font-size: 11px; color: var(--muted); }
.chefao-dano-partes b { font: 900 17px var(--font-sans); color: var(--ink); }
.hb-chefao { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--chefe) 80%, #fff 0%) 0%, color-mix(in srgb, var(--chefe) 60%, #16103A) 45%, #120B2E 100%); }
.hb-chefao-linha { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.hb-chefao-linha .chefao-arte { width: 64px; height: 64px; border-radius: 20px; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.hb-chefao-linha .chefao-arte .icon-slot .icon { width: 32px; height: 32px; }
.hb-chefao .chefao-tag { display: none; }
.hb-chefao .chefao-nome { color: #fff; font-size: 19px; }
.hb-chefao .chefao-vida small, .hb-chefao .chefao-carregando { color: rgba(255,255,255,.85); }
.hb-chefao .chefao-vida b { color: #fff; }
.hb-chefao .chefao-vida-barra { background: rgba(0,0,0,.3); box-shadow: none; }
/* Banner do chefão: chefão grande e apagado ao fundo, frase do momento e as 3 batalhas da semana */
.hb-chefao-fundo { position: absolute; right: -14px; top: 50%; width: 210px; height: 210px; transform: translateY(-58%) rotate(-10deg); opacity: .2; pointer-events: none; animation: hbChefaoFlutua 6s ease-in-out infinite; }
.hb-chefao-fundo .chefao-boss { width: 100%; height: 100%; display: block; }
@keyframes hbChefaoFlutua { 0%, 100% { transform: translateY(-58%) rotate(-10deg); } 50% { transform: translateY(-63%) rotate(-7deg); } }
.hb-chefao .hb-texto b { color: #FFE9A6; font-weight: 800; }
.hb-chefao-frase { max-width: 52ch; }
.hb-chefao-rodape { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.hb-chefao-rodape .hb-cta { margin-top: 0; }
.hb-chefao-semana { display: flex; align-items: center; gap: 14px; }
.hb-bats { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; }
.hb-bat { display: grid; justify-items: center; gap: 3px; }
.hb-bat small { font: 700 9.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hb-bat-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.hb-bat-ic .icon-slot, .hb-bat-ic .icon-slot .icon { width: 15px; height: 15px; }
.hb-bat.is-feita .hb-bat-ic { background: #3FD1B4; color: #0D3F3A; box-shadow: none; }
.hb-bat.is-aberta .hb-bat-ic { background: #fff; color: var(--chefe); box-shadow: 0 0 0 4px rgba(255,255,255,.22); animation: hbBatPulso 1.8s ease-in-out infinite; }
.hb-bat.is-trancada .hb-bat-ic, .hb-bat.is-encerrada .hb-bat-ic { background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); opacity: .8; }
.hb-bat-linha { width: 14px; height: 2px; margin-top: 14px; border-radius: 2px; background: rgba(255,255,255,.3); }
@keyframes hbBatPulso { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.22); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,.08); } }
.hb-chefao-fim { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; opacity: .85; white-space: nowrap; }
.hb-chefao-fim .icon-slot, .hb-chefao-fim .icon-slot .icon { width: 13px; height: 13px; }
.reduce-motion .hb-chefao-fundo, .reduce-motion .hb-bat.is-aberta .hb-bat-ic { animation: none; }
@media (max-width: 600px) {
  .hb-chefao-fundo { width: 150px; height: 150px; right: -26px; top: 34%; opacity: .14; }
  .hb-chefao-rodape { justify-content: space-between; gap: 10px; }
  .hb-chefao-semana { flex-direction: column; align-items: flex-end; gap: 4px; }
  .hb-chefao .hb-texto { font-size: 13px; }
  .hb-chefao .hb-tag-longo { display: none; }
  .hb-chefao-fundo { right: -34px; top: 26%; opacity: .1; }
}

/* ---- Emblemas de patente (arte em img/patentes, animações por elo) ---- */
.rank-emblem { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; vertical-align: middle; }
.rank-emblem > img { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.rank-emblem-anim::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 160% 0;
  -webkit-mask: var(--emblema) center / contain no-repeat; mask: var(--emblema) center / contain no-repeat;
  animation: emblema-brilho 6s ease-in-out infinite;
}
.rank-emblem-silver.rank-emblem-anim::after { animation-duration: 5s; }
.rank-emblem-gold.rank-emblem-anim::after,
.rank-emblem-platinum.rank-emblem-anim::after { animation-duration: 4s; }
.rank-emblem-diamond.rank-emblem-anim::after,
.rank-emblem-master.rank-emblem-anim::after { animation-duration: 3.2s; }
@keyframes emblema-brilho { 0%, 55% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } }

.rank-emblem-gold.rank-emblem-anim > img,
.rank-emblem-master.rank-emblem-anim > img { animation: emblema-flutua 3.4s ease-in-out infinite; }
@keyframes emblema-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }


/* faíscas (Diamante e Mestre) */
.rank-emblem-diamond.rank-emblem-anim::before,
.rank-emblem-master.rank-emblem-anim::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none; width: 22%; height: 22%; top: 6%; right: 8%;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), conic-gradient(from 45deg, transparent 0 20%, #fff 22% 28%, transparent 30% 45%, #fff 47% 53%, transparent 55% 70%, #fff 72% 78%, transparent 80% 95%, #fff 97%);
  -webkit-mask: radial-gradient(circle, #000 0 45%, transparent 50%); mask: radial-gradient(circle, #000 0 45%, transparent 50%);
  animation: emblema-faisca 2.2s ease-in-out infinite; opacity: 0;
}
.rank-emblem-master.rank-emblem-anim::before { top: 2%; right: 14%; animation-delay: .7s; }
@keyframes emblema-faisca { 0%, 60%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 75% { opacity: 1; transform: scale(1) rotate(45deg); } }

html.reduce-motion .rank-emblem-anim::after, html.reduce-motion .rank-emblem-anim::before, html.reduce-motion .rank-emblem-anim > img { animation: none !important; }
html.reduce-motion .rank-emblem-anim::after, html.reduce-motion .rank-emblem-anim::before, html.reduce-motion .rank-emblem-anim > img { animation: none !important; }

/* ---- Trilha ---- */
.trilha-caminho { position: relative; }

/* Brilho dos emblemas: camada de luz atrás da imagem (sem filtro na arte) */
.rank-emblem > .re-aura { position: absolute; inset: -14%; z-index: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--aura, transparent) 0%, transparent 62%); }
.rank-emblem-bronze { --aura: rgba(232,150,90,.45); }
.rank-emblem-silver { --aura: rgba(210,222,240,.55); }
.rank-emblem-gold { --aura: rgba(255,205,80,.6); }
.rank-emblem-platinum { --aura: rgba(60,220,195,.65); }
.rank-emblem-diamond { --aura: rgba(90,160,255,.75); }
.rank-emblem-master { --aura: rgba(255,200,90,.7); }
.rank-emblem-anim > .re-aura { opacity: .35; }
.rank-emblem-gold.rank-emblem-anim > .re-aura,
.rank-emblem-platinum.rank-emblem-anim > .re-aura,
.rank-emblem-diamond.rank-emblem-anim > .re-aura,
.rank-emblem-master.rank-emblem-anim > .re-aura { animation: emblema-aura 2.8s ease-in-out infinite; }
.rank-emblem-master.rank-emblem-anim > .re-aura { background: radial-gradient(circle, rgba(255,205,90,.75) 0%, rgba(155,92,240,.45) 38%, transparent 64%); }
@keyframes emblema-aura { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
html.reduce-motion .rank-emblem > .re-aura { animation: none !important; }
html.reduce-motion .rank-emblem > .re-aura { animation: none !important; }

/* ---- Duelo: novo visual do menu ---- */
.duelo-page .page-subtitle { max-width: 52ch; }
.duelo-hero { position: relative; overflow: hidden; margin: 16px 0 16px; padding: 20px 20px 16px; border-radius: 24px; color: #fff;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--division-color) 55%, transparent), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(124,92,255,.35), transparent 60%),
    linear-gradient(160deg, #241a52, #120d2b);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--division-color) 70%, #000), inset 0 1px 0 rgba(255,255,255,.08); }
.duelo-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 14px); }
.duelo-hero-topo { position: relative; display: flex; align-items: center; gap: 16px; }
.duelo-hero-emblema { flex: none; display: grid; place-items: center; width: 108px; height: 108px; }
.duelo-hero-info { min-width: 0; flex: 1; display: grid; gap: 3px; }
.duelo-hero-eyebrow { font: 700 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.duelo-hero-elo { font: 900 30px/1 var(--font-serif); color: color-mix(in srgb, var(--division-color) 55%, #fff); text-shadow: 0 2px 14px color-mix(in srgb, var(--division-color) 60%, transparent); }
.duelo-hero-pts { font-size: 13px; opacity: .85; } .duelo-hero-pts b { font-size: 15px; }
.duelo-hero-barra { height: 9px; margin-top: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.duelo-hero-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--division-color) 50%, #fff), var(--division-color)); box-shadow: 0 0 12px var(--division-color); }
.duelo-hero-falta { font-size: 11.5px; opacity: .75; }
.duelo-hero-stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.duelo-hero-stats > div { display: grid; justify-items: center; gap: 1px; padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); text-align: center; }
.duelo-hero-stats .icon-slot .icon, .duelo-hero-stats i { width: 18px; height: 18px; color: #FFD43B; }
.duelo-hero-stats strong { font: 800 17px var(--font-sans); }
.duelo-hero-stats small { font-size: 10.5px; opacity: .7; line-height: 1.2; }
.duelo-hero-escada { position: relative; margin-top: 14px; padding: 12px 8px 4px; border-radius: 16px; background: rgba(0,0,0,.22); }
.duelo-hero-escada .rank-track-bar, .duelo-hero-escada .rank-track-note { display: none; }
.duelo-hero-escada .rank-step strong { color: rgba(255,255,255,.85); }
.duelo-hero-escada .rank-step.is-current strong { color: color-mix(in srgb, var(--division-color) 50%, #fff); }
.duelo-hero-escada .rank-step small { color: rgba(255,255,255,.55); }

.duelo-cta { position: relative; overflow: hidden; padding: 22px 20px 20px; border-radius: 24px; color: #fff; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(90% 70% at 100% 0%, rgba(255,120,170,.45), transparent 60%), linear-gradient(150deg, #6D4CFF, #3A23B8 70%, #2A1886);
  box-shadow: 0 18px 36px -20px rgba(80,50,220,.9), inset 0 1px 0 rgba(255,255,255,.15); }
.duelo-cta-arte { position: absolute; right: -10px; top: -10px; width: 130px; height: 130px; display: grid; place-items: center; pointer-events: none; }
.duelo-cta-arte i, .duelo-cta-arte .icon-slot .icon { width: 74px; height: 74px; color: rgba(255,255,255,.9); transform: rotate(-12deg); filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.duelo-cta-raio { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%); animation: duelo-raio 2.6s ease-in-out infinite; }
@keyframes duelo-raio { 0%, 100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
.duelo-cta-head { position: relative; max-width: calc(100% - 96px); }
.duelo-cta-head h2 { margin: 6px 0 2px; font: 900 26px var(--font-serif); color: #fff; }
.duelo-cta-head p { margin: 0; font-size: 13px; opacity: .85; line-height: 1.45; }
.duelo-cta-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; background: rgba(255,212,59,.18); color: #FFE066; font: 800 11px var(--font-sans); text-transform: uppercase; letter-spacing: .06em; }
.duelo-cta-tag .icon { width: 13px; height: 13px; }
.duelo-cta-label { margin-top: 6px; font: 700 12px var(--font-sans); text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.duelo-materias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
@media (max-width: 520px) { .duelo-materias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chip.duelo-mat { display: grid; justify-items: center; gap: 5px; padding: 11px 4px 9px; border-radius: 16px; font-size: 11.5px; font-weight: 700; line-height: 1.15; text-align: center; white-space: normal; }
.chip.duelo-mat i, .chip.duelo-mat .icon-slot .icon { width: 22px; height: 22px; }
.duelo-cta .chip.duelo-mat { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.14); color: #fff; }
.duelo-cta .chip.duelo-mat.selected { background: #fff; color: #3A23B8; border-color: #fff; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); transform: translateY(-2px); }
.duelo-cta .chip.duelo-mat.selected .icon-slot { color: var(--mat, #3A23B8); } /* ícone na cor da matéria (MATERIA_COR) */
.duelo-cta .chip.duelo-mat.selected { box-shadow: 0 6px 16px -6px rgba(0,0,0,.5), inset 0 -3px 0 var(--mat, transparent); }
.duelo-cta-btn { width: 100%; justify-content: center; margin-top: 8px; padding: 15px; border-radius: 16px; border: 0; font: 900 16px var(--font-sans); letter-spacing: .02em;
  background: linear-gradient(180deg, #FFE066, #FAB005); color: #3B2A00; box-shadow: 0 5px 0 #C77E00, 0 12px 22px -8px rgba(250,176,5,.8); }
.duelo-cta-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #C77E00; }

.duelo-amigo { padding: 20px; border-radius: 24px; display: flex; flex-direction: column; gap: 10px; }
.duelo-amigo-head { display: flex; gap: 12px; align-items: flex-start; }
.duelo-amigo-head h2 { margin: 0; font: 800 20px var(--font-serif); }
.duelo-amigo-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.duelo-amigo-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); }
.duelo-amigo-ic .icon, .duelo-amigo-ic i { width: 24px; height: 24px; }
.duelo-amigo .duelo-cta-label { color: var(--muted); opacity: 1; }
.duelo-amigo .chip.duelo-mat.selected { background: color-mix(in srgb, var(--mat, var(--blue)) 18%, var(--surface)); border-color: var(--mat, var(--blue)); color: var(--ink); }
.duelo-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); width: 100%; }
.duelo-seg .chip { justify-content: center; border: 0; border-radius: 10px; background: transparent; font-weight: 800; }
.duelo-seg .chip.selected { background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.15); color: var(--ink); }
.duelo-amigo-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.duelo-amigo-btn { display: grid; justify-items: center; gap: 3px; padding: 14px 8px; border-radius: 18px; cursor: pointer; text-align: center;
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--ink); box-shadow: 0 4px 0 var(--border); transition: transform .1s ease; }
.duelo-amigo-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border); }
.duelo-amigo-btn i, .duelo-amigo-btn .icon-slot .icon { width: 24px; height: 24px; color: var(--gold); }
.duelo-amigo-btn strong { font-size: 14px; } .duelo-amigo-btn small { font-size: 11px; color: var(--muted); }
html.reduce-motion .duelo-cta-raio { animation: none; }

/* =================================================================
   Chefão: arte de monstro (chifres, coroa, olhos acesos) + selo da matéria
   ================================================================= */
.chefao-arte { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--chefe) 55%, transparent), transparent 68%), linear-gradient(160deg, #2A1B52, #0E0822);
  box-shadow: 0 10px 24px -8px var(--chefe), inset 0 0 0 1.5px color-mix(in srgb, var(--chefe) 60%, rgba(255,255,255,.2)); overflow: visible; }
.chefao-arte .chefao-boss { width: 88%; height: 88%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.chefao-arte .cb-olhos { animation: chefaoOlhos 3.4s ease-in-out infinite; transform-origin: 32px 34px; transform-box: view-box; }
@keyframes chefaoOlhos { 0%, 44%, 52%, 100% { transform: scaleY(1); opacity: 1; } 48% { transform: scaleY(.15); } 70% { opacity: .75; } }
.chefao-selo { position: absolute; right: -6px; bottom: -6px; width: 30%; height: 30%; min-width: 22px; min-height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--chefe); color: #fff; box-shadow: 0 0 0 2.5px var(--surface, #fff), 0 4px 10px -2px rgba(0,0,0,.4); }
.chefao-arte .chefao-selo .icon-slot, .chefao-arte .chefao-selo .icon-slot .icon,
.chefao-atalho .chefao-arte .chefao-selo .icon-slot .icon, .hb-chefao-linha .chefao-arte .chefao-selo .icon-slot .icon { width: 62%; height: 62%; stroke-width: 2; }
.chefao-arte .chefao-selo .icon-slot { display: grid; place-items: center; width: 100%; height: 100%; }
.hb-chefao-linha .chefao-selo { box-shadow: 0 0 0 2.5px #1A1036, 0 4px 10px -2px rgba(0,0,0,.4); }
.chefao-arte.caiu .chefao-selo { display: none; }
.reduce-motion .chefao-arte .cb-olhos { animation: none; }

/* Espadas do Duelo rápido: lâminas se chocam e a faísca pisca */
.duelo-cta-arte .duelo-espadas { width: 112px; height: 112px; position: relative; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); animation: dueloChoque 2.4s ease-in-out infinite; }
.duelo-espadas .de-faisca { transform-box: view-box; transform-origin: 32px 31px; animation: dueloFaisca 2.4s ease-in-out infinite; }
@keyframes dueloChoque { 0%, 100% { transform: rotate(-8deg) scale(1); } 46% { transform: rotate(-8deg) scale(1); } 52% { transform: rotate(-5deg) scale(1.07); } 60% { transform: rotate(-8deg) scale(1); } }
@keyframes dueloFaisca { 0%, 44% { transform: scale(.3); opacity: 0; } 52% { transform: scale(1.25) rotate(20deg); opacity: 1; } 75%, 100% { transform: scale(.6) rotate(40deg); opacity: 0; } }
html.reduce-motion .duelo-cta-arte .duelo-espadas, html.reduce-motion .duelo-espadas .de-faisca { animation: none; }
html.reduce-motion .duelo-espadas .de-faisca { opacity: 1; }

/* Cartão da patente: arena noturna na cor da divisão (substitui os raios) */
.patente-card { background: radial-gradient(70% 50% at 50% 26%, color-mix(in srgb, var(--div-cor) 65%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--div-cor) 38%, #171034) 0%, #140D2E 58%, #0B071D 100%);
  border: 1px solid color-mix(in srgb, var(--div-cor) 55%, transparent);
  box-shadow: 0 18px 40px -20px var(--div-cor), inset 0 1px 0 rgba(255,255,255,.18); }
.patente-chao { position: absolute; left: -30%; right: -30%; bottom: -10%; height: 62%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--div-cor) 55%, transparent) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--div-cor) 55%, transparent) 0 1px, transparent 1px 34px);
  transform: perspective(260px) rotateX(62deg); transform-origin: 50% 100%; opacity: .45;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%); mask-image: linear-gradient(180deg, transparent, #000 55%); }
.patente-halo { position: absolute; left: 50%; top: 74px; width: 150px; height: 150px; margin: -75px 0 0 -75px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--div-cor) 70%, #fff 10%) 0%, transparent 62%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 0 14px rgba(255,255,255,.035), 0 0 0 15px rgba(255,255,255,.09);
  animation: patenteHalo 3.6s ease-in-out infinite; }
.patente-particulas { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
  background-image: radial-gradient(circle, #fff 0 1.2px, transparent 1.6px), radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.4px), radial-gradient(circle, color-mix(in srgb, var(--div-cor) 40%, #fff) 0 1.4px, transparent 1.8px);
  background-size: 90px 110px, 130px 90px, 70px 150px; background-position: 10px 20px, 50px 70px, 30px 10px;
  animation: patenteSobe 14s linear infinite; }
@keyframes patenteHalo { 0%, 100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes patenteSobe { from { background-position: 10px 20px, 50px 70px, 30px 10px; } to { background-position: 10px -200px, 50px -110px, 30px -290px; } }
.patente-card .patente-emblema { filter: none; }
.reduce-motion .patente-halo, .reduce-motion .patente-particulas { animation: none; }
.patente-card .patente-trilho { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.patente-card .patente-pos { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* =================================================================
   Reportar erro + painel do administrador
   ================================================================= */
.qchip-reportar { margin-left: auto; cursor: pointer; color: var(--muted); background: transparent; border-style: dashed; font-size: 12.5px; padding: 5px 11px; min-height: 30px; }
.qchip-reportar:hover { color: var(--coral); border-color: var(--coral); }
.qchip-reportar .icon-slot, .qchip-reportar .icon-slot .icon { width: 14px; height: 14px; }
@media (max-width: 420px) { .qchip-reportar span:last-child { display: none; } .qchip-reportar { padding: 5px 9px; } }
.reporte-motivos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.reporte-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.reporte-texto { width: 100%; box-sizing: border-box; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--ink); font: 14.5px/1.45 var(--font-sans); padding: 10px 12px; resize: vertical; }
.reporte-texto:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.reporte-erro { color: var(--coral); font-size: 13px; margin: 8px 0 0; }
.reporte-ok { display: flex; gap: 12px; align-items: center; padding: 6px 0 12px; }
.reporte-ok .icon-slot, .reporte-ok .icon-slot .icon { width: 34px; height: 34px; color: var(--teal); flex: none; }
.reporte-ok p { margin: 0; font-size: 14.5px; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.admin-stat { padding: 14px; display: grid; gap: 2px; text-align: center; }
.admin-stat strong { font: 900 26px var(--font-serif); }
.admin-stat span { font-size: 12px; color: var(--muted); }
.admin-stat.is-alerta strong { color: var(--coral); }
.admin-bloco { padding: 16px; margin-bottom: 18px; display: grid; gap: 10px; }
section.admin-bloco:not(.surface) { padding: 0; }
.admin-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-pill { padding: 4px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; }
.admin-pill.is-motivo { background: color-mix(in srgb, var(--coral) 14%, transparent); border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.admin-abas { margin-bottom: 4px; }
.admin-reporte { padding: 16px; display: grid; gap: 10px; }
.admin-reporte-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-qtd { margin-left: auto; font: 800 13px var(--font-sans); color: var(--coral); }
.admin-questao summary { cursor: pointer; font-weight: 700; font-size: 13.5px; }
.admin-questao p { font-size: 14px; line-height: 1.5; white-space: pre-line; }
.admin-opcoes { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.admin-opcoes li { padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.admin-opcoes li.is-certa { background: color-mix(in srgb, var(--teal) 18%, transparent); font-weight: 700; }
.admin-exp { color: var(--muted); font-size: 13px !important; }
.admin-sumiu { color: var(--muted); font-style: italic; margin: 0; }
.admin-textos { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.admin-textos li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.admin-textos span { font-size: 12px; color: var(--muted); }
.admin-textos p { margin: 4px 0 0; font-size: 14px; }
.admin-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-vazio { color: var(--muted); }

/* =================================================================
   Nome dourado de assinante + etiqueta PREMIUM (só visual)
   ================================================================= */
.nome-premium { background: linear-gradient(100deg, #B8760B 0%, #E9A91C 28%, #FFE58A 45%, #E9A91C 62%, #B8760B 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: nomePremium 3.2s linear infinite; }
:root[data-theme="dark"] .nome-premium { background-image: linear-gradient(100deg, #E9A91C 0%, #FFD45C 28%, #FFF6C8 45%, #FFD45C 62%, #E9A91C 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nome-premium { background-image: linear-gradient(100deg, #E9A91C 0%, #FFD45C 28%, #FFF6C8 45%, #FFD45C 62%, #E9A91C 100%); } }
@keyframes nomePremium { to { background-position: -220% 0; } }
.tag-premium { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px; border-radius: 99px; vertical-align: .12em;
  background: linear-gradient(135deg, #FFE98A, #E09A16); color: #4A2A00; -webkit-text-fill-color: #4A2A00; font: 800 9.5px/1.3 var(--font-sans); letter-spacing: .07em;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px -2px rgba(224,154,22,.7); white-space: nowrap; }
#ppNome .tag-premium { font-size: 11px; padding: 3px 10px; vertical-align: .3em; }
html.reduce-motion .nome-premium, .reduce-motion .nome-premium { animation: none; }
.profile-header-info h2 .tag-premium { font-size: 11px; padding: 3px 10px; vertical-align: .3em; }
.ranking-person strong:has(.tag-premium), .sv-nome > span:has(.tag-premium) { display: flex; align-items: center; gap: 0; min-width: 0; }
.ranking-person .nome-premium, .sv-nome .nome-premium { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-person .tag-premium, .sv-nome .tag-premium { flex: none; }
.ranking-person strong:has(.tag-premium) em { flex: none; margin-left: 4px; }
.ranking-person .tag-premium, .sv-nome .tag-premium { margin-left: 5px; padding: 1px 5px; font-size: 7.5px; letter-spacing: .05em; }
.ranking-person .nome-premium, .sv-nome .nome-premium { flex: 0 1 auto; }
/* Sem espaço na linha, a etiqueta desce para baixo do nome (em vez de cortar o nome). */
.ranking-person strong:has(.tag-premium), .sv-nome > span:has(.tag-premium) { flex-wrap: wrap; row-gap: 3px; }
.ranking-person .nome-premium, .sv-nome .nome-premium { flex: 0 0 auto; max-width: 100%; margin-right: 5px; }
.ranking-person .tag-premium, .sv-nome .tag-premium { margin-left: 0; }
.nome-premium { filter: drop-shadow(0 1px 0 rgba(90,50,0,.28)); }

/* =================================================================
   Ícones de jogo (game-icons.net): chefões e duelo
   ================================================================= */
.icon-cheio { stroke: none; }
.chefao-arte .chefao-boss { width: 74%; height: 74%; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--chefe) 70%, transparent)) drop-shadow(0 3px 4px rgba(0,0,0,.45)); animation: chefaoAmeaca 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes chefaoAmeaca { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-2px) scale(1.04); } 50% { transform: translateY(-2px) scale(1.04) rotate(-3deg); } 55% { transform: translateY(-2px) scale(1.04) rotate(3deg); } 60% { transform: translateY(-1px) scale(1.02); } }
.chefao-arte.caiu .chefao-boss { animation: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.chefao-arte.caiu { filter: none; }
.reduce-motion .chefao-arte .chefao-boss { animation: none; }
.duelo-cta-arte .duelo-espadas { width: 96px; height: 96px; position: relative; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); animation: dueloChoque 2.4s ease-in-out infinite; }
.duelo-faisca { position: absolute; left: 50%; top: 42%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, #FFE14D 30%, rgba(255,170,30,.6) 48%, transparent 70%); animation: dueloFaisca 2.4s ease-in-out infinite; }
html.reduce-motion .duelo-faisca { animation: none; opacity: 0; }
.duelo-cta-arte { right: 4px; top: 4px; width: 110px; height: 110px; }
.duelo-cta-arte .duelo-espadas { width: 82px; height: 82px; }

/* =================================================================
   Conta e segurança (janela "Sua conta")
   ================================================================= */
.auth-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
.seg { display: grid; gap: 14px; margin-top: 14px; text-align: left; }
.seg-bloco { display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.seg-bloco h3 { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font: 800 15px var(--font-sans); }
.seg-bloco h3 .icon-slot, .seg-bloco h3 .icon-slot .icon { width: 17px; height: 17px; }
.seg-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.seg-linha:last-of-type { border-bottom: 0; }
.seg-linha span { color: var(--muted); flex: none; }
.seg-linha strong { text-align: right; overflow-wrap: anywhere; font-weight: 700; }
.seg-ok, .seg-pend { font: 700 10.5px var(--font-sans); font-style: normal; padding: 1px 7px; border-radius: 99px; margin-left: 4px; white-space: nowrap; }
.seg-ok { background: color-mix(in srgb, var(--teal) 18%, transparent); color: var(--teal); }
.seg-pend { background: color-mix(in srgb, var(--coral) 16%, transparent); color: var(--coral); }
.seg-form { display: grid; gap: 8px; }
.seg-nota { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.seg-btn { width: 100%; justify-content: center; }
.seg-acoes { display: grid; gap: 8px; }
.seg-perigo { border-color: color-mix(in srgb, var(--coral) 40%, transparent); background: color-mix(in srgb, var(--coral) 6%, var(--surface-2)); }
.seg-perigo h3 { color: var(--coral); }
.seg-btn-perigo { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 45%, transparent); }
.seg-btn-excluir { background: var(--coral); color: #fff; border: 0; }
.seg-btn-excluir:disabled { opacity: .6; }

/* =================================================================
   Início: atalho "Seu desempenho" (as estatísticas ficam no perfil)
   ================================================================= */


/* =================================================================
   Perfil: Suas estatísticas
   ================================================================= */
.est-card { position: relative; display: grid; gap: 12px; }
.est-periodos { max-width: 440px; grid-template-columns: repeat(4, 1fr); }
.est-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.est-tile { display: grid; gap: 2px; padding: 12px 10px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.est-tile strong { font: 900 24px/1.1 var(--font-serif); color: var(--ink); }
.est-tile span { font-size: 12px; color: var(--muted); }
.est-delta { font: 700 10.5px var(--font-sans); color: var(--muted); }
.est-delta.sobe { color: var(--teal); } .est-delta.desce { color: var(--coral); }
.est-titulo { margin: 8px 0 0; font: 800 14px var(--font-sans); color: var(--ink); }
.est-titulo small { font-weight: 500; color: var(--muted); font-size: 12px; margin-left: 4px; }
.est-svg { display: block; overflow: visible; max-width: 100%; }
.est-grade { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.est-base { stroke: var(--muted); stroke-opacity: .45; stroke-width: 1; }
.est-eixo { fill: var(--muted); font: 600 11px var(--font-sans); }
.est-valor { fill: var(--ink); font: 800 12px var(--font-sans); }
.est-barra { fill: var(--blue); transition: opacity .15s; }
.est-alvo { cursor: pointer; }
.est-svg:has(.est-alvo.is-ativo) .est-alvo:not(.is-ativo) .est-barra { opacity: .35; }
.est-linha { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.est-area { fill: var(--blue); opacity: .1; }
.est-ponto { fill: var(--blue); stroke: var(--surface); stroke-width: 2; }
.est-alvo.is-ativo .est-ponto { r: 6.5; }
.est-vazio { margin: 0; font-size: 13px; color: var(--muted); }
.est-materias { display: grid; gap: 10px; }
.est-materia { display: grid; grid-template-columns: minmax(96px, 34%) 1fr 42px; align-items: center; gap: 10px; cursor: pointer; }
.est-materia-nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-materia-trilho { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.est-materia-trilho span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--blue); }
.est-materia strong { text-align: right; font-size: 13px; color: var(--ink); }
.est-tip { position: absolute; z-index: 5; padding: 7px 10px; border-radius: 10px; background: var(--ink); color: var(--surface); font: 600 12px/1.3 var(--font-sans); pointer-events: none; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.est-tiles { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .est-tiles { grid-template-columns: 1fr 1fr; } }
.est-barra-antiga { opacity: .55; }
.est-empate { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 4; }
.est-empate-txt { fill: var(--muted); font-size: 9.5px; }
.est-eixo-forte { fill: var(--ink); font-weight: 800; }
.est-legenda { margin: -4px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.est-legenda-traco { flex: none; width: 22px; border-top: 2px dashed var(--gold); }

/* Ranking: regra nova */
.ranking-rate { font-weight: 700; color: var(--blue); }
.ranking-row.tier .ranking-rate { color: inherit; }
.ranking-aviso-regra { margin: 12px 0 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); font-size: 13px; line-height: 1.45; }
.ranking-aviso-regra .icon-slot, .ranking-aviso-regra .icon-slot .icon { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 1px; }
.regras-lista { margin: 4px 0 14px; padding-left: 18px; display: grid; gap: 9px; font-size: 14px; line-height: 1.5; }
.regras-lista b { color: var(--blue); }

/* =================================================================
   Convites: prêmio maior, só quando o amigo começa a estudar
   ================================================================= */
.convite-premios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.convite-premio { display: grid; gap: 2px; padding: 12px; border-radius: 14px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 22%, var(--surface)), var(--surface-2)); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.convite-premio strong { font: 900 22px var(--font-serif); color: var(--ink); }
.convite-premio span { font-size: 12px; color: var(--muted); }
.convite-passos { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.convite-status { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }
.convite-status b { color: var(--ink); font-size: 15px; }
.convite-livre { display: flex; align-items: center; gap: 6px; color: var(--blue) !important; font-weight: 700; }
.toast-convite { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9999; width: min(92vw, 420px); display: flex; gap: 10px; align-items: center;
  padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #2A1B52, #4B2E9A); color: #fff; font: 600 14px/1.4 var(--font-sans); box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); animation: toastConvite .35s ease-out; }
.toast-convite .icon-slot, .toast-convite .icon-slot .icon { width: 24px; height: 24px; color: #FFD45C; flex: none; }
@keyframes toastConvite { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =================================================================
   Trilha v2: cor da matéria, fases 3D com anel de estrelas, trilho
   pontilhado e cenário temático (game-icons.net)
   ================================================================= */
.trilha-page { --tc: #6B4EE6; --tc-esc: color-mix(in srgb, var(--tc) 62%, #120B2E); --tc-claro: color-mix(in srgb, var(--tc) 55%, #fff); }
.trilha-materia.active { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, var(--surface)); }
.trilha-materia.active > .icon-slot { background: var(--tc); }
.trilha-resumo-barra span { background: linear-gradient(90deg, var(--tc), #F0B942); }
.trilha-page .btn.trilha-continuar { background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 80%, #fff), var(--tc)); box-shadow: 0 8px 18px -10px var(--tc); }
/* Secundário (o treino de hoje está pendente): contorno na cor da matéria. */
.trilha-page .btn.trilha-continuar.btn-outline { background: transparent; box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--tc) 70%, transparent); color: color-mix(in srgb, var(--tc) 55%, var(--ink)); }
.trilha-page .btn.trilha-continuar.btn-outline:hover { background: color-mix(in srgb, var(--tc) 12%, transparent); }
.trilha-unidade-head { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--tc-esc), var(--tc)); box-shadow: 0 10px 22px -14px var(--tc); }
.trilha-unidade-head::after { content: ""; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }

/* Fundo do caminho: brilhos suaves na cor da matéria + pontinhos */
.trilha-caminho { position: relative; gap: 6px; padding: 18px 0 26px; border-radius: 28px; isolation: isolate;
  background:
    radial-gradient(60% 30% at 15% 12%, color-mix(in srgb, var(--tc) 12%, transparent), transparent 70%),
    radial-gradient(55% 28% at 85% 55%, color-mix(in srgb, var(--tc) 10%, transparent), transparent 70%),
    radial-gradient(50% 25% at 20% 92%, color-mix(in srgb, #F0B942 10%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--tc) 22%, transparent) 1.1px, transparent 1.7px) 0 0 / 22px 22px; }

/* Trilho pontilhado entre as fases */
.trilha-trilho { position: relative; width: 0; height: 34px; align-self: center; }
.trilha-trilho i { position: absolute; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--border); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.trilha-trilho i:nth-child(1) { top: 2px; transform: translateX(calc(var(--de) + (var(--para) - var(--de)) * .22)); }
.trilha-trilho i:nth-child(2) { top: 12px; transform: translateX(calc(var(--de) + (var(--para) - var(--de)) * .5)); }
.trilha-trilho i:nth-child(3) { top: 22px; transform: translateX(calc(var(--de) + (var(--para) - var(--de)) * .78)); }
.trilha-trilho.on i { background: var(--tc-claro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 14%, transparent); }

/* Botão da fase */
.trilha-no-wrap { z-index: 1; gap: 8px; }
.trilha-no { --c: var(--tc); position: relative; width: 74px; height: 74px; border-radius: 50%; overflow: visible;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 52%, color-mix(in srgb, var(--c) 72%, #000) 100%);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 55%, #000), 0 16px 22px -10px var(--c), inset 0 2px 0 rgba(255,255,255,.35); }
.trilha-no::before { content: ""; position: absolute; left: 18%; right: 18%; top: 9%; height: 32%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; }
.trilha-no:active { transform: translateY(5px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 55%, #000), inset 0 2px 0 rgba(255,255,255,.35); }
.tn-face { position: relative; display: grid; place-items: center; }
.tn-icone { width: 38px; height: 38px; color: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.22)); }
.tn-anel { position: absolute; inset: -11px; width: calc(100% + 22px); height: calc(100% + 22px); overflow: visible; pointer-events: none; }
.tn-anel path { fill: none; stroke: color-mix(in srgb, var(--c) 22%, var(--surface-2)); stroke-width: 6; stroke-linecap: round; }
.tn-anel path.on { stroke: #F5B83D; filter: drop-shadow(0 0 3px rgba(245,184,61,.6)); }
.trilha-no.feito { --c: #E9A21C; }
.trilha-no.feito .tn-icone { color: #FFF8E1; }
.trilha-no.bloqueado { --c: #CFC9E2; box-shadow: 0 7px 0 #ABA3C6, inset 0 2px 0 rgba(255,255,255,.4); }
.trilha-no.bloqueado::before { opacity: .5; }
.trilha-no.bloqueado .icon-slot .icon { width: 28px; height: 28px; color: #8C84A8; stroke-width: 2; }
.trilha-no.bloqueado .tn-anel path { stroke: color-mix(in srgb, #CFC9E2 45%, var(--surface-2)); }
:root[data-theme="dark"] .trilha-no.bloqueado { --c: #3A3458; box-shadow: 0 7px 0 #262040; }
:root[data-theme="dark"] .trilha-no.bloqueado .icon-slot .icon { color: #8C84A8; }
.trilha-no.atual { animation: none; }
.trilha-no.atual::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--c); opacity: 0; animation: tnOnda 1.9s ease-out infinite; pointer-events: none; }
@keyframes tnOnda { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }
.trilha-no.atual .tn-face { animation: tnPulo 1.9s ease-in-out infinite; }
@keyframes tnPulo { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-4px) rotate(-6deg); } 90% { transform: translateY(0) rotate(4deg); } }
.trilha-no.chefe { width: 92px; height: 92px; border-radius: 50%; }
.trilha-no.chefe:not(.feito):not(.bloqueado) { --c: color-mix(in srgb, var(--tc) 55%, #2A1250); }
.trilha-no.chefe .tn-icone { width: 52px; height: 52px; color: #FFE58A; }
.tn-coroa { position: absolute; top: -26px; left: 50%; width: 38px; height: 38px; transform: translateX(-50%) rotate(-8deg); color: #F5B83D; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.tn-coroa svg { width: 100%; height: 100%; }
.trilha-no.chefe.bloqueado .tn-coroa { color: #B9B2D2; }
.trilha-no-nome { font: 800 12px var(--font-sans); color: var(--muted); letter-spacing: .02em; }
.trilha-balao { border-color: var(--tc); color: var(--tc); font-weight: 800; animation: tnBalao 1.9s ease-in-out infinite; }
.trilha-balao::after { border-top-color: var(--tc); }
@keyframes tnBalao { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.trilha-no-wrap.tem-balao { margin-top: 34px; }

/* Cenário: silhuetas temáticas flutuando nos lados livres */
.trilha-cena { align-self: stretch; position: relative; height: 0; pointer-events: none; z-index: 0; }
.tc-item { position: absolute; top: 10px; width: clamp(44px, 13vw, 64px); aspect-ratio: 1; color: color-mix(in srgb, var(--tc) 45%, transparent);
  transform: rotate(var(--giro)); animation: tcFlutua 5s ease-in-out infinite var(--atraso); }
.tc-item svg { width: 100%; height: 100%; }
.tc-item.lado-esq { left: max(8px, calc(50% - 170px)); }
.tc-item.lado-dir { right: max(8px, calc(50% - 170px)); }
.tc-item.longe { width: clamp(34px, 10vw, 46px); opacity: .7; top: 22px; }
.tc-item.longe.lado-esq { left: max(6px, calc(50% - 200px)); }
.tc-item.longe.lado-dir { right: max(6px, calc(50% - 200px)); }
@keyframes tcFlutua { 0%, 100% { transform: translateY(0) rotate(var(--giro)); } 50% { transform: translateY(-8px) rotate(calc(var(--giro) * -0.5)); } }
.reduce-motion .tc-item, .reduce-motion .trilha-no.atual::after, .reduce-motion .trilha-no.atual .tn-face, .reduce-motion .trilha-balao { animation: none; }
.tn-coroa { top: -38px; z-index: 2; }
.trilha-no.chefe.bloqueado .tn-icone { color: #8C84A8; filter: none; opacity: .85; }
.trilha-no-wrap:has(.trilha-no.chefe) { margin-top: 16px; }

/* =================================================================
   Início — nova organização (out/2026, js/inicio.js)
   Ordem: treino de hoje → primeiros passos → missões e baús →
   outras formas de estudar → destaques → sua evolução.
   ================================================================= */
.ini-pagina { display: flex; flex-direction: column; gap: 18px; }
.ini-pagina > * { margin-top: 0; margin-bottom: 0; }
.ini-pagina > header.ini-ola { margin-bottom: -4px; }
.ini-ola .page-title { margin: 0; font-size: 28px; }
.ini-ola .page-subtitle { margin: 4px 0 18px; }
.ini-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ini-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; background: none; border: 0; color: var(--blue); font-weight: 700; font-size: 13px; white-space: nowrap; }
.ini-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ini-link-suave { color: var(--muted); font-weight: 600; }
.ini-link .icon-slot .icon { width: 15px; height: 15px; }

/* ---------- 1. Treino de hoje ---------- */
.ini-treino {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: center;
  padding: 28px; border-radius: 24px; color: #fff;
  background: linear-gradient(135deg, #6446EC 0%, #3E25B6 52%, #241570 100%);
  box-shadow: 0 18px 40px rgba(52, 30, 160, .28);
}
.ini-treino::before {
  content: ""; position: absolute; z-index: -1; right: -110px; top: 50%; width: 460px; height: 460px; margin-top: -230px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 2px, transparent 2px 34px);
}
.ini-treino-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #FFE08A; font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.ini-treino-tag .icon-slot .icon { width: 14px; height: 14px; }
.ini-treino h2 { margin: 12px 0 8px; font-family: var(--font-serif); font-size: 30px; line-height: 1.15; text-wrap: balance; }
.ini-treino p { margin: 0 0 20px; max-width: 48ch; color: rgba(255, 255, 255, .84); font-size: 14.5px; }
.ini-treino-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ini-treino p.ini-treino-fila { display: flex; align-items: center; gap: 8px; margin: -10px 0 18px; padding: 8px 12px; width: fit-content; max-width: 100%; border-radius: 10px; background: rgba(255, 255, 255, .12); font-size: 13px; }
.ini-treino-fila .icon { width: 15px; height: 15px; }
.btn.btn-treino {
  padding: 14px 24px; border-radius: 14px; background: #fff; color: #3A22AE; font-size: 15px; font-weight: 700;
  box-shadow: 0 5px 0 rgba(18, 8, 70, .35);
}
.btn.btn-treino:hover { filter: none; transform: translateY(-1px); box-shadow: 0 6px 0 rgba(18, 8, 70, .35); }
.btn.btn-treino:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(18, 8, 70, .35); }
.btn.btn-treino .icon-slot .icon { width: 17px; height: 17px; }
.ini-link-claro { padding: 6px 0; background: none; border: 0; color: rgba(255, 255, 255, .9); font-weight: 600; font-size: 13.5px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px; }
.ini-link-claro:hover { color: #fff; text-decoration-color: #fff; }
.ini-link-claro:focus-visible, .ini-link:focus-visible, .ini-modo:focus-visible, .ini-passo:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.ini-treino .ini-link-claro:focus-visible, .btn-treino:focus-visible { outline-color: #fff; }

.ini-status { display: grid; gap: 10px; }
.ini-status-item {
  display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
}
.ini-status-item > div { min-width: 0; }
.ini-status-item strong { display: block; font-family: var(--font-serif); font-size: 19px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ini-status-item small { display: block; color: rgba(255, 255, 255, .75); font-size: 12px; line-height: 1.35; }
.ini-link-mini { display: block; padding: 4px 0 0; font-size: 12px; text-align: left; }
.ini-anel { width: 62px; height: 62px; flex-shrink: 0; }
.ini-anel circle { fill: none; stroke-width: 7; }
.ini-anel .fundo { stroke: rgba(255, 255, 255, .18); }
.ini-anel .valor { stroke: #FFD45C; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 32px 32px; transition: stroke-dashoffset .6s ease; }
.ini-anel.is-cheio .valor { stroke: #4BE3B5; }
.ini-anel text { fill: #fff; font: 700 14px var(--font-sans); }
.ini-status .streak-flame-wrap { width: 62px; height: 62px; margin: 0; flex-shrink: 0; }
.ini-status .streak-flame-svg { width: 48px; height: 56px; }
.ini-status .streak-flame-wrap.is-apagada { filter: saturate(.45); opacity: .55; }
.ini-status .protetor-selo { margin-top: 6px; padding: 3px 9px; font-size: 11px; background: rgba(75, 227, 181, .18); color: #7FF0CC; }

/* ---------- 2. Primeiros passos ---------- */
.ini-passos { padding: 20px 22px; }
.ini-passos .ini-sec-head { margin-bottom: 10px; }
.ini-passos-barra { height: 6px; margin-bottom: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ini-passos-barra span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width .4s ease; }
.ini-passos-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ini-passos-lista li { display: flex; min-width: 0; }
.ini-passo {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px; text-align: left; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.ini-passo:hover { border-color: var(--blue); transform: translateY(-1px); }
.ini-passo strong { display: block; font-size: 13.5px; line-height: 1.3; }
.ini-passo small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ini-passo-n {
  width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-2); color: var(--muted); font: 700 12.5px var(--font-mono);
}
.ini-passo-n .icon-slot .icon { width: 15px; height: 15px; }
.ini-passo.is-proximo { border-color: var(--blue); background: var(--blue-soft); }
.ini-passo.is-proximo .ini-passo-n { background: var(--blue); color: #fff; }
.ini-passo.is-feito .ini-passo-n { background: var(--teal); color: #fff; }
.ini-passo.is-feito strong { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- 3. Missões de hoje e baús ---------- */
.ini-recompensas { padding: 20px 22px; }
.ini-rec-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ini-recompensas .missoes-lista { margin: 0; gap: 8px; }
.ini-recompensas .missao { padding: 10px 12px; border-radius: 12px; }
.ini-recompensas .missao-info strong { font-size: 13.5px; }
.ini-recompensas .missao-barra { margin: 6px 0 2px; }
.ini-baus { display: grid; gap: 8px; }

/* Baús (valem também para a página Missões) */
.bau-card { border-style: solid; background: var(--surface); transition: transform .15s ease, border-color .15s ease; }
.bau-card:disabled .bau-svg { filter: saturate(.75); opacity: .95; }
.bau-card.is-aberto .bau-svg { filter: saturate(.55); opacity: .75; }
.bau-card.is-aberto .bau-svg .bau-luz { opacity: 0; animation: none; }
.bau-card.is-pronto { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.bau-card.is-pronto.is-epico { box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }
.bau-card.is-pronto:hover { transform: translateY(-2px); }
.bau-card .bau-txt { min-width: 0; }
.bau-svg .bau-tampa { transform-origin: 8px 28px; }
.bau-svg.is-aberto .bau-tampa { transform: translateY(-11px) rotate(-14deg); }
.bau-marcas { display: flex; gap: 4px; margin-top: 7px; }
.bau-marcas i { flex: 0 0 auto; width: 16px; height: 5px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.bau-card.is-epico .bau-marcas i { width: 9px; }
.bau-marcas i.on { background: var(--gold); box-shadow: none; }
.bau-card.is-epico .bau-marcas i.on { background: #8B5CF6; }

/* ---------- 4. Outras formas de estudar ---------- */
.ini-modos-sec > .section-title, .ini-destaques > .section-title { margin: 0 0 12px; }
.ini-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ini-modo {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; text-align: left;
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit;
  box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease;
}
.ini-modo:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--m1) 60%, transparent); }
.ini-modo-ic {
  width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 15px;
  background: linear-gradient(145deg, var(--m1), var(--m2)); color: var(--m2);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 6px 14px -4px color-mix(in srgb, var(--m2) 60%, transparent);
}
.ini-modo-ic svg { width: 28px; height: 28px; overflow: visible; }
.ini-modo-txt { min-width: 0; }
.ini-modo-txt strong { display: block; font-size: 14.5px; }
.ini-modo-txt small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.ini-modo-selo {
  position: absolute; top: 8px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center;
  border-radius: 999px; background: var(--coral); color: #fff; font: 700 11px var(--font-mono); font-style: normal;
}
.ini-modo-selo.is-ok { background: var(--teal); padding: 0; width: 20px; }
.ini-modo-selo .icon-slot .icon { width: 13px; height: 13px; }

/* ---------- 5. Destaques ---------- */
.ini-destaques .home-banner { margin: 0; }

/* ---------- 6. Sua evolução ---------- */
.ini-evolucao { padding: 20px 22px; margin-bottom: 24px !important; }
.ini-evo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ini-evo-num { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.ini-evo-num strong { display: block; font-family: var(--font-serif); font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ini-evo-num small { color: var(--muted); font-size: 12px; }
.ini-evo-fraco {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-top: 12px; padding: 12px 14px;
  border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--coral) 55%, var(--border)); background: var(--coral-soft);
}
.ini-evo-fraco-txt { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; min-width: 0; }
.ini-evo-fraco-txt .icon-slot { flex-shrink: 0; margin-top: 2px; color: var(--coral); }
.ini-evo-dica { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }

/* ---------- Telas menores ---------- */
@media (max-width: 980px) {
  .ini-treino { grid-template-columns: 1fr; }
  .ini-treino::before { right: -200px; top: auto; bottom: -260px; margin-top: 0; }
  .ini-status { grid-template-columns: 1fr 1fr; }
  .ini-passos-lista { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ini-pagina { gap: 16px; }
  .ini-ola .page-title { font-size: 24px; }
  .ini-treino { padding: 20px; gap: 16px; border-radius: 22px; }
  .ini-treino h2 { font-size: 24px; margin-top: 10px; }
  .ini-treino p { margin-bottom: 16px; font-size: 14px; }
  .ini-treino-acoes { gap: 6px; }
  .btn.btn-treino { flex: 1 1 100%; justify-content: center; }
  .ini-treino-acoes .ini-link-claro { margin: 0 auto; }
  .ini-status { gap: 8px; }
  .ini-status-item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .ini-status .streak-flame-wrap, .ini-anel { width: 46px; height: 46px; }
  .ini-status .streak-flame-svg { width: 36px; height: 42px; }
  .ini-status-item strong { font-size: 17px; }
  .ini-rec-grid { grid-template-columns: 1fr; }
  .ini-baus { grid-template-columns: 1fr 1fr; }
  .ini-baus .bau-card { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ini-modos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ini-modo { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px; }
  .ini-modo-ic { width: 44px; height: 44px; border-radius: 14px; }
  .ini-modo-ic svg { width: 26px; height: 26px; }
  .ini-recompensas, .ini-passos, .ini-evolucao { padding: 16px; }
  .ini-evo-num { padding: 10px 12px; }
  .ini-evo-num strong { font-size: 19px; }
  .ini-evo-fraco .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .ini-passos-lista { grid-template-columns: 1fr; gap: 8px; }
}

/* =================================================================
   Títulos da Trilha (cartão na página da Trilha, js/titulos.js)
   ================================================================= */
.trilha-titulos { padding: 18px 20px; margin: 0 0 18px; }
.tt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tt-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--rar-cor) 55%, transparent);
}
.tt-card.is-ganho { box-shadow: inset 3px 0 0 var(--rar-cor); background: color-mix(in srgb, var(--rar-cor) 6%, var(--surface)); }
.tt-card.tier-comum { --rar-cor: var(--rar-comum); }
.tt-card.tier-incomum { --rar-cor: var(--rar-incomum); }
.tt-card.tier-raro { --rar-cor: var(--rar-raro); }
.tt-card.tier-epico { --rar-cor: var(--rar-epico); }
.tt-card.tier-lendario { --rar-cor: var(--rar-lendario); }
.tt-card.tier-mitico { --rar-cor: var(--rar-mitico); }
.tt-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: 15px; font-family: var(--font-serif); }
.tt-topo .title-fx-wrap { min-width: 0; }
.tt-topo .rar-chip { flex-shrink: 0; align-self: center; }
.tt-bloq { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-bloq .icon-slot .icon { width: 13px; height: 13px; }
.tt-card small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.tt-prog { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.tt-prog span { display: block; height: 100%; border-radius: inherit; background: var(--rar-cor); }
.tt-num { font: 500 11px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--rar-cor); }
.tt-ok .icon-slot .icon { width: 13px; height: 13px; }
@media (max-width: 900px) { .tt-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tt-grid { grid-template-columns: 1fr; } .trilha-titulos { padding: 16px; } }

/* =================================================================
   Ranking — mesmo estilo do Início (out/2026)
   ================================================================= */
.rk-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: center;
  padding: 26px; border-radius: 24px; color: #fff;
  background: linear-gradient(135deg, #6446EC 0%, #3E25B6 52%, #241570 100%);
  box-shadow: 0 18px 40px rgba(52, 30, 160, .28);
}
.rk-hero::before {
  content: ""; position: absolute; z-index: -1; left: -140px; bottom: -220px; width: 420px; height: 420px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 2px, transparent 2px 34px);
}
.rk-hero h2 { margin: 12px 0 8px; font-family: var(--font-serif); font-size: 26px; line-height: 1.18; text-wrap: balance; }
.rk-hero p { margin: 0 0 16px; max-width: 50ch; color: rgba(255, 255, 255, .84); font-size: 14px; }
.rk-pesos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.rk-pesos span { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); font-size: 12.5px; }
.rk-pesos b { font: 800 18px var(--font-serif); color: #FFE08A; font-variant-numeric: tabular-nums; }
.rk-pesos small { color: rgba(255, 255, 255, .7); font-size: 12px; }
.rk-hero-patente .patente-card { margin: 0; }

/* Abas com ícone colorido */
.rk-abas { display: flex; gap: 8px; overflow-x: auto; padding: 2px; margin: 0 -2px; scrollbar-width: none; }
.rk-abas::-webkit-scrollbar { display: none; }
.rk-aba {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 600 13.5px var(--font-sans);
  transition: border-color .15s ease, transform .15s ease;
}
.rk-aba:hover { border-color: color-mix(in srgb, var(--m1) 60%, transparent); }
.rk-aba:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rk-aba-ic {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #fff;
  background: linear-gradient(145deg, var(--m1), var(--m2)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14);
}
.rk-aba-ic .icon-slot .icon { width: 17px; height: 17px; }
.rk-aba.is-ativa { border-color: var(--m2); background: color-mix(in srgb, var(--m1) 12%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--m1) 25%, transparent); }
.rk-aba.is-ativa .rk-aba-nome { color: color-mix(in srgb, var(--m2) 75%, var(--ink)); font-weight: 700; }
.rk-pagina .ranking-layout { margin: 0; }
.rk-pagina .ranking-board, .rk-pagina .ranking-side-card { border-radius: 20px; }

/* Medalhas do pódio */
.rk-medalha { width: 26px; height: 31px; display: block; margin: 0 auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }

/* Prêmios do mês */
.rk-premios-lista { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; gap: 10px; }
.rk-premios-lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.rk-premio-pos { display: grid; place-items: center; }
.rk-premio-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-family: var(--font-serif); font-size: 15px; }
.rk-premio-txt > small { font: 500 11px var(--font-mono); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.rk-premio-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-sans); }
.rk-premio-moedas { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--font-mono); color: var(--gold); }
.rk-premio-moedas .icon-slot .icon { width: 14px; height: 14px; }

@media (max-width: 980px) {
  .rk-hero { grid-template-columns: 1fr; }
  .rk-hero-patente { max-width: 360px; width: 100%; justify-self: center; }
}
@media (max-width: 760px) {
  .rk-hero { padding: 20px; border-radius: 22px; }
  .rk-hero h2 { font-size: 22px; }
  .rk-hero .btn-treino { flex: 1 1 100%; justify-content: center; }
  .rk-hero .ini-treino-acoes .ini-link-claro { margin: 0 auto; }
  .rk-aba { padding: 6px 12px 6px 6px; font-size: 13px; }
}
.rk-premio-premium { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 700 11.5px var(--font-sans); color: #fff; background: linear-gradient(140deg, #7C5CFF, #D6467A); }
.rk-premio-premium .icon-slot .icon { width: 12px; height: 12px; }

/* Prêmios do mês em pódio (Ranking) */
.rk-podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; margin: 16px 0 10px; }
.rk-degrau { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.rk-degrau-topo { position: relative; display: grid; place-items: center; }
.rk-degrau-topo .rk-medalha { width: 34px; height: 40px; }
.rk-d1 .rk-degrau-topo .rk-medalha { width: 42px; height: 50px; animation: rk-flutua 2.6s ease-in-out infinite; }
@keyframes rk-flutua { 50% { transform: translateY(-4px); } }
.rk-coroa { position: absolute; top: -20px; color: #F5C33B; filter: drop-shadow(0 2px 4px rgba(245, 195, 59, .5)); }
.rk-coroa .icon-slot .icon { width: 20px; height: 20px; }
.rk-degrau-bloco {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 14px; text-align: center;
  border-radius: 14px 14px 6px 6px; border: 1px solid var(--border); border-top: 3px solid var(--deg-cor);
  background: linear-gradient(180deg, color-mix(in srgb, var(--deg-cor) 22%, var(--surface)), var(--surface-2));
}
.rk-d1 { --deg-cor: #F5C33B; } .rk-d2 { --deg-cor: #AAB4C2; } .rk-d3 { --deg-cor: #D98A4A; }
.rk-d1 .rk-degrau-bloco { min-height: 168px; box-shadow: 0 10px 24px -12px rgba(245, 195, 59, .7); }
.rk-d2 .rk-degrau-bloco { min-height: 144px; }
.rk-d3 .rk-degrau-bloco { min-height: 128px; }
.rk-degrau-nome { font-family: var(--font-serif); font-size: 15px; line-height: 1.2; max-width: 100%; }
.rk-degrau-bloco .rar-chip { align-self: center; font-size: 9px; padding: 1px 6px 2px; }
.rk-ganho { display: inline-flex; align-items: center; gap: 3px; font: 700 12px var(--font-mono); white-space: nowrap; }
.rk-ganho .icon-slot .icon { width: 13px; height: 13px; }
.rk-ganho-moedas { color: var(--gold); }
.rk-ganho-premium { padding: 2px 8px; border-radius: 999px; color: #fff; background: linear-gradient(140deg, #7C5CFF, #D6467A); font-family: var(--font-sans); }
.rk-top10-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border-radius: 14px; background: var(--surface-2); }
.rk-top10-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; font-family: var(--font-serif); font-size: 14px; }
.rk-top10-txt strong { font: 500 11px var(--font-mono); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
html.reduce-motion .rk-d1 .rk-degrau-topo .rk-medalha { animation: none; }

/* =================================================================
   Recompensas de assinante (js/premium.js)
   ================================================================= */
/* Molduras de assinante: anel girando (ouro, aurora, brasa) */
.mold-p-ouro .fr, .mold-p-aurora .fr, .mold-p-brasa .fr {
  inset: -9%; border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: pm-girar 5s linear infinite;
}
.mold-p-ouro .fr { background: conic-gradient(#B8760B, #FFE58A, #E9A91C, #FFF6C8, #B8760B); filter: drop-shadow(0 0 4px rgba(233, 169, 28, .6)); }
.mold-p-aurora .fr { background: conic-gradient(#3FD1B4, #7C5CFF, #FF7BA8, #3FD1B4); filter: drop-shadow(0 0 6px rgba(124, 92, 255, .7)); animation-duration: 4s; }
.mold-p-brasa .fr { background: conic-gradient(#FF4D2E, #FFB02E, #FF4D2E, #B81D13, #FF4D2E); filter: drop-shadow(0 0 7px rgba(255, 120, 40, .75)); animation-duration: 3.4s; }
@keyframes pm-girar { to { transform: rotate(360deg); } }
.mold-p-ouro .fr-top .pf { position: absolute; width: 14%; height: 14%; background: #FFF1B8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: pm-faisca 2.4s ease-in-out infinite; }
.mold-p-ouro .fr-top .pf.a { top: 2%; right: 6%; }
.mold-p-ouro .fr-top .pf.b { bottom: 6%; left: 2%; width: 10%; height: 10%; animation-delay: 1.2s; }
@keyframes pm-faisca { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } }
.mold-p-brasa .fr-top .pb { position: absolute; bottom: 4%; width: 8%; height: 8%; border-radius: 50%; background: radial-gradient(circle, #FFF1C9 0 30%, #FF8A1A 70%); box-shadow: 0 0 6px #FF8A1A; opacity: 0; animation: pm-brasa 2s ease-out infinite; }
.mold-p-brasa .fr-top .pb.a { left: 18%; } .mold-p-brasa .fr-top .pb.b { left: 50%; animation-delay: .7s; } .mold-p-brasa .fr-top .pb.c { left: 78%; animation-delay: 1.3s; }
@keyframes pm-brasa { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-120%) scale(.3); opacity: 0; } }
.ranking-avatar-wrap .av-mold.mold-p-ouro > .fr, .ranking-avatar-wrap .av-mold.mold-p-aurora > .fr, .ranking-avatar-wrap .av-mold.mold-p-brasa > .fr { inset: -12%; }

/* Fundos de perfil de assinante */

/* Cor do nome de assinante: safira e rosé (ouro é o padrão) */
.nome-premium.nome-safira { background-image: linear-gradient(100deg, #1E40AF 0%, #3B82F6 28%, #93C5FD 45%, #3B82F6 62%, #1E40AF 100%); }
.nome-premium.nome-rose { background-image: linear-gradient(100deg, #9D174D 0%, #EC4899 28%, #FBCFE8 45%, #EC4899 62%, #9D174D 100%); }
:root[data-theme="dark"] .nome-premium.nome-safira { background-image: linear-gradient(100deg, #60A5FA 0%, #93C5FD 28%, #DBEAFE 45%, #93C5FD 62%, #60A5FA 100%); }
:root[data-theme="dark"] .nome-premium.nome-rose { background-image: linear-gradient(100deg, #F472B6 0%, #F9A8D4 28%, #FCE7F3 45%, #F9A8D4 62%, #F472B6 100%); }
.tag-premium.tag-safira { background: linear-gradient(140deg, #3B82F6, #1E40AF); }
.tag-premium.tag-rose { background: linear-gradient(140deg, #EC4899, #9D174D); }

/* Temas do app de assinante: variações escuras com outra paleta */
:root[data-theme="dark"][data-paleta="meia-noite"] {
  --bg: #070C1A; --ink: #E3EAFF; --muted: #8FA0C8; --surface: #0F1830; --surface-2: #16223F; --border: #22325A;
  --blue: #5B9BFF; --blue-soft: rgba(91, 155, 255, .18); --sidebar-bg: #060A16; --violet-deep: #050914;
}
:root[data-theme="dark"][data-paleta="floresta"] {
  --bg: #08140F; --ink: #E2F5EA; --muted: #8DB8A2; --surface: #102219; --surface-2: #173023; --border: #224632;
  --blue: #3FD18A; --blue-soft: rgba(63, 209, 138, .18); --teal: #6FE3C8; --sidebar-bg: #06100B; --violet-deep: #040C08;
}
:root[data-theme="dark"][data-paleta="por-do-sol"] {
  --bg: #1A0A17; --ink: #FFEDE5; --muted: #D2A3B1; --surface: #2A1226; --surface-2: #3A1834; --border: #552447;
  --blue: #FF8A4C; --blue-soft: rgba(255, 138, 76, .18); --coral: #FF7BA8; --sidebar-bg: #14060F; --violet-deep: #10040C;
}
:root[data-paleta="meia-noite"] .side-rail { background: linear-gradient(175deg, #0E1A3A 0%, #070C1A 100%); }
:root[data-paleta="floresta"] .side-rail { background: linear-gradient(175deg, #123224 0%, #08140F 100%); }
:root[data-paleta="por-do-sol"] .side-rail { background: linear-gradient(175deg, #4A1838 0%, #1A0A17 100%); }
:root[data-paleta="meia-noite"] .ini-treino, :root[data-paleta="meia-noite"] .rk-hero, :root[data-paleta="meia-noite"] .loja-hero { background: linear-gradient(135deg, #2F5BD3 0%, #1A3A8F 52%, #0D1F55 100%); }
:root[data-paleta="floresta"] .ini-treino, :root[data-paleta="floresta"] .rk-hero, :root[data-paleta="floresta"] .loja-hero { background: linear-gradient(135deg, #17A36B 0%, #0E6E49 52%, #07402A 100%); }
:root[data-paleta="por-do-sol"] .ini-treino, :root[data-paleta="por-do-sol"] .rk-hero, :root[data-paleta="por-do-sol"] .loja-hero { background: linear-gradient(135deg, #E8663A 0%, #A8325A 52%, #5A1640 100%); }
:root[data-paleta] .btn-primary, :root[data-paleta] .btn-blue { background: var(--blue); color: #0B0B12; }

/* Configurações: temas de assinante */
.cfg-paletas { flex-wrap: wrap; gap: 10px; }
.cfg-paletas .cfg-txt small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.cfg-paleta-ops { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-paleta { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font: 600 11.5px var(--font-sans); }
.cfg-paleta.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.cfg-paleta-amostra { width: 54px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.cfg-paleta.is-locked .cfg-paleta-amostra { filter: saturate(.5) brightness(.85); }
.cfg-paleta .icon-slot .icon { width: 14px; height: 14px; }

/* Selo, convite e botão Premium */
.premium-selo { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 2px 8px 3px; border-radius: 6px; font: 800 10px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #4A2D00; background: linear-gradient(100deg, #F0B942, #FFE58A 50%, #E09A16); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.premium-selo .icon-slot .icon { width: 11px; height: 11px; }
.btn.btn-premium { background: linear-gradient(100deg, #E09A16, #FFD45C 50%, #E09A16); background-size: 200% 100%; color: #3D2600; border: 0; font-weight: 700; }
.btn.btn-premium:hover { background-position: 100% 0; filter: none; }
.premium-convite { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 20px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #3B2A8C, #16103A); box-shadow: inset 0 0 0 1px rgba(255, 212, 92, .35); }
.premium-convite-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 260px; }
.premium-convite-txt strong { font: 700 18px var(--font-serif); }
.premium-convite-txt > span:last-child { color: rgba(255, 255, 255, .8); font-size: 13.5px; }
.premium-ativo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(100deg, rgba(240, 185, 66, .16), rgba(240, 185, 66, .06)); color: var(--ink); font-size: 14px; }
.premium-ativo > .icon-slot { color: #E09A16; }
.premium-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.premium-beneficios > div { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.premium-beneficios strong { display: block; font-size: 13.5px; }
.premium-beneficios small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.premium-benef-ic { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; color: #4A2D00; background: linear-gradient(140deg, #FFE58A, #E09A16); }
.premium-benef-ic .icon-slot .icon { width: 17px; height: 17px; }
.av-op-preco.av-op-premium { background: linear-gradient(100deg, #F0B942, #FFE58A); color: #4A2D00; }

/* =================================================================
   Loja no estilo do Início
   ================================================================= */
.loja-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: center;
  padding: 24px 26px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #6446EC 0%, #3E25B6 52%, #241570 100%); box-shadow: 0 18px 40px rgba(52, 30, 160, .28);
}
.loja-hero::before { content: ""; position: absolute; z-index: -1; left: -120px; bottom: -220px; width: 420px; height: 420px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 2px, transparent 2px 34px); }
.loja-saldo { display: flex; align-items: center; gap: 12px; margin: 12px 0 14px; }
.loja-saldo .loja-saldo-moeda { width: 48px; height: 48px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }
.loja-saldo strong { font: 800 46px/1 var(--font-serif); font-variant-numeric: tabular-nums; }
.loja-saldo span { color: rgba(255, 255, 255, .8); font-size: 15px; }
.loja-ganhar { display: flex; flex-wrap: wrap; gap: 8px; }
.loja-ganhar span { padding: 5px 11px; border-radius: 10px; font-size: 12.5px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); }
.loja-ganhar b { color: #FFE08A; }
.loja-hero-avatar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); overflow: hidden; }
.loja-hero-fundo { position: absolute; inset: 0 0 auto; height: 58px; opacity: .9; }
.loja-hero-fundo .fundo-perfil { position: absolute; inset: 0; }
.loja-hero-avatar > .av-mold, .loja-hero-avatar > .loja-hero-av { position: relative; z-index: 1; margin-top: 12px; }
.loja-hero-av { display: block; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }
.loja-hero-av .avatar-art { width: 100%; height: 100%; display: block; }
.loja-hero-avatar .btn-treino { position: relative; z-index: 1; padding: 10px 16px; font-size: 13.5px; }
.rk-aba-premium .rk-aba-ic { color: #4A2D00; }
.loja-corpo { padding: 20px 22px; border-radius: 20px; }
.loja-sub { margin: 20px 0 10px; font: 700 15px var(--font-serif); }
.loja-sub:first-child { margin-top: 0; }
.loja-legenda { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.loja-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.loja-grid-largo { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.loja-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px 12px; text-align: center; min-width: 0;
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: inset 0 3px 0 var(--item-cor);
  transition: transform .15s ease, box-shadow .15s ease;
}
.loja-item:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--item-cor), 0 10px 22px -12px var(--item-cor); }
.loja-item.is-equipado { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 7%, var(--surface)); }
.loja-item.is-premium { background: linear-gradient(180deg, color-mix(in srgb, #F0B942 9%, var(--surface)), var(--surface) 60%); }
.loja-item-prev { width: 100%; min-height: 78px; display: grid; place-items: center; }
.loja-item-prev .store-avatar-circ { width: 64px; height: 64px; }
.loja-item-prev .store-fundo-preview { height: 70px; }
.loja-item-info { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.loja-item-info strong { font-size: 13.5px; }
.loja-item-info small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.loja-item-info .rar-chip, .loja-item-info .premium-selo { align-self: center; }
.loja-item-acao { width: 100%; margin-top: auto; }
.loja-item-acao .btn { width: 100%; justify-content: center; padding: 8px 10px; font-size: 12.5px; }
.loja-status { display: inline-flex; align-items: center; gap: 5px; color: var(--teal); font: 700 12.5px var(--font-sans); padding: 8px 0; }
.loja-nome-prev { font: 800 22px var(--font-serif); }
.loja-tema-prev { display: grid; grid-template-columns: 1.2fr 1fr .6fr; width: 100%; max-width: 150px; height: 64px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.loja-tema-prev i:nth-child(1) { background: var(--t1); } .loja-tema-prev i:nth-child(2) { background: var(--t2); } .loja-tema-prev i:nth-child(3) { background: var(--t3); }
.loja-energia-prev { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #FFB938, #D9730D); }
.loja-energia-prev .energia-icone { width: 28px; height: 28px; }
.loja-corpo .store-protetor { margin-top: 20px; border: 0; box-shadow: none; padding: 0; background: none; }
.loja-corpo .store-protetor .section-title { font-size: 15px; }
@media (max-width: 760px) {
  .loja-hero { grid-template-columns: 1fr; padding: 20px; }
  .loja-saldo strong { font-size: 38px; }
  .loja-corpo { padding: 16px; }
  .loja-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .loja-grid-largo { grid-template-columns: 1fr; }
}
html.reduce-motion .mold-p-ouro .fr, html.reduce-motion .mold-p-aurora .fr, html.reduce-motion .mold-p-brasa .fr { animation: none; }

/* =================================================================
   Marcar na questão (riscar e grifar) + rascunho completo
   ================================================================= */
.tem-camada-marcas { position: relative; }
.marca-camada { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; border-radius: inherit; }
.is-marcando .marca-camada { pointer-events: auto; touch-action: none; cursor: crosshair; }
.is-marcando { box-shadow: 0 0 0 2px var(--blue), var(--shadow); }
.q-tool-marcar { gap: 6px; }
.q-tool-marcar .q-tool-label { display: inline; }
.q-tool.has-ink::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.marca-barra {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(20, 12, 60, .28);
  animation: marca-sobe .2s ease both;
}
@keyframes marca-sobe { from { transform: translate(-50%, 16px); opacity: 0; } }
.marca-grupo { display: flex; align-items: center; gap: 6px; }
.marca-grupo-fim { margin-left: auto; }
.marca-pronto { padding: 9px 16px; }
.marca-dica { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 11.5px; }
.marcando-questao .mobile-nav { display: none !important; }
.marcando-questao .question-shell { padding-bottom: 150px; }
.q-cadeado { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #4A2D00; background: linear-gradient(140deg, #FFE58A, #E09A16); }
.q-cadeado .icon-slot .icon { width: 10px; height: 10px; }
.q-swatch { position: relative; }
[data-premium] { opacity: .75; }
@media (max-width: 560px) {
  .q-tool-marcar .q-tool-label { display: none; }
  .marca-barra { gap: 6px 8px; padding: 8px; }
  .marca-grupo .q-tool { min-width: 34px; height: 34px; padding: 0 8px; }
  .marca-grupo .q-swatch { width: 26px; height: 26px; }
}

/* Estatísticas completas (assinantes) */
.est-periodos .chip.est-bloq { opacity: .75; }
.est-periodos .chip .icon-slot .icon { width: 12px; height: 12px; }
.est-assuntos { display: grid; gap: 4px; margin-top: 6px; }
.est-assunto { display: grid; grid-template-columns: minmax(0, 2.2fr) 70px minmax(0, 1.4fr) 80px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.est-assunto > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.est-assunto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.est-assunto small { color: var(--muted); font-size: 11px; }
.est-assunto-cab { background: none; color: var(--muted); font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.est-assunto > span:nth-child(3) { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.est-assunto-barra { flex: 1; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.est-assunto-barra i { display: block; height: 100%; border-radius: inherit; }
.est-tend { font: 700 12px var(--font-mono); color: var(--muted); }
.est-tend.sobe { color: var(--teal); } .est-tend.desce { color: var(--coral); }
.est-card .premium-convite { margin-top: 8px; }
@media (max-width: 560px) { .est-assunto { grid-template-columns: minmax(0, 1.6fr) 44px minmax(0, 1.2fr) 62px; gap: 6px; font-size: 12px; } }

/* =================================================================
   Plano de estudos (js/plano.js)
   ================================================================= */
.ini-plano-cta { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--blue) 45%, var(--border)); }
.ini-plano-cta:hover { border-style: solid; border-color: var(--blue); }
.ini-plano-ic { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #8C6CFF, #4B33C9); }
.ini-plano-ic .icon-slot .icon { width: 22px; height: 22px; }
.ini-plano-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ini-plano-txt strong { font-size: 15px; }
.ini-plano-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ini-plano { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 20px; }
.ini-plano-contagem { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 8px; border-radius: 16px; text-align: center; color: #fff; background: linear-gradient(145deg, #6446EC, #241570); }
.ini-plano-contagem strong { font: 800 40px/1 var(--font-serif); font-variant-numeric: tabular-nums; }
.ini-plano-contagem span { font-size: 12px; opacity: .85; margin-top: 4px; }
.ini-plano-meio { min-width: 0; }
.ini-plano-meio .ini-sec-head { margin-bottom: 10px; }
.plano-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.plano-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: var(--surface-2); text-align: center; min-width: 0; }
.plano-dia-nome { font: 600 11px var(--font-mono); color: var(--muted); text-transform: uppercase; }
.plano-dia-marca { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font: 700 13px var(--font-sans); background: var(--surface); border: 1.5px solid var(--border); }
.plano-dia small { font-size: 11px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.plano-dia.is-folga { opacity: .55; }
.plano-dia.is-folga small { color: var(--muted); }
.plano-dia.is-feito .plano-dia-marca { background: var(--teal); border-color: var(--teal); color: #fff; }
.plano-dia.is-perdido .plano-dia-marca { border-style: dashed; color: var(--muted); }
.plano-dia.is-hoje { background: var(--blue-soft); box-shadow: inset 0 0 0 1.5px var(--blue); }
.plano-dia.is-hoje .plano-dia-marca { background: var(--blue); border-color: var(--blue); color: #fff; }
.plano-dia-marca .icon-slot .icon { width: 14px; height: 14px; }
.plano-semana-mini .plano-dia { padding: 6px 2px; }
.plano-hero .ini-status-item { padding: 10px 14px; }
.plano-barra { height: 8px; margin: -6px 0 18px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; max-width: 420px; }
.plano-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FFE08A, #FFD45C); }
.plano-bloco { padding: 18px 20px; }
.plano-fases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plano-fases li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.plano-fases strong { display: block; font-size: 14px; }
.plano-fases small { color: var(--muted); font-size: 12px; }
.plano-fase-ponto { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); }
.plano-fases li.is-atual { box-shadow: inset 0 0 0 1.5px var(--blue); background: var(--blue-soft); }
.plano-fases li.is-atual .plano-fase-ponto { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.plano-fases li.is-feita .plano-fase-ponto { border-color: var(--teal); background: var(--teal); }
.plano-materias { display: grid; gap: 8px; }
.plano-materia { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.plano-materia > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.plano-materia strong { font-size: 14px; }
.plano-materia small { color: var(--muted); font-size: 12px; }
.plano-materia-barra { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.plano-materia-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8C6CFF, #4B33C9); }
.plano-materia b { font: 700 13px var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.plano-form { display: grid; gap: 22px; padding: 22px; }
.plano-campo { display: flex; flex-direction: column; gap: 6px; }
.plano-campo strong { font-size: 15px; }
.plano-campo small { color: var(--muted); font-size: 12.5px; }
.plano-campo input[type="date"] { max-width: 240px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 600 15px var(--font-sans); }
.plano-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.plano-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plano-apagar { margin-left: auto; color: var(--coral); }
.plano-erro { margin: 0; color: var(--coral); font-weight: 600; font-size: 13.5px; }
.plano-nota { margin: 0; color: var(--muted); font-size: 12.5px; }
@media (max-width: 760px) {
  .ini-plano { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .ini-plano-contagem { flex-direction: row; gap: 8px; justify-content: flex-start; padding: 10px 14px; }
  .ini-plano-contagem strong { font-size: 28px; }
  .plano-fases { grid-template-columns: 1fr; }
  .plano-semana { gap: 4px; }
  .plano-dia small { font-size: 10px; }
  .plano-hero .ini-status { grid-template-columns: 1fr; }
}
.plano-dia.is-antes { opacity: .45; }
.plano-dia-curto { display: none; }
@media (max-width: 560px) {
  .plano-dia-longo { display: none; }
  .plano-dia-curto { display: inline; }
}

/* =================================================================
   Apresentação (primeira visita, js/apresentacao.js)
   ================================================================= */
body.modo-apresentacao .side-rail, body.modo-apresentacao .topbar, body.modo-apresentacao .mobile-nav { display: none !important; }
body.modo-apresentacao .app-shell { display: block; }
.apr { --apr-largura: 1080px; color: var(--ink); }
.apr > * { max-width: var(--apr-largura); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.apr-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 18px; }
.apr-marca { display: inline-flex; align-items: center; gap: 10px; font: 800 22px var(--font-serif); }
.apr-marca .brand-seal { width: 36px; height: 36px; font-size: 18px; }
.apr-entrar { padding: 9px 16px; }
.apr-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center;
  padding-top: 36px !important; padding-bottom: 44px !important; max-width: none !important;
  background: radial-gradient(90% 120% at 100% 0%, #7C5CFF 0%, #4C34B8 40%, #241570 100%); color: #fff; border-radius: 0 0 36px 36px;
}
.apr-hero > * { max-width: 560px; }
.apr-hero > .apr-hero-txt { justify-self: end; }
.apr-hero > .apr-demo { justify-self: start; }
.apr-selo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #FFE08A; font: 600 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.apr-selo .icon-slot .icon { width: 14px; height: 14px; }
.apr-hero h1 { margin: 16px 0 14px; font: 800 clamp(32px, 5vw, 50px)/1.08 var(--font-serif); text-wrap: balance; }
.apr-hero-txt p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); max-width: 48ch; }
.apr-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.apr-acoes .btn-treino { font-size: 16px; padding: 15px 26px; }
.apr-link { background: none; border: 0; padding: 6px 0; color: #fff; font: 600 15px var(--font-sans); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; cursor: pointer; }
.apr-link:hover { text-decoration-color: #fff; }
.apr-nota { display: block; margin-top: 14px; color: rgba(255, 255, 255, .7); font-size: 12.5px; }
.apr-demo { width: 100%; padding: 22px; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(10, 4, 40, .4); }
.apr-demo-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.apr-chip { padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font: 700 11.5px var(--font-sans); }
.apr-demo-rot { margin-left: auto; font: 600 11px var(--font-mono); color: var(--gold); text-transform: uppercase; letter-spacing: .08em; }
.apr-demo-q { margin: 0 0 18px; font: 600 16px/1.55 var(--font-sans); }
.apr-demo-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apr-ce { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 13px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--ink); font: 700 15px var(--font-sans); cursor: pointer; }
.apr-ce:hover { border-color: var(--blue); }
.apr-demo-res { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; }
.apr-demo-res.ok { background: var(--teal-soft); } .apr-demo-res.erro { background: var(--coral-soft); }
.apr-demo-res strong { font: 800 18px var(--font-serif); }
.apr-demo-res.ok strong { color: var(--teal); } .apr-demo-res.erro strong { color: var(--coral); }
.apr-demo-res span { font-size: 14px; line-height: 1.5; }
.apr-link-escuro { color: var(--blue); text-decoration-color: var(--blue-soft); align-self: flex-start; }
.apr-destaques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: -26px !important; position: relative; }
.apr-destaques > div { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.apr-destaque-ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.apr-destaque-ic .icon { width: 19px; height: 19px; }
.apr-destaques strong { font: 800 15.5px var(--font-sans); color: var(--ink); }
.apr-destaques > div > span:not(.apr-destaque-ic) { color: var(--muted); font-size: 13px; line-height: 1.45; }
.apr-secao { padding-top: 48px; }
.apr-secao h2, .apr-final h2 { margin: 0 0 18px; font: 800 clamp(24px, 3.4vw, 32px) var(--font-serif); text-wrap: balance; }
.apr-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.apr-passos li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.apr-passos li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font: 800 16px var(--font-serif); margin-bottom: 4px; }
.apr-passos strong { font-size: 16px; }
.apr-passos small { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.apr-recursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.apr-recurso { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.apr-recurso strong { font-size: 16px; margin-top: 4px; }
.apr-recurso small { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.apr-bancas { display: flex; flex-wrap: wrap; gap: 8px; }
.apr-bancas span { padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font: 700 13px var(--font-sans); }
.apr-faq { display: grid; gap: 10px; max-width: 760px; }
.apr-faq details { padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.apr-faq summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.apr-faq p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.apr-final { margin-top: 56px; padding-top: 40px !important; padding-bottom: 40px !important; border-radius: 28px; text-align: center; color: #fff; background: linear-gradient(135deg, #6446EC 0%, #3E25B6 52%, #241570 100%); }
.apr-final .apr-acoes { justify-content: center; }
.apr-rodape { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding-top: 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 13px; }
.apr-rodape a { color: var(--muted); }
@media (max-width: 860px) {
  .apr-hero { grid-template-columns: 1fr; border-radius: 0 0 28px 28px; padding-top: 20px !important; }
  .apr-hero > .apr-hero-txt, .apr-hero > .apr-demo { justify-self: stretch; max-width: none; }
  .apr-destaques { grid-template-columns: 1fr 1fr; margin-top: 18px !important; }
  .apr-passos, .apr-recursos { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .apr > * { padding-left: 16px; padding-right: 16px; }
  .apr-acoes .btn-treino { width: 100%; justify-content: center; }
  .apr-acoes { justify-content: center; }
  .apr-final { margin-left: 16px; margin-right: 16px; }
}

/* =================================================================
   Estatísticas em quadros (js/estatisticas.js)
   ================================================================= */
.est-card { gap: 16px; }
.est-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.est-cab .section-caption { display: block; margin-top: 2px; }
.est-cab .est-periodos { width: auto; flex: 0 1 360px; max-width: 100%; }
.est-periodos .chip { font-size: 13px; padding: 8px 6px; }

.est-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.est-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px 15px; border-radius: 16px; text-align: left;
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--c) 14%, transparent); }
.est-tile-ic { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.est-tile-ic .icon { width: 16px; height: 16px; }
.est-tile strong { font: 900 26px/1.05 var(--font-serif); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.est-tile .est-tile-rot { font-size: 12.5px; color: var(--muted); }
.est-tile .est-delta { margin-top: 4px; padding: 2px 7px; border-radius: 99px; background: var(--surface); font-size: 11px; }

.est-paineis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.est-painel { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.est-painel-largo { grid-column: 1 / -1; }
.est-painel { container-type: inline-size; }
.est-painel-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 3px; }
.est-painel-cab .est-titulo { margin: 0; font: 800 15px/1.25 var(--font-sans); }
.est-sub { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.est-faixa { flex: none; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font: 600 11px var(--font-mono); letter-spacing: .02em; white-space: nowrap; }
.est-grafico { min-height: 170px; display: grid; align-items: end; }
.est-grafico .est-vazio { align-self: center; text-align: center; padding: 0 12px; }
.est-aviso { fill: var(--muted); font: 600 12.5px var(--font-sans); }
.est-painel .est-legenda { margin: -4px 0 0; font-size: 12px; }
.est-painel .est-materias { gap: 12px; margin-top: 2px; }
.est-painel .est-materia { grid-template-columns: minmax(90px, 36%) 1fr 40px; }
.est-painel .est-assuntos { margin-top: -4px; }
.est-painel .premium-convite { margin-top: 0; }
/* Quebra pela largura do próprio cartão (o menu lateral ocupa espaço no computador). */
.est-card { container-type: inline-size; }
@container (max-width: 760px) {
  .est-paineis { grid-template-columns: minmax(0, 1fr); }
  .est-cab .est-periodos { flex: 1 1 100%; }
}
@container (max-width: 600px) {
  .est-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 560px) {
  .est-painel { padding: 16px 14px 14px; border-radius: 16px; }
  .est-tile { padding: 12px 13px 13px; }
  .est-tile strong { font-size: 23px; }
  .est-faixa { font-size: 10px; padding: 3px 8px; }
}
.est-assuntos:not(.is-aberto) .est-assunto-extra { display: none; }
.est-ver-todos { justify-self: center; align-self: center; display: inline-flex; align-items: center; gap: 4px; margin-top: -4px; padding: 8px 14px; border: 0; border-radius: 99px; background: var(--surface-2); color: var(--blue); font: 700 13px var(--font-sans); cursor: pointer; }
.est-ver-todos:hover { background: var(--blue-soft); }
.est-ver-todos .icon { width: 14px; height: 14px; transition: transform .2s; }
.est-ver-todos[aria-expanded="true"] .icon { transform: rotate(-90deg); }
/* Quadro estreito (celular): nome da matéria e % em cima, barra embaixo. */
@container (max-width: 420px) {
  .est-painel .est-materia { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .est-painel .est-materia-trilho { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .est-painel .est-materia-nome { white-space: normal; }
}
.est-assunto-qtd { display: none; font-style: normal; }
/* Relatório no quadro estreito: nome inteiro e tendência em cima, barra embaixo. */
@container (max-width: 520px) {
  .est-painel .est-assunto-cab { display: none; }
  .est-painel .est-assunto { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 11px 12px; }
  .est-painel .est-assunto > span:nth-child(2) { display: none; }
  .est-painel .est-assunto > span:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .est-painel .est-assunto > .est-tend { grid-column: 2; grid-row: 1; align-self: start; }
  .est-painel .est-assunto strong { white-space: normal; }
  .est-painel .est-assunto-qtd { display: inline; }
}

/* =================================================================
   Perfil reorganizado: pontos de atenção + nível no topo, histórico em botão
   ================================================================= */
.perfil-foco { align-items: stretch; margin-bottom: 16px; }
.perfil-foco > .profile-card { display: flex; flex-direction: column; }
.perfil-foco .section-head { margin-bottom: 14px; }
/* Pontos de atenção */
.perfil-atencao .attention-list { gap: 8px; }
.perfil-atencao .attention-item { align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 14px; }
.attention-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attention-info strong { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-info small { font-size: 11.5px; }
.attention-barra { display: block; height: 5px; margin-top: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.attention-barra i { display: block; height: 100%; border-radius: inherit; }
.attention-treinar { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border: 0; border-radius: 99px; background: var(--blue); color: #fff; font: 700 12.5px var(--font-sans); cursor: pointer; box-shadow: 0 6px 14px -8px var(--blue); transition: transform .15s, filter .15s; }
.attention-treinar:hover { filter: brightness(1.08); transform: translateY(-1px); }
.attention-treinar .icon { width: 13px; height: 13px; }
.perfil-atencao-raiox { align-self: flex-start; margin-top: 10px; }
/* Nível e plano */
.perfil-nivel .level-row strong { font-variant-numeric: tabular-nums; }
.perfil-nivel .level-track { height: 9px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.perfil-plano { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--surface-2); }
.perfil-plano > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.perfil-plano strong { font-size: 13.5px; color: var(--ink); }
.perfil-plano small { font-size: 11.5px; color: var(--muted); }
.perfil-plano-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #FFB938, #D9730D); }
.perfil-plano-ic .icon { width: 17px; height: 17px; }
.perfil-plano .btn-ghost { flex: none; color: var(--blue); }
.perfil-nivel #btnEditStudyPlan { align-self: flex-start; margin-top: auto; padding-top: 14px; }
/* Histórico em botão */
.perfil-historico { padding: 0; overflow: hidden; }
.perfil-historico-cab { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.perfil-historico-cab:hover { background: color-mix(in srgb, var(--blue) 5%, transparent); }
.perfil-historico-cab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.perfil-historico-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #5B9BFF, #2F5BD3); }
.perfil-historico-ic .icon { width: 19px; height: 19px; }
.perfil-historico-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.perfil-historico-txt strong { font: 800 16px var(--font-sans); color: var(--ink); }
.perfil-historico-txt small { font-size: 12.5px; color: var(--muted); }
.perfil-historico-acao { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 99px; background: var(--surface-2); color: var(--blue); font: 700 13px var(--font-sans); }
.perfil-historico-acao .icon { width: 14px; height: 14px; transition: transform .2s; }
.perfil-historico.is-aberto .perfil-historico-acao .icon { transform: rotate(90deg); }
.perfil-historico-corpo { border-top: 1px solid var(--border); padding-bottom: 12px; animation: perfilAbrir .22s ease-out; }
.perfil-historico-corpo .btn-ghost { margin: 6px 0 0 18px; color: var(--blue); }
@keyframes perfilAbrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .perfil-historico-cab { padding: 15px 16px; gap: 12px; }
  .perfil-historico-acao { padding: 7px 11px; font-size: 12px; }
  .perfil-historico-txt strong { font-size: 15px; }
  .perfil-historico .history-row { grid-template-columns: minmax(0, 1fr) auto auto; padding: 12px 10px 12px 16px; column-gap: 6px; }
}
html.reduce-motion .perfil-historico-corpo { animation: none; }
@media (max-width: 560px) {
  .perfil-plano { flex-wrap: wrap; row-gap: 2px; }
  .perfil-plano > span:nth-child(2) { flex-basis: calc(100% - 46px); }
  .perfil-plano .btn-ghost { margin-left: 46px; padding: 2px 0; }
}

/* =================================================================
   Apresentação: animações ao rolar (js/apresentacao.js, apresentacaoAnimar)
   Usa "translate"/"scale" (e não "transform") para não brigar com o efeito
   de passar o mouse. Só esconde quando o JS liga .apr-animada.
   ================================================================= */
.apr.apr-animada [data-rev] {
  opacity: 0;
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1), translate .75s cubic-bezier(.22, .61, .36, 1), scale .75s cubic-bezier(.22, .61, .36, 1);
}
.apr.apr-animada [data-rev="subir"] { translate: 0 28px; }
.apr.apr-animada [data-rev="lado"] { translate: 36px 14px; }
.apr.apr-animada [data-rev="zoom"] { translate: 0 18px; scale: .96; }
.apr.apr-animada [data-rev].is-visivel { opacity: 1; translate: 0 0; scale: 1; }
@media (max-width: 860px) { .apr.apr-animada [data-rev="lado"] { translate: 0 28px; } }
/* Detalhes que "acendem" depois que o cartão aparece */
.apr.apr-animada .apr-destaques > div.is-visivel .apr-destaque-ic,
.apr.apr-animada .apr-passos > li.is-visivel > span,
.apr.apr-animada .apr-recurso.is-visivel .ini-modo-ic { animation: aprPop .55s cubic-bezier(.34, 1.56, .64, 1) .18s both; }
@keyframes aprPop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

/* Topo: luz que se move devagar atrás do texto */
.apr-hero { position: relative; overflow: hidden; isolation: isolate; }
.apr-hero::before, .apr-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.apr-hero::before { width: 520px; height: 520px; top: -220px; right: -120px; background: rgba(160, 120, 255, .55); animation: aprLuz 16s ease-in-out infinite alternate; }
.apr-hero::after { width: 420px; height: 420px; bottom: -260px; left: -80px; background: rgba(255, 138, 107, .28); animation: aprLuz 19s ease-in-out infinite alternate-reverse; }
@keyframes aprLuz { from { translate: 0 0; } 50% { translate: -60px 40px; } to { translate: 40px -30px; } }

/* Barra do topo fixa; ganha fundo com desfoque ao rolar */
.apr > .apr-topo { position: sticky; top: 0; z-index: 30; max-width: none; padding-left: max(24px, calc((100% - var(--apr-largura)) / 2 + 24px)); padding-right: max(24px, calc((100% - var(--apr-largura)) / 2 + 24px)); transition: background-color .25s, box-shadow .25s, padding .25s; }
.apr > .apr-topo.is-rolado { padding-top: 11px; padding-bottom: 11px; background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--border), 0 10px 30px -18px rgba(20, 10, 60, .35); }

/* Cartões reagem ao mouse */
.apr-destaques > div, .apr-passos li, .apr-recurso, .apr-faq details { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
@media (hover: hover) {
  .apr-destaques > div:hover, .apr-passos li:hover, .apr-recurso:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(60, 30, 160, .45); border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); }
  .apr-faq details:hover { border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); }
  .apr-bancas span { transition: transform .2s ease, border-color .2s; }
  .apr-bancas span:hover { transform: translateY(-2px); border-color: var(--blue); }
  .apr-ce { transition: transform .15s ease, border-color .15s, background-color .15s; }
  .apr-ce:hover { transform: translateY(-2px); background: var(--blue-soft); }
}
.apr-acoes .btn-treino { transition: transform .2s ease, box-shadow .2s ease; }
.apr-acoes .btn-treino:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .45); }
/* Resposta da questão de exemplo entra deslizando */
.apr-demo-res { animation: aprResposta .45s cubic-bezier(.22, .61, .36, 1); }
@keyframes aprResposta { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
/* FAQ: a resposta abre suave */
.apr-faq details[open] p { animation: aprResposta .35s ease-out; }

/* "Reduzir animações" do próprio app (Perfil → engrenagem); o do sistema é ignorado,
   como no resto do site (ver MOTION_KEY em js/app.js). */
html.reduce-motion .apr-hero::before, html.reduce-motion .apr-hero::after, html.reduce-motion .apr-demo-res, html.reduce-motion .apr-faq details[open] p { animation: none; }
html.reduce-motion .apr > .apr-topo { transition: none; }
@media print { .apr.apr-animada [data-rev] { opacity: 1; translate: none; scale: none; } }

/* Apresentação: transição mais marcante (sai de um leve desfoque) e indicador de rolagem */
.apr.apr-animada [data-rev] { filter: blur(6px); transition-property: opacity, translate, scale, filter; }
.apr.apr-animada [data-rev="subir"] { translate: 0 40px; }
.apr.apr-animada [data-rev].is-visivel { filter: none; }
.apr-rolar { display: none; }
@media (min-width: 861px) and (hover: hover) {
  .apr-rolar { display: block; position: absolute; left: 50%; bottom: 16px; width: 26px; height: 40px; margin-left: -13px; max-width: none; transition: opacity .4s ease; }
  .apr-rolar-mouse { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .55); border-radius: 14px; }
  .apr-rolar-mouse::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: aprRolar 1.6s ease-in-out infinite; }
  .apr.ja-rolou .apr-rolar, .apr:not(.apr-animada) .apr-rolar { opacity: 0; pointer-events: none; }
}
@keyframes aprRolar { 0% { opacity: 0; translate: 0 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }
html.reduce-motion .apr-rolar { display: none !important; }

/* =================================================================
   Loja: categorias com ícones SVG próprios e uma paleta só (roxo da marca;
   Premium em dourado). Ícones em LOJA_ICONES (js/app.js).
   ================================================================= */
.loja-abas { gap: 10px; }
.loja-abas .rk-aba { --m1: var(--blue); --m2: var(--blue); padding: 6px 16px 6px 6px; border-radius: 16px; transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.loja-abas .rk-aba:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.loja-abas .rk-aba-ic { width: 34px; height: 34px; border-radius: 11px; color: var(--blue); background: color-mix(in srgb, var(--blue) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.loja-abas .rk-aba.is-ativa { background: color-mix(in srgb, var(--blue) 8%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 22%, transparent), 0 10px 22px -16px var(--blue); }
.loja-abas .rk-aba.is-ativa .rk-aba-ic { color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue) 55%, color-mix(in srgb, var(--blue) 80%, #000)); box-shadow: 0 6px 14px -8px var(--blue), inset 0 1px 0 rgba(255, 255, 255, .25); }
.loja-abas .rk-aba.is-ativa .rk-aba-nome { color: var(--blue); }
.loja-abas .rk-aba-premium { --m1: #D99A1B; --m2: #D99A1B; }
.loja-abas .rk-aba-premium .rk-aba-ic { color: #B9790C; background: color-mix(in srgb, #F2B632 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #E09A16 22%, transparent); }
.loja-abas .rk-aba-premium:hover { border-color: color-mix(in srgb, #E09A16 50%, var(--border)); }
.loja-abas .rk-aba-premium.is-ativa { background: color-mix(in srgb, #F2B632 10%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, #E09A16 28%, transparent), 0 10px 22px -16px #E09A16; }
.loja-abas .rk-aba-premium.is-ativa .rk-aba-ic { color: #4A2D00; background: linear-gradient(150deg, #FFE08A, #F2B632 55%, #D48A0C); box-shadow: 0 6px 14px -8px #D48A0C, inset 0 1px 0 rgba(255, 255, 255, .45); }
.loja-abas .rk-aba-premium.is-ativa .rk-aba-nome { color: #B9790C; }
.loja-cat-svg { width: 20px; height: 20px; display: block; overflow: visible; }
.loja-cat-svg .dt { fill: currentColor; fill-opacity: .16; }
.loja-cat-svg .cheio { fill: currentColor; stroke: none; }
.rk-aba.is-ativa .loja-cat-svg .dt { fill-opacity: .28; }
:root[data-theme="dark"] .loja-abas .rk-aba-premium .rk-aba-ic { color: #F2C14E; }
:root[data-theme="dark"] .loja-abas .rk-aba-premium.is-ativa .rk-aba-nome { color: #F2C14E; }

/* =================================================================
   Cabeçalho do perfil: faixa de fundo alta (aparece de verdade no PC),
   avatar maior metade sobre a faixa e o nome logo abaixo dela.
   ================================================================= */
.profile-header-card { --pf-faixa: 150px; --pf-av: 104px; align-items: flex-start; padding-top: calc(var(--pf-faixa) - var(--pf-av) / 2); padding-bottom: 22px; }
.profile-header-card > .fundo-perfil { height: var(--pf-faixa); }
.profile-header-card > .fundo-perfil::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0, 0, 0, .12)); pointer-events: none; }
.profile-header-card > .av-mold, .profile-header-card > .profile-avatar-big { margin-top: 0; }
.profile-header-card .profile-avatar-big { width: var(--pf-av); height: var(--pf-av); min-width: var(--pf-av); border: 4px solid var(--surface); box-shadow: 0 10px 24px -12px rgba(20, 10, 60, .45); }
.profile-header-card .profile-header-info { margin-top: calc(var(--pf-av) / 2 + 10px); }
.profile-header-card .profile-settings-btn { margin-top: calc(var(--pf-av) / 2 + 10px); }
@media (max-width: 560px) {
  .profile-header-card { --pf-faixa: 112px; --pf-av: 84px; gap: 14px; padding-left: 16px; padding-right: 16px; }
}

/* =================================================================
   Molduras do kit (js/cosmeticos.js, MOLDURAS_KIT)
   SVG 256×256 com a borda da foto no raio 74: a caixa da moldura é
   256/148 ≈ 1,73 × o avatar (inset −36,5%). Em listas (ranking, amigos)
   fica um pouco menor para não invadir a linha (o anel cobre a borda da foto).
   ================================================================= */
.av-mold.mold-kit > .fr, .av-mold.mold-kit > .fr-top { inset: -36.5%; }
.ranking-avatar-wrap .av-mold.mold-kit > .fr, .ranking-avatar-wrap .av-mold.mold-kit > .fr-top,
.amigo-row .av-mold.mold-kit > .fr, .amigo-row .av-mold.mold-kit > .fr-top,
.liga-row .av-mold.mold-kit > .fr, .liga-row .av-mold.mold-kit > .fr-top { inset: -27%; }
.mold-kit svg * { transform-box: view-box; }
.mold-kit .km-gira { transform-origin: 128px 128px; animation: km-gira var(--t, 14s) linear infinite; }
.mold-kit .km-gira.km-rev { animation-direction: reverse; }
.mold-kit .km-pisca { animation: km-pisca 2.4s ease-in-out infinite; }
/* Louros da aprovação: brilho subindo pelas folhas (o atraso de cada folha faz a onda) e halo pulsando */
.mold-kit .lr-luz { opacity: 0; animation: lr-luz 3.8s ease-in-out infinite; }
@keyframes lr-luz { 0%, 100% { opacity: 0; } 5% { opacity: .85; } 13% { opacity: 0; } }
.mold-kit .lr-halo { transform-origin: 128px 128px; animation: lr-halo 3.8s ease-in-out infinite; }
@keyframes lr-halo { 0%, 100% { opacity: .45; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.02); } }
.mold-kit .km-pulsa { transform-box: fill-box; transform-origin: center; animation: km-pulsa 2.2s ease-in-out infinite; }
.mold-kit .km-respira { animation: km-respira 2.8s ease-in-out infinite; }
.mold-kit .km-onda { transform-origin: 128px 128px; animation: km-onda 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.mold-kit .km-dados { animation: km-dados 1.6s linear infinite; }
.mold-kit .km-lua { animation: km-respira 4s ease-in-out infinite; }
@keyframes km-gira { to { transform: rotate(360deg); } }
@keyframes km-pisca { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes km-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes km-respira { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes km-onda { from { transform: scale(1); opacity: .85; } to { transform: scale(1.26); opacity: 0; } }
@keyframes km-dados { from { stroke-dashoffset: 45; } to { stroke-dashoffset: 0; } }
/* "Reduzir animações" do app: html.reduce-motion .av-mold * já desliga tudo (e o JS tira o animateMotion). */

/* Molduras do kit vão mais longe que as antigas: mais respiro na prévia da Loja */
.loja-item-prev { padding: 14px 0 6px; }

/* =================================================================
   Lições da Trilha (js/licoes.js) — tela cheia no celular, painel no PC
   ================================================================= */
body.licao-aberta { overflow: hidden; }
.licao-fundo { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; background: rgba(12, 8, 32, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: lc-fade .2s ease both; }
@keyframes lc-fade { from { opacity: 0; } }
.licao { --tema: #6B4EE6; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(620px, 100%); height: min(760px, 100%); background: var(--bg); color: var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); }
@media (max-width: 640px) { .licao { width: 100%; height: 100%; border-radius: 0; } }
.licao-topo { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px; }
.licao-x { width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.licao-x .icon { width: 18px; height: 18px; }
.licao-prog { display: flex; gap: 5px; }
.licao-prog i { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; position: relative; }
.licao-prog i.feito, .licao-prog i.atual { background: var(--tema); }
.licao-prog i.atual { background: color-mix(in srgb, var(--tema) 35%, var(--surface-2)); }
.licao-prog i.atual::after { content: ""; position: absolute; inset: 0; background: var(--tema); transform-origin: left; animation: lc-barra .5s ease-out both; }
@keyframes lc-barra { from { transform: scaleX(0); } }
.licao-pular { border: 0; background: none; color: var(--muted); font: 700 13.5px var(--font-sans); padding: 8px 4px; cursor: pointer; }
.licao-pular:hover { color: var(--ink); }
.licao-pular-vazio { width: 1px; }
.licao-palco { overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px 18px; }
.licao-card { display: grid; gap: 14px; align-content: start; max-width: 540px; margin: 0 auto; outline: none; }
.licao-card.entra-dir { animation: lc-entra-dir .32s cubic-bezier(.22, .61, .36, 1) both; }
.licao-card.entra-esq { animation: lc-entra-esq .32s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes lc-entra-dir { from { opacity: 0; transform: translateX(28px); } }
@keyframes lc-entra-esq { from { opacity: 0; transform: translateX(-28px); } }
.licao-card h2 { margin: 0; font: 800 clamp(26px, 6vw, 34px)/1.1 var(--font-serif); text-wrap: balance; }
.licao-card h3 { margin: 0; font: 800 clamp(20px, 4.6vw, 24px)/1.2 var(--font-serif); text-wrap: balance; }
.lc-olho { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tema); }
.lc-olho .icon { width: 14px; height: 14px; }
.lc-olho-alerta { color: var(--coral); }
.lc-txt { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.lc-mark { background: color-mix(in srgb, var(--tema) 18%, transparent); color: inherit; border-radius: 4px; padding: 0 3px; font-weight: 700; }
.licao-pe { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
.licao-pe .btn-primary { flex: 1; max-width: 320px; margin-left: auto; justify-content: center; background: var(--tema); border-color: var(--tema); }
.licao-pe .btn-quiet:disabled { opacity: .35; }

/* Capa */
.lc-capa { display: grid; gap: 12px; justify-items: start; padding-top: 10px; }
.lc-capa-ic { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--tema) 75%, #fff), var(--tema) 55%, color-mix(in srgb, var(--tema) 70%, #000)); box-shadow: 0 16px 34px -14px var(--tema); animation: lc-flutua 3.4s ease-in-out infinite; }
.lc-capa-ic svg { width: 46px; height: 46px; }
@keyframes lc-flutua { 50% { transform: translateY(-6px) rotate(-3deg); } }
.lc-capa-sub { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.lc-aprende { width: 100%; display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.lc-aprende > span { font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lc-aprende > div { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; animation: lc-sobe .45s cubic-bezier(.22, .61, .36, 1) var(--d, 0s) both; }
.lc-aprende .icon { width: 17px; height: 17px; color: var(--teal); flex: none; margin-top: 2px; }
.lc-capa-tempo { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.lc-capa-tempo .icon { width: 15px; height: 15px; }
@keyframes lc-sobe { from { opacity: 0; transform: translateY(10px); } }

/* Caixa das animações */
.lc-anim { position: relative; display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.lc-rever { justify-self: end; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--muted); font: 600 12px var(--font-sans); cursor: pointer; padding: 2px 0; }
.lc-rever .icon { width: 13px; height: 13px; }
.lc-anim-nota { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.lc-sent { margin: 0; font-size: 18px; line-height: 2.5; font-weight: 600; }
.cor-azul { --c: var(--blue); } .cor-verde { --c: var(--teal); } .cor-laranja { --c: var(--gold); } .cor-rosa { --c: var(--coral); } .cor-roxo { --c: #8B5CF6; }
/* Peças da frase com rótulo embaixo */
.lc-tok { position: relative; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3; vertical-align: top; margin: 0 1px 6px; }
.lc-tok-t { padding: 1px 5px; border-radius: 7px; color: var(--ink); background: color-mix(in srgb, var(--c, var(--blue)) 0%, transparent); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c, var(--blue)) 0%, transparent); }
.lc-tok-tag { font: 600 10.5px var(--font-mono); letter-spacing: .02em; color: var(--c, var(--blue)); white-space: nowrap; opacity: 0; transform: translateY(-4px); }
.rodando .lc-tok .lc-tok-t { animation: lc-marca .5s ease var(--d, 0s) both; }
.rodando .lc-tok .lc-tok-tag { animation: lc-rotulo .45s ease calc(var(--d, 0s) + .2s) both; }
@keyframes lc-marca { to { background: color-mix(in srgb, var(--c, var(--blue)) 16%, transparent); box-shadow: inset 0 -3px 0 var(--c, var(--blue)); } }
@keyframes lc-rotulo { to { opacity: 1; transform: none; } }
.lc-liga .lc-tok .lc-tok-t, .lc-ad-linha:first-child .lc-tok .lc-tok-t { background: color-mix(in srgb, var(--c, var(--blue)) 16%, transparent); box-shadow: inset 0 -3px 0 var(--c, var(--blue)); }
.lc-liga .lc-tok .lc-tok-tag, .lc-ad-linha:first-child .lc-tok .lc-tok-tag { opacity: 1; transform: none; }
.lc-pop .lc-tok-t { font-weight: 800; color: var(--c, var(--coral)); box-shadow: none !important; background: none !important; }
.rodando .lc-pop { animation: lc-pop .5s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
@keyframes lc-pop { from { opacity: 0; transform: scale(.2); } }
/* junta: a + a = à */
.lc-junta { grid-template-columns: repeat(5, auto); justify-content: center; align-items: center; gap: 10px 12px; }
.lc-junta .lc-junta-ex, .lc-junta .lc-rever { grid-column: 1 / -1; }
.lc-junta-ex { margin: 4px 0 0; text-align: center; font-size: 15.5px; }
.lc-chip { display: grid; justify-items: center; gap: 2px; min-width: 70px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); }
.lc-chip b { font: 800 30px/1 var(--font-serif); }
.lc-chip small { font: 600 10.5px var(--font-mono); color: var(--muted); }
.lc-chip.ca b { color: var(--blue); } .lc-chip.cb b { color: var(--teal); }
.lc-chip.cr { background: color-mix(in srgb, var(--tema) 16%, var(--surface)); box-shadow: 0 0 0 2px var(--tema); }
.lc-chip.cr b { color: var(--tema); }
.lc-op { font: 800 22px var(--font-serif); color: var(--muted); }
.rodando .lc-chip.ca { animation: lc-junta-a 1.4s cubic-bezier(.5, 0, .2, 1) .2s both; }
.rodando .lc-chip.cb { animation: lc-junta-b 1.4s cubic-bezier(.5, 0, .2, 1) .2s both; }
.rodando .lc-mais { animation: lc-some 1.4s ease .2s both; }
.rodando .lc-chip.cr, .rodando .lc-igual { animation: lc-surge .6s cubic-bezier(.34, 1.56, .64, 1) 1.35s both; }
.rodando .lc-junta-ex { animation: lc-sobe .5s ease 1.8s both; }
@keyframes lc-junta-a { 0% { transform: translateX(-26px); opacity: 0; } 25% { transform: none; opacity: 1; } 70% { transform: translateX(22px); } 100% { transform: none; } }
@keyframes lc-junta-b { 0% { transform: translateX(26px); opacity: 0; } 25% { transform: none; opacity: 1; } 70% { transform: translateX(-22px); } 100% { transform: none; } }
@keyframes lc-some { 0%, 30% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes lc-surge { from { opacity: 0; transform: scale(.4); } }
@media (max-width: 420px) { .lc-chip { min-width: 54px; padding: 8px; } .lc-chip b { font-size: 24px; } .lc-junta { gap: 8px 6px; } }
/* troca: a palavra que muda */
.lc-troca { gap: 14px; }
.lc-troca-linha { display: grid; gap: 4px; animation: lc-sobe .45s ease var(--d, 0s) both; }
.lc-frase { font-size: 18px; font-weight: 600; line-height: 1.5; }
.lc-flip { display: inline-grid; vertical-align: bottom; max-width: 100%; }
.lc-flip > span { grid-area: 1 / 1; padding: 0 6px; border-radius: 8px; background: color-mix(in srgb, var(--tema) 14%, transparent); color: var(--tema); font-weight: 800; }
.rodando .lc-flip .v1 { animation: lc-flip-1 3.6s ease-in-out calc(var(--d, 0s) + .6s) infinite both; }
.rodando .lc-flip .v2 { animation: lc-flip-2 3.6s ease-in-out calc(var(--d, 0s) + .6s) infinite both; }
.lc-flip .v2 { opacity: 0; }
@keyframes lc-flip-1 { 0%, 40% { opacity: 1; transform: none; } 50%, 90% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes lc-flip-2 { 0%, 40% { opacity: 0; transform: translateY(8px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }
.lc-nota { display: inline-flex; align-items: flex-start; gap: 5px; font-size: 13.5px; color: var(--muted); }
.lc-nota .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.lc-troca-linha.sim .lc-nota .icon { color: var(--teal); } .lc-troca-linha.nao .lc-nota .icon { color: var(--coral); }
/* liga: setas entre termos */
.lc-liga { padding-top: 26px; }
.lc-setas { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.lc-seta { fill: none; stroke: var(--c, var(--blue)); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rodando .lc-seta { animation: lc-traco .7s ease var(--d, 0s) forwards; }
@keyframes lc-traco { to { stroke-dashoffset: 0; } }
.lc-seta-ponta { fill: var(--c, var(--blue)); opacity: 0; }
.lc-seta-rot { fill: var(--c, var(--blue)); font: 600 11px var(--font-mono); opacity: 0; }
.rodando .lc-seta-ponta, .rodando .lc-seta-rot { animation: lc-rotulo .3s ease calc(var(--d, 0s) + .6s) forwards; }
.lc-seta.cor-azul, .lc-seta-ponta.cor-azul, .lc-seta-rot.cor-azul { --c: var(--blue); }
/* lista que aparece item a item */
.lc-lista { gap: 8px; }
.lc-lista-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.5; }
.rodando .lc-lista-item, .lc-lista:not([data-lc-anim]) .lc-lista-item { animation: lc-sobe .45s cubic-bezier(.22, .61, .36, 1) var(--d, 0s) both; }
.lc-lista-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: color-mix(in srgb, var(--tema) 14%, transparent); color: var(--tema); font: 800 13px var(--font-serif); }
.lc-lista-n .icon { width: 15px; height: 15px; }
/* antes e depois */
.lc-ad { gap: 8px; }
.lc-ad-linha { display: grid; gap: 2px; }
.lc-ad-rot { font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lc-ad-seta { display: flex; align-items: center; gap: 8px; color: var(--tema); font-size: 13.5px; font-weight: 700; }
.lc-ad-seta .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.rodando .lc-ad-seta { animation: lc-sobe .4s ease .4s both; }
.rodando .lc-ad-depois { animation: lc-sobe .5s ease .7s both; }
/* Exemplo resolvido */
.lc-ex-enun { padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); font-size: 16px; line-height: 1.55; font-weight: 600; }
.lc-ex-ops { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lc-ex-ops li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14.5px; line-height: 1.45; transition: background .3s, box-shadow .3s; }
.lc-ex-ops li > span:first-child { font: 800 13px var(--font-serif); color: var(--muted); }
.lc-ex-ops li.certa { background: color-mix(in srgb, var(--teal) 16%, var(--surface)); box-shadow: inset 0 0 0 2px var(--teal); }
.lc-passos { display: grid; gap: 8px; }
.lc-passo { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.55; }
.lc-passo-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tema); color: #fff; font: 800 13px var(--font-serif); }
.lc-passo.aparece, .lc-resp.aparece { animation: lc-sobe .4s cubic-bezier(.22, .61, .36, 1) both; }
.lc-resp { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--teal) 14%, var(--surface)); color: var(--ink); font-size: 15.5px; }
.lc-resp .icon { width: 20px; height: 20px; color: var(--teal); flex: none; }
.lc-prox-passo { justify-self: start; }
/* Pegadinhas */
.lc-peg { display: grid; gap: 10px; }
.lc-peg-item { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.rodando .lc-peg-item { animation: lc-sobe .45s ease var(--d, 0s) both; }
.lc-peg-par { display: grid; gap: 4px; }
.lc-errado, .lc-certo { display: flex; gap: 6px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.lc-errado { color: var(--muted); }
.lc-errado .icon { color: var(--coral); }
.lc-certo { font-weight: 700; }
.lc-certo .icon { color: var(--teal); }
.lc-errado .icon, .lc-certo .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.rodando .lc-errado { animation: lc-risca .5s ease calc(var(--d, 0s) + .35s) both; }
@keyframes lc-risca { to { text-decoration: line-through; text-decoration-color: var(--coral); } }
.rodando .lc-certo { animation: lc-sobe .4s ease calc(var(--d, 0s) + .6s) both; }
.lc-peg-item small { color: var(--muted); font-size: 13px; }
/* Teste */
.lc-teste { display: grid; gap: 8px; }
.lc-teste-op { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font: 600 15px/1.4 var(--font-sans); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.lc-teste-op > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--surface-2); font: 800 13px var(--font-serif); color: var(--muted); }
.lc-teste-op:hover:not(:disabled) { border-color: var(--tema); transform: translateY(-1px); }
.lc-teste-op.certa { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, var(--surface)); }
.lc-teste-op.certa > span:first-child { background: var(--teal); color: #fff; }
.lc-teste-op.errada { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--surface)); animation: lc-treme .4s ease; }
.lc-teste-op.errada > span:first-child { background: var(--coral); color: #fff; }
.lc-teste-op:disabled { cursor: default; }
@keyframes lc-treme { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.lc-teste-fb { padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; animation: lc-sobe .35s ease both; }
.lc-teste-fb.ok { background: color-mix(in srgb, var(--teal) 14%, var(--surface)); }
.lc-teste-fb.erro { background: color-mix(in srgb, var(--coral) 12%, var(--surface)); }
/* "Reduzir animações" do app: tudo já no estado final */
html.reduce-motion .licao *, html.reduce-motion .licao *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
html.reduce-motion .lc-flip .v2 { display: none; }

/* Botão "Lição" ao lado do nome do assunto na Trilha */
.trilha-assunto { display: flex; align-items: center; justify-content: center; gap: 10px; }
.trilha-licao-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--tema-trilha, var(--blue)) 40%, var(--border)); background: var(--surface); color: var(--tema-trilha, var(--blue)); font: 700 11.5px var(--font-sans); letter-spacing: .02em; cursor: pointer; text-transform: none; }
.trilha-licao-btn .icon { width: 13px; height: 13px; }
.trilha-licao-btn.vista { color: var(--muted); }
.trilha-licao-btn:hover { border-color: var(--tema-trilha, var(--blue)); }
.trilha-res-licao { margin-top: 2px; }
/* Lições: animações de matemática (conta, barra, grade, venn, figura) */
.lc-conta { gap: 6px; font-family: var(--font-mono); }
.lc-conta-tit { font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lc-conta-linha { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.rodando .lc-conta-linha { animation: lc-sobe .45s cubic-bezier(.22, .61, .36, 1) var(--d, 0s) both; }
.lc-conta-t { font: 500 16.5px/1.45 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lc-conta-t .lc-mark { font-weight: 700; }
.lc-conta-nota { font: 500 12.5px var(--font-sans); color: var(--muted); }
.lc-barras { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.lc-barra-linha { display: contents; } /* rótulos, trilhos e valores alinhados entre as linhas */
.lc-barras > :not(.lc-barra-linha) { grid-column: 1 / -1; }
.lc-barra-rot { max-width: 9.5em; }
.lc-barra-rot { font-weight: 700; }
.lc-barra-trilho { height: 14px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.lc-barra-trilho i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--c, var(--blue)); transform-origin: left; }
.rodando .lc-barra-trilho i { animation: lc-enche .8s cubic-bezier(.22, .61, .36, 1) var(--d, 0s) both; }
@keyframes lc-enche { from { transform: scaleX(0); } }
.lc-barra-val { font: 600 13px var(--font-mono); font-variant-numeric: tabular-nums; }
.lc-bolas { display: grid; grid-template-columns: repeat(var(--cols, 6), 22px); gap: 8px; justify-content: center; padding: 4px 0; }
.lc-bolas i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .14); }
.rodando .lc-bolas i { animation: lc-pop .4s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
.rodando .lc-bolas i.nfav { animation: lc-pop .4s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both, lc-apaga .5s ease var(--fim, 1.5s) forwards; }
@keyframes lc-apaga { to { opacity: .22; transform: scale(.82); } }
.lc-grade-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 13px; color: var(--muted); }
.lc-grade-leg span { display: inline-flex; align-items: center; gap: 5px; }
.lc-grade-leg i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.lc-grade-res { margin: 0; text-align: center; font-size: 15.5px; font-weight: 600; }
.rodando .lc-grade-res { animation: lc-sobe .4s ease calc(var(--fim, 1.5s) + .3s) both; }
.lc-venn svg, .lc-figura svg { width: 100%; height: auto; display: block; overflow: visible; }
.lc-venn-u { fill: none; stroke: var(--border); stroke-width: 1.5; }
.lc-venn-c { fill: color-mix(in srgb, var(--c) 14%, transparent); stroke: var(--c); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lc-venn-c.ca, .lc-venn-rot.ca, .lc-venn-n.ca { --c: var(--blue); } .lc-venn-c.cb, .lc-venn-rot.cb, .lc-venn-n.cb { --c: var(--teal); }
.rodando .lc-venn-c { animation: lc-traco .9s ease .1s forwards; }
.rodando .lc-venn-c.cb { animation-delay: .4s; }
.lc-venn-rot { font: 700 13px var(--font-sans); fill: var(--c); }
.lc-venn-n { font: 800 22px var(--font-serif); fill: var(--c, var(--ink)); opacity: 0; }
.lc-venn-n.amb { fill: var(--tema); } .lc-venn-n.fora { fill: var(--coral); }
.lc-venn-fora { font: 600 12px var(--font-sans); fill: var(--muted); opacity: 0; }
.lc-venn-tot { font: 600 12px var(--font-mono); fill: var(--muted); }
.rodando .lc-venn-n, .rodando .lc-venn-fora { animation: lc-rotulo .4s ease var(--d, 0s) forwards; }
.lc-fig-forma { fill: color-mix(in srgb, var(--tema) 0%, transparent); stroke: var(--tema); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rodando .lc-fig-forma { animation: lc-traco 1s ease .1s forwards, lc-preenche .6s ease 1.1s forwards; }
@keyframes lc-preenche { to { fill: color-mix(in srgb, var(--tema) 14%, transparent); } }
.lc-fig-raio { stroke: var(--coral); stroke-width: 2.5; stroke-dasharray: 5 4; opacity: 0; }
.lc-fig-rot { font: 700 14px var(--font-mono); fill: var(--ink); opacity: 0; }
.lc-fig-centro { font: 800 17px var(--font-serif); fill: var(--tema); opacity: 0; }
.rodando .lc-fig-raio, .rodando .lc-fig-rot { animation: lc-rotulo .4s ease 1s forwards; }
.rodando .lc-fig-centro { animation: lc-rotulo .5s ease 1.6s forwards; }
html.reduce-motion .lc-venn-c, html.reduce-motion .lc-fig-forma { stroke-dashoffset: 0; }
html.reduce-motion .lc-venn-n, html.reduce-motion .lc-venn-fora, html.reduce-motion .lc-fig-rot, html.reduce-motion .lc-fig-centro, html.reduce-motion .lc-fig-raio { opacity: 1; }
.lc-grade .lcb-azul { --c: #3B82F6; } .lc-grade .lcb-vermelha { --c: #E5484D; } .lc-grade .lcb-verde { --c: #22A45D; }
.lc-grade .lcb-amarela { --c: #F2B705; } .lc-grade .lcb-roxa { --c: #8B5CF6; } .lc-grade .lcb-laranja { --c: #F97316; }
.lc-conta-t .lc-mark { display: inline-block; color: var(--tema); background: color-mix(in srgb, var(--tema) 16%, transparent); }
.rodando .lc-conta-t .lc-mark { animation: lc-real .55s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0s) + .4s) both; }
@keyframes lc-real { 0% { transform: scale(1); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* tabela (regra de três) */
.lc-tab { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; text-align: center; align-items: center; }
.lc-tab-cab { font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.lc-tab-cel { padding: 9px 4px; border-radius: 12px; background: var(--surface-2); font: 600 17px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.lc-tab-cel .lc-mark { color: var(--tema); background: none; padding: 0; font-weight: 800; }
.rodando .lc-tab-cel { animation: lc-sobe .45s cubic-bezier(.22, .61, .36, 1) var(--d, 0s) both; }
.lc-tab-tag { justify-self: center; padding: 3px 9px; border-radius: 99px; font: 700 12px var(--font-sans); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.rodando .lc-tab-tag { animation: lc-pop .4s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
/* pares (frase → tradução) */
.lc-pares { gap: 8px; }
.lc-par { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 15px; line-height: 1.45; }
.lc-par-a { color: var(--ink); }
.lc-par-b { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--tema); }
.lc-par-b .icon { width: 15px; height: 15px; flex: none; }
.lc-par small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.rodando .lc-par { animation: lc-sobe .45s cubic-bezier(.22, .61, .36, 1) var(--d, 0s) both; }
.rodando .lc-par-b { animation: lc-entra-esq .45s cubic-bezier(.22, .61, .36, 1) calc(var(--d, 0s) + .45s) both; }
/* seq (sequências) */
.lc-seq-fila { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; row-gap: 12px; padding-top: 4px; }
.lc-seq-t { display: grid; justify-items: center; gap: 3px; margin: 0 3px; }
.lc-seq-t b { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border-radius: 13px; background: var(--surface-2); border: 2px solid var(--border); font: 800 18px var(--font-serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.lc-seq-t.tem-cor b { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--c); }
.lc-seq-t small { font: 700 10.5px var(--font-mono); letter-spacing: .04em; color: var(--c, var(--muted)); text-transform: uppercase; }
.lc-seq-salto { display: grid; justify-items: center; width: 34px; margin: -4px -4px 0; color: var(--c); }
.lc-seq-salto b { font: 800 13px var(--font-mono); line-height: 1; }
.lc-seq-salto svg { width: 30px; height: 12px; overflow: visible; }
.lc-seq-salto path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; }
.lc-seq-fim { align-self: center; margin: 0 2px 0 6px; font: 800 18px var(--font-serif); color: var(--muted); }
.rodando .lc-seq-t, .rodando .lc-seq-fim { animation: lc-pop .4s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
.rodando .lc-seq-salto b { animation: lc-sobe .35s ease calc(var(--d, 0s) + .15s) both; }
.rodando .lc-seq-salto path { animation: lc-desenha .4s ease var(--d, 0s) both; }
@keyframes lc-desenha { from { stroke-dashoffset: 1; } }
/* escada (unidades) */
.lc-esc { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; align-items: start; }
.lc-esc-d { display: grid; place-items: center; height: 34px; margin-top: calc(var(--i) * 11px); border-radius: 9px; background: var(--surface-2); border-bottom: 3px solid var(--border); font: 700 13px var(--font-mono); color: var(--muted); }
.lc-esc-d.fav { background: color-mix(in srgb, var(--tema) 16%, var(--surface)); border-bottom-color: var(--tema); color: var(--tema); }
.rodando .lc-esc-d { animation: lc-cai .4s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
@keyframes lc-cai { from { opacity: 0; transform: translateY(-14px); } }
.lc-esc-leg { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 700 13px var(--font-mono); }
.lc-esc-leg .desce { color: var(--teal); } .lc-esc-leg .sobe { color: var(--coral); }
.rodando .lc-esc-leg { animation: lc-sobe .4s ease 1.3s both; }
.lc-tab.lc-tab-txt { grid-template-columns: auto repeat(var(--resto, 2), minmax(0, 1fr)); } /* 1ª coluna (rótulos) do tamanho do texto */
.lc-tab-txt .lc-tab-cel { font: 600 13.5px/1.35 var(--font-sans); padding: 8px 7px; overflow-wrap: break-word; hyphens: manual; }
/* planilha */
.lc-pl-fx { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.lc-pl-fx b { font: italic 700 14px var(--font-serif); color: var(--muted); }
.lc-pl-fx code { min-width: 0; font: 600 13.5px/1.4 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; background: none; padding: 0; }
.rodando .lc-pl-fx code { animation: lc-digita .9s steps(22) .1s both; }
@keyframes lc-digita { from { clip-path: inset(0 100% 0 0); } }
.lc-pl-grade { display: grid; grid-template-columns: 30px repeat(var(--cols), minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--border); font: 600 13.5px var(--font-mono); }
.lc-pl-grade > span { min-width: 0; padding: 7px 9px; background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
.lc-pl-grade > .lc-pl-cab { background: var(--surface-2); color: var(--muted); font-size: 12px; text-align: center; padding: 5px 4px; }
.lc-pl-cel.acesa { background: color-mix(in srgb, var(--tema) 18%, var(--surface)); box-shadow: inset 0 0 0 2px var(--tema); color: var(--tema); }
.rodando .lc-pl-cel.acesa { animation: lc-acende .45s ease var(--d, 0s) both; }
@keyframes lc-acende { from { background: var(--surface); box-shadow: inset 0 0 0 2px transparent; color: var(--ink); } }
/* Matriz como na prova (anim "matriz"): números, colchetes e diagonais que se riscam */
.lc-matriz svg { width: 100%; justify-self: center; overflow: visible; }
.lc-mz-num { font: 700 20px var(--font-mono); fill: var(--ink); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--surface); stroke-width: 7px; stroke-linejoin: round; }
.lc-mz-num.rep { fill: var(--muted); }
.lc-mz-idx { font: 600 10.5px var(--font-mono); fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.rodando .lc-mz-num, .rodando .lc-mz-idx { animation: lc-fade .35s ease var(--d, 0s) both; }
.lc-mz-colchete { fill: none; stroke: var(--ink); stroke-width: 2; }
.lc-mz-sep { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .6; }
.lc-mz-diag { fill: none; stroke-width: 9; stroke-linecap: round; opacity: .3; stroke-dasharray: 1; }
.lc-mz-diag.soma { stroke: var(--teal); } .lc-mz-diag.sub { stroke: var(--coral); }
.rodando .lc-mz-diag { animation: lc-desenha .5s ease var(--d, 0s) both, lc-mz-brilha 1.1s ease var(--d, 0s) both; }
@keyframes lc-mz-brilha { from { opacity: .9; } to { opacity: .3; } }
.lc-mz-prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.lc-mz-col { display: grid; gap: 4px; align-content: start; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 13%, var(--surface)); }
.lc-mz-col.soma { --c: var(--teal); } .lc-mz-col.sub { --c: var(--coral); }
.lc-mz-cab { font: 700 11px var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.lc-mz-p { font: 600 14px var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-mz-tot { font: 800 14px var(--font-mono); color: var(--c); padding-top: 4px; border-top: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); }
.rodando .lc-mz-p, .rodando .lc-mz-tot { animation: lc-sobe .4s cubic-bezier(.22, .61, .36, 1) var(--d, 0s) both; }
.lc-mz-res { justify-self: center; font: 600 17px var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.lc-mz-res b { padding: 2px 10px; border-radius: 9px; color: var(--tema); background: color-mix(in srgb, var(--tema) 15%, transparent); font-weight: 800; }
.rodando .lc-mz-res { animation: lc-pop .45s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
.lc-pl-res { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.lc-pl-res b { padding: 4px 14px; border-radius: 10px; background: color-mix(in srgb, var(--tema) 15%, transparent); color: var(--tema); font: 800 19px var(--font-mono); }
.rodando .lc-pl-res { animation: lc-pop .45s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
/* blocos (linha do tempo) */
.lc-bl { display: grid; grid-template-columns: auto repeat(var(--cols), minmax(0, 1fr)); gap: 6px; align-items: center; }
.lc-bl-cab { font: 600 11px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; }
.lc-bl-rot { font: 800 12.5px var(--font-sans); color: var(--c); }
.lc-bl-cel { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; align-content: center; min-height: 36px; padding: 4px; border-radius: 10px; background: var(--surface-2); }
.lc-bl-cel i { padding: 2px 5px; border-radius: 6px; background: var(--c); color: #fff; font: 700 10.5px var(--font-mono); font-style: normal; }
.rodando .lc-bl-cel i { animation: lc-pop .35s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
/* classifica (itens em grupos) */
.lc-classifica { container-type: inline-size; }
.lc-cl { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; }
.lc-cl-grupo { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--c) 8%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--c) 35%, transparent); }
.lc-cl-rot { flex-basis: 100%; font: 800 12.5px var(--font-sans); color: var(--c); }
.lc-cl-item { padding: 5px 9px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.rodando .lc-cl-item { animation: lc-cai .4s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
@container (max-width: 380px) { .lc-cl.c3 { grid-template-columns: 1fr; } }
@container (max-width: 240px) { .lc-cl.c2 { grid-template-columns: 1fr; } }
.licao-card { overflow-wrap: break-word; }
.licao-card :is(h3, .lc-txt, .lc-ex-enun, .lc-teste-op, .lc-passo, .lc-resp) { overflow-wrap: anywhere; }
.lc-par-a, .lc-par-b > span { min-width: 0; overflow-wrap: anywhere; }
/* rosa dos ventos */
.lc-rosa svg, .lc-globo svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.lc-rosa-aro { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 1; }
.lc-rosa-g { transform-origin: 110px 110px; }
.lc-rosa-p { fill: color-mix(in srgb, var(--muted) 45%, transparent); stroke: var(--surface); stroke-width: 1; }
.lc-rosa-p.card { fill: color-mix(in srgb, var(--ink) 72%, transparent); }
.lc-rosa-p.fav { fill: var(--tema); }
.lc-rosa-t { font: 700 12px var(--font-mono); fill: var(--muted); }
.lc-rosa-t.card { font: 800 16px var(--font-sans); fill: var(--ink); }
.lc-rosa-t.fav { fill: var(--tema); }
.rodando .lc-rosa-aro { animation: lc-desenha .8s ease both; }
.rodando .lc-rosa-g { animation: lc-gira .9s cubic-bezier(.22, .61, .36, 1) .1s both; }
@keyframes lc-gira { from { opacity: 0; transform: rotate(-140deg) scale(.4); } }
.rodando .lc-rosa-t { animation: lc-fade .35s ease var(--d, 0s) both; }
/* globo */
.lc-gl-terra { fill: color-mix(in srgb, var(--blue) 7%, transparent); stroke: var(--border); stroke-width: 2; stroke-dasharray: 1; }
.lc-gl-fio { fill: none; stroke: color-mix(in srgb, var(--muted) 30%, transparent); stroke-width: 1; }
.lc-gl-eq { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-dasharray: 1; }
.lc-gl-gr { stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 1; }
.lc-gl-lat, .lc-gl-lon { stroke-width: 2; stroke-dasharray: 1; }
.lc-gl-lat { stroke: var(--coral); } .lc-gl-lon { stroke: var(--teal); }
.lc-gl-ponto { fill: var(--tema); stroke: var(--surface); stroke-width: 2.5; }
.lc-gl-rot { font: 700 11.5px var(--font-mono); }
.lc-gl-rot.eq, .lc-gl-rot.lat { fill: var(--coral); } .lc-gl-rot.gr, .lc-gl-rot.lon { fill: var(--teal); }
.lc-gl-np { font: 800 13px var(--font-sans); fill: var(--muted); }
.rodando .lc-gl-terra { animation: lc-desenha .8s ease both; }
.rodando .lc-gl-eq { animation: lc-desenha .7s ease .6s both; }
.rodando .lc-gl-gr { animation: lc-desenha .7s ease 1s both; }
.rodando .lc-gl-rot.eq { animation: lc-fade .3s ease 1s both; } .rodando .lc-gl-rot.gr { animation: lc-fade .3s ease 1.4s both; }
.rodando .lc-gl-ponto { animation: lc-pop .4s cubic-bezier(.34, 1.56, .64, 1) 1.7s both; transform-box: fill-box; transform-origin: center; }
.rodando .lc-gl-lat { animation: lc-desenha .5s ease 2s both; } .rodando .lc-gl-rot.lat { animation: lc-fade .3s ease 2.3s both; }
.rodando .lc-gl-lon { animation: lc-desenha .5s ease 2.5s both; } .rodando .lc-gl-rot.lon { animation: lc-fade .3s ease 2.8s both; }
/* linha do tempo */
.lc-tempo { gap: 12px; }
.lc-tp { position: relative; display: grid; grid-template-columns: var(--tp-col, 52px) minmax(0, 1fr); gap: 10px; align-items: baseline; padding-left: 20px; }
.lc-tp::before { content: ""; position: absolute; left: 1px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--tema); box-sizing: border-box; }
.lc-tp.fav::before { background: var(--tema); }
.lc-tp::after { content: ""; position: absolute; left: 5.5px; top: 18px; bottom: -14px; width: 2px; background: color-mix(in srgb, var(--tema) 30%, transparent); }
.lc-tp:last-of-type::after { display: none; }
.lc-tp b { font: 800 15px var(--font-mono); color: var(--tema); font-variant-numeric: tabular-nums; }
.lc-tp span { font-size: 14.5px; line-height: 1.45; }
.rodando .lc-tp { animation: lc-sobe .45s cubic-bezier(.22, .61, .36, 1) var(--d, 0s) both; }
.lc-rosa-c { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }

/* =================================================================
   Trilha como página inicial: saudação e cartão "Hoje"
   ================================================================= */
.ini-anel .marca { stroke: #fff; }
.trilha-ola .page-title { font-size: 28px; }
.trilha-page .dsf-aviso { margin: 0 0 14px; }
/* Cartão "Hoje": dois números (meta e sequência) e um botão só. */
.ini-hoje { display: grid; gap: 12px; padding: 14px; margin-bottom: 18px; }
.ini-hoje-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ini-hoje-num { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.ini-hoje-num > span:last-child { display: grid; min-width: 0; line-height: 1.2; }
.ini-hoje-num strong { font: 800 17px var(--font-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ini-hoje-num small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-hoje .ini-anel { width: 38px; height: 38px; flex: none; }
.ini-hoje .ini-anel .fundo { stroke: color-mix(in srgb, var(--muted) 22%, transparent); }
.ini-hoje .ini-anel .valor { stroke: var(--gold); }
.ini-hoje .ini-anel.is-cheio .valor { stroke: var(--teal); }
.ini-hoje .ini-anel.is-cheio .marca { stroke: var(--teal); }
.ini-hoje .ini-anel text { fill: var(--ink); font: 800 15px var(--font-sans); }
.ini-hoje .streak-flame-wrap { width: 38px; height: 38px; margin: 0; flex: none; }
.ini-hoje .streak-flame-svg { width: 30px; height: 36px; }
.ini-hoje .streak-flame-wrap.is-apagada { filter: saturate(.45); opacity: .55; }
.ini-hoje-treino { width: 100%; justify-content: center; }
.ini-hoje-ok { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--teal-soft); color: var(--teal); }
.ini-hoje-ok > .icon-slot .icon { width: 22px; height: 22px; }
.ini-hoje-ok > span:not(.icon-slot) { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.ini-hoje-ok > .icon-slot { flex: none; }
.ini-hoje-ok strong { color: var(--ink); font-size: 14px; }
.ini-hoje-ok small { color: var(--muted); font-size: 12px; }
.ini-hoje-ok .ini-link { flex: none; }
.ini-hoje-plano { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 2px 0 0; border: 0; background: none; color: var(--muted); font: 500 12.5px/1.35 var(--font-sans); cursor: pointer; }
.ini-hoje-plano strong { color: var(--ink); }
.ini-hoje-plano:hover { color: var(--ink); }
.ini-hoje-plano .icon-slot { color: var(--blue); }
.ini-hoje-plano .icon { width: 15px; height: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 360px) {
  .ini-hoje .ini-anel, .ini-hoje .streak-flame-wrap { width: 32px; height: 32px; }
  .ini-hoje-num strong { font-size: 15px; }
  /* Telas bem estreitas: só o avatar no botão do perfil, para o topo caber. */
  .profile-mini-btn > span.profile-mini-label { display: none; }
  .profile-mini-btn { padding: 3px; }
}
.trilha-unidade + .trilha-titulos { margin-top: 28px; }

/* =================================================================
   Figuras das questões (js/figuras.js): gráficos, planilhas e desenhos.
   As cores seguem o tema (claro ou escuro).
   ================================================================= */
.q-fig {
  margin: -6px 0 20px; padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); max-width: 100%; overflow: hidden;
}
.q-fig-titulo { font-weight: 700; font-size: 14.5px; line-height: 1.35; margin: 0 0 10px; }
.q-fig-titulo small { font-weight: 500; font-size: 12px; color: var(--muted); }
.q-fig-fonte { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.qf-linha { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.qf-cheia { fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
.qf-clara { fill: color-mix(in srgb, var(--muted) 55%, var(--surface)); stroke: currentColor; stroke-width: 1.2; }
.qf-vazada { fill: var(--surface); stroke: currentColor; stroke-width: 1.4; }
.qf-txt { fill: currentColor; font-family: var(--font-sans); font-size: 13px; }
.qf-txt-g { fill: currentColor; font-family: var(--font-sans); font-size: 17px; }
.qf-grade { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1; stroke-dasharray: 5 4; }
.qf-grade-menor { stroke: color-mix(in srgb, var(--ink) 25%, transparent); stroke-width: .8; stroke-dasharray: 3 3; }
.qf-eixo { stroke: currentColor; stroke-width: 1.3; }
.q-fig-svg, .q-fig-desenho svg { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; }
.q-fig-desenho { margin: 0 auto; }
.q-fig-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.q-fig-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.qf-amostra { width: 14px; height: 14px; border-radius: 3px; border: 1.4px solid var(--ink); display: inline-block; }
.qf-amostra-cheia { background: var(--ink); }
.qf-amostra-clara { background: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.qf-amostra-vazada { background: var(--surface); }

.q-fig-barras { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.q-fig-barra-rot { font-size: 13.5px; text-align: right; white-space: nowrap; }
.q-fig-barra-trilho { display: flex; align-items: center; gap: 7px; min-width: 0; border-left: 1.5px solid var(--ink); }
.q-fig-barra {
  display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; height: 30px; padding: 0 8px;
  border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--muted) 55%, var(--surface)); color: var(--ink);
}
.q-fig-barra.is-maior { background: var(--ink); color: var(--surface); }
.q-fig-barra-trilho b { font-family: var(--font-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }

.q-planilha-rolo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.q-planilha { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.q-planilha th, .q-planilha td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; white-space: nowrap; }
.q-planilha thead th, .q-planilha tbody th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12.5px; }
.q-planilha tbody th { width: 1%; }
.q-planilha td { min-width: 28px; }
.q-planilha tr.is-negrito td { font-weight: 700; }
.q-pl-canto { background: var(--surface-2); }

.q-fig-desenhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 10px 6px; }
.q-fig-desenho-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.q-fig-desenho-item svg { width: 100%; max-width: 104px; height: auto; display: block; }
.q-fig-desenho-item span { font-size: 12px; font-weight: 700; color: var(--muted); font-family: var(--font-mono); }

.option-fig { display: block; margin-top: 6px; color: var(--ink); }
.option-fig svg { display: block; width: 84px; height: auto; }

.review-item .q-fig, .qdia-gabarito .q-fig, .scratch-ref .q-fig { margin: 4px 0 12px; }
@media (max-width: 600px) {
  .q-fig { padding: 12px 12px 10px; }
  .q-fig-barra-rot { font-size: 12.5px; }
  .q-fig-tipo-planilha { padding: 10px 8px; }
  .q-planilha { font-size: 11.5px; }
  .q-planilha th, .q-planilha td { padding: 5px 3px; }
  .q-fig-barra { height: 27px; }
}

/* =================================================================
   Topo (out/2026): marca do Pontua à esquerda no celular, botões à
   direita; selo Premium dourado no lugar da pílula de energia.
   ================================================================= */
.topbar-marca { display: none; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.topbar-marca .brand-seal { width: 32px; height: 32px; border-radius: 10px; font-size: 17px; box-shadow: 0 4px 12px rgba(124, 92, 255, .35); }
.topbar-marca-nome { font: 800 18px var(--font-serif); letter-spacing: -.01em; }
.topbar-marca:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 10px; }
@media (max-width: 720px) {
  .topbar { gap: 10px; }
  .topbar-marca { display: inline-flex; flex: none; }
  .topbar-actions { margin-left: auto; }
}
@media (max-width: 480px) {
  /* Sem conta, o botão "Entrar" faz o papel do perfil: o avatar sai para o topo caber. */
  .topbar.is-anon .profile-mini { display: none; }
  /* O avatar já diz "perfil": sem o texto, tudo cabe numa linha ao lado da marca. */
  .profile-mini-btn > span.profile-mini-label { display: none; }
  .profile-mini-btn { padding: 3px; }
}
@media (max-width: 350px) {
  .topbar-marca-nome { display: none; }
}

.energia-pill.is-premium {
  position: relative; overflow: hidden; gap: 6px; padding: 7px 12px 7px 10px; color: #FFD98A;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #2A1B52, #3A1D4F) padding-box, linear-gradient(135deg, #FFE08A, #FF9F6B 50%, #B48CFF) border-box;
  box-shadow: 0 4px 14px rgba(255, 170, 80, .18);
}
.energia-pill.is-premium::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); animation: premium-brilho 5s ease-in-out infinite; pointer-events: none;
}
@keyframes premium-brilho { 0%, 70% { left: -60%; } 100% { left: 130%; } }
html.reduce-motion .energia-pill.is-premium::after { animation: none; display: none; }
.energia-pill.is-premium .energia-icone { width: 18px; height: 18px; filter: drop-shadow(0 0 4px rgba(255, 190, 80, .55)); }
.energia-inf { width: 22px; height: 11px; flex: none; }
.energia-pill-rotulo { font: 800 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #FFE7B0; }
@media (max-width: 720px) {
  .energia-pill-rotulo { display: none; }
  .energia-pill.is-premium { padding: 7px 10px 7px 9px; gap: 4px; }
}
html[data-theme="light"] .energia-pill.is-premium { box-shadow: 0 4px 14px rgba(124, 92, 255, .22); }

/* Marca do PontuaXP (js/marca.js) */
.marca-pontua { display: block; flex: none; height: auto; max-width: none; filter: drop-shadow(0 4px 10px rgba(110, 50, 240, .35)); }
.marca-xp { color: #8A4DFF; }
:root[data-theme="dark"] .marca-xp { color: #A57BFF; }
.brand-marca { width: 32px; }
.brand-lockup .brand-name { font-weight: 800; letter-spacing: -.01em; }
.side-rail .marca-xp { color: #B08CFF; }
.topbar-marca-ic { width: 28px; }
.apr-marca-ic { width: 32px; }

/* =================================================================
   Chefão: recompensas, faixas do ranking e mensagem da vitória
   ================================================================= */
.chefao-premios { margin-top: 18px; display: grid; gap: 12px; padding: 18px; }
.chefao-premios .section-head { margin: 0; }
.chefao-premios-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chefao-premio-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 11px 13px; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; }
.chefao-premio-rot { display: grid; line-height: 1.25; min-width: 0; }
.chefao-premio-rot strong { font-size: 14px; }
.chefao-premio-rot small { color: var(--muted); font-size: 12px; }
.chefao-premio-itens { display: flex; gap: 10px; font: 700 13px var(--font-mono); white-space: nowrap; }
.chefao-premio-itens > span { display: inline-flex; align-items: center; gap: 4px; }
.chefao-premio-itens .icon-slot, .chefao-premio-itens .energia-icone { width: 14px; height: 14px; }
.chefao-premio-itens > span:first-child { color: var(--gold); }
.chefao-premio-itens > span:last-child { color: var(--blue); }
.chefao-premio-titulo { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; font-size: 13.5px; }
.chefao-premio-linha.faixa-campeao { border-color: color-mix(in srgb, #FF3B3B 45%, transparent); background: color-mix(in srgb, #FF3B3B 8%, var(--surface-2)); }
.chefao-premio-linha.faixa-podio { border-color: color-mix(in srgb, #FFA62B 45%, transparent); background: color-mix(in srgb, #FFA62B 8%, var(--surface-2)); }
.chefao-premio-linha.faixa-top10 { border-color: color-mix(in srgb, #A97BFF 45%, transparent); background: color-mix(in srgb, #A97BFF 8%, var(--surface-2)); }
.chefao-faixa-mini { font-weight: 800; }
.chefao-faixa-mini.faixa-campeao { color: #FF5A5A; } .chefao-faixa-mini.faixa-podio { color: #FF9A1F; } .chefao-faixa-mini.faixa-top10 { color: #A97BFF; }
.chefao-ranking li.pos-1 { background: color-mix(in srgb, #F0B942 14%, var(--surface-2)); }

.chefao-vitoria { position: relative; max-width: 440px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.chefao-vitoria .chefao-arte { width: 104px; height: 104px; margin: 4px auto 0; }
.chefao-vit-x { position: absolute; top: 10px; right: 10px; }
.chefao-vitoria .bau-titulo { margin: 0; }
.chefao-vit-texto { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.chefao-vit-texto strong { color: var(--ink); }
.chefao-faixa { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 800 12px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.chefao-faixa .icon { width: 14px; height: 14px; }
.chefao-faixa.faixa-campeao { background: linear-gradient(135deg, #FF3B3B, #B01226); box-shadow: 0 6px 18px rgba(255, 59, 59, .35); }
.chefao-faixa.faixa-podio { background: linear-gradient(135deg, #FFB347, #FF7A00); box-shadow: 0 6px 18px rgba(255, 140, 0, .3); }
.chefao-faixa.faixa-top10 { background: linear-gradient(135deg, #A97BFF, #7B2FF2); box-shadow: 0 6px 18px rgba(123, 47, 242, .3); }
.chefao-vit-titulos { display: grid; gap: 8px; width: 100%; }
.chefao-vit-titulos > small { color: var(--muted); font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.chefao-vit-titulo { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-weight: 700; }
.chefao-vitoria > .btn { width: 100%; justify-content: center; margin-top: 4px; }

/* =================================================================
   Duelo no mesmo estilo da Loja (out/2026): ícones em quadrado suave da cor
   da marca, seleção com contorno violeta e botões da marca, sem dourado,
   verde-água ou cor de matéria misturados.
   ================================================================= */
.duelo-amigo-ic { background: color-mix(in srgb, var(--blue) 11%, var(--surface)); color: var(--blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); }
.dsf-secao .section-head .duelo-amigo-ic { width: 40px; height: 40px; border-radius: 12px; }
.dsf-secao .section-head .duelo-amigo-ic .icon { width: 20px; height: 20px; }
.chip.duelo-mat { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.duelo-amigo .chip.duelo-mat { background: var(--surface); border: 1.5px solid var(--border); color: var(--ink); }
.duelo-amigo .chip.duelo-mat .icon-slot { color: var(--blue); }
.duelo-amigo .chip.duelo-mat:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); transform: translateY(-1px); }
.duelo-amigo .chip.duelo-mat.selected { background: color-mix(in srgb, var(--blue) 8%, var(--surface)); border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 22%, transparent), 0 10px 22px -16px var(--blue); }
.duelo-cta .chip.duelo-mat.selected { color: #3A23B8; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); }
.duelo-cta .chip.duelo-mat.selected .icon-slot { color: #5B3BE8; }
.duelo-cta-btn { background: #fff; color: #3A23B8; box-shadow: 0 10px 22px -10px rgba(0,0,0,.55); transition: transform .12s ease, box-shadow .12s ease; }
.duelo-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(0,0,0,.6); }
.duelo-cta-btn:active { transform: translateY(1px); box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); }
.duelo-cta-tag { background: rgba(255,255,255,.16); color: #fff; }
.duelo-amigo-btn { background: var(--surface); box-shadow: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.duelo-amigo-btn:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); transform: translateY(-1px); box-shadow: 0 10px 22px -16px var(--blue); }
.duelo-amigo-btn:active { transform: translateY(1px); box-shadow: none; }
.duelo-amigo-btn i, .duelo-amigo-btn .icon-slot .icon { color: var(--blue); }
.duelo-amigo-btn .icon-slot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 11%, var(--surface)); }
.duelo-amigo-btn .icon-slot .icon { width: 21px; height: 21px; }
.dsf-novo { background: linear-gradient(135deg, #7C5CFF, #5A38DE) !important; }
.dsf-amigo.sel { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.dsf-aviso { border-color: color-mix(in srgb, var(--blue) 55%, transparent); background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.dsf-enviado-ic { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue) 55%, color-mix(in srgb, var(--blue) 80%, #000)); }
.dsf-info small.ok { color: var(--blue); }
.chefao-atalho { border: 1px solid var(--border); box-shadow: var(--shadow), inset 4px 0 0 var(--chefe); transition: border-color .15s ease, transform .15s ease; }
.chefao-atalho:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); transform: translateY(-1px); }

/* =================================================================
   Configurações em seções (js/configuracoes.js) e cabeçalho do Perfil:
   lápis para personalizar e engrenagem para as configurações.
   ================================================================= */
.auth-marca { width: 46px; margin: 0 0 12px; }
.perfil-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.perfil-cab > div { min-width: 0; }
.perfil-cfg-btn { flex: none; gap: 7px; margin-top: 4px; border-radius: 14px; }
.perfil-cfg-btn .icon-slot { color: var(--blue); }
@media (max-width: 720px) {
  .perfil-cfg-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .perfil-cfg-btn > span:not(.icon-slot) { display: none; }
  .perfil-cfg-btn .icon { width: 20px; height: 20px; }
}
.profile-header-card .perfil-editar-btn { width: auto; height: 36px; display: inline-flex; gap: 6px; padding: 0 13px 0 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border));
  background: color-mix(in srgb, var(--blue) 9%, var(--surface)); color: var(--blue); font: 700 12.5px var(--font-sans); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.profile-header-card .perfil-editar-btn:hover { background: color-mix(in srgb, var(--blue) 16%, var(--surface)); transform: translateY(-1px); }
.profile-header-card .perfil-editar-btn .icon { width: 16px; height: 16px; }
@media (max-width: 380px) { .profile-header-card .perfil-editar-btn > span:not(.icon-slot) { display: none; } .profile-header-card .perfil-editar-btn { width: 36px; padding: 0; justify-content: center; } }

.cfg-hub { width: min(780px, 100%); padding: 22px 22px 18px; }
.cfg-hub h2 { margin-bottom: 14px; }
.cfg-corpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.cfg-nav { display: grid; gap: 4px; position: sticky; top: 0; }
.cfg-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 14px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.cfg-nav-item:hover { background: var(--surface-2); }
.cfg-nav-item.is-ativa { background: color-mix(in srgb, var(--blue) 9%, var(--surface)); border-color: color-mix(in srgb, var(--blue) 35%, transparent); }
.cfg-nav-item.is-ativa strong { color: var(--blue); }
.cfg-nav-item .cfg-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-nav-item .cfg-seta, .cfg-link .cfg-seta { margin-left: auto; color: var(--muted); flex: none; }
.cfg-nav-item .cfg-seta .icon, .cfg-link .cfg-seta .icon { width: 16px; height: 16px; }
.cfg-link-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent); }
.cfg-link-ic .icon { width: 18px; height: 18px; }
.cfg-nav-item.is-ativa .cfg-link-ic { color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue) 55%, color-mix(in srgb, var(--blue) 80%, #000)); box-shadow: 0 6px 14px -8px var(--blue); }
.cfg-txt { display: grid; min-width: 0; line-height: 1.25; text-align: left; }
.cfg-conteudo { min-width: 0; display: grid; gap: 12px; }
.cfg-secao-tit { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 17px var(--font-serif); }
.cfg-secao-tit .icon-slot { color: var(--blue); }
.cfg-link { width: 100%; border: 0; background: none; color: var(--ink); justify-content: flex-start; gap: 12px; font: inherit; text-align: left; }
.cfg-link:hover { background: color-mix(in srgb, var(--blue) 6%, transparent); }
.cfg-perfil { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.cfg-perfil-av { width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; background: var(--gold-soft); }
.cfg-perfil-av svg { width: 100%; height: 100%; display: block; }
.cfg-perfil strong { font-size: 15px; } .cfg-perfil small { color: var(--muted); font-size: 12.5px; }
.cfg-sair { justify-self: start; gap: 8px; }
.cfg-premium { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, #E09A16 35%, var(--border)); background: color-mix(in srgb, #F2B632 9%, var(--surface)); }
.cfg-premium-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #4A2D00; background: linear-gradient(150deg, #FFE08A, #F2B632 55%, #D48A0C); }
.cfg-premium small { color: var(--muted); font-size: 12.5px; }
.cfg-voltar { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--blue); font: 700 13px var(--font-sans); cursor: pointer; }
.cfg-voltar .icon { width: 16px; height: 16px; }
.cfg-hub .cfg-nota { margin: 0; }
.cfg-hub .cfg-exemplos { margin-top: 0; }
@media (max-width: 720px) {
  .cfg-hub { width: 100%; }
  .cfg-corpo { grid-template-columns: 1fr; }
  .cfg-nav { position: static; }
  .cfg-nav-item { padding: 10px; background: var(--surface-2); border-color: var(--border); }
  .cfg-nav-item.is-ativa { background: var(--surface-2); }
}
@media (max-width: 980px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } }

/* =================================================================
   Duelo (out/2026, 2ª rodada): o elo é o destaque violeta (o mesmo das
   páginas Treinar, Loja e Ranking) e os dois modos são cartões claros iguais.
   ================================================================= */
.duelo-hero { background: linear-gradient(135deg, #6446EC 0%, #3E25B6 52%, #241570 100%); box-shadow: 0 18px 40px rgba(52, 30, 160, .28); isolation: isolate; }
.duelo-hero::before { opacity: 1; inset: auto; left: -120px; bottom: -220px; width: 420px; height: 420px; border-radius: 50%; z-index: -1;
  background-image: repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 2px, transparent 2px 34px); }
.duelo-hero-elo { text-shadow: none; }
.duelo-hero-stats > div { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .12); }
.duelo-hero-stats .icon-slot .icon, .duelo-hero-stats i { color: #FFD98A; }
.duelo-hero-escada { background: rgba(20, 10, 60, .32); }
.duelo-hero-barra span { box-shadow: none; }

.duelo-cta.duelo-modo { color: var(--ink); background: var(--surface); box-shadow: var(--shadow); padding: 20px; gap: 10px; }
.duelo-cta.duelo-modo .duelo-amigo-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--ink); }
.duelo-cta.duelo-modo .duelo-cta-label { color: var(--muted); opacity: 1; }
.duelo-modo .duelo-cta-tag { padding: 3px 9px; background: color-mix(in srgb, var(--blue) 11%, var(--surface)); color: var(--blue); font-size: 10.5px; }
.duelo-modo .duelo-amigo-ic .icon-cheio { width: 22px; height: 22px; }
.duelo-cta.duelo-modo .chip.duelo-mat { background: var(--surface); border: 1.5px solid var(--border); color: var(--ink); transform: none; box-shadow: none; }
.duelo-cta.duelo-modo .chip.duelo-mat .icon-slot { color: var(--blue); }
.duelo-cta.duelo-modo .chip.duelo-mat:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); transform: translateY(-1px); }
.duelo-cta.duelo-modo .chip.duelo-mat.selected { background: color-mix(in srgb, var(--blue) 8%, var(--surface)); border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 22%, transparent), 0 10px 22px -16px var(--blue); }
.duelo-cta.duelo-modo .duelo-cta-btn { margin-top: auto; padding: 14px; border-radius: 14px; font: 800 15px var(--font-sans); color: #fff; background: linear-gradient(135deg, #7C5CFF, #5A38DE); box-shadow: 0 10px 22px -12px rgba(90, 56, 222, .8); }
.duelo-cta.duelo-modo .duelo-cta-btn:hover { transform: translateY(-1px); }
.duelo-cta.duelo-modo .duelo-cta-btn .icon-slot { color: #fff; }
.duelo-cta.duelo-modo .duelo-cta-btn .icon-cheio { width: 18px; height: 18px; }
.duelo-mode-grid { align-items: stretch; }

/* Prêmios do mês (Ranking) em lista: medalha, título e o que se ganha */
.rk-pr-lista { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; gap: 8px; }
/* Aba Duelos: prêmios do mês e o cartão da pessoa, um embaixo do outro. */
.rk-lado { display: grid; gap: 16px; align-content: start; min-width: 0; }
.rk-duelos-visao { margin: 0 0 12px; }
.rk-pr-linha { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; }
.rk-pr-mitico { border-color: color-mix(in srgb, #F4BE3A 45%, transparent); background: color-mix(in srgb, #F4BE3A 9%, var(--surface-2)); }
.rk-pr-pos { display: grid; place-items: center; }
.rk-pr-pos .rk-medalha { width: 28px; height: 35px; }
.rk-pr-pos .top10-pos { width: 28px; height: 28px; font-size: 11px; }
.rk-pr-rot { display: grid; gap: 3px; min-width: 0; }
.rk-pr-rot > strong { font: 500 11px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rk-pr-titulo { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; font-size: 13.5px; }
.rk-pr-titulo .title-fx-wrap { min-width: 0; }
.rk-pr-titulo .rar-chip { flex: none; }
.rk-pr-itens { display: grid; justify-items: end; gap: 4px; }
.rk-pr-moedas { display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px var(--font-mono); color: var(--gold); white-space: nowrap; }
.rk-pr-premium { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 700 11px var(--font-sans); white-space: nowrap; color: #4A2D00; background: linear-gradient(150deg, #FFE08A, #F2B632 60%, #D48A0C); }
.rk-pr-moedas .icon-slot .icon, .rk-pr-premium .icon-slot .icon { width: 13px; height: 13px; }
.rk-aba-ic .icon-cheio { width: 18px; height: 18px; }
.rk-pr-linha { grid-template-columns: 34px minmax(0, 1fr); align-items: start; }
.rk-pr-pos { padding-top: 2px; }
.rk-pr-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rk-pr-cab strong { font: 500 11px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rk-pr-titulo { font-size: 14px; }
.rk-pr-titulo .title-fx-wrap, .rk-pr-titulo .title-fx { white-space: normal; overflow: visible; }
.rk-pr-itens { display: flex; flex-wrap: wrap; align-items: center; justify-items: start; gap: 6px 10px; margin-top: 2px; }

/* Plano: conteúdos do edital */
.plano-edital { display: grid; gap: 8px; margin-top: 6px; }
.plano-ed-materia { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .15s ease, background .15s ease; }
.plano-ed-materia.is-on { border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); background: color-mix(in srgb, var(--blue) 4%, var(--surface)); }
.plano-ed-cab { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; }
.plano-ed-check { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.plano-ed-caixa { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; border: 1.5px solid var(--border); background: var(--surface); color: #fff; }
.plano-ed-materia.is-on .plano-ed-caixa { border-color: var(--blue); background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 72%, #fff), var(--blue)); }
.plano-ed-caixa .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.plano-ed-nome { display: grid; min-width: 0; line-height: 1.25; }
.plano-ed-nome strong { font-size: 14px; }
.plano-ed-nome small { color: var(--muted); font-size: 12px; }
.plano-ed-abrir { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border)); background: var(--surface); color: var(--blue); font: 700 12px var(--font-sans); cursor: pointer; }
.plano-ed-abrir .icon { width: 14px; height: 14px; transition: transform .15s ease; }
.plano-ed-materia.is-aberta .plano-ed-abrir .icon { transform: rotate(90deg); }
.plano-ed-corpo { padding: 2px 12px 12px; display: grid; gap: 8px; border-top: 1px dashed var(--border); }
.plano-ed-atalhos { display: flex; gap: 14px; padding-top: 8px; }
.plano-ed-corpo .plano-chips .chip { font-size: 12.5px; padding: 7px 11px; }
.plano-ed-resumo { display: flex; flex-wrap: wrap; gap: 8px; }
.plano-ed-pill { display: inline-grid; line-height: 1.2; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--blue) 7%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent); }
.plano-ed-pill strong { font-size: 13px; } .plano-ed-pill small { color: var(--muted); font-size: 11.5px; }
.plano-ed-abrir-curto { display: none; }
/* No celular o botão encurta: com "Escolher conteúdos" o nome da matéria ficava por baixo dele. */
@media (max-width: 480px) {
  .plano-ed-abrir { padding: 7px 8px; font-size: 11.5px; }
  .plano-ed-abrir-longo { display: none; }
  .plano-ed-abrir-curto { display: inline; }
}

/* =================================================================
   Duelo (out/2026, 3ª rodada): Duelo rápido como destaque com a arena
   "você VS seu nível" e, ao lado, o cartão do elo no estilo da patente do
   Ranking. Embaixo, Duelar com amigo e o desempenho por matéria.
   ================================================================= */
.duelo-topo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin: 16px 0; align-items: stretch; }
@media (max-width: 900px) { .duelo-topo { grid-template-columns: minmax(0, 1fr); } }

.duelo-cta.duelo-rapido { isolation: isolate; padding: 24px 22px 20px; gap: 12px; color: #fff;
  background: linear-gradient(135deg, #6446EC 0%, #3E25B6 52%, #241570 100%); box-shadow: 0 18px 40px rgba(52, 30, 160, .28); }
.duelo-rapido::before { content: ""; position: absolute; z-index: -1; right: -140px; top: -200px; width: 440px; height: 440px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 2px, transparent 2px 34px); }
.duelo-rapido-cab h2 { margin: 8px 0 4px; font: 900 28px var(--font-serif); color: #fff; }
.duelo-rapido-cab p { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .84); max-width: 46ch; }
.duelo-rapido .duelo-cta-tag { background: rgba(255, 255, 255, .16); color: #fff; }
.duelo-rapido .duelo-cta-label { opacity: .78; }
.duelo-rapido .duelo-cta-btn { margin-top: 4px; }
.duelo-rapido-ganhos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 12px; color: rgba(255, 255, 255, .78); }
.duelo-rapido-ganhos span { display: inline-flex; align-items: center; gap: 5px; }
.duelo-rapido-ganhos .icon { width: 14px; height: 14px; color: #FFD98A; }

/* Arena */
.duelo-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 16px 12px 12px; border-radius: 20px;
  background: radial-gradient(60% 90% at 50% 50%, rgba(255, 255, 255, .14), transparent 70%), rgba(20, 10, 60, .22); border: 1px solid rgba(255, 255, 255, .1); }
.duelo-arena-lado { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.duelo-arena-lado strong { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duelo-arena-av { display: grid; place-items: center; }
.duelo-arena-circ { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 10px 24px -8px rgba(0, 0, 0, .5); }
.duelo-arena-circ svg { width: 100%; height: 100%; display: block; }
.duelo-arena-circ.is-oponente { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); border: 2px dashed rgba(255, 255, 255, .35); animation: duelo-oponente 2.4s ease-in-out infinite; }
.duelo-arena-circ.is-oponente .icon { width: 30px; height: 30px; color: rgba(255, 255, 255, .85); }
@keyframes duelo-oponente { 50% { transform: scale(1.05); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 22px rgba(255, 255, 255, .25); } }
.duelo-arena-vs { position: relative; display: grid; justify-items: center; gap: 2px; padding: 0 4px; }
.duelo-arena-brilho { position: absolute; top: -6px; left: 50%; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 217, 138, .45), transparent 65%); animation: duelo-raio 2.6s ease-in-out infinite; }
.duelo-arena-espadas { position: relative; width: 52px; height: 52px; color: #FFD98A; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); animation: duelo-espadas 2.6s ease-in-out infinite; }
.duelo-arena-espadas path { fill: currentColor; }
@keyframes duelo-espadas { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
.duelo-arena-vs b { position: relative; font: 900 15px var(--font-serif); letter-spacing: .12em; color: #fff; }
html.reduce-motion .duelo-arena-circ.is-oponente, html.reduce-motion .duelo-arena-brilho, html.reduce-motion .duelo-arena-espadas { animation: none; }
@media (max-width: 420px) { .duelo-arena-circ { width: 60px; height: 60px; } .duelo-arena-espadas { width: 44px; height: 44px; } }

/* Cartão do elo (estilo da patente do Ranking) */
.duelo-elo { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 16px; border-radius: 24px; color: #fff;
  background: radial-gradient(70% 45% at 30% 18%, color-mix(in srgb, var(--div-cor) 60%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--div-cor) 30%, #171034) 0%, #140D2E 58%, #0B071D 100%);
  border: 1px solid color-mix(in srgb, var(--div-cor) 50%, transparent); box-shadow: 0 18px 40px -20px var(--div-cor), inset 0 1px 0 rgba(255, 255, 255, .16); }
.duelo-elo-ceu i { position: absolute; z-index: -1; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .6; animation: duelo-estrela 3s ease-in-out infinite; }
.duelo-elo-ceu i:nth-child(1) { top: 14%; left: 72%; } .duelo-elo-ceu i:nth-child(2) { top: 30%; left: 90%; animation-delay: .6s; }
.duelo-elo-ceu i:nth-child(3) { top: 6%; left: 88%; animation-delay: 1.2s; } .duelo-elo-ceu i:nth-child(4) { top: 8%; left: 44%; animation-delay: 1.8s; }
.duelo-elo-ceu i:nth-child(5) { top: 17%; left: 58%; animation-delay: 2.2s; width: 3px; height: 3px; } .duelo-elo-ceu i:nth-child(6) { top: 22%; left: 8%; animation-delay: .9s; }
@keyframes duelo-estrela { 50% { opacity: .15; } }
html.reduce-motion .duelo-elo-ceu i { animation: none; }
.duelo-elo-topo { display: flex; align-items: center; gap: 14px; }
.duelo-elo-emblema { flex: none; display: grid; place-items: center; width: 90px; height: 90px; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--div-cor) 55%, transparent)); }
.duelo-elo-info { display: grid; gap: 3px; min-width: 0; }
.duelo-elo-eyebrow { font: 700 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.duelo-elo-nome { font: 900 30px/1 var(--font-serif); color: color-mix(in srgb, var(--div-cor) 45%, #fff); }
.duelo-elo-pts { font-size: 13px; color: rgba(255, 255, 255, .8); } .duelo-elo-pts b { font-size: 15px; color: #fff; }
.duelo-elo-barra { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.duelo-elo-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--div-cor) 45%, #fff), var(--div-cor)); }
.duelo-elo-falta { margin-top: -4px; font-size: 12px; color: rgba(255, 255, 255, .7); } .duelo-elo-falta b { color: #fff; }
.duelo-elo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.duelo-elo-stats > div { display: grid; justify-items: center; gap: 1px; padding: 9px 4px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .09); text-align: center; }
.duelo-elo-stats .icon { width: 17px; height: 17px; color: #FFD98A; }
.duelo-elo-stats strong { font: 800 16px var(--font-sans); } .duelo-elo-stats small { font-size: 10.5px; color: rgba(255, 255, 255, .65); }
.duelo-elo .duelo-hero-escada { margin-top: auto; background: rgba(0, 0, 0, .25); }
.duelo-elo .rank-track-steps { gap: 2px; }
.duelo-elo .rank-step small { font-size: 9px; }

/* Desempenho por matéria */
.duelo-desempenho { padding: 20px; border-radius: 24px; display: flex; flex-direction: column; gap: 12px; }
.duelo-desempenho .duelo-amigo-head h2 { margin: 0; font: 800 20px var(--font-serif); }
.duelo-desemp-lista { display: grid; gap: 8px; }
.duelo-desemp-linha { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(60px, 34%) 40px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.duelo-desemp-linha.is-vazio { opacity: .7; }
.duelo-desemp-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 11%, var(--surface)); }
.duelo-desemp-ic .icon { width: 18px; height: 18px; }
.duelo-desemp-nome { display: grid; min-width: 0; line-height: 1.2; }
.duelo-desemp-nome strong { font-size: 13.5px; } .duelo-desemp-nome small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duelo-desemp-barra { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.duelo-desemp-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 60%, #fff), var(--blue)); }
.duelo-desemp-linha b { font: 700 12.5px var(--font-mono); text-align: right; }
.duelo-elo .duelo-hero-escada .rank-track-note { display: block; margin: 10px 6px 4px; font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .7); text-align: center; }
.duelo-elo .duelo-hero-escada .rank-track-note strong { color: #fff; }
/* Cartão do elo: como os pontos andam */
.duelo-elo-regras { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 5px; text-align: left; }
.duelo-elo-regras li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.duelo-elo-regras .icon { flex: none; width: 16px; height: 16px; color: rgba(255, 255, 255, .6); }
.duelo-elo-regras .icon-slot { flex: none; display: inline-grid; }
.duelo-elo-regras li > span:not(.icon-slot) { flex: 1; min-width: 0; }
.duelo-elo-regras b { flex: none; font: 700 12px var(--font-sans); color: rgba(255, 255, 255, .7); }
.duelo-elo-regras b.is-ganho { color: #7CE3B0; }
.duelo-elo-regras b.is-perda { color: #FF9C9C; }
/* No celular o cartão já fica empilhado, sem espaço sobrando: as regras saem para não alongar a página. */
@media (max-width: 900px) { .duelo-elo-regras { display: none; } }

/* ===== Resultado: gráfico em círculo (acertos / erros / em branco) =====
   Cores conferidas no validador de paleta (daltonismo + contraste); a legenda
   sempre traz rótulo e número, então a cor nunca é a única pista. */
:root { --res-acerto: #039580; --res-erro: #F589B6; --res-branco: #C9C4E4; --res-trilho: var(--surface-2); }
:root[data-theme="dark"] { --res-acerto: #039580; --res-erro: #E25A98; --res-branco: #4A4272; --res-trilho: rgba(255, 255, 255, .06); }
.res-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 24px 28px; }
.res-grafico { display: flex; align-items: center; gap: 26px; flex: 1 1 380px; min-width: 0; }
.res-donut { position: relative; flex: none; width: 168px; height: 168px; }
.res-donut svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.res-donut circle { fill: none; stroke-width: 13; }
.res-donut-trilho { stroke: var(--res-trilho); }
.res-donut-fatia { stroke-dasharray: var(--len) 400; animation: res-fatia .9s cubic-bezier(.2, .8, .2, 1) var(--atraso, 0s) both; transition: stroke-width .18s, opacity .18s; cursor: pointer; }
.res-donut-fatia.is-acerto { stroke: var(--res-acerto); }
.res-donut-fatia.is-erro { stroke: var(--res-erro); }
.res-donut-fatia.is-branco { stroke: var(--res-branco); }
@keyframes res-fatia { from { stroke-dasharray: 0 400; } }
.res-grafico.tem-foco .res-donut-fatia { opacity: .35; }
.res-grafico.tem-foco .res-donut-fatia.is-ativa { opacity: 1; stroke-width: 16; }
.res-donut-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.res-donut-centro strong { font: 700 36px/1 var(--font-serif); color: var(--ink); }
.res-donut-centro span { margin-top: 4px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.res-legenda { flex: 1; min-width: 0; max-width: 400px; display: grid; gap: 6px; }
.res-leg-linha { display: grid; grid-template-columns: auto 1fr auto 44px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); cursor: pointer; outline: none; transition: box-shadow .15s, opacity .15s; }
.res-leg-linha:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.res-grafico.tem-foco .res-leg-linha { opacity: .55; }
.res-grafico.tem-foco .res-leg-linha.is-ativa { opacity: 1; }
.res-leg-cor { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; }
.res-leg-cor .icon-slot, .res-leg-cor .icon { width: 13px; height: 13px; }
.res-leg-cor.is-acerto { background: var(--res-acerto); }
.res-leg-cor.is-erro { background: var(--res-erro); }
.res-leg-cor.is-branco { background: var(--res-branco); }
.res-leg-nome { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.res-leg-linha strong { font: 700 16px var(--font-sans); color: var(--ink); }
.res-leg-linha small { font: 600 12px var(--font-mono); color: var(--muted); text-align: right; }
.res-leg-total { padding: 2px 12px 0; font-size: 12px; color: var(--muted); }
.res-ganhos { display: flex; flex-direction: column; gap: 8px; }
.res-ganho { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font: 700 13px var(--font-mono); white-space: nowrap; }
.res-ganho .icon-slot, .res-ganho .icon { width: 15px; height: 15px; }
.res-ganho.is-xp { color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent); }
.res-ganho.is-moedas { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
/* Fim do modo rápido: o gráfico fica centralizado no cartão */
.flash-finish .res-grafico { justify-content: center; margin: 16px auto 6px; max-width: 460px; text-align: left; }
@media (max-width: 600px) {
  .res-hero { padding: 20px 16px; }
  .res-grafico { flex-direction: column; gap: 16px; flex-basis: 100%; }
  .res-legenda { width: 100%; max-width: none; }
  .res-ganhos { flex-direction: row; justify-content: center; width: 100%; }
}
html.reduce-motion .res-donut-fatia { animation: none; }
@media (prefers-reduced-motion: reduce) { .res-donut-fatia { animation: none; } }
.res-ganhos.is-linha { flex-direction: row; justify-content: center; margin: 4px 0 2px; }

/* Praticar: linha do plano de prova no rodapé do cartão "Treino de hoje"
   (ocupa a largura toda, abaixo do texto e dos números da meta e da sequência). */
.ini-treino-plano { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px;
  background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .86); font: 500 13.5px/1.35 var(--font-sans); text-align: left; cursor: pointer; transition: background .15s; }
.ini-treino-plano:hover { background: rgba(255, 255, 255, .15); }
.ini-treino-plano:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ini-treino-plano strong { color: #fff; }
.ini-treino-plano span { flex: 1; min-width: 0; }
.ini-treino-plano .icon-slot, .ini-treino-plano .icon { flex: none; width: 17px; height: 17px; }
.ini-treino-plano .icon-slot:last-child { opacity: .7; }

/* Painel /admin: aprovação do resultado do mês */
.admin-temp-txt { margin: 0; font-size: 13px; color: var(--muted); }
.admin-temp-ok { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--teal); font-weight: 600; }
.admin-temp-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.admin-temp-lista li { display: flex; gap: 10px; padding: 7px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.admin-temp-tabela { display: grid; gap: 6px; }
.admin-temp-linha { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); }
.admin-temp-linha > b { font: 800 14px var(--font-sans); }
.admin-temp-linha.is-fora { opacity: .5; }
.admin-temp-linha.is-fora .admin-temp-nome strong { text-decoration: line-through; }
.admin-temp-nome, .admin-temp-num { display: grid; min-width: 0; }
.admin-temp-nome small, .admin-temp-num small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-temp-num { text-align: right; }
.admin-temp-tirar { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--coral); cursor: pointer; }
@media (max-width: 560px) { .admin-temp-linha { grid-template-columns: 30px minmax(0, 1fr) auto; } .admin-temp-tirar { grid-column: 2 / -1; } }
.admin-temp-sub { margin: 6px 0 0; font: 700 14px var(--font-sans); }
.admin-temp-linha.is-suspeito { grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: start; }
.admin-temp-motivos { display: grid; gap: 2px; margin-top: 4px; }
.admin-temp-motivos em { font-style: normal; font-size: 12px; color: var(--coral); }
.admin-temp-liberado { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--teal); }
.admin-temp-linha .btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* ===== Fale conosco: a "carta" (js/contato.js) ===== */
.rail-contato { padding: 0; border: 0; background: none; color: var(--sidebar-muted); font: inherit; font-size: 11px; cursor: pointer; }
.rail-contato:hover { color: var(--sidebar-ink); text-decoration: underline; }
.carta { position: relative; display: grid; gap: 10px; padding: 18px 16px 16px; border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, #F6E7C8 55%, var(--surface)), var(--surface) 120px); }
:root[data-theme="dark"] .carta { background: linear-gradient(180deg, color-mix(in srgb, #6B4EE6 18%, var(--surface)), var(--surface) 120px); }
.carta-envelope { position: relative; justify-self: center; display: grid; place-items: center; width: 64px; height: 44px; margin-bottom: 2px; border-radius: 8px;
  background: linear-gradient(180deg, #7B5CF5, #5A3BD8); color: #fff; box-shadow: 0 8px 18px -10px #5A3BD8; overflow: hidden; }
.carta-envelope .carta-aba { position: absolute; inset: 0 0 auto; height: 24px; background: linear-gradient(180deg, #9B82FF, #7B5CF5); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.carta-envelope .icon-slot, .carta-envelope .icon { position: relative; width: 18px; height: 18px; margin-top: 12px; }
.carta-envelope.is-fechado { animation: carta-voa .9s ease both; }
@keyframes carta-voa { 0% { transform: translateY(8px) scale(.9); opacity: 0; } 60% { transform: translateY(-4px) rotate(-4deg); opacity: 1; } 100% { transform: none; } }
html.reduce-motion .carta-envelope.is-fechado { animation: none; }
.carta-cab { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); font-size: 13.5px; color: var(--ink); }
.carta-cab b { color: var(--muted); font-weight: 600; }
.carta-cab small { color: var(--muted); }
.carta-de { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.carta-de label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.carta-de input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--ink); font: 14.5px var(--font-sans); }
.carta-de input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (max-width: 480px) { .carta-de { grid-template-columns: 1fr; } }
.carta-rotulo { display: block; margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.carta-assuntos { display: flex; flex-wrap: wrap; gap: 6px; }
.carta-assunto { display: inline-flex; align-items: center; gap: 6px; }
.carta-assunto .icon-slot, .carta-assunto .icon { width: 15px; height: 15px; }
.carta-dica { margin: 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 10%, transparent); font-size: 12.5px; color: var(--ink); }
.carta-papel { position: relative; }
.carta-papel textarea { width: 100%; box-sizing: border-box; min-height: 150px; padding: 6px 12px 22px; border-radius: 12px; border: 1.5px solid var(--border); resize: vertical;
  color: var(--ink); font: 15px/28px var(--font-sans);
  background: var(--surface) repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, var(--blue) 18%, transparent) 27px 28px) 0 6px / 100% 28px local; }
.carta-papel textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.carta-conta { position: absolute; right: 12px; bottom: 8px; font: 600 11px var(--font-mono); color: var(--muted); }
.carta-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.carta-enviada { display: grid; justify-items: center; gap: 12px; padding: 8px 0 14px; text-align: center; }
.carta-enviada p { margin: 0; font-size: 14.5px; max-width: 40ch; }
/* Painel /admin: mensagens do Fale conosco */
.admin-msg { padding: 14px 16px; display: grid; gap: 8px; }
.admin-msg-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-msg-cab small { font-size: 12px; color: var(--muted); }
.admin-msg-cat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); font-size: 12.5px; font-weight: 700; }
.admin-msg-cat .icon-slot, .admin-msg-cat .icon { width: 14px; height: 14px; }
.admin-msg-de { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.admin-msg-uid { color: var(--muted); font-size: 12px; }
.admin-msg-texto { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-erro-msg { margin: 0; font: 600 14px/1.45 var(--font-mono); color: var(--coral); overflow-wrap: anywhere; }
.admin-erro-pilha summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.admin-erro-pilha pre { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font: 500 12px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.admin-msg-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-msg-acoes .btn-sm { padding: 7px 12px; font-size: 12.5px; }

/* ===== Abertura do baú em toques (mostrarAberturaBau, js/missoes.js) ===== */
.bau-svg .bau-raios { opacity: 0; transform-box: view-box; transform-origin: 32px 24px; transition: opacity .35s ease; }
.bau-svg .bau-fresta { opacity: 0; transition: opacity .25s ease; }
.bau-svg .bau-fechadura { transform-box: view-box; transform-origin: 32px 32px; }
.bau-abertura { position: relative; overflow: hidden; }
.bau-abertura .bau-palco { position: relative; display: grid; place-items: center; padding-top: 40px; }
/* Textos, prêmios e botão ficam por cima dos raios de luz. */
.bau-abertura .bau-titulo, .bau-abertura .bau-dica, .bau-abertura .bau-toques, .bau-abertura .bau-premios, .bau-abertura #bauFechar { position: relative; z-index: 1; }
.bau-alvo { position: relative; display: grid; place-items: center; padding: 6px 12px; border: 0; border-radius: 24px; background: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bau-alvo:focus { outline: none; }
.bau-alvo:focus-visible { outline: 2px dashed color-mix(in srgb, var(--blue) 60%, transparent); outline-offset: 2px; }
.bau-abertura:focus { outline: none; }
.bau-alvo:disabled { cursor: default; }
.bau-abertura .bau-svg .bau-tampa { transform-box: view-box; transform-origin: 8px 28px; }
.bau-abertura .bau-palco .bau-svg { width: 170px; height: 148px; filter: drop-shadow(0 14px 18px rgba(30, 12, 60, .28)); }
/* Antes do 1º toque o baú "chama" de vez em quando. */
.bau-alvo.is-convite .bau-svg { animation: bau-convite 2.4s ease-in-out 1s infinite; }
@keyframes bau-convite { 0%, 70%, 100% { transform: none; } 76% { transform: translateY(-7px) rotate(-5deg); } 82% { transform: translateY(0) rotate(4deg); } 88% { transform: translateY(-3px) rotate(-2deg); } }
/* Cada toque: pulo com "amassada" e giro alternado; a fechadura chacoalha. */
.bau-palco.is-pancada .bau-svg { animation: bau-pancada .42s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bau-pancada {
  0% { transform: none; }
  22% { transform: translateY(8px) scale(1.12, .84); }
  52% { transform: translateY(-14px) scale(.94, 1.08) rotate(var(--giro, 5deg)); }
  78% { transform: translateY(2px) scale(1.03, .97) rotate(calc(var(--giro, 5deg) * -.4)); }
  100% { transform: none; }
}
.bau-palco.is-pancada .bau-fechadura { animation: bau-trinco .42s ease; }
@keyframes bau-trinco { 20% { transform: rotate(-16deg); } 45% { transform: rotate(13deg); } 70% { transform: rotate(-6deg); } }
/* A luz vaza mais a cada toque. */
.bau-svg[data-nivel="1"] .bau-fresta { opacity: .35; }
.bau-svg[data-nivel="2"] .bau-fresta { opacity: .7; }
.bau-svg[data-nivel="3"] .bau-fresta { opacity: 1; }
.bau-svg[data-nivel] .bau-fresta { filter: drop-shadow(0 0 2px #FFE27A) drop-shadow(0 0 5px #FFE27A); }
.bau-svg[data-nivel="2"] .bau-luz { opacity: .25; }
.bau-svg[data-nivel="3"] .bau-luz { opacity: .45; animation: bau-brilho 1s ease-in-out infinite; }
/* Abriu: a fechadura salta, a tampa abre com força, raios girando e clarão. */
.bau-abertura .bau-svg.is-aberto .bau-fechadura { animation: bau-solta .75s cubic-bezier(.3, .6, .5, 1) forwards; }
@keyframes bau-solta { 0% { transform: none; opacity: 1; } 35% { transform: translate(10px, -22px) rotate(140deg); opacity: 1; } 100% { transform: translate(24px, 34px) rotate(320deg); opacity: 0; } }
.bau-abertura .bau-svg.is-aberto .bau-tampa { animation: bau-tampa-abre .8s cubic-bezier(.2, 1.7, .4, 1) forwards; transition: none; }
@keyframes bau-tampa-abre { 0% { transform: none; } 40% { transform: rotate(-52deg); } 70% { transform: rotate(-30deg); } 100% { transform: rotate(-38deg); } }
.bau-abertura .bau-svg.is-aberto .bau-fresta { opacity: 0; }
.bau-abertura .bau-svg.is-aberto .bau-raios { opacity: 1; animation: bau-gira 7s linear infinite; }
@keyframes bau-gira { to { transform: rotate(360deg); } }
.bau-abertura .bau-palco::after { content: ""; position: absolute; inset: -40px -60px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 246, 200, .95), rgba(255, 226, 122, .35) 30%, transparent 62%); }
.bau-abertura.is-epico .bau-palco::after { background: radial-gradient(circle at 50% 55%, rgba(240, 232, 255, .95), rgba(173, 132, 255, .4) 30%, transparent 62%); }
.bau-abertura.is-aberto .bau-palco::after { animation: bau-clarao .9s ease-out forwards; }
@keyframes bau-clarao { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.bau-abertura.is-aberto .bau-palco { animation: bau-sacode .35s ease; }
@keyframes bau-sacode { 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(1px, 0); } }
/* Faíscas e moedas que saem do baú. */
.bau-faiscas { position: absolute; inset: 0; pointer-events: none; }
.bau-faisca { position: absolute; left: 50%; top: 58%; width: 7px; height: 7px; border-radius: 2px; background: var(--cor, #FFE27A);
  box-shadow: 0 0 8px var(--cor, #FFE27A); opacity: 0; animation: bau-faisca .8s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes bau-faisca {
  0% { transform: translate(-50%, -50%) scale(1.2) rotate(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3) rotate(var(--rot)); opacity: 0; }
}
.bau-faisca.is-moeda { width: 13px; height: 13px; border-radius: 50%; box-shadow: none;
  background: radial-gradient(circle at 35% 30%, #FFF6C8, #F5C33B 55%, #B7791F); animation: bau-moeda 1.15s cubic-bezier(.25, .6, .45, 1) forwards; }
@keyframes bau-moeda {
  0% { transform: translate(-50%, -50%) scale(.6); opacity: 1; }
  45% { transform: translate(calc(-50% + var(--dx) * .7), calc(-50% + var(--meio) - 40px)) scale(1) rotateY(180deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.85) rotateY(540deg); opacity: 0; }
}
.bau-dica { min-height: 21px; margin: -6px 0 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.bau-abertura.is-aberto .bau-dica { color: var(--gold); }
.bau-toques { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.bau-toques i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--border); transition: transform .2s cubic-bezier(.3, 1.8, .5, 1), background .2s; }
.bau-toques i.on { background: var(--gold); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent); transform: scale(1.25); }
.bau-abertura.is-epico .bau-toques i.on { background: #8B5CF6; box-shadow: 0 0 8px rgba(139, 92, 246, .6); }
/* Prêmios e botão só depois de abrir. */
.bau-abertura:not(.is-revelado) .bau-premios, .bau-abertura:not(.is-revelado) #bauFechar { display: none; }
.bau-abertura.is-revelado .bau-toques { display: none; }
.bau-abertura.is-revelado #bauFechar { animation: premio-aparece .45s cubic-bezier(.2, 1.4, .4, 1) .5s both; }
/* Movimento reduzido: mesmo passo a passo, sem pulos nem faíscas. */
html.reduce-motion .bau-abertura .bau-svg, html.reduce-motion .bau-abertura .bau-fechadura, html.reduce-motion .bau-abertura .bau-palco,
html.reduce-motion .bau-abertura .bau-palco::after, html.reduce-motion .bau-abertura .bau-raios { animation: none !important; }
html.reduce-motion .bau-abertura .bau-svg.is-aberto .bau-tampa { animation: none; transform: rotate(-38deg); }
html.reduce-motion .bau-abertura .bau-svg.is-aberto .bau-fechadura { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .bau-abertura .bau-svg, .bau-abertura .bau-fechadura, .bau-abertura .bau-palco, .bau-abertura .bau-palco::after, .bau-abertura .bau-raios { animation: none !important; }
  .bau-abertura .bau-svg.is-aberto .bau-tampa { animation: none; transform: rotate(-38deg); }
  .bau-abertura .bau-svg.is-aberto .bau-fechadura { opacity: 0; }
}
/* Carta compacta no celular (cabe sem rolar quase nada). */
@media (max-width: 600px) {
  .carta { gap: 7px; padding: 12px 12px 12px; border-radius: 16px; }
  .carta-envelope { width: 42px; height: 30px; border-radius: 6px; margin: 0; position: absolute; top: 10px; right: 12px; }
  .carta-envelope .carta-aba { height: 16px; }
  .carta-envelope .icon-slot, .carta-envelope .icon { width: 13px; height: 13px; margin-top: 8px; }
  .carta-cab { padding: 0 52px 7px 0; font-size: 13px; gap: 1px; }
  .carta-cab small { display: block; font-size: 11.5px; }
  .carta-de { gap: 8px; }
  .carta-de input { padding: 8px 10px; font-size: 14px; }
  .carta-rotulo { margin-top: 2px; font-size: 12px; }
  .carta-assuntos { gap: 5px; }
  .carta-assunto { padding: 6px 10px; font-size: 12.5px; gap: 5px; }
  .carta-assunto .icon-slot, .carta-assunto .icon { width: 13px; height: 13px; }
  .carta-dica { padding: 6px 10px; font-size: 12px; }
  .carta-papel textarea { min-height: 112px; font-size: 14.5px; line-height: 26px; background-size: 100% 26px; padding-bottom: 18px; }
  .carta-papel textarea { background-image: repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, var(--blue) 18%, transparent) 25px 26px); }
  .carta-conta { bottom: 6px; font-size: 10.5px; }
  .carta-enviada .carta-envelope { position: relative; top: auto; right: auto; width: 64px; height: 44px; }
}
/* Confirmação do Fale conosco, compacta no celular. */
@media (max-width: 600px) {
  .qsheet:has(.carta-enviada) .qsheet-head h3 { font-size: 17px; }
  .carta-enviada { gap: 8px; padding: 2px 4px 10px; }
  .carta-enviada .carta-envelope { width: 46px; height: 32px; }
  .carta-enviada .carta-envelope .carta-aba { height: 17px; }
  .carta-enviada .carta-envelope .icon-slot, .carta-enviada .carta-envelope .icon { width: 14px; height: 14px; margin-top: 8px; }
  .carta-enviada p { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
  .qsheet:has(.carta-enviada) .qsheet-actions .btn { padding: 11px 16px; font-size: 14.5px; }
}

/* Denúncia de perfil (js/moderacao.js) e nome recusado */
.perfil-pub-denunciar { display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 6px 10px; border: 0; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; border-radius: 8px; }
.perfil-pub-denunciar:hover:not(:disabled) { color: var(--coral); background: color-mix(in srgb, var(--coral) 8%, transparent); }
.perfil-pub-denunciar:disabled { cursor: default; opacity: .7; }
.perfil-pub-denunciar .icon { width: 14px; height: 14px; }
.denuncia-modal { position: relative; width: min(440px, calc(100vw - 32px)); padding: 24px; display: grid; gap: 12px; }
.denuncia-modal h2 { margin: 0; font-size: 20px; }
.denuncia-alvo { margin: -4px 0 0; color: var(--muted); font-size: 14px; }
.denuncia-motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.denuncia-modal textarea { width: 100%; resize: vertical; min-height: 70px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 14px var(--font-sans); }
.denuncia-ok { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 10px 0; }
.denuncia-ok > .icon, .denuncia-ok > i { width: 44px; height: 44px; color: var(--teal); }
.denuncia-ok p { margin: 0 0 6px; color: var(--muted); }
.nick-msg.is-erro { color: var(--coral); font-weight: 600; }
.admin-den-textos { margin: 0 0 10px; padding-left: 18px; color: var(--muted); font-size: 13px; display: grid; gap: 4px; }
.toast-moderacao { max-width: min(440px, calc(100vw - 32px)); white-space: normal; line-height: 1.35; }

/* =================================================================
   Janela de energia: anel de 25 gomos (pintarModalEnergia, js/energia.js)
   Grátis: gomos do roxo ao rosa (coral com pouca energia), o próximo pisca.
   Premium: anel dourado com uma onda de brilho girando e um halo atrás.
   ================================================================= */
.energia-modal { width: min(620px, 100%); padding: 26px 24px 22px; }
.ea-topo { display: flex; flex-direction: column; align-items: center; }
.ea-topo h2 { font-size: 24px; }
.ea-topo .energia-sub { margin: 6px auto 14px; }
.ea-anel {
  --ea-trilho: color-mix(in srgb, var(--ink) 9%, transparent);
  position: relative; width: 176px; height: 176px; margin: 0 auto 12px;
}
.ea-normal { --ea-c1: #8B6CFF; --ea-c2: #EC5A9C; }
.ea-baixa { --ea-c1: #FFA14F; --ea-c2: #F0569A; }
.ea-premium { --ea-c1: #FFB443; --ea-c2: #B678FF; }
.ea-livre { --ea-c1: #3FD1B4; --ea-c2: #4FA9FF; }
.ea-anel::before {
  content: ""; position: absolute; inset: 30px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ea-c1) 20%, transparent), transparent 72%);
}
.ea-anel svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.ea-gomo { fill: none; stroke: var(--ea-trilho); stroke-width: 9; stroke-linecap: round; }
.ea-gomo.on { stroke: var(--cor); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cor) 50%, transparent)); }
.ea-gomo.carregando { stroke: var(--cor); opacity: .28; animation: ea-carregando 1.8s ease-in-out infinite; }
@keyframes ea-carregando { 50% { opacity: .75; } }
.is-entrando .ea-gomo.on { animation: ea-acende .55s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 24ms); }
@keyframes ea-acende { from { opacity: 0; stroke-width: 2; } }
/* Premium e presente: a onda de brilho dá uma volta a cada 2,6 s. */
.ea-premium .ea-gomo.on, .ea-livre .ea-gomo.on { animation: ea-onda 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 104ms - 2.6s); }
.is-entrando .ea-premium .ea-gomo.on, .is-entrando .ea-livre .ea-gomo.on {
  animation: ea-acende .55s cubic-bezier(.2, .9, .3, 1.2) both, ea-onda 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 24ms), calc(var(--i) * 104ms - 2.6s);
}
@keyframes ea-onda { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.ea-halo {
  position: absolute; inset: 10px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--ea-c1), var(--ea-c2), var(--ea-c1));
  filter: blur(24px); opacity: .34; animation: ea-gira 8s linear infinite;
}
@keyframes ea-gira { to { transform: rotate(360deg); } }
.ea-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ea-raio {
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; color: #fff;
  background: linear-gradient(140deg, var(--ea-c1), var(--ea-c2));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ea-c1) 45%, transparent);
}
.ea-raio .energia-icone { width: 16px; height: 16px; }
.ea-premium .ea-raio { background: linear-gradient(140deg, #3B2A8C, #16103A); box-shadow: 0 4px 14px rgba(255, 180, 67, .35); }
.ea-premium .ea-raio .energia-icone { width: 18px; height: 18px; }
.ea-valor { font: 800 46px/1 var(--font-serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ea-baixa .ea-valor { color: var(--coral); }
.ea-sem-fim { display: block; line-height: 0; color: #E8A21C; }
.ea-sem-fim .energia-inf { width: 66px; height: 33px; }
.ea-livre .ea-sem-fim { color: var(--teal); }
.ea-centro small { margin-top: 3px; font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ea-extra {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font: 700 11px var(--font-mono); color: #fff;
  background: linear-gradient(140deg, #1F9C8A, #4FA9FF); box-shadow: 0 4px 12px rgba(31, 156, 138, .3);
}
/* Recarga */
.ea-info { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.ea-chip {
  display: flex; align-items: center; gap: 10px; flex: 0 1 200px; min-width: 0; padding: 10px 14px;
  border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); text-align: left;
}
.ea-chip > .icon-slot { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--blue-soft); color: var(--blue); }
.ea-chip > .icon-slot .icon { width: 17px; height: 17px; }
.ea-chip > span:last-child { flex: 1; min-width: 0; }
.ea-chip strong { display: block; font: 700 14px var(--font-sans); color: var(--ink); white-space: nowrap; }
.ea-chip small { display: block; font-size: 11.5px; color: var(--muted); }
.ea-chip.is-ok > .icon-slot { background: var(--teal-soft); color: var(--teal); }
.ea-mini { display: block; height: 4px; margin-top: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.ea-mini > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7C5CFF, #EC5A9C); }
/* Vantagens (Premium e presente) */
.ea-vantagens { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.ea-vantagens > span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border);
}
.ea-vantagens .icon-slot .icon { width: 15px; height: 15px; }
.ea-vantagens .icon-slot { color: var(--gold); }
.ea-modo-livre .ea-vantagens .icon-slot { color: var(--teal); }
/* Assinatura (Premium) */
.energia-modal .assinatura-box {
  flex-wrap: nowrap; gap: 14px; margin-top: 20px; padding: 14px 16px; border: 1.5px solid transparent;
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(140deg, #FFB443, #B678FF) border-box;
}
.energia-modal .assinatura-box > div { flex: 1; min-width: 0; }
.energia-modal .assinatura-box .btn { flex: none; min-height: 38px; font-size: 13px; }
/* Opções do plano grátis */
.ea-op-cab { display: flex; align-items: center; gap: 10px; }
.ea-op-cab > div { flex: 1; min-width: 0; }
.ea-op-cab h3 { margin: 0; }
.ea-op-cab small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.ea-op-cab small b { color: var(--gold); font-family: var(--font-mono); }
.energia-premium { position: relative; }
.energia-premium .energia-tag { position: absolute; top: -10px; right: 16px; box-shadow: 0 4px 12px rgba(124, 92, 255, .3); }
.energia-premium .plano { display: flex; flex-direction: column; }
.energia-premium .plano .btn { margin-top: auto; }
.energia-premium .plano-detalhe { margin-bottom: 8px; }
.ea-op-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff; }
.ea-op-ic .icon-slot .icon, .ea-op-ic > svg { width: 20px; height: 20px; }
.ea-op-ic-premium { background: linear-gradient(140deg, #3B2A8C, #16103A); box-shadow: 0 6px 16px rgba(59, 42, 140, .28); }
.ea-op-ic-premium .icon-slot { color: #FFC24D; }
.ea-op-ic-moeda { background: linear-gradient(145deg, #FFC94D, #D9730D); }
.ea-op-ic-anuncio { background: linear-gradient(145deg, #3FD1B4, #1F9C8A); }
.ea-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 18px; }
.ea-lista li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); }
.ea-lista .icon-slot { color: var(--teal); }
.ea-lista .icon-slot .icon { width: 15px; height: 15px; }
.ea-pacote {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 600 13px var(--font-sans);
  cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ea-pacote:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in srgb, var(--blue) 45%, transparent); box-shadow: 0 4px 14px rgba(107, 78, 230, .14); }
.ea-pacote:disabled { opacity: .5; cursor: not-allowed; }
.ea-pacote-qtd {
  display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 9px;
  font: 800 12.5px var(--font-mono); color: #fff; background: linear-gradient(140deg, #7C5CFF, #B04FE8);
}
.ea-pacote-qtd .energia-icone { width: 12px; height: 12px; color: #FFE27A; }
.ea-pacote-nome { flex: 1; text-align: left; }
.ea-pacote .energia-preco { padding: 3px 8px; border-radius: 999px; background: var(--gold-soft); font-size: 12.5px; }
html.reduce-motion .ea-gomo, html.reduce-motion .ea-halo { animation: none !important; }
/* Vantagens em três blocos lado a lado (ícone em cima, texto embaixo) */
.ea-vantagens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 500px; }
.ea-vantagens > span { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 8px; border-radius: 14px; text-align: center; line-height: 1.3; }
.ea-vantagens > span > .icon-slot { width: 30px; height: 30px; border-radius: 10px; background: var(--gold-soft); }
.ea-modo-livre .ea-vantagens > span > .icon-slot { background: var(--teal-soft); }
@media (max-width: 640px) and (min-width: 360px) {
  .energia-premium .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .energia-premium .plano { padding: 10px; }
  .energia-premium .plano-preco { font-size: 17px; }
  .energia-premium .plano-curto-some { display: none; }
}
@media (max-width: 560px) {
  .ea-lista { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ea-anel { width: 156px; height: 156px; }
  .ea-valor { font-size: 40px; }
  .ea-chip { flex: 1 1 140px; padding: 9px 11px; }
  .energia-modal .assinatura-box { flex-wrap: wrap; }
  .energia-modal .assinatura-box .btn { width: 100%; justify-content: center; }
}

/* =================================================================
   Mítico — a raridade mais alta (selo, cartões e título equipado)
   - Selo: corpo carmim, borda de luz girando (vermelho → dourado → rosa),
     brilho que pulsa, um reflexo rápido com pausa e duas estrelinhas piscando.
   - Cartões (.aura-mitica: 1º lugar do mês, título conquistado na Trilha e na
     lista do perfil): a mesma borda girando, um reflexo que atravessa e
     fagulhas douradas subindo por trás do texto (miticoFagulhasHtml).
   ================================================================= */
@property --rm-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rm-girar { to { --rm-ang: 360deg; } }

.rar-chip.rar-mitico {
  position: relative; overflow: visible; padding: 1px 8px 2px; border: 1px solid transparent;
  color: #FFF4E0; text-shadow: 0 0 6px rgba(255, 190, 120, .75), 0 1px 0 rgba(90, 0, 12, .55);
  background:
    linear-gradient(100deg, transparent 44%, rgba(255, 246, 225, .8) 50%, transparent 56%) padding-box,
    linear-gradient(135deg, #8E0F24, #D3263A 48%, #F04A32 72%, #A3122E) padding-box,
    conic-gradient(from var(--rm-ang), #FF4D4D, #FF9A4D, #FFD27A, #FF6F91, #C2185B, #FF4D4D) border-box;
  background-size: 400% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat, no-repeat;
  animation: rm-selo-reflexo 3.2s linear infinite, rm-girar 2.8s linear infinite, rm-selo-luz 2.4s ease-in-out infinite;
}
/* 400% que se repete: -133,333% anda exatamente um padrão (volta sem pulo). */
@keyframes rm-selo-reflexo { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -133.333% 0, 0 0, 0 0; } }
@keyframes rm-selo-luz {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 59, 59, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
  50% { box-shadow: 0 0 14px rgba(255, 110, 70, .85), 0 0 2px rgba(255, 220, 160, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
}
.rar-chip.rar-mitico::before, .rar-chip.rar-mitico::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; background: #FFF4D6;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: rm-estrela 2.4s ease-in-out infinite;
}
.rar-chip.rar-mitico::before { top: -6px; right: -6px; }
.rar-chip.rar-mitico::after { bottom: -5px; left: -6px; width: 8px; height: 8px; background: #FFD27A; animation-delay: -1.2s; }
@keyframes rm-estrela {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  30% { transform: scale(1.1) rotate(70deg); opacity: 1; }
  55% { transform: scale(.65) rotate(120deg); opacity: .8; }
  75% { transform: scale(0) rotate(170deg); opacity: 0; }
}

/* Cartões com aura */
.aura-mitica { position: relative; isolation: isolate; overflow: hidden; border-color: transparent !important; }
.aura-mitica::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 2px; pointer-events: none;
  /* Um cometa de luz dá a volta: rastro carmim que esquenta até a cabeça dourada. */
  background: conic-gradient(from var(--rm-ang), #7A0B2A 0deg, #B8183A 150deg, #E63946 230deg, #FF7A3D 290deg, #FFC861 330deg, #FFF1C9 352deg, #7A0B2A 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rm-girar 4s linear infinite;
}
.aura-mitica::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 228, 190, .22) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 120% 0;
  animation: rm-varrer 5s ease-in-out infinite;
}
/* Atravessa da esquerda para a direita e espera; as duas pontas ficam fora do cartão. */
@keyframes rm-varrer { 0% { background-position: 120% 0; } 40%, 100% { background-position: -20% 0; } }
.rk-pr-linha.aura-mitica, .tt-card.aura-mitica {
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, #FF4D4D 12%, transparent), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, #FFB25C 12%, transparent), transparent 60%),
    var(--surface-2);
  animation: rm-cartao-luz 3s ease-in-out infinite;
}
.tt-card.aura-mitica { background-color: var(--surface); }
@keyframes rm-cartao-luz {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 77, 77, 0), 0 6px 18px -10px rgba(217, 45, 45, .5); }
  50% { box-shadow: 0 0 18px rgba(255, 90, 70, .28), 0 8px 24px -10px rgba(240, 120, 60, .6); }
}
.title-item.aura-mitica { background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, #FF4D4D 10%, transparent), transparent 60%), var(--surface); }
.title-item.aura-mitica.equipped { box-shadow: 0 0 0 2px var(--gold-soft), 0 0 16px rgba(255, 90, 70, .25); }

/* Fagulhas: sobem de baixo, balançam um pouco e somem antes do topo. */
.rm-fagulhas { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.rm-fagulhas i {
  position: absolute; left: var(--x); bottom: -6px; width: 5px; height: 5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFF6DC 0 35%, #FFB25C 70%, transparent 72%);
  box-shadow: 0 0 6px rgba(255, 150, 80, .8);
  animation: rm-fagulha 3.4s ease-out infinite; animation-delay: var(--d);
}
.rm-fagulhas i:nth-child(even) { width: 4px; height: 4px; animation-duration: 4.1s; }
@keyframes rm-fagulha {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  12% { opacity: .95; }
  50% { transform: translate(6px, -38px) scale(.85); }
  100% { transform: translate(-4px, -78px) scale(.3); opacity: 0; }
}

/* Título equipado no perfil e no duelo: borda girando em volta da pílula. */
.profile-header-title.title-tier-mitico, .duelo-confronto-titulo.title-tier-mitico { position: relative; isolation: isolate; }
.profile-header-title.title-tier-mitico::before, .duelo-confronto-titulo.title-tier-mitico::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--rm-ang), #FF4D4D, #FFB25C, #FFF1C9, #FF6F91, #C2185B, #FF4D4D);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rm-girar 3s linear infinite;
}

/* Órbita das fagulhas do título: elipse suave (x e y em ondas defasadas),
   maior e mais clara quando passa na frente (embaixo). */
.tfw-mitico::before, .tfw-mitico::after {
  animation: rm-orb-x 1.8s ease-in-out infinite alternate, rm-orb-y 1.8s ease-in-out infinite alternate, rm-orb-z 3.6s linear infinite;
  animation-delay: 0s, -.9s, 0s;
}
.tfw-mitico::after { animation-delay: -1.8s, -2.7s, -1.8s; }
@keyframes rm-orb-x { from { left: -.45em; } to { left: calc(100% + .05em); } }
@keyframes rm-orb-y { from { top: -.5em; } to { top: calc(100% - .2em); } }
@keyframes rm-orb-z {
  0% { transform: scale(.8) rotate(0deg); opacity: .7; }
  25% { transform: scale(1.15) rotate(90deg); opacity: 1; }
  50% { transform: scale(.8) rotate(180deg); opacity: .7; }
  75% { transform: scale(.4) rotate(270deg); opacity: .2; }
  100% { transform: scale(.8) rotate(360deg); opacity: .7; }
}

html.reduce-motion .rar-chip.rar-mitico, html.reduce-motion .aura-mitica, html.reduce-motion .aura-mitica::before,
html.reduce-motion .profile-header-title.title-tier-mitico::before, html.reduce-motion .duelo-confronto-titulo.title-tier-mitico::before { animation: none !important; }
html.reduce-motion .rar-chip.rar-mitico::before, html.reduce-motion .rar-chip.rar-mitico::after,
html.reduce-motion .aura-mitica::after, html.reduce-motion .rm-fagulhas { display: none; }

/* =================================================================
   Revisão das erradas no fim do simulado (revisaoItemHtml, js/app.js)
   Cada questão: enunciado, todas as alternativas (certa em verde, a marcada
   em vermelho) e a explicação embaixo.
   ================================================================= */
.rv-lista { gap: 16px; }
.review-item.rv-item { padding: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.rv-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-num { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; font: 800 12px var(--font-mono); color: #fff; background: var(--coral); }
.rv-branco { padding: 2px 8px; border-radius: 999px; font: 700 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); }
.rv-enunciado { margin: 12px 0 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--ink); }
.review-item p.rv-enunciado.rv-simples { margin: 12px 0 0; font-size: 16px; white-space: pre-line; }
.rv-texto-base { margin-top: 10px; }
.rv-texto-base summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--blue); }
.rv-texto-base .text-base { margin-top: 8px; }
.rv-ops { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.rv-op { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.rv-letra { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 800 12px var(--font-sans); color: var(--muted); background: var(--surface-2); }
.rv-letra .icon { width: 15px; height: 15px; }
.rv-op-corpo { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rv-op-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-op-topo b { font: 800 12px var(--font-mono); color: var(--ink); }
.rv-op-texto { font-size: 14px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.rv-op .option-fig { display: block; margin-top: 6px; }
.rv-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 700 10.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.rv-selo .icon { width: 12px; height: 12px; }
.rv-selo-certa { color: var(--teal); background: var(--teal-soft); }
.rv-selo-sua { color: var(--coral); background: var(--coral-soft); }
.rv-op.is-certa { border-color: color-mix(in srgb, var(--teal) 50%, transparent); background: color-mix(in srgb, var(--teal) 8%, var(--surface)); }
.rv-op.is-certa .rv-letra { color: #fff; background: var(--teal); }
.rv-op.is-certa .rv-op-texto { color: var(--ink); font-weight: 600; }
.rv-op.is-marcada { border-color: color-mix(in srgb, var(--coral) 45%, transparent); background: color-mix(in srgb, var(--coral) 6%, var(--surface)); }
.rv-op.is-marcada .rv-letra { color: #fff; background: var(--coral); }
.rv-op.is-marcada .rv-op-texto { color: var(--ink); }
.review-item .rv-coment { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.rv-explicacao { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
.rv-explicacao-tit { display: flex; align-items: center; gap: 6px; font: 700 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.rv-explicacao-tit .icon { width: 15px; height: 15px; }
.rv-gabarito { margin-left: auto; padding: 2px 8px; border-radius: 999px; color: var(--teal); background: var(--teal-soft); }
.review-item .rv-explicacao p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-line; }
@media (max-width: 560px) {
  .review-item.rv-item { padding: 14px 12px; }
  .rv-enunciado { font-size: 15px; }
  .rv-op { padding: 9px 10px; }
}

/* Prévia da tela do fogo (?previa=fogo, js/fogo.js) */
.previa-fogo {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 2500; transform: translateX(-50%);
  width: min(360px, calc(100% - 24px)); display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; text-align: center;
  background: rgba(22, 16, 58, .94); color: #EDEAFB; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 194, 77, .35);
}
.previa-fogo strong { font-size: 14px; }
.previa-fogo span { font-size: 12px; color: #B9B2E0; }
.previa-fogo div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.previa-fogo button { padding: 6px 10px; border-radius: 999px; border: 0; cursor: pointer; font: 700 12px var(--font-sans); color: #2B1400; background: linear-gradient(120deg, #FFE08A, #FF9446); }

/* =================================================================
   Enfeites de datas comemorativas (js/enfeites.js): só valem com
   html[data-enfeite]; fora do período nada disto aparece.
   ================================================================= */
/* Chapéu de bruxa: desenhado no SVG da marca, passa para fora da caixa do logo */
.marca-chapeu { overflow: visible; }
:root[data-enfeite="halloween"] .marca-xp { color: #FF9A3C; }
html[data-enfeite="halloween"] #sideRail .brand-lockup { cursor: pointer; }
/* Chapéu ao clicar na marca: encolhe, estica girando para um lado e para o outro e assenta
   (sem subir muito: no alto da tela não há espaço); a sombra clareia enquanto ele mexe */
.enf-chapeu { transform-box: fill-box; transform-origin: 50% 92%; }
.marca-chapeu.is-pulo .enf-chapeu { animation: enf-pulo .8s cubic-bezier(.3, .7, .4, 1); }
.marca-chapeu.is-pulo .enf-chapeu-sombra { animation: enf-pulo-sombra .8s ease; }
@keyframes enf-pulo {
  0% { transform: none; } 14% { transform: scale(1.1, .82); } 34% { transform: translateY(-9%) rotate(-14deg) scale(.95, 1.1); }
  54% { transform: translateY(-2%) rotate(10deg); } 72% { transform: rotate(-5deg) scale(1.03, .96); } 88% { transform: rotate(2deg); } 100% { transform: none; }
}
@keyframes enf-pulo-sombra { 0%, 100% { opacity: 1; } 30% { opacity: .25; } 60% { opacity: .9; } }

/* Abóboras acesas em cima das moedas; a luz atrás tremula pelos furos */
@media (min-height: 660px) {
  html[data-enfeite="halloween"] .rail-bottom::before,
  html[data-enfeite="halloween"] .rail-bottom::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); height: 90px; pointer-events: none;
  }
  html[data-enfeite="halloween"] .rail-bottom::before { z-index: 1; background: no-repeat center bottom / 200px 90px; }
  html[data-enfeite="halloween"] .rail-bottom::after {
    z-index: 0;
    background:
      radial-gradient(32px 22px at 50% 66%, #FFF6C0 0 35%, #FFC24A 70%, rgba(255, 140, 30, 0)),
      radial-gradient(19px 13px at 23% 77%, #FFF6C0 0 35%, #FFC24A 70%, rgba(255, 140, 30, 0)),
      radial-gradient(120px 44px at 50% 100%, rgba(255, 140, 40, .38), rgba(255, 140, 40, 0) 70%);
    animation: enf-chama 3.4s linear infinite;
  }
}
@keyframes enf-chama {
  0%, 100% { opacity: 1; } 9% { opacity: .8; } 14% { opacity: .96; } 27% { opacity: .76; } 34% { opacity: 1; }
  48% { opacity: .86; } 61% { opacity: .98; } 73% { opacity: .78; } 86% { opacity: .95; }
}

/* Teia de canto com aranha: no PC no canto de cima da barra lateral; no celular no
   canto do cartão Treino de hoje. A aranha fica no centro e, de vez em quando, desce
   no fio e sobe de volta. */
.enf-teia-box { position: absolute; top: 0; right: 0; pointer-events: none; }
.side-rail > .enf-teia-box { position: absolute; z-index: 0; }
.enf-teia { display: block; width: 100%; height: 100%; overflow: visible; }
.enf-gota { fill: #fff; opacity: .75; animation: enf-orvalho 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.75s); }
@keyframes enf-orvalho { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
.enf-aranha { position: absolute; width: 0; height: 0; }
.enf-balanco { position: absolute; left: 0; top: 0; transform-origin: 0 0; animation: enf-balanco 3.8s ease-in-out infinite alternate; }
.enf-fio { position: absolute; left: -.4px; top: 0; width: .8px; height: var(--desce); background: rgba(235, 228, 255, .75); transform-origin: 0 0; transform: scaleY(0); animation: enf-fio 17s ease-in-out infinite; }
.enf-aranha-desce { position: absolute; left: -8px; top: -1px; width: 16px; animation: enf-desce 17s ease-in-out infinite; }
.enf-aranha-desce svg { display: block; width: 100%; height: auto; overflow: visible; }
.enf-teia-barra .enf-aranha-desce svg { filter: drop-shadow(0 0 2px rgba(205, 180, 255, .75)); }
.enf-teia-treino .enf-aranha-desce { left: -9px; width: 18px; }
.enf-teia-treino .enf-aranha-desce svg { filter: drop-shadow(0 1px 1.5px rgba(20, 8, 60, .5)); }
@keyframes enf-fio { 0%, 52%, 96%, 100% { transform: scaleY(0); } 64%, 80% { transform: scaleY(1); } 70% { transform: scaleY(.92); } }
@keyframes enf-desce { 0%, 52%, 96%, 100% { transform: translateY(0); } 64%, 80% { transform: translateY(var(--desce)); } 70% { transform: translateY(calc(var(--desce) * .92)); } }
@keyframes enf-balanco { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.ini-treino > .enf-teia-box { z-index: -1; }
@media (min-width: 721px) { .ini-treino > .enf-teia-box { display: none; } }
@media (max-height: 520px) { .side-rail > .enf-teia-box { display: none; } }

/* Morcegos que saem do botão (enfRevoada) */
.enf-revoada { position: fixed; left: 0; top: 0; z-index: 2550; pointer-events: none; will-change: transform, opacity; }
.enf-revoada svg { display: block; width: 100%; height: auto; overflow: visible; }
:root[data-theme="dark"] .enf-revoada svg { filter: drop-shadow(0 0 5px rgba(170, 125, 255, .6)); }

/* Durante as questões a aranha fica quieta; "Reduzir animações" para tudo */
body.in-quiz .enf-aranha { display: none; }
html.reduce-motion .rail-bottom::after, html.reduce-motion .enf-teia-box * { animation: none !important; }
html.reduce-motion .enf-revoada { display: none; }

/* =================================================================
   "Me explique melhor": aula rápida da questão errada (js/aulas.js)
   ================================================================= */
.aula-vaga { margin-top: 12px; }
.aula-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--blue) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, var(--surface)), color-mix(in srgb, #B07CFF 16%, var(--surface)));
  color: var(--blue); font: 700 14px var(--font-sans); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.aula-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg);
  animation: aula-brilho 4.5s ease-in-out infinite;
}
@keyframes aula-brilho { 0%, 72% { left: -60%; } 100% { left: 130%; } }
.aula-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 22%, transparent); }
.aula-btn .icon-slot .icon, .aula-btn .ti { width: 17px; height: 17px; }
:root[data-theme="dark"] .aula-btn { color: #C9B6FF; }
:root[data-theme="dark"] .aula-btn::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); }

.aula {
  outline: none; display: grid; gap: 10px; padding: 16px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, var(--surface)), var(--surface) 70%);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--blue) 10%, transparent);
  animation: aula-abre .35s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes aula-abre { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.aula-cab { display: flex; align-items: center; gap: 10px; }
.aula-selo {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), #9B6BFF); color: #fff; font: 700 11px var(--font-mono); letter-spacing: .07em; text-transform: uppercase;
}
.aula-selo .ti, .aula-selo .icon { width: 13px; height: 13px; }
.aula-tema { color: var(--muted); font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aula-fechar { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.aula-fechar:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }

.aula-passo, .aula-regra, .aula-teste { animation: aula-surge .45s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d, 0s); }
@keyframes aula-surge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aula-passo { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.aula-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.aula-ic .ti, .aula-ic .icon { width: 16px; height: 16px; }
.aula-erro .aula-ic { background: #E5486E; }
.aula-certa .aula-ic { background: #12A07C; }
.aula-truque .aula-ic { background: #E39A1B; }
.aula-passo h4, .aula-teste h4 { margin: 4px 0 6px; font: 700 14.5px var(--font-serif); color: var(--ink); }
.aula-passo p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.aula-passo p + p { margin-top: 8px; }
.aula-alt { padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, #E5486E 8%, var(--surface)); color: var(--muted) !important; font-size: 13.5px !important; }
.aula-alt.is-certa { background: color-mix(in srgb, #12A07C 9%, var(--surface)); }
.aula-alt mark { background: color-mix(in srgb, #E5486E 26%, transparent); color: var(--ink); padding: 1px 3px; border-radius: 4px; font-weight: 700; text-decoration: underline wavy #E5486E; text-underline-offset: 3px; }
.aula-passos { margin: 0; padding-left: 0; list-style: none; counter-reset: aula; display: grid; gap: 6px; }
.aula-passos li { counter-increment: aula; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.aula-passos li::before { content: counter(aula); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #12A07C 16%, var(--surface)); color: #0E8566; font: 700 12px var(--font-mono); }

.aula-regra { padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 16%, var(--surface)), color-mix(in srgb, #B07CFF 14%, var(--surface))); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); }
.aula-regra span { display: flex; align-items: center; gap: 6px; font: 700 11px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
:root[data-theme="dark"] .aula-regra span { color: #C9B6FF; }
.aula-regra span .ti, .aula-regra span .icon { width: 14px; height: 14px; }
.aula-regra p { margin: 6px 0 0; font: 600 15px/1.5 var(--font-sans); color: var(--ink); }

.aula-teste { padding: 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--blue) 35%, var(--border)); }
.aula-teste h4 { display: flex; align-items: center; gap: 6px; margin-top: 0; }
.aula-teste h4 .ti, .aula-teste h4 .icon { width: 16px; height: 16px; color: var(--gold); }
.aula-teste-sub { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.aula-teste-item { padding: 10px 0; border-top: 1px solid var(--border); }
.aula-teste-item:first-of-type { border-top: 0; }
.aula-teste-frase { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.aula-teste-frase mark { background: color-mix(in srgb, var(--gold) 26%, transparent); color: var(--ink); padding: 1px 2px; margin: 0; border-radius: 4px; font-weight: 700; }
.aula-teste-ops { display: flex; gap: 8px; }
.aula-op { padding: 7px 16px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font: 700 13px var(--font-sans); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.aula-op:hover { border-color: var(--blue); }
.is-respondido .aula-op { pointer-events: none; opacity: .55; }
.is-respondido .aula-op.is-escolhida { opacity: 1; }
.is-acerto .aula-op.is-escolhida { border-color: #12A07C; background: color-mix(in srgb, #12A07C 12%, var(--surface)); color: #0E8566; }
.is-erro .aula-op.is-escolhida { border-color: #E5486E; background: color-mix(in srgb, #E5486E 10%, var(--surface)); color: #C2324F; }
.is-respondido .aula-op.is-correta { opacity: 1; border-style: dashed; border-color: #12A07C; color: #0E8566; }
.aula-teste-porque { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); animation: aula-surge .3s ease both; }
.is-acerto .aula-teste-porque b { color: #0E8566; }
.is-erro .aula-teste-porque b { color: #C2324F; }
:root[data-theme="dark"] .is-acerto .aula-op.is-escolhida, :root[data-theme="dark"] .is-acerto .aula-teste-porque b, :root[data-theme="dark"] .is-respondido .aula-op.is-correta { color: #4FD8AE; }
:root[data-theme="dark"] .is-erro .aula-op.is-escolhida, :root[data-theme="dark"] .is-erro .aula-teste-porque b { color: #FF7D99; }
.aula-teste-fim { margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--gold) 12%, var(--surface)); font: 700 13.5px var(--font-sans); color: var(--ink); animation: aula-surge .3s ease both; }

.aula-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 2px; }
.aula-licao { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 11px; border: 0; background: var(--blue); color: #fff; font: 700 13.5px var(--font-sans); cursor: pointer; }
.aula-licao:hover { filter: brightness(1.07); }
.aula-licao .ti, .aula-licao .icon, .aula-reportar .ti, .aula-reportar .icon { width: 15px; height: 15px; }
.aula-reportar { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; color: var(--muted); font: 600 12.5px var(--font-sans); cursor: pointer; }
.aula-reportar:hover { color: var(--ink); text-decoration: underline; }
/* carregando o arquivo do assunto / sem aula / falha */
.aula-esqueleto { display: grid; gap: 10px; }
.aula-esqueleto span { height: 64px; border-radius: 12px; background: linear-gradient(100deg, var(--surface) 30%, color-mix(in srgb, var(--blue) 8%, var(--surface)) 50%, var(--surface) 70%) 0 0 / 300% 100%; border: 1px solid var(--border); animation: aula-esq 1.2s linear infinite; }
.aula-esqueleto span:nth-child(2) { height: 92px; }
@keyframes aula-esq { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.aula-aviso { margin: 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.aula-falha { margin: 8px 0 0; color: #C2324F; font-size: 13px; font-weight: 600; }
:root[data-theme="dark"] .aula-falha { color: #FF7D99; }
@media (max-width: 720px) {
  /* no celular o ícone vai na linha do título e o texto usa a largura toda */
  .aula { padding: 10px; }
  .aula-passo { grid-template-columns: 26px minmax(0, 1fr); gap: 8px 10px; padding: 12px; }
  .aula-passo > div { display: contents; }
  .aula-passo > div > * { grid-column: 1 / -1; }
  .aula-passo > div > h4 { grid-column: 2; align-self: center; margin: 0; }
  .aula-passo > div > p + p { margin-top: 0; }
  .aula-ic { width: 26px; height: 26px; border-radius: 9px; }
  .aula-tema { display: none; }
}
html.reduce-motion .aula, html.reduce-motion .aula *, html.reduce-motion .aula-btn::after { animation: none !important; }