/* Chronik: the diegetic layer on top of style.css. Every menu is an object
   of the world: the hero's chronicle book, the merchant's counter, the
   storage chest, a letter, the map table at the Echotor. Leather and soot
   for surfaces, brass for structure, parchment for content, ember only for
   what the player can act on right now. Loaded after style.css, so rules
   here win at equal specificity. Every class of this layer starts with
   "ck-". Rules: docs/UI-STYLE.md, section "Chronik". */

:root {
  /* parchment (content) and ink on it */
  --parch: #f1e5c8;
  --parch-2: #e7d6b0;
  --parch-3: #d9c395;
  --parch-edge: #b89a66;
  --ink: #2b1e14;
  --ink-2: #4e3b28;
  --ink-3: #6b563e;
  --ink-line: rgba(60, 40, 22, 0.28);
  --ink-line-2: rgba(60, 40, 22, 0.5);
  /* leather (book cover, belt), wood (tables, chests), cloth (merchant) */
  --leather: #3b2418;
  --leather-hi: #5b3924;
  --leather-lo: #1f130c;
  --wood: #4a2f1c;
  --wood-hi: #6b4527;
  --wood-lo: #2a1a0f;
  --cloth: #5a3024;
  --cloth-lo: #351b13;
  --brass-hi: #f0d29a;
  /* wax seals (primary action, rank seals) */
  --wax: #8e1f1a;
  --wax-hi: #c23a2c;
  /* dark variants for text on parchment (contrast >= 4.5 : 1) */
  --ember-deep: #b4480f;
  --good-ink: #2d7236;
  --bad-ink: #a1312a;
  --gold-ink: #8a5a00;
  --echo-deep: #1d6f66;
  --info-ink: #2a63a8;
  --life: #d8404a;
  --fokus: #4fc3d9;
  /* rarity on parchment: the item colour (--rc, dark background) mixed
     with ink, so one inline value serves both grounds */
  --rci: color-mix(in srgb, var(--rc, var(--ink-3)) 62%, var(--ink));
}

/* --- Materials ------------------------------------------------------------- */
.ck-paper {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 50%),
    radial-gradient(ellipse at 90% 95%, rgba(150, 110, 60, 0.22), rgba(150, 110, 60, 0) 55%),
    linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, 0.35), inset 0 0 24px rgba(140, 100, 50, 0.22);
  scrollbar-color: rgba(90, 60, 30, 0.45) transparent;
}

.ck-leather {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 210, 150, 0.1), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, var(--leather-hi), var(--leather) 40%, var(--leather-lo));
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.55);
}

.ck-wood {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 17px, rgba(0, 0, 0, 0.08) 17px 18px, rgba(255, 210, 160, 0.03) 18px 45px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 30%, var(--wood-lo));
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* merchant's cloth on the counter: fine weave, fringe at the bottom */
.ck-cloth {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 2px, rgba(0, 0, 0, 0) 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 0 2px, rgba(0, 0, 0, 0) 2px 5px),
    linear-gradient(180deg, var(--cloth), var(--cloth-lo));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 30px rgba(0, 0, 0, 0.35);
}

.ck-iron {
  background: linear-gradient(180deg, rgba(40, 32, 26, 0.94), rgba(18, 14, 11, 0.94));
  border: 1px solid rgba(214, 176, 122, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.08), 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* brass rivets in the top corners of a plate */
.ck-rivets {
  position: relative;
}

.ck-rivets::before,
.ck-rivets::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-hi), var(--brass-lo) 70%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.ck-rivets::before {
  left: 5px;
}

.ck-rivets::after {
  right: 5px;
}

/* --- Text on parchment ------------------------------------------------------ */
.ck-paper .eyebrow {
  color: var(--ink-3);
}

.ck-paper .muted,
.ck-paper small {
  color: var(--ink-3);
}

.ck-paper .up,
.ck-paper em.up {
  color: var(--good-ink);
}

.ck-paper .down,
.ck-paper em.down {
  color: var(--bad-ink);
}

.ck-paper .gold {
  color: var(--gold-ink);
}

.ck-paper .warn {
  color: var(--bad-ink);
}

.ck-paper h3 {
  font: 700 var(--fs-3xl) / 1.05 var(--display);
  color: var(--ink);
}

/* section heading: ink caps, then a rule that fades to the right */
.ck-paper h4,
.ck-h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 6px;
  font: 700 var(--fs-xs) / 1 var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ck-paper h4::after,
.ck-h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ink-line-2), rgba(0, 0, 0, 0));
}

.ck-paper h4 small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.ck-title {
  font: 700 var(--fs-4xl) / 1 var(--display);
  color: var(--ink);
  margin: 1px 0 0;
}

/* rows on parchment: ink hairline below */
.ck-rows > * {
  border-bottom: 1px solid var(--ink-line);
}

/* --- Buttons on parchment --------------------------------------------------- */
.ck-paper .btn {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 250, 235, 0.75), rgba(225, 205, 165, 0.75));
  border: 1px solid var(--ink-line-2);
  --elev: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(60, 40, 20, 0.2);
}

@media (hover: hover) {
  .ck-paper .btn:not([disabled]):hover {
    background: linear-gradient(180deg, #fffaf0, #eadbb8);
    border-color: var(--ink-2);
  }
}

.ck-paper .btn:not([disabled]):active {
  background: rgba(200, 175, 130, 0.7);
  --elev: inset 0 1px 3px rgba(60, 40, 20, 0.35);
}

.ck-paper .btn.danger {
  color: #fff0e8;
  background: linear-gradient(180deg, #a3392d, #6d1e17);
  border-color: #4a120d;
}

/* primary = ember with a wax seal: the one main action, bottom right */
.btn.primary.ck-go,
.ck-paper .btn.primary {
  color: #2a1204;
  border: 1px solid #8a3f0c;
  background: linear-gradient(180deg, #ffc27a, var(--ember) 45%, #e0701f);
  --elev: inset 0 1px 0 rgba(255, 240, 210, 0.7), 0 2px 0 #6a2e08, 0 3px 10px rgba(255, 120, 30, 0.35);
  font-weight: 700;
}

@media (hover: hover) {
  .btn.primary.ck-go:not([disabled]):hover,
  .ck-paper .btn.primary:not([disabled]):hover {
    background: linear-gradient(180deg, #ffd49a, #ffa550 45%, #e8792a);
    border-color: #6a2e08;
  }
}

.ck-seal {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--wax-hi), var(--wax) 70%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 200, 170, 0.25), 0 1px 1px rgba(0, 0, 0, 0.4);
  color: #ffd9c0;
  font: 900 var(--fs-xs) / 1 var(--display);
  text-shadow: none;
}

/* key caps on parchment: dark leather caps */
.ck-paper .kbd:not(.kbd-pad) {
  color: var(--parch);
  background: linear-gradient(180deg, #5b3b26, #36231a);
  box-shadow: inset 0 -2px 0 #140c07;
}

/* tags on parchment */
.ck-paper .tag {
  background: rgba(120, 90, 50, 0.14);
  color: var(--ink-2);
  border: 1px solid var(--ink-line);
}

.ck-paper .tag.alt {
  background: rgba(29, 111, 102, 0.12);
  color: var(--echo-deep);
  border-color: rgba(29, 111, 102, 0.35);
}

/* chips on parchment (filters, tiers): ink pill, on = ink with ember bar */
.ck-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font: 600 var(--fs-sm) / 1 var(--ui);
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--ink-line-2);
  white-space: nowrap;
  --elev: 0 0 #0000;
}

.ck-chip small {
  font-size: var(--fs-tiny);
  opacity: 0.8;
  color: inherit;
}

.ck-chip.on {
  background: var(--ink);
  color: var(--parch);
  border-color: var(--ink);
  --elev: inset 0 -3px 0 var(--ember);
  box-shadow: var(--elev);
}

@media (hover: hover) {
  .ck-chip:not(.on):not([disabled]):hover {
    background: rgba(120, 90, 50, 0.14);
    border-color: var(--ink-2);
  }
}

/* --- Item cells on parchment ------------------------------------------------ */
.ck-paper .gcell,
.ck-paper .gslot,
.ck-paper .rune,
.ck-cell {
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.4), rgba(120, 90, 50, 0.18));
  border: 1px solid var(--rci, var(--ink-line-2));
  --elev: inset 0 0 0 2px color-mix(in srgb, var(--rci) 28%, transparent);
  box-shadow: var(--elev);
  color: var(--ink);
}

.ck-paper .gcell:not([style*="--rc"]),
.ck-paper .gslot:not([style*="--rc"]) {
  border-color: var(--ink-line-2);
  --elev: 0 0 #0000;
}

.ck-paper .gcell.empty {
  background: rgba(120, 90, 50, 0.07);
  border: 1px dashed var(--ink-line);
  --elev: 0 0 #0000;
}

.ck-paper .gcell.sel,
.ck-paper .gslot.sel,
.ck-paper .rune.sel {
  border-color: var(--ember-deep);
  --elev: inset 0 0 0 2px var(--ember), inset 0 0 10px rgba(255, 154, 60, 0.45);
}

/* --- Focus on parchment: ink ring with a light gap and ember glow ----------- */
.ck-paper .nav.is-focus,
.ck-paper .nav:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 248, 230, 0.95), 0 0 12px 4px rgba(255, 140, 40, 0.6), var(--elev, 0 0 #0000);
}

/* --- Portrait medallion (NPC, hero) ----------------------------------------- */
.ck-medal {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #4a3526, #1c130d);
  box-shadow: 0 0 0 1.5px var(--brass-lo), 0 0 0 3px #1a120c, 0 0 0 4px var(--brass), 0 3px 8px rgba(0, 0, 0, 0.6);
}

/* --- Rank seal (S–D) in wax ------------------------------------------------- */
.ck-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--wax-hi), var(--wax) 72%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 200, 170, 0.22), 0 1px 2px rgba(0, 0, 0, 0.45);
  color: #ffe2cc;
  font: 700 var(--fs-md) / 1 var(--display);
}

