/* Desktop page 英雄养成 · 升华圣坛. Every selector starts at .pg-train (optionally after body.desktop-game).
   Units: --pg-u = (window height − top bar) / 100. Layout = roster | hero on the altar | wallet + tabs + one stele; nothing overlaps,
   only the altar glow, 升华 halo, orbs, embers, fly-motes and the 升华 / 道途 moment (decoration, no data-box) sit behind or over the hero. */
body.desktop-game .pg-train{position:absolute;inset:0;overflow:hidden;color:var(--uk-text);font:400 var(--uk-body)/1.5 var(--uk-sans);--pg-train-cw:calc(var(--pg-u)*9.5);--pg-train-rw:clamp(calc(var(--pg-u)*46),32%,calc(var(--pg-u)*52));--pg-train-el:#ff7a2e;--pg-train-el2:#ffc46b;--pg-train-txt:max(var(--uk-min,12px),calc(var(--pg-u)*1.5));--pg-train-sm:max(var(--uk-min,12px),calc(var(--pg-u)*1.3));--pg-train-rs:clamp(34px,calc(var(--pg-u)*4.8),58px);--pg-train-m1:#c98a52;--pg-train-m2:#7a4a24}
body.desktop-game .pg-train-root{position:absolute;inset:0}
body.desktop-game .pg-train-root[data-el="fire"]{--pg-train-el:#ff7a2e;--pg-train-el2:#ffc46b}
body.desktop-game .pg-train-root[data-el="water"]{--pg-train-el:#46a2ff;--pg-train-el2:#a8dcff}
body.desktop-game .pg-train-root[data-el="wood"]{--pg-train-el:#4fcf74;--pg-train-el2:#c6f59f}
body.desktop-game .pg-train-root[data-el="light"]{--pg-train-el:#ffcf4f;--pg-train-el2:#fff0b4}
body.desktop-game .pg-train-root[data-el="dark"]{--pg-train-el:#b07bff;--pg-train-el2:#e4ccff}

/* Scene: forge-temple backdrop at cover size but never above its own pixels (JS fit), darker towards the pillar and the steles. */
body.desktop-game .pg-train-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 52% 62%,#1d2733 0%,#0a121b 62%,#05090f 100%)}
body.desktop-game .pg-train-backdrop{position:absolute;left:50%;top:50%;display:block;max-width:none;max-height:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .24s ease-out;user-select:none}
body.desktop-game .pg-train-backdrop.is-ready{opacity:1}
body.desktop-game .pg-train-scene.is-banded .pg-train-backdrop{-webkit-mask-image:radial-gradient(ellipse 52% 54% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 52% 54% at 50% 50%,#000 78%,transparent 100%)}
body.desktop-game .pg-train-shade{position:absolute;inset:0;background:linear-gradient(90deg,#04080dee 0%,#04080daa 18%,#04080d33 34%,transparent 44%,transparent 60%,#04080d55 70%,#04080dcc 86%,#04080dee 100%),linear-gradient(0deg,#04080dcc 0%,#04080d44 22%,transparent 38%),linear-gradient(180deg,#04080d99 0%,transparent 16%)}

/* Three columns inside the gold page frame (side margins clear the frame corners; top/bottom clear the frame line). */
body.desktop-game .pg-train-layout{position:absolute;inset:calc(var(--pg-u)*3) calc(var(--pg-u)*5);display:grid;grid-template-columns:max-content minmax(0,1fr) var(--pg-train-rw);column-gap:calc(var(--pg-u)*2.4);z-index:1}
body.desktop-game .pg-train .pg-train-plaque{position:absolute;left:0;top:0;z-index:3;padding:0 calc(var(--pg-u)*2.6);min-width:0}
body.desktop-game .pg-train .pg-train-info{position:absolute;right:0;top:calc(var(--pg-u)*1.4);z-index:3}
body.desktop-game .pg-train .pg-train-back{position:absolute;right:calc(var(--uk-rs) + var(--pg-u)*1.2);top:calc(var(--pg-u)*1.4);z-index:3}

/* Roster: stone panel, element filter rail + 2 × 5 hero cards (kit cards, own size). */
body.desktop-game .pg-train .pg-train-roster{grid-column:1;align-self:stretch;margin-top:calc(var(--pg-u)*9.4);display:flex;align-items:flex-start;gap:calc(var(--pg-u)*1.2);min-height:0}
body.desktop-game .pg-train-filters{display:flex;flex-direction:column;align-items:center;gap:calc(var(--pg-u)*1.1);padding-top:calc(var(--pg-u)*.4)}
body.desktop-game .pg-train-filters .uk-gem{--uk-gs:clamp(36px,calc(var(--pg-u)*4.4),58px)}
body.desktop-game .pg-train-filters .uk-gem-all{font-size:max(12px,calc(var(--uk-gs)*.32));letter-spacing:0}
body.desktop-game .pg-train-list{display:flex;flex-direction:column;align-items:center;gap:calc(var(--pg-u)*1.1)}
body.desktop-game .pg-train .pg-train-groups{display:flex;width:100%;gap:calc(var(--pg-u)*.6)}
body.desktop-game .pg-train .pg-train-groups .uk-tab{--uk-bh:clamp(30px,calc(var(--pg-u)*3.8),46px);flex:1;min-width:0;padding:0;font-size:max(var(--uk-min,12px),calc(var(--pg-u)*1.5))}
body.desktop-game .pg-train .pg-train-growable{--uk-rs:clamp(36px,calc(var(--pg-u)*4.4),58px);margin-top:calc(var(--pg-u)*.6)}
body.desktop-game .pg-train .pg-train-growable>span{color:var(--uk-up);font-size:calc(var(--uk-rs)*.5)}
body.desktop-game .pg-train .pg-train-growable.is-active{box-shadow:0 0 0 2px var(--uk-up),0 0 12px 2px #6fd36f88;border-radius:50%}
body.desktop-game .pg-train-grid{display:grid;grid-template-columns:repeat(2,var(--pg-train-cw));grid-auto-rows:auto;gap:calc(var(--pg-u)*1.3) calc(var(--pg-u)*1.2);align-content:start}
body.desktop-game .pg-train-grid .uk-card{--uk-cw:var(--pg-train-cw)}
body.desktop-game .pg-train-grid .uk-card-lv,body.desktop-game .pg-train-grid .uk-stars-n{font-size:max(12px,calc(var(--uk-cw)*.11))}
body.desktop-game .pg-train-empty{grid-column:1 / -1;margin:calc(var(--pg-u)*2) 0;font:700 var(--pg-train-txt)/1.4 var(--uk-serif);color:var(--uk-muted);text-align:center}

/* Centre: medals | hero on the altar; nameplate and leader-skill plaque below (never in front of the hero). */
body.desktop-game .pg-train-stage{grid-column:2;position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
body.desktop-game .pg-train-hall{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:calc(var(--pg-u)*12.6) minmax(0,1fr);column-gap:calc(var(--pg-u)*.6)}
body.desktop-game .pg-train-medals{grid-column:1;align-self:center;margin-top:calc(var(--pg-u)*9);display:flex;flex-direction:column;align-items:center;gap:calc(var(--pg-u)*1.6)}
body.desktop-game .pg-train-medal{display:flex;flex-direction:column;align-items:center;gap:calc(var(--pg-u)*.3)}
body.desktop-game .pg-train-coin{display:grid;place-items:center;width:calc(var(--pg-u)*6.2);height:calc(var(--pg-u)*6.2);border-radius:50%;background:url("./assets/pages/_kit/icon-medal.webp") center/contain no-repeat;filter:drop-shadow(0 4px 6px #000c)}
body.desktop-game .pg-train-coin .uk-icon{--uk-is:calc(var(--pg-u)*3.1)}
body.desktop-game .pg-train-coin .uk-icon--active{box-shadow:none;background-color:transparent;background-size:contain}
body.desktop-game .pg-train-tag{--h:max(24px,calc(var(--pg-u)*3.2));display:inline-flex;align-items:baseline;justify-content:center;gap:2px;box-sizing:border-box;height:var(--h);min-width:calc(var(--pg-u)*10);padding:0 calc(var(--pg-u)*.4);border-style:solid;border-color:transparent;border-width:calc(var(--h)*120/423) calc(var(--h)*200/423);border-image:url("./assets/pages/_kit/btn-secondary.webp") 120 200 fill / calc(var(--h)*120/423) calc(var(--h)*200/423) stretch;font:700 max(var(--uk-min,12px),calc(var(--pg-u)*1.5))/1 var(--uk-serif);color:#e8d9b0;white-space:nowrap;text-shadow:0 1px 2px #000;line-height:calc(var(--h)*183/423)}
body.desktop-game .pg-train-tag b{font:700 max(13px,calc(var(--pg-u)*1.9))/1 var(--uk-serif);color:#fff1c9;font-variant-numeric:tabular-nums}
body.desktop-game .pg-train-tag small{font:700 max(var(--uk-min,12px),calc(var(--pg-u)*1.2))/1 var(--uk-serif);color:#bfae86}
body.desktop-game .pg-train-tag em{font:700 max(13px,calc(var(--pg-u)*1.8))/1 var(--uk-serif);font-style:normal;color:#ffe08a;margin-left:2px}
body.desktop-game .pg-train-medal.is-max .pg-train-tag b{color:#ffe08a}
body.desktop-game .pg-train-medals{gap:calc(var(--pg-u)*1.2)}
body.desktop-game .pg-train-coin-dia{display:grid;grid-template-columns:repeat(2,auto);gap:calc(var(--pg-u)*.35);transform:rotate(45deg)}
body.desktop-game .pg-train-coin-dia i{display:block;width:calc(var(--pg-u)*1.15);height:calc(var(--pg-u)*1.15);min-width:7px;min-height:7px;border-radius:2px;background:#2b3038;box-shadow:inset 0 0 0 1px #59606a}
body.desktop-game .pg-train-coin-dia i.is-lit{background:linear-gradient(135deg,var(--pg-train-m1),var(--pg-train-m2));box-shadow:0 0 6px color-mix(in srgb,var(--pg-train-m1) 70%,transparent)}
body.desktop-game .pg-train-asc-gem{display:block;width:calc(var(--pg-u)*2.6);aspect-ratio:1;transform:rotate(45deg);border-radius:3px;background:linear-gradient(135deg,var(--pg-train-m1),var(--pg-train-m2));box-shadow:0 0 0 2px #0b1622,0 0 10px color-mix(in srgb,var(--pg-train-m1) 60%,transparent)}
body.desktop-game .pg-train-asc-gem.is-none{background:linear-gradient(135deg,#59606a,#2b3038);box-shadow:0 0 0 2px #0b1622}
body.desktop-game .pg-train-diamonds{font:400 max(12px,calc(var(--pg-u)*1.4))/1 var(--uk-sans);letter-spacing:0;color:var(--pg-train-m1);text-shadow:0 0 6px color-mix(in srgb,var(--pg-train-m1) 55%,transparent)}
body.desktop-game .pg-train-diamonds.is-none{color:#8d939b;text-shadow:none}
/* 升华 metal per frame (code-drawn; the IV art of the commons sits on top of it). */
body.desktop-game .pg-train :is(.is-bronze){--pg-train-m1:#d39661;--pg-train-m2:#7a4a24}
body.desktop-game .pg-train :is(.is-silver){--pg-train-m1:#eef3f8;--pg-train-m2:#7f8b99}
body.desktop-game .pg-train :is(.is-gold){--pg-train-m1:#ffe08a;--pg-train-m2:#b7862e}
body.desktop-game .pg-train :is(.is-radiant){--pg-train-m1:#fff6cf;--pg-train-m2:#f0b43c}
body.desktop-game .pg-train-figure[data-frame="bronze"]{--pg-train-m1:#d39661;--pg-train-m2:#7a4a24}
body.desktop-game .pg-train-figure[data-frame="silver"]{--pg-train-m1:#eef3f8;--pg-train-m2:#7f8b99}
body.desktop-game .pg-train-figure[data-frame="gold"]{--pg-train-m1:#ffe08a;--pg-train-m2:#b7862e}
body.desktop-game .pg-train-figure[data-frame="radiant"]{--pg-train-m1:#fff6cf;--pg-train-m2:#f0b43c}

body.desktop-game .pg-train-figure{grid-column:2;position:relative;margin:0;min-width:0;min-height:0}
body.desktop-game .pg-train-art-stack{position:absolute;inset:0;z-index:2}
body.desktop-game .pg-train .pg-train-art{position:absolute;inset:0;align-items:flex-end;justify-content:center;transition:opacity .3s ease-out}
body.desktop-game .pg-train .pg-train-art img{filter:drop-shadow(0 0 calc(var(--pg-u)*2.2) color-mix(in srgb,var(--pg-train-el) 32%,transparent)) drop-shadow(0 calc(var(--pg-u)*.8) calc(var(--pg-u)*1) #000a)}
body.desktop-game .pg-train .pg-train-art img[data-pixel-safe="true"]{animation:pg-train-in .32s ease-out both}
body.desktop-game .pg-train .pg-train-art.is-out{opacity:0}
body.desktop-game .pg-train-figure.is-unowned .pg-train-art img{filter:grayscale(.85) brightness(.42) contrast(1.05)}
body.desktop-game .pg-train-lock{position:absolute;left:50%;top:54%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:calc(var(--pg-u)*.6);transform:translate(-50%,-50%) rotate(-4deg);padding:calc(var(--pg-u)*1.6) calc(var(--pg-u)*2.8);border-style:solid;border-color:transparent;border-width:clamp(18px,calc(var(--pg-u)*2.6),34px);border-image:url("./assets/pages/_kit/panel.webp") 200 fill / clamp(18px,calc(var(--pg-u)*2.6),34px) stretch;filter:drop-shadow(0 8px 14px #000c);white-space:nowrap}
body.desktop-game .pg-train-lock[hidden]{display:none}
body.desktop-game .pg-train-lock b{font:700 calc(var(--pg-u)*3)/1 var(--uk-serif);letter-spacing:.2em;text-indent:.2em;background:linear-gradient(180deg,var(--uk-title-a),var(--uk-title-b));-webkit-background-clip:text;background-clip:text;color:transparent}
body.desktop-game .pg-train-lock small{font:400 var(--pg-train-txt)/1.2 var(--uk-sans);color:#e6dccb}

/* Altar: rune ring (alpha art tinted with the element colour) under the feet, floor glow, aura, orbs, embers. */
body.desktop-game .pg-train-aura{position:absolute;left:50%;top:44%;z-index:0;width:min(100%,calc(var(--pg-u)*46));aspect-ratio:.8;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pg-train-el) 30%,transparent),color-mix(in srgb,var(--pg-train-el) 8%,transparent) 60%,transparent);transition:background .4s;pointer-events:none}
body.desktop-game .pg-train-halo{position:absolute;left:50%;top:40%;z-index:0;width:min(92%,calc(var(--pg-u)*40));aspect-ratio:.82;transform:translate(-50%,-50%);border-radius:50%;opacity:0;transition:opacity .4s;pointer-events:none}
body.desktop-game .pg-train-halo>i{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 max(2px,calc(var(--pg-u)*.3)) color-mix(in srgb,var(--pg-train-m1) 75%,transparent),0 0 calc(var(--pg-u)*3) calc(var(--pg-u)*.6) color-mix(in srgb,var(--pg-train-m2) 55%,transparent),inset 0 0 calc(var(--pg-u)*4) color-mix(in srgb,var(--pg-train-m1) 30%,transparent)}
body.desktop-game .pg-train-figure:not([data-frame="none"]) .pg-train-halo{opacity:.85}
body.desktop-game .pg-train-figure[data-frame="radiant"] .pg-train-halo{opacity:1}
body.desktop-game .pg-train-figure[data-frame="radiant"] .pg-train-halo::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--pg-train-m1) 42%,transparent) 0deg 3deg,transparent 3deg 15deg);-webkit-mask:radial-gradient(closest-side,transparent 62%,#000 70%,transparent 100%);mask:radial-gradient(closest-side,transparent 62%,#000 70%,transparent 100%);animation:pg-train-spin 60s linear infinite}
body.desktop-game .pg-train-figure[data-art="code"][data-frame="radiant"] .pg-train-art img{filter:drop-shadow(0 0 calc(var(--pg-u)*1.2) #ffe08acc) drop-shadow(0 0 calc(var(--pg-u)*3) #f0b43c88) drop-shadow(0 calc(var(--pg-u)*.8) calc(var(--pg-u)*1) #000a)}
body.desktop-game .pg-train-figure[data-art="code"][data-frame="gold"] .pg-train-art img{filter:drop-shadow(0 0 calc(var(--pg-u)*1.4) #ffe08a99) drop-shadow(0 calc(var(--pg-u)*.8) calc(var(--pg-u)*1) #000a)}
body.desktop-game .pg-train-ascring{position:absolute;left:50%;top:0;width:min(112%,calc(var(--pg-u)*54));aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.3);border-radius:50%;opacity:0;box-shadow:0 0 0 max(2px,calc(var(--pg-u)*.35)) var(--pg-train-m1),0 0 calc(var(--pg-u)*2.4) calc(var(--pg-u)*.5) var(--pg-train-m2),inset 0 0 calc(var(--pg-u)*2) var(--pg-train-m2);transition:opacity .4s}
body.desktop-game .pg-train-figure:not([data-frame="none"]) .pg-train-ascring{opacity:.9}
body.desktop-game .pg-train-figure.is-ascend .pg-train-halo{animation:pg-train-halo 1.3s ease-out both}
body.desktop-game .pg-train-altar{position:absolute;left:0;right:0;bottom:0;height:0;z-index:1;pointer-events:none}
body.desktop-game .pg-train-floor{position:absolute;left:50%;top:0;width:min(130%,calc(var(--pg-u)*70));height:calc(var(--pg-u)*16);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pg-train-el) 46%,transparent),color-mix(in srgb,var(--pg-train-el) 12%,transparent) 65%,transparent);mix-blend-mode:screen}
body.desktop-game .pg-train-ring{position:absolute;left:50%;top:0;width:min(104%,calc(var(--pg-u)*50));aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.3)}
body.desktop-game .pg-train-ring-spin{position:absolute;inset:0;animation:pg-train-spin 48s linear infinite}
/* Ring art pre-tinted per element (ring-<el>.webp = altar.webp's alpha filled with the element colours, the three former tint
   layers composited). No url() masks: play.html opened by double-click (file://) blocks mask images as cross-origin. */
body.desktop-game .pg-train-ring-art{position:absolute;inset:0;background:url("./assets/pages/train/ring-fire.webp") center/contain no-repeat}
body.desktop-game .pg-train-root[data-el="water"] .pg-train-ring-art{background-image:url("./assets/pages/train/ring-water.webp")}
body.desktop-game .pg-train-root[data-el="wood"] .pg-train-ring-art{background-image:url("./assets/pages/train/ring-wood.webp")}
body.desktop-game .pg-train-root[data-el="light"] .pg-train-ring-art{background-image:url("./assets/pages/train/ring-light.webp")}
body.desktop-game .pg-train-root[data-el="dark"] .pg-train-ring-art{background-image:url("./assets/pages/train/ring-dark.webp")}
body.desktop-game .pg-train-wave{position:absolute;left:50%;top:0;width:min(104%,calc(var(--pg-u)*50));aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.3) scale(.2);border-radius:50%;box-shadow:0 0 0 calc(var(--pg-u)*.5) var(--pg-train-el2),0 0 calc(var(--pg-u)*4) calc(var(--pg-u)*1) var(--pg-train-el);opacity:0}
body.desktop-game .pg-train-figure.is-flash .pg-train-wave{animation:pg-train-wave .95s ease-out both}
body.desktop-game .pg-train-figure.is-flash .pg-train-ring{animation:pg-train-ring-flash .95s ease-out both}
body.desktop-game .pg-train-orbs{position:absolute;inset:0;z-index:1;pointer-events:none}
body.desktop-game .pg-train-orb{position:absolute;width:clamp(22px,calc(var(--pg-u)*3.2),46px);height:auto;opacity:.92;animation:pg-train-float 6.4s ease-in-out infinite}
body.desktop-game .pg-train-orb--0{left:6%;top:46%;animation-delay:-1s}
body.desktop-game .pg-train-orb--1{right:8%;top:38%;animation-delay:-2.6s}
body.desktop-game .pg-train-orb--2{left:14%;top:70%;animation-delay:-4s}
body.desktop-game .pg-train-orb--3{right:4%;top:62%;animation-delay:-.4s}
body.desktop-game .pg-train-orb--4{left:48%;top:4%;animation-delay:-3.3s;opacity:.7}
body.desktop-game .pg-train-embers{position:absolute;left:10%;right:10%;bottom:0;height:62%;z-index:3;pointer-events:none;overflow:visible}
body.desktop-game .pg-train-embers>i{position:absolute;left:var(--x);bottom:0;width:4px;height:4px;border-radius:50%;background:var(--pg-train-el2);box-shadow:0 0 6px 2px var(--pg-train-el);opacity:0;animation:pg-train-ember var(--t) linear var(--d) infinite}

/* Nameplate (pillar plaque art) and the leader-skill plaque (stone panel, slimmer rim). */
body.desktop-game .pg-train-nameplate{--h:calc(var(--pg-u)*7);position:relative;z-index:3;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--pg-u)*.35);box-sizing:border-box;height:var(--h);min-width:calc(var(--pg-u)*30);margin:calc(var(--pg-u)*.8) 0 0 calc(var(--pg-u)*13.2);padding:0 calc(var(--pg-u)*.4);border-style:solid;border-color:transparent;border-width:calc(var(--h)*120/635) calc(var(--h)*620/635);border-image:url("./assets/desktop/nav/plaque.webp") 120 620 fill / calc(var(--h)*120/635) calc(var(--h)*620/635) stretch;filter:drop-shadow(0 6px 10px #000b);white-space:nowrap}
body.desktop-game .pg-train-name{font:700 calc(var(--pg-u)*2.5)/1 var(--uk-serif);letter-spacing:.1em;text-indent:.1em;background:linear-gradient(180deg,var(--uk-title-a),var(--uk-title-b));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #1b0f04) drop-shadow(0 2px 2px #000c)}
body.desktop-game .pg-train-meta{display:flex;align-items:center;gap:calc(var(--pg-u)*.6);font-size:max(var(--uk-min,12px),calc(var(--pg-u)*1.45));line-height:1}
body.desktop-game .pg-train-meta em{font:400 max(var(--uk-min,12px),calc(var(--pg-u)*1.4))/1 var(--uk-sans);color:#e3d5b2;font-style:normal;text-shadow:0 1px 2px #000}
body.desktop-game .pg-train-traits{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(var(--pg-u)*.8);margin-top:calc(var(--pg-u)*.9)}
body.desktop-game .pg-train-trait{--uk-tb:clamp(10px,calc(var(--pg-u)*1.2),16px);display:flex;flex-direction:column;justify-content:center;gap:calc(var(--pg-u)*.25);min-width:0;margin:0;box-sizing:border-box;min-height:calc(var(--pg-u)*5.6);padding:0 calc(var(--pg-u)*.6);border:var(--uk-tb) solid transparent;border-image:url("./assets/pages/_kit/panel.webp") 200 fill / var(--uk-tb) stretch;background:none;color:var(--uk-text);font:inherit;text-align:left;filter:drop-shadow(0 3px 4px #0009)}
body.desktop-game .pg-train-trait small{font:700 var(--pg-train-sm)/1.1 var(--uk-serif);color:#cdbf9c;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.desktop-game .pg-train-trait b{font:700 max(var(--uk-min,12px),calc(var(--pg-u)*1.45))/1.3 var(--uk-sans);color:#f3ead2}
body.desktop-game .pg-train-trait.is-passive b{font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.desktop-game .pg-train-trait.is-path{cursor:pointer}
body.desktop-game .pg-train-trait.is-path b i{font-style:normal;color:var(--uk-gold);margin:0 .35em}
body.desktop-game .pg-train-trait.is-path:hover{filter:brightness(1.15) drop-shadow(0 0 8px #ffd27a77)}
body.desktop-game .pg-train-trait.is-path:focus-visible{outline:2px solid var(--uk-gold-hi);outline-offset:2px}
body.desktop-game .pg-train-trait.is-locked b{color:#9aa1a8}
body.desktop-game .pg-train .pg-train-leader{--uk-pb:clamp(18px,calc(var(--pg-u)*2.8),36px);align-self:stretch;margin-top:calc(var(--pg-u)*.9);padding:calc(var(--pg-u)*.2) calc(var(--pg-u)*1.4) calc(var(--pg-u)*.3);text-align:center}
body.desktop-game .pg-train-leader-title{display:flex;align-items:center;justify-content:center;gap:calc(var(--pg-u)*.7);margin:0 0 calc(var(--pg-u)*.3);font:700 max(13px,calc(var(--pg-u)*1.9))/1.2 var(--uk-serif);color:#f3dfae;letter-spacing:.06em;text-shadow:0 1px 2px #000}
body.desktop-game .pg-train-leader p{margin:0;font:400 var(--pg-train-txt)/1.42 var(--uk-sans);color:var(--uk-text);text-shadow:0 1px 2px #000a}

/* Wallet (经验 · 魂晶 · 王印) in the header row, left of the back / i medallions; click → 「材料从哪来」. */
body.desktop-game .pg-train-wallet{position:absolute;top:calc(var(--pg-u)*1.4);right:calc(var(--pg-train-rs)*2 + var(--pg-u)*2.6);z-index:3;display:flex;align-items:center;gap:calc(var(--pg-u)*.9);box-sizing:border-box;height:var(--pg-train-rs);max-width:calc(var(--pg-train-rw) - var(--pg-train-rs)*2 - var(--pg-u)*3);margin:0;padding:0 calc(var(--pg-u)*1.1);border:0;border-radius:999px;background:linear-gradient(180deg,#141c26e6,#0a1119e6);box-shadow:inset 0 0 0 1px #d4b47766,0 3px 6px #000a;color:var(--uk-text);font:inherit;cursor:pointer;white-space:nowrap}
body.desktop-game .pg-train-wallet:hover,body.desktop-game .pg-train-wallet[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--uk-gold-hi),0 0 10px #ffd27a66}
body.desktop-game .pg-train-wallet:focus-visible{outline:2px solid var(--uk-gold-hi);outline-offset:2px}
body.desktop-game .pg-train-wallet .pg-train-chip small{display:none}
body.desktop-game .pg-train-wallet-more{display:grid;place-items:center;flex:none;width:calc(var(--pg-u)*2.2);height:calc(var(--pg-u)*2.2);min-width:16px;min-height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--uk-gold);font:700 var(--pg-train-sm)/1 var(--uk-serif);font-style:normal;color:var(--uk-gold-hi)}

/* Material chips; 魂晶 / 王印 icons from assets/progression/icons (@64 at 1x, @128 at 2x — always at or above the drawn size). */
body.desktop-game .pg-train-chip{display:inline-flex;align-items:center;gap:calc(var(--pg-u)*.45);white-space:nowrap}
body.desktop-game .pg-train-chip b{font:700 max(13px,calc(var(--pg-u)*1.8))/1 var(--uk-serif);color:#fff1c9;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
body.desktop-game .pg-train-chip small{font:400 var(--pg-train-sm)/1 var(--uk-sans);color:var(--uk-muted)}
body.desktop-game .pg-train-chip.is-spend b{color:#ffcf9a}
body.desktop-game .pg-train-chip.is-short b{color:#ff8f7a}
body.desktop-game .pg-train-chip-lbl{display:flex;flex-direction:column;gap:1px}
body.desktop-game .pg-train-chip-lbl small{line-height:1.1}
body.desktop-game .pg-train-chip .uk-icon{--uk-is:max(16px,calc(var(--pg-u)*2.2))}
body.desktop-game .pg-train-mat{--s:max(16px,calc(var(--pg-u)*2.2));position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);vertical-align:middle;background:center/contain no-repeat}
body.desktop-game .pg-train-mat.is-md{--s:max(18px,calc(var(--pg-u)*2.8))}
body.desktop-game .pg-train-mat--crystal{background-image:image-set(url("./assets/progression/icons/crystal@64.png") 1x,url("./assets/progression/icons/crystal@128.png") 2x)}
body.desktop-game .pg-train-mat--seal{background-image:image-set(url("./assets/progression/icons/seal@64.png") 1x,url("./assets/progression/icons/seal@128.png") 2x)}

/* Right column: tabs + one stele (or a face: rules / sources / plan / notice), 一键培养, then the gold ribbon. */
body.desktop-game .pg-train-steles{grid-column:3;position:relative;display:flex;flex-direction:column;gap:calc(var(--pg-u)*1.1);margin-top:calc(var(--pg-u)*7);min-height:0;transform-style:preserve-3d}
body.desktop-game .pg-train-steles>[hidden]{display:none!important}
body.desktop-game .pg-train-tabbar{flex:none}
body.desktop-game .pg-train .pg-train-tabs{display:flex;width:100%;gap:calc(var(--pg-u)*.5)}
body.desktop-game .pg-train .pg-train-tabs .uk-tab{--uk-bh:clamp(30px,calc(var(--pg-u)*4.2),50px);flex:1;min-width:0;padding:0;font-size:max(var(--uk-min,12px),calc(var(--pg-u)*1.6))}
body.desktop-game .pg-train-steles>.uk-panel{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:calc(var(--pg-u)*.6);padding:calc(var(--pg-u)*.4) calc(var(--pg-u)*.9) calc(var(--pg-u)*.5)}
body.desktop-game .pg-train-steles>.uk-panel:focus{outline:none}
body.desktop-game .pg-train-st-head{display:flex;align-items:center;gap:calc(var(--pg-u)*1);min-height:calc(var(--pg-u)*4.2);margin-bottom:calc(var(--pg-u)*.6)}
body.desktop-game .pg-train-st-head .uk-panel-title{margin:0;white-space:nowrap}
body.desktop-game .pg-train-st-sub{margin-left:auto;font:400 var(--pg-train-sm)/1.3 var(--uk-sans);color:var(--uk-muted);text-align:right}
body.desktop-game .pg-train-frame-name{margin-left:auto;font:700 var(--pg-train-sm)/1 var(--uk-serif);color:#cdbf9c}
body.desktop-game .pg-train-st-head .pg-train-diamonds{font-size:max(14px,calc(var(--pg-u)*2))}
body.desktop-game .pg-train-jump{display:flex;align-items:baseline;gap:calc(var(--pg-u)*.8);margin-left:auto;white-space:nowrap}
body.desktop-game .pg-train-lv{font:700 calc(var(--pg-u)*1.9)/1 var(--uk-serif);color:#d9c9a0;text-shadow:0 1px 2px #000}
body.desktop-game .pg-train-lv b{display:inline-block;font:700 calc(var(--pg-u)*3.4)/1 var(--uk-serif);color:#fff1c9;font-variant-numeric:tabular-nums}
body.desktop-game .pg-train-lv.is-next,body.desktop-game .pg-train-lv.is-next b{color:var(--uk-up)}
body.desktop-game .pg-train-arrow{font:700 calc(var(--pg-u)*1.9)/1 var(--uk-serif);font-style:normal;color:var(--uk-gold)}
body.desktop-game .pg-train-timechip{display:inline-flex;align-items:center;gap:3px;padding:calc(var(--pg-u)*.3) calc(var(--pg-u)*.8);border-radius:999px;background:linear-gradient(180deg,#14301acc,#0b1a10cc);box-shadow:inset 0 0 0 1px #6fd36f66,0 0 8px #6fd36f44;font:700 max(var(--uk-min,12px),calc(var(--pg-u)*1.3))/1 var(--uk-serif);color:var(--uk-up);white-space:nowrap}

body.desktop-game .pg-train-stats{display:flex;flex-direction:column;gap:calc(var(--pg-u)*.55);margin:0;padding:0;list-style:none}
body.desktop-game .pg-train-statrow{display:grid;grid-template-columns:calc(var(--pg-u)*2.6) max-content minmax(0,1fr) max-content max-content calc(var(--pg-u)*6.6);align-items:center;column-gap:calc(var(--pg-u)*.8);height:calc(var(--pg-u)*3.4);padding:0 calc(var(--pg-u)*1.1) 0 calc(var(--pg-u)*.7);}
body.desktop-game .pg-train-statrow .uk-icon{--uk-is:calc(var(--pg-u)*2.4)}
body.desktop-game .pg-train-lbl{font:400 var(--pg-train-txt)/1 var(--uk-sans);color:var(--uk-muted)}
body.desktop-game .pg-train-now{justify-self:end;font:700 calc(var(--pg-u)*2.2)/1 var(--uk-serif);color:#f3ead2;font-variant-numeric:tabular-nums}
body.desktop-game .pg-train-new{font:700 calc(var(--pg-u)*2.2)/1 var(--uk-serif);color:var(--uk-up);font-variant-numeric:tabular-nums;text-shadow:0 0 6px #6fd36f55;transition:text-shadow .2s,transform .2s}
body.desktop-game .pg-train-statrow .uk-delta{justify-self:start;font-size:max(var(--uk-min,12px),calc(var(--pg-u)*1.5))}
body.desktop-game .pg-train-level:has(.pg-train-up:not(:disabled):hover) .pg-train-new,body.desktop-game .pg-train-level:has(.pg-train-up:not(:disabled):focus-visible) .pg-train-new{text-shadow:0 0 10px #8cff8c,0 0 2px #fff;transform:scale(1.06)}
body.desktop-game .pg-train-skill:has(.pg-train-skillup:not(:disabled):hover) .pg-train-new{text-shadow:0 0 10px #8cff8c,0 0 2px #fff}

body.desktop-game .pg-train-beads{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:calc(var(--pg-u)*.28);align-items:center;margin:calc(var(--pg-u)*1.1) 0 calc(var(--pg-u)*.9);padding:0 calc(var(--pg-u)*.2)}
body.desktop-game .pg-train-bead{display:block;width:100%;max-width:calc(var(--pg-u)*2.2);aspect-ratio:1;justify-self:center;background:url("./assets/pages/train/bead-dim.webp") center/contain no-repeat;filter:drop-shadow(0 1px 2px #000b);transition:transform .2s,filter .2s}
body.desktop-game .pg-train-bead.is-lit{background-image:url("./assets/pages/train/bead-lit.webp")}
body.desktop-game .pg-train-bead.has-time{background-image:url("./assets/pages/train/bead-time-dim.webp");transform:scale(1.18)}
body.desktop-game .pg-train-bead.has-time.is-lit{background-image:url("./assets/pages/train/bead-time-lit.webp")}
body.desktop-game .pg-train-bead.is-next{filter:drop-shadow(0 0 4px #ffd27a) drop-shadow(0 1px 2px #000b)}
body.desktop-game .pg-train-level:has(.pg-train-up:not(:disabled):hover) .pg-train-bead.is-next{filter:brightness(1.6) drop-shadow(0 0 7px #ffd27a);transform:scale(1.25)}
body.desktop-game .pg-train-bead.is-fresh{animation:pg-train-pop 1s ease-out both}
body.desktop-game .pg-train-bead.has-seal{transform:scale(1.2);filter:sepia(1) saturate(2.4) hue-rotate(-12deg) drop-shadow(0 0 3px #f0b43c) drop-shadow(0 1px 2px #000b)}
body.desktop-game .pg-train-bead.has-seal.is-lit{filter:sepia(.4) saturate(2) drop-shadow(0 0 5px #ffe08a) drop-shadow(0 1px 2px #000b)}

body.desktop-game .pg-train-act{margin-top:auto;display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--pg-u)*1.2);min-height:calc(clamp(40px,calc(var(--pg-u)*5.4),66px) + max(16px,calc(var(--pg-u)*2)))}
body.desktop-game .pg-train-cost{display:inline-flex;align-items:center;gap:calc(var(--pg-u)*.6);height:clamp(40px,calc(var(--pg-u)*5.4),66px);white-space:nowrap}
body.desktop-game .pg-train-cost .uk-icon{--uk-is:calc(var(--pg-u)*2.8)}
body.desktop-game .pg-train-cost b{font:700 calc(var(--pg-u)*2.6)/1 var(--uk-serif);color:#fff1c9;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000}
body.desktop-game .pg-train-cost small{font:400 max(var(--uk-min,12px),calc(var(--pg-u)*1.35))/1 var(--uk-sans);color:var(--uk-muted)}
body.desktop-game .pg-train-act .uk-btn-wrap{flex:none}
body.desktop-game .pg-train-act .uk-btn{min-width:calc(var(--uk-bh)*3.6)}
body.desktop-game .pg-train-note{margin:0;align-self:center;width:100%;text-align:center;font:700 var(--pg-train-txt)/1.4 var(--uk-serif);color:#cdbf9c;letter-spacing:.08em}
body.desktop-game .pg-train-note small{font:400 var(--pg-train-sm)/1.4 var(--uk-sans);color:var(--uk-muted);letter-spacing:0}
body.desktop-game .pg-train-costs{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--pg-u)*.5);min-width:0}
body.desktop-game .pg-train-topup{font:400 var(--pg-train-sm)/1.2 var(--uk-sans);color:#ffcf9a}
body.desktop-game .pg-train-btns{display:flex;align-items:flex-start;gap:calc(var(--pg-u)*.8)}
body.desktop-game .pg-train-act.is-asc{flex-wrap:wrap;align-items:center}
body.desktop-game .pg-train-act.is-cap{align-items:center}
body.desktop-game .pg-train-act.is-cap .pg-train-cost{height:auto}
body.desktop-game .pg-train-act.is-cap .pg-train-cost small{line-height:1.45;white-space:nowrap}
body.desktop-game .pg-train-seal.is-small{width:calc(var(--pg-u)*6);height:calc(var(--pg-u)*6);margin-top:0}
body.desktop-game .pg-train-cost.is-done small b{color:#fff1c9}
body.desktop-game .pg-train-capnote{margin:0;font:400 var(--pg-train-sm)/1.4 var(--uk-sans);color:var(--uk-muted)}
body.desktop-game .pg-train-stats.is-mini .pg-train-statrow{height:calc(var(--pg-u)*2.8)}
body.desktop-game .pg-train-stats.is-mini :is(.pg-train-now,.pg-train-new){font-size:calc(var(--pg-u)*1.8)}

/* 升华 nodes I–IV: gem, 给什么, 要什么, 还差什么. */
body.desktop-game .pg-train-tiers{display:flex;flex-direction:column;gap:calc(var(--pg-u)*.5);margin:0;padding:0;list-style:none}
body.desktop-game .pg-train-tier{display:flex;align-items:center;gap:calc(var(--pg-u)*.9);padding:calc(var(--pg-u)*.45) calc(var(--pg-u)*.8);border-radius:calc(var(--pg-u)*.5);background:linear-gradient(180deg,#1a1e24b0,#2f343c80 70%,#3a3f4766);box-shadow:inset 0 2px 3px #000c,inset 0 -1px 0 #f1d89647}
body.desktop-game .pg-train-tier.is-next{box-shadow:inset 0 2px 3px #000c,inset 0 0 0 1px #f1d89699,0 0 8px #f1d89633}
body.desktop-game .pg-train-tier.is-locked{opacity:.78}
body.desktop-game .pg-train-tier.is-fresh{animation:pg-train-pop 1s ease-out both}
body.desktop-game .pg-train-tier-gem{display:grid;place-items:center;flex:none;width:calc(var(--pg-u)*3.4);height:calc(var(--pg-u)*3.4);min-width:24px;min-height:24px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,var(--pg-train-m1),var(--pg-train-m2));font:700 max(12px,calc(var(--pg-u)*1.3))/1 var(--uk-serif);color:#2a1806}
body.desktop-game .pg-train-tier.is-locked .pg-train-tier-gem,body.desktop-game .pg-train-tier.is-next .pg-train-tier-gem{filter:saturate(.5) brightness(.85)}
body.desktop-game .pg-train-tier-body{display:flex;flex-direction:column;gap:calc(var(--pg-u)*.2);min-width:0}
body.desktop-game .pg-train-tier-body b{font:400 var(--pg-train-sm)/1.35 var(--uk-sans);color:#f3ead2}
body.desktop-game .pg-train-tier-body>span{display:flex;flex-wrap:wrap;column-gap:calc(var(--pg-u)*.8);font:400 var(--pg-train-sm)/1.35 var(--uk-sans)}
body.desktop-game .pg-train-tier-body small{font-size:inherit;color:#cdbf9c}
body.desktop-game .pg-train-tier-body em{font-style:normal;color:var(--uk-muted)}
body.desktop-game .pg-train-tier-body em.is-gate{color:#ff8f7a}
body.desktop-game .pg-train-tier-body em.is-done{color:var(--uk-up)}
body.desktop-game .pg-train-tier-body em.is-open{color:#ffe08a}

/* 道途 A / B cards + 专属被动. */
body.desktop-game .pg-train-ways{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--pg-u)*.8);flex:1;min-height:0}
body.desktop-game .pg-train-way{position:relative;display:flex;flex-direction:column;gap:calc(var(--pg-u)*.35);min-width:0;min-height:0;margin:0;padding:calc(var(--pg-u)*.8);overflow:hidden;border:0;border-radius:calc(var(--pg-u)*.6);background:linear-gradient(180deg,#1a1e24c0,#2f343c90 70%,#3a3f4780);box-shadow:inset 0 2px 3px #000c,inset 0 -1px 0 #f1d89647;color:var(--uk-text);font:inherit;text-align:left}
body.desktop-game button.pg-train-way{cursor:pointer}
body.desktop-game button.pg-train-way:hover{box-shadow:inset 0 0 0 1px #f1d896aa,0 0 10px #ffd27a55}
body.desktop-game button.pg-train-way:focus-visible{outline:2px solid var(--uk-gold-hi);outline-offset:2px}
body.desktop-game .pg-train-way.is-current{box-shadow:inset 0 0 0 2px var(--uk-gold-hi),0 0 12px #ffd27a55}
body.desktop-game .pg-train-way.is-locked,body.desktop-game .pg-train-way.is-none{opacity:.7}
body.desktop-game .pg-train-way small{position:relative;z-index:1;font:700 var(--pg-train-sm)/1.1 var(--uk-serif);color:#cdbf9c}
body.desktop-game .pg-train-way b{position:relative;z-index:1;font:700 max(14px,calc(var(--pg-u)*2.1))/1.15 var(--uk-serif);color:#f6e2a8;letter-spacing:.06em}
body.desktop-game .pg-train-way>span:not(.pg-train-way-pic){position:relative;z-index:1;font:400 var(--pg-train-sm)/1.45 var(--uk-sans);color:#ede7d8}
body.desktop-game .pg-train-way em{position:relative;z-index:1;margin-top:auto;font:400 var(--pg-train-sm)/1.35 var(--uk-sans);font-style:normal;color:#9fd3a4}
body.desktop-game .pg-train-way-pic{position:absolute;right:0;bottom:0;width:80%;height:100%;z-index:0;opacity:.42;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
body.desktop-game .pg-train .pg-train-way-img{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end}
body.desktop-game .pg-train-passive{display:flex;flex-direction:column;gap:calc(var(--pg-u)*.3);padding:calc(var(--pg-u)*.7) calc(var(--pg-u)*.9);border-radius:calc(var(--pg-u)*.6);background:linear-gradient(180deg,#2a2210b0,#3a2f1690);box-shadow:inset 0 0 0 1px #f1d89655}
body.desktop-game .pg-train-passive small{font:700 var(--pg-train-sm)/1.2 var(--uk-serif);color:#f6d27a}
body.desktop-game .pg-train-passive span{font:400 var(--pg-train-sm)/1.45 var(--uk-sans);color:#f3ead2}
body.desktop-game .pg-train-passive.is-locked{filter:grayscale(.7);opacity:.8}

/* 符印: two slots, learned runes (装上 / 卸下 / 升级), code-drawn seals. */
body.desktop-game .pg-train-slots{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--pg-u)*.8)}
body.desktop-game .pg-train-slot{display:flex;align-items:center;gap:calc(var(--pg-u)*.7);min-width:0;margin:0;padding:calc(var(--pg-u)*.5) calc(var(--pg-u)*.7);border:0;border-radius:calc(var(--pg-u)*.6);background:linear-gradient(180deg,#1a1e24c0,#2f343c90);box-shadow:inset 0 2px 3px #000c,inset 0 -1px 0 #f1d89647;color:var(--uk-text);font:inherit;text-align:left}
body.desktop-game button.pg-train-slot{cursor:pointer}
body.desktop-game .pg-train-slot.is-picked{box-shadow:inset 0 0 0 2px var(--uk-gold-hi),0 0 10px #ffd27a55}
body.desktop-game .pg-train-slot.is-locked{opacity:.72}
body.desktop-game .pg-train-slot>span{display:flex;flex-direction:column;gap:2px;min-width:0}
body.desktop-game .pg-train-slot small{font:400 var(--pg-train-sm)/1.1 var(--uk-sans);color:var(--uk-muted)}
body.desktop-game .pg-train-slot b{font:700 max(var(--uk-min,12px),calc(var(--pg-u)*1.55))/1.2 var(--uk-serif);color:#f3ead2}
body.desktop-game .pg-train-rune{--s:max(26px,calc(var(--pg-u)*3.6));position:relative;display:block;flex:none;width:var(--s);height:var(--s);background:center/contain no-repeat;font-style:normal}
body.desktop-game .pg-train-rune.is-grey{--s:max(20px,calc(var(--pg-u)*2.6));filter:grayscale(1) brightness(.7)}
body.desktop-game .pg-train-rune.is-empty{background:none}
body.desktop-game .pg-train-rune small{position:absolute;right:-6%;bottom:-6%;padding:0 2px;border-radius:3px;background:#0b1622d0;font:700 max(12px,calc(var(--s)*.3))/1.1 var(--uk-serif);color:#ffe08a}
body.desktop-game .pg-train-rune.is-edge{background-image:image-set(url("./assets/progression/icons/rune-edge@64.png") 1x,url("./assets/progression/icons/rune-edge@128.png") 2x)}
body.desktop-game .pg-train-rune.is-ward{background-image:image-set(url("./assets/progression/icons/rune-ward@64.png") 1x,url("./assets/progression/icons/rune-ward@128.png") 2x)}
body.desktop-game .pg-train-rune.is-opening{background-image:image-set(url("./assets/progression/icons/rune-opening@64.png") 1x,url("./assets/progression/icons/rune-opening@128.png") 2x)}
body.desktop-game .pg-train-rune.is-reaper{background-image:image-set(url("./assets/progression/icons/rune-reaper@64.png") 1x,url("./assets/progression/icons/rune-reaper@128.png") 2x)}
body.desktop-game .pg-train-rune.is-chain{background-image:image-set(url("./assets/progression/icons/rune-chain@64.png") 1x,url("./assets/progression/icons/rune-chain@128.png") 2x)}
body.desktop-game .pg-train-rune.is-bulwark{background-image:image-set(url("./assets/progression/icons/rune-bulwark@64.png") 1x,url("./assets/progression/icons/rune-bulwark@128.png") 2x)}
body.desktop-game .pg-train-rune.is-antidote{background-image:image-set(url("./assets/progression/icons/rune-antidote@64.png") 1x,url("./assets/progression/icons/rune-antidote@128.png") 2x)}
body.desktop-game .pg-train-rune.is-heart{background-image:image-set(url("./assets/progression/icons/rune-heart@64.png") 1x,url("./assets/progression/icons/rune-heart@128.png") 2x)}
body.desktop-game .pg-train-rune.is-pact{background-image:image-set(url("./assets/progression/icons/rune-pact@64.png") 1x,url("./assets/progression/icons/rune-pact@128.png") 2x)}
body.desktop-game .pg-train-socket{--s:max(32px,calc(var(--pg-u)*4.6));position:relative;display:grid;place-items:center;flex:none;width:var(--s);height:var(--s);background:center/contain no-repeat image-set(url("./assets/progression/icons/slot-empty@64.png") 1x,url("./assets/progression/icons/slot-empty@128.png") 2x)}
body.desktop-game .pg-train-socket.is-filled{background-image:image-set(url("./assets/progression/icons/slot-filled@64.png") 1x,url("./assets/progression/icons/slot-filled@128.png") 2x)}
body.desktop-game .pg-train-socket.is-shut{filter:grayscale(1) brightness(.6)}
body.desktop-game .pg-train-socket .pg-train-rune{--s:max(21px,calc(var(--pg-u)*3));width:66%;height:66%}
body.desktop-game .pg-train-later{display:flex;align-items:center;gap:calc(var(--pg-u)*.8);margin:0}
body.desktop-game .pg-train-later-icons{display:flex;gap:calc(var(--pg-u)*.3);flex:none}
body.desktop-game .pg-train-later small{font:400 var(--pg-train-sm)/1.4 var(--uk-sans);color:var(--uk-muted)}
body.desktop-game .pg-train-runes{display:flex;flex-direction:column;gap:calc(var(--pg-u)*.45);margin:0;padding:0;list-style:none}
body.desktop-game .pg-train-runerow{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(var(--pg-u)*.3) calc(var(--pg-u)*.7);padding:calc(var(--pg-u)*.35) calc(var(--pg-u)*.6);border-radius:calc(var(--pg-u)*.5);background:linear-gradient(180deg,#1a1e24a0,#2f343c70)}
body.desktop-game .pg-train-runerow.is-worn{box-shadow:inset 0 0 0 1px #f1d89688}
body.desktop-game .pg-train-runerow.is-unlearned{opacity:.75}
body.desktop-game .pg-train-runetext{display:flex;flex-direction:column;gap:1px;min-width:0}
body.desktop-game .pg-train-runerow.is-unlearned>span{grid-column:1 / -1;display:flex;flex-direction:column}
body.desktop-game .pg-train-runerow b{font:700 max(var(--uk-min,12px),calc(var(--pg-u)*1.5))/1.2 var(--uk-serif);color:#f3ead2}
body.desktop-game .pg-train-runerow small{font:400 var(--pg-train-sm)/1.3 var(--uk-sans);color:var(--uk-muted)}
body.desktop-game .pg-train-runerow>em{font:400 var(--pg-train-sm)/1.3 var(--uk-sans);font-style:normal;color:#cdbf9c;text-align:right;max-width:45%}
body.desktop-game .pg-train-runebtns{grid-column:2;display:flex;justify-content:flex-end;gap:calc(var(--pg-u)*.5)}
body.desktop-game .pg-train-runebtns .uk-btn{--uk-bh:clamp(28px,calc(var(--pg-u)*3.6),44px);min-width:0;padding:0 calc(var(--uk-bh)*.25);font-size:var(--pg-train-sm)}
body.desktop-game .pg-train-runebtns em.is-max{font:700 var(--pg-train-sm)/1 var(--uk-serif);font-style:normal;color:#ffe08a;align-self:center}

/* 一键培养 row. */
body.desktop-game .pg-train-oneclick{flex:none;display:flex;justify-content:center;min-height:clamp(40px,calc(var(--pg-u)*5.4),66px)}
body.desktop-game .pg-train-oneclick:empty{display:none}
body.desktop-game .pg-train-oneclick .uk-btn-wrap{flex-direction:row;gap:calc(var(--pg-u)*1)}

/* Faces (sources / plan / notice) replace tabs + stele + 一键培养. */
body.desktop-game .pg-train-steles>.pg-train-face{flex:1 1 0;justify-content:flex-start;gap:calc(var(--pg-u)*1);padding:calc(var(--pg-u)*.8) calc(var(--pg-u)*1.3)}
body.desktop-game .pg-train-face .uk-panel-title{margin:0}
body.desktop-game .pg-train-purse{display:flex;flex-wrap:wrap;gap:calc(var(--pg-u)*.6) calc(var(--pg-u)*1.6)}
body.desktop-game .pg-train-src{display:flex;flex-direction:column;gap:calc(var(--pg-u)*.35);margin:0;padding:0 0 0 1.1em;font:400 var(--pg-train-sm)/1.4 var(--uk-sans);color:var(--uk-text)}
body.desktop-game .pg-train-src.is-later{display:block;padding:0;color:var(--uk-muted)}
body.desktop-game .pg-train-src.is-later b{color:#cdbf9c}
body.desktop-game .pg-train-rate{align-self:center;font:400 var(--pg-train-sm)/1.2 var(--uk-sans);color:var(--uk-muted)}
body.desktop-game .pg-train-src-title{margin:0;font:700 max(var(--uk-min,12px),calc(var(--pg-u)*1.6))/1.2 var(--uk-serif);color:#cdbf9c}
body.desktop-game .pg-train-face-foot{margin-top:auto;display:flex;justify-content:center;align-items:flex-start;gap:calc(var(--pg-u)*.8) calc(var(--pg-u)*1.2);flex-wrap:wrap}
body.desktop-game .pg-train-plan-who{margin:0;font:700 max(14px,calc(var(--pg-u)*2))/1.2 var(--uk-serif);color:#f6e2a8}
body.desktop-game .pg-train-plan{display:flex;flex-direction:column;gap:calc(var(--pg-u)*.7);margin:0;padding:0 0 0 1.1em;font:400 max(13px,calc(var(--pg-u)*1.6))/1.5 var(--uk-sans);color:var(--uk-text)}
body.desktop-game .pg-train-seal{display:grid;place-items:center;flex:none;width:calc(var(--pg-u)*7.4);height:calc(var(--pg-u)*7.4);margin-top:calc(var(--pg-u)*-.6);border-radius:50%;background:url("./assets/pages/_kit/icon-medal.webp") center/contain no-repeat;transform:rotate(-8deg);font:700 max(var(--uk-min,12px),calc(var(--pg-u)*1.5))/1.15 var(--uk-serif);color:#f6d27a;text-align:center;letter-spacing:.04em;padding:0;box-sizing:border-box;white-space:nowrap;filter:drop-shadow(0 0 8px #f1d89666) drop-shadow(0 3px 4px #000c)}

body.desktop-game .pg-train-pips{display:flex;align-items:center;gap:calc(var(--pg-u)*.5);margin-left:auto}
body.desktop-game .pg-train-pip{display:block;width:calc(var(--pg-u)*2);aspect-ratio:344/467;background:url("./assets/pages/train/pip-dim.webp") center/contain no-repeat;filter:drop-shadow(0 1px 2px #000b)}
body.desktop-game .pg-train-pip.is-lit{background-image:url("./assets/pages/train/pip-lit.webp");filter:drop-shadow(0 0 5px #b07bffaa) drop-shadow(0 1px 2px #000b)}
body.desktop-game .pg-train-pip.is-next{filter:drop-shadow(0 0 4px #e4ccff) drop-shadow(0 1px 2px #000b)}
body.desktop-game .pg-train-pip.is-fresh{animation:pg-train-pop 1s ease-out both}
body.desktop-game .pg-train-skillrow{display:flex;align-items:center;gap:calc(var(--pg-u)*1.2);margin-bottom:calc(var(--pg-u)*.6)}
body.desktop-game .pg-train-sigil{position:relative;flex:none;width:calc(var(--pg-u)*6.4);height:calc(var(--pg-u)*6.4);border-radius:50%;filter:drop-shadow(0 4px 6px #000c)}
body.desktop-game .pg-train-sigil img{display:block;width:100%;height:100%}
body.desktop-game .pg-train-sigil.is-flash{animation:pg-train-sigil .9s ease-out both}
body.desktop-game .pg-train-skillname{display:flex;flex-direction:column;gap:calc(var(--pg-u)*.6);min-width:0}
body.desktop-game .pg-train-skillname strong{font:700 calc(var(--pg-u)*2.3)/1.1 var(--uk-serif);color:#f3dfae;letter-spacing:.08em;text-shadow:0 1px 2px #000}
body.desktop-game .pg-train-cd{display:inline-flex;align-items:center;gap:calc(var(--pg-u)*.5);font:400 var(--pg-train-txt)/1 var(--uk-sans);color:var(--uk-muted);white-space:nowrap}
body.desktop-game .pg-train-cd b{display:inline-block;font:700 calc(var(--pg-u)*2.1)/1 var(--uk-serif);color:#f3ead2}
body.desktop-game .pg-train-cd .pg-train-new{color:var(--uk-up)}
body.desktop-game .pg-train-cd .pg-train-arrow{font-size:max(var(--uk-min,12px),calc(var(--pg-u)*1.6))}
body.desktop-game .pg-train-cd small{font-size:max(var(--uk-min,12px),calc(var(--pg-u)*1.25));color:#9aa6ad}
body.desktop-game .pg-train-desc{margin:0 0 calc(var(--pg-u)*.9);padding:0 calc(var(--pg-u)*.3);font:400 max(var(--uk-min,12px),calc(var(--pg-u)*1.42))/1.42 var(--uk-sans);color:var(--uk-text)}
body.desktop-game .pg-train .is-flip{animation:pg-train-flip .6s ease-out both}

/* Rules face (i): same stone, flipped in place of the two steles. */
body.desktop-game .pg-train-steles>.pg-train-rules{flex:1;display:flex;flex-direction:column;gap:calc(var(--pg-u)*1.2);padding:calc(var(--pg-u)*1) calc(var(--pg-u)*1.4)}
body.desktop-game .pg-train-rules[hidden]{display:none}
body.desktop-game .pg-train-rules .uk-panel-title{margin:0}
body.desktop-game .pg-train-rule-lead{margin:0;padding:calc(var(--pg-u)*.4) calc(var(--pg-u)*.6);font:400 max(13px,calc(var(--pg-u)*1.7))/1.65 var(--uk-sans)}
body.desktop-game .pg-train-rule-list{display:flex;flex-direction:column;gap:calc(var(--pg-u)*1.5);margin:0;padding:0;list-style:none}
body.desktop-game .pg-train-rule-list li{display:flex;align-items:flex-start;gap:calc(var(--pg-u)*.9);font:400 max(13px,calc(var(--pg-u)*1.65))/1.55 var(--uk-sans)}
body.desktop-game .pg-train-rule-list .uk-icon{--uk-is:max(16px,calc(var(--pg-u)*2.2))}
body.desktop-game .pg-train-rule-list .uk-icon{margin-top:.15em}
body.desktop-game .pg-train-rule-foot{margin-top:auto;display:flex;justify-content:center}

/* Gold ribbon: the kit's gold ribbon art; never wider than its 570px source at DPR1 (285px at DPR2). */
body.desktop-game .pg-train-ribbon{position:relative;z-index:0;flex:none;align-self:center;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:calc(var(--pg-u)*5);max-width:570px;padding:0 calc(var(--pg-u)*9) calc(var(--pg-u)*.7);white-space:nowrap}
body.desktop-game .pg-train-ribbon::before{content:"";position:absolute;inset:0;z-index:-1;background:url("./assets/pages/_kit/icon-ribbon-gold.webp") center/100% 100% no-repeat;filter:drop-shadow(0 3px 4px #000b)}
body.desktop-game .pg-train-ribbon span{flex:none;font:700 max(var(--uk-min,12px),calc(var(--pg-u)*1.45))/1 var(--uk-serif);color:#3a2410;letter-spacing:.06em;text-shadow:0 1px 0 #f6e2a880}
body.desktop-game .pg-train-ribbon.is-flash::after{content:"";position:absolute;inset:-10% -4%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#fff3c4aa,transparent);animation:pg-train-ribbon 2.4s ease-out both;pointer-events:none}
@media (min-resolution:2dppx){body.desktop-game .pg-train-ribbon{max-width:285px}}

/* Fly motes and sparks (WAAPI, transform/opacity only). */
body.desktop-game .pg-train-fx{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:visible}
body.desktop-game .pg-train-mote{position:absolute;width:calc(var(--pg-u)*2.6);height:calc(var(--pg-u)*2.6);background:center/contain no-repeat;filter:drop-shadow(0 0 8px #ffd27a)}
body.desktop-game .pg-train-mote.is-xp{background-image:url("./assets/pages/_kit/icon-xp.webp")}
body.desktop-game .pg-train-mote.is-shard{background-image:url("./assets/pages/_kit/icon-shard.webp");filter:drop-shadow(0 0 8px #c28cff)}
body.desktop-game .pg-train-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--pg-train-el2);box-shadow:0 0 8px 3px var(--pg-train-el)}

/* 升华 IV clip / 道途 picture: shown once over the page, skippable; JS sizes it to fit and never above its source pixels. */
body.desktop-game .pg-train-moment{position:absolute;inset:0;z-index:20;display:grid;place-items:center}
body.desktop-game .pg-train-moment[hidden]{display:none}
body.desktop-game .pg-train-moment-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#0b1622d9,#03060aF2 70%);animation:pg-train-fade .3s ease-out both;cursor:pointer}
body.desktop-game .pg-train-moment-media{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--pg-u)*.8);margin:0;animation:pg-train-fade .35s ease-out both}
body.desktop-game .pg-train-clip{display:block;max-width:none;border-radius:calc(var(--pg-u)*.6);box-shadow:0 0 0 2px #f1d89688,0 0 40px #f0b43c55,0 10px 30px #000c;background:#000}
body.desktop-game .pg-train-clip.is-still{background:none}
body.desktop-game .pg-train-moment-media figcaption{font:700 max(14px,calc(var(--pg-u)*2.2))/1 var(--uk-serif);letter-spacing:.12em;color:#f6e2a8;text-shadow:0 2px 4px #000}
body.desktop-game .pg-train .pg-train-skip{position:absolute;right:calc(var(--pg-u)*2);bottom:calc(var(--pg-u)*2);z-index:2}

@keyframes pg-train-fade{from{opacity:0}to{opacity:1}}
@keyframes pg-train-halo{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}40%{transform:translate(-50%,-50%) scale(1.06);opacity:1;filter:brightness(1.8)}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes pg-train-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pg-train-spin{to{transform:rotate(360deg)}}
@keyframes pg-train-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--pg-u)*-1.4))}}
@keyframes pg-train-ember{0%{transform:translate(0,0);opacity:0}12%{opacity:.9}80%{opacity:.5}100%{transform:translate(var(--dx),calc(var(--pg-u)*-34));opacity:0}}
@keyframes pg-train-wave{0%{opacity:.95;transform:translate(-50%,-50%) scaleY(.3) scale(.25)}100%{opacity:0;transform:translate(-50%,-50%) scaleY(.3) scale(1.25)}}
@keyframes pg-train-ring-flash{0%{filter:none}25%{filter:brightness(2.2) saturate(1.3)}100%{filter:none}}
@keyframes pg-train-pop{0%{transform:scale(1)}30%{transform:scale(1.7);filter:brightness(1.8) drop-shadow(0 0 8px #ffd27a)}100%{transform:scale(1)}}
@keyframes pg-train-flip{0%{transform:rotateX(0)}40%{transform:rotateX(90deg);opacity:.2}100%{transform:rotateX(0);opacity:1}}
@keyframes pg-train-sigil{0%{transform:scale(1)}30%{transform:scale(1.12);filter:brightness(1.7) drop-shadow(0 0 12px #c28cff)}100%{transform:scale(1)}}
@keyframes pg-train-ribbon{0%{opacity:0;transform:scaleX(.6)}20%{opacity:1;transform:scaleX(1)}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  body.desktop-game .pg-train :is(.pg-train-ring-spin,.pg-train-orb,.pg-train-embers>i,.pg-train-wave,.pg-train-ring,.pg-train-bead,.pg-train-pip,.pg-train-sigil,.is-flip,.pg-train-art img,.pg-train-halo,.pg-train-tier,.pg-train-moment-shade,.pg-train-moment-media){animation:none!important}
  body.desktop-game .pg-train .pg-train-ribbon::after{animation:none!important;opacity:.6}
  body.desktop-game .pg-train .pg-train-halo::before{animation:none!important}
  body.desktop-game .pg-train .pg-train-embers{display:none}
  body.desktop-game .pg-train .pg-train-art{transition:none}
}