/*! hub-bundle.css - generated by scripts/dev/build-hub-bundle.mjs; do not edit */

/* === hub-fonts.css === */
/**
 * hub-fonts.css - self-hosted latin variable woff2 fonts for hub pages.
 * Sourced via scripts/dev/fetch-hub-fonts.mjs (Google serves one variable
 * file per family; deduped here with font-weight ranges).
 */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/games/common/fonts/space-grotesk-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/games/common/fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/games/common/fonts/merriweather-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/games/common/fonts/jetbrains-mono-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === design-tokens.css === */
/**
 * design-tokens.css - Daily Grid Design System Tokens
 *
 * Central source of truth for all CSS custom properties.
 * Import this FIRST, before games-base.css and shell.css.
 *
 * Individual game pages override --brand-accent / --brand-accent-dim
 * and --brand-bg in their own <style> block. Everything else is shared.
 *
 * See docs/DESIGN-SYSTEM.md for full documentation.
 */

:root {
  /* ═══ Backgrounds ═══════════════════════════════════════════ */
  --dg-bg:  #020617;  /* Hub, Medals, Profile, Practice */
  --dg-bg-game:  #0a0a0f;  /* Game page body */
  --dg-bg-surface:  rgba(255, 255, 255, 0.03);  /* Card / panel */
  --dg-bg-surface-1:  rgba(255, 255, 255, 0.05);  /* Elevated surface */
  --dg-bg-input:  rgba(255, 255, 255, 0.06);  /* Input, toggle track */

  /* ═══ Text ══════════════════════════════════════════════════ */
  --dg-text:  #f8fafc;  /* Primary */
  --dg-text-2:  rgba(248, 250, 252, 0.65);  /* Secondary */
  --dg-text-3:  rgba(248, 250, 252, 0.40);  /* Muted / hint */

  /* ═══ Borders ═══════════════════════════════════════════════ */
  --dg-border:  rgba(255, 255, 255, 0.08);  /* Default */
  --dg-border-1:  rgba(255, 255, 255, 0.12);  /* Emphasized */
  --dg-border-2:  rgba(255, 255, 255, 0.18);  /* Active / highlight */

  /* ═══ Brand Gold ════════════════════════════════════════════ */
  --dg-gold:  #D4A650;
  --dg-gold-light:  #E5C37E;

  /* ═══ Status ════════════════════════════════════════════════ */
  --dg-green:  #22c55e;
  --dg-red:  #ef4444;
  --dg-orange:  #f97316;

  /* ═══ Leaderboard Ranks ════════════════════════════════════ */
  --dg-rank-1:  #f6d27f;
  --dg-rank-2:  #cbd5e1;
  --dg-rank-3:  #d6a16a;

  /* ═══ Typography ════════════════════════════════════════════ */
  --dg-font-ui:  'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --dg-font-heading:  'Space Grotesk', 'Inter', sans-serif;
  --dg-font-marketing:'Merriweather', serif;  /* Landing page hero only */
  --dg-font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* ═══ Border Radius ═════════════════════════════════════════ */
  --dg-radius-sm:  8px;
  --dg-radius-md:  12px;
  --dg-radius-lg:  16px;
  --dg-radius-xl:  24px;
  --dg-radius-full:  9999px;

  /* ═══ Shadows ═══════════════════════════════════════════════ */
  --dg-shadow-card:  0 4px 24px -4px rgba(0, 0, 0, 0.35);
  --dg-shadow-modal:  0 20px 60px -8px rgba(0, 0, 0, 0.60);
  --dg-shadow-btn:  0 2px 12px rgba(0, 0, 0, 0.25);

  /* ═══ Blur ══════════════════════════════════════════════════ */
  --dg-blur-sm:  blur(12px);
  --dg-blur-md:  blur(20px);
  --dg-blur-lg:  blur(28px);

  /* ═══ Tab Bar / Safe Area (keep in sync with tab-bar.css) ═══ */
  /*
  * --dg-tab-bar-h: physical height of the floating tab bar.
  * --dg-bottom-clear: total clearance needed at the bottom of any
  *  scrollable page that carries the tab bar, so the last line of
  *  content is never hidden behind the bar or the iOS home indicator.
  *
  * Usage: apply the `.tab-bar-clear` utility class (defined below)
  *  to the outermost scrollable container on every tab-bar page.
  */
  --dg-tab-bar-h:  64px;
  --dg-bottom-clear:  calc(var(--dg-tab-bar-h) + env(safe-area-inset-bottom, 0px) + 0.75rem);

  /* ═══ Per-game Accent Defaults ══════════════════════════════ */
  /* Each game's <style> block overrides these two variables.  */
  --brand-accent:  #888888;
  --brand-accent-dim: #666666;
}

/* ─── Tab Bar Bottom Clearance Utility ─────────────────────────
 * Add class="tab-bar-clear" to the outermost scrollable element
 * on any page that mounts tab-bar.js.
 */
.tab-bar-clear {
  padding-bottom: var(--dg-bottom-clear) !important;
}

@media (min-width: 900px) {
  .tab-bar-clear {
  padding-bottom: 2rem !important;
  }
}

/* Hide scrollbars site-wide while keeping scroll behavior */
html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

/* === hub-tailwind.css === */
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-700:oklch(50.5% .213 27.518);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-cyan-300:oklch(86.5% .127 207.078);--color-cyan-400:oklch(78.9% .154 211.53);--color-cyan-500:oklch(71.5% .143 215.221);--color-sky-300:oklch(82.8% .111 230.318);--color-sky-400:oklch(74.6% .16 232.661);--color-sky-500:oklch(68.5% .169 237.323);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-violet-300:oklch(81.1% .111 293.571);--color-violet-400:oklch(70.2% .183 293.541);--color-violet-500:oklch(60.6% .25 292.717);--color-fuchsia-300:oklch(83.3% .145 321.434);--color-fuchsia-500:oklch(66.7% .295 322.15);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-950:oklch(12.9% .042 264.695);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.top-3{top:calc(var(--spacing) * 3)}.right-3{right:calc(var(--spacing) * 3)}.bottom-6{bottom:calc(var(--spacing) * 6)}.left-1\/2{left:50%}.z-50{z-index:50}.z-\[55\]{z-index:55}.z-\[60\]{z-index:60}.z-\[62\]{z-index:62}.z-\[80\]{z-index:80}.z-\[100\]{z-index:100}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:0}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-32{height:calc(var(--spacing) * 32)}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-5\/6{width:83.3333%}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-\[94\%\]{width:94%}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:0}.min-w-\[120px\]{min-width:120px}.flex-1{flex:1}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-\[1\.9rem\]{border-radius:1.9rem}.rounded-\[1rem\]{border-radius:1rem}.rounded-\[2\.5rem\]{border-radius:2.5rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-300\/30{border-color:#ffd2364d}@supports (color:color-mix(in lab, red, red)){.border-amber-300\/30{border-color:color-mix(in oklab, var(--color-amber-300) 30%, transparent)}}.border-amber-400\/20{border-color:#fcbb0033}@supports (color:color-mix(in lab, red, red)){.border-amber-400\/20{border-color:color-mix(in oklab, var(--color-amber-400) 20%, transparent)}}.border-amber-400\/30{border-color:#fcbb004d}@supports (color:color-mix(in lab, red, red)){.border-amber-400\/30{border-color:color-mix(in oklab, var(--color-amber-400) 30%, transparent)}}.border-amber-500\/20{border-color:#f99c0033}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/20{border-color:color-mix(in oklab, var(--color-amber-500) 20%, transparent)}}.border-amber-500\/30{border-color:#f99c004d}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/30{border-color:color-mix(in oklab, var(--color-amber-500) 30%, transparent)}}.border-cyan-400\/30{border-color:#00d2ef4d}@supports (color:color-mix(in lab, red, red)){.border-cyan-400\/30{border-color:color-mix(in oklab, var(--color-cyan-400) 30%, transparent)}}.border-emerald-300\/30{border-color:#5ee9b54d}@supports (color:color-mix(in lab, red, red)){.border-emerald-300\/30{border-color:color-mix(in oklab, var(--color-emerald-300) 30%, transparent)}}.border-emerald-500\/20{border-color:#00bb7f33}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/20{border-color:color-mix(in oklab, var(--color-emerald-500) 20%, transparent)}}.border-emerald-500\/30{border-color:#00bb7f4d}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/30{border-color:color-mix(in oklab, var(--color-emerald-500) 30%, transparent)}}.border-indigo-400\/30{border-color:#7d87ff4d}@supports (color:color-mix(in lab, red, red)){.border-indigo-400\/30{border-color:color-mix(in oklab, var(--color-indigo-400) 30%, transparent)}}.border-red-400\/20{border-color:#ff656833}@supports (color:color-mix(in lab, red, red)){.border-red-400\/20{border-color:color-mix(in oklab, var(--color-red-400) 20%, transparent)}}.border-rose-500\/30{border-color:#ff23574d}@supports (color:color-mix(in lab, red, red)){.border-rose-500\/30{border-color:color-mix(in oklab, var(--color-rose-500) 30%, transparent)}}.border-sky-400\/30{border-color:#00bcfe4d}@supports (color:color-mix(in lab, red, red)){.border-sky-400\/30{border-color:color-mix(in oklab, var(--color-sky-400) 30%, transparent)}}.border-sky-500\/30{border-color:#00a5ef4d}@supports (color:color-mix(in lab, red, red)){.border-sky-500\/30{border-color:color-mix(in oklab, var(--color-sky-500) 30%, transparent)}}.border-slate-200{border-color:var(--color-slate-200)}.border-violet-400\/30{border-color:#a685ff4d}@supports (color:color-mix(in lab, red, red)){.border-violet-400\/30{border-color:color-mix(in oklab, var(--color-violet-400) 30%, transparent)}}.border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/5{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-amber-300\/15{background-color:#ffd23626}@supports (color:color-mix(in lab, red, red)){.bg-amber-300\/15{background-color:color-mix(in oklab, var(--color-amber-300) 15%, transparent)}}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/10{background-color:color-mix(in oklab, var(--color-amber-500) 10%, transparent)}}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab, red, red)){.bg-black\/70{background-color:color-mix(in oklab, var(--color-black) 70%, transparent)}}.bg-black\/75{background-color:#000000bf}@supports (color:color-mix(in lab, red, red)){.bg-black\/75{background-color:color-mix(in oklab, var(--color-black) 75%, transparent)}}.bg-cyan-500\/10{background-color:#00b7d71a}@supports (color:color-mix(in lab, red, red)){.bg-cyan-500\/10{background-color:color-mix(in oklab, var(--color-cyan-500) 10%, transparent)}}.bg-emerald-400\/20{background-color:#00d29433}@supports (color:color-mix(in lab, red, red)){.bg-emerald-400\/20{background-color:color-mix(in oklab, var(--color-emerald-400) 20%, transparent)}}.bg-emerald-500\/10{background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/10{background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.bg-fuchsia-500\/10{background-color:#e12afb1a}@supports (color:color-mix(in lab, red, red)){.bg-fuchsia-500\/10{background-color:color-mix(in oklab, var(--color-fuchsia-500) 10%, transparent)}}.bg-indigo-500\/10{background-color:#625fff1a}@supports (color:color-mix(in lab, red, red)){.bg-indigo-500\/10{background-color:color-mix(in oklab, var(--color-indigo-500) 10%, transparent)}}.bg-red-700{background-color:var(--color-red-700)}.bg-rose-500\/10{background-color:#ff23571a}@supports (color:color-mix(in lab, red, red)){.bg-rose-500\/10{background-color:color-mix(in oklab, var(--color-rose-500) 10%, transparent)}}.bg-sky-500\/10{background-color:#00a5ef1a}@supports (color:color-mix(in lab, red, red)){.bg-sky-500\/10{background-color:color-mix(in oklab, var(--color-sky-500) 10%, transparent)}}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-950{background-color:var(--color-slate-950)}.bg-transparent{background-color:#0000}.bg-violet-500\/10{background-color:#8d54ff1a}@supports (color:color-mix(in lab, red, red)){.bg-violet-500\/10{background-color:color-mix(in oklab, var(--color-violet-500) 10%, transparent)}}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.object-contain{object-fit:contain}.p-0{padding:0}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:var(--spacing)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-16{padding-bottom:calc(var(--spacing) * 16)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[15px\]{font-size:15px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.3em\]{--tw-tracking:.3em;letter-spacing:.3em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-amber-100{color:var(--color-amber-100)}.text-amber-200{color:var(--color-amber-200)}.text-amber-200\/80{color:#fee685cc}@supports (color:color-mix(in lab, red, red)){.text-amber-200\/80{color:color-mix(in oklab, var(--color-amber-200) 80%, transparent)}}.text-amber-200\/90{color:#fee685e6}@supports (color:color-mix(in lab, red, red)){.text-amber-200\/90{color:color-mix(in oklab, var(--color-amber-200) 90%, transparent)}}.text-amber-300{color:var(--color-amber-300)}.text-amber-300\/90{color:#ffd236e6}@supports (color:color-mix(in lab, red, red)){.text-amber-300\/90{color:color-mix(in oklab, var(--color-amber-300) 90%, transparent)}}.text-amber-400{color:var(--color-amber-400)}.text-amber-500{color:var(--color-amber-500)}.text-black{color:var(--color-black)}.text-cyan-300{color:var(--color-cyan-300)}.text-emerald-300{color:var(--color-emerald-300)}.text-emerald-400{color:var(--color-emerald-400)}.text-emerald-400\/90{color:#00d294e6}@supports (color:color-mix(in lab, red, red)){.text-emerald-400\/90{color:color-mix(in oklab, var(--color-emerald-400) 90%, transparent)}}.text-fuchsia-300{color:var(--color-fuchsia-300)}.text-indigo-300{color:var(--color-indigo-300)}.text-inherit{color:inherit}.text-red-200{color:var(--color-red-200)}.text-red-300{color:var(--color-red-300)}.text-rose-400{color:var(--color-rose-400)}.text-sky-300{color:var(--color-sky-300)}.text-sky-400{color:var(--color-sky-400)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-violet-300{color:var(--color-violet-300)}.text-white{color:var(--color-white)}.text-zinc-200\/90{color:#e4e4e7e6}@supports (color:color-mix(in lab, red, red)){.text-zinc-200\/90{color:color-mix(in oklab, var(--color-zinc-200) 90%, transparent)}}.text-zinc-300{color:var(--color-zinc-300)}.text-zinc-400{color:var(--color-zinc-400)}.text-zinc-500{color:var(--color-zinc-500)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.accent-amber-400{accent-color:var(--color-amber-400)}.opacity-40{opacity:.4}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.placeholder\:text-zinc-600::placeholder{color:var(--color-zinc-600)}@media (hover:hover){.hover\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:border-amber-500\/40:focus{border-color:#f99c0066}@supports (color:color-mix(in lab, red, red)){.focus\:border-amber-500\/40:focus{border-color:color-mix(in oklab, var(--color-amber-500) 40%, transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}}@media (min-width:48rem){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}

/* === hub.css === */
/**
 * Shared hub chrome - glass cards, skeletons, CTAs, themed page shells.
 * Link after design-tokens.css and before hub-nav.css.
 */

/* ── Base shell ─────────────────────────────────────────────────────────── */
body.dg-hub-nav-page {
  font-family: var(--dg-font-ui);
  background-color: var(--dg-bg);
  color: var(--dg-text);
  min-height: 100dvh;
  overflow-x: hidden;
}

body.dg-hub-nav-page h1,
body.dg-hub-nav-page h2,
body.dg-hub-nav-page h3 {
  font-family: var(--dg-font-heading);
}

.app-header {
  font-family: 'Space Grotesk', sans-serif;
}

/* ── Themed ambient backgrounds ─────────────────────────────────────────── */
body.dg-hub-nav-page[data-hub-theme]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body.dg-hub-nav-page[data-hub-theme="games"]::before {
  background:
  radial-gradient(ellipse 80% 60% at 50% -10%, rgba(60, 90, 160, 0.28), transparent),
  radial-gradient(ellipse 60% 40% at 0% 100%, rgba(35, 60, 120, 0.18), transparent);
}

body.dg-hub-nav-page[data-hub-theme="medals"]::before {
  background:
  radial-gradient(ellipse 70% 50% at 50% -5%, rgba(212, 166, 80, 0.12) 0%, transparent 70%),
  radial-gradient(ellipse 60% 40% at 0% 100%, rgba(35, 60, 120, 0.2) 0%, transparent 70%),
  radial-gradient(ellipse 50% 30% at 100% 0%, rgba(120, 85, 20, 0.12) 0%, transparent 70%);
}

body.dg-hub-nav-page[data-hub-theme="profile"]::before {
  background:
  radial-gradient(ellipse 70% 50% at 50% -5%, rgba(167, 139, 250, 0.1) 0%, transparent 70%),
  radial-gradient(ellipse 60% 40% at 0% 100%, rgba(35, 60, 120, 0.18) 0%, transparent 70%);
}

body.dg-hub-nav-page[data-hub-theme="practice"]::before {
  background:
  radial-gradient(ellipse 80% 60% at 50% -10%, rgba(60, 90, 160, 0.35), transparent),
  radial-gradient(ellipse 70% 40% at 0% 100%, rgba(35, 60, 120, 0.25), transparent),
  radial-gradient(ellipse 50% 30% at 100% 0%, rgba(120, 85, 20, 0.18), transparent);
}

body.dg-hub-nav-page[data-hub-theme="feedback"]::before {
  background:
  radial-gradient(ellipse 80% 60% at 50% -10%, rgba(60, 90, 160, 0.35), transparent),
  radial-gradient(ellipse 70% 40% at 0% 100%, rgba(35, 60, 120, 0.25), transparent);
}

/* ── Glass / cards ──────────────────────────────────────────────────────── */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}

.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 166, 80, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.app-card {
  border: 1px solid rgba(212, 166, 80, 0.2);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.app-card:hover {
  border-color: rgba(212, 166, 80, 0.45);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.app-section-title {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: rgba(212, 166, 80, 0.75);
}

.hub-section-label,
.section-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 10px;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.section-header-row .section-header,
.section-header-row .hub-section-label {
  margin-bottom: 0;
}

/* Alias for pages that used .gold-gradient for headings - prefer .rank-gold */
.gold-gradient {
  background: linear-gradient(135deg, var(--dg-gold, #D4A650), var(--dg-gold-light, #E5C37E));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── CTAs ───────────────────────────────────────────────────────────────── */
.hub-btn-gold {
  background: linear-gradient(135deg, #D4A650, #E5C37E);
  color: #0b1120;
  border: none;
  cursor: pointer;
}

.hub-btn-gold:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Loading skeletons ──────────────────────────────────────────────────── */
.skel {
  background: linear-gradient(
  90deg,
  rgba(255, 255, 255, 0.04) 25%,
  rgba(255, 255, 255, 0.08) 50%,
  rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: skel-wave 1.4s ease infinite;
  border-radius: 6px;
}

@keyframes skel-wave {
  0%,
  100% {
  background-position: 200% 0;
  }
  50% {
  background-position: 0 0;
  }
}

.empty-state {
  opacity: 0.5;
}

/* Profile tab pills - must live in the hub shell, not achievements-ui.css,
  otherwise first paint shows plain text until that stylesheet is lazy-loaded. */
.profile-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px;
  margin-bottom: 1rem;
}
.profile-tabs::-webkit-scrollbar { display: none; }

.profile-tab-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.profile-tab-btn.is-active {
  color: #0b1120;
  background: linear-gradient(135deg, #D4A650, #E5C37E);
  border-color: transparent;
}

.profile-tab-panel.hidden { display: none; }

/* === tab-bar.css === */
/*
 * Liquid Glass Tab Bar - Daily Grid Games
 * Inspired by Apple's iOS 26 Liquid Glass design language (WWDC 2025).
 *
 * Key design properties:
 *  1. Floats above the home indicator with a visible gap (not wall-attached).
 *  2. Horizontal insets - does NOT span the full screen width.
 *  3. All four corners rounded (full pill-oid shape).
 *  4. Visible glass border on all sides - the defining iOS 26 trait.
 *  5. Downward-facing floating shadow (ambient depth).
 *  6. Strong blur + saturation boost - background content shows through clearly.
 *  7. Specular caustic line on the top arc (light refracting off curved glass).
 *  8. Active tab pill - a double-depth inner glass layer.
 *  9. Safe-area inset top applied to body to prevent status-bar overlap.
 */


/* ─── Safe-area top - applied unconditionally so content never shifts ─────── */
/*
 * viewport-fit=cover extends the viewport edge-to-edge behind the status bar.
 * Previously this was gated on the JS-added .dg-tab-bar-active class, which
 * caused a visible layout shift (~44px) after the module loaded.
 * Applying it unconditionally at mobile widths eliminates the jump entirely.
 * (tab-bar.css is only loaded on hub pages, not game pages - safe to do here.)
 */
@media (max-width: 899px) {
  body {
  padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ─── Pre-JS bottom padding ─────────────────────────────────────────────────── */
/*
 * Reserve the tab-bar clearance before JS loads and injects the bar or adds
 * the .dg-tab-bar-page-padding class. Without this the page layout shifts
 * downward when JS runs, causing the visible "jump" on navigation.
 * Applies to any <main> on a hub page at mobile widths.
 */
@media (max-width: 899px) {
  main {
  padding-bottom: var(--dg-bottom-clear, calc(80px + env(safe-area-inset-bottom, 0px)));
  }
}

/* Utility class: pad for status bar on a child element (use when body padding is insufficient) */
.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ─── Bar shell ─────────────────────────────────────────────────────────────── */
.dg-tab-bar {
  position: fixed;

  /* Float above the home indicator with a visible gap */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);

  /* Horizontal insets - not edge-to-edge */
  left: 12px;
  right: 12px;

  z-index: 200;

  /* Liquid Glass material - minimal tint, let content show through */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);

  /* All-rounded pill - the key iOS 26 floating shape */
  border-radius: 26px;

  /* Visible glass border on every side (iOS 26 signature) */
  border: 0.5px solid rgba(255, 255, 255, 0.18);

  /* Floating shadow downward + inner specular glow */
  box-shadow:
  inset 0 1.5px 0 rgba(255, 255, 255, 0.2),
  inset 0 0 0 0.5px rgba(255, 255, 255, 0.06),
  0 14px 44px rgba(0, 0, 0, 0.42),
  0 3px 10px rgba(0, 0, 0, 0.24);

  padding-top: 8px;
}

/* Specular caustic - bright gradient rim along the convex top arc */
.dg-tab-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
  transparent 0%,
  rgba(255, 255, 255, 0.32) 20%,
  rgba(255, 255, 255, 0.62) 50%,
  rgba(255, 255, 255, 0.32) 80%,
  transparent 100%
  );
  border-radius: 999px;
  pointer-events: none;
}

/* Subtle inner bloom from the top edge downward - convex lens depth */
.dg-tab-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to bottom,
  rgba(255, 255, 255, 0.055) 0%,
  transparent 100%
  );
  border-radius: 26px;
  pointer-events: none;
}

/* ─── Tab list ───────────────────────────────────────────────────────────────── */
.dg-tab-bar__list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px 8px;
  margin: 0;
  list-style: none;
}

/* ─── Individual tab ─────────────────────────────────────────────────────────── */
.dg-tab-bar__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.dg-tab-bar__tab a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 6px 4px 4px;
  text-decoration: none;
  position: relative;
  border-radius: 16px;
  transition: opacity 0.15s ease;
}

.dg-tab-bar__tab a:active {
  opacity: 0.7;
}

/* ─── Active pill ────────────────────────────────────────────────────────────── */
/*
 * A second inner glass layer - lighter tint, own specular, brighter border.
 * Creates the "double-depth" look characteristic of iOS 26 Liquid Glass.
 */
.dg-tab-bar__tab.active a {
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.24),
  inset 0 -0.5px 0 rgba(0, 0, 0, 0.1),
  0 1px 6px rgba(0, 0, 0, 0.2);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
}

/* ─── Icon ──────────────────────────────────────────────────────────────────── */
.dg-tab-bar__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dg-tab-bar__icon--logo {
  border-radius: 7px;
  object-fit: cover;
}

.dg-tab-bar__tab a:active .dg-tab-bar__icon {
  transform: scale(0.88);
}

.dg-tab-bar__tab .dg-tab-bar__icon {
  color: rgba(200, 210, 230, 0.45);
}

.dg-tab-bar__tab.active .dg-tab-bar__icon {
  color: rgba(255, 255, 255, 0.95);
  transform: scale(1.05);
}


/* ─── Label ──────────────────────────────────────────────────────────────────── */
.dg-tab-bar__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: color 0.2s ease;
  /* Use the shared UI font stack (Space Grotesk loads on all game pages) */
  font-family: var(--dg-font-ui, 'Space Grotesk', 'Inter', -apple-system, sans-serif);
  color: rgba(200, 210, 230, 0.45);
}

