/* Self-hosted fonts (SIL Open Font License 1.1, see assets/fonts/OFL.txt). Generated once from Google Fonts. */
@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IMFellEnglish-italic-400-latin-8fc67857.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IMFellEnglish-normal-400-latin-248300df.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IM Fell English SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IMFellEnglishSC-normal-400-latin-f0f85c4e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-normal-latin-ext-34b9c504.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-normal-latin-3100e775.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-normal-latin-ext-34b9c504.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-normal-latin-3100e775.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Inter-normal-latin-ext-34b9c504.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Inter-normal-latin-3100e775.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Quill's Edge 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;
}

/* Nothing that gives away a web page: no drag-selecting menu text, no tap flashes, and where text
   can be selected (inputs, the recovery code) it is marked in gold leaf, not browser blue. */
#ui {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#ui input,
#ui textarea {
  user-select: text;
  -webkit-user-select: text;
}

::selection {
  background: rgba(201, 150, 46, 0.45);
  color: var(--ink);
}

img {
  -webkit-user-drag: none;
}

/* 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;
  margin-bottom: 2.2rem;
}

.legal-links {
  position: absolute;
  bottom: 1.15rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-soft);
  white-space: nowrap;
}

.legal-links a {
  color: var(--text-soft);
}

.legal-links a:hover {
  color: var(--wax);
}

.credits-panel .legal-links {
  position: static;
  transform: none;
  margin-top: 0.6rem;
}

.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);
}

/* "Edge" sits on a red ink stroke, as if underlined with the quill. */
.logo-edge {
  position: relative;
  display: inline-block;
}

.logo-edge::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.1em;
  bottom: 0.04em;
  height: 0.09em;
  background: var(--ember);
  border-radius: 40% 60% 70% 30% / 60% 40% 60% 40%;
  transform: rotate(-1.5deg);
  z-index: -1;
}

.logo-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
}

.logo-subtitle::before,
.logo-subtitle::after {
  content: '';
  display: inline-block;
  width: 2.2em;
  height: 1px;
  margin: 0 0.8em;
  vertical-align: middle;
  background: var(--edge);
}


.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;
}

/* Title screen corners: feedback and Discord bottom left, version and changelog bottom right. */
.title-corner {
  position: absolute;
  bottom: 0.9rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.title-corner.left {
  left: 1.1rem;
}

.title-corner.right {
  right: 1.1rem;
}

.btn.btn-small {
  font-size: 1rem;
  padding: 0.35rem 0.9rem;
  box-shadow: 2px 2px 0 rgba(43, 31, 18, 0.35);
}

.btn.btn-icon {
  display: inline-grid;
  place-items: center;
  padding: 0.35rem 0.6rem;
  color: #5865f2;
}

/* The version: shaped like the small buttons beside it, but plain text (nothing to press). */
.version-badge {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-soft);
  background: rgba(248, 239, 217, 0.7);
  border: 2px dashed var(--edge);
  border-radius: var(--wobble);
  user-select: none;
  cursor: default;
}

.menu-row {
  display: flex;
  gap: 0.5rem;
}

.menu-row .btn {
  flex: 1;
}

/* Popups (feedback, changelog, achievements) above any screen or menu. */
.popup-layer {
  background: rgba(36, 24, 12, 0.55);
}

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

.popup-panel .tabs {
  margin-bottom: 0.4rem;
}

.feedback-hint {
  margin: 0.2rem 0 0.6rem;
}

/* The feedback text: a ruled notebook sheet with a red margin line, written in ink. */
.text-area.feedback-text {
  --rule: 1.9rem;
  min-height: calc(var(--rule) * 6 + 0.6rem);
  padding: 0.3rem 0.9rem 0.3rem 3.1rem;
  font-family: var(--font-italic);
  font-size: 1.2rem;
  line-height: var(--rule);
  color: var(--ink);
  word-break: normal;
  resize: none;
  background-color: #fbf5e4;
  background-image:
    linear-gradient(90deg, transparent 2.3rem, rgba(168, 35, 26, 0.45) 2.3rem, rgba(168, 35, 26, 0.45) calc(2.3rem + 2px), transparent calc(2.3rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--rule) - 1px), rgba(42, 79, 181, 0.3) calc(var(--rule) - 1px), rgba(42, 79, 181, 0.3) var(--rule));
  background-position: 0 0.3rem;
  background-attachment: local;
  border: 2px solid var(--edge);
  border-radius: 6px 10px 7px 12px / 10px 6px 12px 7px;
  box-shadow: inset 2px 3px 0 rgba(74, 58, 36, 0.1), 3px 3px 0 rgba(43, 31, 18, 0.25);
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
}

.text-area.feedback-text::placeholder {
  font-family: var(--font-italic);
  color: rgba(106, 85, 52, 0.55);
}

.text-area.feedback-text:focus {
  background-color: #fffaf0;
  background-image:
    linear-gradient(90deg, transparent 2.3rem, rgba(168, 35, 26, 0.45) 2.3rem, rgba(168, 35, 26, 0.45) calc(2.3rem + 2px), transparent calc(2.3rem + 2px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--rule) - 1px), rgba(42, 79, 181, 0.3) calc(var(--rule) - 1px), rgba(42, 79, 181, 0.3) var(--rule));
  background-position: 0 0.3rem;
  background-attachment: local;
  border-color: var(--ink);
  box-shadow: inset 2px 3px 0 rgba(74, 58, 36, 0.1), 0 0 0 3px rgba(201, 150, 46, 0.45);
}

.feedback-meta span:last-child {
  flex: none;
  white-space: nowrap;
}

.feedback-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
}

.feedback-error {
  margin: 0.5rem 0 0;
  color: var(--danger, #a8231a);
}

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.changelog {
  overflow-y: auto;
  padding: 0.2rem 0.6rem 0.4rem 0.2rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  line-height: 1.45;
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
}

/* One card per release. */
.changelog-card {
  flex: none;
  background: #fffaf0;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: 3px 3px 0 rgba(43, 31, 18, 0.22);
  overflow: hidden;
}

.changelog-card header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.9rem;
  background: rgba(227, 212, 178, 0.55);
  border-bottom: 1.5px dashed var(--edge);
}

.changelog-card.latest {
  border-color: var(--gold);
  box-shadow: 3px 3px 0 rgba(201, 150, 46, 0.35);
}

.changelog-card.latest header {
  background: rgba(201, 150, 46, 0.18);
}

.changelog-version {
  flex: none;
  padding: 0.1rem 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff4e6;
  background: var(--wax);
  border-radius: 999px;
}

.changelog-card h3 {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.2;
}

.changelog-card time {
  flex: none;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.changelog-body {
  padding: 0.5rem 1rem 0.7rem;
  font-size: 0.95rem;
}

.changelog-body ul {
  margin: 0.3rem 0;
  padding-left: 1.2rem;
}

.changelog-body li {
  margin: 0.15rem 0;
}

.changelog-body li.sub {
  margin-left: 1.2rem;
  list-style: circle;
}

.changelog-body p {
  margin: 0.3rem 0;
}

/* ---------- 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 with a controller (html[data-input]
   is set by ui/modality.ts). Mouse and keyboard players only ever see hover. */
.btn:hover:not(:disabled),
html[data-input='pad'] .btn.nav-current: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[data-input='pad'] .btn-ghost.nav-current: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;
}

/* ---------- 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;
}

/* The stagger matches CARD_STAGGER in app/game.ts (one paper flip sound per card). */
.card:nth-child(1) { animation-delay: 0.12s; }
.card:nth-child(2) { animation-delay: 0.19s; }
.card:nth-child(3) { animation-delay: 0.26s; }
.card:nth-child(4) { animation-delay: 0.33s; }

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

.card:hover,
html[data-input='pad'] .card.nav-current {
  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;
}

/* The end-of-run summary is styled in juice.css. */

.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;
}

.text-input,
.text-area {
  width: 100%;
  background: #fffaf0;
  color: var(--ink);
  border: 2px solid var(--edge);
  border-radius: 4px 7px 4px 7px;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  outline: none;
  box-shadow: inset 1px 2px 0 rgba(74, 58, 36, 0.12);
}

.text-input::placeholder,
.text-area::placeholder {
  color: rgba(106, 85, 52, 0.6);
  font-style: italic;
}

.text-area {
  min-height: 5rem;
  resize: none;
  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[data-input='pad'] .slider input[type='range'].nav-current::-webkit-slider-thumb {
  transform: scale(1.3);
}

.slider input[type='range']:hover::-moz-range-thumb,
html[data-input='pad'] .slider input[type='range'].nav-current::-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[data-input='pad'] .toggle.nav-current,
html[data-input='pad'] .cycle.nav-current,
html[data-input='pad'] .bind.nav-current:not(.capturing) {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(27, 22, 18, 0.8);
  border-color: var(--ink);
}

.cycle:hover,
html[data-input='pad'] .cycle.nav-current {
  background: #fffaf0;
}

html[data-input='pad'] .cycle.nav-current .cycle-arrow,
.cycle:hover .cycle-arrow {
  color: var(--ink);
}

html[data-input='pad'] .tab.nav-current {
  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(--ink);
  background: #fff;
  box-shadow: inset 1px 2px 0 rgba(74, 58, 36, 0.12), 0 0 0 3px rgba(201, 150, 46, 0.45);
}

.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);
}

/* Achievements. */
.achievements-panel {
  width: min(46rem, 94vw);
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
}

.achievement-progress {
  height: 8px;
  margin: 0.2rem 0 0.9rem;
  border-radius: 4px;
  background: var(--paper-dark);
  border: 1px solid var(--edge);
  overflow: hidden;
}

.achievement-progress span {
  display: block;
  height: 100%;
  background: var(--gold);
}

.achievement-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0 0.3rem 0 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.5rem;
}

.achievement {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  border: 1.5px dashed var(--edge);
  border-radius: var(--wobble);
  opacity: 0.72;
}

.achievement.earned {
  opacity: 1;
  border-style: solid;
  background: rgba(255, 250, 240, 0.7);
}

.achievement-seal {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid var(--edge);
  color: var(--text-soft);
  font-family: var(--font-display);
}

.achievement.earned .achievement-seal {
  background: var(--wax);
  border-color: #6b1f1a;
  color: #fff4e6;
}

.achievement-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.achievement-text strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
}

.achievement-text .soft {
  font-size: 0.85rem;
}

.achievement-date {
  flex: none;
  font-size: 0.8rem;
}

.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 messages may carry line breaks (the cloud conflict lists both versions). */
.modal p {
  white-space: pre-line;
}

/* Settings → Data: cloud save and device link. */
.cloud-status {
  margin: 0.25rem 0 0.75rem;
}

.link-code-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.link-code {
  font-family: 'IM Fell English SC', serif;
  font-size: 2.2rem;
  letter-spacing: 0.3em;
  padding: 0.2rem 0.8rem;
  border: 2px dashed var(--edge);
  border-radius: 6px;
  background: #fffaf0;
}

.code-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.code-form .link-code-input {
  width: 12rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

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

/* While the hall's station bar is shown, toasts sit above it. */
body:has(.hub-bar) .toast {
  bottom: 5.6rem;
}

/* Over an open station window, toasts go to the top so they never cover its buttons. */
body:has(.hub-bar.over-station) .toast {
  top: 0.7rem;
  bottom: auto;
}

.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) {
  .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[data-input='pad'] .character.nav-current {
  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: 1.1rem;
  align-items: center;
  padding: 0.45rem 1rem;
  white-space: nowrap;
}

.hub-who {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

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

.hub-who small {
  font-size: 0.75rem;
  color: var(--text-soft);
}

/* Currencies with drawn icons: a gold coin, a vellum leaf, a red wax stamp. */
.hub-currency {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.hub-currency::before {
  content: '';
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.hub-currency.gilt { color: #8a6516; }
.hub-currency.gilt::before { background: #d6a531; }
.hub-currency.vellum { color: #6a5a3a; }
.hub-currency.vellum::before { background: #f6efe0; border-radius: 2px 6px 2px 6px; width: 0.75rem; }
.hub-currency.stamps { color: var(--wax); }
.hub-currency.stamps::before { background: var(--wax); border-color: #7a1810; }

.hub-stations {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 0.4rem;
}

/* Station buttons: small paper tabs with a wax-seal number. */
.hub-station {
  font-family: var(--font-display);
  font-size: 0.92rem;
  white-space: nowrap;
  background: var(--paper-light);
  border: 1.5px solid rgba(74, 58, 36, 0.55);
  border-radius: 5px 8px 5px 8px;
  padding: 0.3rem 0.65rem 0.3rem 0.35rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.35);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

.hub-station:hover {
  transform: translateY(-2px);
  box-shadow: 2px 4px 0 rgba(27, 22, 18, 0.35);
}

.hub-station.gate {
  background: var(--ink);
  color: var(--paper-light);
  border-color: var(--ink);
}

.hub-station.locked {
  opacity: 0.5;
  border-style: dashed;
  box-shadow: none;
}

/* The station that is open right now (the bar stays visible over station windows). */
.hub-station.active {
  background: #f6dfa0;
  border-color: var(--gold);
  border-width: 2px;
  transform: translateY(-3px);
}

.hub-key {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--wax);
  color: #fff3e6;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
}

.hub-station.locked .hub-key {
  background: 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: Daily Map and Weekly Expedition. */
.gate-panel .tabs {
  margin-bottom: 0.8rem;
}

.mode-info {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border: 2px dashed var(--edge);
  border-radius: var(--wobble);
  background: rgba(255, 250, 240, 0.6);
}

.mode-info h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 0.3rem;
}

.mode-info p {
  margin: 0.3rem 0;
}

.mode-info .attempt.first {
  color: #8a6516;
  font-weight: 600;
}

.mode-info .attempt.practice {
  color: var(--text-soft);
  font-style: italic;
}

.modifiers {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.modifier {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding-left: 0.6rem;
  border-left: 4px solid var(--wax);
}

.modifier.boon {
  border-left-color: var(--gold);
}

.modifier strong {
  font-family: var(--font-display);
  min-width: 9rem;
}

/* Gate: Blank Pressure. */
/* ---------- Stages at the Gate, and the stage picker on the boards ---------- */

.stage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.6rem;
  width: 100%;
  margin-bottom: 1rem;
}

.stage-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
  text-align: left;
  padding: 0.55rem 0.75rem 0.6rem;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  background: rgba(255, 250, 240, 0.6);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.stage-card:hover:not(:disabled) {
  background: rgba(255, 250, 240, 0.95);
}

.stage-card.selected {
  border-color: var(--tide);
  box-shadow: 0 0 0 2px var(--tide) inset;
  background: #fffaf0;
}

.stage-card.locked {
  cursor: default;
  opacity: 0.55;
  border-style: dashed;
}


.stage-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.15;
}

.stage-boss {
  font-size: 0.85rem;
}

.stage-records {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  font-size: 0.85rem;
}

.stage-clear {
  color: #3d6b2f;
  font-weight: 600;
}

.stage-pressure {
  color: #3b2f45;
  font-weight: 600;
}

.board-stages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.2rem 0 0.6rem;
}

.board-stage {
  padding: 0.25rem 0.7rem;
  border: 2px solid var(--edge);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.6);
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-soft);
  cursor: pointer;
}

.board-stage.active {
  color: var(--ink);
  border-color: var(--tide);
  background: #fffaf0;
}

.pressure-picker {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.6rem 1rem 0.7rem;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  background: rgba(255, 250, 240, 0.6);
}

.pressure-picker.on {
  border-color: #3b2f45;
  background: linear-gradient(180deg, rgba(232, 224, 240, 0.7), rgba(255, 250, 240, 0.6));
}

.pressure-picker p {
  margin: 0.35rem 0 0;
}

/* Journal frames (Blank Pressure rewards) on the hub bar. */
.framed {
  border: 3px solid var(--frame-a);
  border-radius: var(--wobble);
  box-shadow: inset 0 0 0 2px var(--frame-b), var(--shadow-hard);
}

.swatch.kind-frame {
  border-radius: 8px;
}

/* Leaderboards. */
.boards-panel {
  width: min(46rem, 94vw);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.board-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0.4rem 0 0.6rem;
}

.board-name-form {
  flex-wrap: wrap;
  width: 100%;
}

.board-name-form .text-input {
  width: 16rem;
}

.name-problem {
  color: var(--wax);
  width: 100%;
}

.board-empty {
  text-align: center;
  margin: 1.5rem 0;
}

.board-list {
  list-style: none;
  margin: 0.4rem 0 1rem;
  padding: 0;
  width: 100%;
}

.board-row {
  display: grid;
  grid-template-columns: 2.6rem 1fr 7rem 13rem 1.8rem;
  gap: 0.6rem;
  align-items: center;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px dashed rgba(74, 58, 36, 0.35);
}

.board-row:nth-child(-n + 3) .board-rank {
  color: #8a6516;
}

.board-row.you {
  background: rgba(201, 150, 46, 0.22);
  border-radius: 4px;
  font-weight: 600;
}

.board-rank {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-align: right;
}

.board-who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-result {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.board-report {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-soft);
  font-size: 1rem;
}

.board-report:hover,
html[data-input='pad'] .board-report.nav-current {
  color: var(--wax);
}

.board-gap {
  text-align: center;
  color: var(--text-soft);
}

.over-online {
  text-align: center;
  margin: 0 0 0.8rem;
  font-size: 1.1rem;
}

.over-online.ranked {
  color: #8a6516;
}

.over-online .stamps {
  color: var(--wax);
}

.over-online p {
  margin: 0 0 0.3rem;
}

/* Account name: shown with a Change button, or as the form. */
.name-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.name-form {
  flex-wrap: wrap;
  justify-content: center;
}

.name-form .text-input {
  width: 15rem;
}

/* Settings → Accessibility: the five inks in the chosen colour-blind mode. */
.ink-swatches {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  margin: -0.2rem 0 0.6rem;
}

.ink-swatch {
  min-width: 4.6rem;
  padding: 0.25rem 0.5rem;
  border: 1.5px solid var(--edge);
  border-radius: 4px 7px 4px 7px;
  color: #fff8ec;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* The dialog in which a new player chooses a username. */
.name-dialog {
  width: min(40rem, 94vw);
  text-align: center;
}

.name-dialog .name-form {
  margin: 0.8rem 0 0.4rem;
}

/* A text action inside a sentence: ink with a red quill stroke underneath, never a browser link. */
.link-button {
  border: none;
  background: none;
  padding: 0 0.1em;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--wax);
  border-radius: 0 0 3px 2px;
  cursor: pointer;
}

.link-button:hover,
html[data-input='pad'] .link-button.nav-current {
  outline: none;
  color: var(--wax);
  background: rgba(168, 35, 26, 0.08);
}

.account-name .name-field,
.account-name .name-form {
  justify-content: flex-start;
}

.board-name .name-field,
.board-name .name-form {
  justify-content: flex-start;
}


.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;
  }
}

.modal-title {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
}

/* ---------- Character sheet popover in the hall ---------- */

.character-popover {
  --card-accent: var(--ink-soft);
  position: fixed;
  transform: translate(-50%, -100%);
  width: 23.5rem;
  max-width: calc(100vw - 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem 1rem 0.9rem;
  background: rgba(248, 239, 217, 0.97);
  border: 2px solid var(--edge);
  border-top: 7px 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);
  pointer-events: none;
  animation: popover-in 0.15s ease-out;
}

.character-popover::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 18px;
  height: 18px;
  background: rgba(248, 239, 217, 0.97);
  border-right: 2px solid var(--edge);
  border-bottom: 2px solid var(--edge);
  transform: translateX(-50%) rotate(45deg);
}

.character-popover.locked .popover-head > div,
.character-popover.locked .character-weapon,
.character-popover.locked .character-perks {
  opacity: 0.7;
}

.popover-head {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.popover-head > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.character-popover .portrait {
  width: 5rem;
  height: 5rem;
}

.character-popover .character-name {
  font-size: 1.45rem;
}

.character-popover .character-perks {
  font-size: 0.83rem;
}

.popover-foot {
  margin-top: 0.2rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}

.character-popover.locked .popover-foot {
  color: var(--wax);
}

@keyframes popover-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% + 8px)); }
}

/* ---------- Scriptorium tutorials ---------- */

.tutorial-panel {
  max-width: 34rem;
  text-align: center;
  animation: card-in 0.25s ease-out;
}

.tutorial-panel .screen-title {
  margin: 0.2rem 0 0.4rem;
}

.tutorial-text {
  font-size: 1.08rem;
  line-height: 1.5;
  margin: 0 0 0.8rem;
}

