@font-face { font-family: "Macondo"; src: url("../assets/fonts/MacondoSwashCaps.ttf"); font-display: swap; }
:root { --night:#0b0d12; --lacquer:#1a1016; --lacquer-2:#24171e; --lacquer-3:#2f1f28; --bronze:#8a7258; --bronze-hi:#c8a878;
  --gold:#ffe6a8; --gold-2:#e8c070; --parchment:#f4ecd8; --faded:#b9a684; --faded-2:#8d7c62; --ink:#1a1016;
  --display:"Macondo","Palatino Linotype",Georgia,serif; --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; background: radial-gradient(ellipse 90% 60% at 50% 0, #2a1822 0, var(--lacquer) 55%, var(--night) 100%) fixed; color: var(--parchment);
  font: 16px/1.6 var(--body); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--gold-2); text-decoration: none; } a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); color: var(--gold); font-weight: 400; line-height: 1.2; margin: 1.4em 0 .5em; }
h1 { font-size: 2.1rem; margin-top: .3em; } h2 { font-size: 1.4rem; border-bottom: 1px solid var(--bronze); padding-bottom: .2em; } h3 { font-size: 1.1rem; color: var(--gold-2); }
p, ul, ol, dl, table { margin: .6em 0; } ul, ol { padding-left: 1.3em; }
.top { background: #120a0f; border-bottom: 3px solid var(--bronze); box-shadow: 0 3px 0 var(--ink); }
.top-in, main, .foot-in { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-top: 10px; padding-bottom: 10px; }
.brand { font-family: var(--display); font-size: 1.35rem; color: var(--gold); } .brand small { color: var(--faded); font-size: .8rem; margin-left: 4px; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .95rem; flex: 1; } .top nav a { color: var(--parchment); } .top nav a:hover { color: var(--gold); }
.play { background: var(--gold-2); color: var(--ink) !important; padding: 2px 12px; border: 2px solid var(--bronze); border-radius: 2px; font-weight: 600; }
.js-only { display: none; } html.js .js-only { display: block; }
.search { position: relative; } .search input { width: 100%; min-width: 180px; background: var(--lacquer-3); color: var(--parchment); border: 2px solid var(--bronze); padding: 5px 10px; font: inherit; border-radius: 2px; }
.results { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; background: var(--lacquer-2); border: 2px solid var(--bronze); max-height: 60vh; overflow: auto; }
.results a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; color: var(--parchment); } .results a:hover, .results a.on { background: var(--lacquer-3); }
.results small { color: var(--faded-2); }
main { flex: 1; width: 100%; padding-bottom: 40px; }
.crumbs { font-size: .85rem; color: var(--faded); margin-top: 14px; } .crumbs a { color: var(--faded); } .crumbs span { margin: 0 5px; }
.panel { background: rgba(36,23,30,.92); border: 3px solid var(--bronze); box-shadow: 0 0 0 3px var(--ink); padding: 14px 18px; margin: 16px 3px; }
.panel > :first-child { margin-top: 0; } .panel > :last-child { margin-bottom: 0; }
.head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .head h1 { margin: 0; } .head .meta { color: var(--faded); }
.hero { text-align: center; padding: 34px 8px 10px; } .hero h1 { font-size: 2.8rem; } .hero p { max-width: 640px; margin: .6em auto; color: var(--faded); font-size: 1.1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 14px 3px; }
.card { background: var(--lacquer-2); border: 2px solid var(--bronze); padding: 10px 14px; color: var(--parchment); display: block; }
.card:hover { background: var(--lacquer-3); text-decoration: none; border-color: var(--bronze-hi); } .card b { font-family: var(--display); color: var(--gold); font-weight: 400; font-size: 1.1rem; display: block; }
.card span { color: var(--faded); font-size: .9rem; }
.ic { display: inline-block; vertical-align: middle; image-rendering: pixelated; image-rendering: crisp-edges; background-repeat: no-repeat; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .chip { background: var(--lacquer-3); border: 1px solid var(--bronze); padding: 1px 9px; font-size: .85rem; color: var(--faded); border-radius: 2px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 18px; } dl.facts dt { color: var(--faded); } dl.facts dd { margin: 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; } th, td { text-align: left; padding: 4px 10px; border-bottom: 1px solid #3b2a33; vertical-align: middle; }
th { color: var(--gold-2); font-weight: 600; background: var(--lacquer-3); } .scroll { overflow-x: auto; }
.list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; } .list li { display: flex; align-items: center; gap: 8px; padding: 2px 0; min-width: 0; }
.list li small { color: var(--faded-2); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qty { color: var(--faded); }
.lede { color: var(--faded); font-style: italic; } .note { color: var(--faded-2); font-size: .9rem; }
.guide p, .guide li { max-width: 72ch; } .guide table { max-width: 780px; }
.azbar { display: flex; flex-wrap: wrap; gap: 4px 12px; }
footer { border-top: 3px solid var(--bronze); background: #120a0f; color: var(--faded-2); font-size: .9rem; padding: 14px 0; }
.foot-in { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; }
@media (max-width: 640px) { h1 { font-size: 1.7rem; } .hero h1 { font-size: 2.1rem; } dl.facts { grid-template-columns: 1fr; } dl.facts dt { margin-top: 6px; }
    .top-in { gap: 6px 14px; } .top nav { order: 4; flex: 1 1 100%; gap: 2px 14px; } .play { margin-left: auto; } .panel { padding: 12px; } .search { width: 100%; order: 5; } }

.i-items4{background-image:url(../assets/atlas_items_0.webp);background-size:8192px 12456px}
.i-items1{background-image:url(../assets/atlas_items_0.webp);background-size:2048px 3114px}
.i-b23{background-image:url(../assets/atlas_build_2.webp);background-size:6144px 3072px}
.i-b21{background-image:url(../assets/atlas_build_2.webp);background-size:2048px 1024px}
.i-spells4{background-image:url(../assets/spell_icons.webp);background-size:1408px 512px}
.i-spells1{background-image:url(../assets/spell_icons.webp);background-size:352px 128px}
.i-techs4{background-image:url(../assets/technique_icons.webp);background-size:1536px 512px}
.i-techs1{background-image:url(../assets/technique_icons.webp);background-size:384px 128px}
.i-sprites2{background-image:url(../assets/atlas_sprites_0.webp);background-size:4096px 6720px}
.i-sprites3{background-image:url(../assets/atlas_sprites_0.webp);background-size:6144px 10080px}
.i-sprites1{background-image:url(../assets/atlas_sprites_0.webp);background-size:2048px 3360px}