.dg-tab-bar__tab.active .dg-tab-bar__label {
  color: rgba(255, 255, 255, 0.9);
}

/* ─── Badge (unread count) ───────────────────────────────────────────────────── */
.dg-tab-bar__badge {
  position: absolute;
  top: 0;
  right: 2px;
  transform: none;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid rgba(8, 12, 26, 0.8);
  pointer-events: none;
  z-index: 2;
}

.dg-tab-bar__badge--gold {
  background: linear-gradient(135deg, #D4A650, #E5C37E);
  color: #1a1205;
  border-color: rgba(8, 12, 26, 0.85);
  box-shadow: 0 0 8px rgba(212, 166, 80, 0.45);
}

/* ─── Page padding (content clears the floating bar) ────────────────────────── */
/*
 * Uses --dg-bottom-clear from design-tokens.css.
 * Also aliased as .tab-bar-clear in design-tokens.css - use either.
 * Equivalent to: calc(64px + env(safe-area-inset-bottom, 0px) + 0.75rem)
 */
.dg-tab-bar-page-padding {
  padding-bottom: var(--dg-bottom-clear, calc(80px + env(safe-area-inset-bottom, 0px))) !important;
}

/* ─── Desktop: hide tab bar (≥ 900px matches games-base.css nav breakpoint) ─── */
@media (min-width: 900px) {
  .dg-tab-bar {
  display: none !important;
  }
  html.dg-tab-bar-active body {
  padding-top: 0;
  }
  .dg-tab-bar-page-padding {
  padding-bottom: 2rem !important;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dg-tab-bar__icon,
  .dg-tab-bar__label {
  transition: none;
  }
}

/* === hub-nav.css === */
/**
 * Desktop hub navigation + responsive hub page layout.
 * Mobile uses the liquid glass tab bar (tab-bar.css).
 * Fonts are self-hosted via hub-fonts.css (linked by each hub page).
 */

.hub-page-main {
  width: 100%;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.5rem;
}

.hub-mobile-only {
  display: block;
}

.hub-page-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.rank-gold {
  background: linear-gradient(135deg, var(--dg-gold, #D4A650), var(--dg-gold-light, #E5C37E));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--dg-gold-light, #E5C37E);
}

.hub-page-header svg.hub-mobile-header-icon {
  color: var(--dg-gold-light, #E5C37E);
}

.hub-mobile-header-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  object-fit: cover;
}

.hub-mobile-header-icon--pwa {
  border-radius: 11px;
  box-shadow:
  0 0 0 0.5px rgba(255, 255, 255, 0.12),
  0 4px 14px rgba(212, 166, 80, 0.3);
}

.hub-mobile-header-icon--medals {
  color: var(--dg-gold-light, #E5C37E);
}

.hub-mobile-header-icon--profile {
  color: var(--dg-gold-light, #E5C37E);
}

/* !important: beats utility .flex on the same node (e.g. hub-desktop-only … flex). */
.hub-desktop-only {
  display: none !important;
}

.hub-desktop-hero {
  text-align: center;
  margin-bottom: 2.5rem;
}

.hub-desktop-hero__title {
  font-family: 'Merriweather', serif;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
}

.hub-gold-gradient {
  background: linear-gradient(135deg, #D4A650, #E5C37E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hub-medals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.dg-hub-nav {
  display: none;
}

/* Never inherit page-local .glass bar styling onto the hub nav */
#dg-hub-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

@media (min-width: 900px) {
  .dg-hub-nav {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  box-shadow: none;
  }

  /* Home-page fonts: all hub pages + in-game desktop */
  body.dg-hub-site-fonts .dg-hub-nav,
  body.dg-hub-site-fonts .desktop-only,
  body.dg-hub-site-fonts .hub-page-main,
  body.dg-hub-site-fonts main.flex-grow {
  font-family: 'Inter', sans-serif;
  }

  body.dg-hub-site-fonts .desktop-only h1,
  body.dg-hub-site-fonts .desktop-only h2,
  body.dg-hub-site-fonts .desktop-only h3,
  body.dg-hub-site-fonts .hub-page-main h1,
  body.dg-hub-site-fonts .hub-page-main h2,
  body.dg-hub-site-fonts .hub-page-main h3,
  body.dg-hub-site-fonts .hub-desktop-hero__title,
  body.dg-hub-site-fonts main.flex-grow h1,
  body.dg-hub-site-fonts main.flex-grow h2 {
  font-family: 'Merriweather', serif;
  }

  body.dg-hub-site-fonts .dg-hub-nav__title {
  font-family: 'Inter', sans-serif;
  }

  .dg-hub-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
  }

  .dg-hub-nav__brand:hover {
  transform: scale(1.03);
  }

  .dg-hub-nav__logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  object-fit: cover;
  }

  .dg-hub-nav__logo--game {
  border-radius: 0.5rem;
  box-shadow: none;
  }

  .dg-hub-nav__title {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  }

  .dg-hub-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  }

  .dg-hub-nav__links a {
  color: #f8fafc;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  }

  .dg-hub-nav__links a:hover {
  color: #f59e0b;
  }

  .dg-hub-nav__links a.is-active {
  color: #f59e0b;
  font-weight: 700;
  }

  .dg-hub-nav__badge {
  position: absolute;
  top: -8px;
  right: -12px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #D4A650, #E5C37E);
  color: #1a1205;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(8, 12, 26, 0.85);
  box-shadow: 0 0 8px rgba(212, 166, 80, 0.45);
  pointer-events: none;
  }

  .hub-page-header {
  display: none !important;
  }

  .hub-desktop-hero {
  margin-bottom: 2.5rem;
  }

  .hub-mobile-only {
  display: none !important;
  }

  .hub-desktop-only {
  display: block !important;
  }

  /* Preserve flex containers that also carry utility .flex */
  .hub-desktop-only.flex {
  display: flex !important;
  }

  /* Explicit hero show - medals/profile only toggle the title block */
  header.hub-desktop-only.hub-desktop-hero {
  display: block !important;
  }

  .hub-page-main {
  /* !important: beats accidental late re-inject of hub-critical mobile max-width */
  max-width: 72rem !important;
  padding: 4.5rem 1.5rem 3rem;
  }

  .hub-medals-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  }

  .hub-profile-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  }

  .hub-profile-layout .hub-profile-span-full {
  width: 100%;
  }

  body.dg-hub-nav-page .hub-desktop-only > main,
  body.dg-hub-nav-page .hub-page-main {
  padding-top: 5rem;
  }

  body.dg-hub-nav-page main.flex-grow {
  padding-top: 5rem;
  }
}

@media (min-width: 1200px) {
  .hub-medals-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ─── Skip link (keyboard / screen reader) ─────────────────────────── */
.dg-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.dg-skip-link:focus {
  position: fixed;
  left: 1rem;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  width: auto;
  height: auto;
  overflow: visible;
}

@media (min-width: 900px) {
  .dg-skip-link:focus {
  top: calc(env(safe-area-inset-top, 0px) + 4.5rem);
  }
}

.dg-hub-nav__links a:focus-visible {
  outline: 2px solid rgb(245 158 11);
  outline-offset: 3px;
  border-radius: 6px;
}

.dg-hub-nav__brand:focus-visible {
  outline: 2px solid rgb(245 158 11);
  outline-offset: 4px;
  border-radius: 10px;
}

#main-content:focus {
  outline: none;
}

/* === hub-footer.css === */
/**
 * Hub site footer - desktop only (mobile uses bottom tab bar).
 */

.hub-site-footer {
  display: none;
}

@media (min-width: 900px) {
  body:has(.hub-site-footer) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  }

  .hub-site-footer {
  display: block;
  margin-top: auto;
  padding: 3rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  }

  .hub-site-footer__logo {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  margin: 0 auto 1.5rem;
  display: block;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: filter 0.2s ease, opacity 0.2s ease;
  }

  .hub-site-footer:hover .hub-site-footer__logo {
  filter: grayscale(0);
  opacity: 1;
  }

  .hub-site-footer__copy {
  margin: 0 0 2rem;
  font-size: 0.875rem;
  color: rgb(100 116 139);
  }

  .hub-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  }

  .hub-site-footer__links a {
  color: rgb(148 163 184);
  text-decoration: none;
  transition: color 0.15s ease;
  }

  .hub-site-footer__links a:hover {
  color: rgb(245 158 11);
  }

  .hub-site-footer__links a:focus-visible,
  .hub-site-footer__social:focus-visible {
  outline: 2px solid rgb(245 158 11);
  outline-offset: 3px;
  border-radius: 4px;
  }

  .hub-site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(148 163 184);
  text-decoration: none;
  transition: color 0.15s ease;
  }

  .hub-site-footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
  }

  .hub-site-footer__social:hover {
  color: rgb(245 158 11);
  }
}

