:root {
  --cream: #f8f4ed;
  --paper: #fffdf9;
  --paper-warm: #fbf5f3;
  --ink: #362e39;
  --muted: #756a77;
  --plum: #552b68;
  --plum-deep: #30123d;
  --plum-soft: #e8dced;
  --rose: #c96178;
  --rose-dark: #a9465e;
  --rose-soft: #f3dfe3;
  --pond: #557564;
  --pond-soft: #dfe9e2;
  --gold: #b58a46;
  --line: #ddcdd2;
  --line-dark: rgba(85, 43, 104, 0.18);
  --shadow: 0 18px 55px rgba(59, 30, 63, 0.1);
}

* { box-sizing: border-box; }
[hidden], .editing-only { display: none !important; }
.editing .editing-only { display: block !important; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  padding-bottom: 92px;
  background:
    radial-gradient(circle at 15% 3%, rgba(201, 97, 120, 0.08), transparent 28rem),
    var(--cream);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
input, textarea, select { color: inherit; }

.page-shell { width: min(1480px, calc(100% - 36px)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--plum-deep);
  color: white;
  transform: translateY(-170%);
}
.skip-link:focus { transform: translateY(0); }

.sheet-toolbar {
  position: sticky;
  top: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 0.65rem max(18px, calc((100vw - 1480px) / 2));
  border-bottom: 1px solid rgba(85, 43, 104, 0.12);
  background: rgba(255, 253, 249, 0.93);
  box-shadow: 0 10px 30px rgba(49, 26, 53, 0.06);
  backdrop-filter: blur(16px);
}
.wordmark { display: flex; align-items: center; gap: 0.65rem; width: fit-content; color: var(--plum); font-size: 1.05rem; font-weight: 900; letter-spacing: 0.1em; }
.wordmark-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--rose); color: white; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.2); }
.wordmark small { padding: 0.28rem 0.48rem; border-radius: 6px; background: var(--plum-soft); font-size: 0.57rem; letter-spacing: 0.08em; }
.sheet-nav { display: flex; gap: 1.45rem; font-size: 0.78rem; font-weight: 800; }
.sheet-nav a { position: relative; }
.sheet-nav a::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 2px; border-radius: 4px; background: var(--rose); content: ""; transform: scaleX(0); transition: transform 150ms ease; }
.sheet-nav a:hover::after, .sheet-nav a:focus-visible::after { transform: scaleX(1); }
.toolbar-actions { display: flex; justify-content: flex-end; gap: 0.38rem; }
.toolbar-actions button {
  min-height: 38px;
  padding: 0.48rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  cursor: pointer;
  color: var(--plum);
  font-size: 0.72rem;
  font-weight: 900;
}
.toolbar-actions button:first-child { padding-inline: 1rem; background: var(--plum); border-color: var(--plum); color: white; }
.toolbar-actions button:first-child.active { background: var(--rose); border-color: var(--rose); }
.toolbar-actions button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(70, 35, 75, 0.09); }

