* { 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, .goal-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 ---------------- */
.home-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 18px; }
.hero-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.hero-heading { font-family: var(--font-serif); font-size: 23px; margin: 0 0 10px; }
.hero-copy { color: var(--muted); margin: 0 0 20px; max-width: 480px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.streak-card {
  padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 2px; color: var(--coral);
}
.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; }
}

/* ---------------- 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; }

.streak-number { font-family: var(--font-serif); font-size: 40px; font-weight: 700; color: var(--ink); }
.streak-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.streak-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

.goal-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 18px; }
.goal-card, .focus-card { padding: 22px; }
.goal-meter { margin-bottom: 16px; }
.goal-meter:last-child { margin-bottom: 0; }
.goal-heading { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin-bottom: 7px; }
.goal-heading span { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.goal-track span { display: block; height: 100%; background: var(--teal); border-radius: 4px; transition: width 0.5s ease; }
.goal-meter small { color: var(--muted); font-size: 11.5px; }

.focus-card p { color: var(--muted); font-size: 13px; margin: 8px 0 16px; }

.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-item.unlocked.tier-bronze .title-medal { background: #ead3bf; color: #8d4f26; }
.title-item.unlocked.tier-silver .title-medal { background: #e2e5eb; color: #687183; }
.title-item.unlocked.tier-gold .title-medal { background: var(--gold-soft); color: var(--gold); }
.title-item.unlocked.tier-legendary .title-medal { background: var(--blue-soft); color: var(--blue); }
.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-hero, .goal-grid, .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); }

/* ---------- Atalhos da home (grade de blocos) ---------- */
.menu-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin: 22px 0 6px;
}
.menu-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 118px; padding: 16px; text-align: left;
  border: 1px solid transparent; border-radius: var(--radius);
  background: linear-gradient(150deg, #4C34B8, #2E1E77);
  color: #fff; box-shadow: var(--shadow);
  transition: transform .18s ease;
}
.menu-tile:hover { transform: translateY(-3px); }
.menu-tile i { font-size: 26px; opacity: .92; }
.menu-tile span { font-family: var(--font-serif); font-weight: 700; font-size: 14.5px; letter-spacing: .01em; }
.menu-tile small { display: block; font-weight: 400; font-size: 11.5px; opacity: .72; margin-top: 2px; }
.menu-tile.tile-soft { background: var(--surface); color: var(--ink); border-color: var(--border); }
.menu-tile.tile-soft i { color: var(--blue); }
.menu-tile.tile-soft small { opacity: 1; color: var(--muted); }

/* ---------- Trilha recomendada ---------- */
.reco-card { margin-top: 18px; padding: 20px; border-radius: var(--radius); }
.reco-topics { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 16px; }
.reco-topics span {
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px;
  background: var(--blue-soft); color: var(--blue); font-weight: 600;
}

/* ---------- 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) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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, .menu-tile: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; }
.menu-tile .icon-slot .icon { width: 26px; height: 26px; }

/* ---------- 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; }
.reco-why { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; max-width: 58ch; }

/* ---------------- 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; }
.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; }

/* =================================================================
   Títulos raros: prata metálico, ouro cintilante, lendário neon
   ================================================================= */
