:root {
  color-scheme: dark;
  --background: #060708;
  --surface: #0d0f11;
  --surface-raised: #15181b;
  --surface-soft: #1c2024;
  --border: #292e33;
  --border-strong: #535b63;
  --text: #f3f1eb;
  --muted: #a6a9aa;
  --faint: #73797d;
  --red: #d92332;
  --red-bright: #ff3c4b;
  --red-dark: #8f101d;
  --red-soft: rgba(217, 35, 50, 0.13);
  --cyan: #6dd7e3;
  --blood: #df2938;
  --death: #aeb4b7;
  --knowledge: #d5aa55;
  --energy: #a453ff;
  --fear: #d9f7ff;
  --green: #52c77c;
  --warning: #f3b84b;
  --radius: 12px;
  --radius-small: 7px;
  --shadow: 0 22px 65px rgba(0, 0, 0, 0.48);
  --motion: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--background);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 14% -5%, rgba(217, 35, 50, 0.15), transparent 29rem),
    radial-gradient(circle at 86% 14%, rgba(164, 83, 255, 0.055), transparent 25rem),
    linear-gradient(115deg, transparent 0 49.3%, rgba(255, 255, 255, 0.018) 49.3% 50.7%, transparent 50.7%) 0 0 / 34px 34px,
    var(--background);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  content: "";
}

body::before {
  inset: 0;
  opacity: 0.24;
  background-image:
    repeating-radial-gradient(circle at 18% 28%, transparent 0 23px, rgba(255, 255, 255, 0.025) 24px 25px, transparent 26px 41px),
    linear-gradient(90deg, transparent 49.8%, rgba(255, 255, 255, 0.018) 50%, transparent 50.2%);
  background-size: 310px 310px, 180px 100%;
  mask-image: linear-gradient(to bottom, #000, transparent 84%);
}

body::after {
  width: 48rem;
  height: 48rem;
  top: 58%;
  right: -25rem;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255, 255, 255, 0.008), 0 0 0 160px rgba(217, 35, 50, 0.012);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(126, 208, 214, 0.42);
  outline-offset: 2px;
}

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px max(18px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid rgba(217, 35, 50, 0.32);
  background: linear-gradient(90deg, rgba(7, 8, 9, 0.97), rgba(14, 15, 17, 0.93), rgba(7, 8, 9, 0.97));
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.topbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red) 18%, transparent 48%, var(--knowledge) 72%, transparent);
  opacity: 0.45;
  content: "";
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 60, 75, 0.78);
  border-radius: 50%;
  background: radial-gradient(circle, var(--red-soft), transparent 66%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  box-shadow: 0 0 0 4px rgba(217, 35, 50, 0.08), inset 0 0 18px rgba(217, 35, 50, 0.12);
  transition: transform 320ms var(--motion), box-shadow 320ms ease;
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(243, 241, 235, 0.22);
  content: "";
  transform: rotate(45deg);
}

.brand-mark::after {
  inset: 10px;
  border-color: rgba(217, 35, 50, 0.4);
  transform: rotate(22.5deg);
}

.brand:hover .brand-mark {
  transform: rotate(-5deg) scale(1.04);
  box-shadow: 0 0 0 5px rgba(217, 35, 50, 0.1), 0 0 28px rgba(217, 35, 50, 0.22);
}

.brand-copy {
  display: grid;
}

.brand-copy strong {
  font-size: 0.96rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.brand-copy small {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

#app {
  width: min(1120px, calc(100% - 32px));
  min-height: calc(100vh - 150px);
  margin: 0 auto;
  padding: 34px 0 56px;
}

#app:focus {
  outline: none;
}

.site-footer {
  padding: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--faint);
  font-size: 0.78rem;
  text-align: center;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.46);
}

h2 {
  margin-bottom: 6px;
  font-size: 1.18rem;
}

h3 {
  margin-bottom: 4px;
  font-size: 1rem;
}

.eyebrow {
  margin-bottom: 9px;
  color: var(--red-bright);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.84rem;
}

.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 26px;
}

.page-heading p {
  max-width: 650px;
  margin-bottom: 0;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
  transition: 140ms ease;
}

.button:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.button.primary {
  border-color: #ef4954;
  background: linear-gradient(180deg, #e93440, #b91828);
  box-shadow: 0 8px 24px rgba(185, 24, 40, 0.25);
}

.button.primary:hover {
  background: linear-gradient(180deg, #f1424e, #c61d2d);
}

.button.ghost {
  border-color: var(--border);
  background: transparent;
}

.button.danger {
  border-color: rgba(226, 46, 58, 0.4);
  background: var(--red-soft);
  color: #ff9ca4;
}

.button.compact {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 0.84rem;
}

.empty-state,
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(28, 31, 36, 0.96), rgba(14, 16, 19, 0.96));
  box-shadow: var(--shadow);
}

.empty-state {
  display: grid;
  min-height: 340px;
  place-items: center;
  padding: 44px 22px;
  text-align: center;
}

.empty-state-inner {
  max-width: 460px;
}

.empty-sigil {
  display: grid;
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  place-items: center;
  border: 1px solid rgba(226, 46, 58, 0.55);
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-size: 2rem;
  font-weight: 900;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.character-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.character-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.avatar {
  display: grid;
  overflow: hidden;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-raised);
  font-weight: 900;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-lg {
  width: 84px;
  height: 84px;
  font-size: 1.3rem;
}

.photo-upload-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.photo-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-upload-button {
  cursor: pointer;
}

.character-card h2 {
  margin: 0;
}

.character-meta,
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.badge.red {
  border-color: rgba(226, 46, 58, 0.38);
  background: var(--red-soft);
  color: #ff9ca4;
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.card-actions .button:first-child {
  flex: 1;
}

.wizard-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
}

.wizard-sidebar,
.wizard-content,
.sheet-sidebar,
.sheet-main {
  padding: 22px;
}

.wizard-sidebar {
  align-self: start;
  position: sticky;
  top: calc(var(--topbar-height, 76px) + 18px);
}

.wizard-steps {
  display: grid;
  gap: 5px;
  margin-top: 18px;
}

.wizard-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.wizard-step-number {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 0.76rem;
  font-weight: 850;
}

.wizard-step.active {
  background: var(--red-soft);
  color: #fff;
}

.wizard-step.active .wizard-step-number,
.wizard-step.done .wizard-step-number {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.wizard-step.done {
  color: var(--text);
}

.wizard-content {
  min-height: 540px;
}

.wizard-step-content.view-enter {
  animation: content-reveal 360ms var(--motion) both;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.form-grid.one-column {
  grid-template-columns: 1fr;
}

.field {
  display: grid;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label,
.field-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea,
.inline-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: #0c0e11;
  color: var(--text);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field-help {
  color: var(--faint);
  font-size: 0.76rem;
  line-height: 1.4;
}

.locked-value {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 46, 58, 0.38);
  border-radius: var(--radius-small);
  background: rgba(226, 46, 58, 0.07);
  font-weight: 800;
}

.locked-value small {
  color: var(--muted);
  font-weight: 650;
}

.nex-picker {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  min-height: 64px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  background: #0c0e11;
}

.nex-picker button {
  border: 0;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 1.35rem;
}

.nex-picker button:hover:not(:disabled) {
  background: rgba(226, 46, 58, 0.16);
}

.nex-picker button:disabled {
  color: var(--faint);
  cursor: not-allowed;
}

.nex-picker output {
  display: grid;
  place-content: center;
  text-align: center;
}

.nex-picker output strong {
  font-size: 1.25rem;
}

.nex-picker output small {
  color: var(--muted);
  font-size: 0.72rem;
}

.creator-automatic-list { padding: 0 16px 8px; }
.creator-automatic-list p { line-height: 1.5; overflow-wrap: anywhere; }
.wizard-content .level-up-choice-stack { margin-bottom: 20px; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.attribute-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.attribute-control {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 15px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.attribute-control strong {
  font-size: 0.77rem;
  letter-spacing: 0.09em;
}

.attribute-number {
  width: 62px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
}

.stepper {
  display: flex;
  gap: 5px;
}

.stepper button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  cursor: pointer;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.resource-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.resource-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.resource-card strong {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resource-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.resource-pair input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.65rem;
  font-weight: 900;
  text-align: center;
}

.resource-pair span {
  color: var(--faint);
}

.resource-card.calculated {
  background: linear-gradient(145deg, color-mix(in srgb, var(--resource-color, var(--red)), transparent 90%), rgba(255, 255, 255, 0.02));
}

.resource-card.calculated strong {
  color: var(--resource-color, var(--red));
}

.calculated-value {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 900;
}

.calculation-box {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(126, 208, 214, 0.22);
  border-radius: 12px;
  background: rgba(126, 208, 214, 0.045);
}

.calculation-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 1.4fr);
  gap: 8px 20px;
}

.calculation-grid span {
  color: var(--muted);
}

.calculation-grid b {
  text-align: right;
}

.origin-preview {
  margin-top: 20px;
}

.sheet-supplement-button {
  appearance: none;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  width: 100%;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px solid rgba(226, 46, 58, 0.32);
  border-radius: 11px;
  background:
    linear-gradient(100deg, rgba(226, 46, 58, 0.13), transparent 48%),
    #0c0e11;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: 140ms ease;
}

.sheet-supplement-button:hover {
  border-color: rgba(226, 46, 58, 0.62);
  background:
    linear-gradient(100deg, rgba(226, 46, 58, 0.2), transparent 55%),
    #111317;
  transform: translateY(-1px);
}

.sheet-supplement-button > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sheet-supplement-button strong,
.sheet-supplement-button small {
  display: block;
}

.sheet-supplement-button strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-supplement-button small {
  color: var(--muted);
  font-size: 0.76rem;
}

.supplement-sigil {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--red);
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  box-shadow: inset 0 0 15px rgba(226, 46, 58, 0.22);
}

.optional-rules-dialog {
  position: fixed;
  inset: 0;
  width: min(680px, calc(100vw - 28px));
  height: auto;
  max-height: min(720px, calc(100vh - 28px));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #15171a;
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
}

.optional-rules-dialog::backdrop {
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(4px);
}

.dialog-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(110deg, rgba(226, 46, 58, 0.11), transparent 55%);
}

.dialog-heading h2 {
  margin: 2px 0 0;
  font-size: clamp(1.18rem, 3vw, 1.55rem);
}

.dialog-close {
  appearance: none;
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}

.icon-button {
  appearance: none;
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 220ms var(--motion);
}

.icon-button:hover {
  border-color: var(--red-bright);
  background: rgba(217, 35, 50, 0.13);
  color: #fff;
  transform: scale(1.06);
}

.optional-rule-list {
  display: grid;
  gap: 1px;
  background: var(--border);
}

.optional-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 20px;
  background: #15171a;
}

.optional-rule h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.optional-rule p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.binary-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(88px, 108px));
  overflow: hidden;
  border: 1px solid var(--red);
  border-radius: 8px;
  background: #0c0e11;
}

.binary-toggle button {
  appearance: none;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.binary-toggle button + button {
  border-left: 1px solid rgba(226, 46, 58, 0.45);
}

.binary-toggle button.active {
  background: var(--red);
  color: #fff;
}

.attribute-budget {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--muted);
}

.attribute-budget strong {
  color: var(--warning);
  font-size: 1.1rem;
}

.attribute-budget.complete {
  border-color: rgba(82, 199, 124, 0.45);
}

.attribute-budget.complete strong {
  color: var(--green);
}

.skill-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid rgba(235, 181, 73, 0.35);
  border-radius: 11px;
  background: rgba(235, 181, 73, 0.05);
}

.skill-progress.complete {
  border-color: rgba(82, 199, 124, 0.4);
  background: rgba(82, 199, 124, 0.06);
}