.ck-rank.r-S {
  background: radial-gradient(circle at 40% 35%, #ffe08a, #b7801a 72%);
  color: #3a2200;
}

/* --- Speech note next to an NPC -------------------------------------------- */
.ck-quote {
  position: relative;
  display: inline-block;
  max-width: 300px;
  padding: 5px 10px;
  border-radius: 4px 12px 12px 12px;
  font: italic 500 var(--fs-sm) / 1.3 var(--ui);
  color: var(--ink);
  background: linear-gradient(180deg, var(--parch), var(--parch-2));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.ck-quote::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--parch);
}

.ck-quote:empty {
  display: none;
}

/* --- Hint strip at the foot of an object ------------------------------------ */
.ck-hints {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(14, 10, 8, 0.86);
  border: 1px solid rgba(214, 176, 122, 0.3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  white-space: nowrap;
}

.ck-hints > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ck-hints .note {
  color: var(--text-3);
}

/* --- Motion: objects slide in (<= 200 ms), none with reduced motion --------- */
@keyframes ck-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.ck-in {
  animation: ck-in 0.18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ck-in {
    animation: none;
  }
}

/* === The Chronik book ======================================================
   A leather cover with two parchment pages and register tabs on the right
   edge. Stage px: the book fills the stage height (540) minus the hint
   strip, and up to 1010 px of its width (wider stages on phones). */
.ck-over {
  display: block;
  background: radial-gradient(ellipse at 50% 50%, rgba(8, 6, 4, 0.55), rgba(5, 3, 2, 0.82) 100%);
}

.ck-book {
  position: absolute;
  top: 8px;
  bottom: 22px;
  left: 50%;
  width: min(calc(100% - 100px), 1010px);
  transform: translateX(calc(-50% - 24px));
  box-sizing: border-box;
  padding: 9px 10px;
  border-radius: 10px;
}

/* brass corners of the cover */
.ck-book::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--brass) 0 10px, transparent 10px) top left / 22px 22px no-repeat,
    linear-gradient(225deg, var(--brass) 0 10px, transparent 10px) top right / 22px 22px no-repeat,
    linear-gradient(45deg, var(--brass) 0 10px, transparent 10px) bottom left / 22px 22px no-repeat,
    linear-gradient(315deg, var(--brass) 0 10px, transparent 10px) bottom right / 22px 22px no-repeat;
  opacity: 0.85;
}

.ck-spread {
  position: relative;
  display: flex;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.ck-page {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 14px 18px 12px;
  overflow: hidden;
}

.ck-page.ck-l {
  border-radius: 5px 0 0 5px;
}

.ck-page.ck-r {
  border-radius: 0 5px 5px 0;
}

/* gutter shadow on both pages, a seam in the middle */
.ck-page.ck-l::after,
.ck-page.ck-r::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
}

.ck-page.ck-l::after {
  right: 0;
  background: linear-gradient(90deg, rgba(90, 60, 30, 0), rgba(70, 45, 20, 0.26));
}

.ck-page.ck-r::before {
  left: 0;
  background: linear-gradient(270deg, rgba(90, 60, 30, 0), rgba(70, 45, 20, 0.28));
}

.ck-gutter {
  flex: none;
  width: 2px;
  background: rgba(60, 40, 20, 0.35);
}

.ck-who {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ck-who > span {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* scroll areas on a page */
.ck-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* register tabs sticking out of the right edge */
.ck-register {
  position: absolute;
  right: -46px;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ck-reg {
  position: relative;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  padding: 3px 2px 3px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, #2a190f, #4a2e1c 40%, #3a2416);
  --elev: inset -1px 0 0 rgba(255, 220, 170, 0.12), 2px 2px 6px rgba(0, 0, 0, 0.5);
  box-shadow: var(--elev);
  color: var(--text-2);
  font: 600 var(--fs-tiny) / 1.05 var(--ui);
  text-align: center;
}

.ck-reg .ck-rn {
  max-width: 100%;
  overflow-wrap: normal;
  hyphens: manual;
}

.ck-reg [data-icon] {
  display: inline-flex;
  opacity: 0.85;
}

.ck-reg.on {
  width: 56px;
  margin-left: -6px;
  padding-left: 12px;
  color: var(--ink);
  background: linear-gradient(90deg, var(--parch-2), var(--parch) 60%);
  --elev: inset 3px 0 0 var(--ember), 2px 2px 6px rgba(0, 0, 0, 0.5);
}

.ck-reg.on [data-icon] {
  opacity: 1;
}

@media (hover: hover) {
  .ck-reg:not(.on):hover {
    color: var(--text-1);
    background: linear-gradient(90deg, #3a2416, #5b3924 40%, #4a2e1c);
  }
}

.ck-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 13px;
  height: 13px;
  box-sizing: border-box;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--ember);
  color: var(--text-on-ember);
  font: 800 var(--fs-tiny) / 13px var(--ui);
  font-style: normal;
}

.ck-reg.ck-close {
  margin-top: 6px;
  color: #ffe0d0;
  background: linear-gradient(90deg, #5a1511, #9a2d24 50%, #7a1c16);
}

.ck-x {
  font: 800 var(--fs-2xl) / 0.8 var(--ui);
}

/* hint strip: over the lower edge of the cover */
.ck-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.ck-foot .ck-hints {
  pointer-events: auto;
}

.ck-foot .ck-hints:empty {
  display: none;
}

/* touch: bigger register tabs for the thumb, no key hints */
html.touch-ui .ck-book {
  bottom: 8px;
  width: min(calc(100% - 100px), 1060px);
  transform: translateX(calc(-50% - 24px));
}

html.touch-ui .ck-register {
  right: -48px;
  top: 12px;
}

html.touch-ui .ck-reg {
  width: 52px;
  height: 54px;
  font-size: var(--fs-xs);
}

html.touch-ui .ck-reg.on {
  width: 58px;
}

html.touch-ui .ck-foot {
  display: none;
}

/* === Chronik · Ausrüstung ================================================= */
.gear .gw-doll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr);
  align-items: start;
  gap: 0 4px;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: 0;
}

.gear .gw-doll-l,
.gear .gw-doll-r {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gw-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.gw-doll-r .gw-slot {
  flex-direction: row-reverse;
  text-align: right;
}

.gear .gslot {
  flex: none;
  width: 38px;
  height: 38px;
}

.ck-paper .gslot .gs-empty {
  color: var(--ink-3);
  font-size: 7px;
}

.gw-st {
  min-width: 0;
  font-size: var(--fs-tiny);
  line-height: 1.2;
  color: var(--ink-3);
}

.gw-st b {
  font-size: var(--fs-sm);
  line-height: 1.15;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gw-st em {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--ember-deep);
}

.gw-slot.swap .gslot {
  --elev: 0 0 0 2px var(--parch), 0 0 0 4px var(--ember), 0 0 10px rgba(255, 154, 60, 0.6);
}

.gw-figbox {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.gear .gw-fig {
  width: 118px;
  height: 168px;
}

.gear .gw-power {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}

.gear .gw-power b {
  display: block;
  font: 700 var(--fs-3xl) / 1 var(--display);
  color: var(--ink);
}

.gear .gw-toggle {
  align-self: flex-end;
  margin-top: 4px;
  padding: 3px 6px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  font: 600 var(--fs-xs) / 1.2 var(--ui);
}

.gear .gw-sh {
  margin: 6px 0 2px;
}

.gear .gw-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  margin: 0;
  font-size: var(--fs-sm);
}

.gear .gw-stats div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px solid var(--ink-line);
}

.gear .gw-stats dt {
  color: var(--ink-2);
}

.gear .gw-stats dd {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}

.gear .gw-stats .pv {
  background: linear-gradient(90deg, rgba(45, 114, 54, 0.1), rgba(45, 114, 54, 0));
}

.gear .gw-stats .nv {
  background: linear-gradient(90deg, rgba(161, 49, 42, 0.1), rgba(161, 49, 42, 0));
}

.gw-pvnote {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.gw-pvnote b {
  color: var(--ink-2);
}

.gear .gw-stack {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  border-top: 1px solid var(--ink-line-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.gear .gw-stack > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.gear .gw-stack b {
  color: var(--ink);
}

.gear .gw-stack .gold b {
  color: var(--gold-ink);
}

/* right page: bag and item sheet */
.gw-baghead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.gw-baghead h3 {
  font-size: var(--fs-3xl);
}

.gear .gw-count {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.gear .gw-count b {
  color: var(--ink);
}

.gear .gw-filter {
  display: flex;
  gap: 5px;
  margin: 6px 0;
  flex-wrap: wrap;
}

.gear .gw-gridbox {
  flex: 0 1 auto;
  min-height: 72px;
  margin: 0 -4px;
  padding: 3px 4px;
}

.gear .gw-grid {
  grid-template-columns: repeat(10, 34px);
  grid-auto-rows: 34px;
  gap: 4px;
  justify-content: start;
}

.gear .gcell {
  width: 34px;
  height: 34px;
}

.ck-paper .gp {
  color: var(--ink);
  text-shadow: 0 0 3px #fff8e8, 0 0 2px #fff8e8;
}

.ck-paper .gcell .glv {
  color: var(--bad-ink);
  text-shadow: 0 0 3px #fff8e8;
}

.ck-paper .gcell.locked {
  border-color: var(--bad-ink);
}

.ck-paper .gcell .gw {
  box-shadow: 0 0 0 1.5px var(--parch);
}

.gear .gw-hint {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

html.touch-ui .gw-how {
  display: none;
}

/* the item sheet */
.gear .gw-detail {
  display: block;
  overflow: visible;
  position: static;
  width: auto;
  margin-top: 8px;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 250, 235, 0.45);
  box-shadow: inset 0 0 0 1px var(--ink-line-2);
  color: var(--ink);
  flex: none;
}

.gear .gw-detail.empty .muted {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.gear .gw-detail.empty .muted + .muted {
  margin-top: 4px;
  font-size: var(--fs-xs);
}

.gear .gd-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.gd-cell {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.4), rgba(120, 90, 50, 0.18));
  border: 1px solid var(--rci);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rci) 28%, transparent);
}

.gd-head {
  flex: 1;
  min-width: 0;
}

.gear .gd-name {
  font: 700 var(--fs-2xl) / 1.05 var(--display);
  color: var(--rci);
  margin: 0;
  padding: 0;
  border: 0;
}

.gear .gd-meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.gear .gd-meta b {
  color: var(--rci);
}

.gear .gd-classes {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 18px);
  gap: 2px;
  margin: 0;
}

.gear .gd-cls {
  width: 18px;
  height: 18px;
}

.gd-cmp {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.gd-cmp th {
  padding: 0 0 2px;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

.gd-cmp th:first-child,
.gd-cmp td:first-child {
  text-align: left;
}

.gd-cmp td {
  padding: 2px 0;
  border-top: 1px solid var(--ink-line);
  text-align: right;
  white-space: nowrap;
}

.gd-cmp td:first-child {
  color: var(--ink-2);
}

.gd-cmp td.v {
  font-weight: 700;
}

.gd-cmp td.o {
  color: var(--ink-3);
}

.gd-cmp em {
  font-style: normal;
  font-weight: 700;
}

.gd-cmp tr.sum td {
  border-top: 1px solid var(--ink-line-2);
  font-weight: 700;
  color: var(--ink);
}

.gd-note {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.gear .gd-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.gd-val {
  margin-left: auto;
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--ink-3);
  text-align: right;
}

html.touch-ui .gear .gw-grid {
  grid-template-columns: repeat(9, 42px);
  grid-auto-rows: 42px;
}

html.touch-ui .gear .gcell,
html.touch-ui .gear .gslot {
  width: 42px;
  height: 42px;
}

.gw-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* === Book pages: shared parts ============================================= */
.ck-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ck-head .ck-sub {
  margin: 0;
}

.ck-title small {
  font: 500 var(--fs-sm) / 1 var(--ui);
  color: var(--ink-3);
}

.ck-sub {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.ck-sub b {
  color: var(--ink-2);
}

.ck-desc {
  margin-top: 5px;
  font-size: var(--fs-sm);
  line-height: var(--lh-text);
  color: var(--ink-2);
}

.ck-note {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  background: rgba(120, 90, 50, 0.1);
  font-size: var(--fs-xs);
  line-height: var(--lh-text);
  color: var(--ink-2);
}

.ck-note b {
  color: var(--ink);
}

/* grey band under a heading */
.ck-band {
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(120, 90, 50, 0.12);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.ck-band small {
  font-size: var(--fs-xs);
}

/* ember pill: free points */
.ck-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 3px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffc27a, var(--ember) 50%, #e0701f);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.7), 0 1px 0 #6a2e08;
  color: #2a1204;
  font: 700 var(--fs-sm) / 1 var(--ui);
}

.ck-pill b {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #2a1204;
  color: var(--ember-hi);
}

/* station figure line under a title */
.ck-wholine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.ck-wholine .ck-medal {
  width: 30px;
  height: 30px;
}

/* cards on a page (specialisation, transformation, echo) */
.ck-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-right: 2px;
}

.ck-card {
  padding: 8px 10px;
  border-radius: var(--radius);
  background: rgba(255, 250, 235, 0.45);
  box-shadow: inset 0 0 0 1px var(--ink-line-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-text);
  color: var(--ink-2);
}

.ck-card.dim {
  opacity: 0.75;
}

.ck-card h3 {
  font-size: var(--fs-xl);
}

.ck-cardhead {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.ck-card p + p,
.ck-card p + .spec-choices {
  margin-top: 4px;
}

.ck-paper .spec-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.ck-paper .spec-btn,
.ck-paper .echo-btn {
  color: var(--ink);
  background: rgba(255, 250, 235, 0.6);
  border: 1px solid var(--ink-line-2);
  --elev: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ck-paper .spec-btn span,
.ck-paper .echo-btn span {
  color: var(--ink-3);
}

.ck-paper .echo-btn em {
  color: var(--ember-deep);
}

.ck-bar {
  height: 5px;
  margin: 5px 0 2px;
  border-radius: 3px;
  background: rgba(60, 40, 22, 0.18);
  overflow: hidden;
}

.ck-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ember-deep), var(--ember));
}

.ck-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

/* === Fertigkeiten ========================================================== */
.sk-list {
  margin-top: 6px;
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 2px;
}

.sk-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--ink-line);
}

