/* ========================================================================== */
/* MYTHAVON first-screen experience                                       */
/* - cinematic loading scenes                                                */
/* - Hall of Heroes class selection                                          */
/* This file intentionally overrides the legacy inline picker styles without */
/* changing the gameplay HUD or modal contracts.                              */
/* ========================================================================== */

:root{
  --first-ink:#f7f5ff;
  --first-muted:#b9b7ce;
  --first-gold:#f7d778;
  --first-gold-2:#c99438;
  --first-navy:#090d1d;
  --first-glass:rgba(11,15,31,.78);
  --first-line:rgba(214,225,255,.18);
}

/* ── Loading scenes ─────────────────────────────────────────────────────── */
#load.aetherLoad{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  padding:max(28px,5vh) clamp(18px,5vw,80px);
  background:#07101d;
  color:var(--first-ink);
  font-family:'Leelawadee UI','Segoe UI',Tahoma,sans-serif;
  opacity:1;
  visibility:visible;
  transition:opacity .55s ease,visibility .55s ease;
}
#load.aetherLoad.isLeaving{opacity:0;visibility:hidden;pointer-events:none}
#load .ldBackdrop{
  position:absolute;
  inset:-2%;
  z-index:-4;
  background-position:center;
  background-size:cover;
  transform:scale(1.025);
  filter:saturate(1.05) contrast(1.02);
  animation:ldDrift 16s ease-in-out infinite alternate;
}
#load .ldShade{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(180deg,rgba(5,9,20,.05) 0%,rgba(5,8,18,.05) 45%,rgba(5,8,18,.84) 82%,#050812 100%),
    radial-gradient(ellipse at 50% 38%,transparent 20%,rgba(4,6,15,.24) 75%);
}
#load .ldGrain{
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.13;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.65) 0 1px,transparent 1.4px),
    radial-gradient(circle at 74% 32%,rgba(255,232,160,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 42% 78%,rgba(145,220,255,.45) 0 1px,transparent 1.5px);
  background-size:151px 139px,211px 191px,179px 233px;
  animation:ldStars 12s linear infinite;
}
#load .ldContent{
  width:min(980px,100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(18px,5vw,72px);
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
#load .ldBrand{
  display:flex;
  align-items:center;
  margin-bottom:13px;
}
#load .ldBrand img{display:block;width:clamp(210px,24vw,292px);height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.48))}
#load .ldEyebrow{
  margin-bottom:5px;
  color:#d8dcf6;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.2px;
}
#load .ldTitle{
  margin:0;
  color:#fff;
  font-size:clamp(30px,5vw,58px);
  font-weight:950;
  line-height:1.08;
  letter-spacing:-.8px;
}
#load .ldSubtitle{
  max-width:620px;
  margin-top:9px;
  color:#cdd0e4;
  font-size:clamp(14px,1.6vw,17px);
  font-weight:650;
  line-height:1.6;
}
#load .ldPanel{
  width:min(430px,38vw);
  padding:17px 18px 15px;
  border:1px solid rgba(231,237,255,.18);
  border-radius:18px;
  background:linear-gradient(150deg,rgba(17,22,42,.82),rgba(7,10,23,.7));
  box-shadow:0 18px 52px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
