/* TATAZO Wiki: the approved mockups in design/wiki-mockups/ are the binding look.
   Warm parchment, gold double-line frames, navy Merriweather headings, Cinzel capitals, turquoise
   diamond gems, meander borders and a compass watermark; a navy night look of the same design.
   Fonts are bundled (assets/fonts, SIL Open Font License); nothing is loaded from other sites. */

@font-face { font-family: "Merriweather"; src: url(fonts/merriweather.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url(fonts/merriweather-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather Display"; src: url(fonts/merriweather-display.woff2) format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url(fonts/cinzel.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(fonts/nunito.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --bg: #F4ECDA;
  --bg-2: #EFE3C9;
  --panel: #FAF5E9;
  --panel-2: #FDFAF3;
  --row: #FBF6EC;
  --row-line: #E6D6B4;
  --hair: rgba(196, 150, 60, .55);
  --gold: #E7B53C;
  --gold-1: #F6D983;
  --gold-2: #D9A441;
  --gold-3: #B07A1E;
  --gold-4: #8A5C12;
  --turq: #22C3D6;
  --turq-2: #0E9CB2;
  --navy: #173A8C;
  --navy-2: #1F4AA3;
  --navy-deep: #0F2A66;
  --head: #14285F;
  --ink: #1C2745;
  --ink-soft: #545B72;
  --amber: #E38B1F;
  --amber-2: #C06A0C;
  --jungle: #2F6B33;
  --link: #173A8C;
  --link-hover: #0E9CB2;
  --shadow: rgba(110, 76, 22, .16);
  --glass: rgba(255, 252, 244, .92);
  --r-Common: #8C8C86;
  --r-Uncommon: #3E9E3A;
  --r-Rare: #2A78D6;
  --r-Epic: #8A4AD6;
  --r-Legendary: #E19A12;
  --serif: "Merriweather", Georgia, "Times New Roman", serif;
  --display: "Merriweather Display", "Merriweather", Georgia, serif;
  --caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --sans: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1480px;
  --gutter: 40px;
  color-scheme: light;
}

/* The night look: the same design in royal navy, gold and parchment text (chosen with the moon button). */
:root[data-theme="dark"] {
  --bg: #0E1F4B;
  --bg-2: #0B1A40;
  --panel: #13295E;
  --panel-2: #173170;
  --row: #16306B;
  --row-line: #2A4A8E;
  --hair: rgba(231, 181, 60, .45);
  --head: #F6D983;
  --ink: #F1E8D3;
  --ink-soft: #C3C9DB;
  --link: #7FE3F0;
  --link-hover: #F6D983;
  --shadow: rgba(0, 0, 0, .35);
  --glass: rgba(19, 41, 94, .94);
  --r-Common: #C9C6BC;
  --r-Uncommon: #7FD66F;
  --r-Rare: #7FB6FF;
  --r-Epic: #CFA2FF;
  --r-Legendary: #FFC54A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* No sideways scroll on phones: decorative leaves and flourishes may reach past the edge. On html as well as body,
   because mobile Safari ignores it on body alone; "clip" where supported, so sticky side panels keep working. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.6;
  background-color: var(--bg);
  background-image:
    url(img/side.svg), url(img/side.svg),
    url(img/compass-faint.svg), url(img/compass-faint.svg),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 40% 60% at 0% 60%, rgba(214, 186, 128, .18), rgba(214, 186, 128, 0) 70%),
    radial-gradient(ellipse 40% 60% at 100% 40%, rgba(214, 186, 128, .18), rgba(214, 186, 128, 0) 70%);
  background-repeat: repeat-y, repeat-y, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left 6px top 90px, right 6px top 90px, left -60px top 1150px, right -70px top 1750px, 0 0, 0 0, 0 0;
  background-size: 34px 433px, 34px 433px, 250px 250px, 280px 280px, auto, auto, auto;
}
:root[data-theme="dark"] body { background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(80, 120, 220, .25), rgba(80, 120, 220, 0) 70%); }
body > main { flex: 1 0 auto; width: 100%; max-width: calc(1450px + 2 * var(--gutter)); margin: 0 auto; padding: 18px var(--gutter) 34px; }
.pg-home > main { max-width: none; padding: 0 0 13px; }

a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--turq); outline-offset: 2px; border-radius: 6px;
}
img, svg { max-width: 100%; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 90; background: var(--gold); color: #14213D;
  padding: 8px 14px; border-radius: 8px; font-family: var(--sans); font-weight: 800;
}
.skip:focus { left: 8px; }

/* --- Header: parchment bar, logo, nav with gold diamonds, the amber search ------------------------ */

