/* =============================================================================
   Granscavalery — Wiki de Sword Art: Eternity
   Tema: brasão carmesim, papel pergaminho, ouro velho, tipografia gótica.
   ========================================================================== */

/* ------------------------------- tokens ---------------------------------- */
:root {
  --ink: #150a0d;
  --ink-2: #241216;
  --wine: #3d0a12;
  --wine-2: #560f19;
  --crimson: #8e0d1a;
  --crimson-2: #b31526;
  --crimson-soft: rgba(142, 13, 26, 0.08);
  --gold: #c2a24a;
  --gold-2: #e2c884;
  --gold-soft: rgba(194, 162, 74, 0.16);
  --paper: #f8f2e7;
  --paper-2: #f1e7d6;
  --cream: #fdfaf3;
  --muted: #6d5b57;
  --muted-2: #75625d;
  --line: rgba(61, 10, 18, 0.14);
  --line-strong: rgba(61, 10, 18, 0.28);
  --ok: #1f6b4f;
  --danger: #a01b1b;

  --accent: var(--crimson);
  --accent-soft: var(--crimson-soft);

  --serif: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --heading: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-sm: 0 1px 2px rgba(21, 10, 13, 0.06), 0 2px 8px rgba(21, 10, 13, 0.04);
  --shadow-md: 0 12px 32px -18px rgba(21, 10, 13, 0.45), 0 2px 6px rgba(21, 10, 13, 0.05);
  --shadow-lg: 0 30px 60px -30px rgba(21, 10, 13, 0.55);
  --radius: 3px;
  --radius-lg: 6px;
  --container: 1200px;
  --header-h: 76px;
}

/* ------------------------------ reset ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(194, 162, 74, 0.10), transparent 60%),
    var(--paper);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--crimson); text-decoration: none; }
a:hover { color: var(--crimson-2); }
h1, h2, h3, h4, h5 { font-family: var(--heading); font-weight: 600; line-height: 1.04; letter-spacing: 0.002em; color: var(--ink); margin: 0 0 0.42em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.35em; }
li { margin-bottom: 0.35em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
strong { color: var(--ink); }
::selection { background: rgba(142, 13, 26, 0.85); color: var(--cream); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.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; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--crimson); color: var(--cream); padding: 10px 16px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.container { width: min(100% - 48px, var(--container)); margin-inline: auto; }
.page { padding: 48px 0 96px; }
.page--narrow { max-width: 860px; }

/* ------------------------------- icons ----------------------------------- */
.icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: -0.18em; }
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 34px; height: 34px; }
.icon--flip { transform: rotate(180deg); }

/* ------------------------------- buttons --------------------------------- */
.btn {
  --btn-bg: var(--crimson);
  --btn-fg: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; padding: 13px 22px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; transition: all .18s ease;
  text-align: center; white-space: nowrap;
}
.btn:hover { background: var(--crimson-2); color: var(--cream); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--outline { background: rgba(255, 255, 255, 0.05); color: var(--cream); border-color: rgba(226, 200, 132, 0.45); }
.btn--outline:hover { background: rgba(194, 162, 74, 0.16); border-color: var(--gold-2); color: var(--gold-2); transform: translateY(-1px); }
.btn--outline .icon { opacity: .85; }
.btn--icon { padding: 9px 10px; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--link { background: none; color: var(--crimson); border: 0; padding-inline: 8px; text-decoration: underline; text-underline-offset: 4px; }
.btn--link:hover { background: none; box-shadow: none; color: var(--crimson-2); transform: none; }
.btn--sm { padding: 9px 14px; font-size: 11px; letter-spacing: 0.12em; }
.btn--full { width: 100%; }
.btn--primary { --btn-bg: linear-gradient(180deg, var(--crimson-2), var(--crimson)); }

/* ------------------------------ eyebrow ---------------------------------- */
.eyebrow {
  font-family: var(--ui); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--crimson); margin: 0 0 10px; font-weight: 600;
}
.section-title { font-size: clamp(27px, 3.2vw, 38px); margin: 0; letter-spacing: 0.004em; }
.page-title { font-size: clamp(32px, 4vw, 50px); margin: 0 0 8px; line-height: 1.04; }
.page-sub { color: var(--muted); font-size: 17px; max-width: 68ch; margin: 0; }
.lead { font-size: 20px; line-height: 1.6; color: var(--ink-2); }

/* ------------------------------- header ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(21, 10, 13, 0.97), rgba(29, 12, 17, 0.94));
  border-bottom: 1px solid rgba(194, 162, 74, 0.28);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
.announcement {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(90deg, var(--wine), var(--crimson), var(--wine));
  color: var(--cream); font-size: 13px; letter-spacing: 0.02em; padding: 8px 18px; text-align: center;
}
.announcement__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 12px var(--gold-2); }
.header-inner {
  width: min(100% - 40px, 1360px); margin-inline: auto;
  display: flex; align-items: center; gap: 28px; min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--cream); flex: none; }
.brand:hover { color: var(--gold-2); }
.brand__mark { display: grid; place-items: center; width: 40px; height: 52px; position: relative; }
.brand__mark img { height: 46px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--display); font-size: 17.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--cream); }
.brand__tag { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(224, 196, 121, 0.72); }

.main-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.main-nav__list { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500; color: rgba(253, 250, 243, 0.78); padding: 10px 9px; border-radius: var(--radius); white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.nav-link:hover, .nav-link.is-active { color: var(--gold-2); background: rgba(255, 255, 255, 0.05); }
.nav-link .icon { width: 13px; height: 13px; opacity: .55; transition: opacity .15s ease; }
.nav-link:hover .icon, .nav-link.is-active .icon { opacity: 1; }
.nav-link--guild { color: var(--gold-2); }
.nav-link--guild .icon { opacity: .95; }
.nav-link.is-active::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.nav-link--button { background: none; border: 0; cursor: pointer; font-family: var(--display); }
.nav-more { position: relative; }
.nav-more.is-open .nav-link--button { color: var(--gold-2); background: rgba(255,255,255,.06); }
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 280px; padding: 8px;
  background: #1c0d11; border: 1px solid rgba(194, 162, 74, 0.3); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: none; z-index: 70;
}
.nav-more.is-open .nav-dropdown { display: block; }
.nav-dropdown__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius);
  color: rgba(253, 250, 243, 0.82); font-size: 14px;
}
.nav-dropdown__item:hover { background: rgba(194, 162, 74, 0.12); color: var(--gold-2); }
.nav-dropdown__item span { flex: 1; }
.nav-dropdown__item em { font-size: 11px; color: rgba(224, 196, 121, 0.6); font-style: normal; }
.nav-dropdown__sep { height: 1px; margin: 6px 4px; background: rgba(255, 255, 255, 0.08); }
.nav-dropdown--mega { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; min-width: 760px; padding: 18px; }
.nav-more.is-open .nav-dropdown--mega { display: grid; }
.mega-col { display: flex; flex-direction: column; gap: 2px; }
.mega-title { font-family: var(--display); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(226, 200, 132, .75); margin: 4px 8px 8px; }
@media (max-width: 900px) {
  .nav-dropdown--mega { min-width: 0; grid-template-columns: 1fr; padding: 12px; }
  .nav-more.is-open .nav-dropdown--mega { display: grid; }
}

.nav-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 6px 10px; color: rgba(253,250,243,.6); transition: all .18s ease; }
.nav-search:focus-within { border-color: rgba(194,162,74,.5); background: rgba(255,255,255,.1); }
.nav-search input {
  background: none; border: 0; outline: none; color: var(--cream); font-family: var(--serif);
  font-size: 13.5px; width: 148px; padding: 4px 0;
}
.nav-search input::placeholder { color: rgba(253, 250, 243, 0.42); }
.search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 320px;
  background: #1c0d11; border: 1px solid rgba(194, 162, 74, 0.3); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; z-index: 80;
}
.search-suggest a, .search-suggest p { display: block; padding: 10px 14px; color: rgba(253,250,243,.85); font-size: 14px; margin: 0; }
.search-suggest a:hover, .search-suggest a.is-active { background: rgba(194, 162, 74, 0.14); color: var(--gold-2); }
.search-suggest a span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(224,196,121,.55); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.14); color: var(--cream); padding: 8px; border-radius: var(--radius); cursor: pointer; }

/* -------------------------------- hero ----------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(142, 13, 26, 0.55), transparent 65%),
    radial-gradient(700px 420px at 12% 92%, rgba(194, 162, 74, 0.16), transparent 70%),
    linear-gradient(165deg, #160a0e 0%, #2a0b12 45%, #150a0d 100%);
  color: var(--cream);
  border-bottom: 1px solid rgba(194, 162, 74, 0.3);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 55%);
}
.hero__glow { position: absolute; width: 620px; height: 620px; right: -120px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(179, 21, 38, 0.5), transparent 62%); filter: blur(30px); z-index: -1; }
.hero__emblem {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  height: 118%; width: auto; opacity: 0.16; z-index: -1; pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(0,0,0,.6));
}
.hero__inner { width: min(100% - 48px, 1080px); margin-inline: auto; padding: 92px 0 84px; position: relative; }
.hero__kicker {
  display: flex; align-items: center; gap: 14px; justify-content: flex-start;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 22px;
}
.hero__kicker span { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero__kicker span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.hero__title {
  font-size: clamp(42px, 6.2vw, 76px); line-height: 0.98; letter-spacing: -0.005em; letter-spacing: -0.01em; color: var(--cream);
  margin: 0 0 22px; max-width: 20ch; text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}
.hero__subtitle { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; color: rgba(253, 250, 243, 0.74); max-width: 62ch; margin: 0 0 34px; }
.hero__search {
  display: flex; align-items: center; gap: 12px; max-width: 640px; padding: 8px 8px 8px 18px;
  background: rgba(12, 6, 8, 0.55); border: 1px solid rgba(194, 162, 74, 0.32); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hero__search .icon { color: var(--gold); }
.hero__search input {
  flex: 1; background: none; border: 0; outline: none; color: var(--cream);
  font-family: var(--serif); font-size: 16px; padding: 10px 0; min-width: 0;
}
.hero__search input::placeholder { color: rgba(253, 250, 243, 0.42); }
.hero__stats { display: flex; flex-wrap: wrap; gap: 42px; margin-top: 46px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat strong { font-family: var(--display); font-size: 24px; color: var(--gold-2); font-weight: 500; letter-spacing: .02em; }
.stat span { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(253, 250, 243, 0.5); }

/* -------------------------------- bands ---------------------------------- */
.band { padding: 84px 0; border-bottom: 1px solid var(--line); position: relative; }
.band:last-of-type { border-bottom: 0; }
.band--featured { background: linear-gradient(180deg, rgba(241, 231, 214, 0.7), transparent 55%); }
.band--tags { padding: 44px 0; background: var(--paper-2); }
.band--cta { padding: 72px 0; background: linear-gradient(120deg, var(--wine), #230a11 70%); color: var(--cream); border-bottom: 0; }
.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; flex-wrap: wrap; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--crimson); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.link-arrow:hover { border-color: var(--crimson); }

/* --------------------------- section grid -------------------------------- */
.section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.section-tile {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 18px;
  background: var(--cream); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: var(--radius); color: var(--ink-2); position: relative; transition: all .2s ease;
}
.section-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); border-left-color: var(--accent); }
.section-tile__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.section-tile__icon .icon { width: 19px; height: 19px; }
.section-tile__body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.section-tile__body strong { font-family: var(--heading); font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.section-tile__body span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.section-tile__count { font-family: var(--display); font-size: 13px; color: var(--accent); opacity: .8; }

/* ------------------------------- cards ----------------------------------- */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--wide { margin-top: 28px; }

.card-entry {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
}
.card-entry:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card-entry__link { color: inherit; display: flex; flex-direction: column; height: 100%; }
.card-entry__media {
  aspect-ratio: 16 / 9; position: relative; display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(194, 162, 74, 0.14), transparent 60%),
    linear-gradient(135deg, #1b0c10, #34101a);
  overflow: hidden;
}
.card-entry__media img { width: 100%; height: 100%; object-fit: cover; }
.card-entry__emblem { color: rgba(226, 200, 132, 0.5); }
.card-entry__emblem .icon { width: 44px; height: 44px; stroke-width: 1; }
.card-entry__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-entry__kicker { display: flex; align-items: center; gap: 7px; font-family: var(--ui); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--crimson); margin: 0; }
.card-entry__title { font-size: 22px; margin: 0; line-height: 1.1; }
.card-entry__summary { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; flex: 1; }
.card-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.card-entry__tag { font-size: 12px; color: var(--muted-2); }

