/* project-ink menus: torn paper, ink and wax. The game itself renders in the Pixi canvas. */

:root {
  --paper: #efe2c4;
  --paper-light: #f8efd9;
  --paper-dark: #e3d4b2;
  --ink: #1b1612;
  --ink-soft: #3b2c16;
  --text-soft: #6a5534;
  --edge: #4a3a24;
  --wax: #a8231a;
  --gold: #c9962e;
  --tide: #2a4fb5;
  --ember: #d9472b;
  --ui-scale: 1;
  --font-display: 'IM Fell English SC', Georgia, serif;
  --font-italic: 'IM Fell English', Georgia, serif;
  --font-ui: Inter, 'Segoe UI', system-ui, sans-serif;
  --shadow-hard: 3px 3px 0 rgba(27, 22, 18, 0.85);
  --wobble: 5px 11px 6px 12px / 11px 5px 12px 6px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  font-size: calc(16px * var(--ui-scale));
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

#stage, #ui {
  position: fixed;
  inset: 0;
}

#stage canvas {
  display: block;
}

#ui {
  pointer-events: none;
}

#ui .screen,
#ui .modal-backdrop,
#ui .toast {
  pointer-events: auto;
}

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

/* Scrollbars: a thin ink thumb on a paper track. Chromium/Safari use the ::-webkit-scrollbar
   rules; Firefox (which lacks them) gets the standard properties. */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(227, 212, 178, 0.55);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: rgba(74, 58, 36, 0.55);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--ink-soft);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(74, 58, 36, 0.55) rgba(227, 212, 178, 0.55);
  }
}

/* ---------- screens ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1rem;
  overflow-y: auto;
  background: radial-gradient(ellipse at center, rgba(239, 226, 196, 0) 35%, rgba(59, 42, 18, 0.38) 100%);
  animation: fade-in 0.25s ease-out;
}

.screen.overlay {
  background: rgba(36, 24, 12, 0.45);
  backdrop-filter: blur(2px);
}

.screen-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.4rem;
  margin: 0 0 0.75rem;
  text-align: center;
  color: var(--ink);
}

.screen-footer {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.hint {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0.25rem 0 0.75rem;
}

/* ---------- title ---------- */

.title-block {
  text-align: center;
}

.logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 11vw, 7rem);
  line-height: 1;
  margin: 0;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(27, 22, 18, 0.15), 0 0 30px rgba(248, 239, 217, 0.9);
}

.logo-dash {
  color: var(--ember);
}

.tagline {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.6rem;
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
}

.codename {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--text-soft);
  margin: 0.4rem 0 0;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(20rem, 88vw);
}

.foundation-note {
  max-width: 34rem;
  text-align: center;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-soft);
  background: rgba(248, 239, 217, 0.75);
  padding: 0.5rem 1rem;
  border-radius: var(--wobble);
  margin: 0;
}

.version {
  position: absolute;
  right: 1.25rem;
  bottom: 0.9rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* ---------- buttons ---------- */

.btn {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.35rem;
  padding: 0.6rem 1.4rem;
  background: var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.15s;
}

/* Focus looks exactly like hover, and only when navigating by keyboard or controller
   (html[data-input] is set by ui/modality.ts). Mouse users only ever see hover. */
.btn:hover:not(:disabled),
html:not([data-input='pointer']) .btn:focus:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(27, 22, 18, 0.85);
}

.btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 rgba(27, 22, 18, 0.85);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper-light);
  border-color: var(--ink);
}

.btn-danger {
  background: var(--wax);
  color: #fff4e6;
  border-color: #6d140e;
}

.btn-ghost {
  background: rgba(248, 239, 217, 0.6);
  border-style: dashed;
  box-shadow: none;
}

.btn-ghost:hover:not(:disabled),
html:not([data-input='pointer']) .btn-ghost:focus:not(:disabled) {
  box-shadow: none;
  background: var(--paper-light);
}

/* No browser focus rings anywhere; every control draws its own focus state. */
:focus,
:focus-visible {
  outline: none;
}

html:not([data-input='pointer']) .btn:focus::before {
  content: '';
  position: absolute;
  left: -1.1rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.28rem;
  border-radius: 50% 40% 55% 45%;
  background: var(--tide);
}

