:root {
  --ink: #ebe8df; --muted: #aaa69c; --paper: #181817; --paper-soft: #272622;
  --coal: #0c0c0c; --line: #3c3932; --ember: #b41f27; --ember-bright: #ed4d32;
  --ember-dim: rgba(180, 31, 39, .17); --gold: #cba65c;
  --serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --shadow: 0 28px 80px rgba(0, 0, 0, .36);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--coal); overscroll-behavior-y: none; }
body {
  min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--ink);
  background: linear-gradient(rgba(255,255,255,.013) 1px, transparent 1px), radial-gradient(circle at 50% -20%, #28211d 0, #11110f 46%, #090909 100%);
  background-size: 100% 5px, 100% 100%; font-family: var(--sans); font-size: 16px; overscroll-behavior-y: none;
}
body.drawer-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ember-bright); outline-offset: 3px; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; }

.ember-glow { position: fixed; right: 5vw; bottom: -18rem; width: 36rem; height: 36rem; border-radius: 50%; background: rgba(181,37,21,.16); filter: blur(110px); pointer-events: none; }
.mobile-panel-tabs { display: contents; }

.game-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(220px,260px) minmax(460px,1fr) minmax(390px,460px); gap: clamp(14px,1.7vw,26px); align-items: start; width: min(1600px,calc(100% - 28px)); margin: 0 auto; padding: 15px 0; }
.left-rail { position: sticky; top: 104px; display: grid; gap: 14px; max-height: calc(100vh - 126px); overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.left-rail .side-panel { position: static; max-height: none; overflow-x: hidden; overflow-y: visible; }
.side-panel { position: sticky; top: 104px; max-height: calc(100vh - 126px); overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; scrollbar-width: thin; scrollbar-color: var(--line) transparent; border-top: 2px solid var(--ember); background: rgba(25,25,23,.78); }
.side-panel > * { margin-inline: 16px; }
.navigation-panel { display: flex; flex-direction: column; min-height: 0; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; margin-top: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); font-size: .9rem; letter-spacing: .08em; }
.panel-heading > span:first-child, .dice-heading > span:first-child { color: var(--ink); font: 600 1.2rem/1 var(--serif); letter-spacing: .12em; }
.journey-heading { padding-bottom: 0; border-bottom: 0; }
.panel-heading span:last-child:not(:first-child) { color: var(--muted); font-size: .72rem; letter-spacing: 0; }
.sheet-heading-actions { display: flex; align-items: center; gap: 6px; }
.sheet-import-button, .sheet-clear-button { min-height: 30px; padding: 0 9px; border: 1px solid #5b5040; color: var(--gold); background: transparent; cursor: pointer; font: .68rem/1 var(--sans); letter-spacing: .04em; }
.tools-panel.saved-character-mode > .panel-heading > span::after { content: " · 已保存角色"; color: #8fbc83; font-size: .66rem; font-weight: 400; letter-spacing: .04em; }
.sheet-clear-button { border-color: #69413b; color: #d58c7d; }
input, textarea, select { min-width: 0; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: rgba(7,7,7,.48); }
input { height: 40px; padding: 0 10px; }
textarea { width: 100%; padding: 10px; line-height: 1.55; resize: vertical; }
select { width: 100%; min-height: 38px; padding: 0 8px; }
input::placeholder, textarea::placeholder { color: #6e6b64; }
.jump-form { margin-top: 22px; }
.jump-form label, .sheet-field > span, .derived-field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .72rem; letter-spacing: .05em; }
.jump-form > div { display: grid; grid-template-columns: 1fr auto; }
.jump-form input:focus-visible { outline: 0; }
.jump-form button, .ending button { border: 0; color: white; background: var(--ember); cursor: pointer; }
.jump-form button { padding: 0 13px; }
.form-error { min-height: 18px; margin: 5px 0 0; color: #ee7a65; font-size: .73rem; }
.history-header { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.history-header > span { flex: 1; min-width: 0; color: var(--muted); font-size: .7rem; letter-spacing: .02em; white-space: nowrap; }
.history-actions { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; justify-content: flex-end; }
.history-actions .text-button { font-size: .68rem; white-space: nowrap; }
.text-button { padding: 4px 0; border: 0; color: var(--gold); background: none; cursor: pointer; font-size: .76rem; }
.text-button:disabled { opacity: .35; cursor: default; }
.text-button.danger { color: #d77769; }
.history-list { display: grid; gap: 3px; margin: 9px 16px 6px; padding: 0; list-style: none; }
.history-list button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 0; border: 1px solid transparent; color: var(--muted); background: transparent; cursor: pointer; text-align: left; }
.history-list button:hover { border-color: var(--line); color: var(--ink); background: var(--paper-soft); }
.history-list small { color: #706d66; }
.empty-history { padding: 8px 0; color: #77746c; font-size: .76rem; }
.journey-restart { margin-top: 12px; padding: 0 0 16px; }
body.ending-codex-embed { overflow: hidden; background: #141412; }
body.ending-codex-embed > :not(#ending-codex-dialog):not(script) { display: none !important; }
body.ending-codex-embed #ending-codex-dialog { width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; }
body.ending-codex-embed #ending-codex-dialog::backdrop { background: #141412; }
body.ending-codex-embed #close-ending-codex { display: none; }
.roll-sound-settings { margin-top: 10px; border: 1px solid #4d4840; background: rgba(203,166,92,.025); }
.roll-sound-settings summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 7px 10px; color: var(--ink); cursor: pointer; list-style: none; }
.roll-sound-settings summary::-webkit-details-marker { display: none; }
.roll-sound-settings summary::after {
  width: 6px;
  height: 6px;
  margin: 0 4px 0 10px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: #777168;
  background: transparent;
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}
.roll-sound-settings[open] summary::after { transform: translateY(2px) rotate(225deg); }
.roll-sound-settings summary > span { display: grid; min-width: 0; gap: 1px; }
.roll-sound-settings summary strong { font-size: .74rem; font-weight: 600; }
.roll-sound-settings summary small { color: var(--muted); font-size: .62rem; }
.roll-sound-settings summary b { margin-left: auto; color: #8f8a81; font-size: .65rem; font-weight: 500; white-space: nowrap; }
.roll-sound-settings.enabled summary b { color: #9fc394; }
.roll-sound-options { display: grid; gap: 8px; padding: 9px 10px 10px; border-top: 1px solid #39362f; }
.roll-sound-enable { display: flex; align-items: center; gap: 7px; color: #d6d1c7; font-size: .7rem; cursor: pointer; }
.roll-sound-enable input { width: 15px; height: 15px; margin: 0; accent-color: var(--ember-bright); }
.roll-sound-choice { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 6px; }
.roll-sound-choice label { display: grid; min-width: 0; gap: 4px; color: var(--muted); font-size: .64rem; }
.roll-sound-choice select { min-width: 0; width: 100%; height: 32px; padding: 0 25px 0 7px; border: 1px solid #4d4840; color: var(--ink); background: #1c1c19; font-size: .68rem; }
.roll-sound-choice button { min-width: 44px; height: 32px; padding: 0 8px; border: 1px solid #5b5040; color: #e4d2ab; background: rgba(203,166,92,.06); cursor: pointer; font-size: .65rem; }
.roll-sound-choice button:hover, .roll-sound-choice button:focus-visible { border-color: var(--gold); background: rgba(203,166,92,.12); }
.roll-sound-file { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; padding: 7px; border: 1px dashed #4d4840; }
.roll-sound-file[hidden] { display: none; }
.roll-sound-file input { width: 100%; min-width: 0; height: 32px; color: #aaa59b; font-size: .65rem; line-height: 30px; }
.roll-sound-file input::file-selector-button { height: 32px; margin: 0 7px 0 0; padding: 0 7px; border: 1px solid #5b5040; color: #e4d2ab; background: #23211d; cursor: pointer; font-size: .63rem; line-height: 30px; vertical-align: middle; }
.roll-sound-file small { overflow: hidden; color: #918b82; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.roll-sound-options > p { margin: 0; color: #858078; font-size: .6rem; line-height: 1.5; }
.roll-sound-options > p a { color: #b9a879; text-underline-offset: 2px; }

.community-dialog { width: min(620px,calc(100% - 26px)); max-width: none; max-height: calc(100vh - 30px); max-height: calc(100dvh - 30px); padding: 0; overflow: hidden; border: 1px solid #4b463d; border-top: 2px solid var(--ember); color: var(--ink); background: #141412; box-shadow: 0 30px 120px rgba(0,0,0,.78); }
.community-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.community-dialog-shell { display: grid; grid-template-rows: auto minmax(0,1fr); max-height: inherit; }
.community-dialog-header { z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: #171715; }
.community-dialog-header span, .community-section-heading > span { color: var(--ember-bright); font-size: .6rem; letter-spacing: .18em; }
.community-dialog-header h2 { margin: 3px 0 0; font: 600 1.2rem/1 var(--serif); letter-spacing: .04em; }
.community-dialog-header button, .community-intro button, .community-back-button { min-height: 36px; padding: 0 11px; border: 1px solid var(--line); color: var(--muted); background: #24231f; cursor: pointer; }
.community-dialog-body { min-height: 260px; overflow: auto; overscroll-behavior: contain; }
.community-list-view, .community-compose-view, .community-detail-view { padding: 20px; }
.community-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.community-intro p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.community-intro > div { display: flex; flex: 0 0 auto; gap: 7px; }
.community-intro .community-primary-button, .community-submit-button { border-color: #8f2025; color: #fff; background: #8f2025; }
.community-status { min-height: 18px; margin: 11px 0 0; color: var(--muted); font-size: .72rem; }
.community-question-list { display: grid; gap: 18px; margin-top: 4px; }
.community-module-group { overflow: hidden; border: 1px solid #35322d; background: rgba(255,255,255,.012); }
.community-module-group.flames { border-top: 2px solid #8f2025; }
.community-module-group.static { border-top: 2px solid #8b713d; }
.community-module-group.tabletop { border-top: 2px solid #536f78; }
.community-module-group.announcements { border-color: #685737; border-top: 2px solid var(--gold); background: rgba(203,166,92,.035); }
.community-module-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid #35322d; background: #181816; }
.community-module-heading h3 { margin: 0; color: #d8d2c6; font: 600 .82rem/1.3 var(--serif); letter-spacing: .05em; }
.community-module-heading span { color: #77736a; font: .64rem Georgia,serif; }
.community-module-list { display: grid; gap: 7px; padding: 8px; }
.community-module-empty { margin: 0; padding: 16px; color: #77736a; font-size: .7rem; text-align: center; }
.community-question-card { display: grid; gap: 7px; width: 100%; padding: 14px 15px; border: 1px solid var(--line); color: var(--ink); background: #1b1b19; cursor: pointer; text-align: left; }
.community-question-card.announcement { border-color: rgba(203,166,92,.5); background: rgba(203,166,92,.055); }
.community-question-card:hover, .community-question-card:focus-visible { border-color: #78684d; background: #211f1b; }
.community-question-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.community-kind { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #756239; color: #d9bc78; font: 700 .58rem/1 var(--sans); letter-spacing: .08em; }
.community-kind.bug { border-color: #823b35; color: #df8173; }
.community-kind.announcement { border-color: #8b713d; color: #e1c272; }
.community-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; min-width: 0; color: #7f7b72; font-size: .66rem; }
.community-meta span:not(:last-child)::after, .community-meta time:not(:last-child)::after { margin-left: 9px; color: #49463f; content: "·"; }
.community-meta span.community-official-name::after { content: none; }
.community-meta .community-official-badge { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.community-meta span.community-official-badge::after { content: none; }
.community-question-card > strong { overflow: hidden; font: 600 .88rem/1.45 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.community-question-card > p { display: -webkit-box; margin: 0; overflow: hidden; color: #aaa69c; font-size: .74rem; line-height: 1.55; white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.community-answer-total { color: var(--gold); font-size: .66rem; }
.community-empty { padding: 42px 20px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.community-empty strong { color: var(--ink); font: 600 .9rem var(--serif); }
.community-empty p { margin: 8px 0 0; font-size: .73rem; }
.community-back-button { margin-bottom: 18px; padding: 0; border: 0; color: var(--gold); background: transparent; }
.community-section-heading h3 { margin: 4px 0 18px; font: 600 1.14rem/1.35 var(--serif); }
.community-form { display: grid; gap: 14px; }
.community-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.community-form label:not(.community-anonymous) { display: grid; gap: 7px; color: var(--muted); font-size: .72rem; }
.community-form .community-author[hidden] { display: none; }
.community-form input[type="text"], .community-form textarea, .community-form select { width: 100%; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: #0f0f0e; font-size: 16px; }
.community-form input[type="text"], .community-form select { min-height: 42px; padding: 0 11px; }
.community-form textarea { min-height: 112px; padding: 10px 11px; resize: vertical; line-height: 1.55; touch-action: pan-y; }
.community-context { margin-top: -4px; color: #837c70; font-size: .68rem; }
.community-anonymous { display: flex; align-items: center; gap: 8px; width: fit-content; color: #c9c3b7; cursor: pointer; font-size: .74rem; }
.community-anonymous input { width: 16px; height: 16px; margin: 0; accent-color: var(--ember); }
.community-form-status { min-height: 18px; margin: -5px 0 -4px; color: #e48171; font-size: .72rem; }
.community-submit-button { width: fit-content; min-width: 108px; min-height: 42px; padding: 0 17px; border: 1px solid #8f2025; cursor: pointer; }
.community-submit-button:disabled { opacity: .55; cursor: wait; }
.community-question-detail { padding: 17px 18px 19px; border: 1px solid var(--line); background: #1b1b19; }
.community-question-detail h3 { margin: 14px 0 10px; color: #eee9dc; font: 600 1.1rem/1.45 var(--serif); }
.community-question-detail > p, .community-answer > p { margin: 0; color: #c6c0b5; font: 400 .8rem/1.75 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.community-answers { margin-top: 22px; }
.community-answers > h3 { margin: 0 0 12px; color: #d8d1c3; font: 600 .92rem/1.4 var(--serif); }
.community-answers > h3 span { color: var(--gold); font-family: Georgia,serif; }
.community-answer-list { display: grid; gap: 8px; }
.community-answer { padding: 13px 15px; border-left: 2px solid #514936; background: #191917; }
.community-answer > p { margin-top: 8px; }
.community-no-answers { margin: 0; padding: 20px; border: 1px dashed var(--line); color: #817c72; font-size: .73rem; text-align: center; }
.community-answer-form { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line); }

.community-announcement-dialog { width: min(560px,calc(100vw - 30px)); max-width: none; padding: 0; overflow: visible; border: 1px solid #685737; border-top: 3px solid var(--gold); color: var(--ink); background: #171715; box-shadow: 0 32px 120px rgba(0,0,0,.84); }
.community-announcement-dialog,
.community-announcement-dialog * { font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif !important; }
.community-announcement-dialog::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(6px); }
.community-announcement-card { padding: 30px 32px 28px; }
.community-announcement-eyebrow { color: var(--ember-bright); font-size: .62rem; letter-spacing: .2em; }
.community-announcement-card h2 { margin: 8px 0 20px; color: #eee9dd; font: 600 1.45rem/1.3 var(--serif); letter-spacing: .06em; }
.community-announcement-card ol { display: grid; gap: 13px; margin: 0; padding-left: 1.5em; color: #d2cbc0; font: 400 .88rem/1.8 var(--serif); }
.community-announcement-card li::marker { color: var(--gold); font-family: inherit; font-weight: 700; }
.community-announcement-inline-logo { display: inline-grid; width: 22px; height: 22px; margin: 0 4px; place-items: center; border: 1px solid var(--ember); color: var(--ember-bright); font: 700 .68rem/1 Georgia,serif; transform: rotate(45deg); vertical-align: middle; }
.community-announcement-inline-logo::first-letter { transform: rotate(-45deg); }
.community-announcement-card > button { display: block; min-width: 112px; min-height: 42px; margin: 24px auto 0; border: 1px solid #8f2025; color: #fff; background: #8f2025; cursor: pointer; }
.community-announcement-card > button:disabled { opacity: .6; cursor: wait; }
.community-announcement-error { margin: 16px 0 0; color: #ee7a65; font-size: .76rem; line-height: 1.6; }
.clues-panel { padding-bottom: 1px; }
.clues-heading { padding-bottom: 0; border-bottom: 0; }
.clues-content { margin-top: 15px; margin-bottom: 16px; }
.clues-content > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .72rem; letter-spacing: .05em; }
.clues-content textarea { min-height: 128px; }

.dice-box { margin-top: 0; margin-bottom: 0; padding: 16px 0 18px; }
.dice-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; color: var(--muted); font-size: .9rem; letter-spacing: .08em; }
.dice-heading output { color: var(--ember-bright); font: 700 2rem/1 Georgia,serif; letter-spacing: 0; }
.dice-buttons { container-name: dice-grid; container-type: inline-size; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.dice-buttons button { min-height: 35px; border: 1px solid var(--line); color: var(--ink); background: #252421; cursor: pointer; font-size: .73rem; }
.dice-buttons button:hover { border-color: var(--ember); background: var(--ember-dim); }
.percentile-roll-button { grid-column: span 1; white-space: nowrap; }
.dice-history { display: flex; flex-wrap: wrap; gap: 5px; min-height: 20px; margin: 9px 0 0; padding: 0; list-style: none; }
.dice-history li { padding: 3px 6px; color: #8f8b82; background: #22211f; font-size: .68rem; }
.dice-utility-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; min-width: 0; }
.dice-utility-row .percentile-roll-button { grid-column: span 1; }
.custom-dice-tile { grid-column: span 2; display: grid; grid-template-columns: minmax(0,1fr) 30px; align-items: stretch; min-width: 0; min-height: 35px; overflow: hidden; border: 1px solid var(--line); background: #252421; }
.custom-dice-tile:focus-within { border-color: var(--ember); background: var(--ember-dim); }
.custom-dice-tile.invalid { border-color: #ee7a65; }
.custom-dice-tile input { width: 100%; min-width: 0; height: 100%; padding: 0 2px 2px; border: 0; border-radius: 0; color: var(--ink); background: transparent; font-family: Georgia,serif; line-height: 1; text-align: center; }
.custom-dice-tile input::placeholder { color: #77736b; font-size: .78rem; line-height: 1; opacity: 1; }
.custom-dice-tile input:focus-visible { outline: 0; }
.custom-dice-tile button { min-width: 30px; padding: 0; border: 0; border-left: 1px solid var(--line); color: var(--gold); background: transparent; cursor: pointer; font-size: .72rem; }
.custom-dice-tile button:hover, .custom-dice-tile button:focus-visible { color: #fff2c2; background: rgba(177,70,42,.18); }
@container dice-grid (max-width: 280px) {
  .dice-utility-row .percentile-roll-button { grid-column: span 2; }
  .dice-utility-row .custom-dice-tile { grid-column: 1 / -1; }
}

.reader-card { position: relative; min-height: calc(100vh - 136px); padding: clamp(28px,4vw,56px) clamp(24px,5vw,68px) 56px; border: 1px solid #37342e; color: #27221f; background: linear-gradient(90deg,rgba(102,72,50,.05),transparent 12%,transparent 88%,rgba(102,72,50,.05)),#e7e0d1; box-shadow: var(--shadow); }
.reader-card::before { position: absolute; inset: 9px; border: 1px solid rgba(92,72,56,.23); pointer-events: none; content: ""; }
.reader-rule { position: relative; z-index: 1; display: flex; align-items: center; height: 11px; border-block: 2px solid #7e1118; }
.reader-rule span { width: 30%; height: 3px; margin-left: auto; background: #7e1118; }
.reader-heading { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.source-link { margin-bottom: 7px; color: #705e51; font-size: .78rem; text-decoration: none; }
.source-link:hover { color: #8f141b; }
.story-copy { position: relative; z-index: 1; font: 400 1.07rem/2 var(--serif); letter-spacing: .025em; }
.story-copy p { margin: 0 0 1em; text-align: justify; text-indent: 2em; }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy .stage-direction { color: #6c161b; font-weight: 650; text-align: center; text-indent: 0; letter-spacing: .15em; }
.story-copy .preface-obsolete { color: #756d64; text-indent: 2em; }
.story-copy .preface-obsolete del { text-decoration-color: currentColor; text-decoration-thickness: 1.5px; }
.story-copy .preface-aside { display: flex; width: fit-content; margin: 8px auto 0; align-items: center; justify-content: center; gap: 8px; color: #302925; font-family: var(--sans); line-height: 1; text-decoration: none; text-indent: 0; }
.story-copy .preface-aside strong { font-size: 1.05rem; letter-spacing: .04em; }
.story-copy .preface-aside img { display: block; width: 84px; height: auto; mix-blend-mode: multiply; }
.inline-jump, .inline-action { display: inline; padding: 0 .18em; border: 0; border-bottom: 1px solid #9b1d22; color: #8f141b; background: transparent; cursor: pointer; font: inherit; font-weight: 700; }
.inline-check { border-bottom-style: dotted; color: #72520f; }
.inline-opposed, .inline-combat { border-bottom-color: #72520f; border-bottom-style: dotted; color: #72520f; }
.inline-effect { border-bottom-color: #8a6315; color: #795814; }
.inline-check, .inline-opposed, .inline-combat, .inline-effect { display: inline-block; margin: 0 .12em; padding: .12em .48em; border: 1px solid #9a7a38; color: #664b0e; background: rgba(203,166,92,.18); font-weight: 650; line-height: 1.45; }
.story-map { margin: 30px 0 8px; text-align: center; }
.story-map button { width: 100%; padding: 8px; border: 1px solid #9e8f7a; background: rgba(255,255,255,.22); cursor: zoom-in; }
.story-map img { display: block; width: 100%; max-height: 470px; object-fit: contain; }
.story-map figcaption { margin-top: 7px; color: #75675c; font: .75rem/1.4 var(--sans); letter-spacing: .08em; }
.story-illustration { margin: 30px auto 10px; text-align: center; }
.story-illustration img { display: block; width: auto; max-width: 100%; max-height: 480px; margin: auto; object-fit: contain; }
.story-illustration figcaption { margin-top: 7px; color: #75675c; font: .75rem/1.4 var(--sans); letter-spacing: .05em; }
.status-change-card { margin: 0 0 10px; padding: 10px; border: 1px solid rgba(203,166,92,.55); background: rgba(203,166,92,.07); font-family: var(--sans); }
.status-change-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; }
.status-change-heading strong { color: var(--gold); font-size: .76rem; letter-spacing: normal; }
.status-change-heading span { color: #75675c; font-size: .72rem; }
.status-change-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 0; }
.status-change-row > span { color: var(--ink); font: .68rem/1.45 var(--sans); }
.status-change-row > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.status-change-row button { min-height: 31px; padding: 0 8px; border: 1px solid #695d48; color: var(--ink); background: #24231f; cursor: pointer; font-size: .68rem; }
.status-change-row button:disabled { opacity: .5; cursor: default; }
.status-change-row button.undo-effect { border-color: #9e8f7a; color: #75675c; }
.status-navigation-row { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(87,64,48,.2); }
.status-navigation-row button { min-height: 34px; padding: 0 10px; border: 1px solid #7fa66f; color: #efffe9; background: #405c37; cursor: pointer; font-size: .72rem; }
.dice-status-effects:empty { display: none; }
.dice-status-effects .status-change-card { margin: 0 0 10px; padding: 10px; border-color: rgba(203,166,92,.55); background: rgba(203,166,92,.07); }
.dice-status-effects .status-change-heading strong { color: var(--gold); }
.dice-status-effects .status-change-heading span { color: var(--muted); }
.dice-status-effects .status-change-row > span { color: var(--ink); }
.dice-status-effects .status-change-row button { border-color: #695d48; color: var(--ink); }
.dice-status-effects .status-change-row button.undo-effect { border-color: #68635b; color: var(--muted); }
.choices { position: relative; z-index: 1; margin-top: 40px; padding-top: 23px; border-top: 1px solid rgba(87,64,48,.32); }
.choices-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.choices-label { display: flex; align-items: center; gap: 11px; color: #735e4e; font-size: .73rem; letter-spacing: .18em; }
.choices-label span { width: 24px; height: 2px; background: #8f141b; }
.choice-back-button { padding: 4px 0; border: 0; color: #735e4e; background: transparent; cursor: pointer; font: .76rem/1.3 var(--sans); }
.choice-back-button:hover { color: #8f141b; }
.choice-back-button:disabled { opacity: .35; cursor: default; }
.choice-list { display: grid; gap: 9px; }
.choice-button { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; width: 100%; min-height: 54px; padding: 12px 16px; border: 1px solid #9e8f7a; color: #352a23; background: rgba(255,255,255,.2); cursor: pointer; text-align: left; transition: 140ms ease; }
.choice-button:hover { border-color: #8f141b; color: #7d1016; background: rgba(143,20,27,.06); transform: translateX(3px); }
.choice-button strong { font-family: var(--serif); font-size: .96rem; font-weight: 600; line-height: 1.55; }
.choice-button span { color: #8f141b; font: 700 .8rem/1 var(--sans); white-space: nowrap; }
.ending { position: relative; z-index: 1; margin-top: 40px; padding: 26px; border: 1px solid rgba(143,20,27,.65); background: rgba(143,20,27,.12); text-align: center; }
.ending.good { border-color: rgba(91,111,67,.75); background: rgba(91,111,67,.15); }
.ending.mixed { border-color: rgba(174,128,34,.72); background: rgba(203,166,92,.16); }
.ending-kind { color: #8f141b; font-size: .7rem; letter-spacing: .16em; }
.ending.good .ending-kind { color: #4f713f; }
.ending.mixed .ending-kind { color: #8a6315; }
.ending h2 { margin: 8px 0 10px; color: #6c161b; font: 700 1.55rem/1.3 var(--serif); }
.ending.good h2 { color: #3f5f32; }
.ending.mixed h2 { color: #72520f; }
.ending p { margin: 0 auto 13px; max-width: 34em; font-family: var(--serif); line-height: 1.7; }
.ending-progress { color: #75675c; font-size: .72rem; }
.ending-actions { display: flex; justify-content: center; gap: 8px; margin-top: 17px; }
.ending-actions button { padding: 10px 18px; }
.ending-actions button:last-child { color: #7d1016; background: transparent; border: 1px solid #8f141b; }
.interlude-growth { margin-top: 20px; padding: 17px; border: 1px solid rgba(91,111,67,.52); background: rgba(255,255,255,.18); text-align: left; }
.interlude-growth[hidden] { display: none; }
.interlude-growth h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; color: #3f5f32; font: 700 1.05rem/1.3 var(--serif); }
.ending .growth-info-button { position: relative; display: grid; flex: 0 0 15px; width: 15px; height: 15px; min-height: 15px; padding: 0; place-items: center; border: 1px solid #6f6a60; border-radius: 50%; color: var(--gold); background: transparent; cursor: help; font: 700 .55rem/1 Georgia,serif; }
.ending .growth-info-button:hover, .ending .growth-info-button:focus-visible, .ending .growth-info-button[aria-expanded="true"] { border-color: var(--gold); color: #fff2c2; outline: 0; background: rgba(203,166,92,.1); }
.interlude-growth > p { margin: 0 0 12px; color: #61584e; font-size: .76rem; line-height: 1.55; }
.growth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(87,64,48,.2); color: #403832; font-size: .76rem; }
.growth-row button, .interlude-actions button { min-height: 34px; padding: 0 10px; border: 1px solid #567049; color: #39522f; background: transparent; cursor: pointer; font-size: .72rem; }
.interlude-actions button:disabled { opacity: .45; cursor: default; }
.growth-row.result { display: block; }
.growth-row.result.success { color: #3f6634; }
.growth-row.result.failure { color: #7d6253; }
.interlude-empty { font-size: .76rem !important; }
.interlude-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.interlude-actions button:first-child { color: white; background: #4f713f; }

.tools-panel { padding-bottom: 12px; }
.sheet-section { margin: 0 16px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.sheet-section:last-child { border-bottom: 0; }
.interaction-card { margin: 0 0 10px; padding: 10px; border: 1px solid rgba(203,166,92,.55); background: rgba(203,166,92,.07); }
.interaction-card[hidden] { display: none; }
.check-panel { margin: 0 0 10px; }
.check-panel > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.check-panel strong { color: var(--gold); font-size: .76rem; }
.check-panel span { color: var(--muted); font-size: .65rem; }
.check-panel p { margin: 6px 0 0; color: #99958d; font-size: .65rem; line-height: 1.45; }
#check-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
#check-list button { min-height: 31px; padding: 0 8px; border: 1px solid #695d48; color: var(--ink); background: #24231f; cursor: pointer; font-size: .68rem; }
#check-list button.selected { border-color: var(--gold); color: #fff2c2; background: rgba(203,166,92,.16); box-shadow: inset 0 0 0 1px rgba(203,166,92,.18); }
.check-roll-result { display: block; margin-top: 8px; padding: 7px 8px; border-left: 2px solid var(--gold); color: #d8d3c8; background: rgba(0,0,0,.18); font-size: .7rem; line-height: 1.45; }
.check-roll-result[hidden] { display: none; }
.check-roll-result.success { border-left-color: #79a96d; color: #a8d39e; }
.check-roll-result.failure { border-left-color: #c75a4d; color: #ee8a7b; }
.interaction-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.interaction-heading strong { color: var(--gold); font-size: .76rem; }
.interaction-heading span { color: var(--muted); font-size: .65rem; }
.opposed-panel > p, .combat-panel > p { margin: 6px 0 9px; color: #99958d; font-size: .65rem; line-height: 1.45; }
#opposed-actions, .combat-controls, .combat-reset-controls, .check-result-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.check-result-actions { margin-top: 8px; }
#opposed-actions button, .combat-controls button, .combat-controls select, .combat-reset-controls button, .check-result-actions button { min-height: 40px; padding: 0 11px; border: 1px solid #695d48; color: var(--ink); background: #24231f; cursor: pointer; font-size: .72rem; }
#opposed-actions .interaction-next, .combat-controls .interaction-next { border-color: #7fa66f; color: #efffe9; background: #405c37; }
.check-result-actions .interaction-next { border-color: #7fa66f; color: #efffe9; background: #405c37; }
.combat-reset-controls { margin: 0 0 9px; }
.combat-reset-controls button { min-height: 34px; color: #d5b56d; background: transparent; }
.combat-controls .combat-primary { border-color: #a68748; color: #fff2c2; background: rgba(203,166,92,.15); }
.combat-controls select[data-combat-weapon] { flex: 1 1 145px; width: auto; min-width: 0; max-width: 220px; height: 42px; padding: 0 34px 0 12px; border-radius: 4px; color: #eee7d8; background-color: #292823; font-size: .75rem; }
.combat-step-heading { flex: 0 0 100%; margin: 0; }
.combat-step-heading { color: #ddd7cb; font: 600 .74rem/1.5 var(--serif); }
.interaction-log { display: block; margin-top: 8px; padding: 8px; border-left: 2px solid var(--gold); color: #d8d3c8; background: rgba(0,0,0,.18); font-size: .69rem; line-height: 1.55; white-space: pre-line; }
.interaction-log[hidden] { display: none; }
.combat-log { display: grid; gap: 5px; margin: 9px 0; }
.combat-log p { margin: 0; padding: 6px 7px; color: #bdb8ae; background: rgba(0,0,0,.16); font: .67rem/1.48 var(--sans); }
.combat-log p.success { border-left: 2px solid #79a96d; color: #a8d39e; }
.combat-log p.failure { border-left: 2px solid #c75a4d; color: #ee8a7b; }
.combat-log-group { overflow: hidden; border-left: 3px solid #b48b34; background: rgba(180,139,52,.11); }
.combat-log-group.success { border-left-color: #79a96d; background: rgba(74,119,62,.16); }
.combat-log-group.failure { border-left-color: #c75a4d; background: rgba(159,55,45,.14); }
.combat-log-group p { padding: 4px 8px; border: 0; color: #d7c9a5; background: transparent; }
.combat-log-group.success p { color: #b9ddb0; }
.combat-log-group.failure p { color: #efb0a5; }
.combat-log-group p:first-child { padding-top: 8px; font-weight: 650; }
.combat-log-group p:last-child { padding-bottom: 8px; }
.combat-log p.combat-round-marker { padding-left: 0; color: #969189; background: transparent; }
.sheet-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sheet-section-heading h2 { margin: 0; font: 600 .95rem/1.3 var(--serif); letter-spacing: .07em; }
.sheet-section-heading > span { color: var(--muted); font-size: .68rem; text-align: right; }
.sheet-section-heading > span.complete { color: #8fbc83; }
.sheet-section-edit { min-height: 27px; padding: 0 9px; border: 1px solid #5b5040; color: var(--gold); background: transparent; cursor: pointer; font: .66rem/1 var(--sans); }
.sheet-section-edit[aria-pressed="true"] { border-color: #6f8a61; color: #b9ddb0; }
.sheet-heading-inline-actions { display: flex; justify-content: flex-end; gap: 6px; }
.sheet-inline-summary { display: block; margin: -4px 0 10px; color: var(--muted); font-size: .68rem; text-align: right; }
.attribute-heading, .skill-heading { align-items: flex-start; }
.attribute-heading h2, .skill-heading h2 { flex: 0 0 auto; white-space: nowrap; }
.game-age-rule { display: grid; max-width: 720px; justify-items: end; color: var(--muted); font-size: .68rem; line-height: 1.5; text-align: right; }
.game-age-rule strong { color: #bdb6aa; font-weight: 600; }
.game-attribute-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.game-attribute-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.game-attribute-total { color: var(--muted); font-size: .7rem; text-align: right; white-space: nowrap; }
.game-attribute-total strong { margin-left: 5px; color: var(--gold); font: 700 .95rem/1 Georgia,serif; }
.sheet-field.wide { display: block; margin-bottom: 10px; }
.sheet-field input, .sheet-field select, .sheet-field textarea { width: 100%; }
.sheet-field textarea { min-height: 78px; resize: vertical; }
.sheet-field small { display: block; margin-top: 5px; color: #827e75; font-size: .62rem; line-height: 1.45; }
.saved-character-mode [data-save]:disabled, .saved-character-mode .attribute-field select:disabled, .saved-character-mode .skill-name select:disabled, .saved-character-mode .skill-name input:disabled, .saved-character-mode .skill-value select:disabled { opacity: 1; border-color: transparent; color: #c9c4ba; background: rgba(255,255,255,.025); cursor: default; -webkit-text-fill-color: #c9c4ba; }
.saved-character-mode .attribute-field select:disabled, .saved-character-mode .skill-value select:disabled { appearance: none; }
.identity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.identity-grid .wide { grid-column: 1 / -1; margin-bottom: 0; }
.identity-layout { display: grid; grid-template-columns: minmax(0,1fr) 124px; gap: 12px; align-items: start; }
.identity-layout .sheet-field { margin: 0; }
.identity-name { grid-column: 1; }
.portrait-field { grid-column: 2; grid-row: 1 / span 3; }
.identity-birthplace, .identity-residence { grid-column: 1 / -1; }
.portrait-field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .72rem; letter-spacing: .05em; }
.portrait-frame { display: grid; width: 124px; aspect-ratio: 3 / 4; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #1c1c19; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait-frame [hidden] { display: none; }
.portrait-frame span { color: #716d65; font-size: .68rem; }
.game-appearance-frame { aspect-ratio: 1; padding: 0; color: inherit; cursor: pointer; }
.game-appearance-frame:hover, .game-appearance-frame:focus-visible { border-color: var(--gold); outline: 1px solid rgba(203,166,92,.25); }
.portrait-actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 7px; }
.portrait-upload-button, .portrait-actions button { display: grid; min-height: 32px; padding: 0 8px; place-items: center; border: 1px solid #5b5040; color: var(--gold); background: transparent; cursor: pointer; font: .64rem/1 var(--sans); }
.portrait-actions button { color: #c88379; }
.portrait-actions button[hidden] { display: none; }
.background-grid, .assets-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.background-grid .wide, .assets-grid .wide { grid-column: 1 / -1; margin-bottom: 0; }
.gear-section > textarea { width: 100%; min-height: 118px; resize: vertical; }
.sheet-hint { margin: 9px 0 0; color: #8d8980; font-size: .7rem; line-height: 1.5; }
.attribute-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.attribute-field { display: grid; grid-template-columns: minmax(0,1fr) 52px 50px; align-items: center; min-height: 66px; padding: 8px; border: 1px solid var(--line); background: #1c1c19; }
.attribute-field.highlighted, .derived-field.highlighted, .skill-row.highlighted { border-color: var(--gold); background: rgba(203,166,92,.12); box-shadow: inset 0 0 0 1px rgba(203,166,92,.25); }
.attribute-field > span { color: #bbb7ae; font-size: .7rem; }
.attribute-code-line { display: flex; align-items: center; gap: 5px; }
.attribute-field b { display: inline; color: var(--ink); font-size: .82rem; letter-spacing: .07em; }
.attribute-full-label { display: block; margin-top: 2px; }
.attribute-info-button { position: relative; display: grid; flex: 0 0 15px; width: 15px; height: 15px; min-height: 15px; padding: 0; place-items: center; border: 1px solid #6f6a60; border-radius: 50%; color: var(--gold); background: transparent; cursor: help; font: 700 .55rem/1 Georgia,serif; }
.attribute-info-button::before, .growth-info-button::before { position: absolute; inset: -5px; content: ""; }
.attribute-field select { position: relative; left: 3px; grid-column: 2; width: calc(100% - 3px); min-height: 46px; padding: 0 3px; color: white; font: 700 1.05rem/1 Georgia,serif; text-align: center; }
.attribute-field input[data-attribute] { position: relative; left: 3px; grid-column: 2; width: calc(100% - 3px); min-height: 46px; padding: 0 3px; color: white; font: 700 1.05rem/1 Georgia,serif; text-align: center; }
.attribute-field small { grid-column: 3; color: #77736b; font-size: .66rem; text-align: right; }
.attribute-field small output { color: var(--gold); }
.derived-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.derived-field { display: grid; align-content: space-between; min-height: 92px; padding: 8px; border: 1px solid var(--line); background: #1c1c19; }
.derived-field > .derived-title { display: flex; align-items: center; gap: 5px; }
.derived-title .attribute-info-button { display: grid; width: 15px; height: 15px; min-height: 15px; margin: 0; padding: 0; }
.derived-field input { width: 100%; height: 36px; padding: 0 4px; font: 700 1.05rem/1 Georgia,serif; text-align: center; }
.derived-field small { color: #77736b; font-size: .62rem; }
.derived-field > button { min-height: 27px; border: 1px solid #5b5040; color: var(--gold); background: transparent; cursor: pointer; font-size: .62rem; }
.derived-field.readout output { color: var(--ember-bright); font: 700 1.15rem/1.2 Georgia,serif; }
.derived-field.readout strong { color: var(--ember-bright); font: 700 1.15rem/1.2 Georgia,serif; text-align: center; }
.game-status-field { gap: 8px; }
.game-status-field label { display: grid; grid-template-columns: 68px minmax(0,1fr); align-items: center; gap: 7px; color: var(--muted); font-size: .65rem; }
.game-status-label { display: flex; align-items: center; gap: 5px; }
.game-status-label .mental-status-label { min-width: 0; line-height: 1.25; word-break: keep-all; }
.game-status-field select { width: 100%; min-height: 31px; padding: 0 5px; color: #c9c4ba; font-size: .65rem; }
.skill-pool-summary { display: grid; justify-items: end; gap: 2px; line-height: 1.35; }
.skill-pool-summary > span { display: block; }
.skill-pool-summary strong { margin-left: 5px; color: var(--gold); }
.occupation-summary { margin: -8px 0 10px; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.occupation-summary strong { color: var(--gold); }
.skill-validation { min-height: 18px; margin-bottom: 7px; color: #8cae86; font-size: .66rem; }
.skill-validation.warning { color: #d58c7d; }

.skill-head, .skill-row { display: grid; grid-template-columns: 32px minmax(88px,1fr) 112px 52px 36px 36px; gap: 5px; align-items: center; }
.skill-head { padding: 0 7px 6px; color: #77736b; font-size: .62rem; text-align: center; }
.skill-head span:nth-child(2) { text-align: left; }
.skill-row { min-height: 52px; padding: 7px; border-top: 1px solid #302f2b; background: #1b1b18; }
.skill-row.fixed, .skill-row.professional { border-left: 2px solid var(--ember); }
.skill-row.interest { border-left: 2px solid var(--gold); }
.skill-row.era-disabled { opacity: .42; }
.growth-check { width: 17px; height: 17px; margin: auto; accent-color: var(--ember); }
.skill-name { min-width: 0; }
.skill-name-heading { display: flex; align-items: center; gap: 5px; min-width: 0; }
.skill-name-heading strong { display: block; overflow: hidden; min-width: 0; color: #ccc8bf; font-size: .72rem; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.skill-info-button { position: relative; display: grid; flex: 0 0 15px; width: 15px; height: 15px; min-height: 15px; padding: 0; place-items: center; border: 1px solid #6f6a60; border-radius: 50%; color: var(--gold); background: transparent; cursor: help; font: 700 .55rem/1 Georgia,serif; }
.skill-info-button::before { position: absolute; inset: -5px; content: ""; }
.skill-info-button:hover, .skill-info-button:focus-visible, .skill-info-button[aria-expanded="true"] { border-color: var(--gold); color: #fff2c2; outline: 0; background: rgba(203,166,92,.1); }
.skill-name select, .skill-name .skill-specialization-input { width: 100%; min-height: 27px; margin-top: 4px; padding: 0 3px; color: #aaa69d; font-size: .62rem; }
.skill-name .skill-specialization-custom { width: 100%; height: 30px; margin-top: 4px; padding: 0 6px; color: #ccc8bf; font-size: .66rem; }
.skill-roles { display: grid; justify-content: center; gap: 5px; }
.skill-category-line { display: grid; grid-template-columns: max-content 38px; align-items: center; justify-content: center; gap: 5px; min-height: 27px; }
.skill-roles label { display: inline-flex; align-items: center; gap: 2px; color: #918d84; font-size: .61rem; white-space: nowrap; }
.skill-roles input { width: 14px; height: 14px; accent-color: var(--ember); }
.skill-roles input:disabled { opacity: .35; }
.skill-roles .allocation-input { width: 38px; min-width: 0; height: 27px; padding: 0 3px; color: white; text-align: center; }
.role-badge { padding: 3px 6px; border: 1px solid rgba(180,31,39,.55); color: #e18c7e; font-size: .62rem; }
.role-badge.interest { border-color: rgba(203,166,92,.72); color: #e8c978; }
.role-badge.locked { border-color: #595750; color: #817e76; }
.skill-row.skill-cap-warning { box-shadow: inset 2px 0 #9f665b; }
.skill-value { text-align: center; }
.skill-value select { min-height: 33px; padding: 0 3px; font-size: .7rem; }
.skill-value input { width: 100%; height: 33px; padding: 0 3px; text-align: center; }
.skill-value .skill-final-value[readonly] { color: var(--gold); background: #171714; }
.skill-value output { color: var(--gold); font: 700 .9rem/1 Georgia,serif; }
.skill-fraction { color: #9a958a; font-size: .7rem; text-align: center; }
.game-weapon-table-wrap { overflow-x: auto; }
.game-weapon-table { width: 100%; min-width: 620px; table-layout: fixed; border-collapse: collapse; }
.game-weapon-name-column { width: 150px; }
.game-weapon-value-column { width: 42px; }
.game-weapon-damage-column { width: 68px; }
.game-weapon-range-column { width: 64px; }
.game-weapon-ammo-column { width: 54px; }
.game-weapon-malfunction-column { width: 48px; }
.game-weapon-table th { padding: 7px 4px; color: #77736b; font-size: .6rem; font-weight: 500; text-align: left; }
.game-weapon-table td { padding: 4px; border-top: 1px solid #302f2b; }
.game-weapon-table input { width: 100%; height: 34px; padding: 0 5px; color: #c9c4ba; font-size: .64rem; }
.game-weapon-table td:first-child input { font-size: .62rem; }
.game-weapon-table input[readonly] { color: var(--gold); background: #171714; cursor: default; }
.game-weapon-table td:not(:first-child) input { text-align: center; }
.notes-section textarea { min-height: 118px; }
.map-clue { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 9px; border: 1px solid #5b5040; background: rgba(203,166,92,.07); }
.map-clue[hidden] { display: none; }
.map-clue span { color: var(--gold); font-size: .68rem; }
.map-clue button { padding: 7px 9px; border: 1px solid var(--gold); color: var(--ink); background: transparent; cursor: pointer; font-size: .68rem; }

.map-dialog { width: min(1100px,calc(100vw - 30px)); max-width: none; max-height: calc(100vh - 30px); padding: 0; overflow: auto; border: 1px solid #4b463d; color: var(--ink); background: #141412; box-shadow: 0 30px 120px rgba(0,0,0,.72); }
.map-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(4px); }
.map-dialog header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #151513; }
.map-dialog h2 { margin: 0; font: 600 1.05rem/1.3 var(--serif); }
.map-dialog header button { padding: 7px 11px; border: 1px solid var(--line); color: var(--ink); background: #24231f; cursor: pointer; }
.map-dialog img { display: block; width: 100%; height: auto; background: white; }
.character-library-dialog { width: min(620px,calc(100vw - 30px)); max-width: none; max-height: calc(100vh - 30px); padding: 0; overflow: auto; border: 1px solid #4b463d; color: var(--ink); background: #141412; box-shadow: 0 30px 120px rgba(0,0,0,.72); }
.character-library-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(4px); }
.character-library-dialog > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #151513; }
.character-library-dialog h2 { margin: 0; font: 600 1.1rem/1.3 var(--serif); }
.character-library-dialog header p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }
.character-library-dialog header button, .saved-character-card button { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); color: var(--ink); background: #24231f; cursor: pointer; }
.saved-character-list { display: grid; gap: 8px; padding: 16px 18px 18px; }
.saved-character-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); background: #1b1b18; }
.saved-character-card strong, .saved-character-card small { display: block; }
.saved-character-card strong { margin-bottom: 4px; color: #d6d1c7; font: 600 .82rem/1.3 var(--serif); }
.saved-character-card small, .saved-character-empty { color: var(--muted); font-size: .68rem; }
.saved-character-card > div:last-child { display: flex; flex: 0 0 auto; gap: 6px; }
.saved-character-card .delete-character { border-color: #74423e; color: #e18c7e; }
.character-creation-dialog { width: min(600px,calc(100vw - 30px)); max-width: none; padding: 0; border: 1px solid #665944; color: var(--ink); background: #171715; box-shadow: 0 30px 120px rgba(0,0,0,.72); }
.character-creation-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(4px); }
.character-creation-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.character-creation-dialog header span { color: var(--ember-bright); font-size: .6rem; letter-spacing: .16em; }
.character-creation-dialog h2 { margin: 3px 0 0; font: 600 1.18rem/1.3 var(--serif); }
.character-creation-dialog header button { width: 36px; min-height: 36px; padding: 0; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font-size: 1.1rem; }
.character-creation-dialog > p { margin: 16px 18px 0; color: var(--muted); font-size: .76rem; }
.character-creation-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 14px 18px 18px; }
.character-creation-options > button { min-height: 112px; padding: 16px; border: 1px solid #5b5141; color: var(--ink); background: #22211d; cursor: pointer; text-align: left; }
.character-creation-options > button:hover, .character-creation-options > button:focus-visible { border-color: var(--ember-bright); background: #2a261e; }
.character-creation-options strong, .character-creation-options small { display: block; }
.character-creation-options strong { margin-bottom: 8px; color: #e5d3a5; font: 600 .92rem/1.35 var(--serif); }
.character-creation-options small { color: var(--muted); font-size: .7rem; line-height: 1.65; }
.history-dialog { width: min(760px,calc(100vw - 30px)); max-width: none; max-height: calc(100vh - 30px); padding: 0; overflow: auto; border: 1px solid #4b463d; color: var(--ink); background: #141412; box-shadow: 0 30px 120px rgba(0,0,0,.72); }
.history-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(4px); }
.history-dialog > header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #151513; }
.history-dialog h2 { margin: 0; font: 600 1.1rem/1.3 var(--serif); }
.history-dialog header button { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); color: var(--ink); background: #24231f; cursor: pointer; }
.full-history-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(68px,1fr)); align-items: center; gap: 8px 0; margin: 0; padding: 18px; list-style: none; }
.full-history-list li { position: relative; display: grid; height: 32px; place-items: center; }
.full-history-list li:not(:last-child)::after { position: absolute; top: 0; right: 0; display: grid; width: 24px; height: 32px; place-items: center; content: "→"; color: #77736b; font: 400 .82rem/1 var(--serif); transform: translateX(50%); }
.full-history-list button { width: 44px; height: 32px; padding: 0 4px; border: 0; border-radius: 3px; color: var(--gold); background: transparent; cursor: pointer; font: 600 .9rem/1 var(--serif); text-align: center; }
.full-history-list button:hover { color: #fff2c2; background: rgba(203,166,92,.1); }
.full-history-list button:disabled { color: #b8cdb1; background: rgba(91,111,67,.14); cursor: default; }
.full-history-empty { padding: 24px 0; color: var(--muted); text-align: center; font-size: .78rem; }
.game-appearance-dialog { width: min(760px,calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 30px); padding: 0; overflow: auto; border: 1px solid #665944; color: var(--ink); background: #171715; box-shadow: 0 20px 80px rgba(0,0,0,.75); }
.game-appearance-dialog::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(3px); }
.game-appearance-dialog > div { padding: 18px; }
.game-appearance-dialog header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 14px; }
.game-appearance-dialog header span { color: var(--ember-bright); font-size: .6rem; letter-spacing: .16em; }
.game-appearance-dialog h2 { margin: 4px 0 0; font: 600 1.25rem/1.2 var(--serif); }
.game-appearance-dialog header button { width: 36px; min-height: 36px; padding: 0; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font-size: 1.1rem; }
.game-appearance-file-actions { display: flex; gap: 8px; margin: 0 0 14px; }
.game-appearance-file-actions button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); color: var(--ink); background: #24231f; cursor: pointer; }
.game-appearance-file-actions button:first-child { border-color: #80683d; color: #f0dba7; }
.game-avatar-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.game-avatar-option { padding: 0; overflow: hidden; border: 1px solid var(--line); color: #aaa59b; background: #1e1e1a; cursor: pointer; }
.game-avatar-option:hover, .game-avatar-option:focus-visible { border-color: var(--gold); outline: 0; }
.game-avatar-option .game-avatar-crop { height: auto; aspect-ratio: 1; }
.player-name-dialog { width: min(430px,calc(100vw - 28px)); max-width: none; padding: 0; overflow: hidden; border: 1px solid #4b463d; border-top: 2px solid var(--ember); color: var(--ink); background: #171715; box-shadow: 0 30px 120px rgba(0,0,0,.78); }
.player-name-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(5px); }
.player-name-dialog form { padding: 30px 28px 26px; }
.dialog-eyebrow { color: var(--ember-bright); font-size: .7rem; letter-spacing: .18em; }
.player-name-dialog h2 { margin: 9px 0 8px; font: 600 1.35rem/1.4 var(--serif); letter-spacing: .05em; }
.player-name-dialog form > p:not(.player-name-error) { margin: 0 0 19px; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.player-name-dialog label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .74rem; }
.player-name-dialog input + label { margin-top: 13px; }
.player-name-dialog input { width: 100%; font-size: 16px; }
.player-name-error { min-height: 20px; margin: 7px 0 5px; color: #ee7a65; font-size: .72rem; }
.player-name-dialog form > div:last-child { display: flex; gap: 8px; }
.player-name-dialog form > div:last-child button { min-height: 42px; padding: 0 15px; cursor: pointer; }
.sync-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0 12px; padding: 3px; border: 1px solid var(--line); background: #10100f; }
.sync-mode-switch button { min-height: 36px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: .76rem; }
.sync-mode-switch button[aria-selected="true"] { color: #fff2c2; background: var(--ember-dim); box-shadow: inset 0 -2px var(--ember-bright); }
.player-name-submit { flex: 1; border: 0; color: white; background: var(--ember); }
.player-name-cancel { border: 1px solid var(--line); color: var(--muted); background: transparent; }
.skill-tooltip, .attribute-tooltip { position: fixed; z-index: 70; width: min(390px,calc(100vw - 24px)); max-height: min(60vh,440px); padding: 12px 13px; overflow: auto; border: 1px solid #665944; color: #d6d1c7; background: #1b1a18; box-shadow: 0 12px 34px rgba(0,0,0,.48); font: .75rem/1.58 var(--serif); pointer-events: auto; }
.skill-tooltip[hidden], .attribute-tooltip[hidden] { display: none; }
.skill-tooltip strong, .attribute-tooltip strong { display: block; margin-bottom: 8px; color: var(--gold); font: 700 .82rem/1.35 Georgia,serif; letter-spacing: .025em; }
.skill-tooltip p, .attribute-tooltip p { margin: 0; color: #d0cbc1; white-space: pre-line; }
.skill-tooltip small { display: block; margin-top: 8px; padding: 0; border: 0; color: #d0cbc1; background: transparent; font: inherit; white-space: pre-line; }
.ending-codex-dialog { width: min(980px,calc(100vw - 30px)); max-width: none; max-height: calc(100vh - 30px); padding: 0; overflow: auto; border: 1px solid #4b463d; color: var(--ink); background: #141412; box-shadow: 0 30px 120px rgba(0,0,0,.72); }
.ending-codex-dialog::backdrop { background: rgba(0,0,0,.8); backdrop-filter: blur(4px); }
.ending-codex-dialog > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #151513; }
.ending-codex-dialog h2 { margin: 0; font: 600 1.1rem/1.3 var(--serif); }
.ending-codex-dialog header p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }
.ending-codex-dialog header button { padding: 7px 11px; border: 1px solid var(--line); color: var(--ink); background: #24231f; cursor: pointer; }
.ending-codex-dialog > footer { padding: 12px 18px 18px; text-align: right; }
.ending-codex-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 16px 18px; }
.ending-codex-grid details { overflow: hidden; }
.ending-card, .ending-codex-grid details, .ending-codex-grid > div { border: 1px solid var(--line); background: #1b1b18; }
.ending-codex-grid summary { min-height: 138px; padding: 13px; cursor: pointer; list-style: none; }
.ending-codex-grid summary::-webkit-details-marker { display: none; }
.ending-codex-grid summary span, .ending-codex-grid > div span { display: block; color: #938f86; font-size: .65rem; letter-spacing: .08em; }
.ending-codex-grid summary strong, .ending-codex-grid > div strong { display: block; margin: 10px 0 6px; color: #d6d1c7; font: 600 .94rem/1.3 var(--serif); }
.ending-codex-grid summary small { color: #8f8b82; font-size: .7rem; line-height: 1.5; }
.ending-codex-grid .death { border-color: rgba(180,54,60,.72); background: rgba(143,20,27,.14); }
.ending-codex-grid .death summary strong { color: #e08d91; }
.ending-codex-grid .good { border-color: rgba(104,143,99,.72); background: rgba(91,111,67,.16); }
.ending-codex-grid .good summary strong { color: #9fc394; }
.ending-codex-grid .mixed { border-color: rgba(203,166,92,.72); background: rgba(203,166,92,.14); }
.ending-codex-grid .mixed summary strong { color: #d7b96f; }
.ending-codex-grid > div { min-height: 138px; padding: 13px; opacity: .52; }
.ending-codex-grid > div strong { color: #77746c; }
.ending-codex-grid > div small { color: #66635d; font-size: .68rem; }
.ending-full-text { padding: 0 13px 13px; }
.ending-full-text p { color: #aaa69c; font: .75rem/1.65 var(--serif); }
.icon-button { min-height: 38px; padding: 0 11px; border: 1px solid var(--line); color: var(--ink); background: var(--paper); }
.mobile-only { display: none; }
.scrim { position: fixed; z-index: 24; inset: 0; background: rgba(0,0,0,.68); }
.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; max-width: min(360px,calc(100vw - 44px)); padding: 11px 15px; border-left: 3px solid var(--ember-bright); color: var(--ink); background: #242321; box-shadow: 0 12px 36px rgba(0,0,0,.35); opacity: 0; transform: translateY(8px); pointer-events: none; transition: 160ms ease; font-size: .83rem; }
.toast.show { opacity: 1; transform: none; }

@media (min-width: 1500px) {
  .game-layout { grid-template-columns: minmax(230px,260px) minmax(560px,1fr) minmax(390px,440px); width: min(1840px,calc(100% - 28px)); }
}

@media (max-width: 1220px) {
  .game-layout { z-index: auto; grid-template-columns: minmax(190px,230px) minmax(430px,1fr); }
  .tools-panel { position: fixed; z-index: 30; top: 76px; right: 0; width: min(430px,92vw); max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); height: calc(100vh - 76px); height: calc(100dvh - 76px); padding-top: 0; padding-bottom: max(18px,env(safe-area-inset-bottom)); border-top: 0; border-left: 1px solid var(--line); background: #171715; transform: translateX(105%); transition: transform 180ms ease; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .tools-panel.open { transform: none; }
  .mobile-only#toggle-tools { display: inline-block; }
}
@media (max-width: 900px) {
  .skill-name .skill-specialization-input, .skill-name .skill-specialization-custom { font-size: 16px; }
  .game-appearance-dialog { position: fixed; box-sizing: border-box; inset: max(8px,env(safe-area-inset-top)) auto auto 50%; width: calc(100vw - max(20px,env(safe-area-inset-left) + env(safe-area-inset-right))); height: calc(100vh - max(16px,env(safe-area-inset-top) + env(safe-area-inset-bottom))); height: calc(100dvh - max(16px,env(safe-area-inset-top) + env(safe-area-inset-bottom))); max-height: none; margin: 0; overflow: hidden; transform: translateX(-50%); }
  .game-appearance-dialog > div { display: grid; grid-template-rows: auto auto minmax(0,1fr); height: 100%; padding: 0 14px max(14px,env(safe-area-inset-bottom)); }
  .game-appearance-dialog header { z-index: 2; margin: 0 -14px 12px; padding: 14px; border-bottom: 1px solid var(--line); background: #171715; }
  .game-avatar-options { min-height: 0; padding-bottom: 4px; overflow-x: hidden; overflow-y: auto; grid-auto-rows: max-content; align-content: start; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .game-avatar-option { min-height: max-content; }
  .mobile-only { display: inline-block; }
  .mobile-panel-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; padding: 3px; border: 1px solid #36332d; background: #11110f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.015); }
  .mobile-panel-tabs .icon-button { min-height: 34px; padding: 0 10px; border: 0; color: #aaa69c; background: transparent; font-size: .8rem; letter-spacing: .08em; }
  .mobile-panel-tabs .icon-button + .icon-button { border-left: 1px solid #36332d; }
  .mobile-panel-tabs .icon-button[aria-expanded="true"] { color: #f1dfb8; background: var(--ember-dim); box-shadow: inset 0 -2px var(--ember-bright); }
  .game-layout { display: block; width: min(100% - 20px,700px); padding: 6px 0 max(21px,env(safe-area-inset-bottom)); }
  .left-rail { position: static; display: block; max-height: none; overflow: visible; }
  .reader-card { min-height: calc(100vh - 126px); min-height: calc(100dvh - 126px); padding: 28px 24px 42px; }
  .reader-card::before { inset: 6px; }
  .story-copy { font-size: 1rem; line-height: 1.9; }
  .story-copy p { text-align: left; }
  .left-rail .dice-panel, .left-rail .navigation-panel, .left-rail .clues-panel, .tools-panel { position: fixed; z-index: 30; top: calc(106px + env(safe-area-inset-top)); width: min(430px,92vw); max-height: calc(100vh - 106px - env(safe-area-inset-top)); max-height: calc(100dvh - 106px - env(safe-area-inset-top)); height: calc(100vh - 106px - env(safe-area-inset-top)); height: calc(100dvh - 106px - env(safe-area-inset-top)); min-height: 0; padding-top: 0; padding-bottom: max(18px,env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; border-top: 0; background: #171715; transition: transform 180ms ease; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
  .dice-panel, .navigation-panel, .clues-panel { left: 0; border-right: 1px solid var(--line); transform: translateX(-105%); }
  .tools-panel { right: 0; border-left: 1px solid var(--line); transform: translateX(105%); }
  .dice-panel.open, .navigation-panel.open, .clues-panel.open, .tools-panel.open { transform: none; }
  .map-dialog, .ending-codex-dialog, .character-library-dialog, .character-creation-dialog, .history-dialog { width: calc(100vw - max(20px,env(safe-area-inset-left) + env(safe-area-inset-right))); max-height: calc(100vh - 20px); max-height: calc(100dvh - max(20px,env(safe-area-inset-top) + env(safe-area-inset-bottom))); }
  .community-dialog { width: min(620px,calc(100% - 16px)); max-height: calc(100vh - 20px); max-height: calc(100dvh - max(20px,env(safe-area-inset-top) + env(safe-area-inset-bottom))); }
  .character-creation-options { grid-template-columns: 1fr; }
  .map-dialog img { touch-action: pan-x pan-y pinch-zoom; }
  .toast { right: max(14px,env(safe-area-inset-right)); bottom: max(14px,env(safe-area-inset-bottom)); max-width: calc(100vw - max(28px,env(safe-area-inset-left) + env(safe-area-inset-right) + 20px)); }
  .identity-grid .sheet-field input, .identity-grid .sheet-field select, .identity-layout .sheet-field input, .identity-layout .sheet-field select { height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 430px) {
  .community-announcement-card { padding: 24px 20px 22px; }
  .community-announcement-card h2 { font-size: 1.3rem; }
  .community-announcement-card ol { font-size: .82rem; }
  .community-list-view, .community-compose-view, .community-detail-view { padding: 15px; }
  .community-dialog-header { padding: 14px 15px; }
  .community-intro { align-items: stretch; flex-direction: column; gap: 11px; }
  .community-intro > div { display: grid; grid-template-columns: 1fr auto; }
  .community-form-row { grid-template-columns: 1fr; }
  .community-question-top { align-items: flex-start; }
  .player-name-dialog form { padding: 25px 20px 22px; }
  .left-rail .dice-panel, .left-rail .navigation-panel, .left-rail .clues-panel, .tools-panel { width: min(360px,calc(100vw - 42px)); }
  .scrim { background: rgba(0,0,0,.5); }
  .mobile-panel-tabs .icon-button { padding: 0 8px; font-size: .78rem; }
  .reader-card { padding: 24px 18px 36px; }
  .story-copy { line-height: 1.82; }
  .choice-button { grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 12px; }
  .ending { padding: 21px 16px; }
  .ending-actions { flex-direction: column; }
  .ending-actions button { min-height: 44px; }
  .attribute-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .identity-layout { grid-template-columns: minmax(0,1fr) 92px; gap: 8px 10px; }
  .portrait-field { display: block; grid-column: 2; grid-row: 1 / span 3; }
  .portrait-field > span { margin-bottom: 7px; }
  .portrait-frame { width: 92px; }
  .portrait-actions { grid-template-columns: 1fr; margin-top: 0; }
  .background-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .assets-grid { grid-template-columns: 1fr; }
  .game-avatar-options { grid-template-columns: repeat(2,1fr); }
  .background-grid .wide { grid-column: 1 / -1; }
  .assets-grid .wide { grid-column: auto; }
  .attribute-field { grid-template-columns: minmax(0,1fr) 51px 40px; padding: 6px; }
  .game-status-field label { grid-template-columns: 52px minmax(0,1fr); gap: 5px; }
  .game-status-label .mental-status-label { flex: 0 0 2em; }
  .saved-character-card { align-items: stretch; flex-direction: column; }
  .saved-character-card > div:last-child button { flex: 1; }
  .skill-head, .skill-row { grid-template-columns: 22px minmax(51px,1fr) 72px 46px 25px 25px; gap: 3px; }
  .ending-codex-grid { grid-template-columns: 1fr; }
  .skill-category-line { grid-template-columns: max-content 29px; gap: 3px; }
  .skill-roles .allocation-input { width: 29px; height: 25px; }
}
@media (pointer: coarse) {
  .icon-button, .dice-buttons button, #check-list button, .check-result-actions button, .custom-dice-tile button, .ending-codex-button, .roll-sound-choice button, .status-change-row button, .status-navigation-row button, .map-clue button, .map-dialog header button, .ending-codex-dialog header button, .character-library-dialog header button, .history-dialog header button, .saved-character-card button, #opposed-actions button, .combat-controls button, .combat-reset-controls button, .sheet-section-edit, .community-dialog button, .community-announcement-dialog button { min-height: 44px; }
  .jump-form input, .jump-form button { height: 40px; min-height: 40px; }
  .custom-dice-tile input { padding-bottom: 2px; line-height: 1; }
  .skill-info-button { width: 15px; height: 15px; min-height: 15px; flex-basis: 15px; cursor: pointer; font-size: .55rem; }
  .attribute-info-button { width: 15px; height: 15px; min-height: 15px; cursor: pointer; }
  input:not([type="checkbox"]), select, textarea { font-size: 16px; }
  .skill-roles label { min-height: 34px; padding: 4px 0; }
  .choice-button:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }
@media print {
  .topbar,.side-panel,.choices,.source-link,.ember-glow,.map-dialog { display: none !important; }
  body { color: black; background: white; }
  .game-layout { display: block; width: 100%; padding: 0; }
  .reader-card { min-height: 0; border: 0; box-shadow: none; background: white; }
}