.br-guide { padding-bottom: 48px; }
.br-panel { padding-block: clamp(28px, 5vw, 54px); }
.br-panel[hidden] { display: none; }
.br-panel h2 { margin: 0 0 16px; font-size: clamp(28px, 3vw, 36px); }
.br-panel p, .br-panel figcaption { color: var(--color-text-muted); line-height: 1.65; }
.br-guide-block { margin-top: 24px; }
.br-guide-block h3, .br-intro h3, .br-guide-hero h3 { margin: 0 0 8px; }
.br-guide-block .portal-table-wrap { margin-block: 12px; }
.br-guide-block .portal-table { min-width: 0; width: 100%; }
.br-guide-block .portal-table :is(th, td) { overflow-wrap: anywhere; }
.br-guide-block .portal-table th[scope="row"] { text-align: start; }
.br-guide-hero, .br-guide-card, .br-panel details, .br-demo {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 16px;
}
.br-guide-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.br-guide-hero > div:first-child { flex: 1 1 260px; }
.br-mimic-art img { width: 90px; height: 90px; object-fit: contain; image-rendering: pixelated; }
.br-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-block: 12px; }
.br-guide-card h4 { margin: 0 0 6px; font-size: 18px; }
.br-guide-card p { margin: 0; }
.br-crystal-card > header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.br-crystal-card > header img { flex: none; width: 48px; height: 48px; image-rendering: pixelated; }
.br-crystal-card > header h4 { margin: 0; }
.br-guide-sprites, .br-guide-actions, .br-guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.br-guide-meta span { padding: 4px 8px; border-radius: 5px; background: var(--color-secondary-soft); font-size: 13px; }
.br-guide-sprites img, .br-guide-item img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.br-guide-sprites { margin-bottom: 8px; }
.br-guide-actions { margin-block: 16px; }
.br-panel details { margin-block: 10px; }
.br-panel summary { cursor: pointer; color: var(--color-primary); font-weight: 600; }
.br-guide-list {
  list-style: none;
  padding: 0;
  margin-block: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 8px;
}
.br-guide-item { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--color-border); border-radius: 8px; }
.br-guide-item small { display: block; color: var(--color-text-muted); }
.br-safe-figure { margin: 14px 0; }
.br-safe-figure figcaption { margin-top: 6px; font-size: 13px; }
.br-arena-preview {
  position: relative; width: min(100%, 260px); aspect-ratio: 5 / 3; overflow: hidden; border-radius: 8px;
  background: var(--color-secondary-soft); border: 1px solid var(--color-border);
}
.br-landing-map {
  position: relative;
  width: 80px;
  aspect-ratio: 1;
  margin-bottom: 8px;
  border: 2px solid #daf9df;
  border-radius: 50%;
  overflow: hidden;
  background: #264b38 url("./arte/battle-royale/npc/br-guide-assets/arena-payon.png") center / 245% no-repeat;
}
.br-landing-character {
  position: absolute;
  left: 68%;
  top: 51%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
  border: 1px solid #fff7d9;
  border-radius: 50%;
  background: #eaf2f4;
  box-shadow: 0 1px 3px #142d24;
}
.br-arena-preview img { width: 100%; height: 100%; object-fit: cover; }
.br-arena-zone { position: absolute; inset: 16% auto auto 30%; height: 68%; aspect-ratio: 1; border: 2px solid #daf9df; border-radius: 50%; box-shadow: 0 0 0 230px #193b3590; }
.br-landing-pin { position: absolute; inset: 45% auto auto 54%; width: 12px; height: 12px; border: 2px solid #fff7d9; border-radius: 50%; background: #285b78; }
.br-demo { background: var(--color-secondary-soft); }
.br-demo > p { margin-top: 0; }
@media (max-width: 540px) {
  .br-guide-block .portal-table { font-size: 12px; }
  .br-guide-block .portal-table :is(th, td) { padding-inline: 5px; }
  .br-demo { padding: 8px; }
}


/* The guide follows the NPC window: a title bar, topic rail and reading pane. */
.br-match { margin-block: clamp(32px, 5vw, 62px); }
.br-match > h2 { margin: 0 0 16px; font-size: clamp(24px, 3vw, 34px); }
.br-match-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.br-match-steps > li {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--color-gold-line);
  border-radius: 13px;
  background: linear-gradient(135deg, #fffdf9f2, #faf3e5);
  box-shadow: 0 4px 12px rgb(65 47 23 / 6%);
}
.br-match-steps h3 { margin: 0 0 5px; font-size: 19px; line-height: 1.2; }
.br-match-steps p { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.55; }
.br-step-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-gold-line);
  border-radius: 12px;
  background: #f7eedb;
}
.br-step-icon img, .br-window-nav img, .br-window-header img { object-fit: contain; }
.br-step-icon img, .br-window-nav img { image-rendering: pixelated; }
.br-step-icon .br-landing-map {
  width: 100%; height: 100%; margin: 0; border: 0; border-radius: inherit;
}
.br-step-icon .br-landing-character { width: 17px; height: 17px; }

