/* Layout: an opened two-panel dex in the selected club's colours. Left panel: lens, main screen,
   D-pad. Right panel: LCD entry, archetype fit, stats, and the club's dex list. Stacks on phones. */
:root {
  /* page */
  --page: #ece8e4; --page-ink: #1d1718; --page-muted: #5d5254; --page-line: #d6cfca;
  /* device (club colours are set from data; these are Arsenal's) */
  --body: #e3061a; --body-dark: #9b0313; --screen: #0b2a5b; --accent: #b8975a;
  --bezel: #e9e6e1; --bezel-dark: #c9c4bd; --lcd: #b9d39f; --lcd-ink: #1f3a19;
  --screen-ink: #f4f6fb; --screen-muted: #a9b6cc; --player: #ff5a6b; --mon: #7cc4ee; --good: #5ad17a;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --lcdf: "VT323", "IBM Plex Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #141112; --page-ink: #f1ecec; --page-muted: #a89c9e; --page-line: #2e2729; color-scheme: dark; }
}
:root[data-theme="dark"] { --page: #141112; --page-ink: #f1ecec; --page-muted: #a89c9e; --page-line: #2e2729; color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--page); color: var(--page-ink); font-family: var(--display); font-size: 15px; line-height: 1.4; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1220px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding-block: 18px 14px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 46px; height: 46px; flex: none; }
.brand b { font-stretch: 125%; font-weight: 900; font-size: 30px; letter-spacing: -.01em; line-height: 1; }
.brand { color: inherit; text-decoration: none; }
.picker { display: flex; gap: 8px; flex-wrap: wrap; }
.picker select { font: inherit; font-weight: 700; color: var(--page-ink); background: var(--page); border: 2px solid var(--page-line); border-radius: 999px; padding: 6px 30px 6px 14px; max-width: 100%; }
.crumbs { font-family: var(--data); font-size: 12px; letter-spacing: .06em; color: var(--page-muted); margin: 0 0 10px; }
.crumbs a { color: inherit; }

/* Device */
.dex { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); margin-bottom: 26px; }
.half { background: radial-gradient(120% 70% at 15% 0%, rgb(255 255 255 / .16), transparent 60%), linear-gradient(160deg, var(--body), var(--body-dark));
  color: var(--screen-ink); padding: 22px 26px 26px; min-width: 0; box-shadow: 0 10px 0 var(--body-dark), 0 18px 34px rgb(0 0 0 / .22); }