.tutorial-icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 46% 54% 41% 59% / 55% 43% 57% 45%;
  background: var(--wax);
  color: #fff7e6;
  font-size: 2.2rem;
  box-shadow: var(--shadow-hard);
}

.tutorial-panel .portrait {
  width: 6rem;
  height: 6rem;
}

.tutorial-dots {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.tutorial-dots span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: 1.5px solid var(--edge);
}

.tutorial-dots span.on {
  background: var(--edge);
}

/* ---------- Scriptorium stations ---------- */

/* Every station window has the same size; its body scrolls. Room is left below for the station bar. */
.station-shell {
  width: min(66rem, 96vw);
  height: min(52rem, calc(100vh - 6.4rem));
  margin-bottom: 4.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.6rem;
}

.station-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.station-head .screen-title {
  margin: 0;
}

.wallet {
  display: flex;
  gap: 1rem;
  font-weight: 700;
}

.wallet .gilt, .node-cost.gilt { color: #8a6516; }
.wallet .vellum, .node-cost.vellum { color: #6b4a8a; }
.wallet .stamps { color: var(--wax); }

.station-body {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding-right: 0.3rem;
}

.station-shell .screen-footer {
  display: flex;
  justify-content: center;
}

.hint {
  font-size: 0.85rem;
  font-style: italic;
}

.bar {
  display: block;
  height: 8px;
  background: var(--paper-dark);
  border: 1px solid var(--edge);
  border-radius: 999px;
  overflow: hidden;
}

.bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c9962e, #e6c36a);
}

.bar.small {
  width: 7rem;
  height: 6px;
}

/* Compass Rose */

.compass-layout {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
}

.compass-board {
  position: relative;
  flex-shrink: 0;
  background: radial-gradient(circle, #f6ead0 0, #efe2c4 60%, rgba(239, 226, 196, 0) 72%);
  border-radius: 50%;
}

.compass-board svg {
  position: absolute;
  inset: 0;
}

/* A link between two nodes: faint until its inner end is bought, then open, then bought. */
.compass-board .link {
  fill: none;
  stroke: #d3c39c;
  stroke-width: 2;
  stroke-linecap: round;
}

.compass-board .link.open {
  stroke: #a08a5c;
  stroke-width: 2.5;
}

.compass-board .link.lit {
  stroke: #8a6516;
  stroke-width: 3.5;
}

/* The rose's ring: the keystones' links, Vellum's colour once bought. */
.compass-board .link.ring.lit {
  stroke: #6b4a8a;
}

.compass-board .hub {
  fill: #e6d5ae;
  stroke: #a08a5c;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.dir-label {
  font-family: var(--font-display);
  font-size: 18px;
}

.compass-node {
  --node: var(--ink);
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2.5px solid var(--node);
  background: var(--paper-light);
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s;
}

/* A side node is smaller than the spine node it hangs on. */
.compass-node.side {
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-width: 2px;
}

.compass-node.keystone {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 4px;
  transform: rotate(45deg);
}

.compass-node.st-owned { background: var(--node); }
.compass-node.st-ok { box-shadow: 0 0 0 3px rgba(244, 210, 122, 0.8); }
/* (Not see-through: a link must never show inside a node.) */
.compass-node.st-locked { border-color: color-mix(in srgb, var(--node) 55%, var(--paper-light)); }
.compass-node.st-poor { opacity: 0.75; }

.compass-node:hover,
.compass-node.selected,
html[data-input='pad'] .compass-node.nav-current {
  transform: scale(1.35);
  outline: none;
}

.compass-node.keystone:hover,
.compass-node.keystone.selected,
html[data-input='pad'] .compass-node.keystone.nav-current {
  transform: rotate(45deg) scale(1.25);
}

.compass-side {
  flex: 1;
  min-width: 16rem;
}

/* Fixed height: hovering nodes with longer texts must not make the panel jump. */
.node-card {
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  padding: 0.8rem 1rem;
  background: #fbf4e2;
  margin-bottom: 0.8rem;
  height: 12.5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.node-card h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
}

.node-card p {
  margin: 0.25rem 0;
}

.node-cost {
  font-weight: 700;
}

/* Armory */

.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.8rem;
}

.family-card,
.mastery-card {
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  padding: 0.7rem 0.9rem;
  background: #fbf4e2;
}

.family-card h3,
.mastery-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}

.family-card h3 .soft,
.mastery-card h3 .soft {
  font-family: var(--font-ui);
  font-size: 0.8rem;
}

.family-card ul {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}

.weapon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.2rem;
  font-size: 0.95rem;
}

.weapon-row.locked > span:first-child {
  opacity: 0.6;
}

.weapon-row .btn {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}

.family-hint {
  grid-column: 1 / -1;
}

.character-mastery {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.mastery-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.mastery-card .portrait {
  width: 6rem;
  height: 6rem;
}

.mastery-text {
  flex: 1;
}

.reward-track {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.reward-track li.done {
  color: var(--ink);
  font-weight: 600;
}

.reward-track .lv {
  display: inline-block;
  min-width: 1.6rem;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  margin-right: 0.3rem;
  font-size: 0.75rem;
}

/* Codex */

.codex-progress {
  margin: 0 0 0.4rem;
}

.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.6rem;
}

.codex-entry {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1.5px solid rgba(74, 58, 36, 0.5);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
  background: #fbf4e2;
}

.codex-entry strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
}

.codex-entry.unknown {
  opacity: 0.55;
  background: transparent;
  border-style: dashed;
}

.codex-entry .stars {
  color: #c9962e;
  letter-spacing: 0.1em;
}

.codex-entry.tier-3 {
  border-color: #c9962e;
  box-shadow: inset 0 0 0 2px #f4d27a;
}

.codex-entry .lore {
  font-family: var(--font-italic);
  font-style: italic;
}

/* Wardrobe */

.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.cosmetic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  padding: 0.8rem;
  background: #fbf4e2;
}

.cosmetic-card .portrait {
  width: 6rem;
  height: 6rem;
}

.cosmetic-card.worn {
  box-shadow: 0 0 0 3px #f4d27a;
}

.cosmetic-card:not(.owned) .portrait img,
.cosmetic-card:not(.owned) .swatch {
  opacity: 0.6;
}

.cosmetic-card .btn {
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
}

.cosmetic-card .source {
  font-size: 0.78rem;
}

.swatch {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 2px solid var(--edge);
  display: flex;
  overflow: hidden;
  background: var(--paper-dark);
}

.swatch > span {
  flex: 1;
}

.swatch.kind-trail > span:first-child {
  flex: 0.35;
}

.swatch.icon-banner { background: linear-gradient(180deg, #23506b 0 70%, var(--paper-dark) 70%); border-radius: 6px; }
.swatch.icon-globe { background: radial-gradient(circle at 40% 40%, #d9c79f 0 18%, #8aa0d0 20%); }
.swatch.icon-plants { background: radial-gradient(circle at 50% 30%, #2e8a5a 0 35%, transparent 37%), linear-gradient(0deg, #b5532e 0 35%, var(--paper-dark) 35%); }
.swatch.icon-vellum { background: #f8f1df; border-radius: 6px; }
.swatch.icon-nautical { background: repeating-linear-gradient(0deg, #dfe7e2 0 10px, #c9d6cf 10px 11px); border-radius: 6px; }

/* Gate loadout and summary rewards */

.loadout {
  width: 100%;
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.loadout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.over-rewards {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .compass-board {
    transform: scale(0.7);
    transform-origin: top left;
    margin-bottom: -180px;
    margin-right: -180px;
  }
}

/* ---------- 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;
}

.gild-toggle {
  margin-top: 0.4rem;
  padding: 0.25rem 0.8rem;
  font-size: 0.9rem;
}

.gild-toggle.on {
  color: #8a6516;
  border-color: var(--gold);
}

.gild-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

/* After a run: how many Compass Rose upgrades the Gilt now buys. */
.over-afford {
  margin: 0.4rem 0 0.8rem;
  padding: 0.4rem 0.8rem;
  text-align: center;
  font-weight: 600;
  color: #8a6516;
  background: rgba(201, 150, 46, 0.15);
  border: 1.5px solid var(--gold);
  border-radius: var(--wobble);
}

.over-hint {
  margin: 0.4rem 0 0;
  text-align: center;
}

/* Compass Rose capstones (side panel). */
.capstones {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.6rem 0;
}

.capstone {
  --node: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border-left: 5px solid var(--node);
  border-radius: var(--wobble);
  background: rgba(255, 250, 240, 0.6);
}

.capstone-text {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}

.capstone.st-max {
  opacity: 0.75;
}

.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;
}

@media (max-width: 900px) {
  .waiting {
    flex-direction: column;
    align-items: flex-start;
  }
  .character {
    width: 15rem;
    min-height: 0;
  }
}
/* Motion and feedback pass: how menus move and answer. Paper slides and unfolds, ink washes
   across buttons, cards lift, shine and get stamped. Keyframes only set their starting state
   ("from") so elements keep their own transforms afterwards. .reduced-motion (style.css) turns
   all of it off. */

/* ---------- screens and panels ---------- */

.screen:not(.overlay) > .panel,
.screen:not(.overlay) > .title-block,
.popup-panel,
.overlay-panel,
.modal {
  animation: panel-in 0.34s cubic-bezier(0.2, 0.9, 0.25, 1.05) backwards;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97) rotate(-0.6deg); }
}

.screen.overlay {
  animation: overlay-in 0.22s ease-out backwards;
}

@keyframes overlay-in {
  from { opacity: 0; backdrop-filter: blur(0); }
}

/* ---------- buttons: an ink wash fills from the left, a little tilt, a squash when pressed ---------- */

.btn {
  transition: transform 0.12s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.12s ease-out, background-size 0.28s ease-out, color 0.15s;
}

.btn-default,
.btn-ghost {
  background-image: linear-gradient(100deg, rgba(42, 79, 181, 0.12) 0%, rgba(42, 79, 181, 0.12) 92%, rgba(42, 79, 181, 0) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
}

.btn-default:hover:not(:disabled),
.btn-ghost:hover:not(:disabled),
html[data-input='pad'] .btn-default.nav-current:not(:disabled),
html[data-input='pad'] .btn-ghost.nav-current:not(:disabled) {
  background-size: 108% 100%;
}

.btn:hover:not(:disabled),
html[data-input='pad'] .btn.nav-current:not(:disabled) {
  transform: translate(-2px, -2px) rotate(-0.5deg);
}

.btn:active:not(:disabled) {
  transform: translate(1px, 1px) scale(0.97);
  transition-duration: 0.05s;
}

/* Primary buttons: a gold nib line draws under the label. */
.btn-primary {
  background-image: linear-gradient(90deg, var(--gold), #f4d27a);
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 0.35rem);
  background-size: 0% 2px;
}

.btn-primary:hover:not(:disabled),
html[data-input='pad'] .btn-primary.nav-current:not(:disabled) {
  background-size: 62% 2px;
}

/* Tabs and toggles. */
.tab {
  transition: transform 0.12s ease-out, background 0.15s, color 0.15s;
}

.tab:hover {
  transform: translateY(-2px);
}

.tab.active {
  animation: tab-in 0.25s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}

@keyframes tab-in {
  from { transform: translateY(3px) scale(0.96); }
}

.toggle {
  transition: background 0.2s;
}

.toggle-knob {
  transition: background 0.15s, transform 0.2s cubic-bezier(0.3, 1.8, 0.5, 1);
}

.toggle:active .toggle-knob {
  transform: scale(0.8);
}

/* ---------- title screen: the logo is inked in, its underline drawn, the menu laid down ---------- */

.title-screen .logo {
  animation: ink-in 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) backwards;
}

@keyframes ink-in {
  from { clip-path: inset(0 100% 0 0); filter: blur(3px); opacity: 0.3; }
  60% { filter: blur(0); opacity: 1; }
}

.title-screen .logo-edge::after {
  transform-origin: left center;
  animation: stroke-draw 0.5s 0.95s cubic-bezier(0.5, 0, 0.2, 1) backwards;
}

@keyframes stroke-draw {
  from { transform: rotate(-1.5deg) scaleX(0); }
}

.title-screen .logo-subtitle {
  animation: rise-in 0.6s 0.7s ease-out backwards;
}

.title-screen .menu > * {
  animation: rise-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
}

.title-screen .menu > :nth-child(1) { animation-delay: 1.05s; }
.title-screen .menu > :nth-child(2) { animation-delay: 1.12s; }
.title-screen .menu > :nth-child(3) { animation-delay: 1.19s; }
.title-screen .menu > :nth-child(4) { animation-delay: 1.26s; }
.title-screen .menu > :nth-child(5) { animation-delay: 1.33s; }
.title-screen .menu > :nth-child(6) { animation-delay: 1.4s; }

.title-screen .title-corner,
.title-screen .legal-links {
  animation: fade-in 0.6s 1.5s ease-out backwards;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px) rotate(0.8deg); }
}

/* The title page breathes: the logo's ink settles slowly. */
.title-screen .logo {
  text-shadow: 0 2px 0 rgba(27, 22, 18, 0.15), 0 0 30px rgba(248, 239, 217, 0.9), 0 0 0 rgba(27, 22, 18, 0);
}

/* The test site says so. */
.version-badge.is-test {
  border-color: var(--wax);
  color: var(--wax);
  font-weight: 700;
}

/* ---------- level-up cards ---------- */

.choice-title {
  animation: title-stamp 0.45s cubic-bezier(0.25, 1.6, 0.45, 1) backwards;
  position: relative;
}

.choice-title::before {
  content: '';
  position: absolute;
  inset: -0.6rem -2.2rem;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(27, 22, 18, 0.55), rgba(27, 22, 18, 0) 70%);
  border-radius: 50%;
  animation: blot-in 0.6s ease-out backwards;
}

.choice-title.chest::before {
  background: radial-gradient(ellipse at center, rgba(201, 150, 46, 0.45), rgba(201, 150, 46, 0) 70%);
}

@keyframes title-stamp {
  from { opacity: 0; transform: scale(1.6) rotate(-3deg); letter-spacing: 0.2em; }
}

@keyframes blot-in {
  from { opacity: 0; transform: scale(0.3); }
}

.card {
  overflow: visible;
  padding-top: 1.3rem;
  transition: transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.18s ease-out;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(60px) rotate(4deg) scale(0.9); }
  60% { opacity: 1; }
}

.card:hover,
html[data-input='pad'] .card.nav-current {
  transform: translateY(-12px) rotate(-1deg) scale(1.02);
}

/* A sheen sweeps across the card while it is lifted. */
.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

.card-shine::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: skewX(-12deg) translateX(0);
  opacity: 0;
}

.card:hover .card-shine::before,
html[data-input='pad'] .card.nav-current .card-shine::before {
  animation: shine 0.75s ease-out;
}

@keyframes shine {
  from { opacity: 1; transform: skewX(-12deg) translateX(0); }
  to { opacity: 1; transform: skewX(-12deg) translateX(480%); }
}

/* Rare cards glow; legendary ones shimmer gold. */
.card.rarity-epic {
  box-shadow: 0 0 18px rgba(122, 63, 181, 0.45), 0 12px 30px rgba(20, 12, 5, 0.45), 4px 4px 0 rgba(27, 22, 18, 0.85);
}

.card.rarity-legendary {
  animation: card-in 0.25s ease-out backwards, legendary 2.4s 0.6s ease-in-out infinite;
}

@keyframes legendary {
  0%, 100% { box-shadow: 0 0 0 3px #f4d27a, 0 0 14px rgba(244, 210, 122, 0.4), 0 12px 30px rgba(20, 12, 5, 0.45), 4px 4px 0 rgba(27, 22, 18, 0.85); }
  50% { box-shadow: 0 0 0 3px #ffe7a6, 0 0 30px rgba(244, 210, 122, 0.85), 0 12px 30px rgba(20, 12, 5, 0.45), 4px 4px 0 rgba(27, 22, 18, 0.85); }
}

.card.rarity-evolve {
  border-top-color: #c9962e;
  background:
    radial-gradient(circle at 80% 0%, rgba(244, 210, 122, 0.55), rgba(244, 210, 122, 0) 55%),
    var(--paper-light);
}

/* The illustration sits on an ink blot in the top corner, breaking out of the card. */
.card .card-art {
  position: absolute;
  top: -1.9rem;
  right: 0.5rem;
  width: 4.6rem;
  height: 4.6rem;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.card-art .art-badge-blot {
  position: absolute;
  inset: 0.45rem;
  background: color-mix(in srgb, var(--card-accent) 45%, var(--paper-light));
  border: 2px solid var(--edge);
  border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
  box-shadow: 2px 2px 0 rgba(27, 22, 18, 0.7);
}

.card.rarity-glyph .card-art .art-badge-blot { background: #3b2c16; }
.card.rarity-relic .card-art .art-badge-blot,
.card.rarity-legendary .card-art .art-badge-blot { background: #c9962e; }
.card.rarity-epic .card-art .art-badge-blot { background: #7a3fb5; }
.card.rarity-rare .card-art .art-badge-blot { background: #2a4fb5; }
.card.rarity-common .card-art .art-badge-blot { background: #e3d4b2; }

.card-art img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(1px 2px 0 rgba(27, 22, 18, 0.35));
}

.card:hover .card-art,
html[data-input='pad'] .card.nav-current .card-art {
  transform: rotate(-8deg) scale(1.12);
}

.card-kind,
.card-title {
  padding-right: 3.6rem;
}


/* Picking: the chosen card is stamped and lifts away; the others fall back to the table. */
.card.card-picked {
  animation: card-picked 0.26s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
  z-index: 2;
}

.card.card-picked::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(244, 210, 122, 0.6), rgba(244, 210, 122, 0) 70%);
  animation: fade-in 0.1s ease-out;
}

@keyframes card-picked {
  0% { transform: translateY(-12px) scale(1.02); }
  35% { transform: translateY(-4px) scale(0.96) rotate(1deg); }
  100% { transform: translateY(-40px) scale(1.08) rotate(-2deg); opacity: 0.2; }
}

.card.card-dropped {
  animation: card-dropped 0.24s ease-in forwards;
}

@keyframes card-dropped {
  to { transform: translateY(40px) rotate(3deg); opacity: 0; }
}

/* ---------- illustrations outside the cards (Armory families) ---------- */

.art-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
}

.art-badge img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.family-card h3 {
  justify-content: flex-start;
  align-items: center;
}

.family-card h3 .soft {
  margin-left: auto;
}

.family-art {
  width: 2.8rem;
  height: 2.8rem;
  margin: -0.4rem 0 -0.4rem -0.3rem;
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.family-art .art-badge-blot {
  position: absolute;
  inset: 0.35rem;
  background: var(--paper-dark);
  border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%;
}

.family-card:hover .family-art {
  transform: rotate(-8deg) scale(1.1);
}

/* ---------- toasts, tips, banners ---------- */

.toast {
  animation: toast-in 0.35s cubic-bezier(0.25, 1.5, 0.45, 1) backwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 18px) scale(0.9) rotate(-1deg); }
}

.tip {
  animation: tip-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
}

@keyframes tip-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
}

/* ---------- loading: the blot drips ---------- */

.loading-blot {
  box-shadow: 0 0 0 0 rgba(27, 22, 18, 0.3);
  animation: blot 1.4s ease-in-out infinite, ripple 1.4s ease-out infinite;
}

@keyframes ripple {
  to { box-shadow: 0 0 0 1.4rem rgba(27, 22, 18, 0); }
}

/* ---------- level-up: your build and stats beside the cards ---------- */

.choice-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.6rem;
  max-width: 100%;
}

.choice-side.panel {
  width: 15rem;
  flex: none;
  margin-top: 5.2rem;
  padding: 0.9rem 1rem 1rem;
  background: rgba(248, 239, 217, 0.95);
  font-size: 0.9rem;
  animation: side-in 0.35s 0.1s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

.choice-layout > .choice-side:last-child {
  animation-name: side-in-right;
}

@keyframes side-in {
  from { opacity: 0; transform: translateX(-24px); }
}

@keyframes side-in-right {
  from { opacity: 0; transform: translateX(24px); }
}

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

.choice-side h3:not(:first-child) {
  margin-top: 0.9rem;
}

.side-weapons,
.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.side-weapon {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.5rem 0.15rem 0.1rem;
  border-left: 4px solid var(--card-accent);
  border-radius: 4px 9px 5px 10px / 9px 4px 10px 5px;
  cursor: help;
  transition: background 0.15s, transform 0.15s;
}

.side-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  cursor: help;
}

.side-weapon:hover,
.side-list li:hover,
html[data-input='pad'] .side-weapon.nav-current,
html[data-input='pad'] .side-list li.nav-current {
  background: rgba(42, 79, 181, 0.1);
  transform: translateX(3px);
}

.side-art {
  width: 2.4rem;
  height: 2.4rem;
}

.side-name {
  line-height: 1.2;
}

.side-weapon.evolved .side-name {
  color: #8a6516;
  font-weight: 700;
}

.side-level {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

.side-stats {
  font-size: 0.85rem;
  gap: 0.2rem 0.8rem;
}

.choice-layout > .choice-wrap {
  flex: 0 1 auto;
  min-width: 0;
}

/* Mid-size windows: slimmer panels and cards so everything still fits in one row. */
@media (max-width: 1420px) {
  .choice-side.panel {
    width: 12.2rem;
    font-size: 0.82rem;
    padding: 0.75rem 0.8rem 0.85rem;
  }

  .choice-layout {
    gap: 1.1rem;
  }

  .card {
    width: 14rem;
  }

  .side-art {
    width: 2rem;
    height: 2rem;
  }

  .side-weapon {
    grid-template-columns: 2rem 1fr auto;
  }
}

/* Four cards in a mid-size window: the panels move underneath. */
@media (max-width: 1420px) {
  .choice-layout:has(.card:nth-child(4)) {
    flex-wrap: wrap;
  }

  .choice-layout:has(.card:nth-child(4)) > .choice-wrap {
    order: -1;
    flex-basis: 100%;
  }

  .choice-layout:has(.card:nth-child(4)) > .choice-side.panel {
    margin-top: 0;
  }
}

/* Narrow windows: the cards first, build and stats side by side underneath. */
@media (max-width: 1150px) {
  .choice-layout {
    flex-wrap: wrap;
  }

  .choice-layout > .choice-wrap {
    order: -1;
    flex-basis: 100%;
  }

  .choice-side.panel {
    margin-top: 0;
  }
}

/* ---------- card keys: above each card; a controller shows A on the card it is on ---------- */

.cards {
  margin-top: 1.4rem;
}

.card .card-key {
  top: -2.1rem;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: 1.7rem;
  padding: 0.1rem 0.45rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: 5px;
  box-shadow: 0 3px 0 var(--edge);
  transition: transform 0.15s;
}

.card:hover .card-key,
html[data-input='pad'] .card.nav-current .card-key {
  transform: translateX(-50%) translateY(-3px);
}

.card .card-key.card-pad {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.card.nav-current .card-key.card-pad {
  opacity: 1;
}

.pad-glyph {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: #3f8f3a;
  border: 2px solid #1d4a1a;
  box-shadow: 0 2px 0 #1d4a1a;
  vertical-align: middle;
}

/* ---------- tags and keywords: coloured, explained on hover ---------- */

.card-tag {
  cursor: help;
  transition: background 0.15s, transform 0.15s;
}

.card-tag:hover {
  background: rgba(74, 58, 36, 0.12);
  transform: translateY(-1px);
}

.card-tag.ink-tag {
  color: var(--kw);
  border-color: var(--kw);
  background: color-mix(in srgb, var(--kw) 12%, transparent);
  font-weight: 700;
}

.card-tag.ink-tag:hover {
  background: color-mix(in srgb, var(--kw) 24%, transparent);
}

.keyword {
  color: var(--kw);
  font-weight: 700;
  border-bottom: 1px dotted color-mix(in srgb, var(--kw) 70%, transparent);
  cursor: help;
}

/* ---------- the tooltip ---------- */

.tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 21rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  background: #fbf5e4;
  border: 2px solid var(--edge);
  border-radius: 4px 9px 5px 10px / 9px 4px 10px 5px;
  box-shadow: 0 10px 26px rgba(20, 12, 5, 0.35), 3px 3px 0 rgba(27, 22, 18, 0.8);
  pointer-events: none;
  animation: tip-pop 0.14s ease-out;
}

@keyframes tip-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
}

.tooltip .tip-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.tooltip .tip-title .soft {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-soft);
}

.tooltip .tip-text {
  display: block;
}

.tooltip .tip-text + .tip-text {
  margin-top: 0.3rem;
}

.tip-stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  margin: 0.5rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(74, 58, 36, 0.35);
}

.tip-stats dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.glossary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.glossary .tip-title {
  font-size: 1rem;
}

/* ---------- end-of-run summary: one parchment page, never scrolled ---------- */

.over-overlay {
  padding: 0.75rem;
  overflow: hidden;
}

.summary-panel {
  position: relative;
  width: min(62rem, 96vw);
  max-height: none;
  overflow: visible;
  align-items: stretch;
  padding: 1.3rem 1.9rem 1.2rem;
  transform: scale(var(--fit, 1));
  transform-origin: center center;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 88% 92%, rgba(160, 120, 60, 0.12), rgba(160, 120, 60, 0) 30%),
    radial-gradient(circle at 6% 80%, rgba(160, 120, 60, 0.08), rgba(160, 120, 60, 0) 22%),
    #f6ecd3;
  box-shadow:
    inset 0 0 0 7px #f6ecd3,
    inset 0 0 0 8.5px rgba(74, 58, 36, 0.45),
    inset 0 0 60px rgba(140, 100, 40, 0.18),
    0 20px 50px rgba(20, 12, 5, 0.5),
    5px 5px 0 rgba(27, 22, 18, 0.85);
}

