:root {
  --ink: #17231d;
  --muted: #607269;
  --paper: #e7eee8;
  --paper-light: #f8fbf6;
  --panel: #f1f6f0;
  --line: #a9b9ae;
  --red: #914b48;
  --gold: #b88e3f;
  --green: #285a42;
  --accent: #16847c;
  --jade: #8eafa0;
  --moonstone: #d8e6df;
  --forest-dark: #0b1510;
  --forest: #183223;
  --shadow: 0 18px 48px rgb(9 29 20 / 16%);
  --font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-display: Luminari, Herculanum, Copperplate, "Palatino Linotype", Georgia, serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 4%, rgb(34 91 57 / 18%), transparent 32rem),
    radial-gradient(circle at 86% 14%, rgb(184 142 63 / 12%), transparent 27rem),
    repeating-linear-gradient(0deg, rgb(11 32 22 / 1.8%) 0 1px, transparent 1px 4px),
    var(--paper);
  font-family: var(--font-body);
  min-height: 100vh;
}

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

.masthead {
  color: white;
  background:
    radial-gradient(circle at 78% 18%, rgb(44 93 55 / 50%), transparent 22rem),
    linear-gradient(120deg, #08100c 0%, #14251a 66%, #1f3424 100%);
  border-bottom: 4px solid var(--gold);
  padding: 2.6rem max(1.25rem, calc((100vw - 1440px) / 2));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.eyebrow {
  margin: 0 0 .45rem;
  color: #e7cd8e;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: .5rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: .015em;
  text-wrap: balance;
  text-shadow: 0 .08em .45em rgb(0 0 0 / 42%);
}

.lede { color: #c8d8ce; margin-bottom: 0; max-width: 54rem; }
.engine-mark, .valid-badge {
  white-space: nowrap;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 999px;
  padding: .55rem .8rem;
  color: #f0ece4;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .69rem;
  font-weight: 800;
}
.engine-mark span {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  margin-right: .35rem;
  background: #45c4b6;
  box-shadow: 0 0 0 4px rgb(69 196 182 / 16%);
}

main { max-width: 1440px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
#character-form { display: grid; gap: 1.15rem; }
.sheet-section {
  background: rgb(248 251 246 / 92%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  box-shadow: 0 8px 25px rgb(14 49 31 / 8%);
  padding: 1.15rem;
}
.character-library { margin-bottom: 1.15rem; border-top-color: var(--green); }
.character-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.character-library-heading .eyebrow { color: var(--accent); font-size: .6rem; margin-bottom: .2rem; }
.character-library-heading h2 { margin: 0; font: 700 1.35rem var(--font-display); }
.library-count { border: 1px solid var(--line); border-radius: 999px; padding: .4rem .7rem; color: var(--green); font-size: .68rem; font-weight: 850; white-space: nowrap; }
.character-library-list { display: grid; gap: .55rem; margin-top: .85rem; }
.character-library-empty { margin: 0; padding: .9rem; border: 1px dashed var(--line); color: var(--muted); font-size: .78rem; text-align: center; }
.saved-character-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid var(--line); background: #eef4ee; }
.saved-character-card.active { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.saved-character-card h3 { margin: 0 0 .2rem; font: 700 1rem var(--font-display); }
.saved-character-card p { margin: 0; color: var(--muted); font-size: .7rem; }
.saved-character-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.saved-character-actions .button { min-height: 2rem; padding: .35rem .55rem; font-size: .65rem; }
.saved-character-actions .button-outline { color: var(--green); border-color: var(--green); }
.button-danger { color: #7d2e2b; background: transparent; border: 1px solid #b9827f; }
.button-danger:hover { color: white; background: #7d2e2b; }
.section-title { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.section-title span {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
}
.section-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.18rem;
  letter-spacing: -.01em;
}

.identity-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr .9fr 1fr .6fr; gap: .8rem; }
.field, .number-field {
  display: grid;
  gap: .35rem;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}
input, select, textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-light);
  color: var(--ink);
  padding: .65rem .7rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 650;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(22 132 124 / 15%); }
textarea { resize: vertical; line-height: 1.55; }

.sheet-columns { display: grid; grid-template-columns: 1.05fr 1fr 1.25fr; gap: 1.15rem; align-items: start; }
.ability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ability-card {
  border: 1px solid var(--line);
  background: #eff5ef;
  padding: .65rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem .7rem;
  align-items: center;
}
.ability-card label { grid-column: 1 / -1; font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.ability-card select { min-height: 2.35rem; padding: .45rem; font-size: 1rem; }
.ability-mod {
  min-width: 2.45rem;
  padding: .48rem .35rem;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  box-shadow: inset 0 0 0 1px var(--gold);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
}

.profile-groups { display: grid; gap: .7rem; }
.profile-group {
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: #f3f7f1;
  padding: .7rem;
}
.profile-group h3 {
  margin: 0 0 .55rem;
  color: var(--muted);
  font: 800 .68rem var(--font-body);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.combat-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.number-field {
  border: 1px solid var(--line);
  background: #eff5ef;
  padding: .5rem;
  text-align: center;
}
.number-field > span { display: grid; gap: .08rem; }
.number-field small { color: #819087; font-size: .52rem; letter-spacing: .035em; }
.number-field input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; text-align: center; font: 700 1.25rem var(--font-display); padding: .12rem; min-height: 2.15rem; }
.number-field.derived { align-content: space-between; }
.number-field output { color: var(--accent); font: 700 1.45rem var(--font-display); padding: .18rem 0; }
.movement-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.movement-mode { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; }
.movement-mode select { min-height: 2.25rem; padding: .35rem .55rem; }
.equipment-group { margin-top: .7rem; }
.equipment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.equipment-primary, .equipment-secondary { grid-column: 1 / -1; }
.equipment-fields select { min-height: 2.3rem; padding: .4rem .55rem; }
.weapon-readout {
  grid-column: 1 / -1;
  border-left: 3px solid var(--gold);
  padding: .48rem .65rem;
  background: #e6efe8;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.38;
}
.mastery-panel {
  margin-top: .7rem;
  border: 1px solid var(--line);
  background: #f3f7f1;
}
.mastery-panel[hidden] { display: none; }
.mastery-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .7rem;
  cursor: pointer;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  list-style: none;
}
.mastery-panel summary::-webkit-details-marker { display: none; }
.mastery-panel summary::after { content: "▾"; color: var(--accent); }
.mastery-panel[open] summary::after { content: "▴"; }
.mastery-panel summary strong {
  margin-left: auto;
  color: var(--accent);
  font-size: .62rem;
  letter-spacing: .04em;
}
.mastery-panel-body { border-top: 1px solid var(--line); padding: 0 .7rem .7rem; }
.mastery-panel-body > .microcopy { margin: .55rem 0; }
.mastery-panel .mastery-options { max-height: 11rem; }
.mastery-panel .mastery-selection-summary { margin-top: .5rem; }
.mastery-panel .mastery-summary-card {
  padding: .4rem .55rem;
  font-size: .66rem;
}
.mastery-options {
  display: grid;
  gap: .35rem;
  max-height: 13rem;
  overflow-y: auto;
  padding: .45rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6faf5;
}
.mastery-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .55rem;
  padding: .45rem .5rem;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: .74rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.mastery-option:hover { border-color: var(--gold); background: #edf3e8; }
.mastery-option.selected { border-color: var(--accent); background: #dcece5; }
.mastery-option.unavailable { cursor: not-allowed; opacity: .48; }
.mastery-option input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.mastery-option small { color: var(--muted); font-size: .66rem; font-weight: 700; }
.mastery-equipped-badge {
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: .12rem .38rem;
  color: #6f5014;
  background: #f8efd5;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.mastery-selection-summary { display: grid; gap: .4rem; margin-top: .65rem; }
.mastery-summary-card {
  border-left: 3px solid var(--accent);
  padding: .5rem .65rem;
  background: #eaf1eb;
  font-size: .7rem;
  line-height: 1.4;
}
.mastery-summary-card strong { display: block; color: var(--ink); font-size: .74rem; }
.mastery-summary-card.inactive { border-left-color: #9d968a; }
.mastery-summary-card em { display: block; margin-top: .2rem; color: var(--muted); }
.microcopy { color: var(--muted); font-size: .73rem; line-height: 1.45; margin: .8rem 0 0; }

.skill-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .7rem; }
.skill-row { display: grid; grid-template-columns: 1fr 7rem; align-items: center; gap: .4rem; border-bottom: 1px dotted var(--line); padding: .2rem 0; }
.skill-row label { font-size: .74rem; font-weight: 700; }
.skill-row select { min-height: 2rem; padding: .25rem; font-size: .7rem; }

.choices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.catalog-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .5rem;
  margin-bottom: .65rem;
  padding: .6rem;
  border: 1px solid #c8d3c9;
  border-radius: 3px;
  background: #eef3ed;
}
.catalog-filter { display: grid; gap: .25rem; min-width: 0; }
.catalog-filter span { color: var(--muted); font-size: .6rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.catalog-filter select { width: 100%; min-width: 0; min-height: 2rem; padding: .3rem .4rem; font-size: .68rem; }
.adder-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.add-button {
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  color: white;
  padding: 0 1rem;
  font-weight: 800;
}
.add-button:hover { background: var(--accent); border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 2.4rem; margin-top: .8rem; }
.feature-choice-list { display: grid; gap: .55rem; margin-top: .75rem; }
.feature-choice-list:empty { display: none; }
.species-build-choices { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 0; }
.feature-choice-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, .8fr); align-items: center; gap: .7rem; }
.feature-choice-field span { font-size: .72rem; font-weight: 800; }
.feature-choice-field select { min-height: 2rem; padding: .25rem; font-size: .7rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #deebe3;
  border: 1px solid #a9c0b3;
  border-radius: 999px;
  padding: .42rem .42rem .42rem .72rem;
  font-size: .76rem;
  font-weight: 750;
}
.chip button { width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 50%; color: white; background: var(--accent); line-height: 1; }

.action-bar {
  position: sticky;
  bottom: .75rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgb(9 22 15 / 96%);
  color: white;
  border-radius: 4px;
  padding: .8rem .9rem;
  box-shadow: var(--shadow);
}
.status { margin: 0; color: #d8d2c8; font-size: .8rem; }
.status.error { color: #ffaaa4; }
.status.success { color: #94dfb1; }
.action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.button { min-height: 2.65rem; border-radius: 3px; padding: .6rem .9rem; font-weight: 850; font-size: .76rem; }
.button-primary { color: #fffaf0; background: var(--green); border: 1px solid var(--gold); }
.button-primary:hover { background: var(--accent); border-color: #74c9bd; }
.button-outline { color: white; background: transparent; border: 1px solid #a49c91; }
.button-quiet { color: #d7d0c6; background: transparent; border: 1px solid transparent; }
.button:disabled { opacity: .42; cursor: not-allowed; }

.preview {
  margin-top: 1.15rem;
  padding: 1.3rem;
  background: #0b1610;
  color: white;
  border-top: 5px solid var(--green);
  box-shadow: var(--shadow);
}
.preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.preview-heading h2 { font: 700 1.8rem var(--font-display); margin-bottom: .4rem; }
.valid-badge { border-color: #3ca99b; color: #a9eadf; }
.preview-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: .65rem; margin: 1rem 0; }
.preview-stat { background: #15251b; border: 1px solid #35503e; padding: .7rem; }
.preview-stat span { display: block; color: #9eb1a5; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.preview-stat strong { display: block; margin-top: .25rem; font: 700 1.35rem var(--font-display); }
.preview-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.preview-list { border-top: 1px solid #47604f; padding-top: .7rem; }
.preview-list h3 { margin: 0 0 .4rem; color: #dfc273; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.preview-list p { color: #d3dfd6; font-size: .78rem; line-height: 1.5; margin: 0; }
footer { color: var(--muted); font-size: .7rem; text-align: center; padding: 0 1rem 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-tabs {
  display: flex;
  gap: .45rem;
  padding: .8rem max(1.25rem, calc((100vw - 1440px) / 2));
  border-bottom: 1px solid #345241;
  background: #0d1c14;
}
.site-tab {
  min-height: 2.6rem;
  padding: .65rem 1rem;
  border: 1px solid #456250;
  border-radius: 8px;
  background: #172b1f;
  color: #bcd0c3;
  font: 800 .72rem var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-tab:hover { border-color: #a78b4c; color: #fff3cf; }
.site-tab.active { border-color: var(--gold); background: #30361f; color: #f4dfa4; box-shadow: inset 0 -2px #c9a75e; }
.site-tab-panel[hidden] { display: none; }

.online-multiplayer {
  min-height: 32rem;
  padding: clamp(1.1rem, 3vw, 2.4rem);
  border: 1px solid #314f3c;
  border-top: 4px solid var(--gold);
  border-radius: 10px;
  background: linear-gradient(145deg, #0b1710, #14261a 58%, #1c2c1d);
  color: #edf4ee;
  box-shadow: var(--shadow);
}
.online-multiplayer [hidden] { display: none !important; }
.online-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.online-hero h2 { margin: 0; color: #fff4d5; font: 500 clamp(1.8rem, 4vw, 3rem) var(--font-display); }
.security-badge { padding: .55rem .75rem; border: 1px solid #6f9c7d; border-radius: 999px; color: #bfe7ca; font: 800 .64rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.online-intro { max-width: 58rem; margin: 1rem 0 1.4rem; color: #bdcec1; line-height: 1.65; }
.online-grid { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(24rem, 1.4fr); gap: 1rem; }
.online-card { padding: 1.1rem; border: 1px solid #36533f; border-radius: 9px; background: rgb(4 12 7 / 42%); }
.online-card h3 { margin: 0 0 .9rem; color: #dfc273; font: 800 .74rem var(--font-ui); letter-spacing: .09em; text-transform: uppercase; }
.online-card .field { color: #cbd9cf; }
.online-card input, .online-card select { border-color: #486450; background: #f3f6ef; color: #17231d; }
.online-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; align-items: end; }
.online-inline-form .button { min-height: 2.75rem; }
.online-session { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; color: #c8d9cc; }
.online-session[hidden], .online-invite[hidden] { display: none; }
.online-session strong { color: #fff0bd; }
.online-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.online-create { width: 100%; margin-top: .9rem; }
.online-divider { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; color: #7f9b88; font: 700 .64rem var(--font-ui); text-transform: uppercase; }
.online-divider::before, .online-divider::after { content: ""; flex: 1; border-top: 1px solid #36533f; }
.online-invite { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid #a88c4d; border-radius: 9px; background: #24291a; }
.online-invite > div > * { display: block; }
.online-invite span { color: #a9baad; font: 800 .62rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.online-invite strong { margin: .2rem 0; color: #ffe6a1; font: 800 1.3rem var(--font-ui); letter-spacing: .15em; }
.online-invite small { color: #c5d1c7; }
.online-multiplayer > .status { color: #c7d7ca; }
.multiplayer-battle-status { margin: .8rem 0 0; padding: .65rem .8rem; border: 1px solid #665b37; background: #242319; color: #e7d59e; font-size: .74rem; }

.encounter-launch { margin-top: 1rem; }
.encounter-start-row { display: grid; grid-template-columns: 1fr 1fr 1.8fr auto; gap: .8rem; align-items: end; }
.encounter-start-row .button { min-height: 2.75rem; }
.encounter-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: center; margin: 1rem 0; }
.encounter-group-description { min-height: 2.5em; margin: -0.25rem 0 0.75rem; }
.encounter-side { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; display: grid; gap: .8rem; }
.encounter-side legend { padding: 0 .4rem; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.encounter-roster { display: grid; gap: .65rem; }
.roster-row > span { display: grid; grid-template-columns: minmax(0, 1fr) 2.35rem; gap: .45rem; }
.roster-remove { border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--red); font-size: 1.2rem; cursor: pointer; }
.roster-add { width: 100%; color: var(--ink); }
.monster-catalog { margin-top: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #f7f8f3; overflow: hidden; }
.monster-catalog summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; cursor: pointer; color: var(--ink); font-weight: 850; letter-spacing: .02em; }
.monster-catalog summary strong { color: var(--accent); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.monster-catalog-controls { display: grid; grid-template-columns: minmax(14rem, 1.5fr) repeat(2, minmax(10rem, 1fr)); gap: .7rem; padding: .9rem 1rem 0; border-top: 1px solid var(--line); }
.monster-catalog > .microcopy { margin: .65rem 1rem; }
.monster-catalog-table-wrap { max-height: 24rem; overflow: auto; border-top: 1px solid var(--line); }
.monster-catalog-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.monster-catalog-table th { position: sticky; top: 0; z-index: 1; padding: .55rem .7rem; color: #e7eadf; background: #14251b; text-align: left; font-size: .61rem; text-transform: uppercase; letter-spacing: .07em; }
.monster-catalog-table td { padding: .48rem .7rem; border-bottom: 1px solid #d9ddd3; color: var(--muted); }
.monster-catalog-table tr:nth-child(even) td { background: #eef2eb; }
.monster-catalog-table td:first-child { color: var(--ink); font-weight: 800; }
.monster-catalog-table td:nth-child(2) { color: var(--accent); font-weight: 850; }
.monster-catalog-empty { padding: 1.2rem !important; text-align: center; color: var(--muted) !important; }
.versus-mark { color: var(--muted); font-weight: 900; letter-spacing: .08em; }
.training-row { display: grid; grid-template-columns: 1fr 12rem auto; gap: .8rem; align-items: end; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.training-row > div { align-self: center; }
.training-row strong, .training-row span { display: block; }
.training-row strong { color: var(--ink); font-size: .78rem; }
.training-row span { margin-top: .2rem; color: var(--muted); font-size: .67rem; }
.training-report { display: grid; gap: 1rem; margin-top: 1rem; }
.training-report[hidden] { display: none; }
.training-report > .training-report-section { border: 1px solid var(--line); border-radius: 10px; background: rgb(216 230 223 / 52%); overflow: hidden; }
.training-report-section > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem;
  cursor: pointer; list-style: none; color: var(--ink); font-size: .9rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.training-report-section > summary::-webkit-details-marker { display: none; }
.training-report-section > summary::after { content: "⌄"; color: var(--accent); font-size: 1rem; transition: transform .15s ease; }
.training-report-section[open] > summary { border-bottom: 1px solid var(--line); }
.training-report-section[open] > summary::after { transform: rotate(180deg); }
.training-report-content { padding: 0 1rem 1rem; }
.training-report h3, .training-report h4 { margin: 0; color: var(--ink); }
.training-report h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.training-report h4 { font-size: .78rem; }
.report-note, .training-scenario p, .rating-card > p { margin: .35rem 0 .75rem; color: var(--muted); font-size: .68rem; }
.training-table-shell { overflow-x: auto; }
.training-report table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.training-report th, .training-report td { padding: .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.training-report thead th { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.scenario-grid, .rating-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; margin-top: .8rem; }
.training-scenario, .rating-card { padding: .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.learning-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem; margin-top: .8rem; }
.learning-summary-card { padding: .85rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--panel); }
.learning-summary-card p { margin: .45rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.training-scenario ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.training-scenario li { display: flex; justify-content: space-between; gap: .5rem; font-size: .7rem; }
.training-scenario li span { color: var(--muted); }
.rating-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.rating-grid > div { min-width: 0; padding: .45rem .25rem; border: 1px solid var(--line); text-align: center; }
.rating-grid span, .rating-grid strong { display: block; }
.rating-grid span { overflow: hidden; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; text-transform: uppercase; }
.rating-grid strong { margin-top: .2rem; color: var(--accent); font-size: .9rem; }
.rating-grid small { color: var(--muted); font-size: .52rem; font-weight: 400; }
.controller { margin-top: 1rem; padding: 1.25rem; border: 1px solid #403a32; border-radius: 8px; background: #171613; color: #eee8df; }
.controller-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.turn-controls { display: flex; align-items: stretch; gap: .5rem; }
.end-turn-button { border-color: #bd554d; background: #6b2824; color: #fff; font-weight: 800; }
.end-turn-button:hover:not(:disabled) { background: #85342e; }
.end-turn-button:disabled { cursor: not-allowed; opacity: .45; }
.controller-heading h2 { margin: .15rem 0 0; font-family: var(--font-display); font-size: 1.5rem; }
.round-badge { padding: .55rem .8rem; border: 1px solid #5b5145; color: #bdb3a6; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.round-badge strong { color: #f4d08b; font-size: 1rem; }
.encounter-prompt { margin: 1rem 0; padding: .8rem 1rem; border-left: 3px solid var(--red); background: #24211c; font-weight: 700; }
.combatant-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.combatant-card { padding: .9rem; border: 1px solid #494239; background: #211f1b; }
.combatant-card > div:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.combatant-card span { color: #9e9589; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.combatant-card strong { font-family: var(--font-display); }
.combatant-card p { margin: .45rem 0 0; color: #beb6ac; font-size: .75rem; }
.combatant-card.player { border-top: 3px solid #d2aa58; }
.combatant-card.enemy { border-top: 3px solid #a8342f; }
.hp-track { height: 5px; margin-top: .55rem; background: #3d3730; overflow: hidden; }
.hp-track span { display: block; height: 100%; background: #a8342f; }
.resource-panel { margin-top: 1rem; padding: .9rem; border: 1px solid #403a32; background: #11100e; }
.resource-panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; }
.resource-panel-heading h3 { margin: 0; color: #d7bb7a; font-family: var(--font-display); font-size: 1rem; }
.resource-panel-heading span { color: #81796e; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.resource-tracker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.resource-card { padding: .75rem; border: 1px solid #39342d; background: #1c1a17; }
.resource-card.player { box-shadow: inset 3px 0 #d2aa58; }
.resource-card.enemy { box-shadow: inset 3px 0 #a8342f; }
.resource-card header { display: flex; justify-content: space-between; gap: .7rem; margin-bottom: .55rem; }
.resource-card header span { color: #aaa196; font-size: .7rem; }
.economy-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
.economy-chip { padding: .24rem .38rem; border: 1px solid #4c453c; border-radius: 999px; font-size: .61rem; text-transform: uppercase; letter-spacing: .04em; }
.economy-chip.ready { border-color: #687b51; color: #c5d9a7; background: #26301d; }
.economy-chip.spent { color: #766f65; background: #25221e; text-decoration: line-through; }
.resource-row { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; align-items: center; margin-top: .42rem; color: #aaa196; font-size: .68rem; }
.resource-row strong { color: #e1d9cf; font-size: .68rem; }
.resource-row > i { grid-column: 1 / -1; display: block; height: 4px; overflow: hidden; background: #38332c; }
.resource-row > i b { display: block; height: 100%; background: #b48b40; transition: width .2s ease; }
.resource-row.movement > i b { background: #66899b; }
.spell-slot-block { margin-top: .65rem; padding-top: .55rem; border-top: 1px solid #34302a; }
.spell-slot-block h4 { margin: 0 0 .4rem; color: #8f877c; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.slot-row { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: .45rem; margin-top: .3rem; color: #aaa196; font-size: .65rem; }
.slot-row > div { display: flex; flex-wrap: wrap; gap: .2rem; }
.slot-pip { width: .55rem; height: .55rem; border: 1px solid #856b3e; border-radius: 50%; }
.slot-pip.full { background: #ddb861; box-shadow: 0 0 5px #c39439aa; }
.slot-pip.empty { background: #27231e; }
.slot-row strong { color: #ddd4c9; }
.resource-empty { margin: .35rem 0 0; color: #6f685f; font-size: .64rem; }
.status-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .55rem; }
.status-chips span { padding: .2rem .35rem; border: 1px solid #67543d; color: #d0b47b; font-size: .6rem; }
.arena-shell { width: min(100%, 560px); margin: 1rem auto; padding: .6rem; border: 1px solid #433d35; background: #11100e; }
.arena { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid #665b4e; background-color: #29261f; background-image: linear-gradient(#39352d 1px, transparent 1px), linear-gradient(90deg, #39352d 1px, transparent 1px); background-size: calc(100% / var(--arena-grid-columns, 24)) calc(100% / var(--arena-grid-rows, 24)); }
.arena-token { position: absolute; display: grid; aspect-ratio: 1; place-items: center; translate: -50% 50%; min-width: 20px; min-height: 20px; border: 2px solid #f2d184; border-radius: 50%; background: #6d5427; color: #fff; font-weight: 900; box-shadow: 0 2px 8px #000b; }
.arena-token.draggable { z-index: 2; cursor: grab; touch-action: none; box-shadow: 0 0 0 3px #f2d18444, 0 2px 8px #000b; }
.arena-token.dragging { cursor: grabbing; box-shadow: 0 0 0 5px #f2d18466, 0 6px 14px #000d; }
.arena-token.animating { z-index: 5; pointer-events: none; will-change: transform, opacity; }
.arena-token.entering { animation: arena-token-enter 240ms cubic-bezier(.2,.85,.35,1) both; }
.arena-token.moving {
  animation: arena-token-move var(--token-move-duration, 260ms) cubic-bezier(.18,.78,.25,1) both;
  box-shadow: 0 0 0 3px #8fe8d566, 0 5px 18px #000e;
}
.arena-token.teleporting {
  animation: arena-token-teleport 360ms cubic-bezier(.2,.8,.25,1) both;
  box-shadow: 0 0 18px #8fe8d5cc, 0 0 0 3px #d8fff766;
}
@keyframes arena-token-enter {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes arena-token-move {
  0% { transform: translate(var(--token-move-x), var(--token-move-y)) scale(.96); }
  82% { transform: translate(0, 0) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes arena-token-teleport {
  0% { opacity: .2; transform: scale(.35); }
  42% { opacity: 0; transform: scale(.1); }
  58% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}
.arena-help { margin: .55rem 0 0; color: #9d9488; font-size: .66rem; line-height: 1.4; }
.arena-token.enemy { border-color: #e08078; background: #6b2824; }
.arena-token.unconscious {
  border-color: #ff4d45 !important;
  outline: 4px solid #dc201bb8;
  outline-offset: 2px;
  filter: grayscale(.55) brightness(.72);
  box-shadow: 0 0 0 7px #ff2f2744, 0 3px 12px #000e;
}
.arena-emanation {
  position: absolute;
  display: grid;
  z-index: 1;
  place-items: start center;
  translate: -50% 50%;
  border: 2px dashed #f7d773b8;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe99b18 0 58%, #d9b85028 72%, transparent 75%);
  box-shadow: 0 0 18px #e7c46144 inset;
  pointer-events: none;
}
.arena-emanation > span {
  max-width: 80%;
  margin-top: .22rem;
  overflow: hidden;
  color: #fff3bd;
  font: 800 clamp(.42rem, .72vw, .62rem)/1.1 var(--font-ui);
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}
.arena-emanation.emanation-elemental { border-color: #5bd9c5c2; background: radial-gradient(circle, #36c9b218 0 58%, #2aa89530 72%, transparent 75%); }
.arena-emanation.emanation-nature { border-color: #83d46ec2; background: radial-gradient(circle, #6bc45c18 0 58%, #438e3930 72%, transparent 75%); }
.arena-emanation.emanation-healing { border-color: #7edcaec2; background: radial-gradient(circle, #7ce0aa1a 0 58%, #3da66d30 72%, transparent 75%); }
.arena-emanation.emanation-shadow { border-color: #9e78d4c2; background: radial-gradient(circle, #65449628 0 58%, #26163848 72%, transparent 75%); }
.arena-spell-token { position: absolute; display: grid; place-items: center; translate: -50% 50%; z-index: 1; min-width: 32px; min-height: 32px; border: 2px dashed #ffe578; border-radius: 50%; background: radial-gradient(circle, #fff8a955 0 38%, #e7bb3330 70%, transparent 72%); color: #fff6b8; box-shadow: 0 0 18px #ffe76a88 inset, 0 0 12px #ffe76a55; pointer-events: none; }
.arena-spell-token span { max-width: 80%; overflow: hidden; color: #fff; font-size: clamp(.48rem, .9vw, .7rem); font-weight: 900; line-height: 1.05; text-align: center; text-shadow: 0 1px 3px #000; }
.arena-spell-token.draggable { z-index: 3; cursor: grab; pointer-events: auto; touch-action: none; }
.arena-spell-token.dragging { cursor: grabbing; border-style: solid; box-shadow: 0 0 0 4px #ffe57844, 0 0 22px #ffe76aaa inset; }
.arena-spell-token.square { border-radius: 4px; }
.arena-spell-token.line { min-width: 0; min-height: 6px; height: 6px; translate: 0 50%; transform-origin: left center; border-radius: 999px; }
.arena-spell-token.persistent-area { z-index: 1; pointer-events: none; }
.arena-spell-token.area-fog {
  border-color: #cfdee7;
  background:
    radial-gradient(circle at 28% 36%, #f2f7f1b8 0 12%, transparent 30%),
    radial-gradient(circle at 70% 58%, #b9cbd5a8 0 16%, transparent 38%),
    radial-gradient(circle, #dce7e3a8, #8297a37a 68%, #5369743d);
  color: #f4fbff;
  box-shadow: 0 0 22px #dcecf2aa inset, 0 0 12px #b8ccd877;
}
.arena-spell-token.area-darkness {
  border-color: #9b85d9;
  background: radial-gradient(circle, #24173de6 0 45%, #090611e8 72%, #62439d77);
  color: #eee5ff;
  box-shadow: 0 0 24px #05030dee inset, 0 0 13px #7253aa99;
}
.arena-spell-token.area-radiance {
  border-color: #d7f7ff;
  background: radial-gradient(circle, #eaffffb8 0 15%, #90e8ff55 52%, #43bddb26 74%);
  color: #f7ffff;
}
.arena-spell-token.area-grease {
  border-color: #d9bd72;
  background:
    repeating-linear-gradient(135deg, #f1d67b30 0 5px, #6f571f38 5px 10px),
    radial-gradient(circle, #ba973e66, #4a391e88 72%);
  color: #fff0b3;
  box-shadow: 0 0 20px #b58b3570 inset, 0 0 10px #d1ac5070;
}
.arena-spell-token.area-nature {
  border-color: #91d878;
  background:
    repeating-radial-gradient(ellipse at center, #9ee67c28 0 7px, #376c3038 8px 14px),
    linear-gradient(145deg, #294a2ba8, #102918c4);
  color: #e4ffd7;
  box-shadow: 0 0 21px #62b64d77 inset, 0 0 11px #72c45d66;
}
.controller-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.controller-options section { padding: .8rem; border: 1px solid #3d3831; background: #1e1c18; }
.controller-options h3 { margin: 0 0 .6rem; color: #d7bb7a; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.controller-options .end-turn-panel { border-color: #6f403a; background: #241a18; }
.end-turn-panel .end-turn-button { min-width: 8rem; }
.command-buttons { display: flex; flex-wrap: wrap; gap: .45rem; }
.command-button { border: 1px solid #675d50; border-radius: 4px; padding: .55rem .7rem; background: #302c26; color: #eee7dc; cursor: pointer; font: inherit; font-size: .75rem; }
.command-button:hover { border-color: #d2aa58; background: #393229; }
.target-action-control { display: grid; gap: .45rem; min-width: 13rem; padding: .55rem; border: 1px solid #494239; background: #211f1b; }
.target-action-control > strong { color: #f0e6d5; font-size: .75rem; }
.target-action-control > span { color: #a99f92; font-size: .65rem; }
.target-action-control select { width: 100%; min-height: 2.25rem; border: 1px solid #5b5145; background: #11100e; color: #eee8df; }
.target-action-control select[multiple] { min-height: 5.4rem; }
.reaction-buttons .command-button { border-color: #b74b44; }
.reaction-buttons .decline { border-color: #675d50; color: #bbb2a6; }
.command-line { margin-top: 1rem; }
.command-line > label { display: block; margin-bottom: .4rem; color: #c7bfb4; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.command-line > div { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.command-line input { border-color: #554c41; background: #0f0e0c; color: #f3ede4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.command-line p { margin: .45rem 0 0; color: #8f877c; font-size: .68rem; }
.command-line code { color: #d4ba82; }
.controller .status { color: #aaa196; }
.decision-trace { margin-top: .8rem; border-top: 1px solid #3e3932; padding-top: .8rem; }
.decision-trace > summary { cursor: pointer; color: #83b4c6; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-decisions { display: grid; gap: .65rem; max-height: 34rem; margin-top: .75rem; overflow: auto; }
.ai-decision { padding: .7rem; border: 1px solid #3b4549; background: #171d1f; }
.ai-decision > header { display: flex; justify-content: space-between; gap: .7rem; color: #dbe8eb; font-size: .72rem; }
.ai-decision > p { margin: .35rem 0 .55rem; color: #84979c; font-size: .65rem; }
.decision-candidate { margin-top: .35rem; border: 1px solid #343d40; background: #111719; }
.decision-candidate.chosen { border-color: #6293a3; box-shadow: inset 3px 0 #6ca5b8; }
.decision-candidate summary { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .5rem; cursor: pointer; color: #c7d2d5; font-size: .68rem; }
.decision-candidate summary strong { color: #8dc4d6; font-variant-numeric: tabular-nums; }
.decision-components { margin: 0; padding: 0 .55rem .5rem; list-style: none; }
.decision-components li { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .25rem 0; border-top: 1px solid #293135; color: #89999e; font-size: .62rem; }
.decision-components li span { color: #b9c7ca; }
.combat-log { margin-top: .8rem; border-top: 1px solid #3e3932; padding-top: .8rem; }
.combat-log summary { cursor: pointer; color: #d2aa58; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.combat-log ol { max-height: 26rem; overflow: auto; margin: .8rem 0 0; padding: 0; list-style: none; }
.combat-log li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem; padding: .42rem 0; border-bottom: 1px solid #2c2924; color: #c9c1b7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; line-height: 1.45; }
.combat-log .log-round { color: #776e62; }
.combat-log .log-message { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.combat-log .d20-roll {
  display: inline;
  color: #f2d389;
  font-family: inherit;
  font-size: 1.08em;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: inherit;
  text-shadow: 0 0 .55rem rgba(210, 170, 88, .28);
}

.dice-tray {
  margin-bottom: .5rem;
  border: 1px solid #675a40;
  background: radial-gradient(circle at 50% 25%, #2e2920, #111213 72%);
  box-shadow: inset 0 0 20px #0007;
}
.dice-tray header { display: flex; align-items: baseline; justify-content: space-between; padding: .55rem .68rem; border-bottom: 1px solid #3f392f; }
.dice-tray h3 { margin: 0; color: #e2c98e; font: 700 .72rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.dice-tray header span { color: #80786c; font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }
.dice-tray-stage { display: grid; grid-template-columns: 4.7rem minmax(0, 1fr); gap: .65rem; align-items: center; min-height: 5.8rem; padding: .55rem .68rem; perspective: 420px; }
.dice-tray-stage p { margin: 0; overflow-wrap: anywhere; color: #aaa197; font: .65rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.dice-tray-die {
  position: relative;
  display: grid;
  width: 4.55rem;
  aspect-ratio: 1;
  place-items: center;
  clip-path: polygon(50% 0, 84% 14%, 100% 50%, 78% 88%, 50% 100%, 18% 88%, 0 50%, 16% 14%);
  background:
    linear-gradient(145deg, #fff 0 26%, #e8e9e7 27% 50%, #fafafa 51% 73%, #d5d7d5 74% 100%);
  filter: drop-shadow(0 .32rem .3rem #000b);
  transform-style: preserve-3d;
}
.dice-tray-die::before {
  content: "";
  position: absolute;
  inset: 9%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border: 1px solid #c7bca1;
  background: linear-gradient(150deg, #ffffffcc, #d9d9d580);
}
.dice-tray-die::after {
  content: "";
  position: absolute;
  inset: 4%;
  background: linear-gradient(65deg, transparent 49%, #c4b79780 50%, transparent 51%), linear-gradient(-65deg, transparent 49%, #c4b79780 50%, transparent 51%);
}
.dice-tray-die span { z-index: 2; color: #d49313; font: 900 1.45rem Copperplate, "Palatino Linotype", Georgia, serif; text-shadow: 0 1px #fff, 0 0 .22rem #f3ae28; }
.dice-tray-die.rolling { animation: dice-tumble .68s cubic-bezier(.25, .8, .2, 1); }
@keyframes dice-tumble {
  0% { transform: rotateX(0) rotateY(0) scale(.82); filter: drop-shadow(0 .15rem .15rem #0007) blur(.7px); }
  38% { transform: rotateX(185deg) rotateY(-155deg) scale(1.08); }
  72% { transform: rotateX(330deg) rotateY(-315deg) scale(.94); }
  100% { transform: rotateX(360deg) rotateY(-360deg) scale(1); filter: drop-shadow(0 .32rem .3rem #000b); }
}

/* Battle workspace: compact high-fantasy command layout inspired by a tabletop VTT. */
.controller {
  --battle-panel: #0b1510;
  --battle-panel-raised: #122019;
  --battle-line: #30483a;
  --battle-gold: #d0ad61;
  --battle-blue: #3fb3aa;
  --battle-orange: #b88e3f;
  --battle-purple: #91b6a5;
  --battle-green: #65a887;
  max-width: 1640px;
  margin: 1.2rem auto 0;
  padding: .8rem;
  border-color: #294334;
  border-radius: 12px;
  background:
    radial-gradient(circle at 78% -10%, #214b3440 0, transparent 32rem),
    radial-gradient(circle at 50% 0, #17271e 0, #07100b 48rem);
  font-family: var(--font-ui);
  font-size: .9rem;
  line-height: 1.45;
  box-shadow: 0 18px 60px #0008;
}
.controller-heading { padding: .25rem .45rem .8rem; border-bottom: 1px solid var(--battle-line); }
.controller-heading h2 { font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; }
.controller-heading .eyebrow { margin-bottom: .2rem; }
.battle-workspace { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(440px, 1.65fr) minmax(270px, .88fr); gap: .85rem; margin-top: .85rem; align-items: start; }
.battle-rail, .battle-stage { min-width: 0; }
.battle-panel, .controller-options > details, .controller-options > section, .command-line, .active-combatant-summary, .resource-panel, .turn-menu-heading, .advanced-command-menu {
  border: 1px solid var(--battle-line);
  border-radius: 8px;
  background: linear-gradient(145deg, #15241b, #09110d);
  box-shadow: 0 8px 24px #0002;
}
.battle-panel > h3, .controller-options h3 {
  margin: 0;
  padding: .68rem .75rem;
  border-bottom: 1px solid var(--battle-line);
  color: #e2d2a7;
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: .025em;
}
.combatant-card strong { font-family: var(--font-ui); }
.combatant-cards { display: grid; grid-template-columns: 1fr; gap: .35rem; padding: .45rem; }
.combatant-card {
  display: grid;
  grid-template-columns: 1.25rem 2.65rem minmax(0, 1fr) 2rem;
  gap: .5rem;
  align-items: center;
  min-width: 0;
  padding: .45rem;
  border: 1px solid #2b4034;
  border-top-width: 1px;
  border-radius: 4px;
  background: #101b15;
}
.combatant-card.player, .combatant-card.enemy { border-top-width: 1px; }
.combatant-card.active { border-color: var(--battle-gold); background: linear-gradient(90deg, #2a2817, #101b15); box-shadow: inset 3px 0 var(--battle-gold), 0 0 14px #d0ad6129; }
.combatant-card.unconscious { border-color: #9e423d; background: linear-gradient(90deg, #341613, #101b15); box-shadow: inset 3px 0 #e4544b; }
.combatant-card.unconscious .hp-track span { background: #cf433c; }
.combatant-card.dead { opacity: .58; filter: grayscale(.7); }
.initiative-rank { color: #82978a !important; text-align: center; }
.initiative-value { color: #e8dab8; font-size: 1rem; text-align: center; }
.initiative-status { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.initiative-status span { border: 1px solid #587261; border-radius: 999px; color: #bfd3c6; font-size: .68rem; line-height: 1.2; padding: .18rem .42rem; text-transform: none; letter-spacing: .01em; }
.legal-option { margin: .28rem; overflow: hidden; border: 1px solid rgb(111 143 124 / 30%); border-radius: 6px; background: #0d1812; }
.legal-option > summary { cursor: pointer; font-weight: 700; list-style-position: inside; padding: .66rem .58rem; }
.legal-option[open] { border-color: #6e8d78; background: #122019; }
.legal-option[open] > summary { color: #ecd181; }
.legal-option-heading { display: inline-flex; align-items: flex-start; gap: .45rem; max-width: calc(100% - 1.25rem); vertical-align: middle; }
.legal-option-label { min-width: 0; overflow: visible; overflow-wrap: anywhere; line-height: 1.35; text-overflow: clip; white-space: normal; }
.spell-level-badge { flex: 0 0 auto; padding: .12rem .32rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: 700 .55rem system-ui, sans-serif; letter-spacing: .04em; line-height: 1.2; opacity: .9; text-transform: uppercase; }
.spell-level-button { appearance: none; cursor: pointer; }
.spell-level-button:hover { background: #183a31; color: #bcebe2; opacity: 1; }
.spell-level-button[aria-disabled="true"] { cursor: default; }
.spell-level-button.upcast-slot { border-color: #5b9f8a; color: #bfe2d5; }
.legal-option > .target-action-control,
.legal-option > .command-button { margin: 0 .25rem .65rem; width: calc(100% - .5rem); }
.legal-option-direct { font-weight: 700; }
.combatant-portrait, .portrait-initial {
  display: grid;
  width: 2.65rem;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid #8a7444;
  border-radius: 4px;
  background: #1a2c21;
  color: #e8d8aa;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.combatant-card.enemy .combatant-portrait { border-color: #74413e; }
.combatant-portrait img, .active-portrait img, .arena-token img { width: 100%; height: 100%; object-fit: cover; }
.combatant-portrait img[src$="/assets/eirik-stormsong-token.jpg"],
.active-portrait img[src$="/assets/eirik-stormsong-token.jpg"],
.arena-token img[src$="/assets/eirik-stormsong-token.jpg"],
.combatant-portrait img[src$="/assets/brokk-ironshadow-token.jpg"],
.active-portrait img[src$="/assets/brokk-ironshadow-token.jpg"],
.arena-token img[src$="/assets/brokk-ironshadow-token.jpg"] { object-position: center 18%; }
.combatant-identity { min-width: 0; }
.combatant-identity > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combatant-identity > strong { display: block; overflow: hidden; margin-top: .1rem; font-size: .9rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.combatant-identity p { margin: .18rem 0 0; }
.combatant-card .hp-track { height: 4px; margin-top: .25rem; }
.combatant-card .hp-track span { background: #608d46; }
.battle-left .combat-log { margin-top: .7rem; padding: 0; border: 1px solid var(--battle-line); }
.battle-left .combat-log summary { padding: .68rem .75rem; border-bottom: 1px solid var(--battle-line); color: #e2d2a7; font-family: var(--font-ui); font-size: .8rem; letter-spacing: .025em; text-transform: none; }
.battle-left .combat-log ol { max-height: 28rem; margin: 0; padding: .4rem .65rem; }
.battle-left .combat-log li { grid-template-columns: 1.8rem 1fr; font-family: var(--font-ui); font-size: .7rem; line-height: 1.55; }
.battle-left .combat-log .d20-roll { font-family: var(--font-ui); }
.latest-turn-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, .42fr);
  gap: .55rem;
  align-items: stretch;
  margin-bottom: .55rem;
  border: 1px solid #4f604f;
  border-left: 3px solid var(--battle-gold);
  background: linear-gradient(100deg, #202417, #101b15);
}
.latest-turn-copy { min-width: 0; padding: .65rem .8rem; }
.latest-turn-copy header { display: flex; justify-content: space-between; gap: 1rem; color: #8fa395; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.latest-turn-copy header strong { color: #d9c58f; font-variant-numeric: tabular-nums; }
.latest-turn-copy > p { overflow-wrap: anywhere; }
#latest-turn-text { margin: .35rem 0 0; color: #f0e7d0; font-size: .86rem; font-weight: 750; line-height: 1.45; }
#latest-turn-text .d20-roll { color: #ffe08a; font-weight: 900; text-shadow: 0 0 .55rem #d2aa5866; }
.latest-turn-copy .encounter-prompt { margin: .28rem 0 0; padding: 0; border: 0; background: none; color: #9eb0a3; font-size: .7rem; font-weight: 500; line-height: 1.35; }
.latest-turn-strip .dice-tray { margin: 0; border-width: 0 0 0 1px; }
.latest-turn-strip .dice-tray header { padding: .3rem .55rem; }
.latest-turn-strip .dice-tray-stage { grid-template-columns: 3.35rem minmax(0, 1fr); min-height: 4.4rem; padding: .4rem .55rem; }
.latest-turn-strip .dice-tray-die { width: 3.2rem; }
.latest-turn-strip .dice-tray-die span { font-size: 1.1rem; }
.battle-stage .arena-shell { width: 100%; margin: 0; padding: .4rem; background: #07100b; }
.battle-stage .arena {
  border-color: #526958;
  background-color: #0a1a13;
  background-image:
    linear-gradient(#b8e0c733 1px, transparent 1px),
    linear-gradient(90deg, #b8e0c733 1px, transparent 1px),
    linear-gradient(#07130d26, #07130d26),
    url("/assets/colosseum-blue-flame-night.jpg");
  background-position: 0 0, 0 0, center, center;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-size:
    calc(100% / var(--arena-grid-columns, 24)) calc(100% / var(--arena-grid-rows, 24)),
    calc(100% / var(--arena-grid-columns, 24)) calc(100% / var(--arena-grid-rows, 24)),
    cover,
    cover;
  box-shadow: inset 0 0 35px #000b;
}
.arena-token {
  z-index: 2;
  min-width: min(26px, calc(100% / var(--arena-grid-columns, 24)));
  min-height: min(26px, calc(100% / var(--arena-grid-rows, 24)));
  overflow: visible;
  background: #2e3f2f;
  box-shadow: 0 0 0 2px #07100b, 0 3px 9px #000e;
}
.arena-token-portrait {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  place-items: center;
}
.arena-token-portrait img { border-radius: inherit; }
.arena-token-name {
  position: absolute;
  top: calc(100% + .28rem);
  left: 50%;
  z-index: 4;
  max-width: 9rem;
  translate: -50% 0;
  padding: .12rem .34rem;
  overflow: hidden;
  border: 1px solid #557466;
  border-radius: 999px;
  background: #06100ce8;
  color: #e9f2eb;
  font: 700 clamp(.46rem, .62vw, .58rem)/1.2 var(--font-ui);
  letter-spacing: .01em;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  box-shadow: 0 2px 8px #0009;
  pointer-events: none;
}
.arena-token.enemy .arena-token-name { border-color: #8d4b47; background: #180b0ae8; color: #f3d9d5; }
.arena-token.unconscious .arena-token-name { border-color: #e65b53; color: #ffd5d2; }
.arena-token.player { border-color: #5dc3b5; }
.arena-token.enemy { border-color: #bf5a4f; }
.arena-token.draggable { box-shadow: 0 0 0 3px #4abdb066, 0 3px 12px #000; }
@media (prefers-reduced-motion: reduce) {
  .arena-token.animating { animation: none !important; will-change: auto; }
}
.battle-stage .arena-emanation { border-width: 1px; box-shadow: 0 0 22px currentColor inset, 0 0 10px #0007; }
.battle-stage .arena-emanation > span {
  position: absolute;
  top: .2rem;
  left: 50%;
  max-width: min(12rem, 92%);
  translate: -50% 0;
  padding: .14rem .38rem;
  overflow: hidden;
  border: 1px solid #d9c47a99;
  border-radius: 999px;
  background: #07110dda;
  color: #fff0b8;
  font-size: clamp(.42rem, .65vw, .58rem);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 8px #0008;
}
.arena.choosing-teleport { cursor: crosshair; box-shadow: inset 0 0 22px #35bbae55; }
.teleport-range { position: absolute; z-index: 1; translate: -50% 50%; border: 2px dashed #5ed3c2; border-radius: 50%; background: #2ab6a717; pointer-events: auto; }
.arena-area-template { position: absolute; z-index: 4; display: grid; place-items: center; transform-origin: 0 50%; border: 2px dashed #82e8cf; background: #3bc9a72b; color: #d7fff5; cursor: grab; touch-action: none; box-shadow: 0 0 18px #3bc9a744 inset, 0 0 12px #07100bcc; }
.arena-area-template.circle { border-radius: 50%; }
.arena-area-template.square { border-radius: 4px; }
.arena-area-template.line { border-radius: 999px; }
.arena-area-template.cone { border: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); background: linear-gradient(90deg, #7ee5cc66, #3bc9a71f); }
.arena-area-template.dragging { cursor: grabbing; border-style: solid; background-color: #65e0c24d; }
.arena-area-template span { max-width: 80%; overflow: hidden; color: #ecfff9; font-size: clamp(.48rem, .9vw, .68rem); font-weight: 900; line-height: 1.05; text-align: center; text-shadow: 0 1px 3px #001; pointer-events: none; }
.arena-area-template.line span, .arena-area-template.cone span { transform: rotate(0); white-space: nowrap; }
.wall-placement-layer { position: absolute; inset: 0; z-index: 4; cursor: crosshair; touch-action: none; }
.wall-placement-layer.drawing { cursor: grabbing; }
.arena-force-wall {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 6px;
  transform-origin: 0 50%;
  border: 2px solid #c9f7ff;
  background: linear-gradient(90deg, #8deeff55, #ffffffcc, #8deeff55);
  color: #effdff;
  box-shadow: 0 0 5px #b8f7ff, 0 0 14px #63dfffa8;
  pointer-events: none;
}
.arena-force-wall.panels { height: 6px; border-radius: 999px; }
.arena-force-wall.globe, .arena-force-wall.hemisphere {
  border-radius: 50%;
  background: radial-gradient(circle, #dffbff13 0 66%, #b9f4ff55 72%, #effeffbb 76%, transparent 80%);
}
.arena-force-wall.hemisphere { border-bottom-style: dashed; }
.arena-force-wall.preview { z-index: 1; border-style: dashed; }
.arena-force-wall span { color: #f5feff; font: 800 clamp(.46rem, .75vw, .65rem)/1 var(--font-ui); text-shadow: 0 1px 3px #001; white-space: nowrap; }
.arena-force-wall.panels span { transform: translateY(-1rem); }
.arena-token.area-targeted { border-color: #efff9a; box-shadow: 0 0 0 4px #dfff6077, 0 0 18px #dfff60cc; filter: brightness(1.18); }
.arena-help { text-align: center; }
.active-combatant-summary {
  display: grid;
  grid-template-columns: 4.4rem minmax(8rem, 1fr) auto auto minmax(11rem, 1.6fr);
  gap: .75rem;
  align-items: center;
  margin-top: .55rem;
  padding: .65rem;
}
.active-portrait { display: grid; width: 4.4rem; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid var(--battle-gold); background: #1b3023; color: #e6d2a0; font: 1.6rem var(--font-display); }
.active-identity small, .active-identity span, .active-stat small, .active-health small { display: block; color: #849b8d; font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; }
.active-identity strong { display: block; margin: .15rem 0; color: #edf4ec; font: 700 1rem/1.3 var(--font-ui); }
.active-stat { min-width: 3.4rem; padding: .25rem .55rem; border-left: 1px solid var(--battle-line); text-align: center; }
.active-stat strong { display: block; margin-top: .2rem; color: #e6d9bd; font-size: .85rem; }
.active-health > span { display: flex; justify-content: space-between; color: #a5b6aa; font-size: .7rem; }
.active-health > i { display: block; height: 6px; margin: .3rem 0; overflow: hidden; background: #263b2e; }
.active-health > i b { display: block; height: 100%; background: #65a25b; }
.battle-stage .resource-panel { margin-top: .55rem; padding: .65rem; }
.battle-stage .resource-panel-heading h3 { font-family: var(--font-ui); font-size: .82rem; }
.battle-stage .resource-tracker { grid-template-columns: 1fr; max-height: 22rem; overflow: auto; }
.battle-stage .resource-card { padding: .55rem; border-color: #2d4738; background: #101d16; }
.battle-stage .resource-card.player { box-shadow: inset 3px 0 var(--battle-gold); }
.battle-stage .resource-card.enemy { box-shadow: inset 3px 0 #914b48; }
.battle-stage .resource-card header span, .battle-stage .resource-row { color: #9eb1a5; }
.battle-stage .resource-row strong, .battle-stage .slot-row strong { color: #e1ece3; }
.battle-stage .resource-row > i, .battle-stage .slot-pip.empty { background: #25382d; }
.battle-stage .resource-row > i b { background: var(--battle-gold); }
.battle-stage .resource-row.movement > i b { background: var(--battle-blue); }
.battle-stage .spell-slot-block { border-top-color: #2d4738; }
.battle-stage .spell-slot-block h4, .battle-stage .slot-row { color: #8fa597; }
.battle-stage .slot-pip { border-color: #8c7445; }
.battle-stage .slot-pip.full { background: #d7b961; box-shadow: 0 0 5px #d0ad6177; }
.post-combat-report { margin-top: .75rem; padding: .8rem; border: 1px solid #816b3c; border-radius: 10px; background: linear-gradient(145deg, #17261b, #08110c); box-shadow: 0 10px 30px #0004; }
.post-combat-report-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .55rem; margin-top: .55rem; }
.post-combat-card { padding: .7rem; border: 1px solid #345342; border-radius: 8px; background: linear-gradient(145deg, #152a1e, #0d1a13); }
.post-combat-card.player { box-shadow: inset 3px 0 #5dc3b5; }
.post-combat-card.enemy { box-shadow: inset 3px 0 #bf5a4f; }
.post-combat-card header { display: flex; justify-content: space-between; gap: .5rem; color: #edf4ec; }
.post-combat-card header span { color: #91a798; font-size: .62rem; }
.post-combat-card dl { margin: .5rem 0 0; }
.post-combat-card dl > div { display: flex; justify-content: space-between; gap: .75rem; padding: .22rem 0; border-top: 1px solid #294032; }
.post-combat-card dt { color: #a8b8ad; font-size: .65rem; }
.post-combat-card dd { margin: 0; color: #f0d78f; font-weight: 800; }
.battle-right { position: sticky; top: .75rem; }
.turn-menu-heading { display: grid; gap: .25rem; margin-bottom: .5rem; padding: .72rem .78rem; border-color: #6f6039; background: linear-gradient(145deg, #20281b, #0d1710); }
.turn-menu-heading div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.turn-menu-heading span { color: #8fa395; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.turn-menu-heading h3 { margin: 0; color: #f0d58e; font: 700 .9rem/1.2 var(--font-ui); }
.turn-menu-heading p { margin: 0; color: #92a499; font-size: .66rem; line-height: 1.4; }
.controller-options { display: grid; grid-template-columns: 1fr; gap: .42rem; }
.controller-options section { padding: 0; overflow: hidden; }
.controller-options > details { padding: 0; overflow: hidden; border-color: #355142; background: linear-gradient(145deg, #132119, #0a130e); }
.controller-options > details > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .68rem .72rem;
  cursor: pointer;
  list-style: none;
  color: #ddc786;
  font: 700 .8rem/1.3 var(--font-ui);
  letter-spacing: .02em;
  user-select: none;
}
.controller-options > details > summary::-webkit-details-marker { display: none; }
.controller-options > details > summary::after {
  content: "⌄";
  order: 3;
  color: currentColor;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  transition: transform .16s ease;
}
.controller-options > details[open] { border-color: #6f895f; box-shadow: 0 8px 24px #0004, inset 3px 0 #b49752; }
.controller-options > details[open] > summary { border-bottom: 1px solid var(--battle-line); background: #17271e; }
.controller-options > details[open] > summary::after { transform: rotate(180deg); }
.controller-options > details[data-empty="true"] > summary { color: #718077; opacity: .72; }
.controller-options .actions-category { border-color: #927b45; }
.controller-options .bonus-category { border-color: #8d723a; }
.controller-options .reaction-category { border-color: #5f8e7c; }
.controller-options .special-category { border-color: #397969; }
.controller-options .movement-category { border-color: #526359; }
.actions-category > summary { color: #e4ca8c; }
.bonus-category > summary { color: #d7af62; }
.reaction-category > summary { color: #aed3c3; }
.action-menu-title { display: grid; min-width: 0; gap: .06rem; }
.action-menu-title strong { color: inherit; font-size: .8rem; }
.action-menu-title small { overflow: hidden; color: #82968a; font-size: .58rem; font-weight: 500; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.action-menu-count { min-width: 1.6rem; margin-left: auto; padding: .12rem .38rem; border: 1px solid currentColor; border-radius: 999px; color: inherit; font: 800 .62rem/1.2 var(--font-ui); text-align: center; }
.controller-options .spell-casting-group { padding: .55rem .28rem .25rem; margin-top: .35rem; border: 0; border-top: 1px solid #315c50; background: transparent; }
.spell-casting-group h4 { margin: 0 .5rem .25rem; color: #8ebbae; font-size: .68rem; letter-spacing: .035em; }
.special-category > summary { color: #76c9b3; }
.movement-category > summary { color: #a6b8ad; }
.command-buttons { display: grid; gap: .28rem; padding: .35rem; }
.command-button { width: 100%; border: 1px solid #2f4a3a; border-radius: 5px; padding: .62rem .68rem; background: linear-gradient(145deg, #14241a, #0c1711); color: #e5eee7; font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere; text-align: left; box-shadow: inset 0 1px #ffffff08; transition: border-color .15s ease, background .15s ease, translate .15s ease; }
.command-button:hover { border-color: #678a73; background: #1b3023; translate: 0 -1px; }
.command-button:focus-visible { outline: 2px solid #75c9b0; outline-offset: 2px; }
.target-action-control { min-width: 0; margin: .3rem; padding: .65rem; border-radius: 6px; background: linear-gradient(145deg, #17251c, #0c1510); }
.target-action-control .command-button { margin-top: .15rem; border: 1px solid #54705f; text-align: center; }
.target-action-control > strong { font-size: .82rem; }
.target-action-control > span { line-height: 1.45; }
.target-action-control select { border-radius: 5px; padding: .48rem .55rem; }
.attack-sequence-grid { display: grid; gap: .5rem; margin: .2rem 0 .35rem; }
.attack-step-card { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .55rem; padding: .58rem; border: 1px solid #3e5f4a; border-radius: 7px; background: #0a1510; box-shadow: inset 3px 0 #b7964f; }
.attack-step-card > strong { grid-column: 1 / -1; color: #f0d78f; font-size: .72rem; letter-spacing: .055em; text-transform: uppercase; }
.attack-step-card label { display: grid; gap: .25rem; color: #9fb1a5; font-size: .62rem; }
.attack-step-card select { width: 100%; min-width: 0; color: #edf4ee; }
.teleport-choice-button { border-color: #3d9e91 !important; color: #9fe2d8; }
.area-choice-button { border-color: #49a990 !important; color: #baf5e5; }
.spell-slot-button { border: 1px solid #367f73 !important; color: #a8e4da; text-align: center; }
.controller-options .end-turn-panel { padding: .3rem; border-color: #8b753f; background: #1f2113; }
.end-turn-panel .end-turn-button { width: 100%; min-width: 0; border: 1px solid #af9047; background: #393318; color: #efd58c; letter-spacing: .03em; }
.advanced-command-menu { margin-top: .5rem; overflow: hidden; }
.advanced-command-menu > summary { padding: .55rem .68rem; cursor: pointer; color: #91a79a; font-size: .68rem; font-weight: 700; list-style-position: inside; }
.advanced-command-menu[open] > summary { border-bottom: 1px solid var(--battle-line); color: #c8d8ce; }
.advanced-command-menu .command-line { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.command-line { margin-top: .55rem; padding: .6rem; }
.command-line > label { margin-bottom: .3rem; letter-spacing: .03em; text-transform: none; }
.command-line input { font-family: var(--font-ui); font-size: .78rem; }
.command-line p { display: none; }
.battle-right > .status { min-height: 1.5rem; margin: .4rem 0 0; font-size: .72rem; line-height: 1.4; }
.decision-trace { margin: .75rem 0 0; padding: .7rem; border: 1px solid #315347; background: #0c1812; }
.decision-trace > summary { letter-spacing: .03em; text-transform: none; }

.dice-tray h3 { font: 700 .8rem/1.3 var(--font-ui); letter-spacing: .025em; text-transform: none; }
.dice-tray header span { font-size: .6rem; letter-spacing: .025em; text-transform: none; }
.dice-tray-stage p { font: .72rem/1.45 var(--font-ui); }

@media (max-width: 1120px) {
  .battle-workspace { grid-template-columns: minmax(210px, .7fr) minmax(430px, 1.5fr); }
  .battle-right { grid-column: 1 / -1; }
  .battle-right { position: static; }
  .controller-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .controller-options .end-turn-panel { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .battle-workspace { grid-template-columns: 1fr; }
  .battle-left, .battle-stage, .battle-right { grid-column: 1; }
  .controller-options { grid-template-columns: 1fr; }
  .active-combatant-summary { grid-template-columns: 3.5rem 1fr auto auto; }
  .active-portrait { width: 3.5rem; }
  .active-health { grid-column: 1 / -1; }
  .latest-turn-strip { grid-template-columns: 1fr; }
  .latest-turn-strip .dice-tray { border-width: 1px 0 0; }
  .attack-step-card { grid-template-columns: 1fr; }
  .attack-step-card > strong { grid-column: 1; }
}

@media (max-width: 1100px) {
  .identity-grid { grid-template-columns: repeat(3, 1fr); }
  .sheet-columns { grid-template-columns: 1fr 1fr; }
  .skills-section { grid-column: 1 / -1; }
  .skill-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .masthead { align-items: flex-start; padding-top: 2rem; }
  .engine-mark { display: none; }
  .site-tabs { padding: .65rem .7rem; }
  .site-tab { flex: 1; padding-inline: .55rem; font-size: .62rem; }
  main { padding: 1rem .7rem 3rem; }
  .identity-grid, .sheet-columns, .choices-grid { grid-template-columns: 1fr; }
  .skills-section { grid-column: auto; }
  .skill-list { grid-template-columns: 1fr 1fr; }
  .action-bar { position: static; display: grid; }
  .action-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .saved-character-card { grid-template-columns: 1fr; }
  .saved-character-actions { justify-content: flex-start; }
  .button-primary { grid-column: 1 / -1; grid-row: 1; }
  .preview-lists { grid-template-columns: 1fr; }
  .encounter-sides, .encounter-start-row, .training-row, .combatant-cards, .controller-options, .resource-tracker, .monster-catalog-controls { grid-template-columns: 1fr; }
  .online-hero, .online-invite { align-items: flex-start; flex-direction: column; }
  .online-grid, .online-team-grid, .online-inline-form { grid-template-columns: 1fr; }
  .security-badge { white-space: normal; }
  .versus-mark { text-align: center; }
}
@media (max-width: 450px) {
  .identity-grid, .ability-grid, .skill-list { grid-template-columns: 1fr; }
  .combat-numbers, .preview-stats { grid-template-columns: repeat(2, 1fr); }
  .section-title { margin-bottom: .75rem; }
}