/* app-rank.css — POINTS, THE ASCENT rank tiers and the AWARDS v2 six-band ladder.
⚖ ONE STYLESHEET, TEN PARTS, AND THE ORDER IS THE CASCADE. This was web/app.css, a single
5,357-line file, until the 2026-08-05 split (it held lines 852-1545). The parts must be
linked in this order on every page:
app.css → app-rank.css → app-curation.css → app-moderation.css → app-profile.css → app-feeds.css → app-tagrows.css → app-skins.css → app-builder.css → app-viewer.css
That is not tidiness, it is the specificity tie-break: two rules of equal weight are
resolved by which one comes LAST, and this file's own sections rely on it — "THE LAST WORD
ON MODIFIER VERBS" (in app-viewer.css) says in its heading that it must be the final say.
Re-ordering the tags re-orders the cascade and changes what the site looks like,
silently, on whichever surface the tie mattered. server/tests/cssparts.test.js pins the
order on all 18 pages.
⚠ The xp-*.css files load AFTER every part, exactly as they loaded after the whole of
app.css before. Do not insert a part below them. */
/* =====================================================================
POINTS — the account rail + the juice. ⚑ THE RAIL IS A COLUMN, NOT A
FLOATING CARD (owner ruling 2026-09-01, measured at 1998x1186: the
dossier hung mid-air on the right with 290px of empty viewport above
it). At RAIL_BP the .rail-slot track is a VISIBLE STRIP flush with the
viewport's right edge, running from the bottom of the masthead to the
bottom of the viewport; the dossier sits at the TOP of it and the space
under it is deliberately empty for now. Below the breakpoint the whole
strip is media-queried away and the header score chip takes over.
⚖ AND IT PUBLISHES ITS FOOTPRINT AS `--rail-w`, which is the other half
of the ruling: a surface that spans the window (web/clubs.css) reserves
the strip with `padding-right: var(--rail-w, 0px)` instead of guessing.
The token is declared ONLY inside the RAIL_BP block, so `var(--rail-w,
0px)` is 0 at every width where there is no strip. Pages still on the
centered 1200px column (.wrap's margin:0 auto) are unmoved: the strip
stands in blank space they were never using. All motion honors
prefers-reduced-motion (instant number, no dot/floater/flash).
RAIL_BP breakpoint math (content is .wrap, max-width:1200):
free space per side = (VW - 1200) / 2
strip footprint = PAD(16) + RAIL_W(260) + PAD(16) = 292 = --rail-w
need (VW-1200)/2 >= 292 -> VW >= 1784 -> breakpoint set at 1800px
(a clean round number just past the exact threshold, so the strip's
left edge always clears the content's right edge with >=16px to spare)
===================================================================== */
.rail{display:none} /* off by default; shown on wide only */
.rail-slot{display:none}
/* ⚖ 44px OF CHIP, 23px OF DRAWN CHIP (forage-cgy) — docs/DECISIONS.md "The masthead's hit area is 44px and its drawn chrome is not". Both chips were 23px on 19 surfaces, roughly half the floor, on the bar every screen carries; and they are deliberately QUIET 11px furniture, so the answer is not louder type. The BOX takes --tap-min, the hairline moves to a ::after band of the height it always had, and an equal negative margin-block hands the growth back to the row — the drawn chip, the bar's height and --rail-clear are all unmoved at every width. .navburger (app.css) and .cas-door (casino.css) carry the same three lines. ⚠ The border STAYS on the element as `transparent`: it is 1px of the chip's width on each side, and dropping it would move the text. ⚠ AND THE BAND NEEDS `box-sizing:border-box` (forage-s2g, 2026-08-20): app.css's `*` default DOES NOT MATCH PSEUDO-ELEMENTS, so `height:23px` + a 1px border drew **25px** and "the drawn chip is unmoved" was false by 2px on every surface carrying the bar. */
.scorechip{--band:23px;display:inline-flex;align-items:center;gap:5px;margin-left:6px;position:relative;min-height:var(--tap-min);min-width:var(--tap-min);margin-block:calc((var(--band) - var(--tap-min)) / 2);
padding:2px 8px;border:1px solid transparent;color:var(--accent);
letter-spacing:calc(.08em * var(--track));font-size:11px;vertical-align:middle;text-decoration:none;cursor:pointer}
.scorechip::after,.coinchip::after{content:"";position:absolute;left:-1px;right:-1px;top:50%;height:var(--band);transform:translateY(-50%);box-sizing:border-box;border:1px solid var(--hair-hi)}
.scorechip:hover::after{border-color:var(--accent)}
/* ═══ ONE COLUMN OF NUMBERS, AND THE RUN BESIDE IT (owner sketch 2026-08-26) ════════════════
Owner: *"we stack score and coins vertically and add the arcade info in the middle while
applicable"*, and then, correcting a first build that made them two separate columns:
*"no, coins and score sit on top of each other, symbol to the left."*
So `.numstack` is ONE object holding both links — COINS on top, SCORE under it — and each
line keeps the shape it always had, `mark · number` reading left to right. The bar is
`brand · [arcade column] · [numstack] · menu`.
⚖ WHY A STACK IS NARROWER THAN A ROW, which is the whole reason a third thing fits on a
390px bar at all: side by side the two chips cost the SUM of their widths plus the gap
between them; stacked they cost the WIDER OF THE TWO. Measured on the real bar at 390 with
19,455 coins that is 81 + 8 + 63 = 152px against 82px. ⚠ An edit that puts these two back
on one line has spent the room the arcade column is standing in.
⚠ THE 44px TAP FLOOR CANNOT SURVIVE TWO STACKED LINKS AND THIS IS THE HONEST ACCOUNTING.
docs/DECISIONS.md "The masthead's hit area is 44px and its drawn chrome is not" (forage-cgy)
gave each chip a --tap-min BOX with the drawn pill as a ::after band and a negative
margin-block handing the growth back to the row. That trick works for ONE link in a row: the
oversized box overlaps the bar's own padding, which is dead space. Two links stacked would
overlap EACH OTHER by 20-odd px, and in an overlap the later element takes the tap — so
half of the purse's target would silently belong to the score. What each row takes instead
is every pixel it can have WITHOUT overlapping its neighbour: the top row grows UPWARD into
the masthead's top padding, the bottom row DOWNWARD into its bottom padding, each handing
the growth back with a negative margin exactly as forage-cgy does. Measured at 390 that is
23px for coins and 26px for score, against a 44px floor — the real cost of the merge, and it
is a layout consequence rather than a choice about type. ⛔ Do not "fix" it by giving either
row `min-height:var(--tap-min)`: that is the overlap, and it makes one target a lie.
⚠ SCOPED TO `.masthead` BECAUSE `.coinchip` ALSO RIDES THE CASINO BAR (`header.cas-mast`,
casino.css), where it is the ONE archive control and has no score to stack with. The floor's
purse is untouched; the base rules above are still the ones it wears. */
/* ⚠ NO VERTICAL PADDING, AND THAT IS 4px OF THE BAR'S HEIGHT. Two lines are taller than one no
matter what, so every pixel here is one the whole site carries above the fold on every screen:
measured at 390, the stack with 2px of padding put the masthead at 58.3 against today's 53, and
without it the bar comes back to 54.3. The rows already own their own breathing room — they
grow into the bar's padding for the tap area (below) — so this was space paid for twice.
⚖ AND NO BORDER EITHER, AS OF 2026-08-26 (owner, on the shipped bar: *"can we hide the box
around everything up top aside from MENU"*). A census of every painted enclosure under
`.masthead` — border, ::after band, box-shadow ring and outline, on every node and both
pseudos, at 390 and 1280 — found exactly one box around a readout, and it was this one. What
is deliberately still drawn: `.navburger::after` (the MENU box he kept), the bar's own bottom
rule, the volume slider's track, the drawer panel's edge and its form fields, and the arcade
badge's HEAT GLOW, which is a blurred shadow with no border and is a readout, not a box.
⚠ THE SIDE PADDING STAYS AND IS NOW LOAD-BEARING. It was breathing room inside a box; with
the box gone it is the only thing holding the coins number off the arcade column beside it —
7px here plus the row's own 8px gap. ⛔ Do not "clean it up" as leftover box padding. */
.numstack{display:flex;flex-direction:column;align-items:stretch;gap:0;position:relative;
padding:0 7px}
/* ⚠ ONE BOX AROUND THE PAIR, NOT TWO. Each chip drew its own 23px hairline band when they were
two separate objects on the row; stacked, two bands read as a ladder and say the opposite of
what the sketch says, which is that this is one column. The band moves to the stack. */
.masthead .scorechip,.masthead .coinchip{--band:0px;min-height:0;min-width:0;margin:0;
padding:0;border:none;letter-spacing:0;gap:5px}
.masthead .scorechip::after,.masthead .coinchip::after{content:none}
/* ⚠ THE MARKS KEEP THEIR OWN SIZES AND SHARE A 16px SLOT. They are deliberately different (16
vs 11, measured ink — the note below) and neither may be resized: `.scoremark`'s 16px is the
box `.pointdot` flies in, `.coinmark`'s 11px is what made the two read as equals. Margin, not
width, is what lines the two NUMBERS up under each other. */
.numstack .coinchip .coinmark{margin-inline:2.5px;vertical-align:0}
/* COINS ON TOP, QUIET; SCORE UNDER IT, BIG — the sketch's own hierarchy (`20,000` small over
`3,780` large). 11px is the furniture size this bar has always used. */
.numstack .coinchip{font-size:11px}
.numstack .coinchip-n{font-size:11px;line-height:1.2}
.numstack .scorechip-n{font-size:14px;line-height:1.15}
/* the tap area, taken out of the bar's padding rather than out of the other link (see above) */
.numstack .coinchip{padding-top:8px;margin-top:-8px}
.numstack .scorechip{padding-bottom:8px;margin-bottom:-8px}
/* ⚠ HOVER AND FOCUS WERE BOTH RIDING CHROME THAT NO LONGER EXISTS, AND ONE OF THEM WAS ALREADY
BROKEN BEFORE HE ASKED. Hover was `border-color` on the box (and, before that, on each chip's
::after band). Focus is the serious half: app.css turns the site's own `:focus-visible` ring
OFF for these two links and re-draws it on `.scorechip::after` / `.coinchip::after` — and the
masthead set those bands to `content:none` when the chips became a stack, so from 81b9eaa
until now THERE HAS BEEN NO VISIBLE KEYBOARD FOCUS on the purse or the score in this bar.
Measured, not deduced: `outlineStyle:none` on both while `:focus-visible` matched.
⚖ SO THE RING COMES BACK ONTO THE ELEMENT, which is what the site does everywhere else
(app.css `:focus-visible`), and hover becomes an UNDERLINE ON THE NUMBER — the idiom
`.rail-score` already uses for exactly this thing: the same score, drawn bare with no box, on
the wide-screen rail. The mark is left out of the underline: a rule under an SVG reads as a
glitch, and the number is the word here. */
.numstack .scorechip:hover .scorechip-n,.numstack .coinchip:hover .coinchip-n{
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.masthead .scorechip:focus-visible,.masthead .coinchip:focus-visible{
outline:1px solid var(--accent);outline-offset:1px}
/* ═══ THE ARCADE COLUMN — the live run, in the middle of the bar ══════════════════════════════
Three lines, top to bottom: the MULTIPLIER, the run SCORE, and the countdown. The reasoning,
and the floating pill this replaces, are at mountArcadeHud() in web/common-points.js.
⚠ ABSENT, NOT EMPTY, BETWEEN RUNS — `display:none` until arcadeHudSync() adds `.on`. "An idle
run is not a readout, it is litter", and at rest the bar is a clean two-column bar with no gap
held open for a number that is not there.
⚠ NO HIT AREA, ON PURPOSE. Its neighbour is a pair of LINKS fighting for a tap floor
(`.numstack` above); this is `pointer-events:none` — there is nothing to tap — so it draws
its lines and takes no box beyond them. It is also deliberately no TALLER than the stack
beside it, which is what keeps the bar exactly as tall during a run as it is at rest.
⚠ `position:relative` IS LOAD-BEARING AND IS THE THIRD LINE. `.mb-fill` — the run's 10-minute
chain countdown — is absolutely positioned at `bottom:0;left:0` inside `.multbadge`, and the
flat badge below is deliberately `position:static` so the fill measures itself against THIS
box instead: a 2px rule draining right-to-left along the foot of the whole column. The meter
has no minutes-remaining NUMBER to print (armCountdown drives a width transition, not a
clock), so the countdown is drawn as the countdown rather than invented as a numeral. */
/* ⚠ 30px IS "NO TALLER THAN THE STACK BESIDE IT", MEASURED. Its three lines come to 28px of
ink; the height is fixed rather than shrink-wrapped so the countdown rule has a foot to sit on
at every multiplier width — and fixed AT the neighbour's height so that starting a run cannot
grow the masthead. If `.numstack` ever changes size, this number is the one that follows it. */
.arcadecol{display:none;flex-direction:column;align-items:center;justify-content:center;
position:relative;height:30px;padding:1px 5px;pointer-events:none}
.arcadecol.on{display:inline-flex}
/* ⚠ SCORE AND COINS MUST NOT LOOK ALIKE (owner ask 2026-08-05: *"coins and points need more distinct icons"*). THREE axes, because any one alone fails at 10px on a phone: SHAPE (a sparkle vs a ring),
COLOUR (accent amber vs the paler coin gold), SKIN (this rides currentColor and repaints — maroon under yotsuba; the coin is hardcoded gold in every skin, because money is gold). ⚖ TWO MORE WERE
TRIED AND ARE SPENT. RENDER (typed glyph vs drawn object) died when score was drawn too (2026-08-09). RELIEF (flat vs lit dome) lasted ONE AFTERNOON: the coin was drawn as a shaded sphere
2026-08-19 and overruled at 5x the same day — *"we can't have icons with gradients and multiple colors then another as a single color."* ⛔ EVERY MARK HERE IS FLAT, ONE COLOUR. Hue and silhouette.
⚠ AND SCORE'S BOX IS 16px, NOT 13 — it moves WITH `.pointdot` below or every flying score lands half a box off the chip. The mark is the TWINKLE PAIR as of 2026-08-19 (owner pick, "for now") and a
star is mostly air: measured as summed alpha at true rendered size, the pair carries 48.1 ink at 16px against the flat coin's 55.9 at 11 — the same 86-89% of the purse the stripe held at 13. At
13px the pair is 30.7 and its small spark rounds off to a blob. Full ink ladder and the geometry: the SCORE MARK comment in common-icons.js. Changing the shape means re-measuring both numbers. */
.scoremark{width:16px;height:16px;display:block;flex:0 0 auto;fill:currentColor;color:var(--accent-deep)}
/* ⚖ AND THE COIN'S BOX SITS BESIDE IT: as of 2026-08-19 the two marks are ONE STANDARD (owner ask
*"the coin and score icons are different styles"* — the purse was a CSS gradient disc here and a
typed U+25C9 on five other surfaces). Both are svgs from common-icons.js, boxed here, carrying no
size of their own. PAINT is the one thing they do NOT share: the sparkle rides --accent via
currentColor, the coin's single gold literal is in its geometry where no skin reaches it — and
NOTHING HERE MAY OVERRIDE IT; a fill: on .coinmark hands the skin a way in. 11px vs 13 is optical:
a round mark fills its box where two bars are mostly air (measured). ⚠ inline-block+vertical-align
so ONE rule serves the flex chips AND the casino's display numbers, re-boxed in `em` to track it.
⚠ /wallet is NOT in that list any more: `.pns-wallet-coin` (app-screens.css) sizes its instance. */
.coinmark{width:11px;height:11px;display:inline-block;vertical-align:-1px;flex:0 0 auto}
.cas-balance .coinmark,.tnt-potn .coinmark{width:.66em;height:.66em;vertical-align:-.04em;margin-right:.04em}
/* ⚖ THE COINS NUMBER IS GOLD, THE SCORE NUMBER IS NOT (owner 2026-08-26, on the stacked bar:
*"perhaps we also color the coins numbers as the same gold?"*). ⚠ THIS STRENGTHENS "SCORE AND
COINS MUST NOT LOOK ALIKE" RATHER THAN DECORATING IT. That ruling wanted three axes — shape,
colour, skin — and stacking the two links into one column had quietly spent two of them: the
rows sat one above the other in the same white, differing only by the mark at the far left.
Colouring the number moves the difference into the widest, brightest thing in each row, which
is the part a thumb actually reads. The score keeps `--bright`: it is the identity number, and
two golds would put the axes back where they were.
⚠ `--coin-ink`, NOT `--gold` DIRECTLY (app.css). Money is gold on the casino's own dark chrome
at 8.75:1, but this number is text on the PAGE, and on the two light skins the same gold
measures 2.23:1 (yotsuba) and 2.01:1 (yotsuba-b) — below the 4.5:1 floor and worse than the
two failures fixed on 2026-08-26. Those skins move the ink and nothing else; every dark skin
uses the money colour unchanged. ⛔ Do not collapse the two tokens back together. */
.scorechip-n{color:var(--bright);font-variant-numeric:tabular-nums;display:inline-block}
.coinchip-n{color:var(--coin-ink);font-variant-numeric:tabular-nums;display:inline-block}
/* ⚠ THE FLOOR'S OWN BAR IS SKIN-PROOF, SO IT KEEPS THE MONEY COLOUR. `.cas-mast` (casino.css)
paints a hardcoded `linear-gradient(180deg,#15120c,#0e0c08)` whatever the skin says, and the
SAME purse element rides it (casSettle updates it by id). A light skin's darkened ink would be
dark gold on near-black there — the floor broken in the other direction. */
.cas-mast .coinchip-n{color:var(--gold)}
/* ---- the dossier (RAIL_W=260). .rail-slot is a fixed, VISIBLE vertical
STRIP, --rail-w (292px) wide and flush with the viewport's right edge
(right:0), running from the bottom of the masthead down to the bottom
of the viewport. Its top is `--rail-clear - 16px` because --rail-clear
is the masthead's real rendered height PLUS a 16px gap (common.js
renderHeader(), measured off the live bar so no number here can drift)
and the strip's own 16px padding is that gap — so the strip's edge sits
flush under the masthead and its CONTENT still starts 16px below it.
⚑ align-items:safe center IS GONE (owner ruling 2026-09-01): the card
sits at the TOP of the strip (flex-direction:column + align-items:
stretch + flex:0 1 auto) and the room under it is deliberately empty.
The internal scroll stays, so a dossier taller than the strip scrolls
INSIDE it (max-height:100%, overflow-y:auto on .rail) rather than
climbing over the masthead. The plate is the same translucent
rgba(0,0,0,.55) `.wrap.pagecol::before` (app.css:396) and
`.sc-life::before` (clubs.css) paint — the background logo stays
visible through it. See RAIL_BP math above. */
@media(min-width:1800px){.scorechip{display:none}
/* the strip's footprint, published for the surfaces that reserve it (web/clubs.css).
⛔ DECLARED ONLY HERE, INSIDE THE BREAKPOINT: every reader spells `var(--rail-w, 0px)`,
so below RAIL_BP the reservation is exactly zero and the phone pays nothing. */
:root{--rail-w:292px}
.rail-slot{display:flex;flex-direction:column;align-items:stretch;
position:fixed;right:0;bottom:0;top:calc(var(--rail-clear, 66px) - 16px);
width:var(--rail-w);padding:16px;pointer-events:auto;z-index:var(--z-chrome);
border-left:1px solid var(--hair-hi);background:rgba(0,0,0,.55)}
.rail{display:block;width:100%;max-height:100%;flex:0 1 auto;
overflow-y:auto;overscroll-behavior:contain;
border:1px solid var(--hair-hi);background:var(--panel);padding:16px 15px 14px;
box-shadow:0 0 0 1px var(--void),0 8px 30px rgba(0,0,0,.5)}
body.is-profile .rail-slot{display:none} /* the /profile page IS the dossier; no double */
}
/* the dossier as a full page (narrow home of the rail) */
.dossier-page{max-width:340px;margin:6vh auto 0;border:1px solid var(--hair-hi);
background:var(--panel);padding:20px 18px 16px;
box-shadow:0 0 0 1px var(--void),0 8px 30px rgba(0,0,0,.5)}
/* avatar — a live post's thumb, center-cropped square; fallback = shred mark */
.dsr-avatar{width:96px;height:96px;border:1px solid var(--hair-hi);background:var(--sunk);
margin:2px auto 12px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.dsr-avimg{width:100%;height:100%;object-fit:cover}
.dsr-avfallback{width:58%;height:58%;object-fit:contain;filter:invert(1);opacity:.16}
.dsr-id{text-align:center;margin-bottom:4px}
.rail-user{font-size:12px;letter-spacing:calc(.1em * var(--track));color:var(--bright);font-weight:700;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* rail v2: the rank unit's tier NAME carries the rank-up type-in cursor (was .rail-rank) */
.rail .sig-name.typing::after{content:"_";color:var(--accent);animation:railcursor .7s steps(1) infinite}
@keyframes railcursor{50%{opacity:0}}
/* ================= THE ASCENT — rank tier colors + escalating glow =================
.rk- paints a rank NAME or a username in its tier color + effect. Applied on
the dossier rail-rank, the score chip, the profile sigil, the leaderboard, and
EVERY username (userLink) — a user's rank follows them across the whole site.
⚠ EACH TIER IS ALSO WRITTEN `.ulink.rk-` (0,2,0) AND THAT HALF IS LOAD-BEARING, not a
typo or a tidy-up: `.ulink{color:var(--accent)}` in app-profile.css loads LATER and beats a
one-class ladder rule, so a username would paint flat accent. Full note there (forage-fk5). */
/* ⚖ LURKER READS `--faint`, NOT ITS OWN HEX (forage-os0n, 2026-08-25). The tier shipped
`#5c646f` — the EXACT value the owner already retired from `--faint` on 2026-08-19 for being
2.92:1 ("The quiet still has to be readable", docs/archive/DECISIONS.md) — and the rank pip
beside a lurker's name measured 3.29:1 on `--void` against this repo's 4.5:1 floor. The token
already carries the smallest lightness-only move that clears it, so the bottom tier borrows the
floor value instead of keeping a second copy of a colour that lost. Terminal: 5.12:1 on
`--void`. ⚠ THE TIER STILL READS AS THE QUIETEST — `--faint` sits below `--dim` and well below
`.rk-slave`'s `#8892a2` (6.26:1), so the ladder's order survives the raise. Light skins keep
their own `.rk-lurker` correction in app-skins.css and are untouched. */
.rk-lurker,.ulink.rk-lurker {color:var(--faint)}
.rk-slave,.ulink.rk-slave {color:#8892a2}
.rk-denizen,.ulink.rk-denizen {color:#c8cdd4}
.rk-citizen,.ulink.rk-citizen {color:#56b6d8; text-shadow:0 0 9px rgba(86,182,216,.4)}
.rk-freeman,.ulink.rk-freeman {color:#5fc46b; text-shadow:0 0 9px rgba(95,196,107,.45)}
.rk-noble,.ulink.rk-noble {color:#eda733; animation:rk-pulse 3.2s ease-in-out infinite}
.rk-royalty,.ulink.rk-royalty {color:#c08cf0; animation:rk-pulse 3.2s ease-in-out infinite}
.rk-demonic,.ulink.rk-demonic {color:#ff3b3b; text-shadow:0 0 11px rgba(255,59,59,.65); animation:rk-flicker 3s steps(1) infinite}
.rk-divine,.ulink.rk-divine {color:#ffe6a3; text-shadow:0 0 16px rgba(255,224,150,.65),0 0 34px rgba(255,224,150,.28); animation:rk-breathe 3.6s ease-in-out infinite}
.rk-celestial,.ulink.rk-celestial{
background:linear-gradient(90deg,#7fefff,#b79bff,#ffd98a,#8affd1,#7fefff);
background-attachment:scroll;background-size:var(--prism-span);background-position:var(--sheet-pos,0 0);
-webkit-background-clip:text; background-clip:text; color:transparent;
filter:drop-shadow(0 0 10px rgba(150,200,255,.5))}
/* username links keep their tier color on hover (don't fall back to a{--bright}) */
.ulink.rk-lurker:hover{color:#7b8492}.ulink.rk-slave:hover{color:#a7b0be}.ulink.rk-denizen:hover{color:var(--bright)}
.ulink.rk-citizen:hover{color:#7fd0ec}.ulink.rk-freeman:hover{color:#84e08e}.ulink.rk-noble:hover{color:#ffc24d}
.ulink.rk-royalty:hover{color:#d3aef5}.ulink.rk-demonic:hover{color:#ff6b6b}.ulink.rk-divine:hover{color:#fff3cf}
/* ⚖ A CLIPPED SPECTRUM NEEDS A `:hover{color:transparent}` TWIN — ALL OF THEM, NOT THE ONE THAT WAS NOTICED (forage-5y0, 2026-08-21; the class forage-fk5 opened and closed once). `background-clip:text` + `color:transparent` paints the gradient THROUGH the glyphs, and any opaque `color` on the same element hides it — `app-profile.css:68` declares `.ulink:hover{color:var(--bright)}` at (0,2,0) in a LATER part, so it wins the tie on source order the instant the pointer arrives and the name goes FLAT while you point at it. ⚑ fk5 KNEW THIS AND APPLIED IT ONCE: `.ulink.rk-celestial:hover` got the twin; `.prism-text` and `.apex-name` — added later, same file, same three declarations — did not. Desktop only, so no phone-width harness could ever have found it, on the reigning #1 apex name SITE-WIDE (userLink adds `.apex-name` everywhere) and every crown holder on /leaderboard. ⚖ SO THIS IS ONE RULE OVER THE WHOLE CLASS, and the list is the point: a fourth clipped class must join this line or it breaks the same way. `server/tests/clipfillhover.test.js` derives that list from web/ and fails on any `.ulink` class that paints with `background-clip:text` and has no hover twin, so the list here can never be quietly one short. ⛔ NOT `!important` and NOT a re-order: the twin is the idiom this file already uses. */
.ulink.rk-celestial:hover,.ulink.prism-text:hover,.ulink.apex-name:hover{color:transparent}
@keyframes rk-pulse{0%,100%{filter:drop-shadow(0 0 2px currentColor)}50%{filter:drop-shadow(0 0 8px currentColor)}}
@keyframes rk-flicker{0%,100%{opacity:1}41%{opacity:1}43%{opacity:.5}45%{opacity:1}71%{opacity:.82}72%{opacity:1}}
@keyframes rk-breathe{0%,100%{text-shadow:0 0 12px rgba(255,224,150,.5),0 0 26px rgba(255,224,150,.2)}50%{text-shadow:0 0 20px rgba(255,224,150,.8),0 0 46px rgba(255,224,150,.4)}}
/* rank-up CELEBRATION: a centered flare of the new rank name in its tier effect. */
.rankup-flare{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);z-index:var(--z-juice);
text-align:center;pointer-events:none;animation:rankup-flare 1.9s ease-out forwards}
.rankup-flare .ruf-k{font-size:11px;letter-spacing:calc(.42em * var(--track));text-transform:var(--caps);color:var(--dim)}
.rankup-flare .ruf-name{display:block;margin-top:8px;font-weight:700;letter-spacing:calc(.14em * var(--track));text-transform:var(--caps);
font-size:clamp(30px,9vw,58px);line-height:1}
@keyframes rankup-flare{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
14%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
/* rank-up sparks from the rail — round ON PURPOSE (no longer .pointdot's look): PARTICLES, not twelve scores arriving */
.burstdot{position:fixed;left:0;top:0;width:7px;height:7px;border-radius:50%;background:currentColor;
box-shadow:0 0 8px currentColor;z-index:var(--z-juice-trail);pointer-events:none;will-change:transform,opacity}
/* ═══ THE JUICE, WHILE THE VIEWER IS UP (owner report 2026-08-06) ═════════════════════════
*"the mobile tag editor should show the dopamine system, points sounds and such like normal"*
— and it was FIRING the whole time. triage.js's tag panel calls applyPoints() on both the add
and the vote, exactly as the desktop rows do; the sound played, the score ticked, the dots
flew. They flew UNDERNEATH: `.pointfloat`/`.pointdot` sit at --z-juice (700) and the mobile
viewer is --z-viewer (1200), so on a phone every point of feedback was painted behind the
thing the user was looking at. Nothing errored, and on desktop — where no overlay exists —
the identical code was visibly correct.
⚖ RE-RAISED RATHER THAN MOVED, and scoped to `body.vw-lock` (a class only the open viewer
sets) — the same shape the modal backdrop already uses four rules down in app-viewer.css. The
base layer is where it belongs for every non-overlay surface; this says "and when a
full-screen overlay owns the screen, the celebration comes with it".
⚠ IT MUST OUT-RANK THE SHEET (--z-sheet 1400), not just the viewer: voting a comment inside
the drag-up sheet spawns its floater over a surface that is itself above the viewer. */
body.vw-lock .pointfloat,body.vw-lock .pointdot,
body.vw-lock .rankup-flare,body.vw-lock .burstdot{z-index:var(--z-juice-top)}
/* profile SIGIL: a tier-ordinal medallion + the big glowing rank name. */
.dsr-sigil,.prof-crest{display:flex;flex-direction:column;align-items:center;gap:8px;margin:2px 0 12px}
.sig-badge{width:64px;height:64px;border-radius:50%;border:2px solid currentColor;
display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;
font-variant-numeric:tabular-nums;filter:drop-shadow(0 0 8px currentColor)}
.sig-name{font-size:18px;letter-spacing:calc(.18em * var(--track));text-transform:var(--caps);font-weight:700}
/* rail v2: the sigil IS the rank unit now (was hidden in the rail) — a compact
ONE-LINE tier badge + tier-colored rank name. The big /profile crest is unchanged. */
.rail .dsr-sigil{flex-direction:row;justify-content:center;align-items:center;gap:8px;margin:2px 0 10px}
.rail .dsr-sigil .sig-badge{width:30px;height:30px;font-size:13px;border-width:1px;flex:0 0 auto}
.rail .dsr-sigil .sig-name{font-size:12px;letter-spacing:calc(.14em * var(--track))}
/* header rank crest — anchored top-right, deliberate (not a floating circle) */
.prof-crest{flex:0 0 auto;margin:0 0 0 auto}
/* leaderboard — the ascent */
.lb{display:flex;flex-direction:column;gap:1px;margin-top:10px}
/* ⛔ `.lb-row`, `.lb-row.top`, `.lb-place` and `.lb-score` ARE GONE. f691a777 put the ladder on
the panel primitive: page-leaderboard.js draws `.pn-row .pns-lb-row` and `.pns-lb-place` /
`.pns-lb-score` (app-screens.css). `.lb-name` and `.lb-rank` below are STILL EMITTED — the
repaint kept both classes beside their `.pns-lb-*` twins — so they stay here. */
.lb-name{font-size:13px;letter-spacing:calc(.02em * var(--track));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-rank{font-size:9.5px;letter-spacing:calc(.14em * var(--track));text-transform:var(--caps);text-align:right}
@media(max-width:520px){.lb-rank{display:none}}
/* 🔥 daily-streak chip accent */
.dsr-rep-chip.streak{border-color:rgba(240,130,50,.45)} .dsr-rep-chip.streak .dsr-rep-v{color:#ff8f42}
/* rename-yourself control on /profile. ⚖ THE BORDERED `.prof-rename` CHIP IS GONE (owner ask
2026-08-08, change 5): it sat in the name row at nearly the username's weight for something
touched twice a year. The trigger is now `.plaque-link` (app-profile.css) in the quiet
maintenance row; the FORM below is unchanged and still owns the editing state. */
.prof-rename-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prof-rename-input{font-size:17px;padding:6px 9px;background:var(--sunk);border:1px solid var(--hair-hi);
color:var(--bright);max-width:220px;letter-spacing:calc(.02em * var(--track))}
.prof-rename-msg{color:var(--dim)}
@media(prefers-reduced-motion:reduce){.rk-noble,.rk-royalty,.rk-demonic,.rk-divine,.rk-celestial{animation:none}
/* .rk-celestial needs no background-position park any more — the iris animation is gone and
the spectrum is a fixed sheet, so it is already still (2026-07-27). */
.rankup-flare{animation:rankup-flare-rm 2s ease-out forwards}
@keyframes rankup-flare-rm{0%,80%{opacity:1}100%{opacity:0}}
}
/* section idiom: a bordered lowercase header over each block */
.dsr-sec{margin-top:14px}
.dsr-h{font-size:9px;letter-spacing:calc(.2em * var(--track));text-transform:var(--caps);color:var(--faint);
padding-bottom:5px;margin-bottom:9px;border-bottom:1px solid var(--hair)}
.dsr-sec .dsr-h::before{content:"◈ ";color:var(--accent-deep)}
.rail-score{display:block;font-size:38px;line-height:1.05;color:var(--bright);font-variant-numeric:tabular-nums;
margin:2px 0 10px;transform-origin:left center;will-change:transform;text-decoration:none;cursor:pointer}
.rail-score:hover{text-decoration:underline}
.rail-track{height:3px;background:var(--sunk);border:1px solid var(--hair);overflow:hidden}
.rail-fill{height:100%;background:var(--accent);width:0;transition:width .3s ease-out}
.rail-next{font-size:10px;letter-spacing:calc(.06em * var(--track));color:var(--dim);margin-top:7px}
/* record — one stat per line, dim label / tabular value */
.dsr-stats{display:flex;flex-direction:column;gap:5px}
.dsr-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px}
.dsr-k{color:var(--dim);letter-spacing:calc(.04em * var(--track))}
.dsr-v{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
/* negative burn score (owner ruling 2026-07-21) — the SAME red the admin
users table's warncell uses for strikes, applied to just this row's value. */
.dsr-stat.bad .dsr-v{color:var(--bad)} .dsr-stat.good .dsr-v{color:var(--good)}
/* burn dashboard (owner ruling 2026-07-21) — its own bordered box, first on
the stats tab, so it reads as a distinct instrument rather than one more
line among a dozen other stats. Red-accented border/wash when unhealthy. */
.burn-dash{border:1px solid var(--hair-hi);border-radius:5px;padding:10px 12px;margin-bottom:14px;background:var(--raised)}
.burn-dash.burn-bad{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 10%, var(--raised))}
.burn-dash .prof-lbl{margin-bottom:6px}
/* CREATOR VERIFICATION v1 (owner ruling 2026-07-21i) — an always-visible box on
the post page, tinted with CONTENT's fire palette (the bonus lands in the
content bar). Same bordered-box idiom as .burn-dash. */
.creator-claim{border:1px solid var(--hair-hi);border-radius:5px;padding:10px 12px;margin:0 0 14px}
.cc-head{margin-bottom:6px}
.cc-lbl{font-size:10px;letter-spacing:calc(.16em * var(--track));text-transform:var(--caps);color:#ff8a3d}
.creator-claim.cc-pending{border-left:3px solid #f2792b}
.creator-claim.cc-verified{border-color:var(--good);background:color-mix(in srgb, var(--good) 8%, var(--raised))}
.creator-claim.cc-rejected{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 8%, var(--raised))}
.cc-body{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;flex-wrap:wrap}
.cc-body.cc-good{color:var(--good);justify-content:flex-start} .cc-body.cc-bad{color:var(--bad);justify-content:flex-start}
.cc-net{color:var(--dim)}
.cc-votes,.cc-admin{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.cc-msg:empty{display:none}
/* (rail medals removed — owner ruling 2026-07-19: awards are hidden on the rail;
medals live on the /u/ profile only) */
/* awards — collectible MEDALS by rarity (icon glows in the rarity color) */
.awards-grid{display:flex;flex-wrap:wrap;gap:12px}
.award-badge{position:relative;width:106px;padding:15px 8px 10px;text-align:center;color:var(--dim);
border:1px solid var(--hair-hi);border-radius:5px;background:var(--panel);cursor:default}
.aw-icon{font-size:30px;line-height:1;filter:drop-shadow(0 0 6px currentColor)}
/* DRAWN medals (common-icons.js AWARD_ICON, owner ask 2026-08-06). The box keeps the glow and
the shimmer that already worked on the emoji; only the child changes from a character to an