/* An ink blot (victory: gold leaf) spreads behind the title. */
.sum-head {
  position: relative;
  text-align: center;
  z-index: 0;
  animation: sum-drop 0.45s ease-out both;
}

.sum-head::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  width: 26rem;
  height: 5.2rem;
  transform: translate(-50%, -50%) rotate(-1.5deg);
  z-index: -1;
  border-radius: 48% 52% 45% 55% / 60% 40% 60% 40%;
  background: radial-gradient(ellipse at center, rgba(168, 35, 26, 0.16), rgba(168, 35, 26, 0) 70%);
  animation: blot-in 0.7s ease-out backwards;
}

.summary-panel.victory .sum-head::before {
  background: radial-gradient(ellipse at center, rgba(214, 165, 49, 0.32), rgba(214, 165, 49, 0) 70%);
}

.sum-kicker {
  display: block;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.summary-panel .over-title {
  font-size: 3.1rem;
  line-height: 1;
  margin: 0.1rem 0 0;
}

.summary-panel.victory .over-title {
  color: #8a6516;
  text-shadow: 0 2px 0 rgba(255, 240, 200, 0.9);
}

.summary-panel.defeat .over-title {
  color: var(--wax);
}

.sum-head .over-subtitle {
  margin: 0.25rem 0 0.8rem;
  font-size: 1.1rem;
}

/* Headline numbers on index cards, taped to the page. */
.sum-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0 0.4rem 0.8rem;
}

.sum-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.65rem 0.4rem 0.45rem;
  background:
    linear-gradient(90deg, transparent 1.1rem, rgba(168, 35, 26, 0.35) 1.1rem, rgba(168, 35, 26, 0.35) calc(1.1rem + 1px), transparent calc(1.1rem + 1px)),
    repeating-linear-gradient(180deg, transparent 0, transparent 1.05rem, rgba(42, 79, 181, 0.13) 1.05rem, rgba(42, 79, 181, 0.13) calc(1.05rem + 1px)),
    #fffaf0;
  border: 1.5px solid rgba(74, 58, 36, 0.55);
  border-radius: 2px;
  box-shadow: 2px 3px 0 rgba(74, 58, 36, 0.18), 0 6px 12px rgba(40, 25, 10, 0.12);
  transform: rotate(-1deg);
  animation: sum-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: var(--delay, 0ms);
}

.sum-tile:nth-child(even) {
  transform: rotate(1.2deg);
}

.sum-tile::before {
  content: '';
  position: absolute;
  top: -0.55rem;
  left: 50%;
  width: 3.2rem;
  height: 1.05rem;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(236, 224, 186, 0.78);
  border: 1px solid rgba(160, 140, 90, 0.35);
  box-shadow: 0 1px 2px rgba(40, 25, 10, 0.12);
}

.sum-tile.accent {
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 1.05rem, rgba(201, 150, 46, 0.18) 1.05rem, rgba(201, 150, 46, 0.18) calc(1.05rem + 1px)),
    #fdf1cf;
  border-color: var(--gold);
}

.sum-tile-value {
  font-family: var(--font-display);
  font-size: 2.15rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.summary-panel.victory .sum-tile.accent .sum-tile-value {
  color: #8a6516;
}

.sum-tile-label {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* Records and ranks as ribbons. */
.sum-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.6rem;
}

.sum-chip {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.22rem 1.2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--tide);
  background: #e9eefb;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.6rem) 50%, 100% 100%, 0 100%, 0.6rem 50%);
  animation: sum-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: var(--delay, 600ms);
}

.sum-chip strong {
  font-weight: 400;
}

.sum-chip.record {
  color: #fff5dd;
  background: linear-gradient(180deg, #b8892a, #8a6516);
}

.sum-chip.record::before {
  content: '★';
}

.sum-chip.rank.best {
  color: #fff;
  background: linear-gradient(180deg, #3b5fc5, #2a4fb5);
}

.sum-chip.rank.offline,
.sum-chip.rank.guest,
.sum-chip.rank.unranked {
  opacity: 0.7;
}

/* Two columns: what you brought home and unlocked | how your weapons did. */
.sum-columns {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.sum-col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.sum-box {
  padding: 0.55rem 0.8rem 0.65rem;
  background: rgba(255, 250, 240, 0.55);
  border: 1.5px solid rgba(74, 58, 36, 0.22);
  border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px;
}

.sum-box h3 {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

/* A brush stroke under each heading. */
.sum-box h3::after {
  content: '';
  position: absolute;
  left: -0.1rem;
  right: -0.4rem;
  bottom: -0.12rem;
  height: 0.22rem;
  background: rgba(27, 22, 18, 0.65);
  border-radius: 40% 60% 70% 30% / 60% 40% 60% 40%;
  transform: rotate(-0.8deg);
}

.sum-loot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.sum-loot-row {
  display: grid;
  grid-template-columns: 1.7rem 1fr auto;
  align-items: center;
  gap: 0.55rem;
  animation: sum-slide 0.35s ease-out both;
  animation-delay: var(--delay, 600ms);
}

.sum-loot-label {
  font-weight: 600;
}

.sum-loot-value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sum-loot-icon {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 2px solid #8a6516;
  background: radial-gradient(circle at 35% 30%, #fbe39a, #d6a531 55%, #a77b1e);
  box-shadow: 1px 1px 0 rgba(74, 58, 36, 0.4);
}

.sum-loot-icon.vellum {
  border-radius: 2px;
  border-color: #9a7f5a;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(154, 127, 90, 0.45) 3px, rgba(154, 127, 90, 0.45) 4px),
    #f6efe0;
  transform: rotate(-6deg);
}

.sum-loot-icon.stamps {
  border-color: #6d140e;
  background: radial-gradient(circle at 35% 30%, #d4544a, var(--wax) 60%, #7a1810);
  box-shadow: 0 0 0 2px rgba(168, 35, 26, 0.25), 1px 1px 0 rgba(74, 58, 36, 0.4);
}

.sum-loot-row:has(.gilt) .sum-loot-value {
  color: #8a6516;
}

.sum-loot-row:has(.stamps) .sum-loot-value {
  color: var(--wax);
}

/* Unlocks: one compact line each (a portrait for a new Cartographer), the rest folded. */
.sum-unlock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.sum-unlock {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(246, 223, 160, 0.5), rgba(246, 223, 160, 0));
  font-size: 0.88rem;
  line-height: 1.25;
  animation: sum-slide 0.35s ease-out both;
  animation-delay: var(--delay, 900ms);
}

.sum-unlock-text {
  display: flex;
  flex-direction: column;
}

.sum-unlock small {
  color: var(--text-soft);
}

.sum-unlock.kind-newCharacter {
  border-left-color: var(--wax);
  background: linear-gradient(90deg, rgba(168, 35, 26, 0.12), rgba(168, 35, 26, 0));
}

.sum-unlock.kind-pressure {
  border-left-color: #3b2f45;
  background: linear-gradient(90deg, rgba(59, 47, 69, 0.12), rgba(59, 47, 69, 0));
}

.sum-unlock .portrait {
  width: 2.6rem;
  height: 2.6rem;
  margin: -0.35rem 0;
}

.sum-unlock-mark {
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  margin: 0 0.2rem;
  transform: rotate(45deg);
  background: var(--gold);
}

.sum-unlock.kind-pressure .sum-unlock-mark {
  background: #3b2f45;
}

.sum-more {
  margin: 0.4rem 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: help;
  border-bottom: 1px dotted transparent;
  width: fit-content;
}

.sum-more:hover,
html[data-input='pad'] .sum-more.nav-current {
  color: var(--ink);
  border-bottom-color: var(--text-soft);
}

.tip-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.15rem;
}

/* Damage per weapon: the weapon's drawing and a painted bar in its ink. */
.sum-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.sum-bars li {
  display: grid;
  grid-template-columns: 2.1rem 1fr 4.6rem;
  align-items: center;
  gap: 0.55rem;
}

.sum-bar-art {
  width: 2.1rem;
  height: 2.1rem;
}

.sum-bar-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.sum-bar-name {
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sum-bars li.evolved .sum-bar-name {
  color: #8a6516;
  font-weight: 700;
}

.sum-bar-track {
  position: relative;
  height: 0.7rem;
  background: repeating-linear-gradient(115deg, transparent 0, transparent 5px, rgba(74, 58, 36, 0.12) 5px, rgba(74, 58, 36, 0.12) 6px);
  border-bottom: 1px solid rgba(74, 58, 36, 0.3);
}

/* The fill is a brush stroke: ragged ends, a darker wet edge, a little streaking. */
.sum-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 11px, rgba(255, 255, 255, 0.12) 11px, rgba(255, 255, 255, 0.12) 13px),
    var(--ink);
  border-radius: 2px 45% 40% 3px / 3px 55% 60% 2px;
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.18);
  transform-origin: left center;
  animation: sum-fill 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(1000ms + var(--i, 0) * 140ms);
}

.sum-bar-value {
  text-align: right;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sum-bar-value small {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--text-soft);
}

.sum-mini {
  margin: 0;
  text-align: center;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--text-soft);
}

.summary-panel .over-afford {
  margin: 0.5rem auto 0;
}

.sum-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.75rem;
}

.sum-actions .btn {
  min-width: 11rem;
}

@keyframes sum-pop {
  from { opacity: 0; transform: scale(0.8); }
}

@keyframes sum-drop {
  from { opacity: 0; transform: translateY(-12px); }
}

@keyframes sum-slide {
  from { opacity: 0; transform: translateX(-10px); }
}

@keyframes sum-fill {
  from { transform: scaleX(0); }
}

@media (max-width: 760px) {
  .sum-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .sum-columns {
    grid-template-columns: 1fr;
  }
}

.summary-panel.still .sum-head,
.summary-panel.still .sum-tile,
.summary-panel.still .sum-chip,
.summary-panel.still .sum-unlock,
.summary-panel.still .sum-loot-row,
.summary-panel.still .sum-bar-fill {
  animation: none;
}

.damage-level {
  display: inline-block;
  margin-left: 0.35rem;
  min-width: 1.2rem;
  padding: 0 0.25rem;
  border-radius: 4px;
  background: var(--paper-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  vertical-align: 1px;
}

/* ---------- controller focus: each control shows its own hover look (no rings) ---------- */
/* Rules here must never set `animation`: swapping it on focus restarts entrance animations. */

html[data-input='pad'] .tab.nav-current {
  color: var(--ink);
  transform: translateY(-2px);
  border-bottom-color: var(--gold);
}

html[data-input='pad'] .hub-station.nav-current {
  transform: translateY(-2px);
  box-shadow: 2px 4px 0 rgba(27, 22, 18, 0.35);
}

html[data-input='pad'] .stage-card.nav-current:not(:disabled) {
  background: rgba(255, 250, 240, 0.95);
  transform: translateX(3px);
}

/* Anything else you can land on: it lifts a little and an ink wash fills behind it. */
html[data-input='pad'] #ui button.nav-current:not(.btn, .card, .toggle, .cycle, .bind, .tab, .character, .compass-node, .hub-station, .stage-card, .pressure-tag),
html[data-input='pad'] #ui [data-focusable].nav-current:not(.side-weapon) {
  transform: translateY(-2px);
  background-color: rgba(42, 79, 181, 0.1);
  box-shadow: 2px 3px 0 rgba(27, 22, 18, 0.3);
}
/* The settings row you are in lights up with it. */
html[data-input='pad'] .setting-row:has(.nav-current) {
  background: rgba(42, 79, 181, 0.08);
  border-radius: 6px;
  box-shadow: inset 3px 0 0 var(--tide);
}

/* Keyboard numbers on the station bar mean nothing on a controller. */
html[data-input='pad'] .hub-key {
  display: none;
}