.character-hero { position: relative; overflow: hidden; background: linear-gradient(125deg, var(--plum-deep), #5a2e67 64%, #72405f); color: white; }
.character-hero::before { position: absolute; top: -320px; right: -180px; width: 720px; height: 720px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.025), 0 0 0 130px rgba(255, 255, 255, 0.018); content: ""; }
.character-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; align-items: center; min-height: 340px; padding-block: 2.6rem; }
.portrait-panel { position: relative; align-self: end; overflow: hidden; height: 300px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 120px 120px 24px 24px; background: var(--paper); box-shadow: 0 20px 45px rgba(15, 5, 20, 0.3); }
.portrait-panel img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 20%; }
.portrait-panel::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(48, 18, 61, 0.76)); content: ""; }
.portrait-badge { position: absolute; right: 0.7rem; bottom: 0.65rem; left: 0.7rem; z-index: 2; color: white; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }
.identity-panel { align-self: center; }
.section-kicker { margin: 0 0 0.4rem; color: #f0b4c1; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.character-name {
  display: block;
  width: 100%;
  margin: 0 0 1.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 7vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.95;
}
.identity-grid { display: grid; grid-template-columns: 0.8fr 1.3fr 0.35fr 0.9fr 0.9fr 0.7fr 0.6fr 0.38fr; gap: 0.7rem; }
.identity-grid label { min-width: 0; }
.identity-grid label > span { display: block; margin-bottom: 0.24rem; color: #d8c9dc; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.editable-control { width: 100%; border: 0; background: transparent; }
.identity-grid input { min-width: 0; padding: 0.24rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: white; font-size: 0.82rem; font-weight: 800; text-overflow: ellipsis; }
.identity-grid select { width: 100%; min-width: 0; padding: 0.24rem 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.34); border-radius: 0; background: rgba(255, 255, 255, 0.08); color: white; font-size: 0.82rem; font-weight: 900; cursor: pointer; }
.identity-grid select option { color: var(--ink); }
.level-field > span { color: #ffc0ce !important; }
.identity-grid input:read-only { border-bottom-color: rgba(255, 255, 255, 0.13); }
.rules-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.35rem; }
.rules-summary span { padding: 0.47rem 0.68rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #ddd0e0; font-size: 0.72rem; }
.rules-summary strong { margin-left: 0.28rem; color: white; }

.combat-strip { position: relative; z-index: 4; display: grid; grid-template-columns: 0.65fr 1.65fr 0.8fr 0.72fr 0.72fr 0.72fr; gap: 0.7rem; margin-top: -21px; }
.combat-stat { position: relative; display: flex; min-width: 0; min-height: 115px; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; border: 1px solid var(--line-dark); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.combat-stat > span { color: var(--muted); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.combat-stat > input { width: 74px; padding: 0; border: 0; background: transparent; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 2.3rem; font-weight: 700; text-align: center; }
.combat-stat small { color: var(--muted); font-size: 0.65rem; }
.combat-stat > button { margin-top: 0.35rem; padding: 0.25rem 0.45rem; border: 0; border-radius: 6px; background: var(--plum-soft); cursor: pointer; color: var(--plum); font-size: 0.62rem; font-weight: 800; }
.hp-controls { display: grid; grid-template-columns: 30px 60px auto 60px 30px; align-items: center; gap: 0.3rem; margin-top: 0.1rem; }
.hp-controls button, .mini-counter button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-warm); cursor: pointer; color: var(--plum); font-size: 1.05rem; font-weight: 900; }
.hp-controls input, .mini-counter input { width: 100%; border: 0; background: transparent; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 700; text-align: center; }
.hp-controls b { color: var(--line); font-size: 1.4rem; }
.hp-bar { width: min(100%, 260px); height: 7px; margin-top: 0.4rem; overflow: hidden; border-radius: 99px; background: var(--rose-soft); }
.hp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rose-dark), var(--rose)); transition: width 200ms ease; }
.mini-counter { display: grid; grid-template-columns: 30px 60px 30px; gap: 0.28rem; align-items: center; margin-top: 0.25rem; }
.rollable-stat { border-color: rgba(201, 97, 120, 0.34); cursor: pointer; }
.rollable-stat strong { color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 2.4rem; line-height: 1.1; }
.rollable-stat:hover { border-color: var(--rose); transform: translateY(-2px); }