.sk-row.can {
  background: linear-gradient(90deg, rgba(255, 154, 60, 0.14), rgba(255, 154, 60, 0));
  box-shadow: inset 2px 0 0 var(--ember);
}

.sk-row.locked {
  opacity: 0.6;
}

.sk-ico {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6e0, var(--parch-3));
  box-shadow: 0 0 0 1.5px var(--ink-2), 0 1px 3px rgba(60, 40, 20, 0.35);
}

.sk-key {
  position: absolute;
  right: -5px;
  bottom: -4px;
}

.sk-info {
  flex: 1;
  min-width: 0;
}

.sk-name {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.sk-name h3 {
  font-size: var(--fs-xl);
}

.sk-name .pips {
  margin-left: auto;
  gap: 4px;
}

.ck-paper .pips i {
  background: transparent;
  box-shadow: inset 0 0 0 1.2px var(--ink-2);
  transform: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.ck-paper .pips i.on {
  background: var(--ink);
}

.ck-paper .pips i.gate {
  box-shadow: inset 0 0 0 1px var(--ink-line-2);
  opacity: 0.6;
}

.sk-desc {
  margin-top: 2px;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--ink-2);
}

.sk-meta,
.sk-next,
.sk-runes {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.sk-meta b,
.sk-runes b {
  color: var(--ink);
}

.ck-paper .sk-runes b {
  color: #5a2a8a;
}

.sk-plus {
  flex: none;
  align-self: center;
}

.ck-paper .btn.plus:not([disabled]) {
  color: #2a1204;
  border-color: #8a3f0c;
  background: linear-gradient(180deg, #ffc27a, var(--ember) 45%, #e0701f);
  --elev: inset 0 1px 0 rgba(255, 240, 210, 0.7), 0 1px 0 #6a2e08;
}

/* === Taten ================================================================= */
.ck-rankrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.ck-rank.big {
  width: 66px;
  height: 66px;
  font-size: 40px;
  box-shadow: inset 0 0 0 3px rgba(255, 200, 170, 0.22), 0 0 0 4px rgba(142, 31, 26, 0.25), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.ck-rank.none {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-line-2);
  color: var(--ink-3);
  font-family: var(--ui);
  font-style: normal;
}

.ck-points {
  font: 700 var(--fs-4xl) / 1 var(--display);
  color: var(--ink);
}

.ck-best {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(45, 114, 54, 0.14);
  color: var(--good-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.ck-ladder {
  position: relative;
  height: 8px;
  margin: 26px 6px 18px;
  border-radius: 4px;
  background: rgba(60, 40, 22, 0.16);
  box-shadow: inset 0 0 0 1px var(--ink-line);
}

.ck-lfill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #6e5840, var(--ink-2));
}

.ck-lmark {
  position: absolute;
  top: -16px;
  bottom: -16px;
  width: 0;
  border-left: 1px solid var(--ink-2);
}

.ck-lmark small,
.ck-lmark b {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}

.ck-lmark small {
  top: -3px;
}

.ck-lmark b {
  bottom: -5px;
  font: 700 var(--fs-sm) / 1 var(--display);
  color: var(--ink-2);
}

.ck-lnow {
  position: absolute;
  top: -5px;
  width: 5px;
  height: 18px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--wax-hi);
  box-shadow: 0 0 0 1.5px var(--parch);
}

.ck-parts {
  font-size: var(--fs-sm);
}

.ck-part {
  display: grid;
  grid-template-columns: 1fr 90px 48px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--ink-line);
  color: var(--ink-2);
}

.ck-part small {
  color: var(--ink-3);
}

.ck-part em {
  font-style: normal;
  font-weight: 700;
  text-align: right;
  color: var(--ink);
}

.ck-part.sum {
  grid-template-columns: 1fr 48px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 0;
}

.ck-pbar {
  height: 4px;
  border-radius: 2px;
  background: rgba(60, 40, 22, 0.16);
  overflow: hidden;
}

.ck-pbar b {
  display: block;
  height: 100%;
  background: var(--ink-2);
}

.ck-pbar.bad b {
  background: var(--bad-ink);
}

.ck-paper .missions li,
.ck-missions li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 3px 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.ck-missions li span {
  flex: 1;
}

.ck-missions li i {
  flex: none;
  width: 10px;
  font-style: normal;
  font-weight: 700;
}

.ck-paper .missions li.ok,
.ck-paper .missions li.ok b {
  color: var(--ink);
}

.ck-missions li.ok i {
  color: var(--good-ink);
}

.ck-paper .missions li.no {
  color: var(--ink-3);
}

.ck-missions li.no i,
.ck-paper .missions li.no b {
  color: var(--bad-ink);
}

.ck-paper .missions b {
  color: var(--ink);
}

.ck-loots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.ck-loot {
  padding: 5px 7px;
  border-radius: var(--radius);
  background: rgba(255, 250, 235, 0.5);
  box-shadow: inset 0 0 0 1px var(--ink-line-2);
}

.ck-loot b {
  display: block;
  font: 700 var(--fs-xl) / 1.1 var(--ui);
  color: var(--ink);
}

.ck-loot span {
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}

.ck-runes {
  margin-top: 6px;
}

.ck-runes li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  font-size: var(--fs-sm);
}

.ck-runes .gd-cell {
  width: 30px;
  height: 30px;
}

.ck-runes b {
  color: var(--rci);
}

.ck-runes small {
  color: var(--ink-3);
}

.ck-level {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(255, 154, 60, 0.18), rgba(255, 154, 60, 0.05));
  box-shadow: inset 3px 0 0 var(--ember);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.ck-level h3 {
  font-size: var(--fs-xl);
}

.ck-news {
  margin-top: 5px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.ck-news b {
  color: var(--ink);
}

.ck-lastrow {
  margin-top: 6px;
}

.ck-deeds {
  margin-top: 6px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px;
}

.ck-deed {
  display: grid;
  grid-template-columns: 20px 1fr auto 40px;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 6px;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  background: transparent;
  color: var(--ink);
  font: 500 var(--fs-sm) / 1.2 var(--ui);
  text-align: left;
}

.ck-deed.sel {
  background: rgba(255, 154, 60, 0.14);
  box-shadow: inset 2px 0 0 var(--ember);
}

.ck-deed.locked {
  color: var(--ink-3);
}

.ck-deed .n {
  font: 700 var(--fs-sm) / 1 var(--display);
  color: var(--ink-3);
  text-align: right;
}

.ck-deed .rk {
  display: flex;
  gap: 3px;
}

.ck-deed .ck-rank {
  width: 17px;
  height: 17px;
  font-size: var(--fs-sm);
}

.ck-deed .tm {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-align: right;
}

.ck-band .ck-rank {
  width: 16px;
  height: 16px;
  font-size: var(--fs-sm);
}

.ck-bestrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: var(--fs-sm);
}

.ck-bestrow .ck-rank {
  width: 26px;
  height: 26px;
  font-size: var(--fs-xl);
}

.ck-bestrow b {
  display: block;
}

.ck-bestrow span {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.ck-missions.plain li {
  justify-content: space-between;
}

/* === Karte ================================================================= */
.ck-mapwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--ink-line-2), 0 1px 4px rgba(60, 40, 20, 0.25);
}

