/* ALL-22 PRO — Pokémon League screens (allpro/leaguemap.js): the region's map, the badge case, intro cards, the
   badge-earned moment and the Hall of Fame. Same broadcast look as pro.css: hard pixel borders (stepped
   box-shadows: var(--fr) / var(--fr-gold)), no rounded corners, no blur, palette colors, "Press Start 2P".
   Type: only the pro.css ladder (--s / --m / --l / --xl / --xxl, whole font pixels at every breakpoint); spacing in
   multiples of var(--px). Pixel canvases are sized from JS at whole device-pixel scales; sprites render with
   image-rendering: pixelated. */
.lg-screen { --tc: #e8413b; --tink: #f4f4ec; --lg-side: 372px; }
.screen.hof { animation: none; color: inherit; font-size: inherit; } /* pro.css .hof (old side-panel blink) must not hit the screen */
.lg-screen canvas, .lg-moment canvas, .lg-spr { image-rendering: pixelated; image-rendering: crisp-edges; }
.lg-spr { width: 64px; height: 64px; display: block; }
.lg-spr.big { width: 192px; height: 192px; }

/* ---------- map screen ---------- */
.lg-wrap { display: flex; gap: calc(8 * var(--px)); align-items: center; justify-content: center; }
.lg-mapbox { display: flex; flex-direction: column; }
.lg-maphead, .lg-mapfoot { display: flex; justify-content: space-between; align-items: center; gap: calc(3 * var(--px)); background: var(--ink); padding: calc(3 * var(--px)) calc(4 * var(--px)); font-size: var(--s); }
.lg-maphead { padding-top: calc(4 * var(--px)); color: var(--gold); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--gold), calc(-1 * var(--px)) 0 0 0 var(--gold), var(--px) 0 0 0 var(--gold); margin-bottom: var(--px); }
.lg-maphead .lg-title { font-size: var(--m); text-shadow: var(--px) var(--px) 0 #7a1d2a; }
.lg-maphead .lg-season { color: var(--cyan); font-size: var(--s); }
.lg-mapframe { position: relative; box-shadow: 0 0 0 var(--px) var(--gold), 0 0 0 calc(2 * var(--px)) var(--ink); background: #173e8c; }
.lg-map { display: block; }
.lg-mapfoot { margin-top: var(--px); box-shadow: 0 var(--px) 0 0 var(--gold), calc(-1 * var(--px)) 0 0 0 var(--gold), var(--px) 0 0 0 var(--gold); }
.lg-mapfoot .lg-loc { color: var(--white); }
.lg-mapfoot .lg-hint { color: var(--gray); font-size: var(--s); }
.btn.lg-node, .btn.lg-node.focus, .btn.lg-node:hover, .btn.lg-node:active { position: absolute; padding: 0; min-height: 0; background: transparent; box-shadow: none; transform: none; }
.lg-side { width: var(--lg-side); flex: none; display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.lg-info { background: var(--panel); box-shadow: var(--fr); padding: calc(4 * var(--px)); display: flex; flex-direction: column; gap: calc(2 * var(--px)); min-height: calc(80 * var(--px)); }
.lg-kicker { font-size: var(--s); color: var(--gray); }
.lg-leader { font-size: var(--l); line-height: 1.25; color: var(--white); text-shadow: var(--px) var(--px) 0 var(--ink); }
.lg-tname { align-self: flex-start; font-size: var(--s); padding: calc(2 * var(--px)); background: var(--tc); color: var(--tink); box-shadow: var(--fr); }
.lg-chips { display: flex; gap: calc(2 * var(--px)); flex-wrap: wrap; align-items: center; }
.lg-chip { font-size: var(--s); padding: calc(2 * var(--px)); background: #23264a; color: var(--white); box-shadow: var(--fr); }
.lg-ovr { display: flex; gap: calc(3 * var(--px)); align-items: center; font-size: var(--s); color: var(--cyan); }
.lg-stars { display: inline-flex; gap: 2px; align-items: center; }
.lg-star { width: 14px; height: 14px; display: block; }
.lg-aces { display: flex; gap: var(--px); }
.lg-ace { display: flex; flex-direction: column; align-items: center; gap: var(--px); font-size: var(--s); color: var(--gold); }
.lg-ace b { font-weight: normal; }
.lg-status { font-size: var(--s); color: var(--cyan); line-height: 1.6; }
.lg-status.won { color: var(--gold); }
.lg-status.lock { color: #ff7a6e; }
.lg-quote { font-size: var(--s); line-height: 1.8; color: var(--white); }
/* the main call to action: one rung above the small TEAM / NEW SEASON / BACK buttons at every size */
.btn.lg-go { font-size: var(--m); padding: calc(4 * var(--px)) calc(3 * var(--px)); }
.btn.lg-go.lock { background: #2a2e4a; color: var(--gray); }
.lg-e4 { display: flex; flex-direction: column; gap: var(--px); }
.lg-e4row { display: grid; grid-template-columns: calc(3 * var(--px)) 1fr auto calc(3 * var(--s)); gap: calc(2 * var(--px)); align-items: center; font-size: var(--s); color: var(--gray); padding: var(--px) calc(2 * var(--px)); background: #12173e; }
.lg-e4row.won { color: var(--gold); } .lg-e4row.cur { color: var(--white); background: #23264a; box-shadow: var(--fr-gold); }
.lg-e4row .lg-e4t { font-size: var(--s); }
.lg-dot { width: calc(3 * var(--px)); height: calc(3 * var(--px)); background: var(--tc); box-shadow: 0 0 0 var(--px) var(--ink); }
/* the badge case: a leather trainer case with 8 slots */
.lg-case { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--px); padding: calc(3 * var(--px)); background: #3a2414; box-shadow: 0 calc(-1 * var(--px)) 0 0 #1a0e06, 0 var(--px) 0 0 #1a0e06, calc(-1 * var(--px)) 0 0 0 #1a0e06, var(--px) 0 0 0 #1a0e06, inset 0 var(--px) 0 0 #5a3a20; }
.lg-slot { display: flex; align-items: center; justify-content: center; background: #24160c; box-shadow: inset 0 2px 0 0 #120a04; aspect-ratio: 1; }
.lg-badgecv { width: 32px; height: 32px; display: block; }
.lg-slot.on { background: #2e1c0e; }
.lg-rec { font-size: var(--s); color: var(--cyan); text-align: center; }
.lg-row { display: flex; gap: calc(2 * var(--px)); }
.lg-row .btn { flex: 1 1 auto; }

/* ---------- intro card (VS) ---------- */
.lg-card { width: min(calc(300 * var(--px)), 96vw); background: var(--panel); box-shadow: 0 -4px 0 0 var(--tc), 0 4px 0 0 var(--tc), -4px 0 0 0 var(--tc), 4px 0 0 0 var(--tc), 0 0 0 7px var(--ink); display: flex; flex-direction: column; animation: lg-in 0.32s steps(4); }
@keyframes lg-in { 0% { transform: translateX(60vw); } 100% { transform: translateX(0); } }
.lg-cardtop { display: flex; justify-content: space-between; padding: calc(3 * var(--px)) calc(4 * var(--px)); background: var(--tc); color: var(--tink); font-size: var(--s); }
.lg-cardmain { display: flex; gap: calc(6 * var(--px)); padding: calc(5 * var(--px)) calc(5 * var(--px)) calc(2 * var(--px)); align-items: center; }
.lg-mascot { position: relative; width: 200px; height: 200px; flex: none; display: flex; align-items: center; justify-content: center; }
.lg-disc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.lg-mascot .lg-spr { position: relative; animation: lg-bob 0.9s steps(2) infinite; }
@keyframes lg-bob { 50% { transform: translateY(-6px); } }
.lg-cardinfo { display: flex; flex-direction: column; gap: calc(3 * var(--px)); min-width: 0; flex: 1; }
.lg-title2 { font-size: var(--s); color: var(--gray); letter-spacing: var(--px); }
.lg-bigname { font-size: var(--xl); color: var(--white); text-shadow: var(--px) var(--px) 0 var(--ink), calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--tc); letter-spacing: var(--px); }
.lg-intro .lg-quote { min-height: calc(15 * var(--px)); font-size: var(--s); color: #e8ecff; background: #0a0d26; padding: calc(3 * var(--px)); box-shadow: var(--fr); }
.lg-caret { display: inline-block; width: var(--s); height: var(--s); margin-left: 2px; background: var(--gold); vertical-align: 0; }
.lg-caret.blink { animation: blink 0.8s steps(2) infinite; }
.lg-starrow { display: flex; gap: calc(2 * var(--px)); align-items: flex-end; padding: calc(2 * var(--px)) calc(5 * var(--px)) calc(3 * var(--px)); background: #0c1030; box-shadow: inset 0 var(--px) 0 0 #070a20; flex-wrap: wrap; }
.lg-starlbl { font-size: var(--s); color: var(--gold); align-self: center; width: calc(8 * var(--s)); line-height: 1.6; }
.lg-star2 { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: calc(2 * var(--px)); align-items: center; padding-right: calc(3 * var(--px)); animation: lg-pop 0.5s steps(3) both; }
.lg-star2 .lg-spr { grid-row: span 2; }
.lg-star2 b { font-weight: normal; font-size: var(--s); color: var(--cyan); align-self: end; }
.lg-star2 i { font-style: normal; font-size: var(--s); color: var(--white); align-self: start; }
.lg-star2.d1 { animation-delay: 0.12s; } .lg-star2.d2 { animation-delay: 0.24s; } .lg-star2.d3 { animation-delay: 0.36s; }
@keyframes lg-pop { 0% { transform: scale(0); } 66% { transform: scale(1.2); } 100% { transform: scale(1); } }
.lg-cardfoot { display: flex; gap: calc(4 * var(--px)); align-items: center; justify-content: space-between; padding: calc(3 * var(--px)) calc(5 * var(--px)) calc(4 * var(--px)); flex-wrap: wrap; }
.lg-matchup { display: flex; gap: calc(2 * var(--px)); align-items: center; font-size: var(--s); color: var(--gray); }
.lg-matchup b { color: var(--white); font-weight: normal; }
.lg-mt { background: var(--tc); color: var(--tink); padding: calc(2 * var(--px)); box-shadow: var(--fr); }
.lg-vs2 { color: var(--gold); font-size: var(--m); text-shadow: var(--px) var(--px) 0 #7a1d2a; padding: 0 var(--px); }
.lg-prize { display: flex; gap: calc(2 * var(--px)); align-items: center; font-size: var(--s); color: var(--gray); }
.lg-prize b { display: block; color: var(--gold); font-weight: normal; margin-top: var(--px); font-size: var(--s); }
.lg-prize small { font-size: var(--s); }
.lg-pbadge .lg-badgecv, .lg-trophy .lg-badgecv { width: 48px; height: 48px; }
.lg-btns { display: flex; gap: calc(3 * var(--px)); }
.lg-cardfoot .lg-btns { margin-left: auto; } /* stays right-aligned when the footer wraps */
.lg-intro.champ .lg-card { --tc: #ffd23e; --tink: #0b0d1a; }
.lg-intro.champ .lg-bigname { text-shadow: var(--px) var(--px) 0 var(--ink), calc(2 * var(--px)) calc(2 * var(--px)) 0 #c8960e; }
.lg-intro.bonus .lg-card { --tc: #7a4ad0; --tink: #f4f4ec; }
.lg-intro.bonus .lg-cardmain { background: repeating-linear-gradient(0deg, #0b0820 0 3px, #120c30 3px 6px); }

/* scouting: one row per rating, the two teams' bars + numbers in their own kit colors under team plates */
.lg-tape { flex: none; width: calc(80 * var(--px)); display: flex; flex-direction: column; gap: calc(2 * var(--px)); padding: calc(3 * var(--px)); background: #0a0d26; box-shadow: var(--fr); align-self: center; }
.lg-tr { display: grid; grid-template-columns: calc(5 * var(--s)) 1fr calc(3 * var(--s) + 2 * var(--px)) calc(3 * var(--s) + 2 * var(--px)); gap: calc(2 * var(--px)); align-items: center; font-size: var(--s); color: var(--gray); }
.lg-tr.lg-tapeh { color: var(--gold); margin-bottom: var(--px); }
.lg-tr.lg-tapeh .lg-tl { grid-column: span 2; }
.lg-tp { justify-self: stretch; text-align: center; padding: var(--px) 0; background: var(--tc); color: var(--tink); box-shadow: var(--fr); }
.lg-tb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-tb i { display: block; height: calc(2 * var(--px)); box-shadow: 1px 1px 0 0 var(--ink); }
.lg-tv { text-align: center; color: var(--tv, var(--white)); }

/* ---------- moments (badge earned, Elite Four, Champion) ---------- */
.lg-moment { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(0deg, rgba(5, 6, 26, 0.9) 0 3px, rgba(5, 6, 26, 0.82) 3px 6px); pointer-events: auto; cursor: pointer; }
.lg-mbox { --tc: #ffd23e; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--px)); padding: calc(6 * var(--px)) calc(9 * var(--px)); background: var(--panel); box-shadow: 0 -4px 0 0 var(--gold), 0 4px 0 0 var(--gold), -4px 0 0 0 var(--gold), 4px 0 0 0 var(--gold), 0 0 0 7px var(--ink); animation: lg-zoom 0.4s steps(4); max-width: 94vw; }
@keyframes lg-zoom { 0% { transform: scale(0.2); } 75% { transform: scale(1.08); } 100% { transform: scale(1); } }
.lg-mhead { font-size: var(--xl); color: var(--gold); text-shadow: var(--px) var(--px) 0 #7a1d2a, calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--ink); letter-spacing: var(--px); text-align: center; }
.lg-mstage { position: relative; width: 176px; height: 176px; display: flex; align-items: center; justify-content: center; }
.lg-rays { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-mbadgecv { width: 128px; height: 128px; display: block; position: relative; animation: lg-badgein 0.9s steps(6) both; }
@keyframes lg-badgein { 0% { transform: translateY(-120px) scale(0.3); } 60% { transform: translateY(8px) scale(1.15); } 100% { transform: translateY(0) scale(1); } }
.lg-mbadge .lg-spr { position: relative; }
.lg-spark { position: absolute; width: 8px; height: 8px; background: #fff6c8; box-shadow: 0 0 0 2px var(--gold); animation: lg-twinkle 1.2s steps(3) infinite; opacity: 0; }
.lg-spark.s0 { left: 8%; top: 18%; } .lg-spark.s1 { left: 84%; top: 10%; animation-delay: 0.3s; } .lg-spark.s2 { left: 90%; top: 70%; animation-delay: 0.6s; } .lg-spark.s3 { left: 6%; top: 80%; animation-delay: 0.9s; }
.lg-spark.s4 { left: 48%; top: 0; animation-delay: 0.45s; } .lg-spark.s5 { left: 50%; top: 94%; animation-delay: 0.15s; } .lg-spark.s6 { left: 0; top: 48%; animation-delay: 0.75s; } .lg-spark.s7 { left: 95%; top: 42%; animation-delay: 1.05s; }
@keyframes lg-twinkle { 0% { opacity: 0; transform: scale(0.5); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.5); } }
.lg-mline { font-size: var(--m); color: var(--white); text-shadow: var(--px) var(--px) 0 var(--ink); text-align: center; }
.lg-mquote { font-size: var(--s); color: var(--cyan); max-width: calc(64 * var(--s)); text-align: center; line-height: 1.8; }
.lg-mcase { display: grid; grid-template-columns: repeat(8, 36px); gap: 4px; padding: calc(2 * var(--px)); background: #3a2414; box-shadow: 0 0 0 var(--px) #1a0e06; }
.lg-mcase .lg-slot.new { animation: lg-flash 0.3s steps(2) 6; }
@keyframes lg-flash { 50% { background: #ffd23e; } }
.lg-mtap { font-size: var(--s); color: var(--gray); animation: blink 1s steps(2) infinite; }
.lg-moment.champ .lg-mhead { font-size: var(--xxl); }

/* ---------- Hall of Fame ---------- */
.lg-hofwrap { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--px)); }
.lg-hofbanner { font-size: var(--xxl); color: var(--gold); text-shadow: var(--px) var(--px) 0 #7a1d2a, calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--ink); letter-spacing: var(--px); animation: slam 0.35s steps(4); text-align: center; }
.lg-hofsub { font-size: var(--s); color: var(--white); text-shadow: var(--px) var(--px) 0 var(--ink); text-align: center; line-height: 1.6; }
.lg-hofstage { position: relative; box-shadow: 0 0 0 var(--px) var(--gold), 0 0 0 calc(2 * var(--px)) var(--ink); }
.lg-hofcv { display: block; }
.lg-hofcap { position: absolute; left: 0; right: 0; bottom: calc(3 * var(--px)); text-align: center; font-size: var(--m); color: var(--white); text-shadow: var(--px) var(--px) 0 var(--ink), calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--ink), var(--px) calc(-1 * var(--px)) 0 var(--ink), calc(-1 * var(--px)) var(--px) 0 var(--ink); }
.lg-hoflist { display: flex; gap: calc(2 * var(--px)) calc(8 * var(--px)); flex-wrap: wrap; justify-content: center; font-size: var(--s); color: var(--cyan); }

@media (pointer: coarse) { .lg-mapfoot .lg-hint { display: none; } }

/* ---------- big screens: pro.css doubles the ladder at ≥1600×900; the fixed-size pieces follow ---------- */
@media (min-width: 1600px) and (min-height: 900px) {
  .lg-screen { --lg-side: 600px; }
  .lg-ace .lg-spr { width: 128px; height: 128px; }
  .lg-spr.big { width: 256px; height: 256px; }
  .lg-mascot { width: 264px; height: 264px; }
  .lg-star { width: 21px; height: 21px; }
  .lg-badgecv { width: 48px; height: 48px; }
  .lg-pbadge .lg-badgecv, .lg-trophy .lg-badgecv { width: 64px; height: 64px; }
  .lg-mstage { width: 240px; height: 240px; }
  .lg-mbadgecv { width: 192px; height: 192px; }
  .lg-mcase { grid-template-columns: repeat(8, 52px); }
}

/* ---------- phones (landscape, short) ---------- */
@media (max-height: 520px) {
  .lg-screen { --lg-side: 300px; }
  .lg-mapfoot .lg-hint { display: none; }
  .lg-side { gap: calc(2 * var(--px)); }
  .lg-info { min-height: 0; padding: calc(3 * var(--px)); gap: var(--px); }
  .lg-leader { font-size: var(--m); }
  .lg-star { width: 10px; height: 10px; }
  .lg-ace .lg-spr, .lg-starrow .lg-spr { width: var(--sp); height: var(--sp); }
  .lg-badgecv { width: var(--sp-s); height: var(--sp-s); } /* 16-px badge art at whole device pixels */
  .lg-side .btn, .lg-btns .btn, .lg-hofwrap .btn { min-height: 32px; }
  .btn.lg-go { padding: calc(3 * var(--px)); }
  .lg-row .btn { padding: calc(2 * var(--px)) calc(3 * var(--px)); }
  .lg-card { width: min(780px, 98vw, 100%); } /* 100%: inside the screen's padding, which carries a notch's safe-area insets */
  /* the footer (matchup · prize · PLAY BALL! BACK) packs tighter, so it stays one row inside the safe area (the
     Champion's wrapped onto two and scrolled the screen at 852×330) */
  .lg-cardfoot { gap: calc(3 * var(--px)); padding-left: calc(4 * var(--px)); padding-right: calc(4 * var(--px)); }
  .lg-cardfoot .btn { padding-left: 8px; padding-right: 8px; }
  .lg-cardfoot .btn.big { padding-left: 12px; padding-right: 12px; }
  .lg-mascot { width: 120px; height: 120px; }
  .lg-spr.big { width: var(--sp-l); height: var(--sp-l); }
  .lg-tape { width: calc(84 * var(--px)); }
  .lg-starrow { padding: var(--px) calc(5 * var(--px)) calc(2 * var(--px)); }
  .lg-pbadge .lg-badgecv, .lg-trophy .lg-badgecv { width: 32px; height: 32px; }
  .lg-mstage { width: 104px; height: 104px; }
  .lg-mbadgecv { width: 80px; height: 80px; }
  .lg-mcase { grid-template-columns: repeat(8, 26px); }
}
/* phones with Safari's bars up (~300–350 px tall): flat badge slots (not square) so the side column fits unscrolled */
@media (max-height: 350px) {
  .lg-slot { aspect-ratio: auto; padding: var(--px) 0; }
  .lg-side { gap: var(--px); }
  .lg-info { padding: calc(2 * var(--px)); }
}