/* Controller button glyphs: Xbox colours, and below them the other two controllers of Settings → Controls. */
.pad-glyph.pad-b { background: #c0392b; border-color: #6d140e; box-shadow: 0 2px 0 #6d140e; }
.pad-glyph.pad-x { background: #2a5fc0; border-color: #12306b; box-shadow: 0 2px 0 #12306b; }
.pad-glyph.pad-y { background: #d9a520; border-color: #7a5a0a; box-shadow: 0 2px 0 #7a5a0a; color: #2a1f12; }
.pad-glyph.pad-lb,
.pad-glyph.pad-rb,
.pad-glyph.pad-lt,
.pad-glyph.pad-rt {
  width: auto;
  min-width: 1.9rem;
  padding: 0 0.35rem;
  border-radius: 6px;
  background: #3b3f45;
  border-color: #16181b;
  box-shadow: 0 2px 0 #16181b;
  font-size: 0.72rem;
}

.btn .pad-glyph {
  margin-right: 0.45rem;
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.75rem;
}

.btn .pad-glyph.pad-rt {
  width: auto;
}

.tab-hint.pad {
  border: none;
  padding: 0;
}

/* PlayStation: dark buttons, the four shapes in their colours. Switch: dark buttons, white letters. */
.pad-glyph.pad-playstation.pad-a,
.pad-glyph.pad-playstation.pad-b,
.pad-glyph.pad-playstation.pad-x,
.pad-glyph.pad-playstation.pad-y,
.pad-glyph.pad-switch.pad-a,
.pad-glyph.pad-switch.pad-b,
.pad-glyph.pad-switch.pad-x,
.pad-glyph.pad-switch.pad-y {
  background: #2b2f36;
  border-color: #0f1114;
  box-shadow: 0 2px 0 #0f1114;
  color: #fff;
}

.pad-glyph.pad-switch.pad-a,
.pad-glyph.pad-switch.pad-b,
.pad-glyph.pad-switch.pad-x,
.pad-glyph.pad-switch.pad-y {
  background: #3b3f45;
  border-color: #16181b;
  box-shadow: 0 2px 0 #16181b;
}

.pad-glyph.pad-playstation.pad-a { color: #8fb8ff; }
.pad-glyph.pad-playstation.pad-b { color: #ff7b7b; }
.pad-glyph.pad-playstation.pad-x { color: #f3a3d6; }
.pad-glyph.pad-playstation.pad-y { color: #7fdcb0; }

.pad-glyph.pad-playstation.pad-view,
.pad-glyph.pad-playstation.pad-menu {
  font-size: 0.58rem;
}

/* A keycap or a pad glyph inside a line of text (a prompt). */
.key-in-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- Armory: families and their two weapons ---------- */

.family-intro {
  grid-column: 1 / -1;
  margin: 0 0 0.2rem;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.family-name {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.family-kicker {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* The two weapons hang off the family like entries under a heading. */
.family-card ul {
  border-left: 2px solid rgba(74, 58, 36, 0.25);
  margin-left: 0.9rem;
  padding-left: 0.7rem;
}

.weapon-row {
  position: relative;
  align-items: flex-start;
  padding: 0.3rem 0;
}

.weapon-row::before {
  content: '';
  position: absolute;
  left: -0.7rem;
  top: 0.95rem;
  width: 0.5rem;
  border-top: 2px solid rgba(74, 58, 36, 0.25);
}

.weapon-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.weapon-row-text strong {
  font-weight: 700;
}

.weapon-row-text small {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-soft);
}

.weapon-row-text .weapon-row-evo {
  color: #8a6516;
  font-style: italic;
}

.weapon-row-status {
  flex: none;
  font-size: 0.78rem;
  text-align: right;
  max-width: 7rem;
}

.weapon-row.locked .weapon-row-text {
  opacity: 0.65;
}

/* The View button (and other wide controller buttons) as a pill. */
.pad-glyph.pad-view,
.pad-glyph.pad-menu {
  width: auto;
  min-width: 2.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #3b3f45;
  border-color: #16181b;
  box-shadow: 0 2px 0 #16181b;
  font-size: 0.68rem;
}

.choice-glossary-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 1.2rem;
  font-style: normal;
}
/* Game-feel pass: nothing here should read as a web page. Menus are things on a cartographer's
   desk: parchment sheets with a ruled margin, divider tabs, keycaps, a wax-seal switch, painted
   bars, a quill-nib pointer. Unlocks arrive as a banner with a stamped seal (ui/notice.tsx).
   Loaded after style.css and juice.css; .reduced-motion (style.css) turns the motion off. */

:root {
  --font-book: 'IM Fell English', Georgia, serif;
  --gold-dark: #8a6516;
  --wax-dark: #6d140e;
  --blob: 46% 54% 42% 58% / 55% 45% 55% 45%;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .24  0 0 0 0 .13  0 0 0 .4 -.13'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  /* A quill nib as the pointer; gold-filled over anything you can press. */
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2.5L23.5 11.5L14.3 14.3L11.5 23.5Z' fill='%23f8efd9' stroke='%231b1612' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 3.5L10.2 9.7' stroke='%231b1612' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='11.2' cy='10.7' r='1.5' fill='%231b1612'/%3E%3C/svg%3E") 3 3, auto;
  --cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2.5L23.5 11.5L14.3 14.3L11.5 23.5Z' fill='%23f4d27a' stroke='%231b1612' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 3.5L10.2 9.7' stroke='%231b1612' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='11.2' cy='10.7' r='1.5' fill='%23a8231a'/%3E%3C/svg%3E") 3 3, pointer;
}

/* ---------- the pointer ---------- */

html,
body {
  cursor: var(--cursor);
}

#ui :is(button, a, label, [data-focusable], [role='tab'], input[type='range'], .card-tag, .keyword, .side-weapon, .side-list li, .sum-more, .coin, .sum-loot-row) {
  cursor: var(--cursor-hand);
}

#ui :is(button:disabled, .locked, .character.locked) {
  cursor: var(--cursor);
}

#ui :is(input:not([type='range']), textarea) {
  cursor: text;
  caret-color: var(--wax);
}

/* Playing with a controller: the pointer goes away, and comes back when the mouse moves
   (ui/modality.ts switches data-input). */
html[data-input='pad'],
html[data-input='pad'] * {
  cursor: none !important;
}

/* Pressing something leaves a drop of ink (ui/clickink.ts). */
.click-blot {
  position: fixed;
  z-index: 1200;
  width: 1.7rem;
  height: 1.7rem;
  margin: -0.85rem 0 0 -0.85rem;
  pointer-events: none;
  background: rgba(27, 22, 18, 0.5);
  border-radius: var(--blob);
  animation: click-blot 0.45s ease-out forwards;
}

@keyframes click-blot {
  from { opacity: 0.85; transform: scale(0.2); }
  to { opacity: 0; transform: scale(1.6) rotate(50deg); }
}

/* ---------- scrolling: an ink rule with a wax bead, and the page fades at its edges ---------- */

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(90deg, transparent 7px, rgba(74, 58, 36, 0.45) 7px, rgba(74, 58, 36, 0.45) 9px, transparent 9px);
  border-radius: 0;
}

::-webkit-scrollbar-track:horizontal {
  background: linear-gradient(180deg, transparent 7px, rgba(74, 58, 36, 0.45) 7px, rgba(74, 58, 36, 0.45) 9px, transparent 9px);
}

::-webkit-scrollbar-thumb {
  min-height: 2.6rem;
  background: linear-gradient(90deg, #c94a3e, var(--wax) 55%, #7a1810);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1.5px var(--wax-dark);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #e0685c, #c2392d 55%, #8a1d14);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(90deg, #f4d27a, var(--gold) 55%, var(--gold-dark));
  background-clip: padding-box;
}

::-webkit-scrollbar-button {
  display: none;
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--wax) rgba(74, 58, 36, 0.18);
  }
}

.station-body,
.settings-body,
.achievement-list,
.changelog {
  padding-top: 0.5rem;
  padding-bottom: 0.7rem;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 0.6rem, #000 calc(100% - 0.8rem), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 0.6rem, #000 calc(100% - 0.8rem), transparent 100%);
}

/* A new tab turns in like a page. */
.station-body,
.settings-body {
  animation: page-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

@keyframes page-in {
  from { opacity: 0; transform: translateX(16px); }
}

/* ---------- sheets: parchment with grain and a ruled margin ---------- */

.panel {
  background:
    var(--grain),
    radial-gradient(ellipse at 18% 6%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle at 94% 96%, rgba(160, 120, 60, 0.16), rgba(160, 120, 60, 0) 32%),
    radial-gradient(circle at 4% 88%, rgba(160, 120, 60, 0.1), rgba(160, 120, 60, 0) 24%),
    #f7edd6;
  box-shadow:
    inset 0 0 0 5px #f7edd6,
    inset 0 0 0 6.5px rgba(74, 58, 36, 0.4),
    inset 0 0 55px rgba(140, 100, 40, 0.16),
    0 18px 44px rgba(20, 12, 5, 0.45),
    5px 5px 0 rgba(27, 22, 18, 0.85);
}

.modal-backdrop,
.popup-layer {
  backdrop-filter: blur(3px);
}

/* Titles sit between two quill strokes that end in a wax diamond. */
.screen-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
}

.screen-title::before,
.screen-title::after {
  content: '';
  flex: none;
  width: 1.5em;
  height: 0.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q28 3.5 44 7Q28 10.5 0 7Z' fill='%231b1612' fill-opacity='.72'/%3E%3Cpath d='M52 1.5L57.5 7L52 12.5L46.5 7Z' fill='%23a8231a'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.screen-title::after {
  transform: scaleX(-1);
}

.station-head .screen-title::before {
  display: none;
}

/* Running text in sheets is set like a book, not like a web page. */
.modal p,
.tutorial-text,
.station-desc,
.name-dialog > p:not(.soft),
.feedback-sent p,
.credits dd,
.victory-hint {
  font-family: var(--font-book);
  font-size: 1.18rem;
  line-height: 1.45;
}

.hint,
.gate-hint,
.family-intro {
  font-family: var(--font-book);
  font-style: italic;
  font-size: 1.02rem;
}

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

.btn-default,
.btn-ghost {
  background-color: #f9f0da;
}

/* Dashed "quiet" buttons (Back, Abandon run, Cancel): under the pointer or the controller they
   become a real button: inked border, hard shadow, the ink wash. */
.btn-ghost:hover:not(:disabled),
html[data-input='pad'] .btn-ghost.nav-current:not(:disabled) {
  background:
    linear-gradient(100deg, rgba(42, 79, 181, 0.16) 0%, rgba(42, 79, 181, 0.16) 92%, rgba(42, 79, 181, 0) 100%) 0 0 / 108% 100% no-repeat,
    #fffaf0;
  border-style: solid;
  border-color: var(--ink);
  box-shadow: 5px 5px 0 rgba(27, 22, 18, 0.85);
}

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

.btn:disabled {
  background-image: repeating-linear-gradient(115deg, transparent 0, transparent 6px, rgba(74, 58, 36, 0.12) 6px, rgba(74, 58, 36, 0.12) 7px);
  background-size: auto;
  box-shadow: none;
  border-style: dashed;
}

.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-hard);
}

.btn-primary:hover:not(:disabled),
html[data-input='pad'] .btn-primary.nav-current:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 5px 5px 0 rgba(27, 22, 18, 0.85), 0 0 0 3px rgba(244, 210, 122, 0.45);
}

.btn-danger:hover:not(:disabled),
html[data-input='pad'] .btn-danger.nav-current:not(:disabled) {
  background: #c2392d;
}

/* A text action inside a sentence, and the legal links: ink with a red quill stroke underneath. */
.legal-links a {
  font-family: var(--font-book);
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0 0.1em;
  border-bottom: 1.5px solid rgba(168, 35, 26, 0.55);
  border-radius: 0 0 3px 2px;
  transition: color 0.15s, background 0.15s;
}

.legal-links a:hover {
  color: var(--wax);
  background: rgba(168, 35, 26, 0.08);
}

/* ---------- divider tabs ---------- */

.tabs {
  position: relative;
  align-items: flex-end;
  gap: 0;
  padding: 0 0.3rem;
  margin-bottom: 0.7rem;
  border-bottom: none;
  /* Tabs that are not open sit lower, tucked behind the rule. */
  clip-path: inset(-1rem -1rem 0 -1rem);
}

.tabs::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ink);
  border-radius: 40% 60% 70% 30% / 60% 40% 60% 40%;
  z-index: 1;
}

.tab {
  position: relative;
  margin: 0 -1px;
  padding: 0.4rem 0.9rem 0.5rem;
  font-size: 1.08rem;
  color: var(--text-soft);
  background: var(--grain), #e6d7b4;
  border: 2px solid var(--edge);
  border-bottom: none;
  border-radius: 9px 12px 0 0 / 11px 9px 0 0;
  box-shadow: inset 0 -7px 7px -5px rgba(27, 22, 18, 0.28);
  transform: translateY(6px);
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.15s, color 0.15s;
}

.tab:hover {
  color: var(--ink);
  background: var(--grain), #f1e4c4;
  transform: translateY(2px);
}

.tab.active {
  z-index: 2;
  color: var(--ink);
  background: var(--grain), #f7edd6;
  box-shadow: inset 0 5px 0 var(--wax);
  padding-top: 0.6rem;
  transform: translateY(0);
}

.tab.active:hover {
  transform: translateY(0);
}

html[data-input='pad'] .tab.nav-current {
  color: var(--ink);
  transform: translateY(1px);
  box-shadow: inset 0 5px 0 var(--gold);
}

@keyframes tab-in {
  from { transform: translateY(6px); }
}

/* Q / E as keycaps at the ends of the row. */
.tab-hint {
  align-self: center;
  margin: 0 0.6rem 0.25rem;
  min-width: 1.5rem;
  padding: 0.05rem 0.4rem 0.1rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: 5px;
  box-shadow: 0 3px 0 var(--edge);
}

.tab-hint.pad {
  background: none;
  box-shadow: none;
}

/* ---------- settings: a contents page, each line led to its control ---------- */

.setting-row {
  position: relative;
  grid-template-columns: minmax(0, auto) minmax(1.5rem, 1fr) auto;
  gap: 0.8rem;
  padding: 0.5rem 0.7rem;
  border-bottom: none;
  border-radius: 6px;
  transition: background 0.15s;
}

.setting-row::before {
  content: '';
  order: 2;
  align-self: center;
  height: 0;
  margin-top: 0.3rem;
  border-bottom: 2px dotted rgba(74, 58, 36, 0.32);
}

.setting-label {
  order: 1;
  max-width: 30rem;
}

.setting-control {
  order: 3;
}

.setting-label > span:first-child,
.bind-action,
.loadout-row > span:first-child {
  font-family: var(--font-book);
  font-size: 1.18rem;
}

.setting-label small {
  font-size: 0.82rem;
  line-height: 1.35;
}

.setting-row:hover {
  background: rgba(42, 79, 181, 0.06);
}

.setting-row:hover::before {
  border-bottom-color: rgba(42, 79, 181, 0.5);
}

.group-title {
  position: relative;
  display: table;
  margin: 1.2rem 0 0.5rem;
  font-size: 1.4rem;
}

.group-title:first-child {
  margin-top: 0.3rem;
}

.group-title::after,
.build-title::after {
  content: '';
  position: absolute;
  left: -0.1rem;
  right: -0.5rem;
  bottom: -0.1rem;
  height: 0.22rem;
  background: rgba(27, 22, 18, 0.65);
  border-radius: 40% 60% 70% 30% / 60% 40% 60% 40%;
  transform: rotate(-0.6deg);
}

.build-title {
  position: relative;
  display: table;
  align-self: flex-start;
  border-top: none;
  padding-top: 0;
}

