/* WikiPons v9: the other pages (market, auction, battles, group, all cards, trades, guild, friends, messages, achievements, leaderboard, settings, not found). Owner: WP5. Scope: .pg-<page> roots (each page wraps its content in <div class="pg-market"> and so on) and .pg-*. */
/* Direction: the same neutral dark app. Panels step up L1 (--panel), L2 (--panel-2), L3 (--panel-3); the cards and the
   players' own cosmetics carry the color. Commerce red-orange only for money and auction endings, lime only for rewards
   and new, rarity metals only for rarity. Labels 13 to 14px sentence case; numbers in condensed proportional figures
   (Mona Sans slashes the zero of its tabular figures); a timer that ticks puts each digit in a fixed cell with <Tn>.
   Player identities (.who*) are painted by cosmetics.css: this sheet only places and sizes them. */

/* ══ shared ══════════════════════════════════════════════════════════════════════════════════ */
.pg-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 19px; font-weight: 720; letter-spacing: -0.015em; line-height: 1.2; }
.pg-h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.pg-count { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); background: var(--panel-2); color: var(--text-2); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
.pg-none { margin: 0; color: var(--text-2); font-size: 14px; }
.pg-fine { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.pg-hint { display: block; margin: 8px 0 0; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text-2); }
.pg-hint.bad { color: #FF9C8F; }
.pg-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); }
.pg-mono { color: var(--text); }
.pg-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -8px 0 8px; font-size: 14px; font-weight: 650; color: var(--text-2); text-decoration: none; transition: color 160ms ease; }
.pg-back svg { width: 18px; height: 18px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .pg-back:hover { color: var(--text); } }
.pg-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-rows .who, .pg-pick-row .who, .pg-add-row .who { flex: 1 1 auto; min-width: 0; }
.pg-rank { width: 34px; flex: none; text-align: center; font-stretch: 75%; font-weight: 900; font-size: 20px; color: var(--text-2); }
.pg-score { flex: none; font-stretch: 80%; font-weight: 850; font-size: 18px; }
.pg-score small { font-stretch: 100%; font-weight: 600; font-size: 13px; color: var(--text-2); }
.pg-panel { border-radius: var(--r-tile); background: var(--panel); padding: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); }
.pg-sk-title { width: min(360px, 70%); height: 36px; margin: 8px 0 24px; }
.pg-skrows { display: grid; }
.pg-skrows.tall .sk-row { height: 120px; border-radius: var(--r-tile); }

/* the card-back rosette at 8%: every empty banner or step prints it instead of a flat grey box */
.pg-rosette { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, var(--panel-3), var(--panel) 70%); }
.pg-rosette::after {
  content: ''; position: absolute; left: var(--rx, 50%); top: 50%; width: var(--rw, min(92%, 300px)); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.08;
  background: repeating-conic-gradient(from 0deg, #fff 0deg 1.4deg, transparent 1.4deg 4.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 40% 95%, transparent 97%); mask: radial-gradient(closest-side, transparent 38%, #000 40% 95%, transparent 97%);
}

/* rarity chips: a metal swatch and a live count */
.pg-rchips { margin-bottom: 22px; }
.pg-sw { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--metal-0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.pg-sw[data-r="1"] { background: var(--metal-1); } .pg-sw[data-r="2"] { background: var(--metal-2); } .pg-sw[data-r="3"] { background: var(--metal-3); }
.pg-sw[data-r="4"] { background: var(--metal-4); } .pg-sw[data-r="5"] { background: var(--metal-5); }
.pg-chip-n { font-weight: 600; color: var(--text-3); }
.chip[aria-pressed="true"] .pg-chip-n { color: rgba(11, 11, 13, 0.55); }
.pg-chip-ico { width: 16px; height: 16px; fill: currentColor; }

/* sheets (modals render outside the page roots) */
.pg-sheet-text { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.pg-sheet-text b { color: var(--text); }
.pg-sheet-note { margin: 12px 0; text-align: center; font-size: 13px; color: var(--text-2); }
.pg-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.pg-how { display: grid; gap: 12px; margin-top: 10px; }
.pg-how p { margin: 0; line-height: 1.55; }
.pg-how-list { display: grid; gap: 6px; margin: 0 0 16px; }
.pg-how-list div { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-row); background: var(--panel-2); }
.pg-how-list b { font-size: 14.5px; font-weight: 650; }
.pg-how-list span { font-size: 13.5px; color: var(--text-2); }
.pg-join { display: flex; gap: 8px; }
.pg-join .input { flex: 1; font-weight: 800; font-size: 18px; letter-spacing: 0.08em; }
.pg-pick { display: grid; gap: 6px; }
.pg-pick-row, .pg-add-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 10px 8px 12px; border-radius: 14px; background: var(--panel-2); }

/* the card picker (trades, battle decks, showcase; WP4 reuses it) */
.pg-picker-search { display: block; margin-bottom: 10px; }
.pg-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; max-height: 340px; overflow: auto; padding: 12px 6px 6px; overscroll-behavior: contain; }
.pg-picker-none { grid-column: 1 / -1; margin: 18px 0; text-align: center; color: var(--text-2); }
.pg-off { opacity: 0.4; }
.pg-off .card { cursor: not-allowed; }
/* the selected tick sits in the middle of the art, like the collection's select mode (play.css), off the corners that
   hold the rarity code, the reads pill and the card number; the tap goes through it to the card, which deselects it */
.pg-picker-grid .card-slot .tick {
  left: 50%; top: 30%; bottom: auto; transform: translate(-50%, -50%); width: 36px; height: 36px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 8px 18px rgba(0, 0, 0, 0.55);
}
.pg-picker-grid .card-slot .tick svg { width: 20px; height: 20px; }
.pg-compose-coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.pg-compose-note { margin-top: 12px; }
.pg-compose-send { margin-top: 16px; width: 100%; }

/* every page shares one content edge (--page-max, tokens.css): the right edge never jumps between pages of the rail */
.pg-battles, .pg-battle, .pg-friends, .pg-guild, .pg-lb, .pg-trades, .pg-group, .pg-market, .pg-auction, .pg-messages, .pg-cards, .pg-ach, .pg-settings { max-width: var(--page-max, 1280px); }