.skill-choice-block {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

fieldset.skill-choice-block {
  border-color: var(--border);
}

.skill-choice-block legend,
.skill-choice-block h2 {
  padding: 0 6px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 850;
}

.skill-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.skill-group {
  display: grid;
  gap: 8px;
}

.skill-group-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.skill-counter {
  color: var(--warning);
}

.skill-counter.complete {
  color: var(--green);
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.skill-grid.short {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skill-option {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0d0f12;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
}

.skill-option:hover:not(.disabled) {
  border-color: var(--border-strong);
}

.skill-option.selected {
  border-color: rgba(226, 46, 58, 0.55);
  background: rgba(226, 46, 58, 0.1);
}

.skill-option.disabled {
  color: var(--faint);
  cursor: not-allowed;
  opacity: 0.55;
}

.skill-option input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--red);
}

.skill-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-chip {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(126, 208, 214, 0.24);
  border-radius: 999px;
  background: rgba(126, 208, 214, 0.06);
  color: #d7f5f7;
  font-size: 0.82rem;
  font-weight: 750;
}

.review-list {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
}

.review-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.review-row span:first-child {
  color: var(--muted);
}

.sheet-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 18px;
}

.sheet-sidebar {
  align-self: start;
}

.agent-identity {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.agent-identity h1 {
  overflow-wrap: anywhere;
}

.sheet-resources {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.live-resource {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
}

.live-resource-head,
.live-resource-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.live-resource-head {
  margin-bottom: 9px;
}

.live-resource-head strong {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.live-resource-controls button {
  width: 35px;
  height: 35px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  cursor: pointer;
}

.live-resource-value {
  min-width: 84px;
  text-align: center;
}

.resource-current-input {
  width: 2.6ch;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.resource-current-input::-webkit-outer-spin-button,
.resource-current-input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.resource-current-input {
  appearance: textfield;
}

.resource-current-input:focus {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}


.session-control {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
  padding: 13px;
  border: 1px solid rgba(226, 46, 58, 0.3);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(226, 46, 58, 0.08), rgba(255, 255, 255, 0.02));
}

.session-last-use small {
  color: var(--muted);
  font-size: 0.7rem;
}

.session-budget {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 9px 0;
  border-block: 1px solid var(--border);
  font-size: 0.76rem;
}

.session-budget > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.session-budget dt { color: var(--muted); }
.session-budget dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }

.active-effects {
  display: grid;
  gap: 6px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.active-effects-label {
  color: var(--muted);
  font-size: 0.7rem;
}

.active-effect-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid rgba(217, 35, 50, 0.45);
  border-radius: 8px;
  background: rgba(217, 35, 50, 0.12);
}

.active-effect-chip strong {
  font-size: 0.76rem;
}

.active-effect-chip small {
  display: block;
  color: var(--red-bright, #ff5b68);
  font-size: 0.68rem;
}

.active-effect-chip button {
  min-height: 32px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #171a1f;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 800;
}

.active-effect-chip button:hover {
  border-color: var(--red);
}

.stat-card-active-effect {
  border-color: rgba(217, 35, 50, 0.55);
  background: rgba(217, 35, 50, 0.1);
}

.stat-card-active-effect strong {
  color: var(--red-bright, #ff5b68);
}

.session-history summary {
  padding: 5px 0;
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
}

.session-last-use button {
  min-height: 44px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #171a1f;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
}

.session-last-use button:hover {
  border-color: var(--red);
}

.session-last-use {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.session-last-use strong,
.session-last-use small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-last-use strong,
.session-last-use small {
  grid-column: 1;
}

.session-last-use button {
  grid-column: 2;
  grid-row: 1 / 3;
}

.sheet-section {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.sheet-section + .sheet-section {
  margin-top: 14px;
}

.resistances-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
}

.resistances-title {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resistances-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.resistance-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.78rem;
  cursor: help;
}

.resistance-chip strong {
  color: var(--muted);
  font-weight: 700;
}

.history-card {
  margin-top: 14px;
}

.history-body {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

.history-body .autosave-field {
  min-height: 90px;
}

.benefit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.benefit-list > div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.benefit-list span,
.benefit-list strong {
  display: block;
}

.benefit-list span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-heading h2 {
  margin: 0;
}

.sheet-attributes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.sheet-attribute {
  padding: 14px 6px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #0d0f12;
  text-align: center;
}

.sheet-attribute span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.sheet-attribute strong {
  display: block;
  font-size: 1.8rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat-card {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.stat-card strong {
  font-size: 1.35rem;
}

.autosave-field {
  width: 100%;
  min-height: 130px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0c0e11;
  color: var(--text);
  resize: vertical;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.78rem;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(82, 199, 124, 0.65);
}

.sheet-main {
  min-width: 0;
}

.sheet-tabs {
  display: flex;
  gap: 4px;
  margin: -8px -8px 18px;
  padding: 8px 8px 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}

.sheet-tabs button {
  appearance: none;
  flex: 0 0 auto;
  padding: 10px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 800;
}

.sheet-tabs button:hover {
  color: var(--text);
}

.sheet-tabs button.active {
  border-bottom-color: var(--red);
  color: #fff;
}

.formation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.summary-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.summary-side {
  min-width: 0;
}

.summary-side .stat-grid {
  grid-template-columns: 1fr;
}

.summary-main {
  min-width: 0;
}

.patent-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.patent-row label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.patent-row select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #0c0e11;
  color: var(--text);
  font-weight: 760;
}

.skills-section {
  overflow: hidden;
  padding: 16px 16px 14px;
}

.skills-section .section-heading {
  margin-bottom: 10px;
}

.skills-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #0c0e11;
}

.skills-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.skills-table th,
.skills-table td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  text-align: center;
  vertical-align: middle;
}

.skills-table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #171a1e;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skills-table thead th:first-child,
.skills-table tbody th {
  text-align: left;
}

.skills-table tbody th {
  min-width: 158px;
  color: var(--text);
  font-size: 0.86rem;
}

.skills-table tbody tr:last-child th,
.skills-table tbody tr:last-child td {
  border-bottom: 0;
}

.skills-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.skill-die {
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  place-items: center;
  color: var(--faint);
}

.skill-attribute {
  display: block;
  font-size: 0.8rem;
  font-weight: 850;
}

.skills-table td small {
  display: block;
  color: var(--faint);
  font-size: 0.68rem;
}

.skill-total {
  min-width: 70px;
  color: var(--muted);
  font-weight: 900;
}

.skill-grade,
.skill-other {
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #111419;
  color: var(--text);
}

.skill-grade {
  min-width: 145px;
  padding: 3px 8px;
}

.skill-other {
  width: 70px;
  padding: 3px;
  text-align: center;
}

.skill-rank-5 .skill-die,
.skill-rank-5 .skill-attribute,
.skill-rank-5 .skill-total {
  color: var(--green);
}

.skill-rank-10 .skill-die,
.skill-rank-10 .skill-attribute,
.skill-rank-10 .skill-total {
  color: #43a8ff;
}

.skill-rank-15 .skill-die,
.skill-rank-15 .skill-attribute,
.skill-rank-15 .skill-total {
  color: var(--warning);
}

.collection-block + .collection-block {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.affinity-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid rgba(226, 46, 58, 0.42);
  border-radius: 10px;
  background: var(--red-soft);
}

.affinity-banner span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ability-saved-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.ability-saved-choices > span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(226, 46, 58, 0.32);
  border-radius: 8px;
  background: rgba(226, 46, 58, 0.07);
}

.ability-saved-choices small {
  color: var(--muted);
  font-size: 0.72rem;
}

.collection-block > h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.entry-list {
  display: grid;
  gap: 8px;
}

.entry-card-shell {
  position: relative;
  min-width: 0;
}

.entry-card-shell:has(> .entry-use-button) .entry-card {
  border-radius: 10px 10px 0 0;
}

.entry-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0d0f12;
}

.entry-card[open] {
  border-color: var(--border-strong);
  background: #111419;
}

.entry-card summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  list-style: none;
  cursor: pointer;
}

.entry-card summary::-webkit-details-marker {
  display: none;
}

.entry-card summary > span:first-child {
  display: grid;
  min-width: 0;
}

.entry-card summary strong {
  overflow-wrap: anywhere;
}

.entry-card summary small {
  color: var(--muted);
  font-size: 0.74rem;
}

.entry-summary-side {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.chevron {
  display: inline-block;
  color: var(--red);
  font-size: 1.3rem;
  transition: transform 140ms ease;
}

.entry-card[open] .chevron {
  transform: rotate(180deg);
}

.entry-body {
  padding: 0 13px 14px;
  border-top: 1px solid var(--border);
}

.entry-body > p {
  margin: 13px 0;
  color: #d6d9de;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.entry-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 13px;
}

.entry-meta > div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.entry-meta dt {
  color: var(--faint);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.entry-meta dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  font-weight: 730;
}

.entry-remove {
  appearance: none;
  padding: 6px 9px;
  border: 1px solid rgba(226, 46, 58, 0.38);
  border-radius: 7px;
  background: var(--red-soft);
  color: #ff9ca4;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
}

.entry-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.entry-choice-button,
.entry-use-button {
  appearance: none;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(126, 208, 214, 0.4);
  border-radius: 7px;
  background: rgba(126, 208, 214, 0.08);
  color: #c9f7fa;
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 850;
}

.entry-choice-button.required {
  border-color: rgba(243, 184, 75, 0.6);
  background: rgba(243, 184, 75, 0.1);
  color: #ffd98f;
}

.entry-use-button {
  position: static;
  width: 100%;
  min-height: 38px;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  border-color: rgba(226, 46, 58, 0.55);
  background: var(--red-soft);
  color: #ffbac0;
}

.entry-use-button.ritual {
  border-color: rgba(126, 208, 214, 0.45);
  background: rgba(126, 208, 214, 0.09);
  color: #c9f7fa;
}

.entry-use-button.ghost {
  border-color: var(--border-strong);
  background: var(--surface-soft);
  color: var(--muted);
}

.entry-use-button:hover:not(:disabled),
.entry-choice-button:hover:not(:disabled) {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.08);
}

.entry-use-button:disabled,
.entry-choice-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.badge.warning {
  border-color: rgba(243, 184, 75, 0.48);
  background: rgba(243, 184, 75, 0.1);
  color: #ffd98f;
}

.origin-detail-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0d0f12;
}

.class-rules-preview {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #0d0f12;
}

.class-rules-preview.sah {
  border-color: rgba(226, 46, 58, 0.42);
  background: linear-gradient(135deg, rgba(226, 46, 58, 0.1), rgba(13, 15, 18, 0.96) 55%);
}

.class-rules-preview h3,
.class-rules-preview p {
  margin: 7px 0 0;
}

.class-rules-preview p {
  color: var(--muted);
}

.class-rule-stats,
.class-rule-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.class-rule-stats > span,
.class-rule-tags > span {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  font-size: 0.78rem;
}

.class-rule-stats strong {
  color: var(--text);
}

.trail-source-stack {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.trail-source-group {
  display: grid;
  gap: 9px;
}

.trail-source-group h4 {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.level-choice-card em,
.ability-choice-source {
  color: #ff8f98 !important;
  font-size: 0.7rem;
  font-style: normal;
}

.origin-detail-card[open] {
  border-color: var(--border-strong);
  background: #111419;
}

.origin-detail-card summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  list-style: none;
  cursor: pointer;
}

.origin-detail-card summary::-webkit-details-marker {
  display: none;
}

.origin-detail-card summary > span:first-child {
  display: grid;
  min-width: 0;
}

.origin-detail-card summary small {
  color: var(--muted);
  font-size: 0.74rem;
}

.origin-detail-card[open] .chevron {
  transform: rotate(180deg);
}

.origin-detail-body {
  padding: 0 13px 14px;
  border-top: 1px solid var(--border);
}

.origin-detail-body > p {
  margin: 13px 0;
  color: #d6d9de;
  font-size: 0.88rem;
  line-height: 1.55;
}

.origin-power-description {
  padding: 12px;
  border: 1px solid rgba(217, 35, 50, 0.32);
  border-radius: 7px;
  background: var(--red-soft);
}

.origin-power-description p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.benefit-list small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.inventory-overview {
  display: grid;
  grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
  gap: 10px;
  margin-bottom: 16px;
}

.inventory-capacity,
.inventory-category-summary {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0d0f12;
}

.inventory-capacity > span,
.inventory-category-summary > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.inventory-capacity strong {
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.inventory-capacity small,
.inventory-category-summary small {
  color: var(--muted);
}

.inventory-capacity.complete {
  border-color: rgba(82, 199, 124, 0.35);
}

.inventory-capacity.warning {
  border-color: rgba(240, 170, 63, 0.55);
}

.inventory-capacity.warning strong {
  color: var(--warning);
}

.inventory-capacity.blocked {
  border-color: rgba(226, 46, 58, 0.65);
}

.inventory-capacity.blocked strong {
  color: #ff7f89;
}

.inventory-category-summary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 3px;
}

.category-usage {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.category-usage b {
  margin-right: 3px;
  color: var(--text);
}

.category-usage.over {
  border-color: rgba(226, 46, 58, 0.55);
  color: #ff9ca4;
}

.item-art-icon {
  position: relative;
  overflow: hidden;
  image-rendering: pixelated;
}
.item-art-icon canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

.entry-card summary > .inventory-art-title {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 10px;
}
.inventory-art-title > strong, .inventory-art-title > small { grid-column: 2; }
.inventory-art-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  align-self: center;
}

.inventory-list {
  margin-bottom: 2px;
}

.item-card summary {
  flex-wrap: wrap;
}

.item-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 13px 0;
}

.item-stat-grid > div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.item-stat-grid dt {
  color: var(--faint);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.item-stat-grid dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  font-weight: 730;
}

.inventory-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.quantity-stepper {
  display: inline-grid;
  grid-template-columns: 34px minmax(38px, auto) 34px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #0b0d10;
}

.quantity-stepper button {
  appearance: none;
  min-height: 34px;
  border: 0;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
}

.quantity-stepper button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.quantity-stepper output {
  display: grid;
  min-width: 38px;
  place-items: center;
  border-inline: 1px solid var(--border);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.quantity-stepper output.pulse {
  animation: value-pulse 420ms var(--motion) both;
}

.item-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(175px, 0.32fr);
  align-items: end;
  gap: 10px;
}

.item-filter-row .picker-search {
  margin-bottom: 0;
}

.item-source-filter {
  display: grid;
  gap: 5px;
}

.item-source-filter > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.item-source-filter select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0b0d10;
  color: var(--text);
}

