/* Goblins Farm — shared stylesheet for /wiki, /tutorials, /news. Generated pages only.
   The hand-written pages (index, guides, legal) carry their own inline CSS and
   do not load this file, so nothing here has to stay compatible with them. */
:root{
  --parch:#d7c4ac; --parch-hi:#e6d6c0; --parch-lo:#cbb59a;
  --paper:#fffef9; --paper-lo:#faf3e4; --panel:#f4ecdc; --panel-edge:#eadfcb;
  --brown:#4a3226; --ink:#2b1d12; --outline:#1f150d;
  --body:#5c4a38; --muted:#9a8567;
  --gold:#ffb800; --blue:#0068c9; --green:#6cc94e; --elixir:#b45ce8; --dark:#6b5b8f; --red:#d2482f;
}

/* Section colours. Every piece of chrome that can carry one -- infobox header,
   card tile, rail marker, table pip -- reads these three variables, so a page
   says which economy it belongs to before a word of it has been read. The
   default is the neutral slate; a .tone-* class anywhere overrides it for its
   own subtree, which is how a card for a piece of equipment stays steel-blue on
   a purple troop page. */
:root,.tone-slate{--t-line:#8a7963;--t-wash:#f0e9dd;--t-deep:#5b4c3a}
.tone-elixir{--t-line:#a855f7;--t-wash:#f6ebff;--t-deep:#6b2fa0}
.tone-dark  {--t-line:#6d5a9c;--t-wash:#ece8f6;--t-deep:#3f3163}
.tone-ore   {--t-line:#3f87b0;--t-wash:#e5f1f8;--t-deep:#24566f}
.tone-gold  {--t-line:#d99b13;--t-wash:#fff3d6;--t-deep:#8a5f00}
.tone-builder{--t-line:#43a06f;--t-wash:#e6f6ec;--t-deep:#1f6041}
.tone-capital{--t-line:#2f7fc4;--t-wash:#e5effb;--t-deep:#1b4f80}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg,var(--parch-hi),var(--parch) 40%,var(--parch-lo));
  background-attachment:fixed;
  font-family:"Nunito Sans",system-ui,-apple-system,sans-serif;
  color:var(--body); font-size:15.5px; line-height:1.7;
  padding:0 20px 80px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
strong{color:var(--ink)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- site header ----------
   Sticky, because on a 3,000px entry page the search field is the fastest way
   out and it should never scroll away. */
.sitebar{position:sticky;top:0;z-index:40;background:rgba(215,196,172,.93);
  backdrop-filter:blur(8px);border-bottom:2px solid rgba(43,29,18,.14);
  margin:0 -20px;padding:0 20px}
.sitebar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.sitebar .brand,.sitebar .searchbox,.sitebar .sitenav{margin-top:11px;margin-bottom:11px}
.sitebar .brand{font-family:"Lilita One",sans-serif;font-size:19px;color:#fff;-webkit-text-stroke:2px var(--outline);paint-order:stroke fill;text-shadow:0 2px 0 var(--outline);text-decoration:none}
.sitenav{display:flex;flex-wrap:wrap;gap:14px;margin-left:auto}
.sitenav a{font-weight:800;font-size:14px;color:var(--brown);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.sitenav a:hover,.sitenav a[aria-current]{border-bottom-color:var(--gold);color:var(--ink)}

/* ---------- search ---------- */
.searchbox{position:relative;flex:1 1 260px;max-width:420px}
.searchbox input{width:100%;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
  background:var(--paper);border:2px solid rgba(43,29,18,.22);border-radius:11px;
  padding:8px 40px 8px 34px;outline:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a8567' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5'/></svg>");
  background-repeat:no-repeat;background-position:9px 50%;background-size:17px}
.searchbox input::placeholder{color:var(--muted);font-weight:600}
.searchbox input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,184,0,.25)}
.searchbox input::-webkit-search-cancel-button{-webkit-appearance:none}
.searchbox kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;
  font:inherit;font-size:11.5px;font-weight:900;color:var(--muted);
  border:2px solid var(--panel-edge);background:var(--panel);border-radius:6px;padding:0 6px}
.searchbox input:focus~kbd{opacity:0}
.results{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:50;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:13px;
  box-shadow:0 10px 26px rgba(20,12,6,.3);overflow:hidden;max-height:min(70vh,520px);overflow-y:auto}
.results .hit{display:flex;align-items:center;gap:11px;padding:8px 11px;text-decoration:none;
  border-bottom:1px solid var(--panel-edge);border-left:4px solid var(--t-line)}
.results .hit:last-child{border-bottom:0}
.results .hit:hover,.results .hit.on{background:var(--t-wash)}
.hit-text{min-width:0;line-height:1.3}
.hit-text b{display:block;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hit-sec{font-size:12px;font-weight:800;color:var(--t-deep);text-transform:uppercase;letter-spacing:.04em}
.results .noresult{padding:14px 13px;margin:0;font-size:14px;color:var(--muted)}
.plaque.sm.empty{background:var(--panel)}

/* ---------- page shell ----------
   Three columns on a desktop: what is in the wiki, the page, and the page's
   numbers. The old single column left roughly half the window empty on every
   entry, which is the whole reason the site read as a blog rather than a
   reference. */
:root{--shell:min(1400px,100% - 40px);--measure:72ch;--railw:224px;--asidew:330px}
.shell{max-width:var(--shell);margin:22px auto 0;display:grid;gap:24px;
  grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:1000px){
  .shell.withrail{grid-template-columns:var(--railw) minmax(0,1fr)}
}
@media(min-width:1280px){
  .shell.withrail:has(.statrail){grid-template-columns:var(--railw) minmax(0,1fr) var(--asidew)}
}
.doc{min-width:0;background:linear-gradient(180deg,var(--paper),var(--paper-lo));
  border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 8px 0 rgba(43,29,18,.9),0 24px 40px rgba(20,12,6,.25);padding:34px 40px 40px}
.doc.narrow{max-width:820px;margin:0 auto}
.doc>p,.doc>ul,.doc>ol,.doc>h2,.doc>h3,.doc>.note,
.block>p,.block>.note{max-width:var(--measure)}
.doc>.grid,.doc>.strip,.doc>.related,.doc>.pagehead{max-width:none}

/* ---------- category rail ----------
   The thing that makes a wiki a wiki: every sibling one click away. Sticks to
   the top of the window and scrolls inside itself, because Troops is 58 entries
   and that is taller than most screens. */
.rail{position:sticky;top:74px;max-height:calc(100vh - 92px);overflow-y:auto;
  background:var(--panel);border:2.5px solid var(--ink);border-radius:15px;
  box-shadow:0 5px 0 rgba(43,29,18,.85);padding:10px;scrollbar-width:thin}
.rail-home{display:block;font-family:"Lilita One",sans-serif;font-size:16px;color:var(--ink);
  text-decoration:none;padding:6px 10px 8px;border-bottom:2px solid var(--panel-edge);margin-bottom:6px}
.rail-home.on,.rail-home:hover{color:var(--t-deep)}
.rail-sec{border-left:4px solid transparent;border-radius:0 8px 8px 0;margin-bottom:1px}
.rail-sec.on{border-left-color:var(--t-line);background:var(--t-wash)}
.rail-head{display:flex;align-items:center;gap:6px;font-weight:900;font-size:13.5px;
  color:var(--brown);text-decoration:none;padding:6px 9px;border-radius:0 8px 8px 0}
.rail-head:hover{color:var(--ink);background:rgba(255,255,255,.55)}
.rail-sec.on>.rail-head{color:var(--t-deep)}
.rail-n{margin-left:auto;font-size:11px;font-weight:900;color:var(--muted);
  background:rgba(255,255,255,.7);border-radius:999px;padding:0 6px;line-height:17px}
.rail-items{list-style:none;padding:2px 0 8px;margin:0}
.rail-items a{display:flex;align-items:center;gap:7px;padding:3px 9px 3px 10px;
  font-size:13px;font-weight:700;color:var(--body);text-decoration:none;line-height:1.35;border-radius:7px}
.rail-items img{width:22px;height:22px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 1px 1px rgba(60,40,20,.25))}
.rail-items a:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.rail-items a[aria-current]{background:var(--t-line);color:#fff;font-weight:900;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.rail-items a[aria-current] img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}

/* Below the three-column breakpoint the rail becomes a row of section chips
   above the article. The entry lists are too long to sit there, and a phone
   reader who wants one is a tap away on the section's own page. */
@media(max-width:999px){
  .rail{position:static;max-height:none;overflow:visible;display:flex;gap:6px;
    padding:8px;overflow-x:auto;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail-nav{display:flex;gap:6px}
  .rail-home{border-bottom:0;margin:0;white-space:nowrap;align-self:center;font-size:14px;padding:4px 8px}
  .rail-sec{border-left:0;border-radius:999px;margin:0}
  .rail-sec.on{background:var(--t-line)}
  .rail-sec.on>.rail-head{color:#fff}
  .rail-head{white-space:nowrap;border-radius:999px;padding:5px 12px}
  .rail-n,.rail-items{display:none}
}

/* ---------- stat rail ---------- */
.statrail{min-width:0}
@media(min-width:1280px){
  .statrail{position:sticky;top:74px;max-height:calc(100vh - 92px);overflow-y:auto;
    scrollbar-width:thin;padding-right:2px}
}
@media(max-width:1279px){
  /* Above the article, where a reader meets the numbers before the prose --
     which is the right order for a page someone opened to look something up.
     The section chips stay above it: where you are comes before what it does. */
  .rail{order:-2}
  .statrail{order:-1;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

/* ---------- infobox ----------
   The stat block. Titled, tinted by economy, with the subject's own artwork
   large enough to be the picture of the page rather than a thumbnail of one. */
.infobox{background:var(--paper);border:3px solid var(--ink);border-radius:15px;overflow:hidden;
  box-shadow:0 5px 0 rgba(43,29,18,.85);margin-bottom:16px}
.ib-title{font-family:"Lilita One",sans-serif;font-size:19px;line-height:1.25;color:#fff;
  background:var(--t-line);padding:9px 14px;text-align:center;
  text-shadow:0 2px 0 rgba(0,0,0,.28);border-bottom:3px solid var(--ink)}
.ib-art{display:grid;place-items:center;min-height:170px;padding:14px;
  background:
    radial-gradient(circle at 50% 58%,rgba(255,255,255,.85),transparent 62%),
    var(--t-wash)}
.ib-art img{max-width:200px;max-height:190px;width:auto;height:auto;
  filter:drop-shadow(0 6px 8px rgba(40,25,10,.3))}
.ib-art.drawn img{max-width:150px;max-height:150px}
.ib-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  padding:10px 12px 2px;background:var(--paper)}
.ib-rows{font-size:14px}
.ib-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding:7px 14px;border-top:1px solid var(--panel-edge)}
.ib-row:nth-child(even){background:var(--paper-lo)}
.ib-row dt{font-weight:900;color:var(--ink)}
.ib-row dd{text-align:right;color:var(--body)}
.infobox.wordy .ib-row{grid-template-columns:1fr;gap:1px}
.infobox.wordy .ib-row dd{text-align:left}
.ib-foot{border-top:3px solid var(--ink);background:var(--t-wash);padding:8px 14px;text-align:center}
.ib-foot a{font-weight:900;font-size:13.5px;color:var(--t-deep);text-decoration:none}
.ib-foot a:hover{text-decoration:underline}

/* ---------- banner ----------
   On a section front page the illustration carries the title. A header that is
   a picture with the name on it is the difference between a section and a
   paragraph that happens to start with a heading. */
.banner{margin:-34px -40px 20px;border-radius:15px 15px 0 0;overflow:hidden;
  border-bottom:3px solid var(--ink);background:var(--panel);position:relative}
.banner img{width:100%;height:clamp(150px,20vw,260px);object-fit:cover;object-position:50% 58%}
.banner.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,12,6,.86) 0%,rgba(20,12,6,.5) 38%,rgba(20,12,6,.06) 72%)}
.banner-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 34px 18px}
.banner-text h1{margin:0;font-size:clamp(28px,3.4vw,42px)}
.banner-kicker{margin:6px 0 0;font-size:12.5px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;color:#ffd77a;text-shadow:0 2px 3px rgba(0,0,0,.6)}

.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted);text-decoration:none;font-weight:700}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 6px;opacity:.6}

h1{font-family:"Lilita One",sans-serif;font-weight:400;font-size:33px;line-height:1.15;color:#fff;
  -webkit-text-stroke:2.5px var(--outline);paint-order:stroke fill;text-shadow:0 3px 0 var(--outline);margin-bottom:8px}
/* Section headings get the page's own colour as a rule beside them, which is
   what turns a long entry into something you can skim by shape. */
h2{font-family:"Lilita One",sans-serif;font-weight:400;font-size:22px;color:var(--ink);
  margin:34px 0 10px;scroll-margin-top:84px;padding-left:13px;border-left:5px solid var(--t-line);
  line-height:1.3}
h3{font-size:16.5px;color:var(--ink);margin:22px 0 6px;font-weight:900}
p,li{margin-bottom:11px}
ul,ol{padding-left:23px;margin-bottom:14px}
li>ul,li>ol{margin-top:8px}
.lede{font-size:17.5px;color:#4f4030;line-height:1.65}
.kicker{font-size:12.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t-deep);margin:0 0 6px}
.updated{font-size:13px;color:var(--muted);margin-bottom:20px}
.attrib{font-size:13px;color:var(--muted);margin-bottom:0}
.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.tag{font-size:12px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;
  background:var(--panel);border:2px solid var(--panel-edge);border-radius:999px;padding:3px 11px;color:var(--brown)}
.tag.gold{background:#fff3cf;border-color:#f0dda2}
.tag.elixir{background:#f2e2fb;border-color:#e0c8f2}
.tag.dark{background:#e6e2f0;border-color:#cfc7e2}

/* ---------- tables ----------
   A 21-level table is the reason these pages exist, so the header sticks while
   you scroll it and the level column is a badge rather than a loose number. */
.tablewrap{overflow:auto;margin:14px 0;max-height:min(74vh,720px);
  border:2px solid var(--panel-edge);border-radius:12px;background:var(--paper)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14.5px;min-width:420px}
caption{text-align:left;font-size:13px;color:var(--muted);padding:8px 10px 6px}
th,td{border-bottom:1px solid var(--panel-edge);padding:8px 11px;text-align:left}
th{position:sticky;top:0;z-index:2;background:var(--t-wash);color:var(--t-deep);font-weight:900;
  box-shadow:inset 0 -2.5px 0 var(--t-line);white-space:nowrap}
th.lvl,td.lvl{width:1%;white-space:nowrap}
tbody tr:nth-child(even){background:var(--paper-lo)}
tbody tr:hover{background:var(--t-wash)}
tbody tr:last-child td{border-bottom:0}
.lvlbadge{display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 7px;
  border-radius:8px;background:var(--t-line);color:#fff;font-weight:900;font-size:13.5px;
  box-shadow:0 2px 0 rgba(0,0,0,.2)}
td.todo,.todo{color:#a8724a;font-style:italic}

/* A cost is a long number whose only distinguishing feature is a word at the
   end that nobody reads. The pip puts the answer at the front. */
.res{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.res i{width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid rgba(0,0,0,.35);box-shadow:inset 0 -2px 2px rgba(0,0,0,.2)}
.res.gold i,.res.capital-gold i{background:linear-gradient(180deg,#ffd964,#e0a500)}
.res.elixir i{background:linear-gradient(180deg,#e59bff,#a53fe0)}
.res.dark-elixir i{background:linear-gradient(180deg,#8f86a8,#3b3352)}
.res.gems i{background:linear-gradient(180deg,#8ff0a4,#17a34a)}
.res.raid-medals i{background:linear-gradient(180deg,#ffe08a,#c8873a)}
.res.builder-gold i{background:linear-gradient(180deg,#ffd964,#c78d12)}
.res.builder-elixir i{background:linear-gradient(180deg,#e59bff,#8d33c4)}
.res.shiny-ore i{background:linear-gradient(180deg,#f2f2f2,#9aa2ab)}
.res.glowy-ore i{background:linear-gradient(180deg,#9be8ff,#2f9ec4)}
.res.starry-ore i{background:linear-gradient(180deg,#d7c2ff,#6c3fc4)}
/* The amount carries the colour; the name stays, quietly, because a pip only
   speaks for itself when a player already knows the currency by sight. */
.res-name{color:var(--muted);font-size:12.5px}

/* A tutorial's facts, which run across the top rather than down a rail: these
   pages are one column by design and a sidebar would fight the walkthrough. */
.factbar{display:flex;flex-wrap:wrap;gap:0;margin:18px 0 22px;
  background:var(--t-wash);border:2px solid var(--panel-edge);border-radius:12px;overflow:hidden}
.factbar>div{flex:1 1 150px;padding:9px 16px;border-right:2px solid rgba(255,255,255,.65)}
.factbar>div:last-child{border-right:0}
.factbar dt{font-size:11.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--t-deep)}
.factbar dd{font-size:15px;font-weight:700;color:var(--ink)}

/* ---------- info panels ---------- */
.note{border-left:5px solid var(--gold);background:#fff8e6;border-radius:0 10px 10px 0;padding:14px 18px;margin:18px 0}
.note.warn{border-left-color:var(--red);background:#fdeee9}
.note p:last-child{margin-bottom:0}
.note b{color:var(--ink)}

/* ---------- table of contents ---------- */
.toc{background:var(--panel);border:2.5px solid var(--ink);border-radius:13px;padding:12px 16px 14px;
  box-shadow:0 4px 0 rgba(43,29,18,.8)}
.toc h2{margin:0 0 8px;font-size:15px;padding-left:0;border-left:0;
  text-transform:uppercase;letter-spacing:.07em;font-family:inherit;font-weight:900;color:var(--t-deep)}
.toc ol{margin:0;padding-left:19px;font-size:14px}
.toc li{margin-bottom:5px}
.toc a{color:var(--brown);text-decoration:none;font-weight:700}
.toc a:hover{color:var(--ink);text-decoration:underline}

/* ---------- card grids ----------
   973 pieces of extracted game art and the old cards spent 56px on them. The
   plaque gives each one a lit recess to sit in, which is what makes a grid of
   them read as a cabinet of things rather than a list with icons. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:16px 0 6px}
.grid.tiles{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.card{display:block;background:var(--paper);border:2.5px solid var(--panel-edge);border-radius:13px;
  padding:12px 14px;text-decoration:none;color:var(--body);
  transition:transform .12s,box-shadow .12s,border-color .12s}
.card:hover{transform:translateY(-3px);box-shadow:0 5px 0 var(--t-line);border-color:var(--t-line)}
.card b{display:block;font-family:"Lilita One",sans-serif;font-weight:400;font-size:17px;color:var(--ink);margin-bottom:3px;line-height:1.25}
.card .cardtext>span{font-size:13.5px;line-height:1.5;display:block}
.cardcount{font-size:11.5px!important;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--t-deep);margin-bottom:2px}

.plaque{display:grid;place-items:center;flex:0 0 auto;width:84px;height:84px;border-radius:12px;
  background:radial-gradient(circle at 50% 60%,#fff,var(--t-wash) 78%);
  border:2px solid var(--panel-edge)}
.plaque img{max-width:70px;max-height:70px;width:auto;height:auto;
  filter:drop-shadow(0 3px 3px rgba(50,32,14,.28))}
.plaque.sm{width:46px;height:46px;border-radius:9px}
.plaque.sm img{max-width:38px;max-height:38px}
.plaque.drawn{background:none;border-color:transparent}

/* Horizontal card: plaque left, name and blurb right. */
.card.hasart{display:flex;align-items:center;gap:13px}
.card .cardtext{display:block;min-width:0}
/* Name-only card: the art on top, big, and the name under it. */
.card.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:13px 10px 12px}
.card.tile b{font-size:15px;margin:0}
.card.tile .plaque{width:88px;height:88px}
.card.tile .plaque img{max-width:74px;max-height:74px}

/* Section card on the wiki front page: the section's own banner across the top.
   These are the fourteen doors into 369 pages and they should look like it. */
.card.bigcard{padding:0;overflow:hidden;border-width:3px;border-color:var(--ink);
  box-shadow:0 5px 0 rgba(43,29,18,.8)}
.card.bigcard:hover{box-shadow:0 8px 0 var(--t-line)}
.bigcard-art{display:block;border-bottom:3px solid var(--ink);background:var(--t-wash)}
.bigcard-art img{width:100%;height:132px;object-fit:cover;object-position:50% 55%}
.card.bigcard .cardtext{display:block;padding:12px 15px 14px}

.linklist{columns:2;column-gap:26px;font-size:14.5px;margin:10px 0 4px}
.linklist li{break-inside:avoid;margin-bottom:5px}

/* ---------- steps ---------- */
ol.steps{list-style:none;padding-left:0;counter-reset:step}
ol.steps>li{counter-increment:step;position:relative;padding-left:44px;margin-bottom:18px}
ol.steps>li::before{content:counter(step);position:absolute;left:0;top:1px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#ffe9a8,#ffd351);
  border:2.5px solid #5c3d00;color:#5c3d00;font-weight:900;font-size:15px;box-shadow:0 2px 0 #5c3d00}
ol.steps>li>b{display:block;color:var(--ink);font-size:16px;margin-bottom:3px}

/* ---------- cta + footer ---------- */
.cta{display:inline-block;background:linear-gradient(180deg,#ffe9a8,#ffd351);border:2.5px solid #5c3d00;
  border-radius:12px;color:#5c3d00;font-weight:900;padding:12px 22px;text-decoration:none;margin:14px 0;box-shadow:0 3px 0 #5c3d00}
.related{background:var(--panel);border:2px solid var(--panel-edge);border-radius:13px;padding:16px 20px;margin-top:34px}
.related h2{margin-top:0;font-size:17px}
.related ul{margin-bottom:0}
.toolnote{margin-top:26px;padding-top:16px;border-top:2px dashed var(--panel-edge);font-size:14px;color:var(--body)}
.legal{margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.6}
.sitefoot{max-width:var(--shell);margin:26px auto 0;text-align:center;font-size:13px;color:#7d6a52}
.sitefoot a{color:#7d6a52;font-weight:700}

/* ---------- entry header ----------
   The artwork beside the title, on a tinted band so the top of an entry reads
   as a nameplate. Game art is a portrait with its own silhouette, so it fills
   its box; the drawn emblems are already a shape and sit inside one. */
.pagehead{display:flex;align-items:center;gap:20px;margin:0 0 6px;
  background:linear-gradient(90deg,var(--t-wash),transparent 78%);
  border-left:5px solid var(--t-line);border-radius:0 14px 14px 0;padding:14px 18px}
.pagehead-text{min-width:0}
.pagehead h1{margin:0}
.pagehead .tagrow{margin:9px 0 0}
.portrait{flex:0 0 auto;width:128px;height:128px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 60%,#fff,var(--t-wash) 76%);
  border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 rgba(43,29,18,.8)}
.portrait img{max-width:104px;max-height:104px;width:auto;height:auto;display:block;
  filter:drop-shadow(0 4px 4px rgba(50,32,14,.3))}
.portrait.drawn img{max-width:96px;max-height:96px}

/* ---------- mascots ----------
   The cast is furniture: they introduce a callout so it reads faster. The
   medallion is what keeps them from competing with the game art, which is the
   subject of every page. They go away on a phone, where a 90px figure is a
   third of the width of the thing it is supposed to be introducing. */
.speaks{display:flex;align-items:flex-start;gap:18px}
.speaks>div{min-width:0;flex:1 1 auto}
.speaks>div>p:last-child{margin-bottom:0}
.medallion{flex:0 0 auto;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fffdf5,var(--panel) 72%);
  border:2.5px solid var(--panel-edge);align-self:center}
.medallion.big{width:132px;height:132px}
.mascot{width:86px;height:auto;filter:drop-shadow(0 3px 4px rgba(60,40,20,.2))}
.mascot.big{width:112px}
h2.withmascot{display:flex;align-items:center;gap:12px;padding-left:0;border-left:0}
h2.withmascot .medallion{width:52px;height:52px;border-width:2px}
h2.withmascot .mascot{width:42px}
.intro{margin-bottom:12px;align-items:center}
.intro>div{align-self:center}
.intro .lede{margin-bottom:0;max-width:var(--measure)}

@media(max-width:640px){
  .medallion{display:none}
}

/* ---------- level strip ----------
   The same building drawn at six points up its ladder: on a page that is
   otherwise a table of numbers, this is the content. */
.strip{display:flex;gap:11px;overflow-x:auto;padding:4px 2px 10px;margin:12px 0 6px}
.strip figure{flex:1 1 0;min-width:126px;margin:0;text-align:center;
  background:radial-gradient(circle at 50% 70%,#fff,var(--t-wash) 80%);
  border:2.5px solid var(--panel-edge);border-radius:13px;padding:12px 6px 8px;
  display:flex;flex-direction:column}
/* Frames share a baseline: a level 1 Cannon is half the height of a level 21 and
   without this the captions stagger down the row like a staircase. */
.strip .frame{flex:1 1 auto;display:flex;align-items:flex-end;justify-content:center;height:112px}
.strip img{width:auto;max-width:100%;max-height:108px;filter:drop-shadow(0 4px 4px rgba(50,32,14,.26))}
.strip figcaption{margin-top:8px;font-size:12.5px;font-weight:900;color:var(--t-deep)}

/* ---------- keep reading ---------- */
.readon{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.readon-item{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;
  color:var(--brown);background:var(--paper);border:2px solid var(--panel-edge);
  border-radius:11px;padding:7px 12px 7px 8px;line-height:1.35}
.readon-item:hover{color:var(--ink);border-color:var(--gold)}

@media (max-width:640px){
  body{font-size:15px;padding:0 14px 60px}
  /* The bar bleeds to the window edge, so its negative margin has to
     match the body gutter exactly or the page scrolls sideways. */
  .sitebar{margin:0 -14px;padding:0 14px}
  :root{--shell:100%}
  .doc{padding:24px 18px 30px;border-radius:14px}
  .banner{margin:-24px -18px 16px;border-radius:11px 11px 0 0}
  .banner-text{padding:14px 18px 12px}
  h1{font-size:26px}
  h2{font-size:19px;margin-top:28px}
  .lede{font-size:16.5px}
  .linklist{columns:1}
  .pagehead{gap:13px;padding:11px 12px}
  .portrait{width:92px;height:92px;border-radius:14px}
  .portrait img{max-width:76px;max-height:76px}
  .portrait.drawn img{max-width:70px;max-height:70px}
  .ib-row{grid-template-columns:auto 1fr}
  .sitebar .brand{font-size:17px}
  .searchbox{order:3;flex-basis:100%;max-width:none;margin-top:0}
  .sitenav{margin-left:auto;gap:12px}
  .tablewrap{max-height:none}
}

/* ---------- hub jump bar ----------
   A section front page's contents, as a row of chips rather than a column. The
   cards below want the whole width more than a four-item list wants a rail of
   its own. */
.jumpbar{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.jumpbar a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-weight:900;font-size:13.5px;color:var(--t-deep);background:var(--t-wash);
  border:2px solid var(--panel-edge);border-radius:999px;padding:5px 13px}
.jumpbar a:hover{border-color:var(--t-line)}
.jumpbar a span{font-size:11px;color:var(--brown);background:rgba(255,255,255,.8);
  border-radius:999px;padding:0 6px;line-height:16px}

/* Section cards on the wiki's front page: four things from behind each door.
   The painted banners that used to sit here repeated -- the two side villages
   shared one apiece between six sections -- and none of them showed anything
   the section is actually about. */
.bigcard-art{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;align-items:end;
  padding:16px 14px 14px;border-bottom:3px solid var(--ink);
  background:radial-gradient(ellipse at 50% 88%,#fff,var(--t-wash) 76%)}
.bigcard-art img{width:100%;height:62px;object-fit:contain;
  filter:drop-shadow(0 3px 3px rgba(50,32,14,.3))}

/* The front page's "rest of the site" list: links with a line of context, and
   no bullet doing the work a dash does better. */
.plainlist{list-style:none;padding:0;margin:0;font-size:14px}
.plainlist li{margin-bottom:7px;line-height:1.45}
.plainlist a{font-weight:900;color:var(--t-deep);text-decoration:none}
.plainlist a:hover{text-decoration:underline}

/* The row for the page you are on, in a table that lists its siblings. */
tbody tr.here{background:var(--t-wash);font-weight:900;color:var(--ink)}
tbody tr.here td:first-child{box-shadow:inset 3px 0 0 var(--t-line)}