/* progression: Stagione (/stagione), Collezione (/collezione), Valordle (/valordle), chip livello e badge profilo. */
.pg-page, .pg-reveal, .pg-profile-badges, .pg-level-chip {
  --pg-ink: var(--ds-ink-900);
  --pg-ink-2: var(--ds-ink-850);
  --pg-ink-3: var(--ds-ink-800);
  --pg-paper: var(--ds-text);
  --pg-lime: var(--ds-lime);
  --pg-lime-soft: var(--ds-lime-soft);
  --pg-red: var(--ds-red);
  --pg-muted: var(--ds-text-2);
  --pg-rule: var(--ds-line);
  --pg-rule-strong: var(--ds-line-strong);
  --pg-display: var(--ds-font-display);
  --pg-body: var(--ds-font-body);
  --pg-gutter: var(--ds-gutter);
  --pg-bronze: var(--ds-tier-bronze);
  --pg-silver: var(--ds-tier-silver);
  --pg-gold: var(--ds-tier-gold);
  --pg-legend: #ff5ad1;
  --pg-r-common: var(--ds-rarity-common);
  --pg-r-rare: var(--ds-rarity-rare);
  --pg-r-epic: var(--ds-rarity-epic);
  --pg-r-legend: var(--pg-card-legend, #ff9a3d); /* Collezione: arancione, mai confuso con l'Oro */
  --pg-r-mythic: var(--pg-card-mythic, #ff4f8b);
}
.pg-page *, .pg-reveal *, .pg-profile-badges * { box-sizing: border-box; }
.pg-icon { flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.pg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

main.pg-page {
  width: 100%; max-width: none; margin: 0; padding: 0 0 80px;
  background: var(--pg-ink); color: var(--pg-paper); font-family: var(--pg-body);
  overflow-x: clip; min-height: 70vh; position: relative; z-index: 2;
}
.pg-shell { width: min(100%, 1440px); margin-inline: auto; padding-inline: var(--pg-gutter); }
.pg-eyebrow { display: inline-block; font: 700 12px/1.2 var(--pg-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pg-muted); }
.pg-page :is(a, button, select, input):focus-visible { outline: 3px solid var(--pg-lime); outline-offset: 3px; }

/* Bottoni: ds-btn (design-system.css) */
.pg-link { background: none; border: 0; color: var(--pg-muted); text-decoration: underline; font: 600 14px var(--pg-body); cursor: pointer; min-height: 44px; }

/* Hero comune */
.pg-hero { position: relative; border-bottom: 1px solid var(--pg-rule); overflow: hidden; isolation: isolate; }
.pg-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 78% 30%, rgba(216, 172, 64, .12), transparent 46%), linear-gradient(180deg, #0d151d, var(--pg-ink));
}
.pg-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(var(--pg-rule) 1px, transparent 1px), linear-gradient(90deg, var(--pg-rule) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.pg-hero h1 {
  margin: 10px 0 14px; font: 400 var(--ds-display-l)/var(--ds-lh-display) var(--ds-font-display); letter-spacing: var(--ds-tracking-display); text-transform: uppercase;
}
.pg-hero h1 span { color: var(--pg-lime); }
.pg-hero p { max-width: 560px; margin: 0; color: var(--pg-muted); font-size: 17px; line-height: 1.55; }

.pg-section { margin-top: 56px; }
.pg-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--pg-rule); }
.pg-section-head h2 { margin: 0; font: 400 clamp(30px, 3.4vw, 44px)/1 var(--pg-display); text-transform: uppercase; letter-spacing: -.01em; }
.pg-section-head span { color: var(--pg-muted); font-size: 14px; }
.pg-note { color: var(--pg-muted); font-size: 14px; line-height: 1.5; margin: 14px 0 0; }
.pg-empty { padding: 28px; border: 1px dashed var(--pg-rule-strong); color: var(--pg-muted); text-align: center; margin: 0; }
.pg-empty p { margin: 0 0 14px; }

.pg-skeleton { display: block; min-height: 72px; background: linear-gradient(90deg, var(--pg-ink-2), var(--pg-ink-3), var(--pg-ink-2)); background-size: 200% 100%; animation: pg-shimmer 1.4s linear infinite; }
.pg-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pg-skeleton-list { display: grid; gap: 8px; }
.pg-skeleton-list .pg-skeleton { min-height: 56px; }
.pg-skeleton--card { aspect-ratio: 3 / 4; }
.pg-skeleton--stage { min-height: 360px; margin-top: 32px; }
@keyframes pg-shimmer { to { background-position: -200% 0; } }

.pg-login { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--pg-rule-strong); background: rgba(15, 23, 32, .86); }
.pg-login strong { display: block; font: 400 30px/1 var(--pg-display); text-transform: uppercase; }
.pg-login p { margin: 8px 0 0; font-size: 15px; }

