:root {
  --ink: #1c1a16;
  --muted: #6b6458;
  --line: #d8d0c4;
  --paper: #f4efe6;
  --card: #fffdf8;
  --accent: #6e4b2a;
  --stage: #ece6db;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

.page {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 400px);
  min-height: 100%;
  height: 100%;
  transition: grid-template-columns 0.2s ease;
}

.page.is-card-collapsed {
  grid-template-columns: 1fr 32px;
}

.stage {
  position: relative;
  background: var(--stage);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.book-tab {
  position: absolute;
  top: 16px;
  left: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.book-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  padding: 10px 8px 12px 10px;
  background: #7a3f22;
  color: #f4efe6;
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 0 #d8c4a4, 8px 6px 0 #eee6d8;
}

.book-cover:hover {
  filter: brightness(1.06);
}

.book-icon {
  width: 28px;
  height: 32px;
  display: block;
}

.book-tab[aria-expanded="true"] .book-cover {
  background: #5c2e18;
}

.alchemy-tab {
  position: absolute;
  top: 102px;
  left: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.alchemy-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  padding: 10px 8px 12px 10px;
  background: #5c4a2b;
  color: #f4efe6;
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 0 #d8c4a4, 8px 6px 0 #eee6d8;
}

.alchemy-tab[aria-expanded="true"] .alchemy-cover {
  background: #3f3018;
}

.pets-tab {
  position: absolute;
  top: 184px;
  left: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.pets-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  padding: 10px 8px 12px 10px;
  background: #4a5c2b;
  color: #f4efe6;
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 0 #d8c4a4, 8px 6px 0 #eee6d8;
}

.pets-tab[aria-expanded="true"] .pets-cover {
  background: #314018;
}

.greenhouse-tab {
  position: absolute;
  top: 266px;
  left: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.greenhouse-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  padding: 10px 8px 12px 10px;
  background: #2b5c4a;
  color: #f4efe6;
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 0 #d8c4a4, 8px 6px 0 #eee6d8;
}

.greenhouse-tab[aria-expanded="true"] .greenhouse-cover {
  background: #183f34;
}

.greenhouse-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.npc-tab {
  position: absolute;
  top: 348px;
  left: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.npc-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  padding: 10px 8px 12px 10px;
  background: #3d4a6e;
  color: #f4efe6;
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 0 #d8c4a4, 8px 6px 0 #eee6d8;
}

.npc-tab[aria-expanded="true"] .npc-cover {
  background: #2a3348;
}

.npc-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.story-tab {
  position: absolute;
  top: 430px;
  left: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.story-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  padding: 10px 8px 12px 10px;
  background: #6e4a3d;
  color: #f4efe6;
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 0 #d8c4a4, 8px 6px 0 #eee6d8;
}

.story-tab[aria-expanded="true"] .story-cover {
  background: #4a3028;
}

.story-tab .story-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.dorm-mode-btn {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  min-width: 56px;
  height: auto;
  padding: 8px 8px 9px;
  border: 1px solid #c9b89a;
  border-radius: 14px;
  background: #fffdf8;
  color: #6e4b2a;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(80, 50, 20, 0.16);
  font: inherit;
}

.dorm-mode-btn span {
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.15;
  white-space: nowrap;
}

.dorm-mode-btn:hover {
  background: #f7f1e6;
}

.dorm-mode-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: #efe6d6;
}

.battle-tab {
  position: absolute;
  top: 512px;
  left: 0;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.battle-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
  padding: 10px 8px 12px 10px;
  background: #6e2b3a;
  color: #f4efe6;
  font-size: 12px;
  letter-spacing: 0.12em;
  border-radius: 0 10px 10px 0;
  box-shadow: 4px 4px 0 #d8c4a4, 8px 6px 0 #eee6d8;
}

.battle-tab[aria-expanded="true"] .battle-cover {
  background: #4a1824;
}

.battle-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.pets-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.pets-panel {
  position: absolute;
  inset: 12px 12px 12px 64px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #f7faf0;
  border: 1px solid var(--line);
  overflow: hidden;
}

.pets-panel[hidden] {
  display: none !important;
}

.npc-panel {
  position: absolute;
  inset: 12px 12px 12px 64px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #f4f6fb;
  border: 1px solid var(--line);
  overflow: hidden;
}

.npc-panel[hidden] {
  display: none !important;
}

.npc-head {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.npc-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
}

.npc-switch {
  position: static;
  height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6a5e52;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.npc-switch.is-on {
  color: #b15a1a;
  border-bottom-color: #b15a1a;
}

.npc-gallery-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}

.npc-ward-help {
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2a6fbf;
  cursor: pointer;
}

.npc-ward-help-dialog {
  width: min(640px, calc(100vw - 32px));
}

.npc-ward-help-body {
  max-height: min(70vh, 640px);
  overflow: auto;
  padding: 14px 18px 18px;
}

.npc-ward-help-body h4 {
  margin: 14px 0 6px;
  font-size: 15px;
}

.npc-ward-help-body h4:first-child {
  margin-top: 0;
}

.npc-ward-help-body ol,
.npc-ward-help-body p {
  margin: 0 0 8px;
  line-height: 1.7;
}

.npc-ward-help-body ol {
  padding-left: 1.4em;
}

.npc-ward-save-msg.is-ok {
  color: #2f7d4a;
}

.npc-ward-save-msg.is-bad {
  color: #a33b24;
}

.npc-gallery[hidden],
.npc-gallery-bar[hidden],
.npc-wardrobe[hidden] {
  display: none !important;
}

.btn-npc-add {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3d4a6e;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.npc-gallery {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px;
  align-content: flex-start;
}

.npc-section {
  width: 100%;
}

.npc-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #5c3218;
  letter-spacing: 0.04em;
}

.npc-section-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.npc-empty {
  margin: 24px auto;
  color: #6e5c48;
}

.npc-tile {
  width: 72px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.npc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--npc-hue, 28) 42% 62%);
  color: #fffdf8;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(40, 32, 24, 0.18);
}

.npc-tile em {
  font-style: normal;
  font-size: 12px;
  color: #4a3318;
}

.npc-tile strong {
  font-size: 12px;
  font-weight: 700;
  color: #3d2412;
}

.npc-modal {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 24, 20, 0.35);
}

.npc-modal[hidden] {
  display: none !important;
}

.npc-dialog {
  width: min(560px, 92%);
  max-height: 92%;
  overflow: auto;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px 14px;
}

.npc-dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.npc-dialog-head h3 {
  margin: 0;
  font-size: 16px;
}

.npc-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.npc-title-tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.npc-title-tools[hidden] {
  display: none !important;
}

.npc-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3d4a6e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.npc-icon-btn.is-on {
  color: #7a3f22;
}

.npc-icon-btn .npc-icon-on {
  display: none;
}

.npc-icon-btn.is-on .npc-icon-off {
  display: none;
}

.npc-icon-btn.is-on .npc-icon-on {
  display: block;
}

.npc-icon-btn[hidden] {
  display: none !important;
}

.npc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 13px;
  flex: 1;
}

.npc-field[hidden] {
  display: none !important;
}

.npc-field input,
.npc-field select {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
}

.npc-heart-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.npc-heart-wrap input {
  flex: 1;
}

#npc-heart-rank {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.npc-field-row {
  display: flex;
  gap: 8px;
}

.npc-id-block,
.npc-stats {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #ead9b8;
  border-radius: 8px;
  background: #fbf8f2;
}

.npc-id-head,
.npc-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}

.npc-mini {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.npc-id-line,
.npc-stat-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6e5c48;
}

.npc-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
}

.npc-stat-grid div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f3eee4;
}

.npc-stat-grid b {
  font-size: 15px;
}

.npc-dev-only {
  display: none !important;
}

.npc-modal.is-dev .npc-dev-only {
  display: inline-flex !important;
}

.npc-final {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 13px;
}

.npc-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.npc-delete {
  height: 32px;
  padding: 0 14px;
  margin-right: auto;
  border: 1px solid #c45c48;
  border-radius: 8px;
  background: #fff;
  color: #c45c48;
  cursor: pointer;
}

.npc-dev-switch[hidden] {
  display: none !important;
}

.npc-modal.is-view .npc-dialog-body,
.npc-modal.is-view .npc-dev-switch {
  pointer-events: none;
}

.npc-modal.is-view #npc-heart-row {
  pointer-events: auto;
}

.pets-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.pets-head h2 {
  margin: 0;
  font-size: 16px;
  flex: 1;
}

.btn-kennel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}

.btn-kennel[aria-expanded="true"] {
  border-color: var(--accent);
  background: #efe6d6;
}

