/* Theme tokens, layout, components, dialogs, then responsive overrides. */
:root {
  --ink:#30372f;
  --muted:#797a6c;
  --paper:#f5f0e4;
  --line:#d9d3c2;
  --red:#843e32;
  --green:#536b54;
  --gold:#a68b4d;
  --serif:'Noto Serif Thai',Georgia,serif;
  --sans:'Noto Sans Thai',Tahoma,sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  color:var(--ink);
  font:16px/1.7 var(--sans);
  background:#e9e5d9;
  background-image:radial-gradient(#85775e0d .8px,transparent .8px);
  background-size:5px 5px;
}

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

button {
  cursor:pointer;
  transition:background .18s,transform .18s,color .18s;
}

button:disabled {
  opacity:.4;
  cursor:not-allowed;
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #bd8c46;
  outline-offset:3px;
}

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

[hidden] {
  display:none!important;
}

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

a {
  color:inherit;
}

h1,h2,h3 {
  font-family:var(--serif);
  font-weight:600;
}

.masthead {
  min-height:99px;
  padding:20px 4%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f5f1e7;
  border-bottom:1px solid var(--line);
}

.brand {
  display:flex;
  align-items:center;
  gap:15px;
  text-decoration:none;
}

.brand-seal {
  width:49px;
  height:54px;
  display:grid;
  place-items:center;
  font-size:37px;
  color:var(--red);
  border:1px solid var(--red);
  clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
}

.brand strong {
  display:block;
  font-family:var(--serif);
  font-size:26px;
  line-height:1.6;
}

.eyebrow {
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:2.2px;
  font-weight:600;
}

.brand .eyebrow {
  color:var(--red);
  font-size:11px;
  letter-spacing:3.5px;
}

.header-note {
  color:#777766;
  font-family:var(--serif);
  font-size:15px;
  display:flex;
  gap:17px;
  align-items:center;
}

.small-star {
  font-size:26px;
  color:var(--gold);
}

.edition {
  padding-left:20px;
  border-left:1px solid var(--line);
  font-family:var(--sans);
  font-size:13px;
}

.toolbar {
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap;
  background:#252e29;
  color:#c9cbbc;
  padding:12px 4%;
  min-height:64px;
  box-shadow:0 3px 10px #0001;
}

.speed-control,.toolbar-utilities {
  display:flex;
  gap:4px;
  align-items:center;
}

.tool-button {
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  border-radius:3px;
  padding:7px 10px;
  font-size:14px;
  white-space:nowrap;
}

.tool-button:hover:not(:disabled) {
  background:#ffffff12;
  color:#fff;
}

.tool-button[aria-pressed=true] {
  background:#d8cba8;
  color:#272f27;
  border-color:#e3d4ad;
}

.forward {
  border-left:1px solid #546052;
  padding-left:20px;
  color:#e0d2ae;
}

.forward span {
  margin-left:10px;
}

.toolbar-utilities {
  margin-left:auto;
  gap:8px;
}

.toolbar-utilities .tool-button {
  border:1px solid #535c4f;
}

.page-shell {
  max-width:1536px;
  margin:auto;
  padding:31px 4% 0;
}

.chapter-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:25px;
  gap:20px;
}

.chapter-heading .eyebrow {
  color:var(--muted);
  font-size:11px;
  letter-spacing:2.5px;
  margin-bottom:6px;
}

h1 {
  font-size:26px;
}

.world-year {
  font-size:13px;
  color:var(--muted);
  padding-bottom:5px;
}

.game-layout {
  display:grid;
  grid-template-columns:246px minmax(0,1fr) 264px;
  gap:22px;
  align-items:start;
}

.panel {
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 3px 7px #51432b04;
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding:16px 19px;
}

.panel-heading h2 {
  font-size:17px;
}

.panel-heading .eyebrow {
  font-size:10px;
  letter-spacing:1.3px;
  color:var(--muted);
}