.item-filter-row + .catalog-note {
  margin-top: 10px;
}

.collection-empty {
  display: grid;
  min-height: 104px;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  color: var(--faint);
  text-align: center;
}

.collection-empty span {
  font-size: 1.3rem;
}

.collection-empty p {
  margin: 0;
  font-size: 0.82rem;
}

.picker-dialog {
  position: fixed;
  inset: 0;
  width: min(940px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  height: min(760px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #15171a;
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.78);
}

.picker-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: dialog-enter 150ms ease-out;
}

.picker-dialog.restored-open[open] {
  animation: none;
}

/* Diálogos re-renderizam a cada clique interno e replayariam o dialog-enter.
   O conteúdo da aba não entra aqui: quem decide isso é a chave de view. */
.suppress-ui-replay .picker-dialog[open],
.suppress-ui-replay .optional-rules-dialog[open] {
  animation: none !important;
}

.picker-dialog > .dialog-heading,
.picker-dialog > .choice-dialog-footer,
.picker-dialog > .level-up-footer,
.picker-dialog > .level-up-stepper {
  flex: 0 0 auto;
}

.picker-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}

.level-up-dialog { width: min(1080px, calc(100vw - 24px)); }
.level-up-dialog[open] {
  display: flex;
  height: min(760px, calc(100vh - 48px));
  height: min(760px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
}
.level-up-dialog .dialog-heading,
.level-up-stepper,
.level-up-footer { flex: 0 0 auto; }
.level-up-heading p:last-child { margin: 6px 0 0; color: var(--muted); font-size: .82rem; }
.level-up-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #101215; }
.level-up-step { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--faint); font-size: .75rem; }
.level-up-step span { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #292d33; font-weight: 900; }
.level-up-step strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level-up-step.active, .level-up-step.done { border-color: rgba(226,46,58,.5); color: var(--text); }
.level-up-step.active { background: var(--red-soft); }
.level-up-step.active span, .level-up-step.done span { background: var(--red); color: #fff; }
.level-up-body { min-height: 0; flex: 1 1 auto; padding: 20px; overflow: auto; overscroll-behavior: contain; }
.level-up-section > h3 { margin: 3px 0 6px; font-size: clamp(1.2rem,3vw,1.65rem); }
.level-up-route { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 14px; margin: 22px 0; }
.level-up-route > div, .level-up-lock { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--border); border-radius: 11px; background: #0d0f12; }
.level-up-route span, .level-up-lock span { color: var(--red-bright); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.level-up-route small, .level-up-lock small { color: var(--muted); }
.level-up-route > b { color: var(--red-bright); font-size: 1.5rem; }
.level-up-lock { margin: 22px 0; }
.level-up-note { margin: 18px 0 0; padding: 10px 12px; border: 1px solid rgba(217, 35, 50, 0.32); border-radius: 7px; background: rgba(226,46,58,.06); }
.class-choice-grid, .attribute-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.attribute-choice-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.level-choice-card { display: grid; min-width: 0; gap: 5px; padding: 13px; border: 1px solid var(--border); border-radius: 10px; background: #0d0f12; cursor: pointer; }
.level-choice-card strong,
.level-choice-card small { overflow-wrap: anywhere; }
.level-choice-card:hover:not(.disabled) { border-color: var(--border-strong); }
.level-choice-card.selected { border-color: var(--red); background: var(--red-soft); }
.level-choice-card.disabled { cursor: not-allowed; opacity: .48; }
.level-choice-card input { width: 18px; height: 18px; accent-color: var(--red); }
.level-choice-card small { color: var(--muted); line-height: 1.4; }
.level-up-resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 20px 0; }
.level-up-resource { display: grid; gap: 4px; padding: 15px; border: 1px solid var(--border); border-radius: 10px; background: #0d0f12; }
.level-up-resource span { color: var(--muted); }
.level-up-resource strong { color: #fff; font-size: 1.6rem; }
.level-up-resource small { color: var(--green); font-weight: 800; }
.level-up-gain-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.level-up-gain-card { padding: 16px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.02); }
.level-up-gain-card h4 { margin: 0 0 10px; }
.level-up-gain-card ul { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: var(--muted); }
.level-up-choice-stack { display: grid; gap: 13px; margin-top: 20px; }
.level-up-choice-block { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
.level-up-choice-block.selection-revealed { animation: reveal-level-up-choice 900ms ease-out; }
.level-up-choice-block legend { padding: 0 7px; color: var(--text); font-size: 1rem; font-weight: 900; }
.level-up-subchoice + .level-up-subchoice { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.level-up-subchoice h4 { margin: 0 0 10px; }
.level-up-option-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.choice-card { min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: #0d0f12; transition: border-color 200ms ease, background 200ms ease; }
.choice-card:hover:not(.disabled) { border-color: var(--border-strong); }
.choice-card.selected { border-color: var(--red); background: var(--red-soft); }
.choice-card.disabled { opacity: .55; }
.choice-card-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 12px; }
.choice-card-select { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.choice-card.disabled .choice-card-select { cursor: not-allowed; }
.choice-card-select input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--red); }
.choice-card-name { display: grid; min-width: 0; gap: 3px; }
.choice-card-name strong { overflow-wrap: anywhere; }
.choice-card-name small { color: var(--muted); line-height: 1.4; }
.choice-card-toggle { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; }
.choice-card-toggle:hover { background: rgba(255,255,255,.05); }
.choice-card-toggle .chevron { font-size: 1.1rem; }
.choice-card-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.choice-card-body { padding: 0 13px 13px; border-top: 1px solid var(--border); }
.choice-card-body:not([hidden]) { animation: details-reveal 260ms var(--motion) both; }
.choice-card-body p { margin: 12px 0 8px; color: #d9dce1; font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; }
.choice-card-body small { display: block; margin-top: 4px; color: var(--muted); font-size: .74rem; line-height: 1.4; overflow-wrap: anywhere; }
.level-up-catalog-group { border: 1px solid var(--border); border-radius: 10px; background: #0d0f12; }
.level-up-catalog-group + .level-up-catalog-group { margin-top: 8px; }
.level-up-catalog-group > summary { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 900; }
.level-up-catalog-group > summary span { color: var(--muted); font-size: .75rem; }
.level-up-catalog-group .level-up-option-list { padding: 0 12px 12px; }
.level-up-catalog-group .level-up-ritual-elements { display: grid; gap: 14px; padding: 0 12px 12px; }
.level-up-catalog-group .level-up-ritual-elements .level-up-option-list { padding: 0; margin-top: 8px; }
.level-up-ritual-search { margin: 12px 0 14px; }
.level-up-ritual-empty { margin: 12px 0 0; }
.level-up-complete-box, .level-up-confirm-note { padding: 16px; border: 1px solid rgba(82,199,124,.42); border-radius: 11px; background: rgba(82,199,124,.07); color: var(--green); font-weight: 850; }
.level-up-complete-box { display: grid; gap: 4px; }
.level-up-complete-box small { color: var(--muted); font-weight: 500; line-height: 1.45; }
.level-up-confirm-note { margin-top: 18px; }
.level-up-confirm-note p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; font-weight: 500; }
.level-up-footer { position: sticky; z-index: 6; bottom: 0; display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 13px 16px; border-top: 1px solid var(--border); background: #101215; box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.2); }
.entry-details, .ritual-enhancements ul { display: grid; gap: 6px; margin: 10px 0; padding-left: 20px; color: var(--muted); line-height: 1.5; }
.ritual-enhancements { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

.choice-dialog,
.spend-dialog {
  width: min(720px, calc(100vw - 24px));
}

.choice-dialog[open],
.spend-dialog[open] {
  display: flex;
  height: min(700px, calc(100vh - 48px));
  height: min(700px, calc(100dvh - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  flex-direction: column;
}

.choice-dialog .dialog-heading p:last-child,
.spend-dialog .dialog-heading p:last-child {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.choice-dialog-body,
.spend-dialog-body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.choice-dialog-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  margin-bottom: 14px;
}

.choice-dialog-intro h3,
.choice-dialog-intro p {
  grid-column: 1;
  margin: 0;
}

.choice-dialog-intro p {
  color: var(--muted);
  font-size: 0.8rem;
}

.choice-dialog-intro .skill-counter {
  grid-column: 2;
  grid-row: 1 / 3;
}

.choice-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.choice-option {
  display: flex;
  min-width: 0;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0d0f12;
  cursor: pointer;
}

.choice-option:hover:not(.disabled) {
  border-color: var(--border-strong);
}

.choice-option.selected {
  border-color: var(--red);
  background: var(--red-soft);
}

.choice-option.disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.choice-option input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--red);
}

.choice-option > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.choice-option small {
  color: var(--muted);
  line-height: 1.35;
}

.choice-select-wrap {
  display: grid;
  gap: 7px;
}

.choice-select-wrap > label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.choice-select-wrap select,
.level-up-choice-block > select {
  width: 100%;
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #0b0d10;
  color: var(--text);
}

.choice-select-wrap > p {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 10px;
  border: 1px solid rgba(217, 35, 50, 0.32);
  border-radius: 7px;
  background: var(--red-soft);
}

.choice-select-wrap > p small {
  color: var(--muted);
}

.choice-dialog-footer {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  background: #101215;
}

.level-up-structured-grid {
  margin-top: 12px;
}

.spend-dialog-body {
  display: grid;
  gap: 14px;
}

.cost-reduction-note {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(82, 199, 124, 0.38);
  border-radius: 8px;
  background: rgba(82, 199, 124, 0.07);
  color: var(--green);
  font-size: 0.8rem;
}

.spend-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.spend-presets button {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d0f12;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
}

.spend-presets button.active {
  border-color: var(--red);
  background: var(--red-soft);
  color: #fff;
}

.spend-amount {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0d0f12;
}

.spend-amount > span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.spend-amount > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.spend-amount input {
  width: 120px;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #080a0c;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
}

.spend-amount small {
  color: var(--muted);
}

.spend-warning {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(243, 184, 75, 0.5);
  border-radius: 8px;
  background: rgba(243, 184, 75, 0.08);
  color: #ffd98f;
  font-size: 0.8rem;
}

.spend-warning[hidden] {
  display: none;
}

@keyframes reveal-level-up-choice {
  0%, 35% { border-color: var(--red-bright); box-shadow: 0 0 0 3px rgba(226, 46, 58, 0.2); }
  100% { border-color: var(--border); box-shadow: none; }
}

.picker-body {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  padding: 16px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Catálogos usam uma única rolagem nativa no próprio modal. Isso evita que
   wheel/touch fique preso entre o dialog e a lista quando um cartão cresce. */
.catalog-picker-dialog {
  height: auto;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.catalog-picker-dialog[open] {
  display: block;
}

.catalog-picker-dialog > .dialog-heading {
  position: sticky;
  top: 0;
  z-index: 20;
}

.catalog-picker-dialog > .picker-body {
  display: block;
  min-height: auto;
  padding-bottom: max(72px, env(safe-area-inset-bottom));
  overflow: visible;
}

.catalog-picker-dialog .picker-results {
  padding-bottom: 32px;
}

.catalog-picker-dialog .entry-card {
  scroll-margin-block: 16px 96px;
}

.catalog-picker-dialog .entry-card[open] {
  overflow: visible;
}

.catalog-picker-dialog .entry-card[open] .entry-card-actions,
.catalog-picker-dialog .entry-card[open] .entry-body > .button:last-child {
  position: sticky;
  bottom: 12px;
  z-index: 12;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}

.catalog-picker-dialog .entry-card[open] .entry-card-actions {
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(13, 15, 18, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(10px);
}

.catalog-picker-dialog .entry-card[open] .entry-body > .button:last-child {
  display: block;
  margin-top: 12px;
  margin-right: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.52);
}

html:has(dialog[open]),
body:has(dialog[open]) {
  overflow: hidden;
}

.picker-tabs,
.picker-groups {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.picker-tabs {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.picker-tabs button,
.picker-groups button {
  appearance: none;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d0f12;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 780;
}

.picker-tabs button.active,
.picker-groups button.active {
  border-color: var(--red);
  background: var(--red-soft);
  color: #fff;
}

.picker-groups {
  margin: 12px 0;
}

.picker-groups button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 0.72rem;
}

.picker-search {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0b0d10;
}

.picker-search span {
  color: var(--muted);
  font-size: 1.35rem;
  text-align: center;
}

.picker-search input {
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px 9px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: 0;
}

.picker-results {
  display: grid;
  gap: 8px;
}

.catalog-note {
  margin: -2px 0 12px;
  color: var(--faint);
  font-size: 0.74rem;
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.entry-card.ritual-card summary > span.ritual-card-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.ritual-card-title-text {
  display: grid;
  min-width: 0;
}

.element-glyph {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--muted);
  filter: drop-shadow(0 0 4px var(--glyph-glow, currentColor));
  transition: transform 200ms var(--motion), filter 200ms var(--motion);
}

.element-glyph path,
.element-glyph circle {
  stroke-width: 1.6;
  stroke-dasharray: 70;
}

.view-enter .element-glyph {
  animation: glyph-flare 950ms var(--motion) both;
  animation-delay: var(--glyph-delay, 0ms);
}

.view-enter .element-glyph path,
.view-enter .element-glyph circle {
  animation: geometry-trace 780ms var(--motion) both;
  animation-delay: var(--glyph-delay, 0ms);
}

@keyframes glyph-flare {
  0%, 60% { filter: drop-shadow(0 0 0 transparent); transform: scale(0.86) rotate(-6deg); }
  82% { filter: drop-shadow(0 0 11px var(--glyph-glow, currentColor)); transform: scale(1.16) rotate(2deg); }
  100% { filter: drop-shadow(0 0 4px var(--glyph-glow, currentColor)); transform: scale(1) rotate(0); }
}

@keyframes glyph-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--glyph-glow, currentColor)); }
  50% { filter: drop-shadow(0 0 12px var(--glyph-glow, currentColor)); }
}

.entry-card.ritual-card summary:hover .element-glyph {
  transform: scale(1.18);
  filter: drop-shadow(0 0 9px var(--glyph-glow, currentColor));
}

.entry-card.ritual-card[open] .element-glyph {
  animation: glyph-pulse 2.4s ease-in-out infinite;
  animation-delay: 0s;
}

.element-glyph-sangue { color: var(--blood); --glyph-glow: rgba(223, 41, 56, 0.55); }
.element-glyph-morte { color: var(--death); --glyph-glow: rgba(174, 180, 183, 0.42); }
.element-glyph-conhecimento { color: var(--knowledge); --glyph-glow: rgba(213, 170, 85, 0.5); }
.element-glyph-energia { color: var(--energy); --glyph-glow: rgba(164, 83, 255, 0.55); }
.element-glyph-medo { color: var(--fear); --glyph-glow: rgba(217, 247, 255, 0.5); }

.toast {
  position: fixed;
  z-index: 40;
  right: 18px;
  bottom: 18px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 12px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #20242a;
  color: var(--text);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.cast-flourish {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}

.cast-flourish.play {
  animation: cast-flourish-wash 950ms ease-out both;
}

.cast-flourish svg {
  width: 30vmin;
  height: 30vmin;
  max-width: 220px;
  max-height: 220px;
  color: var(--cast-color, var(--red));
  opacity: 0;
  transform: scale(0.5) rotate(-8deg);
}

.cast-flourish.play svg {
  animation: cast-flourish-glyph 950ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cast-flourish.play svg path,
.cast-flourish.play svg circle {
  stroke-width: 1.3;
  stroke-dasharray: 70;
  animation: geometry-trace 480ms var(--motion) both;
}

@keyframes cast-flourish-wash {
  0% { opacity: 0; background: radial-gradient(circle, transparent, transparent); }
  18% { opacity: 1; background: radial-gradient(circle, color-mix(in srgb, var(--cast-color, var(--red)), transparent 84%), transparent 62%); }
  100% { opacity: 0; background: radial-gradient(circle, color-mix(in srgb, var(--cast-color, var(--red)), transparent 84%), transparent 62%); }
}

@keyframes cast-flourish-glyph {
  0% { opacity: 0; transform: scale(0.5) rotate(-8deg); filter: drop-shadow(0 0 0 transparent); }
  38% { opacity: 1; transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 34px var(--cast-color, var(--red))); }
  70% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 22px var(--cast-color, var(--red))); }
  100% { opacity: 0; transform: scale(1.3) rotate(0deg); filter: drop-shadow(0 0 4px transparent); }
}

/* Cada elemento conjura do seu jeito (mesmos comportamentos do fundo "Outro
   Lado", em uma versão de menos de um segundo). O padrão acima vale para
   qualquer elemento sem regra própria. */
.cast-flourish[data-element="sangue"].play { animation: cast-wash-sangue 950ms ease-out both; }
.cast-flourish[data-element="sangue"].play svg { animation: cast-glyph-sangue 950ms ease-out both; }
.cast-flourish[data-element="morte"].play svg { animation: cast-glyph-morte 950ms linear both; }
.cast-flourish[data-element="energia"].play { animation: cast-wash-energia 950ms linear both; }
.cast-flourish[data-element="energia"].play svg { animation: cast-glyph-energia 950ms linear both; }
.cast-flourish[data-element="conhecimento"].play svg { animation: cast-glyph-conhecimento 950ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.cast-flourish[data-element="medo"].play { animation: cast-wash-medo 950ms ease-out both; }
.cast-flourish[data-element="medo"].play svg { animation: cast-glyph-medo 950ms ease-out both; }

/* Sangue: batimento duplo. */
@keyframes cast-glyph-sangue {
  0% { opacity: 0; transform: scale(0.7); filter: drop-shadow(0 0 0 transparent); }
  16% { opacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 30px var(--cast-color)); }
  28% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 16px var(--cast-color)); }
  42% { opacity: 1; transform: scale(1.08); filter: drop-shadow(0 0 26px var(--cast-color)); }
  58% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 14px var(--cast-color)); }
  100% { opacity: 0; transform: scale(1.06); filter: drop-shadow(0 0 4px transparent); }
}

@keyframes cast-wash-sangue {
  0%, 100% { opacity: 0; }
  16%, 42% { opacity: 1; }
  28%, 58% { opacity: 0.45; }
  0%, 16%, 28%, 42%, 58%, 100% { background: radial-gradient(circle, color-mix(in srgb, var(--cast-color, var(--red)), transparent 82%), transparent 62%); }
}

/* Morte: gira no sentido horário, mas o tempo trava e dispara. */
@keyframes cast-glyph-morte {
  0% { opacity: 0; transform: rotate(-32deg) scale(0.92); filter: drop-shadow(0 0 0 transparent); }
  12% { opacity: 1; transform: rotate(-26deg) scale(1); filter: drop-shadow(0 0 22px var(--cast-color)); }
  30% { transform: rotate(-22deg); }
  36% { transform: rotate(38deg); }
  60% { opacity: 1; transform: rotate(43deg); filter: drop-shadow(0 0 18px var(--cast-color)); }
  66% { transform: rotate(118deg); }
  84% { opacity: 0.9; transform: rotate(123deg); }
  100% { opacity: 0; transform: rotate(150deg) scale(1.1); filter: drop-shadow(0 0 4px transparent); }
}

/* Energia: falhas de luz irregulares, com um leve tremor. */
@keyframes cast-glyph-energia {
  0% { opacity: 0; transform: scale(0.9); filter: drop-shadow(0 0 0 transparent); }
  8% { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 34px var(--cast-color)); }
  12% { opacity: 0.15; transform: translate(2px, -1px); }
  16% { opacity: 1; transform: translate(-2px, 1px) scale(1.02); }
  32% { opacity: 1; transform: translate(0, 0); filter: drop-shadow(0 0 22px var(--cast-color)); }
  35% { opacity: 0.25; transform: translate(-2px, 0); }
  37% { opacity: 1; transform: translate(2px, 1px); }
  39% { opacity: 0.5; }
  41%, 70% { opacity: 1; transform: translate(0, 0); }
  74% { opacity: 0.2; transform: translate(1px, -1px); }
  78% { opacity: 0.9; transform: translate(0, 0); }
  100% { opacity: 0; transform: scale(1.15); filter: drop-shadow(0 0 4px transparent); }
}

@keyframes cast-wash-energia {
  0% { opacity: 0; }
  8%, 16% { opacity: 1; }
  12% { opacity: 0.2; }
  35% { opacity: 0.3; }
  37%, 70% { opacity: 1; }
  74% { opacity: 0.25; }
  78% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* Conhecimento: o desenho se abre devagar, deliberado. */
@keyframes cast-glyph-conhecimento {
  0% { opacity: 0; transform: scale(0.72) rotate(-35deg); filter: drop-shadow(0 0 0 transparent); }
  45% { opacity: 1; transform: scale(1.06) rotate(4deg); filter: drop-shadow(0 0 30px var(--cast-color)); }
  75% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 20px var(--cast-color)); }
  100% { opacity: 0; transform: scale(1.12) rotate(6deg); filter: drop-shadow(0 0 4px transparent); }
}

