/* Elemondex, soft warm pastel. Loaded after tokens.css + site.css, before dex-show.css.
   A warm full-bleed wash, airy soft panels with barely-there edges (frosted tint, light inner highlight,
   hairline rims), soft tinted element tiles in the real table layout (cards on phones), quiet pill
   filters, and the detail view as a type-tinted sheet with a floating dark pill to browse. */
:root {
  --dx-hair: rgba(38, 29, 61, 0.08);
  --dx-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.4));
  --dx-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(70, 48, 20, 0.04), 0 24px 48px -36px rgba(70, 48, 20, 0.32);
  --dx-r: 28px;
  --dx-dark: #241b33;
}
body {
  background:
    radial-gradient(70% 46% at 8% 0%, rgba(255, 222, 160, 0.5), rgba(255, 222, 160, 0) 70%),
    radial-gradient(56% 40% at 96% 6%, rgba(220, 206, 255, 0.55), rgba(220, 206, 255, 0) 72%),
    linear-gradient(180deg, #fbf3e4 0, #fcf7ef 1100px, #f9f5fb 2600px);
}
body.locked { overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.sym { font-family: var(--e-font); font-weight: 900; letter-spacing: -0.04em; }

/* header: the big heading, the live count quiet and right-aligned like a number */
.head { position: relative; max-width: 1400px; margin: 0 auto; padding: clamp(44px, 7vw, 96px) var(--e-gutter) 18px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 clamp(22px, 3vw, 34px); }
.head h1 { margin: 0; max-width: 11em; font-size: clamp(44px, 6.2vw, 88px); line-height: 0.98; font-weight: 900; letter-spacing: -0.04em; color: var(--e-ink); animation: rise-t 0.9s var(--e-out) both; }
@keyframes rise-t { from { transform: translateY(16px); } to { transform: none; } }
.head h1 em { font-style: normal; background: linear-gradient(92deg, #e2873c, #d9669e 55%, var(--e-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.count { flex: none; margin: 0 0 0.35em; display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 700; color: var(--e-ink-3); font-variant-numeric: tabular-nums; }
.count b { font-size: clamp(30px, 3.4vw, 44px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--e-ink-2); }
.dex-crew { position: absolute; right: var(--e-gutter); top: 0; width: clamp(190px, 20vw, 290px); height: clamp(104px, 11vw, 160px); }
.dex-crew .critter { bottom: 0; pointer-events: auto; cursor: pointer; }
.dc-h { width: 30%; left: 0; } .dc-he { width: 33%; left: 33%; bottom: 26% !important; } .dc-li { width: 32%; right: 0; }
.is-live .dc-he .bob { animation: float 4.6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }

/* the intro: one soft panel, quiet body copy, the nine types as thumbnail rows split by hairlines */
.intro { margin: 0; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px); border-radius: var(--dx-r); background: var(--dx-fill); box-shadow: var(--dx-edge); color: var(--e-ink-2); font-size: 16px; font-weight: 600; line-height: 1.6; }
.intro p { margin: 0; max-width: 62rem; }
.intro a, .guides-list a { color: var(--e-ink); font-weight: 800; text-decoration-color: rgba(38, 29, 61, 0.3); text-underline-offset: 3px; }
.types-list { list-style: none; margin: 18px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 36px); border-top: 1px solid var(--dx-hair); }
.types-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--dx-hair); }
.types-list img { width: 44px; height: 44px; filter: drop-shadow(0 3px 5px rgba(60, 40, 20, 0.14)); }
.types-list strong { font-size: 16px; font-weight: 900; color: var(--e-ink); }
.types-list small { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--e-ink-3); }
.types-list .ty-d { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--e-ink-3); }

