/* Pick & Pass - card-table draft screen (play.html). All classes are prefixed pl-. Dark, rich, card-game look. */
:root {
  --pl-bg0: #07080d; --pl-bg1: #0f1220; --pl-panel: #151a2b; --pl-panel2: #0f1322;
  --pl-line: #2c3350; --pl-gold: #e6c25a; --pl-gold2: #b8902c; --pl-text: #e9ecf4; --pl-dim: #8c95ad;
  --pl-green: #4ade80; --pl-amber: #fbbf24; --pl-red: #f87171; --pl-ease: cubic-bezier(.22,.8,.24,1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body.pl-body {
  margin: 0; color: var(--pl-text); font: 14px/1.4 "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(94, 62, 170, .32), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(20, 120, 140, .22), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(160, 110, 30, .18), transparent 60%),
    linear-gradient(180deg, var(--pl-bg1), var(--pl-bg0));
  background-attachment: fixed;
  display: flex; flex-direction: column; overflow: hidden;
}
button, select, input { font: inherit; color: inherit; }
b { font-weight: 800; }
.pl-dim { color: var(--pl-dim); }
.pl-mono { font-family: Consolas, monospace; font-size: 12px; }
.pl-grow { flex: 1; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.pl-hdr {
  display: flex; align-items: center; gap: 16px; padding: 10px 18px; flex: none;
  background: linear-gradient(180deg, rgba(30, 34, 56, .96), rgba(14, 16, 28, .96));
  border-bottom: 1px solid #3a3320; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); position: relative; z-index: 20; flex-wrap: wrap;
}
.pl-title { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: .5px; color: var(--pl-gold); text-shadow: 0 2px 0 #000, 0 0 18px rgba(230, 194, 90, .35); }
.pl-title i { font-style: normal; color: #fff; opacity: .85; }
.pl-progress { padding: 4px 14px; border-radius: 20px; background: rgba(0, 0, 0, .4); border: 1px solid var(--pl-line); }
.pl-ratings { display: flex; gap: 14px; color: var(--pl-dim); font-size: 13px; }
.pl-ratings b { color: var(--pl-text); }
.pl-nav { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .4); border: 1px solid var(--pl-line); }
.pl-navbtn { cursor: pointer; padding: 6px 16px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: #b9c4e6; font-weight: 800; letter-spacing: .04em; transition: .2s; }
.pl-navbtn:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.pl-navbtn.on { color: #2a1a02; background: linear-gradient(180deg, #f3d77c, #c59326); border-color: #fff0a8; }
.pl-link { color: #b9c4e6; text-decoration: none; padding: 6px 12px; border-radius: 8px; border: 1px solid transparent; transition: .2s; }
.pl-link:hover { color: #fff; border-color: var(--pl-line); background: rgba(255, 255, 255, .06); }
.pl-btn {
  display: inline-block; cursor: pointer; padding: 8px 16px; border-radius: 9px; font-weight: 700; text-decoration: none; color: var(--pl-text);
  background: linear-gradient(180deg, #2a3150, #1c2138); border: 1px solid #424a72; box-shadow: 0 2px 0 #0a0c16, inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .15s var(--pl-ease), filter .15s, box-shadow .15s;
}
.pl-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.18); }
.pl-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 0 0 #000; }
.pl-btn:disabled { opacity: .45; cursor: not-allowed; }
.pl-primary { background: linear-gradient(180deg, #3f8f5c, #256a40); border-color: #66c78a; color: #fff; }
.pl-gold { background: linear-gradient(180deg, #f3d77c, #c59326); border-color: #fff0a8; color: #2a1a02; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.pl-btn.pl-big { padding: 12px 26px; font-size: 16px; }
.pl-setmenu { position: relative; }
.pl-setmenu summary { list-style: none; cursor: pointer; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--pl-line); background: rgba(0, 0, 0, .35); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-setmenu summary::-webkit-details-marker { display: none; }
.pl-setmenu summary::after { content: " \25BE"; color: var(--pl-dim); }
.pl-setmenu[open] summary { border-color: var(--pl-gold); }
.pl-setpanel { position: absolute; right: 0; top: 44px; z-index: 40; width: 300px; padding: 14px; display: flex; flex-direction: column; gap: 8px; border-radius: 12px; background: #151a2d; border: 1px solid var(--pl-gold2); box-shadow: 0 14px 40px rgba(0, 0, 0, .7); }
.pl-setpanel label { font-size: 12px; color: var(--pl-dim); }
.pl-setpanel select, .pl-setpanel input { padding: 7px 9px; border-radius: 7px; background: #0b0e19; border: 1px solid var(--pl-line); }
.pl-setnotice { font-size: 12px; color: var(--pl-amber); }
.pl-msg { position: fixed; z-index: 100; left: 50%; top: 66px; transform: translateX(-50%); max-width: 80vw; padding: 10px 20px; border-radius: 10px; background: #5a1c24; border: 1px solid #f87171; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); font-weight: 600; }
.pl-msg.info { background: #1c3b2c; border-color: var(--pl-green); }

/* ---------- split layout ---------- */
.pl-main { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 14px 16px 16px; }
.pl-panel {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 31, 52, .92), rgba(13, 16, 29, .94));
  border: 1px solid #343a5c; box-shadow: 0 10px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: flex-grow .45s var(--pl-ease);
}
.pl-main[data-zoom="pack"] #pl-pack { flex-grow: 3; }
.pl-main[data-zoom="pack"] #pl-squad { flex-grow: 1; }
.pl-main[data-zoom="squad"] #pl-squad { flex-grow: 3; }
.pl-main[data-zoom="squad"] #pl-pack { flex-grow: 1; }
.pl-main.pl-done #pl-pack { display: none; }
.pl-main.pl-done #pl-squad { flex-grow: 1; }
.pl-phead { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex: none; border-bottom: 1px solid #2a3050; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)); min-height: 54px; flex-wrap: wrap; }
.pl-ptitle { display: flex; align-items: center; gap: 10px; flex: 1; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-gold); white-space: nowrap; min-width: 0; }
.pl-big { font-size: 20px; letter-spacing: .02em; }
.pl-chipx { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--pl-text); padding: 3px 10px; border-radius: 12px; background: rgba(0, 0, 0, .4); border: 1px solid var(--pl-line); }
.pl-zoom { cursor: pointer; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #c9d3f5; background: linear-gradient(180deg, #2a3150, #1a1f35); border: 1px solid #424a72; transition: .2s var(--pl-ease); flex: none; }
.pl-zoom:hover { color: #fff; border-color: var(--pl-gold); transform: scale(1.08); }
.pl-zoom.on { color: #2a1a02; background: linear-gradient(180deg, #f3d77c, #c59326); border-color: #fff0a8; }
.pl-pbody { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px; scrollbar-color: #424a72 transparent; scrollbar-width: thin; }
.pl-panel.pl-small .pl-pass, .pl-panel.pl-small .pl-stat.pl-dim { display: none; }
.pl-panel.pl-small .pl-ptitle { font-size: 12px; }
.pl-panel.pl-small .pl-big { font-size: 15px; }
.pl-panel.pl-small .pl-legend, .pl-panel.pl-small .pl-linkkey, .pl-panel.pl-small .pl-hint { display: none; }

/* ---------- zoom wrapper: cards are built at full size and scaled with CSS zoom ---------- */
.pl-z { zoom: var(--pl-s, 1); }
.pl-pitch .pl-z { zoom: var(--pl-ms, 1); }
.pl-bench .pl-z { zoom: var(--pl-bs, 1); }

/* ---------- pack ---------- */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, calc(190px * var(--pl-s, 1))); gap: 18px 14px; justify-content: center; }
.pl-pc { position: relative; width: calc(190px * var(--pl-s, 1)); cursor: pointer; }
.pl-deal .pl-pc { animation: pl-deal .55s var(--pl-ease) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes pl-deal { from { opacity: 0; transform: translateY(26px) rotate(-3deg) scale(.9); } to { opacity: 1; transform: none; } }
.pl-cardbox { position: relative; border-radius: 13px; transition: transform .22s var(--pl-ease), box-shadow .22s, filter .22s; }
.pl-pc:hover { z-index: 5; }
.pl-pc:hover .pl-cardbox { transform: translateY(-8px) scale(1.07); box-shadow: 0 18px 34px rgba(0, 0, 0, .65), 0 0 0 2px rgba(255, 255, 255, .22); }
.pl-pc.sel .pl-cardbox { transform: translateY(-10px) scale(1.07); box-shadow: 0 0 0 3px var(--pl-gold), 0 0 28px rgba(230, 194, 90, .75), 0 18px 34px rgba(0, 0, 0, .65); }
.pl-pickbtn {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9; cursor: pointer; padding: 9px 34px; border-radius: 10px; font-size: 17px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  color: #2a1a02; background: linear-gradient(180deg, #f8e18a, #d19a22); border: 2px solid #fff0a8; box-shadow: 0 6px 18px rgba(0, 0, 0, .7), 0 0 20px rgba(230, 194, 90, .7); animation: pl-pop .25s var(--pl-ease);
}
.pl-pickbtn:hover { filter: brightness(1.12); transform: translateX(-50%) scale(1.06); }
@keyframes pl-pop { from { opacity: 0; transform: translateX(-50%) scale(.7); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.pl-legend { margin: 22px auto 4px; max-width: 760px; font-size: 12px; color: var(--pl-dim); text-align: center; }
.pl-legend span { display: inline-block; vertical-align: middle; }
.pl-legend svg { width: 14px; height: 14px; }

/* ---------- squad ---------- */
.pl-sqctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-stat { padding: 3px 10px; border-radius: 12px; background: rgba(0, 0, 0, .4); border: 1px solid var(--pl-line); font-size: 12px; color: var(--pl-dim); }
.pl-stat b { color: #fff; font-size: 16px; }
.pl-stat small { color: var(--pl-dim); }
.pl-mgr { display: flex; align-items: center; gap: 4px; }
.pl-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pl-dim); }
.pl-field select, .pl-tactics select { padding: 5px 8px; border-radius: 7px; background: #0b0e19; border: 1px solid var(--pl-line); color: var(--pl-text); max-width: 190px; }
.pl-sqgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pl-sqgrid.two { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
.pl-sect { margin: 16px 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--pl-gold); border-bottom: 1px solid #2a3050; padding-bottom: 4px; }
.pl-sqa > .pl-pitchwrap + .pl-linkkey { margin-top: 6px; }
.pl-hint { font-size: 12px; color: var(--pl-dim); margin: 4px 0 8px; }
.pl-hint.armed { color: #1a1204; background: linear-gradient(90deg, #f3d77c, #e0b13c); padding: 7px 12px; border-radius: 8px; font-weight: 600; }
.pl-strength { font-size: 13px; margin-bottom: 8px; padding: 6px 12px; border-radius: 9px; background: rgba(0, 0, 0, .35); border: 1px solid var(--pl-line); }
.pl-boosts { margin: -4px 0 8px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pl-boost.on { color: #7bd88f; }
.pl-boost.off { color: var(--pl-dim, #aab); }
.pl-strength b { font-size: 17px; color: var(--pl-gold); }
.pl-gkbanner { margin-bottom: 8px; padding: 10px 14px; border-radius: 10px; background: #5a1c24; border: 2px solid var(--pl-red); font-weight: 800; animation: pl-flash 1.6s ease-in-out infinite; }
@keyframes pl-flash { 50% { box-shadow: 0 0 18px rgba(248, 113, 113, .8); } }
.pl-linkkey { font-size: 11px; color: var(--pl-dim); }
.pl-linkkey i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 8px; }

/* pitch */
.pl-pitchwrap { max-width: 600px; margin: 0 auto; }
.pl-pitch {
  position: relative; width: 100%; aspect-ratio: 68 / 78; border-radius: 14px; overflow: hidden;
  background: repeating-linear-gradient(180deg, #2f9148 0, #2f9148 8.333%, #277c3c 8.333%, #277c3c 16.667%);
  border: 3px solid #0e2a16; box-shadow: 0 10px 30px rgba(0, 0, 0, .6), inset 0 0 60px rgba(0, 0, 0, .45);
}
.pl-pitch.drop-over { box-shadow: 0 0 0 3px var(--pl-gold), 0 10px 30px rgba(0, 0, 0, .6); }
.pl-lines, .pl-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pl-slot { position: absolute; transform: translate(-50%, -50%); width: calc(76px * var(--pl-ms, 1)); z-index: 2; transition: filter .2s; }
.pl-bench .pl-slot { position: relative; transform: none; left: auto; top: auto; width: calc(76px * var(--pl-bs, 1)); z-index: auto; }
.pl-slot.filled { cursor: grab; }
.pl-slot.filled .pl-z { transition: transform .2s var(--pl-ease), filter .2s; }
.pl-slot.filled:hover .pl-z { transform: translateY(-5px) scale(1.1); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .7)); }
.pl-slot.filled:hover { z-index: 6; }
.pl-slot.armed .pl-z { outline: 3px solid var(--pl-gold); outline-offset: 2px; border-radius: 9px; animation: pl-pulse 1.1s ease-in-out infinite; }
.pl-slot.target.empty .pl-ph, .pl-slot.target.filled .pl-z { animation: pl-pulse 1.1s ease-in-out infinite; }
@keyframes pl-pulse { 50% { filter: drop-shadow(0 0 10px rgba(230, 194, 90, .95)); } }
.pl-slot.drop-over .pl-z { outline: 3px solid #7ee8ff; outline-offset: 2px; border-radius: 9px; }
.pl-slot.is-foreign .pl-z { outline: 3px solid var(--pl-red); outline-offset: 2px; border-radius: 9px; }
.pl-fgn { font-size: 10px; font-weight: 900; padding: 1px 4px; border-radius: 5px; background: var(--pl-red); color: #240608; letter-spacing: .04em; }
.pl-foreign.over { color: #ffb4b4; border-color: var(--pl-red); background: rgba(248, 113, 113, .18); }
.pl-foreign.over b { color: var(--pl-red); }
.pl-slot.gk-short .pl-ph, .pl-bench.gk-short .pl-ph { border-color: var(--pl-red); }
.pl-ph { width: 76px; height: 104px; border-radius: 9px; border: 2px dashed rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.pl-ph .pl-phl { font-size: 18px; font-weight: 900; color: rgba(255, 255, 255, .85); }
.pl-ph small { font-size: 10px; color: rgba(255, 255, 255, .55); line-height: 1.15; padding: 0 3px; }
.pl-ph.filler { border-style: solid; border-color: #8c95ad; background: rgba(60, 66, 90, .6); }
.pl-ph.filler em { font-style: normal; font-size: 10px; font-weight: 800; color: var(--pl-amber); letter-spacing: .1em; }
.pl-slotbar { zoom: var(--pl-ms, 1); width: 76px; display: flex; gap: 2px; margin-top: 3px; align-items: center; }
.pl-spos { flex: none; font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 5px; background: rgba(0, 0, 0, .65); border: 1px solid rgba(255, 255, 255, .25); white-space: nowrap; margin: 0 auto; }
.pl-spos small { font-size: 9px; }
.pl-slotbar .pl-spos + .pl-role { margin-left: 0; }
.pl-spos.fit-ok { color: #cdeea0; } .pl-spos.fit-mid { color: var(--pl-amber); } .pl-spos.fit-bad { color: var(--pl-red); }
.pl-role { flex: 1; min-width: 0; font-size: 9px; padding: 1px 0; border-radius: 5px; background: rgba(0, 0, 0, .65); border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-overflow: ellipsis; }
.pl-chem { position: absolute; left: 3px; top: 56px; z-index: 6; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #0d1008; border: 1.5px solid #000; box-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.pl-chem.c0 { background: var(--pl-red); } .pl-chem.c1 { background: #fb923c; } .pl-chem.c2 { background: var(--pl-amber); } .pl-chem.c3 { background: var(--pl-green); }
.pl-x { position: absolute; right: -6px; top: -6px; z-index: 9; width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 14px; font-weight: 800; color: #fff; background: #7a1f2a; border: 1.5px solid #f87171; opacity: 0; transition: opacity .15s; }
.pl-slot:hover .pl-x { opacity: 1; }
.pl-bench { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--pl-line); }
.pl-bench.locked { opacity: .5; }
.gk-red { color: var(--pl-red); }
.pl-bar { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.pl-tactics { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.pl-tactics .pl-field { flex-direction: column; align-items: stretch; gap: 3px; }
.pl-tactics select { max-width: none; }
.pl-problems { margin: 6px 0; padding-left: 20px; color: var(--pl-red); }
.pl-ok { padding: 9px 14px; border-radius: 9px; background: rgba(74, 222, 128, .12); border: 1px solid #3f8f5c; margin: 6px 0; }
.pl-ok.warn { background: rgba(251, 191, 36, .12); border-color: #a9801c; }

/* picks list */
.pl-colors { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.pl-colors i { width: 10px; }
.pl-gh { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 4px; padding: 3px 8px; border-radius: 6px; background: linear-gradient(90deg, rgba(230, 194, 90, .22), rgba(230, 194, 90, 0)); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.pl-cnt { font-size: 12px; color: var(--pl-red); } .pl-cnt.met { color: var(--pl-green); }
.pl-none { padding: 3px 10px; font-size: 12px; }
.pl-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px; margin: 2px 0; border-radius: 8px; background: rgba(255, 255, 255, .045); border-left: 4px solid #5b626f; cursor: grab; transition: background .15s, transform .15s; }
.pl-row:hover { background: rgba(255, 255, 255, .11); transform: translateX(2px); }
.pl-row.r-Uncommon { border-left-color: #c4cad2; } .pl-row.r-Rare { border-left-color: #e0b13c; } .pl-row.r-Mythic { border-left-color: #b57cff; background: linear-gradient(90deg, rgba(150, 90, 230, .2), rgba(255, 255, 255, .04)); }
.pl-row.onboard { opacity: .58; }
.pl-row.armed { outline: 2px solid var(--pl-gold); background: rgba(230, 194, 90, .22); opacity: 1; }
.pl-rovr { flex: none; width: 30px; text-align: center; font-weight: 900; font-size: 15px; }
.pl-rovr.mgr { font-size: 10px; color: var(--pl-gold); }
.pl-rname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pl-rpos { flex: none; width: 54px; font-size: 11px; color: var(--pl-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-rcode { flex: none; width: 30px; font-size: 10px; font-weight: 800; color: var(--pl-dim); letter-spacing: .04em; }
.pl-ic { display: inline-flex; flex: none; } .pl-ic svg { display: block; }
.pl-ic.pl-none { width: 18px; justify-content: center; color: var(--pl-dim); }
.pl-mark { flex: none; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 8px; background: #254a35; border: 1px solid #4ade80; color: #bff5d2; }
.pl-mark.mgr { background: #4a3b12; border-color: var(--pl-gold); color: var(--pl-gold); }
.pl-tag { flex: none; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 8px; background: #1f4d68; border: 1px solid #6bc3ee; color: #d9f2ff; }
.pl-tiny { flex: none; cursor: pointer; padding: 1px 8px; font-size: 11px; font-weight: 700; border-radius: 6px; background: #232944; border: 1px solid #424a72; }
.pl-tiny:hover { border-color: var(--pl-gold); }
.pl-zone { min-height: 52px; padding: 6px; border-radius: 10px; border: 2px dashed #424a72; background: rgba(0, 0, 0, .22); }
.pl-zone.empty::before { content: attr(data-empty); display: block; text-align: center; padding: 12px; font-size: 12px; color: var(--pl-dim); }
.pl-zone.drop-over, .pl-sqb.drop-over { border-color: var(--pl-gold); background: rgba(230, 194, 90, .1); }
.pl-sqb { border-radius: 12px; }

/* wide screens: the squad panel never scrolls as a whole. Two columns: pitch + bench (own scroll) | picks list (own scroll) + reserve.
   One column (half-width panel): pitch on top, the picks list fills the rest. Narrow screens (below) stack everything and the page scrolls. */
@media (min-width: 1100px) {
  #pl-squad-body { overflow: hidden; display: flex; flex-direction: column; padding: 12px; }
  .pl-sqgrid.fixed { flex: 1; min-height: 0; height: 100%; align-items: stretch; }
  .pl-sqgrid.fixed:not(.two) { grid-template-rows: fit-content(62%) minmax(150px, 1fr); }
  .pl-sqgrid.fixed.two { grid-template-rows: minmax(0, 1fr); }
  .pl-sqgrid.fixed > .pl-sqa, .pl-sqgrid.fixed > .pl-sqb { min-height: 0; }
  .pl-sqgrid.fixed > .pl-sqa { overflow-y: auto; padding-right: 4px; }
  .pl-sqgrid.fixed:not(.two) .pl-linkkey, .pl-sqgrid.fixed:not(.two) .pl-pickhint { display: none; }
  .pl-sqgrid.fixed:not(.two) .pl-sqa .pl-hint:not(.armed) { display: none; }
}
.pl-sqb { display: flex; flex-direction: column; min-height: 0; }
.pl-sect-top { margin-top: 0; }
.pl-picks-scroll { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-color: #424a72 transparent; scrollbar-width: thin; border-radius: 8px; }
.pl-sqa { scrollbar-color: #424a72 transparent; scrollbar-width: thin; }
.pl-resbox { flex: none; }
.pl-resbox .pl-sect { margin: 8px 0 4px; }
.pl-resbox .pl-zone { max-height: 118px; overflow-y: auto; min-height: 44px; }
.pl-lockhint { padding: 8px 12px; border-radius: 9px; background: rgba(0, 0, 0, .3); border: 1px dashed var(--pl-line); text-align: center; }
@media (max-width: 1099px) {
  .pl-picks-scroll { flex: none; max-height: 420px; }
}

/* dragging a pack card: show where it can land */
body.pl-drag-pack .pl-slot.empty .pl-ph, body.pl-drag-pack .pl-zone, body.pl-drag-pack .pl-sqb { outline: 2px dashed rgba(230, 194, 90, .65); outline-offset: 1px; }
body.pl-drag-pack .pl-slot.filled .pl-z { outline: 2px dashed rgba(126, 232, 255, .6); outline-offset: 2px; border-radius: 9px; }
.pl-pc[draggable="true"] { cursor: grab; }


/* ---------- popover ---------- */
.pl-pop {
  position: fixed; z-index: 90; width: 560px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: hidden; pointer-events: none; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, #1a2038, #0e1120); border: 1px solid #4a527c; box-shadow: 0 20px 60px rgba(0, 0, 0, .8); font-size: 12px; animation: pl-fade .15s ease-out;
}
.pl-pop.r-Rare { border-color: #c9a23c; } .pl-pop.r-Mythic { border-color: #b57cff; box-shadow: 0 20px 60px rgba(0, 0, 0, .8), 0 0 30px rgba(150, 90, 230, .4); } .pl-pop.r-Uncommon { border-color: #c4cad2; }
@keyframes pl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pl-pophead { display: flex; align-items: center; gap: 8px; }
.pl-popname { font-size: 18px; font-weight: 900; } .pl-popname small { color: var(--pl-dim); font-weight: 600; }
.pl-popsub { color: #c0c8e0; margin-top: 2px; }
.pl-kv { display: grid; grid-template-columns: 110px 1fr; gap: 3px 10px; margin: 8px 0; } .pl-kv dt { color: var(--pl-dim); } .pl-kv dd { margin: 0; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0; }
.pl-pchip { padding: 1px 6px; border-radius: 6px; background: #20253c; border: 1px solid #343b5c; font-size: 11px; color: var(--pl-dim); }
.pl-pchip.f100 { color: #bff5d2; border-color: #3f8f5c; } .pl-pchip.f95 { color: #e1f5a8; } .pl-pchip.f0 { opacity: .5; }
.pl-statcols { columns: 3 160px; column-gap: 14px; margin-top: 4px; }
.pl-statgrp { break-inside: avoid; margin-bottom: 8px; }
.pl-statcat { font-weight: 800; color: var(--pl-gold); text-transform: uppercase; font-size: 10px; letter-spacing: .1em; border-bottom: 1px solid #2a3050; margin-bottom: 2px; }
.pl-st { display: flex; justify-content: space-between; gap: 6px; line-height: 1.5; color: var(--pl-dim); } .pl-st b { color: var(--pl-text); font-weight: 700; } .pl-st.key span { color: #dfe5f7; } .pl-st.key b { color: #fff; }
.pl-est { font-style: normal; font-size: 9px; color: var(--pl-amber); }

/* ---------- narrow screens: stack the panels; the zoom buttons choose which one is shown large ---------- */
@media (max-width: 1099px) {
  body.pl-body { overflow: auto; display: block; }
  .pl-main { display: block; padding: 10px; }
  .pl-panel, .pl-main[data-zoom] .pl-panel { display: flex; flex: none; margin-bottom: 12px; transition: none; }
  .pl-pbody { overflow: visible; }
  .pl-main[data-zoom="pack"] #pl-squad .pl-pbody, .pl-main[data-zoom="squad"] #pl-pack .pl-pbody { display: none; }
  .pl-main[data-zoom="pack"] #pl-squad .pl-phead, .pl-main[data-zoom="squad"] #pl-pack .pl-phead { border-bottom: 0; }
  .pl-hdr { position: sticky; top: 0; }
  .pl-sqgrid.two { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =====================================================================================================================
   Season screens (season.js). Classes are prefixed pv-. Same dark card-table look as the draft screen.
   ===================================================================================================================== */
.pl-view { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 28px; scrollbar-color: #424a72 transparent; scrollbar-width: thin; }
.pv-dim { color: var(--pl-dim); font-weight: 400; }
.pv-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pv-head > div:first-child { flex: 1; min-width: 220px; }
.pv-h1 { margin: 0; font-size: 26px; font-weight: 900; color: var(--pl-gold); text-shadow: 0 2px 0 #000; letter-spacing: .02em; }
.pv-sub { color: var(--pl-dim); font-size: 12px; font-family: Consolas, monospace; }
.pv-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-note, .pv-replay { padding: 8px 14px; border-radius: 10px; margin: 8px 0; font-size: 13px; background: rgba(0, 0, 0, .3); border: 1px solid var(--pl-line); color: #c0c8e0; }
.pv-replay { border-color: var(--pl-amber); background: rgba(251, 191, 36, .1); }
.pv-loading { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 50vh; font-size: 18px; color: var(--pl-gold); text-align: center; }
.pv-spin { width: 46px; height: 46px; border-radius: 50%; border: 5px solid #343a5c; border-top-color: var(--pl-gold); animation: pv-rot 1s linear infinite; }
@keyframes pv-rot { to { transform: rotate(360deg); } }
.pv-card { border-radius: 14px; background: linear-gradient(180deg, rgba(26, 31, 52, .92), rgba(13, 16, 29, .94)); border: 1px solid #343a5c; box-shadow: 0 8px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); padding: 12px 14px; margin-bottom: 14px; min-width: 0; }
.pv-card-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pl-gold); border-bottom: 1px solid #2a3050; padding-bottom: 6px; margin-bottom: 8px; }
.pv-crest { display: inline-flex; flex: none; } .pv-crest svg { display: block; }
.pv-scroll { overflow-x: auto; }
.pv-subline { font-size: 12px; color: #aab3cf; margin: 4px 0; }
.pv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }

/* buttons */
.pv-spd, .pv-tab { cursor: pointer; padding: 5px 12px; border-radius: 8px; font-weight: 800; background: linear-gradient(180deg, #2a3150, #1a1f35); border: 1px solid #424a72; color: #c9d3f5; transition: .15s; }
.pv-spd:hover:not(:disabled), .pv-tab:hover { border-color: var(--pl-gold); color: #fff; }
.pv-spd.on, .pv-tab.on { color: #2a1a02; background: linear-gradient(180deg, #f3d77c, #c59326); border-color: #fff0a8; }
.pv-spd:disabled { opacity: .45; cursor: default; }
.pv-tabs { display: flex; gap: 6px; margin: 14px 0 10px; flex-wrap: wrap; }
.pv-tab { padding: 8px 18px; font-size: 14px; letter-spacing: .04em; }
.pv-tabs.sub { margin-top: 0; } .pv-tabs.sub .pv-tab { padding: 5px 14px; font-size: 12px; }

/* tags */
.pv-tag { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 8px; margin-left: 6px; text-transform: uppercase; letter-spacing: .05em; }
.pv-tag.bot { background: #333a52; color: #aab3cf; } .pv-tag.ghost { background: #1f4d68; color: #d9f2ff; } .pv-tag.you { background: #4a3b12; color: var(--pl-gold); }

/* idle / kick-off */
.pv-kick { display: grid; place-items: center; padding: 34px 16px; margin: 10px 0 18px; border-radius: 18px; text-align: center; background: radial-gradient(600px 220px at 50% 0%, rgba(230, 194, 90, .18), transparent 70%), linear-gradient(180deg, rgba(26, 31, 52, .92), rgba(13, 16, 29, .94)); border: 1px solid #5a4d22; }
.pv-kicktxt { display: grid; gap: 12px; justify-items: center; max-width: 620px; }
.pv-big { font-size: 28px; font-weight: 900; color: var(--pl-gold); }
.pv-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pv-team { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--pl-line); }
.pv-team.you { border-color: var(--pl-gold); background: rgba(230, 194, 90, .1); }
.pv-team small { display: block; color: var(--pl-dim); font-size: 11px; }

.pv-next { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(230, 194, 90, .1); border: 1px solid #5a4d22; font-weight: 700; }

/* round player portraits */
.pv-av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid var(--kc, #444); box-shadow: 0 0 0 1.5px var(--kt, #000), 0 3px 8px rgba(0, 0, 0, .6); background: var(--kc, #444); }
.pv-av svg, .pv-av img { display: block; width: 100%; height: 100%; }
.pv-av.sm { width: 30px; height: 30px; border-width: 2px; }
.pv-ini { font-weight: 900; color: #fff; }

/* match timeline (printed, like a match page: home events left, minute in the centre, away events right) */
.pv-tlh { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 10px 6px 14px; text-align: center; }
.pv-tlh .tm { display: grid; justify-items: center; gap: 4px; min-width: 0; } .pv-tlh .tm b { font-size: 17px; overflow-wrap: anywhere; }
.pv-tlh .sc { font-size: 40px; font-weight: 900; color: var(--pl-gold); line-height: 1; white-space: nowrap; } .pv-tlh .sub { font-size: 12px; color: var(--pl-dim); margin-top: 4px; }
.pv-tl { position: relative; max-width: 760px; margin: 0 auto; }
.pv-tl::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #2a3050; }
.pv-tle { position: relative; display: grid; grid-template-columns: 1fr 52px 1fr; align-items: center; min-height: 34px; padding: 3px 0; }
.pv-tle .min { position: relative; z-index: 1; text-align: center; font-weight: 800; font-size: 12px; color: var(--pl-dim); background: var(--pl-panel2); border: 1px solid #2a3050; border-radius: 10px; padding: 1px 0; margin: 0 auto; width: 46px; }
.pv-tle .l, .pv-tle .r { display: flex; align-items: center; gap: 8px; min-width: 0; } .pv-tle .l { justify-content: flex-end; text-align: right; } .pv-tle .r { justify-content: flex-start; text-align: left; }
.pv-tle .tx { min-width: 0; line-height: 1.25; } .pv-tle .tx b { font-weight: 700; } .pv-tle .tx small { display: block; color: var(--pl-dim); font-size: 11px; }
.pv-tle .tx .off { color: var(--pl-red); } .pv-tle .tx .on { color: var(--pl-green); }
.pv-tle .ic { flex: none; display: inline-grid; place-items: center; width: 22px; }
.pv-tle.goal .tx b, .pv-tle.goal .min { color: var(--pl-gold); } .pv-tle .scr { font-weight: 900; color: var(--pl-gold); margin-left: 4px; font-size: 12px; }
.pv-tle.chance { opacity: .6; font-size: 12px; }
.pv-tle.ph { display: block; text-align: center; padding: 6px 0; }
.pv-tle.ph span { position: relative; z-index: 1; display: inline-block; padding: 2px 16px; border-radius: 12px; font-weight: 900; font-size: 13px; letter-spacing: .06em; background: #232a47; border: 1px solid #4a527c; }
.pv-tlnone { text-align: center; color: var(--pl-dim); padding: 8px; }

/* matchday stepper */
.pv-md { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 14px; align-items: start; }
.pv-res { display: grid; grid-template-columns: 1fr 20px 54px 20px 1fr; align-items: center; gap: 6px; padding: 4px 0; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.pv-res span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-res span.r { text-align: right; }
.pv-res b { text-align: center; background: rgba(0, 0, 0, .45); border-radius: 6px; padding: 1px 0; font-size: 14px; }
.pv-res.you { background: rgba(230, 194, 90, .12); }
.pv-mx { margin: 4px 0 10px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid #2a3050; }


/* ticker + tables */
.pv-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pv-tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--pl-dim); padding: 6px 8px; border-bottom: 1px solid #2a3050; white-space: nowrap; }
.pv-tbl td { padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); white-space: nowrap; }
.pv-tbl th.n, .pv-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; } .pv-tbl .dim { color: var(--pl-dim); }
.pv-tbl .rk { font-weight: 900; color: var(--pl-dim); width: 28px; }
.pv-tbl .tm { display: flex; align-items: center; gap: 8px; border-bottom: 0; }
.pv-tbl td.pn > * { vertical-align: middle; margin-right: 8px; }
.pv-tbl .pts { font-weight: 900; font-size: 15px; }
.pv-tbl tbody tr:hover { background: rgba(255, 255, 255, .05); }
.pv-tbl tr.you { background: rgba(230, 194, 90, .16); box-shadow: inset 4px 0 0 var(--pl-gold); }
.pv-tbl tr.zone { box-shadow: inset 4px 0 0 var(--pl-green); } .pv-tbl tr.zonep { box-shadow: inset 4px 0 0 var(--pl-amber); }
.pv-tbl tr.you.zone, .pv-tbl tr.you.zonep { box-shadow: inset 4px 0 0 var(--pl-gold); }
.pv-tbl.compact th, .pv-tbl.compact td { padding: 3px 5px; font-size: 12px; }
.pv-tbl.compact .tm span { overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pv-tbl tr.motm { background: linear-gradient(90deg, rgba(230, 194, 90, .25), rgba(230, 194, 90, 0)); }
.pv-tbl th.sortable { cursor: pointer; } .pv-tbl th.sortable:hover, .pv-tbl th.on { color: var(--pl-gold); }
.pv-tbl td.hl { background: rgba(230, 194, 90, .08); font-weight: 800; }
.pv-tbl .note { color: var(--pl-dim); font-size: 12px; }
.pv-star { color: var(--pl-gold); }
.pv-rt { display: inline-block; min-width: 36px; text-align: center; padding: 1px 6px; border-radius: 8px; font-weight: 900; background: #333a52; }
.pv-rt.green { background: #1f6b3f; color: #d4ffe4; } .pv-rt.gold { background: linear-gradient(180deg, #f3d77c, #c59326); color: #2a1a02; }
.pv-en { display: inline-block; width: 44px; height: 6px; border-radius: 3px; background: #1a1f35; vertical-align: middle; overflow: hidden; } .pv-en i { display: block; height: 100%; background: var(--pl-green); }
.pv-cd { display: inline-block; width: 9px; height: 13px; border-radius: 2px; margin-right: 2px; vertical-align: middle; } .pv-cd.y { background: #fbbf24; } .pv-cd.r { background: #ef4444; }
.pv-unused { font-size: 12px; margin-top: 6px; }

/* final summary */
.pv-summary { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.pv-sbox { flex: 1 1 200px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(26, 31, 52, .92), rgba(13, 16, 29, .94)); border: 1px solid #343a5c; display: grid; gap: 2px; }
.pv-sbox small { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--pl-dim); font-weight: 800; }
.pv-sbox b { font-size: 26px; font-weight: 900; } .pv-sbox.big b { font-size: 44px; color: var(--pl-gold); }
.pos { color: var(--pl-green); } .neg { color: var(--pl-red); }
.pv-sbox.refund { border-color: #3f8f5c; background: rgba(74, 222, 128, .1); } .pv-sbox.refund.partial { border-color: #a9801c; background: rgba(251, 191, 36, .1); }

/* fixtures */
.pv-fx { display: grid; grid-template-columns: 48px 18px 1fr 24px 70px 24px 1fr 34px 130px; align-items: center; gap: 8px; padding: 6px 10px; margin: 3px 0; border-radius: 10px; background: rgba(255, 255, 255, .045); border-left: 4px solid #5b626f; cursor: pointer; transition: .15s; }
.pv-fx:hover { background: rgba(255, 255, 255, .11); transform: translateX(2px); }
.pv-fx.W { border-left-color: var(--pl-green); } .pv-fx.L { border-left-color: var(--pl-red); } .pv-fx.D { border-left-color: var(--pl-amber); }
.pv-fxmd { font-weight: 800; color: var(--pl-dim); } .pv-fxn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-fxn.r { text-align: right; }
.pv-fxs { text-align: center; font-size: 17px; background: rgba(0, 0, 0, .45); border-radius: 7px; }
.pv-wl { text-align: center; font-weight: 900; border-radius: 6px; } .pv-wl.W { color: var(--pl-green); } .pv-wl.L { color: var(--pl-red); } .pv-wl.D { color: var(--pl-amber); }
.pv-go { color: var(--pl-gold); font-size: 12px; text-align: right; }
.pv-fxnote { font-size: 11px; color: var(--pl-amber); margin: -1px 0 4px 66px; }

/* report */
.pv-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; text-align: center; }
.pv-sc-team { display: grid; justify-items: center; gap: 4px; } .pv-sc-team b { font-size: 20px; } .pv-sc-team small { color: var(--pl-dim); }
.pv-sc-num { font-size: 56px; font-weight: 900; color: var(--pl-gold); text-shadow: 0 3px 0 #000; line-height: 1; }
.pv-stat { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; align-items: center; margin: 6px 0; } .pv-stat > b:last-child { text-align: right; }
.pv-stat span { display: block; text-align: center; font-size: 11px; color: var(--pl-dim); text-transform: uppercase; letter-spacing: .08em; }
.pv-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #1a1f35; } .pv-bar i { display: block; }
.pv-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pv-plh { margin: 6px 4px 8px; }
.pv-lead { display: grid; grid-template-columns: 24px 34px 1fr 36px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; }
.pv-lead.you { background: rgba(230, 194, 90, .14); } .pv-lead .pv-rk { color: var(--pl-dim); font-weight: 900; text-align: center; }
.pv-ln small { display: flex; align-items: center; gap: 4px; color: var(--pl-dim); font-size: 11px; } .pv-lv { text-align: right; font-size: 20px; color: var(--pl-gold); }

@media (max-width: 1099px) {
  .pl-view { overflow: visible; padding: 10px; }
  .pv-md, .pv-cols { grid-template-columns: minmax(0, 1fr); }
  .pv-tle { grid-template-columns: 1fr 44px 1fr; font-size: 12px; }
  .pv-fx { grid-template-columns: 40px 14px 1fr 22px 62px 22px 1fr 28px; } .pv-go { display: none; }
}

.pl-stick { position: sticky; bottom: 0; z-index: 5; margin: 8px 0 0; padding: 10px 0; background: linear-gradient(180deg, rgba(13, 16, 29, 0), #0d101d 30%); }

/* ---------- wallet, live pod (ring, seat chips, waiting) ---------- */
.pl-wallet { display: flex; gap: 10px; }
.pl-wal { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 16px; background: rgba(0, 0, 0, .4); border: 1px solid var(--pl-line); }
.pl-ratings span { padding: 3px 10px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid var(--pl-line); }
.pv-tag.human { background: rgba(94, 160, 255, .2); color: #a9ccff; border: 1px solid rgba(94, 160, 255, .45); }
.pl-ring-slot { flex: none; min-width: 0; }
.pl-ring-slot:empty { display: none; }
.pl-ring { position: relative; width: 74px; height: 74px; margin: -8px 4px -8px 0; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.pl-ring svg { width: 100%; height: 100%; }
.pl-ring circle { fill: rgba(8, 10, 18, .88); stroke-width: 7; }
.pl-ring circle.bg { stroke: #262c47; }
.pl-ring circle.fg { fill: none; stroke-linecap: round; transition: stroke-dasharray .25s linear; }
.pl-ring.hi circle.fg { stroke: var(--pl-green); } .pl-ring.mid circle.fg { stroke: var(--pl-amber); } .pl-ring.low circle.fg { stroke: var(--pl-red); }
.pl-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 900; text-shadow: 0 2px 0 #000; }
.pl-ring.low { animation: pl-pulse .7s ease-in-out infinite; }
.pl-ring.low b { color: var(--pl-red); }
@keyframes pl-pulse { 50% { transform: scale(1.1); } }
.pl-podstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 14px; border-bottom: 1px solid #2a3050; background: rgba(0, 0, 0, .25); font-size: 12px; flex: none; }
.pl-seatchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 7px; border-radius: 12px; background: rgba(0, 0, 0, .4); border: 1px solid var(--pl-line); font-weight: 700; }
.pl-seatchip i { width: 9px; height: 9px; border-radius: 50%; background: #5b626f; }
.pl-seatchip.human.waiting i { background: var(--pl-amber); box-shadow: 0 0 8px var(--pl-amber); animation: pl-pulse 1s ease-in-out infinite; }
.pl-seatchip.human.done i { background: var(--pl-green); }
.pl-seatchip.bot { color: var(--pl-dim); font-weight: 600; }
.pl-seatchip.you { border-color: var(--pl-gold); color: var(--pl-gold); }
.pl-waiting { display: grid; place-items: center; gap: 10px; text-align: center; min-height: 60%; padding: 30px 20px; }
.pl-wbig { font-size: 22px; }
body.pl-podmode .pl-navbtn[data-nav="season"] { display: none; }

/* ---------- icon legend (draft screen) ---------- */
.pl-lg { position: relative; width: max-content; max-width: 100%; margin: 0 0 12px; z-index: 12; cursor: help; outline: none; }
.pl-lgbar { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 8px; border-radius: 12px; background: rgba(0, 0, 0, .4); border: 1px solid var(--pl-line); color: var(--pl-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: .15s; }
.pl-lgico { display: inline-flex; align-items: center; gap: 3px; } .pl-lgico svg { display: block; }
.pl-lgico + .pl-lgico { padding-left: 10px; border-left: 1px solid var(--pl-line); }
.pl-lgpanel { display: none; position: absolute; left: 0; top: calc(100% + 6px); width: 300px; max-width: calc(100vw - 32px); padding: 12px 14px; border-radius: 12px; background: #151a2d; border: 1px solid var(--pl-gold2); box-shadow: 0 14px 40px rgba(0, 0, 0, .7); font-size: 13px; color: var(--pl-text); }
.pl-lgh { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pl-gold); margin-bottom: 6px; }
.pl-lgrow { display: flex; align-items: center; gap: 10px; padding: 3px 0; line-height: 1.3; }
.pl-lgrow .pl-lgico { flex: none; }
.pl-lg.open .pl-lgpanel, .pl-lg:focus-visible .pl-lgpanel { display: block; }
.pl-lg.open .pl-lgbar, .pl-lg:focus-visible .pl-lgbar { color: var(--pl-gold); border-color: var(--pl-gold2); }
@media (hover: hover) { .pl-lg:hover .pl-lgpanel { display: block; } .pl-lg:hover .pl-lgbar { color: var(--pl-gold); border-color: var(--pl-gold2); } }
.pl-panel.pl-small .pl-lg { display: none; }

/* random 16th card reveal: a short spin, skippable by tap */
.pl-hold .pl-pc { visibility: hidden; animation: none; }
.pl-reveal { position: fixed; inset: 0; z-index: 9999; background: rgba(6, 10, 18, .82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; cursor: pointer; }
.pl-rv-spin { perspective: 900px; }
.pl-rv-card { width: 190px; transform: scale(1.35); animation: pl-rv-spin 1s cubic-bezier(.2, .7, .2, 1) both; backface-visibility: visible; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .7)); }
.pl-rv-cap { color: #e6c25a; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; animation: pl-rv-cap 1s both; }
@keyframes pl-rv-spin { from { opacity: 0; transform: scale(.4) rotateY(-540deg); } 70% { opacity: 1; } to { opacity: 1; transform: scale(1.35) rotateY(0); } }
@keyframes pl-rv-cap { from { opacity: 0; } 60% { opacity: 0; } to { opacity: 1; } }

/* difference makers (post-match): goal detail, per-match card, season "what won you points" */
.pv-tle.tap { cursor: pointer; } .pv-tle.tap:hover .tx b { text-decoration: underline dotted; } .pv-tle.tap.open { background: rgba(251, 191, 36, .06); }
.pv-gdbox { margin: 2px 0 8px; } .pv-gdbox[hidden] { display: none; }
.pv-gd { border: 1px solid #343a5c; border-radius: 10px; background: #12162a; position: relative; z-index: 2; padding: 8px 10px; font-size: 13px; }
.pv-gd-h { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pl-gold); margin-bottom: 4px; }
.pv-gs { padding: 5px 0; border-top: 1px solid #2a3050; } .pv-gs:first-of-type { border-top: 0; }
.pv-gs-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .pv-gs-c { margin-left: auto; font-weight: 900; font-size: 15px; color: var(--pl-gold); }
.pv-gs-w { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pv-gc { padding: 2px 8px; border-radius: 10px; font-size: 12px; border: 1px solid #3a4268; background: #1a2038; color: #c0c8e0; }
.pv-gc.up { border-color: #3f8f5c; } .pv-gc.dn { border-color: #a05050; } .pv-gc.top { background: rgba(74, 222, 128, .14); color: #fff; }
.pv-dm { min-width: 0; } .pv-dm-t { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pv-dm-l { list-style: none; margin: 0; padding: 0; } .pv-dm-l li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid #2a3050; }
.pv-dm-l li small { display: block; color: var(--pl-dim); font-size: 11px; } .pv-dm-l li b { color: var(--pl-green); white-space: nowrap; }
.pv-dm-n { margin-top: 6px; font-size: 12px; color: var(--pl-dim); } .pv-dm-n .pos, .pv-wp.pos b { color: var(--pl-green); } .pv-dm-n .neg, .pv-wp.neg b { color: var(--pl-red); }
.pv-km { margin-top: 8px; font-size: 13px; } .pv-km summary { cursor: pointer; color: var(--pl-dim); } .pv-kmr { display: flex; gap: 8px; padding: 3px 0; } .pv-kmr .min { color: var(--pl-dim); font-weight: 800; min-width: 36px; }
.pv-wps { display: flex; flex-wrap: wrap; gap: 8px; } .pv-wp { flex: 1 1 110px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid #343a5c; display: grid; gap: 2px; }
.pv-wp small { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; color: var(--pl-dim); font-weight: 800; } .pv-wp b { font-size: 20px; font-weight: 900; }

/* ---- pack screen: facts strip (plain facts about your own picks) + the shared compact list row ---- */
.pl-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 5px 10px; margin: 0 0 8px; border-radius: 10px; background: rgba(0, 0, 0, .32); border: 1px solid var(--pl-line); font-size: 12px; cursor: pointer; line-height: 1.3; }
.pl-facts:hover { background: rgba(255, 255, 255, .08); }
.pl-fcol { display: inline-flex; align-items: center; gap: 3px; } .pl-fcol svg { display: block; }
.pl-fsplit { white-space: nowrap; } .pl-fsplit b, .pl-fpos b { color: #fff; }
.pl-fposs { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; margin-left: auto; }
.pl-fpos { white-space: nowrap; color: var(--pl-dim); font-weight: 700; } .pl-fpos.z { opacity: .55; }
.pl-fmore { color: var(--pl-dim); font-size: 11px; }
.pl-flist { margin: -2px 0 8px; padding: 4px; border-radius: 10px; background: rgba(0, 0, 0, .28); max-height: 280px; overflow-y: auto; }
.pl-frow, .ph-lrow { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 2px 8px 2px 6px; margin: 2px 0; border-radius: 8px; background: rgba(255, 255, 255, .06); border-left: 5px solid #5b626f; }
.pl-frow.r-Uncommon, .ph-lrow.r-Uncommon { border-left-color: #c4cad2; } .pl-frow.r-Rare, .ph-lrow.r-Rare { border-left-color: #e0b13c; } .pl-frow.r-Mythic, .ph-lrow.r-Mythic { border-left-color: #b57cff; background: linear-gradient(90deg, rgba(150, 90, 230, .22), rgba(255, 255, 255, .05)); }
.pl-lpos { flex: none; width: 34px; font-size: 11px; font-weight: 800; color: var(--pl-dim); }
.pl-lovr { flex: none; width: 24px; text-align: right; font-weight: 900; font-size: 16px; }
.pl-rsp { flex: none; display: inline-flex; color: #ffd75a; }
.pl-ltoggle { margin-left: auto; width: 36px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #e8ecf8; background: rgba(255, 255, 255, .1); border: 1px solid #4a527c; cursor: pointer; }