/* WikiPons v9: play pages and shared play components (packs, collection, sets, higher or lower, sign-in wall, onboarding, opening, card detail). Owner: WP6. Scope: .home, .collection, .sets-page, .hl-page, .wall, .onboarding, .opening2, .detail, .pl-*. Sizes and places .cback and .pack3, never paints them (cosmetics.css does). */

/* ── shared play pieces ──────────────────────────────────────────────────────────────────────── */
.pl-who-inline .who { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; text-decoration: none; color: var(--text); font-weight: 650; }
.pl-who-inline .who b { font-weight: 650; }

.pl-bar { display: block; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ta, var(--text)); transform-origin: left; transition: transform 600ms var(--p-ease-out); }

/* chips on shop tiles (7.2): New in lime, Back after N days on L3, Today only in the commerce color, Owned, Equipped */
.pl-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--panel-3); color: var(--text); }
.pl-chip svg { width: 13px; height: 13px; fill: currentColor; }
.pl-chip.new { background: var(--signal); color: #0B0D04; }
.pl-chip.today { background: var(--commerce); color: #fff; }
.pl-chip.own { background: rgba(11, 11, 13, 0.6); color: var(--text-2); }
.pl-chip.eq { background: #F5F5F7; color: #0B0B0D; }

/* ══ Packs, /packs ═══════════════════════════════════════════════════════════════════════════════ */

/* labels read at 13px at least (0.1) */
.home .ticker2 { height: 60px; }
.home .tk { height: 46px; padding-right: 12px; }
.home .tk > div > b { font-size: 13.5px; line-height: 1.3; }
.home .tk small { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--text-3); }
.home .tk small .who { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--text-2); }
.home .tk small .who b { font-weight: 650; color: var(--text-2); }
.home .live-chip { font-size: 13px; }
.home .best-tag { font-size: 13px; padding: 3px 10px; top: -10px; }
.home .legend-tile small { font-size: 13px; }
.home .pk-body p, .home .pk-foot span { font-size: 13.5px; }

/* ── hero: the HUD gains the gift and the bonus stock, the pips lose their glow ────────────────────── */
.home .hud-stock .pips i.on { box-shadow: none; }
/* the wall of names is drawn only once the display face has loaded (Packs.jsx), then fades in; until then the title
   is hidden at the height it takes in that face */
.home .hero2-words { animation: fade-in 700ms ease both; }
.home .hero2 h1 { transition: opacity 240ms ease; }
.home .hero2.face-wait h1 { visibility: hidden; opacity: 0; }
.home .hud-stock > small, .home .hud-chip, .home .hud-stock > span { font-size: 13.5px; }
.home .hud-chip { text-decoration: none; }
.home button.hud-chip { border: 0; font: inherit; cursor: pointer; transition: transform 160ms var(--p-ease-out), background-color 160ms ease; }
.home button.hud-chip:active { transform: scale(0.97); transition-duration: 100ms; }
.home .hud-chip.pl-gift { background: var(--signal); color: #0B0D04; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform 160ms var(--p-ease-out); }
.home .hud-chip.pl-gift b, .home .hud-chip.pl-gift span { color: #0B0D04; }
.home .hud-chip.pl-gift span { font-weight: 600; opacity: 0.78; }
.home .hud-chip.pl-gift svg { fill: #0B0D04; }
.home .hud-chip.pl-gift:active { transform: scale(0.97); transition-duration: 100ms; }
.home .hud-chip.pl-bonus-chip svg { fill: #FF8A70; }
.pl-hud-sk { display: inline-block; width: 30px; height: 15px; margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .home .hud-chip.pl-gift:hover { background: #EEF88A; }
  .home button.hud-chip.pl-bonus-chip:hover { background: rgba(255, 255, 255, 0.12); }
}

/* phones and narrow windows: the title, the pack, the Rip button, then the HUD (the button stays above the fold) */
@container home (max-width: 940px) {
  .hero2 { gap: 14px; grid-template-columns: minmax(0, 1fr); }
  .hero2-copy { display: contents; }
  .hero2 h1 { order: 1; }
  .hero2 .hero2-stage { order: 2; }
  .hero2 .hero2-cta { order: 3; }
  .hero2 .hud { order: 4; margin: 0; }
  .hero2 .hero2-sub { order: 5; margin: 0; }
}
@container home (max-width: 560px) {
  .hero2 .hero2-stage { height: 250px; }
  .hero2 .h2-pack .pack3 { width: 150px; }
  .hero2 .h2c { width: 106px; }
  .hero2 .hero2-cta .btn.light.big { flex: 1 1 auto; }
  .hero2 .hero2-cta { flex-wrap: nowrap; }
  .hero2 .hero2-cta .pl-hero-connect, .hero2 .hero2-cta .pl-hero-free { display: none; }
  .hero2 .hero2-sub { font-size: 14.5px; }
}

/* ── Today's shop: the Featured pair at mini size, like the lobby's shop button ──────────────────── */
.pl-today {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 12px; padding: 12px;
  border-radius: var(--r-banner); background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pl-today-copy { display: grid; align-content: center; justify-items: start; gap: 12px; padding: 14px 14px 14px 18px; min-width: 0; }
.pl-today-copy h2 { margin: 0; font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: var(--t-row); line-height: 1; }
.pl-today-copy p { margin: 0; font-size: 14px; color: var(--text-2); max-width: 38ch; }
.pl-today-timer { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.pl-today-timer .countdown.boxed b { background: var(--panel-3); }
.pl-today-go { margin-top: 4px; }
.pl-today-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }

/* the mini shop tile (7.2 anatomy): the item's own material, the preview on the right, the plate, a 4px rarity bar */
.pl-stile {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%; --lift: 0px; --tone: var(--p-r0);
  position: relative; isolation: isolate; display: block; width: 100%; min-height: 212px; padding: 0; border: 0; border-radius: 20px; overflow: hidden;
  text-align: left; color: var(--text); background: var(--panel-2); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  /* the lean follows the pointer with a plain ease-out; the hover lift alone gets its small overshoot (7.2) */
  translate: 0 var(--lift);
  transition: transform 300ms var(--p-ease-out), translate 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
.pl-stile[data-r="1"] { --tone: var(--p-r1); } .pl-stile[data-r="2"] { --tone: var(--p-r2); } .pl-stile[data-r="3"] { --tone: var(--p-r3); }
.pl-stile[data-r="4"] { --tone: var(--p-r4); } .pl-stile[data-r="5"] { --tone: #C9CEFF; }
.pl-stile-ground {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(90% 110% at 78% 18%, color-mix(in oklab, var(--tone) 26%, #17171C), #111114 72%);
}
/* the bottom vignette over the material, so the plate reads (7.2) */
.pl-stile::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(11, 11, 13, 0.5) 0%, rgba(11, 11, 13, 0) 24%, rgba(11, 11, 13, 0) 44%, rgba(11, 11, 13, 0.92) 100%); }
/* one glint crosses the material on hover, and the light follows the pointer through --gx and --gy */
.pl-stile::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.13) 50%, transparent 62%);
  transform: translateX(-120%);
}
.pl-stile-type { position: absolute; left: 16px; top: 14px; z-index: 1; font-size: 13px; font-weight: 600; color: rgba(245, 245, 247, 0.82); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.pl-stile > .pl-chip { position: absolute; right: 12px; top: 11px; z-index: 3; }
.pl-stile-stage { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; display: grid; place-items: center; transition: transform 320ms var(--p-ease-out); }
.pl-stile-plate { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: grid; gap: 8px; }
.pl-stile-plate > b {
  font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-card); line-height: 0.95;
  padding-right: 0.1em; max-width: 60%; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.pl-stile-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pl-rname { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.pl-stile-meta .price { font-size: 15px; }
.pl-stile-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: var(--tone); }
.pl-stile[data-r="5"] .pl-stile-bar { background: linear-gradient(90deg, #3A4CFF, #9AA5FF 30%, #FFFFFF 50%, #FFC2B3 70%, #FF4A2B); }
/* the preview is WP4's ItemPreview (the same one the shop tiles use); this only places it in the mini stage */
.pl-stile-stage .cx-prev { height: 100%; }
.pl-stile-stage .cx-fan { width: min(104px, 46%); margin-top: -10%; }
.pl-stile-stage .cx-fan .cback { transition: transform 320ms var(--p-ease-out); }
.pl-stile-stage .cx-packwrap { height: 78%; margin-top: -8%; }
@media (hover: hover) and (pointer: fine) {
  .pl-stile:hover { --lift: -4px; }
  .pl-stile:hover::before { transform: translateX(120%); transition: transform 760ms var(--p-ease-out); }
  .pl-stile:hover .pl-stile-stage { transform: scale(1.04); }
  .pl-stile:hover .cx-fan .cback:first-child { transform: rotate(-9deg) translate(-30%, 2%); }
  .pl-stile:hover .cx-fan .cback:last-child { transform: rotate(7deg) translate(28%, -4%); }
}
.pl-stile:active { transform: perspective(900px) scale(0.985); transition: transform 100ms var(--p-ease-out); }
/* while the shop loads: the strip at its final size, the countdown's three boxes and two tiles as skeletons */
.pl-today-cd-sk { width: 140px; height: 40px; border-radius: 8px; }
.pl-stile.pl-stile-sk, .pl-stile.pl-stile-sk:active { background: none; box-shadow: none; cursor: default; transform: none; translate: none; }
.pl-stile.pl-stile-sk::before, .pl-stile.pl-stile-sk::after { content: none; }
.pl-stile-sk > .sk { position: absolute; inset: 0; border-radius: inherit; }
@container home (max-width: 1000px) {
  .pl-today { grid-template-columns: minmax(0, 1fr); }
  .pl-today-copy { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 8px 8px 4px; gap: 10px 16px; }
  .pl-today-copy p { grid-column: 1 / -1; grid-row: 2; }
  .pl-today-timer { grid-column: 1 / -1; grid-row: 3; }
  .pl-today-go { grid-column: 2; grid-row: 1; margin: 0; }
}
@container home (max-width: 560px) {
  .pl-today { padding: 10px; gap: 10px; }
  .pl-today-copy p { display: none; }
  .pl-today-tiles { gap: 8px; }
  .pl-stile { min-height: 196px; border-radius: 18px; }
  .pl-stile-stage { top: 26px; bottom: 64px; left: 0; width: auto; }
  .pl-stile-plate { left: 12px; right: 12px; bottom: 12px; gap: 6px; }
  .pl-stile-plate > b { font-size: 19px; max-width: none; }
  .pl-stile-type { left: 12px; top: 11px; }
  .pl-stile > .pl-chip { right: 8px; top: 8px; height: 24px; padding: 0 8px; }
  .pl-stile > .pl-chip.back { display: none; }
  .pl-rname { font-size: 0; gap: 0; }
  .pl-stile-stage .cx-fan { width: 42%; margin-top: 0; }
}

/* ── Themed packs: the twelve foils on one wall, each on a plain contact shadow ──────────────────── */
.pl-wall { border-radius: var(--r-banner); padding: 24px 24px 6px; background: linear-gradient(180deg, #131317, #0E0E11 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.pl-wall-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-wall-head h2 { margin: 0; font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: var(--t-page); line-height: 0.95; }
.pl-wall-head p { margin: 6px 0 0; font-size: 14px; color: var(--text-2); }
.pl-wall-actions { display: flex; align-items: center; gap: 8px; }
.pl-wall .coin-chip { background: var(--panel-2); }
.pl-wall-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 12px; }
.pl-slot { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 12px 0 18px; min-width: 0; }
.pl-slot-pack {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border: 0; padding: 0 0 8%; border-radius: 16px; cursor: pointer;
  display: grid; place-items: end center;
  background: radial-gradient(46% 10% at 50% 95%, rgba(0, 0, 0, 0.6), transparent 72%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09);
}
.pl-slot-pack:disabled { cursor: not-allowed; }
.pl-slot-pack:disabled .pack3 { opacity: 0.55; }
.pl-slot-pack .pack3 { width: auto; height: 88%; aspect-ratio: 0.6; transform: rotate(-3deg); transition: transform 420ms var(--p-ease-out); filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.6)); }
.pl-slot-pack:active:not(:disabled) .pack3 { transform: scale(0.96); transition-duration: 120ms; }
.pl-slot-sk { width: 52%; aspect-ratio: 0.6; margin-bottom: 4%; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) {
  .pl-slot-pack:hover:not(:disabled) .pack3 { transform: rotate(2deg) translateY(-6%) scale(1.04); }
}
.pl-slot-body { display: grid; gap: 7px; align-content: start; justify-items: center; text-align: center; min-width: 0; }
.pl-slot-body > b { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-slot-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: min(140px, 100%); }
.pl-slot-prog small { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pl-slot-buy { min-width: 76px; }
.pl-slot-buy img { width: 18px; height: 18px; border-radius: 50%; }
.pl-slot > .sk-line { width: 60%; justify-self: center; }
/* today's missions while they load: four cards at the height of a loaded one, the streak chip's box */
.pl-mission-sk { min-height: 104px; border-radius: 16px; }
@container home (max-width: 820px) { .pl-mission-sk { min-height: 120px; } }
.pl-streak-sk { width: 118px; height: 30px; border-radius: var(--r-pill); flex: none; }
/* the wall's skeleton: the rows of a loaded slot, text kept transparent, so the wall does not grow on load */
.pl-sk-text.sk { color: transparent; background-clip: content-box; padding-block: 4px; margin-block: -4px; border-radius: 99px; }
.pl-slot-body > b.pl-sk-text { width: 64%; }
.pl-slot-prog > .pl-sk-text { min-width: 56px; }
.pl-slot-buy-sk { width: 76px; height: 34px; border-radius: var(--r-pill); }
.pl-slot-buy-sk.buy { width: 98px; } /* the width of "Buy (coin) 25" at every size */
.pl-sub-sk { display: inline-block; width: 8em; height: 0.9em; vertical-align: -0.1em; border-radius: 6px; }
@container home (max-width: 1100px) { .pl-wall-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container home (max-width: 640px) {
  .pl-wall { padding: 18px 12px 2px; margin-inline: -4px; }
  .pl-wall-head { padding: 0 6px; }
  .pl-wall-head h2 { font-size: 32px; }
  .pl-wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
  .pl-slot { padding-bottom: 14px; gap: 8px; }
  .pl-slot-body > b { font-size: 13.5px; }
  .pl-slot-prog { grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: center; }
  .pl-slot-prog .pl-bar { width: 72%; }
  .pl-slot-buy { min-width: 0; padding: 0 12px; }
  .pl-slot-buy-sk { width: 64px; }
}

/* ── Just pulled: a full-bleed live strip, no boxes, the players by name ────────────────────────── */
.home .pl-live {
  margin-inline: -24px; padding: 22px 24px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border);
}
.pl-live-head { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.pl-live-head h2 { margin: 0; font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-row); line-height: 1; padding-right: 0.08em; }
.pl-live-head p { margin: 0; flex-basis: 100%; font-size: 14px; color: var(--text-2); }
.pl-live-run {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 20px 2px 8px; margin: 0 -2px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.pl-live-run::-webkit-scrollbar { display: none; }
.pl-pull { position: relative; flex: 0 0 148px; margin: 0; display: grid; gap: 10px; align-content: start; scroll-snap-align: start; min-width: 0; }
.pl-pull.best { flex-basis: 178px; }
.pl-pull .sk-card { width: 100%; }
.pl-pull-card .card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 22px 30px -18px rgba(0, 0, 0, 1); }
.pl-pull figcaption { display: grid; gap: 4px; min-width: 0; }
.pl-pull figcaption > b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-pull figcaption > span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: 13px; color: var(--text-3); }
.pl-pull figcaption .who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; text-decoration: none; color: var(--text-2); }
.pl-pull figcaption .who > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pull figcaption .who b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-pull figcaption small { flex: none; font-size: 13px; }
.pl-pull.best .best-tag { top: -12px; }
.pl-live-empty { margin: 0; align-self: center; }
@media (max-width: 860px) { .home .pl-live { margin-inline: -14px; padding: 18px 14px 12px; } .pl-pull { flex-basis: 132px; } .pl-pull.best { flex-basis: 156px; } }

/* ── Packs to rip: the packs stand large (160px), the free pack wears the player's foil ──────────── */
.pl-packs .pack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pl-packs .pack-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pl-packs .pack-tile { padding: 10px 10px 14px; border-radius: var(--r-tile); }
.pl-packs .pk-visual { aspect-ratio: auto; height: 300px; border-radius: 12px; }
.pl-packs .pk-visual .pack3 { width: min(160px, 74%); height: auto; }
.pl-packs .pk-visual.red { background: radial-gradient(90% 100% at 50% 20%, #7E2412, #180B09 72%); }
.pl-packs .pk-foot > span { white-space: nowrap; }
.pl-count { position: absolute; right: 10px; top: 10px; min-width: 32px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); display: grid; place-items: center; background: #F5F5F7; color: #0B0B0D; font-weight: 800; font-size: 14px; }
.pl-links { display: flex; gap: 14px; margin-top: 6px; }
/* Odds and Get more are quiet text controls (grey, no underline): the white pill is the tile's one action */
.pl-links .link-btn { font-size: 13.5px; font-weight: 650; color: var(--text-2); text-decoration: none; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .pl-links .link-btn:hover { color: var(--text); } }
.pl-next { display: inline-flex; align-items: center; gap: 7px; }
.pl-ring { width: 18px; height: 18px; flex: none; transform: rotate(-90deg); }
.pl-ring circle { fill: none; stroke-width: 2.6; stroke: rgba(255, 255, 255, 0.14); }
.pl-ring circle + circle { stroke: var(--text); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
@container home (max-width: 1100px) { .pl-packs .pack-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container home (max-width: 900px) { .pl-packs .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-packs .pack-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container home (max-width: 560px) {
  .pl-packs .pack-grid { gap: 10px; }
  .pl-packs .pk-visual { height: 212px; }
  .pl-packs .pk-visual .pack3 { width: min(118px, 72%); }
  .pl-packs .pk-body p { display: none; }
  .pl-packs .pk-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .pl-packs .pk-foot .btn { width: 100%; }
  .pl-packs .pk-body { min-height: 0; }
  .pl-packs .row-head { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-stile, .pl-stile::before, .pl-stile-stage, .pl-stile-stage .cx-fan .cback, .pl-slot-pack .pack3 { transition: none !important; }
  .pl-ring circle + circle { transition: none; }
}

/* ══ Collection, /collection and /u/:name/cards ═══════════════════════════════════════════════════ */
.collection { container: coll / inline-size; }
.pl-cstats {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: 12px 36px;
  padding: 20px 24px; margin-bottom: 8px; border-radius: var(--r-tile); background: var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pl-cstats.solo { grid-template-columns: auto minmax(0, 1fr); }
.pl-cnum { display: grid; gap: 4px; min-width: 0; }
.pl-cnum b { font-stretch: 75%; font-weight: 900; font-size: var(--t-page); line-height: 0.9; }
.pl-cnum span { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.pl-cnum-sk { width: 72px; height: 36px; }
.pl-rbar-wrap { min-width: 0; padding-bottom: 2px; }
/* the rarity bar: one segment per rarity in its metal, widths from the real counts (GitHub's language bar) */
.pl-rbar { display: flex; gap: 3px; height: 12px; }
.pl-rbar-sk { flex: 1; height: 12px; border-radius: 99px; }
.pl-rseg { --metal: var(--metal-0); position: relative; flex-basis: 0; min-width: 8px; border-radius: 3px; background: var(--metal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: transform 160ms var(--p-ease-out); }
.pl-rseg:first-child { border-radius: 99px 3px 3px 99px; } .pl-rseg:last-child { border-radius: 3px 99px 99px 3px; } .pl-rseg:only-child { border-radius: 99px; }
.pl-rseg[data-r="1"] { --metal: var(--metal-1); } .pl-rseg[data-r="2"] { --metal: var(--metal-2); } .pl-rseg[data-r="3"] { --metal: var(--metal-3); }
.pl-rseg[data-r="4"] { --metal: var(--metal-4); } .pl-rseg[data-r="5"] { --metal: var(--metal-5); }
.pl-rtip {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 4; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none;
  padding: 5px 10px; border-radius: 8px; background: var(--overlay); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border-hi);
  font-style: normal; font-size: 13px; font-weight: 700; white-space: nowrap; transition: opacity 140ms ease, transform 180ms var(--p-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pl-rtip { display: block; }
  .pl-rseg:hover .pl-rtip { opacity: 1; transform: translateX(-50%) translateY(0); }
  .pl-rseg:first-child .pl-rtip { left: 0; transform: translateY(4px); }
  .pl-rseg:first-child:hover .pl-rtip { transform: none; }
  .pl-rseg:last-child:not(:first-child) .pl-rtip { left: auto; right: 0; transform: translateY(4px); }
  .pl-rseg:last-child:not(:first-child):hover .pl-rtip { transform: none; }
  .pl-rbar:hover .pl-rseg:not(:hover) { opacity: 0.55; }
  .pl-rseg { transition: opacity 160ms ease; }
}
.pl-rlegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.pl-rlegend span { display: inline-flex; align-items: center; gap: 6px; }
.pl-rlegend b { color: var(--text); font-weight: 750; }
.pl-rlegend i, .pl-rchip i { --metal: var(--metal-0); width: 12px; height: 12px; flex: none; border-radius: 4px; background: var(--metal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
:is(.pl-rlegend span, .pl-rchip)[data-r="1"] i { --metal: var(--metal-1); } :is(.pl-rlegend span, .pl-rchip)[data-r="2"] i { --metal: var(--metal-2); }
:is(.pl-rlegend span, .pl-rchip)[data-r="3"] i { --metal: var(--metal-3); } :is(.pl-rlegend span, .pl-rchip)[data-r="4"] i { --metal: var(--metal-4); }
:is(.pl-rlegend span, .pl-rchip)[data-r="5"] i { --metal: var(--metal-5); }

/* the filter bar stays under the top bar while the grid scrolls (glass only on sticky bars, 7.2) */
.pl-filters {
  position: sticky; top: var(--topbar-h); z-index: 6; margin: 0 -24px 20px; padding: 12px 24px;
  background: rgba(11, 11, 13, 0.84); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 var(--border);
}
.pl-filters .toolbar { margin-bottom: 10px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-chips .chip { height: 36px; font-size: 13.5px; }
.pl-chips .chip svg { width: 15px; height: 15px; fill: currentColor; }
.pl-rchip span { font-weight: 750; color: var(--text-3); margin-left: 2px; }
.pl-rchip[aria-pressed="true"] span { color: rgba(11, 11, 13, 0.55); }
@media (hover: hover) and (pointer: fine) { .pl-chips .chip:hover:not([aria-pressed="true"]) { background: var(--panel-3); color: var(--text); } }

.pl-cgroup + .pl-cgroup { margin-top: 36px; }
.pl-cgroup-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: 1; }
.pl-cgroup-h span { font-stretch: 100%; font-size: 14px; font-weight: 650; color: var(--text-3); text-transform: none; }
.pl-cslot { position: relative; min-width: 0; }
/* pulled in the last 24 hours and not opened yet: a lime dot, like an unread badge */
.pl-newdot { position: absolute; left: -5px; top: -5px; z-index: 5; width: 14px; height: 14px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--bg); pointer-events: none; }
/* Select mode: the tick sits in the middle of the art, where no badge is (the reads pill, the copies count and the
   new dot hold the corners), and lets the tap through to the card, which deselects it */
.collection .card-slot .tick {
  left: 50%; top: 30%; bottom: auto; transform: translate(-50%, -50%); width: 40px; height: 40px; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 8px 18px rgba(0, 0, 0, 0.55);
}
.collection .card-slot .tick svg { width: 22px; height: 22px; }
@media (max-width: 860px) { .pl-filters { margin: 0 -14px 16px; padding: 10px 14px; } }
@container coll (max-width: 720px) {
  .pl-cstats { grid-template-columns: auto auto; gap: 16px 28px; padding: 16px 18px; }
  .pl-rbar-wrap { grid-column: 1 / -1; }
  .pl-cnum b { font-size: 34px; }
  .pl-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent);
  }
  .pl-chips::-webkit-scrollbar { display: none; }
  .pl-chips .chip { flex: none; }
  .pl-filters .toolbar { flex-wrap: nowrap; }
  .pl-filters .toolbar .search { flex: 1 1 auto; min-width: 0; }
  .pl-filters .toolbar .select { min-width: 0; width: 112px; flex: none; }
}

/* ══ Icon sets, /sets ═════════════════════════════════════════════════════════════════════════════ */
.pl-set-sk { height: 104px; border-radius: 18px; }
.pl-set-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 18px 0 0; cursor: default; }
.pl-set-toggle {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 200px 20px; align-items: center; gap: 18px; min-width: 0;
  padding: 16px 0 16px 20px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer;
}
.pl-set-toggle .set-meta { display: grid; gap: 3px; }
.pl-reward { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-top: 2px; }
.pl-reward img { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.pl-caret { width: 18px; height: 18px; fill: var(--text-3); transition: transform 220ms var(--p-ease-out); }
.pl-set.open .pl-caret { transform: rotate(180deg); }
.sets-page .set-strip img:not(.got) { filter: grayscale(1) brightness(0.5); }
.sets-page .set-strip img.got { filter: none; }
.pl-ring-set { position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.pl-ring-set svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pl-ring-set circle { fill: none; stroke-width: 5; stroke: rgba(255, 255, 255, 0.08); }
.pl-ring-set circle + circle { stroke: var(--ta); stroke-linecap: round; transition: stroke-dashoffset 700ms var(--p-ease-out); }
.pl-ring-set b { position: relative; font-stretch: 75%; font-weight: 900; font-size: 19px; line-height: 1; }
.pl-ring-set small { font-size: 13px; font-weight: 750; color: var(--text-3); }
.sets-page .set-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.sets-page .pl-set.claimed { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ta) 40%, transparent); }
.sets-page .set-reward .btn img, .sets-page .reward-chip img { width: 18px; height: 18px; }
.pl-togo { font-size: 13.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.sets-page .set-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 14px; }
/* the dex: a missing card is the player's own back with a question mark, and the article it waits for */
.pl-dex { display: grid; gap: 8px; align-content: start; }
.pl-dex-back { position: relative; }
.pl-dex-back .cback { box-shadow: 0 14px 22px -14px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.pl-dex-back .cback span { opacity: 0; }
.pl-dex-back b {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none;
  font-stretch: 75%; font-weight: 900; font-style: italic; font-size: clamp(56px, 7vw, 84px); line-height: 1; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.pl-dex small { font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) { .pl-set-toggle:hover .set-meta b { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--ta) 60%, transparent); text-underline-offset: 4px; } }
@media (max-width: 860px) {
  .pl-set-head { position: relative; grid-template-columns: minmax(0, 1fr); padding: 0; }
  .pl-set-toggle { grid-template-columns: 56px minmax(0, 1fr) 20px; padding: 14px 14px 16px 16px; gap: 12px 14px; }
  .pl-set-toggle .set-strip { grid-column: 1 / -1; grid-row: 2; }
  .pl-set-head .set-reward { position: absolute; right: 14px; bottom: 26px; }
  .sets-page .set-cards { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); padding: 4px 14px 16px; gap: 12px 10px; }
}

/* ══ Higher or Lower, /higher ═════════════════════════════════════════════════════════════════════ */
.pl-hl-idle { gap: 22px; }
.pl-hl-backs { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.pl-hl-back { width: clamp(118px, 17vw, 180px); }
.pl-hl-back.l { transform: rotate(-6deg) translateY(6px); }
.pl-hl-back.r { transform: rotate(5deg) translateY(-4px); }
.pl-hl-back .cback { box-shadow: 0 30px 40px -22px rgba(0, 0, 0, 1), inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.pl-hl-idle .hl-vs { font-size: 40px; }
.hl-page .hl-stats b small { font-size: 0.5em; font-weight: 800; color: var(--text-3); }
.hl-page .hl-stats span, .hl-page .hl-num span, .hl-page .hl-score span { font-size: 13.5px; }
@media (hover: hover) and (pointer: fine) {
  .pl-hl-back { transition: transform 420ms var(--p-ease-out); }
  .pl-hl-idle:hover .pl-hl-back.l { transform: rotate(-9deg) translate(-6px, 2px); }
  .pl-hl-idle:hover .pl-hl-back.r { transform: rotate(8deg) translate(6px, -8px); }
}
/* the end of a run: the losing pair stays, the answer in green when right and red when wrong (the arrow gives the
   direction), the result under the board */
.hl-run { display: grid; justify-items: center; gap: 28px; width: 100%; }
.hl-page .hl-num { align-content: start; gap: 6px; }
.hl-page .hl-num.right b { color: var(--good); }
.hl-page .hl-num.wrong b { color: #FF7B6E; }
.hl-page .hl-num span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: min(260px, 38vw); text-align: center; }
.hl-page .hl-num span svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
.hl-end { display: grid; justify-items: center; gap: 16px; text-align: center; animation: pl-rise 420ms var(--p-ease-out) both; }
.hl-end .hl-stats { flex-wrap: wrap; justify-content: center; }
.hl-end > p { margin: 0; }
.hl-gain { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 7px; border-radius: var(--r-pill); background: rgba(227, 243, 107, 0.14); color: var(--signal); font-weight: 800; font-size: 15px; }
.hl-gain img { width: 22px; height: 22px; border-radius: 50%; }
@media (max-width: 520px) { .pl-hl-backs { gap: 10px; } .pl-hl-idle .hl-vs { font-size: 28px; } .hl-page .hl-stats div { min-width: 0; padding: 14px 16px; } .hl-end .hl-stats { gap: 8px; } }
/* on phones the result scrolls into view above the tab bar */
@media (max-width: 860px) { .hl-end { scroll-margin-bottom: 100px; } }
@media (prefers-reduced-motion: reduce) { .hl-end { animation: none; } }

/* ══ Sign-in wall: real public content under a 6px blur, a lock card on top ═══════════════════════ */
.wall { position: relative; isolation: isolate; max-width: none; margin: 0; min-height: calc(100dvh - var(--topbar-h) - 96px); display: grid; place-items: center; overflow: hidden; border-radius: var(--r-banner); text-align: center; }
.pl-lockbg {
  position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 16px; align-content: start; padding: 8px;
  filter: blur(6px) saturate(0.9); opacity: 0.5; pointer-events: none; user-select: none;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(80% 70% at 50% 45%, #000 30%, transparent 100%);
}
.pl-lock {
  width: min(440px, calc(100% - 32px)); display: grid; justify-items: center; gap: 10px; padding: 32px 28px 24px;
  border-radius: var(--r-banner); background: rgba(19, 19, 22, 0.9); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border-hi);
  animation: pl-rise 420ms var(--p-ease-out) both;
}
.pl-lock-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); margin-bottom: 4px; }
.pl-lock-ico svg { width: 24px; height: 24px; fill: var(--text); }
.wall .pl-lock h1 { margin: 0; }
.wall .pl-lock p { margin: 0 0 8px; font-size: 15px; color: var(--text-2); }
.pl-lock-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pl-lock small { font-size: 13px; color: var(--text-3); margin-top: 4px; }
@keyframes pl-rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
/* the page's own public content behind some walls: the achievements cabinet, a public board */
.pl-lockbg.cabinet { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pl-lockach { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-tile); background: var(--panel); text-align: left; }
.pl-lockach b { font-size: 15px; font-weight: 750; }
.pl-lockach span { font-size: 13px; color: var(--text-2); }
.pl-lockach small { font-size: 13px; font-weight: 750; color: var(--signal); }
.pl-lockbg.rows { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 8px; }
.pl-lockrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-radius: 14px; background: var(--panel); text-align: left; }
.pl-lockrow span { font-weight: 800; color: var(--text-3); }
.pl-lockrow b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-lockrow small { font-size: 14px; font-weight: 750; color: var(--text-2); }
.pl-lockbg.rows .sk-row { margin: 0; }
@media (max-width: 860px) {
  .wall { min-height: calc(100dvh - var(--topbar-h) - 140px); border-radius: 18px; }
  .pl-lockbg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .pl-lockbg.cabinet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-lockbg.rows { grid-template-columns: minmax(0, 1fr); }
}

/* ══ Onboarding: the name takes its place as it is typed ═════════════════════════════════════════ */
.onboarding .pl-onb { display: grid; gap: 10px; padding: 30px 28px 26px; border-radius: var(--r-banner); }
.onboarding .pl-onb h1 { margin: 16px 0 0; font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 40px; line-height: 0.92; letter-spacing: 0; padding-right: 0.08em; }
.pl-onb-sub { margin: 0 0 6px; font-size: 14.5px; }
.pl-onb-preview { display: flex; align-items: center; min-height: 68px; padding: 14px 16px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-3); transition: box-shadow 200ms ease; }
.pl-onb-preview.on { color: var(--text); box-shadow: inset 0 0 0 1px var(--border-act); }
.pl-onb-preview .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-onb-preview .who-text { display: grid; min-width: 0; }
.pl-onb-preview .who-text b { font-size: 16px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-onb-preview .who-text small { font-size: 13px; color: var(--text-2); }
.pl-onb .field-label { margin-top: 6px; }
.pl-onb-hint { margin: -2px 0 6px; font-size: 13px; color: var(--text-2); }
.pl-onb-hint.bad { color: #FF8A7D; }

/* ══ Card detail sheet: one primary action, a star, the rest in a menu ═══════════════════════════ */
.pl-detail-sk { display: grid; gap: 12px; padding-top: 8px; }
.pl-detail-sk .sk-line:first-child { width: 60%; height: 28px; }
.pl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.pl-actions .icon-btn { width: 42px; height: 42px; }
.pl-star.on svg { fill: var(--signal); }
.pl-star:disabled { opacity: 0.5; }
.pl-more { position: relative; }
.pl-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; min-width: 220px; padding: 6px; display: grid; gap: 2px;
  border-radius: 14px; background: var(--overlay); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border-hi);
  transform-origin: top right; animation: pl-pop 160ms var(--p-ease-out) both;
}
.pl-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: none;
  color: var(--text); font-size: 14px; font-weight: 600; text-align: left; transition: background-color 120ms ease;
}
.pl-menu button svg { width: 17px; height: 17px; fill: var(--text-2); flex: none; }
.pl-menu button:disabled { opacity: 0.45; cursor: not-allowed; }
.pl-menu button:not(:disabled):hover, .pl-menu button:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
.pl-menu-end { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 750; color: var(--text-2); }
.pl-menu-end img { width: 16px; height: 16px; border-radius: 50%; }
@keyframes pl-pop { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.pl-ask { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 90, 74, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 90, 74, 0.22); animation: pl-pop 180ms var(--p-ease-out) both; transform-origin: top; }
.pl-ask p { margin: 0 0 10px; font-size: 14px; color: var(--text-2); }
.pl-ask p b { color: var(--text); }
.pl-pro-note { margin-top: 10px; background: var(--panel-2); }
.pl-pro-note p { margin: 6px 0 0; font-size: 14px; color: var(--text-2); }
.detail .credit { font-size: 13px; }
.detail .fact span { font-size: 13px; }
.pl-gift-list .item { padding: 10px 12px; }
@media (prefers-reduced-motion: reduce) { .pl-menu, .pl-ask, .pl-lock { animation: none; } .pl-rseg, .pl-rtip, .pl-hl-back, .pl-caret { transition: none; } }

/* ── the opening: labels at 13px (0.1); the sequence itself is unchanged ─────────────────────────── */
.opening2 .new-tag, .opening2 .ed-tag { font-size: 13px; }
/* the done screen: the New chip hangs under the card's edge, clear of its stats, and the rows leave it room */
.opening2 .op-done { row-gap: 28px; }
.opening2 .op-slot .new-tag { bottom: -16px; padding: 2px 10px; }
/* on a phone the cards, the summary and the missions do not fit one screen: the done screen scrolls instead of
   stacking the cards over the buttons */
.opening2.ph-done { overflow-y: auto; overscroll-behavior: contain; }
.opening2.ph-done .op-stage { min-height: auto; }
/* a themed pack shows its price under the pack before the rip, which is the one confirm (1.11) */
.op-price {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 0; padding: 8px 16px 8px 10px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-size: 14px;
}
.op-price img { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.op-price b { font-weight: 800; font-size: 15px; color: var(--text); }
.op-price span { font-weight: 600; color: var(--text-2); }
.op-price.bad { background: rgba(255, 90, 74, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 90, 74, 0.28); }
.op-price.bad b { color: #FF8A7D; }
/* the overlay takes focus when it opens (a dialog): the container itself draws no ring */
.opening2:focus-visible { outline: none; }
/* the rip line is a plain white cut, no light around it */
.opening2 .pk-cutline i { box-shadow: none; }
.collection .copies { font-size: 13px; }

/* touch: the new controls reach 44px under a finger (9, accessibility) */
@media (pointer: coarse) {
  .pl-chips .chip { height: 44px; }
  .pl-slot-buy, .pl-packs .pk-foot .btn, .pl-links .link-btn { min-height: 44px; }
  .pl-slot-buy-sk { height: 44px; }
  .pl-links .link-btn { display: inline-flex; align-items: center; }
  .pl-menu button { height: 48px; }
}