.title-fx { position: relative; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.title-fx-silver {
  background: linear-gradient(100deg, #6e7a8c, #b9c3d1 45%, #6e7a8c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}
.title-fx-gold {
  background: linear-gradient(100deg, #9a6a0a 0%, #e8b42a 30%, #fff1b8 50%, #e8b42a 70%, #9a6a0a 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800;
  animation: title-shimmer 3.2s linear infinite;
}
.title-fx-legendary {
  background: linear-gradient(90deg, #8b5cff, #ff4fd8, #3fd0ff, #8b5cff);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800;
  animation: title-shimmer 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(160, 100, 255, .55));
}
@keyframes title-shimmer { to { background-position: -250% 0; } }
.profile-header-title.title-tier-gold, .duelo-confronto-titulo.title-tier-gold { background: linear-gradient(140deg, rgba(232,180,42,.18), rgba(255,241,184,.25)); box-shadow: 0 0 0 1px rgba(232,180,42,.45); }
.profile-header-title.title-tier-legendary, .duelo-confronto-titulo.title-tier-legendary {
  background: linear-gradient(140deg, rgba(139,92,255,.18), rgba(255,79,216,.14));
  box-shadow: 0 0 0 1px rgba(139,92,255,.55), 0 0 18px rgba(139,92,255,.35);
  animation: title-halo 2.6s ease-in-out infinite;
}
@keyframes title-halo { 50% { box-shadow: 0 0 0 1px rgba(255,79,216,.6), 0 0 26px rgba(255,79,216,.35); } }
/* Reduzir animações: ajuste do próprio app (Perfil → engrenagem). */
html.reduce-motion .title-fx-gold,
html.reduce-motion .title-fx-legendary,
html.reduce-motion .profile-header-title.title-tier-legendary,
html.reduce-motion .duelo-confronto-titulo.title-tier-legendary { animation: none; }

/* =================================================================
   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); } }
/* Legibilidade dos títulos especiais: tons mais fechados no texto pequeno e
   sobre as faixas metálicas do pódio. */
.title-fx-silver { background-image: linear-gradient(100deg, #48525f, #8592a5 50%, #48525f); }
:root[data-theme="dark"] .title-fx-silver { background-image: linear-gradient(100deg, #b4bfcd, #eef2f7 50%, #b4bfcd); }
.ranking-row.tier .title-fx-gold { background-image: linear-gradient(100deg, #6b4300 0%, #a8740a 35%, #3d2600 50%, #a8740a 65%, #6b4300 100%); filter: none; }
.ranking-row.tier .title-fx-silver { background-image: linear-gradient(100deg, #39424f, #5f6b7c 50%, #39424f); }
.ranking-row.tier .title-fx-legendary { background-image: linear-gradient(90deg, #5b2bd6, #b0168c, #1666a8, #5b2bd6); filter: drop-shadow(0 0 4px rgba(255,255,255,.7)); }
.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-hero {
  width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #7C5CFF, #4B31C4); color: #FFE27A; box-shadow: 0 10px 24px rgba(91, 56, 222, .35);
}
.energia-hero .energia-icone { width: 30px; height: 30px; }
.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-barra { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; max-width: 420px; margin: 0 auto; }
.energia-seg { height: 12px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); }
.energia-seg.on { background: linear-gradient(180deg, #9B82FF, #6B4EE6); border-color: transparent; }
.energia-numero { margin-top: 8px; font: 600 14px var(--font-mono); color: var(--muted); }
.energia-numero strong { font-size: 22px; color: var(--ink); }
.energia-extra { margin-left: 8px; color: var(--teal); font-size: 12px; }
.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)
   ================================================================= */
.hoje-atalhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.hoje-card {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; cursor: pointer;
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); color: var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
.hoje-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.hoje-card strong { display: block; font-size: 14px; }
.hoje-card small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.hoje-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--blue-soft); color: var(--blue); }
.hoje-qdia .hoje-ico { background: linear-gradient(140deg, #7C5CFF, #D6467A); color: #fff; }
.hoje-qdia:not(.is-feita) .hoje-ico { animation: qdia-pulso 2.2s ease-in-out infinite; }
@keyframes qdia-pulso { 50% { box-shadow: 0 0 0 6px rgba(124, 92, 255, .18); } }
.hoje-badge { position: absolute; top: 10px; right: 12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--coral); color: #fff; font: 700 11.5px/22px var(--font-mono); text-align: center; font-style: normal; }
@media (max-width: 720px) { .hoje-atalhos { grid-template-columns: 1fr; gap: 8px; } }

/* =================================================================
   Missões e baús
   ================================================================= */
.missoes-resumo, .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-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 {
  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); }

/* ---------------- Início: banner e atalhos ---------------- */
.hero-card { position: relative; overflow: hidden; }
.hero-card > * { position: relative; z-index: 1; }
.hero-card > .hero-art {
  position: absolute; z-index: 0; right: -26px; bottom: -30px; width: 170px; height: 170px; opacity: .22; pointer-events: none;
}
@media (min-width: 900px) { .hero-card > .hero-art { right: 18px; bottom: 50%; transform: translateY(50%); width: 230px; height: 230px; opacity: .9; } }
.menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.menu-tile { align-items: center; text-align: center; }
@media (max-width: 760px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.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) */
.mold-louros .fr { inset: -19%; }
.mold-louros .estrela { transform-origin: 100px 22px; animation: brilhar 2.6s ease-in-out infinite; }
.mold-louros .brilho-folha { animation: varrer 3.2s ease-in-out infinite; }

/* 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; }
@media (prefers-reduced-motion: reduce) { .av-mold *, .av-mold *::after, .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; }
.ranking-avatar-wrap .av-mold.mold-louros > .fr, .amigo-row .av-mold.mold-louros > .fr { inset: -24%; }

/* 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 ---------- */
.bg-aurora { background: #120B33; }
.bg-aurora i { position: absolute; width: 70%; height: 140%; border-radius: 50%; filter: blur(28px); opacity: .85; }
.bg-aurora i:nth-child(1) { background: #6B4EE6; left: -20%; top: -40%; animation: deriva 9s ease-in-out infinite alternate; }
.bg-aurora i:nth-child(2) { background: #3FD1B4; left: 35%; top: -60%; animation: deriva 11s ease-in-out infinite alternate-reverse; }
.bg-aurora i:nth-child(3) { background: #FF7BA8; left: 60%; top: 10%; width: 50%; animation: deriva 13s ease-in-out infinite alternate; }
@keyframes deriva { from { transform: translate(0,0) scale(1); } to { transform: translate(18%, 12%) scale(1.15); } }

.bg-caderno { background-color: #FBF8EE; background-image:
  linear-gradient(90deg, transparent 38px, rgba(214,70,122,.55) 38px, rgba(214,70,122,.55) 40px, transparent 40px),
  repeating-linear-gradient(0deg, transparent 0 21px, rgba(47,127,216,.28) 21px 22px); }
.bg-caderno .rabisco { position: absolute; inset: auto 16px 18px auto; width: 58%; height: auto; }
.bg-caderno .rabisco path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: escrever 4s ease-in-out infinite; }
@keyframes escrever { 0% { stroke-dashoffset: 420; } 55%,80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.bg-ceu { background: linear-gradient(180deg, #070A24, #1B1250 70%, #3B2A8C); }
.bg-ceu canvas { width: 100%; height: 100%; display: block; }

.bg-mapa { background: #0F1A2E; display: grid; grid-template-columns: repeat(var(--cols, 26), 1fr); gap: 3px; padding: 8px; align-content: start; }
.bg-mapa span { aspect-ratio: 1; border-radius: 2px; background: #3FD1B4; animation: pulsar 3s ease-in-out infinite; }
@keyframes pulsar { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }

.bg-ondas { background: linear-gradient(180deg, #F0B942, #D6467A); }
.bg-ondas svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 70%; }
.bg-ondas .o1 { animation: onda 9s linear infinite; } .bg-ondas .o2 { animation: onda 14s linear infinite reverse; }
@keyframes onda { to { transform: translateX(-50%); } }


.bg-mapa { --cols: 26; }

/* 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.active { border-color: var(--blue); background: var(--blue-soft); }
.trilha-materia.active > .icon-slot { background: 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 > 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: flex; gap: 16px; align-items: center; padding: 18px; margin-bottom: 18px; border: 1.5px solid var(--chefe); }
.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); }
.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; }

/* ---- 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; }
@media (prefers-reduced-motion: reduce) { .rank-emblem-anim::after, .rank-emblem-anim::before, .rank-emblem-anim > img { animation: none !important; } }

/* ---- Trilha: ilustrações nas laterais ---- */
.trilha-caminho { position: relative; }
.trilha-deco { align-self: stretch; position: relative; height: 0; margin-top: -14px; pointer-events: none; z-index: 0; }
.trilha-deco-arte { position: absolute; top: -4px; width: clamp(84px, 26vw, 128px); aspect-ratio: 1; opacity: 0; transform: scale(.6) translateY(16px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,1.5,.4,1); }
.trilha-deco.lado-esq .trilha-deco-arte { left: max(0px, calc(50% - 190px)); }
.trilha-deco.lado-dir .trilha-deco-arte { right: max(0px, calc(50% - 190px)); }
.trilha-deco-arte.visivel { opacity: 1; transform: none; }
.trilha-deco-arte svg { width: 100%; height: 100%; display: block; overflow: visible; animation: ta-flutua 4.2s ease-in-out infinite; animation-delay: var(--atraso, 0s); }
.trilha-no-wrap { z-index: 1; }
@keyframes ta-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.trilha-deco svg * { transform-box: view-box; }
.ta-sobe { animation: ta-sobe 2.6s ease-in-out infinite; }
@keyframes ta-sobe { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-6px); opacity: .75; } }
.ta-d1 { animation-delay: .2s !important; } .ta-d2 { animation-delay: .5s !important; } .ta-d3 { animation-delay: .9s !important; } .ta-d4 { animation-delay: 1.3s !important; }
.ta-balanca { animation: ta-balanca 3.2s ease-in-out infinite; }
@keyframes ta-balanca { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.ta-pende { animation: ta-pende 3.6s ease-in-out infinite; }
@keyframes ta-pende { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.ta-pula { animation: ta-pula 2.2s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes ta-pula { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
.ta-escreve { animation: ta-escreve 1.8s ease-in-out infinite; }
@keyframes ta-escreve { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -2px) rotate(4deg); } }
.ta-traco { stroke-dasharray: 120; animation: ta-traco 3.6s ease-in-out infinite; }
@keyframes ta-traco { 0% { stroke-dashoffset: 120; } 60%, 100% { stroke-dashoffset: 0; } }
.ta-tecla { animation: ta-tecla 2.4s ease-in-out infinite; }
@keyframes ta-tecla { 0%, 80%, 100% { opacity: 1; } 90% { opacity: .35; } }
.ta-rola { animation: ta-rola 4s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes ta-rola { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg) translateY(-6px); } 90% { transform: rotate(6deg); } }
.ta-martela { animation: ta-martela 2s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes ta-martela { 0%, 55%, 100% { transform: rotate(0); } 30% { transform: rotate(-22deg); } 50% { transform: rotate(4deg); } }
.ta-fita, .ta-bandeira { animation: ta-fita 1.6s ease-in-out infinite; }
@keyframes ta-fita { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-8deg) scaleX(.85); } }
.ta-cursor { animation: ta-cursor 1s steps(1) infinite; }
@keyframes ta-cursor { 50% { opacity: 0; } }
.ta-flutua-x { animation: ta-flutua-x 5s ease-in-out infinite; }
@keyframes ta-flutua-x { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.ta-sobe-seta { animation: ta-sobe-seta 1.8s ease-in-out infinite; }
@keyframes ta-sobe-seta { 0% { transform: translateY(6px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
.ta-pisca { animation: ta-cursor 2s steps(1) infinite; }
.ta-onda { animation: ta-onda 2.1s ease-in-out infinite; }
@keyframes ta-onda { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
.ta-agulha { animation: ta-agulha 3s ease-in-out infinite; }
@keyframes ta-agulha { 0%, 100% { transform: rotate(-18deg); } 35% { transform: rotate(14deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
html.reduce-motion .trilha-deco-arte, html.reduce-motion .trilha-deco-arte * { animation: none !important; transition: none !important; }
html.reduce-motion .trilha-deco-arte { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .trilha-deco-arte, .trilha-deco-arte * { animation: none !important; transition: none !important; } .trilha-deco-arte { opacity: 1; transform: none; } }

/* 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; }
@media (prefers-reduced-motion: reduce) { .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-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); }