/* 🎲 d20 Arena · web v1 (teams). Palette from docs/arte/04-layout-web.md; no fonts or assets from outside. */
:root {
  /* the "Arcano" identity (the owner, 05/10/2026; docs/pendencias/ACK-tela-inicial-enxuta.md): a deep indigo page, violet panels, bone
     white with a lilac tint, bronze for the metal. The colours with an owner did not move: the two sides, gold, HP and the damage types. */
  --page: #110e21;
  --panel: #1a1632;
  --panel-2: #241f45;
  --border: #383063;
  --text: #f1edff;
  --dim: #a6a0cc;
  --side-a: #e8412c;
  --hint-table: color-mix(in srgb, var(--side-a) 60%, #ffc861); /* the heroes of a real table: the red of the heroes, a little warmer */
  --side-a-2: #ff8a1f;
  --side-b: #1f8fe8;
  --side-b-2: #22d3ee;
  /* gold: ONLY the d20 (natural 20), Critical Hit and victory (docs/arte/01-identidade.md; AAG decisions 23 and 45) */
  --gold: #f5c542;
  /* a nickname the player gave: its own colour wherever it is written, so it never passes for the name of the sheet (the owner,
     07/10/2026: "Deixa a fonte do apelido escrito de uma cor mais chamativa tb") */
  --nickname: #ffa8e8;
  /* bone white: the active fighter's glow, the current turn, selected and focused controls */
  --bone: #f1edff;
  --bone-glow: rgba(241, 237, 255, 0.6);
  /* bronze: map fittings (the Tavern doors); gold stays for the d20, Critical Hit and victory (docs/arte/01-identidade.md) */
  --bronze: #d08a45;
  /* card frames (docs/WEB.md, "Molduras de card"): flat centre of the wood panel (the stone one is --panel), the dark parchment
     name plate and the bronze inlay of the kit (never gold) */
  --wood-center: #1f1a3a;
  --plate: #33295c;
  --plate-2: #261f47;
  --bronze-line: #b0793a;
  --hp-green: #3ecf6a;
  --hp-yellow: #f2c230;
  --hp-red: #e5484d;
  --magic: #9b5de5;
  --sand: #8e7550;
  --sand-2: #a88a5e;
  --water: #1f3a44;
  --water-2: #2c5360;
  --rock: #3b3f4a;
  --radius: 10px;
  /* type (docs/arte/01-identidade.md §3): the hosted faces of static/fonts.css first, the system stacks as the fallback
     (a face that has not loaded yet, a glyph outside the latin subset, every emoji) */
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --mono-system: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --font: "Nunito Sans", var(--font-system);
  --font-display: "Fraunces", var(--font-system);
  --font-num: "Barlow Condensed", var(--font-system);
  --mono: "JetBrains Mono", var(--mono-system);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.45; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; flex: 1; min-width: 0; }
h1 { font-size: 1.6rem; margin: 0.2em 0 0.3em; letter-spacing: 0.02em; }
h2 { font-size: 1.05rem; margin: 0 0 0.6em; letter-spacing: 0.06em; text-transform: uppercase; }
button, select, input { font: inherit; color: inherit; }
/* the identity faces (static/fonts.css): Oswald on titles, the wordmark and the main button; Barlow Condensed on the numbers */
h1, h2 { font-family: var(--font-display); font-weight: 600; }
.wordmark, .btn-primary, .resolving-title { font-family: var(--font-display); }
.count, .round-label, .bar-nums, .win-value, .sheet-stat dd, .r-group-count, .picker-count { font-family: var(--font-num); }

.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #15112a; }
/* the emblem and the name are the way Home from every page (a real link since 05/10/2026, when the Home button left the result) */
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 6px; }
.brand:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.logo { font-size: 1.5rem; }
.wordmark { font-weight: 800; font-size: 1.25rem; letter-spacing: 0.03em; }
.tagline { color: var(--dim); font-size: 0.9rem; margin-left: auto; }
/* header actions: the language toggle (and room for a small account link next to it) */
/* room between the controls of the header (the owner, 06/10/2026: "Quero melhorar o respiro ali nos botões a direita acima") */
.topbar-actions { display: flex; align-items: center; gap: 14px; margin-left: 12px; }

/* Account coins and the admin's simulation menu. */
.levels-header { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.coin-badge { --coin: #b87333; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid var(--coin); border-radius: 999px; background: color-mix(in srgb, var(--coin) 18%, #15112a); color: var(--text); font-weight: 700; white-space: nowrap; }
.coin-badge .coin-emoji { font-size: 1.15em; line-height: 1; }
.coin-badge .coin-img { width: 1.25em; height: 1.25em; flex: 0 0 auto; object-fit: contain; }
.coin-silver { --coin: #bdc8d4; }
.coin-electrum { --coin: #b4c794; }
.coin-gold { --coin: #d7a836; }
.coin-platinum { --coin: #e1e6eb; }
.role-tag { padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--dim); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.view-as-control { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); }
.view-as-control select { max-width: 140px; min-height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; }
.admin-simulator { position: relative; z-index: 30; color: var(--text); }
.admin-simulator summary { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 9px; border: 1px solid var(--bone); border-radius: 7px; background: var(--panel); cursor: pointer; list-style: none; font-weight: 700; }
.admin-simulator summary::-webkit-details-marker { display: none; }
.admin-simulator summary:focus-visible, .admin-simulator-option:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.admin-simulator-current { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.admin-simulator-current .coin-badge { padding: 1px 5px; }
.admin-simulator-menu { position: absolute; top: calc(100% + 5px); right: 0; width: min(360px, calc(100vw - 24px)); max-height: min(68vh, 560px); overflow-y: auto; padding: 8px; border: 1px solid var(--bone); border-radius: 8px; background: #171a23; box-shadow: 0 10px 30px #000b; }
.admin-simulator-group { margin: 9px 4px 4px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--dim); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.admin-simulator-option { display: flex; align-items: center; gap: 5px; width: 100%; min-height: 38px; padding: 5px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.admin-simulator-option:hover, .admin-simulator-option[aria-current="true"] { background: #353b49; }
.admin-simulator-option:disabled { opacity: .6; cursor: wait; }
.admin-link { white-space: nowrap; }
/* The simulation notice: a sticker in the top bar, next to the name of the site, in the place of the tagline. It adds no height to the
   page (the owner, 12/10/2026); while it shows, the header stays at the top of the screen, so the notice is never out of sight. */
.view-as-banner { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; padding: 3px 5px 3px 12px; border: 1px solid #d7a836; border-radius: 999px; background: rgba(69, 53, 16, 0.94); color: #fff1c1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.view-as-banner strong { font: 700 0.92rem var(--font-num); white-space: nowrap; }
.view-as-banner .btn-small { min-height: 26px; padding: 2px 10px; font-size: 0.82rem; }
.topbar.is-simulating { position: sticky; top: 0; z-index: 25; }
.topbar.is-simulating .tagline { display: none; }
.topbar.is-simulating .topbar-actions { margin-left: auto; }
body.fight-mode .view-as-banner { gap: 2px 8px; padding: 1px 3px 1px 10px; }
body.fight-mode .view-as-banner strong { font-size: 0.82rem; }
body.fight-mode .view-as-banner .btn-small { min-height: 22px; padding: 0 8px; font-size: 0.78rem; }
.view-as-error { margin: 0; text-align: center; }
.r-card.is-locked { opacity: 0.62; }
.r-card.is-locked:hover, .r-card.is-locked:focus-within { opacity: 1; }
.r-lock-label { display: block; margin-top: 3px; color: #ffd98a; font-size: 0.78rem; font-weight: 700; }
.r-locked-coin { align-self: center; flex: none; font-size: 0.72rem; }
.admin-page { max-width: 1180px; margin: 0 auto; padding: clamp(12px, 3vw, 32px) 0 48px; }
.admin-heading { padding: 4px clamp(4px, 2vw, 18px) 12px; }
.admin-heading h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.admin-heading h1:focus { outline: none; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admin-grid .panel { margin: 0; padding: clamp(14px, 2.5vw, 24px); min-width: 0; }
.admin-grid h2 { color: var(--bronze); margin: 0 0 12px; }
.admin-accounts { grid-column: 1 / -1; }
.admin-table-wrap { overflow-x: auto; }
.admin-page table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.admin-page th, .admin-page td { padding: 9px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.admin-page th { color: var(--dim); font: 700 0.76rem var(--font-num); text-transform: uppercase; letter-spacing: 0.03em; }
.admin-page td:first-child { font-weight: 700; }
.admin-list { margin: 0; padding-left: 1.3em; }
.admin-list li { margin: 7px 0; }
.admin-number { font: 700 1.4rem var(--font-num); color: var(--text); }
.admin-coin-select { min-height: 34px; min-width: 7.5rem; padding: 2px 6px; font-size: .9rem; }  /* ACI, item 1: the coin of an account, on its row of the panel */
.admin-coin-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.admin-coin-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 680px) {
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-accounts { grid-column: auto; }
  .admin-page table, .admin-page tbody, .admin-page tr, .admin-page td { display: block; width: 100%; }
  .admin-page thead { display: none; }
  .admin-page tr { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); }
  .admin-page td { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; text-align: right; overflow-wrap: anywhere; }
  .admin-page td::before { content: attr(data-label); color: var(--dim); font-weight: 600; text-align: left; }
  .admin-page td:first-child { font-size: 1.08rem; }
  .admin-coin-list li { flex-wrap: wrap; }
}
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--dim); font-size: 0.8rem; letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; }
.lang-toggle:hover { border-color: var(--bone); color: var(--text); }
.lang-toggle:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.lang-toggle .lang-opt { padding: 1px 6px; border-radius: 999px; font-weight: 500; }
.lang-toggle .lang-opt.active { color: #15112a; background: var(--bone); font-weight: 800; }
.footer { text-align: center; padding: 16px; border-top: 1px solid var(--border); flex-direction: column; gap: 8px; }
.footer-about { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer-about:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
/* the content line of the footer and the page of privacy and terms (ACS, piece 18; the owner, 09/10/2026: "Aprovo como base") */
.footer-content { display: block; max-width: 78ch; margin: 0 auto; color: var(--dim); font-size: 0.82rem; line-height: 1.5; }
.privacy-page { max-width: 920px; }
.privacy-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.privacy-panel { width: min(100%, 78ch); justify-self: center; margin: 0; padding: clamp(16px, 3vw, 26px); border-color: #48405f; background: linear-gradient(135deg, #1d1935, var(--panel) 72%); }
.privacy-panel h2 { margin: 0 0 12px; color: var(--bronze); font-size: 1.05rem; }
.privacy-list { display: grid; gap: 11px; margin: 0; padding: 0; line-height: 1.7; list-style: none; }
.privacy-list li { position: relative; min-width: 0; padding-left: 18px; overflow-wrap: anywhere; }
.privacy-list li::before { position: absolute; top: 0.72em; left: 2px; width: 6px; height: 6px; border: 1px solid var(--bronze); transform: rotate(45deg); content: ""; }
.privacy-updated { max-width: 78ch; margin: 15px auto 0; color: var(--dim); line-height: 1.55; }
/* the showcase of the open Wood league, on the visitor's Home (ACS, piece 2e): the structure only */
.home-showcase { margin-top: 14px; border-color: var(--border); border-left: 2px solid var(--bronze-line); background: linear-gradient(120deg, #1d1935, var(--panel) 58%); }
.home-showcase-title { margin: 0 0 4px; color: var(--bronze); font-size: 1.05rem; }
.home-showcase-lead { margin: 0; line-height: 1.55; }
.home-showcase-list { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 12px; }
.home-showcase-link { display: inline-flex; flex: 0 1 calc((100% - 20px) / 3); align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 8px 12px; border-color: color-mix(in srgb, var(--coin) 68%, var(--border)); background: color-mix(in srgb, var(--coin) 7%, var(--panel-2)); color: var(--text); text-align: left; text-decoration: none; white-space: normal; transition: border-color 0.14s, background-color 0.14s; }
.home-showcase-link.coin-copper { --coin: #b87333; }
.home-showcase-link:hover { border-color: var(--coin); background: color-mix(in srgb, var(--coin) 13%, var(--panel-2)); }
.home-showcase-link:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
.home-showcase-label { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.home-showcase-coin { width: 30px; height: 30px; flex: none; object-fit: contain; }
@media (max-width: 520px) {
  .home-showcase-list { flex-direction: column; }
  .home-showcase-link { flex: 0 0 auto; width: 100%; min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-showcase-link { transition: none; }
}
/* the SRD notice (08/10/2026): a quiet chip in the footer; the mouse shows the card, a click pins it (static/app.js) */
.footer .footer-srd { appearance: none; min-height: 0; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: inherit; font: inherit; padding: 2px 10px; cursor: pointer; text-shadow: inherit; box-shadow: none; }
.footer .footer-srd:hover, .footer .footer-srd[aria-expanded="true"] { border-color: var(--bronze-line); color: var(--text); background: transparent; }
.footer-srd:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.srd-note { position: fixed; inset: auto 16px 72px 16px; margin: 0 auto; width: min(540px, calc(100vw - 32px)); padding: 18px 20px 16px; border: 1px solid var(--bronze-line); border-radius: 16px; background: #1b1738; color: var(--text); box-shadow: 0 18px 44px #000c; text-align: left; }
.srd-note::backdrop { background: transparent; }
.srd-note h2 { margin: 0 44px 10px 0; font-size: 1.05rem; }
.srd-note p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.55; }
.srd-note .srd-note-links { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed var(--border); color: var(--dim); font-size: 0.84rem; }
.srd-note-links a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.srd-note-close { position: absolute; top: 10px; right: 10px; }

/* About uses the page frame, panels and type scale of the arena screens. */
.about { max-width: 920px; margin: 0 auto; padding: clamp(12px, 3vw, 32px) 0 48px; }
.about-heading { padding: 4px clamp(4px, 2vw, 18px) 12px; }
.about-eyebrow { margin: 0; color: var(--bronze); font: 600 0.78rem var(--font-num); letter-spacing: 0.15em; }
.about h1 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.12; }
.about .lead { max-width: 64ch; font-size: 1.07rem; }
.about-panels { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.9fr); gap: 14px; }
.about-panels .panel { margin: 0; padding: clamp(18px, 3vw, 28px); }
.about-panels h2 { margin-bottom: 12px; color: var(--bronze); }
.about-panels p { margin: 0; }
.about-license-note { color: var(--dim); font-size: 0.88rem; }
.about-attribution { margin: 16px 0 0; padding: 16px 18px; border-left: 3px solid var(--bronze); border-radius: 0 8px 8px 0; background: var(--panel-2); line-height: 1.6; overflow-wrap: anywhere; }
.about-attribution a { color: var(--side-b-2); text-decoration: underline; text-underline-offset: 3px; }
.about-attribution a:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
@media (max-width: 680px) {
  .about-panels { grid-template-columns: minmax(0, 1fr); }
  .about-attribution { padding: 12px; }
}

.lead { color: var(--dim); margin-top: 0; }
.dim { color: var(--dim); }
.small { font-size: 0.85rem; }
.error { background: #3a1417; border: 1px solid var(--hp-red); color: #ffd9da; padding: 10px 12px; border-radius: var(--radius); }
.warn { color: #ffd98a; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin: 14px 0; min-width: 0; }
details.panel > summary { cursor: pointer; font-weight: 700; letter-spacing: 0.04em; }
details.panel[open] > summary { margin-bottom: 10px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--dim); min-width: 0; }
.field.grow { flex: 1 1 220px; }
select, input { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; min-height: 44px; width: 100%; color: var(--text); min-width: 0; }
select:focus, input:focus, button:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }

/* ---- setup: teams ---------------------------------------------------------------- */
.teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; }
.team { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; border-top: 4px solid var(--border); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.team.side-a { border-top-color: var(--side-a); }
.team.side-b { border-top-color: var(--side-b); }
.team-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.team-head h2 { margin: 0; }
.count { font-weight: 800; font-variant-numeric: tabular-nums; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 10px; }
.versus { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--gold); font-weight: 800; }
.versus span { font-size: 0.9rem; letter-spacing: 0.1em; }

.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.slot { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 6px 4px 8px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); min-width: 0; }
.slot.empty { background: transparent; border-style: dashed; color: var(--dim); justify-content: center; font-size: 0.85rem; }
.slot .s-emoji { font-size: 1.3rem; }
.slot .s-text { flex: 1; min-width: 0; }
.slot .s-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .s-name.has-alias { white-space: normal; overflow-wrap: anywhere; }
.slot .s-sub { color: var(--dim); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alias-field { display: grid; gap: 3px; min-width: 0; margin-top: 5px; }
.alias-label { color: var(--dim); font-size: 0.72rem; line-height: 1.2; }
.alias-input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; }
.alias-input:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; }
.alias-input, .alias-text, .stats-fighter-name.has-alias, .wizard-alias-row:has(.wizard-alias-sheet:not([hidden])) .wizard-alias-name { color: var(--nickname); font-weight: 700; }
.alias-input[aria-invalid="true"] { border-color: var(--hp-red); }
.alias-error { color: var(--hp-red); font-size: 0.72rem; overflow-wrap: anywhere; }
.alias-error:empty { display: none; }
.slot .s-remove { min-width: 40px; min-height: 40px; border-radius: 8px; border: 1px solid var(--border); background: transparent; cursor: pointer; }
.slot .s-remove:hover { border-color: var(--hp-red); }
.formation-desc { margin: 0; min-height: 1.2em; }
.formation-preview { min-height: 24px; overflow: auto; max-width: 100%; }

/* ---- setup: roster picker (filter bar, sections by folder group, cards, detail sheet) ---- */
.picker-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 8px; }
.picker-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-set { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip-set.kinds { margin: 10px 0 0; }
.chip-btn { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.chip-btn:hover { border-color: var(--dim); }
.chip-btn.on { background: var(--bone); border-color: var(--bone); color: #15112a; font-weight: 800; }
.chip-set.kinds .chip-btn { min-height: 40px; font-size: 0.92rem; padding: 6px 14px; }
.chip-btn.clear:disabled { opacity: 0.45; cursor: default; }
.filters-toggle { display: none; }
.badge-count { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 999px; background: var(--bone); color: #15112a; font-size: 0.75rem; text-align: center; }
.filter-more { display: grid; gap: 6px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(241, 237, 255, 0.03); border: 1px solid var(--border); }
.filter-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px; align-items: center; }
.filter-label { color: var(--dim); font-size: 0.8rem; letter-spacing: 0.02em; }

/* align-content: start keeps the groups together at the top when the filters leave few of them in a tall list (the grid rows used to
   stretch and spread the headers down the panel; owner's screenshot of 28/09/2026) */
.roster-groups { display: grid; gap: 8px; align-content: start; min-height: 0; overflow-y: auto; padding-right: 2px; }
.r-group { min-width: 0; }
.r-group-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: #15112a; color: var(--text); font-weight: 800; letter-spacing: 0.03em; cursor: pointer; text-align: left; position: sticky; top: 0; z-index: 1; }
.r-group-head:hover { border-color: var(--dim); }
.r-caret { color: var(--gold); width: 1em; }
.r-group-count { color: var(--dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.r-cards { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
/* the kind colour lives on the portrait ring; the card itself wears the wood frame (the 2 px of the old 3 px kind border moved to the padding) */
.r-card { display: flex; align-items: stretch; gap: 4px; padding: 4px 4px 4px 6px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); min-width: 0; }
.r-main { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.r-main:hover { background: rgba(241, 237, 255, 0.04); }
.r-portrait { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #0f121a; border: 2px solid var(--border); font-size: 1.35rem; font-weight: 800; line-height: 1; }
.r-portrait.kind-hero { border-color: var(--gold); }
.r-portrait.kind-npc { border-color: #7aa2c8; }
.r-portrait.kind-animal { border-color: var(--hp-green); }
.r-portrait.kind-monster { border-color: var(--magic); }
.r-portrait.big { width: 56px; height: 56px; font-size: 1.8rem; }
.r-portrait-image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.r-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.r-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sub { color: var(--dim); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.badge { font-size: 0.7rem; line-height: 1.35; padding: 0 5px; border-radius: 6px; border: 1px solid var(--border); background: #141823; white-space: nowrap; }
.badge.size { color: var(--dim); }
.badge.stats { border-color: transparent; background: transparent; padding-left: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.badge.famous, .badge.legendary { border-color: var(--gold); }
.badge.restricted { color: var(--text); border-color: var(--bronze-line); background: var(--plate-2); }
.r-adds { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.r-add { min-width: 44px; min-height: 34px; border-radius: 8px; border: 1px solid var(--border); background: transparent; font-weight: 800; cursor: pointer; }
.r-add.a { color: var(--side-a-2); border-color: var(--side-a); }
.r-add.b { color: var(--side-b-2); border-color: var(--side-b); }
.r-add:disabled { opacity: 0.35; cursor: not-allowed; }
.r-add.big { min-height: 48px; flex: 1; font-size: 1.05rem; }
.r-empty { color: var(--dim); padding: 8px; margin: 0; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(11, 9, 22, 0.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sheet { width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.sheet-head { display: flex; align-items: center; gap: 10px; }
.sheet-title { flex: 1; min-width: 0; }
.sheet-title h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.sheet-title p { margin: 2px 0 0; }
.sheet-close { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; }
#sheet-badges { margin: 8px 0 0; }
#sheet-badges .badge { font-size: 0.78rem; padding: 1px 7px; }
.sheet-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; }
.sheet-stat { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; min-width: 0; }
.sheet-stat dt { color: var(--dim); font-size: 0.72rem; }
.sheet-stat dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sheet-body h4 { margin: 12px 0 4px; font-size: 0.9rem; letter-spacing: 0.04em; }
.sheet-attacks { margin: 0; padding-left: 18px; font-size: 0.88rem; }
.sheet-attacks li { margin: 2px 0; overflow-wrap: anywhere; }
.sheet-line { margin: 6px 0 0; font-size: 0.86rem; overflow-wrap: anywhere; }
.sheet-actions { display: flex; gap: 8px; margin-top: 12px; }
body.sheet-open { overflow: hidden; }

.rules-grid, .advanced-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#advanced .advanced-coach { margin: 10px 0 4px; color: var(--text); font-size: 0.9rem; line-height: 1.35; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.chips.center { justify-content: center; }
.chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 0.85rem; }
.chip.side-a { border-color: var(--side-a); }
.chip.side-b { border-color: var(--side-b); }
.chip.lair { border-color: var(--magic); }
.chip.sunlight { border-color: var(--bronze); color: var(--text); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0; }
.btn-primary, .btn, .ctrl { border-radius: 10px; border: 1px solid var(--border); cursor: pointer; min-height: 44px; padding: 10px 18px; }
.btn-primary { background: linear-gradient(90deg, var(--side-a) 0, var(--text) 18%, var(--text) 82%, var(--side-b) 100%); color: #120f24; font-weight: 800; letter-spacing: 0.06em; font-size: 1.1rem; min-width: 220px; border: 0; }
.btn-primary:disabled { opacity: 0.6; cursor: progress; }
.btn, .ctrl { background: var(--panel-2); }
.btn:hover, .ctrl:hover { border-color: var(--dim); }

/* ---- resolving overlay ----------------------------------------------------------- */
.resolving { position: fixed; inset: 0; background: rgba(11, 9, 22, 0.8); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.resolving-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; text-align: center; max-width: 360px; }
.resolving-title { font-weight: 800; font-size: 1.15rem; letter-spacing: 0.04em; margin: 8px 0 4px; }
.spinner { font-size: 2.6rem; display: inline-block; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- map ------------------------------------------------------------------------- */
.map-box { overflow: auto; max-width: 100%; border-radius: 8px; background: #0c0a18; border: 1px solid var(--border); }
#fight-map.camera-mode { position: relative; overflow: hidden; height: min(62vw, 420px); min-height: 220px; }
#fight-map.camera-mode .map-wrap { position: absolute; inset: 0; overflow: hidden; }
#fight-map.camera-mode .map { transform-origin: 0 0; will-change: transform; }
#fight-map.camera-mode .map-layers, #fight-map.camera-mode .map-art-switch { z-index: 8; }
#fight-map.camera-mode .map-layers { top: 4px !important; }
#fight-map.camera-mode .map-art-switch { bottom: 4px; }
.fight-camera-toggle { align-self: flex-start; min-height: 30px; margin: 4px 0 2px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 0.8rem; cursor: pointer; }
.fight-camera-toggle[aria-pressed="true"] { border-color: var(--bone); }
.fight-camera-toggle:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #fight-map.camera-mode .map { transition: none !important; } }
.formation-preview .map-box, .formation-preview.map-box { border: 0; background: transparent; }
.map-wrap { position: relative; margin: 0; }
.map { position: absolute; background-color: var(--sand); background-image: linear-gradient(rgba(17, 14, 33, 0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 14, 33, 0.28) 1px, transparent 1px); background-size: var(--cell) var(--cell); overflow: hidden; }
.map-axis { position: absolute; font-family: var(--mono); color: var(--dim); font-size: 10px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.terrain { position: absolute; }
.terrain.wall { background: var(--rock); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.terrain.water { background: linear-gradient(180deg, var(--water-2), var(--water)); }
.terrain.shallow { background: var(--water-2); opacity: 0.55; }
.terrain.difficult { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.18) 0 3px, transparent 3px 7px); }
.token { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); border: 2px solid rgba(255, 255, 255, 0.85); transition: left var(--move-ms, 380ms) ease, top var(--move-ms, 380ms) ease, width 180ms ease, height 180ms ease, opacity 0.3s, filter 0.3s, box-shadow 0.2s; z-index: 2; letter-spacing: -0.02em; user-select: none; }
.token.body-motion { transition: left var(--move-ms, 380ms) ease, top var(--move-ms, 380ms) ease, width var(--move-ms, 380ms) ease, height var(--move-ms, 380ms) ease, opacity 0.3s, filter 0.3s, box-shadow 0.2s; }
.token.shared-square { transition-duration: 180ms; }
.token.mounted-rider { z-index: 3; } /* mounted combat (16/10/2026): the rider's token, smaller, rides centred on its mount's */
@media (prefers-reduced-motion: reduce) { .token.body-motion { transition: none; } }
.map.no-anim .token { transition: none; }
.reach-cells { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.reach-cell { position: absolute; box-sizing: border-box; border: 1px solid rgba(241, 237, 255, 0.42); background: rgba(241, 237, 255, 0.1); }
.token.side-a { background-color: var(--side-a); }
.token.side-b { background-color: var(--side-b); }
.token.side-a.tone-2 { background-color: var(--side-a-2); }
.token.side-a.tone-3 { background-color: #c2361f; }
.token.side-a.tone-4 { background-color: #ff6a3d; }
.token.side-a.tone-5 { background-color: #b85a12; }
.token.side-a.tone-6 { background-color: #f0563a; }
.token.side-b.tone-2 { background-color: #0fa3c4; }
.token.side-b.tone-3 { background-color: #1766b8; }
.token.side-b.tone-4 { background-color: #1ab6d8; }
.token.side-b.tone-5 { background-color: #2a7de0; }
.token.side-b.tone-6 { background-color: #0b8aa8; }
/* the active fighter: a dark gap, a bone-white ring and a soft bone glow (gold stays for the d20, Critical Hit and victory) */
.token.active { box-shadow: 0 0 0 2px #110e21, 0 0 0 4px var(--bone), 0 0 14px 3px var(--bone-glow); z-index: 4; }
.token.flying { z-index: 3; }
.token.out { filter: grayscale(1); opacity: 0.45; border-style: dashed; }
.token.out::after { content: "💤"; position: absolute; font-size: 0.8em; top: -0.55em; right: -0.45em; text-shadow: none; }
.token.hit { animation: token-hit 0.45s ease; }
.token.miss { animation: token-miss 0.45s ease; }
.token .badge-z { position: absolute; bottom: -0.6em; right: -0.7em; background: #120f24; color: var(--side-b-2); border: 1px solid var(--dim); border-radius: 6px; font-size: 9px; padding: 0 3px; line-height: 1.3; font-weight: 700; text-shadow: none; white-space: nowrap; }
/* buildings, furniture and obscurement (the Tavern, docs/REGRAS-DA-ARENA.md §13) */
.terrain.window { background: var(--rock); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.terrain.window::after { content: ""; position: absolute; left: 10%; right: 10%; top: 36%; bottom: 36%; background: linear-gradient(90deg, #8ec9f5, #dff2ff, #8ec9f5); border: 1px solid #16324a; border-radius: 1px; }
.terrain.table::after { content: ""; position: absolute; inset: 20%; background: #8a5a2b; border: 1px solid #3f260e; border-radius: 35%; }
/* one block per table (owner's request of 27/09/2026): the stools or the chairs peek out along the long sides, under the top */
.terrain.table::before { content: ""; position: absolute; left: 26%; right: 26%; top: 5%; bottom: 5%; border-top: calc(var(--cell) * 0.1) solid #5b3a1e; border-bottom: calc(var(--cell) * 0.1) solid #5b3a1e; border-radius: 2px; }
.terrain.table.long::before { inset: calc(var(--cell) * 0.03) calc(var(--cell) * 0.12); border: 0; border-radius: 0; background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--cell) * 0.12), #6b4423 calc(var(--cell) * 0.12) calc(var(--cell) * 0.38), transparent calc(var(--cell) * 0.38) calc(var(--cell) * 0.5)), repeating-linear-gradient(90deg, transparent 0 calc(var(--cell) * 0.12), #6b4423 calc(var(--cell) * 0.12) calc(var(--cell) * 0.38), transparent calc(var(--cell) * 0.38) calc(var(--cell) * 0.5)); background-size: 100% calc(var(--cell) * 0.2), 100% calc(var(--cell) * 0.2); background-position: left top, left bottom; background-repeat: no-repeat; }
.terrain.table.long.upright::before { inset: calc(var(--cell) * 0.12) calc(var(--cell) * 0.03); background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cell) * 0.12), #6b4423 calc(var(--cell) * 0.12) calc(var(--cell) * 0.38), transparent calc(var(--cell) * 0.38) calc(var(--cell) * 0.5)), repeating-linear-gradient(0deg, transparent 0 calc(var(--cell) * 0.12), #6b4423 calc(var(--cell) * 0.12) calc(var(--cell) * 0.38), transparent calc(var(--cell) * 0.38) calc(var(--cell) * 0.5)); background-size: calc(var(--cell) * 0.2) 100%, calc(var(--cell) * 0.2) 100%; background-position: left top, right top; }
/* the top: planks, then a plate and a mug of ale for each square (--cols x --rows from app.js); a feast table (3 x 2 or more) has the roast in the middle */
.terrain.table.long::after { inset: calc(var(--cell) * 0.2) calc(var(--cell) * 0.1); border-radius: calc(var(--cell) * 0.14); background-color: #8a5a2b; background-image: radial-gradient(circle at 30% 34%, #ece4d0 0 12%, #a99a7a 13% 17%, transparent 18%), radial-gradient(circle at 68% 66%, #c7892f 0 8%, #5f6269 9% 13%, transparent 14%), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px calc(var(--cell) * 0.2)); background-size: calc(100% / var(--cols, 1)) calc(100% / var(--rows, 1)), calc(100% / var(--cols, 1)) calc(100% / var(--rows, 1)), auto; }
.terrain.table.long.upright::after { inset: calc(var(--cell) * 0.1) calc(var(--cell) * 0.2); }
.terrain.table.feast::after { background-image: radial-gradient(ellipse calc(var(--cell) * 0.5) calc(var(--cell) * 0.3) at 50% 50%, #9b4a22 0 55%, #5c2410 58% 70%, #d9cdb0 72% 86%, transparent 88%), radial-gradient(circle at 30% 34%, #ece4d0 0 12%, #a99a7a 13% 17%, transparent 18%), radial-gradient(circle at 68% 66%, #c7892f 0 8%, #5f6269 9% 13%, transparent 14%), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px calc(var(--cell) * 0.2)); background-size: auto, calc(100% / var(--cols, 1)) calc(100% / var(--rows, 1)), calc(100% / var(--cols, 1)) calc(100% / var(--rows, 1)), auto; background-repeat: no-repeat, repeat, repeat, repeat; }
.terrain.counter { background: repeating-linear-gradient(90deg, rgba(40, 24, 10, 0.25) 0 2px, transparent 2px 6px); }
.terrain.counter::after { content: ""; position: absolute; left: 4%; right: 4%; top: 22%; bottom: 22%; background: #5b3a1e; border: 2px solid #2a190a; border-radius: 3px; }
.terrain.tree { background: radial-gradient(circle, #6b4423 0 36%, #2f5d2a 38% 60%, transparent 62%); }
.terrain.stairs { background: repeating-linear-gradient(90deg, #938b7e 0 3px, #6a6358 3px 6px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.obsc-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.obsc-veil.veil-roof, .map.layer-roof .obsc-veil.veil-floor { display: none; }
.map.layer-roof .obsc-veil.veil-roof { display: block; }
.obsc-veil path { pointer-events: none; }
.obsc-veil .veil-light { fill: rgba(64, 132, 52, 0.38); filter: drop-shadow(0 0 3px #7aad68); }
.obsc-veil .veil-heavy { fill: rgba(18, 54, 24, 0.78); filter: drop-shadow(0 0 4px #497e39); }
.obsc-veil .veil-fog { fill: rgba(45, 57, 62, 0.72); filter: drop-shadow(0 0 5px #839196); }
.obsc-veil pattern circle { fill: rgba(151, 192, 106, 0.56); }
.obsc-veil .veil-light-texture { opacity: 0.38; }
.obsc-veil .veil-heavy-texture { opacity: 0.72; }
.obsc-veil .veil-foliage-edge { fill: none; stroke-linecap: round; stroke-dasharray: 0.08 0.09 0.17 0.08; }
.obsc-veil .veil-light-edge { stroke: rgba(114, 178, 80, 0.58); stroke-width: 0.15; }
.obsc-veil .veil-heavy-edge { stroke: rgba(76, 130, 52, 0.88); stroke-width: 0.25; }
.obsc-veil .veil-dim { fill: rgba(24, 18, 46, 0.34); filter: drop-shadow(0 0 4px #24182e); }
.obsc-veil .veil-dark { fill: rgba(5, 5, 12, 0.8); filter: drop-shadow(0 0 5px #08080c); }
.obsc-veil.veil-night .night-base { fill: rgba(5, 9, 25, 0.76); }
.obsc-veil.veil-moon .night-base { fill: rgba(35, 55, 91, 0.42); }
.obsc-veil.veil-moon .night-shadow { fill: rgba(5, 9, 25, 0.48); }
.map.art-off .obsc-veil .veil-foliage-texture, .map.art-off .obsc-veil .veil-foliage-edge { display: none; }
.map.art-off .obsc-veil .veil-light, .map.art-off .obsc-veil .veil-heavy,
.map.art-off .obsc-veil .veil-dim, .map.art-off .obsc-veil .veil-dark { filter: none; }
.map-legend.fog-cleared .legend-fog { display: none; }
.canopy { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(52, 112, 44, 0.24) 0 55%, transparent 70%); }
.door { position: absolute; z-index: 1; background: repeating-linear-gradient(0deg, rgba(168, 116, 52, 0.4) 0 3px, transparent 3px 7px); outline: 2px dashed var(--bronze); outline-offset: -2px; }
.door.closed { background: repeating-linear-gradient(0deg, #6b4423 0 5px, #573519 5px 7px); outline: 2px solid var(--bronze); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45); }
.roof-outline { position: absolute; z-index: 1; border: 2px dashed rgba(241, 237, 255, 0.8); pointer-events: none; box-sizing: border-box; }
.roof-slab { position: absolute; z-index: 1; display: none; background-color: #7b4a38; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px calc(var(--cell) / 2)); opacity: 0.95; }
/* a sloped roof (the Maze House): rows of tiles and the ridge on the mirror axis; Difficult Terrain, reached only by climbing */
.roof-slab.sloped { background-color: #8a4f3a; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px calc(var(--cell) / 2)), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px calc(var(--cell) / 3)); }
.roof-slab.sloped::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 2px); width: 4px; background: rgba(42, 24, 16, 0.7); }
.map.layer-roof .roof-slab { display: block; }
.map.layer-roof .roof-outline { border-style: solid; border-color: #2a1810; }
.map.layer-roof .token.under-roof { opacity: 0.3; filter: grayscale(0.7); }
.token.on-roof { z-index: 3; }
.map:not(.layer-roof) .token.on-roof { box-shadow: 0 0 0 2px #7b4a38, 0 0 8px rgba(0, 0, 0, 0.7); }
.map:not(.layer-roof) .token.on-roof.active { box-shadow: 0 0 0 2px #7b4a38, 0 0 0 4px var(--bone), 0 0 14px 3px var(--bone-glow); }
.token .badge-z.roof { color: #f1edff; border-color: #7b4a38; }
.map-layers { position: absolute; right: 4px; z-index: 6; display: flex; gap: 2px; padding: 2px; background: rgba(17, 14, 33, 0.88); border: 1px solid var(--border); border-radius: 999px; }
.map-layers button, .map-art-switch button { font: inherit; font-size: 11px; line-height: 1.2; min-height: 24px; padding: 2px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--dim); cursor: pointer; }
.map-layers button[aria-pressed="true"], .map-art-switch button[aria-pressed="true"] { background: var(--text); color: #120f24; font-weight: 700; }
/* the audience sees hidden fighters: faded, dotted, with an eye-slash badge */
.token.hidden-fighter { opacity: 0.5; border-style: dotted; }
.token .badge-hidden { position: absolute; top: -0.5em; left: -0.5em; width: 15px; height: 15px; border-radius: 50%; background: #120f24; border: 1px solid var(--magic); font-size: 9px; line-height: 13px; text-align: center; text-shadow: none; }
.token .badge-hidden::before { content: "👁"; }
/* ---- map art (docs/WEB.md, "Arte do mapa"): approved images behind the grid and the tokens; .art-off is the plain board */
.map-art { position: absolute; inset: 0; pointer-events: none; background-image: var(--art-image); background-size: var(--art-size); background-position: var(--art-pos); background-repeat: var(--art-repeat, no-repeat); }
.map:not(.art-off)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.32; background: center / 72px 72px no-repeat; }
.map.has-art:not(.art-off) { background-image: none; }
.map-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(17, 14, 33, 0.24) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 14, 33, 0.24) 1px, transparent 1px); background-size: var(--cell) var(--cell); background-position: -1px -1px; }
.temple-flood { position: absolute; inset: 0; pointer-events: none; }
.temple-flood-cell { position: absolute; background-color: #286d71; background-image: var(--flood-image); background-size: var(--flood-size); background-position: var(--flood-pos); transition: opacity 280ms ease, filter 280ms ease; }
.temple-flood-cell.shore-north::after { content: ""; position: absolute; inset: 0 0 auto; height: 30%; background-image: var(--flood-border-image); background-position: center top; background-size: 100% auto; }
.temple-flood-cell.shore-east { box-shadow: inset -5px 0 5px #122d34; }
.temple-flood-cell.shore-south { box-shadow: inset 0 -5px 5px #122d34; }
.temple-flood-cell.shore-west { box-shadow: inset 5px 0 5px #122d34; }
.map.art-off .temple-flood-cell { background-image: linear-gradient(180deg, #347f84, #17505b); }
.map.no-anim .temple-flood-cell, .temple-flood-cell.no-slide { transition: none; }
@media (prefers-reduced-motion: reduce) { .temple-flood-cell { transition: none; } }
.map.art-off .map-art, .map.art-off .map-grid { display: none; }
/* arenas that change (docs/WEB.md, "Arenas que mudam"): the moving layers slide, the bridge overlay swaps; styled placeholders until Codex sprites are approved */
.terrain.rails { background: repeating-linear-gradient(90deg, #22252c 0 5px, #353943 5px 9px, #1b1d23 9px 14px); background-size: 28px 100%; filter: blur(0.6px); animation: rails-blur 0.5s linear infinite; }
@keyframes rails-blur { from { background-position: 0 0; } to { background-position: 28px 0; } }
.terrain.chasm { background: linear-gradient(180deg, #4a4237, #3b352d); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35); }
.terrain.cliff { background: linear-gradient(180deg, #a48a6a, #8d7457); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.terrain.rock { background: var(--rock); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); border-radius: 30%; }
.layer-moving { position: absolute; pointer-events: none; transition: transform var(--move-ms, 380ms) ease; background-image: var(--art-image); background-size: var(--art-size); background-position: var(--art-pos); background-repeat: no-repeat; }
.layer-moving.no-slide, .map.no-anim .layer-moving { transition: none; }
.layer-moving .lm { position: absolute; pointer-events: auto; }
.map:not(.art-off) .layer-moving.has-sprite .lm { background: transparent; box-shadow: none; }
.map:not(.art-off) .layer-moving.has-sprite .lm::after { display: none; }
.map.art-off .layer-moving { background-image: none; }
.layer-ship .lm-deck { background: #8a5a2b repeating-linear-gradient(0deg, rgba(40, 22, 8, 0.28) 0 1px, transparent 1px calc(var(--cell) / 2)); }
.layer-ship .lm-rail { background: #5b3a1e; box-shadow: inset 0 0 0 2px #2f1c0b; }
.layer-ship .lm-crate { background: #8a5a2b; }
.layer-ship .lm-crate::after { content: ""; position: absolute; inset: 14%; background: #b07a3e; border: 2px solid #3f260e; }
.layer-moving .lm-mast { background: #8a5a2b radial-gradient(circle, #3a2410 0 34%, #6b4423 36% 48%, transparent 50%); }
.layer-moving .lm-ladder { background: #5b3a1e repeating-linear-gradient(0deg, #c89b5d 0 2px, transparent 2px 6px); }
.layer-moving .lm-helm { background: #8a5a2b radial-gradient(circle, transparent 0 22%, #e2c48f 24% 32%, transparent 34% 42%, #3a2410 44% 52%, transparent 54%); }
.layer-cart .lm-deck { background: #4b4f58 repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px calc(var(--cell) / 2)); }
.layer-cart .lm-rail { background: #7c818c; box-shadow: inset 0 0 0 2px #2e3138; }
.layer-cart .lm-crate { background: #4b4f58; }
.layer-cart .lm-crate::after { content: ""; position: absolute; inset: 12%; background: radial-gradient(circle at 35% 35%, #9aa0a8, #5d5347 70%); border-radius: 40%; }
.layer-moving.side-a { box-shadow: 0 0 0 2px var(--side-a); }
.layer-moving.side-b { box-shadow: 0 0 0 2px var(--side-b); }
.state-decor { position: absolute; inset: 0; pointer-events: none; }
.arena-state-tile, .arena-symbol-tile, .arena-stair-art, .arena-parapet-art { position: absolute; pointer-events: none; background-image: var(--art-image); background-size: var(--art-size); background-position: var(--art-pos); background-repeat: var(--art-repeat, no-repeat); }
.arena-state-tile.blend-screen { mix-blend-mode: screen; }
.arena-stair-art.facing-south { transform: rotate(180deg); }
.arena-symbol-tile.quicksand::after { content: "Q"; position: absolute; inset: 0; display: grid; place-items: center; color: #f1edff; font: 700 calc(var(--cell) * .45) / 1 monospace; text-shadow: 0 1px 3px #110e21; }
.map.art-off .arena-state-tile, .map.art-off .arena-stair-art, .map.art-off .arena-parapet-art, .map.art-off .arena-symbol-tile { background-image: none; }
.map[data-arena="pantano"][data-arena-state="limpo"] .obsc-veil .veil-heavy { display: none; }
.decor { position: absolute; pointer-events: auto; }
.decor-bridge { background: repeating-linear-gradient(90deg, #a9773f 0 calc(var(--cell) * 0.4), #6b4423 calc(var(--cell) * 0.4) calc(var(--cell) * 0.5)); border-top: 2px solid #e2c48f; border-bottom: 2px solid #e2c48f; }
.decor-ladder { background: repeating-linear-gradient(0deg, #d6a868 0 2px, transparent 2px 7px), linear-gradient(90deg, #7a5230 0 3px, transparent 3px calc(100% - 3px), #7a5230 calc(100% - 3px)); }
.decor-post { background: radial-gradient(circle, #3a2410 0 30%, #8a5a2b 32% 44%, transparent 46%); }
.decor-sprite { position: absolute; background-image: var(--art-image); background-size: var(--art-size); background-position: var(--art-pos); background-repeat: no-repeat; }
.decor-sprite.flip-x { transform: scaleX(-1); }
.decor-sprite.flip-y { transform: scaleY(-1); }
.decor-sprite.flip-xy { transform: scale(-1, -1); }
.token.left-behind { filter: grayscale(1); opacity: 0.35; }
.token.left-behind::after { content: "💀"; position: absolute; font-size: 0.8em; top: -0.55em; right: -0.45em; text-shadow: none; }
.arena-cycle { font-size: 0.78rem; padding: 1px 8px; white-space: nowrap; }
@media (max-width: 600px) { .fight-head .arena-cycle { flex: 0 1 48vw; max-width: 48vw; min-width: 0; overflow: hidden; text-overflow: ellipsis; } }
@media (prefers-reduced-motion: reduce) { .layer-moving, .token { transition: none; } .terrain.rails { animation: none; } }
/* a whole painted map already shows water, trunks, rocks, walls and furniture: the rules hints stay, lighter */
.map.art-map:not(.art-off) .terrain.wall, .map.art-map:not(.art-off) .terrain.window, .map.art-map:not(.art-off) .terrain.tree, .map.art-map:not(.art-off) .terrain.stairs { background: transparent; box-shadow: inset 0 0 0 1px rgba(17, 14, 33, 0.3); }
.map.art-map:not(.art-off) .terrain.window::after, .map.art-map:not(.art-off) .terrain.table::after, .map.art-map:not(.art-off) .terrain.table::before, .map.art-map:not(.art-off) .terrain.counter::after { display: none; }
.map.art-map:not(.art-off) .terrain.water { background: rgba(31, 58, 68, 0.16); }
.map.art-map:not(.art-off) .terrain.shallow, .map.art-map:not(.art-off) .terrain.difficult, .map.art-map:not(.art-off) .terrain.table, .map.art-map:not(.art-off) .terrain.counter { background: repeating-linear-gradient(45deg, rgba(17, 14, 33, 0.16) 0 2px, transparent 2px 8px); opacity: 1; }
.map.art-map:not(.art-off) .canopy { opacity: 0.5; }
.map.art-map:not(.art-off) .door { background: transparent; }
.map.art-map:not(.art-off) .door.closed { background: repeating-linear-gradient(0deg, #6b4423 0 5px, #573519 5px 7px); }
/* a composed map whose pieces are still vector placeholders (manifest placeholder: true): the rules outlines stay strong */
.map.art-placeholder:not(.art-off) .terrain.wall, .map.art-placeholder:not(.art-off) .terrain.tree, .map.art-placeholder:not(.art-off) .terrain.stairs { box-shadow: inset 0 0 0 1px rgba(17, 14, 33, 0.55); }
.map.roof-art:not(.art-off) .roof-slab { background-color: transparent; background-image: var(--art-image); background-size: var(--art-size); background-position: var(--art-pos); background-repeat: no-repeat; opacity: 1; }
.map-art-switch { position: absolute; right: 4px; bottom: 4px; z-index: 6; display: flex; gap: 2px; padding: 2px; background: rgba(17, 14, 33, 0.88); border: 1px solid var(--border); border-radius: 999px; }
.token .badge-hidden::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; border-top: 2px solid #e6c7ff; transform: rotate(-45deg); }
@keyframes token-hit { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px) scale(1.08); box-shadow: 0 0 0 3px var(--hp-red); } 60% { transform: translateX(3px); } }
@keyframes token-miss { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } }

/* ---- fight ----------------------------------------------------------------------- */
.fight-title { font-size: 1.3rem; margin-bottom: 0; }
.fight-sub { margin: 2px 0 0; color: var(--dim); overflow-wrap: anywhere; }
.fight-strip { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-width: 0; }
/* the Fight view: header row, then the battlefield (strips and map); plans, log and controls in the second column */
.fight-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fight-view.has-scene:not(.art-off) { padding: 12px; border-radius: var(--radius); background-image: linear-gradient(rgba(12, 10, 24, 0.48), rgba(12, 10, 24, 0.48)), var(--scene-desktop); background-size: cover; background-position: center; }
.fight-view.has-scene:not(.art-off) .fight-head { padding: 8px; border-radius: var(--radius); background: rgba(12, 10, 24, 0.88); }
.fight-view.has-scene:not(.art-off) .map-note { padding: 2px 6px; border-radius: 4px; background: rgba(12, 10, 24, 0.88); }
@media (max-width: 720px) { .fight-view.has-scene:not(.art-off) { background-image: linear-gradient(rgba(12, 10, 24, 0.48), rgba(12, 10, 24, 0.48)), var(--scene-mobile); } }
.scene-opening { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: clamp(5px, 1.3vh, 14px); width: 100%; height: 100dvh; padding: clamp(6px, 1.5vh, 20px); overflow: hidden; overscroll-behavior: none; background-color: var(--page); color: var(--text); animation: scene-arrive 0.35s ease-out; }
.scene-opening.has-scene:not(.art-off) { background-image: linear-gradient(rgba(12, 10, 24, 0.42), rgba(12, 10, 24, 0.42)), var(--scene-desktop); background-size: cover; background-position: center; }
.scene-opening-head { width: min(820px, 100%); padding: clamp(4px, 1vh, 12px) 16px; background: rgba(12, 10, 24, 0.9); text-align: center; }
.scene-opening-arena { margin: 0; font: 700 clamp(1.8rem, 4vw, 3.2rem) var(--font-display); }
.scene-opening-mode { margin: 0; color: var(--bone); font: 600 1rem var(--font-display); }
.scene-opening-sides { margin: 5px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.scene-opening.presenting .scene-opening-sides { display: none; }
.scene-opening-teams { width: min(1160px, 100%); height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 8px; align-items: center; }
.scene-opening-team { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.scene-opening-team h2 { margin: 0 0 6px; padding: 2px 10px; font: 700 1.1rem var(--font-display); color: var(--bone); background: rgba(12, 10, 24, 0.85); border-left: 4px solid var(--side-a); }
.scene-opening-team.side-b h2 { border-left-color: var(--side-b); }
.scene-opening-cards { min-height: 0; display: grid; grid-template-columns: repeat(var(--scene-cols-a), minmax(0, 1fr)); grid-template-rows: repeat(var(--scene-rows-a), minmax(0, 1fr)); gap: 6px; }
.scene-opening-team.side-b .scene-opening-cards { grid-template-columns: repeat(var(--scene-cols-b), minmax(0, 1fr)); grid-template-rows: repeat(var(--scene-rows-b), minmax(0, 1fr)); }
.scene-opening-divider { align-self: stretch; display: flex; align-items: center; justify-content: center; color: var(--bone); }
.scene-opening-crest { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--bone); border-radius: 50%; background: rgba(12, 10, 24, 0.9); font: 700 1.7rem var(--font-display); }
.scene-fighter { min-width: 0; min-height: 0; height: 100%; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; background: rgba(22, 18, 42, 0.96); text-align: center; }
.scene-fighter.arriving.side-a { animation: scene-card-a 0.38s ease-out both; }
.scene-fighter.arriving.side-b { animation: scene-card-b 0.38s ease-out both; }
.scene-fighter-face { position: relative; flex: 0 1 auto; display: grid; place-items: center; width: min(100%, 72cqh, 240px); aspect-ratio: 1; overflow: hidden; border: 2px solid var(--side-a); border-radius: 5px; background: var(--panel-2); font-size: 1.8rem; }
.scene-fighter.side-b .scene-fighter-face { border-color: var(--side-b); }
.scene-fighter-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-fighter-details { min-width: 0; max-width: 100%; display: grid; }
/* the Initiative on the cards (the owner, 05/10/2026: "Iniciativa na apresentação"): the place in the order in a bone circle and the
   total on a small plate, both over the portrait, so no card changes its size; they arrive in the order itself, one after the other */
.scene-fighter-order, .scene-fighter-init { position: absolute; z-index: 1; font-family: var(--font-num); font-weight: 800; line-height: 1; animation: scene-init-in 0.3s ease-out both; animation-delay: calc((var(--order, 1) - 1) * 110ms); }
.scene-fighter-order { top: 4%; left: 4%; display: grid; place-items: center; width: clamp(18px, 24%, 46px); aspect-ratio: 1; border-radius: 50%; background: var(--bone); color: #110e21; font-size: clamp(0.75rem, 16cqh, 1.6rem); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.scene-fighter-init { left: 50%; bottom: 4%; translate: -50% 0; padding: 2px 8px; border: 1px solid var(--bone); border-radius: 999px; background: rgba(12, 10, 24, 0.9); color: var(--bone); font-size: clamp(0.7rem, 11cqh, 1.15rem); white-space: nowrap; }
@keyframes scene-init-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
.scene-fighter-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.05rem var(--font-display); }
.scene-fighter-meta { color: var(--bone); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ONE button for the presentation of the fighters (the owner, 05/10/2026: "um unico botao que enquanto esta apresentando se chama skip e
   quando termina se transformar em play"): the same place and the same size the whole time (the width fits the longer name), so nothing
   moves under the finger; its two plates are drawn with the button art, further down */
.scene-opening-actions { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; }
.scene-opening-go { position: relative; isolation: isolate; min-width: min(300px, 100%); min-height: 48px; padding: 8px 44px; border: 0; border-radius: 0; background: transparent; color: var(--text); font-weight: 700; font-size: 1.05rem; transition: color 0.3s ease; }
.scene-opening-go.ready { color: #110e21; font: 800 1.1rem var(--font-display); letter-spacing: 0.06em; }
.scene-opening-go.ready .scene-opening-go-label { display: inline-block; animation: scene-go-label 0.3s ease-out both; }
@keyframes scene-go-label { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes scene-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-card-a { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scene-card-b { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 720px) {
  .scene-opening.has-scene:not(.art-off) { background-image: linear-gradient(rgba(12, 10, 24, 0.42), rgba(12, 10, 24, 0.42)), var(--scene-mobile); }
  .scene-opening { gap: 5px; padding: 6px; }
  .scene-opening-head { padding: 5px 8px; }
  .scene-opening-arena { font-size: 1.65rem; }
  .scene-opening-mode { font-size: 0.85rem; }
  .scene-opening-teams { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 3px; }
  .scene-opening-team h2 { margin-bottom: 3px; padding: 1px 5px; font-size: 0.88rem; }
  .scene-opening-cards { gap: 3px; }
  .scene-opening-team.side-a .scene-opening-cards { grid-template-columns: repeat(var(--scene-mobile-cols-a), minmax(0, 1fr)); grid-template-rows: repeat(var(--scene-mobile-rows-a), minmax(0, 1fr)); }
  .scene-opening-team.side-b .scene-opening-cards { grid-template-columns: repeat(var(--scene-mobile-cols-b), minmax(0, 1fr)); grid-template-rows: repeat(var(--scene-mobile-rows-b), minmax(0, 1fr)); }
  .scene-opening-crest { width: 18px; height: 18px; border-width: 1px; font-size: 0.7rem; }
  .scene-fighter { gap: 1px; padding: 2px; }
  .scene-fighter-face { width: min(100%, 68cqh); font-size: 1.1rem; }
  .scene-fighter-name { font-size: clamp(0.65rem, 2.5vw, 0.83rem); }
  .scene-fighter-meta { font-size: clamp(0.56rem, 2vw, 0.68rem); }
}
@media (prefers-reduced-motion: reduce) { .scene-opening, .scene-fighter.arriving.side-a, .scene-fighter.arriving.side-b { animation: none; } .scene-opening-go, .scene-opening-go::before, .scene-opening-go::after { transition: none; } .scene-opening-go.ready .scene-opening-go-label { animation: none; } .scene-fighter-order, .scene-fighter-init { animation: none; } }
.fight-left, .fight-right { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fight-head { min-width: 0; flex: 0 0 auto; }
.fight-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.fight-head .fight-title { font-size: 1.1rem; margin: 0; }
.fight-head .chips { margin: 0; gap: 4px; }
.fight-head .chip { font-size: 0.74rem; padding: 1px 8px; }
.fight-head .fight-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fight-head .fight-strip { margin-top: 4px; gap: 8px; }
.fight-head .round-label { font-size: 0.9rem; }
.fight-head .init-token { font-size: 0.76rem; padding: 1px 7px; }
.fight-head .progress { margin: 3px 0 0; }
.fight-map-meta { display: flex; flex: 1 1 240px; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.fight-map-meta .map-note { margin: 0; min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; }
/* the note only holds the legend of the arena: an arena without one leaves no empty plate behind */
.fight-map-meta .map-note:has(.map-legend:empty) { display: none; }
.fight-map-meta .fight-camera-toggle { flex: 0 0 auto; }
.round-label { font-weight: 800; letter-spacing: 0.08em; color: var(--text); white-space: nowrap; }
.initiative { display: flex; gap: 6px; align-items: center; overflow-x: auto; min-width: 0; flex: 1; padding: 4px 6px; }
.init-token { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 2px solid var(--border); background: var(--panel-2); font-size: 0.82rem; white-space: nowrap; flex: 0 0 auto; }
.init-token b { font-variant-numeric: tabular-nums; }
.init-token.side-a { border-color: var(--side-a); }
.init-token.side-b { border-color: var(--side-b); }
.init-token.active { box-shadow: 0 0 0 2px var(--bone), 0 0 10px 1px var(--bone-glow); }
.init-token.out { opacity: 0.45; filter: grayscale(1); }
.progress { height: 4px; background: var(--panel-2); border-radius: 4px; margin: 10px 0; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--dim); transition: width 0.2s linear; }

/* mobile first: strip A above the map, strip B below it (DOM order); wider layouts in the media queries at the end */
.stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; min-width: 0; }
.map-panel { min-width: 0; display: flex; flex-direction: column; }
.team-bars { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; border-top: 4px solid var(--border); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; align-content: start; min-width: 0; }
.team-bars.side-a { border-top-color: var(--side-a); }
.team-bars.side-b { border-top-color: var(--side-b); }
.bars-head { grid-column: 1 / -1; font-weight: 800; font-size: 0.76rem; letter-spacing: 0.04em; display: flex; justify-content: space-between; gap: 2px 6px; flex-wrap: wrap; }
.hp-row { display: flex; gap: 6px; align-items: center; padding: 3px 4px; min-height: 38px; border-radius: 8px; border: 1px solid transparent; min-width: 0; }
.hp-row.active { background: rgba(241, 237, 255, 0.09); box-shadow: 0 0 0 2px var(--bone), 0 0 0 4px var(--card-accent), 0 0 12px var(--bone-glow); }
.hp-turn { display: flex; align-items: center; gap: 4px; width: fit-content; max-height: 0; overflow: hidden; opacity: 0; transform: translateX(-6px); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; line-height: 18px; transition: max-height 0.16s ease, opacity 0.16s ease, transform 0.16s ease; }
.hp-row.active .hp-turn { max-height: 20px; opacity: 1; transform: none; }
.hp-turn .label-face { font-size: 0.65rem; font-weight: 900; }
.hp-row.side-a .hp-turn { color: var(--side-a); }
.hp-row.side-b .hp-turn { color: var(--side-b); }
.hp-row.no-anim .hp-turn { transition: none; }
@media (prefers-reduced-motion: reduce) { .hp-turn { transition: none; } }
.hp-row.out { filter: grayscale(0.85); opacity: 0.7; }
.hp-row.rooted { opacity: 0.55; }
.hp-row.rooted .status { color: #b9d5ab; background: #213027; border-color: #7eab74; }
.hp-row .tok { position: static; flex: 0 0 auto; width: 28px; height: 28px; font-size: 11px; border-width: 2px; }
.hp-main { flex: 1; min-width: 0; }
.hp-line { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.hp-name { font-weight: 700; font-size: 0.82rem; flex: 1; min-width: 0; display: flex; gap: 4px; align-items: baseline; white-space: nowrap; }
.hp-short { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hp-name.has-alias { white-space: normal; }
.hp-name.has-alias .hp-short { overflow: visible; text-overflow: clip; white-space: normal; }
.hp-sheet { color: var(--dim); font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-slot { flex: 0 0 auto; font-family: var(--mono); font-size: 0.7rem; color: var(--dim); }
.hp-ac { font-size: 0.7rem; color: var(--dim); white-space: nowrap; }
.bar { position: relative; height: 13px; background: #0c0a18; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; margin-top: 2px; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--hp-green); transition: width 0.35s ease, background-color 0.35s; }
.bar-fill.yellow { background: var(--hp-yellow); }
.bar-fill.red { background: var(--hp-red); }
.bar-temp { position: absolute; top: 0; bottom: 0; right: 0; width: 0; background: rgba(241, 237, 255, 0.35); }
.bar-nums { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; font-size: 0.68rem; }
.map-note { margin: 2px 0 0; font-size: 0.74rem; }
.hp-row.hit .bar { animation: shake 0.35s; }
.hp-conds { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; font-size: 0.7rem; }
.hp-conds:empty { display: none; }
.hp-conds .banished { color: var(--magic); }
.hp-conds .burrowed { color: #e4c397; background: #34281b; border-color: #a5794b; }
.hp-conds .readied { color: #f7dfa1; background: #332914; border-color: #c6a35c; }
.cond { background: #2b2140; border: 1px solid var(--magic); border-radius: 6px; padding: 0 5px; }
.status { background: #3a1417; border: 1px solid var(--hp-red); border-radius: 6px; padding: 0 5px; }
.curse-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 7px 0 0; color: #f4e7c8; background: #30233a; border: 1px solid #b693d2; border-radius: 7px; font-weight: 750; }
.curse-icon { display: block; width: 48px; height: 48px; object-fit: contain; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.preview .prose, .prose { white-space: pre-wrap; overflow-wrap: anywhere; }

.die { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; font-family: var(--mono); font-size: 0.82rem; max-width: 100%; }
.die b { font-family: var(--font); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--dim); text-transform: uppercase; }
.die.nat20 { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.die.nat1 { border-color: var(--hp-red); }
.die.fresh { animation: pop 0.3s ease; }
@keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.log-wrap { padding: 0; position: relative; margin: 0; }
/* the manual replay (28/09/2026): a line is where a click takes the board, paused; the last line applied shows where the board is */
#log li[data-event-index] { cursor: pointer; }
#log li.seek-here { outline: 2px solid var(--bone); outline-offset: -2px; border-radius: 4px; }
/* narrow screens: the step buttons show their icon only (the name stays in aria-label and title), so the bar keeps to two rows */
@media (max-width: 720px) { .controls .ctrl-step .ctrl-label { display: none; } .controls .ctrl-step { min-width: 44px; padding-inline: 8px; } }
.log { list-style: none; margin: 0; padding: 8px 12px; height: min(60vh, 520px); overflow-y: auto; font-size: 0.94rem; }
.log li { padding: 3px 0 3px 8px; border-left: 3px solid transparent; overflow-wrap: anywhere; }
.log li.note-group { border-left-color: var(--hp-yellow); padding: 2px 0 2px 8px; }
.note-group > details > summary { cursor: pointer; color: #e9d9a0; font-size: 0.88rem; font-weight: 700; }
.log .note-list { list-style: none; margin: 4px 0 0; padding: 0; }
.log .note-list li.sub { padding-left: 14px; }
.log-newest { position: absolute; right: 14px; bottom: 10px; z-index: 3; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--bone); background: var(--panel-2); color: var(--text); font-size: 0.82rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.log li.beat { font-weight: 700; margin-top: 6px; }
.log li.sub { padding-left: 22px; color: #dcd6c8; }
.log li.turn { margin-top: 12px; font-weight: 800; letter-spacing: 0.02em; }
.log li.dim { color: var(--dim); font-size: 0.9rem; }
.log li.gm { font-style: italic; color: #e6c7ff; background: rgba(155, 93, 229, 0.12); border-left-color: var(--magic); border-radius: 0 8px 8px 0; margin: 4px 0 4px 22px; padding: 6px 10px; }
.log li.gm::before { content: "GM"; font-style: normal; font-size: 0.7rem; font-weight: 800; background: var(--magic); color: #fff; border-radius: 4px; padding: 0 5px; margin-right: 8px; }
.log li.round { text-align: center; color: var(--text); font-weight: 800; letter-spacing: 0.1em; margin: 14px 0 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.log li.system { color: var(--dim); }
.log li.end { font-weight: 800; color: var(--gold); margin-top: 12px; }
.log li.crit { border-left-color: var(--gold); background: rgba(245, 197, 66, 0.08); }
.log li.ko { border-left-color: var(--hp-red); }
.log li.heal { border-left-color: var(--hp-green); }
.log li.miss { color: #c9c3b6; }
.log li.note { border-left-color: var(--hp-yellow); color: #e9d9a0; font-size: 0.88rem; }
.log li.reaction { border-left-color: var(--hp-yellow); }
.log li.magic { border-left-color: var(--magic); }
.log li.side-a { border-left-color: var(--side-a); }
.log li.side-b { border-left-color: var(--side-b); }
.log li.newest { background: rgba(241, 237, 255, 0.05); }
.reach-badge { display: inline-block; margin-left: 0.55em; padding: 0 0.45em; border: 1px solid var(--dim); border-radius: 999px; color: var(--bone); font: 700 0.68rem var(--mono); white-space: nowrap; vertical-align: 0.1em; }
.log .dice-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-weight: 400; }
.log li:has(.log-why-button) { position: relative; }
.log li.why-open { z-index: 2; }
.log-why-button { display: inline-block; vertical-align: 0.08em; margin: 0 0.45em 0 0; padding: 1px 7px; border: 1px solid var(--bronze-line); border-radius: 999px; background: var(--panel-2); color: var(--text); font: 700 0.72rem var(--font); line-height: 1.35; cursor: pointer; }
.log-why-button:hover, .log-why-button[aria-expanded="true"] { background: var(--bronze); color: var(--page); }
.log-why-button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.log-why-text { position: absolute; top: calc(100% + 2px); left: 0; z-index: 3; box-sizing: border-box; width: min(27rem, 100%); padding: 7px 10px; border: 1px solid var(--bronze-line); border-radius: 7px; background: var(--panel-2); color: var(--text); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5); font-size: 0.82rem; font-weight: 400; line-height: 1.35; letter-spacing: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.log-why-text[hidden] { display: none; }
.log-why-text.above { top: auto; bottom: calc(100% + 2px); }
@media (max-width: 600px) {
  .log-why-text, .log-why-text.above { position: static; width: 100%; margin-top: 5px; box-shadow: none; }
}

/* narrow screens: a bar fixed at the bottom of the viewport (main gets room for it); docked in the right column from 900 px */
.controls { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; padding: 8px; background: rgba(17, 14, 33, 0.96); border-top: 1px solid var(--border); margin: 0; z-index: 5; }
/* ONE button for the five speeds (the owner, 05/10/2026): it shows the speed of now and takes the next one at each press */
.speed-cycle { min-width: 52px; }
.speed-cycle .speed-value { font-weight: 800; }

/* ---- arena screen ---------------------------------------------------------------- */
/* the arena scene behind the title and the starting positions (docs/WEB.md, "Cena da arena"): dark overlay for WCAG AA text */
.arena-hero { border-radius: var(--radius); }
.arena-hero.has-scene:not(.art-off) { margin-top: 14px; padding: 4px 14px 1px; border: 1px solid var(--border); background-color: #0c0a18; background-image: linear-gradient(rgba(12, 10, 24, 0.46), rgba(12, 10, 24, 0.46)), var(--scene-desktop); background-size: cover; background-position: center; }
.arena-hero.has-scene:not(.art-off) > .panel { background: rgba(12, 10, 24, 0.88); }
.ready-head.has-scene:not(.art-off) { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 230px; gap: 5px; padding-bottom: 10px; }
.ready-head.has-scene:not(.art-off) > .fight-title { padding: 2px 8px; border-radius: 4px; background: rgba(12, 10, 24, 0.88); }
@media (max-width: 720px) { .arena-hero.has-scene:not(.art-off) { padding: 2px 10px 10px; background-image: linear-gradient(rgba(12, 10, 24, 0.46), rgba(12, 10, 24, 0.46)), var(--scene-mobile); } .ready-head.has-scene:not(.art-off) { min-height: 270px; } }
.ready-view { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr); grid-template-areas: "head head" "map sides" "map preview" "actions actions"; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 10px; min-width: 0; }
.ready-head { grid-area: head; min-width: 0; padding: 2px 2px 0; }
.ready-head .fight-title { margin: 0; }
.ready-head .chips { margin: 4px 0 0; }
.ready-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ready-map-panel { grid-area: map; display: flex; flex-direction: column; min-height: 0; margin: 0; }
.ready-map-panel h2 { flex: 0 0 auto; margin-bottom: 6px; }
.ready-map-panel .map-box { flex: 1 1 0; min-height: 0; display: flex; overflow: hidden; }
.ready-map-panel #arena-note { flex: 0 0 auto; margin-bottom: 0; }
.ready-view .arena-sides { grid-area: sides; min-height: 0; margin: 0; }
.ready-view .arena-sides .team { padding: 8px; gap: 6px; min-height: 0; align-self: start; }
.ready-view .arena-sides .team-head h2 { font-size: 0.95rem; }
.ready-view .arena-list { min-width: 0; min-height: 0; }
.ready-view .arena-item { min-height: 0; }
.ready-view .preview { grid-area: preview; min-height: 0; margin: 0; overflow: hidden; }
.ready-view .preview .prose { max-height: 100%; overflow: hidden; }
.ready-actions { grid-area: actions; margin: 0; position: sticky; bottom: 0; z-index: 8; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.ready-actions .btn-primary { min-width: min(320px, 100%); }
/* the opening preview (owner, 27/09/2026): a chip in the header row, never a panel in the right column, so the log has the whole height.
   Hover peeks at it over the board (it lets the pointer through); a click, or Enter and Space on the focused chip, keeps it open,
   scrollable, until a click outside, Esc or the chip again. */
.fight-head-row { position: relative; }
.fight-opening { display: inline-flex; }
.fight-opening-toggle { min-height: 28px; padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: rgba(17, 14, 33, 0.6); color: var(--dim); font-size: 0.78rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fight-opening-toggle:hover, .fight-opening.open .fight-opening-toggle { color: var(--text); border-color: var(--bone); }
.fight-opening-toggle:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; }
.fight-opening-pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; box-sizing: border-box; width: min(600px, 100%); max-height: min(60vh, 28rem); overflow-y: auto; margin: 0; padding: 10px 14px; background: rgba(26, 30, 41, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; }
.fight-opening:not(.quiet) .fight-opening-toggle:hover + .fight-opening-pop, .fight-opening.open .fight-opening-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fight-opening.open .fight-opening-pop { pointer-events: auto; }
.fight-opening-pop h2 { margin: 0 0 6px; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .fight-opening-pop { transition: none; transform: none; } }
body.ready-mode .footer { display: none; }
@media (min-width: 721px) and (max-width: 1400px) {
  .ready-view .arena-sides { gap: 8px; }
  .ready-view .arena-sides .team { padding: 6px; }
  .ready-view .arena-item { gap: 5px; padding: 5px; }
  .ready-view .arena-item .tok { width: 26px; height: 26px; font-size: 10px; }
  .ready-view .arena-item .a-cell { display: none; }
  .ready-view .arena-item .a-sub { font-size: 0.7rem; line-height: 1.15; }
}
/* trial of the stone 9-slice panel (static/art/paineis.json, slice in px of the derivative) on the Arena preview only */
.panel.panel-art-stone { border-style: solid; border-color: transparent; border-width: 22px; border-radius: 0; border-image-source: url("/static/art/painel-pedra__9slice.webp"); border-image-slice: 59 fill; border-image-width: 22px; border-image-repeat: stretch; background: transparent; padding: 4px 8px; }
.arena-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; margin: 14px 0; }
@media (min-width: 721px) { .ready-view .arena-sides { grid-template-columns: minmax(0, 1fr); gap: 4px; } .ready-view .arena-sides .versus { flex-direction: row; gap: 6px; font-size: 1rem; min-height: 24px; } }
.arena-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arena-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); min-width: 0; }
.arena-item .tok { position: static; flex: 0 0 auto; width: 30px; height: 30px; font-size: 12px; }
.arena-item .a-text { flex: 1; min-width: 0; }
.arena-item .a-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-item .a-sub { color: var(--dim); font-size: 0.78rem; overflow-wrap: anywhere; }
.arena-item .a-cell { font-family: var(--mono); font-weight: 800; color: var(--text); white-space: nowrap; }
.token .cell-label { position: absolute; top: -0.9em; left: 50%; transform: translateX(-50%); background: #120f24; color: var(--text); border: 1px solid var(--dim); border-radius: 5px; font-size: 9px; padding: 0 3px; line-height: 1.3; font-family: var(--mono); text-shadow: none; white-space: nowrap; }

/* ---- tactical plans -------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.plan-card { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 0.8rem; min-width: 0; }
.plan-card.side-a { border-left-color: var(--side-a); }
.plan-card.side-b { border-left-color: var(--side-b); }
.plan-card > summary { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; cursor: pointer; list-style: none; }
.plan-card > summary::-webkit-details-marker { display: none; }
.plan-card > summary::before { content: "▸"; color: var(--dim); flex: 0 0 auto; }
.plan-card[open] > summary::before { content: "▾"; }
.plan-card[open] > summary { flex-wrap: wrap; white-space: normal; }
.plan-card > summary b { flex: 0 0 auto; }
.plan-card.has-comment > summary b::after { content: " 💬"; }
.plan-chips { display: contents; }
.plan-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; overflow-wrap: anywhere; }
.plan-chip.comment { font-style: italic; border-color: var(--magic); }
.plan-chip.source { color: var(--dim); }
.plan-comment { margin: 4px 0 2px; font-style: italic; color: #e6c7ff; overflow-wrap: anywhere; }
.plan-comment:empty { display: none; }

/* the seal of a comment written by the narration AI: "AI" / "IA", never the name of the service (the owner, 09/10/2026) */
.log li.gm.src-deepseek::before { content: "GM · AI"; }
.log li.gm.src-deepseek:lang(pt)::before { content: "GM · IA"; }
/* deferred voice: a DeepSeek text is still on its way (the template shows meanwhile) */
.voice-writing { margin: 4px 0 0; color: #e6c7ff; font-style: italic; animation: voice-pulse 1.6s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .voice-writing { animation: none; } }
/* a comment that replaced its template after the replay had already shown it */
.log li.gm.gm-late::after { content: "✍️"; font-style: normal; font-size: 0.75rem; margin-left: 6px; opacity: 0.7; }
.hp-conds .cond[title] { cursor: help; }

/* ---- result ---------------------------------------------------------------------- */
.result-head { text-align: center; margin-top: 8px; min-width: 0; }
#view-result.has-scene:not(.art-off) { padding: 14px; border-radius: var(--radius); background-image: linear-gradient(rgba(12, 10, 24, 0.48), rgba(12, 10, 24, 0.48)), var(--scene-desktop); background-size: cover; background-position: center; }
#view-result.has-scene:not(.art-off) .result-head { padding: 10px 16px 14px; border-radius: var(--radius); background: rgba(12, 10, 24, 0.9); }
@media (max-width: 720px) { #view-result.has-scene:not(.art-off) { background-image: linear-gradient(rgba(12, 10, 24, 0.48), rgba(12, 10, 24, 0.48)), var(--scene-mobile); } }
#result-headline, .result-top { overflow-wrap: anywhere; }
.trophy { font-size: 3rem; }
/* one sentence says who won, in the colour of the winning side (the owner, 05/10/2026: "Só a frase grande (Recomendado)"). Since
   12/10/2026 in two lines: who won on the ribbon of the winning side (the ribbon of the Arena screen), who is left standing under it. */
#result-headline { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0 12px; color: var(--bone); }
.result-title { display: inline-block; max-width: 100%; border: 0 solid transparent; border-width: 0 40px; padding: 7px 6px 10px; border-image: url("/static/art/faixa__neutral.webp") 0 54 fill / 0 40px stretch; font: 700 clamp(1.45rem, 2.4vw, 2.05rem)/1.15 var(--font-display); letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6); }
#result-headline.side-a .result-title { border-image-source: url("/static/art/faixa__a.webp"); }
#result-headline.side-b .result-title { border-image-source: url("/static/art/faixa__b.webp"); }
.result-standing { font: 600 clamp(1rem, 1.5vw, 1.2rem)/1.3 var(--font-system); letter-spacing: 0.01em; color: var(--bone); }
.result-top { margin: 10px 0 0; font-weight: 700; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.stats { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.stats th, .stats td { padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.stats th:first-child, .stats td:first-child { text-align: left; }
.stats th { color: var(--dim); font-weight: 600; font-size: 0.82rem; }
.stats td.name.side-a { border-left: 4px solid var(--side-a); }
.stats td.name.side-b { border-left: 4px solid var(--side-b); }
.stats td.name { white-space: normal; overflow-wrap: anywhere; min-width: 110px; }
/* the last column of the result (spell slots and resources) is a list of names: it breaks into lines instead of pushing the table sideways */
#stats th:last-child, #stats td:last-child { white-space: normal; overflow-wrap: anywhere; min-width: 150px; }
.stats-sheet { display: block; color: var(--dim); font-size: 0.72rem; font-weight: 400; overflow-wrap: anywhere; white-space: normal; }
.stats tr.total td { font-weight: 800; background: rgba(241, 237, 255, 0.04); }
.stats td.best { color: var(--gold); font-weight: 800; }

/* ---- series ---------------------------------------------------------------------- */
.series-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.series-grid .field { flex: 0 1 180px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; min-height: 22px; padding: 0; flex: 0 0 auto; }
.series-status { font-weight: 800; margin: 0 0 8px; }
.progress.big { height: 12px; }
.win-bars { display: grid; gap: 10px; }
.win-row { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) minmax(150px, auto); gap: 10px; align-items: center; }
.win-label { font-weight: 800; letter-spacing: 0.05em; }
.win-row.side-a .win-label { color: var(--side-a); }
.win-row.side-b .win-label { color: var(--side-b); }
.win-track { position: relative; height: 26px; background: #0c0a18; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.win-track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed rgba(241, 237, 255, 0.35); }
.win-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dim); }
.win-row.side-a .win-fill { background: var(--side-a); }
.win-row.side-b .win-fill { background: var(--side-b); }
.win-ci { position: absolute; top: 4px; bottom: 4px; border: 2px solid var(--text); border-radius: 4px; background: rgba(241, 237, 255, 0.14); }
.win-value { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.9rem; }
.fights-list tr.fight-row { cursor: pointer; }
.fights-list tr.fight-row:hover td { background: rgba(241, 237, 255, 0.05); }
.fights-list td.win-a { color: var(--side-a); font-weight: 700; }
.fights-list td.win-b { color: var(--side-b); font-weight: 700; }
.btn-small { min-height: 36px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); cursor: pointer; }
.btn-small:hover { border-color: var(--dim); }
@media (max-width: 720px) {
  .win-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---- card frames (docs/WEB.md, "Molduras de card") ------------------------------------------------------------------
   The approved 9-slice panels (static/art/paineis.json, slice in px of the derivative) plus the side colour: stone on
   Arena, Luta and Resultado, wood on Montar. Placed after every card's own rule, because a `border` shorthand resets
   border-image. border-image paints under the content and takes no room: the card keeps its 1 px border and padding,
   and --frame-w never goes past border + padding. The side line is an inset outline on the last pixel of the frame. */
.card-frame { --frame-w: 5px; --card-accent: var(--bronze-line); border-style: solid; border-color: transparent; border-image-source: url("/static/art/painel-pedra__9slice.webp"); border-image-slice: 59; border-image-width: var(--frame-w); border-image-outset: 0; border-image-repeat: stretch; border-radius: 4px; background-color: var(--panel); outline: 1px solid var(--card-accent); outline-offset: calc(-1 * var(--frame-w)); }
.card-frame.frame-wood { border-image-source: url("/static/art/painel-madeira__9slice.webp"); border-image-slice: 50; background-color: var(--wood-center); }
.card-frame.side-a { --card-accent: var(--side-a); }
.card-frame.side-b { --card-accent: var(--side-b); }
.card-frame.neutral { --card-accent: var(--bronze-line); }
/* the active fighter: bone white, never gold (AAG decision 23); the glow breathes slowly and holds still with reduced motion */
.card-frame.active { --card-accent: var(--bone); box-shadow: 0 0 0 1px var(--bone), 0 0 10px 2px var(--bone-glow); animation: card-glow 2.4s ease-in-out infinite; }
@keyframes card-glow { 0%, 100% { box-shadow: 0 0 0 1px var(--bone), 0 0 6px 1px var(--bone-glow); } 50% { box-shadow: 0 0 0 1px var(--bone), 0 0 14px 3px var(--bone-glow); } }
@media (prefers-reduced-motion: reduce) { .card-frame.active { animation: none; } }
/* optional bronze corner studs, centred on the frame band */
.card-frame.studs { position: relative; --stud: 8px; }
.card-frame.studs::before { content: ""; position: absolute; inset: -1px; pointer-events: none; --stud-at: calc(var(--frame-w) / 2 - var(--stud) / 2); background-image: radial-gradient(circle, #e2b06a 0 28%, var(--bronze-line) 36% 52%, #3a2410 60%, transparent 68%), radial-gradient(circle, #e2b06a 0 28%, var(--bronze-line) 36% 52%, #3a2410 60%, transparent 68%), radial-gradient(circle, #e2b06a 0 28%, var(--bronze-line) 36% 52%, #3a2410 60%, transparent 68%), radial-gradient(circle, #e2b06a 0 28%, var(--bronze-line) 36% 52%, #3a2410 60%, transparent 68%); background-size: var(--stud) var(--stud); background-repeat: no-repeat; background-position: left var(--stud-at) top var(--stud-at), right var(--stud-at) top var(--stud-at), left var(--stud-at) bottom var(--stud-at), right var(--stud-at) bottom var(--stud-at); }
/* the name plate: dark parchment with a bronze hairline; only horizontal padding, so no card grows */
.card-plate { background: linear-gradient(180deg, var(--plate), var(--plate-2)); box-shadow: inset 0 -1px 0 rgba(176, 121, 58, 0.55); border-radius: 3px; padding-left: 4px; padding-right: 4px; }
/* per card: the frame width that fits its border + padding, and the old thick coloured borders turned into padding */
.hp-row.card-frame { --frame-w: 4px; }
.hp-row.card-frame.active { --card-accent: var(--side-a); box-shadow: 0 0 0 2px var(--bone), 0 0 0 4px var(--card-accent), 0 0 12px var(--bone-glow); animation: none; }
.hp-row.card-frame.side-b.active { --card-accent: var(--side-b); }
.slot.card-frame { padding-left: 10px; }

/* ---- setup: compact slots (chosen fighters plus one free-slot row) ---------------- */
.slot.add { padding: 0; min-height: 44px; }
.slot-add { flex: 1; align-self: stretch; min-height: 42px; background: transparent; border: 0; border-radius: 8px; color: var(--dim); font-size: 0.9rem; cursor: pointer; }
.slot-add:hover { color: var(--text); }
.roster-groups[data-side="a"] .r-add.a:not(:disabled), .roster-groups[data-side="b"] .r-add.b:not(:disabled) { box-shadow: 0 0 0 2px currentColor; }

/* ---- setup: wide screens keep the side builders in view next to the roster ---------- */
@media (min-width: 1400px) {
  body:not(.fight-mode) main { max-width: 1560px; }
  .setup-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: start; }
  .setup-split .teams { position: sticky; top: 8px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .setup-split .picker { margin: 0; }
  .setup-split .roster-groups { max-height: calc(100vh - 330px); min-height: 360px; }
}

/* ---- fight layout ---------------------------------------------------------------- */
body.fight-mode main { max-width: none; padding: 8px 12px 132px; }
body.fight-mode .footer { display: none; }
/* compact page header on the Fight view: logo, language toggle and the session links (public mode) in one short row */
body.fight-mode .topbar { padding: 4px 12px; gap: 4px 10px; }
body.fight-mode .logo { font-size: 1.1rem; }
body.fight-mode .wordmark { font-size: 1rem; }
body.fight-mode .tagline { display: none; }
body.fight-mode .topbar-actions { margin-left: auto; }
body.fight-mode .lang-toggle { min-height: 28px; padding: 2px 10px; }

/* 900 px and up: two columns; the right one (plans, log, controls) stays in view while the left scrolls */
@media (min-width: 900px) {
  body.fight-mode main { padding: 8px 12px; }
  .fight-view { grid-template-columns: minmax(0, 60fr) minmax(320px, 40fr); align-items: start; }
  .fight-right { position: sticky; top: 8px; height: calc(100vh - 76px); min-height: 420px; }
  .fight-right .plans { flex: 0 1 auto; max-height: 40%; overflow-y: auto; }
  .fight-right .log-wrap { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .fight-right .log { flex: 1 1 0; min-height: 0; height: auto; }
  .controls { position: static; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 6px; }
  .controls .ctrl { min-height: 38px; padding: 6px 10px; font-size: 0.92rem; }
  .controls .speed-cycle { min-width: 44px; }
}

/* On a wide screen the rosters frame the board and the compact summary sits below it. */
@media (min-width: 1100px) and (min-height: 600px) {
  body.fight-mode { height: 100vh; overflow: hidden; }
  body.fight-mode main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .fight-view { flex: 1 1 0; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(280px, 19vw); grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .fight-left { min-height: 0; gap: 6px; }
  .fight-right { position: static; height: auto; min-height: 0; }
  .fight-head .progress { margin: 3px 0 0; }
  .stage { flex: 1 1 0; min-height: 0; grid-template-columns: 180px minmax(0, 1fr) 180px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "bars-a map bars-b"; gap: 6px; align-items: stretch; }
  #bars-a { grid-area: bars-a; }
  #bars-b { grid-area: bars-b; }
  .stage .map-panel { grid-area: map; min-height: 0; }
  .team-bars { grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; gap: 5px; padding: 5px; border-top-width: 3px; max-height: none; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .bars-head { font-size: 0.72rem; line-height: 1.25; }
  .stage .hp-row { min-height: 72px; padding: 4px; align-items: flex-start; }
  .stage .hp-conds { margin-top: 2px; font-size: 0.64rem; line-height: 1.2; }
  .stage .hp-name { white-space: normal; }
  .stage .hp-short { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  /* the box clips: the board is fitted to it, and a scrollbar would change the size it is fitted to */
  #fight-map { --fit: 1; flex: 1 1 0; min-height: 0; display: flex; overflow: hidden; }
  #fight-map.camera-mode { height: auto; min-height: 0; }
  #fight-map .map-wrap { margin: 0 auto; }
  .fight-head { padding: 5px 8px; }
  .fight-head-row { gap: 3px 8px; }
  .fight-head .fight-strip { margin-top: 2px; }
  .fight-head .initiative { padding-block: 2px; }
  .fight-head .fight-opening-toggle { min-height: 32px; }
}
@media (min-width: 1600px) and (min-height: 600px) {
  .stage { grid-template-columns: 210px minmax(0, 1fr) 210px; }
}
@media (max-width: 1099px) {
  .fight-head-row { gap: 4px 8px; }
  .fight-head .initiative { overflow-x: hidden; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .fight-head .fight-opening-toggle, .fight-map-meta .fight-camera-toggle, #fight-map .map-art-switch button, #fight-map .map-layers button { min-height: 44px; min-width: 44px; }
  .fight-head-row .fight-map-meta { flex: 1 1 auto; }
  .fight-head .fight-strip { flex-wrap: wrap; align-items: flex-start; }
  .fight-head .initiative { flex: 1 1 100%; }
}

/* ---- narrow screens -------------------------------------------------------------- */
@media (max-width: 720px) {
  main { padding: 12px; }
  .tagline { display: none; }
  .topbar-actions { margin-left: auto; }
  .teams, .arena-sides { grid-template-columns: minmax(0, 1fr); }
  .ready-view { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "sides" "preview" "actions"; grid-template-rows: auto auto auto auto auto; gap: 8px; }
  .ready-map-panel .map-box { flex: 0 0 auto; height: auto; min-height: 0; aspect-ratio: 41 / 21; }
  .ready-view .arena-sides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .ready-view .arena-sides .versus { grid-column: 1 / -1; grid-row: 1; }
  .ready-view .arena-sides .team { grid-row: 2; min-width: 0; }
  .ready-view .arena-list { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .ready-view .arena-item { gap: 4px; padding: 4px; }
  .ready-view .arena-item .tok { width: 24px; height: 24px; font-size: 10px; }
  .ready-view .arena-item .a-sub { font-size: 0.68rem; line-height: 1.15; }
  .ready-view .arena-item .a-cell { display: none; }
  .ready-view .preview { padding: 8px 10px; }
  .ready-view .preview h2 { margin-bottom: 3px; }
  .ready-view .preview .voice-list { gap: 0; font-size: 0.78rem; }
  .ready-view .preview-source, .ready-view #preview-writing { margin: 2px 0 0; }
  .ready-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .ready-actions .btn-primary { min-width: 0; }
  .ready-actions .btn { flex: none; }
  .versus { flex-direction: row; gap: 8px; font-size: 1.2rem; }
  .rules-grid, .advanced-grid { grid-template-columns: minmax(0, 1fr); }
  .r-cards { grid-template-columns: minmax(0, 1fr); }
  .roster-groups { max-height: 70vh; }
  .filters-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .filter-more:not(.open) { display: none; }
  .filter-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .picker-bar .search-field { flex-basis: 100%; }
  .sheet-backdrop { align-items: flex-end; padding: 0; }
  .sheet { max-width: none; border-radius: 16px 16px 0 0; max-height: 88vh; padding-bottom: 18px; }
  .sheet-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctrl { padding: 8px 12px; min-height: 40px; }
  #btn-skip { flex-basis: 100%; }
  .btn-primary { width: 100%; min-width: 0; }
}
@media (max-width: 420px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .wordmark { font-size: 1.1rem; }
  .lang-toggle { padding: 4px 8px; gap: 4px; }
  .topbar-actions { flex: 1 0 100%; justify-content: flex-end; margin-left: 0; min-width: 0; max-width: 100%; }
  .header-account .account-label { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
}

/* ---- replay controls (docs/WEB.md, "Controles da reprodução"): five buttons since 05/10/2026 (the owner: "Enxugar para 5
   (Recomendado)"), and the end of the replay ---- */
.controls .close-combat { min-height: 44px; padding: 10px 22px; font-weight: 800; }
.controls.ended { justify-content: center; }
@media (max-width: 720px) {
  #btn-play, #btn-next-turn { padding: 8px 9px; }
}
@media (min-width: 900px) {
  /* docked in the right column (the owner, 01/10/2026: "acertar e organizar estes botões de uma forma mais bem vista"): a grid of two
     equal columns, the way back on the left and the way forward on the right; then play and the speed, and Skip across the
     whole width (five buttons since 05/10/2026: "Enxugar para 5 (Recomendado)"). The same rows from 280 px to 400 px of column. */
  .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px;
    grid-template-areas: "turn-back turn-next" "play speed" "skip skip"; }
  .controls > .ctrl { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-width: 0; white-space: nowrap; }
  #btn-turn-back { grid-area: turn-back; }
  #btn-next-turn { grid-area: turn-next; }
  #btn-play { grid-area: play; }
  #btn-speed { grid-area: speed; }
  #btn-skip { grid-area: skip; }
  /* the fight is over: the way back, and Close combat across */
  .controls.ended { grid-template-areas: "turn-back turn-back" "close close"; }
  .controls .close-combat { grid-area: close; width: 100%; }
}

/* the map panel is the frame the switches of the map hang on */
.map-panel { position: relative; }

/* ---- spell areas and auras on the map (docs/WEB.md, "Áreas e auras no mapa"): side tint, bone-white edge, never gold ---- */
.areas { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.grapple-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.grapple-link { stroke: var(--bone); stroke-width: 2.5; stroke-opacity: 0.8; stroke-dasharray: 5 4; stroke-linecap: round; filter: drop-shadow(0 1px 2px #110e21); }
.movement-trail.side-a { --trail-color: var(--side-a); }
.movement-trail.side-b { --trail-color: var(--side-b); }
.movement-trail.neutral { --trail-color: var(--bone); }
.movement-trail .trail-line { fill: none; stroke: var(--trail-color); stroke-width: 3; stroke-dasharray: 3 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px #110e21); }
.movement-trail.airy .trail-line { stroke-width: 2; stroke-opacity: 0.7; stroke-dasharray: 2 7; }
@media (max-width: 600px) {
  .movement-trail .trail-line { stroke-width: var(--trail-stroke, 8px); stroke-dasharray: var(--trail-dash, 8px) var(--trail-gap, 12px); }
  .movement-trail.airy .trail-line { stroke-width: calc(var(--trail-stroke, 8px) * 0.7); }
}
.movement-trail .trail-arrow { fill: var(--trail-color); }
.movement-trail .teleport-flash { fill: var(--trail-color); fill-opacity: 0.65; stroke: var(--trail-color); stroke-width: 3; filter: drop-shadow(0 0 6px var(--trail-color)); animation: teleport-flash 700ms ease-out forwards; }
@keyframes teleport-flash { from { opacity: 1; transform: scale(0.7); transform-origin: center; } to { opacity: 0; transform: scale(1.5); transform-origin: center; } }
.token.teleporting { transition: none; }
.map.no-anim .movement-trails { display: none; }
@media (prefers-reduced-motion: reduce) { .movement-trails { display: none; } }
.areas .area-tint { fill: var(--side-a); fill-opacity: 0.16; shape-rendering: crispEdges; }
.areas .side-b .area-tint { fill: var(--side-b); }
.areas .area-edge { fill: none; stroke: var(--bone); stroke-width: 2; stroke-opacity: 0.9; stroke-linecap: square; filter: drop-shadow(0 0 1px rgba(11, 9, 22, 0.9)); }
.areas .area-pattern { shape-rendering: crispEdges; }
.areas .pat-hatch { stroke: rgba(241, 237, 255, 0.5); stroke-width: 1.5; }
.areas .pat-fog { fill: rgba(226, 229, 236, 0.4); }
.areas .pat-dark { fill: rgba(4, 5, 8, 0.35); }
.areas .pat-dark-dot { fill: rgba(241, 237, 255, 0.2); }
.areas .pat-stone { fill: none; stroke: rgba(230, 223, 202, 0.8); stroke-width: 2; }
.areas .pat-force { fill: none; stroke: rgba(181, 225, 255, 0.62); stroke-width: 1; }
.areas .pat-grease { fill: none; stroke: rgba(19, 27, 38, 0.8); stroke-width: 3; }
.areas .pat-sleet { fill: none; stroke: rgba(225, 244, 255, 0.8); stroke-width: 2; stroke-linecap: round; }
.areas .pat-sleet-dot { fill: #e1f4ff; }
.areas .spell-wall-of-stone .area-tint { fill: #827a6c; fill-opacity: 0.66; }
.areas .spell-wall-of-stone .area-edge { stroke: #e6d6b6; stroke-width: 3; }
.areas .spell-wall-of-force .area-tint { fill: #8ad5ed; fill-opacity: 0.2; }
.areas .spell-grease .area-tint { fill: #151e2b; fill-opacity: 0.6; }
.areas .spell-grease .area-edge { stroke: #8795a7; }
.areas .spell-sleet-storm .area-tint { fill: #b8dcef; fill-opacity: 0.44; }
.areas .spell-sleet-storm .area-edge { stroke: #e1f4ff; }
.areas .fam-dark .area-tint { fill: #07080c; fill-opacity: 0.5; }
.areas .fam-fog .area-tint { fill: #c9ccd3; fill-opacity: 0.24; }
.areas .area-warm { fill: #ff7b45; fill-opacity: 0.12; shape-rendering: crispEdges; animation: area-pulse 1.8s ease-in-out infinite; }
.areas .fam-aura .area-tint { fill-opacity: 0.08; }
.areas .fam-aura .area-edge { stroke-dasharray: 5 4; stroke-opacity: 0.6; }
.areas .zone.follows { transition: transform var(--move-ms, 380ms) ease; }
.areas .zone.follows.no-slide, .map.no-anim .areas .zone.follows { transition: none; }
.areas .flash .area-tint { fill-opacity: 0.5; }
.areas .flash.dmg-radiant .area-tint { fill: #fff3b4; fill-opacity: 0.62; }
.areas .flash.dmg-radiant .area-edge { stroke: #fff3b4; filter: drop-shadow(0 0 7px #fff3b4); }
.areas .flash .area-edge { stroke-width: 3; stroke-opacity: 1; filter: drop-shadow(0 0 4px rgba(241, 237, 255, 0.85)); }
.areas .flash { animation: area-flash var(--flash-ms, 1000ms) ease-out forwards; }
/* the Tavern: an area of the other layer stays visible, dimmed */
.map.has-roof.layer-roof .areas .on-floor, .map.has-roof:not(.layer-roof) .areas .on-roof { opacity: 0.3; }
@keyframes area-pulse { 0%, 100% { fill-opacity: 0.04; } 50% { fill-opacity: 0.16; } }
@keyframes area-flash { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---- preview and recap as a vertical list: one item per line, the icon first (docs/WEB.md, "Pacote de reprodução") ---- */
.voice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; white-space: normal; }
.voice-list li { padding: 2px 0 2px 0; line-height: 1.45; overflow-wrap: anywhere; }
.voice-list li.sub { padding-left: 1.6em; color: var(--dim); }
@media (prefers-reduced-motion: reduce) {
  .areas .area-warm, .areas .flash { animation: none; }
  .areas .zone.follows { transition: none; }
}

/* Comandas 087–089: wizard, trophies, score, feedback and sheets. */
#view-wizard .step-side { min-height: 0; }
#view-wizard.player-setup #step-fighters-title { font-size: 1rem; line-height: 1; margin: 0; }
#view-wizard .r-sub { white-space: normal; overflow-wrap: anywhere; }
/* Comandas 088–089: reports, achievements and sheets keep the arena's dark bronze surface. */
.progress-page { max-width: 1120px; margin: 0 auto; gap: 14px; }
.progress-page > h1 { margin: 10px 0 2px; }
.progress-page > .btn-small { align-self: flex-start; }
.trophy-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.trophy-progress h2 { margin: 0; }
.trophy-progress progress { flex: 1 1 180px; accent-color: var(--bone); height: 18px; }
.trophy-progress p { flex: 1 1 100%; margin: 0; }
.trophy-tabs, .feedback-votes, .feedback-marks, .admin-feedback-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.trophy-grid.locked { display: block; }
.trophy-grid.locked h2 { margin: 8px 0 16px; }
.trophy-card { border: 2px solid #796140; border-radius: 14px; padding: 12px; background: linear-gradient(145deg, #2a2450, #17132b); min-width: 0; }
.trophy-card.earned { box-shadow: inset 0 0 20px #d9b77824, 0 3px 12px #0008; }
.trophy-card.missing { filter: grayscale(.9); }
.trophy-card.rarity-incomum { border-color: #8ba99a; }
.trophy-card.rarity-rara { border-color: #478bc9; }
.trophy-card.rarity-muito_rara { border-color: #aa72cb; }
.trophy-card.rarity-lendaria { border-color: #d9b778; }
.trophy-icon { position: relative; width: 72px; height: 72px; display: grid; place-items: center; font-size: 2.4rem; border-radius: 50%; background: #110e21; color: #d9b778; }
.trophy-icon img { width: 88%; height: 88%; object-fit: contain; }
.trophy-icon::after { content: ""; position: absolute; inset: -7px; pointer-events: none; background: center / contain no-repeat url("/static/art/moldura__comum.webp"); }
.rarity-incomum .trophy-icon::after { background-image: url("/static/art/moldura__incomum.webp"); }
.rarity-rara .trophy-icon::after { background-image: url("/static/art/moldura__rara.webp"); }
.rarity-muito_rara .trophy-icon::after { background-image: url("/static/art/moldura__muito-rara.webp"); }
.rarity-lendaria .trophy-icon::after { background-image: url("/static/art/moldura__lendaria.webp"); }
.trophy-card h3 { font: 700 1.25rem var(--font-display); margin: 8px 0 4px; }
/* the achievement that never ends: its milestone of now on the emblem, and the way to the next one */
.trophy-milestone { position: absolute; right: -6px; bottom: -4px; min-width: 24px; padding: 1px 6px; border: 1px solid #110e21; border-radius: 999px; background: var(--bone); color: #110e21; font: 800 0.85rem var(--font-num); text-align: center; }
.trophy-steps { display: grid; gap: 4px; margin: 6px 0 2px; }
.trophy-steps-bar { display: block; height: 6px; border-radius: 999px; background: rgba(241, 237, 255, 0.14); overflow: hidden; }
.trophy-steps-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--bone); }
.trophy-card p { min-height: 3em; }
.trophy-card time { display: block; margin: 6px 0; }
.trophy-rarity { color: #d9b778; }
.trophy-card .trophy-rarity { display: block; margin-top: 8px; }
.trophy-locked-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; width: 100%; max-width: 680px; }
.trophy-silhouette { display: grid; place-items: center; height: 60px; border: 1px solid var(--border); border-radius: 10px; opacity: .5; }
.trophy-silhouette img { width: 48px; height: 48px; object-fit: contain; filter: grayscale(1); }
.ranking-league img { width: 26px; height: 26px; vertical-align: middle; margin-right: 4px; }
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th, .ranking-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; }
.ranking-table .top-three { color: #d9b778; font-weight: 700; background: #d9b77815; }
.hall-season { border-top: 1px solid var(--border); }
.match-score, .fight-feedback { margin: 12px 0; }
.match-score-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.match-score-number { color: #d9b778; font: 800 3rem var(--font-display); animation: score-arrive .8s ease-out both; }
@keyframes score-arrive { from { opacity: 0; transform: scale(.35) rotate(-8deg); } to { opacity: 1; transform: scale(1); } }
.new-trophies { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; animation: score-arrive .8s ease-out both; }
.new-trophies h3 { flex-basis: 100%; }
.new-trophies .trophy-card { width: min(220px, 100%); }
.new-trophies .trophy-card { animation: trophy-spin .85s ease-out both; }
@keyframes trophy-spin { from { opacity: 0; transform: rotate(-35deg) scale(.45); } to { opacity: 1; transform: rotate(0) scale(1); } }
.trophy-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.new-trophies { position: relative; }
.trophy-confetti i { position: absolute; left: var(--x); top: 0; width: 7px; height: 12px; background: #d9b778; animation: trophy-fall 1.8s var(--delay) ease-in both; }
.trophy-confetti i:nth-child(3n) { background: #71bddd; }
.trophy-confetti i:nth-child(4n) { background: #f07194; }
@keyframes trophy-fall { from { opacity: 0; transform: translateY(-10px) rotate(0); } 10% { opacity: 1; } to { opacity: 0; transform: translateY(220px) rotate(700deg); } }
@media (prefers-reduced-motion: reduce) { .new-trophies .trophy-card, .trophy-confetti i, .match-score-number { animation: none; } }
.score-parts { display: grid; gap: 5px; }
.score-part { display: grid; grid-template-columns: 125px minmax(0, 1fr) 55px; align-items: center; gap: 7px; }
.score-part meter { width: 100%; height: 20px; }
.score-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 12px; }
.score-hero { display: flex; flex-direction: column; gap: 3px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; }
.score-hero strong, .star-fighter { color: #d9b778; }
.fight-feedback textarea { display: block; width: 100%; margin: 8px 0 2px; padding: 8px 10px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; background: #0c0a18; color: var(--text); font: inherit; }
/* room between the shortcuts of the collaboration (the owner, 05/10/2026, night: "prcisam de espaço entre els, respiro") */
.fight-feedback .feedback-votes, .fight-feedback .feedback-marks { gap: 8px 10px; margin: 10px 0; }
.fight-feedback .feedback-votes .chip-btn, .fight-feedback .feedback-marks .chip-btn { min-height: 36px; padding: 4px 14px; }
.feedback-count { display: block; text-align: right; margin-bottom: 8px; }
.admin-feedback-card { display: flex; flex-wrap: wrap; gap: 5px 15px; border-bottom: 1px solid var(--border); padding: 9px 0; }
.admin-feedback-card p { flex-basis: 100%; margin: 0; }
.sheet-full-detail { margin-top: 14px; border-top: 1px solid var(--border); }
.inspect-drawer { position: fixed; right: 8px; top: 8px; bottom: 8px; z-index: 35; width: min(380px, 35vw); overflow: auto; box-shadow: -8px 0 28px #000c; }
@media (min-width: 900px) {
  .fight-view.inspecting { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  .fight-view.inspecting .fight-right { display: none; }
  .fight-view.inspecting .inspect-drawer { position: static; grid-column: 2; grid-row: 1; width: auto; min-height: 0; max-height: calc(100vh - 90px); }
}
.inspect-drawer > h2 { display: inline-block; margin: 0 12px 10px 0; }
.inspect-drawer > .sheet-close { float: right; }
.inspect-fighter { border-top: 2px solid var(--border); padding: 8px 0; }
.inspect-fighter h3 { margin: 0 0 6px; }
.inspect-stat { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid #ffffff15; }
.inspect-stat b { text-align: right; overflow-wrap: anywhere; }
.inspect-peek { position: fixed; z-index: 70; width: min(290px, 90vw); max-height: 50vh; overflow: auto; pointer-events: none; box-shadow: 0 10px 28px #000c; }
.inspect-peek h4 { margin: 8px 0 2px; }
#view-fight [data-fighter-id] { cursor: pointer; }
@media (max-width: 899px) {
  .inspect-drawer { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(75dvh, 650px); border-radius: 18px 18px 0 0; }
  .trophy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .trophy-card { padding: 8px; }
  .score-part { grid-template-columns: 94px minmax(0, 1fr) 48px; }
}
@media (prefers-reduced-motion: reduce) { .match-score-number, .new-trophies { animation: none; } }
/* ---- the new flow (docs/WEB-FLUXO.md): the components and tokens of today, laid out again; bone for every state, never gold ---- */
/* a control blocked by a rule stays focusable and says why (aria-disabled, the opacity of :disabled) */
.btn[aria-disabled="true"], .btn-primary[aria-disabled="true"], .btn-small[aria-disabled="true"], .chip-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

/* ---- home (§2) ---- */
.home-hero { margin-top: 6px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--border); }
.home-hero.has-scene:not(.art-off) { margin-top: 6px; padding: 14px; }
.home-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.home-title { font-size: clamp(1.9rem, 6vw, 2.6rem); margin: 0; letter-spacing: 0.03em; }
.home-lead { margin: 0; }
.home-audio-hint { margin: 6px 0 0; color: var(--text); }
.home-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.home-error .error { margin: 0; flex: 1 1 260px; }
.home-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* border width only: a border shorthand would reset the card frame's border-image */
.home-card { border-width: 1px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.home-card > h2 { margin: 0; align-self: flex-start; }
.home-card > p { margin: 0; }
.home-card .btn-primary { width: 100%; min-width: 0; }
.home-card > .btn { width: 100%; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-head h2 { margin: 0 0 0.6em; }
.home-recent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.home-recent-list:empty { display: none; }
.home-fight { border-width: 1px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; min-width: 0; }
.home-fight-open { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.home-fight-open:hover { background: rgba(241, 237, 255, 0.04); }
.home-fight-title { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-fight-sub { overflow-wrap: anywhere; }
.home-suggest-sides { margin: 0 0 10px; align-items: center; }
.home-vs { letter-spacing: 0.1em; text-transform: uppercase; }
.home-tip p { margin: 0; }
#home-recent-note:empty { display: none; }
/* the lean Home (the owner, 05/10/2026: "Eu quero menos possivel poluição visual"): under the banner, two columns: on the left, what
   happened (the last fights and the Master's suggested matchup); on the right, the tip of the day. On a phone, one column in that order.
   What starts a fight lives in the banner (the stage, below). */
.home-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 12px 0; align-items: start; }
.home-feed, .home-side { display: grid; gap: 12px; min-width: 0; align-content: start; }
.home-feed .panel, .home-side .panel { margin: 0; }
/* the fight card: NEW FIGHT across the card and no title repeating it. Under it, one grid of two columns (the owner, 05/10/2026: "botao de
   achievements e ranking devem ficar logo abaixo de quick fight, seguindo um padrão de espaço, tamanho e simetria"): the Quick fight and its
   size chips, smaller still; then Achievements and Ranking, the same size as the Quick fight. The line that explains the Quick fight
   closes the card as a watermark. */
/* wide enough for the Quick fight with the five sizes of the highest league (the owner, 05/10/2026: "ja deixa o card para o tamanho
   maximo de heroes no quick fight do platina") */
.home-fight-card { gap: 10px; width: 100%; max-width: 640px; }
/* the Quick fight and what is only its own, in one frame: the button, the sizes of the group and the line that explains it (the
   owner, 05/10/2026: "Ai o jogador sabe que estes botões são referentes ao quick fight apenas") */
.home-quick-group { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(12, 10, 24, 0.38); }
.home-quick-group > .home-quick-note { grid-column: 1 / -1; }
#view-home .home-quick-group > .btn { min-width: 0; min-height: 38px; padding: 4px 22px; gap: 6px; font-size: 0.92rem; }
.home-quick-group .chip-set { margin: 0; gap: 4px; flex-wrap: wrap; }
.home-quick-group .chip-btn { min-height: 30px; padding: 2px 10px; font-size: 0.78rem; }
#view-home .home-fight-card > .btn-primary { flex: 0 0 auto; min-height: 54px; font-size: 1.25rem; }
.home-fight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: center; }
#view-home .home-fight-grid > .btn { width: 100%; min-width: 0; min-height: 38px; padding: 4px 20px; gap: 6px; font-size: 0.92rem; }
.home-quick-note { margin: 0; font-size: 0.78rem; opacity: 0.8; }
.home-quick-note:empty { display: none; }
.home-progress-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 8px 10px; color: var(--text); text-decoration: none; font-weight: 700; text-align: center; }
.home-progress-icon { width: 24px; height: 24px; flex: 0 0 auto; background: url("/static/art/trofeu__botao.webp") center / contain no-repeat; }
.home-progress-btn b { color: var(--bone); font-variant-numeric: tabular-nums; }
.home-progress-btn b:empty { display: none; }
/* on a phone the two do not fit side by side: the count of the achievements left its plate (the owner, 07/10/2026: "pelo celular tem
   um erro no numero 1/17 saindo do espaço dele"): one under the other */
@media (max-width: 520px) { .home-fight-grid { grid-template-columns: minmax(0, 1fr); } }
.home-progress-btn:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; }
@media (min-width: 1024px) {
  .home-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* the two columns end on the same line (the owner, 05/10/2026: "Quero os cards alinhados abaixo com o Rulers-Lawyer Approved"):
     the list of fights on one side and the card of the rules on the other take the room that is left */
  .home-stage { align-items: stretch; }
  .home-feed, .home-side { display: flex; flex-direction: column; }
  .home-feed > .home-recent, .home-side > .home-rules { flex: 1 1 auto; }
  .home-quick-group .chip-btn { min-height: 28px; }
  /* open, only the list of fights grows: the other column keeps its own height (the owner, 05/10/2026) */
  .home-stage.recent-open { align-items: start; }
}

/* ---- setup wizard (§3): the Montar pieces moved into steps; step head and foot, progress dots in bone ---- */
.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; }
.wizard { display: flex; flex-direction: column; gap: 10px; }
/* one row: the progress bar and, at its end, the button that closes the setup (the "STEP n OF 3" line said what the bar says: it is
   read aloud, not shown; the owner, 05/10/2026: "mais enxuta") */
.wizard-head { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 6px 10px; background: #15112a; border: 1px solid var(--border); border-radius: var(--radius); }
.wizard-head-row { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; }
.wizard-head .sheet-close { min-width: 40px; min-height: 40px; }
.wizard-step-label { flex: 1; margin: 0; font-family: var(--font-num); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.wizard-progress { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wizard-progress li { position: relative; display: flex; justify-content: center; min-width: 0; }
.wizard-progress li + li::before { content: ""; position: absolute; top: 50%; left: -50%; right: 50%; border-top: 2px solid var(--border); }
.wizard-progress li.done + li::before { border-top-color: var(--bone); }
.wizard-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; min-width: 32px; justify-content: center; padding: 2px 8px; border: 0; border-radius: 999px; background: #15112a; color: var(--dim); font-size: 0.78rem; }
.wizard-dot::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); background: #15112a; }
.wizard-progress li.done .wizard-dot::before { background: var(--bone); border-color: var(--bone); }
.wizard-progress li.current .wizard-dot { color: var(--text); font-weight: 700; }
.wizard-progress li.current .wizard-dot::before { border-color: var(--bone); box-shadow: 0 0 8px 2px var(--bone-glow); }
button.wizard-dot { cursor: pointer; }
button.wizard-dot:hover { color: var(--text); }
.wizard-dot-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wizard-title:focus:not(:focus-visible) { outline: none; }
.wizard-title:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; }
.wizard-title { margin: 2px 0 8px; font-size: clamp(1.4rem, 5vw, 1.6rem); }
.wizard-step { min-width: 0; }
.wizard-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wizard-undo { margin: 0; }
.wizard-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.wizard-undo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wizard .picker { margin: 0; }
/* the wizard keeps the filter rows behind "🎛️ Filters" at every width (the Montar's phone behaviour), so the cards get the room */
.wizard .filters-toggle { display: inline-flex; align-items: center; gap: 6px; }
.wizard .filter-more:not(.open) { display: none; }
.wizard .wizard-side > .team { gap: 6px; padding: 8px 10px; }
.wizard .wizard-side .team-head h2 { font-size: .95rem; }
.wizard .wizard-side .slots { gap: 4px; }
.wizard .wizard-side .slot { min-height: 38px; gap: 6px; padding: 3px 5px 3px 7px; }
.wizard .wizard-side .slot .s-emoji { font-size: 1.05rem; }
.wizard .wizard-side .slot .s-remove { min-width: 34px; min-height: 34px; }
.wizard .r-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.wizard .r-card { min-height: 132px; gap: 6px; padding: 6px; }
.wizard .r-main { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; gap: 10px; padding: 2px; }
.wizard .r-portrait { width: 96px; height: 112px; border-radius: 12px; font-size: 2.4rem; }
.wizard .r-text { justify-content: center; gap: 4px; }
.wizard .r-name { font-size: 1rem; line-height: 1.05; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wizard .r-sub { font-size: .8rem; }
.wizard .r-badges { gap: 4px; }
.wizard-arena-field { display: flex; flex-direction: column; gap: 6px; }
.wizard-arena-field p { margin: 0; }
.sunlight-option { min-width: 0; margin: 4px 0; }
.light-choices { display: flex; flex-wrap: wrap; gap: 6px; }
/* the light of the arena as three small chips in one row (the owner, 05/10/2026: "Três fichas pequenas numa linha (Recomendado)"): the
   checkbox keeps working for the keyboard and the screen reader, without its box; the chosen chip is the bright one */
.sunlight-label { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; cursor: pointer; font-weight: 600; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; background: var(--panel-2); color: var(--text); }
.sunlight-label input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sunlight-label:has(input:focus-visible) { outline: 2px solid var(--bone); outline-offset: 3px; }
.sunlight-label:has(input:disabled) { opacity: .6; cursor: default; }
.sunlight-label:has(input:checked) { border-color: var(--bone); background: var(--bone); color: #110e21; }
.sunlight-label.is-urgent { border-color: #ffae3b; background: rgba(129, 42, 24, .42); box-shadow: 0 0 0 2px rgba(255, 174, 59, .23); color: #fff2d7; }
.sunlight-option .light-alert { display: grid; gap: 3px; margin: 6px 0 0; padding: 7px 10px; overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: 7px; }
.sunlight-option .light-alert.is-urgent { border-color: #ffae3b; background: rgba(129, 42, 24, .2); color: #fff2d7; }
.light-effect { display: block; font-weight: 700; }
.wizard #advanced { margin: 0; }
.wizard-advanced { margin: 0 0 10px; }
.wizard-advanced:empty { display: none; }
.wizard #advanced > summary { cursor: pointer; }
.wizard-mode { display: flex; flex-direction: column; gap: 6px; }
.wizard-mode .chips, .wizard-mode p { margin: 0; }
.wizard-formations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.wizard-formation { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-left: 8px; border-left: 3px solid var(--border); }
.wizard-formation.side-a { border-left-color: var(--side-a); }
.wizard-formation.side-b { border-left-color: var(--side-b); }
.wizard-fixes { margin-top: 8px; }
.wizard-fixes:empty { display: none; }
.wizard-review-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.wizard-versus { gap: 6px; }
.wizard-versus-mark { display: flex; flex-direction: column; align-items: center; }
.wizard-versus .btn-small { color: var(--text); font-size: 0.85rem; font-weight: 400; }
.wizard-alias-list { display: grid; gap: 8px; }
.wizard-alias-row { min-width: 0; padding: 5px 0; border-top: 1px solid var(--border); }
.wizard-alias-name { display: block; font-weight: 700; overflow-wrap: anywhere; }
.wizard-alias-sheet { display: block; color: var(--dim); font-size: 0.72rem; overflow-wrap: anywhere; }
.wizard-alias-row .alias-field { margin-top: 3px; }
.wizard-review-rows { display: grid; gap: 8px; }
.wizard-review-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wizard-review-row .chips { margin: 0; flex: 1 1 220px; }
.wizard-review-label { min-width: 84px; color: var(--dim); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.wizard-series .series-panel { margin: 0; padding: 0; border: 0; background: transparent; }
.wizard-series .series-panel > h2 { display: none; }
.wizard-foot { position: sticky; bottom: 0; z-index: 8; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.wizard-foot p { margin: 0; }
.wizard-notice:empty, .wizard-reason:empty { display: none; }
.wizard-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wizard-foot-row .btn-primary { min-width: 0; flex: 0 1 320px; }
.wizard-launch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 1 1 320px; }
.wizard-launch .btn-primary { flex: 1 1 220px; }
.wizard-classic { align-self: center; }
@media (max-width: 720px) {
  .wizard-review-sides, .wizard-formations { grid-template-columns: minmax(0, 1fr); }
  .wizard-versus { flex-direction: row; }
  .wizard-versus-mark { flex-direction: row; gap: 6px; }
  .wizard-foot-row > .btn { flex: 0 0 auto; }
  .wizard-foot-row .btn-primary { flex: 1 1 0; width: auto; }
  /* The side summary scrolls away; only the roster controls stay below the step header. */
  .step-side .wizard-side { background: var(--panel); padding: 8px; border-radius: var(--radius); }
  .step-side .wizard-picker-controls { position: sticky; top: 90px; z-index: 6; padding: 6px 0; background: var(--panel); box-shadow: 0 8px 10px -8px rgba(0, 0, 0, 0.6); }
  .step-side .wizard-picker-controls .filter-more { max-height: min(35dvh, 240px); overflow-y: auto; }
  .step-side .roster-groups { overscroll-behavior-y: contain; }
  .step-side .wizard-side .slots { display: grid; overflow-x: visible; gap: 6px; }
  .step-side .wizard-side .slot { max-width: 78vw; }
  .wizard .r-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wizard .r-card { min-height: 108px; }
  .wizard .r-main { grid-template-columns: 76px minmax(0, 1fr); gap: 8px; }
  .wizard .r-portrait { width: 76px; height: 88px; font-size: 2rem; }
}
@media (min-width: 900px) {
  .wizard-dot-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* desktop: the wizard fits the viewport; each step scrolls inside, the page does not */
@media (min-width: 1024px) and (min-height: 600px) {
  body.wizard-mode { height: 100vh; overflow: hidden; }
  body.wizard-mode main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; max-width: 1560px; padding-top: 10px; padding-bottom: 10px; }
  body.wizard-mode .footer { display: none; }
  body.wizard-mode .wizard { flex: 1 1 0; min-height: 0; }
  .wizard-head, .wizard-foot { position: static; }
  .wizard-step:not([hidden]) { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
  .wizard-step.step-side:not([hidden]) { overflow: hidden; }
  .step-side .wizard-side { min-height: 0; overflow-y: auto; }
  .step-side .wizard-picker { min-height: 0; display: flex; flex-direction: column; }
  .step-side .wizard-picker .picker { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .step-side .roster-groups { flex: 1 1 0; min-height: 0; max-height: none; }
}

/* One roster beside the two chosen sides; both columns use the full step height. */
.wizard-fighters { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(390px, 1fr); gap: 12px; min-height: 0; }
.wizard-fighter-column { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.wizard-fighter-column .wizard-picker { min-height: 0; }
.wizard-fighter-column .r-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.roster-group-actions { display: flex; gap: 6px; justify-content: flex-end; margin: 2px 0 6px; }
.wizard-chosen-column .team-head { flex-wrap: wrap; }
.wizard-chosen-column .team-head .wizard-tools { flex: 1 0 100%; }
.wizard-chosen-column .team { min-width: 0; }
.wizard-chosen-column .slot .r-portrait { width: 40px; height: 40px; font-size: 1.15rem; }
.wizard-chosen-column .slot .r-portrait-image { width: 100%; height: 100%; }
.wizard-arena-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 10px; min-height: 0; }
.wizard-arena-layout > .panel { margin: 0; }
.wizard-lineup { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wizard-lineup > h2 { margin: 0 0 6px; font-size: 1rem; }
#wiz-lineup { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#lineup-map { flex: 1; min-height: 230px; }
#step-arena #lineup-map { min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#lineup-note { margin: 6px 0 0; }
.wizard-arena-options { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wizard-arena-options .field { gap: 2px; }
.wizard-arena-options select, .wizard-arena-options input[type="number"] { min-height: 32px; padding-top: 3px; padding-bottom: 3px; }
.wizard-arena-options p, .wizard-arena-options h2 { margin: 0; }
.wizard-arena-short { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wizard-arena-options .sunlight-option { margin: 0; }
.wizard-arena-options .wizard-arena-field { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 4px; align-items: end; }
.wizard-arena-options .sunlight-option { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 6px; align-items: center; }
.wizard-arena-options .sunlight-option .light-alert { grid-column: 1; }
.wizard-arena-options .sunlight-option .wizard-help { flex: 0 0 auto; }
.wizard-arena-options .wizard-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: start; }
.wizard-mode-choice, .wizard-distance-choice { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wizard-arena-options .wizard-formation { position: relative; padding-right: 27px; }
.wizard-arena-options .wizard-formation .wizard-help { position: absolute; top: 0; right: 0; }
.wizard-arena-options .wizard-formations { gap: 6px; margin: 2px 0; }
.wizard-arena-options .wizard-formation { gap: 2px; }
.wizard-arena-options .formation-preview { display: none; }
.wizard-arena-options #advanced { display: block; padding: 0; border: 0; background: none; }
.wizard-arena-options #advanced > summary { display: none; }
#view-wizard .wizard-arena-options #advanced > summary { display: none; }
.wizard-arena-options .advanced-grid { gap: 5px; }
.wizard-arena-options .wizard-mode { gap: 2px; }
.wizard-help { align-self: flex-start; position: relative; }
.wizard-help > summary { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--bone); border: 1px solid var(--border); border-radius: 50%; list-style: none; font-size: .85rem; }
.wizard-help > summary::-webkit-details-marker { display: none; }
.wizard-help[open] > p { position: absolute; z-index: 9; top: 25px; left: 0; width: min(340px, 75vw); padding: 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 20px #0008; }
.wizard-review-rows { margin: 0; padding: 8px 12px; gap: 3px; }
.wizard-review-sides { gap: 6px; }
.wizard-review-sides .team { padding: 8px; }
.wizard-alias-list { gap: 2px; }
.wizard-alias-row { padding: 2px 0; }
.wizard-series { margin: 0; padding: 8px 12px; }
@media (max-width: 900px) {
  .wizard-fighters, .wizard-arena-layout { grid-template-columns: minmax(0, 1fr); }
  .wizard-fighter-column .wizard-picker { max-height: none; overflow: visible; }
  .wizard-fighter-column .wizard-picker-controls { top: 0; }
  .step-side .wizard-fighters, .step-side .wizard-fighter-column { overflow: visible; }
  .step-side .roster-groups { max-height: none; overflow: visible; }
  .wizard-arena-options .formation-preview { display: block; }
}
@media (min-width: 1024px) and (min-height: 600px) {
  .step-side .wizard-fighters { flex: 1; overflow: hidden; }
  .step-side .wizard-fighter-column { overflow: hidden; }
  .step-side .wizard-chosen-column { overflow-y: auto; align-content: start; }
  .step-side .wizard-side { overflow: visible; flex: 0 0 auto; }
  .step-side .wizard-picker { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
  .step-side .wizard-picker .roster-groups { flex: 1; max-height: none; overflow-y: auto; }
  .wizard-step[data-step="arena"]:not([hidden]) { overflow: hidden; }
  .wizard-step[data-step="arena"] .wizard-arena-layout { flex: 1; overflow: hidden; }
  .wizard-step[data-step="arena"] .wizard-arena-options { overflow-y: auto; }
}

/* The ready screen is viewport-bound at the review sizes. The map grows into the
   free cell; it never creates an internal scrollbar. */
@media (min-width: 1024px) and (min-height: 600px) {
  body.ready-mode { height: 100vh; overflow: hidden; }
  body.ready-mode main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; max-width: 1560px; padding-top: 10px; padding-bottom: 10px; }
  body.ready-mode .footer { display: none; }
  body.ready-mode .ready-view { flex: 1 1 0; min-height: 0; }
}

/* ---- sound (§5.4): the 🔊 pill of the language toggle, a small floating panel; bone for on, never gold ---- */
.audio-control { position: relative; display: inline-flex; }
.audio-toggle { position: relative; min-width: 44px; justify-content: center; font-size: 1rem; }
.audio-dot { position: absolute; top: 5px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 6px var(--bone-glow); }
.audio-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; width: min(300px, calc(100vw - 24px)); margin: 0; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
.audio-title { margin: 0; font-weight: 800; letter-spacing: 0.04em; }
.audio-row { display: flex; align-items: center; gap: 10px; }
.audio-row .chip-btn { flex: 0 0 auto; min-width: 104px; }
.audio-panel input[type="range"] { flex: 1; min-width: 0; min-height: 36px; padding: 0; border: 0; background: transparent; accent-color: var(--bone); }
.audio-panel p { margin: 0; }
.audio-panel .btn-small { align-self: flex-start; }
body.fight-mode .audio-toggle { min-height: 28px; padding: 2px 10px; }

/* Comanda 075: compact setup controls, with the advanced filters over the list. */
.picker-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--panel-2); color: var(--dim); font: 600 0.85rem var(--font); cursor: help; }
.picker-help:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.picker-help:is(:hover, :focus)::after { content: attr(title); position: absolute; z-index: 20; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); width: min(300px, calc(100vw - 40px)); padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: #202631; box-shadow: 0 10px 24px #000a; color: var(--text); font: 400 0.8rem/1.35 var(--font); text-align: left; text-transform: none; white-space: normal; letter-spacing: normal; pointer-events: none; }
.picker-count { color: var(--dim); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.picker-groups-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; margin-top: 5px; }
.picker-groups-row .chip-set.kinds { flex: 1 1 auto; margin: 0; gap: 4px; }
.picker-meta { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; }
.picker-groups-row .roster-group-actions { flex: 0 0 auto; margin: 0 0 0 auto; gap: 4px; }
.picker-groups-row .btn-small { white-space: nowrap; }
.filters-toggle { display: inline-flex; align-items: center; gap: 4px; }
.picker .filter-more:not(.open) { display: none; }
.wizard-picker-controls, #view-setup .picker { position: relative; }
.picker .filter-more.open { position: absolute; z-index: 12; top: calc(100% - 2px); left: 8px; right: 8px; max-height: min(55vh, 420px); overflow-y: auto; margin: 0; padding: 10px; background: #202631; box-shadow: 0 14px 30px #000b; }
#view-wizard .picker { padding: 8px; }
#view-wizard { gap: 4px; }
body.wizard-mode main { padding-top: 4px; padding-bottom: 4px; }
#view-wizard .wizard-head { gap: 0; padding: 2px 8px; }
#view-wizard .wizard-head-row { min-height: 32px; }
#view-wizard .wizard-head .sheet-close { min-width: 32px; min-height: 32px; }
#view-wizard .wizard-progress { min-height: 26px; }
#view-wizard .wizard-dot { min-height: 26px; }
#view-wizard .wizard-title { margin: 0 0 3px; font-size: 1.35rem; line-height: 1.2; }
#view-wizard .picker-bar { margin-top: 4px; flex-wrap: nowrap; align-items: end; }
#view-wizard .picker-bar .search-field { flex: 1 1 auto; min-width: 0; }
#view-wizard .search-field { gap: 2px; }
#view-wizard .search-field > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#view-wizard .search-field input { min-height: 34px; padding-top: 3px; padding-bottom: 3px; }
#view-wizard .picker-actions { flex: 0 0 auto; flex-wrap: nowrap; }
#view-wizard .picker-actions .chip-btn { min-height: 34px; padding: 3px 9px; }
#view-wizard .picker-groups-row .chip-btn { min-height: 34px; padding: 3px 9px; font-size: 0.82rem; }
#view-wizard .picker-groups-row .btn-small { min-height: 34px; padding: 3px 18px; font-size: 0.78rem; } /* 18 px each side: the button frame's border-image (below) takes 18 px */
#view-wizard .r-group-head { min-height: 26px; padding: 2px 7px; line-height: 1.1; }
/* who goes to which side, told by a quiet colour (the owner, 05/10/2026, night: "mude de cor, sutilmente, no botão Heroes para
   diferenciar quem vai para o Lado A"). Only where the sides are fixed, the player's setup: the heroes are the player's group (the warm
   colour of Side A) and everything else is the Master's (the cool colour of Side B). The plates stay violet: the colour is a bar at
   the left of each group, the glyph of its name and a line under each of the four kind chips */
#view-wizard.player-setup { --hint-a: color-mix(in srgb, var(--side-a) 62%, #ffe9d6); --hint-b: color-mix(in srgb, var(--side-b) 62%, #e3f1ff); }
#view-wizard.player-setup .r-group > .r-group-head { border-left: 3px solid var(--hint-b); }
#view-wizard.player-setup .r-group[data-kind="hero"] > .r-group-head { border-left-color: var(--hint-a); }
#view-wizard.player-setup .r-group .r-group-name > .gl { color: var(--hint-b); }
#view-wizard.player-setup .r-group[data-kind="hero"] .r-group-name > .gl { color: var(--hint-a); }
/* The heroes of a real table, pinned above the classes: reddish like the other heroes, a little warmer, so they read as a kind of their
   own (the owner, 12/10/2026: "avermelhado tb, mas sutilmente diferente dos demais heroes padrão"). */
.r-group[data-table] > .r-group-head { border-left: 3px solid var(--hint-table); background: color-mix(in srgb, var(--hint-table) 9%, #15112a); }
.r-group[data-table] .r-group-name { color: color-mix(in srgb, var(--hint-table) 38%, var(--text)); }
.r-group[data-table] .r-group-name > .gl, #view-wizard.player-setup .r-group[data-table] .r-group-name > .gl { color: var(--hint-table); }
#view-wizard.player-setup .r-group[data-table] > .r-group-head { border-left-color: var(--hint-table); }
#view-wizard.player-setup .picker .chip-btn.dim-kinds { position: relative; }
#view-wizard.player-setup .picker .chip-btn.dim-kinds::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--hint-b); }
#view-wizard.player-setup .picker .chip-btn.dim-kinds[data-value="hero"]::after { background: var(--hint-a); }
#view-wizard.player-setup .picker .chip-btn.dim-kinds:not(.on) > .gl { color: var(--hint-b); }
#view-wizard.player-setup .picker .chip-btn.dim-kinds[data-value="hero"]:not(.on) > .gl { color: var(--hint-a); }
#view-wizard .r-cards, #view-wizard .wizard-fighter-column .r-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); gap: 5px; margin-top: 4px; }
#view-wizard .r-card { min-height: 70px; padding: 2px; gap: 3px; }
#view-wizard .r-main { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px; padding: 0; align-items: center; }
#view-wizard .r-portrait { width: 64px; height: 64px; border-radius: 8px; font-size: 1.7rem; }
#view-wizard .r-text { gap: 1px; justify-content: center; }
#view-wizard .r-name { font-size: 0.9rem; line-height: 1.08; }
#view-wizard .r-sub { font-size: 0.73rem; }
#view-wizard .r-badges { flex-wrap: nowrap; overflow: hidden; margin-top: 0; }
#view-wizard .r-badges .badge { flex: 0 0 auto; }
#view-wizard .r-adds { gap: 2px; }
#view-wizard .r-add { min-width: 34px; min-height: 34px; padding: 0; }
#view-wizard .wizard-foot { padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); gap: 0; }
#view-wizard .wizard-foot-row { min-height: 48px; flex-wrap: nowrap; gap: 8px; }
#view-wizard .wizard-foot-row > .btn, #view-wizard .wizard-foot-row > .btn-primary { min-height: 42px; padding-top: 5px; padding-bottom: 5px; }
#view-wizard .wizard-foot-row > .btn-primary { flex: 0 0 auto; }
#view-wizard .wizard-reason { flex: 1 1 auto; min-width: 0; font-size: 0.76rem; line-height: 1.2; }
#view-wizard .wizard-classic { flex: 0 0 auto; margin-left: auto; font-size: 0.76rem; white-space: nowrap; }
#view-wizard .wizard-launch { flex: 0 1 auto; }
#view-wizard .wizard-launch .btn-primary { flex: 0 0 auto; }
#view-wizard .wizard-arena-short { display: block; overflow: visible; white-space: normal; overflow-wrap: anywhere; }
#view-wizard .wizard-arena-options .wizard-arena-field { position: relative; display: flex; flex-direction: column; gap: 3px; }
#view-wizard .wizard-arena-field > .field { padding-right: 30px; }
#view-wizard .wizard-arena-field > .wizard-help { position: absolute; top: 0; right: 0; }
#view-wizard .wizard-arena-field > .wizard-help[open] > p { left: auto; right: 0; }
#view-wizard .wizard-mode-choice, #view-wizard .wizard-distance-choice, #view-wizard .wizard-formation { position: relative; min-width: 0; padding-right: 28px; }
#view-wizard .wizard-mode-choice > .wizard-help, #view-wizard .wizard-distance-choice > .wizard-help, #view-wizard .wizard-formation > .wizard-help { position: absolute; top: 0; right: 0; }
#view-wizard .wizard-arena-options .field > span { display: inline-block; min-height: 1.4em; line-height: 1.25; overflow-wrap: anywhere; }
#view-wizard .wizard-arena-options .advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
#view-wizard .wizard-arena-options .advanced-grid > .field:first-child { grid-column: 1 / -1; }
#view-wizard .wizard-arena-options .advanced-grid > .field:has(#style-a) { position: relative; padding-right: 28px; }
#view-wizard .wizard-arena-options .advanced-grid > .field:has(#style-a) .wizard-help { position: absolute; top: 0; right: 0; }
#view-wizard .wizard-arena-options #wiz-reset { align-self: flex-end; min-height: 30px; padding: 2px 18px; font-size: 0.76rem; }
#view-wizard .wizard-arena-options .home-row:has(#wiz-reset) { display: flex; justify-content: flex-end; margin-top: 2px; }
@media (max-width: 720px) {
  #view-wizard .wizard-foot { min-height: 108px; }
  #view-wizard .wizard-foot-row { flex: 1; align-content: center; }
  #view-wizard .picker-help { width: 44px; height: 44px; min-height: 44px; }
  #view-wizard .wizard-dot { min-width: 44px; min-height: 44px; }
  #view-wizard .wizard-head .sheet-close { min-width: 44px; min-height: 44px; }
  #view-wizard .picker-bar { flex-wrap: wrap; }
  #view-wizard .picker-bar .search-field { flex: 1 1 100%; }
  #view-wizard .search-field input, #view-wizard .picker-actions .chip-btn, #view-wizard .picker-groups-row .chip-btn, #view-wizard .picker-groups-row .btn-small { min-height: 44px; }
  #view-wizard .picker-groups-row { flex-wrap: wrap; }
  #view-wizard .picker-groups-row .chip-set.kinds { flex: 1 1 100%; }
  #view-wizard .picker-groups-row .roster-group-actions { margin-left: 0; }
  #view-wizard .r-cards, #view-wizard .wizard-fighter-column .r-cards { grid-template-columns: minmax(0, 1fr); }
  #view-wizard .r-add { min-width: 44px; min-height: 44px; }
  #view-wizard .wizard-foot-row > .btn, #view-wizard .wizard-foot-row > .btn-primary { min-height: 44px; }
  #view-wizard .wizard-foot-row { flex-wrap: wrap; }
  #view-wizard .wizard-classic { order: 1; }
  #view-wizard .wizard-reason { order: 2; flex: 1 1 100%; }
  #view-wizard .wizard-launch { order: 3; flex: 1 1 100%; justify-content: flex-start; }
  #view-wizard .wizard-arena-options .advanced-grid { grid-template-columns: minmax(0, 1fr); }
  #view-wizard .wizard-arena-options .advanced-grid > .field:first-child { grid-column: auto; }
  #view-wizard .wizard-help > summary { width: 44px; height: 44px; }
  #view-wizard .wizard-arena-field > .field, #view-wizard .wizard-mode-choice, #view-wizard .wizard-distance-choice, #view-wizard .wizard-formation, #view-wizard .wizard-arena-options .advanced-grid > .field:has(#style-a) { padding-right: 48px; }
  #view-wizard .wizard-arena-options #wiz-reset { min-height: 44px; }
  #view-wizard .wizard-formation > .field:has(#style-a) .wizard-help { right: -48px; }
}
body.fight-mode .audio-dot { top: 3px; right: 5px; }
@media (max-width: 420px) {
  .team-bars { grid-template-columns: minmax(0, 1fr); }
  .audio-toggle { padding: 4px 8px; min-width: 40px; }
}

/* ---- combatant labels (docs/WEB.md, "Clones, retratos e botões"): ONE label per combatant from the packet; a clone shows
   its ordinal as a pip, in HTML. Side colour on the chip, bone white on the pip, never gold ---- */
.label-face { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.label-base { letter-spacing: -0.02em; }
.clone-pip { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25em; height: 1.25em; padding: 0 2px; border-radius: 999px; background: var(--bone); color: #110e21; font-family: var(--mono); font-weight: 800; font-size: 0.72em; line-height: 1; text-shadow: none; box-shadow: 0 0 0 1px #110e21; }
.who-chip { display: inline-flex; align-items: center; vertical-align: 0.08em; margin: 0 1px; padding: 1px 5px; border-radius: 6px; border: 1px solid var(--border); background: #15112a; color: var(--text); font-family: var(--mono); font-size: 0.72rem; font-weight: 800; font-style: normal; line-height: 1.2; white-space: nowrap; }
.who-chip.side-a { border-color: var(--side-a); box-shadow: inset 3px 0 0 var(--side-a); padding-left: 7px; }
.who-chip.side-b { border-color: var(--side-b); box-shadow: inset 3px 0 0 var(--side-b); padding-left: 7px; }
.who-chip .clone-pip { margin-left: 2px; font-size: 0.66rem; }
.who-name { font-weight: inherit; }
.who-name, .hp-short, .a-name { overflow-wrap: anywhere; }
.hp-slot .who-chip { font-size: 0.66rem; padding: 0 4px 0 6px; }
.init-token .label-face { font-weight: 800; }
.init-token .clone-pip { margin-left: 1px; font-size: 0.62rem; }
/* the token: letters in the middle, the clone pip as a notch on the ring (bottom left) */
.token .label-base { pointer-events: none; }
.token > .clone-pip { position: absolute; left: -0.35em; bottom: -0.3em; font-size: 9px; min-width: 13px; height: 13px; z-index: 1; }
.token.tiny > .label-base, .token.tiny > .label-tag { display: none; }
.hp-row .tok > .clone-pip, .arena-item .tok > .clone-pip { font-size: 8px; min-width: 12px; height: 12px; left: -4px; bottom: -3px; }
.hp-row .tok, .arena-item .tok { position: relative; }
/* a portrait token: the approved avatar inside the side-coloured ring; the label as a small tag at readable sizes */
.token.has-portrait { --face: var(--portrait); }
.token.has-portrait, .token.paralyzed { background-image: var(--hatch, none), var(--face, none); background-size: auto, cover; background-position: center; background-repeat: repeat, no-repeat; }
.token.has-portrait.side-a { border-color: var(--side-a); }
.token.has-portrait.side-b { border-color: var(--side-b); }
.token > .original-face { position: absolute; top: -0.45em; left: -0.45em; z-index: 3; width: clamp(13px, 35%, 24px); height: clamp(13px, 35%, 24px); display: grid; place-items: center; border: 2px solid #f1edff; border-radius: 50%; background-color: #252630; background-position: center; background-size: cover; color: #f1edff; font-size: 9px; line-height: 1; text-shadow: 0 1px 2px #120f24; pointer-events: none; }
.token:has(> .original-face) > .badge-hidden { left: 45%; }
/* the Grid shows no art: no face, the label seal back in the middle as the letters of today */
.map.art-off .token.has-portrait { --face: none; }
.map.art-off .token.has-portrait > .label-tag { position: static; transform: none; padding: 0; border: 0; background: none; font-family: inherit; font-size: inherit; line-height: normal; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
/* Paralyzed, Stunned, Petrified: bone hatching over the face or the colour, and a duller face (never red, never gold) */
.token.paralyzed { --hatch: repeating-linear-gradient(135deg, rgba(241, 237, 255, 0.42) 0 2px, transparent 2px 6px); }
.token.paralyzed:not(.out) { filter: saturate(0.35) brightness(0.95); }
/* Burrow: the earth stays at the full footprint for Medium, Large and Huge tokens. */
.token.burrowed { border: 2px dashed #e2bb7d; background-color: #49341f; background-image: repeating-linear-gradient(135deg, rgba(225, 181, 114, .2) 0 3px, transparent 3px 9px), var(--face, none); background-blend-mode: normal, luminosity; box-shadow: inset 0 0 0 4px #261b13, 0 0 0 2px #24190f; }
.token.burrowed::before { opacity: .25; }
.token.burrowed > .label-base, .token.burrowed > .label-tag, .token.burrowed > .original-face { opacity: .18; }
.burrow-mound { display: none; position: absolute; inset: 5%; z-index: 4; align-items: center; justify-content: center; border-radius: 50%; border: 3px dashed #e0b875; background: repeating-linear-gradient(145deg, #5d4229 0 5px, #765330 5px 9px, #3f2e1c 9px 14px); color: #ffe3a4; font-size: clamp(13px, .48em, 28px); text-shadow: 0 1px 3px #21180f; box-shadow: inset 0 0 0 4px #362718, 0 2px 9px #1a140e; pointer-events: none; }
.token.burrowed .burrow-mound, .token.burrow-surface .burrow-mound { display: flex; }
.token.burrow-surface .burrow-mound { animation: burrow-reveal var(--burrow-ms, 560ms) ease-out forwards; }
.token.burrow-under { animation: burrow-sink var(--burrow-ms, 560ms) ease-in-out; }
.token.burrow-dig { z-index: 4; }
.burrow-trail { position: absolute; z-index: 2; height: 16px; transform-origin: left center; border-radius: 999px; background: repeating-linear-gradient(90deg, #815a35 0 7px, #b1834e 7px 11px, transparent 11px 16px); box-shadow: 0 0 0 2px #342316; opacity: .85; pointer-events: none; animation: burrow-track ease-out forwards; }
@keyframes burrow-sink { 0% { transform: scale(1); } 45% { transform: scale(.38); opacity: .5; } 100% { transform: scale(1); opacity: 1; } }
@keyframes burrow-reveal { 0%, 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.25); } }
@keyframes burrow-track { from { clip-path: inset(0 100% 0 0); } 65% { clip-path: inset(0 0 0 0); opacity: .85; } to { opacity: 0; } }
.token-ready-seal { display: none; position: absolute; top: -0.45em; left: -0.45em; z-index: 6; width: 1.35em; height: 1.35em; min-width: 16px; min-height: 16px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #e8cb82; background: #272213; color: #fff0b8; font-size: .55em; text-shadow: none; box-shadow: 0 1px 5px #111; pointer-events: none; }
.token.readied .token-ready-seal, .token-ready-seal.ready-flash { display: flex; }
.token-rust-seals { position: absolute; right: -0.5em; top: -0.5em; z-index: 7; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.token-rust-seal { display: block; width: max-content; max-width: 84px; border: 1px solid #d99856; border-radius: 6px; padding: 1px 3px; background: #322118; color: #ffe0ae; font-size: 10px; font-weight: 700; line-height: 1.25; text-shadow: none; box-shadow: 0 1px 5px #111; }
.hp-ac.ac-corroded { color: #f0a868; }
.token-rust-seal.destroyed { border-color: #f1b4a2; background: #441d1a; color: #fff0dc; }
.token-ready-seal.ready-flash { animation: ready-fired 420ms ease-out forwards; }
@keyframes ready-fired { 0%, 40% { transform: scale(1.6); opacity: 1; box-shadow: 0 0 13px 5px #f6d57a; } 100% { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .token.burrow-under, .token.burrow-surface .burrow-mound, .token-ready-seal.ready-flash, .burrow-trail { animation: none; } .burrow-trail { display: none; } }
/* ---- Codex button art (docs/WEB.md, "Clones, retratos e botões"): ONE file per state from static/art/botoes.json, because
   border-image cannot position inside a sprite. The labels stay HTML text over the art, the focus ring stays bone white,
   the sizes of the layout stay. The 3-slice keeps the ends whole: border-image-slice is "0 right 0 left fill" of the JSON ---- */
#view-home .btn-primary, #view-wizard .btn-primary, #view-fight .btn-primary, #view-result .btn-primary, #view-series .btn-primary {
  border: 0 solid transparent; border-radius: 0; color: #110e21; text-shadow: none; padding: 10px 44px; min-height: 46px;
  border-image-source: url("/static/art/botao-primario__normal.webp"); border-image-slice: 0 76 0 76 fill; border-image-width: 0 40px; border-image-repeat: stretch;
  /* the other states load with the page, so hovering never flickers */
  background: url("/static/art/botao-primario__hover.webp") no-repeat -9999px 0 / 1px 1px, url("/static/art/botao-primario__pressed.webp") no-repeat -9999px 0 / 1px 1px, url("/static/art/botao-primario__disabled.webp") no-repeat -9999px 0 / 1px 1px;
}
#view-home .btn-primary:hover, #view-wizard .btn-primary:hover, #view-fight .btn-primary:hover, #view-result .btn-primary:hover, #view-series .btn-primary:hover { border-image-source: url("/static/art/botao-primario__hover.webp"); }
#view-home .btn-primary:active, #view-wizard .btn-primary:active, #view-fight .btn-primary:active, #view-result .btn-primary:active, #view-series .btn-primary:active { border-image-source: url("/static/art/botao-primario__pressed.webp"); }
#view-home .btn-primary[aria-disabled="true"], #view-wizard .btn-primary[aria-disabled="true"], #view-home .btn-primary:disabled, #view-wizard .btn-primary:disabled, #view-fight .btn-primary:disabled, #view-result .btn-primary:disabled, #view-series .btn-primary:disabled { border-image-source: url("/static/art/botao-primario__disabled.webp"); color: #3c3a36; }
#view-home .btn, #view-wizard .btn, #view-wizard .btn-small, #view-result > .actions > .btn, #view-series > .actions > .btn {
  border: 0 solid transparent; border-radius: 0; color: var(--text); padding-left: 24px; padding-right: 24px;
  border-image-source: url("/static/art/botao-secundario__normal.webp"); border-image-slice: 0 53 0 53 fill; border-image-width: 0 25px; border-image-repeat: stretch;
  background: url("/static/art/botao-secundario__hover.webp") no-repeat -9999px 0 / 1px 1px, url("/static/art/botao-secundario__pressed.webp") no-repeat -9999px 0 / 1px 1px, url("/static/art/botao-secundario__disabled.webp") no-repeat -9999px 0 / 1px 1px;
}
#view-wizard .btn-small { border-image-width: 0 20px; padding-left: 20px; padding-right: 20px; }
#view-home .btn:hover, #view-wizard .btn:hover, #view-wizard .btn-small:hover, #view-result > .actions > .btn:hover, #view-series > .actions > .btn:hover { border-image-source: url("/static/art/botao-secundario__hover.webp"); }
#view-home .btn:active, #view-wizard .btn:active, #view-wizard .btn-small:active, #view-result > .actions > .btn:active, #view-series > .actions > .btn:active { border-image-source: url("/static/art/botao-secundario__pressed.webp"); }
#view-home .btn[aria-disabled="true"], #view-wizard .btn[aria-disabled="true"], #view-wizard .btn-small[aria-disabled="true"] { border-image-source: url("/static/art/botao-secundario__disabled.webp"); color: var(--dim); }
#view-home .btn-primary:focus-visible, #view-wizard .btn-primary:focus-visible, #view-fight .btn-primary:focus-visible, #view-result .btn-primary:focus-visible, #view-result > .actions > .btn:focus-visible, #view-series .btn-primary:focus-visible, #view-series > .actions > .btn:focus-visible, #view-home .btn:focus-visible, #view-wizard .btn:focus-visible, #view-wizard .btn-small:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
/* the one button of the presentation of the fighters: the quiet plate while they arrive ("Skip") and the bright one when they are all
   there ("Start the fight"). border-image has no transition of its own, so each plate is a layer and the two cross-fade */
.scene-opening-go::before, .scene-opening-go::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 0 solid transparent; border-image-repeat: stretch; transition: opacity 0.3s ease; }
.scene-opening-go::before { border-image-source: url("/static/art/botao-secundario__normal.webp"); border-image-slice: 0 53 0 53 fill; border-image-width: 0 25px; }
.scene-opening-go::after { border-image-source: url("/static/art/botao-primario__normal.webp"); border-image-slice: 0 76 0 76 fill; border-image-width: 0 40px; opacity: 0; }
.scene-opening-go:hover::before { border-image-source: url("/static/art/botao-secundario__hover.webp"); }
.scene-opening-go:active::before { border-image-source: url("/static/art/botao-secundario__pressed.webp"); }
.scene-opening-go.ready::before { opacity: 0; }
.scene-opening-go.ready::after { opacity: 1; filter: drop-shadow(0 0 9px rgba(241, 237, 255, 0.4)); }
.scene-opening-go.ready:hover::after { border-image-source: url("/static/art/botao-primario__hover.webp"); }
.scene-opening-go.ready:active::after { border-image-source: url("/static/art/botao-primario__pressed.webp"); }
.scene-opening-go:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
/* round medallions with the control glyphs: Resume/Pause and Skip in the replay bar; the 🔊 header control wears the sound glyphs of 14-ICO-B (group 5) */
/* 26 px with a negative start margin: the same room the emoji took, so the replay bar keeps its rows at 1366 × 768 */
.medal { --medal: url("/static/art/medalhao__normal.webp"); display: inline-block; flex: 0 0 auto; width: 26px; height: 26px; margin: -3px 0 -3px -7px; background-image: var(--glyph, none), var(--medal); background-repeat: no-repeat; background-position: center; background-size: 46%, contain; }
.ctrl-medal { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.ctrl-medal:hover .medal { --medal: url("/static/art/medalhao__hover.webp"); }
.ctrl-medal:active .medal { --medal: url("/static/art/medalhao__pressed.webp"); }
.ctrl-medal:disabled .medal { --medal: url("/static/art/medalhao__disabled.webp"); }
#btn-play .medal { --glyph: url("/static/art/glifo__pause.webp"); }
#btn-play.is-paused .medal { --glyph: url("/static/art/glifo__play.webp"); background-position: 56% center, center; }
#btn-skip .medal { --glyph: url("/static/art/glifo__skip.webp"); background-size: 58%, contain; }
.lang-toggle.audio-toggle { border: 0; border-radius: 50%; padding: 0; width: 36px; min-width: 36px; height: 36px; background: url("/static/art/medalhao__normal.webp") center / contain no-repeat; font-size: 0.95rem; }
.lang-toggle.audio-toggle:hover, .lang-toggle.audio-toggle[aria-expanded="true"] { background-image: url("/static/art/medalhao__hover.webp"); }
.lang-toggle.audio-toggle:active { background-image: url("/static/art/medalhao__pressed.webp"); }
body.fight-mode .lang-toggle.audio-toggle { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; font-size: 0.8rem; }
/* form glyphs: the chevrons of the wizard selects and folds, the add glyph of +A/+B (tinted with the side), the remove glyph of a slot */
#view-wizard select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("/static/art/form__chevron-down.webp"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px; }
#view-wizard details.panel > summary { list-style: none; display: flex; align-items: center; gap: 8px; }
#view-wizard details.panel > summary::-webkit-details-marker { display: none; }
#view-wizard details.panel > summary::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-left: auto; background: url("/static/art/form__chevron-down.webp") center / contain no-repeat; }
#view-wizard details.panel[open] > summary::after { background-image: url("/static/art/form__chevron-up.webp"); }
.r-add-glyph { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 3px; vertical-align: -0.12em; background-color: currentColor; -webkit-mask: url("/static/art/form__add.webp") center / contain no-repeat; mask: url("/static/art/form__add.webp") center / contain no-repeat; }
.slot .s-remove { font-size: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.slot .s-remove::before { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url("/static/art/form__remove.webp") center / contain no-repeat; mask: url("/static/art/form__remove.webp") center / contain no-repeat; }
.slot .s-remove:hover { color: var(--side-a-2); }
.token > .label-tag { position: absolute; left: 50%; bottom: -0.45em; transform: translateX(-50%); padding: 0 3px; border-radius: 4px; background: #120f24; color: var(--text); border: 1px solid var(--dim); font-family: var(--mono); font-size: 9px; line-height: 1.3; font-weight: 700; text-shadow: none; white-space: nowrap; }
/* the label seal of a face token: on the ring at the bottom, above the ring art, readable down to 20 px tokens */
.token > .label-tag { z-index: 1; font-size: clamp(8px, calc(var(--tok, 28px) * 0.2), 12px); }
.token.tiny.has-portrait > .label-tag { display: block; bottom: -0.35em; padding: 0 2px; font-size: 8px; line-height: 1.15; }
.token.micro.has-portrait > .label-tag { display: none; }
/* a small clone: a smaller pip and the seal moved right, so the number and the letters both stay readable */
.token.tiny.is-clone > .clone-pip { font-size: 8px; min-width: 11px; height: 11px; left: -0.45em; bottom: -0.35em; }
.token.tiny.has-portrait.is-clone > .label-tag { left: 64%; }
.map.art-off .token.tiny.has-portrait > .label-tag { display: none; }

/* ==== Arte da interface (docs/WEB.md, "Arte da interface"): approved Codex pieces from static/art/ui.json and the map
   overlays of static/art/arenas.json. Every piece sits behind or over an element of today (never a new layout box); a
   missing file leaves the CSS of today; reduced motion holds every animation on its first frame. ==== */
/* ambient map flourishes from the same UI manifest; kept here so the art block documents every cited derivative */
.map[data-arena="riacho"]:not(.art-off)::after, .map[data-arena="pocas"]:not(.art-off)::after { background-image: url("/static/art/ambiente__respingo.webp"); }
.map[data-arena="carrinhos"]:not(.art-off)::after { background-image: url("/static/art/ambiente__poeira.webp"); background-position: 22% 72%; }
.map[data-arena="ringue-lava"]:not(.art-off)::after { background-image: url("/static/art/ambiente__bolhas.webp"); background-position: 78% 30%; }
@keyframes strip-4 { to { background-position-x: 133.333%; } }
@keyframes strip-6 { to { background-position-x: 120%; } }
@keyframes strip-8 { to { background-position-x: 114.286%; } }

/* ---- arena and map (group 1) ---- */
/* token rings (08-MAP-I): the side and the state over the CSS ring of today, which stays under it as the fallback.
   tools/arte_web.py centres every ring file on the ring's hole with the outer edge at ui.json ring.outer (0.38) of the
   file, so the box is square and centred on the token: its width is the token (100% of the padding box + the 2 px
   borders) times --ring-box = 1.04 / (2 × 0.38), which lays the ring's outer edge 2 % outside the token's circle and
   the CSS border under the ring band, at every size (Tiny to Gargantuan) and every zoom */
.token { --ring-box: 1.3684; }
.token::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc((100% + 4px) * var(--ring-box)); height: calc((100% + 4px) * var(--ring-box)); transform: translate(-50%, -50%); pointer-events: none; background: var(--ring, none) center / contain no-repeat; }
.token.squeezed { border-style: dashed; }
.token.squeezed::before { width: 100%; height: 100%; background-size: 100% 100%; }
.token.squeezed > .label-tag { bottom: 0; }
.token.squeezed-narrow > .label-tag, .token.squeezed-narrow > .label-base { display: none !important; }
.token.squeezed > .clone-pip { left: 0; bottom: 0; }
.token.squeezed-narrow > .clone-pip { min-width: 8px; width: 8px; height: 8px; font-size: 7px; }
.token.squeezed-narrow > .original-face { width: 35%; height: 35%; top: 0; left: 0; }
.token.squeezed-narrow > .badge-hidden { width: min(10px, 50%); height: min(10px, 50%); top: 0; left: 0; }
.token.squeezed .badge-z { right: 0; bottom: 0; }
.token.squeezed .token-seal { right: 0; top: 0; min-width: 0; min-height: 0; width: min(1.25em, 60%); height: min(1.25em, 60%); }
.token.squeezed .token-veil { inset: 0; border-radius: 50%; }
.token.squeezed.form-wild-shape, .token.squeezed.form-polymorph { outline-width: 2px; outline-offset: -2px; }
.token.squeezed .mirror-copy { width: 40%; height: 40%; }
.token.squeezed .mirror-copy-1 { left: 5%; top: 12%; }
.token.squeezed .mirror-copy-2 { right: 5%; top: 12%; }
.token.squeezed .mirror-copy-3 { left: 30%; bottom: 5%; }
.token.resilient-sphere:not(.out)::after { content: ""; position: absolute; inset: -18%; border: 2px solid rgba(217, 239, 255, 0.95); border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.27), rgba(114, 189, 232, 0.15) 56%, rgba(91, 159, 213, 0.33)); box-shadow: inset -4px -5px 10px rgba(144, 208, 246, 0.32), 0 0 12px rgba(194, 230, 255, 0.66); pointer-events: none; }
/* the Grid shows no art: the CSS ring of today alone; with the art ring the active token keeps only the bone glow */
.map.art-off .token::before { display: none; }
.map:not(.art-off) .token.active { box-shadow: 0 0 12px 3px var(--bone-glow); }
.map:not(.art-off):not(.layer-roof) .token.on-roof.active { box-shadow: 0 0 0 2px #7b4a38, 0 0 12px 3px var(--bone-glow); }
.token.side-a { --ring: url("/static/art/anel__a-normal.webp"); }
.token.side-b { --ring: url("/static/art/anel__b-normal.webp"); }
.token.side-a.active { --ring: url("/static/art/anel__a-active.webp"); }
.token.side-b.active { --ring: url("/static/art/anel__b-active.webp"); }
.token.side-a.targeted { --ring: url("/static/art/anel__a-target.webp"); }
.token.side-b.targeted { --ring: url("/static/art/anel__b-target.webp"); }
.token.side-a.out, .token.side-a.left-behind { --ring: url("/static/art/anel__a-out.webp"); }
.token.side-b.out, .token.side-b.left-behind { --ring: url("/static/art/anel__b-out.webp"); }
/* A changed Beast gets its own ring in Art and Grid; it must not borrow team or victory colours. */
.token.form-wild-shape { --ring: none; border-color: #86d8af !important; outline: 3px solid #86d8af; outline-offset: 1px; }
.token.form-polymorph { --ring: none; border-color: #c7a2ed !important; outline: 3px solid #c7a2ed; outline-offset: 1px; }
/* the map seals (08-MAP-J) on the top corner: flying, climbing, swimming; bone glyph on a dark disc */
.token-seal { position: absolute; top: -0.5em; right: -0.55em; width: 1.25em; height: 1.25em; min-width: 12px; min-height: 12px; border-radius: 50%; background: #120f24; border: 1px solid var(--dim); pointer-events: none; }
.token-seal::after { content: ""; position: absolute; inset: 14%; background-color: var(--bone); -webkit-mask: var(--seal) center / contain no-repeat; mask: var(--seal) center / contain no-repeat; }
.token-seal.seal-fly { --seal: url("/static/art/selo__fly.webp"); }
.token-seal.seal-climb { --seal: url("/static/art/selo__climb.webp"); }
.token-seal.seal-swim { --seal: url("/static/art/selo__swim.webp"); }
.token.out .token-seal, .token.tiny .token-seal { display: none; }
/* ABD water is read from replay positions. The ring replaces the swimming seal only for packets with water. */
.token-swim-ring, .token-water-veil { display: none; position: absolute; pointer-events: none; }
.token-swim-ring { inset: -28%; z-index: 2; background: url("/static/art/anel-nado__strip.webp") 0 0 / 400% 100% no-repeat; mix-blend-mode: screen; }
.token.water-surface .token-swim-ring { display: block; animation: strip-4 2.8s steps(4) infinite; }
.token-water-veil { inset: 2%; z-index: 1; border-radius: 50%; background: rgba(6, 38, 55, 0.27); }
.token-water-veil::after { content: ""; position: absolute; inset: -22%; background: url("/static/art/veu-submerso__strip.webp") 0 0 / 400% 100% no-repeat; mix-blend-mode: screen; opacity: 0.62; }
.token.water-under .token-water-veil { display: block; }
.token.water-under .token-water-veil::after { animation: strip-4 2.2s steps(4) infinite; }
.token.water-surface > .label-base, .token.water-under > .label-base { position: relative; z-index: 3; }
.token.water-surface > .label-tag, .token.water-under > .label-tag, .token.water-surface > .clone-pip, .token.water-under > .clone-pip { z-index: 3; }
.token.water-surface .badge-z, .token.water-under .badge-z, .token.water-surface .token-seal, .token.water-under .token-seal, .token.water-surface .badge-hidden, .token.water-under .badge-hidden { z-index: 4; }
.token.squeezed .token-swim-ring { inset: 0; border-radius: 50%; }
.token.squeezed .token-water-veil::after { inset: 0; }
.water-splash { position: absolute; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; background: url("/static/art/respingo__strip.webp") 0 0 / 600% 100% no-repeat; mix-blend-mode: screen; animation: water-splash var(--splash-ms, 720ms) steps(6) forwards; }
@keyframes water-splash { to { background-position-x: 120%; opacity: 0; } }
.map.no-anim .token.water-surface .token-swim-ring, .map.no-anim .token.water-under .token-water-veil::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .token.water-surface .token-swim-ring, .token.water-under .token-water-veil::after { animation: none; } .water-splash { display: none; animation: none; } }
/* Hide and Search (09-FUR-A, B): the eye-slash glyph on the hidden badge, the smoke veil around the hidden token, the
   dashed ring where it hid, the roof glyph on the height badge */
.token .badge-hidden::before { content: ""; position: absolute; inset: 2px; background-color: #e6c7ff; -webkit-mask: url("/static/art/furtividade__hidden.webp") center / contain no-repeat; mask: url("/static/art/furtividade__hidden.webp") center / contain no-repeat; }
.token .badge-hidden::after { display: none; }
.token-veil { display: none; position: absolute; inset: -32%; pointer-events: none; background: url("/static/art/veu__strip.webp") 0 0 / 400% 100% no-repeat; }
.token.hidden-fighter .token-veil { display: block; animation: strip-4 1.4s steps(4) infinite; }
.last-seen { position: absolute; z-index: 1; pointer-events: none; }
.token .badge-z.roof::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 1px; vertical-align: -0.15em; background-color: currentColor; -webkit-mask: url("/static/art/furtividade__roof.webp") center / contain no-repeat; mask: url("/static/art/furtividade__roof.webp") center / contain no-repeat; }
/* the legend of the obscured cells under a map (the note of today): the glyph (09-FUR-A) and the name in HTML */
.map-legend { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; vertical-align: middle; }
.legend-chip { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.legend-chip::before { content: ""; width: 13px; height: 13px; background-color: var(--bone); -webkit-mask: var(--legend) center / contain no-repeat; mask: var(--legend) center / contain no-repeat; }
.legend-light { --legend: url("/static/art/furtividade__light.webp"); }
.legend-heavy { --legend: url("/static/art/furtividade__heavy.webp"); }
.legend-fog { --legend: url("/static/art/furtividade__heavy.webp"); }
.legend-dim { --legend: url("/static/art/furtividade__dim.webp"); }
.legend-dark::before { background: #221b2e; border: 1px solid var(--bone); border-radius: 50%; box-sizing: border-box; }
.map-legend .legend-roof, .map-legend.layer-roof .legend-floor { display: none; }
.map-legend.layer-roof .legend-roof { display: inline-flex; }
/* the map overlays (arenas.json "overlays"), aligned to the board by --bx/--by: Dim Light multiplies, fog screens, the
   water tiles only where no whole painted floor already shows the water */
.map.has-overlays:not(.art-off):not(.floor-painted) .terrain.water { background-image: var(--ov-water); background-size: var(--ov-water-size); background-position: var(--bx) var(--by); }
.map.has-overlays:not(.art-off):not(.floor-painted) .terrain.shallow { background-image: var(--ov-shallow); background-size: var(--ov-shallow-size); background-position: var(--bx) var(--by); opacity: 0.9; }
.areas .area-fog-art { mix-blend-mode: screen; opacity: 0.7; }
.map.art-off .areas .area-fog-art { display: none; }
/* the replay speeds: a pip glyph per label (14-BOT-A, group 5), the pips are the label's number; desktop only; the 1, 2 and
   4 pip glyphs of 08-BOT-D stay in botoes.json as the reserve (decision 59) */
.speed-glyph { display: none; order: -1; }
@media (min-width: 900px) {
  .controls .speed-cycle { display: inline-flex; align-items: center; justify-content: center; }
  .controls .speed-glyph { display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; background-color: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
}
@media (prefers-reduced-motion: reduce) { .token.hidden-fighter .token-veil { animation: none; } }
/* ==== end of group 1 ==== */

/* ---- the fight: effects and status (group 2) ---- */
/* one pop per token per event (app.js popOnToken): a lance, the Critical Hit burst, a damage type, a heal, a block,
   Found, the Search lantern. Above the token, under the controls; never in the log */
.map-pop { position: absolute; z-index: 5; pointer-events: none; background: var(--pop) center / contain no-repeat; animation: pop-fx var(--pop-ms, 700ms) ease-out forwards; }
/* the short title of an action (ACX, 15/10/2026): a band at the top of the board, in the title face, white with a dark outline, as in the
   videos; it never takes a click and leaves the board as it was */
.map-action-title { position: absolute; z-index: 6; top: 6px; left: 50%; transform: translateX(-50%); max-width: 90%; padding: 2px 14px; pointer-events: none; opacity: 0;
  font: 700 clamp(1rem, 2.4vw, 1.6rem) var(--font-display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 2px #0e1016, 0 0 4px #0e1016, 1px 1px 0 #0e1016, -1px -1px 0 #0e1016, 1px -1px 0 #0e1016, -1px 1px 0 #0e1016;
  background: linear-gradient(90deg, transparent, rgba(14, 16, 22, 0.55) 15%, rgba(14, 16, 22, 0.55) 85%, transparent); }
.map-action-title.show { animation: action-title var(--title-ms, 1500ms) ease-out forwards; }
@keyframes action-title { 0% { opacity: 0; transform: translate(-50%, -4px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-action-title.show { animation: none; opacity: 1; } }
/* comanda 158 · os chips */
.map-action-art { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.map-action-title-text { display: inline-block; max-width: calc(90vw - 64px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
@keyframes pop-fx { 0% { opacity: 0; transform: scale(0.6); } 20% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } }
.map-projectile { position: absolute; z-index: 5; pointer-events: none; opacity: 0; transform-origin: center; animation: projectile-flight var(--projectile-ms, 700ms) linear forwards; }
.projectile-fireball { background: url("/static/art/projetil-bola-de-fogo__strip.webp") 0 0 / 400% 100% no-repeat; animation: projectile-flight var(--projectile-ms, 700ms) linear forwards, strip-4 var(--projectile-ms, 700ms) steps(4) forwards; }
@keyframes projectile-flight { 0% { opacity: 0; transform: translate(0, 0) rotate(var(--projectile-angle)); } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--travel-x), var(--travel-y)) rotate(var(--projectile-angle)); } }
.map-ray { position: absolute; z-index: 5; pointer-events: none; opacity: 0; transform: rotate(var(--ray-angle)); transform-origin: left center; background: var(--ray) 0 0 / 400% 100% no-repeat; animation: ray-flash var(--ray-ms, 560ms) var(--ray-delay, 0ms) ease-out forwards, strip-4 var(--ray-ms, 560ms) var(--ray-delay, 0ms) steps(4) forwards; }
.ray-fire { --ray: url("/static/art/raio-fire__strip.webp"); }
.ray-cold { --ray: url("/static/art/raio-cold__strip.webp"); }
.ray-lightning { --ray: url("/static/art/raio-lightning__strip.webp"); }
.ray-force { --ray: url("/static/art/raio-force__strip.webp"); }
.ray-radiant { --ray: url("/static/art/raio-radiant__strip.webp"); }
.ray-acid { --ray: url("/static/art/raio-acid__strip.webp"); }
.ray-poison { --ray: url("/static/art/raio-poison__strip.webp"); }
.ray-psychic { --ray: url("/static/art/raio-psychic__strip.webp"); }
.ray-thunder { --ray: url("/static/art/raio-thunder__strip.webp"); }
@keyframes ray-flash { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.pop-hit { --pop: url("/static/art/lance__hit.webp"); }
.pop-miss { --pop: url("/static/art/lance__miss.webp"); }
.pop-heal { --pop: url("/static/art/lance__heal.webp"); }
.pop-block { --pop: url("/static/art/lance__block.webp"); }
.pop-crit { --pop: url("/static/art/efeito__critico.webp"); }
.pop-found { --pop: url("/static/art/furtividade__found.webp"); }
.map-pop.pop-dispel { --pop: url("/static/art/magia-dispel-magic__strip.webp"); background: var(--pop) 0 0 / 600% 100% no-repeat; mix-blend-mode: screen; animation: strip-6 var(--pop-ms, 600ms) steps(6) forwards; border-radius: 0; filter: none; }
.map.no-anim .map-pop.pop-dispel { animation: none; }
@media (prefers-reduced-motion: reduce) { .map-pop.pop-dispel { animation: none; } }
.pop-dmg.dmg-acid { --pop: url("/static/art/dano__acid.webp"); }
.pop-dmg.dmg-bludgeoning { --pop: url("/static/art/dano__bludgeoning.webp"); }
.pop-dmg.dmg-cold { --pop: url("/static/art/dano__cold.webp"); }
.pop-dmg.dmg-fire { --pop: url("/static/art/dano__fire.webp"); }
.pop-dmg.dmg-force { --pop: url("/static/art/dano__force.webp"); }
.pop-dmg.dmg-lightning { --pop: url("/static/art/dano__lightning.webp"); }
.pop-dmg.dmg-necrotic { --pop: url("/static/art/dano__necrotic.webp"); }
.pop-dmg.dmg-piercing { --pop: url("/static/art/dano__piercing.webp"); }
.pop-dmg.dmg-poison { --pop: url("/static/art/dano__poison.webp"); }
.pop-dmg.dmg-psychic { --pop: url("/static/art/dano__psychic.webp"); }
.pop-dmg.dmg-radiant { --pop: url("/static/art/dano__radiant.webp"); }
.pop-dmg.dmg-slashing { --pop: url("/static/art/dano__slashing.webp"); }
.pop-dmg.dmg-thunder { --pop: url("/static/art/dano__thunder.webp"); }
.pop-search { background: url("/static/art/lanterna__strip.webp") 0 0 / 600% 100% no-repeat; animation: strip-6 var(--pop-ms, 1200ms) steps(6) forwards; }
.pop-search.flip { transform: scaleX(-1); }
/* the dice (08-EFE-A) in the tray and the log; a fresh d20 rolls once (08-EFE-B, steps(8)) and settles on its face */
.die-glyph { position: relative; display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; background: var(--die) center / contain no-repeat; }
.die-d4 { --die: url("/static/art/dado__d4.webp"); }
.die-d6 { --die: url("/static/art/dado__d6.webp"); }
.die-d8 { --die: url("/static/art/dado__d8.webp"); }
.die-d10 { --die: url("/static/art/dado__d10.webp"); }
.die-d12 { --die: url("/static/art/dado__d12.webp"); }
.die-d20 { --die: url("/static/art/dado__d20.webp"); }
.die-glyph.rolling { animation: die-hide 0.64s steps(1); }
.die-glyph.rolling::after { content: ""; position: absolute; inset: -3px; background: url("/static/art/d20-rolando__strip.webp") 0 0 / 800% 100% no-repeat; animation: strip-8 0.64s steps(8), die-roll-out 0.64s steps(1) forwards; }
@keyframes die-hide { from, to { background-size: 0 0; } }
@keyframes die-roll-out { to { opacity: 0; } }
.dice-row .die-glyph { width: 20px; height: 20px; }
/* the INITIATIVE strip (08-STA-B): the side's round token before each label; active, next and down */
.init-token::before { content: ""; flex: 0 0 auto; width: 1.45em; height: 1.45em; margin: -3px 0 -3px -5px; background: var(--init) center / contain no-repeat; }
.init-token.side-a { --init: url("/static/art/iniciativa__a-normal.webp"); }
.init-token.side-b { --init: url("/static/art/iniciativa__b-normal.webp"); }
.init-token.side-a.next { --init: url("/static/art/iniciativa__a-next.webp"); }
.init-token.side-b.next { --init: url("/static/art/iniciativa__b-next.webp"); }
.init-token.side-a.active { --init: url("/static/art/iniciativa__a-active.webp"); }
.init-token.side-b.active { --init: url("/static/art/iniciativa__b-active.webp"); }
.init-token.side-a.out { --init: url("/static/art/iniciativa__a-down.webp"); }
.init-token.side-b.out { --init: url("/static/art/iniciativa__b-down.webp"); }
/* condition pills (08-STA-C) on the fight cards, in the fighter's side colour; the name and duration stay HTML */
.hp-row .hp-conds .cond { border: 0 solid transparent; border-width: 0 6px; border-radius: 0; padding: 0 2px; background-clip: padding-box; border-image-source: url("/static/art/pilula__neutral.webp"); border-image-slice: 0 26 fill; border-image-width: 0 6px; border-image-repeat: stretch; }
.hp-row.side-a .hp-conds .cond { border-image-source: url("/static/art/pilula__a.webp"); }
.hp-row.side-b .hp-conds .cond { border-image-source: url("/static/art/pilula__b.webp"); }
.hp-row .hp-conds .cond[class*="cond-"] { display: inline-flex; align-items: center; gap: 2px; }
.hp-row .hp-conds .cond[class*="cond-"]::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: center / contain no-repeat; }
.hp-row .hp-conds .cond-prone::before { background-image: url("/static/art/condition__prone.webp"); }
.hp-row .hp-conds .cond-grappled::before { background-image: url("/static/art/condition__grappled.webp"); }
.hp-row .hp-conds .cond-restrained::before { background-image: url("/static/art/condition__restrained.webp"); }
.hp-row .hp-conds .cond-frightened::before { background-image: url("/static/art/condition__frightened.webp"); }
.hp-row .hp-conds .cond-paralyzed::before { background-image: url("/static/art/condition__paralyzed.webp"); }
.hp-row .hp-conds .cond-stunned::before { background-image: url("/static/art/condition__stunned.webp"); }
.hp-row .hp-conds .cond-poisoned::before { background-image: url("/static/art/condition__poisoned.webp"); }
.hp-row .hp-conds .cond-blinded::before { background-image: url("/static/art/condition__blinded.webp"); }
.hp-row .hp-conds .cond-invisible::before { background-image: url("/static/art/condition__invisible.webp"); }
.hp-row .hp-conds .cond-concentration::before { background-image: url("/static/art/condition__concentration.webp"); }
/* Lasting spell chips share the 08-STA-C pill and the condition row. Item Q art
   replaces the glyph as soon as its derived file exists. */
.hp-row .hp-conds .effect-chip { display: inline-flex; align-items: center; gap: 3px; min-width: 0; cursor: help; }
.effect-icon { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; color: var(--bone); line-height: 1; font-size: 16px; }
.effect-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.effect-icon.has-art .effect-art { opacity: 1; }
.effect-icon.has-art .effect-glyph { visibility: hidden; }
.effect-name { white-space: nowrap; }
.effect-count { min-width: 1em; text-align: center; font-family: var(--mono); font-weight: 800; color: var(--bone); }
/* Mirror Image: three translucent echoes behind the face. The corners occupied
   by the side ring, form seal and clone pip stay clear. */
.token .mirror-images { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.token .mirror-copy { position: absolute; width: 78%; height: 78%; border: 1px solid #e6d1ff; border-radius: 50%; background-image: linear-gradient(rgba(173, 128, 244, 0.45), rgba(121, 82, 193, 0.55)), var(--portrait, radial-gradient(circle, #ead9ff, #866ab7)); background-position: center; background-size: cover; box-shadow: 0 0 0 1px rgba(85, 44, 145, 0.8), 0 0 10px 2px rgba(218, 189, 255, 0.9); opacity: 0.72; }
.token.has-mirror-images::before { z-index: 2; }
.token.has-mirror-images > .clone-pip, .token.has-mirror-images > .token-seal, .token.has-mirror-images > .badge-hidden, .token.has-mirror-images > .label-tag, .token.has-mirror-images > .label-base, .token.has-mirror-images > .badge-z, .token.has-mirror-images > .cell-label { z-index: 3; }
.token .mirror-copy-1 { left: -37%; top: 12%; }
.token .mirror-copy-2 { right: -37%; top: 12%; }
.token .mirror-copy-3 { left: 11%; bottom: -35%; }
.token.out .mirror-images { display: none; }
.token.shining-smite:not(.out)::before { filter: drop-shadow(0 0 6px #ffe6a1) drop-shadow(0 0 10px #fff1c8); }
.map.art-off .token.shining-smite:not(.out) { box-shadow: 0 0 0 3px rgba(255, 237, 171, 0.85), 0 0 14px 5px rgba(255, 226, 143, 0.72); }
.token .mirror-shatter, .token .mirror-tremor { position: absolute; inset: -34%; z-index: 0; pointer-events: none; border-radius: 50%; }
.token .mirror-shatter { border: 2px dashed rgba(225, 204, 255, 0.95); background: radial-gradient(circle, rgba(230, 216, 255, 0.55) 0 12%, transparent 45%); animation: mirror-shatter 560ms ease-out forwards; }
.token .mirror-tremor { border: 2px solid rgba(205, 176, 248, 0.75); animation: mirror-tremor 350ms ease-out forwards; }
@keyframes mirror-shatter { to { opacity: 0; transform: scale(1.45) rotate(25deg); filter: blur(5px); } }
@keyframes mirror-tremor { 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } to { opacity: 0; } }
.map.no-anim .token .mirror-shatter, .map.no-anim .token .mirror-tremor { display: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .token .mirror-shatter, .token .mirror-tremor { display: none; animation: none; }
}
/* the Knockout stamp (08-STA-E) in bone-dim over the fallen fighter's token on its card, never red; and on the report */
.hp-row { position: relative; }
.token.out::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; top: -0.55em; right: -0.45em; background: url("/static/art/ko__apagado.webp") center / contain no-repeat; filter: grayscale(1); }
.hp-row.out::after { content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 34px; transform: translateY(-50%) rotate(-12deg); pointer-events: none; background: url("/static/art/ko__nocaute.webp") center / contain no-repeat; }
.hp-row.dead::after { background-image: url("/static/art/ko__morte.webp"); }
.hp-row.transformed::after { width: 40px; height: 40px; transform: translateY(-50%); background: url("/static/art/malicao-lua__48__proposta.webp") center / contain no-repeat; }
.lycanthropy-vortex { position: absolute; z-index: 8; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(194, 162, 215, 0.58) 0 10%, rgba(62, 39, 78, 0.8) 34%, rgba(17, 14, 33, 0.05) 72%); animation: lycanthropy-turn var(--lycanthropy-ms, 560ms) cubic-bezier(.2,.7,.25,1) forwards; }
.lycanthropy-vortex::before { content: ""; position: absolute; inset: 9%; border: 3px solid rgba(235, 218, 247, 0.92); border-left-color: transparent; border-bottom-color: rgba(176, 121, 58, 0.86); border-radius: 50%; box-shadow: 0 0 12px rgba(198, 158, 220, 0.8); }
@keyframes lycanthropy-turn { 0% { opacity: 0; transform: scale(.28) rotate(-65deg); filter: blur(0); } 22% { opacity: 1; } 72% { opacity: .88; transform: scale(1.18) rotate(235deg); filter: blur(1px); } 100% { opacity: 0; transform: scale(1.42) rotate(320deg); filter: blur(4px); } }
.hp-row.transformed { border-color: rgba(182, 147, 210, .38); }
.result-transformations { margin: 8px auto 0; max-width: 780px; }
.result-transformation { margin: 5px 0; padding: 8px 12px; color: #f1e7f7; background: rgba(64, 43, 76, .76); border: 1px solid rgba(182, 147, 210, .65); border-radius: 8px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .lycanthropy-vortex { display: none; animation: none; } }
.map.no-anim .lycanthropy-vortex { display: none; animation: none; }
/* the round ribbon (08-STA-D) behind "ROUND n"; the side ribbons behind SIDE A and SIDE B on the Arena screen */
.round-label { border: 0 solid transparent; border-width: 0 12px; padding: 1px 2px 2px; border-image: url("/static/art/faixa__neutral.webp") 0 54 fill / 0 12px stretch; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
#view-arena .arena-sides .team-head h2 { border: 0 solid transparent; border-width: 0 14px; padding: 2px 4px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); border-image-slice: 0 54 fill; border-image-width: 0 14px; border-image-repeat: stretch; }
#view-arena .arena-sides .team.side-a .team-head h2 { border-image-source: url("/static/art/faixa__a.webp"); }
#view-arena .arena-sides .team.side-b .team-head h2 { border-image-source: url("/static/art/faixa__b.webp"); }
/* the result emblem (08-STA-F) in place of the trophy emoji: a side's trophy (the only gold, victory) or the draw shield */
.trophy.has-emblem { width: 132px; height: 132px; margin: 0 auto; color: transparent; font-size: 1px; background: var(--emblem) center / contain no-repeat; }
.trophy.emblem-win-a { --emblem: url("/static/art/emblema__win-a.webp"); }
.trophy.emblem-win-b { --emblem: url("/static/art/emblema__win-b.webp"); }
.trophy.emblem-draw { --emblem: url("/static/art/emblema__draw.webp"); }
/* The clock of the waiting screen (the owner, 01/10/2026: "uma previsão de contador de tempo enquanto monta as lutas", "um relogio
   bonito e legal"): the mascot in the middle, a ring that fills up to the estimate with twelve ticks, a grain of sand on its leading
   edge, the elapsed time and the estimate under it. --p goes from 0 to 1 (static/app.js, the wait clock). */
.wait-clock { --p: 0; position: relative; width: 168px; height: 168px; margin: 0 auto 6px; display: grid; place-items: center; }
.wait-ring, .wait-hand { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.wait-ring { background: conic-gradient(#f3d48a calc(var(--p) * 360deg), #ffffff24 0); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); mask: radial-gradient(closest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); box-shadow: 0 0 18px #f3d48a26; }
.wait-clock::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from -1.5deg, #d9b778 0 3deg, transparent 3deg 30deg); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); opacity: .7; }
.wait-hand { transform: rotate(calc(var(--p) * 360deg)); }
.wait-hand::after { content: ""; position: absolute; top: -2px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d8, #f3d48a 55%, #b9873a); box-shadow: 0 0 10px #f3d48a; }
.wait-clock.no-estimate .wait-ring, .wait-clock.no-estimate .wait-hand, .wait-clock.no-estimate::before { display: none; }
.wait-clock.no-estimate { width: auto; height: auto; margin-bottom: 0; }
.wait-clock.is-over .wait-ring { animation: wait-pulse 1.2s ease-in-out infinite; }
.wait-time { margin: 2px 0 6px; color: var(--dim); font-variant-numeric: tabular-nums; }
.wait-time b { display: block; color: #f3d48a; font: 700 2rem/1.1 var(--font-display); letter-spacing: .04em; }
@keyframes wait-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .wait-clock.is-over .wait-ring { animation: none; } }
/* The hourglass mascot in the middle of the clock (the owner, 01/10/2026: "Sim, com duas poses (Recomendado)"): calm while the
   forecast holds, on tiptoe once it is past. Where there is a forecast it takes the place of the d20 and of the arena's mascot. */
.resolving .wait-clock:not(.no-estimate) .spinner { width: 118px; height: 118px; background: url("/static/art/arenita__calma.webp") center / contain no-repeat; animation: wait-bob 2.4s ease-in-out infinite; }
.resolving .wait-clock.is-over .spinner { background-image: url("/static/art/arenita__quase-la.webp"); animation-duration: 0.9s; }
@keyframes wait-bob { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .resolving .wait-clock:not(.no-estimate) .spinner { animation: none; } }
/* the loading d20 (08-STA-G) in the resolving overlay, eight frames */
.resolving .spinner { width: 72px; height: 72px; font-size: 0; background: url("/static/art/carregando-d20__strip.webp") 0 0 / 800% 100% no-repeat; animation: strip-8 0.8s steps(8) infinite; }
@media (prefers-reduced-motion: reduce) {
  .map-pop, .map-projectile, .map-ray { display: none; }
  .die-glyph.rolling, .die-glyph.rolling::after { animation: none; }
  .die-glyph.rolling::after { display: none; }
  .resolving .spinner { animation: none; }
}
/* ==== end of group 2 ==== */

/* ---- the page frame (group 3): header band and crest, stone page, footer scene, dividers, modal, parchment, tip ---- */
@keyframes strip-once { from { background-position-x: 0%; } to { background-position-x: 100%; } }
/* the header band (08-CAB-A, B) behind the top bar of today, same height, darkened under the wordmark; the fixed band's
   A-to-B line (08-CAB-E) as its bottom edge; the crest (08-CAB-C) in place of the 🎲 */
.topbar { position: relative; border-bottom-color: transparent; background: linear-gradient(90deg, rgba(17, 14, 33, 0.86) 0, rgba(17, 14, 33, 0.62) 45%, rgba(17, 14, 33, 0.72) 100%), url("/static/art/cabecalho__desktop.webp") center 58% / cover no-repeat, #15112a; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; pointer-events: none; background: url("/static/art/cabecalho__faixa-fixa.webp") center bottom / 100% auto no-repeat; }
.topbar .logo { display: inline-block; width: 36px; height: 36px; color: transparent; font-size: 1px; background: url("/static/art/brasao__escudo.webp") center / contain no-repeat; }
body.fight-mode .topbar .logo { width: 26px; height: 26px; }
.topbar .wordmark { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.topbar .tagline { color: #cdc8e6; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
@media (max-width: 767px) { .topbar { background-image: linear-gradient(90deg, rgba(17, 14, 33, 0.86), rgba(17, 14, 33, 0.66)), url("/static/art/cabecalho__mobile.webp"); background-position: center, center 60%; } }
/* the stone texture (08-FUN-B) under a heavy veil: the page colour of today still dominates; the wizard keeps its plain page */
body { background: linear-gradient(rgba(17, 14, 33, 0.9), rgba(17, 14, 33, 0.9)), url("/static/art/textura-pedra__tile.webp") 0 0 / 256px 256px repeat, var(--page); }
body.wizard-mode { background: var(--page); }
/* the wood texture (08-FUN-C) inside the Home's wood cards, under the same veil as the flat wood of today */
#view-home .home-card { background: linear-gradient(rgba(31, 26, 58, 0.88), rgba(31, 26, 58, 0.88)) padding-box, url("/static/art/textura-madeira__tile.webp") 0 0 / 192px 192px padding-box, var(--wood-center); }
/* the footer scene (08-ROD-A, B): the tavern floor above the line of today; never on the Fight view (hidden there) nor the wizard */
.footer { min-height: 132px; display: flex; align-items: flex-end; justify-content: center; border-top-color: transparent; color: #cdc8e6; text-shadow: 0 1px 3px #000; background: linear-gradient(180deg, var(--page) 0, rgba(17, 14, 33, 0.15) 35%, rgba(17, 14, 33, 0.35) 60%, rgba(17, 14, 33, 0.92) 100%), url("/static/art/rodape__desktop.webp") center 70% / cover no-repeat, var(--page); }
@media (max-width: 720px) { .footer { min-height: 110px; background-image: linear-gradient(180deg, var(--page) 0, rgba(17, 14, 33, 0.15) 35%, rgba(17, 14, 33, 0.35) 60%, rgba(17, 14, 33, 0.92) 100%), url("/static/art/rodape__mobile.webp"); } }
body.wizard-mode .footer { min-height: 0; background: none; border-top-color: var(--border); color: var(--dim); text-shadow: none; }
/* the Home fits the window until "See all" (the owner, 01/10/2026): on a wide screen its painted floor is a strip, not a band */
@media (min-width: 900px) { body.home-mode .footer { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 10px 16px; } }
/* The owner, 16/10/2026: "O roda pé esta diferente quando portugues e ingles... a distribuição e posicionamento das frases precisam estar
   adequadas a pesar de traduzidas devem ocupar os mesmos espaços. Acerte isso." On the wide Home the footer is one fixed grid in both languages:
   the line at the left, the SRD seal and the two links in the middle at fixed widths (the longer word of the two languages), the content line
   at the right. A text that grows in one language wraps inside its own cell, never pushing the others to a second row. */
@media (min-width: 900px) {
  body.home-mode .footer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); }
  body.home-mode .footer > [data-i18n="footer.text"] { justify-self: start; text-align: left; }
  body.home-mode .footer .footer-srd { min-width: 15.5em; }
  body.home-mode .footer .footer-about { min-width: 7.75em; text-align: center; }
  body.home-mode .footer .footer-about[href="#/privacy"] { min-width: 9.5em; }
  body.home-mode .footer .footer-content { justify-self: end; text-align: right; margin: 0; max-width: none; }
}
/* the dividers (08-ROD-C): the rope on the log's round lines, the A/B die under VS. The crossed swords left the Home with its lower
   row (the owner, 05/10/2026: less visual noise); the file stays in the kit. */
.log li.round { border-top: 0; padding-top: 16px; background: url("/static/art/divisor__corda.webp") center top / auto 11px no-repeat; }
#view-arena .versus::after { content: ""; width: 110px; height: 14px; margin-top: 4px; background: url("/static/art/divisor__dado.webp") center / contain no-repeat; }
/* the Home hero. The owner, 05/10/2026: "O simbolo que é um d20 esta atras desse primeiro cartao. Ele deve ajustar sua posição e ficar
   acomodado junto o figter of the week e o selo de garantia do The Rules." The d20 crest (08-CAB-C) is a piece of a row, beside the
   Fighter of the Week, on the right of the banner (a small row in its top right corner under 1024 px); the seal left the banner the same
   day and is the card of The Rules, below. The painted vignette (08-FUN-E) stays. The tournament flag and the torches left the
   page on 01/10/2026; their files stay in the kit. */
.home-hero { position: relative; }
.home-emblems { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.home-crest { display: block; flex: 0 0 auto; width: 150px; height: 104px; background: url("/static/art/brasao__d20.webp") center / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
.home-hero > * { position: relative; z-index: 1; }
.home-hero.has-scene:not(.art-off)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/static/art/vinheta.webp") center / cover no-repeat; mix-blend-mode: multiply; opacity: 0.12; }
/* a narrow window: the two emblems in a row over the card (the card comes first now, so they no longer float over the corner) */
@media (max-width: 1023px) { .home-hero > .home-emblems { order: -1; justify-content: space-between; gap: 8px; } .home-crest { width: 104px; height: 72px; } }
/* the card of The Rules (the owner, 05/10/2026: "Penso em colocar o selo de garantia do The Rules meio junto ou perto do TIP of The Day. Se
   tiver espaço, um novo cartao falando do The Rules com um texto resumido como é feito com o TIP of the day"; and, asked where the seal
   lives, "Cartão da The Rules sob a dica"): the seal on the left and its three lines beside it, the shape of the tip card. */
/* the Tome, the mascot of The Rules (the owner, 05/10/2026: "Queria que o The Rules 5.5e se tornasse também um mascote do jogo"), speaks in
   its card the way Nat speaks in the tip's: the mascot on the left, approving; the seal stays, as a stamp in the corner */
/* A mascot on the page is a button: a click opens its card, a bigger picture of it and who it is (the owner, 06/10/2026: "É possivel
   ao clicar neles explicar quem eles são? [...] Ao clicar no mascote, abre um cartão com outro boa imagem dele que temos, maior, e com
   um resumo falando sobre ele."). kit.js opens the card for anything with data-mascot. */
.btn-mascot { padding: 0; border: 0; border-radius: 12px; background-color: transparent; cursor: pointer; transition: transform 0.12s ease; }
.btn-mascot:hover { transform: scale(1.06); }
.btn-mascot:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn-mascot { transition: none; } .btn-mascot:hover { transform: none; } }
.mascot-card-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 6, 18, 0.78); backdrop-filter: blur(5px); }
.mascot-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 22px; align-items: center; width: min(660px, 100%); max-height: 100%; overflow-y: auto; margin: 0; padding: 24px; border: 2px solid var(--bronze-line); border-radius: 18px; background: linear-gradient(145deg, rgba(91, 66, 38, 0.35), transparent 42%), #211a15; box-shadow: inset 0 0 0 4px rgba(196, 151, 83, 0.1), 0 20px 54px #000d; color: #f5eddd; }
.mascot-card-art { grid-row: 1 / span 4; width: 200px; height: 200px; background: center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(241, 204, 129, 0.36)); }
.mascot-card-art[data-mascot="nat"] { background-image: url("/static/art/rolo__pensando.webp"); }
.mascot-card-art[data-mascot="tome"] { background-image: url("/static/art/tomo__conferindo.webp"); }
.mascot-card-art[data-mascot="sunburn"] { background-image: url("/static/art/sunburn-idle__strip.webp"); background-size: 400% 100%; background-position: 0 0; }
.mascot-card-art[data-mascot="tiny"] { background-image: url("/static/art/rolha-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
.mascot-card-art[data-mascot="sandy"] { background-image: url("/static/art/arenita__calma.webp"); }
.mascot-card-art[data-mascot="flicker"] { background-image: url("/static/art/pisca-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
.mascot-card-art[data-mascot="mistlet"] { background-image: url("/static/art/bruminha-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
.mascot-card-art[data-mascot="wibble"] { background-image: url("/static/art/geleco-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
.mascot-card-art[data-mascot="bones"] { background-image: url("/static/art/ossinho-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
.mascot-card-art[data-mascot="keyring"] { background-image: url("/static/art/chaveiro-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
/* the five of the cute horror (comanda 140; the owner, 09/10/2026: "Aprovo as 15 (Recomendado)"): the picture of each card is a frame of its victory */
.mascot-card-art[data-mascot="inkwell"] { background-image: url("/static/art/tinteiro-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
.mascot-card-art[data-mascot="twine"] { background-image: url("/static/art/cordel-vitoria__strip.webp"); background-size: 400% 100%; background-position: 0 0; }
.mascot-card-art[data-mascot="noggin"] { background-image: url("/static/art/sem-cuca-vitoria__strip.webp"); background-size: 400% 100%; background-position: 0 0; }
.mascot-card-art[data-mascot="patches"] { background-image: url("/static/art/remendo-vitoria__strip.webp"); background-size: 400% 100%; background-position: 0 0; }
.mascot-card-art[data-mascot="fangy"] { background-image: url("/static/art/presinha-vitoria__strip.webp"); background-size: 400% 100%; background-position: 0 0; }
.mascot-card h2 { width: fit-content; max-width: 100%; margin: 0; padding: 5px 14px; border: 1px solid rgba(221, 184, 119, 0.6); border-radius: 5px; background: linear-gradient(180deg, #463321, #2b2119); box-shadow: 0 3px 0 #120e0a; font-size: 1.5rem; overflow-wrap: anywhere; }
.mascot-card-role { width: fit-content; max-width: 100%; margin: 0; padding: 4px 10px; border: 1px solid rgba(227, 183, 106, 0.58); border-radius: 999px; background: #49351e; color: #ffe2a9; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; }
.mascot-card-bio { max-width: 60ch; margin: 4px 0 8px; color: #f5eddd; line-height: 1.55; overflow-wrap: anywhere; }
.mascot-card-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-self: start; align-items: center; }
.mascot-card-actions > :is(a, button) { min-height: 44px; padding-inline: 16px; }
.mascot-card-actions > :last-child { border-color: #d6a850; background: linear-gradient(180deg, #6a4a20, #432d17); color: #fff2d2; box-shadow: inset 0 1px rgba(255, 239, 200, 0.18), 0 3px 0 #160f09; }
.mascot-card-actions > :last-child:hover { filter: brightness(1.12); }
.mascot-card-actions > :is(a, button):focus-visible, .home-mascots-btn:focus-visible, .mascots-page > a:focus-visible { outline: 3px solid #f1d18d; outline-offset: 4px; }
@media (max-width: 560px) { .mascot-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; } .mascot-card-art { grid-row: auto; width: 160px; height: 160px; } .mascot-card-actions { justify-self: center; justify-content: center; } }
/* The page of the mascots (the owner, 08/10/2026: "um botão para entrar na pagina dos mascotes, e entao a lista e a descrição de cada
   um"): every one of them with the picture and the lines of its card. kit.js draws it from the same table as the cards. */
.mascots-page { gap: 22px; padding-top: clamp(22px, 4vw, 44px); padding-bottom: 36px; }
.mascots-page > h1 { margin: 0; color: #ffe4af; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; text-shadow: 0 3px 0 #1b120a, 0 0 24px rgba(221, 165, 83, 0.25); }
.mascots-page > .lead { max-width: 64ch; margin: -8px 0 4px; color: #f1e5d0; font-size: clamp(1.05rem, 1.8vw, 1.22rem); line-height: 1.55; }
.mascot-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; }
@media (min-width: 760px) { .mascot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1240px) { .mascot-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.mascot-entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 10px; min-width: 0; min-height: 320px; margin: 0; padding: 20px 16px 22px; overflow: hidden; border: 2px solid #997344; border-radius: 14px; background: radial-gradient(ellipse at 50% 20%, rgba(175, 126, 66, 0.2), transparent 56%), linear-gradient(145deg, rgba(73, 50, 29, 0.48), transparent 60%), #211a15; box-shadow: inset 0 0 0 4px rgba(201, 159, 92, 0.08), inset 0 -18px 30px rgba(7, 5, 3, 0.22), 0 7px 18px rgba(0, 0, 0, 0.3); color: #f5eddd; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.mascot-entry::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(224, 190, 129, 0.18); border-radius: 9px; pointer-events: none; }
.mascot-entry .mascot-card-art { position: relative; grid-row: auto; width: 152px; height: 152px; margin: 0 0 1px; filter: drop-shadow(0 0 14px rgba(250, 206, 124, 0.38)); transform-origin: 50% 85%; }
.mascot-entry h2 { max-width: 100%; margin: 0; padding: 5px 14px; border: 1px solid rgba(221, 184, 119, 0.58); border-radius: 5px; background: linear-gradient(180deg, #493622, #2e2319); box-shadow: 0 3px 0 #120e0a; color: #fff0cf; font-size: 1.22rem; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.mascot-entry .mascot-card-role { justify-self: center; text-align: center; }
.mascot-entry .mascot-card-bio { width: 100%; margin: 0; color: #f5eddd; line-height: 1.52; text-align: center; overflow-wrap: anywhere; }
.mascot-entry:hover, .mascot-entry:focus-within { transform: translateY(-4px); border-color: #d1a45e; box-shadow: inset 0 0 0 4px rgba(232, 189, 113, 0.14), 0 12px 26px rgba(0, 0, 0, 0.42); }
.mascot-entry:hover .mascot-card-art[data-mascot="tiny"], .mascot-entry:focus-within .mascot-card-art[data-mascot="tiny"], .mascot-entry:hover .mascot-card-art[data-mascot="flicker"], .mascot-entry:focus-within .mascot-card-art[data-mascot="flicker"], .mascot-entry:hover .mascot-card-art[data-mascot="mistlet"], .mascot-entry:focus-within .mascot-card-art[data-mascot="mistlet"], .mascot-entry:hover .mascot-card-art[data-mascot="wibble"], .mascot-entry:focus-within .mascot-card-art[data-mascot="wibble"], .mascot-entry:hover .mascot-card-art[data-mascot="bones"], .mascot-entry:focus-within .mascot-card-art[data-mascot="bones"], .mascot-entry:hover .mascot-card-art[data-mascot="keyring"], .mascot-entry:focus-within .mascot-card-art[data-mascot="keyring"], .mascot-entry:hover .mascot-card-art[data-mascot="inkwell"], .mascot-entry:focus-within .mascot-card-art[data-mascot="inkwell"], .mascot-entry:hover .mascot-card-art[data-mascot="noggin"], .mascot-entry:focus-within .mascot-card-art[data-mascot="noggin"], .mascot-entry:hover .mascot-card-art[data-mascot="patches"], .mascot-entry:focus-within .mascot-card-art[data-mascot="patches"], .mascot-entry:hover .mascot-card-art[data-mascot="sunburn"], .mascot-entry:focus-within .mascot-card-art[data-mascot="sunburn"] { animation: mascot-strip-dance 700ms steps(4, jump-none) infinite; }
.mascot-entry:hover .mascot-card-art[data-mascot="nat"], .mascot-entry:focus-within .mascot-card-art[data-mascot="nat"], .mascot-entry:hover .mascot-card-art[data-mascot="tome"], .mascot-entry:focus-within .mascot-card-art[data-mascot="tome"], .mascot-entry:hover .mascot-card-art[data-mascot="sandy"], .mascot-entry:focus-within .mascot-card-art[data-mascot="sandy"] { animation: mascot-gentle-bob 900ms ease-in-out infinite alternate; }
/* four frames side by side: jump-none stops on each one whole (0, 1/3, 2/3 and 1 of the way); with steps(4, end) the dance stopped between two frames */
@keyframes mascot-strip-dance { from { background-position: 0 0; } to { background-position: 100% 0; } }
/* Twine caught moving and Fangy's sunglasses (comanda 140; the owner, 09/10/2026: "Rodízio com os de hoje (Recomendado)"): on the page of
   the mascots these two play their own gesture once, and hold its last frame, while the mouse is on them. The strip of the gesture is
   fetched with the page (the empty ::after), so the first hover does not blink. */
.mascot-entry .mascot-card-art[data-mascot="twine"]::after, .mascot-entry .mascot-card-art[data-mascot="fangy"]::after { content: ""; position: absolute; width: 0; height: 0; overflow: hidden; }
.mascot-entry .mascot-card-art[data-mascot="twine"]::after { background-image: url("/static/art/cordel-flagrado__strip.webp"); }
.mascot-entry .mascot-card-art[data-mascot="fangy"]::after { background-image: url("/static/art/presinha-piada-oculos__strip.webp"); }
.mascot-entry:hover .mascot-card-art[data-mascot="twine"], .mascot-entry:focus-within .mascot-card-art[data-mascot="twine"] { background-image: url("/static/art/cordel-flagrado__strip.webp"); animation: strip-once 1.8s steps(4, jump-none) forwards; }
.mascot-entry:hover .mascot-card-art[data-mascot="fangy"], .mascot-entry:focus-within .mascot-card-art[data-mascot="fangy"] { background-image: url("/static/art/presinha-piada-oculos__strip.webp"); animation: strip-once 2.2s steps(4, jump-none) forwards; }
@keyframes mascot-gentle-bob { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(-5px); } }
.mascot-group-title { width: fit-content; margin: 26px auto 0; padding: 7px 20px; border: 1px dashed #b08a58; border-radius: 999px; background: rgba(38, 29, 21, 0.84); box-shadow: 0 0 22px rgba(204, 160, 91, 0.16); color: #f4dcae; font-size: 1.15rem; letter-spacing: 0.05em; text-align: center; }
.mascots-page > a.btn-small { justify-self: center; min-height: 44px; margin-top: 8px; padding: 10px 24px; }
.home-mascots-btn { position: relative; align-self: stretch; min-height: 66px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border: 1px solid rgba(178, 141, 86, 0.76); background: linear-gradient(180deg, rgba(67, 50, 31, 0.74), rgba(31, 24, 19, 0.94)); box-shadow: inset 0 1px rgba(250, 223, 173, 0.08), 0 3px 0 rgba(13, 10, 8, 0.7); color: #f1e4cb; text-align: center; }
.home-mascots-btn > span[aria-hidden="true"] { display: none; }
.home-mascots-btn::before { content: ""; display: block; width: 166px; max-width: 100%; height: 23px; margin: 0 auto; background-image: url("/static/art/rolha__icone.webp"), url("/static/art/pisca__icone.webp"), url("/static/art/bruminha__icone.webp"), url("/static/art/geleco__icone.webp"), url("/static/art/sunburn__icone.webp"), url("/static/art/tomo__icone.webp"); background-repeat: no-repeat; background-position: 0 center, 20% center, 40% center, 60% center, 80% center, 100% center; background-size: 22px 22px; }
.home-mascots-btn:hover { border-color: #d2aa6a; background: linear-gradient(180deg, rgba(88, 63, 35, 0.92), rgba(39, 29, 21, 0.98)); color: #fff0cf; }
.home-mascots-btn:focus-visible { outline: 3px solid #f1d18d; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .mascot-entry, .mascot-entry .mascot-card-art { transition: none; animation: none !important; transform: none !important; } }
@media (max-width: 440px) { .mascots-page { gap: 18px; padding-inline: 14px; } .mascot-list { gap: 14px; } .mascot-entry { min-height: 0; padding: 18px 16px 20px; } .mascot-entry .mascot-card-art { width: 148px; height: 148px; } }
/* the Tome bigger and readable (the owner, 06/10/2026: "A imagem do Tome esta borrada e n da para entender o que é ele"): the
   picture is now cut tight around the figure (it filled only the middle of the square), stands at 104 px and wears a faint bone
   halo, so the dark cover of the book does not sink into the dark panel */
.home-rules { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.home-rules > .btn-mascot { grid-row: 1 / span 4; width: 104px; height: 104px; background: url("/static/art/tomo__aprovado.webp") center / contain no-repeat; filter: drop-shadow(0 0 5px rgba(241, 237, 255, 0.3)); }
.home-rules::after { content: ""; position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; background: url("/static/art/selo__the-rules.webp") center / contain no-repeat; }
.home-rules > h2 { margin: 0 0 4px; padding-right: 46px; }
/* the Tome listens in the panel of the collaboration and thanks once it is sent (the class comes from experience.js) */
.fight-feedback { position: relative; }
.fight-feedback::after { content: ""; position: absolute; top: 8px; right: 12px; width: 84px; height: 84px; pointer-events: none; background: url("/static/art/tomo__ouvindo.webp") center / contain no-repeat; }
.fight-feedback.sent::after { background-image: url("/static/art/tomo__obrigado.webp"); }
.fight-feedback > h2, .fight-feedback > h2 + p { padding-right: 100px; }
@media (max-width: 520px) { .fight-feedback::after { width: 56px; height: 56px; } .fight-feedback > h2, .fight-feedback > h2 + p { padding-right: 68px; } }
.home-rules > p { margin: 0; font-size: 0.9rem; }
.home-rules > small { display: block; margin-top: 4px; color: var(--dim); }
/* the owner, 11/10/2026: one more line in the card, "your fights help"; a little apart from the line above it */
.home-rules > .home-rules-help { margin-top: 3px; }
@media (max-width: 720px) { .home-crest { width: 78px; height: 54px; } .home-quick-group { grid-template-columns: minmax(0, 1fr); } #view-home .home-fight-grid > .btn { padding: 4px 16px; font-size: 0.86rem; } .home-progress-icon { width: 20px; height: 20px; } }
#home-hero.has-scene:not(.art-off) { background-image: linear-gradient(180deg, rgba(12, 10, 24, 0.18) 0%, rgba(12, 10, 24, 0.42) 35%, rgba(12, 10, 24, 0.88) 100%), var(--scene-desktop); background-size: cover; background-position: center; }
#home-hero.has-scene:not(.art-off) .home-hero-text > :is(.home-title, .home-lead, .home-audio-hint) { padding: 1px 8px; border-radius: 4px; background: rgba(12, 10, 24, 0.88); }
/* the Home's banner says it already: the top bar keeps the phrase on the other screens */
body.home-mode .topbar .tagline { visibility: hidden; }
@media (max-width: 720px) { #home-hero.has-scene:not(.art-off) { background-image: linear-gradient(180deg, rgba(12, 10, 24, 0.18) 0%, rgba(12, 10, 24, 0.42) 35%, rgba(12, 10, 24, 0.88) 100%), var(--scene-mobile); } }
/* the modal frame (08-PAI-F) around the resolving box, on the night sky (08-FUN-D) */
.resolving { background: linear-gradient(rgba(11, 9, 22, 0.7), rgba(11, 9, 22, 0.88)), url("/static/art/ceu-noite.webp") center / cover no-repeat; }
.resolving-box { border: 26px solid transparent; border-image: url("/static/art/moldura-modal__9slice.webp") 59 fill / 26px stretch; background: transparent; padding: 6px 12px; }
/* the parchment frame (08-PAI-C) and texture (08-FUN-A) on the report's recap: dark ink on light paper */
.panel.panel-art-parchment { border: 22px solid transparent; border-radius: 0; border-image: url("/static/art/painel-pergaminho__9slice.webp") 65 / 22px stretch; background: url("/static/art/textura-pergaminho__tile.webp") 0 0 / 256px 256px padding-box, #e9d8b0; color: #1a1632; padding: 4px 10px; }
.panel.panel-art-parchment h2 { color: #3a2410; }
.panel.panel-art-parchment .dim { color: #4a3c2a; }
.panel.panel-art-parchment .voice-writing { color: #4b2e6b; }
.panel.panel-art-parchment .voice-list li.sub { color: #4a3c2a; }
/* the tip of the day: the pointing Rolo (08-STA-K) and the tip bubble (08-PAI-E) with its left point; the same size as the Tome under
   it (the owner, 06/10/2026: "O mascote que é o dado pode ficar no mesmo tamanho do mascote Tome abaixo? Para ficar alinhadas as imagens.") */
.home-tip { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.home-tip > .btn-mascot { grid-row: 1 / span 2; width: 104px; height: 104px; background: url("/static/art/rolo__apontando.webp") center / contain no-repeat; }
.home-tip > h2 { margin-bottom: 4px; }
#home-tip { position: relative; margin-left: 8px; border: 14px solid transparent; border-image: url("/static/art/balao-dica__9slice.webp") 42 fill / 14px stretch; padding: 0 2px; color: var(--text); }
#home-tip::before { content: ""; position: absolute; left: -24px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: url("/static/art/balao__ponta-esquerda.webp") center / contain no-repeat; }
/* ==== end of group 3 ==== */

/* ---- mascots (group 4): one per place, never over a token, a card or the log; one frame with reduced motion ---- */
/* Home: the training dummy (08-STA-H) when there are no fights yet; the confused Rolo (08-STA-J) on an error, Pisca's
   404 (08-MAS-PIS-C) when the fight is gone; the goblin lost in the maze (08-STA-I) for an address not on the map;
   the icons of Pisca and Rolha (08-MAS-PIS-E, RLH-G) on the "fight gone" and "continue your setup" notices */
#home-recent-empty:not([hidden])::before { content: ""; display: block; width: 150px; height: 125px; margin: 0 auto 6px; background: url("/static/art/vazio__boneco.webp") center / contain no-repeat; }
.home-error::before { content: ""; flex: 0 0 auto; width: 56px; height: 56px; background: url("/static/art/rolo__confuso.webp") center / contain no-repeat; }
.home-error.is-404::before { width: 120px; height: 120px; background: url("/static/art/pisca-erro-404__strip.webp") 0 0 / 400% 100% no-repeat; animation: strip-once 2s steps(4, jump-none) forwards; }
.home-error.is-404.owner-bruminha::before { background-image: url("/static/art/bruminha-erro-404__strip.webp"); }
.home-error.is-404.owner-geleco::before { background-image: url("/static/art/geleco-erro-404__strip.webp"); }
.home-error.is-404.owner-tinteiro::before { background-image: url("/static/art/tinteiro-erro-404__strip.webp"); }
.home-error-code, .home-error-mascot-text { display: none; }
.home-error.is-404 .home-error-code { display: inline; font: 800 1.7rem var(--font-display); }
.home-error.is-404 .home-error-mascot-text { display: block; flex-basis: 100%; margin: 0; }
#home-recent-note:not(:empty)::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 6px; vertical-align: -6px; background: url("/static/art/pisca__icone.webp") center / contain no-repeat; }
.home-lost { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 14px; row-gap: 4px; align-items: center; margin: 12px 0 0; }
.home-lost::before { content: ""; grid-row: 1 / span 4; width: min(100%, 160px); aspect-ratio: 1; background: url("/static/art/erro-404.webp") center / contain no-repeat; }
.home-lost.owner-pisca::before { background: url("/static/art/pisca-erro-404__strip.webp") 0 0 / 400% 100% no-repeat; animation: strip-once 2s steps(4, jump-none) forwards; }
.home-lost.owner-bruminha::before { background-image: url("/static/art/bruminha-erro-404__strip.webp"); }
.home-lost.owner-geleco::before { background-image: url("/static/art/geleco-erro-404__strip.webp"); }
.home-lost.owner-bruminha::before, .home-lost.owner-geleco::before { background-position: 0 0; background-size: 400% 100%; background-repeat: no-repeat; animation: strip-once 2s steps(4, jump-none) forwards; }
.home-lost-code { font: 800 1.7rem var(--font-display); }
.home-lost p { margin: 0; }
.home-lost-title { font-weight: 700; }
.home-lost-back { grid-column: 2; justify-self: start; min-width: 44px; min-height: 44px; margin-top: 8px; }
.home-lost-back:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
.home-lost.owner-bruminha .home-lost-caption::before, .home-error.is-404.owner-bruminha .home-error-mascot-text::before,
.home-lost.owner-geleco .home-lost-caption::before, .home-error.is-404.owner-geleco .home-error-mascot-text::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 5px; vertical-align: -5px; background: url("/static/art/bruminha__icone.webp") center / contain no-repeat; }
.home-lost.owner-geleco .home-lost-caption::before, .home-error.is-404.owner-geleco .home-error-mascot-text::before { background-image: url("/static/art/geleco__icone.webp"); }
/* Inkwell at the wrong address (67-TIN-ERR; the owner, 09/10/2026: "Rodízio com os de hoje (Recomendado)") */
.home-lost.owner-tinteiro::before { background: url("/static/art/tinteiro-erro-404__strip.webp") 0 0 / 400% 100% no-repeat; animation: strip-once 2s steps(4, jump-none) forwards; }
.home-lost.owner-tinteiro .home-lost-caption::before, .home-error.is-404.owner-tinteiro .home-error-mascot-text::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 5px; vertical-align: -5px; background: url("/static/art/tinteiro__icone.webp") center / contain no-repeat; }
/* the sleeping Rolo (08-STA-J) when no fighter matches the filters */
.r-empty::before { content: ""; display: block; width: 72px; height: 72px; margin: 0 auto 4px; background: url("/static/art/rolo__dormindo.webp") center / contain no-repeat; }
/* the Arena preview still being written: the thinking Rolo (08-STA-K) */
#preview-writing:not([hidden])::before { content: ""; display: inline-block; width: 30px; height: 30px; margin-right: 6px; vertical-align: middle; background: url("/static/art/rolo__pensando.webp") center / contain no-repeat; }
/* Sunburn's icon (08-MAS-SUN-L) on a Critical Hit line of the log */
.log li.crit::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background: url("/static/art/sunburn__icone.webp") center / contain no-repeat; }
/* Series: Sunburn's pulse (08-MAS-SUN-K) while the fights run, accept (SUN-J) when ready, refuse (SUN-J) on an error;
   the empty shelf (08-STA-H) when no combo was used */
#series-progress-box:not([hidden])::before { content: ""; float: left; width: 64px; height: 64px; margin: -4px 10px 0 0; background: url("/static/art/sunburn-pulso__strip.webp") 0 0 / 600% 100% no-repeat; animation: strip-6 1.2s steps(6) infinite; }
.series-cheer { float: right; width: 60px; height: 60px; margin: -6px 0 0 8px; background: url("/static/art/sunburn-aceita__strip.webp") 0 0 / 200% 100% no-repeat; animation: strip-once 0.4s steps(2, jump-none) 0.2s forwards; }
#series-error:not([hidden])::before { content: ""; display: inline-block; width: 36px; height: 36px; margin-right: 8px; vertical-align: middle; background: url("/static/art/sunburn-recusa__strip.webp") 0 0 / 200% 100% no-repeat; animation: strip-once 0.4s steps(2, jump-none) forwards; }
td.empty-shelf::before { content: ""; display: block; width: 110px; height: 92px; margin: 4px 0; background: url("/static/art/vazio__prateleira.webp") left center / contain no-repeat; }
/* the loading mascot: the d20 by default (group 2); Rolha in both Taverns (08-MAS-RLH-B; the Maze House is the Tavern since 27/09/2026) */
.resolving.owner-rolha .spinner { width: 112px; height: 112px; background-image: url("/static/art/rolha-carregando__strip.webp"); background-size: 400% 100%; animation: strip-4 1.6s steps(4) infinite; }
.resolving.owner-pisca .spinner { width: 104px; height: 104px; background-image: url("/static/art/pisca-carregando__strip.webp"); background-size: 400% 100%; animation: strip-4 1.6s steps(4) infinite; }
.resolving.owner-geleco .spinner { width: 96px; height: 96px; background-image: url("/static/art/geleco-carregando__strip.webp"); background-size: 600% 100%; animation: strip-6 1.2s steps(6) infinite; }
.resolving.owner-ossinho .spinner { width: 96px; height: 96px; background-image: url("/static/art/ossinho-carregando__strip.webp"); background-size: 600% 100%; animation: strip-6 1.2s steps(6) infinite; }
/* Patches (67-REM-CAR): the five patches of his belly fill up one by one, and he is never in a hurry */
.resolving.owner-remendo .spinner { width: 96px; height: 96px; background-image: url("/static/art/remendo-carregando__strip.webp"); background-size: 600% 100%; animation: strip-6 2.4s steps(6) infinite; }
/* Bruminha's three pieces cover only the resolving overlay and part to reveal the finished view. */
.resolving-curtain { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.resolving.is-closing .resolving-curtain { display: block; }
.resolving.is-closing { background: transparent; }
.resolving.is-closing .resolving-box { visibility: hidden; }
.resolving-curtain .mist-left, .resolving-curtain .mist-right { position: absolute; top: 0; bottom: 0; width: 50%; background-size: 100% 100%; background-repeat: no-repeat; }
.resolving-curtain .mist-left { left: 0; background-image: url("/static/art/bruminha-cortina__esquerda.webp"); animation: mist-left-out 0.65s ease-in forwards; }
.resolving-curtain .mist-right { right: 0; background-image: url("/static/art/bruminha-cortina__direita.webp"); animation: mist-right-out 0.65s ease-in forwards; }
.resolving-curtain .mist-mid { position: absolute; top: 50%; left: 50%; width: 96px; height: 128px; background: url("/static/art/bruminha-cortina__meio.webp") center / contain no-repeat; animation: mist-mid-out 0.65s ease-in forwards; }
@keyframes mist-left-out { to { transform: translateX(-102%); } }
@keyframes mist-right-out { to { transform: translateX(102%); } }
@keyframes mist-mid-out { from { transform: translate(-50%, -50%); } to { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } }
/* the moment overlay of the Fight view (static/kit.js): the quiet corner of the board, a sprite and one HTML caption */
.moment { --m: clamp(64px, calc(var(--map-height, 300px) * 0.28), 116px); position: absolute; z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: moment-in 0.18s ease-out; }
.moment.at-top-left { left: calc(var(--map-left) + 6px); top: calc(var(--map-top) + 6px); }
.moment.at-top-right { left: calc(var(--map-left) + var(--map-width) - 6px); top: calc(var(--map-top) + 6px); transform: translateX(-100%); }
.moment.at-bottom-left { left: calc(var(--map-left) + 6px); top: calc(var(--map-top) + var(--map-height) - 6px); transform: translateY(-100%); }
.moment.at-bottom-right { left: calc(var(--map-left) + var(--map-width) - 6px); top: calc(var(--map-top) + var(--map-height) - 6px); transform: translate(-100%, -100%); }
@keyframes moment-in { from { opacity: 0; } to { opacity: 1; } }
.moment-sprite { position: relative; width: var(--m); height: var(--m); background: var(--strip) 0 0 / 400% 100% no-repeat; animation: strip-once var(--play, 0.7s) steps(4, jump-none) forwards; }
.moment-crit .moment-sprite { --strip: url("/static/art/sunburn-critico__strip.webp"); --play: 0.7s; }
.moment-nat1 .moment-sprite { --strip: url("/static/art/sunburn-nat1__strip.webp"); --play: 1s; }
.moment-nat1.owner-ossinho .moment-sprite { --strip: url("/static/art/ossinho-nat1__strip.webp"); }
.moment-knockout.owner-sunburn .moment-sprite { --strip: url("/static/art/sunburn-nocaute__strip.webp"); animation: strip-4 1.2s steps(4) infinite; }
.moment-knockout.owner-rolha .moment-sprite { --strip: url("/static/art/rolha-nocaute__strip.webp"); --play: 1.6s; }
.moment-knockout.owner-pisca .moment-sprite { --strip: url("/static/art/pisca-nocaute__strip.webp"); --play: 1.4s; }
.moment-knockout.owner-geleco .moment-sprite { --strip: url("/static/art/geleco-nocaute__strip.webp"); --play: 1.6s; }
.moment-knockout.owner-ossinho .moment-sprite { --strip: url("/static/art/ossinho-nocaute__strip.webp"); --play: 1.6s; }
.moment-knockout.owner-sem-cuca .moment-sprite { --strip: url("/static/art/sem-cuca-nocaute__strip.webp"); --play: 1.6s; }
.moment-token { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); color: #fff; font-weight: 800; font-size: calc(var(--m) * 0.15); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); background: var(--side-a); }
.moment-token.side-b { background: var(--side-b); }
.moment-caption { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: rgba(17, 14, 33, 0.9); color: var(--text); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.moment-icon { width: 14px; height: 14px; background: url("/static/art/sunburn__icone.webp") center / contain no-repeat; }

/* Deferred voice art: the load probe in app.js keeps the original UI if a file is absent. (The trophies of the series left the page
   on 05/10/2026, the owner: "Só as barras (Recomendado)"; their art stays in the kit.) */
.has-voice-pen .voice-writing:not([hidden])::before,
.has-voice-pen #preview-writing:not([hidden])::before { content: ""; display: inline-block; width: 36px; height: 24px; margin-right: 5px; vertical-align: middle; background: url("/static/art/pena-escrevendo__strip.webp") 0 0 / 600% 100% no-repeat; animation: pen-writing 1.2s steps(6) infinite; }
@keyframes pen-writing { to { background-position-x: -216px; } }
.has-voice-frame .prose.voice-pending-frame,
.has-voice-frame .log li.gm.voice-pending-frame { border: 14px solid transparent; border-image: url("/static/art/moldura-pendente__9slice.webp") 58 / 14px stretch; border-radius: 0; background: rgba(27, 22, 34, 0.5); padding: 3px 8px; }
.has-voice-frame .log li.gm.voice-pending-frame { margin-left: 12px; }
@media (prefers-reduced-motion: reduce) {
  .has-voice-pen .voice-writing:not([hidden])::before,
  .has-voice-pen #preview-writing:not([hidden])::before { animation: none; background-position: 0 0; }
}
.moment.owner-rolha .moment-icon { background-image: url("/static/art/rolha__icone.webp"); }
.moment.owner-pisca .moment-icon { background-image: url("/static/art/pisca__icone.webp"); }
.moment.owner-geleco .moment-icon { background-image: url("/static/art/geleco__icone.webp"); }
.moment.owner-ossinho .moment-icon { display: none; }
.moment.owner-sem-cuca .moment-icon { background-image: url("/static/art/sem-cuca__icone.webp"); }
/* the Result: Sunburn's victory (08-MAS-SUN-F; Rolha's, RLH-D, in the Tavern) beside the emblem, Sunburn idle (SUN-B) on a draw */
.result-head { position: relative; }
.result-mascot { position: absolute; top: 6px; left: calc(50% + 72px); width: 120px; height: 120px; background: var(--strip) 0 0 / 400% 100% no-repeat; animation: strip-once 1.2s steps(4, jump-none) forwards; }
.result-mascot.is-win { --strip: url("/static/art/sunburn-vitoria__strip.webp"); }
.result-mascot.is-win.owner-rolha { --strip: url("/static/art/rolha-vitoria__strip.webp"); animation-duration: 1.6s; }
/* the victory of every mascot with an approved sheet (comanda 115, 56-VIT-A to H; the owner, 06/10/2026: "V01 em todos (Recomendado)"):
   kit.js draws one per fight */
.result-mascot.is-win.owner-nat { --strip: url("/static/art/nat-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-tomo { --strip: url("/static/art/tomo-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-arenita { --strip: url("/static/art/arenita-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-pisca { --strip: url("/static/art/pisca-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-bruminha { --strip: url("/static/art/bruminha-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-geleco { --strip: url("/static/art/geleco-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-ossinho { --strip: url("/static/art/ossinho-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-chaveiro { --strip: url("/static/art/chaveiro-vitoria__strip.webp"); animation-duration: 1.6s; }
/* and the five of the cute horror (comanda 140, 67-*-VIT) */
.result-mascot.is-win.owner-tinteiro { --strip: url("/static/art/tinteiro-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-cordel { --strip: url("/static/art/cordel-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-sem-cuca { --strip: url("/static/art/sem-cuca-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-remendo { --strip: url("/static/art/remendo-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-win.owner-presinha { --strip: url("/static/art/presinha-vitoria__strip.webp"); animation-duration: 1.6s; }
.result-mascot.is-draw { --strip: url("/static/art/sunburn-idle__strip.webp"); animation: strip-4 1.6s steps(4) 1; }
@media (max-width: 520px) { .result-mascot { left: calc(50% + 58px); width: 84px; height: 84px; } }
@media (prefers-reduced-motion: reduce) {
  .home-error.is-404::before, .home-lost::before, #series-progress-box:not([hidden])::before, .series-cheer, #series-error:not([hidden])::before, .resolving.owner-rolha .spinner, .resolving.owner-pisca .spinner, .resolving.owner-geleco .spinner, .resolving.owner-ossinho .spinner, .resolving.owner-remendo .spinner, .resolving-curtain .mist-left, .resolving-curtain .mist-mid, .resolving-curtain .mist-right, .moment, .moment-sprite, .moment-knockout.owner-sunburn .moment-sprite, .result-mascot, .result-mascot.is-draw { animation: none; }
  .resolving.owner-ossinho .spinner { background-position-x: 100%; }
  .resolving.owner-remendo .spinner { background-position-x: 100%; }
  .resolving-curtain .mist-mid { transform: translate(-50%, -50%); }
  .moment-knockout.owner-rolha .moment-sprite, .moment-knockout.owner-pisca .moment-sprite, .moment-knockout.owner-sem-cuca .moment-sprite, .result-mascot.is-win { background-position-x: 100%; }
}
/* ==== end of group 4 ==== */

/* ---- the second batch of approved art (group 5, 16/09/2026; docs/WEB.md, "Arte da interface"): the glyphs of the replay,
   sound, Home, wizard, Series, Montar and the arenas that change; the seals, the Found reveal, the last position, the clone
   pip, the lethal edge of the carts and the chip frames. The label always stays HTML; a missing file leaves the text ---- */
/* a glyph in front of a label (app.js glyphLabel, data-glyph): a bone mask in the text colour */
.gl { display: inline-block; flex: 0 0 auto; width: 1.1em; height: 1.1em; margin-right: 0.35em; vertical-align: -0.18em; background-color: currentColor; -webkit-mask: var(--gl) center / contain no-repeat; mask: var(--gl) center / contain no-repeat; }
.gl:last-child { margin-right: 0; }
/* a glyph followed by words (glyphLabel): the text node is not a child for :last-child, so the gap comes back by class */
.gl.gl-lead { margin-right: 0.4em; }
.gl-reproducao-proximo-turno { --gl: url("/static/art/reproducao__proximo-turno.webp"); }
.gl-reproducao-speed-1 { --gl: url("/static/art/reproducao__speed-1.webp"); }
.gl-reproducao-speed-2 { --gl: url("/static/art/reproducao__speed-2.webp"); }
.gl-reproducao-speed-3 { --gl: url("/static/art/reproducao__speed-3.webp"); }
.gl-reproducao-speed-4 { --gl: url("/static/art/reproducao__speed-4.webp"); }
.gl-reproducao-speed-5 { --gl: url("/static/art/reproducao__speed-5.webp"); }
.gl-reproducao-encerrar-combate { --gl: url("/static/art/reproducao__encerrar-combate.webp"); }
.gl-reproducao-log-mais-novo { --gl: url("/static/art/reproducao__log-mais-novo.webp"); }
.gl-som-ligado { --gl: url("/static/art/som__ligado.webp"); }
.gl-som-parcial { --gl: url("/static/art/som__parcial.webp"); }
.gl-som-mudo { --gl: url("/static/art/som__mudo.webp"); }
.gl-som-musica { --gl: url("/static/art/som__musica.webp"); }
.gl-som-musica-off { --gl: url("/static/art/som__musica-off.webp"); }
.gl-som-efeitos { --gl: url("/static/art/som__efeitos.webp"); }
.gl-som-efeitos-off { --gl: url("/static/art/som__efeitos-off.webp"); }
.gl-som-toque { --gl: url("/static/art/som__toque.webp"); }
.gl-home-nova-luta { --gl: url("/static/art/home__nova-luta.webp"); }
.gl-home-luta-rapida { --gl: url("/static/art/home__luta-rapida.webp"); }
.gl-home-continuar { --gl: url("/static/art/home__continuar.webp"); }
.gl-home-comecar-do-zero { --gl: url("/static/art/home__comecar-do-zero.webp"); }
.gl-home-ultimas-lutas { --gl: url("/static/art/home__ultimas-lutas.webp"); }
.gl-home-revanche { --gl: url("/static/art/home__revanche.webp"); }
.gl-home-assistir-este { --gl: url("/static/art/home__assistir-este.webp"); }
.gl-home-sortear-de-novo { --gl: url("/static/art/home__sortear-de-novo.webp"); }
.gl-etapa-lado-a { --gl: url("/static/art/etapa__lado-a.webp"); }
.gl-etapa-lado-b { --gl: url("/static/art/etapa__lado-b.webp"); }
.gl-etapa-arena { --gl: url("/static/art/etapa__arena.webp"); }
.gl-etapa-regras { --gl: url("/static/art/etapa__regras.webp"); }
.gl-etapa-revisao { --gl: url("/static/art/etapa__revisao.webp"); }
.gl-etapa-comecar { --gl: url("/static/art/etapa__comecar.webp"); }
.gl-etapa-feita { --gl: url("/static/art/etapa__feita.webp"); }
.gl-etapa-atual { --gl: url("/static/art/etapa__atual.webp"); }
.gl-etapa-bloqueada { --gl: url("/static/art/etapa__bloqueada.webp"); }
.gl-serie-serie { --gl: url("/static/art/serie__serie.webp"); }
.gl-serie-tamanho-10 { --gl: url("/static/art/serie__tamanho-10.webp"); }
.gl-serie-tamanho-25 { --gl: url("/static/art/serie__tamanho-25.webp"); }
.gl-serie-tamanho-50 { --gl: url("/static/art/serie__tamanho-50.webp"); }
.gl-serie-tamanho-100 { --gl: url("/static/art/serie__tamanho-100.webp"); }
.gl-serie-trocar-lados { --gl: url("/static/art/serie__trocar-lados.webp"); }
.gl-serie-na-fila { --gl: url("/static/art/serie__na-fila.webp"); }
.gl-serie-intervalo { --gl: url("/static/art/serie__intervalo.webp"); }
.gl-serie-lista-lutas { --gl: url("/static/art/serie__lista-lutas.webp"); }
.gl-mecanica-utilize { --gl: url("/static/art/mecanica__utilize.webp"); }
.gl-mecanica-leme { --gl: url("/static/art/mecanica__leme.webp"); }
.gl-mecanica-corte-poste { --gl: url("/static/art/mecanica__corte-poste.webp"); }
.gl-mecanica-escada-corda { --gl: url("/static/art/mecanica__escada-corda.webp"); }
.gl-mecanica-arena-muda { --gl: url("/static/art/mecanica__arena-muda.webp"); }
.gl-mecanica-navios-perto { --gl: url("/static/art/mecanica__navios-perto.webp"); }
.gl-mecanica-navios-longe { --gl: url("/static/art/mecanica__navios-longe.webp"); }
.gl-mecanica-carrinhos-rearranjo { --gl: url("/static/art/mecanica__carrinhos-rearranjo.webp"); }
.gl-mecanica-ponte-inteira { --gl: url("/static/art/mecanica__ponte-inteira.webp"); }
.gl-mecanica-ponte-cortada { --gl: url("/static/art/mecanica__ponte-cortada.webp"); }
.gl-mecanica-ficou-para-tras { --gl: url("/static/art/mecanica__ficou-para-tras.webp"); }
.gl-mecanica-agarrar-borda { --gl: url("/static/art/mecanica__agarrar-borda.webp"); }
.gl-mecanica-na-borda-prone { --gl: url("/static/art/mecanica__na-borda-prone.webp"); }
.gl-mecanica-borda-letal { --gl: url("/static/art/mecanica__borda-letal.webp"); }
.gl-mecanica-queda-agua { --gl: url("/static/art/mecanica__queda-agua.webp"); }
.gl-mecanica-janela-espremer { --gl: url("/static/art/mecanica__janela-espremer.webp"); }
.gl-mecanica-camada-terreo { --gl: url("/static/art/mecanica__camada-terreo.webp"); }
.gl-mecanica-decisao { --gl: url("/static/art/mecanica__decisao.webp"); }
.gl-grupo-barbarian { --gl: url("/static/art/grupo__barbarian.webp"); }
.gl-grupo-bard { --gl: url("/static/art/grupo__bard.webp"); }
.gl-grupo-cleric { --gl: url("/static/art/grupo__cleric.webp"); }
.gl-grupo-druid { --gl: url("/static/art/grupo__druid.webp"); }
.gl-grupo-fighter { --gl: url("/static/art/grupo__fighter.webp"); }
.gl-grupo-monk { --gl: url("/static/art/grupo__monk.webp"); }
.gl-grupo-paladin { --gl: url("/static/art/grupo__paladin.webp"); }
.gl-grupo-ranger { --gl: url("/static/art/grupo__ranger.webp"); }
.gl-grupo-rogue { --gl: url("/static/art/grupo__rogue.webp"); }
.gl-grupo-sorcerer { --gl: url("/static/art/grupo__sorcerer.webp"); }
.gl-grupo-warlock { --gl: url("/static/art/grupo__warlock.webp"); }
.gl-grupo-wizard { --gl: url("/static/art/grupo__wizard.webp"); }
.gl-grupo-npcs { --gl: url("/static/art/grupo__npcs.webp"); }
.gl-grupo-goblins-kobolds-gnolls { --gl: url("/static/art/grupo__goblins-kobolds-gnolls.webp"); }
.gl-grupo-beasts { --gl: url("/static/art/grupo__beasts.webp"); }
.gl-grupo-monstrosities { --gl: url("/static/art/grupo__monstrosities.webp"); }
.gl-grupo-dragons { --gl: url("/static/art/grupo__dragons.webp"); }
.gl-grupo-giants { --gl: url("/static/art/grupo__giants.webp"); }
.gl-grupo-undead { --gl: url("/static/art/grupo__undead.webp"); }
.gl-grupo-fiends { --gl: url("/static/art/grupo__fiends.webp"); }
.gl-grupo-aberrations-oozes-plants { --gl: url("/static/art/grupo__aberrations-oozes-plants.webp"); }
.gl-grupo-celestials-fey { --gl: url("/static/art/grupo__celestials-fey.webp"); }
.gl-grupo-elementals { --gl: url("/static/art/grupo__elementals.webp"); }
.gl-grupo-constructs { --gl: url("/static/art/grupo__constructs.webp"); }
.gl-tipo-hero { --gl: url("/static/art/tipo__hero.webp"); }
.gl-tipo-npc { --gl: url("/static/art/tipo__npc.webp"); }
.gl-tipo-animal { --gl: url("/static/art/tipo__animal.webp"); }
.gl-tipo-monster { --gl: url("/static/art/tipo__monster.webp"); }
.gl-role-tank { --gl: url("/static/art/role__tank.webp"); }
.gl-role-striker { --gl: url("/static/art/role__striker.webp"); }
.gl-role-caster { --gl: url("/static/art/role__caster.webp"); }
.gl-role-healer { --gl: url("/static/art/role__healer.webp"); }
.gl-role-controller { --gl: url("/static/art/role__controller.webp"); }
.gl-role-skirmisher { --gl: url("/static/art/role__skirmisher.webp"); }
.gl-atalho-flies { --gl: url("/static/art/atalho__flies.webp"); }
.gl-atalho-swims { --gl: url("/static/art/atalho__swims.webp"); }
.gl-atalho-famous { --gl: url("/static/art/atalho__famous.webp"); }
.gl-atalho-v1 { --gl: url("/static/art/atalho__v1.webp"); }
.gl-atalho-limpar { --gl: url("/static/art/atalho__limpar.webp"); }
.gl-atalho-filtros { --gl: url("/static/art/atalho__filtros.webp"); }
.gl-size-tiny { --gl: url("/static/art/size__tiny.webp"); }
.gl-size-small { --gl: url("/static/art/size__small.webp"); }
.gl-size-medium { --gl: url("/static/art/size__medium.webp"); }
.gl-size-large { --gl: url("/static/art/size__large.webp"); }
.gl-size-huge { --gl: url("/static/art/size__huge.webp"); }
.gl-size-gargantuan { --gl: url("/static/art/size__gargantuan.webp"); }
.gl-formacao-linha { --gl: url("/static/art/formacao__linha.webp"); }
.gl-formacao-cunha { --gl: url("/static/art/formacao__cunha.webp"); }
.gl-formacao-coluna { --gl: url("/static/art/formacao__coluna.webp"); }
.gl-formacao-espalhada { --gl: url("/static/art/formacao__espalhada.webp"); }
.gl-formacao-retaguarda { --gl: url("/static/art/formacao__retaguarda.webp"); }
.gl-partida-padrao { --gl: url("/static/art/partida__padrao.webp"); }
.gl-partida-regras-oficiais { --gl: url("/static/art/partida__regras-oficiais.webp"); }
.gl-partida-distancia-5 { --gl: url("/static/art/partida__distancia-5.webp"); }
.gl-partida-distancia-30 { --gl: url("/static/art/partida__distancia-30.webp"); }
.gl-partida-distancia-60 { --gl: url("/static/art/partida__distancia-60.webp"); }
.gl-partida-distancia-120 { --gl: url("/static/art/partida__distancia-120.webp"); }
.gl-partida-sortear { --gl: url("/static/art/partida__sortear.webp"); }
.gl-partida-sortear-tema { --gl: url("/static/art/partida__sortear-tema.webp"); }
.gl-furtividade-roof { --gl: url("/static/art/furtividade__roof.webp"); }
/* the action and result icons of 05-A, B and C in the fight log (logIcon, outcomeIcon) */
.gl-icone-acao-attack { --gl: url("/static/art/icone__acao-attack.webp"); }
.gl-icone-acao-spell { --gl: url("/static/art/icone__acao-spell.webp"); }
.gl-icone-acao-move { --gl: url("/static/art/icone__acao-move.webp"); }
.gl-icone-acao-dash { --gl: url("/static/art/icone__acao-dash.webp"); }
.gl-icone-acao-dodge { --gl: url("/static/art/icone__acao-dodge.webp"); }
.gl-icone-acao-disengage { --gl: url("/static/art/icone__acao-disengage.webp"); }
.gl-icone-acao-hide { --gl: url("/static/art/icone__acao-hide.webp"); }
.gl-icone-acao-grapple { --gl: url("/static/art/icone__acao-grapple.webp"); }
.gl-icone-acao-shove { --gl: url("/static/art/icone__acao-shove.webp"); }
.gl-icone-acao-escape-grapple { --gl: url("/static/art/icone__acao-escape-grapple.webp"); }
.gl-icone-acao-ability { --gl: url("/static/art/icone__acao-ability.webp"); }
.gl-icone-acao-trait { --gl: url("/static/art/icone__acao-trait.webp"); }
.gl-icone-acao-reaction { --gl: url("/static/art/icone__acao-reaction.webp"); }
.gl-icone-acao-end-turn { --gl: url("/static/art/icone__acao-end-turn.webp"); }
.gl-icone-acao-pass { --gl: url("/static/art/icone__acao-pass.webp"); }
.gl-icone-resultado-hit { --gl: url("/static/art/icone__resultado-hit.webp"); }
.gl-icone-resultado-miss { --gl: url("/static/art/icone__resultado-miss.webp"); }
.gl-icone-resultado-crit { --gl: url("/static/art/icone__resultado-crit.webp"); }
.gl-icone-resultado-damage { --gl: url("/static/art/icone__resultado-damage.webp"); }
.gl-icone-resultado-heal { --gl: url("/static/art/icone__resultado-heal.webp"); }
.gl-icone-resultado-save-success { --gl: url("/static/art/icone__resultado-save-success.webp"); }
.gl-icone-resultado-save-fail { --gl: url("/static/art/icone__resultado-save-fail.webp"); }
.gl-icone-resultado-opportunity-attack { --gl: url("/static/art/icone__resultado-opportunity-attack.webp"); }
.gl-icone-resultado-dice { --gl: url("/static/art/icone__resultado-dice.webp"); }
/* the mechanics glyph at the head of a log line (and the Prone-on-the-edge glyph after a caught edge); the legend chips of the
   arenas that change carry their own glyph */
.log .log-glyph { vertical-align: -0.2em; }
.log .log-glyph.after { margin: 0 0 0 0.35em; }
.log .log-glyph.log-outcome { margin-right: 0.2em; }
.gl-position-squeezed { width: 0.85em; height: 0.85em; margin-right: 0.45em; border: 2px dashed currentColor; border-radius: 50%; vertical-align: -0.12em; background: none; -webkit-mask: none; mask: none; }
.log .position-breath { margin-left: -0.15em; }
.gl-agua-superficie { --gl: url("/static/art/agua__superficie.webp"); }
.gl-agua-profundidade { --gl: url("/static/art/agua__profundidade.webp"); }
.gl-agua-folego { --gl: url("/static/art/agua__folego.webp"); }
.gl-agua-sufocando { --gl: url("/static/art/agua__sufocando.webp"); }
.gl-agua-afundando { --gl: url("/static/art/agua__afundando.webp"); }
.gl-agua-sem-apoio { --gl: url("/static/art/agua__sem-apoio.webp"); }
.gl-agua-voando { --gl: url("/static/art/agua__voando.webp"); }
.gl-agua-escalando { --gl: url("/static/art/agua__escalando.webp"); }
.gl-agua-escorregadio { --gl: url("/static/art/agua__escorregadio.webp"); }
.legend-chip.legend-mechanic::before { display: none; }
/* the wizard: the side glyphs in the side colours, the progress trail (done, current, locked) in the dot of today */
.wizard-title .gl-etapa-lado-a { background-color: var(--side-a); }
.wizard-title .gl-etapa-lado-b { background-color: var(--side-b); }
.wizard-progress li.done .wizard-dot::before, .wizard-progress li.current .wizard-dot::before, .wizard-progress li.locked .wizard-dot::before { width: 14px; height: 14px; border: 0; border-radius: 0; box-shadow: none; background-color: var(--bone); -webkit-mask: var(--gl) center / contain no-repeat; mask: var(--gl) center / contain no-repeat; }
.wizard-progress li.done .wizard-dot::before { --gl: url("/static/art/etapa__feita.webp"); background-color: var(--bone); }
.wizard-progress li.current .wizard-dot::before { --gl: url("/static/art/etapa__atual.webp"); background-color: var(--bone); filter: drop-shadow(0 0 4px var(--bone-glow)); }
.wizard-progress li.locked .wizard-dot::before { --gl: url("/static/art/etapa__bloqueada.webp"); background-color: var(--dim); }
/* the replay speeds (14-BOT-A): one glyph per label, the pips are the label's number; the labels 1x to 5x stay HTML */
@media (min-width: 900px) {
  .speed-glyph.speed-1 { --glyph: url("/static/art/reproducao__speed-1.webp"); }
  .speed-glyph.speed-2 { --glyph: url("/static/art/reproducao__speed-2.webp"); }
  .speed-glyph.speed-3 { --glyph: url("/static/art/reproducao__speed-3.webp"); }
  .speed-glyph.speed-4 { --glyph: url("/static/art/reproducao__speed-4.webp"); }
  .speed-glyph.speed-5 { --glyph: url("/static/art/reproducao__speed-5.webp"); }
}
/* the header sound button (14-ICO-B) by state; the emoji stays in the markup as the fallback text */
#audio-icon[data-state] { display: inline-block; width: 16px; height: 16px; font-size: 0; color: transparent; background-color: var(--text); -webkit-mask: var(--gl) center / contain no-repeat; mask: var(--gl) center / contain no-repeat; }
#audio-icon[data-state="on"] { --gl: url("/static/art/som__ligado.webp"); }
#audio-icon[data-state="partial"] { --gl: url("/static/art/som__parcial.webp"); }
#audio-icon[data-state="off"] { --gl: url("/static/art/som__mudo.webp"); }
#audio-music[aria-checked="false"] .gl { --gl: url("/static/art/som__musica-off.webp"); }
#audio-effects[aria-checked="false"] .gl { --gl: url("/static/art/som__efeitos-off.webp"); }
/* the Montar chips (09-MON-I): level and CR in their own frames, the other filters in the plain one; off and on */
.picker .chip-btn.dim-levels, .picker .chip-btn.dim-crs, .picker .chip-btn.dim-kinds, .picker .chip-btn.dim-roles, .picker .chip-btn.dim-flags, .picker .chip-btn.dim-sizes { border: 0 solid transparent; border-width: 0 20px; border-radius: 0; padding: 4px 2px; background: transparent; border-image: var(--chip) 0 40 fill / 0 20px stretch; color: var(--text); }
.picker .chip-btn.dim-levels { --chip: url("/static/art/chip__level-off.webp"); }
.picker .chip-btn.dim-crs { --chip: url("/static/art/chip__cr-off.webp"); }
.picker .chip-btn.dim-kinds, .picker .chip-btn.dim-roles, .picker .chip-btn.dim-flags, .picker .chip-btn.dim-sizes { --chip: url("/static/art/chip__filtro-off.webp"); }
.picker .chip-btn.dim-levels.on { --chip: url("/static/art/chip__level-on.webp"); color: #110e21; }
.picker .chip-btn.dim-crs.on { --chip: url("/static/art/chip__cr-on.webp"); color: #110e21; }
.picker .chip-btn.on.dim-kinds, .picker .chip-btn.on.dim-roles, .picker .chip-btn.on.dim-flags, .picker .chip-btn.on.dim-sizes { --chip: url("/static/art/chip__filtro-on.webp"); color: #110e21; }
.picker .chip-btn.dim-levels:focus-visible, .picker .chip-btn.dim-crs:focus-visible, .picker .chip-btn.dim-kinds:focus-visible, .picker .chip-btn.dim-roles:focus-visible, .picker .chip-btn.dim-flags:focus-visible, .picker .chip-btn.dim-sizes:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
/* the compact badges of a roster card: the role and speed glyphs (09-MON-F, G) in place of the emoji */
.badge.glyph-badge { display: inline-flex; align-items: center; justify-content: center; }
.badge.glyph-badge .gl { margin: 0; }
/* a formation glyph (09-PAR-A) is drawn for Side A, facing east; Side B mirrors it */
.formation-glyph.side-b { transform: scaleX(-1); }
/* the arena that changes: the cycle chip glyph, the lethal edge of a cart (13-GLI-C, bone at 45 %, turned toward the rails),
   the left-behind mark (13-GLI-B) in place of the skull */
.edge-mark { position: absolute; pointer-events: none; opacity: 0.45; background: var(--edge) center / 100% 100% no-repeat; }
.edge-mark.side { --edge: url("/static/art/borda-letal__lado.webp"); }
.edge-mark.corner { --edge: url("/static/art/borda-letal__canto.webp"); }
.map.art-off .edge-mark { opacity: 0.6; }
/* the painted bases of the Bridge and the Open Sea (12-PON-A, 12-MAR-A): the cliff tops, the chasm and the rocks keep only a
   thin outline over the painting, like the walls of a painted map */
.map.art-map:not(.art-off) .terrain.cliff, .map.art-map:not(.art-off) .terrain.chasm { background: transparent; box-shadow: none; }
.map.art-map:not(.art-off) .terrain.rock { background: transparent; box-shadow: inset 0 0 0 1px rgba(17, 14, 33, 0.3); }
/* the Mine Carts base (12-CAR-A) is the blurred rails: the CSS blur stays the reserve (decision 50) */
.map.art-map:not(.art-off) .terrain.rails { background: transparent; filter: none; animation: none; }
/* the overlay under a moving layer (12-MAR-D foam, 12-CAR-D sparks): a box one cell around it, slid with the same translate */
.layer-overlay { --move: translate(0px, 0px); position: absolute; pointer-events: none; transform: var(--move); transition: transform var(--move-ms, 380ms) ease; background-image: var(--art-image); background-size: var(--art-size); background-position: var(--art-pos); background-repeat: no-repeat; }
.layer-overlay.flip-x { transform: var(--move) scaleX(-1); }
.layer-overlay.no-slide, .map.no-anim .layer-overlay { transition: none; }
.map.art-off .layer-overlay { display: none; }
@media (prefers-reduced-motion: reduce) { .layer-overlay { transition: none; } }
.token.left-behind::after { content: ""; width: 1em; height: 1em; background-color: var(--bone); -webkit-mask: url("/static/art/mecanica__ficou-para-tras.webp") center / contain no-repeat; mask: url("/static/art/mecanica__ficou-para-tras.webp") center / contain no-repeat; }
/* the last known position (09-FUR-E): the side's dashed ring with the trail of a fighter that moved away */
.last-seen { opacity: 0.85; background: url("/static/art/ultima-posicao__a.webp") center / 100% 100% no-repeat; }
.last-seen.side-b { background-image: url("/static/art/ultima-posicao__b.webp"); }
/* the clone pip (14-BOT-B): the filled bone counter under the HTML number; the CSS pip of today is the fallback colour */
.clone-pip { background: url("/static/art/clone__pip.webp") center / 100% 100% no-repeat, var(--bone); box-shadow: none; }
/* Found (09-FUR-D): the smoke ring bursting in six frames, the eye glyph (09-FUR-A) settling in its middle */
.pop-found { background: url("/static/art/achado__strip.webp") 0 0 / 600% 100% no-repeat; animation: strip-6 var(--pop-ms, 900ms) steps(6) forwards; }
.pop-found::after { content: ""; position: absolute; inset: 30%; background: url("/static/art/furtividade__found.webp") center / contain no-repeat; animation: pop-fx var(--pop-ms, 900ms) ease-out forwards; }
/* the seals of the Fight (13-SEL-A, B, C): an illustrated medallion in the quiet corner, four frames, no mascot */
.moment-bridge-cut .moment-sprite { --strip: url("/static/art/selo-ponte-cortada__strip.webp"); --play: 1s; }
.moment-edge-grab .moment-sprite { --strip: url("/static/art/selo-borda-agarrada__strip.webp"); --play: 1s; }
.moment-left-behind .moment-sprite { --strip: url("/static/art/selo-ficou-para-tras__strip.webp"); --play: 1.2s; }
.moment.is-seal .moment-icon { background: none; background-color: var(--bone); -webkit-mask: var(--gl) center / contain no-repeat; mask: var(--gl) center / contain no-repeat; }
.moment-bridge-cut .moment-icon { --gl: url("/static/art/mecanica__ponte-cortada.webp"); }
.moment-edge-grab .moment-icon { --gl: url("/static/art/mecanica__agarrar-borda.webp"); }
.moment-left-behind .moment-icon { --gl: url("/static/art/mecanica__ficou-para-tras.webp"); }
@media (prefers-reduced-motion: reduce) {
  .pop-found, .pop-found::after { animation: none; }
  .moment-bridge-cut .moment-sprite, .moment-edge-grab .moment-sprite, .moment-left-behind .moment-sprite { animation: none; background-position-x: 100%; }
}
/* ==== end of group 5 ==== */

/* ABB · Animate Trees: the painted canopy is covered by sand before areas and tokens are drawn. */
.summon-clearings { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.summon-clearing { position: absolute; background: url("/static/art/clareira-arrancada.webp") center / 100% 100% no-repeat; -webkit-mask-image: radial-gradient(ellipse, #000 65%, transparent 100%); mask-image: radial-gradient(ellipse, #000 65%, transparent 100%); }
.summon-awakening { position: absolute; z-index: 5; pointer-events: none; background: url("/static/art/despertar-arvore__strip.webp") 0 0 / 600% 100% no-repeat; animation: summon-awaken 900ms steps(6) forwards; }
.token.summon-taking-root { z-index: 5; pointer-events: none; animation: summon-root 360ms ease-in forwards; }
@keyframes summon-awaken { to { background-position-x: 120%; opacity: 0; } }
@keyframes summon-root { to { transform: scale(0.38) translateY(35%); opacity: 0; filter: sepia(1); } }
@media (prefers-reduced-motion: reduce) { .summon-awakening, .token.summon-taking-root { animation: none; } }
.map.no-anim .summon-awakening, .map.no-anim .token.summon-taking-root { animation: none; }

/* the rust plates of comanda 067 on the corrosion seal (owner decision of 26/09/2026, "Trocar pelas placas (Recomendado)") */
.token-rust-seal { display: flex; align-items: center; gap: 2px; }
.token-rust-seal::before { content: ""; flex: none; width: 14px; height: 14px; background: url("/static/art/selo__ferrugem.webp") center / contain no-repeat; }
.token-rust-seal.destroyed::before { background-image: url("/static/art/selo__ferrugem-quebra.webp"); }
/* One-time replay art (comanda 068): a 3-cell Death Burst and token-sized Blink / Invisible flashes. */
.fx-one-shot { position: absolute; z-index: 6; pointer-events: none; background: var(--effect-image) center / contain no-repeat; animation: fx-one-shot 760ms ease-out forwards; }
.fx-explosao-po { --effect-image: url("/static/art/fx__explosao-po.webp"); }
.fx-explosao-gelo { --effect-image: url("/static/art/fx__explosao-gelo.webp"); }
.fx-explosao-magma { --effect-image: url("/static/art/fx__explosao-magma.webp"); }
.fx-explosao-vapor { --effect-image: url("/static/art/fx__explosao-vapor.webp"); }
.fx-piscar { --effect-image: url("/static/art/fx__piscar.webp"); }
.fx-invisivel { --effect-image: url("/static/art/fx__invisivel.webp"); }
@keyframes fx-one-shot { 0% { opacity: 0; transform: scale(0.45); } 22% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } }
.map.no-anim .fx-one-shot { display: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .fx-one-shot { display: none; animation: none; } }
/* comanda 154 · a arte das partes F a I */
.hp-row .hp-conds .cond-charmed::before { background-image: url("/static/art/icone__condicao-charmed.webp"); }
.hp-row .hp-conds .cond-deafened::before { background-image: url("/static/art/icone__condicao-deafened.webp"); }
.hp-row .hp-conds .cond-exhaustion::before { background-image: url("/static/art/icone__condicao-exhaustion.webp"); }
.hp-row .hp-conds .cond-incapacitated::before { background-image: url("/static/art/icone__condicao-incapacitated.webp"); }
.hp-row .hp-conds .cond-petrified::before { background-image: url("/static/art/icone__condicao-petrified.webp"); }
.hp-row .hp-conds .cond-unconscious::before { background-image: url("/static/art/icone__condicao-unconscious.webp"); }
.gl-icone-dano-acid { --gl: url("/static/art/icone__dano-acid.webp"); }
.gl-icone-dano-bludgeoning { --gl: url("/static/art/icone__dano-bludgeoning.webp"); }
.gl-icone-dano-cold { --gl: url("/static/art/icone__dano-cold.webp"); }
.gl-icone-dano-fire { --gl: url("/static/art/icone__dano-fire.webp"); }
.gl-icone-dano-force { --gl: url("/static/art/icone__dano-force.webp"); }
.gl-icone-dano-lightning { --gl: url("/static/art/icone__dano-lightning.webp"); }
.gl-icone-dano-necrotic { --gl: url("/static/art/icone__dano-necrotic.webp"); }
.gl-icone-dano-piercing { --gl: url("/static/art/icone__dano-piercing.webp"); }
.gl-icone-dano-poison { --gl: url("/static/art/icone__dano-poison.webp"); }
.gl-icone-dano-psychic { --gl: url("/static/art/icone__dano-psychic.webp"); }
.gl-icone-dano-radiant { --gl: url("/static/art/icone__dano-radiant.webp"); }
.gl-icone-dano-slashing { --gl: url("/static/art/icone__dano-slashing.webp"); }
.gl-icone-dano-thunder { --gl: url("/static/art/icone__dano-thunder.webp"); }
.log .log-glyph.log-dmg.dmg-acid { color: var(--dmg-acid); }
.log .log-glyph.log-dmg.dmg-bludgeoning { color: var(--dmg-bludgeoning); }
.log .log-glyph.log-dmg.dmg-cold { color: var(--dmg-cold); }
.log .log-glyph.log-dmg.dmg-fire { color: var(--dmg-fire); }
.log .log-glyph.log-dmg.dmg-force { color: var(--dmg-force); }
.log .log-glyph.log-dmg.dmg-lightning { color: var(--dmg-lightning); }
.log .log-glyph.log-dmg.dmg-necrotic { color: var(--dmg-necrotic); }
.log .log-glyph.log-dmg.dmg-piercing { color: var(--dmg-piercing); }
.log .log-glyph.log-dmg.dmg-poison { color: var(--dmg-poison); }
.log .log-glyph.log-dmg.dmg-psychic { color: var(--dmg-psychic); }
.log .log-glyph.log-dmg.dmg-radiant { color: var(--dmg-radiant); }
.log .log-glyph.log-dmg.dmg-slashing { color: var(--dmg-slashing); }
.log .log-glyph.log-dmg.dmg-thunder { color: var(--dmg-thunder); }
.fx-strip { position: absolute; z-index: 6; pointer-events: none; background: var(--fx-strip) 0 0 / 600% 100% no-repeat; mix-blend-mode: screen; animation: strip-6 600ms steps(6) forwards; }
.fx-strip-magia-call-lightning { --fx-strip: url("/static/art/magia-call-lightning__strip.webp"); }
.fx-strip-magia-flame-strike { --fx-strip: url("/static/art/magia-flame-strike__strip.webp"); }
.fx-strip-magia-ice-storm { --fx-strip: url("/static/art/magia-ice-storm__strip.webp"); }
.fx-strip-magia-sacred-flame { --fx-strip: url("/static/art/magia-sacred-flame__strip.webp"); }
.fx-strip-magia-inflict-wounds { --fx-strip: url("/static/art/magia-inflict-wounds__strip.webp"); }
.fx-strip-magia-thunderwave { --fx-strip: url("/static/art/magia-thunderwave__strip.webp"); }
.fx-strip-magia-ice-knife { --fx-strip: url("/static/art/magia-ice-knife__strip.webp"); }
.fx-strip-zona-hypnotic-pattern { --fx-strip: url("/static/art/zona-hypnotic-pattern__strip.webp"); }
.map-pop.pop-sacred-flame { --pop: url("/static/art/magia-sacred-flame__strip.webp"); background: var(--pop) 0 0 / 600% 100% no-repeat; mix-blend-mode: screen; animation: strip-6 var(--pop-ms, 600ms) steps(6) forwards; }
.map-pop.pop-inflict-wounds { --pop: url("/static/art/magia-inflict-wounds__strip.webp"); background: var(--pop) 0 0 / 600% 100% no-repeat; mix-blend-mode: screen; animation: strip-6 var(--pop-ms, 500ms) steps(6) forwards; }
.map-pop.pop-hellish-rebuke { --pop: url("/static/art/magia-hellish-rebuke__strip.webp"); background: var(--pop) 0 0 / 600% 100% no-repeat; mix-blend-mode: screen; animation: strip-6 var(--pop-ms, 600ms) steps(6) forwards; }
.map.no-anim .map-pop.pop-dispel, .map.no-anim .map-pop.pop-sacred-flame, .map.no-anim .map-pop.pop-inflict-wounds, .map.no-anim .map-pop.pop-hellish-rebuke { display: none; animation: none; }
.map-pop.pop-divine-smite { --pop: url("/static/art/fx__pop-divine-smite.webp"); background: var(--pop) center / contain no-repeat; }
.map-pop.pop-golpe-reduzido { --pop: url("/static/art/fx__pop-golpe-reduzido.webp"); background: var(--pop) center / contain no-repeat; }
.map-pop.pop-mastery-cleave { --pop: url("/static/art/fx__pop-mastery-cleave.webp"); background: var(--pop) center / contain no-repeat; }
.area-loop { pointer-events: none; mix-blend-mode: screen; }
.area-loop-block { overflow: hidden; }
.area-loop-image { transform-box: fill-box; animation: area-strip-6 1.2s steps(6) infinite; }
@keyframes area-strip-6 { to { transform: translateX(-83.333333%); } }
.area-loop-fog-cloud .area-loop-image { --area-strip-url: url("/static/art/zona-fog-cloud__strip.webp"); }
.area-loop-darkness .area-loop-image { --area-strip-url: url("/static/art/zona-darkness__strip.webp"); }
.area-loop-spike-growth .area-loop-image { --area-strip-url: url("/static/art/zona-spike-growth__strip.webp"); }
.area-loop-entangle .area-loop-image { --area-strip-url: url("/static/art/zona-entangle__strip.webp"); }
.area-loop-cloudkill .area-loop-image { --area-strip-url: url("/static/art/zona-cloudkill__strip.webp"); }
.area-loop-stinking-cloud .area-loop-image { --area-strip-url: url("/static/art/zona-stinking-cloud__strip.webp"); }
.area-loop-silence .area-loop-image { --area-strip-url: url("/static/art/zona-silence__strip.webp"); }
.area-loop-grease .area-loop-image { --area-strip-url: url("/static/art/zona-grease__strip.webp"); }
.area-loop-insect-plague .area-loop-image { --area-strip-url: url("/static/art/zona-insect-plague__strip.webp"); }
.area-loop-daylight .area-loop-image { --area-strip-url: url("/static/art/zona-daylight__strip.webp"); }
.area-loop-sleet-storm .area-loop-image { --area-strip-url: url("/static/art/magia-sleet-storm__strip.webp"); }
.area-loop-moonbeam .area-loop-image { --area-strip-url: url("/static/art/magia-moonbeam__strip.webp"); }
.areas .area-loop-image { mix-blend-mode: screen; }
.areas .area-wall { pointer-events: none; mix-blend-mode: screen; }
.areas .area-wall-image { opacity: 0.94; }
.area-wall-wall-of-force .area-wall-image { --wall-tile: url("/static/art/parede-wall-of-force__tile.webp"); }
.area-wall-wall-of-stone .area-wall-image { --wall-tile: url("/static/art/parede-wall-of-stone__tile.webp"); }
.area-wall-wind-wall .area-wall-image { --wall-tile: url("/static/art/parede-wind-wall__tile.webp"); }
.map.art-off .areas .area-loop, .map.art-off .areas .area-wall { display: none; }
.map.no-anim .fx-strip { display: none; animation: none; }
.map.no-anim .area-loop-image { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-strip { display: none; animation: none; }
  .area-loop-image { animation: none; transform: none; }
}

/* comanda 159 · o selo FULL e o botão SRD ⇄ FULL */
.badge.full, .fm-full-seal { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ffc46a; border-radius: 999px; background: linear-gradient(180deg, #713a18, #48220e); color: #fff1d3; font-size: .72rem; font-weight: 900; letter-spacing: .06em; line-height: 1.2; white-space: nowrap; box-shadow: inset 0 1px 0 #ffffff2b, 0 1px 4px #0008; }
.badge.full { padding: 2px 8px; }
.fm-full-seal { flex: 0 0 auto; align-self: flex-start; margin-left: auto; padding: 4px 9px; }
#fight-title .badge.full { margin-left: 8px; vertical-align: middle; }
.content-toggle { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 2px; max-width: 100%; padding: 2px; border: 1px solid #8a6f43; border-radius: 999px; background: #11101a; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0006; }
.content-toggle-option { min-width: 0; min-height: 30px; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--dim); font: 700 .78rem var(--font-num); line-height: 1; white-space: nowrap; cursor: pointer; }
.content-toggle-option[aria-pressed="true"] { border-color: #d9b778; background: linear-gradient(180deg, #5b4524, #33260f); color: #fff1cf; box-shadow: inset 0 1px 0 #ffffff24; }
.content-toggle-option:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
@media (max-width: 420px) {
  .content-toggle { gap: 0; padding: 1px; }
  .content-toggle-option { min-height: 28px; padding: 3px 7px; font-size: .72rem; }
}
/* comanda 155 · as animações das magias */
.fx-area-shot { z-index: 5; background: none; animation: none; overflow: visible; }
.fx-area-frame { position: absolute; inset: 0; transform-origin: 0 50%; background-position: 0 0; background-repeat: no-repeat; mix-blend-mode: screen; animation-name: ray-flash, strip-6; animation-timing-function: ease-out, steps(6); animation-fill-mode: forwards, forwards; }
.fx-area-shot-magia-burning-hands .fx-area-frame { background-image: url("/static/art/magia-burning-hands__strip.webp"); background-size: 600% 100%; }
.fx-area-shot-magia-color-spray .fx-area-frame { background-image: url("/static/art/magia-color-spray__strip.webp"); background-size: 600% 100%; }
.fx-area-shot-magia-cone-of-cold .fx-area-frame { background-image: url("/static/art/magia-cone-of-cold__strip.webp"); background-size: 600% 100%; }
.fx-area-shot-magia-shatter .fx-area-frame { background-image: url("/static/art/magia-shatter__strip.webp"); background-size: 600% 100%; }
.fx-area-shot-magia-lightning-bolt .fx-area-frame { background-image: url("/static/art/magia-lightning-bolt__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-fire-cone .fx-area-frame { background-image: url("/static/art/baforada-fire-cone__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-cold-cone .fx-area-frame { background-image: url("/static/art/baforada-cold-cone__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-lightning-cone .fx-area-frame { background-image: url("/static/art/baforada-lightning-cone__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-acid-cone .fx-area-frame { background-image: url("/static/art/baforada-acid-cone__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-poison-cone .fx-area-frame { background-image: url("/static/art/baforada-poison-cone__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-fire-linha .fx-area-frame { background-image: url("/static/art/baforada-fire-linha__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-cold-linha .fx-area-frame { background-image: url("/static/art/baforada-cold-linha__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-lightning-linha .fx-area-frame { background-image: url("/static/art/baforada-lightning-linha__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-acid-linha .fx-area-frame { background-image: url("/static/art/baforada-acid-linha__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-baforada-poison-linha .fx-area-frame { background-image: url("/static/art/baforada-poison-linha__strip.webp"); background-size: 400% 100%; animation-name: ray-flash, strip-4; animation-timing-function: ease-out, steps(4); }
.fx-area-shot-magia-fireball .fx-area-frame { background-image: url("/static/art/magia-fireball__strip.webp"); background-size: 600% 100%; }
.map-projectile.projectile-magic-missile { background: url("/static/art/magia-magic-missile__strip.webp") 0 0 / 600% 100% no-repeat; mix-blend-mode: screen; animation: projectile-flight var(--projectile-ms, 500ms) linear forwards, strip-6 var(--projectile-ms, 500ms) steps(6) infinite; }
.map-pop.pop-hold-person { background-image: url("/static/art/magia-hold-person__strip.webp"); background-size: 600% 100%; background-position: 0 0; mix-blend-mode: screen; animation: strip-6 var(--pop-ms) steps(6) forwards; }
.map-pop.pop-healing-word { background-image: url("/static/art/magia-healing-word__strip.webp"); background-size: 600% 100%; background-position: 0 0; mix-blend-mode: screen; animation: strip-6 var(--pop-ms) steps(6) forwards; }
.map-pop.pop-cure-wounds { background-image: url("/static/art/magia-cure-wounds__strip.webp"); background-size: 600% 100%; background-position: 0 0; mix-blend-mode: screen; animation: strip-6 var(--pop-ms) steps(6) forwards; }
.map-pop.pop-counterspell { background-image: url("/static/art/magia-counterspell__strip.webp"); background-size: 600% 100%; background-position: 0 0; mix-blend-mode: screen; animation: strip-6 var(--pop-ms) steps(6) forwards; }
.map-pop.pop-shield { background-image: url("/static/art/magia-shield__strip.webp"); background-size: 600% 100%; background-position: 0 0; mix-blend-mode: screen; animation: strip-6 var(--pop-ms) steps(6) forwards; }
/* The Rules' list n (16/10/2026): the Dissonant Whispers on its target, the Storm's Thunder on the attacker, the Pipes of Haunting ring */
.map-pop.pop-dissonant-whispers { background-image: url("/static/art/magia-dissonant-whispers__strip.webp"); background-size: 600% 100%; background-position: 0 0; mix-blend-mode: screen; animation: strip-6 var(--pop-ms) steps(6) forwards; }
.map-pop.pop-storms-thunder { background-image: url("/static/art/magia-storms-thunder__strip.webp"); background-size: 600% 100%; background-position: 0 0; mix-blend-mode: screen; animation: strip-6 var(--pop-ms) steps(6) forwards; }
.map-pop.pop-pipes-of-haunting { background-image: url("/static/art/magia-pipes-of-haunting__strip.webp"); background-size: 600% 100%; background-position: 0 0; mix-blend-mode: screen; animation: strip-6 var(--pop-ms) steps(6) forwards; }
.area-loop-spirit-guardians .area-loop-image { --area-strip-url: url("/static/art/magia-spirit-guardians__strip.webp"); animation: area-strip-4 1.6s steps(4) infinite; opacity: .7; }
.area-loop-web .area-loop-image { --area-strip-url: url("/static/art/magia-web__strip.webp"); animation: none; transform: none; opacity: .7; mix-blend-mode: normal; }
@keyframes area-strip-4 { to { transform: translateX(-75%); } }
.area-wall-wall-of-fire .area-wall-image { --wall-tile: url("/static/art/magia-wall-of-fire__strip.webp"); opacity: .94; }
.area-wall-wall-of-fire .area-wall-fire-image { animation: wall-fire-frames .8s steps(4) infinite; }
@keyframes wall-fire-frames { to { transform: translateX(-75%); } }
.map.no-anim .fx-area-shot, .map.no-anim .map-pop.pop-hold-person, .map.no-anim .map-pop.pop-healing-word, .map.no-anim .map-pop.pop-cure-wounds, .map.no-anim .map-pop.pop-counterspell, .map.no-anim .map-pop.pop-shield, .map.no-anim .map-pop.pop-dissonant-whispers, .map.no-anim .map-pop.pop-storms-thunder, .map.no-anim .map-pop.pop-pipes-of-haunting { display: none; animation: none; }
.map.no-anim .area-loop-spirit-guardians .area-loop-image, .map.no-anim .area-wall-wall-of-fire .area-wall-fire-image { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-area-shot, .map-pop.pop-hold-person, .map-pop.pop-healing-word, .map-pop.pop-cure-wounds, .map-pop.pop-counterspell, .map-pop.pop-shield, .map-pop.pop-dissonant-whispers, .map-pop.pop-storms-thunder, .map-pop.pop-pipes-of-haunting { display: none; animation: none; }
  .area-loop-spirit-guardians .area-loop-image, .area-wall-wall-of-fire .area-wall-fire-image { animation: none; transform: none; }
}
/* ==== Cards da ficha aberta (decision 83; docs/WEB.md, "Cards da ficha aberta"): the approved card of static/art/cards.json,
   set by app.js only when a sheet with a card opens; the picker list keeps its emojis. Without a card nothing here applies. */
.sheet-card { margin: 0; border-radius: 12px; border: 1px solid var(--border); background: radial-gradient(ellipse at 50% 38%, #262b3a 0%, #151822 70%); overflow: hidden; line-height: 0; }
.sheet-card-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
@media (min-width: 721px) {
  .sheet.with-card { max-width: 760px; display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .sheet.with-card > * { grid-column: 2; }
  .sheet.with-card > .sheet-card { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: 0; }
}
@media (max-width: 720px) {
  .sheet-card { width: min(180px, 46vw); margin: 10px auto 0; }
}
/* ==== end of the sheet cards ==== */

/* ==== Marcas e animações (static/fx.js; docs/WEB.md, "Tokens com rosto, marcas e animações"), owner decisions of
   16/09/2026. The marks sit in the areas layer (under the zones, the grid and the tokens), translucent, one drawing per
   damage type, fading over 2 rounds; the shots fly over the tokens for a moment. The damage colours are never the gold
   of the d20, the Critical Hit and the victory: radiant is bone. Reduced motion: marks appear and go, nothing flies. ==== */
:root {
  --dmg-fire: #ff7b45;
  --dmg-cold: #8fd8ff;
  --dmg-thunder: #b9a7e6;
  --dmg-acid: #a4d63a;
  --dmg-poison: #6fbf5a;
  --dmg-lightning: #6fb8ff;
  --dmg-force: #b07cff;
  --dmg-necrotic: #8a6aa0;
  --dmg-radiant: #f1edff;
  --dmg-psychic: #f06bc9;
  --dmg-bludgeoning: #cfc6b4;
  --dmg-piercing: #cfc6b4;
  --dmg-slashing: #cfc6b4;
}
.areas .mark { transition: opacity 0.9s ease; }
.areas .mark.no-fade, .map.no-anim .areas .mark { transition: none; }
.areas .mark .mark-tint { fill-opacity: 0.14; shape-rendering: crispEdges; }
.areas .mark .mark-art { opacity: 0.55; }
.areas .mark-cold .mark-art, .areas .mark-acid .mark-art, .areas .mark-force .mark-art, .areas .mark-radiant .mark-art, .areas .mark-psychic .mark-art { opacity: 0.32; }
.areas .mark-fire .mark-tint { fill: #2a1a12; fill-opacity: 0.22; }
.areas .mark-cold .mark-tint { fill: var(--dmg-cold); }
.areas .mark-thunder .mark-tint { fill: #3a3550; }
.areas .mark-acid .mark-tint { fill: var(--dmg-acid); }
.areas .mark-poison .mark-tint { fill: var(--dmg-poison); }
.areas .mark-lightning .mark-tint { fill: #1d2536; fill-opacity: 0.26; }
.areas .mark-force .mark-tint { fill: var(--dmg-force); fill-opacity: 0.14; }
.areas .mark-necrotic .mark-tint { fill: #1c1424; fill-opacity: 0.32; }
.areas .mark-radiant .mark-tint { fill: var(--dmg-radiant); fill-opacity: 0.22; }
.areas .mark-psychic .mark-tint { fill: var(--dmg-psychic); fill-opacity: 0.14; }
.areas .mk-soot { fill: #120c08; fill-opacity: 0.55; }
.areas .mk-ember { fill: var(--dmg-fire); }
.areas .mk-frost { stroke: #f4fbff; stroke-width: 1.4; stroke-linecap: round; fill: none; }
.areas .mk-rime { fill: #f4fbff; fill-opacity: 0.8; }
.areas .mk-crack { stroke: #17141f; stroke-width: 1.6; fill: none; stroke-linejoin: round; }
.areas .mk-acid { fill: var(--dmg-acid); fill-opacity: 0.55; stroke: #3d5214; stroke-width: 0.8; }
.areas .mk-poison { fill: var(--dmg-poison); fill-opacity: 0.45; stroke: #5b3b6e; stroke-width: 0.8; }
.areas .mk-scorch { stroke: #110e21; stroke-width: 1.6; fill: none; stroke-linejoin: round; filter: drop-shadow(0 0 1px var(--dmg-lightning)); }
.areas .mk-ring { stroke: var(--dmg-force); stroke-width: 1; fill: none; stroke-opacity: 0.8; }
.areas .mk-blight { fill: #120a18; fill-opacity: 0.5; }
.areas .mk-vein { stroke: var(--dmg-necrotic); stroke-width: 1.2; fill: none; }
.areas .mk-glow { fill: var(--dmg-radiant); fill-opacity: 0.35; }
.areas .mk-ray { stroke: var(--dmg-radiant); stroke-width: 1.2; stroke-linecap: round; }
.areas .mk-swirl { stroke: var(--dmg-psychic); stroke-width: 1.2; fill: none; }
/* the shots: over the tokens, under the corner controls; moved by transform only */
.fx-shot, .fx-orb { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; background: center / contain no-repeat; }
.fx-reach-blade { position: absolute; z-index: 5; height: 11px; transform-origin: left center; pointer-events: none; animation: reach-thrust 420ms ease-out both; filter: drop-shadow(0 1px 2px #110e21); }
.fx-reach-blade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #3d291d 0 8%, #9b6842 24%, #e5c58a 27%, #78858c 31%, #e8ece9 45%, #a6bac0 72%, #e7ede9 90%, transparent 100%); clip-path: polygon(0 35%, 27% 35%, 30% 20%, 90% 20%, 100% 50%, 90% 80%, 30% 80%, 27% 65%, 0 65%); }
.fx-reach-blade::after { content: ""; position: absolute; left: 27%; top: -5px; width: 5px; height: 21px; border: 1px solid #e2c58c; border-radius: 2px; background: #67452d; }
@keyframes reach-thrust { 0% { opacity: 0; clip-path: inset(0 75% 0 0); } 15% { opacity: 1; } 30%, 75% { opacity: 1; clip-path: inset(0); } 100% { opacity: 0; } }
.map.no-anim .fx-reach-blade { display: none; }
@media (prefers-reduced-motion: reduce) { .fx-reach-blade { display: none; } }
.fx-shot svg { display: block; overflow: visible; filter: drop-shadow(0 1px 1px rgba(11, 9, 22, 0.85)); }
.fx-shot .fx-shaft { stroke: #8a5a32; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.fx-shot .fx-shaft.thick { stroke-width: 2.4; }
.fx-shot .fx-iron { fill: #c9ccd3; stroke: #110e21; stroke-width: 0.8; }
.fx-shot .fx-fletch { stroke: var(--bone); stroke-width: 1.2; fill: none; stroke-linecap: round; }
.fx-shot .fx-stone { fill: #8a8f99; stroke: #110e21; stroke-width: 0.8; }
.fx-shot .fx-trail { stroke: rgba(241, 237, 255, 0.45); stroke-width: 1.6; stroke-dasharray: 3 3; }
.fx-ray { position: absolute; z-index: 5; pointer-events: none; transform-origin: 0 50%; border-radius: 999px; --ray: var(--dmg-force); background: linear-gradient(180deg, transparent 0, var(--ray) 30%, #fff 50%, var(--ray) 70%, transparent 100%); box-shadow: 0 0 8px 1px var(--ray); will-change: clip-path, opacity; }
.fx-orb { border-radius: 50%; --ray: var(--dmg-force); background-color: #fff; box-shadow: 0 0 6px 3px var(--ray), 0 0 14px 6px var(--ray); }
.fx-ray.dmg-fire, .fx-orb.dmg-fire { --ray: var(--dmg-fire); }
.fx-ray.dmg-cold, .fx-orb.dmg-cold { --ray: var(--dmg-cold); }
.fx-ray.dmg-thunder, .fx-orb.dmg-thunder { --ray: var(--dmg-thunder); }
.fx-ray.dmg-acid, .fx-orb.dmg-acid { --ray: var(--dmg-acid); }
.fx-ray.dmg-poison, .fx-orb.dmg-poison { --ray: var(--dmg-poison); }
.fx-ray.dmg-lightning, .fx-orb.dmg-lightning { --ray: var(--dmg-lightning); }
.fx-ray.dmg-necrotic, .fx-orb.dmg-necrotic { --ray: var(--dmg-necrotic); }
.fx-ray.dmg-radiant, .fx-orb.dmg-radiant { --ray: var(--dmg-radiant); }
.fx-ray.dmg-psychic, .fx-orb.dmg-psychic { --ray: var(--dmg-psychic); }
/* the Codex sprites of efeitos.json: a projectile is the image pointing right; the melee impact is a 6-frame strip on
   #110e21, blended with screen so the dark ground disappears */
.fx-shot[style*="background-image"] { background-size: contain; background-position: center; }
.map-pop.pop-impact { background-size: 600% 100%; background-position: 0 0; mix-blend-mode: screen; animation: strip-6 var(--pop-ms, 450ms) steps(6) forwards; }
.fx-ray[style*="background-image"], .fx-orb[style*="background-image"] { background-color: transparent; box-shadow: none; background-size: 100% 100%; }
/* ABX · Collaboration inbox and Wisdom shop. */
/* the line of the game is hidden in the setup, and keeps its room: the controls stay where they are on every page (the owner,
   06/10/2026: "Mantenha essa barra acima padronizada") */
body.wizard-mode .topbar .tagline { visibility: hidden; }
.inbox-list { display: grid; gap: 12px; margin-top: 14px; }
.inbox-message { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; }
.inbox-message.unread { border-color: #d9b778; box-shadow: inset 3px 0 #d9b778; }
.inbox-toggle { border: 0; background: none; color: var(--bone); font: 700 1.1rem var(--font-display); text-align: left; cursor: pointer; }
.inbox-toggle:hover, .inbox-toggle:focus-visible { text-decoration: underline; }
.inbox-details { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 10px; }
.inbox-details p { white-space: pre-wrap; }
.wisdom-badge { color: #d9b778; font-weight: 700; white-space: nowrap; }
.wisdom-summary, .wisdom-shop, .wisdom-statement { margin: 12px 0; }
.wisdom-balance { color: #d9b778; font: 700 2.5rem var(--font-display); }
.wisdom-shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.wisdom-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.wisdom-item h3 { margin: 0; }
.ranking-user .ranking-title { display: block; color: #d9b778; font-size: .8rem; }
.admin-verdicts { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.admin-verdict-form { flex-basis: 100%; display: grid; gap: 8px; }
.admin-verdict-form[hidden] { display: none; }
.admin-verdict-form textarea { width: 100%; }
@media (max-width: 600px) {
  .inbox-message { grid-template-columns: minmax(0, 1fr) auto; }
  .inbox-message .wisdom-badge { grid-column: 2; }
  .inbox-message time { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .areas .mark { transition: none; }
  .fx-shot, .fx-ray, .fx-orb { display: none; }
}
.view-as-control, .game-mode-control { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
.view-as-control select, .game-mode-control select { max-width: 15rem; min-height: 2rem; }

/* Comanda 100 · ranking parchment, account profile, and end-of-fight achievement. */
.header-account { position: relative; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.account-unread-badge { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 4px; border-radius: 999px; background: #b84a33; color: #fff; font-size: .72rem; }
.account-profile-dot { width: 9px; height: 9px; border-radius: 50%; background: #86d7e1; box-shadow: 0 0 0 2px #1a1632; }
.header-account [hidden] { display: none; }
.ranking-scroll { max-width: 100%; min-width: 0; padding: 16px 20px; border: 22px solid transparent; border-image: url("/static/art/painel-pergaminho__9slice.webp") 65 / 22px stretch; background: url("/static/art/textura-pergaminho__tile.webp") 0 0 / 256px 256px padding-box, #e9d8b0; color: #1a1632; }
.ranking-scroll h2, .ranking-scroll h3 { color: #4b3420; }
.ranking-board-group { margin: 8px 0 12px; }
/* three tabs for the groups of boards (the owner, 05/10/2026: "Três abas (Recomendado)"): the chosen one is the dark one */
.ranking-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 2px; }
.ranking-tab { min-height: 40px; padding: 4px 16px; border: 1px solid #86663c; border-radius: 999px; background: transparent; color: #342719; font: 700 .9rem var(--font-display); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.ranking-tab[aria-selected="true"] { background: #4a2f17; border-color: #4a2f17; color: #f6ead0; }
.ranking-tab:focus-visible { outline: 2px solid #4a2f17; outline-offset: 2px; }
.ranking-mine-line { margin: 0; font-weight: 700; }
.ranking-scoring { margin: 6px 0 0; }
.ranking-board-buttons, .ranking-controls { display: flex; flex-wrap: wrap; gap: 7px; }
.ranking-board-button { min-height: 42px; color: #342719; border-color: #86663c; background: #efe1c5; }
.ranking-board-button[aria-pressed="true"] { color: #17120d; border-color: #6f421e; background: #d8b875; box-shadow: inset 0 0 0 1px #fff6; }
.ranking-controls { align-items: center; margin: 12px 0; }
.ranking-controls input, .ranking-controls select { min-width: 0; min-height: 40px; padding: 7px 9px; border: 1px solid #8b704c; border-radius: 7px; background: #f5e9ce; color: #1a1632; font: inherit; }
.ranking-filter { flex: 1 1 180px; }
.ranking-controls .btn-small { color: #1a1632; border-color: #8b704c; }
.ranking-table-scroll { max-height: min(58vh, 620px); overflow-x: hidden; overflow-y: auto; border: 1px solid #937750; border-radius: 8px; background: #fff8e6a6; }
.ranking-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ranking-table th, .ranking-table td { padding: 8px 6px; border-bottom: 1px solid #9b8158; color: #21190f; text-align: left; overflow-wrap: anywhere; }
.ranking-table th { position: sticky; top: 0; z-index: 1; background: #d9c395; }
.ranking-table th:first-child, .ranking-place { width: 15%; }
.ranking-table th:nth-child(2) { width: 34%; }
.ranking-table th:nth-child(3) { width: 27%; }
.ranking-table th:nth-child(4) { width: 24%; }
.ranking-table tr.top-three { background: #e7d09c; font-weight: 700; }
.ranking-table tr.is-me { outline: 3px solid #b84a33; outline-offset: -3px; background: #ffedc6; }
.ranking-table tr:focus-visible { outline: 3px solid #1f6f97; outline-offset: -3px; }
.ranking-table .ranking-empty { padding: 24px 10px; text-align: center; font-weight: 700; }
.ranking-league img { width: 24px; height: 24px; vertical-align: middle; margin-right: 3px; }
.ranking-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 40px; padding: 8px 0; color: #352619; }
/* an empty board has nothing to detail: no empty band between the filter and the table */
.ranking-detail:empty { display: none; }
.ranking-detail > p { margin: 0; }
.ranking-achievement { display: inline-flex; align-items: center; gap: 4px; }
.ranking-achievement img { width: 26px; height: 26px; object-fit: contain; }
.account-page { max-width: 1120px; margin: 0 auto; gap: 12px; }
.account-page > h1 { margin: 10px 0 2px; }
.account-identity, .account-progress, .account-history, .account-actions, .account-profile { margin: 0; min-width: 0; }
.account-identity h2, .account-progress h2, .account-history h2, .account-actions h2, .account-profile h2 { margin-top: 0; }
.account-coin { display: inline-flex; align-items: center; gap: 5px; }
.account-coin img { width: 30px; height: 30px; object-fit: contain; }
.account-gm-seal { color: #e8c37a; font-weight: 700; }
.account-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.account-stat { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; }
.account-stat strong { font: 700 1.4rem var(--font-display); }
.account-history { display: grid; gap: 14px; }
.account-fights, .account-statement { display: grid; gap: 6px; }
.account-fights h3, .account-statement h3 { margin: 0; }
.account-history-row { display: block; padding: 8px; border-bottom: 1px solid var(--border); color: var(--text); overflow-wrap: anywhere; }
.account-actions, .account-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-actions h2, .account-progress h2 { flex-basis: 100%; margin-bottom: 2px; }
.account-profile-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px; border-left: 4px solid #d8a52f; background: #d8a52f18; }
.account-profile-hint p { flex: 1 1 230px; margin: 0; }
.account-profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-field { display: grid; gap: 5px; min-width: 0; }
.account-field input { width: 100%; min-height: 42px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; }
.account-field input:disabled { color: #999; background: #252832; cursor: help; }
.account-profile-form > small { grid-column: 1 / -1; }
.account-profile-form > .account-email-manage { grid-column: 1 / -1; justify-self: start; } /* E2: the link to the e-mail page of the server */
.account-profile-status { align-self: center; margin: 0; }
.field-error { min-height: 1em; color: #ff9990; }
.achievement-announcement { position: fixed; z-index: 600; inset: 0; display: grid; place-items: center; padding: 18px; background: #090b10c9; animation: achievement-fade-in .25s ease-out both; }
.achievement-announcement-card { position: relative; display: grid; grid-template-columns: 112px 150px minmax(0, 1fr); align-items: center; gap: 16px; width: min(720px, 100%); padding: 28px; border: 2px solid #b98b48; border-radius: 20px; background: linear-gradient(135deg, #272b36, #11141d); box-shadow: 0 18px 70px #000c, inset 0 0 35px #d8b87518; animation: achievement-pop-in .45s cubic-bezier(.2,.8,.25,1.15) both; }
.achievement-mascot { width: 110px; height: 110px; object-fit: contain; }
.achievement-art-frame { position: relative; width: 142px; aspect-ratio: 1; display: grid; place-items: center; }
.achievement-art-frame > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.achievement-art { width: 68%; height: 68%; object-fit: contain; border-radius: 50%; }
.achievement-announcement-copy { min-width: 0; }
.achievement-kicker { color: #e8c37a; font: 700 .9rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.achievement-announcement-copy h2 { overflow-wrap: anywhere; }
.achievement-rarity { color: #c6a0df; }
.achievement-dismiss { grid-column: 2 / 4; justify-self: end; }
@keyframes achievement-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes achievement-pop-in { from { opacity: 0; transform: translateY(30px) scale(.92); } to { opacity: 1; transform: none; } }
@media (min-width: 760px) { .account-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .account-page > h1 { grid-column: 1 / -1; } .account-history { grid-row: span 2; } }
@media (max-width: 600px) {
  .ranking-scroll { padding: 8px 7px; border-width: 15px; border-image-width: 15px; }
  .ranking-board-button { flex: 1 1 calc(50% - 7px); min-width: 0; padding: 7px; font-size: .84rem; }
  .ranking-controls > * { flex: 1 1 42%; max-width: 100%; }
  .ranking-filter { flex-basis: 100% !important; }
  .ranking-table th, .ranking-table td { padding: 7px 3px; font-size: .82rem; }
  .ranking-table th:first-child, .ranking-place { width: 14%; }
  .ranking-table th:nth-child(2) { width: 34%; }
  .ranking-table th:nth-child(3) { width: 30%; }
  .ranking-table th:nth-child(4) { width: 22%; }
  .ranking-league img { width: 18px; height: 18px; }
  .account-profile-form { grid-template-columns: minmax(0, 1fr); }
  .achievement-announcement-card { grid-template-columns: 72px 92px minmax(0, 1fr); gap: 8px; padding: 18px 12px; }
  .achievement-mascot { width: 70px; height: 70px; }
  .achievement-art-frame { width: 88px; }
  .achievement-announcement-copy h2 { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .achievement-announcement, .achievement-announcement-card { animation: none; } }
/* The fighters list (the owner, 01/10/2026): the coin art on the level chips of the Filters and on the seal of a locked card, the
   order selector, and the "+A" / "+B" buttons clear of the card frame on the right. */
.chip-btn .coin-img { width: 1.3em; height: 1.3em; flex: 0 0 auto; object-fit: contain; margin-right: 4px; vertical-align: -0.25em; }
.r-locked-coin .coin-img { width: 1.5em; height: 1.5em; }
#view-wizard .r-adds, #view-wizard .r-locked-coin { margin-right: 8px; }
.roster-order select { min-height: 34px; max-width: 9.5rem; padding: 2px 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: .82rem; }
.wizard-series.is-locked { opacity: .75; }
.wizard-series.is-locked summary { cursor: not-allowed; }
@media (max-width: 600px) { .view-as-control, .game-mode-control { width: 100%; justify-content: space-between; } .view-as-control select, .game-mode-control select { max-width: 65%; } .admin-simulator { flex: 1 1 100%; } .admin-simulator summary { justify-content: space-between; } .admin-simulator-menu { left: 0; right: auto; } }
/* Comanda 100, the Claude's review (01/10/2026): what the captures showed. The "Go to me" button and the hint were dark text on a dark
   button and pale text on the parchment; the links the scripts add are buttons, not default blue links. */
.ranking-controls .btn-small { background: #efe1c5; color: #342719; }
.ranking-controls .btn-small:hover { background: #e4d0a6; }
.ranking-scroll .dim { color: #5a4630; }
.header-account, .header-account:visited, .header-signin, .header-signin:visited, .progress-page a.btn-small, .account-page a.btn-small, .account-page a.btn { color: var(--text); text-decoration: none; }
/* The other pages aligned (the owner, 01/10/2026: "faça isso nas outras paginas se precisarem tb"). Measured in the browser:
   Achievements, Ranking, Inbox and Wisdom are one column with the same gap between the blocks (the league tabs were glued to the
   cards); a link dressed as a button is as tall as a button. */
.progress-page { display: flex; flex-direction: column; }
.progress-page > :not(h1) { margin-top: 0; margin-bottom: 0; }
.progress-page a.btn-small, .account-page a.btn-small { display: inline-flex; align-items: center; justify-content: center; }
/* the ranking: the boards of the chosen tab in one row; the filter, the order and "Go to me" in one row */
.ranking-board-buttons { flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.ranking-board-group { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; }
.ranking-board-group[hidden] { display: none; }
@media (min-width: 601px) {
  .ranking-controls { flex-wrap: nowrap; }
  .ranking-controls .ranking-filter { flex: 1 1 220px; width: auto; }
  .ranking-controls .ranking-sort { flex: 0 0 auto; width: auto; }
  .ranking-controls .btn-small { flex: 0 0 auto; }
}
/* the account: the numbers of the progress across the card (three of the XP, two of the score), the two columns closing at the same
   height, the Wisdom statement in the same rows as the fights */
.account-stat-grid { flex: 1 1 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 2px; }
.account-stat { grid-column: span 2; min-width: 0; }
.account-stat:nth-child(n+4) { grid-column: span 3; }
.account-identity p { margin: 0 0 10px; }
.account-statement p { margin: 0; padding: 8px; border-bottom: 1px solid var(--border); }
.account-history { align-content: start; }
.account-history > a.btn-small { justify-self: start; }
@media (min-width: 760px) { .account-page { align-items: stretch; } }

/* Comanda 103: ranking scroll ornament and alignment pass for the remaining screens. */
.ranking-scroll { position: relative; isolation: isolate; }
.ranking-scroll::before, .ranking-scroll::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ranking-scroll::before {
  background: url("/static/art/ranking-marca-dagua__proposta.webp") center 58% / min(72%, 620px) auto no-repeat;
  opacity: .28; /* the clean cut of comanda 106 carries the watermark at a quarter of the alpha: the same faint drawing as before */
}
.ranking-scroll::after {
  background-image:
    url("/static/art/ranking-cabecalho__proposta.webp"),
    url("/static/art/ranking-runas__proposta.webp"),
    url("/static/art/ranking-runas__proposta.webp"),
    url("/static/art/ranking-vinheta__proposta.webp"),
    url("/static/art/ranking-vinheta__proposta.webp"),
    url("/static/art/ranking-vinheta__proposta.webp"),
    url("/static/art/ranking-vinheta__proposta.webp");
  background-repeat: no-repeat, repeat-y, repeat-y, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center 8px, left 0, right 0, left top, right top, left bottom, right bottom;
  background-size: 100% 58px, 26px 100%, 26px 100%, 76px 76px, 76px 76px, 76px 76px, 76px 76px;
  opacity: .86;
}
.ranking-scroll > * { position: relative; z-index: 1; }
.ranking-scroll > h2:first-child { padding-top: 66px; }
.ranking-table-scroll { background-color: rgba(255, 248, 230, .86); }

/* Equal cards and fixed action rows keep the arena and review steps balanced. */
#view-wizard .wizard-arena-layout { align-items: stretch; }
#view-wizard .wizard-arena-layout > .panel { align-self: stretch; min-width: 0; }
#view-wizard .wizard-lineup { min-height: 0; }
#view-wizard .wizard-arena-options > .field { min-width: 0; }
/* ---- the card of the second step in order, so that it fits without scrolling (the owner, 05/10/2026: "Ajustar tudo no card vertical
   mais organizado"). Nothing left the card: the arena; the rules (mode and distance side by side, their chips in one row); one
   column per side with its formation and its style; the sentence to the coach; the seed beside Reset to defaults ---- */
#view-wizard .wizard-arena-options { gap: 5px; }
#view-wizard .wizard-arena-short { font-size: 0.82rem; line-height: 1.3; }
#view-wizard .wizard-arena-options .wizard-mode { gap: 4px 8px; }
#view-wizard .wizard-arena-options #mode-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; }
#view-wizard .wizard-arena-options #mode-chips .chip { font-size: 0.78rem; padding: 1px 9px; }
#view-wizard .wizard-arena-options .sunlight-option .light-alert:not(.is-urgent) { margin: 2px 0 0; padding: 0; border: 0; font-size: 0.8rem; line-height: 1.3; }
#view-wizard .wizard-arena-options .wizard-formations { gap: 8px; margin: 0; padding-top: 5px; border-top: 1px solid var(--border); }
#view-wizard .wizard-arena-options .wizard-formation { gap: 3px; }
#view-wizard .wizard-formation > .field:has(#style-a) { position: relative; }
#view-wizard .wizard-formation > .field:has(#style-a) .wizard-help { position: absolute; top: 0; right: -28px; }
#view-wizard .wizard-arena-options .wizard-advanced { margin: 0; }
#view-wizard .wizard-arena-options > .advanced-coach { margin: 0; color: var(--text); font-size: 0.82rem; line-height: 1.3; }
#view-wizard .wizard-arena-options .advanced-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 10px; }
#view-wizard .wizard-arena-options .advanced-grid > .field:first-child { grid-column: auto; }
#view-wizard .wizard-arena-options .advanced-grid > #wiz-reset { align-self: end; min-height: 32px; }
#view-wizard .wizard-arena-options .home-row:not(:has(*)) { display: none; }
/* a short window (a 768 px notebook): the fields a little lower, so the last line of the card still fits */
@media (max-height: 800px) { #view-wizard .wizard-arena-options select, #view-wizard .wizard-arena-options input[type="number"] { min-height: 29px; padding-top: 2px; padding-bottom: 2px; } }
#view-wizard .wizard-arena-options > .field select { width: 100%; min-width: 0; }
#view-wizard .wizard-review-sides { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
#view-wizard .wizard-review-sides > .team { min-width: 0; height: 100%; display: flex; flex-direction: column; }
#view-wizard .wizard-review-sides .team-head { min-height: 42px; align-items: center; }
#view-wizard .wizard-review-sides .slots { flex: 1 1 auto; align-content: start; }
#view-wizard .wizard-foot-row > .btn,
#view-wizard .wizard-foot-row > .btn-primary,
#view-wizard .wizard-launch > .btn,
#view-wizard .wizard-launch > .btn-primary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Final fight actions share one width; tables keep a stable column grid inside their own scrollers. */
/* The buttons of the result in two rows (the owner, 12/10/2026: "Pode organizar melhor estes botões aqui? ... Colocar em ordem e
   estilo padrão tb"): the bright plate alone on top, as the NEW FIGHT of the Home, and the others under it in one row of equal
   widths, each in the standard frame. A button that is hidden leaves no hole: the row closes around the ones that show. */
#view-result > .actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; gap: 10px 14px; max-width: 1240px; margin: 14px auto 12px; }
#view-result > .actions > button { min-width: 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
#view-result > .actions > .btn-primary { grid-column: 1 / -1; justify-self: center; width: min(100%, 380px); }
#view-result > .actions > button[hidden] { display: none; }
/* the small line under the buttons: real fights are what makes the fighters' AI better (the owner, 11/10/2026) */
/* the way to the Arena's networks (the owner, 11/10/2026): on the privacy page and on the account page; one Instagram per language */
.social-links { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 10px 0 0; }
:root:lang(pt-BR) .social-en, :root:not(:lang(pt-BR)) .social-pt { display: none; }
.result-smarter { margin: 2px auto 12px; max-width: 62ch; text-align: center; font-size: 0.86rem; color: var(--dim); text-wrap: balance; }
#view-series .table-wrap, #view-admin .admin-table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; }
#view-series .stats { min-width: 620px; table-layout: fixed; }
#view-series .stats th, #view-series .stats td { overflow-wrap: anywhere; }
/* the names of the columns break into lines: on one line they ran over each other ("KNOCKOUT taken", "Standing at the end") */
#view-series .stats th { white-space: normal; vertical-align: bottom; }
#view-admin table { table-layout: fixed; }
#view-admin th, #view-admin td { overflow-wrap: anywhere; }
#view-admin .admin-grid { align-items: stretch; }
#view-admin .admin-grid > .panel { display: flex; flex-direction: column; }
#view-admin .admin-grid > .panel > :last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .ranking-scroll::after {
    background-image: url("/static/art/ranking-cabecalho__proposta.webp");
    background-position: center 4px;
    background-size: 100% 42px;
  }
  .ranking-scroll::before { opacity: .045; }
  .ranking-scroll > h2:first-child { padding-top: 46px; }
  #view-wizard .wizard-review-sides { grid-template-columns: minmax(0, 1fr); }
  #view-wizard .wizard-review-sides > .team { min-height: 0; }
  #view-result > .actions > button { min-height: 44px; padding: 8px 10px; }
}
/* between the wide screen (one row of four) and the phone (one column), two by two: a row of three and one left over read as a mistake */
@media (max-width: 1340px) {
  #view-result > .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
}
@media (max-width: 480px) {
  #view-result > .actions { grid-template-columns: minmax(0, 1fr); }
}

/* comanda 162 · o anel de vida, as áreas e o ícone */
.token-life-ring { display: none; }
.map .token-life-ring { position: absolute; inset: 0; z-index: 4; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.token-life-ring circle { fill: none; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-linecap: round; }
.token-life-track { stroke: var(--side-a); stroke-opacity: .25; }
.token.side-b .token-life-track { stroke: var(--side-b); }
.token-life-current { stroke: var(--side-a); stroke-dashoffset: 0; transition: stroke-dashoffset 240ms ease, stroke 180ms ease; }
.token.side-b .token-life-current { stroke: var(--side-b); }
.token.bloodied .token-life-current { stroke: var(--hp-yellow); }
.token.hp-zero .token-life-current { stroke: #ff554c; stroke-dashoffset: 282.743 !important; }
.token-life-temp { stroke: #9de5ff; stroke-dashoffset: 282.743; transition: stroke-dashoffset 240ms ease; }
.area-hover-hint { position: absolute; z-index: 8; max-width: min(260px, calc(100% - 8px)); padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; background: rgba(14, 16, 22, .94); color: var(--text); font-size: .76rem; line-height: 1.2; box-shadow: 0 3px 10px #0009; pointer-events: none; }
.area-hover-hint[hidden] { display: none; }
.areas .zone .area-tint { pointer-events: visiblePainted; }
.wizard-review-name-with-face { display: flex; align-items: center; gap: 7px; }
.wizard-review-face { display: inline-flex; flex: 0 0 30px; width: 30px; height: 30px; overflow: hidden; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: #11141c; }
.wizard-review-face-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.wizard-review-face-image.is-type-icon { width: 19px; height: 19px; object-fit: contain; }
.map.no-anim .token-life-ring circle { transition: none; }
@media (prefers-reduced-motion: reduce) { .token-life-ring circle { transition: none; } }
/* The two doors of the header, the account and the admin panel, with one look (the owner, 01/10/2026: "Achei o botão "Admin panel"
   feio", "Gostaria de um incremento visual o apdrao desse botao tb"): a pill with the bone border of the kit, lit on hover; the
   admin's in the red of the seal. They are links: no default blue, no underline. */
.header-account, .admin-link, .header-signout, .header-signin { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border: 1px solid #8a6f43; border-radius: 999px; background: linear-gradient(180deg, #2c3140, #1a1632); color: var(--bone); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0006; transition: border-color .15s, box-shadow .15s, transform .15s; }
.header-account:visited, .admin-link:visited, .header-signout:visited, .header-signin:visited { color: var(--bone); }
.header-account:hover, .admin-link:hover, .header-signout:hover, .header-account:focus-visible, .admin-link:focus-visible, .header-signout:focus-visible { border-color: #d9b778; box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 2px #d9b77840, 0 2px 8px #0008; transform: translateY(-1px); }
.admin-link { border-color: #a4503f; background: linear-gradient(180deg, #3a2622, #201615); }
.admin-link:hover, .admin-link:focus-visible { border-color: #e08a6c; box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 2px #e08a6c40, 0 2px 8px #0008; }
@media (prefers-reduced-motion: reduce) { .header-account, .admin-link, .header-signout { transition: none; } .header-account:hover, .admin-link:hover, .header-signout:hover { transform: none; } }
/* the tabs of the admin panel clear of the card under them (the owner, 01/10/2026: "botoes apertados e ecostando no card, n precisa
   disso, pode ser mais afastado") */
.admin-feedback-tabs { gap: 10px; margin: 6px 0 18px; }
.admin-feedback-tabs .chip-btn { min-height: 40px; padding: 6px 16px; }
/* The card "Leagues" of the account page (the owner, 01/10/2026: "deveria aparecer qual liga pertence no momento. E explicar o q tem
   em cada liga de novo"): one row per league, the account's own lit, the ones above saying what each adds. */
.account-leagues { grid-column: 1 / -1; margin: 0; min-width: 0; }
.account-leagues h2 { margin-top: 0; }
.account-league-list { display: grid; gap: 8px; margin: 8px 0; }
.account-league { display: grid; grid-template-columns: minmax(190px, auto) minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; }
.account-league p { margin: 0; min-width: 0; }
.account-league-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; }
.account-league-tag { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--dim); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.account-league.current { border-color: #d9b778; box-shadow: inset 4px 0 #d9b778; background: #d9b7780f; }
.account-league.current .account-league-tag { border-color: #d9b778; color: #d9b778; }
.account-league.included p { color: var(--dim); }
.account-league.locked { border-style: dashed; }
@media (max-width: 640px) { .account-league { grid-template-columns: minmax(0, 1fr); } }
/* the emoji of the public name on the account page: the list, the checkbox "no emoji" and how the name will show */
.account-emoji { grid-column: 1 / -1; }
.account-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.account-emoji-pick { min-width: 0; min-height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: transform .12s ease, filter .25s ease, opacity .25s ease; }
.account-emoji-pick:hover:not(:disabled) { transform: translateY(-2px) scale(1.08); border-color: #d9b778; }
.account-emoji-pick[aria-checked="true"] { border-color: #d9b778; background: #d9b7781f; box-shadow: 0 0 0 2px #d9b77855; }
.account-emoji-pick:disabled { opacity: .35; filter: grayscale(1); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .account-emoji-pick { transition: none; } }
.account-check { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.account-check input { width: auto; min-height: 0; padding: 0; accent-color: var(--bone); }
.account-name-preview:empty, .account-emoji-sulk:empty { display: none; }
.account-emoji-sulk { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--bone); font-size: .9rem; font-style: italic; animation: emoji-sulk .5s ease-out; }
.account-emoji-sulk-face { flex: none; font-size: 2rem; font-style: normal; line-height: 1; }
@keyframes emoji-sulk { 0% { opacity: 0; transform: translateY(-4px) rotate(-1.5deg); } 60% { transform: translateY(1px) rotate(.8deg); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .account-emoji-sulk { animation: none; } }
/* The suggestion box of the account page (ABX X-6): a free message to the Arena; the first one is worth 1 Wisdom Point */
.account-suggestion { grid-column: 1 / -1; margin: 0; min-width: 0; }
.account-suggestion h2 { margin-top: 0; }
.account-suggestion textarea { display: block; width: 100%; margin: 8px 0 2px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; resize: vertical; }
.account-suggestion textarea:disabled { opacity: .5; cursor: not-allowed; }
.account-suggestion-point { margin: 6px 0; color: #d9b778; font-weight: 600; }
.account-suggestion-status:empty { display: none; }
.account-suggestion-list { display: grid; gap: 6px; margin-top: 10px; }
.account-suggestion-list h3 { margin: 4px 0 0; }
.account-suggestion-item { padding: 6px 10px; border-left: 3px solid var(--border); }
.account-suggestion-item p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-feedback-card p { white-space: pre-wrap; overflow-wrap: anywhere; }
/* ABX X-5: the flag on a line of the fight's log (one button that follows the pointer), the flagged line, and the flag in the feedback form */
.log-flag { float: right; margin: 0 0 0 6px; padding: 0 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); font-size: .82rem; line-height: 1.5; cursor: pointer; opacity: .7; }
.log-flag:hover, .log-flag:focus-visible, .log-flag[aria-pressed="true"] { opacity: 1; border-color: #e2574c; }
.log li.flagged { border-left-color: #e2574c; background: rgba(226, 87, 76, .13); }
.log-flag-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; padding: 6px 10px; border-left: 3px solid #e2574c; background: rgba(226, 87, 76, .1); border-radius: 0 8px 8px 0; }
.feedback-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; padding: 6px 10px; border-left: 3px solid #e2574c; background: rgba(226, 87, 76, .1); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.feedback-flag[hidden], .log-flag-note[hidden] { display: none; }
/* Refer a friend (ACB): the card of the account page and the admin's tab */
.account-referral { grid-column: 1 / -1; margin: 0; min-width: 0; }
.account-referral h2 { margin-top: 0; }
.account-referral-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.account-referral-row input { flex: 1 1 220px; min-width: 0; min-height: 42px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; }
.account-referral-row input:disabled { opacity: .5; cursor: not-allowed; }
.admin-verdicts input { min-height: 34px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; }

/* ACH: the Fighter of the Week, a notice pinned on the tavern board beside the seal of The Rules. On a phone it is the face alone. */
.home-weekly { position: relative; flex: 0 0 auto; }
.home-weekly[hidden] { display: none; }
#view-home .home-weekly-button { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; width: 56px; min-width: 44px; min-height: 56px; margin: 0; padding: 0; border: 0; border-image: none; border-radius: 50%; background: none; box-shadow: none; color: #2c241b; font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; }
.home-weekly-button:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
.home-weekly-face { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border: 2px solid var(--bronze-line); border-radius: 50%; background: #15112a; color: var(--text); font-size: 1.6rem; line-height: 1; }
.home-weekly-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-weekly-tag, .home-weekly-name { display: none; }
.home-weekly-pin { position: absolute; z-index: 1; top: -5px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd98a, #b0793a 60%, #6b4a1e); box-shadow: 0 2px 3px #0009; }
.home-weekly-tip { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--sand); border-radius: 10px; background: #15112a; color: var(--text); box-shadow: 0 10px 30px #000b; line-height: 1.35; text-align: left; }
.home-weekly-tip[hidden] { display: none; }
.home-weekly-tip strong { display: block; color: var(--text); }
.home-weekly-tip p { margin: 6px 0; }
.home-weekly-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.home-weekly-fighter { font-weight: 800; font-size: 1.05rem; }
.home-weekly-stats { color: var(--dim); font-variant-numeric: tabular-nums; }
@media (min-width: 721px) {
  /* the worn parchment of the identity (54-AV-A; the owner, 05/10/2026: "algo mais como uma pergaminho estilizado para essa solução, algo
     mais gasto no papel velho, mas nao pesado"): the painting brings its own bronze tack, so the CSS pin rests here */
  #view-home .home-weekly-button { width: 140px; min-height: 202px; padding: 34px 16px 24px; border: 0; border-image: none; border-radius: 0; background: url("/static/art/aviso__lutador-semana.webp") center / 100% 100% no-repeat; box-shadow: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); transform: rotate(-2.5deg); transition: transform 0.15s ease; }
  #view-home .home-weekly-button:hover, #view-home .home-weekly-button:focus-visible { transform: rotate(0deg) scale(1.03); }
  .home-weekly-face { width: 72px; height: 72px; }
  .home-weekly-tag { display: block; color: #6b4a1e; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
  .home-weekly-name { display: block; color: #2c241b; font-size: 0.92rem; font-weight: 800; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
  .home-weekly-pin { display: none; }
}
@media (max-width: 720px) { .home-weekly-tip { right: -56px; } #view-home .home-weekly-button { width: 48px; min-height: 48px; } .home-weekly-face { width: 48px; height: 48px; } }
/* the stage ("Palco", the arrangement the owner kept on 05/10/2026) on a wide screen. Asked where the fight card stands, he chose "À
   esquerda, debaixo do nome": the name and, under it, the card on the left; the emblems on the right, centred on the banner's height.
   The emblems have a column of their own, so nothing stands over the card. */
@media (min-width: 1024px) {
  /* the stage (the owner, 05/10/2026, night): the card on the left; the d20 crest beside it, with room; the notice of the Fighter of the
     Week at the far end. The numbers of the Arena and the line of the game are back above the card (the owner, 06/10/2026: "devem ficar
     acima do botão NEW FIGHT outra vez"; and, inside the card, "Infos, botões, NEW FIGHT": Achievements and Ranking, then NEW FIGHT) */
  .home-hero, .home-hero.has-scene:not(.art-off) { display: grid; grid-template-columns: minmax(0, 640px) auto minmax(0, 1fr); grid-template-areas: "text text weekly" "card crest weekly"; align-items: center; gap: 10px 36px; padding: 16px 20px; }
  .home-hero-text { grid-area: text; }
  .home-fight-card { grid-area: card; }
  .home-hero > .home-emblems { display: contents; }
  .home-emblems > .home-crest { grid-area: crest; position: relative; z-index: 1; }
  .home-emblems > .home-weekly { grid-area: weekly; justify-self: end; position: relative; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { #view-home .home-weekly-button { transition: none; } }
.badge.weekly { border-color: var(--sand-2); color: var(--bone); }
.admin-weekly-pane h3 { margin: 14px 0 4px; font-size: 1rem; }
.admin-weekly-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.admin-weekly-face { width: 36px; height: 36px; border: 1px solid var(--bronze-line); border-radius: 50%; object-fit: cover; }
.admin-weekly-pane select { min-height: 34px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); font: inherit; }

/* The report of a fight (report.js; the owner, 06/10/2026: "a tela final fica mais dedica para a 📊 Statistics [...] Quero essa área bem
   mais enriquecida visualmente e tb de conteudo"): the facts and the downloads, the MVP, the table with the tokens, one line per
   round; and the collaboration page with the chat of the combat. Bronze for the MVP: gold stays with the d20, the Critical Hit
   and the victory. */
.stats-facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 4px 0 12px; }
.stats-facts .chips { margin: 0; }
.stats-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.stats-mvp { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--bronze-line); border-left: 4px solid var(--side-a); border-radius: 10px; background: linear-gradient(90deg, rgba(208, 138, 69, 0.16), rgba(208, 138, 69, 0) 70%); }
.stats-mvp.side-b { border-left-color: var(--side-b); }
.stats-mvp-tag { margin-right: 10px; color: var(--bronze); font-weight: 800; letter-spacing: 0.06em; }
.stats-mvp-name { font-size: 1.15rem; }
.stats-mvp .chips { margin: 6px 0 0; }
.stats-token { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; border: 2px solid var(--side-a); border-radius: 50%; background: var(--panel-2); font-size: 0.78rem; font-weight: 800; }
.stats-token.side-b { border-color: var(--side-b); }
.stats-token img { width: 100%; height: 100%; object-fit: cover; }
.stats-mvp .stats-token { width: 56px; height: 56px; }
.stats-mvp .stats-token { animation: stats-mvp-pulse 2.4s ease-in-out infinite; }
@keyframes stats-mvp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(208, 138, 69, 0); } 50% { box-shadow: 0 0 0 7px rgba(208, 138, 69, 0.3); } }
@media (prefers-reduced-motion: reduce) { .stats-mvp .stats-token { animation: none; } }
.stats-fighter { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.stats-fighter:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; border-radius: 8px; }
.stats-fighter-words { display: flex; flex-direction: column; min-width: 0; }
.stats-fighter-name { font-weight: 700; }
.stats-fighter-who { color: var(--dim); font-size: 0.8rem; white-space: nowrap; }
.stats.rich td.name { min-width: 250px; }
.stats.rich tr.is-down .stats-token img { filter: grayscale(1) brightness(0.7); }
.stats.rich tr.is-down .stats-fighter-name { color: var(--dim); }
.stats.rich tr.is-mvp td { background: rgba(208, 138, 69, 0.08); }
.stats-hp { display: block; min-width: 70px; height: 4px; margin-top: 3px; overflow: hidden; border-radius: 2px; background: rgba(241, 237, 255, 0.12); }
.stats-hp i { display: block; height: 100%; background: var(--hp-green); }
.stats-rounds-box { margin-top: 16px; }
.stats-rounds-box h3 { margin: 0 0 2px; font-size: 1rem; }
.stats-rounds-box > p { margin: 0; }
.stats-rounds { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.stats-rounds summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); cursor: pointer; list-style: none; }
.stats-rounds summary::-webkit-details-marker, .collab-chat-toggle::-webkit-details-marker { display: none; }
.stats-rounds summary:focus-visible, .collab-chat-toggle:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.stats-rounds details[open] > summary { border-color: var(--bone); }
.stats-round-n { min-width: 2.4em; font-variant-numeric: tabular-nums; }
.stats-rounds .chip.side-a { border-color: var(--side-a); }
.stats-rounds .chip.side-b { border-color: var(--side-b); }
.stats-rounds .chip.down { border-color: var(--hp-red); }
.stats-round-lines, .collab-log { margin: 6px 0 4px; padding: 0 0 0 10px; border-left: 2px solid var(--border); font-size: 0.88rem; list-style: none; }
.stats-round-lines li, .collab-log li { padding: 2px 6px; overflow-wrap: anywhere; }
.stats-round-lines li.turn, .collab-log li.turn { margin-top: 6px; font-weight: 800; }
.stats-round-lines li.turn.side-a, .collab-log li.turn.side-a { border-left: 3px solid var(--side-a); }
.stats-round-lines li.turn.side-b, .collab-log li.turn.side-b { border-left: 3px solid var(--side-b); }
.stats-round-lines li.sub, .collab-log li.sub { padding-left: 24px; color: var(--dim); }
.stats-round-lines li.gm, .collab-log li.gm { font-style: italic; }
.collab-page { width: min(980px, 100%); margin: 0 auto; }
.collab-head h1 { margin: 6px 0 4px; }
.collab-lead { max-width: 72ch; margin: 0 0 8px; }
.collab-head .chips { margin: 0 0 10px; }
.collab-page > .actions { justify-content: flex-start; margin: 0 0 12px; }
.collab-wisdom { margin: 4px 0 12px; }
/* the page already says its name: the panel does not say it again */
.collab-page .fight-feedback > h2 { display: none; }
.collab-page .fight-feedback > h2 + p { margin-top: 0; }
.collab-chat h2 { margin-top: 0; }
.collab-chat-toggle { display: inline-flex; cursor: pointer; list-style: none; }
.collab-log { max-height: 62vh; overflow-y: auto; }
.collab-log li.collab-round { margin-top: 10px; border-bottom: 1px solid var(--border); color: var(--bronze); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.collab-log li[data-event-index] { border-left: 3px solid transparent; cursor: pointer; }
.collab-log li.flagged { border-left-color: #e2574c; background: rgba(226, 87, 76, 0.13); }

/* ---- the fighter sheet of 08/10/2026 (static/sheets.js): one long page, groups that fold, buttons that open their text ---- */
.inspect-drawer.fn-sheet { right: 14px; top: 14px; bottom: 14px; width: min(460px, 40vw); padding: 0 20px 24px; border: 1px solid var(--bronze-line); border-radius: 18px; background: linear-gradient(155deg, #211a3c, #151126 34%, #110e21 100%); scrollbar-gutter: stable; }
@media (min-width: 900px) {
  .fight-view.inspecting { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); }
  .fight-view.inspecting .inspect-drawer.fn-sheet { margin: 0 6px 0 0; max-height: calc(100vh - 110px); }
}
.fn-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 -20px 18px; padding: 14px 72px 12px 20px; border-bottom: 1px solid var(--bronze-line); background: linear-gradient(#211a3c 76%, #211a3cf2); box-shadow: 0 6px 14px #08061180; }
.fn-top h2 { margin: 0; margin-right: auto; font-size: 1rem; letter-spacing: 0.03em; white-space: nowrap; }
.fn-top .sheet-close { float: none; position: absolute; top: 8px; right: 14px; min-width: 44px; min-height: 44px; }
.fn-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.fn-tools .chip-btn { min-height: 36px; padding: 3px 11px; border-color: var(--bronze-line); font-size: 0.78rem; }
.fn-page { display: grid; gap: 18px; padding: 0 0 10px; border: 0; }
.fn-page + .fn-page { margin-top: 24px; padding-top: 20px; border-top: 2px dashed var(--border); }
.fn-emoji { flex: none; font-size: 1.05em; line-height: 1; }
.fn-head { position: relative; display: flex; align-items: flex-end; gap: 12px; min-height: 112px; padding: 14px 16px; border-radius: 15px; border: 1px solid var(--bronze-line); background: linear-gradient(135deg, #2a234c, #17132b 72%); box-shadow: inset 0 1px #ffffff12, 0 6px 18px #09071380; overflow: hidden; }
.fn-head.with-art { min-height: 214px; }
.fn-head.with-art .fn-who { max-width: 54%; padding: 10px 12px; border: 1px solid #b0793a; border-left: 3px solid #d08a45; border-radius: 10px; background: linear-gradient(120deg, #211a3cf5, #211a3ce8); box-shadow: 0 5px 14px #080611a8; }
.fn-art { position: absolute; inset: 0; }
.fn-art img { position: absolute; right: 0; top: 0; width: 58%; height: 100%; object-fit: cover; object-position: 50% 10%; display: block; -webkit-mask-image: linear-gradient(90deg, transparent, #000 27%); mask-image: linear-gradient(90deg, transparent, #000 27%); }
.fn-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #17132b 31%, transparent 66%), linear-gradient(180deg, #15112a00 40%, #15112ad9 100%); pointer-events: none; }
.fn-who { position: relative; z-index: 1; display: grid; gap: 4px; min-width: 0; }
.fn-name { margin: 0; font-size: 1.3rem; line-height: 1.15; text-shadow: 0 2px 6px #000; overflow-wrap: anywhere; }
.fn-sub { margin: 0; color: var(--text); opacity: 0.92; font-size: 0.86rem; text-shadow: 0 1px 4px #000; }
.fn-seal { justify-self: start; padding: 4px 10px; border-radius: 7px 3px 7px 3px; border: 1px solid #8b6b46; background: linear-gradient(135deg, #29213d, #171328); box-shadow: inset 0 1px #ffffff12; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.025em; color: #dfd9ee; }
.fn-seal.ok { border-color: #a67b49; color: #f1dfbd; }
.fn-pin { justify-self: start; min-height: 44px; padding: 3px 10px; font-size: 0.76rem; }
.fn-vitals { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: linear-gradient(120deg, #211a3c, #19152f); border: 1px solid var(--bronze-line); box-shadow: inset 0 1px #ffffff0b; }
.fn-hp { display: flex; align-items: center; gap: 8px; }
.fn-hp b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-bar { flex: 1; min-width: 60px; height: 10px; border-radius: 999px; background: #0e0b1e; border: 1px solid #ffffff40; overflow: hidden; }
.fn-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7c6cf0, #b8a6ff); }
.fn-bar.hp { height: 16px; border-color: #ffffff55; }
.fn-bar.hp i { background: linear-gradient(90deg, #219653, #55d579); }
.fn-bar.hp.low i { background: linear-gradient(90deg, #a86b10, #edc24a); }
.fn-bar.hp.zero i { background: linear-gradient(90deg, #a92c35, #e5484d); }
.fn-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 7px; }
.fn-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 34px; padding: 4px 8px; border-radius: 8px; background: #17132b; border: 1px solid var(--border); font-size: 0.82rem; }
.fn-chip small { color: #c8c2e2; }
.fn-chip.bad { border-color: #e8866a; color: #ffd0c2; }
.fn-chip.focus { border-color: #8fb7ff; color: #d5e4ff; }
.fn-sec { border-radius: 12px; border: 1px solid #484065; background: linear-gradient(120deg, #17132b, #151126); box-shadow: 0 3px 9px #09071366; }
.fn-sec[open] { border-color: var(--bronze-line); background: linear-gradient(120deg, #1c1732, #151126); }
.fn-sec-head { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 850; }
.fn-sec-head::-webkit-details-marker { display: none; }
.fn-sec-head::after { content: "▾"; display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border: 1px solid #484065; border-radius: 50%; color: #d7d0eb; transition: transform 0.15s, background 0.15s; }
.fn-sec[open] > .fn-sec-head::after { transform: rotate(180deg); background: #33295c; }
.fn-sec-title { min-width: 0; }
.fn-count { padding: 2px 8px; border-radius: 999px; background: #2a2445; color: #c8c2e2; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fn-sec-body { display: grid; gap: 9px; padding: 4px 14px 15px; }
.fn-level { margin: 6px 0 0; font-size: 0.8rem; letter-spacing: 0.03em; color: var(--dim); text-transform: uppercase; }
.fn-dim { margin: 0; color: #c4bedc; font-size: 0.84rem; }
.fn-grid { display: grid; gap: 6px; }
.fn-item { border-radius: 12px; }
.fn-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 7px 11px; border-radius: 9px; border: 1px solid #4b426a; background: linear-gradient(115deg, #282245, #211c39); color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.12s; }
.fn-btn:hover { border-color: var(--bronze); background: linear-gradient(115deg, #342a4d, #28213f); }
.fn-btn.plain { cursor: default; font-weight: 600; background: #1b1738; color: #d4cee5; }
.fn-btn.plain:hover { border-color: var(--border); }
.fn-btn:not(.plain)::after { content: "＋"; margin-left: 6px; color: var(--dim); font-weight: 400; }
.fn-item.open > .fn-btn { border-color: var(--bone); border-radius: 12px 12px 0 0; }
.fn-item.open > .fn-btn::after { content: "－"; }
.fn-label { min-width: 0; overflow-wrap: anywhere; }
.fn-meta { margin-left: auto; color: #c8c2e2; font-size: 0.8rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-item.spent > .fn-btn { opacity: 0.68; color: #cbc5dc; }
.fn-text { padding: 10px 13px 12px; border: 1px solid var(--bronze-line); border-top: 0; border-radius: 0 0 9px 9px; background: #17132b; color: var(--text); font-size: 0.86rem; }
.fn-text p { margin: 0 0 5px; }
.fn-text p:last-child { margin: 0; }
.fn-res { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.fn-res-name { min-width: 0; flex: 1 1 40%; font-size: 0.86rem; overflow-wrap: anywhere; }
.fn-gauge { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 34%; justify-content: flex-end; }
.fn-gauge .fn-bar { flex: 1; }
.fn-pip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px dashed #c0b5df; background: transparent; transform: rotate(45deg); }
.fn-pip.on { border-style: solid; border-color: #d9c4ff; background: #9b5de5; box-shadow: inset 0 0 0 2px #251b3c; }
.fn-res-num { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.84rem; }
.fn-res.empty { opacity: 0.72; color: #c8c2dc; }
.fn-abilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fn-ability { display: grid; justify-items: center; gap: 3px; min-height: 78px; padding: 9px 4px; border-radius: 10px; background: linear-gradient(145deg, #292342, #211c38); border: 1px solid #51476d; box-shadow: inset 0 1px #ffffff0c; }
.fn-ability small { color: #d1cbe2; font-size: 0.7rem; letter-spacing: 0.06em; }
.fn-ability b { font-size: 1.35rem; line-height: 1; }
.fn-ability i { font-style: normal; color: #d1cbe2; font-size: 0.82rem; }
.fn-line { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; font-size: 0.85rem; }
.fn-foot { display: flex; align-items: center; gap: 12px; min-height: 76px; margin-top: 4px; padding: 9px 12px; border-top: 1px solid var(--bronze-line); border-radius: 10px; background: linear-gradient(90deg, #211a3c, #17132b); color: #d1cbe2; font-size: 0.78rem; }
.fn-foot-seal { margin-left: auto; }
.fn-foot-seal.off { filter: grayscale(1); opacity: 0.5; }
.sheet-full-detail.fn-sheet { display: grid; gap: 10px; padding-top: 12px; }
.fn-page.picker { gap: 10px; }
@media (max-width: 899px) {
  .inspect-drawer.fn-sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(82dvh, 720px); padding: 0 14px 14px; border-radius: 18px 18px 0 0; }
  .fn-top { margin: 0 -14px 14px; padding: 12px 14px 10px; }
}

/* the mini sheet: the mouse over a fighter anywhere, without pausing (static/sheets.js) */
.inspect-peek.fm-card { width: 300px; max-width: 92vw; max-height: none; overflow: hidden; display: grid; gap: 7px; margin: 0; padding: 12px; border-radius: 13px; border: 2px solid var(--bronze-line); background: #17132b; color: #f1edff; box-shadow: 0 14px 34px #000e, inset 0 1px #ffffff12; pointer-events: none; }
.inspect-peek.fm-card.fm-a { border-color: var(--side-a); }
.inspect-peek.fm-card.fm-b { border-color: var(--side-b); }
.inspect-peek.fm-card.fm-enter { animation: fm-sheet-enter 110ms ease-out both; }
@keyframes fm-sheet-enter { from { opacity: 0; transform: translateY(5px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.fm-head { display: flex; align-items: center; gap: 10px; }
.fm-face { flex: none; border-radius: 50%; border: 2px solid var(--border); background: #15112a; object-fit: cover; }
.fm-who { display: grid; min-width: 0; }
.fm-name { font-size: 1.02rem; line-height: 1.15; overflow-wrap: anywhere; }
.fm-sub { color: #d0cbe1; font-size: 0.78rem; }
.fm-seal { margin-left: auto; font-size: 1.1rem; }
.fm-list { display: grid; gap: 3px; }
.fm-row { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.85rem; }
.fm-left { margin: 0; font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: pre-wrap; }
.fm-hint { margin: 0; padding-top: 5px; border-top: 1px dashed #51476d; color: #c2bbd8; font-size: 0.7rem; }
.fm-note { margin: 0; padding: 5px 8px; border-radius: 8px; background: #ffffff0b; color: #d2cce2; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.fn-story-box { border-color: var(--bronze-line); overflow: hidden; }
/* The hero's own familiar on the sheet (ABV D-14), with the finish of the Codex (comanda 142, 09/10/2026): a brother of the story box, a little warmer */
.fn-familiar-group { width: min(100%, 720px); margin: 0 auto; overflow: hidden; border-color: var(--bronze-line); background: linear-gradient(135deg, #211a3c, #151126); box-shadow: 0 4px 14px #09071388, inset 0 1px #e4d2a326; }
.fn-familiar-head { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 9px 15px; border-bottom: 1px solid #55456e; background: linear-gradient(110deg, #29203e, #19152e); }
.fn-familiar-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid #8b744e; border-radius: 50%; background: #211b33; color: #f1ddb2; font-size: 0.95rem; }
.fn-familiar-title { margin: 0; color: #f4edff; font-size: 0.98rem; font-weight: 850; letter-spacing: 0.025em; }
.fn-familiar { display: grid; grid-template-columns: clamp(104px, 32%, 136px) minmax(0, 1fr); align-items: center; gap: clamp(12px, 3vw, 22px); width: min(100%, 540px); margin: 0 auto; padding: 15px clamp(10px, 3vw, 22px) 18px; }
.fn-familiar-art { position: relative; display: grid; place-items: end center; width: 100%; aspect-ratio: 2 / 3; isolation: isolate; }
.fn-familiar-art::before { position: absolute; z-index: -1; inset: 12% -8% 11%; border-radius: 50%; background: radial-gradient(ellipse, #d6b87530 0%, #a58dd526 43%, transparent 75%); content: ""; filter: blur(8px); }
.fn-familiar-art::after { position: absolute; z-index: -1; bottom: 3%; left: 16%; width: 68%; height: 8%; border-radius: 50%; background: #08060d99; content: ""; filter: blur(7px); }
.fn-familiar-art img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 5px 4px #08060d80); transform-origin: 50% 88%; }
.fn-familiar-who { min-width: 0; max-width: 50ch; }
.fn-familiar-name { display: inline-block; max-width: 100%; margin: 0; padding: 6px 10px; border: 1px solid #9c8456; border-radius: 7px; background: linear-gradient(135deg, #4a3a2d, #34283a); box-shadow: 0 2px 6px #08060c66; color: #fff2d5; font-size: 1.08rem; line-height: 1.25; overflow-wrap: anywhere; }
.fn-familiar-form { display: table; max-width: 100%; margin: 7px 0 0; padding: 3px 9px; border: 1px solid #665579; border-radius: 999px; background: #19162c; color: #e2d9f1; font-size: 0.8rem; line-height: 1.35; overflow-wrap: anywhere; }
.fn-familiar-line { max-width: 50ch; margin: 10px 0 0; color: #e5def2; font-size: 0.88rem; line-height: 1.55; overflow-wrap: anywhere; text-wrap: pretty; }
.fn-familiar-group:hover, .fn-familiar-group:focus-visible { border-color: #d3b77e; }
.fn-familiar-group:focus-visible { outline: 2px solid #f1edff; outline-offset: 3px; }
.fn-familiar-group:hover .fn-familiar-art img, .fn-familiar-group:focus-visible .fn-familiar-art img { animation: fn-familiar-sway 1.7s ease-in-out infinite; }
@keyframes fn-familiar-sway { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-3px); } }
@media (max-width: 480px) {
  .fn-familiar { gap: 12px; padding: 13px 10px 15px; }
  .fn-familiar-name { font-size: 1rem; }
}
@media (max-width: 340px) {
  .fn-familiar { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
  .fn-familiar-art { width: min(42vw, 126px); }
  .fn-familiar-who { width: 100%; text-align: center; }
  .fn-familiar-form { margin-right: auto; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fn-familiar-group:hover .fn-familiar-art img, .fn-familiar-group:focus-visible .fn-familiar-art img { animation: none; }
}
.fn-story-box > .fn-sec-head { background: linear-gradient(110deg, #211a3c, #17132b); }
.fn-story-box[open] > .fn-sec-head { border-bottom: 1px solid #55456e; }
.fn-story { margin: 0; padding: 16px 17px; border: 1px solid #51476d; border-radius: 8px; background: linear-gradient(135deg, #211a3c, #17132b); color: #f1edff; font-size: 0.95rem; line-height: 1.65; font-style: italic; text-wrap: pretty; }
.fn-story-box .fn-sec-body { padding: 10px; }
.fn-story-soon { display: flex; align-items: center; gap: 12px; padding: 4px 6px; }
.fn-story-soon::before { content: ""; flex: none; width: 72px; height: 72px; background: url("/static/art/tomo__escrevendo.webp") center / contain no-repeat; }
.fn-story-soon p { margin: 0; }
.fn-top button:focus-visible, .fn-btn:focus-visible, .fn-sec-head:focus-visible, .fn-pin:focus-visible { outline: 3px solid #f1edff; outline-offset: 3px; box-shadow: 0 0 0 5px #5b477a; }
.fn-chip, .fn-meta, .fn-res-num { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .inspect-drawer.fn-sheet { position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: 100dvh; padding: 0 14px max(18px, env(safe-area-inset-bottom)); border-radius: 0; border: 0; border-top: 3px solid var(--bronze-line); }
  .fn-top { top: 0; margin: 0 -14px 14px; padding: max(10px, env(safe-area-inset-top)) 72px 10px 14px; background: #211a3c; }
  .fn-top .sheet-close { position: fixed; top: max(8px, env(safe-area-inset-top)); right: 12px; z-index: 5; }
  .fn-top .fn-tools .chip-btn { min-height: 44px; }
  .fn-head.with-art { min-height: 180px; }
  .fn-head.with-art .fn-who { max-width: 62%; }
  .fn-abilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .inspect-peek.fm-card.fm-enter { animation: none; }
  .fn-sec-head::after, .fn-btn { transition: none; }
}
.fn-foot-tome { width: 56px; height: 56px; object-fit: contain; flex: none; }
[data-sheet-click], #view-fight .who-name[data-fighter-id], #view-fight .who-chip[data-fighter-id] { cursor: pointer; }

/* ==== PROTOTYPE (ACS, piece 16; branch claude/pedido-de-conta): the door of the account request. The owner, 09/10/2026: quick and playful,
   with emojis and mascots, a professional look that gives confidence, the mascots thanking, lively, without overdoing it. The finish is
   the Codex's. ==== */
.join-page { gap: clamp(16px, 2.2vw, 24px); padding: clamp(22px, 4vw, 44px) clamp(16px, 3vw, 32px) 44px; color: #f5eddd; }
.join-page .panel { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 2px solid #997344; border-radius: 16px; background: radial-gradient(ellipse at 12% 0, rgba(175, 126, 66, 0.12), transparent 48%), linear-gradient(145deg, rgba(73, 50, 29, 0.42), transparent 58%), #211a15; box-shadow: inset 0 0 0 4px rgba(201, 159, 92, 0.07), inset 0 -18px 30px rgba(7, 5, 3, 0.18), 0 8px 22px rgba(0, 0, 0, 0.34); color: #f5eddd; }
.join-page h2 { margin: 0; color: #ffe4af; font-size: 1.25rem; line-height: 1.25; }
.join-page p { margin: 0; line-height: 1.58; }
.join-mascot { display: block; flex: none; width: 120px; height: 120px; background: center / contain no-repeat; filter: drop-shadow(0 0 12px rgba(250, 206, 124, 0.32)); transform-origin: 50% 88%; }
.join-mascot-keyring { width: 196px; height: 196px; background-image: url("/static/art/chaveiro-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
.join-mascot-nat { background-image: url("/static/art/rolo__pensando.webp"); }
.join-mascot-tome { background-image: url("/static/art/tomo__conferindo.webp"); }
.join-mascot-inkwell { background-image: url("/static/art/tinteiro-vitoria__strip.webp"); background-size: 400% 100%; background-position: 0 0; }
.join-mascot-inkwell-done { background-image: url("/static/art/tinteiro-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
.join-mascot-sandy { background-image: url("/static/art/arenita__calma.webp"); }
.join-mascot-sunburn { background-image: url("/static/art/sunburn-vitoria__strip.webp"); background-size: 400% 100%; background-position: 100% 0; }
.join-hero { display: grid; grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.6fr); align-items: center; gap: clamp(18px, 4vw, 44px); min-height: 270px; padding: clamp(22px, 4vw, 42px); border-color: #b08a58 !important; background: radial-gradient(ellipse at 16% 50%, rgba(215, 164, 84, 0.22), transparent 48%), radial-gradient(ellipse at 85% 0, rgba(151, 104, 48, 0.13), transparent 42%), linear-gradient(145deg, rgba(73, 50, 29, 0.54), transparent 60%), #211a15 !important; box-shadow: inset 0 0 0 5px rgba(201, 159, 92, 0.1), inset 0 -22px 36px rgba(7, 5, 3, 0.24), 0 12px 30px rgba(0, 0, 0, 0.4) !important; }
.join-hero > .join-mascot { justify-self: center; padding: 6px; border-radius: 50%; background-color: rgba(23, 17, 11, 0.28); filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.42)); }
.join-hero-words { display: grid; gap: 12px; min-width: 0; }
.join-hero h1 { margin: 0; color: #ffe4af; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.04; text-shadow: 0 3px 0 #1b120a, 0 0 24px rgba(221, 165, 83, 0.25); overflow-wrap: anywhere; }
.join-hero .lead { max-width: 62ch; color: #f5eddd; font-size: clamp(1.02rem, 1.7vw, 1.18rem); }
.join-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px !important; }
.join-chip { padding: 6px 12px; border: 1px solid rgba(227, 183, 106, 0.62); border-radius: 999px; background: #49351e; color: #fff0cf; font-size: 0.85rem; font-weight: 700; line-height: 1.35; }
.join-mascot.is-alive { animation: join-breathe 4.4s ease-in-out infinite; }
@keyframes join-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.015); } }
.join-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(14px, 2vw, 22px); }
.join-card { display: grid; grid-template-columns: minmax(90px, 126px) minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; align-items: center; gap: 12px 20px; min-height: 250px; height: 100%; padding: clamp(18px, 2vw, 24px); }
.join-card > .join-mascot { grid-column: 1; grid-row: 1 / span 4; align-self: center; justify-self: center; width: 116px; height: 116px; padding: 5px; border-radius: 50%; background-color: rgba(14, 11, 8, 0.36); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.join-card h2 { grid-column: 2; align-self: end; padding-bottom: 7px; border-bottom: 1px solid rgba(221, 184, 119, 0.38); }
.join-card > p, .join-card > .join-list { grid-column: 2; align-self: start; }
.join-card .join-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: #f5eddd; line-height: 1.45; }
.join-card .join-list li { padding-left: 1.45em; text-indent: -1.45em; }
.join-card .join-list li::first-letter { color: #f1d18d; }
.join-card .join-you { color: #ffe2a9; font-weight: 800; }
.join-card:hover .join-mascot { animation: mascot-gentle-bob 900ms ease-in-out infinite alternate; }
.join-leagues { display: grid; gap: 11px; padding: clamp(18px, 3vw, 30px); }
.join-leagues > h2 { font-size: 1.45rem; }
.join-leagues > p { color: #f1e5d0; }
.join-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.join-step { position: relative; display: grid; justify-items: center; align-content: start; gap: 7px; min-width: 0; min-height: 132px; padding: 13px 8px 12px; border: 1px solid rgba(224, 190, 129, 0.38); border-radius: 12px; background: linear-gradient(180deg, rgba(57, 43, 29, 0.96), rgba(20, 16, 13, 0.9)); box-shadow: inset 0 1px rgba(255, 240, 207, 0.05), 0 5px 10px rgba(0, 0, 0, 0.2); text-align: center; transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
/* the ladder CLIMBS from Wood to Platinum (the Claude, on integrating: the finish had it going down). The cards stand on one line and each
   one starts a step higher than the one before, whatever the length of its text */
.join-step:nth-child(1) { margin-top: 80px; }
.join-step:nth-child(2) { margin-top: 64px; }
.join-step:nth-child(3) { margin-top: 48px; }
.join-step:nth-child(4) { margin-top: 32px; }
.join-step:nth-child(5) { margin-top: 16px; }
.join-step:nth-child(6) { margin-top: 0px; }
.join-step:hover { transform: translateY(-3px); border-color: #d1a45e; box-shadow: inset 0 1px rgba(255, 240, 207, 0.08), 0 8px 16px rgba(0, 0, 0, 0.3); }
.join-step img { width: 48px; height: 48px; flex: none; }
.join-step strong { color: #fff0cf; font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.join-opens { color: #f1e5d0; font-size: 0.84rem; line-height: 1.4; overflow-wrap: anywhere; }
.join-step.coin-free { border: 2px solid #d1a45e; background: radial-gradient(ellipse at 50% 0, rgba(215, 164, 84, 0.2), transparent 70%), linear-gradient(180deg, #46351f, #211a15); box-shadow: inset 0 0 0 3px rgba(209, 164, 94, 0.1), 0 7px 16px rgba(0, 0, 0, 0.28); }
.join-flag { max-width: 100%; margin-top: auto; padding: 4px 9px; border-radius: 999px; background: #285538; color: #effff1; font-size: 0.74rem; font-weight: 800; line-height: 1.3; }
.join-ask { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: start; gap: clamp(22px, 4vw, 42px); padding: clamp(18px, 3vw, 30px); }
.join-form { display: grid; gap: 14px; align-content: start; min-width: 0; }
.join-form h2 { margin-bottom: 2px; font-size: 1.45rem; }
.join-field { display: grid; gap: 6px; min-width: 0; color: #f5eddd; font-size: 0.94rem; font-weight: 700; }
.join-field input { width: 100%; min-width: 0; min-height: 48px; padding: 10px 13px; border: 1px solid #a78353; border-radius: 9px; background: #15110e; color: #fff6e4; font: inherit; font-weight: 400; }
.join-field input:hover { border-color: #d1a45e; }
.join-field input:focus-visible, .join-form .btn:focus-visible, .join-ask .btn:focus-visible { outline: 3px solid #f1d18d; outline-offset: 3px; }
.join-form .btn { justify-self: stretch; min-height: 50px; margin-top: 3px; padding: 10px 22px; color: #fff6e4; font-size: 1rem; font-weight: 800; }
.join-form > .dim.small { color: #e3d5be; line-height: 1.5; }
.join-form .join-proto { color: #ffd18f; line-height: 1.45; }
.join-next { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 4px 0 0; }
.join-next h3 { margin: 0; color: #ffe4af; font-size: 1.2rem; line-height: 1.3; }
.join-steps { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: join-step; }
.join-steps::before { position: absolute; top: 28px; bottom: 28px; left: 17px; width: 2px; background: linear-gradient(#d1a45e, rgba(209, 164, 94, 0.24)); content: ""; }
.join-next-step { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; min-height: 88px; padding: 8px 8px 8px 30px; color: #f5eddd; line-height: 1.48; counter-increment: join-step; }
.join-next-step::before { position: absolute; z-index: 1; top: 50%; left: 5px; display: grid; width: 26px; height: 26px; place-items: center; transform: translateY(-50%); border: 1px solid #d1a45e; border-radius: 50%; background: #302317; color: #fff0cf; content: counter(join-step); font-size: 0.82rem; font-weight: 800; }
.join-next-step .join-mascot { width: 58px; height: 58px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.join-next-step:hover .join-mascot { animation: mascot-gentle-bob 900ms ease-in-out infinite alternate; }
.join-ask.is-thanks { position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 13px; min-height: 310px; padding: 30px 22px 34px; text-align: center; background: radial-gradient(ellipse at 50% 0, rgba(175, 126, 66, 0.22), transparent 62%), linear-gradient(145deg, rgba(73, 50, 29, 0.44), transparent 60%), #211a15; }
.join-ask.is-thanks::before { position: absolute; top: 0; left: 50%; width: min(520px, 100%); height: 82px; transform: translateX(-50%); background: radial-gradient(circle, rgba(255, 225, 163, 0.72) 0 2px, transparent 3px) 0 0 / 37px 29px, radial-gradient(circle, rgba(209, 164, 94, 0.72) 0 2px, transparent 3px) 15px 12px / 43px 31px; content: ""; opacity: 0; pointer-events: none; animation: join-welcome-sparkle 1.25s ease-out 1 both; }
@keyframes join-welcome-sparkle { 0% { opacity: 0; transform: translate(-50%, 7px); } 22% { opacity: 0.72; } 100% { opacity: 0; transform: translate(-50%, -4px); } }
.join-ask.is-thanks > * { position: relative; z-index: 1; }
.join-crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.join-crew .join-mascot { width: 126px; height: 126px; }
.join-ask.is-thanks:hover .join-crew .join-mascot { animation: mascot-gentle-bob 900ms ease-in-out infinite alternate; }
.join-ask.is-thanks > h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); }
.join-ask.is-thanks .lead { max-width: 58ch; color: #f5eddd; }
.join-ask.is-thanks .btn { min-height: 50px; margin-top: 4px; padding: 11px 24px; color: #fff6e4; font-weight: 800; }
@media (max-width: 900px) {
  .join-pair, .join-ask { grid-template-columns: minmax(0, 1fr); }
  .join-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .join-step, .join-step:nth-child(n) { min-height: 150px; margin-top: 0; }
}
@media (max-width: 560px) {
  .join-page { gap: 16px; padding: 20px 14px 32px; }
  .join-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 20px 17px 22px; text-align: center; }
  .join-hero > .join-mascot { width: 154px; height: 154px; }
  .join-hero-words { justify-items: center; }
  .join-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .join-chips { justify-content: center; }
  .join-pair { gap: 14px; }
  .join-card { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; min-height: 0; padding: 20px 17px; text-align: center; }
  .join-card > .join-mascot { grid-column: 1; grid-row: auto; width: 108px; height: 108px; }
  .join-card h2, .join-card > p, .join-card > .join-list { grid-column: 1; width: 100%; }
  .join-card h2 { align-self: auto; }
  .join-card .join-list { text-align: left; }
  .join-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .join-step, .join-step:nth-child(n) { min-height: 144px; margin-top: 0; padding: 12px 7px; }
  .join-ask { gap: 24px; }
  .join-form .btn { width: 100%; }
  .join-next { padding-top: 0; }
  .join-next-step { grid-template-columns: 50px minmax(0, 1fr); gap: 9px; padding-right: 0; }
  .join-next-step .join-mascot { width: 50px; height: 50px; }
  .join-crew { gap: 0 4px; }
  .join-crew .join-mascot { width: min(27vw, 104px); height: min(27vw, 104px); }
}
@media (prefers-reduced-motion: reduce) {
  .join-page *, .join-page *::before, .join-page *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}
/* the box "I am 18 or older" of the request (ACS, piece 18), added by the Claude after the finish of the Codex */
.join-check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #f1e5d0; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.join-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #d1a45e; cursor: pointer; }
.join-check input:focus-visible { outline: 3px solid #f1d18d; outline-offset: 3px; }
.join-ask.is-thanks a.btn { text-decoration: none; }  /* the button of the thanks is a link: no underline, like every other button */
/* Gold and Platinum are still to be built ("Com o selo Em breve (Recomendado)", the owner on 09/10/2026): on the ladder, a little dimmer */
.join-step.is-soon { border-style: dashed; opacity: 0.78; }
.join-step.is-soon img { filter: saturate(0.6); }
.join-flag.is-soon { background: #3a3046; color: #e6dcf2; }
/* the shortcuts to the door of the account request (the owner, 09/10/2026): a card on the visitor's result and on the pages that need
   an account; the structure only */
.join-nudge { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; min-width: 0; margin: 14px 0; padding: 12px 16px; border: 1px solid var(--bronze-line); border-radius: 12px; background: linear-gradient(110deg, #242039, var(--panel) 72%); box-shadow: inset 0 1px rgba(255, 240, 207, 0.035); transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.join-nudge[hidden] { display: none; }
.join-nudge .join-mascot { width: 64px; height: 64px; filter: none; }
.join-nudge-words { display: grid; gap: 3px; min-width: 0; }
.join-nudge-title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; color: var(--bronze); }
.join-nudge-text { color: var(--text); line-height: 1.5; }
.join-nudge-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.join-nudge-actions a.btn, .join-nudge-actions a.btn-small { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; }
.join-nudge-actions a.btn { padding-right: 16px; padding-left: 16px; }
.join-nudge-actions a.btn-small { color: var(--text); }
.join-nudge-actions a:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
.join-nudge:hover { border-color: #a98252; background-color: var(--panel-2); box-shadow: inset 0 1px rgba(255, 240, 207, 0.05), 0 5px 14px rgba(0, 0, 0, 0.16); }
.join-nudge:hover .join-mascot { animation: join-nudge-breathe 3.4s ease-in-out infinite; }
@keyframes join-nudge-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.join-how { min-width: 0; align-content: start; gap: 11px; }
.join-how > .lead { max-width: 58ch; color: #f5eddd; line-height: 1.62; }
.join-how > .dim.small { color: #d9cdb8; font-size: 0.82rem; line-height: 1.45; }
.join-how-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 0; }
.join-how-actions a.btn, .join-how-actions a.btn-small { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; }
.join-how-actions a.btn { padding-right: 18px; padding-left: 18px; }
.join-how-actions a.btn-small { color: #f5eddd; }
.join-how-actions a:focus-visible { outline: 3px solid #f1d18d; outline-offset: 3px; }
a.r-locked-coin { text-decoration: none; transition: border-color 140ms ease, box-shadow 140ms ease, filter 140ms ease; }
a.r-locked-coin:hover { border-color: var(--coin); box-shadow: 0 0 0 1px var(--coin), 0 0 9px color-mix(in srgb, var(--coin) 34%, transparent); filter: brightness(1.12); }
a.r-locked-coin:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; box-shadow: 0 0 0 1px var(--coin); }
@media (max-width: 560px) {
  .join-nudge { grid-template-columns: 56px minmax(0, 1fr); gap: 9px 11px; padding: 11px 12px; }
  .join-nudge .join-mascot { width: 56px; height: 56px; }
  .join-nudge-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .join-nudge-actions a:only-child { grid-column: 1 / -1; }
  .join-nudge-actions a.btn, .join-nudge-actions a.btn-small { width: 100%; min-width: 0; min-height: 44px; padding-right: 8px; padding-left: 8px; text-align: center; white-space: normal; }
  .join-how-actions { flex-direction: column; align-items: stretch; }
  .join-how-actions a.btn, .join-how-actions a.btn-small { width: 100%; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .join-nudge, .join-nudge:hover .join-mascot, a.r-locked-coin { animation: none; transition: none; }
}

/* ---- My account, dressed (the owner, 12/10/2026: "queria a pagina "My account" com mais valor visual ... fontes de letras, organização de
   cards, tamanhos, respiro"): the same facts and the same doors, in the look of the trophy room. Bronze-rimmed cards, the title font
   for the name and for the headings, the number font for what is counted, a label on every plate, and room to breathe. Only pieces of
   the kit: the frames of the trophies around the medallion (the frame is the one of the league), the framed buttons. ---- */
.account-page { max-width: 1180px; gap: 18px; padding-bottom: 28px; }
.account-page > h1 { margin: 14px 0 0; font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: 0.02em; }
.account-page > .panel { margin: 0; min-width: 0; padding: 18px 20px 20px; border: 1px solid #4a3f78; border-radius: 14px; background: linear-gradient(160deg, #231d46, #17132b 72%); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35); }
.account-page > .panel > h2 { margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid rgba(217, 183, 120, 0.3); font: 700 1rem/1.2 var(--font-display); letter-spacing: 0.09em; text-transform: uppercase; color: #ecd8ad; }
/* who I am: the medallion, the name, the plates */
.account-page > .account-identity { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 26px; align-items: center; padding: 22px 24px; border: 2px solid #796140; background: radial-gradient(130% 150% at 0 0, #3b2f6c 0, #1f1940 52%, #15112a 100%); box-shadow: inset 0 0 26px rgba(217, 183, 120, 0.1), 0 4px 16px rgba(0, 0, 0, 0.45); }
.account-page > .account-identity > h2 { grid-column: 2; margin: 0 0 2px; padding: 0; border: 0; font: 600 0.74rem/1.2 var(--font-system); letter-spacing: 0.16em; color: var(--dim); }
.account-avatar { grid-column: 1; grid-row: 1 / span 5; position: relative; width: 108px; height: 108px; margin: 10px 8px 10px 10px; display: grid; place-items: center; border-radius: 50%; background: #110e21; font-size: 3.3rem; line-height: 1; }
.account-avatar::after { content: ""; position: absolute; inset: -11px; pointer-events: none; background: center / contain no-repeat url("/static/art/moldura__comum.webp"); }
.account-avatar[data-coin="silver"]::after { background-image: url("/static/art/moldura__incomum.webp"); }
.account-avatar[data-coin="electrum"]::after { background-image: url("/static/art/moldura__rara.webp"); }
.account-avatar[data-coin="gold"]::after { background-image: url("/static/art/moldura__muito-rara.webp"); }
.account-avatar[data-coin="platinum"]::after { background-image: url("/static/art/moldura__lendaria.webp"); }
.account-name { grid-column: 2; margin: 0; font: 700 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--font-display); letter-spacing: 0.01em; color: var(--bone); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.55); overflow-wrap: anywhere; }
.account-facts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.account-page .account-identity .account-fact { display: grid; gap: 3px; min-width: 0; margin: 0; padding: 7px 13px 8px; border: 1px solid #4a3f78; border-radius: 10px; background: rgba(17, 14, 33, 0.62); }
.account-fact-label { font: 600 0.66rem/1 var(--font-system); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.account-fact strong { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; overflow-wrap: anywhere; }
.account-fact .account-coin img { width: 26px; height: 26px; }
.account-page > .account-identity > .account-gm-seal, .account-page > .account-identity > a.btn-small { grid-column: 2; justify-self: start; margin: 12px 0 0; }
/* progress: what is counted, in the number font, and the two doors */
.account-page > .account-progress { grid-column: 1 / -1; gap: 12px; }
.account-page .account-stat-grid { flex: 1 1 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
.account-page .account-stat, .account-page .account-stat:nth-child(n+4) { grid-column: auto; }
.account-page .account-stat { justify-items: center; gap: 3px; padding: 14px 8px 12px; border: 1px solid #4a3f78; border-radius: 12px; background: linear-gradient(180deg, rgba(44, 37, 84, 0.9), rgba(23, 19, 43, 0.9)); text-align: center; }
.account-stat-icon { font-size: 1.25rem; line-height: 1; }
.account-page .account-stat strong { order: 2; font: 700 2.05rem/1 var(--font-num); letter-spacing: 0.02em; color: #f4e1b3; }
.account-page .account-stat .dim { order: 3; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.account-page a.account-door { position: relative; flex: 1 1 260px; justify-content: flex-start; min-height: 50px; padding: 9px 16px 15px; border: 1px solid #796140; border-radius: 12px; background: linear-gradient(180deg, #2a2450, #1a1632); font-weight: 700; }
.account-page a.account-door:hover { border-color: #d9b778; }
.account-meter { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 5px; border-radius: 999px; background: rgba(241, 237, 255, 0.14); overflow: hidden; }
/* bronze, never the gold of the d20: that one is kept for the natural 20, the critical hit and the victory */
.account-meter > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a98a55, #d9b778); }
/* the Technician Profile (ACB, the owner in boxes, 16/10/2026: "Nível de Técnico (Recomendado)" and "Perfil do Técnico (Recomendado)"):
   the level in a bronze seal, the climb to the next one, the XP of each season */
.account-page > .account-coach { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr); gap: 16px 26px; align-items: center; }
.account-coach > h2 { grid-column: 1 / -1; }
.account-coach-level { display: grid; justify-items: center; gap: 2px; width: 104px; padding: 12px 8px 10px; border: 2px solid #796140; border-radius: 50%; aspect-ratio: 1; align-content: center; background: radial-gradient(circle at 50% 35%, #2c2554, #110e21 72%); }
.account-coach-level strong { font: 700 2.6rem/1 var(--font-num); color: #f4e1b3; }
.account-coach-level span { font: 600 0.62rem/1.15 var(--font-system); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: center; }
.account-coach-climb { display: grid; gap: 6px; min-width: 0; }
.account-coach-climb p { margin: 0; }
.account-coach-xp { font: 700 1.2rem/1.2 var(--font-num); color: var(--bone); }
.account-coach-bar { display: block; height: 8px; border-radius: 999px; background: rgba(241, 237, 255, 0.14); overflow: hidden; }
/* bronze, as the trophy meter: the gold of the d20 stays for the natural 20, the critical hit and the victory */
.account-coach-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a98a55, #d9b778); }
.account-coach-hint { font-size: 0.78rem; }
.account-coach-seasons { min-width: 0; }
.account-coach-seasons h3 { margin: 0 0 4px; font: 600 0.74rem/1.2 var(--font-system); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.account-coach-season { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(44px, auto); gap: 10px; margin: 0; padding: 6px 4px; border-bottom: 1px solid var(--border); }
@media (max-width: 760px) { .account-page > .account-coach { grid-template-columns: auto minmax(0, 1fr); } .account-coach-seasons { grid-column: 1 / -1; } }
.ranking-user .ranking-level { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid #796140; border-radius: 999px; color: #d9b778; font: 600 0.7rem/1.5 var(--font-system); vertical-align: middle; }
/* the leagues: more room around each step */
.account-page .account-league { padding: 10px 14px; border-radius: 12px; }
.account-page .account-league .account-coin img { width: 34px; height: 34px; }
/* the history: two lists side by side, each row in columns */
.account-page > .account-history { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; align-items: start; }
.account-history > h2, .account-history > a.btn-small { grid-column: 1 / -1; }
.account-history > a.btn-small { justify-self: start; }
.account-fights h3, .account-statement h3 { margin: 0 0 4px; font: 600 0.74rem/1.2 var(--font-system); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.account-page .account-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(88px, auto); align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid transparent; border-bottom-color: var(--border); border-radius: 8px; text-decoration: none; }
.account-page .account-history-row:hover, .account-page .account-history-row:focus-visible { border-color: #796140; background: rgba(217, 183, 120, 0.08); }
.account-history-date { color: var(--text); }
.account-history-score { padding: 1px 10px 2px; border: 1px solid #4a3f78; border-radius: 999px; font: 700 1rem/1.3 var(--font-num); }
.account-history-score::before { content: "🎯 "; font-size: 0.8em; }
.account-history-xp { font: 700 1.1rem/1.2 var(--font-num); color: #f4e1b3; text-align: right; }
.account-page .account-statement .account-statement-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.account-statement-row strong { font: 700 1.1rem/1.2 var(--font-num); }
.account-statement-row.gain strong { color: #9fe3ac; }
.account-statement-row.loss strong { color: #f2a593; }
/* the forms: wider fields, the gold ring of the kit on focus, the bright plate on the buttons that send */
.account-page > .account-profile { grid-column: 1 / -1; }
.account-page .account-profile-form { gap: 14px 18px; }
.account-page .account-field input, .account-page .account-suggestion textarea, .account-page .account-referral input[type="text"] { min-height: 44px; padding: 9px 12px; border: 1px solid #4a3f78; border-radius: 9px; }
.account-page .account-field input:focus-visible, .account-page .account-suggestion textarea:focus-visible, .account-page .account-referral input[type="text"]:focus-visible { outline: 2px solid #d9b778; outline-offset: 1px; border-color: #d9b778; }
#view-account .btn-primary { border: 0 solid transparent; border-radius: 0; min-height: 46px; padding: 10px 44px; color: #110e21; text-shadow: none; border-image-source: url("/static/art/botao-primario__normal.webp"); border-image-slice: 0 76 0 76 fill; border-image-width: 0 40px; border-image-repeat: stretch; background: none; }
#view-account .btn-primary:hover { border-image-source: url("/static/art/botao-primario__hover.webp"); }
#view-account .btn-primary:active { border-image-source: url("/static/art/botao-primario__pressed.webp"); }
#view-account .btn-primary:disabled, #view-account .btn-primary[aria-disabled="true"] { border-image-source: url("/static/art/botao-primario__disabled.webp"); color: #3c3a36; }
#view-account .btn-primary:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.account-page a.btn-small { min-height: 40px; padding: 6px 14px; border-radius: 10px; }
.account-page > .account-actions, .account-page > .account-contact { align-content: start; }
@media (min-width: 760px) { .account-page > .account-referral, .account-page > .account-suggestion { grid-column: 1 / -1; } }
@media (max-width: 900px) { .account-page .account-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .account-page > .account-history { grid-template-columns: minmax(0, 1fr); }
  .account-page > .account-identity { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 18px 16px; text-align: center; }
  .account-page > .account-identity > h2, .account-name, .account-facts, .account-page > .account-identity > .account-gm-seal, .account-page > .account-identity > a.btn-small { grid-column: 1; justify-self: center; }
  .account-avatar { grid-row: auto; margin: 12px; }
  .account-facts { justify-content: center; }
}
@media (max-width: 520px) { .account-page .account-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-page .account-stat:first-child { grid-column: 1 / -1; } }

/* ---- The top bar, rearranged (the owner, 12/10/2026): the language and the sound sit next to the name of the site; on the right, the
   account doorway ("Create account" and "Sign in" for a visitor, "My account" for who is in) and, in the corner, the coin of the
   league. The language is said by a flag, never by a coin: "Não use moedas como esta hoje. Moedas são referencia das Ligas do jogo."
   The flags are drawn here, in CSS, because Windows has no flag emoji. A third language gets a third flag. ---- */
.topbar-tools { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; }
#lang-toggle { gap: 3px; padding: 3px; }
#lang-toggle .lang-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 7px; opacity: 0.62; transition: opacity 150ms ease; }
#lang-toggle .lang-opt.active, #lang-toggle:hover .lang-opt, #lang-toggle:focus-visible .lang-opt { opacity: 1; }
.lang-flag { position: relative; flex: 0 0 auto; display: inline-block; width: 22px; height: 15px; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
.flag-us { background: repeating-linear-gradient(180deg, #b22234 0 14.2857%, #ffffff 14.2857% 28.5714%); }
.flag-us::before { content: ""; position: absolute; top: 0; left: 0; width: 46%; height: 57.2%; background: radial-gradient(circle, #ffffff 0 20%, transparent 27%) 0 0 / 33.34% 33.34%, #3c3b6e; }
.flag-br { background: #009c3b; }
.flag-br::before { content: ""; position: absolute; inset: 11% 8%; background: #ffdf00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.flag-br::after { content: ""; position: absolute; top: 50%; left: 50%; height: 46%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: linear-gradient(170deg, #002776 0 38%, #ffffff 38% 52%, #002776 52%); }
body.fight-mode #lang-toggle .lang-opt { min-height: 20px; padding: 0 8px 0 5px; }
body.fight-mode .lang-flag { width: 18px; height: 12px; }
/* the sound panel opens under its button, which now lives on the left; on a narrow screen it hangs from the bar itself */
.audio-panel { left: 0; right: auto; }
/* the visitor's two buttons: "Create account" is the invitation (the warm plate), "Sign in" the plain pill of the header */
.header-signup, .header-signup:visited { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border: 1px solid #d9b778; border-radius: 999px; background: linear-gradient(180deg, #5b4524, #33260f); color: #fff1cf; font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 #ffffff24, 0 2px 6px #0006; transition: border-color 150ms, box-shadow 150ms, transform 150ms; }
.header-signup:hover, .header-signup:focus-visible, .header-signin:hover, .header-signin:focus-visible { border-color: #f0d9a8; box-shadow: inset 0 1px 0 #ffffff33, 0 0 0 2px #d9b77840, 0 2px 8px #0008; transform: translateY(-1px); }
.header-signup:focus-visible, .header-signin:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
body.fight-mode .header-signup, body.fight-mode .header-signin { min-height: 28px; padding: 2px 10px; font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .header-signup, .header-signin, #lang-toggle .lang-opt { transition: none; } .header-signup:hover, .header-signin:hover { transform: none; } }
@media (max-width: 600px) {
  .audio-control { position: static; }
  .audio-panel { top: calc(100% + 4px); left: 12px; }
}
@media (max-width: 520px) {
  #lang-toggle .lang-code { display: none; }
  #lang-toggle .lang-opt { padding: 2px 7px; }
}
/* on a phone the name, the language and the sound keep the first row; the account doorway and the coin share the second, on the right */
@media (max-width: 420px) { .topbar-actions { flex: 0 1 auto; gap: 8px; margin-left: auto; } .header-signup, .header-signin { padding: 4px 10px; } }

/* ---- The visitor's notice (the owner, 12/10/2026): the invitation of the free account as a small window over the Home, closed with
   the X, so the page of who plays free has the same size as everyone's. The modal frame of the kit, the words already approved. ---- */
.visitor-notice { width: min(470px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.visitor-notice::backdrop { background: rgba(8, 6, 18, 0.74); }
.visitor-notice-card { position: relative; display: grid; justify-items: center; gap: 10px; padding: 14px 18px 12px; border: 26px solid transparent; border-image: url("/static/art/moldura-modal__9slice.webp") 59 fill / 26px stretch; text-align: center; }
.visitor-notice-close { position: absolute; top: -8px; right: -8px; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; color: var(--text); font-size: 1rem; line-height: 1; }
.visitor-notice-close:hover { border-color: var(--bone); }
.visitor-notice-close:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.visitor-notice .join-mascot { width: 104px; height: 104px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.visitor-notice-title { margin: 0; font: 700 1.35rem/1.25 var(--font-display); color: #ecd8ad; text-wrap: balance; }
.visitor-notice-text { max-width: 38ch; margin: 0; line-height: 1.5; color: var(--text); text-wrap: balance; }
.visitor-notice-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 6px 0 0; }
.visitor-notice-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; }
.visitor-notice-actions a.btn { min-height: 46px; padding: 10px 44px; border: 0 solid transparent; border-radius: 0; background: none; color: #110e21; font: 700 1rem/1.2 var(--font-display); text-shadow: none; border-image-source: url("/static/art/botao-primario__normal.webp"); border-image-slice: 0 76 0 76 fill; border-image-width: 0 40px; border-image-repeat: stretch; }
.visitor-notice-actions a.btn:hover { border-image-source: url("/static/art/botao-primario__hover.webp"); }
.visitor-notice-actions a.btn:active { border-image-source: url("/static/art/botao-primario__pressed.webp"); }
.visitor-notice-actions a.btn-small { padding: 6px 16px; border-radius: 999px; color: var(--text); }
.visitor-notice-actions a:focus-visible, .visitor-notice-nets a:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.visitor-notice-follow { width: 100%; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid rgba(217, 183, 120, 0.3); font: 600 0.72rem/1.2 var(--font-system); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.visitor-notice-nets { justify-content: center; margin: 0; }
.visitor-notice-nets a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; border-radius: 999px; color: var(--text); text-decoration: none; }
@keyframes visitor-notice-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .visitor-notice[open] { animation: visitor-notice-in 180ms ease-out; } }
@media (max-width: 420px) { .visitor-notice-card { padding: 10px 8px 8px; } .visitor-notice .join-mascot { width: 84px; height: 84px; } .visitor-notice-actions a.btn { padding: 10px 36px; } }

/* ---- The setup that waits, as a chip of the banner (the owner, 12/10/2026: "A barra, ↩️ Continue your setup (step 3 of 5), deve sair
   daqui. Coloque de forma discreta ao lado direito de "⚔️ up to 3 per side", mas mantendo o padrão dessas informações que ja estao
   aqui"): the same pill, the same size and the same gap as the three numbers; the first chip continues, the second starts over. The
   bar under the banner is gone, so the Home has the same height with or without a setup waiting. ---- */
.home-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 10px 0 0; }
.home-chip-row > .chips { display: contents; }
.home-draft { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.home-draft[hidden] { display: none; }
#home-draft .chip-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 0; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 0.85rem; line-height: inherit; white-space: nowrap; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
/* the chip is low, like its neighbours; the finger still gets a full target */
#home-draft .chip-btn::after { content: ""; position: absolute; inset: -9px -2px; }
#home-draft .home-draft-continue { border-color: #8a6f43; font-weight: 700; }
#home-draft .home-draft-reset { color: var(--dim); }
#home-draft .chip-btn:hover { border-color: var(--bone); color: var(--text); }
#home-draft .chip-btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
/* NEW FIGHT found a setup waiting: the chip asks the question and lights up, in bone (never gold) */
#home-draft.is-asking .home-draft-continue { border-color: var(--bone); background: var(--bone); color: #15112a; font-weight: 800; }
#home-draft.is-asking .home-draft-reset { border-color: var(--bone); color: var(--text); }
@keyframes home-draft-ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(241, 237, 255, 0); } 50% { box-shadow: 0 0 0 5px rgba(241, 237, 255, 0.3); } }
@media (prefers-reduced-motion: no-preference) { #home-draft.is-asking .home-draft-continue { animation: home-draft-ask 900ms ease-in-out 2; } }
@media (prefers-reduced-motion: reduce) { #home-draft .chip-btn { transition: none; } }

/* ---- The networks on the Home (the owner, 13/10/2026: "Quero na home tb."): Instagram and YouTube beside "Meet the mascots", stacked
   in the height of that button, so the Home keeps the height it had. On a phone they go under it, side by side. ---- */
.home-side-row { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.home-side-row > .home-mascots-btn { flex: 1 1 0; min-width: 0; }
.home-social { display: flex; flex: 0 0 auto; }
.home-social > .social-links { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; gap: 6px; margin: 0; }
.home-social .social-link { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-height: 0; padding: 2px 16px; border: 1px solid #8a6f43; border-radius: 999px; background: linear-gradient(180deg, #2c3140, #1a1632); color: var(--bone); font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 #ffffff14, 0 2px 6px #0006; transition: border-color 150ms, box-shadow 150ms; }
.home-social .social-link:visited { color: var(--bone); }
.home-social .social-link:hover, .home-social .social-link:focus-visible { border-color: #d9b778; box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 2px #d9b77840, 0 2px 8px #0008; }
.home-social .social-link:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
@media (max-width: 520px) {
  .home-side-row { flex-wrap: wrap; }
  .home-side-row > .home-mascots-btn { flex-basis: 100%; }
  .home-social { flex: 1 1 100%; }
  .home-social > .social-links { flex-direction: row; width: 100%; }
  .home-social .social-link { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .home-social .social-link { transition: none; } }

/* ---- The note of the Fighter of the Week, above the card of the Home (13/10/2026). On a phone the row of the medal goes to the top of the
   Home (order: -1) and its note hangs over the "New fight" card; every child of the hero is its own layer of the same height (z-index: 1)
   and the card, painted later, covered the note: it could not be read, and a tap on "Open the full sheet" landed on "Quick fight". Found
   while filming the take of the Fighter of the Week in the phone shape. On the wide layout the medal already had its own layer. */
@media (max-width: 1023px) { .home-hero > .home-emblems { z-index: 2; } }

/* ---- The tiles of what was earned (the owner, 13/10/2026): the XP of the fight, the XP of the season, the place in the ranking and the
   way to the Ranking, on the report of a fight; and the player's standing on the Ranking page. The mould is the one of the tiles of
   My account: the same panel, the figure in the display face, the name in small capitals. */
.gain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 14px; }
.gain-tile { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 96px; padding: 14px 10px 12px; border: 1px solid #4a3f78; border-radius: 12px; background: linear-gradient(180deg, rgba(44, 37, 84, 0.9), rgba(23, 19, 43, 0.9)); color: var(--text); text-align: center; }
.gain-icon { font-size: 1.25rem; line-height: 1; }
.gain-value { color: #d9b778; font: 800 1.7rem var(--font-display); line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gain-label { color: var(--dim); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.gain-note { color: var(--text); font-size: 0.78rem; opacity: 0.86; }
a.gain-door { text-decoration: none; border-color: var(--bronze-line, #8a6a35); background: linear-gradient(180deg, rgba(64, 48, 26, 0.55), rgba(23, 19, 43, 0.9)); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
a.gain-door:hover, a.gain-door:focus-visible { border-color: #d9b778; box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 2px #d9b77840, 0 2px 8px #0008; transform: translateY(-1px); }
a.gain-door:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.gain-door-label { color: var(--text); font: 700 1.02rem var(--font-display); }
.gain-door-arrow { color: #d9b778; font-size: 1.1rem; line-height: 1; }
.ranking-mine-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 10px 0 8px; }
.ranking-mine-tiles .gain-tile { min-height: 84px; padding: 12px 8px 10px; }
/* the filter of the leagues shows now that every board says the league: it keeps its own width, and the name filter takes the room */
.ranking-controls .ranking-league-filter { flex: 0 0 auto; width: auto; }
@media (max-width: 700px) {
  .gain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gain-tile { min-height: 84px; padding: 11px 8px 10px; }
  .gain-value { font-size: 1.45rem; }
  .ranking-mine-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-mine-tiles .gain-tile:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { a.gain-door { transition: none; } a.gain-door:hover, a.gain-door:focus-visible { transform: none; } }

/* comanda 156 · o selo e o filtro das mesas */
.table-seal { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: center / contain no-repeat var(--seal); }
.table-seal.table-heroes-of-the-mists { --seal: url("/static/art/mesa-brumas__selo.webp"); }
.table-seal.table-moonlit-company { --seal: url("/static/art/mesa-luar__selo.webp"); }
.table-seal.table-dragon-hunters { --seal: url("/static/art/mesa-dragao__selo.webp"); }
.table-seal-chip { width: 17px; height: 17px; }
.chip-btn.dim-tables { display: inline-flex; align-items: center; gap: 6px; }
.chip-btn.dim-tables:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.r-card.has-table-seal { position: relative; }
.r-card.has-table-seal .r-text { padding-right: 20px; }
.table-seal-card { position: absolute; z-index: 2; top: 2px; right: 50px; }
/* comanda 163 · a dificuldade, a série ao vivo e a fila */
.lineup-difficulty { min-width: 0; margin-top: 7px; }
.difficulty-detail { min-width: 0; border-top: 1px solid var(--border); padding-top: 5px; }
.difficulty-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; cursor: pointer; min-width: 0; }
.difficulty-summary::marker { color: var(--dim); }
.difficulty-metrics { min-width: 0; color: var(--dim); font-size: 0.72rem; line-height: 1.25; }
.difficulty-current { color: var(--bone); font-size: 0.76rem; }
.difficulty-current.is-beyond { padding: 1px 4px; border: 1px solid currentColor; border-radius: 4px; }
.difficulty-bands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin-top: 5px; min-width: 0; }
.difficulty-band { display: block; overflow: hidden; padding: 2px 1px; border: 1px solid var(--border); border-radius: 3px; color: var(--dim); font-size: clamp(0.48rem, 1.65vw, 0.62rem); line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.difficulty-band.is-active { border-color: var(--bone); color: var(--text); background: color-mix(in srgb, var(--bone) 15%, transparent); }
.difficulty-band.difficulty-beyond { grid-column: 1 / -1; border-color: #e98a45; color: #ffd0a1; font-weight: 800; }
.difficulty-breakdown { display: grid; gap: 2px; margin-top: 6px; color: var(--dim); font-size: 0.72rem; }
.arena-difficulty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.arena-difficulty-side { min-width: 0; }
.arena-difficulty-label { font-size: 0.72rem; }
.fight-job-line { margin: 3px 0 0; color: var(--bone); font-size: 0.9rem; font-weight: 700; }
.series-live { margin-top: 12px; }
.series-live-title { margin: 0 0 7px; }
.series-live-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; }
.series-live-side { min-width: 0; }
.series-live-side-name { display: block; margin-bottom: 4px; }
.series-live-roster { display: grid; gap: 4px; }
.series-live-fighter { display: flex; align-items: center; gap: 5px; min-width: 0; }
.series-live-face { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 50%; background: var(--panel); }
.series-live-face img { width: 100%; height: 100%; object-fit: cover; }
.series-live-fighter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.series-live-versus { padding-top: 18px; }
.series-live-score { margin: 8px 0; font-weight: 700; }
.series-live-table { max-height: 360px; overflow: auto; }
@media (max-width: 420px) {
  .series-live-sides { gap: 4px; }
  .series-live-face { flex-basis: 24px; width: 24px; height: 24px; }
  .difficulty-metrics { font-size: 0.66rem; }
  .difficulty-current { font-size: 0.7rem; }
}