/* Medo: nasce embaçado, firma e se dissolve subindo, como névoa. */
@keyframes cast-glyph-medo {
  0% { opacity: 0; transform: translateY(14px) scale(0.95); filter: blur(10px); }
  35% { opacity: 0.95; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 0 26px var(--cast-color)); }
  70% { opacity: 0.85; transform: translateY(-8px) scale(1.03); filter: blur(1px) drop-shadow(0 0 18px var(--cast-color)); }
  100% { opacity: 0; transform: translateY(-28px) scale(1.12); filter: blur(12px); }
}

@keyframes cast-wash-medo {
  0% { opacity: 0; background: radial-gradient(circle, transparent, transparent); }
  25% { opacity: 1; background: radial-gradient(circle, color-mix(in srgb, var(--cast-color, var(--red)), transparent 88%), transparent 75%); }
  100% { opacity: 0; background: radial-gradient(circle, color-mix(in srgb, var(--cast-color, var(--red)), transparent 88%), transparent 75%); }
}

.level-up-ceremony {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}

.level-up-ceremony.play {
  animation: ceremony-backdrop 2000ms ease-out both;
}

.ceremony-ring {
  position: absolute;
  width: min(70vmin, 280px);
  height: min(70vmin, 280px);
  border: 1px solid rgba(217, 35, 50, 0.55);
  border-radius: 50%;
  opacity: 0;
}