/* The switch: an inkwell groove; the wax seal slides across and the well fills with ink. */
.toggle {
  position: relative;
  width: 5.5rem;
  height: 2.15rem;
  padding: 0;
  background: linear-gradient(180deg, #cbb98f, #e3d4b2);
  box-shadow: inset 0 3px 5px rgba(27, 22, 18, 0.3);
  transition: background 0.25s, box-shadow 0.15s;
}

.toggle.on {
  background: linear-gradient(180deg, #223a82, #3559c2);
}

.toggle-knob {
  position: absolute;
  top: 50%;
  left: 0.1rem;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.875rem;
  border-radius: var(--blob);
  background: radial-gradient(circle at 35% 30%, #fff, #eadcbd 60%, #c9b88f);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.5);
  transition: left 0.24s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.2s, transform 0.24s, border-color 0.2s;
}

.toggle.on .toggle-knob {
  left: calc(100% - 1.85rem - 2px);
  background: radial-gradient(circle at 35% 30%, #e0685c, var(--wax) 60%, #7a1810);
  border-color: var(--wax-dark);
  transform: rotate(140deg);
}

.toggle:active .toggle-knob {
  transform: scale(0.82);
}

.toggle-text {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  flex: none;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.toggle.on .toggle-text {
  right: auto;
  left: 0.65rem;
  color: #fff4d6;
}

.toggle:hover,
html[data-input='pad'] .toggle.nav-current {
  transform: none;
  border-color: var(--ink);
  box-shadow: inset 0 3px 5px rgba(27, 22, 18, 0.3), 0 0 0 3px rgba(201, 150, 46, 0.5);
}

/* The option picker: a paper label between two brass arrow studs. */
.cycle {
  min-width: 13.5rem;
  gap: 0.4rem;
  padding: 0.1rem;
  background: none;
  border: none;
  border-radius: 999px;
}

.cycle-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0;
  background: var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: 50%;
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.6);
  transition: transform 0.12s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.15s;
}

.cycle-arrow::before {
  content: '';
  border: 0.36rem solid transparent;
  border-right-color: var(--ink);
  margin-right: 0.34rem;
  transition: border-color 0.15s;
}

.cycle-arrow.next::before {
  border-right-color: transparent;
  border-left-color: var(--ink);
  margin: 0 0 0 0.34rem;
}

.cycle-value {
  flex: 1;
  padding: 0.22rem 0.7rem 0.28rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12rem;
  white-space: nowrap;
  background: var(--grain), #fffaf0;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: inset 0 2px 3px rgba(74, 58, 36, 0.16);
  animation: value-flip 0.22s cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes value-flip {
  from { opacity: 0.2; transform: scaleY(0.4); }
}

.cycle:hover,
html[data-input='pad'] .cycle.nav-current {
  transform: none;
  background: none;
  box-shadow: none;
}

.cycle-arrow:hover,
html[data-input='pad'] .cycle.nav-current .cycle-arrow {
  background: var(--ink);
  transform: scale(1.1);
}

.cycle-arrow:hover::before,
html[data-input='pad'] .cycle.nav-current .cycle-arrow::before {
  border-right-color: var(--paper-light);
}

.cycle-arrow.next:hover::before,
html[data-input='pad'] .cycle.nav-current .cycle-arrow.next::before {
  border-right-color: transparent;
  border-left-color: var(--paper-light);
}

.cycle:hover .cycle-value,
html[data-input='pad'] .cycle.nav-current .cycle-value {
  border-color: var(--ink);
  background: var(--grain), #fff;
}

.cycle:active .cycle-value {
  transform: scale(0.97);
}

/* The slider: a ruler with a wax bead; its value on a small tag. */
.slider input[type='range'] {
  width: 12.5rem;
  height: 1.9rem;
}

.slider input[type='range']::-webkit-slider-runnable-track {
  height: 0.7rem;
  background:
    repeating-linear-gradient(90deg, rgba(27, 22, 18, 0.35) 0, rgba(27, 22, 18, 0.35) 1px, transparent 1px, transparent 10%),
    linear-gradient(90deg, #3559c2 0 var(--fill, 50%), #e3d4b2 var(--fill, 50%) 100%);
  box-shadow: inset 0 2px 3px rgba(27, 22, 18, 0.25);
}

.slider input[type='range']::-webkit-slider-thumb {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: calc(-0.35rem - 2px);
  border-radius: var(--blob);
  background: radial-gradient(circle at 35% 30%, #e0685c, var(--wax) 60%, #7a1810);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.6);
}

.slider input[type='range']::-moz-range-thumb {
  width: 1.4rem;
  height: 1.4rem;
  background: radial-gradient(circle at 35% 30%, #e0685c, var(--wax) 60%, #7a1810);
}

.slider output {
  min-width: 3.6rem;
  padding: 0.1rem 0.5rem 0.15rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  background: var(--grain), #fffaf0;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
}

/* Key bindings are keycaps. */
.bind-table {
  gap: 0.55rem;
}

.bind-row {
  padding: 0.15rem 0.7rem;
  border-radius: 6px;
}

.bind-row:not(.head):hover {
  background: rgba(42, 79, 181, 0.06);
}

.bind {
  padding: 0.28rem 0.5rem 0.36rem;
  font-weight: 700;
  background: linear-gradient(180deg, #fffaf0, #efe2c4);
  border-radius: 7px;
  box-shadow: 0 4px 0 var(--edge), 0 6px 6px rgba(27, 22, 18, 0.2);
  transform: translateY(-2px);
}

.bind:hover:not(.capturing),
html[data-input='pad'] .bind.nav-current:not(.capturing) {
  transform: translateY(-4px);
  box-shadow: 0 6px 0 var(--edge), 0 9px 8px rgba(27, 22, 18, 0.22);
  border-color: var(--ink);
}

.bind:active:not(.capturing) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--edge);
}

.bind.unbound {
  background: transparent;
  box-shadow: none;
  transform: none;
}

.bind.capturing {
  color: var(--ink);
  background: linear-gradient(180deg, #ffe9a6, #e2b54a);
  border-color: var(--gold-dark);
  box-shadow: 0 4px 0 var(--gold-dark), 0 0 0 4px rgba(244, 210, 122, 0.5);
}

.ink-swatch {
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.45);
}

.text-input,
.text-area {
  background: var(--grain), #fffaf0;
  border-radius: var(--wobble);
  font-family: var(--font-book);
  font-size: 1.15rem;
}

.text-area:not(.feedback-text) {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
}

.link-code {
  background: var(--grain), #fffaf0;
  border-radius: var(--wobble);
  box-shadow: inset 0 2px 3px rgba(74, 58, 36, 0.16);
}

/* ---------- slips: every list entry is a slip of paper that lifts under the pointer ---------- */

:is(.codex-entry, .family-card, .mastery-card, .cosmetic-card, .stage-card, .node-card, .mode-info, .pressure-picker, .changelog-card, .capstone, .achievement.earned, .deed, .deed-pin, .waiting) {
  background: var(--grain), #fbf4e2;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: 2px 3px 0 rgba(27, 22, 18, 0.28);
}

:is(.codex-entry, .family-card, .mastery-card, .cosmetic-card, .achievement, .deed, .board-row) {
  transition: transform 0.16s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.16s ease-out, background 0.15s;
  animation: slip-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}

@keyframes slip-in {
  from { opacity: 0; transform: translateY(14px) rotate(0.8deg) scale(0.97); }
}

:is(.codex-entry:not(.unknown), .family-card, .mastery-card, .cosmetic-card, .achievement.earned, .deed:not(.done)):hover {
  transform: translateY(-3px) rotate(-0.3deg);
  box-shadow: 4px 7px 0 rgba(27, 22, 18, 0.26);
}

/* Slips in a grid arrive one after another. */
:is(.family-grid, .cosmetic-grid, .character-mastery, .board-list, .stage-list) > :nth-child(2) { animation-delay: 40ms; }
:is(.family-grid, .cosmetic-grid, .character-mastery, .board-list, .stage-list) > :nth-child(3) { animation-delay: 80ms; }
:is(.family-grid, .cosmetic-grid, .character-mastery, .board-list, .stage-list) > :nth-child(4) { animation-delay: 120ms; }
:is(.family-grid, .cosmetic-grid, .character-mastery, .board-list, .stage-list) > :nth-child(5) { animation-delay: 160ms; }
:is(.family-grid, .cosmetic-grid, .character-mastery, .board-list, .stage-list) > :nth-child(6) { animation-delay: 200ms; }
:is(.family-grid, .cosmetic-grid, .character-mastery, .board-list, .stage-list) > :nth-child(7) { animation-delay: 240ms; }
:is(.family-grid, .cosmetic-grid, .character-mastery, .board-list, .stage-list) > :nth-child(8) { animation-delay: 280ms; }
:is(.family-grid, .cosmetic-grid, .character-mastery, .board-list, .stage-list) > :nth-child(n + 9) { animation-delay: 320ms; }

/* Bars everywhere are the XP bar's kin: a framed, hatched ruler track, filled with a wash of ink
   whose edges are a little ragged and whose wet end is darker. Nothing in it scales with the
   bar's length, so a long bar looks like a short one. */
.bar,
.achievement-progress {
  position: relative;
  box-sizing: border-box;
  height: 1.4rem;
  padding: 2px;
  background: var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: 3px 5px 4px 6px;
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.3);
  overflow: hidden;
}

/* The track inside the frame, with a tick at every tenth. */
.bar::before,
.achievement-progress::before {
  content: '';
  position: absolute;
  inset: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(74, 58, 36, 0.4) calc(10% - 1px), rgba(74, 58, 36, 0.4) 10%) 0 0 / 100% 35% no-repeat,
    repeating-linear-gradient(115deg, transparent 0, transparent 6px, rgba(74, 58, 36, 0.13) 6px, rgba(74, 58, 36, 0.13) 7px),
    #e3d4b2;
  border: 1.5px solid var(--edge);
  border-radius: 4px;
}

.bar.small {
  height: 1.1rem;
  padding: 1px;
}

.bar.small::before {
  inset: 1px;
}

.bar > span,
.achievement-progress > span,
.sum-bar-fill {
  background:
    radial-gradient(ellipse at 100% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 70%) right center / 0.7rem 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.3) 90%),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 17px, rgba(255, 255, 255, 0.11) 17px, rgba(255, 255, 255, 0.11) 23px, rgba(0, 0, 0, 0.05) 23px, rgba(0, 0, 0, 0.05) 31px),
    var(--bar, var(--ink-bar, #c9962e));
  border-radius: 2px 0.4rem 0.4rem 2px / 2px 50% 50% 2px;
  box-shadow: none;
  /* Ragged top and bottom: a wobbly tile repeated along the bar (never stretched). */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 20' preserveAspectRatio='none'%3E%3Cpath d='M0 1.6Q7 0 13 1.2T27 .7T41 1.9T54 1.6V18.4Q47 20 41 18.7T27 19.3T13 18.1T0 18.4Z'/%3E%3C/svg%3E") 0 0 / 54px 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 20' preserveAspectRatio='none'%3E%3Cpath d='M0 1.6Q7 0 13 1.2T27 .7T41 1.9T54 1.6V18.4Q47 20 41 18.7T27 19.3T13 18.1T0 18.4Z'/%3E%3C/svg%3E") 0 0 / 54px 100% repeat-x;
}

.bar > span,
.achievement-progress > span {
  position: relative;
  box-sizing: border-box;
  min-width: 0.5rem;
  height: 100%;
  border: 1.5px solid transparent;
  background-clip: padding-box;
  transform-origin: left center;
  animation: sum-fill 0.8s 0.15s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

.bar > span[style*='width: 0%'],
.achievement-progress > span[style*='width: 0%'] {
  display: none;
}

.sum-bar-fill {
  --ink-bar: var(--ink);
}

.page-progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.6rem;
}

.page-progress .bar {
  flex: none;
  width: 11rem;
}

.page-progress p {
  margin: 0;
}

/* ---------- currencies: a drawn coin, sheet and stamp; numbers count and pop ---------- */

.icon {
  display: inline-block;
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: -0.2em;
}

.icon-stamps path:first-child {
  fill: currentColor;
}

.icon-stamps path:last-child {
  stroke: #fff4e6;
}

.coin {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.coin .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.coin-gilt { color: var(--gold-dark); }
.coin-gilt .icon path:first-child { fill: #f1c95a; }
.coin-vellum { color: #6b4a8a; }
.coin-vellum .icon path:first-child { fill: #f8f1e0; }
.coin-stamps { color: var(--wax); }

.counter {
  display: inline-block;
}

.counter.up {
  animation: count-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
  color: #b07d12;
}

.counter.down {
  animation: count-drop 0.45s ease-out;
  color: var(--wax);
}

@keyframes count-pop {
  35% { transform: scale(1.4) translateY(-2px); }
}

@keyframes count-drop {
  35% { transform: scale(0.8) translateY(2px); }
}

.wallet {
  gap: 0.45rem;
}

.wallet .coin {
  padding: 0.2rem 0.7rem 0.2rem 0.45rem;
  background: var(--grain), #fffaf0;
  border: 2px solid var(--edge);
  border-radius: 999px;
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.4);
}

.hub-journal {
  background: var(--grain), rgba(248, 239, 217, 0.96);
}

.hub-stations {
  background: var(--grain), rgba(248, 239, 217, 0.96);
}

.hub-station {
  background: var(--grain), var(--paper-light);
}

.hub-station.gate {
  background: var(--ink);
}

.hub-station.active {
  background: #f6dfa0;
  box-shadow: inset 0 4px 0 var(--wax), 2px 4px 0 rgba(27, 22, 18, 0.35);
}

/* ---------- achievements: wax seals ---------- */

.achievement-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 0.6rem;
}

.achievement-summary-text {
  flex: 1;
}

.achievement-summary-text p {
  margin: 0 0 0.35rem;
  font-family: var(--font-book);
  font-size: 1.1rem;
}

.achievement-progress {
  margin: 0;
}

.achievement-ring {
  --p: 0;
  display: grid;
  place-items: center;
  flex: none;
  width: 4.4rem;
  height: 4.4rem;
  border: 2px solid var(--edge);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #f7edd6 70%, transparent 72%),
    conic-gradient(var(--gold) calc(var(--p) * 360deg), rgba(74, 58, 36, 0.18) 0);
  box-shadow: 2px 3px 0 rgba(27, 22, 18, 0.5), inset 0 0 0 2px #f7edd6;
  animation: ring-in 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

@keyframes ring-in {
  from { opacity: 0; transform: scale(0.5) rotate(-90deg); }
}

.achievement-ring strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
}

.achievement-list {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.6rem;
  padding-left: 0.2rem;
  padding-right: 0.6rem;
}

.achievement {
  gap: 0.8rem;
  padding: 0.5rem 0.8rem;
  opacity: 1;
  background: rgba(255, 250, 240, 0.3);
  border: 2px dashed rgba(74, 58, 36, 0.4);
}

.achievement:not(.earned) .achievement-text {
  opacity: 0.75;
}

.achievement.earned {
  background: var(--grain), linear-gradient(100deg, rgba(246, 223, 160, 0.7), rgba(255, 250, 240, 0.9) 50%);
}

.achievement-seal {
  width: 3rem;
  height: 3rem;
  color: rgba(74, 58, 36, 0.5);
  background: rgba(227, 212, 178, 0.55);
  border: 2px dashed rgba(74, 58, 36, 0.4);
  border-radius: var(--blob);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.achievement-seal .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.achievement.earned .achievement-seal {
  color: #ffe9b0;
  background: radial-gradient(circle at 35% 28%, #e0685c, var(--wax) 58%, #7a1810);
  border: 2px solid #5a100b;
  box-shadow: inset 0 0 0 3px rgba(122, 24, 16, 0.55), 0 0 0 3px rgba(168, 35, 26, 0.16), 1px 2px 0 rgba(27, 22, 18, 0.5);
  transform: rotate(-7deg);
}

.achievement.earned:hover .achievement-seal {
  transform: rotate(7deg) scale(1.12);
}

.achievement.secret .achievement-seal {
  color: #cdbfe0;
  background: #3b2f45;
  border: 2px solid #241b2c;
}

.achievement-text strong {
  font-size: 1.18rem;
}

.achievement-bar,
.challenge-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-family: var(--font-ui);
}

.achievement-bar .bar,
.challenge-progress .bar {
  flex: none;
  width: 7rem;
}

.achievement-bar small,
.challenge-progress small {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}

.achievement-date {
  font-family: var(--font-book);
  font-style: italic;
  font-size: 0.9rem;
}

/* ---------- Codex: each entry with its drawing; the unknown are blank ---------- */

.codex-grid {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.7rem;
  padding: 0.2rem 0.5rem 0.4rem 0.1rem;
}

.codex-entry {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
}

.codex-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.codex-entry strong {
  font-size: 1.22rem;
  line-height: 1.1;
}

.codex-art {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.codex-art::before {
  content: '';
  position: absolute;
  inset: 0.15rem;
  background: var(--paper-dark);
  border-radius: var(--blob);
  transform: rotate(-8deg);
}

.codex-art > * {
  position: relative;
}

.codex-art .art-badge,
.codex-art .portrait {
  width: 100%;
  height: 100%;
}

.codex-art .art-badge-blot,
.codex-art .portrait-blot {
  display: none;
}

.codex-art .icon {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--ink-soft);
}

.codex-art.shadow img {
  filter: brightness(0);
  opacity: 0.4;
}

.codex-entry:not(.unknown):hover .codex-art {
  transform: rotate(-7deg) scale(1.12);
}

.codex-entry.unknown {
  align-items: center;
  opacity: 0.7;
  background: transparent;
  border: 2px dashed rgba(74, 58, 36, 0.35);
  box-shadow: none;
}

.codex-entry.unknown .codex-art::before {
  background: repeating-linear-gradient(115deg, transparent 0, transparent 4px, rgba(74, 58, 36, 0.18) 4px, rgba(74, 58, 36, 0.18) 5px);
}

.codex-entry.unknown .icon {
  color: rgba(74, 58, 36, 0.45);
}

.codex-entry .kills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.codex-entry .stars {
  display: inline-flex;
  gap: 0.05rem;
  letter-spacing: 0;
}

.codex-entry .stars .icon {
  width: 0.95rem;
  height: 0.95rem;
  color: rgba(74, 58, 36, 0.35);
}

.codex-entry .stars .icon.on {
  color: var(--gold-dark);
  fill: #f1c95a;
}

.codex-entry.tier-3 {
  border-color: var(--gold);
  background: var(--grain), linear-gradient(180deg, #fdf1cf, #fbf4e2);
  box-shadow: inset 0 0 0 2px #f4d27a, 2px 3px 0 rgba(138, 101, 22, 0.45);
}

.codex-entry.tier-3 .codex-art::before {
  background: #f4d27a;
}

/* Lore reads in the same face as every other Codex text. */
.codex-entry .lore {
  font-family: inherit;
  font-style: normal;
}

/* A reaction wears its two inks. */
.codex-art.two-inks::before {
  background: linear-gradient(115deg, var(--a) 0, var(--a) 50%, var(--b) 50%, var(--b) 100%);
  border: 2px solid var(--edge);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.4);
}

.codex-art.two-inks .icon {
  color: #fffaf0;
  stroke-width: 2;
  filter: drop-shadow(0 1px 0 rgba(27, 22, 18, 0.7));
}

/* Weapons can be pointed at (or stepped onto) for their base values. */
html[data-input='pad'] #ui .codex-entry[data-focusable].nav-current:not(.unknown) {
  background-color: #fffaf0;
  transform: translateY(-3px) rotate(-0.3deg);
  box-shadow: 4px 7px 0 rgba(27, 22, 18, 0.26), inset 0 0 0 2px var(--gold);
}

html[data-input='pad'] .codex-entry.nav-current .codex-art {
  transform: rotate(-7deg) scale(1.12);
}

/* What a line of the score slip is made of: a small table, numbers to the right. */
.tooltip .tip-score {
  border-collapse: collapse;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.tooltip .tip-score th {
  padding: 0.08rem 0.9rem 0.08rem 0;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.tooltip .tip-score td {
  padding: 0.08rem 0 0.08rem 0.7rem;
  text-align: right;
  white-space: nowrap;
}

.tooltip .tip-score td:nth-child(3) {
  opacity: 0.7;
}

.tooltip .tip-score td:last-child {
  font-weight: 600;
}

.tooltip .tip-score tr.rest th,
.tooltip .tip-score tr.rest td {
  font-style: italic;
  font-weight: 400;
}

.tooltip .tip-evolves {
  margin-top: 0.45rem;
  font-style: italic;
  color: var(--gold-dark);
}

.codex-progress {
  font-family: var(--font-book);
  font-style: italic;
  font-size: 1.05rem;
}

/* ---------- Scriptorium stations ---------- */

.family-card,
.mastery-card,
.cosmetic-card {
  padding: 0.8rem 1rem;
}

.cosmetic-card.worn {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 2px #f4d27a, 2px 3px 0 rgba(138, 101, 22, 0.45);
}

.cosmetic-card strong,
.capstone strong,
.weapon-row-text strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
}

.cosmetic-card .portrait,
.cosmetic-card .swatch {
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.cosmetic-card:hover .portrait,
.cosmetic-card:hover .swatch {
  transform: scale(1.1) rotate(-4deg);
}

.family-kicker {
  font-weight: 700;
  color: var(--gold-dark);
}

/* ---------- the Atlas Table: the map of deeds (ui/screens/deedmap.tsx) ----------
   A sheet with one region per stage around the journey. Every deed is a landmark: pencilled until
   it is done, stamped in wax after (gold for one that unlocked something), and the land takes
   colour as its deeds are done. Beside it, the chosen region's landmarks as slips. */

.deed-atlas {
  display: grid;
  grid-template-columns: minmax(19rem, 1.1fr) minmax(21rem, 1fr);
  gap: 0.5rem 1.1rem;
  align-items: start;
}

/* The two headings stand on one line, so the map and the first landmark begin on one line too. */
.deed-head {
  align-self: end;
  min-width: 0;
}

.deed-head .deed-side-title {
  margin: 0;
}

.deed-head .group-title {
  margin: 0.3rem 0 0;
  font-size: 1.2rem;
}

.deed-head .deed-total {
  margin: 0.3rem 0 0;
}

/* (The first landmark's top edge is the map's top edge.) */
.deed-side .deed-group:first-child .deed-list {
  padding-top: 0;
}

/* The map stays in sight while the landmarks scroll. */
.deed-map-col {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.deed-map {
  position: relative;
  background: var(--grain), #efe2c4;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: inset 0 0 30px rgba(140, 100, 40, 0.25), 2px 3px 0 rgba(27, 22, 18, 0.4);
}

.deed-map.paper-vellum { background: var(--grain), #f8f1df; }
.deed-map.paper-nautical { background: var(--grain), #dfe7e2; }

.deed-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.deed-road {
  stroke: #8a744c;
  stroke-width: 1.6;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
  opacity: 0.75;
}

.region-ground {
  fill: #f6ead0;
}

.region-fill {
  fill: #cfae70;
  transition: opacity 0.4s;
}

.region-outline {
  fill: none;
  stroke: #6b5434;
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
}

/* Every deed of a region done: its coast is inked in. */
.deed-region-art.charted .region-outline {
  stroke: #3b2c16;
  stroke-width: 2.4;
  stroke-dasharray: none;
}

.deed-region-art.selected .region-outline {
  stroke: var(--wax);
  stroke-width: 3;
  stroke-dasharray: none;
}

.region-label {
  font-family: var(--font-display);
  font-size: 17px;
  fill: #3b2c16;
  paint-order: stroke;
  stroke: rgba(246, 234, 208, 0.9);
  stroke-width: 4px;
}

.deed-region-art.selected .region-label {
  fill: var(--wax-dark);
}

.landmark {
  fill: rgba(255, 250, 240, 0.75);
  stroke: #6b5434;
  stroke-width: 1.1;
  stroke-dasharray: 2 1.6;
}

.landmark.toy {
  stroke: var(--gold-dark);
  stroke-dasharray: none;
}

.landmark.done {
  fill: var(--wax);
  stroke: var(--wax-dark);
  stroke-dasharray: none;
}

.landmark.toy.done {
  fill: #e0b243;
  stroke: #6b4a10;
}

/* The landmark of the slip under the pointer (or the controller's focus). */
.landmark.hot {
  stroke: var(--ink);
  stroke-width: 2.8;
  stroke-dasharray: none;
}

/* A region is a control lying over its land: its count sits on its lower edge. */
.deed-region {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  font: inherit;
  color: inherit;
}

.deed-region-count {
  padding: 0.02rem 0.5rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  background: var(--paper-light);
  border: 1.5px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.3);
  transform: translateY(42%);
  transition: transform 0.16s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.15s;
}

.deed-region.charted .deed-region-count {
  color: #fff;
  background: #2e8a5a;
  border-color: #1d5a3a;
}

.deed-region.selected .deed-region-count {
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #d4544a, var(--wax) 60%, #7a1810);
  border-color: var(--wax-dark);
}

.deed-region:hover .deed-region-count,
.deed-region:focus-visible .deed-region-count,
html[data-input='pad'] .deed-region.nav-current .deed-region-count {
  transform: translateY(42%) scale(1.18);
}

.deed-region:focus,
.deed-region:focus-visible {
  outline: none;
}

/* (With a controller the land itself is not lifted or tinted: its count grows, and its coast is the wax line.) */
html[data-input='pad'] #ui button.deed-region.nav-current {
  transform: none;
  background: none;
  box-shadow: none;
}

.deed-total {
  margin: 0.35rem 0 0;
}

.deed-map-col .hint {
  margin: 0;
}

.deed-side {
  min-width: 0;
  animation: page-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

.deed-side-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
}

.deed-side-title .soft {
  font-family: var(--font-book);
  font-size: 1rem;
}

.deed-group .group-title {
  margin: 0.9rem 0 0.45rem;
  font-size: 1.2rem;
}

.deed-group:first-of-type .group-title {
  margin-top: 0.2rem;
}

.deed-list,
.sum-pins ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.deed-list {
  display: grid;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem 0.3rem 0.1rem;
}

/* A landmark's slip: a seal, its name and what to do with how far you are, and what it pays. */
.deed,
.deed-pin {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.7rem;
}

.deed:focus,
.deed:focus-visible {
  outline: none;
}

.deed:focus-visible,
html[data-input='pad'] .deed.nav-current {
  border-color: var(--wax);
  box-shadow: 0 0 0 3px rgba(244, 210, 122, 0.85), 2px 3px 0 rgba(27, 22, 18, 0.28);
}

.challenge-seal {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  color: var(--ink-soft);
  background: var(--paper-dark);
  border: 2px solid var(--edge);
  border-radius: var(--blob);
}

.deed-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}

.deed-text strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12rem;
}

.deed-task {
  font-family: var(--font-book);
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.deed.pays-toy,
.deed-pin.pays-toy {
  border-color: var(--gold-dark);
  box-shadow: inset 4px 0 0 #e0b243, 2px 3px 0 rgba(27, 22, 18, 0.28);
}

.deed.pays-toy .challenge-seal {
  color: var(--gold-dark);
  background: #f6dfa0;
  border-color: var(--gold-dark);
}

/* What it pays: Stamps, or the toy with its drawing. */
.deed-reward {
  flex: none;
}

.deed-reward.challenge-reward {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  white-space: nowrap;
  color: var(--wax);
}

.deed-reward.challenge-reward > span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.deed-reward.challenge-reward small {
  font-size: 0.72rem;
  color: var(--gold-dark);
}

.deed-reward.toy {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 11.5rem;
}

.deed-toy-art {
  width: 2.5rem;
  height: 2.5rem;
}

.deed-toy-art.study {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--gold-dark);
  background: #f6dfa0;
  border: 2px solid var(--gold-dark);
  border-radius: var(--blob);
}

.deed-toy-art.study .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.deed-toy-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.deed-toy-text small {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.deed-toy-text strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
}

.deed-reward.secret {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  color: var(--text-soft);
  border: 2px dashed rgba(74, 58, 36, 0.5);
  border-radius: var(--blob);
}

/* Hidden until done: a blank slip with a hint. */
.deed.secret {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.deed.secret .deed-task {
  font-style: italic;
}

/* Done: charted. The slip lies flat and carries the stamp. */
.deed.done {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.deed.done .deed-text,
.deed.done .deed-reward {
  opacity: 0.6;
}

.deed.done .challenge-seal {
  color: #fff;
  background: #2e8a5a;
  border-color: #1d5a3a;
}

.deed.done.pays-toy .challenge-seal {
  background: #c9962e;
  border-color: #6b4a10;
}

/* (On the slip's upper edge, clear of what it paid.) */
.deed-stamp {
  position: absolute;
  right: 0.9rem;
  top: -0.6rem;
  padding: 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wax);
  background: var(--paper-light);
  border: 1.5px solid var(--wax);
  border-radius: 3px 5px 4px 6px;
  transform: rotate(-4deg);
  pointer-events: none;
}

/* The Armory: a locked weapon shows its deed under it. */
.weapon-row.locked {
  flex-wrap: wrap;
}

.weapon-row-deed {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  gap: 0.05rem;
  padding: 0.2rem 0.5rem 0.3rem;
  background: rgba(246, 223, 160, 0.35);
  border-left: 3px solid #e0b243;
}

.weapon-row-deed small {
  font-size: 0.78rem;
  line-height: 1.3;
}

.weapon-row-deed .family-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The run summary: the deeds closest to done, beside the way to the Compass Rose. */
.sum-next {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sum-pins {
  padding: 0.5rem 0.8rem 0.6rem;
  background: rgba(255, 250, 240, 0.55);
  border: 1.5px solid rgba(74, 58, 36, 0.22);
  border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px;
}

.sum-pins h3 {
  position: relative;
  display: inline-block;
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
}

.sum-pins h3::after {
  content: '';
  position: absolute;
  left: -0.1rem;
  right: -0.4rem;
  bottom: -0.12rem;
  height: 0.22rem;
  background: rgba(27, 22, 18, 0.65);
  border-radius: 40% 60% 70% 30% / 60% 40% 60% 40%;
  transform: rotate(-0.8deg);
}

.sum-pins ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.deed-pin {
  padding: 0.35rem 0.6rem;
  animation: sum-slide 0.35s ease-out both;
  animation-delay: var(--delay, 1100ms);
}

.deed-pin .deed-text strong {
  font-size: 1rem;
}

.deed-pin .deed-task {
  font-size: 0.86rem;
}

.deed-pin .challenge-progress .bar {
  width: 5.5rem;
}

.deed-pin .deed-reward.toy {
  max-width: 8.5rem;
}

.deed-pin .deed-toy-art {
  width: 2.1rem;
  height: 2.1rem;
}

.sum-next-hints .over-hint,
.sum-next-hints .over-afford {
  margin: 0.2rem auto 0;
}

.summary-panel.still .deed-pin {
  animation: none;
}

.notice.kind-toy {
  --accent: #f4d27a;
}

@media (max-width: 900px) {
  .deed-atlas {
    grid-template-columns: 1fr;
  }

  .deed-map-col {
    position: static;
    order: 2;
  }

  .deed-head-map { order: 1; }
  .deed-head-side { order: 3; }
  .deed-side { order: 4; }

  .sum-pins ul {
    grid-template-columns: 1fr;
  }
}

.reward-track .lv {
  min-width: 1.7rem;
  padding: 0 0.2rem;
  font-weight: 700;
  border: 1.5px solid currentColor;
  border-radius: var(--blob);
}

.reward-track li.done .lv {
  color: #ffe9b0;
  background: var(--wax);
  border-color: var(--wax-dark);
}

.compass-node {
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.35);
  transition: transform 0.14s cubic-bezier(0.3, 1.8, 0.5, 1), box-shadow 0.14s;
}

.compass-node.st-ok {
  animation: node-ready 1.6s ease-in-out infinite;
}

@keyframes node-ready {
  0%, 100% { box-shadow: 0 0 0 3px rgba(244, 210, 122, 0.85); }
  50% { box-shadow: 0 0 0 6px rgba(244, 210, 122, 0.25); }
}

/* The stages at the Gate, and the pickers on the boards. */
.stage-card {
  position: relative;
  transition: transform 0.16s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.16s, background 0.15s;
  animation: slip-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
}

.stage-card:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 3px 6px 0 rgba(27, 22, 18, 0.28);
}

.stage-card.selected {
  border-color: var(--ink);
  background: var(--grain), #fffaf0;
  box-shadow: inset 0 5px 0 var(--wax), 3px 5px 0 rgba(27, 22, 18, 0.6);
  transform: translateY(-3px);
}

.stage-card.locked {
  background: transparent;
  box-shadow: none;
}

.stage-lock {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  color: var(--text-soft);
}

.stage-name {
  font-size: 1.18rem;
}

.board-stage {
  padding: 0.25rem 0.8rem;
  font-family: var(--font-display);
  font-size: 1rem;
  background: var(--grain), var(--paper-light);
  border-radius: var(--wobble);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.35);
  transition: transform 0.12s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.15s, color 0.15s;
}

.board-stage:hover {
  color: var(--ink);
  transform: translateY(-2px);
}

.board-stage.active {
  color: var(--paper-light);
  background: var(--ink);
  border-color: var(--ink);
}

/* Leaderboard rows: medals for the first three, a gold slip for you. */
.board-list {
  display: grid;
  gap: 0.3rem;
}

.board-row {
  padding: 0.3rem 0.6rem;
  background: rgba(255, 250, 240, 0.5);
  border: 1.5px solid rgba(74, 58, 36, 0.3);
  border-radius: var(--wobble);
}

.board-row:hover {
  background: rgba(255, 250, 240, 0.95);
  transform: translateX(3px);
}

.board-rank {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  text-align: center;
  font-size: 1.15rem;
}

.board-row.medal .board-rank {
  border: 2px solid;
  border-radius: var(--blob);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.45);
}

.board-row.medal-1 .board-rank { color: #3b2a05; background: radial-gradient(circle at 35% 30%, #ffe9a6, #d6a531 60%, #a77b1e); border-color: #7a5a0a; }
.board-row.medal-2 .board-rank { color: #24262a; background: radial-gradient(circle at 35% 30%, #fff, #b9bcc2 60%, #8a8d93); border-color: #5d6066; }
.board-row.medal-3 .board-rank { color: #2b1606; background: radial-gradient(circle at 35% 30%, #f0c49a, #c07a3e 60%, #8a4f1e); border-color: #5e3410; }

.board-row.you {
  background: linear-gradient(90deg, rgba(246, 223, 160, 0.85), rgba(246, 223, 160, 0.3));
  border-color: var(--gold);
  box-shadow: 2px 3px 0 rgba(138, 101, 22, 0.35);
}

.board-who {
  font-family: var(--font-book);
  font-size: 1.12rem;
}

.board-report .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.modifier {
  padding: 0.2rem 0.6rem;
  background: rgba(255, 250, 240, 0.6);
  border-radius: 0 6px 6px 0;
}

/* ---------- Departure Gate: where you go (left), who goes and what they carry (right); the way
   out is a row of its own that never scrolls away ---------- */

.gate-panel {
  display: flex;
  flex-direction: column;
  width: min(76rem, 96vw);
  max-height: calc(100vh - 2rem);
  padding: 1.1rem 1.6rem 1.1rem;
  overflow: hidden;
}

.gate-panel .screen-title {
  margin-bottom: 0.4rem;
}

.gate-columns {
  display: grid;
  /* (Where you go is the wider side: the stages, and the ten tags of Blank Pressure under them.) */
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  /* One row, as tall as the window allows: each side scrolls in itself if it must. */
  grid-template-rows: minmax(0, 1fr);
  gap: 1.4rem;
  flex: 1;
  min-height: 0;
}

.gate-side {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
  padding: 0.2rem 0.5rem 0.4rem 0.1rem;
  overflow-y: auto;
}

.gate-where {
  animation: page-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

.gate-who {
  padding-left: 1.4rem;
  border-left: 2px dashed rgba(74, 58, 36, 0.3);
}

.gate-heading {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.gate-panel .waiting,
.gate-panel .stage-list,
.gate-panel .pressure-picker,
.gate-panel .mode-info {
  flex: none;
  margin: 0;
}

.gate-panel .stage-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem 0.5rem;
}

.gate-panel .stage-card {
  gap: 0.05rem;
  padding: 0.35rem 0.7rem 0.4rem;
}

.stage-kicker {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Blank Pressure at the Gate: ten tags to sign. Each is a slip of paper with a place for a wax
   seal; signing a tag stamps it. Above them the name the run will carry, below them what the run
   is worth for it and the journal frames a win with enough tags earns. */
.gate-panel .pressure-picker {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 0.3rem;
  padding: 0.4rem 0.65rem 0.5rem;
}

.pressure-picker p {
  margin: 0;
}

.pressure-picker.on {
  border-color: var(--ink);
  background: var(--grain), linear-gradient(180deg, #f3e7d8, #fbf4e2 55%);
}

/* Sealed until the stage is cleared once: the same dashed slip as a keystone not bought yet. */
.pressure-picker.locked {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  opacity: 0.78;
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.pressure-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.pressure-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.1;
}

.pressure-count {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-soft);
}

.pressure-picker.on .pressure-count {
  color: var(--wax);
}

.pressure-name {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-height: 1.5rem;
}

.pressure-name small {
  flex: none;
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.pressure-name strong {
  font-family: var(--font-book);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.2;
  animation: pressure-name-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
}

@keyframes pressure-name-in {
  from { opacity: 0; transform: translateX(-6px); }
}

.pressure-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 0.4rem;
}

.pressure-tag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: 0.45rem;
  padding: 0.2rem 0.45rem 0.25rem 0.4rem;
  text-align: left;
  color: var(--ink);
  background: var(--grain), #fbf4e2;
  border: 1.5px solid rgba(74, 58, 36, 0.5);
  border-radius: var(--wobble);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.2);
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.14s, background 0.15s, border-color 0.15s;
}

/* Where the seal goes: a dashed ring, until the tag is signed. */
.pressure-tag-mark {
  grid-row: 1 / span 2;
  align-self: center;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px dashed rgba(74, 58, 36, 0.45);
  border-radius: var(--blob);
  transition: transform 0.24s cubic-bezier(0.3, 1.8, 0.5, 1), background 0.15s, border-color 0.15s;
}

.pressure-tag-name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.1;
}

.pressure-tag-text {
  grid-column: 2;
  font-size: 0.75rem;
  line-height: 1.22;
  color: var(--ink-soft);
}

.pressure-tag.on {
  background: var(--grain), #fffaf0;
  border-color: var(--ink);
  box-shadow: 2px 3px 0 rgba(27, 22, 18, 0.45);
}

.pressure-tag.on .pressure-tag-mark {
  background: radial-gradient(circle at 35% 30%, #e0685c, var(--wax) 60%, #7a1810);
  border: 2px solid var(--wax-dark);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.45);
  transform: rotate(-14deg) scale(1.08);
}

.pressure-tag.on .pressure-tag-name {
  color: var(--wax-dark);
}

.pressure-tag:hover,
html[data-input='pad'] #ui .pressure-tag.nav-current {
  transform: translateY(-2px);
  background: var(--grain), #fffaf0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(201, 150, 46, 0.5), 2px 4px 0 rgba(27, 22, 18, 0.3);
}

.pressure-tag:active .pressure-tag-mark {
  transform: scale(0.8);
}

.pressure-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem 1rem;
}

.pressure-worth {
  display: flex;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--text-soft);
}

.pressure-picker.on .pressure-worth {
  color: var(--gold-dark);
}

.pressure-frames {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.pressure-frame {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text-soft);
}

/* A journal frame in small: faint until it is earned. */
.pressure-frame-swatch {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ink);
  background: #fbf4e2;
  border: 3px solid var(--frame-a);
  border-radius: 4px 6px 4px 6px;
  box-shadow: inset 0 0 0 1.5px var(--frame-b);
  opacity: 0.5;
}

.pressure-frame-swatch .icon {
  width: 0.7rem;
  height: 0.7rem;
  stroke-width: 3;
}

.pressure-frame.owned {
  color: var(--ink);
}

.pressure-frame.owned .pressure-frame-swatch {
  opacity: 1;
  box-shadow: inset 0 0 0 1.5px var(--frame-b), 1px 2px 0 rgba(27, 22, 18, 0.4);
}

/* The tags signed now would earn it. */
.pressure-frame.within {
  color: var(--wax);
}

.pressure-frame.within .pressure-frame-swatch {
  opacity: 0.85;
}

.gate-panel .waiting {
  width: auto;
  max-width: none;
  padding: 0.7rem 1rem;
}

.gate-panel .gate-character {
  flex: none;
  align-items: center;
  gap: 1rem;
  padding-top: 0;
  border-top: none;
}

.gate-panel .gate-character-text {
  flex: none;
}

/* The perks stand beside the sheet. */
.gate-panel .gate-character .character-perks {
  flex: 1;
  width: auto;
  padding: 0 0 0 1rem;
  border-top: none;
  border-left: 1px dashed rgba(74, 58, 36, 0.4);
  font-size: 0.86rem;
}

/* The charged attack under the three numbers: its name on a slip; what it does is its tooltip. */
.character-attack {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: 0.45rem;
  padding: 0.12rem 0.6rem 0.18rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
  background: var(--grain), #fbf4e2;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: 2px 2px 0 rgba(27, 22, 18, 0.22);
  cursor: help;
  outline: none;
}

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

.character-attack:hover,
.character-attack:focus-visible {
  border-color: var(--card-accent, var(--gold-dark));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent, var(--gold-dark)) 35%, transparent), 2px 2px 0 rgba(27, 22, 18, 0.22);
}