.pets-yard {
  flex: 1;
  padding: 16px 20px 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.yard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.care-line {
  margin: 0;
  flex: 1;
  min-width: 220px;
  font-size: 13px;
}

.btn-care-all {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #4a5c2b;
  background: #4a5c2b;
  color: #fff;
  cursor: pointer;
}

.care-log {
  margin: 0;
  font-size: 13px;
  color: #4a5c2b;
}

.care-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.btn-step {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
}

.btn-step.is-done {
  background: #d9ecb8;
  border-color: #8aa35a;
}

.btn-step:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.care-done {
  margin: 0;
  font-size: 12px;
  color: #4a5c2b;
}

.yard-slot small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.yard-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.yard-slot {
  min-height: 168px;
  padding: 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yard-slot.is-empty {
  border: 1.5px dashed #b7c49a;
  background: rgba(255, 255, 255, 0.45);
  color: var(--muted);
  align-items: center;
  justify-content: center;
}

.yard-slot.is-filled {
  border: 1px solid #8aa35a;
  background: #fff;
}

.btn-yard-back {
  margin-top: auto;
  height: 28px;
  border: 1px solid var(--line);
  background: #f3eee4;
  cursor: pointer;
}

.btn-add-slot {
  align-self: flex-start;
  height: 36px;
  padding: 0 14px;
  border: 1px dashed #8aa35a;
  background: #fff;
  color: #4a5c2b;
  cursor: pointer;
}

.pets-hint,
.kennel-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.kennel-panel {
  position: absolute;
  inset: 52px 12px 12px 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(40, 28, 16, 0.12);
  overflow: hidden;
}

.kennel-panel[hidden] {
  display: none !important;
}

.kennel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.kennel-head h3 {
  margin: 0;
  flex: 1;
  font-size: 15px;
}

.kennel-hint {
  padding: 8px 12px 0;
}

.kennel-grid {
  flex: 1;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px;
}

.kennel-card {
  position: relative;
  padding: 10px 12px 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.kennel-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.kennel-card-head strong {
  flex: 1;
}

.kennel-count {
  font-size: 12px;
  color: var(--muted);
}

.kennel-card p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #3a2c1a;
}

.kennel-meta {
  color: var(--muted) !important;
}

.btn-care {
  position: absolute;
  left: 10px;
  bottom: 8px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #4a5c2b;
  background: #4a5c2b;
  color: #fff;
  cursor: pointer;
}

.alchemy-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.alchemy-panel {
  position: absolute;
  inset: 12px 12px 12px 64px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border: 1px solid var(--line);
  overflow: hidden;
}

.alchemy-panel[hidden] {
  display: none !important;
}

.alchemy-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.alchemy-head h2 {
  margin: 0;
  font-size: 16px;
  flex: 1;
}

.sim-switch {
  font-size: 13px;
  color: var(--muted);
}

.gender-switch {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.gender-btn {
  flex: 1;
  height: 40px;
  border: 0;
  background: #f3eee4;
  color: var(--muted);
  cursor: pointer;
}

.gender-btn.is-on {
  background: #fffdf8;
  color: var(--accent);
  font-weight: 600;
}

.alchemy-bench {
  flex: 1;
  overflow: auto;
  padding: 14px;
}

.alchemy-bench[hidden] {
  display: none !important;
}

.brew-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 20px;
  position: relative;
}

.brew-stage-head {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 36px;
}

.brew-book-wrap {
  position: relative;
  z-index: 3;
}

.brew-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #c9b89a;
  border-radius: 10px;
  background: #f7f1e6;
  color: #5c4630;
  cursor: pointer;
}

.brew-book-btn[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.brew-book-panel {
  position: absolute;
  top: 46px;
  left: 0;
  width: min(320px, 78vw);
  max-height: 360px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #c9b89a;
  border-radius: 10px;
  background: #fffdf8;
  box-shadow: 0 12px 28px rgba(60, 40, 20, 0.16);
}

.brew-book-panel[hidden] {
  display: none !important;
}

.brew-book-head {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #3a2c1a;
}

.brew-book-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.brew-book-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.brew-book-item strong {
  font-size: 13px;
  color: #3a2c1a;
}

.brew-book-item span,
.brew-book-item small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.brew-book-item.is-match {
  border-color: #2d6a4f;
  box-shadow: inset 0 0 0 1px #2d6a4f;
}

.brew-book-empty {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.brew-dur-line {
  flex: 1;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.brew-stage-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin: 12px 0 4px;
}

.brew-cauldron-circle {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 3px solid #b89a6a;
  background:
    radial-gradient(circle at 35% 30%, #fff8ee 0%, transparent 42%),
    radial-gradient(circle at 50% 60%, #d4b88a 0%, #8a6a3e 70%, #5c4630 100%);
  box-shadow:
    inset 0 8px 18px rgba(255, 255, 255, 0.25),
    inset 0 -10px 20px rgba(40, 25, 10, 0.35),
    0 10px 24px rgba(80, 50, 20, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff8ee;
  text-shadow: 0 1px 2px rgba(40, 25, 10, 0.45);
}

.brew-cauldron-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.brew-cauldron-dur {
  font-size: 13px;
  opacity: 0.92;
}

.brew-mat-slots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.brew-slot-wrap {
  position: relative;
  width: 78px;
  height: 78px;
}

.brew-slot-clear {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #b07060;
  border-radius: 50%;
  background: #fff4f1;
  color: #8a2f22;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(80, 40, 20, 0.15);
}

.brew-slot-clear[hidden] {
  display: none !important;
}

.brew-slot-circle {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 2px dashed #b89a6a;
  background: #f7f1e6;
  color: #5c4630;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px;
  font: inherit;
}

.brew-slot-circle.is-filled {
  border-style: solid;
  background: #efe6d6;
}

.brew-slot-plus {
  font-size: 28px;
  line-height: 1;
  color: #8a7355;
}

.brew-slot-name {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.brew-slot-qty {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.brew-hint {
  margin: 0;
  max-width: 520px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: #6a6258;
}

.btn-brew-go {
  width: min(420px, 100%);
  height: 48px;
  margin-top: 4px;
  border: 1px solid #8a6a3e;
  border-radius: 8px;
  background: linear-gradient(180deg, #c9a66b, #a07840);
  color: #fffaf2;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(80, 50, 20, 0.18);
}

.btn-brew-go:hover:not(:disabled) {
  filter: brightness(1.04);
}

.btn-brew-go:disabled {
  opacity: 0.45;
  cursor: default;
  filter: none;
}

.brew-log-wrap {
  align-self: stretch;
  margin-top: 8px;
  max-width: 520px;
  width: 100%;
}

.brew-mat-picker {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 28, 16, 0.28);
}

.brew-mat-picker[hidden] {
  display: none !important;
}

.brew-mat-picker-dialog {
  width: min(360px, 92%);
  max-height: 70%;
  overflow: auto;
  background: #fffdf8;
  border: 1px solid #c9b89a;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(40, 25, 10, 0.22);
}

.brew-mat-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.brew-mat-picker-head h3 {
  margin: 0;
  font-size: 14px;
}

.brew-mat-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.brew-pick-mat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.brew-pick-mat small {
  color: var(--muted);
}

.brew-qty-step {
  padding: 14px 16px 16px;
}

.brew-qty-name {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #3a2c1a;
}

.brew-qty-stock {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.brew-qty-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
}

.brew-qty-field input {
  width: 96px;
  font: inherit;
  font-size: 15px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.brew-qty-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.brew-qty-actions button {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: #f7f1e6;
  cursor: pointer;
}

.brew-qty-actions button.is-primary {
  border-color: #8a6a3e;
  background: #c9a66b;
  color: #fffaf2;
}

.brew-risk-modal {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 28, 16, 0.4);
}

.brew-risk-modal[hidden] {
  display: none !important;
}

.brew-risk-dialog {
  width: min(380px, 92%);
  padding: 16px 18px 14px;
  border: 1px solid #c9b89a;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 16px 36px rgba(40, 25, 10, 0.24);
}

.brew-risk-dialog h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #3a2c1a;
}

.brew-risk-text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #5c4630;
}

.brew-risk-skip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 13px;
  color: #5c4630;
  cursor: pointer;
  user-select: none;
}

.brew-risk-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.brew-risk-actions button {
  font: inherit;
  font-size: 13px;
  padding: 7px 16px;
  border: 1px solid var(--line);
  background: #f7f1e6;
  cursor: pointer;
}

.brew-risk-actions button.is-primary {
  border-color: #8a6a3e;
  background: #c9a66b;
  color: #fffaf2;
}

.bag-card-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: #fff;
}

.bag-card-pick small {
  font-size: 11px;
  color: var(--accent);
}

.bag-body.is-brew-pick .bag-card-pick:hover {
  border-color: var(--accent);
}

.brew-slot-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 12px;
}

.brew-slot-tools button {
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: #f7f1e6;
  cursor: pointer;
}

.craft-item-card {
  margin-bottom: 16px;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, #fff8ee, #f4e6cf);
  border: 1px solid #d9c7a8;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(80, 50, 20, 0.08);
}

.craft-item-name {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  color: #3a2c1a;
}

.affix-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.craft-item-card.is-generic-only .affix-slots {
  grid-template-columns: 1fr;
}

.affix-well {
  min-height: 84px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #c9b89a;
  box-shadow: inset 0 4px 10px rgba(60, 40, 20, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.22);
}

.affix-well-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.affix-well-label {
  font-size: 11px;
  color: #5c4a34;
  letter-spacing: 0.08em;
}

.btn-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  padding: 0;
  border: 1px solid #8a7355;
  border-radius: 4px;
  background: #efe4d0;
  color: #5c4a34;
  cursor: pointer;
}

.btn-lock[aria-pressed="true"] {
  background: #5c4a34;
  color: #fff;
  border-color: #3a2c1a;
}

.affix-well.is-locked {
  outline: 2px solid #5c4a34;
}

.affix-well p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #24180e;
}

.affix-well.tone-wood {
  background: #d8cbb3;
}

.affix-well.tone-gold {
  background: linear-gradient(180deg, #f6e3a1, #d4a84a);
}

.affix-well.tone-gem {
  background: linear-gradient(180deg, #d9f4ff, #6ec8ee);
  box-shadow: inset 0 4px 10px rgba(20, 80, 120, 0.22), 0 0 10px rgba(90, 200, 255, 0.35);
}

.affix-well.tone-exclusive {
  background: linear-gradient(135deg, #3a1a4a, #8a4bb0 45%, #c9a227);
  box-shadow: inset 0 4px 10px rgba(20, 8, 30, 0.35), 0 0 14px rgba(201, 162, 39, 0.45);
}

.affix-well.tone-exclusive .affix-well-label,
.affix-well.tone-exclusive .btn-lock,
.affix-well.tone-exclusive p {
  color: #fff8dc;
  border-color: #e8d48b;
}

.affix-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.45;
}

.affix-tier {
  margin-right: 4px;
}

.affix-empty {
  background: #eee8dc;
  color: #8a7a66;
}

.affix-wood {
  background: #efe6d6;
  color: #6b5a45;
  border: 1px solid #c4b49a;
}

.affix-gold {
  background: linear-gradient(180deg, #fff6c8, #efc14a);
  color: #7a4e00;
  border: 1px solid #d4a017;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.affix-gem {
  background: linear-gradient(180deg, #f0fbff, #7ad7ff);
  color: #084c7a;
  border: 1px solid #3aa0d8;
  box-shadow: 0 0 8px rgba(80, 200, 255, 0.4);
}

.affix-exclusive {
  background: linear-gradient(135deg, #2a1038 0%, #6b2d8a 42%, #c9a227 100%);
  color: #fff8dc;
  border: 1px solid #e8d48b;
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.55), inset 0 0 8px rgba(255, 220, 140, 0.22);
  letter-spacing: 0.03em;
}

.compare-row.tone-wood {
  background: #f4eee4;
  border: 1px solid #d2c4ae;
}

.compare-row.tone-gold {
  background: linear-gradient(90deg, #fff8dc, #f3d67a);
  border: 1px solid #d4a017;
}

.compare-row.tone-gem {
  background: linear-gradient(90deg, #f3fbff, #b8ebff);
  border: 1px solid #3aa0d8;
  box-shadow: 0 0 8px rgba(80, 200, 255, 0.28);
}

.compare-row.tone-exclusive {
  background: linear-gradient(90deg, #2e163c, #6b2d8a 50%, #b8922a);
  border: 1px solid #e8d48b;
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.4);
  color: #fff8dc;
}

.compare-row.tone-exclusive .compare-text {
  color: #fff8dc;
}

.affix-compare[hidden] {
  display: none !important;
}

.compare-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 6px;
}

.compare-row .compare-text {
  flex: 1;
  margin: 0;
  line-height: 1.4;
}

.btn-replace {
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}

.btn-replace:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.alchemy-grid {
  display: grid;
  grid-template-columns: 130px minmax(120px, 1fr) 150px 200px;
  gap: 14px;
  min-height: 100%;
}

.alchemy-grid.is-brew {
  grid-template-columns: minmax(180px, 1.1fr) minmax(160px, 1fr) 220px;
}

.alchemy-grid h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.slot-list,
.mat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mat-list-scroll {
  max-height: 280px;
  overflow: auto;
}

.charm-hint {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.45;
  color: #6a6258;
}

.slot-btn {
  display: flex;
  justify-content: space-between;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}

.slot-btn.is-on {
  border-color: var(--accent);
  color: var(--accent);
}

.slot-btn span {
  color: var(--muted);
  font-size: 12px;
}

.slot-btn[data-recipe] {
  height: auto;
  min-height: 40px;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 8px;
  text-align: left;
  gap: 2px 8px;
}

.slot-btn[data-recipe] small {
  width: 100%;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.slot-btn.is-match {
  border-color: #2d6a4f;
  box-shadow: inset 0 0 0 1px #2d6a4f;
}

.brew-learn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.brew-learn-row button {
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}

.brew-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.brew-qty em {
  font-style: normal;
  min-width: 1.2em;
  text-align: center;
}

.brew-qty-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}

.brew-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.brew-mat-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.brew-mat-row.is-short {
  border-color: #c45c4a;
  color: #8a2f22;
  background: #fff4f1;
}

.brew-force-fail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  font-size: 12px;
}

.refine-log .is-ok {
  color: #2d6a4f;
}

.refine-log .is-fail {
  color: #9b3a2f;
}

.slot-empty {
  margin: 0;
  padding: 8px 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.mat-row,
.mat-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.mat-check.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mat-row input {
  width: 56px;
  height: 28px;
}

.gold-chance {
  margin: 0 0 6px;
  font-weight: 600;
}

.pity-line {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.refine-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.btn-refine {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.btn-refine-10 {
  background: #fff;
  color: var(--accent);
}

.refine-result {
  min-height: 40px;
  font-size: 13px;
}

.sim-box {
  margin: 12px 0;
  padding: 10px;
  border: 1px dashed var(--line);
  font-size: 12px;
}

.sim-box label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.sim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.sim-report {
  margin: 0;
  max-height: 120px;
  overflow: auto;
  background: #f5f5f5;
  padding: 8px;
}

.log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 8px;
}

.log-head h3 {
  margin: 0;
}

.btn-icon {
  width: 28px;
  height: 28px;
  padding: 4px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.btn-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.refine-log {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  max-height: 160px;
  overflow: auto;
}

.brew-placeholder {
  color: var(--muted);
}

.book-panel {
  position: absolute;
  inset: 12px 12px 12px 64px;
  z-index: 2;
  background: #fffdf8;
  border: 1px solid var(--line);
  overflow: hidden;
}

.story-panel-wrap {
  position: absolute;
  inset: 12px 12px 12px 64px;
  z-index: 2;
  background: #ece7e2;
  border: 1px solid var(--line);
  overflow: hidden;
}

.story-panel-host {
  position: absolute;
  inset: 0;
}

.book-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: #fffdf8;
}

.book-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.book-page-lead {
  flex: 1;
  min-width: 0;
}

.book-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.book-page-head .btn-close {
  align-self: flex-start;
  margin-top: 2px;
}

.battle-filters {
  margin-top: 6px;
  flex-direction: column;
  gap: 2px;
}

.battle-filters:not([hidden]) {
  display: flex;
}

.drop-select {
  display: none;
  height: 26px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  color: #5c3218;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.drop-select:not([hidden]) {
  display: inline-block;
}

.battle-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 3px;
}

.battle-filter-label {
  width: 3.6em;
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted);
}

.battle-filter-chip {
  border: 0;
  min-height: 18px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 18px;
  cursor: pointer;
  opacity: 0.42;
}

.battle-filter-chip.is-on {
  opacity: 1;
}

.book-page-head h2 {
  margin: 0;
  font-size: 15px;
}

.book-scale-hint {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  font-weight: 400;
}

.book-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.book-marks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 12px;
  flex-shrink: 0;
}

.book-mark {
  width: 32px;
  padding: 16px 4px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: #c4a574;
  color: #4a3318;
  font-size: 12px;
  writing-mode: vertical-rl;
  letter-spacing: 0.18em;
  cursor: pointer;
}

.book-mark.is-on {
  background: #7a3f22;
  color: #f4efe6;
}

.btn-close {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
}

.lexicon-wrap {
  overflow: auto;
  padding: 0;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.slots-page {
  padding: 12px 16px 20px;
}

.slots-lead {
  margin: 0 0 12px;
  color: #4a3318;
  font-size: 13px;
  line-height: 1.7;
}

.slots-table {
  margin-bottom: 16px;
}

.slots-gold-title {
  margin: 20px 0 8px;
  font-size: 15px;
  color: #3d2a16;
}

.gold-priceless {
  color: #7a4a12;
  font-style: italic;
}

.slots-table:last-child {
  margin-bottom: 0;
}

.lexicon {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.55;
}

.lexicon th,
.lexicon td {
  border: 1px solid #d5d5d5;
  vertical-align: top;
  padding: 8px 10px;
}

.lexicon thead th {
  background: #9aa0a6;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

.battle-table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 0;
}

.battle-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  box-shadow: 0 1px 0 #d5d5d5;
}

.lexicon .col-item {
  width: 92px;
  background: #f7f7f7;
  font-weight: 600;
}

.lexicon td p {
  margin: 0 0 8px;
}

.lexicon td p:last-child {
  margin-bottom: 0;
}

.lexicon .affix-name {
  font-weight: 600;
}

.generic-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 148px;
}

.generic-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px;
}

.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 2px 6px;
  font-size: 12px;
}

.tag-wood {
  background: #f2d465;
}

.tag-gold {
  background: #f3a6b5;
}

.tag-gem {
  background: #8fd0e8;
}

.val-mana {
  background: #9fe7f2;
}

.val-kindness {
  background: #f7b7c4;
}

.val-fame {
  background: #c9b7f0;
}

.animal-table {
  font-size: 13px;
}

.animal-table th {
  white-space: nowrap;
}

.animal-table .col-animal {
  width: 36%;
  background: #fbf8f2;
}

.herb-table .col-herb-name {
  width: 12%;
  background: #fbf8f2;
}

.herb-table .col-herb-id {
  width: 16%;
  font-size: 12px;
}

.herb-table .col-herb-id code {
  font-size: 11px;
  word-break: break-all;
}

.herb-table .col-herb-desc {
  width: 38%;
  font-size: 12px;
  line-height: 1.55;
  color: #4a4338;
}

.animal-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.animal-id strong {
  font-size: 14px;
}

.animal-trait,
.animal-catch {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.animal-catch {
  margin-top: 6px;
  font-size: 12px;
}

.drop-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drop-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag-yes {
  background: #52c41a;
  color: #fff;
}

.tag-no {
  background: #ff4d4f;
  color: #fff;
}

.tag-common {
  background: #ffe58f;
}

.tag-rare {
  background: #ffd6e7;
  color: #c41d7f;
}

.tag-legend {
  background: #efdbff;
  color: #531dab;
}

.tag-uncommon {
  background: #91d5ff;
}

.battle-table th {
  white-space: nowrap;
}

.battle-table .col-id code {
  font-size: 11px;
}

.battle-table td.has-num-tip {
  cursor: help;
}

.battle-num-pop {
  position: fixed;
  z-index: 80;
  max-width: 280px;
  padding: 8px 10px;
  border: 1px solid #d9c7a8;
  border-radius: 6px;
  background: #fffdf8;
  color: #3f2a18;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
  box-shadow: 0 8px 18px rgba(40, 24, 8, 0.18);
  pointer-events: none;
}

.tag-faction-arcane {
  background: #bae0ff;
  color: #003a8c;
}

.tag-faction-covenant {
  background: #ffe7ba;
  color: #ad4e00;
}

.tag-faction-bond {
  background: #d9f7be;
  color: #237804;
}

.tag-faction-element {
  background: #b7eb8f;
  color: #135200;
}

.tag-faction-blood {
  background: #ffccc7;
  color: #820014;
}

.tag-faction-secret {
  background: #efdbff;
  color: #391085;
}

.tag-faction-common {
  background: #f5f5f5;
  color: #434343;
}

.tag-faction-dark {
  background: #1f1f1f;
  color: #ffccc7;
}

.tag-card-atk {
  background: #ffccc7;
  color: #a8071a;
}

.tag-card-def {
  background: #b5f5ec;
  color: #006d75;
}

.tag-card-single {
  background: #ffd8bf;
  color: #ad4e00;
}

.tag-card-self {
  background: #efdbff;
  color: #531dab;
}

.tag-card-heal {
  background: #d9f7be;
  color: #237804;
}

.tag-card-buff {
  background: #ffe7ba;
  color: #ad4e00;
}

.tag-card-aoe {
  background: #ffccc7;
  color: #a8071a;
}

.tag-card-cycle {
  background: #b5f5ec;
  color: #006d75;
}

.tag-card-spend {
  background: #ffd8bf;
  color: #ad4e00;
}

.tag-card-none {
  background: #f5f5f5;
  color: #595959;
}

.tag-get-y1 {
  background: #d9f7be;
  color: #237804;
}

.tag-get-y2 {
  background: #bae0ff;
  color: #003a8c;
}

.tag-get-y3 {
  background: #efdbff;
  color: #531dab;
}

.tag-get-innate {
  background: #fff1b8;
  color: #ad6800;
}

.potion-table {
  font-size: 12px;
}

.potion-table th {
  white-space: nowrap;
}

.col-effect {
  min-width: 14em;
  line-height: 1.45;
}

.tag-use-combat {
  background: #ffccc7;
  color: #820014;
}

.tag-use-explore {
  background: #d9f7be;
  color: #135200;
}

.col-id code {
  font-size: 11px;
  white-space: nowrap;
}

.col-acquire {
  min-width: 9em;
  line-height: 1.7;
}

.tag-acquire-shop {
  background: #bae0ff;
  color: #003eb3;
}

.tag-acquire-class {
  background: #ffd6e7;
  color: #c41d7f;
}

.tag-acquire-plot {
  background: #ffe7ba;
  color: #ad4e00;
}

.tag-acquire-lib {
  background: #d9f7be;
  color: #237804;
}

.json-cell {
  font-size: 11px;
  background: #f5f5f5;
  padding: 2px 6px;
  white-space: nowrap;
}

.tag-item {
  background: #69c0ff;
}

.card {
  position: relative;
  background: var(--card);
  padding: 12px 14px 12px 30px;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.card-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 22px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  background: #f7f1e6;
  color: var(--accent);
  cursor: pointer;
}

.card-toggle:hover {
  background: #efe6d6;
  color: #4a3018;
}

.card-toggle-grip {
  width: 5px;
  height: 20px;
  border-radius: 99px;
  background:
    radial-gradient(circle at 50% 3px, currentColor 1.4px, transparent 1.6px),
    radial-gradient(circle at 50% 10px, currentColor 1.4px, transparent 1.6px),
    radial-gradient(circle at 50% 17px, currentColor 1.4px, transparent 1.6px);
  opacity: 0.45;
}

.card-toggle-icon {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 0.2s ease;
}

.page.is-card-collapsed .card-toggle {
  height: 72px;
  border-radius: 16px 0 0 16px;
  border-left: 1px solid var(--line);
  border-right: 0;
}

.page.is-card-collapsed .card-toggle-icon {
  transform: rotate(180deg);
}

.card-main {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page.is-card-collapsed .card {
  padding: 0;
}

.page.is-card-collapsed .card-main {
  display: none;
}

.page.is-card-collapsed .card-toggle {
  height: 72px;
  border-radius: 16px 0 0 16px;
  border-left: 1px solid var(--line);
  border-right: 0;
}

.card-head {
  flex: 0 0 auto;
  padding-bottom: 8px;
}

.attr-block,
.equip-block,
.ability-block {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 0;
  border-top: 1px solid var(--line);
}

.equip-block {
  flex: 0 0 auto;
}

.equip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.equip-head h2 {
  margin: 0;
  font-size: 13px;
}

.equip-hint {
  margin: 0 0 6px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.equip-row[data-equip="weapon"] {
  grid-column: 1 / -1;
}

.equip-row {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.equip-label {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}

.equip-select {
  height: 26px;
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 6px;
  font-size: 12px;
}

.equip-empty {
  font-size: 10px;
  color: var(--muted);
}

.equip-detail {
  margin: 0;
  padding-left: 38px;
  font-size: 10px;
  line-height: 1.25;
  color: #5c5348;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0;
}

.equip-detail:empty {
  display: none;
}

.attr-gear {
  margin-left: 4px;
  font-size: 11px;
  color: #8a6a2a;
}

.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.card-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

.card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.card-actions .card-sim {
  margin: 0;
  white-space: nowrap;
}

.card-actions button[hidden] {
  display: none !important;
}

.card-actions button {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}

.card-actions button:hover {
  background: var(--accent);
  color: #fff;
}

#char-card:not(.is-char-sim) .name-field input,
#char-card:not(.is-char-sim) .name-field > select,
#char-card:not(.is-char-sim) .birth-row-edit {
  display: none !important;
}

#char-card.is-char-sim .field-view {
  display: none !important;
}

#char-card:not(.is-char-sim) .field-view {
  display: block;
  min-height: 28px;
  line-height: 28px;
  padding: 0 2px;
  font-size: 13px;
  color: var(--ink);
}

#char-card:not(.is-char-sim) .attr-bonus {
  appearance: textfield;
  -moz-appearance: textfield;
  border: none;
  background: transparent;
  pointer-events: none;
  padding: 0 2px;
  height: 26px;
  color: var(--ink);
}

#char-card:not(.is-char-sim) .attr-bonus::-webkit-outer-spin-button,
#char-card:not(.is-char-sim) .attr-bonus::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#char-card:not(.is-char-sim) .btn-random,
#char-card:not(.is-char-sim) #btn-ability,
#char-card:not(.is-char-sim) .ability-dot {
  opacity: 0.45;
  cursor: not-allowed;
}

.identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.name-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
}

.name-field input,
.name-field select {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
}

.name-field input:focus,
.name-field select:focus {
  border-color: var(--accent);
}

.name-field-birth,
.name-field-college {
  grid-column: auto;
}

.birth-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.birth-row select {
  flex: 1;
  min-width: 0;
}

.birth-unit {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
}

.college-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.attr-hint {
  margin: 0 0 4px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted);
}

.attr-cols,
.attr-row {
  display: grid;
  grid-template-columns: 40px 44px 44px minmax(48px, 1fr) 48px;
  align-items: center;
  gap: 6px;
}

.attr-cols {
  margin-bottom: 2px;
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}

.attr-cols span:first-child {
  text-align: left;
}

.attr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.attr-row {
  font-size: 13px;
}

.attr-label {
  color: var(--muted);
  text-align: left;
}

.attr-base,
.attr-college,
.attr-final {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.attr-college {
  color: var(--accent);
}

.attr-bonus {
  width: 100%;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: right;
  font-size: 13px;
  outline: none;
}

.attr-bonus:focus {
  border-color: var(--accent);
}

.attr-bonus::-webkit-outer-spin-button,
.attr-bonus::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.attr-bonus {
  appearance: textfield;
}

.attr-final {
  font-weight: 600;
}

.attr-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.btn-random {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}

.btn-random:hover {
  background: var(--accent);
  color: #fff;
}

.ability-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.ability-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

#btn-ability {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}

#btn-ability:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ability-track {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ability-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.ability-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.ability-dot.is-lit {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(110, 75, 42, 0.14);
}

.ability-dot.is-out {
  border-color: var(--line);
  background: #e8e2d8;
}

.ability-bar {
  height: 6px;
  border-radius: 99px;
  background: #e8e2d8;
  overflow: hidden;
}

.ability-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
}