/* ---------- panels ---------- */

.panel {
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%),
    var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: 4px 9px 5px 10px / 9px 4px 10px 5px;
  box-shadow: 0 14px 40px rgba(40, 25, 10, 0.35), 4px 4px 0 rgba(27, 22, 18, 0.8);
  padding: 1.5rem 2rem;
}

.overlay-panel {
  min-width: min(24rem, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overlay-panel .menu {
  margin-top: 0.5rem;
}

.over-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.4rem;
  margin: 0;
  color: var(--wax);
}

.over-subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.2rem;
  margin: 0.2rem 0 1rem;
  color: var(--ink-soft);
}

.over-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  text-align: center;
  font-weight: 500;
  line-height: 1.8;
}

/* ---------- level-up and chest cards ---------- */

.choice-overlay {
  background: rgba(36, 24, 12, 0.55);
}

.choice-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
}

.choice-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3rem;
  margin: 0;
  color: var(--paper-light);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.choice-title.chest {
  color: #f4d27a;
}

.choice-level {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.3rem;
  color: #e8dcc0;
}

.choice-banish-hint,
.choice-hint {
  margin: 0;
  color: #e8dcc0;
  font-family: var(--font-italic);
  font-style: italic;
}

.choice-hint {
  font-size: 0.85rem;
  opacity: 0.8;
}

.cards {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  --card-accent: var(--ink-soft);
  position: relative;
  width: 15rem;
  min-height: 19rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-align: left;
  padding: 1.1rem 1.1rem 1rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%),
    var(--paper-light);
  border: 2px solid var(--edge);
  border-top: 8px solid var(--card-accent);
  border-radius: 4px 9px 5px 10px / 9px 4px 10px 5px;
  box-shadow: 0 12px 30px rgba(20, 12, 5, 0.45), 4px 4px 0 rgba(27, 22, 18, 0.85);
  cursor: pointer;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
  animation: card-in 0.25s ease-out backwards;
}

.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.1s; }
.card:nth-child(4) { animation-delay: 0.15s; }

/* The lift is the only focus/hover indicator for cards. */
.card:hover,
html:not([data-input='pointer']) .card:focus {
  transform: translateY(-10px) rotate(-0.8deg);
}

.card:hover,
html:not([data-input='pointer']) .card:focus {
  box-shadow: 0 20px 38px rgba(20, 12, 5, 0.5), 6px 6px 0 rgba(27, 22, 18, 0.85);
}

.card.rarity-rare { border-top-color: #2a4fb5; }
.card.rarity-epic { border-top-color: #7a3fb5; }
.card.rarity-legendary { border-top-color: #c9962e; box-shadow: 0 0 0 3px #f4d27a, 0 12px 30px rgba(20, 12, 5, 0.45), 4px 4px 0 rgba(27, 22, 18, 0.85); }
.card.rarity-glyph { border-top-color: var(--ink); background: linear-gradient(180deg, #f3e9cf, var(--paper-light)); }

.card-highlight {
  box-shadow: 0 0 0 3px #f4d27a, 0 12px 30px rgba(20, 12, 5, 0.45), 4px 4px 0 rgba(27, 22, 18, 0.85);
}

.card-banishing {
  outline: 3px dashed var(--wax);
  outline-offset: 3px;
}

.card-key {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  font-size: 0.75rem;
  border: 1px solid var(--text-soft);
  color: var(--text-soft);
  border-radius: 3px;
  padding: 0 0.3rem;
}

.card-kind {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--card-accent);
  font-weight: 700;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.05;
}

.card-subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--text-soft);
}

.card-lines {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

.card-line:first-child {
  font-weight: 500;
}

.card-reaction {
  margin-top: 0.3rem;
  font-weight: 700;
  color: #8a6516;
}

.card-tags {
  margin-top: auto;
  padding-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.card-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(74, 58, 36, 0.4);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  color: var(--text-soft);
}

.choice-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.choice-actions .btn {
  font-size: 1.05rem;
  padding: 0.45rem 1rem;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) rotate(1.5deg); }
}

/* ---------- tips ---------- */

.tip {
  position: fixed;
  left: 50%;
  bottom: 6.5rem;
  transform: translateX(-50%);
  max-width: min(36rem, 90vw);
  text-align: center;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  background: rgba(248, 239, 217, 0.95);
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: var(--shadow-hard);
  padding: 0.6rem 1.2rem;
  animation: fade-in 0.3s ease-out;
  pointer-events: none;
}

/* ---------- pause build overview and summary ---------- */

.pause-panel,
.summary-panel {
  width: min(44rem, 94vw);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.build-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 1.25rem 0 0.5rem;
  align-self: stretch;
  border-top: 1px dashed rgba(74, 58, 36, 0.35);
  padding-top: 0.9rem;
}

.build {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.build h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0 0 0.4rem;
}

.build-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.build-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.soft {
  color: var(--text-soft);
  font-size: 0.88rem;
}

.ink-dot,
.glyph-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 1.5px solid var(--edge);
  flex: none;
}