#load .ldStatusRow{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:#f4f4ff;
  font-size:13px;
  font-weight:850;
}
#load .ldPercent{color:#ffe08a;font-variant-numeric:tabular-nums}
#load .ldActivity{display:flex;align-items:center;gap:9px;margin-top:10px;color:#cdd8f4;font-size:11.5px;font-weight:750;letter-spacing:.35px}
#load .ldSpinner{position:relative;width:18px;height:18px;flex:0 0 18px;border:2px solid rgba(174,222,255,.2);border-top-color:#8ee3ff;border-right-color:#ffe08a;border-radius:50%;animation:ldSpin .8s linear infinite;filter:drop-shadow(0 0 5px rgba(91,214,255,.45))}
#load .ldSpinner i{position:absolute;inset:4px;border-radius:50%;background:#e8f8ff;animation:ldBeat 1.15s ease-in-out infinite}
#load .ldPulse::after{content:'…';display:inline-block;width:1.2em;overflow:hidden;vertical-align:bottom;animation:ldDots 1.2s steps(4,end) infinite}
#load.isComplete .ldSpinner{animation:none;border-color:#8ff0ba;background:#8ff0ba}
#load.isComplete .ldSpinner i{animation:none;background:#173c2a}
#load.hasError .ldSpinner{animation:none;border-color:#ff8291;background:#ff8291}
#load.hasError .ldSpinner i{animation:none;background:#501823}
#load.hasError .ldPanel{border-color:rgba(255,115,134,.58);box-shadow:0 18px 52px rgba(0,0,0,.4),inset 3px 0 #d45d70}
#load.hasError .ldTrack::after{display:none}
#load.hasError .ldBar{background:linear-gradient(90deg,#7c2839,#e36a7d);box-shadow:0 0 16px rgba(227,106,125,.45)}
#load .ldTrack{
  position:relative;
  height:8px;
  margin:10px 0 12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(3,5,14,.72);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.45);
}
#load .ldTrack::after{content:'';position:absolute;inset:0 auto 0 -35%;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-22deg);animation:ldSweep 1.15s ease-in-out infinite}
#load .ldBar{
  display:block;
  width:8%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#5bd6ff 0%,#8c82ff 52%,#ffe18a 100%);
  box-shadow:0 0 18px rgba(112,191,255,.72);
  transition:width .28s ease;
}
#load .ldTip{
  color:#c3c5d5;
  font-size:12.5px;
  line-height:1.55;
}
#load .ldTip b{color:#fff1b6}
#load .ldActions{display:flex;gap:8px;margin-top:13px}
#load .ldActions[hidden]{display:none}
#load .ldActions button{min-height:42px;padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.18);font-weight:850;cursor:pointer}
#load .ldRetry{background:linear-gradient(#efd07c,#a9782d);border-color:#ffe4a0!important;color:#181005}
#load .ldReload{background:rgba(255,255,255,.07);color:#e9ebf7}
#load .ldActions button:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (pointer:coarse){#load .ldActions button{min-height:46px}}

@keyframes ldDrift{from{transform:scale(1.025) translate3d(-.35%,0,0)}to{transform:scale(1.06) translate3d(.35%,-.35%,0)}}
@keyframes ldStars{to{background-position:151px 139px,-211px 191px,179px -233px}}
@keyframes ldSpin{to{transform:rotate(360deg)}}
@keyframes ldBeat{50%{transform:scale(.45);opacity:.45}}
@keyframes ldDots{0%{width:0}100%{width:1.2em}}
@keyframes ldSweep{to{left:115%}}

