/* The SkyCrypt-replica account page, /a/<slug>. Loaded after listing.css,
   whose item tiles and hover cards it reuses and restyles under body.sc.
   Tokens first, then components.

   The sizes here are measured, not chosen: Task 13 put this page next to
   sky.shiiyu.moe v4.1.1 at 1568x777 and read the reference's own numbers off
   the screenshots and its computed styles - 36px title, 16px body text and
   tabs, 20px card headings, a 30% model column, 72px item tiles with a 16px
   gutter, and skill rows that are a 36px rounded TRACK with the name and the
   XP sitting on top of the fill rather than a caption above a thin bar.
   Anything still different is listed in docs/SKYCRYPT-DIFFERENCES.md. */

:root {
  --sc-text: oklch(0.985 0 0);
  --sc-muted: oklch(0.708 0 0);
  --sc-line: rgb(255 255 255 / .1);
  --sc-panel: rgb(0 0 0 / .45);
  --sc-green: #00aa00;
  --sc-track: rgb(255 255 255 / .12);
  --sc-soft: rgb(255 255 255 / .06);
  --mc-a: #55ff55; --mc-c: #ff5555; --mc-b: #55ffff; --mc-9: #5555ff; --mc-6: #ffaa00;
  --mc-e: #ffff55; --mc-d: #ff55ff; --mc-f: #ffffff; --mc-3: #00aaaa; --mc-2: #00aa00;
  --mc-4: #aa0000; --mc-5: #aa00aa; --mc-7: #aaaaaa; --mc-8: #555555;
}