.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--ui); font-weight: 500;
  border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.5);
}
.chip--tag { text-transform: none; letter-spacing: 0; font-family: var(--body, var(--serif)); font-size: 13px; padding: 5px 12px; color: var(--ink-2); }
.chip--tag:hover { border-color: var(--crimson); color: var(--crimson); background: var(--crimson-soft); }
.chip--tag.is-active { background: var(--crimson); border-color: var(--crimson); color: var(--cream); }
.chip--tag em { font-style: normal; opacity: .55; font-size: 11px; }
.chip--tag-lg { font-size: 15px; padding: 8px 16px; }
.chip--rarity[data-rarity="comum"] { border-color: #9c948b; color: #6b625a; }
.chip--rarity[data-rarity="incomum"] { border-color: #3f7d5c; color: #2c6349; }
.chip--rarity[data-rarity="raro"] { border-color: #3a6ea5; color: #2f5a86; }
.chip--rarity[data-rarity="épico"] { border-color: #7c4b9c; color: #653a80; }
.chip--rarity[data-rarity="lendário"] { border-color: var(--gold); color: #8a6d1d; background: var(--gold-soft); }
.chip--rarity[data-rarity="único"] { border-color: var(--crimson); color: var(--crimson); background: var(--crimson-soft); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud--tight { margin: 22px 0 0; }
.tag-cloud--big { margin-top: 30px; }

/* ------------------------------- feed ------------------------------------ */
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: start; }
.feed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); margin: 0; }
.feed-item:first-child { padding-top: 0; }
.feed-item__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.feed-item__icon .icon { width: 17px; height: 17px; }
.feed-item__body { display: flex; flex-direction: column; gap: 3px; }
.feed-item__kicker { font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin: 0; }
.feed-item__title { font-family: var(--heading); font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.feed-item__title:hover { color: var(--crimson); }
.feed-item__summary { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

.panel {
  background: var(--cream); border: 1px solid var(--line); border-top: 2px solid var(--gold);
  border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
}
.panel__title { font-size: 20px; margin: 0 0 16px; }
.story-list { list-style: none; padding: 0; margin: 0 0 18px; counter-reset: story; }
.story-list li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; margin: 0; }
.story-list__num { font-family: var(--display); font-size: 11px; letter-spacing: .12em; color: var(--crimson); min-width: 62px; text-transform: uppercase; }
.boss-list { list-style: none; padding: 0; margin: 0 0 18px; }
.boss-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; margin: 0; }
.boss-list li span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); font-family: var(--display); }

/* -------------------------------- cta ------------------------------------ */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta .eyebrow { color: var(--gold-2); }
.cta .section-title { color: var(--cream); }
.cta__text { color: rgba(253, 250, 243, 0.68); max-width: 58ch; margin: 12px 0 0; }
.cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.band--cta .btn--ghost { color: var(--cream); border-color: rgba(253, 250, 243, 0.28); }
.band--cta .btn--ghost:hover { background: var(--cream); color: var(--ink); }
.cta--inline { margin-top: 64px; padding: 36px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }

/* ------------------------------- footer ---------------------------------- */
.site-footer { background: linear-gradient(180deg, #1b0b0f, #120709); color: rgba(253, 250, 243, 0.7); padding: 0 0 28px; border-top: 1px solid rgba(194, 162, 74, 0.28); }
.footer-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 26px 0 34px; color: var(--gold); }
.footer-ornament span { width: min(180px, 26vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(194, 162, 74, 0.6)); }
.footer-ornament span:last-child { background: linear-gradient(90deg, rgba(194, 162, 74, 0.6), transparent); }
.footer-grid { width: min(100% - 48px, var(--container)); margin-inline: auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand { display: flex; gap: 16px; align-items: flex-start; }
.footer-mark { height: 64px; width: auto; opacity: .8; }
.footer-name { font-family: var(--display); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); margin: 0 0 8px; }
.footer-tag { font-size: 13.5px; line-height: 1.6; max-width: 40ch; margin: 0; }
.footer-tag strong { color: rgba(253, 250, 243, 0.9); }
.footer-col h3 { font-family: var(--display); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0 0 9px; }
.footer-col a { color: rgba(253, 250, 243, 0.66); font-size: 14px; }
.footer-col a:hover { color: var(--gold-2); }
.footer-bottom { width: min(100% - 48px, var(--container)); margin: 42px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(253, 250, 243, 0.5); }
.footer-bottom p { margin: 0; }

/* ------------------------------ breadcrumb ------------------------------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-2); margin-bottom: 26px; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--crimson); }
.breadcrumb span { color: var(--ink-2); }
.breadcrumb--light, .breadcrumb--light a, .breadcrumb--light span { color: rgba(253, 250, 243, 0.6); }
.breadcrumb--light a:hover { color: var(--gold-2); }

/* ------------------------------ page head -------------------------------- */
.page-head { margin-bottom: 34px; }
.page-head .eyebrow { margin-bottom: 12px; }

/* ------------------------------ filter bar ------------------------------- */
.filter-bar {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 16px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 26px;
}
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-family: var(--display); }
.field input, .field select, .field textarea {
  font-family: var(--serif); font-size: 15px; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 12px; outline: none;
  transition: border-color .16s ease, box-shadow .16s ease; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-soft); }