.ck-wmap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ck-towns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 6px;
}

.ck-town {
  display: grid;
  gap: 1px;
  padding: 5px 8px;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--ink-line-2);
  border-left: 3px solid var(--tc);
  background: rgba(255, 250, 235, 0.45);
  color: var(--ink);
  font: 600 var(--fs-md) / 1.2 var(--ui);
}

.ck-town span {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-3);
}

.ck-town.sel {
  background: rgba(255, 154, 60, 0.16);
  --elev: inset 0 0 0 1px var(--ember-deep);
  box-shadow: var(--elev);
}

.ck-town.locked {
  opacity: 0.7;
}

.ck-atlas-detail {
  margin-top: 10px;
}

.ck-atlas-detail h3 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ck-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.ck-pips i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-line-2);
}

.ck-pips i.done {
  background: var(--wax);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 170, 0.3);
}

.ck-pips i.open {
  background: var(--ember);
}

/* === Gruppe ================================================================ */
.ck-heroes {
  margin-top: 6px;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 5px;
  padding: 2px;
}

.ck-hero {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 7px;
  padding: 5px 7px;
  border-radius: var(--radius);
  background: rgba(255, 250, 235, 0.45);
  box-shadow: inset 0 0 0 1px var(--ink-line);
  border-left: 3px solid var(--c);
}

.ck-hero.cur {
  background: rgba(255, 154, 60, 0.14);
}

.ck-hero.new {
  opacity: 0.85;
}

.ck-hfig {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #4a3526, #1c130d);
}

.ck-hinfo {
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.ck-hinfo b {
  display: block;
  font-size: var(--fs-md);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-hero > .btn,
.ck-hero > .tag,
.ck-hero > .hsex {
  justify-self: start;
}

.ck-hero .hsex {
  display: flex;
  gap: 4px;
}

.ck-members {
  margin-top: 6px;
}

.ck-members li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--ink-line);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.ck-members li > div {
  flex: 1;
  min-width: 0;
}

.ck-members b {
  display: block;
  font-size: var(--fs-md);
  color: var(--ink);
}

.ck-members em {
  font-style: normal;
  color: var(--ink-2);
}

.ck-mdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1.5px var(--parch), 0 0 0 2.5px var(--ink-line-2);
}

/* === Optionen ============================================================== */
.ck-opts {
  margin-top: 8px;
}

.ck-paper .orow {
  border-bottom: 1px solid var(--ink-line);
  color: var(--ink);
}

.ck-paper .orow small {
  display: block;
  font-size: var(--fs-xs);
}

.ck-paper .toggle.on {
  color: #2a1204;
  border-color: #8a3f0c;
  background: linear-gradient(180deg, #ffc27a, var(--ember) 45%, #e0701f);
}

.ck-paper .orow .confirm {
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-sm);
}

.ck-hero .hsex {
  flex-direction: row;
  flex-wrap: wrap;
}

/* === Stations as furniture ==================================================
   Header: the figure in a medallion, name, station and what they say; the
   purse on iron plates. Body: a wooden table; what lies on it depends on
   the station (cloth with goods, parchment bill, sea map, chest). The hint
   strip sits at the foot. Choose left, understand right, the main action
   bottom right. */
.ck-st.station.overlay {
  background: radial-gradient(ellipse at 50% 45%, rgba(8, 6, 4, 0.55), rgba(5, 3, 2, 0.85) 100%);
}

.ck-st .st-head {
  height: 60px;
  padding: 0 14px;
  gap: 11px;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.75), rgba(10, 8, 6, 0));
  border: 0;
  box-shadow: none;
}

.ck-st .st-face {
  width: 46px;
  height: 46px;
  border: 0;
}

.ck-gate {
  background: radial-gradient(circle at 50% 50%, #bff3ea 0, #3fb8a8 30%, #0e3d3a 62%, #06110f 100%);
}

.ck-st .st-who {
  flex: none;
}

.ck-st .st-who strong {
  font-size: var(--fs-4xl);
  color: var(--parch);
}

.ck-st .st-who em {
  display: none;
}

.ck-st .ck-quote {
  margin-left: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.ck-st .res {
  margin-left: auto;
}

.ck-st .res .chip {
  background: linear-gradient(180deg, rgba(40, 32, 26, 0.94), rgba(18, 14, 11, 0.94));
  border-color: rgba(214, 176, 122, 0.45);
}

.ck-st .st-close {
  color: #ffe0d0;
  background: linear-gradient(180deg, #9a2d24, #6d1e17);
  border-color: #4a120d;
}

.ck-st .hero-card {
  display: none;
}

/* the table */
.ck-st .panel {
  left: 12px;
  right: 12px;
  top: 62px;
  bottom: 24px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 17px, rgba(0, 0, 0, 0.08) 17px 18px, rgba(255, 210, 160, 0.03) 18px 45px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 30%, var(--wood-lo));
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.55);
}

.ck-st .tab-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* a parchment sheet on the table (forge, refine, travel) */
.ck-st .tab-body.ck-paper {
  padding: 10px 14px;
  border-radius: 6px;
  overflow: auto;
}

.ck-st .tab-body.ck-paper h4 {
  color: var(--ink-3);
}

.ck-st .tab-body.ck-paper h4::after {
  box-shadow: none;
  background: linear-gradient(90deg, var(--ink-line-2), rgba(0, 0, 0, 0));
}

/* sub tabs: leather tabs on the table edge */
.ck-st .subtabs {
  flex: none;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  gap: 5px;
}

.ck-st .subtab {
  color: var(--text-2);
  background: linear-gradient(180deg, #4a2e1c, #2a190f);
  border-color: rgba(214, 176, 122, 0.3);
}

.ck-st .subtab.on {
  color: var(--ink);
  background: linear-gradient(var(--ember), var(--ember)) left bottom / 100% 3px no-repeat, linear-gradient(180deg, var(--parch), var(--parch-2));
  border-color: var(--parch-edge);
}

.ck-st .tab-body.ck-paper .subtab {
  color: var(--parch);
}

.ck-st .tab-body.ck-paper .subtab.on {
  color: var(--ink);
  border-color: var(--ink-2);
}

.ck-st .sub-key {
  opacity: 0.85;
}

/* hint strip at the foot */
.ck-st .legend {
  left: 50%;
  right: auto;
  bottom: 3px;
  transform: translateX(-50%);
  gap: 12px;
  padding: 3px 12px;
  border-radius: 14px;
  background: rgba(14, 10, 8, 0.9);
  border: 1px solid rgba(214, 176, 122, 0.3);
  color: var(--text-2);
  white-space: nowrap;
  z-index: 2;
}

.ck-st .legend .lg {
  gap: 4px;
}

.ck-st .legend .note {
  color: var(--text-3);
}

html.touch-ui .ck-st .legend {
  display: none;
}

html.touch-ui .ck-st .panel {
  bottom: 8px;
}

/* --- Merchant and magic shop: the counter --------------------------------- */
.ck-counter {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 10px;
}

.ck-goods {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 10px 12px;
  border-radius: 6px;
}

/* fringe of the cloth */
.ck-goods::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -3px;
  height: 6px;
  background: repeating-linear-gradient(90deg, #c9a15a 0 3px, transparent 3px 7px);
  opacity: 0.8;
  pointer-events: none;
}

.ck-tiers {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  flex-wrap: wrap;
  margin: 0;
}

.ck-tl {
  align-self: center;
  margin-right: 3px;
  font-size: var(--fs-xs);
  color: #cfd8e0;
}

.ck-st .shop-tiers .ck-tier {
  position: relative;
  min-width: 36px;
  min-height: 24px;
  padding: 2px 6px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: rgba(8, 16, 26, 0.6);
  border: 1px solid rgba(160, 190, 220, 0.3);
  color: #e6edf3;
  font: 700 var(--fs-md) / 1 var(--ui);
  --elev: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  box-shadow: var(--elev);
}

.ck-tier small {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 2px;
  transform: translateX(-50%);
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: #cfd8e0;
  white-space: nowrap;
}

.ck-st .shop-tiers .ck-tier.sel {
  color: var(--ember-hi);
  border-color: var(--ember);
  background: rgba(40, 20, 8, 0.7);
  --elev: inset 0 -3px 0 var(--ember);
}

.ck-st .shop-tiers .ck-tier.later:not(.sel) {
  color: rgba(230, 237, 243, 0.7);
}

.ck-clothnote {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 0 7px;
  font-size: var(--fs-xs);
  color: #d8e0e8;
}

.ck-clothnote b {
  color: var(--ember-hi);
}

.ck-offers {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  padding: 3px;
  margin: -3px;
}

.ck-counter.magic .ck-offers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ck-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 104px;
  padding: 7px 8px 5px;
  border: 0;
  border-radius: 4px;
  text-align: left;
  font: 400 var(--fs-xs) / 1.3 var(--ui);
  --elev: inset 0 0 0 1px rgba(120, 90, 50, 0.35), 0 2px 5px rgba(0, 0, 0, 0.45);
  box-shadow: var(--elev);
}

.ck-offer.sel {
  --elev: inset 0 0 0 2px var(--ember), inset 0 0 12px rgba(255, 154, 60, 0.35), 0 2px 5px rgba(0, 0, 0, 0.45);
}

@media (hover: hover) {
  .ck-offer:not(.sel):hover {
    --elev: inset 0 0 0 1px var(--ink-2), 0 3px 8px rgba(0, 0, 0, 0.5);
  }
}

/* price tag on a string */
.ck-tag {
  position: absolute;
  top: 5px;
  right: 6px;
  min-width: 30px;
  padding: 5px 6px 3px 9px;
  background: linear-gradient(180deg, #f6e7b8, #e2c98a);
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
  font: 700 var(--fs-sm) / 1 var(--ui);
  color: var(--ink);
  text-align: center;
}

.ck-tag::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--ink-3);
}

.ck-ohead {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 46px;
}

.ck-ohead .gd-cell {
  width: 38px;
  height: 38px;
}

.ck-ohead b {
  display: block;
  font: 700 var(--fs-lg) / 1.1 var(--display);
  color: var(--ink);
}

.ck-ohead small {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}

.ck-offer.big .ck-ohead small {
  font-size: var(--fs-xs);
}

.ck-ostats {
  flex: 1;
  color: var(--ink-2);
}

.ck-ofoot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 3px;
  border-top: 1px solid var(--ink-line);
}

.ck-ofoot em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink-2);
}

.ck-ofoot small {
  color: var(--ink-3);
}

.ck-bill {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 6px;
  overflow: auto;
}

.ck-bill .gd-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ck-bill h3 {
  font-size: var(--fs-2xl);
}

.ck-bill .gd-meta {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.ck-after {
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.ck-warn {
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  background: rgba(161, 49, 42, 0.1);
  font-size: var(--fs-xs);
  color: var(--bad-ink);
}

.ck-billgo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.ck-billgo small {
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--ink-3);
}

html.touch-ui .ck-offers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- Storage and mailbox: the station header over the furniture ----------- */
.stash.overlay {
  background: radial-gradient(ellipse at 50% 45%, rgba(8, 6, 4, 0.55), rgba(5, 3, 2, 0.85) 100%);
}

.stash .stash-win {
  inset: 0;
  padding: 0 12px 26px;
  gap: 8px 10px;
  background: none;
  border: 0;
  box-shadow: none;
}

.stash .sw-storage,
.stash .mw-win {
  grid-template-rows: 58px minmax(0, 1fr);
}

.stash .sw-head {
  gap: 11px;
  padding: 0 2px;
  border: 0;
  box-shadow: none;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.75), rgba(10, 8, 6, 0));
}

.stash .sw-head > div {
  flex: none;
}

.stash .sw-head strong {
  font-size: var(--fs-4xl);
  color: var(--parch);
}

.stash .sw-head .st-face {
  width: 46px;
  height: 46px;
  border: 0;
}

.stash .sw-head .ck-quote {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 auto 0 4px;
}

