/* Mythic Idle Wiki.
   Dark and gold because the GAME is dark and gold: the item card embedded on
   every page is the game's own markup, and a pale document wrapped around a
   navy card looks like the card was bolted on. The whole page is the game's
   palette instead, so the card belongs to the page rather than interrupting it.

   The layout follows the convention every game wiki settled on — OSRS, Melvor,
   the Wikis of that family — because readers already know how to use it: a
   dense infobox pinned to the right, prose and tables flowing beside it, and
   sections tight enough that a page is scanned rather than read. Airy layouts
   are for marketing pages; a wiki is a reference. */
:root{
  --bg:#0d1420; --bg2:#131d2e; --panel:#16223a; --panel2:#1b2942;
  --line:#26364f; --line2:#31456a;
  --ink:#e6ecf7; --dim:#93a3bd; --faint:#6b7d99;
  --gold:#d4a017; --gold-lt:#f0c96b; --link:#6fa8ff; --link-v:#a98fe0;
  --good:#3fae4f; --warn:#e8b52c; --bad:#e05555;
  --r1:#9aa7ba; --r2:#4fbf6a; --r3:#4a9eff; --r4:#b06cf0; --r5:#f2a02c; --r6:#ff5d7a;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 2px 14px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:
    radial-gradient(1200px 500px at 50% -200px,rgba(212,160,23,.07),transparent 70%),
    var(--bg);
  color:var(--ink);font:15.5px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}

/* ── chrome ─────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;
  align-items:center;padding:.7rem 1.25rem;background:rgba(13,20,32,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-size:1.05rem;font-weight:800;color:var(--ink);letter-spacing:.01em}
.brand span{color:var(--gold)}
.top nav{display:flex;gap:1.1rem;font-size:.92rem}
.top nav a{color:var(--dim)}
.top nav a:hover{color:var(--gold-lt);text-decoration:none}
main{max-width:74rem;margin:0 auto;padding:1.25rem 1.25rem 3rem}
footer{max-width:74rem;margin:0 auto;padding:1.5rem 1.25rem 3rem;color:var(--faint);
  border-top:1px solid var(--line);font-size:.85rem}

/* ── the page head: icon, name, chips ───────────────────────────────── */
.crumb{color:var(--faint);font-size:.85rem;margin:.25rem 0 .6rem}
.crumb a{color:var(--dim)}
.phead{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:.35rem}
h1{font-size:1.75rem;line-height:1.15;margin:0;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0 1.1rem}
.chip{font-size:.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:.18rem .5rem;border-radius:.3rem;border:1px solid var(--line2);
  background:var(--panel);color:var(--dim)}
.chip.r1{color:var(--r1);border-color:var(--r1)} .chip.r2{color:var(--r2);border-color:var(--r2)}
.chip.r3{color:var(--r3);border-color:var(--r3)} .chip.r4{color:var(--r4);border-color:var(--r4)}
.chip.r5{color:var(--r5);border-color:var(--r5)} .chip.r6{color:var(--r6);border-color:var(--r6)}
.chip.el{color:var(--gold-lt);border-color:rgba(212,160,23,.5)}

/* ── two columns: content, then the infobox rail ────────────────────── */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:1.75rem;align-items:start}
.rail{position:sticky;top:4.2rem;display:flex;flex-direction:column;gap:1rem}
@media (max-width:900px){ .cols{grid-template-columns:1fr} .rail{position:static;order:-1} }

h2{font-size:1.02rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gold-lt);
  margin:1.9rem 0 .6rem;padding-bottom:.35rem;border-bottom:2px solid var(--line2)}
h2:first-child{margin-top:0}
.lede{font-size:1.02rem;color:var(--dim);max-width:44rem}
.note{color:var(--dim);font-size:.9rem}
.cap{color:var(--faint);font-size:.8rem;font-family:var(--mono)}
.num{text-align:right;font-family:var(--mono)}

/* ── tables: dense, striped, gold-headed ────────────────────────────── */
/* SHRINK TO CONTENT, not to the viewport. `width:100%` stretched every column
   to fill the page, so a two-column recipe put "Material" hard left and "Qty"
   hard right with a hand's width of nothing between them. Sizing to content and
   letting one column absorb the slack is what makes a reference table scannable
   — the eye travels between two numbers, not across a gap. */
table{width:auto;max-width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:.4rem;overflow:hidden;font-size:.92rem}
/* Cells hug their text by default. `.grow` means "this column may WRAP" — it
   does NOT mean "this column expands", which is what it meant on the first
   attempt, and a `width:100%` on one column drags the whole table back out to
   full width and reintroduces the gap this rule exists to close. */
table td:not(.grow), table th:not(.grow){white-space:nowrap}
table .grow{white-space:normal}
/* A cell holding a genuinely long list needs a ceiling so one prose column
   cannot stretch the table past the reading measure. */
table .grow{max-width:32rem}
/* A table wider than the page scrolls inside its own box rather than pushing
   the page sideways. */