/* === player-identity.css === */
/* ==========================================================================
  Player identity - themed initials + badge chips + particle effects
  Theme id => classes: pi-g-{gameId} (accent) + pi-t-{type} (treatment).
  Text gradients apply to the inner .pi-text span; particle layers (.pi-fx)
  sit behind it, so outer containers can safely have their own backgrounds.
  Rarity scales intensity: common = tinted color, legendary = full show.
  ========================================================================== */

.pi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  vertical-align: middle;
  overflow: visible;
}

.pi-chip--md { gap: 8px; }

.pi-prefix { flex-shrink: 0; }

.pi-badges {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  overflow: visible;
}

.pi-badge {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: inline-block;
}

.pi-chip--md .pi-badge { width: 32px; height: 32px; }

/* Keep win-modal / completion leaderboard badges compact */
.pi-chip--modal .pi-badge { width: 18px; height: 18px; }
.pi-chip--modal .pi-badge-wrap {
  width: 18px;
  height: 18px;
}
.pi-chip--modal .pi-badge-wrap > img.pi-badge {
  width: 100%;
  height: 100%;
}

/* Leaderboard / chip wraps must size to the badge and not clip particles */
.pi-badges .pi-badge-wrap {
  width: 26px;
  height: 26px;
  overflow: visible;
}
.pi-chip--md .pi-badges .pi-badge-wrap {
  width: 32px;
  height: 32px;
}
.pi-badges .pi-badge-wrap > img.pi-badge {
  width: 100%;
  height: 100%;
}

/* Legendary badge shimmer - soft glow pulse + occasional sheen */
.pi-badge--legendary,
.loadout-badge-img.pi-badge--legendary {
  position: relative;
  border-radius: 50%;
  animation: pi-badge-legend-pulse 2.8s ease-in-out infinite;
}

@keyframes pi-badge-legend-pulse {
  0%, 100% {
  filter: drop-shadow(0 0 2px rgba(246, 210, 127, 0.35));
  }
  50% {
  filter: drop-shadow(0 0 7px rgba(246, 210, 127, 0.7)) brightness(1.08);
  }
}

/* Shiny sheen for calendar badges */
.pi-badge--shiny,
.loadout-badge-img.pi-badge--shiny,
.ach-visual--badge .pi-badge--shiny {
  animation: pi-badge-shiny 2.4s ease-in-out infinite;
}
@keyframes pi-badge-shiny {
  0%, 100% {
  filter: drop-shadow(0 0 2px rgba(226, 232, 240, 0.25)) brightness(1);
  }
  40% {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.55)) brightness(1.18) saturate(1.1);
  }
  55% {
  filter: drop-shadow(0 0 5px rgba(212, 166, 80, 0.45)) brightness(1.08);
  }
}

/* Century of Days - same sheen, grows more on the glow peak */
.pi-badge--century-glow,
.loadout-badge-img.pi-badge--century-glow,
.ach-visual--badge .pi-badge--century-glow {
  animation: pi-badge-century-glow 2.4s ease-in-out infinite;
}
@keyframes pi-badge-century-glow {
  0%, 100% {
  filter: drop-shadow(0 0 2px rgba(226, 232, 240, 0.25)) brightness(1);
  transform: scale(1);
  }
  40% {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.7)) brightness(1.22) saturate(1.15);
  transform: scale(1.16);
  }
  55% {
  filter: drop-shadow(0 0 6px rgba(212, 166, 80, 0.5)) brightness(1.1);
  transform: scale(1.07);
  }
}

/* Millennium Mind - non-circular relic with stronger aura (override round clip) */
.pi-badge--millennium,
.loadout-badge-img.pi-badge--millennium {
  border-radius: 0 !important;
  animation: pi-badge-millennium 2.2s ease-in-out infinite;
}
@keyframes pi-badge-millennium {
  0%, 100% {
  filter:
  drop-shadow(0 0 3px rgba(246, 210, 127, 0.55))
  drop-shadow(0 0 10px rgba(124, 58, 237, 0.45))
  brightness(1);
  transform: scale(1);
  }
  50% {
  filter:
  drop-shadow(0 0 8px rgba(255, 247, 214, 0.85))
  drop-shadow(0 0 16px rgba(167, 139, 250, 0.7))
  brightness(1.14);
  transform: scale(1.04);
  }
}

/* Full Orbit - continuous spin (keeps legendary glow via second animation) */
.pi-badge--orbit-spin,
.loadout-badge-img.pi-badge--orbit-spin,
.ach-visual--badge .pi-badge--orbit-spin,
.pi-badge--legendary.pi-badge--orbit-spin,
.loadout-badge-img.pi-badge--legendary.pi-badge--orbit-spin {
  animation:
  pi-badge-orbit-spin 7s linear infinite,
  pi-badge-legend-pulse 2.8s ease-in-out infinite;
}
@keyframes pi-badge-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Half-K - metallic half-fill shimmer (silver ↔ gold sweep) */
.pi-badge--halfk-shimmer,
.loadout-badge-img.pi-badge--halfk-shimmer,
.ach-visual--badge .pi-badge--halfk-shimmer {
  animation: pi-badge-halfk-shimmer 2.6s ease-in-out infinite;
}
@keyframes pi-badge-halfk-shimmer {
  0%, 100% {
  filter:
  drop-shadow(0 0 2px rgba(203, 213, 225, 0.35))
  brightness(1) saturate(1);
  }
  20% {
  filter:
  drop-shadow(-3px 0 6px rgba(246, 210, 127, 0.55))
  drop-shadow(3px 0 4px rgba(148, 163, 184, 0.4))
  brightness(1.12) saturate(1.15);
  }
  50% {
  filter:
  drop-shadow(0 0 9px rgba(246, 210, 127, 0.75))
  brightness(1.22) saturate(1.25);
  }
  75% {
  filter:
  drop-shadow(3px 0 6px rgba(203, 213, 225, 0.55))
  drop-shadow(-3px 0 4px rgba(212, 166, 80, 0.35))
  brightness(1.1) saturate(1.1);
  }
}

/* Grid Veteran - deep gold laurel shimmer (richer / slower than Half-K) */
.pi-badge--veteran-shimmer,
.loadout-badge-img.pi-badge--veteran-shimmer,
.ach-visual--badge .pi-badge--veteran-shimmer,
.pi-badge--legendary.pi-badge--veteran-shimmer,
.loadout-badge-img.pi-badge--legendary.pi-badge--veteran-shimmer {
  animation: pi-badge-veteran-shimmer 3.4s ease-in-out infinite;
}
@keyframes pi-badge-veteran-shimmer {
  0%, 100% {
  filter:
  drop-shadow(0 0 3px rgba(212, 166, 80, 0.4))
  brightness(1);
  transform: scale(1);
  }
  30% {
  filter:
  drop-shadow(0 0 8px rgba(255, 247, 214, 0.7))
  drop-shadow(0 0 14px rgba(212, 166, 80, 0.55))
  brightness(1.16);
  transform: scale(1.03);
  }
  55% {
  filter:
  drop-shadow(0 0 5px rgba(246, 210, 127, 0.85))
  brightness(1.28) saturate(1.2);
  transform: scale(1.05);
  }
  75% {
  filter:
  drop-shadow(0 0 10px rgba(184, 134, 11, 0.55))
  brightness(1.1);
  transform: scale(1.02);
  }
}

/* Grid Virtuoso - bronze / silver / gold laurel shimmer */
.pi-badge--tri-metal-shimmer,
.loadout-badge-img.pi-badge--tri-metal-shimmer,
.ach-visual--badge .pi-badge--tri-metal-shimmer,
.pi-badge--legendary.pi-badge--tri-metal-shimmer,
.loadout-badge-img.pi-badge--legendary.pi-badge--tri-metal-shimmer {
  animation: pi-badge-tri-metal-shimmer 3.2s ease-in-out infinite;
}
@keyframes pi-badge-tri-metal-shimmer {
  0%, 100% {
  filter:
  drop-shadow(0 0 3px rgba(214, 161, 106, 0.45))
  brightness(1);
  transform: scale(1);
  }
  28% {
  filter:
  drop-shadow(0 0 7px rgba(203, 213, 225, 0.7))
  drop-shadow(0 0 12px rgba(148, 163, 184, 0.4))
  brightness(1.12);
  transform: scale(1.03);
  }
  55% {
  filter:
  drop-shadow(0 0 6px rgba(246, 210, 127, 0.85))
  drop-shadow(0 0 14px rgba(212, 166, 80, 0.5))
  brightness(1.22) saturate(1.15);
  transform: scale(1.05);
  }
  78% {
  filter:
  drop-shadow(0 0 8px rgba(214, 161, 106, 0.55))
  brightness(1.08);
  transform: scale(1.02);
  }
}

/* Grid Virtuoso badge - bronze / silver / gold sparkles around the laurel */
.pi-badge-wrap--tri-metal .pi-badge-fx i {
  font-size: 0.19em;
  line-height: 1;
  color: #f6d27f;
  text-shadow: 0 0 5px currentColor;
  opacity: 0;
  animation: pi-badge-tri-metal-spark 2s ease-in-out infinite;
}
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(3n+1) { color: #d6a16a; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(3n+2) { color: #e8eef7; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(3n) { color: #f6d27f; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(1) { left: 10%; top: 12%; animation-delay: 0s;  font-size: 0.2em; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(2) { left: 80%; top: 16%; animation-delay: 0.22s; font-size: 0.17em; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(3) { left: 14%; top: 68%; animation-delay: 0.44s; font-size: 0.19em; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(4) { left: 76%; top: 64%; animation-delay: 0.66s; font-size: 0.15em; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(5) { left: 48%; top: 2%;  animation-delay: 0.88s; font-size: 0.24em; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(6) { left: 4%;  top: 42%; animation-delay: 1.1s;  font-size: 0.17em; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(7) { left: 88%; top: 44%; animation-delay: 1.32s; font-size: 0.19em; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(8) { left: 50%; top: 86%; animation-delay: 1.54s; font-size: 0.2em; }
.pi-badge-wrap--tri-metal .pi-badge-fx i:nth-child(9) { left: 30%; top: 22%; animation-delay: 0.35s; font-size: 0.14em; }

@keyframes pi-badge-tri-metal-spark {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  20% { transform: scale(1.1) rotate(40deg); opacity: 1; }
  45% { transform: scale(0.9) rotate(90deg); opacity: 0.9; }
  70% { transform: scale(0.4) rotate(140deg); opacity: 0.3; }
  85% { transform: scale(0) rotate(180deg); opacity: 0; }
}

/* Legend of the Grid - continuous vertical-axis coin flip */
.pi-badge--coin-flip,
.loadout-badge-img.pi-badge--coin-flip,
.ach-visual--badge .pi-badge--coin-flip,
.pi-badge--legendary.pi-badge--coin-flip,
.loadout-badge-img.pi-badge--legendary.pi-badge--coin-flip {
  transform-style: preserve-3d;
  animation: pi-badge-coin-flip 2.8s linear infinite;
}
@keyframes pi-badge-coin-flip {
  0% {
  transform: perspective(56px) rotateY(0deg);
  filter: drop-shadow(0 0 3px rgba(246, 210, 127, 0.45)) brightness(1);
  }
  25% {
  transform: perspective(56px) rotateY(90deg);
  filter: drop-shadow(0 0 1px rgba(246, 210, 127, 0.2)) brightness(0.85);
  }
  50% {
  transform: perspective(56px) rotateY(180deg);
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.55)) brightness(1.12);
  }
  75% {
  transform: perspective(56px) rotateY(270deg);
  filter: drop-shadow(0 0 1px rgba(246, 210, 127, 0.2)) brightness(0.85);
  }
  100% {
  transform: perspective(56px) rotateY(360deg);
  filter: drop-shadow(0 0 3px rgba(246, 210, 127, 0.45)) brightness(1);
  }
}

/* Blink Solver - quick opacity flash */
.pi-badge--blink,
.loadout-badge-img.pi-badge--blink,
.ach-visual--badge .pi-badge--blink,
.pi-badge--legendary.pi-badge--blink {
  animation: pi-badge-blink 1.6s steps(2, end) infinite;
}
@keyframes pi-badge-blink {
  0%, 82%, 100% {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.45)) brightness(1);
  }
  88%, 94% {
  opacity: 0.15;
  filter: drop-shadow(0 0 0 transparent) brightness(1.4);
  }
}

/* Lightning Round - electric cyan pulse */
.pi-badge--electric,
.loadout-badge-img.pi-badge--electric,
.ach-visual--badge .pi-badge--electric {
  animation: pi-badge-electric 1.1s ease-in-out infinite;
}
@keyframes pi-badge-electric {
  0%, 100% {
  filter: drop-shadow(0 0 2px rgba(34, 211, 238, 0.35)) brightness(1);
  transform: scale(1);
  }
  40% {
  filter:
  drop-shadow(0 0 8px rgba(103, 232, 249, 0.85))
  drop-shadow(0 0 14px rgba(255, 255, 255, 0.35))
  brightness(1.25);
  transform: scale(1.05);
  }
  55% {
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.4)) brightness(0.95);
  transform: scale(0.98);
  }
}

