/* Pick & Pass - phone view (loaded by index.html and game.html, after play.css / menu.css).
   Everything is scoped to html.is-phone, which common.js sets when the viewport is narrower than ~700px or a touch device is in portrait.
   Without that class nothing here applies, so the desktop layout is exactly the one in play.css / menu.css.
   Sections: base, header, tab bar + bottom sheet, pack tab, squad tab, picks tab, season screens, main menu. */

/* =========================================================== base */
.ph-tabs, .ph-sheet { display: none; }
html.is-phone {
  --ph-hdr: 56px; --ph-phead: 0px; --ph-tab: 62px;
  --ph-top: env(safe-area-inset-top, 0px); --ph-bot: env(safe-area-inset-bottom, 0px);
  --ph-l: env(safe-area-inset-left, 0px); --ph-r: env(safe-area-inset-right, 0px);
}
html.is-phone body, html.is-phone body.pl-body { height: auto; min-height: 100%; }          /* body as tall as its content, or the sticky header would end after one screen */
html.is-phone body { overflow-x: hidden; max-width: 100vw; padding-left: var(--ph-l); padding-right: var(--ph-r); font-size: 15px; }
html.is-phone * { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }   /* manipulation = no double-tap zoom */
html.is-phone input, html.is-phone select, html.is-phone textarea { font-size: 16px; }       /* iOS zooms into smaller fields */
html.is-phone .pl-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
html.is-phone .pl-btn:hover:not(:disabled) { transform: none; filter: none; }
html.is-phone .pl-pc, html.is-phone .pl-slot, html.is-phone .pl-row, html.is-phone .art-cw, html.is-phone .art-mw { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.is-phone body.ph-noscroll { overflow: hidden; }

/* =========================================================== header (game.html) */
html.is-phone .pl-hdr { padding: calc(8px + var(--ph-top)) 10px 8px; gap: 8px; align-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
html.is-phone .pl-title, html.is-phone .pl-ratings, html.is-phone .pl-grow, html.is-phone .pl-setmenu, html.is-phone #pl-newbtn { display: none; }
html.is-phone #pl-menubtn { order: 1; padding: 0 14px; white-space: nowrap; }
html.is-phone .pl-progress { order: 2; flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 1.25; padding: 5px 10px; border-radius: 14px; }
html.is-phone .pl-progress > span.pl-dim:last-child { display: none; }      /* "(12/45 total)" */
html.is-phone .pl-wallet { order: 3; gap: 6px; }
html.is-phone .pl-wal { padding: 4px 8px 4px 6px; }
html.is-phone .pl-nav { order: 4; flex: 1 1 100%; }
html.is-phone .pl-nav:not(:has(#pl-nav-season:not([hidden]))) { display: none; }
html.is-phone .pl-navbtn { flex: 1; min-height: 44px; }
html.is-phone .pl-msg { top: calc(var(--ph-hdr) + 8px); max-width: 92vw; width: max-content; font-size: 14px; }

/* =========================================================== bottom tab bar + bottom sheet */
html.is-phone .ph-tabs {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 6px;
  padding: 6px calc(8px + var(--ph-r)) calc(6px + var(--ph-bot)) calc(8px + var(--ph-l));
  background: linear-gradient(180deg, #1a1f35, #0b0d17); border-top: 1px solid #3a3320; box-shadow: 0 -6px 20px rgba(0, 0, 0, .55);
}
html.is-phone body:not([data-view="draft"]) .ph-tabs { display: none; }
.ph-tab { position: relative; flex: 1; min-height: 48px; border-radius: 12px; cursor: pointer; font-weight: 800; font-size: 15px; letter-spacing: .04em; color: #b9c4e6;
  background: rgba(255, 255, 255, .05); border: 1px solid #343a5c; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ph-tab.on { color: #2a1a02; background: linear-gradient(180deg, #f3d77c, #c59326); border-color: #fff0a8; }
.ph-tab:disabled { opacity: .4; }
.ph-badge { min-width: 22px; padding: 1px 6px; border-radius: 11px; font-size: 12px; font-weight: 900; background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.ph-badge:empty { display: none; }
.ph-tab.on .ph-badge { background: rgba(42, 26, 2, .85); color: #f3d77c; }

html.is-phone .ph-sheet:not([hidden]) { display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 80; }
.ph-scrim { position: absolute; inset: 0; background: rgba(3, 4, 9, .72); }
.ph-panel { position: relative; width: 100%; max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #1a2038, #0e1120); border-top: 2px solid var(--pl-gold2); box-shadow: 0 -12px 40px rgba(0, 0, 0, .7); animation: ph-up .22s var(--pl-ease); }
@keyframes ph-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ph-grab { flex: none; width: 44px; height: 5px; border-radius: 3px; background: #4a527c; margin: 8px auto 0; }
.ph-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 14px 6px; font-size: 13px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ph-actions { flex: none; display: flex; gap: 8px; padding: 10px 14px calc(10px + var(--ph-bot)); border-top: 1px solid #2a3050; background: #0e1120; }
.ph-actions .pl-btn { flex: 1; min-height: 52px; font-size: 16px; }
.ph-actions .pl-gold { flex: 2; font-size: 19px; font-weight: 900; letter-spacing: .04em; }
.ph-card { display: grid; place-items: center; margin: 4px 0 12px; }
.ph-body .pl-statcols { columns: 2 130px; column-gap: 12px; }
.ph-body .pl-kv { grid-template-columns: 96px 1fr; }
.ph-body .pl-popname { font-size: 17px; }
.ph-menutitle { font-size: 16px; margin: 4px 0 10px; } .ph-menutitle small { color: var(--pl-dim); font-size: 13px; }
.ph-menulist { display: grid; gap: 8px; margin-top: 10px; }
.ph-menulist .pl-btn { min-height: 50px; font-size: 16px; justify-content: flex-start; padding: 0 16px; }
.ph-menulist .pl-btn.danger { border-color: #8a3040; color: #ffb4bd; }
.ph-body .pl-field { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.ph-body .pl-field select { width: 100%; max-width: none; min-height: 48px; font-size: 16px; border-radius: 9px; }
.ph-body .pl-role { font-size: 16px; padding: 0 8px; background: #0b0e19; border: 1px solid var(--pl-line); color: var(--pl-text); }

/* =========================================================== draft layout: one tab at a time */
html.is-phone body.pl-body[data-view="draft"] { padding-bottom: calc(var(--ph-tab) + var(--ph-bot) + 10px); }
html.is-phone .pl-main { padding: 8px; }
html.is-phone .pl-panel { overflow: visible; border-radius: 12px; margin-bottom: 8px; }
html.is-phone #pl-main[data-tab="pack"] #pl-squad, html.is-phone #pl-main:not([data-tab="pack"]) #pl-pack { display: none; }
html.is-phone .pl-main.pl-done #pl-pack { display: none; }
html.is-phone .pl-zoom { display: none; }
html.is-phone .pl-phead { padding: 8px 10px; min-height: 48px; gap: 8px; }
html.is-phone .pl-pbody { padding: 8px; }
html.is-phone .pl-ptitle { white-space: normal; flex-wrap: wrap; gap: 6px; font-size: 14px; }
html.is-phone .pl-big { font-size: 18px; }

/* pack tab: the pick header (and in a pod the timer ring + seat strip) sticks under the app header */
html.is-phone #pl-pack .pl-phead { position: sticky; top: var(--ph-hdr); z-index: 8; background: #181d31; border-radius: 12px 12px 0 0; }
html.is-phone #pl-pack .pl-podstrip { position: sticky; top: calc(var(--ph-hdr) + var(--ph-phead)); z-index: 7; background: #131829; flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; scrollbar-width: none; }
html.is-phone .pl-podstrip::-webkit-scrollbar { display: none; }
html.is-phone .pl-seatchip { flex: none; min-height: 30px; white-space: nowrap; }
html.is-phone .pl-ring { width: 54px; height: 54px; margin: -4px 0; }
html.is-phone .pl-ring b { font-size: 20px; }
html.is-phone #pl-ring-squad { position: fixed; right: calc(10px + var(--ph-r)); top: calc(var(--ph-hdr) + 8px); z-index: 25; }
html.is-phone .pl-waiting { padding: 24px 10px; }
html.is-phone .pl-wbig { font-size: 18px; }

html.is-phone .pl-grid { gap: 14px 10px; }
html.is-phone .pl-pc { cursor: default; }
html.is-phone .pl-pc:hover .pl-cardbox { transform: none; box-shadow: none; }
html.is-phone .pl-pc:active .pl-cardbox { transform: scale(.97); }
html.is-phone .pl-legend { margin: 14px 4px 4px; font-size: 12px; }

/* =========================================================== squad tab */
html.is-phone #pl-squad .pl-phead { flex-direction: column; align-items: stretch; }
html.is-phone .pl-sqctl { display: flex; flex-wrap: wrap; gap: 8px; }
html.is-phone .pl-stat { flex: 1 1 0; text-align: center; padding: 6px 4px; }
html.is-phone .pl-mgr { flex: 1 1 100%; display: flex; align-items: flex-end; gap: 6px; }
html.is-phone .pl-sqctl .pl-field { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 3px; }
html.is-phone .pl-mgr .pl-field { flex: 1; min-width: 0; }
html.is-phone .pl-sqctl select, html.is-phone .pl-tactics select { width: 100%; max-width: none; min-height: 46px; font-size: 16px; border-radius: 9px; }
html.is-phone .pl-sqgrid, html.is-phone .pl-sqgrid.two { grid-template-columns: minmax(0, 1fr); gap: 10px; }
html.is-phone .pl-strength { font-size: 12px; }
html.is-phone .pl-strength .pl-dim { display: none; }
html.is-phone .pl-linkkey { font-size: 11px; line-height: 1.5; }
html.is-phone .pl-hint { font-size: 13px; }
html.is-phone .pl-hint.armed { position: sticky; top: calc(var(--ph-hdr) + 6px); z-index: 12; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
html.is-phone .pl-hint.armed > span { flex: 1; }
.ph-cancel { flex: none; min-height: 44px; padding: 0 14px; border-radius: 9px; font-weight: 800; color: #2a1a02; background: rgba(255, 255, 255, .55); border: 1px solid rgba(0, 0, 0, .35); }

/* the pitch is portrait here: taller than the desktop one so that 5 rows of cards fit in 375px */
html.is-phone .pl-pitchwrap { max-width: none !important; }
html.is-phone .pl-pitch { aspect-ratio: 68 / 100; border-radius: 12px; }
html.is-phone .pl-slot.filled { cursor: default; }
html.is-phone .pl-slot.filled:hover .pl-z { transform: none; filter: none; }
html.is-phone .pl-slot.filled:hover { z-index: 2; }
html.is-phone .pl-x, html.is-phone .pl-slotbar .pl-role { display: none; }       /* remove + role live in the slot menu on a phone */
html.is-phone .pl-spos { font-size: 13px; padding: 1px 5px; } html.is-phone .pl-spos small { font-size: 11px; }
html.is-phone .pl-chem { width: 21px; height: 21px; font-size: 14px; top: 52px; left: 2px; }
html.is-phone .pl-ph .pl-phl { font-size: 20px; } html.is-phone .pl-ph small { font-size: 11px; }
html.is-phone .pl-bench { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 12px 10px; gap: 8px; scrollbar-width: thin; }
html.is-phone .pl-bench .pl-slot { flex: none; }
html.is-phone .pl-bar { margin: 8px 0; }
html.is-phone .pl-bar > .pl-dim { display: none; }
html.is-phone .pl-bar .pl-btn { flex: 1 1 100%; min-height: 50px; font-size: 16px; }
html.is-phone .pl-stick { bottom: calc(var(--ph-tab) + var(--ph-bot)); margin-left: -8px; margin-right: -8px; padding: 10px 8px; }
html.is-phone .pl-stick .pl-btn { flex: 1 1 0; }
html.is-phone .pl-tactics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.is-phone .pl-ok, html.is-phone .pl-problems { font-size: 13px; }
html.is-phone .pl-sect { margin: 14px 0 8px; }

/* ---- squad tab: pitch (about 55% of the screen) + bench + strip of picks; Setup tab: formation, manager, tactics, submit ---- */
html.is-phone #pl-main[data-tab="squad"] .ph-setup, html.is-phone #pl-main[data-tab="setup"] .ph-sqmain { display: none; }
html.is-phone #pl-main[data-tab="squad"] #pl-squad .pl-phead { min-height: 0; padding: 0; border: 0; height: 0; overflow: visible; background: none; }
html.is-phone #pl-main[data-tab="squad"] #pl-squad .pl-phead > :not(#pl-ring-squad) { display: none; }
html.is-phone #pl-main[data-tab="squad"] #pl-squad .pl-pbody { padding: 0; }
html.is-phone #pl-main[data-tab="squad"] .pl-panel { margin-bottom: 0; }
html.is-phone #pl-main[data-tab="squad"] .pl-ring { width: 46px; height: 46px; margin: 0; }
html.is-phone #pl-main[data-tab="squad"] .pl-ring b { font-size: 17px; }
html.is-phone #pl-main[data-tab="squad"] #pl-ring-squad { top: calc(var(--ph-hdr) + 4px); right: calc(6px + var(--ph-r)); }
html.is-phone #pl-main[data-tab="squad"] { padding: 0 6px; }
html.is-phone .ph-sqgrid { display: block; }
.ph-sqmain { display: flex; flex-direction: column; gap: 4px; height: calc(100vh - var(--ph-hdr) - var(--ph-tab) - var(--ph-bot) - 12px); height: calc(100dvh - var(--ph-hdr) - var(--ph-tab) - var(--ph-bot) - 12px); min-height: 440px; padding-top: 4px; }
.ph-sqmain > * { flex: none; }
.ph-stat { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px; font-size: 15px; }
body.pl-podmode .ph-stat { padding-right: 56px; }
.ph-stat3 { white-space: nowrap; } .ph-stat3 b { font-size: 17px; }
.ph-tip { margin-left: auto; color: var(--pl-dim); font-size: 12px; text-align: right; line-height: 1.2; }
.ph-selinfo { flex: 1; min-width: 0; display: grid; line-height: 1.2; font-size: 15px; }
.ph-selinfo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-selinfo small { color: #f3d77c; font-size: 12px; }
.ph-sbtn { flex: none; min-height: 40px; min-width: 64px; padding: 0 12px; border-radius: 9px; font-weight: 800; font-size: 14px; color: #e8ecf8; background: rgba(255, 255, 255, .1); border: 1px solid #4a527c; }
.ph-sbtn.ph-cancel { color: #2a1a02; background: linear-gradient(180deg, #f3d77c, #c59326); border-color: #fff0a8; }
.ph-sqmain .pl-pitchwrap { flex: 0 1 55vh; flex: 0 1 55dvh; min-height: 360px; width: 100%; margin: 0; }
.ph-sqmain .pl-pitch { aspect-ratio: auto; height: 100%; }
.ph-sqmain .pl-slot { touch-action: none; }
.ph-sqmain .pl-slot.empty .pl-ph { border-color: rgba(255, 255, 255, .6); }
html.is-phone .ph-bench.pl-bench { overflow: hidden; }
html.is-phone body[data-phtab="squad"][data-view="draft"] .pl-nav { display: none; }      /* more room for the pitch */
html.is-phone .ph-bench.pl-bench { flex-wrap: nowrap; justify-content: space-between; padding: 4px 5px; gap: 3px; border-radius: 9px; }
html.is-phone .ph-bench .pl-z { zoom: var(--ph-bs, .6); }
html.is-phone .ph-bench .pl-slot { width: calc(76px * var(--ph-bs, .6)); }
.ph-bench .pl-ph .pl-phl { font-size: 14px; } .ph-bench .pl-ph small { display: none; }
.ph-benchlock { text-align: center; font-size: 12px; color: var(--pl-dim); padding: 6px; border-radius: 9px; background: rgba(0, 0, 0, .3); }
html.is-phone .ph-sqmain .pl-chem { top: 52px; }
.pl-slot.ph-glow .pl-z, .pl-slot.ph-glow .pl-ph { outline: 3px solid #5ee79a; outline-offset: 2px; border-radius: 9px; animation: pl-pulse 1.1s ease-in-out infinite; }
.pl-slot.ph-glow.pl-slot.filled .pl-z { filter: drop-shadow(0 0 8px rgba(94, 231, 154, .9)); }
.pl-slot.ph-off { opacity: .45; }
.pl-slot.ph-selslot .pl-z, .pl-slot.ph-selslot .pl-ph { outline: 3px solid var(--pl-gold); outline-offset: 2px; border-radius: 9px; }
.pl-slot.ph-over .pl-z, .pl-slot.ph-over .pl-ph { outline: 3px solid #7ee8ff; outline-offset: 2px; border-radius: 9px; }
.ph-chip.ph-over { outline: 2px solid #7ee8ff; }
.ph-strip.ph-over { outline: 2px dashed #7ee8ff; outline-offset: -2px; }
.ph-strip { border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid var(--pl-line); padding: 4px 0 2px; }
.ph-chips { display: flex; gap: 6px; padding: 0 6px 4px; overflow-x: auto; scrollbar-width: none; }
.ph-chip { flex: 1 0 auto; min-height: 40px; min-width: 44px; padding: 0 10px; border-radius: 20px; font-weight: 800; font-size: 14px; color: #b9c4e6; background: rgba(255, 255, 255, .06); border: 1px solid #343a5c; }
.ph-chip.on { color: #2a1a02; background: linear-gradient(180deg, #f3d77c, #c59326); border-color: #fff0a8; }
.ph-chip.off { opacity: .45; }
.ph-cards { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 4px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-height: 88px; }
.ph-sc { position: relative; flex: none; width: 52px; touch-action: pan-x; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; border-radius: 7px; }
.ph-scz { zoom: .66; }
.ph-scl { display: block; text-align: center; font-size: 12px; font-weight: 800; line-height: 16px; color: #dfe6fb; white-space: nowrap; }
.ph-scl.part { color: var(--pl-amber); }
.ph-sc.placed .ph-scz { opacity: .5; }
.ph-sc.armed { outline: 3px solid var(--pl-gold); outline-offset: 1px; }
.ph-tag { position: absolute; top: -2px; right: -2px; font-style: normal; font-size: 10px; font-weight: 900; padding: 1px 4px; border-radius: 5px; background: #000b; color: #fff; border: 1px solid #fff4; }
.ph-none { align-self: center; padding: 10px; color: var(--pl-dim); font-size: 13px; }
.ph-ghost { position: fixed; z-index: 120; pointer-events: none; transform: translate(-50%, -60%) scale(.9); opacity: .92; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); }
body.ph-dragging { -webkit-user-select: none; user-select: none; }
html.is-phone .ph-setup .pl-bar { margin: 8px 0; }
html.is-phone .ph-setup .pl-linkkey { margin-top: 8px; }

/* =========================================================== picks tab */
html.is-phone .pl-picks-scroll { flex: none; max-height: none; min-height: 0; overflow: visible; padding-right: 0; }
html.is-phone .pl-resbox .pl-zone { max-height: none; }
html.is-phone .pl-gh { min-height: 34px; margin: 12px 0 4px; }
.ph-row { gap: 8px; min-height: 54px; padding: 4px 4px 4px 6px; cursor: default; }
html.is-phone .pl-row:hover { transform: none; background: rgba(255, 255, 255, .045); }
html.is-phone .pl-row:active { background: rgba(255, 255, 255, .14); }
.ph-row .pl-rovr { width: 32px; font-size: 17px; }
.ph-rmain { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.ph-rmain .pl-rname { flex: none; font-size: 15px; }
.ph-rsub { font-size: 12px; color: var(--pl-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-rsub b { color: #bff5d2; font-size: 11px; }
.ph-ricons { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.ph-row .pl-tiny { min-width: 44px; min-height: 44px; padding: 0 8px; font-size: 14px; border-radius: 9px; }
.ph-row .pl-mark.mgr { padding: 6px 8px; }
html.is-phone .pl-zone { padding: 4px; }
html.is-phone .pl-colors { margin-bottom: 4px; }

/* =========================================================== season screens (season.js) */
html.is-phone .pl-view { padding: 10px 8px calc(104px + var(--ph-bot)); overflow: visible; }
html.is-phone .pv-head { gap: 8px; margin-bottom: 8px; }
html.is-phone .pv-head > div:first-child { min-width: 0; flex: 1 1 100%; }
html.is-phone .pv-h1 { font-size: 22px; }
html.is-phone .pv-sub { font-size: 11px; }
/* Next / Skip / Previous are pinned to the bottom of the screen */
html.is-phone body[data-view="season"] .pv-ctl {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-wrap: nowrap; gap: 8px;
  padding: 8px calc(8px + var(--ph-r)) calc(8px + var(--ph-bot)) calc(8px + var(--ph-l)); background: linear-gradient(180deg, #181d33, #0a0c15); border-top: 1px solid #3a3320; box-shadow: 0 -6px 20px rgba(0, 0, 0, .55);
}
html.is-phone .pv-ctl .pl-btn { flex: 1 1 0; min-height: 52px; padding: 0 8px; font-size: 15px; }
html.is-phone .pv-ctl .pl-gold { flex: 2 1 0; font-size: 17px; font-weight: 900; }
html.is-phone .pv-card { padding: 10px; margin-bottom: 10px; }
html.is-phone .pv-tabs { gap: 6px; margin: 10px 0 8px; }
html.is-phone .pv-tab, html.is-phone .pv-tabs.sub .pv-tab { flex: 1 1 auto; min-height: 44px; padding: 0 12px; font-size: 14px; }
html.is-phone .pv-tlh { gap: 6px; padding: 6px 0 10px; }
html.is-phone .pv-tlh .tm b { font-size: 14px; }
html.is-phone .pv-tlh .sc { font-size: 32px; }
html.is-phone .pv-tle { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); font-size: 13px; min-height: 36px; }
html.is-phone .pv-tle .tx { overflow-wrap: anywhere; }
html.is-phone .pv-tle .pv-av { display: none; }
html.is-phone .pv-tle .l, html.is-phone .pv-tle .r { gap: 5px; }
html.is-phone .pv-res { grid-template-columns: minmax(0, 1fr) 20px 52px 20px minmax(0, 1fr); gap: 5px; min-height: 36px; font-size: 13px; }
html.is-phone .pv-md { grid-template-columns: minmax(0, 1fr); }

/* league table: # / team / P / GD / Pts first (season.js orders the columns); the rest scrolls sideways, # and team stay put */
html.is-phone .pv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html.is-phone .pv-tbl { font-size: 13px; }
html.is-phone .pv-tbl th, html.is-phone .pv-tbl td { padding: 8px 7px; }
html.is-phone .pv-tbl .tm { max-width: 150px; overflow: hidden; }
html.is-phone .pv-tbl .tm span:not(.pv-crest) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.is-phone .pv-tbl.lg th:nth-child(1), html.is-phone .pv-tbl.lg td:nth-child(1), html.is-phone .pv-tbl.lg th:nth-child(2), html.is-phone .pv-tbl.lg td:nth-child(2),
html.is-phone .pv-tbl.sq th:first-child, html.is-phone .pv-tbl.sq td:first-child,
html.is-phone .pv-tbl.pl th:first-child, html.is-phone .pv-tbl.pl td:first-child { position: sticky; z-index: 2; background: #121628; }
html.is-phone .pv-tbl.lg th:nth-child(1), html.is-phone .pv-tbl.lg td:nth-child(1) { left: 0; width: 34px; min-width: 34px; padding-left: 8px; padding-right: 2px; }
html.is-phone .pv-tbl.lg th:nth-child(2), html.is-phone .pv-tbl.lg td:nth-child(2) { left: 34px; box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .8); }
html.is-phone .pv-tbl.sq th:first-child, html.is-phone .pv-tbl.sq td:first-child, html.is-phone .pv-tbl.pl th:first-child, html.is-phone .pv-tbl.pl td:first-child { left: 0; max-width: 132px; overflow: hidden; text-overflow: ellipsis; box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .8); }
html.is-phone .pv-tbl td.pn .pv-av { display: none; }
html.is-phone .pv-tbl tr.you td:nth-child(-n+2), html.is-phone .pv-tbl.lg tr.you td { background: #2e2a1c; }
html.is-phone .pv-tbl tr.motm td:first-child { background: #2e2a1c; }
html.is-phone .pv-tbl.lg tr.you { box-shadow: none; } html.is-phone .pv-tbl.lg tr.you td:first-child { box-shadow: inset 4px 0 0 var(--pl-gold); }
html.is-phone .pv-tbl.lg tr.zone td:first-child { box-shadow: inset 4px 0 0 var(--pl-green); } html.is-phone .pv-tbl.lg tr.zonep td:first-child { box-shadow: inset 4px 0 0 var(--pl-amber); }
html.is-phone .pv-tbl.lg tr.you.zone td:first-child, html.is-phone .pv-tbl.lg tr.you.zonep td:first-child { box-shadow: inset 4px 0 0 var(--pl-gold); }
html.is-phone .pv-tbl.lg tr.zone, html.is-phone .pv-tbl.lg tr.zonep { box-shadow: none; }
html.is-phone .pv-tbl.compact th, html.is-phone .pv-tbl.compact td { padding: 7px 6px; font-size: 13px; }
html.is-phone .pv-tbl th.sortable { min-height: 44px; }

html.is-phone .pv-fx { grid-template-columns: 38px minmax(0, 1fr) 58px minmax(0, 1fr) 26px; gap: 6px; padding: 8px 8px; min-height: 48px; }
html.is-phone .pv-fx > .pv-dim, html.is-phone .pv-fx .pv-crest { display: none; }
html.is-phone .pv-fx:hover { transform: none; }
html.is-phone .pv-fxn { font-size: 13px; } html.is-phone .pv-fxs { font-size: 15px; }
html.is-phone .pv-fxnote { margin-left: 8px; }
html.is-phone .pv-summary { gap: 8px; }
html.is-phone .pv-sbox { flex: 1 1 140px; padding: 10px 12px; }
html.is-phone .pv-sbox b { font-size: 22px; } html.is-phone .pv-sbox.big b { font-size: 34px; }
html.is-phone .pv-kick { padding: 22px 12px; } html.is-phone .pv-big { font-size: 22px; }
html.is-phone .pv-teams { grid-template-columns: minmax(0, 1fr); }
html.is-phone .pv-score { gap: 6px; } html.is-phone .pv-sc-num { font-size: 40px; } html.is-phone .pv-sc-team b { font-size: 15px; }
html.is-phone .pv-lead { grid-template-columns: 22px 34px minmax(0, 1fr) 34px; min-height: 44px; }
html.is-phone .pv-stat { grid-template-columns: 40px 1fr 40px; }

/* =========================================================== main menu (index.html) */
html.is-phone .mn-wrap { padding: calc(14px + var(--ph-top)) 14px calc(30px + var(--ph-bot)); gap: 16px; }
html.is-phone .mn-top { gap: 8px; }
html.is-phone .mn-logo { font-size: 34px; }
html.is-phone .mn-player { padding: 6px 12px; flex: 1 1 100%; justify-content: space-between; border-radius: 16px; }
html.is-phone .mn-player b { font-size: 16px; }
html.is-phone .mn-player a { padding: 12px 6px; font-size: 13px; }       /* tap area of "change name" */
html.is-phone .mn-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; }
html.is-phone .mn-actions { order: -1; gap: 12px; }
html.is-phone .mn-big { min-height: 72px; padding: 14px 18px; border-radius: 16px; align-content: center; }
html.is-phone .mn-big b { font-size: 22px; }
html.is-phone .mn-big small { font-size: 12px; line-height: 1.3; }
html.is-phone .mn-big:hover:not(:disabled) { transform: none; filter: none; }
html.is-phone .mn-big:active:not(:disabled) { transform: translateY(2px); filter: brightness(1.1); }
html.is-phone .mn-last { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
html.is-phone .mn-msg { min-height: 0; font-size: 14px; }
html.is-phone .mn-msg:empty { display: none; }
html.is-phone .mn-fan { --s: .5; height: 190px; margin-top: -4px; }
html.is-phone .mn-fan > div { bottom: 8px; }
html.is-phone .mn-fan:hover > div:nth-child(1) { transform: rotate(-16deg) translateX(calc(-70px * var(--s))) scale(var(--s)); }
html.is-phone .mn-fan:hover > div:nth-child(3) { transform: rotate(16deg) translateX(calc(70px * var(--s))) scale(var(--s)); }
html.is-phone .mn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.is-phone .mn-stats .mn-card:first-child { grid-column: 1 / -1; }
html.is-phone .mn-card { padding: 12px 14px; gap: 8px; border-radius: 14px; }
html.is-phone .mn-wallet { gap: 8px; }
html.is-phone .mn-wal { font-size: 22px; padding: 4px 12px 4px 8px; }
html.is-phone .mn-rating { font-size: 34px; }
html.is-phone .mn-rating small { display: block; margin: 4px 0 0; }
html.is-phone .mn-stats .mn-card:first-child .mn-dim { display: none; }
html.is-phone .mn-tools summary { min-height: 44px; display: flex; align-items: center; }
html.is-phone .mn-trow { gap: 8px; }
html.is-phone .mn-trow > b { flex: 1 1 100%; }
html.is-phone .mn-trow label { flex: 1 1 40%; flex-direction: column; align-items: stretch; gap: 3px; }
html.is-phone .mn-trow input, html.is-phone #mn-nameinput { width: 100%; min-height: 44px; }
html.is-phone .mn-overlay { padding: 10px; align-items: end; }
html.is-phone .mn-dialog { padding: 18px 16px calc(16px + var(--ph-bot)); border-radius: 18px; }
html.is-phone .mn-actionsrow .pl-btn { flex: 1; min-height: 50px; }
html.is-phone .mn-seat { min-height: 44px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .ph-panel { animation: none; } }

/* ---- pack screen: facts strip stays under the pick header; compact list mode ---- */
html.is-phone #pl-pack .pl-facts { position: sticky; top: calc(var(--ph-hdr) + var(--ph-phead)); z-index: 6; background: #131829; margin: 0 0 8px; padding: 6px 8px; gap: 3px 8px; font-size: 12px; min-height: 36px; }
html.is-phone #pl-pack .pl-podstrip:not([hidden]) ~ .pl-pbody .pl-facts { top: calc(var(--ph-hdr) + var(--ph-phead) + 46px); }
html.is-phone .pl-ltoggle { min-width: 44px; min-height: 36px; }
html.is-phone .ph-list { display: flex; flex-direction: column; gap: 4px; }
html.is-phone .ph-lrow { min-height: 46px; margin: 0; padding: 4px 8px 4px 6px; cursor: default; font-size: 15px; }
html.is-phone .ph-lrow:active { background: rgba(255, 255, 255, .16); }
html.is-phone .ph-lrow .pl-lovr { font-size: 19px; width: 28px; }
html.is-phone .ph-lrow .pl-lpos { width: 34px; font-size: 12px; }
html.is-phone .ph-lrow .pl-rcode { width: 28px; }
html.is-phone .pl-frow { min-height: 38px; font-size: 14px; }
html.is-phone .ph-body .pl-flist { max-height: none; overflow: visible; background: none; padding: 0; }

/* ---- squad tab: pitch slots (rating in this slot, fit %, flag + league, link dots) ---- */
html.is-phone .ph-sqmain .pl-pitch .pl-z { zoom: 1; }
html.is-phone .ph-sqmain .pl-pitch .pl-slot { width: var(--ph-sw, 68px); }
html.is-phone .ph-sqmain .pl-pitch .pl-slotbar { display: none; }
html.is-phone .ph-sqmain .pl-pitch .pl-ph { width: 100%; height: var(--ph-sh, 76px); gap: 1px; border-radius: 8px; }
html.is-phone .ph-sqmain .pl-pitch .pl-ph .pl-phl { font-size: 17px; } html.is-phone .ph-sqmain .pl-pitch .pl-ph small { font-size: 9px; } html.is-phone .ph-sqmain .pl-pitch .pl-ph em { font-size: 9px; }
.ph-ps { height: var(--ph-sh, 76px); box-sizing: border-box; padding: 2px 4px 3px; border-radius: 8px; background: linear-gradient(180deg, rgba(20, 24, 44, .95), rgba(8, 10, 22, .95)); border: 2px solid #5b626f; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); color: #fff; }
.ph-ps.r-Uncommon { border-color: #c4cad2; } .ph-ps.r-Rare { border-color: #e0b13c; } .ph-ps.r-Mythic { border-color: #b57cff; box-shadow: 0 0 8px rgba(181, 124, 255, .55); }
.ph-pst { display: flex; align-items: baseline; gap: 3px; position: relative; line-height: 1; }
.ph-psr { font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.ph-psp { font-size: 10px; font-weight: 800; color: #b9c2dc; }
.ph-pschem { position: absolute; right: -1px; top: -1px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 900; color: #0d1008; border: 1px solid #000; }
.ph-pschem.c0 { background: var(--pl-red); } .ph-pschem.c1 { background: #fb923c; } .ph-pschem.c2 { background: var(--pl-amber); } .ph-pschem.c3 { background: var(--pl-green); }
.ph-psn { font-size: 10px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-psi { display: flex; align-items: center; gap: 3px; height: 16px; } .ph-psi .pl-ic svg { display: block; }
.ph-psf { margin-left: auto; font-size: 9px; font-weight: 900; padding: 0 3px; border-radius: 4px; background: var(--pl-red); color: #240608; }
.ph-psb { display: flex; align-items: center; justify-content: space-between; gap: 2px; line-height: 1; min-height: 11px; }
.ph-psfit { font-size: 10px; font-weight: 800; color: #cdeea0; } .ph-psfit.ok { color: #cdeea0; } .ph-psfit.mid { color: var(--pl-amber); } .ph-psfit.bad { color: var(--pl-red); }
.ph-psd { display: inline-flex; gap: 2px; } .ph-psd i { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.ph-ghost .ph-ps { width: 66px; }

/* impact toast (squad screen only) */
.pl-impact { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 130; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; white-space: nowrap; color: #fff; background: #1b2140; border: 2px solid #8a93b8; box-shadow: 0 8px 22px rgba(0, 0, 0, .6); transition: opacity .2s, transform .2s; }
.pl-impact.show { opacity: 1; transform: translate(-50%, 0); }
.pl-impact.up { border-color: #4ade80; color: #bff5d2; } .pl-impact.down { border-color: #f87171; color: #ffc6c6; }