/* Hearthstone Practice deck picker (src/menu/HeroPicker.ts). Layers come from hs-picker/ (local skin). */
.menu-screen.picker { position: absolute; inset: 0; overflow: hidden; padding: 0; background: #1b120b url(hs/table.webp) center / cover; }
.menu-screen.picker::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1100px 760px at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .62) 100%); }
.pk-wrap { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pk-layer { position: absolute; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.pk-photo { position: absolute; pointer-events: none; background-size: cover; background-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.pk-photo svg { width: 100%; height: 100%; display: block; }
.picker button { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
  color: inherit; font: inherit; cursor: pointer; overflow: visible; -webkit-tap-highlight-color: transparent; }
.picker button:focus { outline: none; }
.picker button:disabled { cursor: default; }
.pk-mode, .pk-opp-label, .pk-name, .pk-label, .pk-ai-name, .pk-play-label, .pk-back-label { position: absolute; margin: 0; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none; font-family: 'HS Belwe', Georgia, serif; font-weight: 400; line-height: 1; }
.pk-mode { font-size: 40px; color: #3a2610; text-shadow: 0 1px 0 rgba(255, 240, 200, .55); letter-spacing: .5px; }
.pk-opp-label { font-size: 40px; color: #f4e3b4; -webkit-text-stroke: 7px #1c1006; paint-order: stroke fill; letter-spacing: .5px; }
.pk-name { font-size: 44px; color: #fff4d8; -webkit-text-stroke: 7px #120b04; paint-order: stroke fill; }
.pk-label { font-size: 27px; color: #fff; -webkit-text-stroke: 6px #000; paint-order: stroke fill; }
.pk-ai-name { font-size: 31px; color: #fff; -webkit-text-stroke: 6px #000; paint-order: stroke fill; }
.pk-play-label { font-size: 46px; color: #ffe6a0; -webkit-text-stroke: 8px #2a1505; paint-order: stroke fill; transition: transform .08s; }
.pk-back-label { font-size: 30px; color: #fbeccc; -webkit-text-stroke: 6px #1a0f05; paint-order: stroke fill; }
.pk-power-cost { position: absolute; display: grid; place-items: center; pointer-events: none; font: 64px/1 'HS BelweNumbers', 'HS Belwe', serif; color: #fff; }
.pk-power-cost span { -webkit-text-stroke: 7px #000; paint-order: stroke fill; transform: translateY(.04em); }

/* hero buttons: lift on hover, green highlight when selected (HighlightGreenForLargeObjects) */
.pk-hero { transition: transform .12s cubic-bezier(.2, .8, .3, 1), filter .15s; }
.pk-hero:hover, .pk-hero:focus-visible { transform: translateY(-5px) scale(1.025); filter: brightness(1.08); }
.pk-hero:active { transform: translateY(1px) scale(.99); }
/* the highlight is drawn by a copy of the frame under the portrait, so it rings the outside only */
.pk-hero-glow { opacity: 0; transition: opacity .15s; filter: drop-shadow(0 0 7px #6dff4c) drop-shadow(0 0 18px rgba(90, 255, 80, .95)); }
.pk-hero.selected .pk-hero-glow { opacity: 1; }
.pk-hero:focus-visible:not(.selected) .pk-hero-glow { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 220, 120, .95)); }
.pk-label.long { font-size: 21px; -webkit-text-stroke-width: 5px; }

/* Play / Choose: additive swirl glow on hover, pressed nudge, dim when disabled */
.pk-play-glow { opacity: 0; mix-blend-mode: screen; transition: opacity .2s; }
.pk-play:not(:disabled):hover .pk-play-glow, .pk-play:not(:disabled):focus-visible .pk-play-glow { opacity: 1; animation: pkspin 7s linear infinite; }
.pk-play:not(:disabled):active .pk-play-stone, .pk-play:not(:disabled):active .pk-play-label { transform: translate(0, 3px); }
.pk-play:not(:disabled):active .pk-play-label { transform: translate(-50%, calc(-50% + 3px)); }
.pk-play:disabled .pk-play-stone { filter: grayscale(.55) brightness(.62); }
.pk-play:disabled .pk-play-label { color: #9a8a6c; -webkit-text-stroke-color: #120b04; }
@keyframes pkspin { to { transform: rotate(360deg); } }
.pk-back-glow { opacity: 0; mix-blend-mode: screen; transition: opacity .15s; }
.pk-back:hover .pk-back-glow, .pk-back:focus-visible .pk-back-glow { opacity: 1; }
.pk-back:hover .pk-back-label, .pk-back:focus-visible .pk-back-label { color: #fff; }
.pk-back:active { transform: translateY(2px); }

/* Choose Opponent tray */
.pk-opp[hidden] { display: none; }
.pk-opp { position: absolute; left: 0; top: 0; will-change: transform; }
.pk-ai-list { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; }
.pk-ai-list::-webkit-scrollbar { display: none; }
.pk-ai-scroll { position: relative; }
.pk-ai { transition: transform .1s; }
.pk-ai:hover img:not(.pk-ai-glow), .pk-ai:focus-visible img:not(.pk-ai-glow) { filter: brightness(1.15); }
.pk-ai:active { transform: translateY(2px); }
.pk-ai-glow { opacity: 0; mix-blend-mode: screen; transition: opacity .15s; }
.pk-ai.selected .pk-ai-glow { opacity: 1; }
.pk-ai.selected .pk-ai-name { color: #ffe9a6; }
.pk-levels { position: absolute; left: 6px; right: 6px; display: flex; gap: 8px; }
.picker .pk-level { position: relative; flex: 1; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(180deg, #4a2f15, #2a190b); box-shadow: inset 0 0 0 2px #8b6a39, inset 0 0 0 4px rgba(0, 0, 0, .55), 0 3px 6px rgba(0, 0, 0, .6);
  font: 400 23px/1 'HS Belwe', Georgia, serif; color: #e9dcc0; text-shadow: 0 2px 2px #000; }
.picker .pk-level.on { color: #ffe3a1; background: linear-gradient(180deg, #6b4719, #3a240c);
  box-shadow: inset 0 0 0 2px #ffd36b, inset 0 0 0 4px rgba(0, 0, 0, .45), 0 0 14px rgba(255, 200, 80, .55); }
.picker .pk-level:hover { filter: brightness(1.15); }

/* Play mode (online arena): DeckPickerTrayDisplay with m_tournamentTextures (Ranked) or m_friendlyTextures */
.picker.online .pk-tray-friendly, .picker.online.mode-friendly .pk-tray-ranked { visibility: hidden; }
.picker.online.mode-friendly .pk-tray-friendly { visibility: visible; }
.pk-switch-friendly, .mode-friendly .pk-switch-ranked { visibility: hidden; }
.mode-friendly .pk-switch-friendly { visibility: visible; }
.pk-switch { transition: transform .12s cubic-bezier(.2, .8, .3, 1); }
.pk-switch-glow { opacity: 0; mix-blend-mode: screen; transition: opacity .15s; filter: drop-shadow(0 0 10px #4aa8ff); }
.pk-switch:not(:disabled):hover .pk-switch-glow, .pk-switch:focus-visible .pk-switch-glow { opacity: 1; }
.pk-switch:not(:disabled):hover { transform: scale(1.06); }
.pk-switch:not(:disabled):active { transform: scale(.97); }
.pk-elo { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; pointer-events: none;
  font-family: 'HS Belwe', Georgia, serif; line-height: 1; white-space: nowrap; }
.pk-elo b { font-weight: 400; font-size: 54px; color: #ffe7a8; -webkit-text-stroke: 8px #240b03; paint-order: stroke fill; }
.pk-elo small { font-size: 25px; color: #f2d6a2; -webkit-text-stroke: 6px #240b03; paint-order: stroke fill; letter-spacing: 1px; }
.mode-friendly .pk-elo { display: none; }
.pk-wins { position: absolute; display: grid; place-items: center; }
.pk-wins-text { position: relative; font: 400 25px/1 'HS Belwe', Georgia, serif; color: #fff; -webkit-text-stroke: 6px #000; paint-order: stroke fill; white-space: nowrap; }
#online .picker .pk-code, .picker .pk-code { position: relative; min-height: 0; min-width: 0; user-select: text; display: none; width: 86%; height: 82%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none;
  text-align: center; font: 400 28px/1 'HS Belwe', Georgia, serif; letter-spacing: 6px; color: #fff; caret-color: #ffd36b; text-transform: uppercase; }
#online .picker .pk-code::placeholder, .picker .pk-code::placeholder { color: #c9b48f; letter-spacing: 1px; opacity: 1; }
.mode-friendly .pk-wins-text { display: none; }
#online .mode-friendly .pk-code, .mode-friendly .pk-code { display: block; }
.mode-friendly .pk-wins:focus-within img { filter: brightness(1.25) drop-shadow(0 0 8px rgba(255, 210, 110, .8)); }

/* account bar under the tray (Hearthstone keeps these on the BnetBar along the bottom edge) */
.pk-bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 calc(var(--bar) * .4); background: linear-gradient(180deg, rgba(8, 5, 2, .35), rgba(8, 5, 2, .88) 45%); box-shadow: 0 -1px 0 rgba(201, 161, 74, .35);
  font-family: 'HS Belwe', Georgia, serif; }
.pk-bar-user { display: flex; align-items: baseline; gap: calc(var(--bar) * .3); min-width: 0; overflow: hidden; white-space: nowrap; }
.pk-user { font-weight: 400; font-size: calc(var(--bar) * .4); color: #ffe9b8; -webkit-text-stroke: 4px #120a03; paint-order: stroke fill; }
.pk-conn { font: 500 calc(var(--bar) * .24)/1 Inter, system-ui, sans-serif; color: #b9c3a7; }
.pk-msg { font: 600 calc(var(--bar) * .25)/1 Inter, system-ui, sans-serif; color: #ff9f7f; overflow: hidden; text-overflow: ellipsis; }
.pk-bar-actions { display: flex; gap: calc(var(--bar) * .12); flex: none; }
.picker .pk-bar .hs-btn { --h: calc(var(--bar) * .8); position: relative; }

/* a stretched bracket button (UIBButton + MultiSliceElement) cut from the Back button art */
.picker .hs-btn { --h: 60px; position: absolute; display: flex; align-items: center; justify-content: center; height: var(--h); min-width: calc(var(--h) * 2.6);
  border-style: solid; border-width: 0 calc(var(--h) * .82); border-image: url(hs-picker/back.webp) 0 72 fill / 0 calc(var(--h) * .82) stretch;
  padding: 0 2px; font: 400 calc(var(--h) * .36)/1 'HS Belwe', Georgia, serif; color: #fbeccc; -webkit-text-stroke: calc(var(--h) * .07) #1a0f05; paint-order: stroke fill;
  white-space: nowrap; transition: filter .12s, transform .08s; }
.picker .hs-btn:not(:disabled):hover, .picker .hs-btn:focus-visible { filter: brightness(1.18) drop-shadow(0 0 calc(var(--h) * .15) rgba(255, 200, 90, .75)); color: #fff; }
.picker .hs-btn:not(:disabled):active { transform: translateY(2px); }
.picker .hs-btn:disabled { filter: grayscale(.6) brightness(.7); }

/* MatchingPopup3D */
.pk-mm-host { position: absolute; inset: 0; pointer-events: none; }
.mm-veil { position: absolute; inset: 0; pointer-events: auto; background: rgba(0, 0, 0, .28); animation: mmveil .3s ease-out; }
@keyframes mmveil { from { background: rgba(0, 0, 0, 0); } }
.mm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--mm-s)); transform-origin: 50% 50%; }
.mm-drum { position: absolute; overflow: hidden; }
.mm-name { position: absolute; left: 50%; top: 0; white-space: nowrap; font: 400 40px/1 'HS Belwe', Georgia, serif; color: #fff1d6;
  -webkit-text-stroke: 7px #2a0c03; paint-order: stroke fill; transform-origin: 50% 50%; will-change: transform; }
.mm-name.code { font-size: 66px; letter-spacing: 8px; color: #ffe38a; }
.mm-mblur { opacity: 0; }
.mm-title, .mm-tip, .mm-tab-label, .mm-tab-value { position: absolute; margin: 0; transform: translate(-50%, -50%); font-family: 'HS Belwe', Georgia, serif; font-weight: 400; line-height: 1.1; pointer-events: none; }
.mm-title { font-size: 46px; color: #3a2610; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); white-space: nowrap; }
.mm-tip { width: 1060px; text-align: center; font-size: 30px; color: #3b2a12; text-shadow: 0 1px 0 rgba(255, 240, 200, .45); }
.mm-tip[hidden], .mm-tab[hidden], .mm-room-actions[hidden] { display: none; }
.mm-tab { position: absolute; inset: 0; pointer-events: none; }
.mm-tab-label { font-size: 22px; color: #d9c6a0; white-space: nowrap; }
.mm-tab-value { font-size: 34px; color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; white-space: nowrap; }
.mm-room-actions { position: absolute; transform: translate(-50%, -50%); display: flex; gap: 18px; }
.picker .mm-room-actions .hs-btn { --h: 78px; position: relative; }
.picker .mm .mm-cancel { --h: 112px; transform: translate(-50%, -50%); min-width: 300px; }
.picker .mm .mm-cancel:not(:disabled):active { transform: translate(-50%, calc(-50% + 2px)); }

/* the online arena hosts the tray on a copy of the stage geometry */
#online.hs-lobby { overflow: hidden; padding: 0; background: #000; }
#online .hs-stage { position: fixed; transform-origin: 50% 50%; overflow: hidden; }
/* the picker draws its own focus states (hero glow, button glow), so the page-wide outline stays off */
#online .picker :focus-visible, .hs-skin .picker button:focus-visible { outline: none; }

/* hero power big card (History_HeroPower) shown while the power is hovered */
.pk-power-hit { position: absolute; border-radius: 50%; cursor: default; }
.pk-power-big { position: absolute; z-index: 6; pointer-events: none; will-change: transform; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .75)); }
.pk-power-big[hidden] { display: none; }
.pk-power-card { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pk-power-card .card { margin: 0; }