.portrait {
  width:124px;
  height:132px;
  background:radial-gradient(ellipse at center,#d3d3bd 0,#dcdcc7 49%,#e9e5d5 50%);
  margin:23px auto 12px;
  position:relative;
  border-radius:60px 60px 3px 3px;
  border:1px solid #c9c9b4;
  overflow:hidden;
}

.portrait svg {
  position:absolute;
  width:130px;
  height:130px;
  bottom:0;
  left:-3px;
}

.portrait-ring {
  position:absolute;
  inset:9px;
  border:1px solid #aaa98b;
  border-radius:50% 50% 0 0;
}

.portrait-symbol {
  position:absolute;
  right:10px;
  top:6px;
  color:#7c825f;
  font-size:24px;
}

.character-panel h3 {
  text-align:center;
  font-size:22px;
  padding:0 12px;
  overflow-wrap:anywhere;
}

.muted {
  color:var(--muted);
  font-size:14px;
}

.centered {
  text-align:center;
}

.title-badge {
  font-size:13px;
  display:table;
  margin:12px auto 18px;
  padding:4px 12px;
  border:1px solid #d5c49e;
  background:#e8dfc54f;
  color:#7b663a;
  border-radius:2px;
}

.vitals {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 18px 17px;
  padding:12px 0;
}

.vitals>div {
  text-align:center;
  border-right:1px solid var(--line);
}

.vitals>div:last-child {
  border:0;
}

.vitals span {
  font-size:12px;
  color:var(--muted);
  display:block;
}

.vitals strong {
  font-family:Georgia,serif;
  font-size:26px;
  font-weight:400;
  display:block;
}

.vitals b {
  font-weight:400;
}

.vitals small {
  font:12px var(--sans);
}

.meter-label {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  margin:9px 19px 5px;
}

.meter-label strong {
  font-size:12px;
  font-weight:500;
}

progress {
  appearance:none;
  display:block;
  width:calc(100% - 38px);
  height:5px;
  margin:0 19px 16px;
  border:0;
  background:#dedccc;
  border-radius:4px;
  overflow:hidden;
}

progress::-webkit-progress-bar {
  background:#dedccc;
}

progress::-webkit-progress-value {
  background:var(--green);
  transition:width .4s;
}

progress::-moz-progress-bar {
  background:var(--green);
}

.evil-meter::-webkit-progress-value {
  background:var(--red);
}

.evil-meter::-moz-progress-bar {
  background:var(--red);
}

.section-rule {
  display:flex;
  align-items:center;
  gap:8px;
  margin:20px 19px 12px;
  color:var(--muted);
  font-size:12px;
}

.section-rule:before,.section-rule:after {
  content:'';
  height:1px;
  background:var(--line);
  flex:1;
}

.ability-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:0 18px 14px;
}

.ability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.ability { min-width:0; padding:12px 6px 10px; background:linear-gradient(145deg,#faf5e7,#e9e4d4); border-radius:7px; }
.ability .stat-icon { display:block; font-size:24px; line-height:1.4; }
.ability .stat-name { display:block; font:11px var(--sans); letter-spacing:0; min-height:20px; }
.ability .stat-detail { display:block; font:10px var(--sans); line-height:1.8; min-height:32px; margin-top:5px; }
.ability .stat-progress { display:block; width:100%; height:6px; margin:8px 0 0; accent-color:#747e53; border:0; border-radius:10px; overflow:hidden; }
.ability .stat-progress::-webkit-progress-bar { background:#d9d3c2; border-radius:10px; }
.ability .stat-progress::-webkit-progress-value { background:linear-gradient(90deg,#586845,#a2ad74); border-radius:10px; transition:width .3s ease; }
.ability .stat-progress::-moz-progress-bar { background:#747e53; border-radius:10px; }
.stat-summary { padding:0 16px 12px; text-align:center; line-height:1.9; }
.chronicle-intro { flex-wrap:wrap; gap:8px; }
.class-selection { max-width:680px; }
.class-selection .choice-button { border-left:4px solid var(--green); }
.class-selection .choice-button.legendary { border:2px solid var(--gold); background:linear-gradient(120deg,#fff5d2,#e6dbb7); }
.class-selection .choice-button.legendary strong { color:#795c14; }

.ability {
  border:1px solid var(--line);
  text-align:center;
  padding:6px 2px;
  background:#eeeadd80;
}

.ability span {
  font-size:11px;
  letter-spacing:1px;
  color:var(--muted);
  display:block;
}

.ability strong {
  font:25px/1.4 Georgia,serif;
  display:block;
}

.ability small {
  font-size:12px;
  color:var(--green);
}

.tiny {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
}

.character-panel>.tiny {
  padding:0 8px 16px;
}

.fate-panel {
  margin-top:18px;
}

.fate-panel .panel-heading {
  margin-bottom:14px;
}

.renown-row {
  display:flex;
  justify-content:space-between;
  margin:0 19px;
  padding:11px 0;
  border-top:1px solid var(--line);
  font-size:14px;
  color:#806c3d;
}

.fate-panel>p {
  padding:0 19px 17px;
}

.chronicle-panel {
  min-width:0;
  min-height:720px;
}

.status {
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:6px;
  align-items:center;
}

.status i {
  width:5px;
  height:5px;
  background:var(--gold);
  border-radius:50%;
}

.landscape {
  height:186px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.landscape svg {
  width:100%;
  height:100%;
  display:block;
}

.landscape:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 40%,#1f302b85);
}

.landscape-caption {
  position:absolute;
  bottom:15px;
  left:25px;
  z-index:1;
  color:#f4f0df;
  font-family:var(--serif);
  font-size:20px;
}

.landscape-caption span {
  display:block;
  font-family:var(--sans);
  font-size:11px;
  color:#dce0cb;
  letter-spacing:.5px;
  margin-top:2px;
}

.creation {
  padding:29px 30px 22px;
}

.red-text {
  color:var(--red);
}

.creation h2 {
  font-size:26px;
  margin:8px 0 13px;
}

.intro {
  font-family:var(--serif);
  font-size:15px;
  color:#7d7d6c;
  line-height:2;
}

.field-label {
  display:block;
  font-size:13px;
  margin:20px 0 7px;
  font-weight:600;
}

input,select,textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid #cfc9b8;
  border-radius:3px;
  background:#faf7ef;
  color:var(--ink);
  outline:none;
}

input:focus,select:focus,textarea:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 2px #a68b4d30;
}

input::placeholder,textarea::placeholder {
  color:#969585;
  font-size:14px;
}

.origin-summary {
  display:grid;
  grid-template-columns:1fr 1fr 1.3fr;
  gap:12px;
  padding:18px 0 14px;
}

.origin-summary span {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:5px;
}

.origin-summary strong {
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
}

.origin-story {
  font-size:13px;
  color:var(--muted);
  border-left:2px solid #c5b98e;
  padding:2px 0 2px 12px;
  line-height:1.9;
}

.creation-actions {
  display:flex;
  gap:11px;
  margin:23px 0 12px;
}

.button {
  border:1px solid var(--line);
  border-radius:3px;
  padding:11px 18px;
  font-weight:500;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  min-height:44px;
}

.primary {
  background:var(--red);
  border-color:var(--red);
  color:#fff5e2;
}

.primary:hover {
  background:#6c3027;
}

.secondary {
  background:transparent;
  color:var(--ink);
}

.secondary:hover {
  background:#e5dfcf;
}

.creation-actions .primary {
  flex:1;
}

.chronicle-footer {
  padding:16px 14px;
  border-top:1px solid var(--line);
  display:flex;
  gap:15px;
  justify-content:center;
  font-size:11px;
  color:#898773;
  letter-spacing:.2px;
}

.chronicle-footer span {
  color:#b09a62;
}

.mode-panel>label,.mode-panel>p {
  display:block;
  margin:14px 17px 10px;
}

.mode-panel select {
  width:calc(100% - 34px);
  margin:0 17px;
  font-size:14px;
  padding:9px;
}

.dice-formula {
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  padding:12px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:13px 17px 0;
  font-family:Georgia,serif;
  color:#6a715f;
}

.dice-formula span:first-child {
  font-size:22px;
}

.dice-formula b {
  font-weight:400;
  color:#a4a18c;
}

.companions-panel {
  margin-top:18px;
}

.count-badge {
  font:13px Georgia,serif;
  border:1px solid var(--line);
  width:20px;
  height:20px;
  text-align:center;
  border-radius:50%;
}

.companion-intro {
  padding:15px 18px 4px;
}

.companion {
  margin:0 18px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}

.companion:last-child {
  border:0;
}

.companion-top {
  display:flex;
  align-items:center;
  gap:10px;
}

.companion-avatar {
  width:34px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #b7bfa9;
  background:#dfe2d2;
  color:#627257;
  font-family:var(--serif);
  font-size:19px;
  border-radius:18px 18px 2px 2px;
}

.companion:nth-child(2) .companion-avatar {
  background:#e6dcc9;
  border-color:#c7b99a;
  color:#8a7955;
}

.companion:nth-child(3) .companion-avatar {
  background:#dedbe3;
  border-color:#b8b3c1;
  color:#787083;
}

.companion h3 {
  font-size:15px;
}

.companion .tiny {
  font-size:11px;
}

.companion-status {
  font-size:12px;
  margin:8px 0 0;
  color:#787b68;
}

.dead {
  opacity:.6;
}

.quote-card {
  text-align:center;
  margin:23px 6px;
  color:#83826e;
}

.quote-card>span {
  font:42px/1 Georgia,serif;
  color:#b3a478;
}

.quote-card p {
  font-family:var(--serif);
  font-size:14px;
  line-height:2;
}

.quote-card small {
  font-size:10px;
  display:block;
  margin-top:10px;
}

.rules {
  padding:13px 17px;
  font-size:12px;
  color:var(--muted);
}

.rules summary {
  cursor:pointer;
  font-size:13px;
}

.rules p {
  margin-top:10px;
}

.rules a {
  text-decoration:underline;
}

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid #d2cdbe;
  margin-top:30px;
  padding:18px 0 24px;
  color:#93917f;
  font-size:11px;
  letter-spacing:.7px;
}

.page-footer b {
  padding:0 8px;
  color:var(--gold);
}

.chronicle-intro {
  padding:21px 26px 10px;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--muted);
}

.timeline {
  padding:0 26px 12px;
  margin:0;
  list-style:none;
  max-height:610px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#c6bfa9 transparent;
}

.event {
  position:relative;
  margin-left:18px;
  padding:17px 0 17px 24px;
  border-left:1px solid var(--line);
  animation:ink-in .4s ease-out;
}

.event:before {
  content:'';
  position:absolute;
  left:-4px;
  top:27px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#999e80;
  border:2px solid var(--paper);
}

.event.major:before,.event.death:before {
  background:var(--red);
  width:9px;
  height:9px;
  left:-5px;
}

.event-age {
  color:var(--gold);
  font-size:12px;
  letter-spacing:.4px;
}

.event h3 {
  font-size:17px;
  margin:3px 0 6px;
}

.event p {
  font-size:14px;
  color:#777968;
  line-height:1.9;
}

.event-roll {
  display:inline-block;
  font:12px var(--sans);
  border:1px solid var(--line);
  padding:4px 8px;
  margin-top:8px;
  color:var(--green);
  background:#e8eadb;
}

.event-roll.fail {
  color:var(--red);
  background:#eee0d5;
}

dialog {
  padding:0;
  background:var(--paper);
  color:var(--ink);
  border:1px solid #b9aa83;
  border-radius:5px;
  box-shadow:0 25px 100px #0005;
  max-width:560px;
  width:calc(100% - 32px);
  max-height:90dvh;
  overflow:auto;
}

dialog::backdrop {
  background:#15211dcc;
  backdrop-filter:blur(4px);
}

.modal-content {
  padding:34px;
}

.modal-content>h2 {
  font-size:27px;
  margin:10px 0 12px;
}

.modal-content>p {
  margin:10px 0;
  color:#777865;
  font-size:15px;
}

.choices {
  display:grid;
  gap:10px;
  margin:23px 0;
}

.choice-button {
  text-align:left;
  width:100%;
  padding:14px 17px;
  background:#eee8d9;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--ink);
}

.choice-button:hover {
  background:#e7ddc7;
  border-color:var(--gold);
}

.choice-button strong {
  display:block;
  font-family:var(--serif);
  font-size:16px;
}

.choice-button span {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.9;
}

.choice-button.wicked {
  border-left:3px solid var(--red);
}

.choice-button.good {
  border-left:3px solid var(--green);
}

.dice-face {
  margin:25px auto;
  width:108px;
  height:118px;
  display:grid;
  place-items:center;
  font:48px Georgia,serif;
  color:#f4e6c9;
  background:var(--green);
  clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
}

.dice-face.rolling {
  animation:roll .16s linear infinite;
}

.icon-button {
  border:0;
  background:transparent;
  font-size:28px;
  color:var(--muted);
}

.modal-content .panel-heading {
  padding:0 0 12px;
}

.modal-content textarea {
  resize:vertical;
  min-height:100px;
}

.modal-content form .button {
  margin-top:12px;
}

.journal-entries {
  max-height:260px;
  overflow:auto;
}

.journal-entry {
  padding:15px 0;
  border-bottom:1px solid var(--line);
}

.journal-entry p {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family:var(--serif);
  font-size:15px;
}

.journal-entry small {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}

.memorial {
  text-align:center;
  background:radial-gradient(ellipse at center,#f9f1dc,#dfcda7);
  border:6px double #aa9168;
  margin:10px;
  padding:28px;
}

.memorial-emblem {
  display:block;
  font-size:48px;
  color:#806e44;
}

.memorial>.eyebrow {
  color:#82714b;
}

.memorial h3 {
  font-size:30px;
  margin-top:25px;
  overflow-wrap:anywhere;
}

.memorial-age {
  margin:18px auto;
  display:flex;
  flex-direction:column;
  border-top:1px solid #bbab88;
  border-bottom:1px solid #bbab88;
  max-width:200px;
  padding:12px;
}

.memorial-age strong {
  font:60px Georgia,serif;
}

.memorial-age span {
  font-size:13px;
  color:#8b7955;
}

.memorial blockquote {
  margin:24px 0;
  font-family:var(--serif);
  font-size:15px;
  font-style:italic;
  color:#806e44;
}

.toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  background:#27372c;
  color:#f1ead6;
  padding:13px 22px;
  border-radius:4px;
  font-size:14px;
  max-width:90vw;
  box-shadow:0 6px 24px #0003;
}

@keyframes ink-in {
  from {
    opacity:0;
    transform:translateY(-6px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes roll {
  50% {
    transform:rotate(10deg) scale(.93);
  }
}

@media(min-width:1600px) {
  .page-shell {
    padding-top:38px;
  }
  .game-layout {
    grid-template-columns:266px minmax(0,1fr) 280px;
    gap:28px;
  }
  .landscape {
    height:215px;
  }
  .creation {
    padding:32px 40px;
  }
}

@media(max-width:1150px) {
  .game-layout {
    grid-template-columns:218px minmax(0,1fr);
    gap:18px;
  }
  .right-column {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1.3fr 1fr;
    gap:18px;
    align-items:start;
  }
  .companions-panel {
    margin-top:0;
  }
  .rules {
    grid-column:1/-1;
  }
  .toolbar {
    gap:10px;
  }
  .toolbar-utilities {
    margin-left:0;
  }
  .header-note .edition {
    display:none;
  }
  .creation {
    padding:25px;
  }
  .quote-card {
    margin-top:20px;
  }
  .chronicle-panel {
    min-height:0;
  }
}

@media(max-width:700px) {
  .masthead {
    min-height:85px;
    padding:15px 5%;
  }
  .brand strong {
    font-size:22px;
  }
  .brand-seal {
    width:39px;
    height:45px;
    font-size:30px;
  }
  .header-note {
    display:none;
  }
  .toolbar {
    padding:10px 4%;
    gap:7px;
  }
  .tool-button {
    padding:7px 9px;
    font-size:13px;
    min-height:35px;
  }
  .forward {
    padding-left:8px;
    border:1px solid #535c4f;
    flex:1;
    text-align:left;
  }
  .toolbar-utilities {
    gap:5px;
  }
  .toolbar-utilities .tool-button {
    font-size:12px;
  }
  .speed-control {
    width:100%;
    justify-content:space-between;
  }
  .speed-control .tool-button {
    flex:1;
  }
  .page-shell {
    padding:24px 4% 0;
  }
  .chapter-heading {
    display:block;
    margin-bottom:18px;
  }
  h1 {
    font-size:23px;
  }
  .world-year {
    display:block;
    margin-top:8px;
    font-size:12px;
  }
  .game-layout {
    grid-template-columns:minmax(0,1fr);
  }
  .left-column {
    display:contents;
  }
  .character-panel {
    grid-row:2;
  }
  .fate-panel {
    grid-row:3;
    margin-top:0;
  }
  .chronicle-panel {
    grid-row:1;
  }
  .right-column {
    grid-row:4;
    display:block;
  }
  .right-column>.panel,.quote-card {
    margin-top:18px;
  }
  .character-panel .portrait {
    width:85px;
    height:90px;
    float:left;
    margin:18px;
  }
  .portrait svg {
    width:90px;
    height:90px;
  }
  .character-panel h3 {
    padding-top:21px;
  }
  .character-panel .title-badge {
    margin-bottom:28px;
  }
  .vitals {
    clear:both;
  }
  .ability-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  .creation {
    padding:23px 22px;
  }
  .creation h2 {
    font-size:23px;
  }
  .origin-summary {
    gap:6px;
  }
  .origin-summary strong {
    font-size:14px;
  }
  .landscape {
    height:160px;
  }
  .page-footer {
    display:block;
    font-size:10px;
  }
  .page-footer>span {
    display:block;
    margin:5px 0;
  }
  .modal-content {
    padding:25px;
  }
  .modal-content>h2 {
    font-size:23px;
  }
  .memorial {
    padding:24px 14px;
  }
  .creation-actions {
    flex-wrap:wrap;
  }
  .creation-actions .button {
    flex:1;
    white-space:nowrap;
    padding:11px 10px;
  }
  .timeline {
    max-height:530px;
    padding-left:18px;
    padding-right:18px;
  }
}

.decision-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.decision-heading .button { flex-shrink:0; padding:9px 14px; }
.decision-reminder {
  position:fixed; bottom:max(18px, env(safe-area-inset-bottom)); left:16px; right:16px;
  z-index:8; max-width:540px; margin:0 auto; padding:10px 14px 10px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(135deg, rgba(35, 43, 38, 0.97) 0%, rgba(22, 28, 25, 0.98) 100%);
  color:#f4f0e4;
  border:1.5px solid #a68b4d;
  border-radius:9999px;
  box-shadow:0 12px 35px rgba(0, 0, 0, 0.45), 0 0 16px rgba(166, 139, 77, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter:blur(10px);
}
.decision-reminder-content { display:flex; align-items:center; gap:14px; min-width:0; }
.decision-reminder-seal {
  display:inline-grid; place-items:center; width:34px; height:34px; flex-shrink:0;
  border-radius:50%; background:rgba(166, 139, 77, 0.15); border:1px solid #a68b4d;
  color:#dfc385; font-size:15px; text-shadow:0 0 8px rgba(223, 195, 133, 0.6);
  animation:seal-pulse 2.4s ease-in-out infinite;
}
@keyframes seal-pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(166, 139, 77, 0.4); }
  50% { box-shadow:0 0 0 5px rgba(166, 139, 77, 0); }
}
.decision-reminder strong { display:block; font-family:var(--serif); font-size:15px; font-weight:600; color:#f6f1e6; letter-spacing:.3px; }
.decision-reminder p { margin:2px 0 0; font-size:13px; color:#bcc5b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.decision-reminder button {
  flex-shrink:0; padding:10px 22px;
  border:1px solid rgba(223, 195, 133, 0.45);
  border-radius:9999px;
  background:linear-gradient(135deg, #914235 0%, #6f2e24 100%);
  color:#fff6e8; font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.3px;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:all .18s ease;
}
.decision-reminder button:hover {
  background:linear-gradient(135deg, #a14b3d 0%, #7d3529 100%);
  border-color:#dfc385;
  box-shadow:0 4px 14px rgba(145, 66, 53, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform:translateY(-1px);
}
.decision-reminder button:active { transform:translateY(1px); box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); }
.decision-reminder button:focus-visible { outline:3px solid #dfc385; outline-offset:3px; }
body:has(#decision-reminder:not([hidden])) { padding-bottom:130px; }
body:has(#decision-reminder:not([hidden])) .toast { bottom:calc(150px + env(safe-area-inset-bottom)); pointer-events:none; }

/* Expanded lore library and the one-in-ten-thousand relic. */
.resume-panel { margin:12px 0; }
.resume-panel p { margin-top:8px; }
.save-status { padding:10px 18px; border-top:1px solid var(--line); }
#conditions { padding:4px 16px 12px; overflow-wrap:anywhere; }
.achievement-panel { margin:18px 0; }
.achievement-panel > label { display:block; margin:12px 18px 6px; }
.achievement-panel > select { width:calc(100% - 36px); margin:0 18px 12px; font-size:12px; }
#achievement-list { padding:0 18px 14px; }
.achievement { font-size:12px; color:var(--muted); padding:10px 0; border-top:1px solid var(--line); }
.achievement small { display:block; font-weight:400; }
.achievement.unlocked { color:var(--red); font-weight:600; }
.share-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0; }
.share-actions .button { white-space:normal; }
#share-text { text-align:left; margin:12px 0; }
.fragment-panel {
  padding:0 19px 18px;
}
.fragment-panel .button {
  width:100%;
  margin-top:10px;
  white-space:normal;
}
.lore-panel {
  margin:18px 0;
}
.lore-panel > p {
  margin:12px 18px;
}
.lore-panel > .button {
  width:calc(100% - 36px);
  margin:2px 18px 18px;
  white-space:normal;
}
#lore-dialog {
  max-width:760px;
}
.lore-filters {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:20px 0 12px;
}
.lore-filters label {
  flex:1 1 180px;
  font-size:13px;
}
.lore-filters select {
  margin-top:5px;
}
.lore-event,.choice-lore,.lore-attribution {
  padding:14px 16px;
  border:1px solid var(--line);
  margin:12px 0;
  background:#ece6d640;
  font-size:13px;
  overflow-wrap:anywhere;
}
.lore-event summary,.choice-lore summary,.lore-attribution summary {
  cursor:pointer;
  font-weight:600;
}
.lore-event p,.choice-lore p,.lore-attribution p {
  margin:10px 0;
}
.lore-source {
  font-size:12px;
  text-decoration:underline;
  color:var(--red);
}
.lore-options {
  padding-left:22px;
}
.lore-options li {
  margin:12px 0;
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}