.field--search { flex: 1 1 240px; flex-direction: row; align-items: center; gap: 8px; border: 1px solid var(--line-strong); background: #fff; border-radius: var(--radius); padding: 0 12px; }
.field--search .icon { color: var(--muted-2); }
.field--search input { border: 0; padding: 12px 0; background: none; text-transform: none; letter-spacing: 0; font-size: 15px; }
.field--search:focus-within { border-color: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-soft); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236d5b57' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* ------------------------------ section head ----------------------------- */
.section-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; }
.section-head__icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); flex: none; }
.section-head__icon .icon { width: 26px; height: 26px; }
.section-head__body { flex: 1; }
.intro { max-width: 78ch; margin-bottom: 30px; padding-left: 20px; border-left: 2px solid var(--accent); color: var(--muted); }
.intro p:last-child { margin-bottom: 0; }

/* ------------------------------ entry table ------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.table-wrap--entries { margin-bottom: 28px; }
.entry-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.entry-table th {
  text-align: left; font-family: var(--display); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); padding: 13px 16px; border-bottom: 1px solid var(--line-strong); background: var(--paper-2); white-space: nowrap;
}
.entry-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.entry-table tr:last-child td { border-bottom: 0; }
.entry-table tbody tr { transition: background .15s ease; }
.entry-table tbody tr:hover { background: rgba(194, 162, 74, 0.06); }
.entry-table__name a { font-family: var(--display); font-size: 15px; color: var(--ink); display: block; }
.entry-table__name a:hover { color: var(--crimson); }
.entry-table__name span { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 2px; max-width: 42ch; }
.entry-table__date { color: var(--muted-2); font-size: 12.5px; white-space: nowrap; }

/* --------------------------------- entry --------------------------------- */
.entry-hero {
  position: relative; color: var(--cream); padding: 36px 0 54px; overflow: hidden;
  background:
    radial-gradient(760px 380px at 82% 0%, rgba(142, 13, 26, 0.5), transparent 62%),
    linear-gradient(160deg, #170a0e, #2b0b13 55%, #160a0d);
  border-bottom: 1px solid rgba(194, 162, 74, 0.3);
}
.entry-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 50% 120%, rgba(194, 162, 74, 0.14), transparent 55%);
}
.entry-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: end; }
.entry-hero__grid.has-cover { grid-template-columns: 1.7fr 1fr; }
.entry-hero__kicker { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 16px; }
.entry-hero__kicker .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.entry-title { font-size: clamp(34px, 4.6vw, 58px); line-height: 1; color: var(--cream); margin: 0 0 12px; text-wrap: balance; }
.entry-subtitle { font-size: clamp(16px, 1.6vw, 20px); color: rgba(253, 250, 243, 0.8); margin: 0 0 14px; font-style: italic; }
.entry-lead { font-size: 17px; line-height: 1.65; color: rgba(253, 250, 243, 0.66); max-width: 70ch; margin: 0 0 22px; }
.entry-lang { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px; padding: 3px; border: 1px solid rgba(194, 162, 74, .38); border-radius: 999px; background: rgba(12, 6, 8, .35); }
.entry-lang__label { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; font-family: var(--ui); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(253, 250, 243, .55); }
.entry-lang__item { display: inline-grid; place-items: center; min-width: 38px; padding: 5px 9px; border-radius: 999px; font-family: var(--ui); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: rgba(253, 250, 243, .72); }
.entry-lang__item:hover { color: var(--gold-2); background: rgba(194, 162, 74, .12); }
.entry-lang__item.is-active { background: var(--gold); color: #23180a; }
.entry-lang__item.is-active:hover { color: #23180a; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; letter-spacing: .04em; color: rgba(253, 250, 243, 0.55); }
.entry-meta span, .entry-meta a { display: inline-flex; align-items: center; gap: 6px; }
.entry-meta__edit { color: var(--gold-2); border-bottom: 1px solid rgba(194, 162, 74, 0.4); }
.entry-cover { margin: 0; border: 1px solid rgba(194, 162, 74, 0.28); border-radius: var(--radius); overflow: hidden; background: rgba(0,0,0,.3); }
.entry-cover img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }

.entry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; padding-top: 54px; padding-bottom: 90px; align-items: start; }
.entry-main { min-width: 0; }
.entry-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; }

.infobox { background: var(--cream); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: var(--radius); overflow: hidden; }
.infobox__title { display: flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.infobox dl { margin: 0; padding: 6px 16px 14px; }
.infobox__row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.infobox__row:last-child { border-bottom: 0; }
.infobox dt { font-family: var(--display); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }
.infobox dd { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }

.toc { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.toc__title { font-family: var(--display); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc__item { margin: 0 0 4px; }
.toc__item a { display: block; font-size: 13.5px; color: var(--muted); padding: 3px 0 3px 10px; border-left: 1px solid transparent; line-height: 1.35; }
.toc__item--h3 a { padding-left: 22px; font-size: 13px; }
.toc__item a:hover, .toc__item a.is-active { color: var(--crimson); border-left-color: var(--crimson); }
.aside-actions { display: flex; flex-direction: column; gap: 8px; }

.entry-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 38px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.entry-tags__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-right: 4px; }

.related { margin: 44px 0 0; }
.related__title { font-size: 22px; margin: 0 0 18px; }
.related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.related__item { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); transition: all .18s ease; }
.related__item:hover { border-color: var(--gold); transform: translateY(-1px); }
.related__kind { font-family: var(--display); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--crimson); }
.related__item strong { font-family: var(--display); font-size: 15px; color: var(--ink); font-weight: 600; }
.related__item em { font-style: normal; font-size: 12px; color: var(--muted-2); }
.related__item--back .related__kind { color: var(--muted-2); }

.entry-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.entry-nav__item { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.entry-nav__item span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); }
.entry-nav__item strong { font-family: var(--display); font-size: 15px; color: var(--ink); }
.entry-nav__item--next { text-align: right; align-items: flex-end; }
.entry-nav__item:hover { border-color: var(--gold); }

/* ------------------------------ commentários ------------------------------ */
.comments { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.comments__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.comments__head h2 { font-size: 24px; margin: 0 0 18px; }
.comments__head span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); font-family: var(--display); }
.comments__empty { color: var(--muted); font-style: italic; }
.comment-list { list-style: none; padding: 0; margin: 0 0 32px; }
.comment { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; }
.comment__avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--wine); color: var(--gold-2); font-family: var(--display); font-size: 15px; }
.comment__head { margin: 0 0 4px; display: flex; gap: 10px; align-items: baseline; }
.comment__head strong { font-family: var(--display); font-size: 14px; color: var(--ink); }
.comment__head span { font-size: 11.5px; color: var(--muted-2); }
.comment__body { margin: 0; font-size: 15px; color: var(--ink-2); white-space: pre-line; }
.comment-form { background: var(--cream); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: var(--radius); padding: 22px; }
.comment-form h3 { font-size: 17px; margin: 0 0 16px; }
.comment-form .field { margin-bottom: 14px; }
.comment-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.comment-form__actions p { margin: 0; font-size: 12.5px; color: var(--muted-2); max-width: 40ch; }
.notice { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; margin-bottom: 18px; }
.notice--ok { background: rgba(31, 107, 79, 0.09); color: var(--ok); border: 1px solid rgba(31, 107, 79, 0.25); }

/* -------------------------------- empty ---------------------------------- */
.empty { text-align: center; padding: 70px 20px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgba(255,255,255,.35); }
.empty .icon { color: var(--gold); margin-bottom: 14px; }
.empty h2 { font-size: 24px; margin: 0 0 8px; }
.empty p { max-width: 46ch; margin: 0 auto 20px; }

/* ------------------------------ pagination ------------------------------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.pagination__step { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.pagination__step.is-disabled { opacity: .35; }
.pagination__pages { display: flex; align-items: center; gap: 4px; }
.pagination__page { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius); font-size: 13.5px; color: var(--muted); border: 1px solid transparent; }
.pagination__page:hover { border-color: var(--line-strong); color: var(--crimson); }
.pagination__page.is-current { background: var(--ink); color: var(--cream); }
.pagination__gap { color: var(--muted-2); padding: 0 4px; }

/* -------------------------------- search --------------------------------- */
.search-hero { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 20px; background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); margin-bottom: 34px; box-shadow: var(--shadow-sm); }
.search-hero .icon { color: var(--gold); width: 22px; height: 22px; }
.search-hero input { flex: 1; border: 0; background: none; outline: none; font-family: var(--serif); font-size: 17px; padding: 10px 0; color: var(--ink); min-width: 0; }

