/* =============================================================================
design-system.css — The Cookie Book's design system: the foundation every
redesigned page builds on
-----------------------------------------------------------------------------
Born on the game-mode build hubs (/arena-teams/, /guild-boss/,
/cookie-alliance/, October 2026) and split out of team-hub.css so the rest of
the site can wear the same design without loading the hubs' components.
design/README.md is the guide (direction, tokens, patterns, the page
playbook); this file is the code.
NAMESPACE. The system kept the hubs' prefix: tokens are --th-*, classes are
th-*, the root is .th. "th" is simply the system's name now.
HOW A PAGE USES IT
page-level rules + the dark shell re-skin
...
the root: tokens, container, wrap, type
Link order: shared-shell.css, design-system.css, then the page's own sheet
(team-hub.css on the hubs). The root is an inline-size container named `th`,
so a component's responsive rules are @container th queries, never viewport
media queries, wherever the component can sit in a narrower column.
WHAT IS HERE (and nothing page-specific is)
0 Fonts (CookieRun KR, both unicode-range halves)
1 Tokens: the ink dark theme, gold, parchment, interaction, fills, the
plate/card/opened-build surfaces, depth, layout, MODE accents (one line
per game mode), ELEMENT and RARITY tones
2 Page: body.th-page + the shell's dark tokens re-pointed to ink
3 Base, root, utilities: the .th root, headings, kicker, label, separators
4 Atoms: buttons, links, tags, switch, segmented control + density
toggle, votes, avatars, author by-line, cookie faces, ornament diamonds
5 The framed page header: gold frame over a blurred picture, the copy
and the emblem, the side panels' shell (moved from team-hub.css)
7 Sections: band heads (kicker, CookieRun name, meta, gold rule, count,
collapse), alternating full-width band strips (.th-bands > .th-band),
collapsed bands, band labels, the honest empty state, Show more
16 Toasts (the always-present aria-live status region)
17 Page-level: band scroll margin, the dashed note, the preview-clock
notice, the route base (font, border-box, route-main/route-footer)
L Light theme: tokens, element tones, literal overrides of the above
Section numbers are team-hub.css's own (that file holds the panels'
contents under 5, then 6, 8-15 and its own L3) so the two read as one sequence.
CHANGING THIS FILE. Every redesigned page links it, so:
- Additive by default: add a token or an atom; never change an existing
value. Changing a token or an atom's look changes every page at once, which
is an owner decision, verified on every page that links this file.
- Page-specific components live in the page's own stylesheet, built from
these tokens. Promote one here only when a second page needs it.
- Every rule leads with .th or body.th-page; every light rule leads with
:root[data-theme="light"] and never changes a border width (CLAUDE.md,
light theme).
- Bump its ?v= with scripts/bump-version-tags.mjs (which cascades to every
page that links it) and SW_VERSION.
========================================================================== */
/* ---------- 0 · fonts ---------- */
/* The site's display face, declared here too so a hub page does not depend on
feature-page.css for it. Two halves, exactly as feature-page.css has them:
the 46KB subset for everything outside CJK, the full font only for CJK
(CLAUDE.md, "CookieRun is TWO @font-face rules"). Same URLs, so a page that
loads both stylesheets downloads each file once. */
@font-face {
font-family: "CookieRun KR";
src: url("/cookie-dex/assets/fonts/CookieRun-Bold-subset.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: U+0000-2FFF, U+E000-F8FF;
}
@font-face {
font-family: "CookieRun KR";
src: url("/cookie-dex/assets/fonts/CookieRun-Bold.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: U+3000-33FF, U+AC00-D7AF, U+FF00-FFEF;
}
/* ---------- 1 · tokens ---------- */
.th {
/* a cookie face's element badge, as a share of the face (owner's call,
2026-10-26: at ~41% it covered the faces of many cookies) */
--th-face-el-scale: 0.3;
/* page + surfaces */
--th-ground: #0a0b0f;
--th-ground-rgb: 10, 11, 15;
--th-ground-hi: #171a24;
--th-abyss-rgb: 4, 5, 8;
--th-surface-1: #14161d; /* rows, toolbar, panels */
--th-surface-2: #1b1e27; /* hover row, open row */
--th-surface-3: #252935; /* wells, chips */
--th-surface-sunk: #0e1015; /* table heads, sunk wells */
--th-glass: rgba(var(--th-ground-rgb), 0.88);
--th-veil: rgba(var(--th-ground-rgb), 0.78);
--th-veil-strong: rgba(var(--th-ground-rgb), 0.96);
--th-line: rgba(255, 255, 255, 0.07);
--th-line-2: rgba(255, 255, 255, 0.12);
--th-line-3: rgba(255, 255, 255, 0.22);
--th-ink: #eceef2; /* 16.9:1 on the ground */
--th-ink-2: #d4d7df;
--th-ink-3: #9ba2b0; /* >= 5.6:1 on every surface */
--th-ink-faint: #5f6676; /* separators only, never copy */
--th-heading: #f8f9fb;
--th-heading-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
--th-text-on-art: 0 1px 0 rgba(0, 0, 0, 0.55);
/* gold: frames, gems, the primary button */
--th-gold: #f0cd7e;
--th-gold-2: #c99b46;
--th-gold-line: rgba(240, 205, 126, 0.45);
--th-gold-faint: rgba(240, 205, 126, 0.16);
--th-gold-glow: rgba(240, 190, 90, 0.45);
--th-gold-fill: linear-gradient(180deg, #ffe39a 0%, #f6b64c 55%, #e8963a 100%);
--th-gold-soft-fill: linear-gradient(180deg, #fff1cb, #efc874);
--th-gold-gem: linear-gradient(135deg, #fff2c8 0%, #f0cd7e 45%, #c99b46 100%);
--th-on-gold: #2a1206;
--th-orn-ring: 0 0 0 2px var(--th-ground), 0 0 10px rgba(240, 205, 126, 0.6);
/* parchment: treasure details */
--th-parch: #fbefd6;
--th-parch-2: #f3e0b8;
--th-parch-line: #e2b866;
--th-parch-ink: #3d2a1a;
--th-parch-ink-2: #8a5210;
/* interaction: a SELECTED option is a plain chip (pale on ink, grape on
light), so gold is left to the primary action alone */
--th-sel-bg: #eceef2;
--th-sel-ink: #14161d;
--th-sel-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
--th-switch-on: #f2b555;
--th-switch-on-edge: transparent;
--th-switch-knob-on: #ffffff;
--th-link: var(--th-gold);
--th-match: var(--th-gold);
--th-focus-ring: 0 0 0 3px rgba(240, 205, 126, 0.42);
--th-focus-color: #f0cd7e;
--th-up: #5fe0a5;
--th-down: #ff9aa0;
--th-dens-ic: var(--th-ink-3);
--th-dens-ic-on: var(--th-sel-ink);
/* buttons are soft pills: a fill that brightens on hover and gives a
little on press, no outline, no bevel (owner's pick, 2026-10-25) */
--th-btn-bg: rgba(255, 255, 255, 0.075);
--th-btn-hover: rgba(255, 255, 255, 0.125);
--th-btn-press: rgba(255, 255, 255, 0.055);
--th-btn-line: transparent;
--th-btn-shadow: none;
--th-btn-icon: #c9ced8;
--th-btn-track: rgba(255, 255, 255, 0.055);
--th-btn-divide: rgba(255, 255, 255, 0.1);
--th-btn-focus: rgba(240, 205, 126, 0.6);
--th-gold-btn: linear-gradient(180deg, #ffd98a 0%, #f4ad4b 100%);
--th-gold-btn-hover: linear-gradient(180deg, #ffe4a6 0%, #f7b95d 100%);
--th-gold-btn-press: linear-gradient(180deg, #f3c26c 0%, #e89c3c 100%);
--th-gold-btn-glow: 0 6px 16px -8px rgba(245, 175, 75, 0.85);
--th-field-bg: rgba(255, 255, 255, 0.04);
--th-wash: rgba(255, 255, 255, 0.02);
--th-track: rgba(255, 255, 255, 0.09);
--th-av-ini: linear-gradient(135deg, #4c5468, #2c3141);
--th-ledge: transparent;
--th-art-drop: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
/* opened build */
--th-ob-1: #181b24;
--th-ob-2: #111319;
--th-veil-rgb: 24, 27, 36;
/* art surfaces: Comfy plates, hub cards, the team plate */
--th-plate-1: #1c2029;
--th-plate-2: #13161d;
--th-plate-edge: rgba(240, 205, 126, 0.5);
--th-plate-ring-rgb: 4, 5, 8;
--th-plate-gem-edge: #0d0f14;
--th-stage-floor-rgb: 3, 4, 7;
--th-card-1: #1a1d27;
--th-card-2: #13151c;
--th-card-veil-rgb: 19, 21, 28;
--th-card-ring-rgb: 4, 5, 8;
--th-card-spot-1: #1e1e24;
--th-card-spot-2: #15151a;
--th-card-spot-ring: #0b0b0f;
--th-team-plate-1: #1e2230;
--th-team-plate-2: #14161e;
--th-sunk-on-art: rgba(var(--th-abyss-rgb), 0.42);
--th-on-art-chip: rgba(10, 11, 16, 0.88);
--th-crown-edge: #0d0f14;
--th-dark-art-face: #171a26;
--th-dark-art-fan: #1a1d2b;
--th-dark-stage-rgb: 12, 14, 22;
/* depth */
--th-shadow-1: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
--th-shadow-2: 0 24px 50px -24px rgba(0, 0, 0, 0.85);
--th-shadow-pop: 0 0 0 3px rgba(var(--th-ground-rgb), 0.9), 0 26px 44px -14px rgba(0, 0, 0, 0.8);
/* layout */
--th-wrap: 1392px;
--th-radius: 14px;
--th-panel-w: 318px;
/* the site header is sticky; the toolbar sticks under it */
--th-sticky-top: calc(var(--tcb-header-height, 64px) + 12px);
/* MODE (default Arena). Re-pointed by the .th-m-* classes below. */
--th-m1: #ff6a4c;
--th-m2: #ffb54a;
--th-m-rgb: 255, 106, 76;
--th-m-ink: #ffb8a4;
--th-m-btn1: #cf4630;
--th-m-btn2: #9c2622;
--th-m-art: url("/assets/arena-landing-page-bg.webp");
/* default element (none) and rarity */
--th-el: 206, 200, 188;
--th-el-band: 0.3;
}
/* MODES: same layout, different accent and art. One line per mode (plus its
light text ink in section L). Each class works on the ROOT (a page about one
mode) and on any element INSIDE a .th root (a tile for one mode on a page
about several - the landing page's directory, 2026-10-26). */
.th.th-m-arena, .th .th-m-arena { --th-m1: #ff6a4c; --th-m2: #ffb54a; --th-m-rgb: 255, 106, 76; --th-m-ink: #ffb8a4; --th-m-btn1: #cf4630; --th-m-btn2: #9c2622; --th-m-art: url("/assets/arena-landing-page-bg.webp"); }
/* Guild Boss: the magenta sigils and cyan flame of its battle art, so it reads
apart from Arena's ember and Alliance's lavender at a glance */
.th.th-m-guild, .th .th-m-guild { --th-m1: #d064ff; --th-m2: #4fd1ff; --th-m-rgb: 208, 100, 255; --th-m-ink: #e7b8ff; --th-m-btn1: #9b3fd6; --th-m-btn2: #5f1f94; --th-m-art: url("/assets/guild%20boss/guild-boss-battles-background.webp"); }
.th.th-m-alliance, .th .th-m-alliance { --th-m1: #9a86ff; --th-m2: #5ec6ff; --th-m-rgb: 154, 134, 255; --th-m-ink: #c9bfff; --th-m-btn1: #6f56e2; --th-m-btn2: #43289e; --th-m-art: url("/assets/cookie-alliance/3-teams.webp"); }
/* The other destinations (first worn by the baked build pages, 2026-10-25).
Hues from each mode's `accent` in assets/js/game-modes.js (events: the
event kind's lavender). No art of their own: a page that has a picture for
its destination (an event's spotlight image) sets it itself, and `none`
keeps Arena's default art off a Story or Cake Towers page. */
.th.th-m-story, .th .th-m-story { --th-m1: #46d37f; --th-m2: #ffcf5a; --th-m-rgb: 70, 211, 127; --th-m-ink: #a8efc6; --th-m-btn1: #23a35a; --th-m-btn2: #136b3b; --th-m-art: none; }
.th.th-m-trial, .th .th-m-trial { --th-m1: #ff7a3d; --th-m2: #ffd166; --th-m-rgb: 255, 122, 61; --th-m-ink: #ffc2a0; --th-m-btn1: #d2541f; --th-m-btn2: #8f3112; --th-m-art: none; }
.th.th-m-nether, .th .th-m-nether { --th-m1: #8a7dff; --th-m2: #ff6fb5; --th-m-rgb: 138, 125, 255; --th-m-ink: #c8c1ff; --th-m-btn1: #5d4fe0; --th-m-btn2: #3a2c9e; --th-m-art: none; }
.th.th-m-cake, .th .th-m-cake { --th-m1: #c47dff; --th-m2: #ff9ac8; --th-m-rgb: 196, 125, 255; --th-m-ink: #e2c2ff; --th-m-btn1: #9246d6; --th-m-btn2: #5e2394; --th-m-art: none; }
.th.th-m-arcade, .th .th-m-arcade { --th-m1: #9fe33a; --th-m2: #41d6ff; --th-m-rgb: 159, 227, 58; --th-m-ink: #cdf29a; --th-m-btn1: #5f9e14; --th-m-btn2: #3a6909; --th-m-art: none; }
.th.th-m-events, .th .th-m-events { --th-m1: #b98cff; --th-m2: #ffb4e1; --th-m-rgb: 185, 140, 255; --th-m-ink: #dcc6ff; --th-m-btn1: #8250e0; --th-m-btn2: #4f2aa0; --th-m-art: none; }
/* ELEMENTS: the site's TRUE element colours, as rgb triplets. Source: the
ELEMENT_COLORS table in www/scripts/convert-cookie-abilities-to-effect-refs.mjs
(the colours the Cookie-Dex paints ability values in) - keep the two in step.
--th-el-band is how strongly the element tints a name banner under white
CookieRun type on the dark plates; the bright hues (Electricity and Light
are both yellow, by the game's design) tint less so the name keeps >= 4.6:1.
ids as the site spells them (darkness, electricity ...); el-none = no element. */
.th .el-chaos { --th-el: 210, 91, 255; --th-el-band: 0.42; }
.th .el-darkness { --th-el: 104, 79, 230; --th-el-band: 0.5; }
.th .el-earth { --th-el: 178, 107, 36; --th-el-band: 0.44; }
.th .el-electricity { --th-el: 242, 202, 18; --th-el-band: 0.27; }
.th .el-fire { --th-el: 233, 87, 53; --th-el-band: 0.44; }
.th .el-grass { --th-el: 0, 179, 116; --th-el-band: 0.4; }
.th .el-ice { --th-el: 49, 205, 236; --th-el-band: 0.3; }
.th .el-light { --th-el: 242, 209, 99; --th-el-band: 0.26; }
.th .el-poison { --th-el: 169, 215, 82; --th-el-band: 0.28; }
.th .el-steel { --th-el: 131, 146, 195; --th-el-band: 0.42; }
.th .el-water { --th-el: 71, 168, 255; --th-el-band: 0.4; }
.th .el-wind { --th-el: 124, 201, 164; --th-el-band: 0.3; }
.th .el-none { --th-el: 206, 200, 188; --th-el-band: 0.24; }
/* RARITY: --th-rc paints portrait edges; --th-rc-ink is the rarity word as
text (light re-points it to deeper inks in section L); --th-rc-rgb is the
same hue as a triplet for washes and stage light, rgba(var(--th-rc-rgb), a).
The hues follow the game's own rarity badges (owner's call, 2026-10-26:
"rarity colors should match the game"): Common is the game's tan, Witch its
magenta, Ancient its violet, Dragon its orange-red, Beast its crimson. Each
edge clears 5:1 on --th-surface-1. */
.th .r-common { --th-rc: #c49769; --th-rc-rgb: 196, 151, 105; }
.th .r-rare { --th-rc: #5fb0ff; --th-rc-rgb: 95, 176, 255; }
.th .r-epic { --th-rc: #f483cf; --th-rc-rgb: 244, 131, 207; }
.th .r-super-epic { --th-rc: #c294ff; --th-rc-rgb: 194, 148, 255; }
.th .r-legendary { --th-rc: #4fdcc9; --th-rc-rgb: 79, 220, 201; }
.th .r-ancient { --th-rc: #a173ff; --th-rc-rgb: 161, 115, 255; }
.th .r-dragon { --th-rc: #f27a4b; --th-rc-rgb: 242, 122, 75; }
.th .r-beast { --th-rc: #ef4b5f; --th-rc-rgb: 239, 75, 95; }
.th .r-witch { --th-rc: #e05cd6; --th-rc-rgb: 224, 92, 214; }
.th .r-special { --th-rc: #ecca62; --th-rc-rgb: 236, 202, 98; }
/* ---------- 2 · page ---------- */
/* The page around the hub reads as the same design: on a .th-page in the DARK
theme the shell's tokens (shared-shell.css) are re-pointed from its violet
night to the ink family, so the site header, menu and footer match. Guarded
by :root:not([data-theme="light"]) - the light theme already is the site's. */
body.th-page { margin: 0; min-height: 100vh; }
:root:not([data-theme="light"]) body.th-page {
--tcb-bg: #0a0b0f;
--tcb-surface: #14161d;
--tcb-surface-strong: #0e1015;
--tcb-ink: #eceef2;
--tcb-ink-soft: #a7adba;
--tcb-ink-faint: #8a91a0;
--tcb-line: #262a35;
--tcb-line-strong: #353a48;
--tcb-shadow: 0 20px 42px rgba(0, 0, 0, 0.5);
--tcb-page-backdrop:
radial-gradient(1200px 520px at 50% -160px, rgba(255, 106, 76, 0.1), transparent 70%),
radial-gradient(1500px 900px at 50% 560px, #171a24 0%, transparent 70%),
#0a0b0f;
--tcb-orb-a: radial-gradient(circle, rgba(120, 128, 150, 0.12) 0, rgba(120, 128, 150, 0) 72%);
--tcb-orb-b: radial-gradient(circle, rgba(120, 128, 150, 0.1) 0, rgba(120, 128, 150, 0) 70%);
background: var(--tcb-page-backdrop);
color: #eceef2;
}
:root:not([data-theme="light"]) body.th-page .bento-header {
background: linear-gradient(180deg, rgba(9, 10, 13, 0.97), rgba(9, 10, 13, 0.82));
}
:root[data-theme="light"] body.th-page {
background: var(--tcb-page-backdrop, #f7f3fd);
}
/* Ad-supported tier list and generated team build pages leave room for side rails. */
body.tier-list-page .th,
body[data-community-build-id] .th.th-bp { max-width: 1000px; }
/* ---------- 3 · base, root, utilities ---------- */
.th {
container: th / inline-size;
position: relative;
box-sizing: border-box;
max-width: var(--th-wrap);
margin: 0 auto;
padding: 0 24px 8px;
color: var(--th-ink);
font: 400 15px/1.5 "Outfit", system-ui, sans-serif;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
}
.th *, .th *::before, .th *::after { box-sizing: border-box; }
.th :is(h1, h2, h3, h4, h5, h6) {
margin: 0;
font-family: "CookieRun KR", "Outfit", sans-serif;
font-weight: 700;
letter-spacing: 0.1px;
line-height: 1.15;
color: var(--th-heading);
text-shadow: var(--th-heading-shadow);
}
.th :is(p, ul, ol, figure, dl, dd) { margin: 0; }
.th :is(ul, ol) { padding: 0; list-style: none; }
.th img { display: block; max-width: none; }
.th a { color: inherit; text-decoration: none; }
.th button { font: inherit; color: inherit; cursor: pointer; margin: 0; }
.th input { font: inherit; color: inherit; }
.th svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.th :is(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--th-focus-color); outline-offset: 2px; }
.th .th-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.th .th-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--th-gold); }
.th .th-kicker::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--th-gold); box-shadow: 0 0 8px var(--th-gold-glow); flex: none; }
.th .th-kicker--plain::before { display: none; }
.th .th-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--th-ink-3); }
.th .th-label--gold { color: var(--th-gold); }
.th .th-dot, .th .th-sep { color: var(--th-ink-faint); padding: 0 6px; }
/* "none" in a table cell is information, so it takes the muted INK, not the
separator tone */
.th .th-nil { color: var(--th-ink-3); }
.th .th-nil--text { color: var(--th-ink-3); font-size: 12.5px; font-style: italic; }
/* a label with a shorter phone form (team-hub-view.js responsiveLabel) */
.th .th-label-short { display: none; }
@media (max-width: 700px) {
.th { padding: 0 16px 8px; }
}
/* ---------- 4 · atoms ---------- */
/* buttons: neutral · gold (primary) · mode · sm · icon */
.th .th-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 17px; border-radius: 999px; border: 1px solid var(--th-btn-line); background: var(--th-btn-bg); box-shadow: var(--th-btn-shadow); color: var(--th-ink); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease; }
.th .th-btn svg { width: 16px; height: 16px; color: var(--th-btn-icon); }
.th .th-btn:hover { background: var(--th-btn-hover); }
.th .th-btn:active { background: var(--th-btn-press); transform: scale(0.97); }
/* the focus ring hugs the pill (an outline follows border-radius, and unlike
a box-shadow it survives forced colours) */
.th :is(.th-btn, .th-seg button, .th-band-toggle, .th-more):focus-visible { outline: 3px solid var(--th-btn-focus); outline-offset: 0; }
.th .th-btn--gold { border-color: transparent; color: var(--th-on-gold); background: var(--th-gold-btn); box-shadow: var(--th-gold-btn-glow); }
.th .th-btn--gold svg { color: currentColor; }
.th .th-btn--gold:hover { background: var(--th-gold-btn-hover); }
.th .th-btn--gold:active { background: var(--th-gold-btn-press); box-shadow: none; }
.th .th-btn--sm { height: 32px; padding: 0 13px; font-size: 13px; gap: 6px; }
.th .th-btn--sm svg { width: 15px; height: 15px; }
.th .th-btn--icon { width: 38px; padding: 0; }
.th .th-btn--sm.th-btn--icon { width: 32px; }
.th .th-btn.is-reported { color: var(--th-ink-3); cursor: default; }
.th .th-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--th-link); }
.th .th-link svg { width: 14px; height: 14px; }
/* tags */
.th .th-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; color: var(--th-ink-2); border: 1px solid var(--th-line-2); background: var(--th-field-bg); flex: none; }
.th .th-tag svg { width: 13px; height: 13px; stroke-width: 2.1; }
.th .th-tag--spot { border-color: transparent; color: #3a2208; background: linear-gradient(180deg, #ffeaa9, #e2a849); box-shadow: inset 0 -1px 0 rgba(120, 70, 10, 0.35); }
.th .th-tag--spot svg { fill: currentColor; }
.th .th-tag--guide { border-color: transparent; color: var(--th-parch-ink); background: linear-gradient(180deg, #fff6e0, #f0dbb0); box-shadow: inset 0 -1px 0 rgba(120, 80, 20, 0.3); }
.th .th-tag--shared { color: var(--th-ink); border-color: var(--th-line-3); }
.th .th-tag--live { color: #fff; border-color: rgba(var(--th-m-rgb), 0.75); background: rgba(var(--th-m-rgb), 0.26); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.th .th-tag--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ffe2d6; box-shadow: 0 0 8px var(--th-m1); }
.th .th-tag--season { color: var(--th-m-ink); border-color: rgba(var(--th-m-rgb), 0.45); background: rgba(var(--th-m-rgb), 0.12); }
.th .th-tag--quiet { border-style: dashed; color: var(--th-ink-3); background: none; font-weight: 600; }
.th .th-tag--onart { background: var(--th-on-art-chip); color: var(--th-ink-2); border-style: solid; }
/* a boss's build names its boss */
.th .th-tag--ctx { padding-left: 3px; color: var(--th-m-ink); border-color: rgba(var(--th-m-rgb), 0.45); background: rgba(var(--th-m-rgb), 0.12); }
.th .th-tag--ctx.th-tag--onart { background: var(--th-on-art-chip); }
.th .th-tag-ic { width: 16px; height: 16px; border-radius: 5px; object-fit: cover; flex: none; }
/* switch: a real checkbox; the knob reads its :checked state */
.th .th-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 4px; font-size: 13.5px; font-weight: 600; color: var(--th-ink-2); white-space: nowrap; cursor: pointer; }
.th .th-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.th .th-switch-knob { position: relative; width: 36px; height: 21px; border-radius: 999px; background: var(--th-btn-hover); border: 1px solid transparent; flex: none; transition: background-color 0.15s ease; }
.th .th-switch-knob::after { content: ""; position: absolute; top: 1px; left: 1px; width: 17px; height: 17px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transition: left 0.15s ease; }
.th .th-switch input:checked + .th-switch-knob { background: var(--th-switch-on); border-color: var(--th-switch-on-edge); }
.th .th-switch input:checked + .th-switch-knob::after { left: 16px; background: var(--th-switch-knob-on); }
.th .th-switch input:focus-visible + .th-switch-knob { outline: 3px solid var(--th-btn-focus); outline-offset: 1px; }
/* segmented control (Sort) and the density toggle (View) */
.th .th-seg-group { display: inline-flex; align-items: center; gap: 8px; }
.th .th-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--th-btn-track); border: 1px solid transparent; }
.th .th-seg button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--th-ink-3);; transition: color 0.15s ease, background-color 0.15s ease; }
.th .th-seg button:hover { color: var(--th-ink); }
.th .th-seg button[aria-pressed="true"] { color: var(--th-sel-ink); background: var(--th-sel-bg); box-shadow: var(--th-sel-shadow); }
.th .th-seg svg { width: 15px; height: 15px; }
/* the density icons: inactive = muted ink, active = on the selected fill */
.th .th-seg--density .th-dens-ic { width: 20px; height: 20px; color: var(--th-dens-ic); stroke-width: 1.9; }
.th .th-seg--density button[aria-pressed="true"] .th-dens-ic { color: var(--th-dens-ic-on); }
.th .th-dens-ic .df { fill: currentColor; stroke: none; }
.th .th-dens-ic .dt { stroke-width: 1.5; }
/* votes (the opened build's control) */
.th .th-votes { display: inline-flex; height: 38px; border-radius: 999px; border: 1px solid var(--th-btn-line); background: var(--th-btn-bg); box-shadow: var(--th-btn-shadow); overflow: hidden; flex: none; }
.th .th-votes button { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px 0 11px; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--th-ink-2); }
.th .th-votes button + button { border-left: 1px solid var(--th-btn-divide); }
.th .th-votes button:hover { background: var(--th-btn-bg); }
/* the pair clips its children, so a vote's focus ring is drawn inside it */
.th .th-votes button:focus-visible { outline: 2px solid var(--th-btn-focus); outline-offset: -3px; }
.th .th-votes svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 1; }
.th .th-votes .th-v-up svg { color: var(--th-up); }
.th .th-votes .th-v-dn svg { color: var(--th-ink-3); }
.th .th-votes .th-v-up[aria-pressed="true"] { color: var(--th-up); background: rgba(95, 224, 165, 0.12); }
.th .th-votes .th-v-dn[aria-pressed="true"] { color: var(--th-down); background: rgba(255, 154, 160, 0.12); }
.th .th-votes .th-v-dn[aria-pressed="true"] svg { color: var(--th-down); }
/* avatars */
.th .th-av { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; overflow: hidden; font-size: 11.5px; font-weight: 700; line-height: 1; }
.th .th-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th .th-av img.is-missing { display: none; }
.th .th-av-ini { color: var(--th-ink); }
.th .th-av--sm { width: 18px; height: 18px; font-size: 11px; }
.th .th-av--md { width: 20px; height: 20px; font-size: 11px; }
.th .th-av--lg { width: 34px; height: 34px; font-size: 14px; }
.th .th-av--ini, .th .th-av:has(img) { color: var(--th-ink); background: var(--th-av-ini); border: 1px solid rgba(255, 255, 255, 0.2); }
.th .th-av--ph { color: var(--th-ink-3); background: rgba(255, 255, 255, 0.07); border: 1px dashed var(--th-line-3); }
.th .th-av--creator { border: 1.5px solid #f3d590; box-shadow: 0 0 8px rgba(240, 205, 126, 0.5); }
.th .th-by { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.th .th-by-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--th-ink-2); font-weight: 600; }
.th a.th-by-name:hover { text-decoration: underline; }
.th .th-by-name.is-unknown { color: var(--th-ink-3); font-style: italic; font-weight: 500; }
.th .th-seal { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-gold); border: 1px solid var(--th-gold-line); flex: none; }
/* face: a square portrait. Sizes 24 · 28 · 32 · 40 (default) · 44. The rarity
paints the bottom edge; the element badge sits bottom-right; a near-black
crop (.is-dark-art) is drawn from the full-body art over its element glow;
.is-filter-match rings the cookies the toolbar filter matched. */
.th .th-face { position: relative; isolation: isolate; display: inline-block; flex: none; width: 40px; height: 40px; border-radius: 9px; background: var(--th-surface-3); }
.th .th-face > .th-face-img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.th .th-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -2.5px 0 var(--th-rc, transparent); }
.th .th-face-ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--th-ink-3); visibility: hidden; }
.th .th-face:has(img.is-missing) .th-face-ini { visibility: visible; }
.th .th-face img.is-missing { opacity: 0; }
/* the element badge is a share of the face at every size, so one number sizes
it everywhere; a third of it hangs outside the corner, and it sits ABOVE the
face's ::after ring and rarity edge, which paint after it otherwise */
.th .th-face-el { position: absolute; z-index: 1; right: calc(var(--th-face-el-scale) * -30%); bottom: calc(var(--th-face-el-scale) * -30%); width: calc(var(--th-face-el-scale) * 100%); height: calc(var(--th-face-el-scale) * 100%); min-width: 9px; min-height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--th-surface-1); }
.th .th-face--24 { width: 24px; height: 24px; border-radius: 6px; }
.th .th-face--28 { width: 28px; height: 28px; border-radius: 7px; }
.th .th-face--32 { width: 32px; height: 32px; border-radius: 8px; }
.th .th-face--44 { width: 44px; height: 44px; border-radius: 10px; }
.th .th-face-crop { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
/* the full-body art at a fixed 2.5 frames wide, its face (--th-hx/--th-hy, a
share of the art's own width and height, from HERO_ART_FOCUS) moved to the
frame's centre: placed at the centre, then pulled back by that share of
itself, which holds whatever the art's proportions */
.th .th-face-hero { position: absolute; width: 250%; max-width: none; left: 50%; top: 50%; transform: translate(calc(-1 * var(--th-hx, 50%)), calc(-1 * var(--th-hy, 30%))); filter: drop-shadow(0 0 1px rgba(236, 228, 255, 0.9)); }
/* a focused portrait (SQUARE_ART_FOCUS in team-hub-view.js): scaled about the
face's centre (--th-fx/--th-fy) by --th-fz and moved to the frame's centre,
inside the crop so the element badge can still hang outside the corner. The
round fan head in team-hub.css reads the same three properties. */
.th .th-face-crop > .th-face-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.th .th-face.has-art-focus .th-face-img { transform-origin: var(--th-fx) var(--th-fy); transform: translate(calc(50% - var(--th-fx)), calc(50% - var(--th-fy))) scale(var(--th-fz)); }
.th .th-face.is-dark-art { background: radial-gradient(circle at 50% 42%, rgba(var(--th-el), 1) 0%, rgba(var(--th-el), 0.55) 45%, var(--th-dark-art-face) 100%); }
.th .th-face.is-dark-art::after { box-shadow: inset 0 0 0 1px rgba(var(--th-el), 0.9), inset 0 -2.5px 0 var(--th-rc, transparent); }
.th .th-face.is-filter-match { outline: 2px solid var(--th-match); outline-offset: 2px; }
.th .th-face--hole { background: none; border: 1.5px dashed var(--th-line-3); }
.th .th-face--hole::after { display: none; }
.th .th-orn { position: absolute; z-index: 3; width: 9px; height: 9px; transform: rotate(45deg); background: var(--th-gold); box-shadow: var(--th-orn-ring); }
.th .th-orn--tl { top: -5px; left: 40px; }
.th .th-orn--tr { top: -5px; right: 40px; }
/* ---------- 5 · the framed page header ---------- */
/* The strongest "this is the new site" signal: a gold-framed panel over a
picture (blurred and veiled), the page's art breaking out of it, the kicker,
a CookieRun title, a lede, facts, the primary CTAs, and up to two side
panels. Built on the hubs (team-hub.css section 5) and promoted here
2026-10-26 when the tier lists became its second user; moved VERBATIM, so
the hubs did not move a pixel. Markup: