:root {
  color-scheme: light;
  --bg: #f6f8f3;
  --surface: #ffffff;
  --surface-strong: #f0f7f4;
  --ink: #202521;
  --muted: #667069;
  --line: #d8e1da;
  --green: #2f745d;
  --green-dark: #20443a;
  --coral: #d35f4d;
  --gold: #dcae35;
  --blue: #4d77b5;
  --violet: #7459a6;
  --shadow: 0 14px 42px rgba(31, 40, 34, 0.12);
  --light-surface-bg: #fffdf4;
  --light-surface-text: #172b27;
  --light-surface-muted: #51655e;
  --light-surface-border: #6c7f77;
  --light-surface-border-subtle: #82928c;
  --light-surface-accent: #245f49;
  --dark-surface-bg: rgba(20, 28, 25, 0.84);
  --dark-surface-text: #f7f2df;
  --dark-surface-muted: rgba(247, 242, 223, 0.84);
  --dark-surface-accent: #fff1b8;
  --focus-ring-light: #245b91;
  --focus-ring-dark: #9cc8ff;
}

.surface-light {
  --surface-bg: var(--light-surface-bg);
  --surface-text: var(--light-surface-text);
  --surface-muted: var(--light-surface-muted);
  --surface-border: var(--light-surface-border);
  --surface-accent: var(--light-surface-accent);
  --surface-focus: var(--focus-ring-light);
  background-color: var(--surface-bg);
  color: var(--surface-text);
}

.surface-dark {
  --surface-bg: var(--dark-surface-bg);
  --surface-text: var(--dark-surface-text);
  --surface-muted: var(--dark-surface-muted);
  --surface-border: rgba(238, 210, 129, 0.56);
  --surface-accent: var(--dark-surface-accent);
  --surface-focus: var(--focus-ring-dark);
  background-color: var(--surface-bg);
  color: var(--surface-text);
}

.surface-light :where(h1, h2, h3, h4, h5, h6, strong),
.surface-dark :where(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--surface-text);
}

.surface-light :where(p, span, small, li, label),
.surface-dark :where(p, span, small, li, label) {
  color: var(--surface-muted);
}

.surface-light :where(input, select, textarea) {
  border-color: var(--surface-border);
  background: #ffffff;
  color: var(--surface-text);
}

.surface-light :where(input, select, textarea, button):focus-visible,
.surface-dark :where(input, select, textarea, button):focus-visible {
  outline-color: var(--surface-focus);
}

.building-achievements {
  width: min(1120px, calc(100% - 24px));
  margin: 14px auto;
  padding: 12px;
  border: 1px solid rgba(170, 126, 52, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(28, 33, 30, 0.9), rgba(44, 35, 25, 0.84)),
    radial-gradient(circle at 16% 0%, rgba(78, 151, 219, 0.18), transparent 34%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 235, 169, 0.08);
  color: #f8f0d7;
}

.building-achievements header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.building-achievements .eyebrow {
  color: rgba(159, 212, 255, 0.92);
}

.building-achievements h3 {
  margin: 0;
  color: #fff0bb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.building-achievement-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.building-achievement {
  min-height: 86px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 10px;
  border: 1px solid rgba(214, 170, 83, 0.38);
  border-radius: 6px;
  background: rgba(9, 12, 12, 0.46);
}

.building-achievement.is-win {
  border-color: rgba(130, 198, 255, 0.72);
  box-shadow: inset 0 0 22px rgba(72, 154, 228, 0.12), 0 0 18px rgba(72, 154, 228, 0.12);
}

.building-achievement span {
  color: rgba(248, 240, 215, 0.78);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.building-achievement strong {
  color: #fff6d0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.05;
}

.building-achievement small,
.building-achievement-empty {
  color: rgba(248, 240, 215, 0.78);
  font-size: 0.78rem;
}

#screen-character.is-active .building-achievements--training {
  position: absolute;
  left: 34%;
  top: 15.2%;
  bottom: auto;
  z-index: 3;
  width: 15.6%;
  height: 47%;
  min-width: 180px;
  max-width: 300px;
  margin: 0;
  padding:
    clamp(46px, 4.2vw, 58px)
    clamp(30px, 2.15vw, 42px)
    clamp(50px, 4vw, 62px);
  border: 0;
  border-radius: 0;
  background: url("assets/training-hall-banner-wide-v1.png?v=269") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #fff1c5;
  clip-path: none;
  transform: translateZ(0);
  transform-origin: 50% 0;
  overflow: hidden;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.34));
}

#screen-character.is-active .building-achievements--training::before,
#screen-character.is-active .building-achievements--training::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#screen-character.is-active .building-achievements--training::before {
  display: none;
}

#screen-character.is-active .building-achievements--training::after { display: none; }

#screen-character.is-active .building-achievements--training .eyebrow {
  display: block;
  margin: 0 auto 2px;
  max-width: 86%;
  color: #a9e7d6;
  font-size: clamp(0.54rem, 0.6vw, 0.68rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

#screen-character.is-active .building-achievements--training header {
  display: block;
  margin-bottom: 12px;
  text-align: center;
}

#screen-character.is-active .building-achievements--training h3 {
  margin: 0 auto;
  max-width: 86%;
  font-size: clamp(0.66rem, 0.75vw, 0.86rem);
  line-height: 1.04;
  overflow-wrap: anywhere;
}

#screen-character.is-active .building-achievements--training .building-achievement-list {
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: calc(100% - 44px);
  overflow: hidden;
}

#screen-character.is-active .building-achievements--training .building-achievement {
  position: relative;
  min-height: 0;
  padding: 4px clamp(4px, 7%, 12px) 7px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(226, 197, 114, 0.12) 18% 82%, transparent 91%) bottom / 100% 1px no-repeat;
  text-align: center;
}

#screen-character.is-active .building-achievements--training .building-achievement strong {
  font-size: clamp(0.8rem, 0.88vw, 0.96rem);
  line-height: 1.05;
}

#screen-character.is-active .building-achievements--training .building-achievement small {
  font-size: clamp(0.56rem, 0.64vw, 0.72rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

#screen-character.is-active .building-achievements--training .building-achievement.is-win {
  position: relative;
  border-color: rgba(150, 231, 255, 0.72);
  text-shadow: 0 0 10px rgba(150, 231, 255, 0.36), 0 1px 2px #000;
}

#screen-character.is-active .building-achievements--training .building-achievement.is-win::before {
  content: "New mark";
  width: fit-content;
  margin-inline: auto;
  padding: 0 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #dffcff;
  font-size: 0.56rem;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  #screen-character.is-active .building-achievements--training {
    left: 8px;
    right: auto;
    top: 74px;
    bottom: auto;
    width: min(46vw, 230px);
    min-width: 0;
    max-height: 152px;
    overflow: auto;
    transform: none;
  }

  .building-achievements {
    width: calc(100% - 16px);
    margin-block: 10px;
  }

  .building-achievements header {
    display: block;
  }

  .building-achievement-list {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100svh;
  margin: 0;
  background:
    linear-gradient(180deg, #eef7f8 0%, #f7f6ec 46%, #edf7ef 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

body.is-immersive-active,
body.is-town-active {
  overflow-x: hidden;
  background: #162620;
}

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

button {
  cursor: pointer;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell {
  position: relative;
  width: min(100%, 480px);
  min-height: 100svh;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
}

.app-shell.is-immersive-active,
.app-shell.is-town-active {
  width: 100%;
  min-height: 100svh;
  background: #162620;
  box-shadow: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  background: rgba(248, 251, 247, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.app-shell.is-immersive-active .topbar,
.app-shell.is-town-active .topbar {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  left: 10px;
  z-index: 30;
  width: min(calc(100% - 20px), 560px);
  margin: 0 auto;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(20, 28, 25, 0.76);
  color: #f7f2df;
  box-shadow: 0 12px 28px rgba(5, 12, 10, 0.32);
}

.brand-lockup {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

h1 {
  margin-bottom: 0;
  font-size: 1.34rem;
  line-height: 1.1;
}

h2 {
  margin-bottom: 0;
  font-size: 1.08rem;
}

h3 {
  margin-bottom: 4px;
  font-size: 1rem;
}

main {
  padding: 14px 14px 92px;
}

.app-shell.is-immersive-active main,
.app-shell.is-town-active main {
  padding: 0 0 92px;
}

.screen {
  display: none;
}

.screen.is-active {
  display: block;
}

.town-area-screen {
  --area-bg: url("assets/interior-town-hall-stage-basic.png?v=89");
  --area-position: center center;
  --area-glow: rgba(255, 232, 160, 0.16);
  --area-shadow: rgba(12, 18, 17, 0.18);
}

/* Hearthvale Ledger V2: onboarding is the physical book, not a form around it. */
.onboarding-dialog {
  width: min(100vw, 1280px);
  max-width: none;
  max-height: 100vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.onboarding-dialog::backdrop {
  background: radial-gradient(circle at 50% 38%, rgba(49, 76, 116, 0.2), transparent 42%), rgba(4, 8, 14, 0.95);
}

.ledger-v2 {
  position: relative;
  width: min(1220px, 98vw);
  height: min(790px, 98vh);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ledger-closed-cover {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(5, 9, 15, 0.94);
  transition: opacity 240ms ease, transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ledger-cover-art {
  position: relative;
  width: min(430px, 76vw);
  aspect-ratio: 330 / 405;
  overflow: hidden;
  filter: drop-shadow(0 32px 34px rgba(0, 0, 0, 0.6));
}

.ledger-cover-art img {
  position: absolute;
  top: -2.5%;
  left: -6%;
  width: 465%;
  max-width: none;
}

.ledger-cover-inscription {
  position: absolute;
  z-index: 2;
  width: min(300px, 54vw);
  text-align: center;
  color: #f4e6c2;
}

.ledger-cover-inscription p,
.ledger-cover-inscription h2 {
  margin: 0 0 12px;
  color: #f4e6c2;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
  text-shadow: 0 2px 5px #04070c;
}

.ledger-cover-inscription h2 { font-size: 1.55rem; }
.ledger-cover-menu { display: grid; gap: 8px; }

.ledger-gold-button,
.ledger-text-button {
  min-height: 40px;
  border: 1px solid #c3a75f;
  border-radius: 3px;
  background: linear-gradient(#24395d, #172640);
  color: #f7e9c5;
  font: 800 0.82rem Georgia, "Times New Roman", serif;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(244, 218, 151, 0.16), 0 4px 12px rgba(0, 0, 0, 0.32);
}

.ledger-text-button { background: rgba(36, 57, 93, 0.42); }
.ledger-gold-button:hover, .ledger-gold-button:focus-visible, .ledger-text-button:hover, .ledger-text-button:focus-visible { border-color: #f1d485; box-shadow: 0 0 14px rgba(77, 136, 213, 0.45); }

.ledger-access-panel {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(207, 178, 104, 0.55);
  background: rgba(7, 15, 27, 0.9);
  text-align: left;
}
.ledger-access-panel[hidden] { display: none; }
.ledger-access-panel label { color: #f1e4c5; }

.ledger-v2.is-book-open .ledger-closed-cover {
  opacity: 0;
  transform: perspective(1200px) rotateY(-88deg) translateX(-32%);
  pointer-events: none;
}

.ledger-v2 .ledger-book-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  outline: none;
  perspective: 1800px;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.55));
}

.ledger-v2 .ledger-open-book-art {
  position: absolute;
  inset: 2% 1.5% 1%;
  z-index: 0;
  overflow: hidden;
  clip-path: polygon(3% 5%, 7% 2%, 46% 3%, 50% 5%, 54% 3%, 93% 2%, 97% 5%, 97% 84%, 94% 89%, 55% 92%, 50% 90%, 45% 92%, 6% 89%, 3% 84%);
}
.ledger-v2 .ledger-open-book-art img { position: absolute; top: -1.8%; left: -51.2%; width: 224%; max-width: none; height: auto; display: block; }

.ledger-v2 .ledger-page-content {
  position: absolute;
  z-index: 5;
  inset: 12.5% 9.5% 13%;
  overflow: hidden;
}

.ledger-v2 .onboarding-page,
.ledger-v2 .onboarding-page.is-active {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ledger-v2 .onboarding-page.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9%;
}

.ledger-v2 .onboarding-page.full-spread.is-active { display: block; }
.ledger-page-half { min-width: 0; padding: 3% 2%; overflow: hidden; color: #443823; }
.ledger-page-half h3, .ledger-spread-heading h3 { margin: 0 0 8px; color: #20365a; font: 700 1.45rem/1.05 Georgia, "Times New Roman", serif; letter-spacing: 0; }
.ledger-page-half p, .ledger-spread-heading p { margin: 0 0 10px; color: #594a35; font-size: 0.79rem; line-height: 1.4; }
.ledger-page-half label { gap: 4px; margin-bottom: 10px; color: #51432f; font-size: 0.74rem; font-weight: 800; }
.ledger-page-half input, .ledger-page-half textarea, .ledger-page-half select {
  width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid rgba(127, 92, 42, 0.55); border-radius: 3px;
  background: rgba(252, 243, 218, 0.84); color: #263650; font: 700 0.77rem/1.3 inherit; box-shadow: inset 0 1px 5px rgba(88, 57, 22, 0.1);
}
.ledger-page-half textarea { resize: none; }
.ledger-page-half input:focus, .ledger-page-half textarea:focus, .ledger-page-half select:focus { outline: 2px solid rgba(61, 107, 170, 0.42); border-color: #c39b45; }

.ledger-guidance { padding: 7px 9px; border-left: 2px solid #b99240; background: rgba(226, 211, 172, 0.34); }
.ledger-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.ledger-inline-actions button { flex: 1 1 140px; }

.ledger-save-bookplate {
  position: absolute; z-index: 35; top: auto; bottom: 2.7%; left: 50%; transform: translateX(-50%); min-width: 170px; padding: 5px 22px;
  border: 1px solid #b28c42; background: #1d3153; color: #f1e3bf; text-align: center; font: 700 0.66rem Georgia,serif;
  clip-path: polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
}

.ledger-progress-diamonds { position: absolute; z-index: 35; left: 50%; bottom: 7.8%; transform: translateX(-50%); display: flex; gap: 8px; }
.ledger-progress-diamonds span { width: 9px; height: 9px; border: 1px solid #8c6a2b; background: #d6c28e; transform: rotate(45deg); }
.ledger-progress-diamonds span.is-complete { background: #4879b4; }
.ledger-progress-diamonds span.is-current { background: #e0b84c; box-shadow: 0 0 8px #5f9ee4; }

.ledger-corner { position: absolute; z-index: 30; width: 74px; height: 74px; border: 0; background: transparent; cursor: pointer; }
.ledger-corner::after { content: ""; position: absolute; width: 16px; height: 16px; border-top: 3px solid #b68b35; border-right: 3px solid #b68b35; opacity: 0; transition: opacity 150ms ease, transform 150ms ease; }
.ledger-corner:hover::after, .ledger-corner:focus-visible::after { opacity: 1; }
.ledger-corner:disabled { display: none; }
.ledger-corner--back-top { top: 11%; left: 5%; }
.ledger-corner--back-bottom { bottom: 10%; left: 5%; }
.ledger-corner--back-top::after, .ledger-corner--back-bottom::after { left: 19px; transform: rotate(-135deg); }
.ledger-corner--next-top { top: 11%; right: 5%; }
.ledger-corner--next-bottom { bottom: 10%; right: 5%; }
.ledger-corner--next-top::after, .ledger-corner--next-bottom::after { right: 19px; transform: rotate(45deg); }
.ledger-corner:hover { background: radial-gradient(circle at center, rgba(70,122,185,.18), transparent 64%); }

.ledger-close-button { position: absolute; z-index: 45; right: 4%; bottom: 3%; border: 1px solid #a27e39; background: #172944; color: #f2e4c2; padding: 6px 12px; font: 700 .68rem Georgia,serif; }

.ledger-page-turn-frame { display: none; position: absolute; z-index: 18; left: 8%; top: 9%; width: 84%; height: 79%; background-image: url("assets/ui/hearthvale-ledger-page-turn-sheet.png?v=121"); background-size: 700% 400%; background-position: 2.4% var(--turn-row,5.7%); background-repeat: no-repeat; clip-path: polygon(4% 17%,10% 8%,46% 4%,52% 6%,91% 8%,97% 17%,96% 85%,90% 92%,53% 96%,47% 96%,10% 92%,4% 85%); pointer-events:none; }
.ledger-book-stage.is-turning-forward .ledger-page-turn-frame, .ledger-book-stage.is-turning-backward .ledger-page-turn-frame { display:block; animation: ledger-frame-sequence 620ms steps(6,end) both; }
.ledger-book-stage.is-turning-forward .ledger-page-turn, .ledger-book-stage.is-turning-backward .ledger-page-turn { animation-duration:620ms; }
.ledger-book-stage.is-turning-forward .ledger-page-content, .ledger-book-stage.is-turning-backward .ledger-page-content { animation-duration:620ms; }
@keyframes ledger-frame-sequence { from { background-position-x:2.4%; } to { background-position-x:100%; } }

.ledger-token-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.ledger-token-grid.compact { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.ledger-token, .ledger-list-choice, .activity-choice, .ledger-class-choice, .realm-choice {
  min-height:34px; padding:6px 8px; border:1px solid rgba(126,91,40,.46); border-radius:3px; background:rgba(243,229,194,.5); color:#35435a; text-align:left; font-size:.68rem;
}
.ledger-token.is-selected, .ledger-list-choice.is-selected, .activity-choice.is-enjoy, .ledger-class-choice.is-selected, .realm-choice.is-selected { border-color:#315f99; background:rgba(168,199,225,.48); box-shadow:inset 0 0 0 1px rgba(195,158,72,.58); }
.activity-choice.is-interested { border-color:#6b8c44; background:rgba(188,210,155,.5); }
.activity-choice.is-avoid { border-color:#a25a45; background:rgba(220,175,154,.42); }
.activity-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.activity-choice { display:flex; justify-content:space-between; align-items:center; }
.activity-choice span { text-transform:capitalize; opacity:.75; }
.activity-legend { display:flex; gap:10px; margin-top:8px; font-size:.64rem; color:#675539; }
.ledger-choice-stack, .ledger-class-list, .realm-intensity-list { display:grid; gap:6px; }
.ledger-list-choice, .ledger-class-choice, .realm-choice { display:grid; gap:2px; }
.ledger-class-choice strong, .realm-choice strong { font-family:Georgia,serif; color:#243858; }
.ledger-class-choice span, .realm-choice span { font-size:.62rem; line-height:1.25; }
.ledger-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.ledger-check { display:flex!important; grid-template-columns:20px 1fr; align-items:center; }
.ledger-check input { width:17px!important; min-height:17px!important; }

.journey-bookplate { display:grid; gap:8px; place-items:center; margin:12% 8%; padding:22px; border:2px solid #a27c36; background:rgba(236,217,174,.5); text-align:center; box-shadow:inset 0 0 0 4px rgba(255,248,223,.45); }
.bookplate-crest { display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#1c365d; color:#edd89f; font:700 1rem Georgia,serif; }
.journey-bookplate strong { color:#213655; font:700 1.2rem Georgia,serif; }
.journey-bookplate em { color:#675235; }
.journey-bookplate div { display:flex; gap:16px; font-size:.64rem; color:#776241; }

.ledger-spread-heading { text-align:center; margin-bottom:8px; }
.ledger-character-gallery { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; height:calc(100% - 52px); }
.ledger-character-choice { display:grid; grid-template-rows:minmax(0,1fr) auto auto; min-width:0; padding:5px; overflow:hidden; border:1px solid rgba(130,94,42,.45); background:rgba(240,225,188,.36); color:#37445a; }
.ledger-character-choice img { width:100%; height:100%; min-height:0; object-fit:contain; object-position:bottom center; filter:drop-shadow(0 8px 7px rgba(55,37,17,.28)); }
.ledger-character-choice strong { font:700 .78rem Georgia,serif; }
.ledger-character-choice span { font-size:.58rem; }
.ledger-character-choice.is-selected { border:2px solid #3b6da5; background:rgba(182,207,225,.4); transform:scale(1.025); box-shadow:0 0 12px rgba(55,100,157,.35); }
.ledger-large-character { height:310px; display:grid; place-items:end center; }
.ledger-large-character img { max-width:90%; max-height:100%; object-fit:contain; filter:drop-shadow(0 12px 10px rgba(50,32,16,.28)); }

.ledger-companion-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.ledger-egg-choice { min-width:0; padding:5px; border:1px solid rgba(130,94,42,.45); background:rgba(241,226,190,.36); color:#34445c; }
.ledger-egg-choice img { width:100%; height:72px; object-fit:contain; }
.ledger-egg-choice strong,.ledger-egg-choice span { display:block; font-size:.6rem; }
.ledger-egg-choice.is-selected { border:2px solid #3d6eaa; background:rgba(183,208,228,.42); }
.ledger-companion-preview { height:245px; display:grid; place-items:end center; }
.ledger-companion-preview img { max-width:90%; max-height:100%; object-fit:contain; filter:drop-shadow(0 12px 10px rgba(50,32,16,.28)); }

.ledger-review-column dl { margin:0; display:grid; gap:0; }
.ledger-review-column dl div { display:grid; grid-template-columns:90px 1fr; gap:7px; padding:5px 0; border-bottom:1px solid rgba(117,84,39,.28); }
.ledger-review-column dt { color:#6b5738; font-size:.65rem; font-weight:800; }
.ledger-review-column dd { margin:0; color:#263750; font-size:.67rem; }
.ledger-wax-submit { display:grid; grid-template-columns:48px 1fr; align-items:center; gap:10px; width:100%; margin-top:14px; padding:8px; border:1px solid #a77d34; background:#20385f; color:#f3e4bd; font:700 .88rem Georgia,serif; }
.ledger-wax-submit span { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#8e251d; color:#edc976; box-shadow:inset 0 0 0 4px #601913; }
.ledger-wax-submit:disabled { filter:grayscale(.7); opacity:.55; }
.ledger-v2.is-sealing .ledger-wax-submit span { animation:ledger-seal-press 650ms ease both; }
.ledger-v2.is-sealing .ledger-book-stage { animation:ledger-close-after-seal 700ms ease both; }
@keyframes ledger-seal-press { 0%{transform:scale(1.5);opacity:.2} 65%{transform:scale(.9)} 100%{transform:scale(1);opacity:1} }
@keyframes ledger-close-after-seal { 0%,55%{transform:scale(1);opacity:1} 100%{transform:scale(.72);opacity:0} }

.ledger-chapter-illustration { float:right; width:104px; height:126px; margin:0 0 7px 8px; background-image:url("assets/ui/hearthvale-ledger-ui-atlas.png?v=121"); background-size:1396% 691%; background-position-y:70.8%; background-repeat:no-repeat; filter:drop-shadow(0 7px 6px rgba(45,29,13,.3)); }
.ill-ledger{background-position-x:27.3%}.ill-welcome,.ill-goals{background-position-x:36.9%}.ill-hero{background-position-x:46.3%}.ill-path{background-position-x:65.1%}.ill-companion{background-position-x:55.8%}.ill-realm{background-position-x:74.5%}.ill-review{background-position-x:84%}

body.is-reduced-motion .ledger-v2 .ledger-page-turn-frame { display:none!important; }

@media (max-width:820px) {
  .ledger-v2 { width:100vw; height:100vh; }
  .ledger-v2 .ledger-open-book-art { display:none; }
  .ledger-v2 .ledger-book-stage { inset:0; border:10px solid #172944; border-radius:5px; background:linear-gradient(90deg,rgba(122,87,40,.15),transparent 8%,transparent 92%,rgba(122,87,40,.15)),#efdfb9; box-shadow:inset 0 0 0 2px #b38c42,inset 0 0 30px rgba(83,52,22,.2); }
  .ledger-v2 .ledger-page-content { inset:14% 7% 12%; }
  .ledger-v2 .onboarding-page.is-active { grid-template-columns:1fr; gap:8px; align-content:start; }
  .ledger-page-half { padding:2%; }
  .ledger-page-half h3,.ledger-spread-heading h3{font-size:1.08rem}.ledger-page-half p{font-size:.7rem}
  .ledger-character-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); height:calc(100% - 44px); }
  .ledger-token-grid.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ledger-chapter-illustration { width:74px;height:90px; }
  .ledger-large-character,.ledger-companion-preview{height:160px}
  .ledger-page-turn-frame{display:none!important}
  .ledger-save-bookplate{top:auto;bottom:2.5%;font-size:.56rem}.ledger-progress-diamonds{bottom:6%;gap:5px}
}

.town-area-screen.is-active {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  margin: -14px -14px -92px;
  padding: 82px 14px 112px;
  background:
    radial-gradient(circle at 50% 12%, var(--area-glow), transparent 32%),
    linear-gradient(180deg, rgba(255, 248, 222, 0.06), var(--area-shadow) 62%, rgba(5, 8, 8, 0.24)),
    var(--area-bg) var(--area-position) / cover no-repeat;
  background-attachment: fixed;
}

.town-area-screen.area-stage-0.is-active {
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 232, 160, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(255, 246, 214, 0.08), rgba(42, 35, 28, 0.16) 68%, rgba(7, 10, 10, 0.24)),
    var(--area-bg) var(--area-position) / cover no-repeat;
}

.town-area-screen.area-stage-1.is-active {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 232, 160, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(255, 246, 214, 0.07), rgba(45, 39, 31, 0.14) 64%, rgba(10, 13, 12, 0.22)),
    var(--area-bg) var(--area-position) / cover no-repeat;
}

.town-area-screen.area-stage-2.is-active {
  background:
    radial-gradient(circle at 50% 12%, var(--area-glow), transparent 32%),
    linear-gradient(180deg, rgba(255, 248, 222, 0.08), rgba(8, 12, 11, 0.12) 68%, rgba(5, 8, 8, 0.2)),
    var(--area-bg) var(--area-position) / cover no-repeat;
}

.town-area-screen.area-stage-3.is-active {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 238, 168, 0.22), transparent 32%),
    linear-gradient(180deg, rgba(255, 248, 222, 0.1), rgba(8, 12, 11, 0.08) 66%, rgba(5, 8, 8, 0.18)),
    var(--area-bg) var(--area-position) / cover no-repeat;
}

.app-shell.is-immersive-active .town-area-screen.is-active {
  margin: 0;
  padding:
    clamp(86px, 9svh, 118px)
    clamp(14px, 4vw, 44px)
    118px
    clamp(94px, calc(72px + 4vw), 132px);
}

.town-area-screen.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 242, 190, 0.1), transparent 34%),
    radial-gradient(ellipse at 50% 105%, rgba(3, 7, 7, 0.14), transparent 58%);
  pointer-events: none;
}

.town-area-screen.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 247, 218, 0.035);
  backdrop-filter: saturate(1.05) brightness(1.04);
  pointer-events: none;
}

.town-area-screen.area-stage-0.is-active::after {
  background: rgba(255, 247, 218, 0.045);
  backdrop-filter: none;
}

.town-area-screen.area-stage-1.is-active::after {
  background: rgba(255, 247, 218, 0.04);
  backdrop-filter: saturate(1.04) brightness(1.03);
}

.town-area-screen.area-stage-3.is-active::after {
  background: rgba(255, 247, 218, 0.03);
  backdrop-filter: saturate(1.08) brightness(1.04);
}

.town-area-screen.is-active > * {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  margin-right: auto;
  margin-left: auto;
}

.town-area-screen.is-active > .screen-room-upgrades {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.screen-room-object,
.screen-room-object i,
.screen-room-object b,
.screen-room-object em {
  position: absolute;
  display: block;
  content: "";
}

.screen-room-object {
  filter: drop-shadow(0 16px 18px rgba(3, 7, 6, 0.34));
  opacity: 0.95;
}

.screen-room-object.has-art,
.room-object.has-art {
  left: var(--object-left, auto);
  right: var(--object-right, auto);
  top: var(--object-top, auto);
  bottom: var(--object-bottom, auto);
  width: var(--object-width, 240px);
  height: var(--object-height, 220px);
  transform: var(--object-transform, none);
  opacity: var(--object-opacity, 0.98);
}

.screen-room-object.has-art img,
.room-object.has-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  border: 0;
  background: transparent;
}

.screen-room-object-guild_crates {
  left: 8%;
  bottom: 12%;
  width: 160px;
  height: 92px;
}

.screen-room-object-guild_crates i,
.screen-room-object-guild_crates b {
  bottom: 0;
  width: 74px;
  height: 54px;
  border: 3px solid rgba(62, 44, 29, 0.62);
  border-radius: 6px;
  background: linear-gradient(180deg, #b78a52, #6c4b2d);
}

.screen-room-object-guild_crates i { left: 0; }
.screen-room-object-guild_crates b { right: 10px; bottom: 18px; }

.screen-room-object-guild_notice_board {
  right: 9%;
  top: 18%;
  width: 230px;
  height: 160px;
}

.screen-room-object-guild_notice_board i {
  inset: 18px 18px 16px;
  border: 8px solid #6e472b;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(104, 69, 44, 0.18) 0 3px, transparent 3px 36px),
    #c99759;
}

.screen-room-object-guild_notice_board b {
  left: 52px;
  top: 48px;
  width: 122px;
  height: 70px;
  background:
    linear-gradient(180deg, #fff3c6, #d8b472);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 70% 82%, 70% 100%, 0 100%);
}

.screen-room-object-inn_table,
.screen-room-object-market_blank_counter {
  left: 50%;
  bottom: 9%;
  width: 330px;
  height: 110px;
  transform: translateX(-50%);
}

.screen-room-object-inn_table i,
.screen-room-object-market_blank_counter i {
  inset: 22px 0 20px;
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(180deg, #9d6840, #523621);
}

.screen-room-object-inn_table b,
.screen-room-object-market_blank_counter b {
  left: 18px;
  right: 18px;
  top: 0;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d09b5d, #7a4c2c);
}

.screen-room-object-inn_pantry_shelves {
  right: 7%;
  top: 20%;
  width: 220px;
  height: 240px;
}

.screen-room-object-inn_pantry_shelves i {
  inset: 0;
  border: 5px solid #6b432a;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 31%, #6b432a 32% 35%, transparent 36% 64%, #6b432a 65% 68%, transparent 69%),
    rgba(120, 76, 42, 0.74);
}

.screen-room-object-inn_pantry_shelves b {
  inset: 18px;
  background:
    radial-gradient(circle at 18% 16%, #d9a15f 0 11px, transparent 12px),
    radial-gradient(circle at 52% 18%, #9fc174 0 12px, transparent 13px),
    radial-gradient(circle at 82% 18%, #e8d294 0 10px, transparent 11px),
    radial-gradient(circle at 28% 52%, #c98d59 0 12px, transparent 13px),
    radial-gradient(circle at 64% 56%, #8cae64 0 13px, transparent 14px),
    radial-gradient(circle at 48% 86%, #efe0b0 0 14px, transparent 15px);
}

.screen-room-object-market_stall_kit {
  left: 50%;
  bottom: 8%;
  width: 390px;
  height: 170px;
  transform: translateX(-50%);
}

.screen-room-object-market_stall_kit i {
  left: 0;
  right: 0;
  bottom: 18px;
  height: 78px;
  border-radius: 8px 8px 14px 14px;
  background:
    linear-gradient(90deg, rgba(255, 238, 168, 0.18) 0 16%, transparent 16% 32%, rgba(255, 238, 168, 0.18) 32% 48%, transparent 48% 64%, rgba(255, 238, 168, 0.18) 64% 80%, transparent 80%),
    linear-gradient(180deg, #8b5b2a, #422714);
}

.screen-room-object-market_stall_kit b {
  left: 32px;
  right: 32px;
  top: 26px;
  height: 54px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 50%, #f1ce5f 0 15px, transparent 16px),
    radial-gradient(circle at 44% 50%, #c0a4ff 0 14px, transparent 15px),
    radial-gradient(circle at 67% 50%, #9ce7ff 0 14px, transparent 15px),
    radial-gradient(circle at 86% 50%, #ffd2f1 0 13px, transparent 14px);
}

.screen-room-object-training_floor_mat {
  left: 50%;
  bottom: 8%;
  width: 420px;
  height: 96px;
  transform: translateX(-50%);
}

.screen-room-object-training_floor_mat i {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(83, 94, 99, 0.78), rgba(43, 48, 51, 0.48) 66%, transparent 68%);
}

.screen-room-object-training_dummy_set {
  left: 8%;
  bottom: 12%;
  width: 300px;
  height: 240px;
}

.screen-room-object-training_dummy_set i,
.screen-room-object-training_dummy_set b {
  bottom: 0;
  width: 92px;
  height: 210px;
  background:
    radial-gradient(circle at 50% 14%, #b58a5c 0 28px, transparent 29px),
    linear-gradient(90deg, transparent 45%, #6a4328 46% 54%, transparent 55%),
    linear-gradient(180deg, transparent 27%, #a17247 28% 72%, transparent 73%);
}

.screen-room-object-training_dummy_set i { left: 34px; }
.screen-room-object-training_dummy_set b { right: 54px; transform: scale(0.86); opacity: 0.86; }

.screen-room-object-oracle_plain_pool {
  left: 50%;
  bottom: 8%;
  width: 300px;
  height: 118px;
  transform: translateX(-50%);
}

.screen-room-object-oracle_plain_pool i {
  inset: 0;
  border: 4px solid rgba(174, 211, 224, 0.48);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(93, 155, 180, 0.5), rgba(32, 63, 88, 0.52) 64%, rgba(6, 12, 18, 0.2) 66%);
}

.screen-room-object-oracle_pool_lanterns {
  left: 50%;
  bottom: 8%;
  width: 420px;
  height: 210px;
  transform: translateX(-50%);
}

.screen-room-object-oracle_pool_lanterns i {
  left: 56px;
  top: 20px;
  width: 34px;
  height: 58px;
  border-radius: 12px;
  background: radial-gradient(circle, #fff7da, #9ce7ff 56%, #294f6a);
  box-shadow: 0 0 28px rgba(156, 231, 255, 0.82);
}

.screen-room-object-oracle_pool_lanterns b {
  right: 56px;
  top: 24px;
  width: 34px;
  height: 58px;
  border-radius: 12px;
  background: radial-gradient(circle, #fff7da, #ffd2f1 56%, #5b386f);
  box-shadow: 0 0 28px rgba(255, 210, 241, 0.82);
}

.screen-room-object-dungeon_chain_posts {
  left: 50%;
  bottom: 9%;
  width: 360px;
  height: 150px;
  transform: translateX(-50%);
}

.screen-room-object-dungeon_chain_posts i,
.screen-room-object-dungeon_chain_posts b {
  bottom: 0;
  width: 28px;
  height: 118px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #77717d, #24232a);
}

.screen-room-object-dungeon_chain_posts i { left: 48px; }
.screen-room-object-dungeon_chain_posts b { right: 48px; }

.screen-room-object-dungeon_chain_posts em {
  left: 76px;
  right: 76px;
  top: 56px;
  height: 18px;
  border-top: 6px dashed rgba(180, 175, 185, 0.86);
}

.screen-room-object-dungeon_gate_torches {
  left: 50%;
  bottom: 13%;
  width: 460px;
  height: 240px;
  transform: translateX(-50%);
}

.screen-room-object-dungeon_gate_torches i,
.screen-room-object-dungeon_gate_torches b {
  bottom: 20px;
  width: 38px;
  height: 170px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 4%, #fff3a6 0 15px, #ff7b36 16px 28px, transparent 29px),
    linear-gradient(180deg, transparent 0 28px, #42343a 29px 100%);
  box-shadow: 0 0 32px rgba(255, 128, 54, 0.78);
}

.screen-room-object-dungeon_gate_torches i { left: 40px; }
.screen-room-object-dungeon_gate_torches b { right: 40px; }

.area-guild,
.area-board {
  --area-bg: url("assets/interior-town-hall-stage-basic.png?v=89");
  --area-position: center 44%;
  --area-glow: rgba(255, 228, 150, 0.2);
}

.area-inn {
  --area-bg: url("assets/interior-rest-shrine-stage-basic.png?v=89");
  --area-position: center 42%;
  --area-glow: rgba(169, 201, 255, 0.22);
  --area-shadow: rgba(21, 26, 36, 0.48);
}

/* Inn and Kitchen: one walk-in room; legacy logs open as selected services. */
#screen-log.has-inn-interior.is-active {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  overflow-x: hidden;
  background: #19110d;
}

#screen-log.has-inn-interior.is-active::before,
#screen-log.has-inn-interior.is-active::after {
  display: none;
}

#screen-log.has-inn-interior > .section-heading:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

#screen-log.has-inn-interior > .intro-copy,
#screen-log.has-inn-interior > .building-achievements,
#screen-log.has-inn-interior > .segmented,
#screen-log.has-inn-interior > #log-activity,
#screen-log.has-inn-interior > #log-workout {
  display: none !important;
}

.inn-room-interior {
  position: relative;
  width: 100vw;
  max-width: none !important;
  min-height: max(680px, 100svh);
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  background: #19110d;
}

.inn-room-bg,
.inn-room-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.inn-room-bg {
  z-index: 0;
  object-fit: cover;
  object-position: center;
}

.inn-room-shade {
  z-index: 1;
  background:
    radial-gradient(circle at 58% 44%, rgba(255, 214, 137, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(20, 11, 7, 0.02), rgba(14, 7, 4, 0.32));
}

.innkeeper-stage {
  position: absolute;
  z-index: 3;
  left: clamp(12px, 4vw, 70px);
  bottom: -2%;
  width: clamp(250px, 28vw, 440px);
  height: 76%;
  pointer-events: none;
}

.innkeeper-sprite-stage {
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("assets/keeper-innkeeper-fullbody-v1.png?v=3");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  transform-origin: 50% 94%;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.38));
  animation: innkeeper-fullbody-breathe 4.8s ease-in-out infinite;
}

.innkeeper-tea-table {
  position: absolute;
  z-index: 4;
  left: clamp(230px, 25vw, 450px);
  bottom: 8%;
  width: clamp(230px, 24vw, 390px);
  height: clamp(86px, 8vw, 126px);
  border: 2px solid rgba(86, 47, 23, 0.95);
  border-radius: 7px 7px 3px 3px;
  background:
    linear-gradient(180deg, rgba(177, 103, 48, 0.82), rgba(90, 48, 24, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 217, 145, 0.16) 0 2px, transparent 2px 24px);
  box-shadow: 0 20px 32px rgba(7, 4, 2, 0.45);
  pointer-events: none;
}

.innkeeper-tea-table::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: -16px;
  height: 24px;
  border: 2px solid rgba(86, 47, 23, 0.9);
  border-radius: 6px;
  background: linear-gradient(180deg, #b97838, #6c391b);
}

.innkeeper-teapot,
.innkeeper-cup,
.innkeeper-steam {
  position: absolute;
  display: block;
}

.innkeeper-teapot {
  right: 28%;
  top: -32px;
  width: 58px;
  height: 38px;
  border: 2px solid rgba(117, 75, 37, 0.9);
  border-radius: 50% 46% 45% 50%;
  background: linear-gradient(135deg, #f1d7a1, #a86d36 72%);
  box-shadow: inset -8px -8px 12px rgba(56, 28, 14, 0.18);
}

.innkeeper-teapot::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -13px;
  width: 24px;
  height: 13px;
  border-radius: 999px 999px 0 0;
  background: #d8ac66;
}

.innkeeper-teapot::after {
  content: "";
  position: absolute;
  right: -17px;
  top: 9px;
  width: 24px;
  height: 15px;
  border-top: 5px solid #c58947;
  border-radius: 50%;
  transform: rotate(-15deg);
}

.innkeeper-cup {
  right: 15%;
  top: -20px;
  width: 30px;
  height: 24px;
  border: 2px solid rgba(117, 75, 37, 0.9);
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, #fff1c9, #c99250);
}

.innkeeper-steam {
  right: calc(15% + 4px);
  top: -62px;
  width: 28px;
  height: 36px;
  opacity: 0.78;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(255,255,255,0.78), transparent 48%),
    radial-gradient(ellipse at 62% 42%, rgba(255,255,255,0.65), transparent 46%);
  filter: blur(3px);
  animation: innkeeper-steam-rise 1.8s ease-in-out infinite;
}

.innkeeper-dialogue {
  position: absolute;
  z-index: 4;
  left: min(35vw, 520px);
  bottom: 7%;
  display: grid;
  gap: 7px;
  width: min(430px, 36vw);
  padding: 14px 16px;
  border: 1px solid rgba(144, 94, 42, 0.58);
  border-radius: 4px;
  background: rgba(255, 244, 213, 0.92);
  color: #3b2817;
  box-shadow: 0 15px 28px rgba(10, 5, 3, 0.32);
}

.innkeeper-dialogue::before {
  content: "";
  position: absolute;
  left: -11px;
  bottom: 30px;
  width: 20px;
  height: 20px;
  border-left: 1px solid rgba(144, 94, 42, 0.58);
  border-bottom: 1px solid rgba(144, 94, 42, 0.58);
  background: rgba(255, 244, 213, 0.92);
  transform: rotate(45deg);
}

.innkeeper-dialogue span {
  color: #765028;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.innkeeper-dialogue h3,
.innkeeper-dialogue p {
  margin: 0;
  color: inherit;
}

.innkeeper-dialogue h3 {
  font: 800 clamp(1.1rem, 1.8vw, 1.45rem) Georgia, serif;
}

.innkeeper-dialogue p {
  line-height: 1.35;
}

.innkeeper-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.innkeeper-actions button,
.inn-room-object {
  border: 1px solid rgba(226, 191, 112, 0.7);
  background: rgba(25, 45, 36, 0.9);
  color: #fff2c2;
  font-weight: 900;
  cursor: pointer;
}

.innkeeper-actions button {
  min-height: 38px;
  border-radius: 3px;
}

.inn-room-object {
  position: absolute;
  z-index: 2;
  min-width: 86px;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.innkeeper-actions button:hover,
.innkeeper-actions button:focus-visible {
  border-color: rgba(129, 233, 210, 0.72);
  box-shadow: 0 0 14px rgba(86, 218, 194, 0.28);
}

.inn-room-anchor::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid transparent;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.inn-room-anchor:hover::before,
.inn-room-anchor:focus-visible::before {
  border-color: rgba(129, 233, 210, 0.76);
  background: radial-gradient(ellipse at 50% 52%, rgba(86, 218, 194, 0.12), transparent 66%);
  box-shadow:
    0 0 0 1px rgba(129, 233, 210, 0.26),
    0 0 22px rgba(86, 218, 194, 0.46),
    inset 0 0 18px rgba(86, 218, 194, 0.16);
}

.inn-room-anchor:focus-visible {
  outline: 2px solid rgba(129, 233, 210, 0.82);
  outline-offset: 3px;
}

[data-room-scene-stage] {
  position: relative;
  isolation: isolate;
}

[data-room-anchor] {
  --room-anchor-glow: rgba(117, 236, 208, 0.58);
  --room-anchor-focus: rgba(160, 246, 224, 0.82);
  scroll-margin: 96px;
}

[data-room-anchor]:is(:hover, :focus-visible) {
  filter: drop-shadow(0 0 10px var(--room-anchor-glow));
}

[data-room-anchor]:focus-visible {
  outline: 2px solid var(--room-anchor-focus);
  outline-offset: 3px;
}

.inn-room-object span {
  position: absolute;
  left: 50%;
  bottom: -34px;
  translate: -50% 0;
  width: max-content;
  max-width: 160px;
  padding: 5px 9px;
  border: 1px solid rgba(226, 191, 112, 0.7);
  background: rgba(25, 45, 36, 0.92);
  color: #fff2c2;
  font-size: 0.72rem;
  opacity: 0;
  transition: opacity 150ms ease;
}

.inn-room-object:hover span,
.inn-room-object:focus-visible span {
  opacity: 1;
}

.inn-object-table {
  left: clamp(230px, 25vw, 450px);
  bottom: 7%;
  width: clamp(230px, 24vw, 390px);
  height: clamp(86px, 8vw, 126px);
}

.inn-object-table::before,
.inn-object-table::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.inn-object-table::before {
  left: 18%;
  top: 20%;
  width: 34%;
  height: 36%;
  border: 1px solid rgba(117, 75, 37, 0.82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 44%, #e9c36f 0 9%, transparent 10%),
    radial-gradient(circle at 55% 52%, #9f5d37 0 11%, transparent 12%),
    radial-gradient(circle at 68% 38%, #7e8d3f 0 8%, transparent 9%),
    linear-gradient(135deg, rgba(255, 238, 180, 0.96), rgba(189, 137, 74, 0.9));
  box-shadow: 0 4px 9px rgba(36, 18, 9, 0.24);
}

.inn-object-table::after {
  right: 24%;
  top: 23%;
  width: 20%;
  height: 30%;
  border-radius: 5px 5px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255, 244, 210, 0.96), rgba(199, 138, 71, 0.92));
  box-shadow: 0 0 0 1px rgba(117, 75, 37, 0.72), 0 5px 9px rgba(36, 18, 9, 0.2);
}

.inn-object-hearth {
  right: 31%;
  top: 25%;
  width: 17%;
  height: 23%;
}

.inn-object-hearth::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 18%;
  height: 36%;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(255, 121, 45, 0.7), transparent 54%),
    radial-gradient(ellipse at 50% 42%, rgba(255, 222, 132, 0.45), transparent 60%);
  filter: blur(2px);
  opacity: 0.62;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: inn-hearth-anchor-glow 2.8s ease-in-out infinite;
}

@keyframes inn-hearth-anchor-glow {
  0%,
  100% {
    opacity: 0.46;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.78;
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inn-object-hearth::after {
    animation: none;
  }
}

.inn-object-stairs {
  right: 7%;
  top: 18%;
  width: 20%;
  height: 34%;
}

.inn-object-stairs span {
  top: 8%;
  bottom: auto;
  left: 50%;
  display: block;
  min-width: 92px;
  padding: 6px 10px;
  border: 1px solid rgba(139, 86, 37, 0.8);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(126, 76, 35, 0.96), rgba(65, 38, 19, 0.96));
  color: #fff2c2;
  font: 900 0.72rem Georgia, serif;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
  opacity: 0.96;
  box-shadow:
    inset 0 0 0 1px rgba(255, 229, 156, 0.14),
    0 5px 12px rgba(24, 12, 6, 0.28);
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open {
  --building-menu-art: var(--room-menu-art, url("assets/adventure-guild/layered/ui/parchment-record-movement.png?v=172"));
  display: block;
  position: fixed;
  z-index: 90;
  top: clamp(78px, 10svh, 126px);
  right: clamp(14px, 4vw, 70px);
  bottom: clamp(16px, 4svh, 42px);
  left: clamp(330px, 34vw, 560px);
  width: auto;
  margin: 0;
  overflow: auto;
  border: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 247, 221, 0.72), rgba(231, 202, 151, 0.56)),
    var(--building-menu-art) center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.5), transparent 46%);
  box-shadow: 0 28px 56px rgba(8, 4, 2, 0.48), inset 0 0 0 1px rgba(121, 77, 36, 0.42);
  color: #352111;
  scrollbar-color: rgba(105, 67, 32, 0.62) rgba(234, 203, 151, 0.42);
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open .keeper-panel-close,
.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open .keeper-panel-close {
  position: sticky;
  top: 10px;
  left: calc(100% - 52px);
  z-index: 30;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 2px 10px 0 auto;
  border: 1px solid rgba(109, 70, 32, 0.74);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(76, 43, 21, 0.96), rgba(34, 19, 10, 0.96));
  color: #fff4d2;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(22, 10, 4, 0.28);
  cursor: pointer;
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open .keeper-panel-close:hover,
#screen-log.has-inn-interior > .keeper-folded.is-keeper-open .keeper-panel-close:focus-visible,
.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open .keeper-panel-close:hover,
.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open .keeper-panel-close:focus-visible {
  outline: 2px solid rgba(129, 233, 210, 0.76);
  outline-offset: 2px;
  background: rgba(31, 72, 60, 0.96);
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 18px;
  margin: 0 42px 4px;
  background:
    linear-gradient(90deg, transparent, rgba(126, 76, 31, 0.72) 18%, rgba(218, 171, 89, 0.78) 50%, rgba(126, 76, 31, 0.72) 82%, transparent);
  z-index: 1;
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open .log-pane,
#screen-log.has-inn-interior > .keeper-folded.is-keeper-open .panel-form,
#screen-log.has-inn-interior > .keeper-folded.is-keeper-open .activity-workspace {
  background: transparent;
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open .section-heading,
#screen-log.has-inn-interior > .keeper-folded.is-keeper-open h2,
#screen-log.has-inn-interior > .keeper-folded.is-keeper-open h3,
#screen-log.has-inn-interior > .keeper-folded.is-keeper-open p,
#screen-log.has-inn-interior > .keeper-folded.is-keeper-open label {
  color: #352111;
}

@media (max-width: 760px) {
  .innkeeper-stage {
    left: -26px;
    width: 245px;
    height: 58%;
  }

  .innkeeper-tea-table {
    left: 118px;
    bottom: 5%;
    width: 210px;
  }

  .innkeeper-dialogue {
    left: 18px;
    right: 18px;
    bottom: 30%;
    width: auto;
  }

  #screen-log.has-inn-interior > .keeper-folded.is-keeper-open {
    top: 78px;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}

@keyframes innkeeper-room-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-3px) scaleY(1.006); }
}

@keyframes innkeeper-sprite-room {
  0%, 100% { background-position: center bottom; transform: translateY(0) scale(1); }
  48% { background-position: center bottom; transform: translateY(-3px) scale(1.006); }
  62% { background-position: center bottom; transform: translateY(-1px) scale(1.002); }
}

@keyframes innkeeper-fullbody-breathe {
  0%, 100% {
    background-position: center bottom;
    transform: translateY(0) scaleX(1) scaleY(1);
    filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.38));
  }
  38% {
    background-position: center bottom;
    transform: translateY(0) scaleX(1.004) scaleY(1.006);
    filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.36));
  }
  66% {
    background-position: center bottom;
    transform: translateY(1px) scaleX(0.998) scaleY(1.002);
    filter: drop-shadow(0 23px 23px rgba(0, 0, 0, 0.37));
  }
}

.area-market {
  --area-bg: url("assets/interior-protein-forge-stage-basic.png?v=89");
  --area-position: center 48%;
  --area-glow: rgba(255, 162, 88, 0.24);
  --area-shadow: rgba(43, 22, 13, 0.54);
}

.area-grove {
  --area-bg: url("assets/interior-fiber-garden-stage-basic.png?v=89");
  --area-position: center center;
  --area-glow: rgba(180, 236, 168, 0.24);
  --area-shadow: rgba(12, 35, 22, 0.46);
}

.guild-interior {
  position: relative;
  min-height: min(720px, 78svh);
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(211, 177, 107, 0.58);
  background: #18231f;
  box-shadow: 0 24px 54px rgba(5, 10, 9, 0.42);
}

.guild-interior-scene {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 12, 11, 0.04), rgba(7, 13, 12, 0.34)),
    url("assets/interior-town-hall-stage-basic.png?v=89") center 44% / cover no-repeat;
}

.guild-hotspot {
  position: absolute;
  z-index: 2;
  min-width: 108px;
  min-height: 52px;
  border: 1px solid rgba(240, 207, 132, 0.72);
  border-radius: 4px;
  background: rgba(11, 25, 22, 0.88);
  color: #fff4d2;
  box-shadow: 0 8px 20px rgba(4, 8, 7, 0.34);
}

.guild-hotspot:hover,
.guild-hotspot:focus-visible,
.guild-hotspot[aria-pressed="true"] {
  border-color: #f4d88d;
  background: rgba(28, 61, 51, 0.96);
}

.guild-hotspot strong:not(.sr-only),
.guild-hotspot small:not(.sr-only) { display: block; }
.guild-hotspot small { color: #c8d9c5; }

.guild-hotspot-receptionist {
  left: 6%;
  bottom: 0;
  width: clamp(270px, 34vw, 470px);
  height: 92%;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.guild-hotspot-receptionist:hover,
.guild-hotspot-receptionist:focus-visible {
  border: 0;
  background: rgba(255, 239, 176, 0.05);
}

.guild-hotspot-receptionist img {
  position: absolute;
  inset: 0 0 13% 0;
  width: 100%;
  height: 87%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.42));
}

.guild-hotspot-receptionist > strong:not(.sr-only) {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(9, 20, 17, 0.9);
  white-space: nowrap;
}

.guild-hotspot-board { right: 8%; top: 12%; width: 24%; height: 29%; }
.guild-hotspot-dispatch { right: 9%; bottom: 21%; width: 22%; }
.guild-hotspot-exit { right: 3%; bottom: 5%; }

.guild-reception-dialogue {
  position: absolute;
  z-index: 8;
  right: 4%;
  bottom: 7%;
  width: min(58%, 680px);
  padding: 18px;
  border: 1px solid #d9b66c;
  background: rgba(10, 24, 20, 0.96);
  color: var(--dark-surface-text);
}

.guild-reception-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.guild-reception-options button {
  min-height: 48px;
  border: 1px solid rgba(221, 190, 120, 0.52);
  background: #183b31;
  color: #fff4d2;
  text-align: left;
}

.guild-dispatch-panel,
.guild-attention-panel {
  padding: clamp(16px, 3vw, 24px);
}

.guild-dispatch-panel > header,
.guild-attention-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
}

.guild-dispatch-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.guild-dispatch-stats div,
.guild-attention-item {
  padding: 10px 0;
  border-top: 1px solid var(--light-surface-border-subtle);
}

#guildAttentionList {
  display: grid;
  gap: 8px;
}

#guildAttentionList > button,
.guild-attention-note {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid var(--light-surface-border-subtle);
  background: #f5ecd7;
  color: var(--light-surface-text);
  text-align: left;
}

#guildAttentionList > button span,
.guild-attention-note span { color: var(--light-surface-muted); }

.guild-quest-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--light-surface-border-subtle);
  background: #f7efdc;
  color: var(--light-surface-text);
}

.guild-quest-card header { display: grid; gap: 3px; }
.guild-quest-card header span,
.guild-quest-card > small { color: var(--light-surface-muted); }
.guild-quest-progress { height: 8px; overflow: hidden; background: #d9ccb0; }
.guild-quest-progress span { display: block; height: 100%; background: #2f735a; }
.guild-quest-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.guild-quest-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
.guild-quest-details div { display: grid; gap: 2px; }
.guild-quest-details dt { color: var(--light-surface-muted); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; }
.guild-quest-details dd { margin: 0; }
.guild-dispatch-complete { color: #175e45; font-weight: 800; }

/* Adventure Guild V1.4: one room, with contextual registry surfaces. */
#screen-today.is-active {
  width: 100%;
  max-width: none;
  padding: 0;
  background: #111916;
}

#screen-today > .hero-panel,
#screen-today > .town-ledger-card,
#screen-today > .stat-grid,
#screen-today > .readiness-panel,
#screen-today > .guild-report-desk,
#screen-today > .rule-action-row,
#screen-today > .stakes-grid,
#screen-today > .real-reward-grid,
#screen-today > .quest-list,
#screen-today > .mission-board,
#screen-today > .section-heading { display: none !important; }

.guild-room-v14 {
  min-height: clamp(650px, calc(100svh - 76px), 920px);
  margin: 0;
  border: 0;
  box-shadow: none;
}

.guild-room-panel {
  position: fixed;
  z-index: 30;
  left: max(16px, 4vw);
  right: max(16px, 4vw);
  bottom: max(18px, 4vh);
  max-height: min(72svh, 760px);
  overflow: auto;
  padding: clamp(18px, 3vw, 30px);
  border: 2px solid #a77b39;
  border-radius: 4px;
  background: linear-gradient(100deg, #f3e6c8, #e7d4aa);
  color: #2b2117;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.62), inset 0 0 0 3px rgba(255, 247, 220, 0.48);
}
.guild-room-panel[hidden] { display: none !important; }
.guild-room-panel:not([hidden]) { display: block !important; }
.guild-room-panel > header { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 14px; }
.guild-panel-close { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #17261f; color: #f7e8bf; font-size: 1.5rem; }

.guild-journey-pool { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 12px; margin-bottom: 18px; padding: 14px 0; border-block: 1px solid #9c8055; }
.guild-journey-pool strong { grid-row: span 2; color: #174d3b; font-size: clamp(2rem, 6vw, 4rem); line-height: 0.9; }
.guild-journey-pool span { font-weight: 900; }
.guild-journey-pool small { color: #68553a; }
.guild-notice-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.guild-pinned-notice { position: relative; border: 0; background: #f7edcf; box-shadow: 0 5px 12px rgba(70, 45, 20, 0.22); transform: rotate(-0.35deg); }
.guild-pinned-notice:nth-child(even) { transform: rotate(0.45deg); background: #edf0d5; }
.guild-pinned-notice::before { content: ""; position: absolute; top: 7px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #8d2e35; box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.guild-quest-allocation { display: flex; align-items: end; gap: 8px; }
.guild-quest-allocation label { flex: 1; }
.guild-quest-allocation input { width: 100%; }
.guild-allocation-history { margin-top: 20px; border-top: 1px solid #9c8055; padding-top: 12px; }
.guild-allocation-history p { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; margin: 0; padding: 8px 0; border-bottom: 1px solid rgba(96, 72, 40, 0.2); }

#guildMovementPanel #activityForm { padding: 0; border: 0; background: transparent; box-shadow: none; }
#guildMovementPanel .activity-form-heading,
#guildMovementPanel .activity-quick-labels,
#guildMovementPanel .activity-label-tools,
#guildMovementPanel #activityLabelManager,
#guildMovementPanel label:has(#activityCategoryInput),
#guildMovementPanel label:has(#activityTypeInput),
#guildMovementPanel label:has(#activityIntensityInput),
#guildMovementPanel .activity-import-panel { display: none; }
#guildMovementPanel .activity-entry-form > fieldset:not(.activity-step-fields) { border: 0; padding: 0; }
#guildRecordsPanel .activity-saved-panel,
#guildRecordsPanel .activity-report-panel { margin: 0 0 16px; border: 0; background: rgba(255,255,255,.34); box-shadow: none; }

.personal-reward-marketplace { margin-top: 28px; }

.guild-permanent-records {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(105, 76, 39, 0.38);
  color: #2a2117;
}
.guild-permanent-records > header p { margin-bottom: 0; }
.guild-permanent-records details {
  border: 1px solid #9e7a48;
  background: rgba(255, 248, 224, 0.48);
}
.guild-permanent-records summary {
  min-height: 44px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 800;
}
.guild-record-group {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
}
.guild-record-group .log-pane { display: block; }

.ledger-account-controls {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(111, 78, 35, 0.36);
}
.ledger-account-controls h4 { margin: 0 0 4px; color: #3b2a19; }
.ledger-account-controls p { margin: 0 0 10px; }
.ledger-account-controls .danger-button {
  min-height: 44px;
  color: #fff7ea;
}

@media (max-width: 700px) {
  .guild-room-v14 { min-height: calc(100svh - 62px); }
  .guild-hotspot-receptionist { left: -14%; width: 78%; height: 76%; }
  .guild-hotspot-board { right: 3%; top: 10%; width: 38%; height: 26%; }
  .guild-hotspot-dispatch { right: 4%; bottom: 25%; width: 34%; }
  .guild-hotspot-exit { right: 3%; bottom: 7%; }
  .guild-reception-dialogue { left: 3%; right: 3%; bottom: 3%; width: auto; }
  .guild-reception-options { grid-template-columns: 1fr; }
  .guild-room-panel { left: 8px; right: 8px; bottom: 8px; max-height: 78svh; padding: 16px; }
  .guild-notice-board { grid-template-columns: 1fr; }
  .guild-quest-details { grid-template-columns: 1fr; }
  .guild-allocation-history p { grid-template-columns: 1fr; gap: 2px; }
}

/* Adventure Guild Art and UI Pass V1.0 */
#screen-today .guild-room-v14 {
  position: relative;
  min-height: max(680px, calc(100svh - 72px));
  overflow: hidden;
  background: #17110c;
}

#screen-today .guild-room-v14 .guild-interior-scene {
  position: absolute;
  inset: 0;
  min-height: 0;
  background: url("assets/adventure-guild/backgrounds/guild-hall-base.png?v=150") center center / cover no-repeat;
}

#screen-today .guild-hotspot {
  position: absolute;
  z-index: 5;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f7e7bd;
  box-shadow: none;
}

#screen-today .guild-hotspot:focus-visible {
  outline: 3px solid #f0c968;
  outline-offset: 4px;
  filter: drop-shadow(0 0 12px rgba(240, 201, 104, 0.65));
}

#screen-today .guild-hotspot-receptionist {
  left: 18%;
  bottom: -1%;
  width: min(43%, 610px);
  height: 73%;
}

#screen-today .guild-receptionist-sprite {
  position: absolute;
  inset: 0;
  background: url("assets/adventure-guild/characters/mira/mira-idle.png?v=150") center bottom / contain no-repeat;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.5));
  transform: none;
  transform-origin: 50% 100%;
  transition: opacity 180ms ease, filter 180ms ease;
}

#screen-today .guild-room-v14[data-receptionist-state="greeting"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/characters/mira/mira-greeting.png?v=150");
}
#screen-today .guild-room-v14[data-receptionist-state="listening"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/characters/mira/mira-listening.png?v=150");
}
#screen-today .guild-room-v14[data-receptionist-state="registry-writing"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/characters/mira/mira-registry-writing.png?v=150");
}
#screen-today .guild-room-v14[data-receptionist-state="presenting"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/characters/mira/mira-presenting.png?v=150");
}
#screen-today .guild-room-v14[data-receptionist-state="pointing-board"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/characters/mira/mira-pointing-board.png?v=150");
}
#screen-today .guild-room-v14[data-receptionist-state="thoughtful"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/characters/mira/mira-thoughtful.png?v=150");
}
#screen-today .guild-room-v14[data-receptionist-state="quest-success"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/characters/mira/mira-quest-success.png?v=150");
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(246, 203, 84, 0.45));
}
#screen-today .guild-room-v14[data-receptionist-state="save-error"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/characters/mira/mira-save-error.png?v=150");
}
#screen-today .guild-room-v14[data-receptionist-state="recovery-gentle"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/characters/mira/mira-recovery-gentle.png?v=150");
}

#screen-today .guild-mira-nameplate {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 42%;
  aspect-ratio: 278 / 141;
  translate: -50% 0;
  background: url("assets/adventure-guild/props/mira-nameplate.png?v=150") center / contain no-repeat;
}

#screen-today .guild-hotspot-bucket {
  right: 2.5%;
  bottom: 1.5%;
  width: 22%;
  height: 38%;
}

#screen-today .guild-hotspot-registry {
  left: 21%;
  bottom: 9%;
  width: 16%;
  height: 18%;
}

#screen-today .guild-hotspot-registry:is(:hover, :focus-visible),
#screen-today .guild-hotspot-bucket:is(:hover, :focus-visible),
#screen-today .guild-hotspot-board:is(:hover, :focus-visible),
#screen-today .guild-hotspot-dispatch:is(:hover, :focus-visible) {
  outline: 3px solid rgba(246, 213, 133, 0.92);
  outline-offset: -3px;
  background: rgba(244, 204, 111, 0.08);
  box-shadow: inset 0 0 24px rgba(255, 221, 142, 0.2);
}

#screen-today .guild-hotspot-bucket small {
  position: absolute;
  right: 8%;
  bottom: 9%;
  min-width: 44px;
  padding: 4px 8px;
  border: 1px solid #d4b363;
  border-radius: 50%;
  background: #6f2b27;
  color: #fff0bd;
  text-align: center;
  text-shadow: 0 2px 3px #160d06;
}

#screen-today .guild-hotspot-board {
  right: 10.6%;
  top: 10%;
  width: 39%;
  height: 31%;
}

#screen-today .guild-board-counter {
  position: absolute;
  top: 8%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  width: 43%;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #70502a;
  border-radius: 2px;
  background: rgba(229, 207, 157, 0.94);
  color: #342315;
  font-family: Georgia, serif;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 2px 5px rgba(22, 13, 7, 0.38);
  transform: rotate(-0.5deg);
}
#screen-today .guild-board-counter small {
  color: #342315;
  font-size: clamp(0.55rem, 0.85vw, 0.78rem);
  line-height: 1.05;
}
#screen-today .guild-board-counter strong { font-size: clamp(0.9rem, 1.4vw, 1.3rem); }
#screen-today .guild-board-counter-active { left: 3%; }
#screen-today .guild-board-counter-completed { right: 3%; transform: rotate(0.45deg); }
#screen-today .guild-board-ready-seal {
  position: absolute;
  right: 44%;
  bottom: 5%;
  display: grid;
  place-items: center;
  width: 50px;
  aspect-ratio: 1;
  border: 2px solid #d8ad58;
  border-radius: 50%;
  background: #7c2929;
  color: #fff0bd;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(20, 10, 6, 0.45);
}
#screen-today .guild-board-ready-seal[hidden] { display: none; }
#screen-today .guild-board-ready-seal small { font-size: 0.58rem; }

#screen-today .guild-hotspot-dispatch {
  right: 25%;
  bottom: 12%;
  width: 9%;
  height: 16%;
}
#screen-today .guild-hotspot-dispatch small {
  position: absolute;
  left: 50%;
  top: 92%;
  width: 160px;
  translate: -50% 0;
  text-align: center;
  text-shadow: 0 2px 3px #160d06;
  color: #f4d58f;
}

#screen-today .guild-hotspot-exit {
  left: 0;
  top: 17%;
  width: 13%;
  height: 47%;
}
#screen-today .guild-hotspot-exit strong {
  position: absolute;
  left: 12px;
  bottom: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(226, 188, 103, 0.75);
  background: rgba(20, 15, 10, 0.82);
}

#screen-today .guild-reception-dialogue {
  position: absolute;
  z-index: 12;
  left: 2%;
  bottom: 3%;
  width: min(360px, 42%);
  max-height: 78%;
  overflow: auto;
  padding: 22px;
  border: 2px solid #9c7134;
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(20, 25, 21, 0.97), rgba(34, 27, 18, 0.97));
  color: #f6e7c0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.58), inset 0 0 0 2px rgba(231, 194, 109, 0.14);
}
#screen-today .guild-reception-dialogue[hidden] { display: none !important; }
#screen-today .guild-reception-options { display: grid; grid-template-columns: 1fr; gap: 7px; }
#screen-today .guild-reception-options button {
  min-height: 44px;
  border: 1px solid #806431;
  border-radius: 2px;
  background: #1d342a;
  color: #f5e4b8;
  text-align: left;
}

#screen-today .guild-room-panel {
  position: fixed;
  left: max(18px, 5vw);
  right: max(18px, 5vw);
  bottom: max(14px, 3vh);
  max-width: 1180px;
  max-height: 88svh;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 34px);
  border: 5px solid #583d20;
  border-radius: 5px;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(94, 68, 36, 0.22) 50%, transparent 50.3%),
    radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.28), transparent 24%),
    #ead8ad;
  color: #2b2117;
  box-shadow: 0 22px 75px rgba(0, 0, 0, 0.72), inset 0 0 0 2px #c9a568;
}
#screen-today .guild-room-panel::before,
#screen-today .guild-room-panel::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(112, 76, 35, 0.42);
}
#screen-today .guild-room-panel::after {
  inset: auto 50% 0;
  width: 12px;
  height: 100%;
  border: 0;
  translate: 50% 0;
  background: linear-gradient(90deg, transparent, rgba(74, 49, 25, 0.22), transparent);
}
#screen-today .guild-room-panel > * { position: relative; z-index: 1; }

#screen-today .guild-ledger-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #9b7748;
}
#screen-today .guild-ledger-tabs button {
  min-height: 44px;
  border: 1px solid #684d2a;
  border-radius: 2px 2px 0 0;
  background: #203d31;
  color: #f4e3b5;
}
#screen-today .guild-ledger-tabs button[aria-current="page"] {
  background: #f2e5c3;
  color: #253329;
  box-shadow: inset 0 -3px #95702e;
}

#screen-today .guild-board-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 4vw, 48px);
}
#screen-today .guild-quest-panel[data-board-mode="turn-in"] .guild-board-columns {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}
#screen-today .guild-board-columns > section > h3 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #6d512e;
}
#screen-today .guild-board-columns > section > div,
#screen-today .guild-quest-list,
#screen-today .guild-allocation-quest-list {
  display: grid;
  gap: 14px;
}

#screen-today .guild-quest-card {
  position: relative;
  padding: 20px;
  border: 1px solid #a17e4b;
  border-radius: 2px;
  background: rgba(249, 236, 200, 0.82);
  color: #2c2116;
  box-shadow: 0 5px 11px rgba(76, 49, 20, 0.2);
}
#screen-today .guild-quest-card::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #795126;
}
#screen-today .guild-quest-card.is-completed::after,
#screen-today .guild-quest-card.is-claimed::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 54px;
  aspect-ratio: 1;
  background: url("assets/adventure-guild/quest-board/completed-seal.png?v=150") center / contain no-repeat;
  opacity: 0.8;
}

#screen-today .guild-records-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
#screen-today .guild-records-summary span {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid #9e7a48;
  background: rgba(255, 248, 224, 0.48);
}

#guildMovementPanel #activityForm {
  max-width: 900px;
  margin: auto;
  padding: 0;
  color: #2b2117;
}
#guildMovementPanel .activity-form-heading p { display: none; }
#guildMovementPanel .activity-quick-labels,
#guildMovementPanel .activity-label-tools,
#guildMovementPanel #activityLabelManager,
#guildMovementPanel label:has(#activityCategoryInput),
#guildMovementPanel label:has(#activityTypeInput),
#guildMovementPanel label:has(#activityIntensityInput),
#guildMovementPanel label:has(#activityTimeInput),
#guildMovementPanel label:has(#activeMinutesInput),
#guildMovementPanel label:has(#activityInclineInput),
#guildMovementPanel .activity-import-panel {
  display: none !important;
}
#guildMovementPanel .activity-date-row,
#guildMovementPanel .field-row:has(#activityLabelInput) { grid-template-columns: 1fr; }
#guildMovementPanel .activity-entry-form fieldset {
  border-color: #a1804c;
  background: rgba(255, 248, 225, 0.32);
}
#guildMovementPanel #guildMovementDetails summary {
  min-height: 44px;
  cursor: pointer;
  font-weight: 800;
}
#guildMovementPanel input,
#guildMovementPanel select,
#guildMovementPanel textarea,
#guildRecordsPanel input,
#guildRecordsPanel select {
  background: rgba(255, 252, 238, 0.82);
  color: #251c13;
  border-color: #8b6b3c;
}

#guildRecordsPanel .activity-saved-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#guildRecordsPanel .activity-entry-item,
#guildRecordsPanel .activity-grouped-totals > *,
#guildRecordsPanel .activity-daily-summary > * {
  background: rgba(255, 248, 225, 0.56);
  color: #2a2117;
}

#screen-today .guild-quest-complete-panel #guildQuestCompleteContent {
  max-width: 760px;
  margin: auto;
  text-align: center;
}
#screen-today .guild-completion-emblem {
  width: 120px;
  aspect-ratio: 1;
  margin: 0 auto 12px;
  background: url("assets/adventure-guild/quest-board/completed-seal.png?v=150") center / contain no-repeat;
}

@media (max-width: 720px) {
  #screen-today .guild-room-v14 { min-height: calc(100svh - 58px); }
  #screen-today .guild-room-v14 .guild-interior-scene {
    background-position: 45% center;
  }
  #screen-today .guild-hotspot-receptionist {
    left: 8%;
    width: 58%;
    height: 62%;
  }
  #screen-today .guild-hotspot-board {
    right: 2%;
    top: 9%;
    width: 49%;
    height: 27%;
  }
  #screen-today .guild-board-counter {
    top: 5%;
    width: 46%;
    padding: 3px 4px;
  }
  #screen-today .guild-board-counter small { font-size: 0.48rem; }
  #screen-today .guild-board-ready-seal { right: 40%; width: 42px; }
  #screen-today .guild-hotspot-registry {
    left: 17%;
    bottom: 13%;
    width: 22%;
    height: 15%;
  }
  #screen-today .guild-hotspot-bucket {
    right: 0;
    bottom: 4%;
    width: 34%;
    height: 29%;
  }
  #screen-today .guild-hotspot-dispatch {
    right: 30%;
    bottom: 12%;
    width: 13%;
    height: 12%;
  }
  #screen-today .guild-hotspot-dispatch small { display: none; }
  #screen-today .guild-hotspot-exit {
    left: 0;
    top: 18%;
    width: 18%;
    height: 39%;
  }
  #screen-today .guild-reception-dialogue {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: 64svh;
  }
  #screen-today .guild-room-panel {
    left: 6px;
    right: 6px;
    bottom: 6px;
    max-height: 92svh;
    padding: 16px;
    background: #ead8ad;
  }
  #screen-today .guild-room-panel::after { display: none; }
  #screen-today .guild-ledger-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }
  #screen-today .guild-board-columns,
  #screen-today .guild-records-summary {
    grid-template-columns: 1fr;
  }
}

/* Training Hall exercise archive */
.exercise-library {
  margin: 24px 0;
  padding: clamp(16px, 2.5vw, 28px);
  border: 1px solid rgba(182, 145, 81, 0.72);
  border-radius: 6px;
  color: #f7eedb;
  background:
    linear-gradient(rgba(17, 38, 31, 0.94), rgba(12, 27, 23, 0.97)),
    url("assets/interior-training-hall-stage-basic.png") center / cover;
  box-shadow: 0 14px 34px rgba(8, 12, 10, 0.34);
}

.exercise-library .section-heading {
  margin: 0 0 16px;
}

.exercise-library .section-heading h2,
.exercise-library .section-heading p,
.exercise-library .section-heading span {
  color: inherit;
}

.exercise-library-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(130px, 1fr));
  gap: 10px;
  align-items: end;
}

.exercise-library-tools label {
  display: grid;
  gap: 5px;
  color: #efe1bd;
  font-size: 0.78rem;
  font-weight: 700;
}

.exercise-library-tools input,
.exercise-library-tools select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #977447;
  border-radius: 4px;
  color: #1f2f29;
  background: #fffaf0;
}

.exercise-library-note {
  margin: 13px 0 16px;
  color: #d7ceb8;
  font-size: 0.84rem;
}

.exercise-library-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.exercise-library-item {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(193, 158, 97, 0.46);
  border-radius: 5px;
  color: #f7eedb;
  background: rgba(28, 35, 29, 0.92);
}

.exercise-library-item[data-tracking-mode="camera-reps"] {
  border-color: #79b995;
  box-shadow: inset 3px 0 #79b995;
}

.exercise-library-item header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.exercise-library-item header > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.exercise-library-item small {
  color: #bfcdbf;
}

.exercise-library-item strong {
  color: #fff4d2;
  font-size: 1rem;
}

.exercise-tracking-badge {
  flex: 0 0 auto;
  max-width: 120px;
  padding: 4px 6px;
  border: 1px solid rgba(152, 190, 166, 0.52);
  color: #d9f2df;
  background: #244638;
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: center;
}

.exercise-library-item dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.exercise-library-item dl div {
  min-width: 0;
}

.exercise-library-item dt {
  color: #9eb5a6;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.exercise-library-item dd {
  margin: 2px 0 0;
  color: #f3ead4;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.exercise-library-item p {
  margin: 0;
  color: #d8d1c0;
  font-size: 0.82rem;
}

.exercise-library-item .ghost-button {
  align-self: end;
  justify-self: start;
  margin-top: auto;
}

.exercise-library-more {
  grid-column: 1 / -1;
  min-height: 44px;
  border: 1px solid #ae8a50;
  color: #fff2cc;
  background: #315543;
  font-weight: 800;
}

.exercise-library-empty {
  grid-column: 1 / -1;
  padding: 20px;
  border: 1px dashed #977447;
  color: #efe1bd;
  text-align: center;
}

@media (max-width: 1050px) {
  .exercise-library-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exercise-library-search {
    grid-column: 1 / -1;
  }

  .exercise-library-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .exercise-library-tools,
  .exercise-library-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .exercise-library-search,
  .exercise-library-more,
  .exercise-library-empty {
    grid-column: 1;
  }

  .exercise-library-item dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mira remains the visible speaker in both the room and every routed Guild menu. */
body.is-guild-active #screen-today .guild-reception-group .guild-mira-reaction {
  left: auto;
  right: 66%;
  bottom: 64%;
  width: min(250px, 68vw);
  z-index: 12;
}

body.is-guild-active #screen-today .guild-reception-group .guild-mira-reaction::after {
  left: auto;
  right: -10px;
  border: 0;
  border-top: 1px solid #d3b66f;
  border-right: 1px solid #d3b66f;
}

.guild-scroll-dialog .guild-menu-mira {
  position: absolute;
  z-index: 2;
  left: clamp(8px, 2vw, 34px);
  bottom: 0;
  width: min(34vw, 430px);
  height: min(84svh, 720px);
  pointer-events: none;
}

.guild-scroll-dialog .guild-menu-mira-sprite {
  position: absolute;
  inset: 12% 0 0;
  display: block;
  background: url("assets/adventure-guild/layered/characters/mira-attentive-v2.png?v=190") bottom center / contain no-repeat;
  filter: drop-shadow(0 15px 13px rgba(9, 5, 3, 0.7));
}

.guild-scroll-dialog[data-receptionist-state="welcoming"] .guild-menu-mira-sprite,
.guild-scroll-dialog[data-receptionist-state="pointing"] .guild-menu-mira-sprite,
.guild-scroll-dialog[data-receptionist-state="success"] .guild-menu-mira-sprite,
.guild-scroll-dialog[data-receptionist-state="surprised"] .guild-menu-mira-sprite,
.guild-scroll-dialog[data-receptionist-state="amused"] .guild-menu-mira-sprite {
  background-image: url("assets/adventure-guild/layered/characters/mira-welcoming-v2.png?v=190");
}

.guild-scroll-dialog .guild-menu-mira-bubble {
  position: absolute;
  z-index: 3;
  top: 3%;
  left: 45%;
  width: min(260px, 68%);
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #d3b66f;
  border-radius: 7px;
  background: rgba(247, 234, 198, 0.98);
  color: #342519;
  box-shadow: 0 8px 20px rgba(12, 7, 3, 0.42);
  font: 600 0.95rem/1.42 Georgia, serif;
}

.guild-scroll-dialog .guild-menu-mira-bubble::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  border-right: 1px solid #d3b66f;
  border-bottom: 1px solid #d3b66f;
  background: rgba(247, 234, 198, 0.98);
  transform: rotate(45deg);
}

.guild-scroll-dialog[open] .guild-scroll {
  width: min(900px, 68vw);
  margin: 0 1vw 0 auto;
  justify-self: end;
}

.guild-scroll-dialog[open] .guild-menu-mira {
  width: min(29vw, 360px);
}

.guild-scroll-dialog[open] .guild-menu-mira-sprite {
  inset: 0;
}

.guild-scroll-dialog[open] .guild-menu-mira-bubble {
  top: 38%;
  left: 16%;
  width: 82%;
}

@media (max-width: 720px) {
  body.is-guild-active #screen-today .guild-reception-group .guild-mira-reaction {
    right: 48%;
    bottom: 66%;
    width: min(230px, 52vw);
  }

  .guild-scroll-dialog .guild-menu-mira {
    left: 6px;
    top: 4px;
    bottom: auto;
    width: calc(100% - 12px);
    height: 142px;
  }

  .guild-scroll-dialog .guild-menu-mira-sprite {
    inset: 0 auto 0 0;
    width: 132px;
    background-position: bottom left;
  }

  .guild-scroll-dialog .guild-menu-mira-bubble {
    top: 14px;
    left: 112px;
    width: calc(100% - 122px);
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .guild-scroll-dialog[open] .guild-scroll {
    width: 100%;
    max-height: calc(100svh - 122px);
    margin: 116px 0 0;
    justify-self: stretch;
  }


  .guild-scroll-dialog[open] .guild-menu-mira {
    width: calc(100% - 12px);
  }

  .guild-scroll-dialog[open] .guild-menu-mira-sprite {
    inset: 0 auto 0 0;
  }

  .guild-scroll-dialog[open] .guild-menu-mira-bubble {
    top: 14px;
    left: 112px;
    width: calc(100% - 122px);
  }

  .guild-scroll-dialog[open] .guild-scroll-body {
    max-height: calc(100svh - 122px);
  }
}

/* Guild ledger layout authority: Mira occupies her own column, never the parchment. */
.guild-scroll-dialog[open] {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 900px);
  align-items: end;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 12px;
}

.guild-scroll-dialog[open] .guild-menu-mira {
  position: relative;
  inset: auto;
  grid-column: 1;
  align-self: end;
  width: 100%;
  height: min(78svh, 680px);
  pointer-events: none;
}

.guild-scroll-dialog[open] .guild-menu-mira-sprite {
  position: absolute;
  inset: 16% 0 0;
}

.guild-scroll-dialog[open] .guild-menu-mira-bubble {
  top: 2%;
  left: 3%;
  right: 3%;
  width: auto;
  max-width: none;
}

.guild-scroll-dialog[open] .guild-scroll {
  grid-column: 2;
  align-self: center;
  justify-self: stretch;
  width: min(900px, 100%);
  max-width: 100%;
  margin: 0;
}

@media (min-width: 721px) and (max-width: 1050px) {
  .guild-scroll-dialog[open] {
    grid-template-columns: minmax(190px, 26vw) minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .guild-scroll-dialog[open] .guild-menu-mira {
    height: min(76svh, 610px);
  }

  .guild-scroll-dialog[open] .guild-menu-mira-bubble {
    top: 2%;
    left: 0;
    right: 0;
    width: auto;
    font-size: 0.82rem;
  }

  #screen-today .guild-scroll-dialog .guild-room-panel {
    padding-right: clamp(38px, 6vw, 64px);
    padding-left: clamp(38px, 6vw, 64px);
  }
}

@media (max-width: 720px) {
  .guild-scroll-dialog[open] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 112px minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    padding: 6px;
  }

  .guild-scroll-dialog[open] .guild-menu-mira {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 112px;
  }

  .guild-scroll-dialog[open] .guild-menu-mira-sprite {
    inset: 0 auto 0 0;
    width: 108px;
  }

  .guild-scroll-dialog[open] .guild-menu-mira-bubble {
    top: 8px;
    left: 106px;
    right: 4px;
    width: auto;
  }

  .guild-scroll-dialog[open] .guild-scroll {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-height: calc(100svh - 130px);
    margin: 0;
  }

  .guild-scroll-dialog[open] .guild-scroll-body {
    max-height: calc(100svh - 130px);
  }
}

/* Final shared modal authority. Keep this at EOF so older room-specific
   experiments cannot re-squish the active modal surfaces. */
:is(
  .town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open.hearth-modal,
  #screen-log.has-inn-interior > .keeper-folded.is-keeper-open.hearth-modal,
  .town-area-screen.is-active > .training-route-panel.hearth-modal,
  .town-area-screen.is-active > .training-board-panel.hearth-modal
) {
  z-index: 180;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--hearth-modal-pad);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 2px solid rgba(126, 82, 35, 0.72);
  border-radius: var(--hearth-modal-radius);
  background: var(--hearth-modal-surface);
  color: var(--hearth-modal-ink);
  box-shadow: var(--hearth-modal-shadow);
  backdrop-filter: blur(4px) saturate(1.04);
}

:is(.keeper-panel-close, .training-panel-close, .guild-panel-close) {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #d7ba76;
  border-radius: 50%;
  background: #251d18;
  color: #fff2c5;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.guild-scroll-dialog[open] .guild-scroll {
  width: var(--hearth-modal-width);
  max-height: var(--hearth-modal-height);
  padding: var(--hearth-modal-pad);
  border: 2px solid rgba(126, 82, 35, 0.72);
  border-radius: var(--hearth-modal-radius);
  background: var(--hearth-modal-surface);
  color: var(--hearth-modal-ink);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(255, 249, 223, 0.34),
    inset 0 0 34px rgba(91, 56, 20, 0.18);
}

/* Shared Hearthvale modal shell.
   Existing rooms keep their data and routes, while this layer standardizes
   frames, backdrops, close buttons, scroll behavior, and template rhythm. */
:root {
  --hearth-modal-backdrop: rgba(5, 8, 7, 0.68);
  --hearth-modal-ink: #302317;
  --hearth-modal-muted: #604727;
  --hearth-modal-gold: #9d7436;
  --hearth-modal-radius: 8px;
  --hearth-modal-pad: clamp(16px, 2.2vw, 24px);
  --hearth-modal-width: min(1040px, calc(100vw - 28px));
  --hearth-modal-height: min(84svh, 820px);
  --hearth-modal-art: url("assets/adventure-guild/layered/ui/parchment-mira-conversation.png?v=172");
  --hearth-modal-surface:
    radial-gradient(circle at 8% 10%, rgba(255, 255, 242, 0.32), transparent 30%),
    linear-gradient(180deg, rgba(255, 247, 221, 0.64), rgba(232, 205, 153, 0.48)),
    var(--hearth-modal-art) center / 100% 100% no-repeat,
    #ead5a4;
  --hearth-modal-shadow:
    0 0 0 9999px var(--hearth-modal-backdrop),
    0 24px 70px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(255, 249, 223, 0.34),
    inset 0 0 34px rgba(91, 56, 20, 0.18);
}

body.has-hearth-modal-open {
  overflow: hidden;
}

:is(
  .town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open.hearth-modal,
  #screen-log.has-inn-interior > .keeper-folded.is-keeper-open.hearth-modal,
  .town-area-screen.is-active > .training-route-panel.hearth-modal,
  .town-area-screen.is-active > .training-board-panel.hearth-modal
) {
  position: fixed;
  z-index: 180;
  inset: clamp(78px, 9svh, 112px) clamp(14px, 3vw, 38px) clamp(16px, 4svh, 36px) clamp(310px, 32vw, 470px);
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--hearth-modal-pad);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(105, 67, 32, 0.72) rgba(234, 203, 151, 0.42);
  border: 2px solid rgba(126, 82, 35, 0.72);
  border-radius: var(--hearth-modal-radius);
  background: var(--hearth-modal-surface);
  color: var(--hearth-modal-ink);
  box-shadow: var(--hearth-modal-shadow);
  backdrop-filter: blur(4px) saturate(1.04);
}

:is(
  .town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open.hearth-modal,
  #screen-log.has-inn-interior > .keeper-folded.is-keeper-open.hearth-modal
) {
  left: clamp(330px, 35vw, 590px);
  right: clamp(14px, 4vw, 62px);
}

.town-area-screen.is-active > .training-route-panel.hearth-modal,
.town-area-screen.is-active > .training-board-panel.hearth-modal {
  left: max(330px, calc((100vw - 1320px) / 2 + 305px));
  right: max(18px, calc((100vw - 1320px) / 2 + 18px));
}

.town-area-screen.is-active > .hearth-modal--practice {
  left: clamp(18px, 4vw, 64px);
}

:is(
  .keeper-folded.is-keeper-open.hearth-modal,
  .training-route-panel.hearth-modal,
  .training-board-panel.hearth-modal,
  .guild-scroll-dialog .guild-room-panel
) :is(h2, h3, strong, label, legend) {
  color: var(--hearth-modal-ink);
}

:is(
  .keeper-folded.is-keeper-open.hearth-modal,
  .training-route-panel.hearth-modal,
  .training-board-panel.hearth-modal,
  .guild-scroll-dialog .guild-room-panel
) :is(p, span, small, li, dt, dd) {
  color: var(--hearth-modal-muted);
}

:is(
  .keeper-folded.is-keeper-open.hearth-modal,
  .training-route-panel.hearth-modal,
  .training-board-panel.hearth-modal,
  .guild-scroll-dialog .guild-room-panel
) > header,
.guild-scroll-dialog .guild-room-panel > header {
  position: sticky;
  top: calc(var(--hearth-modal-pad) * -1);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: calc(var(--hearth-modal-pad) * -1) calc(var(--hearth-modal-pad) * -1) var(--hearth-modal-pad);
  padding: 12px var(--hearth-modal-pad);
  border-bottom: 2px solid rgba(139, 96, 45, 0.68);
  background: linear-gradient(90deg, rgba(19, 48, 41, 0.97), rgba(35, 76, 64, 0.97), rgba(19, 48, 41, 0.97));
  color: #fff3cf;
  box-shadow: inset 0 -1px 0 rgba(255, 226, 151, 0.34), 0 8px 18px rgba(82, 51, 24, 0.2);
}

:is(
  .keeper-folded.is-keeper-open.hearth-modal,
  .training-route-panel.hearth-modal,
  .training-board-panel.hearth-modal,
  .guild-scroll-dialog .guild-room-panel
) > header :is(h2, p, span, small),
.guild-scroll-dialog .guild-room-panel > header :is(h2, p, span, small) {
  color: inherit;
}

:is(.keeper-panel-close, .training-panel-close, .guild-panel-close) {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #d7ba76;
  border-radius: 50%;
  background: #251d18;
  color: #fff2c5;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 242, 197, 0.16), 0 6px 14px rgba(0, 0, 0, 0.24);
}

:is(.keeper-panel-close, .training-panel-close, .guild-panel-close):is(:hover, :focus-visible) {
  outline: 3px solid rgba(93, 219, 209, 0.88);
  outline-offset: 3px;
  border-color: rgba(93, 219, 209, 0.92);
  box-shadow: 0 0 22px rgba(93, 219, 209, 0.5), inset 0 0 0 1px rgba(255, 242, 197, 0.18);
}

dialog.hearth-modal:not(.onboarding-dialog) {
  border: 0;
  background: transparent;
}

dialog.hearth-modal:not(.onboarding-dialog)::backdrop {
  background: var(--hearth-modal-backdrop);
  backdrop-filter: blur(2px);
}

.guild-scroll-dialog[open] {
  padding: clamp(10px, 3vw, 34px);
}

.guild-scroll-dialog[open] .guild-scroll {
  width: var(--hearth-modal-width);
  max-height: var(--hearth-modal-height);
  padding: var(--hearth-modal-pad);
  border: 2px solid rgba(126, 82, 35, 0.72);
  border-radius: var(--hearth-modal-radius);
  background: var(--hearth-modal-surface);
  color: var(--hearth-modal-ink);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(255, 249, 223, 0.34),
    inset 0 0 34px rgba(91, 56, 20, 0.18);
}

.guild-scroll-dialog[open] .guild-scroll::before,
.guild-scroll-dialog[open] .guild-scroll::after {
  display: none;
}

.guild-scroll-dialog[open] .guild-scroll-body {
  max-height: calc(var(--hearth-modal-height) - 20px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#profileDialog.hearth-modal[open] {
  width: var(--hearth-modal-width);
  max-width: var(--hearth-modal-width);
  max-height: var(--hearth-modal-height);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

#profileDialog.hearth-modal[open] .dialog-card {
  max-height: var(--hearth-modal-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 2px solid rgba(126, 82, 35, 0.72);
  border-radius: var(--hearth-modal-radius);
  background: var(--hearth-modal-surface);
  color: var(--hearth-modal-ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 0 0 34px rgba(91, 56, 20, 0.18);
}

.ledger-reset-confirmation {
  z-index: 320;
}

.ledger-reset-parchment {
  border-radius: var(--hearth-modal-radius);
  background: var(--hearth-modal-surface);
  color: var(--hearth-modal-ink);
}

@media (max-width: 760px) {
  :root {
    --hearth-modal-width: min(calc(100vw - 12px), 720px);
    --hearth-modal-height: min(92svh, 840px);
    --hearth-modal-pad: 14px;
  }

  :is(
    .town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open.hearth-modal,
    #screen-log.has-inn-interior > .keeper-folded.is-keeper-open.hearth-modal,
    .town-area-screen.is-active > .training-route-panel.hearth-modal,
    .town-area-screen.is-active > .training-board-panel.hearth-modal
  ) {
    inset: auto 6px max(8px, env(safe-area-inset-bottom)) 6px;
    max-height: 84svh;
    min-height: 48svh;
  }

  .guild-scroll-dialog[open] {
    padding: 6px;
  }

  .guild-scroll-dialog[open] .guild-scroll {
    width: var(--hearth-modal-width);
    max-height: var(--hearth-modal-height);
  }

  .guild-scroll-dialog[open] .guild-scroll-body {
    max-height: calc(var(--hearth-modal-height) - 28px);
  }
}

.standings-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 5px;
  border: 1px solid rgba(112, 74, 34, 0.55);
  background: rgba(91, 57, 27, 0.12);
}

.standings-mode-tabs button {
  flex: 1 1 150px;
  min-height: 44px;
  border: 1px solid #79532d;
  border-radius: 3px;
  background: linear-gradient(#f0ddb0, #d8bd82);
  color: #332115;
  font-weight: 700;
}

.standings-mode-tabs button[aria-current="page"] {
  border-color: #d8bd72;
  background: linear-gradient(#315f4c, #204536);
  color: #fff0bf;
}

#adventureStandingsContent {
  display: grid;
  gap: 14px;
}

.standings-section {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(105, 70, 34, 0.45);
  background: transparent;
  color: #352417;
}

.standings-section:last-child { border-bottom: 0; }
.standings-section :is(h3, strong, label, p, small, span) { color: inherit; }
.standings-section h3 { margin: 0 0 8px; color: #274f3f; }
.standings-section article,
.standings-rival-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(105, 70, 34, 0.35);
}

.standings-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: 10px;
}

.standings-inline-form label {
  display: grid;
  gap: 4px;
  font-weight: 700;
}

.standings-inline-form :is(input, select),
.standings-section button {
  min-height: 44px;
}

.standings-sharing-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 12px 0;
}

.standings-sharing-options label,
.standings-opt-in {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

#screen-today .guild-weekly-status-panel .standings-opt-in {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  grid-template-columns: none;
  justify-content: flex-start;
}

#screen-today .guild-weekly-status-panel :is(.standings-opt-in, .standings-sharing-options label) input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
}

.standings-sync-note,
.standings-status {
  margin: 10px 0 0;
  color: #58442d;
  font-size: 0.9rem;
}

.standings-status:empty { display: none; }

@media (max-width: 560px) {
  .standings-mode-tabs { display: grid; grid-template-columns: 1fr; }
  .standings-mode-tabs button { width: 100%; }
  .standings-inline-form { grid-template-columns: 1fr; }
  #screen-today .guild-week-ledger-summary { inset: 29% 12% 16%; }
}

/* Reception tabletop inventory: every prop anchors to the desk's painted top edge. */
body.is-guild-active #screen-today .guild-desk-tabletop-plane {
  position: absolute;
  z-index: 5;
  top: -20%;
  left: 5%;
  right: 5%;
  height: 40%;
  pointer-events: none;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane > [data-desk-item] {
  position: absolute;
  top: auto;
  pointer-events: auto;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane [data-desk-slot="registry"] {
  left: 17%;
  bottom: 0;
  width: 38%;
  height: 94%;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane [data-desk-slot="quest-bucket"] {
  right: 5%;
  bottom: -1%;
  width: 24%;
  height: 112%;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane [data-desk-slot="quill"] {
  left: 56%;
  bottom: 0;
  width: 11%;
  height: 82%;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane > [data-desk-item][hidden] {
  display: none;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane .guild-room-prop::after {
  bottom: 0;
  height: 10%;
}

body.is-guild-active #screen-today .guild-mira-reaction {
  left: 60%;
  bottom: 57%;
  width: min(280px, 22vw);
}

body.is-guild-active #screen-today .guild-mira-reaction::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 18px;
  width: 18px;
  height: 18px;
  border-left: 1px solid #d3b66f;
  border-bottom: 1px solid #d3b66f;
  background: rgba(244, 229, 191, 0.96);
  transform: rotate(45deg);
}

@media (max-width: 700px) {
  body.is-guild-active #screen-today .guild-desk-tabletop-plane {
    top: -18%;
    left: 4%;
    right: 4%;
    height: 38%;
  }

  body.is-guild-active #screen-today .guild-mira-reaction {
    left: 51%;
    bottom: 54%;
    width: 44%;
    max-width: 260px;
  }
}

/* Final Guild speaker layout authority. */
body.is-guild-active #screen-today .guild-reception-group .guild-mira-reaction {
  left: auto;
  right: 66%;
  bottom: 64%;
  width: min(250px, 68vw);
  z-index: 12;
}

body.is-guild-active #screen-today .guild-reception-group .guild-mira-reaction::after {
  left: auto;
  right: -10px;
  border: 0;
  border-top: 1px solid #d3b66f;
  border-right: 1px solid #d3b66f;
}

.guild-scroll-dialog[open] .guild-menu-mira {
  position: absolute;
  z-index: 2;
  left: clamp(8px, 2vw, 34px);
  bottom: 0;
  width: min(34vw, 430px);
  height: min(84svh, 720px);
  pointer-events: none;
}

.guild-scroll-dialog[open] .guild-menu-mira-sprite {
  position: absolute;
  inset: 12% 0 0;
  display: block;
  background: url("assets/adventure-guild/layered/characters/mira-attentive-v2.png?v=190") bottom center / contain no-repeat;
  filter: drop-shadow(0 15px 13px rgba(9, 5, 3, 0.7));
}

.guild-scroll-dialog[open][data-receptionist-state="welcoming"] .guild-menu-mira-sprite,
.guild-scroll-dialog[open][data-receptionist-state="pointing"] .guild-menu-mira-sprite,
.guild-scroll-dialog[open][data-receptionist-state="success"] .guild-menu-mira-sprite,
.guild-scroll-dialog[open][data-receptionist-state="surprised"] .guild-menu-mira-sprite,
.guild-scroll-dialog[open][data-receptionist-state="amused"] .guild-menu-mira-sprite {
  background-image: url("assets/adventure-guild/layered/characters/mira-welcoming-v2.png?v=190");
}

.guild-scroll-dialog[open] .guild-menu-mira-bubble {
  position: absolute;
  z-index: 3;
  top: 3%;
  left: 45%;
  width: min(260px, 68%);
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #d3b66f;
  border-radius: 7px;
  background: rgba(247, 234, 198, 0.98);
  color: #342519;
  box-shadow: 0 8px 20px rgba(12, 7, 3, 0.42);
  font: 600 0.95rem/1.42 Georgia, serif;
}

.guild-scroll-dialog[open] .guild-menu-mira-bubble::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  border-right: 1px solid #d3b66f;
  border-bottom: 1px solid #d3b66f;
  background: rgba(247, 234, 198, 0.98);
  transform: rotate(45deg);
}

.guild-scroll-dialog[open] .guild-scroll {
  width: min(900px, 72vw);
  margin: 0 1vw 0 auto;
}

@media (max-width: 720px) {
  body.is-guild-active #screen-today .guild-reception-group .guild-mira-reaction {
    left: auto;
    right: 48%;
    bottom: 66%;
    width: min(230px, 52vw);
  }

  .guild-scroll-dialog[open] .guild-menu-mira {
    left: 6px;
    top: 4px;
    bottom: auto;
    width: calc(100% - 12px);
    height: 142px;
  }

  .guild-scroll-dialog[open] .guild-menu-mira-sprite {
    inset: 0 auto 0 0;
    width: 132px;
    background-position: bottom left;
  }

  .guild-scroll-dialog[open] .guild-menu-mira-bubble {
    top: 14px;
    left: 112px;
    width: calc(100% - 122px);
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .guild-scroll-dialog[open] .guild-scroll {
    width: 100%;
    max-height: calc(100svh - 122px);
    margin: 116px 0 0;
  }

  .guild-scroll-dialog[open] .guild-scroll-body {
    max-height: calc(100svh - 122px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-today .guild-receptionist-sprite {
    transition: none;
  }
}

/* Guild progression V3 accounting and correction states. */
#screen-today .guild-journey-pool dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  width: 100%;
  margin: 10px 0 0;
}

#screen-today .guild-journey-pool dl div {
  padding: 7px 8px;
  border: 1px solid rgba(96, 68, 34, 0.35);
  background: rgba(255, 248, 222, 0.48);
}

#screen-today .guild-journey-pool dt,
#screen-today .guild-journey-pool dd {
  margin: 0;
  color: #2d261b;
}

#screen-today .guild-journey-pool dt {
  font-size: 0.72rem;
}

#screen-today .guild-journey-pool dd {
  font-weight: 800;
}

#screen-today .guild-allocation-repair {
  margin: 12px 0;
  padding: 12px;
  border: 2px solid #8d3f2c;
  background: rgba(255, 239, 199, 0.94);
  color: #2c2119;
}

#screen-today .guild-allocation-repair article {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid rgba(99, 53, 36, 0.35);
}

#screen-today .guild-allocation-repair article div {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

#screen-today .guild-allocation-repair button,
#screen-today .guild-allocation-repair select {
  min-height: 44px;
}

#screen-today .guild-allocation-history .is-reversed {
  opacity: 0.72;
  text-decoration: line-through;
}

.personal-reward-editor {
  display: grid;
  grid-template-columns: 2fr 0.7fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin: 16px 0;
  padding: 16px;
}
.personal-reward-editor label { display: grid; gap: 5px; }
.personal-reward-editor .personal-reward-detail { grid-column: 1 / -2; }
.real-reward-admin { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 700px) {
  .personal-reward-editor { grid-template-columns: 1fr; }
  .personal-reward-editor .personal-reward-detail { grid-column: auto; }
}

.guild-dispatch-stats dt,
.guild-dispatch-stats dd { margin: 0; }
.guild-dispatch-stats dt { color: var(--surface-muted); font-size: 0.76rem; }
.guild-dispatch-stats dd { font-weight: 800; }

.guild-attention-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.activity-date-control {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 6px;
}

.activity-date-control button { min-width: 44px; min-height: 44px; }

.activity-pending-resolution {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #a36d2f;
  background: #fff4d8;
  color: #33281a;
}

.activity-pending-resolution article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(76, 53, 25, 0.2);
}

.activity-pending-resolution article span { display: grid; }
.activity-pending-resolution article button { min-height: 44px; }
.activity-overlap-warning { display: block; color: #8d241d; font-weight: 800; }
.activity-step-role { display: block; color: #5d4e38; font-weight: 700; }
.town-activity-project-progress {
  padding: 9px 11px;
  border-left: 4px solid #2f735a;
  background: rgba(239, 229, 197, 0.9);
  color: #24372d;
  font-weight: 800;
}

@media (max-width: 720px) {
  .guild-interior { min-height: 680px; }
  .guild-hotspot-receptionist { left: -7%; width: 66%; height: 78%; }
  .guild-hotspot-board { right: 4%; top: 8%; width: 35%; height: 24%; }
  .guild-hotspot-dispatch { right: 4%; bottom: 30%; width: 38%; }
  .guild-hotspot-exit { right: 4%; bottom: 22%; }
  .guild-reception-dialogue { left: 4%; right: 4%; bottom: 3%; width: auto; }
  .guild-reception-options { grid-template-columns: 1fr; }
  .guild-dispatch-stats { grid-template-columns: 1fr; }
  .guild-quest-details { grid-template-columns: 1fr; }
  .activity-pending-resolution article { grid-template-columns: 1fr; }
}


.area-gardens {
  --area-bg: url("assets/interior-fiber-garden-stage-basic.png?v=89");
  --area-position: center 48%;
  --area-glow: rgba(174, 232, 151, 0.24);
  --area-shadow: rgba(13, 37, 21, 0.5);
}

.area-training {
  --area-bg: url("assets/interior-training-hall-stage-basic.png?v=89");
  --area-position: center 46%;
  --area-glow: rgba(255, 212, 142, 0.2);
  --area-shadow: rgba(20, 20, 26, 0.52);
}

.area-oracle {
  --area-bg: url("assets/interior-mana-wells-stage-basic.png?v=89");
  --area-position: center 42%;
  --area-glow: rgba(146, 202, 255, 0.24);
  --area-shadow: rgba(13, 24, 42, 0.52);
}

.area-dungeon {
  --area-bg: url("assets/interior-dungeon-gate-stage-basic.png?v=89");
  --area-position: center 45%;
  --area-glow: rgba(145, 91, 255, 0.25);
  --area-shadow: rgba(5, 7, 18, 0.76);
}

.town-area-screen.has-keeper.is-active {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100svh;
  min-height: 100svh;
  padding: clamp(76px, 9svh, 112px) clamp(18px, 3vw, 46px) clamp(18px, 4svh, 34px);
  overflow: hidden;
}

.town-area-screen.has-keeper.is-active > .section-heading:first-child,
.town-area-screen.has-keeper.is-active > .intro-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.town-area-screen.has-keeper.is-active > .keeper-dialogue {
  min-height: min(760px, calc(100svh - 132px));
  align-items: end;
}

.town-area-screen.has-keeper.is-active > .keeper-dialogue + .section-heading,
.town-area-screen.has-keeper.is-active > .keeper-dialogue + .section-heading + :not(.is-keeper-open) {
  display: none !important;
}

.town-area-screen.has-keeper.is-active > :not(.keeper-dialogue):not(.section-heading:first-child):not(.intro-copy):not(.is-keeper-open) {
  display: none !important;
}

.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open {
  --building-menu-art: var(--room-menu-art, url("assets/adventure-guild/layered/ui/parchment-mira-conversation.png?v=172"));
  position: fixed;
  z-index: 92;
  top: clamp(84px, 10svh, 126px);
  right: clamp(14px, 4vw, 62px);
  bottom: clamp(16px, 4svh, 38px);
  left: clamp(340px, 36vw, 610px);
  width: auto;
  max-width: none;
  margin: 0;
  overflow: auto;
  border: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 247, 221, 0.72), rgba(229, 198, 145, 0.52)),
    var(--building-menu-art) center / 100% 100% no-repeat,
    rgba(239, 213, 164, 0.94);
  color: #352111;
  box-shadow: 0 28px 56px rgba(3, 5, 5, 0.54), inset 0 0 0 1px rgba(121, 77, 36, 0.42);
  backdrop-filter: blur(6px) saturate(1.04);
  scrollbar-color: rgba(105, 67, 32, 0.62) rgba(234, 203, 151, 0.42);
}

.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open[data-keeper-screen="market"] {
  --building-menu-art: url("assets/adventure-guild/layered/ui/parchment-available-quests.png?v=172");
}

.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open[data-keeper-screen="gardens"] {
  --building-menu-art: url("assets/adventure-guild/layered/ui/parchment-notice.png?v=172");
}

.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open[data-keeper-screen="dungeon"] {
  --building-menu-art: url("assets/adventure-guild/layered/ui/parchment-turn-in.png?v=172");
}

.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open[data-keeper-screen="coach"] {
  --building-menu-art: url("assets/adventure-guild/layered/ui/parchment-mira-conversation.png?v=172");
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open :where(h2, h3, strong, label, legend),
.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open :where(h2, h3, strong, label, legend) {
  color: #352111;
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open :where(p, span, small),
.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open :where(p, span, small) {
  color: #4d3921;
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open :where(.section-heading, .surface-light, .garden-seed-card, .garden-plot-card, .inventory-card, .meal-card, .crafting-card, .shop-card, .encounter-card, .coach-api-card, .personal-chatgpt-card, .pet-coach-card),
.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open :where(.section-heading, .surface-light, .garden-seed-card, .garden-plot-card, .inventory-card, .meal-card, .crafting-card, .shop-card, .encounter-card, .coach-api-card, .personal-chatgpt-card, .pet-coach-card) {
  border-color: rgba(123, 78, 35, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 248, 224, 0.82), rgba(236, 207, 155, 0.62));
  color: #352111;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 245, 0.24), 0 10px 22px rgba(67, 39, 16, 0.16);
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open :where(button:not(.keeper-panel-close), select, input, textarea),
.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open :where(button:not(.keeper-panel-close), select, input, textarea) {
  border-color: rgba(107, 67, 31, 0.48);
  background: rgba(255, 250, 232, 0.9);
  color: #2e2112;
}

#screen-log.has-inn-interior > .keeper-folded.is-keeper-open :where(button:not(.keeper-panel-close):hover, button:not(.keeper-panel-close):focus-visible),
.town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open :where(button:not(.keeper-panel-close):hover, button:not(.keeper-panel-close):focus-visible) {
  outline: 2px solid rgba(37, 126, 118, 0.72);
  outline-offset: 2px;
  border-color: rgba(37, 126, 118, 0.72);
}

.keeper-dialogue {
  position: relative;
  display: grid;
  grid-template-columns: clamp(300px, 38vw, 560px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 12px 18px;
  align-items: end;
  margin-bottom: 16px;
  padding: 6px 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff8df;
  box-shadow: none;
  backdrop-filter: none;
}

.keeper-dialogue::after {
  content: none;
}

.keeper-portrait {
  position: relative;
  display: grid;
  grid-row: 1 / 3;
  align-self: end;
  place-items: end center;
  min-height: clamp(330px, 55svh, 620px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
}

.keeper-portrait::before {
  content: none;
}

.keeper-portrait img,
.keeper-style-reference {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: clamp(330px, 55svh, 620px);
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 50% 88%;
  opacity: 1;
  filter: saturate(1.06) contrast(1.02) drop-shadow(0 24px 28px rgba(0, 0, 0, 0.34));
  animation: keeper-npc-idle 5.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-place="log"] .keeper-portrait img,
.keeper-dialogue[data-keeper-place="market"] .keeper-portrait img,
.keeper-dialogue[data-keeper-place="dungeon"] .keeper-portrait img {
  max-height: clamp(390px, 68svh, 760px);
  object-fit: contain;
  object-position: center bottom;
}

.keeper-dialogue[data-keeper-place="market"] .keeper-portrait img {
  max-height: clamp(380px, 66svh, 730px);
}

.keeper-dialogue[data-keeper-place="dungeon"] .keeper-portrait img {
  max-height: clamp(420px, 72svh, 800px);
}

.keeper-portrait .npc-rig {
  display: none !important;
}

.keeper-portrait--sprite {
  place-items: end center;
  min-height: clamp(360px, 60svh, 660px);
}

.keeper-portrait--sprite::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: 2%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(5, 8, 7, 0.34), transparent 70%);
  filter: blur(4px);
  opacity: 0.8;
}

.keeper-sprite-stage {
  position: relative;
  z-index: 3;
  width: min(100%, 470px);
  height: clamp(360px, 60svh, 660px);
  align-self: end;
  background: transparent;
  filter:
    drop-shadow(0 24px 24px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 14px rgba(255, 239, 185, 0.16));
}

.keeper-sprite-stage::after {
  content: none;
}

.keeper-sprite {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background-image: var(--keeper-sprite-sheet);
  background-repeat: no-repeat;
  background-size: 400% 500%;
  background-position: 0% var(--keeper-sprite-row);
  transform-origin: 50% 94%;
  animation: keeper-sprite-npc 3.8s steps(1, end) infinite;
}

.keeper-dialogue[data-keeper-motion="ledger"] .keeper-sprite {
  animation-name: keeper-sprite-ledger;
}

.keeper-dialogue[data-keeper-motion="blade"] .keeper-sprite {
  animation-name: keeper-sprite-blade;
}

.keeper-dialogue[data-keeper-motion="mug"] .keeper-sprite {
  animation-name: keeper-sprite-mug;
}

.keeper-dialogue[data-keeper-motion="coin"] .keeper-sprite {
  animation-name: keeper-sprite-coin;
}

.keeper-dialogue[data-keeper-motion="lantern"] .keeper-sprite {
  animation-name: keeper-sprite-lantern;
}

.keeper-dialogue.is-speaking .keeper-sprite {
  animation-duration: 3.2s;
}

.art-npc-rig,
.art-npc-rig * {
  box-sizing: border-box;
}

.art-npc-rig {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.24));
  animation: art-npc-idle 4.4s ease-in-out infinite;
}

.art-piece {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--keeper-art) center bottom / contain no-repeat;
  will-change: transform;
}

.art-body {
  z-index: 2;
  opacity: 0.58;
  clip-path: polygon(24% 34%, 76% 34%, 84% 100%, 16% 100%);
  transform-origin: 50% 78%;
  animation: art-body-breathe 3.1s ease-in-out infinite;
}

.art-head-group,
.art-limb {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform;
}

.art-head-group {
  z-index: 6;
  transform-origin: 50% 39%;
  animation: art-head-talk 2.7s ease-in-out infinite;
}

.art-head {
  z-index: 5;
  opacity: 0.92;
  clip-path: ellipse(26% 24% at 50% 25%);
}

.art-limb {
  z-index: 4;
}

.art-left-limb {
  transform-origin: 38% 44%;
  animation: art-arm-left-greet 3.8s ease-in-out infinite;
}

.art-right-limb {
  transform-origin: 62% 44%;
  animation: art-arm-right-greet 3.8s ease-in-out infinite;
}

.art-arm-left,
.art-arm-right {
  opacity: 0.9;
}

.art-arm-left {
  clip-path: polygon(12% 31%, 49% 37%, 47% 89%, 6% 93%);
}

.art-arm-right {
  clip-path: polygon(51% 37%, 88% 31%, 94% 93%, 53% 89%);
}

.art-mouth {
  position: absolute;
  z-index: 7;
  left: 48.45%;
  top: 28.35%;
  width: 3.7%;
  height: 1.45%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(18, 7, 10, 0.82), rgba(72, 28, 34, 0.76) 56%, transparent 62%),
    linear-gradient(180deg, rgba(242, 151, 141, 0.44), rgba(70, 28, 34, 0.68));
  box-shadow:
    inset 0 1px 0 rgba(255, 207, 187, 0.28),
    0 0 7px rgba(255, 228, 187, 0.14);
  opacity: 0;
  transform-origin: 50% 50%;
}

.keeper-dialogue.is-speaking .art-mouth {
  animation: art-mouth-talk 980ms steps(5, end) infinite;
}

.art-hand-prop,
.art-spark {
  position: absolute;
  z-index: 8;
  display: block;
  pointer-events: none;
  opacity: 0;
}

.art-hand-prop {
  transform-origin: 50% 50%;
}

.keeper-dialogue[data-keeper-motion="ledger"] .art-right-limb {
  animation: art-arm-ledger 2.7s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="ledger"] .art-hand-prop-right {
  left: 63%;
  top: 62%;
  width: 17%;
  height: 8.5%;
  opacity: 0.9;
  border: 1px solid rgba(101, 70, 40, 0.7);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(69, 47, 30, 0.38) 0 8%, transparent 9%),
    linear-gradient(110deg, #f5e5bd, #a97745);
  transform: rotate(-12deg) translate(-8%, 2%);
  animation: art-ledger-grip 2.7s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="blade"] .art-right-limb {
  animation: art-arm-blade 2.9s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="blade"] .art-hand-prop-right {
  left: 66.5%;
  top: 35%;
  width: 5%;
  height: 37%;
  opacity: 0.95;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fdff, #8898aa 58%, #443d4d 59% 100%);
  box-shadow: 0 0 10px rgba(227, 244, 255, 0.34);
  transform-origin: 50% 88%;
  transform: rotate(-18deg) translate(-22%, -4%);
  animation: art-blade-held 2.9s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .art-left-limb {
  animation: art-arm-mug 4.4s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .art-hand-prop-left {
  left: 30%;
  top: 63%;
  width: 10.5%;
  height: 7.5%;
  opacity: 0.95;
  border: 2px solid rgba(91, 55, 34, 0.86);
  border-radius: 6px 6px 10px 10px;
  background:
    radial-gradient(ellipse at 36% 18%, rgba(255, 245, 202, 0.9), transparent 35%),
    linear-gradient(180deg, #d59a5d, #6d432a);
  transform-origin: 70% 40%;
  transform: translate(-12%, -18%) rotate(-7deg);
  animation: art-mug-held 4.4s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .art-hand-prop-left::after {
  content: "";
  position: absolute;
  right: -38%;
  top: 20%;
  width: 42%;
  height: 52%;
  border: 2px solid rgba(91, 55, 34, 0.86);
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.keeper-dialogue[data-keeper-motion="coin"] .art-right-limb {
  animation: art-arm-coin 2.5s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="coin"] .art-spark {
  left: 66%;
  top: 34%;
  width: 15%;
  height: 14%;
  opacity: 0.85;
  background:
    radial-gradient(circle at 24% 64%, #efc65d 0 10%, transparent 11%),
    radial-gradient(circle at 62% 32%, #fff2aa 0 8%, transparent 9%),
    radial-gradient(circle at 74% 70%, rgba(255, 232, 132, 0.82) 0 7%, transparent 8%);
  filter: drop-shadow(0 0 8px rgba(255, 222, 107, 0.6));
  animation: art-coin-pop 2.5s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="lantern"] .art-left-limb {
  animation: art-arm-lantern 3.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="lantern"] .art-hand-prop-left {
  left: 25%;
  top: 63%;
  width: 10%;
  height: 12%;
  opacity: 0.95;
  border: 2px solid rgba(77, 58, 37, 0.9);
  border-radius: 8px;
  background: radial-gradient(circle, #ffe08d, #c97944 52%, #3a2530);
  box-shadow: 0 0 24px rgba(255, 224, 139, 0.62);
  transform-origin: 50% -20%;
  transform: translate(-16%, -8%) rotate(-7deg);
  animation: art-lantern-held 3.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="pet"] .art-npc-rig {
  animation: art-pet-buddy 2.6s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="pet"] .art-head {
  clip-path: ellipse(36% 28% at 50% 36%);
}

.keeper-dialogue[data-keeper-motion="pet"] .art-body {
  clip-path: ellipse(38% 36% at 50% 63%);
}

.keeper-dialogue[data-keeper-motion="pet"] .art-left-limb,
.keeper-dialogue[data-keeper-motion="pet"] .art-right-limb {
  display: none;
}

.keeper-dialogue[data-keeper-motion="pet"] .art-spark {
  left: 63%;
  top: 30%;
  width: 18%;
  height: 18%;
  opacity: 0.78;
  background:
    radial-gradient(circle at 30% 55%, #fff7da 0 8%, transparent 9%),
    radial-gradient(circle at 58% 28%, #ffd2f1 0 7%, transparent 8%),
    radial-gradient(circle at 75% 62%, #9ce7ff 0 7%, transparent 8%);
  animation: art-pet-sparkle 2.2s ease-in-out infinite;
}

.npc-rig,
.npc-rig * {
  box-sizing: border-box;
}

.npc-rig {
  --npc-skin: #f0c698;
  --npc-skin-shadow: #c98b67;
  --npc-hair: #6f4b32;
  --npc-hair-dark: #3e261b;
  --npc-main: #3d7b56;
  --npc-main-dark: #244934;
  --npc-trim: #e6c067;
  --npc-prop: #b77745;
  --npc-glow: rgba(255, 224, 139, 0.55);
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0;
  width: min(88%, 330px);
  height: min(96%, 540px);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: npc-rig-idle 3.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-place="today"] .npc-rig {
  --npc-main: #2e7465;
  --npc-main-dark: #173f37;
  --npc-trim: #e9c76f;
  --npc-prop: #d5b267;
}

.keeper-dialogue[data-keeper-place="character"] .npc-rig {
  --npc-main: #2f5d9f;
  --npc-main-dark: #1d355f;
  --npc-trim: #c7d8ff;
  --npc-prop: #bdc8d8;
}

.keeper-dialogue[data-keeper-place="log"] .npc-rig {
  --npc-main: #46754a;
  --npc-main-dark: #283f2d;
  --npc-trim: #e9c88b;
  --npc-prop: #b77745;
}

.keeper-dialogue[data-keeper-place="market"] .npc-rig {
  --npc-main: #8b5b2a;
  --npc-main-dark: #4e3118;
  --npc-trim: #f1ce5f;
  --npc-prop: #f0c851;
}

.keeper-dialogue[data-keeper-place="dungeon"] .npc-rig {
  --npc-main: #3f3567;
  --npc-main-dark: #1c1830;
  --npc-trim: #c0a4ff;
  --npc-prop: #ffe08d;
}

.keeper-dialogue[data-keeper-place="coach"] .npc-rig {
  --npc-main: #7350a7;
  --npc-main-dark: #352353;
  --npc-trim: #ffd2f1;
  --npc-prop: #9ce7ff;
}

.npc-rig > span,
.npc-arm,
.npc-arm span {
  position: absolute;
  display: block;
}

.npc-rig-shadow {
  left: 16%;
  right: 16%;
  bottom: 3%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(4, 7, 6, 0.5), transparent 72%);
  filter: blur(1px);
}

.npc-leg {
  bottom: 8%;
  width: 16%;
  height: 26%;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, var(--npc-main-dark), #191c1b);
  transform-origin: 50% 0;
}

.npc-leg-left {
  left: 36%;
  transform: rotate(3deg);
}

.npc-leg-right {
  right: 36%;
  transform: rotate(-3deg);
}

.npc-torso {
  left: 30%;
  bottom: 31%;
  width: 40%;
  height: 34%;
  border: 4px solid rgba(255, 247, 218, 0.18);
  border-radius: 44% 44% 30% 30%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 247, 218, 0.24) 48% 52%, transparent 53%),
    radial-gradient(ellipse at 50% 12%, rgba(255, 247, 218, 0.22), transparent 38%),
    linear-gradient(180deg, var(--npc-main), var(--npc-main-dark));
  box-shadow: inset 0 -18px 0 rgba(0, 0, 0, 0.12);
  transform-origin: 50% 100%;
  animation: npc-torso-breathe 2.8s ease-in-out infinite;
}

.npc-neck {
  left: 44%;
  bottom: 64%;
  width: 12%;
  height: 9%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--npc-skin), var(--npc-skin-shadow));
}

.npc-head {
  left: 33%;
  bottom: 69%;
  width: 34%;
  height: 23%;
  border-radius: 46% 46% 44% 44%;
  background:
    radial-gradient(circle at 35% 36%, rgba(255, 255, 255, 0.5), transparent 10%),
    linear-gradient(180deg, #f6d5ad, var(--npc-skin) 58%, var(--npc-skin-shadow));
  box-shadow: inset 0 -10px 0 rgba(139, 82, 59, 0.12);
  transform-origin: 50% 82%;
  animation: npc-head-talk 3.4s ease-in-out infinite;
}

.npc-hair {
  left: 30%;
  bottom: 80%;
  width: 40%;
  height: 17%;
  border-radius: 52% 52% 42% 42%;
  background:
    radial-gradient(circle at 72% 22%, var(--npc-trim) 0 7%, transparent 8%),
    radial-gradient(circle at 34% 66%, var(--npc-hair-dark) 0 14%, transparent 15%),
    linear-gradient(140deg, var(--npc-hair), var(--npc-hair-dark));
  transform-origin: 50% 90%;
  animation: npc-hair-sway 4.2s ease-in-out infinite;
}

.npc-face {
  left: 39%;
  bottom: 74%;
  width: 22%;
  height: 11%;
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 34%, #273326 0 5%, transparent 6%),
    radial-gradient(circle at 72% 34%, #273326 0 5%, transparent 6%),
    radial-gradient(ellipse at 50% 74%, #7c3b3b 0 10%, transparent 11%);
  transform-origin: 50% 75%;
  animation: npc-mouth-line 1.1s steps(4, end) infinite;
}

.npc-arm {
  top: 43%;
  width: 13%;
  height: 32%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--npc-main), var(--npc-main-dark));
  transform-origin: 50% 10%;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.12);
}

.npc-arm-left {
  left: 24%;
  transform: rotate(18deg);
}

.npc-arm-right {
  right: 24%;
  transform: rotate(-18deg);
}

.npc-hand {
  left: 50%;
  bottom: -7%;
  width: 120%;
  height: 18%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--npc-skin), var(--npc-skin-shadow));
  transform: translateX(-50%);
}

.npc-held-prop {
  left: 46%;
  top: 54%;
  width: 18%;
  height: 14%;
  opacity: 0;
}

.npc-action-mark {
  left: 60%;
  top: 24%;
  width: 20%;
  height: 18%;
  opacity: 0;
}

.keeper-dialogue[data-keeper-motion="ledger"] .npc-arm-right {
  animation: npc-arm-ledger 2.4s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="ledger"] .npc-held-prop {
  left: 56%;
  top: 59%;
  width: 22%;
  height: 11%;
  opacity: 1;
  border-radius: 4px;
  background: linear-gradient(110deg, #f1dfb7, #9b6f3f);
  transform: rotate(-12deg);
}

.keeper-dialogue[data-keeper-motion="blade"] .npc-arm-right {
  animation: npc-arm-trainer 2.8s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="blade"] .npc-held-prop {
  left: 62%;
  top: 34%;
  width: 8%;
  height: 42%;
  opacity: 1;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4fbff, #8795a5);
  transform-origin: 50% 85%;
  animation: npc-blade-sweep 2.8s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .npc-arm-left {
  animation: npc-arm-mug 4.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .npc-held-prop {
  left: 28%;
  top: 59%;
  width: 22%;
  height: 14%;
  opacity: 1;
  border: 3px solid #70452b;
  border-radius: 8px 8px 12px 12px;
  background:
    radial-gradient(ellipse at 35% 22%, rgba(255, 245, 202, 0.86), transparent 36%),
    linear-gradient(180deg, #c68d55, #6b432a);
  transform-origin: 70% 40%;
  animation: npc-mug-setdown 4.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .npc-held-prop::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 9px;
  width: 14px;
  height: 18px;
  border: 3px solid #70452b;
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.keeper-dialogue[data-keeper-motion="coin"] .npc-arm-right {
  animation: npc-arm-coin 2.4s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="coin"] .npc-action-mark {
  opacity: 1;
  background:
    radial-gradient(circle at 25% 70%, var(--npc-prop) 0 9%, transparent 10%),
    radial-gradient(circle at 65% 35%, #fff2a6 0 7%, transparent 8%);
  animation: npc-coin-pop 2.4s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="lantern"] .npc-arm-left {
  animation: npc-arm-lantern 3s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="lantern"] .npc-held-prop {
  left: 20%;
  top: 62%;
  width: 18%;
  height: 18%;
  opacity: 1;
  border: 3px solid #6b5030;
  border-radius: 8px;
  background: radial-gradient(circle, #ffe08d, #ba713f 52%, #3a2530);
  box-shadow: 0 0 22px var(--npc-glow);
  animation: npc-lantern-sway 3s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="pet"] .npc-rig {
  animation: npc-pet-bounce-rig 2.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="pet"] .npc-action-mark {
  opacity: 1;
  background:
    radial-gradient(circle at 30% 55%, #fff7da 0 8%, transparent 9%),
    radial-gradient(circle at 58% 28%, #ffd2f1 0 7%, transparent 8%),
    radial-gradient(circle at 75% 62%, #9ce7ff 0 7%, transparent 8%);
  animation: npc-sparkle-pop 2s ease-in-out infinite;
}

.npc-breath,
.npc-mouth,
.npc-gesture,
.npc-prop {
  display: none !important;
}

.keeper-dialogue.is-speaking .keeper-portrait {
  box-shadow: none;
}

.keeper-dialogue.is-speaking .keeper-portrait img {
  animation: keeper-npc-idle 5.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="ledger"].is-speaking .keeper-portrait img {
  animation: keeper-npc-ledger 4.6s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="blade"].is-speaking .keeper-portrait img {
  animation: keeper-npc-trainer 4.8s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"].is-speaking .keeper-portrait img {
  animation: keeper-npc-offer 5s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="coin"].is-speaking .keeper-portrait img {
  animation: keeper-npc-merchant 4.6s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="lantern"].is-speaking .keeper-portrait img {
  animation: keeper-npc-guard 5.4s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="pet"].is-speaking .keeper-portrait img {
  animation: keeper-npc-pet 4.2s ease-in-out infinite;
}

.npc-shadow,
.npc-breath,
.npc-mouth,
.npc-gesture,
.npc-prop {
  position: absolute;
  pointer-events: none;
}

.npc-shadow {
  z-index: 1;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(8, 12, 10, 0.38), transparent 72%);
  opacity: 0.84;
  animation: keeper-room-glow 4.4s ease-in-out infinite;
}

.npc-breath {
  z-index: 3;
  left: 42%;
  top: 38%;
  width: 15%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 247, 218, 0.24), rgba(255, 247, 218, 0.08) 44%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0.52;
  animation: npc-breath 2.9s ease-in-out infinite;
}

.npc-mouth {
  z-index: 4;
  left: 49%;
  top: 23%;
  width: 5%;
  height: 1.8%;
  border-radius: 999px;
  background: rgba(77, 34, 35, 0.72);
  box-shadow: 0 0 8px rgba(255, 232, 190, 0.32);
  opacity: 0;
  transform-origin: 50% 50%;
}

.keeper-dialogue.is-speaking .npc-mouth {
  animation: npc-mouth-talk 980ms steps(4, end) infinite;
}

.npc-gesture {
  z-index: 5;
  left: 58%;
  top: 22%;
  width: 30%;
  height: 30%;
  opacity: 0;
}

.npc-prop {
  z-index: 4;
  left: 24%;
  top: 38%;
  width: 36%;
  height: 34%;
  opacity: 0;
}

.keeper-dialogue[data-keeper-motion="ledger"] .npc-gesture {
  opacity: 0.86;
  border-top: 3px solid rgba(255, 232, 146, 0.75);
  border-right: 3px solid rgba(255, 232, 146, 0.36);
  border-radius: 50%;
  animation: npc-wave-small 2.4s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="blade"] .npc-gesture {
  opacity: 0.72;
  background:
    linear-gradient(64deg, transparent 46%, rgba(255, 247, 218, 0.74) 47% 51%, transparent 52%),
    radial-gradient(circle at 72% 22%, rgba(255, 232, 146, 0.58), transparent 10%);
  animation: npc-training-sweep 2.8s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .npc-prop {
  left: 16%;
  top: 45%;
  width: 34%;
  height: 28%;
  opacity: 1;
  animation: innkeeper-mug-setdown 4.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .npc-prop::before {
  content: "";
  position: absolute;
  left: 34%;
  top: 42%;
  width: 58px;
  height: 42px;
  border: 3px solid rgba(118, 73, 42, 0.9);
  border-radius: 8px 8px 12px 12px;
  background:
    radial-gradient(ellipse at 35% 22%, rgba(255, 245, 202, 0.86), transparent 36%),
    linear-gradient(180deg, #c68d55, #6b432a);
  box-shadow: inset 0 -8px 0 rgba(63, 37, 22, 0.22), 0 12px 14px rgba(5, 8, 6, 0.28);
}

.keeper-dialogue[data-keeper-motion="mug"] .npc-prop::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 16%;
  width: 46px;
  height: 48px;
  background:
    radial-gradient(ellipse at 45% 80%, rgba(255, 249, 219, 0.46), transparent 58%),
    radial-gradient(ellipse at 62% 48%, rgba(255, 249, 219, 0.32), transparent 52%);
  filter: blur(1px);
  animation: innkeeper-steam-rise 1.8s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .npc-gesture {
  left: 12%;
  top: 45%;
  width: 48%;
  height: 28%;
  opacity: 1;
  transform-origin: 72% 18%;
  animation: innkeeper-arm-setdown 4.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="mug"] .npc-gesture::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 34%;
  width: 86px;
  height: 20px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(55, 98, 64, 0.96), rgba(116, 153, 82, 0.92));
  box-shadow: 0 8px 12px rgba(5, 8, 6, 0.2);
}

.keeper-dialogue[data-keeper-motion="coin"] .npc-gesture {
  opacity: 0.82;
  background:
    radial-gradient(circle at 32% 48%, rgba(255, 232, 132, 0.76), transparent 10%),
    radial-gradient(circle at 48% 34%, rgba(255, 247, 191, 0.56), transparent 8%),
    radial-gradient(circle at 64% 58%, rgba(255, 232, 132, 0.5), transparent 7%);
  mix-blend-mode: screen;
  animation: keeper-coin-spark 2.4s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="lantern"] .npc-prop {
  left: 50%;
  top: 42%;
  opacity: 0.78;
  background: radial-gradient(circle at 50% 50%, rgba(255, 217, 108, 0.66), rgba(255, 177, 80, 0.28) 24%, transparent 52%);
  mix-blend-mode: screen;
  animation: keeper-lantern-glow 2.6s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-motion="pet"] .npc-gesture {
  left: 62%;
  top: 28%;
  opacity: 0.8;
  background:
    radial-gradient(circle at 30% 50%, rgba(255, 247, 218, 0.7), transparent 8%),
    radial-gradient(circle at 50% 32%, rgba(255, 247, 218, 0.5), transparent 6%),
    radial-gradient(circle at 68% 50%, rgba(255, 247, 218, 0.62), transparent 7%);
  animation: npc-pet-sparkle 2.3s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-place="market"] .keeper-portrait {
  background: transparent;
  min-height: clamp(300px, 50svh, 560px);
  overflow: visible;
}

.keeper-dialogue[data-keeper-place="market"] .keeper-style-reference {
  transform-origin: 50% 92%;
  animation: market-keeper-counter-lean 5.4s ease-in-out infinite;
  filter:
    saturate(1.05)
    contrast(1.02)
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.34));
}

.keeper-dialogue[data-keeper-place="dungeon"] .keeper-portrait {
  background: transparent;
  min-height: clamp(360px, 62svh, 680px);
  overflow: visible;
}

.keeper-dialogue[data-keeper-place="dungeon"] .keeper-portrait::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 17%;
  right: 17%;
  bottom: 4%;
  height: 32%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(185, 201, 255, 0.24), transparent 58%),
    radial-gradient(ellipse at 45% 72%, rgba(104, 234, 255, 0.14), transparent 68%);
  filter: blur(16px);
  opacity: 0.82;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: dungeon-keeper-ghost-aura 5.8s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-place="dungeon"] .keeper-portrait::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 22%;
  right: 22%;
  bottom: 1%;
  height: 16%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 45% 48%, rgba(218, 229, 255, 0.26), transparent 58%),
    radial-gradient(ellipse at 60% 60%, rgba(115, 210, 232, 0.16), transparent 64%);
  filter: blur(10px);
  opacity: 0.68;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: dungeon-keeper-ghost-mist 4.6s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-place="dungeon"] .keeper-style-reference {
  opacity: 0.78;
  transform-origin: 50% 90%;
  filter:
    saturate(0.86)
    contrast(1.04)
    drop-shadow(0 0 20px rgba(177, 197, 255, 0.42))
    drop-shadow(0 26px 32px rgba(0, 0, 0, 0.28));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.82) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.82) 78%, transparent 100%);
  animation: dungeon-keeper-ghost-drift 6.6s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-place="gardens"] .keeper-portrait {
  background: transparent;
  min-height: clamp(320px, 54svh, 610px);
  overflow: visible;
}

.keeper-dialogue[data-keeper-place="gardens"] .keeper-portrait::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: 2%;
  height: 18%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(152, 224, 134, 0.26), transparent 62%),
    radial-gradient(ellipse at 42% 60%, rgba(255, 226, 142, 0.16), transparent 68%);
  filter: blur(10px);
  opacity: 0.78;
  mix-blend-mode: screen;
  animation: garden-keeper-leaf-glow 4.8s ease-in-out infinite;
  pointer-events: none;
}

.keeper-dialogue[data-keeper-place="gardens"] .keeper-style-reference {
  transform-origin: 50% 92%;
  filter:
    saturate(1.07)
    contrast(1.02)
    drop-shadow(0 22px 24px rgba(18, 42, 24, 0.32))
    drop-shadow(0 0 16px rgba(154, 224, 131, 0.18));
  animation: garden-keeper-tend 5.2s ease-in-out infinite;
}

.keeper-dialogue[data-keeper-place="log"] .keeper-portrait {
  background: transparent;
}

.keeper-dialogue[data-keeper-place="market"] .keeper-portrait--sprite::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 4%;
  right: 4%;
  bottom: -2%;
  height: 34%;
  border: 2px solid rgba(91, 55, 25, 0.9);
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(180deg, rgba(166, 101, 43, 0.96), rgba(84, 45, 21, 0.99)),
    repeating-linear-gradient(90deg, rgba(255, 219, 136, 0.14) 0 2px, transparent 2px 24px);
  box-shadow: 0 22px 30px rgba(4, 3, 2, 0.42);
}

.keeper-dialogue[data-keeper-place="market"] .keeper-sprite-stage {
  width: min(100%, 440px);
  height: clamp(320px, 51svh, 560px);
  transform: translateY(8%);
}

.keeper-dialogue[data-keeper-place="dungeon"] .keeper-sprite-stage {
  width: min(100%, 500px);
  height: clamp(390px, 64svh, 700px);
  transform: translateY(0);
}

.keeper-dialogue[data-keeper-place="dungeon"] .keeper-sprite {
  background-position-y: 100%;
}

.keeper-copy {
  display: grid;
  gap: 4px;
  align-content: start;
  align-self: end;
  padding: 14px;
  border: 1px solid rgba(129, 84, 39, 0.5);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 244, 211, 0.88), rgba(231, 196, 137, 0.78)),
    url("assets/adventure-guild/layered/ui/parchment-notice.png?v=172") center / 100% 100% no-repeat;
  box-shadow: 0 18px 42px rgba(3, 8, 7, 0.34), inset 0 0 0 1px rgba(255, 255, 245, 0.2);
  backdrop-filter: blur(5px);
}

.keeper-copy > span {
  color: #765028;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.keeper-copy h3 {
  margin: 0;
  color: #352111;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
}

.keeper-tone,
.keeper-prompt {
  margin: 0;
  color: #4d3921;
}

.keeper-prompt {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 236, 168, 0.34);
  border-radius: 8px;
  background: rgba(255, 250, 231, 0.54);
  color: #352111;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: speech-glow 3.8s ease-in-out infinite;
}

.keeper-prompt::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(255, 236, 168, 0.34);
  border-bottom: 1px solid rgba(255, 236, 168, 0.34);
  background: rgba(255, 250, 231, 0.86);
  transform: rotate(45deg);
}

.keeper-options {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
  align-self: start;
  padding: 10px;
  border: 1px solid rgba(129, 84, 39, 0.5);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 244, 211, 0.82), rgba(226, 190, 127, 0.74)),
    url("assets/adventure-guild/layered/ui/parchment-mira-conversation.png?v=172") center / 100% 100% no-repeat;
  box-shadow: 0 14px 34px rgba(3, 8, 7, 0.28);
  backdrop-filter: blur(5px);
}

.keeper-options button {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 74px;
  padding: 10px 11px;
  border: 1px solid rgba(111, 72, 34, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 230, 0.84), rgba(226, 190, 127, 0.62)),
    url("assets/adventure-guild/layered/ui/parchment-tab.png?v=172") center / 100% 100% no-repeat;
  color: #352111;
  font: inherit;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.keeper-options button:hover,
.keeper-options button:focus-visible,
.keeper-options button.is-active {
  transform: translateY(-1px);
  border-color: rgba(37, 126, 118, 0.72);
  background:
    linear-gradient(180deg, rgba(226, 247, 235, 0.78), rgba(217, 187, 118, 0.68)),
    url("assets/adventure-guild/layered/ui/parchment-tab.png?v=172") center / 100% 100% no-repeat;
  outline: 2px solid rgba(37, 126, 118, 0.56);
  outline-offset: 2px;
}

.keeper-options button::after {
  content: ">";
  position: absolute;
  right: 10px;
  top: 10px;
  color: rgba(94, 60, 27, 0.66);
  font-weight: 900;
}

.keeper-options strong {
  color: #352111;
  font-size: 0.88rem;
}

.keeper-options span {
  color: #5d4428;
  font-size: 0.72rem;
  line-height: 1.25;
}

.keeper-folded:not(.is-keeper-open) {
  display: none !important;
}

@media (max-width: 820px) {
  .town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open {
    left: 10px;
    right: 10px;
    top: clamp(78px, 12svh, 104px);
    bottom: 10px;
  }

  .keeper-dialogue {
    grid-template-columns: minmax(128px, 34vw) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
  }

  .keeper-portrait {
    min-height: 220px;
  }

  .keeper-portrait img {
    max-height: 250px;
  }

  .keeper-sprite-stage {
    width: min(100%, 280px);
    height: 270px;
  }

  .keeper-copy {
    padding: 12px;
  }

  .keeper-options {
    grid-column: 1 / -1;
  }
}

/* Production Pack 7 artwork integration. Live controls sit over the supplied open-book art. */
.ledger-book-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 682 / 360;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  perspective: 1800px;
  filter: drop-shadow(0 22px 26px rgba(2, 5, 10, 0.52));
}

.ledger-open-book-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ledger-open-book-art img {
  position: absolute;
  top: -13.9%;
  left: -51.3%;
  width: 225.2%;
  max-width: none;
  height: auto;
  user-select: none;
}

.ledger-page-content {
  position: absolute;
  z-index: 2;
  inset: 7.5% 7.2% 8.5%;
  overflow: hidden;
}

.ledger-book-stage .onboarding-page {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 3.2% 3.6%;
  gap: 8%;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-color: rgba(91, 67, 37, 0.48) transparent;
}

.ledger-book-stage .onboarding-page::after {
  content: "Hearthvale Ledger  ·  Chapter " attr(data-onboarding-page);
  position: absolute;
  right: 5%;
  bottom: 2.5%;
  color: rgba(72, 51, 30, 0.64);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  letter-spacing: 0;
}

.ledger-book-stage .book-page-copy {
  padding: 2% 3% 2% 2%;
  border-right: 0;
}

.ledger-book-stage .book-page-fields,
.ledger-book-stage .book-plan-layout,
.ledger-book-stage .book-selection-layout,
.ledger-book-stage .ledger-final-review {
  padding-left: clamp(52px, 6.5vw, 84px);
}

.ledger-book-stage .book-page-copy h3 {
  color: #253650;
  text-shadow: 0 1px rgba(255, 248, 225, 0.7);
}

.ledger-book-stage .book-page-copy p,
.ledger-book-stage label,
.ledger-book-stage .hint,
.ledger-book-stage small {
  color: #594936;
}

.ledger-book-stage input,
.ledger-book-stage textarea,
.ledger-book-stage select {
  border-color: rgba(107, 79, 43, 0.46);
  background: rgba(255, 251, 235, 0.82);
  color: #25211b;
  box-shadow: inset 0 1px 4px rgba(87, 58, 28, 0.09);
}

.ledger-book-stage input:focus,
.ledger-book-stage textarea:focus,
.ledger-book-stage select:focus {
  border-color: #547bb7;
  outline: 2px solid rgba(70, 117, 183, 0.3);
  outline-offset: 1px;
}

.ledger-page-turn {
  position: absolute;
  z-index: 8;
  top: 5.3%;
  bottom: 6.3%;
  left: 50%;
  width: 43.2%;
  display: none;
  transform-style: preserve-3d;
  transform-origin: left center;
  pointer-events: none;
}

.ledger-page-turn__front,
.ledger-page-turn__back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 91, 46, 0.5);
  border-radius: 2px 14px 14px 2px;
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(111, 75, 35, 0.2), transparent 8%, transparent 91%, rgba(93, 59, 26, 0.18)),
    radial-gradient(circle at 68% 28%, rgba(255, 255, 255, 0.58), transparent 34%),
    #ead8b4;
  box-shadow: inset 0 0 34px rgba(108, 70, 30, 0.16);
}

.ledger-page-turn__front::after,
.ledger-page-turn__back::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(151, 113, 57, 0.35);
  border-radius: 1px 10px 10px 1px;
}

.ledger-page-turn__back {
  transform: rotateY(180deg);
  background:
    linear-gradient(270deg, rgba(111, 75, 35, 0.2), transparent 8%, transparent 91%, rgba(93, 59, 26, 0.18)),
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.54), transparent 34%),
    #ead8b4;
}

.ledger-book-stage.is-turning-forward,
.ledger-book-stage.is-turning-backward {
  pointer-events: none;
}

.ledger-book-stage.is-turning-forward .ledger-page-turn {
  display: block;
  animation: ledger-page-forward 720ms cubic-bezier(0.58, 0.02, 0.35, 1) both;
}

.ledger-book-stage.is-turning-backward .ledger-page-turn {
  display: block;
  left: 6.8%;
  transform-origin: right center;
  animation: ledger-page-backward 720ms cubic-bezier(0.58, 0.02, 0.35, 1) both;
}

.ledger-book-stage.is-turning-forward .ledger-page-content,
.ledger-book-stage.is-turning-backward .ledger-page-content {
  animation: ledger-content-crossfade 720ms ease both;
}

.book-progress button {
  position: relative;
  border-radius: 2px 2px 7px 7px;
  clip-path: polygon(0 0, 100% 0, 100% 83%, 50% 100%, 0 83%);
}

.onboarding-book .book-cover {
  min-height: 132px;
  align-content: start;
  row-gap: 10px;
}

.onboarding-book .book-progress {
  position: relative;
  z-index: 5;
}

.ledger-book-stage .book-selection-layout {
  grid-template-columns: 1fr;
  max-height: 100%;
  overflow: auto;
}

.ledger-book-stage .book-preview-panel {
  min-height: auto;
}

.ledger-book-stage .book-preview-art {
  min-height: 230px;
}

.onboarding-book > .dialog-actions {
  padding: 9px 12px 3px;
  border-top: 1px solid rgba(205, 178, 112, 0.46);
  background: rgba(14, 24, 40, 0.78);
}

.onboarding-book > .dialog-actions button {
  border: 1px solid #a98a4c;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(247, 225, 174, 0.15), 0 4px 12px rgba(2, 7, 14, 0.28);
}

@keyframes ledger-page-forward {
  0% { transform: rotateY(0deg); box-shadow: -8px 0 16px rgba(40, 24, 10, 0.12); }
  45% { transform: rotateY(-86deg) scaleX(0.98); box-shadow: -30px 5px 34px rgba(31, 18, 7, 0.32); }
  100% { transform: rotateY(-180deg); box-shadow: 12px 0 18px rgba(40, 24, 10, 0.08); }
}

@keyframes ledger-page-backward {
  0% { transform: rotateY(0deg); box-shadow: 8px 0 16px rgba(40, 24, 10, 0.12); }
  45% { transform: rotateY(86deg) scaleX(0.98); box-shadow: 30px 5px 34px rgba(31, 18, 7, 0.32); }
  100% { transform: rotateY(180deg); box-shadow: -12px 0 18px rgba(40, 24, 10, 0.08); }
}

@keyframes ledger-content-crossfade {
  0%, 36% { opacity: 1; }
  47%, 53% { opacity: 0.18; }
  66%, 100% { opacity: 1; }
}

@media (max-width: 820px) {
  .ledger-book-stage {
    aspect-ratio: auto;
    min-height: min(72vh, 690px);
    border: 8px solid #1a2943;
    border-radius: 5px;
    background:
      linear-gradient(90deg, rgba(116, 78, 34, 0.2), transparent 7%, transparent 93%, rgba(116, 78, 34, 0.2)),
      #efe0bd;
    box-shadow: inset 0 0 0 2px #a88b4c, inset 0 0 30px rgba(91, 59, 27, 0.19);
  }

  .ledger-open-book-art {
    opacity: 0.2;
  }

  .ledger-open-book-art img {
    display: none;
  }

  .ledger-page-content {
    inset: 18px 14px 20px;
  }

  .ledger-book-stage .onboarding-page {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 12px;
  }

  .ledger-book-stage .book-page-fields,
  .ledger-book-stage .book-plan-layout,
  .ledger-book-stage .book-selection-layout,
  .ledger-book-stage .ledger-final-review {
    padding-left: 12px;
  }

  .ledger-book-stage .onboarding-page::after {
    position: static;
    display: block;
    margin-top: 18px;
    text-align: right;
  }

  .ledger-page-turn {
    top: 8px;
    bottom: 8px;
    width: 48%;
  }
}

@media (max-width: 560px) {
  .keeper-dialogue {
    grid-template-columns: 1fr;
  }

  .keeper-portrait {
    grid-row: auto;
    min-height: 240px;
  }

  .keeper-portrait img {
    max-height: 280px;
  }

  .keeper-sprite-stage {
    width: min(100%, 320px);
    height: 300px;
  }

  .keeper-options {
    grid-template-columns: 1fr;
  }
}

.integration-steps {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: rgba(255, 249, 226, 0.82);
  font-size: 0.74rem;
  line-height: 1.35;
}

.integration-steps code {
  color: #fff6be;
  font-weight: 900;
}

.training-grove-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}

.training-scene-art {
  position: relative;
  min-height: clamp(300px, 42svh, 520px);
  overflow: hidden;
  border: 1px solid rgba(255, 242, 186, 0.4);
  border-radius: 8px;
  background:
    radial-gradient(circle at 62% 32%, rgba(255, 226, 137, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(11, 19, 18, 0.1), rgba(7, 12, 10, 0.22)),
    url("assets/interior-training-hall-stage-working.png?v=65") center / cover no-repeat;
  box-shadow: 0 22px 54px rgba(7, 13, 12, 0.36);
}

.training-trainer {
  position: absolute;
  left: clamp(16px, 7vw, 96px);
  bottom: -10px;
  z-index: 3;
  width: clamp(170px, 24vw, 310px);
  max-height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.44));
  animation: trainer-ready 5.8s ease-in-out infinite;
}

.training-stage-pet {
  position: absolute;
  right: clamp(16px, 7vw, 94px);
  bottom: clamp(10px, 4vw, 46px);
  z-index: 4;
  width: clamp(118px, 16vw, 210px);
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.34));
  animation: keeper-idle 5.2s ease-in-out infinite;
}

.training-stage-pet.is-cutout {
  right: clamp(0px, 4vw, 74px);
  bottom: clamp(0px, 2.5vw, 26px);
  width: clamp(210px, 30vw, 420px);
  border-radius: 0;
}

.training-dummy {
  position: absolute;
  bottom: clamp(22px, 6vw, 74px);
  z-index: 2;
  width: 44px;
  height: 138px;
  border-radius: 22px 22px 12px 12px;
  background:
    radial-gradient(circle at 50% 18%, #c18f58 0 18px, transparent 19px),
    linear-gradient(90deg, transparent 0 18px, #6d452c 18px 26px, transparent 26px),
    linear-gradient(180deg, #b77446, #7a4a2e);
  box-shadow: 0 16px 20px rgba(0, 0, 0, 0.25);
}

.training-dummy::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 82px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(25, 16, 9, 0.34);
}

.dummy-one { right: 28%; transform: rotate(-4deg); }
.dummy-two { right: 12%; bottom: clamp(40px, 8vw, 90px); transform: scale(0.86) rotate(5deg); opacity: 0.82; }

.training-logbook-prop {
  position: absolute;
  left: clamp(44%, 48vw, 58%);
  bottom: clamp(18px, 4vw, 44px);
  z-index: 5;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 232, 146, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(91, 54, 27, 0.96), rgba(42, 25, 16, 0.96));
  color: #fff4c6;
  font: inherit;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36), inset 0 0 0 2px rgba(255, 236, 174, 0.14);
  cursor: pointer;
}

.training-stage-copy {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 16px;
  border: 1px solid rgba(238, 210, 129, 0.5);
  border-radius: 8px;
  background: rgba(12, 19, 17, 0.78);
  color: #fff8df;
  backdrop-filter: blur(12px);
}

.training-stage-copy h3,
.training-stage-copy p {
  margin: 0;
}

.training-prop-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.training-grove-companion {
  display: grid;
  gap: 12px;
}

.hall-training-services,
.oracle-grove-companion {
  display: grid;
  gap: 12px;
}

@keyframes keeper-idle {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  50% { transform: scaleX(1.006) scaleY(1.012) rotate(0.15deg); }
}

@keyframes keeper-speaking-idle {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  22% { transform: scaleX(1.004) scaleY(1.012) rotate(-0.18deg); }
  48% { transform: scaleX(1.008) scaleY(1.018) rotate(0.22deg); }
  72% { transform: scaleX(1.003) scaleY(1.01) rotate(-0.12deg); }
}

@keyframes keeper-ledger-greet {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  18% { transform: scaleX(1.004) scaleY(1.012) rotate(-0.8deg); }
  42% { transform: scaleX(1.008) scaleY(1.018) rotate(1.1deg); }
  58% { transform: scaleX(1.004) scaleY(1.012) rotate(-0.5deg); }
}

@keyframes keeper-blade-ready {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  30% { transform: scaleX(1.006) scaleY(1.016) rotate(-0.8deg); }
  56% { transform: scaleX(1.003) scaleY(1.01) rotate(0.6deg); }
}

@keyframes keeper-mug-offer {
  0%, 100% { transform: translateX(0) scaleX(1) scaleY(1); }
  28% { transform: translateX(2px) scaleX(1.006) scaleY(1.014); }
  52% { transform: translateX(0) scaleX(1.008) scaleY(1.018); }
}

@keyframes keeper-coin-lean {
  0%, 100% { transform: translateX(0) rotate(0deg) scaleX(1) scaleY(1); }
  34% { transform: translateX(-3px) rotate(-1.2deg) scaleX(1.008) scaleY(1.016); }
  62% { transform: translateX(1px) rotate(0.8deg) scaleX(1.003) scaleY(1.01); }
}

@keyframes keeper-lantern-sway {
  0%, 100% { transform: rotate(0deg) scaleX(1) scaleY(1); }
  35% { transform: rotate(1.2deg) scaleX(1.004) scaleY(1.012); }
  70% { transform: rotate(-1deg) scaleX(1.007) scaleY(1.016); }
}

@keyframes keeper-pet-bounce {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  28% { transform: scaleX(1.01) scaleY(1.02) rotate(-0.6deg); }
  58% { transform: scaleX(1.004) scaleY(1.012) rotate(0.5deg); }
}

/* Training Hall: one layered walk-in room with physical interaction points. */
.area-training.has-training-interior {
  --training-ink: #21372f;
  --training-gold: #d9b96f;
  --training-parchment: #f1e2b8;
}

#screen-character.is-active {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #211912;
}

#screen-character.is-active::before,
#screen-character.is-active::after {
  display: none;
}

.has-training-interior > .section-heading:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.training-hall-interior {
  width: 100%;
  max-width: none !important;
  min-height: max(680px, 100svh);
  margin: 0;
}

#screen-character.is-active > .training-hall-interior {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  min-height: max(680px, 100svh);
  margin: 0;
}

#trainingRosterLegacyHeading,
#trainingFutureLegacyHeading,
#hallTrainingServices:empty {
  display: none;
}

.training-hall-room {
  position: relative;
  width: 100%;
  min-height: max(680px, 100svh);
  overflow: hidden;
  border: 0;
  background: #231c17 url("assets/training-dojo-interior-level-1-clear-wall-wide.png?v=269") center / cover no-repeat;
  box-shadow: none;
  isolation: isolate;
  perspective: 960px;
  transform-style: preserve-3d;
}

.training-hall-upgrade-layers,
.training-hall-upgrade-layers > span {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--training-upgrade-image, none) center / cover no-repeat;
}

.training-hall-room::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 10, 0.02) 55%, rgba(8, 10, 8, 0.2));
}

.training-hall-monk,
.training-hall-pet {
  position: absolute;
  z-index: 8;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.38));
}

.training-hall-monk {
  left: 52%;
  bottom: 0;
  width: clamp(205px, 21%, 330px);
  height: 79%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: training-monk-breathe 5.4s ease-in-out infinite;
}

.training-hall-pet {
  left: 65%;
  bottom: 3%;
  width: clamp(105px, 11%, 170px);
  max-height: 28%;
  animation: keeper-idle 5.8s ease-in-out infinite;
}

@keyframes training-monk-breathe {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50% { transform: translateX(-50%) scaleY(1.006); }
}

.training-object,
.training-board-object,
.training-wall-board {
  position: absolute;
  z-index: 3;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff3c7;
  cursor: pointer;
}

.training-object::before,
.training-board-object::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(123, 221, 199, 0);
  border-radius: 999px;
  opacity: 0;
  background: transparent;
  box-shadow: none;
  transition: opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.training-object:hover::before,
.training-board-object:hover::before,
.training-object:focus-visible::before,
.training-board-object:focus-visible::before {
  opacity: 1;
  border-color: rgba(123, 221, 199, 0.9);
  box-shadow:
    0 0 0 2px rgba(10, 24, 21, 0.55),
    0 0 8px rgba(255, 242, 176, 0.48),
    0 0 18px rgba(88, 216, 177, 0.74);
}

.training-object:focus-visible,
.training-board-object:focus-visible,
.training-wall-board:focus-visible {
  outline: 2px solid rgba(255, 242, 169, 0.9);
  outline-offset: 4px;
}

.training-object > span {
  position: absolute;
  left: 50%;
  bottom: 4px;
  translate: -50% 0;
  width: max-content;
  max-width: 190px;
  padding: 5px 9px;
  border: 1px solid rgba(225, 190, 105, 0.72);
  background: rgba(20, 31, 27, 0.92);
  color: #fff3ca;
  font-size: 0.73rem;
  font-weight: 800;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.training-object {
  z-index: 6;
}

.training-object:hover > span,
.training-object:focus-visible > span {
  opacity: 1;
  transform: translateY(0);
}

.training-object-trainer { left: 42%; bottom: 1%; width: 20%; height: 78%; }
.training-object-trainer { z-index: 10; }
.training-object-trainer > span { bottom: 2%; }
.training-object-dummy {
  left: 16%;
  bottom: 11%;
  width: clamp(188px, 14.4%, 270px);
  height: 42%;
}

.training-object-dummy img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 100%;
  translate: -50% 0;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 13px 12px rgba(0, 0, 0, 0.38));
}

.training-object-dummy::before {
  inset: 5% 2% 1%;
  border-radius: 42% 42% 28% 28%;
}
.training-object-archive { left: 0; bottom: 2%; width: 14%; height: 17%; }

.training-board-object {
  top: 18.8%;
  right: auto;
  left: 76.2%;
  width: 7.8%;
  height: 41%;
  transform: translateZ(0);
  transform-origin: 50% 0;
}

.training-wall-board {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(5px, 0.65vw, 9px);
  overflow: hidden;
  padding:
    clamp(50px, 4.15vw, 64px)
    clamp(24px, 1.7vw, 34px)
    clamp(48px, 3.85vw, 62px);
  border: 0;
  border-radius: 0;
  background: url("assets/training-hall-banner-narrow-v1.png?v=269") center / 100% 100% no-repeat;
  color: #fff0bf;
  text-shadow: none;
  box-shadow: none;
  clip-path: none;
  transform: translateZ(0);
  transform-origin: 50% 0;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.32));
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.training-standings-board {
  top: 15.2%;
  right: auto;
  left: 75.9%;
  width: 12.2%;
  height: 47%;
  transform: translateZ(0);
  transform-origin: 50% 0;
}

.training-wall-board::before {
  display: none;
}

.training-wall-board:hover,
.training-wall-board:focus-visible {
  filter:
    drop-shadow(0 12px 16px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 10px rgba(117, 236, 208, 0.58));
}

.training-wall-board::after {
  display: none;
}

.training-wall-board > * {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
}

.training-today-board {
  top: 15.2%;
  left: 22.6%;
  width: 12.2%;
  height: 47%;
}

.training-scroll-rack {
  position: absolute;
  top: 20.7%;
  left: 58.1%;
  z-index: 4;
  box-sizing: border-box;
  width: 15.8%;
  height: 41.8%;
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  padding: 12px 18px 21px;
  overflow: visible;
  color: #342719;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.34));
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.training-scroll-rack::before,
.training-scroll-rack::after {
  content: "";
  position: absolute;
  display: block;
  left: 8%;
  right: 8%;
  z-index: 0;
  height: 12px;
  border: 1px solid rgba(66, 38, 19, 0.82);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #c99b46 0 8px, #6b3718 9px 14px, transparent 15px),
    linear-gradient(90deg, rgba(255,255,255,0.12), transparent 26%, rgba(0,0,0,0.18)),
    repeating-linear-gradient(90deg, #5a341b 0 10px, #7a4a25 11px 21px, #3d2414 22px 27px);
  box-shadow:
    -10px 0 0 -3px #b7893f,
    10px 0 0 -3px #b7893f,
    inset 0 1px 0 rgba(255, 215, 140, 0.24),
    0 4px 6px rgba(0,0,0,.28);
}

.training-scroll-rack::before { top: 51px; }
.training-scroll-rack::after { bottom: 17px; opacity: .94; }

.training-scroll-rack:hover,
.training-scroll-rack:focus-within {
  filter:
    drop-shadow(0 12px 14px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 10px rgba(117, 236, 208, 0.58));
}

.training-quest-board .training-quest-pins,
.training-quest-board .training-quest-board-open { overflow: visible; }

.training-quest-board-open {
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #3a2818;
  cursor: pointer;
  box-shadow: none;
}

.training-quest-board-open .training-board-title {
  justify-self: center;
  width: max-content;
  min-width: 92px;
  padding: 6px 12px 5px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% -8px, #e2b95d 0 11px, transparent 12px),
    linear-gradient(180deg, rgba(100, 57, 26, .96), rgba(43, 24, 13, .98));
  color: #f7df99;
  box-shadow:
    inset 0 0 0 1px rgba(236, 181, 86, .46),
    0 3px 8px rgba(0,0,0,.28);
  font-size: clamp(.52rem, .58vw, .66rem);
  line-height: 1;
  text-transform: none;
}

.training-quest-pins {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  justify-content: center;
  gap: 5px;
  height: auto;
  min-height: 0;
  padding: 17px 19px 18px;
  overflow: visible;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(40, 23, 12, 0.18), transparent 68%),
    linear-gradient(180deg, rgba(54, 30, 18, .18), rgba(54, 30, 18, .04) 45%, rgba(54, 30, 18, .18));
  border-radius: 14px;
}

.training-quest-pins::before,
.training-quest-pins::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 8px;
  z-index: 0;
  width: 9px;
  border: 1px solid rgba(66, 38, 19, .78);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 36%, rgba(0,0,0,.18)),
    repeating-linear-gradient(180deg, #4a2916 0 10px, #754722 11px 22px, #3b2114 23px 30px);
  box-shadow: inset 1px 0 0 rgba(255, 215, 140, .22), 0 3px 6px rgba(0,0,0,.22);
}

.training-quest-pins::before { left: -3px; }
.training-quest-pins::after { right: -3px; }

.training-quest-scroll-roll {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: clamp(18px, 2.05vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(91, 54, 26, .48);
  border-radius: 999px / 60%;
  background:
    radial-gradient(ellipse at 8px 50%, #7f4a24 0 7px, transparent 8px),
    radial-gradient(ellipse at calc(100% - 8px) 50%, #7f4a24 0 7px, transparent 8px),
    linear-gradient(90deg, #a86e35 0 12px, transparent 13px calc(100% - 13px), #a86e35 calc(100% - 12px) 100%),
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 32%, rgba(93,48,23,.22) 84%),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(98, 58, 31, .07) 22px 23px),
    linear-gradient(90deg, #bd8f4e 0%, #fbebbf 14%, #e9cb8f 50%, #fbebbf 86%, #bd8f4e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 213, .34),
    inset 14px 0 10px rgba(100, 57, 28, .24),
    inset -14px 0 10px rgba(100, 57, 28, .24),
    0 3px 5px rgba(0,0,0,.25);
  transform: translateX(calc(((var(--roll, 0) % 3) - 1) * 3px)) rotate(calc((var(--roll, 0) - 4) * .35deg));
}

.training-quest-scroll-roll::before {
  content: "";
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 120%;
  border-radius: 2px;
  background: linear-gradient(180deg, #791b20, #b43130 46%, #6e1519);
  box-shadow:
    -21px 0 0 rgba(126, 27, 30, .72),
    21px 0 0 rgba(126, 27, 30, .72);
  transform: translate(-50%, -50%);
}

.training-quest-scroll-roll::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, #c79b48 0 34%, #7a4420 36% 100%);
  transform: translateY(-50%);
}

.training-quest-scroll-roll.is-ready {
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 213, .34),
    inset 14px 0 10px rgba(100, 57, 28, .24),
    inset -14px 0 10px rgba(100, 57, 28, .24),
    0 0 10px rgba(112, 223, 171, .36),
    0 3px 5px rgba(0,0,0,.25);
}

.training-quest-scroll-status {
  color: inherit;
}

.training-quest-seal {
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: 4;
  width: clamp(24px, 2.05vw, 36px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 231, 145, 0.92) 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, #d1a44f 0 15%, #9f2528 16% 55%, #5f1418 56% 100%);
  border: 1px solid rgba(255, 223, 134, 0.72);
  box-shadow:
    inset 0 0 0 2px rgba(94, 19, 22, 0.55),
    inset 0 0 0 5px rgba(202, 146, 72, 0.18),
    0 5px 10px rgba(0, 0, 0, 0.32),
    0 0 10px rgba(236, 191, 95, 0.34);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.training-quest-seal::before,
.training-quest-seal::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 2px;
  border-block: 2px solid rgba(255, 224, 135, 0.72);
  transform: rotate(45deg);
}

.training-quest-seal::after {
  transform: rotate(-45deg);
}

.training-quest-board-open:focus-visible {
  outline: 3px solid #fff3a8;
  outline-offset: 5px;
}

.training-board-title {
  display: block;
  overflow: hidden;
  justify-self: center;
  width: min(100%, 8.4em);
  max-width: 74%;
  padding: 2px 0 11px;
  border: 0;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.5rem, 0.58vw, 0.64rem);
  line-height: 1;
  color: #ffe9a9;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
  text-shadow: none;
}

.training-board-title::before {
  content: "POWER";
  display: block;
  margin-bottom: 4px;
  color: #fff2be;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(0.6rem, 0.72vw, 0.8rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.training-today-board .training-board-title::before { content: "Focus"; }
.training-quest-board .training-board-title::before { display: none; }
.training-standings-board .training-board-title::before { content: "Growth"; }

.training-today-board .training-board-title,
.training-standings-board .training-board-title {
  width: min(100%, 7.2em);
  max-width: 68%;
}

.training-quest-board-open .training-board-title::before {
  display: none;
}

.training-board-stats {
  display: grid;
  align-content: center;
  justify-self: center;
  width: min(100%, 10.5em);
  max-width: 88%;
  gap: clamp(4px, 0.48vw, 7px);
  overflow: hidden;
  padding: 8px 0 1px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.5rem, 0.58vw, 0.66rem);
  color: #fff0bd;
  text-shadow: none;
}

.training-board-stats > span {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 2px;
  padding-inline: clamp(2px, 5%, 8px);
  min-width: 0;
  overflow: hidden;
  color: #fff0bd;
  text-align: center;
  white-space: normal;
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(220, 184, 99, 0.12) 28% 72%, transparent 84%) bottom / 100% 1px no-repeat;
}

.training-board-stats > span > * {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #fff0ad;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.training-board-stats > span > :last-child {
  color: rgba(255, 242, 196, 0.9);
  font-size: 0.92em;
}
.training-board-stats > #trainingTodayTitle {
  align-items: center;
  min-height: 1.8em;
  line-height: 1.05;
  white-space: normal;
}

.training-today-exercise-list {
  display: grid;
  gap: 2px;
  width: 100%;
}

.training-board-stats > .training-today-exercise-list {
  padding-inline: clamp(1px, 3%, 5px);
  background: none;
}

.training-today-exercise-list i {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #fff1bd;
  font-size: clamp(0.46rem, 0.52vw, 0.58rem);
  font-style: normal;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.training-board-live-data { border-inline: 0; }

.training-standings-modes {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 16px;
  padding: 3px;
  border: 1px solid #826331;
  background: rgba(101, 71, 33, 0.12);
}

.training-standings-modes button {
  min-height: 42px;
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: #263a31;
  font-weight: 800;
  cursor: pointer;
}
.training-standings-modes button.is-active { background: #173c34; color: #fff3cf; }

.training-standing-sheet,
.training-today-sheet,
.training-selected-quest {
  padding: 18px clamp(14px, 3vw, 32px);
  border-block: 1px solid #a88448;
  background: rgba(255, 249, 222, 0.58);
  color: #263a31;
}

.training-rank-list { margin: 16px 0; padding: 0; list-style: none; border-block: 1px solid #a88448; }
.training-rank-list li { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(126,91,45,.28); }
.training-rank-list li:last-child { border-bottom: 0; }
.training-rank-list li > b { font: 700 1.35rem Georgia, serif; color: #755324; text-align: center; }
.training-rank-list span { display: grid; }
.training-rank-list small { color: #50645a; }
.training-rank-list em { color: #173c34; font-style: normal; font-weight: 800; }
.training-coop-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin-block: 16px; }
.training-coop-controls label { display: grid; gap: 4px; color: #263a31; font-weight: 800; }
.training-coop-controls input { min-height: 42px; border: 1px solid #92703d; background: #fff9e3; color: #263a31; }
.training-coop-controls button { align-self: end; min-height: 42px; border: 1px solid #a7813f; background: #173c34; color: #fff3cf; font-weight: 800; }

.training-today-sheet { max-width: 760px; margin-inline: auto; }
.training-today-day { color: #7b572a; font-weight: 800; text-transform: uppercase; }
.training-today-sheet ol { columns: 2; gap: 28px; padding-left: 24px; }
.training-today-sheet li { break-inside: avoid; margin-bottom: 9px; }
.training-today-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.training-rollover-note {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(125, 79, 35, 0.42);
  border-left: 4px solid #8f5d2b;
  background: rgba(255, 241, 196, 0.7);
  color: #4a321b;
}
.plan-card.is-carried-forward {
  border-color: #8f5d2b;
  box-shadow: 0 0 0 2px rgba(143, 93, 43, 0.18), 0 14px 28px rgba(42, 25, 12, 0.16);
}
.plan-card.is-displaced-rest {
  opacity: 0.78;
}
.training-selected-quest { display: grid; gap: 5px; margin-bottom: 18px; }
.training-selected-quest[hidden] { display: none; }

.training-monk-dialogue {
  position: absolute;
  left: 60%;
  top: 92px;
  bottom: auto;
  z-index: 9;
  width: min(330px, 34%);
  max-height: calc(100% - 112px);
  overflow: auto;
  padding: 15px;
  border: 2px solid #9d7439;
  border-radius: 6px;
  background: linear-gradient(145deg, #f7eccd, #e3cd96);
  color: #26382f;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42), inset 0 0 0 3px rgba(255, 250, 224, 0.48);
}

.training-monk-dialogue::after {
  content: "";
  position: absolute;
  left: -13px;
  bottom: 35px;
  width: 22px;
  height: 22px;
  border-left: 2px solid #9d7439;
  border-bottom: 2px solid #9d7439;
  background: #e7d39f;
  transform: rotate(45deg);
}

.training-monk-dialogue h3,
.training-monk-dialogue p { margin: 0 0 7px; color: inherit; }
.training-monk-dialogue nav { display: grid; gap: 5px; }
.training-monk-dialogue button {
  min-height: 38px;
  border: 0;
  border-bottom: 1px solid rgba(74, 77, 52, 0.32);
  background: transparent;
  color: #27483d;
  text-align: left;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.training-monk-dialogue button:hover,
.training-monk-dialogue button:focus-visible { background: rgba(38, 91, 72, 0.11); color: #102e25; }

.training-kael-chat {
  display: grid;
  gap: 5px;
  margin: 10px 0 12px;
  padding-block: 9px;
  border-block: 1px solid rgba(91, 72, 38, 0.35);
}

.training-kael-chat label,
.training-kael-chat small { color: #40564c; font-size: 0.74rem; font-weight: 700; }
.training-kael-chat > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.training-kael-chat input {
  min-width: 0;
  min-height: 40px;
  border: 1px solid #8e6b35;
  border-radius: 3px;
  background: rgba(255, 251, 232, 0.88);
  color: #20372e;
  padding: 8px 9px;
}
.training-kael-chat button { min-height: 40px; padding-inline: 13px; border: 1px solid #9b793f; background: #173c34; color: #fff3cf; }

.training-route-panel,
.training-board-panel {
  position: fixed;
  inset: 96px 22px 22px max(340px, calc((100vw - 1320px) / 2 + 310px));
  z-index: 160;
  width: auto;
  max-width: 1180px;
  margin-inline: auto;
  overflow: auto;
  padding: 20px;
  border: 2px solid rgba(126, 82, 35, 0.9);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 255, 242, 0.42), transparent 28%),
    radial-gradient(circle at 92% 9%, rgba(220, 176, 92, 0.22), transparent 30%),
    linear-gradient(145deg, rgba(255, 247, 219, 0.98), rgba(229, 207, 154, 0.98) 55%, rgba(207, 176, 113, 0.98)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(105, 75, 38, 0.04) 23px);
  color: var(--training-ink);
  box-shadow:
    0 0 0 9999px rgba(7, 12, 10, 0.58),
    0 24px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 4px rgba(255, 249, 223, 0.44),
    inset 0 0 0 7px rgba(109, 72, 34, 0.18);
  scrollbar-color: #836132 rgba(255, 246, 219, 0.6);
}

.training-route-panel::before,
.training-board-panel::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 0;
  display: block;
  height: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 238, 172, 0.42),
    inset 0 0 28px rgba(119, 73, 31, 0.12);
}

.training-route-kael {
  display: none;
  position: fixed;
  left: max(78px, calc((100vw - 1320px) / 2 + 18px));
  bottom: 18px;
  z-index: 161;
  width: 250px;
  height: calc(100vh - 122px);
  pointer-events: none;
}

#screen-character[data-training-route] .training-route-kael { display: block; }
.town-area-screen.is-active > .training-route-kael {
  position: fixed;
  width: 250px;
  max-width: 250px;
  margin: 0;
}
.training-route-kael img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 240px);
  max-height: 72%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.52));
}
.training-route-kael-bubble {
  position: absolute;
  top: 2%;
  left: 0;
  width: 100%;
  padding: 13px 14px;
  border: 2px solid #9d7439;
  border-radius: 5px;
  background: linear-gradient(145deg, #f7eccd, #e3cd96);
  color: #26382f;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
  font: 700 0.9rem/1.35 Georgia, serif;
}
.training-route-kael-bubble::after {
  content: "";
  position: absolute;
  left: 54%;
  bottom: -10px;
  width: 17px;
  height: 17px;
  border-right: 2px solid #9d7439;
  border-bottom: 2px solid #9d7439;
  background: #e3cd96;
  transform: rotate(45deg);
}

.town-area-screen.is-active > .training-route-panel,
.town-area-screen.is-active > .training-board-panel {
  position: fixed;
  z-index: 160;
  width: auto;
  max-width: none;
  margin: 0;
}

.training-route-header,
.training-board-panel > header {
  position: sticky;
  top: -20px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: -20px -20px 18px;
  padding: 13px 18px;
  border-bottom: 2px solid rgba(155, 119, 63, 0.9);
  background:
    linear-gradient(90deg, rgba(16, 44, 38, 0.96), rgba(33, 76, 64, 0.96), rgba(16, 44, 38, 0.96));
  color: #fff3cf;
  box-shadow:
    inset 0 -1px 0 rgba(255, 226, 151, 0.34),
    0 8px 18px rgba(82, 51, 24, 0.2);
}

.training-route-header h2,
.training-route-header p,
.training-board-panel > header h2,
.training-board-panel > header p { margin: 0; color: inherit; }

.training-panel-close {
  width: 44px;
  height: 44px;
  border: 1px solid #d7ba76;
  border-radius: 50%;
  background: #251d18;
  color: #fff2c5;
  font-size: 1.5rem;
  cursor: pointer;
}

.training-stat-ledger {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 1px;
  margin-bottom: 20px;
  border-block: 1px solid #a8874b;
  background: rgba(117, 84, 39, 0.25);
}

.training-stat-ledger > * {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 9px;
  min-width: 0;
  padding: 12px;
  background: rgba(250, 241, 211, 0.9);
  color: #263a31;
}

.training-stat-ledger > * strong {
  color: #173c34;
  font-size: 1.22rem;
}

.training-stat-ledger > * small {
  grid-column: 1 / -1;
  color: #50645a;
  line-height: 1.25;
}

.training-mission-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.training-mission-columns > section {
  padding-inline: 12px;
  border-left: 0;
}

.training-mission-columns h3 {
  margin: 0 0 12px;
  color: #23483f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.08vw, 1.18rem);
  text-shadow: 0 1px 0 rgba(255, 248, 219, 0.8);
}

.training-route-panel .card,
.training-board-panel .card,
.training-route-panel .mission-card,
.training-board-panel .mission-card {
  color: #20372e;
  background:
    linear-gradient(180deg, rgba(255, 252, 235, 0.92), rgba(238, 220, 176, 0.88));
  border-color: rgba(116, 84, 43, 0.54);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 222, 0.5), 0 8px 18px rgba(91, 61, 31, 0.12);
}

.training-board-panel .mission-card {
  position: relative;
  grid-template-columns: 56px minmax(0, 1fr) 88px;
  margin-bottom: 10px;
  border: 1px solid rgba(113, 77, 36, 0.55);
  border-radius: 4px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 245, 0.5), transparent 35%),
    linear-gradient(180deg, #f2dfaa, #e4c987 56%, #d7b873);
  box-shadow:
    inset 0 0 0 1px rgba(255, 251, 227, 0.58),
    inset 0 -16px 24px rgba(113, 70, 32, 0.12),
    0 6px 12px rgba(76, 48, 22, 0.18);
}

.training-board-panel .mission-card::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 9px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #ffe7a8 0 16%, #a43232 18% 58%, #5f1718 60% 100%);
  box-shadow: 0 2px 4px rgba(45, 26, 15, 0.28);
  transform: translateX(-50%);
}

.training-board-panel .mission-rank {
  border-radius: 999px;
  background: linear-gradient(180deg, #285f52, #153c34);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 153, 0.25);
}

.training-board-panel .mission-card strong {
  color: #254137;
  font-family: Georgia, "Times New Roman", serif;
}

.training-board-panel .mission-card small,
.training-board-panel .mission-card p {
  color: #574634;
}

.training-board-panel .mission-card button {
  border-radius: 4px;
  border-color: rgba(125, 85, 39, 0.58);
  background:
    linear-gradient(180deg, #24594d, #143a32);
  color: #fff1c6;
}

.training-board-panel .mission-card button:disabled {
  border-color: rgba(115, 93, 56, 0.25);
  background: rgba(234, 230, 207, 0.62);
  color: #7a7568;
}

@media (max-width: 760px) {
  .training-hall-interior,
  .training-hall-room { min-height: max(700px, 100svh); }
  .training-hall-room { background-image: url("assets/training-dojo-interior-level-1-clear-wall-wide.png?v=269"); background-position: center top; }
  .training-hall-monk { left: 47%; width: 55%; height: 72%; bottom: 0; }
  .training-hall-pet { left: 68%; width: 22%; bottom: 3%; }
  .training-object-trainer { left: 27%; width: 42%; height: 68%; }
  .training-board-object,
  .training-standings-board { top: 25%; right: auto; left: 65%; width: 28%; height: 22%; transform: translateZ(0); }
  .training-today-board { top: 24%; left: 8%; width: 27%; height: 22%; }
  .training-scroll-rack { top: 48%; left: 9%; width: 36%; height: 31%; padding: 11px 15px 19px; }
  .training-quest-board-open { width: max-content; min-width: 70px; min-height: 23px; padding: 0 10px; }
  .training-wall-board { padding: 17px 7px 15px; gap: 3px; }
  .training-board-title { max-width: 72%; padding: 2px 2px 5px; font-size: .5rem; }
  .training-board-title::before { font-size: .7rem; }
  .training-today-board .training-board-title { line-height: 1; white-space: normal; }
  .training-board-stats { font-size: .48rem; }
  .training-today-exercise-list i { font-size: .45rem; }
  .training-quest-board-open { width: 100%; height: 100%; padding: 0; }
  .training-quest-pins { gap: 5px 7px; padding: 9px 11px 12px; }
  .training-quest-scroll-roll { height: 28px; }
  .training-quest-seal { width: 28px; }
  .training-object-dummy { left: 5%; top: auto; bottom: 21%; width: 32%; height: 32%; }
  .training-object-archive { left: 0; top: 57%; bottom: auto; width: 20%; height: 16%; }
  .training-monk-dialogue { left: 5%; top: 86px; bottom: auto; width: 90%; max-height: calc(100% - 106px); overflow: auto; }
  .training-monk-dialogue::after { display: none; }
  .training-route-panel,
  .training-board-panel { inset: 104px 8px 66px; padding: 14px 14px 165px; }
  .town-area-screen.is-active > .training-route-kael { left: 8px; bottom: 68px; width: 110px; max-width: 110px; height: 190px; }
  .training-route-kael img { left: 0; width: 108px; max-height: 150px; transform: none; }
  .training-route-kael-bubble { top: auto; left: 102px; bottom: 52px; width: min(225px, calc(100vw - 126px)); padding: 9px 10px; font-size: .75rem; }
  .training-route-kael-bubble::after { left: -8px; bottom: 18px; border: 0; border-left: 2px solid #9d7439; border-bottom: 2px solid #9d7439; }
  .training-route-header,
  .training-board-panel > header { top: -14px; margin: -14px -14px 14px; }
  .training-stat-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-mission-columns { grid-template-columns: 1fr; }
  .training-coop-controls { grid-template-columns: 1fr; }
  .training-today-sheet ol { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .training-hall-monk,
  .training-hall-pet { animation: none; }
}

@keyframes keeper-steam {
  0%, 100% { opacity: 0.22; transform: translateY(6px) scale(0.95); }
  50% { opacity: 0.62; transform: translateY(-8px) scale(1.08); }
}

@keyframes innkeeper-arm-setdown {
  0%, 100% { transform: rotate(-16deg) translate(0, -5px); opacity: 0.68; }
  24% { transform: rotate(-4deg) translate(18px, 12px); opacity: 0.96; }
  48% { transform: rotate(3deg) translate(30px, 26px); opacity: 1; }
  72% { transform: rotate(-9deg) translate(10px, 4px); opacity: 0.78; }
}

@keyframes innkeeper-mug-setdown {
  0%, 100% { transform: translate(0, -22px) rotate(-8deg); }
  24% { transform: translate(26px, 2px) rotate(-2deg); }
  48% { transform: translate(36px, 25px) rotate(0deg); }
  72% { transform: translate(12px, 2px) rotate(-4deg); }
}

@keyframes innkeeper-steam-rise {
  0%, 100% { opacity: 0.12; transform: translateY(10px) scale(0.82); }
  48% { opacity: 0.68; transform: translateY(-8px) scale(1.12); }
}

@keyframes npc-rig-idle {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(-4px) rotate(0.25deg); }
}

@keyframes npc-torso-breathe {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50% { transform: scaleX(1.018) scaleY(1.028); }
}

@keyframes npc-head-talk {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  32% { transform: rotate(-1.5deg) translateY(-2px); }
  64% { transform: rotate(1deg) translateY(0); }
}

@keyframes npc-hair-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.8deg); }
}

@keyframes npc-mouth-line {
  0%, 100% { transform: scaleY(0.82); opacity: 0.76; }
  45% { transform: scaleY(1.18); opacity: 1; }
}

@keyframes npc-arm-ledger {
  0%, 100% { transform: rotate(-20deg) translateY(0); }
  38% { transform: rotate(-52deg) translate(10px, 8px); }
  62% { transform: rotate(-34deg) translate(4px, 4px); }
}

@keyframes npc-arm-trainer {
  0%, 100% { transform: rotate(-24deg) translateY(0); }
  35% { transform: rotate(-78deg) translate(12px, -10px); }
  70% { transform: rotate(-42deg) translate(4px, 4px); }
}

@keyframes npc-blade-sweep {
  0%, 100% { transform: rotate(-24deg); }
  35% { transform: rotate(-68deg) translate(10px, -12px); }
  70% { transform: rotate(-38deg); }
}

@keyframes npc-arm-mug {
  0%, 100% { transform: rotate(28deg) translate(0, 0); }
  24% { transform: rotate(54deg) translate(8px, 10px); }
  48% { transform: rotate(68deg) translate(20px, 24px); }
  72% { transform: rotate(38deg) translate(6px, 7px); }
}

@keyframes npc-mug-setdown {
  0%, 100% { transform: translate(0, -18px) rotate(-8deg); }
  24% { transform: translate(20px, 6px) rotate(-2deg); }
  48% { transform: translate(36px, 26px) rotate(0deg); }
  72% { transform: translate(10px, 4px) rotate(-4deg); }
}

@keyframes npc-arm-coin {
  0%, 100% { transform: rotate(-18deg) translateY(0); }
  42% { transform: rotate(-62deg) translate(10px, -10px); }
  70% { transform: rotate(-32deg) translate(2px, 3px); }
}

@keyframes npc-coin-pop {
  0%, 100% { opacity: 0; transform: translateY(20px) scale(0.74); }
  35% { opacity: 1; transform: translateY(-12px) scale(1.12); }
  62% { opacity: 0.72; transform: translateY(0) scale(0.94); }
}

@keyframes npc-arm-lantern {
  0%, 100% { transform: rotate(30deg); }
  50% { transform: rotate(48deg) translate(6px, 4px); }
}

@keyframes npc-lantern-sway {
  0%, 100% { transform: rotate(-8deg); filter: brightness(1); }
  50% { transform: rotate(8deg); filter: brightness(1.22); }
}

@keyframes npc-pet-bounce-rig {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  35% { transform: translateX(-50%) translateY(-12px) scale(1.04); }
  70% { transform: translateX(-50%) translateY(-4px) scale(1.01); }
}

@keyframes npc-sparkle-pop {
  0%, 100% { opacity: 0.2; transform: translateY(8px) scale(0.86); }
  50% { opacity: 1; transform: translateY(-10px) scale(1.1); }
}

@keyframes keeper-sprite-npc {
  0%, 26% { background-position: 0% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
  27%, 54% { background-position: 33.333% var(--keeper-sprite-row); transform: translateY(-2px) scale(1.006); }
  55%, 78% { background-position: 66.666% var(--keeper-sprite-row); transform: translateY(-1px) scale(1.004); }
  79%, 100% { background-position: 0% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
}

@keyframes keeper-sprite-ledger {
  0%, 20% { background-position: 0% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
  21%, 48% { background-position: 33.333% var(--keeper-sprite-row); transform: translateY(-2px) scale(1.006); }
  49%, 74% { background-position: 66.666% var(--keeper-sprite-row); transform: translateY(-1px) scale(1.004); }
  75%, 100% { background-position: 100% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
}

@keyframes keeper-sprite-blade {
  0%, 18% { background-position: 0% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
  19%, 42% { background-position: 33.333% var(--keeper-sprite-row); transform: translateY(-2px) scale(1.006); }
  43%, 66% { background-position: 66.666% var(--keeper-sprite-row); transform: translateY(-1px) scale(1.004); }
  67%, 100% { background-position: 100% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
}

@keyframes keeper-sprite-mug {
  0%, 22% { background-position: 0% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
  23%, 52% { background-position: 33.333% var(--keeper-sprite-row); transform: translateY(-2px) scale(1.006); }
  53%, 74% { background-position: 66.666% var(--keeper-sprite-row); transform: translateY(-1px) scale(1.004); }
  75%, 100% { background-position: 100% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
}

@keyframes keeper-sprite-coin {
  0%, 20% { background-position: 0% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
  21%, 45% { background-position: 33.333% var(--keeper-sprite-row); transform: translateY(-2px) scale(1.006); }
  46%, 75% { background-position: 66.666% var(--keeper-sprite-row); transform: translateY(-1px) scale(1.004); }
  76%, 100% { background-position: 100% var(--keeper-sprite-row); transform: translateY(0) scale(1); }
}

@keyframes keeper-sprite-lantern {
  0%, 20% { background-position: 0% var(--keeper-sprite-row); transform: translateY(0) scale(1); filter: brightness(1); }
  21%, 48% { background-position: 33.333% var(--keeper-sprite-row); transform: translateY(-2px) scale(1.006); filter: brightness(1.04); }
  49%, 74% { background-position: 66.666% var(--keeper-sprite-row); transform: translateY(-1px) scale(1.004); filter: brightness(1.02); }
  75%, 100% { background-position: 100% var(--keeper-sprite-row); transform: translateY(0) scale(1); filter: brightness(1.08); }
}

@keyframes art-npc-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(0.18deg); }
}

@keyframes art-body-breathe {
  0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.5; }
  50% { transform: scaleX(1.012) scaleY(1.018); opacity: 0.68; }
}

@keyframes art-head-talk {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-2px) rotate(-0.9deg); }
  64% { transform: translateY(1px) rotate(0.7deg); }
}

@keyframes art-mouth-talk {
  0%, 100% { opacity: 0.16; transform: translateY(0) scaleX(0.7) scaleY(0.34); border-radius: 999px; }
  20% { opacity: 0.62; transform: translateY(0.5px) scaleX(0.96) scaleY(1.22); border-radius: 48% 48% 54% 54%; }
  42% { opacity: 0.36; transform: translateY(0.2px) scaleX(0.78) scaleY(0.55); border-radius: 999px; }
  64% { opacity: 0.72; transform: translateY(0.7px) scaleX(1.08) scaleY(1.35); border-radius: 45% 45% 58% 58%; }
  82% { opacity: 0.42; transform: translateY(0.1px) scaleX(0.86) scaleY(0.62); border-radius: 999px; }
}

@keyframes art-arm-left-greet {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  42% { transform: rotate(-1.6deg) translate(-2px, -4px); }
  72% { transform: rotate(0.8deg) translate(1px, -1px); }
}

@keyframes art-arm-right-greet {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  42% { transform: rotate(1.6deg) translate(2px, -4px); }
  72% { transform: rotate(-0.8deg) translate(-1px, -1px); }
}

@keyframes art-arm-ledger {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  35% { transform: rotate(-4deg) translate(5px, 7px); }
  62% { transform: rotate(-1.8deg) translate(2px, 3px); }
}

@keyframes art-ledger-grip {
  0%, 100% { transform: rotate(-12deg) translate(-8%, 2%); }
  35% { transform: rotate(-10deg) translate(-6%, 5%); }
  62% { transform: rotate(-14deg) translate(-9%, 3%); }
}

@keyframes art-arm-blade {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  34% { transform: rotate(-5deg) translate(10px, -10px); }
  68% { transform: rotate(-2deg) translate(3px, -2px); }
}

@keyframes art-blade-held {
  0%, 100% { transform: rotate(-18deg) translate(-22%, -4%); }
  34% { transform: rotate(-26deg) translate(-20%, -7%); }
  68% { transform: rotate(-21deg) translate(-23%, -4%); }
}

@keyframes art-arm-mug {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  24% { transform: rotate(2.5deg) translate(7px, 9px); }
  48% { transform: rotate(4deg) translate(18px, 23px); }
  72% { transform: rotate(1.5deg) translate(5px, 7px); }
}

@keyframes art-mug-held {
  0%, 100% { transform: translate(-12%, -18%) rotate(-7deg); }
  24% { transform: translate(-9%, -9%) rotate(-4deg); }
  48% { transform: translate(-4%, -2%) rotate(-1deg); }
  72% { transform: translate(-10%, -12%) rotate(-5deg); }
}

@keyframes art-arm-coin {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  38% { transform: rotate(-3.6deg) translate(8px, -9px); }
  68% { transform: rotate(-1.4deg) translate(2px, 2px); }
}

@keyframes art-coin-pop {
  0%, 100% { opacity: 0; transform: translateY(16px) scale(0.74); }
  35% { opacity: 0.95; transform: translateY(-8px) scale(1.1); }
  62% { opacity: 0.72; transform: translateY(0) scale(0.94); }
}

@keyframes art-arm-lantern {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(2.2deg) translate(-5px, 4px); }
}

@keyframes art-lantern-held {
  0%, 100% { transform: translate(-16%, -8%) rotate(-7deg); filter: brightness(1); }
  50% { transform: translate(-16%, -5%) rotate(7deg); filter: brightness(1.18); }
}

@keyframes art-pet-buddy {
  0%, 100% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-8px) scale(1.025); }
  70% { transform: translateY(-3px) scale(1.01); }
}

@keyframes art-pet-sparkle {
  0%, 100% { opacity: 0.18; transform: translateY(8px) scale(0.86); }
  52% { opacity: 0.82; transform: translateY(-8px) scale(1.08); }
}

@keyframes keeper-lantern-glow {
  0%, 100% { opacity: 0.32; transform: scale(0.94); }
  50% { opacity: 0.72; transform: scale(1.08); }
}

@keyframes keeper-coin-spark {
  0%, 100% { opacity: 0.18; transform: translateY(4px) scale(0.8); }
  45% { opacity: 0.7; transform: translateY(-6px) scale(1.12); }
}

@keyframes keeper-room-glow {
  0%, 100% { opacity: 0.52; transform: scale(0.96); }
  50% { opacity: 0.86; transform: scale(1.04); }
}

@keyframes keeper-npc-idle {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  50% { transform: scaleX(1.002) scaleY(1.004) rotate(0.08deg); }
}

@keyframes keeper-npc-ledger {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  34% { transform: scaleX(1.002) scaleY(1.005) rotate(-0.35deg); }
  62% { transform: scaleX(1.001) scaleY(1.003) rotate(0.24deg); }
}

@keyframes keeper-npc-trainer {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  32% { transform: scaleX(1.003) scaleY(1.006) rotate(-0.42deg); }
  66% { transform: scaleX(1.001) scaleY(1.003) rotate(0.28deg); }
}

@keyframes keeper-npc-offer {
  0%, 100% { transform: translateX(0) rotate(0deg) scaleX(1) scaleY(1); }
  28% { transform: translateX(2px) rotate(-0.18deg) scaleX(1.002) scaleY(1.004); }
  56% { transform: translateX(-1px) rotate(0.12deg) scaleX(1.001) scaleY(1.003); }
}

@keyframes keeper-npc-merchant {
  0%, 100% { transform: translateX(0) rotate(0deg) scaleX(1) scaleY(1); }
  38% { transform: translateX(-1px) rotate(-0.32deg) scaleX(1.003) scaleY(1.005); }
  70% { transform: translateX(1px) rotate(0.22deg) scaleX(1.001) scaleY(1.003); }
}

@keyframes keeper-npc-guard {
  0%, 100% { transform: rotate(0deg) scaleX(1) scaleY(1); }
  40% { transform: rotate(0.34deg) scaleX(1.002) scaleY(1.004); }
  74% { transform: rotate(-0.24deg) scaleX(1.001) scaleY(1.003); }
}

@keyframes keeper-npc-pet {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  42% { transform: scaleX(1.004) scaleY(1.006) rotate(-0.28deg); }
  68% { transform: scaleX(1.001) scaleY(1.003) rotate(0.22deg); }
}

@keyframes market-keeper-counter-lean {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scaleX(1) scaleY(1);
  }
  34% {
    transform: translateY(0) rotate(-0.26deg) scaleX(1.003) scaleY(1.005);
  }
  66% {
    transform: translateY(1px) rotate(0.18deg) scaleX(1.001) scaleY(1.002);
  }
}

@keyframes dungeon-keeper-ghost-drift {
  0%, 100% {
    transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
    opacity: 0.76;
  }
  28% {
    transform: translateY(-8px) translateX(2px) scaleX(1.004) scaleY(1.008);
    opacity: 0.84;
  }
  58% {
    transform: translateY(-4px) translateX(-2px) scaleX(0.998) scaleY(1.004);
    opacity: 0.72;
  }
  82% {
    transform: translateY(-7px) translateX(1px) scaleX(1.002) scaleY(1.006);
    opacity: 0.8;
  }
}

@keyframes dungeon-keeper-ghost-aura {
  0%, 100% { transform: scale(0.96); opacity: 0.48; }
  50% { transform: scale(1.05); opacity: 0.84; }
}

@keyframes dungeon-keeper-ghost-mist {
  0%, 100% { transform: translateY(0) scaleX(0.92); opacity: 0.44; }
  50% { transform: translateY(-5px) scaleX(1.08); opacity: 0.74; }
}

@keyframes garden-keeper-tend {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scaleX(1) scaleY(1);
  }
  32% {
    transform: translateY(0) rotate(-0.22deg) scaleX(1.003) scaleY(1.006);
  }
  64% {
    transform: translateY(1px) rotate(0.16deg) scaleX(1.001) scaleY(1.003);
  }
}

@keyframes garden-keeper-leaf-glow {
  0%, 100% { transform: scale(0.95); opacity: 0.48; }
  50% { transform: scale(1.06); opacity: 0.82; }
}

@keyframes npc-breath {
  0%, 100% { opacity: 0.3; transform: scale(0.92); }
  50% { opacity: 0.62; transform: scale(1.08); }
}

@keyframes npc-mouth-talk {
  0%, 100% { opacity: 0; transform: scaleX(0.8) scaleY(0.55); }
  25% { opacity: 0.72; transform: scaleX(1.05) scaleY(1); }
  50% { opacity: 0.38; transform: scaleX(0.9) scaleY(0.68); }
  75% { opacity: 0.78; transform: scaleX(1.14) scaleY(1.05); }
}

@keyframes npc-wave-small {
  0%, 100% { opacity: 0.22; transform: rotate(-20deg) scale(0.82); }
  45% { opacity: 0.9; transform: rotate(24deg) scale(1.04); }
}

@keyframes npc-training-sweep {
  0%, 100% { opacity: 0.18; transform: rotate(-18deg) translateX(-6px); }
  46% { opacity: 0.78; transform: rotate(18deg) translateX(8px); }
}

@keyframes npc-pet-sparkle {
  0%, 100% { opacity: 0.18; transform: translateY(8px) scale(0.86); }
  52% { opacity: 0.82; transform: translateY(-8px) scale(1.08); }
}

@keyframes district-keeper-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.018); }
}

@keyframes district-keeper-map {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  28% { transform: translateY(-3px) rotate(-1deg) scale(1.018); }
  58% { transform: translateY(-1px) rotate(1.2deg) scale(1.012); }
}

@keyframes district-keeper-hammer {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  24% { transform: translateY(-4px) rotate(-1.4deg) scale(1.02); }
  48% { transform: translateY(1px) rotate(1deg) scale(1.01); }
  72% { transform: translateY(-2px) rotate(-0.5deg) scale(1.014); }
}

@keyframes district-keeper-garden {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  35% { transform: translateY(-5px) rotate(0.8deg) scale(1.02); }
  68% { transform: translateY(-2px) rotate(-0.8deg) scale(1.012); }
}

@keyframes district-keeper-vial {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  32% { transform: translateY(-4px) translateX(2px) scale(1.018); }
  64% { transform: translateY(-1px) translateX(-1px) scale(1.012); }
}

@keyframes district-keeper-moon {
  0%, 100% { transform: translateY(0) scale(1); filter: saturate(1) brightness(1); }
  50% { transform: translateY(-4px) scale(1.018); filter: saturate(1.12) brightness(1.08); }
}

@keyframes district-keeper-pantry {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  30% { transform: translateY(-3px) translateX(-2px) scale(1.016); }
  58% { transform: translateY(-2px) translateX(2px) scale(1.02); }
}

@keyframes district-keeper-cloth {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  26% { transform: translateY(-3px) rotate(1deg) scale(1.018); }
  54% { transform: translateY(-1px) rotate(-1.2deg) scale(1.012); }
}

@keyframes district-keeper-hair {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg) scale(1); }
  24% { transform: translateY(-3px) translateX(1px) rotate(-0.8deg) scale(1.018); }
  52% { transform: translateY(-1px) translateX(-2px) rotate(1.1deg) scale(1.014); }
  76% { transform: translateY(-4px) translateX(0) rotate(-0.4deg) scale(1.02); }
}

@keyframes trainer-ready {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes speech-glow {
  0%, 100% { border-color: rgba(255, 236, 168, 0.28); }
  50% { border-color: rgba(255, 236, 168, 0.62); }
}

@media (prefers-reduced-motion: reduce) {
  .keeper-portrait img,
  .npc-shadow,
  .npc-breath,
  .npc-mouth,
  .npc-gesture,
  .npc-prop,
  .art-npc-rig,
  .keeper-sprite,
  .art-piece,
  .art-mouth,
  .art-hand-prop,
  .art-spark,
  .keeper-prompt,
  .town-interior-keeper,
  .town-interior-keeper img,
  .future-keeper-card img,
  .training-trainer,
  .training-stage-pet {
    animation: none;
  }
}

.town-area-screen.is-active > .section-heading,
.town-area-screen.is-active > .intro-copy,
.town-area-screen.is-active .hero-panel,
.town-area-screen.is-active .stat-tile,
.town-area-screen.is-active .readiness-panel article,
.town-area-screen.is-active .log-pane,
.town-area-screen.is-active .integration-card,
.town-area-screen.is-active .vault-card,
.town-area-screen.is-active .history-item,
.town-area-screen.is-active .bond-card,
.town-area-screen.is-active .pet-panel,
.town-area-screen.is-active .artifact-card,
.town-area-screen.is-active .stakes-card,
.town-area-screen.is-active .real-reward-card,
.town-area-screen.is-active .boss-panel,
.town-area-screen.is-active .dungeon-gate-hero,
.town-area-screen.is-active .workout-hero,
.town-area-screen.is-active .plan-intel article,
.town-area-screen.is-active .plan-card,
.town-area-screen.is-active .pet-coach-card,
.town-area-screen.is-active .personal-chatgpt-card,
.town-area-screen.is-active .privacy-note {
  border-color: rgba(238, 210, 129, 0.52);
  background-color: rgba(20, 28, 25, 0.72);
  color: #f7f2df;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 20px 46px rgba(5, 12, 10, 0.36);
  backdrop-filter: blur(13px) saturate(1.12);
}

.town-area-screen.is-active > .section-heading,
.town-area-screen.is-active > .intro-copy {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(238, 210, 129, 0.48);
  border-radius: 8px;
  background: rgba(18, 26, 23, 0.74);
  color: #f7f2df;
}

.town-area-screen.is-active > .section-heading,
.town-area-screen.is-active > .intro-copy {
  --surface-text: var(--dark-surface-text);
  --surface-muted: var(--dark-surface-muted);
  --surface-accent: var(--dark-surface-accent);
}

.town-area-screen.is-active > .section-heading :where(h1, h2, h3, strong),
.town-area-screen.is-active > .intro-copy :where(h1, h2, h3, strong) {
  color: var(--surface-text);
}

.town-area-screen.is-active > .section-heading :where(p, span, small),
.town-area-screen.is-active > .intro-copy :where(p, span, small) {
  color: var(--surface-muted);
}

.town-area-screen.is-active :is(input, select, textarea):not(.surface-light *) {
  border-color: rgba(238, 210, 129, 0.32);
  background: rgba(255, 252, 239, 0.92);
  color: var(--ink);
}

.town-area-screen.is-active > .section-heading:first-child {
  margin-top: 0;
}

.town-area-screen.is-active.area-dungeon > .section-heading,
.town-area-screen.is-active.area-dungeon .boss-panel,
.town-area-screen.is-active.area-dungeon .dungeon-encounter,
.town-area-screen.is-active.area-dungeon .unlock-card {
  border-color: rgba(193, 186, 255, 0.38);
  background-color: rgba(244, 241, 255, 0.7);
}

.hero-panel,
.stat-tile,
.log-pane,
.pet-panel,
.boss-panel,
.privacy-note,
.dialog-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 12px;
  min-height: 184px;
  padding: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(47, 116, 93, 0.16), rgba(220, 174, 53, 0.14)),
    var(--surface);
}

.hero-copy h2 {
  margin-bottom: 8px;
  font-size: 1.46rem;
  line-height: 1.1;
}

.hero-copy p:not(.eyebrow) {
  color: var(--muted);
}

.companion-stage {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
}

.companion-stage img {
  width: 124px;
  height: 124px;
  object-fit: contain;
}

#petBadge {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  min-height: 28px;
  margin-top: 4px;
  padding: 5px 6px;
  border: 1px solid rgba(32, 68, 58, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--green-dark);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.progress-block {
  margin-top: 16px;
}

.progress-row,
.section-heading,
.boss-panel,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dialog-actions {
  flex-wrap: wrap;
}

.progress-row {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.meter {
  width: 100%;
  height: 12px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(32, 68, 58, 0.18);
  border-radius: 999px;
  background: #e8eee9;
}

.meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transition: width 240ms ease;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 12px 0 18px;
}

.stat-tile {
  min-height: 72px;
  padding: 10px 8px;
}

.stat-label {
  display: block;
  min-height: 30px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.15;
}

.stat-tile strong {
  display: block;
  margin-top: 8px;
  color: var(--green-dark);
  font-size: 1.05rem;
  line-height: 1;
}

.readiness-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.readiness-panel article {
  min-height: 126px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.readiness-panel span,
.readiness-panel p {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.readiness-panel strong {
  display: block;
  margin: 7px 0 5px;
  color: var(--green-dark);
  font-size: 1rem;
  line-height: 1.05;
}

.readiness-panel p {
  margin-bottom: 0;
}

.rule-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.section-heading {
  margin: 18px 0 10px;
}

.section-heading span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.quest-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.quest-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.quest-glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--green-dark);
  font-weight: 900;
}

.quest-title {
  display: block;
  font-weight: 820;
}

.quest-detail {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.quest-xp {
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 850;
}

.ghost-button,
.text-button,
.primary-button,
.danger-button,
.segmented button,
.command-grid button,
.rep-tapper button,
.bottom-nav button {
  min-height: 40px;
  border-radius: 8px;
  font-weight: 850;
}

.ghost-button,
.text-button {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--green-dark);
}

.text-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.84rem;
}

.primary-button {
  width: 100%;
  border: 1px solid var(--green-dark);
  background: var(--green-dark);
  color: #ffffff;
}

.danger-button {
  border: 1px solid rgba(211, 95, 77, 0.35);
  background: #fff3f0;
  color: #9f3628;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #edf2ee;
}

.integration-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.integration-card {
  min-height: 116px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(77, 119, 181, 0.08), rgba(47, 116, 93, 0.08)),
    var(--surface);
}

.integration-card span,
.integration-card p,
.integration-card small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.integration-card strong {
  display: block;
  margin: 4px 0;
  color: var(--green-dark);
}

.integration-card p {
  margin-bottom: 6px;
}

.integration-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.integration-card label {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.integration-card .integration-wide {
  grid-column: 1 / -1;
}

.integration-card select,
.integration-card input,
.integration-card textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
}

.integration-card textarea {
  resize: vertical;
}

.integration-action {
  width: 100%;
  margin-top: 10px;
}

.profile-integration-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 234, 175, 0.22), transparent 34%),
    rgba(8, 15, 13, 0.78);
  backdrop-filter: blur(5px);
}

.onboarding-card {
  max-width: min(980px, calc(100vw - 28px));
  max-height: min(92vh, 920px);
  overflow: auto;
  border-color: rgba(238, 210, 129, 0.54);
  background:
    linear-gradient(180deg, rgba(255, 249, 229, 0.98), rgba(237, 246, 238, 0.98)),
    var(--surface);
}

.onboarding-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(32, 68, 58, 0.15);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(237, 246, 238, 0.76)),
    #ffffff;
}

.step-rune {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(32, 68, 58, 0.2);
  border-radius: 50%;
  background: #173b30;
  color: #fff7d9;
  font-weight: 950;
}

.onboarding-step h3 {
  margin: 0 0 4px;
  color: var(--green-dark);
}

.onboarding-step p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.onboarding-choice-grid {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.onboarding-goal-panel {
  min-height: 100%;
}

.onboarding-next-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(238, 210, 129, 0.46);
  border-radius: 8px;
  background: #17231e;
  color: #fff7d9;
}

.onboarding-next-card strong {
  width: 100%;
  color: #fff7d9;
}

.onboarding-next-card span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(255, 247, 217, 0.22);
  border-radius: 999px;
  background: rgba(255, 247, 217, 0.1);
  color: rgba(255, 247, 217, 0.9);
  font-size: 0.75rem;
  font-weight: 850;
}

.onboarding-next-card p {
  width: 100%;
  margin: 0;
  color: rgba(255, 247, 217, 0.76);
  font-size: 0.84rem;
  line-height: 1.42;
}

.onboarding-book {
  position: relative;
  max-width: min(1120px, calc(100vw - 24px));
  background:
    linear-gradient(90deg, rgba(82, 49, 25, 0.12), transparent 8%, transparent 92%, rgba(82, 49, 25, 0.12)),
    linear-gradient(180deg, #fff7de, #f1e3ba 48%, #f7efd2);
  box-shadow:
    0 26px 72px rgba(4, 9, 7, 0.46),
    inset 0 0 0 2px rgba(90, 58, 29, 0.2);
}

.book-cover {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(89, 62, 27, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(42, 79, 62, 0.94), rgba(105, 63, 38, 0.92)),
    #1c3329;
  color: #fff7d9;
}

.book-cover h2 {
  margin: 0;
  color: #fff7d9;
}

.book-cover .eyebrow,
.book-cover span {
  color: rgba(255, 247, 217, 0.82);
}

.book-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.book-progress button {
  min-height: 48px;
  border: 1px solid rgba(82, 49, 25, 0.24);
  border-radius: 8px;
  background: rgba(255, 252, 238, 0.72);
  color: #3a2b1e;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
}

.book-progress button span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0 auto 3px;
  border-radius: 50%;
  background: rgba(42, 79, 62, 0.14);
  color: #214436;
}

.book-progress button.is-active {
  background: #214436;
  color: #fff7d9;
}

.book-progress button.is-active span {
  background: #f1c65b;
  color: #1d2a24;
}

.onboarding-page {
  display: none;
  min-height: 520px;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(82, 49, 25, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 252, 238, 0.86), rgba(255, 249, 226, 0.7)),
    #fff7de;
}

.onboarding-page.is-active {
  display: grid;
}

.book-page-copy {
  padding: 14px;
  border-right: 1px solid rgba(82, 49, 25, 0.18);
}

.book-page-copy h3 {
  margin: 10px 0 6px;
  color: #214436;
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  line-height: 1.05;
}

.book-page-copy p {
  color: #5a4936;
  line-height: 1.55;
}

.book-page-fields,
.book-plan-layout {
  display: grid;
  align-content: start;
  gap: 12px;
}

.book-selection-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: 16px;
  min-width: 0;
}

.book-selection-layout .onboarding-choice-grid {
  max-height: 460px;
  padding-right: 8px;
}

.book-preview-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 100%;
  padding: 14px;
  border: 1px solid rgba(82, 49, 25, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(242, 226, 181, 0.62)),
    #f9edc6;
  color: #332719;
}

.book-preview-panel h3 {
  margin: 0;
  color: #214436;
}

.book-preview-panel p {
  margin: 0;
  color: #514232;
  line-height: 1.45;
}

.book-preview-art {
  display: grid;
  place-items: end center;
  min-height: 300px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(96, 151, 124, 0.16), rgba(94, 58, 32, 0.12)),
    radial-gradient(circle at 50% 100%, rgba(46, 73, 58, 0.24), transparent 45%);
  overflow: hidden;
}

.book-preview-art img {
  width: min(80%, 260px);
  max-height: 300px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 18px rgba(38, 24, 14, 0.32));
}

.book-pet-preview-art {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 10px;
  align-items: end;
}

.book-pet-preview-art figure {
  display: grid;
  gap: 6px;
  place-items: center;
  margin: 0;
  min-height: 190px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
}

.book-pet-preview-art img {
  max-width: 100%;
  max-height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 14px 14px rgba(38, 24, 14, 0.22));
}

.book-pet-preview-art figcaption {
  color: #5a4936;
  font-size: 0.75rem;
  font-weight: 850;
}

.goal-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.book-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.book-plan-output {
  min-height: 230px;
  max-height: 360px;
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(82, 49, 25, 0.24);
  border-radius: 8px;
  background: rgba(29, 39, 33, 0.92);
  color: #fff7d9;
  white-space: pre-wrap;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .book-progress {
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 4px;
  }

  .book-progress button {
    min-height: 44px;
    font-size: 0.66rem;
  }

  .onboarding-page,
  .onboarding-page.is-active,
  .book-selection-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .onboarding-page {
    min-height: 0;
    padding: 12px;
  }

  .book-page-copy {
    border-right: 0;
    border-bottom: 1px solid rgba(82, 49, 25, 0.18);
  }

  .book-selection-layout .onboarding-choice-grid {
    max-height: 320px;
  }

  .goal-edit-grid,
  .book-pet-preview-art {
    grid-template-columns: 1fr;
  }
}

.account-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(47, 116, 93, 0.08), rgba(220, 174, 53, 0.1)),
    var(--surface);
}

.account-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-status-grid article {
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(32, 68, 58, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.account-status-grid span,
.account-status-grid p {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.account-status-grid strong {
  display: block;
  margin: 5px 0;
  color: var(--green-dark);
}

.account-integrity-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(32, 68, 58, 0.16);
  border-radius: 8px;
  background: rgba(255, 252, 239, 0.9);
}

.account-integrity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.account-integrity-grid article {
  padding: 10px;
  border: 1px solid rgba(32, 68, 58, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

.account-integrity-grid span,
.account-integrity-grid p {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.account-integrity-grid strong {
  display: block;
  margin: 4px 0;
  color: var(--green-dark);
}

.account-integrity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recovery-history-panel {
  margin-top: 12px;
  border-top: 1px solid rgba(58, 77, 65, 0.28);
  padding-top: 10px;
}

.recovery-history-panel summary {
  color: #24362e;
  cursor: pointer;
  font-weight: 700;
}

.recovery-history-panel ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: #34493e;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.connectivity-indicator {
  min-height: 34px;
  border: 1px solid rgba(220, 236, 226, 0.48);
  border-radius: 6px;
  padding: 0 11px;
  background: rgba(20, 45, 37, 0.76);
  color: #f5fbf7;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.connectivity-indicator[data-status="offline"] {
  border-color: #e9be74;
  background: #5a4022;
}

.connectivity-indicator[data-status="pending"] {
  border-color: #8fc8c1;
  background: #265b55;
}

.connectivity-indicator[data-status="error"] {
  border-color: #eca08e;
  background: #6d342d;
}

.offline-sync-panel {
  margin-top: 16px;
  border-top: 1px solid rgba(58, 77, 65, 0.28);
  padding-top: 16px;
}

.offline-sync-queue {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.offline-sync-queue li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid rgba(58, 77, 65, 0.18);
  color: #2e4439;
}

.offline-sync-queue li div {
  display: grid;
  gap: 2px;
}

.offline-sync-queue li span {
  color: #587064;
  font-size: 0.78rem;
}

.reminder-indicator {
  min-height: 34px;
  border: 1px solid rgba(211, 185, 117, 0.48);
  border-radius: 6px;
  padding: 0 11px;
  background: rgba(26, 39, 58, 0.82);
  color: #f7edd5;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.reminder-indicator[data-has-due="true"] {
  border-color: #cdb270;
  background: #3c4d79;
  box-shadow: inset 0 0 0 1px rgba(238, 220, 169, 0.18);
}

.reminder-center-panel {
  margin-top: 16px;
  border-top: 1px solid rgba(58, 77, 65, 0.28);
  padding-top: 16px;
}

.reminder-center-sections {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.reminder-center-sections details {
  border-bottom: 1px solid rgba(63, 75, 67, 0.2);
  padding: 8px 0;
}

.reminder-center-sections summary {
  cursor: pointer;
  color: #273b32;
  font-weight: 800;
}

.reminder-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.reminder-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(63, 75, 67, 0.14);
}

.reminder-card span,
.reminder-card small {
  display: block;
  color: #5d7065;
  font-size: 0.74rem;
}

.reminder-card strong {
  display: block;
  margin: 2px 0;
  color: #253b31;
}

.reminder-card p {
  margin: 0;
  color: #465b50;
  font-size: 0.82rem;
  line-height: 1.42;
}

.reminder-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.reminder-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 12px 0;
}

.reminder-preference {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid rgba(63, 75, 67, 0.16);
}

.reminder-preference span,
.reminder-preference strong,
.reminder-preference small {
  display: block;
}

.reminder-preference small {
  color: #66786f;
}

/* Production Pack 7: premium Hearthvale Ledger shell. */
.onboarding-dialog {
  width: min(calc(100% - 20px), 1240px);
}

.onboarding-dialog::backdrop {
  background: rgba(7, 11, 17, 0.88);
  backdrop-filter: blur(7px);
}

.onboarding-book {
  position: relative;
  max-width: min(1200px, calc(100vw - 24px));
  max-height: min(94vh, 960px);
  border: 1px solid #8e7542;
  border-radius: 6px;
  background: #19263e;
  box-shadow: 0 34px 90px rgba(3, 6, 11, 0.72), inset 0 0 0 3px #26395a, inset 0 0 0 5px rgba(205, 178, 112, 0.62);
}

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

.onboarding-book::before {
  inset: 10px;
  border: 1px solid rgba(205, 178, 112, 0.68);
  border-radius: 4px;
}

.onboarding-book::after {
  top: 132px;
  bottom: 88px;
  left: 50%;
  width: 32px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(79, 52, 27, 0.15), rgba(255, 255, 255, 0.2), rgba(79, 52, 27, 0.15), transparent);
}

.onboarding-book > * {
  position: relative;
  z-index: 1;
}

.book-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 86px;
  padding: 17px 22px;
  border: 1px solid rgba(205, 178, 112, 0.72);
  border-radius: 4px;
  background: #17243b;
  color: #f0e3c4;
  box-shadow: inset 0 0 26px rgba(5, 10, 18, 0.58), inset 0 0 0 2px rgba(47, 73, 111, 0.82);
}

.book-cover::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(209, 182, 113, 0.36);
  pointer-events: none;
}

.book-cover h2 {
  color: #f4e8cc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  letter-spacing: 0;
}

.book-cover .eyebrow,
.book-cover span {
  color: #c9d9ef;
}

.ledger-cover-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ledger-cover-actions button {
  border-color: rgba(207, 181, 115, 0.44);
  background: rgba(31, 48, 76, 0.72);
  color: #f1e5c8;
}

.book-progress {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin: 10px 8px;
}

.book-progress button {
  min-height: 52px;
  border-color: #8d7241;
  border-radius: 4px;
  background: #263a5d;
  color: #e8dcc1;
  box-shadow: inset 0 -3px 0 rgba(5, 12, 23, 0.34);
}

.book-progress button span {
  border-radius: 2px;
  background: #b59a5b;
  color: #142137;
}

.book-progress button.is-active {
  background: #4f6398;
  color: #fff5da;
  box-shadow: inset 0 0 0 1px #d7bd78, 0 0 14px rgba(105, 145, 214, 0.3);
}

.onboarding-page {
  min-height: 540px;
  border-color: #94794a;
  border-radius: 3px;
  background: linear-gradient(90deg, #ead8b4 0%, #f6ead1 47%, #e7d2ac 50%, #f7ebd3 53%, #ead8b4 100%);
  box-shadow: inset 0 0 36px rgba(95, 66, 34, 0.18), inset 0 0 0 2px rgba(255, 248, 226, 0.48);
}

.book-page-copy {
  border-right-color: rgba(113, 82, 44, 0.32);
}

.book-page-copy h3 {
  color: #243657;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  letter-spacing: 0;
}

.step-rune {
  border: 1px solid #b89a59;
  border-radius: 4px;
  background: #273b60;
  color: #f4e6c5;
  box-shadow: inset 0 0 0 2px rgba(97, 132, 188, 0.36);
}

.book-page-fields,
.book-plan-layout,
.realm-rules-fields,
.ledger-final-review {
  padding: 12px;
}

.book-preview-panel {
  border-color: rgba(113, 82, 44, 0.38);
  border-radius: 4px;
  background: rgba(245, 232, 199, 0.74);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 231, 0.5);
}

.book-preview-art,
.book-pet-preview-art figure {
  border: 1px solid rgba(63, 83, 115, 0.24);
  border-radius: 4px;
  background: rgba(216, 226, 231, 0.28);
}

.book-plan-output {
  border-color: #9f854b;
  border-radius: 4px;
  background: #1b2941;
  color: #f2e7cc;
}

.onboarding-next-card {
  border-color: #a88b4c;
  border-radius: 4px;
  background: #1d2b43;
  color: #f5e8c8;
}

.onboarding-next-card span {
  border-radius: 4px;
}

.ledger-final-review {
  display: grid;
  align-content: start;
  gap: 12px;
}

.ledger-review-crest {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid #a98a4c;
  border-radius: 50%;
  background: #293e64;
  color: #f3e4bf;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  box-shadow: inset 0 0 0 4px rgba(108, 145, 203, 0.24);
}

.ledger-final-review h3 {
  margin: 0;
  color: #25385b;
  font-family: Georgia, serif;
  font-size: 1.65rem;
}

.ledger-final-review dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.ledger-final-review dl div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(105, 77, 42, 0.24);
}

.ledger-final-review dt {
  color: #5d4a31;
  font-weight: 800;
}

.ledger-final-review dd {
  margin: 0;
  color: #2d3540;
}

body.is-high-contrast {
  --ink: #101714;
  --muted: #35453d;
  --line: #596b62;
}

body.is-high-contrast :focus-visible {
  outline: 3px solid #67a9df;
  outline-offset: 3px;
}

body.is-reduced-motion *,
body.is-reduced-motion *::before,
body.is-reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media (max-width: 820px) {
  .book-progress {
    grid-template-columns: repeat(7, minmax(40px, 1fr));
    overflow-x: auto;
  }

  .book-progress button {
    min-width: 76px;
  }

  .onboarding-book::after {
    display: none;
  }

  .onboarding-page {
    background: #f2e3c3;
  }

  .reminder-card,
  .reminder-category-grid {
    grid-template-columns: 1fr;
  }

  .reminder-actions {
    justify-content: stretch;
  }
}

.segmented button {
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
}

.segmented button.is-active {
  background: #ffffff;
  color: var(--green-dark);
  box-shadow: 0 1px 8px rgba(32, 68, 58, 0.12);
}

.log-pane {
  display: none;
  padding: 14px;
}

.log-pane.is-active {
  display: block;
}

.panel-form {
  display: grid;
  gap: 12px;
}

/* Adventure Guild activity records */
.activity-workspace {
  display: grid;
  gap: 18px;
  color: #172b27;
}

.activity-entry-form,
.activity-saved-panel,
.activity-report-panel {
  --surface-text: var(--light-surface-text);
  --surface-muted: var(--light-surface-muted);
  --surface-accent: var(--light-surface-accent);
  border: 1px solid var(--light-surface-border);
  border-radius: 8px;
  background: rgba(255, 253, 244, 0.96);
  color: var(--surface-text);
  box-shadow: 0 12px 28px rgba(18, 36, 31, 0.12);
}

.activity-entry-form :where(h2, h3, h4, strong),
.activity-saved-panel :where(h2, h3, h4, strong),
.activity-report-panel :where(h2, h3, h4, strong) {
  color: var(--surface-text);
}

.activity-entry-form :where(p, span, small, label),
.activity-saved-panel :where(p, span, small, label),
.activity-report-panel :where(p, span, small, label) {
  color: var(--surface-muted);
}

.activity-entry-form {
  padding: clamp(14px, 3vw, 24px);
}

.activity-form-heading,
.activity-saved-panel > header,
.activity-report-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(32, 68, 58, 0.18);
}

.activity-form-heading h3,
.activity-form-heading p,
.activity-saved-panel h3,
.activity-report-panel h3 {
  margin: 0;
}

.activity-form-heading p {
  margin-top: 4px;
  color: #51655e;
}

#activitySaveStatus {
  min-height: 24px;
  color: #245f49;
  font-weight: 850;
}

.activity-quick-labels,
.activity-form-actions,
.activity-label-tools,
.activity-report-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.activity-quick-labels button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #557c6b;
  border-radius: 6px;
  background: #eef5e9;
  color: #173f34;
  font-weight: 800;
}

.activity-entry-form fieldset,
.activity-label-manager,
.activity-wellness-fields,
.activity-import-panel {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--light-surface-border-subtle);
  border-radius: 6px;
  background: rgba(238, 245, 233, 0.5);
}

.activity-entry-form legend,
.activity-wellness-fields summary,
.activity-import-panel summary {
  color: #20443a;
  font-weight: 900;
}

.activity-wellness-fields summary,
.activity-import-panel summary {
  cursor: pointer;
}

.activity-wellness-fields[open] summary,
.activity-import-panel[open] summary {
  margin-bottom: 12px;
}

.water-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.water-quick-actions button {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #806333;
  background: #fffaf0;
  color: #263c33;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.activity-metric-grid,
.activity-report-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.activity-step-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.activity-step-mode label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--light-surface-border-subtle);
  border-radius: 6px;
  background: #fffdf4;
  color: #1c3e35;
}

.activity-step-mode input,
.activity-check input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.activity-step-mode span,
.activity-step-mode small {
  display: block;
}

.activity-step-mode small {
  margin-top: 3px;
  color: var(--surface-muted);
  font-weight: 600;
}

.activity-pace-preview,
.activity-validation {
  min-height: 20px;
  margin: 8px 0 0;
  color: #365f53;
  font-size: 0.82rem;
  font-weight: 750;
}

.activity-validation:not(:empty) {
  color: #8b2e24;
}

.activity-check {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
}

.activity-custom-label-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.activity-custom-label-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(32, 68, 58, 0.14);
}

.activity-custom-label-list article > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.activity-custom-label-list span {
  display: block;
  color: var(--surface-muted);
  font-size: 0.76rem;
}

.activity-custom-label-list .is-archived {
  opacity: 0.68;
}

.activity-saved-panel,
.activity-report-panel {
  padding: clamp(14px, 3vw, 20px);
}

.activity-daily-summary {
  display: grid;
  gap: 3px;
  margin: 14px 0 8px;
  padding: 12px;
  border-left: 4px solid #47765e;
  background: #edf4e8;
}

.activity-daily-summary span,
.activity-daily-summary small {
  color: #3e554e;
}

.activity-grouped-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.activity-grouped-totals > span {
  padding: 6px 9px;
  border: 1px solid var(--light-surface-border-subtle);
  border-radius: 5px;
  background: #fffdf4;
  font-size: 0.78rem;
}

.activity-entry-list {
  display: grid;
}

.activity-entry-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.25fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid rgba(32, 68, 58, 0.16);
}

.activity-entry-time span,
.activity-entry-detail > span,
.activity-entry-detail small {
  display: block;
  color: var(--surface-muted);
  font-size: 0.74rem;
}

.activity-entry-detail p {
  margin: 5px 0;
  color: #283f38;
}

.activity-entry-actions {
  display: flex;
  gap: 6px;
}

.text-button.danger {
  color: #8b2e24;
}

.activity-report-filters {
  margin: 14px 0 10px;
}

.activity-report-toggles {
  padding: 10px 0;
  border-top: 1px solid rgba(32, 68, 58, 0.14);
  border-bottom: 1px solid rgba(32, 68, 58, 0.14);
}

.activity-report-toggles > label:last-child {
  min-width: 180px;
  margin-left: auto;
}

.activity-report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.activity-report-summary span {
  --surface-text: var(--dark-surface-text);
  --surface-muted: var(--dark-surface-muted);
  --surface-accent: var(--dark-surface-accent);
  min-width: 0;
  padding: 9px;
  background: #17342d;
  color: var(--surface-text);
}

.activity-report-summary small,
.activity-report-summary strong {
  display: block;
}

.activity-report-summary small {
  color: var(--surface-muted);
}

.activity-report-summary strong {
  color: var(--surface-text);
}

.activity-report-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.activity-report-groups article {
  padding: 11px;
  border: 1px solid var(--light-surface-border-subtle);
  background: #fffdf4;
}

.activity-report-groups span {
  display: block;
  color: var(--surface-muted);
  font-size: 0.76rem;
}

.activity-report-groups p,
.activity-empty-state {
  margin: 6px 0 0;
  color: #3e554e;
}

@media (max-width: 620px) {
  .activity-form-heading,
  .activity-saved-panel > header,
  .activity-report-panel > header,
  .activity-custom-label-list article {
    display: grid;
  }

  .activity-step-mode,
  .activity-entry-row {
    grid-template-columns: 1fr;
  }

  .activity-entry-actions {
    justify-content: flex-start;
  }

  .activity-report-toggles > label:last-child {
    width: 100%;
    margin-left: 0;
  }
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 780;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
}

input,
select {
  min-height: 44px;
  padding: 0 11px;
}

textarea {
  resize: vertical;
  padding: 10px 11px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  outline: 3px solid var(--focus-ring-light);
  outline-offset: 2px;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.micro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.food-followup-settings,
.food-response-panel,
.tracker-foundation-status {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--light-surface-border);
  border-radius: 8px;
  background: rgba(255, 252, 238, 0.9);
  color: var(--ink);
}

.food-followup-settings {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.45fr);
  align-items: end;
}

.food-followup-settings p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--surface-muted);
  font-size: 0.8rem;
}

.food-response-panel {
  margin-top: 12px;
}

.food-response-queue {
  display: grid;
  gap: 10px;
}

.food-response-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--light-surface-border-subtle);
  border-radius: 8px;
  background: #fffdf4;
  box-shadow: 0 10px 22px rgba(28, 48, 38, 0.08);
}

.food-response-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.food-response-card h3,
.food-response-card p {
  margin: 0;
}

.food-response-card p,
.tracker-foundation-status p {
  color: var(--surface-muted);
  font-size: 0.82rem;
}

.food-response-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.food-response-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tracker-foundation-status {
  margin: 10px 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.tracker-foundation-status span {
  color: var(--surface-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.tracker-foundation-status strong {
  display: block;
  color: var(--surface-accent);
}

@media (max-width: 720px) {
  .food-followup-settings,
  .food-response-grid {
    grid-template-columns: 1fr;
  }

  .food-response-card header {
    display: grid;
  }
}

.hint,
.intro-copy {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.guild-report-desk,
.guild-log-panes,
.guild-report-ledger {
  display: grid;
  gap: 10px;
}

.guild-report-desk {
  margin: 12px 0;
}

.guild-report-desk .intro-copy {
  margin: 0;
}

#guildLogTabs .segmented {
  margin: 0;
}

.guild-routing-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.town-ledger-card,
.garden-steward-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(255, 232, 168, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(33, 54, 45, 0.94), rgba(54, 77, 60, 0.9)),
    var(--surface);
  color: #fff8de;
  box-shadow: 0 16px 38px rgba(13, 23, 18, 0.26);
}

.town-ledger-card h2,
.garden-steward-panel h3 {
  margin: 0;
  color: #fff7d7;
}

.town-ledger-card p,
.garden-steward-panel p {
  margin: 4px 0 0;
  color: rgba(255, 248, 222, 0.86);
}

.town-ledger-card .eyebrow,
.garden-steward-panel .eyebrow {
  color: #f7d86d;
}

.ledger-actions,
.town-rename-form {
  display: grid;
  gap: 8px;
}

.town-rename-form {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

.town-rename-form .hint {
  grid-column: 1 / -1;
  color: rgba(255, 248, 222, 0.76);
}

.garden-summary-strip,
.garden-seed-list,
.garden-plot-grid {
  display: grid;
  gap: 10px;
}

.garden-summary-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: min(420px, 100%);
}

.garden-summary-strip span,
.garden-seed-card,
.garden-plot-card {
  border: 1px solid rgba(255, 242, 194, 0.36);
  border-radius: 8px;
  background: rgba(255, 252, 232, 0.92);
  color: var(--green-dark);
  box-shadow: 0 10px 24px rgba(25, 41, 31, 0.12);
}

.garden-summary-strip span {
  display: grid;
  gap: 2px;
  padding: 9px;
  font-size: 0.78rem;
}

.garden-summary-strip strong {
  font-size: 1rem;
}

.garden-seed-list {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.garden-seed-card {
  min-height: 120px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.garden-seed-card.is-active {
  border-color: rgba(54, 116, 84, 0.86);
  box-shadow: 0 0 0 3px rgba(54, 116, 84, 0.18), 0 14px 30px rgba(25, 41, 31, 0.18);
}

.garden-seed-card strong,
.garden-seed-card span,
.garden-seed-card small,
.garden-plot-card strong,
.garden-plot-card span,
.garden-plot-card small {
  display: block;
}

.garden-seed-card small,
.garden-plot-card small {
  color: #486252;
}

.garden-plot-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.garden-plot-card {
  display: grid;
  gap: 9px;
  min-height: 190px;
  padding: 12px;
}

.garden-plot-card.is-ready {
  border-color: rgba(86, 141, 76, 0.9);
  background: linear-gradient(135deg, rgba(240, 255, 223, 0.96), rgba(255, 250, 220, 0.94));
}

.garden-plot-card.is-locked {
  opacity: 0.78;
  background: rgba(237, 235, 219, 0.9);
}

.garden-plot-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.toggle-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.toggle-line input {
  width: 20px;
  height: 20px;
}

.rule-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.rule-toggle {
  align-items: flex-start;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.rule-toggle span,
.rule-toggle small,
.rule-toggle strong {
  display: block;
}

.rule-toggle strong {
  color: var(--green-dark);
  line-height: 1.1;
}

.rule-toggle small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.fitness-setup-panel {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid rgba(47, 116, 93, 0.2);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(238, 248, 241, 0.86), rgba(246, 242, 251, 0.72));
}

.goal-suggestion-panel {
  display: grid;
  align-content: start;
  gap: 5px;
}

.goal-suggestion-panel span,
.goal-suggestion-panel p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.goal-suggestion-panel strong {
  color: var(--green-dark);
  line-height: 1.1;
}

.goal-suggestion-panel p {
  margin: 0;
}

.fitness-slider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fitness-slider-grid label {
  min-width: 0;
}

.fitness-slider-grid output {
  float: right;
  color: var(--green-dark);
  font-weight: 900;
}

.slider-guide {
  display: block;
  min-height: 54px;
  margin-top: 6px;
  padding: 7px 8px;
  border: 1px solid rgba(47, 116, 93, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.28;
}

.rep-tapper {
  display: grid;
  grid-template-columns: 46px minmax(60px, 1fr) 46px 64px;
  align-items: center;
  gap: 8px;
}

.rep-tapper button {
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--green-dark);
}

.rep-tapper output {
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  font-weight: 900;
}

.photo-preview {
  min-height: 150px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.weekly-check-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(77, 119, 181, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 247, 255, 0.9)),
    #ffffff;
}

.weekly-check-card span {
  color: #2b5b82;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.weekly-check-card strong {
  color: var(--green-dark);
}

.medicine-schedule-form,
.medicine-list,
.medicine-history-list {
  display: grid;
  gap: 10px;
}

.medicine-schedule-form,
.medicine-report-panel {
  --surface-text: var(--light-surface-text);
  --surface-muted: var(--light-surface-muted);
  --surface-accent: var(--light-surface-accent);
  padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--light-surface-border);
  border-radius: 8px;
  background: rgba(255, 253, 244, 0.96);
  color: var(--surface-text);
}

.medicine-schedule-form [hidden] {
  display: none;
}

.medicine-safety-note {
  margin: 0;
  color: var(--surface-muted);
  line-height: 1.45;
}

.medicine-times-setup,
.medicine-dose-times,
.medicine-report-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.medicine-dose-times {
  grid-column: 1 / -1;
}

.medicine-weekdays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--light-surface-border-subtle);
}

.medicine-weekdays label,
.medicine-privacy-options label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.medicine-weekdays input,
.medicine-privacy-options input {
  width: auto;
  min-height: 0;
}

.medicine-privacy-options,
.medicine-status-correction {
  display: grid;
  gap: 8px;
}

.medicine-report-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.medicine-report-summary {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--surface-accent);
  background: #edf4e8;
  color: var(--surface-text);
  font-weight: 800;
}

.medicine-card,
.medicine-history-item {
  --surface-text: var(--light-surface-text);
  --surface-muted: var(--light-surface-muted);
  --surface-accent: var(--light-surface-accent);
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--light-surface-border-subtle);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 248, 244, 0.88)),
    #ffffff;
}

.medicine-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.medicine-dose-status {
  padding: 5px 8px;
  border: 1px solid var(--light-surface-border-subtle);
  background: #edf4e8;
  color: var(--surface-text);
  font-weight: 850;
}

.medicine-card.is-taken {
  border-color: rgba(47, 116, 93, 0.44);
}

.medicine-card.is-skipped {
  border-color: rgba(192, 88, 67, 0.42);
}

.medicine-card span,
.medicine-history-item span {
  color: var(--surface-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.medicine-card strong,
.medicine-history-item strong {
  color: var(--surface-text);
}

.medicine-card p,
.medicine-card small,
.medicine-history-item p,
.medicine-history-item small {
  margin: 0;
  color: var(--surface-muted);
}

.medicine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.medicine-status-correction {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding-top: 9px;
  border-top: 1px solid var(--light-surface-border-subtle);
}

@media (max-width: 620px) {
  .medicine-card header,
  .medicine-status-correction {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .medicine-status-correction .ghost-button,
  .medicine-actions button {
    width: 100%;
  }
}

.weekly-check-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.42;
}

.timeline {
  display: grid;
  gap: 8px;
}

.timeline-item {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.timeline-item strong {
  display: block;
}

.timeline-item span {
  color: var(--muted);
  font-size: 0.82rem;
}

.date-tools {
  display: grid;
  gap: 5px;
  justify-items: end;
  min-width: 138px;
}

.date-tools > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.date-tools label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: right;
}

.date-tools input {
  width: 138px;
  min-height: 36px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.82rem;
}

.vault-note {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.vault-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vault-card,
.history-item {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.vault-card span,
.history-item span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
}

.vault-card strong,
.history-item strong {
  display: block;
}

.history-item.is-archive {
  border-style: dashed;
}

.vault-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.history-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.trend-card {
  min-height: 132px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.trend-card strong,
.trend-card span {
  display: block;
}

.trend-card span {
  color: var(--muted);
  font-size: 0.76rem;
}

.bar-chart {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 58px;
  margin-top: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.bar-chart i {
  flex: 1;
  min-width: 4px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, var(--green), var(--gold));
}

.pet-panel {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.grove-scene {
  position: relative;
  min-height: clamp(320px, 48svh, 560px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 18, 13, 0.04), rgba(7, 18, 13, 0.18)),
    url("assets/companion-grove-outdoor.png?v=65") center / cover no-repeat;
  box-shadow: 0 22px 54px rgba(7, 19, 14, 0.34);
}

.grove-scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(7, 22, 13, 0.32));
  pointer-events: none;
}

.grove-lounging-pet {
  position: absolute;
  right: clamp(18px, 9vw, 140px);
  bottom: clamp(22px, 7vw, 86px);
  z-index: 2;
  width: clamp(180px, 29vw, 420px);
  max-height: 58%;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(9, 28, 18, 0.38));
  transform: rotate(1deg);
  transform-origin: bottom center;
}

.grove-lounging-pet.is-cutout {
  right: clamp(8px, 6vw, 104px);
  bottom: clamp(12px, 4.5vw, 54px);
  width: clamp(240px, 36vw, 520px);
  max-height: 64%;
  filter:
    drop-shadow(0 20px 22px rgba(8, 23, 13, 0.4))
    drop-shadow(0 0 22px rgba(255, 218, 138, 0.28));
}

.grove-lounging-pet.is-portrait {
  width: clamp(128px, 18vw, 230px);
  max-height: 42%;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 18px 20px rgba(8, 23, 13, 0.34));
}

.grove-scene-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: grid;
  gap: 3px;
  max-width: min(320px, calc(100% - 28px));
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(14, 31, 22, 0.56);
  color: #f7fff7;
  backdrop-filter: blur(12px);
}

.grove-scene-label span {
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.grove-scene-label strong {
  line-height: 1.1;
}

.pet-portrait-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.pet-panel img {
  width: 116px;
  height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(24, 31, 30, 0.22));
}

.pet-portrait-frame img {
  position: relative;
  z-index: 2;
}

.pet-portrait-frame::before,
.pet-portrait-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.pet-portrait-frame[data-pet-artifact]:not([data-pet-artifact="none"])::before,
.pet-portrait-frame[data-pet-artifact]:not([data-pet-artifact="none"])::after {
  opacity: 1;
}

img[data-pet-artifact="sunset_ribbon"] {
  filter: saturate(1.16) sepia(0.08) hue-rotate(-8deg);
  box-shadow: 0 0 24px rgba(236, 112, 138, 0.38);
}

img[data-pet-artifact="moon_chime"] {
  filter: saturate(1.08) hue-rotate(16deg) brightness(1.04);
  box-shadow: 0 0 24px rgba(113, 146, 234, 0.38);
}

img[data-pet-artifact="moss_cape"] {
  filter: saturate(1.12) hue-rotate(18deg);
  box-shadow: 0 0 22px rgba(70, 133, 86, 0.38);
}

img[data-pet-artifact="grumble_badge"] {
  filter: contrast(1.04) saturate(0.95);
  box-shadow: 0 0 22px rgba(90, 83, 75, 0.42);
}

.pet-portrait-frame[data-pet-artifact="sunset_ribbon"]::before {
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 177, 122, 0.18), rgba(231, 92, 146, 0.22), transparent 66%);
}

.pet-portrait-frame[data-pet-artifact="sunset_ribbon"]::after {
  right: 18px;
  bottom: 17px;
  width: 44px;
  height: 14px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(90deg, #ef6f8f, #ffc46b);
  box-shadow: 0 4px 10px rgba(175, 77, 97, 0.28);
  transform: rotate(-13deg);
}

.pet-portrait-frame[data-pet-artifact="moon_chime"]::before {
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190, 213, 255, 0.24), rgba(123, 110, 217, 0.18), transparent 68%);
}

.pet-portrait-frame[data-pet-artifact="moon_chime"]::after {
  right: 21px;
  top: 20px;
  width: 18px;
  height: 18px;
  border: 3px solid #8da7ff;
  border-left-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(107, 127, 222, 0.44);
}

.pet-portrait-frame[data-pet-artifact="moss_cape"]::before {
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 46px;
  border-radius: 40% 40% 12px 12px;
  background: linear-gradient(180deg, rgba(71, 132, 76, 0.2), rgba(48, 101, 60, 0.34));
}

.pet-portrait-frame[data-pet-artifact="moss_cape"]::after {
  left: 20px;
  bottom: 20px;
  width: 64px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5f9a62, #c9d974);
  transform: rotate(5deg);
}

.pet-portrait-frame[data-pet-artifact="grumble_badge"]::before {
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 196, 174, 0.2), rgba(76, 84, 78, 0.22), transparent 70%);
}

.pet-portrait-frame[data-pet-artifact="grumble_badge"]::after {
  left: 20px;
  bottom: 18px;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(54, 56, 50, 0.72);
  border-radius: 7px;
  background: linear-gradient(135deg, #b8b09f, #686d61);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.32);
  transform: rotate(9deg);
}

.pet-panel p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.pet-bonus,
.pet-personality {
  margin-top: 7px;
  color: var(--green-dark);
  font-weight: 780;
}

.pet-personality {
  color: var(--violet);
}

.bond-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bond-card {
  min-height: 118px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.bond-card span,
.bond-card p {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.bond-card strong {
  display: block;
  margin: 5px 0;
  color: var(--green-dark);
  font-size: 1rem;
}

.bond-card.is-ready {
  border-color: rgba(220, 174, 53, 0.55);
  background: rgba(255, 248, 222, 0.9);
}

.pet-artifact-grid {
  display: grid;
  gap: 8px;
}

.artifact-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 86px;
  gap: 9px;
  align-items: center;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.artifact-card.is-equipped {
  border-color: rgba(220, 174, 53, 0.62);
  background: #fff9e8;
  box-shadow: inset 0 0 0 2px rgba(220, 174, 53, 0.12);
}

.artifact-card.is-locked,
.artifact-card.is-empty {
  background: rgba(246, 244, 239, 0.88);
}

.artifact-card strong,
.artifact-card small {
  display: block;
}

.artifact-card strong {
  color: var(--green-dark);
}

.artifact-card small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.artifact-card button {
  min-height: 38px;
  border: 1px solid var(--green-dark);
  border-radius: 8px;
  background: var(--green-dark);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
}

.artifact-card button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.path-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 138px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.path-card.is-active {
  border-color: rgba(47, 116, 93, 0.72);
  background: rgba(238, 248, 241, 0.92);
  box-shadow: inset 0 0 0 2px rgba(47, 116, 93, 0.12);
}

.path-card.is-second {
  border-color: rgba(77, 119, 181, 0.58);
  box-shadow: inset 0 0 0 2px rgba(77, 119, 181, 0.12);
}

.path-card.is-locked,
.hero-choice.is-locked {
  background: rgba(246, 244, 239, 0.76);
}

.path-card.is-unlockable,
.hero-choice.is-unlockable {
  border-color: rgba(220, 174, 53, 0.54);
  background: #fff9e8;
}

.path-card:disabled,
.hero-choice:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.path-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.path-card.is-egg img {
  padding: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 8px 9px rgba(34, 38, 34, 0.22));
}

.path-card strong,
.path-card span {
  display: block;
}

.path-card strong {
  color: var(--green-dark);
  font-size: 0.88rem;
  line-height: 1.1;
}

.path-element {
  margin: 3px 0;
  color: var(--coral);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.path-bonus,
.path-personality {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.path-personality {
  margin-bottom: 4px;
  color: var(--violet);
}

.mini-meter {
  display: block;
  height: 8px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(32, 68, 58, 0.12);
}

.mini-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold));
}

.companion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.companion-actions button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(32, 68, 58, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--green-dark);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
}

.companion-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.character-hero {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(77, 119, 181, 0.1), rgba(220, 174, 53, 0.12)),
    var(--surface);
}

.character-art-frame {
  position: relative;
  min-height: 260px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.character-art-frame img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 16px 18px rgba(24, 31, 30, 0.26));
}

.character-pet-companion {
  position: absolute;
  right: 6px;
  bottom: 2px;
  z-index: 2;
  width: 44% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 12px 14px rgba(24, 31, 30, 0.28));
  pointer-events: none;
}

.character-copy {
  min-width: 0;
}

.character-copy h3 {
  margin-bottom: 4px;
  color: var(--green-dark);
  font-size: 1.25rem;
}

#characterClassRole {
  display: block;
  margin-bottom: 8px;
  color: var(--violet);
  font-size: 0.82rem;
}

.character-copy p {
  color: var(--muted);
  font-size: 0.86rem;
}

.character-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.character-traits span {
  padding: 5px 8px;
  border: 1px solid rgba(32, 68, 58, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--green-dark);
  font-size: 0.72rem;
  font-weight: 850;
}

.character-bonus {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(77, 119, 181, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.character-bonus span {
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 850;
}

.character-bonus small {
  color: var(--muted);
  font-size: 0.72rem;
}

.hero-form-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 10px 0 12px;
}

.hero-form-toggle button {
  min-height: 42px;
  font-size: 0.84rem;
}

.character-grid,
.future-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.future-hero-card {
  display: grid;
  gap: 8px;
  min-height: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 248, 244, 0.9)),
    var(--surface);
}

.future-hero-card span {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef7ee;
  color: var(--green-dark);
  font-size: 0.68rem;
  font-weight: 900;
}

.future-hero-card strong {
  color: var(--green-dark);
}

.future-hero-card p,
.future-hero-card small {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.42;
}

.hero-choice {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 144px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.hero-choice.is-active {
  border-color: rgba(77, 119, 181, 0.58);
  background: #f1f7ff;
  box-shadow: inset 0 0 0 2px rgba(77, 119, 181, 0.12);
}

.hero-choice img {
  width: 72px;
  height: 104px;
  object-fit: cover;
  object-position: center 14%;
  border-radius: 8px;
  background: #eef6ff;
}

.hero-choice strong,
.hero-choice span {
  display: block;
}

.hero-choice strong {
  color: var(--green-dark);
  font-size: 0.88rem;
  line-height: 1.1;
}

.hero-role {
  margin: 4px 0;
  color: var(--coral);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.hero-form-note {
  margin-bottom: 4px;
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 850;
}

.choice-price {
  display: block;
  margin-bottom: 4px;
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 850;
}

.choice-action {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(32, 68, 58, 0.08);
  color: var(--green-dark);
  font-size: 0.7rem;
  font-weight: 900;
}

.economy-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.economy-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(32, 68, 58, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 780;
}

.economy-strip strong {
  margin-left: 4px;
  color: var(--green-dark);
}

.hero-bonus {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.resource-item {
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.resource-item span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.resource-item strong {
  font-size: 1.1rem;
}

.evolution-grid,
.side-quest-list,
.mission-board,
.boss-tactics,
.plan-mod-list,
.meal-repair-grid {
  display: grid;
  gap: 8px;
}

.evolution-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stakes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.real-reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px;
}

.evolution-card,
.side-quest,
.mission-card,
.stakes-card,
.real-reward-card,
.boss-tactics article,
.plan-mod-list article,
.meal-repair-card,
.planner-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.evolution-card {
  min-height: 132px;
  padding: 10px;
}

.evolution-card.is-leading {
  border-color: rgba(116, 89, 166, 0.42);
  background: #f6f2fb;
}

.evolution-card span,
.evolution-card p,
.side-quest span,
.side-quest p,
.boss-tactics span,
.boss-tactics p,
.meal-repair-card span,
.meal-repair-card p {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.evolution-card strong,
.side-quest strong,
.boss-tactics strong,
.meal-repair-card strong {
  display: block;
  margin: 4px 0;
  color: var(--green-dark);
  line-height: 1.1;
}

.evolution-card p,
.side-quest p,
.stakes-card p,
.real-reward-card p,
.boss-tactics p,
.meal-repair-card p {
  margin-bottom: 0;
}

.side-quest,
.mission-card,
.stakes-card,
.real-reward-card,
.boss-tactics article,
.meal-repair-card {
  min-height: 84px;
  padding: 10px 12px;
}

.stakes-card,
.real-reward-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stakes-card span,
.stakes-card small,
.stakes-card p,
.real-reward-card span,
.real-reward-card small,
.real-reward-card p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.stakes-card strong,
.real-reward-card strong {
  color: var(--green-dark);
  line-height: 1.1;
}

.stakes-card.is-warning,
.real-reward-card.is-ready {
  border-color: rgba(220, 174, 53, 0.5);
  background: #fff9e8;
}

.stakes-card.is-danger {
  border-color: rgba(192, 88, 67, 0.45);
  background: #fff0ea;
}

.stakes-card.is-muted,
.real-reward-card.is-muted {
  background: #f6f4ef;
}

.real-reward-card.is-summary {
  border-color: rgba(47, 116, 93, 0.38);
  background: #eef8f1;
}

.stakes-list {
  display: grid;
  gap: 3px;
  margin: 2px 0 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.real-reward-card button {
  min-height: 36px;
  margin-top: auto;
  border: 1px solid var(--green-dark);
  border-radius: 8px;
  background: var(--green-dark);
  color: #ffffff;
  font-weight: 850;
}

.real-reward-card button:disabled {
  border-color: var(--line);
  background: #dedbd2;
  color: var(--muted);
}

.mission-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 92px;
  gap: 10px;
  align-items: center;
}

.mission-card.is-ready {
  border-color: rgba(220, 174, 53, 0.52);
  background: #fff9e8;
}

.mission-card.is-claimed {
  border-color: rgba(47, 116, 93, 0.38);
  background: #eef8f1;
}

.mission-card.is-locked {
  background: #f6f4ef;
}

.mission-rank {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 8px;
  background: var(--green-dark);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 950;
  text-align: center;
}

.mission-card.rank-d .mission-rank {
  background: var(--green);
}

.mission-card.rank-c .mission-rank {
  background: var(--blue);
}

.mission-card.rank-b .mission-rank {
  background: var(--violet);
}

.mission-card strong,
.mission-card small,
.mission-card p {
  display: block;
}

.mission-card strong {
  color: var(--green-dark);
}

.mission-card small,
.mission-card p {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.mission-card p {
  margin: 3px 0;
}

.mission-card button {
  min-height: 40px;
  border: 1px solid var(--green-dark);
  border-radius: 8px;
  background: var(--green-dark);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 850;
}

.mission-card button:disabled {
  border-color: rgba(102, 112, 105, 0.24);
  background: #e8ece8;
  color: #7d867f;
  cursor: not-allowed;
}

.training-board-panel .mission-card,
.training-board-panel .mission-card.is-ready,
.training-board-panel .mission-card.is-claimed,
.training-board-panel .mission-card.is-locked {
  border: 1px solid rgba(113, 77, 36, 0.55);
  border-radius: 4px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 245, 0.5), transparent 35%),
    linear-gradient(180deg, #f2dfaa, #e4c987 56%, #d7b873);
  box-shadow:
    inset 0 0 0 1px rgba(255, 251, 227, 0.58),
    inset 0 -16px 24px rgba(113, 70, 32, 0.12),
    0 6px 12px rgba(76, 48, 22, 0.18);
}

.training-board-panel .mission-card.is-ready {
  box-shadow:
    inset 0 0 0 1px rgba(255, 251, 227, 0.62),
    inset 0 -16px 24px rgba(113, 70, 32, 0.12),
    0 0 13px rgba(93, 198, 143, 0.28),
    0 6px 12px rgba(76, 48, 22, 0.18);
}

.boss-tactics {
  margin-top: 10px;
}

.side-quest span,
.meal-repair-card span {
  color: var(--coral);
  font-weight: 850;
}

.meal-repair-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0;
}

.meal-repair-card.is-summary {
  grid-column: 1 / -1;
  background: #f4fbf4;
}

.town-hero {
  position: relative;
  display: grid;
  gap: 10px;
}

.app-shell.is-town-active #screen-town {
  min-height: 100svh;
}

.app-shell.is-town-active #screen-town > .section-heading:first-child {
  position: absolute;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.app-shell.is-town-active .town-hero {
  min-height: 100svh;
  margin: 0;
}

.town-map-live {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(246, 255, 220, 0.2), transparent 38%),
    linear-gradient(180deg, #13251f 0%, #203a2e 54%, #14241f 100%);
  isolation: isolate;
  perspective: 1200px;
  transform-style: preserve-3d;
  box-shadow: 0 16px 34px rgba(31, 40, 34, 0.14);
}

.app-shell.is-town-active .town-map-live {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.town-map-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 45%, rgba(22, 32, 31, 0.12) 100%),
    radial-gradient(circle at 52% 62%, rgba(255, 246, 190, 0.16), transparent 28%);
  pointer-events: none;
}

.town-map-live::after {
  content: attr(data-growth-label);
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 7;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(32, 68, 58, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--green-dark);
  font-size: 0.72rem;
  font-weight: 900;
}

.app-shell.is-town-active .town-map-live::after {
  right: 14px;
  bottom: calc(74px + env(safe-area-inset-bottom));
}

.town-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.app-shell.is-town-active .town-art {
  object-position: center center;
  transform: none;
  transform-origin: center center;
}

.town-growth-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.town-building-layers {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  pointer-events: none;
}

.town-building-piece {
  position: absolute;
  left: var(--map-x);
  top: var(--map-y);
  width: var(--piece-w);
  height: var(--piece-h);
  min-width: 86px;
  min-height: 70px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 250, 219, 0.7);
  border-radius: 14px 14px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(15, 23, 23, 0.12)),
    var(--building-art) center / cover no-repeat;
  box-shadow: 0 16px 28px rgba(20, 28, 27, 0.22), 0 0 24px rgba(255, 229, 142, 0.18);
  clip-path: polygon(8% 18%, 50% 0, 92% 18%, 96% 100%, 4% 100%);
  opacity: 0.92;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.town-building-piece::after {
  content: attr(data-building);
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: max-content;
  max-width: 118px;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 252, 235, 0.86);
  color: #263f37;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 4px 12px rgba(31, 40, 34, 0.12);
}

.town-building-piece.build-stage-0 {
  filter: saturate(0.76) brightness(0.93);
  opacity: 0.68;
}

.town-building-piece.build-stage-2,
.town-building-piece.build-stage-3 {
  opacity: 1;
}

.town-building-piece.is-locked {
  opacity: 0.28;
  filter: grayscale(0.35) saturate(0.7);
}

.growth-spark,
.growth-flower,
.growth-lantern {
  position: absolute;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 240ms ease, transform 240ms ease;
}

.growth-spark {
  width: 13px;
  height: 13px;
  background: #fff6a8;
  clip-path: polygon(50% 0, 63% 35%, 100% 50%, 63% 65%, 50% 100%, 37% 65%, 0 50%, 37% 35%);
  filter: drop-shadow(0 0 8px rgba(255, 230, 112, 0.8));
}

.growth-flower {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #ff8fb0 0 24%, transparent 25%),
    conic-gradient(#ffd3df 0 20%, #fff4ad 20% 40%, #ffd3df 40% 60%, #fff4ad 60% 80%, #ffd3df 80% 100%);
  box-shadow: 0 0 0 3px rgba(92, 168, 114, 0.22);
}

.growth-lantern {
  width: 15px;
  height: 22px;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(180deg, #fff6b8, #f0b85c);
  border: 2px solid rgba(32, 68, 58, 0.45);
  box-shadow: 0 0 14px rgba(255, 214, 110, 0.92);
}

.spark-1 { left: 19%; top: 27%; }
.spark-2 { left: 52%; top: 21%; }
.spark-3 { right: 16%; top: 34%; }
.spark-4 { right: 27%; bottom: 25%; }
.flower-1 { left: 27%; bottom: 18%; }
.flower-2 { right: 13%; bottom: 31%; }
.lantern-1 { left: 36%; top: 47%; }
.lantern-2 { right: 35%; top: 52%; }

.town-map-live.is-growing .growth-flower,
.town-map-live.is-thriving .growth-flower,
.town-map-live.is-thriving .growth-lantern,
.town-map-live.is-radiant .growth-flower,
.town-map-live.is-radiant .growth-lantern,
.town-map-live.is-radiant .growth-spark {
  opacity: 1;
  transform: scale(1);
}

.town-map-live.is-radiant .town-art {
  filter: saturate(1.08) brightness(1.04);
}

.town-map-live.build-empty .town-art {
  opacity: 1;
  filter: saturate(0.94) brightness(0.98);
}

.town-map-live.build-started .town-art {
  opacity: 1;
  filter: saturate(0.98) brightness(1);
}

.town-map-live.build-complete .town-art {
  opacity: 1;
}

.map-road,
.map-river {
  position: absolute;
  display: none;
  border-radius: 999px;
  pointer-events: none;
}

.map-road {
  z-index: 3;
  background: #f3d47c;
  box-shadow: inset 0 0 0 5px rgba(255, 246, 196, 0.75);
  opacity: 0.78;
}

.map-road-main {
  width: 110%;
  height: 28px;
  left: -5%;
  top: 58%;
  transform: rotate(-15deg);
}

.map-road-cross {
  width: 78%;
  height: 22px;
  left: 17%;
  top: 44%;
  transform: rotate(35deg);
}

.map-river {
  z-index: 1;
  width: 34px;
  height: 125%;
  right: 18%;
  top: -10%;
  background: rgba(77, 119, 181, 0.34);
  box-shadow: inset 0 0 0 5px rgba(233, 246, 251, 0.55);
  transform: rotate(19deg);
}

.town-gateway {
  --gateway-icon: url("assets/app-icon.svg");
  appearance: none;
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 2px;
  min-width: 134px;
  min-height: 58px;
  padding: 8px 10px 8px 52px;
  border: 1px solid rgba(255, 247, 205, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 252, 235, 0.94), rgba(232, 244, 238, 0.88)),
    #ffffff;
  color: var(--green-dark);
  box-shadow: 0 10px 22px rgba(31, 40, 34, 0.22), 0 0 18px rgba(255, 238, 168, 0.38);
  cursor: pointer;
  font: inherit;
  text-align: left;
  backdrop-filter: blur(9px);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.town-gateway::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 247, 205, 0.72);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.12)),
    var(--gateway-icon) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 14px rgba(31, 40, 34, 0.18);
}

.town-gateway::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 54px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(30, 35, 24, 0.34), transparent 72%);
  pointer-events: none;
}

.app-shell.is-town-active .town-gateway {
  transform: translate(-50%, -50%) scale(1.04);
}

.town-gateway strong {
  display: block;
  color: #263f37;
  font-size: 0.72rem;
  line-height: 1.05;
}

.town-gateway span {
  display: inline-flex;
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(32, 68, 58, 0.1);
  color: #365e50;
  font-size: 0.64rem;
  font-weight: 900;
}

.town-gateway.is-ready {
  border-color: rgba(255, 237, 141, 0.96);
  box-shadow: 0 10px 22px rgba(31, 40, 34, 0.22), 0 0 22px rgba(255, 223, 99, 0.72);
}

.town-gateway.is-unbuilt {
  border-style: dashed;
  background:
    linear-gradient(180deg, rgba(255, 250, 231, 0.86), rgba(236, 225, 196, 0.76)),
    #fff7df;
  color: #785f2d;
  box-shadow: 0 8px 18px rgba(48, 38, 22, 0.14);
}

.town-gateway.build-stage-1 {
  border-color: rgba(138, 105, 60, 0.5);
}

.town-gateway.build-stage-2 {
  border-color: rgba(47, 116, 93, 0.5);
  background:
    linear-gradient(180deg, rgba(246, 255, 250, 0.95), rgba(232, 244, 238, 0.9)),
    #ffffff;
}

.town-gateway.is-decorated-building {
  border-color: rgba(220, 174, 53, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 249, 222, 0.96), rgba(237, 250, 242, 0.92));
  box-shadow: 0 0 0 2px rgba(220, 174, 53, 0.18), 0 12px 26px rgba(31, 40, 34, 0.18), 0 0 22px rgba(255, 223, 99, 0.6);
}

.town-gateway:hover,
.town-gateway:focus-visible {
  transform: translate(-50%, calc(-50% - 2px)) scale(1.03);
  border-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 13px 28px rgba(31, 40, 34, 0.27), 0 0 24px rgba(255, 232, 139, 0.78);
  outline: none;
}

.gateway-board {
  --gateway-icon: url("assets/interior-town-hall-stage-basic.png?v=89");
  left: 8%;
  top: 34%;
}

.gateway-grove {
  --gateway-icon: url("assets/interior-fiber-garden-stage-basic.png?v=89");
  right: 9%;
  top: 45%;
}

.gateway-gardens {
  --gateway-icon: url("assets/interior-fiber-garden-stage-basic.png?v=89");
  right: 15%;
  top: 25%;
}

.gateway-inn {
  --gateway-icon: url("assets/interior-rest-shrine-stage-basic.png?v=89");
  left: 36%;
  top: 39%;
}

.gateway-logbook {
  --gateway-icon: url("assets/hero-azure-blade.png?v=65");
  left: 8%;
  top: 69%;
}

.gateway-market {
  --gateway-icon: url("assets/interior-protein-forge-stage-basic.png?v=89");
  right: 20%;
  top: 66%;
}

.gateway-training {
  --gateway-icon: url("assets/interior-training-hall-stage-basic.png?v=89");
  right: 8%;
  top: 18%;
}

.gateway-oracle {
  --gateway-icon: url("assets/interior-mana-wells-stage-basic.png?v=89");
  left: 43%;
  top: 17%;
}

.gateway-dungeon {
  --gateway-icon: url("assets/interior-dungeon-gate-stage-basic.png?v=89");
  right: 7%;
  top: 34%;
}

.gateway-townhall {
  --gateway-icon: url("assets/town/backgrounds/willowgrove-master-level-1-clean.png?v=100");
  left: 43%;
  top: 53%;
}

.town-node {
  appearance: none;
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 54px;
  min-height: 54px;
  padding: 5px;
  border: 1px solid rgba(255, 247, 205, 0.68);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.92), rgba(255, 236, 149, 0.66) 45%, rgba(72, 89, 127, 0.78) 100%);
  color: var(--green-dark);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24), 0 10px 22px rgba(31, 40, 34, 0.24), 0 0 18px rgba(255, 220, 112, 0.55);
  cursor: pointer;
  font: inherit;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.app-shell.is-town-active .town-node {
  display: none;
}

.town-node span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4d3e7a;
  font-weight: 950;
}

.town-node strong {
  font-size: 0.78rem;
}

.node-trail {
  left: 43%;
  top: 77%;
}

.node-forge {
  left: 14%;
  top: 55%;
}

.node-garden {
  right: 12%;
  top: 61%;
}

.node-well {
  left: 48%;
  top: 62%;
}

.node-shrine {
  left: 43%;
  top: 25%;
}

.node-hall {
  right: 12%;
  top: 20%;
}

.town-node.is-thriving {
  border-color: rgba(220, 174, 53, 0.76);
  background: #fff8df;
  box-shadow: 0 0 0 3px rgba(220, 174, 53, 0.18), 0 10px 22px rgba(31, 40, 34, 0.16);
}

.town-node.is-growing {
  border-color: rgba(47, 116, 93, 0.48);
  background: #eef8f1;
}

.town-node.is-radiant {
  border-color: rgba(255, 246, 168, 0.95);
  background: #fff9d9;
  box-shadow: 0 0 18px rgba(255, 230, 112, 0.76), 0 10px 22px rgba(31, 40, 34, 0.16);
}

.town-node.is-bare {
  border-color: rgba(74, 80, 80, 0.42);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.82), rgba(214, 203, 180, 0.72) 46%, rgba(77, 75, 70, 0.72) 100%);
  color: #4d463d;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 10px 20px rgba(31, 40, 34, 0.18);
}

.town-node.is-buildable {
  border-color: rgba(255, 246, 168, 0.96);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 10px 22px rgba(31, 40, 34, 0.22), 0 0 22px rgba(255, 230, 112, 0.72);
}

.town-node.is-complete {
  border-color: rgba(255, 246, 168, 0.95);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.96), rgba(255, 246, 168, 0.78) 42%, rgba(47, 116, 93, 0.82) 100%);
}

.town-node:hover,
.town-node:focus-visible,
.town-node.is-active {
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.44), 0 13px 28px rgba(31, 40, 34, 0.25), 0 0 24px rgba(255, 232, 139, 0.78);
  transform: translateY(-2px) scale(1.05);
  outline: none;
}

.town-interior {
  display: grid;
  gap: 0;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(32, 68, 58, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 251, 241, 0.94)),
    var(--surface);
  box-shadow: 0 14px 28px rgba(31, 40, 34, 0.12);
}

.town-interior-scene {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #d8d1bd 0 52%, #a78963 52% 100%);
}

.town-interior-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 48%, rgba(18, 34, 31, 0.15) 100%),
    radial-gradient(circle at 50% 20%, rgba(255, 248, 194, 0.12), transparent 34%);
}

.town-interior-scene img {
  width: 100%;
  height: 100%;
  min-height: 310px;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: opacity 220ms ease, filter 220ms ease;
}

.town-interior-keeper {
  position: absolute;
  left: 2%;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 5px;
  width: min(42%, 230px);
  pointer-events: none;
}

.town-interior-keeper img {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(8, 14, 13, 0.32));
  animation: district-keeper-breathe 4.2s ease-in-out infinite;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  mask-composite: intersect;
}

.town-interior-keeper span {
  padding: 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff8df;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.18;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.86);
  box-shadow: none;
}

.town-interior[data-keeper-motion="map"] .town-interior-keeper img {
  animation-name: district-keeper-map;
}

.town-interior[data-keeper-motion="hammer"] .town-interior-keeper img {
  animation-name: district-keeper-hammer;
}

.town-interior[data-keeper-motion="pantry"],
.town-interior[data-keeper-motion="garden"],
.town-interior[data-keeper-motion="vial"],
.town-interior[data-keeper-motion="moon"] {
  --keeper-glow: rgba(255, 239, 170, 0.26);
}

.town-interior[data-keeper-motion="garden"] .town-interior-keeper img {
  animation-name: district-keeper-garden;
}

.town-interior[data-keeper-motion="vial"] .town-interior-keeper img {
  animation-name: district-keeper-vial;
}

.town-interior[data-keeper-motion="moon"] .town-interior-keeper img {
  animation-name: district-keeper-moon;
}

.town-interior[data-keeper-motion="pantry"] .town-interior-keeper img {
  animation-name: district-keeper-pantry;
}

.town-interior-keeper::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 14px;
  background: radial-gradient(ellipse, var(--keeper-glow, rgba(255, 239, 170, 0.2)), transparent 70%);
  animation: keeper-room-glow 3.8s ease-in-out infinite;
}

.town-interior-objects {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.room-object {
  position: absolute;
  display: block;
  filter: drop-shadow(0 12px 14px rgba(7, 11, 10, 0.28));
}

.room-object i,
.room-object b,
.room-object em {
  position: absolute;
  display: block;
  content: "";
}

.room-object-seed_crates,
.room-object-prep_crates,
.room-object-route_stakes,
.room-object-water_pails,
.room-object-rest_mats,
.room-object-training_rack {
  right: 7%;
  bottom: 16%;
  width: 120px;
  height: 78px;
}

.room-object-seed_crates i,
.room-object-prep_crates i,
.room-object-route_stakes i,
.room-object-water_pails i,
.room-object-rest_mats i,
.room-object-training_rack i {
  left: 8px;
  bottom: 0;
  width: 48px;
  height: 42px;
  border: 3px solid rgba(84, 58, 36, 0.5);
  border-radius: 5px;
  background: linear-gradient(180deg, #c8904e, #7a5130);
}

.room-object-seed_crates b,
.room-object-prep_crates b,
.room-object-route_stakes b,
.room-object-water_pails b,
.room-object-rest_mats b,
.room-object-training_rack b {
  right: 8px;
  bottom: 4px;
  width: 54px;
  height: 50px;
  border: 3px solid rgba(84, 58, 36, 0.5);
  border-radius: 5px;
  background: linear-gradient(180deg, #d9a35d, #815936);
}

.room-object-seed_crates em,
.room-object-prep_crates em,
.room-object-route_stakes em,
.room-object-water_pails em,
.room-object-rest_mats em,
.room-object-training_rack em {
  left: 26px;
  top: 4px;
  width: 60px;
  height: 24px;
  border-radius: 999px 999px 8px 8px;
  background:
    radial-gradient(circle at 20% 60%, #8fc66d 0 8px, transparent 9px),
    radial-gradient(circle at 48% 42%, #6da85b 0 10px, transparent 11px),
    radial-gradient(circle at 74% 58%, #b9d86c 0 8px, transparent 9px);
}

.room-object-plant_nursery {
  right: 10%;
  bottom: 19%;
  width: 190px;
  height: 132px;
}

.room-object-plant_nursery i {
  left: 8px;
  bottom: 16px;
  width: 174px;
  height: 62px;
  border: 4px solid rgba(87, 57, 34, 0.66);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(87, 57, 34, 0.72) 0 4px, transparent 4px 32px) 0 0 / 32px 100%,
    linear-gradient(180deg, #b8844a, #6b4228);
}

.room-object-plant_nursery b {
  left: 24px;
  top: 16px;
  width: 142px;
  height: 44px;
  background:
    radial-gradient(circle at 12% 70%, #76b863 0 11px, transparent 12px),
    radial-gradient(circle at 30% 46%, #9edb74 0 14px, transparent 15px),
    radial-gradient(circle at 52% 66%, #5c9c59 0 12px, transparent 13px),
    radial-gradient(circle at 74% 42%, #c9dc75 0 13px, transparent 14px),
    radial-gradient(circle at 90% 68%, #7ab864 0 11px, transparent 12px);
}

.room-object-plant_nursery em {
  left: 0;
  top: 0;
  width: 190px;
  height: 120px;
  border: 2px solid rgba(255, 247, 207, 0.38);
  border-bottom: 0;
  border-radius: 78px 78px 12px 12px;
  background: linear-gradient(180deg, rgba(205, 246, 232, 0.18), transparent 70%);
}

.room-object-herb_beds {
  left: 34%;
  bottom: 11%;
  width: 270px;
  height: 92px;
}

.room-object-herb_beds i,
.room-object-herb_beds b {
  bottom: 0;
  width: 118px;
  height: 54px;
  border: 3px solid rgba(89, 65, 39, 0.58);
  border-radius: 9px;
  background:
    radial-gradient(circle at 20% 30%, #7dbf65 0 8px, transparent 9px),
    radial-gradient(circle at 46% 22%, #b3d86d 0 9px, transparent 10px),
    radial-gradient(circle at 70% 35%, #6cae5c 0 8px, transparent 9px),
    linear-gradient(180deg, #6f4b2c, #4d3424);
}

.room-object-herb_beds i { left: 0; }
.room-object-herb_beds b { right: 0; }

.room-object-fairy_arbor,
.room-object-lantern_arch,
.room-object-golden_tools,
.room-object-glow_crystals,
.room-object-dream_lanterns,
.room-object-armor_stand {
  right: 5%;
  top: 12%;
  width: 180px;
  height: 190px;
}

.room-object-fairy_arbor i,
.room-object-lantern_arch i,
.room-object-golden_tools i,
.room-object-glow_crystals i,
.room-object-dream_lanterns i,
.room-object-armor_stand i {
  inset: 6px 20px 18px;
  border: 5px solid rgba(92, 65, 42, 0.62);
  border-bottom: 0;
  border-radius: 90px 90px 0 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 238, 139, 0.88) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 24%, rgba(255, 238, 139, 0.78) 0 5px, transparent 6px),
    linear-gradient(180deg, rgba(130, 201, 130, 0.2), transparent);
}

.room-object-fairy_arbor b,
.room-object-lantern_arch b,
.room-object-golden_tools b,
.room-object-glow_crystals b,
.room-object-dream_lanterns b,
.room-object-armor_stand b {
  left: 28px;
  right: 28px;
  bottom: 12px;
  height: 46px;
  background:
    radial-gradient(circle at 14% 60%, #8fc66d 0 12px, transparent 13px),
    radial-gradient(circle at 36% 42%, #b5d86b 0 14px, transparent 15px),
    radial-gradient(circle at 64% 44%, #76b863 0 14px, transparent 15px),
    radial-gradient(circle at 86% 60%, #c8e37b 0 12px, transparent 13px);
}

.room-object-map_table,
.room-object-forge_counter,
.room-object-mana_basins,
.room-object-moon_altar,
.room-object-anvil_station {
  left: 48%;
  bottom: 15%;
  width: 160px;
  height: 92px;
}

.room-object-map_table i,
.room-object-forge_counter i,
.room-object-mana_basins i,
.room-object-moon_altar i,
.room-object-anvil_station i {
  inset: auto 0 0;
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(180deg, #c99255, #60412c);
}

.room-object-map_table b,
.room-object-forge_counter b,
.room-object-mana_basins b,
.room-object-moon_altar b,
.room-object-anvil_station b {
  left: 22px;
  right: 22px;
  top: 6px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 238, 139, 0.64), transparent 68%);
}

.town-interior.build-stage-0 .town-interior-scene img {
  opacity: 0.94;
  filter: grayscale(0.08) saturate(0.96) brightness(1.04);
}

.town-interior.build-stage-1 .town-interior-scene img {
  opacity: 0.96;
  filter: grayscale(0.04) saturate(1) brightness(1.03);
}

.town-interior.build-stage-2 .town-interior-scene img {
  opacity: 0.98;
  filter: saturate(1.04) brightness(1.02);
}

.town-interior.build-stage-3 .town-interior-scene img {
  opacity: 1;
  filter: saturate(1.08);
}

.town-interior.is-bare .town-interior-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 74%, rgba(84, 58, 38, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 247, 218, 0.045), rgba(255, 247, 218, 0));
  pointer-events: none;
}

.town-build-model {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 2;
  width: 190px;
  height: 176px;
  transform: translateX(-50%);
  filter: drop-shadow(0 14px 18px rgba(31, 40, 34, 0.28));
}

.town-build-model span {
  position: absolute;
  display: block;
  transition: opacity 220ms ease, transform 220ms ease;
}

.build-ground {
  left: 10px;
  bottom: 0;
  width: 170px;
  height: 24px;
  border-radius: 999px;
  background: rgba(68, 86, 65, 0.34);
  filter: blur(1px);
}

.build-frame {
  left: 44px;
  bottom: 18px;
  width: 102px;
  height: 108px;
  border: 8px solid rgba(93, 73, 45, 0.78);
  border-bottom-width: 12px;
  border-radius: 8px 8px 4px 4px;
  opacity: 1;
}

.build-frame::before,
.build-frame::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 8px;
  height: 126px;
  border-radius: 999px;
  background: rgba(93, 73, 45, 0.78);
}

.build-frame::before {
  left: 18px;
  transform: rotate(24deg);
}

.build-frame::after {
  right: 18px;
  transform: rotate(-24deg);
}

.build-walls {
  left: 52px;
  bottom: 23px;
  width: 86px;
  height: 80px;
  border: 3px solid rgba(76, 62, 44, 0.52);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 246, 212, 0.9), rgba(208, 176, 118, 0.94));
  opacity: 0;
  transform: translateY(10px);
}

.build-roof {
  left: 38px;
  bottom: 100px;
  width: 114px;
  height: 58px;
  background: linear-gradient(135deg, #7b3b45, #d18a54);
  clip-path: polygon(50% 0, 100% 82%, 0 82%);
  opacity: 0;
  transform: translateY(10px);
}

.build-window {
  bottom: 58px;
  width: 20px;
  height: 24px;
  border: 2px solid rgba(74, 55, 37, 0.52);
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #fff6ad, #6fb8c7);
  opacity: 0;
}

.build-window-one { left: 67px; }
.build-window-two { right: 67px; }

.build-banner {
  left: 84px;
  bottom: 86px;
  width: 22px;
  height: 54px;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, var(--violet), #dcae35);
  opacity: 0;
  transform: translateY(-8px);
}

.build-glow {
  left: 48px;
  bottom: 14px;
  width: 94px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 168, 0.5), transparent 70%);
  opacity: 0;
}

.town-build-model.build-stage-1 .build-walls,
.town-build-model.build-stage-2 .build-walls,
.town-build-model.build-stage-3 .build-walls {
  opacity: 1;
  transform: translateY(0);
}

.town-build-model.build-stage-2 .build-roof,
.town-build-model.build-stage-3 .build-roof,
.town-build-model.build-stage-2 .build-window,
.town-build-model.build-stage-3 .build-window {
  opacity: 1;
  transform: translateY(0);
}

.town-build-model.build-stage-3 .build-banner,
.town-build-model.build-stage-3 .build-glow {
  opacity: 1;
  transform: translateY(0);
}

.town-build-model.resource-energy .build-window,
.town-build-model.resource-crystals .build-window {
  background: linear-gradient(180deg, #fff6ad, #7ab5ff);
}

.town-build-model.resource-garden .build-roof {
  background: linear-gradient(135deg, #5f8f56, #dcae35);
}

.town-build-model.resource-ore .build-roof,
.town-build-model.resource-materials .build-roof {
  background: linear-gradient(135deg, #6a6571, #d18a54);
}

.town-interior-copy {
  padding: 12px;
}

.town-interior-copy h3 {
  margin-bottom: 6px;
  color: var(--green-dark);
}

.town-interior-copy p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.86rem;
}

.town-interior-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.town-interior-meta span {
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(32, 68, 58, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.town-interior-meta strong,
.town-interior-meta small {
  display: block;
}

.town-interior-meta strong {
  color: var(--green-dark);
  font-size: 0.92rem;
}

.town-interior-meta small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.town-build-pips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}

.town-build-pips span {
  height: 9px;
  border-radius: 999px;
  background: rgba(32, 68, 58, 0.12);
}

.town-build-pips span.is-filled {
  background: linear-gradient(90deg, var(--green), var(--gold));
}

.future-keeper-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

.future-keeper-card {
  position: relative;
  display: grid;
  gap: 8px;
  align-items: end;
  min-height: 250px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.future-keeper-card::before {
  content: none;
}

.npc-site-stage {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 164px;
}

.npc-site-stage img {
  position: relative;
  z-index: 2;
  width: min(100%, 152px);
  height: 164px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 18px rgba(8, 12, 10, 0.38));
  animation: district-keeper-breathe 4.3s ease-in-out infinite;
}

.npc-site-stage .npc-shadow {
  left: 18%;
  right: 18%;
  bottom: 0;
}

.npc-site-stage .npc-breath {
  display: none;
  left: 43%;
  top: 42%;
  width: 18%;
  height: 18%;
}

.future-keeper-card[data-keeper-motion="cloth"] .npc-site-stage img {
  animation-name: district-keeper-cloth;
}

.future-keeper-card[data-keeper-motion="hair"] .npc-site-stage img {
  animation-name: district-keeper-hair;
}

.npc-nameplate {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(238, 210, 129, 0.34);
  border-radius: 8px;
  background: rgba(14, 22, 19, 0.86);
  box-shadow: 0 12px 24px rgba(5, 10, 8, 0.22);
}

.future-keeper-card span,
.future-keeper-card strong,
.future-keeper-card small {
  display: block;
}

.future-keeper-card span {
  color: #f6d979;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.future-keeper-card strong {
  color: #fffef5;
  font-size: 0.98rem;
}

.future-keeper-card small {
  margin-top: 2px;
  color: #fff1b8;
  font-size: 0.7rem;
  font-weight: 900;
}

.future-keeper-card p {
  margin-top: 6px;
  color: rgba(255, 249, 226, 0.76);
  font-size: 0.78rem;
  line-height: 1.35;
}

.town-build-button {
  margin-top: 10px;
}

.town-build-button:disabled,
.town-shop-card button:disabled {
  border-color: rgba(102, 112, 105, 0.24);
  background: #e8ece8;
  color: #7d867f;
  cursor: not-allowed;
}

.town-copy,
.town-stats article,
.town-district,
.town-impact,
.town-shop-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.town-copy {
  padding: 12px;
}

.app-shell.is-town-active .town-copy {
  position: absolute;
  right: 14px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  left: 14px;
  z-index: 12;
  width: min(calc(100% - 28px), 520px);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 32px rgba(19, 32, 26, 0.22);
  backdrop-filter: blur(12px);
}

.town-copy p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.app-shell.is-town-active #screen-town > :not(.town-hero):not(.section-heading) {
  margin-right: 14px;
  margin-left: 14px;
}

.app-shell.is-town-active #screen-town > .section-heading:not(:first-child) {
  margin-right: 14px;
  margin-left: 14px;
}

.town-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.town-stats article {
  min-height: 72px;
  padding: 10px;
}

.town-stats span,
.town-district span,
.town-impact span {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}

.town-stats strong {
  display: block;
  margin-top: 8px;
  color: var(--green-dark);
  font-size: 1.08rem;
}

.town-district-list,
.town-impact-list,
.town-build-shop {
  display: grid;
  gap: 8px;
}

.town-district {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 88px;
  padding: 10px;
}

.town-district.is-growing,
.town-district.is-thriving,
.town-district.is-radiant {
  border-color: rgba(47, 116, 93, 0.34);
  background: #f4fbf4;
}

.town-district.is-thriving,
.town-district.is-radiant {
  border-color: rgba(220, 174, 53, 0.48);
  background: #fff9e8;
}

.town-district.build-stage-0 {
  background: #f7f3ea;
}

.district-glyph {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--green-dark);
  font-weight: 950;
}

.town-district strong {
  display: block;
}

.district-state {
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 850;
}

.town-impact {
  min-height: 58px;
  padding: 10px 12px;
}

.town-impact strong {
  display: block;
  color: var(--green-dark);
}

.town-shop-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 104px;
  gap: 9px;
  align-items: center;
  min-height: 92px;
  padding: 10px;
}

.town-shop-card.is-buildable {
  border-color: rgba(220, 174, 53, 0.48);
  background: #fff9e8;
}

.town-node.is-locked,
.town-shop-card.is-locked {
  background: rgba(246, 244, 239, 0.94);
  filter: grayscale(0.16);
}

.town-shop-card small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.town-shop-card button {
  min-height: 42px;
  border: 1px solid var(--green-dark);
  border-radius: 8px;
  background: var(--green-dark);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 850;
}

.town-item-shop,
.town-inventory-grid,
.town-crafting-list,
.hero-path-list,
.dungeon-encounter-list,
.unlock-list,
.unlocked-training-list {
  display: grid;
  gap: 8px;
}

.dungeon-gate-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 140px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(185, 187, 219, 0.45);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(25, 22, 42, 0.72), rgba(65, 42, 93, 0.58)),
    rgba(20, 24, 30, 0.72);
  color: #f8f3ff;
}

.dungeon-gate-hero h3,
.dungeon-gate-hero p {
  margin-bottom: 0;
}

.dungeon-gate-hero .eyebrow {
  color: #ffc977;
}

.dungeon-gate-hero strong {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 220, 143, 0.42);
  border-radius: 8px;
  background: rgba(12, 10, 22, 0.46);
  color: #fff3c7;
  font-size: 0.78rem;
}

.town-item-card,
.inventory-card,
.craft-card,
.hero-path-card,
.dungeon-encounter,
.unlock-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 92px;
  gap: 9px;
  align-items: center;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.inventory-card,
.unlock-card {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.unlock-card {
  display: block;
}

.town-item-card.is-ready,
.craft-card.is-ready,
.hero-path-card.is-ready,
.dungeon-encounter.is-ready {
  border-color: rgba(220, 174, 53, 0.5);
  background: #fff9e8;
}

.town-item-card.is-locked,
.inventory-card.is-empty,
.hero-path-card.is-locked,
.dungeon-encounter.is-locked,
.unlock-card.is-empty {
  background: #f6f4ef;
}

.dungeon-status-panel {
  margin: 10px 0 12px;
}

.dungeon-encounter.is-defeated {
  border-color: rgba(47, 116, 93, 0.4);
  background: #eef8f1;
}

.class-affinity {
  color: var(--violet) !important;
  font-weight: 820;
}

.class-affinity.is-matched {
  color: var(--green-dark) !important;
}

.hero-path-card.is-claimed {
  border-color: rgba(47, 116, 93, 0.38);
  background: rgba(238, 248, 241, 0.88);
}

.item-glyph {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.9), transparent 30%),
    linear-gradient(135deg, var(--surface-strong), #fff4cf);
  color: var(--green-dark);
  font-weight: 950;
}

.town-item-card strong,
.inventory-card strong,
.craft-card strong,
.hero-path-card strong,
.dungeon-encounter strong,
.unlock-card strong {
  display: block;
  color: var(--green-dark);
}

.town-item-card small,
.inventory-card small,
.craft-card small,
.hero-path-card small,
.dungeon-encounter small,
.unlock-card span,
.unlock-card p {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.unlock-card p {
  margin: 5px 0 0;
}

.item-count {
  color: var(--violet);
  font-size: 0.86rem;
}

.town-item-card button,
.craft-card button,
.hero-path-card button,
.dungeon-encounter button {
  min-height: 40px;
  border: 1px solid var(--green-dark);
  border-radius: 8px;
  background: var(--green-dark);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 850;
}

.town-item-card button:disabled,
.craft-card button:disabled,
.hero-path-card button:disabled,
.dungeon-encounter button:disabled {
  border-color: rgba(102, 112, 105, 0.24);
  background: #e8ece8;
  color: #7d867f;
  cursor: not-allowed;
}

.workout-hero {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 138px;
  padding: 12px;
  border: 1px solid rgba(255, 238, 168, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(18, 28, 24, 0.78), rgba(60, 43, 30, 0.7)),
    transparent;
  color: #fff8df;
  backdrop-filter: blur(8px);
}

.workout-buddy-stack {
  position: relative;
  width: 112px;
  height: 128px;
}

.workout-buddy-stack img {
  position: absolute;
  object-fit: contain;
}

#workoutHeroImage {
  left: 0;
  bottom: 0;
  width: 88px;
  height: 128px;
  filter: drop-shadow(0 8px 10px rgba(31, 40, 34, 0.16));
}

#workoutPetImage {
  right: -3px;
  bottom: 0;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 8px 10px rgba(31, 40, 34, 0.14));
}

.workout-hero > img {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.workout-hero p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.plan-intel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.plan-intel article {
  min-height: 116px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.plan-intel span,
.plan-intel p {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.plan-intel strong {
  display: block;
  margin: 5px 0;
  color: var(--green-dark);
  font-size: 1.02rem;
}

.plan-intel p {
  margin-bottom: 0;
}

.plan-mod-list {
  margin-top: 8px;
}

.plan-mod-list article {
  min-height: 44px;
  padding: 10px 12px;
  background: #f6f2fb;
  color: var(--violet);
  font-size: 0.8rem;
  font-weight: 780;
}

.coach-plan-preview {
  display: grid;
  gap: 8px;
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid rgba(75, 112, 155, 0.24);
  border-radius: 8px;
  background: #f3f8ff;
}

.coach-plan-preview[hidden] {
  display: none;
}

.coach-plan-preview p {
  margin: 0;
  color: #456482;
  font-size: 0.8rem;
  font-weight: 800;
}

.coach-plan-preview pre {
  max-height: 280px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
  color: #24384d;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.45;
}

.weekly-plan {
  display: grid;
  gap: 8px;
}

.plan-card {
  display: grid;
  gap: 8px;
  min-height: 130px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.plan-card.is-strength {
  border-color: rgba(47, 116, 93, 0.32);
  background: #f4fbf4;
}

.plan-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.plan-card strong,
.plan-card span {
  display: block;
}

.plan-card span,
.plan-card li {
  color: var(--muted);
  font-size: 0.78rem;
}

.plan-card ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.plan-start-button {
  min-height: 38px;
}

.plan-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--green-dark);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
}

#screen-workout.is-training > .section-heading:first-child,
#screen-workout.is-training > .workout-hero {
  display: none;
}

.volcano-arena {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.volcano-arena[hidden] {
  display: none;
}

.arena-topline,
.arena-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.arena-actions {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.arena-topline span {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--green-dark);
  font-size: 0.82rem;
  font-weight: 850;
}

.volcano-scene {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(105, 47, 37, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 8, 12, 0.08), rgba(0, 0, 0, 0.28)),
    url("assets/volcano-arena.png?v=42") center / cover no-repeat;
  box-shadow: inset 0 -48px 90px rgba(0, 0, 0, 0.34);
}

.volcano-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 65% 54%, rgba(255, 104, 49, 0.25), transparent 26%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.volcano-cone {
  display: none;
}

.volcano-cone::before {
  content: none;
}

.lava-river {
  display: none;
}

.training-platform {
  position: absolute;
  left: 50%;
  bottom: 48px;
  width: 280px;
  height: 74px;
  border: 1px solid rgba(255, 211, 128, 0.24);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(255, 178, 92, 0.12) 0 18%, rgba(20, 20, 18, 0.28) 62%, rgba(0, 0, 0, 0) 72%);
  box-shadow: inset 0 0 26px rgba(255, 129, 61, 0.2);
  transform: translateX(-50%);
}

.volcano-ash {
  display: none;
}

.ash-one { left: 14%; top: 18%; }
.ash-two { right: 13%; top: 31%; width: 58px; }
.ash-three { left: 42%; top: 10%; width: 64px; }

.arena-pet {
  position: absolute;
  right: 18px;
  bottom: 86px;
  z-index: 5;
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.28));
}

.arena-exercise-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(255, 228, 172, 0.34);
  border-radius: 8px;
  background: rgba(27, 24, 21, 0.82);
  color: #fff7e8;
  backdrop-filter: blur(10px);
}

.arena-exercise-card span,
.arena-exercise-card p {
  display: block;
  color: rgba(255, 247, 232, 0.76);
  font-size: 0.78rem;
  line-height: 1.25;
}

.arena-exercise-card strong {
  display: block;
  margin: 4px 0;
  font-size: 1.34rem;
  line-height: 1.05;
}

.arena-exercise-card p {
  margin-bottom: 0;
}

/* Deprecated single-piece demo rules are kept out of the cascade; the articulated model below owns movement. */
@media not all {
.exercise-model {
  position: absolute;
  left: 50%;
  bottom: 100px;
  z-index: 4;
  width: 150px;
  height: 220px;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.3));
  animation: demo-breathe 1.8s ease-in-out infinite;
}

.exercise-model span {
  position: absolute;
  display: block;
  border-radius: 999px;
  border: 2px solid rgba(18, 20, 24, 0.34);
}

.model-head {
  left: 58px;
  top: 6px;
  width: 36px;
  height: 40px;
  background: linear-gradient(180deg, #f2c29b, #b87658);
  z-index: 6;
}

.model-hair {
  left: 56px;
  top: 1px;
  width: 40px;
  height: 25px;
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(180deg, #342421, #171313);
  z-index: 7;
}

.model-torso {
  left: 54px;
  top: 48px;
  width: 44px;
  height: 72px;
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(180deg, #f2f7ff, #5e86bf 24%, #294f83 100%);
  z-index: 4;
}

.model-hips {
  left: 51px;
  top: 112px;
  width: 50px;
  height: 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, #222938, #11151f);
  z-index: 5;
}

.model-arm,
.model-leg {
  width: 20px;
  transform-origin: 50% 10px;
  background: linear-gradient(180deg, #f0c49d, #a96850);
  z-index: 3;
}

.model-arm {
  height: 78px;
  top: 54px;
}

.arm-left {
  left: 39px;
  transform: rotate(28deg);
}

.arm-right {
  right: 39px;
  transform: rotate(-28deg);
}

.model-leg {
  height: 92px;
  top: 128px;
  background: linear-gradient(180deg, #202737, #11151e 58%, #7c573f 59%, #b97856 100%);
}

.leg-left {
  left: 50px;
  transform: rotate(12deg);
}

.leg-right {
  right: 50px;
  transform: rotate(-12deg);
}

.model-shoe {
  width: 34px;
  height: 14px;
  top: 207px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f7f7f7, #31343a);
  z-index: 6;
}

.shoe-left {
  left: 33px;
}

.shoe-right {
  right: 33px;
}

.model-shadow {
  left: 15px;
  bottom: -4px;
  width: 120px;
  height: 22px;
  border: 0;
  background: rgba(0, 0, 0, 0.26);
  filter: blur(6px);
  z-index: 0;
}

.model-weight {
  width: 24px;
  height: 16px;
  top: 118px;
  background: linear-gradient(180deg, #5a5f65, #202529);
  opacity: 0;
  z-index: 7;
}

.weight-left { left: 8px; }
.weight-right { right: 8px; }

.exercise-model.is-squat .model-torso {
  animation: squat-torso 1.8s ease-in-out infinite;
}

.exercise-model.is-squat .model-head {
  animation: squat-head 1.8s ease-in-out infinite;
}

.exercise-model.is-squat .model-hair {
  animation: squat-hair 1.8s ease-in-out infinite;
}

.exercise-model.is-squat .model-hips {
  animation: squat-hips 1.8s ease-in-out infinite;
}

.exercise-model.is-squat .model-leg {
  animation: squat-leg 1.8s ease-in-out infinite;
}

.exercise-model.is-squat .leg-left {
  animation-name: squat-leg-left;
}

.exercise-model.is-squat .leg-right {
  animation-name: squat-leg-right;
}

.exercise-model.is-squat .arm-left {
  animation: squat-arm-left 1.8s ease-in-out infinite;
}

.exercise-model.is-squat .arm-right {
  animation: squat-arm-right 1.8s ease-in-out infinite;
}

.exercise-model.is-squat .shoe-left {
  animation: squat-shoe-left 1.8s ease-in-out infinite;
}

.exercise-model.is-squat .shoe-right {
  animation: squat-shoe-right 1.8s ease-in-out infinite;
}

.exercise-model.is-bridge {
  height: 150px;
  bottom: 82px;
  animation: bridge-body 1.8s ease-in-out infinite;
}

.exercise-model.is-bridge .model-head {
  left: 14px;
  top: 78px;
}

.exercise-model.is-bridge .model-torso {
  left: 44px;
  top: 88px;
  width: 70px;
  height: 28px;
  transform: rotate(-8deg);
  animation: bridge-torso 1.8s ease-in-out infinite;
}

.exercise-model.is-bridge .model-hips {
  left: 100px;
  top: 86px;
  animation: bridge-hips 1.8s ease-in-out infinite;
}

.exercise-model.is-bridge .model-arm {
  top: 112px;
  height: 42px;
  transform: rotate(84deg);
}

.exercise-model.is-bridge .model-leg {
  top: 92px;
  height: 64px;
}

.exercise-model.is-bridge .leg-left {
  left: 94px;
  animation: bridge-leg-left 1.8s ease-in-out infinite;
}

.exercise-model.is-bridge .leg-right {
  right: 2px;
  animation: bridge-leg-right 1.8s ease-in-out infinite;
}

.exercise-model.is-lunge .model-torso {
  animation: lunge-torso 2s ease-in-out infinite;
}

.exercise-model.is-lunge .leg-left {
  top: 116px;
  left: 38px;
  animation: lunge-leg-left 2s ease-in-out infinite;
}

.exercise-model.is-lunge .leg-right {
  top: 116px;
  right: 34px;
  animation: lunge-leg-right 2s ease-in-out infinite;
}

.exercise-model.is-lunge .model-hips {
  animation: lunge-hips 2s ease-in-out infinite;
}

.exercise-model.is-calf .model-torso,
.exercise-model.is-walk .model-torso {
  top: 38px;
}

.exercise-model.is-calf .model-leg {
  top: 104px;
  height: 94px;
  animation: calf-leg 1.5s ease-in-out infinite;
}

.exercise-model.is-calf .model-head,
.exercise-model.is-calf .model-torso,
.exercise-model.is-calf .model-hips {
  animation: calf-rise 1.5s ease-in-out infinite;
}

.exercise-model.is-calf .model-shoe {
  animation: calf-shoe 1.5s ease-in-out infinite;
}

.exercise-model.is-walk .leg-left {
  animation: walk-leg-left 1.2s ease-in-out infinite;
}

.exercise-model.is-walk .leg-right {
  animation: walk-leg-right 1.2s ease-in-out infinite;
}

.exercise-model.is-walk .arm-left {
  animation: walk-arm-left 1.2s ease-in-out infinite;
}

.exercise-model.is-walk .arm-right {
  animation: walk-arm-right 1.2s ease-in-out infinite;
}

.exercise-model.is-walk .model-torso,
.exercise-model.is-walk .model-head,
.exercise-model.is-walk .model-hair,
.exercise-model.is-walk .model-hips {
  animation: walk-bob 1.2s ease-in-out infinite;
}

.exercise-model.is-pushup {
  bottom: 78px;
  width: 188px;
  height: 120px;
}

.exercise-model.is-pushup .model-head {
  left: 136px;
  top: 42px;
  animation: pushup-head 1.8s ease-in-out infinite;
}

.exercise-model.is-pushup .model-torso {
  left: 58px;
  top: 58px;
  width: 90px;
  height: 26px;
  animation: pushup-torso 1.8s ease-in-out infinite;
}

.exercise-model.is-pushup .model-hips {
  left: 24px;
  top: 62px;
  animation: pushup-hips 1.8s ease-in-out infinite;
}

.exercise-model.is-pushup .model-arm {
  top: 66px;
  height: 54px;
  animation: pushup-arm 1.8s ease-in-out infinite;
}

.exercise-model.is-pushup .arm-left {
  left: 132px;
}

.exercise-model.is-pushup .arm-right {
  right: 18px;
}

.exercise-model.is-pushup .model-leg {
  top: 62px;
  height: 82px;
  animation: pushup-leg 1.8s ease-in-out infinite;
}

.exercise-model.is-pushup .model-shoe {
  top: 116px;
  animation: pushup-shoe 1.8s ease-in-out infinite;
}

.exercise-model.is-row .arm-left,
.exercise-model.is-row .arm-right {
  animation: row-arm 1.6s ease-in-out infinite;
}

.exercise-model.is-row .model-weight,
.exercise-model.is-press .model-weight {
  opacity: 1;
}

.exercise-model.is-press .arm-left {
  top: 18px;
  animation: press-arm-left 1.8s ease-in-out infinite;
}

.exercise-model.is-press .arm-right {
  top: 18px;
  animation: press-arm-right 1.8s ease-in-out infinite;
}

.exercise-model.is-core {
  transform: translateX(-50%) rotate(-90deg);
  bottom: 66px;
  animation: core-body 1.8s ease-in-out infinite;
}

.exercise-model.is-core .model-arm {
  animation: core-arm 1.8s ease-in-out infinite;
}

.exercise-model.is-core .leg-left {
  animation: core-leg-left 1.8s ease-in-out infinite;
}

.exercise-model.is-core .leg-right {
  animation: core-leg-right 1.8s ease-in-out infinite;
}

.exercise-model.is-hinge .model-torso {
  animation: hinge-torso 1.8s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.exercise-model.is-hinge .model-head {
  left: 76px;
  top: 68px;
  animation: hinge-head 1.8s ease-in-out infinite;
}

.exercise-model.is-hinge .model-hair {
  animation: hinge-hair 1.8s ease-in-out infinite;
}

.exercise-model.is-hinge .arm-left,
.exercise-model.is-hinge .arm-right {
  animation: hinge-arm 1.8s ease-in-out infinite;
}

.exercise-model.is-mobility .model-arm {
  animation: mobility-arm-left 2.4s ease-in-out infinite;
}

.exercise-model.is-mobility .arm-right {
  animation: mobility-arm-right 2.4s ease-in-out infinite;
}

@keyframes demo-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

@keyframes squat-torso {
  0%, 100% { top: 48px; transform: rotate(0); }
  50% { top: 74px; transform: rotate(-8deg); }
}

@keyframes squat-head {
  0%, 100% { top: 6px; }
  50% { top: 31px; }
}

@keyframes squat-hair {
  0%, 100% { top: 1px; }
  50% { top: 26px; }
}

@keyframes squat-hips {
  0%, 100% { top: 112px; }
  50% { top: 131px; }
}

@keyframes squat-leg {
  0%, 100% { top: 128px; }
  50% { top: 137px; }
}

@keyframes squat-leg-left {
  0%, 100% { top: 128px; transform: rotate(12deg); }
  50% { top: 137px; transform: rotate(55deg); }
}

@keyframes squat-leg-right {
  0%, 100% { top: 128px; transform: rotate(-12deg); }
  50% { top: 137px; transform: rotate(-55deg); }
}

@keyframes squat-arm-left {
  0%, 100% { transform: rotate(28deg); }
  50% { transform: rotate(72deg); }
}

@keyframes squat-arm-right {
  0%, 100% { transform: rotate(-28deg); }
  50% { transform: rotate(-72deg); }
}

@keyframes squat-shoe-left {
  0%, 100% { left: 33px; top: 207px; }
  50% { left: 14px; top: 211px; }
}

@keyframes squat-shoe-right {
  0%, 100% { right: 33px; top: 207px; }
  50% { right: 14px; top: 211px; }
}

@keyframes bridge-body {
  0%, 100% { transform: translateX(-50%); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes bridge-torso {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(-22deg) translateY(-8px); }
}

@keyframes bridge-hips {
  0%, 100% { top: 92px; }
  50% { top: 74px; }
}

@keyframes bridge-leg-left {
  0%, 100% { transform: rotate(-66deg); }
  50% { transform: rotate(-50deg); }
}

@keyframes bridge-leg-right {
  0%, 100% { transform: rotate(-34deg); }
  50% { transform: rotate(-18deg); }
}

@keyframes lunge-torso {
  0%, 100% { top: 48px; transform: rotate(0); }
  50% { top: 62px; transform: rotate(-5deg); }
}

@keyframes lunge-hips {
  0%, 100% { top: 112px; }
  50% { top: 124px; }
}

@keyframes lunge-leg-left {
  0%, 100% { transform: rotate(22deg); }
  50% { transform: rotate(62deg); }
}

@keyframes lunge-leg-right {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(-36deg); }
}

@keyframes calf-rise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes calf-leg {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(2deg) translateY(-9px); }
}

@keyframes calf-shoe {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-12deg) translateY(-6px); }
}

@keyframes walk-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes walk-leg-left {
  0%, 100% { transform: rotate(-26deg); }
  50% { transform: rotate(32deg); }
}

@keyframes walk-leg-right {
  0%, 100% { transform: rotate(32deg); }
  50% { transform: rotate(-26deg); }
}

@keyframes walk-arm-left {
  0%, 100% { transform: rotate(38deg); }
  50% { transform: rotate(-26deg); }
}

@keyframes walk-arm-right {
  0%, 100% { transform: rotate(-38deg); }
  50% { transform: rotate(26deg); }
}

@keyframes pushup-head {
  0%, 100% { top: 38px; }
  50% { top: 62px; }
}

@keyframes pushup-torso {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(22px); }
}

@keyframes pushup-hips {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(22px); }
}

@keyframes pushup-arm {
  0%, 100% { transform: rotate(12deg); }
  50% { transform: rotate(42deg); }
}

@keyframes pushup-leg {
  0%, 100% { transform: rotate(72deg) translateY(0); }
  50% { transform: rotate(72deg) translateY(18px); }
}

@keyframes pushup-shoe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(18px); }
}

@keyframes row-arm {
  0%, 100% { transform: rotate(72deg); }
  50% { transform: rotate(18deg); }
}

@keyframes press-arm-left {
  0%, 100% { transform: rotate(-40deg); }
  50% { transform: rotate(-138deg); }
}

@keyframes press-arm-right {
  0%, 100% { transform: rotate(40deg); }
  50% { transform: rotate(138deg); }
}

@keyframes core-body {
  0%, 100% { transform: translateX(-50%) rotate(-90deg); }
  50% { transform: translateX(-50%) rotate(-90deg) translateY(-8px); }
}

@keyframes core-arm {
  0%, 100% { transform: rotate(132deg); }
  50% { transform: rotate(96deg); }
}

@keyframes core-leg-left {
  0%, 100% { transform: rotate(-38deg); }
  50% { transform: rotate(-74deg); }
}

@keyframes core-leg-right {
  0%, 100% { transform: rotate(38deg); }
  50% { transform: rotate(74deg); }
}

@keyframes hinge-torso {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(58deg); }
}

@keyframes hinge-head {
  0%, 100% { left: 58px; top: 6px; }
  50% { left: 78px; top: 70px; }
}

@keyframes hinge-hair {
  0%, 100% { left: 56px; top: 1px; }
  50% { left: 76px; top: 65px; }
}

@keyframes hinge-arm {
  0%, 100% { transform: rotate(28deg); }
  50% { transform: rotate(82deg); }
}

@keyframes mobility-arm-left {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(-128deg); }
}

@keyframes mobility-arm-right {
  0%, 100% { transform: rotate(30deg); }
  50% { transform: rotate(128deg); }
}
}

/* Articulated exercise demo. The extra segments keep the movement readable. */
.exercise-model {
  --outfit-top: #5e86bf;
  --outfit-mid: #294f83;
  --outfit-dark: #172134;
  --accent: #dcae35;
  --skin-top: #f2c29b;
  --skin-bottom: #b87658;
  position: absolute;
  left: 50%;
  bottom: 104px;
  z-index: 4;
  width: 180px;
  height: 238px;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.3));
  animation: model-breathe-new 1.8s ease-in-out infinite;
}

.exercise-model.hero-green {
  --outfit-top: #6fb586;
  --outfit-mid: #2f745d;
  --outfit-dark: #18362e;
  --accent: #dcae35;
}

.exercise-model.hero-teal {
  --outfit-top: #6bb8bf;
  --outfit-mid: #347d82;
  --outfit-dark: #213f47;
  --accent: #c47a3b;
}

.exercise-model.hero-violet {
  --outfit-top: #bca7ef;
  --outfit-mid: #7459a6;
  --outfit-dark: #35284f;
  --accent: #f0c866;
}

.exercise-model.hero-gold {
  --outfit-top: #f5df9a;
  --outfit-mid: #d8a93a;
  --outfit-dark: #675022;
  --accent: #9fc8ff;
}

.exercise-model.hero-forest {
  --outfit-top: #8fcf82;
  --outfit-mid: #4f8f4d;
  --outfit-dark: #24402d;
  --accent: #d7b56a;
}

.exercise-model span {
  position: absolute;
  display: block;
  border: 2px solid rgba(18, 20, 24, 0.34);
  border-radius: 999px;
}

.model-shadow {
  left: 24px;
  bottom: -5px;
  width: 132px;
  height: 22px;
  border: 0;
  background: rgba(0, 0, 0, 0.26);
  filter: blur(6px);
  z-index: 0;
}

.model-head {
  left: 72px;
  top: 6px;
  width: 36px;
  height: 40px;
  background: linear-gradient(180deg, var(--skin-top), var(--skin-bottom));
  z-index: 10;
}

.model-head::before,
.model-head::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1f2526;
  box-shadow: 0 8px 0 -1px rgba(99, 51, 45, 0.55);
}

.model-head::before {
  left: 9px;
}

.model-head::after {
  right: 9px;
}

.model-hair {
  left: 68px;
  top: 0;
  width: 44px;
  height: 25px;
  border-radius: 24px 24px 12px 12px;
  background: linear-gradient(180deg, #342421, #171313);
  z-index: 11;
}

.model-neck {
  left: 82px;
  top: 42px;
  width: 16px;
  height: 19px;
  background: linear-gradient(180deg, var(--skin-top), var(--skin-bottom));
  z-index: 5;
}

.model-chest {
  left: 61px;
  top: 56px;
  width: 58px;
  height: 70px;
  border-radius: 20px 20px 15px 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, var(--outfit-top), var(--outfit-mid) 58%, var(--outfit-dark));
  z-index: 5;
}

.model-chest::before {
  content: "";
  position: absolute;
  inset: 9px 14px auto;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-width: 0 1px 1px;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 10px 0 -8px rgba(255, 255, 255, 0.5);
}

.model-pelvis {
  left: 58px;
  top: 119px;
  width: 64px;
  height: 30px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--outfit-mid), var(--outfit-dark));
  z-index: 6;
}

.model-limb {
  width: 16px;
  transform-origin: 50% 8px;
  background: linear-gradient(180deg, var(--skin-top), var(--skin-bottom));
  z-index: 4;
}

.model-upper-arm,
.model-forearm {
  height: 54px;
}

.model-thigh,
.model-shin {
  width: 18px;
  height: 57px;
  background: linear-gradient(180deg, var(--outfit-dark), #11151e 58%, #7c573f 59%, var(--skin-bottom));
  z-index: 3;
}

.model-upper-arm.arm-left { left: 50px; top: 65px; transform: rotate(18deg); }
.model-forearm.arm-left { left: 42px; top: 111px; transform: rotate(8deg); }
.model-upper-arm.arm-right { left: 114px; top: 65px; transform: rotate(-18deg); }
.model-forearm.arm-right { left: 122px; top: 111px; transform: rotate(-8deg); }

.model-thigh.leg-left { left: 64px; top: 144px; transform: rotate(8deg); }
.model-shin.leg-left { left: 67px; top: 196px; transform: rotate(2deg); }
.model-thigh.leg-right { left: 98px; top: 144px; transform: rotate(-8deg); }
.model-shin.leg-right { left: 95px; top: 196px; transform: rotate(-2deg); }

.model-hand,
.model-foot {
  background: linear-gradient(180deg, #f7f7f7, #31343a);
  z-index: 7;
}

.model-hand {
  width: 20px;
  height: 18px;
  background: linear-gradient(180deg, var(--skin-top), var(--skin-bottom));
}

.hand-left { left: 36px; top: 158px; }
.hand-right { left: 124px; top: 158px; }

.model-foot {
  width: 40px;
  height: 14px;
  top: 226px;
}

.foot-left { left: 51px; }
.foot-right { left: 89px; }

.model-joint {
  width: 14px;
  height: 14px;
  border-color: rgba(18, 20, 24, 0.44);
  background:
    radial-gradient(circle at 35% 30%, #ffffff, transparent 28%),
    linear-gradient(180deg, var(--accent), #8c6522);
  z-index: 8;
}

.shoulder-left { left: 53px; top: 63px; }
.elbow-left { left: 43px; top: 108px; }
.wrist-left { left: 37px; top: 153px; }
.shoulder-right { left: 113px; top: 63px; }
.elbow-right { left: 123px; top: 108px; }
.wrist-right { left: 129px; top: 153px; }
.hip-left { left: 63px; top: 138px; }
.knee-left { left: 67px; top: 191px; }
.ankle-left { left: 67px; top: 221px; }
.hip-right { left: 103px; top: 138px; }
.knee-right { left: 99px; top: 191px; }
.ankle-right { left: 99px; top: 221px; }

.model-weight {
  width: 24px;
  height: 16px;
  top: 162px;
  border-radius: 7px;
  background: linear-gradient(180deg, #5a5f65, #202529);
  opacity: 0;
  z-index: 9;
}

.weight-left { left: 20px; }
.weight-right { right: 20px; }

.exercise-model.is-squat .model-head,
.exercise-model.is-squat .model-hair,
.exercise-model.is-squat .model-neck,
.exercise-model.is-squat .model-chest,
.exercise-model.is-squat .model-pelvis {
  animation: squat-body-new 1.8s ease-in-out infinite;
}

.exercise-model.is-squat .model-upper-arm.arm-left { animation: squat-upper-arm-left 1.8s ease-in-out infinite; }
.exercise-model.is-squat .model-forearm.arm-left { animation: squat-forearm-left 1.8s ease-in-out infinite; }
.exercise-model.is-squat .model-upper-arm.arm-right { animation: squat-upper-arm-right 1.8s ease-in-out infinite; }
.exercise-model.is-squat .model-forearm.arm-right { animation: squat-forearm-right 1.8s ease-in-out infinite; }
.exercise-model.is-squat .model-thigh.leg-left { animation: squat-thigh-left 1.8s ease-in-out infinite; }
.exercise-model.is-squat .model-shin.leg-left { animation: squat-shin-left 1.8s ease-in-out infinite; }
.exercise-model.is-squat .model-thigh.leg-right { animation: squat-thigh-right 1.8s ease-in-out infinite; }
.exercise-model.is-squat .model-shin.leg-right { animation: squat-shin-right 1.8s ease-in-out infinite; }
.exercise-model.is-squat .model-foot { animation: squat-feet-new 1.8s ease-in-out infinite; }
.exercise-model.is-squat .model-joint { animation: squat-joints-new 1.8s ease-in-out infinite; }

.exercise-model.is-bridge {
  bottom: 80px;
  width: 220px;
  height: 150px;
  animation: bridge-root-new 1.8s ease-in-out infinite;
}

.exercise-model.is-bridge .model-head { left: 18px; top: 80px; }
.exercise-model.is-bridge .model-hair { left: 15px; top: 74px; }
.exercise-model.is-bridge .model-neck { left: 53px; top: 92px; transform: rotate(78deg); }
.exercise-model.is-bridge .model-chest { left: 67px; top: 84px; width: 78px; height: 30px; transform: rotate(-8deg); animation: bridge-chest-new 1.8s ease-in-out infinite; }
.exercise-model.is-bridge .model-pelvis { left: 137px; top: 84px; width: 54px; animation: bridge-pelvis-new 1.8s ease-in-out infinite; }
.exercise-model.is-bridge .model-upper-arm { top: 111px; height: 34px; transform: rotate(82deg); }
.exercise-model.is-bridge .model-forearm { top: 119px; height: 30px; transform: rotate(88deg); }
.exercise-model.is-bridge .model-thigh.leg-left { left: 146px; top: 99px; transform: rotate(-58deg); animation: bridge-thigh-left 1.8s ease-in-out infinite; }
.exercise-model.is-bridge .model-shin.leg-left { left: 185px; top: 112px; transform: rotate(8deg); }
.exercise-model.is-bridge .model-thigh.leg-right { left: 154px; top: 100px; transform: rotate(-30deg); animation: bridge-thigh-right 1.8s ease-in-out infinite; }
.exercise-model.is-bridge .model-shin.leg-right { left: 191px; top: 118px; transform: rotate(-2deg); }
.exercise-model.is-bridge .model-foot { top: 134px; }
.exercise-model.is-bridge .foot-left { left: 180px; }
.exercise-model.is-bridge .foot-right { left: 188px; }
.exercise-model.is-bridge .model-joint { display: none; }

.exercise-model.is-lunge .model-head,
.exercise-model.is-lunge .model-hair,
.exercise-model.is-lunge .model-neck,
.exercise-model.is-lunge .model-chest,
.exercise-model.is-lunge .model-pelvis {
  animation: lunge-body-new 2s ease-in-out infinite;
}

.exercise-model.is-lunge .model-thigh.leg-left { animation: lunge-front-thigh 2s ease-in-out infinite; }
.exercise-model.is-lunge .model-shin.leg-left { animation: lunge-front-shin 2s ease-in-out infinite; }
.exercise-model.is-lunge .model-thigh.leg-right { animation: lunge-back-thigh 2s ease-in-out infinite; }
.exercise-model.is-lunge .model-shin.leg-right { animation: lunge-back-shin 2s ease-in-out infinite; }
.exercise-model.is-lunge .model-upper-arm.arm-left,
.exercise-model.is-lunge .model-upper-arm.arm-right { animation: lunge-arm-balance 2s ease-in-out infinite; }
.exercise-model.is-lunge .model-joint { animation: lunge-joints-new 2s ease-in-out infinite; }

.exercise-model.is-calf .model-head,
.exercise-model.is-calf .model-hair,
.exercise-model.is-calf .model-neck,
.exercise-model.is-calf .model-chest,
.exercise-model.is-calf .model-pelvis,
.exercise-model.is-calf .model-limb,
.exercise-model.is-calf .model-hand,
.exercise-model.is-calf .model-joint {
  animation: calf-rise-new 1.5s ease-in-out infinite;
}

.exercise-model.is-calf .model-foot { animation: calf-foot-new 1.5s ease-in-out infinite; }

.exercise-model.is-walk .model-head,
.exercise-model.is-walk .model-hair,
.exercise-model.is-walk .model-neck,
.exercise-model.is-walk .model-chest,
.exercise-model.is-walk .model-pelvis {
  animation: walk-bob-new 1.2s ease-in-out infinite;
}

.exercise-model.is-walk .model-upper-arm.arm-left { animation: walk-arm-left-new 1.2s ease-in-out infinite; }
.exercise-model.is-walk .model-forearm.arm-left { animation: walk-forearm-left-new 1.2s ease-in-out infinite; }
.exercise-model.is-walk .model-upper-arm.arm-right { animation: walk-arm-right-new 1.2s ease-in-out infinite; }
.exercise-model.is-walk .model-forearm.arm-right { animation: walk-forearm-right-new 1.2s ease-in-out infinite; }
.exercise-model.is-walk .model-thigh.leg-left { animation: walk-thigh-left-new 1.2s ease-in-out infinite; }
.exercise-model.is-walk .model-shin.leg-left { animation: walk-shin-left-new 1.2s ease-in-out infinite; }
.exercise-model.is-walk .model-thigh.leg-right { animation: walk-thigh-right-new 1.2s ease-in-out infinite; }
.exercise-model.is-walk .model-shin.leg-right { animation: walk-shin-right-new 1.2s ease-in-out infinite; }
.exercise-model.is-walk .model-foot { animation: walk-feet-new 1.2s ease-in-out infinite; }

.exercise-model.is-pushup {
  bottom: 80px;
  width: 224px;
  height: 140px;
  animation: none;
}

.exercise-model.is-pushup .model-head { left: 178px; top: 48px; animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-hair { left: 174px; top: 42px; animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-neck { left: 164px; top: 60px; transform: rotate(82deg); animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-chest { left: 78px; top: 60px; width: 94px; height: 28px; transform: rotate(2deg); animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-pelvis { left: 36px; top: 63px; animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-upper-arm.arm-left { left: 166px; top: 70px; height: 42px; animation: pushup-upper-arm-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-forearm.arm-left { left: 177px; top: 100px; height: 40px; animation: pushup-forearm-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-upper-arm.arm-right { left: 152px; top: 74px; height: 42px; animation: pushup-upper-arm-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-forearm.arm-right { left: 160px; top: 102px; height: 40px; animation: pushup-forearm-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-thigh.leg-left { left: 48px; top: 70px; transform: rotate(78deg); animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-shin.leg-left { left: 15px; top: 73px; transform: rotate(82deg); animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-thigh.leg-right { left: 46px; top: 82px; transform: rotate(78deg); animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-shin.leg-right { left: 13px; top: 85px; transform: rotate(82deg); animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .model-foot { top: 104px; animation: pushup-down-new 1.8s ease-in-out infinite; }
.exercise-model.is-pushup .foot-left { left: 5px; }
.exercise-model.is-pushup .foot-right { left: 1px; }
.exercise-model.is-pushup .model-joint { display: none; }

.exercise-model.is-row .model-weight,
.exercise-model.is-press .model-weight {
  opacity: 1;
}

.exercise-model.is-row .model-head,
.exercise-model.is-row .model-hair,
.exercise-model.is-row .model-neck,
.exercise-model.is-row .model-chest {
  animation: hinge-forward-new 1.8s ease-in-out infinite;
}

.exercise-model.is-row .model-upper-arm.arm-left { animation: row-upper-left-new 1.6s ease-in-out infinite; }
.exercise-model.is-row .model-forearm.arm-left { animation: row-forearm-left-new 1.6s ease-in-out infinite; }
.exercise-model.is-row .weight-left { animation: row-weight-new 1.6s ease-in-out infinite; }

.exercise-model.is-press .model-upper-arm.arm-left { animation: press-upper-left-new 1.8s ease-in-out infinite; }
.exercise-model.is-press .model-forearm.arm-left { animation: press-forearm-left-new 1.8s ease-in-out infinite; }
.exercise-model.is-press .model-upper-arm.arm-right { animation: press-upper-right-new 1.8s ease-in-out infinite; }
.exercise-model.is-press .model-forearm.arm-right { animation: press-forearm-right-new 1.8s ease-in-out infinite; }
.exercise-model.is-press .weight-left { animation: press-weight-left-new 1.8s ease-in-out infinite; }
.exercise-model.is-press .weight-right { animation: press-weight-right-new 1.8s ease-in-out infinite; }

.exercise-model.is-core {
  bottom: 74px;
  width: 224px;
  height: 150px;
  transform: translateX(-50%);
  animation: core-root-new 1.8s ease-in-out infinite;
}

.exercise-model.is-core .model-head { left: 20px; top: 86px; }
.exercise-model.is-core .model-hair { left: 17px; top: 80px; }
.exercise-model.is-core .model-neck { left: 55px; top: 99px; transform: rotate(86deg); }
.exercise-model.is-core .model-chest { left: 68px; top: 92px; width: 82px; height: 30px; transform: rotate(0); }
.exercise-model.is-core .model-pelvis { left: 145px; top: 93px; width: 50px; }
.exercise-model.is-core .model-upper-arm.arm-left { left: 84px; top: 72px; transform: rotate(-138deg); animation: core-arm-left-new 1.8s ease-in-out infinite; }
.exercise-model.is-core .model-forearm.arm-left { left: 76px; top: 38px; transform: rotate(-160deg); animation: core-forearm-left-new 1.8s ease-in-out infinite; }
.exercise-model.is-core .model-upper-arm.arm-right { left: 88px; top: 104px; transform: rotate(92deg); }
.exercise-model.is-core .model-forearm.arm-right { left: 122px; top: 111px; transform: rotate(88deg); }
.exercise-model.is-core .model-thigh.leg-left { left: 154px; top: 83px; transform: rotate(-78deg); animation: core-leg-left-new 1.8s ease-in-out infinite; }
.exercise-model.is-core .model-shin.leg-left { left: 188px; top: 52px; transform: rotate(-18deg); animation: core-shin-left-new 1.8s ease-in-out infinite; }
.exercise-model.is-core .model-thigh.leg-right { left: 154px; top: 106px; transform: rotate(72deg); }
.exercise-model.is-core .model-shin.leg-right { left: 186px; top: 120px; transform: rotate(18deg); }
.exercise-model.is-core .model-foot { display: none; }
.exercise-model.is-core .model-joint { display: none; }

.exercise-model.is-hinge .model-head,
.exercise-model.is-hinge .model-hair,
.exercise-model.is-hinge .model-neck,
.exercise-model.is-hinge .model-chest {
  animation: hinge-forward-new 1.8s ease-in-out infinite;
}

.exercise-model.is-hinge .model-head { left: 72px; top: 6px; }
.exercise-model.is-hinge .model-hair { left: 68px; top: 0; }
.exercise-model.is-hinge .model-neck { left: 82px; top: 42px; }
.exercise-model.is-hinge .model-chest { left: 61px; top: 56px; }

.exercise-model.is-hinge .model-upper-arm.arm-left,
.exercise-model.is-hinge .model-forearm.arm-left,
.exercise-model.is-hinge .model-upper-arm.arm-right,
.exercise-model.is-hinge .model-forearm.arm-right {
  animation: hinge-arms-new 1.8s ease-in-out infinite;
}

.exercise-model.is-mobility .model-upper-arm.arm-left { animation: mobility-upper-left-new 2.4s ease-in-out infinite; }
.exercise-model.is-mobility .model-forearm.arm-left { animation: mobility-forearm-left-new 2.4s ease-in-out infinite; }
.exercise-model.is-mobility .model-upper-arm.arm-right { animation: mobility-upper-right-new 2.4s ease-in-out infinite; }
.exercise-model.is-mobility .model-forearm.arm-right { animation: mobility-forearm-right-new 2.4s ease-in-out infinite; }

@keyframes model-breathe-new {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

@keyframes squat-body-new {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(28px) rotate(-4deg); }
}

@keyframes squat-upper-arm-left { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(68deg); } }
@keyframes squat-forearm-left { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(84deg); } }
@keyframes squat-upper-arm-right { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-68deg); } }
@keyframes squat-forearm-right { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-84deg); } }
@keyframes squat-thigh-left { 0%, 100% { top: 144px; left: 64px; transform: rotate(8deg); } 50% { top: 159px; left: 57px; transform: rotate(58deg); } }
@keyframes squat-shin-left { 0%, 100% { top: 196px; left: 67px; transform: rotate(2deg); } 50% { top: 199px; left: 42px; transform: rotate(-28deg); } }
@keyframes squat-thigh-right { 0%, 100% { top: 144px; left: 98px; transform: rotate(-8deg); } 50% { top: 159px; left: 105px; transform: rotate(-58deg); } }
@keyframes squat-shin-right { 0%, 100% { top: 196px; left: 95px; transform: rotate(-2deg); } 50% { top: 199px; left: 120px; transform: rotate(28deg); } }
@keyframes squat-feet-new { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }
@keyframes squat-joints-new { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(24px); } }

@keyframes bridge-root-new { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(-50%) translateY(-6px); } }
@keyframes bridge-chest-new { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-18deg) translateY(-8px); } }
@keyframes bridge-pelvis-new { 0%, 100% { top: 84px; } 50% { top: 68px; } }
@keyframes bridge-thigh-left { 0%, 100% { transform: rotate(-58deg); } 50% { transform: rotate(-45deg); } }
@keyframes bridge-thigh-right { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(-16deg); } }

@keyframes lunge-body-new { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
@keyframes lunge-front-thigh { 0%, 100% { left: 58px; top: 144px; transform: rotate(22deg); } 50% { left: 45px; top: 159px; transform: rotate(72deg); } }
@keyframes lunge-front-shin { 0%, 100% { left: 66px; top: 195px; transform: rotate(-8deg); } 50% { left: 42px; top: 198px; transform: rotate(-24deg); } }
@keyframes lunge-back-thigh { 0%, 100% { left: 99px; top: 144px; transform: rotate(-22deg); } 50% { left: 106px; top: 160px; transform: rotate(-62deg); } }
@keyframes lunge-back-shin { 0%, 100% { left: 97px; top: 195px; transform: rotate(-4deg); } 50% { left: 133px; top: 197px; transform: rotate(44deg); } }
@keyframes lunge-arm-balance { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(34deg); } }
@keyframes lunge-joints-new { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(16px); } }

@keyframes calf-rise-new { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes calf-foot-new { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg) translateY(-4px); } }

@keyframes walk-bob-new { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes walk-arm-left-new { 0%, 100% { transform: rotate(42deg); } 50% { transform: rotate(-24deg); } }
@keyframes walk-forearm-left-new { 0%, 100% { transform: rotate(28deg); } 50% { transform: rotate(-14deg); } }
@keyframes walk-arm-right-new { 0%, 100% { transform: rotate(-42deg); } 50% { transform: rotate(24deg); } }
@keyframes walk-forearm-right-new { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(14deg); } }
@keyframes walk-thigh-left-new { 0%, 100% { transform: rotate(-32deg); } 50% { transform: rotate(34deg); } }
@keyframes walk-shin-left-new { 0%, 100% { transform: rotate(22deg); } 50% { transform: rotate(-18deg); } }
@keyframes walk-thigh-right-new { 0%, 100% { transform: rotate(34deg); } 50% { transform: rotate(-32deg); } }
@keyframes walk-shin-right-new { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }
@keyframes walk-feet-new { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@keyframes pushup-down-new { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(22px); } }
@keyframes pushup-upper-arm-new { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(48deg); } }
@keyframes pushup-forearm-new { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-16deg); } }

@keyframes hinge-forward-new {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(24px, 30px) rotate(50deg); }
}

@keyframes row-upper-left-new { 0%, 100% { transform: rotate(72deg); } 50% { transform: rotate(14deg); } }
@keyframes row-forearm-left-new { 0%, 100% { transform: rotate(62deg); } 50% { transform: rotate(-4deg); } }
@keyframes row-weight-new { 0%, 100% { left: 18px; top: 165px; } 50% { left: 47px; top: 117px; } }

@keyframes press-upper-left-new { 0%, 100% { top: 65px; transform: rotate(-44deg); } 50% { top: 28px; transform: rotate(-142deg); } }
@keyframes press-forearm-left-new { 0%, 100% { top: 78px; transform: rotate(-20deg); } 50% { top: 0; transform: rotate(-176deg); } }
@keyframes press-upper-right-new { 0%, 100% { top: 65px; transform: rotate(44deg); } 50% { top: 28px; transform: rotate(142deg); } }
@keyframes press-forearm-right-new { 0%, 100% { top: 78px; transform: rotate(20deg); } 50% { top: 0; transform: rotate(176deg); } }
@keyframes press-weight-left-new { 0%, 100% { left: 28px; top: 100px; } 50% { left: 50px; top: 0; } }
@keyframes press-weight-right-new { 0%, 100% { right: 28px; top: 100px; } 50% { right: 50px; top: 0; } }

@keyframes core-root-new { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes core-arm-left-new { 0%, 100% { transform: rotate(-138deg); } 50% { transform: rotate(-104deg); } }
@keyframes core-forearm-left-new { 0%, 100% { transform: rotate(-160deg); } 50% { transform: rotate(-116deg); } }
@keyframes core-leg-left-new { 0%, 100% { transform: rotate(-78deg); } 50% { transform: rotate(-44deg); } }
@keyframes core-shin-left-new { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(10deg); } }

@keyframes hinge-arms-new { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(76deg); } }
@keyframes mobility-upper-left-new { 0%, 100% { transform: rotate(-34deg); } 50% { transform: rotate(-134deg); } }
@keyframes mobility-forearm-left-new { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-88deg); } }
@keyframes mobility-upper-right-new { 0%, 100% { transform: rotate(34deg); } 50% { transform: rotate(134deg); } }
@keyframes mobility-forearm-right-new { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(88deg); } }

.camera-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.camera-stage {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #16211d;
}

.camera-stage video,
.camera-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-stage canvas {
  opacity: 0;
  pointer-events: none;
}

.camera-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 850;
}

.camera-stage.is-on .camera-placeholder {
  display: none;
}

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

.workout-controls .primary-button,
.workout-controls .ghost-button {
  width: 100%;
  min-height: 44px;
  padding: 0 8px;
}

.rep-readout {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr;
  gap: 8px;
}

.rep-readout article {
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}

.rep-readout span,
.rep-readout strong {
  display: block;
}

.rep-readout span {
  color: var(--muted);
  font-size: 0.74rem;
}

.rep-readout strong {
  margin-top: 8px;
  color: var(--green-dark);
  font-size: 1.02rem;
  line-height: 1.05;
}

.boss-panel {
  padding: 12px;
}

.boss-panel p,
.boss-panel h3 {
  margin-bottom: 0;
}

.boss-panel strong {
  color: var(--coral);
}

.boss-meter span {
  background: linear-gradient(90deg, var(--coral), var(--gold));
}

.dungeon-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.dungeon-day {
  display: grid;
  place-items: center;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-align: center;
}

.dungeon-day.is-done {
  border-color: rgba(47, 116, 93, 0.38);
  background: #e7f4ed;
  color: var(--green-dark);
}

.dungeon-day.is-recovery {
  border-color: rgba(77, 119, 181, 0.34);
  background: #eef5fb;
  color: var(--blue);
}

.dungeon-day.is-alt {
  border-style: dashed;
  background: #fff8e2;
  color: #896519;
}

.pet-coach-card {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(68, 112, 90, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 248, 244, 0.9)),
    #ffffff;
}

.personal-chatgpt-card {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(75, 112, 155, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.92)),
  #ffffff;
}

.coach-api-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(77, 119, 181, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 255, 0.92)),
    #ffffff;
}

.coach-api-card span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf6ff;
  color: #2b5b82;
  font-size: 0.7rem;
  font-weight: 900;
}

.coach-api-card strong {
  display: block;
  color: var(--green-dark);
}

.coach-api-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.42;
}

.api-endpoint {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  margin-top: 7px;
  padding: 3px 8px;
  border: 1px solid rgba(77, 119, 181, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #2b5b82;
  font-size: 0.72rem;
  font-weight: 850;
}

.api-endpoint code {
  color: var(--green-dark);
}

.personal-chatgpt-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.manual-chatgpt-bridge {
  border-color: rgba(63, 88, 134, 0.28);
}

.manual-bridge-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px 10px 8px 28px;
  border: 1px solid rgba(63, 88, 134, 0.16);
  border-radius: 8px;
  background: rgba(247, 250, 255, 0.86);
  color: #314461;
  font-size: 0.8rem;
  line-height: 1.35;
}

.manual-bridge-actions {
  grid-template-columns: 1.25fr 1fr 1fr;
}

#personalChatGptPromptOutput {
  min-height: 160px;
  background: #18231f;
  color: #edf8f0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
}

.pet-coach-head {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.pet-coach-head img {
  width: 82px;
  height: 82px;
  border: 1px solid rgba(57, 96, 77, 0.2);
  border-radius: 8px;
  object-fit: cover;
  background: #f4fbf6;
}

.pet-coach-head span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf6ff;
  color: #2b5b82;
  font-size: 0.7rem;
  font-weight: 800;
}

.pet-coach-head h3 {
  margin: 0;
  color: var(--green-dark);
  font-size: 1.08rem;
}

.pet-coach-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.coach-chat-log {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 260px;
  max-height: 360px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 251, 239, 0.76), rgba(240, 248, 255, 0.74)),
    #ffffff;
}

.coach-bubble {
  max-width: 86%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(58, 91, 72, 0.16);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(47, 70, 58, 0.08);
}

.coach-bubble.is-user {
  justify-self: end;
  background: #eff5ff;
  color: #203b63;
}

.coach-bubble.is-pet {
  justify-self: start;
  background: #fffaf0;
  color: #304438;
}

.coach-bubble span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.coach-bubble p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.48;
  white-space: pre-wrap;
}

.pet-coach-form {
  display: grid;
  gap: 10px;
}

.voice-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  gap: 10px;
  align-items: end;
}

.voice-select-row .hint {
  margin: 0;
  align-self: center;
}

.coach-action-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
}

#coachVoiceToggle.is-active {
  border-color: rgba(69, 119, 87, 0.4);
  background: #eaf6ee;
  color: var(--green-dark);
}

.command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.command-grid button {
  min-height: 52px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--green-dark);
}

.coach-command {
  margin-bottom: 10px;
}

.planner-card {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
}

.meal-assist-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(47, 116, 93, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 252, 239, 0.92), rgba(239, 248, 244, 0.86)),
    #ffffff;
}

.meal-assist-panel strong,
.meal-assist-panel span {
  display: block;
}

.meal-assist-panel strong {
  color: var(--green-dark);
}

.meal-assist-panel span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.meal-assist-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.meal-estimate-output {
  min-height: 112px;
  padding: 10px;
  border: 1px solid rgba(47, 116, 93, 0.18);
  border-radius: 8px;
  background: rgba(23, 33, 29, 0.94);
  color: #ecf7ef;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.personal-food-panel,
.food-photo-review-panel,
.meal-database-search {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(80, 64, 38, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 252, 239, 0.95), rgba(239, 248, 244, 0.9)),
    #fffaf0;
}

.meal-database-search {
  margin-bottom: 2px;
}

.meal-database-search h3 {
  margin: 2px 0 0;
  color: var(--green-dark);
}

.meal-database-search .food-search-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.food-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
  gap: 8px;
  align-items: center;
}

.personal-food-list,
.nutrition-search-list,
.food-candidate-list {
  display: grid;
  gap: 8px;
}

.nutrition-search-list:empty {
  display: none;
}

.personal-food-card,
.food-candidate-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(47, 116, 93, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
}

.personal-food-card span,
.food-candidate-card span,
.personal-food-card small,
.food-candidate-card small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.personal-food-card strong,
.food-candidate-card strong {
  display: block;
  color: var(--green-dark);
}

.personal-food-card p,
.food-candidate-card p,
.food-questions p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.personal-food-actions,
.food-candidate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.food-questions {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px dashed rgba(47, 116, 93, 0.35);
  border-radius: 8px;
  background: rgba(239, 248, 244, 0.72);
}

@media (max-width: 720px) {
  .meal-database-search .food-search-row,
  .food-search-row,
  .personal-food-card,
  .food-candidate-card {
    grid-template-columns: 1fr;
  }

  .personal-food-actions,
  .food-candidate-actions {
    justify-content: stretch;
  }

  .personal-food-actions button,
  .food-candidate-actions button {
    flex: 1 1 120px;
  }
}

.coach-output {
  min-height: 240px;
  max-height: 420px;
  overflow: auto;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #17211d;
  color: #ecf7ef;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.privacy-note {
  padding: 12px;
}

.privacy-note p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.bottom-nav {
  position: fixed;
  top: max(94px, calc(78px + env(safe-area-inset-top)));
  bottom: 14px;
  left: 10px;
  z-index: 20;
  display: grid;
  grid-auto-rows: min-content;
  gap: 6px;
  width: 78px;
  max-height: calc(100svh - 108px);
  margin: 0;
  padding: 8px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: rgba(248, 251, 247, 0.86);
  box-shadow: 0 14px 34px rgba(19, 32, 26, 0.2);
  backdrop-filter: blur(16px);
  transition: width 180ms ease;
}

body.is-immersive-active .bottom-nav,
body.is-town-active .bottom-nav {
  width: 78px;
  border: 1px solid rgba(238, 210, 129, 0.46);
  border-radius: 8px;
  background: rgba(20, 28, 25, 0.76);
  box-shadow: 0 14px 34px rgba(5, 12, 10, 0.34);
}

.bottom-nav.is-expanded,
body.is-immersive-active .bottom-nav.is-expanded,
body.is-town-active .bottom-nav.is-expanded {
  width: min(236px, calc(100vw - 20px));
}

.bottom-nav button {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: center;
}

.bottom-nav .nav-full {
  display: none;
}

.bottom-nav.is-expanded .nav-short {
  display: none;
}

.bottom-nav.is-expanded .nav-full {
  display: inline;
}

.bottom-nav.is-expanded button {
  justify-items: start;
  text-align: left;
}

.bottom-nav .nav-toggle {
  border: 1px solid rgba(238, 210, 129, 0.48);
  background: rgba(255, 247, 218, 0.12);
  color: #fff7d9;
}

.bottom-nav button.is-active {
  background: linear-gradient(180deg, rgba(238, 210, 129, 0.92), rgba(177, 133, 54, 0.92));
  color: #1d211c;
}

body.is-immersive-active .bottom-nav button,
body.is-town-active .bottom-nav button {
  color: rgba(247, 242, 223, 0.78);
}

body.is-immersive-active .bottom-nav button.is-active,
body.is-town-active .bottom-nav button.is-active {
  color: #1d211c;
}

dialog {
  width: min(calc(100% - 24px), 460px);
  padding: 0;
  border: 0;
  background: transparent;
}

dialog::backdrop {
  background: rgba(20, 28, 24, 0.38);
}

.dialog-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.dialog-actions {
  margin-top: 4px;
}

.dialog-actions .primary-button,
.dialog-actions .danger-button,
.dialog-actions .ghost-button {
  width: auto;
  min-width: 126px;
  padding: 0 14px;
}

@media (max-width: 370px) {
  .hero-panel {
    grid-template-columns: 1fr;
  }

  .companion-stage {
    grid-template-columns: 92px 1fr;
    justify-items: start;
  }

  .companion-stage img {
    width: 92px;
    height: 92px;
  }

    .stat-grid,
    .readiness-panel,
    .resource-grid,
    .command-grid,
    .evolution-grid,
    .stakes-grid,
    .real-reward-grid,
    .bond-grid,
    .meal-repair-grid,
    .plan-intel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .character-hero,
  .town-ledger-card,
  .garden-steward-panel,
  .town-rename-form,
  .path-grid,
  .town-stats,
  .vault-summary,
  .profile-integration-grid,
  .account-status-grid,
  .rule-action-row,
  .rule-settings-grid,
  .fitness-slider-grid,
  .trend-grid,
  .micro-grid {
    grid-template-columns: 1fr;
  }

  .readiness-panel,
  .evolution-grid,
  .stakes-grid,
  .real-reward-grid,
  .bond-grid,
  .meal-repair-grid,
  .plan-intel {
    grid-template-columns: 1fr;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .workout-hero {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .workout-buddy-stack {
    width: 92px;
    height: 112px;
  }

  #workoutHeroImage {
    width: 76px;
    height: 112px;
  }

  #workoutPetImage {
    width: 52px;
    height: 52px;
  }

  .character-art-frame,
  .character-art-frame img {
    min-height: 320px;
  }

  .character-grid,
  .future-hero-grid,
  .coach-api-card,
  .voice-select-row {
    grid-template-columns: 1fr;
  }

  .workout-controls,
  .rep-readout,
  .coach-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pet-coach-head {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .pet-coach-head img {
    width: 70px;
    height: 70px;
  }

  .coach-action-row .primary-button {
    grid-column: 1 / -1;
  }

  .town-map-live {
    min-height: 560px;
  }

  .town-gateway {
    min-width: 70px;
    min-height: 42px;
    padding: 6px 7px;
  }

  .town-gateway strong {
    font-size: 0.64rem;
  }

  .town-gateway span {
    font-size: 0.58rem;
  }

  .gateway-board { left: 5%; top: 34%; }
  .gateway-grove { right: 5%; top: 46%; }
  .gateway-gardens { right: 5%; top: 25%; }
  .gateway-inn { left: 34%; top: 40%; }
  .gateway-logbook { left: 5%; top: 70%; }
  .gateway-market { right: 8%; top: 68%; }
  .gateway-training { right: 5%; top: 17%; }
  .gateway-oracle { left: 39%; top: 16%; }
  .gateway-dungeon { right: 5%; top: 34%; }
  .gateway-townhall { left: 39%; top: 54%; }

  .town-shop-card {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .town-shop-card button,
  .town-item-card button,
  .mission-card button,
  .craft-card button,
  .hero-path-card button,
  .artifact-card button,
  .dungeon-encounter button {
    grid-column: 1 / -1;
  }

  .town-item-card,
  .mission-card,
  .craft-card,
  .hero-path-card,
  .artifact-card,
  .dungeon-encounter,
  .inventory-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .inventory-card .item-count {
    grid-column: 1 / -1;
  }

  .volcano-scene {
    min-height: 520px;
  }

  .arena-pet {
    left: 8px;
    right: 8px;
    bottom: 150px;
    width: 62px;
    height: 62px;
  }

  .exercise-model {
    bottom: 150px;
    scale: 0.72;
    transform: translateX(-58%);
    transform-origin: 50% 100%;
  }

  .exercise-model.is-core {
    bottom: 138px;
    scale: 0.72;
    transform: translateX(-58%);
  }

  .exercise-model.is-pushup,
  .exercise-model.is-bridge {
    bottom: 142px;
  }

  .training-platform {
    bottom: 116px;
    width: 230px;
  }

  .arena-demo-strip {
    left: 8px;
    right: 8px;
    grid-template-columns: minmax(0, 1fr);
  }

  .arena-exercise-card {
    left: 8px;
    right: 8px;
    bottom: 8px;
    min-height: 132px;
  }

  .arena-exercise-card strong {
    font-size: 1.12rem;
  }

  .dungeon-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  body {
    padding: 24px 0;
  }

  body.is-immersive-active,
  body.is-town-active {
    padding: 0;
  }

  .app-shell {
    min-height: calc(100svh - 48px);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: clip;
  }

  .app-shell.is-immersive-active,
  .app-shell.is-town-active {
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .bottom-nav {
    left: 50%;
    transform: translateX(-50%);
  }

  .bottom-nav.side-nav,
  body.is-immersive-active .bottom-nav.side-nav,
  body.is-town-active .bottom-nav.side-nav {
    left: 10px;
    transform: none;
  }
}

.arena-demo-strip {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 232, 146, 0.62);
  border-radius: 8px;
  background: rgba(14, 18, 16, 0.86);
  color: #fff7d9;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px) saturate(1.15);
}

.arena-demo-strip[hidden] {
  display: none;
}

.arena-demo-strip span {
  color: #fff7d9;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.25;
}

.arena-demo-strip .ghost-button {
  border-color: rgba(255, 232, 146, 0.52);
  background: rgba(255, 247, 218, 0.12);
  color: #fff7d9;
}

.volcano-arena.is-demoing .arena-demo-strip {
  border-color: rgba(255, 238, 168, 0.92);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), 0 0 24px rgba(255, 205, 92, 0.28);
}

.volcano-arena.is-demo-ready .arena-demo-strip {
  border-color: rgba(146, 222, 171, 0.72);
}

.volcano-arena.is-set-active .arena-demo-strip {
  border-color: rgba(126, 205, 255, 0.72);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), 0 0 22px rgba(112, 190, 255, 0.22);
}

.exercise-model,
.exercise-model span {
  animation-duration: var(--demo-tempo, 1800ms);
}

.exercise-model.is-demoing {
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 22px rgba(255, 218, 118, 0.5));
}

.exercise-model.is-performing {
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 20px rgba(126, 205, 255, 0.42));
}

.exercise-model.is-demoing::before {
  content: "";
  position: absolute;
  inset: -18px -12px -6px;
  z-index: -1;
  border: 1px solid rgba(255, 234, 154, 0.5);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 211, 111, 0.18), transparent 68%);
  animation: demo-aura 1.4s ease-in-out infinite;
}

.exercise-model.is-performing::before {
  content: "";
  position: absolute;
  inset: -18px -12px -6px;
  z-index: -1;
  border: 1px solid rgba(126, 205, 255, 0.42);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(76, 168, 255, 0.16), transparent 68%);
  animation: demo-aura 1.8s ease-in-out infinite;
}

.exercise-model.is-demoing::after,
.exercise-model.is-performing::after {
  content: "MODELING";
  position: absolute;
  left: 50%;
  top: -24px;
  padding: 4px 8px;
  border: 1px solid rgba(126, 205, 255, 0.72);
  border-radius: 999px;
  background: rgba(17, 22, 19, 0.86);
  color: #fff7d9;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  transform: translateX(-50%);
}

.exercise-model.is-demoing::after {
  content: "DEMO";
  border-color: rgba(255, 232, 146, 0.72);
}

#startSetButton:disabled {
  border-color: rgba(146, 130, 87, 0.42);
  background: rgba(48, 45, 36, 0.76);
  color: rgba(255, 247, 218, 0.72);
  cursor: default;
}

.exercise-model {
  width: 248px;
  height: 326px;
  bottom: 96px;
  transform: translateX(-50%) scale(1.08);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.4));
}

.exercise-model span {
  border-width: 0;
}

.model-joint {
  display: none !important;
}

.model-shadow {
  left: 32px;
  bottom: -8px;
  width: 184px;
  height: 32px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.38), transparent 72%);
  filter: blur(8px);
}

.model-head {
  left: 99px;
  top: 10px;
  width: 50px;
  height: 56px;
  border-radius: 46% 46% 44% 44%;
  box-shadow: inset 0 -7px 0 rgba(132, 77, 58, 0.12);
}

.model-head::before,
.model-head::after {
  top: 22px;
  width: 5px;
  height: 5px;
}

.model-head::before { left: 13px; }
.model-head::after { right: 13px; }

.model-hair {
  left: 92px;
  top: 0;
  width: 64px;
  height: 38px;
  border-radius: 32px 32px 14px 14px;
  box-shadow:
    -10px 22px 0 -8px #171313,
    12px 22px 0 -9px #171313;
}

.model-neck {
  left: 114px;
  top: 58px;
  width: 20px;
  height: 24px;
}

.model-chest {
  left: 82px;
  top: 74px;
  width: 84px;
  height: 104px;
  border-radius: 30px 30px 22px 22px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.16),
    inset 0 -18px 0 rgba(0, 0, 0, 0.1);
}

.model-chest::before {
  inset: 13px 20px auto;
  height: 42px;
  border-color: rgba(255, 255, 255, 0.5);
}

.model-chest::after {
  content: "";
  position: absolute;
  left: -9px;
  right: -9px;
  top: 46px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.84;
}

.model-pelvis {
  left: 80px;
  top: 170px;
  width: 88px;
  height: 42px;
  border-radius: 22px 22px 18px 18px;
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.16);
}

.model-limb {
  width: 28px;
  transform-origin: 50% 12px;
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.12);
}

.model-upper-arm,
.model-forearm {
  width: 26px;
  height: 74px;
}

.model-thigh,
.model-shin {
  width: 32px;
  height: 78px;
  box-shadow: inset 0 -9px 0 rgba(0, 0, 0, 0.16);
}

.model-upper-arm.arm-left { left: 65px; top: 86px; transform: rotate(20deg); }
.model-forearm.arm-left { left: 53px; top: 148px; transform: rotate(8deg); }
.model-upper-arm.arm-right { left: 157px; top: 86px; transform: rotate(-20deg); }
.model-forearm.arm-right { left: 169px; top: 148px; transform: rotate(-8deg); }

.model-thigh.leg-left { left: 89px; top: 204px; transform: rotate(8deg); }
.model-shin.leg-left { left: 94px; top: 274px; transform: rotate(2deg); }
.model-thigh.leg-right { left: 127px; top: 204px; transform: rotate(-8deg); }
.model-shin.leg-right { left: 122px; top: 274px; transform: rotate(-2deg); }

.model-hand {
  width: 28px;
  height: 25px;
  box-shadow: inset 0 -5px 0 rgba(132, 77, 58, 0.16);
}

.hand-left { left: 47px; top: 217px; }
.hand-right { left: 173px; top: 217px; }

.model-foot {
  width: 55px;
  height: 18px;
  top: 312px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #f7f7f7, #252a31 64%, #11151e);
}

.foot-left { left: 70px; }
.foot-right { left: 123px; }

.model-weight {
  width: 34px;
  height: 24px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #202529 0 22%, #686f78 22% 78%, #202529 78%),
    linear-gradient(180deg, #5a5f65, #202529);
}

.weight-left { left: 28px; }
.weight-right { right: 28px; }

.exercise-model.is-demoing,
.exercise-model.is-performing {
  filter:
    drop-shadow(0 24px 24px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 24px rgba(255, 218, 118, 0.34));
}

.exercise-model.is-demoing::before,
.exercise-model.is-performing::before {
  inset: auto 8px -20px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 211, 111, 0.22), transparent 72%);
}

.exercise-model.is-demoing::after,
.exercise-model.is-performing::after {
  top: -34px;
  font-size: 0.72rem;
}

.exercise-model.is-squat::before {
  content: "hips back";
}

.exercise-model.is-bridge::before {
  content: "lift hips";
}

.exercise-model.is-lunge::before {
  content: "front knee bends";
}

.exercise-model.is-pushup::before {
  content: "chest lowers";
}

.exercise-model.is-row::before {
  content: "elbow pulls back";
}

.exercise-model.is-press::before {
  content: "press overhead";
}

.exercise-model.is-hinge::before {
  content: "hinge at hips";
}

.exercise-model.is-squat::before,
.exercise-model.is-bridge::before,
.exercise-model.is-lunge::before,
.exercise-model.is-pushup::before,
.exercise-model.is-row::before,
.exercise-model.is-press::before,
.exercise-model.is-hinge::before {
  position: absolute;
  left: 50%;
  bottom: -34px;
  z-index: 12;
  width: max-content;
  max-width: 180px;
  height: auto;
  padding: 5px 9px;
  border: 1px solid rgba(255, 232, 146, 0.54);
  border-radius: 999px;
  background: rgba(17, 22, 19, 0.82);
  color: #fff7d9;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  transform: translateX(-50%);
  animation: none;
}

.exercise-model.is-squat .model-thigh.leg-left { animation: hero-squat-thigh-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-squat .model-shin.leg-left { animation: hero-squat-shin-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-squat .model-thigh.leg-right { animation: hero-squat-thigh-right var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-squat .model-shin.leg-right { animation: hero-squat-shin-right var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-squat .model-upper-arm.arm-left { animation: hero-squat-arm-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-squat .model-upper-arm.arm-right { animation: hero-squat-arm-right var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-squat .model-forearm.arm-left { animation: hero-squat-forearm-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-squat .model-forearm.arm-right { animation: hero-squat-forearm-right var(--demo-tempo, 1800ms) ease-in-out infinite; }

.exercise-model.is-lunge .model-thigh.leg-left { animation: hero-lunge-front-thigh var(--demo-tempo, 2000ms) ease-in-out infinite; }
.exercise-model.is-lunge .model-shin.leg-left { animation: hero-lunge-front-shin var(--demo-tempo, 2000ms) ease-in-out infinite; }
.exercise-model.is-lunge .model-thigh.leg-right { animation: hero-lunge-back-thigh var(--demo-tempo, 2000ms) ease-in-out infinite; }
.exercise-model.is-lunge .model-shin.leg-right { animation: hero-lunge-back-shin var(--demo-tempo, 2000ms) ease-in-out infinite; }

.exercise-model.is-bridge {
  width: 306px;
  height: 192px;
  bottom: 86px;
}

.exercise-model.is-bridge .model-head { left: 24px; top: 108px; }
.exercise-model.is-bridge .model-hair { left: 18px; top: 98px; }
.exercise-model.is-bridge .model-neck { left: 72px; top: 124px; transform: rotate(82deg); }
.exercise-model.is-bridge .model-chest { left: 92px; top: 112px; width: 116px; height: 42px; transform: rotate(-8deg); animation: hero-bridge-chest var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-bridge .model-pelvis { left: 196px; top: 112px; width: 70px; height: 40px; animation: hero-bridge-pelvis var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-bridge .model-upper-arm { top: 146px; height: 44px; transform: rotate(84deg); }
.exercise-model.is-bridge .model-forearm { top: 158px; height: 40px; transform: rotate(88deg); }
.exercise-model.is-bridge .model-thigh.leg-left { left: 214px; top: 132px; transform: rotate(-58deg); animation: hero-bridge-thigh-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-bridge .model-shin.leg-left { left: 264px; top: 148px; transform: rotate(8deg); }
.exercise-model.is-bridge .model-thigh.leg-right { left: 220px; top: 134px; transform: rotate(-28deg); animation: hero-bridge-thigh-right var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-bridge .model-shin.leg-right { left: 270px; top: 154px; transform: rotate(-2deg); }
.exercise-model.is-bridge .model-foot { top: 172px; }
.exercise-model.is-bridge .foot-left { left: 248px; }
.exercise-model.is-bridge .foot-right { left: 258px; }

.exercise-model.is-pushup {
  width: 326px;
  height: 188px;
  bottom: 84px;
}

.exercise-model.is-pushup .model-head { left: 248px; top: 62px; animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-hair { left: 240px; top: 52px; animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-neck { left: 224px; top: 78px; transform: rotate(82deg); animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-chest { left: 110px; top: 78px; width: 132px; height: 40px; transform: rotate(2deg); animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-pelvis { left: 50px; top: 82px; animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-upper-arm.arm-left { left: 228px; top: 94px; height: 56px; animation: hero-pushup-upper-arm var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-forearm.arm-left { left: 244px; top: 132px; height: 54px; animation: hero-pushup-forearm var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-upper-arm.arm-right { left: 208px; top: 98px; height: 56px; animation: hero-pushup-upper-arm var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-forearm.arm-right { left: 222px; top: 134px; height: 54px; animation: hero-pushup-forearm var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-thigh.leg-left { left: 66px; top: 92px; transform: rotate(78deg); animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-shin.leg-left { left: 18px; top: 94px; transform: rotate(82deg); animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-thigh.leg-right { left: 64px; top: 110px; transform: rotate(78deg); animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-shin.leg-right { left: 16px; top: 112px; transform: rotate(82deg); animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .model-foot { top: 138px; animation: hero-pushup-down var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-pushup .foot-left { left: 0; }
.exercise-model.is-pushup .foot-right { left: -5px; }

.exercise-model.is-core {
  width: 310px;
  height: 196px;
  bottom: 82px;
}

.exercise-model.is-core .model-head { left: 28px; top: 112px; }
.exercise-model.is-core .model-hair { left: 20px; top: 102px; }
.exercise-model.is-core .model-neck { left: 76px; top: 130px; transform: rotate(86deg); }
.exercise-model.is-core .model-chest { left: 96px; top: 120px; width: 118px; height: 42px; transform: rotate(0); }
.exercise-model.is-core .model-pelvis { left: 208px; top: 120px; width: 70px; }
.exercise-model.is-core .model-upper-arm.arm-left { left: 124px; top: 86px; transform: rotate(-138deg); animation: hero-core-arm-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-core .model-forearm.arm-left { left: 112px; top: 42px; transform: rotate(-160deg); animation: hero-core-forearm-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-core .model-upper-arm.arm-right { left: 126px; top: 136px; transform: rotate(92deg); }
.exercise-model.is-core .model-forearm.arm-right { left: 172px; top: 146px; transform: rotate(88deg); }
.exercise-model.is-core .model-thigh.leg-left { left: 222px; top: 102px; transform: rotate(-78deg); animation: hero-core-leg-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-core .model-shin.leg-left { left: 266px; top: 62px; transform: rotate(-18deg); animation: hero-core-shin-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-core .model-thigh.leg-right { left: 222px; top: 138px; transform: rotate(72deg); }
.exercise-model.is-core .model-shin.leg-right { left: 264px; top: 158px; transform: rotate(18deg); }

.exercise-model.is-row .weight-left { animation: hero-row-weight var(--demo-tempo, 1600ms) ease-in-out infinite; }
.exercise-model.is-press .weight-left { animation: hero-press-weight-left var(--demo-tempo, 1800ms) ease-in-out infinite; }
.exercise-model.is-press .weight-right { animation: hero-press-weight-right var(--demo-tempo, 1800ms) ease-in-out infinite; }

@keyframes hero-squat-thigh-left { 0%, 100% { top: 204px; left: 89px; transform: rotate(8deg); } 50% { top: 226px; left: 77px; transform: rotate(60deg); } }
@keyframes hero-squat-shin-left { 0%, 100% { top: 274px; left: 94px; transform: rotate(2deg); } 50% { top: 280px; left: 58px; transform: rotate(-30deg); } }
@keyframes hero-squat-thigh-right { 0%, 100% { top: 204px; left: 127px; transform: rotate(-8deg); } 50% { top: 226px; left: 139px; transform: rotate(-60deg); } }
@keyframes hero-squat-shin-right { 0%, 100% { top: 274px; left: 122px; transform: rotate(-2deg); } 50% { top: 280px; left: 158px; transform: rotate(30deg); } }
@keyframes hero-squat-arm-left { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(74deg); } }
@keyframes hero-squat-arm-right { 0%, 100% { transform: rotate(-20deg); } 50% { transform: rotate(-74deg); } }
@keyframes hero-squat-forearm-left { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(86deg); } }
@keyframes hero-squat-forearm-right { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-86deg); } }

@keyframes hero-lunge-front-thigh { 0%, 100% { left: 84px; top: 204px; transform: rotate(18deg); } 50% { left: 62px; top: 224px; transform: rotate(74deg); } }
@keyframes hero-lunge-front-shin { 0%, 100% { left: 94px; top: 274px; transform: rotate(-6deg); } 50% { left: 58px; top: 278px; transform: rotate(-24deg); } }
@keyframes hero-lunge-back-thigh { 0%, 100% { left: 130px; top: 204px; transform: rotate(-18deg); } 50% { left: 144px; top: 226px; transform: rotate(-62deg); } }
@keyframes hero-lunge-back-shin { 0%, 100% { left: 124px; top: 274px; transform: rotate(-2deg); } 50% { left: 174px; top: 278px; transform: rotate(46deg); } }

@keyframes hero-bridge-chest { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-17deg) translateY(-14px); } }
@keyframes hero-bridge-pelvis { 0%, 100% { top: 112px; } 50% { top: 84px; } }
@keyframes hero-bridge-thigh-left { 0%, 100% { transform: rotate(-58deg); } 50% { transform: rotate(-44deg); } }
@keyframes hero-bridge-thigh-right { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(-14deg); } }

@keyframes hero-pushup-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(28px); } }
@keyframes hero-pushup-upper-arm { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(52deg); } }
@keyframes hero-pushup-forearm { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-18deg); } }

@keyframes hero-core-arm-left { 0%, 100% { transform: rotate(-138deg); } 50% { transform: rotate(-112deg); } }
@keyframes hero-core-forearm-left { 0%, 100% { transform: rotate(-160deg); } 50% { transform: rotate(-138deg); } }
@keyframes hero-core-leg-left { 0%, 100% { transform: rotate(-78deg); } 50% { transform: rotate(-48deg); } }
@keyframes hero-core-shin-left { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-4deg); } }

@keyframes hero-row-weight { 0%, 100% { left: 28px; top: 220px; } 50% { left: 70px; top: 150px; } }
@keyframes hero-press-weight-left { 0%, 100% { left: 42px; top: 132px; } 50% { left: 74px; top: 8px; } }
@keyframes hero-press-weight-right { 0%, 100% { right: 42px; top: 132px; } 50% { right: 74px; top: 8px; } }

@keyframes demo-aura {
  0%, 100% {
    opacity: 0.62;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.town-area-screen.is-active :is(
  .mission-card,
  .stakes-card,
  .real-reward-card,
  .town-shop-card,
  .town-item-card,
  .inventory-card,
  .craft-card,
  .hero-path-card,
  .dungeon-encounter,
  .unlock-card,
  .artifact-card,
  .bond-card,
  .evolution-card,
  .path-card,
  .future-hero-card,
  .hero-choice,
  .meal-repair-card,
  .weekly-check-card,
  .trend-card,
  .vault-card,
  .integration-card,
  .coach-api-card,
  .pet-coach-card,
  .personal-chatgpt-card,
  .plan-card,
  .camera-panel,
  .rep-readout article,
  .unlocked-training-list article,
  .plan-mods article,
  .dungeon-status-panel
):not(.surface-light *) {
  --surface-bg: var(--dark-surface-bg);
  --surface-text: var(--dark-surface-text);
  --surface-muted: var(--dark-surface-muted);
  --surface-accent: var(--dark-surface-accent);
  --surface-focus: var(--focus-ring-dark);
  border-color: rgba(238, 210, 129, 0.56) !important;
  background: rgba(20, 28, 25, 0.84) !important;
  color: var(--surface-text) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 16px 36px rgba(5, 12, 10, 0.28);
}

.town-area-screen.is-active :is(
  .mission-card,
  .stakes-card,
  .real-reward-card,
  .town-shop-card,
  .town-item-card,
  .inventory-card,
  .craft-card,
  .hero-path-card,
  .dungeon-encounter,
  .unlock-card,
  .artifact-card,
  .bond-card,
  .evolution-card,
  .path-card,
  .future-hero-card,
  .hero-choice,
  .meal-repair-card,
  .weekly-check-card,
  .trend-card,
  .vault-card,
  .integration-card,
  .coach-api-card,
  .pet-coach-card,
  .personal-chatgpt-card,
  .plan-card,
  .camera-panel,
  .rep-readout article,
  .unlocked-training-list article,
  .plan-mods article,
  .dungeon-status-panel
) :is(h2, h3, h4, strong, label):not(.surface-light *) {
  color: var(--surface-text);
}

.town-area-screen.is-active :is(
  .mission-card,
  .stakes-card,
  .real-reward-card,
  .town-shop-card,
  .town-item-card,
  .inventory-card,
  .craft-card,
  .hero-path-card,
  .dungeon-encounter,
  .unlock-card,
  .artifact-card,
  .bond-card,
  .evolution-card,
  .path-card,
  .future-hero-card,
  .hero-choice,
  .meal-repair-card,
  .weekly-check-card,
  .trend-card,
  .vault-card,
  .integration-card,
  .coach-api-card,
  .pet-coach-card,
  .personal-chatgpt-card,
  .plan-card,
  .camera-panel,
  .rep-readout article,
  .unlocked-training-list article,
  .plan-mods article,
  .dungeon-status-panel
) :is(p, span, small, li):not(.surface-light *) {
  color: var(--surface-muted);
}

.town-area-screen.is-active :is(.item-glyph, .mission-rank, .plan-badge, .item-count, .coach-api-card span, .weekly-check-card span):not(.surface-light *) {
  border-color: rgba(255, 232, 146, 0.34);
  background: rgba(25, 36, 32, 0.9) !important;
  color: #fff7d9 !important;
}

.town-area-screen.is-active :is(.api-endpoint, .integration-card span, .pet-coach-head span, .coach-bubble span) {
  border-color: rgba(238, 210, 129, 0.38) !important;
  background: rgba(255, 247, 218, 0.92) !important;
  color: #243a2d !important;
  text-shadow: none !important;
}

.town-area-screen.is-active :is(
  .eyebrow,
  .choice-price,
  .path-element,
  .path-bonus,
  .path-personality,
  .hero-role,
  .hero-form-note,
  .hero-bonus,
  .item-cost,
  .reward-cost,
  .town-district span,
  .district-state,
  .stat-value,
  .trend-value,
  .quest-reward,
  .profile-status,
  .integration-status,
  .section-heading span
):not(.surface-light *) {
  color: var(--dark-surface-accent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

.town-area-screen.is-active :is(
  .hero-choice,
  .path-card,
  .future-hero-card,
  .weekly-check-card,
  .trend-card,
  .town-shop-card,
  .inventory-card,
  .craft-card
) :is(.eyebrow, .choice-price, .path-element, .hero-role, .hero-form-note, small):not(.surface-light *) {
  color: var(--surface-muted);
}

.town-area-screen.is-active :is(input, select, textarea):not(.surface-light *) {
  border-color: rgba(238, 210, 129, 0.42);
  background: rgba(255, 252, 239, 0.94) !important;
  color: var(--ink) !important;
}

.town-area-screen.is-active :is(input, textarea):not(.surface-light *)::placeholder {
  color: #6d766f;
}

.town-area-screen.is-active :is(button:disabled, .primary-button:disabled, .ghost-button:disabled):not(.surface-light *) {
  border-color: rgba(146, 130, 87, 0.36) !important;
  background: rgba(45, 48, 40, 0.74) !important;
  color: rgba(255, 247, 218, 0.62) !important;
}

.town-area-screen.is-active :is(
  .side-quest,
  .timeline-item,
  .dungeon-day,
  .meal-assist-panel,
  .meal-estimate-output,
  .medicine-card,
  .medicine-history-item,
  .rule-toggle,
  .fitness-setup-panel,
  .goal-suggestion-panel,
  .planner-card,
  .photo-preview
) {
  --surface-bg: var(--dark-surface-bg);
  --surface-text: var(--dark-surface-text);
  --surface-muted: var(--dark-surface-muted);
  --surface-accent: var(--dark-surface-accent);
  --surface-focus: var(--focus-ring-dark);
  border-color: rgba(238, 210, 129, 0.48) !important;
  background: rgba(18, 26, 23, 0.82) !important;
  color: var(--surface-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.town-area-screen.is-active :is(
  .mission-card.is-ready,
  .mission-card.is-claimed,
  .mission-card.is-locked,
  .stakes-card.is-warning,
  .stakes-card.is-danger,
  .stakes-card.is-muted,
  .real-reward-card.is-ready,
  .real-reward-card.is-muted,
  .real-reward-card.is-summary,
  .town-shop-card.is-buildable,
  .town-shop-card.is-locked,
  .town-item-card.is-ready,
  .town-item-card.is-locked,
  .craft-card.is-ready,
  .hero-path-card.is-ready,
  .hero-path-card.is-locked,
  .unlock-card.is-empty,
  .dungeon-day.is-done,
  .dungeon-day.is-recovery,
  .dungeon-day.is-alt
):not(.surface-light *) {
  border-color: rgba(238, 210, 129, 0.56) !important;
  background: rgba(20, 28, 25, 0.88) !important;
  color: #f7f2df !important;
}

.town-area-screen.is-active :is(
  .side-quest,
  .timeline-item,
  .dungeon-day,
  .meal-assist-panel,
  .meal-estimate-output,
  .medicine-card,
  .medicine-history-item,
  .rule-toggle,
  .fitness-setup-panel,
  .goal-suggestion-panel,
  .planner-card
) :is(strong, label, h3):not(.surface-light *) {
  color: var(--surface-text);
}

.town-area-screen.is-active :is(
  .side-quest,
  .timeline-item,
  .dungeon-day,
  .meal-assist-panel,
  .medicine-card,
  .medicine-history-item,
  .rule-toggle,
  .fitness-setup-panel,
  .goal-suggestion-panel,
  .planner-card
) :is(p, span, small):not(.surface-light *) {
  color: var(--surface-muted);
}

.town-area-screen.is-active :is(
  .section-heading span,
  .choice-price,
  .choice-action,
  .hero-role,
  .hero-form-note,
  .path-element,
  .path-bonus,
  .path-personality,
  .item-cost,
  .reward-cost,
  .district-state,
  .quest-reward,
  .integration-status,
  .profile-status
) {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid rgba(32, 68, 58, 0.18) !important;
  border-radius: 999px;
  background: rgba(255, 252, 239, 0.94) !important;
  color: #21372d !important;
  text-shadow: none !important;
}

.town-area-screen.is-active :is(
  .keeper-dialogue,
  .keeper-dialogue *,
  .town-interior-keeper,
  .town-interior-keeper *
) {
  text-shadow: none;
}

.town-area-screen.is-active .keeper-dialogue :is(.keeper-copy > span, .keeper-prompt, .keeper-options strong, .keeper-options span) {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
}

@media (max-width: 520px) {
  .volcano-scene {
    min-height: 520px;
  }

  .arena-pet {
    left: 8px;
    right: 8px;
    bottom: 150px;
    width: 62px;
    height: 62px;
  }

  .exercise-model {
    bottom: 150px;
    scale: 0.72;
    transform: translateX(-58%);
    transform-origin: 50% 100%;
  }

  .exercise-model.is-core {
    bottom: 138px;
    scale: 0.72;
    transform: translateX(-58%);
  }

  .exercise-model.is-pushup,
  .exercise-model.is-bridge {
    bottom: 142px;
  }

  .training-platform {
    bottom: 116px;
    width: 230px;
  }

  .arena-demo-strip {
    left: 8px;
    right: 8px;
    grid-template-columns: minmax(0, 1fr);
  }

  .arena-demo-strip .ghost-button {
    width: 100%;
  }

  .arena-exercise-card {
    left: 8px;
    right: 8px;
    bottom: 8px;
    min-height: 132px;
  }
}

/* Final Ledger cascade guard. Older onboarding themes remain for legacy dialogs. */
dialog.onboarding-dialog {
  width: min(100vw, 1280px);
  max-width: none;
  max-height: 100vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

dialog.onboarding-dialog::backdrop {
  background: radial-gradient(circle at 50% 38%, rgba(49, 76, 116, 0.2), transparent 42%), rgba(4, 8, 14, 0.95);
  backdrop-filter: blur(7px);
}

form.onboarding-book.ledger-v2 {
  width: min(1220px, 98vw);
  height: min(700px, 98vh);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

form.onboarding-book.ledger-v2::before,
form.onboarding-book.ledger-v2::after {
  display: none;
}

form.onboarding-book.ledger-v2 > * {
  position: absolute;
}

form.onboarding-book.ledger-v2 .ledger-closed-cover {
  inset: 0;
  width: 100%;
  height: 100%;
}

form.onboarding-book.ledger-v2:not(.is-book-open) .ledger-book-stage {
  visibility: hidden;
  pointer-events: none;
}

form.onboarding-book.ledger-v2.is-book-open .ledger-book-stage {
  visibility: visible;
}

form.onboarding-book.ledger-v2 .ledger-cover-art {
  clip-path: polygon(8% 2%, 88% 2%, 94% 5%, 94% 88%, 89% 91%, 12% 91%, 6% 88%, 6% 6%);
}

form.onboarding-book.ledger-v2 .ledger-book-stage {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

form.onboarding-book.ledger-v2 .ledger-page-content {
  overflow: hidden;
}

form.onboarding-book.ledger-v2 .onboarding-page,
form.onboarding-book.ledger-v2 .onboarding-page.is-active {
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

form.onboarding-book.ledger-v2 .onboarding-page::before,
form.onboarding-book.ledger-v2 .onboarding-page::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 820px) {
  dialog.onboarding-dialog {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
  }

  form.onboarding-book.ledger-v2 {
    width: 100vw;
    height: 100dvh;
  }

  form.onboarding-book.ledger-v2 .ledger-book-stage {
    border: 10px solid #172944;
    border-radius: 5px;
    background:
      linear-gradient(90deg, rgba(122, 87, 40, 0.16), transparent 9%, transparent 91%, rgba(122, 87, 40, 0.16)),
      radial-gradient(circle at 50% 10%, rgba(255, 251, 226, 0.72), transparent 45%),
      #efdfb9;
    box-shadow: inset 0 0 0 2px #b38c42, inset 0 0 32px rgba(83, 52, 22, 0.22);
  }

  form.onboarding-book.ledger-v2 .ledger-character-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  form.onboarding-book.ledger-v2 .ledger-character-choice {
    min-height: 0;
    padding: 3px;
  }

  form.onboarding-book.ledger-v2 .ledger-character-choice img {
    height: 78px;
  }
}

body:has(.onboarding-dialog[open]) {
  overflow: hidden;
}

/* Ledger polish: clear navigation, protected art zones, and complete choice details. */
form.onboarding-book.ledger-v2 .ledger-save-bookplate {
  top: 2.2%;
  bottom: auto;
  min-width: 190px;
}

form.onboarding-book.ledger-v2 .ledger-page-content {
  inset: 12.5% 9.5% 16%;
}

form.onboarding-book.ledger-v2 .ledger-page-half {
  position: relative;
}

form.onboarding-book.ledger-v2 .ledger-page-half:has(> .ledger-chapter-illustration) {
  padding-right: 122px;
}

form.onboarding-book.ledger-v2 .ledger-chapter-illustration {
  position: absolute;
  top: 2%;
  right: 2%;
  float: none;
  width: 96px;
  height: 116px;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

form.onboarding-book.ledger-v2 .ill-ledger { background-image: url("assets/ui/ledger-chapters/ledger-clean.webp?v=135"); }
form.onboarding-book.ledger-v2 .ill-welcome,
form.onboarding-book.ledger-v2 .ill-goals { background-image: url("assets/ui/ledger-chapters/goals-clean.webp?v=135"); }
form.onboarding-book.ledger-v2 .ill-hero { background-image: url("assets/ui/ledger-chapters/hero-clean.webp?v=135"); }
form.onboarding-book.ledger-v2 .ill-companion { background-image: none; }
form.onboarding-book.ledger-v2 .ill-path { background-image: url("assets/ui/ledger-chapters/path-clean.webp?v=135"); }
form.onboarding-book.ledger-v2 .ill-realm { background-image: url("assets/ui/ledger-chapters/realm-clean.webp?v=135"); }
form.onboarding-book.ledger-v2 .ill-review { background-image: url("assets/ui/ledger-chapters/review-clean.webp?v=135"); }

.required-rune {
  color: #9b6317;
  font: 900 0.9em Georgia, serif;
  text-shadow: 0 0 7px rgba(213, 159, 55, 0.42);
}

.onboarding-page.has-required-missing .required-rune {
  color: #b33b27;
  animation: ledger-required-pulse 1.8s ease-in-out infinite;
}

.onboarding-page.has-required-missing :is(input, select, textarea):required:invalid {
  border-color: #b14a31;
  box-shadow: 0 0 0 2px rgba(177, 74, 49, 0.12), inset 0 1px 5px rgba(88, 57, 22, 0.1);
}

@keyframes ledger-required-pulse {
  50% { text-shadow: 0 0 11px rgba(194, 74, 37, 0.72); }
}

.ledger-page-navigation {
  position: absolute;
  z-index: 46;
  right: 7%;
  bottom: 5.2%;
  left: 7%;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 132px;
  align-items: center;
  gap: 12px;
}

.ledger-page-navigation p {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid rgba(151, 104, 37, 0.48);
  background: rgba(247, 232, 194, 0.94);
  color: #7e2d20;
  text-align: center;
  font: 700 0.68rem/1.25 Georgia, serif;
  box-shadow: 0 3px 9px rgba(55, 34, 12, 0.18);
}

.ledger-page-navigation p.is-complete {
  color: #295344;
}

.ledger-page-button {
  min-height: 38px;
  border: 1px solid #b58a37;
  border-radius: 2px;
  background: linear-gradient(#29466f, #172944);
  color: #f6e8c6;
  font: 800 0.7rem Georgia, serif;
  box-shadow: inset 0 0 0 1px rgba(244, 218, 151, 0.18), 0 4px 11px rgba(20, 12, 5, 0.25);
}

.ledger-page-button--back::before { content: "‹  "; }
.ledger-page-button--next::after { content: "  ›"; }
.ledger-page-button--next:not(:disabled) { animation: ledger-page-invite 2.4s ease-in-out 2; }
.ledger-page-button:disabled { opacity: 0.42; cursor: not-allowed; }

@keyframes ledger-page-invite {
  50% { border-color: #f0d179; box-shadow: 0 0 15px rgba(83, 141, 211, 0.48); }
}

form.onboarding-book.ledger-v2 .ledger-progress-diamonds {
  bottom: 1.9%;
}

form.onboarding-book.ledger-v2 .ledger-close-button {
  right: 3%;
  bottom: 1.2%;
}

.ledger-character-selection {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 14px;
  height: calc(100% - 48px);
}

form.onboarding-book.ledger-v2 .ledger-character-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 100%;
}

.ledger-character-detail {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  overflow: hidden;
  border-left: 1px solid rgba(139, 97, 39, 0.42);
  color: #493c2a;
}

.ledger-character-detail-art {
  display: grid;
  place-items: end center;
  min-height: 0;
}

.ledger-character-detail-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 8px rgba(56, 35, 16, 0.24));
}

.ledger-character-detail h3 { margin-bottom: 5px; }
.ledger-character-detail p { font-size: 0.66rem; }

.ledger-choice-facts {
  display: grid;
  gap: 3px;
  margin: 6px 0 0;
}

.ledger-choice-facts div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 5px;
  padding-top: 3px;
  border-top: 1px solid rgba(124, 88, 39, 0.24);
}

.ledger-choice-facts dt { color: #745629; font-size: 0.58rem; font-weight: 900; }
.ledger-choice-facts dd { margin: 0; color: #37445a; font-size: 0.58rem; line-height: 1.22; }

form.onboarding-book.ledger-v2 .ledger-class-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

form.onboarding-book.ledger-v2 .ledger-class-choice { min-height: 62px; }
form.onboarding-book.ledger-v2 .ledger-class-choice small { color: #73562d; font-size: 0.55rem; }

.ledger-egg-sheet {
  display: block;
  width: 72px;
  height: 88px;
  margin: 0 auto 3px;
  background-image: url("assets/town/reference/willowgrove-starter-pets-companions-sheet-003.png?v=121");
  background-size: 1024% auto;
  background-repeat: no-repeat;
  filter: drop-shadow(0 5px 4px rgba(67, 42, 17, 0.22));
}

.ledger-egg-sheet--dragon { background-position: 5.8% 14.3%; }
.ledger-egg-sheet--slime { background-position: 5.8% 37.4%; }
.ledger-egg-sheet--frog { background-position: 5.8% 60%; }
.ledger-egg-sheet--sprite { background-position: 5.8% 82.8%; }
.ledger-egg-sheet--golem,
.ledger-egg-sheet--troll { background-position: 80% 32%; }
.ledger-egg-sheet--fairy { background-position: 80% 55%; }
.ledger-egg-sheet--unicorn { background-position: 80% 77%; }

form.onboarding-book.ledger-v2 .ledger-egg-choice img {
  display: block;
  width: 100%;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 5px 4px rgba(67, 42, 17, 0.22));
}
form.onboarding-book.ledger-v2 .ledger-companion-preview { height: 165px; }

@media (max-width: 820px) {
  form.onboarding-book.ledger-v2 .ledger-page-content {
    inset: 11.5% 7% 18%;
  }

  form.onboarding-book.ledger-v2 .ledger-page-half:has(> .ledger-chapter-illustration) {
    padding-right: 74px;
  }

  form.onboarding-book.ledger-v2 .ledger-chapter-illustration {
    width: 60px;
    height: 74px;
  }

  .ledger-page-navigation {
    right: 4%;
    bottom: 5.5%;
    left: 4%;
    grid-template-columns: 82px minmax(0, 1fr) 82px;
    gap: 5px;
  }

  .ledger-page-navigation p { padding: 4px 5px; font-size: 0.56rem; }
  .ledger-page-button { min-height: 34px; padding: 4px; font-size: 0.57rem; }
  .ledger-character-selection { grid-template-columns: 1fr; grid-template-rows: 46% 54%; gap: 5px; }
  form.onboarding-book.ledger-v2 .ledger-character-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ledger-character-detail { grid-template-columns: 1fr; padding: 5px; }
  .ledger-character-detail-art { display: none; }
  .ledger-character-detail p { margin-bottom: 4px; font-size: 0.58rem; }
  .ledger-choice-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-choice-facts div { grid-template-columns: 1fr; }
  form.onboarding-book.ledger-v2 .ledger-large-character { height: 105px; }
  form.onboarding-book.ledger-v2 .ledger-class-choice { min-height: 50px; padding: 4px; }
  .ledger-egg-sheet { width: 52px; height: 64px; }
  form.onboarding-book.ledger-v2 .ledger-companion-preview { height: 115px; }
}

/* Smooth parchment curl: content changes only while the page is edge-on. */
form.onboarding-book.ledger-v2 .ledger-page-turn {
  z-index: 24;
  top: 8%;
  bottom: 18%;
  left: 50%;
  width: 42.5%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  will-change: transform, filter, clip-path;
}

form.onboarding-book.ledger-v2 .ledger-page-turn::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(96deg, transparent 8%, rgba(255, 250, 224, 0.08) 36%, rgba(255, 255, 244, 0.72) 50%, rgba(102, 67, 30, 0.18) 63%, transparent 88%);
  opacity: 0;
  pointer-events: none;
}

form.onboarding-book.ledger-v2 .ledger-page-turn__front,
form.onboarding-book.ledger-v2 .ledger-page-turn__back {
  border-radius: 3px 17px 17px 3px;
  background:
    linear-gradient(90deg, rgba(92, 57, 24, 0.2), transparent 9%, transparent 86%, rgba(83, 50, 20, 0.2)),
    radial-gradient(circle at 72% 24%, rgba(255, 255, 248, 0.68), transparent 37%),
    linear-gradient(180deg, #f4e7c6, #ead6aa 52%, #f0dfba);
  box-shadow: inset 14px 0 22px rgba(86, 52, 21, 0.1), inset -7px 0 15px rgba(255, 252, 231, 0.3);
}

form.onboarding-book.ledger-v2 .ledger-page-turn__front {
  background:
    linear-gradient(90deg, rgba(67, 39, 15, 0.34), transparent 15%, rgba(255, 249, 222, 0.24) 68%, rgba(125, 82, 33, 0.2)),
    url("assets/ui/hearthvale-ledger-open-clean.webp?v=128") right center / 200% 100% no-repeat;
}

form.onboarding-book.ledger-v2 .ledger-page-turn__back {
  background:
    linear-gradient(270deg, rgba(67, 39, 15, 0.32), transparent 15%, rgba(255, 249, 222, 0.22) 68%, rgba(125, 82, 33, 0.18)),
    url("assets/ui/hearthvale-ledger-open-clean.webp?v=128") left center / 200% 100% no-repeat;
}

form.onboarding-book.ledger-v2 .ledger-page-turn__back {
  background:
    linear-gradient(270deg, rgba(67, 39, 15, 0.32), transparent 15%, rgba(255, 249, 222, 0.22) 68%, rgba(125, 82, 33, 0.18)),
    url("assets/ui/hearthvale-ledger-open-clean.webp?v=128") left center / 200% 100% no-repeat;
}

form.onboarding-book.ledger-v2 .ledger-turn-content {
  position: absolute;
  z-index: 2;
  inset: 14% 8% 13%;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #493c2a;
  pointer-events: none;
}

form.onboarding-book.ledger-v2 .ledger-turn-content :is(img, svg, canvas) {
  max-width: 100%;
}

form.onboarding-book.ledger-v2 .ledger-turn-content--full {
  display: block !important;
  inset: 14% 0 13%;
  width: 200%;
  padding: 0 8%;
}

form.onboarding-book.ledger-v2 .ledger-book-stage.is-turning-forward .ledger-turn-content--full {
  transform: translateX(-50%);
}

form.onboarding-book.ledger-v2 .ledger-book-stage.is-turning-backward .ledger-turn-content--full {
  transform: none;
}

form.onboarding-book.ledger-v2 .ledger-book-stage:is(.is-turning-forward, .is-turning-backward) .ledger-turn-content {
  animation: ledger-turn-content-face 900ms linear both;
}

@keyframes ledger-turn-content-face {
  0%, 47% { opacity: 1; }
  48%, 100% { opacity: 0; }
}

form.onboarding-book.ledger-v2 .ledger-book-stage.is-turning-forward .ledger-page-turn {
  display: block;
  animation: ledger-page-forward-smooth 900ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

form.onboarding-book.ledger-v2 .ledger-book-stage.is-turning-backward .ledger-page-turn {
  display: block;
  left: 7.5%;
  transform-origin: 100% 50%;
  animation: ledger-page-backward-smooth 900ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

form.onboarding-book.ledger-v2 .ledger-book-stage:is(.is-turning-forward, .is-turning-backward) .ledger-page-turn::after {
  animation: ledger-page-highlight-smooth 900ms ease-in-out both;
}

form.onboarding-book.ledger-v2 .ledger-book-stage:is(.is-turning-forward, .is-turning-backward) .ledger-page-content {
  animation: ledger-content-crossfade-smooth 900ms linear both;
}

@keyframes ledger-page-forward-smooth {
  0% { transform: rotateY(0deg) translateX(0) skewY(0deg) scaleX(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); filter: drop-shadow(-5px 2px 7px rgba(45, 27, 10, 0.08)); }
  12% { transform: rotateY(-11deg) translateX(-0.4%) skewY(-0.25deg) scaleX(0.997); clip-path: polygon(0 0, 98% 1%, 100% 50%, 98% 99%, 0 100%); filter: drop-shadow(-9px 3px 11px rgba(45, 27, 10, 0.13)); }
  27% { transform: rotateY(-38deg) translateX(-1.4%) skewY(-0.7deg) scaleX(0.975); clip-path: polygon(0 0, 94% 2%, 100% 50%, 94% 98%, 0 100%); filter: drop-shadow(-17px 5px 18px rgba(38, 22, 8, 0.2)); }
  43% { transform: rotateY(-76deg) translateX(-2.8%) skewY(-1deg) scaleX(0.92); clip-path: polygon(0 0, 87% 4%, 97% 50%, 87% 96%, 0 100%); filter: drop-shadow(-27px 7px 27px rgba(31, 18, 7, 0.29)); }
  50% { transform: rotateY(-90deg) translateX(-3.2%) skewY(-0.2deg) scaleX(0.88); clip-path: polygon(0 0, 82% 5%, 94% 50%, 82% 95%, 0 100%); filter: drop-shadow(-31px 8px 31px rgba(27, 16, 6, 0.34)); }
  58% { transform: rotateY(-107deg) translateX(-2.7%) skewY(0.8deg) scaleX(0.91); clip-path: polygon(0 0, 87% 4%, 97% 50%, 87% 96%, 0 100%); filter: drop-shadow(-25px 7px 26px rgba(31, 18, 7, 0.27)); }
  74% { transform: rotateY(-145deg) translateX(-1.2%) skewY(0.55deg) scaleX(0.972); clip-path: polygon(0 0, 95% 2%, 100% 50%, 95% 98%, 0 100%); filter: drop-shadow(-15px 4px 16px rgba(40, 24, 10, 0.17)); }
  89% { transform: rotateY(-173deg) translateX(-0.2%) skewY(0.15deg) scaleX(0.997); clip-path: polygon(0 0, 99% 1%, 100% 50%, 99% 99%, 0 100%); filter: drop-shadow(-7px 2px 9px rgba(40, 24, 10, 0.1)); }
  100% { transform: rotateY(-180deg) translateX(0) skewY(0deg) scaleX(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); filter: drop-shadow(4px 1px 7px rgba(40, 24, 10, 0.06)); }
}

@keyframes ledger-page-backward-smooth {
  0% { transform: rotateY(0deg) translateX(0) skewY(0deg) scaleX(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); filter: drop-shadow(5px 2px 7px rgba(45, 27, 10, 0.08)); }
  12% { transform: rotateY(11deg) translateX(0.4%) skewY(0.25deg) scaleX(0.997); clip-path: polygon(2% 1%, 100% 0, 100% 100%, 2% 99%, 0 50%); filter: drop-shadow(9px 3px 11px rgba(45, 27, 10, 0.13)); }
  27% { transform: rotateY(38deg) translateX(1.4%) skewY(0.7deg) scaleX(0.975); clip-path: polygon(6% 2%, 100% 0, 100% 100%, 6% 98%, 0 50%); filter: drop-shadow(17px 5px 18px rgba(38, 22, 8, 0.2)); }
  43% { transform: rotateY(76deg) translateX(2.8%) skewY(1deg) scaleX(0.92); clip-path: polygon(13% 4%, 100% 0, 100% 100%, 13% 96%, 3% 50%); filter: drop-shadow(27px 7px 27px rgba(31, 18, 7, 0.29)); }
  50% { transform: rotateY(90deg) translateX(3.2%) skewY(0.2deg) scaleX(0.88); clip-path: polygon(18% 5%, 100% 0, 100% 100%, 18% 95%, 6% 50%); filter: drop-shadow(31px 8px 31px rgba(27, 16, 6, 0.34)); }
  58% { transform: rotateY(107deg) translateX(2.7%) skewY(-0.8deg) scaleX(0.91); clip-path: polygon(13% 4%, 100% 0, 100% 100%, 13% 96%, 3% 50%); filter: drop-shadow(25px 7px 26px rgba(31, 18, 7, 0.27)); }
  74% { transform: rotateY(145deg) translateX(1.2%) skewY(-0.55deg) scaleX(0.972); clip-path: polygon(5% 2%, 100% 0, 100% 100%, 5% 98%, 0 50%); filter: drop-shadow(15px 4px 16px rgba(40, 24, 10, 0.17)); }
  89% { transform: rotateY(173deg) translateX(0.2%) skewY(-0.15deg) scaleX(0.997); clip-path: polygon(1% 1%, 100% 0, 100% 100%, 1% 99%, 0 50%); filter: drop-shadow(7px 2px 9px rgba(40, 24, 10, 0.1)); }
  100% { transform: rotateY(180deg) translateX(0) skewY(0deg) scaleX(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); filter: drop-shadow(-4px 1px 7px rgba(40, 24, 10, 0.06)); }
}

@keyframes ledger-page-highlight-smooth {
  0%, 12%, 88%, 100% { opacity: 0; transform: translateX(20%); }
  42% { opacity: 0.62; transform: translateX(4%); }
  50% { opacity: 0.9; transform: translateX(-4%); }
  60% { opacity: 0.48; transform: translateX(-15%); }
}

@keyframes ledger-content-crossfade-smooth {
  0%, 39% { opacity: 1; filter: blur(0); }
  47%, 53% { opacity: 0.03; filter: blur(0.8px); }
  62%, 100% { opacity: 1; filter: blur(0); }
}

@media (max-width: 820px) {
  form.onboarding-book.ledger-v2 .ledger-page-turn {
    top: 1.5%;
    bottom: 1.5%;
    left: 4%;
    width: 92%;
    transform-origin: 0 50%;
  }

  form.onboarding-book.ledger-v2 .ledger-book-stage.is-turning-backward .ledger-page-turn {
    left: 4%;
    transform-origin: 100% 50%;
  }
}

body.is-reduced-motion form.onboarding-book.ledger-v2 .ledger-page-turn,
body.is-reduced-motion form.onboarding-book.ledger-v2 .ledger-page-content {
  animation: none !important;
}

/* Keep live writing clear of the painted book borders and hide the atlas workboard below the cover. */
form.onboarding-book.ledger-v2 .ledger-book-stage {
  background: #050a12;
}

form.onboarding-book.ledger-v2 .ledger-book-stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18.5%;
  background: #050a12;
  pointer-events: none;
}

form.onboarding-book.ledger-v2 .ledger-book-stage::before {
  display: none;
}

form.onboarding-book.ledger-v2 .ledger-open-book-art {
  bottom: 10%;
  clip-path: polygon(3.5% 8%, 8% 5%, 45% 6%, 50% 8%, 55% 6%, 92% 5%, 96.5% 8%, 96.5% 93%, 93% 98%, 55% 99%, 50% 98.5%, 45% 99%, 7% 98%, 3.5% 93%);
}

form.onboarding-book.ledger-v2 .ledger-open-book-art img {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

form.onboarding-book.ledger-v2 .ledger-book-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 5.5%;
  left: 56.1%;
  width: 5.2%;
  height: 23.5%;
  background:
    linear-gradient(90deg, #d3b77f, #e2ca96 28%, #e2ca96 72%, #d3b77f);
  box-shadow: -3px 0 7px rgba(92, 59, 26, 0.06), 3px 0 7px rgba(92, 59, 26, 0.06);
  pointer-events: none;
}

form.onboarding-book.ledger-v2 .ledger-book-stage::after {
  display: none;
}

form.onboarding-book.ledger-v2 .ledger-page-content {
  inset: 18.5% 11.5% 18%;
}

form.onboarding-book.ledger-v2 .ledger-spread-heading {
  display: grid;
  grid-template-columns: 44% 44%;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  padding-inline: 3%;
  text-align: center;
}

form.onboarding-book.ledger-v2 .ledger-character-form-toggle {
  justify-self: center;
  width: min(220px, 100%);
  margin-top: 2px;
}

form.onboarding-book.ledger-v2 .ledger-character-form-toggle button {
  min-height: 34px;
  color: #263a55;
}

form.onboarding-book.ledger-v2 .ledger-page-half {
  padding-top: 2%;
  padding-right: 3%;
  padding-left: 3%;
}

form.onboarding-book.ledger-v2 .ledger-character-selection {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) 110px;
  gap: 8px;
  height: calc(100% - 92px);
}

form.onboarding-book.ledger-v2 .ledger-character-gallery {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
}

form.onboarding-book.ledger-v2 .ledger-character-choice {
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-height: 0;
}

form.onboarding-book.ledger-v2 .ledger-thumb-wrap {
  --ledger-thumb-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--ledger-thumb-height);
  min-height: var(--ledger-thumb-height);
  padding: 4px 2px;
  overflow: visible;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

form.onboarding-book.ledger-v2 .ledger-thumb-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

form.onboarding-book.ledger-v2 .ledger-character-detail {
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 9px;
  padding: 6px 9px;
  border-top: 1px solid rgba(139, 97, 39, 0.42);
  border-left: 0;
}

form.onboarding-book.ledger-v2 .ledger-character-detail > div:last-child {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
  column-gap: 10px;
  align-content: start;
}

form.onboarding-book.ledger-v2 .ledger-character-detail .eyebrow,
form.onboarding-book.ledger-v2 .ledger-character-detail h3,
form.onboarding-book.ledger-v2 .ledger-character-detail p {
  grid-column: 1;
}

form.onboarding-book.ledger-v2 .ledger-character-detail .ledger-choice-facts {
  grid-column: 2;
  grid-row: 1 / span 4;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="8"] .ledger-page-half {
  align-content: start;
  gap: 10px;
}

.ledger-motivation-section {
  border-top: 1px solid rgba(115, 77, 31, 0.48);
  border-bottom: 1px solid rgba(115, 77, 31, 0.32);
  padding: 14px 0;
}

.ledger-motivation-section p {
  margin: 8px 0 12px;
  color: #3e3020;
  line-height: 1.45;
}

.ledger-motivation-heading,
.ledger-motivation-heading > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ledger-motivation-heading > div {
  flex: 1;
}

.ledger-motivation-heading h4,
.ledger-recovery-protection h4 {
  margin: 0;
  color: #244f43;
  font-family: Georgia, serif;
  font-size: 1.05rem;
}

.ledger-motivation-heading strong {
  color: #6b3f1f;
  font-size: 0.88rem;
  text-transform: uppercase;
}

.ledger-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  cursor: pointer;
}

.ledger-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ledger-switch span {
  position: relative;
  width: 46px;
  height: 25px;
  flex: 0 0 auto;
  border: 1px solid #70512c;
  border-radius: 14px;
  background: #8c806b;
  box-shadow: inset 0 1px 3px rgba(42, 28, 13, 0.35);
}

.ledger-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #f7e7bd;
  box-shadow: 0 1px 3px rgba(43, 27, 9, 0.45);
  transition: transform 160ms ease;
}

.ledger-switch input:checked + span {
  background: #356f5d;
}

.ledger-switch input:checked + span::after {
  transform: translateX(21px);
}

.ledger-switch input:focus-visible + span {
  outline: 3px solid #245fa8;
  outline-offset: 3px;
}

.ledger-switch em {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ledger-recovery-protection {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(115, 77, 31, 0.38);
}

.ledger-protection-seal {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid #356f5d;
  border-radius: 50%;
  color: #356f5d;
  font-size: 1.2rem;
}

.ledger-recovery-protection p,
.ledger-recovery-protection ul {
  margin: 6px 0;
  color: #3e3020;
  line-height: 1.35;
}

.ledger-recovery-protection ul {
  padding-left: 18px;
}

.ledger-setting-status {
  min-height: 1.3em;
  margin: 8px 0 0;
  color: #265c4d;
  font-weight: 700;
}

form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="12"] .ledger-page-half:first-child {
  display: grid;
  grid-template-rows: auto auto 220px auto;
  align-content: start;
  gap: 4px;
  min-height: 0;
  overflow: hidden;
}

form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="12"] .ledger-large-character {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 220px;
}

form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="12"] .ledger-large-character img {
  width: 100%;
  height: 100%;
  max-width: 82%;
  max-height: 220px;
  object-fit: contain;
}

.ledger-companion-pair {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 1px;
  height: 66px;
}

.ledger-companion-pair .ledger-egg-sheet {
  width: 42px;
  height: 54px;
  margin: 0;
}

.ledger-companion-art {
  display: block;
  width: 48px;
  height: 62px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 4px 4px rgba(57, 36, 16, 0.2));
}

.ledger-companion-art--egg {
  width: 54px;
  height: 60px;
}

.ledger-pet-sheet {
  display: block;
  width: 52px;
  height: 64px;
  background-image: url("assets/town/reference/willowgrove-starter-pets-companions-sheet-003.png?v=121");
  background-size: 800% auto;
  background-repeat: no-repeat;
  filter: drop-shadow(0 6px 5px rgba(57, 36, 16, 0.24));
}

.ledger-pet-sheet--dragon { background-position: 34.5% 14.5%; }
.ledger-pet-sheet--slime { background-position: 34.5% 37.5%; }
.ledger-pet-sheet--frog,
.ledger-pet-sheet--golem { background-position: 34.5% 60%; }
.ledger-pet-sheet--sprite { background-position: 34.5% 82%; }
.ledger-pet-sheet--troll { background-position: 88% 32%; }
.ledger-pet-sheet--fairy { background-position: 88% 55%; }
.ledger-pet-sheet--unicorn { background-position: 88% 77%; }

form.onboarding-book.ledger-v2 .ledger-companion-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: end center;
  height: 170px;
}

form.onboarding-book.ledger-v2 .ledger-companion-preview .ledger-pet-sheet {
  width: 150px;
  height: 146px;
}

form.onboarding-book.ledger-v2 .ledger-companion-preview > img {
  width: min(180px, 78%);
  height: 142px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 7px 7px rgba(57, 36, 16, 0.24));
}

form.onboarding-book.ledger-v2 .ledger-companion-preview small {
  color: #6f5530;
  font-weight: 800;
}

form.onboarding-book.ledger-v2 .ledger-page-turn__front,
form.onboarding-book.ledger-v2 .ledger-page-turn__back {
  border: 1px solid rgba(153, 111, 47, 0.58);
  background:
    radial-gradient(ellipse at 72% 20%, rgba(255, 251, 229, 0.86), transparent 35%),
    radial-gradient(ellipse at 18% 78%, rgba(159, 111, 50, 0.2), transparent 52%),
    repeating-linear-gradient(8deg, rgba(112, 77, 35, 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(78, 47, 20, 0.3), rgba(244, 229, 190, 0.95) 12%, #f0dfb8 64%, #e0c58f 100%);
  box-shadow:
    inset 18px 0 28px rgba(66, 39, 16, 0.2),
    inset -9px 0 18px rgba(255, 252, 232, 0.46),
    0 0 0 1px rgba(233, 204, 130, 0.24);
}

form.onboarding-book.ledger-v2 .ledger-page-turn__back {
  background:
    radial-gradient(ellipse at 28% 20%, rgba(255, 250, 226, 0.82), transparent 35%),
    radial-gradient(ellipse at 82% 78%, rgba(144, 95, 40, 0.18), transparent 52%),
    repeating-linear-gradient(-8deg, rgba(112, 77, 35, 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(270deg, rgba(78, 47, 20, 0.28), rgba(242, 225, 184, 0.95) 12%, #ecd8ad 64%, #dcc18b 100%);
}

@media (max-width: 1000px) {
  form.onboarding-book.ledger-v2 .ledger-character-selection {
    grid-template-rows: minmax(0, 1fr) 150px;
  }

  form.onboarding-book.ledger-v2 .ledger-character-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  form.onboarding-book.ledger-v2 .ledger-book-stage {
    background:
      linear-gradient(90deg, rgba(122, 87, 40, 0.16), transparent 9%, transparent 91%, rgba(122, 87, 40, 0.16)),
      radial-gradient(circle at 50% 10%, rgba(255, 251, 226, 0.72), transparent 45%),
      #efdfb9;
  }

  form.onboarding-book.ledger-v2 .ledger-book-stage::before { display: none; }
  form.onboarding-book.ledger-v2 .ledger-book-stage::after { display: none; }
  form.onboarding-book.ledger-v2 .ledger-page-content { inset: 11.5% 7% 18%; }
  form.onboarding-book.ledger-v2 .ledger-character-selection { grid-template-rows: minmax(0, 1fr) 170px; }
  form.onboarding-book.ledger-v2 .ledger-character-detail { grid-template-columns: 1fr; }
  form.onboarding-book.ledger-v2 .ledger-character-detail > div:last-child { grid-template-columns: 1fr; }
  form.onboarding-book.ledger-v2 .ledger-character-detail .ledger-choice-facts { grid-column: 1; grid-row: auto; }
}
/* Workout camera prototype */
body.is-camera-workout {
  overflow: hidden;
}

body.is-camera-workout #screen-workout {
  display: block !important;
}

.workout-camera-shell {
  position: fixed;
  inset: 0;
  z-index: 10000;
  min-height: 100dvh;
  overflow: hidden;
  background: #07090b;
  color: #fff5d2;
  isolation: isolate;
}

.workout-camera-shell[hidden],
.camera-calibration[hidden],
.workout-game-hud[hidden],
.workout-results[hidden] {
  display: none;
}

.camera-legacy-fields[hidden],
.camera-panel #startSetButton,
.camera-panel #resetRepButton,
.camera-panel #stopCameraButton,
.camera-panel .rep-readout,
.camera-panel .camera-session-notes {
  display: none !important;
}

.workout-camera-bg,
.workout-camera-video,
.workout-pose-canvas,
.workout-camera-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.workout-camera-bg {
  z-index: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
}

.workout-camera-video {
  z-index: 1;
  object-fit: cover;
  transform: scaleX(-1);
}

.workout-camera-shell[data-background="real_camera"] .workout-camera-video {
  opacity: 1;
}

.workout-camera-shell:not([data-background="real_camera"]) .workout-camera-video {
  width: min(64vw, 760px);
  height: 74vh;
  inset: 15vh auto auto 50%;
  border: 1px solid rgba(239, 206, 133, 0.45);
  border-radius: 48% 48% 8% 8%;
  opacity: 0.8;
  object-fit: cover;
  transform: translateX(-50%) scaleX(-1);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

.workout-pose-canvas {
  z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(174, 111, 255, 0.72));
}

.workout-camera-shade {
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 32%, rgba(2, 4, 7, 0.2) 72%, rgba(2, 4, 7, 0.68) 100%),
    linear-gradient(to bottom, rgba(2, 4, 7, 0.34), transparent 24%, transparent 70%, rgba(2, 4, 7, 0.55));
}

.camera-calibration {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(300px, 0.6fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(24px, 6vw, 90px);
  background: rgba(3, 7, 10, 0.3);
}

.calibration-guide {
  position: relative;
  justify-self: center;
  width: min(42vw, 380px);
  aspect-ratio: 0.5;
  border: 2px solid rgba(211, 184, 255, 0.7);
  border-radius: 48% 48% 12% 12%;
  background:
    radial-gradient(ellipse at 50% 88%, rgba(181, 116, 255, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(176, 128, 255, 0.07), rgba(82, 44, 128, 0.14));
  box-shadow: 0 0 32px rgba(155, 91, 232, 0.28), inset 0 0 32px rgba(155, 91, 232, 0.12);
}

.calibration-guide::before,
.calibration-guide::after,
.calibration-guide span {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.calibration-guide::before {
  top: 10%;
  width: 48%;
  height: 76%;
  border: 1px dashed rgba(232, 219, 255, 0.62);
  border-radius: 45% 45% 38% 38%;
  background: linear-gradient(180deg, rgba(214, 194, 255, 0.2), rgba(174, 111, 255, 0.1));
  box-shadow: inset 0 0 28px rgba(214, 194, 255, 0.18);
}

.calibration-guide::after {
  bottom: 5%;
  width: 68%;
  height: 12px;
  border-radius: 999px;
  background: rgba(214, 194, 255, 0.38);
  box-shadow: 0 0 18px rgba(214, 194, 255, 0.34);
}

.calibration-guide span {
  top: 18%;
  width: 1px;
  height: 66%;
  background: linear-gradient(180deg, transparent, rgba(232, 219, 255, 0.55), transparent);
  box-shadow:
    -72px 122px 0 rgba(232, 219, 255, 0.42),
    72px 122px 0 rgba(232, 219, 255, 0.42),
    -36px 78px 0 rgba(232, 219, 255, 0.34),
    36px 78px 0 rgba(232, 219, 255, 0.34);
}

.calibration-copy,
.workout-results {
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid rgba(232, 196, 116, 0.54);
  border-radius: 6px;
  background: linear-gradient(150deg, rgba(8, 16, 22, 0.94), rgba(23, 24, 28, 0.92));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(134, 94, 38, 0.24);
}

.calibration-copy h2,
.workout-results h2 { margin: 4px 0 10px; color: #fff3cf; }
.calibration-copy p { color: rgba(255, 244, 215, 0.82); }
.calibration-copy button { width: 100%; margin-top: 10px; }
.calibration-meter { height: 8px; overflow: hidden; border: 1px solid #ad7c31; background: #14171a; }
.calibration-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #8364c5, #b9ef8f); transition: width 180ms ease; }

.workout-game-hud {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.workout-camera-shell.is-calibrating .workout-rep-counter,
.workout-camera-shell.is-calibrating .workout-hud-actions,
.workout-camera-shell.is-calibrating .workout-points,
.workout-camera-shell.is-calibrating .workout-timer,
.workout-camera-shell.is-calibrating .workout-feedback,
.workout-camera-shell.is-calibrating .manual-rep-button {
  display: none;
}

.workout-camera-shell.is-calibrating .tracking-pill {
  z-index: 9;
}

.workout-camera-shell.is-calibrating .workout-pet-coach,
.workout-camera-shell.is-calibrating .workout-hero-demo {
  z-index: 7;
  opacity: 0.96;
}

.workout-game-hud button { pointer-events: auto; }

.tracking-pill,
.workout-points,
.workout-timer {
  position: absolute;
  top: clamp(14px, 3vh, 30px);
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 8px 16px;
  border: 1px solid #b98a41;
  background: rgba(7, 13, 17, 0.9);
  color: #f9e8b8;
  font-weight: 850;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.tracking-pill { left: clamp(14px, 3vw, 38px); }
.workout-pose-debug {
  position: absolute;
  z-index: 9;
  top: 145px;
  left: clamp(14px, 3vw, 38px);
  margin: 0;
  padding: 10px;
  border: 1px solid #8466bd;
  background: rgba(5, 7, 11, .9);
  color: #dbcaff;
  font: 12px/1.45 monospace;
}
.tracking-pill[data-status="good"] { color: #b8f28e; border-color: #789943; }
.tracking-pill[data-status="lost"] { color: #ffad91; border-color: #b64d31; }
.workout-points { right: clamp(14px, 3vw, 38px); top: 100px; }
.workout-timer { left: clamp(14px, 3vw, 38px); top: 82px; }

.workout-rep-counter {
  position: absolute;
  top: clamp(16px, 3vh, 34px);
  left: 50%;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  gap: 10px;
  min-width: min(440px, 48vw);
  padding: 14px 32px 9px;
  border: 2px solid #bd8a3d;
  background: linear-gradient(180deg, rgba(12, 16, 20, 0.97), rgba(22, 18, 18, 0.95));
  color: #f8e8b9;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 10px 35px rgba(0,0,0,.52), inset 0 0 0 3px rgba(104, 68, 28, .36);
}

.workout-rep-counter > span { font: 800 clamp(1rem, 2vw, 1.6rem) Georgia, serif; }
.workout-rep-counter strong { color: #fff2ca; font: 800 clamp(3rem, 7vw, 6rem)/.8 Georgia, serif; }
.workout-rep-counter small { font: 750 clamp(1.2rem, 2.4vw, 2rem) Georgia, serif; }
.workout-rep-counter em { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid rgba(190, 139, 62, .5); font-style: normal; letter-spacing: .08em; }
.workout-rep-counter strong.is-counted { animation: hud-rep-pop 420ms ease-out; }

.workout-hud-actions {
  position: absolute;
  top: clamp(14px, 3vh, 30px);
  right: clamp(14px, 3vw, 38px);
  display: flex;
}

.workout-hud-actions button,
.workout-hero-demo button {
  min-width: 54px;
  min-height: 46px;
  border: 1px solid #b98a41;
  border-radius: 0;
  background: rgba(8, 13, 17, .9);
  color: #ffe9af;
  font-weight: 800;
}

.workout-feedback {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4vh, 48px);
  width: min(620px, 58vw);
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 12px 26px;
  border: 2px solid #b98a41;
  background: rgba(7, 13, 17, .93);
  color: #fff2cb;
  font: 700 clamp(.95rem, 1.6vw, 1.25rem) Georgia, serif;
  text-align: center;
  transform: translateX(-50%);
}

.workout-pet-coach,
.workout-hero-demo {
  position: absolute;
  bottom: clamp(20px, 3vh, 38px);
  display: grid;
  align-items: end;
  width: clamp(150px, 19vw, 260px);
}

.workout-pet-coach { left: clamp(18px, 3vw, 44px); }
.workout-hero-demo { right: clamp(18px, 3vw, 44px); justify-items: end; }
.workout-pet-coach::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -8%;
  bottom: 8%;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(164, 116, 225, .48), rgba(88, 49, 132, .15) 58%, transparent 72%);
  filter: blur(3px);
}
.workout-pet-coach img { position: relative; z-index: 1; width: 70%; max-height: 220px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 9px rgba(226, 201, 255, .9)) drop-shadow(0 12px 8px rgba(0,0,0,.6)); }
.workout-pet-coach p { margin: -10px 0 0; padding: 10px 12px; border: 1px solid #b98a41; background: rgba(8,13,17,.92); color: #fff0c5; font-size: .82rem; }
.camera-hero-sprite {
  position: relative;
  width: 82%;
  height: min(310px, 34vh);
  isolation: isolate;
  filter: drop-shadow(0 14px 12px rgba(0,0,0,.68));
}

.camera-hero-frame {
  position: absolute;
  inset: auto 0 0 auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  opacity: 0;
  transform-origin: 50% 94%;
  animation: camera-hero-frame-cycle 2.2s steps(1, end) infinite;
}

.camera-hero-frame.frame-stand { opacity: 1; transform: translateY(0) rotate(0deg); }
.camera-hero-frame.frame-ready { animation-delay: .36s; transform: translateY(4px) rotate(-1deg); }
.camera-hero-frame.frame-descent { animation-delay: .74s; transform: translateY(16px) rotate(-4deg); }
.camera-hero-frame.frame-bottom { animation-delay: 1.1s; transform: translateY(28px) rotate(-7deg); }
.camera-hero-frame.frame-rise { animation-delay: 1.52s; transform: translateY(14px) rotate(-3deg); }

#cameraHeroImage {
  display: none;
}

.workout-hero-demo strong { margin-top: -18px; padding: 7px 12px; border: 1px solid #b98a41; background: #091015; color: #fff0c5; }
.workout-hero-demo.is-slow .camera-hero-frame { animation-duration: 4s; }
.workout-hero-demo.is-replaying .camera-hero-frame { animation-duration: 1.6s; }
.workout-pet-coach img.is-cheering { animation: pet-rep-cheer 620ms ease-out; }

.manual-rep-button {
  position: absolute;
  left: 50%;
  bottom: 110px;
  min-width: 150px;
  min-height: 70px;
  border: 2px solid #d5a54f;
  background: #1b5c41;
  color: #fff7d6;
  font-size: 1.4rem;
  font-weight: 900;
  transform: translateX(-50%);
}

.workout-results {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  width: min(680px, 92vw);
  transform: translate(-50%, -50%);
}

.workout-results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 18px 0; background: rgba(196, 151, 76, .45); }
.workout-results-grid article { padding: 14px; background: #11191d; }
.workout-results-grid span,
.workout-results-grid strong { display: block; }
.workout-results-grid span { color: #c8b98f; font-size: .75rem; }
.workout-results-grid strong { color: #fff2c8; font-size: 1.35rem; }
.workout-results > button { width: 100%; }

.workout-camera-shell.is-ui-hidden .workout-game-hud > :not(.workout-hud-actions) { opacity: 0; pointer-events: none; }

@keyframes hud-rep-pop { 50% { color: #d5ff9e; transform: scale(1.2); text-shadow: 0 0 24px #84cc56; } }
@keyframes pet-rep-cheer { 50% { transform: translateY(-18px) rotate(-4deg) scale(1.08); } }
@keyframes camera-hero-frame-cycle {
  0%, 19.9% { opacity: 1; }
  20%, 100% { opacity: 0; }
}

@media (max-width: 760px) {
  .camera-calibration { grid-template-columns: 1fr; padding: 18px; overflow: auto; }
  .calibration-guide { width: min(48vw, 220px); }
  .calibration-copy { padding: 18px; }
  .workout-rep-counter { top: 68px; min-width: 230px; padding: 10px 18px 7px; }
  .workout-rep-counter strong { font-size: 3.2rem; }
  .workout-hud-actions { left: auto; right: 10px; flex-direction: column; }
  .workout-hud-actions button { min-width: 48px; min-height: 44px; padding: 4px; font-size: .67rem; }
  .tracking-pill { top: 10px; left: 10px; font-size: .7rem; }
  .workout-points { top: 160px; right: 10px; font-size: .7rem; }
  .workout-points { top: 106px; right: auto; left: 10px; }
  .workout-timer { top: 58px; left: 10px; font-size: .72rem; }
  .workout-feedback { bottom: 18px; width: 88vw; min-height: 50px; padding: 9px 100px; font-size: .8rem; }
  .workout-pet-coach { left: 8px; bottom: 72px; width: 120px; }
  .workout-pet-coach img { width: 82%; max-height: 130px; }
  .workout-pet-coach p { display: none; }
  .workout-hero-demo { right: 8px; bottom: 72px; width: 120px; }
  .camera-hero-sprite { height: 165px; }
  .workout-hero-demo strong { font-size: .65rem; }
  .workout-hero-demo button { min-width: 48px; min-height: 36px; padding: 3px; font-size: .6rem; }
  .workout-camera-shell:not([data-background="real_camera"]) .workout-camera-video { width: 88vw; height: 70vh; }
  .workout-results-grid { grid-template-columns: repeat(2, 1fr); }
  .manual-rep-button { bottom: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .camera-hero-frame,
  .workout-pet-coach img,
  .workout-rep-counter strong { animation: none !important; }
}

#screen-log.has-inn-interior.is-active > .inn-room-interior {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Keep V1.4 room panels authoritative over the legacy keeper-fold rules. */
#screen-today .guild-room-panel[hidden] { display: none !important; }
#screen-today .guild-room-panel:not([hidden]) { display: block !important; }

/* V1.2 must win over every retired Guild rule above. */
body.is-guild-active #screen-today .guild-hotspot-dispatch {
  left: auto;
  right: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.is-guild-active #screen-today .guild-hotspot-dispatch small {
  display: block;
  position: static;
  color: #f7e5b4;
}
body.is-guild-active #screen-today .guild-hotspot-dispatch small::before { content: "Dispatch "; }

@media (max-width: 720px) {
  body.is-guild-active .topbar,
  body.is-training-active .topbar {
    transform: none;
    translate: -50% 0;
  }
  body.is-guild-active #screen-today .guild-hotspot-dispatch {
    left: 3%;
    right: auto;
    bottom: 15%;
  }
  body.is-guild-active #screen-today .guild-hotspot-exit {
    left: auto;
    right: 2%;
    bottom: 15%;
  }
}

/* Unified Adventure Guild and Ledger repair V1.2. */
body.is-guild-active {
  overflow: hidden;
  background: #090d0c;
}

body.is-guild-active .app-shell,
body.is-guild-active main,
body.is-guild-active #screen-today.is-active {
  width: 100vw;
  max-width: none;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.is-guild-active #screen-today.is-active {
  position: fixed;
  inset: 0;
}

#screen-today .guild-room-v14,
#screen-today #guildRoomStage {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#screen-today #guildRoomStage {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

#screen-today .guild-room-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center 54%;
}

#screen-today .guild-reception-group {
  --guild-x: 51%;
  --guild-y: 5%;
  --guild-w: 40%;
  --guild-h: 69%;
  z-index: 5;
  left: var(--guild-x);
  bottom: var(--guild-y);
  width: var(--guild-w);
  height: var(--guild-h);
  transform: translateX(-50%);
  pointer-events: none;
}

#screen-today .guild-reception-group .guild-hotspot,
#screen-today .guild-reception-group .guild-desk-object { pointer-events: auto; }

#screen-today .guild-reception-group .guild-hotspot-receptionist {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 18%;
  width: 40%;
  height: 78%;
  transform: translateX(-50%);
}

#screen-today .guild-reception-group .guild-receptionist-sprite {
  width: 100%;
  height: 100%;
  background-position: bottom center;
  background-size: contain;
}

#screen-today .guild-desk-object {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 42%;
  transform: translateX(-50%);
}

#screen-today .guild-desk-object .guild-reception-desk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: bottom center;
  background-size: contain;
  background-repeat: no-repeat;
}

#screen-today .guild-desk-top-props,
#screen-today .guild-desk-front-props { position: absolute; inset: 0; }
#screen-today .guild-desk-top-props { z-index: 4; }
#screen-today .guild-desk-front-props { z-index: 5; pointer-events: none; }

#screen-today .guild-desk-object .guild-hotspot-registry { left: 43%; top: 2%; bottom: auto; width: 20%; height: 29%; }
#screen-today .guild-desk-object .guild-hotspot-bell { left: 22%; top: 5%; bottom: auto; width: 8%; height: 20%; }
#screen-today .guild-desk-object .guild-hotspot-bucket { left: auto; right: 8%; top: -8%; bottom: auto; width: 20%; height: 43%; }
#screen-today .guild-desk-object .guild-quill-prop { position: absolute; left: 36%; top: -1%; bottom: auto; width: 9%; height: 31%; }
#screen-today .guild-desk-object .guild-mira-nameplate { position: absolute; left: 50%; bottom: 8%; width: 24%; height: 20%; transform: translateX(-50%); }

#screen-today .guild-desk-object .guild-room-prop::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 15%;
  right: 15%;
  bottom: 2%;
  height: 12%;
  border-radius: 50%;
  background: rgba(35, 20, 10, 0.3);
  filter: blur(3px);
}

#screen-today .guild-hotspot-board {
  --guild-x: 81%;
  --guild-y: 56%;
  --guild-w: 24%;
  --guild-h: 32%;
  top: auto;
  right: auto;
  left: var(--guild-x);
  bottom: var(--guild-y);
  width: var(--guild-w);
  height: var(--guild-h);
  transform: translate(-50%, 50%);
}

#screen-today .guild-hotspot-week-ledger {
  --guild-x: 16%;
  --guild-y: 58%;
  --guild-w: 18%;
  --guild-h: 25%;
  z-index: 4;
  left: var(--guild-x);
  bottom: var(--guild-y);
  width: var(--guild-w);
  height: var(--guild-h);
  transform: translate(-50%, 50%);
  border: 0;
  background: transparent;
  color: #f1ddb0;
}

#screen-today .guild-week-ledger-art {
  position: absolute;
  inset: 0;
  border: 0;
  background: url("assets/adventure-guild/layered/quest-board/guild-week-ledger-board.png?v=190") center / contain no-repeat;
  box-shadow: none;
}

#screen-today .guild-standings-title {
  position: absolute;
  z-index: 2;
  top: 1.5%;
  left: 2%;
  right: 2%;
  min-height: 26%;
  display: grid;
  place-items: center;
  border: 0;
  background:
    linear-gradient(180deg, rgba(91, 55, 30, 0.98), rgba(43, 25, 15, 0.99)),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(235, 188, 99, 0.06) 6px);
  color: #f0d590;
  box-shadow: inset 0 -1px #b88945, inset 0 -3px rgba(20, 10, 6, 0.34);
  font: 700 clamp(0.52rem, 0.78vw, 0.82rem)/1 Georgia, serif;
  text-transform: uppercase;
  text-shadow: 0 1px #160c07;
}

#screen-today .guild-week-ledger-summary {
  position: absolute;
  inset: 27% 10.5% 9.5%;
  display: grid;
  align-content: stretch;
  gap: 0;
  padding: 5px 8px 6px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(28, 17, 11, 0.98), rgba(62, 38, 22, 0.98) 48%, rgba(30, 18, 11, 0.98)),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(220, 174, 91, 0.05) 8px);
  color: #dfcca3;
  box-shadow: inset 0 6px 10px rgba(12, 6, 3, 0.22);
  text-align: left;
  text-shadow: 0 1px #120a06;
}
#screen-today .guild-week-ledger-summary > strong { display: none; }
#screen-today .guild-week-ledger-summary small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  color: #dfcca3;
  min-width: 0;
  min-height: 0;
  padding: 1px 2px;
  border-bottom: 1px solid rgba(196, 145, 70, 0.3);
  font-size: clamp(0.42rem, 0.57vw, 0.62rem);
}
#screen-today .guild-week-ledger-summary small:last-child { border-bottom: 0; }
#screen-today .guild-week-ledger-summary small > span,
#screen-today .guild-week-ledger-summary b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#screen-today .guild-week-ledger-summary b {
  max-width: 46%;
  color: #f0d590;
  font-family: Georgia, serif;
  font-size: 1.08em;
}

#screen-today .guild-hotspot-week-ledger:is(:hover, :focus-visible, .is-keyboard-focus) .guild-week-ledger-art {
  outline: 3px solid #e6cb86;
  outline-offset: 4px;
  box-shadow: inset 0 0 22px #050807, 0 0 24px rgba(239, 204, 119, 0.76);
}

#screen-today .guild-hotspot-dispatch { left: 4%; right: auto; bottom: 12%; }

.guild-scroll-dialog {
  position: fixed;
  inset: 0;
  z-index: 240;
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: clamp(12px, 3vw, 38px);
  border: 0;
  background: transparent;
  overflow: hidden;
}
.guild-scroll-dialog::backdrop { background: rgba(5, 8, 7, 0.66); backdrop-filter: blur(2px); }
.guild-scroll-dialog[open] { display: grid; place-items: center; }

.guild-scroll {
  position: relative;
  width: min(760px, 94vw);
  max-height: 84svh;
  padding: 30px 18px;
  overflow: hidden;
  color: #302317;
  background:
    linear-gradient(90deg, rgba(112, 72, 30, 0.16), transparent 8%, transparent 92%, rgba(112, 72, 30, 0.16)),
    #ead5a4;
  border: 2px solid #8d622d;
  border-radius: 5px;
  box-shadow: inset 0 0 30px rgba(90, 56, 20, 0.22), 0 24px 70px rgba(0, 0, 0, 0.66);
}
.guild-scroll::before,
.guild-scroll::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: -1%;
  width: 102%;
  height: 24px;
  border: 2px solid #8c602b;
  border-radius: 50%;
  background: linear-gradient(#f0ddb0, #b98c51 48%, #e8cf9b 52%);
  box-shadow: 0 5px 9px rgba(55, 30, 10, 0.34);
}
.guild-scroll::before { top: 0; }
.guild-scroll::after { bottom: 0; transform: rotate(180deg); }

.guild-scroll-body {
  max-height: calc(84svh - 60px);
  padding: 2px 12px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#screen-today .guild-scroll-dialog .guild-room-panel,
#screen-today .guild-scroll-dialog .guild-room-panel {
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  margin: 0;
  padding: 0 8px 14px;
  border: 0;
  border-radius: 0;
  background-color: transparent !important;
  box-shadow: none;
  overflow: visible;
  color: #302317;
}

#screen-today .guild-scroll-dialog .guild-room-panel > header {
  position: sticky;
  z-index: 5;
  top: 0;
  margin: 0 0 14px;
  padding: 9px 4px 10px;
  background: rgba(234, 213, 164, 0.97);
  border-bottom: 1px solid rgba(111, 73, 29, 0.42);
}
.guild-scroll-dialog .guild-panel-close { flex: 0 0 44px; }
.guild-scroll-dialog .guild-quest-list,
.guild-scroll-dialog .guild-board-columns,
.guild-scroll-dialog .guild-allocation-quest-list { overflow: visible; max-height: none; }
.guild-scroll-dialog .guild-board-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guild-scroll-dialog .guild-board-columns > section { min-height: 0; padding: 18px; background-color: rgba(249, 237, 203, 0.66) !important; }

.guild-weekly-status-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.guild-weekly-status-summary span { padding: 10px 6px; border: 1px solid rgba(106, 70, 28, 0.42); text-align: center; }
.guild-weekly-status-summary small,
.guild-weekly-status-summary strong { display: block; }
.guild-weekly-status-summary p { grid-column: 1 / -1; }
.guild-weekly-breakdown p { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(106, 70, 28, 0.28); }
.guild-scroll-actions { position: sticky; bottom: -18px; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; padding: 12px 0 4px; background: linear-gradient(transparent, #ead5a4 24%); }

.guild-quest-story { max-width: 66ch; margin: 0 auto; }
.guild-quest-story h3 { margin-bottom: 2px; font-size: clamp(1.45rem, 4vw, 2.15rem); }
.guild-quest-story h4 { margin: 20px 0 5px; color: #235044; font-family: Georgia, serif; }
.guild-quest-subtitle { margin-top: 0; color: #6d4b28; font-style: italic; }
.guild-quest-hook { padding: 12px; border-left: 4px solid #95652c; background: rgba(255, 245, 214, 0.55); font-weight: 700; }
.guild-quest-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.guild-quest-meta div { padding: 8px; border-bottom: 1px solid rgba(104, 67, 28, 0.35); }
.guild-recovery-note { margin-top: 20px; padding: 12px; border: 1px solid #477664; background: rgba(221, 237, 213, 0.55); }

form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="9"] .ledger-page-half { align-content: start; gap: 12px; }
.ledger-account-data-summary,
.ledger-start-over-section { padding-top: 12px; border-top: 1px solid rgba(111, 73, 29, 0.4); }
.ledger-account-data-summary dl { margin: 8px 0; }
.ledger-account-data-summary dl div { display: grid; grid-template-columns: 35% minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(111, 73, 29, 0.24); }
.ledger-account-actions,
.ledger-reset-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ledger-account-actions button,
.ledger-reset-actions button { max-width: 100%; white-space: normal; }

.ledger-reset-confirmation {
  position: absolute;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 12, 16, 0.78);
}
.ledger-reset-confirmation[hidden] { display: none; }
.ledger-reset-parchment {
  width: min(650px, 94vw);
  max-height: 88svh;
  overflow-y: auto;
  padding: clamp(22px, 5vw, 46px);
  border: 2px solid #9d7436;
  background: #ecd9aa;
  color: #342619;
  box-shadow: inset 0 0 30px rgba(85, 52, 18, 0.24), 0 24px 70px rgba(0, 0, 0, 0.65);
}
.ledger-reset-parchment h2 { color: #672c27; font-family: Georgia, serif; }
.ledger-reset-ack { display: flex; gap: 10px; align-items: start; margin: 18px 0; padding: 12px; border: 1px solid #8f6533; }
.ledger-reset-ack input { width: 22px; height: 22px; flex: 0 0 auto; }
#ledgerResetStatus:not(:empty) { margin-top: 14px; color: #762d27; font-weight: 700; }

@media (max-width: 720px) {
  body.is-guild-active #screen-today.is-active { width: 100vw; margin: 0; }
  #screen-today .guild-room-background { background-position: 55% center; }
  #screen-today .guild-reception-group { --guild-x: 44%; --guild-y: 7%; --guild-w: 72%; --guild-h: 64%; }
  #screen-today .guild-hotspot-board { --guild-x: 82%; --guild-y: 63%; --guild-w: 32%; --guild-h: 25%; }
  #screen-today .guild-hotspot-week-ledger { --guild-x: 15%; --guild-y: 66%; --guild-w: 25%; --guild-h: 20%; }
  #screen-today .guild-hotspot-dispatch { left: 2%; bottom: 12%; width: 29%; }
  #screen-today .guild-hotspot-exit { right: 0; }
  #screen-today .guild-mira-reaction { left: 4%; bottom: 39%; width: 65%; }
  .guild-scroll-dialog { padding: 6px; }
  .guild-scroll { width: 98vw; max-height: 92svh; padding: 26px 8px; }
  .guild-scroll-body { max-height: calc(92svh - 52px); padding-inline: 8px; }
  .guild-scroll-dialog .guild-board-columns { grid-template-columns: 1fr; }
  .guild-weekly-status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guild-weekly-status-summary span:last-of-type { grid-column: 1 / -1; }
  .guild-weekly-breakdown p { display: grid; gap: 3px; }
  .ledger-account-actions,
  .ledger-reset-actions { display: grid; grid-template-columns: 1fr; }
  .ledger-account-actions button,
  .ledger-reset-actions button { width: 100%; }
  .ledger-reset-confirmation { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .guild-scroll-dialog::backdrop { backdrop-filter: none; }
}

/* Adventure Guild layered room and bell handoff V1.0. */
#screen-today .guild-room-v14 {
  min-height: max(690px, calc(100svh - 72px));
  background: #20170f;
}

#screen-today .guild-room-v14 .guild-interior-scene {
  isolation: isolate;
  overflow: hidden;
  background: #25190f;
}

#screen-today .guild-room-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/adventure-guild/layered/backgrounds/guild-hall-empty.png?v=171") center / cover no-repeat;
}

#screen-today .guild-room-object { position: absolute; }
#screen-today .guild-object-art,
#screen-today .guild-receptionist-sprite,
#screen-today .guild-reception-desk,
#screen-today .guild-quill-prop,
#screen-today .guild-mira-nameplate {
  display: block;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

#screen-today .guild-hotspot {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

#screen-today .guild-hotspot:is(:hover, :focus, :focus-visible, [aria-pressed="true"]) {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

#screen-today .guild-hotspot-registry:is(:hover, :focus, :focus-visible),
#screen-today .guild-hotspot-bucket:is(:hover, :focus, :focus-visible),
#screen-today .guild-hotspot-board:is(:hover, :focus, :focus-visible),
#screen-today .guild-hotspot-dispatch:is(:hover, :focus, :focus-visible) {
  outline: 0;
  outline-offset: 0;
  background: transparent;
  box-shadow: none;
}

#screen-today .guild-hotspot:is(:hover, :focus, :focus-visible, [aria-pressed="true"]) .guild-object-art,
#screen-today .guild-hotspot.is-keyboard-focus .guild-object-art,
#screen-today .guild-hotspot-receptionist:is(:hover, :focus, :focus-visible) .guild-receptionist-sprite {
  filter: drop-shadow(0 0 5px #fff2b0) drop-shadow(0 0 15px rgba(88, 216, 177, 0.92));
}

#screen-today .guild-hotspot:is(:focus, :focus-visible)::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: -30px;
  z-index: 20;
  width: max-content;
  max-width: 230px;
  min-width: 190px;
  translate: -50% 0;
  padding: 5px 9px;
  border: 1px solid #f0d793;
  border-radius: 3px;
  background: rgba(20, 16, 12, 0.95);
  color: #fff4cd;
  font-size: 0.76rem;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

#screen-today .guild-hotspot.is-keyboard-focus::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: -30px;
  z-index: 20;
  width: max-content;
  max-width: 230px;
  min-width: 190px;
  translate: -50% 0;
  padding: 5px 9px;
  border: 1px solid #f0d793;
  border-radius: 3px;
  background: rgba(20, 16, 12, 0.95);
  color: #fff4cd;
  font-size: 0.76rem;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

#screen-today .guild-hotspot-board {
  z-index: 2;
  top: 10%;
  right: 5%;
  width: 29%;
  height: 34%;
}

#screen-today .guild-board-art {
  position: absolute;
  inset: 0;
  background-image: url("assets/adventure-guild/layered/quest-board/guild-quest-board.png?v=171");
}

#screen-today .guild-hotspot-receptionist {
  z-index: 3;
  left: 36%;
  bottom: 15%;
  width: 20%;
  height: 70%;
}

#screen-today .guild-receptionist-sprite {
  position: absolute;
  inset: 0;
  background-image: url("assets/adventure-guild/layered/characters/mira-attentive-v2.png?v=190");
  filter: drop-shadow(0 16px 20px rgba(17, 10, 5, 0.62));
  transform-origin: 50% 100%;
  transition: filter 160ms ease, transform 180ms ease;
}

#screen-today .guild-room-v14[data-receptionist-state="surprised"] .guild-receptionist-sprite,
#screen-today .guild-room-v14[data-receptionist-state="welcoming"] .guild-receptionist-sprite,
#screen-today .guild-room-v14[data-receptionist-state="amused"] .guild-receptionist-sprite,
#screen-today .guild-room-v14[data-receptionist-state="pointing"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/layered/characters/mira-welcoming-v2.png?v=190");
}
#screen-today .guild-room-v14[data-receptionist-state="writing"] .guild-receptionist-sprite,
#screen-today .guild-room-v14[data-receptionist-state="thoughtful"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/layered/characters/mira-attentive-v2.png?v=190");
}
#screen-today .guild-room-v14[data-receptionist-state="success"] .guild-receptionist-sprite {
  background-image: url("assets/adventure-guild/layered/characters/mira-welcoming-v2.png?v=190");
  filter: drop-shadow(0 16px 20px rgba(17, 10, 5, 0.62)) drop-shadow(0 0 10px rgba(246, 208, 99, 0.55));
}

#screen-today .guild-reception-desk {
  z-index: 4;
  left: 22%;
  bottom: 1.5%;
  width: 48%;
  height: 34%;
  background-image: url("assets/adventure-guild/layered/props/guild-reception-desk-front-v2.png?v=198");
  filter: drop-shadow(0 18px 18px rgba(15, 8, 4, 0.52));
}

#screen-today .guild-room-prop { z-index: 6; }
#screen-today .guild-hotspot-registry { left: 28%; bottom: 24%; width: 14%; height: 12%; }
#screen-today .guild-registry-art { position: absolute; inset: 0; background-image: url("assets/adventure-guild/layered/props/guild-registry-ledger-open.png?v=171"); }
#screen-today .guild-hotspot-bucket { right: 32%; bottom: 20%; width: 10%; height: 17%; }
#screen-today .guild-bucket-art { position: absolute; inset: 0; background-image: url("assets/adventure-guild/layered/props/guild-available-quests-bucket.png?v=171"); }
#screen-today .guild-quill-prop { z-index: 7; left: 39%; bottom: 25%; width: 4%; height: 13%; background-image: url("assets/adventure-guild/layered/props/guild-quill-and-ink.png?v=171"); }
#screen-today .guild-mira-nameplate { z-index: 7; left: 48%; bottom: 20%; width: 11%; height: 9%; background-image: url("assets/adventure-guild/layered/props/guild-nameplate.png?v=171"); translate: 0; }


#screen-today .guild-board-counter {
  z-index: 3;
  top: 31%;
  width: 35%;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid #70502a;
  background: rgba(232, 213, 169, 0.94);
  color: #302014;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 209, 0.34), 0 1px 2px rgba(22, 13, 7, 0.28);
}
#screen-today .guild-board-counter-active { left: 11%; }
#screen-today .guild-board-counter-completed { right: 11%; }
#screen-today .guild-board-ready-seal { z-index: 4; right: 43%; bottom: 12%; }

#screen-today .guild-hotspot-bucket small {
  right: -6px;
  bottom: -5px;
  z-index: 4;
}

#screen-today .guild-hotspot-dispatch {
  z-index: 6;
  right: 7%;
  bottom: 25%;
  width: 15%;
  height: 8%;
  border: 1px solid rgba(226, 193, 119, 0.78);
  border-radius: 3px;
  background: rgba(27, 24, 18, 0.86);
}
#screen-today .guild-hotspot-dispatch:is(:hover, :focus-visible) { background: rgba(30, 52, 42, 0.95); }
#screen-today .guild-hotspot-dispatch small { position: static; width: auto; translate: 0; color: #f7e5b4; }
#screen-today .guild-hotspot-exit { z-index: 6; }

#screen-today .guild-reception-dialogue,
#screen-today .guild-mira-conversation {
  position: absolute;
  z-index: 12;
  left: 3%;
  bottom: 3%;
  width: min(390px, 36%);
  max-height: 79%;
  overflow: auto;
  padding: 44px 38px 40px;
  border: 0;
  border-radius: 0;
  background: url("assets/adventure-guild/layered/ui/parchment-mira-conversation.png?v=172") center / 100% 100% no-repeat;
  color: #312416;
  box-shadow: none;
}
#screen-today .guild-reception-dialogue[hidden],
#screen-today .guild-mira-conversation[hidden] { display: none; }
#screen-today .guild-mira-conversation header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
#screen-today .guild-mira-conversation p { min-height: 3.6em; }
#screen-today .guild-mira-topics,
#screen-today .guild-reception-options { display: grid; grid-template-columns: 1fr; gap: 6px; }
#screen-today .guild-mira-topics button,
#screen-today .guild-reception-options button {
  min-height: 42px;
  border: 1px solid #806238;
  border-radius: 2px;
  background: rgba(246, 230, 190, 0.78);
  color: #2f291d;
  text-align: left;
}
#screen-today .guild-mira-topics button:is(:hover, :focus-visible),
#screen-today .guild-reception-options button:is(:hover, :focus-visible) { background: #fff3d0; color: #172e25; }

#screen-today .guild-mira-reaction {
  position: absolute;
  z-index: 11;
  left: 54%;
  bottom: 39%;
  width: min(310px, 31%);
  margin: 0;
  padding: 13px 16px;
  border: 1px solid #d3b66f;
  border-radius: 7px;
  background: rgba(244, 229, 191, 0.96);
  color: #302217;
  box-shadow: 0 10px 28px rgba(18, 10, 5, 0.42);
}
#screen-today .guild-mira-reaction[hidden] { display: none; }

#screen-today .guild-room-panel {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.7);
  color: #2b2117;
  padding: clamp(58px, 6vw, 86px) clamp(50px, 7vw, 104px) clamp(48px, 6vw, 82px);
}
#screen-today .guild-room-panel::before,
#screen-today .guild-room-panel::after { display: none; }
#screen-today #guildMovementPanel { background-image: url("assets/adventure-guild/layered/ui/parchment-record-movement.png?v=172"); }
#screen-today #guildRecordsPanel,
#screen-today #guildDispatchPanel { background-image: url("assets/adventure-guild/layered/ui/parchment-review-records.png?v=172"); }
#screen-today #guildAllocationPanel { background-image: url("assets/adventure-guild/layered/ui/parchment-allocate-steps.png?v=172"); }
#screen-today #guildAvailableQuestsPanel { background-image: url("assets/adventure-guild/layered/ui/parchment-available-quests.png?v=172"); }
#screen-today #guildQuestBoardPanel { background: rgba(25, 17, 10, 0.94); padding: clamp(28px, 4vw, 54px); }
#screen-today #guildQuestCompletePanel { background-image: url("assets/adventure-guild/layered/ui/parchment-turn-in.png?v=172"); }

#screen-today .guild-room-panel > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 5px 12px;
  background: rgba(239, 221, 180, 0.9);
}
#screen-today .guild-panel-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #6d2723;
  color: #fff0ca;
  font-size: 1.4rem;
}

#screen-today .guild-board-columns { gap: clamp(12px, 2vw, 28px); }
#screen-today .guild-board-columns > section {
  min-height: 430px;
  padding: clamp(48px, 5vw, 72px) clamp(28px, 4vw, 62px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #2b2117;
}
#screen-today .guild-board-columns > section:first-child { background-image: url("assets/adventure-guild/layered/ui/parchment-active-quests.png?v=172"); }
#screen-today .guild-board-columns > section:last-child { background-image: url("assets/adventure-guild/layered/ui/parchment-completed-quests.png?v=172"); }
#screen-today .guild-quest-panel[data-board-mode="turn-in"] .guild-board-columns > section:last-child { background-image: url("assets/adventure-guild/layered/ui/parchment-turn-in.png?v=172"); }
#screen-today .guild-quest-card {
  border-color: #9b7541;
  background: rgba(248, 234, 197, 0.88);
  box-shadow: 0 5px 12px rgba(78, 52, 25, 0.2);
}

@media (max-width: 720px) {
  #screen-today .guild-room-v14 { min-height: calc(100svh - 58px); }
  #screen-today .guild-room-background { background-position: 53% center; }
  #screen-today .guild-hotspot-board { top: 8%; right: 2%; width: 46%; height: 27%; }
  #screen-today .guild-hotspot-receptionist { left: 25%; bottom: 21%; width: 38%; height: 52%; }
  #screen-today .guild-reception-desk { left: 7%; bottom: 5%; width: 75%; height: 29%; }
  #screen-today .guild-hotspot-registry { left: 16%; bottom: 25%; width: 23%; height: 10%; }
  #screen-today .guild-hotspot-bell { left: 44%; bottom: 26%; width: 10%; height: 9%; }
  #screen-today .guild-hotspot-bucket { right: 21%; bottom: 20%; width: 18%; height: 15%; }
  #screen-today .guild-quill-prop { left: 36%; bottom: 26%; width: 7%; height: 11%; }
  #screen-today .guild-mira-nameplate { left: 54%; bottom: 21%; width: 17%; height: 7%; }
  #screen-today .guild-hotspot-dispatch { right: 2%; bottom: 12%; width: 31%; height: 7%; }
  #screen-today .guild-hotspot-exit { top: 35%; height: 28%; }
  #screen-today .guild-reception-dialogue,
  #screen-today .guild-mira-conversation { left: 3%; right: 3%; bottom: 2%; width: auto; max-height: 72%; padding: 42px 34px 38px; }
  #screen-today .guild-mira-reaction { left: 4%; bottom: 38%; width: 52%; font-size: 0.84rem; }
  #screen-today .guild-board-counter { top: 16%; width: 40%; padding: 3px 4px; }
  #screen-today .guild-board-counter small { font-size: 0.45rem; }
  #screen-today .guild-room-panel { left: 5px; right: 5px; bottom: 5px; max-height: 86svh; padding: 52px 26px 44px; }
  #screen-today #guildQuestBoardPanel { padding: 16px; }
  #screen-today .guild-board-columns { grid-template-columns: 1fr; }
  #screen-today .guild-board-columns > section { min-height: 380px; padding: 50px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-today .guild-receptionist-sprite { transition: none; }
}

/* Final V1.2 room authority: clear legacy coordinates and keep the room playable on phones. */
body.is-guild-active #screen-today .guild-hotspot-dispatch {
  left: auto;
}

@media (max-width: 720px) {
  body.is-guild-active .topbar {
    position: fixed;
    z-index: 45;
    top: 8px;
    left: 50%;
    width: calc(100vw - 16px);
    min-height: 64px;
    padding: 7px 9px;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }
  body.is-guild-active .brand-lockup,
  body.is-training-active .brand-lockup { min-width: 0; gap: 7px; }
  body.is-guild-active .brand-mark,
  body.is-training-active .brand-mark { width: 34px; height: 34px; }
  body.is-guild-active .brand-lockup .eyebrow,
  body.is-training-active .brand-lockup .eyebrow { display: none; }
  body.is-guild-active #welcomeTitle,
  body.is-training-active #welcomeTitle {
    max-width: 13ch;
    font-size: 0.95rem;
    line-height: 1.05;
  }
  body.is-guild-active .topbar-actions,
  body.is-training-active .topbar-actions { gap: 4px; }
  body.is-guild-active .topbar-actions button,
  body.is-training-active .topbar-actions button {
    min-width: 44px;
    min-height: 44px;
    padding: 5px 7px;
    font-size: 0.68rem;
  }
  body.is-guild-active .bottom-nav.side-nav,
  body.is-training-active .bottom-nav.side-nav {
    position: fixed;
    z-index: 46;
    inset: auto 0 0 0;
    width: 100vw;
    height: 58px;
    min-height: 58px;
    padding: 4px 6px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
  }
  body.is-guild-active .bottom-nav.side-nav > button,
  body.is-training-active .bottom-nav.side-nav > button {
    flex: 0 0 54px;
    width: 54px;
    min-width: 54px;
    min-height: 48px;
    padding: 5px 3px;
    font-size: 0.64rem;
  }
  body.is-guild-active .bottom-nav.side-nav .nav-toggle,
  body.is-training-active .bottom-nav.side-nav .nav-toggle { display: none; }
  #screen-today .guild-room-background { background-position: center 52%; }
  #screen-today .guild-reception-group {
    --guild-x: 50%;
    --guild-y: 8%;
    --guild-w: 92%;
    --guild-h: 58%;
  }
  #screen-today .guild-hotspot-board {
    inset: 15% auto auto 43%;
    width: 55%;
    height: 24%;
    transform: none;
  }
  #screen-today .guild-hotspot-week-ledger {
    inset: 19% auto auto 3%;
    width: 30%;
    height: 18%;
    transform: none;
  }
  #screen-today .guild-hotspot-dispatch {
    inset: auto auto 15% 3%;
    width: 34%;
    height: 7%;
  }
  #screen-today .guild-hotspot-exit {
    top: auto;
    right: 2%;
    bottom: 15%;
    height: 12%;
  }
  #screen-today .guild-mira-reaction {
    left: 5%;
    bottom: 40%;
    width: 68%;
  }
}

@media (max-width: 700px) {
  #screen-today.is-active {
    width: calc(100% - 76px);
    margin-left: 76px;
  }
  #screen-today .guild-room-panel {
    left: 84px;
    right: 8px;
    width: auto;
    max-width: none;
  }
  #screen-today .guild-hotspot-receptionist {
    left: -20%;
    width: 96%;
  }
}

/* Oathkeeper Ledger identity, artwork containment, and routed reminder focus. */
.is-reminder-target {
  outline: 3px solid #2f7691;
  outline-offset: 5px;
  animation: reminder-target-pulse 900ms ease-out 2;
}

@keyframes reminder-target-pulse {
  50% { box-shadow: 0 0 0 8px rgba(78, 142, 156, 0.24); }
}

.reminder-resolution-status:empty,
.ledger-seal-status:empty { display: none; }

.reminder-resolution-status,
.ledger-seal-status {
  color: var(--surface-light-text-muted, #5f513b);
  font-weight: 700;
}

form.onboarding-book.ledger-v2 .ledger-book-stage,
form.onboarding-book.ledger-v2 .ledger-open-book-art,
form.onboarding-book.ledger-v2 .ledger-open-book-art img {
  border: 0;
  outline: 0;
  background-color: transparent;
  box-shadow: none;
}

form.onboarding-book.ledger-v2 .ledger-book-stage {
  background: transparent;
  filter: none;
}
form.onboarding-book.ledger-v2 .ledger-open-book-art { overflow: visible; }

form.onboarding-book.ledger-v2 .ill-companion {
  background-image: none;
  filter: none;
}

form.onboarding-book.ledger-v2 .ill-companion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 6px 5px rgba(54, 35, 18, 0.22));
  mix-blend-mode: normal;
  clip-path: none;
}

form.onboarding-book.ledger-v2 .ledger-chapter-illustration:not(.ill-companion) {
  background-size: 92% 96%;
  mix-blend-mode: normal;
  filter: drop-shadow(0 5px 5px rgba(54, 35, 18, 0.16));
}

.verdant-oath-crest,
.verdant-oath-seal {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border: 2px solid #b98a42;
  border-radius: 50%;
  background: radial-gradient(circle, #274f47 0 57%, #173a35 58% 68%, #b98a42 69% 73%, #173a35 74%);
  box-shadow: inset 0 0 0 3px rgba(237, 215, 157, 0.2), 0 4px 10px rgba(55, 35, 16, 0.2);
}

.verdant-oath-crest i,
.verdant-oath-seal i {
  position: relative;
  width: 3px;
  height: 28px;
  border-radius: 50% 50% 2px 2px;
  background: #dfc681;
}

.verdant-oath-crest i::before,
.verdant-oath-crest i::after,
.verdant-oath-seal i::before,
.verdant-oath-seal i::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 8px;
  border: 2px solid #dfc681;
  border-radius: 100% 0 100% 0;
  background: #668b68;
}

.verdant-oath-crest i::before,
.verdant-oath-seal i::before { top: 5px; right: 1px; transform: rotate(24deg); }
.verdant-oath-crest i::after,
.verdant-oath-seal i::after { top: 14px; left: 1px; transform: rotate(204deg); }

form.onboarding-book.ledger-v2 .ledger-character-choice {
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-width: 0;
  overflow: visible;
}

form.onboarding-book.ledger-v2 .hero-preview-frame {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

form.onboarding-book.ledger-v2 .hero-preview-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.hero-preview-frame.has-missing-art::before,
.egg-option-image-wrap.has-missing-art::before {
  content: "Art unavailable";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #665535;
  font-size: 0.62rem;
}

form.onboarding-book.ledger-v2 .ledger-companion-gallery {
  align-items: stretch;
}

form.onboarding-book.ledger-v2 .ledger-egg-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 116px;
  overflow: visible;
}

form.onboarding-book.ledger-v2 .ledger-egg-choice .egg-option-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  --ledger-thumb-height: 86px;
  width: 74px;
  padding: 6px;
  overflow: visible;
  border: 0;
  background: transparent;
}

form.onboarding-book.ledger-v2 .ledger-egg-choice .egg-option-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: calc(100% - 4px);
  max-height: calc(100% - 4px);
  object-fit: contain;
  object-position: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 5px 4px rgba(67, 42, 17, 0.22));
  mix-blend-mode: normal;
  clip-path: none;
}

form.onboarding-book.ledger-v2 .ledger-detail-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  width: 100%;
  height: 190px;
  padding: 6px;
  overflow: visible;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

form.onboarding-book.ledger-v2 .ledger-detail-preview .ledger-detail-image {
  display: block;
  width: min(180px, 78%);
  height: 156px;
  max-width: min(180px, 78%);
  max-height: 156px;
  padding: 5px;
  object-fit: contain;
  object-position: center;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 7px 7px rgba(57, 36, 16, 0.24));
}

form.onboarding-book.ledger-v2 .ledger-wax-submit {
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 68px;
  background: linear-gradient(180deg, #234b43, #173730);
}

form.onboarding-book.ledger-v2 .ledger-wax-submit > .verdant-oath-seal {
  width: 54px;
  height: 54px;
  border-radius: 46% 54% 48% 52% / 54% 45% 55% 46%;
  background: radial-gradient(circle at 42% 38%, #8d382f, #68221f 68%, #431511 69%);
  color: transparent;
  box-shadow: inset 0 0 0 3px rgba(236, 178, 104, 0.24), 0 3px 7px rgba(56, 25, 16, 0.38);
}

form.onboarding-book.ledger-v2 .ledger-wax-submit > .ledger-wax-submit__label {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #f3e4bd;
  box-shadow: none;
}

form.onboarding-book.ledger-v2:not(.is-sealed) .ledger-wax-submit > .verdant-oath-seal {
  opacity: 0.76;
  filter: saturate(0.72);
}

@media (min-width: 821px) {
  form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="11"] .ledger-character-selection {
    grid-template-columns: minmax(0, 44%) minmax(0, 44%);
    grid-template-rows: minmax(0, 1fr);
    justify-content: space-between;
    gap: 0;
    height: calc(100% - 112px);
    padding: 0 3% 1.5%;
  }

  form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="11"] .ledger-character-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="11"] .ledger-character-detail {
    grid-template-columns: 108px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border-top: 0;
    border-left: 1px solid rgba(139, 97, 39, 0.42);
  }

  form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="11"] .ledger-character-detail > div:last-child {
    display: block;
    min-width: 0;
  }

  form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="11"] .ledger-character-detail .ledger-choice-facts {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 5px;
  }

  form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="12"] .ledger-page-half {
    overflow: hidden;
    padding-inline: 5%;
  }

  form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="12"] .ledger-page-half:first-child {
    grid-template-rows: auto auto 190px auto;
  }

  form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="12"] .ledger-large-character {
    max-height: 190px;
  }

  form.onboarding-book.ledger-v2 .onboarding-page[data-onboarding-page="12"] .ledger-large-character img {
    max-width: 74%;
    max-height: 190px;
  }
}

form.onboarding-book.ledger-v2.is-sealed .ledger-wax-submit > .verdant-oath-seal {
  animation: ledger-seal-press 600ms ease both;
}

form.onboarding-book.ledger-v2.is-sealing .ledger-book-stage {
  animation: none;
}

form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf {
  position: absolute;
  z-index: 58;
  top: 8%;
  bottom: 13%;
  left: 50%;
  width: 43%;
  opacity: 0;
  transform: rotateY(-179deg);
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf > span {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 2px solid #b78b3c;
  border-radius: 4px 17px 17px 4px;
  backface-visibility: hidden;
}

form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf__inside {
  background:
    radial-gradient(ellipse at 65% 40%, rgba(255, 249, 219, 0.82), transparent 48%),
    linear-gradient(90deg, #bda36f, #ead7aa 8%, #f1e2bd 88%, #c3a46c);
  box-shadow: inset 20px 0 30px rgba(77, 48, 20, 0.24);
  transform: rotateY(180deg);
}

form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf__outside {
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, transparent 12%, rgba(212, 174, 84, 0.5) 12.4% 12.9%, transparent 13.3% 86%, rgba(212, 174, 84, 0.5) 86.4% 86.9%, transparent 87.3%),
    radial-gradient(circle at 50% 44%, rgba(50, 93, 137, 0.42), transparent 34%),
    linear-gradient(145deg, #193758, #0c2039 62%, #071526);
  box-shadow: inset 0 0 0 5px #102b49, inset 0 0 0 7px rgba(206, 166, 74, 0.84), inset 0 0 28px #020913, 0 18px 24px rgba(0, 0, 0, 0.38);
}

form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf__outside i,
form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf__outside i::before,
form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf__outside i::after {
  display: block;
  content: "";
}

form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf__outside i {
  position: relative;
  width: 74px;
  height: 96px;
  border: 2px solid #d8b666;
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 0 18px rgba(81, 153, 208, 0.42), inset 0 0 0 5px rgba(216, 182, 102, 0.12);
}

form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf__outside i::before {
  position: absolute;
  top: 16px;
  left: 34px;
  width: 3px;
  height: 62px;
  border-radius: 50%;
  background: #d8b666;
}

form.onboarding-book.ledger-v2 .ledger-closing-cover-leaf__outside i::after {
  position: absolute;
  top: 35px;
  left: 21px;
  width: 29px;
  height: 29px;
  border: 2px solid #7bc2eb;
  transform: rotate(45deg);
  box-shadow: 0 0 13px rgba(123, 194, 235, 0.72);
}

form.onboarding-book.ledger-v2.is-closing .ledger-book-stage {
  visibility: visible;
  pointer-events: none;
  animation: ledger-pages-gather 1100ms cubic-bezier(0.45, 0, 0.2, 1) both;
}

form.onboarding-book.ledger-v2.is-closing .ledger-closing-cover-leaf {
  opacity: 1;
  animation: ledger-cover-leaf-close 820ms cubic-bezier(0.48, 0, 0.16, 1) both;
}

form.onboarding-book.ledger-v2.is-closing .ledger-closed-cover {
  opacity: 1;
  transform: none;
  pointer-events: none;
  animation: ledger-cover-finish 1100ms cubic-bezier(0.42, 0, 0.2, 1) both;
}

form.onboarding-book.ledger-v2.is-closing .ledger-cover-inscription {
  opacity: 0;
  transition: opacity 120ms ease;
}

@keyframes ledger-pages-gather {
  0%, 72% { opacity: 1; transform: perspective(1400px) scale(1) rotateY(0); }
  100% { opacity: 0; transform: perspective(1400px) scale(0.94) rotateY(2deg); }
}

@keyframes ledger-cover-leaf-close {
  0% { opacity: 1; transform: rotateY(-179deg); filter: brightness(1.05); }
  52% { opacity: 1; transform: rotateY(-88deg); filter: brightness(0.86); }
  100% { opacity: 1; transform: rotateY(0); filter: brightness(1); }
}

@keyframes ledger-cover-finish {
  0%, 74% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

body.is-reduced-motion .is-reminder-target,
body.is-reduced-motion form.onboarding-book.ledger-v2.is-sealed .ledger-wax-submit > .verdant-oath-seal {
  animation: none;
}

body.is-reduced-motion form.onboarding-book.ledger-v2.is-closing .ledger-book-stage,
body.is-reduced-motion form.onboarding-book.ledger-v2.is-closing .ledger-closed-cover,
body.is-reduced-motion form.onboarding-book.ledger-v2.is-closing .ledger-closing-cover-leaf {
  animation: none;
}

body.is-reduced-motion form.onboarding-book.ledger-v2.is-closing .ledger-book-stage { opacity: 0; }
body.is-reduced-motion form.onboarding-book.ledger-v2.is-closing .ledger-closed-cover { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .onboarding-dialog {
    inset: 0;
    width: 100vw;
    height: 100svh;
    max-height: none;
    margin: 0;
  }
  form.onboarding-book.ledger-v2 {
    width: 100vw;
    height: 100svh;
  }
  form.onboarding-book.ledger-v2 .ledger-book-stage {
    background:
      linear-gradient(90deg, rgba(122, 87, 40, 0.16), transparent 9%, transparent 91%, rgba(122, 87, 40, 0.16)),
      radial-gradient(circle at 50% 10%, rgba(255, 251, 226, 0.72), transparent 45%),
      #efdfb9;
    border: 8px solid #172944;
    box-shadow: inset 0 0 0 2px #b38c42, inset 0 0 30px rgba(83, 52, 22, 0.2);
  }
  form.onboarding-book.ledger-v2 .ledger-page-content {
    overflow-x: hidden;
    overflow-y: auto;
  }
  form.onboarding-book.ledger-v2 .onboarding-page.is-active {
    height: auto;
    min-height: 100%;
  }
  form.onboarding-book.ledger-v2 .ledger-page-half {
    overflow: visible;
  }
  form.onboarding-book.ledger-v2 .ledger-thumb-wrap { --ledger-thumb-height: 74px; }
  form.onboarding-book.ledger-v2 .hero-preview-frame { max-height: 104px; }
  form.onboarding-book.ledger-v2 .egg-option-image-wrap { width: 62px; }
  form.onboarding-book.ledger-v2 .ledger-egg-choice {
    min-height: 126px;
    align-content: start;
  }
  form.onboarding-book.ledger-v2 .ledger-detail-preview { height: 170px; }
  form.onboarding-book.ledger-v2 .ledger-detail-image { max-height: 146px; }
}

/* Keep V1.4 room panels authoritative over the legacy keeper-fold rules. */
#screen-today .guild-room-panel[hidden] { display: none !important; }
#screen-today .guild-room-panel:not([hidden]) { display: block !important; }

/* Unified V1.2 is the final Guild layout authority. */
body.is-guild-active #screen-today .guild-reception-group {
  --guild-x: 50%;
  --guild-y: 5%;
  --guild-w: 40%;
  --guild-h: 66%;
}
body.is-guild-active #screen-today .guild-desk-object {
  height: 54%;
}
body.is-guild-active #screen-today .guild-desk-object .guild-reception-desk {
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: bottom center;
  background-size: contain;
}
body.is-guild-active #screen-today .guild-reception-group .guild-hotspot-receptionist {
  bottom: 33%;
  width: 100%;
  height: 67%;
}
body.is-guild-active #screen-today .guild-receptionist-sprite {
  background-size: auto 100%;
}
body.is-guild-active #screen-today .guild-mira-reaction {
  left: 10%;
  bottom: 51%;
  width: min(260px, 23%);
}
body.is-guild-active #screen-today .guild-hotspot-board {
  inset: 16% auto auto 54%;
  width: 20%;
  height: 29%;
  transform: none;
}
body.is-guild-active #screen-today .guild-hotspot-week-ledger {
  inset: 14% auto auto 75.5%;
  width: 18.5%;
  height: 31%;
  transform: none;
}
body.is-guild-active #screen-today .guild-desk-object .guild-hotspot-registry {
  left: 22%;
  top: auto;
  bottom: 47%;
  width: 34%;
  height: 34%;
}
body.is-guild-active #screen-today .guild-desk-object .guild-hotspot-bucket {
  right: 6%;
  top: auto;
  bottom: 47%;
  width: 28%;
  height: 42%;
}
body.is-guild-active #screen-today .guild-desk-object .guild-quill-prop {
  left: 53%;
  top: auto;
  bottom: 47%;
  width: 9%;
  height: 29%;
}
body.is-guild-active #screen-today .guild-desk-object .guild-mira-nameplate {
  left: 50%;
  top: 29%;
  bottom: auto;
  width: 17%;
  height: 10%;
  transform: translateX(-50%);
}

body.is-guild-active #screen-today .guild-board-art,
body.is-guild-active #screen-today .guild-week-ledger-art {
  filter: drop-shadow(0 7px 5px rgba(31, 18, 8, 0.48));
}

/* The exported Quest Board touches its canvas at the crown. Reserve wall space
   and complete the small carved cap so its silhouette no longer looks cropped. */
body.is-guild-active #screen-today .guild-board-art {
  inset: auto 0 0;
  aspect-ratio: 848 / 537;
  overflow: visible;
}

body.is-guild-active #screen-today .guild-board-art::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: clamp(30px, 18%, 54px);
  aspect-ratio: 4 / 1;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #51321d, #24150d);
  border: 1px solid #9d6a2d;
  border-bottom: 0;
  clip-path: polygon(12% 100%, 18% 58%, 34% 34%, 50% 0, 66% 34%, 82% 58%, 88% 100%);
  box-shadow: inset 0 0 0 1px rgba(226, 177, 83, 0.2);
}
body.is-guild-active #screen-today .guild-hotspot-dispatch {
  inset: 39.5% auto auto 58%;
  width: 12%;
  min-height: 0;
  height: 3.5%;
  padding: 0 4px;
  border-color: rgba(110, 71, 32, 0.84);
  background: rgba(236, 211, 158, 0.96);
  color: #392417;
  box-shadow: inset 0 0 0 1px rgba(255, 245, 210, 0.6);
}
body.is-guild-active #screen-today .guild-hotspot-dispatch small,
body.is-guild-active #screen-today .guild-hotspot-dispatch small::before {
  color: #392417;
  font-size: clamp(0.48rem, 0.67vw, 0.7rem);
}

@media (max-width: 720px) {
  body.is-guild-active .topbar {
    left: 8px;
    right: 8px;
    width: auto;
    transform: none !important;
    translate: none !important;
  }
  body.is-guild-active #screen-today .guild-hotspot-dispatch {
    inset: 34% auto auto 58%;
    width: 26%;
    height: 3.5%;
  }
  body.is-guild-active #screen-today .guild-hotspot-exit {
    left: auto;
    right: 8px;
    bottom: 15%;
    width: 110px;
    height: 7%;
  }
  body.is-guild-active #screen-today .guild-hotspot-exit strong {
    position: static;
    font-size: 0.72rem;
    white-space: nowrap;
  }
  body.is-guild-active #screen-today .guild-reception-group {
    --guild-x: 50%;
    --guild-y: 8%;
    --guild-w: 92%;
    --guild-h: 58%;
  }
  body.is-guild-active #screen-today .guild-reception-group .guild-hotspot-receptionist {
    bottom: 32%;
    width: 100%;
    height: 68%;
  }
  body.is-guild-active #screen-today .guild-hotspot-board {
    inset: 15% auto auto 43%;
    width: 55%;
    height: 24%;
  }
  body.is-guild-active #screen-today .guild-hotspot-week-ledger {
    inset: 15% auto auto 3%;
    width: 36%;
    height: 24%;
  }
}

@media (min-width: 721px) {
  .bottom-nav.side-nav:not(.is-expanded) {
    top: max(94px, calc(78px + env(safe-area-inset-top)));
    bottom: auto;
    width: 62px;
    max-height: 62px;
    overflow: hidden;
  }

  .bottom-nav.side-nav:not(.is-expanded) > button[data-screen] {
    display: none;
  }

  .bottom-nav.side-nav.is-expanded {
    max-height: calc(100svh - 108px);
  }
}

/* Guild routed panels remain part of the painted room after they are moved into the dialog. */
.guild-scroll-dialog .guild-scroll {
  width: min(900px, 96vw);
  max-height: 90svh;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 28px 72px rgba(13, 8, 4, 0.72);
}

.guild-scroll-dialog .guild-scroll::before,
.guild-scroll-dialog .guild-scroll::after {
  display: none;
}

.guild-scroll-dialog .guild-scroll-body {
  max-height: 90svh;
  padding: 0;
  scrollbar-color: #7d542b #ead7aa;
}

#screen-today .guild-scroll-dialog .guild-room-panel {
  min-height: min(700px, 88svh);
  padding: clamp(64px, 7vw, 94px) clamp(54px, 8vw, 112px) clamp(58px, 7vw, 90px);
  border: 0;
  background-color: transparent !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #352719;
  filter: drop-shadow(0 14px 16px rgba(15, 9, 4, 0.45));
}

.guild-scroll-dialog #guildMovementPanel {
  background-image: url("assets/adventure-guild/layered/ui/parchment-record-movement.png?v=172") !important;
}

.guild-scroll-dialog #guildRecordsPanel,
.guild-scroll-dialog #guildDispatchPanel,
.guild-scroll-dialog #guildWeeklyStatusPanel {
  background-image: url("assets/adventure-guild/layered/ui/parchment-review-records.png?v=172") !important;
}

.guild-scroll-dialog #guildAllocationPanel {
  background-image: url("assets/adventure-guild/layered/ui/parchment-allocate-steps.png?v=172") !important;
}

.guild-scroll-dialog #guildAvailableQuestsPanel,
.guild-scroll-dialog #guildQuestDetailPanel {
  background-image: url("assets/adventure-guild/layered/ui/parchment-available-quests.png?v=172") !important;
}

.guild-scroll-dialog #guildQuestCompletePanel {
  background-image: url("assets/adventure-guild/layered/ui/parchment-turn-in.png?v=172") !important;
}

.guild-scroll-dialog #guildQuestBoardPanel {
  background:
    linear-gradient(rgba(37, 24, 13, 0.9), rgba(25, 16, 9, 0.94)),
    url("assets/adventure-guild/layered/quest-board/guild-quest-board.png?v=171") center / cover no-repeat !important;
}

#screen-today .guild-scroll-dialog .guild-room-panel > header {
  position: sticky;
  top: 0;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid rgba(205, 166, 85, 0.72);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(43, 76, 60, 0.98), rgba(25, 53, 43, 0.98));
  color: #f4e7bf;
  box-shadow: inset 0 0 0 1px rgba(244, 224, 169, 0.13), 0 3px 8px rgba(54, 31, 12, 0.28);
}

#screen-today .guild-scroll-dialog .guild-room-panel > header :is(h2, .eyebrow, strong) {
  color: #f4e7bf;
}

#screen-today .guild-scroll-dialog .guild-ledger-tabs {
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(100, 65, 27, 0.48);
}

#screen-today .guild-scroll-dialog .guild-ledger-tabs button {
  border: 1px solid #75502a;
  border-radius: 3px;
  background: linear-gradient(#5d3c20, #3f2918);
  color: #f5e4b8;
  box-shadow: inset 0 0 0 1px rgba(233, 198, 118, 0.14);
}

#screen-today .guild-scroll-dialog .guild-ledger-tabs button[aria-current="page"] {
  border-color: #d7b66d;
  background: linear-gradient(#315f4c, #204536);
  color: #fff1c5;
}

.guild-scroll-dialog :is(input, select, textarea) {
  border-color: #806037;
  background: rgba(255, 249, 228, 0.9);
  color: #302319;
}

.guild-scroll-dialog :is(fieldset, .guild-quest-card, .activity-step-option, .guild-weekly-status-summary span) {
  border-color: rgba(116, 79, 39, 0.58);
  background-color: rgba(249, 236, 198, 0.7);
  box-shadow: none;
}

@media (max-width: 720px) {
  .guild-scroll-dialog {
    padding: 6px;
  }

  .guild-scroll-dialog .guild-scroll,
  .guild-scroll-dialog .guild-scroll-body {
    width: 100%;
    max-height: 94svh;
  }

  #screen-today .guild-scroll-dialog .guild-room-panel {
    min-height: 92svh;
    padding: 56px 30px 50px;
    background-size: auto 100%;
  }

  #screen-today .guild-scroll-dialog .guild-room-panel > header {
    top: -1px;
  }
}

/* Final reception surface authority. The plane ends at the desk's painted front lip. */
body.is-guild-active #screen-today .guild-desk-tabletop-plane {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 5%;
  right: 5%;
  height: 24%;
  pointer-events: none;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane > [data-desk-item] {
  position: absolute;
  top: auto;
  pointer-events: auto;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane [data-desk-slot="registry"] {
  left: 10%;
  right: auto;
  bottom: 0;
  width: 43%;
  height: 130%;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane [data-desk-slot="quest-bucket"] {
  left: auto;
  right: 2%;
  bottom: 0;
  width: 31%;
  height: 155%;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane [data-desk-slot="quill"] {
  left: 53%;
  right: auto;
  bottom: 0;
  width: 14%;
  height: 150%;
}

body.is-guild-active #screen-today .guild-desk-tabletop-plane > [data-desk-item][hidden] {
  display: none;
}

body.is-guild-active #screen-today .guild-mira-reaction {
  left: 60%;
  bottom: 57%;
  width: min(280px, 22vw);
}

body.is-guild-active #screen-today .guild-mira-reaction::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 18px;
  width: 18px;
  height: 18px;
  border-left: 1px solid #d3b66f;
  border-bottom: 1px solid #d3b66f;
  background: rgba(244, 229, 191, 0.96);
  transform: rotate(45deg);
}

@media (max-width: 700px) {
  body.is-guild-active #screen-today .guild-desk-tabletop-plane {
    left: 4%;
    right: 4%;
    height: 24%;
  }

  body.is-guild-active #screen-today .guild-mira-reaction {
    left: 51%;
    bottom: 54%;
    width: 44%;
    max-width: 260px;
  }
}

/* Keep the Guild speaker attached to Mira after every earlier layout layer. */
body.is-guild-active #screen-today .guild-reception-group .guild-mira-reaction {
  left: auto;
  right: 66%;
  bottom: 64%;
  width: min(250px, 68vw);
  z-index: 12;
}

body.is-guild-active #screen-today .guild-reception-group .guild-mira-reaction::after {
  left: auto;
  right: -10px;
  border: 0;
  border-top: 1px solid #d3b66f;
  border-right: 1px solid #d3b66f;
}

.guild-scroll-dialog[open] .guild-scroll {
  width: min(900px, 68vw);
  margin: 0 1vw 0 auto;
  justify-self: end;
}

.guild-scroll-dialog[open] .guild-menu-mira {
  width: min(29vw, 360px);
}

.guild-scroll-dialog[open] .guild-menu-mira-sprite {
  inset: 0;
}

.guild-scroll-dialog[open] .guild-menu-mira-bubble {
  top: 38%;
  left: 16%;
  width: 82%;
}

@media (min-width: 721px) and (max-width: 1100px) {
  .guild-scroll-dialog[open] .guild-menu-mira-bubble {
    left: 0;
    width: min(220px, calc(100% - 32px));
  }
}

@media (max-width: 720px) {
  body.is-guild-active #screen-today .guild-reception-group .guild-mira-reaction {
    left: auto;
    right: 48%;
    bottom: 66%;
    width: min(230px, 52vw);
  }

  .guild-scroll-dialog[open] .guild-scroll {
    width: 100%;
    max-height: calc(100svh - 122px);
    margin: 116px 0 0;
    justify-self: stretch;
  }

  .guild-scroll-dialog[open] .guild-menu-mira {
    width: calc(100% - 12px);
  }

  .guild-scroll-dialog[open] .guild-menu-mira-sprite {
    inset: 0 auto 0 0;
  }

  .guild-scroll-dialog[open] .guild-menu-mira-bubble {
    top: 14px;
    left: 112px;
    width: calc(100% - 122px);
  }

  .guild-scroll-dialog[open] .guild-scroll-body {
    max-height: calc(100svh - 122px);
  }
}

/* Final Guild ledger layout authority: dialogue and parchment never share space. */
.guild-scroll-dialog[open] {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 900px);
  align-items: end;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 12px;
}

.guild-scroll-dialog[open] .guild-menu-mira {
  position: relative;
  inset: auto;
  grid-column: 1;
  align-self: end;
  width: 100%;
  height: min(78svh, 680px);
  pointer-events: none;
}

.guild-scroll-dialog[open] .guild-menu-mira-sprite {
  position: absolute;
  inset: 16% 0 0;
}

.guild-scroll-dialog[open] .guild-menu-mira-bubble {
  top: auto;
  bottom: 34%;
  left: 3%;
  right: 3%;
  width: auto;
  max-width: none;
}

.guild-scroll-dialog[open] .guild-scroll {
  grid-column: 2;
  align-self: center;
  justify-self: stretch;
  width: min(900px, 100%);
  max-width: 100%;
  margin: 0;
}

@media (min-width: 721px) and (max-width: 1050px) {
  .guild-scroll-dialog[open] {
    grid-template-columns: minmax(190px, 26vw) minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .guild-scroll-dialog[open] .guild-menu-mira {
    height: min(76svh, 610px);
  }

  .guild-scroll-dialog[open] .guild-menu-mira-bubble {
    top: auto;
    bottom: 34%;
    left: 0;
    right: 0;
    width: auto;
    font-size: 0.82rem;
  }

  #screen-today .guild-scroll-dialog .guild-room-panel {
    padding-right: clamp(38px, 6vw, 64px);
    padding-left: clamp(38px, 6vw, 64px);
  }
}

@media (max-width: 720px) {
  .guild-scroll-dialog[open] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 112px minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    padding: 6px;
  }

  .guild-scroll-dialog[open] .guild-menu-mira {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 112px;
  }

  .guild-scroll-dialog[open] .guild-menu-mira-sprite {
    inset: 0 auto 0 0;
    width: 108px;
  }

  .guild-scroll-dialog[open] .guild-menu-mira-bubble {
    top: 8px;
    bottom: auto;
    left: 106px;
    right: 4px;
    width: auto;
  }

  .guild-scroll-dialog[open] .guild-scroll {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-height: calc(100svh - 130px);
    margin: 0;
  }

  .guild-scroll-dialog[open] .guild-scroll-body {
    max-height: calc(100svh - 130px);
  }
}

/* EOF modal enforcement: this must remain below room-specific overrides. */
:is(
  .town-area-screen.has-keeper.is-active .keeper-folded.is-keeper-open.hearth-modal,
  #screen-log.has-inn-interior > .keeper-folded.is-keeper-open.hearth-modal,
  .town-area-screen.is-active > .training-route-panel.hearth-modal,
  .town-area-screen.is-active > .training-board-panel.hearth-modal
) {
  z-index: 180;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--hearth-modal-pad);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 2px solid rgba(126, 82, 35, 0.72);
  border-radius: var(--hearth-modal-radius);
  background: var(--hearth-modal-surface);
  color: var(--hearth-modal-ink);
  box-shadow: var(--hearth-modal-shadow);
  backdrop-filter: blur(4px) saturate(1.04);
}

.guild-scroll-dialog[open] .guild-scroll {
  width: var(--hearth-modal-width);
  max-height: var(--hearth-modal-height);
  padding: var(--hearth-modal-pad);
  border: 2px solid rgba(126, 82, 35, 0.72);
  border-radius: var(--hearth-modal-radius);
  background: var(--hearth-modal-surface);
  color: var(--hearth-modal-ink);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(255, 249, 223, 0.34),
    inset 0 0 34px rgba(91, 56, 20, 0.18);
}

:is(.keeper-panel-close, .training-panel-close, .guild-panel-close) {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #d7ba76;
  border-radius: 50%;
  background: #251d18;
  color: #fff2c5;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
/* Daily-use behavior standards: shared states without changing room artwork. */
form[data-daily-use-enhanced="true"][data-form-state="saving"] {
  cursor: progress;
}

form[data-daily-use-enhanced="true"][data-form-state="saving"] :is(button[type="submit"], input[type="submit"]) {
  opacity: 0.72;
  pointer-events: none;
}

form[data-daily-use-enhanced="true"][data-form-state="saved"] {
  --form-state-accent: #2f765f;
}

form[data-daily-use-enhanced="true"][data-form-state="error"] {
  --form-state-accent: #a13b32;
}

.daily-use-interaction {
  --interaction-aura: rgba(102, 226, 222, 0.78);
  -webkit-tap-highlight-color: transparent;
}

.daily-use-interaction:is(:hover, :focus-visible) {
  outline: 0;
  filter:
    drop-shadow(0 0 4px var(--interaction-aura))
    drop-shadow(0 0 11px rgba(67, 181, 190, 0.48));
}

.daily-use-interaction:focus-visible {
  box-shadow: 0 0 0 3px #f4e7b0, 0 0 0 6px #1e7e83;
}

.standard-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 18px;
  color: var(--surface-text, #26382f);
}

.standard-empty-state > :is(strong, p) {
  margin: 0;
}

.standard-empty-state button {
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .daily-use-interaction {
    transition: none !important;
  }
}

.tracker-saved-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--surface-light-border, #9b7b45);
  border-radius: 6px;
  color: var(--surface-light-text, #25372f);
}

.tracker-saved-panel > header,
.tracker-form-actions,
.tracker-record-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tracker-saved-panel h3,
.tracker-saved-panel p {
  margin: 0;
}

.tracker-daily-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.tracker-daily-totals span {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-block: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: 0.82rem;
}

.tracker-daily-totals strong {
  font-size: 1rem;
}

.tracker-record-list {
  display: grid;
  gap: 8px;
}

.tracker-record-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.tracker-record-item > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tracker-record-item span,
.tracker-record-item small {
  overflow-wrap: anywhere;
}

.tracker-delete-button {
  color: #7b2f2f;
}

.tracker-form-status {
  min-height: 1.4em;
  margin: 8px 0 0;
}

@media (max-width: 620px) {
  .tracker-daily-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tracker-record-item {
    grid-template-columns: 1fr;
  }

  .tracker-record-actions {
    justify-content: flex-start;
  }
}
.tracker-detail-editor,
.tracker-control-panel {
  border: 1px solid rgba(77, 57, 27, 0.35);
  background: rgba(252, 246, 225, 0.96);
  color: #213b35;
  padding: 12px;
  margin-block: 12px;
}

.tracker-detail-editor > summary,
.tracker-control-panel summary {
  color: #173e36;
  font-weight: 800;
  cursor: pointer;
}

.workout-set-rows {
  display: grid;
  gap: 8px;
  margin-block: 10px;
}

.workout-set-row {
  display: grid;
  grid-template-columns: minmax(140px, 2fr) repeat(4, minmax(74px, 0.7fr)) minmax(82px, 0.8fr) auto;
  gap: 8px;
  align-items: end;
  border-block-end: 1px solid rgba(77, 57, 27, 0.2);
  padding-block-end: 8px;
}

.workout-set-row label {
  min-width: 0;
}

.workout-set-row input,
.workout-set-row select {
  width: 100%;
}

.tracker-sync-controls fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  border: 1px solid rgba(77, 57, 27, 0.25);
  padding: 10px;
}

.tracker-sync-controls label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.tracker-sync-controls input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  margin: 0;
}

.tracker-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-block: 10px 16px;
}

.tracker-metric-grid article,
.tracker-quality-item {
  border-inline-start: 3px solid #307d6b;
  background: rgba(255, 255, 255, 0.55);
  padding: 9px 11px;
}

.tracker-metric-grid span,
.tracker-quality-item span {
  display: block;
  color: #4a5d56;
}

.tracker-metric-grid strong {
  display: block;
  color: #173e36;
  font-size: 1.15rem;
}

.tracker-quality-list {
  display: grid;
  gap: 7px;
  margin-block-start: 10px;
}

.tracker-quality-item.is-warning {
  border-inline-start-color: #9a5a22;
}

@media (max-width: 760px) {
  .workout-set-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workout-set-row label:first-child,
  .workout-set-row button {
    grid-column: 1 / -1;
  }

  .tracker-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Daily tracking control surfaces */
.daily-tracking-today,
.health-import-preview {
  color: var(--surface-light-text, #213b32);
  background: rgba(250, 242, 213, 0.97);
  border: 1px solid #9b7436;
  border-radius: 6px;
  padding: 14px;
}

.daily-tracking-today > header,
.health-import-preview > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.daily-tracking-today h3,
.health-import-preview h4 {
  margin: 2px 0 0;
  color: #173f35;
}

.daily-tracking-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(112, 79, 32, 0.35);
  margin-top: 10px;
}

.daily-tracking-metrics article {
  min-width: 0;
  padding: 10px;
  border-right: 1px solid rgba(112, 79, 32, 0.25);
}

.daily-tracking-metrics article:nth-child(3n) {
  border-right: 0;
}

.daily-tracking-metrics span,
.daily-tracking-metrics small,
.daily-tracking-metrics strong {
  display: block;
  overflow-wrap: anywhere;
}

.daily-tracking-metrics strong {
  color: #173f35;
  font-size: 1.05rem;
}

.daily-tracking-missing {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  color: #4b3020;
}

.daily-water-quick-log {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 0 2px;
  color: #173f35;
}

.daily-water-quick-log .water-container-actions {
  margin-top: 0;
}

.water-container-actions {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto auto;
  gap: 6px;
  margin-top: 8px;
}

.water-container-actions select,
.water-container-actions button {
  min-height: 38px;
}

.health-import-preview {
  margin-top: 12px;
}

#healthImportPreviewSummary {
  display: grid;
  gap: 3px;
  margin: 10px 0;
}

.health-import-day-list,
.health-import-history > div {
  display: grid;
  gap: 8px;
}

.health-import-day-list article,
.health-import-history article {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(112, 79, 32, 0.28);
}

.health-import-day-list article > div,
.health-import-history article > span {
  display: grid;
}

.health-import-day-list article > small {
  max-width: 38%;
}

.health-import-day-list .needs-review {
  border-left: 4px solid #a9472e;
  padding-left: 8px;
}

@media (max-width: 680px) {
  .daily-water-quick-log {
    grid-template-columns: 1fr;
  }

  .daily-tracking-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-tracking-metrics article:nth-child(3n) {
    border-right: 1px solid rgba(112, 79, 32, 0.25);
  }

  .daily-tracking-metrics article:nth-child(2n) {
    border-right: 0;
  }

  .water-container-actions {
    grid-template-columns: 1fr 1fr;
  }

  .health-import-day-list article {
    display: grid;
  }

  .health-import-day-list article > small {
    max-width: none;
  }
}