body.sc { margin: 0; background: #000; color: var(--sc-text); font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.5; }

.sc-bg { position: fixed; inset: 0; background: var(--sc-photo) center/cover; filter: blur(24px) brightness(.45); transform: scale(1.1); z-index: -1; }
/* SkyCrypt's model column is 30% of the window and shows the photograph
   SHARP; the page beside it (.sc-bg above) is the same photograph blurred at
   runtime. The photos are the sharp originals in /backgrounds/sharp/
   (2026-10-12: "i dont want my background for the skin be blurry"). */
.sc-left { position: fixed; top: 0; bottom: 0; left: 0; width: 30%; background: var(--sc-photo, url('/backgrounds/sharp/bg-3.webp')) center/cover; }
.sc-model { display: block; width: 100%; height: 100%; }
/* No max-width: SkyCrypt's column runs to 32px from the window edge (1270px of
   content at 1920 wide). Capped at 1100px ours read as zoomed in beside it. */
/* 30% of the page, not of the window: a vw unit counts the scrollbar, and
   SkyCrypt's column is 30% without it (572px at 1920; ours was 576). */
.sc-right { margin-left: 30%; padding: 80px 32px 64px 32px; }

/* --- Top bar ---------------------------------------------------------------
   SkyCrypt's: fixed, 48px, full width over the model column too, a hairline
   under it; brand left (24px mark, bold name over a 12px grey line), pill
   links centred, one pill right. Content starts 32px below it (80px above). */
.sc-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 35; height: 48px; box-sizing: border-box; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--sc-line); background: rgb(0 0 0 / .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sc-brand { display: flex; align-items: center; gap: 8px; color: var(--sc-text); text-decoration: none; }
.sc-brand img { width: 24px; height: 24px; border-radius: 6px; }
.sc-brand b { display: block; font-size: 16px; font-weight: 700; line-height: 16px; }
.sc-brand small { display: block; margin-top: 4px; font-size: 12px; line-height: 12px; color: var(--sc-muted); }
.sc-accent { color: #10b981; }
.sc-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.sc-nav a, .sc-navpill { display: inline-flex; align-items: center; height: 36px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--sc-line); border-radius: 26px; font-size: 14px; font-weight: 500; color: var(--sc-text); text-decoration: none; }
.sc-nav a:hover, .sc-navpill:hover { background: rgb(255 255 255 / .08); }
.sc-navpill { margin-left: auto; }
.sc-menu { display: none; position: relative; margin-left: auto; }
.sc-menu > summary { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--sc-line); border-radius: 50%; list-style: none; cursor: pointer; color: var(--sc-text); }
.sc-menu > summary::-webkit-details-marker { display: none; }
.sc-menu-links { position: absolute; right: 0; top: 44px; display: flex; flex-direction: column; min-width: 160px; padding: 6px; border: 1px solid var(--sc-line); border-radius: 14px; background: rgb(10 10 10 / .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sc-menu-links a { padding: 10px 12px; border-radius: 10px; color: var(--sc-text); text-decoration: none; font-size: 15px; font-weight: 500; }
.sc-menu-links a:hover { background: rgb(255 255 255 / .08); }

/* --- Title ---------------------------------------------------------------- */
.sc-title { font-size: 36px; font-weight: 400; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 52px; margin: 0 0 20px; line-height: 1.2; }
.sc-rank, .sc-profile, .sc-name { border-radius: 26px; padding: 2px 16px; background: var(--sc-soft); font-weight: 600; }
/* SkyCrypt's rank pill: rank colour behind dark text, the plus in its own colour. */
.sc-rank { color: #111; font-weight: 700; font-size: 26px; }
.sc-rank b { font-weight: 700; text-shadow: 0 0 1px #000; }
.sc-rank-vip { background: var(--mc-a); }
.sc-rank-mvp { background: var(--mc-b); }
.sc-rank-mvpplusplus { background: var(--mc-6); }

.sc-actions { display: flex; align-items: center; gap: 10px; height: 36px; margin: 0 0 20px; }
.sc-pill { display: inline-block; border-radius: 26px; padding: 7px 16px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--sc-text); border: 1.25px solid var(--sc-line); }
.sc-buy { background: var(--sc-green); border-color: var(--sc-green); }
.sc-buy:hover { filter: brightness(1.15); }
.sc-sold { background: rgb(255 255 255 / .12); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* --- Skill bars ------------------------------------------------------------
   SkyCrypt v4, measured 2026-09-27: a 36px row is a 20px text line ("Alchemy
   20" 14px on the left, "218.83K / 300K XP" 12px on the right) over a 16px
   rounded bar indented 8px, and a 36px green disc holding the 26px icon sits
   on the row's bottom-left corner, over the bar's start. */
.sc-skills { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 8px 16px; margin: 0 0 20px; }
.sc-skill-level { grid-column: 1 / -1; }
.sc-skill { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 20px 16px; align-items: center; height: 36px; }
/* The circle is this wrapper; the picture is .sc-skill-img inside it, square
   and unclipped - as SkyCrypt builds it. Rounding the <img> itself cut the
   corners off every icon (2026-10-12). */
.sc-skill-icon { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; width: 36px; height: 36px; padding: 4px; box-sizing: border-box; border: 1px solid var(--sc-line); border-radius: 50%; background: oklch(0.723 0.219 149.579); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .1)); }
.sc-skill-img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.sc-skill-name { grid-row: 1; grid-column: 1; margin-left: 40px; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.sc-skill-name > span { color: rgb(255 255 255 / .8); }
.sc-skill-xp { grid-row: 1; grid-column: 2; padding-left: 10px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--sc-text); text-shadow: 0 0 4px rgb(0 0 0 / .5); white-space: nowrap; }
.sc-bar { grid-row: 2; grid-column: 1 / -1; height: 16px; margin-left: 8px; border-radius: 999px; background: rgb(255 255 255 / .3); overflow: hidden; }
.sc-bar > i { display: block; height: 100%; background: oklch(0.627 0.194 149.214); border-radius: 999px; }
.sc-skill-maxed .sc-bar > i, .sc-skill-maxed .sc-skill-icon { background: var(--mc-6); }

.sc-show-stats { width: 100%; border: 1.25px solid var(--sc-line); border-radius: 26px; background: var(--sc-soft); color: var(--sc-text); height: 36px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; margin: 0 0 21px; }

/* --- Info row ------------------------------------------------------------- */
.sc-info { font-size: 16px; color: var(--sc-muted); display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0 0 14px; font-weight: 500; }
.sc-info b { color: var(--sc-text); font-weight: 700; }

/* The header's info row: bold grey label, white value, and on the figures
   SkyCrypt explains a 12px (i) set high after the value, with a glass card
   on hover/focus (placed above the item by skycrypt.js, flipped below when
   there is no room). */
/* SkyCrypt's spacing: items ~10px apart, lines 34px apart. At 16px apart
   ours wrapped Non-Cosmetic Networth where SkyCrypt's row still fit. */
.sc-info-head { gap: 10px 10px; }
.sc-info-item { position: relative; font-weight: 700; }
.sc-info-item[tabindex] { cursor: default; outline: none; }
.sc-i { width: 12px; height: 12px; margin-left: 2px; vertical-align: top; color: var(--sc-muted); }
.sc-info-tip { display: none; position: absolute; left: -3px; bottom: calc(100% + 6px); z-index: 30; flex-direction: column; gap: 8px; width: max-content; max-width: min(360px, calc(100vw - 16px)); box-sizing: border-box; padding: 16px; border: 1px solid rgb(255 255 255 / .1); border-radius: 14px; background: rgb(0 0 0 / .25); -webkit-backdrop-filter: blur(16px) brightness(.5); backdrop-filter: blur(16px) brightness(.5); color: var(--sc-text); font-size: 14px; font-weight: 400; line-height: 20px; white-space: normal; }
/* Above the top bar (z 35): a tall card reaches the top of the window, and
   SkyCrypt draws its card over its bar too. */
.sc-info-tip.is-placed { position: fixed; bottom: auto; z-index: 50; }
.sc-info-item:hover .sc-info-tip, .sc-info-item:focus .sc-info-tip { display: flex; }
.sc-info-tip b { color: var(--sc-text); font-weight: 700; }
/* A figure too long for its line drops whole under its label, as SkyCrypt's
   "Total Non-Cosmetic Networth: 1,359,500,284 (1.36B)" does - never split mid-number. */
.sc-tip-val { display: inline-block; white-space: nowrap; }
.sc-info-tip small { display: block; font-size: 12px; line-height: 16px; color: rgb(255 255 255 / .8); }
.sc-info-tip .sc-tip-h { display: block; line-height: 14px; }
.sc-info-tip hr { width: 100%; height: 1px; margin: 0; border: 0; background: rgb(255 255 255 / .1); }
.sc-info-tip ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sc-info-tip li { text-transform: capitalize; }

/* --- Tabs and panels ------------------------------------------------------ */
.sc-tabs { position: sticky; top: 48px; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; border-bottom: 1.25px solid var(--sc-green); backdrop-filter: blur(12px); z-index: 2; }
.sc-tab { font-size: 16px; font-weight: 600; color: var(--sc-text); text-decoration: none; padding: 5px 14px; border-radius: 26px; }
.sc-tab:hover { background: rgb(255 255 255 / .08); }
.sc-tab[aria-current="true"] { background: var(--sc-green); }
/* SkyCrypt swaps one section at a time, so its panel has no title of its own
   and no frame: each sub-block (Armor, Equipment, Loadouts...) is its own
   card. This page stacks every section instead, so it keeps a section
   heading - the one deliberate addition, see docs/SKYCRYPT-DIFFERENCES.md -
   and the cards below it are SkyCrypt's. */
/* One section at a time (skycrypt.js adds .sc-one), with SkyCrypt's green
   previous / next pills at the foot of each: 36px tall, 18px / 500, 26px radius. */
.sc-one .sc-view:not(.is-shown) { display: none; }
.sc-pager { display: flex; justify-content: space-between; margin: 0 0 24px; }
.sc-pager a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 26px; background: var(--sc-green); color: #fff; font-size: 18px; font-weight: 500; text-decoration: none; }
.sc-pager a:hover { filter: brightness(1.1); }
.sc-panel { background: none; border: 0; border-radius: 0; padding: 0; margin: 16px 0 24px; scroll-margin-top: 112px; }
.sc-panel > h4 { font-size: 24px; font-weight: 700; margin: 0 0 10px; }
/* One section per tab: the highlighted tab already names it, and SkyCrypt
   draws no heading there. Hidden from sight, still read out. */
.sc-view > .sc-panel > h4 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sc-bonus { font-size: 16px; font-weight: 600; color: var(--sc-muted); margin: 0 0 10px; }
/* Accessories (SkyCrypt's Accessories.svelte): the Enrichments line above the
   Bonus, a hairline (my-4) before the grid, and the Missing Accessories
   collapsible - its own bordered box (rounded-xl border p-2), lists indented
   16px, tiles 80% grey until hovered. */
.sc-enrich { font-size: 16px; font-weight: 700; line-height: 24px; color: var(--sc-muted); margin: 0 0 4px; text-transform: capitalize; }
.sc-enrich-missing { color: #fafafa; }
.sc-acc-sep { height: 1px; margin: 16px 0; background: rgb(255 255 255 / .1); }
.sc-acc-missing, .sc-pets-more, .sc-pets-missing { margin-top: 16px; padding: 8px; border: 1.25px solid rgb(255 255 255 / .1); border-radius: 14px; }
.sc-acc-missing > summary, .sc-pets-more > summary, .sc-pets-missing > summary { font-size: 16px; margin: 0; }
.sc-pets-more > .sc-grid, .sc-pets-missing > .sc-grid { padding: 16px 8px 8px; }
.sc-pets-missing-list .slot { filter: grayscale(.8); transition: filter .15s; }
.sc-pets-missing-list .slot:hover { filter: none; }
.sc-acc-missing-list { padding-left: 16px; margin: 16px 0; }
.sc-acc-missing-list > h4 { margin: 0 0 12px; }
.sc-acc-missing-list .slot { filter: grayscale(.8); transition: filter .15s; }
.sc-acc-missing-list .slot:hover { filter: none; }

/* The card every sub-block sits in, and the summary lines above them - which
   SkyCrypt stacks one per line in a card of their own, not in a row. */
.sc-sub, .sc-panel > .sc-info {
  background: var(--sc-panel); border: 1.25px solid var(--sc-line); border-radius: 12px;
  padding: 14px 16px; margin: 0 0 12px;
}
.sc-panel > .sc-info { flex-direction: column; gap: 2px; }
.sc-sub > h4 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
/* SkyCrypt's accessory grid scrolls inside its card rather than running the
   page on for seven rows; the list sits behind a thin green bar. */
#Accessories .sc-sub .sc-grid { max-height: 456px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sc-green) transparent; padding-right: 8px; }
.sc-sub h5 { font-size: 13px; font-weight: 600; color: var(--sc-muted); margin: 0 0 8px; }

/* --- Item tiles: listing.css's renderSlot(), as SkyCrypt's rounded squares - */
.sc .slot { --slot-size: 72px; width: 72px; height: 72px; border-radius: 8px; background: rgb(255 255 255 / .05); box-shadow: none; }
/* Re-stated because `.sc .slot` outranks listing.css's own `.slot-item`, and
   without it every tile lost its rarity colour to the empty-slot grey.
   SkyCrypt fills the tile with the rarity FLAT, not tinted. */
.sc .slot-item { background: var(--r); }
.sc .slot-count { font-size: 14px; right: 4px; bottom: 2px; }

.sc .texture-credit { font-size: 12px; color: var(--sc-muted); margin-top: 24px; }
.sc .texture-credit a { color: inherit; }

/* --- Gear (Task 9) -------------------------------------------------------- */
.sc-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.sc-loadout-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sc-loadout-tab { border: 1.25px solid var(--sc-line); border-radius: 26px; background: var(--sc-soft); color: var(--sc-text); padding: 6px 16px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.sc-loadout-tab:hover { background: rgb(255 255 255 / .12); }
.sc-loadout-tab.is-active { background: var(--sc-green); border-color: var(--sc-green); }
.sc-loadout[hidden] { display: none; }
/* SkyCrypt rules a green line under the loadout strip, then draws the three
   columns side by side inside a card of their own, each under a centred
   caption with a hairline between them. */
.sc-loadouts > .sc-loadout-pills { border-bottom: 2px solid var(--sc-green); padding-bottom: 12px; }
.sc-loadout-cols { display: flex; flex-wrap: wrap; gap: 0; margin: 12px 0; }
.sc-loadout-col { flex: 0 0 auto; padding: 0 28px; border-left: 1.25px solid var(--sc-line); }
.sc-loadout-col:first-child { border-left: 0; padding-left: 0; }
.sc-loadout-col h5 { text-align: center; }
.sc-loadout-col .sc-grid { flex-direction: column; gap: 8px; }
.sc-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.sc-card { display: flex; flex-direction: column; gap: 2px; min-width: 104px; padding: 8px 14px; border: 1.25px solid var(--sc-line); border-radius: 8px; font-size: 13px; }
.sc-card span { color: var(--sc-muted); font-weight: 500; }
.sc-card b { font-size: 15px; font-weight: 700; }
.sc-tuning-list { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 2px 24px; font-size: 14px; }
.sc-tuning-row { display: flex; justify-content: space-between; }
.sc-tuning-row span { color: var(--sc-muted); }
.sc-tuning-row b { font-weight: 700; }
.sc-wardrobe { display: flex; flex-wrap: wrap; gap: 16px; }
.sc-wardrobe-col { display: flex; flex-direction: column; gap: 8px; }
.sc-pet-tile { cursor: default; }

/* --- Pets (Task 11) ------------------------------------------------------- */
.sc-gold { color: var(--mc-6); }
.sc-pet-active { display: flex; align-items: center; gap: 16px; }
.sc-pet-meta { display: flex; flex-direction: column; gap: 2px; font-size: 18px; }
.sc-pet-meta span { color: var(--sc-text); font-weight: 500; }
.sc-pet-name { font-size: 20px; font-weight: 700; }
/* SkyCrypt writes each pet's level under its tile, in the pet's rarity. */
.sc-pet-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-pet-lvl { font-size: 13px; font-weight: 700; }
/* No NEU head for this pet: its first letter on the rarity-coloured tile. */
.sc-pet-letter { display: grid; place-items: center; font-weight: 700; font-size: 28px; color: var(--sc-text); text-shadow: 0 1px 2px rgb(0 0 0 / .6); }

/* --- Inventory (Task 12) -------------------------------------------------- */
/* The list of pills on the left, the one selected inventory on the right. */
/* SkyCrypt's, measured 2026-09-27: a bordered card, the list on the left
   (16px padding, 12px apart, 48px pills of 16px/400 text and a 32px icon, the
   active one SkyCrypt's green at 40%), a 1px rule, then the grid centred. */
.sc-inv {
  display: flex; align-items: stretch;
  background: transparent; border: 1px solid rgb(255 255 255 / .1); border-radius: 14px;
}
.sc-inv-list { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; padding: 16px; border-right: 1px solid rgb(255 255 255 / .1); }
.sc-inv-tab { display: flex; align-items: center; gap: 8px; height: 48px; box-sizing: border-box; min-width: 187px; border: 0; border-radius: 999px; background: transparent; color: var(--sc-text); padding: 8px; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.5; cursor: pointer; text-align: left; white-space: nowrap; }
.sc-inv-tab:hover { background: rgb(255 255 255 / .08); }
.sc-inv-tab.is-active { background: oklch(0.627 0.194 149.214 / .4); }
.sc-inv-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.sc-inv-cube { position: relative; display: inline-block; flex: 0 0 auto; --slot-size: 32px; }
.sc-inv-panels { flex: 1 1 auto; min-width: 0; padding: 16px; }
.sc-inv-panel[hidden], .sc-page[hidden] { display: none; }
/* Nine tiles a row, however many are empty, each at most 78px and at least 30
   (SkyCrypt's repeat(9, minmax(1.875rem, 4.875rem))), centred - NOT stretched
   to the column, which drew 115px tiles once the column went full width. A
   tile is 5% white under a 1px 10%-white border with a 14px radius; the 72%
   sprite inset puts a 56px picture in it, as SkyCrypt's. */
.sc-inv-grid { display: grid; grid-template-columns: repeat(9, minmax(30px, 78px)); justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: 0 auto; }
.sc-inv-grid .slot { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; border: 1px solid rgb(255 255 255 / .1); box-sizing: border-box; }
/* No rarity colour in the inventory - SkyCrypt's are all the plain tile, an
   Epic Aspect of the End as much as Cobblestone. Gear, Pets etc. keep theirs. */
.sc-inv-grid .slot-item { background: rgb(255 255 255 / .05); }
.sc-inv-grid .slot-count { font-size: 16px; font-weight: 600; right: 2px; bottom: 2px; text-shadow: 1.6px 1.6px 1.6px #000; }
/* The hotbar under a hairline, 24px either side of it - as wide as the grid. */
.sc-inv-hotbar { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .1); }
/* Between a long bag's 45-slot pages: SkyCrypt's full-row separator, 1px at
   10% white with 16px above and below (plus the grid's own 8px gap). */
.sc-inv-sep { grid-column: 1 / -1; height: 1px; margin: 16px 0; background: rgb(255 255 255 / .1); }
/* Backpack: the row of backpack items (tiles as buttons), then the opened one's
   card - SkyCrypt's: centred, 16px margin and padding, 14px radius, 50% dark. */
.sc-bp-tab, .sc-mu-tab { display: block; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sc-bp-tab .slot, .sc-mu-tab .slot { width: 100%; }
.sc-bp-tab.is-active .slot, .sc-mu-tab.is-active .slot { background: rgb(255 255 255 / .15); }
.sc-bp-page[hidden], .sc-mu-page[hidden] { display: none; }
.sc-bp-card { width: fit-content; max-width: 100%; margin: 16px auto; padding: 16px; box-sizing: border-box; border: 1.25px solid rgb(255 255 255 / .1); border-radius: 14px; background: rgb(10 10 10 / .5); font-size: 16px; line-height: 24px; }
.sc-bp-foot { margin-top: 24px; }
body.sc .sc-bp-foot .sc-foot-line + .sc-foot-line { margin-top: 24px; }
/* Search - SkyCrypt's measured input: 36px, 14px text, 4px 12px padding, 22px
   radius, 7.5% white, 1.25px grey border; its empty states 16px below, the
   results 20px below in the usual tile grid. */
.sc-search-input { display: block; width: 100%; height: 36px; box-sizing: border-box; padding: 4px 12px; border: 1.25px solid #737373; border-radius: 22px; background: rgb(255 255 255 / .075); color: var(--sc-text); font: inherit; font-size: 14px; outline: none; }
.sc-search-input:focus-visible { border-color: #a1a1a1; }
.sc-search .sc-inv-empty { margin-top: 16px; }
.sc-search .sc-inv-empty[hidden], .sc-search-results[hidden] { display: none; }
.sc-search-results { padding-top: 20px; }
/* A bag the API did not send - SkyCrypt's measured box: dashed 1.25px, 14px
   radius, 48px padding; a 40px outlined icon tile, 18px/500 title, 14px grey line. */
.sc-inv-empty { display: flex; justify-content: center; margin-top: 8px; padding: 48px; border: 1.25px dashed rgb(255 255 255 / .1); border-radius: 14px; text-align: center; color: #fafafa; }
.sc-inv-empty-in { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sc-inv-empty-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 8px; box-sizing: border-box; border: 1.25px solid rgb(255 255 255 / .1); border-radius: 14px; }
.sc-inv-empty-in b { font-size: 18px; font-weight: 500; line-height: 28px; }
.sc-inv-empty-in > span:last-child { font-size: 14px; line-height: 22.75px; color: #a1a1a1; }
.sc-page-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sc-page-tab { border: 1.25px solid var(--sc-line); border-radius: 26px; background: var(--sc-soft); color: var(--sc-text); min-width: 36px; padding: 4px 12px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sc-page-tab:hover { background: rgb(255 255 255 / .12); }
.sc-page-tab.is-active { background: var(--sc-green); border-color: var(--sc-green); }

@media (max-width: 1100px) {
  .sc .slot { --slot-size: 56px; width: 56px; height: 56px; }
}

@media (max-width: 800px) {
  .sc-left { position: relative; width: 100%; height: 220px; margin-top: 48px; }
  .sc-nav { display: none; }
  .sc-menu { display: block; }
  .sc-menu + .sc-navpill { margin-left: 8px; }
  .sc-right { margin-left: 0; padding: 16px 16px 48px; }
  .sc-skills { grid-template-columns: 1fr; }
  .sc-title { font-size: 24px; }
  .sc-rank { font-size: 18px; }
  /* The section tabs: one row that scrolls sideways. Wrapped, they took five
     rows (~180px) of a phone screen and stayed stuck over the content. */
  .sc-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 8px 0; scrollbar-width: none; }
  .sc-tabs::-webkit-scrollbar { display: none; }
  .sc-tab { flex: 0 0 auto; font-size: 14px; padding: 4px 12px; }
  /* The inventory list: a scrolling row of compact pills over the grid, not
     thirteen full-width rows to scroll past first. */
  .sc-inv { flex-direction: column; }
  .sc-inv-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 8px 0; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .1); scrollbar-width: none; }
  .sc-inv-list::-webkit-scrollbar { display: none; }
  .sc-inv-tab { flex: 0 0 auto; min-width: 0; height: 36px; gap: 6px; padding: 4px 12px 4px 6px; font-size: 14px; }
  .sc-inv-icon { width: 24px; height: 24px; }
  .sc-inv-cube { --slot-size: 24px; }
  .sc-inv-panels { padding: 12px 0 0; }
  /* Nine square tiles sharing the width - the 56px tile rule above made them
     tall slivers and pushed the last columns off screen. */
  .sc-inv-grid { width: 100%; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; }
  .sc .sc-inv-grid .slot { width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
  .sc-inv-grid .slot-count { font-size: 11px; right: 1px; bottom: 0; }
  .sc-bp-card { padding: 12px; font-size: 14px; line-height: 20px; }
  .sc-inv-empty { padding: 32px 16px; }
}

/* ---- Wave 2: level bars, stat lines, collapsibles, floor cards ---- */
.sc-lvls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 16px; }
.sc-lvl { display: flex; align-items: center; gap: 8px; }
/* position:relative + overflow:hidden: classIcon()'s face branch (shell.js)
   nests a `.sprite` span inside this one, and `.sprite` (listing.css) is
   `position:absolute; inset:14%` - it positions against the nearest
   POSITIONED ancestor, which without this rule is nothing in the chain up to
   body.sc, so the crop draws against the whole page instead of this 36px
   disc. */
.sc-lvl-icon { position: relative; overflow: hidden; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--sc-green); padding: 7px; box-sizing: border-box; image-rendering: pixelated; }
/* SkyCrypt's 128px icon renders, scaled smoothly as SkyCrypt does (textures/skill). */
.sc-skill-img.sc-smooth, .sc-lvl-icon.sc-smooth { image-rendering: auto; }
.sc-lvl-body { flex: 1 1 auto; min-width: 0; }
.sc-lvl-text { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.sc-lvl-xp { font-size: 12px; white-space: nowrap; }
.sc-lvl-bar { display: block; height: 16px; border-radius: 999px; background: rgb(255 255 255 / .3); overflow: hidden; }
.sc-lvl-bar > i { display: block; height: 100%; background: var(--sc-green); }
.sc-lvl-maxed .sc-lvl-bar > i, .sc-lvl-maxed .sc-lvl-icon { background: var(--mc-6); }
.sc-lines { flex-direction: column; gap: 2px; }
.sc-info .sc-gold, .sc-info .sc-gold b { color: var(--mc-6); }
.sc-collapse > summary { cursor: pointer; list-style: none; font-size: 20px; font-weight: 600; margin: 10px 0 4px; display: flex; align-items: center; gap: 8px; }
.sc-collapse > summary::-webkit-details-marker { display: none; }
/* Task P1: the ↕ glyph is now the chevrons-up-down <svg> collapsible() puts in
   the summary's own HTML, not CSS content (which a screen reader and a
   textual diff both skipped). Open still swaps to a plain X via ::before,
   unchanged from before this task. */
.sc-collapse > summary > svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sc-collapse[open] > summary > svg { display: none; }
.sc-collapse[open] > summary::before { content: '\2715\FE0E'; display: inline-block; width: 18px; font-size: 14px; }
.sc-collapse > .sc-lines { padding-left: 18px; }
.sc-collapse-big { background: rgb(37 37 37 / .5); border: 1.25px solid var(--sc-line); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; }
.sc-collapse-big > summary { margin: 0 0 10px; }
.sc-floors { display: grid; grid-template-columns: repeat(2, minmax(0, 384px)); gap: 16px; }
.sc-floor { background: rgb(37 37 37 / .5); border: 1.25px solid var(--sc-line); border-radius: 14px; padding: 0 0 12px; }
.sc-floor-name { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 4px; padding: 14px 12px; text-align: center; font-size: 15px; font-weight: 700; border-bottom: 1.25px solid var(--sc-green); }
/* The floor's head before its name (dungeons.js's DUNGEON_FLOOR_HEADS) - a
   slot for the pre-rendered head, sized as SkyCrypt's capture draws it
   (docs/skycrypt-reference/Dungeons.png). */
.sc-floor-icon { position: relative; flex: 0 0 auto; width: 26px; height: 26px; --slot-size: 26px; }
.sc-floor .sc-collapse { padding: 0 20px; }
@media (max-width: 800px) { .sc-lvls, .sc-floors { grid-template-columns: 1fr; } }

/* ---- Wave 2: slayer ---- */
.sc-slayers { display: grid; grid-template-columns: repeat(2, minmax(0, 426px)); gap: 16px; }
.sc-slayer { background: rgb(37 37 37 / .5); border: 1.25px solid var(--sc-line); border-radius: 14px; overflow: hidden; }
.sc-slayer > h5 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 14px 12px; text-align: center; font-size: 15px; font-weight: 700; border-bottom: 1.25px solid var(--sc-green); }
/* Task P3: the boss's kill-trophy head (slayer.js), the same slot shape as
   the Dungeons floor icon just above - see .sc-floor-icon. */
.sc-slayer-icon { position: relative; flex: 0 0 auto; width: 24px; height: 24px; --slot-size: 24px; }
.sc-slayer-tiers { display: flex; justify-content: space-around; padding: 20px 12px 8px; text-align: center; }
.sc-slayer-tiers span { display: block; font-size: 13px; font-weight: 700; color: var(--sc-muted); }
.sc-slayer-tiers b { font-size: 14px; }
.sc-slayer-level { text-align: center; font-size: 16px; font-weight: 600; color: var(--sc-muted); margin: 18px 0 10px; }
.sc-slayer-bar { position: relative; height: 16px; background: rgb(255 255 255 / .3); }
.sc-slayer-bar > i { display: block; height: 100%; background: var(--sc-green); }
.sc-slayer-bar > span { position: absolute; inset: 0; text-align: center; font-size: 11px; font-weight: 700; line-height: 16px; }
@media (max-width: 800px) { .sc-slayers { grid-template-columns: 1fr; } }

/* ---- Wave 2: skill gear columns ---- */
.sc-gear-cols { display: flex; gap: 16px; }
.sc-gear-col h5 { text-align: center; margin: 0 0 8px; }
.sc-gear-col .sc-grid { flex-direction: column; gap: 8px; }

/* ---- Wave 2: skills sub-tabs, perk grids, chips ---- */
.sc-skilltab-pills { display: flex; gap: 4px; margin: 0 auto 16px; padding: 4px; width: fit-content; max-width: 100%; flex-wrap: wrap; justify-content: center; border: 1.25px solid var(--sc-line); border-radius: 26px; background: rgb(255 255 255 / .05); }
.sc-skill-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; border-radius: 26px; background: transparent; color: oklch(0.708 0 0); padding: 6px 18px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; }
/* Task P1: a Lucide line icon in place of the pixel-item sprite; currentColor
   follows the tab's own colour so it dims/brightens with .is-active for free. */
.sc-skill-tab svg { width: 20px; height: 20px; }
.sc-skill-tab.is-active { background: var(--sc-green); color: var(--sc-text); }
.sc-skill-panel[hidden] { display: none; }
/* The HotM / HotF perk grid, as SkyCrypt draws it (measured 2026-10-12): a
   576px scroll box with a hairline border and a slim green scrollbar, 16px
   above the grid; nine 78px columns, 8px apart; each tile a 5% white tint with
   a hairline border and a 56px pixel-art icon. Tiles are .slot-item (they open
   the item card), so the rarity fill .sc .slot-item paints is undone here. */
.sc-tree-scroll { max-height: 576px; overflow-y: auto; margin: 0 0 12px; padding-top: 16px; box-sizing: border-box;
  background: var(--sc-panel); border: 1px solid var(--sc-line); border-radius: 14px;
  scrollbar-width: thin; scrollbar-color: oklch(0.627 0.194 149.214) transparent; }
.sc-tree-scroll::-webkit-scrollbar { width: 10px; }
.sc-tree-scroll::-webkit-scrollbar-track { background: transparent; }
.sc-tree-scroll::-webkit-scrollbar-thumb { background: oklch(0.627 0.194 149.214); border: 1.5px solid transparent; background-clip: padding-box; border-radius: 999px; }
.sc-tree { display: grid; grid-template-columns: repeat(9, 78px); gap: 8px; justify-content: center; }
.sc-tree-cell { width: 78px; height: 78px; box-sizing: border-box; border: 1px solid rgb(255 255 255 / .1); border-radius: 14px; background: rgb(250 250 250 / .05); }
.sc .sc-tree-cell.slot-item { background: rgb(250 250 250 / .05); }
.sc-tree-perk { display: grid; place-items: center; cursor: pointer; }
.sc-tree-perk:focus-visible { outline: 2px solid var(--sc-green); outline-offset: 1px; }
.sc-tree-icon { width: 56px; height: 56px; image-rendering: pixelated; pointer-events: none; }
/* Fossil and corpse cards = SkyCrypt's: a 48px picture beside the text in a
   rounded hairline card, half opacity until found. */
.sc-gchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sc-gchip { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border: 1px solid rgb(255 255 255 / .1); border-radius: 14px; background: rgb(10 10 10 / .5); font-size: 14px; font-weight: 600; color: var(--sc-text); }
.sc-gchip.is-dim { opacity: .5; }
.sc-gchip > span { display: flex; flex-direction: column; line-height: 1.25; }
.sc-gchip-img { width: 48px; height: 48px; image-rendering: pixelated; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.sc-chip { display: inline-flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: rgb(37 37 37 / .5); font-size: 13px; font-weight: 600; color: var(--sc-muted); }
.sc-chip b { color: inherit; }
.sc-chip.is-found { color: var(--sc-text); }
.sc-empty { text-align: center; color: var(--sc-muted); padding: 40px 0; border: 1.25px solid var(--sc-line); border-radius: 14px; }
/* Task P1: the anvil above the Forge empty state, like the capture. */
.sc-empty > svg { display: block; width: 28px; height: 28px; margin: 0 auto 10px; }
/* Task P1: the small circled-i SkyCrypt puts after some figures. */
.sc-hint { display: inline-flex; vertical-align: -2px; margin-left: 3px; color: var(--sc-muted); }
.sc-hint > svg { width: 13px; height: 13px; }
@media (max-width: 800px) {
  .sc-tree { grid-template-columns: repeat(9, minmax(30px, 1fr)); gap: 4px; padding: 0 4px; }
  .sc-tree-cell { width: auto; height: auto; aspect-ratio: 1; border-radius: 8px; }
  .sc-tree-icon { width: 24px; height: 24px; }
  .sc-gchip-img { width: 36px; height: 36px; }
  .sc-gear-cols { flex-wrap: wrap; }
}

/* ---- Wave 2: fishing, experiments, hunting ---- */
.sc-creatures { display: flex; flex-wrap: wrap; gap: 16px; }
.sc-creature { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 104px; padding: 12px; border-radius: 14px; background: rgb(37 37 37 / .5); font-size: 14px; }
.sc-creature > b { padding-bottom: 8px; border-bottom: 2px solid var(--sc-green); }
.sc-trophies { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.sc-trophy { padding: 12px 16px; border-radius: 14px; background: rgb(37 37 37 / .5); font-size: 14px; }
.sc-trophy-tiers { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 24px; margin-top: 4px; }
.sc-tf::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.sc-tf-bronze::before { background: #b46a1c; } .sc-tf-silver::before { background: #bfbfbf; }
.sc-tf-gold::before { background: #fbbf24; } .sc-tf-diamond::before { background: #67e8f9; }
.sc-exp-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sc-exp-game { border: 1.25px solid var(--sc-line); border-radius: 14px; padding: 0 16px 16px; }
.sc-exp-game > h5 { margin: 0 -16px 12px; padding: 12px; text-align: center; border-bottom: 1.25px solid var(--sc-green); }
.sc-exp-tier { border: 1.25px solid var(--sc-line); border-radius: 14px; padding: 10px 16px; margin-top: 12px; }
.sc-exp-tier > h6 { margin: 0; font-size: 14px; color: var(--sc-muted); }
.sc-hunt-search { width: 100%; box-sizing: border-box; border: 0; border-radius: 26px; background: rgb(255 255 255 / .1); color: var(--sc-text); padding: 10px 14px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; margin: 0 0 16px; }
.sc-hunt-pills { display: flex; gap: 4px; width: fit-content; margin: 0 auto 16px; padding: 4px; border: 1.25px solid var(--sc-line); border-radius: 26px; }
.sc-hunt-tab { border: 0; border-radius: 26px; background: transparent; padding: 8px 16px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.sc-hunt-tab.is-active { background: rgb(255 255 255 / .3); color: var(--sc-text) !important; }
.sc-hunt-panel { display: flex; flex-wrap: wrap; gap: 12px; }
.sc-hunt-panel[hidden], .sc-shard[hidden] { display: none; }
.sc-shard { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.25px solid var(--sc-line); border-radius: 14px; background: rgb(37 37 37 / .5); }
.sc-shard .sc-lines { margin: 0; font-size: 14px; }
.sc-shard-name { font-size: 14px; }
@media (max-width: 800px) { .sc-exp-games { grid-template-columns: 1fr; } }

/* ---- Wave 2: garden ---- */
.sc-crops { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-crop { display: flex; flex-direction: column; gap: 4px; min-width: 104px; padding: 10px 12px 0; border-radius: 14px; background: rgb(37 37 37 / .5); font-size: 13px; overflow: hidden; }
.sc-crop:not(:has(.sc-crop-bar)) { padding-bottom: 10px; }
.sc-crop-bar { position: relative; display: block; height: 14px; margin: 0 -12px; background: rgb(255 255 255 / .3); }
.sc-crop-bar > i { display: block; height: 100%; background: var(--sc-green); }
.sc-crop-bar > span { position: absolute; inset: 0; text-align: center; font-size: 10px; font-weight: 700; line-height: 14px; }
.sc-plots { display: grid; grid-template-columns: repeat(5, 48px); gap: 10px; justify-content: center; padding: 16px; border: 1.25px solid var(--sc-line); border-radius: 14px; margin-top: 10px; }
/* Task P3: position:relative + --slot-size give every plot cell a slot a
   cubeIcon() cube can fill (see .sc-floor-icon) - a locked cell (the plain
   grey circle, unchanged) never gets one, so it never needed either. */
.sc-plot { position: relative; width: 48px; height: 48px; --slot-size: 48px; border-radius: 50%; background: #6b6b6b; }
/* An open plot and the Barn now draw a real grass_block/hay_block cube
   (skills-farming.js's plotsGrid()); the flat green/tan squares these used to
   be were only ever a placeholder for that texture. */
.sc-plot.is-open, .sc-plot-barn { border-radius: 8px; background: rgb(37 37 37 / .5); }

/* ---- Wave 2: side-by-side fixes (Task 13, against docs/skycrypt-reference) ---- */
/* A tab's own summary lines (Fishing, Hunting) sit in a card, as on SkyCrypt. */
.sc-skill-panel > .sc-info {
  flex-direction: column; gap: 2px; background: var(--sc-panel); border: 1.25px solid var(--sc-line);
  border-radius: 12px; padding: 14px 16px; margin: 0 0 12px;
}
/* SkyCrypt's stat-line labels in these sections are semibold. */
#Skills .sc-info, #Dungeons .sc-info, #Slayer .sc-info { font-weight: 600; }
/* One card, blocks split by hairlines (Glacite / Fossils / Corpses, the Garden). */
.sc-part > h4 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.sc-part + .sc-part { border-top: 1.25px solid var(--sc-line); margin-top: 14px; padding-top: 14px; }
.sc-collapse-big > .sc-parts { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.sc-collapse-big > .sc-parts > .sc-part:first-child { border-top: 1.25px solid var(--sc-line); margin-top: 14px; padding-top: 14px; }
/* Stat lines directly in a big collapsible (Trophy Fish, Garden) are flush, not indented. */
.sc-collapse-big > .sc-lines { padding-left: 0; }
/* The perk grid is its own card now; its frame is that card's. */
.sc-empty > b { display: block; color: var(--sc-text); font-size: 16px; margin-bottom: 6px; }
/* Floor and boss headings sit inside .sc-sub, whose muted 13px h5 must not win. */
.sc-sub .sc-floor-name, .sc-sub .sc-slayer > h5 { font-size: 15px; font-weight: 700; color: var(--sc-text); }
.sc-exp-game > h5 { font-size: 14px; }
/* SkyCrypt scrolls these long lists inside their card behind a thin green bar. */
.sc-floors, .sc-hunt-panel, .sc-exp-games, .sc-slayers {
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sc-green) transparent; padding-right: 8px;
}
.sc-floors, .sc-hunt-panel { max-height: 560px; }
.sc-exp-games { max-height: 470px; }
.sc-slayers { max-height: 520px; }
.sc-hunt { background: var(--sc-panel); border: 1.25px solid var(--sc-line); border-radius: 12px; padding: 14px 16px; }
.sc-hunt-panel { align-content: flex-start; }
/* SkyCrypt draws the shard head small and bare, not on a 72px rarity tile. */
.sc-shard > .slot { zoom: .67; background: transparent; border-color: transparent; box-shadow: none; }
/* Five rarity pills are wider than a phone; let them wrap rather than scroll the page. */
.sc-hunt-pills { max-width: 100%; flex-wrap: wrap; justify-content: center; }

/* ---- Wave 3: catalogue sections (Collections, Minions, Bestiary) ---- */
.sc-cat { background: rgb(37 37 37 / .5); border: 1.25px solid var(--sc-line); border-radius: 14px; padding: 16px; }
.sc-cat-search { width: 100%; box-sizing: border-box; border: 0; border-radius: 22px; background: rgb(255 255 255 / .075); color: var(--sc-text); padding: 8px 12px; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 20px; margin: 0 0 16px; }
.sc-cat-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 auto 16px; padding: 4px; border: 1.25px solid var(--sc-line); border-radius: 26px; }
.sc-cat-tab { border: 1px solid transparent; border-radius: 26px; background: transparent; color: var(--sc-muted); padding: 8px 16px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; }
.sc-cat-tab.is-active { background: rgb(0 170 0 / .35); color: var(--sc-text); }
.sc-cat-panel[hidden], .sc-cat-none[hidden], .sc-entry[hidden] { display: none; }
.sc-cat-count { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: rgb(255 255 255 / .8); }
.sc-cat-none { color: var(--sc-muted); }
.sc-entries { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 16px; }
.sc-entry { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1.25px solid var(--sc-line); border-radius: 14px; background: rgb(37 37 37 / .5); font-size: 14px; }
.sc-entry.is-dim { opacity: .5; }
/* A positioned box: .sprite is position:absolute (listing.css). See the css guard test. */
/* SkyCrypt draws every catalogue icon in a 48px square (size-12), flat items filling it. */
.sc-entry-icon { position: relative; flex: 0 0 auto; width: 48px; height: 48px; --slot-size: 48px; }
.sc-entry-icon > img.sprite:not(.sprite-iso) { inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* A full block's flat face (see "block icons" in docs/SKYCRYPT-DIFFERENCES.md) is drawn at 30px, the visual weight of SkyCrypt's cube, not as a 48px slab. Plants drawn flat in the game (FLAT_BLOCKS) fill the square like any item. */
.sc-entry-icon > img.sprite.sprite-block { inset: 18.75%; width: 62.5%; height: 62.5%; }
.sc-entry-body { display: flex; flex-direction: column; line-height: 20px; }
.sc-entry-name { font-weight: 700; }
.sc-entry-body > span { font-weight: 700; color: var(--sc-muted); }
.sc-entry-body > span > b { color: var(--sc-text); }
.sc-entry.is-maxed .sc-entry-name { color: oklch(0.7284 0.1506 75.86); }
/* Catalogue hover cards (SkyCrypt's Chip tooltip). The markup rides hidden in
   each card; skycrypt.js copies it into the one floating .sc-float-tip, which
   wears the info-row card's look (.sc-info-tip) and lives on <body>, so a
   dimmed card's opacity and the panels' backdrop filters never reach it. */
.sc-entry[tabindex] { cursor: default; outline: none; }
.sc-entry[tabindex]:focus-visible { border-color: var(--sc-green); }
.sc-info-tip.sc-float-tip { gap: 4px; }
.sc-info-tip.sc-float-tip.is-open { display: flex; }
.sc-float-tip > span { font-weight: 700; color: var(--sc-muted); }
.sc-float-tip .sc-tip-max { color: var(--sc-green); }
.sc-float-tip .sc-tiers { display: flex; gap: 6px; }
.sc-float-tip .sc-tiers b { color: var(--sc-muted); }
.sc-float-tip .sc-tiers b.is-on { color: var(--sc-green); }
.sc-entry.is-maxed .sc-entry-level { color: oklch(0.8284 0.1548 78.27); }
/* Wave 3 summary card (Task 10, against docs/skycrypt-reference): SkyCrypt's
   labels here are semibold, and the card is 16px padded, 14px round, with no
   trailing margin inside it. */
#Minions .sc-info, #Bestiary .sc-info, #Collections .sc-info { font-weight: 600; }
#Minions > .sc-sub, #Bestiary > .sc-sub, #Collections > .sc-sub { padding: 16px; border-radius: 14px; margin-bottom: 16px; }
#Minions > .sc-sub > .sc-info, #Bestiary > .sc-sub > .sc-info, #Collections > .sc-sub > .sc-info { margin: 0; }
/* The Bestiary's 29 areas: a scrolling list on the left, as SkyCrypt draws it. */
.sc-cat-vertical .sc-cat-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
.sc-cat-vertical .sc-cat-tabs { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 12px; width: auto; margin: 0; max-height: 576px; overflow-y: auto; border-radius: 14px; scrollbar-width: thin; scrollbar-color: var(--sc-green) transparent; }
.sc-cat-vertical .sc-cat-tab { text-align: left; border-radius: 18px; padding: 6px 12px; white-space: nowrap; }
.sc-cat-vertical .sc-cat-panel { max-height: 576px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sc-green) transparent; }
@media (max-width: 800px) {
  .sc-cat-vertical .sc-cat-body { grid-template-columns: 1fr; }
  .sc-cat-vertical .sc-cat-tabs { flex-direction: row; flex-wrap: wrap; max-height: none; }
}

/* ---- Wave 4: Crimson Isle, Rift, Misc ---- */
/* Measured in Task 10 against the captures and SkyCrypt's live page: every
   card 16px padded, 14px round, 16px apart; bold labels with no trailing
   margin; a heading sits straight on its lines (Misc's cards: 8px under);
   catalogue names 16px/24px over 14px/20px lines; a tile keeps its own
   height in a wrapped row; the kill tables 384px wide and 320px tall. */
#Crimson_Isle > .sc-sub, #Rift > .sc-sub, #Misc > .sc-sub { padding: 16px; border-radius: 14px; margin-bottom: 16px; }
#Crimson_Isle .sc-info, #Rift .sc-info, #Misc .sc-info { font-weight: 700; margin: 0; }
#Crimson_Isle .sc-sub > h4, #Rift .sc-sub > h4 { margin: 0; line-height: 28px; }
#Misc .sc-sub > h4 { margin: 0 0 8px; line-height: 28px; }
#Misc .sc-info { gap: 4px 16px; }
#Crimson_Isle .sc-entry-name, #Rift .sc-entry-name, #Misc .sc-entry-name { font-size: 16px; line-height: 24px; }
.sc-sub > .sc-entries { align-items: flex-start; }
.sc-ranks { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.sc-rank-table { flex: 0 1 384px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border: 1.25px solid var(--sc-line); border-radius: 14px; background: rgb(0 0 0 / .5); }
.sc-rank-table h5 { margin: 0; padding: 0 0 4px; text-align: center; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--sc-text); border-bottom: 1px solid var(--sc-green); }
.sc-rank-table ol { list-style: none; margin: 0; padding: 0 16px; max-height: 320px; overflow-y: auto; font-size: 16px; font-weight: 600; line-height: 20px; color: var(--sc-muted); scrollbar-width: thin; scrollbar-color: var(--sc-green) transparent; }
.sc-rank-table b { color: var(--sc-text); font-weight: 600; }

/* ---- Wave 4: Show Stats ---- */
.sc-stats[hidden] { display: none; }
.sc-stat-grid { columns: 4 200px; column-gap: 16px; margin: 0 0 12px; }
/* The hover card is placed against the panel, not the row: a positioned row
   inside the columns made the open card part of the column balance, and
   hovering reflowed the grid under the cursor (Task 10). The card keeps its
   static height, top-aligned in the row, drops 22px (one row) below it, and
   starts at the panel's left edge so a fourth-column card never runs off
   the page. */
.sc-stats { position: relative; }
.sc-stat { display: flex; align-items: center; gap: 6px; break-inside: avoid; font-size: 14px; font-weight: 700; line-height: 22px; white-space: nowrap; outline: none; }
.sc-stat > b { color: var(--sc-text); }
.sc-stat-glyph { width: 16px; text-align: center; }
.sc-stats:not(.show-all) .sc-stat.is-zero { display: none; }
.sc-stat-tip { display: none; position: absolute; left: 0; align-self: flex-start; margin-top: 22px; z-index: 20; flex-direction: column; gap: 4px; width: max-content; max-width: min(560px, 100%); box-sizing: border-box; white-space: normal; padding: 16px; border: 1.25px solid var(--sc-line); border-radius: 14px; background: rgb(20 20 20); font-weight: 400; }
.sc-stat-tip > b:first-child { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.sc-stat-tip b { font-weight: 700; }
.sc-stat-tip > span:not(.sc-stat-sources) > span { font-weight: 600; }
.sc-stat-tip .sc-stat-bonus { border-top: 1.25px solid var(--sc-line); padding-top: 8px; margin-top: 4px; }
.sc-stat:hover .sc-stat-tip, .sc-stat:focus .sc-stat-tip { display: flex; }
.sc-stat-tip small { color: var(--sc-text); font-size: 14px; font-weight: 400; }
.sc-stat-sources > span::before { content: '\2022'; margin: 0 8px 0 4px; }
.sc-stat-sources { display: flex; flex-direction: column; }
.sc-stats-foot { display: flex; gap: 8px; margin: 0 0 12px; }
.sc-stats-foot button { flex: 1; border: 1.25px solid var(--sc-line); border-radius: 26px; background: var(--sc-soft); color: var(--sc-text); height: 36px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; }
@media (max-width: 800px) { .sc-stat-grid { columns: 2 140px; } .sc-stat { white-space: normal; } }

/* ---- The item card, as SkyCrypt draws it (read off sky.shiiyu.moe, 2026-09-27) ----
   Frosted glass with a 14px radius and a hairline border, as wide as its
   content (338px for a short item, ~495px for a long name); a 20px header in
   the rarity colour; 24px of 14px/600 lore; then Color / Obtained / Item Value,
   a blank line apart. listing.js places it 8px beside the tile. */
body.sc .card,
body.sc .card.card-hover {
  width: max-content; min-width: 21rem; max-width: min(31rem, calc(100vw - 16px));
  background: rgb(0 0 0 / .35);
  backdrop-filter: blur(16px) brightness(.5); -webkit-backdrop-filter: blur(16px) brightness(.5);
  border: 1px solid rgb(255 255 255 / .1); border-radius: 14px;
  box-shadow: none;
  /* show() focuses the dialog, and the browser's own focus ring drew a white
     frame SkyCrypt's card does not have. The tile keeps its own focus style. */
  outline: none;
}
body.sc .card-head { justify-content: center; gap: 16px; padding: 20px; font-size: 18px; font-weight: 600; letter-spacing: 0; }
body.sc .card-icon { width: 32px; height: 32px; }
body.sc #card-name[data-multicolor="true"] { background: #171717; border-radius: 999px; padding: 4px 8px; text-shadow: none; }
body.sc .card-lore { background: transparent; padding: 24px 24px 0; font-size: 14px; font-weight: 600; line-height: 20px; }
body.sc .card-foot { background: transparent; border-top: 0; padding: 20px 24px 24px; font-size: 14px; font-weight: 600; }
body.sc .card-foot[hidden] { display: none; }
body.sc .card-lore:has(+ .card-foot[hidden]) { padding-bottom: 24px; }
/* ---- The CLICKED card: SkyCrypt's dialog (read off sky.shiiyu.moe, 2026-09-27) ----
   Centred, 368px, 26px radius, frosted, the page dimmed to 50% black; a 72px
   band in the rarity's dark colour holding the 32px icon and the name in white
   capitals (18px/600); then 24px of 14px/600 lore at 19.25px. Hovering still
   shows the frosted card beside the tile above. */
body.sc .card[data-rarity="common"]       { --rd: #929292; }
body.sc .card[data-rarity="uncommon"]     { --rd: #3cbc3d; }
body.sc .card[data-rarity="rare"]         { --rd: #4343f1; }
body.sc .card[data-rarity="epic"]         { --rd: #a200a2; }
body.sc .card[data-rarity="legendary"]    { --rd: #d99008; }
body.sc .card[data-rarity="mythic"]       { --rd: #e668c6; }
body.sc .card[data-rarity="divine"]       { --rd: #2cadc2; }
body.sc .card[data-rarity="special"],
body.sc .card[data-rarity="very-special"] { --rd: #c43f3e; }
body.sc .card[data-rarity="supreme"]      { --rd: #940306; }
body.sc .card:modal {
  width: 368px; min-width: 0; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem);
  border: 0; border-radius: 26px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}
body.sc .card:modal::backdrop { background: rgb(0 0 0 / .5); }
body.sc .card:modal .card-head { background: var(--rd, #929292); padding: 20px; gap: 16px; min-height: 72px; box-sizing: border-box; text-transform: uppercase; text-shadow: none; }
body.sc .card:modal #card-name,
body.sc .card:modal #card-name span { color: #fff !important; background: none; padding: 0; }
/* 22px on the right, not 24: "Right-click to add this pet to your pet menu!"
   measures 320.2px in this font and SkyCrypt's 320px column fits it on one
   line; ours wrapped it on the extra 0.2px. A blank line is a whole line, as
   SkyCrypt's <br><br> is (ours were 12.6px). */
body.sc .card:modal .card-lore { padding: 24px 22px 0 24px; line-height: 19.25px; }
body.sc .card:modal .lore-line { min-height: 19.25px; }
body.sc .sc-foot-line + .sc-foot-line { margin-top: 20px; }
body.sc .sc-foot-line .foot-label { color: #bfbfbf; }
body.sc .sc-foot-color { color: #fff; }
body.sc .sc-foot-date { color: #f25b52; }
body.sc .sc-foot-coins { color: #f5a623; }
body.sc .sc-foot-short { color: #bfbfbf; }

/* Phone fixes that must come after the desktop rules they override
   (Slayer, floors, Hunting and the rest are declared further down than the
   first mobile block, and at equal specificity the later rule wins). */
@media (max-width: 800px) {
  /* No scroll boxes inside the page: a box that scrolls inside a page that
     scrolls is a trap on a phone. These grow and the page scrolls instead. */
  #Accessories .sc-sub .sc-grid, .sc-floors, .sc-slayers, .sc-hunt-panel, .sc-exp-games, .sc-cat-vertical .sc-cat-panel { max-height: none; overflow-y: visible; }
  #Accessories .sc-sub .sc-grid { padding-right: 0; }
  /* Item tiles closer together, so five accessories fit a row, not four. */
  .sc-grid { gap: 8px; }
  .sc .sc-grid .slot { --slot-size: 52px; width: 52px; height: 52px; }
  /* Slayer: six even columns - with space-around the TIER labels ran together. */
  .sc-slayer-tiers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; padding: 16px 6px 6px; }
  .sc-slayer-tiers span { font-size: 10px; white-space: nowrap; }
  /* Loadouts: one scrolling row, like the section tabs. */
  .sc-loadout-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sc-loadout-pills > * { flex: 0 0 auto; }
}