.glyph-dot {
  background: var(--ink);
}

.stat-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 0.92rem;
}

.stat-list dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.summary-panel.victory .over-title {
  color: #8a6516;
}

.over-stats .gilt {
  color: #8a6516;
  font-weight: 700;
}

.damage-bars {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  align-self: stretch;
  display: grid;
  gap: 0.4rem;
}

.damage-bars li {
  display: grid;
  grid-template-columns: 11rem 1fr 5rem;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.92rem;
}

.damage-bar {
  height: 0.8rem;
  background: var(--paper-dark);
  border: 1px solid rgba(74, 58, 36, 0.4);
  border-radius: 3px;
  overflow: hidden;
}

.damage-bar span {
  display: block;
  height: 100%;
}

.damage-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---------- profiles ---------- */

.slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(14rem, 18rem));
  gap: 1.25rem;
}

.slot {
  background: var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: var(--shadow-hard);
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 12rem;
}

.slot.empty {
  background: rgba(248, 239, 217, 0.7);
  border-style: dashed;
  box-shadow: none;
}

.slot-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.slot-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--wax);
  color: #fff4e6;
  font-family: var(--font-display);
  font-size: 1.1rem;
  box-shadow: inset 0 0 0 2px #6d140e;
}

.slot-meta {
  margin: 0;
  font-size: 0.9rem;
}

.slot-meta.soft {
  color: var(--text-soft);
}

.slot-actions,
.slot-form {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.text-input,
.text-area {
  width: 100%;
  background: #fffaf0;
  border: 2px solid var(--edge);
  border-radius: 4px;
  padding: 0.5rem 0.65rem;
  font-size: 1rem;
}

.text-area {
  min-height: 5rem;
  resize: vertical;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  word-break: break-all;
}

/* ---------- settings ---------- */

.settings-panel {
  width: min(54rem, 96vw);
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
}

.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--edge);
  margin-bottom: 0.5rem;
}

.tab {
  background: none;
  border: none;
  border-bottom: 4px solid transparent;
  padding: 0.45rem 0.8rem 0.35rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  cursor: pointer;
  color: var(--text-soft);
}

.tab.active {
  color: var(--ink);
  border-bottom-color: var(--tide);
}

.tab:hover {
  color: var(--ink);
}

.tab-hint {
  font-size: 0.7rem;
  border: 1px solid var(--text-soft);
  color: var(--text-soft);
  border-radius: 3px;
  padding: 0 0.3rem;
}

.settings-body {
  overflow-y: auto;
  flex: 1;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
}

.setting-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(74, 58, 36, 0.25);
}

.setting-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
}

.setting-label small {
  flex-basis: 100%;
  color: var(--text-soft);
}

.setting-row.is-pending .setting-label > span:first-child {
  color: var(--text-soft);
}

.tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--gold);
  color: #8a6516;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

.group-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 1.25rem 0 0.25rem;
}

.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 6.5rem;
  padding: 0.25rem;
  background: var(--paper-dark);
  border: 2px solid var(--edge);
  border-radius: 999px;
  cursor: pointer;
}

/* Knob left + label right when off; label left + knob right when on (flex order, no overflow). */
.toggle-knob {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  border-radius: 50%;
  background: var(--paper-light);
  border: 2px solid var(--edge);
  transition: background 0.12s;
}

.toggle.on {
  background: #cdd7f2;
}

.toggle.on .toggle-knob {
  order: 1;
  background: var(--tide);
}

.toggle-text {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
}