.tw{overflow-x:auto;margin:.5rem 0}
th{background:var(--panel2);color:var(--gold-lt);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;text-align:left;
  padding:.5rem .7rem;border-bottom:2px solid var(--line2)}
td{padding:.42rem .7rem;border-bottom:1px solid var(--line)}
tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
tbody tr:hover{background:rgba(212,160,23,.07)}
tbody tr:last-child td{border-bottom:0}
.bar{display:inline-block;width:5.5rem;height:.42rem;background:var(--line2);
  border-radius:.25rem;overflow:hidden;vertical-align:middle;margin-right:.5rem}
.bar i{display:block;height:100%;background:var(--good)}
.bar i.over{background:var(--warn)}

/* ── infobox: the game's card, framed ───────────────────────────────── */
.infobox{background:var(--panel);border:1px solid var(--line2);border-radius:.5rem;
  box-shadow:var(--shadow);overflow:hidden}
.infobox > h3{margin:0;padding:.5rem .75rem;background:var(--panel2);
  color:var(--gold-lt);font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;border-bottom:1px solid var(--line2)}
.infobox .ibody{padding:.75rem}
.gamecard{--bg3:#1b2740;--bd:#2f4062;--t1:#e8e9f0;--t2:#aab3c8;--tm:#8892aa;
  --gl:#f0c96b;--gd:#d4a017;--gold:#f2b632;--display:inherit;--r-sm:.35rem}
.gamecard *{max-width:100%}
.gamecard .perkpill{white-space:normal}
.cardnote{margin:.6rem 0 0;font-size:.82rem;color:var(--faint)}

/* ── mob card ───────────────────────────────────────────────────────── */
.mob{background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--bad);
  border-radius:.45rem;padding:.8rem .9rem;margin:.6rem 0}
.mob-h{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.mob-h b{font-size:1.02rem}
.mob-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));
  gap:.4rem;margin:.65rem 0 0}