/* -------------------------------- error ---------------------------------- */
.error-page { text-align: center; padding-block: 90px 110px; }
.error-page__mark { height: 120px; width: auto; opacity: .85; margin-bottom: 18px; filter: drop-shadow(0 10px 24px rgba(142,13,26,.25)); }
.error-page__actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* --------------------------------- prose --------------------------------- */
.prose { font-size: 16.5px; line-height: 1.78; color: #2a1a1d; max-width: 74ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2 {
  font-size: clamp(24px, 2.5vw, 31px); margin: 2.4em 0 0.7em; padding-bottom: 0.35em;
  border-bottom: 1px solid var(--line); position: relative;
}
.prose h2::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--gold); }
.prose h3 { font-size: 20px; margin: 1.9em 0 0.45em; color: var(--ink); }
.prose h4 { font-size: 17px; margin: 1.6em 0 0.4em; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-size: 13px; }
.prose .anchor { margin-left: 8px; font-size: .62em; color: var(--gold); opacity: 0; transition: opacity .15s ease; text-decoration: none; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--crimson); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(142, 13, 26, 0.35); }
.prose a:hover { text-decoration-color: var(--crimson); background: rgba(142, 13, 26, 0.05); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--crimson); }
.prose blockquote { margin: 1.8em 0; padding: 14px 22px; border-left: 3px solid var(--gold); background: rgba(194, 162, 74, 0.08); color: var(--wine); font-style: italic; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-family: 'Cascadia Code', 'Consolas', monospace; font-size: .88em; background: rgba(61, 10, 18, 0.07); padding: 2px 6px; border-radius: 3px; color: var(--wine); }
.prose pre { background: #1d0d11; color: #f3e8d6; padding: 18px; border-radius: var(--radius); overflow-x: auto; font-size: 14px; border: 1px solid rgba(194, 162, 74, 0.25); }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose .table-wrap { margin: 1.8em 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--cream); }
.prose th { text-align: left; font-family: var(--display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line-strong); }
.prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose img { display: block; max-width: 100%; height: auto; margin: 1.8em auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.prose hr { border: 0; height: 24px; margin: 2.6em 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 12h48M72 12h48' stroke='%23c2a24a' stroke-width='1'/%3E%3Cpath d='M60 4l8 8-8 8-8-8z' fill='none' stroke='%238e0d1a' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat; }
.prose .lead { font-size: 19px; color: var(--wine); }
.prose--tight { font-size: 16px; }
.prose--editorial h2 { margin-top: 2em; }

/* -------------------------------- accent --------------------------------- */
.accent-crimson { --accent: #8e0d1a; --accent-soft: rgba(142, 13, 26, 0.08); }
.accent-gold { --accent: #9c7d24; --accent-soft: rgba(194, 162, 74, 0.16); }
.accent-wine { --accent: #5c1020; --accent-soft: rgba(92, 16, 32, 0.09); }
.accent-steel { --accent: #4b5b6b; --accent-soft: rgba(75, 91, 107, 0.12); }
.accent-ember { --accent: #9b3a12; --accent-soft: rgba(155, 58, 18, 0.11); }
.accent-moss { --accent: #3c5a3a; --accent-soft: rgba(60, 90, 58, 0.12); }

/* ------------------------------- responsive ------------------------------ */
@media (max-width: 1180px) {
  .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-search input { width: 130px; }
  .entry-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; }
}
@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 42px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .entry-hero__grid { grid-template-columns: 1fr; }
  .entry-cover { max-width: 420px; }
}
@media (max-width: 900px) {
  :root { --header-h: auto; }
  .nav-toggle { display: inline-flex; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 20px 22px;
    background: #1b0b0f; border-bottom: 1px solid rgba(194,162,74,.3); box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .main-nav.is-open { display: flex; }
  .main-nav .nav-search { display: flex; width: 100%; }
  .main-nav .nav-search input { width: 100%; }
  .main-nav .user-menu { width: 100%; }
  .main-nav .user-menu__toggle { width: 100%; justify-content: flex-start; }
  .main-nav .user-menu__panel { position: static; min-width: 0; margin-top: 6px; }
  .main-nav .nav-signup { display: inline-flex; }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { padding: 12px 10px; font-size: 13px; }
  .nav-dropdown { position: static; box-shadow: none; border: 0; background: rgba(255,255,255,.04); margin-top: 4px; }
  .nav-more.is-open .nav-dropdown { display: block; }
  .nav-search { width: 100%; }
  .nav-search input { width: 100%; }
  .nav-cta { justify-content: center; }
  /* No menu mobile o rótulo do Entrar/Criar conta precisa aparecer (a regra de
     1060px esconde o span e sobrava um quadrado vazio). */
  .main-nav .nav-cta { width: 100%; }
  .main-nav .nav-cta span { display: inline; }
  .hero__inner { padding: 64px 0 58px; }
  .hero__emblem { opacity: .1; right: -12%; }
  .entry-layout { grid-template-columns: 1fr; padding-top: 38px; }
  .entry-aside { position: static; order: -1; }
  .band { padding: 58px 0; }
  .prose { font-size: 16.5px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .container { width: min(100% - 32px, var(--container)); }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .section-grid { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: 1fr; }
  .entry-nav { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__stats { gap: 26px; }
  .stat strong { font-size: 20px; }
  .hero__search { flex-wrap: wrap; padding: 12px; }
  .hero__search input { flex-basis: 100%; }
  .hero__search .btn { width: 100%; }
  .page { padding: 32px 0 64px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .btn { width: 100%; }
  .cta { flex-direction: column; align-items: flex-start; }
  .cta--inline { padding: 24px; }
  .entry-hero { padding-bottom: 38px; }
  .comment-form .grid--2 { grid-template-columns: 1fr; }
  .entry-table { min-width: 0; }
  .entry-table thead { display: none; }
  .entry-table, .entry-table tbody, .entry-table tr, .entry-table td { display: block; width: 100%; }
  .entry-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .entry-table td { border: 0; padding: 3px 0; }
  .entry-table td[data-label]::before {
    content: attr(data-label) ': '; font-family: var(--display); font-size: 9.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted-2); margin-right: 6px;
  }
  .entry-table__date { color: var(--muted-2); font-size: 11.5px; margin-top: 6px; }
}


/* ---------------------------- ajustes finos ------------------------------ */
.entry { display: block; }
.band--sections { background: linear-gradient(180deg, rgba(194, 162, 74, 0.05), transparent 40%); }
.footer-legal { text-align: right; }
.split__main { min-width: 0; }
.panel--story { border-top-color: var(--crimson); }
.panel--boss { border-top-color: var(--wine); }
.toc__item--h2 a { font-weight: 500; color: var(--ink-2); }
.toc__item--h3 a { color: var(--muted-2); }
.hero__emblem { will-change: transform; }
.entry-hero .breadcrumb { margin-bottom: 22px; }
.card-entry__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(21, 10, 13, 0.35));
}
.section-tile__count { opacity: .55; font-variant-numeric: tabular-nums; }

@media (max-width: 1380px) {
  .nav-search input { width: 104px; }
}
@media (max-width: 1180px) {
  .nav-search { display: none; }
  .brand__tag { display: none; }
}
@media (max-width: 1240px) {
  .nav-search { display: none; }
}
@media (max-width: 1180px) {
  .nav-search { display: none; }
  .brand__tag { display: none; }
}
@media (max-width: 1240px) {
  .main-nav { gap: 10px; }
  .nav-link { padding: 9px 8px; font-size: 11.5px; letter-spacing: .1em; }
  .nav-search input { width: 118px; }
  .brand__tag { font-size: 9.5px; }
}
@media (max-width: 1060px) {
  .brand__tag { display: none; }
  .nav-search input { width: 96px; }
  .nav-cta span { display: none; }
}


/* ------------------------ login/cadastro alternativo (Roblox) ------------------------ */
.auth-alt {
  border: 1px solid rgba(194, 162, 74, .35);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 16px 0;
  background: rgba(194, 162, 74, .06);
}
.auth-alt__title { margin: 0 0 4px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; color: var(--gold-2); }
.auth-alt__hint { margin: 0 0 10px; font-size: 12.5px; color: rgba(253, 250, 243, .68); line-height: 1.5; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: rgba(253, 250, 243, .5); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }
.auth-or span { white-space: nowrap; }

/* ------------------------------ conta / login ----------------------------- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px; border-radius: 999px;
  border: 1px solid rgba(226, 200, 132, 0.34); background: rgba(255, 255, 255, 0.04);
  color: rgba(253, 250, 243, 0.92); transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.lang-toggle:hover { border-color: var(--gold-2); background: rgba(194, 162, 74, 0.12); }
.lang-toggle__track {
  position: relative; display: block; width: 46px; height: 24px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: background .3s ease, box-shadow .3s ease;
}
.lang-toggle--en .lang-toggle__track { background: rgba(179, 21, 38, 0.6); box-shadow: inset 0 0 0 1px rgba(226, 200, 132, 0.4); }
.lang-toggle__knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #009C3B; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform .32s cubic-bezier(.34, 1.4, .64, 1), background .3s ease;
}
.lang-toggle--en .lang-toggle__knob { transform: translateX(22px); background: #B22234; }
.lang-toggle__knob .lang-flag { width: 22px; height: 15px; border-radius: 0; box-shadow: none; }
.lang-toggle__label { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .1em; padding: 0 8px 0 6px; line-height: 1; min-width: 52px; text-align: left; }

.user-menu { position: relative; }
.user-menu__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border: 1px solid rgba(226, 200, 132, 0.42); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--cream); font-family: var(--ui); font-size: 13px; font-weight: 500; cursor: pointer; }
.user-menu__toggle:hover { border-color: var(--gold-2); color: var(--gold-2); }
.user-menu__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--crimson); color: var(--cream); display: grid; place-items: center; font-family: var(--display); font-size: 12px; }
.user-menu__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__panel { min-width: 232px; right: 0; }
.user-menu__logout { margin: 0; }
.user-menu__logout button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: var(--radius); background: none; color: rgba(253, 250, 243, 0.82); font-family: var(--ui); font-size: 14px; text-align: left; cursor: pointer; }
.user-menu__logout button:hover { background: rgba(194, 162, 74, 0.12); color: var(--gold-2); }
.nav-logout { margin: 0; display: inline-flex; }
.nav-logout .btn { padding: 9px 10px; }
.auth-wrap { display: grid; place-items: center; padding: 26px 0 40px; }
.auth-card {
  width: min(480px, 100%); background: var(--cream); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: var(--radius-lg); padding: 34px;
  box-shadow: var(--shadow-md);
}
.auth-card__brand { text-align: center; margin-bottom: 24px; }
.auth-card__brand img { height: 92px; width: auto; margin-bottom: 12px; filter: drop-shadow(0 8px 18px rgba(142, 13, 26, 0.18)); }
.auth-card__title { font-size: 26px; margin: 6px 0 8px; }
.auth-card__sub { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.55; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .btn { margin-top: 4px; }
.auth-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-hint { font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--muted-2); line-height: 1.4; }
.auth-card__foot { text-align: center; font-size: 14px; color: var(--muted); margin: 18px 0 0; }
.auth-card__foot a { text-decoration: underline; text-underline-offset: 3px; }
.auth-card__foot--muted { font-size: 12.5px; color: var(--muted-2); margin-top: 8px; }
.flash { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.flash--ok { background: rgba(31, 107, 79, 0.08); color: var(--ok); border-color: rgba(31, 107, 79, 0.28); }
.flash--erro { background: rgba(160, 27, 27, 0.07); color: var(--danger); border-color: rgba(160, 27, 27, 0.28); }
.comment__badge {
  font-family: var(--display); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(194, 162, 74, .5); border-radius: 999px; padding: 1px 7px;
}
.comment-form__who { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.comment-form__who a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1240px) { .nav-signup { display: none; } }
@media (max-width: 720px) {
  .auth-card { padding: 24px 20px; }
  .auth-form__row { grid-template-columns: 1fr; }
  .nav-logout .btn { padding: 9px 8px; }
}

/* --------------------------------- print --------------------------------- */
@media print {
  .site-header, .site-footer, .entry-aside, .comments, .entry-nav, .related, .hero__search { display: none !important; }
  body { background: #fff; }
  .entry-hero { background: none; color: #000; border: 0; }
  .entry-title, .entry-lead, .entry-meta, .entry-subtitle { color: #000; }
}


/* ------------------------------- guilda ---------------------------------- */
.guild-hero {
  position: relative; overflow: hidden; color: var(--cream);
  background: #150a0d url('/images/guild/guild-hero-art.svg') center / cover no-repeat;
  border-bottom: 1px solid rgba(194, 162, 74, .35);
}
.guild-hero__inner { position: relative; z-index: 1; width: min(100% - 48px, 1200px); margin-inline: auto; padding: 96px 0 90px; }
.guild-hero__glow { position: absolute; inset: -20% -10% auto auto; width: 70%; height: 140%; background: radial-gradient(circle at 60% 40%, rgba(179, 21, 38, 0.45), transparent 65%); pointer-events: none; }
.guild-hero__emblem { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); height: 118%; width: auto; opacity: 0.16; z-index: 0; pointer-events: none; filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.6)); }
.guild-hero__kicker { display: flex; align-items: center; gap: 12px; font-family: var(--ui); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 18px; }
.guild-hero__title { font-size: clamp(40px, 6vw, 78px); line-height: .98; margin: 0 0 16px; color: var(--cream); text-transform: uppercase; letter-spacing: .02em; }
.guild-hero__lead { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6; color: rgba(253,250,243,.78); max-width: 60ch; margin: 0 0 28px; }
.guild-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.guild-hero__stats { display: flex; gap: 40px; margin-top: 44px; flex-wrap: wrap; }
.guild-hero__stats strong { display: block; font-family: var(--heading); font-size: 30px; color: var(--gold-2); font-weight: 700; }
.guild-hero__stats span { font-family: var(--ui); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(253,250,243,.5); }
.guild-band {
  position: relative; overflow: hidden; color: var(--cream); border-block: 1px solid rgba(194, 162, 74, .3);
  background: #170a0e url('/images/guild/guild-band-art.svg') center / cover no-repeat;
}
.guild-band__inner { width: min(100% - 48px, 1200px); margin-inline: auto; padding: 54px 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.guild-band__title { font-size: clamp(28px, 3.4vw, 42px); color: var(--cream); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em; }
.guild-band__text { color: rgba(253,250,243,.7); max-width: 56ch; margin: 0; }
.guild-band__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar { background: var(--cream); border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: var(--radius); padding: 22px; }
.pillar__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: #8a6d1d; margin-bottom: 12px; }
.pillar h3 { font-size: 20px; margin: 0 0 6px; }
.pillar p { margin: 0; font-size: 14.5px; color: var(--muted); }
.rank-list { display: grid; gap: 10px; }
.rank { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.rank__n { font-family: var(--heading); font-size: 22px; color: var(--gold); line-height: 1; }
.rank strong { font-family: var(--heading); font-size: 18px; display: block; color: var(--ink); }
.rank small { color: var(--muted); }
.steps { counter-reset: step; display: grid; gap: 12px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--crimson); color: var(--cream); font-family: var(--heading); font-size: 16px; }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; } .guild-hero__inner { padding: 64px 0 56px; } }


/* --------------------------- utilitários de grid --------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-2-1 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.form-inline { display: grid; grid-template-columns: 1.5fr 0.5fr 1fr 1.6fr auto; gap: 10px; align-items: end; }
@media (max-width: 1080px) {
  .grid-2-1, .grid-2 { grid-template-columns: 1fr; }
  .form-inline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .form-inline { grid-template-columns: 1fr; }
  .guild-hero__stats { gap: 24px; }
  .guild-hero__actions .btn { width: 100%; }
}


/* ------------------------- painéis (tema público) ------------------------- */
.panel__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper-2); border-radius: var(--radius) var(--radius) 0 0; }
.panel__head h2 { font-size: 17px; margin: 0; }
.panel__head .btn { margin-left: auto; }
.panel__body { padding: 18px; }
@media (max-width: 620px) { .panel__body { padding: 14px; } }


/* --------------------------- ajustes finais mobile --------------------------- */
@media (max-width: 900px) {
  .guild-hero__inner { padding: 56px 0 48px; }
  .guild-band__inner { padding: 38px 0; }
  .page-head { gap: 14px; }
  .entry-lang { flex-wrap: wrap; }
  .entry-lang__label { display: none; }
  .user-menu__name { max-width: 45vw; }
}
@media (max-width: 620px) {
  .container { width: calc(100% - 28px); }
  .hero__inner { padding: 48px 0 44px; }
  .hero__stats { gap: 20px; }
  .stat strong { font-size: 18px; }
  .card-entry__title { font-size: 20px; }
  .guild-band__actions .btn { width: 100%; }
  .guild-hero__actions { flex-direction: column; align-items: stretch; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .prose, .entry-main { max-width: 100%; }
  .md-editor, .md-preview { min-height: 320px; }
}


/* ------------------------------ transições ------------------------------ */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: gsOut .18s ease both; }
::view-transition-new(root) { animation: gsIn .3s cubic-bezier(.22, .61, .36, 1) both; }

@keyframes gsOut { to { opacity: 0; transform: translateY(-6px) scale(.995); } }
@keyframes gsIn { from { opacity: 0; transform: translateY(10px) scale(.997); } }

main#conteudo { animation: gsPage .42s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes gsPage { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  main#conteudo, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .lang-toggle__knob { transition: none; }
}

/* ------------------------------ selects (listbox) ------------------------------ */
select,
.field select,
.filter select,
.toolbar select,
.panel select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 42px;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6d1d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 40px 10px 13px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(61, 10, 18, 0.04);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
select:hover { border-color: rgba(194, 162, 74, 0.8); background-color: #fffdf8; }
select:focus-visible,
select:focus {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px var(--crimson-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e0d1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select:disabled { opacity: .55; cursor: not-allowed; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a89a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select option { background: #fff; color: var(--ink); padding: 8px 10px; }
select option:checked { background: rgba(179, 21, 38, 0.1); color: var(--crimson); }
select::-ms-expand { display: none; }

/* Chrome 135+: lista aberta com a mesma linguagem visual do site */
@supports (appearance: base-select) {
  select,
  select::picker(select) {
    appearance: base-select;
  }
  select {
    background-image: none;
    padding-right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  select::picker-icon {
    color: var(--gold);
    font-size: 11px;
    margin-left: auto;
    transition: rotate .2s ease;
  }
  select:open::picker-icon { rotate: 180deg; }
  select::picker(select) {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--cream);
    box-shadow: 0 18px 40px rgba(20, 6, 10, 0.28);
    max-height: 320px;
    overflow: auto;
  }
  select option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 3px;
    font-size: 14px;
    color: var(--ink);
    background: transparent;
  }
  select option:hover,
  select option:focus { background: rgba(194, 162, 74, 0.16); }
  select option:checked {
    background: var(--crimson-soft);
    color: var(--crimson);
    font-weight: 600;
  }
  select option::checkmark { color: var(--crimson); }
}

/* ------------------------------- icon picker ------------------------------- */
.icon-picker { position: relative; display: block; }
.icon-picker > summary { list-style: none; cursor: pointer; }
.icon-picker > summary::-webkit-details-marker { display: none; }
.icon-picker[open] > summary { border-color: var(--crimson); }
.icon-picker__panel { display: none; }
.icon-picker[open] .icon-picker__panel { display: grid; }
.icon-picker__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--cream); color: var(--ink); font-family: var(--ui); font-size: 13px; cursor: pointer; }
.icon-picker__toggle:hover { border-color: var(--gold-2); }
.icon-picker__preview { display: inline-flex; width: 20px; height: 20px; color: var(--crimson); }
.icon-picker__preview .icon { width: 20px; height: 20px; }
.icon-picker__name { flex: 1; text-align: left; }
.icon-picker__caret { color: var(--muted); font-size: 10px; }
.icon-picker__panel[hidden] { display: none !important; }
.icon-picker__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 264px; max-height: 220px; overflow: auto;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 8px;
  background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}
.icon-picker__opt { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
.icon-picker__opt .icon { width: 20px; height: 20px; }
.icon-picker__opt:hover { background: rgba(194, 162, 74, 0.16); }
.icon-picker__opt.is-active { border-color: var(--crimson); color: var(--crimson); background: var(--crimson-soft); }


/* ------------------------------ integrações ------------------------------ */
.integrations { display: grid; gap: 8px; }
.integration {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream);
}
.integration__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); color: #8a6d1d; flex: none; }
.integration__main { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.integration__main small { color: var(--muted); font-size: 12px; }
.integration__action { flex: none; }
@media (max-width: 620px) { .integration__action { width: 100%; } }


/* ---------------------------------- modais ---------------------------------- */
dialog.modal {
  width: min(680px, calc(100% - 32px)); max-height: 88vh; overflow: auto;
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--cream); color: var(--ink); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
dialog.modal::backdrop { background: rgba(12, 4, 6, 0.6); backdrop-filter: blur(2px); }
dialog.modal form { margin: 0; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.modal__head h2 { margin: 0; font-size: 19px; }
.modal__close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.modal__close:hover { color: var(--crimson); }
.modal__body { padding: 18px; }
.modal__foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--paper-2); position: sticky; bottom: 0; }
.modal__test { padding: 0 18px 18px; }
@media (max-width: 620px) { .modal__foot button { width: 100%; } }


/* ------------------------------ filtros múltiplos ------------------------------ */
.filter-menu { position: relative; }
.filter-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 13px; min-height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink);
  transition: border-color .16s ease, background-color .16s ease;
}
.filter-menu summary::-webkit-details-marker { display: none; }
.filter-menu summary::after { content: '▾'; color: var(--gold); font-size: 11px; }
.filter-menu summary:hover { border-color: rgba(194, 162, 74, 0.8); background: #fffdf8; }
.filter-menu[open] summary { border-color: var(--crimson); }
.filter-menu summary em { font-style: normal; background: var(--crimson); color: var(--cream); border-radius: 999px; padding: 1px 7px; font-size: 11px; }
.filter-menu__panel[hidden] { display: none !important; }
.filter-menu__panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 250px; max-height: 320px; overflow: auto;
  background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(20, 6, 10, 0.28); padding: 6px;
}
.filter-menu__opt { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 3px; font-family: var(--ui); font-size: 13px; cursor: pointer; }
.filter-menu__opt:hover { background: rgba(194, 162, 74, 0.16); }
.filter-menu__opt input { accent-color: var(--crimson); }
@media (max-width: 900px) { .filter-menu__panel { position: static; box-shadow: none; margin-top: 6px; } }


/* --------------------------- grupos de opções --------------------------- */
.filter-menu__group {
  margin: 8px 0 4px; padding: 0 8px; font-family: var(--ui); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.filter-menu__group:first-child { margin-top: 2px; }

select optgroup {
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: var(--cream); padding: 6px 10px;
}
select optgroup option {
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink);
  padding-left: 14px;
}
@supports (appearance: base-select) {
  select optgroup { padding: 10px 10px 4px; }
  select optgroup option { padding: 8px 10px 8px 16px; }
}


/* ---------------------------------- mural ---------------------------------- */
.mural-head { margin-bottom: 28px; }
.mural-title { font-size: clamp(34px, 5vw, 58px); line-height: 1; margin: 6px 0 10px; text-transform: uppercase; letter-spacing: .02em; }
.mural-lead { max-width: 62ch; color: var(--muted); margin: 0 0 18px; }
.mural-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.mural-stats strong { display: block; font-family: var(--heading); font-size: 30px; color: var(--crimson); }
.mural-stats span { font-family: var(--ui); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.mural-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.mural-section-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }

.mission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 34px; }
.mission-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-left: 3px solid var(--crimson); border-radius: var(--radius); background: var(--cream); }
.mission-card.is-mine { border-left-color: var(--gold); background: #fffdf6; }
.mission-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mission-card__top strong { font-family: var(--heading); font-size: 18px; }
.mission-card__desc { margin: 0; color: var(--muted); font-size: 13px; }
.mission-card__meta { margin: 0; font-family: var(--ui); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mission-card form { margin: 0; }

.member-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.member-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.member-card.is-master { border-color: rgba(194, 162, 74, 0.7); box-shadow: 0 0 0 1px rgba(194, 162, 74, 0.25) inset; }
.member-card.is-master::after { content: 'MESTRE'; position: absolute; top: 10px; right: -1px; font-family: var(--ui); font-size: 9px; letter-spacing: .16em; color: var(--cream); background: var(--crimson); padding: 3px 8px; border-radius: 2px 0 0 2px; }
.member-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.member-card__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--crimson); color: var(--cream); font-family: var(--display); font-size: 17px; }
.member-card__id { display: inline-flex; align-items: center; gap: 3px; font-family: var(--ui); font-size: 11px; font-weight: 600; color: #2f7d4f; background: rgba(47, 125, 79, 0.1); border-radius: 999px; padding: 3px 8px; }
.member-card__name { font-family: var(--heading); font-size: 17px; }
.member-card__handle { font-family: var(--ui); font-size: 12px; color: var(--muted); }
.member-card__rank { align-self: flex-start; margin-top: 6px; font-family: var(--ui); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--crimson); border: 1px solid rgba(179, 21, 38, 0.25); border-radius: 999px; padding: 2px 9px; }
.member-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.member-card__stats dt { font-family: var(--ui); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.member-card__stats dd { margin: 2px 0 0; font-family: var(--heading); font-size: 16px; }
.member-card__roblox { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-family: var(--ui); font-size: 12px; color: var(--muted); }
@media (max-width: 620px) { .mural-stats { gap: 20px; } .member-wall { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .member-wall { grid-template-columns: 1fr; } }


/* --------------------------- painel do mestre (layout) --------------------------- */
.page-mestre.container { width: min(100% - 40px, 1360px); }
.page-mestre .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.page-mestre .panel { min-width: 0; }
.page-mestre .table-wrap,
.page-mestre .mural-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.page-mestre .entry-table td:last-child,
.page-mestre .entry-table th:last-child { white-space: nowrap; padding-right: 14px; }
@media (max-width: 1080px) { .page-mestre .grid-2 { grid-template-columns: 1fr; } }

/* ------------------------------ mural em planilha ------------------------------ */
.mural-table-wrap { border: 0; border-radius: 0; }
.mural-table { width: 100%; border-collapse: collapse; font-family: var(--serif); font-size: 14px; }
.mural-table thead th {
  position: sticky; top: 0; z-index: 2; text-align: left; padding: 11px 12px;
  font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); background: var(--paper-2); border-bottom: 1px solid var(--line-strong);
}
.mural-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mural-table tbody tr:hover { background: rgba(194, 162, 74, 0.09); }
.mural-table tbody tr.is-master { background: rgba(194, 162, 74, 0.07); }
.mural-table tbody tr.is-master td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.mural-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mural-table__id .member-card__id { font-size: 11px; }
.mural-table__member { display: inline-flex; align-items: center; gap: 10px; }
.mural-table__member strong { font-family: var(--heading); font-size: 15px; }
.mural-table__member small { display: block; font-family: var(--ui); font-size: 11px; color: var(--muted); }
.mural-table__member .member-card__avatar { width: 32px; height: 32px; font-size: 13px; }


/* ------------------------------- mural: tickets ------------------------------- */
.mural-missions { margin: 6px 0 44px; }
.mural-members { margin-top: 8px; }
.mural-members .mural-section-head { margin-bottom: 16px; }

.ticket-list { display: grid; gap: 12px; }
.ticket {
  display: flex; align-items: stretch; min-height: 86px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 6px rgba(61, 10, 18, 0.04);
  overflow: hidden; position: relative;
}
.ticket.is-master { border-color: rgba(194, 162, 74, 0.8); background: #fffdf4; }
.ticket.is-master::before {
  content: 'MESTRE DA GUILDA'; position: absolute; top: 0; left: 0;
  font-family: var(--ui); font-size: 8px; letter-spacing: .18em; color: var(--cream);
  background: var(--crimson); padding: 3px 10px 3px 12px; border-radius: var(--radius) 0 8px 0;
}
.ticket.is-master .ticket__main { padding-top: 26px; }

.ticket__main {
  flex: 1; min-width: 0; display: grid; align-items: center; gap: 16px;
  grid-template-columns: minmax(190px, 1.5fr) 110px minmax(120px, 1fr) 72px 80px 72px;
  padding: 14px 18px;
}
.ticket__identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ticket__who { display: flex; flex-direction: column; min-width: 0; }
.ticket__who strong { font-family: var(--heading); font-size: 17px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket__who small { font-family: var(--ui); font-size: 12px; color: var(--muted); }
.ticket__field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ticket__field--num { align-items: flex-end; text-align: right; }
.ticket__label { font-family: var(--ui); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ticket__rank { font-family: var(--ui); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--crimson); border: 1px solid rgba(179, 21, 38, 0.25); border-radius: 999px; padding: 2px 9px; align-self: flex-start; }
.ticket__field strong { font-family: var(--heading); font-size: 17px; font-variant-numeric: tabular-nums; }

.ticket__stub {
  position: relative; flex: none; width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; background: var(--paper-2); border-left: 2px dashed var(--line-strong);
}
.ticket__stub::before,
.ticket__stub::after {
  content: ''; position: absolute; left: -8px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
}
.ticket__stub::before { top: -8px; }
.ticket__stub::after { bottom: -8px; }
.ticket__roblox { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ui); font-size: 11px; color: var(--ink); text-align: center; word-break: break-word; }
.ticket__code { font-family: var(--ui); font-size: 11px; letter-spacing: .18em; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }
.ticket__tear {
  display: block; width: 92px; height: 10px; opacity: .35;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px);
}
@media (max-width: 1000px) {
  .ticket__main { grid-template-columns: minmax(160px, 1.4fr) 1fr 1fr; row-gap: 12px; }
  .ticket__field--num { align-items: flex-start; text-align: left; }
}
@media (max-width: 720px) {
  .ticket { flex-direction: column; }
  .ticket__main { grid-template-columns: 1fr 1fr; }
  .ticket__stub { width: 100%; flex-direction: row; justify-content: space-between; border-left: 0; border-top: 2px dashed var(--line-strong); }
  .ticket__stub::before { left: -8px; top: -8px; }
  .ticket__stub::after { left: auto; right: -8px; top: -8px; bottom: auto; }
  .ticket__tear { display: none; }
}


/* ------------------------------ ações de linha ------------------------------ */
.row-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.row-actions form { margin: 0; display: inline-flex; }
.row-actions .btn { height: 32px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.row-actions .btn--icon { width: 34px; justify-content: center; padding: 0; }
.panel .entry-table td:last-child { padding-right: 12px; }


/* ------------------------------ botões de missão ------------------------------ */
.btn--pill { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
.btn--discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.btn--discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; transform: translateY(-1px); }

/* ------------------------------ campos de formulário ------------------------------ */
.field input,
.field textarea,
.panel input[type='text'],
.panel input[type='search'],
.panel input[type='email'],
.panel input[type='password'],
.panel input[type='number'],
.panel input[type='url'],
.panel input[type='tel'],
.panel input[type='date'],
.panel textarea {
  width: 100%;
  min-height: 42px;
  padding: 11px 13px;
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(61, 10, 18, 0.18);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(61, 10, 18, 0.04);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field textarea,
.panel textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
@supports (field-sizing: content) {
  .field textarea, .panel textarea { field-sizing: content; min-height: 108px; max-height: 420px; }
}
.field input::placeholder,
.field textarea::placeholder,
.panel input::placeholder,
.panel textarea::placeholder { color: rgba(61, 10, 18, 0.38); }
.field input:hover,
.field textarea:hover,
.panel input:hover,
.panel textarea:hover { border-color: rgba(194, 162, 74, 0.7); }
.field input:focus,
.field textarea:focus,
.panel input:focus,
.panel textarea:focus {
  outline: none;
  border-color: var(--crimson);
  background: #fffdfa;
  box-shadow: 0 0 0 3px rgba(179, 21, 38, 0.12), 0 1px 2px rgba(61, 10, 18, 0.05);
}
.field input:disabled,
.field textarea:disabled,
.panel input:disabled { background: rgba(61, 10, 18, 0.04); color: var(--muted); cursor: not-allowed; }
.field input:user-invalid,
.panel input:user-invalid { border-color: var(--crimson); box-shadow: 0 0 0 3px rgba(179, 21, 38, 0.1); }
.field input[type='search'] { padding-right: 13px; }
.field input[type='number'],
.panel input[type='number'] { font-variant-numeric: tabular-nums; }

/* marcas de seleção */
input[type='checkbox'],
input[type='radio'] { width: 16px; height: 16px; accent-color: var(--crimson); cursor: pointer; vertical-align: -2px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: 13px; color: var(--ink); }
.check input { margin: 0; }

/* busca do header: mantém o estilo escuro */
.nav-search input,
.nav-search input:focus,
.nav-search input:hover { background: transparent; border: 0; box-shadow: none; min-height: 0; border-radius: 0; }


/* a busca com ícone embutido mantém o wrapper como moldura */
.field--search input,
.field--search input:hover,
.field--search input:focus {
  border: 0; background: none; box-shadow: none; border-radius: 0; min-height: 0; padding: 12px 0; font-size: 15px;
}


/* ------------------------------ perfil do membro ------------------------------ */
.member-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(160px, 260px); gap: 22px; align-items: center;
  padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream);
  border-top: 3px solid var(--crimson);
}
.member-hero__avatar { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: var(--crimson); color: var(--cream); font-family: var(--display); font-size: 32px; }
.member-hero__name { font-size: clamp(28px, 3.4vw, 44px); margin: 4px 0; line-height: 1; }
.member-hero__handle { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--ui); font-size: 13px; color: var(--muted); }
.member-hero__rank { display: flex; flex-direction: column; gap: 4px; padding-left: 20px; border-left: 1px dashed var(--line-strong); }
.member-hero__rank strong { font-family: var(--heading); font-size: 19px; }
.member-hero__rank small { font-family: var(--ui); font-size: 11px; color: var(--muted); }
.member-progress { height: 8px; border-radius: 999px; background: rgba(61, 10, 18, 0.1); overflow: hidden; }
.member-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--crimson), var(--gold)); }
.member-stat { display: block; font-family: var(--heading); font-size: 30px; margin-top: 2px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.badge-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.badge-tile__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); color: #8a6d1d; flex: none; }
.badge-tile small { display: block; font-family: var(--ui); font-size: 11px; color: var(--muted); }
.ticket__identity { text-decoration: none; color: inherit; }
.ticket__identity:hover .ticket__who strong { color: var(--crimson); }
.mural-table__member { text-decoration: none; color: inherit; }
.mural-table__member:hover strong { color: var(--crimson); }
@media (max-width: 760px) {
  .member-hero { grid-template-columns: auto 1fr; }
  .member-hero__rank { grid-column: 1 / -1; border-left: 0; border-top: 1px dashed var(--line-strong); padding: 12px 0 0; }
}