.ability-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .page {
    grid-template-columns: 1fr;
  }

  .page.is-card-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 32px;
  }

  .stage {
    min-height: 180px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

.bag-fab,
.spell-fab,
.arena-fab,
.love-fab {
  position: fixed;
  bottom: 18px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 56px;
  padding: 8px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #fffdf8;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(40, 28, 16, 0.22);
  transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
}

.love-fab {
  right: 18px;
  background: #8a3d4e;
}

.bag-fab {
  right: 84px;
  background: #6e4b2a;
}

.spell-fab {
  right: 150px;
  background: #4a3d6e;
}

.arena-fab {
  right: 216px;
  background: #7a3f22;
}

.bag-fab span,
.spell-fab span,
.arena-fab span,
.love-fab span {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.bag-fab[aria-expanded="true"] {
  background: #4a3018;
}

.spell-fab[aria-expanded="true"] {
  background: #322850;
}

.love-fab[aria-expanded="true"] {
  background: #5e2834;
}

.bag-panel {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 41;
  width: min(420px, calc(100vw - 36px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(40, 28, 16, 0.2);
  overflow: hidden;
}

.bag-panel[hidden] {
  display: none !important;
}

.bag-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.bag-head h2 {
  margin: 0;
  flex: 1;
  font-size: 16px;
}

.bag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.bag-tab {
  flex: 1 1 30%;
  height: 34px;
  border: 0;
  background: #f3eee4;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}

.bag-tab.is-on {
  background: #fffdf8;
  color: var(--accent);
  font-weight: 600;
}

.bag-body {
  flex: 1;
  overflow: auto;
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bag-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.bag-card.is-zero {
  opacity: 0.55;
}

.bag-card strong {
  flex: 1;
}

.bag-card p {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.bag-count {
  font-size: 13px;
  color: var(--accent);
}

.bag-empty {
  margin: 12px 4px;
  color: var(--muted);
  font-size: 13px;
}

.map-fab {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 56px;
  padding: 8px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #3d5c6e;
  color: #fffdf8;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(40, 28, 16, 0.22);
  transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
}

body.is-story-open .bag-fab,
body.is-story-open .spell-fab,
body.is-story-open .arena-fab,
body.is-story-open .love-fab {
  transform: translateY(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-story-open .map-fab {
  transform: translateY(-120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.map-fab span {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.map-fab[aria-expanded="true"] {
  background: #2a4452;
}

body.is-map-open .map-fab,
body.is-map-open .bag-fab,
body.is-map-open .spell-fab,
body.is-map-open .arena-fab,
body.is-map-open .love-fab,
body.is-map-open .bag-panel,
body.is-map-open .love-page,
body.is-map-open .dorm-page {
  display: none !important;
}

body.is-love-open .map-fab,
body.is-love-open .bag-fab,
body.is-love-open .spell-fab,
body.is-love-open .arena-fab,
body.is-love-open .love-fab,
body.is-love-open .bag-panel,
body.is-love-open .dorm-page {
  display: none !important;
}

body.is-dorm-open .map-fab,
body.is-dorm-open .bag-fab,
body.is-dorm-open .spell-fab,
body.is-dorm-open .arena-fab,
body.is-dorm-open .love-fab {
  display: none !important;
}

body.is-dorm-open .bag-panel:not([hidden]),
body.is-dorm-open .spellbook-panel:not([hidden]) {
  display: flex !important;
  z-index: 70;
}

body.is-dorm-open .love-page:not([hidden]) {
  display: block !important;
  z-index: 70;
}

body.is-dorm-open .wardrobe-page:not([hidden]) {
  display: flex !important;
  z-index: 70;
}

/* 寝室上头像打开玩家面板（角色卡浮层） */
.dorm-player-backdrop {
  position: fixed;
  inset: 0;
  z-index: 78;
  background: rgba(20, 16, 12, 0.35);
}

.dorm-player-backdrop[hidden] {
  display: none !important;
}

body.is-dorm-player-card .card {
  position: fixed !important;
  top: 24px;
  right: 24px;
  bottom: 24px;
  width: min(380px, calc(100vw - 48px));
  height: auto !important;
  z-index: 80;
  padding: 12px 14px 12px 30px !important;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  overflow: auto;
}

body.is-dorm-player-card .page.is-card-collapsed .card-main {
  display: flex !important;
}

body.is-dorm-player-card .card-toggle {
  display: none;
}

body.is-map-open .spellbook-panel:not([hidden]) {
  display: flex !important;
  z-index: 70;
}

body:has(.page:not(.is-card-collapsed)) .map-fab,
body:has(.page:not(.is-card-collapsed)) .bag-fab,
body:has(.page:not(.is-card-collapsed)) .spell-fab,
body:has(.page:not(.is-card-collapsed)) .arena-fab,
body:has(.page:not(.is-card-collapsed)) .love-fab {
  display: none !important;
}

.love-page {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #f4efe6;
  color: #3d2412;
  overflow: auto;
}

.love-page[hidden] {
  display: none !important;
}

.wardrobe-page {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #1a1c24 0%, #2a2430 45%, #1e222c 100%);
  color: #f2efe8;
  overflow: hidden;
}

.wardrobe-page[hidden] {
  display: none !important;
}

.wardrobe-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 8px;
  flex: 0 0 auto;
}

.wardrobe-head h2 {
  margin: 0;
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #e8dcc0;
}

.wardrobe-styles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 10px;
}

.wardrobe-styles[hidden] {
  display: none !important;
}

.wardrobe-style-btn,
.wardrobe-cat-btn,
.wardrobe-act {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(216, 196, 160, 0.28);
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.35);
  color: #e8dcc0;
  font-size: 13px;
  cursor: pointer;
}

.wardrobe-style-btn:hover,
.wardrobe-cat-btn:hover,
.wardrobe-act:hover {
  border-color: rgba(216, 196, 160, 0.55);
}

.wardrobe-style-btn.is-on,
.wardrobe-cat-btn.is-on {
  background: rgba(216, 196, 160, 0.2);
  border-color: rgba(216, 196, 160, 0.65);
  color: #fff8e8;
}

.wardrobe-cat-note {
  font-size: 10px;
  font-style: normal;
  opacity: 0.6;
  margin-left: 4px;
}

.wardrobe-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(200px, 0.9fr) minmax(260px, 1.2fr);
  gap: 14px;
  padding: 0 18px 18px;
}

.wardrobe-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.wardrobe-stage {
  position: relative;
  flex: 1;
  min-height: 280px;
  border-radius: 16px;
  border: 1px solid rgba(216, 196, 160, 0.22);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 248, 232, 0.12), transparent 55%),
    rgba(8, 10, 14, 0.45);
  overflow: hidden;
}

.wardrobe-layer-img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

.npc-wardrobe {
  flex: 1;
  overflow: auto;
  padding: 14px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.npc-ward-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.npc-ward-row h3,
.npc-ward-note {
  margin: 0;
  font-size: 13px;
  color: #5c3218;
}

.npc-ward-note {
  color: #6a5e52;
  line-height: 1.5;
}

.npc-ward-chip,
.npc-ward-add {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e4ddd4;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.npc-ward-chip.is-on {
  border-color: #b15a1a;
  color: #b15a1a;
}

.npc-ward-chip-wrap {
  position: relative;
  display: inline-flex;
}

.npc-ward-chip-x {
  display: none;
  position: absolute;
  top: -7px;
  right: -7px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c4523a;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  cursor: pointer;
}

.npc-ward-chip-wrap.is-on .npc-ward-chip-x {
  display: block;
}

.npc-ward-chip-input {
  height: 32px;
  width: 120px;
  box-sizing: border-box;
}

.npc-ward-row.is-sorting .npc-ward-chip-wrap {
  transition: transform 180ms ease;
}

.npc-ward-chip-wrap.is-dragging {
  z-index: 2;
}

.npc-ward-chip-wrap.is-dragging .npc-ward-chip {
  border-color: #b15a1a;
  color: #b15a1a;
  background: #fffaf6;
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(80, 42, 18, 0.14);
}

.npc-ward-chip-wrap.is-dragging .npc-ward-chip-x {
  display: none;
}

.npc-ward-drop {
  width: 10px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  pointer-events: none;
}

.npc-ward-drop i {
  display: block;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: #b15a1a;
  animation: npc-ward-drop-in 160ms ease forwards;
}

@keyframes npc-ward-drop-in {
  from { height: 0; }
  to { height: 22px; }
}

.npc-ward-cat-warn {
  font-size: 12px;
  color: #8a5a3a;
}

.npc-ward-base,
.npc-ward-part {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e4ddd4;
  border-radius: 8px;
  background: #fff;
}

.npc-ward-thumb {
  width: 48px;
  height: 64px;
  border-radius: 6px;
  background: #d9d9d9 center bottom / contain no-repeat;
  flex: 0 0 auto;
}

.npc-ward-part {
  margin-top: 8px;
}

.npc-ward-part-meta {
  min-width: 0;
}

.npc-ward-part-meta > strong,
.npc-ward-part-meta > input {
  display: block;
}

.npc-ward-part-layer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.npc-ward-part-layer select {
  height: 28px;
  min-width: 72px;
}

.npc-ward-dup-toast {
  position: fixed;
  z-index: 160;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 0 0;
  border-radius: 8px;
  background: #fffdf8;
  border: 1px solid #c4523a;
  box-shadow: 0 10px 24px rgba(40, 28, 16, 0.2);
  color: #3d2412;
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
}

.npc-ward-dup-toast-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 12px 10px 16px;
}

.npc-ward-dup-bar {
  height: 3px;
  background: #f3e4dc;
}

.npc-ward-dup-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: #c4523a;
  transform-origin: left center;
  animation: npc-ward-dup-bar 3s linear forwards;
}

@keyframes npc-ward-dup-bar {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.npc-ward-dup-toast button {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6e4b2a;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.npc-ward-part-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.npc-ward-pencil {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e4ddd4;
  border-radius: 8px;
  background: #fff;
  color: #5c3218;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.npc-ward-part input[type="text"],
.npc-ward-part input[type="number"],
.npc-ward-row select,
.npc-ward-name-create input,
.npc-ward-name-row input {
  height: 32px;
  min-width: 160px;
  box-sizing: border-box;
}

.npc-ward-name-dialog {
  width: min(480px, calc(100vw - 32px));
}

.npc-ward-name-list,
.npc-ward-name-create {
  padding: 12px 14px;
}

.npc-ward-name-row,
.npc-ward-name-create {
  display: flex;
  gap: 8px;
  align-items: center;
}

.npc-ward-name-row + .npc-ward-name-row {
  margin-top: 8px;
}

.npc-ward-name-row span {
  flex: 1;
}

.npc-ward-name-row button,
.npc-ward-name-create button {
  height: 32px;
  padding: 0 10px;
  cursor: pointer;
}

.npc-ward-save {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #e07a2f;
  color: #fff;
  cursor: pointer;
}

.wardrobe-layer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 18px 18px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.wardrobe-layer span {
  font-size: 10px;
  opacity: 0.7;
}

.wardrobe-layer em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.wardrobe-layer-base {
  border-radius: 40% 40% 18px 18px;
}

.wardrobe-layer.wardrobe-layer-img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

.wardrobe-attrs,
.wardrobe-preview-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(242, 239, 232, 0.62);
}

.wardrobe-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(216, 196, 160, 0.18);
  background: rgba(8, 10, 14, 0.35);
  padding: 12px;
}

.wardrobe-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wardrobe-parts {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  align-content: start;
}

.wardrobe-part {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(242, 239, 232, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.wardrobe-part:hover {
  border-color: rgba(216, 196, 160, 0.45);
}

.wardrobe-part.is-on {
  border-color: rgba(216, 196, 160, 0.75);
  background: rgba(216, 196, 160, 0.12);
}

.wardrobe-part.is-worn {
  box-shadow: inset 0 0 0 1px rgba(180, 220, 160, 0.45);
}

.wardrobe-part.is-locked {
  opacity: 0.55;
}

.wardrobe-part-swatch {
  display: block;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wardrobe-part strong {
  font-size: 13px;
}

.wardrobe-part small {
  font-size: 11px;
  color: rgba(242, 239, 232, 0.55);
}

.wardrobe-empty {
  margin: 12px 4px;
  color: rgba(242, 239, 232, 0.55);
  font-size: 13px;
}

.wardrobe-detail {
  border-top: 1px solid rgba(242, 239, 232, 0.12);
  padding-top: 10px;
}

.wardrobe-detail h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: #e8dcc0;
}

.wardrobe-part-desc {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(242, 239, 232, 0.78);
  white-space: pre-wrap;
}

.wardrobe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 720px) {
  .wardrobe-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .wardrobe-stage {
    min-height: 220px;
  }
}

.love-view {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

.love-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.love-head h2 {
  margin: 0;
  flex: 1;
  font-size: 20px;
}

.love-back {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  cursor: pointer;
}

.love-hint,
.love-meta,
.love-empty,
.love-log {
  margin: 0 0 16px;
  color: #6e5c48;
  font-size: 13px;
  line-height: 1.5;
}

.love-section {
  margin-bottom: 24px;
}

.love-section h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: #5c4630;
}

.love-tiles,
.love-gallery .love-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
}

.love-tile em {
  max-width: 88px;
  text-align: center;
  line-height: 1.3;
}

.love-room-who {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.love-room-who h2 {
  flex: none;
}

.love-room-avatar {
  width: 48px;
  height: 48px;
  font-size: 18px;
  flex-shrink: 0;
}

.love-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}

.love-actions button {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf8;
  color: #3d2412;
  font-size: 16px;
  letter-spacing: 0.12em;
  cursor: pointer;
  text-align: center;
}

.love-actions button:hover {
  background: #f3e6dc;
}

.love-log {
  margin-top: 20px;
  padding: 12px 14px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.map-page {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #1e2a24;
}

.map-page[hidden] {
  display: none !important;
}

.map-back {
  position: absolute;
  top: 14px;
  left: 12px;
  z-index: 12;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fffdf8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(20, 28, 18, 0.45));
}

.map-back:hover {
  color: #ffe9b8;
}

.map-page.is-arena-inner .map-back {
  display: none !important;
}

.map-world,
.map-region {
  height: 100%;
}

.map-world[hidden],
.map-region[hidden] {
  display: none !important;
}

.map-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #5b7d49;
}

.map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.map-spots {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.map-date {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 16px 11px;
  pointer-events: auto;
  color: #5a3a16;
  background:
    linear-gradient(180deg, #fff8e4 0%, #f3d89a 42%, #e2b86a 100%);
  border: 1px solid #f6e7b8;
  border-radius: 4px;
  box-shadow:
    0 0 0 2px #8a5a22,
    0 0 0 4px #e8c478,
    0 0 0 6px #6e4218,
    0 10px 22px rgba(24, 18, 10, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -8px 14px rgba(140, 80, 20, 0.18);
  text-shadow: 0 1px 0 rgba(255, 248, 230, 0.7);
}

.map-date::before,
.map-date::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #7a3f22;
  box-shadow: 0 0 0 1px #f0d48a;
}

.map-date::before {
  top: -5px;
  left: -5px;
  border-right: 0;
  border-bottom: 0;
}

.map-date::after {
  bottom: -5px;
  right: -5px;
  border-left: 0;
  border-top: 0;
}

.map-date-orn {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(122, 63, 34, 0.28);
  border-radius: 2px;
  pointer-events: none;
}

.map-date-orn::before,
.map-date-orn::after {
  content: "◆";
  position: absolute;
  top: 50%;
  color: #7a3f22;
  font-size: 8px;
  line-height: 1;
  transform: translateY(-50%);
  opacity: 0.7;
}

.map-date-orn::before {
  left: 4px;
}

.map-date-orn::after {
  right: 4px;
}

.map-date-year,
.map-date-day {
  font-weight: 700;
  letter-spacing: 0.18em;
}

.map-date-year {
  font-size: 13px;
}

.map-date-dot {
  color: #7a3f22;
  font-size: 14px;
  opacity: 0.75;
}

.map-date-day {
  font-size: 15px;
}

.map-date-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 8px;
}

.map-date-period {
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 15px;
}

.map-date-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.map-date-tools button,
#map-energy {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-shadow: none;
}

#map-energy {
  font-weight: 700;
}

.map-date-tools button {
  padding: 3px 8px;
  border: 1px solid #8a5a22;
  border-radius: 4px;
  background: #fff8e4;
  color: #5a3a16;
  cursor: pointer;
}

.map-text-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 38px;
  padding: 14px 8px 16px;
  border: 1px solid rgba(255, 244, 220, 0.55);
  border-radius: 22px;
  background:
    linear-gradient(180deg, #fff8ea 0%, #ead7b4 100%);
  color: #3d2a16;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow:
    0 10px 20px rgba(18, 24, 14, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.map-text-btn span {
  display: block;
}

.map-text-btn:hover {
  filter: brightness(1.08);
  box-shadow:
    0 14px 24px rgba(18, 24, 14, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.map-text-btn[data-zone="covenant"] {
  background: linear-gradient(180deg, #fff4d4 0%, #e2c07a 100%);
  color: #5a3a12;
}

.map-text-btn[data-zone="element"] {
  background: linear-gradient(180deg, #e7f6ff 0%, #8ec4d8 100%);
  color: #1d4a5c;
}

.map-text-btn[data-zone="blood"] {
  background: linear-gradient(180deg, #ffe8e4 0%, #d48a86 100%);
  color: #5c1e22;
}

.map-text-btn[data-zone="arcane"] {
  background: linear-gradient(180deg, #f3e8ff 0%, #b094d0 100%);
  color: #3d245c;
}

.map-text-btn[data-zone="mainhall"] {
  background: linear-gradient(180deg, #fffdf6 0%, #d4c4a0 100%);
  color: #4a3820;
}

.map-text-btn[data-zone="secret"] {
  background: linear-gradient(180deg, #e8eefc 0%, #8ea0d4 100%);
  color: #243056;
}

.map-text-btn.map-kind-poi {
  background: linear-gradient(180deg, #f4f7ef 0%, #b7c89a 100%);
  color: #2f3d22;
  font-size: 13px;
  min-width: 34px;
  padding: 12px 7px 14px;
}

.map-text-btn.map-kind-district {
  background: linear-gradient(180deg, #f7f1e8 0%, #c4a882 100%);
  color: #4a3420;
}

.map-text-btn[data-zone="primeval_forest"] {
  background: linear-gradient(180deg, #e4f0d8 0%, #6f8f4e 100%);
  color: #243818;
}

.map-text-btn[data-zone="mirror_bay"] {
  background: linear-gradient(180deg, #fff6e8 0%, #d4a574 100%);
  color: #5a3418;
}

.map-text-btn[data-zone="manor_bc"],
.map-text-btn[data-zone="manor_a"] {
  background: linear-gradient(180deg, #ffeef0 0%, #c48a90 100%);
  color: #4a1c24;
}

.map-zone,
.map-reserve {
  position: absolute;
}

.map-zone-nw {
  top: 18%;
  left: 9%;
}

.map-zone-ne {
  top: 16%;
  right: 8%;
}

.map-zone-ne-forest {
  top: 10%;
  right: 1%;
}

.map-zone-sw {
  top: 62%;
  left: 9%;
}

.map-zone-south {
  bottom: 7%;
  left: 48%;
  transform: translateX(-50%);
}

.map-zone-south-bc {
  bottom: 8%;
  left: 28%;
  transform: translateX(-50%);
}

.map-zone-south-a {
  bottom: 8%;
  left: 68%;
  transform: translateX(-50%);
}

.map-zone-island {
  left: 43.5%;
  top: 46%;
  transform: translate(-50%, -50%);
}

.map-zone-lake-east {
  left: 64%;
  top: 48%;
  transform: translateY(-50%);
}

.map-zone-lake-market {
  left: 78%;
  top: 56%;
  transform: translateY(-50%);
}

.map-zone-north {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.map-zone-west {
  left: 3%;
  top: 40%;
}

.map-zone-east {
  right: 4%;
  top: 38%;
}

.map-zone-se {
  right: 8%;
  bottom: 10%;
}

.map-reserve {
  width: 28px;
  height: 88px;
  pointer-events: none;
  opacity: 0;
}

.map-region {
  height: 100%;
  background: #1e2a24;
}

.map-region-title {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 18px;
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.88);
  color: #3d2a16;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
  max-width: min(90vw, 440px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.region-act {
  position: absolute;
  left: 18px;
  bottom: 22px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.region-act button {
  padding: 8px 14px;
  border: 1px solid rgba(255, 244, 220, 0.7);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.92);
  color: #3d2a16;
  font-weight: 600;
  cursor: pointer;
}

.mail-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(18, 22, 16, 0.45);
}

.bank-modal {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: grid;
  place-items: center;
  background: rgba(18, 22, 16, 0.45);
}

.bank-modal[hidden] {
  display: none;
}

.bank-dialog {
  width: min(420px, 92vw);
  max-height: 86vh;
  overflow: auto;
  padding: 16px 18px 18px;
  border-radius: 12px;
  background: #f7f1e6;
  color: #3d2a16;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.bank-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.bank-head h3 {
  margin: 0;
  flex: 1;
  font-size: 1.1rem;
}

.bank-gold,
.bank-fame {
  font-size: 0.85rem;
  opacity: 0.85;
  white-space: nowrap;
}

.bank-status {
  margin: 0 0 8px;
  font-weight: 600;
  line-height: 1.45;
}

.bank-meta {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.bank-loan-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 12px 0;
}

.bank-amount-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  flex: 1;
  min-width: 140px;
}

.bank-amount-label input {
  padding: 6px 8px;
  border: 1px solid #c4b49a;
  border-radius: 6px;
  background: #fffdf8;
  color: inherit;
}

.bank-loan-row button {
  padding: 7px 12px;
  border: 1px solid #8b6a3a;
  border-radius: 6px;
  background: #efe6d6;
  color: #3d2a16;
  cursor: pointer;
  font-weight: 600;
}

.bank-loan-row button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bank-tip {
  margin: 0 0 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.8;
}

.bank-deposit {
  border-top: 1px solid #d9cbb5;
  padding-top: 10px;
}

.bank-deposit h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.bank-deposit p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.75;
}

.mail-modal[hidden] {
  display: none;
}

.mail-dialog {
  width: min(92vw, 420px);
  max-height: 70vh;
  overflow: auto;
  padding: 16px 18px 18px;
  border-radius: 12px;
  background: #fffdf8;
  color: #3d2a16;
}

.mail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mail-item {
  padding: 10px 0;
  border-top: 1px solid rgba(90, 58, 22, 0.15);
}

.mail-item.is-unread strong::after {
  content: " 未读";
  font-size: 11px;
  color: #7a3f22;
}

.mail-empty {
  margin: 0;
  opacity: 0.7;
}

.region-spots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.region-poi {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.region-poi:hover,
.region-poi.is-on {
  filter: brightness(1.06);
  border-color: #6e4b2a;
}

.region-npcs {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  pointer-events: auto;
}

.region-npcs[hidden] {
  display: none !important;
}

.region-npc {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid rgba(255, 253, 248, 0.85);
  border-radius: 50%;
  background: hsl(var(--npc-hue, 28) 42% 42%);
  color: #fffdf8;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: default;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.region-npc.is-ready {
  cursor: pointer;
}

.region-npc.is-ready:hover {
  filter: brightness(1.08);
  border-color: #ffe9b8;
}

.region-land {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.region-land.is-spot-blank {
  background: #1a1c18;
}

.region-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.region-photo.is-blank {
  opacity: 0;
  pointer-events: none;
}

.region-merchant {
  position: absolute;
  right: 8%;
  bottom: 14%;
  flex-direction: row;
  min-width: 0;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 16px;
  letter-spacing: 0.2em;
}

.shop-modal {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 18, 0.45);
}

.shop-modal[hidden] {
  display: none !important;
}

.shop-dialog {
  width: min(420px, calc(100vw - 48px));
  max-height: min(86vh, 720px);
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(20, 24, 18, 0.28);
  overflow: auto;
}

.shop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.shop-head h3 {
  margin: 0;
  flex: 1;
  font-size: 16px;
}

.shop-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-icon-btn:hover {
  color: #3d2a16;
}

.shop-icon-btn[hidden] {
  display: none !important;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px;
}

.shop-cell {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

.shop-cell strong {
  font-weight: 600;
}

.shop-kind {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.shop-cell.is-animal {
  background: #fff8ef;
  border-color: #d4c0a0;
}

.shop-cell.is-animal .shop-kind {
  color: #6e4b2a;
}

.shop-cell.is-herb {
  background: #eef6ea;
  border-color: #a8c49a;
}

.shop-cell.is-herb .shop-kind {
  color: #3d5c38;
}

.shop-cell.is-cauldron {
  background: #f7f1e6;
}

.shop-cell.is-cauldron .shop-kind {
  color: #7a4a12;
}

.shop-cell.is-part {
  background: #ebeff3;
}

.shop-cell.is-part .shop-kind {
  color: #3d5a73;
}

.shop-look {
  font-size: 11px;
  color: #6b5a48;
  text-align: center;
  line-height: 1.3;
}

.shop-cell.is-empty {
  background: #f3eee4;
  cursor: default;
}

.shop-cell.is-sold {
  opacity: 0.7;
}

.shop-stock {
  font-size: 11px;
  color: var(--muted);
}

.shop-buy {
  margin-top: 2px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
}

.shop-gold {
  font-size: 13px;
  color: #5c4630;
  white-space: nowrap;
}

.shop-buy:hover:not(:disabled) {
  background: #efe6d6;
}

.shop-buy:disabled {
  cursor: default;
  color: var(--muted);
}

.shop-consign-wrap {
  padding: 0 14px 12px;
  border-top: 1px solid var(--line);
}

.shop-consign-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.shop-consign-tools button,
.shop-consign-actions button {
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: #f7f1e6;
  color: #5c4630;
  cursor: pointer;
}

.shop-consign-tools button:hover,
.shop-consign-actions button:hover:not(:disabled) {
  background: #efe6d6;
}

.shop-consign-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.shop-consign-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #fbf7f0;
}

.shop-consign-meta {
  font-size: 13px;
  color: #5c4630;
  line-height: 1.35;
}

.shop-consign-meta strong {
  font-weight: 600;
}

.shop-consign-meta .muted {
  color: var(--muted);
  font-size: 12px;
}

.shop-consign-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.shop-consign-actions input[type="number"] {
  width: 88px;
  font: inherit;
  font-size: 13px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  background: #fff;
}

.shop-recycle-wrap {
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}

.shop-recycle-title {
  margin: 10px 0 4px;
  font-size: 14px;
}

.shop-recycle-hint,
.shop-recycle-empty {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.shop-recycle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #efe6d6;
  font-size: 13px;
}

.shop-recycle-row button {
  flex-shrink: 0;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fffdf8;
  cursor: pointer;
  font-size: 12px;
}

.spellbook-panel {
  width: min(460px, calc(100vw - 36px));
}

.spell-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid #efe6d6;
  font-size: 13px;
}

.spell-row.is-locked {
  opacity: 0.72;
}

.spell-row input {
  margin-top: 3px;
}

.greenhouse-scene {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: #1e2a24;
}

.greenhouse-scene[hidden] {
  display: none !important;
}

.greenhouse-scene .region-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.greenhouse-desk {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 58px 16px 16px;
  min-height: 0;
  background: rgba(247, 250, 240, 0.94);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.arena-page {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #1a1612;
  color: #3d2a16;
}

.arena-page[hidden] {
  display: none !important;
}

.arena-scene {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 52px 20px 20px;
  background:
    radial-gradient(ellipse at 50% 20%, #5a4333 0%, transparent 55%),
    linear-gradient(180deg, #3a3028 0%, #1e1814 100%);
}

.arena-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.arena-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.12em;
}

.arena-hint {
  margin: 8px 0 12px;
  color: #d8c4a4;
  font-size: 13px;
}

.arena-idle,
.arena-over {
  text-align: center;
  padding: 24px;
}

.arena-bars {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.arena-bar {
  height: 10px;
  border-radius: 99px;
  background: #1a1410;
  overflow: hidden;
}

.arena-bar i {
  display: block;
  height: 100%;
  background: #7d9a62;
}

.arena-bar.is-enemy i {
  background: #c45c48;
}

.arena-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arena-card {
  width: 120px;
  min-height: 88px;
  padding: 8px;
  border: 1px solid #c4a574;
  border-radius: 10px;
  background: #fff8ea;
  color: #3d2a16;
  text-align: left;
  cursor: pointer;
}

.arena-card strong,
.arena-card span {
  display: block;
  font-size: 12px;
}

.arena-card.is-off {
  opacity: 0.45;
  cursor: default;
}

.arena-actions {
  margin: 12px 0;
}

.arena-log {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: #d8c4a4;
  max-height: 28vh;
  overflow: auto;
}

.arena-scene {
  padding: 44px 16px 10px;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 42% at 50% 36%, rgba(232, 196, 120, 0.35), transparent 58%),
    linear-gradient(180deg, #6a5340 0%, #3a2e26 42%, #1e1a16 100%);
}

.arena-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.arena-hud h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.28em;
  color: #fff8ea;
  text-shadow: 0 1px 2px rgba(20, 14, 8, 0.55);
}

.arena-start {
  height: 30px;
  padding: 0 14px;
  border: 1px solid #e8c478;
  border-radius: 8px;
  background: #7a3f22;
  color: #fff8ea;
  cursor: pointer;
}

.arena-book {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #c4b0e0;
  border-radius: 8px;
  background: #4a3d6e;
  color: #fff8ea;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.arena-help-wrap {
  position: relative;
}

.arena-help {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e8c478;
  background: #fff8ea;
  color: #6e4b2a;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.arena-help-pop {
  display: none;
  position: absolute;
  right: 0;
  top: 36px;
  z-index: 6;
  width: 240px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffdf8;
  border: 1px solid #c4a574;
  color: #3d2a16;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
  box-shadow: 0 10px 24px rgba(20, 14, 8, 0.28);
}

.arena-help-wrap:hover .arena-help-pop,
.arena-help-wrap:focus-within .arena-help-pop {
  display: block;
}

.arena-board {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arena-foe,
.arena-you {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
}

.arena-you {
  margin-top: auto;
}

.arena-foe {
  margin-left: auto;
}

.arena-bust {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #e8c478;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(20, 14, 8, 0.35);
}

.arena-bust-foe {
  background: radial-gradient(circle at 50% 28%, #f0d2aa, #a56a38 62%, #5c3218);
}

.arena-bust-you {
  background: radial-gradient(circle at 50% 28%, #dce8d4, #5a7a52 62%, #243820);
}

.arena-sts {
  position: absolute;
  left: -6px;
  top: -6px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 58px;
  z-index: 1;
  pointer-events: none;
}

.arena-st {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff8ea;
  box-shadow: 0 0 0 1px rgba(20, 14, 8, 0.45);
}

.arena-st em {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 10px;
  height: 10px;
  padding: 0 2px;
  border-radius: 99px;
  background: #3d2a16;
  color: #fff8ea;
  font-style: normal;
  font-size: 8px;
  line-height: 10px;
}

.arena-st.is-amnesia { background: #6a5a88; }
.arena-st.is-bleed { background: #c4453a; }
.arena-st.is-burn { background: #d06a28; }
.arena-st.is-float { background: #4a8aaa; }
.arena-st.is-morph { background: #7a4a8a; }
.arena-st.is-bind { background: #b89038; }
.arena-st.is-focus { background: #b04848; }

.arena-meta {
  min-width: 0;
  flex: 1;
  color: #fff8ea;
  text-shadow: 0 1px 2px rgba(20, 14, 8, 0.5);
}

.arena-meta strong,
.arena-meta span {
  display: block;
  font-size: 12px;
}

.arena-hp {
  margin-top: 4px;
  height: 8px;
  border-radius: 99px;
  background: rgba(20, 14, 8, 0.45);
  overflow: hidden;
  border: 1px solid rgba(232, 196, 120, 0.45);
}

.arena-hp i {
  display: block;
  height: 100%;
  background: #7d9a62;
}

.arena-hp.is-foe i {
  background: #c45c48;
}

.arena-pit {
  position: relative;
  flex: 1;
  min-height: 90px;
  margin: 0 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, #e8c98a 0%, #b8894a 48%, #6e4b2a 100%);
  box-shadow: inset 0 0 0 6px rgba(90, 60, 28, 0.25), 0 12px 20px rgba(20, 14, 8, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
}

.arena-act {
  margin: 0;
  max-width: 90%;
  text-align: center;
  color: #3d2a16;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 1px 0 rgba(255, 248, 234, 0.55);
}

.arena-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 18px;
  border-radius: 99px;
  background: rgba(40, 28, 16, 0.72);
  color: #fff8ea;
  letter-spacing: 0.3em;
}

.arena-dock {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: rgba(18, 14, 12, 0.55);
  border: 1px solid rgba(232, 196, 120, 0.35);
}

.arena-pile {
  width: 44px;
  height: 64px;
  border: 1px solid #e8c478;
  border-radius: 8px;
  background: #5c3218;
  color: #fff8ea;
  font-size: 11px;
  cursor: pointer;
}

.arena-hand {
  flex: 1;
  display: flex;
  gap: 6px;
}

.arena-slot,
.arena-card {
  flex: 1;
  height: 112px;
  border-radius: 8px;
}

.arena-slot {
  border: 1px solid rgba(232, 196, 120, 0.28);
  background: rgba(255, 248, 234, 0.08);
}

.arena-card {
  position: relative;
  width: auto;
  min-height: 0;
  padding: 20px 4px 6px;
  border: 1px solid #e8c478;
  background: linear-gradient(180deg, #fffdf6, #e2c9a0);
  color: #3d2a16;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 14px rgba(20, 14, 8, 0.28);
}

.arena-card.is-off {
  opacity: 0.55;
}

.arena-card.is-pick {
  box-shadow: 0 0 0 2px #7a3f22;
  outline: 2px solid #e8c478;
}

.arena-page.is-discard .arena-card {
  box-shadow: 0 0 0 2px #c45c48;
}

.arena-cost {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2a5a78;
  color: #fff;
  font-size: 11px;
  line-height: 20px;
}

.arena-card strong,
.arena-card em {
  display: block;
  font-style: normal;
}

.arena-card strong {
  font-size: 12px;
}

.arena-card em {
  margin-top: 4px;
  font-size: 10px;
  color: #6e4b2a;
}

.arena-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.arena-mana {
  display: flex;
  gap: 3px;
}

.arena-gem {
  width: 10px;
  height: 14px;
  border-radius: 2px;
  background: #4a4036;
}

.arena-gem.is-on {
  background: #5aa0c8;
}

.arena-side button {
  height: 28px;
  min-width: 44px;
  padding: 0 8px;
  border: 1px solid #e8c478;
  border-radius: 6px;
  background: #fff8ea;
  color: #3d2a16;
  cursor: pointer;
}

.arena-side button.is-on {
  background: #c45c48;
  color: #fff8ea;
}

.arena-line {
  margin: 0;
  min-height: 18px;
  color: #ead9b8;
  font-size: 12px;
}

.arena-back,
.arena-btns button,
.arena-opt button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e8c478;
  border-radius: 8px;
  background: #fff8ea;
  color: #3d2a16;
  cursor: pointer;
}

.arena-gold {
  margin-left: auto;
  color: #e8c478;
  font-size: 13px;
}

.arena-round {
  color: #fff8ea;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 2px rgba(20, 14, 8, 0.55);
}

.arena-loop {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 196, 120, 0.35);
  border-radius: 6px;
  background: transparent;
  color: #8a7a68;
  cursor: pointer;
}

.arena-loop.is-on {
  border-color: #e8c478;
  background: #7a3f22;
  color: #ffe9b8;
}

.arena-pit.is-tap {
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(232, 196, 120, 0.55);
}

.arena-sim-panel {
  margin: 0 0 10px;
  padding: 8px 10px;
  max-height: 28vh;
  overflow: auto;
  flex-shrink: 0;
  background: rgba(20, 14, 8, 0.55);
  border: 1px solid rgba(232, 196, 120, 0.35);
  border-radius: 8px;
  color: #efe6d6;
  font-size: 12px;
}

.arena-sim-panel[hidden] {
  display: none;
}

.arena-sim-note {
  margin: 0 0 6px;
  color: #c4b49a;
}

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

.arena-sim-grid label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arena-sim-grid input,
.arena-sim-grid select {
  height: 26px;
  border: 1px solid #8a7358;
  border-radius: 4px;
  background: #2a221c;
  color: #fff8ea;
  padding: 0 6px;
}

.arena-sim-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.arena-sim-routes button {
  max-width: 11em;
  padding: 4px 8px;
  border: 1px solid rgba(232, 196, 120, 0.45);
  border-radius: 6px;
  background: #3a2a1c;
  color: #fff8ea;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.arena-sim-routes button:hover {
  border-color: #e8c478;
}

.arena-sim-routes b {
  display: block;
  color: #e8c478;
  font-weight: 600;
}

.arena-sim-check {
  display: block;
  margin: 8px 0 4px;
}

.arena-sim-affix {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 8px;
}

.arena-sim-affix label {
  white-space: nowrap;
}

.arena-sim-actions {
  display: flex;
  gap: 8px;
}

.arena-sim-actions button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #e8c478;
  border-radius: 6px;
  background: #5c3d28;
  color: #fff8ea;
  cursor: pointer;
}

@media (max-width: 900px) {
  .arena-sim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.arena-lobby,
.arena-sub,
.arena-board {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.arena-lobby[hidden],
.arena-sub[hidden],
.arena-board[hidden] {
  display: none !important;
}

.arena-lobby {
  display: flex;
  gap: 16px;
  padding: 8px 0 12px;
}

.arena-gate {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #e8c478;
  border-radius: 14px;
  background: rgba(255, 248, 234, 0.12);
  color: #fff8ea;
  cursor: pointer;
}

.arena-gate strong {
  font-size: 22px;
  letter-spacing: 0.24em;
}

.arena-gate span {
  font-size: 13px;
  opacity: 0.85;
}

.arena-sub {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 12px;
}

.arena-status {
  margin: 0;
  color: #ead9b8;
  font-size: 13px;
}

.arena-ranks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.arena-rank {
  height: 40px;
  padding: 0 14px;
  text-align: left;
  border: 1px solid rgba(232, 196, 120, 0.45);
  border-radius: 8px;
  background: rgba(255, 248, 234, 0.1);
  color: #fff8ea;
}

.arena-btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.arena-opt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.arena-opt span {
  width: auto;
  min-width: 36px;
  color: #fff8ea;
  font-size: 13px;
}

.arena-opt button.is-on,
.arena-btns button:not(:disabled) {
  background: #fff8ea;
}

.arena-opt button.is-on {
  background: #7a3f22;
  color: #fff8ea;
}

.dummy-invite-label {
  font-style: normal;
  font-size: 12px;
  color: #fff8ea;
  max-width: 8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dummy-invite-modal {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 12, 0.45);
}

.dummy-invite-modal[hidden] {
  display: none !important;
}

.dummy-invite-dialog {
  width: min(420px, 92%);
  max-height: 80%;
  overflow: auto;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

.dummy-invite-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dummy-invite-head h3 {
  margin: 0;
  flex: 1;
  font-size: 16px;
}

.dummy-invite-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: #6e5c48;
}

.dummy-invite-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dummy-invite-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.dummy-invite-item.is-on {
  border-color: #7a3f22;
  background: #f6efe4;
}

.dummy-invite-item span {
  font-size: 12px;
  color: #6e5c48;
}

.arena-row {
  display: flex;
  gap: 10px;
}

.arena-row.is-foe {
  justify-content: flex-end;
}

.arena-unit {
  width: 76px;
  text-align: center;
  color: #fff8ea;
  font-size: 11px;
}

.arena-unit strong,
.arena-unit span {
  display: block;
}

.arena-unit .arena-bust {
  margin: 0 auto 4px;
}

.arena-unit.is-turn {
  outline: 2px solid #e8c478;
  outline-offset: 2px;
}

.arena-unit.is-lock {
  outline: 2px solid #c45c48;
  outline-offset: 2px;
}

.arena-unit.is-aid {
  outline: 2px solid #5b8c5a;
  outline-offset: 2px;
}

.arena-unit.is-inspectable .arena-bust-foe {
  position: relative;
  cursor: pointer;
}

.arena-bust .foe-hp-q.is-on-bust {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  z-index: 2;
  background: #fff8ea;
  color: #3d2a16;
  cursor: pointer;
}

.foe-inspect-modal {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 12, 0.5);
}

.foe-inspect-dialog {
  width: min(420px, 92%);
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px 14px;
  color: #3d2a16;
}

.foe-inspect-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.foe-inspect-head h3 {
  margin: 0;
  flex: 1;
  font-size: 16px;
}

.foe-inspect-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.7;
}

.foe-inspect-note {
  margin: 0 0 8px;
  font-size: 12px;
  color: #6e5c48;
}

.foe-inspect-hp {
  display: flex;
  align-items: center;
  gap: 8px;
}

.foe-inspect-hp .arena-hp {
  flex: 1;
  margin-top: 0;
}

.foe-hp-q {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  cursor: help;
  flex-shrink: 0;
}

.foe-hp-q em {
  display: none;
  position: absolute;
  right: 0;
  bottom: 26px;
  width: max-content;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #3d2a16;
  color: #fff8ea;
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  z-index: 2;
}

.foe-hp-q:hover em,
.foe-hp-q:focus em {
  display: block;
}

.arena-order {
  margin: 0;
  text-align: center;
  color: #ead9b8;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.arena-bust-ally {
  background: radial-gradient(circle at 50% 28%, #d4e0f0, #4a6a88 62%, #1c3040);
}

.arena-pop {
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translate(-50%, -8px);
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  color: #fff8ea;
  text-shadow: 0 1px 2px #3d2a16;
  pointer-events: none;
  animation: arena-pop 0.9s ease-out both;
}

.arena-pop.is-dmg {
  color: #ffd4c8;
}

.arena-pop.is-heal,
.arena-pop.is-buff {
  color: #d4f0c8;
}

.arena-feed {
  margin: 0;
  padding: 0 4px;
  list-style: none;
  color: #ead9b8;
  font-size: 12px;
  line-height: 1.45;
  max-height: 72px;
  overflow: auto;
}

@keyframes arena-pop {
  from { opacity: 1; transform: translate(-50%, 4px); }
  to { opacity: 0; transform: translate(-50%, -18px); }
}

/* —— 寝室全屏布局壳 —— */
.dorm-page {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px 20px;
  background: #cfcfcf;
  color: #3a3a3a;
  overflow: auto;
}

.dorm-page[hidden] {
  display: none !important;
}

.dorm-switch-calc {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 36px;
  height: 72px;
  padding: 8px 4px;
  border: 1px solid #c4b8a4;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf8, #f3ebe0);
  color: #6e4b2a;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  writing-mode: horizontal-tb;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(60, 40, 20, 0.12);
}

.dorm-switch-calc span {
  writing-mode: vertical-rl;
  letter-spacing: 0.18em;
  line-height: 1;
}

.dorm-switch-calc:hover {
  background: linear-gradient(180deg, #fff, #efe6d6);
  border-color: #a89070;
}

.dorm-switch-calc:active {
  transform: translateY(-50%) scale(0.97);
}

.dorm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}

.dorm-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dorm-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  border: none;
  padding: 0;
  cursor: pointer;
}

.dorm-avatar:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(110, 75, 42, 0.25);
}

.dorm-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  position: relative;
}

.dorm-name-row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 36px;
  padding: 0 16px;
  background: #fff;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.dorm-name-parts {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.dorm-name-sep {
  margin: 0 2px;
}

.dorm-date {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  background: #bdbdbd;
  user-select: none;
}

.dorm-date-text {
  font-size: 12px;
  color: #2f2f2f;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.dorm-date-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  width: 220px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(60, 40, 20, 0.18);
  background: #fffaf2;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  color: #3d2412;
}

.dorm-date-panel[hidden] {
  display: none !important;
}

.dorm-date-panel-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.dorm-date-periods {
  display: flex;
  gap: 6px;
}

.dorm-period-btn {
  flex: 1;
  height: 32px;
  border: 1px solid rgba(60, 40, 20, 0.2);
  border-radius: 8px;
  background: #fff;
  color: #3d2412;
  font-size: 13px;
  cursor: pointer;
}

.dorm-period-btn:hover {
  border-color: rgba(60, 40, 20, 0.4);
}

.dorm-period-btn.is-on {
  background: #3d2412;
  border-color: #3d2412;
  color: #fff8e8;
}

.dorm-date-panel-hint {
  margin: 8px 0 10px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(61, 36, 18, 0.65);
}

.dorm-date-sim {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.dorm-date-sim-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.dorm-date-sim-fields[hidden] {
  display: none !important;
}

.dorm-date-sim-fields label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: rgba(61, 36, 18, 0.7);
}

.dorm-date-sim-fields input {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  padding: 0 6px;
  border: 1px solid rgba(60, 40, 20, 0.2);
  border-radius: 6px;
  font-size: 13px;
}

.dorm-date-apply {
  grid-column: 1 / -1;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #3d2412;
  color: #fff8e8;
  font-size: 13px;
  cursor: pointer;
}

.dorm-date-apply:hover {
  opacity: 0.9;
}

.dorm-stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.dorm-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 12px 4px 4px;
  background: #fff;
  border-radius: 999px;
}

.dorm-stat-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e8e8e8;
  box-shadow: inset 0 0 0 1px #c8c8c8;
  flex-shrink: 0;
}

.dorm-stat-dot.is-gem {
  background: #c9b6e8;
}

.dorm-stat-dot.is-gold {
  background: #e8d48a;
}

.dorm-stat-text {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.dorm-main {
  flex: 1;
  position: relative;
  display: block;
  min-height: 0;
}

.dorm-side {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(300px, calc(100% - 44px));
}

.dorm-quests {
  display: grid;
  grid-template-columns: 1fr 72px;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100%;
  min-height: 220px;
  border: 1px solid #b0b0b0;
  background: #b8b8b8;
  overflow: hidden;
}

.dorm-quest {
  margin: 0;
  border: 0;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: #3a3a3a;
}

.dorm-quest-main {
  grid-column: 1;
  grid-row: 1;
  background: #fff;
  border-right: 1px solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
}

.dorm-quest-side {
  grid-column: 1;
  grid-row: 2;
  background: #9e9e9e;
  border-right: 1px solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
  color: #2f2f2f;
}

.dorm-quest-college {
  grid-column: 1;
  grid-row: 3;
  background: #fff;
  border-right: 1px solid #b0b0b0;
}

.dorm-quest-plot {
  grid-column: 2;
  grid-row: 1 / span 3;
  background: #bdbdbd;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
}

.dorm-plot-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 24px;
  max-width: 420px;
  margin: 0 auto;
}

.dorm-plot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #c9b89a;
  border-radius: 10px;
  background: #fffdf8;
  color: #3a2c1a;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.08);
}

.dorm-plot-item:hover {
  border-color: #6e4b2a;
  background: #f7f1e6;
}

.dorm-plot-continue {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px solid #6e4b2a;
  border-radius: 10px;
  background: #6e4b2a;
  color: #fffdf8;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.12);
}

.dorm-plot-continue:hover:not(:disabled) {
  background: #5a3c20;
}

.dorm-plot-continue:disabled,
.dorm-plot-continue.is-empty {
  opacity: 0.45;
  cursor: pointer;
}

.dorm-plot-item small {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}

.dorm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dorm-action {
  height: 40px;
  border: 0;
  background: #fff;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.dorm-oc {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.dorm-sub {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #cfcfcf;
}

.dorm-sub[hidden] {
  display: none !important;
}

.dorm-sub-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #b0b0b0;
}

.dorm-sub-head h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.dorm-sub-back {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #b0b0b0;
  border-radius: 8px;
  background: #f5f5f5;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.dorm-sub-host {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}

.dorm-sub-host .pets-panel,
.dorm-sub-host .alchemy-panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
}

/* —— 剧情面板（演算页中央） —— */
.story-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(160px, 22%) 1fr;
  min-height: 0;
  background: #ece7e2;
  color: #2c2c2c;
}

.story-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #cfc8c0;
  background: #e4e0dc;
}

.story-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 8px;
  background: #d8d4d0;
}

.story-side-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.story-side-icons {
  display: flex;
  gap: 6px;
}

.story-icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #5c3d22;
  border-radius: 4px;
  background: #6e4b2a;
  color: #f4efe6;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.story-icon-btn:hover {
  background: #5c3d22;
}

.story-tree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.story-folder {
  margin-bottom: 8px;
}

.story-folder-name,
.story-file {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  color: inherit;
}

.story-folder-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.88rem;
}

.story-folder-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #6e4b2a;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.story-folder.is-open .story-folder-caret {
  transform: rotate(0deg);
}

.story-folder-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-rename-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid #6e4b2a;
  border-radius: 4px;
  background: #fffdf8;
  color: #2c2c2c;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.story-folder-name:hover,
.story-file:hover {
  background: rgba(255, 255, 255, 0.45);
}

.story-files {
  display: none;
  padding-left: 12px;
}

.story-folder.is-open .story-files {
  display: block;
}

.story-file {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  opacity: 0.92;
}

.story-file-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-file-synced {
  flex-shrink: 0;
  color: #2f7a45;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}

.story-file.is-on {
  background: #fff;
  font-weight: 600;
}

.story-compile-mask {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 28, 16, 0.35);
}

.story-compile-dialog {
  width: min(360px, calc(100vw - 40px));
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 12px 32px rgba(40, 28, 16, 0.22);
  color: #3d2412;
}

.story-compile-dialog h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.story-compile-desc {
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: #7a736c;
}

.story-compile-bar {
  height: 10px;
  border-radius: 999px;
  background: #e8e0d4;
  overflow: hidden;
}

.story-compile-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #6e4b2a;
  transition: width 0.12s linear;
}

.story-compile-pct {
  margin: 10px 0 0;
  text-align: right;
  font-size: 0.82rem;
  color: #6e4b2a;
  font-weight: 600;
}

.story-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #efe9e4;
}

.story-hint {
  margin: 0;
  padding: 10px 14px 0;
  text-align: center;
  font-size: 0.82rem;
  color: #7a736c;
}

.story-hint-hide {
  margin-left: 8px;
  border: 0;
  background: transparent;
  color: #9a6b4a;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
}

.story-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 12px;
  border-bottom: 1px solid #cfc8c0;
  background: #e8e2dc;
}

.story-tb-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #5c3d22;
  border-radius: 6px;
  background: #6e4b2a;
  color: #f4efe6;
  cursor: pointer;
  padding: 0;
}

.story-tb-btn:hover:not(:disabled) {
  background: #5c3d22;
}

.story-tb-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.story-feedback {
  margin-left: 8px;
  font-size: 0.82rem;
  color: #2f7a45;
}

.story-feedback.is-error {
  color: #a33;
}

.story-feedback.is-ok {
  color: #2f7a45;
}

.story-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 20px;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

.story-content.is-edit {
  user-select: text;
  -webkit-user-select: text;
}

.story-content.is-edit::selection,
.story-content.is-edit *::selection {
  background: rgba(110, 75, 42, 0.18);
  color: inherit;
}

.story-content.is-play {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.story-confirm-mask {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 28, 16, 0.35);
}

#story-pick-mask {
  z-index: 140;
}

.story-confirm-dialog {
  width: min(360px, calc(100vw - 40px));
  padding: 20px 22px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 12px 32px rgba(40, 28, 16, 0.22);
  color: #3d2412;
}

.story-confirm-dialog.story-confirm-dialog-sm {
  width: min(280px, calc(100vw - 40px));
}

.story-confirm-dialog p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.story-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.story-confirm-actions button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #5c3d22;
  border-radius: 6px;
  background: #6e4b2a;
  color: #f4efe6;
  font: inherit;
  cursor: pointer;
}

.story-import-text-dialog {
  width: min(520px, calc(100vw - 32px));
}

.story-import-text-dialog h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3d2412;
}

.story-import-text-cap {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: #6a5e52;
}

.story-import-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  margin-bottom: 10px;
  border: 1.5px dashed #b8a898;
  border-radius: 8px;
  background: #f7f2ea;
  color: #6a5e52;
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
}

.story-import-drop.is-dragover {
  border-color: #6e4b2a;
  background: #efe6d8;
  color: #3d2412;
}

.story-import-textarea {
  display: block;
  width: 100%;
  min-height: 180px;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid #cfc8c0;
  border-radius: 8px;
  background: #fffdf8;
  color: #2a2a2a;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

.story-line.is-selected {
  outline: 1px solid rgba(110, 75, 42, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
}

.story-line.is-dragging {
  outline: 1px dashed #6e4b2a;
  outline-offset: 2px;
  cursor: grabbing;
  opacity: 1;
}

.story-content.is-line-dragging,
.story-content.is-line-dragging * {
  user-select: none;
  -webkit-user-select: none;
}

.story-drag-ghost {
  position: fixed;
  z-index: 180;
  padding: 6px 12px;
  border-radius: 6px;
  background: #6e4b2a;
  color: #f4efe6;
  font-size: 0.85rem;
  line-height: 1.2;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(40, 28, 16, 0.28);
}

.story-line.is-drop-before,
.story-line.is-drop-after {
  position: relative;
}

.story-line.is-drop-before::before,
.story-line.is-drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: #6e4b2a;
  box-shadow: 0 0 0 2px rgba(110, 75, 42, 0.18);
  z-index: 3;
  pointer-events: none;
}

.story-line.is-drop-before::before {
  top: -7px;
}

.story-line.is-drop-after::after {
  bottom: -7px;
}

.story-content.is-edit .story-line {
  touch-action: none;
}

.story-confirm-actions button[data-story-confirm="cancel"],
.story-confirm-actions button[data-story-import-act="cancel"] {
  background: #fffdf8;
  color: #6e4b2a;
}

.story-del-group {
  width: 28px !important;
  min-width: 28px;
  height: 28px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #5c3d22 !important;
  border-radius: 4px;
  background: #6e4b2a !important;
  color: #f4efe6 !important;
}

.story-del-group:hover {
  background: #5c3d22 !important;
}

.story-folder-body {
  padding-left: 12px;
}

.story-folder[data-depth="1"] > .story-folder-body,
.story-folder[data-depth="2"] > .story-folder-body {
  border-left: 1px dashed #d4cbc0;
  margin-left: 8px;
}

.story-file.is-dirty .story-file-dirty,
.story-file-dirty {
  color: #b86a1c;
  font-weight: 700;
}

.story-file.is-multi,
.story-folder-name.is-multi {
  outline: 2px solid #6e4b2a;
  outline-offset: -2px;
}

.story-file.is-dragging,
.story-folder-name.is-dragging {
  opacity: 0.55;
}

.story-file.is-drop-target,
.story-folder-name.is-drop-target,
.story-files.is-drop-target {
  background: rgba(110, 75, 42, 0.12);
}

.story-empty {
  margin: 40px auto;
  text-align: center;
  color: #8a837c;
}

.story-line {
  margin: 0 0 18px;
}

.story-bubble-wrap {
  width: 100%;
}

.story-line-dialog.is-npc .story-bubble-wrap,
.story-line-dialog.is-narration .story-bubble-wrap,
.story-line-dialog.is-player .story-bubble-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.story-line-dialog.is-npc .story-bubble-wrap,
.story-line-dialog.is-narration .story-bubble-wrap {
  justify-content: flex-start;
}

.story-line-dialog.is-player .story-bubble-wrap {
  justify-content: flex-end;
  flex-direction: row;
}

.story-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #c8c8c8;
  flex: 0 0 auto;
}

.story-bubble-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.story-line-dialog.is-narration .story-bubble-col {
  max-width: 100%;
}

.story-line-dialog.is-player .story-bubble-col {
  align-items: stretch;
  text-align: right;
}

.story-name {
  font-size: 0.78rem;
  color: #5a534c;
}

.story-line-dialog.is-player .story-name {
  text-align: right;
  width: 100%;
}

.story-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  padding: 8px 12px;
  background: #cfcfcf;
  border-radius: 2px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #2a2a2a;
}

.story-line-dialog.is-player .story-text {
  text-align: right;
}

.story-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.story-name-mode {
  height: 26px;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  background: #fffdf8;
  color: #3d2412;
  font: inherit;
  font-size: 0.78rem;
}

.story-name-fixed {
  font-size: 0.78rem;
  color: #5a534c;
}

.story-choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.story-choice-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.story-choice {
  flex: 1;
  text-align: left;
  border: 1px solid #cfc8c0;
  background: #f4efe6;
  color: #3d2412;
  padding: 8px 12px;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

.story-choice.is-on {
  border-color: #6e4b2a;
  background: #efe6d6;
  font-weight: 600;
}

.story-choice.is-picked {
  border-color: #2f7a45;
  background: #e6f0e8;
}

.story-choice.is-dim {
  opacity: 0.45;
}

.story-choice-input {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 1px solid #cfc8c0;
  background: #f4efe6;
  color: #3d2412;
  padding: 8px 12px;
  border-radius: 4px;
  font: inherit;
}

.story-choice-input.is-on {
  border-color: #6e4b2a;
  background: #efe6d6;
  font-weight: 600;
}

.story-paste-pop {
  position: fixed;
  z-index: 140;
  width: 180px;
  padding: 28px 10px 10px;
  border: 1px solid #cfc8c0;
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 10px 24px rgba(40, 28, 16, 0.18);
}

.story-paste-pop button {
  display: block;
  width: 100%;
  margin-top: 6px;
  height: 32px;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  background: #f4efe6;
  color: #3d2412;
  font: inherit;
  cursor: pointer;
}

.story-paste-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #6e4b2a;
  font-size: 16px;
  line-height: 1;
}

.story-export-toast {
  position: fixed;
  z-index: 160;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 8px;
  background: #fffdf8;
  border: 1px solid #cfc8c0;
  box-shadow: 0 10px 24px rgba(40, 28, 16, 0.2);
  color: #3d2412;
  font-size: 0.92rem;
  line-height: 1.45;
}

.story-export-toast.is-ok {
  border-color: #2f7a45;
  color: #1e5c32;
}

.story-line-jump {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0 16px;
}

.story-jump-label {
  display: inline-block;
  padding: 6px 12px;
  border: 1px dashed #6e4b2a;
  border-radius: 4px;
  background: #f7f1e6;
  color: #6e4b2a;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.story-jump-dialog {
  width: min(420px, calc(100vw - 32px));
}

.story-loop-head {
  margin-bottom: 8px;
  color: #6e4b2a;
  font-size: 0.88rem;
  font-weight: 600;
}

.story-line-loop > .story-loop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.story-line-loop > .story-loop-head .story-line-side-del {
  position: static;
  transform: none;
}

.story-loop-body,
.story-cond-branch {
  min-height: 72px;
  padding: 8px;
  border: 1px dashed #b8a898;
  border-radius: 8px;
  background: #fffdf8;
}

.story-line-loop,
.story-line-cond {
  width: 100%;
  padding: 8px 0 4px;
}

.story-cond-branch.is-on {
  border-style: solid;
  border-color: #6e4b2a;
  background: #f7f1e6;
}

.story-cond-branch > span {
  display: block;
  margin-bottom: 6px;
  color: #6a5e52;
  font-size: 0.82rem;
}

.story-loop-empty {
  margin: 8px 0;
  color: #8a7e72;
  font-size: 0.82rem;
}

.story-loop-body.is-drop-into,
.story-cond-branch.is-drop-into,
.story-branch.is-drop-into {
  border-color: #6e4b2a;
  box-shadow: inset 0 0 0 2px rgba(110, 75, 42, 0.35);
}

.story-num-dialog {
  width: min(640px, calc(100vw - 32px));
  border-radius: 8px;
  overflow: hidden;
  background: #f4f1ec;
  color: #3d2412;
  box-shadow: 0 16px 40px rgba(40, 28, 16, 0.28);
}

.story-num-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 8px 0 14px;
  background: #3d2412;
  color: #f4efe6;
}

.story-num-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.story-num-x {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #f4efe6;
  font-size: 18px;
  cursor: pointer;
}

.story-num-tabs {
  display: flex;
  gap: 16px;
  padding: 0 14px;
  background: #fffdf8;
  border-bottom: 1px solid #e4ddd4;
}

.story-num-tabs button {
  height: 36px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #6a5e52;
  cursor: pointer;
}

.story-num-tabs button.is-on {
  color: #b15a1a;
  border-bottom-color: #b15a1a;
}

.story-num-body {
  padding: 14px;
}

.story-num-split {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 12px;
}

.story-set-adv {
  width: min(760px, calc(100vw - 32px));
}

.story-set-adv-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.story-set-op-row,
.story-set-more-row {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 12px;
  align-items: start;
}

.story-set-more-box {
  border: 1px solid #d9d0c4;
  border-radius: 8px;
  padding: 12px;
  background: #f7f4ef;
}

.story-set-more-box[hidden],
.story-set-more-row[hidden] {
  display: none;
}

.story-set-adv-stack select,
.story-set-adv-stack input[type="number"] {
  width: 100%;
  height: 32px;
  margin-top: 8px;
  box-sizing: border-box;
}

.story-set-more {
  margin: 0;
}

.story-num-box.is-agg .story-set-value-body {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 8px;
  align-items: start;
}

.story-num-box.is-agg .story-set-value-body > select,
.story-set-agg-row select,
.story-set-agg-row input[type="number"] {
  margin-top: 0;
}

.story-set-agg-wrap {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.story-num-box.is-agg .story-set-agg-wrap {
  display: flex;
}

.story-set-agg-row {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) minmax(88px, 1.2fr) 32px;
  gap: 8px;
  align-items: center;
}

.story-set-agg-input {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.story-set-agg-input > input[type="number"] {
  width: 100%;
}

.story-set-agg-add,
.story-set-agg-del {
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
}

.story-set-agg-add {
  border: 1px dashed #b7aa9a;
  background: #fff;
}

.story-set-agg-del {
  border: 1px solid #c8bfb4;
  background: #eee;
}

.story-set-help-mask {
  z-index: 150;
}

.story-set-help {
  width: min(560px, calc(100vw - 32px));
}

.story-set-help-steps {
  margin: 0;
  padding: 16px 18px 18px 36px;
  line-height: 1.7;
}

.story-set-extra[hidden],
.story-set-rand[hidden],
.story-value-slot[hidden] {
  display: none;
}

.story-num-field,
.story-num-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.88rem;
}

.story-num-box {
  padding: 10px 12px;
  border: 1px solid #d9d1c7;
  border-radius: 6px;
}

.story-num-field select,
.story-num-box select,
.story-num-radio input[type="number"],
.story-value-slot input {
  height: 32px;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  background: #fff;
  padding: 0 8px;
}

.story-value-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.story-value-slot input {
  flex: 1;
  min-width: 0;
}

.story-value-pen {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  background: #fff;
  color: #3d2412;
  cursor: pointer;
}

.story-num-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.story-num-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.story-num-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 14px;
  background: #fffdf8;
}

.story-num-foot button.story-num-help {
  border: 0;
  background: transparent;
  color: #2a6fbf;
  padding: 0;
}

.story-num-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.story-num-foot button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.story-num-foot button.is-ok {
  border-color: #b15a1a;
  background: #d36a22;
  color: #fff;
}

.story-num-foot button:disabled {
  opacity: 0.45;
  cursor: default;
}

.story-adv-dialog {
  width: min(760px, calc(100vw - 32px));
}

.story-adv-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 0;
  background: #f4f1ec;
}

.story-adv-bar select {
  height: 32px;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  background: #fff;
}

.story-adv-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.story-adv-box {
  margin: 12px 14px;
  border: 1px solid #d9d3cb;
  background: #fff;
}

.story-adv-box h4 {
  margin: 0;
  padding: 8px 10px;
  font-size: 0.86rem;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

.story-adv-list {
  min-height: 96px;
}

.story-adv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 10px;
  padding: 6px 8px;
  background: #eceae6;
  color: #666;
}

.story-adv-row-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.story-adv-empty {
  margin: 10px;
  padding: 8px 10px;
  background: #eceae6;
  color: #666;
}

.story-adv-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px;
  padding: 8px 10px;
  background: #eceae6;
  color: #666;
}

.story-adv-link {
  flex-shrink: 0;
  color: #3d2412;
}

.story-adv-preview {
  margin-top: 0;
}

.story-cond-dialog {
  position: relative;
  width: min(480px, calc(100vw - 32px));
  padding-top: 28px;
}

.story-cond-dialog h3 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3d2412;
}

.story-cond-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.story-cond-options button {
  height: 40px;
  border: 1px solid #cfc8c0;
  border-radius: 8px;
  background: #fffdf8;
  color: #3d2412;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.story-cond-options button:hover {
  border-color: #6e4b2a;
  background: #f7f1e6;
}

.story-jump-dialog h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3d2412;
}

.story-jump-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
  color: #3d2412;
}

.story-jump-field select,
.story-jump-level select {
  height: 36px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid #cfc8c0;
  border-radius: 6px;
  background: #fffdf8;
  color: #3d2412;
  font: inherit;
}

.story-jump-search {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}

.story-jump-search input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #cfc8c0;
  border-radius: 6px;
  background: #fffdf8;
  color: #3d2412;
  font: inherit;
  box-sizing: border-box;
}

