/* =============================================================================
   Concurseiro RPG — interface server-side
   Tema, animações, filtros e todos os componentes das views PHP.
   ========================================================================== */

/* Paleta inspirada em Arcane: hextech teal, bronze dourado e neon magenta. */
:root {
  --bg-deep: #16050f;
  --bg-panel: #320c22;
  --bg-panel-soft: #41112d;
  --bg-input: #27081a;
  --line: #692d50;
  --line-soft: #511d3b;
  --ink: #fbe9f3;
  --ink-dim: #cc98b6;
  --gold: #e8796a;
  --gold-deep: #b03b2c;
  --purple: #b07bff;
  --purple-deep: #ce4a97;
  --magenta: #ff4fa3;
  --magenta-deep: #c1247a;
  --green: #35dd9a;
  --red: #ff756e;
  --cyan: #a6d223;
  --cyan-soft: #fb73c2;
  --shadow: 0 18px 40px rgba(18,2,11, 0.6);
  --radius: 16px;
  --radius-sm: 10px;
}

/* Tipografia clássica local (SIL Open Font License) */
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Marcellus';
  src: url('../fonts/marcellus-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Títulos com peso de jogo: capitulares ornamentadas e condensada de interface. */
@font-face {
  font-family: 'CinzelDecorativa';
  src: url('../fonts/cinzel-decorative-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1100px 520px at 78% -10%, #531439 0%, transparent 60%),
    radial-gradient(760px 420px at -10% 110%, #2a1440 0%, transparent 55%),
    radial-gradient(520px 300px at 100% 85%, rgba(193, 36, 122, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #26091a 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
}

h1, .auth-hero h1, .page-header__title h1 {
  font-family: 'Cinzel', Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  font-weight: 700;
}
h2, h3, .auth-title h2, .exam-section-title {
  font-family: 'Marcellus', Georgia, serif;
  letter-spacing: 0.03em;
  font-weight: 400;
}

/* Ícones lineares (substituem emojis) */
.ico { width: 18px; height: 18px; vertical-align: -3px; flex-shrink: 0; }
.ico--lg { width: 34px; height: 34px; }
.ico--md { width: 24px; height: 24px; }
.ico--sm { width: 15px; height: 15px; }
.page-emblem .ico--lg, .crest img { filter: drop-shadow(0 2px 6px rgba(22,5,15, 0.8)); }
.crest img { width: 74%; height: 74%; }
.vital > .ico { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.auth-feature-grid .ico--md { margin-bottom: 2px; }

/* Névoa hextech de fundo: feixes teal e magenta em deriva contínua */
.sky-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 260px at 20% 20%, rgba(166,210,35, 0.1), transparent 70%),
    radial-gradient(620px 300px at 80% 70%, rgba(176, 123, 255, 0.09), transparent 70%),
    radial-gradient(420px 240px at 60% 30%, rgba(255, 79, 163, 0.06), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 140px, rgba(166,210,35, 0.022) 140px 142px);
  animation: skyDrift 26s ease-in-out infinite alternate;
}

@keyframes skyDrift {
  from { transform: translate3d(0, 0, 0) scale(1); filter: hue-rotate(0deg); }
  to   { transform: translate3d(-30px, 20px, 0) scale(1.06); filter: hue-rotate(24deg); }
}

/* ---------------------------------------------------------------- animações */

.fade-in-up { animation: fadeInUp 0.5s ease both; }
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.float-anim { display: inline-block; animation: floaty 3.4s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.pulse-glow { animation: pulseGlow 2.6s ease-in-out infinite; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,121,108, 0.3); }
  50% { box-shadow: 0 0 16px 2px rgba(217,121,108, 0.18); }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------------- painéis */

/* Painel estilo MMO de navegador: moldura dourada ornamentada em 9-slice */
.game-panel {
  background: linear-gradient(180deg, var(--bg-panel-soft) 0%, var(--bg-panel) 100%);
  background-clip: padding-box;
  border: 10px solid transparent;
  border-image: url('../img/ui/moldura-ouro.svg') 32 / 12px stretch;
  border-radius: 4px;
  box-shadow: var(--shadow), inset 0 0 30px rgba(18,2,11, 0.4);
  padding: 14px;
  margin-bottom: 16px;
}
.contest-mini-card, .auth-card {
  border-image-source: url('../img/ui/moldura-rica.svg');
}

/* Faixa de título estilo MMO: banda com gradiente dourado sutil */
.panel-ribbon, .card-heading {
  display: flex; align-items: center; gap: 8px;
  margin: -4px -4px 12px; padding: 8px 10px;
  background: linear-gradient(90deg, rgba(232,121,106, 0.14), rgba(232,121,106, 0.03) 60%, transparent);
  border-bottom: 1px solid rgba(176,59,44, 0.45);
  border-radius: 3px 3px 0 0;
  font-size: 12.5px; letter-spacing: 0.08em;
}
.panel-ribbon strong, .card-heading strong { color: var(--gold); }
.card-heading small { margin-left: auto; color: var(--ink-dim); letter-spacing: 0.04em; }
.panel-ribbon a, .card-heading a {
  margin-left: auto; color: var(--cyan); text-decoration: none; font-weight: 700;
}
.panel-ribbon a:hover, .card-heading a:hover { filter: brightness(1.3); }

.empty-note { color: var(--ink-dim); font-style: italic; margin: 8px 0; }
.muted { color: var(--ink-dim); }
.text-link { color: var(--cyan); text-decoration: none; font-weight: 600; }
.text-link:hover { text-decoration: underline; }
.text-ok { color: var(--green); }
.text-bad { color: var(--red); }
.inline-form { display: inline-block; margin: 4px 0 0; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line);
}
.badge--gold { color: #330600; background: linear-gradient(180deg, #ff988a, var(--gold)); border-color: var(--gold-deep); }
.badge--green { background: rgba(53, 221, 138, 0.16); border-color: rgba(53, 221, 138, 0.5); color: var(--green); }

/* ------------------------------------------------------------------ botões */

/* Botões metálicos estilo Wartune: brilho superior, relevo e contorno escuro */
.game-button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid #2f0b20; border-radius: 8px;
  background: linear-gradient(180deg, #8f2d66 0%, #6d194a 48%, #501136 52%, #611441 100%);
  color: var(--ink); font-weight: 800; font-size: 14px; letter-spacing: 0.03em;
  cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(18,2,11, 0.5), 0 2px 6px rgba(18,2,11, 0.5);
  text-shadow: 0 1px 2px rgba(18,2,11, 0.7);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.game-button::after {
  content: ""; position: absolute; inset: 1px 1px 55% 1px; border-radius: 7px 7px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02));
  pointer-events: none;
}
.game-button:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.15) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 14px rgba(251,107,191, 0.35), 0 4px 10px rgba(18,2,11, 0.5); }
.game-button:active { transform: translateY(1px) scale(0.99); filter: brightness(0.95); }

.game-button--gold {
  color: #330f0a;
  background: linear-gradient(180deg, #ffb7ad 0%, #e8796a 48%, #c94b3a 52%, #dc6757 100%);
  border-color: #6b1c12;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.game-button--gold:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 16px rgba(232,121,106, 0.55), 0 4px 10px rgba(18,2,11, 0.5); }
.game-button--purple {
  background: linear-gradient(180deg, #d3b3ff 0%, #b07bff 48%, #8452d8 52%, #9a66ea 100%);
  border-color: #6e214e; color: #200b40;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.game-button--purple:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 16px rgba(176, 123, 255, 0.5), 0 4px 10px rgba(18,2,11, 0.5); }
.game-button--ghost { background: transparent; border-color: var(--line); color: var(--ink-dim); }
.game-button--ghost:hover { color: var(--ink); }
.game-button--wide { width: 100%; }
.game-button--small { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; }

/* -------------------------------------------------------------------- HUD */

/* Regra do dono: o status do jogador é peça central — grande, legível e
   fundido à tela (borda a borda, sem moldura de caixa destacada). */
.hud-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  margin: 0 0 12px; padding: 14px clamp(14px, 3vw, 30px);
  background: linear-gradient(180deg, rgba(48,12,33, 0.96), rgba(30,7,20, 0.88));
  border: 0;
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 14px 34px rgba(20, 4, 13, 0.45);
}

.player-block { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.player-block__copy { display: grid; gap: 3px; font-size: 14px; color: var(--ink-dim); }
.player-block__copy strong { font-size: 18px; color: var(--ink); }
.player-block__copy b { color: var(--gold); font-size: 14.5px; }

.avatar-frame {
  display: grid; place-items: center; width: 68px; height: 68px; font-size: 34px;
  background: radial-gradient(circle at 30% 25%, #831f59, #4e0f34);
  border: 3px solid var(--gold); border-radius: 22px;
  filter: drop-shadow(0 4px 12px rgba(255,111,92, 0.3));
}

.xp-track { display: block; width: min(220px, 40vw); height: 10px; background: #410b2a; border-radius: 999px; overflow: hidden; border: 1px solid var(--line-soft); }
.xp-track i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--cyan), #fa3aaa);
  background-size: 200% 100%;
  animation: shimmer 2.5s linear infinite;
  border-radius: 999px;
}

.hud-resources { display: flex; gap: 10px; }
.hud-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border-radius: 999px; border: 1px solid var(--line); font-size: 15.5px;
  background: linear-gradient(180deg, #611441, #4b0f32);
}
.hud-chip strong { font-size: 16px; }
.hud-chip--coin strong { color: var(--gold); }
.hud-chip--gem strong { color: var(--purple); }

.hud-vitals { display: flex; gap: 12px; flex: 1; min-width: 280px; }
.vital { display: flex; gap: 10px; align-items: center; flex: 1; }
.vital > span { font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.vital > div { flex: 1; display: grid; gap: 3px; font-size: 13px; color: var(--ink-dim); }
.vital strong { font-size: 15px; color: var(--ink); }
.vital i { display: block; height: 9px; border-radius: 999px; background: #410b2a; overflow: hidden; border: 1px solid var(--line-soft); }
.vital i b { display: block; height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.vital--energy i b { background: linear-gradient(90deg, #ff988a, #ff462e); }
.vital--focus i b { background: linear-gradient(90deg, #fb73c2, #fa34a7); }
.vital--stress i b { background: linear-gradient(90deg, #ff9d8a, var(--red)); }

.reputation-block {
  display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); color: var(--ink);
  background: linear-gradient(180deg, #611441, #4b0f32);
}
.reputation-block small { grid-column: 2; font-size: 12px; color: var(--ink-dim); letter-spacing: 0.08em; }
.reputation-block span { grid-row: span 2; font-size: 24px; }
.reputation-block strong { color: var(--gold); font-size: 16px; }

.hud-actions { display: flex; gap: 10px; margin-left: auto; }
.round-button {
  display: grid; place-items: center; width: 48px; height: 48px; font-size: 20px;
  border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  background: linear-gradient(180deg, #6d194a, #541239); color: var(--ink);
  text-decoration: none; transition: transform 0.15s ease, filter 0.15s ease;
}
.round-button:hover { transform: rotate(8deg) scale(1.08); filter: brightness(1.2); }

/* -------------------------------------------------------------- navegação */

.main-nav {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px 14px; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(57,15,39, 0.95), rgba(37,8,25, 0.95));
  background-clip: padding-box;
  border: 8px solid transparent;
  border-image: url('../img/ui/moldura-ouro.svg') 32 / 10px stretch;
  border-radius: 4px; backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.nav-badge {
  position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px;
  display: grid; place-items: center; padding: 0 4px;
  font: 800 12px/1 "Segoe UI", sans-serif; font-style: normal; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff8d7e, #e33325 60%, #9c150b);
  border: 1px solid #ffd9b0; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  animation: badgePulse 1.6s ease-in-out infinite;
}
.main-nav__item { position: relative; }
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.main-nav__item {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-dim);
  font-size: 13px; border: 1px solid transparent;
  transition: all 0.15s ease;
}
@media (max-width: 1180px) {
  .main-nav__item { padding: 8px 10px; }
  .main-nav__item strong { display: none; }
  .main-nav__item .ico { width: 21px; height: 21px; }
}
.main-nav__item strong { font-family: 'Marcellus', Georgia, serif; font-weight: 400; letter-spacing: 0.05em; }
.main-nav__item .ico { opacity: 0.85; }
.main-nav__item.is-active .ico { filter: brightness(0.35) sepia(1) saturate(3); }
.main-nav__item:hover { color: var(--ink); background: rgba(109,25,74, 0.5); }
.main-nav__item.is-active {
  color: #330600; font-weight: 800;
  background: linear-gradient(180deg, #ff988a, var(--gold));
  border-color: var(--gold-deep);
  box-shadow: 0 4px 14px rgba(255,111,92, 0.3);
}

.page-shell { max-width: 1280px; margin: 0 auto; padding: 0 12px 30px; }

.site-footer {
  max-width: 1280px; margin: 10px auto 26px; padding: 0 16px;
  color: var(--ink-dim); font-size: 12.5px; text-align: center;
}

/* ------------------------------------------------------------------- toast */

.toast-stack { position: fixed; top: 14px; right: 14px; z-index: 60; display: grid; gap: 8px; max-width: 380px; }
.toast {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  background: rgba(55,10,36, 0.96); background-clip: padding-box;
  border: 8px solid transparent;
  border-image: url('../img/ui/moldura-ouro.svg') 32 / 9px stretch;
  border-radius: 4px; backdrop-filter: blur(8px);
  box-shadow: var(--shadow); animation: toastIn 0.35s ease both;
}
.toast p { margin: 0; font-size: 13.5px; }
.toast--success { border-color: rgba(53, 221, 138, 0.6); }
.toast--error { border-color: rgba(255, 117, 110, 0.65); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ------------------------------------------------------------ autenticação */

.theme-auth { display: block; }
.auth-shell {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px;
  max-width: 1100px; margin: 5vh auto; padding: 0 16px;
}
.auth-hero h1 { margin: 0; font-size: 34px; color: var(--gold); text-shadow: 0 3px 14px rgba(255,111,92, 0.3); }
.auth-hero h2 { color: var(--cyan); margin: 18px 0 6px; }
.auth-hero > p { color: var(--ink-dim); max-width: 60ch; }

.crest {
  display: grid; place-items: center; width: 56px; height: 56px; font-size: 28px;
  background: radial-gradient(circle at 30% 25%, #831f59, #4e0f34);
  border: 2px solid var(--gold); border-radius: 16px;
  filter: drop-shadow(0 6px 16px rgba(255,111,92, 0.35));
  animation: floaty 4s ease-in-out infinite;
}

.auth-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.auth-feature-grid article {
  padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: rgba(60,11,40, 0.6); display: grid; gap: 4px; font-size: 12.5px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.auth-feature-grid article:hover { transform: translateY(-3px); border-color: var(--cyan); }
.auth-feature-grid span { font-size: 20px; }
.auth-feature-grid small { color: var(--ink-dim); }

.auth-notice { font-size: 12px; color: var(--ink-dim); border-left: 3px solid var(--gold); padding-left: 10px; }

.auth-card { align-self: start; position: sticky; top: 18px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 16px; }
.auth-tabs a {
  padding: 10px; text-align: center; border-radius: var(--radius-sm);
  color: var(--ink-dim); text-decoration: none; font-weight: 700;
  border: 1px solid var(--line-soft);
}
.auth-tabs a.is-active {
  color: #330600; background: linear-gradient(180deg, #ff988a, var(--gold));
  border-color: var(--gold-deep);
}

.auth-form { display: grid; gap: 12px; }
.auth-title { display: flex; gap: 10px; align-items: center; }
.auth-title span { font-size: 26px; }
.auth-title small { letter-spacing: 0.14em; color: var(--ink-dim); font-size: 12px; }
.auth-title h2 { margin: 0; font-size: 20px; }

.field { display: grid; gap: 5px; font-size: 13px; }
.field > span { color: var(--ink-dim); font-weight: 600; }
.field input, .field select, .exam-question textarea, .filter-input, .filter-select {
  width: 100%; padding: 11px 12px; color: var(--ink); font: inherit;
  background: var(--bg-input); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field select:focus, .exam-question textarea:focus,
.filter-input:focus, .filter-select:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(251,107,191, 0.18);
}
.field.has-error input { border-color: var(--red); }
.field-error { color: var(--red); font-size: 12px; font-style: normal; }

.form-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-section { display: grid; gap: 6px; }
.form-label { color: var(--ink-dim); font-weight: 600; font-size: 13px; }

.avatar-option input:checked + span {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(255,111,92, 0.45);
  transform: scale(1.08);
}

.ranking-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-dim); }
.ranking-consent input { margin-top: 3px; accent-color: var(--gold); }

/* Honeypot invisível para humanos */
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }

/* Partículas decorativas do fundo de login */
.auth-particles { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.auth-particles i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,107,191, 0.9), transparent 70%);
  animation: particleFloat 14s linear infinite;
  opacity: 0.5;
}
.auth-particles i:nth-child(1) { left: 8%; animation-delay: 0s; }
.auth-particles i:nth-child(2) { left: 24%; animation-delay: -3s; width: 4px; height: 4px; }
.auth-particles i:nth-child(3) { left: 42%; animation-delay: -6s; }
.auth-particles i:nth-child(4) { left: 61%; animation-delay: -9s; width: 5px; height: 5px; }
.auth-particles i:nth-child(5) { left: 77%; animation-delay: -11s; }
.auth-particles i:nth-child(6) { left: 90%; animation-delay: -5s; width: 4px; height: 4px; }
@keyframes particleFloat {
  from { transform: translateY(105vh); opacity: 0; }
  12%  { opacity: 0.6; }
  88%  { opacity: 0.6; }
  to   { transform: translateY(-6vh); opacity: 0; }
}

/* ------------------------------------------------------------------ cidade */

.city-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  aspect-ratio: 16 / 10.2;
}
.city-stage__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: cityZoom 60s ease-in-out infinite alternate;
}
@keyframes cityZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.city-stage__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,5,19, 0.35) 0%, transparent 30%, transparent 70%, rgba(29,5,19, 0.5) 100%);
}
/* Ciclo dia→noite por overlay (para arte pintada estática em cidade-arte.*) */
.city-cycle {
  position: absolute; inset: 0; pointer-events: none;
  animation: cityDayNight 180s linear infinite;
}
@keyframes cityDayNight {
  0%, 38%   { background: transparent; }
  44%       { background: rgba(255, 154, 60, 0.16); }
  50%       { background: rgba(57,11,38, 0.32); }
  55%, 84%  { background: rgba(43,8,28, 0.5); }
  90%       { background: rgba(255, 176, 96, 0.12); }
  96%, 100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .city-cycle { animation: none; background: transparent; } }

/* Cena diurna: apenas uma vinheta leve para as placas lerem bem */
.city-stage--day .city-stage__shade {
  background: radial-gradient(120% 100% at 50% 40%, transparent 60%, rgba(27,7,19, 0.22) 100%);
}
.city-stage--day { border: 8px solid transparent; border-image: url('../img/ui/moldura-rica.svg') 32 / 10px stretch; border-radius: 4px; }

.city-title-badge {
  position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; align-items: center;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: rgba(42,8,28, 0.85); border: 1px solid var(--line);
  backdrop-filter: blur(6px); font-size: 12px;
}
.city-title-badge small { color: var(--ink-dim); letter-spacing: 0.1em; font-size: 11px; display: block; }
.city-title-badge strong { color: var(--gold); }

.camera-tip {
  position: absolute; top: 12px; right: 12px; padding: 7px 12px; font-size: 11.5px;
  background: rgba(42,8,28, 0.85); border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink-dim); backdrop-filter: blur(6px);
}

.location-hotspot {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 4px;
  text-decoration: none; color: var(--ink); z-index: 3;
}
.location-hotspot i {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2b8b0, var(--gold) 60%, var(--gold-deep));
  border: 1px solid rgba(242,184,176, 0.9);
  box-shadow: 0 0 0 3px rgba(217,121,108, 0.18), 0 3px 10px rgba(0, 0, 0, 0.6);
  animation: hotspotPulse 3.2s ease-in-out infinite;
}
@keyframes hotspotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217,121,108, 0.18), 0 3px 10px rgba(0, 0, 0, 0.6); }
  50% { box-shadow: 0 0 0 7px rgba(217,121,108, 0.08), 0 3px 10px rgba(0, 0, 0, 0.6); }
}
/* Placas de prédio estilo MMO: sempre visíveis, com moldura dourada */
.location-hotspot span {
  padding: 4px 12px; border-radius: 4px; font-size: 11px; white-space: nowrap;
  font-family: 'Marcellus', Georgia, serif; letter-spacing: 0.08em;
  background: linear-gradient(180deg, rgba(49,13,34, 0.95), rgba(25,6,17, 0.95));
  border: 1px solid #b03b2c; color: #f2b8b0;
  box-shadow: 0 2px 8px rgba(18,2,11, 0.7), inset 0 1px 0 rgba(242,184,176, 0.2);
  opacity: 1; transition: all 0.18s ease;
}
.location-hotspot:hover span, .location-hotspot:focus-visible span {
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(232,121,106, 0.5), 0 2px 8px rgba(18,2,11, 0.7);
  color: #fff2d4;
}
.location-hotspot:hover i { filter: brightness(1.25); transform: scale(1.15); }

.hotspot-contest i { background: radial-gradient(circle at 35% 30%, #e6d5ff, var(--purple) 60%, var(--purple-deep)); border-color: rgba(230, 213, 255, 0.85); }
.hotspot-contest span { border-color: var(--purple-deep); color: #fec9e8; }

/* Marcador de missão flutuante ("!") estilo Wartune */
.quest-marker {
  width: 26px; height: 36px;
  filter: drop-shadow(0 3px 6px rgba(18,2,11, 0.7));
  animation: markerBounce 1.4s ease-in-out infinite;
}
@keyframes markerBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.quest-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quest-mini-list li {
  display: flex; gap: 8px; align-items: center; font-size: 13px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: rgba(60,11,40, 0.6); border: 1px solid var(--line-soft);
}
.quest-mini-list li b { margin-left: auto; color: var(--ink-dim); }
.quest-mini-list li.is-done { border-color: rgba(53, 221, 138, 0.5); }
.quest-mini-list li.is-done b { color: var(--green); }

.ranking-mini-list, .ranking-full-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ranking-mini-list li.is-self { border-color: var(--gold); }
.mini-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 15px; background: #410b2a; border-radius: 8px; border: 1px solid var(--line-soft); }

.your-rank {
  display: flex; justify-content: space-between; align-items: center; margin-top: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px;
  background: rgba(255,111,92, 0.08); border: 1px dashed rgba(255,111,92, 0.45);
}
.your-rank b, .your-rank strong { color: var(--gold); }

/* ----------------------------------------------------------- mapa do Brasil */

.brazil-map { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.brazil-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 24px rgba(23,3,15, 0.6)); }

.map-city { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; z-index: 2; }
.map-city i {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fdbce2, var(--cyan) 60%, #9b1764);
  border: 1.5px solid #feebf6;
  box-shadow: 0 0 8px rgba(251,107,191, 0.65);
}
.map-city small {
  font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ink-dim);
  text-shadow: 0 1px 3px #17030f;
}
.map-city.is-exam i {
  background: radial-gradient(circle at 32% 28%, #ffb7ad, var(--gold) 60%, #b91b06);
  box-shadow: 0 0 10px rgba(255,111,92, 0.8);
}
.map-city.is-exam small { color: var(--gold); }
.map-city.is-current i {
  background: radial-gradient(circle at 32% 28%, #b8ffdd, var(--green) 60%, #128a52);
  animation: hotspotPulse 1.8s ease-in-out infinite;
}
.map-city.is-current small { color: var(--green); }

.brazil-map--compact .map-city small { font-size: 11px; }

.map-legend { display: flex; gap: 14px; justify-content: center; margin-top: 10px; font-size: 12px; color: var(--ink-dim); flex-wrap: wrap; }
.map-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); margin-right: 5px; }
.map-legend .dot--current { background: var(--green); }
.map-legend .dot--exam { background: var(--gold); }

/* ------------------------------------------------------- cabeçalho de página */

.page-header {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  margin: 4px 0 6px;
}
/* Flourish decorativo sob o título, estilo MMO */
.page-header::after {
  content: ""; flex-basis: 100%; height: 22px;
  background: url('../img/ui/divisor-ouro.svg') center / auto 100% no-repeat;
  opacity: 0.8;
}
.page-header__title { display: flex; gap: 14px; align-items: center; }
.page-header__title small { letter-spacing: 0.14em; color: var(--cyan); font-size: 11px; font-weight: 700; }
.page-header__title h1 { margin: 2px 0; font-size: 26px; color: var(--gold); text-shadow: 0 3px 12px rgba(255,111,92, 0.25); }
.page-header__title p { margin: 0; color: var(--ink-dim); max-width: 72ch; font-size: 13.5px; }

.page-emblem {
  display: grid; place-items: center; width: 62px; height: 62px; font-size: 30px;
  background: radial-gradient(circle at 30% 25%, #831f59, #4e0f34);
  border: 2px solid var(--gold); border-radius: 16px;
  filter: drop-shadow(0 6px 16px rgba(255,111,92, 0.3));
}

.page-header__stats { display: flex; gap: 10px; flex-wrap: wrap; }

.stat-tile {
  display: grid; gap: 2px; place-items: center; text-align: center;
  padding: 12px 16px; min-width: 110px;
  background: linear-gradient(180deg, var(--bg-panel-soft), var(--bg-panel));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.stat-tile span { font-size: 20px; }
.stat-tile strong { font-size: 17px; color: var(--ink); }
.stat-tile small { color: var(--ink-dim); font-size: 11px; }
.stat-tile--accent { border-color: var(--gold); }
.stat-tile--accent strong { color: var(--gold); }

.back-link { display: inline-block; margin-bottom: 10px; color: var(--cyan); text-decoration: none; font-weight: 700; font-size: 13px; }

.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.stats-grid--admin { margin-bottom: 16px; }

/* ---------------------------------------------------------------- biblioteca */

.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.subject-card {
  display: grid; gap: 4px; padding: 12px; text-decoration: none; color: var(--ink);
  background: rgba(60,11,40, 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.subject-card:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 10px 22px rgba(23,3,15, 0.5); }
.subject-card.is-active { border-color: var(--gold); box-shadow: 0 0 16px rgba(255,111,92, 0.25); }
.subject-card__icon { font-size: 22px; }
.subject-card strong { font-size: 13.5px; }
.subject-card small { color: var(--ink-dim); font-size: 12px; }
.subject-card__bar { display: block; height: 6px; border-radius: 999px; background: #410b2a; overflow: hidden; border: 1px solid var(--line-soft); }
.subject-card__bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 999px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter-input { flex: 1; min-width: 200px; width: auto; }
.filter-input--narrow { flex: 0 1 160px; min-width: 120px; }
.filter-select { width: auto; }

.topic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.topic-row {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px;
  background: rgba(60,11,40, 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.topic-row:hover { border-color: var(--cyan); transform: translateX(4px); }
.topic-code {
  font-family: Consolas, monospace; font-size: 11.5px; color: var(--cyan);
  background: rgba(251,107,191, 0.1); padding: 4px 8px; border-radius: 6px; white-space: nowrap;
}
.topic-copy { flex: 1; display: grid; gap: 2px; min-width: 0; }
.topic-copy a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.topic-copy a:hover { color: var(--gold); }
.topic-copy small { color: var(--ink-dim); font-size: 11.5px; }

.status-pill {
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--line);
  background: rgba(216,159,192, 0.1); color: var(--ink-dim);
}
.status-pill--studying, .status-pill--active { background: rgba(251,107,191, 0.12); border-color: rgba(251,107,191, 0.5); color: var(--cyan); }
.status-pill--review { background: rgba(255,111,92, 0.12); border-color: rgba(255,111,92, 0.5); color: var(--gold); }
.status-pill--mastered, .status-pill--completed { background: rgba(53, 221, 138, 0.12); border-color: rgba(53, 221, 138, 0.5); color: var(--green); }
.status-pill--banned, .status-pill--expired, .status-pill--abandoned { background: rgba(255, 117, 110, 0.12); border-color: rgba(255, 117, 110, 0.5); color: var(--red); }

.pagination { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 14px; font-size: 13px; color: var(--ink-dim); }
.pagination a { color: var(--cyan); text-decoration: none; font-weight: 700; }

.document-list, .law-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.document-row, .law-list li {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px;
  background: rgba(60,11,40, 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size: 13px;
}
.document-row > span { font-size: 20px; }
.document-row > div, .law-list li > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.document-row small, .law-list small { color: var(--ink-dim); font-size: 11.5px; }
.document-row.is-primary { border-color: var(--gold); }

/* ----------------------------------------------------------------- atividades */

.active-activity { display: grid; gap: 10px; }
.active-activity__head { display: flex; gap: 10px; align-items: center; }
.active-activity__icon { font-size: 28px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.active-activity__head small { display: block; color: var(--ink-dim); font-size: 12px; }

.countdown-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-dim); }
.countdown-line strong { color: var(--gold); font-size: 15px; }

.countdown-track {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: #410b2a; border: 1px solid var(--line-soft);
}
.countdown-track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  background-size: 200% 100%;
  animation-name: countdownFill; animation-timing-function: linear; animation-fill-mode: forwards;
}
.countdown-track.is-done i { background: linear-gradient(90deg, var(--green), #7cf0b8); animation: none; }
@keyframes countdownFill { to { width: 100%; } }

.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.activity-card { display: grid; gap: 12px; align-content: start; margin-bottom: 0; }
.activity-card__head { display: flex; gap: 12px; align-items: flex-start; }
.activity-card__icon { font-size: 30px; }
.activity-card__head small { display: block; color: var(--ink-dim); font-size: 12px; margin-top: 2px; }

.activity-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; }
.activity-meta li { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-dim); }
.activity-meta b { color: var(--ink); font-weight: 600; }

.cooldown-note {
  margin: 0; padding: 9px 12px; font-size: 12.5px; border-radius: var(--radius-sm);
  background: rgba(255, 117, 110, 0.1); border: 1px solid rgba(255, 117, 110, 0.4); color: #ffb3ad;
}

/* -------------------------------------------------------------------- viagens */

.travel-layout { display: grid; grid-template-columns: minmax(320px, 480px) 1fr; gap: 14px; align-items: start; }
.travel-map-panel { position: sticky; top: 14px; }
.city-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.city-card { display: grid; gap: 8px; margin-bottom: 0; font-size: 13px; }
.city-card p { margin: 0; color: var(--ink-dim); font-size: 12.5px; }
.city-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.city-card__head small { color: var(--cyan); }
.city-card__footer { display: grid; gap: 8px; }
.city-card.is-current { border-color: var(--green); box-shadow: 0 0 16px rgba(53, 221, 138, 0.2); }
.city-card.is-exam { border-color: var(--gold); }

/* ------------------------------------------------------------------- concurso */

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.info-grid dt { color: var(--ink-dim); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.info-grid dd { margin: 2px 0 0; font-weight: 600; font-size: 13.5px; }
.doc-links { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

.structure-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.structure-list li { padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(60,11,40, 0.6); border: 1px solid var(--line-soft); }
.structure-list b { color: var(--gold); }

/* -------------------------------------------------------------------- tabelas */

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; padding: 9px 10px; color: var(--ink-dim); font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--line);
}
.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tbody tr { transition: background 0.12s ease; }
.data-table tbody tr:hover { background: rgba(251,107,191, 0.05); }
.data-table code { color: var(--cyan); font-size: 12px; }
.table-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.audit-details { color: var(--ink-dim); font-family: Consolas, monospace; font-size: 11px; word-break: break-all; }

/* ---------------------------------------------------------------------- prova */

/* =========================================================================
   MODO FOCO — uma tela só para a tarefa
   Ler um PDF, resolver uma prova ou enfrentar um chefe não combina com o
   cabeçalho ilustrado, o HUD e a navegação por cima. E havia um efeito
   colateral pior: com todo esse enfeite, cada virada de página do leitor
   recarregava a tela no topo e obrigava a rolar de novo até a folha.
   Aqui o conteúdo começa colado no alto da janela.
   ====================================================================== */
.focus-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 8px clamp(10px, 2vw, 20px);
  background: linear-gradient(180deg, rgba(43,10,29, 0.97), rgba(31,7,21, 0.94));
  border-bottom: 1px solid rgba(198,88,74, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.focus-bar__back {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 14px 7px 10px; text-decoration: none;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #ffb9b0;
  background: linear-gradient(180deg, #5a1f41, #370e26);
  border: 1px solid rgba(198,88,74, 0.45);
  clip-path: polygon(0 50%, 10px 0, 100% 0, 100% 100%, 10px 100%);
  transition: background 0.15s ease, transform 0.12s ease;
}
.focus-bar__back:hover { background: linear-gradient(180deg, #7a2958, #3e132c); transform: translateX(-2px); }
.focus-bar__back span:first-child { font-size: 18px; line-height: 1; }

.focus-bar__id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.focus-bar__id > div { min-width: 0; flex: 1; overflow: hidden; }
.focus-bar__icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: 1px solid rgba(198,88,74, 0.5);
  background: radial-gradient(circle at 35% 30%, #65264b, #2b0b1e 70%);
}
.focus-bar__id strong {
  display: block; font-family: 'Cinzel', Georgia, serif; font-size: 14px; color: #ffb9b0;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.focus-bar__id small { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-dim); }
.focus-bar__aside { display: flex; align-items: center; gap: 8px; flex: none; }
.focus-bar__home {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid rgba(198,88,74, 0.35); border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
}
.focus-bar__home:hover { border-color: var(--gold); }

.focus-shell { margin: 0 auto; padding: 12px clamp(8px, 2vw, 18px) 24px; }
.focus-shell--estreito { max-width: 980px; }
.focus-shell--largo { max-width: 1400px; }

@media (max-width: 560px) {
  .focus-bar__back-text { display: none; }
  .focus-bar__back { padding: 7px 10px; }
  .focus-bar__id small { display: none; }
}

.exam-header { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; position: sticky; top: 8px; z-index: 10; }
.exam-header__brand { display: flex; gap: 12px; align-items: center; }
.exam-header__brand h1 { margin: 2px 0; font-size: 20px; color: var(--gold); }
.exam-header__brand p { margin: 0; font-size: 12px; color: var(--ink-dim); }
.exam-header__brand small { letter-spacing: 0.14em; color: var(--cyan); font-size: 12px; font-weight: 700; }

.exam-timer { display: grid; gap: 4px; min-width: 220px; }
.exam-timer small { color: var(--ink-dim); font-size: 12px; letter-spacing: 0.12em; }
.exam-timer strong { color: var(--gold); font-size: 22px; font-variant-numeric: tabular-nums; }
.countdown-track--exam i { background: linear-gradient(90deg, var(--purple), var(--red)); }

.exam-form { display: grid; gap: 14px; margin-top: 16px; }
.exam-section-title {
  margin: 14px 0 0; color: var(--cyan); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  border-left: 4px solid var(--cyan); padding-left: 10px;
}

.exam-question { display: grid; gap: 10px; margin-bottom: 0; }
.exam-question header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.exam-question header small { color: var(--ink-dim); font-size: 11.5px; }
.question-number { color: var(--gold); font-weight: 800; font-size: 14px; }
.question-text { margin: 0; font-size: 14.5px; line-height: 1.6; }

.option-list { display: grid; gap: 6px; }
.option-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; font-size: 13.5px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(60,11,40, 0.5); transition: border-color 0.12s ease, background 0.12s ease;
}
.option-row:hover { border-color: var(--cyan); background: rgba(251,107,191, 0.07); }
.option-row input { margin-top: 3px; accent-color: var(--gold); }
.option-row b { color: var(--cyan); min-width: 16px; }
.option-row em { margin-left: auto; font-size: 11px; color: var(--gold); white-space: nowrap; }
.option-row:has(input:checked) { border-color: var(--gold); background: rgba(255,111,92, 0.08); }

.option-list--result .option-row { cursor: default; }
.option-row.is-key { border-color: rgba(53, 221, 138, 0.65); background: rgba(53, 221, 138, 0.08); }
.option-row.is-key em { color: var(--green); }
.option-row.is-chosen-wrong { border-color: rgba(255, 117, 110, 0.65); background: rgba(255, 117, 110, 0.08); }
.option-row.is-chosen-wrong em { color: var(--red); }

.exam-question.is-correct { border-left: 4px solid var(--green); }
.exam-question.is-wrong { border-left: 4px solid var(--red); }

.rubric { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; }
.rubric summary { cursor: pointer; color: var(--cyan); font-weight: 700; }
.rubric ul { margin: 8px 0 4px; padding-left: 18px; color: var(--ink-dim); }

.exam-question textarea { resize: vertical; min-height: 180px; line-height: 1.6; }

.exam-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  position: sticky; bottom: 10px; z-index: 10;
}

.score-banner { margin-bottom: 16px; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-dim); }
.score-banner__bar { height: 14px; border-radius: 999px; background: #410b2a; border: 1px solid var(--line-soft); overflow: hidden; }
.score-banner__bar i { display: block; height: 100%; border-radius: 999px; transition: width 0.8s ease; }
.score-banner.is-passed .score-banner__bar i { background: linear-gradient(90deg, var(--green), #7cf0b8); }
.score-banner.is-failed .score-banner__bar i { background: linear-gradient(90deg, var(--red), #ff462e); }

.discursive-answer { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(60,11,40, 0.6); border: 1px solid var(--line-soft); font-size: 13.5px; }
.discursive-answer p { margin: 0; white-space: pre-wrap; }

/* -------------------------------------------------------------------- ranking */

.ranking-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ranking-tabs a {
  padding: 9px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 13px;
  color: var(--ink-dim); border: 1px solid var(--line);
  transition: all 0.15s ease;
}
.ranking-tabs a:hover { color: var(--ink); border-color: var(--cyan); }
.ranking-tabs a.is-active {
  color: #330600; background: linear-gradient(180deg, #ff988a, var(--gold)); border-color: var(--gold-deep);
}

.ranking-row {
  display: flex; gap: 12px; align-items: center; padding: 10px 14px;
  background: rgba(60,11,40, 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.ranking-row:hover { transform: translateX(4px); border-color: var(--cyan); }
.ranking-row.is-top { border-color: rgba(255,111,92, 0.55); background: rgba(255,111,92, 0.06); }
.ranking-row.is-self { border-color: var(--gold); box-shadow: 0 0 14px rgba(255,111,92, 0.2); }
.ranking-position { min-width: 40px; font-weight: 800; color: var(--gold); font-size: 16px; }
.ranking-copy { flex: 1; display: grid; gap: 1px; min-width: 0; }
.ranking-copy small { color: var(--ink-dim); font-size: 11.5px; }
.ranking-value { color: var(--gold); font-size: 15px; white-space: nowrap; }
.ranking-value small { color: var(--ink-dim); font-weight: 400; }

/* ---------------------------------------------------------------------- erro */

.error-shell {
  max-width: 460px; margin: 16vh auto; text-align: center; display: grid; gap: 10px; justify-items: center;
}
.error-shell h1 { margin: 0; color: var(--gold); }
.error-shell small { color: var(--ink-dim); letter-spacing: 0.14em; }
.error-shell p { margin: 0 0 8px; color: var(--ink-dim); }

/* ------------------------------------------------------ toques Arcane/hextech */

/* Moldura viva: anel de energia girando atrás dos emblemas */
.page-emblem, .crest {
  position: relative; isolation: isolate;
}
.page-emblem::before, .crest::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from 0deg, var(--gold-deep), var(--gold), #f2b8b0, var(--gold-deep));
  filter: blur(5px); opacity: 0.35;
  animation: hexSpin 14s linear infinite;
}
@keyframes hexSpin { to { transform: rotate(360deg); } }

.page-header__title h1 {
  background: linear-gradient(92deg, #b03b2c 0%, #e8796a 45%, #f2b8b0 75%, #b03b2c 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.page-header__title small {
  font-family: 'Marcellus', Georgia, serif; letter-spacing: 0.24em; color: var(--ink-dim);
}

/* Padrão art-déco sutil nas telas de entrada */
.theme-auth::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('../img/padrao-deco.svg');
  background-size: 160px 160px; opacity: 0.6;
}

.game-panel { position: relative; overflow: hidden; }
.game-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(166,210,35, 0.55), rgba(255, 79, 163, 0.35), transparent);
  background-size: 220% 100%;
  animation: shimmer 6s linear infinite;
  opacity: 0.6;
}

.main-nav__item.is-active {
  background: linear-gradient(180deg, #f29c91, var(--gold) 60%, var(--gold-deep));
  box-shadow: 0 4px 18px rgba(232,121,106, 0.35), 0 0 24px rgba(255, 79, 163, 0.12);
}

/* Título de matéria dentro das provas e do edital */
.exam-subject-title {
  margin: 8px 0 0; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--magenta); font-weight: 800;
}

/* ----------------------------------------------------------------- quests */

.quest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin: 10px 0 22px; }
.quest-card { display: grid; gap: 12px; align-content: start; margin-bottom: 0; }
.quest-card__head { display: flex; gap: 12px; align-items: flex-start; }
.quest-card__head > div { flex: 1; min-width: 0; }
.quest-card__head small { display: block; color: var(--ink-dim); font-size: 12px; margin-top: 2px; }
.quest-card__icon { font-size: 28px; filter: drop-shadow(0 0 8px rgba(166,210,35, 0.4)); }
.quest-card.is-completed { border-color: var(--gold); box-shadow: 0 0 22px rgba(232,121,106, 0.18), var(--shadow); }
.quest-card.is-claimed { opacity: 0.62; filter: saturate(0.7); }
.quest-card.is-locked { opacity: 0.56; filter: saturate(0.45); }
.quest-card.is-locked .quest-bar i { filter: grayscale(1); box-shadow: none; }
.quest-card.is-active { border-color: rgba(251,95,186, 0.72); box-shadow: 0 0 24px rgba(250,48,166, 0.14), var(--shadow); }
.quest-chapter { margin: 12px 0 26px; }
.quest-chapter > .card-heading { padding-inline: 8px; }
.quest-chapter > .card-heading small { margin-left: auto; }

.quest-bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: #2f091f; border: 1px solid var(--line-soft);
}
.quest-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--magenta));
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
.quest-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.quest-reward { font-size: 12.5px; color: var(--ink-dim); display: flex; gap: 8px; flex-wrap: wrap; }
.quest-reward b { color: var(--gold); font-weight: 700; }

/* ----------------------------------------------------------------- simulados */

.simulado-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.simulado-card { display: grid; gap: 10px; align-content: start; margin-bottom: 0; text-align: left; }
.simulado-card__seal {
  display: grid; place-items: center; width: 52px; height: 52px;
  font: 800 22px Georgia, serif; color: #241503;
  background: conic-gradient(from 200deg, #f29c91, var(--gold) 40%, var(--gold-deep) 75%, #f29c91);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  filter: drop-shadow(0 4px 10px rgba(232,121,106, 0.35));
}
.simulado-card.is-passed { border-color: var(--gold); }
.simulado-card__actions { display: grid; gap: 8px; }

/* ------------------------------------------------------------------ espelho */

.answer-sheet { display: grid; gap: 6px; }
.answer-sheet > span { color: var(--cyan); font-weight: 700; font-size: 13px; }
.answer-sheet textarea {
  background:
    repeating-linear-gradient(transparent 0 27px, rgba(204,152,182, 0.12) 27px 28px),
    var(--bg-input);
  line-height: 28px;
}

.espelho-block {
  display: grid; gap: 12px; padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 79, 163, 0.35);
  background: linear-gradient(180deg, rgba(255, 79, 163, 0.06), rgba(176, 123, 255, 0.04));
}
.espelho-block__head { display: flex; gap: 8px; align-items: center; color: var(--magenta); letter-spacing: 0.06em; }
.espelho-text { margin: 0; font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; }

.espelho-form { display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 79, 163, 0.35); }
.espelho-score-row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 8px 10px; font-size: 13px;
  background: rgba(39,9,27, 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.espelho-score-row span { flex: 1; }
.espelho-score-row input {
  width: 88px; padding: 8px; text-align: center; color: var(--ink); font: inherit;
  background: var(--bg-input); border: 1px solid var(--line); border-radius: 8px;
}
.espelho-score-row input:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(255, 79, 163, 0.18); }
.espelho-form__footer { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* ----------------------------------------------------- loja & inventário (R$) */

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.shop-card { display: grid; gap: 8px; align-content: start; margin-bottom: 0; padding: 14px; }
.shop-card__head { display: flex; justify-content: space-between; align-items: center; }
.shop-card__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: rgba(39,9,27, 0.7); border: 1px solid var(--line-soft); border-radius: 10px;
}
.shop-card__name { font-family: 'Marcellus', Georgia, serif; font-size: 14.5px; letter-spacing: 0.02em; }
.shop-card__footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.shop-card__actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.shop-price { color: var(--gold); font-variant-numeric: tabular-nums; }
.shop-card.is-owned { opacity: 0.92; }
.shop-card.is-equipped-card { border-color: var(--gold); }
.shop-card.tier-4 { border-color: rgba(232,121,106, 0.55); box-shadow: 0 0 18px rgba(232,121,106, 0.12), var(--shadow); }

.tier-badge {
  padding: 3px 9px; border-radius: 3px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-dim);
}
.tier-badge--2 { color: var(--cyan); border-color: rgba(166,210,35, 0.4); }
.tier-badge--3 { color: var(--purple); border-color: rgba(176, 123, 255, 0.4); }
.tier-badge--4 { color: var(--gold); border-color: rgba(232,121,106, 0.55); background: rgba(232,121,106, 0.08); }

.effect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.effect-list li {
  padding: 3px 9px; border-radius: 999px; font-size: 11px;
  background: rgba(166,210,35, 0.08); border: 1px solid rgba(166,210,35, 0.3); color: #d0e68f;
}
.effect-list--summary li { font-size: 12.5px; }
.is-wished { border-color: var(--magenta); color: var(--magenta); }

.slot-card.is-filled { border-style: solid; border-color: rgba(232,121,106, 0.5); background: rgba(232,121,106, 0.05); }

.finance-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.finance-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 10px; border-radius: var(--radius-sm); background: rgba(39,9,27, 0.5); border: 1px solid var(--line-soft); }
.finance-list b { font-variant-numeric: tabular-nums; }
.finance-net { border-color: rgba(232,121,106, 0.5) !important; background: rgba(232,121,106, 0.06) !important; font-weight: 700; }

.wishlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wishlist-row {
  display: flex; gap: 12px; align-items: center; padding: 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(39,9,27, 0.5);
}
.wishlist-copy { flex: 1; display: grid; gap: 4px; min-width: 0; }
.wishlist-bar { max-width: 340px; }
.wishlist-actions { display: grid; gap: 6px; justify-items: end; }

/* Avatares (retratos) */
.avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-emoji { display: grid; place-items: center; font-size: 24px; width: 100%; height: 100%; }
.avatar-frame { overflow: hidden; padding: 0; }
.mini-avatar { overflow: hidden; }
.mini-avatar .avatar-emoji { font-size: 15px; }
.page-emblem--avatar { overflow: hidden; }
.page-emblem--avatar .avatar-img { border-radius: 14px; }

/* ------------------------------------------------------------------- banco/NPC */

.npc-panel { display: flex; gap: 16px; align-items: center; }
.npc-portrait {
  width: 96px; height: 96px; flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(18,2,11, 0.6));
  animation: floaty 5s ease-in-out infinite;
}
.npc-dialogue { display: grid; gap: 2px; }
.npc-dialogue strong { color: var(--gold); font-family: 'Marcellus', Georgia, serif; font-size: 16px; }
.npc-dialogue p {
  margin: 6px 0 4px; padding: 10px 14px; font-size: 14px; line-height: 1.6; font-style: italic;
  background: rgba(39,9,27, 0.6); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold); border-radius: 0 10px 10px 10px;
}

/* -------------------------------------------------------- especialidades/cargos */

.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.area-card {
  display: grid; gap: 6px; padding: 12px; align-content: start;
  background: rgba(60,11,40, 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.area-card:hover { transform: translateY(-2px); border-color: var(--cyan); }
.area-card header { display: flex; gap: 8px; align-items: center; }
.area-card header strong { font-family: 'Marcellus', Georgia, serif; font-size: 14.5px; }
.area-card.is-playable { border-color: rgba(232,121,106, 0.55); background: rgba(232,121,106, 0.05); }
.area-card.is-enrolled { border-color: rgba(53, 221, 154, 0.5); }

/* -------------------------------------------------------------- tutorial guiado */

.tutorial-banner { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-image-source: url('../img/ui/moldura-rica.svg'); }
.quest-card.is-current-step { border-color: var(--gold); box-shadow: 0 0 22px rgba(232,121,106, 0.25), var(--shadow); }
.npc-portrait--sm { width: 72px; height: 72px; }
.tutorial-banner__copy { flex: 1; min-width: 240px; display: grid; gap: 3px; }
.tutorial-banner__copy small { color: var(--cyan); letter-spacing: 0.08em; font-size: 11px; }
.tutorial-banner__copy strong { font-family: 'Marcellus', Georgia, serif; font-size: 16px; color: var(--gold); }
.tutorial-banner__copy p { margin: 2px 0 4px; font-style: italic; font-size: 13.5px; color: var(--ink); }
.tutorial-banner__actions { display: grid; gap: 8px; justify-items: end; }

.tutorial-dots { display: flex; gap: 6px; }
.tutorial-dots i {
  width: 12px; height: 12px; border-radius: 50%;
  background: #410b2a; border: 1px solid var(--line);
}
.tutorial-dots i.is-done { background: radial-gradient(circle at 35% 30%, #7cf0b8, var(--green)); border-color: var(--green); }
.tutorial-dots i.is-current {
  background: radial-gradient(circle at 35% 30%, #f2b8b0, var(--gold)); border-color: var(--gold-deep);
  animation: badgePulse 1.6s ease-in-out infinite;
}

/* -------------------------------------------------------------------- premium */

.premium-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em;
  color: #330f0a; background: linear-gradient(180deg, #ffb7ad, var(--gold) 60%, var(--gold-deep));
  border: 1px solid #6b1c12; box-shadow: 0 0 14px rgba(232,121,106, 0.45);
}
.hud-chip--premium { border-color: var(--gold-deep); background: linear-gradient(180deg, rgba(232,121,106, 0.25), rgba(176,59,44, 0.15)); }
.hud-chip--premium strong { color: var(--gold); letter-spacing: 0.08em; font-size: 11px; }
.hud-chip--upsell strong { color: var(--ink-dim); font-size: 11px; }
.hud-chip--upsell:hover strong { color: var(--gold); }
.plan-card--premium { border-image-source: url('../img/ui/moldura-rica.svg'); box-shadow: 0 0 24px rgba(232,121,106, 0.15), var(--shadow); }
.premium-active { display: flex; gap: 14px; align-items: center; }
.pix-box { padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(39,9,27, 0.7); border: 1px dashed var(--gold-deep); }
.pix-box code { color: var(--gold); font-size: 14px; word-break: break-all; }

.simulado-card.is-locked { opacity: 0.55; filter: saturate(0.5); }
.simulado-card__seal--locked { background: linear-gradient(180deg, #674b5b, #412b38); font-size: 18px; color: #9db; }

/* -------------------------------------------------------- biblioteca em árvore */

.course-banner { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.course-banner__copy { display: grid; gap: 4px; min-width: 260px; flex: 1; }
.course-banner__copy small:first-child { color: var(--cyan); letter-spacing: 0.14em; font-size: 11px; }
.course-banner__copy strong { font-family: 'Marcellus', Georgia, serif; font-size: 20px; color: var(--gold); }
.course-banner__actions { display: grid; gap: 4px; justify-items: end; }

.topic-group {
  margin-bottom: 10px;
  background: linear-gradient(180deg, var(--bg-panel-soft), var(--bg-panel));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden;
}
.topic-group > summary {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px; cursor: pointer;
  list-style: none; font-size: 14px;
  background: linear-gradient(90deg, rgba(232,121,106, 0.1), transparent 70%);
  transition: background 0.15s ease;
}
.topic-group > summary::-webkit-details-marker { display: none; }
.topic-group > summary::before { content: "▸"; color: var(--gold); transition: transform 0.15s ease; }
.topic-group[open] > summary::before { transform: rotate(90deg); }
.topic-group > summary:hover { background: rgba(232,121,106, 0.14); }
.topic-group > summary strong { flex: 1; font-weight: 600; }
.topic-group__meta { display: flex; gap: 8px; align-items: center; }
.topic-group__meta small { color: var(--ink-dim); white-space: nowrap; }
.topic-list--tree { padding: 8px 12px 12px; }
.topic-row--child { margin-left: calc(14px * var(--depth, 1)); }

/* ---------------------------------------------------------- layout MMO da cidade */

/* O cabeçalho é a arte inteira, de ponta a ponta da janela. */
.logo-bar { display: block; margin: 0; padding: 0; text-decoration: none; }

/* =========================================================================
   TÍTULO DO JOGO COM VIDA
   A arte é uma imagem só; animar cada peça dela por dentro é impossível.
   O que se anima é a LUZ sobre ela — brilho atravessando o ouro, raios
   girando atrás do brasão, fagulhas subindo e a cena respirando. É o que
   dá movimento sem redesenhar nada.
   ====================================================================== */
.marca { display: block; line-height: 0; width: 100%; }
.marca__palco {
  position: relative; display: block; overflow: hidden; width: 100%;
  isolation: isolate; /* as camadas em blend não vazam para o resto da página */
}
.marca__arte {
  display: block; width: 100%; height: auto; position: relative; z-index: 1;
  animation: marca-passeia 26s ease-in-out infinite;
}

/* Dentro do jogo a arte vai de ponta a ponta da janela: sem isso sobra faixa
   vazia dos dois lados, que é o que fazia o título parecer um adesivo solto no
   meio. Largura em 100% e não 100vw — 100vw inclui a barra de rolagem e
   criaria rolagem horizontal na página inteira. */
.logo-bar { width: 100%; }
.logo-bar .marca { width: 100%; }
/* A arte entra INTEIRA — nada de cortar personagem para caber. Ela é 3:1, e
   é assim que fica: largura da janela, altura na proporção. */
.logo-bar:hover .marca__arte { animation-duration: 14s; }

/* --- Tela de entrada: a cena com moldura de ouro ----------------------- */
.auth-hero .marca__palco {
  border: 1px solid rgba(198,88,74, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}

/* A base da arte se dissolve no fundo da página, para não terminar em régua */
.marca__base {
  position: absolute; inset: auto 0 0 0; z-index: 5; height: 14%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(22,5,15, 0.85));
}
.auth-hero .marca__base { display: none; }

/* --- Brilho que atravessa as letras ------------------------------------ */
.marca__brilho {
  position: absolute; inset: -30% -60%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 246, 214, 0.10) 45%,
    rgba(255, 252, 236, 0.42) 50%,
    rgba(255, 246, 214, 0.10) 55%,
    transparent 62%);
  mix-blend-mode: overlay;
  transform: translateX(-60%);
  animation: marca-brilho 7.5s ease-in-out infinite;
}
.logo-bar:hover .marca__brilho { animation-duration: 2.4s; }

/* --- Raios atrás do brasão --------------------------------------------- */
.marca__raios {
  /* Centrado no brasão da arte, que fica no alto do meio da cena. */
  position: absolute; z-index: 2; pointer-events: none;
  left: 50%; top: 24%; width: 26%; padding-bottom: 26%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(255,162,150, 0.22) 0deg 6deg, transparent 6deg 30deg,
    rgba(255,162,150, 0.16) 30deg 34deg, transparent 34deg 60deg,
    rgba(255,162,150, 0.22) 60deg 66deg, transparent 66deg 90deg,
    rgba(255,162,150, 0.14) 90deg 94deg, transparent 94deg 120deg,
    rgba(255,162,150, 0.22) 120deg 126deg, transparent 126deg 150deg,
    rgba(255,162,150, 0.16) 150deg 154deg, transparent 154deg 180deg,
    rgba(255,162,150, 0.22) 180deg 186deg, transparent 186deg 210deg,
    rgba(255,162,150, 0.14) 210deg 214deg, transparent 214deg 240deg,
    rgba(255,162,150, 0.22) 240deg 246deg, transparent 246deg 270deg,
    rgba(255,162,150, 0.16) 270deg 274deg, transparent 274deg 300deg,
    rgba(255,162,150, 0.22) 300deg 306deg, transparent 306deg 330deg,
    rgba(255,162,150, 0.14) 330deg 334deg, transparent 334deg 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, rgba(0, 0, 0, 0.5) 45%, transparent 72%);
  mask-image: radial-gradient(circle, #000 12%, rgba(0, 0, 0, 0.5) 45%, transparent 72%);
  mix-blend-mode: screen; opacity: 0.55;
  animation: marca-raios 40s linear infinite;
}

/* --- Pulso do brasão ---------------------------------------------------- */
.marca__brasao {
  position: absolute; z-index: 2; pointer-events: none;
  left: 50%; top: 25%; width: 13%; padding-bottom: 13%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,185,176, 0.5), rgba(232,121,106, 0.18) 45%, transparent 70%);
  mix-blend-mode: screen;
  animation: marca-pulso 4.5s ease-in-out infinite;
}

/* --- Fagulhas de ouro subindo ------------------------------------------ */
.marca__fagulhas { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.marca__fagulhas i {
  position: absolute; bottom: -6%; width: 3px; height: 3px; border-radius: 50%;
  background: #ffb9b0; box-shadow: 0 0 6px 2px rgba(255,145,130, 0.7);
  opacity: 0; animation: marca-fagulha 9s linear infinite;
}
.marca__fagulhas i:nth-child(1)  { left: 6%;  animation-delay: 0s;   animation-duration: 8.5s; }
.marca__fagulhas i:nth-child(2)  { left: 14%; animation-delay: 1.4s; animation-duration: 10s;  }
.marca__fagulhas i:nth-child(3)  { left: 23%; animation-delay: 3.1s; animation-duration: 7.8s; }
.marca__fagulhas i:nth-child(4)  { left: 31%; animation-delay: 5.2s; animation-duration: 9.4s; }
.marca__fagulhas i:nth-child(5)  { left: 39%; animation-delay: 2.3s; animation-duration: 11s;  }
.marca__fagulhas i:nth-child(6)  { left: 47%; animation-delay: 6.6s; animation-duration: 8.2s; }
.marca__fagulhas i:nth-child(7)  { left: 55%; animation-delay: 0.7s; animation-duration: 10.6s; }
.marca__fagulhas i:nth-child(8)  { left: 63%; animation-delay: 4.4s; animation-duration: 9s;   }
.marca__fagulhas i:nth-child(9)  { left: 71%; animation-delay: 7.9s; animation-duration: 8s;   }
.marca__fagulhas i:nth-child(10) { left: 79%; animation-delay: 2.9s; animation-duration: 11.4s; }
.marca__fagulhas i:nth-child(11) { left: 87%; animation-delay: 5.8s; animation-duration: 9.7s; }
.marca__fagulhas i:nth-child(12) { left: 94%; animation-delay: 1.9s; animation-duration: 8.8s; }

@keyframes marca-brilho {
  0%       { transform: translateX(-60%); }
  55%, 100% { transform: translateX(60%); }
}
@keyframes marca-raios {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes marca-pulso {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.92); }
  50%      { opacity: 0.8;  transform: translate(-50%, -50%) scale(1.08); }
}
/* Câmera passeando devagar pela cena inteira, sem nunca mostrar borda */
@keyframes marca-passeia {
  0%   { transform: scale(1.04) translate(0, 0); }
  33%  { transform: scale(1.06) translate(-1.1%, -0.6%); }
  66%  { transform: scale(1.05) translate(1%, 0.5%); }
  100% { transform: scale(1.04) translate(0, 0); }
}
@keyframes marca-fagulha {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-260px) translateX(14px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .marca__arte, .marca__brilho, .marca__raios, .marca__brasao, .marca__fagulhas i { animation: none; }
  .marca__brilho, .marca__fagulhas { display: none; }
}

.mmo-layout {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 260px; gap: 14px; align-items: start;
}

/* Painel do personagem */
.char-panel { display: grid; gap: 10px; justify-items: center; text-align: center; }
.char-panel__art {
  width: 100%; max-width: 210px; height: auto;
  filter: drop-shadow(0 10px 24px rgba(18,2,11, 0.7));
  animation: floaty 6s ease-in-out infinite;
}
.char-panel__portrait { display: block; width: 120px; height: 120px; border-radius: 18px; overflow: hidden; border: 2px solid var(--gold); }

/* Arte pintada do personagem: moldura dourada + base esmaecida no painel */
.char-panel__frame {
  position: relative; display: block; width: 100%; max-width: 200px;
  border: 2px solid var(--gold-deep); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 18px rgba(232,121,106, 0.25), 0 10px 24px rgba(18,2,11, 0.7);
}
.char-panel__frame::after {
  content: ""; position: absolute; inset: 78% 0 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, #320c22 92%);
}
.char-panel__art--raster {
  display: block; width: 100%; height: auto; border-radius: 0; animation: none;
  filter: saturate(1.05);
}
.char-panel__id { display: grid; gap: 4px; justify-items: center; width: 100%; }
.char-panel__id strong { font-family: 'Marcellus', Georgia, serif; font-size: 17px; color: var(--gold); }
.char-panel__id .xp-track { width: 100%; }
.char-panel__phrase { font-size: 11.5px; color: var(--ink-dim); font-style: italic; }
.char-attrs { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 5px; }
.char-attrs li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 12.5px;
  background: rgba(39,9,27, 0.6); border: 1px solid var(--line-soft); border-radius: 8px;
}
.char-attrs b { color: var(--gold); font-variant-numeric: tabular-nums; }
.char-panel .panel-ribbon { width: calc(100% + 8px); }
.char-panel .active-activity, .char-panel .empty-note { width: 100%; text-align: left; }

/* Inventário lateral */
.inv-panel { display: grid; gap: 10px; align-content: start; }
.inv-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
.inv-slot {
  display: grid; gap: 4px; place-items: center; padding: 10px 6px; min-height: 74px;
  text-decoration: none; color: var(--ink); text-align: center;
  background: linear-gradient(180deg, rgba(39,9,27, 0.8), rgba(25,6,17, 0.8));
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.inv-slot small { font-size: 11.5px; line-height: 1.2; color: var(--ink-dim); }
.inv-slot:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 0 12px rgba(232,121,106, 0.3); }
.inv-slot.is-filled { border-color: rgba(232,121,106, 0.55); background: linear-gradient(180deg, rgba(232,121,106, 0.12), rgba(25,6,17, 0.85)); }
.inv-slot.is-filled small { color: var(--gold); }
.inv-slot__empty { font-size: 18px; color: var(--line); }

/* Missão principal */
.mission-banner { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.mission-banner__copy { flex: 1; display: grid; gap: 4px; min-width: 0; }
.mission-banner__copy small { color: var(--gold); letter-spacing: 0.16em; font-size: 12px; font-weight: 700; }
.mission-banner__copy strong { font-family: 'Marcellus', Georgia, serif; }
.mission-banner .quest-bar { max-width: 420px; height: 8px; }

/* Feed do mundo: mensagens alternando via CSS puro */
.world-feed { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 10px 14px; }
.world-feed__messages { position: relative; flex: 1; min-height: 22px; overflow: hidden; }
.world-feed__msg {
  position: absolute; inset: 0; margin: 0; font-size: 12.5px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0;
  animation: feedCycle calc(var(--feed-count) * 6s) linear infinite;
  animation-delay: calc(var(--feed-index) * 6s);
}
.world-feed__msg b { color: var(--cyan); font-weight: 700; }
@keyframes feedCycle {
  0% { opacity: 0; transform: translateY(8px); }
  2%, 14% { opacity: 1; transform: translateY(0); }
  16%, 100% { opacity: 0; transform: translateY(-8px); }
}
.world-feed__city { display: flex; gap: 6px; align-items: center; color: var(--ink-dim); white-space: nowrap; }
.world-feed__city strong { font-family: 'Cinzel', Georgia, serif; color: var(--gold); letter-spacing: 0.1em; }

@media (max-width: 1240px) {
  .mmo-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .inv-panel { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); display: grid; }
}
@media (max-width: 820px) {
  .mmo-layout { grid-template-columns: 1fr; }
  .char-panel__art { max-width: 150px; }
}

/* --------------------------------------------------------------- pet mentor */

.pet-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pet-choice-grid--small { grid-template-columns: repeat(3, 1fr); }
.pet-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pet-choice__card {
  display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px 10px;
  background: rgba(39,9,27, 0.6); border: 2px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s ease; font-size: 12.5px;
}
.pet-choice__card strong { font-family: 'Marcellus', Georgia, serif; color: var(--ink); }
.pet-choice__card small { color: var(--ink-dim); }
.pet-choice__card:hover { transform: translateY(-3px); border-color: var(--cyan); }
.pet-choice input:checked + .pet-choice__card {
  border-color: var(--gold); background: rgba(232,121,106, 0.08);
  box-shadow: 0 0 18px rgba(232,121,106, 0.3);
}

.pet-widget {
  display: flex; gap: 10px; align-items: center; width: 100%; margin-top: 10px; padding: 8px 10px;
  text-decoration: none; color: var(--ink); text-align: left;
  background: rgba(39,9,27, 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.pet-widget:hover { border-color: var(--gold); }
.pet-widget img { flex-shrink: 0; }
.pet-widget span { display: grid; gap: 1px; font-size: 12px; }
.pet-widget small { color: var(--ink-dim); }
.pet-widget__cta { display: grid; place-items: center; width: 44px; height: 44px; background: #410b2a; border-radius: 50%; border: 1px dashed var(--gold-deep); }

.mentor-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.task-row {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px;
  background: rgba(60,11,40, 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.task-row__type {
  padding: 4px 10px; border-radius: 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(166,210,35, 0.1); border: 1px solid rgba(166,210,35, 0.35); color: var(--cyan);
  white-space: nowrap;
}
.task-row__copy { flex: 1; display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.task-row.is-done { border-color: rgba(53, 221, 154, 0.5); opacity: 0.85; }
.task-row.is-missed { border-color: rgba(255, 117, 110, 0.4); opacity: 0.7; }

.days-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.day-option input { position: absolute; opacity: 0; pointer-events: none; }
.day-option span {
  display: inline-block; padding: 7px 10px; border-radius: 8px; font-size: 12px; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--line); color: var(--ink-dim);
  transition: all 0.12s ease;
}
.day-option input:checked + span { color: #330f0a; background: linear-gradient(180deg, #f2b8b0, var(--gold)); border-color: var(--gold-deep); font-weight: 700; }

/* --------------------------------------------------------------------- chat */

.chat-panel { display: grid; gap: 10px; }
.chat-messages {
  height: min(52vh, 520px); overflow-y: auto; padding: 6px 10px 6px 4px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin;
}
.chat-msg {
  padding: 8px 12px; border-radius: 10px 10px 10px 3px; max-width: 85%;
  background: rgba(60,11,40, 0.7); border: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.chat-msg b { color: var(--gold); font-size: 13px; }
.chat-msg small { color: var(--ink-dim); font-size: 11px; }
.chat-msg p { margin: 3px 0 0; word-wrap: break-word; overflow-wrap: anywhere; }
.chat-msg--mine {
  align-self: flex-end; border-radius: 10px 10px 3px 10px;
  background: rgba(166,210,35, 0.1); border-color: rgba(166,210,35, 0.35);
}
.chat-msg--mine b { color: var(--cyan); }
.chat-msg--system {
  align-self: stretch;
  max-width: 100%;
  border-radius: 8px;
  border-color: rgba(232,121,106, 0.72);
  background:
    linear-gradient(90deg, rgba(232,121,106, 0.16), rgba(166,210,35, 0.08)),
    rgba(45,9,30, 0.92);
  box-shadow: inset 3px 0 0 var(--gold), 0 5px 18px rgba(0, 0, 0, 0.22);
}
.chat-msg--system b { color: #ffada2; letter-spacing: 0.04em; }
.chat-msg--system p { color: #f5ecd5; font-weight: 600; }
.chat-msg--deleted p { color: var(--ink-dim); font-style: italic; }
.chat-msg__actions summary { cursor: pointer; color: var(--ink-dim); font-size: 12px; list-style: none; }
.chat-msg__actions[open] { display: grid; gap: 6px; margin-top: 6px; }
.chat-report-input { width: 160px; padding: 6px 8px; font-size: 12px; background: var(--bg-input); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }

.chat-composer { display: flex; gap: 8px; }
.chat-composer input[type="text"] {
  flex: 1; padding: 12px 14px; color: var(--ink); font: inherit;
  background: var(--bg-input); border: 1px solid var(--line); border-radius: 10px;
}
.chat-composer input[type="text"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,121,106, 0.15); }

/* ---------------------------------------------------------------------- arena */

.pvp-scoreboard { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.pvp-side { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
.pvp-side--right { justify-content: flex-end; text-align: right; }
.pvp-side strong { display: block; font-size: 14px; }
.pvp-score { font: 800 26px 'Cinzel', Georgia, serif; color: var(--gold); min-width: 54px; text-align: center; }
.pvp-center { display: grid; gap: 2px; justify-items: center; text-align: center; }
.pvp-center small { color: var(--magenta); letter-spacing: 0.12em; font-size: 11.5px; font-weight: 700; }
.pvp-center strong { font-family: 'Marcellus', Georgia, serif; }
.pvp-timer {
  padding: 4px 14px; border-radius: 999px; font: 700 16px 'Cinzel', Georgia, serif;
  color: var(--gold); border: 1px solid var(--gold-deep); background: rgba(232,121,106, 0.08);
  font-variant-numeric: tabular-nums;
}
.pvp-timer.is-critical { color: var(--red); border-color: var(--red); animation: badgePulse 0.8s ease-in-out infinite; }

/* ----------------------------------------------------------------- responsivo */

@media (max-width: 1100px) {
  .world-layout { grid-template-columns: 1fr 1fr; }
  .city-zone { grid-column: 1 / -1; grid-row: 1; }
  .travel-layout { grid-template-columns: 1fr; }
  .travel-map-panel { position: static; max-width: 480px; margin: 0 auto 14px; }
}

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-card { position: static; }
  .two-columns { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .hud-vitals { min-width: 100%; order: 5; }
  .exam-header { position: static; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .world-layout { grid-template-columns: 1fr; }
  .form-two-columns { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .main-nav__item { padding: 8px 10px; font-size: 12.5px; }
  .main-nav__item span { display: none; }
  .xp-track { width: 110px; }
  .reputation-block { display: none; }
  .topic-row { flex-wrap: wrap; }
  .exam-actions { position: static; }
}

/* ============================= Portal das Bancas ============================ */
.boss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.boss-card { display: grid; gap: 10px; align-content: start; }
.boss-card__art {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; border-radius: 10px;
  border: 1px solid var(--line-soft); background: #1c0713;
}
.boss-card__title { color: var(--gold); font-size: 13px; letter-spacing: 0.04em; margin: 0; }

.boss-battle { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .boss-battle { grid-template-columns: 1fr; } }
.boss-battle__side { display: grid; gap: 8px; align-content: start; }
.boss-battle__art { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; border-radius: 10px; border: 1px solid var(--line-soft); background: #1c0713; }
.boss-art--furious { animation: boss-shake 0.5s ease-in-out infinite; filter: saturate(1.35) contrast(1.1); }
.boss-art--defeated { filter: grayscale(0.9) brightness(0.6); }
@keyframes boss-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-0.5deg); }
  75% { transform: translateX(3px) rotate(0.5deg); }
}
.bar-label { margin: 2px 0; font-size: 12.5px; color: var(--ink-dim); }
.meter {
  height: 14px; border-radius: 999px; overflow: hidden;
  background: rgba(39,9,27, 0.85); border: 1px solid var(--line-soft);
}
.meter span { display: block; height: 100%; transition: width 0.4s ease; }
.meter--hp span { background: linear-gradient(90deg, #7f1d1d, #dc2626); }
.meter--fury span { background: linear-gradient(90deg, #7c2d12, #f5260b); }
.boss-hearts { display: inline-flex; gap: 4px; vertical-align: middle; }
.boss-hearts .heart {
  width: 16px; height: 16px; display: inline-block;
  background: rgba(183,149,169, 0.25);
  clip-path: path('M8 14 L1.5 7.5 A4.2 4.2 0 0 1 8 2.4 A4.2 4.2 0 0 1 14.5 7.5 Z');
}
.boss-hearts .heart--full { background: linear-gradient(180deg, #f87171, #b91c1c); }
.boss-battle__main { display: grid; gap: 12px; align-content: start; }
.boss-result {
  padding: 10px 14px; border-radius: 10px; display: grid; gap: 4px;
  border: 1px solid var(--line-soft); font-size: 14px;
}
.boss-result--hit { background: rgba(22, 101, 52, 0.25); border-color: #16a34a; }
.boss-result--miss, .boss-result--timeout { background: rgba(127, 29, 29, 0.25); border-color: #dc2626; }
.boss-answer-form { display: grid; gap: 8px; }
.boss-outcome { display: grid; gap: 10px; justify-items: center; text-align: center; }
.boss-outcome__art { max-width: 320px; width: 100%; height: auto; border-radius: 10px; }
.boss-outcome__headline { margin: 0; font-family: 'Cinzel', Georgia, serif; }
.boss-outcome--victory { color: var(--gold); }
.boss-outcome--defeat, .boss-outcome--exhausted { color: #f87171; }

/* Painel de importação de provas reais */
.import-candidate {
  display: grid; gap: 10px; padding: 14px;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: rgba(39,9,27, 0.5); margin-bottom: 14px;
}
.import-options { margin: 0; padding-left: 26px; display: grid; gap: 5px; font-size: 13.5px; }
.import-options .is-correct { color: #4ade80; font-weight: 600; }
.stacked-form { display: grid; gap: 10px; }
.stacked-form label, .form-row label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-dim); }
.form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }

/* ============================ PvP em equipe ============================== */
.team-queue { display: flex; flex-wrap: wrap; gap: 8px; }
.team-queue form { margin: 0; }
.team-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .team-board { grid-template-columns: 1fr; } }
.team-board__side {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line-soft); background: rgba(39,9,27, 0.5);
}
.team-board__side.is-mine { border-color: var(--gold); }
.team-board__players { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.team-board__players li {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 5px 8px; border-radius: 8px; background: rgba(39,9,27, 0.55);
}
.team-board__players li.is-me { background: rgba(198,88,74, 0.16); }
.team-board__players li b { margin-left: auto; color: var(--gold); font-variant-numeric: tabular-nums; }
.team-board__players li em { font-style: normal; font-size: 11px; }

/* ==================== Prova questão a questão + animações ================= */

/* Alternativas entram em sequência (--i = posição da alternativa).
   Vale para simulados, prova do concurso e Portal das Bancas. */
@keyframes option-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.option-list .option-row,
.boss-answer-form .option-row {
  opacity: 0;
  animation: option-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.16s + var(--i, 0) * 0.085s);
}
.option-row { transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease; }
.option-row:hover { transform: translateX(3px); }
.option-row:has(input:checked) {
  border-color: var(--gold);
  background: rgba(198,88,74, 0.14);
}

/* Enunciado aparece antes das alternativas. */
@keyframes question-in {
  from { opacity: 0; transform: translateY(16px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.exam-question.is-current,
.boss-battle__main .question-text {
  animation: question-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.exam-question.is-current.enter-from-left { animation-name: question-in-left; }
@keyframes question-in-left {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}
.exam-question.is-current.enter-from-right { animation-name: question-in-right; }
@keyframes question-in-right {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Uma questão por vez: só ativa quando o JS assume o comando.
   Sem JS a prova continua inteira na página, como antes. */
.exam-form.is-paged .exam-question { display: none; }
.exam-form.is-paged .exam-question.is-current { display: block; }
.exam-form.is-paged .exam-section-title,
.exam-form.is-paged .exam-subject-title { display: none; }

.exam-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 8px; z-index: 5; margin-bottom: 12px;
}
.exam-nav__status { text-align: center; display: grid; gap: 2px; }
.exam-nav__status strong { font-family: 'Marcellus', Georgia, serif; color: var(--gold); font-size: 15px; }
.exam-nav__status small { color: var(--ink-dim); font-size: 11.5px; }
.exam-nav button[disabled] { opacity: 0.35; cursor: not-allowed; }

.exam-track {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  margin-bottom: 14px;
}
.exam-track__dot {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--ink-dim); background: rgba(39,9,27, 0.7);
  border: 1px solid var(--line-soft); border-radius: 6px;
  transition: transform 0.12s ease, border-color 0.18s ease;
}
.exam-track__dot:hover { transform: translateY(-2px); border-color: var(--gold); }
.exam-track__dot.is-answered { color: #86efac; border-color: rgba(34, 197, 94, 0.55); }
.exam-track__dot.is-current {
  color: #320c22; background: var(--gold); border-color: var(--gold); font-weight: 700;
}

/* Quem prefere menos movimento não recebe animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .option-list .option-row,
  .boss-answer-form .option-row,
  .exam-question.is-current,
  .boss-battle__main .question-text {
    animation: none;
    opacity: 1;
  }
}

/* ===================== Janela de prédio (estilo MMO clássico) ============= */
.mmo-window {
  position: relative;
  padding: 20px 22px 24px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(62,20,44, 0.96), rgba(37,10,26, 0.98)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 6px);
  border: 2px solid #6b2e26;
  box-shadow:
    inset 0 0 0 1px rgba(198,88,74, 0.45),
    inset 0 2px 30px rgba(0, 0, 0, 0.55),
    0 14px 40px rgba(0, 0, 0, 0.55);
}
/* Ornamentos de canto: o "metal" da moldura dos jogos de navegador. */
.mmo-window__corner {
  position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 2px solid var(--gold);
}
.mmo-window__corner--tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.mmo-window__corner--tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.mmo-window__corner--bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.mmo-window__corner--br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }

.mmo-window__title {
  display: flex; align-items: center; gap: 12px;
  margin: -20px -22px 14px; padding: 12px 18px;
  background: linear-gradient(180deg, rgba(198,88,74, 0.28), rgba(198,88,74, 0.06) 60%, transparent);
  border-bottom: 1px solid rgba(198,88,74, 0.4);
}
.mmo-window__title h1 {
  margin: 0; font-family: 'Cinzel', Georgia, serif; font-size: 22px; letter-spacing: 0.02em;
  color: #f6c7c1; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}
.mmo-window__title small { color: var(--accent, var(--gold)); font-size: 11px; letter-spacing: 0.16em; }
.mmo-window__crest {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; border: 2px solid var(--accent, var(--gold));
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.5));
}
.mmo-window__back {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  font-size: 20px; color: var(--gold); text-decoration: none;
  border: 1px solid var(--line-soft); border-radius: 6px; background: rgba(39,9,27, 0.7);
}
.mmo-window__back:hover { border-color: var(--gold); }

.screen-page-resultado .rubric > summary,
.screen-result .rubric > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}
.mmo-window__lore { margin: 0 0 14px; color: var(--ink-dim); font-style: italic; font-size: 13.5px; }

/* Abas do prédio */
.mmo-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid rgba(198,88,74, 0.35); }
.mmo-tab {
  padding: 8px 18px; font-size: 13px; text-decoration: none; color: var(--ink-dim);
  background: linear-gradient(180deg, rgba(79,31,59, 0.7), rgba(44,13,31, 0.7));
  border: 1px solid var(--line-soft); border-bottom: 0; border-radius: 6px 6px 0 0;
  position: relative; top: 1px;
}
.mmo-tab:hover { color: #f6c7c1; }
.mmo-tab.is-active {
  color: #320c22; font-weight: 700;
  background: linear-gradient(180deg, #e68477, var(--gold));
  border-color: var(--gold);
}

.mmo-window__body { display: grid; gap: 14px; }

/* Ações do prédio (cartões de atividade) */
.mmo-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mmo-action {
  display: grid; gap: 8px; align-content: start; padding: 14px;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: linear-gradient(180deg, rgba(67,23,49, 0.75), rgba(41,11,29, 0.85));
  border-left: 3px solid var(--accent, var(--gold));
}
.mmo-action.is-locked { opacity: 0.62; }
.mmo-action__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mmo-action__head strong { font-family: 'Marcellus', Georgia, serif; color: #f6c7c1; }
.mmo-action__meta { margin: 0; font-size: 11.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.mmo-action__duration { display: grid; gap: 4px; font-size: 12px; color: var(--ink-dim); }

/* Painéis internos */
.mmo-panel {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: rgba(39,9,27, 0.55);
}
.mmo-panel--stack { display: grid; gap: 10px; align-items: stretch; }
.mmo-panel__art { width: 92px; height: auto; flex: none; }
.mmo-panel__head { display: flex; align-items: center; gap: 8px; }
.mmo-panel__head strong { font-family: 'Marcellus', Georgia, serif; color: var(--gold); font-size: 15px; }

.mmo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mmo-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; font-size: 13px; border-radius: 6px;
  background: rgba(51,15,36, 0.7); border-left: 2px solid var(--accent, var(--gold));
}
.mmo-list li.is-done { opacity: 0.6; text-decoration: line-through; }
.mmo-list li b { color: var(--gold); font-variant-numeric: tabular-nums; }

.mmo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.mmo-grid--wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mmo-cell {
  display: grid; gap: 5px; padding: 10px; text-decoration: none;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: linear-gradient(180deg, rgba(71,25,52, 0.8), rgba(41,11,29, 0.9));
  transition: transform 0.12s ease, border-color 0.18s ease;
}
.mmo-cell:hover { transform: translateY(-2px); border-color: var(--gold); }
.mmo-cell strong { font-size: 13px; color: #f6c7c1; }
.mmo-cell small { font-size: 11px; color: var(--ink-dim); }
.mmo-cell__bar { display: block; height: 5px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
.mmo-cell__bar i { display: block; height: 100%; background: linear-gradient(90deg, #b45309, var(--gold)); }
.mmo-cell--law a { font-size: 11.5px; color: var(--gold); }

.mmo-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mmo-people li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mmo-people li b { color: var(--gold); min-width: 26px; }

.mmo-badge-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: 8px 10px; font-size: 12.5px;
  border-radius: 6px; background: rgba(198,88,74, 0.1); border: 1px dashed rgba(198,88,74, 0.4);
}
.mmo-badge-line a { color: var(--gold); }

@media (max-width: 620px) {
  .mmo-window { padding: 16px 14px 18px; }
  .mmo-window__title { margin: -16px -14px 12px; padding: 10px 12px; }
  .mmo-window__title h1 { font-size: 18px; }
}

/* =============== Menu principal: botões emoldurados com ícone ============ */
.main-nav {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  padding: 8px 10px; margin-bottom: 14px;
  background:
    linear-gradient(180deg, rgba(71,25,52, 0.9), rgba(35,9,24, 0.95));
  border-top: 1px solid rgba(198,88,74, 0.35);
  border-bottom: 1px solid rgba(198,88,74, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.main-nav__item {
  position: relative;
  display: grid; justify-items: center; gap: 3px;
  width: 76px; padding: 8px 4px 6px; text-decoration: none;
  border: 1px solid rgba(198,88,74, 0.32); border-radius: 8px;
  background: linear-gradient(180deg, rgba(94,37,70, 0.85), rgba(46,13,32, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.14s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.main-nav__item .ico { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.main-nav__item strong {
  font-family: 'Marcellus', Georgia, serif; font-weight: 400;
  font-size: 11px; line-height: 1.1; text-align: center; color: #e0ccd8;
}
.main-nav__item:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.45);
}
.main-nav__item.is-active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(198,88,74, 0.32), rgba(120,35,24, 0.5));
}
.main-nav__item.is-active strong { color: #f6c7c1; }
.main-nav__item .nav-badge {
  position: absolute; top: -6px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 12px; font-style: normal; font-weight: 700; color: #2b0f0f;
  background: linear-gradient(180deg, #fb3d24, #d97706);
  border: 1px solid #7c2d12; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
@media (max-width: 560px) {
  .main-nav__item { width: 64px; padding: 6px 2px 5px; }
  .main-nav__item strong { font-size: 11.5px; }
}

/* =========================================================================
   CARA DE JOGO — camada final de estilo (sobrescreve o que veio antes)
   Botões em relevo, painéis com bandeirola, HUD com medalhões e menu metálico.
   ====================================================================== */

:root {
  --metal-1: #7d3c62;
  --metal-2: #3e152d;
  --bevel-light: rgba(255, 255, 255, 0.22);
  --bevel-dark: rgba(0, 0, 0, 0.55);
}

/* ------------------------------- Tipografia ---------------------------- */
h1, .page-header__title h1, .auth-hero h1, .mmo-window__title h1 {
  font-family: 'CinzelDecorativa', 'Cinzel', Georgia, serif;
  font-weight: 900;
  letter-spacing: 0.015em;
  color: #ffb9b0;
  text-shadow:
    0 1px 0 #7a1e12,
    0 2px 0 #56140b,
    0 3px 6px rgba(0, 0, 0, 0.75);
}
h2, h3, .card-heading strong, .panel-ribbon strong, .mmo-panel__head strong {
  font-family: 'Oswald', 'Marcellus', Georgia, sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-header__title small, .mmo-window__title small, .auth-hero small {
  font-family: 'Oswald', sans-serif; font-weight: 500; letter-spacing: 0.22em;
}
.stat-tile strong, .pvp-score, .hud-chip strong, .mmo-list li b {
  font-family: 'Oswald', sans-serif; font-weight: 600;
}

/* -------------------------- Botões com relevo -------------------------- */
.game-button {
  position: relative;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; font-size: 13px;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #230b19;
  color: #17110a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #f08a7d 0%, #d05444 48%, #a92f1f 100%);
  box-shadow:
    inset 0 1px 0 var(--bevel-light),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    0 3px 0 #6d1d12,
    0 6px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
.game-button:hover { filter: brightness(1.08); }
.game-button:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 #6d1d12, 0 2px 6px rgba(0, 0, 0, 0.4);
}
.game-button--purple {
  color: #f4ecff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #fc77c5 0%, #ce4a97 48%, #8c2d64 100%);
  box-shadow: inset 0 1px 0 var(--bevel-light), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 3px 0 #611f46, 0 6px 14px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.game-button--purple:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 #611f46; }
.game-button--ghost {
  color: #f6dceb;
  background: linear-gradient(180deg, #702e55 0%, #4c1736 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 0 #2b0c1e, 0 5px 12px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border-color: #230b19;
}
.game-button--ghost:active { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 #2b0c1e; }
/* Brilho que atravessa o botão de tempos em tempos (chamariz dos jogos) */
.game-button--gold::after, .pulse-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: btn-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-shine {
  0%, 62% { background-position: 160% 0; }
  86%, 100% { background-position: -60% 0; }
}

/* ------------------------ Painéis com bandeirola ----------------------- */
.game-panel {
  position: relative;
  border-radius: 10px;
  border: 1px solid #843e67;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
    linear-gradient(180deg, #4e1737 0%, #320c22 60%, #26091a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(198,88,74, 0.12),
    0 10px 26px rgba(0, 0, 0, 0.5);
}
.card-heading {
  position: relative;
  margin: -4px -4px 10px; padding: 8px 12px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(198,88,74, 0.3), rgba(198,88,74, 0.05));
  border-bottom: 1px solid rgba(198,88,74, 0.4);
}
.card-heading strong { color: #ffb9b0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }

/* Cabeçalho de página em forma de estandarte */
.page-header {
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(198,88,74, 0.18), transparent 55%),
    linear-gradient(180deg, #4e1837, #2f0b20);
  border: 1px solid rgba(198,88,74, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(0, 0, 0, 0.5);
}
.page-emblem {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #702c54, #2b0b1e 70%);
  border: 2px solid var(--gold);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 14px rgba(232,121,106, 0.35);
}

/* --------------------------- HUD com medalhões ------------------------- */
.hud-chip {
  position: relative;
  padding: 5px 12px 5px 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5c2043, #350d24);
  border: 1px solid rgba(198,88,74, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.hud-chip .ico {
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #943f71, #2b0b1e);
  border: 1px solid var(--gold);
  box-shadow: 0 0 8px rgba(232,121,106, 0.3);
}
.hud-chip strong { color: #ffb9b0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }

/* --------------------------- Menu metálico ----------------------------- */
.main-nav {
  border-radius: 12px;
  background:
    linear-gradient(180deg, #6a2b50 0%, #3e152d 55%, #260b1b 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px);
  border: 1px solid rgba(198,88,74, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.5);
}
.main-nav__item {
  background: linear-gradient(180deg, #893c69 0%, var(--metal-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 4px rgba(0, 0, 0, 0.45), 0 3px 0 #1e0915;
}
.main-nav__item strong { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.main-nav__item:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55); }
.main-nav__item.is-active {
  background: linear-gradient(180deg, #f08a7d 0%, #b03b2c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 16px rgba(232,121,106, 0.5), 0 3px 0 #6d1d12;
}
.main-nav__item.is-active strong { color: #240804; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.main-nav__item.is-active .ico { filter: brightness(0) saturate(100%) invert(8%) sepia(30%) saturate(900%) hue-rotate(2deg); }

/* Abas do prédio com o mesmo relevo dos botões */
.mmo-tab {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.06em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.mmo-tab.is-active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 -2px 10px rgba(232,121,106, 0.35); }

/* =========================================================================
   PERSONAGEM VIVO — respiração, aura e moldura de herói
   ====================================================================== */
.char-panel {
  position: relative;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(232,121,106, 0.14), transparent 60%),
    linear-gradient(180deg, #4e1737 0%, #320c22 60%, #26091a 100%);
}
.char-panel__frame {
  position: relative; display: block; width: 100%;
  border-radius: 10px; overflow: hidden;
  border: 2px solid rgba(232,121,106, 0.55);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(232,121,106, 0.18);
}
/* Halo pulsante atrás do herói */
.char-panel__frame::before {
  content: ""; position: absolute; left: 50%; top: 58%; width: 78%; padding-bottom: 78%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,121,106, 0.28) 0%, rgba(176, 123, 255, 0.14) 45%, transparent 70%);
  animation: hero-aura 5.5s ease-in-out infinite;
}
@keyframes hero-aura {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
/* Respiração: sobe e desce de leve, como um idle de jogo */
.char-panel__art, .char-panel__art--raster {
  position: relative; z-index: 1;
  animation: hero-breathe 4.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes hero-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.012); }
}
/* Faíscas subindo (equipamento brilhando) */
.char-panel__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 2px at 22% 70%, rgba(255,180,170, 0.95), transparent 60%),
    radial-gradient(circle 1.5px at 74% 62%, rgba(253,192,228, 0.9), transparent 60%),
    radial-gradient(circle 2px at 55% 82%, rgba(255, 200, 140, 0.85), transparent 60%);
  animation: hero-sparks 6s linear infinite;
}
@keyframes hero-sparks {
  0%   { transform: translateY(10px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-70px); opacity: 0; }
}

/* Nome do herói em placa de metal */
.char-panel__id strong {
  display: block; padding: 5px 10px; border-radius: 6px;
  font-family: 'CinzelDecorativa', 'Cinzel', serif; font-size: 15px; color: #ffb9b0;
  background: linear-gradient(180deg, #6c2c51, #3d112b);
  border: 1px solid rgba(232,121,106, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 8px rgba(0, 0, 0, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* Barra de XP com brilho correndo */
.xp-track { position: relative; overflow: hidden; }
.xp-track i { position: relative; }
.xp-track i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: xp-shine 3.2s linear infinite;
}
@keyframes xp-shine { from { background-position: 140% 0; } to { background-position: -60% 0; } }

/* Atributos com cara de ficha de RPG */
.char-attrs li {
  background: linear-gradient(180deg, rgba(94,37,70, 0.85), rgba(43,11,30, 0.9));
  border-left: 3px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.char-attrs b { font-family: 'Oswald', sans-serif; font-weight: 600; }

/* Marcadores da cidade pulsando como em MMO */
.location-hotspot i {
  box-shadow: 0 0 0 0 rgba(232,121,106, 0.6);
  animation: hotspot-ping 2.8s ease-out infinite;
}
.location-hotspot.hotspot-contest i { animation-duration: 1.9s; }
@keyframes hotspot-ping {
  0%   { box-shadow: 0 0 0 0 rgba(232,121,106, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(232,121,106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232,121,106, 0); }
}
.location-hotspot span {
  font-family: 'Oswald', sans-serif; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; font-size: 12px;
}
.quest-marker { animation: quest-bob 1.8s ease-in-out infinite; }
@keyframes quest-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .char-panel__frame::before, .char-panel__art, .char-panel__frame::after,
  .xp-track i::after, .location-hotspot i, .quest-marker { animation: none; }
}

/* =========================================================================
   CIDADE VIVA — feita de LUZ, na escala e nos ângulos da arte
   A imagem é uma vista aérea noturna: veículos são riscos de farol de poucos
   pixels e as avenidas correm na diagonal. Tudo aqui segue essa lógica, para
   parecer parte da cena e não um adesivo colado por cima.
   ====================================================================== */
.city-stage { position: relative; overflow: hidden; }
.city-life { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Respiração da câmera: um zoom lentíssimo tira a sensação de foto parada. */
.city-stage__image { animation: camera-drift 90s ease-in-out infinite; transform-origin: 55% 45%; }
@keyframes camera-drift {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50%      { transform: scale(1.045) translate(-0.8%, -0.6%); }
}

/* ---------------------- Faróis correndo nas avenidas -------------------- */
.traffic { position: absolute; height: 0; }
.traffic i {
  position: absolute; top: 0; left: 0;
  width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,180,170, 0.9), transparent);
  filter: blur(1.1px);
  opacity: 0;
  animation: headlight 9s linear infinite;
}
/* Sentido oposto: lanternas traseiras, avermelhadas. */
.traffic i:nth-child(2) {
  background: linear-gradient(90deg, transparent, rgba(255, 130, 110, 0.75), transparent);
  width: 20px;
  animation-duration: 12s; animation-delay: -4s;
}
.traffic i:nth-child(3) { animation-duration: 15s; animation-delay: -9s; width: 18px; }

@keyframes headlight {
  0%   { transform: translateX(-30px); opacity: 0; }
  8%   { opacity: 0.85; }
  88%  { opacity: 0.85; }
  100% { transform: translateX(var(--run, 420px)); opacity: 0; }
}

/* Cada avenida segue o ângulo real da diagonal na imagem. */
.traffic--av1 { top: 34%; left: 8%;  width: 44%; --run: 430px; transform: rotate(19deg); }
.traffic--av2 { top: 62%; left: 4%;  width: 40%; --run: 400px; transform: rotate(-16deg); }
.traffic--av3 { top: 47%; left: 46%; width: 46%; --run: 450px; transform: rotate(-21deg); }
.traffic--av4 { top: 78%; left: 30%; width: 44%; --run: 420px; transform: rotate(13deg); }

/* ------------------- Janelas acendendo e apagando ----------------------- */
.city-windows {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    radial-gradient(circle 3px at 68% 12%, rgba(255,171,160, 0.75), transparent 70%),
    radial-gradient(circle 2px at 74% 20%, rgba(255,171,160, 0.7), transparent 70%),
    radial-gradient(circle 3px at 22% 46%, rgba(255,171,160, 0.65), transparent 70%),
    radial-gradient(circle 2px at 84% 55%, rgba(255,171,160, 0.7), transparent 70%),
    radial-gradient(circle 3px at 45% 64%, rgba(255,171,160, 0.6), transparent 70%),
    radial-gradient(circle 2px at 61% 78%, rgba(255,171,160, 0.7), transparent 70%);
  animation: windows-flicker 17s steps(1, end) infinite;
}
@keyframes windows-flicker {
  0%, 22%  { opacity: 0.9; }
  23%, 44% { opacity: 0.35; }
  45%, 66% { opacity: 0.75; }
  67%, 88% { opacity: 0.5; }
  89%, 100% { opacity: 0.95; }
}

/* --------------------------- Névoa rasteira ----------------------------- */
.city-haze {
  position: absolute; left: -20%; bottom: -6%; width: 150%; height: 34%;
  background:
    radial-gradient(60% 100% at 20% 100%, rgba(209,152,185, 0.16), transparent 70%),
    radial-gradient(50% 100% at 62% 100%, rgba(209,152,185, 0.12), transparent 72%);
  filter: blur(10px);
  animation: haze-drift 70s ease-in-out infinite;
}
@keyframes haze-drift {
  0%, 100% { transform: translateX(0); opacity: 0.75; }
  50%      { transform: translateX(6%); opacity: 1; }
}

/* -------------------- Aeronave cruzando lá em cima ---------------------- */
.city-aircraft {
  position: absolute; top: 7%; left: -5%;
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 120, 120, 0.9);
  animation: aircraft-cross 38s linear infinite, aircraft-blink 1.6s steps(1, end) infinite;
}
@keyframes aircraft-cross {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(112vw, 26px); }
}
@keyframes aircraft-blink {
  0%, 55%   { opacity: 1; }
  56%, 100% { opacity: 0.15; }
}

/* ------------- Passagem lenta da madrugada para o amanhecer ------------- */
/* A arte JÁ é noturna: o ciclo apenas esfria e esquenta a luz, sem virar dia. */
.city-cycle {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  animation: city-nightfall 300s ease-in-out infinite;
}
@keyframes city-nightfall {
  0%   { background: linear-gradient(180deg, rgba(94,32,68, 0.30), rgba(29,7,20, 0.20)); }
  35%  { background: linear-gradient(180deg, rgba(55,13,37, 0.45), rgba(20,3,13, 0.35)); }
  62%  { background: linear-gradient(180deg, rgba(109,59,88, 0.30), rgba(51,21,39, 0.22)); }
  82%  { background: linear-gradient(180deg, rgba(150, 110, 90, 0.26), rgba(60, 50, 70, 0.18)); }
  100% { background: linear-gradient(180deg, rgba(94,32,68, 0.30), rgba(29,7,20, 0.20)); }
}

@media (prefers-reduced-motion: reduce) {
  .city-stage__image, .traffic i, .city-windows, .city-haze, .city-aircraft, .city-cycle { animation: none; }
  .city-life { display: none; }
}

/* =========================================================================
   FICHA DE EQUIPAMENTO (boneco de RPG) e MEDALHÕES DE ITEM
   ====================================================================== */
.gear-doll {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 14px 8px 18px;
}
.gear-doll__column { display: grid; gap: 12px; }

/* Encaixe: moldura chanfrada com a cor da raridade */
.gear-slot { position: relative; display: grid; justify-items: center; gap: 4px; }
.gear-slot__frame {
  display: grid; place-items: center; width: 60px; height: 60px;
  clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%);
  background: linear-gradient(160deg, #5e2546 0%, #350e25 55%, #250819 100%);
  box-shadow: inset 0 0 0 2px rgba(198,122,166, 0.35), inset 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.gear-slot__frame .ico { width: 30px; height: 30px; }
.gear-slot__empty { opacity: 0.28; }
.gear-slot__label {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-dim);
}
.gear-slot:hover .gear-slot__frame { transform: translateY(-2px); }

/* Raridades: cada nível tem cor e brilho próprios (padrão de RPG) */
.gear-slot.tier-1 .gear-slot__frame { box-shadow: inset 0 0 0 2px #b78ba5, inset 0 4px 12px rgba(0, 0, 0, 0.55); }
.gear-slot.tier-2 .gear-slot__frame { box-shadow: inset 0 0 0 2px #4fae6a, inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 10px rgba(79, 174, 106, 0.35); }
.gear-slot.tier-3 .gear-slot__frame { box-shadow: inset 0 0 0 2px #fb5fba, inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 12px rgba(251,95,186, 0.4); }
.gear-slot.tier-4 .gear-slot__frame { box-shadow: inset 0 0 0 2px #c084fc, inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(192, 132, 252, 0.45); }
.gear-slot.tier-5 .gear-slot__frame {
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 18px rgba(232,121,106, 0.55);
  animation: gear-legendary 2.6s ease-in-out infinite;
}
@keyframes gear-legendary {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--gold), inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 12px rgba(232,121,106, 0.4); }
  50%      { box-shadow: inset 0 0 0 2px #ffb9b0, inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 22px rgba(232,121,106, 0.75); }
}

/* Balão com o item equipado */
.gear-slot__tip {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  z-index: 20; display: none; width: max-content; max-width: 190px;
  padding: 8px 10px; text-align: center;
  background: linear-gradient(180deg, #4e1737, #26091a);
  border: 1px solid var(--gold); border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}
.gear-slot:hover .gear-slot__tip, .gear-slot:focus-within .gear-slot__tip { display: grid; gap: 5px; }
.gear-slot__tip strong { font-size: 12.5px; color: #ffb9b0; }
.gear-slot__tip small { font-size: 12px; color: var(--ink-dim); }

/* Herói ao centro */
.gear-doll__hero { position: relative; display: grid; justify-items: center; gap: 8px; }
.gear-doll__hero img { position: relative; z-index: 1; max-width: 210px; width: 100%; height: auto; animation: hero-breathe 4.2s ease-in-out infinite; }
.gear-doll__avatar { position: relative; z-index: 1; font-size: 84px; }
.gear-doll__aura {
  position: absolute; left: 50%; top: 52%; width: 76%; padding-bottom: 76%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(232,121,106, 0.22), rgba(176, 123, 255, 0.12) 45%, transparent 70%);
  animation: hero-aura 5.5s ease-in-out infinite;
}
.gear-doll__plate {
  position: relative; z-index: 1; display: grid; justify-items: center;
  padding: 5px 16px; border-radius: 6px;
  background: linear-gradient(180deg, #6c2c51, #3d112b);
  border: 1px solid rgba(232,121,106, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.gear-doll__plate strong { font-family: 'CinzelDecorativa', serif; font-size: 13px; color: #ffb9b0; }
.gear-doll__plate small { font-family: 'Oswald', sans-serif; font-size: 11.5px; letter-spacing: 0.1em; color: var(--ink-dim); }

@media (max-width: 720px) {
  .gear-doll { grid-template-columns: repeat(4, 1fr); }
  .gear-doll__column { grid-template-columns: repeat(2, 1fr); grid-column: span 2; }
  .gear-doll__hero { grid-column: span 4; order: -1; }
}

/* ------------------- Medalhão de item (loja e mochila) ------------------ */
.shop-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px;
  clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%);
  background: linear-gradient(160deg, #5e2546 0%, #350e25 55%, #250819 100%);
  box-shadow: inset 0 0 0 2px rgba(198,122,166, 0.35), inset 0 4px 12px rgba(0, 0, 0, 0.6);
}
.shop-card__icon .ico { width: 28px; height: 28px; }
.shop-card.tier-2 .shop-card__icon { box-shadow: inset 0 0 0 2px #4fae6a, inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 10px rgba(79, 174, 106, 0.3); }
.shop-card.tier-3 .shop-card__icon { box-shadow: inset 0 0 0 2px #fb5fba, inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 12px rgba(251,95,186, 0.35); }
.shop-card.tier-4 .shop-card__icon { box-shadow: inset 0 0 0 2px #c084fc, inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(192, 132, 252, 0.4); }
.shop-card.tier-5 .shop-card__icon { box-shadow: inset 0 0 0 2px var(--gold), inset 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 18px rgba(232,121,106, 0.5); }
.shop-card.is-equipped-card { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(0, 0, 0, 0.5); }

/* ---------------------------------------------------------------------
   ITEM ILUSTRADO
   Item com arte própria não cabe num selo de 52 px: a ilustração vira o
   painel do topo da carta, com o selo de raridade por cima, como nas
   fichas de referência do projeto. Quem só tem ícone vetorial segue com o
   medalhão de sempre.
   ------------------------------------------------------------------ */
.item-art { display: block; width: 100%; height: 100%; object-fit: cover; }

.shop-card__head--art {
  position: relative; display: block; height: 122px; margin: -4px -4px 2px;
  overflow: hidden; border: 1px solid rgba(198,88,74, 0.35);
  background: radial-gradient(120% 90% at 50% 20%, rgba(255, 236, 190, 0.10), transparent 65%), #250b1a;
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.shop-card__head--art .shop-card__icon {
  position: absolute; inset: 0; width: auto; height: auto;
  clip-path: none; background: none; box-shadow: none;
}
/* A arte respira devagar quando o ponteiro passa — é carta de loja, não foto. */
.shop-card__head--art .item-art { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.shop-card:hover .shop-card__head--art .item-art { transform: scale(1.06); }
.shop-card__head--art .tier-badge {
  position: absolute; right: 6px; bottom: 6px; z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
/* Véu na base para o selo de raridade ficar legível sobre arte clara. */
.shop-card__head--art::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(24,4,16, 0.8));
}
.shop-card.tier-2 .shop-card__head--art { border-color: rgba(79, 174, 106, 0.6); }
.shop-card.tier-3 .shop-card__head--art { border-color: rgba(251,95,186, 0.6); }
.shop-card.tier-4 .shop-card__head--art { border-color: rgba(192, 132, 252, 0.65); }
.shop-card.tier-5 .shop-card__head--art { border-color: var(--gold); box-shadow: 0 0 16px rgba(232,121,106, 0.35); }

/* Encaixe de equipamento com a ilustração dentro da moldura chanfrada */
.gear-slot__frame .item-art {
  width: 100%; height: 100%;
  clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%);
}

/* Lista de desejos e mochila: medalhão um pouco maior para caber a arte */
.wishlist-row .shop-card__icon .item-art,
.shop-card__head:not(.shop-card__head--art) .item-art {
  clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%);
}

/* ---------------------------------------------------------------------
   PERSONAGEM
   O avatar é uma figura de corpo inteiro, quase três vezes mais alta do que
   larga. Dimensionar pela largura, como se fazia com o retrato quadrado,
   estica o boneco para 600 px e afunda o resto do painel: aqui manda a
   ALTURA, e a largura acompanha.
   ------------------------------------------------------------------ */
.avatar-img--art { object-fit: cover; object-position: 50% 10%; }
.gear-doll__body {
  position: relative; z-index: 1;
  height: clamp(240px, 38vh, 360px); width: auto; max-width: 100%;
  border-radius: 0;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7));
  animation: hero-breathe 4.2s ease-in-out infinite;
}
/* Retrato pequeno (cabeçalho, ranking, chat): mostra o rosto, não os pés. */
.mini-avatar .avatar-img--art,
.page-emblem--avatar .avatar-img--art,
.avatar-option .avatar-img--art { object-position: 50% 6%; }

/* ---------------------------------------------------------------------
   ESCOLHA DE PERSONAGEM
   Antes eram oito quadradinhos de 46 px sem nome nenhum: não dava para
   saber quem era quem, nem que existia raridade. Agora cada personagem é
   uma carta com a ilustração inteira, o nome, a raridade e o lema — e o
   cadeado com o nível que o libera, para a escolha virar objetivo.
   ------------------------------------------------------------------ */
.hero-picker {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.hero-picker--compact { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }

.hero-card {
  position: relative; display: grid; gap: 0; cursor: pointer;
  background: linear-gradient(180deg, #4e1737 0%, #320c22 60%, #26091a 100%);
  border: 1px solid rgba(198,88,74, 0.35);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.hero-card input { position: absolute; opacity: 0; pointer-events: none; }
.hero-card__art {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4;
  background: radial-gradient(110% 80% at 50% 15%, rgba(255, 236, 190, 0.10), transparent 65%), #250b1a;
}
.hero-card__art img,
.hero-card__art .avatar-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 8%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-card:hover { transform: translateY(-3px); }
.hero-card:hover .hero-card__art img { transform: scale(1.05); }
.hero-card__body {
  display: grid; gap: 3px; padding: 8px 9px 10px; justify-items: center; text-align: center;
}
.hero-card__body strong {
  font-family: 'Cinzel', Georgia, serif; font-size: 12px; line-height: 1.25; color: #ffb9b0;
}
.hero-card__body small { font-size: 12px; line-height: 1.35; color: var(--ink-dim); font-style: italic; }
.hero-picker--compact .hero-card__body small { display: none; }

.rarity-badge {
  font-family: 'Oswald', sans-serif; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 2px 9px; color: #1e0714;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}
.rarity-badge--1 { background: linear-gradient(180deg, #e3d0db, #b78ba5); }
.rarity-badge--2 { background: linear-gradient(180deg, #86efac, #22a75a); }
.rarity-badge--3 { background: linear-gradient(180deg, #fa96d0, #dc3f9b); color: #1e0514; }
.rarity-badge--4 { background: linear-gradient(180deg, #d8b4fe, #9333ea); color: #1a0630; }
.rarity-badge--5 { background: linear-gradient(180deg, #ffb9b0, #c63e2c); }

.hero-card.rarity-2 { border-color: rgba(79, 174, 106, 0.55); }
.hero-card.rarity-3 { border-color: rgba(251,95,186, 0.55); }
.hero-card.rarity-4 { border-color: rgba(192, 132, 252, 0.6); }
.hero-card.rarity-5 { border-color: var(--gold); }

/* Selecionado: moldura dourada e um brilho que não deixa dúvida */
.hero-card input:checked ~ .hero-card__art { box-shadow: inset 0 0 0 2px var(--gold); }
.hero-card:has(input:checked) {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 20px rgba(232,121,106, 0.3);
  transform: translateY(-3px);
}
.hero-card.is-current .hero-card__body strong { color: var(--gold); }

/* Trancado: a arte fica em segundo plano e o nível aparece por cima */
.hero-card.is-locked { cursor: not-allowed; opacity: 0.85; }
.hero-card.is-locked .hero-card__art img { filter: grayscale(0.85) brightness(0.5); transform: none; }
.hero-card.is-locked:hover { transform: none; box-shadow: none; }
.hero-card__lock {
  position: absolute; inset: auto 0 0 0; padding: 5px 0;
  font-family: 'Oswald', sans-serif; font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; text-align: center; font-style: normal;
  color: #ffb9b0; background: linear-gradient(180deg, transparent, rgba(24,4,16, 0.92));
}
.hero-card__lock::before { content: "🔒 "; }

.form-hint { margin: -2px 0 8px; font-size: 11.5px; color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  .hero-card, .hero-card__art img { transition: none; }
  .hero-card:hover { transform: none; }
}

/* =========================================================================
   FIM DAS CAIXAS RETAS — regra do dono: nada de chanfro nem canto quadrado.
   Painéis e menus são cápsulas e cartões arredondados, na linguagem Festival;
   os efeitos bons ficam (aba ativa salta, lâmina de luz embaixo).
   ====================================================================== */

/* --------------------------------- HUD --------------------------------- */
.hud-top {
  position: relative;
  clip-path: none;
  border-radius: 0 0 28px 28px;
}

/* Retrato do jogador em moldura circular ornamentada */
.avatar-frame {
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7), 0 0 18px rgba(232,121,106, 0.4);
}

/* --------------------------- Menu em trilho ---------------------------- */
.main-nav {
  clip-path: none;
  border-radius: 26px;
  padding: 10px 14px 12px;
}
.main-nav__item {
  clip-path: none;
  border-radius: 16px;
  border: 0;
}
/* A aba ativa salta do trilho e ganha lâmina de luz embaixo */
.main-nav__item.is-active {
  transform: translateY(-5px) scale(1.07);
  z-index: 2;
}
.main-nav__item.is-active::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -6px; height: 3px;
  background: linear-gradient(90deg, transparent, #ffb9b0, transparent);
  filter: blur(0.5px);
}

/* ------------------------- Painéis arredondados ------------------------- */
.game-panel, .page-header, .mission-banner {
  clip-path: none;
  border-radius: var(--radius);
}
/* Contorno coral por dentro no lugar da borda dura. */
.game-panel { box-shadow: inset 0 0 0 1px rgba(198,88,74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 26px rgba(0, 0, 0, 0.5); }
.page-header { box-shadow: inset 0 0 0 1px rgba(198,88,74, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(0, 0, 0, 0.5); }

/* Janela de prédio: portal de cantos largos */
.mmo-window {
  clip-path: none;
  border-radius: 30px;
}
.mmo-window__corner { display: none; }

/* Fichas de status em forma de brasão */
.stat-tile {
  clip-path: polygon(50% 0, 100% 12%, 100% 88%, 50% 100%, 0 88%, 0 12%);
  border-radius: 0;
  padding: 12px 16px;
  background: linear-gradient(180deg, #5c2043, #2f0b20);
  box-shadow: inset 0 0 0 1px rgba(198,88,74, 0.35);
}
.stat-tile--accent { background: linear-gradient(180deg, #3a1814, #1a0a08); box-shadow: inset 0 0 0 1px var(--gold); }
.stat-tile strong { color: #ffb9b0; }

/* Selo de raridade com forma de fita */
.tier-badge {
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
  border-radius: 0; padding: 3px 14px;
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px;
}

/* Divisor ornamentado entre blocos */
.card-heading::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .main-nav__item.is-active { transform: none; }
}

/* =========================================================================
   BIBLIOTECA COMO BIBLIOTECA — estante, prateleiras e lombadas de livro
   ====================================================================== */
.bookcase {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(60, 38, 18, 0.55), rgba(24, 15, 8, 0.7)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 3px, transparent 3px 9px);
  border: 2px solid #6b4a22;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 14px 34px rgba(0, 0, 0, 0.55);
  clip-path: polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
}
.bookcase__plate {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 10px 14px;
  background: linear-gradient(180deg, rgba(198,88,74, 0.28), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(198,88,74, 0.5);
}
.bookcase__plate strong {
  display: block; font-family: 'CinzelDecorativa', serif; font-size: 17px; color: #ffb9b0;
}
.bookcase__plate small { color: var(--ink-dim); font-size: 11.5px; }
.bookcase__seal {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 2px solid var(--gold);
  background: radial-gradient(circle at 35% 30%, #3d1712, #120b04);
}
.bookcase__status { margin-left: auto; }
.bookcase__source { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-dim); }
.bookcase__source a { color: var(--gold); }

/* Prateleira: uma tábua de madeira com os livros em pé */
.shelf { margin-bottom: 14px; }
.shelf__label { margin-bottom: 6px; font-size: 12px; color: var(--ink-dim); }
.shelf__label a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.shelf__label b { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.07em; color: #f0a49a; font-size: 13px; }
.shelf__label small { color: var(--ink-dim); font-size: 12px; }
.shelf__mine {
  font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 2px 8px; color: #240804;
  background: linear-gradient(180deg, #f08a7d, #b03b2c);
}
.shelf.is-mine .shelf__label b { color: #ffb9b0; }
.shelf__books {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end;
  padding: 12px 10px 0;
  border-bottom: 10px solid #4a3117;
  box-shadow: 0 10px 14px -8px rgba(0, 0, 0, 0.85);
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.35));
  min-height: 92px;
}

/* Lombada de livro */
.book {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  width: 126px; min-height: 116px; padding: 10px 9px 9px;
  text-decoration: none; color: #f6c7c1;
  border-radius: 2px 2px 0 0;
  box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.4), inset 2px 0 0 rgba(255, 255, 255, 0.15), 0 -3px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.14s ease, filter 0.18s ease;
}
.book:hover { transform: translateY(-8px); filter: brightness(1.12); }
.book__band {
  position: absolute; left: 0; right: 0; top: 16px; height: 10px;
  background: linear-gradient(180deg, rgba(255,185,176, 0.85), rgba(198,88,74, 0.5));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.book__title {
  font-family: 'Oswald', sans-serif; font-size: 12px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.book__meta { font-size: 11px; opacity: 0.75; margin-top: 3px; }
.book__bar { display: block; height: 4px; margin-top: 6px; background: rgba(0, 0, 0, 0.5); }
.book__bar i { display: block; height: 100%; background: linear-gradient(90deg, #b45309, var(--gold)); }
.book__pending { font-size: 10.5px; margin-top: 5px; opacity: 0.6; font-style: italic; }
.book.is-pending { filter: saturate(0.45); }

/* Seis capas diferentes, para a estante não ficar monocromática */
.book--spine0 { background: linear-gradient(180deg, #6d1f28, #3d0f16); }
.book--spine1 { background: linear-gradient(180deg, #6b214c, #381027); }
.book--spine2 { background: linear-gradient(180deg, #2c5c37, #122c1b); }
.book--spine3 { background: linear-gradient(180deg, #5a3a72, #2c1a3a); }
.book--spine4 { background: linear-gradient(180deg, #7a2b20, #3d2810); }
.book--spine5 { background: linear-gradient(180deg, #552441, #2b1120); }

/* -------------------------- Livro aberto (programa) --------------------- */
.open-book {
  padding: 22px 26px;
  background: linear-gradient(180deg, #f3cdc8 0%, #e6b5ae 100%);
  color: #2b1613;
  border: 2px solid #6b4a22;
  box-shadow: inset 0 0 60px rgba(120,49,40, 0.35), 0 14px 34px rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}
.open-book__head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid #b87c74; padding-bottom: 12px; }
.open-book__head h1 { margin: 2px 0; color: #4a2f10; text-shadow: none; font-size: 22px; }
.open-book__head small { font-family: 'Oswald', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: #7a332a; }
.open-book__head p { margin: 2px 0 0; font-size: 13px; color: #5b332e; }
.open-book__seal {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border-radius: 50%; border: 2px solid #8a352a; background: #e0a7a0;
}
.open-book__seal .ico { filter: brightness(0.5) sepia(1) saturate(2); }
.program-list { list-style: none; margin: 16px 0 0; padding: 0; columns: 2; column-gap: 28px; }
@media (max-width: 760px) { .program-list { columns: 1; } }
.program-item { break-inside: avoid; display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dotted #b87c74; }
.program-item__n {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  font-family: 'Oswald', sans-serif; font-size: 11px; color: #f3cdc8;
  background: linear-gradient(180deg, #8a352a, #5a2018); border-radius: 50%;
}
.program-item__text { font-size: 12.5px; line-height: 1.4; }
.open-book__foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.open-book__foot .muted { color: #6b3c36; font-size: 12px; margin: 0; }

/* =========================================================================
   CORTINA DE CARREGAMENTO — Leonática, a elfa dos concursos
   ====================================================================== */
.has-loading-screen { overflow: hidden; }
.loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: clamp(8px, 2vw, 24px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s;
  background:
    radial-gradient(1000px 650px at 50% 28%, rgba(108,37,78, 0.96), rgba(20,3,13, 0.99)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 5px);
  backdrop-filter: blur(3px);
}
.loading-screen::before,
.loading-screen::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(2px); opacity: .48;
}
.loading-screen::before {
  width: min(42vw, 560px); aspect-ratio: 1; left: -14vw; top: -18vw;
  background: radial-gradient(circle, rgba(179,224,43, .2), transparent 68%);
}
.loading-screen::after {
  width: min(38vw, 500px); aspect-ratio: 1; right: -12vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(154, 83, 230, .24), transparent 69%);
}
.loading-screen.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.loading-screen__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(300px, 42%) minmax(360px, 1fr);
  width: min(1060px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 32px)); height: min(620px, calc(100dvh - 32px));
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow: hidden;
  color: #ffedf7; text-align: left;
  background: linear-gradient(145deg, rgba(76,19,52, .98), rgba(33,6,22, .985) 66%);
  border: 1px solid rgba(232,121,106, .72); border-radius: 22px;
  box-shadow: inset 0 0 0 6px rgba(232,121,106, .035), 0 30px 90px rgba(0, 0, 0, .78), 0 0 60px rgba(214,59,149, .08);
  animation: loading-in .32s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes loading-in {
  from { transform: translateY(18px) scale(.975); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.loading-screen__visual {
  position: relative; min-height: 0; margin: 0; overflow: hidden;
  isolation: isolate; background: #3d0c29;
  border-right: 1px solid rgba(232,121,106, .4);
}
.loading-screen__visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 48%, rgba(21,2,13, .94) 100%), linear-gradient(90deg, transparent 75%, rgba(33,6,22, .5));
}
.loading-screen__leonatica {
  display: block; width: 100%; height: 100%; min-height: 0;
  object-fit: cover; object-position: 50% 22%;
  filter: saturate(1.04) contrast(1.025);
  transform: scale(1.015); transform-origin: 50% 30%;
}
.loading-screen.is-visible .loading-screen__leonatica { animation: leonatica-reveal .55s ease-out both; }
@keyframes leonatica-reveal {
  from { opacity: .45; transform: scale(1.045) translateY(5px); }
  to { opacity: 1; transform: scale(1.015); }
}
.loading-screen__visual figcaption {
  position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px;
  display: grid; gap: 3px; padding-left: 14px;
  border-left: 3px solid #c3e758; text-shadow: 0 2px 9px #000;
}
.loading-screen__visual figcaption strong {
  color: #fff1c8; font: 700 clamp(22px, 2.5vw, 31px)/1.1 'CinzelDecorativa', 'Cinzel', serif;
}
.loading-screen__visual figcaption span { color: #f5d8e9; font: 600 13px/1.4 'Oswald', sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.loading-screen__copy {
  align-content: center; display: grid; gap: 15px;
  min-width: 0; overflow-y: auto; padding: clamp(30px, 5vw, 58px);
}
.loading-screen__eyebrow { display: flex; align-items: center; gap: 13px; }
.loading-screen__eyebrow > span:last-child { display: grid; gap: 1px; }
.loading-screen__eyebrow small { color: #e765b1; font: 600 11px/1.2 'Oswald', sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.loading-screen__eyebrow b { color: #f4b8b0; font-size: 14px; font-weight: 650; }
.loading-screen__seal {
  display: grid; place-items: center; flex: 0 0 auto; width: 54px; height: 54px;
  border-radius: 50%; border: 1px solid rgba(232,121,106, .78);
  background: radial-gradient(circle at 35% 30%, #722a54, #300a20 72%);
  box-shadow: inset 0 0 0 4px rgba(232,121,106, .06), 0 0 20px rgba(222,94,169, .12);
  animation: seal-pulse 2.4s ease-in-out infinite;
}
@keyframes seal-pulse { 50% { transform: translateY(-2px); box-shadow: inset 0 0 0 4px rgba(232,121,106,.08), 0 0 28px rgba(222,94,169,.25); } }
.loading-screen__seal .ico { width: 29px; height: 29px; }
.loading-screen__title {
  max-width: 620px; color: #fff0c1;
  font: 700 clamp(27px, 3.1vw, 43px)/1.15 'CinzelDecorativa', 'Cinzel', serif;
  text-wrap: balance; text-shadow: 0 1px 0 #6c1b10, 0 4px 14px rgba(0, 0, 0, .72);
}
.loading-screen__bar {
  display: block; width: min(100%, 520px); height: 9px; overflow: hidden;
  border: 1px solid rgba(198,88,74, .55); border-radius: 99px;
  background: rgba(0, 0, 0, .55);
}
.loading-screen__bar i {
  display: block; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold), #fff3d0, var(--gold), transparent);
  animation: loading-run 1.15s ease-in-out infinite; will-change: transform;
}
@keyframes loading-run {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}
.loading-screen__label {
  margin-top: 2px; color: #e88679;
  font: 650 12px/1.2 'Oswald', sans-serif; letter-spacing: .2em; text-transform: uppercase;
}
.loading-screen__lesson {
  display: grid; gap: 8px; min-height: 124px; margin: 0; padding: 18px 20px;
  border: 1px solid rgba(199,92,154, .35); border-left: 4px solid #9d71e7; border-radius: 11px;
  background: linear-gradient(135deg, rgba(50,9,33, .88), rgba(61,24,46, .52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.loading-screen__term {
  color: #c9e86c; font: 700 clamp(17px, 1.8vw, 22px)/1.3 'CinzelDecorativa', 'Cinzel', serif;
  letter-spacing: .035em; text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}
.loading-screen__term[hidden] { display: none; }
.loading-screen__tip {
  min-height: 54px; margin: 0; color: #f6e1ed;
  font-size: clamp(18px, 1.55vw, 20px); line-height: 1.58;
}
.loading-screen__signature { justify-self: end; color: #d68479; font: italic 13px/1.4 Georgia, serif; }

/* Retrato global usado pelo banner antigo do tutorial. */
.tutorial-banner .leonatica-banner__portrait {
  width: 112px; height: 112px; object-fit: cover; object-position: 50% 20%;
  border-radius: 18px; border: 1px solid rgba(242,131,116, .55);
}

@media (max-width: 760px) {
  .loading-screen { padding: 6px; }
  .loading-screen__inner {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(190px, 34vh) auto;
    width: calc(100vw - 12px); height: auto; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px);
    overflow-y: auto; border-radius: 16px;
  }
  .loading-screen__visual { min-height: 190px; border-right: 0; border-bottom: 1px solid rgba(232,121,106, .4); }
  .loading-screen__leonatica { min-height: 190px; object-position: 50% 19%; }
  .loading-screen__visual figcaption { left: 17px; right: 17px; bottom: 13px; }
  .loading-screen__visual figcaption strong { font-size: clamp(20px, 7vw, 28px); }
  .loading-screen__visual figcaption span { font-size: 11.5px; }
  .loading-screen__copy { align-content: start; width: 100%; max-width: 100%; overflow-x: hidden; gap: 11px; padding: 19px 17px 22px; }
  .loading-screen__eyebrow { gap: 10px; }
  .loading-screen__seal { width: 44px; height: 44px; }
  .loading-screen__seal .ico { width: 24px; height: 24px; }
  .loading-screen__title,
  .loading-screen__term,
  .loading-screen__tip { overflow-wrap: anywhere; }
  .loading-screen__title { font-size: clamp(23px, 7.5vw, 32px); }
  .loading-screen__lesson { min-height: 0; padding: 14px 15px; }
  .loading-screen__term { font-size: 19px; line-height: 1.32; }
  .loading-screen__tip { min-height: 0; font-size: 18px; line-height: 1.52; }
  .loading-screen__signature { font-size: 12px; }
}

@media (max-width: 620px) {
  .loading-screen__leonatica { object-position: 50% 18%; }
  .tutorial-banner .leonatica-banner__portrait { width: 92px; height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen { transition: none; }
  .loading-screen__seal,
  .loading-screen__inner,
  .loading-screen.is-visible .loading-screen__leonatica,
  .loading-screen__bar i { animation: none !important; }
  .loading-screen__bar i { width: 100%; background: linear-gradient(90deg, #b83e2e, #fff0be, #b83e2e); }
}

/* ------------- Rótulos da cidade sem sobrepor uns aos outros ------------ */
.hotspot--right span { left: 100%; transform: translate(6px, -50%); top: 50%; }
.hotspot--left span { left: auto; right: 100%; transform: translate(-6px, -50%); top: 50%; }
.location-hotspot:hover span { z-index: 12; }
.location-hotspot span { z-index: 6; }

/* =========================================================================
   TEMA DE CONCURSEIRO — arte de fundo nos cabeçalhos e no carregamento
   Fórum e balança da justiça, edital carimbado, nomeação ao amanhecer.
   ====================================================================== */
.page-header, .mmo-window__title, .bookcase__plate {
  background-repeat: no-repeat;
  background-position: right -60px center;
  background-size: auto 190%;
}
/* Cada área do jogo recebe a cena que combina com ela. */
.page-header {
  background-image:
    linear-gradient(90deg, #2f0b20 22%, rgba(47,11,32, 0.86) 48%, rgba(47,11,32, 0.55) 100%),
    url('../img/tema/tribunal.svg');
}
.library-hero, .bookcase__plate {
  background-image:
    linear-gradient(90deg, #2f0b20 24%, rgba(47,11,32, 0.88) 50%, rgba(47,11,32, 0.5) 100%),
    url('../img/tema/edital.svg');
}
.exam-header, .exam-header.game-panel {
  background-image:
    linear-gradient(90deg, #2f0b20 26%, rgba(47,11,32, 0.9) 52%, rgba(47,11,32, 0.5) 100%),
    url('../img/tema/edital.svg');
  background-repeat: no-repeat;
  background-position: right -40px center;
  background-size: auto 200%;
}
/* Resultado de prova e ranking: o amanhecer da nomeação. */
.exam-result-hero, .ranking-hero, .page-header--victory {
  background-image:
    linear-gradient(90deg, #2f0b20 22%, rgba(47,11,32, 0.84) 48%, rgba(47,11,32, 0.45) 100%),
    url('../img/tema/nomeacao.svg');
}
.loading-screen {
  background-image:
    radial-gradient(900px 500px at 50% 30%, rgba(94,30,67, 0.94), rgba(20,4,13, 0.985)),
    url('../img/tema/nomeacao.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center bottom;
  background-size: cover, 1400px auto;
}

/* Faixa de brasão sob o título das páginas */
.page-header__title h1::after {
  content: ""; display: block; width: 96px; height: 3px; margin-top: 6px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* Marca d'água do fundo geral: papel de edital muito discreto */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.05;
  background: url('../img/tema/edital.svg') center top / 1600px auto repeat-y;
}

/* Barra de cobertura do acervo por cargo (aviso honesto na inscrição) */
.coverage {
  position: relative; display: block; height: 18px; margin: 4px 0 2px;
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line-soft);
}
.coverage i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7f1d1d, #b45309); }
.coverage.is-complete i { background: linear-gradient(90deg, #166534, #4fae6a); }
.coverage b {
  position: relative; z-index: 1; display: block; text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 11.5px; letter-spacing: 0.06em;
  line-height: 16px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Atalho para o treino quando o simulado do cargo ainda não fecha */
.coverage-training {
  display: block; margin-top: 2px; font-size: 12px; color: var(--gold);
  text-decoration: none; line-height: 1.3;
}
.coverage-training:hover { text-decoration: underline; }

/* Selo da questão montada a partir de itens reais (procedência transparente) */
.badge-composed {
  font-style: normal; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; margin-left: auto;
  color: #320c22; background: linear-gradient(180deg, #fda1d7, #da5da6);
  border: 1px solid #b5327e; cursor: help;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}

/* =========================================================================
   SALA DE LEITURA — uma página por vez, com progresso visível
   ====================================================================== */
.reader-stage {
  display: grid; gap: 14px; padding: 16px;
  background: linear-gradient(180deg, #4e1737 0%, #320c22 60%, #26091a 100%);
  border: 1px solid rgba(198,88,74, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 34px rgba(0, 0, 0, 0.5);
  clip-path: polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
}
.reader-stage__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.reader-stage__crest {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 2px solid var(--gold);
  background: radial-gradient(circle at 35% 30%, #702c54, #2b0b1e 70%);
}
.reader-stage__id strong {
  display: block; font-family: 'CinzelDecorativa', serif; font-size: 16px; color: #ffb9b0;
}
.reader-stage__id small { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-dim); }
.reader-stage__gauge { margin-left: auto; display: grid; gap: 3px; justify-items: end; min-width: 190px; }
.reader-stage__gauge small { font-size: 12px; color: var(--ink-dim); }

.reader-gauge {
  position: relative; display: block; width: 190px; height: 18px;
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(198,88,74, 0.5);
}
.reader-gauge i {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, #b45309, var(--gold));
  transition: width 0.4s ease;
}
.reader-gauge.is-done i { background: linear-gradient(90deg, #166534, #4fae6a); }
.reader-gauge b {
  position: relative; z-index: 1; display: block; text-align: center; line-height: 16px;
  font-family: 'Oswald', sans-serif; font-size: 11px; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.reader-seal {
  padding: 4px 12px; font-family: 'Oswald', sans-serif; font-size: 11.5px;
  letter-spacing: 0.14em; color: #0b2a12;
  background: linear-gradient(180deg, #86efac, #22a75a);
  border: 1px solid #14532d; cursor: help;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}

/* Alternar entre livro aberto e página única */
.reader-modes { display: flex; gap: 4px; }
.reader-mode {
  display: grid; place-items: center; width: 30px; height: 26px;
  font-size: 14px; line-height: 1; text-decoration: none; color: var(--ink-dim);
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(198,88,74, 0.35);
}
.reader-mode:hover { color: #ffb9b0; border-color: var(--gold); }
.reader-mode.is-active {
  color: #2a0905; background: linear-gradient(180deg, #f08a7d, #b03b2c); border-color: #6d1d12;
}

/* ---------------------------------------------------------------------
   O LIVRO ABERTO
   A altura da folha é calculada a partir da janela, não da largura da
   imagem: assim a página inteira aparece de uma vez, como uma folha
   impressa sobre a mesa, sem rolagem dentro do texto.
   ------------------------------------------------------------------ */
.reader-book {
  /* A folha é limitada pelos DOIS lados: pela altura da janela (para caber
     inteira sem rolar) e pela largura disponível (para as duas folhas do livro
     aberto caberem lado a lado). 0.75 é uma proporção de folha de pé com
     folga — A4 é 0.71 — então a conta nunca estoura. */
  /* No modo foco a barra de cima é a única coisa acima da folha, então a
     altura disponível é quase a janela inteira. Descontam-se a barra, os
     controles de virar página e a régua de progresso — o resto é folha. */
  --util: min(1400px, calc(100vw - 26px));
  --folha: max(240px, min(calc(100vh - 250px), 940px, calc((var(--util) - 60px) / 0.75)));
  position: relative;
  display: flex; align-items: stretch; justify-content: center;
  gap: 0; padding: 18px 26px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 236, 190, 0.09), transparent 60%),
    linear-gradient(180deg, #321225 0%, #260b1b 100%);
  border: 1px solid var(--line-soft);
  min-height: 340px;
}
.reader-sheet {
  position: relative; margin: 0; flex: 0 1 auto;
  animation: folha-vira 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reader-sheet img {
  display: block; height: var(--folha); width: auto;
  max-width: 100%; max-height: calc(100vh - 250px);
  /* Rede de segurança: se algum documento vier em formato deitado, a página
     encolhe dentro da moldura em vez de esticar e distorcer o texto. */
  object-fit: contain;
  background: #fff; /* o PNG já é branco; evita piscar escuro enquanto carrega */
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6);
}
.reader-book.is-spread { --folha: max(240px, min(calc(100vh - 250px), 940px, calc((var(--util) - 70px) / 2 / 0.75))); }
/* Numeração no pé da folha, como num impresso */
.reader-sheet figcaption {
  position: absolute; left: 0; right: 0; bottom: -20px; text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.12em;
  color: var(--ink-dim);
}
.reader-book.is-spread { padding-bottom: 30px; }
/* Sombra da dobra: escurece a borda interna de cada folha */
.reader-book.is-spread .reader-sheet--left img {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), inset -22px 0 26px -22px rgba(0, 0, 0, 0.55);
}
.reader-book.is-spread .reader-sheet--right img {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), inset 22px 0 26px -22px rgba(0, 0, 0, 0.55);
}
.reader-book.is-spread .reader-sheet--left { animation-name: folha-vira-esq; }
/* Folha fantasma: mantém a capa no lado direito, como um livro recém-aberto */
.reader-book__edge {
  align-self: center; height: calc(var(--folha) * 0.97); width: calc(var(--folha) * 0.71);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.05); border-right: none;
}
.reader-book__spine {
  position: absolute; top: 18px; bottom: 30px; left: 50%; width: 16px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.45) 55%, transparent);
}
@keyframes folha-vira {
  from { opacity: 0; transform: perspective(1600px) rotateY(-10deg) translateX(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes folha-vira-esq {
  from { opacity: 0; transform: perspective(1600px) rotateY(10deg) translateX(-22px); }
  to   { opacity: 1; transform: none; }
}

/* Virar a folha clicando na lateral, como se puxasse com o dedo */
.reader-flip {
  position: absolute; top: 0; bottom: 0; width: 90px;
  display: grid; place-items: center; text-decoration: none;
  font-size: 34px; color: rgba(255,185,176, 0.35);
  opacity: 0; transition: opacity 0.18s ease, color 0.18s ease;
}
.reader-flip--prev { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent); }
.reader-flip--next { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0.4), transparent); }
.reader-book:hover .reader-flip { opacity: 1; }
.reader-flip:hover { color: var(--gold); }
.reader-flip span { line-height: 1; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); }

.reader-sheet--failed {
  display: grid; gap: 12px; place-items: center; text-align: center;
  padding: 40px; color: var(--ink-dim);
}

.reader-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.reader-controls .is-disabled { opacity: 0.35; pointer-events: none; }
.reader-dots { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; justify-content: center; }
.reader-dot {
  width: 8px; height: 8px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.08);
}
.reader-dot.is-read { background: linear-gradient(180deg, #f08a7d, #b03b2c); border-color: #6d1d12; }
.reader-dot.is-current { box-shadow: 0 0 0 2px rgba(232,121,106, 0.6); transform: scale(1.3); }
.reader-hint { margin: 0; font-size: 11.5px; color: var(--ink-dim); text-align: center; }

/* Em tela estreita não cabe livro aberto: uma folha, ocupando a largura. */
@media (max-width: 900px) {
  .reader-book { --folha: auto; padding: 12px; }
  .reader-book__edge, .reader-book__spine, .reader-flip { display: none; }
  .reader-book.is-spread { flex-wrap: wrap; gap: 22px; }
  .reader-sheet img { height: auto; width: 100%; max-height: none; }
  .reader-sheet figcaption { position: static; margin-top: 4px; }
  .reader-stage__gauge { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reader-sheet { animation: none; }
}

/* ---------------------------------------------------------------------
   LEITURA NO PC (29/09/2026, dono: "no pc fica pequeno e esquisito").
   Ajustada à altura da janela, uma página em pé num monitor deitado ficava
   com 460 px de largura e letra de 8–9 px. No PC a folha passa a ser
   ajustada à LARGURA de leitura (página única até 1000 px; livro aberto com
   as duas folhas dividindo a largura) e rola como um PDF. O botão ⤢ volta à
   "página inteira" (a regra antiga, por altura) e − / + ajustam o tamanho.
   Medidas pelo próprio livro (container query): a barra de rolagem da
   página nunca empurra a folha para fora.
   ------------------------------------------------------------------ */
.reader-zoom { display: none; }

@media (min-width: 901px) {
  .reader-book[data-ajuste="largura"] {
    --folha: auto;
    container-type: inline-size;
    align-items: flex-start;
    overflow-x: auto;
    padding: 14px 18px 36px;
  }
  .reader-book[data-ajuste="largura"] .reader-sheet img {
    width: calc(min(1000px, 94vw - 120px) * var(--zoom, 1));
    width: calc(min(1000px, 100cqw - 16px) * var(--zoom, 1));
    height: auto; max-width: none; max-height: none;
  }
  .reader-book.is-spread[data-ajuste="largura"] .reader-sheet img {
    width: calc((94vw - 150px) / 2 * min(var(--zoom, 1), 1));
    width: calc((100cqw - 20px) / 2 * min(var(--zoom, 1), 1));
  }
  .reader-book.is-spread[data-ajuste="largura"] .reader-book__edge {
    align-self: stretch; height: auto;
    width: calc((100cqw - 20px) / 2 * min(var(--zoom, 1), 1));
  }
  /* "Página inteira" (⤢): a folha toda na altura da janela, descontado o
     topo novo do leitor (cabeçalho + barra + faixa de desempenho). */
  .reader-book[data-ajuste="pagina"] { --folha: max(240px, min(calc(100vh - 285px), 940px)); }
  .reader-book[data-ajuste="pagina"] .reader-sheet img { max-height: calc(100vh - 285px); }
  /* As setas acompanham a rolagem numa folha alta, sem escurecer o texto. */
  .reader-book[data-ajuste="largura"] .reader-flip { width: 58px; align-items: start; }
  .reader-book[data-ajuste="largura"] .reader-flip span { position: sticky; top: 44vh; margin-top: 34vh; }
  .reader-book[data-ajuste="largura"] .reader-flip--prev { background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent); }
  .reader-book[data-ajuste="largura"] .reader-flip--next { background: linear-gradient(270deg, rgba(0, 0, 0, 0.28), transparent); }

  /* Topo enxuto: o título já está no cabeçalho do modo foco, e o aviso de
     pausa se repete no rodapé. Sobra altura para a folha. */
  .reader-stage { gap: 10px; }
  .reader-stage__crest,
  .reader-stage__id strong { display: none; }
  .reader-stage__id small { font-size: 13px; letter-spacing: 0.08em; color: #f3d6de; }
  .reader-stage .reading-performance {
    margin: 0; padding: 6px 14px; gap: 10px;
    grid-template-columns: minmax(150px, .6fr) minmax(0, 2fr);
  }
  .reader-stage .reading-performance__state small { display: none; }
  .reader-stage .reading-performance dd { margin-top: 2px; font-size: 14px; }
  /* Os rótulos ficavam rosa sobre a foto do cenário, difíceis de ler: no PC a
     faixa ganha um fundo translúcido (o tema foco a deixa transparente). */
  body.theme-focus .reader-stage .reading-performance {
    background-color: rgba(26, 6, 18, 0.78) !important;
    border-radius: 18px !important;
  }

  .reader-zoom { display: inline-flex; align-items: center; gap: 4px; }
  .reader-zoom__btn {
    display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px;
    border: 1px solid rgba(198, 88, 74, 0.45); border-radius: 14px;
    background: rgba(0, 0, 0, 0.35); color: #ffd7d0;
    font: 700 20px/1 'Segoe UI', sans-serif; cursor: pointer;
  }
  .reader-zoom__btn:hover { border-color: #f08a7d; color: #fff; }
  .reader-zoom__btn:disabled { opacity: 0.35; cursor: default; }
  .reader-zoom__inteira[aria-pressed="true"] { color: #2a0905; background: linear-gradient(180deg, #f08a7d, #b03b2c); }
  .reader-zoom__valor { min-width: 52px; text-align: center; font: 700 14px/1 'Segoe UI', sans-serif; color: #f3d6de; }

  /* Texto nativo: fonte de leitura de PC e coluna confortável. */
  .reader-stage .reader-text-page { font-size: 18px; line-height: 1.75; }
}

/* =========================================================================
   HARMONIA — a mesma página no monitor, no tablet e no celular
   As telas foram nascendo em momentos diferentes e cada uma escolheu sua
   margem, sua fonte e seu ponto de quebra. Este bloco unifica: as medidas
   passam a crescer com a janela (clamp) em vez de saltar em degraus, e cada
   layout de várias colunas tem um caminho claro até a coluna única.
   ====================================================================== */

/* --- Ritmo da página: margem e respiro crescem com a janela ------------- */
:root {
  --gutter: clamp(8px, 2.2vw, 16px);
  --stack: clamp(10px, 1.6vw, 16px);
}
.page-shell { padding-left: var(--gutter); padding-right: var(--gutter); }
.hud-top { margin: var(--stack) var(--gutter) 0; padding: 8px clamp(8px, 1.6vw, 14px); }
.main-nav { margin: var(--stack) var(--gutter); }
.site-footer { padding-left: var(--gutter); padding-right: var(--gutter); }

/* --- Nada pode estourar a largura da janela ---------------------------- */
img, svg, video, canvas { max-width: 100%; }
.game-panel, .page-header, .mmo-window { min-width: 0; }
table { display: block; max-width: 100%; overflow-x: auto; }

/* --- O cabeçalho ilustrado não cresce sem limite ------------------------ */
/* Em monitor 2560 a arte passaria de 850 px de altura. O teto de largura
   segura a altura sem cortar nada da cena. */
.logo-bar .marca__palco { max-width: 2000px; margin: 0 auto; }

/* ======================= Monitor pequeno / tablet deitado =============== */
@media (max-width: 1024px) {
  .mmo-layout { grid-template-columns: minmax(0, 1fr); }
  .char-panel { max-width: 520px; margin-inline: auto; }
  .two-columns, .info-grid, .form-two-columns { grid-template-columns: minmax(0, 1fr); }
  .focus-shell--largo { max-width: 100%; }
}

/* ============================ Tablet em pé ============================= */
@media (max-width: 860px) {
  /* A navegação vira um trilho que rola na horizontal em vez de quebrar em
     três fileiras e empurrar o jogo para baixo. */
  .main-nav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    justify-content: flex-start; scroll-snap-type: x proximity;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav__item { flex: 0 0 auto; scroll-snap-align: center; }

  .hud-top { gap: 8px; }
  .hud-resources { order: 3; }
  .hud-vitals { order: 4; min-width: 100%; }
  .reputation-block { order: 5; }

  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
  .hero-picker { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
  .boss-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
}

/* ============================== Celular ================================ */
@media (max-width: 620px) {
  .city-stage { aspect-ratio: 4 / 3; }
  .city-title-badge { top: 8px; left: 8px; padding: 6px 10px; font-size: 11px; }

  .hud-top { flex-direction: column; align-items: stretch; }
  .player-block { width: 100%; }
  .hud-resources { width: 100%; justify-content: space-between; }
  .hud-actions { align-self: flex-end; }
  .reputation-block { display: none; }

  .page-header__stats { width: 100%; }
  .stat-tile { flex: 1 1 120px; }

  /* A chamada longa da campanha não pode definir a largura mínima do
     cabeçalho. Sem estes limites, o selo de progresso automático mantém a
     linha inteira aberta e empurra a página de Quests para fora do celular. */
  .route-quests .page-header__title { width: 100%; min-width: 0; align-items: flex-start; }
  .route-quests .page-header__title > div { min-width: 0; max-width: 100%; }
  .route-quests .page-header__title .status-pill {
    display: inline-flex; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  }
  .route-quests .page-emblem { flex: 0 0 54px; }
  .route-quests .quest-grid { grid-template-columns: minmax(0, 1fr); }
  .route-quests .quest-card,
  .route-quests .quest-card__head,
  .route-quests .quest-footer { min-width: 0; }

  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
  .hero-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gear-doll { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Botão em fileira apertada vira botão de largura inteira. */
  .shop-card__actions, .exam-actions, .reader-controls { flex-wrap: wrap; }
  .reader-controls .game-button { flex: 1 1 120px; justify-content: center; }
}

/* --- Dedo em vez de ponteiro: alvo mínimo de 40 px --------------------- */
@media (pointer: coarse) {
  .game-button, .main-nav__item, .round-button, .focus-bar__back, .focus-bar__home {
    min-height: 40px;
  }
  .game-button--small { min-height: 34px; }
  /* Sem ponteiro não existe hover: o que só aparecia ao passar o mouse
     precisa estar sempre visível. */
  .reader-flip { opacity: 0.5; }
  .gear-slot__tip { display: none; }
}

/* =========================================================================
   A BARRA DO JOGADOR ENCOSTADA NO CABEÇALHO
   Ela ficava solta: folga dos dois lados e do topo, com moldura em volta —
   um painel boiando debaixo da arte, que agora vai de ponta a ponta. Aqui
   ela vira a base do cabeçalho: mesma largura, sem emenda, e presa no alto
   da janela. Com um banner alto, rolar a página deixava de mostrar vida,
   dinheiro e foco; agora eles acompanham.
   ====================================================================== */
.hud-dock {
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
.hud-dock .hud-top {
  margin: 0; border-radius: 0;
  border-top: 0; border-left: 0; border-right: 0;
  border-image: none;
  border-bottom: 1px solid rgba(198,88,74, 0.45);
  clip-path: none;
  padding: 12px clamp(12px, 2.4vw, 26px);
  background:
    linear-gradient(180deg, rgba(73,21,51, 0.97), rgba(37,8,25, 0.97));
  backdrop-filter: blur(10px) saturate(1.2);
}
/* Fio de ouro no encontro com a arte, para a emenda virar acabamento. */
.hud-dock .hud-top::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; width: auto;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, #fff3d0 50%, var(--gold) 75%, transparent);
  opacity: 0.85; border-radius: 0;
}
/* Os rebites de canto eram da moldura solta; encostada, ela não os tem. */
.hud-dock .hud-top::before { display: none; }

.hud-dock .main-nav {
  margin: 0; border-radius: 0; clip-path: none;
  border-left: 0; border-right: 0; border-top: 0;
  border-bottom: 1px solid rgba(198,88,74, 0.3);
  border-image: none;
  padding: 6px clamp(10px, 2vw, 20px) 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Em tela pequena só a barra do jogador fica presa: com o menu junto, o
   conjunto comeria metade da altura útil do celular. */
@media (max-width: 860px) {
  .hud-dock { position: static; box-shadow: none; }
  .hud-dock .hud-top { position: sticky; top: 0; z-index: 50; }
}

/* =========================================================================
   VITRINE DE CARREIRAS — prévia, não menu
   Só uma carreira é jogável hoje; as outras têm acervo reunido e nada mais.
   Com cara de item de navegação, o jogador clicaria esperando uma porta que
   não abre. Então a faixa se apresenta pelo que é: rótulo à mostra, selo de
   estado em cada ladrilho, e nada de ficar presa no alto junto do menu.
   ====================================================================== */
.career-strip {
  margin: 0 var(--gutter) var(--stack);
  padding: 8px clamp(8px, 1.6vw, 14px) 10px;
  background:
    linear-gradient(180deg, rgba(47,11,32, 0.75), rgba(27,6,18, 0.6));
  border: 1px dashed rgba(198,88,74, 0.35);
  border-radius: 4px;
}
.career-strip__title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px;
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #e7c8c4;
}
.career-strip__title small {
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 11px;
  letter-spacing: 0; text-transform: none; color: var(--ink-dim);
}
.career-strip__flag {
  padding: 2px 9px; font-size: 10.5px; letter-spacing: 0.14em; color: #2a0905;
  background: linear-gradient(180deg, #f08a7d, #b03b2c);
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}
.career-strip__rail {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; padding-bottom: 2px;
}
.career-strip__rail::-webkit-scrollbar { display: none; }

.career-tile {
  position: relative; flex: 1 1 92px; min-width: 78px; max-width: 150px;
  display: grid; justify-items: center; gap: 2px; padding: 6px 4px 7px;
  text-decoration: none; scroll-snap-align: center;
  border: 1px solid rgba(198,88,74, 0.22);
  background: linear-gradient(180deg, rgba(73,21,51, 0.45), rgba(31,7,21, 0.65));
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.career-tile__art { display: block; width: clamp(32px, 4.2vw, 48px); aspect-ratio: 1; overflow: hidden; }
.career-tile__art img {
  width: 100%; height: 100%; object-fit: contain;
  /* Em preparo: a arte fica sem cor, para não parecer disponível. */
  filter: grayscale(0.55) brightness(0.82) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}
.career-tile strong {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: #cfb1ad; text-align: center; line-height: 1.15;
}
.career-tile__state {
  font-family: 'Oswald', sans-serif; font-style: normal;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); opacity: 0.85;
}
.career-tile:hover { transform: translateY(-2px); border-color: rgba(198,88,74, 0.6); }
.career-tile:hover .career-tile__art img { transform: scale(1.1); filter: none; }

/* A carreira que já é jogável não pode parecer igual às outras. */
.career-tile.is-live { border-color: rgba(198,88,74, 0.75); background: linear-gradient(180deg, rgba(116,48,88, 0.6), rgba(45,11,31, 0.8)); }
.career-tile.is-live .career-tile__art img { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); }
.career-tile.is-live strong { color: #ffb9b0; }
.career-tile.is-live .career-tile__state { color: #86efac; opacity: 1; }

/* Sem nada reunido: mais apagada ainda, e o motivo está na página. */
.career-tile.is-empty { opacity: 0.45; }
.career-tile.is-active { border-color: var(--gold); box-shadow: 0 0 14px rgba(232,121,106, 0.25); }

@media (max-width: 620px) {
  .career-tile { flex: 0 0 74px; min-width: 74px; }
  .career-tile strong { font-size: 11px; }
  .career-strip__title small { display: none; }
}

/* Emblema da carreira no cabeçalho da página dela */
.page-emblem--carreira { overflow: hidden; padding: 0; }
.page-emblem--carreira img { width: 100%; height: 100%; object-fit: contain; }

/* Selo de estado no título da página */
.career-state {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 3px 10px; font-family: 'Oswald', sans-serif; font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}
.career-state--live { color: #0b2a12; background: linear-gradient(180deg, #86efac, #22a75a); }
.career-state--soon { color: #2a0905; }
.career-state--soon { background: linear-gradient(180deg, #d9afaa, #9a706a); }

/* Roteiro: o que falta para a carreira virar jogo */
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.roadmap__step {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border: 1px solid var(--line-soft); background: rgba(39,9,27, 0.4);
  font-size: 12.5px; color: var(--ink-dim);
}
.roadmap__step span:nth-child(2) { flex: 1; }
.roadmap__mark {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-soft); font-size: 12px;
}
.roadmap__step.is-done { color: var(--ink); }
.roadmap__step.is-done .roadmap__mark { color: #0b2a12; background: linear-gradient(180deg, #86efac, #22a75a); border-color: #14532d; }
.roadmap__step em {
  font-family: 'Oswald', sans-serif; font-style: normal; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim);
}
.roadmap__step.is-done em { color: #86efac; }

/* Lista de provas já reunidas */
.organ-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.organ-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--line-soft);
  background: rgba(39,9,27, 0.5);
  clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.organ-row__mark { display: grid; place-items: center; opacity: 0.6; }
.organ-row strong { flex: 1; font-size: 12.5px; font-weight: 500; }
.organ-row em {
  font-family: 'Oswald', sans-serif; font-style: normal; font-size: 11px;
  letter-spacing: 0.06em; color: var(--gold); white-space: nowrap;
}

/* =========================================================================
   VITRINE DO JOGO — "o que tem aqui dentro"
   O painel da arte de referência: avatares, moradias, roupas, acessórios,
   materiais, itens especiais, pets, e o rodapé com combate, chefes, chat e
   missões. Tudo com dado do banco — a vitrine não promete o que não existe.
   ====================================================================== */
.vitrine { margin-top: clamp(14px, 2vw, 24px); }
.vitrine__titulo {
  margin: 0; text-align: center;
  font-family: 'CinzelDecorativa', 'Cinzel', Georgia, serif;
  font-size: clamp(18px, 2.6vw, 30px); letter-spacing: 0.05em;
  background: linear-gradient(180deg, #fdf1cf 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(18,2,11, 0.9));
}
.vitrine__sub {
  margin: 2px 0 14px; text-align: center; font-size: 12px; color: var(--ink-dim);
}

.vitrine__grade {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.vit-card {
  display: grid; gap: 6px; align-content: start; padding: 10px 10px 12px;
  border: 1px solid rgba(208,122,172, 0.28); border-radius: 6px;
  background: linear-gradient(180deg, rgba(65,17,45, 0.62), rgba(31,7,21, 0.78));
}
.vit-card h3 {
  margin: 0 0 2px; text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: #ffb9b0;
}
.vit-card__grupo {
  font-family: 'Oswald', sans-serif; font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim);
}

/* Avatares em miniatura, quatro por linha */
.vit-avatares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.vit-avatar {
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border: 1px solid rgba(198,88,74, 0.3); border-radius: 4px;
  background: #250b1a;
}
.vit-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.vit-avatar.rarity-3 { border-color: rgba(251,95,186, 0.6); }
.vit-avatar.rarity-4 { border-color: rgba(192, 132, 252, 0.65); }
.vit-avatar.rarity-5 { border-color: var(--gold); box-shadow: 0 0 10px rgba(232,121,106, 0.35); }

/* Lista de itens da vitrine */
.vit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.vit-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vit-item__art {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  overflow: hidden; border-radius: 4px;
  border: 1px solid rgba(208,122,172, 0.3); background: #250b1a;
}
.vit-item__art .item-art { width: 100%; height: 100%; object-fit: cover; }
.vit-item__art .ico { width: 20px; height: 20px; }
.vit-item.tier-3 .vit-item__art { border-color: rgba(251,95,186, 0.55); }
.vit-item.tier-4 .vit-item__art { border-color: var(--gold); box-shadow: 0 0 8px rgba(232,121,106, 0.3); }
.vit-item__copy { display: grid; gap: 1px; min-width: 0; }
.vit-item__copy strong {
  font-size: 11px; font-weight: 500; color: #e7c8c4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vit-item__copy em {
  font-family: 'Oswald', sans-serif; font-style: normal;
  font-size: 11px; letter-spacing: 0.04em; color: #7fd4a8;
}

/* --------------------------- o rodapé da vitrine --------------------------- */
.vitrine__base {
  display: grid; gap: 8px; margin-top: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
.vit-feat {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 12px 10px 14px;
  border: 1px solid rgba(208,122,172, 0.28); border-radius: 6px;
  background: linear-gradient(180deg, rgba(65,17,45, 0.55), rgba(31,7,21, 0.75));
}
.vit-feat h4 {
  margin: 0; font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: #ffb9b0;
}
.vit-feat small { font-size: 11px; line-height: 1.35; color: var(--ink-dim); }
.vit-feat__icon .ico { width: 40px; height: 40px; opacity: 0.85; }
.vit-feat__marks { display: flex; gap: 5px; }
.vit-feat__marks b {
  padding: 3px 9px; font-family: 'Oswald', sans-serif; font-size: 12px;
  color: #1e0714; background: linear-gradient(180deg, #fa96d0, #dc3f9b);
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}

.vit-feat--bosses { grid-column: span 2; }
.vit-bosses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.vit-boss {
  display: grid; justify-items: center; gap: 2px; padding: 6px 4px;
  border: 1px solid rgba(198,88,74, 0.3); border-radius: 5px;
  background: rgba(24,4,16, 0.6);
}
.vit-boss img {
  width: 100%; height: 54px; object-fit: cover; object-position: center 22%;
  border: 1px solid rgba(232,121,106, 0.42); border-radius: 3px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4);
}
.vit-boss strong {
  font-family: 'Oswald', sans-serif; font-size: 11.5px; letter-spacing: 0.08em; color: #ffb9b0;
}
.vit-boss em {
  font-family: 'Oswald', sans-serif; font-style: normal; font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--ink-dim);
}
/* Chefe sem acervo suficiente aparece apagado: ele existe, mas não abre. */
.vit-boss.is-empty { opacity: 0.7; }
.vit-boss.is-empty img { filter: saturate(0.72) brightness(0.78); }

@media (max-width: 860px) {
  .vit-feat--bosses { grid-column: 1 / -1; }
}

/* =========================================================================
   FORMULÁRIO DO CONCURSEIRO — arte recortada, conteúdo acessível
   Leonática, ladrilhos, pontas do botão e bordas do pergaminho compõem a
   recepção. O texto e os campos continuam sendo HTML de verdade. A captura
   inteira do formulário nunca pode virar fundo ou 9-slice: ela já traz todos
   esses elementos pintados e os duplicaria atrás da interface.
   ====================================================================== */
/* NÃO USE A ARTE COMO PAPEL DE PAREDE AQUI.
   A imagem de referência tem o formulário pintado no meio dela. Esticada como
   fundo, ela reaparece atrás do formulário de verdade e a tela fica com dois
   formulários sobrepostos — foi exatamente o que aconteceu, duas vezes.
   O fundo é cor; da arte só entram as pontas do botão, o retrato da guia, as bordas
   sem texto do pergaminho e os ladrilhos de carreira. */
.theme-inicio {
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(138,48,100, 0.35), transparent 60%),
    linear-gradient(180deg, #370c25 0%, #26081a 45%, #14040d 100%);
  background-attachment: fixed;
}
.logo-bar--estatico { cursor: default; }

/* -------------------------- o painel emoldurado ------------------------- */
.ficha {
  max-width: 1320px; margin: 0 auto;
  /* A captura raster contém título, campos e botão. A moldura vetorial do
     próprio jogo é o 9-slice limpo; a arte recortada entra nas peças abaixo. */
  border: 18px solid transparent;
  border-image: url('../img/ui/moldura-rica.svg') 32 / 20px stretch;
  background: linear-gradient(180deg, rgba(47,11,32, 0.96), rgba(27,6,18, 0.97));
  background-clip: padding-box;
}
.ficha__head { text-align: center; margin: -12px 0 14px; }
.ficha__head h1 {
  margin: 0; font-family: 'CinzelDecorativa', 'Cinzel', Georgia, serif;
  font-size: clamp(20px, 3vw, 38px); letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fdf1cf 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(18,2,11, 0.9));
}
.ficha__head p {
  margin: 2px 0 0; font-family: 'Marcellus', Georgia, serif;
  font-size: clamp(12px, 1.4vw, 16px); color: #f4d0e5;
}

.ficha__body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 14px; align-items: start; }
.ficha__form { display: grid; gap: 9px; }

/* ---------------------- blocos internos, como na arte ------------------- */
.ficha-block {
  display: grid; gap: 7px; margin: 0; min-width: 0;
  padding: 9px clamp(8px, 1.2vw, 14px) 11px;
  border: 1px solid rgba(198,88,74, 0.42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(53,12,36, 0.85), rgba(31,7,21, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ficha-block legend {
  display: flex; align-items: center; gap: 6px; padding: 0 2px;
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: #e9aea6;
}
.ficha-block legend .ico { width: 14px; height: 14px; }
.ficha-note { font-size: 12px; color: rgba(244,208,229, 0.5); }

.ficha-row { display: grid; gap: 9px; }
.ficha-row--identidade { grid-template-columns: minmax(0, 1.5fr) 118px minmax(0, 2fr); }
.ficha-row--vida { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ficha-row--rotina { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.3fr); }

.ficha-field { display: grid; gap: 5px; min-width: 0; }
.ficha-field > span {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: #e9aea6;
}
.ficha-field > span .ico { width: 14px; height: 14px; }
.ficha-field input, .ficha-input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 13px;
  color: var(--ink); background: rgba(21,3,13, 0.85);
  border: 1px solid rgba(208,122,172, 0.32); border-radius: 6px;
}
.ficha-field input:focus, .ficha-input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232,121,106, 0.22);
}
.ficha-field input::placeholder, .ficha-input::placeholder { color: rgba(234,201,220, 0.32); }

/* ------------- carreira: os ladrilhos da arte, como ESCOLHA ------------- */
.career-choice { display: grid; gap: 5px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.career-pick { position: relative; cursor: pointer; min-width: 0; }
.career-pick input { position: absolute; opacity: 0; pointer-events: none; }
.career-pick__box { display: grid; justify-items: center; gap: 3px; }
/* A moldura colorida já vem pintada no recorte: o CSS não desenha nada. */
.career-pick__box img {
  width: 100%; max-width: 84px; aspect-ratio: 94 / 80; object-fit: contain;
  filter: saturate(0.55) brightness(0.72);
  transition: filter 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.career-pick__box b {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #c8a0b7; text-align: center; line-height: 1.1;
}
.career-pick:hover .career-pick__box img { filter: saturate(0.9) brightness(0.95); transform: translateY(-2px); }
.career-pick input:checked + .career-pick__box img {
  filter: drop-shadow(0 0 12px rgba(232,121,106, 0.65));
  transform: translateY(-3px) scale(1.06);
}
.career-pick input:checked + .career-pick__box b { color: #ffb9b0; }
.career-pick input:focus-visible + .career-pick__box img { outline: 2px solid #fc91cf; outline-offset: 2px; }

/* ----------------------------- opções ---------------------------------- */
.opt-list { display: grid; gap: 6px; }
.opt { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; }
.opt input { accent-color: #f140a7; width: 16px; height: 16px; }

/* ------------------------- escala de horas/dia -------------------------- */
.hour-scale { display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; position: relative; padding-top: 2px; }
.hour-scale::before {
  content: ""; position: absolute; left: 9%; right: 9%; top: 9px; height: 3px;
  background: linear-gradient(90deg, #782154, #f140a7); border-radius: 2px;
}
.hour-step { position: relative; display: grid; justify-items: center; gap: 5px; cursor: pointer; flex: 1; }
.hour-step input { position: absolute; opacity: 0; pointer-events: none; }
.hour-step i {
  width: 15px; height: 15px; border-radius: 50%;
  background: #5d344c; border: 2px solid #210917; transition: all 0.15s ease;
}
.hour-step b { font-family: 'Oswald', sans-serif; font-size: 11px; color: rgba(244,208,229, 0.6); transition: color 0.15s ease; }
.hour-step:hover i { background: #8a4c70; }
.hour-step input:checked ~ i {
  background: #f664b9; border-color: #fddcef;
  box-shadow: 0 0 12px rgba(246,100,185, 0.85); transform: scale(1.3);
}
.hour-step input:checked ~ b { color: var(--gold); font-weight: 600; }

/* -------------------- botões de alternar (turno, nível) ----------------- */
.toggle-list { display: flex; gap: 6px; flex-wrap: wrap; }
.toggle { position: relative; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle span {
  display: block; padding: 9px 8px; text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #dbbacd; white-space: nowrap;
  border: 1px solid rgba(208,122,172, 0.32); border-radius: 6px;
  background: rgba(21,3,13, 0.7); transition: all 0.14s ease;
}
.toggle:hover span { border-color: rgba(198,88,74, 0.6); color: #e7c8c4; }
.toggle input:checked + span { font-weight: 600; }
.toggle--manha input:checked + span { color: #fc614d; border-color: #d9301a; background: rgba(217,48,26, 0.16); box-shadow: 0 0 12px rgba(217,48,26, 0.25); }
.toggle--tarde input:checked + span { color: #fdba74; border-color: #ea7c2b; background: rgba(234, 124, 43, 0.16); box-shadow: 0 0 12px rgba(234, 124, 43, 0.25); }
.toggle--noite input:checked + span { color: #fa96d0; border-color: #dc3f9b; background: rgba(220,63,155, 0.18); box-shadow: 0 0 12px rgba(220,63,155, 0.3); }
.toggle--iniciante input:checked + span { color: #86efac; border-color: #22a75a; background: rgba(34, 167, 90, 0.16); box-shadow: 0 0 12px rgba(34, 167, 90, 0.25); }
.toggle--intermediario input:checked + span { color: #fa96d0; border-color: #dc3f9b; background: rgba(220,63,155, 0.18); box-shadow: 0 0 12px rgba(220,63,155, 0.3); }
.toggle--avancado input:checked + span { color: #d8b4fe; border-color: #9333ea; background: rgba(147, 51, 234, 0.18); box-shadow: 0 0 12px rgba(147, 51, 234, 0.3); }

/* ------------------------------ objetivo ------------------------------- */
.ficha-block--objetivo legend { justify-content: center; }
.goal-list { display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.goal { position: relative; cursor: pointer; }
.goal input { position: absolute; opacity: 0; pointer-events: none; }
.goal span {
  display: block; padding: 12px 10px; text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.09em;
  text-transform: uppercase; color: #f4d0e5;
  border: 1px solid rgba(208,122,172, 0.32); border-radius: 6px;
  background: rgba(21,3,13, 0.7); transition: all 0.14s ease;
}
.goal:hover span { transform: translateY(-2px); border-color: rgba(198,88,74, 0.6); }
.goal input:checked + span { font-weight: 600; }
.goal--aprovacao-rapida input:checked + span { color: #86efac; border-color: #22a75a; background: rgba(34, 167, 90, 0.18); box-shadow: 0 0 14px rgba(34, 167, 90, 0.28); }
.goal--constancia input:checked + span { color: #fa96d0; border-color: #dc3f9b; background: rgba(220,63,155, 0.2); box-shadow: 0 0 14px rgba(220,63,155, 0.3); }
.goal--revisao input:checked + span { color: #d8b4fe; border-color: #9333ea; background: rgba(147, 51, 234, 0.2); box-shadow: 0 0 14px rgba(147, 51, 234, 0.3); }
.goal--alto-desempenho input:checked + span { color: #f08a7d; border-color: #b03b2c; background: rgba(176,59,44, 0.2); box-shadow: 0 0 14px rgba(232,121,106, 0.3); }

/* -------- botão de entrar: moldura limpa, texto sempre em HTML ---------- */
.ficha-enter {
  display: block; width: 100%; margin-top: 4px; padding: 14px 30px; cursor: pointer;
  font-family: 'CinzelDecorativa', 'Cinzel', Georgia, serif;
  font-size: clamp(13px, 1.7vw, 22px); letter-spacing: 0.06em; text-transform: uppercase;
  color: #ff988a; text-shadow: 0 1px 0 #2a0905, 0 2px 10px rgba(0, 0, 0, 0.9);
  border: 10px solid transparent;
  border-image: url('../img/ui/moldura-rica.svg') 32 / 12px stretch;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(180deg, #cc338c 0%, #a11d6a 48%, #711249 100%);
  background-clip: padding-box;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.ficha-enter:hover { filter: brightness(1.14); }
.ficha-enter:active { transform: translateY(2px); }

/* ---------------------- a lateral: mentor e pergaminho ------------------ */
.ficha-side { display: grid; gap: 10px; align-content: start; }
.mentor-card { display: grid; justify-items: center; gap: 6px; text-align: center; }
.mentor-card__art { display: block; width: 100%; max-width: 210px; }
.mentor-card__art img { width: 100%; height: auto; display: block; }
.leonatica-card__art {
  max-width: 220px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(232,121,106, .48);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .42), 0 0 20px rgba(236,103,180, .1);
}
.leonatica-card__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.mentor-card strong {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #ffb9b0;
}
.mentor-card p { margin: 0; font-size: 12px; line-height: 1.45; color: #dbbacd; }
.mentor-card p b { color: var(--gold); }

/* Só as bordas sem texto do pergaminho são usadas. O centro impresso da
   captura é descartado para o título e a lista não aparecerem duas vezes. */
.scroll-card {
  position: relative; padding: 7px 5px 10px; color: #3a1712;
  border: 20px solid transparent;
  border-image: url('../img/ui/pergaminho.png') 20 / 20px stretch;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 245, 196, 0.42), transparent 42%),
    linear-gradient(90deg, #bd5648 0%, #e28073 8%, #e88e82 50%, #d56b5d 92%, #a87436 100%);
  background-clip: padding-box;
  min-height: 210px;
}
.scroll-card strong {
  display: block; margin-bottom: 8px; text-align: center;
  font-family: 'Cinzel', Georgia, serif; font-size: 12.5px; color: #4a1913;
}
.scroll-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.scroll-card li { display: flex; gap: 7px; font-size: 11px; line-height: 1.3; }
.scroll-card li::before { content: "\2611"; color: #6b2920; flex: none; }

/* ------------------------------ responsivo ----------------------------- */
@media (max-width: 1100px) {
  .ficha__body { grid-template-columns: minmax(0, 1fr); }
  .ficha-side { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
  .career-choice { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ficha { border-width: 12px; border-image-width: 14px; }
  .ficha-row--identidade { grid-template-columns: minmax(0, 1fr) 100px; }
  .ficha-field--largo { grid-column: 1 / -1; }
  .ficha-row--vida { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-row--rotina { grid-template-columns: minmax(0, 1fr); }
  .ficha-enter { border-width: 30px; border-image-width: 30px 42px; font-size: 13px; padding: 10px 16px; }
}
@media (max-width: 520px) {
  .toast-stack {
    position: static;
    inset: auto;
    max-width: none;
    margin: 10px 12px 4px;
  }
  .ficha-row--identidade, .ficha-row--vida { grid-template-columns: minmax(0, 1fr); }
  .career-choice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .career-pick__box b {
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0.03em;
  }
  .ficha .opt { min-height: 44px; padding: 8px 6px; }
  .ficha .opt input { flex: none; width: 20px; height: 20px; }
  .toggle span { font-size: 11px; letter-spacing: 0.03em; }
  .ficha-enter {
    border-width: 24px; border-image-width: 24px 34px;
    padding: 8px 2px; font-size: 12px; letter-spacing: 0.02em;
    white-space: nowrap;
  }
}

/* A captura `moldura-ficha.png` não é uma moldura isolada: o topo contém o
   título, as laterais contêm campos e a base contém o botão. Aplicá-la aos
   painéis do jogo por border-image reproduz pedaços do formulário em toda
   tela. Os componentes gerais permanecem nas molduras 9-slice SVG próprias,
   que têm centro transparente e foram desenhadas para esse uso. */

/* =========================================================================
   FIDELIDADE ÀS ARTES DE REFERÊNCIA — composição final

   As capturas continuam sendo apenas direção de arte. Cenário, personagens,
   ícones e ladrilhos entram como peças independentes; números, textos, links
   e áreas clicáveis permanecem HTML real. Esta camada final é escopada pelos
   temas/rotas para organizar a cascata histórica do arquivo.
   ====================================================================== */

/* ------------------------- cenário azul-ouro -------------------------- */
.theme-city {
  --frame-gold: #c85242;
  --frame-bright: #f79487;
  --panel-night: rgba(29,5,19, 0.94);
  --panel-night-soft: rgba(51,10,34, 0.93);
  background-color: #11020b;
  background-image:
    linear-gradient(180deg, rgba(15,1,9, 0.2), rgba(18,1,11, 0.72) 62%, #11020b 100%),
    url('../img/ui/fundo-cidade-estudos-v2.png');
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.theme-city::before {
  opacity: 0.12;
  background:
    linear-gradient(90deg, rgba(18,2,11, 0.82), transparent 20% 80%, rgba(18,2,11, 0.82)),
    url('../img/tema/edital.svg') center top / 1600px auto repeat-y;
}
.theme-city:not(.theme-inicio) > .logo-bar { display: none; }
.theme-city:not(.theme-inicio) .page-shell {
  width: 100%; max-width: 1680px;
  padding: 12px clamp(8px, 1vw, 16px) 34px;
}

/* Na abertura a arte aparece inteira. Ela tem proporção 3:1; reduzir a altura
   com object-fit: cover cortava personagens, brasão e parte do título. */
.theme-inicio .logo-bar .marca__palco {
  height: auto; max-width: none;
  border-bottom: 1px solid rgba(232,121,106, 0.52);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
}
.theme-inicio .logo-bar .marca__arte {
  width: 100%; height: auto; object-fit: contain; object-position: center;
  animation: none; transform: none;
}
.theme-inicio .logo-bar .marca__base { height: 24%; }

/* ------------------------------ HUD ---------------------------------- */
.theme-city .hud-dock {
  background:
    linear-gradient(90deg, rgba(196,70,53, 0.08), transparent 14% 86%, rgba(196,70,53, 0.08)),
    linear-gradient(180deg, rgba(44,8,29, 0.985), rgba(26,4,17, 0.985));
  border-top: 1px solid rgba(232,121,106, 0.46);
  border-bottom: 1px solid #6f2218;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.68), inset 0 -1px 0 rgba(255,168,157, 0.14);
}
.theme-city .hud-dock .hud-top {
  position: relative; max-width: 1680px; min-height: 98px; margin: 0 auto;
  padding: 12px clamp(14px, 1.8vw, 28px);
  flex-wrap: nowrap; gap: clamp(10px, 1.15vw, 20px);
  border: 0; border-radius: 0; box-shadow: none;
  background:
    radial-gradient(circle at 50% -80%, rgba(163,44,113, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(53,10,35, 0.78), rgba(28,4,18, 0.9));
}
.theme-city .hud-dock .hud-top::before {
  content: ""; display: block; position: absolute; z-index: 3;
  left: 50%; top: auto; bottom: -8px; width: 15px; height: 15px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #f28273;
  background: radial-gradient(circle at 35% 30%, #fdaada, #cb1b82 42%, #5c0839 72%);
  box-shadow: 0 0 0 3px #29081b, 0 0 14px rgba(251,87,183, 0.75);
}
.theme-city .hud-dock .hud-top::after {
  content: ""; position: absolute; inset: auto 16px 0; width: auto; height: 2px;
  background: linear-gradient(90deg, transparent, #8a3226 10%, #f28d80 50%, #8a3226 90%, transparent);
  opacity: 0.9;
}
.theme-city .player-block { flex: 0 1 292px; min-width: 225px; gap: 13px; }
.theme-city .avatar-frame {
  position: relative; width: 70px; height: 70px; flex: 0 0 70px; overflow: hidden;
  border: 3px solid #d25e4f; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #702350, #2b071c 72%);
  box-shadow:
    0 0 0 3px #2b081c,
    0 0 0 5px rgba(202,83,67, 0.78),
    inset 0 0 16px rgba(0, 0, 0, 0.72),
    0 0 20px rgba(210,39,138, 0.24);
}
.theme-city .player-block__copy { gap: 2px; min-width: 0; }
.theme-city .player-block__copy > strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Cinzel', Georgia, serif; font-size: 18px; color: #f7ead0;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.8);
}
.theme-city .player-block__copy > span { font-size: 11.5px; }
.theme-city .player-block__copy > small { font-size: 11.5px; }
.theme-city .player-block .xp-track { width: min(188px, 100%); height: 6px; }

.theme-city .hud-resources { flex: 0 1 auto; gap: 7px; }
.theme-city .hud-chip {
  min-height: 44px; padding: 8px 12px 8px 40px; border-radius: 4px;
  border: 1px solid rgba(198,88,74, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 42%),
    linear-gradient(180deg, #4c1234, #2b081c);
  box-shadow: inset 0 0 0 1px rgba(24,5,16, 0.8), 0 4px 12px rgba(0, 0, 0, 0.42);
}
.theme-city .hud-chip .ico {
  width: 28px; height: 28px; left: 6px;
  border: 0; background: transparent; box-shadow: none;
  filter: drop-shadow(0 0 7px rgba(232,121,106, 0.5));
}
.theme-city .hud-chip strong { white-space: nowrap; font-size: 14px; }

.theme-city .hud-vitals {
  display: grid; grid-template-columns: repeat(3, minmax(118px, 1fr));
  flex: 1 1 420px; gap: 0; min-width: 360px;
  border-left: 1px solid rgba(198,88,74, 0.25);
  border-right: 1px solid rgba(198,88,74, 0.25);
}
.theme-city .vital {
  min-width: 0; gap: 9px; padding: 5px clamp(8px, 1vw, 16px);
  border-right: 1px solid rgba(198,88,74, 0.16);
}
.theme-city .vital:last-child { border-right: 0; }
.theme-city .vital > .ico { width: 30px; height: 30px; }
.theme-city .vital > div { gap: 3px; }
.theme-city .vital small { font-family: 'Marcellus', Georgia, serif; font-size: 12px; color: #e3cad9; }
.theme-city .vital strong { font-family: 'Oswald', sans-serif; font-size: 17px; letter-spacing: 0.03em; }
.theme-city .vital i { height: 7px; border-color: rgba(198,88,74, 0.35); background: #16030e; }
.theme-city .vital i b { box-shadow: 0 0 8px currentColor; }

.theme-city .reputation-block {
  min-width: 96px; min-height: 68px; padding: 8px 12px;
  border-radius: 4px; border-color: rgba(216,94,78, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 45%),
    linear-gradient(180deg, #56143b, #29071b);
  box-shadow: inset 0 0 0 2px rgba(25,5,17, 0.7), 0 0 15px rgba(232,121,106, 0.12);
}
.theme-city .reputation-block .ico { width: 31px; height: 31px; }
.theme-city .reputation-block strong { font: 600 23px/1 'Cinzel', Georgia, serif; }
.theme-city .hud-actions { flex: 0 0 auto; }
.theme-city .round-button {
  width: 48px; height: 48px; border: 2px solid #9b3a2d;
  background: radial-gradient(circle at 38% 30%, #751f51, #2e081e 72%);
  box-shadow: inset 0 0 0 3px #250719, 0 0 12px rgba(232,121,106, 0.18);
}

/* -------------------------- navegação principal ----------------------- */
.theme-city .hud-dock .main-nav {
  position: relative; display: flex; flex-wrap: nowrap; gap: 0;
  width: 100%; max-width: 1680px; margin: 0 auto; padding: 0 clamp(8px, 1.2vw, 18px);
  overflow-x: auto; scrollbar-width: none;
  border: 0; border-top: 1px solid rgba(198,88,74, 0.35);
  border-bottom: 1px solid rgba(198,88,74, 0.5);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(75,18,51, 0.96), rgba(31,5,20, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -5px 15px rgba(0, 0, 0, 0.35);
}
.theme-city .hud-dock .main-nav::-webkit-scrollbar { display: none; }
.theme-city .hud-dock .main-nav__item {
  position: relative; flex: 1 0 88px; width: auto; min-width: 78px; min-height: 80px;
  display: grid; place-items: center; align-content: center; gap: 5px;
  padding: 8px 5px 7px; border: 0; border-right: 1px solid rgba(198,88,74, 0.32);
  border-radius: 0; clip-path: none;
  background:
    radial-gradient(circle at 50% 35%, rgba(148,45,105, 0.18), transparent 50%),
    linear-gradient(180deg, rgba(76,19,52, 0.7), rgba(29,5,19, 0.55));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.025);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
}
.theme-city .hud-dock .main-nav__item:first-child { border-left: 1px solid rgba(198,88,74, 0.32); }
.theme-city .hud-dock .main-nav__item .ico {
  width: 36px; height: 36px; opacity: 1;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 6px rgba(232,121,106, 0.18));
}
.theme-city .hud-dock .main-nav__item strong {
  display: block; font-family: 'Cinzel', Georgia, serif; font-size: 12px;
  font-weight: 600; letter-spacing: 0.06em; color: #e3aea7;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}
.theme-city .hud-dock .main-nav__item:hover {
  transform: translateY(-2px);
  background: radial-gradient(circle at 50% 35%, rgba(210,48,142, 0.28), transparent 58%), #440c2d;
  box-shadow: inset 0 -3px 0 rgba(234,81,170, 0.55), 0 0 18px rgba(200,34,131, 0.2);
}
.theme-city .hud-dock .main-nav__item.is-active {
  border-color: #bd4131;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,153,139, 0.3), transparent 55%),
    linear-gradient(180deg, #8b362b, #34120d);
  box-shadow: inset 0 0 18px rgba(255,134,118, 0.18), inset 0 -4px 0 #d65948, 0 0 16px rgba(232,121,106, 0.26);
}
.theme-city .hud-dock .main-nav__item.is-active strong { color: #fff0c1; text-shadow: 0 2px 4px #280602; }
.theme-city .hud-dock .main-nav__item.is-active .ico {
  filter: drop-shadow(0 0 8px rgba(255,155,142, 0.72));
}
.route-shop .hud-dock .main-nav__item.is-active {
  background: radial-gradient(circle at 50% 34%, rgba(200, 145, 255, 0.36), transparent 55%), linear-gradient(180deg, #624190, #211431);
  box-shadow: inset 0 -4px 0 #9d6ae1, 0 0 18px rgba(176, 123, 255, 0.34);
}

/* ----------------------- faixa das doze carreiras --------------------- */
.theme-city > .career-strip {
  position: relative; width: calc(100% - 16px); max-width: 1680px;
  margin: 9px auto 14px; padding: 7px 8px 9px;
  border: 9px solid transparent;
  border-image: url('../img/ui/moldura-ouro.svg') 32 / 10px stretch;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 0, rgba(148,37,102, 0.22), transparent 45%),
    linear-gradient(180deg, rgba(48,9,32, 0.96), rgba(23,3,15, 0.97));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), inset 0 0 24px rgba(0, 0, 0, 0.32);
}
.theme-city .career-strip__title {
  justify-content: center; margin: -2px 0 6px; color: #e9a59c;
  font-family: 'Cinzel', Georgia, serif; font-size: 11.5px;
}
.theme-city .career-strip__title::before,
.theme-city .career-strip__title::after {
  content: ""; width: clamp(30px, 9vw, 150px); height: 12px;
  background: url('../img/ui/divisor-ouro.svg') center / contain no-repeat;
  opacity: 0.72;
}
.theme-city .career-strip__flag {
  color: #f6bbb3; background: transparent; clip-path: none;
  border-right: 1px solid rgba(198,88,74, 0.55); padding: 0 10px 0 0;
}
.theme-city .career-strip__rail { gap: 3px; padding: 0; }
.theme-city .career-tile {
  flex: 1 0 91px; min-width: 82px; max-width: none; min-height: 108px;
  gap: 3px; padding: 5px 3px 7px; overflow: hidden;
  border: 1px solid rgba(198,88,74, 0.34);
  background:
    radial-gradient(circle at 50% 33%, rgba(172,51,122, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(65,14,44, 0.82), rgba(26,4,17, 0.92));
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
}
.theme-city .career-tile__art { width: clamp(54px, 5.3vw, 76px); aspect-ratio: 1; }
.theme-city .career-tile__art img {
  filter: grayscale(0.25) brightness(0.82) saturate(0.82) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.72));
}
.theme-city .career-tile strong { font: 600 11.5px/1.1 'Cinzel', Georgia, serif; color: #d8a39c; }
.theme-city .career-tile__state {
  position: absolute; top: 4px; right: 4px; padding: 2px 4px;
  font-size: 11px; color: #cfafc2; background: rgba(20,2,12, 0.72);
  border: 1px solid rgba(180,127,158, 0.25); border-radius: 2px;
}
.theme-city .career-tile.is-live {
  border-color: #d04e3d;
  background: radial-gradient(circle at 50% 30%, rgba(255,77,54, 0.28), transparent 52%), linear-gradient(180deg, #421813, #100908);
  box-shadow: inset 0 -3px 0 #b53524, 0 0 14px rgba(232,121,106, 0.22);
}
.theme-city .career-tile.is-empty { opacity: 0.62; }
.theme-city .career-tile.is-active { transform: translateY(-2px); box-shadow: inset 0 -3px 0 #e77161, 0 0 18px rgba(232,121,106, 0.38); }

/* ----------------------- molduras reutilizáveis ----------------------- */
.theme-city .game-panel,
.theme-city .page-header,
.theme-city .mmo-window {
  border: 8px solid transparent;
  border-image: url('../img/ui/moldura-ouro.svg') 32 / 9px stretch;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%),
    linear-gradient(180deg, var(--panel-night-soft), var(--panel-night));
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.54);
}
.theme-city .panel-ribbon,
.theme-city .card-heading {
  border-bottom-color: rgba(213,86,69, 0.58);
  background: linear-gradient(90deg, rgba(198,71,54, 0.2), rgba(72,16,49, 0.14) 58%, transparent);
}

/* ------------------------------ cidade -------------------------------- */
.route-city .mmo-layout {
  grid-template-columns: minmax(235px, 278px) minmax(0, 1fr) minmax(260px, 304px);
  gap: 10px; align-items: stretch;
}
.route-city .city-zone { min-width: 0; }
.route-city .city-zone > .tutorial-banner { margin: 0 0 10px; }
.route-city .char-panel,
.route-city .inv-panel { margin-bottom: 0; padding: 10px; }
.route-city .char-panel {
  align-content: start;
  background:
    radial-gradient(circle at 50% 18%, rgba(166,41,114, 0.23), transparent 38%),
    linear-gradient(180deg, rgba(52,9,34, 0.96), rgba(26,4,17, 0.97));
}
.route-city .char-panel__frame {
  width: 100%; max-width: 246px; height: clamp(330px, 34vw, 478px);
  border: 8px solid transparent; border-image: url('../img/ui/moldura-rica.svg') 32 / 9px stretch;
  border-radius: 0; background: #27071a;
}
.route-city .char-panel__art--raster {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  filter: saturate(1.03) contrast(1.03);
}
/* O mesmo pseudo reúne faíscas e o degradê que esconde o fragmento de texto
   existente na base do recorte original do personagem. */
.route-city .char-panel__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 68%, rgba(31,5,20, 0.2) 78%, #27071a 99%),
    radial-gradient(circle 2px at 22% 70%, rgba(255,180,170, 0.95), transparent 60%),
    radial-gradient(circle 1.5px at 74% 62%, rgba(253,192,228, 0.9), transparent 60%),
    radial-gradient(circle 2px at 55% 82%, rgba(255, 200, 140, 0.85), transparent 60%);
  animation: hero-sparks 6s linear infinite;
}
.route-city .char-panel__id strong { width: 100%; }
.route-city .inv-slots { gap: 6px; }
.route-city .inv-slot {
  min-height: 76px; border-radius: 2px; border-color: rgba(198,88,74, 0.48);
  background: linear-gradient(180deg, rgba(62,15,42, 0.88), rgba(26,4,17, 0.94));
  box-shadow: inset 0 0 0 2px rgba(20,2,12, 0.64);
}
.route-city .city-stage--day {
  border-width: 10px; border-image-width: 11px;
  border-radius: 0; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.62), 0 0 24px rgba(194,39,129, 0.12);
}
.route-city .city-stage__shade {
  background:
    radial-gradient(110% 90% at 50% 42%, transparent 52%, rgba(17,2,11, 0.42) 100%),
    linear-gradient(180deg, rgba(21,2,13, 0.16), transparent 28%, rgba(18,1,11, 0.26));
}
.route-city .city-title-badge,
.route-city .camera-tip {
  border-radius: 2px; border-color: rgba(214,89,73, 0.65);
  background: linear-gradient(180deg, rgba(58,13,39, 0.94), rgba(26,4,17, 0.96));
  box-shadow: inset 0 0 0 2px rgba(18,2,11, 0.68), 0 5px 14px rgba(0, 0, 0, 0.52);
}
.route-city .location-hotspot span {
  border-radius: 1px; border-color: #b94232;
  background: linear-gradient(180deg, rgba(61,16,42, 0.97), rgba(24,4,16, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255,166,154, 0.1), 0 4px 10px rgba(0, 0, 0, 0.72);
}
.route-city .mission-banner { margin-top: 10px; }
.route-city .world-feed { margin-top: 8px; }

/* ------------------------- formulário inicial ------------------------- */
.theme-inicio .page-shell { width: 100%; max-width: 1580px; padding-top: 14px; }
.theme-inicio .ficha {
  position: relative; isolation: isolate; padding: clamp(18px, 2.2vw, 30px);
  border: 16px solid transparent;
  border-image: url('../img/ui/moldura-rica.svg') 32 / 18px stretch;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 0, rgba(145,32,98, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(43,6,28, 0.95), rgba(24,3,15, 0.965));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.68), inset 0 0 45px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(8px) saturate(1.08);
}
.theme-inicio .ficha::before {
  content: ""; position: absolute; z-index: 3; left: 50%; top: -24px;
  width: 46px; height: 46px; transform: translateX(-50%);
  background: url('../img/emblema.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(251,80,179, 0.72));
  pointer-events: none;
}
.theme-inicio .ficha::after {
  content: ""; position: absolute; z-index: -1; inset: 4px;
  border: 1px solid rgba(232,121,106, 0.34); pointer-events: none;
  box-shadow: inset 0 0 24px rgba(171,33,114, 0.08);
}
.theme-inicio .ficha__head { margin-top: -5px; }
.theme-inicio .ficha__head h1 {
  color: #f48a7c;
  background: linear-gradient(180deg, #fff0bd 0%, #ef7565 48%, #9b2d1f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 0 rgba(73, 42, 5, 0.62), 0 7px 20px rgba(0, 0, 0, 0.62);
}
.theme-inicio .ficha__head p { color: #eedae6; letter-spacing: 0.04em; }
.theme-inicio .ficha-block {
  border-radius: 2px; border-color: rgba(198,88,74, 0.5);
  background: linear-gradient(180deg, rgba(52,10,34, 0.88), rgba(25,3,16, 0.92));
  box-shadow: inset 0 0 0 1px rgba(17,2,11, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.theme-inicio .ficha-field input,
.theme-inicio .ficha-input {
  border-radius: 2px; border-color: rgba(211,152,186, 0.38);
  background: rgba(19,1,11, 0.88);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.42);
}
.theme-inicio .career-pick__box img {
  max-width: 92px; filter: saturate(0.78) brightness(0.86) drop-shadow(0 4px 7px rgba(0, 0, 0, 0.68));
}
.theme-inicio .career-pick:hover .career-pick__box img { filter: saturate(1.08) brightness(1.04) drop-shadow(0 0 10px rgba(232,75,167, 0.36)); }
.theme-inicio .career-pick input:checked + .career-pick__box img {
  filter: saturate(1.08) brightness(1.06) drop-shadow(0 0 14px rgba(242,109,91, 0.72));
}
.theme-inicio .toggle span,
.theme-inicio .goal span { border-radius: 2px; }

/* A captura do botão traz a frase pintada. A camada final troca o recorte por
   moldura vetorial limpa e conserva apenas o texto real do <button>. */
.theme-inicio .ficha-enter {
  position: relative; overflow: hidden; width: min(100%, 980px); margin: 7px auto 0;
  padding: 17px clamp(18px, 4vw, 52px);
  border: 10px solid transparent;
  border-image: url('../img/ui/moldura-rica.svg') 32 / 12px stretch;
  border-radius: 0;
  background:
    linear-gradient(105deg, transparent 24%, rgba(252,154,211, 0.2) 48%, transparent 72%),
    linear-gradient(180deg, #cd2788 0%, #92155e 48%, #62093d 100%);
  background-size: 220% 100%, auto;
  color: #ffa69a; font-size: clamp(14px, 1.7vw, 21px);
  box-shadow: inset 0 2px 0 rgba(254,202,232, 0.32), inset 0 -5px 10px rgba(0, 0, 0, 0.35), 0 0 22px rgba(208,35,136, 0.34);
  animation: ficha-button-shine 5.4s ease-in-out infinite;
}
@keyframes ficha-button-shine {
  0%, 58% { background-position: 155% 0, 0 0; }
  88%, 100% { background-position: -55% 0, 0 0; }
}
.theme-inicio .ficha-enter:hover { filter: brightness(1.14) saturate(1.12); box-shadow: inset 0 2px 0 rgba(254,221,240, 0.4), 0 0 30px rgba(234,62,162, 0.5); }
.theme-inicio .mentor-card {
  padding: 4px 6px 10px; border: 1px solid rgba(198,88,74, 0.42);
  background: linear-gradient(180deg, rgba(56,11,37, 0.68), rgba(27,4,17, 0.4));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}
.theme-inicio .mentor-card__art { filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.55)); }
.theme-inicio .scroll-card { filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.42)); }

/* ---------------------- vitrine da arte promocional ------------------- */
.theme-inicio .vitrine {
  position: relative; padding: 18px 14px 16px; margin-top: 18px;
  border: 10px solid transparent;
  border-image: url('../img/ui/moldura-ouro.svg') 32 / 11px stretch;
  background: linear-gradient(180deg, rgba(39,6,25, 0.94), rgba(23,3,15, 0.97));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.64), inset 0 0 34px rgba(0, 0, 0, 0.36);
}
.theme-inicio .vitrine__titulo { font-size: clamp(20px, 3vw, 36px); }
.theme-inicio .vitrine__grade {
  grid-template-columns: 1.18fr repeat(6, minmax(0, 1fr)); gap: 6px;
}
.theme-inicio .vit-card {
  min-width: 0; padding: 8px 7px 10px; border-radius: 1px;
  border-color: rgba(198,88,74, 0.36);
  background: linear-gradient(180deg, rgba(56,11,37, 0.82), rgba(27,4,17, 0.9));
  box-shadow: inset 0 0 13px rgba(0, 0, 0, 0.34);
}
.theme-inicio .vit-card:nth-child(3n + 2) { border-top-color: rgba(61, 209, 158, 0.58); }
.theme-inicio .vit-card:nth-child(3n) { border-top-color: rgba(251,117,195, 0.58); }
.theme-inicio .vit-card:nth-child(3n + 1) { border-top-color: rgba(213,86,69, 0.65); }
.theme-inicio .vit-item { align-items: flex-start; gap: 5px; }
.theme-inicio .vit-item__art { width: 34px; height: 34px; }
.theme-inicio .vit-item__copy strong { font-size: 11px; }
.theme-inicio .vit-item__copy em { font-size: 11px; }
.theme-inicio .vitrine__base { grid-template-columns: 1fr 1fr 2fr 1fr 1fr; gap: 6px; }
.theme-inicio .vit-feat { border-radius: 1px; background: linear-gradient(180deg, rgba(56,11,37, 0.76), rgba(27,4,17, 0.88)); }
.theme-inicio .vit-feat--bosses { grid-column: auto; }

/* ------------------------------- loja --------------------------------- */
.route-shop .page-header { margin-bottom: 10px; }
.route-shop .ranking-tabs {
  padding: 8px; border: 1px solid rgba(198,88,74, 0.5);
  background: rgba(25,3,16, 0.86); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.route-shop .shop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.route-shop .shop-card { min-height: 320px; padding: 10px; margin: 0; }
.route-shop .shop-card__head--art {
  min-height: 142px; border-radius: 2px;
  background: radial-gradient(circle at 50% 38%, rgba(168,48,118, 0.22), transparent 58%), #29071b;
}
.route-shop .shop-card__head--art .shop-card__icon { height: 138px; }
.route-shop .shop-card__name { color: #f19b90; text-transform: uppercase; }
.route-shop .shop-card--moradia { border-image-source: url('../img/ui/moldura-rica.svg'); }

/* ---------------------------- responsivo ------------------------------ */
@media (max-width: 1320px) {
  .theme-city .hud-dock .hud-top { flex-wrap: wrap; min-height: auto; }
  .theme-city .player-block { flex: 1 1 260px; }
  .theme-city .hud-vitals { order: 4; flex-basis: 100%; }
  .theme-city .hud-actions { margin-left: 0; }
  .route-city .mmo-layout { grid-template-columns: 235px minmax(0, 1fr); }
  .route-city .inv-panel { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-city .inv-panel > .panel-ribbon { grid-column: 1 / -1; }
  .theme-inicio .vitrine__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .theme-inicio .vit-card--avatares { grid-row: span 2; }
  .route-shop .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .theme-inicio .logo-bar .marca__palco { height: auto; }
  .theme-city .hud-dock .hud-top { padding: 9px 12px; }
  .theme-city .hud-chip { min-height: 40px; }
  .theme-city .hud-dock .main-nav__item { flex-basis: 82px; min-height: 68px; }
  .theme-city .hud-dock .main-nav__item .ico { width: 29px; height: 29px; }
  .theme-city .career-strip__title small { display: none; }
  .theme-city .career-tile { flex: 0 0 88px; min-height: 96px; }
  .route-city .mmo-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
  .route-city .city-zone { grid-row: 1; }
  .route-city .char-panel { grid-row: 2; width: 100%; max-width: 560px; margin-inline: auto; }
  .route-city .inv-panel { grid-row: 3; grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-city .char-panel__frame { height: min(520px, 118vw); }
  .theme-inicio .vitrine__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-inicio .vitrine__base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-inicio .vit-feat--bosses { grid-column: 1 / -1; }
  .route-shop .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .theme-city:not(.theme-inicio) { padding-bottom: 78px; }
  .theme-inicio .logo-bar .marca__palco { height: auto; }
  .theme-city .hud-dock { position: relative; }
  .theme-city .hud-dock .hud-top { position: sticky; top: 0; z-index: 60; flex-wrap: nowrap; gap: 8px; }
  .theme-city .player-block { flex: 1 1 auto; min-width: 0; }
  .theme-city .avatar-frame { width: 52px; height: 52px; flex-basis: 52px; border-width: 2px; }
  .theme-city .player-block__copy > strong { font-size: 14px; }
  .theme-city .player-block__copy > small,
  .theme-city .player-block__copy .xp-track { display: none; }
  .theme-city .hud-vitals { display: none; }
  .theme-city .hud-resources {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
  }
  .theme-city .hud-resources .hud-chip:not(.hud-chip--gem) { display: none; }
  .theme-city .hud-chip--gem { min-width: 44px; min-height: 44px; padding: 7px 10px; }
  .theme-city .reputation-block { display: grid; min-width: 76px; min-height: 52px; padding: 5px 7px; }
  .theme-city .reputation-block .ico { width: 24px; height: 24px; }
  .theme-city .reputation-block strong { font-size: 17px; }
  .theme-city .reputation-block small { font-size: 11px; }
  .theme-city .round-button { width: 38px; height: 38px; }
  .theme-city .hud-actions .round-button:first-child { display: none; }
  .theme-city:not(.theme-inicio) .hud-dock .main-nav {
    position: fixed; z-index: 70; inset: auto 4px 4px;
    width: auto; padding: 3px; border: 1px solid rgba(198,88,74, 0.62);
    border-radius: 10px; box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.62);
  }
  .theme-city:not(.theme-inicio) .hud-dock .main-nav__item {
    flex: 0 0 72px; min-width: 72px; min-height: 66px; border-radius: 7px;
  }
  .theme-city .hud-dock .main-nav__item strong { font-size: 11px; }
  .theme-city > .career-strip { margin-top: 7px; }
  .theme-inicio .ficha { padding: 16px 12px; border-width: 12px; border-image-width: 14px; }
  .theme-inicio .ficha::before { width: 34px; height: 34px; top: -18px; }
  .theme-inicio .ficha-enter {
    width: 100%; padding: 13px 9px; border-width: 8px; border-image-width: 9px;
    font-size: 11px; letter-spacing: 0.025em; white-space: normal;
  }
  .theme-inicio .vitrine { padding: 14px 8px; }
  .theme-inicio .vitrine__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-inicio .vit-card--avatares { grid-row: auto; }
  .route-shop .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-shop .shop-card { min-height: 0; }
}

/* Os nomes longos continuam palavras inteiras. Como a faixa já possui
   rolagem horizontal própria, reservar a largura real do rótulo é melhor do
   que cortar "Administrativa" ou quebrá-la artificialmente no celular. */
@media (max-width: 620px) {
  .theme-city .career-tile {
    flex: 0 0 124px;
    min-width: 124px;
  }
}

@media (max-width: 430px) {
  .theme-city .player-block__copy > span i { display: none; }
  .theme-city .hud-actions { display: none; }
  .theme-city .reputation-block { min-width: 72px; }
  .theme-city .career-tile { flex-basis: 78px; min-height: 90px; }
  .theme-inicio .vitrine__grade,
  .theme-inicio .vitrine__base,
  .route-shop .shop-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-inicio .ficha-enter,
  .route-city .char-panel__frame::after { animation: none; }
}

/* =========================================================================
   CIDADE — dashboard panorâmico da segunda tela

   Esta classe existe só na rota real da cidade. Prédios e mentor continuam
   marcando o item Cidade no menu, mas não recebem este enquadramento.
   ====================================================================== */
.theme-city.screen-city {
  --city-dashboard-max: 1920px;
  padding-bottom: 0;
}
.screen-city > .career-strip { display: none; }
.screen-city .hud-dock .hud-top,
.screen-city .hud-dock .main-nav { max-width: var(--city-dashboard-max); }
.screen-city .hud-dock .main-nav__item.is-active { transform: none; }
.screen-city .hud-dock .main-nav__item.is-active::after { bottom: 0; }
.theme-city.screen-city .page-shell {
  width: 100%; max-width: var(--city-dashboard-max);
  padding: 8px 6px 10px;
}
.screen-city .game-panel { clip-path: none; }
.screen-city .site-footer { display: none; }

/* O retrato do HUD e o corpo do painel pertencem ao mesmo personagem. */
.screen-city .avatar-frame__city-art {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 4%;
  transform: scale(1.08); transform-origin: 50% 8%;
}

@media (min-width: 1321px) {
  .screen-city .mmo-layout {
    grid-template-columns: 320px minmax(0, 1fr) 390px;
    grid-template-rows: 770px 58px;
    gap: 6px; align-items: stretch;
  }
  .screen-city .char-panel,
  .screen-city .inv-panel {
    box-sizing: border-box; height: 770px; max-height: 770px;
  }
}

.screen-city .city-zone {
  display: flex; min-width: 0; flex-direction: column;
}
.screen-city .city-zone > .tutorial-banner {
  box-sizing: border-box; min-height: 145px;
  margin: 0 0 7px; padding: 10px 16px;
  border-image-source: url('../img/ui/moldura-rica.svg');
  background:
    radial-gradient(circle at 12% 50%, rgba(175,35,117, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(48,8,31, 0.98), rgba(26,3,16, 0.98));
}
.screen-city .tutorial-banner .npc-portrait--sm {
  width: 88px; height: 88px;
  filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.65));
}
.screen-city .tutorial-banner__copy strong { font-size: clamp(17px, 1.15vw, 22px); }
.screen-city .tutorial-banner__copy p { max-width: 780px; }

/* A peça nova já nasce panorâmica: nenhum formulário ou rótulo está pintado. */
.screen-city .city-stage--day {
  width: 100%; height: clamp(360px, 24vw, 460px); aspect-ratio: auto;
  flex: 0 0 auto; border-width: 9px; border-image-width: 10px;
  background: #1e0413;
}
.screen-city .city-stage__image {
  object-fit: cover; object-position: center;
  filter: saturate(1.08) contrast(1.04) brightness(0.94);
}
.screen-city .city-stage__shade {
  background:
    radial-gradient(105% 105% at 50% 46%, transparent 56%, rgba(16,1,10, 0.48) 100%),
    linear-gradient(180deg, rgba(22,3,14, 0.08), transparent 35%, rgba(18,2,11, 0.16));
}

/* O ponto é a âncora; placa e marcador ficam em camadas independentes. */
.screen-city .location-hotspot {
  width: 13px; height: 13px; display: block; z-index: 4;
}
.screen-city .location-hotspot > i {
  position: absolute; inset: 0; width: 13px; height: 13px;
}
.screen-city .location-hotspot > span {
  position: absolute; left: 50%; top: 19px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; transform: translateX(-50%);
  font-size: clamp(8.5px, 0.58vw, 10.5px); line-height: 1.05;
}
.screen-city .location-hotspot > span .ico { width: 15px; height: 15px; flex: 0 0 15px; }
.screen-city .location-hotspot > .quest-marker {
  position: absolute; left: -7px; bottom: 17px;
}
.screen-city .location-hotspot.hotspot--left > span {
  left: auto; right: 20px; top: 50%; transform: translateY(-50%);
}
.screen-city .location-hotspot.hotspot--right > span {
  left: 20px; right: auto; top: 50%; transform: translateY(-50%);
}
.screen-city .location-hotspot:hover > span,
.screen-city .location-hotspot:focus-visible > span { transform: translateX(-50%) scale(1.06); }
.screen-city .location-hotspot.hotspot--left:hover > span,
.screen-city .location-hotspot.hotspot--left:focus-visible > span,
.screen-city .location-hotspot.hotspot--right:hover > span,
.screen-city .location-hotspot.hotspot--right:focus-visible > span { transform: translateY(-50%) scale(1.06); }

.screen-city .mission-banner {
  box-sizing: border-box; min-height: 90px; margin: 7px 0 0;
  padding: 10px 16px; border-image-source: url('../img/ui/moldura-rica.svg');
  background:
    radial-gradient(circle at 6% 50%, rgba(207,75,58, 0.16), transparent 20%),
    linear-gradient(180deg, rgba(52,9,34, 0.98), rgba(27,3,17, 0.98));
}
.screen-city .mission-banner > .ico { width: 42px; height: 42px; }
.screen-city .mission-banner__copy strong { font-size: 18px; }
.screen-city .mission-banner .quest-bar { max-width: 560px; }

/* Painel do personagem: a arte domina, como no modelo; detalhes ficam no perfil. */
.screen-city .char-panel {
  height: 100%; min-height: 0; padding: 8px;
  grid-template-rows: minmax(0, 1fr) auto; gap: 7px;
}
.screen-city .char-panel > .char-attrs,
.screen-city .char-panel > .game-button,
.screen-city .char-panel > .pet-widget,
.screen-city .char-panel > .panel-ribbon,
.screen-city .char-panel > .active-activity,
.screen-city .char-panel > .empty-note { display: none; }
.screen-city .char-panel__frame {
  width: 100%; max-width: none; height: 100%; min-height: 0;
  border-image-source: url('../img/ui/moldura-rica.svg');
}
.screen-city .char-panel__art--raster {
  width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 0;
}
.screen-city .char-panel__frame::before {
  content: ""; position: absolute; z-index: 2; inset: 0;
  width: auto; height: auto; padding: 0; border-radius: 0;
  transform: none; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, transparent 48%, rgba(217,52,148, 0.13) 72%, rgba(226,94,76, 0.16) 100%);
  animation: city-portrait-glow 4.8s ease-in-out infinite;
}
.screen-city .char-panel__frame::after {
  content: ""; position: absolute; z-index: 3; inset: 0;
  transform: none; opacity: 1; animation: none; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(27,4,17, 0.34) 68%, #27071a 86%, #27071a 100%);
}
@keyframes city-portrait-glow {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}
.screen-city .char-panel__id { gap: 3px; padding: 0 6px 5px; }
.screen-city .char-panel__id strong { width: 100%; font-size: clamp(17px, 1.2vw, 21px); text-transform: uppercase; }
.screen-city .char-panel__id > .xp-track,
.screen-city .char-panel__id > .muted { display: none; }

/* Equipamentos com silhueta própria, botão + no canto e mapa compacto. */
.screen-city .inv-panel {
  height: 100%; min-height: 0; padding: 8px; gap: 7px;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
}
.screen-city .inv-panel > .panel-ribbon--unlock,
.screen-city .inv-panel > .quest-mini-list { display: none; }
.screen-city .inv-slots { gap: 5px; }
.screen-city .inv-slot {
  position: relative; min-height: 62px; padding: 6px 4px;
  border-color: rgba(198,88,74, 0.55);
}
.screen-city .inv-slot > .ico { width: 30px; height: 30px; opacity: 0.46; filter: grayscale(0.25); }
.screen-city .inv-slot__empty {
  position: absolute; top: 3px; right: 6px;
  font-size: 16px; color: #bb7da1;
}
.screen-city .inv-panel > .brazil-map {
  align-self: center; width: min(100%, 270px); height: 100%; max-height: 235px;
  aspect-ratio: 1 / 0.82;
}
.screen-city .inv-panel > .brazil-map::after {
  content: ""; position: absolute; z-index: 1; top: 2px; right: 1px;
  width: 48px; height: 48px; opacity: 0.42; pointer-events: none;
  background: url('../img/icons/viagens.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(232,121,106, 0.28));
}

/* A faixa inferior cruza as três colunas, em vez de alongar apenas o mapa. */
.screen-city .world-feed {
  grid-column: 1 / -1; min-height: 58px; margin: 0; padding: 8px 18px;
  border-image-source: url('../img/ui/moldura-rica.svg');
  background: linear-gradient(180deg, rgba(46,8,30, 0.98), rgba(24,3,15, 0.98));
}

@media (max-width: 1320px) {
  .theme-city.screen-city .page-shell { padding-inline: 8px; }
  .screen-city .inv-panel {
    grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none; height: auto;
  }
  .screen-city .inv-panel > .panel-ribbon { grid-column: auto; }
  .screen-city .inv-panel > .brazil-map { height: 230px; }
}

@media (max-width: 900px) {
  .screen-city .city-zone > .tutorial-banner { min-height: 0; }
  .screen-city .char-panel { height: 610px; }
  .screen-city .char-panel__frame { height: 100%; }
  .screen-city .inv-panel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .theme-city.screen-city { padding-bottom: 0; }
  .theme-city.screen-city .hud-dock { position: relative; }
  .theme-city.screen-city .hud-dock .hud-top { position: relative; top: auto; }
  .theme-city.screen-city:not(.theme-inicio) .hud-dock .main-nav {
    position: relative; z-index: 5; inset: auto;
    width: 100%; margin: 0; padding: 0 4px;
    border-radius: 0; box-shadow: inset 0 -5px 15px rgba(0, 0, 0, 0.35);
  }
  .theme-city.screen-city:not(.theme-inicio) .hud-dock .main-nav__item {
    flex: 0 0 72px; min-width: 72px; min-height: 66px; border-radius: 0;
  }
  .theme-city.screen-city .page-shell { padding: 7px 5px 10px; }
  .screen-city .city-stage--day { height: auto; aspect-ratio: 2.2 / 1; }
  .screen-city .city-stage__image { object-fit: cover; object-position: center; animation: none; transform: none; }
  .screen-city .location-hotspot > span { display: none; }
  .screen-city .location-hotspot > i { width: 17px; height: 17px; }
  .screen-city .location-hotspot--biblioteca > span,
  .screen-city .location-hotspot--arena > span,
  .screen-city .location-hotspot--banco > span { display: inline-flex; font-size: 11px; padding: 3px 5px; }
  .screen-city .mission-banner { align-items: flex-start; flex-wrap: wrap; }
  .screen-city .mission-banner .game-button { width: 100%; }
  .screen-city .world-feed { min-height: 72px; padding: 8px; flex-wrap: wrap; }
  .screen-city .world-feed__city { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-city .char-panel__frame::before { animation: none; }
}

/* =========================================================================
   CIDADE — molduras, medalhões e comandos da referência

   A paisagem panorâmica é apenas o centro do dashboard. Esta camada dá ao
   restante da segunda tela o mesmo peso visual: HUD emoldurado, menu formado
   por brasões, botões com engaste e títulos ancorados por florões. Tudo fica
   restrito a .screen-city para as janelas internas manterem seus layouts.
   ====================================================================== */

/* Os wrappers existem no HTML para a versão rica, mas são neutros fora dela. */
.main-nav__crest { display: contents; }
.round-button__glyph { display: grid; place-items: center; }
.round-button__label { display: none; }

.theme-city.screen-city {
  --city-gold-bright: #ffb4aa;
  --city-gold: #d35b4b;
  --city-gold-deep: #701d12;
  --city-navy: #2a071b;
  --city-navy-deep: #15020d;
  position: relative;
}

/* Filete ornamental da tela toda: não captura cliques nem congela conteúdo. */
.theme-city.screen-city::after {
  content: "";
  position: fixed; z-index: 1000; inset: 2px;
  pointer-events: none;
  border: 12px solid transparent;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 13px stretch;
  filter: drop-shadow(0 0 8px rgba(215,38,141, 0.16));
}

/* -------------------------- HUD ornamentado --------------------------- */
.screen-city .hud-dock {
  position: relative; isolation: isolate;
  border: 0;
  background:
    radial-gradient(ellipse at 50% -35%, rgba(189,55,133, 0.24), transparent 46%),
    linear-gradient(90deg, rgba(30,5,20, 0.98), rgba(58,10,38, 0.995) 20%, rgba(31,5,20, 0.995) 80%, rgba(21,2,13, 0.99));
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.72);
}
.screen-city .hud-dock .hud-top {
  height: 122px; min-height: 122px;
  padding: 12px clamp(17px, 1.35vw, 26px);
  gap: clamp(9px, 1vw, 18px);
  overflow: visible; clip-path: none;
  border: 10px solid transparent;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 12px stretch;
  background:
    radial-gradient(circle at 50% 0, rgba(193,52,134, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(52,9,34, 0.97), rgba(24,3,15, 0.985));
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 242, 194, 0.08);
}
.screen-city .hud-dock .hud-top::before,
.screen-city .hud-dock .hud-top::after {
  content: ""; position: absolute; z-index: 8;
  left: 50%; width: min(520px, 38vw); height: 44px;
  border: 0; border-radius: 0; opacity: 1;
  transform: translateX(-50%);
  background: url('../img/ui/florao-cidade.svg') center / 100% 100% no-repeat;
  box-shadow: none; pointer-events: none;
}
.screen-city .hud-dock .hud-top::before { top: -21px; }
.screen-city .hud-dock .hud-top::after { inset: auto auto -22px 50%; }

.screen-city .player-block {
  flex: 0 1 310px; min-width: 245px; gap: 15px;
}
.screen-city .avatar-frame {
  width: 84px; height: 84px; flex-basis: 84px;
  border: 3px solid #e87667;
  box-shadow:
    0 0 0 2px #3e0e08,
    0 0 0 5px #c0402f,
    0 0 0 8px #260619,
    inset 0 0 20px rgba(0, 0, 0, 0.75),
    0 0 22px rgba(231,54,157, 0.25);
}
.screen-city .avatar-frame::before,
.screen-city .avatar-frame::after {
  content: ""; position: absolute; z-index: 4; left: 50%;
  width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg);
  border: 1px solid #ffb1a7;
  background: radial-gradient(circle at 30% 25%, #fee0f2, #e4359b 38%, #820a50 72%);
  box-shadow: 0 0 0 2px #4c130c, 0 0 9px rgba(250,75,177, 0.75);
}
.screen-city .avatar-frame::before { top: -7px; }
.screen-city .avatar-frame::after { bottom: -7px; }
.screen-city .player-block__copy > strong { font-size: clamp(17px, 1.1vw, 21px); }
.screen-city .player-block__copy > span { font-size: 12px; }
.screen-city .player-block .xp-track {
  height: 7px; border-color: rgba(238,114,98, 0.72);
  box-shadow: 0 0 7px rgba(230,49,155, 0.28);
}

.screen-city .hud-resources { gap: 7px; }
.screen-city .hud-chip {
  min-height: 52px; padding: 8px 12px 8px 43px;
  border: 7px solid transparent; border-radius: 0;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 8px stretch;
  background:
    linear-gradient(180deg, rgba(113,34,80, 0.86), rgba(34,5,22, 0.98));
  box-shadow: inset 0 0 12px rgba(15,1,9, 0.7);
}
.screen-city .hud-chip .ico { left: 9px; width: 27px; height: 27px; }
.screen-city .hud-chip--coin .ico { filter: drop-shadow(0 0 7px rgba(255,92,70, 0.6)); }
.screen-city .hud-chip--gem .ico { filter: drop-shadow(0 0 8px rgba(252,124,199, 0.72)); }
.screen-city .hud-chip--upsell .ico,
.screen-city .hud-chip--premium .ico { filter: drop-shadow(0 0 8px rgba(236,111,95, 0.65)); }

.screen-city .hud-vitals {
  grid-template-columns: repeat(3, minmax(128px, 1fr));
  flex-basis: 520px; min-width: 390px; gap: 8px;
  border: 0;
}
.screen-city .vital {
  position: relative; min-height: 67px;
  padding: 8px 11px; gap: 10px;
  border: 7px solid transparent !important;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 8px stretch !important;
  background:
    radial-gradient(circle at 18% 45%, rgba(201,58,141, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(64,11,42, 0.96), rgba(26,3,16, 0.98));
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.58);
}
.screen-city .vital > .ico { width: 33px; height: 33px; }
.screen-city .vital--energy > .ico { filter: drop-shadow(0 0 7px rgba(255,79,56, 0.72)); }
.screen-city .vital--focus > .ico { filter: drop-shadow(0 0 8px rgba(250,60,171, 0.74)); }
.screen-city .vital--stress > .ico { filter: drop-shadow(0 0 8px rgba(255, 93, 108, 0.72)); }
.screen-city .vital small { font-size: 12px; }
.screen-city .vital strong { font-size: 18px; }
.screen-city .vital i {
  height: 8px; padding: 1px; border-color: rgba(224,96,79, 0.58);
  box-shadow: inset 0 0 5px #000;
}
.screen-city .vital--energy i b { box-shadow: 0 0 9px #ff462e; }
.screen-city .vital--focus i b { box-shadow: 0 0 9px #fa3aaa; }
.screen-city .vital--stress i b { box-shadow: 0 0 9px #ff6570; }

.screen-city .reputation-block {
  min-width: 106px; min-height: 86px; padding: 10px 12px;
  border: 8px solid transparent; border-radius: 0;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 10px stretch;
  background:
    radial-gradient(circle at 22% 40%, rgba(207,55,144, 0.18), transparent 45%),
    linear-gradient(180deg, #601340, #2b051b);
}
.screen-city .reputation-block .ico { width: 36px; height: 36px; }
.screen-city .reputation-block small { color: #d9a69f; }
.screen-city .reputation-block strong { font-size: 26px; text-shadow: 0 0 9px rgba(244,97,78, 0.45); }

.screen-city .hud-actions {
  align-self: stretch; align-items: center; gap: 8px;
}
.screen-city .round-button {
  width: 62px; height: 82px; padding: 2px 0;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font-family: 'Cinzel', Georgia, serif;
}
.screen-city .round-button__glyph {
  width: 50px; height: 50px; flex: 0 0 50px;
  border: 2px solid #d55f4f; border-radius: 50%;
  background:
    radial-gradient(circle at 40% 28%, rgba(198,77,148, 0.58), transparent 25%),
    radial-gradient(circle, #5b173f, #250417 72%);
  box-shadow:
    inset 0 0 0 3px #250719,
    inset 0 0 0 4px #79261b,
    0 0 0 2px #201407,
    0 0 13px rgba(221,53,151, 0.2);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.screen-city .round-button__glyph .ico { width: 25px; height: 25px; }
.screen-city .round-button__label {
  display: block; font: 600 11.5px/1 'Cinzel', Georgia, serif;
  color: #e97161; letter-spacing: 0.02em; white-space: nowrap;
  text-shadow: 0 2px 4px #000;
}
.screen-city .round-button:hover { transform: none; filter: none; }
.screen-city .round-button:hover .round-button__glyph,
.screen-city .round-button:focus-visible .round-button__glyph {
  transform: translateY(-2px) rotate(5deg);
  filter: brightness(1.22);
  box-shadow:
    inset 0 0 0 3px #250719,
    inset 0 0 0 4px #a93526,
    0 0 0 2px #201407,
    0 0 18px rgba(251,87,183, 0.42);
}

/* --------------------- menu em medalhões ilustrados ------------------- */
.screen-city .hud-dock .main-nav {
  height: 90px; min-height: 90px; padding: 3px 13px 5px;
  overflow-y: visible; clip-path: none;
  border: 8px solid transparent;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 9px stretch;
  background:
    radial-gradient(ellipse at 50% 0, rgba(171,44,118, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(57,11,38, 0.99), rgba(25,3,16, 0.995));
  box-shadow: inset 0 -10px 24px rgba(0, 0, 0, 0.42);
}
.screen-city .hud-dock .main-nav__item {
  --nav-rgb: 61, 154, 204;
  min-height: 76px; padding: 4px 5px 5px; gap: 2px;
  overflow: visible;
  border: 0; border-right: 1px solid rgba(211,91,75, 0.4);
  background:
    linear-gradient(90deg, transparent, rgba(var(--nav-rgb), 0.08) 50%, transparent),
    linear-gradient(180deg, rgba(70,15,47, 0.82), rgba(28,4,18, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 190, 0.08),
    inset 0 -2px 0 rgba(112,29,18, 0.62);
}
.screen-city .hud-dock .main-nav__item::before {
  content: ""; position: absolute; z-index: 3;
  right: -5px; bottom: -4px; width: 9px; height: 9px;
  transform: rotate(45deg);
  border: 1px solid #f48b7d;
  background: radial-gradient(circle at 35% 30%, #fee0f2, rgb(var(--nav-rgb)) 46%, #2c081d 78%);
  box-shadow: 0 0 0 2px #3d110b, 0 0 7px rgba(var(--nav-rgb), 0.5);
}
.screen-city .hud-dock .main-nav__item:last-child::before { display: none; }
.screen-city .main-nav__crest {
  position: relative; display: grid; place-items: center;
  width: 53px; height: 51px;
  border: 1px solid rgba(238,126,111, 0.78);
  clip-path: polygon(50% 0, 88% 12%, 100% 50%, 85% 88%, 50% 100%, 15% 88%, 0 50%, 12% 12%);
  background:
    radial-gradient(circle at 50% 43%, rgba(var(--nav-rgb), 0.55), rgba(var(--nav-rgb), 0.13) 45%, transparent 67%),
    linear-gradient(145deg, #57193d, #220416 68%);
  box-shadow:
    inset 0 0 0 2px #200716,
    inset 0 0 0 3px rgba(224,96,79, 0.58),
    0 0 13px rgba(var(--nav-rgb), 0.28);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.screen-city .main-nav__crest::before,
.screen-city .main-nav__crest::after {
  content: ""; position: absolute; left: 50%; width: 5px; height: 5px;
  transform: translateX(-50%) rotate(45deg);
  background: #ffaba0; border: 1px solid #6e1d12;
}
.screen-city .main-nav__crest::before { top: 2px; }
.screen-city .main-nav__crest::after { bottom: 2px; }
.screen-city .hud-dock .main-nav__item .ico {
  position: relative; z-index: 1; width: 37px; height: 37px;
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 6px rgba(var(--nav-rgb), 0.75));
}
.screen-city .hud-dock .main-nav__item strong {
  font-size: clamp(9px, 0.6vw, 11px); line-height: 1;
  color: #f0b7b0;
}
.screen-city .main-nav__item--city { --nav-rgb: 224, 169, 65; }
.screen-city .main-nav__item--guide { --nav-rgb: 68, 174, 230; }
.screen-city .main-nav__item--library { --nav-rgb: 236, 194, 106; }
.screen-city .main-nav__item--quests { --nav-rgb: 211, 104, 74; }
.screen-city .main-nav__item--simulados { --nav-rgb: 230, 93, 84; }
.screen-city .main-nav__item--contest { --nav-rgb: 68, 199, 139; }
.screen-city .main-nav__item--shop { --nav-rgb: 176, 105, 238; }
.screen-city .main-nav__item--bank { --nav-rgb: 231, 175, 67; }
.screen-city .main-nav__item--chat { --nav-rgb: 55, 188, 232; }
.screen-city .main-nav__item--ranking { --nav-rgb: 244, 193, 73; }
.screen-city .main-nav__item--profile { --nav-rgb: 161, 117, 223; }
.screen-city .main-nav__item--admin { --nav-rgb: 89, 171, 238; }
.screen-city .hud-dock .main-nav__item:hover {
  transform: translateY(-2px);
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--nav-rgb), 0.22), transparent 58%),
    linear-gradient(180deg, #5f1440, #2a071b);
  box-shadow: inset 0 -3px 0 rgba(var(--nav-rgb), 0.78), 0 0 18px rgba(var(--nav-rgb), 0.18);
}
.screen-city .hud-dock .main-nav__item:hover .main-nav__crest { transform: translateY(-2px) scale(1.04); }
.screen-city .hud-dock .main-nav__item.is-active {
  z-index: 2; transform: none;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--nav-rgb), 0.34), transparent 58%),
    linear-gradient(180deg, #72281e, #1c1206);
  box-shadow:
    inset 0 0 18px rgba(255,146,132, 0.22),
    inset 0 -4px 0 #e05745,
    0 0 18px rgba(var(--nav-rgb), 0.3);
}
.screen-city .hud-dock .main-nav__item.is-active .main-nav__crest {
  transform: translateY(-3px) scale(1.07);
  border-color: #fff0bd;
  background:
    radial-gradient(circle, rgba(var(--nav-rgb), 0.72), rgba(var(--nav-rgb), 0.2) 45%, transparent 66%),
    linear-gradient(145deg, #5d231b, #1f0c17 70%);
  box-shadow:
    inset 0 0 0 2px #180705,
    inset 0 0 0 4px #d65a4a,
    0 0 18px rgba(var(--nav-rgb), 0.58);
}
.screen-city .hud-dock .main-nav__item.is-active::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 1px; height: 3px;
  background: linear-gradient(90deg, transparent, #ffc4bc, transparent);
  filter: drop-shadow(0 0 4px rgba(var(--nav-rgb), 0.8));
}
.screen-city .hud-dock .main-nav__item--shop {
  background:
    radial-gradient(circle at 50% 42%, rgba(176, 105, 238, 0.25), transparent 58%),
    linear-gradient(180deg, rgba(48, 29, 76, 0.94), rgba(26,9,19, 0.96));
}
.screen-city .hud-dock .main-nav__item .nav-badge {
  z-index: 8; top: 4px; right: 8px;
  border-color: #ffaba0;
  box-shadow: 0 0 0 2px #351307, 0 0 10px rgba(255, 92, 63, 0.62);
}

/* --------------------- botões e molduras internas --------------------- */
.screen-city .game-panel,
.screen-city .city-stage--day {
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 12px stretch;
  border-radius: 0; clip-path: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,175,164, 0.08),
    inset 0 0 28px rgba(0, 0, 0, 0.34),
    0 10px 25px rgba(0, 0, 0, 0.54);
}
.screen-city .game-button {
  min-height: 42px; padding: 7px 18px;
  overflow: hidden; clip-path: none; border-radius: 0;
  border: 8px solid transparent;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 9px stretch;
  font-family: 'Cinzel', Georgia, serif; font-size: 12px;
  letter-spacing: 0.055em;
  background:
    linear-gradient(180deg, rgba(149,59,111, 0.84), rgba(43,5,27, 0.98) 52%, rgba(25,3,16, 0.99));
  color: #f7c5be;
  text-shadow: 0 2px 3px #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 195, 0.18),
    inset 0 -5px 12px rgba(0, 0, 0, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.45);
}
.screen-city .game-button::before {
  content: ""; position: absolute; z-index: 2;
  left: 5px; right: 5px; top: 4px; height: 1px;
  background: linear-gradient(90deg, transparent, #f68f81, transparent);
  pointer-events: none;
}
.screen-city .game-button::after {
  inset: 0; border-radius: 0;
  background:
    linear-gradient(105deg, transparent 33%, rgba(255, 255, 255, 0.28) 48%, transparent 63%);
  background-size: 260% 100%;
}
.screen-city .game-button--gold {
  color: #210704;
  background:
    linear-gradient(180deg, #ffaca1, #d94f3d 46%, #9a2617 52%, #c43927);
  text-shadow: 0 1px 0 rgba(255, 248, 213, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -4px 9px rgba(74, 39, 2, 0.35),
    0 4px 0 #5a350b,
    0 7px 14px rgba(0, 0, 0, 0.44);
}
.screen-city .game-button--purple {
  color: #fff3dd;
  background:
    linear-gradient(180deg, #a477d3, #67408f 46%, #2b1747 53%, #49256f);
  text-shadow: 0 2px 3px #160820;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -4px 10px rgba(17, 5, 32, 0.45),
    0 4px 0 #241033,
    0 0 16px rgba(164, 96, 231, 0.28);
}
.screen-city .game-button:hover {
  transform: translateY(-2px); filter: brightness(1.16) saturate(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 0 18px rgba(251,86,182, 0.32), 0 6px 13px rgba(0, 0, 0, 0.5);
}
.screen-city .game-button--gold:hover { box-shadow: inset 0 1px 0 #fff6cc, 0 3px 0 #5a350b, 0 0 20px rgba(239,91,71, 0.5); }
.screen-city .game-button--purple:hover { box-shadow: inset 0 1px 0 #e5c7ff, 0 3px 0 #241033, 0 0 21px rgba(177, 103, 246, 0.48); }
.screen-city .game-button:active { transform: translateY(2px); }
.screen-city .game-button > .ico { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72)); }

.screen-city .panel-ribbon {
  position: relative; isolation: isolate; min-height: 38px;
  justify-content: center; margin: -2px -2px 8px; padding: 6px 14px;
  border: 0; border-radius: 0; overflow: visible;
  background: transparent;
}
.screen-city .panel-ribbon::before {
  content: ""; position: absolute; z-index: -1; inset: -3px 2px;
  background: url('../img/ui/florao-cidade.svg') center / 100% 38px no-repeat;
  opacity: 0.9; pointer-events: none;
}
.screen-city .panel-ribbon > strong {
  padding: 3px 10px;
  color: #f27d6e;
  background: #29071b;
  text-shadow: 0 2px 4px #000;
}
.screen-city .panel-ribbon > .ico {
  position: relative; z-index: 2; width: 21px; height: 21px;
  filter: drop-shadow(0 0 6px rgba(233,96,78, 0.5));
}
.screen-city .panel-ribbon > a {
  position: absolute; z-index: 2; right: 9px;
  color: #f474bf; text-shadow: 0 0 6px rgba(234,71,166, 0.42);
}
.screen-city .city-title-badge,
.screen-city .camera-tip,
.screen-city .location-hotspot > span {
  border: 6px solid transparent; border-radius: 0;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 7px stretch;
  background: linear-gradient(180deg, rgba(63,10,41, 0.96), rgba(24,3,15, 0.98));
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.56), inset 0 0 9px rgba(180,43,123, 0.12);
}
.screen-city .inv-slot {
  border: 6px solid transparent;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 7px stretch;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 34%, rgba(191,58,135, 0.12), transparent 52%),
    linear-gradient(180deg, #3c0a27, #1f0414);
}
.screen-city .inv-slot:hover {
  transform: translateY(-2px); filter: brightness(1.16);
  box-shadow: 0 0 13px rgba(225,71,161, 0.25);
}
.screen-city .mission-banner > .ico {
  padding: 5px; border: 1px solid #d65a4a; border-radius: 50%;
  background: radial-gradient(circle, #6b1949, #250518 72%);
  box-shadow: 0 0 0 3px #240a06, 0 0 12px rgba(222,57,153, 0.24);
}
.screen-city .world-feed::before {
  content: ""; position: absolute; left: 50%; top: -11px;
  width: min(520px, 45vw); height: 26px; transform: translateX(-50%);
  background: url('../img/ui/florao-cidade.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}

/* A composição continua terminando dentro de um viewport desktop. */
@media (min-width: 1321px) {
  .screen-city .mmo-layout {
    grid-template-rows: 746px 58px;
  }
  .screen-city .char-panel,
  .screen-city .inv-panel {
    height: 746px; max-height: 746px;
  }
}

@media (max-width: 1500px) {
  .screen-city .hud-dock .hud-top { gap: 7px; padding-inline: 14px; }
  .screen-city .player-block { flex-basis: 252px; min-width: 220px; }
  .screen-city .avatar-frame { width: 76px; height: 76px; flex-basis: 76px; }
  .screen-city .hud-chip { padding-right: 8px; padding-left: 38px; }
  .screen-city .hud-chip .ico { left: 7px; width: 25px; height: 25px; }
  .screen-city .hud-vitals { flex-basis: 430px; min-width: 360px; gap: 4px; }
  .screen-city .vital { padding-inline: 7px; gap: 6px; }
  .screen-city .vital > .ico { width: 29px; height: 29px; }
  .screen-city .round-button { width: 55px; }
  .screen-city .round-button__glyph { width: 46px; height: 46px; flex-basis: 46px; }
}

@media (max-width: 1320px) {
  .screen-city .hud-dock .hud-top { height: auto; min-height: 112px; flex-wrap: wrap; }
  .screen-city .hud-vitals { order: 4; flex: 1 1 100%; }
  .screen-city .hud-dock .main-nav { height: 86px; min-height: 86px; }
  .screen-city .main-nav__crest { width: 48px; height: 46px; }
  .screen-city .hud-dock .main-nav__item .ico { width: 33px; height: 33px; }
}

@media (max-width: 900px) {
  .screen-city .hud-dock .hud-top::before,
  .screen-city .hud-dock .hud-top::after { width: 250px; height: 28px; }
  .screen-city .hud-dock .hud-top::before { top: -14px; }
  .screen-city .hud-dock .hud-top::after { bottom: -14px; }
  .screen-city .hud-resources { display: none; }
  .screen-city .hud-vitals { grid-template-columns: repeat(3, minmax(105px, 1fr)); }
}

@media (max-width: 680px) {
  .theme-city.screen-city::after { border-width: 7px; border-image-width: 8px; }
  .screen-city .hud-dock .hud-top {
    height: 132px; min-height: 132px; padding: 11px 10px; flex-wrap: nowrap;
    border-width: 8px; border-image-width: 9px;
  }
  .screen-city .player-block { min-width: 0; flex: 1 1 auto; }
  .screen-city .avatar-frame { width: 60px; height: 60px; flex-basis: 60px; }
  .screen-city .player-block__copy > strong { font-size: 15px; }
  .screen-city .reputation-block { min-width: 78px; min-height: 64px; padding: 6px; }
  .screen-city .reputation-block .ico { width: 27px; height: 27px; }
  .screen-city .reputation-block strong { font-size: 19px; }
  .screen-city .hud-actions { display: flex; }
  .screen-city .hud-actions .round-button:first-child { display: none; }
  .screen-city .round-button { width: 43px; height: 60px; }
  .screen-city .round-button__glyph { width: 38px; height: 38px; flex-basis: 38px; }
  .screen-city .round-button__glyph .ico { width: 21px; height: 21px; }
  .screen-city .round-button__label { font-size: 11px; }
  .screen-city .hud-vitals { display: none; }
  .theme-city.screen-city:not(.theme-inicio) .hud-dock .main-nav {
    height: 86px; min-height: 86px; padding: 3px 5px 5px;
    border-width: 7px; border-image-width: 8px;
  }
  .theme-city.screen-city:not(.theme-inicio) .hud-dock .main-nav__item {
    min-height: 64px; padding: 3px 2px; flex-basis: 76px; min-width: 76px;
  }
  .screen-city .main-nav__crest { width: 39px; height: 38px; }
  .screen-city .hud-dock .main-nav__item .ico { width: 28px; height: 28px; }
  .screen-city .hud-dock .main-nav__item strong { font-size: 11px; }
  .screen-city .panel-ribbon::before { background-size: 120% 34px; }
  .screen-city .game-button { min-height: 40px; padding: 6px 12px; border-width: 7px; }
}

/* Ajuste de proporção após comparação pixel a pixel com o modelo. */
.hud-identity,
/* O nível é conquista do jogador: visível em TODOS os temas, não só na cidade. */
.avatar-medallion { position: relative; display: inline-grid; }
.avatar-frame__level {
  position: absolute; z-index: 4; right: -7px; bottom: -7px;
  display: grid; place-items: center;
  min-width: 27px; height: 27px; padding: 0 6px;
  font-size: 14px; font-weight: 800; color: #2a0a1c;
  background: linear-gradient(180deg, #ffc9b3, var(--gold));
  border: 2px solid rgba(30, 7, 20, 0.9); border-radius: 999px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

.screen-city .game-panel:not(.world-feed)::before { display: none; }
.screen-city .world-feed::before { display: block; }
.screen-city .mmo-layout { position: relative; }
.screen-city .mmo-layout::after {
  content: ""; position: absolute; z-index: 30; inset: -3px;
  pointer-events: none;
  border: 9px solid transparent;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 10px stretch;
  filter: drop-shadow(0 0 5px rgba(225,62,157, 0.12));
}
.screen-city .game-panel {
  border-width: 6px;
  border-image-width: 7px;
}
.screen-city .city-stage--day {
  border-width: 6px;
  border-image-width: 7px;
}
.screen-city .char-panel__frame {
  border-width: 8px;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 9px stretch;
}

@media (min-width: 1321px) {
  .screen-city .hud-dock .hud-top {
    display: grid;
    grid-template-columns: 29% 46% 10% 12%;
    column-gap: 1%;
    align-items: center;
    height: 148px; min-height: 148px;
    padding: 10px 22px;
  }
  .screen-city .hud-identity {
    position: relative; display: block; min-width: 0; height: 100%;
  }
  .screen-city .player-block {
    width: 100%; height: 100%; min-width: 0; padding-top: 2px;
    align-items: flex-start; gap: 13px;
  }
  .screen-city .avatar-medallion {
    position: relative; display: grid; place-items: center;
    width: 120px; height: 120px; flex: 0 0 120px;
    align-self: center;
    border-radius: 50%;
    background:
      radial-gradient(circle, transparent 55%, rgba(122,30,84, 0.36) 57%, transparent 61%),
      conic-gradient(from 22.5deg, #6a190e, #f07565, #6a190e, #e76958, #6a190e, #f07565, #6a190e);
    box-shadow:
      0 0 0 2px #14020c,
      0 0 0 4px #b83827,
      0 0 0 7px #28071a,
      0 0 20px rgba(223,54,153, 0.26);
  }
  .screen-city .avatar-medallion::before {
    content: ""; position: absolute; inset: 4px; border-radius: 50%;
    border: 1px solid #ffaca1;
    box-shadow: inset 0 0 0 3px #3b100a, inset 0 0 12px rgba(0, 0, 0, 0.78);
    pointer-events: none; z-index: 3;
  }
  .screen-city .avatar-frame {
    width: 102px; height: 102px; flex-basis: 102px;
    border-width: 2px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.74);
  }
  .screen-city .avatar-frame__level {
    position: absolute; z-index: 6; left: 50%; bottom: -10px;
    display: grid; place-items: center; width: 34px; height: 34px;
    transform: translateX(-50%);
    border: 2px solid #e55f4d; border-radius: 50%;
    color: #fff1c7; font: 700 16px/1 'Cinzel', Georgia, serif;
    background: radial-gradient(circle at 35% 28%, #5f1942, #210415 72%);
    box-shadow: 0 0 0 3px #260a06, 0 0 10px rgba(237,73,169, 0.38);
  }
  .screen-city .player-block__copy {
    align-content: start; padding-top: 6px; gap: 1px;
  }
  .screen-city .player-block__copy > strong { font-size: clamp(18px, 1.15vw, 22px); }
  .screen-city .player-block__copy > span { font-size: 12px; }
  .screen-city .player-block__copy > small { font-size: 11px; }
  .screen-city .player-block .xp-track { width: min(210px, 100%); }
  .screen-city .hud-resources {
    position: absolute; z-index: 4; left: 136px; bottom: 3px;
    display: flex; gap: 4px;
  }
  .screen-city .hud-chip {
    min-height: 31px; height: 31px;
    padding: 3px 8px 3px 28px;
    border-width: 4px; border-image-width: 5px;
  }
  .screen-city .hud-chip .ico {
    left: 5px; width: 18px; height: 18px;
  }
  .screen-city .hud-chip strong { font-size: clamp(10px, 0.62vw, 12px); }

  .screen-city .hud-vitals {
    width: 100%; min-width: 0; height: 84px;
    flex: none; gap: 12px;
  }
  .screen-city .vital {
    min-width: 0; min-height: 78px; padding: 8px 10px; gap: 8px;
  }
  .screen-city .vital > .ico { width: 40px; height: 40px; }
  .screen-city .vital strong { font-size: clamp(16px, 1vw, 19px); }
  .screen-city .vital i { height: 9px; }

  .screen-city .reputation-block {
    width: 100%; min-width: 0; min-height: 88px; padding: 9px 10px;
  }
  .screen-city .reputation-block .ico { width: 40px; height: 40px; }
  .screen-city .reputation-block strong { font-size: 28px; }

  .screen-city .hud-actions {
    width: 100%; margin: 0; align-self: center; justify-content: center; gap: 11px;
  }
  .screen-city .round-button { width: 74px; height: 94px; gap: 7px; }
  .screen-city .round-button__glyph { width: 64px; height: 64px; flex-basis: 64px; }
  .screen-city .round-button__glyph .ico { width: 31px; height: 31px; }
  .screen-city .round-button__label { font-size: 12px; }

  .screen-city .hud-dock .main-nav {
    height: 101px; min-height: 101px;
    padding: 3px clamp(24px, 4.69vw, 90px) 5px;
    justify-content: center; align-items: stretch; overflow-y: hidden;
  }
  .screen-city .hud-dock .main-nav__item {
    flex: 0 0 clamp(104px, 7.55vw, 145px); min-width: 0; min-height: 79px;
    padding: 3px 4px; gap: 1px;
  }
  .screen-city .main-nav__crest { width: 60px; height: 56px; }
  .screen-city .hud-dock .main-nav__item .ico { width: 48px; height: 48px; }
  .screen-city .hud-dock .main-nav__item strong {
    font-size: clamp(11px, 0.75vw, 14.5px);
  }
  .screen-city .hud-dock .main-nav__item::before { right: -5px; bottom: 1px; }

  .screen-city .tutorial-banner__actions .game-button {
    min-width: 198px; min-height: 52px; font-size: 14px;
  }
  .screen-city .mission-banner > .game-button {
    min-width: 195px; min-height: 53px; font-size: 14px;
  }
  .screen-city .inv-panel > .game-button {
    width: min(330px, calc(100% - 24px)); min-height: 51px;
    justify-self: center; margin-inline: auto; font-size: 14px;
  }
}

@media (max-width: 680px) {
  .theme-city.screen-city .hud-dock .hud-top {
    flex-direction: row; align-items: center; gap: 5px;
  }
  .screen-city .hud-dock .main-nav { overflow-y: hidden; }
  .screen-city .hud-dock .main-nav__item::before { bottom: 1px; }
  .screen-city .reputation-block { flex: 0 0 78px; width: 78px; align-self: center; }
  .screen-city .hud-actions { flex: 0 0 43px; margin-left: 0; align-self: center; }
  .screen-city .round-button { overflow: visible; }
  .screen-city .location-hotspot--banco > span { display: none; }
}

@media (max-width: 430px) {
  .screen-city .player-block__copy > span { font-size: 11.5px; }
  .screen-city .round-button__label { display: none; }
}

/* Simulados por especialidade: a escolha é persistente e a cobertura do
   acervo fica visível antes de qualquer tentativa. */
.simulado-area-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.simulado-area-panel .inline-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.simulado-area-panel .inline-form label {
  flex: 1 1 320px;
  min-width: 0;
}
.simulado-area-panel .filter-select { width: 100%; }
.simulado-area-panel .coverage {
  width: min(560px, 100%);
  min-height: 28px;
}
.area-card.is-active {
  border-color: var(--gold-bright, #e76655);
  box-shadow: inset 0 0 24px rgb(57 189 248 / 10%), 0 0 18px rgb(231 189 85 / 18%);
}

@media (max-width: 620px) {
  .simulado-area-panel .inline-form { align-items: stretch; }
  .simulado-area-panel .inline-form label,
  .simulado-area-panel .inline-form .game-button { flex: 1 1 100%; width: 100%; }
}

/* =========================================================================
   BIBLIOTECA ARCANA — cenário próprio, alas por cargo e capas semânticas
   ========================================================================= */
.screen-library > .career-strip { display: none; }
.screen-library .page-shell {
  width: min(1740px, 100%);
  max-width: none;
  padding-top: clamp(8px, 1.2vw, 18px);
}

.arcane-library-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.72fr);
  align-items: end;
  min-height: clamp(430px, 36vw, 610px);
  margin-bottom: -44px;
  padding: clamp(30px, 5vw, 76px) clamp(22px, 5vw, 82px) 86px;
  overflow: hidden;
  border: 1px solid rgba(224,102,86, 0.72);
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 10px / 0 round;
  background: #15030d;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.72), inset 0 0 70px rgba(0, 0, 0, 0.68);
  clip-path: none;
}
.arcane-library-hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('../img/biblioteca/biblioteca-arcana-v1.jpg');
  background-position: center 48%;
  background-size: cover;
  transform: scale(1.015);
  filter: saturate(1.05) contrast(1.03);
  animation: arcane-library-breathe 18s ease-in-out infinite alternate;
}
.arcane-library-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18,2,11, 0.96) 0%, rgba(25,4,16, 0.87) 30%, rgba(25,4,16, 0.3) 62%, rgba(16,2,10, 0.72) 100%),
    linear-gradient(0deg, rgba(18,2,11, 0.96) 0%, transparent 52%, rgba(18,2,11, 0.4) 100%);
}
.arcane-library-hero::after {
  content: "";
  position: absolute;
  inset: auto 5% 48px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(251,84,181, 0.55), #f27e6f, rgba(242,96,181, 0.55), transparent);
  box-shadow: 0 0 16px rgba(251,84,181, 0.42);
}
.arcane-library-hero__content { min-width: 0; max-width: 720px; text-shadow: 0 3px 14px #000; }
.arcane-library-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fc81c9;
  font: 700 11px/1.2 'Oswald', sans-serif;
  letter-spacing: 0.2em;
}
.arcane-library-hero h1 {
  max-width: 760px;
  margin: 10px 0 8px;
  color: #ffb2a8;
  font: clamp(32px, 4.4vw, 68px)/0.98 'CinzelDecorativa', 'Cinzel', Georgia, serif;
  letter-spacing: 0.015em;
  text-shadow: 0 2px 0 #38240c, 0 0 24px rgba(240,109,92, 0.34), 0 8px 28px #000;
}
.arcane-library-hero__content > p {
  max-width: 680px;
  margin: 0;
  color: #f3ddea;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.65;
}
.arcane-library-hero__path {
  display: flex;
  align-items: center;
  gap: 9px 14px;
  flex-wrap: wrap;
  width: fit-content;
  margin-top: 18px;
  padding: 8px 12px;
  color: #e7c9db;
  border: 1px solid rgba(237,99,180, 0.3);
  background: rgba(26,3,16, 0.76);
  box-shadow: inset 0 0 18px rgba(182,37,122, 0.1);
}
.arcane-library-hero__path span { font-size: 11px; color: #bc92aa; }
.arcane-library-hero__path strong { color: #f48576; font-family: 'Cinzel', Georgia, serif; }
.arcane-library-hero__path a { color: #f473be; font-size: 11px; font-weight: 800; text-decoration: none; }
.arcane-library-hero__path a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  margin-block: -7px;
}

.arcane-library-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(610px, 100%);
  margin-top: 16px;
  padding: 5px 5px 5px 12px;
  border: 1px solid rgba(224,102,86, 0.5);
  border-radius: 4px;
  background: rgba(20,2,12, 0.88);
  box-shadow: inset 0 0 22px rgba(157,35,106, 0.12), 0 8px 22px rgba(0, 0, 0, 0.32);
}
.arcane-library-search .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.arcane-library-search input {
  min-width: 0;
  flex: 1;
  padding: 9px 5px;
  color: #ffedf7;
  border: 0;
  outline: 0;
  background: transparent;
}
.arcane-library-search button {
  min-height: 40px;
  padding: 7px 18px;
  color: #240703;
  font: 800 11px/1 'Oswald', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid #f18678;
  background: linear-gradient(180deg, #f5a69b, #bb3a29);
  cursor: pointer;
}
.arcane-library-search:focus-within { border-color: #f769bc; box-shadow: 0 0 0 2px rgba(239,87,176, 0.13), 0 0 24px rgba(239,87,176, 0.15); }

.arcane-library-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 8px;
  align-self: end;
  justify-self: end;
  width: min(430px, 100%);
  margin-bottom: 8px;
}
.arcane-library-hero__stats article {
  position: relative;
  min-width: 0;
  padding: 13px 14px 11px;
  text-align: center;
  border: 1px solid rgba(217,89,72, 0.46);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(52,12,35, 0.9), rgba(24,4,16, 0.94));
  box-shadow: inset 0 0 18px rgba(227,74,163, 0.08), 0 8px 20px rgba(0, 0, 0, 0.36);
}
.arcane-library-hero__stats article::before {
  content: "◆";
  position: absolute;
  top: -7px;
  left: 50%;
  color: #ef5bb1;
  font-size: 11.5px;
  transform: translateX(-50%);
}
.arcane-library-hero__stats strong { display: block; color: #f58d7f; font: 700 24px/1 'Cinzel', Georgia, serif; }
.arcane-library-hero__stats small { display: block; margin-top: 6px; color: #cfabc0; font: 600 11.5px/1.2 'Oswald', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }

.arcane-bookcase {
  position: relative;
  z-index: 2;
  padding: clamp(16px, 2.2vw, 34px);
  border: 1px solid rgba(201,78,62, 0.7);
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 9px / 0 round;
  clip-path: none;
  background:
    radial-gradient(circle at 50% 0, rgba(135,36,94, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(33,7,22, 0.98), rgba(21,3,13, 0.985)),
    repeating-linear-gradient(90deg, rgba(99, 64, 26, 0.16) 0 2px, transparent 2px 9px);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6), 0 24px 48px rgba(0, 0, 0, 0.55);
}
.arcane-bookcase__plate,
.screen-library .bookcase__plate {
  min-width: 0;
  margin: 0 0 14px;
  padding: 14px 18px;
  background-image: linear-gradient(90deg, rgba(75,20,52, 0.96), rgba(49,11,33, 0.9) 60%, rgba(36, 23, 10, 0.86)), url('../img/tema/edital.svg');
  background-position: center, right -30px center;
  background-size: auto, auto 190%;
  border: 1px solid rgba(227,107,91, 0.48);
}
.arcane-bookcase__plate > div { min-width: 0; flex: 1; }
.arcane-bookcase__plate p { margin: 3px 0 0; color: #cfafc2; font-size: 11px; }

.library-guide {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 12px clamp(12px, 2vw, 24px);
  border: 1px solid rgba(208,76,153, 0.2);
  background: rgba(28,4,18, 0.66);
}
.library-guide > div { display: grid; gap: 2px; text-align: center; }
.library-guide small { color: #e55cac; font: 700 10.5px/1 'Oswald', sans-serif; letter-spacing: 0.16em; }
.library-guide strong { color: #db988f; font: 600 12px/1.2 'Cinzel', Georgia, serif; }
.library-guide > span { color: #a73728; }

.library-wings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 22px;
}
.library-wing {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 66px;
  padding: 9px 11px;
  color: #e2c9d8;
  text-decoration: none;
  border: 1px solid rgba(168,129,152, 0.24);
  background: linear-gradient(135deg, rgba(59,15,41, 0.88), rgba(27,5,18, 0.92));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.library-wing:hover,
.library-wing:focus-visible { z-index: 2; transform: translateY(-2px); border-color: #eb66b4; outline: none; }
.library-wing.is-selected {
  border-color: #e57061;
  background: linear-gradient(135deg, rgba(55,19,14, 0.94), rgba(46,10,31, 0.94));
  box-shadow: inset 0 0 24px rgba(224,92,74, 0.12), 0 0 18px rgba(224,92,74, 0.12);
}
.library-wing__sigil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #f27e6f;
  border: 1px solid rgba(226,94,76, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(121,40,87, 0.78), rgba(25,5,17, 0.96) 70%);
  box-shadow: inset 0 0 14px rgba(236,79,171, 0.12);
}
.library-wing > span:nth-child(2) { min-width: 0; }
.library-wing small { display: block; color: #e272b3; font: 600 10.5px/1.2 'Oswald', sans-serif; letter-spacing: 0.12em; }
.library-wing strong { display: block; margin-top: 3px; color: #eab4ad; font: 600 12px/1.16 'Cinzel', Georgia, serif; overflow-wrap: anywhere; }
.library-wing > em { color: #b690a6; font-size: 10.5px; font-style: normal; white-space: nowrap; }
.library-wing__profile {
  position: absolute;
  top: -7px;
  right: 7px;
  padding: 2px 7px;
  color: #210703;
  font: 800 11px/1.2 'Oswald', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f39b8f, #b73625);
  box-shadow: 0 2px 7px #000;
}

.arcane-collection-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 16px;
  padding: 12px 16px;
  border-top: 1px solid rgba(214,89,72, 0.42);
  border-bottom: 1px solid rgba(214,89,72, 0.42);
  background: linear-gradient(90deg, rgba(42,15,11, 0.5), transparent 75%);
}
.arcane-collection-heading__seal {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  color: #ed66b5;
  border: 1px solid #b84131;
  transform: rotate(45deg);
  background: #29071b;
}
.arcane-collection-heading__seal .ico { transform: rotate(-45deg); }
.arcane-collection-heading > div { min-width: 0; }
.arcane-collection-heading small { color: #ef6db9; font: 700 10.5px/1 'Oswald', sans-serif; letter-spacing: 0.17em; }
.arcane-collection-heading h2 { margin: 3px 0; color: #f1968a; font-size: clamp(20px, 2vw, 29px); }
.arcane-collection-heading p { margin: 0; color: #c49fb5; font-size: 12px; }

.arcane-shelf { margin: 0 0 24px; }
.arcane-shelf__label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid rgba(194,74,58, 0.4);
  background: linear-gradient(90deg, rgba(45, 29, 10, 0.8), rgba(44,10,30, 0.64));
}
.arcane-shelf__label > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  color: #ed7869;
  border: 1px solid rgba(224,90,72, 0.42);
  border-radius: 50%;
  background: #29081b;
}
.arcane-shelf__label > div { min-width: 0; flex: 1; }
.arcane-shelf__label small { color: #e272b3; font: 600 10.5px/1 'Oswald', sans-serif; letter-spacing: 0.13em; }
.arcane-shelf__label h3 { margin: 2px 0 0; color: #e9aea6; font: 600 14px/1.25 'Cinzel', Georgia, serif; }
.arcane-shelf__label > em { color: #ba94aa; font-size: 11.5px; font-style: normal; white-space: nowrap; }

.screen-library .shelf__books.arcane-books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: stretch;
  gap: clamp(10px, 1.4vw, 18px);
  min-height: 0;
  padding: 18px 14px 22px;
  border: 0;
  border-bottom: 12px solid #3c2510;
  background:
    linear-gradient(180deg, rgba(47,10,32, 0.54), rgba(23,4,15, 0.82)),
    radial-gradient(ellipse at 50% 100%, rgba(155,48,34, 0.18), transparent 60%);
  box-shadow: inset 0 -5px 0 #68431d, inset 0 -7px 0 #211207, 0 13px 17px -10px #000;
}

.screen-library .book--arcane {
  --book-accent: #ec6bb6;
  --book-accent-rgb: 104, 216, 239;
  --book-gold: #df6a5b;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 142px minmax(142px, 1fr);
  justify-content: stretch;
  align-content: stretch;
  width: auto;
  min-width: 0;
  min-height: 294px;
  padding: 0;
  overflow: visible;
  color: #fdeef7;
  border: 1px solid color-mix(in srgb, var(--book-accent) 48%, #812a1f);
  border-radius: 4px 8px 8px 4px;
  background: linear-gradient(145deg, #42112e, #200716 58%, #14020c);
  box-shadow: inset 5px 0 0 rgba(255, 255, 255, 0.05), inset -10px 0 20px rgba(0, 0, 0, 0.45), 0 13px 22px rgba(0, 0, 0, 0.45);
  transform: none;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.screen-library .book--arcane:hover,
.screen-library .book--arcane:focus-visible {
  z-index: 3;
  outline: 0;
  filter: brightness(1.07) saturate(1.08);
  transform: translateY(-7px) rotate(-0.35deg);
  box-shadow: 0 0 0 1px var(--book-accent), 0 0 28px rgba(var(--book-accent-rgb), 0.22), 0 20px 28px rgba(0, 0, 0, 0.6);
}
.book__aura {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--book-accent-rgb), 0.22), transparent 68%);
  filter: blur(12px);
  opacity: 0.48;
}
.book__cover {
  position: relative;
  display: grid;
  place-items: center;
  margin: 8px 8px 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--book-accent) 55%, #c75242);
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--book-accent-rgb), 0.2), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 30%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 7px),
    linear-gradient(145deg, #4d1837, #210817 65%, #13030c);
  box-shadow: inset 0 0 25px #000, inset 0 0 0 5px rgba(194,70,54, 0.13);
}
.book__cover::before,
.book__cover::after {
  content: "";
  position: absolute;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(228,104,88, 0.5);
  transform: rotate(45deg);
}
.book__cover::before { top: -40px; left: -40px; }
.book__cover::after { right: -40px; bottom: -40px; }
.screen-library .book__band {
  position: absolute;
  inset: 8px 6px auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--book-gold), transparent);
  box-shadow: 0 0 8px rgba(235,108,91, 0.45);
}
.book__runes {
  position: absolute;
  inset: 13px;
  display: grid;
  place-items: center;
  color: rgba(230,115,100, 0.34);
  font-size: 72px;
  line-height: 1;
  transform: rotate(45deg);
}
.book__sigil {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  color: #ffeff8;
  border: 2px solid var(--book-gold);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(var(--book-accent-rgb), 0.78), #210817 68%);
  box-shadow: 0 0 0 4px rgba(23,4,15, 0.82), 0 0 0 5px rgba(224,96,79, 0.45), 0 0 22px rgba(var(--book-accent-rgb), 0.4);
}
.book__corners::before,
.book__corners::after {
  content: "◆";
  position: absolute;
  bottom: 7px;
  color: #d75d4d;
  font-size: 11px;
}
.book__corners::before { left: 8px; }
.book__corners::after { right: 8px; }
.book__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 12px 11px;
  background: linear-gradient(180deg, rgba(31,6,21, 0.28), rgba(15,1,9, 0.74));
}
.book__realm { color: var(--book-accent); font: 700 11px/1 'Oswald', sans-serif; letter-spacing: 0.16em; }
.screen-library .book__title {
  display: block;
  margin-top: 7px;
  color: #f1b1a9;
  font: 600 13px/1.22 'Cinzel', Georgia, serif;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0 2px 5px #000;
  overflow-wrap: anywhere;
}
.screen-library .book__meta { margin-top: 6px; color: #c1a0b3; font-size: 11px; opacity: 1; }
.book__progress-text { margin-top: auto; padding-top: 9px; color: #d2bac8; font-size: 10.5px; }
.screen-library .book__bar { height: 4px; margin-top: 4px; border: 1px solid rgba(173,109,146, 0.25); background: #0c0107; }
.screen-library .book__bar i { background: linear-gradient(90deg, var(--book-accent), var(--book-gold)); box-shadow: 0 0 7px var(--book-accent); }
.book__action { display: flex; justify-content: space-between; margin-top: 8px; color: #e37364; font: 700 10.5px/1 'Oswald', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.book__action b { color: var(--book-accent); font-size: 15px; }

.book--linguagem { --book-accent: #e56453; --book-accent-rgb: 229, 178, 83; }
.book--tecnologia { --book-accent: #fc80c8; --book-accent-rgb: 125, 141, 255; }
.book--regulacao { --book-accent: #e663af; --book-accent-rgb: 96, 216, 233; }
.book--gestao { --book-accent: #db874e; --book-accent-rgb: 219, 135, 78; }
.book--tesouro { --book-accent: #64d39a; --book-accent-rgb: 100, 211, 154; }
.book--economia { --book-accent: #fda1d7; --book-accent-rgb: 159, 163, 255; }
.book--justica { --book-accent: #ef60b3; --book-accent-rgb: 92, 174, 243; }
.book--natureza { --book-accent: #48d3a8; --book-accent-rgb: 72, 211, 168; }
.book--construcao { --book-accent: #d68e61; --book-accent-rgb: 214, 142, 97; }
.book--energia { --book-accent: #fc7fc8; --book-accent-rgb: 150, 124, 255; }

.screen-library .bookcase__source {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  padding-top: 14px;
  text-align: center;
  border-top: 1px solid rgba(202,80,64, 0.25);
}

/* ---------------- Grimório aberto: programa oficial + trilha estudável --- */
.arcane-back-link { margin-bottom: 10px; color: #ec78bc; }
.arcane-volume-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 150px;
  margin-bottom: 14px;
  padding: 20px clamp(18px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(222,97,80, 0.6);
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 7px / 0 round;
  background:
    linear-gradient(90deg, rgba(27,4,17, 0.97), rgba(36,6,24, 0.82) 62%, rgba(25,9,18, 0.58)),
    url('../img/biblioteca/biblioteca-arcana-v1.jpg') center 48% / cover;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.58), 0 12px 28px rgba(0, 0, 0, 0.42);
}
.arcane-volume-hero__sigil {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: none;
  color: #f179bf;
  border: 2px solid #d55c4c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #671946, #250719 70%);
  box-shadow: 0 0 0 5px rgba(25,5,17, 0.78), 0 0 26px rgba(225,71,161, 0.25);
}
.arcane-volume-hero > div { min-width: 0; flex: 1; }
.arcane-volume-hero small { color: #ea76ba; font: 700 11.5px/1 'Oswald', sans-serif; letter-spacing: 0.13em; }
.arcane-volume-hero h1 { margin: 4px 0; color: #f2988c; font-size: clamp(25px, 3vw, 42px); overflow-wrap: anywhere; }
.arcane-volume-hero p { margin: 0; color: #dac1d0; font-size: 12px; }
.arcane-volume-hero__badge {
  flex: none;
  padding: 7px 10px;
  color: #2b0905;
  font: 800 10.5px/1 'Oswald', sans-serif;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #f39e93, #b43625);
}
.arcane-study-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 14px;
  align-items: start;
}
.arcane-program.open-book { min-width: 0; padding: clamp(18px, 2.2vw, 30px); clip-path: none; }
.arcane-program .program-list { columns: 1; }
.arcane-program .program-item { padding: 9px 0; }
.arcane-program .open-book__foot p { margin: 0; color: #6b3c36; font-size: 12px; }
.arcane-learning-path {
  position: sticky;
  top: 116px;
  min-width: 0;
  max-height: calc(100vh - 130px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(213,85,68, 0.48);
  border-image: url('../img/ui/moldura-ouro.svg') 30 / 5px / 0 round;
  background: linear-gradient(180deg, rgba(47,9,31, 0.98), rgba(23,4,15, 0.985));
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.4), 0 14px 30px rgba(0, 0, 0, 0.42);
  scrollbar-color: #9c3628 #240818;
  scrollbar-width: thin;
}
.arcane-learning-path__head { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid rgba(209,79,62, 0.35); }
.arcane-learning-path__head > span { color: #f077be; }
.arcane-learning-path__head small { color: #e264ad; font: 700 10.5px/1 'Oswald', sans-serif; letter-spacing: 0.14em; }
.arcane-learning-path__head h2 { margin: 3px 0 0; color: #ee978b; font-size: 18px; }
.arcane-learning-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 12px 0; }
.arcane-learning-stats article { min-width: 0; padding: 8px 5px; text-align: center; border: 1px solid rgba(196,78,147, 0.2); background: rgba(24,3,15, 0.55); }
.arcane-learning-stats strong { display: block; color: #f07d6e; font: 700 17px/1 'Cinzel', serif; }
.arcane-learning-stats small { display: block; margin-top: 4px; color: #b992a9; font-size: 11px; }
.arcane-course-cta {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  padding: 9px;
  color: #f1dae7;
  text-decoration: none;
  border: 1px solid rgba(220,89,72, 0.45);
  background: linear-gradient(135deg, rgba(52,17,12, 0.65), rgba(38,6,25, 0.84));
}
.arcane-course-cta > span:first-child { color: #e66c5c; }
.arcane-course-cta span { min-width: 0; }
.arcane-course-cta small,
.arcane-course-cta em { display: block; color: #ae839c; font-size: 11px; font-style: normal; }
.arcane-course-cta strong { display: block; margin: 2px 0; color: #f0a298; font-size: 11.5px; overflow-wrap: anywhere; }
.arcane-course-cta > b { color: #ec73ba; font-size: 20px; }
.arcane-topic-route { display: grid; gap: 6px; }
.arcane-topic-group { border: 1px solid rgba(175,92,140, 0.22); background: rgba(25,4,16, 0.62); }
.arcane-topic-group > summary {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  list-style: none;
  cursor: pointer;
}
.arcane-topic-group > summary::-webkit-details-marker { display: none; }
.arcane-topic-group > summary > span { display: grid; place-items: center; width: 24px; height: 24px; color: #2c071d; font: 800 10.5px/1 'Oswald', sans-serif; border-radius: 50%; background: #e86cb4; }
.arcane-topic-group > summary strong { color: #ebd8e3; font-size: 11.5px; line-height: 1.3; }
.arcane-topic-group > summary small { color: #d96556; font-size: 11px; }
.arcane-topic-group > div { display: grid; gap: 3px; padding: 0 8px 8px 41px; }
.arcane-topic-link { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; padding: 7px 8px; color: #ea74b9; font-size: 10.5px; text-decoration: none; border-left: 2px solid #b63e2e; background: rgba(74,19,51, 0.38); }
.arcane-topic-link span { min-width: 0; color: #e1c9d7; overflow-wrap: anywhere; }
.arcane-topic-link small { flex: none; color: #a9859a; font-size: 11px; }
.arcane-learning-empty { padding: 28px 12px; text-align: center; color: #bfa0b2; }
.arcane-learning-empty .ico { color: #d56050; }
.arcane-learning-empty strong { display: block; margin: 9px 0 4px; color: #e69e94; }
.arcane-learning-empty p { margin: 0; font-size: 11px; line-height: 1.5; }
.arcane-learning-laws { display: grid; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(205,80,63, 0.3); }
.arcane-learning-laws strong { color: #dd8276; font-size: 11.5px; }
.arcane-learning-laws a { color: #de90bd; font-size: 11px; text-decoration: none; }

@keyframes arcane-library-breathe {
  from { transform: scale(1.015); filter: saturate(1.02) brightness(0.96); }
  to { transform: scale(1.045); filter: saturate(1.11) brightness(1.04); }
}

@media (max-width: 1180px) {
  .arcane-library-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr); }
  .library-wings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arcane-study-layout { grid-template-columns: minmax(0, 1fr); }
  .arcane-learning-path { position: static; max-height: none; }
}

@media (max-width: 760px) {
  .screen-library .page-shell { padding-inline: 6px; }
  .arcane-library-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 540px;
    margin-bottom: -28px;
    padding: 38px 20px 62px;
  }
  .arcane-library-hero__art { background-position: 54% 45%; }
  .arcane-library-hero::before {
    background: linear-gradient(0deg, rgba(18,2,11, 0.98) 0%, rgba(24,4,16, 0.82) 62%, rgba(18,2,11, 0.43) 100%);
  }
  .arcane-library-hero h1 { max-width: 560px; }
  .arcane-library-hero__stats { justify-self: stretch; width: 100%; margin-top: 14px; }
  .arcane-bookcase { padding: 16px 10px; }
  .arcane-bookcase__plate { align-items: flex-start; flex-wrap: wrap; }
  .arcane-bookcase__plate .bookcase__status { margin-left: 56px; }
  .library-guide { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .library-guide > span { display: none; }
  .library-wings { gap: 6px; }
  .library-wing { grid-template-columns: 38px minmax(0, 1fr); min-height: 72px; padding: 8px; }
  .library-wing__sigil { width: 36px; height: 36px; }
  .library-wing > em { grid-column: 2; }
  .screen-library .shelf__books.arcane-books { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 7px 18px; }
  .screen-library .book--arcane { grid-template-rows: 122px minmax(142px, 1fr); min-height: 270px; }
  .book__sigil { width: 58px; height: 58px; }
  .arcane-volume-hero { align-items: flex-start; flex-wrap: wrap; }
  .arcane-volume-hero__badge { margin-left: 88px; }
  .open-book__head { align-items: flex-start; }
}

@media (max-width: 520px) {
  .arcane-library-hero { min-height: 560px; padding-inline: 15px; }
  .arcane-library-hero h1 { font-size: 34px; }
  .arcane-library-hero__path { align-items: flex-start; display: grid; }
  .arcane-library-search { padding-left: 9px; }
  .arcane-library-search button { padding-inline: 12px; }
  .arcane-library-hero__stats article { padding-inline: 7px; }
  .arcane-library-hero__stats strong { font-size: 20px; }
  .library-guide strong { font-size: 11.5px; }
  .library-wings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-wing strong { font-size: 11.5px; }
  .library-wing > em { white-space: normal; }
  .arcane-collection-heading { align-items: flex-start; padding-inline: 8px; }
  .arcane-collection-heading__seal { width: 40px; height: 40px; }
  .arcane-shelf__label { align-items: flex-start; }
  .arcane-shelf__label > em { white-space: normal; text-align: right; }
  .screen-library .book__title { font-size: 11px; }
  .screen-library .book__copy { padding-inline: 9px; }
  .arcane-volume-hero { padding-inline: 14px; }
  .arcane-volume-hero__sigil { width: 58px; height: 58px; }
  .arcane-volume-hero__badge { margin-left: 0; }
  .arcane-program.open-book { padding: 15px 13px; }
  .arcane-program .open-book__head { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
  .arcane-program .open-book__seal { width: 44px; height: 44px; }
  .arcane-program .program-item { gap: 7px; }
  .arcane-program .program-item__text { font-size: 11.5px; }
}

@media (max-width: 350px) {
  .library-wings,
  .screen-library .shelf__books.arcane-books { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .arcane-library-hero__art { animation: none; }
  .screen-library .book--arcane { transition: none; }
}

/* ========================================================================
   BIBLIOTECA ESTANTE V2 — um móvel, nove prateleiras e livros físicos
   ======================================================================== */
.screen-library .library-hero-v2 {
  position: relative;
  isolation: isolate;
  min-height: 430px;
  margin-bottom: 14px;
  padding: clamp(34px, 5vw, 74px) clamp(26px, 6vw, 92px);
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 8px / 0 round;
  background: #14020c;
}
.screen-library .library-hero-v2__art {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  filter: saturate(1.07) contrast(1.04) brightness(0.83);
  animation: library-shelf-breathe 14s ease-in-out infinite alternate;
}
.screen-library .library-hero-v2::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(16,1,10, 0.97) 0%, rgba(22,3,14, 0.9) 36%, rgba(22,3,14, 0.34) 66%, rgba(14,1,9, 0.56) 100%),
    linear-gradient(0deg, rgba(14,1,9, 0.94), transparent 52%);
}
.screen-library .library-hero-v2::after {
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0.36;
  background:
    radial-gradient(circle at 78% 22%, rgba(244,83,177, 0.18), transparent 16%),
    radial-gradient(circle at 72% 72%, rgba(150, 87, 240, 0.14), transparent 18%);
  mix-blend-mode: screen;
}
.screen-library .library-hero-v2 .arcane-library-hero__content,
.screen-library .library-hero-v2 .arcane-library-hero__stats { z-index: 2; }
.screen-library .library-hero-v2 .arcane-library-hero__content { max-width: 690px; }
.screen-library .library-hero-v2 h1 {
  max-width: 680px;
  font-size: clamp(42px, 5.5vw, 78px);
  line-height: 0.96;
  text-wrap: balance;
}

.screen-library .library-grand-bookcase {
  position: relative;
  max-width: none;
  padding: clamp(12px, 2vw, 26px);
  overflow: hidden;
  border: 1px solid #9d3a2d;
  border-image: url('../img/ui/moldura-cidade.svg') 48 / 9px / 0 round;
  background:
    linear-gradient(90deg, rgba(72, 43, 16, 0.26), transparent 6% 94%, rgba(72, 43, 16, 0.26)),
    radial-gradient(ellipse at 50% 0%, rgba(189,59,135, 0.11), transparent 34%),
    #16030e;
  box-shadow: inset 0 0 70px #000, 0 24px 48px rgba(0, 0, 0, 0.55);
}
.screen-library .library-grand-bookcase::before,
.screen-library .library-grand-bookcase::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  pointer-events: none;
  background: linear-gradient(90deg, #271406, #9a6428 28%, #251207 58%, #080401);
  box-shadow: inset 0 0 0 1px rgba(236,108,91, 0.32), 0 0 18px #000;
}
.screen-library .library-grand-bookcase::before { left: 2px; }
.screen-library .library-grand-bookcase::after { right: 2px; transform: scaleX(-1); }
.screen-library .library-grand-bookcase > * { position: relative; z-index: 1; }

.screen-library .library-archive-ribbon {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  margin: 4px 14px 12px;
  padding: 11px 16px;
  border: 1px solid rgba(218,93,76, 0.58);
  background:
    linear-gradient(90deg, rgba(68, 42, 14, 0.88), rgba(46,8,30, 0.94) 35%, rgba(25,4,16, 0.97)),
    url('../img/ui/divisor-ouro.svg') center bottom / 240px 24px repeat-x;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.36);
}
.screen-library .library-archive-ribbon__seal {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #f173bc;
  border: 1px solid #d35d4d;
  border-radius: 50%;
  background: radial-gradient(circle, #5b183f, #180510 70%);
  box-shadow: 0 0 18px rgba(232,71,165, 0.24);
}
.screen-library .library-archive-ribbon > div { min-width: 0; }
.screen-library .library-archive-ribbon small {
  color: #ea76ba;
  font: 700 10.5px/1 'Oswald', sans-serif;
  letter-spacing: 0.16em;
}
.screen-library .library-archive-ribbon strong {
  display: block;
  margin-top: 3px;
  color: #f1968a;
  font: 700 17px/1.15 'Cinzel', Georgia, serif;
}
.screen-library .library-archive-ribbon p { margin: 4px 0 0; color: #b995aa; font-size: 11.5px; }

.screen-library .library-shelf-map {
  display: flex;
  gap: 8px;
  margin: 0 14px 18px;
  padding: 9px 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #9b392c #200816;
  border-block: 1px solid rgba(200,76,60, 0.34);
  background: linear-gradient(90deg, rgba(29,5,19, 0.96), rgba(58,13,39, 0.78), rgba(29,5,19, 0.96));
}
.screen-library .library-shelf-map__item {
  position: relative;
  display: grid;
  flex: 1 0 106px;
  grid-template-rows: 36px minmax(26px, auto);
  justify-items: center;
  align-items: center;
  min-width: 0;
  min-height: 72px;
  padding: 6px 8px;
  color: #caa9bc;
  text-align: center;
  text-decoration: none;
  border-inline: 1px solid rgba(185,68,52, 0.22);
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.screen-library .library-shelf-map__item > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #d86657;
  border: 1px solid rgba(215,90,73, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle, #52193a, #1b0512 72%);
}
.screen-library .library-shelf-map__item strong {
  max-width: 118px;
  font: 600 10.5px/1.25 'Cinzel', Georgia, serif;
  overflow-wrap: anywhere;
}
.screen-library .library-shelf-map__item:hover,
.screen-library .library-shelf-map__item:focus-visible {
  color: #f0978b;
  outline: 0;
  background: rgba(107,42,80, 0.25);
  transform: translateY(-2px);
}
.screen-library .library-shelf-map__item.is-current,
.screen-library .library-shelf-map__item.is-profile {
  color: #f59285;
  background: linear-gradient(180deg, rgba(181,52,35, 0.22), rgba(64,14,43, 0.22));
}
.screen-library .library-shelf-map__item.is-current::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: 28px;
  height: 3px;
  background: #f066b7;
  box-shadow: 0 0 10px #e34ba4;
}

.screen-library .library-stacks { display: grid; gap: 18px; margin: 0 14px; }
.screen-library .library-shelf {
  --shelf-accent: #ec6ab6;
  --shelf-accent-rgb: 103, 217, 239;
  position: relative;
  min-width: 0;
  scroll-margin-top: 122px;
  border: 1px solid rgba(198,77,61, 0.54);
  background: #17040f;
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.62), 0 16px 22px -13px #000;
}
.screen-library .library-shelf[data-cargo="administracao"] { --shelf-accent: #e25e4c; --shelf-accent-rgb: 226, 167, 76; }
.screen-library .library-shelf[data-cargo="contabilidade"] { --shelf-accent: #58cf8d; --shelf-accent-rgb: 88, 207, 141; }
.screen-library .library-shelf[data-cargo="direito"] { --shelf-accent: #fb72c2; --shelf-accent-rgb: 110, 185, 255; }
.screen-library .library-shelf[data-cargo="economia"] { --shelf-accent: #fc8dce; --shelf-accent-rgb: 178, 138, 255; }
.screen-library .library-shelf[data-cargo="eng-ambiental"] { --shelf-accent: #55d5b4; --shelf-accent-rgb: 85, 213, 180; }
.screen-library .library-shelf[data-cargo="eng-civil"] { --shelf-accent: #dc9565; --shelf-accent-rgb: 220, 149, 101; }
.screen-library .library-shelf[data-cargo="eng-eletrica"] { --shelf-accent: #fc81c9; --shelf-accent-rgb: 152, 126, 255; }
.screen-library .library-shelf[data-cargo="tecnologia-da-informacao"] { --shelf-accent: #ee5cb1; --shelf-accent-rgb: 88, 217, 242; }
.screen-library .library-shelf.is-profile {
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.62), 0 0 0 1px var(--shelf-accent), 0 0 24px rgba(var(--shelf-accent-rgb), 0.2);
}
.screen-library .library-shelf.is-focused .library-shelf__header::after {
  content: "";
  position: absolute;
  inset: auto 15% -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--shelf-accent), transparent);
  box-shadow: 0 0 10px var(--shelf-accent);
}
.screen-library .library-shelf__header {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(211,83,66, 0.5);
  background:
    linear-gradient(90deg, rgba(65, 40, 13, 0.94), rgba(50,10,33, 0.94) 42%, rgba(26,4,17, 0.98)),
    url('../img/ui/divisor-ouro.svg') right center / 240px 24px no-repeat;
}
.screen-library .library-shelf__sigil {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--shelf-accent);
  border: 1px solid #c74d3d;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--shelf-accent-rgb), 0.26), #1d0513 70%);
  box-shadow: inset 0 0 12px #000, 0 0 12px rgba(var(--shelf-accent-rgb), 0.2);
}
.screen-library .library-shelf__identity { min-width: 0; }
.screen-library .library-shelf__identity small {
  display: block;
  color: var(--shelf-accent);
  font: 700 10.5px/1 'Oswald', sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.screen-library .library-shelf__identity h2 {
  margin: 4px 0 0;
  color: #f0a49a;
  font: 700 clamp(14px, 1.35vw, 19px)/1.2 'Cinzel', Georgia, serif;
  overflow-wrap: anywhere;
}
.screen-library .library-shelf__meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  color: #b896aa;
  font-size: 10.5px;
}
.screen-library .library-shelf__meta b {
  padding: 3px 8px;
  color: #1b0411;
  font: 800 11px/1 'Oswald', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--shelf-accent);
}
.screen-library .library-shelf__viewport {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  scrollbar-color: #aa3b2c #1c0814;
}
.screen-library .library-shelf__viewport:focus-visible { outline: 2px solid var(--shelf-accent); outline-offset: -3px; }
.screen-library .library-shelf__rail {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(13px, 1.4vw, 22px);
  width: max-content;
  min-width: 100%;
  min-height: 294px;
  padding: 34px 44px 25px;
  background:
    linear-gradient(180deg, rgba(16,2,10, 0.06), rgba(11,1,7, 0.3)),
    url('../img/biblioteca/prateleira-painel-v2.jpg') center / cover no-repeat;
  scroll-snap-type: inline proximity;
}

.screen-library .library-book.book--arcane {
  --book-accent: var(--shelf-accent);
  --book-accent-rgb: var(--shelf-accent-rgb);
  position: relative;
  display: block;
  flex: 0 0 158px;
  width: 158px;
  min-width: 158px;
  min-height: 0;
  height: 232px;
  padding: 0;
  overflow: visible;
  color: #fdedf6;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-snap-align: start;
  transform: translateY(0);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.screen-library .library-book.book--linguagem { --book-accent: #f07160; --book-accent-rgb: 240, 185, 96; }
.screen-library .library-book.book--tecnologia { --book-accent: #f26dba; --book-accent-rgb: 105, 223, 245; }
.screen-library .library-book.book--regulacao { --book-accent: #bfd971; --book-accent-rgb: 113, 217, 210; }
.screen-library .library-book.book--gestao { --book-accent: #e79a58; --book-accent-rgb: 231, 154, 88; }
.screen-library .library-book.book--tesouro { --book-accent: #6bdd9f; --book-accent-rgb: 107, 221, 159; }
.screen-library .library-book.book--economia { --book-accent: #c08cf3; --book-accent-rgb: 192, 140, 243; }
.screen-library .library-book.book--justica { --book-accent: #fc77c4; --book-accent-rgb: 115, 186, 255; }
.screen-library .library-book.book--natureza { --book-accent: #5cdbb3; --book-accent-rgb: 92, 219, 179; }
.screen-library .library-book.book--construcao { --book-accent: #e49b6e; --book-accent-rgb: 228, 155, 110; }
.screen-library .library-book.book--energia { --book-accent: #fc94d1; --book-accent-rgb: 171, 145, 255; }
.screen-library .library-book.book--arcane:hover,
.screen-library .library-book.book--arcane:focus-visible {
  z-index: 4;
  outline: 0;
  filter: brightness(1.09) saturate(1.08);
  transform: translateY(-11px);
  box-shadow: none;
}
.screen-library .library-book.book--arcane:focus-visible {
  outline: 2px solid var(--book-accent);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(20,2,12, 0.92), 0 0 18px rgba(var(--book-accent-rgb), 0.62);
}
.screen-library .library-book__volume {
  position: absolute;
  inset: 0 0 8px;
  overflow: hidden;
  border: 1px solid rgba(235,122,107, 0.68);
  border-radius: 4px 8px 7px 3px;
  background: #0b0207;
  box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.05), inset -8px 0 14px rgba(0, 0, 0, 0.42), 0 8px 16px rgba(0, 0, 0, 0.66);
}
.screen-library .library-book__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.82);
  transition: filter 0.2s ease, transform 0.3s ease;
}
.screen-library .library-book:hover .library-book__art,
.screen-library .library-book:focus-visible .library-book__art { filter: saturate(1.12) brightness(0.98); transform: scale(1.025); }
.screen-library .library-book__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 14% 84%, rgba(0, 0, 0, 0.35)),
    linear-gradient(0deg, rgba(11,1,7, 0.97) 0%, rgba(17,2,11, 0.76) 42%, transparent 70%);
}
.screen-library .library-book__number {
  position: absolute;
  top: 8px;
  right: 9px;
  color: rgba(246,147,134, 0.78);
  font: 700 11px/1 'Cinzel', serif;
  text-shadow: 0 2px 4px #000;
}
.screen-library .library-book__sigil {
  position: absolute;
  top: 8px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: #feeaf6;
  border: 1px solid rgba(234,120,105, 0.84);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--book-accent-rgb), 0.72), #1b0411 72%);
  box-shadow: 0 0 12px rgba(var(--book-accent-rgb), 0.48);
}
.screen-library .library-book__sigil .ico { width: 16px; height: 16px; }
.screen-library .library-book__title {
  position: absolute;
  right: 8px;
  bottom: 58px;
  left: 8px;
  min-height: 69px;
  padding: 7px 6px 6px;
  text-align: center;
  border-block: 1px solid rgba(218,101,85, 0.48);
  background: linear-gradient(90deg, rgba(14,1,9, 0.84), rgba(37,8,25, 0.92), rgba(14,1,9, 0.84));
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.52);
}
.screen-library .library-book__title small {
  display: block;
  color: var(--book-accent);
  font: 700 11px/1 'Oswald', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.screen-library .library-book__title strong {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: #f2aea5;
  font: 700 11.5px/1.12 'Cinzel', Georgia, serif;
  text-shadow: 0 2px 4px #000;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.screen-library .library-book__facts {
  position: absolute;
  right: 10px;
  bottom: 38px;
  left: 10px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: #ccafc0;
  font-size: 11px;
}
.screen-library .library-book__facts b { min-width: 0; font-weight: 500; }
.screen-library .library-book__facts em { flex: none; color: var(--book-accent); font-style: normal; font-weight: 800; }
.screen-library .library-book__progress {
  position: absolute;
  right: 10px;
  bottom: 29px;
  left: 10px;
  height: 3px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.78);
  box-shadow: inset 0 0 0 1px rgba(189,129,164, 0.22);
}
.screen-library .library-book__progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--book-accent), #e06b5b);
  box-shadow: 0 0 7px var(--book-accent);
}
.screen-library .library-book__action {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  justify-content: space-between;
  color: #e87a6c;
  font: 700 11px/1 'Oswald', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.screen-library .library-book__action b { color: var(--book-accent); font-size: 13px; }
.screen-library .library-book__pages {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 7px;
  height: 8px;
  border: 1px solid #732f26;
  border-radius: 0 0 4px 3px;
  background: repeating-linear-gradient(0deg, #bd786f 0 1px, #663c36 1px 2px);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.72);
}

.screen-library .library-grand-bookcase .bookcase__source { margin: 24px 14px 8px; }

@keyframes library-shelf-breathe {
  from { transform: scale(1.005); }
  to { transform: scale(1.025); }
}

@media (max-width: 900px) {
  .screen-library .library-hero-v2 {
    grid-template-columns: minmax(0, 1fr);
    min-height: 400px;
    margin-bottom: 10px;
    padding: 34px 22px;
  }
  .screen-library .library-hero-v2__art { object-position: center 44%; }
  .screen-library .library-hero-v2::before {
    background: linear-gradient(0deg, rgba(14,1,9, 0.97), rgba(20,2,12, 0.72) 72%, rgba(14,1,9, 0.48));
  }
  .screen-library .library-hero-v2 h1 { max-width: 620px; font-size: clamp(38px, 9vw, 62px); }
  .screen-library .library-hero-v2 .arcane-library-hero__stats { margin-top: 13px; }
  .screen-library .library-grand-bookcase { padding-inline: 9px; }
  .screen-library .library-archive-ribbon,
  .screen-library .library-shelf-map,
  .screen-library .library-stacks { margin-inline: 7px; }
  .screen-library .library-shelf-map__item { flex-basis: 100px; }
  .screen-library .library-shelf__rail { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .screen-library .library-hero-v2 { min-height: 370px; padding: 28px 14px 22px; }
  .screen-library .library-hero-v2__art { animation: none; }
  .screen-library .library-hero-v2 h1 { font-size: 38px; }
  .screen-library .library-hero-v2 .arcane-library-hero__path { display: flex; align-items: center; }
  .screen-library .library-hero-v2 .arcane-library-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-library .library-archive-ribbon {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 9px;
  }
  .screen-library .library-archive-ribbon__seal { width: 38px; height: 38px; }
  .screen-library .library-archive-ribbon > .status-pill { grid-column: 2; justify-self: start; white-space: normal; }
  .screen-library .library-archive-ribbon strong { font-size: 14px; }
  .screen-library .library-archive-ribbon p { font-size: 11px; }
  .screen-library .library-shelf-map { margin-bottom: 12px; padding-inline: 4px; }
  .screen-library .library-shelf-map__item { flex: 0 0 94px; min-height: 68px; }
  .screen-library .library-stacks { gap: 13px; }
  .screen-library .library-shelf__header {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 62px;
    gap: 9px;
    padding: 8px 9px;
  }
  .screen-library .library-shelf__sigil { width: 36px; height: 36px; }
  .screen-library .library-shelf__identity h2 { font-size: 12px; }
  .screen-library .library-shelf__meta b { display: none; }
  .screen-library .library-shelf__meta { font-size: 11px; }
  .screen-library .library-shelf__viewport { scroll-snap-type: inline mandatory; }
  .screen-library .library-shelf__rail {
    gap: 10px;
    min-height: 254px;
    padding: 27px 20px 21px;
    background-size: auto 100%;
  }
  .screen-library .library-book.book--arcane {
    flex-basis: 137px;
    width: 137px;
    min-width: 137px;
    height: 204px;
  }
  .screen-library .library-book__title { bottom: 54px; min-height: 62px; padding-inline: 5px; }
  .screen-library .library-book__title strong { font-size: 10.5px; }
  .screen-library .library-book__facts { bottom: 35px; font-size: 11px; }
  .screen-library .library-book__progress { bottom: 27px; }
  .screen-library .library-book__action { bottom: 9px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-library .library-hero-v2__art { animation: none; }
  .screen-library .library-book.book--arcane,
  .screen-library .library-book__art { transition: none; }
}

/* === COURSE PIPELINE JSON -> HTML (authenticated course reader) === */
.course-back-link {
  display: inline-flex;
  margin-bottom: 12px;
}

.course-reader {
  overflow: hidden;
  border: 1px solid rgba(232,121,106, 0.56);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(166,210,35, 0.05), transparent 28%),
    linear-gradient(180deg, #250819 0%, #14050e 100%);
  box-shadow: 0 26px 65px rgba(0, 0, 0, 0.52), inset 0 0 0 3px rgba(22,5,15, 0.7);
}

.course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
  gap: 22px;
  align-items: center;
  min-height: 150px;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(232,121,106, 0.4);
  background:
    radial-gradient(circle at 15% 0, rgba(166,210,35, 0.16), transparent 42%),
    linear-gradient(90deg, rgba(61,11,40, 0.98), rgba(32,6,21, 0.98));
}

.course-hero__identity {
  display: flex;
  gap: 17px;
  align-items: center;
  min-width: 0;
}

.course-hero__sigil {
  display: grid;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166,210,35, 0.22), rgba(39,8,26, 0.96) 66%);
  box-shadow: 0 0 26px rgba(166,210,35, 0.2), inset 0 0 0 5px rgba(232,121,106, 0.08);
}

.course-hero__identity small,
.course-page__header small,
.course-toc header small {
  color: var(--cyan-soft);
  font: 600 11px/1.3 'Oswald', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.course-hero h1 {
  margin: 4px 0 3px;
  color: #f6a69b;
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.08;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.course-hero__subtitle {
  margin: 0;
  color: var(--ink-dim);
}

.course-hero__state {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: end;
  padding: 15px;
  border: 1px solid rgba(251,115,194, 0.24);
  border-radius: 12px;
  background: rgba(21,2,13, 0.7);
}

.course-hero__state .course-status { grid-column: 1 / -1; justify-self: start; }
.course-hero__state > strong { color: var(--gold); font: 700 26px/1 'Cinzel', serif; }
.course-hero__state > small { color: var(--ink-dim); text-align: right; }

.course-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--ink-dim);
  font: 600 11.5px/1 'Oswald', sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.course-status--draft,
.course-status--planned { color: #f27868; }
.course-status--reviewed { color: var(--cyan-soft); }
.course-status--published { color: var(--green); }
.course-status--archived { color: #b69bab; }

.course-coverage {
  grid-column: 1 / -1;
  overflow: hidden;
  height: 7px;
  margin-top: 6px;
  border: 1px solid rgba(251,115,194, 0.28);
  border-radius: 999px;
  background: #1c0412;
}

.course-coverage > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--cyan-soft));
  box-shadow: 0 0 12px rgba(251,115,194, 0.55);
}

.course-draft-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 16px;
  align-items: center;
  margin: 14px 18px 0;
  padding: 11px 14px;
  border: 1px solid rgba(242,120,104, 0.45);
  border-radius: 10px;
  color: #f69f94;
  background: rgba(111, 60, 13, 0.22);
}

.course-draft-warning::before {
  grid-row: 1 / 3;
  content: '!';
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-weight: 800;
}

.course-draft-warning p { margin: 0; color: #cba39e; font-size: 13px; }

.course-layout {
  display: grid;
  grid-template-columns: minmax(235px, 300px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}

.course-toc {
  align-self: start;
  overflow: hidden;
  border: 1px solid rgba(105,45,80, 0.92);
  border-radius: 12px;
  background: rgba(28,5,18, 0.92);
}

.course-toc > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 14px;
  border-bottom: 1px solid rgba(105,45,80, 0.76);
}

.course-toc nav { display: grid; padding: 7px; }

.course-toc__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-dim);
  text-decoration: none;
}

.course-toc__item:hover,
.course-toc__item:focus-visible {
  border-color: rgba(251,115,194, 0.3);
  color: var(--ink);
  background: rgba(166,210,35, 0.06);
}

.course-toc__item.is-current {
  border-color: rgba(232,121,106, 0.48);
  color: #f4b3aa;
  background: linear-gradient(90deg, rgba(176,59,44, 0.18), rgba(166,210,35, 0.04));
}

.course-toc__item > span:first-child {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(232,121,106, 0.5);
  border-radius: 50%;
  color: var(--gold);
  font: 700 11px/1 'Cinzel', serif;
}

.course-toc__item strong,
.course-toc__item small { display: block; }
.course-toc__item strong { font-size: 12px; line-height: 1.25; }
.course-toc__item small { margin-top: 3px; color: #a1728d; font-size: 11.5px; }
.course-toc__item em { color: #a1728d; font-size: 10.5px; font-style: normal; white-space: nowrap; }

.course-toc__context {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border-top: 1px solid rgba(105,45,80, 0.76);
  color: var(--ink-dim);
}

.course-toc__context span { color: var(--gold); font: 600 11.5px/1 'Oswald', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.course-toc__context strong { font-size: 11px; }
.course-toc__context small { overflow-wrap: anywhere; color: #996985; font-size: 10.5px; }

.course-page {
  min-width: 0;
  padding: clamp(20px, 4vw, 48px);
  border: 1px solid #8e4f47;
  border-radius: 10px;
  color: #321c29;
  background:
    linear-gradient(90deg, rgba(94,36,28, 0.08), transparent 8%, transparent 92%, rgba(94,36,28, 0.08)),
    repeating-linear-gradient(0deg, rgba(74, 92, 94, 0.025) 0 1px, transparent 1px 25px),
    #eee9d9;
  box-shadow: inset 18px 0 34px rgba(77,31,25, 0.07), 0 18px 35px rgba(0, 0, 0, 0.36);
}

.course-page__header {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(103,45,37, 0.32);
}

.course-page__header small { color: #7e3e63; }
.course-page__header h2 { margin: 5px 0; color: #472539; font-size: clamp(24px, 3vw, 35px); line-height: 1.15; }
.course-page__header p { max-width: 760px; margin: 0; color: #56626b; }
.course-page__header .course-status { flex-shrink: 0; color: #803025; background: rgba(232,121,106, 0.13); }

.course-objectives {
  margin: 20px 0 28px;
  padding: 15px 18px;
  border: 1px solid rgba(120,54,93, 0.32);
  border-radius: 8px;
  background: rgba(207, 229, 222, 0.37);
}

.course-objectives h3 { margin: 0 0 7px; color: #63284a; font-size: 17px; }
.course-objectives ul { margin: 0 0 8px; padding-left: 22px; }
.course-objectives li + li { margin-top: 4px; }
.course-objectives small { color: #627073; }

.course-prose {
  max-width: 860px;
  margin-inline: auto;
  font: 17px/1.72 Georgia, 'Times New Roman', serif;
}

.course-prose__heading {
  margin: 1.55em 0 0.55em;
  color: #49263a;
  line-height: 1.2;
}

.course-prose h2.course-prose__heading { font-size: 28px; }
.course-prose h3.course-prose__heading { font-size: 23px; }
.course-prose h4.course-prose__heading { font-size: 19px; }
.course-prose__paragraph { margin: 0 0 1em; }

.course-list { margin: 18px 0; }
.course-list__title { display: block; margin-bottom: 7px; color: #5d334b; }
.course-list ol,
.course-list ul { margin: 0; padding-left: 28px; }
.course-list li + li { margin-top: 7px; }

.course-callout {
  margin: 21px 0;
  padding: 14px 17px;
  border: 1px solid #a58196;
  border-left: 5px solid #873b67;
  border-radius: 7px;
  background: rgba(225,231,207, 0.52);
}

.course-callout > strong { display: block; margin-bottom: 4px; color: #65274b; font-family: 'Segoe UI', sans-serif; }
.course-callout > p { margin: 0; }
.course-callout--tip { border-left-color: #478d59; background: rgba(207, 232, 207, 0.52); }
.course-callout--warning { border-left-color: #b2722a; background: rgba(241,181,173, 0.55); }
.course-callout--example { border-left-color: #7c5aa0; background: rgba(222, 207, 235, 0.48); }

.course-table-wrap {
  overflow-x: auto;
  margin: 22px 0;
  border: 1px solid rgba(72, 81, 77, 0.34);
  border-radius: 7px;
}

.course-table { width: 100%; border-collapse: collapse; font: 14px/1.45 'Segoe UI', sans-serif; }
.course-table caption { padding: 9px 12px; color: #e9c7c2; font-weight: 700; text-align: left; background: #553246; }
.course-table th { color: #f1bbb4; text-align: left; background: #603e52; }
.course-table th,
.course-table td { padding: 9px 11px; border-right: 1px solid rgba(64, 74, 71, 0.2); border-bottom: 1px solid rgba(64, 74, 71, 0.2); }
.course-table tr:last-child td { border-bottom: 0; }

.course-quote {
  margin: 24px 8%;
  padding: 7px 0 7px 18px;
  border-left: 3px solid #a13f32;
  color: #44535a;
  font-style: italic;
}
.course-quote p { margin: 0; }
.course-quote cite { display: block; margin-top: 7px; font: 12px/1.4 'Segoe UI', sans-serif; }
.course-quote a { color: #762a56; }

.course-figure { margin: 24px auto; text-align: center; }
.course-figure img { display: block; max-width: 100%; max-height: 660px; margin: auto; border: 1px solid #885049; border-radius: 7px; }
.course-figure figcaption { margin-top: 7px; color: #647074; font: 12px/1.4 'Segoe UI', sans-serif; }

.course-quiz {
  margin: 28px 0;
  padding: 18px;
  border: 1px solid rgba(108, 79, 140, 0.42);
  border-radius: 8px;
  background: rgba(224, 213, 236, 0.48);
}
.course-quiz > strong { color: #65487e; font-family: 'Segoe UI', sans-serif; }
.course-quiz > p { margin: 7px 0 10px; }
.course-quiz ol { display: grid; gap: 6px; padding: 0; list-style: none; }
.course-quiz li { display: flex; gap: 9px; align-items: center; padding: 7px 9px; border: 1px solid rgba(101, 72, 126, 0.19); border-radius: 5px; background: rgba(255, 255, 255, 0.36); }
.course-quiz li > span { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #f7f1df; background: #675078; font: 700 11px/1 'Segoe UI', sans-serif; }
.course-quiz details { margin-top: 12px; font: 14px/1.5 'Segoe UI', sans-serif; }
.course-quiz summary { color: #5e3f75; font-weight: 700; cursor: pointer; }

.course-sources {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(103,45,37, 0.32);
}
.course-sources h3 { margin: 0 0 9px; color: #573448; font-size: 17px; }
.course-sources ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.course-sources li { display: grid; }
.course-sources a { color: #772555; font-weight: 700; }
.course-sources small { color: #677277; }

.course-chapter-nav {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(103,45,37, 0.32);
}
.course-chapter-nav__end { color: #6e756f; font-size: 12px; }

.course-edition {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 12px 18px;
  border-top: 1px solid rgba(105,45,80, 0.7);
  color: #a2728e;
  font-size: 11.5px;
  background: rgba(22,3,14, 0.86);
}

.course-colophon {
  margin: 0 18px 18px;
  padding: 14px 16px;
  border: 1px solid rgba(105,45,80, 0.78);
  border-radius: 10px;
  color: #b992a9;
  background: rgba(22,3,14, 0.72);
}
.course-colophon strong { display: block; color: #de897e; }
.course-colophon p { margin: 5px 0; line-height: 1.5; }
.course-colophon small { color: #a2728e; }

@media (max-width: 900px) {
  .course-hero { grid-template-columns: 1fr; }
  .course-hero__state { max-width: 420px; }
  .course-layout { grid-template-columns: 1fr; }
  .course-toc nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .course-back-link,
  .course-sources a,
  .course-quiz summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .course-sources a { padding-block: 7px; }
  .course-quiz summary { width: 100%; padding-block: 7px; }

  .course-hero { padding: 19px 15px; }
  .course-hero__identity { align-items: flex-start; }
  .course-hero__sigil { flex-basis: 48px; width: 48px; height: 48px; }
  .course-hero__sigil .ico--lg { width: 26px; height: 26px; }
  .course-hero h1 { font-size: 25px; }
  .course-draft-warning { grid-template-columns: 30px minmax(0, 1fr); margin-inline: 9px; }
  .course-layout { gap: 10px; padding: 9px; }
  .course-colophon { margin: 0 9px 9px; }
  .course-toc nav { grid-template-columns: 1fr; }
  .course-page { padding: 22px 16px; }
  .course-page__header { display: grid; }
  .course-prose { font-size: 16px; }
  .course-table { min-width: 0; table-layout: fixed; font-size: 12px; }
  .course-table th,
  .course-table td { padding: 7px 6px; overflow-wrap: anywhere; hyphens: auto; }
  .course-chapter-nav { align-items: stretch; flex-direction: column; }
  .course-chapter-nav > * { width: 100%; }
}

@media print {
  .course-back-link,
  .course-toc,
  .course-chapter-nav { display: none !important; }
  .course-reader,
  .course-layout,
  .course-page { display: block; border: 0; box-shadow: none; background: #fff; }
  .course-hero { min-height: 0; padding: 0 0 18px; color: #111; background: #fff; }
  .course-hero__sigil,
  .course-hero__state { display: none; }
  .course-hero h1,
  .course-hero__subtitle,
  .course-hero__identity small { color: #111; text-shadow: none; }
  .course-layout,
  .course-page { padding: 0; }
  .course-page { color: #111; }
  .course-colophon { margin: 16px 0; border: 0; color: #333; background: #fff; }
  .course-edition { margin-top: 24px; border-top: 1px solid #777; color: #333; background: #fff; }
}

/* ========================================================================== 
   LEITURA ATIVA — tempo real, texto nativo e desempenho
   ========================================================================== */
.reading-performance {
  display: grid;
  grid-template-columns: minmax(210px, .85fr) minmax(0, 2fr);
  gap: 14px;
  align-items: center;
  margin: 10px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(226,99,82, .52);
  border-radius: 8px;
  color: #f1dde9;
  background:
    linear-gradient(135deg, rgba(75,21,52, .92), rgba(36,6,24, .96)),
    radial-gradient(circle at 15% 50%, rgba(217,63,153, .14), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(226,95,171, .08), 0 8px 24px rgba(0, 0, 0, .23);
}
.reading-performance__state { display: grid; grid-template-columns: 12px 1fr; gap: 2px 8px; align-items: center; }
.reading-performance__state strong { color: #d7f08c; font: 700 12px/1.2 'Segoe UI', sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.reading-performance__state small { grid-column: 2; color: #b48ea4; font-size: 11.5px; line-height: 1.35; }
.reading-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #65e9c8; box-shadow: 0 0 10px #65e9c8; animation: reading-live-pulse 1.8s ease-in-out infinite; }
.is-reading-paused .reading-live-dot { background: #d26a5c; box-shadow: none; animation: none; }
.is-reading-paused .reading-performance__state strong { color: #e0867a; }
.reading-performance dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.reading-performance dl > div { min-width: 0; padding: 1px 12px; border-left: 1px solid rgba(202,111,99, .22); }
.reading-performance dt { color: #b48da4; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.reading-performance dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #f2998d; font: 700 16px/1.1 'Segoe UI', sans-serif; }
@keyframes reading-live-pulse { 50% { opacity: .48; transform: scale(.78); } }

.arcane-legacy-material {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(177,79,66, .3);
  color: #b490a5;
  background: rgba(29,4,19, .62);
}
.arcane-legacy-material summary { min-height: 40px; color: #cb887f; font-weight: 700; cursor: pointer; }
.arcane-legacy-material p { font-size: 11px; line-height: 1.5; }

.reader-stage.is-text-reader .reader-book {
  display: block;
  width: min(980px, 100%);
  min-height: min(76vh, 980px);
  height: auto;
  margin-inline: auto;
  padding: clamp(18px, 4vw, 52px);
  border: 1px solid #ad574c;
  background: #f4edd9;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .5), inset 0 0 70px rgba(116,46,37, .09);
}
.reader-text-page { max-width: 780px; min-height: 64vh; margin: 0 auto; color: #3a2732; font: 17px/1.72 Georgia, 'Times New Roman', serif; }
.reader-text-page__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid rgba(119,51,42, .35); color: #76352c; font: 700 12px/1.4 'Segoe UI', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.reader-text-page p { margin: 0 0 1.05em; text-align: justify; hyphens: auto; }
.reader-text-page p.is-capitular::first-letter { float: left; margin: .08em .12em 0 0; color: #812e23; font: 700 3.1em/.78 Georgia, serif; }
.reader-text-page__empty { display: grid; min-height: 55vh; place-items: center; text-align: center; }

.theme-focus .course-reader { width: min(1480px, 100%); margin-inline: auto; }
.theme-focus .course-back-link { display: none; }
.theme-focus .course-page { font-size: 17px; }

@media (max-width: 760px) {
  .reading-performance { grid-template-columns: 1fr; }
  .reading-performance dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; }
  .reading-performance dl > div:nth-child(odd) { border-left: 0; }
  .reader-stage.is-text-reader .reader-book { padding: 24px 18px; }
  .reader-text-page { min-height: 58vh; font-size: 16px; line-height: 1.68; }
  .reader-text-page p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-live-dot { animation: none; }
}

/* --------------------------------------------------------------------------
   MENU CONTEXTUAL — CONCURSOLÂNDIA
   O acervo da AGEPar/Biblioteca pertence a Curitiba. Na cidade fictícia, a
   navegação mostra somente serviços locais e preserva nomes grandes mesmo
   quando o trilho precisa rolar horizontalmente.
   -------------------------------------------------------------------------- */
.theme-city .hud-dock .main-nav--concursolandia {
  min-height: 102px;
  height: 102px;
  justify-content: center;
  align-items: stretch;
  padding: 5px clamp(10px, 1.5vw, 24px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(226,99,82, .66) rgba(27,3,17, .88);
}
.theme-city .hud-dock .main-nav--concursolandia .main-nav__item {
  --nav-rgb: 63, 182, 222;
  min-height: 90px;
  flex: 0 0 clamp(118px, 8.4vw, 150px);
  min-width: 118px;
  gap: 4px;
  padding: 5px 8px 7px;
  overflow: visible;
  scroll-snap-align: center;
}
.theme-city .hud-dock .main-nav--concursolandia .main-nav__crest {
  position: relative;
  display: grid;
  width: 62px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border: 1px solid rgba(238,126,111, .82);
  clip-path: polygon(50% 0, 88% 12%, 100% 50%, 85% 88%, 50% 100%, 15% 88%, 0 50%, 12% 12%);
  background:
    radial-gradient(circle at 50% 43%, rgba(var(--nav-rgb), .52), rgba(var(--nav-rgb), .12) 48%, transparent 68%),
    linear-gradient(145deg, #57193d, #220416 68%);
  box-shadow:
    inset 0 0 0 2px #200716,
    inset 0 0 0 3px rgba(224,96,79, .58),
    0 0 14px rgba(var(--nav-rgb), .3);
}
.theme-city .hud-dock .main-nav--concursolandia .main-nav__item .ico {
  width: 48px;
  height: 48px;
  opacity: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .86)) drop-shadow(0 0 7px rgba(238,73,169, .45));
}
.theme-city .hud-dock .main-nav--concursolandia .main-nav__item strong {
  display: block;
  max-width: 100%;
  font-size: clamp(14px, .9vw, 16px);
  line-height: 1.12;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
}
.theme-city .main-nav--concursolandia .main-nav__item--city { --nav-rgb: 69, 202, 232; }
.theme-city .main-nav--concursolandia .main-nav__item--careers { --nav-rgb: 177, 113, 236; }
.theme-city .main-nav--concursolandia .main-nav__item--gazette { --nav-rgb: 229, 179, 73; }
.theme-city .main-nav--concursolandia .main-nav__item--board { --nav-rgb: 139, 90, 232; }
.theme-city .main-nav--concursolandia .main-nav__item--work { --nav-rgb: 61, 198, 143; }
.theme-city .main-nav--concursolandia .main-nav__item--quests { --nav-rgb: 221, 104, 78; }
.theme-city .main-nav--concursolandia .main-nav__item--shop { --nav-rgb: 184, 109, 240; }
.theme-city .main-nav--concursolandia .main-nav__item--bank { --nav-rgb: 231, 175, 67; }
.theme-city .main-nav--concursolandia .main-nav__item--chat { --nav-rgb: 55, 188, 232; }
.theme-city .main-nav--concursolandia .main-nav__item--travel { --nav-rgb: 74, 185, 220; }
.theme-city .main-nav--concursolandia .main-nav__item--admin { --nav-rgb: 89, 171, 238; }

@media (max-width: 900px) {
  .theme-city .hud-dock .main-nav--concursolandia {
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-height: 92px;
    height: 92px;
    padding: 4px 7px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }
  .theme-city .hud-dock .main-nav--concursolandia .main-nav__item {
    min-width: 104px;
    min-height: 80px;
    flex-basis: 104px;
    padding: 4px 5px 6px;
  }
  .theme-city .hud-dock .main-nav--concursolandia .main-nav__crest {
    width: 50px;
    height: 48px;
    flex-basis: 48px;
  }
  .theme-city .hud-dock .main-nav--concursolandia .main-nav__item .ico {
    width: 40px;
    height: 40px;
  }
  .theme-city .hud-dock .main-nav--concursolandia .main-nav__item strong {
    display: block;
    font-size: 12px;
    line-height: 1.1;
  }
}

@media (max-width: 470px) {
  .theme-city .hud-dock .main-nav--concursolandia .main-nav__item {
    min-width: 98px;
    flex-basis: 98px;
  }
}

/* O hub herda regras históricas de .screen-city com especificidade maior.
   Estes seletores garantem que o menu contextual mantenha as mesmas medidas
   legíveis também na página principal, sem recorrer a !important. */
@media (max-width: 900px) {
  .theme-city.screen-city .hud-dock .main-nav.main-nav--concursolandia {
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-height: 102px;
    height: 102px;
    padding: 4px 7px 6px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .theme-city.screen-city .hud-dock .main-nav.main-nav--concursolandia .main-nav__item {
    min-width: 108px;
    min-height: 90px;
    flex: 0 0 108px;
    padding: 4px 5px 7px;
  }
  .theme-city.screen-city .hud-dock .main-nav.main-nav--concursolandia .main-nav__crest {
    width: 50px;
    height: 48px;
    flex-basis: 48px;
  }
  .theme-city.screen-city .hud-dock .main-nav.main-nav--concursolandia .main-nav__item .ico {
    width: 40px;
    height: 40px;
  }
  .theme-city.screen-city .hud-dock .main-nav.main-nav--concursolandia .main-nav__item strong {
    display: block;
    font-size: 12px;
    line-height: 1.1;
  }
}


/* =========================================================================
   O ESPELHO DO ESTÚDIO
   O retrato é desenhado a partir da caracterização (SVG do servidor), então
   ele muda com cada escolha. Aqui só se dá a moldura e o lugar dele.
   ====================================================================== */
.character-mirror {
  display: grid; gap: 8px; justify-items: center; margin: 0 0 14px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(198,88,74, 0.45); border-radius: 10px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,121,106, 0.10), transparent 65%),
    linear-gradient(180deg, rgba(65,17,45, 0.85), rgba(31,7,21, 0.92));
}
.character-mirror__glass {
  width: min(230px, 60vw); aspect-ratio: 200 / 240; overflow: hidden;
  border-radius: 8px; border: 1px solid rgba(198,88,74, 0.3);
  background: linear-gradient(180deg, #370e26, #26081a);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.55);
}
.character-mirror__glass .character-portrait { display: block; width: 100%; height: 100%; }
.character-mirror figcaption { display: grid; gap: 2px; justify-items: center; text-align: center; }
.character-mirror figcaption strong {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #ffb9b0;
}
.character-mirror figcaption small { font-size: 11px; color: var(--ink-dim); }
.character-mirror figcaption small.is-error { color: #ffb4a2; }

/* Em tela larga o espelho fica ao lado dos campos, não empurrando-os. */
@media (min-width: 900px) {
  .character-customizer-form { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
  .character-mirror { margin: 0; position: sticky; top: 84px; }
  .character-customizer-form > .character-customizer-grid { grid-column: 2; }
  .character-customizer-form > button { grid-column: 2; justify-self: start; }
}
/* Aterrissagem das ancoras de leitura com respiro do topo. */
#livro, #leitura { scroll-margin-top: 12px; }

/* SO VISUALIZACAO (28/09/2026): o conteudo do leitor nao se seleciona nem se
   imprime. Ver o bloco correspondente em assets/js/reader.js. */
.reader-stage .reader-sheet,
.reader-stage .reader-sheet img,
.reader-stage.is-text-reader article {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.reader-stage .reader-sheet img { -webkit-user-drag: none; pointer-events: auto; }
@media print {
  .reader-stage { display: none !important; }
  body::after { content: "O conteudo da biblioteca e para leitura no site."; display: block; padding: 2rem; font: 16px Georgia, serif; }
}