.tooltip .tip-attack {
  display: grid;
  gap: 0.3rem;
  max-width: 22rem;
}

.tooltip .tip-attack strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
}

/* The Gate keeps its size whatever is chosen in it: a longer weapon text or a stage with Blank
   Pressure open must not make the window jump (the user, 2026-10-10). */
.gate-panel {
  height: min(54rem, calc(100vh - 2rem));
}

.gate-panel .loadout-desc {
  min-height: 2.6em;
}

.gate-ink {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.7rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.gate-who .portrait {
  width: 6.4rem;
  height: 6.4rem;
}

.gate-who .character-name {
  font-size: 2rem;
}

.gate-mastery {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gate-mastery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.gate-mastery-head strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
}

/* The mastery bar fills with the Cartographer's own ink. */
.gate-mastery .bar > span {
  --bar: var(--card-accent);
}

.gate-panel .loadout {
  flex: none;
  gap: 0.5rem;
  margin-top: 0;
}

/* One row each: the drawing, what it is and does, and the picker. */
.loadout-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.6rem 0.45rem;
  background: var(--grain), #fbf4e2;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: 2px 3px 0 rgba(27, 22, 18, 0.28);
}

.loadout-item.locked {
  opacity: 0.78;
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.loadout-label {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.1;
}

.loadout-desc {
  margin: 0.1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

.loadout-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
}

.loadout-art .art-badge-blot,
.loadout-lock::before {
  content: '';
  position: absolute;
  inset: 0.2rem;
  background: var(--paper-dark);
  border-radius: var(--blob);
}

.loadout-lock .icon {
  position: relative;
  color: var(--text-soft);
}

.loadout-ink {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--blob);
}

.loadout-item .cycle {
  min-width: 12.5rem;
}

.gate-panel .gate-hint {
  margin: 0;
  text-align: left;
}

.gate-actions {
  display: flex;
  align-items: stretch;
  gap: 0.8rem;
  flex: none;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 2px solid rgba(74, 58, 36, 0.25);
}

.gate-actions .gate-go {
  flex: 1;
  font-size: 1.5rem;
}

@media (max-width: 900px) {
  .gate-columns {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .gate-side {
    overflow: visible;
  }

  .gate-who {
    padding-left: 0.1rem;
    border-left: none;
  }
}

/* Short windows (720p): everything a little tighter, so neither side has to scroll. */
@media (max-height: 800px) {
  .gate-panel {
    max-height: calc(100vh - 1.2rem);
    padding-top: 0.7rem;
    padding-bottom: 0.8rem;
  }

  .gate-panel .screen-title {
    margin-bottom: 0.1rem;
    font-size: 1.8rem;
  }

  .gate-side {
    gap: 0.5rem;
  }

  .gate-who .portrait {
    width: 5rem;
    height: 5rem;
  }

  .gate-who .character-name {
    font-size: 1.7rem;
  }

  .gate-panel .gate-hint {
    display: none;
  }

  .gate-panel .stage-card {
    padding: 0.3rem 0.6rem 0.35rem;
  }

  .gate-actions {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  .gate-actions .btn {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .gate-actions .gate-go {
    font-size: 1.3rem;
  }
}

/* ---------- pause: the menu between your build and your stats, like the card screen ---------- */

.pause-layout {
  align-items: flex-start;
}

.pause-layout .choice-side.panel {
  width: 16.5rem;
  margin-top: 0;
  font-size: 0.92rem;
}

.pause-panel {
  width: min(25rem, 94vw);
  max-height: none;
  overflow: visible;
}

.pause-where {
  margin: -0.3rem 0 0.9rem;
  font-size: 1.02rem;
  text-align: center;
}

.side-revives {
  margin: 0 0 0.4rem;
  font-weight: 700;
  color: var(--wax);
}

@media (max-width: 1150px) {
  .pause-layout {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }

  .pause-layout > .pause-panel {
    order: -1;
  }

  .pause-layout .choice-side.panel {
    width: min(25rem, 94vw);
  }
}

/* The Codex over the pause menu: as large as the station window. */
.popup-codex .popup-panel {
  width: min(66rem, 96vw);
  height: min(52rem, calc(100vh - 3rem));
}

.popup-codex .station-head {
  align-items: center;
}

.name-field,
.cloud-status,
.deed-total p {
  font-family: var(--font-book);
  font-size: 1.1rem;
}

/* ---------- small things ---------- */

.tag {
  font-weight: 700;
  background: rgba(246, 223, 160, 0.5);
}

.version-badge {
  font-family: var(--font-book);
  font-size: 0.95rem;
}

.tutorial-icon {
  background: radial-gradient(circle at 35% 28%, #e0685c, var(--wax) 58%, #7a1810);
  border: 2px solid #5a100b;
  box-shadow: inset 0 0 0 4px rgba(122, 24, 16, 0.55), var(--shadow-hard);
  color: #ffe9b0;
  animation: seal-stamp 0.45s 0.15s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}

.tutorial-icon .icon {
  width: 2.4rem;
  height: 2.4rem;
}

.tutorial-dots span {
  border-radius: var(--blob);
  transition: transform 0.2s;
}

.tutorial-dots span.on {
  background: var(--wax);
  border-color: var(--wax-dark);
  transform: scale(1.3);
}

.credits dt {
  color: var(--gold-dark);
}

.changelog-card {
  animation: slip-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
}

.changelog-version {
  border-radius: var(--blob);
  padding: 0.2rem 0.6rem;
  box-shadow: inset 0 0 0 2px var(--wax-dark);
}

.tooltip {
  background: var(--grain), #fbf5e4;
}

/* Lists in running text: ink drops instead of browser bullets. */
.changelog-body ul,
.tip-list {
  list-style: none;
  padding-left: 1.2rem;
}

.changelog-body li,
.tip-list li {
  position: relative;
}

.changelog-body li::before,
.tip-list li::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 0.5em;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--wax);
  border-radius: var(--blob);
}

.changelog-body li.sub {
  list-style: none;
}

.changelog-body li.sub::before {
  background: transparent;
  border: 1.5px solid var(--text-soft);
}

/* Plain messages: a note slid onto the desk. */
.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(40rem, 92vw);
  padding: 0.5rem 1.2rem 0.55rem 0.9rem;
  font-family: var(--font-book);
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--grain), #fffaf0;
  border: 2px solid var(--edge);
  box-shadow: inset 5px 0 0 var(--wax), 0 10px 24px rgba(20, 12, 5, 0.35), var(--shadow-hard);
  z-index: 800;
}

.toast::before {
  content: '';
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.3rem;
  background: var(--wax);
  border-radius: var(--blob);
}

body:has(.notice):has(.hub-bar.over-station) .toast {
  top: 7.4rem;
}

/* ---------- the unlock banner ---------- */