/* ------------------------------ sem scroll lateral ------------------------------ */
html, body { overflow-x: clip; }
.admin-shell { grid-template-columns: 250px minmax(0, 1fr); }
.admin-main, .admin-content { min-width: 0; }
.admin-sidebar { overflow-x: hidden; overflow-y: auto; }
.sidebar-brand { min-width: 0; }
.sidebar-brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.admin-topbar { min-width: 0; }


/* --------------------------- ajuda nos modais --------------------------- */
.modal__help { padding: 0 18px 16px; border-top: 1px solid var(--line); }
.modal__help h3 { font-size: 15px; margin: 14px 0 8px; }
.modal__help ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-family: var(--ui); font-size: 13px; color: var(--ink); }
.modal__help a { color: var(--crimson); text-decoration: underline; text-underline-offset: 2px; }
.modal__help a:hover { color: var(--gold-2); }
.copy-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.copy-row code { font-family: var(--ui); font-size: 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; word-break: break-all; }


.modal__note { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(194, 162, 74, 0.1); border-radius: 0 4px 4px 0; font-family: var(--ui); font-size: 12.5px; color: var(--ink); }
.modal__note strong { color: var(--crimson); }


.panel--pending { border-left: 3px solid var(--gold); background: #fffdf4; }


/* ------------------------------ guia do painel ------------------------------ */
.guide-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-family: var(--ui); font-size: 13.5px; }
.guide-steps li::marker { color: var(--crimson); font-weight: 700; }
.guide-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-family: var(--ui); font-size: 13.5px; }
.guide-list li::marker { color: var(--gold-2); }
.guide-note { margin: 12px 0 0; font-size: 12.5px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.guide-grid h3 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
#site, #roblox, #discord-bot, #discord-oauth, #cargos, #webhooks, #bot-uso, #checklist { scroll-margin-top: 20px; }


/* ------------------------------ tiers de missão ------------------------------ */
.tier-matrix { display: grid; gap: 10px; }
.tier-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.tier-badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; font-family: var(--ui); font-weight: 800; font-size: 13px; color: var(--cream); background: var(--muted); flex: none; }
.tier-badge[data-tier='S'] { background: linear-gradient(135deg, #c2a24a, #8a6d1d); }
.tier-badge[data-tier='A'] { background: #b31526; }
.tier-badge[data-tier='B'] { background: #a4541e; }
.tier-badge[data-tier='C'] { background: #6a6a2a; }
.tier-badge[data-tier='D'] { background: #3f6a4a; }
.tier-badge[data-tier='E'] { background: #3d5a7a; }
.tier-badge[data-tier='F'] { background: #5a4a6a; }
.tier-ranks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 640px) { .tier-row { flex-direction: column; } }


/* --------------------------- painel com rolagem interna --------------------------- */
/* A sidebar fica fixa; só o conteúdo da direita rola. */
.admin-shell { height: 100vh; overflow: hidden; align-items: stretch; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.admin-main { height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.admin-topbar { position: sticky; top: 0; }

@media (max-width: 900px) {
  .admin-shell { height: auto; overflow: visible; }
  .admin-sidebar { position: static; height: auto; overflow: visible; }
  .admin-main { height: auto; overflow: visible; }
}


/* -------------------- botão de contorno em superfície clara -------------------- */
.btn--line {
  background: #fff;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--line:hover {
  background: var(--paper-2);
  color: var(--crimson);
  border-color: var(--crimson);
  transform: translateY(-1px);
}


/* ------------------------------ confirmação ------------------------------ */
dialog.modal--confirm { width: min(440px, calc(100% - 32px)); }
dialog.modal--confirm .modal__body p { font-family: var(--ui); font-size: 14px; line-height: 1.5; color: var(--ink); }


.chip--ok { color: #2f7d4f; border-color: rgba(47, 125, 79, 0.35); background: rgba(47, 125, 79, 0.1); }
.chip--warn { color: var(--crimson); border-color: rgba(179, 21, 38, 0.3); background: rgba(179, 21, 38, 0.08); }


.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.admin-grid .panel { border: 1px solid var(--line); }


/* ------------------------------ mapa interativo ------------------------------ */
.map-toolbar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.map-floors { display: flex; gap: 8px; flex-wrap: wrap; }
.map-floor { border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 7px 14px; font-family: var(--ui); font-size: 12px; cursor: pointer; }
.map-floor.is-active { background: var(--crimson); border-color: var(--crimson); color: var(--cream); }
.map-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.map-filter { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: 12px; cursor: pointer; }
.map-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.map-canvas { display: none; position: relative; width: 100%; min-height: 240px; max-height: 72vh; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #efe6d4; overflow: hidden; }
.map-canvas.is-active { display: block; }
.map-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-family: var(--ui); font-size: 13px; text-align: center; padding: 20px; }

.map-pin { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: var(--pin); color: #fff; border-radius: 999px; padding: 5px 10px 5px 7px; cursor: pointer;
  font-family: var(--ui); font-size: 11px; box-shadow: 0 4px 10px rgba(20, 6, 10, .35); }
.map-pin:hover { transform: translate(-50%, -100%) scale(1.06); }
.map-pin__label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-pin[hidden] { display: none; }

.map-drawer { position: fixed; top: 0; right: 0; width: min(380px, 92vw); height: 100vh; background: var(--cream);
  border-left: 1px solid var(--line-strong); box-shadow: -20px 0 50px rgba(20, 6, 10, .25); padding: 22px;
  transform: translateX(105%); transition: transform .22s ease; z-index: 60; overflow-y: auto; }
.map-drawer.is-open { transform: translateX(0); }
.map-drawer__close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 24px; cursor: pointer; color: var(--muted); }
.map-drawer__h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 16px 0 8px; }
.map-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-family: var(--ui); font-size: 13px; }


/* --------------------------- mapa: zoom e arrasto --------------------------- */
.map-canvas { cursor: default; touch-action: none; }
.map-canvas.is-dragging { cursor: grabbing; }
.map-zoom { position: relative; width: 100%; transform-origin: 0 0; will-change: transform; --inv: 1; }
.map-image { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.map-pin { transform: translate(-50%, -100%) scale(var(--inv, 1)); transform-origin: bottom center; }
.map-pin:hover { transform: translate(-50%, -100%) scale(calc(var(--inv, 1) * 1.06)); }
.map-controls { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; z-index: 5;
  background: rgba(253, 250, 243, .92); border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 10px; }
.map-ctrl { border: 0; background: none; font-size: 16px; line-height: 1; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; color: var(--ink); }
.map-ctrl:hover { background: var(--paper-2); color: var(--crimson); }
.map-zoom__value { font-family: var(--ui); font-size: 11px; color: var(--muted); min-width: 38px; text-align: center; }


/* --------------------------- calibração no mapa --------------------------- */
.cal-map-wrap { border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.cal-map { position: relative; width: 100%; background: #efe6d4; cursor: crosshair; }
.cal-zoom { position: relative; width: 100%; transform-origin: 0 0; will-change: transform; --inv: 1; }
.cal-image { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.cal-pin { transform: translate(-50%, -50%) scale(var(--inv, 1)); }
.cal-map .map-empty, .cal-map #cal-empty { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ui); font-size: 13px; color: var(--muted); }
.cal-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%;
  background: var(--crimson); color: #fff; display: grid; place-items: center; font-family: var(--ui); font-size: 12px; font-weight: 700;
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(20, 6, 10, .35); }


/* ---------------------------- editor lateral do mapa ---------------------------- */
.map-editor { position: fixed; top: 0; right: 0; width: min(330px, 92vw); height: 100vh; overflow-y: auto; z-index: 70;
  background: var(--cream); border-left: 1px solid var(--line-strong); box-shadow: -18px 0 44px rgba(20, 6, 10, .22);
  transform: translateX(105%); transition: transform .22s ease; }
.map-editor.is-open { transform: translateX(0); }
.map-editor__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2);
  font-family: var(--ui); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.map-editor__close { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.map-editor__body { padding: 14px 16px 40px; display: grid; gap: 8px; }
.map-editor__body h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 12px 0 2px; }
.map-editor__body .field span { font-size: 11px; }
.map-edit-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 71; }


/* ------------------------------ drops clicáveis ------------------------------ */
.drop-link { color: var(--crimson); border-bottom: 1px dashed rgba(179, 21, 38, .45); }
.drop-link:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }
.drop-card { position: absolute; z-index: 80; width: 260px; display: none; padding: 12px;
  background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(20, 6, 10, .3); font-family: var(--ui); }
.drop-card.is-open { display: block; }
.drop-card__img { width: 100%; height: 96px; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
.drop-card__section { margin: 0 0 2px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.drop-card__title { display: block; font-family: var(--heading); font-size: 15px; margin-bottom: 4px; }
.drop-card__summary { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.drop-card__stats { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.drop-card__row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; text-transform: capitalize; }
.drop-card__row strong { color: var(--ink); }
.drop-card__loading { margin: 0; font-size: 12px; color: var(--muted); }


.map-pin.is-focus { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(194, 162, 74, .25); }
.infobox--map { margin-bottom: 14px; }


/* ------------------------------ menção de registros ------------------------------ */
.mention-results { display: grid; gap: 4px; margin-top: 10px; max-height: 300px; overflow-y: auto; }
.mention-item { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; font-family: var(--ui); }
.mention-item:hover, .mention-item:focus { background: var(--paper-2); border-color: var(--line); }
.mention-item span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mention-item strong { font-family: var(--heading); font-size: 14px; }
.mention-item small { margin-left: auto; font-size: 10px; color: var(--muted); }