/* Bethlehem wiki page template (BET-407, Wiki Editor). Add to the wiki's Custom HTML Head after the theme. */
.page-content .wk-lead { font-size: 1.08em; }
.page-content .wk-note { font-size: .86em; color: #5c3818; }
.page-content code { white-space: nowrap; }

/* Info box: right on desktop, full width at the top on a phone. */
.page-content table.wk-infobox { float: right; width: 300px; margin: .3em 0 1.2em 1.6em; border-collapse: collapse;
  background: #fff6e6; border: 2px solid #8e3a0c88; box-shadow: 0 3px 10px #4c280833; font-size: .82em; line-height: 1.4; }
.page-content table.wk-infobox caption { caption-side: top; background: #3a2412; color: #f6e6c8; font-family: var(--b-display);
  font-size: 1.25em; padding: 7px 10px; text-align: center; letter-spacing: .02em; }
.page-content table.wk-infobox td.wk-ib-img { text-align: center; padding: 14px 8px; background: #8e3a0c14; }
.page-content table.wk-infobox td.wk-ib-img img { box-shadow: none; border-radius: 0; image-rendering: pixelated; }
.page-content table.wk-infobox td.wk-ib-img img.wk-crown-big { width: 45px; height: auto; }
.page-content table.wk-infobox td.wk-ib-img img.wk-item { width: 72px; height: auto; }
.page-content table.wk-infobox th, .page-content table.wk-infobox td { border: 0; border-top: 1px solid #8e3a0c33; padding: 6px 10px;
  vertical-align: top; text-align: left; hyphens: manual; overflow-wrap: break-word; }
.page-content table.wk-infobox th { width: 40%; background: #8e3a0c14; font-weight: 700; color: #3c210a; }

/* Data tables: never squash, never break words. On a phone each row becomes a card. */
.page-content table.wk-t { width: auto; max-width: 100%; border-collapse: collapse; margin: .6em 0 1em; font-size: .88em; line-height: 1.45; }
.page-content table.wk-t th { background: #3a2412; color: #f6e6c8; text-align: left; font-weight: 700; padding: 7px 10px; border: 1px solid #3a2412; }
.page-content table.wk-t td { padding: 7px 10px; vertical-align: top; border: 1px solid #8e3a0c40; background: #fff6e6aa; }
.page-content table.wk-t tbody tr:nth-child(even) td { background: #f3dfbd88; }
.page-content table.wk-t th, .page-content table.wk-t td { hyphens: manual; -webkit-hyphens: manual; word-break: normal; overflow-wrap: normal; }
.page-content table.wk-t td:first-child { font-weight: 700; }

/* Small rank crowns next to rank names. */
.page-content img.wk-crown { height: 1.05em; width: auto; vertical-align: -.12em; margin-right: .25em; box-shadow: none; border-radius: 0; image-rendering: pixelated; }

/* Numbered steps with round numbers. */
.page-content ol.wk-steps { list-style: none; counter-reset: wkstep; padding-left: 0; }
.page-content ol.wk-steps > li { counter-increment: wkstep; position: relative; padding-left: 2.3em; margin: .45em 0; }
.page-content ol.wk-steps > li::before { content: counter(wkstep); position: absolute; left: 0; top: .1em; width: 1.55em; height: 1.55em;
  border-radius: 50%; background: #8e3a0c; color: #fff3df; font: 700 .85em/1.55em var(--b-body); text-align: center; }

/* "On this page" line for long guide pages. */
.page-content p.wk-toc { font-size: .86em; background: #fff6e6aa; border: 1px solid #8e3a0c40; padding: 6px 12px; }

/* Navigation box at the bottom of every page in a family. */
.page-content table.wk-navbox { width: 100%; clear: both; border-collapse: collapse; margin: 2.2em 0 1em; font-size: .82em; line-height: 1.6; }
.page-content table.wk-navbox caption { caption-side: top; background: #3a2412; color: #f6e6c8; font-family: var(--b-display); font-size: 1.15em; padding: 6px 10px; text-align: center; }
.page-content table.wk-navbox th { width: 9em; text-align: right; background: #8e3a0c22; padding: 6px 10px; border: 1px solid #8e3a0c40; color: #3c210a; vertical-align: top; }
.page-content table.wk-navbox td { padding: 6px 10px; border: 1px solid #8e3a0c40; background: #fff6e6aa; }
.page-content table.wk-navbox td a { white-space: nowrap; }
.page-content table.wk-navbox td .wk-here { font-weight: 700; white-space: nowrap; }
.page-content p.wk-footer { clear: both; font-size: .78em; color: #6b4a2a; border-top: 1px solid #8e3a0c33; padding-top: .6em; }

/* Short 2-column lists (item / price) stay a table on a phone. */
.page-content table.wk-t.wk-keep td:first-child { font-weight: 400; }

@media (max-width: 700px) {
  .page-content table.wk-infobox { float: none; width: 100%; margin: 0 0 1.2em; }
  .page-content table.wk-t:not(.wk-keep) thead { display: none; }
  .page-content table.wk-t:not(.wk-keep), .page-content table.wk-t:not(.wk-keep) tbody, .page-content table.wk-t:not(.wk-keep) tr, .page-content table.wk-t:not(.wk-keep) td { display: block; width: 100%; box-sizing: border-box; }
  .page-content table.wk-t.wk-keep { width: 100%; }
  .page-content table.wk-t:not(.wk-keep) tr { margin: 0 0 .7em; border: 1px solid #8e3a0c55; border-radius: 4px; overflow: hidden; background: #fff6e6; }
  .page-content table.wk-t:not(.wk-keep) td, .page-content table.wk-t:not(.wk-keep) tbody tr:nth-child(even) td { border: 0; border-top: 1px solid #8e3a0c22; background: transparent; padding: 5px 10px; }
  .page-content table.wk-t:not(.wk-keep) tbody tr td:first-child, .page-content table.wk-t:not(.wk-keep) tbody tr:nth-child(even) td:first-child { border-top: 0; background: #3a2412; color: #f6e6c8; }
  .page-content table.wk-t:not(.wk-keep) td:first-child a { color: #ffd27a; }
  .page-content table.wk-t:not(.wk-keep) td:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 700; color: #6b4a2a; }
  .page-content table.wk-navbox th { display: block; width: auto; text-align: left; }
  .page-content table.wk-navbox td { display: block; }
}

/* ---- Pictures (BET-428 round 2): item icons, shop pictures, step and ladder diagrams ---- */
/* Item icon drawn by the game, 32x32. */
.page-content img.wk-ico { width: 32px; height: 32px; max-width: none; vertical-align: middle; margin: 0; box-shadow: none; border-radius: 0; image-rendering: pixelated; }
.page-content table.wk-infobox td.wk-ib-img img.wk-item { width: 64px; height: 64px; }
.page-content table.wk-infobox td.wk-ib-img { background: #3c3227; }
.page-content table.wk-infobox td.wk-ib-img img.wk-crown-big { margin-left: 14px; vertical-align: middle; }
.page-content table.wk-infobox td.wk-ib-img img.wk-item { vertical-align: middle; }
.page-content table.wk-t td .wk-ico { margin-right: 6px; }

/* Shop: the in-game picture next to its price list (same order as the picture). */
.page-content p.wk-where { margin: .2em 0 .6em; }
.page-content .wk-shop { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: flex-start; margin: .5em 0 1.9em; }
.page-content .wk-shop > p.wk-shot { flex: 0 1 430px; min-width: 0; margin: 0; font-size: .8em; color: #6b4a2a; line-height: 1.35; }
.page-content p.wk-shot img { display: block; width: 100%; height: auto; margin: 0 0 4px; border-radius: 4px; box-shadow: 0 2px 8px #4c280855; }
.page-content ul.wk-plist { flex: 1 1 290px; min-width: 0; list-style: none; margin: 0; padding: 0; font-size: .92em; line-height: 1.3; border: 1px solid #8e3a0c40; background: #fff6e6aa; }
.page-content ul.wk-plist > li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 2px 10px 2px 4px; border-top: 1px solid #8e3a0c26; break-inside: avoid; list-style: none; }
.page-content ul.wk-plist > li.wk-ph { column-span: all; border-top: 0; background: #3a2412; color: #f6e6c8; font-weight: 700; padding: 6px 10px; font-size: .9em; }
.page-content ul.wk-plist .wk-pi { flex: 0 0 36px; height: 36px; display: grid; place-items: center; background: #3c3227; border-radius: 4px; }
.page-content ul.wk-plist .wk-pn { flex: 1 1 auto; min-width: 0; }
.page-content ul.wk-plist .wk-pp { flex: 0 0 auto; margin-left: auto; font-weight: 700; white-space: nowrap; color: #5a1d06; }
.page-content ul.wk-plist > li.wk-ph .wk-pp { color: inherit; }
.page-content .wk-shop.wk-long { display: block; }
.page-content .wk-shop.wk-long > p.wk-shot { max-width: 480px; margin: 0 0 12px; }
.page-content .wk-shop.wk-long > ul.wk-plist { columns: 2; column-gap: 0; column-rule: 1px solid #8e3a0c40; }

.page-content .wk-shop.wk-noshot > ul.wk-plist { flex: 0 1 470px; }
.page-content .wk-shop.wk-long.wk-noshot > ul.wk-plist { max-width: none; }

/* Steps as a row of numbered tiles with arrows. */
.page-content ol.wk-flow { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: .8em 0 1.3em; padding: 0; list-style: none; counter-reset: wkflow; }
.page-content ol.wk-flow > li { counter-increment: wkflow; position: relative; flex: 1 1 140px; margin: 0; padding: 12px 10px; list-style: none; text-align: center;
  background: #fff9f0; border: 1px solid #8e3a0c40; border-radius: 10px; box-shadow: 0 2px 6px #4c28081f; font-size: .88em; line-height: 1.35; }
.page-content ol.wk-flow > li::before { content: counter(wkflow); display: block; width: 1.7em; height: 1.7em; margin: 0 auto 6px; border-radius: 50%;
  background: #8e3a0c; color: #fff3df; font: 700 1em/1.7em var(--b-body); }
.page-content ol.wk-flow > li:not(:last-child)::after { content: "\279C"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: #8e3a0c; font-size: 1.15em; }
.page-content ol.wk-flow > li b { display: block; font-size: 1.08em; margin-bottom: 2px; }

/* Ladder: one tile per rank or level, cheapest first. */
.page-content ul.wk-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; margin: .8em 0 1.3em; padding: 0; list-style: none; }
.page-content ul.wk-ladder > li { margin: 0; padding: 10px 6px 9px; list-style: none; text-align: center; background: #fff9f0; border: 1px solid #8e3a0c40; border-top: 4px solid #8e3a0c;
  border-radius: 8px; box-shadow: 0 2px 6px #4c28081f; font-size: .84em; line-height: 1.3; }
.page-content ul.wk-ladder .wk-lp { display: block; font: 800 1.45em/1.25 var(--b-body); color: #7a1d0a; }
.page-content ul.wk-ladder .wk-ln { display: block; font-weight: 700; margin: 2px 0; }
.page-content ul.wk-ladder .wk-li { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 4px 0 2px; background: #3c3227; border-radius: 6px; }
.page-content ul.wk-ladder img.wk-crown-big { width: 27px; height: auto; box-shadow: none; border-radius: 0; image-rendering: pixelated; }

.page-content ul.wk-ladder .wk-lu { display: block; font-size: .94em; }
.page-content ul.wk-ladder > li.wk-here { border-color: #c86d02; background: #fff1d6; box-shadow: 0 0 0 2px #c86d02; }
.page-content ul.wk-ladder .wk-ln img.wk-crown { margin-right: .2em; }

.page-content ul.wk-ladder li::marker, .page-content ul.wk-plist li::marker { content: none; }

/* Picture row with captions (zones, bosses, rewards). */
.page-content .wk-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: .6em 0 1.3em; }
.page-content .wk-gal > p { margin: 0; font-size: .8em; color: #6b4a2a; line-height: 1.35; text-align: center; }
.page-content .wk-gal > p img { display: block; width: 100%; height: 150px; object-fit: cover; margin: 0 0 4px; border-radius: 6px; box-shadow: 0 2px 8px #4c280855; }
.page-content .wk-gal > p img.wk-fit { object-fit: contain; background: #3c3227; image-rendering: pixelated; }

/* Goodiebag cards: the bag's exact name under the prize. */
.page-content .gb-pic img.gb-sprite.wk-gbico { height: 96px; max-height: 96px; }
.page-content .gb-card p.wk-gbbag { margin-top: 3px; font-size: .78em; line-height: 1.3; color: #6e461f; }

@media (max-width: 700px) {
  .page-content .wk-shop.wk-long > ul.wk-plist { columns: 1; }
  .page-content ol.wk-flow { flex-direction: column; gap: 26px; }
  .page-content ol.wk-flow > li { flex: 0 0 auto; }
  .page-content ol.wk-flow > li:not(:last-child)::after { content: "\25BC"; right: 50%; top: auto; bottom: -24px; transform: translateX(50%); }
  .page-content ul.wk-ladder { grid-template-columns: repeat(2, 1fr); }
  .page-content .wk-gal { grid-template-columns: repeat(2, 1fr); }
  .page-content .wk-gal > p img { height: 110px; }
}

/* ---- v2 (BET-428, after going live): work with the theme's table script (BET-391) ----
   That script boxes every table (.bx-tscroll: clear + scroll) and every cell's content (.bx-v), and it writes the
   phone labels (data-label) from the column titles. The wiki drops data-label when a page is saved, so the script is
   the only source of labels. Keep the labels; undo the boxes for wk- tables so they sit as designed. */
.page-content .bx-tscroll:has(> table.wk-infobox) { float: right; clear: none; overflow: visible; margin: 0; }
.page-content .bx-tscroll > table.wk-infobox { float: none; margin: .3em 0 1.2em 1.6em; }
.page-content .bx-tscroll:has(> table.wk-t) { clear: none; overflow: visible; margin: 0; }
.page-content .bx-tscroll > table.wk-t { margin: .6em 0 1em; }
.page-content .bx-tscroll:has(> table.wk-navbox) { overflow: visible; margin: 0; }
.page-content .bx-tscroll > table.wk-navbox { margin: 2.2em 0 1em; }
.page-content table.wk-t .bx-v { display: contents; }
@media (max-width: 700px) {
  .page-content .bx-tscroll:has(> table.wk-infobox) { float: none; }
  .page-content .bx-tscroll > table.wk-infobox { margin: 0 0 1.2em; }
  .page-content table.wk-t:not(.wk-keep) td:not([data-label])::before { content: none; }
}