.story-jump-find {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6e4b2a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.story-jump-find:hover {
  color: #3d2412;
}

.story-jump-levels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.story-jump-hits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  margin-top: 8px;
  overflow: auto;
}

.story-jump-hit {
  text-align: left;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: #3d2412;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.story-jump-hit:hover,
.story-jump-hit.is-on {
  background: #f4efe6;
}

.story-opt-del {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: #d8cfc4;
  color: #5c3218;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.story-choice-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.story-choice-toolbar button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  background: #fffdf8;
  color: #6e4b2a;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.story-branch {
  margin-top: 12px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed #cfc8c0;
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.65);
}

.story-branch .story-line,
.story-branch .story-bubble-wrap,
.story-branch .story-bubble-col,
.story-branch .story-text,
.story-branch .story-edit-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.story-branch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: #6e4b2a;
  font-weight: 600;
}

.story-branch-add {
  height: 26px;
  padding: 0 10px;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  background: #fff;
  color: #6e4b2a;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.story-line.is-editing {
  background: #fff;
  padding: 12px 12px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.story-edit-name,
.story-edit-text,
.story-choice-edit {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d0c8c0;
  border-radius: 2px;
  padding: 6px 8px;
  font: inherit;
  background: #f3f3f3;
  color: inherit;
}

.story-edit-name {
  max-width: 160px;
  font-size: 0.8rem;
}

.story-line-tools {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.story-tool {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fffdf8;
}

.story-tool svg {
  display: block;
  pointer-events: none;
}

.story-tool.is-cancel {
  background: #c9a227;
  color: #3d2412;
}

.story-tool.is-save {
  background: #4a9a46;
}

.story-tool.is-del {
  background: #b04a78;
}

.story-tool.is-pen {
  background: #3d2412;
}

.story-line-cond > .story-loop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.story-cond-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.story-line-break,
.story-line-setval {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.story-line-side-del {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.story-pick-dialog {
  width: min(720px, calc(100vw - 32px));
  border-radius: 8px;
  overflow: hidden;
  background: #f4f1ec;
  color: #3d2412;
  box-shadow: 0 16px 40px rgba(40, 28, 16, 0.28);
}

.story-pick-pages {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 0;
  background: #fffdf8;
}

.story-pick-pages button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.story-pick-pages button.is-on {
  border-color: #b15a1a;
  background: #d36a22;
  color: #fff;
}

.story-pick-search {
  padding: 10px 14px 0;
  background: #fffdf8;
}

.story-pick-search input {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  padding: 0 10px;
}

.story-pick-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 14px;
}

.story-pick-groups,
.story-pick-items {
  min-height: 220px;
  max-height: 280px;
  overflow: auto;
  border: 1px solid #d9d1c7;
  border-radius: 6px;
  background: #fff;
}

.story-pick-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #f0ebe4;
  background: transparent;
  padding: 8px 10px;
  cursor: pointer;
  color: #3d2412;
}

.story-pick-row.is-on {
  background: #d36a22;
  color: #fff;
}

.story-pick-fields {
  display: grid;
  gap: 8px;
  padding: 0 14px 10px;
}

.story-pick-fields label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-pick-fields input {
  flex: 1;
  height: 32px;
  border: 1px solid #cfc8c0;
  border-radius: 4px;
  padding: 0 8px;
}

.story-pick-fields button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: #d36a22;
  color: #fff;
  cursor: pointer;
}

.story-line-choices {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
}

.story-line-choices.is-editing {
  background: #fff;
  padding: 14px 16px 10px;
  border-radius: 4px;
}

.story-choice,
.story-choice-edit {
  width: min(360px, 88%);
  text-align: center;
  padding: 10px 14px;
  background: #cfcfcf;
  border-radius: 2px;
  font-size: 0.92rem;
  color: #2a2a2a;
}

.story-choice-edit {
  border: 1px solid #b8b0a8;
}

.story-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px 12px;
  background: #e7e2dc;
  border-top: 1px solid #cfc8c0;
}