/* ------------------------------ Stagione ------------------------------ */
.pg-season-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding-block: 64px 56px; }
.pg-season-title { color: var(--pg-paper) !important; font-size: 20px !important; }
.pg-season-title b { color: var(--pg-lime); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pg-season-bar { height: 10px; max-width: 560px; margin: 18px 0 10px; background: rgba(243, 240, 231, .1); overflow: hidden; }
.pg-season-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8fd100, var(--pg-lime)); box-shadow: 0 0 18px rgba(216, 172, 64, .6); }
.pg-season-next { font-size: 15px !important; }
.pg-season-next b { color: var(--pg-paper); }
.pg-season-intro { margin-bottom: 24px !important; }
.pg-season-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px; margin: 28px 0 0; border: 1px solid var(--pg-rule); }
.pg-season-stats div { padding: 14px 16px; border-left: 1px solid var(--pg-rule); }
.pg-season-stats div:first-child { border-left: 0; }
.pg-season-stats dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-muted); }
.pg-season-stats dd { margin: 6px 0 0; font: 400 30px/1 var(--pg-display); }
.pg-season-stats dd small { font-size: 16px; color: var(--pg-muted); }

.pg-ring { position: relative; display: grid; place-items: center; }
.pg-ring svg { position: absolute; inset: 0; overflow: visible; }
.pg-ring-track { fill: rgba(15, 23, 32, .8); stroke: rgba(243, 240, 231, .1); stroke-width: 7; }
.pg-ring-fill { fill: none; stroke: var(--pg-lime); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(216, 172, 64, .7)); transition: stroke-dasharray 900ms cubic-bezier(.2, .8, .2, 1); }
.pg-ring-label { position: relative; display: grid; justify-items: center; line-height: 1; }
.pg-ring-label small { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pg-muted); }
.pg-ring-label b { font: 400 92px/.9 var(--pg-display); margin: 6px 0 4px; }
.pg-ring-label em { font-style: normal; font-weight: 700; color: var(--pg-lime); font-size: 14px; letter-spacing: .08em; }

.pg-season-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 40px; align-items: start; }
.pg-season-side { position: sticky; top: calc(var(--ds-topnav-h) + 16px); display: grid; gap: 0; }
.pg-season-side .pg-section { margin-top: 32px; }

