/*
  ItMeCasey Studios wiki.
  Colors come from the main site (iron, ink, aqua, rust, heat). Dark is the
  default; light kicks in from the OS setting or the theme button, which stores
  its choice as data-theme on <html>.
*/

:root{
  --bg:#222A2A; --bg-side:#1d2424; --panel:#283131; --panel-2:#2e3838;
  --ink:#E2DAC2; --mute:#aeb0a2; --line:#ffffff1c; --line-strong:#ffffff33;
  --link:#6CC9CA; --accent:#F39120; --missing:#f0846a; --mark:#F3912040;
  --code:#1a2121; --shadow:0 18px 40px -22px #000c;
  --note:#4FBBBC; --tip:#8cc867; --warn:#F39120;
  --top:62px; --side:268px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#F5F0E4; --bg-side:#EDE6D5; --panel:#FFFCF4; --panel-2:#F2EBDB;
    --ink:#1F2727; --mute:#566060; --line:#222a2a1f; --line-strong:#222a2a3a;
    --link:#1B6C6E; --accent:#B5541B; --missing:#B8401F; --mark:#F3912055;
    --code:#ECE5D3; --shadow:0 18px 40px -24px #4b3d2245;
    --note:#237D7F; --tip:#4C7F2E; --warn:#A8561A;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F5F0E4; --bg-side:#EDE6D5; --panel:#FFFCF4; --panel-2:#F2EBDB;
  --ink:#1F2727; --mute:#566060; --line:#222a2a1f; --line-strong:#222a2a3a;
  --link:#1B6C6E; --accent:#B5541B; --missing:#B8401F; --mark:#F3912055;
  --code:#ECE5D3; --shadow:0 18px 40px -24px #4b3d2245;
  --note:#237D7F; --tip:#4C7F2E; --warn:#A8561A;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0}
html{background:var(--bg);scroll-padding-top:calc(var(--top) + 20px);scrollbar-width:thin;scrollbar-color:var(--line-strong) var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.65 "Geist",system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
::selection{background:var(--accent);color:var(--bg)}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}
img.pixel{image-rendering:pixelated}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
button{font:inherit;color:inherit}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:6px}
.skip:focus{left:12px}

/* header */
.top{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:14px;padding:0 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand:hover{color:var(--ink)}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;color:var(--mute);font-size:.95rem;white-space:nowrap;overflow:hidden}
.crumbs a{color:var(--mute);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--ink)}
.top-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--mute);transition:color .2s,border-color .2s,background .2s}
.icon-btn:hover{color:var(--ink);border-color:var(--line-strong);background:var(--panel)}
.icon-btn svg{width:18px;height:18px}
.menu-btn{display:none}

/* search */
.search{position:relative;width:min(340px,38vw)}
.search input{width:100%;height:38px;padding:0 36px 0 36px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:.95rem}
.search input::placeholder{color:var(--mute)}
.search input:focus{outline:none;border-color:var(--accent)}
.search > svg{position:absolute;left:11px;top:11px;width:16px;height:16px;color:var(--mute);pointer-events:none}
.search kbd{position:absolute;right:9px;top:9px;font:500 .75rem/1 "Geist",system-ui,sans-serif;color:var(--mute);border:1px solid var(--line-strong);border-radius:5px;padding:3px 6px}
.search input:focus ~ kbd{display:none}
.results{position:absolute;top:calc(100% + 6px);right:0;width:min(440px,92vw);max-height:70vh;overflow:auto;list-style:none;padding:6px;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow)}
.results[hidden]{display:none}
.results a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none}
.results a span{display:block;color:var(--mute);font-size:.86rem;line-height:1.45;margin-top:2px}
.results li[aria-selected="true"] a,.results a:hover{background:var(--panel-2)}
.results mark{background:var(--mark);color:inherit;border-radius:2px}
.results .empty{padding:12px;color:var(--mute);font-size:.92rem}

/* layout */
.layout{flex:1;display:grid;grid-template-columns:var(--side) minmax(0,1fr);width:100%;max-width:1400px;margin:0 auto}
.layout.solo{grid-template-columns:minmax(0,1fr)}
.side{position:sticky;top:var(--top);height:calc(100svh - var(--top));overflow-y:auto;padding:24px 18px 40px 20px;border-right:1px solid var(--line);scrollbar-width:thin}
main{min-width:0;padding:36px clamp(20px,4vw,56px) 64px;outline:none}