.br-window {
  --br-navy: #1e3850;
  --br-gold: #c5a36c;
  --br-header-offset: var(--sticky-header-height, 104px);
  border: 1px solid var(--br-gold);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgb(65 47 23 / 9%);
  scroll-margin-top: var(--br-header-offset);
}
.br-window-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(14px, 2vw, 26px);
  border-radius: 15px 15px 0 0;
  border-bottom: 2px solid var(--br-gold);
  background: linear-gradient(104deg, #203950, #2f546d);
  color: #fff5de;
}
.br-window-header h2 { color: inherit; margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; }
.br-window-header p { color: #f2e6cb; margin: 4px 0 0; font-size: 12px; }
.br-window-header > img { background: #faf0d7; border: 1px solid var(--br-gold); border-radius: 9px; padding: 3px; }
.br-window-body { display: grid; grid-template-columns: clamp(170px, 18vw, 228px) minmax(0, 1fr); }
.br-window-nav {
  align-self: start;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}
.br-window-nav a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 8px 9px;
  color: var(--br-navy);
  background: #f8f3e8;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  line-height: 1.25;
}
.br-window-nav a:hover, .br-window-nav a[aria-selected="true"] { background: #e2edf3; border-color: #658eaa; }
.br-window-nav a[aria-selected="true"] { box-shadow: inset 3px 0 #2f6385; }
.br-window-nav a:focus-visible, .br-panel:focus-visible { outline: 2px solid #386f95; outline-offset: 2px; }
.br-window-nav #br-tab-mimic > img { scale: 1.5; }
.br-window-nav strong { display: block; font-size: 13px; }
.br-window-nav small { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }
.br-window-content { min-width: 0; border-inline-start: 1px solid var(--color-border); }
.br-window-content .br-panel { padding: clamp(15px, 2.4vw, 30px); scroll-margin-top: var(--br-header-offset); }
.br-panel > h2 { padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.br-panel h3 { font-size: clamp(20px, 2.5vw, 25px); }
.br-panel .br-guide-block h3 { margin-bottom: 10px; }
.br-panel .br-guide-block { margin-top: 24px; }
.br-panel .br-guide-card { background: #fbf7ed; }
#mimic .br-mimic-art,
#mimic .br-guide-meta > span { background: #d9e7ee; }
.br-panel .br-guide-hero { background: #edf3f5; padding: clamp(14px, 2.2vw, 24px); }
.br-panel .br-guide-hero p { margin-block: 6px 14px; }
.br-panel .br-arena-preview { width: min(100%, 300px); aspect-ratio: 2 / 1; }
.br-zone-summary { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); align-items: center; gap: 16px; }
.br-zone-summary .br-safe-figure, .br-zone-summary p { margin: 0; }
.br-panel details { padding: 11px 13px; }
.br-panel details[open] > summary { margin-bottom: 14px; }
.br-panel details .br-guide-list,
.br-category-panel .br-guide-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); }
.br-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-block: 12px 8px;
}
.br-category-tabs button {
  padding: 8px 10px;
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #f8f3e8;
  color: var(--br-navy);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
.br-category-tabs button:hover,
.br-category-tabs button[aria-selected="true"] {
  border-color: #658eaa;
  background: #e2edf3;
}
.br-category-tabs button[aria-selected="true"] { box-shadow: inset 0 -3px #2f6385; }
.br-category-tabs button:focus-visible,
.br-category-panel:focus-visible { outline: 2px solid #386f95; outline-offset: 2px; }
.br-category-panel {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
}
.br-category-panel[hidden] { display: none; }
.br-category-panel > :first-child { margin-top: 0; }
.br-category-panel > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .br-category-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#catalogo-loot .br-guide-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); }
.br-panel .br-guide-item { background: #fbf7ed; }
.br-panel .br-guide-item img, .br-loot-label img {
  flex: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}
.br-loot-table :is(th, td):not(:first-child) { text-align: center; }
.br-loot-label { display: flex; align-items: center; gap: 8px; }
.br-loot-table td { font-variant-numeric: tabular-nums; font-weight: 700; color: #235c76; }
.br-drop-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-block: 12px; }
.br-drop-links a { font-size: 13px; }
.br-mimic-art { display: grid; place-items: center; width: 128px; aspect-ratio: 1; border-radius: 50%; }
.br-mimic-art img { width: 112px; height: 112px; }
.br-mimic-chances strong { color: #235c76; }
@media (min-width: 841px) and (min-height: 650px) {
  .br-window-nav { position: sticky; top: var(--br-header-offset); }
}
@media (max-width: 840px) {
  .br-match-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-window-body { grid-template-columns: minmax(0, 1fr); }
  .br-window-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .br-window-content { border-inline-start: 0; border-top: 1px solid var(--color-border); }
}
@media (max-width: 540px) {
  .br-match-steps { grid-template-columns: minmax(0, 1fr); }
  .br-match-steps > li { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .br-window-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px; }
  .br-window-nav a { min-height: 46px; grid-template-columns: 25px minmax(0, 1fr); gap: 5px; padding: 6px; }
  .br-window-nav img { width: 25px; height: 25px; }
  .br-window-nav small { display: none; }
  .br-zone-summary { grid-template-columns: minmax(0, 1fr); }
  .br-loot-label { gap: 4px; }
  .br-loot-label img { width: 20px; height: 20px; }
}