/* The Undercroft: pixel menu skin. Loaded after crawl.css and only restyles.
   Chunky wood frames with gold rivets, a red ribbon with a crest on every
   panel title, bevelled square slots, parchment for numbers, and a pixel
   font. The frames are tiny inline SVGs used as border-image, drawn on a
   pixel grid and shown at 2x so the edges stay crisp. */

@font-face { font-family: 'Pixelify'; src: url('../fonts/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root {
  --px-ink: #f3e6c8;
  --px-dim: #c9b28a;
  --px-gold: #f2c14e;
  --px-gold-hi: #ffe08a;
  --px-red: #9a2a1c;
  --px-red-hi: #c8432c;
  --px-red-lo: #5e160d;
  --px-wood: #6b4428;
  --px-wood-hi: #a06a3c;
  --px-wood-lo: #3b2414;
  --px-body: #2b1d16;
  --px-deep: #170f0b;
  --px-line: #0c0705;
  --px-parch: #dcc79c;
  --px-parch-ink: #3a2614;
  --px-orange: #c8661a;
  --px-orange-hi: #f2963f;
  --px-font: 'Pixelify', 'Silkscreen', monospace;
  --px-head: 'Silkscreen', 'Pixelify', monospace;
  /* 24x24 wood frame with gold corner rivets, sliced at 8 */
  --px-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect width='24' height='24' fill='%230c0705'/%3E%3Crect x='1' y='1' width='22' height='22' fill='%236b4428'/%3E%3Crect x='1' y='1' width='22' height='1' fill='%23a06a3c'/%3E%3Crect x='1' y='1' width='1' height='22' fill='%238a5a33'/%3E%3Crect x='1' y='22' width='22' height='1' fill='%233b2414'/%3E%3Crect x='22' y='1' width='1' height='22' fill='%233b2414'/%3E%3Crect x='5' y='5' width='14' height='14' fill='%230c0705'/%3E%3Crect x='6' y='6' width='12' height='12' fill='%232b1d16'/%3E%3Cg fill='%23d9a441'%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3Crect x='20' y='2' width='2' height='2'/%3E%3Crect x='2' y='20' width='2' height='2'/%3E%3Crect x='20' y='20' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23ffe08a'%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='20' y='2' width='1' height='1'/%3E%3Crect x='2' y='20' width='1' height='1'/%3E%3Crect x='20' y='20' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
  /* 12x12 sunken slot, sliced at 4 */
  --px-slot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect width='12' height='12' fill='%230c0705'/%3E%3Crect x='1' y='1' width='10' height='10' fill='%234a3426'/%3E%3Crect x='1' y='1' width='10' height='1' fill='%23120c09'/%3E%3Crect x='1' y='1' width='1' height='10' fill='%23120c09'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%231b130e'/%3E%3Crect x='2' y='2' width='8' height='1' fill='%23140e0a'/%3E%3C/svg%3E");
  /* 12x12 raised wood button, sliced at 4 */
  --px-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect width='12' height='12' fill='%230c0705'/%3E%3Crect x='1' y='1' width='10' height='10' fill='%236b4428'/%3E%3Crect x='1' y='1' width='10' height='2' fill='%23a06a3c'/%3E%3Crect x='1' y='1' width='1' height='10' fill='%238a5a33'/%3E%3Crect x='1' y='9' width='10' height='2' fill='%233b2414'/%3E%3Crect x='10' y='1' width='1' height='10' fill='%233b2414'/%3E%3C/svg%3E");
  --px-btn-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect width='12' height='12' fill='%230c0705'/%3E%3Crect x='1' y='1' width='10' height='10' fill='%23c8661a'/%3E%3Crect x='1' y='1' width='10' height='2' fill='%23f2963f'/%3E%3Crect x='1' y='1' width='1' height='10' fill='%23e07f2c'/%3E%3Crect x='1' y='9' width='10' height='2' fill='%237a3a0c'/%3E%3Crect x='10' y='1' width='1' height='10' fill='%237a3a0c'/%3E%3C/svg%3E");
  --px-btn-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect width='12' height='12' fill='%230c0705'/%3E%3Crect x='1' y='1' width='10' height='10' fill='%23d9a441'/%3E%3Crect x='1' y='1' width='10' height='2' fill='%23ffe08a'/%3E%3Crect x='1' y='1' width='1' height='10' fill='%23f2c14e'/%3E%3Crect x='1' y='9' width='10' height='2' fill='%238a5a12'/%3E%3Crect x='10' y='1' width='1' height='10' fill='%238a5a12'/%3E%3C/svg%3E");
  /* the crest over a panel title: a gold cross on a dark shield, 15x13 */
  --px-crest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='13' shape-rendering='crispEdges'%3E%3Cpath fill='%230c0705' d='M3 0h9v1h2v1h1v6h-1v2h-2v1h-2v1h-1v1h-3v-1h-1v-1h-2v-1h-2v-2h-1v-6h1v-1h2z'/%3E%3Cpath fill='%235e160d' d='M3 1h9v1h2v6h-1v2h-2v1h-2v1h-3v-1h-2v-1h-2v-2h-1v-6h2z'/%3E%3Cpath fill='%23d9a441' d='M6 2h3v3h3v3h-3v3h-3v-3h-3v-3h3z'/%3E%3Cpath fill='%23ffe08a' d='M6 2h3v1h-2v3h-3v-1h2z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ shared pieces */
.cr-panel, .cr-pause-in, .cr-tree-in, .cc-hero, .cc-card, .cr-death > div, .cr-tip {
  border-style: solid !important;
  border-width: 16px !important;
  border-radius: 0 !important;
  border-image: var(--px-frame) 8 fill / 16px stretch !important;
  background: transparent !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65) !important;
  font-family: var(--px-font);
  color: var(--px-ink);
  image-rendering: pixelated;
}
.cr-tip { border-width: 10px !important; border-image-width: 10px !important; }

.cr-panel h2, .cr-pause h2, .cr-tree-in h2, .cc-who h2, .cr-classes-in h2, .cr-boons-in h2, .cr-death h2, .cr-title-in h1 {
  font-family: var(--px-head) !important;
  font-weight: 400 !important;
  letter-spacing: .04em;
  color: var(--px-gold) !important;
  text-shadow: 2px 0 0 var(--px-line), -2px 0 0 var(--px-line), 0 2px 0 var(--px-line), 0 -2px 0 var(--px-line), 2px 2px 0 var(--px-line), 3px 3px 0 #3a0d08 !important;
}
.cr-kicker { color: var(--px-gold) !important; font-family: var(--px-head) !important; }

/* The red ribbon: every panel header gets one, with the crest on top. */
.cr-panel > header, .cr-tree-in > header {
  position: relative;
  margin: 10px 6px 8px;
  padding: 10px 14px !important;
  border: 0 !important;
  background:
    linear-gradient(var(--px-red-hi) 0 3px, var(--px-red) 3px calc(100% - 4px), var(--px-red-lo) calc(100% - 4px)) !important;
  box-shadow: 0 0 0 2px var(--px-line), 0 0 0 4px var(--px-gold), 0 0 0 6px var(--px-line);
}
.cr-panel > header::before, .cr-tree-in > header::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -22px;
  width: 45px;
  height: 39px;
  transform: translateX(-50%);
  background: var(--px-crest) center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.cr-panel > header h2 { flex: 1; text-align: center; font-size: 22px !important; }
.cr-tree-in > header .cr-kicker { color: #f6d38f !important; }

/* Close: a red square with a gold edge. */
.cr-x {
  width: 34px !important;
  height: 34px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: var(--px-red) !important;
  color: #fff !important;
  font: 400 16px var(--px-head) !important;
  box-shadow: inset 2px 2px 0 var(--px-red-hi), inset -2px -2px 0 var(--px-red-lo), 0 0 0 2px var(--px-line), 0 0 0 4px var(--px-gold), 0 0 0 6px var(--px-line);
  cursor: pointer;
}
.cr-x:hover { background: var(--px-red-hi) !important; }
.cr-x:active { box-shadow: inset -2px -2px 0 var(--px-red-hi), inset 2px 2px 0 var(--px-red-lo), 0 0 0 2px var(--px-line), 0 0 0 4px var(--px-gold), 0 0 0 6px var(--px-line); }

/* Buttons: raised wood; primary is gold; hover warms to orange. */
.cr-btn, .cr-mini-btn, .cr-tool, .cr-pause nav button, .cc-tools button, .cr-back, .cr-menu, .cr-sound {
  border-style: solid !important;
  border-width: 8px !important;
  border-radius: 0 !important;
  border-image: var(--px-btn) 4 fill / 8px stretch !important;
  background: transparent !important;
  color: var(--px-ink) !important;
  font-family: var(--px-font) !important;
  font-weight: 600;
  text-shadow: 1px 1px 0 var(--px-line);
  box-shadow: none !important;
  padding: 2px 10px !important;
}
.cr-btn:hover, .cr-mini-btn:hover, .cr-tool:hover, .cr-pause nav button:hover, .cr-pause nav button:focus-visible, .cc-tools button:hover, .cr-back:hover, .cr-menu:hover, .cr-sound:hover {
  border-image-source: var(--px-btn-hot) !important;
  color: #fff !important;
}
.cr-btn.primary, .cr-pause nav button[data-p="resume"] {
  border-image-source: var(--px-btn-gold) !important;
  color: #2a1606 !important;
  text-shadow: 1px 1px 0 rgba(255, 240, 190, .6);
}
.cr-btn.primary:hover, .cr-pause nav button[data-p="resume"]:hover { filter: brightness(1.08); color: #1a0d02 !important; }
.cr-btn:active, .cr-mini-btn:active, .cr-tool:active, .cr-pause nav button:active { transform: translateY(1px); }
.cr-btn.big { padding: 6px 22px !important; font-size: 17px !important; }
.cr-pause nav button { padding: 6px 12px !important; }
.cr-pause nav button span { color: var(--px-dim) !important; }

/* Slots and bag cells: sunken squares, rarity shown as a coloured inner edge. */
.cr-slot, .cr-cell {
  border-style: solid !important;
  border-width: 5px !important;
  border-radius: 0 !important;
  border-image: var(--px-slot) 4 fill / 5px stretch !important;
  background: transparent !important;
  padding: 0 !important;
  image-rendering: pixelated;
}
.cr-slot.sel, .cr-cell.sel { outline: 3px solid var(--px-gold) !important; outline-offset: -2px !important; }
.cr-slot:hover, .cr-cell:hover { filter: brightness(1.25); }
.cr-slot em { color: var(--px-dim) !important; font-family: var(--px-font); }
.cr-bag { gap: 2px !important; }
.cr-doll { gap: 4px !important; }

/* Numbers on parchment, like a character sheet. */
.cr-stats {
  padding: 8px 10px;
  background: var(--px-parch);
  color: var(--px-parch-ink);
  box-shadow: inset 2px 2px 0 #f0e2bd, inset -2px -2px 0 #a88b5a, 0 0 0 2px var(--px-line);
  font-family: var(--px-font);
  font-size: 14px !important;
}
.cr-stats div { border-bottom: 1px dashed rgba(58, 38, 20, .25) !important; padding: 2px 0 !important; }
.cr-stats span { color: #6a4b2a !important; }
.cr-stats b { color: var(--px-parch-ink) !important; }

/* Headings inside panels and the bag line. */
.cr-bag-head b, .cc-row-head b, .cr-mode b, .cr-mode-sub, #cr-tree-info b, .cr-lanterns li b, .cr-class b, .cr-boon b {
  font-family: var(--px-head) !important;
  color: var(--px-gold) !important;
  text-shadow: 1px 1px 0 var(--px-line);
}
.cr-bag-head > span, .cr-shards, .cc-row-head em { color: var(--px-dim) !important; font-family: var(--px-font); }
.cr-shards b { color: #e6c9ff !important; }

/* Tooltips and the detail box. */
.cr-tip { background: transparent !important; }
.cr-tip li { font-family: var(--px-font); }
.cr-detail { font-family: var(--px-font); }

/* Camp cards and the hero plate. */
.cc-hero, .cc-card { padding: 6px 10px !important; }
.cr-camp-stats span, .cr-lanterns li, .cr-bounty, .cr-dive, .cr-mode, .cr-class, .cr-boon {
  border-radius: 0 !important;
  border: 0 !important;
  background: var(--px-deep) !important;
  box-shadow: inset 2px 2px 0 #0a0604, inset -2px -2px 0 #4a3426, 0 0 0 2px var(--px-line) !important;
  font-family: var(--px-font);
}
.cr-lanterns li.lit { background: linear-gradient(90deg, rgba(242, 193, 78, .22), var(--px-deep)) !important; }
.cr-class:hover, .cr-class.is-on, .cr-boon:hover { box-shadow: inset 2px 2px 0 #0a0604, inset -2px -2px 0 #4a3426, 0 0 0 2px var(--px-line), 0 0 0 4px var(--px-gold) !important; }
.cr-class-sk i { border-radius: 0 !important; box-shadow: inset 2px 2px 0 #0a0604, inset -2px -2px 0 #4a3426; }
.cc-portrait { image-rendering: pixelated; box-shadow: 0 0 0 2px var(--px-line), 0 0 0 4px var(--px-wood-hi), 0 0 0 6px var(--px-line); background: #120c0a; }

/* Skill tree side bar and points. */
.cr-tree-in { background-clip: padding-box; }
.cr-tree-body { background: radial-gradient(70% 70% at 40% 50%, #2a1c14, #120b08 80%); }
.cr-tree-side { background: var(--px-deep) !important; border-left: 4px solid var(--px-line) !important; }
.cr-tree-points { border-radius: 0 !important; background: var(--px-deep) !important; border: 0 !important; box-shadow: 0 0 0 2px var(--px-line), 0 0 0 4px var(--px-gold), 0 0 0 6px var(--px-line); font-family: var(--px-head); }
#cr-tree-info p { color: var(--px-ink) !important; font-family: var(--px-font); }
#cr-tree-info .k { border-radius: 0 !important; font-family: var(--px-head); }

/* HUD: framed skill squares and a coin plate. */
.cr-skill { border-radius: 0 !important; border: 0 !important; box-shadow: inset 2px 2px 0 #0a0604, inset -2px -2px 0 #4a3426, 0 0 0 2px var(--px-line), 0 0 0 4px var(--px-wood), 0 0 0 6px var(--px-line) !important; background: #1b130e !important; }
.cr-xp { border-radius: 0 !important; border: 0 !important; box-shadow: 0 0 0 2px var(--px-line), 0 0 0 4px var(--px-wood), 0 0 0 6px var(--px-line); }
.cr-xp span { font-family: var(--px-font); }
.cr-purse {
  border-style: solid !important;
  border-width: 5px !important;
  border-radius: 0 !important;
  border-image: var(--px-slot) 4 fill / 5px stretch !important;
  background: transparent !important;
  padding: 0 10px !important;
  font-family: var(--px-font);
}
.cr-purse b { font-family: var(--px-head) !important; color: #fff !important; text-shadow: 1px 1px 0 var(--px-line); }
.cr-where b { font-family: var(--px-head) !important; color: var(--px-gold) !important; text-shadow: 2px 2px 0 var(--px-line); }
.cr-where span { font-family: var(--px-font) !important; font-style: normal !important; color: var(--px-dim) !important; }
kbd { border-radius: 0 !important; font-family: var(--px-head) !important; }

/* Scrollbars in the same wood. */
.cr-panel *, .cr-tree-in *, .cr-camp * { scrollbar-color: var(--px-wood-hi) var(--px-deep); scrollbar-width: thin; }

/* Small screens: thinner frames. */
@media (max-width: 640px) {
  .cr-panel, .cr-pause-in, .cr-tree-in, .cc-hero, .cc-card { border-width: 12px !important; border-image-width: 12px !important; }
  .cr-panel > header h2 { font-size: 18px !important; }
}
@media (prefers-reduced-motion: reduce) { .cr-btn:active, .cr-mini-btn:active, .cr-tool:active { transform: none; } }

/* Everything the dungeon says is pixel type too, and nothing in a menu is round. */
:root { --serif: var(--px-font); --ui: var(--px-font); }
.cr-camp *, .cr-panel *, .cr-tree *, .cr-classes *, .cr-boons *, .cr-pause *, .cr-death *, .cr-title * { border-radius: 0 !important; }
.cr-lede, .cc-lore, .cr-pause-where, .cr-where span, .cr-class em { font-style: normal !important; }
.cc-lanterns {
  border-style: solid !important;
  border-width: 16px !important;
  border-image: var(--px-frame) 8 fill / 16px stretch !important;
  background: transparent !important;
  padding: 6px 10px !important;
}
.cr-dive, .cr-diff, .cr-bounty footer button, .cr-cp {
  box-shadow: inset 2px 2px 0 #0a0604, inset -2px -2px 0 #4a3426, 0 0 0 2px var(--px-line) !important;
}
.cr-dive.is-on, .cr-diff.is-on, .cr-dive:hover { box-shadow: inset 2px 2px 0 #0a0604, inset -2px -2px 0 #4a3426, 0 0 0 2px var(--px-line), 0 0 0 4px var(--px-gold) !important; }
.cr-prog, .cr-bounty .cr-prog { height: 8px !important; background: #0a0604 !important; box-shadow: 0 0 0 2px var(--px-line); }
.cr-prog i { background: linear-gradient(var(--px-gold-hi) 0 2px, var(--px-gold) 2px) !important; }