/* High enough to sit in a station window's title row, above its tabs. */
.notice-layer {
  position: fixed;
  top: 0.6rem;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.notice {
  --accent: #f4d27a;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: min(27rem, 88vw);
  max-width: min(42rem, 92vw);
  min-height: 5.2rem;
  padding: 0.7rem 1.5rem 0.75rem 5.9rem;
  color: #fbf1d8;
  background: var(--grain), linear-gradient(180deg, #30271e, #1b1612);
  border: 2px solid #0e0b08;
  border-radius: 6px 12px 7px 13px / 12px 6px 13px 7px;
  box-shadow:
    inset 0 0 0 2px #1b1612,
    inset 0 0 0 3.5px var(--accent),
    0 16px 38px rgba(20, 12, 5, 0.6),
    5px 5px 0 rgba(27, 22, 18, 0.85);
  animation:
    notice-in 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both,
    notice-out 0.4s ease-in calc(var(--ms, 4200ms) - 0.4s) forwards;
}

@keyframes notice-in {
  from { opacity: 0; transform: translateY(-150%) scaleX(0.5) rotate(-2deg); }
  55% { opacity: 1; }
}

@keyframes notice-out {
  to { opacity: 0; transform: translateY(-130%) scale(0.96); }
}

/* The ribbon's two tails, folded behind the plaque. */
.notice::before,
.notice::after {
  content: '';
  position: absolute;
  top: 1.1rem;
  bottom: -0.6rem;
  width: 1.9rem;
  background: linear-gradient(180deg, #8f1e16, #6d140e);
  z-index: -1;
}

.notice::before {
  left: -1.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%);
}

.notice::after {
  right: -1.5rem;
  clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%);
}

.notice-seal {
  position: absolute;
  left: -1.3rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 6.4rem;
  height: 6.4rem;
  margin-top: -3.2rem;
}

.notice-wax {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  color: #ffe9b0;
  background: radial-gradient(circle at 35% 28%, #e0685c, var(--wax) 58%, #7a1810);
  border: 2px solid #5a100b;
  border-radius: 47% 53% 44% 56% / 54% 46% 55% 45%;
  box-shadow: inset 0 0 0 5px rgba(122, 24, 16, 0.6), inset 0 -5px 7px rgba(0, 0, 0, 0.25), 2px 4px 0 rgba(0, 0, 0, 0.5);
  animation: seal-stamp 0.42s 0.24s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}

@keyframes seal-stamp {
  from { opacity: 0; transform: scale(2.8) rotate(-30deg); }
  55% { opacity: 1; transform: scale(0.9) rotate(4deg); }
}

.notice-wax .icon {
  width: 2.4rem;
  height: 2.4rem;
  stroke-width: 1.6;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}

.notice-wax .portrait,
.notice-wax .art-badge {
  width: 4.5rem;
  height: 4.5rem;
}

.notice-wax .portrait-blot,
.notice-wax .art-badge-blot {
  display: none;
}

/* A portrait or a drawing sits on a gold-rimmed paper disc instead of wax. */
.notice-wax:has(.portrait, .art-badge) {
  background: radial-gradient(circle at 35% 28%, #fffaf0, #efe2c4 60%, #d9c79f);
  border-color: var(--gold-dark);
  box-shadow: inset 0 0 0 3px #f4d27a, 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.notice-rays {
  position: absolute;
  inset: -1.6rem;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(244, 210, 122, 0.55) 0deg, rgba(244, 210, 122, 0.55) 8deg, rgba(244, 210, 122, 0) 8deg, rgba(244, 210, 122, 0) 22.5deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  animation: rays-in 0.5s 0.5s ease-out backwards, rays-spin 10s linear infinite;
}

@keyframes rays-in {
  from { opacity: 0; scale: 0.4; }
}

@keyframes rays-spin {
  to { transform: rotate(360deg); }
}

.notice-ring {
  position: absolute;
  inset: 0.8rem;
  border: 3px solid #f4d27a;
  border-radius: 50%;
  opacity: 0;
  animation: seal-ring 0.6s 0.48s ease-out;
}

@keyframes seal-ring {
  from { opacity: 0.95; transform: scale(0.6); }
  to { opacity: 0; transform: scale(2); }
}

.notice-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2);
  background: #f4d27a;
  opacity: 0;
  animation: notice-spark 0.8s calc(0.46s + var(--delay)) cubic-bezier(0.1, 0.7, 0.3, 1);
}

.notice-spark:nth-of-type(3n) { background: #fff8e6; }
.notice-spark:nth-of-type(3n + 1) { background: #e0685c; border-radius: 50%; }

@keyframes notice-spark {
  from { opacity: 1; transform: rotate(var(--a)) translateX(0.8rem) rotate(45deg) scale(1.3); }
  70% { opacity: 1; }
  to { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(220deg) scale(0.2); }
}

.notice-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.notice-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  animation: kicker-in 0.5s 0.3s ease-out backwards;
}

@keyframes kicker-in {
  from { opacity: 0; letter-spacing: 0.5em; }
}

.notice-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.1;
  color: #fff8e6;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  animation: wipe-in 0.5s 0.42s cubic-bezier(0.3, 0.7, 0.2, 1) backwards;
}

@keyframes wipe-in {
  from { opacity: 0.2; clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.notice-text {
  font-family: var(--font-book);
  font-size: 1.02rem;
  line-height: 1.25;
  color: #d9cdb0;
  animation: fade-in 0.4s 0.7s ease-out backwards;
}

.notice-reward {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0.2rem 0.7rem 0.25rem 0.8rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #ffe9b0;
  background: linear-gradient(180deg, #b52a20, #8f1e16);
  border: 2px solid #5a100b;
  border-radius: 999px;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.45);
  animation: reward-pop 0.45s 0.9s cubic-bezier(0.2, 1.8, 0.4, 1) backwards;
}

@keyframes reward-pop {
  from { opacity: 0; transform: scale(0.3) rotate(-12deg); }
}

.notice-reward .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.notice-reward .icon-stamps path:last-child {
  stroke: #8f1e16;
}

.notice-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.notice-shine::before {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -30%;
  width: 22%;
  background: linear-gradient(100deg, rgba(255, 240, 200, 0), rgba(255, 240, 200, 0.5), rgba(255, 240, 200, 0));
  transform: skewX(-14deg);
  opacity: 0;
  animation: notice-shine 1s 0.75s ease-out;
}

@keyframes notice-shine {
  from { opacity: 1; left: -30%; }
  to { opacity: 1; left: 125%; }
}

.notice.kind-codex,
.notice.kind-bestiary {
  --accent: #b7d2ff;
}

.notice.kind-pressure {
  --accent: #cdbfe0;
}

.notice.kind-pressure .notice-wax {
  color: #e6dcf2;
  background: radial-gradient(circle at 35% 28%, #6a567c, #3b2f45 60%, #241b2c);
  border-color: #17111c;
  box-shadow: inset 0 0 0 5px rgba(36, 27, 44, 0.6), 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.notice.kind-codex .notice-wax:not(:has(.portrait, .art-badge)),
.notice.kind-bestiary .notice-wax {
  color: #e9f0ff;
  background: radial-gradient(circle at 35% 28%, #5d7fe0, #2a4fb5 60%, #1a3278);
  border-color: #12245a;
  box-shadow: inset 0 0 0 5px rgba(26, 50, 120, 0.6), 2px 4px 0 rgba(0, 0, 0, 0.5);
}

@media (max-width: 900px) {
  .setting-row {
    grid-template-columns: 1fr;
  }

  .setting-row::before {
    display: none;
  }

  .deed-atlas {
    grid-template-columns: 1fr;
  }
}

/* ---------- the run id on the summary: small, in the bottom corner ---------- */

.sum-run-id {
  position: absolute;
  right: 1rem;
  bottom: 0.55rem;
  padding: 0.05rem 0.3rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  background: none;
  border: none;
  border-bottom: 1px dotted rgba(106, 85, 52, 0.5);
  opacity: 0.75;
  transition: opacity 0.15s, color 0.15s;
}

.sum-run-id:hover {
  opacity: 1;
  color: var(--ink);
}

.sum-run-id.off {
  border-bottom-color: transparent;
  opacity: 0.5;
}

/* ---------- the score slip on the summary: a tally sheet torn from a pad, beside the columns ---------- */

.summary-panel.scored {
  width: min(80rem, 96vw);
}

.sum-columns.scored {
  grid-template-columns: 1fr 1.2fr 1.05fr;
}

.sum-score {
  position: relative;
  padding: 1.05rem 0.9rem 0.6rem;
  /* The row of holes it was torn off by, and ruled paper. */
  background:
    radial-gradient(circle at 0.6rem 0.42rem, rgba(74, 58, 36, 0.3) 0.15rem, rgba(74, 58, 36, 0) 0.19rem) 0 0 / 1.2rem 0.9rem repeat-x,
    #fffaf0;
  border: 1.5px solid rgba(74, 58, 36, 0.45);
  border-radius: 2px;
  box-shadow: 2px 3px 0 rgba(74, 58, 36, 0.18), 0 6px 12px rgba(40, 25, 10, 0.12);
  transform: rotate(0.6deg);
}

.sum-score h3 {
  margin-bottom: 0.3rem;
}

.score-slip {
  margin: 0;
  display: grid;
}

.score-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.2rem 0;
  border-bottom: 1px dashed rgba(74, 58, 36, 0.28);
  animation: sum-slide 0.35s ease-out both;
  animation-delay: var(--delay, 700ms);
}

.score-row dt {
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
}

.score-row dt small {
  margin-left: 0.4rem;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--text-soft);
  white-space: nowrap;
}

.score-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.score-row.zero dt,
.score-row.zero dd {
  color: var(--text-soft);
}

/* Under the lines: the sum line, the multiplier, and the total under a double rule. */
.score-row.mult {
  margin-top: 0.1rem;
  border-top: 1.5px solid rgba(27, 22, 18, 0.6);
  border-bottom: none;
}

.score-row.mult:not(.zero) dt,
.score-row.mult:not(.zero) dd {
  color: #3b2f45;
}

.score-row.total {
  padding: 0.3rem 0 0;
  border-top: 3px double rgba(27, 22, 18, 0.65);
  border-bottom: none;
}

.score-row.total dt {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
}

.score-row.total dd {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
}

.summary-panel.victory .score-slip:not(.beyond) .score-row.total dd {
  color: #8a6516;
}

/* Beyond the Margin's own score: a second, smaller tally under the first. */
.score-beyond {
  margin: 0.7rem 0 0.1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--tide);
}

.score-slip.beyond .score-row.total dd {
  font-size: 1.5rem;
  color: var(--tide);
}

.summary-panel.still .score-row {
  animation: none;
}

@media (max-width: 760px) {
  .sum-columns.scored {
    grid-template-columns: 1fr;
  }
}

/* ---------- the debug panel (developer tool: deliberately not in the game's look) ---------- */

.debug-panel {
  position: fixed;
  left: 0.6rem;
  top: 9.6rem;
  z-index: 1500;
  width: 16.5rem;
  padding: 0.5rem 0.6rem 0.45rem;
  font: 600 11.5px/1.45 ui-monospace, Consolas, 'Cascadia Mono', monospace;
  color: #d8dee9;
  background: rgba(14, 18, 26, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  user-select: none;
}

.debug-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  color: #9aa5b8;
}

.debug-fps {
  font-size: 17px;
  font-weight: 800;
}

.debug-fps.good { color: #5fe08a; }
.debug-fps.warn { color: #ffc94d; }
.debug-fps.bad { color: #ff5d4d; }

.debug-graph {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0.35rem 0 0.4rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  image-rendering: pixelated;
}

.debug-panel dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.05rem 0.6rem;
  margin: 0;
}

.debug-panel dt {
  color: #8f9bb0;
  white-space: nowrap;
}

.debug-panel dd {
  margin: 0;
  text-align: right;
  color: #f2f5fa;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.debug-gpu,
.debug-foot {
  margin: 0.4rem 0 0;
  font-weight: 400;
  font-size: 10.5px;
  line-height: 1.3;
  color: #8f9bb0;
  overflow-wrap: anywhere;
}

.debug-foot {
  margin-top: 0.15rem;
  color: #6f7b90;
}

/* The lab panel (developer tool, #scene=lab): plain controls on the right of the page. */
.lab-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1500;
  width: 21rem;
  padding: 0.5rem 0.65rem 1rem;
  overflow-y: auto;
  font: 500 12px/1.4 ui-monospace, Consolas, 'Cascadia Mono', monospace;
  color: #d8dee9;
  background: rgba(14, 18, 26, 0.9);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  pointer-events: auto;
  user-select: none;
  cursor: default;
}

.lab-panel.closed {
  bottom: auto;
  width: auto;
  padding: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom-left-radius: 8px;
}

.lab-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
  color: #9aa5b8;
}

.lab-head strong {
  font-size: 15px;
  color: #ffc94d;
}

.lab-head .lab-toggle {
  margin-left: auto;
}

.lab-panel section {
  padding: 0.45rem 0 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lab-panel h4 {
  margin: 0 0 0.35rem;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fb4ff;
}

.lab-panel h4 small {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #6f7b90;
}

.lab-panel button,
.lab-panel select,
.lab-panel input[type='number'] {
  min-width: 0;
  padding: 0.22rem 0.45rem;
  font: inherit;
  color: #e6ebf5;
  background: #232b3a;
  border: 1px solid #3a465c;
  border-radius: 4px;
}

.lab-panel button {
  cursor: pointer;
}

.lab-panel button:hover:not(:disabled) {
  background: #2f3a50;
  border-color: #6b83b5;
}

.lab-panel button:active:not(:disabled),
.lab-panel button.on {
  background: #3b5ea8;
  border-color: #8fb4ff;
}

.lab-panel button:disabled,
.lab-panel input:disabled {
  opacity: 0.4;
  cursor: default;
}

.lab-panel input[type='number'] {
  width: 4.2rem;
}

.lab-panel input[type='range'] {
  flex: 1;
  min-width: 0;
}

.lab-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.lab-row > select {
  flex: 1;
}

.lab-value {
  width: 2rem;
  text-align: right;
}

.lab-builds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.lab-note {
  margin: 0 0 0.2rem;
  opacity: 0.7;
  line-height: 1.3;
}

.lab-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.8rem;
  margin-bottom: 0.35rem;
}

.lab-checks label,
.lab-weapon label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.lab-weapon {
  display: grid;
  grid-template-columns: 1fr 3rem 5rem auto auto;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}

.lab-weapon input[type='number'] {
  width: 100%;
}

.lab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.6rem;
  margin-bottom: 0.4rem;
}

.lab-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.lab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.lab-foot {
  margin: 0.3rem 0 0;
  color: #6f7b90;
}

/* The line under the title of the "new version" and "what's new" popups. */
.update-lead {
  margin: -0.2rem 0 0.8rem;
  text-align: center;
  font-size: 1.05rem;
}

/* ---------- the tutorial run: its objective, its freeze frames, the guided card pick ---------- */

.keycaps {
  display: inline-flex;
  gap: 0.25rem;
  vertical-align: middle;
}

.keycap {
  min-width: 1.7rem;
  padding: 0.1rem 0.5rem 0.18rem;
  text-align: center;
  font-family: var(--font-ui, inherit);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-light);
  border: 2px solid var(--edge);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--edge);
}

/* The objective: a parchment slip under the stage name. */
.tutorial-run {
  position: fixed;
  top: 6.6rem;
  left: 50%;
  width: min(27rem, 92vw);
  transform: translateX(-50%) rotate(-0.4deg);
  display: grid;
  gap: 0.3rem;
  padding: 0.65rem 1.1rem 0.8rem;
  pointer-events: none;
  background: rgba(248, 239, 217, 0.96);
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: var(--shadow-hard);
  animation: tutorial-run-in 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

@keyframes tutorial-run-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-1.4rem) rotate(-2deg); }
}

.tutorial-run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.tutorial-run-kicker {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-soft);
}

.tutorial-run-pips {
  display: inline-flex;
  gap: 0.3rem;
}

.tutorial-run-pips span {
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid var(--edge);
  border-radius: var(--blob, 50%);
  background: transparent;
}

.tutorial-run-pips span.on {
  background: var(--wax);
}

.tutorial-run-pips span.now {
  background: var(--gold);
  animation: tutorial-pip 1.1s ease-in-out infinite;
}

@keyframes tutorial-pip {
  50% { transform: scale(1.35); }
}

.tutorial-run-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--ink);
}