/* ── Character selection ───────────────────────────────────────────────── */
#pick{
  --pk-accent:#80d8ff;
  background:#080d1c!important;
  color:var(--first-ink)!important;
  font-family:'Leelawadee UI','Segoe UI',Tahoma,sans-serif!important;
  isolation:isolate;
}
#pick::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-3;
  background:url('assets/ui/hall-of-heroes-v1.webp') center/cover no-repeat;
  filter:saturate(.9) brightness(.68);
  transform:scale(1.015);
}
#pick::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,10,24,.88) 0%,rgba(6,10,24,.44) 31%,rgba(6,10,24,.2) 56%,rgba(6,10,24,.7) 100%),
    linear-gradient(180deg,rgba(7,11,25,.62),transparent 24%,rgba(5,8,19,.72) 100%),
    radial-gradient(circle at 60% 44%,color-mix(in srgb,var(--pk-accent) 18%,transparent),transparent 34%);
}
#pick .pkWrap{
  width:min(1500px,100%);
  max-width:none;
  min-height:100svh;
  margin:0 auto;
  padding:clamp(22px,3.2vh,44px) clamp(18px,3vw,48px) 28px;
  display:flex;
  flex-direction:column;
}
#pick .pkHead{
  position:relative;
  margin:0 0 18px;
  text-align:left;
}
#pick .pkBrand{
  display:flex;
  align-items:center;
  margin-bottom:10px;
}
#pick .pkBrand img{display:block;width:clamp(200px,21vw,276px);height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.46))}
#pick .pkKicker{
  margin-bottom:3px;
  color:color-mix(in srgb,var(--pk-accent) 78%,white);
  font-size:13px;
  font-weight:900;
  letter-spacing:.8px;
}
#pick .pkHead h1{
  margin:0 0 7px;
  color:#fff;
  font-size:clamp(30px,3vw,43px);
  line-height:1.12;
  letter-spacing:-.45px;
  text-shadow:0 4px 22px rgba(0,0,0,.62);
}
#pick .pkSub{
  max-width:760px;
  color:#d0d0df;
  font-size:13.5px;
  line-height:1.52;
}
#pick .pkProg{
  display:inline-flex!important;
  align-items:center;
  min-height:34px;
  margin-top:10px;
  padding:6px 12px;
  border:1px solid rgba(226,232,255,.16);
  border-radius:10px;
  color:#c7c8d8;
  font-size:13px;
  background:rgba(6,9,21,.5);
  backdrop-filter:blur(8px);
}
#pick .pkCols{
  flex:1;
  display:grid;
  grid-template-columns:minmax(270px,330px) minmax(0,1fr);
  gap:18px;
  align-items:stretch;
  min-height:0;
}
#pick .pkGrid{
  align-content:start;
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:0;
  padding:10px;
  border:1px solid rgba(227,234,255,.15);
  border-radius:20px;
  background:linear-gradient(165deg,rgba(14,18,37,.84),rgba(7,10,23,.68));
  box-shadow:0 18px 58px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
#pick .pkRailTitle{
  padding:4px 5px 8px;
  color:#aeb1c7;
  font-size:12.5px;
  font-weight:950;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
#pick .pkCard{
  position:relative;
  min-height:66px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 10px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  box-shadow:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