.stash .sw-head [data-act="close"] {
  color: #ffe0d0;
  background: linear-gradient(180deg, #9a2d24, #6d1e17);
  border-color: #4a120d;
}

.stash .legend {
  left: 50%;
  right: auto;
  bottom: 3px;
  transform: translateX(-50%);
  gap: 12px;
  padding: 3px 12px;
  border-radius: 14px;
  background: rgba(14, 10, 8, 0.9);
  border: 1px solid rgba(214, 176, 122, 0.3);
  color: var(--text-2);
  white-space: nowrap;
}

html.touch-ui .stash .legend {
  display: none;
}

html.touch-ui .stash .stash-win {
  padding-bottom: 8px;
}

/* the bag: soft leather */
.stash .sw-bag,
.ck-st .sl-bag {
  border: 0;
  border-radius: 12px 12px 8px 8px;
  padding: 8px 8px 8px 10px;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(255, 210, 150, 0.1), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, var(--leather-hi), var(--leather) 45%, var(--leather-lo));
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* the storage: an open chest, dark wood with brass bands */
.stash .sw-store {
  border: 0;
  border-radius: 6px;
  padding: 8px 8px 8px 10px;
  background:
    linear-gradient(90deg, rgba(214, 176, 122, 0.55) 0 3px, transparent 3px) left top / 100% 100% no-repeat,
    linear-gradient(270deg, rgba(214, 176, 122, 0.55) 0 3px, transparent 3px) left top / 100% 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 22px, rgba(0, 0, 0, 0.14) 22px 23px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 30%, var(--wood-lo));
  box-shadow: inset 0 2px 0 rgba(255, 220, 170, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* the sell basket: woven wicker */
.ck-st .sl-cart {
  border: 0;
  border-radius: 10px;
  padding: 8px 8px 8px 10px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(255, 220, 160, 0.08) 0 5px, rgba(0, 0, 0, 0.1) 5px 10px),
    linear-gradient(180deg, #8a6236, #6b4726 55%, #4a2f18);
  box-shadow: inset 0 2px 0 rgba(255, 230, 180, 0.2), inset 0 0 0 2px rgba(40, 24, 10, 0.6), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.stash .sw-bag h4,
.stash .sw-store h4,
.ck-st .sell2 h4 {
  color: var(--parch);
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.stash .sw-bag h4 small,
.stash .sw-store h4 small,
.ck-st .sell2 h4 small {
  font-family: var(--ui);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* cells inside bag, chest and basket: dark wells */
.stash .gcell.empty,
.ck-st .sell2 .gcell.empty {
  background: rgba(10, 6, 3, 0.35);
  border-color: rgba(214, 176, 122, 0.16);
}

/* the chosen entry: parchment sheet */
.stash .sw-detail,
.ck-st .sl-detail {
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, 0.35), inset 0 0 24px rgba(140, 100, 50, 0.22), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.ck-paper .gd-name {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  color: var(--rci);
}

.ck-paper .gd-meta,
.ck-paper .gd-type {
  color: var(--ink-3);
}

.ck-paper .gd-stats li {
  border-bottom: 1px solid var(--ink-line);
  color: var(--ink-2);
}

.ck-paper .gd-stats b {
  color: var(--ink);
}

.ck-paper .gd-warn {
  color: var(--bad-ink);
}

.ck-paper .sl-price,
.ck-paper .sl-price b {
  color: var(--gold-ink);
}

.ck-paper .sw-msg.ok {
  color: var(--good-ink);
}

.ck-paper .sw-msg.bad,
.ck-paper .sw-msg.err {
  color: var(--bad-ink);
}

.ck-paper .gd-actions {
  margin-top: auto;
}

.ck-paper .gd-actions .btn.primary {
  order: 9;
}

.ck-st .sl-sum {
  color: var(--parch);
}

.ck-st .sl-empty {
  color: rgba(255, 236, 200, 0.7);
}

.ck-st .sell2 .sl-hint,
.stash .sw-hint {
  color: var(--text-2);
}

.ck-st .sw-good .sw-gname {
  color: var(--text-1);
}

/* storage tabs on the chest lid */
.stash .sw-tab.btn.small {
  color: var(--text-2);
  background: rgba(10, 6, 3, 0.4);
}

.stash .sw-tab.on {
  color: var(--ink);
  background: linear-gradient(var(--ember), var(--ember)) left bottom / 100% 3px no-repeat, linear-gradient(180deg, var(--parch), var(--parch-2));
  border-color: var(--parch-edge);
}

/* --- Mailbox: letter stack, the letter, the reply on paper ---------------- */
.stash .mw-list {
  padding: 8px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 17px, rgba(0, 0, 0, 0.08) 17px 18px, rgba(255, 210, 160, 0.03) 18px 45px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 30%, var(--wood-lo));
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.14), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.stash .mw-letter {
  color: var(--ink);
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--parch), var(--parch-2));
  --elev: inset 0 0 0 1px rgba(120, 90, 50, 0.4), 2px 3px 0 rgba(231, 214, 176, 0.55), 3px 5px 6px rgba(0, 0, 0, 0.45);
  box-shadow: var(--elev);
}

.stash .mw-letter.sel {
  --elev: inset 0 0 0 2px var(--ember), 2px 3px 0 rgba(231, 214, 176, 0.55), 3px 5px 6px rgba(0, 0, 0, 0.45);
}

.stash .mw-letter .mw-from {
  color: var(--ink-3);
}

.stash .mw-letter .mw-subj {
  color: var(--ink);
}

.stash .mw-letter.unread .mw-dot {
  background: var(--ember);
}

.stash .mw-clip {
  color: var(--ink-2);
  background: rgba(120, 90, 50, 0.16);
}

.stash .mw-empty,
.stash .mw-err {
  color: var(--text-2);
}

.stash .mw-read {
  min-height: 0;
}

.stash .mw-paper {
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, 0.35), inset 0 0 24px rgba(140, 100, 50, 0.22), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.stash .mw-paper h3 {
  font-family: var(--display);
  color: var(--ink);
}

.stash .mw-meta,
.stash .mw-paper .sw-note {
  color: var(--ink-3);
}

.stash .mw-body {
  color: var(--ink);
  font-style: italic;
}

.stash .mw-exp {
  color: var(--bad-ink);
}

.stash .mw-paper h4,
.stash .mw-compose h4 {
  color: var(--ink-3);
}

.stash .mw-paper .ol-field > span {
  color: var(--ink-3);
}

.stash .mw-paper .ol-in {
  color: var(--ink);
  background: rgba(255, 252, 240, 0.7);
  border-color: var(--ink-line-2);
}

.stash .mw-paper .ol-in:focus,
.stash .mw-paper .ol-in.is-focus {
  border-color: var(--ember-deep);
}

.stash .mw-quote {
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, 0.35), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.stash .mw-quote .mw-qfrom small,
.stash .mw-quote .mw-qatts {
  color: var(--ink-3);
}

.stash .mw-from-me {
  color: var(--ink-3);
}

.stash .mw-good small {
  color: var(--ink-3);
}

/* --- Rune smith and refining on parchment --------------------------------- */
.ck-paper .rune-tier .rt-lvl {
  color: var(--ink-3);
}

.ck-paper .rune-chip {
  color: var(--ink);
  background: rgba(255, 250, 235, 0.55);
  border-color: var(--ink-line-2);
}

.ck-paper .rune-chip span {
  color: var(--ink-3);
}

.ck-paper .rune-chip.on {
  border-color: var(--ember-deep);
  background: rgba(255, 154, 60, 0.18);
  --elev: inset 0 0 0 1px var(--ember-deep);
}

.ck-paper .rune-chip[disabled] {
  opacity: 0.75;
  background: transparent;
  border-style: dashed;
}

.ck-paper .rune-smith .skill-block,
.ck-paper .frow {
  border-bottom-color: var(--ink-line);
}

.ck-paper .frow,
.ck-paper .fname {
  color: var(--ink);
}

.ck-paper .fname small,
.ck-paper .fcost,
.ck-paper .note {
  color: var(--ink-3);
}

.ck-paper .sicon {
  background: radial-gradient(circle at 40% 35%, #5b3b26, #2a190f);
  border-color: var(--ink-2);
}

.ck-st .refine {
  grid-template-columns: minmax(0, 1fr) 300px;
  min-height: 100%;
}

.ck-paper .ref-detail {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 250, 235, 0.55);
  box-shadow: inset 0 0 0 1px var(--ink-line-2), inset 0 3px 0 var(--rci);
  color: var(--ink);
}

.ck-paper .ref-detail h3 {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  color: var(--rci);
}

.ck-paper .ref-arrow {
  color: var(--ember-deep);
}

.ck-paper .rd-meta,
.ck-paper .ref-note,
.ck-paper .ref-cost small,
.ck-paper .ref-mats {
  color: var(--ink-3);
}

.ck-paper .ref-bar {
  background: rgba(60, 40, 22, 0.18);
}

.ck-paper .ref-cost li.short {
  color: var(--bad-ink);
}

.ck-paper .ref-msg.ok {
  color: var(--good-ink);
}

.ck-paper .ref-msg.bad {
  color: var(--bad-ink);
}

.ck-paper .ref-detail > .btn.primary {
  align-self: flex-end;
}

.ck-paper .refine .rl {
  color: var(--good-ink);
}

.ck-paper .refine .rune.worn {
  --elev: inset 0 0 0 2px rgba(110, 88, 64, 0.55);
}

/* rarity on parchment follows the element's own --rc (set inline) */
[style*="--rc"] {
  --rci: color-mix(in srgb, var(--rc) 62%, var(--ink));
}

.ck-paper .ref-detail > .btn.primary {
  order: 10;
  margin-top: auto;
}

/* the world behind a station stays dim, the town HUD does not shine through */
.ck-st.station.overlay,
.stash.overlay {
  background:
    linear-gradient(180deg, rgba(7, 5, 4, 0.94), rgba(7, 5, 4, 0.72) 70px, rgba(7, 5, 4, 0) 110px),
    radial-gradient(ellipse at 50% 45%, rgba(8, 6, 4, 0.55), rgba(5, 3, 2, 0.85) 100%);
}

.ck-quote {
  max-width: 360px;
}

/* --- Echotor: the map table ------------------------------------------------ */
.ck-maptable {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 10px;
}

.ck-seamap {
  position: relative;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
}

.ck-seasvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ck-sea {
  fill: rgba(70, 110, 130, 0.22);
  stroke: rgba(60, 40, 22, 0.55);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.ck-sea.waves {
  fill: url(#ckWave);
  stroke: none;
}

.ck-hill {
  fill: none;
  stroke: rgba(78, 59, 40, 0.6);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.ck-trail {
  fill: none;
  stroke: rgba(78, 59, 40, 0.75);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

.ck-compass {
  position: absolute;
  left: 18px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    conic-gradient(from -45deg, transparent 0 20deg, rgba(78, 59, 40, 0.75) 20deg 25deg, transparent 25deg 110deg, rgba(78, 59, 40, 0.75) 110deg 115deg, transparent 115deg 200deg, rgba(78, 59, 40, 0.75) 200deg 205deg, transparent 205deg 290deg, rgba(78, 59, 40, 0.75) 290deg 295deg, transparent 295deg);
  box-shadow: inset 0 0 0 1.5px rgba(78, 59, 40, 0.6);
}

.ck-compass i {
  position: absolute;
  left: 50%;
  top: -13px;
  transform: translateX(-50%);
  font: 700 var(--fs-md) / 1 var(--display);
  font-style: normal;
  color: var(--ink-2);
}

.ck-home {
  position: absolute;
  transform: translate(-10%, -50%);
  font: 700 var(--fs-xl) / 1 var(--display);
  color: var(--ink);
  pointer-events: none;
}

.ck-home::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--echo-deep);
  box-shadow: 0 0 0 2px var(--parch), 0 0 0 3.5px var(--echo-deep);
}

.ck-fognote {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  font: 700 var(--fs-lg) / 1.1 var(--display);
  color: var(--ink-3);
  pointer-events: none;
}

.ck-fognote small {
  display: block;
  font: 400 var(--fs-xs) / 1.2 var(--ui);
}

/* a mark on the route: seal, ring or pin with the name below */
.ck-seamap .dcard.ck-mark {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  opacity: 1;
  z-index: 1;
}

.ck-mark .ck-rank {
  position: absolute;
  inset: 1px;
  width: auto;
  height: auto;
  font-size: var(--fs-xl);
}

.ck-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 3px solid var(--ember);
  background: rgba(255, 154, 60, 0.25);
  box-shadow: 0 0 0 4px rgba(255, 154, 60, 0.18);
}

.ck-pin {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  background: radial-gradient(circle at 50% 50%, #2a1204 0 3.5px, transparent 4px), linear-gradient(180deg, #ffc27a, var(--ember) 60%, #e0701f);
  box-shadow: 0 0 0 1.5px #8a3f0c, 0 0 0 7px rgba(255, 154, 60, 0.25), 2px 2px 4px rgba(0, 0, 0, 0.35);
}

.ck-heroic {
  position: absolute;
  right: -6px;
  top: -6px;
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--gold-ink);
  text-shadow: 0 0 2px var(--parch);
}

.ck-mlabel {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 3px;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  font: 600 var(--fs-sm) / 1.15 var(--ui);
  color: var(--ink);
  text-shadow: 0 0 3px var(--parch), 0 0 2px var(--parch);
  pointer-events: none;
}

.ck-mark.lbl-l .ck-mlabel {
  left: auto;
  right: 50%;
  transform: none;
  text-align: right;
}

.ck-mlabel small {
  display: block;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--ember-deep);
}

.ck-mark.sel .ck-mlabel b {
  font: 700 var(--fs-lg) / 1.1 var(--display);
}

.ck-seamap .dcard.ck-mark.is-focus {
  outline-offset: 3px;
}

.ck-legend {
  position: absolute;
  left: 10px;
  bottom: 8px;
  display: flex;
  gap: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 250, 235, 0.75);
  box-shadow: inset 0 0 0 1px var(--ink-line);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

.ck-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ck-legend .ck-rank {
  width: 13px;
  height: 13px;
  font-size: var(--fs-tiny);
}

.ck-legend .ck-ring {
  position: static;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-width: 2px;
  box-shadow: none;
}

.ck-fogdot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px dashed var(--ink-3);
}

/* the logbook on the right */
.ck-st .exp3.ck-log {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 6px;
  overflow: auto;
}

.ck-log .exp-detail h3 {
  font: 700 var(--fs-3xl) / 1.05 var(--display);
  color: var(--ink);
}

.ck-log .desc,
.ck-log .foes,
.ck-log .boss-line {
  color: var(--ink-2);
}

.ck-log .boss-line strong {
  color: var(--ink);
}

.ck-log .exp-act {
  padding: 0;
  border: 0;
  flex: 1 0 auto;
}

.ck-log .missions li {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  font-size: var(--fs-sm);
}

.ck-log .missions b {
  color: var(--ink);
}

.ck-log .exp-act .diff {
  flex-direction: row;
}

.ck-log .seg {
  color: var(--ink-3);
  background: transparent;
  border: 1px dashed var(--ink-line-2);
  align-items: center;
}

.ck-log .seg small {
  color: var(--ink-3);
}

.ck-log .seg.on {
  color: var(--parch);
  background: var(--ink);
  border: 1px solid var(--ink);
  --elev: inset 0 -3px 0 var(--ember);
  box-shadow: var(--elev);
}

.ck-log .seg.on small {
  color: var(--parch-3);
}

.ck-log .warn {
  color: var(--bad-ink);
}

.ck-log .exp-act .go {
  margin-top: auto;
}

/* header plate: progress of the town */
.ck-prog {
  display: grid;
  gap: 3px;
  min-width: 250px;
  padding: 5px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(40, 32, 26, 0.94), rgba(18, 14, 11, 0.94));
  border: 1px solid rgba(214, 176, 122, 0.45);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.ck-prog > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ck-prog b {
  color: var(--text-1);
}

.ck-prog small {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.ck-bar.echo {
  display: block;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
}

.ck-bar.echo i {
  background: linear-gradient(90deg, var(--echo-deep), var(--echo));
}

.ck-mark.lbl-up .ck-mlabel {
  top: auto;
  bottom: 100%;
  margin: 0 0 3px;
}

/* --- Reisetor: the world map on a parchment sheet -------------------------- */
.ck-st .tab-body.ck-paper .travel {
  height: 100%;
  grid-template-columns: minmax(0, 1fr) 270px;
}

.ck-st .tab-body.ck-paper .travel-main {
  min-height: 0;
  height: 100%;
}

.ck-st .tab-body.ck-paper .wmap-wrap {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  box-shadow: inset 0 0 0 1px var(--ink-line-2), 0 1px 4px rgba(60, 40, 20, 0.25);
}

.ck-paper .tcard {
  color: var(--ink);
  background: rgba(255, 250, 235, 0.5);
  border: 1px solid var(--ink-line-2);
  border-left: 3px solid var(--tc);
}

.ck-paper .tcard.sel {
  background: rgba(255, 154, 60, 0.16);
  --elev: inset 0 0 0 1px var(--ember-deep);
  box-shadow: var(--elev);
}

.ck-paper .tcard .tname {
  color: var(--ink);
}

.ck-paper .tcard .dmeta,
.ck-paper .town-detail .sub,
.ck-paper .town-detail .boss-line,
.ck-paper .town-pips {
  color: var(--ink-3);
}

.ck-paper .town-detail h3 {
  color: var(--ink);
}

.ck-paper .town-detail .desc {
  color: var(--ink-2);
}

.ck-paper .town-pips > span {
  color: var(--ink);
}

/* letters: the main action bottom right */
.stash .mw-paper .mw-actions {
  margin-top: auto;
  justify-content: flex-end;
}

.stash .mw-paper .mw-actions .btn.primary {
  order: 9;
}

.stash .mw-paper .mw-from-me {
  order: -1;
  margin-right: auto;
}

.stash .ck-paper .gcell.empty {
  background: rgba(120, 90, 50, 0.07);
  border: 1px dashed var(--ink-line);
}

/* touch: the fullscreen / app button sits under the pocket belt, clear of
   the hero plate and its notes */
html.touch-ui #relock {
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
}

/* --- Touch buttons: leather discs, the talk/attack button in ember -------- */
.tb {
  background: radial-gradient(circle at 40% 30%, rgba(91, 57, 36, 0.92), rgba(31, 19, 12, 0.92));
  border-color: rgba(214, 176, 122, 0.55);
  color: var(--parch);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.tb-attack {
  background: radial-gradient(circle at 40% 30%, #ffc27a, var(--ember) 55%, #d8661a);
  border-color: #8a3f0c;
  color: #2a1204;
  font-weight: 700;
}

.tb.down {
  background: radial-gradient(circle at 40% 30%, #ffd9a8, var(--ember));
  color: #2a1204;
}

/* town: only walking and "Ansehen"; no jumping or dodging there */
#touch.town .tb-jump,
#touch.town .tb-dash {
  display: none;
}

/* the one "Kommandos" button: top right in the dungeon, in town to the
   left of "Ansehen" */
.cmdbtn {
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  width: 64px;
  height: 40px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

#touch.town .cmdbtn {
  top: auto;
  right: calc(122px + env(safe-area-inset-right, 0px));
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  width: 72px;
  height: 46px;
  border-radius: 23px;
}

.stick-base {
  background: radial-gradient(circle, rgba(59, 36, 24, 0.35), rgba(31, 19, 12, 0.25));
  border-color: rgba(214, 176, 122, 0.45);
}

.knob {
  background: radial-gradient(circle at 40% 30%, rgba(91, 57, 36, 0.95), rgba(31, 19, 12, 0.95));
  border-color: var(--brass);
}

/* --- Loot roll: a note tied to the item, with a burning fuse --------------- */
#lootroll {
  top: 128px;
  width: 300px;
}

#lootroll .lr-card.ck-paper {
  position: relative;
  padding: 9px 12px 10px;
  border: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, 0.4), inset 0 0 20px rgba(140, 100, 50, 0.2), 0 6px 16px rgba(0, 0, 0, 0.55);
  font-size: var(--fs-sm);
}

/* the string that ties the note to the item on the ground */
#lootroll .lr-card.ck-paper::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 16px;
  width: 26px;
  height: 1.5px;
  background: var(--parch-edge);
  transform: rotate(-12deg);
  transform-origin: 100% 50%;
}

#lootroll .lr-card.lr-done {
  opacity: 0.92;
}

#lootroll .ck-paper .eyebrow {
  color: var(--ink-3);
}

#lootroll .ck-paper .lr-name {
  font: 700 var(--fs-2xl) / 1.05 var(--display);
  color: var(--rci);
}

#lootroll .ck-paper .lr-meta,
#lootroll .ck-paper .lr-stats,
#lootroll .ck-paper .lr-hint {
  color: var(--ink-2);
}

#lootroll .lr-cmp {
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: rgba(45, 114, 54, 0.1);
  color: var(--ink-2);
}

#lootroll .lr-cmp b {
  color: var(--ink);
}

#lootroll .lr-cmp em {
  font-style: normal;
  font-weight: 700;
}

/* the fuse: a cord that burns down, the spark at its end */
#lootroll .lr-fuse {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
}

#lootroll .lr-fuse .bar {
  flex: 1;
  height: 3px;
  margin: 0;
  overflow: visible;
  background: repeating-linear-gradient(90deg, #6e5840 0 3px, #8a7050 3px 6px);
  border-radius: 2px;
}

#lootroll .lr-fuse .bar > i {
  position: relative;
  background: repeating-linear-gradient(90deg, #4e3b28 0 3px, #6e5840 3px 6px);
}

#lootroll .lr-fuse .bar > i::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c0 0, var(--ember) 45%, rgba(255, 154, 60, 0) 72%);
}

#lootroll .lr-left {
  color: var(--ember-deep);
}

#lootroll .ck-paper li {
  color: var(--ink);
}

#lootroll .ck-paper li i {
  color: var(--ink-3);
}

#lootroll .ck-paper .lr-need {
  color: var(--good-ink);
}

#lootroll .ck-paper .lr-greed {
  color: var(--gold-ink);
}

#lootroll .ck-paper .lr-pass,
#lootroll .ck-paper .lr-no {
  color: var(--ink-3);
}

#lootroll .ck-paper li.lr-win {
  background: rgba(255, 154, 60, 0.18);
}

#lootroll .acts .lr-choice {
  position: relative;
  flex-direction: column;
  gap: 1px;
  min-height: 42px;
  padding: 5px 4px 4px;
}

#lootroll .lr-choice b {
  font-size: var(--fs-md);
}

#lootroll .lr-choice small {
  font-size: var(--fs-tiny);
  font-weight: 500;
  color: inherit;
  opacity: 0.8;
}

#lootroll .lr-choice .kbd {
  position: absolute;
  left: -4px;
  top: -5px;
}

#lootroll .lr-card.ck-paper {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
  color: var(--ink);
}

/* loot rows of an entry */
.ck-loots {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ck-loot small {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}

.ck-loot b.gold {
  color: var(--gold-ink);
}

/* the result entry: the right page scrolls, the actions stay at the foot */
.results .ck-entry {
  flex: 1 1 auto;
  min-height: 0;
}

/* notes over the world: exit portal and defeat */
.ck-note-dlg {
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, 0.4), inset 0 0 24px rgba(140, 100, 50, 0.22), 0 10px 30px rgba(0, 0, 0, 0.6);
}

.ck-note-dlg .muted,
.ck-note-dlg .run-rank span {
  color: var(--ink-3);
}

.ck-note-dlg .fallen {
  font-family: var(--display);
  color: var(--bad-ink);
}

/* the rank stamped as a wax seal */
.ck-note-dlg .rank {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 50%;
  font-size: 40px;
  line-height: 1;
  color: #ffe2cc;
  text-shadow: none;
  background: radial-gradient(circle at 40% 35%, var(--wax-hi), var(--wax) 72%);
  box-shadow: inset 0 0 0 3px rgba(255, 200, 170, 0.22), 0 0 0 4px rgba(142, 31, 26, 0.2), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.ck-note-dlg .rank.rS {
  color: #3a2200;
  background: radial-gradient(circle at 40% 35%, #ffe08a, #b7801a 72%);
}

.ck-paper .ck-loots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.ck-paper .ck-loots li.ck-loot {
  display: block;
  padding: 5px 7px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 250, 235, 0.5);
  box-shadow: inset 0 0 0 1px var(--ink-line-2);
  font-size: var(--fs-sm);
  color: var(--ink);
}

.ck-paper .ck-loots li.ck-loot > * {
  display: block;
}

.ck-paper .ck-loots li.ck-loot span {
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}

/* === Menus, dialogs, help, online windows, title ============================
   Dialogs and the online windows are leather with a stitched seam; the
   help is a book (index on the left page, text on the right); toasts are
   parchment notes. The main action carries the wax seal. */
.dialog:not(.ck-paper),
.ol-win {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 210, 150, 0.1), rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, var(--leather-hi), var(--leather) 26%, var(--leather-lo));
  border: 1px solid rgba(0, 0, 0, 0.65);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.14), inset 0 0 0 5px rgba(0, 0, 0, 0.12), 0 14px 40px rgba(0, 0, 0, 0.65);
  outline: 1px dashed rgba(214, 176, 122, 0.38);
  outline-offset: -6px;
}

/* the wax seal on the one main action of a dialog */
.dialog .btn.primary::before,
.ol-win .btn.primary::before,
.title .btn.primary::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--wax-hi), var(--wax) 70%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 200, 170, 0.25), 0 1px 1px rgba(0, 0, 0, 0.4);
}

.dialog .btn.primary.ck-go::before,
.ol-win .btn.primary.ck-go::before {
  display: none;
}

/* key caps in menu entries sit like brass tags */
.town-menu .mkey .kbd {
  margin-left: 6px;
}

/* --- Help: a book ----------------------------------------------------------- */
.help .dialog.help-dialog {
  padding: 12px 14px 12px;
}

.help .dialog.help-dialog h2 {
  color: var(--parch);
  font-family: var(--display);
}

.help-body {
  gap: 0;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.help-nav,
.help-text {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
  color: var(--ink);
}

.help-nav {
  padding: 12px 10px;
  border-radius: 5px 0 0 5px;
  box-shadow: inset -24px 0 24px -20px rgba(70, 45, 20, 0.35);
  border-right: 2px solid rgba(60, 40, 20, 0.35);
}

.help-text {
  padding: 12px 18px;
  border-radius: 0 5px 5px 0;
  box-shadow: inset 24px 0 24px -20px rgba(70, 45, 20, 0.35);
  scrollbar-color: rgba(90, 60, 30, 0.45) transparent;
}

.help-nav .btn,
.help-nav .btn:not(.on) {
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  border-radius: 0;
  --elev: 0 0 #0000;
}

.help-nav .btn.on {
  color: var(--ink);
  background: linear-gradient(90deg, rgba(255, 154, 60, 0.22), rgba(255, 154, 60, 0));
  border-bottom-color: var(--ink-line);
  --elev: inset 3px 0 0 var(--ember);
}

.help-nav .nav.is-focus {
  outline-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 248, 230, 0.95), 0 0 12px 4px rgba(255, 140, 40, 0.6);
}

