/* profile/css/profile.css - THE PROFILE PAGE's own look (profile/ARCHITECTURE.md): the night, the corn-gold, the
 * header and the footer the World wears, and the account sheet (profile-account.css, a copy of the main game's own
 * rules) set in the page's flow instead of over a game.
 *
 * System fonts only (the site's CSP allows no font host). 16px side gutters on a phone and no horizontal scroll.
 * Inputs are 16px on a phone, because iOS zooms the page into any smaller field it focuses.
 */

:root {
  --ink: #070B1E;
  --night: #0B1233;
  --line: rgba(255, 236, 190, 0.14);
  --parchment: #FBF3E7;
  --muted: #B7B3D6;
  --dim: #8C89B3;
  --gold: #F5C242;
  --gold-hi: #FFE7A0;
  --title-font: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "P052", Georgia, serif;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
@media (min-width: 700px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--ink); color: var(--parchment); font-family: var(--font);
  line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--gold); color: #1a1204; font-weight: bold; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }

/* ---------------------------------------------------------------------------------------------- the header bar */
.bar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 10px max(var(--gutter), env(safe-area-inset-left, 0px));
  background: rgba(7, 11, 30, 0.82); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, .35);
}
.bar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--parchment); text-decoration: none; font-family: var(--title-font); font-weight: bold; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; white-space: nowrap; }
.bar__brand img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.bar__brand em { font-style: italic; text-transform: none; letter-spacing: .02em; color: var(--gold); font-weight: normal; }
.bar__nav { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.bar__link, .bar__play {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  text-decoration: none; font-size: 14px; font-weight: bold; white-space: nowrap;
}
.bar__link { color: #fff; border: 1px solid rgba(255, 231, 160, .35); background: rgba(10, 14, 40, .55); }
.bar__link:hover { border-color: var(--gold); }
.bar__play { color: #1a1204; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 4px 16px rgba(245, 194, 66, .3); }
@media (max-width: 420px) { .bar__brand span { display: none; } }

/* ---------------------------------------------------------------------------------------------- the page */
.page { position: relative; flex: 1 0 auto; padding: 22px var(--gutter) 48px; isolation: isolate; }
.page__art {
  position: absolute; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 11, 30, .35) 0%, rgba(7, 11, 30, .75) 60%, var(--ink) 100%),
    url("/assets/backgrounds/painted/web/splash-key-art.jpg") center 30% / cover no-repeat;
}
.page__sheet { max-width: 780px; margin: 0 auto; }
.page__boot { margin: 120px 0; text-align: center; color: var(--muted); }
.page__boot a { color: var(--gold-hi); }

/* ---------------------------------------------------------------------------------------------- the sheet in the page */
/* Signed out it is the game's own sign-in, a little wider; signed in (.is-in) it turns into the profile: a night sheet,
   the banner and the face across the top, the record, the trophy case, then the account's own controls. */
.page__sheet { max-width: 900px; }
.ud-page .ud-sheet { --pad: 30px; max-width: 900px; width: 100%; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.ud-page .ud-sheet--page .ud-foot { margin-top: 20px; }
.ud-page .ud-sheet.is-in {
  padding-top: 0;
  background: linear-gradient(180deg, #17113D 0%, #100C2B 45%, #0B0921 100%);
  border-color: rgba(245, 194, 66, .38);
  box-shadow: inset 0 1px 0 rgba(255, 231, 160, .12), 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(120, 80, 220, .18);
}
.ud-page .ud-sheet.is-in .ud-head, .ud-page .ud-sheet.is-in .ud-acct-art, .ud-page .ud-sheet.is-in .ud-foot { display: none; }
.ud-page .ud-sheet.is-in .ud-acct-current { margin: 0; padding: 0 0 6px; border: 0; background: none; box-shadow: none; }

/* THE HERO: the side's key art as a banner, the face in a gold ring that takes the side's colour, the level on it. */
.ud-page .ud-pp-hero { --side: #F5C242; --side-glow: rgba(245, 194, 66, .45); position: relative; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 6px; }
.ud-page .ud-pp-hero[data-side="herd"] { --side: #FF8FC7; --side-glow: rgba(255, 143, 199, .5); }
.ud-page .ud-pp-hero[data-side="horde"] { --side: #6BE04A; --side-glow: rgba(107, 224, 74, .45); }
.ud-page .ud-pp-banner {
  height: 200px; margin: 0 calc(-1 * var(--pad));
  background:
    linear-gradient(180deg, rgba(23, 17, 61, 0) 35%, rgba(23, 17, 61, .75) 78%, #17113D 100%),
    url("/assets/backgrounds/painted/web/splash-key-art.jpg") center 32% / cover no-repeat;
}
.ud-page .ud-pp-hero[data-side="horde"] .ud-pp-banner {
  background-image: linear-gradient(180deg, rgba(23, 17, 61, 0) 35%, rgba(23, 17, 61, .75) 78%, #17113D 100%), url("/assets/backgrounds/painted/web/splash-evil.jpg");
}
.ud-page .ud-prof { margin-top: 0; }
.ud-page .ud-prof-head { position: relative; margin-top: -76px; gap: 24px; align-items: flex-start; flex-wrap: nowrap; }
.ud-page .ud-pp-ring {
  position: relative; flex: none; width: 138px; height: 138px; padding: 5px; border-radius: 50%;
  background: conic-gradient(from 210deg, #FFF1BC, #F5C242, var(--side), #B7791F, #FFF1BC);
  box-shadow: 0 0 0 4px #17113D, 0 0 38px var(--side-glow);
}
.ud-page .ud-pp-ring .ud-prof-avatar { display: block; width: 100%; height: 100%; margin: 0; border-radius: 50%; object-fit: cover; border: 3px solid #17113D; box-shadow: none; }
.ud-page .ud-pp-level {
  position: absolute; right: -2px; bottom: 6px; padding: 3px 10px; border-radius: 999px; border: 2px solid #17113D;
  background: linear-gradient(180deg, #FFE7A0, #F5C242); color: #1A1204; font-size: 12px; font-weight: 900; letter-spacing: .08em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.ud-page .ud-prof-words { padding-top: 88px; }
.ud-page .ud-pp-name {
  margin: 0; font-family: var(--title-font); font-weight: bold; font-size: clamp(28px, 5vw, 40px); line-height: 1.08; color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7); overflow-wrap: anywhere;
}
.ud-page .ud-pp-since { margin: 3px 0 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ud-page .ud-prof-side { margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; letter-spacing: .1em; background: rgba(245, 194, 66, .12); color: var(--gold-hi); border: 1px solid rgba(245, 194, 66, .35); }
.ud-page .ud-prof-side--herd { background: rgba(255, 143, 199, .14); color: #FFC4E2; border-color: rgba(255, 143, 199, .5); }
.ud-page .ud-prof-side--horde { background: rgba(107, 224, 74, .12); color: #C9FFB2; border-color: rgba(107, 224, 74, .5); }
.ud-page .ud-prof-title { font-size: 12.5px; letter-spacing: .12em; }
.ud-page .ud-prof-line { font-size: 14px; color: #D9C8F7; }
.ud-page .ud-prof-wallet { margin-top: 6px; color: var(--muted); }
.ud-page .ud-prof-avatar-btn { margin-top: 10px; }
.ud-page .ud-prof-picker { margin-top: 16px; border-color: rgba(245, 194, 66, .3); background: rgba(8, 6, 22, .55); border-radius: 14px; }
.ud-page .ud-prof-pick img { border-radius: 50%; }

/* AT A GLANCE: four big numbers. */
.ud-pp-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 4px; }
.ud-pp-num {
  padding: 14px 8px 12px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 231, 160, .16);
}
.ud-pp-num b { display: block; font-family: var(--title-font); font-size: clamp(24px, 4.6vw, 34px); line-height: 1.05; color: #fff; }
.ud-pp-num span { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ud-pp-num.is-win b { color: var(--mint-teal); }
.ud-pp-num.is-gold b { color: var(--gold); text-shadow: 0 0 18px rgba(245, 194, 66, .45); }

/* THE HEADINGS: gold, spaced, with a rule running out to the right. */
.ud-pp-h { display: flex; align-items: center; gap: 12px; margin: 28px 0 12px; font-size: 13px; letter-spacing: .26em; color: var(--gold); }
.ud-pp-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(245, 194, 66, .5), transparent); }
.ud-pp-h--account { margin-top: 34px; }
/* THE ACCOUNT PANEL (2026-09-30: "We need those buttons ... on top"): ACCOUNT AND SECURITY, moved up under the hero
   by js/account-ui.js mountPage(), as one quiet panel: the buttons first in line, then the devices, two-factor and the
   password form under them. */
.ud-pp-account {
  margin-top: 20px; padding: 4px 16px 14px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid rgba(245, 194, 66, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ud-pp-account .ud-pp-h--account { margin: 14px 0 8px; }
.ud-pp-account > .ud-acct-meta { margin: 0 0 8px; font-size: 12px; }
.ud-pp-account .ud-actions { margin-top: 6px; }
.ud-pp-note { margin: 10px 0 0; font-size: 11.5px; }

/* THE RECORD: a card per game with its win ring. */
.ud-page .ud-prof-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.ud-page .ud-prof-card {
  position: relative; min-height: 132px; padding: 14px 104px 14px 16px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 231, 160, .16);
}
.ud-page .ud-prof-card-head { flex-direction: column; align-items: flex-start; gap: 2px; }
.ud-page .ud-prof-card-head strong { font-size: 15px; color: #fff; }
.ud-page .ud-prof-card-head span { font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.ud-page .ud-prof-wl { font-size: 12px; }
.ud-page .ud-prof-wl b { font-size: 22px; }
.ud-page .ud-prof-pct, .ud-page .ud-prof-bar { display: none; }
.ud-page .ud-prof-extras { font-size: 11px; }
.ud-pp-donut {
  position: absolute; right: 14px; top: 16px; width: 80px; height: 80px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--mint-teal) calc(var(--pct, 0) * 1%), rgba(255, 143, 163, .35) 0);
  box-shadow: 0 0 22px rgba(127, 224, 214, .18);
}
.ud-pp-donut::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #120E30; }
.ud-pp-donut.is-empty { background: rgba(255, 255, 255, .08); box-shadow: none; }
.ud-pp-donut b, .ud-pp-donut span { position: relative; }
.ud-pp-donut b { font-size: 18px; color: #fff; line-height: 1; }
.ud-pp-donut span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ud-page .ud-prof-overall { grid-column: 1 / -1; border-radius: 14px; }

/* THE TROPHY CASE: a meter for the lot, a strip of the games, then a cabinet per game in the game's own colour (the
 * founder, 2026-09-29: "artistically separated by game"). profile/js/profile-trophies.js builds it. */
.ud-page [data-game="sotc"] { --g: #B98CF5; --g-deep: #2A0B5E; --g-glow: rgba(142, 79, 230, .34); }
.ud-page [data-game="gate"] { --g: #3FD58A; --g-deep: #04301A; --g-glow: rgba(47, 191, 113, .3); }
.ud-page [data-game="casino"] { --g: #FF5C74; --g-deep: #4A0512; --g-glow: rgba(224, 50, 75, .32); }
.ud-page [data-game="tenderfoot"] { --g: #FFA24A; --g-deep: #5A2406; --g-glow: rgba(255, 140, 50, .3); }
.ud-page [data-game="tavern"] { --g: #F5B84A; --g-deep: #3A1C06; --g-glow: rgba(240, 169, 59, .3); }
.ud-page [data-game="chess"] { --g: #FF4FB8; --g-deep: #3A0A45; --g-glow: rgba(255, 79, 184, .3); }
.ud-pp-case-head { display: flex; align-items: center; gap: 14px; }
.ud-pp-case-head .ud-pp-h { flex: 1; margin-bottom: 0; }
.ud-pp-case-tally { margin-top: 28px; white-space: nowrap; font-weight: bold; font-size: 13px; color: var(--gold-hi); }
.ud-pp-meter { height: 8px; margin: 12px 0 4px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.ud-pp-meter-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #B98CF5, #3FD58A 25%, #FF5C74 50%, #FFA24A 75%, #F5B84A); box-shadow: 0 0 12px rgba(245, 194, 66, .5); transition: width .9s var(--ease); }

.ud-pp-games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; }
.ud-pp-chip {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding: 10px 4px 9px; border-radius: 14px;
  text-decoration: none; color: #fff; border: 1px solid rgba(255, 255, 255, .08); border-top: 2px solid var(--g);
  background: radial-gradient(120% 90% at 50% 0%, var(--g-glow), transparent 70%), rgba(8, 6, 22, .6);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.ud-pp-chip:hover, .ud-pp-chip:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px var(--g-glow); }
.ud-pp-chip img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.ud-pp-chip-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.ud-pp-chip-n { font-size: 14px; color: var(--g); }
.ud-pp-chip.is-full .ud-pp-chip-n::after { content: " \2605"; }

.ud-pp-cab {
  position: relative; margin-top: 18px; padding: 18px 16px 18px; border-radius: 20px; overflow: hidden; scroll-margin-top: 76px;
  background: radial-gradient(130% 80% at 0% 0%, var(--g-glow), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%), rgba(8, 6, 22, .66);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -8px 0 rgba(0, 0, 0, .28), 0 14px 30px rgba(0, 0, 0, .35);
}
.ud-pp-cab::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--g-deep), var(--g), var(--g-deep)); }
.ud-pp-cab-head { display: flex; align-items: center; gap: 14px; cursor: pointer; }
/* FOLDING CABINETS (2026-09-30: "each section can be rolled up / down for the games"): every cabinet starts folded to
   its head and meter; its head, its Show button, its chip on the strip or Open all unfolds it. */
.ud-pp-case-tools { display: flex; justify-content: flex-end; margin: 4px 0 0; }
.ud-pp-case-all { min-height: 32px; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(245, 194, 66, .45); background: rgba(245, 194, 66, .08); color: var(--gold-hi); font: inherit; font-size: 12.5px; font-weight: bold; cursor: pointer; }
.ud-pp-case-all:hover { background: rgba(245, 194, 66, .16); }
.ud-pp-cab-fold {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px 4px 14px; border-radius: 999px;
  border: 1px solid var(--g); background: color-mix(in srgb, var(--g) 12%, transparent); color: #fff; font: inherit; font-size: 12.5px; font-weight: bold; cursor: pointer;
}
.ud-pp-cab-fold::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.ud-pp-cab.is-open .ud-pp-cab-fold::after { transform: translateY(2px) rotate(-135deg); }
.ud-pp-cab-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.ud-pp-cab.is-open .ud-pp-cab-body { grid-template-rows: 1fr; }
.ud-pp-cab-inner { min-height: 0; overflow: hidden; }
.ud-pp-cab:not(.is-open) { padding-bottom: 14px; }
.ud-pp-cab-icon { flex: none; width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 0 0 2px var(--g), 0 8px 18px rgba(0, 0, 0, .55), 0 0 26px var(--g-glow); }
.ud-pp-cab-words { flex: 1; min-width: 0; }
.ud-pp-cab-name { margin: 0; font-family: var(--title-font); font-size: 21px; line-height: 1.15; color: #fff; text-shadow: 0 2px 14px var(--g-glow); }
.ud-pp-cab-line { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ud-pp-cab-count { flex: none; white-space: nowrap; font-weight: bold; font-size: 15px; color: var(--g); }
.ud-pp-cab-meter { height: 6px; margin: 12px 0 2px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.ud-pp-cab-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--g-deep), var(--g)); box-shadow: 0 0 10px var(--g-glow); transition: width .9s var(--ease); }
.ud-pp-group { margin-top: 12px; }
.ud-pp-group-h { margin: 6px 0 0; font-size: 11px; font-weight: bold; letter-spacing: .22em; color: var(--g); }
.ud-pp-cab-note { margin: 10px 0 0; font-size: 11.5px; }
.ud-pp-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 12px; }
.ud-pp-medal { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px 10px; border-radius: 14px; text-align: center; }
.ud-pp-medal-art { display: block; width: 88px; height: 88px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transition: transform .3s var(--ease), filter .3s; }
.ud-pp-medal.is-earned { background: radial-gradient(circle at 50% 34%, rgba(245, 194, 66, .16), transparent 62%); }
.ud-pp-medal.is-earned .ud-pp-medal-art { filter: drop-shadow(0 0 14px rgba(245, 194, 66, .5)) drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.ud-pp-medal.is-earned:hover .ud-pp-medal-art { transform: translateY(-4px) rotate(-5deg) scale(1.06); }
.ud-pp-medal.is-locked .ud-pp-medal-art { filter: grayscale(1) brightness(.5) contrast(.95); opacity: .8; }
.ud-pp-medal b { margin-top: 4px; font-size: 12.5px; line-height: 1.25; color: #fff; }
.ud-pp-medal span { font-size: 11px; line-height: 1.3; color: #CDB8F2; }
.ud-pp-medal.is-locked b { color: #A9A3CC; }
.ud-pp-medal.is-locked span { color: #85819F; }
.ud-pp-medal .ud-pp-when { margin-top: 2px; font-size: 10px; letter-spacing: .12em; color: var(--gold); }
.ud-pp-cab .ud-pp-medal.is-earned { background: radial-gradient(circle at 50% 34%, var(--g-glow), transparent 62%); }
.ud-pp-cab .ud-pp-medal.is-earned .ud-pp-medal-art { filter: drop-shadow(0 0 14px var(--g-glow)) drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }

@media (max-width: 760px) {
  .ud-page .ud-prof-stats { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .page { padding-top: 12px; }
  .ud-page .ud-sheet { --pad: 16px; border-radius: 14px; }
  .ud-page .ud-acct-art { margin-left: -16px; margin-right: -16px; height: 132px; }
  .ud-page .ud-acct-art-line { left: 16px; }
  .ud-page input, .ud-page select, .ud-page textarea { font-size: 16px; }
  .ud-page .ud-actions .ud-btn { flex: 1 1 auto; text-align: center; }
  .ud-page .ud-pp-banner { height: 150px; }
  .ud-page .ud-prof-head { flex-direction: column; align-items: center; text-align: center; margin-top: -84px; gap: 12px; }
  .ud-page .ud-pp-ring { width: 124px; height: 124px; }
  .ud-page .ud-prof-words { flex-basis: auto; width: 100%; padding-top: 0; }
  .ud-pp-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ud-pp-games { gap: 5px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ud-pp-cab-fold { padding: 4px 10px; }
  .ud-pp-cab-fold .ud-pp-cab-fold-word { display: none; }
  .ud-pp-chip { padding: 8px 2px 7px; }
  .ud-pp-chip img { width: 34px; height: 34px; border-radius: 9px; }
  .ud-pp-chip-name { display: none; }
  .ud-pp-cab { padding: 16px 8px 14px; border-radius: 16px; }
  .ud-pp-cab-head, .ud-pp-cab-meter, .ud-pp-group-h, .ud-pp-cab-note { margin-left: 6px; margin-right: 6px; }
  .ud-pp-cab-icon { width: 46px; height: 46px; border-radius: 12px; }
  .ud-pp-cab-name { font-size: 18px; }
  .ud-pp-medals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .ud-pp-medal { padding: 6px 2px 8px; }
  .ud-pp-medal-art { width: 68px; height: 68px; }
  .ud-pp-medal b { font-size: 11.5px; }
  .ud-pp-medal span { font-size: 10.5px; }
}

/* ---------------------------------------------------------------------------------------------- the SOTC wallet */
/* The founder, 2026-09-30: "a wallet feature to My Profile ... a transaction log ... make the wallet look cool as well.
   Cool is a rule." (profile/js/profile-wallet.js) A foil card with a turning holographic rim, a shimmer and the coin,
   beside the ledger. The Herd in candy pink and gold, the Horde in toxic green and violet. */
@property --sw-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ud-pp-wallet { --sw-hi: #FF8FC7; --sw-lo: #F5C242; --sw-in: #7FE0D6; --sw-out: #FF8FB1; --sw-body-a: #3B1447; --sw-body-b: #1B0E33; }
.ud-pp-wallet[data-side="horde"] { --sw-hi: #6BE04A; --sw-lo: #B57BFF; --sw-body-a: #12301F; --sw-body-b: #190E33; }
.sw { display: grid; gap: 18px; }
@media (min-width: 780px) {
  .sw { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; }
  /* the card rides beside the ledger as the page scrolls it, under the sticky bar */
  .sw .sw-card { position: sticky; top: 84px; }
}
.sw-wait { margin: 8px 0; color: var(--muted); }

.sw-card {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; padding: 20px 22px 18px;
  min-height: 262px; display: flex; flex-direction: column; gap: 14px;
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--sw-hi) 34%, transparent) 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--sw-lo) 26%, transparent) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px),
    linear-gradient(145deg, var(--sw-body-a), var(--sw-body-b));
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 0 40px color-mix(in srgb, var(--sw-hi) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14);
  transform: perspective(900px) rotateX(0deg); transition: transform .5s var(--ease);
}
@media (hover: hover) { .sw-card:hover { transform: perspective(900px) rotateX(4deg) translateY(-3px); } }
.sw-card__rim {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--sw-a), var(--sw-lo), var(--sw-hi), #7FE0D6, #B57BFF, var(--sw-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sw-rim 6s linear infinite;
}
@keyframes sw-rim { to { --sw-a: 360deg; } }
.sw-card__shine {
  position: absolute; inset: -40% auto -40% -60%; width: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, .16) 55%, transparent);
  transform: rotate(14deg); animation: sw-shine 5.5s var(--ease) infinite 1s;
}
@keyframes sw-shine { 0% { left: -60%; } 38%, 100% { left: 130%; } }
.sw-card > *:not(.sw-card__rim):not(.sw-card__shine) { position: relative; z-index: 1; }
.sw-card__top { display: flex; align-items: center; justify-content: space-between; }
.sw-card__chip {
  padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: bold; letter-spacing: .24em; color: #1A1026;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 2px 10px rgba(245, 194, 66, .35);
}
.sw-card__crest { width: 34px; height: 34px; opacity: .9; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.sw-card__mid { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sw-card__coin { position: relative; flex: 0 0 auto; width: 92px; height: 92px; display: grid; place-items: center; perspective: 400px; }
.sw-card__coin::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sw-hi) 55%, transparent) 0%, transparent 68%);
  animation: sw-glow 2.6s ease-in-out infinite alternate;
}
.sw-card__coin img { position: relative; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)); animation: sw-coin 5s ease-in-out infinite; }
@keyframes sw-coin { 0%, 100% { transform: translateY(0) rotateY(0deg); } 25% { transform: translateY(-5px) rotateY(0deg); } 50% { transform: translateY(0) rotateY(180deg); } 75% { transform: translateY(-5px) rotateY(360deg); } }
@keyframes sw-glow { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
.sw-card__amount { display: flex; flex-direction: column; min-width: 0; }
.sw-card__num {
  font-family: var(--title-font); font-size: clamp(40px, 10vw, 58px); line-height: 1; font-weight: bold; letter-spacing: .01em;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--gold-hi) 40%, var(--gold) 75%, #C98A12 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 18px rgba(245, 194, 66, .35));
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-card__unit { margin-top: 6px; font-size: 13px; font-weight: bold; letter-spacing: .3em; color: var(--sw-hi); }
.sw-card__line { margin-top: 2px; font-size: 13px; color: var(--muted); }
.sw-card__flow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sw-flow { padding: 8px 12px; border-radius: 14px; background: rgba(5, 4, 16, .45); border: 1px solid rgba(255, 255, 255, .08); }
.sw-flow b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.sw-flow span { font-size: 11.5px; color: var(--dim); }
.sw-flow.is-in b { color: var(--sw-in); }
.sw-flow.is-out b { color: var(--sw-out); }
.sw-card__games { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-card__games-h { font-size: 10.5px; letter-spacing: .22em; color: var(--dim); margin-right: 2px; }
.sw-card__games img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12); }

.sw-book {
  border-radius: 20px; padding: 14px 14px 12px; background: linear-gradient(180deg, rgba(20, 14, 44, .92), rgba(10, 8, 26, .92));
  border: 1px solid rgba(245, 194, 66, .22); box-shadow: inset 0 1px 0 rgba(255, 231, 160, .08), 0 14px 36px rgba(0, 0, 0, .4);
}
.sw-book__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 4px 10px; }
.sw-book__h { margin: 0; font-size: 12.5px; letter-spacing: .26em; color: var(--gold); }
.sw-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .08); }
.sw-tab { min-height: 32px; padding: 4px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: bold; cursor: pointer; }
.sw-tab.is-on { color: #1A1026; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 2px 10px rgba(245, 194, 66, .3); }
.sw-rows { display: flex; flex-direction: column; gap: 6px; }
.sw-day { margin: 8px 6px 2px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.sw-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .05);
  animation: sw-row .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes sw-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sw-row:hover { background: rgba(255, 255, 255, .06); }
.sw-row__icon { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); background: #120C24; object-fit: cover; }
.sw-row__words { min-width: 0; display: flex; flex-direction: column; }
.sw-row__words b { font-size: 14.5px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-row__words span { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-row__when { font-style: normal; white-space: nowrap; }
.sw-row__amt { padding: 4px 10px; border-radius: 999px; font-weight: bold; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-row.is-in .sw-row__amt { color: var(--sw-in); background: rgba(127, 224, 214, .1); box-shadow: inset 0 0 0 1px rgba(127, 224, 214, .3); }
.sw-row.is-out .sw-row__amt { color: var(--sw-out); background: rgba(255, 143, 177, .1); box-shadow: inset 0 0 0 1px rgba(255, 143, 177, .3); }
.sw-empty { margin: 14px 6px; color: var(--muted); }
.sw-more { display: block; margin: 10px auto 2px; min-height: 36px; padding: 6px 18px; border-radius: 999px; border: 1px solid rgba(245, 194, 66, .45); background: rgba(245, 194, 66, .08); color: var(--gold-hi); font: inherit; font-weight: bold; font-size: 13px; cursor: pointer; }
.sw-more:hover { background: rgba(245, 194, 66, .16); }
.sw-note { margin: 10px 6px 2px; font-size: 12px; color: var(--dim); }
@media (max-width: 520px) {
  .sw-card { padding: 16px 16px 14px; border-radius: 20px; min-height: 0; }
  .sw-card__coin { width: 72px; height: 72px; }
  .sw-card__coin img { width: 64px; height: 64px; }
  .sw-row { gap: 10px; padding: 8px; }
  .sw-row__icon { width: 36px; height: 36px; }
  .sw-row__words b, .sw-row__words span { white-space: normal; }
  .sw-book__head { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------------------------- the footer */
.foot { padding: 34px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); text-align: center; border-top: 1px solid var(--line); background: #05081A; }
.foot__crest { width: 40px; height: 40px; opacity: .9; }
.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 12px auto 14px; max-width: 760px; }
.foot__nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot__nav a:hover { color: var(--gold-hi); }
.foot__legal { margin: 0 auto; font-size: 12.5px; color: var(--dim); }

/* A tap on a game's chip glides to its cabinet. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}