.tutorial-run-check {
  display: inline-block;
  margin-right: 0.45rem;
  color: #2f7d55;
  animation: tutorial-check 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

@keyframes tutorial-check {
  from { opacity: 0; transform: scale(2.4) rotate(-20deg); }
}

.tutorial-run-text {
  margin: 0;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.35;
}

.tutorial-run-keys,
.coach-do {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.15rem 0 0;
  font-weight: 700;
}

.tutorial-run-bar {
  display: block;
  height: 0.5rem;
  margin-top: 0.25rem;
  background: rgba(74, 58, 36, 0.18);
  border: 1.5px solid var(--edge);
  border-radius: 4px;
  overflow: hidden;
}

.tutorial-run-bar span {
  display: block;
  height: 100%;
  background: var(--wax);
  transition: width 0.18s ease-out;
}

.tutorial-run.done {
  border-color: #2f7d55;
}

.tutorial-run.done .tutorial-run-bar span {
  background: #2f7d55;
}

.tutorial-run.finale {
  border-color: var(--wax);
}

.tutorial-run.finale .tutorial-run-title {
  color: var(--wax);
}

/* The freeze frame: the page dims around a spotlight; a ring pulses on what it points at. */
.coach {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: radial-gradient(ellipse var(--rx) var(--ry) at var(--x) var(--y), transparent 0, transparent 88%, rgba(27, 22, 18, 0.66) 100%);
  animation: coach-in 0.5s ease-in both;
}

@keyframes coach-in {
  from { opacity: 0; }
}

/* In the hall the player keeps walking: the page dims only a little. */
.coach.soft {
  background: radial-gradient(ellipse var(--rx) var(--ry) at var(--x) var(--y), transparent 0, transparent 88%, rgba(27, 22, 18, 0.38) 100%);
}

/* The Compass Rose guide: a note above the point's card says what to do and counts the points;
   on the board everything waits, dimmed, except the points to unlock, which are bigger, glow,
   and have a pointer bobbing over them. */
.compass-guide {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.8rem;
  padding: 0.8rem 1.1rem 0.9rem;
  background: var(--paper-light, #f8efd9);
  border: 3px solid var(--gold);
  border-radius: var(--wobble);
  box-shadow: var(--shadow-hard);
  animation: coach-note-in 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

.compass-guide.done {
  border-color: #2f7d55;
}

.compass-guide-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
}

.compass-guide p {
  margin: 0;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.4;
}

.compass-guide-pips {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.compass-guide-pips span {
  width: 1.05rem;
  height: 1.05rem;
  border: 2.5px solid var(--node);
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s, transform 0.25s cubic-bezier(0.3, 1.8, 0.5, 1);
}

.compass-guide-pips span.on {
  background: var(--node);
  transform: scale(1.15);
}

.compass-guide-pips em {
  margin-left: 0.4rem;
  font-style: normal;
  font-weight: 700;
}

.station-held {
  margin: 0;
  font-style: italic;
}

.compass-board.guiding .compass-node.held {
  opacity: 0.16;
  pointer-events: none;
  animation: none;
  box-shadow: none;
}

.compass-board.guiding .link,
.compass-board.guiding .hub {
  opacity: 0.25;
}

.compass-node.guide {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-width: 3.5px;
  z-index: 2;
  animation: compass-guide 1.1s ease-in-out infinite;
}

@keyframes compass-guide {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244, 210, 122, 0.9), 0 0 0.8rem rgba(244, 210, 122, 0.6); }
  50% { box-shadow: 0 0 0 10px rgba(244, 210, 122, 0.5), 0 0 1.8rem rgba(244, 210, 122, 0.95); }
}

/* A wax-red pointer above each point still to unlock. */
.compass-pointer {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  margin: -46px 0 0 -11px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 18px solid var(--wax);
  filter: drop-shadow(0 2px 0 rgba(27, 22, 18, 0.6));
  pointer-events: none;
  animation: compass-pointer 0.8s ease-in-out infinite;
}

@keyframes compass-pointer {
  50% { transform: translateY(-9px); }
}

.reduced-motion .compass-node.guide,
.reduced-motion .compass-pointer {
  animation: none;
}

.reduced-motion .compass-node.guide {
  box-shadow: 0 0 0 6px rgba(244, 210, 122, 0.9);
}

.coach-ring {
  position: absolute;
  left: calc(var(--x) - var(--rx));
  top: calc(var(--y) - var(--ry));
  width: calc(var(--rx) * 2);
  height: calc(var(--ry) * 2);
  border: 3px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(27, 22, 18, 0.5), 0 0 1.6rem rgba(244, 210, 122, 0.55);
  animation: coach-ring 1.2s ease-in-out infinite;
}

@keyframes coach-ring {
  50% { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(27, 22, 18, 0.5), 0 0 2.6rem rgba(244, 210, 122, 0.85); }
}

.coach-note {
  position: absolute;
  left: clamp(1rem, calc(var(--x) - 13.5rem), calc(100vw - 28rem));
  width: min(27rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.35rem;
  padding: 0.8rem 1.2rem 0.95rem;
  background: var(--paper-light, #f8efd9);
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: var(--shadow-hard);
  animation: coach-note-in 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) 0.1s both;
}

.coach-note.below {
  top: calc(var(--y) + var(--ry) + 1.2rem);
}

.coach-note.above {
  bottom: calc(100vh - var(--y) + var(--ry) + 1.2rem);
}

@keyframes coach-note-in {
  from { opacity: 0; transform: translateY(0.8rem); }
}

.coach-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.15;
}

.coach-text {
  margin: 0;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
}

.coach-do {
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(74, 58, 36, 0.4);
  color: var(--wax);
  animation: coach-do 1.2s ease-in-out infinite;
}

@keyframes coach-do {
  50% { opacity: 0.6; }
}

/* The guided card pick: a note above the cards; what is not its turn yet waits, dimmed. */
.choice-coach {
  max-width: 44rem;
  margin: 0 auto 0.4rem;
  padding: 0.55rem 1.1rem 0.65rem;
  text-align: center;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper-light, #f8efd9);
  border: 2px solid var(--gold);
  border-radius: var(--wobble);
  box-shadow: var(--shadow-hard);
  animation: coach-note-in 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

.choice-wrap.coach-reroll .cards {
  opacity: 0.45;
  filter: saturate(0.6);
  pointer-events: none;
}

.choice-wrap.coach-reroll [data-testid='reroll'] {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  animation: coach-target 1s ease-in-out infinite;
}

@keyframes coach-target {
  50% { outline-offset: 9px; transform: scale(1.06); }
}

.reduced-motion .coach-ring,
.reduced-motion .coach-do,
.reduced-motion .tutorial-run-pips span.now,
.reduced-motion .choice-wrap.coach-reroll [data-testid='reroll'] {
  animation: none;
}

/* ---------- the inks of a run (ui/screens/overlays.tsx: ChoiceOverlay, BuildPanel) ----------
   An Ink Shrine's choice has steps: what the step asks stands under the title, and its weapon
   cards carry the weapon's numbers. Beside the cards every weapon says which ink it carries (a
   Plain one with a dashed edge: a place an ink can go), and three wells show the run's inks. */

.choice-ask {
  margin: -0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--paper-light);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  animation: coach-note-in 0.3s ease-out both;
}

.card-stats {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  width: 100%;
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(74, 58, 36, 0.35);
  font-size: 0.88rem;
}

.card-stat {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.card-stat b {
  font-variant-numeric: tabular-nums;
}

.side-name {
  display: flex;
  flex-direction: column;
}

.side-weapon-ink {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--card-accent);
}

.side-weapon-ink.plain {
  color: var(--text-soft);
  font-weight: 500;
}

.side-weapon.plain {
  border-left: 4px dashed rgba(74, 58, 36, 0.5);
}

.side-inks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.side-ink {
  --kw: var(--text-soft);
  display: grid;
  grid-template-columns: 1.05rem auto 1fr;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.5rem 0.15rem 0.35rem;
  border-radius: 4px 9px 5px 10px / 9px 4px 10px 5px;
  cursor: var(--cursor-hand);
  transition: background 0.15s, transform 0.15s;
}

.side-ink:hover,
html[data-input='pad'] .side-ink.nav-current {
  background: rgba(42, 79, 181, 0.1);
  transform: translateX(3px);
}

.ink-well {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--kw);
  border: 1.5px solid var(--edge);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.side-ink.open .ink-well {
  background: transparent;
  border: 1.5px dashed rgba(74, 58, 36, 0.6);
  box-shadow: none;
}

.side-ink-name {
  font-weight: 700;
  color: var(--kw);
}

.side-ink.open .side-ink-name {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}

.side-ink-on {
  text-align: right;
  font-size: 0.82rem;
  color: var(--text-soft);
}

.reduced-motion .choice-ask {
  animation: none;
}

/* ---------- what a run announces (ui/screens/overlays.tsx: Announce) ----------
   A short band of ink near the top of the screen between two thin gilt rules: the stage, a boss,
   a champion, the Lost Cartographer, an Ink Shrine, the Blank Surge. */

.announce {
  --accent: #e2b955;
  --glow: rgba(226, 185, 85, 0.5);
  --title: #f6e3ae;
  position: fixed;
  left: 0;
  right: 0;
  top: 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem 0.6rem;
  pointer-events: none;
  animation: announce-life 2.8s ease forwards;
}

.announce-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - min(40vw, 19rem));
  right: calc(50% - min(40vw, 19rem));
  /* Wet ink, thinner where the brush ran dry at both ends. */
  background:
    linear-gradient(90deg, transparent 0, rgba(24, 18, 13, 0.6) 14%, rgba(20, 15, 11, 0.9) 34%, rgba(20, 15, 11, 0.92) 66%, rgba(24, 18, 13, 0.6) 86%, transparent 100%);
  transform-origin: 50% 50%;
  animation: announce-band 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.announce-rule {
  position: absolute;
  left: 50%;
  width: min(64vw, 30rem);
  height: 1px;
  margin-left: calc(min(64vw, 30rem) / -2);
  background: linear-gradient(90deg, transparent, var(--accent) 14%, #fff4cf 50%, var(--accent) 86%, transparent);
  box-shadow: 0 0 8px var(--glow);
  animation: announce-rule 0.7s 0.06s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.announce-rule.top { top: 0; }
.announce-rule.bottom { bottom: 0; }

/* A lozenge in the middle of each rule, as on a map's border. */
.announce-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.36rem;
  height: 0.36rem;
  margin: -0.18rem 0 0 -0.18rem;
  background: var(--accent);
  box-shadow: 0 0 0 2px #17110c, 0 0 8px var(--glow);
  transform: rotate(45deg);
}

.announce-title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.15;
  color: var(--title);
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 18px var(--glow);
  animation: announce-title 0.65s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.announce-sub {
  position: relative;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  color: rgba(244, 232, 204, 0.78);
  text-align: center;
  animation: announce-sub 0.5s 0.3s ease both;
}

/* What each kind is told apart by: the colour of its rules and glow. */
.announce-boss { --accent: #e2503f; --glow: rgba(226, 80, 63, 0.55); --title: #ffe6d8; }
.announce-champion { --accent: #f0a23a; --glow: rgba(240, 162, 58, 0.55); --title: #ffe9bd; }
.announce-cartographer { --accent: #74c8c2; --glow: rgba(116, 200, 194, 0.5); --title: #e6fbf6; }
.announce-surge { --accent: #f6f2e6; --glow: rgba(255, 255, 255, 0.55); --title: #ffffff; }
.announce-flood { --accent: #8a7bd6; --glow: rgba(138, 123, 214, 0.5); --title: #ece8ff; }
.announce-arrival { --accent: #c8452f; --glow: rgba(200, 69, 47, 0.5); --title: #ffe9df; }
.announce-shrine { --accent: #86aef0; --glow: rgba(134, 174, 240, 0.5); --title: #e6efff; }
/* (A card taken in a replay: parchment.) */
.announce-card { --accent: #d8c79c; --glow: rgba(216, 199, 156, 0.45); --title: #fbf2da; }

@keyframes announce-life {
  0% { opacity: 0; }
  7% { opacity: 1; }
  82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes announce-band {
  from { opacity: 0; transform: scaleX(0.35); }
  to { opacity: 1; transform: none; }
}

@keyframes announce-rule {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: none; }
}

@keyframes announce-title {
  from { opacity: 0; letter-spacing: 0.2em; transform: translateY(4px); }
  to { opacity: 1; letter-spacing: 0.03em; transform: none; }
}

@keyframes announce-sub {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.reduced-motion .announce,
.reduced-motion .announce * {
  animation: none;
}

.reduced-motion .announce {
  animation: announce-fade 2.8s linear forwards;
}

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

/* The Compass Rose: how much is bought, with "take back all points" beside it. */
.compass-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.compass-total .build-title {
  margin-bottom: 0;
}

.compass-total .btn {
  padding: 0.2rem 0.7rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ---------- watching a replay (ui/replaybar.tsx) ----------
   A strip of parchment under the run: play, jump, speed, leave. And the list in the Codex. */

.replay-bar {
  position: fixed;
  left: 50%;
  bottom: 5.4rem;
  transform: translateX(-50%);
  width: min(54rem, 92vw);
  /* (The layer over the run lets clicks through to it; this strip takes them.) */
  pointer-events: auto;
  padding: 0.45rem 0.7rem 0.3rem;
  background: rgba(248, 239, 217, 0.94);
  border: 2px solid var(--edge);
  border-radius: 4px;
  box-shadow: 0 3px 0 rgba(27, 22, 18, 0.25);
  color: var(--ink);
  font-family: var(--font-italic);
}

.replay-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.replay-tag {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--wax);
  margin-right: 0.2rem;
}

.replay-btn {
  min-width: 2.2rem;
  padding: 0.15rem 0.45rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper-light);
  border: 1.5px solid var(--edge);
  border-radius: 3px;
  cursor: pointer;
}

.replay-btn.wide {
  min-width: 4.6rem;
}

.replay-btn:hover {
  background: var(--paper-dark);
}

.replay-btn:active {
  transform: translateY(1px);
}

.replay-track {
  position: relative;
  flex: 1;
  height: 0.8rem;
  background: var(--paper-dark);
  border: 1.5px solid var(--edge);
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
}

.replay-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--wax);
}

.replay-bar.paused .replay-fill {
  background: var(--text-soft);
}

.replay-time,
.replay-speed {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.replay-speed {
  min-width: 2.4rem;
  text-align: center;
}

.replay-note {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-soft);
}

.replay-drift {
  color: var(--wax);
}

.replay-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.replay-entry {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0.7rem;
  background: var(--paper-light);
  border: 1.5px solid var(--edge);
  border-radius: 4px;
}

.replay-what {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.replay-how {
  white-space: nowrap;
}

/* The run's id at the foot of the replay's menu: small, a click copies it. */
.replay-run-id {
  display: block;
  margin: 0.8rem auto 0;
  padding: 0.1rem 0.4rem;
  /* (As on the run summary: an id is read letter by letter.) */
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  background: none;
  border: 0;
  cursor: pointer;
}

.replay-run-id:hover {
  color: var(--ink);
}

/* "Coming soon": a small wax-red tag (Gate tabs, the Daily and Weekly pages). */
.tab-tag,
.soon-tag {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  font-family: var(--font-ui, inherit);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff7e6;
  background: var(--wax);
  border-radius: 999px;
  box-shadow: 1px 1px 0 rgba(27, 22, 18, 0.35);
}

.tab-tag {
  margin-left: 0.45rem;
  vertical-align: middle;
  transform: rotate(-3deg);
}

.mode-info.mode-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2rem 1.2rem;
  text-align: center;
  color: var(--text-soft);
  background: repeating-linear-gradient(-45deg, rgba(74, 58, 36, 0.05) 0 12px, transparent 12px 24px), rgba(255, 250, 240, 0.5);
}

.mode-info.mode-soon h3 {
  color: var(--text-soft);
}

.mode-soon-lock {
  width: 2.4rem;
  height: 2.4rem;
  opacity: 0.6;
}

.mode-info.mode-soon .soon-tag {
  font-size: 0.8rem;
  padding: 0.12rem 0.7rem;
}

/* Leaderboards: score boards (a stage's, and its Beyond the Margin board). The panel keeps its
   head, your own best and the way back in view; only the list of rows scrolls (the panel itself
   does only in a window too low for all of that). */
.boards-panel > * {
  flex: none;
}

.board-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0.2rem 0 0.5rem;
}

.board-count {
  margin: 0.1rem 0 0.4rem;
  font-size: 0.9rem;
}

.boards-panel > .board-list {
  flex: 0 1 auto;
  min-height: 5rem;
  margin: 0.2rem 0 0.6rem;
  padding: 0.15rem 0.5rem 0.25rem 0.15rem;
  overflow-y: auto;
  align-content: start;
}

.board-row {
  grid-template-columns: 2.6rem 1fr 8.2rem 6.2rem 5.6rem 1.8rem;
  cursor: default;
  outline: none;
}

.board-row:focus-visible,
html[data-input='pad'] .board-row.nav-current {
  background: rgba(255, 250, 240, 0.95);
  border-color: var(--ink);
  transform: translateX(3px);
}

.board-character {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

/* The run's Blank Pressure: a stamped slip that names its tags when pointed at. */
.board-tags {
  justify-self: start;
  padding: 0.05rem 0.5rem;
  font-family: var(--font-display);
  font-size: 0.86rem;
  white-space: nowrap;
  color: #f3e9f7;
  background: #3b2f45;
  border-radius: var(--wobble);
  box-shadow: 1px 2px 0 rgba(27, 22, 18, 0.35);
}

.board-tags.none {
  color: var(--text-soft);
  background: none;
  box-shadow: none;
}

.board-tag-list {
  max-width: 19rem;
}

.board-tag-list strong {
  font-family: var(--font-display);
  font-weight: 400;
}

.board-result {
  font-family: var(--font-display);
  font-size: 1.2rem;
}

/* Your own best, pinned above the list. */
.board-mine {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0 0.5rem 0.45rem 0.15rem;
  border-bottom: 2px dashed rgba(74, 58, 36, 0.35);
}

.board-mine-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6516;
}

.board-mine-none {
  font-size: 0.92rem;
  padding: 0.4rem 0;
}

.board-row.pinned {
  border-bottom-style: solid;
}

/* A stage card at the Gate: the journal's best score there, in the card's top corner (where a
   locked card has its lock), so the card grows no taller. */
.stage-score {
  position: absolute;
  top: 0.42rem;
  right: 0.65rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.1;
  white-space: nowrap;
  color: #8a6516;
}

.stage-card.selected .stage-score {
  color: #6f4f0c;
}

/* The score slip on a run's card: a line each, the multiplier, the total under a rule. */
.run-card-tags {
  margin: -0.15rem 0 0;
}

.run-card-slip {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 0.35rem 0;
  border-top: 1px dashed rgba(74, 58, 36, 0.4);
  border-bottom: 1px dashed rgba(74, 58, 36, 0.4);
}

.run-card-slip div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.9rem;
}

.run-card-slip dt small {
  margin-left: 0.4rem;
  font-size: 0.74rem;
  color: var(--text-soft);
}

.run-card-slip dd {
  margin: 0;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.run-card-slip .zero {
  color: var(--text-soft);
}

.run-card-slip .mult dd {
  color: #3b2f45;
}

.run-card-slip .total {
  margin-top: 0.15rem;
  padding-top: 0.2rem;
  border-top: 1.5px solid rgba(74, 58, 36, 0.55);
  font-size: 1rem;
}

.run-card-slip .total dd {
  font-size: 1.15rem;
  color: #8a6516;
}

/* (A run's card is wider than a tooltip's usual text.) */
.tooltip:has(.run-card) {
  max-width: min(23rem, 94vw);
}

.run-card {
  width: 20.5rem;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.run-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.8rem;
  align-items: baseline;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed rgba(74, 58, 36, 0.4);
}

.run-card-head strong {
  font-family: var(--font-book);
  font-size: 1.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-card-head .soft {
  grid-column: 1;
  font-size: 0.85rem;
}

.run-card-result {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  white-space: nowrap;
}

.run-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem 0.6rem;
  margin: 0;
}

.run-card-stats div {
  display: flex;
  flex-direction: column;
}

.run-card-stats dt {
  font-size: 0.68rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.run-card-stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.run-card-weapons {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0 0;
  display: grid;
  gap: 0.2rem;
  border-top: 1px dashed rgba(74, 58, 36, 0.4);
}

.run-card-weapons li {
  display: grid;
  grid-template-columns: 0.7rem 1fr auto 3.4rem 3.4rem;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.9rem;
}

.run-card-weapons li.evolved .run-card-weapon {
  color: #8a6516;
  font-weight: 700;
}

.run-card-weapon {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-card-bar {
  height: 0.4rem;
  background: rgba(74, 58, 36, 0.18);
  border-radius: 999px;
  overflow: hidden;
}

.run-card-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.run-card-damage {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.run-card-list {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

/* The Codex's statistics page: three sheets of figures. */
.stats-page {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.stats-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
}

.stats-group {
  padding: 0.6rem 0.9rem 0.7rem;
  background: var(--grain), var(--paper-light);
  border: 1.5px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: 2px 3px 0 rgba(27, 22, 18, 0.2);
  animation: slip-in 0.3s both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.stats-group .group-title {
  margin-top: 0;
}

.stats-group dl {
  margin: 0;
  display: grid;
  gap: 0.15rem;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.18rem 0;
  border-bottom: 1px dashed rgba(74, 58, 36, 0.25);
}

.stats-row:last-child {
  border-bottom: none;
}

.stats-row dt {
  color: var(--text-soft);
}

.stats-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .stats-groups {
    grid-template-columns: 1fr;
  }
}

/* ---------- the account: signing in, the name with its digits, two accounts ---------- */

/* A name with its four digits: the name reads first, the digits stand back. */
.handle-tag {
  margin-left: 0.04em;
  font-weight: 400;
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
  opacity: 0.58;
}

.signin-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.settings-body .signin-buttons {
  justify-content: flex-start;
  margin: 0.4rem 0 0.9rem;
}

/* A way to sign in: the game's own button. Google's carries its mark on white, as its rules ask. */
.provider-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.12rem;
  padding: 0.5rem 1.1rem;
  background-color: #f9f0da;
}

.provider-btn.provider-google {
  background: #fff;
  color: #1f1f1f;
}

.provider-btn:hover:not(:disabled),
html[data-input='pad'] .provider-btn.nav-current:not(:disabled) {
  box-shadow: 5px 5px 0 rgba(27, 22, 18, 0.85), 0 0 0 3px rgba(244, 210, 122, 0.45);
}

.provider-mark {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}

/* The title screen: who is signed in, or the ways to sign in, under the menu. */
.title-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  animation: page-in 0.4s 1.5s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

.title-account p {
  margin: 0;
}

.title-account .handle {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
}

.title-account .provider-btn {
  font-size: 1rem;
  padding: 0.38rem 0.9rem;
}

.title-signin-why {
  max-width: 30rem;
  margin-top: 0.3rem;
  padding: 0.05rem 0.7rem;
  border-radius: 0.8rem;
  background: radial-gradient(ellipse at center, rgba(247, 237, 214, 0.9) 55%, rgba(247, 237, 214, 0) 100%);
  font-family: var(--font-book);
  font-style: italic;
  font-size: 0.98rem;
  text-align: center;
}

.name-dialog .screen-title {
  font-size: 1.9rem;
  white-space: nowrap;
}

.name-dialog > .btn-ghost {
  margin-top: 0.6rem;
}

.settings-body p.soft {
  font-family: var(--font-book);
  font-size: 1.12rem;
}

/* The title screen while the server is closed for maintenance: a slip above the menu. */
.title-closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  max-width: 26rem;
  margin: 0 0 0.4rem;
  padding: 0.6rem 1rem 0.7rem;
  font-family: var(--font-book);
  font-size: 1.08rem;
  line-height: 1.35;
  text-align: center;
  background: var(--grain), #fbf4e2;
  border: 2px solid var(--wax);
  border-radius: var(--wobble);
  box-shadow: 3px 3px 0 rgba(27, 22, 18, 0.28);
}

.title-closed strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--wax);
}

/* The example in the username dialog. */
.name-dialog > p.name-demo {
  margin: 0.1rem 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1.2;
}

/* Two accounts, keep one: each on a slip of its own. */
.keep-dialog {
  width: min(46rem, 94vw);
  text-align: center;
}

.keep-dialog > p {
  font-family: var(--font-book);
  font-size: 1.12rem;
  line-height: 1.45;
}

.keep-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  margin: 0.6rem 0 1rem;
}

.keep-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.9rem 1rem 1rem;
  font-family: var(--font-book);
  font-size: 1.12rem;
  background: var(--grain), #fbf4e2;
  border: 2px solid var(--edge);
  border-radius: var(--wobble);
  box-shadow: 3px 3px 0 rgba(27, 22, 18, 0.28);
}

.keep-card.mine {
  border-color: var(--ink);
}

.keep-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.keep-card p {
  margin: 0;
}

.keep-card .btn {
  margin-top: 0.7rem;
  font-size: 1.1rem;
}

@media (max-width: 700px) {
  .keep-cards {
    grid-template-columns: 1fr;
  }
}

/* Settings → Account: the sign-in methods and the devices, a line each. */
.account-list {
  display: grid;
  gap: 0.1rem;
  margin: 0.2rem 0 0.8rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-book);
  font-size: 1.14rem;
}

.account-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.1rem;
  border-bottom: 1px dashed rgba(74, 58, 36, 0.25);
}

.account-list li:last-child {
  border-bottom: none;
}

.account-list .btn {
  font-size: 1rem;
  padding: 0.28rem 0.8rem;
}