.mob-grid div{background:var(--bg2);border:1px solid var(--line);border-radius:.3rem;padding:.35rem .5rem}
.mob-grid span{display:block;color:var(--faint);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}
.mob-grid b{font-family:var(--mono);font-size:.95rem;font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem}
.tag{font-size:.72rem;padding:.15rem .45rem;border-radius:.25rem;border:1px solid var(--line2);color:var(--dim)}
.tag.poison{color:var(--good);border-color:rgba(63,174,79,.5)}
.tag.burn,.tag.dragonfire{color:#e07b39;border-color:rgba(224,123,57,.55)}
.tag.lifesteal{color:#ff8080;border-color:rgba(192,57,43,.5)}
.tag.special{color:var(--gold);border-color:rgba(212,160,23,.55)}

/* ── perks ──────────────────────────────────────────────────────────── */
.perk{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:.35rem;padding:.5rem .7rem;margin:.4rem 0}
.perk-h{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.perk-d{color:var(--dim);font-size:.9rem}
.tagx{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);
  border:1px solid var(--gold);border-radius:.2rem;padding:0 .3rem}

/* ── index: filter + cards ──────────────────────────────────────────── */
.filter{width:100%;padding:.6rem .75rem;margin:0 0 1rem;background:var(--panel);
  border:1px solid var(--line2);border-radius:.4rem;color:var(--ink);font-size:.95rem}
.filter::placeholder{color:var(--faint)}
.filter:focus{outline:2px solid var(--gold);outline-offset:-1px}
.cards{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:1.4rem}
.card{display:block;background:var(--panel);border:1px solid var(--line2);
  border-radius:.5rem;padding:.9rem;color:var(--ink)}
.card:hover{border-color:var(--gold);text-decoration:none;transform:translateY(-1px)}
.card b{display:block;margin-bottom:.25rem;color:var(--gold-lt)}
.card span{color:var(--dim);font-size:.88rem}
.card.soon{opacity:.45} .card.soon:hover{border-color:var(--line2);transform:none}
/* rarity dot in list rows */
.rd{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.45rem;
  vertical-align:middle;background:var(--r1)}
.rd.r2{background:var(--r2)}.rd.r3{background:var(--r3)}.rd.r4{background:var(--r4)}
.rd.r5{background:var(--r5)}.rd.r6{background:var(--r6)}
/* navbox */
.navbox{margin-top:2.2rem;border:1px solid var(--line);border-radius:.4rem;overflow:hidden}
.navbox h4{margin:0;padding:.4rem .7rem;background:var(--panel2);color:var(--gold-lt);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.07em}
.navbox div{padding:.6rem .7rem;background:var(--panel);display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.88rem}

/* ── mob icon + roll pool ────────────────────────────────────────────── */
.mob-h{align-items:center}
.mob-ico{display:inline-flex;flex:none}
.mob-ico .ico-wrap{display:inline-block;position:relative;vertical-align:middle}
.pool{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.poolchip{font-size:.82rem;padding:.25rem .55rem;border-radius:.3rem;
  background:var(--panel2);border:1px solid var(--line2);color:var(--dim);cursor:default}
.poolchip.stat{color:var(--gold-lt);border-color:rgba(212,160,23,.4)}

/* ── sprites ─────────────────────────────────────────────────────────── */
/* Icons sit INSIDE the cell they label rather than in a column of their own,
   so a row stays one line and the name is still what the eye lands on. */
.ico{display:inline-flex;align-items:center;vertical-align:middle;margin-right:.45rem;flex:none}
.ico .ico-wrap{display:inline-block;position:relative;vertical-align:middle}
.withico{display:inline-flex;align-items:center;gap:0}
.phead .ico{margin-right:.75rem}
.phead .ico .ico-wrap{width:44px !important;height:44px !important}
.poolchip .ico{margin-right:.35rem}
.poolchip{display:inline-flex;align-items:center}
.navbox .ico{margin-right:.3rem}
.navbox div a{display:inline-flex;align-items:center}
.infobox .ico{margin-right:.4rem}
/* Sprites are captured at the size a CARD wants them. In a table row that is
   too tall, so they are scaled down in place rather than re-extracted at a
   second size — one capture, two presentations. */
table .ico .ico-wrap{width:22px !important;height:22px !important}
table td{padding-top:.3rem;padding-bottom:.3rem}
.poolchip .ico .ico-wrap{width:18px !important;height:18px !important}
.navbox .ico .ico-wrap{width:18px !important;height:18px !important}

/* ── recipes, rates and quick filters ────────────────────────────────── */
/* A recipe is a heading and a row of ingredients, not a table: two-thirds of
   this game's recipes have one or two inputs, and a four-column table around a
   single ingredient reads as though something is missing. */
.recipe{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:.35rem;padding:.6rem .8rem;margin:.6rem 0}
.recipe-h{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.recipe .pool{margin-top:.45rem}

/* The second half of a drop rate. A percentage answers "is this rare"; the one-
   in-N under it answers "how long am I here", and most of the interesting drops
   in this game are rare enough that the percentage alone stops meaning much. */
.sub{display:block;font-size:.75rem;color:var(--dim);font-weight:400;
  letter-spacing:.01em;margin-top:.05rem}
.poolchip .sub{display:inline;margin-left:.35rem}

/* Category chips on the item index drive the same filter box the text field
   does, so there is one filter and not two that can disagree. */
button.qf{font:inherit;cursor:pointer;color:var(--gold-lt);border-color:rgba(212,160,23,.4)}
button.qf:hover{background:var(--panel);border-color:var(--gold)}
/* A creature card on a gear page leads to that creature's bestiary entry. The
   link wraps the whole card, so it inherits nothing of a link's own styling. */
.mobcard-link{display:block;color:inherit;text-decoration:none}
.mobcard-link:hover .mob{border-color:var(--gold)}

/* ── DPS calculator ──────────────────────────────────────────────────── */
/* The engine is a whole game booting in an iframe. It is never seen — it exists
   to be asked questions — so it is removed from the layout entirely rather than
   merely hidden, which keeps it from claiming a scroll height. */
#engine{position:absolute;width:1px;height:1px;left:-9999px;top:0;border:0;visibility:hidden}
.calc{display:flex;flex-direction:column;gap:1rem}
.calcbox{background:var(--panel);border:1px solid var(--line);border-radius:.4rem;
  padding:.9rem 1.1rem}
.calcbox h2{margin-top:0}
.fields{display:flex;flex-wrap:wrap;gap:.75rem 1.1rem;align-items:flex-end}
.fields label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.fields label.wide{flex:1 1 22rem}
.fields label.chk{flex-direction:row;align-items:center;gap:.4rem;text-transform:none;
  letter-spacing:0;font-size:.85rem;max-width:26rem}
.fields .hint{display:block;font-size:.75rem;color:var(--dim);text-transform:none;letter-spacing:0}
input,select,textarea{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);
  border-radius:.3rem;padding:.4rem .5rem;font:inherit;font-size:.9rem;min-width:8rem}
textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
select[size]{min-height:9rem}
.btnrow{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
button{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);
  border-radius:.3rem;padding:.4rem .8rem;font:inherit;font-size:.85rem;cursor:pointer}
button:hover{border-color:var(--gold)}
button.primary{background:var(--gold);border-color:var(--gold);color:#1a1206;font-weight:600}
button.primary:hover{filter:brightness(1.1)}
/* The headline. A calculator whose answer is one row in a table of six reads as
   though it is hedging; the number the reader came for gets its own size. */
.bignum{display:flex;align-items:baseline;gap:.6rem;margin:.9rem 0 .4rem}
.bignum b{font-size:2.6rem;color:var(--gold-lt);line-height:1;font-family:var(--display,inherit)}
.bignum span{color:var(--dim);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.erow{display:flex;gap:.5rem;margin:.35rem 0;align-items:center}
.erow .eval{max-width:8rem}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:50;display:flex;
  align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow:auto}
.modal[hidden]{display:none}
.modalbody{background:var(--bg);border:1px solid var(--line2);border-radius:.5rem;
  padding:1.1rem 1.3rem;max-width:44rem;width:100%}
.modalhead{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.modalhead h3{margin:0}