/* ── Enemy Hitboxes: contact sheet (/wiki/hitboxes/), then one enemy (/wiki/hitboxes/) ──────────────────────────────────────────── Shared by the hub and every per-enemy page (all generated by _dev/build-hitbox-pages.py; behavior in /js/hitboxes.js). Everything is scoped under .hbc except the rules for the viewer's fullscreen overlay, which the viewer appends to . */ .hbc [hidden] { display: none !important; } /* Visually hidden, still read by screen readers and search engines (the landing's

, the prev/next separators, the live region). / .hbc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .hbc .badge { font-size: 1rem; } / ── Contact sheet ───────────────────────────────────────────────────────── / .hbc-faction-title { margin-top: 28px; } .hbc-tier { margin: 18px 0 10px; } .hbc-tier-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: #fff; margin: 0 0 12px; padding: 2px 0 2px 12px; border-left: 4px solid var(--hbc-tier, var(--gold)); } .hbc-tier-minoris { --hbc-tier: #86efac; } .hbc-tier-majoris { --hbc-tier: #fde047; } .hbc-tier-extremis { --hbc-tier: #fdba74; } .hbc-tier-terminus { --hbc-tier: #f87171; } .hbc-grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .hbc-grid > li, .hbc-more-row > li { display: flex; min-width: 0; } / Card: thumbnail + name. Shared by the sheet and the "More" row. / .hbc-card { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; color: #fff; text-decoration: none; transition: border-color 120ms, box-shadow 120ms, background 120ms; } .hbc-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); } / The card of the enemy you just came back from. / .hbc-card.hbc-card-recent { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); } .hbc-card-img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 300; background: #0d0e10; border-bottom: 1px solid var(--border); } .hbc-card-name { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 10px 12px; font-size: 1rem; font-weight: 700; line-height: 1.25; color: #fff; } / ── Detail ──────────────────────────────────────────────────────────────── / .hbc-bar { display: flex; flex-direction: column; gap: 16px; } .hbc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; } / The

(the name, a link to the enemy's wiki page, with an arrow) and the faction/tier badges beside it, outside the heading. The row lays them out the way .wiki-page-title lays out a writeup's name and badges; the badges' own wrapper takes no box (display: contents), so each badge wraps on its own. Phones put the badges on the line under the name (see the 600px block). / .hbc-row-ident { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 14px; } .hbc-badges { display: contents; } .hbc-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: #fff; font-size: 1rem; font-weight: 700; white-space: nowrap; text-decoration: none; } .hbc-steps { display: flex; gap: 10px; min-width: 0; } .hbc-step { flex: 0 1 auto; width: 270px; / Fixed height (label + two name lines) so a long neighbour name never changes the bar's height between enemies. / height: 74px; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 6px 14px 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: #fff; text-decoration: none; } .hbc-step-next { flex-direction: row-reverse; padding: 6px 10px 6px 14px; text-align: right; } .hbc-step-arrow { flex: none; font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--gold); } .hbc-step-thumb { flex: none; width: 80px; height: 50px; object-fit: cover; border-radius: 4px; background: #0d0e10; } .hbc-step-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .hbc-step-dir { font-size: 1rem; color: #fff; } .hbc-step-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 1rem; font-weight: 700; color: #fff; } .hbc-name { margin: 0; min-width: 0; } .hbc-name:focus { outline: none; } .hbc-name-link { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; border-radius: 4px; } / The arrow is drawn here, not in the markup, so the heading's text (what search engines index) stays " Hitboxes". Not read aloud: the link has its own accessible name. / .hbc-name-link::after { content: "\2197"; content: "\2197" / ""; color: var(--gold); transition: transform 120ms; } .hbc-name-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } @media (hover: hover) { .hbc-name-link:hover { color: #fff; text-decoration: none; } .hbc-name-link:hover .hbc-name-text { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; } .hbc-name-link:hover::after { transform: translate(3px, -3px); } } .hbc-chip:focus-visible, .hbc-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .hbc-viewer { margin: 20px 0 0; } / Stand-in the page is served with until hitboxes.js mounts the viewer (which replaces it): the viewer's panels with their labels, and a bar as tall as its one-row control bar, so the page does not shift on mount. Visitors without JavaScript see each panel's