.story-actions button {
  min-height: 36px;
  border: 0;
  border-radius: 2px;
  background: #b7d4c0;
  color: #1a1a1a;
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.story-actions button:hover {
  filter: brightness(1.04);
}

.story-actions button:disabled,
.story-actions button.is-locked {
  background: #d5d0ca;
  color: #8a837c;
  cursor: default;
  filter: none;
}

.story-ctx {
  position: fixed;
  z-index: 120;
  min-width: 120px;
  padding: 4px;
  background: #fff;
  border: 1px solid #cfc8c0;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.story-ctx button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 4px;
}

.story-ctx button:hover {
  background: #f0ebe6;
}

@media (max-width: 720px) {
  .story-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 140px 1fr;
  }

  .story-side {
    border-right: 0;
    border-bottom: 1px solid #cfc8c0;
  }

  .story-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dorm-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}

.dorm-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.dorm-nav-btn {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.dorm-map-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #3d5a73;
  color: #fff;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.dorm-map-btn:hover {
  filter: brightness(1.06);
}

.dorm-back {
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .dorm-main {
    min-height: 280px;
  }

  .dorm-side {
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(300px, calc(100% - 32px));
  }

  .dorm-stats {
    justify-content: flex-start;
    width: 100%;
  }

  .dorm-stat {
    justify-content: flex-start;
  }

  .dorm-switch-calc {
    top: auto;
    bottom: 120px;
    right: 10px;
    transform: none;
    height: 68px;
  }

  .dorm-switch-calc:active {
    transform: scale(0.97);
  }
}