.level-up-ceremony.play .ceremony-ring {
  animation: ceremony-ring 2000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ceremony-content {
  position: relative;
  text-align: center;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
}

.level-up-ceremony.play .ceremony-content {
  animation:
    ceremony-content-in 650ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both,
    ceremony-content-out 380ms ease-in 1580ms both;
}

.ceremony-kicker {
  margin: 0 0 6px;
  color: var(--red-bright);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ceremony-level {
  display: block;
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 0 34px rgba(217, 35, 50, 0.55);
}

.ceremony-nex {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

@keyframes ceremony-backdrop {
  0% { opacity: 0; }
  14% { opacity: 1; background: radial-gradient(circle, rgba(6, 7, 8, 0.9), rgba(6, 7, 8, 0.72) 55%, transparent 78%); }
  80% { opacity: 1; background: radial-gradient(circle, rgba(6, 7, 8, 0.9), rgba(6, 7, 8, 0.72) 55%, transparent 78%); }
  100% { opacity: 0; }
}

@keyframes ceremony-ring {
  0% { opacity: 0; transform: scale(0.6) rotate(-25deg); box-shadow: 0 0 0 0 rgba(217, 35, 50, 0); }
  32% { opacity: 1; transform: scale(1.06) rotate(8deg); box-shadow: 0 0 0 10px rgba(217, 35, 50, 0.05), 0 0 60px rgba(217, 35, 50, 0.28); }
  60% { transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.18) rotate(14deg); box-shadow: 0 0 0 10px rgba(217, 35, 50, 0), 0 0 60px rgba(217, 35, 50, 0); }
}

@keyframes ceremony-content-in {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ceremony-content-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ── Identidade visual FOP: arquivo investigativo + geometria paranormal ── */
.page-heading {
  position: relative;
  padding: 8px 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-heading::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: min(220px, 42%);
  height: 1px;
  background: linear-gradient(90deg, var(--red-bright), transparent);
  box-shadow: 0 0 12px rgba(217, 35, 50, 0.34);
  content: "";
}

.panel,
.character-card,
.sheet-section,
.empty-state {
  position: relative;
  border-color: rgba(174, 180, 183, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 34%),
    linear-gradient(160deg, rgba(18, 21, 24, 0.98), rgba(8, 10, 12, 0.98));
}

/* .wizard-sidebar tambem leva .panel (mesma especificidade); sem isto o
   "position: relative" do .panel vence por ordem e a barra lateral do
   assistente de criacao nunca gruda na rolagem. */
.wizard-sidebar {
  position: sticky;
}

.panel::before,
.sheet-section::before,
.character-card::after {
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
  content: "";
}

.panel::before,
.sheet-section::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid rgba(255, 255, 255, 0.52);
  border-left: 1px solid rgba(255, 255, 255, 0.52);
}

.character-card::after {
  right: -1px;
  bottom: -1px;
  border-right: 1px solid rgba(217, 35, 50, 0.65);
  border-bottom: 1px solid rgba(217, 35, 50, 0.65);
}

.character-card {
  transition: border-color 240ms ease, transform 280ms var(--motion), box-shadow 280ms ease;
}

.character-grid.view-enter .character-card {
  animation: content-reveal 420ms var(--motion) both;
}

.character-card:hover {
  border-color: rgba(217, 35, 50, 0.5);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.46), 0 0 28px rgba(217, 35, 50, 0.07);
  transform: translateY(-4px);
}

.avatar {
  position: relative;
  border-color: rgba(217, 35, 50, 0.52);
  background: radial-gradient(circle, rgba(217, 35, 50, 0.16), #0b0d0f 68%);
  box-shadow: 0 0 0 3px rgba(217, 35, 50, 0.06), inset 0 0 18px rgba(0, 0, 0, 0.5);
}

.empty-sigil {
  position: relative;
  border-color: rgba(217, 35, 50, 0.68);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 35, 50, 0.17), transparent 66%);
  box-shadow: 0 0 0 8px rgba(217, 35, 50, 0.045), inset 0 0 28px rgba(0, 0, 0, 0.55), 0 0 32px rgba(217, 35, 50, 0.12);
}

.empty-sigil::before {
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.23);
  border-radius: 50%;
  content: "";
  animation: slow-orbit 26s linear infinite;
}

.button {
  border-radius: 6px;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 220ms var(--motion), box-shadow 220ms ease;
}

.button:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}

.button.primary {
  border-color: rgba(255, 83, 96, 0.82);
  background: linear-gradient(145deg, #c81c2b, #8f101d 72%);
  box-shadow: 0 8px 26px rgba(170, 15, 31, 0.3), inset 0 1px rgba(255, 255, 255, 0.2);
}

.button.primary:hover {
  border-color: #ff7a85;
  background: linear-gradient(145deg, #cf2231, #a80f1f 72%);
  box-shadow: 0 11px 32px rgba(217, 35, 50, 0.38);
}

.badge {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  letter-spacing: 0.025em;
}

.badge.red {
  border-color: rgba(255, 60, 75, 0.48);
  color: #ff9ca5;
  box-shadow: inset 2px 0 var(--red);
}

.wizard-step {
  border: 1px solid transparent;
  transition: 220ms var(--motion);
}

.nex-picker {
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(217, 35, 50, 0.06), rgba(5, 7, 9, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.nex-picker output strong {
  color: #fff;
  text-shadow: 0 0 18px rgba(217, 35, 50, 0.2);
}

.wizard-step.active {
  border-color: rgba(217, 35, 50, 0.28);
  background: linear-gradient(90deg, rgba(217, 35, 50, 0.16), transparent);
}

.field input,
.field select,
.field textarea,
.inline-input,
.patent-row select,
.autosave-field {
  border-radius: 6px;
  background: rgba(5, 7, 9, 0.82);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.inline-input:hover,
.patent-row select:hover,
.autosave-field:hover {
  border-color: var(--border-strong);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.inline-input:focus,
.patent-row select:focus,
.autosave-field:focus {
  border-color: rgba(217, 35, 50, 0.7);
  background: #090b0d;
  box-shadow: 0 0 0 3px rgba(217, 35, 50, 0.1), 0 0 24px rgba(217, 35, 50, 0.08);
}

.sheet-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.sheet-tabs button {
  position: relative;
  letter-spacing: 0.035em;
  transition: color 180ms ease, background 180ms ease;
}

.sheet-tabs button::after {
  position: absolute;
  right: 50%;
  bottom: -2px;
  left: 50%;
  height: 2px;
  background: var(--red-bright);
  box-shadow: 0 0 12px rgba(255, 60, 75, 0.72);
  content: "";
  transition: right 260ms var(--motion), left 260ms var(--motion);
}

.sheet-tabs button.active {
  border-bottom-color: transparent;
  background: linear-gradient(to top, rgba(217, 35, 50, 0.09), transparent);
}

.sheet-tabs button.active::after {
  right: 12%;
  left: 12%;
}

.sheet-tab-content {
  /* Abas curtas (Anotações) encolhiam o painel ~1800px em relação às longas
     (Perícias), e o navegador cortava o scroll no meio do nada. */
  min-height: min(62vh, 560px);
}

.sheet-tab-content.view-enter {
  animation: content-reveal 360ms var(--motion) both;
}

.sheet-tab-content.view-enter.from-next {
  animation: tab-slide-next 280ms var(--motion) both;
}

.sheet-tab-content.view-enter.from-prev {
  animation: tab-slide-prev 280ms var(--motion) both;
}

@keyframes tab-slide-next {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tab-slide-prev {
  from { opacity: 0; transform: translateX(-26px); }
  to { opacity: 1; transform: translateX(0); }
}

.sheet-section {
  overflow: hidden;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.018), 0 12px 34px rgba(0, 0, 0, 0.2);
}

.picker-dialog,
.optional-rules-dialog {
  border-color: rgba(174, 180, 183, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(217, 35, 50, 0.045), transparent 28%),
    #0b0d0f;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(217, 35, 50, 0.08);
}

.dialog-heading {
  background: linear-gradient(105deg, rgba(217, 35, 50, 0.14), rgba(255, 255, 255, 0.015) 48%, transparent);
}

.dialog-close {
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 220ms var(--motion);
}

.dialog-close:hover {
  border-color: var(--red-bright);
  background: rgba(217, 35, 50, 0.15);
  color: #fff;
  transform: rotate(4deg) scale(1.04);
}

.picker-tabs button,
.picker-groups button {
  border-radius: 5px;
  transition: border-color 170ms ease, background 170ms ease, color 170ms ease, transform 200ms var(--motion);
}

.picker-tabs button:hover,
.picker-groups button:hover {
  transform: translateY(-1px);
}

.element-groups button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.element-groups button .element-glyph {
  width: 14px;
  height: 14px;
}

.element-groups button:nth-child(1) { --element-accent: var(--knowledge); }
.element-groups button:nth-child(2) { --element-accent: var(--energy); }
.element-groups button:nth-child(3) { --element-accent: var(--death); }
.element-groups button:nth-child(4) { --element-accent: var(--blood); }
.element-groups button:nth-child(5) { --element-accent: var(--fear); }

.element-groups button.active {
  border-color: var(--element-accent);
  background: color-mix(in srgb, var(--element-accent), transparent 86%);
  color: #fff;
  box-shadow: inset 0 -2px var(--element-accent), 0 0 16px color-mix(in srgb, var(--element-accent), transparent 82%);
}

.section-heading h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.015em;
}

.section-heading h2::before {
  width: 3px;
  height: 17px;
  background: linear-gradient(var(--red-bright), var(--red-dark));
  box-shadow: 0 0 12px rgba(217, 35, 50, 0.35);
  content: "";
}

.agent-identity {
  position: relative;
}

.element-spectrum {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-top: 16px;
}

.element-spectrum i {
  height: 2px;
  border-radius: 99px;
  background: var(--blood);
  box-shadow: 0 0 8px color-mix(in srgb, var(--blood), transparent 40%);
  animation: spectrum-pulse 3.2s ease-in-out infinite;
  animation-delay: 0s;
}

.element-spectrum i:nth-child(2) { background: var(--death); box-shadow: 0 0 8px rgba(174, 180, 183, 0.45); animation-delay: 0.25s; }
.element-spectrum i:nth-child(3) { background: var(--knowledge); box-shadow: 0 0 8px rgba(213, 170, 85, 0.48); animation-delay: 0.5s; }
.element-spectrum i:nth-child(4) { background: var(--energy); box-shadow: 0 0 8px rgba(164, 83, 255, 0.55); animation-delay: 0.75s; }
.element-spectrum i:nth-child(5) { background: var(--fear); box-shadow: 0 0 8px rgba(217, 247, 255, 0.55); animation-delay: 1s; }

@keyframes spectrum-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.live-resource {
  --resource-color: var(--cyan);
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--resource-color), transparent 92%), rgba(255, 255, 255, 0.018));
  transition: border-color 180ms ease, transform 220ms var(--motion);
}

.live-resource:hover {
  border-color: color-mix(in srgb, var(--resource-color), transparent 55%);
  transform: translateX(2px);
}

.resource-pv { --resource-color: var(--blood); }
.resource-pe { --resource-color: var(--cyan); }
.resource-san { --resource-color: var(--knowledge); }
.resource-pd { --resource-color: var(--energy); }
.resource-pp { --resource-color: #ff7690; }

.live-resource-head strong {
  color: var(--resource-color);
}

.resource-meter {
  height: 3px;
  margin: -2px 0 10px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.065);
}

.resource-meter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--resource-color);
  box-shadow: 0 0 9px var(--resource-color);
  transform: scaleX(var(--resource-level));
  transform-origin: left;
  transition: transform 420ms var(--motion);
}

