.picker { position: fixed; z-index: 95; left: 50%; top: 50%; display: flex; flex-direction: column; gap: .6rem; width: min(34rem, calc(100vw - 1.5rem)); max-height: min(52rem, calc(100vh - 2.5rem)); padding: 1.45rem .85rem .75rem; background: linear-gradient(180deg, rgba(21, 32, 52, .985), rgba(8, 13, 23, .99)); animation: menu-in .12s var(--ease-out); }
.picker.has-detail { width: min(64rem, calc(100vw - 1.5rem)); }
.picker .plaque { font-size: .95rem; }
.pk-head { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: 0 .15rem .55rem; border-bottom: 1px solid var(--edge-soft); }
.pk-icon { flex: none; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .55rem; background: radial-gradient(120% 110% at 50% 18%, var(--well-top) 0%, #0f1828 55%, var(--well-bottom) 100%); border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 .15rem .45rem rgba(0, 0, 0, .75); }
.pk-icon > img, .pk-icon .item-img { width: 78%; height: 78%; object-fit: contain; }
.pk-icon > .well { width: 100%; height: 100%; border: 0; background: none; box-shadow: none; }
.pk-icon .spell-icon { width: 100%; height: 100%; }
.pk-icon .ia-emblem { width: 70%; height: 70%; }
.pk-title { flex: 1; display: grid; gap: .08rem; min-width: 0; }
.pk-title strong { font: 600 1.12rem/1.2 var(--font-display); color: var(--gold-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.pk-title small { font-size: .76rem; line-height: 1.3; color: var(--text-3); }
.pk-title small b { font-weight: 600; color: var(--text-1); }
.pk-now { flex: none; display: grid; justify-items: end; line-height: 1.1; }
.pk-now small { font: 700 .58rem var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-3); }
.pk-now b { font: 600 1.2rem var(--font-num); color: var(--gold-0); }
.pk-head .auto-toggle { flex: none; }
.pk-close { flex: none; }
.pk-tools { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pk-search { flex: 1; min-width: 0; }
.pk-tools .segmented { flex: none; }
.pk-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; min-height: 0; }
.picker.has-detail .pk-body { grid-template-columns: minmax(0, 1fr) 22rem; }
.picker .pk-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: .7rem; padding: .1rem .25rem .1rem .1rem; }
.pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; align-content: start; }
.picker:not(.has-detail) .pk-grid { grid-template-columns: minmax(0, 1fr); }
.picker .pk-detail.is-side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pk-detail.is-inline { display: none; grid-column: 1 / -1; }
.pk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; padding: .5rem .2rem 0; border-top: 1px solid var(--edge-soft); }
.pk-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--gold-2); }
.pk-link .ia-glyph { width: .85rem; height: .85rem; }
.pk-link:hover { color: var(--gold-0); }
.pk-empty { display: grid; justify-items: center; gap: .35rem; padding: 1.4rem 1rem; text-align: center; color: var(--text-3); }
.pk-empty .ia-emblem { width: 2.6rem; height: 2.6rem; opacity: .8; }
.pk-empty strong { font: 600 1rem var(--font-display); color: var(--text-2); }
.pk-empty p, .pk-none { margin: 0; font-size: .8rem; color: var(--text-3); }
.pk-group { display: grid; gap: .35rem; }
.pk-group > header { display: flex; align-items: baseline; gap: .5rem; padding: 0 .15rem; }
.pk-group > header strong { font: 600 .9rem var(--font-display); color: var(--gold-1); }
.pk-group > header small { font-size: .7rem; color: var(--text-3); }
.pk-group.is-locked > header strong { color: var(--text-3); }