/* an empty page's first screen: a real object of the player's on the page, no panel box (<Staged>) */
.pg-staged { display: grid; justify-items: center; gap: 8px; padding: 40px 20px 24px; text-align: center; }
.pg-staged > b { font-size: 17px; font-weight: 700; }
.pg-staged > p { margin: 0; max-width: 42ch; color: var(--text-2); }
.pg-staged > .btn { margin-top: 8px; }
.pg-staged-art { display: grid; justify-items: center; max-width: 100%; margin-bottom: 18px; }
.pg-staged-art .pl-hl-backs { margin-bottom: 0; }
/* your own hover card, as others see it */
.pg-hc { width: 320px; max-width: 100%; text-align: left; }
.pg-hc .hovercard-body { border-radius: 18px; overflow: hidden; background: var(--overlay); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border-hi); }
/* three cards fanned from one point, the best in the middle */
.pg-fan { --w: 132px; display: flex; justify-content: center; align-items: flex-end; min-height: calc(var(--w) * 1.4 + 26px); padding-top: 14px; }
.pg-fan-card { position: relative; width: var(--w); flex: none; transform-origin: 50% 120%; }
.pg-fan-card + .pg-fan-card { margin-left: calc(var(--w) * -0.2); }
.pg-fan-card .card, .pg-fan-card .cback { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34), 0 26px 36px -22px rgba(0, 0, 0, 1); }
.pg-fan[data-n="3"] .pg-fan-card:nth-child(1) { transform: rotate(-10deg) translateY(6px); }
.pg-fan[data-n="3"] .pg-fan-card:nth-child(2) { z-index: 1; transform: translateY(-8px); }
.pg-fan[data-n="3"] .pg-fan-card:nth-child(3) { transform: rotate(10deg) translateY(6px); }
.pg-fan[data-n="2"] .pg-fan-card:nth-child(1) { transform: rotate(-7deg); }
.pg-fan[data-n="2"] .pg-fan-card:nth-child(2) { z-index: 1; transform: rotate(6deg) translateY(-6px); }