.help-text,
.help-text p,
.help-text li,
.help-text td,
.help-text th {
  color: var(--ink);
}

.help-text h3 {
  color: var(--ink);
}

.help-text b,
.help-text strong {
  color: var(--ink);
}

.help-text .muted,
.help-text small {
  color: var(--ink-3);
}

.help-text .kbd:not(.kbd-pad) {
  color: var(--parch);
  background: linear-gradient(180deg, #5b3b26, #36231a);
  box-shadow: inset 0 -2px 0 #140c07;
}

/* --- Toast: a parchment note ----------------------------------------------- */
#toast {
  color: var(--ink);
  background:
    linear-gradient(var(--ember), var(--ember)) left / 3px 100% no-repeat,
    linear-gradient(180deg, var(--parch), var(--parch-2));
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, 0.45), 0 6px 18px rgba(0, 0, 0, 0.5);
}

#toast strong {
  color: var(--ink);
}

#toast span {
  color: var(--ink-2);
}

/* --- Title and the class choice -------------------------------------------- */
.pick .ccard {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 210, 150, 0.08), rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, rgba(59, 36, 24, 0.94), rgba(31, 19, 12, 0.94));
}

/* help: the one action bottom right */
.help .dialog.help-dialog > .actions {
  justify-content: flex-end;
}

.ol-tabs[hidden] {
  display: none;
}

#lootroll .lr-prev {
  margin: 6px 0 0;
  padding-top: 5px;
  border-top: 1px dashed var(--ink-line-2);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

#lootroll .lr-prev b {
  color: var(--ink-2);
}

/* --- Command ring (touch) --------------------------------------------------- */
.ck-cmdring {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(8, 6, 4, 0.35), rgba(5, 3, 2, 0.8) 70%);
}

.ck-ring-disc {
  position: relative;
  width: 452px;
  height: 452px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(91, 57, 36, 0.96), rgba(31, 19, 12, 0.96));
  box-shadow: inset 0 0 0 2px rgba(214, 176, 122, 0.45), inset 0 0 0 9px rgba(0, 0, 0, 0.18), 0 14px 40px rgba(0, 0, 0, 0.6);
}

.ck-ring-centre {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--parch), var(--parch-2));
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, 0.45), 0 3px 8px rgba(0, 0, 0, 0.4);
  color: var(--ink);
  text-align: center;
}

.ck-ring-centre .eyebrow {
  color: var(--ink-3);
}

.ck-ring-centre strong {
  font: 700 var(--fs-xl) / 1.05 var(--display);
  padding: 0 10px;
}

.ck-ring-centre small {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.ck-cmd {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116px;
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--parch);
  font: 600 var(--fs-md) / 1.15 var(--ui);
  text-align: center;
}

.ck-cmd small {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-3);
}

.ck-cmd-disc {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, rgba(40, 28, 20, 0.95), rgba(14, 10, 8, 0.95));
  box-shadow: inset 0 0 0 1.5px var(--brass), 0 2px 5px rgba(0, 0, 0, 0.45);
}

.ck-cmd.is-focus .ck-cmd-disc,
.ck-cmd:active .ck-cmd-disc {
  box-shadow: inset 0 0 0 2px var(--ember), 0 0 12px rgba(255, 154, 60, 0.6);
}

.ck-cmd.nav.is-focus {
  outline: none;
  box-shadow: none;
}

.ck-ring-hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 14px;
  background: rgba(14, 10, 8, 0.86);
  border: 1px solid rgba(214, 176, 122, 0.3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  white-space: nowrap;
}

/* touch: sound and fullscreen buttons sit under the pocket belt at the top,
   clear of the hero plate and its notices */
html.touch-ui #mutebtn {
  top: 52px;
  left: calc(50% - 112px);
}

html.touch-ui #relock,
html.touch-ui #mutebtn:not([hidden]) ~ #relock,
html.touch-ui #relock:has(~ #mutebtn:not([hidden])) {
  top: 52px;
  left: calc(50% - 68px);
  right: auto;
  transform: none;
}

/* --- Notices under the hero plate: parchment slips, the list scrolls ------ */
#notices {
  position: absolute;
  left: 16px;
  top: var(--top, 80px);
  width: 250px;
  max-height: calc(100% - var(--top, 80px) - 176px);
  margin: 0;
  padding: 0 4px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 176, 122, 0.5) transparent;
  touch-action: pan-y;
}

#notices[hidden] {
  display: none;
}

.ck-notice {
  flex: none;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 0 6px;
  padding: 3px 8px 3px 9px;
  border-radius: 3px;
  background: linear-gradient(var(--ember), var(--ember)) left / 3px 100% no-repeat, linear-gradient(180deg, var(--parch), var(--parch-2));
  box-shadow: inset 0 0 0 1px rgba(120, 90, 50, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.2;
}

.ck-notice [data-icon] {
  display: inline-flex;
  grid-row: span 2;
}

.ck-notice-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-notice small {
  grid-column: 2;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Counter in three parts: offers (scrolling), choice and worn item,
   the bill. The cloth is warm russet felt, like the leather and wood. */
.ck-counter {
  grid-template-columns: 236px minmax(0, 1fr) 270px;
}

.ck-counter.magic {
  grid-template-columns: minmax(0, 1fr) 306px;
}

.ck-counter:not(.magic) .ck-offers {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.ck-counter:not(.magic) .ck-offer {
  min-height: 0;
  padding: 5px 7px 4px;
  gap: 3px;
}

.ck-counter:not(.magic) .ck-ohead .gd-cell {
  width: 30px;
  height: 30px;
}

.ck-tl,
.ck-clothnote,
.ck-tier small {
  color: #ecd9c4;
}

.ck-st .shop-tiers .ck-tier {
  background: rgba(20, 10, 6, 0.55);
  border-color: rgba(214, 176, 122, 0.35);
  color: var(--parch);
}

.ck-st .shop-tiers .ck-tier.later:not(.sel) {
  color: rgba(241, 229, 200, 0.7);
}

.ck-counter:not(.magic) .ck-clothnote {
  flex-direction: column;
  gap: 1px;
}

.ck-compare {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 6px;
  overflow: auto;
}

.ck-sheet {
  min-width: 0;
  padding: 10px 12px;
}

.ck-sheet + .ck-sheet {
  border-left: 1px solid var(--ink-line-2);
  background: rgba(120, 90, 50, 0.08);
}

.ck-sheet .gd-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0 6px;
}

.ck-sheet h3 {
  font-size: var(--fs-xl);
  color: var(--rci);
}

.ck-sheet .gd-meta {
  font-size: var(--fs-xs);
}

.ck-sheet .gd-stats li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  font-size: var(--fs-sm);
}

.ck-refined {
  margin-top: 5px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ember-deep);
}

.ck-power {
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid var(--ink-line-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.ck-power b {
  font: 700 var(--fs-xl) / 1 var(--display);
  color: var(--ink);
}

.ck-bill > h3 {
  margin-bottom: 4px;
}

.ck-counter:not(.magic) .ck-offers {
  grid-auto-rows: min-content;
}

.ck-counter:not(.magic) .ck-tl {
  flex: 0 0 100%;
}

.ck-counter:not(.magic) .ck-tiers {
  gap: 4px 4px;
  row-gap: 12px;
}

.ck-st .ck-counter:not(.magic) .shop-tiers .ck-tier {
  min-width: 30px;
  min-height: 22px;
  padding: 2px 4px;
  font-size: var(--fs-sm);
}

.ck-sheet h3 {
  color: color-mix(in srgb, var(--rci) 55%, var(--ink));
}

/* --- Fertigkeiten: the list on the left, the chosen entry on the right ----- */
.sk-entry {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.sk-entry.sel {
  background: linear-gradient(90deg, rgba(255, 154, 60, 0.2), rgba(255, 154, 60, 0.04));
  --elev: inset 3px 0 0 var(--ember);
  box-shadow: var(--elev);
}

.sk-entry.locked {
  opacity: 0.6;
}

.sk-entry .sk-ico {
  width: 34px;
  height: 34px;
}

.sk-entry-text {
  min-width: 0;
}

.sk-entry-text b {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 700 var(--fs-lg) / 1.1 var(--display);
}

.sk-entry-text small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sk-entry-right {
  display: grid;
  justify-items: end;
  gap: 3px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.sk-entry-right em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink-2);
}

.sk-entry.can .sk-entry-right em {
  color: var(--ember-deep);
}

.sk-detail {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sk-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sk-ico.big {
  width: 46px;
  height: 46px;
}

.sk-tags {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.sk-table-box {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
}

.sk-table td,
.sk-table th {
  text-align: left;
}

.sk-table td:last-child,
.sk-table th:last-child {
  text-align: right;
}

.sk-table tr.cur td {
  font-weight: 700;
}

.sk-table tr.next td {
  background: rgba(255, 154, 60, 0.16);
}

.sk-table tr.far td {
  color: var(--ink-3);
}

.sk-now {
  color: var(--ember-deep);
}

/* the action strip at the foot of the right page */
.sk-learn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: rgba(255, 250, 235, 0.5);
  box-shadow: inset 0 0 0 1px var(--ink-line-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.sk-learn b {
  font-weight: 700;
}

.sk-where {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-align: right;
}

.sk-detail .echo-grid {
  min-height: 0;
}

.sk-learn .btn {
  flex: none;
  white-space: nowrap;
}

.sk-entry-text .tag {
  font-family: var(--ui);
}

/* town map window: zoom of the map and of the pocket map */
.mapview .actions {
  align-items: center;
}

.map-zoom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.map-zoom b {
  min-width: 42px;
  text-align: center;
  color: var(--text-1);
}

.map-zoom-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 14px;
}