/* Per-game Speedrunner - cyan streak pulse + motion dashes */
.pi-badge--speedrun,
.loadout-badge-img.pi-badge--speedrun,
.ach-visual--badge .pi-badge--speedrun {
  animation: pi-badge-speedrun 1.15s ease-in-out infinite;
}
@keyframes pi-badge-speedrun {
  0%, 100% {
  filter:
  drop-shadow(-3px 0 3px rgba(34, 211, 238, 0.35))
  drop-shadow(3px 0 3px rgba(165, 243, 252, 0.25))
  brightness(1);
  transform: translateX(0) scale(1);
  }
  35% {
  filter:
  drop-shadow(-6px 0 8px rgba(34, 211, 238, 0.75))
  drop-shadow(4px 0 6px rgba(255, 255, 255, 0.35))
  brightness(1.2);
  transform: translateX(-1px) scale(1.04);
  }
  55% {
  filter:
  drop-shadow(5px 0 6px rgba(103, 232, 249, 0.55))
  brightness(1.08);
  transform: translateX(1px) scale(1.02);
  }
}
.pi-badge-wrap--speedrun .pi-badge-fx i {
  top: auto;
  height: 0.08em;
  width: 0.55em;
  border-radius: 999px;
  font-size: 0;
  color: transparent;
  background: linear-gradient(90deg, transparent, #a5f3fc 35%, #22d3ee 70%, transparent);
  box-shadow: 0 0 4px rgba(34, 211, 238, 0.7);
  animation: pi-badge-speed-dash 0.85s linear infinite;
}
.pi-badge-wrap--speedrun .pi-badge-fx i:nth-child(1) { top: 12%; right: -8%; left: auto; animation-delay: 0s; }
.pi-badge-wrap--speedrun .pi-badge-fx i:nth-child(2) { top: 32%; right: -14%; left: auto; width: 0.7em; animation-delay: 0.15s; }
.pi-badge-wrap--speedrun .pi-badge-fx i:nth-child(3) { top: 50%; right: -10%; left: auto; width: 0.5em; animation-delay: 0.3s; }
.pi-badge-wrap--speedrun .pi-badge-fx i:nth-child(4) { top: 68%; right: -16%; left: auto; width: 0.65em; animation-delay: 0.45s; }
.pi-badge-wrap--speedrun .pi-badge-fx i:nth-child(5) { top: 84%; right: -6%; left: auto; width: 0.4em; animation-delay: 0.6s; }
@keyframes pi-badge-speed-dash {
  0%  { transform: translateX(0.35em) scaleX(0.4); opacity: 0; }
  20%  { opacity: 0.95; }
  100% { transform: translateX(-1.15em) scaleX(1); opacity: 0; }
}

/* Per-game Hidden feat - soft violet pulse + question marks only */
.pi-badge--hidden,
.loadout-badge-img.pi-badge--hidden,
.ach-visual--badge .pi-badge--hidden {
  animation: pi-badge-hidden 2.8s ease-in-out infinite;
}
@keyframes pi-badge-hidden {
  0%, 100% {
  filter:
  drop-shadow(0 0 2px rgba(167, 139, 250, 0.28))
  brightness(0.98)
  saturate(1.05);
  transform: scale(1);
  }
  50% {
  filter:
  drop-shadow(0 0 6px rgba(192, 132, 252, 0.45))
  brightness(1.06)
  saturate(1.12);
  transform: scale(1.03);
  }
}
.pi-badge-wrap--hidden .pi-badge-fx i {
  font-size: 0.2em;
  font-weight: 800;
  color: #c4b5fd;
  text-shadow: 0 0 3px rgba(139, 92, 246, 0.55);
  animation: pi-badge-hidden-spark 2.4s ease-in-out infinite;
}
.pi-badge-wrap--hidden .pi-badge-fx i:nth-child(1) { left: 6%;  top: 10%; animation-delay: 0s;  color: #ddd6fe; }
.pi-badge-wrap--hidden .pi-badge-fx i:nth-child(2) { left: 84%; top: 16%; animation-delay: 0.35s; color: #c4b5fd; font-size: 0.17em; }
.pi-badge-wrap--hidden .pi-badge-fx i:nth-child(3) { left: 12%; top: 70%; animation-delay: 0.7s;  color: #a78bfa; }
.pi-badge-wrap--hidden .pi-badge-fx i:nth-child(4) { left: 78%; top: 66%; animation-delay: 1.05s; color: #ddd6fe; font-size: 0.18em; }
.pi-badge-wrap--hidden .pi-badge-fx i:nth-child(5) { left: 46%; top: 2%;  animation-delay: 1.4s;  color: #c4b5fd; font-size: 0.22em; }
.pi-badge-wrap--hidden .pi-badge-fx i:nth-child(6) { left: 50%; top: 88%; animation-delay: 1.75s; color: #a78bfa; font-size: 0.16em; }
@keyframes pi-badge-hidden-spark {
  0% {
  transform: scale(0.35) rotate(-8deg);
  opacity: 0;
  }
  20% {
  transform: scale(1) rotate(4deg);
  opacity: 0.85;
  }
  55% {
  transform: scale(0.9) rotate(-3deg);
  opacity: 0.5;
  }
  100% {
  transform: scale(0.25) rotate(10deg);
  opacity: 0;
  }
}

/* Sweep Master / Perfect Century - rainbow edge shimmer on the icon */
.pi-badge--sweep-shimmer,
.loadout-badge-img.pi-badge--sweep-shimmer,
.ach-visual--badge .pi-badge--sweep-shimmer,
.pi-badge--legendary.pi-badge--sweep-shimmer {
  animation: pi-badge-sweep-shimmer 2.8s linear infinite;
}
@keyframes pi-badge-sweep-shimmer {
  0% {
  filter:
  drop-shadow(-2px 0 4px rgba(248, 113, 113, 0.45))
  drop-shadow(2px 0 4px rgba(56, 189, 248, 0.35))
  brightness(1);
  }
  33% {
  filter:
  drop-shadow(-2px 0 5px rgba(74, 222, 128, 0.5))
  drop-shadow(2px 0 5px rgba(251, 191, 36, 0.4))
  brightness(1.1);
  }
  66% {
  filter:
  drop-shadow(-2px 0 5px rgba(167, 139, 250, 0.55))
  drop-shadow(2px 0 5px rgba(244, 114, 182, 0.4))
  brightness(1.08);
  }
  100% {
  filter:
  drop-shadow(-2px 0 4px rgba(248, 113, 113, 0.45))
  drop-shadow(2px 0 4px rgba(56, 189, 248, 0.35))
  brightness(1);
  }
}

/* Grid Devotee - rainbow edge shimmer on the icon (same pattern as other badges) */
.pi-badge--devotee,
.loadout-badge-img.pi-badge--devotee,
.ach-visual--badge .pi-badge--devotee {
  animation: pi-badge-devotee 2.8s linear infinite;
}
@keyframes pi-badge-devotee {
  0%, 100% {
  filter:
  drop-shadow(-2px 0 4px rgba(248, 113, 113, 0.45))
  drop-shadow(2px 0 4px rgba(56, 189, 248, 0.4))
  brightness(1.02);
  }
  25% {
  filter:
  drop-shadow(-2px 0 5px rgba(251, 191, 36, 0.5))
  drop-shadow(2px 0 5px rgba(74, 222, 128, 0.45))
  brightness(1.08);
  }
  50% {
  filter:
  drop-shadow(-2px 0 5px rgba(56, 189, 248, 0.5))
  drop-shadow(2px 0 5px rgba(167, 139, 250, 0.45))
  brightness(1.1);
  }
  75% {
  filter:
  drop-shadow(-2px 0 5px rgba(244, 114, 182, 0.5))
  drop-shadow(2px 0 5px rgba(248, 113, 113, 0.4))
  brightness(1.06);
  }
}

/* Top 10 Regular - soft cool glow (weaker than Gold Rush) */
.pi-badge--top10-glow,
.loadout-badge-img.pi-badge--top10-glow,
.ach-visual--badge .pi-badge--top10-glow {
  animation: pi-badge-top10-glow 2.6s ease-in-out infinite;
}
@keyframes pi-badge-top10-glow {
  0%, 100% {
  filter: drop-shadow(0 0 2px rgba(125, 211, 252, 0.3)) brightness(1);
  transform: scale(1);
  }
  50% {
  filter: drop-shadow(0 0 7px rgba(147, 197, 253, 0.55)) brightness(1.08);
  transform: scale(1.03);
  }
}

/* Crew Assembled - soft pink glow that fades in and out */
.pi-badge--crew-glow,
.loadout-badge-img.pi-badge--crew-glow,
.ach-visual--badge .pi-badge--crew-glow {
  animation: pi-badge-crew-glow 2.8s ease-in-out infinite;
}
@keyframes pi-badge-crew-glow {
  0%, 100% {
  filter:
  drop-shadow(0 0 2px rgba(244, 114, 182, 0.2))
  brightness(1);
  transform: scale(1);
  }
  50% {
  filter:
  drop-shadow(0 0 10px rgba(244, 114, 182, 0.75))
  drop-shadow(0 0 18px rgba(251, 113, 133, 0.4))
  brightness(1.08);
  transform: scale(1.03);
  }
}

/* Leaderboard Fixture - soft silver glow that fades in and out */
.pi-badge--fixture-glow,
.loadout-badge-img.pi-badge--fixture-glow,
.ach-visual--badge .pi-badge--fixture-glow {
  animation: pi-badge-fixture-glow 2.8s ease-in-out infinite;
}
@keyframes pi-badge-fixture-glow {
  0%, 100% {
  filter:
  drop-shadow(0 0 2px rgba(203, 213, 225, 0.22))
  brightness(1);
  transform: scale(1);
  }
  50% {
  filter:
  drop-shadow(0 0 10px rgba(226, 232, 240, 0.8))
  drop-shadow(0 0 18px rgba(148, 163, 184, 0.45))
  brightness(1.08);
  transform: scale(1.03);
  }
}

/* Gold Rush - stronger gold pulse than Top 10 glow */
.pi-badge--gold-rush,
.loadout-badge-img.pi-badge--gold-rush,
.ach-visual--badge .pi-badge--gold-rush {
  animation: pi-badge-gold-rush 1.85s ease-in-out infinite;
}
@keyframes pi-badge-gold-rush {
  0%, 100% {
  filter:
  drop-shadow(0 0 3px rgba(212, 166, 80, 0.45))
  drop-shadow(0 0 8px rgba(246, 210, 127, 0.25))
  brightness(1);
  transform: scale(1);
  }
  50% {
  filter:
  drop-shadow(0 0 12px rgba(246, 210, 127, 0.9))
  drop-shadow(0 0 20px rgba(251, 191, 36, 0.45))
  brightness(1.24);
  transform: scale(1.08);
  }
}

/* Per-game Master (100 plays) - soft game-color glow + tiny accent shimmers */
.pi-badge--master,
.loadout-badge-img.pi-badge--master,
.ach-visual--badge .pi-badge--master {
  animation: pi-badge-master-glow 2.6s ease-in-out infinite;
}
@keyframes pi-badge-master-glow {
  0%, 100% {
  filter:
  drop-shadow(0 0 2px color-mix(in srgb, var(--pi-accent, #D4A650) 45%, transparent))
  brightness(1);
  transform: scale(1);
  }
  50% {
  filter:
  drop-shadow(0 0 8px color-mix(in srgb, var(--pi-accent, #D4A650) 70%, transparent))
  drop-shadow(0 0 14px color-mix(in srgb, var(--pi-bright, #f3ddab) 35%, transparent))
  brightness(1.08);
  transform: scale(1.03);
  }
}
.pi-badge-wrap--master {
  --pi-accent: #D4A650;
  --pi-accent2: #9c7429;
  --pi-bright: #f3ddab;
}
.pi-badge-wrap--master .pi-badge-fx i {
  font-size: 0.12em;
  line-height: 1;
  color: var(--pi-bright, #f3ddab);
  text-shadow:
  0 0 4px var(--pi-accent, #D4A650),
  0 0 8px color-mix(in srgb, var(--pi-accent, #D4A650) 55%, transparent);
  opacity: 0;
  animation: pi-badge-master-spark 2.4s ease-in-out infinite;
}
.pi-badge-wrap--master .pi-badge-fx i:nth-child(odd) { color: var(--pi-accent, #D4A650); }
.pi-badge-wrap--master .pi-badge-fx i:nth-child(even) { color: var(--pi-bright, #f3ddab); font-size: 0.09em; }
.pi-badge-wrap--master .pi-badge-fx i:nth-child(1) { left: 12%; top: 14%; animation-delay: 0s; }
.pi-badge-wrap--master .pi-badge-fx i:nth-child(2) { left: 78%; top: 18%; animation-delay: 0.35s; }
.pi-badge-wrap--master .pi-badge-fx i:nth-child(3) { left: 16%; top: 70%; animation-delay: 0.7s; font-size: 0.11em; }
.pi-badge-wrap--master .pi-badge-fx i:nth-child(4) { left: 74%; top: 66%; animation-delay: 1.05s; }
.pi-badge-wrap--master .pi-badge-fx i:nth-child(5) { left: 48%; top: 6%;  animation-delay: 1.4s; font-size: 0.14em; }
.pi-badge-wrap--master .pi-badge-fx i:nth-child(6) { left: 50%; top: 86%; animation-delay: 1.75s; }
@keyframes pi-badge-master-spark {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  22% { transform: scale(1) rotate(25deg); opacity: 0.95; }
  48% { transform: scale(0.85) rotate(55deg); opacity: 0.7; }
  72% { transform: scale(0.35) rotate(90deg); opacity: 0.25; }
  88% { transform: scale(0) rotate(120deg); opacity: 0; }
}

/* Per-game On Fire streak - mid-tier flames (more than kindling, less than blaze) */
.pi-badge--on-fire,
.loadout-badge-img.pi-badge--on-fire,
.ach-visual--badge .pi-badge--on-fire {
  animation: pi-badge-on-fire-glow 1.45s ease-in-out infinite;
}
@keyframes pi-badge-on-fire-glow {
  0%, 100% {
  filter:
  drop-shadow(0 0 3px color-mix(in srgb, var(--pi-accent, #f97316) 40%, transparent))
  brightness(1);
  transform: scale(1);
  }
  50% {
  filter:
  drop-shadow(0 0 8px color-mix(in srgb, var(--pi-accent, #f97316) 55%, transparent))
  drop-shadow(0 -2px 6px color-mix(in srgb, var(--pi-bright, #ffd48a) 30%, transparent))
  brightness(1.06);
  transform: scale(1.03);
  }
}
.pi-badge-wrap--on-fire {
  --pi-accent: #f97316;
  --pi-accent2: #c2410c;
  --pi-bright: #ffd48a;
  --pi-flame-hot: color-mix(in srgb, var(--pi-accent, #f97316) 22%, #ffffff);
  --pi-flame-mid: var(--pi-accent, #f97316);
  --pi-flame-deep: var(--pi-accent2, #c2410c);
}
.pi-badge-wrap--on-fire .pi-badge-fx {
  /* Smaller em base so flame sizes match initials "on Fire" (not full badge width) */
  inset: -22% -8% -4%;
  font-size: 34cqmin;
}
.pi-badge-wrap--on-fire .pi-badge-fx i {
  top: auto;
  bottom: 6%;
  left: 0;
  width: 0.28em;
  height: 0.4em;
  line-height: 0;
  font-size: inherit;
  color: transparent;
  border-radius: 50% 50% 42% 42% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 78%,
  var(--pi-flame-hot, #fff2c0) 0%,
  var(--pi-flame-mid, #f97316) 42%,
  color-mix(in srgb, var(--pi-flame-deep, #c2410c) 80%, transparent) 68%,
  transparent 82%);
  filter: blur(0.55px);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: pi-badge-flame-rise 1.3s cubic-bezier(0.25, 0.4, 0.5, 1) infinite;
}
.pi-badge-wrap--on-fire .pi-badge-fx i:nth-child(1) { left: 14%; animation-delay: 0s; }
.pi-badge-wrap--on-fire .pi-badge-fx i:nth-child(2) { left: 34%; animation-delay: 0.45s; height: 0.48em; }
.pi-badge-wrap--on-fire .pi-badge-fx i:nth-child(3) { left: 56%; animation-delay: 0.85s; }
.pi-badge-wrap--on-fire .pi-badge-fx i:nth-child(4) { left: 76%; animation-delay: 0.25s; height: 0.34em; }
.pi-badge-wrap--on-fire .pi-badge-fx i:nth-child(5) { display: none; }
@keyframes pi-badge-flame-rise {
  0%  { transform: translateY(0.1em) scale(0.5, 0.45) rotate(0deg); opacity: 0; }
  18%  { opacity: 0.9; }
  40%  { transform: translateY(-0.22em) scale(0.9, 1.05) rotate(-4deg); opacity: 0.8; }
  65%  { transform: translateY(-0.5em) scale(0.72, 0.98) rotate(4deg); opacity: 0.5; }
  100% { transform: translateY(-0.9em) scale(0.3, 0.7) rotate(-2deg); opacity: 0; }
}

/* Gold Rush - gold shimmer sparkles around the badge */
.pi-badge-wrap--gold-rush .pi-badge-fx i {
  font-size: 0.16em;
  line-height: 1;
  color: #f6d27f;
  text-shadow:
  0 0 4px rgba(246, 210, 127, 0.9),
  0 0 8px rgba(212, 166, 80, 0.55);
  opacity: 0;
  animation: pi-badge-gold-spark 1.9s ease-in-out infinite;
}
.pi-badge-wrap--gold-rush .pi-badge-fx i:nth-child(odd) { color: #fff7d6; }
.pi-badge-wrap--gold-rush .pi-badge-fx i:nth-child(even) { color: #fbbf24; font-size: 0.13em; }
.pi-badge-wrap--gold-rush .pi-badge-fx i:nth-child(1) { left: 10%; top: 12%; animation-delay: 0s; }
.pi-badge-wrap--gold-rush .pi-badge-fx i:nth-child(2) { left: 80%; top: 16%; animation-delay: 0.22s; }
.pi-badge-wrap--gold-rush .pi-badge-fx i:nth-child(3) { left: 14%; top: 68%; animation-delay: 0.44s; font-size: 0.14em; }
.pi-badge-wrap--gold-rush .pi-badge-fx i:nth-child(4) { left: 76%; top: 64%; animation-delay: 0.66s; }
.pi-badge-wrap--gold-rush .pi-badge-fx i:nth-child(5) { left: 48%; top: 4%;  animation-delay: 0.88s; font-size: 0.2em; color: #fff7d6; }
.pi-badge-wrap--gold-rush .pi-badge-fx i:nth-child(6) { left: 6%;  top: 42%; animation-delay: 1.1s;  font-size: 0.12em; }
.pi-badge-wrap--gold-rush .pi-badge-fx i:nth-child(7) { left: 88%; top: 44%; animation-delay: 1.32s; }
@keyframes pi-badge-gold-spark {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  18% { transform: scale(1.05) rotate(30deg); opacity: 1; }
  42% { transform: scale(0.9) rotate(70deg); opacity: 0.85; }
  68% { transform: scale(0.4) rotate(120deg); opacity: 0.3; }
  85% { transform: scale(0) rotate(160deg); opacity: 0; }
}

/* Meditative - soft fade out and back in */
.pi-badge--meditative-fade,
.loadout-badge-img.pi-badge--meditative-fade,
.ach-visual--badge .pi-badge--meditative-fade {
  animation: pi-badge-meditative-fade 3.8s ease-in-out infinite;
}
@keyframes pi-badge-meditative-fade {
  0%, 100% {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(45, 212, 191, 0.35)) brightness(1);
  }
  45% {
  opacity: 0.28;
  filter: drop-shadow(0 0 1px rgba(45, 212, 191, 0.1)) brightness(0.85);
  }
  55% {
  opacity: 0.22;
  filter: drop-shadow(0 0 0 transparent) brightness(0.8);
  }
}

/* Tortoise - slow mossy plod + shell rock */
.pi-badge--tortoise,
.loadout-badge-img.pi-badge--tortoise,
.ach-visual--badge .pi-badge--tortoise {
  animation: pi-badge-tortoise 4.2s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes pi-badge-tortoise {
  0%, 100% {
  transform: translateX(0) rotate(0deg) scale(1);
  filter:
  drop-shadow(0 2px 3px rgba(34, 197, 94, 0.3))
  drop-shadow(0 0 4px rgba(132, 204, 22, 0.2))
  brightness(1);
  }
  20% {
  transform: translateX(2px) rotate(4deg) scale(1.03);
  filter:
  drop-shadow(0 3px 6px rgba(34, 197, 94, 0.45))
  drop-shadow(0 0 8px rgba(163, 230, 53, 0.35))
  brightness(1.08);
  }
  40% {
  transform: translateX(0) rotate(0deg) scale(1);
  filter:
  drop-shadow(0 2px 3px rgba(34, 197, 94, 0.3))
  brightness(1);
  }
  60% {
  transform: translateX(-2px) rotate(-4deg) scale(1.03);
  filter:
  drop-shadow(0 3px 6px rgba(34, 197, 94, 0.45))
  drop-shadow(0 0 8px rgba(74, 222, 128, 0.35))
  brightness(1.08);
  }
  80% {
  transform: translateX(0) rotate(0deg) scale(1);
  filter:
  drop-shadow(0 2px 3px rgba(34, 197, 94, 0.3))
  brightness(1);
  }
}

/* Badge Collector - treasure sparkle */
.pi-badge--treasure,
.loadout-badge-img.pi-badge--treasure,
.ach-visual--badge .pi-badge--treasure,
.pi-badge--legendary.pi-badge--treasure {
  animation: pi-badge-treasure 2.2s ease-in-out infinite;
}
@keyframes pi-badge-treasure {
  0%, 100% {
  filter: drop-shadow(0 0 2px rgba(246, 210, 127, 0.4)) brightness(1) saturate(1);
  }
  25% {
  filter: drop-shadow(0 0 10px rgba(255, 247, 214, 0.85)) brightness(1.2) saturate(1.25);
  }
  50% {
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.7)) brightness(1.08) saturate(1.1);
  }
  75% {
  filter: drop-shadow(0 0 12px rgba(246, 210, 127, 0.9)) brightness(1.25) saturate(1.3);
  }
}

/* Completionist badge - rainbow aura pulse */
.pi-badge--completionist,
.loadout-badge-img.pi-badge--completionist,
.ach-visual--badge .pi-badge--completionist,
.pi-badge--legendary.pi-badge--completionist {
  animation: pi-badge-completionist 2.4s ease-in-out infinite;
}
@keyframes pi-badge-completionist {
  0%, 100% {
  filter:
  drop-shadow(0 0 4px rgba(248, 113, 113, 0.5))
  drop-shadow(0 0 10px rgba(56, 189, 248, 0.4))
  brightness(1);
  }
  33% {
  filter:
  drop-shadow(0 0 6px rgba(74, 222, 128, 0.55))
  drop-shadow(0 0 12px rgba(251, 191, 36, 0.45))
  brightness(1.12);
  }
  66% {
  filter:
  drop-shadow(0 0 6px rgba(167, 139, 250, 0.6))
  drop-shadow(0 0 12px rgba(244, 114, 182, 0.45))
  brightness(1.1);
  }
}

/* Podium Hunter - intense gold hunt flare (legendary special) */
.pi-badge--podium-hunt,
.loadout-badge-img.pi-badge--podium-hunt,
.ach-visual--badge .pi-badge--podium-hunt,
.pi-badge--legendary.pi-badge--podium-hunt,
.loadout-badge-img.pi-badge--legendary.pi-badge--podium-hunt {
  animation: pi-badge-podium-hunt 1.8s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes pi-badge-podium-hunt {
  0%, 100% {
  filter:
  drop-shadow(0 0 3px rgba(246, 210, 127, 0.55))
  drop-shadow(0 0 10px rgba(184, 134, 11, 0.45))
  brightness(1)
  saturate(1.05);
  transform: scale(1) rotate(0deg);
  }
  18% {
  filter:
  drop-shadow(0 0 8px rgba(255, 247, 214, 0.95))
  drop-shadow(0 0 18px rgba(246, 210, 127, 0.85))
  drop-shadow(0 0 28px rgba(251, 191, 36, 0.55))
  brightness(1.35)
  saturate(1.35);
  transform: scale(1.1) rotate(-2deg);
  }
  32% {
  filter:
  drop-shadow(0 0 4px rgba(212, 166, 80, 0.5))
  brightness(1.05);
  transform: scale(0.97) rotate(1deg);
  }
  55% {
  filter:
  drop-shadow(0 0 12px rgba(255, 255, 255, 0.75))
  drop-shadow(0 0 22px rgba(246, 210, 127, 1))
  drop-shadow(0 0 34px rgba(251, 146, 60, 0.55))
  brightness(1.45)
  saturate(1.4);
  transform: scale(1.12) rotate(2deg);
  }
  72% {
  filter:
  drop-shadow(0 0 6px rgba(246, 210, 127, 0.7))
  brightness(1.12);
  transform: scale(1.02) rotate(-1deg);
  }
}

/* Elite Presence - icy diamond flare + prism sparkles */
.pi-badge--elite,
.loadout-badge-img.pi-badge--elite,
.ach-visual--badge .pi-badge--elite,
.pi-badge--legendary.pi-badge--elite,
.loadout-badge-img.pi-badge--legendary.pi-badge--elite {
  animation: pi-badge-elite 2.1s ease-in-out infinite;
}
@keyframes pi-badge-elite {
  0%, 100% {
  filter:
  drop-shadow(0 0 2px rgba(147, 197, 253, 0.4))
  drop-shadow(0 0 6px rgba(59, 130, 246, 0.25))
  brightness(1)
  saturate(1.02);
  transform: scale(1);
  }
  22% {
  filter:
  drop-shadow(0 0 5px rgba(224, 242, 254, 0.55))
  drop-shadow(0 0 10px rgba(125, 211, 252, 0.4))
  brightness(1.12)
  saturate(1.1);
  transform: scale(1.03);
  }
  40% {
  filter:
  drop-shadow(0 0 3px rgba(147, 197, 253, 0.35))
  brightness(1.02);
  transform: scale(1);
  }
  62% {
  filter:
  drop-shadow(0 0 6px rgba(186, 230, 253, 0.55))
  drop-shadow(0 0 12px rgba(56, 189, 248, 0.35))
  brightness(1.14)
  saturate(1.12);
  transform: scale(1.04);
  }
  80% {
  filter:
  drop-shadow(0 0 4px rgba(125, 211, 252, 0.4))
  brightness(1.05);
  transform: scale(1.01);
  }
}

/* --------------------------------------------------------------------------
  Badge particle wraps - overlays that sit in front of the icon
  -------------------------------------------------------------------------- */
.pi-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  /* Size particles relative to the badge box, not inherited text size */
  container-type: size;
  /* Never steal clicks from loadout / achievement buttons */
  pointer-events: none;
}
.pi-badge-wrap > img {
  display: block;
  position: relative;
  z-index: 0;
}
.pi-badge-fx {
  position: absolute;
  inset: -12% -6% -14%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
  /* Glyph/coin size relative to badge; cqmin when wrap has a size */
  font-size: 26px;
  font-size: 100cqmin;
}
.pi-badge-fx i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  will-change: top, transform, opacity;
}

/* Elite Presence - diamond facets flashing around the badge */
.pi-badge-wrap--elite .pi-badge-fx i {
  font-size: 0.2em;
  color: #bfdbfe;
  text-shadow:
  0 0 3px rgba(191, 219, 254, 0.7),
  0 0 5px rgba(56, 189, 248, 0.4);
  animation: pi-badge-elite-spark 2.2s ease-out infinite;
}
.pi-badge-wrap--elite .pi-badge-fx i:nth-child(1) { left: 14%; top: 16%; animation-delay: 0s;  color: #ffffff; }
.pi-badge-wrap--elite .pi-badge-fx i:nth-child(2) { left: 76%; top: 20%; animation-delay: 0.2s;  color: #7dd3fc; font-size: 0.18em; }
.pi-badge-wrap--elite .pi-badge-fx i:nth-child(3) { left: 18%; top: 64%; animation-delay: 0.4s;  color: #93c5fd; }
.pi-badge-wrap--elite .pi-badge-fx i:nth-child(4) { left: 70%; top: 60%; animation-delay: 0.55s; color: #c4b5fd; font-size: 0.2em; }
.pi-badge-wrap--elite .pi-badge-fx i:nth-child(5) { left: 48%; top: 6%;  animation-delay: 0.7s;  color: #ffffff; font-size: 0.26em; }
.pi-badge-wrap--elite .pi-badge-fx i:nth-child(6) { left: 8%;  top: 42%; animation-delay: 0.9s;  color: #38bdf8; font-size: 0.17em; }
.pi-badge-wrap--elite .pi-badge-fx i:nth-child(7) { left: 84%; top: 44%; animation-delay: 1.1s;  color: #e0f2fe; }
.pi-badge-wrap--elite .pi-badge-fx i:nth-child(8) { left: 50%; top: 82%; animation-delay: 1.3s;  color: #a5b4fc; font-size: 0.22em; }
@keyframes pi-badge-elite-spark {
  0% {
  transform: scale(0.25) rotate(0deg);
  opacity: 0;
  }
  18% {
  transform: scale(1) rotate(12deg);
  opacity: 0.75;
  }
  50% {
  transform: scale(0.85) rotate(-6deg);
  opacity: 0.45;
  }
  100% {
  transform: scale(0.2) rotate(30deg);
  opacity: 0;
  }
}

/* Title Collector - falling letters / word scraps */
.pi-badge-wrap--title-rain .pi-badge-fx i {
  font-size: 0.22em;
  color: #e2c17c;
  text-shadow: 0 0 4px rgba(246, 210, 127, 0.65);
  animation: pi-badge-letter-fall 2.6s linear infinite;
}
.pi-badge-wrap--title-rain .pi-badge-fx i:nth-child(1) { left: 8%;  animation-delay: 0s;  font-size: 0.2em; }
.pi-badge-wrap--title-rain .pi-badge-fx i:nth-child(2) { left: 22%; animation-delay: 0.35s; font-size: 0.18em; color: #f6d27f; }
.pi-badge-wrap--title-rain .pi-badge-fx i:nth-child(3) { left: 38%; animation-delay: 0.7s;  font-size: 0.22em; }
.pi-badge-wrap--title-rain .pi-badge-fx i:nth-child(4) { left: 52%; animation-delay: 1.05s; font-size: 0.19em; color: #c4b5fd; }
.pi-badge-wrap--title-rain .pi-badge-fx i:nth-child(5) { left: 66%; animation-delay: 1.4s;  font-size: 0.17em; }
.pi-badge-wrap--title-rain .pi-badge-fx i:nth-child(6) { left: 78%; animation-delay: 1.75s; font-size: 0.2em; color: #f6d27f; }
.pi-badge-wrap--title-rain .pi-badge-fx i:nth-child(7) { left: 88%; animation-delay: 0.2s;  font-size: 0.16em; }
.pi-badge-wrap--title-rain .pi-badge-fx i:nth-child(8) { left: 14%; animation-delay: 2.0s;  font-size: 0.18em; color: #93c5fd; }
@keyframes pi-badge-letter-fall {
  0%  { top: -8%;  transform: rotate(-8deg); opacity: 0; }
  12%  { opacity: 0.95; }
  55%  { top: 52%;  transform: rotate(6deg); opacity: 0.85; }
  85%  { top: 88%;  transform: rotate(-4deg); opacity: 0.35; }
  100% { top: 108%; transform: rotate(2deg); opacity: 0; }
}
.pi-badge--title-rain,
.loadout-badge-img.pi-badge--title-rain,
.pi-badge--legendary.pi-badge--title-rain {
  animation: pi-badge-title-glow 2.6s ease-in-out infinite;
}
@keyframes pi-badge-title-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(226, 193, 124, 0.35)) brightness(1); }
  50% { filter: drop-shadow(0 0 8px rgba(246, 210, 127, 0.7)) brightness(1.1); }
}

/* Badge Collector - falling gold coins */
.pi-badge-wrap--treasure .pi-badge-fx i {
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  font-size: inherit;
  color: transparent;
  overflow: hidden;
  text-indent: -999px;
  background:
  radial-gradient(circle at 32% 28%, #fff7d6 0%, #f6d27f 35%, #d4a650 68%, #a16207 100%);
  box-shadow:
  inset 0 0 0 1px rgba(161, 98, 7, 0.55),
  0 0 4px rgba(246, 210, 127, 0.65);
  animation: pi-badge-coin-fall 2.6s linear infinite;
}
.pi-badge-wrap--treasure .pi-badge-fx i:nth-child(1) { left: 8%;  animation-delay: 0s;  width: 0.15em; height: 0.15em; }
.pi-badge-wrap--treasure .pi-badge-fx i:nth-child(2) { left: 24%; animation-delay: 0.3s;  width: 0.13em; height: 0.13em; }
.pi-badge-wrap--treasure .pi-badge-fx i:nth-child(3) { left: 40%; animation-delay: 0.65s; width: 0.17em; height: 0.17em; }
.pi-badge-wrap--treasure .pi-badge-fx i:nth-child(4) { left: 54%; animation-delay: 1.0s;  width: 0.12em; height: 0.12em; }
.pi-badge-wrap--treasure .pi-badge-fx i:nth-child(5) { left: 68%; animation-delay: 1.35s; width: 0.16em; height: 0.16em; }
.pi-badge-wrap--treasure .pi-badge-fx i:nth-child(6) { left: 80%; animation-delay: 1.7s;  width: 0.14em; height: 0.14em; }
.pi-badge-wrap--treasure .pi-badge-fx i:nth-child(7) { left: 14%; animation-delay: 2.05s; width: 0.11em; height: 0.11em; }
.pi-badge-wrap--treasure .pi-badge-fx i:nth-child(8) { left: 90%; animation-delay: 0.15s; width: 0.13em; height: 0.13em; }
@keyframes pi-badge-coin-fall {
  0% {
  top: -10%;
  transform: rotateY(0deg) scale(0.7);
  opacity: 0;
  }
  12% { opacity: 1; }
  50% {
  top: 48%;
  transform: rotateY(180deg) scale(1);
  opacity: 0.95;
  }
  85% {
  top: 88%;
  transform: rotateY(300deg) scale(0.85);
  opacity: 0.4;
  }
  100% {
  top: 112%;
  transform: rotateY(360deg) scale(0.6);
  opacity: 0;
  }
}

/* Podium Hunter - gold stars streaking in toward the target */
.pi-badge-wrap--podium-hunt .pi-badge-fx i {
  font-size: 0.34em;
  color: #f6d27f;
  text-shadow:
  0 0 4px rgba(255, 247, 214, 0.95),
  0 0 8px rgba(251, 191, 36, 0.7);
  animation: pi-badge-hunt-spark 1.6s ease-in infinite;
}
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(1) { left: 4%;  top: 8%;  animation-delay: 0s;  color: #fff7d6; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(2) { left: 88%; top: 12%; animation-delay: 0.2s;  color: #fbbf24; font-size: 0.28em; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(3) { left: 10%; top: 72%; animation-delay: 0.4s;  color: #f6d27f; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(4) { left: 82%; top: 68%; animation-delay: 0.55s; color: #fdba74; font-size: 0.3em; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(5) { left: 48%; top: -4%; animation-delay: 0.7s;  color: #fff7d6; font-size: 0.4em; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(6) { left: 2%;  top: 42%; animation-delay: 0.9s;  color: #fbbf24; font-size: 0.26em; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(7) { left: 92%; top: 40%; animation-delay: 1.1s;  color: #f6d27f; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(8) { left: 50%; top: 90%; animation-delay: 1.3s;  color: #fff7d6; font-size: 0.32em; }
@keyframes pi-badge-hunt-spark {
  0% {
  transform: translate(0, 0) scale(0.4) rotate(0deg);
  opacity: 0;
  }
  18% { opacity: 1; }
  55% {
  transform: translate(calc((50% - var(--hx, 0px)) * 0.35), calc((50% - var(--hy, 0px)) * 0.35)) scale(1.15) rotate(40deg);
  opacity: 0.95;
  }
  100% {
  transform: translate(0.35em, 0.35em) scale(0.2) rotate(90deg);
  opacity: 0;
  }
}
/* Pull sparks toward center from each corner */
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(1) { animation-name: pi-badge-hunt-in-br; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(2) { animation-name: pi-badge-hunt-in-bl; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(3) { animation-name: pi-badge-hunt-in-tr; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(4) { animation-name: pi-badge-hunt-in-tl; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(5) { animation-name: pi-badge-hunt-in-down; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(6) { animation-name: pi-badge-hunt-in-right; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(7) { animation-name: pi-badge-hunt-in-left; }
.pi-badge-wrap--podium-hunt .pi-badge-fx i:nth-child(8) { animation-name: pi-badge-hunt-in-up; }
@keyframes pi-badge-hunt-in-br {
  0% { transform: translate(-0.1em, -0.1em) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(0.55em, 0.55em) scale(0.15) rotate(70deg); opacity: 0; }
}
@keyframes pi-badge-hunt-in-bl {
  0% { transform: translate(0.1em, -0.1em) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-0.55em, 0.55em) scale(0.15) rotate(-70deg); opacity: 0; }
}
@keyframes pi-badge-hunt-in-tr {
  0% { transform: translate(-0.1em, 0.1em) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(0.55em, -0.55em) scale(0.15) rotate(-70deg); opacity: 0; }
}
@keyframes pi-badge-hunt-in-tl {
  0% { transform: translate(0.1em, 0.1em) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-0.55em, -0.55em) scale(0.15) rotate(70deg); opacity: 0; }
}
@keyframes pi-badge-hunt-in-down {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(0, 0.7em) scale(0.2); opacity: 0; }
}
@keyframes pi-badge-hunt-in-up {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(0, -0.7em) scale(0.2); opacity: 0; }
}
@keyframes pi-badge-hunt-in-right {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(0.7em, 0) scale(0.2); opacity: 0; }
}
@keyframes pi-badge-hunt-in-left {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-0.7em, 0) scale(0.2); opacity: 0; }
}

/* Tortoise - slow moss spore dots drifting around the shell */
.pi-badge-wrap--tortoise .pi-badge-fx i {
  width: 0.09em;
  height: 0.09em;
  border-radius: 50%;
  background: radial-gradient(circle, #bbf7d0 0%, #4ade80 55%, transparent 75%);
  box-shadow: 0 0 3px rgba(74, 222, 128, 0.7);
  font-size: inherit;
  color: transparent;
  overflow: hidden;
  text-indent: -999px;
  animation: pi-badge-moss-drift 3.8s ease-in-out infinite;
}
.pi-badge-wrap--tortoise .pi-badge-fx i:nth-child(1) { left: 6%;  animation-delay: 0s; }
.pi-badge-wrap--tortoise .pi-badge-fx i:nth-child(2) { left: 24%; animation-delay: 0.55s; width: 0.07em; height: 0.07em; }
.pi-badge-wrap--tortoise .pi-badge-fx i:nth-child(3) { left: 44%; animation-delay: 1.1s; }
.pi-badge-wrap--tortoise .pi-badge-fx i:nth-child(4) { left: 62%; animation-delay: 1.65s; width: 0.06em; height: 0.06em; }
.pi-badge-wrap--tortoise .pi-badge-fx i:nth-child(5) { left: 78%; animation-delay: 2.2s; }
.pi-badge-wrap--tortoise .pi-badge-fx i:nth-child(6) { left: 90%; animation-delay: 2.75s; width: 0.05em; height: 0.05em; }
@keyframes pi-badge-moss-drift {
  0%  { top: 78%; transform: translateX(0) scale(0.6); opacity: 0; }
  18%  { opacity: 0.9; }
  50%  { top: 42%; transform: translateX(0.04em) scale(1); opacity: 0.75; }
  85%  { top: 12%; transform: translateX(-0.03em) scale(0.7); opacity: 0.25; }
  100% { top: -8%; transform: translateX(0) scale(0.4); opacity: 0; }
}

/* Completionist badge - falling checks / stars (same smooth linear fall as coins/letters) */
.pi-badge-wrap--completionist .pi-badge-fx i {
  font-size: 0.2em;
  color: #f6d27f;
  text-shadow: 0 0 4px rgba(167, 139, 250, 0.65);
  animation: pi-badge-complete-fall 2.6s linear infinite;
}
.pi-badge-wrap--completionist .pi-badge-fx i:nth-child(1) { left: 8%;  animation-delay: 0s;  color: #f87171; font-size: 0.2em; }
.pi-badge-wrap--completionist .pi-badge-fx i:nth-child(2) { left: 22%; animation-delay: 0.35s; color: #fbbf24; font-size: 0.18em; }
.pi-badge-wrap--completionist .pi-badge-fx i:nth-child(3) { left: 38%; animation-delay: 0.7s;  color: #4ade80; font-size: 0.22em; }
.pi-badge-wrap--completionist .pi-badge-fx i:nth-child(4) { left: 52%; animation-delay: 1.05s; color: #38bdf8; font-size: 0.19em; }
.pi-badge-wrap--completionist .pi-badge-fx i:nth-child(5) { left: 66%; animation-delay: 1.4s;  color: #a78bfa; font-size: 0.17em; }
.pi-badge-wrap--completionist .pi-badge-fx i:nth-child(6) { left: 78%; animation-delay: 1.75s; color: #f472b6; font-size: 0.2em; }
.pi-badge-wrap--completionist .pi-badge-fx i:nth-child(7) { left: 88%; animation-delay: 0.2s;  color: #f87171; font-size: 0.16em; }
.pi-badge-wrap--completionist .pi-badge-fx i:nth-child(8) { left: 14%; animation-delay: 2.0s;  color: #fbbf24; font-size: 0.18em; }
@keyframes pi-badge-complete-fall {
  0%  { top: -8%;  transform: rotate(-8deg) scale(0.75); opacity: 0; }
  12%  { opacity: 0.95; }
  55%  { top: 52%;  transform: rotate(10deg) scale(1); opacity: 0.85; }
  85%  { top: 88%;  transform: rotate(-6deg) scale(0.85); opacity: 0.35; }
  100% { top: 108%; transform: rotate(4deg) scale(0.65); opacity: 0; }
}

.pi-initials {
  position: relative;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pi-initials .pi-text {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
  Game accent variables - every per-game theme derives from these,
  so Bits themes are green, Perimeter blue, Harbor pink, etc.
  Defaults come first so game classes always win the cascade.
  -------------------------------------------------------------------------- */
.pi-themed { --pi-accent: #D4A650; --pi-accent2: #9c7429; --pi-bright: #f3ddab; }

.pi-g-snake  { --pi-accent: #f0c674; --pi-accent2: #b98a2f; --pi-bright: #ffe9b3; }
.pi-g-pathways  { --pi-accent: #f08080; --pi-accent2: #c94f4f; --pi-bright: #ffc9c9; }
.pi-g-lattice  { --pi-accent: #7dd3fc; --pi-accent2: #2593c8; --pi-bright: #d3f1ff; }
.pi-g-bits  { --pi-accent: #5bff94; --pi-accent2: #14a04c; --pi-bright: #ccffdf; }
.pi-g-hashi  { --pi-accent: #E8B47A; --pi-accent2: #b0722f; --pi-bright: #ffe4c2; }
.pi-g-shikaku  { --pi-accent: #c9a36b; --pi-accent2: #8f6a33; --pi-bright: #ecd8b6; }
.pi-g-conduit  { --pi-accent: #ffe44d; --pi-accent2: #c4a300; --pi-bright: #fff6bf; }
.pi-g-perimeter { --pi-accent: #7da2ff; --pi-accent2: #3a63d8; --pi-bright: #cfdcff; }
.pi-g-polyfit  { --pi-accent: #f59e0b; --pi-accent2: #b26a00; --pi-bright: #ffd48a; }
.pi-g-tiles  { --pi-accent: #a78bfa; --pi-accent2: #6d43e8; --pi-bright: #ded1ff; }
.pi-g-harbor  { --pi-accent: #ff2d95; --pi-accent2: #b8005e; --pi-bright: #ffb3d9; }

/* Plain color fallback (also used when background-clip: text is unsupported) */
.pi-themed { color: var(--pi-accent); }

/* --------------------------------------------------------------------------
  Gradient-text plumbing - applies to the inner .pi-text only
  -------------------------------------------------------------------------- */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .pi-themed .pi-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, var(--pi-accent), var(--pi-accent2));
  }
}

/* ==========================================================================
  PER-GAME FAMILIES (accent-driven)
  ========================================================================== */

/* base - clean accent duotone */
.pi-t-base .pi-text {
  background-image: linear-gradient(160deg, var(--pi-bright) 0%, var(--pi-accent) 45%, var(--pi-accent2) 100%);
}

/* veteran - breathing accent aura + glowing underline bar */
.pi-t-veteran .pi-text {
  background-image: linear-gradient(160deg, #ffffff 0%, var(--pi-accent) 40%, var(--pi-accent2) 100%);
}
.pi-t-veteran {
  animation: pi-breathe 3.4s ease-in-out infinite;
}
.pi-t-veteran::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -0.1em;
  height: 0.07em;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--pi-accent), var(--pi-bright), var(--pi-accent), transparent);
  background-size: 200% 100%;
  animation: pi-metal-sheen 3.4s ease-in-out infinite;
}
@keyframes pi-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pi-accent) 35%, transparent)); }
  50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pi-accent) 75%, transparent)); }
}

/* gold / silver / bronze - metal-first gradient with a game accent tail,
  plus metal-colored sparkles from the fx layer */
.pi-t-gold .pi-text {
  background-image: linear-gradient(105deg, #fff3c4 0%, #f6d27f 46%, #d4a650 64%, var(--pi-accent) 84%, var(--pi-accent2) 100%);
  background-size: 220% 100%;
  animation: pi-metal-sheen 4.2s ease-in-out infinite;
}
.pi-t-gold { filter: drop-shadow(0 0 6px rgba(246, 210, 127, 0.45)); }

.pi-t-silver .pi-text {
  background-image: linear-gradient(105deg, #ffffff 0%, #cbd5e1 46%, #94a3b8 64%, var(--pi-accent) 84%, var(--pi-accent2) 100%);
  background-size: 220% 100%;
  animation: pi-metal-sheen 4.2s ease-in-out infinite;
}
.pi-t-silver { filter: drop-shadow(0 0 6px rgba(203, 213, 225, 0.4)); }

.pi-t-bronze .pi-text {
  background-image: linear-gradient(105deg, #f0cba8 0%, #d6a16a 46%, #a9713d 64%, var(--pi-accent) 84%, var(--pi-accent2) 100%);
  background-size: 220% 100%;
  animation: pi-metal-sheen 4.2s ease-in-out infinite;
}
.pi-t-bronze { filter: drop-shadow(0 0 6px rgba(214, 161, 106, 0.4)); }

@keyframes pi-metal-sheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --------------------------------------------------------------------------
  STREAK FIRE FAMILY - real flames, tinted by the game accent
  -------------------------------------------------------------------------- */
.pi-t-streak-ember,
.pi-t-streak-fire,
.pi-t-streak-blaze,
.pi-t-streak-inferno {
  /* Fire burns in the game's own color: white-hot core -> accent -> deep accent */
  --pi-flame-hot: color-mix(in srgb, var(--pi-accent, #fb923c) 25%, #ffffff);
  --pi-flame-mid: var(--pi-accent, #fb923c);
  --pi-flame-deep: var(--pi-accent2, #b45309);
}

.pi-t-streak-ember .pi-text {
  background-image: linear-gradient(180deg, var(--pi-flame-hot) 0%, var(--pi-flame-mid) 55%, var(--pi-flame-deep) 100%);
}
.pi-t-streak-ember { animation: pi-ember-pulse 2.6s ease-in-out infinite; }
@keyframes pi-ember-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22) drop-shadow(0 0 4px color-mix(in srgb, var(--pi-flame-mid) 55%, transparent)); }
}

.pi-t-streak-fire .pi-text {
  background-image: linear-gradient(180deg, var(--pi-flame-hot) 0%, var(--pi-flame-mid) 45%, var(--pi-flame-deep) 92%);
  background-size: 100% 200%;
  animation: pi-fire-lick 1.1s ease-in-out infinite alternate;
}
.pi-t-streak-fire {
  filter: drop-shadow(0 -1px 6px color-mix(in srgb, var(--pi-flame-mid) 60%, transparent));
}
@keyframes pi-fire-lick {
  0% { background-position: 50% 12%; }
  100% { background-position: 50% 38%; }
}

.pi-t-streak-blaze .pi-text {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--pi-flame-hot) 28%, var(--pi-flame-mid) 58%, var(--pi-flame-deep) 100%);
  background-size: 100% 230%;
  animation: pi-fire-lick 0.7s ease-in-out infinite alternate;
}
.pi-t-streak-blaze {
  animation: pi-blaze-glow 1.5s ease-in-out infinite;
}
@keyframes pi-blaze-glow {
  0%, 100% {
  filter:
  drop-shadow(0 -1px 6px color-mix(in srgb, var(--pi-flame-mid) 70%, transparent))
  brightness(1.02);
  }
  50% {
  filter:
  drop-shadow(0 -2px 11px color-mix(in srgb, var(--pi-flame-mid) 90%, transparent))
  drop-shadow(0 0 5px color-mix(in srgb, var(--pi-flame-hot) 45%, transparent))
  brightness(1.12);
  }
}

.pi-t-streak-inferno .pi-text {
  background-image: linear-gradient(180deg, #ffffff 0%, var(--pi-flame-hot) 18%, var(--pi-flame-mid) 48%, var(--pi-flame-deep) 88%, #3b0a00 100%);
  background-size: 100% 240%;
  animation: pi-fire-lick 0.55s ease-in-out infinite alternate;
}
.pi-t-streak-inferno {
  animation: pi-inferno-glow 1.25s ease-in-out infinite;
}
@keyframes pi-inferno-glow {
  0%, 100% {
  filter:
  drop-shadow(0 -2px 8px color-mix(in srgb, var(--pi-flame-mid) 80%, transparent))
  drop-shadow(0 0 4px color-mix(in srgb, var(--pi-flame-hot) 55%, transparent))
  brightness(1.05);
  }
  50% {
  filter:
  drop-shadow(0 -4px 16px color-mix(in srgb, var(--pi-flame-mid) 100%, transparent))
  drop-shadow(0 -1px 10px color-mix(in srgb, #fff7d6 70%, transparent))
  brightness(1.22);
  }
}

/* --------------------------------------------------------------------------
  SNOWFALL - Cold Streak comeback: game-accent icy text, white snow, no letter glow
  -------------------------------------------------------------------------- */
.pi-t-snowfall .pi-text {
  background-image: linear-gradient(
  180deg,
  color-mix(in srgb, var(--pi-bright, #ffffff) 70%, #ffffff) 0%,
  var(--pi-accent, #7dd3fc) 42%,
  color-mix(in srgb, var(--pi-accent, #7dd3fc) 55%, var(--pi-accent2, #2593c8)) 78%,
  var(--pi-accent2, #2593c8) 100%
  );
}
.pi-t-snowfall {
  filter: none;
  text-shadow: none;
}

/* spectrum (Theme Collector) - letter wave below */
.pi-t-spectrum { --pi-accent: #a855f7; }

/* ==========================================================================
  GLOBAL THEMES
  ========================================================================== */
.pi-t-bronze-glow .pi-text { background-image: linear-gradient(150deg, #f0cba8, #d6a16a 55%, #92603a); }
.pi-t-bronze-glow { filter: drop-shadow(0 0 5px rgba(214, 161, 106, 0.4)); }

.pi-t-silver-glow .pi-text { background-image: linear-gradient(150deg, #ffffff, #cbd5e1 55%, #7f8ea3); }
.pi-t-silver-glow { filter: drop-shadow(0 0 5px rgba(203, 213, 225, 0.4)); }

.pi-t-medal-gold .pi-text,
.pi-t-medal-silver .pi-text,
.pi-t-medal-bronze .pi-text {
  background-size: 220% 100%;
  animation: pi-metal-sheen 3.6s ease-in-out infinite;
}
.pi-t-medal-gold .pi-text { background-image: linear-gradient(105deg, #fff3c4, #f6d27f 45%, #b8860b); }
.pi-t-medal-silver .pi-text { background-image: linear-gradient(105deg, #ffffff, #cbd5e1 45%, #8494ab); }
.pi-t-medal-bronze .pi-text { background-image: linear-gradient(105deg, #f0cba8, #d6a16a 45%, #8a5a30); }
.pi-t-medal-gold { filter: drop-shadow(0 0 6px rgba(246, 210, 127, 0.45)); }

.pi-t-friends-glow .pi-text { background-image: linear-gradient(140deg, #ffd3e8, #f472b6 55%, #c2348b); }
.pi-t-friends-glow { animation: pi-breathe 3s ease-in-out infinite; --pi-accent: #f472b6; }

.pi-t-rainbow-edge .pi-text {
  background-image: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f87171);
  background-size: 400% 100%;
  animation: pi-sweep 5s linear infinite;
}

/* Grid Sweeper - two colors alternating (gold / cyan), not full rainbow */
.pi-t-duo-edge .pi-text {
  background-image: linear-gradient(90deg, #f6d27f, #22d3ee, #f6d27f, #22d3ee, #f6d27f);
  background-size: 280% 100%;
  animation: pi-sweep 3.6s linear infinite;
}
.pi-t-duo-edge { --pi-accent: #22d3ee; }

.pi-t-speed-streak .pi-text {
  background-image: linear-gradient(100deg, #67e8f9 0%, #22d3ee 38%, #ffffff 50%, #22d3ee 62%, #67e8f9 100%);
  background-size: 250% 100%;
  animation: pi-sweep-reverse 1.4s linear infinite;
  font-style: italic;
}
.pi-t-speed-streak { --pi-accent: #22d3ee; }

.pi-t-gold-crown .pi-text {
  background-image: linear-gradient(90deg, #d4a650, #f6d27f, #fff7d6, #f6d27f, #d4a650);
  background-size: 300% 100%;
  animation: pi-sweep 3.2s linear infinite;
}
.pi-t-gold-crown { position: relative; padding-top: 2px; }
.pi-t-gold-crown::before {
  content: '';
  position: absolute;
  top: -0.68em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.9em;
  height: 0.62em;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 14 L1 4 L7 8 L12 1 L17 8 L23 4 L22 14 Z' fill='%23f6d27f' stroke='%23d4a650' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: pi-crown-bob 2.8s ease-in-out infinite;
}
@keyframes pi-crown-bob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50% { transform: translateX(-50%) translateY(-0.06em) rotate(2deg); }
}

/* Grid Virtuoso - bronze / silver / gold shimmer + soft sparkle */
.pi-t-tri-metal .pi-text {
  background-image: linear-gradient(
  105deg,
  #d6a16a 0%,
  #f0cba8 16%,
  #cbd5e1 34%,
  #ffffff 48%,
  #f6d27f 66%,
  #d4a650 82%,
  #d6a16a 100%
  );
  background-size: 280% 100%;
  animation: pi-sweep 3.8s linear infinite;
}
.pi-t-tri-metal {
  --pi-accent: #f6d27f;
  filter: none;
  text-shadow: none;
}

.pi-t-legend-pulse .pi-text {
  background-image: linear-gradient(90deg, #f6d27f, #ffffff, #a78bfa, #f6d27f);
  background-size: 300% 100%;
  animation: pi-sweep 4s linear infinite;
}
.pi-t-legend-pulse {
  animation: pi-legend-aura 2.4s ease-in-out infinite;
  --pi-accent: #f6d27f;
}
@keyframes pi-legend-aura {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(246, 210, 127, 0.5)); }
  50% { filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.7)); }
}

.pi-t-orbit-shimmer .pi-text {
  background-image: linear-gradient(90deg, #93c5fd, #e0f2fe, #ffffff, #e0f2fe, #93c5fd);
  background-size: 300% 100%;
  animation: pi-sweep 4.5s linear infinite;
}
.pi-t-orbit-shimmer { --pi-accent: #93c5fd; }

/* Completionist - each letter dances with staggered rainbow bounce */
.pi-t-rainbow-glow {
  --pi-accent: #a78bfa;
  animation: pi-rainbow-glow-aura 2.2s ease-in-out infinite;
}
.pi-t-rainbow-glow .pi-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.01em;
  background: none;
  color: inherit;
  -webkit-text-fill-color: unset;
}
.pi-t-rainbow-glow .pi-letter {
  display: inline-block;
  background-image: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6, #f87171);
  background-size: 400% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transform-origin: 50% 80%;
  animation:
  pi-letter-dance 1.15s ease-in-out infinite,
  pi-sweep 3.2s linear infinite;
  animation-delay:
  calc(var(--i, 0) * 0.14s),
  calc(var(--i, 0) * -0.45s);
}
@keyframes pi-letter-dance {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  20% { transform: translateY(-0.14em) rotate(-4deg) scale(1.06); }
  45% { transform: translateY(0.05em) rotate(3deg) scale(0.98); }
  70% { transform: translateY(-0.08em) rotate(-2deg) scale(1.03); }
}
@keyframes pi-rainbow-glow-aura {
  0%, 100% {
  filter:
  drop-shadow(0 0 4px rgba(248, 113, 113, 0.55))
  drop-shadow(0 0 10px rgba(56, 189, 248, 0.45));
  }
  33% {
  filter:
  drop-shadow(0 0 6px rgba(74, 222, 128, 0.6))
  drop-shadow(0 0 14px rgba(251, 191, 36, 0.5));
  }
  66% {
  filter:
  drop-shadow(0 0 6px rgba(167, 139, 250, 0.65))
  drop-shadow(0 0 14px rgba(244, 114, 182, 0.5));
  }
}

/* Theme Collector spectrum - gentler letter wave */
.pi-t-spectrum .pi-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.01em;
  background: none;
  color: inherit;
  -webkit-text-fill-color: unset;
}
.pi-t-spectrum .pi-letter {
  display: inline-block;
  background-image: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444);
  background-size: 400% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation:
  pi-letter-wave 1.8s ease-in-out infinite,
  pi-sweep 3.6s linear infinite;
  animation-delay:
  calc(var(--i, 0) * 0.16s),
  calc(var(--i, 0) * -0.35s);
}
@keyframes pi-letter-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.1em); }
}

@keyframes pi-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes pi-sweep-reverse {
  0% { background-position: 250% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==========================================================================
  PARTICLE EFFECTS - the "real animation" layer
  ========================================================================== */
.pi-fx {
  position: absolute;
  inset: -0.55em -0.15em -0.1em;
  pointer-events: none;
  z-index: 0;
}

.pi-fx i {
  position: absolute;
  display: block;
}

/* ---- Fire: teardrop flames rising with flicker, accent-tinted ---- */
.pi-fx-ember i,
.pi-fx-fire i,
.pi-fx-blaze i,
.pi-fx-inferno i {
  bottom: 0.05em;
  width: 0.3em;
  height: 0.44em;
  border-radius: 50% 50% 42% 42% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 78%,
  var(--pi-flame-hot, #fff2c0) 0%,
  var(--pi-flame-mid, #ffb347) 42%,
  color-mix(in srgb, var(--pi-flame-deep, #e03e00) 80%, transparent) 68%,
  transparent 82%);
  filter: blur(0.6px);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: pi-flame-rise 1.35s cubic-bezier(0.25, 0.4, 0.5, 1) infinite;
}

@keyframes pi-flame-rise {
  0%  { transform: translateY(0.12em) scale(0.5, 0.45) rotate(0deg); opacity: 0; }
  18%  { opacity: 0.95; }
  40%  { transform: translateY(-0.22em) scale(0.9, 1.05) rotate(-4deg); opacity: 0.85; }
  65%  { transform: translateY(-0.52em) scale(0.72, 0.98) rotate(4deg); opacity: 0.55; }
  100% { transform: translateY(-0.95em) scale(0.3, 0.7) rotate(-2deg); opacity: 0; }
}

/* Blaze (100) - mid-tier: hotter than Fire, shorter than Inferno */
@keyframes pi-flame-rise-blaze {
  0%  { transform: translateY(0.12em) scale(0.5, 0.45) rotate(0deg); opacity: 0; }
  15%  { opacity: 0.95; }
  40%  { transform: translateY(-0.28em) scale(0.95, 1.1) rotate(-5deg); opacity: 0.9; }
  65%  { transform: translateY(-0.6em) scale(0.78, 1.05) rotate(4deg); opacity: 0.6; }
  100% { transform: translateY(-1.05em) scale(0.32, 0.75) rotate(-2deg); opacity: 0; }
}

@keyframes pi-flame-rise-inferno {
  0%  { transform: translateY(0.15em) scale(0.55, 0.5) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  35%  { transform: translateY(-0.35em) scale(1.05, 1.2) rotate(-6deg); opacity: 0.95; }
  60%  { transform: translateY(-0.75em) scale(0.85, 1.15) rotate(5deg); opacity: 0.7; }
  100% { transform: translateY(-1.35em) scale(0.35, 0.85) rotate(-3deg); opacity: 0; }
}

.pi-fx-ember i:nth-child(1) { left: 22%; animation-delay: 0.1s; animation-duration: 1.7s; width: 0.22em; height: 0.32em; }
.pi-fx-ember i:nth-child(2) { left: 66%; animation-delay: 0.95s; animation-duration: 1.9s; width: 0.2em; height: 0.3em; }

.pi-fx-fire i:nth-child(1) { left: 8%;  animation-delay: 0s; }
.pi-fx-fire i:nth-child(2) { left: 34%; animation-delay: 0.5s; height: 0.52em; }
.pi-fx-fire i:nth-child(3) { left: 60%; animation-delay: 0.9s; }
.pi-fx-fire i:nth-child(4) { left: 82%; animation-delay: 0.3s; height: 0.38em; }

.pi-fx-blaze {
  inset: -0.65em -0.2em -0.12em;
}
.pi-fx-blaze i {
  animation-name: pi-flame-rise-blaze;
  animation-duration: 1.05s;
  width: 0.32em;
  height: 0.5em;
  filter: blur(0.5px) drop-shadow(0 0 2px color-mix(in srgb, var(--pi-flame-mid, #ffb347) 55%, transparent));
}
.pi-fx-blaze i:nth-child(1) { left: 6%;  animation-delay: 0s;  height: 0.46em; }
.pi-fx-blaze i:nth-child(2) { left: 22%; animation-delay: 0.4s;  height: 0.58em; width: 0.34em; }
.pi-fx-blaze i:nth-child(3) { left: 40%; animation-delay: 0.15s; height: 0.62em; width: 0.36em; }
.pi-fx-blaze i:nth-child(4) { left: 58%; animation-delay: 0.55s; height: 0.56em; }
.pi-fx-blaze i:nth-child(5) { left: 74%; animation-delay: 0.25s; height: 0.5em; }
.pi-fx-blaze i:nth-child(6) { left: 88%; animation-delay: 0.7s;  width: 0.24em; height: 0.38em; }

.pi-fx-inferno {
  inset: -0.85em -0.25em -0.15em;
}
.pi-fx-inferno i {
  animation-name: pi-flame-rise-inferno;
  animation-duration: 0.85s;
  width: 0.34em;
  height: 0.55em;
  filter: blur(0.45px) drop-shadow(0 0 3px color-mix(in srgb, var(--pi-flame-mid, #ffb347) 70%, transparent));
}
.pi-fx-inferno i:nth-child(1) { left: 2%;  animation-delay: 0s;  height: 0.5em; }
.pi-fx-inferno i:nth-child(2) { left: 14%; animation-delay: 0.35s; height: 0.68em; width: 0.38em; }
.pi-fx-inferno i:nth-child(3) { left: 28%; animation-delay: 0.12s; height: 0.72em; width: 0.4em; }
.pi-fx-inferno i:nth-child(4) { left: 42%; animation-delay: 0.48s; height: 0.78em; width: 0.42em; }
.pi-fx-inferno i:nth-child(5) { left: 56%; animation-delay: 0.22s; height: 0.7em; width: 0.38em; }
.pi-fx-inferno i:nth-child(6) { left: 68%; animation-delay: 0.6s;  height: 0.62em; }
.pi-fx-inferno i:nth-child(7) { left: 80%; animation-delay: 0.08s; height: 0.58em; }
.pi-fx-inferno i:nth-child(8) { left: 90%; animation-delay: 0.42s; width: 0.26em; height: 0.42em; }
.pi-fx-inferno i:nth-child(9) { left: 50%; animation-delay: 0.7s;  width: 0.28em; height: 0.48em; }

/* ---- Snow: denser flakes drifting down with sway ---- */
.pi-fx-snow { inset: -0.95em -0.35em -0.35em; }
.pi-fx-snow i {
  top: -0.15em;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: radial-gradient(
  circle,
  #ffffff 0%,
  rgba(255, 255, 255, 0.92) 42%,
  rgba(255, 255, 255, 0.35) 72%,
  transparent 85%
  );
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: pi-snow-fall 2.4s linear infinite;
}

@keyframes pi-snow-fall {
  0%  { transform: translate(0, 0) scale(0.7); opacity: 0; }
  8%  { opacity: 1; }
  30%  { transform: translate(0.14em, 0.5em) scale(1.1); }
  55%  { transform: translate(-0.12em, 1.0em) scale(1); opacity: 0.9; }
  80%  { transform: translate(0.1em, 1.45em) scale(0.9); opacity: 0.55; }
  100% { transform: translate(-0.04em, 1.75em) scale(0.7); opacity: 0; }
}

.pi-fx-snow i:nth-child(1)  { left: 4%;  animation-delay: 0s;  width: 0.18em; height: 0.18em; }
.pi-fx-snow i:nth-child(2)  { left: 16%; animation-delay: 0.35s; width: 0.12em; height: 0.12em; }
.pi-fx-snow i:nth-child(3)  { left: 28%; animation-delay: 0.7s; }
.pi-fx-snow i:nth-child(4)  { left: 40%; animation-delay: 0.15s; width: 0.2em; height: 0.2em; }
.pi-fx-snow i:nth-child(5)  { left: 52%; animation-delay: 1.0s;  width: 0.11em; height: 0.11em; }
.pi-fx-snow i:nth-child(6)  { left: 64%; animation-delay: 0.5s; }
.pi-fx-snow i:nth-child(7)  { left: 74%; animation-delay: 1.3s;  width: 0.14em; height: 0.14em; }
.pi-fx-snow i:nth-child(8)  { left: 84%; animation-delay: 0.85s; width: 0.17em; height: 0.17em; }
.pi-fx-snow i:nth-child(9)  { left: 92%; animation-delay: 1.55s; width: 0.1em; height: 0.1em; }
.pi-fx-snow i:nth-child(10) { left: 10%; animation-delay: 1.9s;  width: 0.13em; height: 0.13em; }

/* ---- Sparkle: 4-point stars pinging in and out ---- */
.pi-fx-sparkle i {
  width: 0.24em;
  height: 0.24em;
  background: currentColor;
  color: var(--pi-sparkle, var(--pi-accent, #f6d27f));
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  opacity: 0;
  animation: pi-sparkle-ping 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 3px currentColor);
}

@keyframes pi-sparkle-ping {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  45% { transform: scale(1) rotate(90deg); opacity: 1; }
  60% { transform: scale(0.7) rotate(140deg); opacity: 0.7; }
  80% { transform: scale(0) rotate(180deg); opacity: 0; }
}

.pi-fx-sparkle i:nth-child(1) { top: -8%; left: 6%; animation-delay: 0s; }
.pi-fx-sparkle i:nth-child(2) { top: 55%; left: 88%; animation-delay: 0.75s; width: 0.18em; height: 0.18em; }
.pi-fx-sparkle i:nth-child(3) { top: 8%; left: 66%; animation-delay: 1.4s; width: 0.16em; height: 0.16em; }
.pi-fx-sparkle i:nth-child(4) { top: 62%; left: 22%; animation-delay: 1.9s; width: 0.14em; height: 0.14em; }
.pi-fx-sparkle i:nth-child(5) { top: -14%; left: 42%; animation-delay: 1.1s; width: 0.15em; height: 0.15em; }

/* Metal-colored sparkles for gold / silver / bronze themes */
.pi-fx-metal-gold { --pi-sparkle: #f6d27f; }
.pi-fx-metal-silver { --pi-sparkle: #e8eef7; }
.pi-fx-metal-bronze { --pi-sparkle: #e8a968; }

/* Grid Virtuoso initials - denser bronze / silver / gold sparkles fading in and out */
.pi-fx-tri-metal i {
  animation-name: pi-tri-metal-sparkle;
  animation-duration: 2.1s;
  animation-timing-function: ease-in-out;
}
.pi-fx-tri-metal i:nth-child(3n+1) { --pi-sparkle: #d6a16a; color: #d6a16a; }
.pi-fx-tri-metal i:nth-child(3n+2) { --pi-sparkle: #e8eef7; color: #e8eef7; }
.pi-fx-tri-metal i:nth-child(3n) { --pi-sparkle: #f6d27f; color: #f6d27f; }
.pi-fx-tri-metal i:nth-child(1) { top: -18%; left: 4%;  animation-delay: 0s;  width: 0.42em; height: 0.42em; }
.pi-fx-tri-metal i:nth-child(2) { top: 8%;  left: 78%; animation-delay: 0.28s; width: 0.28em; height: 0.28em; }
.pi-fx-tri-metal i:nth-child(3) { top: 62%;  left: 92%; animation-delay: 0.55s; width: 0.34em; height: 0.34em; }
.pi-fx-tri-metal i:nth-child(4) { top: 78%;  left: 18%; animation-delay: 0.82s; width: 0.24em; height: 0.24em; }
.pi-fx-tri-metal i:nth-child(5) { top: -8%;  left: 48%; animation-delay: 1.05s; width: 0.38em; height: 0.38em; }
.pi-fx-tri-metal i:nth-child(6) { top: 42%;  left: -8%; animation-delay: 1.28s; width: 0.26em; height: 0.26em; }
.pi-fx-tri-metal i:nth-child(7) { top: 18%;  left: 96%; animation-delay: 1.5s;  width: 0.22em; height: 0.22em; }
.pi-fx-tri-metal i:nth-child(8) { top: 88%;  left: 58%; animation-delay: 1.72s; width: 0.3em;  height: 0.3em; }
.pi-fx-tri-metal i:nth-child(9) { top: 32%;  left: 36%; animation-delay: 0.4s;  width: 0.2em;  height: 0.2em; }

@keyframes pi-tri-metal-sparkle {
  0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  18% { transform: scale(1.05) rotate(55deg); opacity: 1; }
  42% { transform: scale(0.85) rotate(110deg); opacity: 0.85; }
  68% { transform: scale(0.35) rotate(160deg); opacity: 0.25; }
  82% { transform: scale(0) rotate(200deg); opacity: 0; }
}

/* Grid Veteran / legendary crowns: noticeably bigger sparkles than medal metals */
.pi-fx-sparkle--lg i:nth-child(1) { width: 0.52em; height: 0.52em; }
.pi-fx-sparkle--lg i:nth-child(2) { width: 0.4em; height: 0.4em; }
.pi-fx-sparkle--lg i:nth-child(3) { width: 0.38em; height: 0.38em; }
.pi-fx-sparkle--lg i:nth-child(4) { width: 0.34em; height: 0.34em; }
.pi-fx-sparkle--lg i:nth-child(5) { width: 0.4em; height: 0.4em; }

/* ---- Speed: motion dashes streaking left ---- */
.pi-fx-speed i {
  height: 0.06em;
  width: 0.55em;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #a5f3fc 40%, #ffffff);
  opacity: 0;
  animation: pi-speed-dash 0.9s linear infinite;
}

@keyframes pi-speed-dash {
  0% { transform: translateX(0.9em) scaleX(0.4); opacity: 0; }
  25% { opacity: 0.9; }
  100% { transform: translateX(-1.3em) scaleX(1); opacity: 0; }
}

.pi-fx-speed i:nth-child(1) { top: 18%; right: -8%; animation-delay: 0s; }
.pi-fx-speed i:nth-child(2) { top: 48%; right: -14%; animation-delay: 0.3s; width: 0.7em; }
.pi-fx-speed i:nth-child(3) { top: 76%; right: -4%; animation-delay: 0.6s; width: 0.45em; }

/* ---- Orbit: satellites circling the initials ---- */
.pi-fx-orbit i {
  top: 50%;
  left: 50%;
  width: 0.12em;
  height: 0.12em;
  border-radius: 50%;
  background: #e0f2fe;
  box-shadow: 0 0 4px rgba(147, 197, 253, 0.9);
  animation: pi-orbit-path 3.4s linear infinite;
}

@keyframes pi-orbit-path {
  0%  { transform: translate(-50%, -50%) rotate(0deg) translateX(0.85em) scale(1); opacity: 1; }
  25%  { transform: translate(-50%, -50%) rotate(90deg) translateX(0.85em) scale(0.7); opacity: 0.5; }
  50%  { transform: translate(-50%, -50%) rotate(180deg) translateX(0.85em) scale(1); opacity: 1; }
  75%  { transform: translate(-50%, -50%) rotate(270deg) translateX(0.85em) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(0.85em) scale(1); opacity: 1; }
}

.pi-fx-orbit i:nth-child(2) {
  animation-delay: -1.7s;
  width: 0.08em;
  height: 0.08em;
}

/* --------------------------------------------------------------------------
  Accessibility + performance
  -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pi-themed,
  .pi-themed .pi-text,
  .pi-themed::before,
  .pi-themed .pi-letter,
  .pi-badge--legendary,
  .loadout-badge-img.pi-badge--legendary,
  .pi-badge--master,
  .pi-badge--on-fire,
  .pi-badge--gold-rush,
  .pi-badge--crew-glow,
  .pi-badge--fixture-glow,
  .pi-badge-wrap > img {
  animation: none !important;
  }
  .pi-fx,
  .pi-badge-fx { display: none; }
}

/* === hub-pages.css === */
/* Hub page styles - shared so SPA tab switches keep layout/images */

/* === games === */
.app-card.complete {
  opacity: 0.7;
  filter: grayscale(0.2);
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.015);
  }

  .game-card.complete {
  opacity: 0.72;
  filter: grayscale(0.25);
  border-color: rgba(148, 163, 184, 0.25) !important;
  background: rgba(255, 255, 255, 0.02);
  }

  .complete-mark {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.95);
  color: #052e16;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(15, 23, 42, 0.9);
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.45);
  }

  .all-complete {
  background: rgba(217, 174, 85, 0.08);
  border: 1px solid rgba(217, 174, 85, 0.25);
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  color: #fdecc1;
  }

  .all-complete a {
  color: #f8d98a;
  text-decoration: underline;
  text-underline-offset: 3px;
  }

  .streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fb923c;
  letter-spacing: 0.02em;
  line-height: 1;
  background: transparent;
  border: none;
  padding: 0;
  margin-right: 0.5rem;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
  }

  .streak-badge__icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  }

  .streak-badge__count {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }

  @media (min-width: 900px) {
  .game-card {
  position: relative;
  }

  .game-card .streak-badge {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 2;
  margin: 0;
  gap: 1px;
  font-size: 1.05rem;
  }

  .game-card .streak-badge__icon {
  width: 2rem;
  height: 2rem;
  }
  }

  .ios-banner {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(22px);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', sans-serif;
  overflow: visible;
  }

  .ios-banner.with-pointer {
  position: relative;
  }

  .ios-banner .banner-tail {
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 26px;
  height: 16px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.92);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.08);
  z-index: 1;
  }

  .ios-banner-bottom {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  }

  #ios-install-banner-bottom {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: none;
  }

  #ios-install-banner-bottom.show {
  display: flex;
  }

/* === practice === */
.practice-list-reordering .app-card,
  .practice-list-reordering .glass {
  transition: none !important;
  }

  .back-pill {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 12, 0.7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  }

/* === medals === */
:root { --brand-gold: var(--dg-gold); }

  .medal-stat-gold { color: var(--dg-rank-1, #f6d27f); }
  .rank-silver { color: #cbd5e1; }
  .rank-bronze { color: #fb923c; }

  .rank-badge {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
  }
  .rank-badge.gold  { background: rgba(212,166,80,0.15);  border: 1px solid rgba(212,166,80,0.3); }
  .rank-badge.silver { background: rgba(203,213,225,0.10); border: 1px solid rgba(203,213,225,0.25); }
  .rank-badge.bronze { background: rgba(251,146,60,0.12);  border: 1px solid rgba(251,146,60,0.3); }

  .is-you {
  background: rgba(212,166,80,0.06);
  border-color: rgba(212,166,80,0.2) !important;
  }
  .you-chip {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  color: #D4A650; background: rgba(212,166,80,0.12);
  border: 1px solid rgba(212,166,80,0.25);
  border-radius: 999px; padding: 1px 6px;
  text-transform: uppercase;
  }

  .game-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  object-fit: contain;
  background: transparent;
  }

  .personal-medal {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .personal-medal:last-child { border-bottom: none; }

  .tab-pill {
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  }
  .tab-pill button {
  flex: 1; padding: 6px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.18s ease; border: none;
  color: rgba(255,255,255,0.45); background: transparent;
  }
  .tab-pill button.active {
  background: linear-gradient(135deg, rgba(212,166,80,0.22), rgba(229,195,126,0.12));
  color: var(--dg-gold-light, #E5C37E);
  box-shadow: inset 0 1px 0 rgba(229,195,126,0.2), 0 1px 4px rgba(0, 0, 0, 0.18);
  }

  .lb-rows-expanded {
  max-height: 19.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  }
  .lb-expand-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: calc(100% - 1.5rem); margin: 0 0.75rem 0.75rem;
  padding: 7px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--dg-gold-light, #E5C37E);
  background: rgba(212, 166, 80, 0.08);
  border: 1px solid rgba(212, 166, 80, 0.22);
  cursor: pointer;
  }
  .lb-expand-btn:hover { color: #f3d08a; background: rgba(212, 166, 80, 0.14); }
  .lb-expand-btn svg { transition: transform 0.2s ease; }
  .lb-expand-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* === profile === */
:root { --brand-gold: var(--dg-gold); }

  /* Account banner appears after auth resolves - ease it in instead of
  snapping the identity card down. */
  #account-banner:not(.hidden) {
  animation: banner-in 0.28s ease;
  }
  @keyframes banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
  }

  /* Identity card - keep tagline visible on narrow mobile */
  .glass-card.identity-card {
  overflow: visible;
  }
  .identity-card__body {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  }
  .identity-card__meta {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
  }
  .identity-card__meta p {
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
  }
  .identity-card__stat {
  flex-shrink: 0;
  text-align: right;
  padding-top: 2px;
  padding-left: 0.25rem;
  }

  /* Themed initials + tagline under them = live loadout preview (no ring) */
  .identity-card__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 42%;
  }
  .identity-card__initials {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #a78bfa;
  padding: 0.2em 0.1em 0.05em;
  }
  .identity-card__initials .pi-initials { font-size: inherit; }
  .identity-card__badge-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  }
  .identity-card__badge-btn:hover { opacity: 0.9; transform: scale(1.04); }
  .identity-card__tagline { cursor: default; }
  .identity-card__tagline:not(.hidden) { cursor: pointer; }

  /* Stat row */
  .stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .stat-row:last-child { border-bottom: none; }
  .stat-label { font-size: 13px; color: rgba(255,255,255,0.5); }
  .stat-value { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); font-family: 'JetBrains Mono', monospace; }

  /* Toggle switch */
  .toggle {
  position: relative; width: 44px; height: 26px; flex-shrink: 0;
  }
  .toggle input { opacity: 0; width: 0; height: 0; }
  .toggle-track {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  cursor: pointer; transition: background 0.2s ease;
  }
  .toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }
  .toggle input:checked ~ .toggle-track { background: rgba(167,139,250,0.35); border-color: rgba(167,139,250,0.5); }
  .toggle input:checked ~ .toggle-track .toggle-thumb { transform: translateX(18px); background: #a78bfa; }
  .toggle input:disabled ~ .toggle-track { opacity: 0.4; cursor: not-allowed; }

  /* Game row in stats */
  .game-stat-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .game-stat-row:last-child { border-bottom: none; }
  .game-logo-sm {
  width: 32px; height: 32px; border-radius: 8px;
  object-fit: contain; flex-shrink: 0;
  background: transparent;
  }

  /* Flame streak */
  .streak-flame { color: #f97316; }
  .best-streak { color: rgba(255,255,255,0.45); }

  .account-friend-code {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
  }

  .account-friend-code__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  }

  /* Tab panels: single column mobile, two-column desktop where marked */
  .profile-panel-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  }

  @media (min-width: 900px) {
  /* Wide hub desktop layout (match Games/Medals), not phone-narrow stack */
  body.dg-hub-nav-page .hub-profile-layout,
  .hub-profile-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  gap: 1rem;
  }

  .profile-tabs { justify-content: flex-start; }

  .profile-panel-grid--two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  }

  .identity-card__initials { font-size: 34px; }
  .identity-card__tagline { font-size: 16px; }

  .profile-panel-grid .hub-profile-card,
  #tab-panel-account .hub-profile-card { margin-bottom: 0; width: 100%; }

  /* Slightly larger reading sizes on desktop */
  .stat-label, .stat-value { font-size: 15px; }
  .section-header { font-size: 12px; }
  #profile-medals-section .text-xl { font-size: 1.75rem; }
  #game-stats-list .text-sm { font-size: 1rem; }
  .identity-card__badges img,
  .identity-card__badges .pi-badge-wrap > img { width: 68px; height: 68px; }
  .identity-card__badges .pi-badge-wrap { width: 68px; height: 68px; }
  }

  /* Identity card extras: tagline sits under the initials, badges in the meta column */
  .identity-card__tagline {
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  color: #e2c17c;
  line-height: 1.3;
  text-align: center;
  margin-top: 4px;
  }
  .identity-card__badges {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 4px;
  overflow: visible;
  }
  .identity-card__badges img,
  .identity-card__badges .pi-badge-wrap > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  margin: 0;
  }
  .identity-card__badges .pi-badge-wrap {
  width: 58px;
  height: 58px;
  overflow: visible;
  }
  .identity-card__badges .pi-badge-wrap > img {
  width: 100%;
  height: 100%;
  margin: 0;
  }

  .friend-row-btn .pi-badges,
  .friend-row-btn .pi-badge-wrap {
  overflow: visible;
  }
  .friend-row-btn .pi-badge {
  width: 28px;
  height: 28px;
  }
  .friend-row-btn .pi-badge-wrap {
  width: 28px;
  height: 28px;
  }
  .friend-row-btn .pi-badge-wrap > img.pi-badge {
  width: 100%;
  height: 100%;
  }

  #friends-list li button.friend-row-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  text-align: left;
  cursor: pointer;
  }

  .friends-list-wrap {
  margin-top: 0;
  }

  .friends-list-wrap .friends-list-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
  }

  #friends-list li {
  list-style: none;
  }

  #friends-list li.friend-list-item {
  padding: 0.7rem 0.85rem;
  }

  .friend-list-item__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.2rem 0.45rem;
  border-radius: 0.45rem;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.22);
  font-size: 13px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  color: #c4b5fd;
  flex-shrink: 0;
  }

  .friend-list-item__label {
  font-size: 15px;
  color: rgba(226, 232, 240, 0.92);
  font-weight: 500;
  }

  .friend-list-item__code {
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(253, 230, 138, 0.92);
  flex-shrink: 0;
  letter-spacing: 0.02em;
  }

  .friends-empty {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  }

/* SPA safety: keep logos/badges sized even if a page style race loses */
.game-logo-sm {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px;
  max-height: 32px;
  border-radius: 8px;
  object-fit: contain;
  background: transparent;
  flex-shrink: 0;
}
.game-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  background: transparent;
  flex-shrink: 0;
}
.identity-card__badges img,
.identity-card__badges .pi-badge-wrap > img {
  width: 58px;
  height: 58px;
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
}
.identity-card__hero {
  max-width: 42%;
}
.identity-card--identity-loading .identity-card__hero,
.identity-card--identity-loading .identity-card__meta {
  visibility: hidden;
}
.hub-spa-view .app-card img.w-12,
.hub-spa-view .app-card .relative > img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 0.75rem;
}