.half.l { border-radius: 22px 6px 6px 22px; }
.half.r { border-radius: 6px 22px 22px 6px; display: grid; gap: 16px; align-content: start; }
.hinge { background: linear-gradient(90deg, var(--body-dark), color-mix(in srgb, var(--body-dark) 70%, #000), var(--body-dark));
  margin-block: 30px; border-radius: 4px; box-shadow: 0 10px 0 color-mix(in srgb, var(--body-dark) 70%, #000); }
@media (max-width: 920px) {
  .dex { grid-template-columns: minmax(0, 1fr); }
  .hinge { height: 18px; margin: 0 30px; }
  .half.l, .half.r { border-radius: 22px; }
}
@media (max-width: 520px) { .half { padding: 16px 14px 18px; } }

.lensrow { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.lens { width: 78px; height: 78px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 4px 0 rgb(0 0 0 / .25); }
.lens i { width: 60px; height: 60px; border-radius: 50%; display: block; background: radial-gradient(circle at 34% 32%, #e8f7ff 0 12%, #6cc6f5 13% 40%, #1c7fc0 70%, #0d4f80 100%); }
.leds { display: flex; gap: 10px; }
.leds b { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgb(0 0 0 / .25); display: block; }
.leds b:nth-child(1) { background: #ff5b5b; } .leds b:nth-child(2) { background: #ffd23f; } .leds b:nth-child(3) { background: #5ad17a; }
.crest { margin-left: auto; width: 62px; height: 62px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 rgb(0 0 0 / .25); }
.crest img { width: 44px; height: 44px; object-fit: contain; }

.bezel { background: var(--bezel); border-radius: 18px; padding: 26px 22px 54px; position: relative; box-shadow: inset 0 -6px 0 var(--bezel-dark);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%, 0 calc(100% - 64px)); }
.bezel .dots { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; }
.bezel .dots b { width: 9px; height: 9px; border-radius: 50%; background: var(--body); display: block; }
.bezel .rbtn { position: absolute; left: 76px; bottom: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--body); }
.bezel .grill { position: absolute; right: 30px; bottom: 16px; display: grid; gap: 5px; }
.bezel .grill b { width: 70px; height: 4px; border-radius: 2px; background: var(--bezel-dark); display: block; }
.screen { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 11; max-width: 100%;
  background: radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, var(--screen) 78%, #fff), var(--screen)); }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .13) 0 2px, transparent 2px 5px); }

/* Screen: entry */
.hdr { position: absolute; left: 14px; right: 14px; top: 10px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--data); font-size: 13px; letter-spacing: .1em; z-index: 2; }
.hdr .shirt { font-weight: 700; font-size: 17px; margin-right: 8px; }
.hdr .no { color: var(--accent); font-weight: 600; }
.hdr .pos { color: var(--screen-muted); }
.pimg { position: absolute; left: 2%; bottom: 17%; width: 46%; height: 74%; object-fit: contain; object-position: bottom; }
.pimg.none { display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 64px; color: rgb(255 255 255 / .25); }
.ring { position: absolute; right: 4%; top: 13%; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); display: grid; place-items: center; }
.ring::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / .22); }
.ring img { width: 78%; height: 78%; object-fit: contain; }
.names { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: rgb(0 0 0 / .32); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; z-index: 2; }
.names b { font-stretch: 116%; font-weight: 900; font-size: clamp(17px, 2.6vw, 28px); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.names .m { color: var(--mon); text-align: right; }
.names span { font-family: var(--data); font-size: 12px; color: var(--screen-muted); flex: none; }

/* Screen: lineup */
.pitch { position: absolute; inset: 10px; border-radius: 6px; background: repeating-linear-gradient(90deg, #2f7a45 0 10%, #2b7140 10% 20%); }
.pitch::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgb(255 255 255 / .5); }
.pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgb(255 255 255 / .5); transform: translate(-50%, -50%); }
.slot { position: absolute; left: var(--lx); top: var(--ly); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px; border: 0; background: transparent; padding: 0; cursor: pointer; z-index: 1; width: 92px; }
.slot .d { width: clamp(30px, 4.2vw, 44px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 3px solid var(--body); display: grid; place-items: center; transition: transform .15s ease; }
.slot .d img { width: 84%; height: 84%; object-fit: contain; }
.slot b { background: #fff; color: #1d1718; border-radius: 4px; padding: 0 5px; font-size: clamp(10px, 1.3vw, 13px); font-weight: 800; white-space: nowrap; }
.slot:hover .d, .slot:focus-visible .d { transform: scale(1.1); }
/* Phones: the pitch stands upright (attacking up), so each line of the formation gets a full row. */
@media (max-width: 600px) {
  .screen.xi { aspect-ratio: 4 / 5; }
  .screen.xi .pitch { background: repeating-linear-gradient(0deg, #2f7a45 0 10%, #2b7140 10% 20%); }
  .screen.xi .pitch::before { left: 0; right: 0; top: 50%; bottom: auto; border-left: 0; border-top: 2px solid rgb(255 255 255 / .5); }
  .screen.xi .pitch::after { width: 26%; }
  .slot { left: var(--px); top: var(--py); width: 64px; }
  .slot b { font-size: 9.5px; padding: 0 3px; }
}

/* Controls under the screen */
.controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.dpad { position: relative; width: 112px; height: 112px; flex: none; }
.dpad::before, .dpad::after { content: ""; position: absolute; background: #1b1b1f; border-radius: 8px; }
.dpad::before { left: 37px; top: 0; width: 38px; height: 112px; } .dpad::after { left: 0; top: 37px; width: 112px; height: 38px; }
.dpad button { position: absolute; z-index: 1; width: 38px; height: 38px; border: 0; background: transparent; color: #8c8c96; cursor: pointer; font-size: 15px; }
.dpad button:hover { color: #fff; }
.dpad .up { left: 37px; top: 0; } .dpad .down { left: 37px; bottom: 0; } .dpad .left { left: 0; top: 37px; } .dpad .right { right: 0; top: 37px; }
.counter { white-space: nowrap; font-family: var(--lcdf); font-size: 26px; background: var(--lcd); color: var(--lcd-ink); padding: 4px 14px; border-radius: 8px; border: 5px solid var(--body-dark); font-variant-numeric: tabular-nums; }
.pills { display: grid; gap: 8px; justify-items: end; }
.pill { border: 0; border-radius: 999px; padding: 6px 16px; background: rgb(0 0 0 / .3); color: #fff; font-family: var(--data); font-size: 12px; letter-spacing: .1em; cursor: pointer; }
.pill[aria-pressed="true"] { background: #1b1b1f; box-shadow: inset 0 0 0 2px var(--accent); }

/* Right panel */
.lcd { background: var(--lcd); color: var(--lcd-ink); border-radius: 12px; border: 6px solid var(--body-dark); padding: 12px 16px; font-family: var(--lcdf); position: relative; }
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(0 0 0 / .05) 0 2px, transparent 2px 4px); }
.lcd .t1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 32px; line-height: 1; }
.lcd .t1 span { font-size: 22px; }
.types { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.type { font-family: var(--data); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 1px 9px; border-radius: 4px; background: hsl(var(--h) 55% 32%); color: #fff; }
.lcd .say { font-size: 24px; line-height: 1.1; margin: 8px 0 0; }
.lcd .size { display: flex; gap: 2px 18px; flex-wrap: wrap; font-size: 20px; margin-top: 6px; opacity: .85; }

.fit { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.tag { border: 2px solid var(--c); color: var(--c); border-radius: 999px; padding: 4px 12px; font-family: var(--data); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; background: rgb(0 0 0 / .18); }
.tag.p { --c: #ffd9de; border-color: var(--player); } .tag.m { --c: #dff1fc; border-color: var(--mon); }
.fitmark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; background: rgb(0 0 0 / .3); color: var(--screen-muted); }
.fitmark.match { background: var(--good); color: #0c2414; }
.fitmark.near { background: var(--accent); color: #1d1718; }

.panel { background: var(--screen); border-radius: 12px; border: 6px solid var(--body-dark); padding: 12px 16px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--data); font-size: 12px; letter-spacing: .1em; color: var(--screen-muted); margin-bottom: 8px; }
.panel-head .keys { display: flex; gap: 6px; }
.key { border: 0; border-radius: 6px; padding: 3px 10px; background: rgb(255 255 255 / .1); color: var(--screen-ink); font-family: var(--data); font-size: 12px; cursor: pointer; }
.key[aria-pressed="true"] { background: var(--accent); color: #1d1718; }
.rows { display: grid; gap: 5px; }
.brow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 70px minmax(0, 1fr) 34px; align-items: center; gap: 6px; font-family: var(--data); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.brow .v1 { color: var(--player); } .brow .v2 { color: var(--mon); text-align: right; }
.brow .s { text-align: center; font-size: 12px; color: var(--screen-muted); }
.brow .l, .brow .r { position: relative; height: 12px; }
.brow i { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.brow .l i { right: 0; background: var(--player); } .brow .r i { left: 0; background: var(--mon); }
.legend { display: flex; justify-content: space-between; font-family: var(--data); font-size: 11px; margin-top: 8px; color: var(--screen-muted); }
.legend { gap: 10px; }
.legend b { color: var(--player); font-weight: 600; } .legend em { color: var(--mon); font-style: normal; font-weight: 600; }
.radar { display: grid; place-items: center; }
.radar svg { width: min(260px, 100%); height: auto; }

.list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; max-height: 300px; overflow-y: auto; }
.list button { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; border: 0; background: transparent; padding: 4px 6px; border-radius: 6px; text-align: left; cursor: pointer; color: var(--screen-ink); }
.list button:hover { background: rgb(255 255 255 / .08); }
.list button[aria-current="true"] { background: rgb(255 255 255 / .14); box-shadow: inset 3px 0 0 var(--accent); }
.list img { width: 38px; height: 38px; object-fit: contain; }
.list .no { display: block; font-family: var(--data); font-size: 11px; color: var(--accent); }
.list .nm { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .xi-mark { color: var(--good); font-size: 11px; margin-left: 4px; }
@media (max-width: 920px) {
  .list { display: flex; overflow-x: auto; max-height: none; padding-bottom: 6px; }
  .list li { flex: 0 0 132px; }
}

.sheet { display: grid; gap: 4px; }
.sheet button { display: grid; grid-template-columns: 34px 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 0; background: transparent; padding: 3px 6px; border-radius: 6px; text-align: left; cursor: pointer; color: var(--screen-ink); }
.sheet button:hover { background: rgb(255 255 255 / .08); }
.sheet .sl { font-family: var(--data); font-size: 11px; color: var(--screen-muted); }
.sheet img { width: 30px; height: 30px; object-fit: contain; }
.sheet .nm { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .nm small { display: block; font-family: var(--data); font-size: 11px; font-weight: 500; color: var(--screen-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .f { font-weight: 900; color: var(--screen-muted); } .sheet .f.match { color: var(--good); } .sheet .f.near { color: var(--accent); }

footer { color: var(--page-muted); font-size: 13px; padding-block: 0 32px; }
footer p { margin: 0 0 6px; max-width: 88ch; }
@media (prefers-reduced-motion: reduce) { .brow i, .slot .d { transition: none; } }

/* Links that live inside the device */
.dex a { color: inherit; text-decoration: none; }
.dpad a { position: absolute; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; color: #8c8c96; font-size: 15px; }
.dpad a:hover { color: #fff; }
.dpad .up { left: 37px; top: 0; } .dpad .down { left: 37px; bottom: 0; } .dpad .left { left: 0; top: 37px; } .dpad .right { right: 0; top: 37px; }
.list a { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; }
.list a:hover { background: rgb(255 255 255 / .08); }
.list a[aria-current="page"] { background: rgb(255 255 255 / .14); box-shadow: inset 3px 0 0 var(--accent); }
.sheet a { display: grid; grid-template-columns: 34px 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 6px; border-radius: 6px; }
.sheet a:hover { background: rgb(255 255 255 / .08); }
.pill { text-decoration: none; display: inline-block; }

/* Club page: the screen is an upright pitch, attacking up; each formation line gets a row. */
.screen.xi { aspect-ratio: 4 / 5; }
.screen.xi .pitch { background: repeating-linear-gradient(0deg, #2f7a45 0 10%, #2b7140 10% 20%); }
.screen.xi .pitch::before { left: 0; right: 0; top: 50%; bottom: auto; border-left: 0; border-top: 2px solid rgb(255 255 255 / .5); }
.screen.xi .pitch::after { width: 26%; }
.screen.xi .slot { left: var(--x); top: var(--y); width: 96px; }
@media (max-width: 600px) { .screen.xi .slot { width: 66px; } .screen.xi .slot b { font-size: 9.5px; padding: 0 3px; } }

/* League and home grids */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 28px; }
.card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: #fff;
  background: linear-gradient(160deg, var(--body), var(--body-dark)); box-shadow: 0 5px 0 var(--body-dark); font-weight: 800; }
.card img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; flex: none; }
.card span { min-width: 0; overflow-wrap: anywhere; }
h1.page { font-stretch: 118%; font-weight: 900; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; margin: 6px 0 18px; text-wrap: balance; }
.sitemap { columns: 3 220px; font-size: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
.sitemap a { color: var(--page-muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lcd-h { font: inherit; margin: 0; }
h1.names { margin: 0; font-size: inherit; }

/* Home: the dex is the menu. League list, then that league's clubs; the shell takes the colours of
   whichever club the cursor is on. */
.home .half { transition: background .25s ease; }
.screen.menu { aspect-ratio: auto; height: clamp(300px, 52vh, 460px); display: flex; flex-direction: column; font-family: var(--lcdf); }
.menu-head { display: flex; justify-content: space-between; padding: 12px 16px 8px; font-size: 24px; color: var(--accent); border-bottom: 2px solid rgb(255 255 255 / .12); }
.menu-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.menu-list a { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 16px; font-size: 28px; line-height: 1.1; color: var(--screen-ink); }
.menu-list a > img { width: 24px; height: 24px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.menu-list .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-list .ct { color: var(--screen-muted); font-size: 22px; }
.menu-list .cur { color: var(--accent); visibility: hidden; }
.menu-list a[aria-selected="true"] { background: rgb(255 255 255 / .1); }
.menu-list a[aria-selected="true"] .cur { visibility: visible; }
.menu-list a:not(:has(img)) { grid-template-columns: 22px minmax(0, 1fr) auto; }
.ab { display: flex; gap: 14px; align-items: center; transform: rotate(-18deg); }
.abtn { width: 54px; height: 54px; border-radius: 50%; border: 0; background: #1b1b1f; color: #8c8c96; font-family: var(--data); font-weight: 600; font-size: 16px;
  box-shadow: inset 0 -5px 0 rgb(0 0 0 / .4); cursor: pointer; }
.abtn.a { margin-top: -22px; }
.abtn:active, .dpad button:active { filter: brightness(1.6); }
.home .dpad button { position: absolute; z-index: 1; width: 38px; height: 38px; border: 0; background: transparent; color: #8c8c96; cursor: pointer; font-size: 15px; }
.preview .crests { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 10px; }
.preview .crests a { display: grid; place-items: center; aspect-ratio: 1; background: #fff; border-radius: 50%; padding: 6px; }
.preview .crests img { width: 100%; height: 100%; object-fit: contain; }
.home .lcd .say { font-size: 20px; opacity: .8; }
.crest.light, .preview .crests a.light, img.light { background: #1b1b1f !important; }

/* Pokémon pages */
.ring.solo { left: 50%; right: auto; top: 14%; width: 62%; transform: translateX(-50%); }
.lcd .t1 a { color: inherit; text-decoration: underline dotted; text-underline-offset: 4px; }
.holders a { grid-template-columns: 30px minmax(0, 1fr) auto; }
.holders a > img { width: 30px; height: 30px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.mrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-family: var(--data); font-size: 14px; font-weight: 600; }
.mrow .s { color: var(--screen-muted); font-size: 12px; }
.mrow .r { position: relative; height: 12px; }
.mrow i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--mon); }
.mrow .v2 { color: var(--mon); text-align: right; font-variant-numeric: tabular-nums; }
.menu-list.numbered a { grid-template-columns: 3.6em minmax(0, 1fr) auto; }
.menu-list .dexno { color: var(--accent); font-size: 22px; }
.spritegrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; max-height: 70vh; overflow-y: auto; }
.spritegrid a { display: grid; justify-items: center; gap: 2px; padding: 4px; border-radius: 8px; color: var(--screen-muted); font-family: var(--data); font-size: 10px; }
.spritegrid a:hover { background: rgb(255 255 255 / .08); color: #fff; }
.spritegrid img { width: 44px; height: 44px; object-fit: contain; }

/* Animated sprites are small (60-120px), so all of them scale up as crisp pixels; the 3D ones then
   match the pixel ones' retro look instead of blurring. */
.ring img.anim { width: 72%; height: 72%; object-fit: contain; image-rendering: pixelated; }
.ring img.anim.pixel { width: 78%; height: 78%; }

/* Match score: overall pairing quality; 92%+ green, 86%+ gold (see fit.njk). */
.score { font-family: var(--data); font-weight: 600; font-size: 14px; color: var(--screen-muted); font-variant-numeric: tabular-nums; }
.score.hi { color: var(--good); } .score.mid { color: var(--accent); }
.fitmid { display: grid; place-items: center; min-width: 64px; line-height: 1; padding: 6px 8px; border-radius: 12px; background: rgb(0 0 0 / .35); }
.fitmid .score { font-size: 22px; color: #fff; }
.fitmid .score.hi { color: var(--good); } .fitmid .score.mid { color: var(--accent); }
.fitmid small { font-family: var(--data); font-size: 9px; letter-spacing: .14em; color: rgb(255 255 255 / .75); margin-top: 3px; }
.sheet a, .holders a { grid-template-columns: 34px 30px minmax(0, 1fr) auto; }
.holders a { grid-template-columns: 30px minmax(0, 1fr) auto; }

/* Search: header box on every page, and the screen box on /players/. Results come from /search.json. */
.top { position: relative; }
.search { position: relative; flex: 1 1 260px; max-width: 420px; margin-left: auto; }
.search input { width: 100%; font: inherit; font-weight: 600; color: var(--page-ink); background: var(--page); border: 2px solid var(--page-line);
  border-radius: 999px; padding: 8px 16px; }
.search input:focus { outline: none; border-color: var(--body); }
.search-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px;
  background: var(--screen); border: 5px solid var(--body-dark); border-radius: 14px; box-shadow: 0 12px 28px rgb(0 0 0 / .3); }
.search-results a, .results a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px;
  border-radius: 8px; color: var(--screen-ink); text-decoration: none; }
.search-results a[aria-selected="true"], .search-results a:hover { background: rgb(255 255 255 / .12); }
.search-results img { width: 30px; height: 30px; object-fit: contain; }
.search-results b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results small { display: block; font-family: var(--data); font-size: 11.5px; color: var(--screen-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results .k { font-family: var(--data); font-size: 10px; letter-spacing: .1em; color: var(--accent); }
.search-results .none { padding: 10px; font-family: var(--data); font-size: 13px; color: var(--screen-muted); }
.screen-search { margin: 10px 16px 4px; font-family: var(--lcdf); font-size: 26px; color: var(--screen-ink); background: rgb(255 255 255 / .08);
  border: 2px solid rgb(255 255 255 / .2); border-radius: 8px; padding: 4px 12px; }
.screen-search:focus { outline: none; border-color: var(--accent); }
.results a { grid-template-columns: 24px minmax(0, 1fr) auto; font-size: 26px; }
.results a > img { width: 24px; height: 24px; object-fit: contain; }
.results a[aria-selected="true"], .results a:hover { background: rgb(255 255 255 / .1); }
@media (max-width: 600px) { .search { order: 3; flex-basis: 100%; max-width: none; } }

/* National teams: the Game Boy world map in its COLOR palette, with its LCD boxes, inside the bezel. */
.gbscreen { --gb-lcd: #8ccdf8; --gb-box: #f8f8f8; --gb-ink: #182850; background: var(--gb-lcd); padding: 8px; display: grid; gap: 8px; border-radius: 6px;
  font-family: "Press Start 2P", var(--lcdf), monospace; color: var(--gb-ink); }
.gbscreen canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; touch-action: manipulation; }
.gbbox { background: var(--gb-box); border: 3px solid var(--gb-ink); box-shadow: inset 0 0 0 3px var(--gb-box), inset 0 0 0 6px var(--gb-ink); padding: 12px 14px; }
.gbbox.namebox { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: clamp(11px, 1.5vw, 16px); }
.gbbox.namebox h1 { font-family: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbbox.namebox span { font-size: .65em; opacity: .75; white-space: nowrap; }
.gbbox.textbox { min-height: 4.6em; font-size: clamp(8px, 1.1vw, 11px); line-height: 2; }
.gbbox.textbox a { color: var(--gb-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; margin-right: 10px; }
.holders .sl { font-family: var(--data); font-size: 11px; color: var(--screen-muted); }
.homemap { background: #8ccdf8; border-radius: 12px; border: 6px solid var(--body-dark); padding: 8px; line-height: 0; }
.homemap canvas { width: 100%; height: auto; image-rendering: pixelated; }