.top {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, #FDF9EF, #F8F0DE);
  border-bottom: 1px solid var(--gold-2);
  box-shadow: 0 1px 0 #FFF8E6, 0 3px 0 rgba(217, 164, 65, .45), 0 6px 14px rgba(110, 76, 22, .10);
}
.top::before, .top::after {
  content: ""; position: absolute; top: 8px; width: 30px; height: 30px; opacity: .9;
  background: url(img/meander.svg) center / contain no-repeat; pointer-events: none;
}
.top::before { left: 10px; }
.top::after { right: 10px; }
.bar {
  position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  height: 76px; display: flex; align-items: center; gap: 22px; padding: 0 28px;
}
.brand { display: block; flex: none; line-height: 0; margin-left: 4px; }
.brand img { width: 176px; height: auto; filter: drop-shadow(0 2px 2px rgba(80, 50, 10, .25)); }
.nav { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; min-width: 0; }
.nav a {
  position: relative; flex: none; padding: 7px 14px; margin: 0 5px; border-radius: 10px;
  font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--head); text-decoration: none; white-space: nowrap;
}
.nav a + a::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: url(img/dia.svg) center / contain no-repeat; pointer-events: none;
}
.nav a:hover { color: var(--navy-2); background: rgba(231, 181, 60, .16); }
.nav a[aria-current="page"] {
  background: linear-gradient(180deg, #FBE6A6, #EBC260); color: #14285F;
  box-shadow: inset 0 0 0 1px #D9A441, 0 2px 4px rgba(150, 100, 20, .25);
}
.search { position: relative; flex: 0 1 310px; margin: 0; display: flex; }
.search input {
  width: 100%; height: 42px; font: 400 16px var(--sans); color: #1C2745;
  padding: 0 52px 0 40px; border: 1.5px solid #D6B071; border-radius: 999px;
  background: #FFFDF7; box-shadow: inset 0 1px 3px rgba(120, 80, 20, .12), 0 1px 0 #fff;
}
.search input::placeholder { color: #6A6A74; }
.search::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.3' fill='none' stroke='%239A6A1E' stroke-width='2.6'/%3E%3Cpath d='M15.3 15.3 20.5 20.5' stroke='%239A6A1E' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search .go {
  position: absolute; right: 0; top: 0; height: 42px; width: 48px; border: 0; cursor: pointer; color: #fff;
  border-radius: 0 999px 999px 0; background: linear-gradient(180deg, #F2A93A, #D97C12 60%, #C46A0A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px #B8650E; font-size: 20px; display: grid; place-items: center;
}
.search .go:hover { filter: brightness(1.06); }
.theme, .find, .burger {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1.5px solid #D6B071; background: #FFFDF7; color: #9A6A1E; font-size: 18px; padding: 0;
}
.theme .i-sun, :root[data-theme="dark"] .theme .i-moon { display: none; }
:root[data-theme="dark"] .theme .i-sun { display: inline-block; }
.find, .burger { display: none; }
.leaves {
  position: absolute; top: -14px; width: 220px; height: 220px; z-index: 1; pointer-events: none;
  background: url(img/leaves.webp) left top / contain no-repeat;
}
.leaves.l { left: -70px; transform: rotate(8deg); }
.leaves.r { right: -70px; transform: scaleX(-1) rotate(8deg); }

.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 300px;
  background: var(--panel-2); color: var(--ink); border: 2px solid var(--gold-2); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(60, 40, 10, .25); max-height: 70vh; overflow: auto; padding: 5px;
}
.results a { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.results a b { font-family: var(--serif); color: var(--head); }
.results a .k { margin-left: auto; font: 700 12px var(--sans); color: var(--ink-soft); white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; }
.results a small { display: block; color: var(--ink-soft); font: 13px/1.3 var(--sans); }
.results a.on, .results a:hover { background: rgba(231, 181, 60, .18); }
.results .none { padding: 10px; color: var(--ink-soft); font-family: var(--sans); }
.results .more { justify-content: center; font: 800 14px var(--sans); color: var(--link); }

/* --- The phone menu: a navy drawer with gold-framed round icons ---------------------------------------- */

.drawer { position: fixed; inset: 0; z-index: 80; background: rgba(10, 20, 50, .55); display: flex; justify-content: flex-start; }
.drawer[hidden] { display: none; }
.drawer-in {
  position: relative; width: min(380px, 92vw); height: 100%; overflow: auto; padding: 22px 22px 150px;
  color: #F4E9CC; border-right: 3px solid var(--gold-2);
  background:
    url(img/drawer-night.webp) center bottom 5px / 100% auto no-repeat local,
    radial-gradient(ellipse 90% 22% at 50% 100%, rgba(80, 130, 220, .45), rgba(80, 130, 220, 0) 70%),
    radial-gradient(ellipse 80% 40% at 50% 0%, #26489A, rgba(38, 72, 154, 0) 70%),
    linear-gradient(180deg, #152F72, #0E2458 60%, #0B1D49);
  box-shadow: inset 0 0 0 5px #0E2458, inset 0 0 0 6px rgba(231, 181, 60, .6);
}
.drawer .close { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border: 0; background: none; color: var(--gold-1); font-size: 26px; cursor: pointer; }
.drawer-logo { text-align: center; margin: 4px 0 0; line-height: 1; }
.drawer-logo img { width: 210px; height: auto; }
.drawer-logo span {
  display: block; font: 900 40px/1 var(--display); color: #F4CB5E; margin-top: -4px;
  text-shadow: 0 2px 0 #7A4B08, 0 0 12px rgba(0, 0, 0, .35);
}
.drawer nav { margin-top: 6px; }
.dl { display: flex; align-items: center; gap: 16px; padding: 12px 6px 14px; text-decoration: none; color: #F4E9CC; position: relative; }
.dl + .dl::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 12px; margin-top: -6px;
  background: url(img/dia.svg) center / 10px 10px no-repeat, linear-gradient(90deg, rgba(231, 181, 60, 0), rgba(231, 181, 60, .7) 20%, rgba(231, 181, 60, .7) 80%, rgba(231, 181, 60, 0)) center / 100% 1px no-repeat;
}
.orb {
  flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: #F6D983;
  background: radial-gradient(circle at 50% 38%, #24479A, #0E2458 72%);
  box-shadow: inset 0 0 0 2px #0E2458, inset 0 0 0 3.5px #E7B53C, 0 0 0 2px #8A5C12, 0 3px 8px rgba(0, 0, 0, .4);
}
.dl-t { flex: 1; min-width: 0; }
.dl-t b { display: block; font: 700 26px/1.2 var(--serif); color: #F7E7BE; }
.dl-t small { display: block; font: 400 15px/1.4 var(--serif); color: #E8DDC2; padding-left: 22px; background: url(img/gem.svg) left center / 14px 14px no-repeat; }
.dl .chev-r { color: #E8DDC2; font-size: 18px; }
.dl[aria-current="page"] b, .dl:hover b { color: #FFD96A; }
.drawer .motto { text-align: center; }

/* --- Ornaments: dividers, gems, framed panels ------------------------------------------------------------- */

hr.dv, .dv {
  border: 0; height: 24px; margin: 18px 0; clear: both;
  background:
    url(img/dv.svg) center / 96px 24px no-repeat,
    linear-gradient(90deg, rgba(217, 164, 65, 0), var(--gold-2) 6%, var(--gold-2) calc(50% - 50px), transparent calc(50% - 50px), transparent calc(50% + 50px), var(--gold-2) calc(50% + 50px), var(--gold-2) 94%, rgba(217, 164, 65, 0)) center / 100% 1.5px no-repeat;
}
.gem { display: inline-block; width: 20px; height: 20px; flex: none; background: url(img/gem.svg) center / contain no-repeat; vertical-align: -3px; }
.motto {
  font: italic 400 18px var(--serif); color: var(--head); margin: 12px 0; display: flex; align-items: center; justify-content: center; gap: 12px;
}
.motto::before, .motto::after { content: ""; width: 54px; height: 10px; background: url(img/dia.svg) right center / 8px 8px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left center / calc(100% - 10px) 1.5px no-repeat; }
.motto::after { transform: scaleX(-1); }
.drawer .motto { color: #F6D983; font-size: 20px; margin-top: 18px; }

.panel, .orn {
  position: relative; background: var(--panel); border: 2px solid var(--gold-2); border-radius: 12px; padding: 18px 22px; margin: 0 0 22px;
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px rgba(217, 164, 65, .55), 0 2px 0 rgba(255, 255, 255, .6), 0 4px 14px var(--shadow);
}
.panel.tight { padding: 12px 16px; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: .1em; }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--head); line-height: 1.2; font-weight: 700; }
h1 { font: 900 clamp(34px, 4.2vw, 52px)/1.1 var(--display); color: var(--head); margin: .15em 0 .3em; letter-spacing: -.01em; }
h2 { font-size: 29px; margin: 1.2em 0 .5em; }
h3 { font-size: 20px; margin: 1.1em 0 .4em; }
p { margin: .6em 0; }
.lead { font-size: 18px; color: var(--ink-soft); }
main > h1:first-of-type, .list-head h1 {
  display: flex; align-items: center; gap: 16px;
}
main > h1:first-of-type::after, .list-head h1::after {
  content: ""; flex: 1 1 auto; min-width: 60px; max-width: 520px; height: 22px;
  background: url(img/gem.svg) left center / 22px 22px no-repeat, linear-gradient(90deg, var(--gold-2), rgba(217, 164, 65, 0)) 24px center / calc(100% - 24px) 1.5px no-repeat;
}
.gem-h, .panel > h2, .sec > h2 { display: flex; align-items: center; gap: 12px; }
.gem-h::before, .panel > h2::before, .sec > h2::before { content: ""; width: 24px; height: 24px; flex: none; background: url(img/gem.svg) center / contain no-repeat; }
.orn-h { justify-content: center; text-align: center; }
.orn-h::before, .orn-h::after, .panel > h2.orn-h::before {
  content: ""; width: 70px; height: 16px; flex: none;
  background: url(img/dia-line.svg) right center / 16px 16px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left center / calc(100% - 18px) 1.5px no-repeat;
}
.orn-h::after { transform: scaleX(-1); }
.line-h { display: flex; align-items: center; gap: 12px; }
.line-h::after { content: ""; flex: 1; height: 10px; background: url(img/dia.svg) left center / 8px 8px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) 10px center / calc(100% - 10px) 1.5px no-repeat; }

/* Icons in gold-framed slots with a rarity glow */
.slot {
  --rc: #B9A27A; position: relative; display: inline-grid; place-items: center; flex: none;
  width: 72px; height: 72px; border-radius: 12px; padding: 5px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc) 55%, #fff) 0, var(--rc) 45%, color-mix(in srgb, var(--rc) 55%, #000) 100%) padding-box,
    linear-gradient(145deg, #FFE7A0, #D9A441 35%, #F3CD68 55%, #A87318) border-box;
  border: 3px solid transparent;
  box-shadow: inset 0 0 0 1.5px rgba(80, 50, 5, .55), 0 0 0 1px rgba(120, 80, 15, .5), 0 3px 8px rgba(80, 50, 10, .28), 0 0 14px -2px color-mix(in srgb, var(--rc) 70%, transparent);
}
.slot::before {
  content: ""; position: absolute; inset: 3px; border-radius: 8px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .16) 0 6deg, rgba(255, 255, 255, 0) 6deg 18deg);
  mask: radial-gradient(circle, #000 20%, transparent 72%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 72%);
}
.slot > img, .slot > svg { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.slot.r-Common { --rc: #8E8C86; }
.slot.r-Uncommon { --rc: #3E9E3A; }
.slot.r-Rare { --rc: #2A78D6; }
.slot.r-Epic { --rc: #8A4AD6; }
.slot.r-Legendary { --rc: #E7A21C; }
.slot.plain { --rc: #E9D9B4; }
.slot.navy { --rc: #1F4AA3; }
.slot.sparks::after {
  content: ""; position: absolute; inset: -4px -18px; pointer-events: none;
  background: url(img/sparkle.svg) left center / 12px 12px no-repeat, url(img/sparkle.svg) right center / 12px 12px no-repeat;
}

.rar {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 20px 6px 12px; border-radius: 12px; white-space: nowrap;
  font: 700 22px/1.2 var(--serif); color: #FFF6DC; text-shadow: 0 1px 1px rgba(60, 30, 0, .6);
  background: linear-gradient(180deg, #E9A53A, #C8741A 55%, #A85A0C);
  border: 2px solid #8A4B08; box-shadow: inset 0 0 0 1.5px #F6C76A, 0 2px 4px rgba(90, 50, 5, .35);
}
.rar::before { content: ""; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 23 12 12 23 1 12z' fill='%23FFF1C4'/%3E%3Cpath d='M12 4 20 12 12 20 4 12z' fill='%23F2B63C'/%3E%3Cpath d='M12 4 20 12H4z' fill='%23FFE08A'/%3E%3C/svg%3E") center / contain no-repeat; }
.rar.r-Common { background: linear-gradient(180deg, #A8A59C, #86837A 55%, #6E6B63); border-color: #54524C; box-shadow: inset 0 0 0 1.5px #D2CFC4, 0 2px 4px rgba(0, 0, 0, .25); }
.rar.r-Uncommon { background: linear-gradient(180deg, #5DB852, #3A8E32 55%, #2B7025); border-color: #1F5A1A; box-shadow: inset 0 0 0 1.5px #A5E08E, 0 2px 4px rgba(0, 0, 0, .25); }
.rar.r-Rare { background: linear-gradient(180deg, #4D93E6, #2A6FC8 55%, #1E57A6); border-color: #153F7C; box-shadow: inset 0 0 0 1.5px #A9CCF5, 0 2px 4px rgba(0, 0, 0, .25); }
.rar.r-Epic { background: linear-gradient(180deg, #A06BE6, #7F45C8 55%, #6533A6); border-color: #4A2280; box-shadow: inset 0 0 0 1.5px #D2B5F5, 0 2px 4px rgba(0, 0, 0, .25); }
.rar[class] { color: #FFF6DC; }
.rar.sm { font-size: 15px; padding: 2px 12px 3px 8px; gap: 6px; border-radius: 9px; }
.rar.sm::before { width: 14px; height: 14px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font: 700 17px var(--serif); text-decoration: none; cursor: pointer;
  color: #3A2408; padding: 9px 22px; border-radius: 10px; border: 2px solid #B07A1E;
  background: linear-gradient(180deg, #FBE09A, #EFC056 55%, #E0A73A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 4px rgba(90, 60, 10, .3);
}
.btn:hover { color: #3A2408; filter: brightness(1.04); }
.btn.navy { color: #F7E7BE; border-color: #0E2458; background: linear-gradient(180deg, #2A55B0, #173A8C); }
.btn.cream { background: linear-gradient(180deg, #FFFDF6, #F4ECDA); }
.btn.green { background: linear-gradient(180deg, #CBEA9F, #9CCB6B); }

/* --- Chips, tags, stats ------------------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font: 700 14px/1.5 var(--sans); padding: 2px 11px;
  border: 1.5px solid #D6B071; border-radius: 999px; background: var(--panel-2); color: var(--ink); text-decoration: none; white-space: nowrap;
}
a.chip:hover { background: #FFF3D2; color: var(--head); }
.chip .ic, .chip img { width: 20px; height: 20px; }
.chip.rarity-Common, .r-Common { color: var(--r-Common); }
.chip.rarity-Uncommon, .r-Uncommon { color: var(--r-Uncommon); }
.chip.rarity-Rare, .r-Rare { color: var(--r-Rare); }
.chip.rarity-Epic, .r-Epic { color: var(--r-Epic); }
.chip.rarity-Legendary { color: #A3620A; }
.r-Legendary { color: #A3620A; }
:root[data-theme="dark"] .chip.rarity-Legendary, :root[data-theme="dark"] .r-Legendary { color: var(--r-Legendary); }
.chip.rarity-Common, .chip.rarity-Uncommon, .chip.rarity-Rare, .chip.rarity-Epic { filter: saturate(1.1); }
.chip.boss { background: var(--navy); color: #F6D983; border-color: #0E2458; }
.chip.warn { background: #FBE3D8; color: #7A1D10; border-color: #C9765E; }
.chip.el { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); border-color: rgba(0, 0, 0, .25); }
.el-Physical { background: #7C786C; }
.el-Fire { background: #D9481F; }
.el-Ice { background: #2F95C8; }
.el-Energy { background: #B08B0C; }
.el-Earth { background: #8A6232; }
.el-Holy { background: #C4910F; }
.el-Death { background: #6D3FA6; }

.facts { width: 100%; border-collapse: separate; border-spacing: 0; }
.facts th { text-align: left; font-weight: 700; color: var(--ink-soft); padding: 7px 12px 7px 0; vertical-align: top; width: 42%; }
.facts td { padding: 7px 0; font-weight: 700; color: var(--head); }
.facts tr + tr th, .facts tr + tr td { border-top: 1px solid var(--row-line); }

.quote {
  position: relative; background: var(--panel-2); border: 1.5px solid var(--hair); border-left: 4px solid var(--gold-2); border-radius: 10px;
  padding: 12px 18px; margin: 12px 0 18px; font-style: italic; color: var(--ink);
}
.quote p { margin: .2em 0; }
.hook { font-style: italic; color: var(--ink-soft); font-size: 17px; margin: 2px 0 10px; }
.hook a { font-style: normal; font-weight: 700; }

/* Tables: parchment rows, gold frame, serif header */
.table-wrap { overflow-x: auto; border-radius: 10px; border: 1.5px solid #DCC08A; background: var(--row); box-shadow: inset 0 0 0 2px var(--row), inset 0 0 0 3px rgba(217, 164, 65, .3); }
table.list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
table.list th {
  text-align: left; padding: 9px 12px; white-space: nowrap; font: 700 15px var(--serif); color: var(--head);
  background: linear-gradient(180deg, #FBF3E1, #F3E6C9); border-bottom: 1.5px solid #DCC08A; position: sticky; top: 0;
}
table.list td { padding: 9px 12px; border-bottom: 1px solid var(--row-line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list tbody tr:hover td { background: rgba(231, 181, 60, .09); }
table.list td.num, table.list th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.list td .ic, table.list td .cr { width: 32px; height: 32px; vertical-align: middle; margin-right: 8px; }
table.list a { font-weight: 700; text-decoration: none; }
table.list a:hover { text-decoration: underline; }
table.list th[data-sort] { cursor: pointer; }
table.list th[data-sort]::after { content: " ⇅"; color: var(--gold-3); font-size: .8em; }
.panel > .table-wrap, .panel.table-wrap { margin: 6px 0; }
.panel.table-wrap { padding: 0; }

.filter {
  width: 100%; max-width: 420px; font: 16px var(--sans); padding: 9px 16px 9px 40px; border: 1.5px solid #D6B071; border-radius: 999px; color: var(--ink); margin: 4px 0 14px;
  background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.3' fill='none' stroke='%239A6A1E' stroke-width='2.6'/%3E%3Cpath d='M15.3 15.3 20.5 20.5' stroke='%239A6A1E' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 14px center / 18px 18px no-repeat;
}
.inputs { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.arrow { font-weight: 900; color: var(--turq-2); padding: 0 4px; }

.callout {
  border: 1.5px solid var(--hair); border-radius: 12px; padding: 12px 16px 12px 58px; margin: 14px 0; position: relative; background: #EEF7E4;
}
.callout::before {
  position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 900 16px var(--sans); color: #3A2408; content: "!";
  background: radial-gradient(circle at 50% 40%, #FBE09A, #E0A73A); box-shadow: inset 0 0 0 1.5px #B07A1E;
}
.callout.note { background: #E6F4F8; }
.callout.note::before { content: "i"; }
.callout.fact { background: #FBF0D4; }
.callout.fact::before { content: "★"; }
.callout.safe { background: #F0EAF8; }
.callout.safe::before { content: "♥"; }
.callout.warn { background: #FBE7DE; }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout b.title { display: block; font-family: var(--serif); color: var(--head); }
:root[data-theme="dark"] .callout { background: #173A5E; }
:root[data-theme="dark"] .callout.note { background: #14385A; }
:root[data-theme="dark"] .callout.fact { background: #3A3418; }
:root[data-theme="dark"] .callout.safe { background: #2C2750; }
:root[data-theme="dark"] .callout.warn { background: #4A2A22; }

kbd { font: 800 .85em var(--sans); background: var(--panel-2); color: var(--ink); border: 1.5px solid #D6B071; border-bottom-width: 3px; border-radius: 7px; padding: 0 7px; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; background: var(--bg-2); padding: 1px 5px; border-radius: 5px; }

.prose { max-width: 48rem; }
.prose li { margin: .3em 0; }
.prose img { border-radius: 12px; }
.prose ul, .panel ul { padding-left: 1.3em; }
.prose ul > li::marker, .panel ul > li::marker, .sec ul > li::marker { content: "◆  "; color: var(--turq-2); font-size: .8em; }
.tale { font-size: 18px; line-height: 1.8; }
.tale p:first-of-type::first-letter { float: left; font: 900 3.4em/.85 var(--display); color: var(--gold-3); margin: 6px 10px 0 0; }

.muted { color: var(--ink-soft); }
.small { font-size: 14px; font-family: var(--sans); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 8px 0; }

.ic, .cr { width: 32px; height: 32px; display: inline-block; vertical-align: middle; }
.skin { width: 110px; height: 140px; }

/* Cards (generic lists) */
.grid { display: grid; gap: 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.cards.small { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.card {
  position: relative; display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 2px solid var(--gold-2); border-radius: 12px; padding: 12px 14px;
  box-shadow: inset 0 0 0 2.5px var(--panel), inset 0 0 0 3.5px rgba(217, 164, 65, .5), 0 3px 10px var(--shadow); transition: transform .08s ease;
}
a.card:hover { transform: translateY(-2px); color: var(--ink); }
.card b { display: block; line-height: 1.25; font-family: var(--serif); color: var(--head); font-size: 17px; }
.card small { display: block; color: var(--ink-soft); line-height: 1.35; font: 14px/1.35 var(--sans); }
.card .ic, .card .cr { width: 48px; height: 48px; flex: none; }
.card.tile { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
.card.tile .big { font: 700 20px var(--serif); color: var(--head); }
.card img.emblem { display: block; margin: 0 auto 6px; }
.card img.cr { width: 64px; height: 64px; }
.card img.ic { width: 52px; height: 52px; }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.skins .card { flex-direction: column; text-align: center; }
.skins .card img.skin { width: 120px; height: 137px; object-fit: contain; }
.card.tile img.banner {
  display: block; width: calc(100% + 32px); max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  margin: -14px -16px 8px; border-radius: 9px 9px 0 0; border-bottom: 2px solid var(--gold-2);
}
.card.tile { overflow: hidden; }

/* --- Footer: the navy band ------------------------------------------------------------------------------------ */

.foot {
  position: relative; flex: none; color: #EFE3C4; font-family: var(--serif);
  background:
    url(img/meander-gold.svg) left 10px center / 30px 30px no-repeat,
    url(img/meander-gold.svg) right 10px center / 30px 30px no-repeat,
    radial-gradient(ellipse 60% 120% at 50% 0%, #2A58B8, rgba(42, 88, 184, 0) 70%),
    linear-gradient(180deg, #1E4AA6, #173A8C);
  border-top: 2px solid var(--gold-2);
  box-shadow: inset 0 3px 0 #173A8C, inset 0 4px 0 rgba(231, 181, 60, .6), inset 0 -3px 0 #173A8C, inset 0 -4px 0 rgba(231, 181, 60, .6);
}
.foot-art { display: none; }
.foot-in { max-width: 1530px; margin: 0 auto; padding: 4px 60px 2px; display: flex; align-items: center; gap: 24px; min-height: 44px; }
.foot-brand { font: 700 22px var(--caps); letter-spacing: .04em; color: var(--gold); text-decoration: none; flex: 1 1 0; }
.foot-motto { margin: 0; font: 400 16px var(--serif); display: flex; align-items: center; gap: 14px; color: #F4ECDA; flex: none; }
.foot-motto::before, .foot-motto::after { content: ""; width: 16px; height: 16px; background: url(img/dia-line.svg) center / contain no-repeat; }
.foot-links { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.foot-links a { font: 700 12px var(--caps); letter-spacing: .1em; text-transform: uppercase; color: #F4ECDA; text-decoration: none; padding: 4px 6px; }
.foot-links a + a::before { content: ""; display: inline-block; width: 8px; height: 10px; margin: 0 12px 0 0; vertical-align: -1px; background: url(img/dia.svg) center / contain no-repeat; }
.foot-links a:hover { color: var(--gold-1); }
.foot-note { max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--gutter) + 20px) 10px; font: 12px/1.5 var(--sans); color: #C9D2EA; text-align: center; }
.foot-note b { color: #EFE3C4; }

/* --- Home: hero, category cards, the two panels -------------------------------------------------------------- */

.hero {
  position: relative; margin: 0; padding: 2px 16px 22px; text-align: center; overflow: hidden;
  min-height: 350px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: #7EC3E8 url(img/hero.webp) center 45% / cover no-repeat;
  border-bottom: 2px solid var(--gold-2); box-shadow: 0 3px 0 rgba(217, 164, 65, .35);
}
.hero h1 { margin: 0; line-height: 0; }
.hero h1 img { width: 450px; height: auto; filter: drop-shadow(0 6px 10px rgba(10, 30, 70, .35)); }
.hero .slogan {
  margin: -4px 0 8px; font: 700 30px/1.25 var(--serif); color: #14285F; display: flex; align-items: center; gap: 14px;
  text-shadow: 0 0 12px rgba(255, 250, 235, .95), 0 0 24px rgba(255, 250, 235, .8), 0 0 4px #fff;
}
.hero .slogan::before, .hero .slogan::after {
  content: ""; width: 90px; height: 12px; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9));
  background: url(img/dia.svg) right center / 9px 9px no-repeat, linear-gradient(90deg, rgba(217, 164, 65, 0), #D9A441) left center / calc(100% - 12px) 2px no-repeat;
}
.hero .slogan::after { transform: scaleX(-1); }
.hero .slogan-dia { display: block; width: 16px; height: 16px; margin: -12px auto 10px; background: url(img/dia-line.svg) center / contain no-repeat; filter: drop-shadow(0 0 3px #fff); }
.hsearch { position: relative; width: min(520px, 92%); margin: 0 auto; }
.hsearch::before, .hsearch::after {
  content: ""; position: absolute; top: 50%; width: 18px; height: 30px; margin-top: -15px; z-index: 1;
  background: linear-gradient(145deg, #FFE7A0, #D9A441 50%, #A87318); clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.hsearch::before { left: -12px; }
.hsearch::after { right: -12px; transform: scaleX(-1); }
.hsearch input {
  width: 100%; height: 60px; border-radius: 999px; padding: 0 28px 0 70px; font: 400 21px var(--sans); color: #1C2745;
  background: #FFFDF6; border: 3px solid transparent;
  background: linear-gradient(#FFFDF6, #FFFBF0) padding-box, linear-gradient(145deg, #FFE7A0, #D9A441 35%, #F3CD68 60%, #A87318) border-box;
  box-shadow: 0 0 0 1px rgba(120, 80, 15, .4), 0 6px 16px rgba(10, 30, 70, .3);
}
.hsearch input::placeholder { color: #2B3552; }
.hsearch .mag { position: absolute; left: 26px; top: 50%; margin-top: -13px; width: 26px; height: 26px; color: #9A6A1E; pointer-events: none; }
.hsearch .results { text-align: left; }

.wrap { max-width: 1488px; margin: 0 auto; padding: 0 16px; }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; margin: 12px 0 12px; }
.cat {
  position: relative; display: flex; align-items: center; gap: 22px; padding: 10px 44px 10px 28px; min-height: 100px; text-decoration: none; color: var(--head);
  border: 3px solid transparent; border-radius: 8px;
  background: linear-gradient(180deg, #FDF9EF, #F8F0DD) padding-box, linear-gradient(145deg, #F6DA86, #D9A441 30%, #F0C95E 55%, #B8862A) border-box;
  box-shadow: inset 0 0 0 2px #FDF9EF, inset 0 0 0 3.2px rgba(217, 164, 65, .75), 0 3px 8px rgba(110, 76, 22, .18);
  transition: transform .08s ease, box-shadow .12s ease;
}
.cat:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #FDF9EF, inset 0 0 0 3.2px rgba(217, 164, 65, .75), 0 6px 16px rgba(110, 76, 22, .24); color: var(--head); }
.cat .slot { width: 80px; height: 80px; border-radius: 10px; }
/* The home page's painted category pictures fill their slot, as in the mockup. */
@media (min-width: 701px) { .cats .cat .slot { width: 90px; height: 90px; } }
.cats .cat .slot { padding: 0; }
.cats .cat .slot > img { width: 108%; height: 108%; margin: -4%; }
.cat-t b { display: block; font: 700 23px/1.2 var(--serif); }
.cat-t span { display: block; font: 700 21px/1.25 var(--serif); }
.cat::after { content: ""; position: absolute; right: 22px; top: 50%; width: 14px; height: 22px; margin-top: -11px; background: url(img/chev.svg) center / contain no-repeat; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.duo .panel { padding: 8px 22px 12px; margin: 0; border-width: 3px; border-color: #D9A441; }
.duo h2 { margin: 2px 0 10px; font-size: 27px; }
.panel ul.rows, .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.panel ul.rows > li { list-style: none; }
.panel ul.rows > li::marker { content: none; }
.duo .panel > h2 { font-size: 28px; margin: 0 0 6px; }
.rows .uthumb { width: 36px; height: 36px; flex: none; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.rows a {
  display: flex; align-items: center; gap: 16px; padding: 2px 16px; min-height: 41px; text-decoration: none; color: var(--ink);
  background: var(--row); border: 1px solid #E8D7B3; border-radius: 8px;
}
.rows a:hover { background: #FFF6DE; border-color: #D9A441; }
.rows .gem { width: 22px; height: 22px; }
.rows .t { flex: 1; min-width: 0; line-height: 1.25; }
.rows .t b { display: block; font: 700 14.5px/1.3 var(--serif); color: var(--head); }
.rows .t small { display: block; font: 12px/1.3 var(--sans); color: var(--ink-soft); }
.rows .ico.chev-r { color: var(--amber-2); font-size: 15px; }
.rows .thumb { width: 38px; height: 38px; flex: none; object-fit: contain; }
.rows time { font: 400 13px var(--sans); color: var(--head); white-space: nowrap; margin-left: 12px; }

/* --- Detail pages (items, creatures): the main column and the gold infobox --------------------------------------- */

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 468px; gap: 46px; align-items: start; }
.detail .crumbs { margin-top: 2px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 400 16px var(--serif); margin: 4px 0 6px; }
.crumbs a, .crumbs span { color: var(--head); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .home { font-size: 20px; line-height: 1; color: var(--navy); }
.crumbs .sep { width: 8px; height: 12px; background: url(img/chev.svg) center / contain no-repeat; opacity: .9; }
.title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.title-row h1 { font-size: clamp(40px, 5.4vw, 84px); margin: 0; line-height: 1.05; }
.sub { font: 400 25px var(--serif); color: var(--ink-soft); margin: 4px 0 0; }
.sub .dot-sep { margin: 0 .35em; }
.desc { font: italic 400 17px/1.6 var(--serif); color: var(--ink-soft); margin: 8px 0 0; max-width: 46rem; }
.sec { margin: 0; }
.sec > h2 { font-size: 31px; margin: 4px 0 12px; }
.sec h3 { font-size: 19px; margin: 12px 0 4px; }
.detail .dv { margin: 16px 0 14px; }

.ways { list-style: none; margin: 0; padding: 0 0 0 38px; display: grid; gap: 10px; }
.way { display: flex; align-items: flex-start; gap: 22px; }
.medal {
  flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #5A3406; font-size: 25px;
  background: radial-gradient(circle at 45% 35%, #F8CF6A, #D99A2B 60%, #A96A12);
  box-shadow: inset 0 0 0 2px #8A5510, inset 0 0 0 4px rgba(255, 226, 150, .75), 0 2px 4px rgba(90, 55, 5, .35);
}
.way-t { flex: 1; min-width: 0; padding-top: 11px; font-size: 18px; }
.way-t > h3:first-child { margin: 0 0 2px; font-size: 19px; }
.way-t > p:first-child { margin-top: 0; }
.way-t p { margin: .25em 0; }
.way-t .table-wrap { margin: 8px 0; }
p.source { background: none; border: 0; padding: 0; margin: 0; }
p.source .chip { margin-right: 6px; }

.ladder { list-style: none; margin: 0; padding: 0 0 0 30px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 4px; }
.ladder li { display: flex; align-items: flex-start; gap: 6px; }
.ladder li + li::before { content: ""; width: 28px; height: 28px; margin: 44px 8px 0 4px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h8V4l9 8-9 8v-5H4z' fill='%2322C3D6'/%3E%3Cpath d='M12 4l9 8H4V9h8z' fill='%237FE6F1'/%3E%3C/svg%3E") center / contain no-repeat; }
.ladder a { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 124px; text-align: center; text-decoration: none; color: var(--head); font: 400 16px/1.25 var(--serif); }
.ladder a:hover span { text-decoration: underline; }
.ladder .slot { width: 116px; height: 116px; border-radius: 14px; }
.ladder .cur .slot { box-shadow: inset 0 0 0 1.5px rgba(80, 50, 5, .55), 0 0 0 1px rgba(120, 80, 15, .5), 0 0 22px 2px color-mix(in srgb, var(--rc) 80%, transparent); }

.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.recipe {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 10px; border-radius: 10px;
  border: 1.5px solid #D9B46C; background: rgba(255, 252, 244, .6); box-shadow: inset 0 0 0 3px rgba(255, 252, 244, .6), inset 0 0 0 4px rgba(217, 164, 65, .35);
}
.recipe .ins { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.recipe .it { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--head); font: 400 15px/1.2 var(--serif); max-width: 96px; text-align: center; }
.recipe .it .slot { width: 72px; height: 72px; border-radius: 10px; }
.recipe .to { align-self: center; margin-top: -18px; width: 22px; height: 22px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3l12 9-12 9z' fill='%2322C3D6'/%3E%3Cpath d='M6 3l12 9H6z' fill='%237FE6F1'/%3E%3C/svg%3E") center / contain no-repeat; }
.recipe .out { margin-left: auto; }
.recipe .where { flex-basis: 100%; }
.recipe-meta { font: 13px var(--sans); color: var(--ink-soft); margin: 2px 0 0; }
/* Crafted in Explore worlds: one wide card a recipe, the ingredients in a row as in the mockup's "Used in recipes", the station, realm and token under it. */
.explore .recipes { grid-template-columns: 1fr; }
.explore .recipe { flex-wrap: wrap; align-items: center; padding-bottom: 12px; }
.explore .recipe .ins { flex-wrap: wrap; }
.explore .recipe .to { margin-top: -18px; }
.explore .recipe .out { margin-left: 8px; }
.explore .recipe .recipe-meta { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; }
.explore .source { margin: 0 0 12px; }
.ex-note { margin: 10px 0 0; }

/* The infobox */
.infobox {
  position: relative; padding: 38px 28px 24px; border-radius: 10px; margin-top: 2px;
  background: var(--panel); border: 2.5px solid var(--gold-2);
  box-shadow: inset 0 0 0 6px var(--panel), inset 0 0 0 7.5px #D9A441, 0 4px 16px var(--shadow);
}
.infobox::before {
  content: ""; position: absolute; left: 50%; top: -17px; width: 34px; height: 34px; margin-left: -17px;
  background: url(img/gem.svg) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.infobox::after {
  content: ""; position: absolute; inset: -7px; border-radius: 14px; pointer-events: none;
  background:
    linear-gradient(var(--gold-2), var(--gold-2)) left 18px top 0 / 34px 2px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) left 0 top 18px / 2px 34px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right 18px top 0 / 34px 2px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right 0 top 18px / 2px 34px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) left 18px bottom 0 / 34px 2px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) left 0 bottom 18px / 2px 34px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right 18px bottom 0 / 34px 2px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right 0 bottom 18px / 2px 34px no-repeat;
}
.ib { display: flex; flex-direction: column; }
.ib-title { font: 900 38px/1.15 var(--display); color: var(--head); text-align: center; margin: 0 0 14px; }
.bigslot { align-self: center; width: 340px; height: auto; max-width: 100%; aspect-ratio: 1; border-radius: 28px; padding: 8px; border-width: 7px; }
.bigslot::before { inset: 6px; border-radius: 20px; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .22) 0 4deg, rgba(255, 255, 255, 0) 4deg 12deg); }
.bigslot > img { width: 88%; height: 88%; }
.bigslot.scene { --rc: #E9D9B4; padding: 0; overflow: hidden; }
.bigslot.scene::before { display: none; }
.bigslot.scene > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; filter: saturate(1.05); }
.bigslot.scene > img:not(.bg) { position: relative; width: 86%; height: 86%; }
.ib-rar { display: none; }
.stats { margin: 20px 0 0; border: 1.5px solid #E2CFA6; border-radius: 10px; background: var(--row); overflow: hidden; }
.st { display: grid; grid-template-columns: 1fr 1fr; }
.st + .st { border-top: 1px solid #E6D6B4; }
.st dt, .st dd { margin: 0; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.st dt { font: 700 18px var(--serif); color: var(--head); border-right: 1px solid #E6D6B4; }
.st dd { font: 700 22px var(--serif); color: var(--head); flex-wrap: wrap; gap: 6px; }
.st dd .chip { font-size: 13px; }
.st dd.long { font-size: 16px; }
.si { font-size: 28px; color: #D0891D; filter: drop-shadow(0 1px 0 rgba(120, 70, 5, .35)); }
.ib-foot { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 900 / 518; padding: 0 0 11%; margin-top: 4px; }
.ib-foot::before {
  content: ""; position: absolute; inset: 0; opacity: .6;
  background: url(img/infobox-foot.webp) center bottom / 100% auto no-repeat;
  -webkit-mask: radial-gradient(ellipse 58% 62% at 50% 48%, #000 55%, transparent 100%);
  mask: radial-gradient(ellipse 58% 62% at 50% 48%, #000 55%, transparent 100%);
}
.ib-foot .motto { position: relative; margin: 0; font-size: 17px; color: var(--head); }
.infobox .dv { margin: 18px 0 6px; }
.aside-panels { display: grid; gap: 20px; margin-top: 22px; }

/* --- Class pages: the banner, abilities table with the capstone row, side panels --------------------------------- */

.banner {
  position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; align-items: stretch; min-height: 236px; margin: 4px 0 18px;
  border-radius: 10px; overflow: hidden; background: var(--panel);
  border: 2.5px solid var(--gold-2); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px rgba(217, 164, 65, .6), 0 4px 16px var(--shadow);
}
.flag { position: relative; display: grid; place-items: center; background: linear-gradient(90deg, #173A8C 0 12%, #0F2A66 12% 16%, #173A8C 16% 84%, #0F2A66 84% 88%, #173A8C 88%); border-right: 2px solid var(--gold-2); }
.flag::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: var(--panel); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.flag img { width: 230px; height: 230px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); position: relative; z-index: 1; }
.bn-text { padding: 18px 10px 18px 30px; display: flex; flex-direction: column; justify-content: center; }
.bn-text h1 { font-size: clamp(48px, 6vw, 88px); margin: 0; line-height: 1; }
.bn-text h1::after { display: none; }
.bn-sub { font: 400 23px var(--serif); color: var(--head); margin: 8px 0 14px; }
.bn-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pchip {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 10px; font: 400 15px var(--serif); color: var(--head);
  background: var(--panel-2); border: 1.5px solid #D9B46C; box-shadow: 0 1px 2px rgba(110, 76, 22, .15);
}
.pchip .ico { font-size: 24px; }
.pchip .i-heart { color: #D8322A; }
.pchip .i-drop { color: #1F8FE0; }
.pchip .i-helmet { color: #B07A1E; }
.bn-art { position: relative; background-size: cover; background-position: center; }
.bn-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel) 0, rgba(250, 245, 233, 0) 30%); }
.bn-motto {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%); margin: 0; width: 120px; text-align: center;
  font: 700 12px/1.9 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: #14285F;
  text-shadow: 0 0 6px rgba(255, 252, 240, .95), 0 0 12px rgba(255, 252, 240, .9);
}
.bn-motto::after { content: ""; display: block; width: 60px; height: 12px; margin: 4px auto 0; background: url(img/dia-line.svg) center / 12px 12px no-repeat, linear-gradient(#B07A1E, #B07A1E) center / 100% 1px no-repeat; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 412px; gap: 22px; align-items: start; }
.cols > aside > .panel:last-child { margin-bottom: 0; }
.panel > h2 { font-size: 34px; margin: 0 0 10px; }
.panel > h2.line-h::after { max-width: none; }
table.abil { font-size: 16px; }
table.abil td { padding: 8px 14px; }
table.abil td.ab-ic { width: 90px; min-width: 90px; padding: 6px 12px; }
table.abil .ab-ic img, .rslot {
  width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid transparent; background: linear-gradient(#1F4AA3, #1F4AA3) padding-box, linear-gradient(145deg, #FFE7A0, #D9A441 40%, #A87318) border-box;
  box-shadow: 0 0 0 1px rgba(120, 80, 15, .6), 0 2px 5px rgba(60, 40, 5, .35);
}
table.abil td b { font: 700 19px var(--serif); color: var(--head); }
table.abil td.lv { font: 700 16px var(--serif); color: var(--head); white-space: nowrap; }
table.abil tr.cap td { background: linear-gradient(180deg, #FFF3CC, #FBE19A 50%, #F6D57E); border-top: 2px solid #E7B53C; border-bottom: 2px solid #E7B53C; font-weight: 700; }
table.abil tr.cap td:first-child { border-left: 2px solid #E7B53C; border-radius: 10px 0 0 10px; position: relative; }
table.abil tr.cap td:last-child { border-right: 2px solid #E7B53C; border-radius: 0 10px 10px 0; background-image: url(img/sparkle.svg), url(img/sparkle.svg), linear-gradient(180deg, #FFF3CC, #FBE19A 50%, #F6D57E); background-size: 14px 14px, 10px 10px, auto; background-position: right 14px top 8px, right 40px bottom 10px, 0 0; background-repeat: no-repeat; }
table.abil tr.cap td:first-child::before { content: ""; position: absolute; left: -14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: url(img/gem.svg) center / contain no-repeat; }
table.abil tr.cap { box-shadow: 0 0 18px rgba(231, 181, 60, .6); }
table.abil tr.cap td b { font-size: 21px; }
:root[data-theme="dark"] table.abil tr.cap td { background: linear-gradient(180deg, #5A4814, #4A3A0E); }
.gearrows { display: grid; gap: 10px; }
.gearrow { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; background: var(--row); border: 1px solid #E6D6B4; text-decoration: none; color: var(--ink); }
.gearrow:hover { border-color: #D9A441; background: #FFF6DE; }
.lvchip { flex: none; width: 70px; text-align: center; padding: 8px 4px; border-radius: 8px; background: #EFE4CB; font: 700 15px var(--serif); color: var(--head); }
.gearrow .slot { width: 80px; height: 80px; }
.gearrow b { display: block; font: 700 18px var(--serif); color: var(--head); }
.gearrow small { display: block; font: 14px/1.35 var(--serif); color: var(--ink-soft); }
.guiderows { display: grid; gap: 8px; }
.guiderow { display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-radius: 8px; background: var(--row); border: 1px solid #E6D6B4; text-decoration: none; color: var(--ink); }
.guiderow:hover { border-color: #D9A441; background: #FFF6DE; }
.guiderow img { width: 50px; height: 50px; object-fit: contain; flex: none; }
.guiderow .t { flex: 1; }
.guiderow b { display: block; font: 700 15px var(--serif); color: var(--head); }
.guiderow small { display: block; font: 13px var(--serif); color: var(--ink-soft); }
.guiderow .chev-r { color: var(--head); }

/* --- List pages (creatures): filters, sort, card grid with realm tags --------------------------------------------- */

.listpage { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 28px; align-items: start; }
.filters { padding: 18px 20px 20px; position: sticky; top: 96px; max-height: calc(100vh - 110px); overflow: auto; border-width: 3px; }
.filters h2 { font: 700 30px var(--serif); margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--row-line); }
.filters fieldset { border: 0; margin: 0; padding: 10px 0 12px; border-bottom: 1px solid var(--row-line); }
.filters legend { font: 700 20px var(--serif); color: var(--head); padding: 0; margin-bottom: 6px; }
.filters label { display: flex; align-items: center; gap: 10px; font: 400 16px/1.2 var(--serif); color: var(--head); padding: 4px 0; cursor: pointer; }
.filters input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border-radius: 4px; cursor: pointer;
  border: 1.5px solid #B58A45; background: #FFFDF6; box-shadow: inset 0 1px 2px rgba(120, 80, 20, .15); display: grid; place-items: center;
}
.filters input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #34CFE0, #0E9CB2) ; border-color: #0B7F96;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(180deg, #34CFE0, #0E9CB2);
}
.range { position: relative; height: 40px; margin: 4px 4px 2px; }
.range .nums { display: flex; justify-content: space-between; font: 400 15px var(--serif); color: var(--head); margin: 0 2px; }
.range .track { position: absolute; left: 2px; right: 2px; top: 30px; height: 8px; border-radius: 99px; background: #E6D6B4; box-shadow: inset 0 1px 2px rgba(120, 80, 20, .25); }
.range .fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(180deg, #F6D983, #D9A441); }
.range input[type="range"] { position: absolute; left: 0; right: 0; top: 22px; width: 100%; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; height: 24px; }
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 26px; height: 26px; cursor: pointer; border: 0;
  background: url(img/gem.svg) center / contain no-repeat;
}
.range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 26px; height: 26px; border: 0; cursor: pointer; background: url(img/gem.svg) center / contain no-repeat; }
.range input[type="range"]::-webkit-slider-runnable-track { background: none; }
.filters .btn { width: 100%; justify-content: center; margin-top: 16px; font-size: 18px; padding: 10px 12px; }
.filters .btn .ico { font-size: 22px; }
.list-head { display: flex; align-items: flex-start; gap: 20px; margin: 0 0 14px; }
.list-head .lh-t { flex: 1; min-width: 0; }
.list-head h1 { margin: 0; font-size: 52px; }
.list-head p { margin: 4px 0 0; font-size: 20px; color: var(--head); }
.tools { display: flex; gap: 10px; align-items: center; padding-top: 10px; }
.tools select {
  appearance: none; -webkit-appearance: none; height: 46px; padding: 0 44px 0 18px; font: 700 16px var(--serif); color: var(--head); cursor: pointer;
  border: 1.5px solid #D9B46C; border-radius: 8px; box-shadow: 0 2px 4px rgba(110, 76, 22, .15);
  background: linear-gradient(180deg, #FFFDF6, #F6EDD8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 9l5-5 5 5zM7 15l5 5 5-5z' fill='%23173A8C'/%3E%3C/svg%3E"), linear-gradient(180deg, #FFFDF6, #F6EDD8);
  background-repeat: no-repeat; background-position: right 14px center, 0 0; background-size: 18px 18px, auto;
}
.vbtn { width: 50px; height: 46px; border-radius: 8px; cursor: pointer; font-size: 24px; color: #6B4A12; display: grid; place-items: center;
  border: 1.5px solid #D9B46C; background: linear-gradient(180deg, #FFFDF6, #F6EDD8); box-shadow: 0 2px 4px rgba(110, 76, 22, .15); }
.vbtn[aria-pressed="true"] { background: linear-gradient(180deg, #F8D98A, #E4B24A); border-color: #B07A1E; color: #3A2408; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px 18px; }
.ccard {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border-radius: 12px; overflow: hidden;
  border: 3px solid transparent;
  background: linear-gradient(180deg, #FDF9EF, #F8F0DD) padding-box, linear-gradient(145deg, #F6DA86, #D9A441 30%, #F0C95E 55%, #B8862A) border-box;
  box-shadow: 0 3px 10px rgba(110, 76, 22, .2); transition: transform .08s ease;
}
.ccard:hover { transform: translateY(-2px); color: var(--ink); }
.ccard-pic { position: relative; display: block; height: 128px; overflow: hidden; border-bottom: 2px solid var(--gold-2); background: #9BC7A0; }
.ccard-pic .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ccard-pic .port { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.06); transform-origin: 50% 20%; }
.ccard-pic .cr { position: relative; display: block; width: auto; height: 118%; margin: -4px auto 0; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35)); }
.ccard-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 12px 10px; }
.ccard-body b { grid-column: 1 / -1; font: 700 18px/1.2 var(--serif); color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard-body .lv { font: 400 14px var(--sans); color: var(--ink-soft); grid-column: 1; }
.rtag {
  grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; padding: 1px 10px 1px 6px; border-radius: 6px;
  font: 400 13px var(--sans); color: #1C2745; background: #EEF5E6; border: 1px solid #C5D9AE;
}
.rtag .ico { font-size: 14px; color: #2F7A33; }
.rtag.realm-autumn, .rtag.realm-desert, .rtag.realm-ember { background: #FBEBD6; border-color: #EBC89A; }
.rtag.realm-autumn .ico, .rtag.realm-desert .ico, .rtag.realm-ember .ico { color: #E0701A; }
.rtag.realm-frost, .rtag.realm-deep { background: #E6F1FA; border-color: #B6D3EE; }
.rtag.realm-frost .ico, .rtag.realm-deep .ico { color: #1F7FD0; }
.rtag.realm-glowcap, .rtag.realm-zombie { background: #EFE8F8; border-color: #CDB9E8; }
.rtag.realm-glowcap .ico, .rtag.realm-zombie .ico { color: #7A48C0; }
.rtag.realm-dragon { background: #FBE3DE; border-color: #EDB5A8; }
.rtag.realm-dragon .ico { color: #C83A22; }
.els { grid-column: 2; grid-row: 2 / span 2; display: flex; gap: 6px; align-self: center; margin-top: -8px; }
.el-orb {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff;
  border: 2.5px solid transparent; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
  background: radial-gradient(circle at 45% 35%, color-mix(in srgb, var(--ec) 55%, #fff), var(--ec) 55%, color-mix(in srgb, var(--ec) 55%, #000)) padding-box, linear-gradient(145deg, #FFE7A0, #D9A441 40%, #8A5C12) border-box;
}
.el-orb.e-Physical { --ec: #6E6A60; }
.el-orb.e-Fire { --ec: #E0521E; }
.el-orb.e-Ice { --ec: #2F95D8; }
.el-orb.e-Energy { --ec: #C9A012; }
.el-orb.e-Earth { --ec: #8A6232; }
.el-orb.e-Holy { --ec: #E0A418; }
.el-orb.e-Death { --ec: #7A3FC0; }
.el-orb.e-boss { --ec: #173A8C; color: #F6D983; }
.cgrid.as-rows { grid-template-columns: 1fr; gap: 8px; }
.cgrid.as-rows .ccard { flex-direction: row; align-items: center; }
.cgrid.as-rows .ccard-pic { width: 150px; height: 84px; border-bottom: 0; border-right: 2px solid var(--gold-2); flex: none; }
.cgrid.as-rows .ccard-body { flex: 1; }
.nothing { padding: 20px; text-align: center; color: var(--ink-soft); }
.list-notes { margin-top: 22px; }

/* Realm and place pictures */
img.ab { width: 38px; height: 38px; float: left; margin: 1px 10px 0 0; object-fit: contain; border-radius: 50%; }
td.abcell { min-width: 200px; }
td.abcell b { white-space: nowrap; }
img.emblem { width: 56px; height: 56px; object-fit: contain; vertical-align: middle; }
h1 img.emblem { width: 72px; height: 72px; margin-right: 12px; }
figure.shot-fig { margin: 0 0 22px; }
img.shot {
  display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: center 55%;
  border: 3px solid transparent; border-radius: 12px;
  background: linear-gradient(#EFE3C9, #EFE3C9) padding-box, linear-gradient(145deg, #F6DA86, #D9A441 30%, #F0C95E 55%, #B8862A) border-box;
  box-shadow: 0 4px 14px var(--shadow);
}
figure.shot-fig figcaption, figure.thumb-fig figcaption { font: italic 15px var(--serif); color: var(--ink-soft); margin: 6px 4px 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
figure.thumb-fig { margin: 0; }
img.thumb { display: block; width: 100%; height: auto; border: 2px solid var(--gold-2); border-radius: 10px; background: var(--bg-2); }
a.place { display: block; text-decoration: none; color: var(--head); }
a.place b { display: block; margin: 6px 4px 0; font-family: var(--serif); }
a.place:hover img { transform: translateY(-2px); }
section.villager { overflow: hidden; }
section.villager img.portrait { float: right; width: 150px; height: auto; margin: 0 0 8px 16px; }
img.tale-pic { float: right; width: 220px; height: auto; margin: 0 0 10px 18px; }
.item-head { display: flex; gap: 18px; align-items: center; }
.item-head img.pic { flex: none; object-fit: contain; width: 168px; height: 168px; }
.friendship { border-top: 1px solid var(--row-line); margin-top: 12px; padding-top: 6px; overflow: hidden; }
.friendship p { margin: .35em 0; }
.friendship img.keepsake { float: right; width: 110px; height: auto; margin: 0 0 8px 14px; }
.friendship details { margin: 6px 0; }
.friendship summary { cursor: pointer; font-weight: 700; color: var(--head); }
.panel.built img.pic.piece { display: block; width: 260px; height: 260px; object-fit: contain; margin: 0 auto; }
.dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; border: 1.5px solid var(--ink); margin-right: 6px; vertical-align: -.08em; }
[id] { scroll-margin-top: 110px; }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 2px; font-weight: 700; }

/* Night-look touches for the fixed parchment parts */
:root[data-theme="dark"] .top { background: linear-gradient(180deg, #13295E, #0F2458); box-shadow: 0 3px 0 rgba(217, 164, 65, .5), 0 6px 14px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .top::before, :root[data-theme="dark"] .top::after { background-image: url(img/meander-gold.svg); opacity: .7; }
:root[data-theme="dark"] .nav a { color: #F4E6C0; }
:root[data-theme="dark"] .nav a[aria-current="page"] { color: #14285F; }
:root[data-theme="dark"] .nav a:hover { color: #FFD96A; }
:root[data-theme="dark"] .search input, :root[data-theme="dark"] .theme, :root[data-theme="dark"] .find, :root[data-theme="dark"] .burger { background: #0E2152; color: #F6D983; border-color: #B08A45; }
:root[data-theme="dark"] .search input::placeholder { color: #B9C2DA; }
:root[data-theme="dark"] .cat, :root[data-theme="dark"] .ccard { background: linear-gradient(180deg, #173170, #13295E) padding-box, linear-gradient(145deg, #F6DA86, #D9A441 30%, #F0C95E 55%, #B8862A) border-box; box-shadow: inset 0 0 0 2px #173170, inset 0 0 0 3.2px rgba(217, 164, 65, .6), 0 3px 8px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .rows a, :root[data-theme="dark"] .gearrow, :root[data-theme="dark"] .guiderow { border-color: #2A4A8E; }
:root[data-theme="dark"] .lvchip { background: #0E2152; }
:root[data-theme="dark"] table.list th { background: linear-gradient(180deg, #1A3677, #152D66); border-bottom-color: #B08A45; }
:root[data-theme="dark"] .table-wrap, :root[data-theme="dark"] .stats { border-color: #B08A45; }
:root[data-theme="dark"] .rtag { color: #1C2745; }
:root[data-theme="dark"] .hero .slogan { color: #14285F; }
:root[data-theme="dark"] .pchip, :root[data-theme="dark"] .tools select, :root[data-theme="dark"] .vbtn:not([aria-pressed="true"]) { background: #173170; color: #F4E6C0; }
:root[data-theme="dark"] .filters input[type="checkbox"]:not(:checked) { background: #0E2152; }
:root[data-theme="dark"] .bn-art::before { background: linear-gradient(90deg, var(--panel) 0, rgba(19, 41, 94, 0) 30%); }
:root[data-theme="dark"] .flag::after { background: var(--panel); }
:root[data-theme="dark"] .bn-motto { color: #14285F; }
:root[data-theme="dark"] .recipe { background: rgba(14, 33, 82, .5); }
:root[data-theme="dark"] .ib-foot::before { opacity: .25; }
:root[data-theme="dark"] .crumbs .home { color: var(--gold-1); }

/* --- Narrow windows (beside the game) and phones ------------------------------------------------------------------ */

@media (max-width: 1320px) {
  :root { --gutter: 32px; }
  .nav a { padding: 7px 9px; font-size: 16px; margin: 0 3px; }
  .search { flex-basis: 250px; }
  .detail { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
  .cols { grid-template-columns: minmax(0, 1fr) 360px; }
  .banner { grid-template-columns: 210px minmax(0, 1fr) 260px; }
  .flag img { width: 196px; height: 196px; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: grid; }
  .bar { gap: 14px; }
  .brand { margin-left: 0; }
  .search { flex: 1 1 auto; margin-left: auto; max-width: 420px; }
  .detail, .cols { grid-template-columns: minmax(0, 1fr); }
  .banner { grid-template-columns: 200px minmax(0, 1fr); }
  .bn-art { display: none; }
  .listpage { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; max-height: none; }
  .duo { grid-template-columns: 1fr; }
  body { background-image: none; }
}
@media (max-width: 700px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .top { background: linear-gradient(180deg, #1B3F93, #122F74); border-bottom: 2px solid var(--gold-2); box-shadow: 0 2px 0 #0B1D49, 0 3px 0 rgba(231, 181, 60, .6); }
  .top::before, .top::after, .leaves { display: none; }
  .bar { height: 64px; justify-content: space-between; padding: 0 12px; }
  .brand { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); }
  .brand img { width: 172px; }
  .burger, .find { display: grid; background: none; border: 0; color: #F2C95C; font-size: 26px; width: 44px; height: 44px; }
  .theme { display: none; }
  .search { display: none; position: absolute; left: 10px; right: 10px; top: 70px; max-width: none; }
  .top.searching .search { display: flex; }
  .top.searching .search input { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
  body > main { padding: 16px 16px 26px; }
  body > main::before { content: ""; display: block; height: 12px; margin: -16px -16px 8px; background: url(img/dia.svg) left 6px top 0 / 10px 10px no-repeat, url(img/dia.svg) right 6px top 0 / 10px 10px no-repeat; }
  .pg-home > main::before { display: none; }
  .hero { min-height: 0; padding: 18px 12px 24px; }
  .hero h1 img { width: 300px; }
  .hero .slogan { font-size: 22px; }
  .hero .slogan::before, .hero .slogan::after { width: 40px; }
  .hsearch input { height: 50px; font-size: 16px; padding-left: 54px; }
  .hsearch .mag { left: 20px; }
  .cats { grid-template-columns: 1fr; gap: 10px; }
  .cat { min-height: 76px; padding: 8px 40px 8px 18px; gap: 16px; }
  .cat .slot { width: 60px; height: 60px; }
  .cat-t b { font-size: 20px; }
  .cat-t span { font-size: 17px; }
  h1 { font-size: 34px; }
  h2, .sec > h2, .panel > h2 { font-size: 24px; }
  .panel { padding: 14px 14px; }
  /* Detail pages: the infobox first, like the phone mockup */
  .detail { display: flex; flex-direction: column; gap: 0; }
  .detail > aside { order: -1; }
  .detail .title-row, .detail .sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .detail .crumbs { font-size: 14px; }
  .infobox { padding: 0; border: 0; box-shadow: none; background: none; margin: 0; }
  .infobox::before, .infobox::after { display: none; }
  .ib .bigslot { order: 1; width: 238px; border-radius: 22px; }
  .ib .bigslot::after { content: ""; position: absolute; inset: -16px; pointer-events: none;
    background: url(img/dia.svg) center top / 14px 14px no-repeat, url(img/dia.svg) center bottom / 14px 14px no-repeat, url(img/dia.svg) left center / 14px 14px no-repeat, url(img/dia.svg) right center / 14px 14px no-repeat; }
  .ib-title { order: 2; font-size: 42px; margin: 18px 0 0; }
  .ib .dv.top-dv { order: 3; display: block; margin: 8px 16px 10px; }
  .ib-rar { order: 4; display: flex; justify-content: center; }
  .ib-rar .rar { font-size: 20px; padding: 4px 30px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); border-radius: 0; background: linear-gradient(180deg, #FBE09A, #EFC056 55%, #E0A73A); color: #14285F; text-shadow: none; border: 0; box-shadow: none; }
  .ib-rar .rar::before { display: none; }
  .stats { order: 5; border: 0; background: none; margin-top: 14px; display: grid; gap: 10px; }
  .st { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-radius: 12px; background: var(--row); border: 1.5px solid #E2CFA6; box-shadow: inset 0 0 0 2px var(--row), inset 0 0 0 3px rgba(217, 164, 65, .3); }
  .st + .st { border-top: 1.5px solid #E2CFA6; }
  .st dt { border: 0; padding: 0; font: 400 17px var(--serif); color: var(--ink-soft); flex: 0 0 48%; gap: 14px; }
  .st dd { padding: 0; font-size: 19px; }
  .si { font-size: 20px; width: 44px; height: 44px; padding: 11px; border-radius: 50%; color: #F2C95C; flex: none;
    background: radial-gradient(circle at 50% 38%, #24479A, #0E2458 72%); box-shadow: inset 0 0 0 2px #0E2458, inset 0 0 0 3.5px #E7B53C, 0 0 0 1.5px #8A5C12; filter: none; }
  .ib-foot { display: none; }
  .ib .dv.low-dv { order: 6; display: block; }
  .desc { order: 7; }
  .ways, .ladder { padding-left: 0; }
  .ladder .slot { width: 84px; height: 84px; }
  .ladder a { width: 96px; font-size: 14px; }
  .ladder li + li::before { width: 20px; height: 20px; margin-top: 32px; }
  .recipes { grid-template-columns: 1fr; }
  .recipe .it .slot { width: 56px; height: 56px; }
  .medal { width: 40px; height: 40px; font-size: 20px; }
  .way { gap: 14px; }
  .way-t { padding-top: 7px; font-size: 16px; }
  .banner { grid-template-columns: 1fr; }
  .flag { min-height: 180px; }
  .flag img { width: 170px; height: 170px; }
  .bn-text { padding: 14px 18px 18px; text-align: center; align-items: center; }
  .bn-chips { justify-content: center; }
  .list-head { flex-direction: column; gap: 8px; }
  .list-head h1 { font-size: 38px; }
  .cgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .ccard-pic { height: 100px; }
  .el-orb { width: 30px; height: 30px; font-size: 15px; }
  .ccard-body { grid-template-columns: 1fr; }
  .els { grid-column: 1; grid-row: auto; }
  table.list { font-size: 14px; }
  table.list td, table.list th { padding: 6px 8px; }
  .hide-narrow { display: none; }
  .foot { background: linear-gradient(180deg, #1E4AA6, #173A8C); }
  .foot-art { display: block; height: 150px; background: url(img/hero.webp) 18% 60% / cover no-repeat; border-bottom: 2px solid var(--gold-2); -webkit-mask: linear-gradient(180deg, transparent, #000 40%); mask: linear-gradient(180deg, transparent, #000 40%); }
  .foot-in { flex-direction: column; gap: 6px; padding: 12px 16px 6px; text-align: center; }
  .foot-brand { flex: none; }
  .foot-links { flex-wrap: wrap; justify-content: center; }
  .foot-note { padding: 0 16px 14px; }
  .drawer-in { width: 100%; max-width: 420px; }
  .rows a { padding: 6px 10px; gap: 10px; }
  .rows time { display: none; }
  section.villager img.portrait { width: 110px; }
  img.tale-pic { width: 150px; }
}

@media print {
  .top, .foot, .search, .theme, .drawer, .filters { display: none; }
  body { background: #fff; color: #000; }
  .panel { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.slot > img.fill { object-fit: cover; border-radius: 6px; filter: none; }

.foot .theme { width: 30px; height: 30px; margin-left: 14px; font-size: 15px; background: rgba(10, 25, 70, .35); color: var(--gold-1); border: 1.5px solid rgba(231, 181, 60, .7); }
.foot .theme:hover { background: rgba(10, 25, 70, .6); }
.ib .dv.top-dv { display: none; }
.dmain { min-width: 0; }
.ask { margin-top: 18px; }
.infobox .st dd a { color: var(--head); }
.detail .sec > h2 { margin-top: 2px; }
.flag img.emblem-big { width: 230px; height: 230px; object-fit: contain; }
.cmain { min-width: 0; }
.gearrow .t { flex: 1; min-width: 0; }
table.abil td.abcell .kind { display: block; margin-top: 1px; }
table.abil td.ab-d { font-size: 15px; line-height: 1.45; }
table.abil td.ab-d .later { display: block; margin-top: 2px; font-size: 12.5px; }
.gearrow b { font-size: 16px; }
.gearrow small { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bn-motto { padding: 16px 8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 250, 235, .82), rgba(255, 250, 235, 0)); }
table.abil td.ab-d { width: 48%; }
table.abil td.abcell b { white-space: nowrap; }
.lvchip { width: 78px; white-space: nowrap; }

@media (max-width: 700px) {
  .ib .dv.top-dv { display: block; }
  .pg-item .crumbs, .pg-creature .crumbs { display: none; }
  .overview { text-align: center; }
  .overview h2.sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 4px 0 6px; font-size: 30px; display: block; }
  .overview .desc { font-style: normal; font-size: 19px; color: var(--ink); margin: 0 auto; }
}

/* The class and list mockups show the compass watermark high on the left and right. */
body.pg-class, body.pg-list { background-position: left 6px top 90px, right 6px top 90px, left -40px top 140px, right -50px top 330px, 0 0, 0 0, 0 0; }
@media (min-width: 1500px) {
  body > main { max-width: 1586px; padding-left: 90px; padding-right: 41px; }
}
.sub-chips { margin: 10px 0 0; }
.sub-chips .chip { font-size: 15px; padding: 3px 12px; }
.pg-creature .hook { margin-top: 10px; }
.pg-creature .title-row .rar { font-size: 20px; }
.st { grid-template-columns: 1.2fr 1fr; }
.st dt { font-size: 17px; }

/* Hub cards (items, classes, recipes indexes): the home page's category card, smaller */
.cat.hub { min-height: 92px; padding: 10px 40px 10px 16px; gap: 16px; }
.cat.hub .slot { width: 66px; height: 66px; }
.cat.hub .cat-t b { font-size: 20px; }
.cat.hub .cat-t span { font-size: 17px; }
.cat.hub .cat-t small { display: block; font: 13px/1.35 var(--sans); color: var(--ink-soft); margin-top: 2px; }
.cat.hub::after { right: 16px; }
/* Rarity words on parchment: darker shades that keep 4.5:1 */
.chip.rarity-Common, .r-Common, .results .r-Common { color: #5E5B55; }
.chip.rarity-Uncommon, .r-Uncommon { color: #2B7A28; }
.chip.rarity-Rare, .r-Rare { color: #1C5EB2; }
.chip.rarity-Epic, .r-Epic { color: #6A32B0; }
.slot[class*="r-"] { color: inherit; }
:root[data-theme="dark"] .chip.rarity-Common, :root[data-theme="dark"] .r-Common { color: var(--r-Common); }
:root[data-theme="dark"] .chip.rarity-Uncommon, :root[data-theme="dark"] .r-Uncommon { color: var(--r-Uncommon); }
:root[data-theme="dark"] .chip.rarity-Rare, :root[data-theme="dark"] .r-Rare { color: var(--r-Rare); }
:root[data-theme="dark"] .chip.rarity-Epic, :root[data-theme="dark"] .r-Epic { color: var(--r-Epic); }
/* Icons on generic cards sit in a small gold-framed slot */
.card > .ic, .card > .cr, .card > img.ic, .card > img.cr {
  width: 60px; height: 60px; padding: 5px; border-radius: 10px; flex: none; object-fit: contain;
  border: 2.5px solid transparent;
  background: radial-gradient(circle at 50% 45%, #FFFDF4, #F1E4C4 70%) padding-box, linear-gradient(145deg, #FFE7A0, #D9A441 35%, #F3CD68 55%, #A87318) border-box;
  box-shadow: 0 0 0 1px rgba(120, 80, 15, .45), 0 2px 5px rgba(80, 50, 10, .2);
}
:root[data-theme="dark"] .card > .ic, :root[data-theme="dark"] .card > .cr { background: radial-gradient(circle at 50% 45%, #24479A, #0E2458 72%) padding-box, linear-gradient(145deg, #FFE7A0, #D9A441 35%, #F3CD68 55%, #A87318) border-box; }
.skins .card > img.skin { width: 120px; height: 137px; padding: 0; border: 0; background: none; box-shadow: none; }
.cards:has(> .cat.hub) { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

table.abil { table-layout: fixed; }
table.abil th:nth-child(1) { width: 88px; }
table.abil th:nth-child(2) { width: 22%; }
table.abil th:nth-child(3) { width: 96px; }
table.abil th:nth-child(4) { width: 112px; }
table.abil th:nth-child(5) { width: 64px; text-align: right; }
table.abil td.ab-d { width: auto; font-size: 14.5px; }
table.abil td.abcell b { white-space: normal; }
.st dd { font-size: 24px; }
.infobox::after { inset: -9px; border: 1.5px solid var(--gold-2); border-radius: 15px; background:
    linear-gradient(var(--gold-2), var(--gold-2)) left 22px top -1px / 26px 3px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right 22px top -1px / 26px 3px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) left 22px bottom -1px / 26px 3px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right 22px bottom -1px / 26px 3px no-repeat; }
@media (max-width: 700px) { table.abil { table-layout: auto; } table.abil th { width: auto !important; } }
table.abil th:nth-child(5) { width: 80px; }
table.abil tr.cap td:first-child { padding-left: 26px; }
table.abil tr.cap td:first-child::before { left: 2px; }
table.abil th:nth-child(1) { width: 100px; }
:root .rar.rar[class] { color: #FFF6DC; }
@media (max-width: 700px) { :root .ib-rar .rar.rar[class] { color: #14285F; } }

/* The list page: filters on the left across both rows; on narrow windows the title first, then folded filters */
.listpage { grid-template-areas: "f h" "f m"; }
.listpage > .list-head { grid-area: h; }
.listpage > .filters { grid-area: f; }
.listpage > .lmain { grid-area: m; min-width: 0; }
.fdet > summary { list-style: none; cursor: pointer; }
.fdet > summary::-webkit-details-marker { display: none; }
.fdet > summary h2 { display: flex; align-items: center; gap: 12px; }
.fdet > summary h2::before { content: ""; width: 24px; height: 24px; flex: none; background: url(img/gem.svg) center / contain no-repeat; }
.fdet:not([open]) > summary h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.fdet:not([open]) > summary h2::after { content: "Show"; margin-left: auto; font: 700 14px var(--sans); color: var(--gold-3); }
@media (max-width: 1100px) {
  .listpage { grid-template-areas: "h" "f" "m"; gap: 14px; }
  .filters { padding: 12px 16px; }
}

.listpage { row-gap: 0; }
.listpage > .list-head { margin-bottom: 16px; }
@media (min-width: 1500px) { body > main { padding-right: 46px; } }

/* Class pages: the banner heads the main column, the side panels start beside it (mockup 3) */
.pg-class .banner { grid-template-columns: 220px minmax(0, 1fr) 250px; min-height: 226px; }
.pg-class .flag img.emblem-big { width: 200px; height: 200px; }
.pg-class .bn-text h1 { font-size: clamp(48px, 5vw, 80px); }
/* The temple scene reaches in under the text and fades into it, the motto sits on the open sky (mockup 3). */
.pg-class .bn-text { position: relative; z-index: 1; }
.pg-class .bn-art { margin-left: -120px; background-position: 40% 50%; }
.pg-class .bn-art::before { background: linear-gradient(90deg, var(--panel) 0, rgba(250, 245, 233, .7) 14%, rgba(250, 245, 233, 0) 36%); }
.pg-class .cols { grid-template-columns: minmax(0, 1fr) 400px; }
@media (max-width: 1100px) { .pg-class .cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1320px) { .pg-class .banner { grid-template-columns: 180px minmax(0, 1fr); } .pg-class .bn-art { display: none; } .pg-class .flag img.emblem-big { width: 160px; height: 160px; } }
@media (max-width: 700px) { .pg-class .banner { grid-template-columns: 1fr; } }
.pg-class .bn-sub { font-size: 21px; }

/* --- Article pages (guides, tales, realms, bosses, quests and the rest): the mockups' parts --------------------------
   The item page's title row, badge and diamond divider; the class page's framed panels with gem headings; a right
   column of framed side panels ("On this page", related rows in the "Knight guide" style, an infobox). */
.art { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 26px; align-items: start; }
.amain, .abody { min-width: 0; }
.aside { display: grid; gap: 22px; min-width: 0; }
.aside > .panel, .aside > .infobox { margin: 0; }
.ahead .crumbs { margin-top: 2px; }
.art .title-row { gap: 8px 22px; }
.art .title-row h1 { font-size: clamp(40px, 4.4vw, 68px); line-height: 1.08; }
.art .sub { font-size: 21px; line-height: 1.45; margin: 8px 0 0; max-width: 56rem; }
.art .sub.hook { font-style: italic; }
.ahead .dv { margin: 14px 0 18px; }
.apanel { padding: 20px 30px 22px; font-size: 17.5px; }
.apanel > h2 { font-size: 30px; margin: 0 0 12px; }
.apanel > h2 + p { margin-top: 0; }
.apanel h3 { font-size: 21px; margin: 16px 0 6px; }
.apanel > :last-child { margin-bottom: 0; }
.apanel ul, .apanel ol { padding-left: 1.4em; }
.apanel li { margin: .35em 0; }
.apanel ol > li::marker { font: 700 .95em var(--serif); color: var(--head); }
.apanel .table-wrap { margin: 12px 0; }
.apanel .callout { margin: 16px 0; }
figure.apic { margin: 0 0 22px; }
figure.apic img.shot { max-height: 400px; }
.side { padding: 14px 18px 18px; }
.side > h2, .side h2 { font-size: 28px; margin: 0 0 12px; }
.side > h2.line-h::after, .toc h2.line-h::after { max-width: none; }
.side-more { margin: 10px 4px 0; text-align: right; font: 700 14px var(--sans); }
.side-more a { text-decoration: none; }
.side-more a::after { content: " ›"; }
.side .guiderow { padding: 8px 12px; gap: 14px; }
.side .guiderow svg.ic, .side .guiderow img.cr, .side .guiderow svg.cr { width: 44px; height: 44px; flex: none; }
.side .guiderow .gem { width: 20px; height: 20px; margin: 0 4px; }
.side .guiderow small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* On this page: gem-bulleted rows; a folded panel at the top on narrow windows */
.tdet > summary { list-style: none; cursor: default; }
.tdet > summary::-webkit-details-marker { display: none; }
.toc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.toc-rows > li { margin: 0; }
.toc-rows > li::marker { content: none; }
.toc-rows a {
  display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 8px; text-decoration: none;
  background: var(--row); border: 1px solid #E6D6B4; color: var(--head); font: 700 15.5px/1.3 var(--serif);
}
.toc-rows a:hover { border-color: #D9A441; background: #FFF6DE; color: var(--head); }
.toc-rows .gem { width: 18px; height: 18px; }

/* The navy badge beside a title (guides, tales, realms) */
.kbadge {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 18px 6px 12px; border-radius: 12px; white-space: nowrap;
  font: 700 19px/1.2 var(--serif); color: #F7E7BE; text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
  background: linear-gradient(180deg, #2A55B0, #173A8C 60%, #0F2A66); border: 2px solid #0B1D49;
  box-shadow: inset 0 0 0 1.5px #E7B53C, 0 2px 4px rgba(10, 20, 60, .35);
}
.kbadge .ico { color: #F6D983; font-size: 21px; }

/* Before and next: two framed buttons */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 6px; }
.pg-btn {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 22px 12px 48px; text-decoration: none; color: var(--head);
  border: 3px solid transparent; border-radius: 10px;
  background: linear-gradient(180deg, #FDF9EF, #F8F0DD) padding-box, linear-gradient(145deg, #F6DA86, #D9A441 30%, #F0C95E 55%, #B8862A) border-box;
  box-shadow: inset 0 0 0 2px #FDF9EF, inset 0 0 0 3.2px rgba(217, 164, 65, .75), 0 3px 8px rgba(110, 76, 22, .18);
}
.pg-btn:hover { color: var(--head); transform: translateY(-1px); }
.pg-btn::before { content: ""; position: absolute; left: 20px; top: 50%; width: 12px; height: 20px; margin-top: -10px; background: url(img/chev.svg) center / contain no-repeat; transform: scaleX(-1); }
.pg-btn.next { text-align: right; align-items: flex-end; padding: 12px 48px 12px 22px; grid-column: 2; }
.pg-btn.next::before { left: auto; right: 20px; transform: none; }
.pg-btn small { font: 700 12px var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.pg-btn b { font: 700 18px/1.3 var(--serif); }

/* Tales: the story in one framed panel with a drop cap; the picture in the infobox */
.tale-p { padding: 26px 40px 28px; }
.tale-p .tale { font-size: 18.5px; line-height: 1.8; }
.tale-p .tale p:first-of-type::first-letter { color: var(--head); text-shadow: 2px 2px 0 var(--gold); }
.tale .callout p::first-letter { float: none; font: inherit; color: inherit; margin: 0; text-shadow: none; }
@media (min-width: 1101px) and (min-height: 760px) {
  .art.guide .aside { position: sticky; top: 92px; max-height: calc(100vh - 104px); overflow: auto; overscroll-behavior: contain; padding: 4px 4px 8px; margin: -4px; scrollbar-width: thin; }
}
.art .title-row.long h1 { font-size: clamp(38px, 3.8vw, 58px); }
.talegrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.talegrid .ccard-pic { height: 150px; }
.pg-hub .list-head p { font-size: 18px; max-width: 76rem; line-height: 1.55; }
.cards + .panel, .cards + .table-wrap { margin-top: 22px; }
.panel > h2:not(.orn-h):not(.line-h)::after { content: ""; flex: 1; height: 10px; background: url(img/dia.svg) left center / 8px 8px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) 10px center / calc(100% - 10px) 1.5px no-repeat; }
.rgrid .ccard-body b { white-space: normal; }
table.qtable td { vertical-align: middle; }
.tale-box .ib-title { font-size: 28px; }
.tale-box .bigslot.scene.place > img.bg { border-radius: 20px; }
.tale-box .st dd { font-size: 18px; }
.tale-box .st dd.long { font-size: 16px; }

/* Hubs: guides in grouped panels (the home page's "Start here" rows), tales as the creatures page's cards */
.hubcols { columns: 2; column-gap: 20px; }
.hubpanel { break-inside: avoid; margin: 0 0 20px; padding: 10px 22px 16px; border-width: 3px; }
.hubpanel > h2 { font-size: 28px; margin: 2px 0 10px; }
.hubrows { gap: 6px; }
.hubrows a { min-height: 60px; padding: 6px 16px; }
.hubrows svg.gi { width: 40px; height: 40px; flex: none; }
.hubrows .t b { font-size: 16.5px; }
.hubrows .t small { font-size: 13.5px; }
.tcard .ccard-body { grid-template-columns: 1fr; }
.tcard .ccard-body b { white-space: normal; }
.tcard .ccard-body .lv { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.tcard .rtag { margin-top: 6px; }
.tcard { min-height: 100%; }

/* Stat rows in a side panel (the infobox's rows): limits, counts */
.sstats .stats { margin: 4px 0 0; }
.sstats .st dt { font-size: 16px; padding: 9px 14px; }
.sstats .st dd { font-size: 19px; padding: 9px 14px; }
.sstats .si { font-size: 24px; }
.side-note { margin: 10px 2px 0; }
.side ul.tips { margin: 0; padding-left: 1.3em; font-size: 15.5px; }
.side ul.tips li { margin: .4em 0; }

/* Creature cards inside a panel (realm pages, bosses) */
.rgrid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; margin: 12px 0 4px; }
.rgrid .ccard-pic { height: 118px; }
.rgrid .ccard-body b { font-size: 16.5px; }
.rgrid .el-orb { width: 34px; height: 34px; font-size: 17px; }

/* Realm pages: the realm's picture fills the infobox slot */
.realm-box .bigslot.scene.place > img.bg, .tale-box .bigslot.scene.place > img.bg { border-radius: 20px; }
.realm-box .st dd { font-size: 20px; }
.realm-box .ib-title { font-size: 34px; }
.art .desc { max-width: none; font-size: 18px; margin: 0 0 10px; }
.apanel .facts { margin-top: 8px; }
.apanel .facts th { width: 24%; }
.apanel .facts td { font-weight: 400; color: var(--ink); }
.rcard .ccard-pic { height: 150px; }

/* Villagers: the portrait in a gold slot beside the name */
.vhead { display: flex; gap: 22px; align-items: flex-start; }
.vslot { width: 132px; height: 132px; border-radius: 14px; }
.vslot > img.portrait { width: 100%; height: 100%; object-fit: contain; }
.vt { flex: 1; min-width: 0; }
.vt > h2 { font-size: 30px; margin: 2px 0 4px; }
.vrole { font: 400 19px var(--serif); color: var(--ink-soft); margin: 0 0 6px; }
.barks { color: var(--ink-soft); }
.villager h3 { font-size: 20px; margin: 14px 0 6px; }
.villager .friendship { border-top: 0; margin-top: 16px; padding-top: 0; }
.villager .friendship::before { content: ""; display: block; height: 24px; margin: 0 0 6px; background: url(img/dv.svg) center / 96px 24px no-repeat, linear-gradient(90deg, rgba(217, 164, 65, 0), var(--gold-2) 6%, var(--gold-2) calc(50% - 50px), transparent calc(50% - 50px), transparent calc(50% + 50px), var(--gold-2) calc(50% + 50px), var(--gold-2) 94%, rgba(217, 164, 65, 0)) center / 100% 1.5px no-repeat; }
.grp { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 30px; margin: 8px 0 18px; }
.vrows .guiderow img.cr { width: 44px; height: 44px; object-fit: contain; }

/* Quests: the steps as the class page's table */
table.qtable td b { font: 700 16.5px var(--serif); color: var(--head); }
td.qn { width: 64px; }
.qnum {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 15px var(--serif); color: #F6D983;
  background: radial-gradient(circle at 50% 38%, #24479A, #0E2458 72%); box-shadow: inset 0 0 0 1.5px #0E2458, inset 0 0 0 3px #E7B53C;
}
.reward { font: 700 14px/1.45 var(--sans); color: var(--ink-soft); }
ol.steps > li { margin: .6em 0; }
.farewell { color: var(--ink-soft); }

/* Search results */
.found { font: 700 16px var(--sans); color: var(--ink-soft); margin: 0 0 12px; }
.apanel > h2 .count { font: 700 15px var(--sans); color: var(--ink-soft); background: var(--row); border: 1px solid #E6D6B4; border-radius: 999px; padding: 1px 10px; }
.found-rows a { min-height: 48px; }
.found-rows .chev { width: 10px; height: 16px; flex: none; background: url(img/chev.svg) center / contain no-repeat; }

/* Not found: one framed panel with the compass, the big search and the home page's cards */
.pg-lost > main { max-width: 1200px; }
.lost { text-align: center; padding: 34px 40px 30px; margin: 24px 0 10px; border-width: 3px; }
.lost-compass { display: block; width: 120px; height: 120px; margin: 0 auto 4px; background: url(img/compass.svg) center / contain no-repeat; opacity: .85; }
.lost h1 { display: block; margin: 0 0 6px; font-size: clamp(40px, 5vw, 64px); }
.lost h1::after { display: none; }
.lost-line { font-size: 20px; margin: 0 0 18px; }
.lost .hsearch { margin: 0 auto 6px; }
.lost-try { font: 700 14px var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; }
.lost-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; margin: 0; }
.lost-cats .cat { min-height: 88px; padding: 8px 40px 8px 18px; gap: 16px; }
.lost-cats .cat .slot { width: 64px; height: 64px; }
.lost-cats .cat-t b { font-size: 20px; }
.lost-cats .cat-t span { font: 400 14px var(--sans); color: var(--ink-soft); }

:root[data-theme="dark"] .toc-rows a { border-color: #2A4A8E; }
:root[data-theme="dark"] .toc-rows a:hover, :root[data-theme="dark"] .guiderow:hover, :root[data-theme="dark"] .rows a:hover { background: #1D3A7E; }
:root[data-theme="dark"] .pg-btn { background: linear-gradient(180deg, #173170, #13295E) padding-box, linear-gradient(145deg, #F6DA86, #D9A441 30%, #F0C95E 55%, #B8862A) border-box; box-shadow: inset 0 0 0 2px #173170, inset 0 0 0 3.2px rgba(217, 164, 65, .6), 0 3px 8px rgba(0, 0, 0, .3); }
:root[data-theme="dark"] .pg-btn::before { background-image: url(img/chev-light.svg); }

@media (max-width: 1320px) {
  .art { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 1100px) {
  .art { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .art .infobox .ib-title { display: none; }
  .art > .amain, .art > .aside { display: contents; }
  .ahead { order: 0; }
  .aside > .infobox { order: 1; margin: 0 0 24px; }
  .aside > .toc { order: 2; margin: 0 0 18px; }
  .abody { order: 3; }
  .aside > .panel:not(.toc) { order: 4; margin: 0 0 22px; }
  .tdet > summary { cursor: pointer; }
  .tdet:not([open]) > summary h2 { margin: 0; }
  .tdet:not([open]) > summary h2::after { content: "Show"; flex: none; width: auto; height: auto; background: none; margin-left: auto; font: 700 14px var(--sans); color: var(--ink-soft); }
  .hubcols { columns: 1; }
  .lost-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .art .title-row h1 { font-size: 36px; }
  .art .sub { font-size: 17px; }
  .kbadge { font-size: 15px; padding: 3px 12px 4px 9px; gap: 7px; }
  .kbadge .ico { font-size: 16px; }
  .apanel { padding: 14px 16px 16px; font-size: 16px; }
  .apanel > h2, .side > h2, .side h2 { font-size: 24px; }
  .tale-p { padding: 16px 18px; }
  .tale-p .tale { font-size: 17px; }
  .tale-box .ib-title { display: none; }
  .pager { grid-template-columns: 1fr; gap: 10px; }
  .pg-btn.next { grid-column: 1; }
  .hubpanel { padding: 8px 12px 12px; }
  .hubrows a { padding: 6px 10px; }
  .vhead { gap: 14px; }
  .vslot { width: 84px; height: 84px; }
  .vt > h2 { font-size: 24px; }
  .vrole { font-size: 16px; }
  .lost { padding: 22px 16px 18px; }
  .lost-cats { grid-template-columns: 1fr; }
  table.qtable thead { display: none; }
  table.qtable, table.qtable tbody { display: block; }
  table.qtable tr { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--row-line); }
  table.qtable tr:last-child { border-bottom: 0; }
  table.qtable td { display: block; padding: 1px 0; border: 0; white-space: normal; }
  table.qtable td:not(.qn) { grid-column: 2; }
  table.qtable td.qn { grid-row: 1 / span 3; width: auto; padding-top: 2px; }
  .qnum { width: 30px; height: 30px; font-size: 13px; }
  .apanel .facts th { width: 34%; }
}
/* Beside the game (701-1100 px): the article's infobox puts its picture beside its stat rows */
@media (min-width: 701px) and (max-width: 1100px) {
  .art .infobox { padding: 30px 26px 22px; }
  .art .infobox .ib { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 0 26px; align-items: center; }
  .art .infobox .bigslot { width: 100%; grid-column: 1; grid-row: 1 / span 2; }
  .art .infobox .stats { grid-column: 2; margin: 0; }
  .art .infobox .ib-rar, .art .infobox .dv, .art .infobox .ib-foot { display: none; }
}
/* The folded "On this page" heading keeps the side panels' gem */
.toc h2 { display: flex; align-items: center; gap: 12px; }
.toc h2::before { content: ""; width: 24px; height: 24px; flex: none; background: url(img/gem.svg) center / contain no-repeat; }
.side, .apanel, .hubpanel { border-width: 2.5px; }

/* Phones: the abilities table becomes one card per ability (icon, name and level on top, cost and wait under the
   name, the description full width), so no column is squeezed or cut off. */
@media (max-width: 700px) {
  .table-wrap:has(> table.abil) { overflow-x: visible; }
  table.abil, table.abil tbody { display: block; width: 100%; }
  table.abil thead { display: none; }
  table.abil tr { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px; border-bottom: 1px solid rgba(217, 164, 65, .35); }
  table.abil td { display: block; padding: 0; border: 0; width: auto !important; min-width: 0; }
  table.abil td.ab-ic { grid-row: 1 / span 2; width: 60px; min-width: 60px; padding: 0; }
  table.abil .ab-ic img { width: 56px; height: 56px; }
  table.abil td.abcell { grid-column: 2; grid-row: 1; }
  table.abil td.abcell b { white-space: normal; font-size: 18px; }
  table.abil td.lv { grid-column: 3; grid-row: 1; text-align: right; font-size: 14px; }
  table.abil td.nowrap { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--ink-soft); }
  table.abil td.num { grid-column: 3; grid-row: 2; text-align: right; font-size: 13px; color: var(--ink-soft); }
  table.abil td.ab-d { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; width: auto !important; }
  table.abil tr.cap { margin: 6px 0; border: 2px solid #E7B53C; border-radius: 12px; background: linear-gradient(180deg, #FFF3CC, #FBE19A 50%, #F6D57E); }
  table.abil tr.cap td, table.abil tr.cap td:first-child, table.abil tr.cap td:last-child { background: none; border: 0; border-radius: 0; }
  table.abil tr.cap td:first-child::before { display: none; }
  :root[data-theme="dark"] table.abil tr.cap { background: linear-gradient(180deg, #5A4814, #4A3A0E); }
}

/* One logo at a time (owner, 2026-09-27): on the home page the header logo fades in once the
   hero's big logo scrolls under the header (wiki.js setupHeroLogo). */
.brand { transition: opacity .25s ease, visibility .25s; }
html:not(.past-hero) .pg-home .top .brand { opacity: 0; visibility: hidden; }