/* Hounds — Páginas: árvore de mapas, locais, seletores, escolha de usuário, usuários, visibilidade, anotações, início */

/* Hierarchy tree (maps page, map page, location page) */
.mtree, .mtree ul { list-style: none; margin: 0; padding: 0; }
.mtree ul { margin-left: 22px; padding-left: 16px; border-left: 1px solid var(--line-2); }
.mtree li { position: relative; }
.mtree ul > li::before { content: ""; position: absolute; left: -16px; top: 26px; width: 14px; border-top: 1px solid var(--line-2); }
.mtree ul > li:last-child::after { content: ""; position: absolute; left: -17px; top: 27px; bottom: 0; width: 2px; background: var(--ground); }
.mrow { display: flex; align-items: center; gap: 12px; padding: 6px 8px; margin: 2px 0; border-radius: 12px; border: 1px solid transparent; text-decoration: none; color: inherit; min-width: 0; }
.mrow:hover { background: var(--surface); border-color: var(--line); }
.mrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mrow.here { background: var(--accent-soft); border-color: rgba(245,158,11,.35); }
.mthumb { flex: none; width: 56px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--well); border: 1px solid var(--line); display: grid; place-items: center; color: var(--faint); }
.mthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtext { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mtext b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtree .lvl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.path-tree { font-size: 13px; }
.path-tree .mrow { padding: 4px 6px; }
.path-tree .mthumb { width: 30px; height: 22px; border-radius: 5px; }
.path-tree b { font-size: 13px; }

/* Locations */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.loc-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.loc-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.loc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.loc-card .thumb { aspect-ratio: 16 / 10; position: relative; }
.where { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar .search { max-width: 320px; }
.toolbar > select { background: var(--well); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 14px; max-width: 260px; min-width: 0; }
.toolbar > select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
@media (max-width: 760px) { .toolbar > select { max-width: none; flex: 1 1 100%; } }
.loc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.loc-hero { background: var(--well); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.loc-hero img { max-width: 100%; max-height: 56vh; display: block; }
.hero-zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; max-width: 100%; }
.hero-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.zoom-back { position: fixed; inset: 0; z-index: 95; background: rgba(2, 6, 23, .92); display: grid; place-items: center; overflow: hidden; touch-action: none; user-select: none; }
.zoom-img { max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); display: block; transform-origin: center; will-change: transform; }
.zoom-bar { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(15, 23, 42, .85); border: 1px solid rgba(148, 163, 184, .25); }
.zoom-bar .icon-btn { color: #e2e8f0; font-size: 18px; font-weight: 700; }
.zoom-bar .icon-btn:hover { background: rgba(148, 163, 184, .2); color: #fff; }
.zoom-pct { min-width: 46px; text-align: center; font-size: 12px; font-weight: 700; color: #cbd5e1; font-variant-numeric: tabular-nums; }
.loc-pics { display: grid; gap: 12px; }
.loc-pics.two-pics { grid-template-columns: 1fr 1fr; }
.loc-pics.two-pics .loc-hero img { max-height: 40vh; }
@media (max-width: 760px) { .loc-pics.two-pics { grid-template-columns: 1fr; } }
.long { margin: 0; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.long.none { color: var(--faint); font-style: italic; }
.people { display: flex; flex-wrap: wrap; gap: 6px; }
.person { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--well); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; }
.person i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; background: rgba(244,114,182,.18); color: var(--tag-pink); }
.person button { border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-left: 2px; }
.person button:hover { color: var(--text); background: var(--surface-2); }
.person button:focus-visible { outline: 2px solid var(--accent); }
a.inline { color: var(--accent); text-decoration: none; font-weight: 600; }
a.inline:hover { text-decoration: underline; }
.row-link { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; text-decoration: none; color: inherit; min-width: 0; }
.row-link:hover { background: var(--surface-2); }
.row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.row-link b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-link .mthumb { width: 36px; height: 26px; border-radius: 6px; }
.row-link .meta { margin-left: auto; flex: none; }
.modal .mtree ul > li:last-child::after { background: var(--rail); }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* Character picker */
.picker { position: relative; display: flex; flex-direction: column; gap: 8px; }
.picker .people:empty { display: none; }
.suggest { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 5; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 4px; max-height: 220px; overflow-y: auto; box-shadow: 0 10px 30px var(--shadow); }
.suggest[hidden] { display: none; }
.suggest button { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font-size: 13px; }
.suggest button:hover, .suggest button.act { background: var(--accent-soft); }
.suggest small { color: var(--faint); margin-left: auto; font-size: 11px; padding-left: 10px; text-align: right; }
.hint-text { font-size: 12px; color: var(--faint); }

/* Location card inside the explorer panel */
.loc-mini { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; background: var(--well); }
.loc-mini img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; display: block; }
.loc-mini p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 760px) {
  .loc-layout { grid-template-columns: 1fr; }
  .mtree ul { margin-left: 12px; padding-left: 12px; }
  .mtree ul > li::before { left: -12px; width: 10px; }
  .mtree ul > li:last-child::after { left: -13px; }
}
.modal form { display: flex; flex-direction: column; gap: 16px; }
a.person { color: inherit; text-decoration: none; }
a.person:hover { border-color: var(--accent); }
a.person:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.person i { overflow: hidden; }
.person i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.char-thumb { aspect-ratio: 1 / 1 !important; position: relative; background: radial-gradient(circle at 50% 35%, rgba(244,114,182,.16), transparent 60%), var(--well); }
.char-card-present-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  transition: all 0.16s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.char-card-present-btn:hover {
  background: var(--accent);
  color: #0b1120;
  border-color: var(--accent);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
}
.char-card-present-btn:active {
  transform: scale(0.95);
}
.char-card-present-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.char-thumb .initials { font-size: 34px; font-weight: 800; color: var(--tag-pink); letter-spacing: .02em; }
.char-thumb img { object-position: 50% 25%; }
.loc-grid:has(.char-thumb) { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rels { display: flex; flex-direction: column; gap: 6px; }
.rels:empty { display: none; }
.rel-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rel-row .person { flex: 0 1 auto; max-width: 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-row .person i { flex: none; }
.field .rel-row input[type=text] { flex: 1; min-width: 0; width: auto; padding: 7px 10px; font-size: 13px; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.facts dt { color: var(--muted); font-size: 12px; font-weight: 700; align-self: center; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts .none { color: var(--faint); font-style: italic; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } .loc-grid:has(.char-thumb) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .char-thumb .initials { font-size: 26px; } }

/* User gate */
.gate { position: fixed; inset: 0; z-index: 90; background: var(--ground); display: grid; place-items: center; padding: 20px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); overflow-y: auto; }
.gate-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px; box-sizing: border-box; box-shadow: 0 20px 60px var(--shadow); }
.gate-head { text-align: center; margin-bottom: 20px; }
.gate-head .brand-mark { margin: 0 auto 12px; width: 48px; height: 48px; border-radius: 14px; }
.gate-head h1 { margin: 0; font-size: 20px; font-weight: 800; }
.gate-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.gate-list { display: grid; gap: 8px; }
.gate-user { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; text-align: left; }
.gate-user:hover, .gate-user:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.gate-user .av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--line); color: var(--text); }
.gate-user .nm { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-tag { flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid; }
.role-tag.mestre { color: var(--tag-amber); border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.12); }
.role-tag.admin { color: var(--tag-violet); border-color: rgba(139,92,246,.45); background: rgba(139,92,246,.12); }
.role-tag.jogador { color: var(--tag-blue); border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.12); }
.role-tag.visualizador { color: var(--tag-cyan); border-color: rgba(6,182,212,.45); background: rgba(6,182,212,.12); }
.gate-close { margin-top: 14px; width: 100%; }
.gate-login { display: grid; gap: 14px; }
.gate-login .notice { margin: 0; }
.gate-login .btn, .gate-list > .btn { width: 100%; justify-content: center; }
.gate-note { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.gate-me { cursor: default; box-sizing: border-box; }
.user-row .del-acct { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.gate-me:hover { border-color: var(--line-2); background: var(--surface-2); }
.who { margin: 10px 10px 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; text-align: left; min-width: 0; }
.who:hover { background: var(--surface); }
.who .av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 11px; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(245,158,11,.35); }
.who .txt { min-width: 0; display: grid; line-height: 1.2; }
.who .txt strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .txt span { font-size: 11px; color: var(--muted); }
.app.collapsed .who .txt { display: none; }
.app.collapsed .who { justify-content: center; }
@media (max-width: 760px) { .app.collapsed .who .txt { display: grid; } .app.collapsed .who { justify-content: flex-start; } }

/* Users page */
.user-list { display: grid; gap: 8px; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.user-row .av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--line); color: var(--text); }
.user-row .nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-row .nm strong { overflow: hidden; text-overflow: ellipsis; }
.user-row .you { font-size: 11px; color: var(--muted); }
.user-row .acts { display: flex; gap: 6px; flex: none; }
.user-row.confirm { border-color: var(--danger); background: var(--danger-soft); flex-wrap: wrap; }
.role-help { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Visibility flag (Mestre) */
.vis-flag { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--well); cursor: pointer; }
.vis-flag input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.vis-flag span { display: grid; gap: 2px; }
.vis-flag b { font-size: 13px; }
.vis-flag small { font-size: 12px; color: var(--muted); }
.vis-wrap { display: flex; flex-direction: column; gap: 8px; }
.vis-share { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line-2); }
.vis-share[hidden] { display: none; }
.vis-share .lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.vis-users { display: flex; flex-wrap: wrap; gap: 6px; }
.vis-user { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--well); border: 1px solid var(--line-2); font-size: 13px; cursor: pointer; }
.vis-user:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.vis-user:has(input:disabled) { cursor: default; opacity: .75; }
.vis-user input { margin: 0; width: 14px; height: 14px; accent-color: var(--accent); }
.vis-user small { font-size: 11px; color: var(--faint); }
.secret-tag { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 10px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; color: var(--tag-violet); border: 1px solid rgba(139,92,246,.45); background: rgba(139,92,246,.14); letter-spacing: 0; white-space: nowrap; }
.node-row .secret-ico { flex: none; color: var(--tag-violet-strong); margin-left: auto; display: inline-flex; }
.app.collapsed .node-row .secret-ico { display: none; }
.pin.secret .pin-head { outline: 2px dashed #c4b5fd; outline-offset: 2px; }

.vis-toggle { margin-left: 10px; vertical-align: middle; font-size: 12px; padding: 5px 10px; }
/* "Revelar" menu (Mestre): everyone or chosen accounts */
.vis-menu { position: relative; display: inline-block; vertical-align: middle; margin-left: 10px; }
.vis-menu .vis-toggle { margin-left: 0; gap: 4px; }
.vis-menu .vis-toggle[aria-expanded="true"] { background: var(--surface-2); }
/* In a page's buttons (data-vis-host, the Ficha): the same size as the others */
.btn-row > .vis-menu { margin-left: 0; }
.btn-row .vis-toggle { margin-left: 0; font-size: 13px; padding: 9px 14px; }
.btn-row .vis-menu .vis-toggle { gap: 8px; }
.vis-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 10px; width: max-content; min-width: 240px; max-width: min(340px, calc(100vw - 32px)); padding: 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 10px 30px var(--shadow); font-size: 13px; font-weight: 400; letter-spacing: 0; text-wrap: wrap; overflow-wrap: normal; white-space: normal; }
.vis-pop[hidden] { display: none; }
.vis-pop .lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.vis-pop .vis-all { align-self: flex-start; }
.vis-pop .vis-users { padding-top: 10px; border-top: 1px solid var(--line); }
.vis-pop .vis-users.off { opacity: .45; }
.vis-pop .btn-row { justify-content: flex-end; }
.vis-pop .btn { padding: 7px 12px; }

