/* Sanctuary Codex: the wiki's look, built on the game's own UI textures (ui/*.png, cropped from the client atlases
   by tools/wiki/build_wiki.py) and fonts (fonts/), in the EliteLevel site's palette: the colours, fonts, frames,
   scrollbars and focus rings come from the shared el/el.css (site/shared/, loaded first), the game's windows, tooltips
   and buttons stay the game's own. */
@font-face { font-family: 'Exocet'; src: url('fonts/exocet-light.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'D3Script'; src: url('fonts/d3-script.ttf') format('truetype'); font-display: swap; }

:root {
  --bg: var(--el-bg);
  --bg2: #120605;
  --panel: #170907;
  --panel2: #1f0c08;
  --line: #3a2016;
  --line2: #5a3622;
  --text: #e2d2b8;
  --dim: var(--el-ink-dim);
  --gold: var(--el-gold);
  --gold2: var(--el-gold-hi);
  --blood: var(--el-blood);
  --legendary: #ff8000;
  --set: #00ff00;
  --rare: #ffff00;
  --magic: #6969ff;
  --normal: #ffffff;
  --affix: #7878ff;
  --ancient: #c9a14a;
  --primal: #d23c2e;
  --radius: 3px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--text); background: var(--bg);
  background-image: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(255, 60, 10, .14), transparent 70%), linear-gradient(var(--el-bg), var(--el-bg));
  font: 15px/1.55 var(--el-body);
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold2); text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--el-title); color: var(--gold); font-weight: normal; letter-spacing: .04em; margin: 0 0 .5em; }
h1 { font-size: 30px; color: var(--gold2); text-shadow: 0 0 18px rgba(255, 110, 40, .35); }
/* big titles in the site's metallic red (the launcher title's colours) */
.hero h1, .metal {
  background: linear-gradient(180deg, #fff1de 0%, #f6c9ad 20%, #d2482a 46%, #6a0904 54%, #b93318 74%, #ffb38a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.6px rgba(40, 4, 0, 0.7); text-shadow: none;
  filter: drop-shadow(0 2px 1px #000) drop-shadow(0 0 14px rgba(255, 50, 10, 0.45));
}
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: .4em 0 .8em; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
code { font: 12px Consolas, monospace; color: #b9a988; }

/* ---------------------------------------------------------------- header: the EliteLevel header (el/el.css, from site/shared/)
   in two rows (40 + 32 px): the logo and the site's menu with Sanctuary Codex lit, and under it the Codex's own row:
   its menus (Database, History, Tools), the current page's title and the search. Here: that second row. */
:root { --hdr-h: 72px; --el-top: 72px; --app-pad: 16px; --ui-scale: 1; }
.elh-sub { display: flex; align-items: stretch; height: 32px; gap: 0; margin-left: -12px; }
.navgrp { position: relative; display: flex; align-items: stretch; }
.navbtn { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 13px var(--el-title); letter-spacing: .08em; color: #cdb89a; text-transform: uppercase; transition: color .15s, text-shadow .15s; }
.navbtn:hover, .navgrp.open > .navbtn { color: var(--el-gold-hi); text-shadow: 0 0 10px rgba(255, 90, 20, .85), 0 0 2px #000; }
.navbtn:focus-visible { outline: 2px solid var(--el-gold-hi); outline-offset: -3px; }
.navgrp.on > .navbtn { color: var(--el-gold-hi); border-bottom-color: #ff7a2a; text-shadow: 0 0 12px rgba(255, 90, 20, .8), 0 1px 2px #000; }
.caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .15s; }
.navgrp.open .caret { transform: translateY(1px) rotate(225deg); }
.navmenu { display: none; position: absolute; left: 0; top: calc(100% + 3px); min-width: 290px; padding: 10px; z-index: 70;
  background: radial-gradient(ellipse 90% 60% at 50% 110%, rgba(255, 60, 10, .14), transparent 70%), linear-gradient(#1c0b08, #0b0403);
  border: 1px solid #000; box-shadow: var(--el-frame), 0 14px 34px rgba(0, 0, 0, .85); }
.navmenu::before { content: ''; position: absolute; left: -5px; top: -5px; width: 30px; height: 30px; background: url('ui/FrameCornerUpperLeft.png') 0 0 / contain no-repeat; pointer-events: none; }
.navmenu::after { content: ''; position: absolute; right: -5px; top: -5px; width: 30px; height: 30px; background: url('ui/FrameCornerUpperRight.png') 0 0 / contain no-repeat; pointer-events: none; }
.navmenu.open { display: block; }
.navmenu.wide.open { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: 0 10px; min-width: 560px; }
.navmenu a { display: flex; flex-direction: column; gap: 1px; padding: 6px 12px 6px 14px; border-left: 2px solid transparent; color: var(--text); border-radius: 2px; }
.navmenu a:hover, .navmenu a:focus-visible { background: linear-gradient(90deg, rgba(255, 70, 10, .16), transparent); text-decoration: none; outline: 0; border-left-color: var(--gold); }
.navmenu a.on { border-left-color: var(--el-ember); background: linear-gradient(90deg, rgba(255, 70, 10, .22), transparent 70%); }
.mi-t { font: 14px var(--el-title); letter-spacing: .05em; color: #eccf9c; }
.navmenu a.on .mi-t { color: var(--el-gold-hi); }
.mi-h { font-size: 12.5px; color: var(--dim); line-height: 1.3; }
.mhead { font: 12px var(--el-title); letter-spacing: .12em; color: #b0875a; text-transform: uppercase; padding: 4px 14px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
/* the current page's title and its description */
.crumb { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255, 120, 50, .28); height: 20px; }
.crumb[hidden] { display: flex; visibility: hidden; }
.crumb-t { font: 15px var(--el-title); letter-spacing: .07em; color: var(--el-gold-hi); text-shadow: 0 0 14px rgba(255, 110, 40, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.crumb-i { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1px solid #8a5a30; background: radial-gradient(#3a1a10, #120605); color: var(--gold); font: italic bold 12px Georgia, serif; line-height: 17px; padding: 0; cursor: pointer; }
.crumb-i:hover, .crumb-i[aria-expanded=true] { color: #fff1cc; border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 110, 30, .45); }
.crumb-i[hidden] { display: none; }
.pinfo { display: none; position: absolute; left: 10px; top: calc(100% + 12px); width: min(620px, 80vw); padding: 12px 16px; z-index: 70; font-size: 14px; line-height: 1.5; color: var(--text);
  background: linear-gradient(#1c0b08, #0b0403); border: 1px solid #000; box-shadow: var(--el-frame), 0 14px 34px rgba(0, 0, 0, .85); }
.pinfo.open { display: block; }
.pinfo b { display: block; font: normal 14px var(--el-title); letter-spacing: .06em; color: var(--gold); margin-bottom: 4px; }
/* search: compact, wider while in use; "/" focuses it */
.search { position: relative; width: 240px; transition: width .18s ease; }
.search:focus-within { width: 440px; }
.search input { width: 100%; height: 26px; padding: 3px 32px 3px 11px; background: rgba(0, 0, 0, .6); color: var(--text); border: 1px solid #5a3622; border-radius: var(--radius); font: 13.5px var(--el-body); outline: none; }
.search input:focus { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(240, 194, 122, .3), 0 0 10px rgba(255, 90, 20, .25); background: rgba(0, 0, 0, .8); }
.skey { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-width: 17px; height: 18px; padding: 0 5px; border: 1px solid #5a3622; border-radius: 3px; font: 12px/16px Consolas, monospace; color: var(--dim); text-align: center; pointer-events: none; background: #120605; }
.search:focus-within .skey { display: none; }
.sres { display: none; position: absolute; right: 0; left: auto; width: max(100%, 440px); top: 100%; margin-top: 7px; background: #120605; border: 1px solid #000; box-shadow: var(--el-frame), 0 10px 30px #000; max-height: 70vh; overflow: auto; z-index: 60; }
.sres a { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-bottom: 1px solid #25120c; color: var(--text); }
.sres a:hover, .sres a.sel { background: #2a130c; text-decoration: none; }
.sres .sn { flex: 1; }
.sres .sk { color: var(--dim); font-size: 12px; }
.sres .sall { justify-content: center; color: var(--gold); font-size: 13px; }
.sic { width: 28px; height: 28px; object-fit: contain; flex: none; display: inline-block; }
@media (max-width: 1500px) { .search:focus-within { width: 360px; } }
@media (max-width: 1250px) { .navbtn { padding: 0 9px; font-size: 12.5px; } .crumb-t { font-size: 14px; } .search { width: 200px; } }
/* phones and tablets: the gear plate opens the site's menu; the Codex's menus follow as lists; the search is row 2 */
@media (max-width: 980px) {
  :root { --hdr-h: 102px; --el-top: 102px; }
  .elh-sub { display: block; height: auto; margin: 0 0 6px 24px; padding: 2px 0 4px; border-left: 1px solid rgba(255, 120, 50, .3); }
  .navgrp { flex-direction: column; }
  .navbtn { height: 34px; padding: 0 14px; pointer-events: none; color: #b0875a; font-size: 12.5px; border: 0; text-shadow: none; }
  .navgrp.on > .navbtn { color: #b0875a; text-shadow: none; }
  .navbtn .caret { display: none; }
  .navmenu, .navmenu.open, .navmenu.wide.open { display: block; position: static; min-width: 0; box-shadow: none; border: 0; background: none; padding: 0 10px 6px 14px; }
  .navmenu::before, .navmenu::after { display: none; }
  .navmenu a { padding: 8px 12px; }
  .mhead { display: none; }
  .search, .search:focus-within { width: auto; align-self: center; }
  .search input { height: 32px; font-size: 15px; }
  .skey { display: none; }
  .sres { width: 100%; }
}

main { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 18px 16px 40px; }
.loading { padding: 60px; text-align: center; color: var(--dim); font-family: Exocet, Georgia, serif; }

/* ---------------------------------------------------------------- app layout of the tool pages (body.app, set by Wiki.shell for
   feature pages): from 1200 x 600 the page is exactly the window: the header bar, then <main> filling the rest; the page
   never scrolls, the tool's panels are laid out in columns and only long lists scroll inside themselves.
   --app-h is the height <main> gives its content (window - header - padding), --ui-scale the game windows' scale. */
@media (min-width: 1200px) and (min-height: 600px) {
  html:has(body.app) { height: 100%; overflow: hidden; }
  body.app { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  body.app > header.top { flex: none; }
  body.app > main { flex: 1 1 0; min-height: 0; max-width: none; padding: calc(var(--app-pad) / 2) 12px; display: flex; flex-direction: column; overflow: hidden; }
  body.app > main > * { flex: none; }
  body.app > footer.foot { display: none; }
}
/* the heading row of a tool page lives in the header bar (Wiki.pageInfo) */
@media (min-width: 981px) { body.app .sim-head { display: none; } }
/* a column that scrolls a long list: <div class="scroll-list"> (thin gold scrollbar) */
.scroll-list, .sim-scroll { scrollbar-width: thin; scrollbar-color: var(--el-scroll-thumb) transparent; }

/* ---------------------------------------------------------------- panels (framed like the game's windows) */
.panel { position: relative; background: var(--el-panel-bg); border: 1px solid #2c1a12; padding: 18px 20px; margin-bottom: 18px; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #150a07, inset 0 0 0 4px rgba(180, 100, 45, .3), inset 0 0 40px rgba(0, 0, 0, .6), 0 4px 18px rgba(0, 0, 0, .6); }
.panel::before, .panel::after { content: ''; position: absolute; width: 38px; height: 38px; pointer-events: none; background-size: contain; background-repeat: no-repeat; }
.panel::before { top: -6px; left: -6px; background-image: url('ui/FrameCornerUpperLeft.png'); }
.panel::after { top: -6px; right: -6px; background-image: url('ui/FrameCornerUpperRight.png'); }
.panel > h2:first-child { border-bottom: 1px solid var(--line); padding-bottom: 6px; background: url('ui/SkillsPane_Title_Underline.png') center bottom / 70% 6px no-repeat; }
.parch { background: #1b140e url('ui/SeasonJourney_BlackParchment.png') center / cover; }
.divider { height: 14px; background: url('ui/Tooltip_DividerLine.png') center / contain no-repeat; margin: 12px 0; border: 0; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.cols { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 4px 18px; font-family: Exocet, Georgia, serif; letter-spacing: .05em; color: #f0d9a8; cursor: pointer;
  background: url('ui/TextBtnNormalLeftCap.png') left / auto 100% no-repeat, url('ui/TextBtnNormalRightCap.png') right / auto 100% no-repeat, url('ui/TextBtnNormalCenter.png') center / auto 100% repeat-x;
  border: 0; background-origin: border-box; font-size: 14px; text-shadow: 0 1px 2px #000; }
.btn:hover { color: #fff; text-decoration: none; background: url('ui/TextBtnMouseoverLeftCap.png') left / auto 100% no-repeat, url('ui/TextBtnMouseoverRightCap.png') right / auto 100% no-repeat, url('ui/TextBtnMouseoverCenter.png') center / auto 100% repeat-x; }
.btn[disabled] { opacity: .45; cursor: default; }
.chip { font: 13px var(--el-body); color: var(--text); background: #1c0a07; border: 1px solid var(--line2); padding: 3px 10px; border-radius: 14px; cursor: pointer; margin: 2px; }
.chip:hover { border-color: var(--gold); }
.chip.on { background: #4a1a0c; color: var(--el-gold-hi); border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 90, 20, .3); }
.filters { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 12px; }
.filters label { font-size: 13px; color: var(--dim); }
select, input[type=text], input[type=number], input[type=search].plain { background: #0c0403; color: var(--text); border: 1px solid var(--line2); padding: 5px 8px; font: 14px var(--el-body); border-radius: var(--radius); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-family: var(--el-title); font-weight: normal; color: var(--gold); border-bottom: 1px solid var(--line2); padding: 6px 8px; background: #1c0b08; position: sticky; top: 0; }
table.t td { border-bottom: 1px solid #231910; padding: 6px 8px; vertical-align: top; }
table.t tr:hover td { background: rgba(80, 50, 25, .15); }
.tablewrap { overflow-x: auto; }
.tag { display: inline-block; font-size: 12px; padding: 0 7px; border: 1px solid var(--line2); border-radius: 10px; color: var(--dim); margin: 1px 2px; white-space: nowrap; }
.tag.gold { color: var(--gold); border-color: #6b4e28; }
.tag.red { color: #ff8a70; border-color: #6a2a1c; }
.tag.green { color: #9be870; border-color: #2f5a1c; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 14px; }
.kv > :nth-child(odd) { color: var(--dim); }
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0; }
.count { color: var(--dim); font-size: 13px; }

/* reference pages scroll their long content; their filter rows stay put under the header bar */
body.wiki:not(.app) .panel > .filters:not(.filters ~ .filters) {
  position: sticky; top: var(--hdr-h); z-index: 20; margin: 0 -20px 12px; padding: 8px 20px 10px;
  background: linear-gradient(#1b130c, #140d08); border-bottom: 1px solid var(--line2); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .9); }
@media (max-width: 720px) { body.wiki:not(.app) .panel > .filters:not(.filters ~ .filters) { position: static; margin: 0 0 12px; padding: 0; background: none; box-shadow: none; border: 0; } }

/* ---------------------------------------------------------------- quality colours */
.q-legendary { color: var(--legendary); }
.q-set { color: var(--set); }
.q-rare { color: var(--rare); }
.q-magic { color: var(--magic); }
.q-normal { color: var(--normal); }

/* ---------------------------------------------------------------- icons */
.ico { display: inline-block; background-repeat: no-repeat; vertical-align: middle; flex: none; }
.iicon { display: inline-flex; align-items: center; justify-content: center; background-size: 100% 100%; background-color: #0d0906; border: 1px solid #3a2a1a; flex: none; vertical-align: middle; border-radius: 2px; }
.iicon img { max-width: 96%; max-height: 96%; }
.ilink { display: inline-flex; align-items: center; gap: 6px; }
.ilink img { width: 26px; height: 26px; object-fit: contain; }

/* ---------------------------------------------------------------- item tooltip (in-game layout) */
.tt { width: 360px; max-width: 100%; font: 14px/1.45 Georgia, 'Palatino Linotype', serif; color: #d7c8a9; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .8)); }
.tt-head { position: relative; min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 30px 20px 10px; background-size: 100% 100%; background-repeat: no-repeat; background-color: #1a1008; text-align: center; }
.tt-head::after { content: ''; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 473 / 36; background: url('ui/Tooltip_Frame_Title_Top.png') center top / 100% 100% no-repeat; pointer-events: none; }
.tt.ancient .tt-head::after { background-image: url('ui/Tooltip_Frame_Title_Top_Ancient.png'); }
.tt.primal .tt-head::after { background-image: url('ui/Tooltip_Frame_Title_Top_Primal.png'); }
.tt-name { position: relative; z-index: 1; font-family: Exocet, Georgia, serif; font-size: 18px; letter-spacing: .04em; text-shadow: 0 1px 3px #000, 0 0 10px #000; line-height: 1.2; }
.tt.q-legendary .tt-name { color: #ff9c38; }
.tt.q-set .tt-name { color: #3aff3a; }
.tt.q-rare .tt-name { color: #ffff40; }
.tt.q-magic .tt-name { color: #8a8aff; }
.tt.q-normal .tt-name { color: #fff; }
.tt-body { background: #0b0806 url('ui/Tooltip_Frame_Tile_Middle.png') center top / 100% auto repeat-y; padding: 10px 18px 12px; border-left: 1px solid #2b2016; border-right: 1px solid #2b2016; }
.tt.ancient .tt-body { background-image: url('ui/Tooltip_Frame_Tile_Middle_Ancient.png'); }
.tt.primal .tt-body { background-image: url('ui/Tooltip_Frame_Tile_Middle_Primal.png'); }
.tt-bottom { height: 12px; background: url('ui/Tooltip_Frame_Bottom.png') center / 100% 100% no-repeat; }
.tt.ancient .tt-bottom { background-image: url('ui/Tooltip_Frame_Bottom_Ancient.png'); height: 16px; }
.tt.primal .tt-bottom { background-image: url('ui/Tooltip_Frame_Bottom_Primal.png'); height: 16px; }
.tt.primal { filter: drop-shadow(0 0 6px rgba(210, 40, 30, .6)) drop-shadow(0 6px 18px #000); }
.tt-top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.tt-top .iicon { width: 64px; }
.tt-type { flex: 1; }
.tt-q { font-size: 14px; }
.tt.ancient .tt-q, .tt.primal .tt-q { color: var(--ancient) !important; }
.tt-slot { color: #9a8a70; font-size: 13px; text-align: right; margin-top: -2px; }
.tt-big { font-family: Exocet, Georgia, serif; font-size: 30px; color: #fff; line-height: 1.1; margin-top: 6px; }
.tt-bigl { color: #9a8a70; font-size: 12.5px; }
.tt-sub { color: #b0a080; font-size: 12.5px; margin-top: 2px; }
.tt-sec { color: #8d7f69; font-size: 13px; margin: 8px 0 2px; }
.tt-list { list-style: none; margin: 0; padding: 0; }
.tt-list li { position: relative; padding-left: 16px; margin: 3px 0; }
.tt-list li::before { content: ''; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; background: url('ui/bullet.png') center / contain no-repeat; }
.tt-aff { color: var(--affix); }
.tt-rnd { color: var(--affix); font-style: italic; opacity: .85; }
.tt-power { color: #ff8000; }
.tt-power::before { background-image: url('ui/legendarystar.png') !important; width: 11px !important; height: 11px !important; top: .3em !important; }
.tt-socket { color: #aaa; display: flex; align-items: center; gap: 6px; padding-left: 0 !important; }
.tt-socket::before { display: none; }
.tt-socket img { width: 22px; height: 22px; }
.tt-set { margin-top: 10px; color: #6b6b6b; font-size: 13.5px; }
.tt-setname { color: #3aff3a; margin-bottom: 2px; }
.tt-setitems { list-style: none; margin: 0 0 6px; padding: 0 0 0 10px; color: #7a7a7a; }
.tt-setb { color: #8a8a8a; margin: 3px 0; }
/* The tooltip frame at its actual size: the frame pieces are 473 px wide (Tooltip_Frame_*), the quality glow behind the
   name 400 x 80; one texture pixel = one CSS pixel, nothing stretched. The glow is drawn under the title frame, whose
   black inside is blended away (lighten) so the frame's gold lines sit on the glow as in the game. */
.tt { width: 473px; }
.tt-head { min-height: 80px; padding: 16px 40px; background-size: 400px 100%; background-position: center; background-color: #000; }
.tt-head::after { aspect-ratio: auto; bottom: 0; background: url('ui/Tooltip_Frame_Title_Top.png') center top / 473px 36px no-repeat; mix-blend-mode: lighten; }
.tt-head::before { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: lighten;
  background: url('ui/Tooltip_Frame_Title_Bottom.png') center bottom / 473px 24px no-repeat, url('ui/Tooltip_Frame_Tile_Middle.png') center top / 473px 60px repeat-y; }
.tt.ancient .tt-head::before { background-image: url('ui/Tooltip_Frame_Title_Bottom.png'), url('ui/Tooltip_Frame_Tile_Middle_Ancient.png'); }
.tt.primal .tt-head::before { background: url('ui/Tooltip_Frame_Title_Bottom.png') center bottom / 473px 24px no-repeat, url('ui/Tooltip_Frame_Tile_Middle_Primal.png') center top / 473px 480px repeat-y; }
.tt-body { background-size: 473px 60px; border: 0; padding: 10px 26px 12px; }
.tt.primal .tt-body { background-size: 473px 480px; }
.tt-bottom, .tt.ancient .tt-bottom, .tt.primal .tt-bottom { height: 9px; background-size: 473px 9px; }
/* a tooltip squeezed below the frame's width (phones, narrow columns): the frame pieces follow the width, as a last resort */
.tt { container-type: inline-size; }
@container (max-width: 472px) {
  .tt-head::after { background-size: 100% 36px; }
  .tt-head::before, .tt.primal .tt-head::before { background-size: 100% 24px, 100% 60px; }
  .tt-body, .tt.primal .tt-body { background-size: 100% 60px; }
  .tt-bottom, .tt.ancient .tt-bottom, .tt.primal .tt-bottom { background-size: 100% 9px; }
}
.tt-setb span { color: #aaa; }
.tt-kanai { margin-top: 8px; color: #c7a24a; font-size: 12.5px; }
.tt-flavor { margin-top: 10px; color: #c7a86b; font-style: italic; font-size: 13.5px; }
.tt-foot { margin-top: 10px; color: #8a7b62; font-size: 12.5px; text-align: right; }
.tipfloat { position: fixed; z-index: 100; display: none; pointer-events: none; }

/* ---------------------------------------------------------------- lists */
.ilist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
.irow { display: flex; gap: 10px; align-items: center; padding: 6px 8px; background: #130806; border: 1px solid #2e1810; color: var(--text); min-width: 0; }
.irow:hover { border-color: #7a5238; background: #1f0c08; box-shadow: 0 0 12px rgba(255, 70, 15, .15); text-decoration: none; }
.irow .iicon { width: 40px; height: 40px; }
.irow .nm { font-size: 14.5px; line-height: 1.25; }
.irow .sub { color: var(--dim); font-size: 12px; }
.irow > div { min-width: 0; }
.card { display: block; background: var(--el-panel-bg); border: 1px solid #000; box-shadow: var(--el-frame), 0 8px 20px rgba(0, 0, 0, .5); padding: 14px; color: var(--text); position: relative; overflow: hidden; transition: box-shadow .2s; }
.card:hover { text-decoration: none; color: var(--text); box-shadow: var(--el-frame-hi), 0 0 24px rgba(255, 70, 15, .3), 0 8px 20px rgba(0, 0, 0, .5); }
.card h3 { margin-bottom: 4px; }
.card .bgart { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; }
.card > *:not(.bgart) { position: relative; }

/* ---------------------------------------------------------------- home */
.hero { position: relative; overflow: hidden; border: 1px solid #000; padding: 34px 28px; margin-bottom: 18px; background: #110b07 url('el/img/painting-arreat.webp') center 30% / cover; box-shadow: var(--el-frame), inset 0 0 120px #000; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 5, 3, .92), rgba(8, 5, 3, .55) 60%, rgba(8, 5, 3, .2)); }
.hero > * { position: relative; }
.hero p { max-width: 720px; font-size: 16px; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.stat { background: rgba(0, 0, 0, .55); border: 1px solid var(--line2); padding: 8px 14px; min-width: 110px; }
.stat b { display: block; font-family: Exocet, Georgia, serif; font-size: 22px; color: var(--gold2); font-weight: normal; }
.stat span { font-size: 12px; color: var(--dim); }

/* ---------------------------------------------------------------- item page */
.itempage { display: grid; grid-template-columns: 473px minmax(0, 1fr); gap: 22px; align-items: start; }
.gradebar { display: flex; gap: 6px; margin: 8px 0 12px; }
.hist { border-left: 2px solid var(--line2); margin-left: 6px; padding-left: 14px; }
.hist .he { position: relative; margin-bottom: 12px; }
.hist .he::before { content: ''; position: absolute; left: -21px; top: 5px; width: 12px; height: 12px; background: #7a1510; border: 2px solid var(--gold); transform: rotate(45deg); }
.hist .hp { font-family: Exocet, Georgia, serif; color: var(--gold); }
.old { color: #9d6e5c; text-decoration: line-through; }
.new { color: #9be870; }

/* ---------------------------------------------------------------- skills */
.skill { display: flex; gap: 12px; padding: 10px; background: #130d08; border: 1px solid #2a1d12; }
.skill .sk-ic { position: relative; flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: url('ui/SkillsPane_Skills_Frame_Normal.png') center / 100% 100% no-repeat; }
.skill.passive .sk-ic { background-image: url('ui/SkillsPane_Skills_PassiveFrame_Normal.png'); }
.skill h3 { margin: 0 0 3px; font-size: 16px; }
.skill .desc { font-size: 13.5px; white-space: pre-line; }
.runes { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; }
.runes li { margin: 2px 0; }
.runes b { color: #e8d49a; font-weight: normal; }
.rn { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; border: 1px solid #000; }
.rn.A { background: #d64a3a; } .rn.B { background: #3a8ad6; } .rn.C { background: #d6c43a; } .rn.D { background: #9a4ad6; } .rn.E { background: #6ad63a; }
.classcard { min-height: 150px; }
.classcard .ico { float: right; }

/* ---------------------------------------------------------------- timeline */
.timeline { position: relative; margin-left: 10px; border-left: 2px solid var(--line2); padding-left: 22px; }
.tl { position: relative; margin-bottom: 16px; }
.tl::before { content: ''; position: absolute; left: -30px; top: 6px; width: 14px; height: 14px; background: #1b120b; border: 2px solid var(--gold); transform: rotate(45deg); }
.tl.expansion::before, .tl.launch::before { background: var(--blood); width: 18px; height: 18px; left: -32px; }
.tl .when { color: var(--dim); font-size: 13px; }
.tl h3 { margin: 0; }
.tl ul { margin: 4px 0; padding-left: 18px; font-size: 14px; }
.era { font-family: Exocet, Georgia, serif; color: var(--legendary); margin: 20px 0 10px -22px; font-size: 18px; letter-spacing: .06em; }
.sysadd { color: #9be870; } .sysrem { color: #ff8a70; } .syschg { color: #e8c870; }

/* ---------------------------------------------------------------- monsters and zones */
.mcard { display: flex; gap: 10px; align-items: center; }
.mcard img.th { width: 72px; height: 72px; object-fit: cover; background: #0b0806; border: 1px solid #2a1d12; flex: none; }
.mural { width: 100%; max-width: 420px; }
.areas { columns: 3 220px; font-size: 14px; }
.areas div { break-inside: avoid; padding: 1px 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .itempage, .cols { grid-template-columns: minmax(0, 1fr); }
  .itempage > *, .cols > * { min-width: 0; }
  .tt { width: 473px; max-width: 100%; }
}
@media (max-width: 720px) {
  main { padding: 12px 10px 30px; }
  .panel { padding: 14px 12px; }
  h1 { font-size: 24px; }
  .ilist { grid-template-columns: 1fr; }
  .tipfloat { display: none !important; }
}