/* Bonus Discord */
.pg-perks { margin-top: 56px; padding: 24px; border: 1px solid var(--ds-line); border-top: 2px solid var(--ds-lime); border-radius: var(--ds-r-2); background: var(--ds-ink-850); }
.pg-perks.is-active { border-color: var(--ds-lime-line); background: linear-gradient(160deg, var(--ds-lime-soft), var(--ds-ink-850) 60%); }
.pg-perks h2 { margin: 8px 0 8px; font: 400 32px/1.02 var(--pg-display); text-transform: uppercase; }
.pg-perks h2 em { font-style: normal; color: var(--pg-lime); }
.pg-perks-head p { margin: 0; color: var(--pg-muted); font-size: 14px; line-height: 1.5; }
.pg-perk-list { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; }
.pg-perk-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; background: rgba(11, 10, 9, .55); border: 1px solid var(--pg-rule); }
.pg-perk-list li.is-on { border-color: var(--pg-lime); }
.pg-perk-mult { display: grid; place-items: center; height: 52px; font: 400 26px/1 var(--pg-display); color: var(--pg-lime); background: rgba(216, 172, 64, .08); }
.pg-perk-copy b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pg-perk-copy b i { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; background: var(--pg-lime); color: var(--pg-ink); }
.pg-perk-copy small { display: block; margin-top: 4px; color: var(--pg-muted); font-size: 13px; line-height: 1.45; }
.pg-perks-note { margin: 0 0 14px; font-size: 13px; color: var(--pg-muted); }
.pg-perks .pg-btn { width: 100%; }

/* Tabella XP */
.pg-xp-table { border: 1px solid var(--pg-rule); }
.pg-xp-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 88px 80px; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--pg-rule); color: inherit; text-decoration: none; transition: background 150ms ease; }
a.pg-xp-row:hover { background: rgba(216, 172, 64, .05); }
.pg-xp-row--head { border-top: 0; padding-block: 10px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-muted); background: var(--pg-ink-2); }
.pg-xp-row > span:not(:first-child) { text-align: right; }
.pg-ach-more { display: flex; justify-content: center; width: 100%; margin-top: 14px; }
.pg-ach-next-title { margin: 0 0 12px; color: var(--pg-muted); font: 700 12px/1.3 var(--ds-font-body, inherit); letter-spacing: .1em; text-transform: uppercase; }
.pg-season-cta { margin-top: 18px; }

/* Oggi puoi fare */
.pg-today-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pg-today-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--pg-rule-strong); border-radius: var(--ds-r-2, 8px); background: var(--pg-ink-2); color: inherit; text-decoration: none; transition: border-color 150ms ease; }
.pg-today-list a:hover { border-color: var(--pg-lime); }
.pg-today-list li[data-done] a { opacity: .6; }
.pg-today-copy { display: grid; gap: 2px; min-width: 0; }
.pg-today-copy b { font-size: 15px; }
.pg-today-copy small { color: var(--pg-muted); font-size: 13px; }
.pg-today-xp { font: 400 22px/1 var(--pg-display); color: var(--pg-lime); white-space: nowrap; }
.pg-today-list li[data-done] .pg-today-xp { color: var(--pg-muted); font-size: 16px; }
.pg-today-list .pg-icon { color: var(--pg-lime); }
.pg-xp-action b { display: block; font-size: 15px; }
.pg-xp-action small { display: block; color: var(--pg-muted); font-size: 13px; margin-top: 2px; }
.pg-xp-val { font: 400 24px/1 var(--pg-display); color: var(--pg-lime); }
.pg-xp-cap, .pg-xp-max { font-variant-numeric: tabular-nums; color: var(--pg-muted); font-weight: 700; }