.pk-card { --pip: var(--rar-common); position: relative; display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; min-width: 0; padding: .45rem .6rem .45rem .45rem; border-radius: .6rem; border: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .2)); text-align: left; color: var(--text-1); transition: border-color .12s, background .12s; }
.pk-card:hover:not(:disabled) { border-color: rgba(242, 198, 106, .38); background: linear-gradient(180deg, rgba(242, 198, 106, .07), rgba(0, 0, 0, .2)); }
.pk-card:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 1px; }
.pk-card.is-selected { border-color: var(--gold-2); background: linear-gradient(180deg, rgba(242, 198, 106, .11), rgba(0, 0, 0, .22)); box-shadow: 0 0 0 1px rgba(242, 198, 106, .3); }
.pk-card.is-worn { border-color: rgba(88, 214, 127, .55); background: linear-gradient(90deg, rgba(23, 80, 44, .42), rgba(0, 0, 0, .2)); }
.pk-card.is-worn.is-selected { border-color: var(--emerald); box-shadow: 0 0 0 1px rgba(88, 214, 127, .35); }
.pk-card.is-locked { background: rgba(0, 0, 0, .25); }
.pk-card.is-locked :is(.pk-well, .pk-spell-well, .pk-copy) { opacity: .55; }
.pk-card.is-locked .pk-well img { filter: grayscale(.8) brightness(.85); }
.pk-card:disabled { cursor: default; }
.pk-card.r-uncommon { --pip: var(--rar-uncommon); } .pk-card.r-rare { --pip: var(--rar-rare); } .pk-card.r-epic { --pip: var(--rar-epic); }
.pk-card.r-legendary { --pip: var(--rar-legendary); } .pk-card.r-mythic { --pip: var(--rar-mythic); }
.pk-well { width: 3.1rem; }
.pk-well > img { width: 80%; height: 80%; }
.pk-well .qty { font-size: .72rem; }
.pk-copy { display: grid; gap: .12rem; min-width: 0; }
.pk-copy > strong { font: 600 .92rem/1.2 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-copy > small { font-size: .7rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-copy > small b { font-weight: 600; color: var(--text-1); }
.pk-key { font: 600 .7rem/1.25 var(--font-num); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-side { display: grid; justify-items: end; align-content: center; gap: .25rem; }
.pk-side .chip { font-size: .64rem; padding: .1rem .45rem; }
.pk-side .chip .ia-glyph { width: .75rem; height: .75rem; }
.pk-delta { font: 700 .82rem var(--font-num); white-space: nowrap; }
.pk-delta.is-up { color: var(--emerald); }
.pk-delta.is-down { color: var(--crimson); }
.pk-delta.is-same { color: var(--text-3); }
.pk-lock { display: inline-flex; align-items: center; gap: .2rem; font: 700 .7rem var(--font-num); color: #ffd0b3; white-space: nowrap; }
.pk-lock .ia-glyph { width: .75rem; height: .75rem; }
.pk-go { display: inline-flex; align-items: center; gap: .15rem; font-size: .72rem; font-weight: 650; color: var(--gold-2); white-space: nowrap; }
.pk-go .ia-glyph { width: .75rem; height: .75rem; }
.pk-pips { display: inline-flex; align-items: center; gap: .22rem; min-height: .8rem; }
.pk-pip { display: inline-block; width: .44rem; height: .44rem; rotate: 45deg; background: var(--pip); box-shadow: 0 0 0 1px rgba(0, 0, 0, .75); }
.pk-pip.is-greater { box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), 0 0 0 2px var(--gold-1); }
.pk-pip.is-empty { background: transparent; box-shadow: none; outline: 1px dashed var(--text-4); outline-offset: -1px; }
.pk-pip.is-effect { background: linear-gradient(135deg, #fff4bd, var(--rar-legendary)); }
.pk-anvil { width: .82rem; height: .82rem; color: var(--gold-2); }
.pk-simple { grid-template-columns: 2.7rem minmax(0, 1fr) auto; }
.pk-simple .pk-well { width: 2.7rem; }
.pk-simple .tier-badge { vertical-align: .1rem; }
.pk-spell { grid-template-columns: 2.9rem minmax(0, 1fr) auto; border-color: color-mix(in srgb, var(--el, var(--gold-2)) 16%, rgba(255, 255, 255, .06)); }
.pk-spell-well { width: 2.9rem; height: 2.9rem; }
.pk-spell-well .spell-icon { width: 100%; height: 100%; }
.pk-runes { display: flex; flex-wrap: wrap; gap: .15rem .55rem; margin-top: .1rem; }
.pk-rune { display: inline-flex; align-items: center; gap: .18rem; font-size: .7rem; color: var(--text-2); }
.pk-rune .item-img { width: 1.05rem; height: 1.05rem; object-fit: contain; }
.pk-rune b { font: 700 .72rem var(--font-num); color: var(--text-1); }
.pk-rune small { font: 500 .66rem var(--font-num); color: var(--text-3); }
.pk-rune small::before { content: "of "; opacity: .7; }
.pk-rune.is-short small { color: var(--ember); }
.pk-status { font-size: .7rem; color: var(--text-2); }
.pk-status b { color: var(--text-1); }

.pk-detail-card { display: grid; align-content: start; gap: .55rem; padding: .6rem .7rem .7rem; border-radius: .6rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .28); }
.pk-detail-head { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: center; gap: .65rem; }
.pk-detail-head .pk-big { width: 3.6rem; height: 3.6rem; }
.pk-detail-head > span:last-child { display: grid; gap: .1rem; min-width: 0; }
.pk-detail-head strong { font: 600 1.05rem/1.15 var(--font-display); color: var(--text-1); overflow-wrap: anywhere; }
.pk-detail-head small { font-size: .72rem; color: var(--text-3); line-height: 1.3; }
.pk-detail-head .pk-where { color: var(--text-2); }
.pk-power { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .1rem .6rem; padding: .45rem .6rem; border-radius: .45rem; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .06); }
.pk-power > span { display: inline-flex; align-items: center; gap: .3rem; font: 700 .64rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
.pk-power > span .ia-glyph { width: .8rem; height: .8rem; }
.pk-power > b { font: 600 1.3rem var(--font-num); color: var(--text-1); }
.pk-power > small { grid-column: 1 / -1; font-size: .74rem; color: var(--text-3); }
.pk-power em { font: 700 .8rem var(--font-num); font-style: normal; }
.pk-power.is-up { border-color: rgba(88, 214, 127, .35); }
.pk-power.is-up em, .pk-power.is-up > b { color: var(--emerald); }
.pk-power.is-down { border-color: rgba(255, 93, 87, .3); }
.pk-power.is-down em { color: var(--crimson); }
.pk-power.is-worn { border-color: rgba(88, 214, 127, .35); }
.pk-power.is-worn > span { color: var(--emerald); }
.pk-block { display: grid; gap: .25rem; padding-top: .45rem; border-top: 1px solid var(--edge-soft); }
.pk-block > .t-caps { font-size: .58rem; color: var(--gold-3); }
.pk-acts { display: grid; gap: .35rem; padding-top: .15rem; }
.picker .pk-detail.is-side .pk-acts { position: sticky; bottom: -.7rem; margin: 0 -.7rem -.7rem; padding: .55rem .7rem .7rem; background: linear-gradient(180deg, rgba(8, 13, 22, 0), rgba(8, 13, 22, .96) 30%); border-radius: 0 0 .6rem .6rem; }
.pk-acts .btn .ia-emblem { width: 1.2rem; height: 1.2rem; }
.pk-rune-row { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto auto; align-items: center; gap: .45rem; font-size: .78rem; color: var(--text-2); }
.pk-rune-row .item-img { width: 1.3rem; height: 1.3rem; object-fit: contain; }
.pk-rune-row small { font-size: .7rem; color: var(--text-3); }
.pk-rune-row b { font: 700 .8rem var(--font-num); color: var(--emerald); }
.pk-rune-row.is-short b { color: var(--ember); }
.pk-casts { margin: .1rem 0 0; font-size: .78rem; color: var(--text-2); }
.pk-casts b { color: var(--text-1); }
.pk-fact { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: .4rem; font-size: .76rem; color: var(--text-3); }
.pk-fact .ia-emblem { width: 1.2rem; height: 1.2rem; }
.pk-fact b { font-weight: 600; color: var(--text-1); }
.pk-foes, .pk-warn { margin: 0; font-size: .74rem; line-height: 1.35; color: var(--text-3); }
.pk-warn { display: flex; gap: .35rem; color: #ffd0b3; }
.pk-warn .ia-glyph { flex: none; width: .9rem; height: .9rem; }
.pk-detail-card .pk-spell-icon.pk-big { width: 3.6rem; height: 3.6rem; }

.lo-cards { display: grid; gap: .5rem; }
.lo-card.eq-ammo { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.lo-card { display: grid; gap: .4rem; padding: .5rem .55rem .55rem; border-radius: .65rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .24); }
.lo-card.is-active { border-color: color-mix(in srgb, var(--emerald) 38%, transparent); }
.lo-card.is-warn, .lo-card.is-out { border-color: color-mix(in srgb, var(--ember) 45%, transparent); }
.lo-card.is-prompt { border-color: color-mix(in srgb, var(--gold-2) 45%, transparent); }
.lo-card-head { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.lo-card-head .ia-emblem { width: 1rem; height: 1rem; }
.lo-card-head .t-caps { font-size: .6rem; color: var(--gold-3); }
.lo-card-meta { margin-left: auto; font-size: .7rem; color: var(--text-3); white-space: nowrap; }
.lo-pick { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .55rem; width: 100%; min-width: 0; padding: .3rem .4rem .3rem .3rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .035); text-align: left; color: var(--text-1); transition: border-color .12s, background .12s; }
.lo-pick:hover { border-color: rgba(242, 198, 106, .4); background: rgba(242, 198, 106, .07); }
.lo-pick:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 1px; }
.lo-well { width: 2.5rem; height: 2.5rem; pointer-events: none; }
.lo-well.is-ghost > img { filter: grayscale(1) brightness(.6); opacity: .45; }
.lo-well > .item-img { width: 80%; height: 80%; object-fit: contain; }
.lo-spell-well { display: grid; place-items: center; }
.lo-spell-well .spell-icon { width: 100%; height: 100%; }
.lo-spell-well > .ia-emblem { width: 72%; height: 72%; opacity: .6; }
.lo-pick-copy { display: grid; gap: .08rem; min-width: 0; }
.lo-pick-copy strong { font: 600 .92rem/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-pick-copy small { font-size: .72rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-pick-copy small b { font-weight: 600; color: var(--text-1); }
.lo-count { display: grid; justify-items: end; font: 600 1.05rem/1 var(--font-num); color: var(--text-1); }
.lo-count small { font: 600 .56rem var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.lo-cue { width: .9rem; height: .9rem; color: var(--text-3); }
.lo-pick:hover .lo-cue { color: var(--gold-2); }
.lo-autoeat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .6rem; }
.lo-ae-bar { position: relative; grid-column: 1 / -1; height: .38rem; border-radius: 1rem; background: rgba(255, 255, 255, .08); }
.lo-ae-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #b0362f, var(--ember)); }
.lo-ae-bar > s { position: absolute; top: -.18rem; bottom: -.18rem; width: 2px; margin-left: -1px; background: var(--emerald); border-radius: 1px; }
.lo-autoeat small { font-size: .72rem; line-height: 1.3; color: var(--text-3); }
.lo-autoeat small b { font-weight: 600; color: var(--text-1); }
.lo-upgrade { min-height: 1.7rem; padding: .2rem .55rem; font-size: .72rem; }
.lo-upgrade .ia-emblem { width: 1rem; height: 1rem; }
.lo-pouch { display: grid; gap: .25rem; }
.lo-pouch > .t-caps { font-size: .56rem; color: var(--text-3); }
.lo-runes { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.lo-rune { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem .15rem .2rem; border-radius: 1rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); font-size: .72rem; color: var(--text-2); }
.lo-rune .item-img { width: 1.15rem; height: 1.15rem; object-fit: contain; }
.lo-rune b { font: 700 .76rem var(--font-num); color: var(--text-1); }
.lo-rune small { font-size: .68rem; color: var(--text-3); }
.lo-rune.is-short { border-color: rgba(255, 143, 79, .45); }
.lo-rune.is-short small { color: var(--ember); }
.lo-note { display: flex; align-items: flex-start; gap: .35rem; margin: 0; font-size: .72rem; line-height: 1.35; color: var(--text-3); }
.lo-note .ia-glyph { flex: none; width: .85rem; height: .85rem; margin-top: .08rem; }
.lo-note.is-warn { color: #ffd0b3; }
.lo-ptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
.lo-ptile { --skill: var(--gold-2); position: relative; display: grid; justify-items: center; align-content: center; gap: .1rem; min-width: 0; min-height: 3.6rem; padding: .3rem .2rem .25rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .03); color: var(--text-3); transition: border-color .12s, background .12s; }
.lo-ptile:hover { border-color: rgba(242, 198, 106, .4); }
.lo-ptile:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 1px; }
.lo-ptile-icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; }
.lo-ptile-icon .item-img { width: 100%; height: 100%; object-fit: contain; }
.lo-ptile-icon .ia-emblem { width: 80%; height: 80%; opacity: .35; filter: grayscale(.8); }
.lo-ptile small { max-width: 100%; font-size: .58rem; line-height: 1.1; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-ptile b { position: absolute; top: .2rem; right: .3rem; font: 700 .64rem var(--font-num); color: var(--text-1); text-shadow: 0 1px 0 #000; }
.lo-ptile.is-active { border-color: color-mix(in srgb, var(--skill) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--skill) 18%, transparent), rgba(0, 0, 0, .2)); color: var(--text-1); }
.lo-auto { position: absolute; top: .3rem; left: .3rem; width: .38rem; height: .38rem; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); }
.lo-supplies { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .25rem; }
.lo-supplies .well { border-radius: .4rem; }
.lo-spare { display: grid; gap: .3rem; }
.lo-spare > .t-caps { font-size: .56rem; color: var(--text-3); }
.lo-spare-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.lo-card.is-small { gap: .25rem; padding: .35rem .4rem .4rem; background: rgba(0, 0, 0, .18); }
.lo-card.is-small .lo-card-meta { display: none; }
.lo-card.is-small .lo-pick { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .4rem; padding: .2rem .3rem .2rem .2rem; }
.lo-card.is-small .lo-well { width: 2rem; height: 2rem; }
.lo-card.is-small .lo-cue { display: none; }
.lo-card.is-small .lo-pick-copy strong { font-size: .8rem; }
.lo-card.is-small .lo-pick-copy small { font-size: .64rem; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lo-card.is-small .lo-count { font-size: .86rem; }
.lo-card.is-small .lo-count small { display: none; }

@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .picker { background: rgba(8, 13, 22, .97); border-color: rgba(242, 198, 106, .32); border-radius: 1.05rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .6); }
  .is-hud .picker::before { border-radius: 1.05rem; }
  .is-hud .hud-panel .lo-cards { gap: .6rem; }
  .is-hud .hud-panel .lo-card { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .08); }
  .is-hud .hud-panel .lo-card.is-active { border-color: color-mix(in srgb, var(--emerald) 40%, transparent); }
  .is-hud .hud-panel .lo-card.is-warn, .is-hud .hud-panel .lo-card.is-out { border-color: color-mix(in srgb, var(--ember) 45%, transparent); }
  .is-hud .hud-panel .lo-card.is-prompt { border-color: color-mix(in srgb, var(--gold-2) 45%, transparent); }
}

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .picker, .picker.has-detail { left: .4rem !important; right: .4rem; top: calc(var(--top) + .6rem) !important; bottom: calc(var(--nav) + .4rem); width: auto; max-height: none; padding: 1.4rem .55rem .6rem; animation: sheet-in .2s var(--ease-out); }
  .picker.has-detail .pk-body { grid-template-columns: minmax(0, 1fr); }
  .picker .pk-detail.is-side { display: none; }
  .picker .pk-detail.is-inline { display: block; }
  .picker, .picker .pk-list { overscroll-behavior: contain; }
  .pk-grid, .picker:not(.has-detail) .pk-grid { grid-template-columns: minmax(0, 1fr); }
  .pk-now b { font-size: 1.05rem; }
  .pk-head { gap: .55rem; }
  .pk-tools { flex-wrap: wrap; }
  .pk-search { flex: 1 1 100%; }
  .pk-card { min-height: 3.6rem; }
  .pk-link { min-height: 2.4rem; }
  .lo-ptiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lo-pick { min-height: 3.2rem; }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .picker :is(.pk-head .btn-icon, .pk-acts .btn, .pk-link, .segmented button, .auto-toggle) { min-height: 44px; }
  .picker .pk-head .btn-icon { width: 44px; }
  .picker :is(.pk-title small, .pk-now small, .well .qty, .pk-copy > small, .pk-copy > span, .pk-key, .pk-side .chip, .pk-delta, .pk-lock, .pk-go, .pk-group > header small, .pk-rune, .pk-rune b, .pk-rune small, .pk-status,
    .pk-detail-head small, .pk-power span, .pk-power small, .pk-block .t-caps, .pk-rune-row > *, .pk-casts, .pk-casts b, .pk-fact > *, .pk-foes, .pk-warn, .pk-empty p, .pk-none, .pk-acts .btn, .pk-link, .segmented button, .auto-toggle) { font-size: .9rem; }
  .picker :is(.pk-now small, .pk-block .t-caps) { letter-spacing: .06em; }
  :is(.dock.gear, .eqw-page) :is(.lo-pick, .lo-preset, .lo-autoeat .btn, .lo-head .btn-icon) { min-height: 44px; }
  :is(.dock.gear, .eqw-page) .lo-head .btn-icon { width: 44px; }
  :is(.dock.gear, .eqw-page) :is(.lo-card-head .t-caps, .lo-card-meta, .lo-pick-copy small, .lo-pick-copy b, .lo-pick-copy strong, .lo-count, .lo-autoeat b, .lo-autoeat small, .lo-autoeat .btn, .lo-ptile small, .lo-ptile b, .lo-spare > .t-caps,
    .lo-head .t-caps, .lo-preset b, .lo-preset small, .lo-over, .lo-note) { font-size: .9rem; }
  :is(.dock.gear, .eqw-page) :is(.lo-card-head .t-caps, .lo-spare > .t-caps, .lo-head .t-caps) { letter-spacing: .06em; }
  :is(.dock.gear, .eqw-page) .lo-ptile small { letter-spacing: 0; }
  :is(.dock.gear, .eqw-page) .lo-ptiles { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
  :is(.dock.gear, .eqw-page) .lo-spare-row { grid-template-columns: minmax(0, 1fr); }
  .picker :is(.pk-key, .pk-title strong) { white-space: normal; }
  .picker .search .input { min-height: 44px; }
}
@media (max-height: 500px) and (pointer: coarse) {
  .picker, .picker.has-detail { top: calc(env(safe-area-inset-top) + .4rem) !important; padding-top: 2.6rem; bottom: .3rem; left: auto !important; right: calc(var(--rail, 0px) + .3rem); width: min(34rem, calc(100% - var(--rail, 0px) - 1rem)); overflow-y: auto; }
  .picker .pk-body { flex: none; }
  .picker::before { display: none; }
  .picker > .plaque { top: .45rem; translate: -50% 0; }
  .picker .pk-list { overflow: visible; }
  .picker .pk-tools { flex-wrap: nowrap; }
  .picker .pk-search { flex: 1 1 auto; }
}