#pick .pkCard::after{
  content:'';
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(100deg,color-mix(in srgb,var(--card-accent,var(--pk-accent)) 17%,transparent),transparent 72%);
  transition:opacity .18s ease;
}
#pick .pkCard:hover{
  transform:translateX(4px);
  border-color:rgba(224,231,255,.2);
  background:rgba(255,255,255,.065);
}
#pick .pkCard.on{
  transform:translateX(5px);
  border-color:color-mix(in srgb,var(--pk-accent) 72%,white);
  background:rgba(255,255,255,.08);
  box-shadow:0 8px 25px color-mix(in srgb,var(--pk-accent) 18%,transparent),inset 3px 0 0 var(--pk-accent);
}
#pick .pkCard.on::after{opacity:1}
#pick .pkCard.lock{opacity:.48;border-style:solid;cursor:not-allowed;filter:saturate(.45)}
#pick .pkCard.lock:hover{transform:none;opacity:.62;border-color:rgba(255,204,128,.3)}
#pick .pkCard .ic{
  position:relative;
  z-index:1;
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(230,237,255,.2);
  border-radius:13px;
  background:radial-gradient(circle at 45% 30%,rgba(255,255,255,.18),rgba(30,35,60,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
#pick .pkClassIcon{width:100%;height:100%;object-fit:cover;display:block}
#pick .pkLockMini{
  position:absolute;
  right:-2px;
  bottom:-2px;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:7px;
  background:#171c30;
  font-size:12.5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
#pick .pkCard .nm{color:#f7f7ff;font-size:15px;font-weight:950;letter-spacing:.1px}
#pick .pkCard.on .nm{color:#fff}
#pick .pkCard .pkLockedName{color:#a9a9b8}
#pick .pkCard .rl{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap}
#pick .pkRole{
  padding:2px 7px;
  border-width:1px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:900;
  line-height:1.3;
}
#pick .pkLockText{margin-top:3px;color:#d6a85d;font-size:12.5px;line-height:1.35}
#pick .pkRight{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(430px,1.25fr) minmax(320px,.75fr);
  grid-template-rows:auto minmax(0,1fr);
  gap:12px;
}
#pick .pkStage{
  position:relative;
  grid-row:1/3;
  min-height:570px;
  height:auto;
  overflow:hidden;
  border:1px solid rgba(230,237,255,.2);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 72%,color-mix(in srgb,var(--pk-accent) 20%,transparent),transparent 38%),
    linear-gradient(180deg,rgba(9,13,28,.08),rgba(7,10,22,.52));
  box-shadow:0 24px 80px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(3px);
}
#pick .pkStage::before{
  content:'';
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  pointer-events:none;
}
#pick #pickCv{width:100%;height:100%;display:block;filter:drop-shadow(0 24px 20px rgba(0,0,0,.3))}
#pick .pkNoSel{color:#d2d2e2;font-size:14px;font-weight:800}
#pick .pkTry{
  grid-column:2;
  padding:11px 12px;
  border:1px solid rgba(229,235,255,.16);
  border-radius:16px;
  background:linear-gradient(160deg,rgba(14,18,38,.86),rgba(8,11,25,.76));
  box-shadow:0 14px 35px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
}
#pick .pkTryRow{gap:8px;margin-bottom:7px}
#pick .pkTryL{flex:0 0 48px;color:#afb2c8;font-size:12.5px}
#pick .pkTryB{gap:5px}
#pick .pkChip{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border:1px solid rgba(225,232,255,.16);
  border-radius:9px;
  color:#d7d8e6;
  font-size:12.5px;
  background:rgba(255,255,255,.045);
}
#pick .pkChip:hover{border-color:color-mix(in srgb,var(--pk-accent) 60%,white);background:rgba(255,255,255,.08)}
#pick .pkChip.on{
  border-color:color-mix(in srgb,var(--pk-accent) 68%,white);
  color:#fff;
  background:color-mix(in srgb,var(--pk-accent) 28%,rgba(18,22,42,.92));
  box-shadow:0 0 18px color-mix(in srgb,var(--pk-accent) 18%,transparent);
}
#pick .pkInfo{
  grid-column:2;
  min-height:0;
  overflow:auto;
  padding-right:3px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
#pick .pkBox{
  padding:15px;
  border:1px solid rgba(229,235,255,.16)!important;
  border-radius:17px;
  background:linear-gradient(155deg,rgba(14,18,38,.88),rgba(7,10,23,.8));
  box-shadow:0 16px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
#pick .pkTitle{color:#fff;font-size:17px;line-height:1.45}
#pick .pkTitleIcon{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  object-fit:cover;
}
#pick .pkPlay{margin:9px 0 10px;color:#dfe2f6;font-size:13px;line-height:1.65}
#pick .pkStats{gap:4px 14px;color:#ddddea;font-size:12.5px;line-height:1.75}
#pick .pkGW{gap:7px}
#pick .pkGood,#pick .pkWeak{padding:8px 10px;font-size:12.5px;line-height:1.55}
#pick .pkGood{border-color:rgba(112,226,154,.28);background:rgba(80,196,132,.075)}
#pick .pkWeak{border-color:rgba(255,147,137,.26);background:rgba(255,112,104,.065)}
#pick .pkSk{gap:5px}
#pick .pkSkI{
  padding:4px 8px;
  border:1px solid rgba(225,232,255,.13);
  border-radius:8px;
  color:#d8d9e7;
  font-size:12.5px;
  background:rgba(255,255,255,.04);
}
#pick .brFlip,#pick .brDot{font-size:12.5px}
#pick .pkFoot{
  margin-top:14px;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:10px 12px 10px 16px;
  border:1px solid rgba(229,235,255,.16);
  border-radius:18px;
  text-align:left;
  background:linear-gradient(145deg,rgba(13,17,35,.9),rgba(7,10,23,.8));
  box-shadow:0 18px 45px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