.live-resource-controls button {
  border-radius: 50%;
  transition: border-color 160ms ease, background 160ms ease, transform 180ms var(--motion);
}

.live-resource-controls button:hover {
  border-color: var(--resource-color);
  background: color-mix(in srgb, var(--resource-color), transparent 86%);
  transform: scale(1.07);
}

.entry-card {
  border-radius: 7px;
  background: rgba(7, 9, 11, 0.88);
  transition: border-color 200ms ease, background 200ms ease, transform 240ms var(--motion), box-shadow 240ms ease;
}

.entry-card:hover {
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.entry-card[open] {
  background: linear-gradient(145deg, rgba(21, 24, 28, 0.98), rgba(9, 11, 13, 0.98));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.entry-card[open] .entry-body {
  animation: details-reveal 300ms var(--motion) both;
}

/* Card reaberto pelo redesenho da ficha (não por um clique): sem revelação. */
.entry-card[data-kept][open] .entry-body { animation: none; }

.chevron {
  transition: color 160ms ease, transform 280ms var(--motion);
}

.ritual-card.element-conhecimento[open] { box-shadow: inset 3px 0 20px rgba(213, 170, 85, 0.08), 0 14px 34px rgba(0, 0, 0, 0.28); }
.ritual-card.element-energia[open] { box-shadow: inset 3px 0 20px rgba(164, 83, 255, 0.09), 0 14px 34px rgba(0, 0, 0, 0.28); }
.ritual-card.element-morte[open] { box-shadow: inset 3px 0 20px rgba(174, 180, 183, 0.065), 0 14px 34px rgba(0, 0, 0, 0.28); }
.ritual-card.element-sangue[open] { box-shadow: inset 3px 0 20px rgba(223, 41, 56, 0.09), 0 14px 34px rgba(0, 0, 0, 0.28); }
.ritual-card.element-medo[open] { box-shadow: inset 3px 0 20px rgba(217, 247, 255, 0.075), 0 14px 34px rgba(0, 0, 0, 0.28); }

/* Atributos em formação ritualística, inspirados na ficha sem copiar seu símbolo. */
.attribute-constellation {
  --attribute-node-size: 112px;
  position: relative;
  width: min(100%, 560px);
  height: 430px;
  margin: 14px auto 2px;
  isolation: isolate;
}

.attribute-geometry {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(217, 35, 50, 0.1));
}

.attribute-geometry path,
.attribute-geometry circle {
  fill: none;
  stroke: rgba(218, 220, 216, 0.24);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4 5;
}

.view-enter .attribute-geometry path,
.view-enter .attribute-geometry circle {
  animation: geometry-trace 900ms var(--motion) both;
}

.attribute-geometry .attribute-pentagon {
  stroke: rgba(217, 35, 50, 0.38);
  stroke-width: 1.8;
  stroke-dasharray: 8 5 2 5;
}

.attribute-core,
.attribute-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.attribute-core {
  z-index: 1;
  display: grid;
  width: 148px;
  height: 148px;
  place-content: center;
  justify-items: center;
  border: 1px solid rgba(243, 241, 235, 0.52);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(217, 35, 50, 0.09), transparent 64%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.1) 0 1deg, transparent 1deg 15deg),
    #080a0c;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.025), 0 0 0 9px rgba(217, 35, 50, 0.12), inset 0 0 38px rgba(0, 0, 0, 0.8), 0 0 32px rgba(217, 35, 50, 0.11);
}

.attribute-core::before,
.attribute-core::after {
  position: absolute;
  inset: 17px;
  border: 1px solid rgba(243, 241, 235, 0.2);
  content: "";
  transform: rotate(45deg);
}

.attribute-core::after {
  inset: 28px;
  border-color: rgba(217, 35, 50, 0.32);
  transform: rotate(22.5deg);
}

.attribute-core span {
  color: var(--red-bright);
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 0 0 13px rgba(217, 35, 50, 0.6);
}

.attribute-core strong {
  margin-top: 5px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
}

.attribute-core small {
  color: var(--faint);
  font-size: 0.55rem;
  letter-spacing: 0.13em;
}

.attribute-node {
  z-index: 2;
  display: grid;
  width: calc(var(--attribute-node-size) + 22px);
  justify-items: center;
}

.attribute-agilidade { top: 14%; }
.attribute-forca { top: 40%; left: 18%; }
.attribute-intelecto { top: 40%; left: 82%; }
.attribute-presenca { top: 80%; left: 31%; }
.attribute-vigor { top: 80%; left: 69%; }

.attribute-ring {
  position: relative;
  display: grid;
  width: var(--attribute-node-size);
  height: var(--attribute-node-size);
  place-content: center;
  justify-items: center;
  border: 2px solid rgba(243, 241, 235, 0.78);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.055), transparent 55%), #07090b;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.035), 0 0 0 6px rgba(217, 35, 50, 0.11), inset 0 0 28px rgba(0, 0, 0, 0.86), 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: border-color 220ms ease, box-shadow 240ms ease, transform 260ms var(--motion);
}

.view-enter .attribute-ring {
  animation: seal-arrive 550ms var(--motion) both;
}

.view-enter .attribute-node:nth-of-type(4) .attribute-ring { animation-delay: 40ms; }
.view-enter .attribute-node:nth-of-type(5) .attribute-ring { animation-delay: 80ms; }
.view-enter .attribute-node:nth-of-type(6) .attribute-ring { animation-delay: 120ms; }
.view-enter .attribute-node:nth-of-type(7) .attribute-ring { animation-delay: 160ms; }

.attribute-ring::before {
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  content: "";
  background: repeating-conic-gradient(
    from 0deg,
    rgba(243, 241, 235, 0.62) 0deg 1.6deg,
    transparent 1.6deg 9deg,
    rgba(217, 35, 50, 0.55) 9deg 10.4deg,
    transparent 10.4deg 18deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: slow-orbit 90s linear infinite, sigil-breathe 11s ease-in-out infinite alternate;
}

.attribute-ring::after {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(217, 35, 50, 0.22);
  border-radius: 50%;
  content: "";
}

.attribute-node:hover .attribute-ring,
.attribute-node:focus-within .attribute-ring {
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.045), 0 0 0 7px rgba(217, 35, 50, 0.2), inset 0 0 30px rgba(217, 35, 50, 0.08), 0 0 30px rgba(217, 35, 50, 0.2);
  transform: scale(1.045);
}

.attribute-number {
  position: relative;
  z-index: 2;
  width: 62px;
  height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-size: 2.25rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.22);
}

.attribute-ring > span,
.attribute-ring > small {
  position: relative;
  z-index: 2;
  display: block;
  line-height: 1.05;
  text-transform: uppercase;
}

.attribute-ring > span {
  margin-top: 2px;
  color: #dad7d0;
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.045em;
}

.attribute-ring > small {
  margin-top: 2px;
  color: var(--red-bright);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.attribute-stepper {
  position: relative;
  z-index: 4;
  gap: 7px;
  margin-top: 9px;
}

.attribute-stepper button {
  width: 30px;
  height: 30px;
  border-color: rgba(243, 241, 235, 0.24);
  border-radius: 50%;
  background: rgba(7, 9, 11, 0.95);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.4);
  transition: border-color 160ms ease, background 160ms ease, transform 180ms var(--motion);
}

.attribute-stepper button:hover {
  border-color: var(--red-bright);
  background: rgba(217, 35, 50, 0.18);
  transform: scale(1.08);
}

.attribute-constellation.is-editable {
  height: 462px;
}

.attribute-constellation.is-readonly .attribute-ring {
  cursor: default;
}