/* Achievement */
.pg-tier { margin-bottom: 28px; }
.pg-tier h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 700 13px/1 var(--pg-body); letter-spacing: .14em; text-transform: uppercase; }
.pg-tier h3::before { content: ""; width: 10px; height: 10px; transform: rotate(45deg); background: var(--tier); box-shadow: 0 0 12px var(--tier); }
.pg-tier h3 small { color: var(--pg-muted); font-weight: 700; }
.pg-tier--bronze { --tier: var(--pg-bronze); }
.pg-tier--silver { --tier: var(--pg-silver); }
.pg-tier--gold { --tier: var(--pg-gold); }
.pg-tier--legend { --tier: var(--pg-legend); }
.pg-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pg-ach { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--pg-rule); background: var(--pg-ink-2); opacity: .78; }
.pg-ach.is-unlocked { opacity: 1; border-color: color-mix(in srgb, var(--tier) 60%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--tier) 16%, transparent), var(--pg-ink-2) 55%); }
.pg-ach-copy { min-width: 0; padding-right: 54px; }
.pg-ach-copy strong { display: block; font-size: 15px; line-height: 1.25; }
.pg-ach-copy > span { display: block; color: var(--pg-muted); font-size: 13px; line-height: 1.4; margin-top: 3px; }
.pg-ach-date { display: block; margin-top: 8px; color: var(--tier); font-size: 12px; font-weight: 700; }
.pg-ach-progress { display: block; position: relative; margin-top: 10px; height: 18px; }
.pg-ach-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(243, 240, 231, .1); }
.pg-ach-progress i { position: absolute; left: 0; top: 0; height: 4px; background: var(--tier); }
.pg-ach-progress small { position: absolute; left: 0; top: 7px; font-size: 11px; color: var(--pg-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-ach-xp { position: absolute; top: 14px; right: 14px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--pg-lime); }
.pg-ach:not(.is-unlocked) .pg-ach-xp { color: var(--pg-muted); }

.pg-medal { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; color: var(--tier, var(--pg-bronze)); }
.pg-medal--bronze { --tier: var(--pg-bronze); }
.pg-medal--silver { --tier: var(--pg-silver); }
.pg-medal--gold { --tier: var(--pg-gold); }
.pg-medal--legend { --tier: var(--pg-legend); }
.pg-medal svg { position: absolute; inset: 0; }
.pg-medal svg path { fill: color-mix(in srgb, var(--tier) 22%, var(--ds-ink-900)); stroke: var(--tier); stroke-width: 2.5; }
.pg-medal svg .pg-medal-inner { fill: var(--tier); stroke: none; opacity: .9; }
.pg-medal--legend svg path:first-child { filter: drop-shadow(0 0 5px var(--pg-legend)); }
.pg-medal.is-locked svg path { fill: var(--ds-ink-800); stroke: rgba(243, 240, 231, .22); }
.pg-medal.is-locked svg .pg-medal-inner { fill: rgba(243, 240, 231, .08); }
.pg-medal-star { position: relative; width: 36%; height: 36%; background: var(--ds-ink-900); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pg-medal-lock { position: relative; width: 26%; height: 22%; margin-top: 12%; background: rgba(243, 240, 231, .5); border-radius: var(--ds-r-1); }
.pg-medal-lock::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 90%; height: 70%; border: 2px solid rgba(243, 240, 231, .5); border-bottom: 0; border-radius: 6px 6px 0 0; }

/* Classifica stagione */
.pg-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 720px; overflow: auto; }
.pg-board li { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; background: var(--pg-ink-2); border: 1px solid transparent; min-height: 56px; }
.pg-board li.is-me { border-color: var(--pg-lime); background: rgba(216, 172, 64, .08); }
.pg-board-pos { font: 400 22px/1 var(--pg-display); color: var(--pg-muted); text-align: center; }
.pg-board li.is-top-1 .pg-board-pos { color: var(--pg-gold); }
.pg-board li.is-top-2 .pg-board-pos { color: var(--pg-silver); }
.pg-board li.is-top-3 .pg-board-pos { color: var(--pg-bronze); }
.pg-board-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--pg-ink-3); font-weight: 700; }
.pg-board-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pg-board-name { min-width: 0; color: inherit; text-decoration: none; }
.pg-board-name b { display: flex; align-items: center; gap: 6px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-board-name b i { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; background: var(--pg-lime); color: var(--pg-ink); }
.pg-board-name small { display: block; color: var(--pg-muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-board-xp { text-align: right; line-height: 1; }
.pg-board-xp b { display: block; font: 400 22px/1 var(--pg-display); }
.pg-board-xp small { font-size: 11px; letter-spacing: .12em; color: var(--pg-muted); font-weight: 700; }

/* ------------------------------ Chip header + profilo ------------------------------ */
a.level-chip.pg-level-chip { color: inherit; text-decoration: none; }
a.level-chip.pg-level-chip .lv-bar span { background: linear-gradient(90deg, #8fd100, var(--ds-lime)); }

.pg-profile-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pg-profile-level { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px 4px 4px; border: 1px solid rgba(216, 172, 64, .5); background: rgba(11, 10, 9, .72); color: var(--pg-paper); text-decoration: none; }
.pg-profile-level-n { display: grid; place-items: center; width: 32px; height: 32px; background: var(--pg-lime); color: var(--pg-ink); font: 400 20px/1 var(--pg-display); }
.pg-profile-level small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-muted); line-height: 1.1; }
.pg-profile-level b { display: block; font-size: 13px; line-height: 1.15; }
.pg-profile-ach { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 5px; border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent); background: rgba(11, 10, 9, .72); font-size: 12px; font-weight: 700; color: var(--pg-paper); max-width: 220px; }
.pg-profile-ach > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Collezione (/collezione): card, pacchetti, apertura e schede sono in public/collection.css. */

/* ------------------------------ Valordle ------------------------------ */
.pg-hero--valordle::before { background: radial-gradient(circle at 82% 30%, rgba(255, 70, 85, .14), transparent 46%), linear-gradient(180deg, #0d151d, var(--pg-ink)); }
.pg-vd-head { padding-block: 56px 40px; }
.pg-vd { display: grid; gap: 24px; max-width: 1080px; padding-top: 32px; }
.pg-vd-stage { padding: clamp(18px, 3vw, 32px); border: 1px solid var(--pg-rule-strong); background: linear-gradient(180deg, rgba(22, 33, 44, .9), rgba(15, 23, 32, .9)); }
.pg-vd-clues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2vw, 20px); }
.pg-clue { margin: 0; display: grid; gap: 10px; justify-items: center; text-align: center; }
.pg-clue-frame { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--pg-rule-strong); background: radial-gradient(circle, #1f2d3b, var(--ds-ink-900) 75%); }
.pg-clue--ability .pg-clue-frame { border-color: rgba(216, 172, 64, .5); box-shadow: inset 0 0 40px rgba(216, 172, 64, .08); }
.pg-clue--ability img { width: 62%; height: 62%; object-fit: contain; transition: filter 700ms ease; }
.pg-clue-frame > b { font: 400 clamp(36px, 6vw, 64px)/1 var(--pg-display); color: rgba(243, 240, 231, .18); }
.pg-clue--locked .pg-clue-frame, .pg-clue--role:not(.is-open) .pg-clue-frame, .pg-clue--portrait:not(.is-open) .pg-clue-frame { border-style: dashed; background: repeating-linear-gradient(135deg, rgba(243, 240, 231, .03) 0 8px, transparent 8px 16px), #0b1219; }
.pg-clue--role.is-open .pg-clue-frame { border-color: var(--pg-lime); background: radial-gradient(circle, rgba(216, 172, 64, .16), var(--ds-ink-900) 75%); }
.pg-clue-frame > b.pg-clue-role { font-size: clamp(18px, 2.6vw, 30px); color: var(--pg-lime); text-transform: uppercase; padding: 0 8px; overflow-wrap: anywhere; }
.pg-clue--portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; filter: brightness(0) drop-shadow(0 0 1px var(--pg-lime)) drop-shadow(0 0 6px rgba(216, 172, 64, .5)); transition: filter 800ms ease; }
.pg-clue--portrait.is-revealed img { filter: none; }
.pg-clue figcaption { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pg-muted); line-height: 1.3; }
.pg-vd-meter { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pg-rule); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pg-muted); }
.pg-vd-meter b { margin-left: 6px; font: 400 26px/1 var(--pg-display); color: var(--pg-paper); letter-spacing: 0; }
.pg-vd-meter span:last-child b { color: var(--pg-lime); }