/* ══ trades ══════════════════════════════════════════════════════════════════════════════════ */
.pg-trade-list { display: grid; gap: 12px; }
.pg-trade { border-radius: 20px; background: var(--panel); padding: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); }
.pg-trade[data-status="declined"], .pg-trade[data-status="cancelled"], .pg-trade[data-status="failed"] { opacity: 0.72; }
.pg-trade-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pg-trade-meta { font-size: 13px; color: var(--text-2); }
.pg-trade-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px 14px 14px 6px; background: var(--panel-3); width: fit-content; max-width: 100%; font-size: 14.5px; }
.pg-trays { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.pg-tray { display: grid; align-content: start; gap: 10px; min-height: 150px; padding: 14px; border-radius: var(--r-tile); background: var(--panel-2); }
.pg-tray-label { font-size: 13px; font-weight: 650; color: var(--text-2); }
.pg-tray-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-tray-card { width: 86px; }
.pg-tray-coins { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 8px; border-radius: var(--r-pill); background: var(--panel-3); font-size: 13px; color: var(--text-2); }
.pg-tray-coins .price b { font-size: 15px; color: var(--text); }
.pg-tray-empty { font-size: 14px; color: var(--text-3); }
.pg-tray-note { margin: 0; font-size: 13px; line-height: 1.45; color: #FF9C8F; }
.pg-swap { align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); box-shadow: 0 0 0 4px var(--panel); }
.pg-swap svg { width: 20px; height: 20px; fill: var(--text); }
.pg-trade-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ══ market ══════════════════════════════════════════════════════════════════════════════════ */
.pg-spend { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--panel); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.pg-spend .price { color: var(--text); }
.pg-agrid { gap: 28px 16px; }
.pg-atile { display: grid; gap: 14px; min-width: 0; }
.pg-atile-card { position: relative; display: block; border-radius: var(--card-radius); text-decoration: none; }
.pg-tchip { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 5; height: 24px; padding: 0 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; white-space: nowrap; font-size: 13px; font-weight: 750; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); }
.pg-tchip.new { background: var(--signal); color: #0B0D04; }
.pg-tchip.end { background: var(--commerce); color: #fff; }
.pg-atile-meta { display: grid; gap: 4px; padding: 0 4px; }
.pg-atile-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pg-atile-line .price { font-size: 16px; }
.pg-atile-line.sub { font-size: 13px; color: var(--text-2); }
.pg-atile-line.sub > span:first-child { white-space: nowrap; }
.pg-atile-line.sub .who { min-width: 0; }
.pg-left { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.pg-left svg { width: 14px; height: 14px; fill: currentColor; }
.pg-left.hot, .pg-ending-meta .hot, .pg-bid-end .hot { color: #FF7A61; }
.pg-ending { margin: -6px 0 28px; }
.pg-ending-rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scroll-snap-type: x proximity; scrollbar-width: none; }
.pg-ending-rail::-webkit-scrollbar { display: none; }
.pg-ending-item { flex: 0 0 250px; scroll-snap-align: start; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-tile); background: var(--panel); text-decoration: none; transition: background-color 160ms ease, transform 160ms var(--p-ease-out); }
@media (hover: hover) and (pointer: fine) { .pg-ending-item:hover { background: var(--panel-2); } }
.pg-ending-art { position: relative; width: 52px; height: 68px; flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--border-hi); }
.pg-ending-art img { width: 100%; height: 100%; object-fit: cover; }
.pg-ending-art > b { font-stretch: 75%; font-weight: 900; font-style: italic; font-size: 26px; color: var(--text-3); }
.pg-ending-art .rcode { position: absolute; left: 4px; top: 4px; }
.pg-ending-meta { display: grid; gap: 3px; min-width: 0; font-size: 13px; color: var(--text-2); font-weight: 650; }
.pg-ending-meta b { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ auction ═════════════════════════════════════════════════════════════════════════════════ */
.pg-auction-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
.pg-auction-grid > .sk-card { width: 100%; }
.pg-auction-card { position: sticky; top: calc(var(--topbar-h) + 24px); }
.pg-auction-main { display: grid; gap: 16px; min-width: 0; }
.pg-auction-main .head { margin-bottom: 0; }
.pg-drain { height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pg-drain i { display: block; height: 100%; background: var(--text); transform-origin: left; transition: transform 500ms linear, background-color 300ms ease; }
.pg-drain[data-hot] i { background: var(--commerce); animation: pg-pulse 1s ease-in-out infinite; }
@keyframes pg-pulse { 50% { opacity: 0.45; } }
.pg-auction-by { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; color: var(--text-2); }
.pg-bid {
  display: grid; gap: 16px; padding: 20px; border-radius: 22px; background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: box-shadow 240ms ease;
}
.pg-bid.outbid { box-shadow: inset 0 0 0 1.5px var(--commerce); }
.pg-bid.leading { box-shadow: inset 0 0 0 1.5px var(--border-act); }
.pg-bid-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pg-bid-now { display: grid; gap: 4px; }
.pg-bid-amount { display: flex; align-items: center; gap: 10px; font-stretch: 75%; font-weight: 900; font-size: 44px; line-height: 1; }
.pg-bid-amount img { width: 36px; height: 36px; border-radius: 50%; }
.pg-bid-who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.pg-bid-end { text-align: right; display: grid; gap: 4px; }
.pg-bid-end b { font-stretch: 75%; font-weight: 900; font-size: 30px; line-height: 1; }
.pg-outbid { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 10px 10px 14px; border-radius: 14px; background: rgba(255, 74, 43, 0.1); color: #FFB3A8; font-size: 14px; font-weight: 650; }
.pg-outbid > span { display: inline-flex; align-items: center; gap: 6px; }
.pg-bid-form { display: grid; gap: 12px; }
.pg-bid-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.pg-bid-meta b { color: var(--text); font-weight: 750; }
.pg-qchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pg-qchip {
  display: grid; gap: 2px; justify-items: start; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 14px; background: var(--panel-2); color: var(--text); text-align: left;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--p-ease-out);
}
.pg-qchip span { font-size: 13px; font-weight: 650; color: var(--text-2); }
.pg-qchip b { font-stretch: 80%; font-weight: 850; font-size: 19px; }
.pg-qchip[aria-pressed="true"] { background: #EDEDF0; color: #0B0B0D; }
.pg-qchip[aria-pressed="true"] span { color: rgba(11, 11, 13, 0.6); }
.pg-qchip:disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .pg-qchip:not(:disabled):not([aria-pressed="true"]):hover { background: var(--panel-3); } }
.pg-stepper { display: flex; gap: 8px; align-items: center; }
.pg-stepper .icon-btn { width: 44px; height: 44px; }
.pg-stepper .input { flex: 1; text-align: center; font-weight: 800; font-size: 20px; }
.pg-seller-tools .row .input { width: 130px; }
.pg-bids { padding: 18px 20px; border-radius: 20px; background: var(--panel); }
.pg-bid-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pg-bid-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: var(--r-row); }
.pg-bid-list li.top { background: var(--panel-2); }
.pg-bid-list li > span { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.pg-bid-list b { font-weight: 800; }
.pg-bid-list small { font-size: 13px; color: var(--text-3); }

/* ══ battles ═════════════════════════════════════════════════════════════════════════════════ */
.pg-bsecs { display: grid; gap: 28px; }
.pg-brow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: 14px; background: var(--panel); color: var(--text); text-decoration: none; transition: background-color 160ms ease, transform 160ms var(--p-ease-out); }
@media (hover: hover) and (pointer: fine) { .pg-brow:hover { background: var(--panel-2); } }
.pg-brow .who { flex: 0 1 260px; min-width: 0; }
.pg-brow-label { flex: 1; min-width: 0; font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-brow-cta { pointer-events: none; }
.pg-brow-go { width: 18px; height: 18px; fill: var(--text-3); flex: none; }
.pg-wl { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 9px; border-radius: 8px; font-stretch: 80%; font-weight: 900; font-size: 15px; }
.pg-wl.w { background: var(--text); color: var(--bg); }
.pg-wl.l { background: var(--panel-3); color: var(--text-2); }
.pg-wl.x { font-stretch: 100%; font-weight: 650; font-size: 13px; background: var(--panel-2); color: var(--text-3); }

/* ══ battle ══════════════════════════════════════════════════════════════════════════════════ */
.pg-stage { display: grid; justify-items: start; gap: 10px; padding: 22px; border-radius: 22px; background: var(--panel); }
.pg-stage.wide { justify-items: stretch; }
.pg-stage-title { margin: 0; font-size: 22px; font-weight: 740; letter-spacing: -0.02em; }
.pg-stage-text { margin: 0 0 6px; color: var(--text-2); font-size: 14.5px; }
.pg-arena {
  display: grid; gap: 0; border-radius: 24px; overflow: hidden; background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pg-pbar { position: relative; display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 20px; background: var(--panel-2); }
.pg-pbar.mine { background: var(--panel-2); }
.pg-hp { position: relative; display: grid; gap: 6px; min-width: 0; }
.pg-hp-num { font-size: 13px; color: var(--text-2); }
.pg-hp-num b { font-stretch: 80%; font-weight: 850; font-size: 18px; color: var(--text); margin-right: 2px; }
.pg-hp-track { position: relative; height: 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.pg-hp-track i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; }
.pg-hp-track .ghost { background: rgba(255, 255, 255, 0.3); transition: transform 420ms var(--p-ease-out) 250ms; }
.pg-hp-track .front { background: var(--text); transition: transform 180ms var(--p-ease-out), background-color 200ms ease; }
.pg-hp-track.low .front { background: var(--bad); }
.pg-dmg {
  position: absolute; right: 0; bottom: 18px; pointer-events: none; font-stretch: 75%; font-weight: 900; font-style: italic; font-size: 48px; line-height: 1; color: var(--bad);
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); animation: pg-dmg 1100ms var(--p-ease-out) both;
}
@keyframes pg-dmg { 0% { opacity: 0; transform: translateY(10px) scale(0.92); } 14% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes pg-fade { 0% { opacity: 0; } 14%, 70% { opacity: 1; } 100% { opacity: 0; } }
.pg-pips { display: flex; gap: 5px; }
.pg-pips i { width: 12px; height: 17px; border-radius: 3px; background: var(--text); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); transition: background-color 240ms ease; }
.pg-pips i.used { background: rgba(255, 255, 255, 0.14); }
.pg-center { display: grid; justify-items: center; gap: 16px; padding: 22px 20px 26px; }
.pg-round {
  display: flex; align-items: center; gap: 16px; width: 100%; justify-content: center;
  font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 26px; line-height: 1; color: var(--text-2);
}
.pg-round::before, .pg-round::after { content: ''; flex: 1; max-width: 160px; height: 1px; background: linear-gradient(90deg, transparent, var(--border-hi)); }
.pg-round::after { transform: scaleX(-1); }
.pg-result { display: grid; justify-items: center; gap: 8px; text-align: center; }
.pg-result > b { font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(64px, 9vw, 96px); line-height: 0.9; padding-right: 0.06em; color: var(--text-2); }
.pg-result.won > b { color: var(--text); }
.pg-result p { margin: 0; color: var(--text-2); font-size: 15px; }
.pg-result-prize { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pg-result-prize img { width: 22px; height: 22px; border-radius: 50%; }
.pg-plus { display: inline-flex; align-items: baseline; color: var(--signal); font-weight: 850; }
.pg-wait { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14.5px; color: var(--text-2); }
.pg-decks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.pg-deck { padding: 16px 18px 18px; border-radius: 20px; background: var(--panel); }
.pg-deck-row { display: flex; gap: 10px; }
.pg-deal { width: 104px; flex: none; animation: pg-deal 460ms var(--p-ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); transition: opacity 240ms ease; }
.pg-deal.used { opacity: 0.4; }
@keyframes pg-deal { from { opacity: 0; transform: translateY(-14px) rotate(-5deg); } }
.pg-attack { display: grid; justify-items: center; gap: 8px; text-align: center; width: 100%; }
.pg-attack-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }
.pg-attack-card { width: 160px; }
.pg-rounds { margin-top: 24px; }
.pg-round-row { border-radius: 14px; background: var(--panel); overflow: hidden; }
.pg-round-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; background: none; color: var(--text); text-align: left; font-size: 14px; }
.pg-round-head .who { flex: none; }
.pg-round-what { flex: 1; min-width: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-round-what b { color: var(--text); font-weight: 650; }
.pg-round-dmg { flex: none; font-size: 13.5px; color: var(--text-2); }
.pg-round-dmg b { color: var(--text); }
.pg-caret { width: 16px; height: 16px; fill: var(--text-3); flex: none; transition: transform 200ms var(--p-ease-out); }
.pg-round-row.open .pg-caret { transform: rotate(180deg); }
.pg-review { display: grid; gap: 8px; padding: 2px 14px 16px; justify-items: start; }
.pg-review-q { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.pg-review-q > svg { width: 18px; height: 18px; margin-top: 2px; fill: #FF9C8F; }
.pg-review-q.good > svg { fill: var(--good); }
.pg-review-sentence { margin: 0; font-size: 14.5px; line-height: 1.5; }
.pg-review-sentence b, .pg-review-a b { font-weight: 750; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pg-review-a, .pg-review-got { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); }

/* the quiz: 2 by 2 answer tiles, keys 1 to 4, a timer that drains linearly */
.pg-quiz { display: grid; gap: 14px; width: 100%; max-width: 820px; padding: 20px; border-radius: 20px; background: var(--panel-2); text-align: left; }
.pg-group > .pg-quiz { max-width: none; margin-bottom: 18px; background: var(--panel); }
.pg-quiz-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); }
.pg-quiz-top b { color: var(--text); font-weight: 700; }
.pg-timer { height: 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pg-timer i { display: block; height: 100%; background: var(--text); transform-origin: left; transition: transform 250ms linear; }
.pg-q { margin: 2px 0 0; font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.pg-q-img { max-height: 220px; border-radius: var(--r-tile); }
.pg-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pg-ans {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px 10px 12px; border: 0; border-radius: 16px;
  background: var(--panel-3); color: var(--text); text-align: left; font-size: 15px; font-weight: 600; line-height: 1.35;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--p-ease-out), opacity 160ms ease;
}
.pg-ans kbd { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font: inherit; font-size: 13px; font-weight: 800; color: var(--text-2); }
.pg-ans img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
@media (hover: hover) and (pointer: fine) { .pg-ans:not(:disabled):hover { background: #2C2C34; } }
.pg-ans.picked { background: #EDEDF0; color: #0B0B0D; }
.pg-ans.picked kbd { background: rgba(11, 11, 13, 0.1); color: #0B0B0D; }
.pg-ans:disabled { opacity: 0.4; cursor: default; }

/* ══ group ═══════════════════════════════════════════════════════════════════════════════════ */
.pg-code { display: inline-grid; place-items: center; height: 48px; padding: 0 20px; border-radius: 14px; background: var(--panel); font-stretch: 80%; font-weight: 900; font-size: 28px; letter-spacing: 0.08em; }
.pg-ready { display: grid; justify-items: center; gap: 4px; padding: 36px 20px; margin-bottom: 18px; border-radius: 22px; background: var(--panel); }
.pg-ready b { font-stretch: 75%; font-weight: 900; font-style: italic; font-size: 96px; line-height: 0.9; }
.pg-ready span { font-size: 15px; color: var(--text-2); }
.pg-board { padding: 18px 20px 20px; border-radius: 20px; background: var(--panel); }
.pg-srow { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--panel-2); }
.pg-srow.me, .pg-lbrow.me, .pg-grow.me { box-shadow: inset 0 0 0 1.5px var(--accent-hi); }

/* ══ all cards ═══════════════════════════════════════════════════════════════════════════════ */
.pg-found { margin-bottom: 30px; }
.pg-found-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.pg-found-head .pg-h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pg-wished { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: #EDEDF0; color: #0B0B0D; font-size: 13px; font-weight: 750; white-space: nowrap; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); }
.pg-wished svg { width: 13px; height: 13px; fill: currentColor; }
.pg-cards .cards { gap: 26px 16px; }

/* ══ guild ═══════════════════════════════════════════════════════════════════════════════════ */
.pg-gstack { display: grid; gap: 18px; }
.pg-gbanner { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; min-height: 230px; padding: 28px; border-radius: var(--r-banner); background: var(--panel); }
.pg-gbanner-art { position: absolute; inset: -40px; z-index: -2; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; object-fit: cover; filter: blur(26px) saturate(1.3) brightness(0.6); transform: scale(1.06); }
.pg-gbanner .pg-rosette { z-index: -2; --rx: 84%; --rw: 360px; }
.pg-gbanner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 11, 13, 0.82), rgba(11, 11, 13, 0.25) 70%); }
.pg-gbanner-body { display: grid; gap: 8px; min-width: 0; }
.pg-gname { margin: 0; font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 4.4vw, 52px); line-height: 0.92; overflow-wrap: anywhere; }
.pg-gbio { margin: 0; max-width: 56ch; color: rgba(245, 245, 247, 0.78); font-size: 15px; }
.pg-gfacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pg-gfacts span { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; color: rgba(245, 245, 247, 0.82); }
.pg-gfacts b { color: #fff; font-weight: 800; }
.pg-gpoints { display: grid; justify-items: end; text-align: right; }
.pg-gpoints b { font-stretch: 75%; font-weight: 900; font-size: 52px; line-height: 0.95; }
.pg-gpoints > span { font-size: 13.5px; color: rgba(245, 245, 247, 0.72); }
.pg-gactions { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(120px, 190px) 38px; align-items: center; gap: 14px; min-height: 60px; padding: 8px 12px; border-radius: 14px; background: var(--panel); }
.pg-role { justify-self: start; height: 26px; padding: 0 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; background: var(--panel-2); color: var(--text-2); font-size: 13px; font-weight: 650; }
.pg-role.lead { background: #EDEDF0; color: #0B0B0D; }
.pg-contrib { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pg-contrib-bar { height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.pg-contrib-bar i { display: block; height: 100%; border-radius: inherit; background: var(--text); transform-origin: left; transition: transform 600ms var(--p-ease-out); }
.pg-contrib b { font-size: 14px; font-weight: 800; min-width: 44px; text-align: right; }
.pg-kick { width: 38px; height: 38px; }
.pg-gboard { display: grid; gap: 12px; }
.pg-resets { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; color: var(--text-2); }
.pg-resets svg { width: 15px; height: 15px; fill: currentColor; }
.pg-grow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px 8px 8px; border-radius: 14px; background: var(--panel); }
.pg-grow-name { flex: 1; min-width: 0; display: grid; }
.pg-grow-name b { font-size: 15px; font-weight: 700; }
.pg-grow-name small { font-size: 13px; color: var(--text-2); }
.pg-gnone { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.pg-gcreate { display: grid; gap: 14px; }
.pg-gcreate .btn { justify-self: start; }
.pg-gcreate .pg-hint { margin: -6px 0 0; }
.pg-inv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); }
.pg-inv-main { flex: 1; min-width: 180px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--text-2); }
.pg-inv-main b { width: 100%; font-size: 15px; color: var(--text); }

/* ══ friends ═════════════════════════════════════════════════════════════════════════════════ */
.pg-add { position: relative; margin-bottom: 20px; }
.pg-add .search { display: block; }
.pg-add-results { display: grid; gap: 6px; margin-top: 8px; padding: 6px; border-radius: var(--r-tile); background: var(--panel); box-shadow: inset 0 0 0 1px var(--border); animation: pg-in 180ms var(--p-ease-out) both; }
.pg-add-results .pg-none { padding: 10px 12px; }
.pg-add-state { flex: none; font-size: 13px; font-weight: 650; color: var(--text-2); }
@keyframes pg-in { from { opacity: 0; transform: translateY(-4px); } }
.pg-frow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 10px 8px 12px; border-radius: 14px; background: var(--panel); transition: background-color 160ms ease; }
.pg-frow .who { flex: 1 1 auto; min-width: 0; }
.pg-frow-acts { display: flex; gap: 6px; flex: none; }
.pg-act { position: relative; width: 32px; height: 32px; }
.pg-act svg { width: 17px; height: 17px; }
.pg-act::after { content: ''; position: absolute; inset: -6px; }
@media (hover: hover) and (pointer: fine) {
  .pg-frow:hover { background: var(--panel-2); }
  .pg-frow-acts:not(.show) { opacity: 0; transition: opacity 160ms ease; }
  .pg-frow:hover .pg-frow-acts, .pg-frow:focus-within .pg-frow-acts { opacity: 1; }
}

/* ══ messages ════════════════════════════════════════════════════════════════════════════════ */
.pg-msg-grid { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
.pg-convs { display: grid; gap: 2px; align-content: start; padding: 6px; border-radius: 20px; background: var(--panel); max-height: calc(100dvh - var(--topbar-h) - 170px); overflow: auto; scrollbar-width: thin; }
.pg-convs > .empty { background: none; padding: 30px 12px; }
.pg-conv { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px; border-radius: 14px; text-decoration: none; color: var(--text); transition: background-color 140ms ease; }
.pg-conv .who { flex: 1; min-width: 0; }
@media (hover: hover) and (pointer: fine) { .pg-conv:hover { background: var(--panel-2); } }
.pg-conv[aria-current="page"] { background: var(--panel-3); }
.pg-conv-side { display: grid; justify-items: end; gap: 4px; flex: none; }
.pg-conv-side small { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.pg-thread { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: max(460px, calc(100dvh - var(--topbar-h) - 170px)); border-radius: 20px; background: var(--panel); overflow: hidden; }
.pg-thread-strip { position: relative; height: 44px; overflow: hidden; }
.pg-thread-strip::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 20%, var(--panel)); }
.pg-thread-head { grid-row: 2; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; box-shadow: 0 1px 0 var(--border); }
.pg-thread-strip + .pg-thread-head { padding-top: 4px; }
.pg-thread:not(:has(.pg-thread-strip)) .pg-thread-head { grid-row: 1 / 3; }
.pg-thread-head .who { flex: 1; min-width: 0; }
.pg-thread-back { display: none; }
.pg-thread-body { display: flex; flex-direction: column; gap: 2px; overflow: auto; padding: 14px 16px; overscroll-behavior: contain; scrollbar-width: thin; }
.pg-thread-body > .pg-none { margin: auto; }
.pg-day { align-self: center; margin: 12px 0 6px; }
.pg-day span { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); background: var(--panel-2); font-size: 13px; font-weight: 600; color: var(--text-2); }
.pg-bub { align-self: flex-start; max-width: min(72%, 560px); padding: 8px 14px; border-radius: 18px; background: var(--panel-3); color: var(--text); animation: pg-in 200ms var(--p-ease-out) both; }
.pg-bub.first { margin-top: 8px; }
.pg-bub:not(.last) { border-bottom-left-radius: 6px; }
.pg-bub:not(.first) { border-top-left-radius: 6px; }
.pg-bub.mine { align-self: flex-end; background: var(--accent); color: #fff; }
.pg-bub.mine:not(.last) { border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.pg-bub.mine:not(.first) { border-top-left-radius: 18px; border-top-right-radius: 6px; }
.pg-bub p { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-bub time { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
.pg-bub.mine time { color: rgba(255, 255, 255, 0.72); text-align: right; }
.pg-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; box-shadow: 0 -1px 0 var(--border); }
.pg-composer .input { flex: 1; min-height: 44px; max-height: 132px; padding: 11px 14px; resize: none; line-height: 22px; overflow-y: auto; }
.pg-send { width: 44px; height: 44px; padding: 0; flex: none; }
.pg-send svg { width: 18px; height: 18px; }
.pg-thread-none > .empty { min-height: 300px; align-content: center; }
.pg-thread-none .pg-staged { padding-top: 24px; }
/* side by side, the staged pane carries the only Friends button */
@media (min-width: 861px) { .pg-msg-grid:has(.pg-thread-none > .pg-staged) .pg-convs > .empty > .btn { display: none; } }

/* ══ achievements ════════════════════════════════════════════════════════════════════════════ */
.pg-ach-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; margin-bottom: 30px; }
.pg-ach-head .head { margin: 0; }
.pg-ring { position: relative; width: 132px; height: 132px; }
.pg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pg-ring circle { fill: none; stroke-width: 8; }
.pg-ring .track { stroke: rgba(255, 255, 255, 0.08); }
.pg-ring .fill { stroke: var(--text); stroke-linecap: round; animation: pg-ring 1100ms var(--p-ease-out) both; }
@keyframes pg-ring { from { stroke-dashoffset: 327; } }
.pg-ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pg-ring b { font-stretch: 75%; font-weight: 900; font-size: 40px; line-height: 0.95; }
.pg-ring span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pg-ring-sk { width: 132px; height: 132px; border-radius: 50%; }
.pg-ach-earned { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--text-2); }
.pg-ach-earned .sk { width: 220px; }
.pg-ach-earned .price { font-size: 17px; color: var(--text); }
.pg-cabinet { margin-bottom: 30px; }
.pg-plaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.pg-plaque { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 16px 14px 14px; border-radius: var(--r-tile); background: var(--panel); }
/* a trophy is a filled plaque; a goal is an empty slot in the cabinet, outlined, its title one step down */
.pg-plaque.done { background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 55%), var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.pg-plaque:not(.done) { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.pg-plaque:not(.done) .pg-plaque-body > b { color: var(--text-2); }
.pg-plaque:not(.done) .pg-medal-lock { box-shadow: 0 0 0 3px var(--bg); }
.pg-cabinet-more { margin-top: 12px; }
.pg-plaque-body { display: grid; gap: 3px; min-width: 0; }
.pg-plaque-body > b { font-size: 15.5px; font-weight: 720; letter-spacing: -0.01em; }
.pg-plaque-text { font-size: 13.5px; color: var(--text-2); }
.pg-plaque-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.pg-title-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pg-plaque-title em { font-style: normal; font-weight: 650; color: var(--text); }
.pg-plaque:not(.done) .pg-plaque-title .rcode { filter: grayscale(1); opacity: 0.6; }
.pg-plaque-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.pg-prog { height: 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pg-prog i { display: block; height: 100%; border-radius: inherit; background: var(--text); transform-origin: left; animation: grow 800ms var(--p-ease-out) both; }
.pg-plaque-side { display: grid; justify-items: end; gap: 4px; }
.pg-plaque-side small { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.pg-plaque:not(.done) .pg-plaque-side .price { opacity: 0.6; }
/* a medallion in the metal of the title's rarity, the category glyph in white */
.pg-medal { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--metal-0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 18px -8px rgba(0, 0, 0, 0.9); }
.pg-medal::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #26262E, #0B0B0F 72%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.pg-medal > svg { position: relative; width: 24px; height: 24px; fill: #fff; }
.pg-medal[data-r="1"] { background: var(--metal-1); } .pg-medal[data-r="2"] { background: var(--metal-2); } .pg-medal[data-r="3"] { background: var(--metal-3); }
.pg-medal[data-r="4"] { background: var(--metal-4); } .pg-medal[data-r="5"] { background: var(--metal-5); }
.pg-medal:not(.done) { filter: grayscale(1) brightness(0.62); }
.pg-medal-lock { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); box-shadow: 0 0 0 3px var(--panel); }
.pg-medal-lock svg { width: 12px; height: 12px; fill: var(--text-2); }

/* ══ leaderboard ═════════════════════════════════════════════════════════════════════════════ */
.pg-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin: 8px 0 22px; }
.pg-podium.sk-podium .sk { border-radius: var(--r-tile) var(--r-tile) 6px 6px; }
.pg-step { display: grid; gap: 12px; min-width: 0; animation: pg-rise 520ms var(--p-ease-out) both; }
.pg-step:nth-child(1) { animation-delay: 80ms; } .pg-step:nth-child(3) { animation-delay: 160ms; }
@keyframes pg-rise { from { opacity: 0; transform: translateY(16px); } }
.pg-step-who { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.pg-step-who .who { max-width: 100%; }
.pg-step-who > b { font-stretch: 80%; font-weight: 850; font-size: 20px; }
.pg-step-who > b small { font-stretch: 100%; font-weight: 600; font-size: 13px; color: var(--text-2); }
.pg-step-open { display: grid; place-items: center; height: 76px; font-size: 14px; font-weight: 650; color: var(--text-3); }
.pg-step-block { position: relative; isolation: isolate; height: var(--h); border-radius: var(--r-tile) var(--r-tile) 6px 6px; overflow: hidden; background: var(--panel); }
.pg-step-block::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: var(--metal-0); }
.pg-step.gold .pg-step-block::before { background: var(--gold); }
.pg-step.silver .pg-step-block::before { background: linear-gradient(90deg, #F4F5F8, #A7ACBB 35%, #FFFFFF 60%, #8E93A3); }
.pg-step.bronze .pg-step-block::before { background: linear-gradient(90deg, #F2C29A, #A8643A 35%, #E8B48A 60%, #7A4222); }
.pg-step-block::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 11, 13, 0.1), rgba(11, 11, 13, 0.7)); }
.pg-step-block > :not(.pg-step-n) { position: absolute; inset: 0; z-index: -1; }
.pg-step-n { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 1; text-align: center; font-stretch: 75%; font-weight: 900; font-style: italic; font-size: 64px; line-height: 0.9; color: rgba(245, 245, 247, 0.92); text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.pg-step.me .pg-step-block { box-shadow: inset 0 0 0 1.5px var(--accent-hi); }
.pg-lbrow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px 8px 8px; border-radius: 14px; background: var(--panel); }
.pg-you {
  position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 12px; padding: 8px 16px 8px 8px; border-radius: 16px;
  background: var(--overlay); box-shadow: inset 0 0 0 1.5px var(--accent-hi), var(--shadow-pop); animation: pg-in 220ms var(--p-ease-out) both;
}
.pg-you .who { flex: 1; min-width: 0; }
.pg-you-gap { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.pg-lb-foot { text-align: center; }

/* ══ settings ════════════════════════════════════════════════════════════════════════════════ */
.pg-set-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.pg-subnav { position: sticky; top: calc(var(--topbar-h) + 24px); display: grid; gap: 2px; }
.pg-subnav a { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: var(--r-row); font-size: 14px; font-weight: 550; color: var(--text-2); text-decoration: none; transition: background-color 140ms ease, color 140ms ease; }
@media (hover: hover) and (pointer: fine) { .pg-subnav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.045); } }
.pg-subnav a[aria-current] { color: var(--text); background: rgba(255, 255, 255, 0.075); }
.pg-set-main { display: grid; gap: 16px; max-width: 760px; }
.pg-scard { scroll-margin-top: calc(var(--topbar-h) + 24px); border-radius: 20px; background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); overflow: hidden; }
.pg-scard > .pg-h2 { margin: 0; padding: 20px 22px 6px; }
.pg-scard-body { display: grid; gap: 14px; padding: 8px 22px 22px; }
.pg-scard-body .setting { padding: 12px 0; }
.pg-scard-text { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.pg-scard-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 60px; padding: 12px 22px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 1px 0 var(--border); }
.pg-scard-foot > span { flex: 1 1 260px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.pg-scard.danger { box-shadow: inset 0 0 0 1px rgba(255, 90, 74, 0.28); }
.pg-scard.danger .pg-scard-foot { background: rgba(255, 90, 74, 0.06); box-shadow: inset 0 1px 0 rgba(255, 90, 74, 0.2); }
.pg-scard.danger .pg-h2 { color: #FF9C8F; }
.pg-kv { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 14px; margin: 4px 0 0; font-size: 14.5px; }
.pg-kv dt { color: var(--text-2); }
.pg-kv dd { margin: 0; font-weight: 650; text-align: right; }
.pg-wallet { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pg-wallet-addr { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: var(--r-pill); background: var(--panel-2); font-weight: 700; font-size: 14px; }
.pg-token { display: grid; gap: 4px; padding: 6px 16px 16px; border-radius: var(--r-tile); background: var(--panel-2); }
.pg-token-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; box-shadow: 0 1px 0 var(--line); }
.pg-token-row > div { display: grid; gap: 2px; flex: 1 1 260px; }
.pg-token-row b { font-weight: 700; }
.pg-token-row span { font-size: 13.5px; color: var(--text-2); }
.pg-token .pg-hint { margin: 0 0 4px; }
.pg-token-get { justify-self: start; margin-top: 12px; }
.pg-token-closed { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--r-tile); background: var(--panel-2); font-size: 14.5px; font-weight: 600; }
.pg-token-closed svg { width: 18px; height: 18px; fill: var(--text-2); flex: none; }

/* ══ not found ═══════════════════════════════════════════════════════════════════════════════ */
.pg-404 { display: grid; justify-items: center; gap: 4px; max-width: 520px; margin: 6vh auto 0; text-align: center; }
.pg-404 .head { justify-items: center; margin-bottom: 18px; }
.pg-404 .head p { margin: 0 auto; }
.pg-404-card { width: 176px; margin-bottom: 26px; transform: rotate(-7deg); animation: pg-404 700ms var(--p-ease-out) both; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.55)); }
@keyframes pg-404 { from { opacity: 0; transform: translateY(18px) rotate(-14deg); } }
.pg-404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ══ smaller screens ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* the card beside the title, the bid panel above the fold */
  .pg-auction-grid { grid-template-columns: 112px minmax(0, 1fr); gap: 12px 16px; }
  .pg-auction-main { display: contents; }
  .pg-auction-card { position: static; grid-column: 1; grid-row: 1 / span 2; }
  .pg-auction-main > .head { grid-column: 2; grid-row: 1; align-self: end; }
  .pg-auction-main > .head h1 { font-size: 28px; overflow-wrap: anywhere; }
  .pg-auction-by { grid-column: 2; grid-row: 2; align-self: start; gap: 6px 8px; font-size: 13px; }
  .pg-drain { grid-column: 1 / -1; grid-row: 3; }
  .pg-bid { grid-column: 1 / -1; grid-row: 4; }
  .pg-bids { grid-column: 1 / -1; grid-row: 5; }
  .pg-bid { padding: 16px; }
  .pg-bid-amount { font-size: 38px; }
  .pg-pbar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 14px 16px; }
  .pg-pbar .pg-hp { grid-column: 1 / -1; grid-row: 2; }
  .pg-pbar .pg-pips { grid-column: 2; grid-row: 1; }
  .pg-center { padding: 18px 14px 20px; }
  .pg-quiz { padding: 16px; }
  .pg-q { font-size: 20px; }
  .pg-answers { grid-template-columns: 1fr; gap: 8px; }
  .pg-ans { min-height: 56px; }
  .pg-rchips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 22px; padding: 0 14px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .pg-rchips::-webkit-scrollbar { display: none; }
  .pg-rchips .chip { flex: none; }
  .pg-decks { grid-template-columns: 1fr; }
  .pg-deck-row { overflow-x: auto; }
  .pg-deal { width: 96px; }
  .pg-attack-card { width: 132px; }
  .pg-round-head { flex-wrap: wrap; row-gap: 4px; padding: 10px 14px; }
  .pg-caret { order: 2; margin-left: auto; }
  .pg-round-what { order: 3; flex-basis: 100%; white-space: normal; }
  .pg-round-dmg { order: 4; flex-basis: 100%; }
  .pg-brow .who { flex-basis: auto; }
  .pg-brow-label { display: none; }
  .pg-trays { grid-template-columns: 1fr; }
  .pg-swap { justify-self: center; margin: -18px 0; z-index: 1; transform: rotate(90deg); }
  .pg-gbanner { grid-template-columns: 1fr; padding: 22px 20px; min-height: 0; }
  .pg-gpoints { justify-items: start; text-align: left; }
  .pg-gpoints b { font-size: 44px; }
  .pg-mrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .pg-mrow .pg-role { grid-column: 2; grid-row: 1; }
  .pg-mrow .pg-contrib { grid-column: 1 / -1; }
  .pg-mrow .pg-kick { grid-column: 2; grid-row: 1; justify-self: end; }
  .pg-mrow:has(.pg-kick) .pg-role { grid-column: 2; margin-right: 46px; }
  .pg-msg-grid { grid-template-columns: 1fr; }
  .pg-convs { max-height: none; }
  .pg-messages.has-thread .pg-convs, .pg-messages:not(.has-thread) .pg-thread-none, .pg-messages.has-thread > .head { display: none; }
  .pg-thread { height: calc(100dvh - var(--topbar-h) - 128px); height: calc(100svh - var(--topbar-h) - 128px); border-radius: 18px; }
  .pg-thread-back { display: inline-grid; }
  .pg-bub { max-width: 84%; }
  .pg-ach-head { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
  .pg-plaques { grid-template-columns: 1fr; }
  .pg-podium { gap: 8px; }
  .pg-step-n { font-size: 48px; }
  .pg-step-who > b { font-size: 17px; }
  .pg-you { bottom: 92px; }
  .pg-you-gap { display: none; }
  .pg-set-layout { grid-template-columns: 1fr; gap: 16px; }
  .pg-subnav { position: static; display: flex; gap: 6px; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; }
  .pg-subnav::-webkit-scrollbar { display: none; }
  .pg-subnav a { flex: none; min-height: 36px; border-radius: var(--r-pill); background: var(--panel); }
  .pg-scard > .pg-h2 { padding: 18px 18px 4px; }
  .pg-scard-body { padding: 8px 18px 18px; }
  .pg-scard-foot { padding: 12px 18px; }
  .pg-scard-foot .btn { margin-left: auto; }
}
@media (max-width: 520px) {
  .pg-staged { padding-top: 28px; }
  .pg-fan { --w: 104px; }
  .pg-qchips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-tray-card { width: 74px; }
  .pg-ending-item { flex-basis: 220px; }
  .pg-plaque { grid-template-columns: 48px minmax(0, 1fr); }
  .pg-medal { width: 48px; height: 48px; }
  .pg-plaque-side { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; gap: 10px; }
  .pg-step-who > b small { display: none; }
  .pg-step-who .who { flex-direction: column; text-align: center; gap: 6px; }
}

/* reduced motion: opacity only (the global rule in app.css already stops movement) */
@media (prefers-reduced-motion: reduce) {
  .pg-dmg { animation: pg-fade 1100ms ease both !important; }
  .pg-drain[data-hot] i { animation: none !important; }
  .pg-404-card { transform: rotate(-7deg); }
}

/* ── v10 launch: the missing-payment finder, legal links, /terms and /privacy ───────────────────── */
.pg-find { box-shadow: none; }
.pg-token-row > .pg-find-row { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; }
.pg-find-row .input { flex: 1; min-width: 0; }
.pg-legal { display: flex; gap: 18px; margin: 4px 0 0; font-size: 13px; }
.pg-legal a, .rail-legal a, .wallet-legal a, .legal-foot a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.pg-legal a:hover, .rail-legal a:hover, .wallet-legal a:hover, .legal-foot a:hover { color: var(--text); }
.rail-legal { display: flex; gap: 14px; margin: 10px 4px 0; font-size: 12px; }
.wallet-legal { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.legal { max-width: 720px; }
.legal-body { display: grid; gap: 10px; }
.legal-body h2 { margin: 18px 0 0; font-size: 17px; font-weight: 760; letter-spacing: -0.01em; }
.legal-body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 68ch; }
.legal-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.legal-foot { margin: 28px 0 0; padding-top: 16px; box-shadow: 0 -1px 0 var(--line); font-size: 13px; color: var(--text-3); display: flex; gap: 14px; flex-wrap: wrap; }