@keyframes surface-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes content-reveal {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes details-reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes seal-arrive {
  from { opacity: 0; transform: scale(0.78) rotate(-7deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes geometry-trace {
  from { opacity: 0; stroke-dashoffset: 70; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes slow-orbit {
  to { transform: rotate(360deg); }
}

@keyframes sigil-breathe {
  from { opacity: 0.55; }
  to { opacity: 0.92; }
}

@keyframes value-pulse {
  0% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  40% { transform: scale(1.2); text-shadow: 0 0 14px var(--resource-color, var(--red)); }
  100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}

/* Retorno visual dos recursos: uma animação por rajada de mudanças
   (syncResourceFeedback em app.js). --feedback-delay fica negativo quando um
   re-render retoma a animação do ponto em que estava. */
.live-resource {
  position: relative;
}

.live-resource::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: linear-gradient(to top, transparent, color-mix(in srgb, var(--resource-color), transparent 70%) 50%, transparent);
}

.live-resource[data-feedback] .resource-current-input {
  animation: value-pulse 420ms var(--motion) var(--feedback-delay, 0ms) both;
}

.live-resource[data-feedback="damage"] {
  animation: resource-hit 520ms ease-out var(--feedback-delay, 0ms) both;
}

.live-resource[data-feedback="glitch"] .live-resource-value,
.live-resource[data-feedback="glitch"] .resource-current-input,
.live-resource[data-feedback="glitch"] .live-resource-head strong {
  animation: resource-glitch 460ms steps(1, end) var(--feedback-delay, 0ms) both;
}

.live-resource[data-feedback="drain"] .resource-meter span {
  animation: meter-drain 520ms ease-out var(--feedback-delay, 0ms) both;
}

.live-resource[data-feedback="mend"]::after {
  animation: resource-mend 720ms ease-out var(--feedback-delay, 0ms) both;
}

@keyframes resource-hit {
  0% { transform: translateX(0); box-shadow: inset 0 0 0 transparent; }
  10% {
    transform: translateX(-3px);
    border-color: var(--resource-color);
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--resource-color), transparent 55%);
  }
  25% { transform: translateX(3px); }
  40% { transform: translateX(-2px); }
  55% { transform: translateX(1px); border-color: var(--resource-color); }
  100% { transform: translateX(0); box-shadow: inset 0 0 0 transparent; }
}

@keyframes resource-glitch {
  0%, 60%, 100% { transform: none; text-shadow: none; }
  12% { transform: translateX(-2px); text-shadow: 2px 0 rgba(217, 35, 50, 0.75), -2px 0 rgba(109, 215, 227, 0.75); }
  28% { transform: translateX(2px); text-shadow: -2px 0 rgba(217, 35, 50, 0.75), 2px 0 rgba(109, 215, 227, 0.75); }
  44% { transform: translate(-1px, 1px); text-shadow: 1px 0 rgba(217, 35, 50, 0.6), -1px 0 rgba(109, 215, 227, 0.6); }
  76% { transform: translateX(1px); text-shadow: -1px 0 rgba(109, 215, 227, 0.5); }
}

@keyframes meter-drain {
  0%, 100% { opacity: 1; }
  30% { opacity: 0.3; box-shadow: none; }
}

@keyframes resource-mend {
  0% { opacity: 0; transform: translateY(100%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-100%); }
}

/* Itens do inventário chegam em sequência só ao abrir a aba (view-enter);
   mudar quantidade redesenha a lista sem repetir a entrada. */
.sheet-tab-content.view-enter .inventory-list > .item-card {
  animation: content-reveal 380ms var(--motion) both;
}
.sheet-tab-content.view-enter .inventory-list > .item-card:nth-child(2) { animation-delay: 45ms; }
.sheet-tab-content.view-enter .inventory-list > .item-card:nth-child(3) { animation-delay: 90ms; }
.sheet-tab-content.view-enter .inventory-list > .item-card:nth-child(4) { animation-delay: 135ms; }
.sheet-tab-content.view-enter .inventory-list > .item-card:nth-child(5) { animation-delay: 180ms; }
.sheet-tab-content.view-enter .inventory-list > .item-card:nth-child(6) { animation-delay: 225ms; }
.sheet-tab-content.view-enter .inventory-list > .item-card:nth-child(7) { animation-delay: 270ms; }
.sheet-tab-content.view-enter .inventory-list > .item-card:nth-child(8) { animation-delay: 315ms; }
.sheet-tab-content.view-enter .inventory-list > .item-card:nth-child(9) { animation-delay: 360ms; }
.sheet-tab-content.view-enter .inventory-list > .item-card:nth-child(n+10) { animation-delay: 405ms; }

/* Habilidades e rituais chegam em sequência ao abrir a aba. Nos rituais o
   passo acompanha o --glyph-delay (70ms), então cada glifo acende junto do
   seu cartão. */
.sheet-tab-content.view-enter .entry-list > .entry-card-shell {
  animation: content-reveal 380ms var(--motion) both;
}
.sheet-tab-content.view-enter .entry-list > .entry-card-shell:nth-child(2) { animation-delay: 45ms; }
.sheet-tab-content.view-enter .entry-list > .entry-card-shell:nth-child(3) { animation-delay: 90ms; }
.sheet-tab-content.view-enter .entry-list > .entry-card-shell:nth-child(4) { animation-delay: 135ms; }
.sheet-tab-content.view-enter .entry-list > .entry-card-shell:nth-child(5) { animation-delay: 180ms; }
.sheet-tab-content.view-enter .entry-list > .entry-card-shell:nth-child(6) { animation-delay: 225ms; }
.sheet-tab-content.view-enter .entry-list > .entry-card-shell:nth-child(7) { animation-delay: 270ms; }
.sheet-tab-content.view-enter .entry-list > .entry-card-shell:nth-child(8) { animation-delay: 315ms; }
.sheet-tab-content.view-enter .entry-list > .entry-card-shell:nth-child(9) { animation-delay: 360ms; }
.sheet-tab-content.view-enter .entry-list > .entry-card-shell:nth-child(n+10) { animation-delay: 405ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(2) { animation-delay: 70ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(3) { animation-delay: 140ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(4) { animation-delay: 210ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(5) { animation-delay: 280ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(6) { animation-delay: 350ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(7) { animation-delay: 420ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(8) { animation-delay: 490ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(9) { animation-delay: 560ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(10) { animation-delay: 630ms; }
.sheet-tab-content.view-enter .ritual-selected-list > .entry-card-shell:nth-child(n+11) { animation-delay: 700ms; }

/* Atributo alterado: o anel acende e uma onda sai do círculo interno, uma
   vez. Queda de valor usa cinza em vez de vermelho. */
.attribute-node[data-changed] {
  --changed-glow: rgba(217, 35, 50, 0.5);
  --changed-edge: rgba(255, 90, 100, 0.9);
}

.attribute-node[data-changed="down"] {
  --changed-glow: rgba(174, 180, 183, 0.35);
  --changed-edge: rgba(214, 218, 221, 0.8);
}

.attribute-node[data-changed] .attribute-ring {
  animation: attribute-flare 1100ms var(--motion) var(--changed-delay, 0ms) both;
}

.attribute-node[data-changed] .attribute-ring::after {
  animation: attribute-shock 900ms ease-out var(--changed-delay, 0ms) backwards;
}

.attribute-node[data-changed] .attribute-number {
  animation: attribute-number-pop 700ms var(--motion) var(--changed-delay, 0ms) both;
}

@keyframes attribute-flare {
  28% {
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 0 8px var(--changed-glow), inset 0 0 30px var(--changed-glow), 0 0 34px var(--changed-glow);
  }
}

@keyframes attribute-shock {
  from { inset: 8px; opacity: 1; border-color: var(--changed-edge); }
  to { inset: -26px; opacity: 0; border-color: var(--changed-edge); }
}

@keyframes attribute-number-pop {
  0%, 100% { transform: scale(1); text-shadow: none; }
  30% { transform: scale(1.25); text-shadow: 0 0 16px var(--changed-glow); }
}

/* Abertura do dossiê (app.js, dossierState): ao abrir a ficha, nome e jogador
   chegam sob tarjas de censura que se levantam, os selos aparecem em
   sequência e uma linha de leitura desce pelo bloco. Toca uma vez. */
.agent-identity.dossier-open h1,
.agent-identity.dossier-open > p.muted {
  position: relative;
}

.agent-identity.dossier-open h1::after,
.agent-identity.dossier-open > p.muted::after {
  position: absolute;
  z-index: 1;
  inset: 2px -5px;
  content: "";
  border-radius: 3px;
  background: #07080a;
  box-shadow: inset 0 0 0 1px rgba(217, 35, 50, 0.3);
  transform-origin: 100% 50%;
  animation: dossier-lift 640ms cubic-bezier(0.7, 0, 0.2, 1) calc(var(--dossier-elapsed, 0ms) + 260ms) both;
}

.agent-identity.dossier-open > p.muted::after {
  animation-delay: calc(var(--dossier-elapsed, 0ms) + 480ms);
}

.agent-identity.dossier-open .badge-row .badge {
  animation: dossier-badge 380ms var(--motion) calc(var(--dossier-elapsed, 0ms) + 600ms) both;
}
.agent-identity.dossier-open .badge-row .badge:nth-child(1) { animation-delay: calc(var(--dossier-elapsed, 0ms) + 600ms); }
.agent-identity.dossier-open .badge-row .badge:nth-child(2) { animation-delay: calc(var(--dossier-elapsed, 0ms) + 655ms); }
.agent-identity.dossier-open .badge-row .badge:nth-child(3) { animation-delay: calc(var(--dossier-elapsed, 0ms) + 710ms); }
.agent-identity.dossier-open .badge-row .badge:nth-child(4) { animation-delay: calc(var(--dossier-elapsed, 0ms) + 765ms); }
.agent-identity.dossier-open .badge-row .badge:nth-child(5) { animation-delay: calc(var(--dossier-elapsed, 0ms) + 820ms); }
.agent-identity.dossier-open .badge-row .badge:nth-child(6) { animation-delay: calc(var(--dossier-elapsed, 0ms) + 875ms); }
.agent-identity.dossier-open .badge-row .badge:nth-child(7) { animation-delay: calc(var(--dossier-elapsed, 0ms) + 930ms); }
.agent-identity.dossier-open .badge-row .badge:nth-child(8) { animation-delay: calc(var(--dossier-elapsed, 0ms) + 985ms); }

.agent-identity.dossier-open::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -4px;
  left: -4px;
  height: 2px;
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 60, 75, 0.85), transparent);
  box-shadow: 0 0 12px rgba(217, 35, 50, 0.55);
  animation: dossier-scan 1000ms ease-in-out calc(var(--dossier-elapsed, 0ms) + 120ms) both;
}

@keyframes dossier-lift {
  0%, 22% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@keyframes dossier-badge {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dossier-scan {
  0% { top: 0; opacity: 0; }
  12%, 84% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-identity.dossier-open::before,
  .agent-identity.dossier-open h1::after,
  .agent-identity.dossier-open > p.muted::after { display: none; }
}

/* Afinidade no centro dos atributos: o glifo do elemento com o movimento dele
   (mesmos keyframes do fundo "Outro Lado", em otherside.css). */
.attribute-core .core-affinity {
  --tint: var(--blood);
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: 1px;
}

.attribute-core .core-affinity-morte { --tint: var(--death); }
.attribute-core .core-affinity-conhecimento { --tint: var(--knowledge); }
.attribute-core .core-affinity-energia { --tint: var(--energy); }

.attribute-core .core-affinity .element-glyph {
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--tint) 72%, #e6e8ea);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tint), transparent 45%));
}

.attribute-core .core-affinity .element-glyph path,
.attribute-core .core-affinity .element-glyph circle { stroke-width: 1.35; }

.core-affinity-sangue .element-glyph { animation: otherside-heartbeat 3.6s ease-in-out infinite; }
.core-affinity-morte .element-glyph { animation: otherside-clockwise 60s linear infinite; }
.core-affinity-conhecimento .element-glyph { animation: otherside-turn 90s linear infinite, otherside-open 14s ease-in-out infinite alternate; }
.core-affinity-energia .element-glyph { animation: otherside-flicker 7.3s linear infinite; }

/* PV ou SAN em um quarto ou menos: vinheta fraca com batimento lento. */
.critical-vignette {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(143, 16, 29, 0.28) 100%);
  transition: opacity 900ms ease;
}

.critical-vignette.active {
  opacity: 1;
  animation: critical-heartbeat 2.6s ease-in-out infinite;
}

@keyframes critical-heartbeat {
  0%, 60%, 100% { opacity: 0.55; }
  12% { opacity: 1; }
  24% { opacity: 0.68; }
  36% { opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 820px) {
  .wizard-shell,
  .sheet-layout,
  .summary-layout {
    grid-template-columns: 1fr;
  }

  .summary-side .stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .wizard-sidebar {
    position: static;
    padding-bottom: 14px;
  }

  .wizard-steps {
    grid-template-columns: repeat(7, 1fr);
  }

  .wizard-step {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 7px 3px;
    text-align: center;
  }

  .attribute-grid,
  .sheet-attributes {
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .attribute-constellation {
    --attribute-node-size: 98px;
    height: 410px;
  }

  .attribute-constellation.is-editable {
    height: 448px;
  }

  .resource-grid {
    grid-template-columns: 1fr;
  }

  .skill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .formation-grid {
    grid-template-columns: 1fr;
  }


  .attribute-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .level-up-option-list { grid-template-columns: 1fr; }
}

/* Ficha em tela cheia: a barra de identidade e as abas ficam fixas na
   altura da viewport, e só a coluna de conteudo da aba rola por dentro —
   sem isso, sidebar/abas "sticky" cada uma engatava num momento diferente
   da rolagem da pagina e a troca parecia quebrada (uma sumia antes da
   outra acompanhar). */
@media (min-width: 821px) {
  #app.app-sheet-view {
    width: min(1800px, calc(100% - 48px));
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .sheet-layout {
    height: calc(100vh - var(--topbar-height, 76px) - 36px);
    /* grid-auto-rows padrao e "auto": a trilha cresce pro conteudo e o
       height acima vira só um palpite, ignorado. Com 1fr a trilha fica
       presa na altura do container e sobra pra filho de verdade rolar. */
    grid-template-rows: minmax(0, 1fr);
  }

  .sheet-sidebar {
    align-self: stretch;
    overflow-y: auto;
  }

  .sheet-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .sheet-tabs {
    flex: 0 0 auto;
  }

  .sheet-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .summary-layout {
    height: 100%;
    align-items: stretch;
  }

  .summary-side {
    overflow-y: auto;
  }

  .summary-main {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .skills-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .skills-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* A rolagem interna continua funcionando (roda do mouse, trackpad, toque);
     só a barra cinza nativa do navegador some, que destoava do resto do
     visual desenhado. */
  .sheet-sidebar,
  .sheet-tab-content,
  .summary-side,
  .skills-table-wrap {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sheet-sidebar::-webkit-scrollbar,
  .sheet-tab-content::-webkit-scrollbar,
  .summary-side::-webkit-scrollbar,
  .skills-table-wrap::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 600px) {
  .topbar {
    min-height: 64px;
    padding: 8px 14px;
  }

  .header-actions {
    min-width: 0;
    gap: 6px;
  }

  .header-actions .button {
    min-height: 38px;
    padding-inline: 9px;
    font-size: 0.72rem;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .brand-copy strong {
    font-size: 0.82rem;
  }

  .brand-copy small {
    display: none;
  }

  .topbar-nav-group {
    gap: 8px;
  }

  .nav-link {
    padding: 6px 11px;
    font-size: 0.74rem;
  }

  #app {
    width: min(100% - 22px, 1120px);
    padding-top: 22px;
  }

  .page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .page-heading .button {
    width: 100%;
  }

  .form-grid,
  .stat-grid,
  .benefit-list,
  .calculation-grid,
  .entry-meta {
    grid-template-columns: 1fr;
  }

  .calculation-grid b {
    margin-bottom: 6px;
    text-align: left;
  }

  .skill-grid,
  .skill-grid.short {
    grid-template-columns: 1fr;
  }

  .level-up-stepper { gap: 4px; padding: 8px; }
  .level-up-step { justify-content: center; padding: 7px 4px; }
  .level-up-step strong { display: none; }
  .level-up-dialog[open] {
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .level-up-body { min-height: 0; padding: 15px; }
  .level-up-route, .level-up-gain-grid, .level-up-resource-grid, .class-choice-grid { grid-template-columns: 1fr; }
  .level-up-route > b { transform: rotate(90deg); text-align: center; }
  .attribute-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-up-footer { grid-template-columns: 1fr 1fr; }
  .level-up-footer > span { display: none; }
  #cancel-level-up { grid-column: 1 / -1; order: 3; }

  .inventory-overview,
  .item-filter-row {
    grid-template-columns: 1fr;
  }

  .item-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-item-actions {
    align-items: stretch;
    flex-direction: column;
  }


  .quantity-stepper {
    align-self: flex-start;
  }

  .origin-detail-card summary {
    align-items: flex-start;
  }

  .skill-progress {
    align-items: flex-start;
    flex-direction: column;
  }

  .optional-rule {
    grid-template-columns: 1fr;
  }

  .binary-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .wizard-sidebar,
  .wizard-content,
  .sheet-sidebar,
  .sheet-main {
    padding: 16px;
  }

  .wizard-step span:last-child {
    display: none;
  }

  .wizard-nav {
    position: sticky;
    bottom: 0;
    margin: 28px -16px -16px;
    padding: 13px 16px;
    background: rgba(17, 19, 22, 0.96);
    backdrop-filter: blur(12px);
  }

  .sheet-main {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .sheet-tabs {
    position: sticky;
    z-index: 8;
    /* Altura real do cabeçalho: no celular ele quebra em linhas e um valor
       fixo deixava a barra de abas escondida atrás dele. */
    top: calc(var(--topbar-height, 64px) + 4px);
    margin: 0 0 12px;
    padding: 7px 4px 0;
    background: rgba(9, 10, 12, 0.96);
    backdrop-filter: blur(12px);
  }

  .sheet-tab-content .sheet-section {
    padding: 15px;
  }

  .attribute-constellation {
    --attribute-node-size: clamp(72px, 22vw, 84px);
    height: 330px;
    margin-top: 8px;
  }

  .attribute-constellation.is-editable {
    height: 372px;
  }

  .attribute-core {
    width: 102px;
    height: 102px;
  }

  .attribute-core::before { inset: 13px; }
  .attribute-core::after { inset: 22px; }
  .attribute-core span { font-size: 1rem; }
  .attribute-core strong { font-size: 0.58rem; }
  .attribute-core small { display: none; }

  .attribute-number {
    width: 48px;
    height: 32px;
    font-size: 1.75rem;
  }

  .attribute-ring > span { font-size: 0.6875rem; }
  .attribute-ring > small { font-size: 0.6875rem; }

  .attribute-stepper {
    gap: 5px;
    margin-top: 7px;
  }

  .attribute-stepper button {
    width: 28px;
    height: 28px;
  }

  .stacked-mobile {
    align-items: stretch;
    flex-direction: column;
  }

  .stacked-mobile .button {
    width: 100%;
  }

  .patent-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .picker-dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 11px;
  }

  .picker-body {
    max-height: none;
    padding: 12px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }

  .catalog-picker-dialog {
    height: auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .catalog-picker-dialog > .picker-body {
    padding-bottom: max(64px, env(safe-area-inset-bottom));
  }

  .picker-dialog .dialog-heading {
    padding: 15px;
  }

  .dialog-heading {
    gap: 10px;
  }

  .dialog-heading h2 {
    overflow-wrap: anywhere;
  }

  .entry-card summary {
    align-items: flex-start;
  }

  .entry-use-button {
    width: 100%;
  }

  .choice-option-grid {
    grid-template-columns: 1fr;
  }

  .choice-dialog-footer {
    grid-template-columns: 1fr 1fr;
  }

  .choice-dialog-footer > span {
    display: none;
  }

  #cancel-ability-choice,
  #cancel-spend-dialog {
    grid-column: 1 / -1;
    order: 3;
  }

  .entry-summary-side .badge {
    display: none;
  }

  .entry-summary-side .badge.ritual-dt-badge {
    display: inline-flex;
  }
}

/* Ritual/ability choices */
.spend-presets { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
.spend-presets button { display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:14px; border:1px solid var(--border,#34363d); border-radius:10px; background:var(--surface,#17191e); color:inherit; text-align:left; cursor:pointer; }
.spend-presets button.active { border-color:var(--accent,#d0ad65); background:#2b281f; outline:1px solid var(--accent,#d0ad65); }
.spend-presets button:disabled { opacity:.48; cursor:not-allowed; }
.spend-presets button small { line-height:1.45; }
.spend-presets button:focus-visible { outline:3px solid #e0bf72; outline-offset:3px; }
.use-option-description { min-height:2rem; margin:14px 0; line-height:1.5; }
.item-upgrades-section { margin:16px 0; padding:12px; border:1px solid var(--border,#34363d); border-radius:8px; }
.item-upgrades-header { display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600; }
.upgrade-card-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.upgrade-card { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 14px; background:#15171b; border:1px solid var(--border,#34363d); border-radius:6px; }
.upgrade-card.just-added { animation: details-reveal 280ms var(--motion) both; }
.upgrade-card-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.upgrade-card-body p { margin:0 0 4px; color:var(--muted,#a4a6af); font-size:0.88rem; }
.upgrade-card-body small { display:block; line-height:1.4; color:var(--muted,#a4a6af); }
.upgrade-add-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; margin-top:12px; max-height:320px; overflow:auto; }
.upgrade-add-list[hidden] { display:none; }
.upgrade-add-option { display:block; width:100%; text-align:left; padding:10px; background:#15171b; border:1px solid var(--border,#34363d); border-radius:6px; cursor:pointer; color:inherit; font:inherit; }
.upgrade-add-option:hover { border-color:var(--border-strong,#535b63); }
.upgrade-add-option small { display:block; margin-top:4px; line-height:1.4; color:var(--muted,#a4a6af); }
.upgrade-reference { padding:16px; }
.custom-item-form .dialog-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:14px; margin-top:6px; border-top:1px solid var(--border); }
@media(max-width:480px) { .spend-presets { grid-template-columns:1fr; } }

.photo-edit-dialog {
  width: min(360px, calc(100vw - 24px));
  height: auto;
}

.photo-edit-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: auto;
}

.photo-edit-frame {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: #0b0d0f;
  cursor: grab;
  touch-action: none;
}

.photo-edit-frame:active {
  cursor: grabbing;
}

.photo-edit-frame img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.photo-edit-zoom {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}

.photo-edit-zoom input[type="range"] {
  width: 100%;
}

/* --- Ameaças (fichas de mestre) -------------------------------------- */

.topbar-nav-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 180ms var(--motion), background 180ms var(--motion);
}

.nav-link:hover {
  border-color: rgba(217, 35, 50, 0.55);
  background: var(--red-soft);
}

.panel-subtle {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
}

.panel-subtle h3 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel-subtle p {
  margin: 4px 0;
}

.threats-home {
  display: grid;
  gap: 18px;
}

.threat-element-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.threat-element-tab {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 180ms var(--motion), color 180ms var(--motion);
}

.threat-element-tab .element-glyph {
  width: 18px;
  height: 18px;
}

.threat-element-tab small {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.68rem;
}

.threat-element-tab:hover {
  border-color: rgba(217, 35, 50, 0.45);
}

.threat-element-tab.active {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--text);
}

.threat-empty {
  padding: 32px 0;
  text-align: center;
}

.threat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.threat-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(28, 31, 36, 0.96), rgba(14, 16, 19, 0.96));
}

.threat-card-portrait {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
}

.threat-card-portrait .element-glyph,
.threat-portrait-large .element-glyph {
  width: 65%;
  height: 65%;
}

.threat-card-body h3 {
  margin: 0 0 2px;
  font-size: 0.98rem;
}

.threat-card .button {
  grid-column: 1 / -1;
}

.threat-sheet .threat-sidebar {
  display: grid;
  gap: 10px;
  text-align: left;
}

.threat-portrait-large {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-soft);
}

.threat-element-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.threat-element-badge .element-glyph {
  width: 14px;
  height: 14px;
}

.threat-flavor {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  line-height: 1.55;
}

.threat-wiki-link {
  justify-self: start;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease;
}

.threat-wiki-link:hover {
  border-color: var(--red);
  color: var(--text);
}

.threat-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.attribute-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.attribute-mini {
  display: grid;
  place-items: center;
  min-width: 46px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
}

.attribute-mini strong {
  font-family: Inter, sans-serif;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.attribute-mini small {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.threat-pv {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.threat-pv strong {
  font-family: Inter, sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.threat-combat-layout {
  display: grid;
  gap: 14px;
}

.threat-presence p {
  margin: 0;
}

.threat-abilities,
.threat-actions {
  display: grid;
  gap: 8px;
}

.threat-abilities h3,
.threat-actions h3 {
  margin: 4px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.threat-action-type {
  padding: 1px 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.threat-attack-row {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.threat-attack-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.threat-attack-row p {
  margin: 2px 0;
}

.threat-description {
  line-height: 1.6;
}

@media (max-width: 720px) {
  .threat-grid {
    grid-template-columns: 1fr;
  }
}