/* Page 46 (PICK YOUR PRACTICE ARENA): the phone mockups, the practice strip, the three pickers and the page's own pieces.
   On ../kit.css + fbkit.css + 40_fx.css (the page chrome shared by pages 40-42). Inside a phone 1 CSS px = 1 point of an
   iPhone 16 in landscape (852 x 393); the design layer is scaled to the frame. */

/* ================================================================== the phone */
.pp-dev { position: relative; border: 4px solid var(--ink); border-radius: 30px; padding: 10px; background: linear-gradient(160deg, #3B3550, #17141F 55%, #0B0A10); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 4px 9px 0 var(--ink); }
.pp-dev--sm { border-radius: 22px; padding: 7px; border-width: 3px; box-shadow: 3px 6px 0 var(--ink); }
.pp-dev--sm .pp-scr { border-radius: 15px; }
.pp-scr { position: relative; overflow: hidden; border-radius: 21px; background: #05040A; aspect-ratio: 852 / 393; isolation: isolate; }
.pp-dsn { position: absolute; left: 0; top: 0; width: 852px; height: 393px; transform-origin: 0 0; overflow: hidden; font-family: var(--f-body); -webkit-user-select: none; user-select: none; }
.pp-world { position: absolute; left: 0; top: 0; width: 852px; height: 393px; display: block; }
.pp-ctrl { position: absolute; left: 0; top: 0; width: 852px; height: 393px; pointer-events: none; transition: opacity 0.3s, transform 0.4s var(--out); }
.pp-wipe { position: absolute; left: 0; top: 0; width: 852px; height: 393px; z-index: 1; pointer-events: none; }
.pp-dsn.is-noctl .pp-ctrl { opacity: 0; transform: translateY(40px); }
.pp-dim { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.28s;
  background: radial-gradient(rgba(0, 0, 0, 0.5) 1.6px, transparent 2.1px) 0 0 / 8px 8px, rgba(8, 6, 18, 0.5); }
.pp-dim.is-on { opacity: 1; pointer-events: auto; }
.pp-hud > * { position: absolute; z-index: 2; }
.pp-ovl { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pp-ovl > * { pointer-events: auto; }
.pp-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

/* the HUD bits around the strip (as in a real practice match) */
.pp-pause { left: 77px; top: 15px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 3px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, #4D4675, #3A3458 52%, #2A2640); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.16), 2px 4px 0 var(--ink); }
.pp-pause i { width: 6.5px; height: 17px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.pp-zoom { left: 686px; top: 15px; display: flex; gap: 4px; }
.pp-zoom i { width: 44px; height: 44px; display: grid; place-items: center; font: 400 30px/1 var(--f-display); font-style: normal; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; border: 3px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, #4D4675, #3A3458 52%, #2A2640); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.16), 2px 4px 0 var(--ink); }
.pp-hp { left: 128px; top: 79px; width: 156px; height: 20px; display: flex; align-items: center; gap: 6px; padding: 0 7px; border-radius: 10px; background: rgba(13, 11, 22, 0.62); }
.pp-hp .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 1.6px var(--ink); overflow: hidden; }
.pp-hp .bar u { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, #8DF0B4, #3DD07A); }
.pp-hp b { font: 400 14px/1 var(--f-display); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pp-spell { left: 135px; top: 101px; width: 112px; height: 3.5px; border-radius: 2px; background: rgba(0, 0, 0, 0.45); }
.pp-spell u { display: block; width: 38%; height: 100%; border-radius: 2px; background: #FFD23F; box-shadow: 0 0 6px rgba(255, 210, 63, 0.9); }
.pp-kos { left: 426px; top: 80px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 8px; background: rgba(13, 11, 22, 0.66); font: 800 12.5px/1 var(--f-body); letter-spacing: 0.07em; color: var(--cream); white-space: nowrap; }
.pp-kos i { font-style: normal; opacity: 0.7; }
.pp-kos em { font: 400 16px/1 var(--f-display); font-style: normal; color: var(--yellow); -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }

/* ------------------------------------------------------------------ the practice strip (ReskinPractice.cs .sr-pstrip) */
.pp-strip { z-index: 4 !important; top: 8px; left: 130px; transform: scale(var(--k, 1)); transform-origin: 0 0; pointer-events: auto; }
.pp-row { display: flex; gap: 6px; padding: 5px; border: 3px solid var(--ink); border-radius: 14px; background: linear-gradient(180deg, rgba(58, 52, 88, 0.95), rgba(44, 40, 70, 0.95) 50%, rgba(30, 27, 43, 0.95)); box-shadow: 2px 4px 0 var(--ink); width: max-content; }
.pp-pb { position: relative; display: grid; align-content: center; justify-items: start; row-gap: 3px; height: 44px; padding: 0 10px; margin: 0; cursor: pointer; text-align: left; font: inherit; border: 2.5px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, #4D4675, #433D60 50%, #3A3458); box-shadow: 1px 3px 0 var(--ink); transition: transform 0.1s var(--out), box-shadow 0.1s, background 0.2s; }
.pp-pb small { font: 800 12.5px/1 var(--f-body); letter-spacing: 0.06em; color: rgba(255, 246, 224, 0.78); white-space: nowrap; }
.pp-pb .v { display: flex; align-items: center; gap: 5px; font: 400 15px/1 var(--f-display); letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.pp-pb--w { grid-template-columns: 58px auto; column-gap: 8px; padding-left: 6px; }
.pp-well { grid-row: 1 / 3; width: 58px; height: 32px; border-radius: 7px; border: 2px solid var(--ink); overflow: hidden; display: block; }
.pp-well canvas { width: 100%; height: 100%; display: block; }
.pp-boti { width: 18px; height: 18px; display: inline-block; -webkit-text-stroke: 0; }
.pp-boti svg { width: 100%; height: 100%; display: block; }
.pp-pb--try { background: linear-gradient(180deg, #8AB6FF, #2F7BFF 60%, #1C52C4); }
.pp-pb--try small { color: rgba(255, 255, 255, 0.85); }
.pp-pb.is-lit { background: linear-gradient(180deg, #FFE98C, #FFD23F 55%, #F4AE00); }
.pp-pb.is-lit small { color: rgba(29, 27, 36, 0.7); }
.pp-pb.is-lit .v { color: var(--ink); -webkit-text-stroke: 0; }
.pp-pb.is-lit .pp-chev svg path { stroke: var(--ink); }
.pp-pb.is-press { transform: translate(1px, 2px); box-shadow: 0 1px 0 var(--ink); }
.pp-awell { display: none; grid-row: 1 / 3; width: 50px; height: 32px; border-radius: 7px; border: 2px solid var(--ink); overflow: hidden; }
.pp-awell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-pb--a.has-well { grid-template-columns: 50px auto; column-gap: 8px; padding-left: 6px; }
.pp-pb--a.has-well .pp-awell { display: block; }
.pp-chev { width: 14px; height: 14px; display: inline-block; flex: none; -webkit-text-stroke: 0; }
.pp-chev svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pp-pb--a.is-caret .pp-chev { width: 15px; height: 15px; }
.pp-an { position: relative; display: inline-grid; overflow: hidden; height: 17px; padding: 0 1px; align-items: center; }
.pp-an > span { grid-area: 1 / 1; display: block; line-height: 17px; }
.pp-an > span.in { animation: pp-in 0.42s var(--spring) both; }
.pp-an > span.out { animation: pp-out 0.3s ease-in both; }
@keyframes pp-in { from { transform: translateY(105%); } to { transform: none; } }
@keyframes pp-out { to { transform: translateY(-110%); } }
.pp-pb.is-flash::after { content: ""; position: absolute; inset: -5px; border-radius: 13px; border: 3px solid var(--yellow); animation: pp-flash 0.7s ease-out both; pointer-events: none; }
@keyframes pp-flash { from { opacity: 1; transform: scale(0.94); } to { opacity: 0; transform: scale(1.12); } }
.pp-kept { position: absolute; left: 50%; margin-left: -18px; top: -11px; padding: 2px 5px 1px; border-radius: 6px; border: 2px solid var(--ink); background: #7CFFA3; color: var(--ink); font: 400 10px/1 var(--f-display); letter-spacing: 0.06em; -webkit-text-stroke: 0; opacity: 0; transform: scale(0.3) rotate(-10deg); transition: opacity 0.2s, transform 0.3s var(--spring); pointer-events: none; }
.pp-kept.is-on { opacity: 1; transform: rotate(6deg); }

/* ------------------------------------------------------------------ the finger */
.pp-finger { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 9; opacity: 0; transition-property: transform; pointer-events: none; }
.pp-finger.is-on { opacity: 1; }
.pp-finger i { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.25)); border: 3px solid rgba(29, 27, 36, 0.75); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); transition: transform 0.12s var(--out), opacity 0.2s; }
.pp-finger.is-down i { transform: scale(0.78); }
.pp-ripple { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 8; pointer-events: none; }
.pp-ripple::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.9); animation: pp-rip 0.55s ease-out both; }
@keyframes pp-rip { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

/* ------------------------------------------------------------------ arrivals: the wipe's name card, the drop's banner */
.pp-card { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 4px; padding: 12px 26px 14px; translate: -50% -50%; border: 4px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, #FFE98C, #FFD23F 55%, #F4AE00); box-shadow: 4px 7px 0 var(--ink); transform: scale(1.7) rotate(-9deg); opacity: 0; transition: transform 0.38s var(--spring), opacity 0.16s; }
.pp-card.is-in { opacity: 1; transform: scale(1) rotate(-3deg); }
.pp-card.is-out { opacity: 0; transform: scale(0.7) rotate(4deg) translateX(140px); transition: transform 0.36s ease-in, opacity 0.32s; }
.pp-card small { font: 800 11px/1 var(--f-body); letter-spacing: 0.2em; color: rgba(29, 27, 36, 0.7); }
.pp-card b { font: 400 40px/1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
.pp-card em { font: 700 12.5px/1.2 var(--f-body); font-style: normal; color: var(--ink); white-space: nowrap; }
.pp-banner { position: absolute; left: 50%; top: 118px; display: grid; justify-items: center; gap: 5px; translate: -50% 0; transform: translateY(-190px); opacity: 0; transition: transform 0.5s var(--spring), opacity 0.2s; }
.pp-banner.is-in { transform: none; opacity: 1; }
.pp-banner.is-fly { transform: translate(var(--tx), var(--ty)) scale(0.18); opacity: 0; transition: transform 0.42s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.42s ease-in; }
.pp-banner b { padding: 7px 18px 6px; border: 3.5px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, #FFE98C, #FFD23F 55%, #F4AE00); font: 400 27px/1 var(--f-display); letter-spacing: 0.03em; color: var(--ink); box-shadow: 3px 5px 0 var(--ink); white-space: nowrap; rotate: -2deg; }
.pp-banner small { padding: 4px 10px; border-radius: 8px; background: rgba(13, 11, 22, 0.8); font: 700 12px/1 var(--f-body); letter-spacing: 0.03em; color: var(--cream); white-space: nowrap; }

/* ================================================================== A · DROP SHEET (RsPickerCard: under the strip, 720 wide) */
.pk-sheet { position: absolute; inset: 0; pointer-events: none; }
.pk-card { position: absolute; left: 66px; top: 86px; width: 720px; height: 297px; pointer-events: auto; border: 3px solid var(--ink); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, #3A3458, #2A2640 55%, #1E1B2B); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 3px 6px 0 var(--ink);
  transform: translateY(-34px) scale(0.55); opacity: 0; transition: transform 0.4s var(--spring), opacity 0.16s; }
.pk-sheet.is-in .pk-card { transform: none; opacity: 1; }
.pk-sheet.is-centered .pk-card { top: 56px; }
.pk-sheet.is-out .pk-card { transform: translateY(-40px) scale(0.5); opacity: 0; transition: transform 0.26s cubic-bezier(0.5, 0, 0.8, 0.3), opacity 0.22s 0.04s; }
.pk-title { position: absolute; z-index: 3; left: 50%; top: -19px; translate: -50% 0; display: inline-flex; align-items: center; height: 36px; padding: 0 18px; font: 400 21px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); border: 3px solid var(--ink); border-radius: 11px; box-shadow: 2px 4px 0 var(--ink); white-space: nowrap; transform: scale(0.4) rotate(-6deg); transition: transform 0.4s 0.08s var(--spring); }
.pk-sheet.is-in .pk-title { transform: rotate(-1.5deg); }
.pk-x { position: absolute; z-index: 3; right: -14px; top: -16px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; cursor: pointer; border: 3px solid var(--ink); border-radius: 50%; background: linear-gradient(180deg, #FF8A8A, #E8414F); box-shadow: 1px 3px 0 var(--ink); }
.pk-x svg { width: 20px; height: 20px; display: block; }
.pk-body { position: absolute; left: 14px; right: 14px; top: 25px; bottom: 12px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.pk-tabs { display: flex; align-items: center; gap: 6px; height: 38px; padding-bottom: 4px; min-width: 0; }
.pk-tab { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 9px; cursor: pointer; font: 400 15px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; border: 2.5px solid var(--ink); border-radius: 9px; background: linear-gradient(180deg, var(--panel-3), var(--panel)); box-shadow: 2px 3px 0 var(--ink); }
.pk-tab span { -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pk-tab small { font: 800 12px/1 var(--f-body); color: var(--cream-3); }
.pk-tab.is-on { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); }
.pk-tab.is-on span { -webkit-text-stroke: 0; }
.pk-tab.is-on small { color: rgba(29, 27, 36, 0.6); }
.pk-tab.is-ult.is-on { background: linear-gradient(180deg, #FFE7A0, #FFB21F 55%, #E08A00); }
.pk-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pk-rlbl { display: inline-flex; align-items: center; gap: 4px; font: 800 0px/1 var(--f-body); color: transparent; }
.pk-rlbl svg { width: 18px; height: 18px; }
.pk-rc { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px 0 3px; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 9px; background: linear-gradient(180deg, #4D4675, #3A3458); box-shadow: 1px 3px 0 var(--ink); max-width: 140px; min-width: 0; }
.pk-rc img { width: 34px; height: 21px; object-fit: cover; border-radius: 5px; border: 2px solid var(--ink); flex: none; }
.pk-rc b { font: 400 11px/1 var(--f-display); letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-dice { flex: none; width: 38px; height: 32px; padding: 0; display: grid; place-items: center; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 9px; background: linear-gradient(180deg, #C9A2FF, #8E5BE8 60%, #6A3CC8); box-shadow: 2px 3px 0 var(--ink); }
.pk-dice svg { width: 25px; height: 25px; display: block; }
.pk-dice.is-roll svg, .pk-rand.is-roll .pk-pic i { animation: pk-roll 0.9s var(--out); }
@keyframes pk-roll { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-200deg) scale(1.3); } 100% { transform: rotate(-360deg) scale(1); } }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 94px; gap: 10px; align-content: start; }
.pk-grid.has-rand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pk-grid.has-rand .pk-rand { grid-row: span 2; }
.pk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 9px; }
.pk-tile { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 27px; padding: 0; cursor: pointer; text-align: center; font: inherit; color: inherit; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(180deg, var(--panel-3), var(--panel)); box-shadow: 2px 3px 0 var(--ink); overflow: visible; transition: transform 0.12s var(--out), box-shadow 0.15s; animation: pk-slam 0.34s var(--spring) backwards; animation-delay: calc(var(--i) * 18ms + 120ms); }
.no-stagger .pk-tile { animation-duration: 0.26s; animation-delay: calc(var(--i) * 12ms); }
@keyframes pk-slam { from { transform: translateY(-14px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.pk-pic { position: relative; display: block; overflow: hidden; border-radius: 9px 9px 0 0; border-bottom: 2.5px solid var(--ink); background: #0E1430; }
.pk-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-nm { display: grid; place-items: center; padding: 0 4px; font: 400 14px/1 var(--f-display); letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; }
.pk-grid--4 .pk-nm { font-size: 12.5px; }
.pk-tile:hover { transform: translateY(-2px); box-shadow: 2px 5px 0 var(--ink); }
.pk-tile:active, .pk-tile.is-pick { transform: translate(1px, 2px) scale(0.97); box-shadow: 0 1px 0 var(--ink); }
.pk-tile.is-pick { box-shadow: 0 1px 0 var(--ink), 0 0 0 3px #fff, 0 0 18px 6px rgba(255, 255, 255, 0.6); }
.pk-tile.is-hop { box-shadow: 2px 3px 0 var(--ink), 0 0 0 3px #C9A2FF, 0 0 16px 4px rgba(201, 162, 255, 0.7); transform: translateY(-3px) scale(1.03); }
.pk-tag { position: absolute; z-index: 2; left: 5px; top: 5px; display: inline-flex; align-items: center; height: 17px; padding: 0 5px; font: 400 11px/1 var(--f-display); letter-spacing: 0.05em; color: var(--ink); border: 2px solid var(--ink); border-radius: 5px; background: var(--yellow); white-space: nowrap; }
.pk-tag--ult { background: linear-gradient(180deg, #FFE7A0, #FFB21F); }
.pk-tag--big { background: #FF9ACB; }
.pk-tag--med { background: #8FEFFF; }
.pk-tag--on { left: auto; right: -7px; top: -9px; height: 20px; padding: 0 7px; font-size: 13px; background: var(--yellow); box-shadow: 1px 2px 0 var(--ink); transform: rotate(5deg); }
/* the current arena: A ring + glow (the picked weapon card's look), B a HERE pin, C dimmed PLAYING */
.pk-tile.is-on.mark-A { box-shadow: 2px 3px 0 var(--ink), 0 0 0 3px var(--yellow), 0 0 14px 3px rgba(255, 210, 63, 0.5); }
.pk-tile.is-on.mark-A .pk-nm { color: var(--yellow); }
.pk-here { position: absolute; z-index: 3; right: 4px; top: -24px; display: grid; justify-items: center; pointer-events: none; animation: pk-pin 1.4s ease-in-out infinite; }
.pk-here i { width: 24px; height: 32px; display: block; filter: drop-shadow(1px 3px 0 rgba(29, 27, 36, 0.8)); }
.pk-here i svg { width: 100%; height: 100%; display: block; }
.pk-here b { margin-top: -2px; padding: 1px 5px; border-radius: 5px; border: 2px solid var(--ink); background: #fff; font: 400 10px/1.1 var(--f-display); letter-spacing: 0.05em; color: var(--ink); }
@keyframes pk-pin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.pk-tile.is-on.mark-C { filter: grayscale(0.75) brightness(0.7); cursor: not-allowed; }
.pk-playing { position: absolute; z-index: 3; left: 50%; top: 40%; translate: -50% -50%; padding: 3px 8px 2px; border: 2.5px solid var(--ink); border-radius: 6px; background: #E8414F; font: 400 13px/1 var(--f-display); letter-spacing: 0.08em; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; transform: rotate(-8deg); white-space: nowrap; filter: none; }
.pk-tile.is-nope, .st-go.is-nope, .bd-ph.is-nope, .mp-n.is-nope { animation: pk-nope 0.36s; }
@keyframes pk-nope { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.pk-rtag { position: absolute; z-index: 2; right: 4px; bottom: 4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(13, 11, 22, 0.75); }
.pk-rtag svg { width: 18px; height: 18px; display: block; }
.pk-rand .pk-pic { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #6A5BC8, #2E2758 70%, #1E1A3A); }
.pk-rand .pk-pic i { width: 54px; height: 54px; display: block; filter: drop-shadow(2px 4px 0 rgba(29, 27, 36, 0.7)); }
.pk-rand .pk-pic i svg { width: 100%; height: 100%; display: block; }
/* A2 ONE LIST */
.pk-tabs--list { justify-content: space-between; }
.pk-tabs--list .pk-rc { max-width: 170px; }
.pk-ltitle { font: 400 15px/1 var(--f-display); letter-spacing: 0.05em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pk-scroll { position: relative; overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 4px 8px 6px 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 246, 224, 0.4) transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }
.pk-list { display: grid; gap: 8px; }
.pk-gh { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.pk-gh b { font: 400 15px/1 var(--f-display); letter-spacing: 0.06em; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pk-gh small { font: 800 12px/1 var(--f-body); color: var(--cream-3); }
/* the PICK A WEAPON sheet (compare) */
.pk-tabs--w { gap: 5px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
.pk-tabs--w .pk-tab { padding: 0 10px; }
.pk-wgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 88px; gap: 9px; }
.pk-wc { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 28px; padding: 0; cursor: pointer; font: inherit; color: inherit; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(180deg, var(--panel-3), var(--panel)); box-shadow: 2px 3px 0 var(--ink); overflow: hidden; animation: pk-slam 0.34s var(--spring) backwards; animation-delay: calc(var(--i) * 14ms + 100ms); }
.pk-wart { position: relative; display: block; border-bottom: 2.5px solid var(--ink); background: radial-gradient(90% 100% at 50% 70%, var(--wbg), color-mix(in srgb, var(--wbg) 30%, #1E1B2B) 90%); }
.pk-wart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(1px 2px 0 rgba(20, 16, 34, 0.5)); }
.pk-wc .pk-nm { font-size: 12.5px; }
.pk-wc.is-on { box-shadow: 2px 3px 0 var(--ink), 0 0 0 3px var(--yellow), 0 0 14px 3px rgba(255, 210, 63, 0.5); overflow: visible; }
.pk-wc.is-on .pk-nm { color: var(--yellow); }
.pk-wc.is-on .pk-wart { border-radius: 9px 9px 0 0; }

/* ================================================================== B · MAP BOARD (full screen) */
.bd { position: absolute; inset: 0; overflow: hidden; z-index: 7; transform: scale(0.06); opacity: 0; border-radius: 40px; transition: transform 0.5s var(--spring), opacity 0.2s, border-radius 0.5s; }
.bd.is-in { transform: none; opacity: 1; border-radius: 0; }
.bd.is-out { transform: scale(0.08); opacity: 0; transition: transform 0.32s cubic-bezier(0.5, 0, 0.8, 0.3), opacity 0.28s 0.04s; }
.bd-cork { position: absolute; inset: 0; background:
  radial-gradient(rgba(60, 30, 10, 0.35) 1px, transparent 1.6px) 0 0 / 7px 7px,
  radial-gradient(rgba(255, 220, 170, 0.12) 1px, transparent 1.8px) 3px 4px / 9px 9px,
  radial-gradient(120% 90% at 50% 10%, #B07A48, #8A5A32 55%, #4E3018); box-shadow: inset 0 0 0 9px #4A2E18, inset 0 0 0 12px var(--ink), inset 0 0 90px 30px rgba(10, 6, 30, 0.75); }
.bd-lamp { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 70% at 50% 0%, rgba(255, 226, 170, 0.25), transparent 70%); mix-blend-mode: screen; }
.bd-back { position: absolute; z-index: 5; left: 22px; top: 16px; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 13px 0 7px; cursor: pointer; font: 400 17px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(180deg, var(--panel-3), var(--panel)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 2px 4px 0 var(--ink); }
.bd-back svg { width: 24px; height: 24px; display: block; }
.bd-back span { -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; }
.bd-note { position: absolute; z-index: 4; left: 50%; top: 10px; translate: -50% 0; display: grid; justify-items: center; padding: 9px 22px 7px; background: #FFF6E0; box-shadow: 2px 4px 0 rgba(29, 27, 36, 0.5); transform: rotate(-2deg); clip-path: polygon(0 4%, 6% 0, 14% 5%, 24% 1%, 36% 4%, 48% 0, 60% 4%, 72% 1%, 84% 5%, 94% 1%, 100% 4%, 100% 100%, 0 100%); }
.bd-note b { font: 400 24px/1 var(--f-display); letter-spacing: 0.03em; color: var(--ink); }
.bd-note small { font: 800 10px/1.4 var(--f-body); letter-spacing: 0.14em; color: #8A5A32; }
.bd-pin { position: absolute; z-index: 3; left: 50%; top: -6px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--pin, #FF3352) 18%); border: 2px solid var(--ink); box-shadow: 2px 3px 0 rgba(29, 27, 36, 0.55); }
.bd-tape { position: absolute; z-index: 3; top: 62px; translate: -50% 0; padding: 5px 16px 4px; background: rgba(255, 246, 224, 0.88); font: 400 15px/1 var(--f-display); letter-spacing: 0.08em; color: var(--ink); transform: rotate(-3deg); box-shadow: 1px 2px 0 rgba(29, 27, 36, 0.35); clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 3% 94%, 0 50%); }
.bd-tape.is-gold { background: linear-gradient(180deg, #FFE7A0, #FFB21F); }
.bd-ph { position: absolute; z-index: 2; width: 112px; height: 84px; padding: 5px 5px 0; cursor: pointer; display: grid; grid-template-rows: 56px auto; border: 0; background: #FDFBF4; box-shadow: 2px 5px 0 rgba(29, 27, 36, 0.55), 0 0 0 1.5px rgba(29, 27, 36, 0.5); transform: rotate(var(--r)); transition: transform 0.18s var(--out), box-shadow 0.18s; animation: bd-pin 0.4s var(--spring) backwards; animation-delay: calc(var(--i) * 22ms + 260ms); }
@keyframes bd-pin { from { transform: rotate(calc(var(--r) * -2)) translateY(-26px) scale(1.15); opacity: 0; } to { transform: rotate(var(--r)); opacity: 1; } }
.bd-ph:hover { transform: rotate(0deg) scale(1.07); z-index: 4; box-shadow: 4px 9px 0 rgba(29, 27, 36, 0.5), 0 0 0 1.5px rgba(29, 27, 36, 0.5); }
.bd-img { position: relative; overflow: hidden; border: 1.5px solid rgba(29, 27, 36, 0.6); background: #0E1430; }
.bd-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-ph > b { display: grid; place-items: center; font: 400 11px/1 var(--f-display); letter-spacing: 0.02em; color: #2A2640; white-space: nowrap; }
.bd-circle { position: absolute; z-index: 3; left: -14px; top: -12px; width: 140px; height: 110px; pointer-events: none; stroke-dasharray: 420; animation: bd-draw 0.8s 0.6s ease-out both; }
@keyframes bd-draw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
.bd-scrawl { position: absolute; z-index: 3; left: -16px; top: -18px; font: 400 15px/1 var(--f-display); color: #FF3352; transform: rotate(14deg); text-shadow: 1px 1px 0 #fff; animation: pk-slam 0.3s 1.2s both; }
.bd-ph.is-on.mark-C { filter: grayscale(0.7) brightness(0.75); }
.bd-ph .pk-here { right: -8px; top: -30px; }
.bd-ph .pk-playing { top: 42%; }
.bd-sticky { position: absolute; z-index: 3; right: -8px; bottom: 6px; width: 24px; height: 24px; display: grid; place-items: center; background: #FFE98C; box-shadow: 1px 2px 0 rgba(29, 27, 36, 0.4); transform: rotate(-8deg); }
.bd-sticky svg { width: 17px; height: 17px; display: block; }
.bd-ph.is-hop, .mp-n.is-hop { transform: rotate(0) scale(1.12) !important; z-index: 6; box-shadow: 0 0 0 4px #C9A2FF, 0 0 22px 8px rgba(201, 162, 255, 0.8) !important; }
.bd-ph.is-pick { transform: rotate(0) scale(1.18) translateY(-6px) !important; z-index: 6; box-shadow: 6px 14px 0 rgba(29, 27, 36, 0.45) !important; }
.bd-ph.is-pick .bd-pin { animation: bd-popin 0.4s ease-in both; }
@keyframes bd-popin { to { transform: translate(18px, -60px) rotate(220deg); opacity: 0; } }
.bd-dice { position: absolute; z-index: 3; right: 24px; top: 16px; width: 108px; height: 46px; display: flex; align-items: center; gap: 6px; padding: 4px 8px 0; cursor: pointer; border: 0; background: #E8DCFF; box-shadow: 2px 4px 0 rgba(29, 27, 36, 0.5); transform: rotate(3deg); }
.bd-dice i { width: 28px; height: 28px; display: block; flex: none; }
.bd-dice i svg { width: 100%; height: 100%; display: block; }
.bd-dice b { font: 400 11px/1.05 var(--f-display); letter-spacing: 0.04em; color: var(--ink); text-align: left; }
.bd-dice .bd-pin { left: 12px; top: -7px; }
.bd-zoom { position: absolute; z-index: 9; left: 0; top: 0; width: 852px; height: 393px; overflow: hidden; transform: translate(var(--x), var(--y)) scale(var(--s)); border: 5px solid #fff; transition: transform 0.46s cubic-bezier(0.6, 0, 0.2, 1), border-width 0.46s, opacity 0.32s; }
.bd-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-zoom.is-go { transform: none; border-width: 0; }
.bd-zoom.is-fade { opacity: 0; }
/* B2 WORLD MAP */
.mp-sea { position: absolute; inset: 0; background: radial-gradient(rgba(140, 180, 255, 0.12) 1.2px, transparent 1.8px) 0 0 / 14px 14px, radial-gradient(90% 80% at 50% 40%, #1C3C8A, #0F2260 60%, #081236); }
.mp-svg { position: absolute; inset: 0; width: 852px; height: 393px; }
.mp-lbl { position: absolute; z-index: 3; top: 52px; translate: -50% 0; padding: 4px 11px 3px; border: 2.5px solid var(--ink); border-radius: 8px; background: #FFF6E0; font: 400 13px/1 var(--f-display); letter-spacing: 0.08em; color: var(--ink); box-shadow: 1px 3px 0 var(--ink); white-space: nowrap; }
.mp-lbl.is-gold { background: linear-gradient(180deg, #FFE7A0, #FFB21F); }
.mp-title { position: absolute; z-index: 4; left: 50%; top: 10px; translate: -50% 0; display: grid; justify-items: center; gap: 2px; }
.mp-title b { font: 400 25px/1 var(--f-display); letter-spacing: 0.04em; color: var(--yellow); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.mp-title small { font: 800 10px/1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-2); }
.mp-dice { position: absolute; z-index: 4; right: 20px; top: 14px; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px 0 6px; cursor: pointer; border: 3px solid var(--ink); border-radius: 11px; background: linear-gradient(180deg, #C9A2FF, #8E5BE8 60%, #6A3CC8); box-shadow: 2px 4px 0 var(--ink); }
.mp-dice i { width: 26px; height: 26px; display: block; } .mp-dice i svg { width: 100%; height: 100%; display: block; }
.mp-dice b { font: 400 14px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.mp-n { position: absolute; z-index: 2; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.15s var(--out); animation: mp-pop 0.4s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 1ms + 300ms); }
@keyframes mp-pop { from { transform: scale(0); } to { transform: none; } }
.mp-img { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 0 0 3px #FFF6E0, 2px 4px 0 3px var(--ink); background: #0E1430; }
.mp-n.is-ult .mp-img { box-shadow: 0 0 0 3px #FFB21F, 2px 4px 0 3px var(--ink), 0 0 16px 4px rgba(255, 178, 31, 0.5); }
.mp-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.5); }
.mp-n > b { position: absolute; left: 50%; top: 27px; translate: -50% 0; padding: 2px 5px 1px; border-radius: 5px; background: rgba(13, 11, 22, 0.82); font: 400 9.5px/1.1 var(--f-display); letter-spacing: 0.03em; color: #fff; white-space: nowrap; }
.mp-n:hover { transform: scale(1.12); z-index: 5; }
.mp-n.is-on.mark-A .mp-img { box-shadow: 0 0 0 3px var(--yellow), 2px 4px 0 3px var(--ink), 0 0 18px 6px rgba(255, 210, 63, 0.6); }
.mp-n.is-on.mark-C .mp-img { filter: grayscale(0.7) brightness(0.7); }
.mp-n .pk-playing { top: 0; font-size: 10px; }
.mp-rec { position: absolute; left: 14px; top: -30px; width: 20px; height: 20px; } .mp-rec svg { width: 100%; height: 100%; display: block; }
.mp-n.is-pick .mp-img { transform: scale(1.3); }
.mp-token { position: absolute; z-index: 6; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transition: transform 0.13s cubic-bezier(0.3, 0, 0.4, 1); }
.mp-token i { position: absolute; left: -14px; top: -16px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 36% 32%, #9CC2FF, #2F7BFF 60%); box-shadow: 1px 3px 0 var(--ink); animation: mp-bob 1s ease-in-out infinite; }
.mp-token i::after { content: ""; position: absolute; left: -3px; right: -3px; top: 5px; height: 6px; background: #E8343B; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.mp-token.is-hop i { animation: mp-hop 0.13s ease-out; }
@keyframes mp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes mp-hop { 0% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-16px) scale(0.9, 1.1); } 100% { transform: translateY(0) scale(1.1, 0.9); } }
.mp-token.is-land i { animation: mp-land 0.3s var(--spring); }
@keyframes mp-land { 0% { transform: scale(1.4, 0.6); } 100% { transform: none; } }

/* ================================================================== C · PREVIEW STRIP */
.st { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.st > * { pointer-events: auto; }
.st::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 40%, transparent 50%, rgba(5, 4, 16, 0.55)), linear-gradient(0deg, rgba(5, 4, 16, 0.8), transparent 45%); opacity: 0; transition: opacity 0.3s; }
.st.is-in::before { opacity: 1; }
.st-tray { position: absolute; left: 0; right: 0; bottom: 0; height: 126px; transform: translateY(140px); transition: transform 0.42s var(--spring); touch-action: pan-y; cursor: grab; }
.st.is-in .st-tray { transform: none; }
.st.is-out .st-tray { transform: translateY(150px); transition: transform 0.28s ease-in; }
.st-rail { position: absolute; left: 0; top: 14px; height: 104px; width: 852px; }
.st-t { position: absolute; left: 0; top: 0; width: 120px; display: grid; grid-template-rows: 68px 22px; padding: 0; cursor: pointer; font: inherit; border: 3px solid var(--ink); border-radius: 11px; background: linear-gradient(180deg, var(--panel-3), var(--panel)); box-shadow: 2px 3px 0 var(--ink); transform-origin: 50% 100%; will-change: transform; }
.st-img { position: relative; overflow: hidden; border-radius: 8px 8px 0 0; border-bottom: 2.5px solid var(--ink); background: #0E1430; }
.st-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-t > b { display: grid; place-items: center; font: 400 11.5px/1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; padding: 0 3px; }
.st-t.is-focus { box-shadow: 2px 3px 0 var(--ink), 0 0 0 3px #fff; }
.st-t.is-focus > b { color: var(--yellow); }
.st-t.is-cur.mark-A { box-shadow: 2px 3px 0 var(--ink), 0 0 0 3px var(--yellow), 0 0 14px 3px rgba(255, 210, 63, 0.5); }
.st-t.is-cur.mark-C .st-img { filter: grayscale(0.7) brightness(0.7); }
.st-t .pk-tag--on { right: -6px; top: -8px; font-size: 11px; height: 17px; }
.st-t--rand .st-img { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #6A5BC8, #2E2758 70%, #1E1A3A); }
.st-t--rand .st-img i { width: 42px; height: 42px; display: block; } .st-t--rand .st-img i svg { width: 100%; height: 100%; display: block; }
.st-div { position: absolute; left: -12px; top: -20px; padding: 2px 6px 1px; border: 2px solid var(--ink); border-radius: 5px; background: #FFF6E0; font: 400 10px/1 var(--f-display); letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; transform: rotate(-4deg); }
.st-div.is-gold { background: linear-gradient(180deg, #FFE7A0, #FFB21F); }
.st-rec { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; } .st-rec svg { width: 100%; height: 100%; display: block; }
.st-frame { position: absolute; left: 50%; top: 4px; width: 148px; height: 118px; margin-left: -74px; pointer-events: none; border: 3px dashed rgba(255, 210, 63, 0.0); }
.st-arr { position: absolute; z-index: 6; top: 32px; width: 34px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer; border: 3px solid var(--ink); border-radius: 11px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 55%, var(--yellow-lo)); box-shadow: 2px 3px 0 var(--ink); }
.st-arr svg { width: 18px; height: 18px; display: block; } .st-arr svg path { stroke: var(--ink); }
.st-arr--l { left: 34px; top: 22px; } .st-arr--l svg { transform: scaleX(-1); }
.st-arr--r { right: 34px; top: 22px; }
.st-info { position: absolute; left: 50%; top: 150px; translate: -50% 0; display: grid; justify-items: center; gap: 4px; text-align: center; opacity: 0; transition: opacity 0.25s 0.1s; }
.st.is-in .st-info { opacity: 1; }
.st.is-out .st-info, .st.is-out .st-go, .st.is-out .st-x { opacity: 0; transition: opacity 0.15s; }
.st-info.is-swap { animation: st-swap 0.3s var(--spring); }
@keyframes st-swap { from { transform: translateY(8px) scale(0.94); opacity: 0.4; } to { transform: none; opacity: 1; } }
.st-grp { font: 800 11px/1 var(--f-body); letter-spacing: 0.18em; color: var(--yellow); text-shadow: 0 1px 0 var(--ink); }
.st-name { font: 400 34px/1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
.st-line { font: 700 12.5px/1.2 var(--f-body); color: var(--cream); text-shadow: 0 1px 2px #000; white-space: nowrap; }
.st-go { position: absolute; z-index: 6; right: 64px; top: 156px; height: 56px; padding: 0 20px; cursor: pointer; border: 3.5px solid var(--ink); border-radius: 15px; background: linear-gradient(180deg, #7BEFA5, var(--green) 55%, #0F9442); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 3px 5px 0 var(--ink); transform: scale(0.4); opacity: 0; transition: transform 0.4s 0.12s var(--spring), opacity 0.2s 0.12s; }
.st.is-in .st-go { transform: rotate(-3deg); opacity: 1; }
.st-go b { font: 400 26px/1 var(--f-display); letter-spacing: 0.04em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.st-go.is-here { filter: grayscale(0.8) brightness(0.8); }
.st-go.is-press { transform: rotate(-3deg) translate(2px, 3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), 0 1px 0 var(--ink); }
.st-x { position: absolute; z-index: 6; right: 70px; top: 88px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; cursor: pointer; border: 3px solid var(--ink); border-radius: 50%; background: linear-gradient(180deg, #FF8A8A, #E8414F); box-shadow: 1px 3px 0 var(--ink); opacity: 0; transition: opacity 0.2s 0.2s; }
.st.is-in .st-x { opacity: 1; }
.st-x svg { width: 18px; height: 18px; display: block; }
.st--flow .st-rail { top: 8px; }
.st--flow .st-t { width: 168px; grid-template-rows: 88px 22px; }
.st--flow .st-tray { height: 140px; }
.st--flow .st-info { top: 128px; }
.st--flow .st-go { top: 134px; }
.st--flow .st-x { top: 70px; }
.st--flow .st-arr { top: 40px; }

@media (prefers-reduced-motion: reduce) {
  .pk-card, .pk-title, .bd, .bd-ph, .pk-tile, .pk-wc, .mp-n, .st-tray, .st-go, .pp-banner, .pp-card { transition: none !important; animation: none !important; }
  .bd-ph, .pk-tile { opacity: 1; }
}

/* the picked tile's picture flying into the ARENA button */
.pk-fly { position: absolute; z-index: 8; overflow: hidden; border: 3px solid #fff; border-radius: 9px; box-shadow: 0 0 0 3px var(--ink), 0 10px 24px rgba(0, 0, 0, 0.5); transform-origin: 50% 50%; transition: transform 0.5s cubic-bezier(0.55, 0, 0.25, 1), opacity 0.2s 0.42s; pointer-events: none; }
.pk-fly img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-fly.is-go { opacity: 0; }