/* —— 剧情模式 —— */
.plot-mode {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(40, 48, 72, 0.55), transparent 70%),
    linear-gradient(180deg, #12151c 0%, #1a1e28 45%, #0e1016 100%);
  color: #f2efe8;
}

.plot-mode[hidden] {
  display: none !important;
}

body.is-plot-mode #dorm-page,
body.is-plot-mode .stage {
  pointer-events: none;
}

.plot-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 0;
  pointer-events: none;
}

.plot-topbar > * {
  pointer-events: auto;
}

.plot-exit,
.plot-top-btn,
.plot-icon-btn {
  padding: 8px 14px;
  border: 1px solid rgba(242, 239, 232, 0.28);
  border-radius: 999px;
  background: rgba(18, 21, 28, 0.55);
  color: #f2efe8;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.plot-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}

.plot-exit:hover,
.plot-top-btn:hover,
.plot-icon-btn:hover,
.plot-icon-btn[aria-expanded="true"] {
  background: rgba(18, 21, 28, 0.8);
}

.plot-top-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.plot-menu-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  min-width: 108px;
  border: 1px solid rgba(242, 239, 232, 0.2);
  border-radius: 12px;
  background: rgba(12, 14, 20, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  transform-origin: top right;
  animation: plot-menu-in 0.18s ease-out;
}

.plot-menu-panel[hidden] {
  display: none !important;
}

@keyframes plot-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.plot-menu-panel .plot-top-btn {
  width: 100%;
  text-align: center;
  border-radius: 10px;
}

.plot-path {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(242, 239, 232, 0.42);
  text-align: center;
  pointer-events: none;
}

.plot-top-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  pointer-events: none;
}

.plot-scene-time {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(242, 239, 232, 0.72);
  text-align: center;
}

.plot-scene-time[hidden] {
  display: none !important;
}

.plot-stage {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 72px 20px 36px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.plot-region {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #1e2a24;
}

.plot-region[hidden] {
  display: none !important;
}

.plot-region-land {
  width: 100%;
  height: 100%;
}

.plot-region .region-spots {
  z-index: 2;
}

.plot-region .region-poi {
  pointer-events: auto;
  cursor: pointer;
}

.plot-region .region-poi.is-visited {
  opacity: 0.45;
}

.plot-dialog,
.plot-role,
.plot-text,
.plot-hint {
  user-select: none;
  -webkit-user-select: none;
}

.plot-dialog {
  width: min(720px, 100%);
  min-height: 132px;
  padding: 18px 22px 28px;
  border: 1px solid rgba(242, 239, 232, 0.18);
  border-radius: 14px;
  background: rgba(12, 14, 20, 0.72);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 1;
}

.plot-role {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #d8c4a0;
}

.plot-role[hidden] {
  display: none !important;
}

.plot-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: #f2efe8;
}

.plot-hint {
  position: absolute;
  right: 18px;
  bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(242, 239, 232, 0.38);
}

.plot-hint[hidden] {
  display: none !important;
}

.plot-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.plot-choices[hidden] {
  display: none !important;
}

.plot-choice-btn {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(242, 239, 232, 0.28);
  border-radius: 10px;
  background: rgba(242, 239, 232, 0.08);
  color: #f2efe8;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.plot-choice-btn:hover {
  background: rgba(242, 239, 232, 0.16);
  border-color: rgba(216, 196, 160, 0.55);
}

.plot-name-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.plot-name-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.plot-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(242, 239, 232, 0.28);
  border-radius: 10px;
  background: rgba(8, 10, 14, 0.45);
  color: #f2efe8;
  font-size: 16px;
  outline: none;
}

.plot-name-input:focus {
  border-color: rgba(216, 196, 160, 0.7);
}

.plot-name-input::placeholder {
  color: rgba(242, 239, 232, 0.45);
}

.plot-birth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.plot-birth-label {
  flex: 0 0 auto;
  font-size: 13px;
  color: rgba(242, 239, 232, 0.72);
}

.plot-birth-select {
  flex: 1;
  min-width: 72px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(242, 239, 232, 0.28);
  border-radius: 10px;
  background: rgba(8, 10, 14, 0.45);
  color: #f2efe8;
  font-size: 15px;
  outline: none;
}

.plot-birth-select:focus {
  border-color: rgba(216, 196, 160, 0.7);
}

.plot-birth-unit {
  flex: 0 0 auto;
  font-size: 13px;
  color: rgba(242, 239, 232, 0.55);
}

.plot-attr-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(242, 239, 232, 0.2);
  border-radius: 10px;
  background: rgba(8, 10, 14, 0.35);
}

.plot-attr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plot-attr-title {
  font-size: 14px;
  font-weight: 600;
  color: #f2efe8;
}

.plot-attr-reroll {
  padding: 6px 12px;
  border: 1px solid rgba(216, 196, 160, 0.45);
  border-radius: 8px;
  background: rgba(216, 196, 160, 0.12);
  color: #f2efe8;
  font-size: 13px;
  cursor: pointer;
}

.plot-attr-reroll:hover {
  background: rgba(216, 196, 160, 0.22);
}

.plot-attr-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(242, 239, 232, 0.55);
}

.plot-attr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}

.plot-attr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: rgba(242, 239, 232, 0.88);
}

.plot-attr-row b {
  font-variant-numeric: tabular-nums;
  color: #f2efe8;
}

.plot-file-modal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 14, 0.55);
}

.plot-file-modal[hidden] {
  display: none !important;
}