.cycle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 13rem;
  padding: 0.35rem 0.5rem;
  background: var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: 5px;
  cursor: pointer;
}

.cycle-arrow {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-soft);
}

.cycle-value {
  font-weight: 500;
}

.slider {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Custom slider: an ink-filled paper track with a wax-seal knob (no browser default look).
   --fill is set inline by the Slider component. */
.slider input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 12rem;
  height: 1.6rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.slider input[type='range']::-webkit-slider-runnable-track {
  height: 0.6rem;
  border: 2px solid var(--edge);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tide) 0 var(--fill, 50%), var(--paper-dark) var(--fill, 50%) 100%);
}

.slider input[type='range']::-moz-range-track {
  height: 0.6rem;
  border: 2px solid var(--edge);
  border-radius: 999px;
  background: var(--paper-dark);
}

.slider input[type='range']::-moz-range-progress {
  height: 0.6rem;
  border-radius: 999px 0 0 999px;
  background: var(--tide);
}

.slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: calc(-0.3rem - 3px);
  border-radius: 50%;
  background: var(--wax);
  border: 2px solid #6d140e;
  box-shadow: 1px 1px 0 rgba(27, 22, 18, 0.6);
  transition: transform 0.1s ease-out;
}

.slider input[type='range']::-moz-range-thumb {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--wax);
  border: 2px solid #6d140e;
  box-shadow: 1px 1px 0 rgba(27, 22, 18, 0.6);
  transition: transform 0.1s ease-out;
}

.slider input[type='range']:hover::-webkit-slider-thumb,
html:not([data-input='pointer']) .slider input[type='range']:focus::-webkit-slider-thumb {
  transform: scale(1.3);
}

.slider input[type='range']:hover::-moz-range-thumb,
html:not([data-input='pointer']) .slider input[type='range']:focus::-moz-range-thumb {
  transform: scale(1.3);
}

/* Toggles, option pickers and key bindings lift like buttons on hover / keyboard focus. */
.toggle,
.cycle,
.bind {
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.15s;
}

.toggle:hover,
.cycle:hover,
.bind:hover:not(.capturing),
html:not([data-input='pointer']) .toggle:focus,
html:not([data-input='pointer']) .cycle:focus,
html:not([data-input='pointer']) .bind:focus:not(.capturing) {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(27, 22, 18, 0.8);
  border-color: var(--ink);
}

.cycle:hover,
html:not([data-input='pointer']) .cycle:focus {
  background: #fffaf0;
}

html:not([data-input='pointer']) .cycle:focus .cycle-arrow,
.cycle:hover .cycle-arrow {
  color: var(--ink);
}

html:not([data-input='pointer']) .tab:focus {
  color: var(--ink);
  border-bottom-color: rgba(42, 79, 181, 0.45);
}

.tab.active:focus {
  border-bottom-color: var(--tide);
}

/* Text fields always show where you're typing. */
.text-input:focus,
.text-area:focus {
  border-color: var(--tide);
  background: #fff;
}