/* Notes */
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.nb-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; min-width: 0; }
.nb-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.nb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nb-card .ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(245,158,11,.35); }
.nb-card .txt { min-width: 0; display: grid; gap: 4px; }
.nb-card strong { overflow-wrap: anywhere; }
.note-list { display: grid; gap: 8px; }

/* Home */
.home-hero { display: flex; gap: 18px; align-items: center; }
.home-hero .brand-mark { width: 60px; height: 60px; border-radius: 16px; }
.nb-card.feature { border-color: rgba(245,158,11,.35); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
.nb-card.feature .ico { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (min-width: 761px) { .home-grid .feature { grid-column: span 2; } }
@media (max-width: 760px) { .home-hero .brand-mark { width: 48px; height: 48px; } }
.note-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: inherit; min-width: 0; }
.note-row:hover { border-color: var(--line-2); }
.note-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.note-row .ico { flex: none; color: var(--muted); margin-top: 2px; }
.note-row .txt { min-width: 0; display: grid; gap: 3px; }
.note-row strong { overflow-wrap: anywhere; }
.note-row .ex { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin: 0; min-height: 120px; }
.note-body.none { color: var(--faint); font-style: italic; }
.note-edit { display: flex; flex-direction: column; gap: 12px; }
.note-edit textarea { min-height: 52vh; font-size: 15px; line-height: 1.7; }
/* Ficha › Anotações: the same cards and rows, as buttons (it all opens inside the tab) */
.sheet-notes { display: flex; flex-direction: column; gap: 16px; }
.sheet-notes .sn-back { align-self: flex-start; padding-left: 8px; gap: 4px; }
.sheet-notes .sn-title { margin: 2px 0 6px; font-size: 24px; font-weight: 800; text-wrap: balance; overflow-wrap: anywhere; }
button.nb-card, button.note-row { width: 100%; font: inherit; text-align: left; cursor: pointer; }

/* Magias */
.spell-card:hover { border-color: var(--line-2) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.spell-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spell-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.spell-badge.diff-h { background: rgba(59, 130, 246, .15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, .3); }
.spell-badge.diff-vh { background: rgba(239, 68, 68, .15); color: #ef4444; border: 1px solid rgba(239, 68, 68, .3); }
.spell-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.3; }
.spell-tag.college { background: rgba(168, 85, 247, .12); color: #a855f7; border: 1px solid rgba(168, 85, 247, .25); }
.spell-tag.sclass { background: var(--well); color: var(--muted); border: 1px solid var(--line); }


/* Collapsible boxes (map page): closed until the title is clicked */
details.box.fold { display: block; padding: 0; }
.fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px; cursor: pointer; border-radius: 14px; user-select: none; -webkit-user-select: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fold > summary .sec-title { margin: 0; flex: 1; min-width: 0; }
.fold > summary:hover .sec-title { color: var(--text); }
.fold-count { flex: none; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: center; }
.fold-chev { flex: none; display: grid; place-items: center; color: var(--muted); transition: transform .18s ease; }
.fold[open] > summary .fold-chev { transform: rotate(90deg); }
.fold-body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; min-width: 0; }

/* Map page: the map with its markers, zoom and drag (js/mapa-previa.js) */
.preview.mprev { display: block; position: relative; width: 100%; max-height: 62vh; min-height: 220px; }
.mprev-vp { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mprev-vp.dragging { cursor: grabbing; }
.mprev-vp:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mprev-stage { position: absolute; left: 0; top: 0; }
.preview .mprev-stage img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; pointer-events: none; -webkit-user-drag: none; }
.mprev-card { position: absolute; left: 10px; bottom: 10px; z-index: 2; width: min(300px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.mprev-card[hidden] { display: none; }
.mprev-card-head { display: flex; align-items: center; gap: 8px; }
.mprev-card-head b { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.mprev-card-head .dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #0b1222; }
.mprev-card p { margin: 0; color: var(--text); line-height: 1.5; white-space: pre-wrap; }

/* Maps page without filters: top-level maps, each opening its hierarchy (tab-mapas.js) */
.mroots { display: flex; flex-direction: column; gap: 2px; }
.mroot-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mroot-toggle { flex: 1; min-width: 0; width: 100%; background: none; font: inherit; text-align: left; cursor: pointer; }
.mroot-toggle .mtext { flex: 1; }
.mroot-toggle .fold-chev { margin-left: auto; }
.mroot-toggle[aria-expanded="true"] .fold-chev { transform: rotate(90deg); }
.mroot.open > .mroot-row .mroot-toggle { background: var(--surface); border-color: var(--line); }
.mroot-open { flex: none; }

/* Ficha GURPS: atributos e características secundárias */
.gurps { display: flex; flex-direction: column; gap: 12px; }
.gurps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gurps-head .sec-title { margin: 0; }
/* Recolher (Meus Itens, Corpo, Mochilas): o título é o botão; recolhida, só o cabeçalho fica */
.fold-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.fold-btn svg { flex: none; color: var(--muted); transition: transform .15s, color .15s; }
.fold-btn[aria-expanded="false"] svg { transform: rotate(-90deg); }
.fold-btn:hover:not(:disabled) svg { color: var(--accent); }
.fold-btn:disabled { cursor: default; }
.fold-btn:disabled svg { opacity: .35; }
.fold-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
section.gurps.folded > :not(.gurps-head) { display: none; }
.gurps-head .btn-row { margin-left: auto; }
.gurps-total { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.gurps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.gtab { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14px; }
.gtab th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: right; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.gtab td { padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; }
.gtab th:first-child, .gtab td:first-child { text-align: left; }
.gtab tbody tr:last-child td { border-bottom: 0; }
.gtab td small { display: block; font-size: 11px; color: var(--faint); }
.gtab .gval { font-weight: 700; font-size: 15px; white-space: nowrap; }
.gtab .gpts { width: 64px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.gtab .gpts.none { color: var(--faint); }
/* Familiaridade Cultural: na tabela das perícias fáceis, destacada */
.gtab tr.gcult td { background: rgba(168, 85, 247, .08); }
.gtab tr.gcult td:first-child { box-shadow: inset 3px 0 0 #a855f7; }
.gtab tr.gcult td small { color: #a855f7; font-weight: 600; }
.gtab tr.gcult .gnh.none { color: var(--faint); }
/* Perícias: a Familiaridade Cultural numa tabela própria, depois das perícias */
.gcult-tab thead th:first-child { color: #a855f7; }
/* Pontos de perícia editáveis direto na tabela da ficha */
.gtab .gpts-in { width: 56px; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--well); color: var(--text); font: inherit; text-align: right; font-variant-numeric: tabular-nums; }
.gtab .gpts-in:hover { border-color: var(--muted); }
.gtab .gpts-in:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; background: var(--well); }
.gtab tfoot td { border-top: 1px solid var(--line-2); border-bottom: 0; background: var(--accent-soft); font-weight: 700; }
.gtab tfoot .gpts { color: var(--accent); font-size: 14px; font-weight: 700; }
.gnote { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.attr-in { width: 78px; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; color: var(--text); font: inherit; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.attr-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
/* Base de Percepção e Vontade, editável embaixo do nome */
.attr-base { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.attr-base input { width: 56px; box-sizing: border-box; background: var(--well); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 6px; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.attr-base input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.gurps-derived { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gstat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gstat span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gstat strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.gstat small { font-size: 11px; color: var(--faint); }

/* Atributos › Reações: reação, modificador e observações */
.gurps-under { display: flex; flex-direction: column; gap: 12px; width: fit-content; max-width: 100%; }
.gurps-under .gurps-derived { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
/* The table takes the width of the cards and never sets it (long notes wrap). */
.gurps-under > .rx-box { width: 0; min-width: 100%; }
@media (max-width: 760px) {
  .gurps-under { width: auto; }
  .gurps-under .gurps-derived { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.rx-box { display: flex; flex-direction: column; gap: 8px; }
.rx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rx-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rx-tab th:nth-child(2), .rx-tab td.gval { width: 120px; text-align: center; }
.rx-tab td.gval { border-left: 1px solid var(--line); }
.rx-tab td.rx-none { color: var(--faint); font-style: italic; text-align: left; }
.sk-row.rx-row { grid-template-columns: minmax(0, 1.2fr) 110px minmax(0, 1fr) 32px; }
.sk-labels.rx-row span:nth-child(2) { text-align: center; }
.sk-labels.rx-row span:nth-child(3) { text-align: left; padding-left: 0; }
#rxRows { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) {
  .sk-row.rx-row { grid-template-columns: minmax(0, 1fr) 90px 32px; }
  .sk-row.rx-row [data-rf="notes"] { grid-column: 1 / 3; }
}

/* Vantagens: mesmos cartões e selos das magias */
.spell-grid, .adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.adv-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: border-color .15s, transform .15s; }
.adv-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.adv-card-top strong { font-size: 15px; line-height: 1.3; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.adv-card-top .spell-badge { flex: none; }
.adv-cost { font-size: 12px; font-weight: 600; color: var(--accent); }
.adv-desc { font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adv-src { font-size: 11px; color: var(--faint); margin-top: auto; }
/* O nome em português dos catálogos (js/busca-catalogos.js): abaixo do nome do livro */
.pt-name { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--muted); margin-top: 2px; }
p.pt-name { font-size: 15px; margin: -2px 0 4px; }
.suggest .pt-name { display: inline; margin: 0 0 0 6px; font-size: 12px; }
.spell-badge.adv-adv { background: rgba(245, 158, 11, .14); color: var(--accent); border: 1px solid rgba(245, 158, 11, .3); }
.spell-badge.adv-talent { background: rgba(168, 85, 247, .12); color: #a855f7; border: 1px solid rgba(168, 85, 247, .25); }
.spell-badge.adv-perk { background: rgba(34, 197, 94, .12); color: #16a34a; border: 1px solid rgba(34, 197, 94, .3); }
.spell-badge.adv-exp { background: rgba(59, 130, 246, .15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, .3); }
.spell-badge.adv-ref { background: var(--well); color: var(--muted); border: 1px solid var(--line-2); }

/* Ficha GURPS: perícias */
.gtab .gnh { width: 74px; font-weight: 700; white-space: nowrap; }
.gtab .gnh small { display: inline; margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--faint); }
.gtab .gnh.bonus, .sk-nh.bonus { background: rgba(34, 197, 94, .14); color: #16a34a; }
.gtab .gnone { text-align: left; color: var(--faint); font-style: italic; font-size: 13px; }
.sk-edit { gap: 8px; }
.sk-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 72px 70px 70px 132px 32px; gap: 8px; align-items: center; }
.sk-row.cult { grid-template-columns: minmax(0, 1fr) 70px 32px; }
/* Motivo do bônus: na perícia, a linha de baixo; no combate, ao lado do bônus. Só enquanto o bônus não é 0. */
.sk-row .sk-bnote { grid-column: 1 / -1; }
.sk-bnote[hidden], .sc-bnote[hidden] { display: none; }
.sc-f.sc-bnote { flex: 1 1 220px; }
.sc-f.sc-bnote input { width: 100%; box-sizing: border-box; }
.bonus-note.invalid { border-color: var(--danger) !important; }
.sk-labels { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Os títulos ficam centrados sobre as caixas curtas; o de NH, alinhado com o texto da célula. */
.sk-labels span:nth-child(n+2):nth-child(-n+5) { text-align: center; }
.sk-labels span:nth-child(6) { padding-left: 8px; }
.sk-row input, .sk-row select { min-width: 0; width: 100%; box-sizing: border-box; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 8px; color: var(--text); font: inherit; font-size: 14px; }
.sk-row input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
.sk-row input:focus, .sk-row select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.sk-nh { font-weight: 700; font-size: 14px; padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.sk-nh small { font-weight: 500; font-size: 11px; color: var(--faint); }
.sk-nh .sk-waste { display: block; white-space: normal; line-height: 1.3; color: var(--accent); }
/* Nome da perícia: a busca em Regras › Perícias abre embaixo do campo; a perícia vinculada mostra
   a página e as regras em uma linha curta. Com essa linha, os campos da linha ficam no topo. */
#skRows .sk-row { align-items: start; }
.sk-namecell { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sk-pick { position: relative; }
.sk-pick .suggest { z-index: 6; }
.sk-rules:empty { display: none; }
.sk-rules { font-size: 11.5px; line-height: 1.35; color: var(--faint); padding: 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-rules a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; text-decoration: none; }
.sk-rules a:hover { text-decoration: underline; }
/* Ficha › Vantagens: o que a vantagem faz na ficha, embaixo das regras da linha em edição */
.sk-fx:empty { display: none; }
.sk-fx { font-size: 11.5px; line-height: 1.35; color: var(--muted); padding: 0 2px; }
.gtab td b a { color: inherit; text-decoration: none; }
.gtab td b a:hover { color: var(--accent); text-decoration: underline; }
/* Regras de uma perícia em modal (links das fichas) */
.skill-modal { display: flex; flex-direction: column; gap: 18px; }
.skill-modal-head { display: flex; flex-direction: column; gap: 6px; }
.skill-modal-head .lede { margin: 0; }
.skill-modal .sec-title { margin-bottom: 8px; }
#skRows, #cuRows, #spRows, #pkRows, #clRows, #lgRows { display: flex; flex-direction: column; gap: 8px; }
/* Línguas: nome, falada, escrita, nativa, pontos */
.sk-row.lang { grid-template-columns: minmax(0, 1fr) 140px 140px auto 70px 32px; }
.sk-row .lg-native { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sk-row .lg-native input { width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; accent-color: var(--accent); }
.gperk-tab thead th:first-child { color: #0ea5e9; }
.gclass-tab thead th:first-child { color: #f59e0b; }
.glang-tab thead th:first-child { color: #22c55e; }
.glang-tab td:nth-child(2), .glang-tab td:nth-child(3) { text-align: left; font-size: 13px; color: var(--muted); }
/* Ficha › Magia: a escola no lugar do atributo, mais larga */
.sk-row.sp-row { grid-template-columns: minmax(0, 1fr) 150px 72px 70px 70px 132px 32px 32px; }
/* Ficha › Magia: a estrela das favoritas e a tabela Favoritos */
.sp-name { display: flex; align-items: flex-start; gap: 6px; }
.sp-fav { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--faint); cursor: pointer; }
span.sp-fav { cursor: default; }
.sp-fav:hover { color: #eab308; background: var(--well); }
.sp-fav:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sp-fav.on { color: #eab308; }
.sp-fav.on svg { fill: currentColor; }
.sk-row .sp-fav { width: 32px; height: 32px; }
.sp-favs-title { display: inline-flex; align-items: center; gap: 6px; }
.sp-favs-title svg { color: #eab308; }
.sp-favs-title svg { fill: currentColor; }
#spRows .sk-row { align-items: start; }
.sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gtab tr.gschool td { background: var(--surface-2); font-weight: 700; color: var(--text); }
.gtab tr.gschool td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.gtab tr.gschool .gpts { color: var(--accent); font-weight: 700; }
.gtab tbody + tbody tr.gschool td { border-top: 1px solid var(--line-2); }
@media (max-width: 760px) {
  .sk-labels { display: none; }
  .sk-row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .sk-row .sk-name, .sk-row .sk-namecell { grid-column: 1 / -1; }
  .sk-row .sk-nh { grid-column: 1 / 4; }
  .sk-row .icon-btn { justify-self: end; }
  .sk-row.cult { grid-template-columns: minmax(0, 1fr) 70px 32px; }
  .sk-row.cult .sk-name { grid-column: auto; }
  .sk-row.sp-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Combate: estilos de luta, listas em chips (os que estão nos catálogos abrem as regras) */
.style-box { gap: 14px; }
.style-box .sec-title { margin: 0; }
.style-list h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.style-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.style-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--well); font-size: 12.5px; color: var(--text); text-decoration: none; line-height: 1.4; }
a.style-chip.linked { border-color: rgba(245, 158, 11, .4); color: var(--accent); }
a.style-chip.linked:hover { background: var(--accent-soft); }
@media (min-width: 761px) { .style-layout { grid-template-columns: minmax(0, 1fr) 380px; } }

/* Combate: troca entre Perícias de combate, Técnicas e Estilos */
.seg { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--well); border: 1px solid var(--line); border-radius: 12px; max-width: 100%; }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px var(--shadow); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Paginação das listas longas (magias, vantagens) */
.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.list-bar.end { justify-content: center; margin: 20px 0 0; }
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-btn, .pager-cur { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9px; display: inline-grid; place-items: center; font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pager-btn { border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; }
.pager-btn:hover:not(:disabled) { background: var(--surface-2); }
.pager-btn:focus-visible, .pager-cur:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-cur { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.pager-cur:focus { outline: none; }
.pager-gap { min-width: 18px; text-align: center; color: var(--faint); }
@media (max-width: 760px) { .list-bar { justify-content: center; } .list-bar .meta { width: 100%; text-align: center; } }

/* Busca das listas e marcas das alterações do Mestre */
.toolbar .list-search { flex: 1 1 240px; min-width: 0; max-width: none; }
.spell-tag.mestre { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(245, 158, 11, .3); }
.spell-card.is-deleted { background: var(--surface); border: 1px dashed var(--line-2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.spell-card.is-deleted:hover { transform: none !important; }

/* Páginas de listas longas (magias, vantagens): usam a largura da tela; os cartões se distribuem
   pela grade conforme o espaço (4 a 6 por linha em telas largas). */
.page-inner.wide { max-width: 1680px; }

/* Ficha: as abas (Ficha / Equip.) à esquerda e a caixa de personagens vinculados à direita,
   no alto, acima das seções */
.sheet-chars { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet-chars > .seg { margin-bottom: 0; }
.sheet-chars > .fold { width: 320px; max-width: 100%; margin-left: auto; }
@media (max-width: 760px) { .sheet-chars > .fold { width: 100%; } }
/* Personagem and, beside it in one line, the points (main sheet), on the right of the line of the allies */
.sheet-side { max-width: 100%; margin-left: auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 10px; }
.sheet-side > .fold { width: 260px; max-width: 100%; }
@media (max-width: 760px) { .sheet-side { width: 100%; } .sheet-side > .fold, .sheet-side > .pts-box { width: 100%; } }
.pts-box { padding: 8px 12px; }
.pts-tab { width: 440px; max-width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.pts-tab th.pt-race-col { width: 140px; }
.pts-tab th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 3px 6px; text-align: center; white-space: nowrap; }
.pts-tab td { padding: 0 3px; text-align: center; font-variant-numeric: tabular-nums; }
.pts-box .gpts-in { width: 100%; box-sizing: border-box; padding: 6px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--well); color: var(--text); font: inherit; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.pts-box .gpts-in:hover { border-color: var(--muted); }
.pts-box .gpts-in:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.pts-box .gpts-in.pt-race { text-align: left; padding: 6px 10px; }
.pts-tab .pt-calc { font-weight: 700; }
.pts-tab .pt-total { color: var(--accent); }

/* Ficha: a principal e os aliados, cada um numa aba, acima das abas Ficha / Equip. / Magia;
   no lugar da caixa Personagem, a do aliado aberto (nome da aba, da ficha e as ações) */
/* The line of the allies: the sheet and its allies with Criar Aliado on the left (.sheet-people, centered
   among themselves), Personagem and the points on the right; aligned by the top, so opening Personagem
   doesn't move the left side. */
.sheet-allies { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-bottom: 12px; }
.sheet-people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sheet-allies .seg { flex-wrap: wrap; margin-bottom: 0; }
.sheet-allies .seg button svg { vertical-align: -2px; margin-right: 5px; }
.sheet-allies .seg button:disabled { opacity: .5; cursor: not-allowed; }
.sheet-chars > .ally-box { max-width: 100%; margin-left: auto; padding: 6px 6px 6px 12px; border-radius: 12px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ally-box > .confirm { flex-basis: 100%; }
.ally-box .btn-row { gap: 4px; flex-wrap: nowrap; }
.ally-box .btn { padding: 5px 9px; gap: 5px; font-size: 12.5px; border-radius: 8px; }
.ally-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; }
.ally-name b { overflow-wrap: anywhere; }
.ally-name small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 760px) { .sheet-chars > .ally-box { width: 100%; } }

/* Ficha › aliado aberto: o painel de conteúdo troca o âmbar pelo violeta (destaques, fundos e
   linhas), para não confundir com a ficha principal. O menu e os modais não mudam. */
#view-page.ally-view {
  --ground: hsl(262 22% 8%); --surface: hsl(262 18% 12%); --surface-2: hsl(262 16% 15%); --well: hsl(262 20% 9%); --line: hsl(262 14% 20%); --line-2: hsl(262 12% 29%);
  --accent: hsl(262 42% 70%); --accent-ink: hsl(262 30% 10%); --accent-soft: hsl(262 42% 70% / .12);
  background: var(--ground); box-shadow: inset 4px 0 0 var(--accent);
}
:root[data-theme="light"] #view-page.ally-view {
  --ground: hsl(262 35% 97%); --surface: #ffffff; --surface-2: hsl(262 30% 95%); --well: hsl(262 30% 95%); --line: hsl(262 25% 90%); --line-2: hsl(262 20% 82%);
  --accent: hsl(262 35% 42%); --accent-ink: #ffffff; --accent-soft: hsl(262 35% 42% / .08);
}
#view-page.ally-view .sheet-allies .seg button.on { background: var(--accent); color: var(--accent-ink); }
/* The other colors an ally can have (ALLY_COLORS in tab-fichas.js), as soft as the violet above:
   the same saturation and lightness, another hue. */
#view-page.ally-view[data-ally-color="blue"] {
  --ground: hsl(212 22% 8%); --surface: hsl(212 18% 12%); --surface-2: hsl(212 16% 15%); --well: hsl(212 20% 9%); --line: hsl(212 14% 20%); --line-2: hsl(212 12% 29%);
  --accent: hsl(212 42% 70%); --accent-ink: hsl(212 30% 10%); --accent-soft: hsl(212 42% 70% / .12);
}
:root[data-theme="light"] #view-page.ally-view[data-ally-color="blue"] {
  --ground: hsl(212 35% 97%); --surface: #ffffff; --surface-2: hsl(212 30% 95%); --well: hsl(212 30% 95%); --line: hsl(212 25% 90%); --line-2: hsl(212 20% 82%);
  --accent: hsl(212 35% 42%); --accent-ink: #ffffff; --accent-soft: hsl(212 35% 42% / .08);
}
#view-page.ally-view[data-ally-color="green"] {
  --ground: hsl(148 22% 8%); --surface: hsl(148 18% 12%); --surface-2: hsl(148 16% 15%); --well: hsl(148 20% 9%); --line: hsl(148 14% 20%); --line-2: hsl(148 12% 29%);
  --accent: hsl(148 42% 70%); --accent-ink: hsl(148 30% 10%); --accent-soft: hsl(148 42% 70% / .12);
}
:root[data-theme="light"] #view-page.ally-view[data-ally-color="green"] {
  --ground: hsl(148 35% 97%); --surface: #ffffff; --surface-2: hsl(148 30% 95%); --well: hsl(148 30% 95%); --line: hsl(148 25% 90%); --line-2: hsl(148 20% 82%);
  --accent: hsl(148 35% 42%); --accent-ink: #ffffff; --accent-soft: hsl(148 35% 42% / .08);
}
#view-page.ally-view[data-ally-color="red"] {
  --ground: hsl(4 22% 8%); --surface: hsl(4 18% 12%); --surface-2: hsl(4 16% 15%); --well: hsl(4 20% 9%); --line: hsl(4 14% 20%); --line-2: hsl(4 12% 29%);
  --accent: hsl(4 42% 70%); --accent-ink: hsl(4 30% 10%); --accent-soft: hsl(4 42% 70% / .12);
}
:root[data-theme="light"] #view-page.ally-view[data-ally-color="red"] {
  --ground: hsl(4 35% 97%); --surface: #ffffff; --surface-2: hsl(4 30% 95%); --well: hsl(4 30% 95%); --line: hsl(4 25% 90%); --line-2: hsl(4 20% 82%);
  --accent: hsl(4 35% 42%); --accent-ink: #ffffff; --accent-soft: hsl(4 35% 42% / .08);
}
#view-page.ally-view[data-ally-color="olive"] {
  --ground: hsl(78 22% 8%); --surface: hsl(78 18% 12%); --surface-2: hsl(78 16% 15%); --well: hsl(78 20% 9%); --line: hsl(78 14% 20%); --line-2: hsl(78 12% 29%);
  --accent: hsl(78 36% 64%); --accent-ink: hsl(78 30% 10%); --accent-soft: hsl(78 36% 64% / .12);
}
:root[data-theme="light"] #view-page.ally-view[data-ally-color="olive"] {
  --ground: hsl(78 30% 96%); --surface: #ffffff; --surface-2: hsl(78 26% 94%); --well: hsl(78 26% 94%); --line: hsl(78 22% 88%); --line-2: hsl(78 18% 79%);
  --accent: hsl(78 35% 32%); --accent-ink: #ffffff; --accent-soft: hsl(78 35% 32% / .08);
}
/* Cinza: the same steps with little color, so it reads as gray and not as blue. */
#view-page.ally-view[data-ally-color="slate"] {
  --ground: hsl(215 10% 8%); --surface: hsl(215 9% 12%); --surface-2: hsl(215 8% 15%); --well: hsl(215 10% 9%); --line: hsl(215 7% 21%); --line-2: hsl(215 6% 30%);
  --accent: hsl(215 14% 72%); --accent-ink: hsl(215 15% 10%); --accent-soft: hsl(215 14% 72% / .12);
}
:root[data-theme="light"] #view-page.ally-view[data-ally-color="slate"] {
  --ground: hsl(215 14% 97%); --surface: #ffffff; --surface-2: hsl(215 12% 95%); --well: hsl(215 12% 95%); --line: hsl(215 10% 90%); --line-2: hsl(215 8% 81%);
  --accent: hsl(215 14% 38%); --accent-ink: #ffffff; --accent-soft: hsl(215 14% 38% / .08);
}
/* The color of each ally beside its name (tabs and the color choice) */
.ally-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.ally-colors .vis-user .ally-dot { margin-right: 0; }

/* Ficha: retrato do personagem vinculado */
.sheet-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sheet-title > div:last-child { min-width: 0; }
.sheet-portrait { flex: none; width: 92px; height: 92px; border-radius: 16px; overflow: hidden; background: var(--well); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--faint); }
.sheet-portrait .hero-zoom, .sheet-portrait img { width: 100%; height: 100%; }
.sheet-portrait img { object-fit: cover; object-position: 50% 25%; display: block; }
.sheet-thumb img { object-position: 50% 25%; }
@media (max-width: 760px) { .sheet-portrait { width: 64px; height: 64px; border-radius: 12px; } .sheet-title { gap: 12px; } }

/* Ficha › Combate: estilos lado a lado; embaixo, Danos e Defesas (seções próprias) lado a lado, como na planilha */
.sc-tab th a { color: inherit; text-decoration: none; }
.sc-tab th a:hover { color: var(--accent); }
.sc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 14px; align-items: start; }
.sc-pair > section { min-width: 0; }
.sc-pair.editing { grid-template-columns: minmax(0, 1fr); }
.sc-dmg td, .sc-dmg th { text-align: center; }
.sc-dmg td[rowspan], .sc-dmg th:first-child { text-align: left; }
.sc-def td:first-child small { display: block; font-size: 11px; color: var(--faint); font-weight: 400; }
/* Danos: armas do Corpo em uso, sem arma e outros ataques; o que veio das vantagens em destaque */
.dm-tab tr.dm-group th { text-align: left; background: var(--surface); color: var(--accent); border-top: 1px solid var(--line); }
.dm-tab tbody tr.dm-group:first-child th { border-top: 0; }
/* Defesas: cada grupo nomeia as colunas (Valor, Recuando); recolhido, os nomes saem com as linhas */
.dm-tab tr.dm-group th.df-col { color: var(--muted); font-size: 11px; font-weight: 600; }
.dm-tab tr.dm-group:has(.dm-fold[aria-expanded="false"]) th.df-col { visibility: hidden; }
/* Danos e Defesas: os grupos (Armas em uso, Sem arma...) recolhem ao cabeçalho */
.dm-fold { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.dm-fold .chev { color: inherit; }
.dm-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dm-fold-sum { color: var(--muted); font-weight: 400; }
.dm-fold[aria-expanded="true"] .dm-fold-sum { display: none; }
/* Danos: o dano e o NH abrem a conta num modal */
.dm-why { padding: 0; border: 0; border-bottom: 1px dotted currentColor; background: none; color: inherit; font: inherit; cursor: pointer; }
.dm-why:hover { color: var(--accent); }
.dm-why:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dm-why-sec { display: flex; flex-direction: column; gap: 10px; }
.dm-why-sec .sec-title { margin: 0; }
.dm-why-sec .hint-text { margin: 0; }
.dm-why-big { font-size: 28px; font-weight: 700; line-height: 1.1; }
.dm-why-big.bonus { color: var(--accent); }
.dm-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.dm-steps li { padding-left: 4px; }
.dm-steps li span + b { margin-left: 8px; white-space: nowrap; }
.dm-steps li:last-child:has(b) { font-weight: 600; }
/* Defesas: a tabela como a de Danos; a defesa que conta fica marcada */
.df-tab td.df-best { color: var(--accent); }
.df-used { display: inline-block; margin-left: 8px; vertical-align: 1px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.df-used.df-off { color: var(--danger); }
.df-tab td.df-offv { color: var(--faint); text-decoration: line-through; }
.dm-tab td.gval.bonus { color: var(--accent); }
/* Danos e Defesas dividem a linha ao meio; a tabela ocupa a sua metade (rola de lado se não couber).
   As colunas de dados centradas, também na 2ª linha de uma arma, onde a 1ª célula é a do Modo */
.dm-wrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-x: auto; }
.dm-tab { width: 100%; }
/* O nome e o texto embaixo dele quebram linha: a tabela cabe na metade da tela sem barra de rolagem */
.dm-tab tr.dm-group th { white-space: nowrap; }
.dm-tab td.dm-name:not(.gnone) { white-space: normal; min-width: 130px; overflow-wrap: break-word; }
.dm-tab thead th:not(:first-child), .dm-tab tbody td:not(.dm-name) { white-space: nowrap; padding-left: 12px; padding-right: 12px; text-align: center; }
.dm-tab td.dm-name { text-align: left; }
.dm-tab td[title] { cursor: help; }
.dm-fx { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 900px) { .sc-pair { grid-template-columns: minmax(0, 1fr); } .sc-dmg { display: block; overflow-x: auto; } }
/* editor */
.sc-edit { gap: 10px; }
.sc-ghead { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.sc-ghead .btn { margin-left: auto; }
/* Editor de Combate: o bloco de um estilo recolhe ao cabeçalho (os salvos começam recolhidos) */
.sc-ghead .chev-btn { margin: 0 0 3px -4px; }
.sc-gbody { display: flex; flex-direction: column; gap: 10px; }
.sc-edit.closed .sc-gbody { display: none; }
.sc-fold-sum { align-self: center; margin-top: 16px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sc-fold-sum b { color: var(--danger); font-weight: 600; }
.sc-ghead-g { align-items: center; }
.sc-ghead-g .chev-btn, .sc-ghead-g .sc-fold-sum { margin-top: 0; margin-bottom: 0; }
.sc-catlink { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; padding-bottom: 9px; }
.sc-rows { display: flex; flex-direction: column; gap: 8px; }
.sc-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sc-rows .sc-row:last-child { border-bottom: 0; }
.sc-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-f > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-f input, .sc-f select { background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 8px; color: var(--text); font: inherit; font-size: 14px; min-width: 0; }
.sc-f input[type=number] { width: 72px; text-align: right; font-variant-numeric: tabular-nums; }
.sc-f input:focus, .sc-f select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.sc-f.sc-name { flex: 1 1 220px; }
/* Adicionar estilo: a busca no catálogo, com a lista filtrada embaixo */
.sc-f .sk-pick input { width: 100%; box-sizing: border-box; }
/* Combate: a lista de sugestões do nome de uma linha, larga como as dos outros seletores */
.sc-row .sk-pick .suggest { min-width: 360px; z-index: 20; }
.sc-row .sk-pick .suggest span { font-weight: 600; color: var(--text); }
#scStyleSug { max-height: 320px; }
.sc-f.sc-base input { width: 150px; }
.sc-nh { min-width: 92px; font-weight: 700; font-size: 14px; padding: 7px 8px; border-radius: 8px; display: flex; flex-direction: column; }
.sc-nh small { font-weight: 500; font-size: 11px; color: var(--faint); }
.sc-nh.bonus { background: rgba(34, 197, 94, .14); color: #16a34a; }
.sc-row .icon-btn { margin-bottom: 2px; }
@media (max-width: 760px) { .sc-f.sc-name, .sc-f.sc-base, .sc-f.sc-base input { flex-basis: 100%; width: 100%; } }
.sc-def small.sc-alt { color: var(--muted); }
.sc-def .gnote { display: inline; margin-left: 4px; }

/* Ficha › Combate: tabelas em colunas (sem buracos entre tabelas de alturas diferentes), arrastáveis */
/* Tabelas de estilo sempre com 460px: o número de colunas e a largura da grade vêm de fitScMasonry. */
.sc-masonry { column-count: 1; column-gap: 14px; }
.sc-card { break-inside: avoid; margin-bottom: 14px; }
.sc-card .gtab { margin: 0; }
/* Estilo com pré-requisito não atendido (falta uma perícia que ele pede): borda e etiqueta vermelhas */
.sc-unmet .gtab, .box.sc-edit.sc-unmet { border-color: var(--danger); }
.sc-unmet-tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); font-family: var(--font-ui); font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; white-space: nowrap; }
.sc-req td small { color: var(--faint); }
.sc-req.miss td b, .sc-req.miss .gnh { color: var(--danger); }
.sc-req-line.miss b { color: var(--danger); }
/* Perícias de Combate: a tabela principal, em três lado a lado, com o total embaixo */
/* Combate em duas partes, Perícias de Combate e Estilos: cada uma com título, pontos e recolhível */
.sc-part { padding-top: 12px; border-top: 1px solid var(--line); }
.sc-part + .sc-part { margin-top: 10px; }
.sc-part-title { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.sc-main { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
/* A cópia das perícias dos estilos, sem os pontos (contam no estilo) */
.sc-copies .gpts { color: var(--faint); }
.sc-main .gtab { margin: 0; }
.sc-tab th:first-child { display: flex; align-items: center; gap: 6px; }
.sc-grip { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0 -4px -6px; border: 0; border-radius: 6px; background: transparent; color: var(--faint); cursor: grab; touch-action: none; }
.sc-grip:hover { color: var(--text); background: var(--surface); }
.sc-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--accent); }
.sc-card.dragging { position: fixed; z-index: 60; pointer-events: none; margin: 0; box-shadow: 0 16px 40px var(--shadow); transform: rotate(.6deg); }
.sc-card.dragging .sc-grip { cursor: grabbing; }
.sc-ph { break-inside: avoid; margin-bottom: 14px; border: 2px dashed var(--accent); border-radius: 14px; background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .sc-card.dragging { transform: none; } }

/* Ficha e Equip.: as seções na ordem escolhida (arrastando pela alça do cabeçalho). O espaço entre
   elas é do contêiner, não de cada uma; enquanto uma é arrastada, todas mostram só o cabeçalho. */
.sort-secs { display: flex; flex-direction: column; gap: 44px; }
.sort-secs.sorting { gap: 12px; }
.sort-secs.sorting .sort-sec section.gurps > :not(.gurps-head) { display: none; }
.sort-sec.dragging { position: fixed; z-index: 60; pointer-events: none; margin: 0; box-sizing: border-box; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 16px 40px var(--shadow); transform: rotate(.6deg); }
.sort-sec.dragging .sc-grip { cursor: grabbing; }
.sort-ph { box-sizing: border-box; border: 2px dashed var(--accent); border-radius: 12px; background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { .sort-sec.dragging { transform: none; } }

/* Ficha › Combate: pontos por estilo em grade, 3 por linha; cada célula com o nome e uma coluna Pts.
   A grade passa 1px da borda da caixa (que corta o que sobra), escondendo as linhas da última coluna
   e da última linha sem regras por posição; assim só o número de colunas muda em telas menores. */
.sc-tot { display: block; }
.sc-tot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-right: -1px; }
.sc-tot-grid:last-child { margin-bottom: -1px; }
.sc-tot-item { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; min-width: 0; font-size: 14px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.sc-tot-item > span { padding: 8px 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-tot .sc-tot-item > b { width: auto; min-width: 0; box-sizing: border-box; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 8px 6px; border-left: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-tot-headrow .sc-tot-item { background: var(--surface-2); }
.sc-tot-headrow .sc-tot-item > span, .sc-tot .sc-tot-headrow .sc-tot-item > b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 9px; padding-bottom: 9px; }
@media (max-width: 900px) { .sc-tot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-tot-headrow .sc-tot-item:nth-child(3) { display: none; } }
@media (max-width: 560px) { .sc-tot-grid { grid-template-columns: 1fr; } .sc-tot-headrow .sc-tot-item:nth-child(n+2) { display: none; } }

/* Ficha › Vantagens: vantagem, pontos e observações; editor com custo, níveis e modificador */
.av-tab td:first-child { width: 32%; }
.av-tab th:nth-child(2), .av-tab td.gpts { text-align: center; }
.av-tab th:nth-child(3), .av-tab td.av-notes { text-align: left; }
.av-tab td.av-notes { color: var(--muted); border-left: 1px solid var(--line); }
.av-tab td.gpts { border-left: 1px solid var(--line); }
.av-tab tfoot td { font-weight: 700; }
.sk-row.av-row { grid-template-columns: minmax(0, 1.2fr) 76px 66px 76px 70px minmax(0, 1fr) 32px; }
.sk-labels.av-row span:nth-child(n+2):nth-child(-n+5) { text-align: center; }
.sk-labels.av-row span:nth-child(6) { padding-left: 0; }
#avRows, #dvRows, #pqRows { display: flex; flex-direction: column; gap: 8px; }
#avRows .sk-row, #dvRows .sk-row { align-items: start; }
.av-pts { text-align: center; }
.av-warn { color: var(--accent); font-weight: 600; }
@media (max-width: 760px) {
  .sk-row.av-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sk-row.av-row .sk-nh { grid-column: auto; }
  .sk-row.av-row [data-f="notes"] { grid-column: 1 / 4; }
}

/* Ficha › Peculiaridades: peculiaridade, pontos (−1 cada) e observações */
.sk-row.pq-row { grid-template-columns: minmax(0, 1.2fr) 70px minmax(0, 1fr) 32px; }
.sk-labels.pq-row span:nth-child(3) { text-align: left; }
.av-tab tfoot small.av-warn { display: block; font-size: 11.5px; }
@media (max-width: 760px) {
  .sk-row.pq-row { grid-template-columns: 70px minmax(0, 1fr) 32px; }
  .sk-row.pq-row .sk-nh { grid-column: auto; }
}

/* Ficha › Vantagens: tamanho e perícias de um talento, embaixo da linha dele */
.av-talent { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.av-talent fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.av-talent legend { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0; margin-bottom: 6px; }
.av-tcount { text-transform: none; letter-spacing: 0; font-family: var(--font-sans, inherit); color: var(--faint); font-weight: 500; margin-left: 6px; }
.av-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.av-sizes legend { grid-column: 1 / -1; }
.av-sizes label, .av-tlist label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.av-sizes label { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }
.av-sizes label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.av-sizes small { display: block; font-size: 11.5px; color: var(--faint); }
.av-tlist small { font-size: 11.5px; color: var(--accent); }
/* Os campos do editor (.sk-row input) têm largura total, borda e fundo; aqui são só a bolinha e a caixa. */
.sk-row .av-talent input[type=radio], .sk-row .av-talent input[type=checkbox] { width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 2px 0 0; border: 0; border-radius: 0; background: none; accent-color: var(--accent); flex: none; }
.sk-row .av-talent input[type=radio]:focus, .sk-row .av-talent input[type=checkbox]:focus { outline-offset: 2px; }
.av-sizes label > span, .av-tlist label > span { min-width: 0; }
.av-tlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.av-tab td.av-notes small.av-warn { display: block; font-size: 11.5px; }

/* Ficha › Equip.: a carga no alto; a lista de equipamentos (tipo, item, quantidade, peso, custo,
   observações e onde está); o corpo, por configuração e parte; as mochilas */
/* Criar no alto, Carga no fim e, entre elas, as seções na ordem escolhida (.sort-secs, mais acima). */
.gear-tab { display: flex; flex-direction: column; gap: 44px; margin-top: 22px; }
.gear-notes { display: flex; flex-direction: column; gap: 8px; }
.gear-notes:empty { display: none; }
/* Meus Itens, os itens comuns: duas tabelas lado a lado (uma embaixo da outra em tela estreita) */
.eq-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 900px) { .eq-split { grid-template-columns: minmax(0, 1fr); } }
.eq-tab th, .eq-tab td { padding: 6px 10px; }
.eq-tab th:nth-child(2), .eq-tab td.eq-qty { text-align: center; width: 1%; }
.eq-tab td:nth-child(n+2):nth-child(-n+3) { border-left: 1px solid var(--line); white-space: nowrap; }
.eq-tab td:nth-child(3) { width: 1%; }
.eq-tab td:nth-child(3) small { white-space: nowrap; }
.eq-tab td b { font-size: 13.5px; }
.eq-tab td small { white-space: normal; }
.eq-tab td small.eq-where { color: var(--muted); }
.eq-tab td small.eq-note { color: var(--faint); font-style: italic; }
.eq-tab td.ab-acts { width: 1%; white-space: nowrap; border-left: 1px solid var(--line); padding: 4px 6px; }
.eq-tab td.ab-acts .icon-btn { display: inline-grid; }
.eq-grand { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; color: var(--muted); }
.eq-grand b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.eq-grand span { margin-right: auto; font-weight: 700; color: var(--text); }
/* Fora da carga: só na lista, numa configuração que não está em uso ou numa mochila guardada. */
.eq-tab tr.eq-stored td { color: var(--muted); }
.eq-tab tr.eq-stored td:first-child { box-shadow: inset 3px 0 0 var(--line-2); }
.eq-none { color: var(--faint); }
.eq-enc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-soft); font-size: 13px; }
.eq-enc svg { flex: none; color: var(--accent); }
.eq-enc span { flex: 1 1 260px; min-width: 0; }
/* O tipo de cada linha: um ícone com a cor dele (armadura, arma, item). */
.eq-kind { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 6px; vertical-align: -4px; border: 1px solid var(--line-2); background: var(--well); color: var(--muted); }
.eq-kind.k-armor { color: #3b82f6; background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .3); }
.eq-kind.k-weapon { color: var(--accent); background: var(--accent-soft); border-color: rgba(245, 158, 11, .3); }
.eq-kind.k-item { color: #16a34a; background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .3); }

/* Corpo: as configurações em abas, a em uso marcada; as partes numa tabela e, no editor, em caixas */
.seg.gear-confs { flex-wrap: wrap; margin-bottom: 0; }
.gear-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; background: var(--well); color: var(--muted); }
.gear-badge.on { background: rgba(34, 197, 94, .16); color: #16a34a; }
.gear-badge.warn { background: var(--accent-soft); color: var(--accent); cursor: help; white-space: nowrap; }
.gear-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px; color: var(--muted); }
.gear-bar > span { flex: 1 1 220px; min-width: 0; }
.gear-bar.on { border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .08); color: var(--text); }
.gear-bar.on svg { color: #16a34a; vertical-align: -2px; margin-right: 4px; }
.gear-chip { display: inline-flex; align-items: center; flex-wrap: wrap; margin: 2px 6px 2px 0; padding: 3px 9px 3px 4px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--well); font-size: 13px; line-height: 1.3; min-width: 0; }
.gear-chip .eq-kind { width: 18px; height: 18px; margin-right: 5px; vertical-align: 0; }
.gtab td .gear-chip small, .gear-chip small { display: inline; margin-left: 6px; font-size: 11px; color: var(--faint); }
.gear-use { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.gear-use input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: none; }
.gear-w { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gear-confs-edit { display: flex; flex-direction: column; gap: 8px; }
.gear-conf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto 32px; gap: 8px 10px; align-items: center; }
.gear-conf-row input[type=text], .gear-slots select, .gear-slot input { min-width: 0; box-sizing: border-box; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 8px; color: var(--text); font: inherit; font-size: 14px; }
.gear-conf-row input[type=text]:focus, .gear-slots select:focus, .gear-slot input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.gear-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.gear-part { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.gear-part-name small { margin-left: 6px; font-size: 11px; color: var(--faint); }
.gear-slots { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gear-slot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gear-add { display: flex; flex-direction: column; gap: 5px; }
.gear-add select { width: 100%; min-width: 0; padding: 5px 8px; font-size: 13px; }
.gear-add select:disabled { opacity: .55; cursor: not-allowed; }
.gear-slots > select { width: 100%; min-width: 0; padding: 5px 8px; font-size: 13px; }
.gear-slots > select:disabled { opacity: .55; cursor: not-allowed; }
.gear-pick { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; border: 1px dashed var(--line-2); border-radius: 10px; }
.gear-pick button.gear-chip { cursor: pointer; font: inherit; font-size: 13px; color: var(--text); }
.gear-pick button.gear-chip:hover:not(:disabled) { border-color: var(--accent); }
.gear-pick button.gear-chip:disabled { opacity: .5; cursor: not-allowed; }
.gear-slot .gear-chip { flex: 1 1 auto; margin: 0; }
.gear-slot input[type=number] { width: 72px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .gear-conf-row { grid-template-columns: auto minmax(0, 1fr) 32px; }
  .gear-conf-row .gear-w { grid-column: 1; }
  .gear-conf-row [data-bsel] { grid-column: 2 / -1; }
}

/* Corpo: um cartão por parte (4 colunas; 2 no tablet; 1 no celular), depois o que vai fora das partes */
.gear-body { display: flex; flex-direction: column; gap: 0; }
/* The parts' table and the carried ones touch, as one table: square corners where they meet. */
.gear-body > .wtab-wrap:has(+ .gb-carry-box .gb-small) .gb-tab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gb-carry-box .gb-small { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.gb-carry-box > .gb-none { padding-top: 6px; }
.gear-body > .gb-weight { margin-top: 6px; }
/* Corpo: the parts in a table (bodyPartsHtml), one row per armor worn */
.gb-tab td { vertical-align: middle; }
.gb-tab th.gb-aname-h, .gb-tab td.gb-aname { text-align: left; }
.gb-tab th.gb-roll-h, .gb-tab td.gb-roll { text-align: center; white-space: nowrap; }
.gb-tab td.gb-roll { width: 120px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gb-tab td.gb-pname { white-space: nowrap; }
.gb-tab td.gb-pname b { font-size: 14px; }
.gb-tab td.gb-pname small { display: inline; margin-left: 6px; font-size: 11px; color: var(--faint); }
.gb-tab td.gb-aname { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.gb-tab td.gb-aname .gb-aname-in { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.gb-tab td.gb-aname .eq-kind { width: 18px; height: 18px; flex: none; }
.gb-tab th.gb-dr-h, .gb-tab td.gb-dr-cell { width: 110px; text-align: center; white-space: nowrap; }
.gb-tab tr.gb-empty td { background: transparent; }
.gb-tab tr.gb-empty td[colspan] { text-align: left; }
.gb-layers { display: inline-block; margin-left: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.gb-none { font-size: 12.5px; color: var(--faint); }
.gb-weight { display: flex; align-items: baseline; gap: 6px; margin-left: auto; font-size: 12px; color: var(--muted); }
.gb-weight b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .gb-weight { margin-left: 0; } .gb-tab td.gb-pname { white-space: normal; } }

/* Mochilas: um cartão por mochila; as que não estão em uso, apagadas */
.gear-pack { display: flex; flex-direction: column; gap: 10px; }
.gear-pack .gtab { margin: 0; }
.gear-pack td.eq-qty { text-align: center; }
.gear-pack tr.gear-own td { background: var(--surface-2); }
.gear-pack.off .eq-split, .gear-pack.off .gp-empty { opacity: .72; }
.gp-empty { margin: 0; font-size: 13px; font-style: italic; color: var(--faint); }
.gp-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.gp-total { margin-left: auto; display: flex; align-items: baseline; gap: 6px; }
.gp-total b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.gp-total small { font-size: 11.5px; color: var(--muted); }
.gear-pack-edit .gear-slots > select { align-self: flex-start; max-width: 100%; }
.gear-ptot { margin: 0; font-size: 13px; color: var(--muted); }

/* Criar Armadura: os conjuntos em cartões; o construtor com modelo base, qualidade, localizações e resumo */
.ab-tab th, .ab-tab td { white-space: nowrap; }
.ab-tab th:first-child, .ab-tab td:first-child, .ab-tab th:nth-child(2), .ab-tab td:nth-child(2) { text-align: left; }
.ab-tab tr.on td { background: var(--accent-soft); }
.ab-tab td select { background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 6px; color: var(--text); font: inherit; font-size: 13px; }
.ab-tab td input[type=number], .ab-tab td input[type=text] { width: 86px; box-sizing: border-box; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 6px; color: var(--text); font: inherit; font-size: 13px; text-align: right; }
.ab-tab td input[type=text] { width: 220px; text-align: left; }
.ab-tab td input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.ab-dr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.ab-dr-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px 14px; }
.ab-grid .ab-wide { grid-column: 1 / -1; }
.ab-grid input, .ab-grid textarea { width: 100%; box-sizing: border-box; }
.ab-grid textarea { background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 8px; color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.ab-mods { display: flex; flex-direction: column; gap: 8px; }
.ab-lv { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ab-lv input { width: 64px; text-align: right; }
.gstat input { width: 100%; box-sizing: border-box; margin-top: 2px; }
/* Meus Itens: as armaduras de Criar Armadura (Armadura | RD | Custo | Peso | Ajustes | Notas) */
#equip .wtab-wrap + .eq-split, #equip .wtab-wrap + .wtab-wrap, #equip .wtab-wrap + .eq-grand, #equip .eq-split + .eq-grand { margin-top: 12px; }
/* Criar: os quatro cartões numa linha (dois em telas médias, um no celular) */
#createSec { gap: 10px; }
#createSec .gurps-head .hint-text { margin: 0; }
.cr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cr-grid > .cr-cell { margin: 0; display: flex; }
.cr-card { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.cr-card:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); box-shadow: 0 6px 18px -10px var(--shadow); }
.cr-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cr-card.off { cursor: default; grid-template-columns: auto minmax(0, 1fr); }
.cr-card.off:hover { border-color: var(--line); background: var(--surface); transform: none; box-shadow: none; }
.cr-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.cr-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-txt b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.cr-txt em { white-space: nowrap; font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.cr-txt small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.cr-plus { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); }
@media (max-width: 1100px) { .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cr-grid { grid-template-columns: minmax(0, 1fr); } }
.ib-grid { display: grid; grid-template-columns: minmax(0, 2fr) 80px 120px 120px; gap: 10px 12px; }
.ib-grid .ib-notes { grid-column: 1 / -1; }
.ib-grid .sc-f input { width: 100%; max-width: none; box-sizing: border-box; }
@media (max-width: 760px) { .ib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ib-grid .ib-name { grid-column: 1 / -1; } }
.ab-items td.gval.bonus { color: var(--accent); }
.ab-items td.wmode { font-style: italic; color: var(--muted); }
.ab-items th, .ab-items td { white-space: nowrap; }
.ab-items th:first-child, .ab-items td:first-child, .ab-items th:nth-child(4), .ab-items th:nth-child(5), .ab-items td.ab-txt { text-align: left; }
.ab-items td:first-child small { white-space: normal; }
.ab-items td.ab-txt { white-space: normal; min-width: 160px; max-width: 340px; font-size: 12.5px; color: var(--muted); }
/* Descrição of the gear tables (armas, armaduras, escudos and the other items): cut short, whole on hover */
.gtab th.ab-desc-h, .gtab td.ab-desc { text-align: left; }
.gtab td.ab-desc { white-space: normal; min-width: 160px; max-width: 320px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.gtab td.ab-desc[title] { cursor: help; }
.ab-items td.gval small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.ab-items td.ab-acts { width: 1%; }
/* Armas: tudo centralizado, menos o nome; a marca de "fora da carga" só na célula do nome (que
   ocupa as linhas de todos os ataques) */
.gtab.ab-items.wb-items th, .gtab.ab-items.wb-items td { text-align: center; }
.gtab.ab-items.wb-items th:first-child, .gtab.ab-items.wb-items td.wb-name { text-align: left; }
.gtab.ab-items.wb-items tr.eq-stored td:first-child { box-shadow: none; }
.gtab.ab-items.wb-items tr.eq-stored td.wb-name { box-shadow: inset 3px 0 0 var(--line-2); }
.ab-items td.ab-acts .icon-btn { display: inline-grid; }
.ab-items tr.eq-stored td { color: var(--muted); }
.ab-items tr.eq-stored td:first-child { box-shadow: inset 3px 0 0 var(--line-2); }
.ab-adjs { display: flex; flex-direction: column; gap: 8px; }
.ab-adjs:empty { display: none; }
.ab-adj { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 12px; }
.ab-adj-name { flex: 1 1 320px; min-width: 0; }
.ab-adj-name input { width: 100%; box-sizing: border-box; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; color: var(--text); font: inherit; font-size: 14px; }
.ab-adj-name small { display: block; margin-top: 3px; font-size: 12px; }
.ab-adj-name small svg { vertical-align: -2px; margin-right: 4px; }
.ab-adj .ab-lv { padding-top: 4px; }
.ab-adj .ab-lv input { width: 90px; }
/* Peso: the number and its unit (% or lbs) side by side */
.ab-adj .ab-weight { gap: 4px; }
.ab-adj .ab-weight select { font: inherit; font-size: 13px; padding: 1px 4px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--well); color: var(--text); }
.ab-flex { margin-top: 10px; }
.ab-loc-pick { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px 14px; align-items: end; }
.ab-loc-pick select { width: 100%; box-sizing: border-box; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px; color: var(--text); font: inherit; font-size: 14px; }
@media (max-width: 560px) { .ab-loc-pick { grid-template-columns: 1fr; } }
.suggest .ab-custom-opt span { color: var(--accent); font-weight: 600; }
.suggest .ab-custom-opt svg { vertical-align: -2px; margin-right: 4px; }
.ab-custom .gstat input { width: 100%; box-sizing: border-box; margin-top: 2px; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 6px; color: var(--text); font: inherit; font-size: 13px; }
.ab-custom .gstat select { width: 100%; box-sizing: border-box; margin-top: 2px; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 6px; color: var(--text); font: inherit; font-size: 13px; }
/* Criar Arma, arma personalizada: os ataques digitados */
.wb-atk-edit td { padding: 4px 6px; }
.wb-atk-edit input { width: 100%; min-width: 64px; box-sizing: border-box; background: var(--well); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 6px; color: var(--text); font: inherit; font-size: 13px; }
.wb-atk-edit input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
@media (max-width: 760px) { .ab-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .av-sizes { grid-template-columns: 1fr; } }

/* Ficha › Combate: a conta de cada defesa */
.sc-def small.sc-calc { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Armas e armaduras (js/tabs/tab-armas.js, tab-armaduras.js): a tabela de ataques e os formulários,
   mais largos que os outros por causa das linhas de ataque */
.wtab-wrap { overflow-x: auto; }
.wtab th, .wtab td { text-align: left; white-space: nowrap; }
.wtab td small { white-space: normal; min-width: 160px; }
.wtab .wmode { color: var(--muted); font-style: italic; }
.wtab .wnotes { white-space: normal; min-width: 90px; }
.wtab .none { color: var(--faint); }
.modal.modal-wide { max-width: 780px; }
.sc-f.wf-short input { width: 84px; }
.sc-f.wf-dmg input { width: 140px; }
.sc-f.wf-notes input { width: 110px; }

/* Efeitos das vantagens: editor no formulário da vantagem (Mestre) e a lista na página */
.modal:has(#advForm) { max-width: 760px; }
/* Formulário de estilo: cada lista escolhida dos catálogos, em etiquetas */
.modal:has(#styleForm) { max-width: 640px; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-chips:empty { display: none; }
.sf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 13px; }
.sf-chip button { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.sf-chip button:hover { background: var(--well); color: var(--text); }
.sf-list .sk-pick input { width: 100%; box-sizing: border-box; }
.fx-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fx-box legend { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 6px; }
#afFx { display: flex; flex-direction: column; gap: 10px; }
.fx-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fx-line { display: grid; grid-template-columns: 150px minmax(0, 1fr) 84px 58px 58px auto auto 32px; gap: 6px; align-items: center; }
.fx-line2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fx-row input[type=text], .fx-row input[type=number], .fx-row select { min-width: 0; width: 100%; box-sizing: border-box; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 7px; color: var(--text); font: inherit; font-size: 13px; }
.fx-row input[type=number] { text-align: right; }
.fx-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.fx-chk input { accent-color: var(--accent); }
.fx-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.fx-list small { display: block; color: var(--muted); font-size: 12.5px; }
.gtab .gval.fx { background: rgba(34, 197, 94, .1); }
.gtab .gval .fxnote { color: #16a34a; }
@media (max-width: 760px) {
  .fx-line { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fx-line [data-x="names"], .fx-line [data-x="key"], .fx-line [data-x="target"] { grid-column: span 2; }
  .fx-line2 { grid-template-columns: 1fr; }
}
/* Meus Itens: a given name and, on the same line, the model it is ("Reserva — Kite Shield") */
.gear-model { font-weight: 500; color: var(--muted); }
/* Mochilas and Casa: a line of the list picked by typing its name (gearPickerHtml) */
/* In .gear-slots, a column: no flex-basis (it would be a height), the width of the column. */
.gear-picker { flex: none; width: 100%; min-width: 0; }
.gear-picker input { width: 100%; box-sizing: border-box; background: var(--well); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; color: var(--text); font: inherit; font-size: 13px; }
.gear-picker input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.gear-picker .suggest { max-height: 300px; }
.gear-picker .suggest button[disabled] { opacity: .5; cursor: not-allowed; }
.gear-picker .suggest button[hidden] { display: none; }
.gear-picker-none { margin: 0; padding: 8px 10px; font-size: 12.5px; color: var(--faint); }
.gear-picker-none[hidden] { display: none; }
/* Corpo: what is carried outside the parts, as a table (bodyCarryTableHtml), and the weight of it all */
.gb-carry-box { display: flex; flex-direction: column; gap: 8px; }
/* The tables of Meus Itens, smaller, in Corpo */
/* Stacked with no gap, as one table: no totals, one border between them, rounded only outside. */
.gb-small { display: flex; flex-direction: column; gap: 0; border-radius: 14px; overflow: hidden; }
.gb-small tfoot { display: none; }
.gb-small .gtab { border-radius: 0; }
.gb-small > * + * { margin-top: -1px; }
/* The items' two tables side by side touch too (one border between them). */
.gb-small .eq-split { gap: 0; }
.gb-small .eq-split > .gtab + .gtab { margin-left: -1px; }
@media (max-width: 900px) { .gb-small .eq-split > .gtab + .gtab { margin-left: 0; margin-top: -1px; } }
.gb-small .gtab { font-size: 12.5px; }
.gb-small .gtab th { font-size: 9.5px; padding: 7px 10px; }
.gb-small .gtab td { padding: 5px 10px; }
.gb-small .gtab .gval { font-size: 13px; }
.gb-small .gtab td small { font-size: 10.5px; }
.gb-small .gtab td.ab-desc, .gb-small .gtab td.ab-txt { font-size: 11.5px; }
.gb-small .eq-kind { width: 18px; height: 18px; }
.gear-body > .gb-weight { justify-content: flex-end; }

/* =====================================================================
   Apresentação de Personagem em tempo real (Showcase / Broadcast)
   ===================================================================== */
.char-pres-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(4, 7, 15, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  animation: charPresFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  box-sizing: border-box;
}

@keyframes charPresFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.char-pres-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  animation: charPresSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes charPresSlideUp {
  from { transform: translateY(18px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.char-pres-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
}

.char-pres-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.char-pres-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--well);
  border: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.char-pres-close:hover {
  background: var(--line-2);
  color: var(--text);
  transform: scale(1.06);
}

.char-pres-vis-menu {
  position: relative;
  display: inline-block;
}

.char-pres-reveal-btn {
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--well);
  border: 1px solid var(--line-2);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.char-pres-reveal-btn:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
}

.char-pres-reveal-btn[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--accent);
}

.char-pres-vis-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto !important;
  z-index: 100;
  text-align: left;
}

.char-pres-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent);
  border: 1px solid rgba(245, 158, 11, 0.3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0;
}

.char-pres-photo-wrap {
  width: 100%;
  max-height: 380px;
  min-height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--well);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
  position: relative;
}

.char-pres-photo-wrap img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.char-pres-initials {
  font-size: 56px;
  font-weight: 800;
  color: var(--tag-pink);
  letter-spacing: 0.02em;
}

.char-pres-name {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text);
  line-height: 1.25;
}

.char-pres-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 18px;
  line-height: 1.4;
}

.char-pres-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.char-pres-btn-more {
  width: 100%;
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.16s ease;
}

.char-pres-btn-more:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}


/* NH: o nível em destaque, o "IQ+1" discreto; um valor calculado abre a conta (ficha-contas.js) */
.nh-rel { font-size: 11px; font-weight: 500; color: var(--faint); }
.nh-lvl { font-size: 15px; font-weight: 700; color: inherit; }
.nh-lvl.none { font-size: 12px; font-weight: 500; color: var(--faint); }
.gtab .gnh, .sk-nh, .sc-nh { font-weight: 500; }
.calc-why { text-align: inherit; }
/* O NH fica como "(IQ+1) 12", sem sublinhado; os outros valores calculados mantêm o pontilhado. */
.calc-why:has(.nh-lvl) { border-bottom: 0; }
.calc-why:hover .nh-lvl { color: var(--accent); }