/* Lock and Lay — prestige status (#785, #226): rank flair and frames, the Trophy wall, the legacy wall, this run against
the last, then the Level and prestige page with its rank looks, the confirm and the prestige screen (a themed store card is gems.css's lk-card). Desktop and phone (both pages load this file). */
/* a name in its flair: the tier colour, obsidian with a soft violet glow */
.pl-flair { color: var(--fl); font-weight: 700; }
.pl-flair.t-silver { text-shadow: 0 0 1px rgba(0, 0, 0, .35); }
.pl-flair.t-obsidian { color: var(--ink); text-shadow: 0 0 6px var(--fl), 0 0 1px var(--fl); }
/* a picture in its frame: a metal ring, the stars on a ribbon under it */
.pl-frame { position: relative; display: inline-flex; flex: none; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--fr), var(--frr), var(--fr), var(--frr), var(--fr)); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.pl-frame > * { box-shadow: 0 0 0 2px var(--paper); border-radius: 50%; }
.pl-frame.t-obsidian { background: conic-gradient(from 0deg, #1b1724, var(--fr), #1b1724, #3d2f66, #1b1724); box-shadow: 0 0 10px rgba(166, 140, 255, .55); }
.pl-fstars { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; background: var(--frr); color: #fff7e0; font-size: 10px; font-style: normal; line-height: 15px; letter-spacing: 1px; white-space: nowrap; box-shadow: 0 0 0 2px var(--paper); }
.pl-frame.t-silver .pl-fstars { color: #1e232a; background: var(--fr); }
.pl-frame.t-obsidian .pl-fstars { background: #1b1724; color: #cbbcff; }
/* the earned title */
.pl-title { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 2px; padding: 1px 8px 1px 4px; border-radius: 10px; background: rgba(226, 185, 59, .16); color: var(--ink); font-size: 12px; font-weight: 700; vertical-align: middle; }
.pl-title .xp-rose { flex: none; }
/* the profile's trophy section */
.pl-wall { display: grid; gap: 14px; padding: 6px 12px 14px; }
.pl-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink); }
.pl-h span { flex: 1; font-family: var(--sans); font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.pl-h button { flex: none; }
.pl-tally { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; font-size: 12px; color: var(--ink-2); }
.pl-tally span { display: inline-flex; align-items: center; gap: 3px; }
.pl-tw-grid, .pl-leg-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pl-leg-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.pl-tr { position: relative; display: grid; gap: 2px; min-width: 0; padding: 6px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-2); }
.pl-tr.k-bis { border-color: #c9a33a; background: linear-gradient(180deg, rgba(226, 185, 59, .14), transparent 60%), var(--paper-2); }
.pl-tr.leg { border-color: var(--rule-2); background: linear-gradient(180deg, rgba(47, 93, 58, .14), transparent 70%), var(--paper-2); }
.pl-tr-pic { display: grid; place-items: center; aspect-ratio: 16 / 11; border-radius: 6px; background: var(--thumb-bg); overflow: hidden; }
.pl-tr-pic canvas { width: 100%; height: 100%; display: block; }
.pl-tr-pic.none { background: var(--paper-3); }
.pl-tr-rose { position: absolute; top: 2px; right: 4px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.pl-tr b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pl-tr small { overflow: hidden; font-size: 10.5px; line-height: 1.3; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* ---- the profile's block, compact (#1041; prestigelook.js trophyWallHtml): one row for this run against the last and
one for the wins, each opening to the whole thing. It sits in the profile's narrow column (about 324 px in the
in-game phone), between the bio and the posts, so shut it is two rows of 44 px. ---- */
.pl-wall.plc { display: block; margin: 0 12px 12px; padding: 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); overflow: hidden; }
.plc-part + .plc-part { border-top: 1px solid var(--rule); }
.plc-part > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 9px 0 12px; cursor: pointer; list-style: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.plc-part > summary::-webkit-details-marker { display: none; }
.plc-part > summary:focus-visible { outline: 2px solid var(--moss); outline-offset: -2px; }
.plc-part[open] > summary { border-bottom: 1px solid var(--rule); }
@media (hover: hover) { .plc-part > summary:hover { background: var(--paper-3); } }
.plc-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.plc-part[open] > summary .plc-chev { transform: rotate(180deg); }
/* a row's figures: a small label over the figure. The strip is one line high and wraps, so a figure (or a rosette) that
doesn't fit goes out of sight whole: nothing is cut and nothing leaves the column */
.plc-stats, .plc-meds { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 12px; height: 30px; overflow: hidden; }
.plc-stat { flex: none; display: grid; align-content: center; gap: 3px; max-width: 100%; height: 30px; }
.plc-stat small { font: 600 9px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.plc-stat b { overflow: hidden; font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.plc-stat .pl-d { margin-left: 4px; font-size: 10px; }
/* the wins: a rosette and a count for each kind, then the legacy wall's mark (a framed animal and how many are on it);
"+N" for the wins of the kinds that didn't fit; for an owner with a legacy wall still to pick, that they can */
.plc-meds { column-gap: 9px; }
.plc-med { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 30px; }
.plc-med .xp-rose { flex: none; }
.plc-med b { font: 700 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.plc-more { flex: none; padding: 3px 6px; border-radius: 999px; background: var(--paper-3); font: 700 10.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.plc-med.leg { margin-left: 2px; color: var(--moss-2); } .plc-med.leg b { color: var(--ink-2); }
.plc-frame { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.plc-leg { flex: none; padding: 3px 7px; border: 1px solid var(--amber); border-radius: 999px; font: 600 10.5px/1.15 var(--sans); color: var(--amber); white-space: nowrap; }
/* open: the comparison's table, and the walls with smaller cards (three across in the in-game phone) */
.plc-body { display: grid; gap: 14px; padding: 10px 12px 12px; }
.plc .pl-runs { padding: 9px 10px 4px; }
.plc .pl-h { flex-wrap: wrap; gap: 2px 8px; margin-bottom: 4px; font-size: 14px; }
.plc .pl-h button, body.mobile .plc .pl-h button { min-height: 0; padding: 3px 9px; font: 600 12px/1.2 var(--sans); }
.plc .pl-legacy .pl-h span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc .pl-runs .pl-h span { flex-basis: 100%; }
/* the table in a narrow column: small row labels, and a long figure breaks only between the figure and its change */
.plc .pl-runs th, .plc .pl-runs td { padding: 4px 3px; }
.plc .pl-runs th { position: static; background: none; }
.plc .pl-runs tbody th { font-size: 9.5px; letter-spacing: .06em; white-space: nowrap; }
.plc .pl-runs td span, .plc .pl-runs .pl-d { display: inline-block; white-space: nowrap; }
.plc .pl-runs tbody tr:last-child :is(th, td) { border-bottom: 0; }
.plc .pl-tally { gap: 3px 10px; font-size: 11.5px; }
.plc .pl-tw-grid, .plc .pl-leg-row { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
.plc .pl-tr { padding: 4px 4px 5px; border-radius: 8px; background-color: var(--paper); }
.plc .pl-tr b { font-size: 11.5px; } .plc .pl-tr small { font-size: 10px; line-height: 1.25; }
.plc .pl-tr-rose { top: 1px; right: 2px; }
.plc-shut { justify-self: center; }
/* a pick is a card like any other (the page's form labels are small capitals: not here), its box in the corner */
.plc .pl-pickc { font-size: inherit; letter-spacing: 0; text-transform: none; }
.plc .pl-pickc input, body.mobile .plc .pl-pickc input { top: 6px; left: 6px; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; border-radius: 5px; }
.plc .pl-pick .meta { font-size: 12px; line-height: 1.4; }
/* the legacy picker */
.pl-pick .meta { margin: 0 0 8px; }
.pl-pickc { position: relative; display: block; cursor: pointer; }
.pl-pickc input { position: absolute; top: 8px; left: 8px; z-index: 1; width: 18px; height: 18px; accent-color: var(--moss); }
.pl-pickc.on .pl-tr { border-color: var(--moss); box-shadow: 0 0 0 2px var(--moss); }
.pl-pickc input:disabled + .pl-tr { opacity: .5; }
.pl-pick-a { display: flex; gap: 8px; margin-top: 10px; }
/* this run against the last (#226) */
.pl-runs table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pl-runs th, .pl-runs td { padding: 5px 6px; border-bottom: 1px solid var(--rule); text-align: right; }
.pl-runs thead th { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.pl-runs tbody th { text-align: left; font-weight: 500; color: var(--ink-2); }
.pl-runs td:last-child { font-weight: 600; color: var(--ink); }
.pl-d { margin-left: 5px; font-size: 10.5px; font-style: normal; font-weight: 600; }
.pl-d.up { color: var(--moss-2); } .pl-d.dn { color: var(--brick); }
/* a store card in its theme, Gems or prestige alike: article.st-card.lk-card in gems.css (looks.js cardTheme) */
/* a rank finish in the wall picker */
.fin.rank span { color: #b8901c; font-weight: 700; }
.pl-founded { color: var(--amber); }
/* silver reads too pale on paper: a darker steel for the lettering */
.pl-flair.t-silver { color: #6f7b88; }
/* ================= the Level and prestige page =================
Opened from the level ring on both clients (levels.js levelHtml, in #modalBox). A game screen in the Gem Store's
family: a teal stage, the chunky display face (--gmf), slab buttons and slanted section strips, with the animal in
it: the rank being climbed to is the hero, an egg in the rank's metal with a ball python wound round it, on a burst
of scales; the stage carries a faint tile of its skin (both pictures: tools/dev/prestige-art.mjs).
Only transform and opacity move, nothing loops inside a list, no masks. */
/* the tiers: a card's colours (light centre, body, deep edge, border, label, glow) and the medal's metal */
.pt-bronze { --t1: #ffb46e; --t2: #c9622a; --t3: #54220e; --tb: #ffcf9f; --tl: #ffdcb8; --tg: rgba(201, 98, 42, .6); --mb: #f09a4a; --md: #b65e22; --ms: #ffe3bf; --mr: #ffc98f; --mk: #45200a; }
.pt-silver { --t1: #c4d6ea; --t2: #6585a8; --t3: #1f3046; --tb: #e3eefa; --tl: #e3eefa; --tg: rgba(101, 133, 168, .6); --mb: #d3dfec; --md: #93a8be; --ms: #ffffff; --mr: #f4f8fc; --mk: #223040; }
.pt-gold { --t1: #ffe37d; --t2: #f08c0e; --t3: #7c3604; --tb: #ffec95; --tl: #ffe98f; --tg: rgba(240, 140, 14, .6); --mb: #ffcb2e; --md: #e8960a; --ms: #fff7b8; --mr: #ffe98a; --mk: #552a00; }
.pt-obsidian { --t1: #b9a0ff; --t2: #5a2fd6; --t3: #150a3b; --tb: #cdbcff; --tl: #dccfff; --tg: rgba(110, 70, 255, .6); --mb: #8a6bff; --md: #22164d; --ms: #d9ccff; --mr: #a68cff; --mk: #0c0620; }
/* the rank emblem (prestigeart.js medalSvg): an egg in the rank's metal on a seal, a ball python wound round it. Flat
shapes with one dark outline; the python keeps the colours of the coiled python frame */
.prz-medal { display: block; width: 100%; height: auto; overflow: visible; }
.prz-medal :is(.m-burst, .m-disc, .m-egg, .m-egg2, .m-star, .m-plate rect), .prz-medal .m-crown :is(path, circle) { stroke: var(--mk); stroke-width: 3; stroke-linejoin: round; }
.prz-medal .m-burst { fill: var(--mb); }
.prz-medal .m-disc { fill: var(--md); }
.prz-medal .m-ring { fill: none; stroke: var(--mr); stroke-width: 2.2; opacity: .75; }
.prz-medal .m-egg { fill: var(--ms); }
.prz-medal .m-egg2 { fill: var(--mr); stroke-width: 2.6; }
.prz-medal .m-shade { fill: var(--mk); opacity: .17; }
.prz-medal .m-shine { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .8; }
.prz-medal .m-star { fill: var(--mb); stroke-width: 2; }
.prz-medal .m-facet polygon { fill: rgba(0, 0, 0, .14); }
.prz-medal .m-crown path { fill: var(--mb); }
.prz-medal .m-crown circle { fill: #e8344e; stroke-width: 2; }
.prz-medal .m-plate rect { fill: var(--mk); stroke: var(--mr); stroke-width: 2.5; }
.prz-medal .m-plate text { fill: #fff; font: 400 18px/1 var(--gmf); text-anchor: middle; }
/* obsidian is dark glass: a black-violet egg with a pale star, on a lighter field */
.prz-medal.pt-obsidian { --md: #4a31b8; }
.prz-medal.pt-obsidian .m-egg { fill: #1f1546; } .prz-medal.pt-obsidian .m-egg2 { fill: #2f2168; } .prz-medal.pt-obsidian .m-star { fill: #cdbcff; }
.prz-medal.pt-obsidian .m-shade { fill: #000; opacity: .28; } .prz-medal.pt-obsidian .m-shine { stroke: #d9ccff; opacity: .9; }
.prz-medal :is(.p-o, .p-b, .p-h) { fill: none; stroke-linecap: round; }
.prz-medal .p-o { stroke: #1c1008; stroke-width: 16.5; }
.prz-medal .p-b { stroke: #523419; stroke-width: 12.5; }
.prz-medal .p-h { stroke: #74502c; stroke-width: 2.6; }
.prz-medal .p-tail { fill: #523419; stroke: #1c1008; stroke-width: 3; stroke-linejoin: round; }
.prz-medal .p-t { fill: #f2bb58; } .prz-medal .p-d { fill: #3a2412; }
.prz-medal .p-s { fill: #000; opacity: .3; }
.prz-medal .p-tg { fill: none; stroke: #e0392b; stroke-width: .95; stroke-linecap: round; }
.prz-medal .p-hd { fill: #f2bb58; stroke: #1c1008; stroke-width: 1.15; stroke-linejoin: round; }
.prz-medal .p-cap { fill: #3a2412; } .prz-medal .p-e { fill: #120b05; } .prz-medal .p-g { fill: #fff; }
/* the stage. The pickers in the start section are levels.js's and keepsakes.js's own markup and read the game's
colour names, so those are set for the stage here, the same on either theme. */
/* the window in the game's look (#1506, Drew picked look B): the game's warm dark grey, flat colours, teal only on the header */
#modalBox:has(> .prz) { --prz-pad: 26px; --prz-navy: #131210;
--paper: #26231f; --paper-2: #2d2a25; --paper-3: #3a352e; --ink: #fff; --ink-2: #d9d0bf; --ink-3: #a59b8b; --rule: #3a352e; --rule-2: #4b453c; --moss: #3fd47a; --moss-2: #6be39b; --amber: #ffcf3f; --brick: #ff9482; --card: #2d2a25; --gp3: #4b453c;
padding: 0 0 28px; color: #fff; border-color: #000;
background: radial-gradient(130% 1100px at 50% 0, var(--prz-glow) 0%, color-mix(in srgb, var(--prz-glow) 36%, transparent) 50%, transparent 100%) no-repeat, #1c1a17; }
/* the glow behind it takes the colour of your next rank (#1506, Drew picked B of three backgrounds) */
#modalBox:has(> .prz) { --prz-glow: rgba(206, 112, 40, .5); }
#modalBox:has(> .prz .prz-hero.pt-silver) { --prz-glow: rgba(128, 156, 190, .42); }
#modalBox:has(> .prz .prz-hero.pt-gold) { --prz-glow: rgba(240, 150, 20, .46); }
#modalBox:has(> .prz .prz-hero.pt-obsidian) { --prz-glow: rgba(112, 72, 255, .42); }
#modalBox:has(> .prz) :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#modalBox:has(> .prz) :is(input, select, textarea) { background: var(--prz-navy); color: #fff; border-color: var(--rule-2); }
#modalBox:has(> .prz) ::placeholder { color: var(--ink-3); }
.prz { padding: 0 var(--prz-pad); }
/* the header plate: the page's name and the close button, staying put while the page scrolls */
#modalBox:has(> .prz) .lvl-top { position: sticky; top: 0; z-index: 6; min-height: 60px; padding: 10px 14px 12px var(--prz-pad); background: #138e93; box-shadow: 0 4px 0 #063b42, 0 14px 18px -10px rgba(0, 0, 0, .7); }
#modalBox:has(> .prz) .lvl-top .lbl { display: inline-flex; align-items: center; gap: 10px; font: 400 26px/1 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
#modalBox:has(> .prz) .lvl-top .lbl::before { content: ''; flex: none; width: 32px; height: 32px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; transform: rotate(-8deg); }
#modalBox:has(> .prz) .lvl-top .lv-x { width: 36px; height: 36px; border: 0; background: rgba(4, 34, 42, .55); color: #fff; font-size: 22px; box-shadow: 0 3px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .35); }
#modalBox:has(> .prz) .lvl-top .lv-x:hover { background: #fff; color: #0f757c; }
/* tags that hang over a corner, as in the store */
.prz-tag { position: absolute; top: -11px; left: -9px; z-index: 5; padding: 7px 14px 6px; border-radius: 8px; background: #ff2f6d; color: #fff; font: 400 16px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); transform: rotate(-5deg) skewX(-8deg); box-shadow: 0 3px 0 rgba(0, 0, 0, .38); pointer-events: none; }
.prz-tag.go { background: #ffcf1f; color: #3d2600; text-shadow: none; }
/* the hero: the next rank's medal on its rays, what it brings, and the way there */
.prz-hero { position: relative; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); min-height: 276px; margin: 30px 0 0; border-radius: 20px; border: 3px solid var(--tb); background: radial-gradient(70% 110% at 19% 48%, var(--t1) 0%, var(--t2) 50%, var(--t3) 100%); box-shadow: 0 6px 0 rgba(0, 0, 0, .4), 0 22px 34px -14px var(--tg); isolation: isolate; }
.prz-hero-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 17px; pointer-events: none; }
.prz-hero-fx::before { content: ''; position: absolute; left: 19%; top: 48%; width: 820px; height: 820px; margin: -410px 0 0 -410px; background: url(/img/prestige/scales.webp) center / 100% 100% no-repeat; }
.prz-hero-fx::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 24%, rgba(3, 20, 26, .52) 56%, rgba(3, 20, 26, .7) 100%); }
.prz-hero-fx b { position: absolute; width: 16px; height: 16px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: .92; }
.prz-hero-fx b:nth-of-type(1) { left: 4%; top: 26%; } .prz-hero-fx b:nth-of-type(2) { left: 31%; top: 13%; width: 22px; height: 22px; } .prz-hero-fx b:nth-of-type(3) { left: 33%; top: 76%; width: 12px; height: 12px; } .prz-hero-fx b:nth-of-type(4) { left: 6%; top: 82%; width: 10px; height: 10px; }
.prz-hero-fx i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3) 50%, transparent); transform: translateX(-150%) skewX(-18deg); animation: prz-sweep 7s ease-in-out infinite; }
@keyframes prz-sweep { 0%, 60% { transform: translateX(-150%) skewX(-18deg); } 90%, 100% { transform: translateX(480%) skewX(-18deg); } }
.prz-hero-art { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; padding: 20px 4px 12px 16px; }
.prz-hero-art .prz-medal { width: min(236px, 100%); transform: rotate(-7deg); filter: drop-shadow(0 9px 0 rgba(0, 0, 0, .26)); animation: prz-pop .5s cubic-bezier(.2, .8, .3, 1.4) both; }
@keyframes prz-pop { from { opacity: 0; transform: rotate(-16deg) scale(.6); } }
.prz-hero-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 26px 22px 20px 8px; }
.prz-tier { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tl); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.prz .prz-hero h3, body.mobile .prz .prz-hero h3 { margin: 6px 0 8px; font: 400 42px/1 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); text-wrap: balance; }
.prz .prz-hero .prz-hero-p { margin: 0; text-wrap: balance; font: 500 13.5px/1.42 var(--sans); color: rgba(255, 255, 255, .93); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.prz-gets { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.prz-gets span { padding: 6px 11px 5px; border-radius: 999px; background: rgba(3, 20, 26, .58); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); font: 700 12px/1.2 var(--sans); color: #fff; white-space: nowrap; }
.prz-gets span:first-child { background: #ffc21f; color: #3d2600; box-shadow: 0 2px 0 rgba(0, 0, 0, .32); }
.prz-goal { width: 100%; margin-top: auto; padding-top: 18px; }
.prz-bar { height: 24px; border-radius: 12px; background: var(--prz-navy); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 255, 255, .38); overflow: hidden; }
.prz-bar i { display: block; height: 100%; min-width: 14px; border-radius: 12px; background: #ffc21f; }
.prz-bar-n { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font: 600 12.5px/1.2 var(--sans); color: rgba(255, 255, 255, .88); }
.prz-bar-n b { font: 400 16px/1 var(--gmf); letter-spacing: .02em; color: #fff; }
.prz .prz-hero .prz-hint { margin: 7px 0 0; font: 500 12px/1.35 var(--sans); color: rgba(255, 255, 255, .78); }
.prz-hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; width: 100%; margin-top: auto; padding-top: 18px; }
.prz .prz-hero-act .prz-hint { flex: 1 1 190px; margin: 0; }
/* this level: the ring, the title, the XP to the next one; what's next and the rested bonus beside it */
.prz-lvl { display: grid; grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 8px 20px; margin: 22px 0 0; padding: 16px 18px; border-radius: 16px; background: #26231f; box-shadow: inset 0 0 0 1px #3a352e; }
/* the level as the gold seal (#1506): a darker rim round a gold face, the XP on the bar beside it */
.prz .lv-ring.huge { position: relative; display: grid; place-items: center; width: 92px; height: 92px; background: none; box-shadow: none; color: #3d2600; }
.prz .lv-ring.huge::before { content: ''; display: block; position: absolute; inset: 0; clip-path: polygon(50% 0, 63% 12%, 80% 7%, 83% 24%, 99% 33%, 90% 50%, 99% 67%, 83% 76%, 80% 93%, 63% 88%, 50% 100%, 37% 88%, 20% 93%, 17% 76%, 1% 67%, 10% 50%, 1% 33%, 17% 24%, 20% 7%, 37% 12%); background: #a86c00; }
.prz .lv-ring.huge .lv-n { position: relative; z-index: 1; width: 92px; height: 92px; clip-path: polygon(50% 0, 63% 12%, 80% 7%, 83% 24%, 99% 33%, 90% 50%, 99% 67%, 83% 76%, 80% 93%, 63% 88%, 50% 100%, 37% 88%, 20% 93%, 17% 76%, 1% 67%, 10% 50%, 1% 33%, 17% 24%, 20% 7%, 37% 12%); background: #f2b824; transform: scale(.86); }
.prz .lv-ring.huge .lv-n text { font-family: var(--gmf); font-weight: 400; fill: #3d2600; }
.prz .lv-rank { font: 700 11px/1 var(--sans); letter-spacing: .14em; color: #7df0a8; }
.prz .prz-lvl h2, body.mobile .prz .prz-lvl h2 { margin: 5px 0 10px; font: 400 30px/1 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.prz .pstar { color: #ffd23f; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.prz .lv-xpbar { height: 16px; border-radius: 8px; background: var(--prz-navy); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .45); }
.prz .lv-xpbar i { border-radius: 8px; background: #f2b824; }
.prz .lv-xpline { margin-top: 7px; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.prz .lv-xpline b { font: 400 15px/1 var(--gmf); letter-spacing: .02em; color: #fff; }
.prz-lvl-more { display: grid; gap: 8px; min-width: 0; }
.prz .lv-next { margin: 0; padding: 8px 11px; border-radius: 11px; background: rgba(255, 210, 63, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 63, .5); font-size: 12.5px; line-height: 1.35; color: #fff; }
.prz .lv-next .lv-ico { color: #ffd23f; }
.prz .lv-rested { margin: 0; padding: 8px 11px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .07); font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .74); }
.prz .lv-rested b { color: #fff; }
.prz .lv-rested .lv-moon { fill: rgba(255, 255, 255, .6); }
.prz .lv-rested.on { background: rgba(111, 182, 255, .18); box-shadow: inset 0 0 0 1.5px rgba(111, 182, 255, .55); color: #fff; }
.prz .lv-rested.on .lv-moon { fill: #9fd0ff; }
/* a section: a slanted strip in its own colour */
.prz-sec { margin-top: 30px; --sec: #1fae6a; scroll-margin-top: 76px; }
.prz-sec-h { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 14px; padding-right: 14px; border-radius: 11px; background: #26231f; overflow: hidden; }
.prz-sec-h.s-perks { --sec: #ff7a1f; } .prz-sec-h.s-ranks { --sec: #7344f0; } .prz-sec-h.s-xp { --sec: #2f86f0; } .prz-sec-h.s-start { --sec: #ff4f6d; } .prz-sec-h.s-past { --sec: #5d8490; }
.prz .prz-sec-h h4 { align-self: stretch; min-width: 0; display: flex; align-items: center; gap: 9px; margin: 0; padding: 0 30px 0 13px; background: var(--sec); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); font: 400 20px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.prz-sec-h h4 .lv-ico { width: 21px; height: 21px; stroke: #fff; stroke-width: 2.1; }
.prz-sec-n { flex: none; margin-left: auto; white-space: nowrap; font: 700 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .82); text-align: right; }
.prz .prz-sec-note { margin: -4px 2px 14px; font: 500 12.5px/1.4 var(--sans); color: rgba(255, 255, 255, .8); }
.prz .prz-sec-note.end { margin: 12px 2px 0; }
.prz .lv-note { margin: 4px 2px 10px; color: rgba(255, 255, 255, .8); }
/* the road: the trail is the game's ball python seen from above, its tail behind level 1 and its head past the last
level (#1058). As far as you've come it has its colours (the coiled python frame's: dark body, tan alien heads
down both sides); the rest is its outline, still to fill in */
.prz .lt-shadow { fill: rgba(0, 0, 0, .3); }
.prz .lt-all { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; stroke-linejoin: round; }
.prz .lt-lit { fill: #3b2513; stroke: #140a04; stroke-width: 2.5; stroke-linejoin: round; }
.prz .lt-bl { fill: rgba(255, 255, 255, .07); } .prz .lt-bl.on { fill: #efb954; }
.prz .lt-bd { fill: none; } .prz .lt-bd.on { fill: #3a2412; }
.prz .lt-dot { fill: rgba(255, 255, 255, .3); } .prz .lt-dot.on { fill: #fff; stroke: #120904; stroke-width: 2; }
/* the level beads: each on a dark halo, pale with a strong ring, so a number reads against the snake's pattern */
.prz .lt-halo { fill: rgba(19, 18, 16, .9); } .prz .lt-halo.on { fill: #120904; }
.prz .lt-ms circle { fill: #2d2a25; stroke: rgba(255, 255, 255, .5); stroke-width: 3; }
.prz .lt-ms.unlock circle { stroke: #ffc21f; }
.prz .lt-ms.on circle { fill: #1fa84b; stroke: #eafff0; }
.prz .lt-ms.unlock.on circle { fill: #fff8dc; stroke: #ffae00; }
.prz .lt-ms text { fill: #fff; font: 800 12px var(--sans); } .prz .lt-ms.unlock.on text { fill: #2a1900; }
.prz .lt-cur circle { fill: #fff; stroke: #25bb55; } .prz .lt-cur text { fill: #1c1a17; font-family: var(--sans); }
.prz .lt-head .p-hd { fill: #34302a; stroke: rgba(255, 255, 255, .3); stroke-width: .6; stroke-linejoin: round; }
.prz .lt-head :is(.p-cap, .p-s, .p-tg, .p-g) { display: none; } .prz .lt-head .p-e { fill: rgba(255, 255, 255, .35); }
.prz .lt-head.on .p-hd { fill: #f2bb58; stroke: #1c1008; stroke-width: 1; }
.prz .lt-head.on :is(.p-cap, .p-s, .p-tg, .p-g) { display: inline; }
.prz .lt-head.on .p-cap { fill: #3a2412; stroke: none; } .prz .lt-head.on .p-s { fill: #000; opacity: .3; stroke: none; } .prz .lt-head.on .p-e { fill: #120b05; stroke: none; } .prz .lt-head.on .p-g { fill: #fff; stroke: none; }
.prz .lt-head.on .p-tg { fill: none; stroke: #ff5a4a; stroke-width: .95; stroke-linecap: round; }
.prz .lt-lead { stroke: rgba(255, 255, 255, .4); }
.prz .lt-lbl { fill: rgba(255, 255, 255, .7); } .prz .lt-lbl.on { fill: #fff; } .prz .lt-lbl.unlock { fill: #ffd23f; } .prz .lt-lbl.you { fill: #7df0a8; }
.prz .lv-ms { gap: 0 22px; }
.prz .lv-m { border-bottom-color: rgba(255, 255, 255, .12); }
.prz .lv-mlv { border-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .8); font-family: var(--sans); }
.prz .lv-m.unlock .lv-mlv { border-color: #ffd23f; color: #ffd23f; }
.prz .lv-m.on .lv-mlv { background: #25bb55; border-color: #25bb55; color: #fff; }
.prz .lv-m.unlock.on .lv-mlv { background: #ffd23f; border-color: #ffd23f; color: #3d2600; }
.prz .lv-m small { color: rgba(255, 255, 255, .7); }
.prz .lv-mst { color: rgba(255, 255, 255, .7); font-weight: 600; } .prz .lv-m.on .lv-mst { color: #7df0a8; }
/* the perks: one plate, each perk a row in its own colour with pips up to its cap */
.prz-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 22px; padding: 12px 16px; border-radius: 16px; background: rgba(3, 20, 26, .5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); }
.prz-perk { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 58px; }
.prz-perk-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--pc); box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .45); }
.prz-perk-ic .lv-ico { width: 23px; height: 23px; stroke: #1c1a17; stroke-width: 2; }
.prz-perk-m { display: grid; gap: 6px; min-width: 0; }
.prz-perk-n { overflow: hidden; font: 700 13.5px/1.15 var(--sans); color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.prz-pips { display: flex; gap: 4px; }
.prz-pips i { width: 17px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.prz-pips i.on { background: var(--pc); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45); }
.prz-pips i.nx { background: none; box-shadow: inset 0 0 0 2px var(--pc); }
.prz-perk-v { display: grid; justify-items: end; gap: 3px; }
.prz-perk-v b { font: 400 21px/1 var(--gmf); letter-spacing: .01em; color: var(--pc); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.prz-perk-v small { font: 600 10.5px/1 var(--sans); color: rgba(255, 255, 255, .66); white-space: nowrap; }
.prz-perk:not(.on) .prz-perk-ic { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px var(--pc); }
.prz-perk:not(.on) .prz-perk-ic .lv-ico { stroke: var(--pc); }
/* the ranks: four medals on their tier's card; the ones still locked are drained */
.prz-ranks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.prz-rank { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 10px 8px 0; border-radius: 16px; border: 3px solid var(--tb); background: radial-gradient(120% 70% at 50% 30%, var(--t1) 0%, var(--t2) 46%, var(--t3) 100%); box-shadow: 0 5px 0 rgba(0, 0, 0, .42), 0 14px 18px -10px rgba(0, 0, 0, .7); text-align: center; overflow: hidden; isolation: isolate; }
.prz-rank::before { content: ''; position: absolute; left: 50%; top: 68px; z-index: -1; width: 520px; height: 520px; margin: -260px 0 0 -260px; background: url(/img/prestige/scales.webp) center / 100% 100% no-repeat; pointer-events: none; }
.prz-rank .prz-tag { top: 7px; left: 6px; padding: 5px 9px 4px; border-radius: 6px; font-size: 12px; }
.prz-rank-art { width: 104px; max-width: 78%; }
.prz-rank-n { margin-top: 2px; font: 400 21px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.prz-rank-at { margin-top: 4px; font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.prz-rank small { margin: 8px 0 10px; font: 600 11.5px/1.35 var(--sans); color: rgba(255, 255, 255, .92); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.prz-rank-st { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; margin: auto -8px 0; background: var(--prz-navy, #04222a); font: 400 14px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.prz-rank-st .lv-ico { width: 15px; height: 15px; stroke-width: 2.6; }
.prz-rank.have .prz-rank-st { color: #9dffc0; }
.prz-rank.next .prz-rank-st { color: #ffe763; }
.prz-rank.lock { border-color: color-mix(in srgb, var(--tb) 50%, #3a352e); background: radial-gradient(120% 70% at 50% 30%, color-mix(in srgb, var(--t2) 62%, #1c1a17) 0%, color-mix(in srgb, var(--t3) 55%, #1c1a17) 55%, #1c1a17 100%); box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
.prz-rank.lock::before { opacity: .3; }
.prz-rank.lock .prz-rank-n { color: rgba(255, 255, 255, .78); } .prz-rank.lock .prz-rank-at, .prz-rank.lock small, .prz-rank.lock .prz-rank-st { color: rgba(255, 255, 255, .6); }
/* where the XP comes from */
.prz .lv-src { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 10px; }
.prz .lv-s { border: 0; border-radius: 14px; background: rgba(3, 20, 26, .5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.prz .lv-sico { border: 0; background: rgba(88, 224, 138, .16); color: #7df0a8; }
.prz .lv-s.zero { opacity: .62; } .prz .lv-s.zero .lv-sico { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }
.prz .lv-sname { font-weight: 700; color: #fff; }
.prz .lv-sbar { background: rgba(255, 255, 255, .12); } .prz .lv-sbar i { background: #58e08a; }
.prz .lv-ssub { min-height: 1.2em; color: rgba(255, 255, 255, .7); } .prz .lv-ssub b { font-family: var(--sans); color: #fff; }
.prz .lv-sxp { font: 400 20px/1 var(--gmf); color: #7df0a8; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.prz .lv-sxp small { color: rgba(255, 255, 255, .62); text-shadow: none; }
.prz-more { margin-top: 10px; }
.prz-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .13); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); font: 400 14px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: #fff; cursor: pointer; list-style: none; user-select: none; }
.prz-more summary::-webkit-details-marker { display: none; }
.prz-more summary::after { content: '+'; font: 400 18px/1 var(--gmf); }
.prz-more[open] summary::after { content: '\2212'; }
.prz-more[open] summary { margin-bottom: 10px; }
/* past prestiges: each run's medal and what it took */
.prz-past { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 14px; }
.prz-run { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: rgba(3, 20, 26, .5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.prz-run b { display: block; font: 400 16px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.prz-run small { display: block; margin-top: 4px; font: 500 12px/1.35 var(--sans); color: rgba(255, 255, 255, .8); }
@media (max-width: 760px) {
.prz-lvl { grid-template-columns: auto minmax(0, 1fr); }
.prz-lvl-more { grid-column: 1 / -1; }
.prz-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prz-ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a narrow page (a phone, or a narrow window): the hero stacks, the medal over the words; lists go to one column */
@media (max-width: 640px) {
.prz-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-top: 24px; background: radial-gradient(120% 60% at 50% 22%, var(--t1) 0%, var(--t2) 46%, var(--t3) 100%); }
.prz-hero-fx::before { left: 50%; top: 96px; }
.prz-hero-fx::after { background: linear-gradient(180deg, transparent 96px, rgba(3, 20, 26, .5) 190px, rgba(3, 20, 26, .68) 100%); }
.prz-hero-fx b:nth-of-type(1) { left: 12%; top: 40px; } .prz-hero-fx b:nth-of-type(2) { left: 76%; top: 30px; } .prz-hero-fx b:nth-of-type(3) { left: 82%; top: 132px; } .prz-hero-fx b:nth-of-type(4) { left: 18%; top: 150px; }
.prz-hero-art { padding: 14px 0 0; }
.prz-hero-art .prz-medal { width: 168px; }
.prz-hero-txt { padding: 4px 16px 16px; }
.prz .prz-hero h3, body.mobile .prz .prz-hero h3 { font-size: 34px; }
.prz-goal, .prz-hero-act { margin-top: 0; padding-top: 16px; }
.prz-hero-act .gm-btn { width: 100%; min-height: 54px; font-size: 21px; }
.prz .prz-hero-act .prz-hint { flex-basis: 100%; }
.prz-sec { margin-top: 26px; }
.prz-sec-h { gap: 6px; padding-right: 11px; }
.prz .prz-sec-h h4 { font-size: 16.5px; gap: 7px; padding: 0 24px 0 11px; }
.prz-sec-h h4 .lv-ico { width: 18px; height: 18px; }
.prz-sec-h.s-xp .prz-sec-n { display: none; } /* the level strip above has it */
.prz-perks { grid-template-columns: minmax(0, 1fr); padding: 8px 14px; }
.prz-ranks { gap: 12px 10px; }
.prz .lv-src { grid-template-columns: minmax(0, 1fr); }
.prz-past { grid-template-columns: minmax(0, 1fr); }
/* a milestone already reached is one line here: its name and the tick */
.prz .lv-m.on small { display: none; } .prz .lv-m.on { padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) { .prz-hero-fx i, .prz-hero-art .prz-medal { animation: none; } }
/* ---- the phone client: the page fills the screen, under the round close button ---- */
body.mobile #modalBox:has(> .prz) { --prz-pad: 14px; padding-top: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
body.mobile #modalBox:has(> .prz) .lvl-top { min-height: 58px; padding: calc(8px + env(safe-area-inset-top)) 62px 10px var(--prz-pad); }
body.mobile #modalBox:has(> .prz) .lvl-top .lbl { font-size: 22px; }
body.mobile #modalBox:has(> .prz) #lvClose { display: none; } /* the round × over the corner closes it */
body.mobile #modal:has(.prz) #modalClose { background: rgba(4, 34, 42, .7); color: #fff; border: 0; box-shadow: 0 3px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .4); }
body.mobile .prz-lvl { margin-top: 18px; padding: 14px; gap: 10px 14px; }
body.mobile .prz .lv-ring.huge { width: 76px; height: 76px; } body.mobile .prz .lv-ring.huge::before { inset: 8px; }
body.mobile .prz .prz-lvl h2 { font-size: 26px; }
body.mobile .prz .lvl-genes button { box-shadow: none; }
/* ================= starting a prestige: the start section, the confirm, the prestige screen ================= */
/* the deal, in the start section: what goes, what stays and what the new run starts with, as three plates */
.prz-start { counter-reset: przstep; }
.prz-deal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "intro intro" "lose keep" "start keep"; gap: 10px 12px; }
.prz .prz-deal p { margin: 0; padding: 12px 14px 13px; border-radius: 14px; background: rgba(3, 20, 26, .5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); font: 500 12.5px/1.48 var(--sans); color: rgba(255, 255, 255, .88); }
.prz .prz-deal .prz-deal-0 { grid-area: intro; background: rgba(255, 210, 63, .12); box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .45); }
.prz .prz-deal .prz-deal-0 b { color: #ffd23f; }
.prz .prz-deal .lv-pk:nth-of-type(2) { grid-area: lose; --c: #ff9482; } .prz .prz-deal .lv-pk:nth-of-type(3) { grid-area: keep; --c: #7df0a8; } .prz .prz-deal .lv-pk:nth-of-type(4) { grid-area: start; --c: #ffd23f; }
.prz .prz-deal .lv-pk { box-shadow: inset 4px 0 0 var(--c), inset 0 0 0 2px rgba(255, 255, 255, .08); }
.prz .prz-deal .lv-pk b { display: block; margin-bottom: 5px; font: 400 16px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: var(--c); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
/* the steps: founders, keepsakes, genes, each a numbered plate (the pickers' rows are pickrow.js's, below) */
.prz-start :is(.fp, .ks-pick, .prz-genes) { margin-top: 14px; padding: 14px; border-radius: 16px; background: rgba(3, 20, 26, .5); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.prz-start :is(.fp, .ks-pick, .prz-genes) > .lbl { display: flex; align-items: center; gap: 10px; margin: 0 0 8px !important; font: 400 18px/1.1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.prz-start :is(.fp, .ks-pick, .prz-genes) > .lbl::before { counter-increment: przstep; content: counter(przstep); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; font: 400 16px/1 var(--gmf); text-shadow: none; box-shadow: 0 2px 0 #b56a00; }
.prz-start :is(.fp, .ks-pick, .prz-genes) > .lbl .meta { margin-left: auto; padding: 4px 10px 3px; border-radius: 999px; background: var(--prz-navy, #04222a); font: 700 11.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: #fff; text-shadow: none; white-space: nowrap; }
.prz-start .meta { margin: 0 0 8px; color: rgba(255, 255, 255, .8); }
/* ---- a picker's rows (pickrow.js, #1060): the founders and the keepsakes. A row is the animal's picture, its name,
its genes as pills (two lines at most, the rest "+N"), the facts to choose by, and its mark; the ones chosen sit
above the list as chips. A few hundred animals: the list scrolls in its own box and unrolls a chunk at a time. ---- */
.apk-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; margin: 0 0 10px; }
.apk-none { font: 600 12px/1.3 var(--sans); color: rgba(255, 255, 255, .62); }
.prz .apk-chip, body.mobile .prz .apk-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 36px; min-height: 0; padding: 0 9px 0 4px; border: 0; border-radius: 11px; background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; font: 700 12.5px/1 var(--sans); box-shadow: 0 3px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); cursor: pointer; }
.prz .apk-chip:hover { filter: brightness(1.06); color: #3d2600; }
.apk-chip canvas { flex: none; width: 46px; height: 28px; border-radius: 7px; background: var(--thumb-bg); }
.apk-chip span { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apk-chip i { font: 400 17px/1 var(--sans); font-style: normal; opacity: .7; }
.prz .ks-pick .apk-chip, body.mobile .prz .ks-pick .apk-chip { background: linear-gradient(180deg, #8dffb0, #25bb55); color: #06310f; box-shadow: 0 3px 0 #0e6e2e, inset 0 2px 0 rgba(255, 255, 255, .5); } /* kept: green, as its row */
.prz .apk-q, body.mobile .prz .apk-q { width: 100%; margin: 0 0 8px; }
.apk-list { display: grid; align-content: start; gap: 6px; max-height: min(58vh, 470px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.prz .apk-row, body.mobile .prz .apk-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 0 11px; width: 100%; min-height: 0; margin: 0; padding: 7px 11px 7px 7px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .07); color: #fff; font: 500 13px/1.2 var(--sans); text-align: left; box-shadow: none; cursor: pointer; transition: none; }
@media (hover: hover) { .prz .apk-row:hover:not(:disabled) { background: rgba(255, 255, 255, .13); color: #fff; } }
.prz .apk-row:active:not(:disabled) { transform: none; background: rgba(255, 255, 255, .18); }
.apk-pic { display: block; width: 82px; height: 50px; border-radius: 9px; background: var(--thumb-bg); overflow: hidden; }
.apk-pic canvas { display: block; width: 100%; height: 100%; }
.apk-main { display: grid; gap: 4px; min-width: 0; }
.apk-name { overflow: hidden; font: 700 13.5px/1.2 var(--sans); color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.apk-pills { display: flex; flex-wrap: wrap; gap: 3px; max-height: 39px; overflow: hidden; }
.apk-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 8px; font: 500 11.5px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .76); }
.apk-facts .sex { margin: 0; font-size: 11px; }
.apk-facts b { font-weight: 700; color: #8dffb0; }
.apk-why { padding: 1px 7px; border-radius: 999px; background: rgba(255, 148, 130, .18); font-style: normal; font-weight: 700; color: #ffb3a6; }
.apk-mark { display: grid; place-items: center; }
.apk-tick { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, .45); border-radius: 8px; }
.apk-keep { padding: 6px 12px 5px; border-radius: 999px; background: rgba(255, 255, 255, .14); font: 700 12px/1 var(--sans); font-style: normal; color: #fff; white-space: nowrap; }
/* chosen: a gold row with its tick; kept: green */
.prz .apk-row.on, body.mobile .prz .apk-row.on { background: rgba(255, 210, 63, .17); box-shadow: inset 0 0 0 2px #ffd23f; }
.apk-row.on .apk-tick { border-color: #ffd23f; background: #ffd23f; }
.apk-row.on .apk-tick::after { content: ''; width: 12px; height: 6px; margin-top: -3px; border: solid #3d2600; border-width: 0 0 3px 3px; transform: rotate(-45deg); }
.prz .apk-row.on:has(.apk-keep), body.mobile .prz .apk-row.on:has(.apk-keep) { background: rgba(88, 224, 138, .15); box-shadow: inset 0 0 0 2px #58e08a; }
.apk-row.on .apk-keep { background: #25bb55; color: #06310f; }
/* can't be chosen: at all (it says why), or for now (the picker is full) */
.prz .apk-row:disabled { opacity: 1; cursor: default; }
.apk-row.no .apk-pic, .apk-row.no .apk-name, .apk-row.no .apk-pills { opacity: .5; }
.apk-row.no .apk-tick { border-style: dashed; opacity: .5; }
.apk-row:disabled:not(.no):not(.on) > * { opacity: .5; }
.prz .apk-more, body.mobile .prz .apk-more { display: flex; align-items: baseline; justify-content: center; gap: 9px; width: 100%; min-height: 44px; margin: 2px 0 0; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .13); color: #fff; font: 400 15px/44px var(--gmf); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); cursor: pointer; }
.prz .apk-more:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.apk-more small { font: 600 11.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .7); }
.apk-empty, .apk-end { padding: 14px 6px; font: 500 12.5px/1.4 var(--sans); text-align: center; color: rgba(255, 255, 255, .7); }
.apk-end { padding: 6px; }
/* a full picker's count, and the pills on the stage (the game's gene pills, in colours that hold on the dark teal) */
.prz-start :is(.fp, .ks-pick, .prz-genes) > .lbl .meta.full { background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; }
.prz .pill { font-size: 10.5px; line-height: 1.55; }
.prz .pill.codom { background: #4a3a12; border-color: #d9a441; color: #ffdc8a; }
.prz .pill.dom { background: #173352; border-color: #6c9fe0; color: #bcd8ff; }
.prz .pill.rec { background: #3a2450; border-color: #b488d6; color: #e6cdfa; }
.prz .pill.rec.het { background: transparent; border-style: dashed; color: #d9bff0; }
.prz .pill.rec.het.unlikely { opacity: .6; border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .7); }
.prz .pill.paradox { background: #fff; border-color: #c99b3f; color: #8a6a1a; }
.prz .pill.rare { background: #e0aa32; border-color: #ffd98a; color: #3d2600; }
.prz .pill.more { border-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .8); }
@media (max-width: 640px) {
.apk-list { max-height: 62vh; }
.prz .apk-row, body.mobile .prz .apk-row { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 0 9px; padding: 7px 9px 7px 6px; }
.apk-pic { width: 70px; height: 46px; align-self: start; margin-top: 1px; }
.apk-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 13px; }
.apk-keep { padding: 6px 9px 5px; } .apk-tick { width: 24px; height: 24px; }
.apk-main { gap: 3px; } .apk-name { line-height: 1.18; }
.apk-chip span { max-width: 118px; }
}
.prz .lvl-genes { gap: 8px; }
.prz .lvl-genes button, body.mobile .prz .lvl-genes button { min-height: 38px; padding: 6px 15px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 13px/1.2 var(--sans); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.prz .lvl-genes button:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.prz .lvl-genes button.on, body.mobile .prz .lvl-genes button.on { background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; box-shadow: 0 3px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }
:root .prz #lvPrestige { min-height: 58px; margin-top: 18px; padding: 10px 18px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; font: 400 20px/1.15 var(--gmf); letter-spacing: .03em; text-transform: uppercase; white-space: normal; box-shadow: 0 5px 0 #b56a00, 0 12px 16px -8px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .6); transition: transform .08s, box-shadow .08s, filter .12s; }
:root .prz #lvPrestige:hover { filter: brightness(1.07); }
:root .prz #lvPrestige:active { transform: translateY(4px); box-shadow: 0 1px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }
:root .prz #lvPrestige:disabled { opacity: 1; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .7); box-shadow: 0 5px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .3); transform: none; filter: none; }
@media (max-width: 640px) {
.prz-deal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "lose" "keep" "start"; }
.prz-start :is(.fp, .ks-pick, .prz-genes) { padding: 12px; } .prz-start :is(.fp, .ks-pick, .prz-genes) > .lbl { gap: 8px; font-size: 15.5px; }
}
/* ---- the confirm: the game's dialog (levels.js wireLevel), on the stage, the emblem over the question ---- */
#modalBox2:has(.prz-cf), body.mobile #modalBox2:has(.prz-cf) { --prz-navy: #04222a; color: #fff; border: 0; border-radius: 22px; background-color: #062b33;
background-image: radial-gradient(110% 300px at 50% 0, #17919a 0%, rgba(23, 145, 154, 0) 100%), url(/img/prestige/skin.webp), linear-gradient(180deg, #0d5560, #062b33 600px); background-size: auto, 136px 76px, auto; background-repeat: no-repeat, repeat, no-repeat;
box-shadow: 0 0 0 3px #2cc0bd, 0 30px 70px rgba(0, 0, 0, .6); }
body.mobile #modalBox2:has(.prz-cf) { border-radius: 22px 22px 0 0; box-shadow: 0 -3px 0 #2cc0bd, 0 -14px 34px rgba(0, 0, 0, .5); }
/* on the phone the sheet shows the field and the buttons without a scroll: a smaller emblem, the words in a shorter box */
body.mobile #modalBox2:has(.prz-cf) .prz-cf-art { width: 100px; margin-top: -6px; } body.mobile #modalBox2:has(.prz-cf) .dlg-body { max-height: 132px; margin-top: 12px; }
body.mobile #modalBox2:has(.prz-cf) h2 { margin-bottom: 10px; font-size: 25px; } body.mobile #modalBox2:has(.prz-cf) label { margin-top: 12px; }
#modalBox2:has(.prz-cf) form.dialog { display: flex; flex-direction: column; }
.prz-cf-art { order: 1; align-self: center; width: 136px; margin: -2px 0 6px; }
#modalBox2:has(.prz-cf) h2, body.mobile #modalBox2:has(.prz-cf) h2 { order: 2; margin: 0 0 12px; font: 400 28px/1.05 var(--gmf); letter-spacing: .02em; text-transform: uppercase; text-align: center; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); text-wrap: balance; }
.prz-cf { order: 3; display: grid; justify-items: stretch; gap: 8px; min-width: 0; } /* stretch, not center: a centred grid item grows to its widest chip and runs off the dialog (#1282) */
.prz-cf-l { min-width: 0; overflow-wrap: anywhere; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #7df0a8; }
.prz-cf .prz-gets { margin: 0; min-width: 0; justify-content: flex-start; max-height: min(168px, 24vh); overflow-y: auto; overscroll-behavior: contain; }
.prz-cf .prz-gets span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* a long morph is cut with an ellipsis; its title has it whole */
.prz-cf .prz-gets span:first-child { background: rgba(3, 20, 26, .58); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); }
.prz-gets small { font-weight: 500; opacity: .75; }
#modalBox2:has(.prz-cf) .dlg-body { order: 4; margin: 14px 0 0; padding: 12px 14px; max-height: min(250px, 30vh); overflow-y: auto; border-radius: 14px; background: rgba(3, 20, 26, .55); font: 500 12.5px/1.5 var(--sans); color: rgba(255, 255, 255, .86); }
#modalBox2:has(.prz-cf) .dlg-body br + br { display: none; }
#modalBox2:has(.prz-cf) .dlg-body b { color: #fff; }
#modalBox2:has(.prz-cf) .dlg-body b:nth-of-type(1), #modalBox2:has(.prz-cf) .dlg-body b:nth-of-type(2) { display: block; font: 400 15px/1.3 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: #ff9482; }
#modalBox2:has(.prz-cf) .dlg-body b:nth-of-type(2) { margin-top: 8px; color: #7df0a8; }
#modalBox2:has(.prz-cf) .dlg-body b:nth-of-type(3) { color: #ffd23f; letter-spacing: .06em; }
#modalBox2:has(.prz-cf) label { order: 5; display: grid; gap: 7px; margin-top: 14px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, .82); }
#modalBox2:has(.prz-cf) label input { width: 100%; height: 52px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--prz-navy); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 255, 255, .38); color: #fff; font: 400 23px/1 var(--gmf); letter-spacing: .14em; text-align: center; text-transform: uppercase; }
#modalBox2:has(.prz-cf) label input::placeholder { color: rgba(255, 255, 255, .28); }
#modalBox2:has(.prz-cf) label input:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
#modalBox2:has(.prz-cf) .actions { order: 6; display: flex; gap: 10px; }
#modalBox2:has(.prz-cf) .actions button { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; font: 400 19px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 5px 0 #b56a00, 0 12px 16px -8px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .6); transition: transform .08s, box-shadow .08s, filter .12s; }
#modalBox2:has(.prz-cf) .actions button[type=submit]:hover { background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; filter: brightness(1.07); }
#modalBox2:has(.prz-cf) .actions button:active { transform: translateY(4px); box-shadow: 0 1px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }
#modalBox2:has(.prz-cf) .actions #dlgCancel, #modalBox2:has(.prz-cf) .actions #dlgCancel:hover { flex: 0 1 34%; background: rgba(255, 255, 255, .16); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .4); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
#modalBox2:has(.prz-cf) .actions #dlgCancel:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .4); }
/* ---- the prestige screen (prestigefx.js): the new rank's emblem over the whole game, in its rank's colour ---- */
.pz-screen { position: fixed; inset: 0; z-index: 9000; display: flex; padding: 28px 20px; overflow: hidden auto; opacity: 0; transition: opacity .45s ease; color: #fff; background-color: #062b33;
background-image: url(/img/prestige/skin.webp), linear-gradient(180deg, var(--t2) 0%, var(--t3) 36%, #0a3f49 62%, #062b33 100%); background-size: 136px 76px, auto; background-repeat: repeat, no-repeat; }
.pz-screen.in { opacity: 1; } .pz-screen.out { opacity: 0; }
.pz-card { position: relative; margin: auto; width: min(580px, 100%); display: grid; justify-items: center; gap: 14px; text-align: center; }
/* the emblem on its burst of scales (the burst turns slowly: one picture, a transform); the egg rocks while the server works */
.pz-emb { position: relative; width: 236px; isolation: isolate; }
.pz-emb::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; width: 860px; height: 860px; margin: -430px 0 0 -430px; background: url(/img/prestige/scales.webp) center / 100% 100% no-repeat; pointer-events: none; animation: pzSpin 140s linear infinite; }
.pz-emb .prz-medal { filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .26)); transform-origin: 50% 88%; animation: pzRock 1.15s ease-in-out infinite; }
.pz-screen.done .pz-emb { width: 188px; }
.pz-screen.done .pz-emb .prz-medal { animation: pzLand .65s cubic-bezier(.2, .8, .3, 1.4) both; }
.pz-body { display: grid; justify-items: center; gap: 9px; width: 100%; }
.pz-kicker { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tl); text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.pz-screen .pz-card h2, body.mobile .pz-screen .pz-card h2 { margin: 0; font: 400 50px/1 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .38); }
.pz-screen:not(.done) .pz-card h2, body.mobile .pz-screen:not(.done) .pz-card h2 { font-size: 38px; }
.pz-sub { margin: 0; max-width: 52ch; font: 500 14px/1.5 var(--sans); color: rgba(255, 255, 255, .92); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); text-wrap: pretty; }
.pz-sub b { color: #fff; }
.pz-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; width: 100%; margin-top: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(3, 20, 26, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); text-align: left; }
.pz-l { display: block; margin-bottom: 8px; font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.pz-l.pz-l-perks { margin: 8px 0 0; }
.pz-genes { display: flex; flex-wrap: wrap; gap: 6px; }
.pz-genes span { padding: 6px 12px 5px; border-radius: 999px; background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; font: 700 13px/1.2 var(--sans); box-shadow: 0 2px 0 rgba(0, 0, 0, .32); }
.pz-cash { font: 400 28px/1 var(--gmf); letter-spacing: .01em; color: #8dffb0; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.pz-perks { list-style: none; margin: 0; padding: 6px 14px; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; border-radius: 16px; background: rgba(3, 20, 26, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); text-align: left; }
.pz-perks li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; min-height: 44px; font: 600 13px/1.2 var(--sans); color: #fff; }
.pz-perks li em { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--pc); box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .45); }
.pz-perks li em .lv-ico { width: 18px; height: 18px; stroke: #062b33; stroke-width: 2; }
.pz-perks li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-perks li b { font: 400 18px/1 var(--gmf); color: var(--pc); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.pz-perks li i { padding: 3px 6px 2px; border-radius: 5px; background: linear-gradient(180deg, #ff5b8d, #ff2a66); color: #fff; font: 400 10.5px/1 var(--gmf); font-style: normal; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-4deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
:root .pz-screen .pz-go, body.mobile .pz-screen .pz-go { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; height: auto; width: auto; margin-top: 14px; padding: 0 30px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; font: 400 21px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 5px 0 #b56a00, 0 12px 16px -8px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .6); cursor: pointer; transition: transform .08s, box-shadow .08s, filter .12s; }
:root .pz-screen .pz-go:hover { background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; filter: brightness(1.07); }
:root .pz-screen .pz-go:active { transform: translateY(4px); box-shadow: 0 1px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }
.pz-screen .pz-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pz-screen.done .pz-body > * { animation: pzRise .5s ease both; }
.pz-screen.done .pz-body > *:nth-child(2) { animation-delay: .06s; } .pz-screen.done .pz-body > *:nth-child(3) { animation-delay: .12s; } .pz-screen.done .pz-body > *:nth-child(4) { animation-delay: .18s; } .pz-screen.done .pz-body > *:nth-child(n+5) { animation-delay: .26s; }
/* what flies out of the emblem when the rank lands: stars and little eggs */
.pz-fly { position: fixed; z-index: 2; width: 18px; height: 18px; pointer-events: none; }
.pz-fly.fs { background: #ffe763; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .pz-fly.fs.f2 { background: #fff; }
.pz-fly.fe { width: 15px; height: 20px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--ms, #fff); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .16); } .pz-fly.fe.f2 { background: var(--mb, #ffcb2e); }
@keyframes pzSpin { to { transform: rotate(360deg); } }
@keyframes pzRock { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes pzLand { from { opacity: .3; transform: scale(.5) rotate(-16deg); } }
@keyframes pzRise { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 520px) {
.pz-screen { padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); }
.pz-emb { width: 204px; } .pz-screen.done .pz-emb { width: 148px; }
.pz-screen .pz-card h2, body.mobile .pz-screen .pz-card h2 { font-size: 40px; } .pz-screen:not(.done) .pz-card h2, body.mobile .pz-screen:not(.done) .pz-card h2 { font-size: 32px; }
.pz-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pz-perks { grid-template-columns: minmax(0, 1fr); }
/* the button stays in reach while the list of perks scrolls under it */
:root .pz-screen .pz-go, body.mobile .pz-screen .pz-go { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 3; width: 100%; box-shadow: 0 5px 0 #b56a00, 0 0 0 4px rgba(3, 20, 26, .55), 0 14px 22px -6px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .6); }
.pz-perks li { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .pz-emb::before, .pz-emb .prz-medal, .pz-screen.done .pz-emb .prz-medal, .pz-screen.done .pz-body > * { animation: none; } }
/* ================= the rank looks under the Level page (prestigelook.js rankLooksHtml) ================= */
.prz-sec-h.s-looks { --sec: #d9407f; }
.prz-wear { display: grid; gap: 12px; }
.prz-wear-row { display: grid; grid-template-columns: 104px repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 10px; padding: 10px; border-radius: 16px; border: 3px solid var(--tb); background: linear-gradient(90deg, var(--t2), var(--t3)); box-shadow: 0 5px 0 rgba(0, 0, 0, .4); }
.prz-wear-m { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; }
.prz-wear-m .prz-medal { width: 62px; }
.prz-wear-m b { font: 400 16px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
:root .prz-wear-b, body.mobile button.prz-wear-b { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pv n" "pv st"; align-content: center; align-items: center; gap: 3px 10px; min-width: 0; min-height: 60px; padding: 8px 10px; border: 0; border-radius: 12px; background: rgba(3, 20, 26, .6); color: #fff; font: 700 13px/1.2 var(--sans); text-align: left; box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .2); cursor: pointer; transition: transform .08s, box-shadow .08s; }
:root .prz-wear-b:hover { background: rgba(3, 20, 26, .78); color: #fff; }
:root .prz-wear-b:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .2); }
.prz-wear-b .prz-pv { grid-area: pv; } .prz-wear-n { grid-area: n; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prz-wear-n::first-letter { text-transform: uppercase; }
.prz-wear-b i { grid-area: st; font: 400 12.5px/1 var(--gmf); font-style: normal; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
:root .prz-wear-b.on, :root .prz-wear-b.on:hover, body.mobile button.prz-wear-b.on { background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; box-shadow: 0 3px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }
.prz-wear-b.on i { color: #7a4300; } .prz-wear-b.on i::before { content: '\2713\00a0'; }
/* what each item is, small: the name colour, the ring, the store card */
.prz-pv { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #0b1d24; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.prz-pv.flair { font: 800 17px/1 var(--sans); }
.prz-pv.frame i { width: 24px; height: 24px; border-radius: 50%; border: 4px solid var(--fr); box-shadow: 0 0 0 1.5px var(--frr); background: #52606a; }
.prz-pv.card { align-content: center; justify-items: start; gap: 3px; padding: 0 8px; box-shadow: inset 0 0 0 1.5px var(--ac); }
.prz-pv.card i { width: 24px; height: 3px; border-radius: 2px; background: var(--ink); } .prz-pv.card i:first-child { width: 15px; height: 4px; background: var(--ac); } .prz-pv.card i:last-child { width: 19px; opacity: .6; }
@media (max-width: 640px) {
.prz-wear-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prz-wear-m { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; } .prz-wear-m .prz-medal { width: 46px; }
:root .prz-wear-b, body.mobile button.prz-wear-b { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pv" "n" "st"; justify-items: center; gap: 5px; padding: 10px 6px; text-align: center; }
}
/* ================= prestige chips elsewhere ================= */
/* the star by a name (levels.js starHtml): a small plate in the rank's metal. Plain: it sits in long lists */
.pstar { display: inline-flex; align-items: center; gap: 1px; height: 16px; margin-left: 5px; padding: 0 5px 0 4px; border-radius: 8px; background: #ffc832; color: #4a2600; font: 700 10.5px/1 var(--sans); letter-spacing: 0; text-shadow: none; vertical-align: 1px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16); white-space: nowrap; }
.pstar small { font-size: 1em; }
/* the star's number keeps its own look wherever the star sits (#1503): Hatch's rows style any inside them (grey, a
smaller size, a margin, a block or a clamp), which pushed the 4 of a ★4 up and greyed it on Suggested for you */
.pstar.pstar.pstar small { display: inline; margin: 0; padding: 0; max-width: none; overflow: visible; font: inherit; color: inherit; line-height: inherit; white-space: nowrap; -webkit-line-clamp: unset; text-align: inherit; }
.pstar.ps-bronze { background: #dc8c46; color: #3a1a06; } .pstar.ps-silver { background: #cbd7e4; color: #1f2c3a; } .pstar.ps-gold { background: #ffc832; color: #4a2600; } .pstar.ps-obsidian { background: #2a1d5c; color: #dccfff; box-shadow: inset 0 0 0 1px #8a6bff; }
.prz-lvl h2 .pstar { height: auto; margin-left: 2px; padding: 0; background: none; box-shadow: none; font: inherit; color: #ffd23f; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); vertical-align: baseline; } .prz-lvl h2 .pstar small { font-size: .72em; }
/* the founder chip (prestigelook.js founderChip), in the metal of the run it founded */
:root .fchip.fc-bronze { background: #dc8c46; border-color: #a85f24; color: #3a1a06; } :root .fchip.fc-silver { background: #cbd7e4; border-color: #8fa2b6; color: #1f2c3a; } :root .fchip.fc-gold { background: #ffc832; border-color: #c98a1e; color: #4a2600; } :root .fchip.fc-obsidian { background: #2a1d5c; border-color: #8a6bff; color: #dccfff; }
/* the level chip in the top bar once prestige is open: a yellow slab with a tag, no pulsing glow */
#hud .level-chip.ready, .level-chip.ready { position: relative; border-color: #b56a00; background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; box-shadow: 0 3px 0 #b56a00; animation: none; }
#hud .level-chip.ready:hover { background: linear-gradient(180deg, #fff06a, #ffcf1f); border-color: #b56a00; }
#hud .level-chip.ready .lv-rank, #hud .level-chip.ready .lv-sub { color: #3d2600; }
.level-chip.ready .lv-ring { color: var(--ink); }
.lvl-pill.ready, body.mobile .lvl-pill.ready { position: relative; border-color: #ffbd1c; box-shadow: 0 0 0 2px #ffbd1c; animation: none; }
.level-chip.ready::after, .lvl-pill.ready::after { content: 'Prestige!'; position: absolute; top: -8px; right: -10px; z-index: 2; padding: 3px 7px 2px; border-radius: 6px; background: linear-gradient(180deg, #ff5b8d, #ff2a66); color: #fff; font: 400 11px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); transform: rotate(5deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .38); pointer-events: none; }
.lvl-pill.ready::after { top: auto; bottom: -9px; right: -12px; padding: 2px 5px 1px; font-size: 9.5px; transform: rotate(-4deg); }