/* sidebar */
.side-mod{display:flex;align-items:center;gap:12px;padding:0 6px 20px;margin-bottom:12px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.side-mod:hover{color:var(--ink)}
.side-mod img{width:40px;height:40px;border-radius:8px;flex:none}
.side-mod strong{display:block;font-size:1.05rem;letter-spacing:-.01em}
.side-mod span{display:block;color:var(--mute);font-size:.8rem;line-height:1.35}
.side h2{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:18px 6px 6px}
.side ul{list-style:none;padding:0}
.side li a{display:block;padding:5px 10px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:.94rem;line-height:1.4;opacity:.86}
.side li a:hover{background:var(--panel);opacity:1;color:var(--ink)}
.side li a[aria-current="page"]{background:var(--panel-2);opacity:1;font-weight:500;box-shadow:inset 2px 0 0 var(--accent)}
.side-links{margin-top:22px;padding:16px 6px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.side-links a{color:var(--mute);text-decoration:none}
.side-links a:hover{color:var(--ink)}
.scrim{display:none}

/* article */
.page{max-width:980px}
.md > p,.md > ul,.md > ol,.md > blockquote,.summary{max-width:74ch}
.page-head{margin-bottom:28px}
.kicker{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.page-head h1{font-size:clamp(2rem,4.2vw,2.8rem);line-height:1.08;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
.summary{margin-top:12px;font-size:1.12rem;color:var(--mute);max-width:60ch}

.md{overflow-wrap:break-word}
.md::after{content:"";display:block;clear:both}
.md > * + *{margin-top:1em}
.md h2,.md h3,.md h4{position:relative;letter-spacing:-.02em;line-height:1.25;font-weight:600}
.md h2{font-size:1.5rem;margin-top:2.2em;padding-bottom:8px;border-bottom:1px solid var(--line);display:flow-root}
.md h3{font-size:1.18rem;margin-top:1.8em}
.md h4{font-size:1rem;margin-top:1.5em}
.md > :first-child{margin-top:0}
.md .anchor{margin-left:8px;color:var(--mute);text-decoration:none;opacity:0;font-weight:400;transition:opacity .2s}
.md h2:hover .anchor,.md h3:hover .anchor,.md h4:hover .anchor,.md .anchor:focus{opacity:1}
.md ul,.md ol{padding-left:1.4em}
.md li + li,.md li > ul,.md li > ol{margin-top:.3em}
.md li::marker{color:var(--mute)}
.md hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.md code{font:500 .88em/1.5 ui-monospace,"Cascadia Code",Consolas,monospace;background:var(--code);padding:.12em .4em;border-radius:5px}
.md pre{background:var(--code);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto}
.md pre code{background:none;padding:0;font-size:.86rem}
.md blockquote{border-left:3px solid var(--line-strong);padding:2px 0 2px 16px;color:var(--mute)}
.md img{border-radius:6px}
.md img.pixel{width:64px;height:auto}
.md td img{width:40px;max-width:none;vertical-align:middle;margin-right:4px}
.md td img.pixel{width:32px}
a.wl.missing{color:var(--missing);text-decoration-style:dashed}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;clear:both}
.md td:has(> img){white-space:nowrap}
.md table{border-collapse:collapse;width:100%;font-size:.94rem}
.md th,.md td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.md th{background:var(--panel);font-weight:600;white-space:nowrap}
.md tr:last-child td{border-bottom:0}
.md tbody tr:hover td{background:var(--panel)}
.md td.st-yes{color:var(--tip);font-weight:500;white-space:nowrap}
.md td.st-no{color:var(--missing);white-space:nowrap}
.md td.st-plan{color:var(--warn);white-space:nowrap}
.md td.st-na{color:var(--mute);opacity:.7;white-space:nowrap}
.md tbody td:first-child{font-weight:500}

/* callouts */
.callout{border:1px solid var(--line);border-left:3px solid var(--c,var(--note));background:var(--panel);border-radius:8px;padding:12px 16px}
.callout > * + *{margin-top:.6em}
.callout-title{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c,var(--note))}
.callout.tip{--c:var(--tip)}
.callout.warning,.callout.caution,.callout.important{--c:var(--warn)}

/* table of contents */
.toc{float:left;clear:left;margin:0 0 20px;padding:14px 18px;min-width:220px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:.92rem}
.toc p{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.toc ol{list-style:none;padding:0}
.toc li.sub{padding-left:14px}
.toc a{display:block;padding:2px 0;color:var(--ink);text-decoration:none;opacity:.85}
.toc a:hover{color:var(--accent);opacity:1}
.toc + .md{clear:left}

/* infobox */
.infobox{float:right;width:290px;margin:0 0 22px 28px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.92rem}
.ib-title{padding:12px 16px;font-weight:600;text-align:center;background:var(--panel-2);border-bottom:1px solid var(--line)}
.ib-img{display:grid;place-items:center;padding:22px;border-bottom:1px solid var(--line);background:repeating-conic-gradient(var(--panel) 0 25%,var(--panel-2) 0 50%) 0 0/16px 16px}
.ib-img img{max-height:200px;object-fit:contain}
.ib-img img.pixel{width:128px;height:128px}
.infobox table{width:100%;border-collapse:collapse}
.infobox th,.infobox td{padding:8px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.infobox tr:last-child th,.infobox tr:last-child td{border-bottom:0}
.infobox th{width:42%;color:var(--mute);font-weight:500}

/* crafting grid */
.craft{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.craft-grid{display:grid;grid-template-columns:repeat(var(--cols),48px);gap:4px}
.slot{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:6px;background:var(--code);border:1px solid var(--line-strong);box-shadow:inset 0 2px 0 #0000001f}
/* .md in front so these beat ".md img.pixel", which would otherwise widen small textures */
.md .slot img,.md .slot img.pixel{width:32px;height:32px;object-fit:contain}
.md .craft-out .slot img,.md .craft-out .slot img.pixel{width:40px;height:40px}
.slot-key{font:600 .95rem/1 ui-monospace,Consolas,monospace;color:var(--accent)}
.craft-arrow{color:var(--mute);font-size:1.6rem;line-height:1}
.craft-out{display:flex;align-items:center;gap:12px}
.craft-out .slot{width:60px;height:60px;border-color:var(--accent)}
.craft-out .count{position:absolute;right:4px;bottom:2px;font-weight:600;font-size:.85rem}
.craft-out strong{font-weight:600}
.craft-legend{flex-basis:100%;list-style:none;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.9rem}
.craft-legend li{display:flex;align-items:center;gap:8px}
.craft-legend .slot{width:28px;height:28px;border-radius:5px}
.md .craft-legend .slot img,.md .craft-legend .slot img.pixel{width:20px;height:20px}
.craft-legend .slot-key{font-size:.8rem}

/* prev / next */
.pager{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.pager a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);transition:border-color .2s,background .2s}
.pager a:hover{border-color:var(--accent);background:var(--panel);color:var(--ink)}
.pager small{display:block;color:var(--mute);font-size:.8rem}
.pager .next{grid-column:2;text-align:right}

/* library (wiki home) */
.library{max-width:1000px;margin:0 auto;width:100%}
.library h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.library .summary{margin-bottom:40px}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.mod-card{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);text-decoration:none;transition:border-color .25s,transform .35s var(--ease)}
.mod-card:hover{border-color:var(--accent);transform:translateY(-2px);color:var(--ink)}
.mod-card img{width:64px;height:64px;border-radius:10px;flex:none}
.mod-card h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.mod-card p{color:var(--mute);font-size:.93rem;margin-top:4px}
.mod-card .meta{font-size:.8rem;margin-top:10px}

.notice{color:var(--mute);padding:40px 0}
.notice h1{color:var(--ink);font-size:1.8rem;letter-spacing:-.02em;margin-bottom:10px}
.loading{color:var(--mute);padding:40px 0}

/* footer */
.foot{border-top:1px solid var(--line);padding:22px 20px 28px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px 32px;color:var(--mute);font-size:.84rem;line-height:1.55}
.foot-legal{max-width:78ch}
.foot-legal p + p{margin-top:4px}
.foot-links{display:flex;gap:18px;white-space:nowrap}
.foot a{color:var(--mute)}
.foot a:hover{color:var(--ink)}

/* small screens: sidebar becomes a drawer */
@media (max-width: 960px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .menu-btn{display:grid}
  .side{position:fixed;z-index:30;top:0;left:0;bottom:0;height:auto;width:min(300px,86vw);background:var(--bg-side);transform:translateX(-102%);transition:transform .3s var(--ease);box-shadow:var(--shadow)}
  .side.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;z-index:25;background:#0007}
  .scrim[hidden]{display:none}
  .brand span{display:none}
}
@media (max-width: 680px){
  .top{padding:0 12px;gap:10px}
  .crumbs .hide-sm{display:none}
  .search{width:auto;flex:1;min-width:0}
  .search kbd{display:none}
  .top-tools{flex:1;justify-content:flex-end;min-width:0}
  main{padding:26px 16px 48px}
  .infobox,.toc{float:none;width:auto;margin:0 0 22px}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  .top,.side,.pager,.foot,.toc{display:none}
  .layout{display:block}
}