@import url("https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap");

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #efe7dc;
  background: #100e0d;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: #100e0d; color: #efe7dc; }
button, textarea, input, select { font: inherit; }
button { cursor: pointer; }

.launcher {
  padding: 16px;
  background: linear-gradient(180deg, #1b1613, #100e0d);
  min-height: 100vh;
}

.eyebrow {
  color: #b9895c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.launcher h1, .sheet-header h1 {
  margin: 5px 0 0;
  font-family: Georgia, serif;
  font-weight: 600;
}

.launcher h1 { font-size: 22px; }
.launcher p { color: #bdb1a7; font-size: 12px; line-height: 1.45; }

button {
  border: 1px solid #765039;
  border-radius: 9px;
  background: #3a251a;
  color: #f1dfcb;
  padding: 9px 11px;
  font-weight: 700;
}

button:hover { background: #493022; }
button:disabled { opacity: .55; cursor: default; }
button.secondary { background: transparent; border-color: #46372f; color: #c8bbb0; }
button.mini { padding: 3px 8px; border-radius: 7px; min-width: 30px; }
.message { margin-top: 10px; color: #d5aa83; font-size: 11px; line-height: 1.4; }

.sheet-shell {
  min-height: 100vh;
  padding: 15px;
  background:
    radial-gradient(circle at 50% -20%, rgba(146, 75, 37, .22), transparent 36%),
    linear-gradient(180deg, #181311, #0e0c0b);
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.sheet-header h1 { font-size: 30px; letter-spacing: .03em; }
.sheet-header p { margin: 4px 0 0; color: #9f9389; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

.role {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #674a38;
  border-radius: 999px;
  background: #251a15;
  color: #dfba91;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.portrait-placeholder {
  height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #463229;
  border-radius: 14px;
  background: radial-gradient(circle, #37231b 0%, #16110f 62%, #0e0c0b 100%);
  color: #87796f;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.creature-mark {
  width: 58px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 45% 55%;
  background: #090807;
  color: #75513b;
  font-family: Georgia, serif;
  font-size: 32px;
}

.panel {
  margin-top: 11px;
  padding: 12px;
  border: 1px solid #3e3029;
  border-radius: 12px;
  background: #15110f;
}

.public-panel { border-color: #4d392e; }
.gm-panel { border-color: #67432f; background: #1b130f; }

.section-title {
  margin-bottom: 8px;
  color: #b89472;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.no-margin { margin-bottom: 0; }
.mini-heading { margin-top: 10px; margin-bottom: 5px; font-size: 8px; }
.summary-title { cursor: pointer; margin-bottom: 0; }
details[open] > .summary-title { margin-bottom: 9px; }

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel p { margin: 0 0 7px; color: #d0c5bc; font-size: 12px; line-height: 1.48; }
.panel p:last-child { margin-bottom: 0; }

.combat-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.combat-summary span,
.combat-summary strong {
  padding: 3px 6px;
  border: 1px solid #4e3a30;
  border-radius: 999px;
  color: #c7a17e;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .055em;
}

.combat-summary strong {
  border-color: #7b3d31;
  color: #e09b80;
}

.hp-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 7px 0 5px;
}

.hp-pip {
  width: 10px;
  height: 10px;
  border: 1px solid #5e493b;
  background: #201814;
}

.hp-pip.filled { background: #7c3328; border-color: #a05a47; }
.hp-pip.empty {
  background:
    linear-gradient(135deg, transparent 43%, rgba(124, 100, 82, .22) 44% 56%, transparent 57%),
    #17120f;
}

.data-list { border-top: 1px solid #30251f; }

.data-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #30251f;
  font-size: 12px;
}

.data-row > span:first-child { color: #95887e; }
.data-row strong { color: #ece2d9; font-weight: 700; }

.gm-stat-value {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.effective-value {
  min-width: 42px;
  text-align: right;
}

.changed-stat {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
}

.changed-stat s { color: #766b64; }
.changed-stat strong { color: #df9e80; font-size: 15px; }

.hidden-value {
  color: #6f655e;
  letter-spacing: .13em;
  font-weight: 800;
  user-select: none;
}

.inline-stats { display: flex; align-items: center; gap: 5px; }

.stat-input {
  width: 50px;
  border: 1px solid #49352b;
  border-radius: 7px;
  background: #0d0b0a;
  color: #ede4dc;
  padding: 5px;
}

.text-input {
  width: 100%;
  border: 1px solid #49352b;
  border-radius: 7px;
  background: #0d0b0a;
  color: #ede4dc;
  padding: 6px 8px;
}

.reveal-control,
.exploit-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9f9389;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.reveal-control input,
.exploit-control input { accent-color: #9a603b; }

.weakness-list,
.ability-list { display: grid; gap: 8px; }

.weakness-card,
.ability-card {
  padding: 9px;
  border: 1px solid #352922;
  border-radius: 9px;
  background: #110e0d;
}

.weakness-card { border-color: #493128; }

.weakness-heading,
.ability-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.weakness-heading strong,
.ability-heading strong { color: #e9d8c7; font-size: 12px; }

.weakness-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.active-weakness {
  border-color: #8a493a;
  background: #1b100e;
}

.active-weakness .weakness-heading strong { color: #efb092; }
.weakness-rule { color: #d8b8a6 !important; font-size: 10px !important; }

.rule-editor, .clue-editor, textarea {
  width: 100%;
  min-height: 62px;
  resize: vertical;
  border: 1px solid #49352b;
  border-radius: 8px;
  background: #0d0b0a;
  color: #ede4dc;
  padding: 8px;
  font-size: 11px;
  line-height: 1.4;
}

.clue-label { display: block; margin-top: 7px; color: #9a8c82; font-size: 10px; }
.clue-editor { margin-top: 4px; min-height: 48px; color: #cdbeb1; }

.locked-card { opacity: .76; }

.lock-chip, .known-chip, .disabled-chip {
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid #44362e;
  color: #7f746d;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.known-chip { border-color: #5a4638; color: #c49c78; }
.disabled-chip { margin-right: 5px; border-color: #70362f; color: #ce7d68; }
.public-ability p, .public-weakness p { color: #d2c6bc; font-size: 11px; }
.disabled-ability { opacity: .62; }

.creature-checks { display: grid; gap: 7px; }

.combat-check-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-color: #8e513c;
  background: #3b2018;
}

.combat-check-button span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
}

.combat-check-button strong { font-size: 20px; font-family: Georgia, serif; }

.ability-check-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.ability-check-button {
  min-width: 0;
  padding: 6px 3px;
  display: grid;
  gap: 2px;
  border-color: #49382f;
  background: #181311;
}

.ability-check-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.ability-check-button strong { font-size: 14px; }

.check-stat-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed #3d3029;
}

.check-stat-editor label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  color: #94877d;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.check-stat-editor .stat-input { width: 42px; }

.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.difficulty-cell {
  min-width: 0;
  padding: 5px 2px;
  display: grid;
  gap: 1px;
  border-color: #40332c;
  background: #100d0c;
}

.difficulty-cell strong { font-size: 13px; }
.difficulty-cell span { font-size: 6px; text-transform: uppercase; color: #8e8178; }
.difficulty-cell.target-active { border-color: #a06849; background: #332018; }
.difficulty-cell.target-active strong { color: #f0c09d; }

.formula,
.bridge-note,
.check-source {
  color: #bdb1a7 !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

.check-against {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #413229;
  border-radius: 8px;
  background: #100d0c;
  font-size: 10px;
}

.check-against span { color: #8f8278; }
.check-against strong { color: #e2bd9c; }

.check-draw-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.check-result-layout {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
  margin-top: 8px;
}

.check-card {
  min-height: 112px;
  padding: 8px;
  display: grid;
  align-content: space-between;
  border: 1px solid #6b4939;
  border-radius: 9px;
  background: linear-gradient(180deg, #2b1b15, #130f0d);
}

.check-card.sinister { border-color: #74342f; }
.check-card.favourable { border-color: #6f5c3c; }
.check-card-kicker { color: #a9866d; font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.check-card > strong { font-family: Georgia, serif; font-size: 12px; }
.check-card-number { font-family: Georgia, serif; font-size: 35px; line-height: 1; }

.check-maths {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px solid #382c26;
  border-radius: 9px;
  background: #100d0c;
}

.check-maths > div:not(.math-symbol) {
  display: grid;
  gap: 2px;
  text-align: center;
}

.check-maths span { color: #887b72; font-size: 7px; text-transform: uppercase; }
.check-maths strong { font-size: 17px; }
.math-symbol { color: #75665c; font-weight: 900; }
.total-box strong { color: #efb48c; font-size: 24px; }

.outcome-result {
  margin-top: 8px;
  padding: 7px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #46362d;
  border-radius: 8px;
}

.outcome-result div { display: grid; gap: 1px; }
.outcome-result span, .outcome-result em { color: #94877d; font-size: 8px; }
.outcome-result strong { font-size: 12px; }
.outcome-result.strong, .outcome-result.success { border-color: #5e5d3e; }
.outcome-result.mixed { border-color: #70583b; }
.outcome-result.failure, .outcome-result.severe { border-color: #743b32; }

.sheet-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.stay-open-note {
  margin-top: 10px;
  color: #80746c;
  font-size: 10px;
  line-height: 1.4;
}

.window-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -15px -15px 12px;
  padding: 7px 9px;
  border-bottom: 1px solid #4a372d;
  background: #18120f;
}

.window-controls { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }

.icon-button {
  min-width: 30px;
  height: 30px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1;
}

.wide-icon { min-width: 74px; font-size: 10px; }

.window-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  overflow: hidden;
}

.window-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Georgia, serif;
  font-size: 14px;
}

.window-kind {
  flex: 0 0 auto;
  color: #b9895c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.compact-shell {
  min-height: 0;
  height: 52px;
  padding: 0;
  overflow: hidden;
  background: #18120f;
}

.compact-shell .window-bar {
  position: static;
  height: 52px;
  margin: 0;
  padding: 8px 9px;
  border-bottom: 0;
}

.collapsed-bar { margin: 0; }

html.resizing,
html.resizing body,
html.resizing .sheet-shell {
  overflow: hidden !important;
}

@media (max-width: 380px) {
  .ability-check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .difficulty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .check-result-layout { grid-template-columns: 1fr; }
  .gm-stat-value { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-shell, .window-bar { scroll-behavior: auto; }
}


/* =========================================================
   v0.8 — OBSERVED CONDITION + LIVE GLOAMLING ART
   ========================================================= */

.creature-portrait {
  position: relative;
  height: 270px;
  overflow: hidden;
  border: 1px solid #463229;
  border-radius: 14px;
  background: #090807;
}

.creature-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  background: #090807;
  filter: contrast(1.03) saturate(.92);
}

.portrait-condition-stamp {
  position: absolute;
  right: 10px;
  bottom: 9px;
  padding: 4px 8px 3px;
  border: 2px solid rgba(139, 58, 44, .78);
  background: rgba(19, 11, 9, .82);
  color: #e5b29a;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .085em;
  transform: rotate(-3deg);
}

.observed-condition {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid #4a342b;
  border-left: 4px solid #6d4637;
  border-radius: 9px;
  background: #16100e;
}

.observed-condition > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.observed-condition span {
  color: #948279;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.observed-condition strong {
  color: #dfb294;
  font-family: Georgia, serif;
  font-size: 15px;
  letter-spacing: .04em;
}

.observed-condition p {
  margin: 4px 0 0;
  color: #cdbeb3;
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: italic;
  line-height: 1.35;
}

.observed-condition small {
  display: block;
  margin-top: 5px;
  color: #806f64;
  font-size: 8px;
}

.observed-hurt,
.creature-portrait.observed-hurt {
  border-color: #67513a;
}

.observed-badly-hurt,
.creature-portrait.observed-badly-hurt {
  border-color: #805039;
}

.observed-failing,
.creature-portrait.observed-failing {
  border-color: #853d34;
}

.observed-broken,
.creature-portrait.observed-broken {
  border-color: #613849;
}

.observed-badly-hurt .portrait-condition-stamp,
.observed-failing .portrait-condition-stamp,
.observed-broken .portrait-condition-stamp {
  border-width: 3px;
}

.observed-failing .portrait-condition-stamp {
  color: #f0a08a;
}

.observed-broken .portrait-condition-stamp {
  color: #c89ab5;
  border-color: #775069;
}

.observed-broken img {
  filter: contrast(1.04) saturate(.72) brightness(.78);
}

@media (max-width: 380px) {
  .creature-portrait { height: 235px; }
}

.gm-damage-resolver{margin:8px 0 10px;padding:8px;border:1px solid #5b3b30;border-radius:9px;background:#1a110e}
.damage-resolver-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.damage-resolver-head span{color:#c9a589;font-size:9px;font-weight:900;letter-spacing:.055em;text-transform:uppercase}
.damage-resolver-head small{color:#9f8e83;font-size:8px;font-weight:800}
.damage-result-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.damage-result-buttons button{min-width:0;padding:6px 4px;display:grid;gap:2px;text-align:center;border-color:#664334;background:#251713}
.damage-result-buttons span{font-size:7px;font-weight:900;text-transform:uppercase}
.damage-result-buttons strong{color:#eda98c;font-size:12px}
.damage-resolver-actions{display:flex;gap:5px;margin-top:6px}
.damage-resolver-note{margin:6px 0 0!important;color:#938278!important;font-size:8px!important;line-height:1.25!important}


/* =========================================================
   v0.8.3 — PLAYER-SAFE CREATURE FLAVOUR
   ========================================================= */

.observed-condition > p:first-child:last-child {
  margin: 0;
  font-size: 11px;
  line-height: 1.42;
}

.observed-condition.observed-unhurt {
  border-left-color: #4d4036;
}

.observed-condition.observed-hurt {
  border-left-color: #67513a;
}

.observed-condition.observed-badly-hurt {
  border-left-color: #805039;
}

.observed-condition.observed-failing {
  border-left-color: #853d34;
}

.observed-condition.observed-broken {
  border-left-color: #613849;
}


/* v0.8.4 — GM damage calculators */
.gm-outgoing-damage{
  margin:8px 0 10px;
  padding:8px;
  border:1px solid #4e3a31;
  border-radius:9px;
  background:#15100e;
}
.outgoing-damage-grid{
  display:grid;
  grid-template-columns:1fr 1fr .8fr;
  gap:6px;
  align-items:end;
}
.outgoing-damage-grid label{
  display:grid;
  gap:3px;
}
.outgoing-damage-grid label span,
.outgoing-result span{
  color:#9f8e83;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.outgoing-damage-grid input{
  width:100%;
}
.outgoing-result{
  min-height:42px;
  display:grid;
  place-items:center;
  padding:4px;
  border:1px solid #684438;
  border-radius:7px;
  background:#251713;
}
.outgoing-result strong{
  color:#eda98c;
  font-size:20px;
  line-height:1;
}
@media (max-width:360px){
  .outgoing-damage-grid{grid-template-columns:1fr 1fr}
  .outgoing-result{grid-column:1/-1}
}


/* =========================================================
   v0.8.6 — LIVE PLAYER ATTACK → GLOAMLING DAMAGE
   ========================================================= */
.gm-live-player-attack{
  margin:8px 0 10px;
  padding:8px;
  border:1px solid #5f4338;
  border-left:4px solid #765247;
  border-radius:9px;
  background:#18110f;
}
.gm-live-player-attack.waiting{opacity:.72}
.live-attack-title{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}
.live-attack-title span{
  color:#a68d80;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.live-attack-title strong{
  color:#e0a086;
  font-size:10px;
  font-family:"Courier New",monospace;
}
.gm-live-player-attack p{
  margin:5px 0 0;
  color:#9e8e84;
  font-size:9px;
}
.live-attack-who{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:5px;
}
.live-attack-who strong{color:#dfc3ae;font-size:11px}
.live-attack-who span{color:#9d897e;font-size:8px}
.live-attack-details{
  display:flex;
  flex-wrap:wrap;
  gap:4px 9px;
  margin-top:5px;
  color:#a7958a;
  font-size:8px;
}
.live-attack-details b{color:#d7bca9}
.live-attack-damage{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-top:7px;
}
.live-attack-damage>div{
  padding:5px;
  text-align:center;
  border:1px solid #533a32;
  background:#211613;
}
.live-attack-damage span{
  display:block;
  color:#927e73;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
}
.live-attack-damage strong{
  color:#d6b39e;
  font-size:14px;
}
.live-attack-damage .final{
  border-color:#75463a;
}
.live-attack-damage .final strong{
  color:#ef9f7f;
  font-size:18px;
}
.live-attack-valid,
.live-attack-warning{
  margin-top:6px;
  padding:4px 5px;
  font-size:8px;
  line-height:1.3;
}
.live-attack-valid{
  border:1px solid #52684d;
  color:#9eb295;
  background:rgba(74,101,71,.12);
}
.live-attack-warning{
  border:1px solid #8d6534;
  color:#c09a61;
  background:rgba(128,88,40,.12);
}
#apply-live-player-hit{
  width:100%;
  margin-top:6px;
  font-weight:900;
}
.gm-live-player-attack.strong-success,
.gm-live-player-attack.success{border-left-color:#567450}
.gm-live-player-attack.mixed-success{border-left-color:#9a7435}
.gm-live-player-attack.failure,
.gm-live-player-attack.severe-failure{border-left-color:#8a3d33}


/* =========================================================
   v0.8.7 — GM-APPROVED PLAYER OUTCOME TEXT
   ========================================================= */
.resolved-action-panel{
  margin-top:8px;
  border-color:#6d5546;
  border-left:4px solid #8a6047;
  background:rgba(51,36,29,.68);
}
.resolved-action-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.resolved-action-heading>span{
  color:#c3a88f;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.resolved-action-panel p{
  margin:5px 0 0;
  color:#d8c8bb;
  font-family:Georgia,serif;
  font-size:11px;
  font-style:italic;
  line-height:1.45;
}


/* v0.8.8 — compact GM-only manual HP override */
.gm-hp-override{
  display:flex;
  align-items:center;
  gap:5px;
  margin:7px 0 9px;
  padding:5px 6px;
  border:1px dashed #57423a;
  border-radius:7px;
  background:#120e0c;
}
.gm-hp-override>span{
  margin-right:auto;
  color:#8f7c72;
  font-size:8px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}


/* =========================================================
   v0.9 — FOUR ACTION WORKFLOW
   ========================================================= */
.creature-target-prompt{margin:7px 0 4px;color:#a18b7e;font-size:8px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.creature-target-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.creature-target-choice{min-width:0;padding:5px 3px;display:grid;gap:2px;text-align:center}
.creature-target-choice span{font-size:7px;font-weight:900;text-transform:uppercase}
.creature-target-choice strong{font-size:14px}
.creature-target-choice.active{outline:2px solid rgba(177,111,81,.7)}
.incoming-player-total{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:5px 6px;border:1px solid #523b32;background:#211612}
.incoming-player-total span{font-size:8px;font-weight:900;text-transform:uppercase}
.incoming-player-total strong{color:#efaa8e;font-size:20px}
.creature-resolution-line{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:6px;padding:5px 6px;border:1px solid #654337;background:#251713}
.creature-resolution-line span,.creature-resolution-line em{font-size:8px;color:#ab9285;font-style:normal}
.creature-resolution-line strong{color:#e7aa8c;font-size:11px}
.player-attack-damage-editor{display:grid;grid-template-columns:1.2fr .7fr .8fr .8fr;gap:5px;margin-top:6px}
.player-attack-damage-editor label,.player-attack-damage-editor>div{display:grid;place-items:center;gap:2px;padding:5px;border:1px solid #50382f;background:#1b1210}
.player-attack-damage-editor label span,.player-attack-damage-editor>div span{font-size:7px;font-weight:900;text-transform:uppercase;color:#968176}
.player-attack-damage-editor input{width:100%;text-align:center}
.player-attack-damage-editor strong{font-size:15px;color:#d7b19d}
.player-attack-damage-editor .final strong{color:#f09e7d;font-size:19px}
#confirm-player-attack{width:100%;margin-top:6px;font-weight:900}
.creature-attack-character-panel{margin-top:10px;padding-top:8px;border-top:1px dashed #4f3931}
.creature-attack-character-panel>p{margin:4px 0 7px;color:#a18f84;font-size:8px;line-height:1.4}
.attack-character-select{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px;margin-bottom:6px}
.attack-character-select span{font-size:8px;font-weight:900;text-transform:uppercase}
.attack-character-select select{width:100%}
.creature-attack-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.creature-attack-stat-grid button{min-width:0;padding:5px 3px;display:grid;gap:2px;text-align:center}
.creature-attack-stat-grid span{font-size:7px;font-weight:900;text-transform:uppercase}
.creature-attack-stat-grid strong{font-size:13px}
.creature-attack-result{border-left:4px solid #6f4939}
.creature-attack-sent{display:grid;gap:3px;margin-top:6px;padding:6px;border:1px dashed #685045;background:#18110e}
.creature-attack-sent strong{color:#eda98c;font-size:15px}
.creature-attack-sent span{color:#a89386;font-size:8px;line-height:1.4}
@media(max-width:370px){.creature-target-grid,.creature-attack-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.player-attack-damage-editor{grid-template-columns:1fr 1fr}}


/* v0.10 — contextual attack outcome library */
.gm-narrative-preview{
  margin-top:7px;
  padding:7px 8px;
  border:1px dashed #5b4036;
  background:#19110e;
}
.narrative-preview-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.narrative-preview-heading>span{
  color:#b7a095;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.gm-narrative-preview p{
  margin:6px 0 4px;
  color:#d6c4ba;
  font-family:Georgia,serif;
  font-size:9px;
  font-style:italic;
  line-height:1.45;
}
.gm-narrative-preview small{
  display:block;
  color:#8e7a70;
  font-size:7px;
  line-height:1.35;
}


/* =========================================================
   v0.11 — CARD CLEANUP
   ========================================================= */
.creature-action-mode{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin:5px 0 9px;
}
.creature-action-mode>button{
  min-width:0;
  padding:6px 7px;
  display:grid;
  gap:2px;
  text-align:left;
}
.creature-action-mode>button.active{
  outline:2px solid rgba(180,109,78,.68);
  background:#2a1b16;
}
.creature-action-mode>button span{
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
}
.creature-action-mode>button small{
  font-size:7px;
  color:#a38b7f;
}
.compact-attack-target{
  grid-column:1/-1;
  margin:1px 0 0;
  padding:5px 6px;
  border:1px solid #4c372f;
  background:#1d1411;
}


/* =========================================================
   v0.14 — HALLOW SIGNS RITUAL AESTHETIC + S/M/L
   ========================================================= */

:root {
  font-family: Georgia, "Times New Roman", serif;
  color: #f1e5cf;
  background: #09090b;
}

html,
body,
#app {
  background:
    radial-gradient(circle at 50% 4%, rgba(126, 91, 49, .15), transparent 34%),
    linear-gradient(180deg, #151116 0%, #08080a 100%);
}

body {
  min-width: 320px;
  color: #f1e5cf;
}

/* ritual record shell */
.sheet-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: 15px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(102, 70, 36, .12) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 70%, rgba(72, 49, 29, .14) 0 12px, transparent 45px),
    linear-gradient(180deg, rgba(35, 29, 32, .98) 0%, rgba(18, 15, 18, .99) 48%, rgba(8, 8, 10, 1) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200, 164, 94, .66),
    inset 0 0 0 5px #100d10,
    inset 0 0 0 6px rgba(124, 92, 52, .50),
    inset 0 0 34px rgba(0, 0, 0, .78);
}

.sheet-shell:not(.compact-shell)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(139, 107, 63, .54);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.30),
    0 0 18px rgba(0,0,0,.25);
}

.sheet-shell:not(.compact-shell)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background:
    radial-gradient(ellipse at 18% 72%, rgba(0,0,0,.38) 0 1%, transparent 7%),
    radial-gradient(ellipse at 84% 24%, rgba(151,100,47,.18) 0 1%, transparent 9%),
    radial-gradient(circle at 76% 88%, rgba(0,0,0,.30) 0 2%, transparent 11%);
}

.launcher {
  min-height: 100vh;
  padding: 17px;
  background:
    radial-gradient(circle at 50% 8%, rgba(126,91,49,.16), transparent 38%),
    linear-gradient(180deg, #181318, #09090b);
}

.launcher h1,
.sheet-header h1,
.window-title strong {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

/* top bar */
.window-bar {
  margin: -15px -15px 13px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(200,164,94,.55);
  background:
    linear-gradient(180deg, rgba(25,20,24,.99), rgba(11,9,12,.99));
  box-shadow:
    inset 0 -1px 0 rgba(94,68,38,.72),
    0 5px 12px rgba(0,0,0,.26);
}

.window-kind {
  color: #a68248;
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .20em;
}

.window-title strong {
  color: #ead5a7;
  font-size: 14px;
  letter-spacing: .02em;
}

.window-controls {
  gap: 5px;
}

.icon-button,
button {
  border: 1px solid rgba(139,104,60,.72);
  border-radius: 5px;
  background:
    linear-gradient(180deg, #251e22, #151116);
  color: #ead8b3;
  box-shadow:
    inset 0 0 0 1px rgba(12,10,12,.72),
    0 2px 5px rgba(0,0,0,.22);
}

button:hover:not(:disabled),
.icon-button:hover:not(:disabled) {
  background:
    linear-gradient(180deg, #30262a, #1c171b);
  border-color: rgba(208,173,104,.82);
}

button.secondary {
  background: rgba(12,10,12,.48);
  border-color: rgba(124,92,52,.56);
  color: #c9b99e;
}

/* exact S/M/L control styling */
.panel-size-controls {
  display: inline-grid;
  grid-template-columns: 28px 25px 28px;
  align-items: center;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgba(139,104,60,.60);
  border-radius: 5px;
  background: #0c0a0c;
  box-shadow: inset 0 0 10px rgba(0,0,0,.72);
}

.panel-size-controls .size-button {
  min-width: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #c8a45e;
  font-size: 15px;
}

.panel-size-label {
  display: grid;
  place-items: center;
  height: 22px;
  color: #f0ddb5;
  border-left: 1px solid rgba(124,92,52,.42);
  border-right: 1px solid rgba(124,92,52,.42);
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 700;
}

/* heading */
.sheet-header {
  position: relative;
  margin: 2px 4px 13px;
  padding: 6px 5px 11px;
  align-items: flex-end;
  border-bottom: 1px solid rgba(139,107,63,.48);
}

.sheet-header::after {
  content: "◆";
  position: absolute;
  left: 50%;
  bottom: -6px;
  padding: 0 6px;
  transform: translateX(-50%);
  background: #131014;
  color: #a68248;
  font-size: 8px;
}

.eyebrow {
  color: #9e866d;
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .28em;
}

.sheet-header h1 {
  margin-top: 2px;
  color: #ead5a7;
  font-size: 29px;
  letter-spacing: .035em;
  text-shadow: 0 2px 5px #000;
}

.sheet-header p {
  color: #9f907e;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .12em;
}

.role {
  border: 1px solid rgba(200,164,94,.58);
  border-radius: 3px;
  background: #100d10;
  color: #d0ad68;
  font-family: Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .13em;
}

/* framed creature art — artwork fills the entire image window */
.creature-portrait {
  height: 278px;
  margin: 0 4px;
  overflow: hidden;
  border: 1px solid rgba(200,164,94,.68);
  border-radius: 5px;
  background: #0b0a0c;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.75),
    0 0 0 3px #100d10,
    0 0 0 4px rgba(124,92,52,.56),
    0 12px 25px rgba(0,0,0,.32);
}

.creature-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #0b0a0c;
  filter: contrast(1.04) saturate(.90);
}

.portrait-condition-stamp {
  display: none !important;
}

.portrait-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.66),
    inset 0 0 8px rgba(207,166,91,.10);
}

/* ritual panels */
.panel {
  position: relative;
  margin-top: 11px;
  padding: 11px 12px;
  border: 1px solid rgba(116,88,54,.58);
  border-radius: 6px;
  background:
    radial-gradient(circle at 92% 8%, rgba(121,83,43,.08), transparent 28%),
    linear-gradient(180deg, rgba(28,23,27,.96), rgba(14,12,15,.98));
  box-shadow:
    inset 0 0 0 1px rgba(8,8,10,.65),
    inset 0 0 16px rgba(0,0,0,.30);
}

.panel::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  height: 1px;
  pointer-events: none;
  opacity: .34;
  background: linear-gradient(90deg, transparent, #8c6b3e, transparent);
}

.public-panel,
.gm-panel,
.revealed-secret-panel {
  border-color: rgba(139,104,60,.66);
}

.section-title {
  color: #c8a45e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
}

.summary-title {
  color: #d2b276;
}

.panel p {
  color: #d2c3ae;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.48;
}

/* values and fields */
.data-list {
  border-top-color: rgba(124,92,52,.36);
}
.data-row {
  border-bottom-color: rgba(124,92,52,.32);
}
.data-row > span:first-child {
  color: #9e8c76;
}
.data-row strong {
  color: #eadcc5;
}

.stat-input,
.text-input,
textarea,
select,
input[type="number"] {
  border-color: rgba(124,92,52,.62);
  border-radius: 4px;
  background: #0b090c;
  color: #eadcc5;
  box-shadow: inset 0 0 8px rgba(0,0,0,.45);
}

.hp-pip {
  border-color: rgba(139,104,60,.62);
  background: #171317;
}
.hp-pip.filled {
  border-color: #a37a43;
  background:
    radial-gradient(circle, #a05d43 0 44%, #653129 46% 100%);
}

/* action mode resembles a paired oracle choice */
.creature-action-mode > button,
.ability-check-button,
.difficulty-cell,
.creature-target-choice {
  border-color: rgba(124,92,52,.58);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(38,31,35,.92), rgba(18,15,18,.98));
}

.creature-action-mode > button.active,
.difficulty-cell.target-active,
.creature-target-choice.active {
  outline: 1px solid #d0ad68;
  border-color: #d0ad68;
  box-shadow:
    inset 0 0 13px rgba(208,173,104,.08),
    0 0 0 2px #0c0a0c;
}

.creature-action-mode > button span,
.ability-check-button span,
.difficulty-cell span {
  color: #c9ad7d;
}

.ability-check-button strong,
.difficulty-cell strong,
.creature-target-choice strong {
  color: #f0ddb5;
  font-family: Georgia, serif;
}

.check-card {
  border-color: rgba(200,164,94,.56);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 32%, #2b2428 0%, #151217 45%, #08080a 100%);
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.58);
}

.check-card strong,
.check-card-number,
.total-box strong {
  color: #ead5a7;
}

.outcome-result,
.creature-resolution-line,
.player-attack-damage-editor > div,
.player-attack-damage-editor label,
.narrative-preview {
  border-color: rgba(124,92,52,.48);
  border-radius: 4px;
  background: rgba(13,11,14,.82);
}

/* S / M / L responsive layout */
.panel-size-small {
  padding: 10px;
}
.panel-size-small .window-bar {
  margin: -10px -10px 10px;
}
.panel-size-small .sheet-header h1 {
  font-size: 24px;
}
.panel-size-small .creature-portrait {
  height: 220px;
}
.panel-size-small .panel {
  padding: 9px;
}
.panel-size-small .data-row {
  grid-template-columns: 74px 1fr;
  gap: 7px;
  font-size: 11px;
}
.panel-size-small .ability-check-grid,
.panel-size-small .difficulty-grid,
.panel-size-small .creature-target-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.panel-size-small .player-attack-damage-editor {
  grid-template-columns: 1fr 1fr;
}
.panel-size-small .window-kind {
  display: none;
}
.panel-size-small .wide-icon {
  min-width: 62px;
  padding-left: 6px;
  padding-right: 6px;
}

.panel-size-normal .creature-portrait {
  height: 278px;
}

.panel-size-large {
  padding: 17px;
}
.panel-size-large .window-bar {
  margin: -17px -17px 14px;
}
.panel-size-large .sheet-header h1 {
  font-size: 34px;
}
.panel-size-large .creature-portrait {
  height: 360px;
}
.panel-size-large .panel {
  padding: 14px 15px;
}
.panel-size-large .panel p {
  font-size: 12px;
}
.panel-size-large .section-title {
  font-size: 11px;
}
.panel-size-large .data-row {
  grid-template-columns: 110px 1fr;
  font-size: 13px;
}
.panel-size-large .ability-check-grid,
.panel-size-large .difficulty-grid,
.panel-size-large .creature-target-grid {
  gap: 6px;
}
.panel-size-large .check-result-layout {
  gap: 12px;
}

/* collapsed record */
.compact-shell {
  height: 52px;
  min-height: 0;
  padding: 0;
  background:
    linear-gradient(180deg, #181318, #09090b);
  box-shadow:
    inset 0 0 0 1px rgba(200,164,94,.60),
    inset 0 0 0 4px #100d10;
}
.compact-shell .window-bar {
  height: 52px;
  margin: 0;
  border-bottom: 0;
}

.stay-open-note {
  color: #766852;
  font-family: Georgia, serif;
  font-size: 9px;
  font-style: italic;
}

@media (max-width: 370px) {
  .panel-size-controls {
    grid-template-columns: 26px 22px 26px;
  }
  .panel-size-controls .size-button {
    width: 26px;
  }
}


/* =========================================================
   v0.14.2 — FIXED 4:3 CREATURE ARTWORK STANDARD
   ========================================================= */

/*
  Creature artwork standard:
  1024 × 768 px (4:3 landscape)

  The portrait frame now keeps exactly the same 4:3 ratio at
  Small, Medium and Large panel sizes.
*/
.creature-portrait,
.panel-size-small .creature-portrait,
.panel-size-normal .creature-portrait,
.panel-size-large .creature-portrait {
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
}

/*
  A correctly prepared 4:3 image fills the frame without cropping
  or stretching. `cover` remains safe because image and frame ratios match.
*/
.creature-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}


/* =========================================================
   v0.14.3 — WHOLE-CREATURE REVEAL GATE
   ========================================================= */
.header-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.creature-reveal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid rgba(139,104,60,.62);
  border-radius: 4px;
  background: rgba(10,8,11,.76);
  color: #c8a45e;
  font-family: Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .07em;
  cursor: pointer;
}

.creature-reveal-toggle input {
  accent-color: #a17a45;
}

.unrevealed-creature-shell {
  min-height: 100vh;
}

.unrevealed-creature-empty {
  margin-top: 22px;
  padding: 28px 16px;
  text-align: center;
}

.unrevealed-creature-empty p,
.player-empty-state {
  color: #8f8374;
  font-style: italic;
}


/* ============================================================
   v0.15.0 — BESTIARY TOME PRESENTATION
   Presentation only: combat/reveal logic remains v0.14.3-compatible.
   ============================================================ */
:root {
  --tome-ink: #30261d;
  --tome-ink-soft: #665543;
  --tome-red: #7b342c;
  --tome-red-dark: #57241f;
  --tome-rule: #8c7557;
  --tome-paper: #d8c39b;
  --tome-paper-light: #ead9b4;
  --tome-paper-dark: #bca57d;
  --tome-gold: #8e6d3f;
}

html, body, #app { max-width: 100%; overflow-x: hidden; }
body { color: var(--tome-ink); }

.tome-shell {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 7%, rgba(100, 70, 39, .22), transparent 28%),
    radial-gradient(circle at 85% 85%, rgba(0, 0, 0, .45), transparent 44%),
    repeating-linear-gradient(96deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px),
    #1a120d;
  color: var(--tome-ink);
}

.tome-page {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(18px, 5vw, 30px) clamp(15px, 5vw, 30px) clamp(24px, 6vw, 36px);
  overflow: hidden;
  color: var(--tome-ink);
  transform-origin: 0 50%;
  backface-visibility: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(77,52,27,.10) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 32%, rgba(72,48,24,.08) 0 1px, transparent 1.6px),
    linear-gradient(90deg, rgba(89,60,32,.12), transparent 7%, transparent 92%, rgba(65,42,22,.13)),
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 10%, transparent 90%, rgba(65,42,22,.11)),
    var(--tome-paper);
  background-size: 17px 19px, 23px 29px, auto, auto, auto;
  border: 1px solid #866f51;
  box-shadow:
    inset 12px 0 22px rgba(73, 47, 24, .10),
    inset -8px 0 16px rgba(70, 43, 20, .08),
    inset 0 0 45px rgba(100, 71, 37, .12),
    0 10px 28px rgba(0,0,0,.28);
}

.tome-page::before,
.tome-page::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.tome-page::before {
  inset: 8px;
  border: 1px solid rgba(83, 57, 34, .40);
  box-shadow: inset 0 0 0 3px rgba(116, 88, 54, .08);
}

.tome-page::after {
  width: 90px;
  height: 68px;
  right: -33px;
  top: -30px;
  transform: rotate(18deg);
  background: rgba(95, 67, 39, .13);
  border: 1px solid rgba(80, 52, 27, .18);
}

.tome-page > * { position: relative; z-index: 1; min-width: 0; }

.tome-running-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  margin-bottom: 13px;
  border-bottom: 1px solid rgba(87, 60, 37, .48);
  color: #715c44;
  font-family: Georgia, serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.tome-margin-glyph {
  position: absolute;
  right: 12px;
  top: 72px;
  color: rgba(92, 49, 37, .42);
  font-family: Georgia, serif;
  font-size: 22px;
  transform: rotate(11deg);
}

.tome-entry-header { margin-bottom: 6px; align-items: flex-start; }
.tome-entry-header .eyebrow {
  color: var(--tome-red);
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: .13em;
}
.tome-entry-header h1 {
  color: #261e17;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: .015em;
  text-shadow: 0 1px rgba(255,255,255,.22);
}
.tome-entry-header p {
  color: #5d4938;
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: italic;
  letter-spacing: .035em;
  text-transform: none;
}

.tome-entry-kicker {
  margin: 6px 0 8px;
  color: #766148;
  font-family: Georgia, serif;
  font-size: 8px;
  font-style: italic;
  letter-spacing: .03em;
  text-align: center;
}

.tome-divider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  color: #775f42;
  font-family: Georgia, serif;
  font-size: 12px;
}
.tome-divider i { height: 1px; background: linear-gradient(90deg, transparent, #856c4d 12%, #856c4d 88%, transparent); }
.tome-divider-bottom { margin-top: 18px; }

.tome-page .role {
  border: 1px solid rgba(111, 58, 45, .62);
  border-radius: 2px;
  background: rgba(126, 52, 43, .08);
  color: var(--tome-red);
  font-family: Georgia, serif;
  letter-spacing: .1em;
  transform: rotate(1.5deg);
}

.tome-page .creature-reveal-toggle {
  border: 2px double rgba(120, 53, 43, .70);
  border-radius: 2px;
  background: rgba(131, 48, 39, .075);
  color: var(--tome-red-dark);
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: .06em;
  transform: rotate(-1deg);
}
.tome-page .creature-reveal-toggle input { accent-color: var(--tome-red); }

.tome-page .creature-portrait,
.tome-page .panel-size-small .creature-portrait,
.tome-page .panel-size-normal .creature-portrait,
.tome-page .panel-size-large .creature-portrait {
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 8px auto 12px;
  border: 1px solid #6f5941;
  border-radius: 0;
  background: #bba67f;
  box-shadow:
    0 0 0 5px rgba(235, 217, 177, .72),
    0 0 0 6px rgba(94, 72, 48, .58),
    5px 7px 11px rgba(59, 38, 20, .17);
  transform: rotate(-.35deg);
}

.tome-page .creature-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.58) saturate(.72) contrast(1.08) brightness(.93);
  mix-blend-mode: multiply;
}
.tome-page .portrait-vignette {
  background:
    linear-gradient(180deg, rgba(68, 46, 27, .04), rgba(66, 40, 21, .16)),
    radial-gradient(ellipse at center, transparent 55%, rgba(63, 39, 21, .24) 100%);
}

.tome-page .panel,
.tome-page details.panel {
  margin-top: 12px;
  padding: 9px 2px 11px;
  border: 0;
  border-top: 1px solid rgba(94, 72, 50, .48);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.tome-page .public-panel { border-color: rgba(94,72,50,.48); }
.tome-page .gm-panel {
  padding-left: 11px;
  border-left: 2px solid rgba(126, 52, 43, .48);
  background: rgba(128, 55, 43, .035);
}

.tome-page .section-title {
  color: #583b29;
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tome-page .section-title::first-letter { color: var(--tome-red); font-size: 1.18em; }

.tome-page .panel p,
.tome-page .weakness-rule,
.tome-page small,
.tome-page .message,
.tome-page .clue-label {
  color: #4e4033 !important;
  font-family: Georgia, serif;
}

.tome-page .data-list { border-color: rgba(92,70,47,.28); }
.tome-page .data-row { border-color: rgba(92,70,47,.28); color: var(--tome-ink); }
.tome-page .data-row > span:first-child { color: #695642; font-family: Georgia, serif; }
.tome-page .data-row strong { color: #2d251e; }

.tome-page .combat-summary span,
.tome-page .combat-summary strong,
.tome-page .known-chip,
.tome-page .disabled-chip,
.tome-page .lock-chip {
  border-radius: 2px;
  border-color: rgba(103,75,48,.50);
  background: rgba(112,78,46,.055);
  color: #5e4630;
  font-family: Georgia, serif;
}
.tome-page .combat-summary strong,
.tome-page .known-chip { border-color: rgba(119,50,42,.52); color: var(--tome-red); }

.tome-page .hp-pip { border-color: #765e43; background: rgba(83,60,37,.10); }
.tome-page .hp-pip.filled { background: #78372f; border-color: #5e2a25; }

.tome-page .weakness-card,
.tome-page .ability-card,
.tome-page .check-result,
.tome-page .incoming-attack,
.tome-page .gm-narrative-preview {
  border-radius: 1px;
  border-color: rgba(91,68,45,.48);
  background: rgba(255, 248, 226, .13);
  box-shadow: none;
}
.tome-page .active-weakness {
  border-color: rgba(121,53,44,.72);
  background: rgba(130,54,43,.055);
}
.tome-page .weakness-heading strong,
.tome-page .ability-heading strong { color: #3a2d22; font-family: Georgia, serif; }
.tome-page .active-weakness .weakness-heading strong { color: var(--tome-red); }

.tome-page button {
  border: 1px solid #796044;
  border-radius: 2px;
  background: rgba(118, 82, 47, .10);
  color: #3d2f23;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  font-family: Georgia, serif;
}
.tome-page button:hover { background: rgba(111, 72, 41, .18); }
.tome-page button.secondary { border-color: rgba(91,68,45,.52); color: #5c4938; }
.tome-page button:disabled { opacity: .42; }

.tome-page input,
.tome-page select,
.tome-page textarea,
.tome-page .stat-input,
.tome-page .text-input,
.tome-page .rule-editor,
.tome-page .clue-editor {
  max-width: 100%;
  border: 1px solid rgba(93,69,44,.55);
  border-radius: 1px;
  background: rgba(241, 224, 188, .42);
  color: #2f251d;
  font-family: Georgia, serif;
}
.tome-page textarea { resize: vertical; }
.tome-page input:focus,
.tome-page select:focus,
.tome-page textarea:focus {
  outline: 2px solid rgba(124, 55, 45, .26);
  outline-offset: 1px;
}

.tome-page .reveal-control,
.tome-page .exploit-control {
  color: #644b38;
  font-family: Georgia, serif;
}
.tome-page .reveal-control input,
.tome-page .exploit-control input { accent-color: var(--tome-red); }

.tome-page .sheet-actions {
  border-top-color: rgba(92,70,47,.42);
}
.tome-page .stay-open-note {
  color: rgba(78, 59, 42, .60);
  font-family: Georgia, serif;
  letter-spacing: .055em;
}
.tome-folio-number {
  margin-top: 8px;
  text-align: center;
  color: rgba(73,55,39,.65);
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: italic;
}

/* Future multi-creature page-turn animation. When a second creature is added,
   navigation can call animateTomePageTurn() before switching the active entry. */
@keyframes tomeTurnNext {
  0% { transform: perspective(950px) rotateY(0deg); opacity: 1; filter: brightness(1); }
  45% { transform: perspective(950px) rotateY(-76deg); opacity: .82; filter: brightness(.88); }
  55% { transform: perspective(950px) rotateY(-88deg); opacity: .18; }
  100% { transform: perspective(950px) rotateY(0deg); opacity: 1; }
}
@keyframes tomeTurnPrevious {
  0% { transform: perspective(950px) rotateY(0deg); opacity: 1; }
  45% { transform: perspective(950px) rotateY(76deg); opacity: .82; filter: brightness(.88); }
  55% { transform: perspective(950px) rotateY(88deg); opacity: .18; }
  100% { transform: perspective(950px) rotateY(0deg); opacity: 1; }
}
.tome-page.turn-page-next { animation: tomeTurnNext .39s ease-in-out both; }
.tome-page.turn-page-previous { animation: tomeTurnPrevious .39s ease-in-out both; }

.tome-empty-page {
  margin-top: 12px;
  min-height: 280px;
  display: grid;
  place-content: center;
  text-align: center;
}
.tome-empty-page .section-title { font-size: 15px; }

/* Keep Owlbear popovers scrollable vertically but never horizontally. */
.tome-shell,
.tome-page,
.tome-page .sheet-header,
.tome-page .header-actions,
.tome-page .data-row,
.tome-page .gm-stat-value,
.tome-page .weakness-heading,
.tome-page .ability-heading,
.tome-page .check-stat-editor,
.tome-page .difficulty-grid,
.tome-page .sheet-actions { min-width: 0; max-width: 100%; }
.tome-page .sheet-header,
.tome-page .header-actions,
.tome-page .weakness-heading,
.tome-page .ability-heading,
.tome-page .sheet-actions { flex-wrap: wrap; }
.tome-page .data-row { grid-template-columns: minmax(72px, 92px) minmax(0, 1fr); }
.tome-page .gm-stat-value { flex-wrap: wrap; }

@media (max-width: 370px) {
  .tome-page { padding-left: 13px; padding-right: 13px; }
  .tome-entry-header h1 { font-size: 30px; }
  .tome-running-head { font-size: 7px; letter-spacing: .11em; }
  .tome-page .data-row { grid-template-columns: 1fr; gap: 4px; }
  .tome-page .gm-stat-value { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .tome-page.turn-page-next,
  .tome-page.turn-page-previous { animation: none; }
}

/* ============================================================
   v0.16.0 — OPEN GRIMOIRE / TWO-PAGE BESTIARY
   True book presentation, left anchored. Reveal/combat logic unchanged.
   ============================================================ */
html, body, #app { width: 100%; max-width: 100%; overflow-x: hidden; }
body { min-width: 0; }

.tome-shell {
  padding: 10px 10px 18px;
  background:
    radial-gradient(ellipse at 42% 0%, rgba(110,73,36,.20), transparent 35%),
    linear-gradient(90deg, #0c0907, #17100b 58%, #0b0806);
}

.tome-book {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  perspective: 1600px;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.42));
}

.tome-page {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(18px, 3.2vw, 30px) clamp(16px, 3vw, 28px) clamp(26px, 4vw, 38px);
  overflow: hidden;
  color: var(--tome-ink);
  border: 1px solid #836a49;
  border-radius: 2px 8px 8px 2px;
  background:
    radial-gradient(circle at 14% 10%, rgba(77,52,27,.11) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 31%, rgba(72,48,24,.08) 0 1px, transparent 1.6px),
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 9%, transparent 90%, rgba(65,42,22,.12)),
    #d8c39b;
  background-size: 17px 19px, 23px 29px, auto, auto;
  box-shadow: inset 0 0 44px rgba(86,56,29,.16);
  backface-visibility: hidden;
}

.tome-page-left {
  border-radius: 8px 2px 2px 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 74%, rgba(53,31,15,.18) 96%, rgba(37,21,11,.30)),
    radial-gradient(circle at 14% 10%, rgba(77,52,27,.11) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 31%, rgba(72,48,24,.08) 0 1px, transparent 1.6px),
    #d8c39b;
  background-size: auto, 17px 19px, 23px 29px, auto;
  box-shadow: inset -18px 0 25px rgba(70,43,21,.15), inset 0 0 42px rgba(86,56,29,.13);
  transform-origin: 100% 50%;
}

.tome-page-right {
  background:
    linear-gradient(90deg, rgba(37,21,11,.30), rgba(53,31,15,.18) 4%, transparent 26%, rgba(255,255,255,.09)),
    radial-gradient(circle at 14% 10%, rgba(77,52,27,.10) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 31%, rgba(72,48,24,.08) 0 1px, transparent 1.6px),
    #d8c39b;
  background-size: auto, 17px 19px, 23px 29px, auto;
  box-shadow: inset 18px 0 25px rgba(70,43,21,.15), inset 0 0 42px rgba(86,56,29,.13);
  transform-origin: 0 50%;
}

.tome-page::before {
  inset: 10px;
  border: 1px solid rgba(83,57,34,.28);
  box-shadow: inset 0 0 0 2px rgba(116,88,54,.05);
}
.tome-page::after { display: none; }

.tome-spine {
  position: relative;
  z-index: 4;
  min-width: 18px;
  background:
    linear-gradient(90deg,
      rgba(35,19,10,.92) 0%,
      #6d4a2b 19%,
      #2e190d 43%,
      #1c1009 50%,
      #2d190e 58%,
      #714d2d 82%,
      rgba(32,18,10,.92) 100%);
  box-shadow:
    -7px 0 12px rgba(43,24,12,.30),
    7px 0 12px rgba(43,24,12,.30),
    inset 0 0 7px rgba(255,214,154,.12);
}
.tome-spine::before,
.tome-spine::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  background: rgba(197,153,91,.22);
}
.tome-spine::before { top: 14px; }
.tome-spine::after { bottom: 14px; }
.tome-spine span {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 24px, rgba(12,7,4,.30) 25px 27px);
}

.tome-right-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(87,60,37,.42);
}
.tome-right-page-heading .header-actions { max-width: 58%; }
.tome-subtitle {
  margin-top: 5px;
  color: #66513d;
  font: italic 11px/1.35 Georgia, serif;
}

.tome-margin-glyph-left { right: auto; left: 12px; top: 78px; transform: rotate(-11deg); }
.tome-margin-glyph-right { right: 12px; top: 78px; }

/* 4:3 remains the creature-art standard. Current legacy Gloamling
   state images are portrait files, so contain prevents them being cropped.
   Future 1024x768 art fills this frame exactly. */
.tome-book .creature-portrait,
.tome-book .panel-size-small .creature-portrait,
.tome-book .panel-size-normal .creature-portrait,
.tome-book .panel-size-large .creature-portrait {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 12px auto 15px;
  padding: 5px;
  border: 1px solid #6f5941;
  background:
    linear-gradient(135deg, rgba(99,73,44,.10), transparent 45%),
    #c7b287;
  box-shadow:
    0 0 0 4px rgba(236,218,177,.70),
    0 0 0 5px rgba(94,72,48,.48),
    5px 7px 10px rgba(59,38,20,.15);
  transform: rotate(-.45deg);
}
.tome-book .creature-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: rgba(94,70,43,.07);
  filter: sepia(.30) saturate(.90) contrast(1.04) brightness(.97);
  mix-blend-mode: normal;
}

.tome-book .panel,
.tome-book details.panel {
  margin-top: 11px;
  padding: 8px 2px 10px;
  border: 0;
  border-top: 1px solid rgba(94,72,50,.43);
  background: transparent;
  box-shadow: none;
}

.tome-book .section-title {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .07em;
}
.tome-book .section-title::first-letter {
  color: var(--tome-red);
  font-size: 1.34em;
  font-family: Georgia, serif;
}

.tome-book .gm-panel {
  padding-left: 10px;
  border-left: 1px solid rgba(126,52,43,.42);
  background: linear-gradient(90deg, rgba(126,52,43,.035), transparent);
}

.tome-folio-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  color: #6c563f;
  font: italic 11px Georgia, serif;
}
.tome-folio-footer .tome-next-creature {
  margin-left: auto;
  padding: 4px 7px;
  border: 0;
  background: transparent;
  color: #72543a;
  font-style: italic;
  box-shadow: none;
}
.tome-folio-footer .tome-next-creature:disabled { opacity: .38; }

.tome-closed-note {
  margin: 0;
  padding: 28px;
  border: 1px solid #755c3f;
  background: #d8c39b;
  color: var(--tome-ink);
  font-family: Georgia, serif;
}

/* Page-turn animation scaffold. When a second creature is added, the same
   animation can wrap the state change without exposing hidden records. */
.tome-book.turn-page-next .tome-page-right {
  animation: tomeTurnNext .39s ease-in-out both;
  z-index: 6;
}
.tome-book.turn-page-previous .tome-page-left {
  animation: tomeTurnPrevious .39s ease-in-out both;
  z-index: 6;
}
@keyframes tomeTurnNext {
  0% { transform: perspective(1200px) rotateY(0deg); filter: brightness(1); }
  48% { transform: perspective(1200px) rotateY(-78deg); filter: brightness(.76); }
  52% { transform: perspective(1200px) rotateY(-78deg); filter: brightness(.76); }
  100% { transform: perspective(1200px) rotateY(0deg); filter: brightness(1); }
}
@keyframes tomeTurnPrevious {
  0% { transform: perspective(1200px) rotateY(0deg); filter: brightness(1); }
  48% { transform: perspective(1200px) rotateY(78deg); filter: brightness(.76); }
  52% { transform: perspective(1200px) rotateY(78deg); filter: brightness(.76); }
  100% { transform: perspective(1200px) rotateY(0deg); filter: brightness(1); }
}

@media (max-width: 610px) {
  .tome-book { grid-template-columns: 1fr; }
  .tome-spine {
    min-height: 12px;
    min-width: 0;
    background: linear-gradient(180deg, #684527, #24140b 48%, #694629);
    box-shadow: 0 -5px 9px rgba(43,24,12,.24), 0 5px 9px rgba(43,24,12,.24);
  }
  .tome-page-left, .tome-page-right { border-radius: 6px; }
  .tome-page-left { box-shadow: inset 0 -12px 20px rgba(70,43,21,.12), inset 0 0 36px rgba(86,56,29,.11); }
  .tome-page-right { box-shadow: inset 0 12px 20px rgba(70,43,21,.12), inset 0 0 36px rgba(86,56,29,.11); }
  .tome-right-page-heading { flex-direction: column; }
  .tome-right-page-heading .header-actions { max-width: 100%; }
}

/* ============================================================
   v0.17.0 — HYBRID ILLUSTRATED TOME
   The physical book is a real raster artwork. Live HTML remains
   interactive above the two blank parchment pages.
   ============================================================ */

:root {
  --hybrid-book-left: 6.5%;
  --hybrid-book-right: 5.7%;
  --hybrid-book-top: 4.8%;
  --hybrid-book-bottom: 5.8%;
  --hybrid-book-gutter: 5.5%;
}

.tome-shell {
  padding: 8px 8px 12px;
  background:
    radial-gradient(ellipse at 36% 4%, rgba(113, 74, 38, .17), transparent 35%),
    linear-gradient(90deg, #090705 0%, #15100c 56%, #080604 100%);
}

/* The top bar stays a live control surface but uses a real leather image. */
.window-bar {
  position: relative;
  z-index: 20;
  margin: 0 4px 7px;
  min-height: 44px;
  border: 1px solid rgba(145, 104, 62, .72);
  border-radius: 8px;
  background:
    linear-gradient(rgba(12, 8, 5, .28), rgba(12, 8, 5, .62)),
    url('/ui/tome-bar.jpg') center 31% / cover no-repeat;
  box-shadow:
    0 6px 14px rgba(0,0,0,.36),
    inset 0 1px rgba(237, 202, 142, .12);
}
.window-title strong { color: #ead9b4; font-family: Georgia, "Times New Roman", serif; }
.window-kind { color: #b88d5d; }
.window-controls .icon-button,
.window-controls .wide-icon {
  border-color: rgba(157, 115, 71, .52);
  background: rgba(17, 12, 8, .68);
  color: #ead8b6;
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.window-controls .icon-button:hover,
.window-controls .wide-icon:hover { background: rgba(59, 37, 22, .82); }
.panel-size-label { color: #d8b987; }

.compact-shell {
  min-height: 52px;
  padding-bottom: 0;
  background: transparent;
}
.compact-shell .window-bar { margin-bottom: 0; }

/* The actual illustrated book shell. */
.tome-book {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hybrid-book-gutter) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  height: calc(100vh - 63px);
  min-height: 500px;
  max-height: 960px;
  margin: 0;
  padding:
    var(--hybrid-book-top)
    var(--hybrid-book-right)
    var(--hybrid-book-bottom)
    var(--hybrid-book-left);
  overflow: hidden;
  background: url('/ui/open-tome.jpg') center / 100% 100% no-repeat;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.48));
  perspective: none;
}

/* These are now transparent content layers sitting on the painted pages. */
.tome-page,
.tome-page-left,
.tome-page-right {
  position: relative;
  z-index: 2;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 4px clamp(7px, 1.35vw, 15px) 18px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
  color: #30261d;
  scrollbar-width: thin;
  scrollbar-color: rgba(98,65,37,.42) transparent;
}
.tome-page::-webkit-scrollbar { width: 7px; }
.tome-page::-webkit-scrollbar-track { background: transparent; }
.tome-page::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  background: rgba(93, 61, 35, .44);
  background-clip: padding-box;
}
.tome-page::before,
.tome-page::after { display: none !important; }

/* The painted binding is already part of open-tome.jpg. Keep only a spacer. */
.tome-spine {
  z-index: 1;
  min-width: 0;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}
.tome-spine::before,
.tome-spine::after,
.tome-spine span { display: none !important; }

.tome-running-head {
  border-bottom-color: rgba(92, 62, 37, .31);
  color: #6b533b;
  text-shadow: 0 1px rgba(255,255,255,.24);
}
.tome-entry-header h1,
.tome-right-page-heading,
.tome-page .section-title,
.tome-page .data-row,
.tome-page p,
.tome-page textarea,
.tome-page input,
.tome-page select,
.tome-page button { position: relative; z-index: 3; }

/* Make the creature picture look pasted/painted into the real page. */
.tome-book .creature-portrait,
.tome-book .panel-size-small .creature-portrait,
.tome-book .panel-size-normal .creature-portrait,
.tome-book .panel-size-large .creature-portrait {
  width: min(100%, 520px);
  aspect-ratio: 4 / 3;
  margin: 10px auto 13px;
  padding: 7px;
  border: 1px solid rgba(82, 56, 34, .72);
  border-radius: 1px;
  background:
    linear-gradient(135deg, rgba(248,232,193,.58), rgba(181,151,105,.28)),
    #c8b184;
  box-shadow:
    0 0 0 3px rgba(231, 211, 168, .56),
    0 0 0 4px rgba(91, 65, 41, .42),
    4px 6px 10px rgba(58, 37, 20, .18);
  transform: rotate(-.35deg);
}
.tome-book .creature-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: rgba(70, 49, 31, .08);
  filter: sepia(.20) saturate(.94) contrast(1.04) brightness(.98);
}

/* Keep live UI readable without turning the tome back into a modern card UI. */
.tome-book .panel,
.tome-book details.panel {
  margin-top: 10px;
  padding: 7px 2px 9px;
  border: 0;
  border-top: 1px solid rgba(95, 67, 42, .36);
  background: transparent;
  box-shadow: none;
}
.tome-book .gm-panel {
  padding-left: 8px;
  border-left: 1px solid rgba(112, 49, 40, .35);
  background: linear-gradient(90deg, rgba(112,49,40,.025), transparent);
}
.tome-page input,
.tome-page select,
.tome-page textarea,
.tome-page .stat-input,
.tome-page .text-input,
.tome-page .rule-editor,
.tome-page .clue-editor {
  border-color: rgba(90,63,39,.46);
  background: rgba(238, 220, 181, .36);
  color: #30251c;
  box-shadow: inset 0 1px 3px rgba(66,41,22,.08);
}
.tome-page button {
  border-color: rgba(92,62,38,.48);
  background: rgba(227,205,163,.38);
  color: #4d3928;
  box-shadow: 0 1px 2px rgba(54,34,19,.10);
}
.tome-page button:hover { background: rgba(198,166,115,.36); }
.tome-page .creature-reveal-toggle {
  background: rgba(224, 204, 165, .34);
  backdrop-filter: blur(1px);
}

/* Player view uses the same book art, but GM-only controls never render. */
.tome-shell.player-preview .tome-page-right,
.tome-shell.player-view .tome-page-right { background: transparent !important; }

/* Hidden-from-players screen contains no creature data and uses a closed-book feel. */
.unrevealed-creature-shell {
  background:
    radial-gradient(circle at 20% 20%, rgba(103,67,35,.18), transparent 34%),
    #0c0907;
}
.unrevealed-creature-empty {
  margin: 22px 14px;
  padding: 34px 30px;
  border: 1px solid #795634;
  border-radius: 8px;
  background:
    linear-gradient(rgba(26,17,10,.58), rgba(15,10,7,.82)),
    url('/ui/tome-bar.jpg') center / cover no-repeat;
  color: #e7d3af;
  box-shadow: 0 12px 28px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05);
}
.unrevealed-creature-empty .section-title { color: #c99c68; }
.unrevealed-creature-empty p { color: #d4c0a2; }

/* S / M / L alter density while preserving the same illustrated shell. */
.panel-size-small .tome-book { min-height: 500px; }
.panel-size-small .tome-page { padding-left: 6px; padding-right: 6px; font-size: .92em; }
.panel-size-small .tome-entry-header h1 { font-size: 25px; }
.panel-size-small .tome-running-head { font-size: 6.5px; }
.panel-size-small .tome-book .creature-portrait { margin-top: 7px; }

.panel-size-normal .tome-book { min-height: 600px; }
.panel-size-large .tome-book { min-height: 680px; }
.panel-size-large .tome-page { padding-left: 13px; padding-right: 13px; }

/* Never collapse to a single vertical page: this extension is deliberately
   an open two-page tome at all three requested panel sizes. */
@media (max-width: 610px) {
  .tome-book {
    grid-template-columns: minmax(0, 1fr) var(--hybrid-book-gutter) minmax(0, 1fr) !important;
    height: calc(100vh - 63px);
    min-height: 480px;
  }
  .tome-spine { min-height: 0; }
  .tome-page-left,
  .tome-page-right { border-radius: 0; }
  .tome-right-page-heading { flex-direction: column; }
  .tome-right-page-heading .header-actions { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tome-book.turn-page-next .tome-page-right,
  .tome-book.turn-page-previous .tome-page-left { animation: none !important; }
}


/* ============================================================
   v0.17.1 — WIDER TOME / GUTTER SAFETY / GRIMOIRE TYPOGRAPHY
   ============================================================ */
:root {
  --grimoire-display: "Old English Text MT", "Engravers Old English", "Copperplate Gothic Light", Copperplate, "Palatino Linotype", fantasy;
  --grimoire-label: Copperplate, "Copperplate Gothic Light", "Palatino Linotype", Georgia, serif;
  --grimoire-body: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --hybrid-book-left: 5.9%;
  --hybrid-book-right: 5.9%;
  --hybrid-book-top: 4.6%;
  --hybrid-book-bottom: 5.5%;
  --hybrid-book-gutter: 6.9%;
}

/* The raster is now 1840x1200 and the popover height is derived from the
   width in JS, so the physical book reads as a broad open volume rather
   than two tall narrow pages. */
.tome-book {
  min-height: 0;
  max-height: none;
}
.panel-size-small .tome-book,
.panel-size-normal .tome-book,
.panel-size-large .tome-book { min-height: 0; }

/* Keep live content comfortably away from the painted centre binding. */
.tome-page {
  padding-top: 4px;
  padding-bottom: 17px;
}
.tome-page-left {
  padding-left: clamp(8px, 1.2vw, 15px);
  padding-right: clamp(17px, 2.2vw, 28px);
}
.tome-page-right {
  padding-left: clamp(19px, 2.45vw, 31px);
  padding-right: clamp(9px, 1.35vw, 17px);
}
.tome-right-page-heading {
  padding-left: 2px;
  padding-right: 2px;
}
.tome-right-page-heading .header-actions {
  min-width: 0;
  max-width: 54%;
}
.tome-page-right .data-list,
.tome-page-right .weakness-list,
.tome-page-right .ability-list,
.tome-page-right .sheet-actions,
.tome-page-right details.panel {
  min-width: 0;
  max-width: 100%;
}

/* Fantasy display face for the book identity, with a calmer old-book face
   for dense controls so the GM sheet remains practical to read. */
.tome-entry-header h1,
.window-title strong {
  font-family: var(--grimoire-display);
  letter-spacing: .025em;
}
.tome-entry-header h1 {
  font-size: clamp(31px, 5.6vw, 48px);
  font-weight: 600;
}
.tome-running-head,
.tome-entry-header .eyebrow,
.tome-page .section-title,
.tome-page .role,
.tome-page .creature-reveal-toggle,
.tome-page button,
.window-kind,
.panel-size-label {
  font-family: var(--grimoire-label);
}
.tome-entry-header p,
.tome-entry-kicker,
.tome-subtitle,
.tome-page p,
.tome-page small,
.tome-page .data-row,
.tome-page input,
.tome-page select,
.tome-page textarea,
.tome-page .weakness-rule,
.tome-page .message,
.tome-page .clue-label {
  font-family: var(--grimoire-body);
}

/* At the narrowest Owlbear viewport the centre clearance is more important
   than decorative margin. */
@media (max-width: 760px) {
  .tome-page-left { padding-right: 16px; }
  .tome-page-right { padding-left: 18px; }
  .tome-right-page-heading .header-actions { max-width: 100%; }
}


/* ============================================================
   v0.17.2 — SCROLL-SAFE / SIZE-SPECIFIC PAGE SAFE ZONES / IM FELL
   ============================================================ */
:root {
  --grimoire-body: "IM FELL English", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --grimoire-label: "IM FELL English SC", "IM FELL English", Copperplate, "Palatino Linotype", Georgia, serif;
}

/* Main reading copy uses IM FELL English. Decorative title lettering remains
   separate so the dense GM controls stay legible. */
.tome-entry-header p,
.tome-entry-kicker,
.tome-subtitle,
.tome-page p,
.tome-page small,
.tome-page .data-row,
.tome-page input,
.tome-page select,
.tome-page textarea,
.tome-page .weakness-rule,
.tome-page .message,
.tome-page .clue-label,
.tome-page .stay-open-note,
.tome-page .check-against,
.tome-page .creature-target-prompt,
.tome-page .creature-resolution-line,
.tome-page .gm-narrative-preview {
  font-family: var(--grimoire-body);
}

/* Every live element must remain inside the painted parchment safe area. */
.tome-page {
  scrollbar-gutter: stable;
}
.tome-page-right *,
.tome-page-left * {
  min-width: 0;
}
.tome-page-right p,
.tome-page-right small,
.tome-page-right span,
.tome-page-right strong,
.tome-page-right label,
.tome-page-right button {
  overflow-wrap: anywhere;
}
.tome-page-right .data-row,
.tome-page-right .gm-stat-value,
.tome-page-right .header-actions,
.tome-page-right .weakness-heading,
.tome-page-right .ability-heading,
.tome-page-right .sheet-actions,
.tome-page-right .check-stat-editor,
.tome-page-right .creature-action-mode,
.tome-page-right .player-attack-damage-editor,
.tome-page-right .creature-target-grid,
.tome-page-right .creature-attack-stat-grid,
.tome-page-right .difficulty-grid {
  width: 100%;
  max-width: 100%;
}

/* Small needs proportionally more gutter protection because the same painted
   binding consumes more of the usable page at this scale. */
.panel-size-small .tome-book {
  --hybrid-book-left: 5.7%;
  --hybrid-book-right: 5.7%;
  --hybrid-book-gutter: 8.1%;
}
.panel-size-small .tome-page-left {
  padding-left: 6px;
  padding-right: 19px;
}
.panel-size-small .tome-page-right {
  padding-left: 26px;
  padding-right: 7px;
}
.panel-size-small .tome-page-right .data-row {
  grid-template-columns: 1fr;
  gap: 4px;
}
.panel-size-small .tome-page-right .gm-stat-value {
  justify-content: flex-start;
}
.panel-size-small .tome-page-right .check-stat-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.panel-size-small .tome-page-right .creature-action-mode {
  grid-template-columns: 1fr;
}
.panel-size-small .tome-page-right .header-actions {
  max-width: 100%;
  justify-content: flex-start;
}

/* Medium was already visually aligned in v0.17.1; leave its safe zone alone. */

/* Large exposes more of the raster spine, so give its right page a larger
   inner margin instead of merely scaling the medium values. */
.panel-size-large .tome-book {
  --hybrid-book-left: 6.0%;
  --hybrid-book-right: 6.0%;
  --hybrid-book-gutter: 7.7%;
}
.panel-size-large .tome-page-left {
  padding-left: 14px;
  padding-right: 36px;
}
.panel-size-large .tome-page-right {
  padding-left: 42px;
  padding-right: 16px;
}
.panel-size-large .tome-right-page-heading .header-actions {
  max-width: 50%;
}

/* ============================================================
   v0.17.3 — LEFT PAGE SAFE ZONE / CLEAN RIGHT BOOK EDGE
   ============================================================ */
/* Move only the left parchment content further inside the painted page.
   The v0.17.2 right-page gutter and control geometry are intentionally kept. */
.tome-page-left {
  padding-left: clamp(14px, 1.7vw, 21px);
}

.panel-size-small .tome-book {
  --hybrid-book-left: 6.8%;
}
.panel-size-small .tome-page-left {
  padding-left: 13px;
  padding-right: 19px;
}

.panel-size-normal .tome-book {
  --hybrid-book-left: 6.55%;
}
.panel-size-normal .tome-page-left {
  padding-left: 16px;
}

.panel-size-large .tome-book {
  --hybrid-book-left: 6.7%;
}
.panel-size-large .tome-page-left {
  padding-left: 20px;
  padding-right: 36px;
}

/* ============================================================
   v0.17.4 — RIGHT PAGE OUTER SAFE ZONE
   ============================================================ */
/* The v0.17.3 left-page correction increased the visual book inset. Keep the
   right parchment comfortably inside the Owlbear popover as well, including
   its scrollbar and wide GM controls. */
.tome-page-right {
  padding-right: clamp(24px, 2.6vw, 34px);
}

.panel-size-small .tome-book {
  --hybrid-book-right: 7.6%;
}
.panel-size-small .tome-page-right {
  padding-right: 22px;
}

.panel-size-normal .tome-book {
  --hybrid-book-right: 7.3%;
}
.panel-size-normal .tome-page-right {
  padding-right: 28px;
}

.panel-size-large .tome-book {
  --hybrid-book-right: 7.4%;
}
.panel-size-large .tome-page-right {
  padding-right: 34px;
}


/* ============================================================
   v0.17.5 — BATTLE OUTCOME + RIGHT INNER SAFE ZONE
   ============================================================ */
.tome-book .battle-outcome-panel {
  margin-top: 8px;
  margin-bottom: 10px;
  padding: 8px 9px 9px;
  border: 1px solid rgba(101, 72, 50, .44);
  border-left: 4px solid rgba(107, 65, 43, .78);
  background: rgba(237, 219, 181, .30);
}
.tome-book .battle-outcome-panel.empty-outcome {
  border-left-color: rgba(101, 85, 68, .45);
  background: rgba(237, 219, 181, .18);
}
.tome-book .battle-outcome-heading > span {
  color: #604a37;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tome-book .battle-outcome-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3px 9px;
  margin-top: 5px;
}
.tome-book .battle-outcome-summary strong {
  color: #3e2e21;
  font-size: 10px;
}
.tome-book .battle-outcome-summary small {
  color: #755b44;
  font-size: 8px;
  font-weight: 700;
}
.tome-book .battle-outcome-panel p {
  min-height: 2.9em;
  margin: 5px 0 0;
  color: #433326;
  font-family: var(--grimoire-body);
  font-size: 10px;
  font-style: italic;
  line-height: 1.4;
}
.tome-book .battle-outcome-panel.empty-outcome p { color: #7a6959; }

/* Move the complete right-page live layer away from the painted centre
   binding while keeping the outer edge exactly where v0.17.4 placed it. */
.tome-page-right {
  justify-self: end;
  width: calc(100% - 14px);
}
.panel-size-small .tome-page-right {
  width: calc(100% - 10px);
  padding-left: 28px;
}
.panel-size-normal .tome-page-right {
  width: calc(100% - 14px);
  padding-left: 34px;
}
.panel-size-large .tome-page-right {
  width: calc(100% - 18px);
  padding-left: 46px;
}

/* ============================================================
   v0.17.6 — HARD RIGHT-PAGE SPINE BOUNDARY
   The illustrated binding is wider than the old logical grid spacer.
   Put the *page element itself* wholly on the parchment side of the
   binding, rather than trying to compensate with inner padding alone.
   ============================================================ */
.tome-page-right {
  justify-self: end;
  overflow-x: hidden;
  contain: paint;
  clip-path: inset(0);
}

/* Small: at 740px the painted spine occupies proportionally more screen
   space, so the whole right live layer starts further to the right. */
.panel-size-small .tome-page-right {
  width: calc(100% - 46px);
  padding-left: 10px;
  padding-right: 22px;
}

/* Medium: move the page boundary itself beyond the leather binding.
   This is intentionally much larger than the old 14px reduction. */
.panel-size-normal .tome-page-right {
  width: calc(100% - 56px);
  padding-left: 12px;
  padding-right: 28px;
}

/* Large: the background raster exposes the widest physical spine in CSS
   pixels, so use the largest hard inset while preserving the outer edge. */
.panel-size-large .tome-page-right {
  width: calc(100% - 66px);
  padding-left: 14px;
  padding-right: 34px;
}

/* v0.19.0 — The Echo Friend / multi-creature bestiary */
.identity-mechanic-panel {
  border-left-color: rgba(91, 48, 42, .55) !important;
}
.identity-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 6px;
}
.identity-control-grid label {
  display: grid;
  gap: 4px;
  color: #5b4735;
  font: 10px Georgia, "Times New Roman", serif;
}
.identity-control-grid select {
  min-height: 31px;
  border: 1px solid rgba(91, 68, 48, .48);
  border-radius: 4px;
  background: rgba(238, 221, 185, .58);
  color: #33271e;
  padding: 4px 7px;
  font: 11px Georgia, "Times New Roman", serif;
}
.identity-copy-toggle {
  display: flex !important;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px !important;
  min-height: 31px;
  padding: 5px 8px;
  border: 1px solid rgba(126, 52, 43, .42);
  border-radius: 4px;
  background: rgba(126, 52, 43, .055);
  font-weight: 700 !important;
  letter-spacing: .05em;
}
.identity-copy-toggle input { accent-color: #7e342b; }
.identity-rule-summary {
  margin-top: 9px;
  padding: 8px 10px;
  border-left: 2px solid rgba(126, 52, 43, .58);
  background: rgba(126, 52, 43, .045);
  color: #463626;
  font: 10.5px/1.45 Georgia, "Times New Roman", serif;
}
.identity-rule-summary strong { color: #6f2f2a; }
.identity-rule-summary p { margin: 4px 0 0; color: inherit; }
.identity-attack-gate {
  margin: 9px 0;
  padding: 9px;
  border: 1px solid rgba(91, 68, 48, .48);
  border-radius: 5px;
  background: rgba(238, 221, 185, .42);
  color: #3b2d22;
}
.identity-attack-gate.success { border-color: rgba(62, 95, 59, .7); }
.identity-attack-gate.failure { border-color: rgba(126, 52, 43, .72); background: rgba(126, 52, 43, .065); }
.identity-attack-gate p { margin: 6px 0; color: inherit; font-size: 10.5px; }
.identity-attack-gate small { display: block; margin-top: 5px; color: #725e49; font-size: 9px; }
.identity-manual-buttons { display: flex; gap: 7px; margin-top: 7px; }
.identity-attack-gate button { min-height: 30px; }

.tome-folio-footer [data-creature-page="previous"] {
  margin-left: 0;
  margin-right: auto;
}
.tome-folio-footer [data-creature-page="next"] {
  margin-left: auto;
}
.unrevealed-page-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }


/* v0.19.1 — top-bar creature selector */
.top-creature-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(157, 115, 71, .52);
  border-radius: 5px;
  background: rgba(17, 12, 8, .68);
  color: #d8b987;
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.top-creature-selector select {
  min-width: 118px;
  max-width: 150px;
  height: 24px;
  padding: 2px 22px 2px 7px;
  border: 1px solid rgba(139,104,60,.60);
  border-radius: 4px;
  background: #0c0a0c;
  color: #ead8b6;
  font: 600 10px Georgia, "Times New Roman", serif;
}
.top-creature-selector select:focus {
  outline: 1px solid rgba(208,173,104,.82);
  outline-offset: 1px;
}
.panel-size-small .top-creature-selector span { display: none; }
.panel-size-small .top-creature-selector select { min-width: 96px; max-width: 112px; }

/* v0.19.3 The Echo Friend actionable abilities */
.ability-heading-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ability-action-button{font-size:8px;padding:4px 7px}
.borrowed-command-panel .command-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.borrowed-command-panel label{display:grid;gap:4px}
.borrowed-command-panel label>span{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.borrowed-command-panel select,.borrowed-command-panel input{width:100%;box-sizing:border-box}
.command-text-label{margin:7px 0}
.command-result{margin-top:8px;padding:8px;border:1px solid rgba(80,58,43,.35);background:rgba(255,255,255,.22);display:grid;gap:4px}
.command-result strong{font-size:12px;text-transform:uppercase}
.command-result span{font-size:8px;font-weight:800}
.command-result p{margin:0;font-size:9px}
@media(max-width:700px){.borrowed-command-panel .command-grid{grid-template-columns:1fr}}


/* v0.20.0 — guided opposed combat */
.opposed-combat-panel { border:2px solid rgba(94,62,39,.34); background:rgba(255,248,224,.56); padding:10px; }
.combat-progress { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin:8px 0 12px; }
.combat-progress span { padding:5px 2px; text-align:center; font-size:9px; letter-spacing:.04em; border:1px solid rgba(70,50,35,.22); opacity:.45; }
.combat-progress span.done { opacity:.7; text-decoration:line-through; }
.combat-progress span.active { opacity:1; font-weight:800; background:rgba(95,28,24,.13); border-color:rgba(95,28,24,.5); }
.combat-callout { padding:9px 11px; margin:8px 0; border-left:4px solid rgba(70,50,35,.4); background:rgba(255,255,255,.25); }
.combat-callout strong { display:block; font-size:12px; letter-spacing:.05em; }
.combat-callout p { margin:5px 0 0; }
.combat-callout.your-turn { border-left-color:#701e19; background:rgba(112,30,25,.08); }
.combat-callout.danger { border-left-color:#8a1111; background:rgba(138,17,17,.09); }
.combat-primary { width:100%; min-height:38px; font-weight:800; }
.combat-difficulty { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; margin:8px 0; padding:8px 10px; border:1px solid rgba(60,45,30,.25); }
.combat-difficulty span { font-size:9px; letter-spacing:.08em; }
.combat-difficulty strong { font-size:17px; }
.combat-difficulty small { grid-column:1/-1; opacity:.72; }
.combat-difficulty.favourable,.combat-difficulty.advantage{background:rgba(48,105,58,.08)}
.combat-difficulty.risky,.combat-difficulty.hard,.combat-difficulty.desperate{background:rgba(139,44,32,.08)}
.combat-defence-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.combat-defence-grid button { min-width:0; padding:6px 3px; display:flex; flex-direction:column; gap:2px; align-items:center; }
.combat-defence-grid button span{font-size:9px}.combat-defence-grid button strong{font-size:14px}.combat-defence-grid button small{font-size:8px;opacity:.72}
.command-outcome-override { display:flex; gap:10px; align-items:center; margin:8px 0; }
.combat-ui-message { font-weight:700; color:#7d1713; }

/* v0.20.1 — battle outcome stays beside combat + masked copy status */
.opposed-combat-panel + .battle-outcome-panel{margin-top:10px}
.identity-rule-summary.disabled-ability{border-color:rgba(120,26,26,.55);background:rgba(120,26,26,.06)}

.player-creature-lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.player-creature-lock strong {
  font-weight: 700;
}


/* =========================================================
   Visual-only Battle Outcome damage meter
   ========================================================= */

.battle-damage-meter {
  position: relative;
  margin: 7px 0 6px;
  padding: 5px 7px 7px;
  overflow: hidden;
  border: 1px solid rgba(70, 48, 32, .46);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(57, 42, 28, .10), rgba(245, 229, 192, .24)),
    repeating-linear-gradient(90deg, rgba(58, 41, 28, .035) 0 1px, transparent 1px 7px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(53,37,25,.10);
}

.battle-damage-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-family: "Courier New", Courier, monospace;
}

.battle-damage-meter-head span {
  color: #66503d;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

.battle-damage-readout {
  min-width: 28px;
  color: #4b241f;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}

.battle-damage-track {
  position: relative;
  height: 19px;
  margin: 0 8px 0 5px;
  overflow: visible;
  border-top: 1px solid rgba(53, 39, 28, .62);
  border-bottom: 1px solid rgba(53, 39, 28, .38);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(59, 43, 30, .38) 0 1px,
      transparent 1px 9.5%
    ),
    linear-gradient(90deg, rgba(98, 84, 62, .10), rgba(111, 38, 31, .15));
}

.battle-damage-track-fill {
  position: absolute;
  inset: 2px auto 2px 0;
  width: 0;
  background:
    linear-gradient(90deg, rgba(95, 70, 48, .16), rgba(119, 42, 34, .46));
  transition: opacity 160ms ease;
  pointer-events: none;
}

.battle-damage-needle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: #7b2923;
  box-shadow:
    0 0 0 1px rgba(56, 24, 20, .20),
    0 0 7px rgba(116, 40, 34, .42);
  transform: skewX(-5deg);
  pointer-events: none;
}

.battle-damage-needle::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6f2822;
}

.battle-damage-scale-min,
.battle-damage-scale-max {
  position: absolute;
  top: 20px;
  color: rgba(67, 50, 36, .72);
  font-family: "Courier New", Courier, monospace;
  font-size: 6px;
  font-weight: 900;
}

.battle-damage-scale-min { left: -4px; }
.battle-damage-scale-max { right: -7px; }

.battle-damage-meter.damage-meter-moving .battle-damage-readout {
  opacity: .72;
  transform: translateY(1px);
}

.battle-damage-meter.damage-meter-settled .battle-damage-readout {
  animation: battle-damage-number-settle 420ms ease-out;
}

.battle-damage-meter.damage-meter-settled .battle-damage-needle {
  box-shadow:
    0 0 0 1px rgba(56, 24, 20, .20),
    0 0 10px rgba(116, 40, 34, .56);
}

@keyframes battle-damage-number-settle {
  0% { transform: scale(1.28); opacity: .58; }
  55% { transform: scale(.94); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .battle-damage-meter.damage-meter-settled .battle-damage-readout {
    animation: none;
  }
}


/* =========================================================
   v0.20.26 — BESTIARY TOME FLAVOUR / READABILITY PASS
   PRESENTATION ONLY. Mechanics and shared state untouched.
   ========================================================= */

.tome-shell {
  --tome-ink: #2b2117;
  --tome-faded-ink: #685740;
  --tome-red-ink: #7b342c;
  --tome-green-ink: #44543a;
  --tome-rule: rgba(72, 53, 33, .34);
  --tome-paper-wash: rgba(246, 229, 190, .26);
}

/* Readable prose remains bookish rather than UI-like. */
.tome-shell .panel p,
.tome-shell .weakness-card p,
.tome-shell .ability-card p,
.tome-shell .observed-condition p,
.tome-shell .tome-condition-marginalia p,
.tome-shell .specimen-caption em,
.tome-shell .tome-encounter-narrative p {
  color: var(--tome-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12.5px;
  line-height: 1.5;
}

.panel-size-large .panel p,
.panel-size-large .weakness-card p,
.panel-size-large .ability-card p,
.panel-size-large .tome-condition-marginalia p,
.panel-size-large .tome-encounter-narrative p {
  font-size: 13.5px;
}

/* Page hierarchy: less boxy, more like entries ruled into old paper. */
.tome-shell .panel {
  border-radius: 0;
  border: 0;
  border-top: 1px solid rgba(74,54,34,.40);
  border-bottom: 1px solid rgba(74,54,34,.17);
  background:
    linear-gradient(180deg, rgba(248,232,194,.16), rgba(214,188,142,.055));
  box-shadow: none;
}

.tome-shell .section-title,
.tome-shell .summary-title {
  color: #58372b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-variant: small-caps;
  font-weight: 700;
  letter-spacing: .065em;
}

.tome-shell .summary-title::before {
  content: "☙ ";
  color: rgba(111,66,49,.68);
}

.tome-shell .eyebrow {
  color: #6f3d32;
  font-size: 9px;
  letter-spacing: .14em;
}

.tome-shell .tome-subtitle {
  color: #64543e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  line-height: 1.3;
}

/* ---------- Specimen plate ---------- */

.tome-shell .tome-entry-kicker {
  margin-bottom: 6px;
  color: #654637;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.tome-shell .creature-portrait.specimen-plate {
  position: relative;
  padding: 5px;
  border: 1px solid rgba(60,45,29,.54);
  outline: 1px solid rgba(60,45,29,.16);
  outline-offset: 3px;
  background: rgba(226,206,166,.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,245,215,.20),
    2px 3px 0 rgba(66,47,29,.08);
}

.tome-shell .creature-portrait.specimen-plate::after {
  content: "PLATE";
  position: absolute;
  right: 7px;
  bottom: 6px;
  padding: 2px 4px;
  border: 1px solid rgba(48,36,25,.44);
  background: rgba(237,220,181,.70);
  color: rgba(54,40,27,.74);
  font-family: "Courier New", Courier, monospace;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .13em;
}

.tome-shell .specimen-caption {
  display: grid;
  gap: 3px;
  margin: 8px 9px 13px;
  padding-left: 9px;
  border-left: 2px solid rgba(103,65,48,.38);
}

.tome-shell .specimen-caption strong {
  color: #5d352c;
  font-family: "Courier New", Courier, monospace;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.tome-shell .specimen-caption em {
  color: #4d4030;
  font-size: 11px;
  line-height: 1.35;
}

/* ---------- Current visible condition as margin observation ---------- */

.tome-shell .tome-condition-marginalia {
  position: relative;
  margin: 8px 4px 15px 13px;
  padding: 8px 10px 8px 12px;
  border-left: 2px solid rgba(116,53,45,.57);
  background: rgba(246,226,189,.13);
  transform: rotate(-.18deg);
}

.tome-shell .tome-condition-marginalia > span {
  display: block;
  margin-bottom: 4px;
  color: #76362e;
  font-family: "Courier New", Courier, monospace;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}

.tome-shell .tome-condition-marginalia p {
  margin: 0;
  color: #3d3022;
  font-style: italic;
}

.tome-shell .tome-condition-marginalia small {
  display: block;
  margin-top: 5px;
  color: #755b44;
  font-family: "Courier New", Courier, monospace;
  font-size: 7px;
}

/* ---------- Field observations ---------- */

.tome-shell .tome-observation-panel {
  padding-top: 10px;
}

.tome-shell .tome-observation-preface {
  margin: -3px 0 9px;
  color: #745f45;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-style: italic;
  line-height: 1.35;
}

.tome-shell .tome-observation-panel > p {
  position: relative;
  margin-left: 9px;
  padding-left: 10px;
  border-left: 1px solid rgba(82,59,36,.20);
}

.tome-shell .tome-observation-panel > p::before {
  content: "“";
  position: absolute;
  left: -6px;
  top: -8px;
  color: rgba(109,61,46,.34);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1;
}

/* ---------- Vulnerabilities / phenomena as annotations ---------- */

.tome-shell .weakness-card,
.tome-shell .ability-card {
  position: relative;
  margin: 9px 0 12px 5px;
  padding: 10px 11px 11px 13px;
  border: 0;
  border-left: 2px solid rgba(103,61,45,.42);
  border-bottom: 1px dotted rgba(80,57,35,.29);
  border-radius: 0;
  background: rgba(247,229,188,.10);
  box-shadow: none;
}

.tome-shell .weakness-card:nth-child(even),
.tome-shell .ability-card:nth-child(even) {
  transform: rotate(.10deg);
}

.tome-shell .weakness-heading > strong,
.tome-shell .ability-heading > strong {
  color: #4c2f27;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.tome-shell .tome-marginal-flavour {
  margin: 6px 2px 7px 7px !important;
  padding-left: 9px;
  border-left: 2px solid rgba(119,55,45,.38);
  color: #623d32 !important;
  font-size: 11.5px !important;
  font-style: italic;
  line-height: 1.4 !important;
}

.tome-shell .weakness-rule {
  margin-top: 8px;
  padding: 7px 8px;
  border-top: 1px solid rgba(77,56,35,.20);
  background: rgba(221,199,155,.14);
  color: #392b1f !important;
}

.tome-shell .weakness-rule::before {
  content: "KEEPER'S NOTE  ";
  color: #73392f;
  font-family: "Courier New", Courier, monospace;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .10em;
}

.tome-shell .clue-label {
  color: #69543d;
  font-size: 8px;
  letter-spacing: .06em;
}

.tome-shell .clue-editor,
.tome-shell .rule-editor,
.tome-shell #notes {
  color: #2e241a;
  background: rgba(251,237,203,.42);
  border-color: rgba(74,53,33,.30);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.42;
}

/* Known/active chips read like small ink annotations rather than UI badges. */
.tome-shell .known-chip,
.tome-shell .disabled-chip,
.tome-shell .lock-chip {
  border-radius: 0;
  background: rgba(242,225,186,.74);
  font-family: "Courier New", Courier, monospace;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .06em;
}

.tome-shell .known-chip {
  color: #4f5e3b;
  border-color: rgba(68,84,56,.57);
}

.tome-shell .active-weakness {
  border-left: 4px solid rgba(112,48,41,.70);
  background: linear-gradient(90deg, rgba(151,69,56,.08), rgba(245,227,187,.08));
}

/* =========================================================
   LATEST ENCOUNTER — margin annotation on the right page
   ========================================================= */

.tome-shell .tome-encounter-note {
  position: relative;
  margin: 13px 3px 16px 12px;
  padding: 10px 11px 11px 14px;
  border: 0;
  border-top: 1px solid rgba(97,58,43,.38);
  border-bottom: 1px solid rgba(97,58,43,.22);
  border-left: 3px solid rgba(121,52,44,.62);
  background:
    linear-gradient(90deg, rgba(146,67,55,.055), rgba(244,226,185,.15));
  box-shadow: none;
  transform: rotate(-.10deg);
}

.tome-shell .tome-encounter-note::after {
  content: "✎";
  position: absolute;
  right: 7px;
  top: 7px;
  color: rgba(111,54,44,.24);
  font-family: Georgia, serif;
  font-size: 24px;
  pointer-events: none;
}

.tome-shell .tome-encounter-heading {
  display: grid;
  gap: 1px;
}

.tome-shell .tome-encounter-heading > span {
  color: #78342d;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
}

.tome-shell .tome-encounter-heading > small {
  color: #705c43;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 8px;
  font-style: italic;
}

.tome-shell .battle-outcome-summary {
  display: grid;
  gap: 3px;
  margin: 8px 0 4px;
}

.tome-shell .battle-outcome-summary strong {
  color: #2d2117;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
}

.tome-shell .battle-outcome-summary small {
  color: #705a40;
  font-family: "Courier New", Courier, monospace;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .03em;
}

.tome-shell .tome-encounter-stamp {
  width: fit-content;
  margin: 5px 2px 8px auto;
  padding: 3px 7px 2px;
  border: 2px solid rgba(119,48,41,.72);
  color: #713029;
  background: rgba(246,226,187,.50);
  font-family: "Courier New", Courier, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(-2deg);
}

/* Existing animation, visually restyled only. */
.tome-shell .battle-damage-meter {
  margin: 8px 0 8px;
  padding: 6px 8px 9px;
  border: 1px solid rgba(70,50,31,.38);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(220,201,161,.24), rgba(248,232,195,.25)),
    repeating-linear-gradient(90deg, rgba(62,44,27,.04) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19);
}

.tome-shell .battle-damage-meter-head span {
  color: #69543d;
  font-size: 7px;
}

.tome-shell .battle-damage-readout {
  color: #713029;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
}

.tome-shell .battle-damage-track {
  height: 20px;
}

.tome-shell .battle-damage-needle {
  background: #79382f;
  box-shadow: 0 0 0 1px rgba(64,35,28,.16), 0 0 5px rgba(108,49,41,.28);
}

.tome-shell .tome-encounter-narrative {
  margin-top: 7px;
  padding: 7px 8px 4px 10px;
  border-left: 1px solid rgba(82,57,35,.25);
}

.tome-shell .tome-encounter-narrative p {
  margin: 0;
  color: #33261b;
  font-style: italic;
  line-height: 1.48;
}

/* ---------- Small preset safeguards ---------- */

.panel-size-small .tome-shell .panel p,
.panel-size-small .tome-shell .weakness-card p,
.panel-size-small .tome-shell .ability-card p,
.panel-size-small .tome-shell .tome-condition-marginalia p,
.panel-size-small .tome-shell .tome-encounter-narrative p {
  font-size: 11.5px;
}

.panel-size-small .tome-shell .weakness-heading > strong,
.panel-size-small .tome-shell .ability-heading > strong {
  font-size: 12.5px;
}

.panel-size-small .tome-shell .specimen-caption {
  margin-left: 4px;
  margin-right: 4px;
}



/* =========================================================
   v0.20.28 — STARTUP HARDENING
   Reliability/presentation only. No creature mechanics changed.
   ========================================================= */
.startup-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(104,75,42,.11), transparent 36%),
    #cbb58a;
  color: #2b2015;
}
.startup-card {
  width: min(520px, 100%);
  padding: 22px 24px;
  border: 1px solid rgba(61,45,28,.60);
  background:
    repeating-linear-gradient(0deg, rgba(67,50,31,.025) 0 1px, transparent 1px 7px),
    #dfcca3;
  box-shadow: 5px 7px 0 rgba(51,35,21,.11);
  font-family: "IM Fell English", Georgia, serif;
}
.startup-kicker {
  margin-bottom: 10px;
  color: #654431;
  font-family: "Courier New", Courier, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .10em;
}
.startup-card > strong {
  display: block;
  color: #281d13;
  font-size: 19px;
}
.startup-card p {
  margin: 8px 0 0;
  color: #5b4934;
  font-size: 11px;
  line-height: 1.45;
}
.startup-rule {
  width: 42%;
  height: 2px;
  margin-top: 16px;
  background: rgba(77,52,35,.52);
  animation: startup-pulse 950ms ease-in-out infinite alternate;
}
.startup-error button {
  margin-top: 14px;
}
@keyframes startup-pulse {
  from { opacity: .25; width: 18%; }
  to { opacity: .92; width: 68%; }
}

/* v0.20.31 — The Veiled true-position controls */
.veiled-mechanic-panel {
  border-left-color: rgba(66, 71, 78, .62) !important;
}
.veiled-control-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr);
  align-items: stretch;
  margin-bottom: 8px;
}
.veiled-control-grid > button {
  min-height: 42px;
}
.veiled-mechanic-panel > .secondary {
  width: 100%;
  margin-top: 4px;
}
@media (max-width: 820px) {
  .veiled-control-grid { grid-template-columns: 1fr; }
}