#pick .pkName{display:flex;align-items:center;gap:9px;margin:0;color:#d2d3e1;font-size:13px;font-weight:800}
#pick .pkName input{
  width:220px;
  min-height:43px;
  margin:0;
  padding:8px 13px;
  border:1px solid rgba(226,233,255,.22);
  border-radius:12px;
  color:#fff;
  font-size:14px;
  background:rgba(3,6,17,.58);
  outline:none;
}
#pick .pkName input:focus{border-color:var(--pk-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pk-accent) 16%,transparent)}
#pick #pickGo{
  min-width:240px;
  min-height:48px;
  margin:0;
  padding:10px 22px;
  border:1px solid color-mix(in srgb,var(--pk-accent) 68%,white);
  border-radius:13px;
  color:#07101b;
  font-size:14px;
  font-weight:950;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pk-accent) 74%,white),#ffe293);
  box-shadow:0 10px 28px color-mix(in srgb,var(--pk-accent) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.55);
}
#pick #pickGo:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.06)}
#pick #pickGo:disabled{filter:grayscale(.4);opacity:.45}
#pick #pickWarn{margin:0 auto 0 0;color:#aeb1c4;font-size:12.5px;line-height:1.4}

@media(max-width:1100px){
  #pick .pkRight{grid-template-columns:minmax(380px,1.05fr) minmax(295px,.95fr)}
  #pick .pkStage{min-height:540px}
  #pick .pkStats{grid-template-columns:1fr}
}

/* Keep the primary action visible on laptop-height displays. The detail panel
   and class rail scroll independently instead of pushing the whole screen down. */
@media(min-width:881px){
  #pick{overflow:hidden!important}
  #pick .pkWrap{height:100svh;min-height:0;overflow:hidden}
  #pick .pkCols{overflow:hidden}
  #pick .pkGrid{overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
  #pick .pkRight{height:100%;overflow:hidden}
  #pick .pkStage{min-height:0!important}
}

@media(min-width:881px) and (max-height:820px){
  #pick .pkWrap{padding:14px 28px 13px}
  #pick .pkHead{margin-bottom:10px}
  #pick .pkBrand{margin-bottom:4px}
  #pick .pkBrand img{width:228px}
  #pick .pkHead h1{font-size:36px;margin-bottom:3px}
  #pick .pkSub{font-size:12.5px;line-height:1.4}
  #pick .pkProg{min-height:29px;margin-top:6px;padding:4px 10px;font-size:12.5px}
  #pick .pkCols{gap:12px}
  #pick .pkGrid{gap:5px;padding:8px}
  #pick .pkRailTitle{padding-bottom:4px}
  #pick .pkCard{min-height:54px;padding:6px 8px}
  #pick .pkCard .ic{width:40px;height:40px;flex-basis:40px}
  #pick .pkCard .nm{font-size:13.5px}
  #pick .pkCard .rl{margin-top:2px}
  #pick .pkRole{font-size:11.5px;padding:1px 6px}
  #pick .pkTry{padding:8px 10px}
  #pick .pkTryRow{margin-bottom:4px}
  #pick .pkChip{min-height:26px;padding:3px 7px;font-size:12.5px}
  #pick .pkBox{padding:11px}
  #pick .pkTitle{font-size:15px}
  #pick .pkTitleIcon{width:32px;height:32px}
  #pick .pkPlay{margin:5px 0 6px;font-size:12.5px}
  #pick .pkStats{font-size:12.5px;line-height:1.55}
  #pick .pkGood,#pick .pkWeak{padding:6px 8px;font-size:12.5px}
  #pick .pkFoot{min-height:58px;margin-top:9px;padding:7px 10px}
  #pick .pkName input{min-height:39px}
  #pick #pickGo{min-height:42px}
}