/* search, view switch, filters: frosted pills with hairline rims; the chosen one is a dark pill */
.tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3vw, 36px); }
.search { position: relative; flex: 1 1 320px; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: var(--e-r-pill); background: var(--dx-fill); box-shadow: var(--dx-edge), inset 0 0 0 1px var(--dx-hair); transition: box-shadow var(--e-t-fast); }
.search:focus-within { box-shadow: var(--dx-edge), inset 0 0 0 1.5px var(--e-ink-3), var(--e-focus); }
.search svg { width: 19px; height: 19px; fill: none; stroke: var(--e-ink-3); stroke-width: 2.2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--e-ink); font: 700 16px var(--e-font); }
.search input::placeholder { color: var(--e-ink-3); font-weight: 600; }
.search kbd { padding: 3px 9px; border-radius: 8px; font: 800 12px var(--e-font); color: var(--e-ink-3); background: rgba(38, 29, 61, 0.05); }
.views { display: inline-flex; padding: 4px; border-radius: var(--e-r-pill); background: var(--dx-fill); box-shadow: var(--dx-edge), inset 0 0 0 1px var(--dx-hair); }
.view { min-height: 46px; padding: 0 20px; border-radius: var(--e-r-pill); font-weight: 800; color: var(--e-ink-2); transition: background var(--e-t), color var(--e-t); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--e-r-pill); font-weight: 700; font-size: 14px; color: var(--e-ink-2); background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 0 0 1px var(--dx-hair); transition: transform var(--e-t-fast) var(--e-spring), background var(--e-t), box-shadow var(--e-t), color var(--e-t); white-space: nowrap; }
.chip:hover { color: var(--e-ink); background: rgba(255, 255, 255, 0.8); }
.chip:active { transform: scale(0.95); }
.chip.is-on { color: #fff; background: color-mix(in srgb, var(--t-ink, var(--dx-dark)) 82%, var(--dx-dark)); box-shadow: 0 8px 18px -12px rgba(36, 27, 51, 0.7); }
.chip-sep { width: 1px; height: 22px; margin: 0 6px; background: var(--dx-hair); }

/* periodic table: a soft panel of soft tinted tiles with hairline rims and the type glyph */
.browse { max-width: 1400px; margin: 0 auto; padding: 22px var(--e-gutter) clamp(72px, 9vw, 120px); }
.ptable-wrap { position: relative; padding: clamp(14px, 1.6vw, 26px); border-radius: var(--dx-r); background: var(--dx-fill); box-shadow: var(--dx-edge); }
/* the table's tiles are 3D key blocks (same build as the home teaser in home.css, keep in sync). The tiles sit
   edge to edge as one block field. The button is the static grid cell; its inner .k is the key's top face and
   the button's ::before is the front wall, a static block from under the face down to the floor (the cell's
   bottom edge). Rows stack front over back (z-index = grid row), so a wall shows exactly where its key
   stands taller than the key in front of it.
   The rolling wave moves only the face: .k rides `translateY(-4%..-30%)` (literal keyframes, one
   animation-delay per key, inline, set once by dex.js from row/col) and uncovers more of the wall below it.
   One composited animation per key, on a plain inner span with no base transform: Chrome still restyles
   every running animation on each main frame, and that is ~8x dearer on the button itself or with a base
   `transform` declared. Hover/press/pop/jiggle move the whole button with `translate`/`rotate`/`scale`
   and stretch the wall (`scale`, origin top) by the same amount so it stays on the floor. Paused off screen
   (.k-off); a still relief under reduced motion. */
.ptable { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); grid-template-rows: repeat(7, auto) 14px repeat(2, auto);
  --kr: clamp(2.5px, 0.26vw, 4px); gap: 0; padding-top: 2.1%; /* headroom for the tallest key + hover: 37% of a tile */ }