.main-sheet-grid { display: grid; grid-template-columns: 285px minmax(0, 1fr) 275px; gap: 1rem; align-items: start; margin-top: 1rem; }
.left-rail, .centre-column, .right-rail { display: grid; gap: 1rem; min-width: 0; }
.sheet-card { overflow: hidden; border: 1px solid var(--line-dark); border-radius: 22px; background: var(--paper); box-shadow: 0 12px 35px rgba(54, 28, 59, 0.065); }
.card-heading { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line-dark); background: linear-gradient(180deg, white, #fefaf8); }
.card-heading > div > span, .notes-heading > div > span, .roll-log-heading span { display: block; margin-bottom: 0.12rem; color: var(--rose-dark); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.card-heading h2, .notes-heading h2, .roll-log-heading h2 { margin: 0; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; line-height: 1.05; }
.card-heading > small { max-width: 120px; color: var(--muted); font-size: 0.62rem; line-height: 1.35; text-align: right; }

.ability-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; padding: 1rem; }
.ability-card { position: relative; display: grid; min-height: 134px; place-items: center; padding: 0.75rem; border: 1px solid var(--line); border-radius: 18px; background: var(--paper-warm); text-align: center; }
.ability-card:nth-child(2n) { background: #faf6fc; }
.ability-card > span { color: var(--plum); font-size: 0.65rem; font-weight: 900; text-transform: uppercase; }
.ability-mod { width: 58px; height: 58px; border: 2px solid var(--rose); border-radius: 50%; background: white; cursor: pointer; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; font-weight: 700; box-shadow: 0 6px 15px rgba(126, 63, 96, 0.12); }
.ability-mod:hover { background: var(--rose); color: white; transform: scale(1.04); }
.ability-card input { width: 45px; padding: 0.12rem; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: 0.8rem; text-align: center; }
.ability-card input:read-only { pointer-events: none; }
.ability-card > small { position: absolute; right: 0.55rem; bottom: 0.4rem; color: #a797a8; font-size: 0.5rem; font-weight: 900; }

.compact-list { padding: 0.65rem 0.9rem 0.9rem; }
.compact-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 0.5rem; align-items: center; min-height: 36px; border-bottom: 1px solid rgba(85, 43, 104, 0.08); font-size: 0.78rem; }
.compact-row:last-child { border-bottom: 0; }
.compact-row > button { min-width: 36px; padding: 0.24rem 0.35rem; border: 1px solid var(--line); border-radius: 7px; background: white; cursor: pointer; color: var(--plum); font-size: 0.76rem; font-weight: 900; }
.compact-row > button:hover { border-color: var(--rose); background: var(--rose-soft); }
.prof-marker { position: relative; display: grid; width: 18px; height: 18px; place-items: center; }
.prof-marker input { position: absolute; opacity: 0; }
.prof-marker i { width: 11px; height: 11px; border: 1px solid #aa9cab; border-radius: 50%; background: white; }
.prof-marker input:checked + i { border-color: var(--rose); background: var(--rose); box-shadow: inset 0 0 0 2px white; }
.skill-row { grid-template-columns: 22px 1fr 36px auto; }
.skill-row > small { color: var(--muted); font-size: 0.58rem; font-weight: 900; text-align: center; }
.skill-row select { min-width: 0; padding: 0.18rem; border: 1px solid var(--line); border-radius: 6px; background: white; font-size: 0.64rem; }
.rank { color: #b9aebc; font-size: 0.7rem; font-style: normal; text-align: center; }
.rank-1 { color: var(--rose); }
.rank-2 { color: var(--plum); }
.passive-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); background: var(--plum-soft); }
.passive-grid span { display: grid; min-height: 78px; place-items: center; padding: 0.55rem 0.35rem; border-right: 1px solid rgba(85, 43, 104, 0.12); text-align: center; }
.passive-grid span:last-child { border-right: 0; }
.passive-grid small { color: var(--plum); font-size: 0.52rem; font-weight: 900; line-height: 1.25; text-transform: uppercase; }
.passive-grid strong { color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; }

.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding: 1rem; }
.resource-card { position: relative; min-height: 145px; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-warm); }
.resource-card h3 { margin: 0; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.03rem; }
.resource-card p { margin: 0.18rem 0 0; color: var(--muted); font-size: 0.62rem; }
.resource-card.resource-locked { border-style: dashed; background: linear-gradient(135deg, #f6f1f4, #eee7ef); }
.resource-lock { display: grid; place-items: center; gap: 0.15rem; margin-top: 1rem; color: var(--muted); }
.resource-lock span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.resource-lock strong { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; }
.resource-counter { display: flex; align-items: center; justify-content: center; gap: 0.42rem; margin-top: 1.05rem; }
.resource-counter button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; cursor: pointer; color: var(--plum); font-weight: 900; }
.resource-counter strong, .resource-counter input { width: 34px; border: 0; background: transparent; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 700; text-align: center; }
.resource-counter span { color: var(--muted); }
.inline-action { display: block; margin: 0.55rem auto 0; padding: 0.28rem 0.5rem; border: 0; border-radius: 7px; background: var(--plum-soft); cursor: pointer; color: var(--plum); font-size: 0.62rem; font-weight: 900; }
.rest-actions { display: flex; gap: 0.6rem; padding: 0 1rem 1rem; }
.rest-actions button { flex: 1; min-height: 42px; border: 1px solid var(--plum); border-radius: 10px; background: white; cursor: pointer; color: var(--plum); font-size: 0.72rem; font-weight: 900; }
.rest-actions button:last-child { background: var(--plum); color: white; }

.legend { display: flex; gap: 0.4rem; }
.legend span { padding: 0.35rem 0.5rem; border-radius: 7px; background: var(--rose-soft); color: var(--rose-dark); font-size: 0.62rem; font-weight: 900; }
.action-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; padding: 0.8rem 1rem 0; }
.action-tabs button { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 0.55rem 0.85rem; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; color: var(--plum); font-weight: 900; }
.action-tabs button small { display: grid; min-width: 34px; height: 24px; place-items: center; border-radius: 999px; background: var(--plum-soft); font-size: 0.6rem; }
.action-tabs button.active { border-color: var(--plum); background: var(--plum); color: white; }
.action-tabs button.active small { background: rgba(255, 255, 255, 0.16); }
.action-list { display: grid; gap: 0.7rem; padding: 1rem; }
.action-card { position: relative; padding: 1rem; border: 1px solid var(--line); border-radius: 17px; background: var(--paper-warm); }
.action-card:nth-child(2n) { background: #fbf8fc; }
.action-card.action-locked { border-style: dashed; background: #f4f0f3; }
.action-card.action-locked::after { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35)); content: ""; pointer-events: none; }
.action-card.action-locked > * { position: relative; z-index: 1; }
.action-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.action-title { min-width: 0; flex: 1; }
.action-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.action-title h3 { margin: 0; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.22rem; }
.action-title > input { color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 700; }
.action-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin-top: 0.2rem; color: var(--muted); font-size: 0.63rem; font-weight: 800; }
.action-meta input { max-width: 180px; border-bottom: 1px solid var(--line); }
.action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
.action-buttons button, .save-chip { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 0.38rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--plum); font-size: 0.65rem; font-weight: 900; }
.action-buttons button { cursor: pointer; }
.action-buttons button:disabled { border-style: dashed; cursor: not-allowed; opacity: 0.45; }
.action-buttons button:hover { border-color: var(--rose); background: var(--rose-soft); }
.action-buttons .use-button { border-color: var(--plum); background: var(--plum); color: white; }
.save-chip { background: var(--pond-soft); border-color: rgba(85, 117, 100, 0.25); color: var(--pond); }
.formula-line { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid rgba(85, 43, 104, 0.09); color: var(--muted); font-size: 0.66rem; }
.formula-line b { color: var(--plum); font-family: monospace; }
.action-card > p { margin: 0.62rem 0 0; color: #615665; font-size: 0.76rem; line-height: 1.55; }
.action-editor { display: grid; grid-template-columns: 1.2fr 1.2fr 0.8fr 0.55fr 0.7fr 0.35fr; gap: 0.5rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.action-editor label { color: var(--muted); font-size: 0.55rem; font-weight: 900; text-transform: uppercase; }
.action-editor input, .action-editor select, .action-card textarea { width: 100%; margin-top: 0.2rem; padding: 0.45rem; border: 1px solid var(--line); border-radius: 7px; background: white; font-size: 0.7rem; }
.action-card textarea { min-height: 86px; resize: vertical; }
.level-lock, .level-ready { display: inline-flex; min-height: 23px; align-items: center; padding: 0.2rem 0.48rem; border-radius: 999px; font-size: 0.54rem; font-style: normal; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.level-lock { border: 1px solid #c5b8c5; background: #eee7ef; color: #7e7180; }
.level-ready { border: 1px solid rgba(85, 117, 100, 0.25); background: var(--pond-soft); color: var(--pond); }
.scaling-panel { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.7rem; margin-top: 0.8rem; padding: 0.65rem 0.75rem; border-left: 3px solid var(--rose); border-radius: 0 8px 8px 0; background: rgba(243, 223, 227, 0.52); font-size: 0.67rem; }
.scaling-panel strong { color: var(--rose-dark); }
.scaling-panel span { color: var(--ink); }
.scaling-panel small { grid-column: 1 / -1; color: var(--muted); }
.scaling-editor { display: block; margin-top: 0.7rem; color: var(--muted); font-size: 0.55rem; font-weight: 900; text-transform: uppercase; }
.scaling-editor textarea { min-height: 58px; }
.empty-actions { margin: 0; padding: 2rem 1rem; color: var(--muted); text-align: center; }
.delete-button { margin-top: 0.55rem; padding: 0.3rem 0.48rem; border: 1px solid #d68c9b; border-radius: 7px; background: white; cursor: pointer; color: #9b3650; font-size: 0.6rem; font-weight: 900; }
.add-button { width: calc(100% - 2rem); min-height: 42px; margin: 0 1rem 1rem; border: 1px dashed var(--rose); border-radius: 10px; background: var(--rose-soft); cursor: pointer; color: var(--rose-dark); font-weight: 900; }

.feature-list { padding: 0.5rem 1rem 1rem; }
.feature-row { border-bottom: 1px solid var(--line); }
.feature-row:last-child { border-bottom: 0; }
.feature-row summary { display: grid; grid-template-columns: 150px 1fr auto; gap: 0.7rem; align-items: center; min-height: 48px; cursor: pointer; list-style-position: inside; }
.feature-row summary > span { color: var(--rose-dark); font-size: 0.6rem; font-weight: 900; text-transform: uppercase; }
.feature-row summary strong { color: var(--plum); font-size: 0.79rem; }
.feature-row summary input { width: calc(100% - 20px); padding: 0.3rem; border: 1px solid var(--line); border-radius: 6px; background: white; font-size: 0.7rem; }
.feature-row p { margin: 0 0 0.8rem 150px; color: var(--muted); font-size: 0.74rem; }
.feature-row textarea { width: calc(100% - 150px); min-height: 85px; margin: 0 0 0.6rem 150px; padding: 0.5rem; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.feature-row .delete-button { margin: 0 0 0.8rem 150px; }
.feature-row.feature-locked { opacity: 0.65; }
.feature-row.feature-locked summary { filter: grayscale(0.3); }
.feature-lock-note { color: var(--rose-dark) !important; font-weight: 900; }
.feature-level { display: flex; align-items: center; gap: 0.25rem; color: var(--muted); font-size: 0.58rem; font-weight: 900; }
.feature-level input { width: 44px !important; }

.death-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.death-row:last-child { border-bottom: 0; }
.death-row > div { display: flex; gap: 0.45rem; }
.death-row button { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; background: white; cursor: pointer; }
.death-row.success button.active { border-color: var(--pond); background: var(--pond); box-shadow: inset 0 0 0 4px white; }
.death-row.failure button.active { border-color: var(--rose); background: var(--rose); box-shadow: inset 0 0 0 4px white; }
.quick-actions { padding-bottom: 0.55rem; }
.quick-actions > button { display: block; width: calc(100% - 1.4rem); margin: 0.55rem 0.7rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-warm); cursor: pointer; text-align: left; }
.quick-actions > button:hover { border-color: var(--rose); transform: translateY(-1px); }
.quick-actions > button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: 0.55; transform: none; }
.quick-actions strong, .quick-actions span { display: block; }
.quick-actions strong { color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 0.92rem; }
.quick-actions span { margin-top: 0.18rem; color: var(--muted); font-size: 0.62rem; }
.formula-help { padding-bottom: 0.9rem; }
.formula-help > p { margin: 0.7rem 1rem; color: var(--muted); font-size: 0.72rem; }
.token-list { display: flex; flex-wrap: wrap; gap: 0.32rem; padding-inline: 1rem; }
code { padding: 0.18rem 0.32rem; border-radius: 5px; background: var(--plum-soft); color: var(--plum); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.66rem; font-weight: 800; }

.notes-section { padding-block: 4.5rem 3rem; }
.notes-heading { display: grid; grid-template-columns: 1fr 0.7fr; gap: 3rem; align-items: end; margin-bottom: 2rem; }
.notes-heading h2 { font-size: clamp(2.4rem, 4vw, 4rem); }
.notes-heading > p { margin: 0; color: var(--muted); }
.notes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.note-card { min-height: 170px; padding: 1.1rem; border: 1px solid var(--line-dark); border-radius: 18px; background: var(--paper); }
.note-backstory, .note-notes, .note-equipment, .note-proficiencies { grid-column: span 2; }
.note-card h3 { margin: 0 0 0.6rem; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
.note-card p { margin: 0; color: var(--muted); font-size: 0.76rem; white-space: pre-line; }
.note-card textarea { width: 100%; min-height: 130px; padding: 0.55rem; border: 1px solid var(--line); border-radius: 9px; resize: vertical; }
.danger-zone { display: flex; justify-content: flex-end; margin-top: 1rem; }
.danger-zone button { padding: 0.55rem 0.8rem; border: 1px solid #c97688; border-radius: 8px; background: white; cursor: pointer; color: #9b3650; font-size: 0.68rem; font-weight: 900; }

.dice-dock {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto auto minmax(160px, 270px) minmax(150px, 220px) minmax(150px, 1fr);
  gap: 0.65rem;
  align-items: center;
  min-height: 76px;
  padding: 0.55rem max(18px, calc((100vw - 1480px) / 2));
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(48, 18, 61, 0.96);
  box-shadow: 0 -12px 35px rgba(32, 10, 40, 0.23);
  color: white;
  backdrop-filter: blur(14px);
}
.roll-mode, .quick-dice { display: flex; gap: 0.28rem; }
.dice-dock button { min-height: 34px; padding: 0.35rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 8px; background: rgba(255, 255, 255, 0.07); cursor: pointer; color: white; font-size: 0.65rem; font-weight: 900; }
.roll-mode button.active { border-color: var(--rose); background: var(--rose); }
.quick-dice button:hover, .dice-dock button:hover { border-color: #f1a6b6; background: rgba(201, 97, 120, 0.24); }
.custom-roll { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; }
.custom-roll input { min-width: 0; height: 35px; padding: 0.4rem 0.55rem; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: white; font-family: monospace; font-size: 0.75rem; }
.last-result { display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
.last-result span { overflow: hidden; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.last-result strong { color: #ffc0ce; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; }
.save-notice { overflow: hidden; color: #cbbbd0; font-size: 0.62rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.roll-log { position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; width: min(420px, 94vw); padding-bottom: 1rem; overflow: auto; border-left: 1px solid var(--line); background: var(--paper); box-shadow: -20px 0 60px rgba(39, 15, 47, 0.25); transform: translateX(105%); transition: transform 220ms ease; }
.roll-log.open { transform: translateX(0); }
.roll-log-heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem; border-bottom: 1px solid var(--line); background: rgba(255, 253, 249, 0.95); backdrop-filter: blur(10px); }
.roll-log-heading button, .clear-log { padding: 0.42rem 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; color: var(--plum); font-size: 0.65rem; font-weight: 900; }
.roll-log-list { display: grid; gap: 0.55rem; padding: 0.8rem; }
.roll-log-list article { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-warm); }
.roll-log-list article.critical { border-color: #79a087; background: var(--pond-soft); }
.roll-log-list article.fumble { border-color: #d47b8e; background: var(--rose-soft); }
.roll-log-list article div { min-width: 0; }
.roll-log-list article strong, .roll-log-list article span { display: block; }
.roll-log-list article strong { color: var(--plum); font-size: 0.76rem; }
.roll-log-list article span { color: var(--muted); font-family: monospace; font-size: 0.62rem; }
.roll-log-list article > b { color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; }
.roll-log-list article p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.64rem; }
.empty-log { padding: 2rem 1rem; color: var(--muted); text-align: center; }
.clear-log { display: block; margin: 0 auto; }

.roll-dialog-backdrop { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 1rem; background: rgba(29, 10, 36, 0.72); backdrop-filter: blur(7px); }
.roll-dialog { width: min(540px, 100%); max-height: min(760px, calc(100vh - 2rem)); overflow: auto; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 24px; background: var(--paper); box-shadow: 0 30px 100px rgba(22, 7, 28, 0.5); }
.roll-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.25rem; border-bottom: 1px solid var(--line); background: linear-gradient(125deg, var(--plum-deep), var(--plum)); color: white; }
.roll-dialog-header span { color: #f0b4c1; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.roll-dialog-header h2 { margin: 0.18rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; line-height: 1.1; }
.roll-dialog-header button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(255, 255, 255, 0.08); cursor: pointer; color: white; font-size: 1.45rem; }
.roll-dialog-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; padding: 1rem 1.15rem; }
.roll-dialog-summary > span { grid-column: 1 / -1; color: var(--muted); font-size: 0.7rem; font-weight: 800; }
.roll-dialog-summary p { margin: 0; padding: 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-warm); }
.roll-dialog-summary small, .roll-dialog-summary strong { display: block; }
.roll-dialog-summary small { color: var(--muted); font-size: 0.56rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.roll-dialog-summary strong { margin-top: 0.2rem; color: var(--plum); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.85rem; }
.spend-explainer { margin: 0 1.15rem; padding: 0.8rem 0.9rem; border-radius: 12px; }
.spend-explainer.will-spend { border: 1px solid #df9bad; background: var(--rose-soft); }
.spend-explainer.no-spend { border: 1px solid rgba(85, 117, 100, 0.28); background: var(--pond-soft); }
.spend-explainer strong { color: var(--plum); font-size: 0.76rem; }
.spend-explainer p { margin: 0.25rem 0; color: var(--ink); font-size: 0.72rem; }
.spend-explainer span { color: var(--muted); font-size: 0.64rem; font-weight: 800; }
.roll-effect-copy { margin: 0.85rem 1.15rem 0; color: var(--muted); font-size: 0.74rem; }
.roll-error { margin: 0.75rem 1.15rem 0; padding: 0.6rem; border: 1px solid #d47b8e; border-radius: 8px; background: #fff0f3; color: #92344b; font-size: 0.72rem; font-weight: 900; }
.roll-dialog-actions { display: flex; justify-content: flex-end; gap: 0.55rem; padding: 1rem 1.15rem 1.15rem; }
.roll-dialog-actions button { min-height: 40px; padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; color: var(--plum); font-size: 0.7rem; font-weight: 900; }
.roll-dialog-actions .confirm-roll { border-color: var(--plum); background: var(--plum); color: white; }
.roll-result-card { display: grid; place-items: center; margin: 1.1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, var(--paper-warm), #faf5fc); text-align: center; }
.roll-result-card > span { color: var(--muted); font-family: monospace; font-size: 0.72rem; }
.roll-result-card > strong { margin: 0.2rem 0; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 4rem; line-height: 1; }
.roll-result-card > strong.effect-check { display: grid; width: 78px; height: 78px; place-items: center; border-radius: 50%; background: var(--pond-soft); color: var(--pond); font-size: 2.8rem; }
.roll-result-card p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.72rem; }
.result-spend-line { display: grid; gap: 0.2rem; margin: 0 1.15rem; padding: 0.75rem 0.85rem; border-left: 3px solid var(--rose); background: var(--rose-soft); font-size: 0.7rem; }
.result-spend-line strong { color: var(--rose-dark); }
.result-spend-line span { color: var(--ink); }

.editing .editable-control:not(.character-name), .editing textarea, .editing select, .editing input:not([type="checkbox"]):not([type="file"]) { outline: 1px solid rgba(201, 97, 120, 0.28); outline-offset: 1px; }
.editing .character-name { border-bottom: 2px dashed rgba(255, 255, 255, 0.32); }
:focus-visible { outline: 3px solid #ed9cae !important; outline-offset: 3px !important; }

@media (max-width: 1230px) {
  .sheet-nav { display: none; }
  .sheet-toolbar { grid-template-columns: 1fr auto; }
  .identity-grid { grid-template-columns: repeat(4, 1fr); }
  .main-sheet-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .right-rail { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .combat-strip { grid-template-columns: 0.65fr 1.7fr 0.75fr repeat(3, 0.7fr); }
  .dice-dock { grid-template-columns: auto 1fr minmax(150px, 230px) minmax(140px, 190px); }
  .quick-dice { display: none; }
  .save-notice { display: none; }
}

@media (max-width: 900px) {
  body { padding-bottom: 126px; }
  .toolbar-actions button:not(:first-child) { display: none; }
  .character-hero-inner { grid-template-columns: 170px 1fr; min-height: 320px; }
  .portrait-panel { height: 255px; }
  .identity-grid { grid-template-columns: repeat(3, 1fr); }
  .combat-strip { grid-template-columns: repeat(3, 1fr); margin-top: 0.8rem; }
  .hp-stat { grid-column: span 2; }
  .main-sheet-grid { grid-template-columns: 1fr; }
  .left-rail { grid-template-columns: 1fr 1fr; }
  .skills-section { grid-column: 1 / -1; }
  .right-rail { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .formula-help { grid-column: 1 / -1; }
  .notes-grid { grid-template-columns: repeat(2, 1fr); }
  .dice-dock { grid-template-columns: 1fr 1fr; padding-block: 0.55rem; }
  .custom-roll { order: 3; }
  .last-result { order: 4; }
}

@media (max-width: 650px) {
  body { font-size: 14px; }
  .page-shell { width: min(100% - 20px, 620px); }
  .sheet-toolbar { min-height: 60px; padding-inline: 10px; }
  .wordmark small { display: none; }
  .toolbar-actions button:first-child { min-height: 34px; padding-inline: 0.7rem; }
  .character-hero-inner { grid-template-columns: 105px 1fr; gap: 1rem; min-height: 270px; padding-block: 1.7rem; }
  .portrait-panel { height: 205px; border-radius: 70px 70px 18px 18px; }
  .character-name { margin-bottom: 0.8rem; font-size: clamp(3.4rem, 18vw, 5rem); }
  .identity-grid { grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
  .identity-grid label:nth-child(n + 5) { display: none; }
  .rules-summary { gap: 0.3rem; margin-top: 0.8rem; }
  .rules-summary span { padding: 0.32rem 0.42rem; font-size: 0.58rem; }
  .combat-strip { grid-template-columns: repeat(2, 1fr); }
  .hp-stat { grid-column: 1 / -1; grid-row: 1; }
  .combat-stat { min-height: 104px; border-radius: 16px; }
  .left-rail { grid-template-columns: 1fr; }
  .skills-section { grid-column: auto; }
  .ability-grid { grid-template-columns: repeat(3, 1fr); }
  .ability-card { min-height: 125px; padding-inline: 0.35rem; }
  .card-heading { min-height: 62px; padding: 0.85rem 1rem; }
  .card-heading h2 { font-size: 1.2rem; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 120px; }
  .action-tabs { gap: 0.35rem; padding-inline: 0.65rem; }
  .action-tabs button { padding-inline: 0.55rem; }
  .action-card-top { flex-direction: column; }
  .action-buttons { justify-content: flex-start; }
  .action-editor { grid-template-columns: 1fr 1fr; }
  .feature-row summary { grid-template-columns: 90px 1fr auto; gap: 0.4rem; }
  .feature-row p, .feature-row textarea, .feature-row .delete-button { width: auto; margin-left: 0; }
  .right-rail { grid-template-columns: 1fr; }
  .formula-help { grid-column: auto; }
  .notes-heading { grid-template-columns: 1fr; gap: 1rem; }
  .notes-grid { grid-template-columns: 1fr; }
  .note-backstory, .note-notes, .note-equipment, .note-proficiencies { grid-column: auto; }
  .dice-dock { min-height: 116px; grid-template-columns: 1fr 1fr; padding-inline: 10px; }
  .roll-mode button { flex: 1; }
  .save-notice { display: none; }
  .roll-dialog-backdrop { padding: 0.5rem; }
  .roll-dialog { max-height: calc(100vh - 1rem); border-radius: 18px; }
  .roll-dialog-summary { grid-template-columns: 1fr; }
  .roll-dialog-summary > span { grid-column: auto; }
}

@media print {
  @page { margin: 10mm; }
  body { padding: 0; background: white; color: black; font-size: 10px; }
  .sheet-toolbar, .dice-dock, .roll-log, .roll-dialog-backdrop, .toolbar-actions, .rest-actions, .action-tabs, .action-buttons, .delete-button, .add-button, .danger-zone, .inline-action { display: none !important; }
  .page-shell { width: 100%; }
  .character-hero { background: white; color: black; border-bottom: 2px solid #552b68; }
  .character-hero::before { display: none; }
  .character-hero-inner { min-height: 190px; grid-template-columns: 120px 1fr; padding-block: 8px; }
  .portrait-panel { height: 170px; }
  .character-name, .identity-grid input { color: black; }
  .section-kicker, .identity-grid label > span { color: #6b4c70; }
  .rules-summary span { border-color: #bbb; color: #444; }
  .rules-summary strong { color: black; }
  .combat-strip { margin-top: 6px; }
  .combat-stat { min-height: 68px; box-shadow: none; break-inside: avoid; }
  .main-sheet-grid { grid-template-columns: 200px 1fr 190px; }
  .right-rail { grid-column: auto; display: grid; grid-template-columns: 1fr; }
  .sheet-card { box-shadow: none; break-inside: avoid; }
  .ability-grid { gap: 4px; padding: 5px; }
  .ability-card { min-height: 90px; }
  .ability-mod { width: 42px; height: 42px; font-size: 1.2rem; }
  .resource-grid { gap: 4px; padding: 5px; }
  .action-card { break-inside: avoid; }
  .notes-section { padding-block: 15px; }
  .notes-grid { grid-template-columns: repeat(2, 1fr); }
}

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