.slider output {
  min-width: 3.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.bind-table {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.bind-row {
  display: grid;
  grid-template-columns: 1fr 10rem 10rem;
  gap: 0.5rem;
  align-items: center;
}

.bind-row.head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

.bind {
  padding: 0.35rem 0.5rem;
  background: var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: 5px;
  font-weight: 500;
  cursor: pointer;
}

.bind.unbound {
  color: var(--text-soft);
  border-style: dashed;
}

.bind.capturing {
  background: var(--tide);
  color: #fff;
  border-color: var(--tide);
  animation: pulse 0.9s ease-in-out infinite;
}

.row-actions {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.io-box {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.danger-zone {
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(168, 35, 26, 0.4);
}

/* ---------- credits ---------- */

.credits-panel {
  width: min(32rem, 92vw);
}

.credits {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0 0 1rem;
}

.credits dt {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.credits dd {
  margin: 0;
  align-self: center;
}

/* ---------- modal, toast, loading ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 12, 5, 0.55);
  animation: fade-in 0.15s ease-out;
}

.modal {
  max-width: min(30rem, 92vw);
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper-light);
  padding: 0.6rem 1.2rem;
  border-radius: var(--wobble);
  box-shadow: var(--shadow-hard);
  animation: fade-in 0.2s ease-out;
}

.loading-screen p,
.error-screen p {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.3rem;
}

.loading-screen {
  background: var(--paper);
}

.loading-blot {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--ink);
  border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
  animation: blot 1.4s ease-in-out infinite;
}

.error-screen {
  background: var(--paper);
}

.error-screen .panel {
  max-width: 34rem;
}

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  background: var(--paper);
  font-size: 1.3rem;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  50% { opacity: 0.7; }
}

@keyframes blot {
  0%, 100% { border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; transform: scale(1); }
  50% { border-radius: 58% 42% 55% 45% / 42% 58% 45% 55%; transform: scale(1.12); }
}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
}

@media (max-width: 900px) {
  .slots {
    grid-template-columns: minmax(14rem, 22rem);
  }
  .bind-row {
    grid-template-columns: 1fr 7rem 7rem;
  }
  .setting-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* ---------- departure (character select) ---------- */

.screen-subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin: -0.4rem 0 1.2rem;
  text-align: center;
}

.characters {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.character {
  --card-accent: var(--ink-soft);
  position: relative;
  width: 17rem;
  min-height: 25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 1.1rem 1.1rem;
  text-align: center;
  font: inherit;
  color: inherit;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%),
    var(--paper-light);
  border: 2px solid var(--edge);
  border-top: 8px solid var(--card-accent);
  border-radius: 4px 9px 5px 10px / 9px 4px 10px 5px;
  box-shadow: 0 10px 26px rgba(20, 12, 5, 0.3), 4px 4px 0 rgba(27, 22, 18, 0.85);
  cursor: pointer;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
  animation: card-in 0.25s ease-out backwards;
}

.character:nth-child(2) { animation-delay: 0.05s; }
.character:nth-child(3) { animation-delay: 0.1s; }

.character:hover,
html:not([data-input='pointer']) .character:focus {
  transform: translateY(-8px) rotate(-0.6deg);
}

.character.selected {
  box-shadow: 0 0 0 4px var(--card-accent), 0 16px 34px rgba(20, 12, 5, 0.4), 5px 5px 0 rgba(27, 22, 18, 0.85);
}

.character.locked {
  cursor: default;
  filter: grayscale(0.9);
  opacity: 0.75;
}

.character.locked:hover {
  transform: none;
}

.character .card-key {
  top: 0.5rem;
}

.portrait {
  position: relative;
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
}

.portrait-blot {
  position: absolute;
  inset: 0.6rem;
  background: var(--card-accent);
  opacity: 0.16;
  border-radius: 46% 54% 41% 59% / 55% 43% 57% 45%;
  transform: rotate(-8deg);
}

.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portrait.locked img {
  filter: brightness(0);
  opacity: 0.55;
}

.character-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.05;
}

.character-title {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--text-soft);
  margin-bottom: 0.3rem;
}

.character-stats {
  display: flex;
  gap: 1.1rem;
  font-weight: 700;
  font-size: 1.05rem;
}

.character-stats span {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.character-stats small {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  font-weight: 600;
}

.character-weapon {
  font-size: 0.85rem;
  margin: 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.character-perks {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.3;
  border-top: 1px dashed rgba(74, 58, 36, 0.4);
  padding-top: 0.5rem;
  width: 100%;
}

.character-locked {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-style: italic;
  color: var(--text-soft);
}

.character-locked strong {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wax);
}

.waiting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
  padding: 0.9rem 1.4rem;
  max-width: 52rem;
  width: 100%;
  border-left: 8px solid var(--wax);
}

.waiting h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
}

.waiting p {
  margin: 0.1rem 0 0;
}

.waiting-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.departure-best {
  margin: 1rem 0 0;
  font-style: italic;
}

.departure-screen .screen-footer {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn-sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.8;
  margin-top: 0.1rem;
}

/* ---------- the Scriptorium ---------- */

.hub-bar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

.hub-journal,
.hub-stations {
  pointer-events: auto;
  background: rgba(248, 239, 217, 0.94);
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: var(--shadow-hard);
}

.hub-journal {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 1rem;
}

.hub-journal strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
}

.hub-currency {
  font-weight: 700;
  font-size: 0.95rem;
}