.plot-file-panel {
  width: min(520px, 100%);
  max-height: min(78vh, 640px);
  overflow: auto;
  padding: 16px 16px 18px;
  border: 1px solid rgba(242, 239, 232, 0.2);
  border-radius: 14px;
  background: #171b24;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.plot-file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.plot-file-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.plot-file-close {
  padding: 6px 12px;
  border: 1px solid rgba(242, 239, 232, 0.24);
  border-radius: 999px;
  background: transparent;
  color: #f2efe8;
  font-size: 12px;
  cursor: pointer;
}

.plot-file-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.plot-file-slot {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(242, 239, 232, 0.18);
  border-radius: 10px;
  background: rgba(242, 239, 232, 0.05);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.plot-file-slot:hover:not(:disabled) {
  border-color: rgba(216, 196, 160, 0.5);
  background: rgba(242, 239, 232, 0.1);
}

.plot-file-slot:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.plot-file-slot.is-empty .plot-file-slot-body {
  color: rgba(242, 239, 232, 0.45);
}

.plot-file-slot-no {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(242, 239, 232, 0.55);
}

.plot-file-slot-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.plot-file-slot-body strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plot-file-slot-body small {
  font-size: 11px;
  color: rgba(242, 239, 232, 0.45);
}

.plot-file-slot-body em {
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(242, 239, 232, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.plot-history-panel {
  width: min(560px, 100%);
  max-height: min(82vh, 720px);
}

.plot-history-cap {
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(242, 239, 232, 0.45);
}

.plot-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(60vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.plot-history-item {
  padding: 10px 12px;
  border: 1px solid rgba(242, 239, 232, 0.12);
  border-radius: 10px;
  background: rgba(242, 239, 232, 0.04);
}

.plot-history-item .plot-history-role {
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #d8c4a0;
}

.plot-history-item .plot-history-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: rgba(242, 239, 232, 0.88);
}

.plot-history-empty {
  margin: 12px 0;
  text-align: center;
  color: rgba(242, 239, 232, 0.4);
  font-size: 13px;
}

/* —— 任务笔记 —— */
.quest-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 14, 0.55);
}

.quest-modal[hidden] {
  display: none !important;
}

.quest-panel {
  width: min(860px, 100%);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(242, 239, 232, 0.2);
  border-radius: 14px;
  background: #16181f;
  color: #f2efe8;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.quest-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(242, 239, 232, 0.12);
}

.quest-panel-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.quest-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(242, 239, 232, 0.12);
}

.quest-tab {
  padding: 6px 12px;
  border: 1px solid rgba(242, 239, 232, 0.22);
  border-radius: 999px;
  background: transparent;
  color: rgba(242, 239, 232, 0.72);
  font-size: 13px;
  cursor: pointer;
}

.quest-tab:hover {
  background: rgba(242, 239, 232, 0.08);
  color: #f2efe8;
}

.quest-tab.is-on {
  border-color: rgba(216, 196, 160, 0.55);
  background: rgba(216, 196, 160, 0.14);
  color: #f2efe8;
}

.quest-close {
  padding: 6px 12px;
  border: 1px solid rgba(242, 239, 232, 0.28);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.quest-close:hover {
  background: rgba(242, 239, 232, 0.1);
}

.quest-panel-body {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  min-height: 280px;
  flex: 1;
  overflow: hidden;
}

.quest-list-wrap {
  border-right: 1px solid rgba(242, 239, 232, 0.12);
  overflow: auto;
}

.quest-list {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
}

.quest-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.quest-item:hover {
  background: rgba(242, 239, 232, 0.06);
}

.quest-item.is-on {
  border-color: rgba(216, 196, 160, 0.45);
  background: rgba(216, 196, 160, 0.1);
}

.quest-item.is-done .quest-item-title::after {
  content: " · 完成";
  font-weight: 400;
  opacity: 0.65;
  font-size: 12px;
}

.quest-item-group {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(90, 70, 50, 0.65);
}

.quest-item-title {
  font-size: 14px;
  font-weight: 600;
}

.quest-item-goal {
  font-size: 12px;
  color: rgba(242, 239, 232, 0.55);
}

.quest-detail {
  padding: 16px 18px 20px;
  overflow: auto;
}

.quest-goal {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #e8dcc0;
}

.quest-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quest-note {
  padding: 12px 14px;
  border: 1px solid rgba(242, 239, 232, 0.12);
  border-radius: 10px;
  background: rgba(8, 10, 14, 0.35);
}

.quest-note h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(242, 239, 232, 0.75);
}

.quest-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(242, 239, 232, 0.9);
}

.quest-note-empty,
.quest-empty {
  margin: 0;
  padding: 24px 18px;
  font-size: 14px;
  color: rgba(242, 239, 232, 0.5);
  grid-column: 1 / -1;
}

.quest-empty[hidden],
.quest-detail[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .quest-panel-body {
    grid-template-columns: 1fr;
  }

  .quest-list-wrap {
    border-right: 0;
    border-bottom: 1px solid rgba(242, 239, 232, 0.12);
    max-height: 140px;
  }
}

/* —— 角色互动场景 —— */
.char-interact {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: #c8c8c8;
  color: #2a2a2a;
}

.char-interact[hidden] {
  display: none !important;
}

.char-interact-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.char-interact-scene {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  min-width: 96px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.char-interact-stage {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(200px, 320px) minmax(140px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 72px 24px 120px;
  min-height: 0;
}

.char-interact-portrait-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 360px;
  justify-content: center;
}

.char-interact-portrait {
  width: min(280px, 70%);
  aspect-ratio: 3 / 5;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  pointer-events: none;
}

.char-interact-who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.char-interact-who strong {
  font-size: 16px;
}

.char-interact-who span {
  font-size: 12px;
  color: #555;
}

.char-interact-opts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  min-height: 280px;
}

.char-interact-opts-left {
  align-items: flex-end;
  padding-right: 8px;
}

.char-interact-opts-right {
  align-items: flex-start;
  padding-left: 8px;
}

.char-interact-opts-left .char-interact-opt:nth-child(1) {
  transform: translateX(-8px);
}
.char-interact-opts-left .char-interact-opt:nth-child(2) {
  transform: translateX(12px);
}
.char-interact-opts-left .char-interact-opt:nth-child(3) {
  transform: translateX(-4px);
}
.char-interact-opts-right .char-interact-opt:nth-child(1) {
  transform: translateX(8px);
}
.char-interact-opts-right .char-interact-opt:nth-child(2) {
  transform: translateX(-10px);
}
.char-interact-opts-right .char-interact-opt:nth-child(3) {
  transform: translateX(6px);
}

.char-interact-opt {
  min-width: 132px;
  max-width: 200px;
  padding: 14px 18px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.char-interact-opt:hover {
  background: #f7f7f7;
}

.char-interact-acts {
  position: absolute;
  left: 20px;
  bottom: 22px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.char-interact-act {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.char-interact-act:hover {
  background: #f4f4f4;
}

.char-interact-talk {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 6;
  width: min(640px, calc(100% - 48px));
  padding: 16px 20px 28px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.char-interact-talk-role {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.char-interact-talk-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.char-interact-talk-hint {
  position: absolute;
  right: 16px;
  bottom: 10px;
  font-size: 11px;
  color: #888;
}

body.is-char-interact-open .love-fab,
body.is-char-interact-open .map-fab,
body.is-char-interact-open .bag-fab,
body.is-char-interact-open .spell-fab,
body.is-char-interact-open .arena-fab {
  visibility: hidden;
}

@media (max-width: 720px) {
  .char-interact-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    padding: 64px 12px 110px;
  }

  .char-interact-opts {
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 0;
    gap: 10px;
    justify-content: center;
  }

  .char-interact-opts-left,
  .char-interact-opts-right {
    align-items: center;
    padding: 0;
  }

  .char-interact-opt {
    transform: none !important;
  }

  .char-interact-acts {
    left: 12px;
    right: 12px;
    justify-content: flex-start;
  }

  .char-interact-act {
    width: 56px;
    height: 56px;
    font-size: 12px;
  }
}

/* —— 拜访弹窗 —— */
.visit-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 14, 0.6);
}

/* —— 寝室消息（新闻 / 邮箱） —— */
.msg-overlay {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  padding: 52px 44px 64px;
  background: transparent;
  pointer-events: auto;
  /* 嵌套：整体等比缩小一级，按钮与内容一并缩放 */
  transform: scale(0.88);
  transform-origin: center center;
}

.msg-overlay[hidden] {
  display: none !important;
}

.msg-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(61, 42, 22, 0.35);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.72);
  color: #3d2a16;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.msg-tabs {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 10px;
}

.msg-tab {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(61, 42, 22, 0.35);
  background: rgba(255, 250, 240, 0.72);
  color: #3d2a16;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.msg-tab.is-on {
  background: rgba(239, 230, 214, 0.95);
  box-shadow: inset 0 0 0 2px rgba(139, 106, 58, 0.45);
}

.msg-news {
  flex: 1;
  min-height: 0;
  display: grid;
  /* 报纸内容区宽度减 1/3（保留约 2/3） */
  grid-template-columns: 40px minmax(0, 66.666%) 40px;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
}

.msg-arrow {
  border: none;
  background: rgba(255, 250, 240, 0.55);
  color: #3d2a16;
  font-size: 2rem;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  align-self: center;
  height: 72px;
}

.msg-paper {
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  padding: 18px 22px 16px;
  background: rgba(250, 246, 236, 0.88);
  border: 1px solid rgba(90, 70, 40, 0.28);
  box-shadow: 0 10px 28px rgba(20, 16, 10, 0.18);
  color: #2a2118;
  font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
}

.msg-section-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.7;
}

.msg-head h3 {
  margin: 0 0 8px;
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 700;
}

.msg-deck {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-style: italic;
  opacity: 0.85;
}

.msg-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  column-count: 2;
  column-gap: 1.4rem;
}

.msg-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid rgba(42, 33, 24, 0.35);
}

.msg-side-item h4 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.msg-side-item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.9;
}

.msg-pager {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  opacity: 0.65;
  font-family: system-ui, sans-serif;
}

.msg-mail,
.msg-mail-detail {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 8px;
}

.msg-mail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
  padding: 8px 4px 24px;
}

.msg-mail-tile {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(61, 42, 22, 0.3);
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.82);
  color: #3d2a16;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(3px);
}

.msg-mail-tile.is-unread {
  box-shadow: inset 0 0 0 2px rgba(139, 70, 40, 0.45);
}

.msg-mail-from {
  font-size: 0.72rem;
  opacity: 0.7;
}

.msg-mail-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.msg-mail-detail {
  padding: 12px 16px 24px;
  background: rgba(250, 246, 236, 0.9);
  border: 1px solid rgba(90, 70, 40, 0.28);
  border-radius: 12px;
  color: #2a2118;
}

.msg-mail-back {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.9rem;
  margin-bottom: 10px;
  padding: 0;
}

.msg-mail-from-line {
  margin: 0 0 6px;
  font-size: 0.8rem;
  opacity: 0.7;
}

.msg-mail-detail h3 {
  margin: 0 0 12px;
  font-size: 1.2rem;
}

.msg-mail-body {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.65;
}

.msg-empty {
  margin: 24px;
  opacity: 0.7;
}

@media (max-width: 720px) {
  .msg-overlay {
    padding: 56px 12px 72px;
    transform: scale(0.9);
  }

  .msg-body {
    column-count: 1;
  }

  .msg-sides {
    grid-template-columns: 1fr;
  }

  .msg-news {
    grid-template-columns: 32px minmax(0, 80%) 32px;
  }
}

.visit-modal[hidden] {
  display: none !important;
}

.timetable-modal .timetable-dialog {
  width: min(720px, 96vw);
  max-height: min(88vh, 640px);
  display: flex;
  flex-direction: column;
  background: #f4f5f7;
  color: #2c3340;
}

.timetable-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px auto auto 40px;
  align-items: center;
  gap: 8px;
}

.timetable-head h2 {
  margin: 0;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #111;
}

.timetable-nav {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #e8eaef;
  color: #2c3340;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.timetable-nav:hover {
  background: #dde1e8;
}

.timetable-sim {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: #2c3340;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.timetable-sim input {
  margin: 0;
}

.timetable-reset {
  width: 36px;
  height: 36px;
  border: 1px solid #8a93a0;
  border-radius: 8px;
  background: #fff;
  color: #2c3340;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.timetable-reset:hover {
  background: #eef1f5;
}

.timetable-reset[hidden] {
  display: none !important;
}

.timetable-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #2c3340;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.timetable-close:hover {
  background: #111820;
}

.timetable-hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: #6a7380;
  text-align: center;
}

.timetable-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-bottom: 4px;
}

.timetable-band-label {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #5a6470;
}

.timetable-row {
  display: grid;
  gap: 6px;
  min-height: 72px;
  align-items: stretch;
}

.timetable-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 0;
  min-height: 72px;
  padding: 10px 8px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  text-align: left;
  font: inherit;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  cursor: default;
}

.timetable-cell.is-clickable {
  cursor: pointer;
}

.timetable-cell.is-clickable:hover {
  filter: brightness(1.06);
}

.timetable-cell.is-done {
  color: rgba(255, 255, 255, 0.92);
}

.timetable-cell-name {
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-all;
}

.timetable-cell-count {
  position: absolute;
  right: 6px;
  bottom: 0;
  z-index: 1;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.88;
  letter-spacing: -0.04em;
  pointer-events: none;
}

.timetable-done-stamp {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.72);
  transform: rotate(-22deg);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.timetable-empty {
  margin: 0;
  padding: 18px 8px;
  color: #8a93a0;
  font-size: 0.85rem;
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .timetable-head {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    grid-template-rows: auto auto;
  }

  .timetable-sim,
  .timetable-reset,
  .timetable-close {
    grid-row: 2;
  }

  .timetable-row {
    min-height: 64px;
    gap: 4px;
  }

  .timetable-cell {
    padding: 8px 6px;
    min-height: 64px;
  }

  .timetable-cell-name {
    font-size: 0.72rem;
  }

  .timetable-cell-count {
    font-size: 1.8rem;
  }
}

.rest-confirm-dialog {
  width: min(360px, 100%);
  max-height: none;
}

.rest-confirm-text {
  margin: 0;
  padding: 8px 18px 4px;
  color: #e8e0d4;
  font-size: 15px;
  line-height: 1.6;
}

.rest-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
}

.rest-confirm-actions button {
  min-width: 88px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(216, 196, 160, 0.28);
  background: #222733;
  color: #f3efe6;
  cursor: pointer;
}

#rest-confirm-yes,
#plant-confirm-yes {
  background: #6e4b2a;
  border-color: #8a6240;
}

.college-board-dialog {
  width: min(420px, 100%);
}

.college-board-body {
  padding: 4px 18px 18px;
  color: #e8e0d4;
  font-size: 14px;
  line-height: 1.5;
}

.college-board-body h3 {
  margin: 12px 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #cbb894;
}

.college-cup-row,
.college-point-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(216, 196, 160, 0.12);
}

.college-cup-row.is-mine strong {
  color: #f3e2b8;
}

.college-board-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #b7ad9e;
}

.visit-dialog {
  width: min(720px, 100%);
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(216, 196, 160, 0.22);
  border-radius: 16px;
  background: #171b24;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.visit-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(242, 239, 232, 0.12);
}

.visit-dialog-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #f2efe8;
}

.visit-close {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(242, 239, 232, 0.24);
  border-radius: 50%;
  background: transparent;
  color: #f2efe8;
  font-size: 16px;
  cursor: pointer;
}

.visit-close:hover {
  background: rgba(242, 239, 232, 0.12);
}

.visit-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.visit-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(242, 239, 232, 0.72);
}

.visit-section-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.visit-tile {
  width: 80px;
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.visit-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: hsl(var(--npc-hue, 28), 48%, 52%);
  box-shadow: 0 4px 0 rgba(40, 32, 24, 0.18);
}

.visit-tile strong {
  font-size: 12px;
  font-weight: 700;
  color: #f2efe8;
  text-align: center;
}

.visit-tile em {
  font-style: normal;
  font-size: 11px;
  color: rgba(242, 239, 232, 0.6);
  text-align: center;
  line-height: 1.3;
}

.visit-tile:hover .visit-avatar {
  box-shadow: 0 4px 0 rgba(40, 32, 24, 0.18), 0 0 0 2px rgba(216, 196, 160, 0.5);
}

.visit-empty {
  margin: 8px 0;
  font-size: 13px;
  color: rgba(242, 239, 232, 0.4);
}