.pg-vd-input { position: relative; z-index: 30; display: grid; justify-items: center; gap: 8px; }
.pg-combo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
.pg-combo input { min-height: 60px; padding: 0 18px; border: 2px solid var(--pg-rule-strong); border-right: 0; background: var(--pg-ink-2); color: var(--pg-paper); font: 700 18px var(--pg-body); min-width: 0; }
.pg-combo input:focus { outline: none; border-color: var(--pg-lime); }
.pg-combo .pg-btn { min-height: 60px; }
.pg-combo.is-shake { animation: pg-shake 420ms ease; }
.pg-combo.is-shake input { border-color: var(--pg-red); }
@keyframes pg-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pg-combo-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; list-style: none; margin: 0; padding: 4px; max-height: min(300px, 50vh); overflow-y: auto; background: var(--pg-ink-3); border: 1px solid var(--pg-rule-strong); box-shadow: 0 24px 50px rgba(0, 0, 0, .6); }
.pg-combo-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; background: transparent; color: var(--pg-paper); font: 700 16px var(--pg-body); text-align: left; cursor: pointer; }
.pg-combo-list button:hover, .pg-combo-list button.is-focus { background: rgba(216, 172, 64, .12); }

.pg-vd-guesses ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-vd-guesses li { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 150px) 76px; gap: 12px; align-items: center; padding: 8px; background: var(--pg-ink-2); border: 1px solid var(--pg-rule); animation: pg-row 360ms ease both; }
.pg-vd-guesses li.is-correct { border-color: var(--pg-lime); background: rgba(216, 172, 64, .1); }
@keyframes pg-row { from { transform: translateY(-8px); opacity: 0; } }
.pg-vd-guesses li > b { font: 400 24px/1 var(--pg-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-vd-cell { display: grid; place-items: center; min-height: 40px; padding: 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.pg-vd-cell.is-ok { background: #2f8f3a; color: #fff; }
.pg-vd-cell.is-no { background: #8f2630; color: #fff; }
.pg-vd-legend { display: flex; gap: 18px; margin-bottom: 10px; font-size: 12px; color: var(--pg-muted); font-weight: 700; }
.pg-vd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pg-vd-legend i { width: 12px; height: 12px; display: inline-block; }
.pg-vd-legend i.is-ok { background: #2f8f3a; }
.pg-vd-legend i.is-no { background: #8f2630; }
.pg-vd-hint { text-align: center; }

.pg-vd-result { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.pg-vd-result-main { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; border: 1px solid var(--pg-rule-strong); background: var(--pg-ink-2); }
.pg-vd-result.is-win .pg-vd-result-main { border-color: var(--pg-lime); background: linear-gradient(150deg, rgba(216, 172, 64, .12), var(--pg-ink-2) 55%); }
.pg-vd-portrait { width: 100%; max-height: 340px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); animation: pg-rise 700ms cubic-bezier(.2, .9, .3, 1) both; }
@keyframes pg-rise { from { transform: translateY(30px); opacity: 0; } }
.pg-vd-result-copy h2 { margin: 6px 0 2px; font: 400 clamp(52px, 7vw, 88px)/.9 var(--pg-display); text-transform: uppercase; }
.pg-vd-role { margin: 0; color: var(--pg-lime); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.pg-vd-score { margin: 14px 0 0; color: var(--pg-muted); }
.pg-vd-score b { font: 400 40px/1 var(--pg-display); color: var(--pg-paper); margin-right: 6px; }
.pg-vd-abilities { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.pg-vd-abilities li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; min-width: 0; }
.pg-vd-abilities img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.pg-vd-abilities span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-vd-save { margin: 14px 0 0; font-size: 13px; color: var(--pg-muted); }
.pg-vd-save a { color: var(--pg-lime); }
.pg-vd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pg-vd-next { display: flex; flex-wrap: wrap; white-space: nowrap; align-items: baseline; gap: 12px; margin-top: 18px; color: var(--pg-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.pg-vd-next b { font: 400 30px/1 var(--pg-display); color: var(--pg-paper); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pg-vd-board { padding: 20px; border: 1px solid var(--pg-rule-strong); background: var(--pg-ink-2); }
.pg-mini-board { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.pg-mini-board li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; padding: 0 10px; background: rgba(243, 240, 231, .03); }
.pg-mini-board li span { font: 400 18px/1 var(--pg-display); color: var(--pg-muted); }
.pg-mini-board li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pg-mini-board li em { font-style: normal; font: 400 20px/1 var(--pg-display); color: var(--pg-lime); }
.pg-fallback { margin-top: 32px; padding: 40px 24px; text-align: center; border: 1px dashed var(--pg-rule-strong); }
.pg-fallback strong { display: block; font: 400 40px/1 var(--pg-display); text-transform: uppercase; }
.pg-fallback p { max-width: 520px; margin: 12px auto 20px; color: var(--pg-muted); }
.pg-fallback-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Card aggiunte all'hub Giochi */
.gx-card-art--pg-valordle { background: radial-gradient(circle at 50% 46%, rgba(216, 172, 64, .22), transparent 42%), linear-gradient(135deg, #1b1022, var(--ds-ink-900) 70%); }
.gx-card-art--pg-valordle i:nth-child(1) { left: 50%; top: 48%; width: 76px; height: 76px; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid var(--pg-lime, var(--ds-lime)); background: rgba(216, 172, 64, .12); filter: blur(1.5px); box-shadow: 0 0 30px rgba(216, 172, 64, .45); }
.gx-card-art--pg-valordle i:nth-child(2) { left: 50%; top: 48%; transform: translate(-50%, -50%); color: var(--ds-lime); font: 600 44px/1 var(--ds-font-display); font-style: normal; }
.gx-card-art--pg-valordle i:nth-child(2)::before { content: "?"; }
.gx-card-art--pg-valordle i:nth-child(3) { left: 14%; bottom: 18px; width: 40px; height: 40px; background: #8f2630; }
.gx-card-art--pg-valordle i:nth-child(4) { right: 14%; bottom: 18px; width: 40px; height: 40px; background: #2f8f3a; }
.gx-card-art--pg-cards { background: radial-gradient(circle at 60% 40%, rgba(176, 107, 255, .3), transparent 50%), linear-gradient(135deg, #160f24, var(--ds-ink-900) 70%); }
.gx-card-art--pg-cards i { top: 26px; width: 62px; height: 88px; border: 2px solid; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(11, 10, 9, .8)); }
.gx-card-art--pg-cards i:nth-child(1) { left: calc(50% - 92px); border-color: var(--ds-rarity-rare); transform: rotate(-14deg); }
.gx-card-art--pg-cards i:nth-child(2) { left: calc(50% - 50px); border-color: var(--ds-rarity-epic); transform: rotate(-4deg); }
.gx-card-art--pg-cards i:nth-child(3) { left: calc(50% - 8px); border-color: var(--ds-rarity-legend); transform: rotate(6deg); box-shadow: 0 0 26px rgba(255, 207, 74, .55); }
.gx-card-art--pg-cards i:nth-child(4) { left: calc(50% + 34px); border-color: var(--ds-rarity-common); transform: rotate(16deg); }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1100px) {
  .pg-season-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pg-season-side { position: static; }
  .pg-vd-result { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pg-season-hero { grid-template-columns: minmax(0, 1fr); padding-block: 36px 32px; gap: 24px; }
  .pg-season-ring { order: -1; justify-self: start; }
  .pg-season-ring .pg-ring { width: 110px !important; height: 110px !important; }
  .pg-season-ring .pg-ring svg { width: 110px; height: 110px; }
  .pg-season-ring .pg-ring-label b { font-size: 44px; }
  .pg-ring-label b { font-size: 62px; }
  .pg-season-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-season-stats div:nth-child(3) { border-left: 0; }
  .pg-season-stats div:nth-child(n + 3) { border-top: 1px solid var(--pg-rule); }
  .pg-hero p { font-size: 15px; }
  .pg-section { margin-top: 40px; }
  .pg-perks { margin-top: 40px; padding: 18px; }
  .pg-xp-row { grid-template-columns: minmax(0, 1fr) 52px 56px; padding: 12px; }
  .pg-xp-row > span:nth-child(4) { display: none; }
  .pg-ach-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-today-list { grid-template-columns: minmax(0, 1fr); }
  .pg-ach { padding: 14px; }
  .pg-vd-head { padding-block: 32px 24px; }
  .pg-vd { padding-top: 20px; gap: 18px; }
  .pg-vd-clues { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pg-vd-stage { padding: 10px; }
  .pg-clue { gap: 4px; }
  .pg-clue figcaption { font-size: var(--ds-label-size); letter-spacing: .04em; }
  .pg-clue-frame > b { font-size: 28px; }
  .pg-clue-frame > b.pg-clue-role { font-size: 13px; padding: 0 2px; }
  .pg-vd-meter { margin-top: 10px; padding-top: 10px; }
  .pg-vd-meter b { font-size: 20px; }
  .pg-hero--valordle .pg-vd-lede { margin-top: 8px; font-size: 14px; line-height: 1.45; }
  .pg-vd-head { padding-block: 20px 16px; }
  .pg-vd { padding-top: 12px; gap: 12px; }
  .pg-combo input, .pg-combo .ds-btn { min-height: 52px; }
  .pg-vd-guesses li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pg-vd-guesses li > .pg-vd-cell:last-child { display: none; }
  .pg-vd-guesses li > b { font-size: 20px; }
  .pg-vd-result-main { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .pg-vd-portrait { max-height: 220px; }
  .pg-vd-actions .pg-btn { flex: 1 1 140px; }
  .pg-profile-ach { padding: 4px; min-height: 40px; min-width: 40px; justify-content: center; }
  .pg-profile-ach > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-page *, .pg-reveal * { animation: none !important; transition: none !important; }
}

/* Design system: pannelli e card a 6px (le card della collezione mantengono la loro forma). */
.pg-ach, .pg-xp-table, .pg-vd-stage, .pg-vd-result-main, .pg-vd-board, .pg-login, .pg-empty, .pg-fallback, .pg-perk-list li, .pg-board li, .pg-vd-guesses li { border-radius: var(--ds-r-2); }
.pg-combo input, .pg-combo .ds-btn, .pg-vd-cell, .pg-perk-mult { border-radius: var(--ds-r-1); }
.pg-combo input { border-radius: var(--ds-r-1) 0 0 var(--ds-r-1); }
.pg-combo .ds-btn { border-radius: 0 var(--ds-r-1) var(--ds-r-1) 0; }
:where(.pg-page, .pg-reveal, .pg-profile-badges) :is(b, strong) { font-weight: 700; }
.pg-tier h3 small { font-size: var(--ds-label-size); }

/* ------------------------------ Pass stagionale e Negozio (pagine dei progressi) ------------------------------ */
.fp-pass .pass-progress-label { margin: 0; color: var(--ds-text-2); font: 700 var(--ds-label-size)/1.2 var(--ds-font-body); letter-spacing: var(--ds-tracking-caps); text-transform: uppercase; }
.fp-pass .pass-legend { flex-direction: column; gap: 6px; }
.fp-pass .pass-premium-line { margin: 0 0 var(--ds-space-5); color: var(--ds-text-2); font-size: var(--ds-text-sm); line-height: 1.5; }
.fp-pass .pass-premium-line a { color: var(--ds-lime); font-weight: 700; }
.fp-pass .pass-tag { color: var(--ds-text-3); font: 700 var(--ds-label-size)/1 var(--ds-font-body); letter-spacing: .08em; text-transform: uppercase; }
.fp-pass .pass-tag[data-kind="premium"] { color: var(--ds-lime); }
.fp-pass .pass-reward a.ds-btn { margin-top: auto; text-decoration: none; }