.hub-currency.gilt { color: #8a6516; }
.hub-currency.vellum { color: #6a5a3a; }

.hub-stations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.3rem;
}

.hub-station {
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hub-station:hover {
  background: rgba(74, 58, 36, 0.12);
}

.hub-station.gate {
  font-weight: 700;
}

.hub-key {
  font-size: 0.7rem;
  border: 1px solid var(--text-soft);
  border-radius: 3px;
  padding: 0 0.3rem;
  color: var(--text-soft);
}

.hub-overlay {
  background: rgba(36, 24, 12, 0.5);
}

.tip.tip-top {
  bottom: auto;
  top: 1.2rem;
}

.gate-panel .waiting {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.gate-panel .waiting h3 {
  font-size: 1.3rem;
}

.gate-panel {
  width: min(40rem, 94vw);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.gate-panel .waiting {
  margin: 0.4rem 0 1rem;
}

.gate-character {
  --card-accent: var(--ink-soft);
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  width: 100%;
  border-top: 6px solid var(--card-accent);
  padding-top: 0.8rem;
}

.gate-character-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  flex: 1;
}

.gate-hint {
  margin: 0.6rem 0 0;
  font-style: italic;
  font-size: 0.9rem;
  text-align: center;
}

.station-panel {
  max-width: 32rem;
  text-align: center;
}

.station-desc {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  margin: 0 0 1rem;
}

@media (max-width: 900px) {
  .hub-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .gate-character {
    flex-direction: column;
    align-items: center;
  }
}

/* ---------- M2 cards, summary, victory, chapter banner ---------- */

.card.rarity-relic {
  border-top-color: var(--wax);
  background: linear-gradient(180deg, #f6e1d3, var(--paper-light));
  box-shadow: 0 0 0 3px #d98a6a, 0 12px 30px rgba(20, 12, 5, 0.45), 4px 4px 0 rgba(27, 22, 18, 0.85);
}

.card.rarity-evolve {
  border-top-color: var(--gold);
  background: linear-gradient(180deg, #f8eac0, var(--paper-light));
  box-shadow: 0 0 0 3px #f4d27a, 0 0 28px rgba(244, 210, 122, 0.7), 4px 4px 0 rgba(27, 22, 18, 0.85);
}

.card.rarity-evolve .card-kind,
.card.rarity-relic .card-kind {
  color: inherit;
}

.choice-title.kind-boss {
  color: #ffb39a;
}

.choice-title.kind-shrine {
  color: #b7d2ff;
}

.relic-dot {
  width: 0.8rem;
  height: 0.8rem;
  background: var(--wax);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.build-list li.evolved span:nth-child(2),
.damage-bars li.evolved .damage-name {
  color: #8a6516;
  font-weight: 700;
}

.over-records {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #8a6516;
}

.over-records .unlock {
  color: var(--wax);
}

.over-stats .vellum {
  color: #7a6a4a;
}

.victory-overlay {
  background: radial-gradient(circle at 50% 40%, rgba(255, 245, 210, 0.75), rgba(36, 24, 12, 0.6));
}

.victory-panel {
  max-width: 36rem;
  text-align: center;
}

.victory-panel .over-title {
  color: #8a6516;
  font-size: 2.3rem;
  line-height: 1.1;
}

.victory-hint {
  max-width: 26rem;
  font-size: 0.85rem;
  margin: -0.2rem 0 0.4rem;
}

.chapter-banner {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  padding: 0.8rem 3.5rem 1rem;
  background: rgba(248, 239, 217, 0.92);
  border-top: 2px solid var(--edge);
  border-bottom: 2px solid var(--edge);
  animation: banner 3.2s ease-in-out forwards;
}

.chapter-banner-head {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-soft);
}

.chapter-banner-name {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.1;
  color: var(--ink);
}

@keyframes banner {
  0% { opacity: 0; transform: translateX(-50%) perspective(600px) rotateY(-70deg); }
  14% { opacity: 1; transform: translateX(-50%) perspective(600px) rotateY(0); }
  82% { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

.reduced-motion .chapter-banner {
  animation: banner-fade 3.2s linear forwards;
}

@keyframes banner-fade {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 900px) {
  .waiting {
    flex-direction: column;
    align-items: flex-start;
  }
  .character {
    width: 15rem;
    min-height: 0;
  }
}