@media(max-width:880px){
  #load .ldContent{grid-template-columns:1fr}
  #load .ldPanel{width:100%}
  #pick .pkWrap{padding:20px 14px 22px}
  #pick .pkHead{text-align:center}
  #pick .pkBrand{justify-content:center}
  #pick .pkKicker{margin-top:3px}
  #pick .pkSub{margin-inline:auto}
  #pick .pkProg{display:flex!important;justify-content:center}
  #pick .pkCols{grid-template-columns:1fr}
  #pick .pkGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:8px;
  }
  #pick .pkRailTitle{grid-column:1/-1}
  #pick .pkCard{min-width:0;min-height:62px}
  #pick .pkCard .ic{flex-basis:42px;width:42px;height:42px}
  #pick .pkRole{display:none}
  #pick .pkRight{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  #pick .pkStage{grid-row:auto;min-height:430px;height:52svh}
  #pick .pkTry,#pick .pkInfo{grid-column:1}
  #pick .pkInfo{max-height:none;overflow:visible}
  #pick .pkFoot{flex-wrap:wrap;justify-content:center}
  #pick #pickWarn{order:3;flex:1 0 100%;text-align:center;margin:0}
}

@media(max-width:580px){
  #load.aetherLoad{padding:22px 16px}
  #load .ldBrand img{width:228px}
  #pick .pkBrand img{width:230px}
  #load .ldTitle{font-size:32px}
  #load .ldSubtitle{font-size:13px}
  #pick .pkHead h1{font-size:29px}
  #pick .pkSub{font-size:12.5px}
  #pick .pkProg{font-size:12.5px;line-height:1.45}
  #pick .pkGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pick .pkCard{padding:7px;gap:8px}
  #pick .pkCard .nm{font-size:13px}
  #pick .pkLockText{font-size:12.5px}
  #pick .pkStage{height:380px;min-height:380px;border-radius:19px}
  #pick .pkTryRow{align-items:flex-start}
  #pick .pkTryL{flex-basis:42px;font-size:12.5px;padding-top:6px}
  #pick .pkChip{font-size:12.5px;padding:3px 7px}
  #pick .pkGW{grid-template-columns:1fr}
  #pick .pkFoot{padding:12px}
  #pick .pkName{width:100%;justify-content:center;flex-wrap:wrap}
  #pick .pkName input{width:min(260px,100%)}
  #pick #pickGo{width:100%;min-width:0}
}

@media(prefers-reduced-motion:reduce){
  #load .ldBackdrop,#load .ldGrain{animation:none}
  #load .ldSpinner{animation-duration:1.8s}
  #load .ldSpinner i,#load .ldPulse::after,#load .ldTrack::after{animation:none}
  #pick .pkCard,#pick #pickGo{transition:none}
}

/* โหมดเครื่องสเปกต่ำ: รักษาภาพหลักไว้ แต่ตัดงาน GPU ที่แทบมองไม่เห็น */
html.lowSpec #load .ldBackdrop,html.lowSpec #load .ldGrain{animation:none}
html.lowSpec #pick::before{transform:none;filter:saturate(.88) brightness(.66)}
html.lowSpec #pick .pkGrid,html.lowSpec #pick .pkTry,html.lowSpec #pick .pkBox,
html.lowSpec #pick .pkFoot{backdrop-filter:none;box-shadow:0 10px 28px rgba(0,0,0,.26)}

@media(max-width:580px){
  #load .ldBackdrop,#load .ldGrain{animation:none}
  #pick .pkGrid,#pick .pkTry,#pick .pkBox,#pick .pkFoot{backdrop-filter:none}
}