.el {
  --k-top: color-mix(in oklab, color-mix(in oklab, var(--t-tint) 86%, var(--t)) 76%, #f3f0eb);
  --k-wall: color-mix(in oklab, color-mix(in oklab, var(--k-top) 50%, var(--t)) 80%, #45385a);
  position: relative; display: block; padding: 0; aspect-ratio: 1 / 1.04; min-width: 0; border-radius: var(--kr); outline: none; -webkit-tap-highlight-color: transparent;
  transition: translate 0.24s var(--e-spring), opacity var(--e-t), filter var(--e-t);
  animation: key-in 0.5s var(--e-spring) calc(var(--wave) * 14ms) backwards;
}
.el .k { position: absolute; inset: 0; border-radius: inherit; animation: key-roll 3.2s ease-in-out infinite alternate; /* + inline animation-delay */
  background: linear-gradient(180deg, color-mix(in oklab, var(--k-top) 78%, #fff), var(--k-top) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 color-mix(in oklab, var(--k-wall) 45%, transparent), inset 0 0 0 0.5px color-mix(in oklab, var(--k-wall) 70%, transparent); }
.el::before {
  content: ""; position: absolute; left: 0; right: 0; top: 56%; bottom: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--k-wall) 88%, #fff) 30%, var(--k-wall) 55%, color-mix(in oklab, var(--k-wall) 78%, #2e2240));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22), inset -1px 0 0 rgba(40, 25, 55, 0.14);
  transform-origin: 50% 0; transition: scale 0.24s var(--e-spring);
}
.el .k > span { position: absolute; line-height: 1; }
.el .s { top: 12%; left: 11%; font-size: clamp(12px, 1.2vw, 21px); color: var(--t-ink); }
.el .n { top: 12%; right: 10%; font-size: clamp(7px, 0.56vw, 10px); font-weight: 800; color: color-mix(in oklab, var(--t-ink) 72%, var(--e-ink-2)); font-variant-numeric: tabular-nums; }
.el .nm { left: 11%; right: 7%; bottom: 16%; font-size: clamp(6px, 0.53vw, 9.5px); font-weight: 800; line-height: 1.15; color: color-mix(in oklab, var(--t-ink) 62%, var(--e-ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
/* the type glyph, under the number (masked with the type's line icon) */
.el .bar { top: calc(12% + clamp(7px, 0.56vw, 10px) + 3px); right: 10%; width: clamp(7px, 0.6vw, 11px); height: clamp(7px, 0.6vw, 11px); background: var(--t-ink); opacity: 0.6; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
/* lift = +30% of the wave's height range (7% of the key); the wall grows by the same amount */
@media (hover: hover) {
  .el:hover { translate: 0 -7%; }
  .el:hover::before { scale: 1 1.16; }
}
.el:focus-visible { translate: 0 -7%; }
.el:focus-visible::before { scale: 1 1.16; }
.el:focus-visible .k { box-shadow: inset 0 0 0 2px var(--t-ink), 0 0 0 2px #fff; }
.el:active { transition-duration: 0.07s; translate: 0 4%; }
.el:active::before { transition-duration: 0.07s; scale: 1 0.91; }
.el.k-open { z-index: 20 !important; animation: key-open 0.3s var(--e-out) forwards; }
.el.k-open::before { animation: key-open-wall 0.3s var(--e-out) forwards; }
.el.k-jig { animation: key-jig 0.52s ease-in-out var(--jd, 0ms); }
.el.k-jig::before { animation: key-jig-wall 0.52s ease-in-out var(--jd, 0ms); }
.browse.k-off .k { animation-play-state: paused; }
@keyframes key-in { from { opacity: 0; scale: 0.7; } }
/* literal keyframes only (no var()): the compositor runs them */
@keyframes key-roll { from { transform: translateY(-4%); } to { transform: translateY(-30%); } }
/* the wall (44% of the cell) stretches by exactly the button's lift: scale = 1 + lift / 44% */
@keyframes key-open-wall { 0% { scale: 1 0.91; } 40% { scale: 1 1.36; } 100% { scale: 1 1.45; } }
@keyframes key-open { 0% { translate: 0 4%; } 40% { translate: 0 -16%; scale: 1.08; opacity: 1; } 100% { translate: 0 -20%; scale: 1.7; opacity: 0; } }
@keyframes key-jig { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -9%; rotate: -1.5deg; } 60% { translate: 0 3%; rotate: 1deg; } 82% { translate: 0 -1.5%; rotate: 0deg; } }
@keyframes key-jig-wall { 0%, 100% { scale: 1 1; } 30% { scale: 1 1.2; } 60% { scale: 1 0.93; } 82% { scale: 1 1.03; } }
/* filtered: the matches take a fuller tint and a type rim, the rest sink flat and grey */
.ptable.is-narrowed .el:not(.dim) { --k-top: color-mix(in oklab, var(--t-tint) 62%, var(--t)); }
.ptable.is-narrowed .el:not(.dim) .k { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1.5px color-mix(in oklab, var(--t-ink) 55%, transparent); }
.ptable .el.dim { filter: grayscale(1); opacity: 0.3; pointer-events: none; }
.ptable .el.dim .k { animation: none; transform: translateY(-2%); }
.gap { position: relative; z-index: 0; display: grid; place-items: center; margin: 2px; border-radius: var(--kr); background: rgba(38, 29, 61, 0.035); box-shadow: inset 0 2px 4px rgba(38, 29, 61, 0.08), inset 0 0 0 1px var(--dx-hair); font-size: clamp(7px, 0.66vw, 11px); font-weight: 700; color: var(--e-ink-3); }
.legend { grid-column: 3 / 13; grid-row: 1 / 4; align-self: center; margin: 0 clamp(8px, 2vw, 40px); display: flex; flex-direction: column; gap: 8px; }
.legend h2 { margin: 0; font-size: clamp(19px, 2vw, 30px); line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; }
.legend p { margin: 0; font-size: clamp(12px, 0.95vw, 14.5px); font-weight: 600; color: var(--e-ink-3); }
.legend p a { color: var(--e-ink-2); font-weight: 800; }
.legend .keys { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.legend .keys span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: var(--e-r-pill); background: color-mix(in srgb, var(--t-tint) 70%, rgba(255, 255, 255, 0.4)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 22%, transparent); color: var(--t-ink); font-size: clamp(11px, 0.85vw, 13px); font-weight: 800; }

/* cards view: full-art cards (the card face and foil frame are shared with the detail card: .fcard/.fac
   in dex-show.css). 5:7 boxes, so nothing shifts while the paintings and cut-outs load. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.card {
  position: relative; width: 100%; aspect-ratio: 5 / 7; text-align: left;
  animation: pop 0.55s var(--e-spring) backwards; animation-delay: calc(var(--i) * 12ms); --holo-persp: 700px;
  transition: translate var(--e-t) var(--e-spring), box-shadow var(--e-t);
}
.card:hover, .card:focus-visible { translate: 0 -6px; box-shadow: 0 22px 40px -18px var(--t), 0 0 0 3px var(--t); }
.card:focus-visible { outline: none; }
.card:hover .fac-art { transform: translateY(-2.5%) scale(1.04); }
.empty { padding: 60px 20px; text-align: center; font-weight: 700; color: var(--e-ink-3); }

/* detail view: a sheet washed in the element's type, a quiet top bar, a floating dark pill to browse */
.show {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; overflow-x: hidden; animation: fade 0.3s var(--e-out);
  background:
    radial-gradient(80% 55% at 22% 0%, color-mix(in srgb, var(--t-tint, #fff) 92%, #fff), rgba(255, 255, 255, 0) 72%),
    radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--t-tint, #fff) 70%, rgba(255, 255, 255, 0)), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #fcf7ee, color-mix(in srgb, var(--t-tint, #f4f0ff) 45%, #fbf4e6));
}
.show[hidden] { display: none; }
.show-bg { display: none; }
.show-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 12px var(--e-gutter); background: rgba(252, 247, 238, 0.6); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.show-top .spacer { flex: 1; }
.round-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); color: var(--e-ink); box-shadow: inset 0 0 0 1px var(--dx-hair), inset 0 1px 0 rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform var(--e-t) var(--e-spring), background var(--e-t); }
.round-btn:hover { transform: scale(1.06); background: rgba(255, 255, 255, 0.9); }
.round-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--e-ink-2), 0 0 0 4px rgba(36, 27, 51, 0.14); }
.round-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.show-dock { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--e-r-pill); background: var(--dx-dark); color: #fff; box-shadow: 0 18px 36px -14px rgba(20, 12, 34, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); transform: translateX(-50%); animation: dockIn 0.5s var(--e-spring) 0.15s both; }
@keyframes dockIn { from { opacity: 0; transform: translate(-50%, 30px); } }
.dock-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; transition: background var(--e-t-fast); }
.dock-btn:hover { background: rgba(255, 255, 255, 0.12); }
.dock-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.dock-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.show-pos { min-width: 76px; text-align: center; font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; }
.show .show-body { padding-bottom: 120px; }
/* a toast (save to your Elemondex) sits above the dock, never on it */
body:has(.show:not([hidden])) .eui-toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 961px) { .show .stage { top: 90px; } }

/* element guide links */
.guides-list { max-width: 1400px; margin: 0 auto; padding: 8px var(--e-gutter) clamp(72px, 8vw, 120px); }
.guides-list h2 { margin: 0 0 6px; font-size: clamp(28px, 3.2vw, 40px); font-weight: 900; letter-spacing: -0.02em; }
.guides-list p { margin: 0; color: var(--e-ink-3); font-weight: 600; }
.guides-list ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.guides-list li a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 6px; border-radius: var(--e-r-pill); text-decoration: none; font-weight: 700; color: var(--e-ink); background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px var(--dx-hair), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: transform var(--e-t-fast) var(--e-spring), background var(--e-t), box-shadow var(--e-t); }
.guides-list li a span { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--e-r-pill); background: color-mix(in srgb, var(--t-tint) 80%, #fff); color: var(--t-ink); font-size: 12.5px; font-weight: 800; }
.guides-list li a:hover { transform: translateY(-2px); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 50%, transparent), 0 10px 20px -14px rgba(60, 40, 20, 0.4); }

/* save to your Elemondex (Elemon UI kit) */
.dex-save svg path { fill: transparent; transition: fill 0.3s; }
.dex-save.is-on { color: #b07800; box-shadow: inset 0 0 0 2px var(--e-gold); }
.dex-save.is-on svg path { fill: var(--e-gold); }
.dex-tally { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 6px; border-radius: var(--e-r-pill); background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px var(--dx-hair); font-weight: 800; font-size: 13px; }
.dex-tally .mini { width: 16px; height: 24px; }
.dex-tally .mini svg { width: 100%; height: 100%; overflow: visible; }
.dex-tally b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: linear-gradient(180deg, #ffd56b, #f2b52c); color: #4a3300; line-height: 20px; text-align: center; }

@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.6) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }

/* two views, chosen per screen at load (inline head script sets html[data-view]); without JS the
   media queries alone decide and the toggle is hidden */
.swipe-hint { display: none; }
@media (max-width: 767px) { .browse .ptable-wrap { display: none; } }
@media (min-width: 768px) { .browse .grid { display: none; } }
html[data-view="table"] .browse .ptable-wrap { display: block; }
html[data-view="table"] .browse .grid { display: none; }
html[data-view="cards"] .browse .ptable-wrap { display: none; }
html[data-view="cards"] .browse .grid { display: grid; }
html:not([data-view]) .views { display: none; }
html[data-view="table"] .view[data-view="table"], html[data-view="cards"] .view[data-view="cards"] { background: var(--dx-dark); color: #fff; box-shadow: 0 8px 16px -10px rgba(36, 27, 51, 0.8); }

@media (max-width: 1100px) { .types-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .legend { display: none; } .dex-crew { opacity: 0.95; } }
@media (max-width: 767px) {
  html[data-view="table"] .browse .swipe-hint { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--e-ink-3); }
  .browse .ptable-wrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--e-gutter) * -1); padding: 14px var(--e-gutter); border-radius: 0; scrollbar-width: thin; }
  .browse .ptable { width: 940px; --kr: 3px; padding-top: 20px; }
  .browse .el .s { font-size: 16px; }
  .browse .el .n { font-size: 8.5px; right: 7%; }
  .browse .el .nm { font-size: 7.5px; }
  .browse .el .bar { width: 8px; height: 8px; top: calc(12% + 11.5px); }
}
@media (max-width: 720px) {
  .head { padding-top: 132px; }
  .dex-crew { left: var(--e-gutter); right: auto; top: 14px; width: 200px; height: 112px; }
  .head-row { gap: 12px; }
  .count { margin-bottom: 0.2em; }
  .count b { font-size: 28px; }
  .types-list { grid-template-columns: 1fr; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 12px calc(var(--e-gutter) * -1) 0; padding: 4px var(--e-gutter) 10px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .chip { min-height: 44px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .views .view { padding: 0 14px; }
  .search { height: 52px; }
  .search kbd { display: none; }
  .intro { font-size: 15.5px; padding: 18px; border-radius: 24px; }
  .show-top { padding: 10px var(--e-gutter); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  /* no wave, pop or jiggle: the keys hold a still relief (the wave frame at each key's delay) */
  .ptable .el:not(.dim) .k { animation-duration: 3.2s !important; animation-iteration-count: infinite !important; animation-play-state: paused !important; }
  .ptable .el, .ptable .el::before { animation: none !important; transition: none !important; }
}
/* nine battle types: line icons in chips and the table legend */
.chip .ti { width: 18px; height: 18px; color: var(--t-ink, currentColor); }
.chip.is-on .ti { color: #fff; }
.legend .keys .ti { width: 1.15em; height: 1.15em; color: var(--t-ink); }
/* the type glyphs on the table tiles: the same line icons as js/types.js, as masks (tools: dex2 glyphs.cjs) */
.ptable [data-type="Blast"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.8' cy='15.2' r='5' fill='%23000' fill-opacity='.28' stroke='none'/%3E%3Ccircle cx='8.8' cy='15.2' r='5'/%3E%3Cpath d='M13.8 10.2 18.2 5.8M15.4 14.6h5.4M9.6 8.4V3.4'/%3E%3Ccircle cx='20.4' cy='3.6' r='1.35' fill='%23000' stroke='none'/%3E%3Ccircle cx='4.2' cy='5.6' r='1.35' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ptable [data-type="Life"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='4.8' cy='18.6' r='2.4'/%3E%3Ccircle cx='19.2' cy='18.6' r='2.4'/%3E%3Cpath d='M7.2 18.6h9.6'/%3E%3Cpath d='M12 18.6v-6.4'/%3E%3Cpath d='M12 12.4c0-4.6 2.8-7.6 8-7.9 0 4.7-3.1 7.9-8 7.9z' fill='%23000' fill-opacity='.28' stroke='none'/%3E%3Cpath d='M12 12.4c0-4.6 2.8-7.6 8-7.9 0 4.7-3.1 7.9-8 7.9z'/%3E%3Cpath d='M12 13.6c-.3-2.6-2-4.2-4.8-4.4'/%3E%3C/svg%3E"); }
.ptable [data-type="Acid"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8c-2.7 3.5-4.7 6.2-4.7 8.6a4.7 4.7 0 0 0 9.4 0c0-2.4-2-5.1-4.7-8.6z' fill='%23000' fill-opacity='.28' stroke='none'/%3E%3Cpath d='M12 2.8c-2.7 3.5-4.7 6.2-4.7 8.6a4.7 4.7 0 0 0 9.4 0c0-2.4-2-5.1-4.7-8.6z'/%3E%3Cpath d='M2.8 20.6h5c.9 0 1.4-2.3 4.2-2.3s3.3 2.3 4.2 2.3h5'/%3E%3Ccircle cx='18.6' cy='15' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ptable [data-type="Gas"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.4' fill='%23000' fill-opacity='.28' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Ccircle cx='21.00' cy='12.00' r='1.75' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.36' cy='18.36' r='1.75' fill='%23000' stroke='none'/%3E%3Ccircle cx='12.00' cy='21.00' r='1.75' fill='%23000' stroke='none'/%3E%3Ccircle cx='5.64' cy='18.36' r='1.75' fill='%23000' stroke='none'/%3E%3Ccircle cx='3.00' cy='12.00' r='1.75' fill='%23000' stroke='none'/%3E%3Ccircle cx='5.64' cy='5.64' r='1.75' fill='%23000' stroke='none'/%3E%3Ccircle cx='12.00' cy='3.00' r='1.75' fill='%23000' stroke='none'/%3E%3Ccircle cx='18.36' cy='5.64' r='1.75' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ptable [data-type="Crystal"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 2.6 15 6.8v10.6l-4.5 4.2L6 17.4V6.8z' fill='%23000' fill-opacity='.28' stroke='none'/%3E%3Cpath d='M10.5 2.6 15 6.8v10.6l-4.5 4.2L6 17.4V6.8z'/%3E%3Cpath d='M6 6.8l4.5 2.6L15 6.8M10.5 9.4v12.2'/%3E%3Cpath d='M19.3 2.8v5.4M16.6 5.5H22'/%3E%3C/svg%3E"); }
.ptable [data-type="Metal"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 5.5h9.6a1.5 1.5 0 0 1 1.45 1.1l2.9 11.4a1.5 1.5 0 0 1-1.45 1.9H4.3a1.5 1.5 0 0 1-1.45-1.9L5.75 6.6A1.5 1.5 0 0 1 7.2 5.5z' fill='%23000' fill-opacity='.28' stroke='none'/%3E%3Cpath d='M7.2 5.5h9.6a1.5 1.5 0 0 1 1.45 1.1l2.9 11.4a1.5 1.5 0 0 1-1.45 1.9H4.3a1.5 1.5 0 0 1-1.45-1.9L5.75 6.6A1.5 1.5 0 0 1 7.2 5.5z'/%3E%3Cpath d='M4.6 12.4h14.8'/%3E%3Ccircle cx='8.2' cy='9' r='1.15' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.8' cy='9' r='1.15' fill='%23000' stroke='none'/%3E%3Ccircle cx='7.2' cy='16.2' r='1.15' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.8' cy='16.2' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ptable [data-type="RareEarth"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16.4V10a7 7 0 0 1 14 0v6.4h-4.4V10a2.6 2.6 0 0 0-5.2 0v6.4z' fill='%23000' fill-opacity='.28' stroke='none'/%3E%3Cpath d='M5 16.4V10a7 7 0 0 1 14 0v6.4h-4.4V10a2.6 2.6 0 0 0-5.2 0v6.4z'/%3E%3Cpath d='M5.6 13.2h3.2M15.2 13.2h3.2'/%3E%3Cpath d='M6.6 20c3 2 7.8 2 10.8 0'/%3E%3C/svg%3E"); }
.ptable [data-type="Nuclear"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(0 12 12)' d='M12 9.2C8.6 8 8.3 4 12 2c3.7 2 3.4 6 0 7.2z'/%3E%3Ccircle transform='rotate(60 12 12)' cx='12' cy='3.4' r='1.25' fill='%23000' stroke='none'/%3E%3Cpath transform='rotate(120 12 12)' d='M12 9.2C8.6 8 8.3 4 12 2c3.7 2 3.4 6 0 7.2z'/%3E%3Ccircle transform='rotate(180 12 12)' cx='12' cy='3.4' r='1.25' fill='%23000' stroke='none'/%3E%3Cpath transform='rotate(240 12 12)' d='M12 9.2C8.6 8 8.3 4 12 2c3.7 2 3.4 6 0 7.2z'/%3E%3Ccircle transform='rotate(300 12 12)' cx='12' cy='3.4' r='1.25' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='2.7' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.ptable [data-type="Synthetic"] { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 2.8h4.8'/%3E%3Cpath d='M10.4 2.8v5.1a7.2 7.2 0 1 0 3.2 0V2.8'/%3E%3Ccircle cx='9' cy='17.6' r='1.25' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='14.8' r='1.25' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='12' r='1.25' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }