/* ===================== THE PHONE PLAY FLOW (2026-10-15, PHONE UI lane 1) =====================
   Home (S3), the search on PLAY (7.22), the Mode Picker (S4), Create Match (S5), the Server Browser (S6), the Pregame Lobby
   (S7), Events (S18), the front door and the sign-in sheet (S1, S2): scratchpad mobile/design SCREEN-SPECS.md, mockups.html
   frames 1-8 and 19, built on client/css/phone-ui.css (lane 0: tokens, components, the shell). The views are
   client/js/phone/play.js, frontdoor.js, creatematch.js, servers.js, pregame.js, events.js.
   PHONES ONLY: every selector starts with html.is-phone; colours, spacing, durations and faces are --p- tokens (rail T29);
   no 100vh, no backdrop-filter; transform and opacity are the only animated properties. Desktop, console and tablet never
   match a rule here (T33 proves their pixels unchanged). The sideways phone's home (S26) is lane 4's. */

html.is-phone {
  /* the play flow's named colours (T29: a colour is a token) */
  --p-ped-ring: rgba(84, 200, 255, 0.75); --p-ped-ring-2: rgba(159, 227, 255, 0.5);
  --p-ped-fill: rgba(84, 200, 255, 0.22); --p-ped-fill-0: rgba(84, 200, 255, 0);
  --p-slot-fill: rgba(10, 26, 44, 0.92);
  --p-cap-plate: rgba(6, 17, 32, 0.9);   /* the caption strip on map art: words never sit on a picture */
  --p-fd-wash-1: rgba(4, 12, 24, 0.88); --p-fd-wash-2: rgba(4, 10, 20, 0.94);
  --p-shot-fade: rgba(6, 17, 32, 0.92); --p-shot-fade-0: rgba(6, 17, 32, 0);
  --p-sweep: rgba(84, 200, 255, 0.95);
  --p-locked: rgba(2, 6, 12, 0.62);
  /* the play flow's geometry */
  --p-hero-min: 180px; --p-dock-gap: 12px;
}

/* ------------------------------------------------------------------------------------------------ HOME (S3)
   The page's column: the hero takes what the dock leaves (at least 180), then the mode chip glued 12 above PLAY, then the
   two tiles. On a tall phone a spacer under the tiles holds PLAY's centre at about 73% of the safe height (T3: 55-75%). */
html.is-phone .p-rootview[data-p-screen="home"] { flex: 1 0 auto; }
html.is-phone .p-home {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(var(--p-hero-min), 1fr) auto auto;
  min-height: calc(var(--p-app-h) - var(--p-chrome-t) - var(--p-tab-h) - var(--p-inset-b) - var(--p-s4) - var(--p-s6));
  width: 100%; max-width: var(--p-col-max); margin: 0 auto;
}
html.is-phone .p-home-spacer, html.is-phone .p-home::after {
  content: ""; display: block; grid-row: 3;
  height: max(0px, calc((var(--p-app-h) - var(--p-inset-t) - var(--p-inset-b)) * 0.27 - 200px));
}
/* the hero (7.9): the customize preview's canvas, moved here and drawn on demand; the pedestal is painted once */
html.is-phone .p-hero {
  position: relative; grid-row: 1; display: flex; align-items: flex-end; justify-content: center; min-height: var(--p-hero-min);
  margin-top: calc(-1 * var(--p-s4)); margin-bottom: var(--p-s3); cursor: grab; touch-action: pan-y; outline: none;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
html.is-phone .p-hero:focus-visible { outline: 3px solid var(--p-ice); outline-offset: -3px; }
/* the hero's 3D box is capped (rail T37 / design 10.3: at most 393 x 389 CSS px), centred over the pedestal */
html.is-phone .p-hero-stage { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: 0; margin: auto auto 0; max-width: 393px; max-height: 389px; }
html.is-phone .p-hero-stage #preview-canvas { display: block; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; margin: 0; background: none; border: 0; pointer-events: none; }
html.is-phone .p-hero-ped {
  position: absolute; left: 50%; bottom: 0; width: 264px; height: 64px; transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(closest-side, var(--p-ped-fill), var(--p-ped-fill-0)),
    radial-gradient(closest-side, transparent 86%, var(--p-ped-ring) 88%, var(--p-ped-ring) 90%, transparent 92%),
    radial-gradient(closest-side, transparent 58%, var(--p-ped-ring-2) 60%, transparent 62%);
}
/* placed by play.js (placePedestal): centred on the preview's ground circle under the boots, sized to its projection */
html.is-phone .p-hero-ped.is-placed { left: var(--p-ped-x); top: var(--p-ped-y); bottom: auto; width: var(--p-ped-w); height: var(--p-ped-h); transform: translate(-50%, -50%); }
html.is-phone .p-hero-sacred { position: absolute; left: calc(25%); right: calc(25%); top: calc(6%); height: 52%; pointer-events: none; }
/* the party slots (7.9): flank the hero at its mid height, 56 x 80; an empty one is the invite, a member a name plate */
html.is-phone .p-pslot {
  position: absolute; z-index: 2; top: calc(38%); width: 56px; min-height: 80px; padding: var(--p-s2) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-s1);
  background: var(--p-slot-fill); border: 1.5px dashed var(--p-line-ui); color: var(--p-holo); cursor: pointer;
  clip-path: polygon(var(--p-cut-s) 0, 100% 0, 100% calc(100% - var(--p-cut-s)), calc(100% - var(--p-cut-s)) 100%, 0 100%, 0 var(--p-cut-s));
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html.is-phone .p-pslot--l { left: 0; }
html.is-phone .p-pslot--r { right: 0; }
html.is-phone .p-pslot:active { transform: scale(0.97); }
html.is-phone .p-pslot .p-pslot-lbl { font: var(--p-t-micro); letter-spacing: var(--p-tr-micro); }
html.is-phone .p-pslot.is-member { width: 88px; border-style: solid; border-color: var(--p-line); background: var(--p-plate); color: var(--p-ice); }
html.is-phone .p-pslot--l.is-member { left: 0; }
html.is-phone .p-pslot--r.is-member { right: 0; }
html.is-phone .p-pslot-emb { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--p-holo); }
html.is-phone .p-pslot-emb img { width: 32px; height: 32px; object-fit: contain; }
html.is-phone .p-pslot-nm { max-width: 80px; font: 700 calc(13px * var(--p-ts)) / calc(15px * var(--p-ts)) var(--p-f-ui); letter-spacing: 0.04em; text-transform: uppercase; }
html.is-phone .p-pslot-st { display: inline-flex; align-items: center; gap: var(--p-s1); font: var(--p-t-micro); letter-spacing: var(--p-tr-micro); }
html.is-phone .p-pslot-st .p-ic { width: 14px; height: 14px; stroke-width: 2.6; }
html.is-phone .p-pslot-more { font: var(--p-t-micro); color: var(--p-text-2); }
/* the rejoin banner (S3): over the top of the hero, the second most prominent element, never amber */
html.is-phone .p-rejoin { position: absolute; z-index: 3; left: 0; right: 0; top: 0; min-height: 56px; display: flex; align-items: center; gap: var(--p-s3);
  padding: var(--p-s1) var(--p-s2) var(--p-s1) var(--p-s4); --p-fill: var(--p-plate); --p-bc: var(--p-line-ui); }
html.is-phone .p-rejoin[hidden] { display: none; }
html.is-phone .p-rejoin-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html.is-phone .p-rejoin-txt b { font: var(--p-t-label); letter-spacing: var(--p-tr-label); color: var(--p-holo); }
html.is-phone .p-rejoin-sub { font: var(--p-t-caption); color: var(--p-ice); }
html.is-phone .p-home.has-rejoin .p-hero-sacred { top: calc(18%); }
/* the dock: chip, PLAY, tiles */
html.is-phone .p-home-dock { grid-row: 2; display: flex; flex-direction: column; gap: var(--p-dock-gap); }
html.is-phone .p-home-dock .p-home-tiles { margin-top: var(--p-s1); }
html.is-phone .p-modechip .p-mc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-phone .p-playrow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--p-s2); }
html.is-phone .p-home.is-searching .p-playrow { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
html.is-phone .p-playrow > [hidden] { display: none; }
html.is-phone .p-play { width: 100%; }
html.is-phone .p-play .p-play-lbl { font-family: var(--p-f-num-disp); white-space: nowrap; }
html.is-phone .p-home.is-searching .p-play .p-play-lbl { font-size: calc(20px * var(--p-ts)); letter-spacing: 0.06em; }
html.is-phone .p-play-cancel { min-height: 64px; width: 100%; padding: 0 var(--p-s2); }
/* the sweep along PLAY while searching (7.22): one transform animation on a 2 px bar, nothing else moves */
html.is-phone .p-home.is-searching .p-playrow::before {
  content: ""; position: absolute; z-index: 2; left: 0; top: var(--p-hair-up); width: 40%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--p-sweep), transparent);
  animation: p-sweep var(--p-dur-shimmer) var(--p-ease-std) infinite alternate;
}
@keyframes p-sweep { from { transform: translateX(0); } to { transform: translateX(150%); } }
html.is-phone.p-rm .p-home.is-searching .p-playrow::before { animation: none; }
@media (prefers-reduced-motion: reduce) { html.is-phone .p-home.is-searching .p-playrow::before { animation: none; } }
/* a party member waits (S3): the leader's activity in PLAY's footprint, a plate, not a button */
html.is-phone .p-wait { min-height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; padding: 0 var(--p-s4); text-align: center;
  --p-fill: var(--p-raise); --p-bc: var(--p-line-ui); }
html.is-phone .p-wait-lbl { font: var(--p-t-button); letter-spacing: var(--p-tr-button); text-transform: uppercase; }
html.is-phone .p-wait-sub { font: var(--p-t-caption); color: var(--p-text-2); }
/* the tiles (7.10) */
html.is-phone .p-home-tiles .p-tile { position: relative; min-height: 64px; gap: var(--p-s1); }
html.is-phone .p-home-tiles .p-tile .p-progress { margin-top: var(--p-s1); }
html.is-phone .p-home-tiles .p-tile .p-dot { position: absolute; top: var(--p-s2); right: var(--p-s2); }
html.is-phone .p-home-tiles .p-tile-line { display: block; }
/* a short phone: the hero shrinks first; under 180 the tiles become 44 px chips (S3) */
html.is-phone .p-rootview[data-p-screen="home"] { container-type: size; container-name: p-home; height: auto; }
@container p-home (max-height: 470px) {
  html.is-phone .p-home-tiles .p-tile { min-height: 44px; flex-direction: row; align-items: center; justify-content: space-between; }
  html.is-phone .p-home-tiles .p-tile .p-progress, html.is-phone .p-home-tiles .p-tile-line { display: none; }
}

/* ------------------------------------------------------------------------------------------------ MODE PICKER (S4) */
html.is-phone .p-picker { display: flex; flex-direction: column; gap: var(--p-s3); }
html.is-phone .p-picker-body { display: flex; flex-direction: column; gap: var(--p-s3); }
html.is-phone .p-picker-body > .p-section-label { margin: var(--p-s3) 0 0; }
html.is-phone .p-pl { display: flex; flex-direction: column; gap: 0; --p-c: var(--p-cut-m); --p-bw: 1px; --p-bc: var(--p-line-ui); --p-fill: var(--p-raise); }
html.is-phone .p-pl.is-sel { --p-bc: var(--p-holo); --p-bw: 2px; --p-fill: var(--p-sel); }
html.is-phone .p-pl-hit {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--p-s3);
  width: 100%; min-height: 88px; padding: var(--p-s3); background: none; border: 0; color: var(--p-ice); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
html.is-phone .p-pl-hit:active { transform: scale(0.99); }
html.is-phone .p-pl-art { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: var(--p-holo); --p-c: var(--p-cut-s); --p-bw: 1px; --p-bc: var(--p-line-ui); --p-fill: var(--p-emb-fill); }
html.is-phone .p-pl-art img { width: 56px; height: 56px; object-fit: contain; }
html.is-phone .p-pl-txt { display: flex; flex-direction: column; gap: 0; min-width: 0; }
html.is-phone .p-pl-name { font: var(--p-t-headline); letter-spacing: var(--p-tr-headline); text-transform: uppercase; }
html.is-phone .p-pl-new { display: inline-block; vertical-align: 2px; margin-left: var(--p-s1); padding: var(--p-tag-y) var(--p-s1); border: 1px solid var(--p-gain); color: var(--p-gain); font: var(--p-t-micro); letter-spacing: var(--p-tr-micro); }
html.is-phone .p-pl-desc { font: var(--p-t-caption); color: var(--p-text-2); }
html.is-phone .p-pl-maps { font: var(--p-t-caption); color: var(--p-text-3); }
html.is-phone .p-pl-seats { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 56px; }
html.is-phone .p-pl-seats b { font: var(--p-t-display); font-family: var(--p-f-num-disp); line-height: 1; }
html.is-phone .p-pl-seats small { font: var(--p-t-micro); letter-spacing: var(--p-tr-micro); color: var(--p-text-2); }
html.is-phone .p-pl .p-check { top: var(--p-s2); right: var(--p-s2); }
html.is-phone .p-pl .p-check { position: absolute; width: 24px; height: 24px; border-radius: 12px; background: var(--p-holo); color: var(--p-check-ink); display: flex; align-items: center; justify-content: center; }
html.is-phone .p-pl-seg { margin: 0 var(--p-s3) var(--p-s3); width: auto; }
html.is-phone .p-pl-hit + .p-pl-seg { margin-top: var(--p-s2); }   /* lane 7: 8 px between the card's tap area and the seat selector (T7) */
html.is-phone .p-pl .p-reason { margin: 0 var(--p-s3) var(--p-s3); text-align: left; }
html.is-phone .p-pl.is-locked .p-pl-hit { opacity: 0.55; }
html.is-phone .p-pl-wagerhead { margin-top: var(--p-s3); }
html.is-phone .p-pl-signin { align-self: center; }
html.is-phone .p-pl-funded { --p-c: var(--p-cut-m); min-height: 64px; color: var(--p-ice); }
html.is-phone .p-pl-funded > .p-ic:first-child { color: var(--p-holo); }
html.is-phone .p-cm-cards .p-card { align-items: center; min-height: 88px; }
html.is-phone .p-cm-cards .p-card > .p-ic--l { color: var(--p-holo); }
html.is-phone .p-cm-cards .p-card > span { flex: 1 1 auto; display: flex; flex-direction: column; }
html.is-phone .p-card-ttl { font: var(--p-t-headline); letter-spacing: var(--p-tr-headline); text-transform: uppercase; }
html.is-phone .p-card-sub { font: var(--p-t-caption); color: var(--p-text-2); }
html.is-phone .p-row .p-btn--sm { flex: none; }

/* ------------------------------------------------------------------------------------------------ THE ACTION BAR
   A pushed page's commit (shell.js push({ action })): 16 above, the primary 64, the home indicator under it (3.2). */
html.is-phone.p-shell #p-actionbar:not([hidden]) {
  position: relative; z-index: 3; display: block;
  padding: var(--p-s4) var(--p-gutter-r) max(var(--p-s4), var(--p-inset-b)) var(--p-gutter-l);
  background: linear-gradient(180deg, var(--p-bar-1), var(--p-bar-2)); border-top: var(--p-hair) solid var(--p-holo-hair);
}
html.is-phone :is(.p-cm-act, .p-pg-act, .p-sv-act) { display: flex; flex-direction: column; gap: var(--p-s3); width: 100%; max-width: var(--p-col-max); margin: 0 auto; }
html.is-phone :is(.p-cm-act, .p-pg-act) .p-reason { margin: 0; }
html.is-phone :is(.p-cm-act, .p-pg-act, .p-sv-act) [hidden] { display: none; }

/* ------------------------------------------------------------------------------------------------ CREATE MATCH (S5) */
html.is-phone :is(.p-create, .p-pregame, .p-servers) { display: flex; flex-direction: column; gap: var(--p-s3); width: 100%; max-width: var(--p-col-max); margin: 0 auto; }
html.is-phone .p-cm-card { position: relative; min-height: 180px; overflow: hidden; --p-fill: var(--p-raise); --p-bc: var(--p-line); }
html.is-phone .p-cm-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.is-phone .p-cm-over { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; min-height: 72px; display: flex; flex-direction: column; justify-content: center;
  padding: var(--p-s2) calc(3 * var(--p-s12)) var(--p-s2) var(--p-s4); background: var(--p-cap-plate); }
html.is-phone .p-cm-mode, html.is-phone .p-pg-mode { font: var(--p-t-label); letter-spacing: var(--p-tr-label); color: var(--p-holo); }
html.is-phone .p-cm-map, html.is-phone .p-pg-map { font: var(--p-t-title); letter-spacing: var(--p-tr-title); color: var(--p-ice); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-phone .p-cm-mapbtn { position: absolute; z-index: 1; right: var(--p-s3); bottom: var(--p-s3); }
html.is-phone .p-cm-note { min-height: 0; padding: var(--p-s2) var(--p-s4); gap: var(--p-s2); align-items: flex-start; font: var(--p-t-caption); color: var(--p-text-2); cursor: default; }
html.is-phone .p-cm-note .p-ic { color: var(--p-holo); margin-top: var(--p-s1); }
html.is-phone .p-row--field { cursor: default; flex-wrap: wrap; padding-top: var(--p-s2); padding-bottom: var(--p-s2); }
html.is-phone .p-row--field .p-row-lbl { flex: 1 0 100%; font: var(--p-t-label); letter-spacing: var(--p-tr-label); color: var(--p-text-2); }
html.is-phone .p-row.is-locked .p-row-lbl small, html.is-phone .p-row--sub.is-locked .p-row-lbl small { color: var(--p-warn); }
html.is-phone :is(.p-row[aria-disabled="true"], .p-row:disabled) { color: var(--p-text-2); }   /* words stay >= 4.5:1 (5.2); the marks dim */
html.is-phone :is(.p-row[aria-disabled="true"], .p-row:disabled) :is(.p-row-chev, .p-ic) { opacity: 0.45; }
html.is-phone .p-row[aria-selected="true"] { background: var(--p-sel); }
html.is-phone .p-cm-stakes { display: flex; flex-direction: column; gap: var(--p-s3); }
html.is-phone .p-cm-stakes[hidden], html.is-phone .p-cm-stakes [hidden] { display: none; }
html.is-phone .p-cm-stakes .p-reason { text-align: left; margin: 0; }
html.is-phone .p-cm-act .p-cm-why { color: var(--p-loss); }
html.is-phone .p-cm-act .p-seg-btn[aria-disabled="true"] { color: var(--p-text-3); }
/* the map sheet: 2-up tiles, a darkened map says why */
html.is-phone .p-mapsheet { display: flex; flex-direction: column; gap: var(--p-s3); }
html.is-phone .p-mapsheet [hidden] { display: none; }
html.is-phone .p-maptiles { gap: var(--p-s3); }
html.is-phone .p-maptile { position: relative; display: block; min-height: 120px; padding: 0; border: 0; background: none; color: var(--p-ice); cursor: pointer; overflow: hidden; text-align: left;
  --p-c: var(--p-cut-s); --p-bw: 1px; --p-bc: var(--p-line-ui); --p-fill: var(--p-raise); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html.is-phone .p-maptile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

html.is-phone .p-maptile.is-sel { --p-bc: var(--p-holo); --p-bw: 2px; }
html.is-phone .p-maptile-name { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: var(--p-s1) var(--p-s2); background: var(--p-cap-plate); font: 700 calc(14px * var(--p-ts)) / calc(18px * var(--p-ts)) var(--p-f-ui); letter-spacing: 0.06em; text-transform: uppercase; }
html.is-phone .p-maptile.is-locked img { opacity: 0.35; }
html.is-phone .p-maptile-lock { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-s1); padding: var(--p-s2) var(--p-s2) var(--p-s8);
  background: var(--p-locked); color: var(--p-ice); text-align: center; font: var(--p-t-micro); letter-spacing: 0; text-transform: none; }
html.is-phone .p-maptile-lock small { font: 600 calc(12px * var(--p-ts)) / calc(15px * var(--p-ts)) var(--p-f-ui); }
html.is-phone .p-maptile .p-check { position: absolute; z-index: 2; top: var(--p-s2); right: var(--p-s2); width: 24px; height: 24px; border-radius: 12px; background: var(--p-holo); color: var(--p-check-ink); display: flex; align-items: center; justify-content: center; }
html.is-phone .p-opt-list .p-row { min-height: 56px; }

/* ------------------------------------------------------------------------------------------------ PREGAME LOBBY (S7) */
html.is-phone .p-pg-card { overflow: hidden; --p-fill: var(--p-raise); --p-bc: var(--p-line); }
html.is-phone .p-pg-banner { position: relative; height: 112px; overflow: hidden; }
html.is-phone .p-pg-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.is-phone .p-pg-over { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: var(--p-s2) var(--p-s4); background: var(--p-cap-plate); }
html.is-phone .p-pg-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--p-s4); row-gap: var(--p-s1); margin: 0; padding: var(--p-s3) var(--p-s4); }
html.is-phone .p-pg-opts > div { display: flex; justify-content: space-between; gap: var(--p-s2); min-width: 0; }
html.is-phone .p-pg-opts dt { font: var(--p-t-caption); color: var(--p-text-2); }
html.is-phone .p-pg-opts dd { margin: 0; font: 600 calc(13px * var(--p-ts)) / calc(18px * var(--p-ts)) var(--p-f-ui); color: var(--p-ice); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-phone .p-pg-status { margin: 0; font: var(--p-t-label); letter-spacing: var(--p-tr-label); text-transform: uppercase; color: var(--p-holo); text-align: center; }
html.is-phone .p-pg-status:empty { display: none; }
html.is-phone .p-pg-vote[hidden], html.is-phone .p-pg-halves[hidden], html.is-phone .p-pregame [hidden] { display: none; }
html.is-phone .p-pg-vrow { gap: var(--p-s2); }
html.is-phone .p-pg-vopt { position: relative; width: 132px; min-height: 96px; padding: 0; border: 0; background: none; color: var(--p-ice); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; text-align: left;
  --p-c: var(--p-cut-s); --p-bw: 1px; --p-bc: var(--p-line-ui); --p-fill: var(--p-raise); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html.is-phone .p-pg-vopt img { width: 100%; height: 56px; object-fit: cover; display: block; }
html.is-phone .p-pg-vopt[aria-pressed="true"] { --p-bc: var(--p-holo); --p-bw: 2px; --p-fill: var(--p-sel); }
html.is-phone .p-pg-vname { padding: var(--p-s1) var(--p-s2) 0; background: var(--p-raise); font: 700 calc(12px * var(--p-ts)) / calc(16px * var(--p-ts)) var(--p-f-ui); letter-spacing: 0.04em; text-transform: uppercase; }
html.is-phone .p-pg-vn { padding: 0 var(--p-s2) var(--p-s1); font: var(--p-t-micro); color: var(--p-text-2); }
html.is-phone .p-pg-halves { display: flex; gap: var(--p-s3); }
html.is-phone .p-pg-halves .p-btn { min-height: 52px; font-size: calc(15px * var(--p-ts)); }
html.is-phone .p-pg-voice { min-height: 44px; }
html.is-phone .p-pregame .p-section-label { margin: var(--p-s3) 0 0; }
html.is-phone .p-pg-row { gap: var(--p-s2); }
html.is-phone .p-pg-row.is-off { color: var(--p-text-2); }
html.is-phone .p-pg-emb { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--p-holo); --p-c: var(--p-cut-s); --p-bw: 1px; --p-bc: var(--p-line-ui); --p-fill: var(--p-emb-fill); }
html.is-phone .p-pg-emb img { width: 30px; height: 30px; object-fit: contain; }
html.is-phone .p-pg-you { font: var(--p-t-micro); color: var(--p-text-2); }
html.is-phone .p-pg-crown { color: var(--p-gold); display: inline-flex; vertical-align: -3px; }
html.is-phone .p-pg-mic { color: var(--p-holo); display: inline-flex; }
html.is-phone .p-pg-team { flex: none; font: var(--p-t-micro); letter-spacing: var(--p-tr-micro); }
html.is-phone .p-pg-ready { flex: none; display: inline-flex; align-items: center; gap: var(--p-s1); min-width: 92px; justify-content: flex-end; font: var(--p-t-micro); letter-spacing: var(--p-tr-micro); }
html.is-phone .p-pg-ready .p-ic { width: 14px; height: 14px; stroke-width: 2.6; }
html.is-phone .p-pg-add { color: var(--p-holo); }
html.is-phone .p-pg-fine { margin: 0; font: var(--p-t-caption); color: var(--p-text-3); }
html.is-phone .p-pg-fine:empty { display: none; }
html.is-phone .p-pg-invite { color: var(--p-holo); min-width: 64px; }
html.is-phone .p-pg-invite[hidden] { display: none; }
html.is-phone .p-pg-act.is-counting { flex-direction: row; align-items: stretch; }
html.is-phone .p-pg-cd { flex: 2 1 0; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: var(--p-s3); --p-fill: var(--p-raise); --p-bc: var(--p-holo); }
html.is-phone .p-pg-cdl { font: var(--p-t-label); letter-spacing: var(--p-tr-label); color: var(--p-text-2); }
html.is-phone .p-pg-cdn { color: var(--p-ice); min-width: 1.2em; text-align: center; }
html.is-phone .p-pg-act.is-counting .p-pg-cancel { flex: 1 1 0; min-height: 64px; padding: 0 var(--p-s2); }
/* the confirm sheets of the flow (S16's shape) */
html.is-phone .p-confirm-foot { display: flex; flex-direction: column; gap: var(--p-s3); }
html.is-phone .p-confirm-foot .p-reason { margin: 0; }
html.is-phone .p-confirm-body { margin: 0; font: var(--p-t-body); color: var(--p-ice); }
html.is-phone .p-confirm { display: flex; flex-direction: column; gap: var(--p-s4); }
html.is-phone .p-confirm-what { display: flex; align-items: center; gap: var(--p-s3); }
html.is-phone .p-confirm-art { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--p-gold); --p-c: var(--p-cut-s); --p-bw: 1px; --p-bc: var(--p-gold); --p-fill: var(--p-raise); }
html.is-phone .p-confirm-name { display: block; font: var(--p-t-headline); letter-spacing: var(--p-tr-headline); }
html.is-phone .p-confirm-what small { font: var(--p-t-caption); color: var(--p-text-2); }
html.is-phone .p-confirm .p-pg-opts { padding: 0; }
html.is-phone .p-confirm .p-reason { text-align: left; margin: 0; }

/* ------------------------------------------------------------------------------------------------ SERVER BROWSER (S6) */
html.is-phone .p-servers .p-chips { flex: none; }
/* the play entry home's PLAY puts at the top of the browser (round 2): the chip's playlist with the verb PLAY, then
   CHANGE MODE; a full-column card (7.5) and a tertiary, 12 apart, 12 above the filter chips */
html.is-phone .p-sv-play { display: flex; flex-direction: column; gap: var(--p-s3); width: 100%; max-width: var(--p-col-max); margin: 0 auto var(--p-s3); }
html.is-phone .p-sv-play .p-sv-quick { width: 100%; }
html.is-phone .p-sv-row { min-height: 72px; gap: var(--p-s3); padding-left: var(--p-s3); }
html.is-phone .p-sv-thumb { width: 56px; height: 56px; flex: none; object-fit: cover; background: var(--p-raise);
  clip-path: polygon(var(--p-cut-s) 0, 100% 0, 100% calc(100% - var(--p-cut-s)), calc(100% - var(--p-cut-s)) 100%, 0 100%, 0 var(--p-cut-s)); }
html.is-phone .p-sv-name { display: block; font: 600 calc(16px * var(--p-ts)) / calc(20px * var(--p-ts)) var(--p-f-ui); }
html.is-phone .p-sv-stake { display: inline-block; margin-left: var(--p-s1); padding: 0 var(--p-s1); border: 1px solid var(--p-gold); color: var(--p-gold); font: var(--p-t-micro); vertical-align: 1px; }
html.is-phone .p-sv-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
html.is-phone .p-sv-right b { font: 700 calc(14px * var(--p-ts)) / calc(18px * var(--p-ts)) var(--p-f-num); color: var(--p-ice); }
html.is-phone .p-sv-right small { font: var(--p-t-caption); color: var(--p-text-3); white-space: nowrap; }
html.is-phone .p-sv-list .p-row-lbl small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-phone .p-sv-more { height: 1px; }
html.is-phone .p-sv-row { content-visibility: auto; contain-intrinsic-size: auto 72px; }
html.is-phone .p-sv-sheet { display: flex; flex-direction: column; gap: var(--p-s3); }
html.is-phone .p-sv-shot { width: 100%; height: 120px; object-fit: cover; display: block; }
html.is-phone .p-sv-sheet .p-pg-opts { padding: 0; }
html.is-phone .p-sv-sheet .p-reason { text-align: left; }

/* ------------------------------------------------------------------------------------------------ EVENTS (S18)
   main.js's tournaments and predictions sections as one phone page: the segmented control on top, one column, the lane
   filling soonest as the featured card with the one primary, the other lanes as rows; prediction filters as chip rows. */
html.is-phone.p-shell #menu.halo :is(#menu-tournaments, #menu-predictions):not(.hidden) { display: flex; flex-direction: column; gap: var(--p-s3); padding: 0; background: none; border: 0; clip-path: none; max-width: var(--p-col-max); margin: 0 auto; }
html.is-phone .p-ev-head { display: flex; flex-direction: column; gap: var(--p-s3); width: 100%; }
html.is-phone .p-ev-lead { margin: 0; font: var(--p-t-caption); color: var(--p-text-2); }
html.is-phone #menu-tournaments .halo-pane-sub, html.is-phone #menu-predictions .halo-pane-sub { display: none; }
html.is-phone #tour-root { width: 100%; }
html.is-phone #tour-root .tour-lobby-head, html.is-phone #tour-root .tour-legend { display: none; }
html.is-phone #tour-root .tour-pin-label { font: var(--p-t-label); letter-spacing: var(--p-tr-label); color: var(--p-text-2); margin: 0 0 var(--p-s2); }
html.is-phone #tour-root .tour-lanes { display: flex; flex-direction: column; gap: var(--p-s3); }
html.is-phone #tour-root .tour-lane { display: flex; flex-direction: column; align-items: stretch; gap: var(--p-s2); width: 100%; margin: 0; padding: var(--p-s3) var(--p-s4);
  background: var(--p-bg-2); border: 1px solid var(--p-line); border-radius: 0; box-shadow: none; clip-path: none; }
html.is-phone #tour-root .tour-lane.p-ev-featured { padding: var(--p-s4); background: var(--p-raise); border: 2px solid var(--p-holo); }
html.is-phone #tour-root :is(.tour-lane-l, .tour-lane-m, .tour-lane-r, .tour-lane-top) { display: flex; flex-direction: column; align-items: stretch; gap: var(--p-s1); width: auto; min-width: 0; }
html.is-phone #tour-root .tour-lane-buyin { font: var(--p-t-display); color: var(--p-gold); }
html.is-phone #tour-root .tour-lane:not(.p-ev-featured) .tour-lane-buyin { font: var(--p-t-title); }
html.is-phone #tour-root :is(.tour-lane-shape, .tour-fill-label, .tour-lane-copy, .tour-lane-clock, .tour-pick-lab, .tour-lane-gate) { font: var(--p-t-caption); color: var(--p-text-2); letter-spacing: 0; text-transform: none; }
html.is-phone #tour-root .tour-lane:not(.p-ev-featured) .tour-lane-copy { display: none; }
html.is-phone #tour-root .tour-lane-badge { font: var(--p-t-micro); letter-spacing: var(--p-tr-micro); color: var(--p-holo); }
html.is-phone #tour-root .tour-fill { height: 8px; background: var(--p-line); border-radius: 0; overflow: hidden; }
html.is-phone #tour-root .tour-fill > i { display: block; height: 100%; background: var(--p-holo); }
html.is-phone #tour-root .tour-pick-row { display: flex; gap: var(--p-s2); flex-wrap: nowrap; overflow-x: auto; }
html.is-phone #tour-root .tour-chip { min-height: 44px; padding: 0 var(--p-s4); background: var(--p-bg-2); border: 1px solid var(--p-line-ui); color: var(--p-text-2); font: var(--p-t-label); letter-spacing: var(--p-tr-label); border-radius: 0; }
html.is-phone #tour-root .tour-chip.on { background: var(--p-sel); border-color: var(--p-holo); color: var(--p-ice); }
html.is-phone #tour-root .tour-lane-actions { display: flex; flex-direction: column; gap: var(--p-s2); }
html.is-phone #tour-root .tour-btn { width: 100%; min-height: 52px; padding: 0 var(--p-s4); border: 1.5px solid var(--p-line-ui); background: var(--p-bg-2); color: var(--p-ice); border-radius: 0; box-shadow: none;
  font: var(--p-t-button); letter-spacing: var(--p-tr-button); text-transform: uppercase; clip-path: polygon(var(--p-cut-m) 0, 100% 0, 100% calc(100% - var(--p-cut-m)), calc(100% - var(--p-cut-m)) 100%, 0 100%, 0 var(--p-cut-m)); }
html.is-phone #tour-root .tour-btn[data-p-role="primary"] { min-height: 64px; border: 0; color: var(--p-amber-ink); background: linear-gradient(180deg, var(--p-amber-1), var(--p-amber-2)); font: var(--p-t-title); letter-spacing: 0.1em; }
html.is-phone #tour-root .tour-btn:disabled { color: var(--p-text-2); border-color: var(--p-line); }
html.is-phone #menu-predictions .halo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p-s3); margin: 0; width: 100%; }
html.is-phone #menu-predictions .halo-card { min-height: 64px; padding: var(--p-s2) var(--p-s3); display: flex; flex-direction: column; justify-content: center; text-align: left;
  background: var(--p-raise); border: 1px solid var(--p-line-ui); border-radius: 0; box-shadow: none; clip-path: polygon(var(--p-cut-s) 0, 100% 0, 100% calc(100% - var(--p-cut-s)), calc(100% - var(--p-cut-s)) 100%, 0 100%, 0 var(--p-cut-s)); }
html.is-phone #menu-predictions .halo-card h3 { margin: 0; font: 700 calc(14px * var(--p-ts)) / calc(18px * var(--p-ts)) var(--p-f-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-ice); }
html.is-phone #menu-predictions .halo-card p { margin: 0; font: var(--p-t-caption); color: var(--p-text-2); }
html.is-phone #menu-predictions .halo-browser-head { display: flex; flex-direction: column; align-items: stretch; gap: var(--p-s2); width: 100%; }
html.is-phone #menu-predictions .halo-browser-head > span { font: var(--p-t-label); letter-spacing: var(--p-tr-label); color: var(--p-text-2); }
html.is-phone #menu-predictions #pred-search { width: 100%; height: 52px; padding: 0 var(--p-s3); background: var(--p-field-bg); border: 1.5px solid var(--p-line-ui); border-radius: 0; color: var(--p-ice); font: var(--p-t-body); }
html.is-phone #menu-predictions .pred-filters { display: flex; flex-direction: column; gap: var(--p-s2); width: 100%; }
html.is-phone #menu-predictions .pred-filters .seg { display: flex; gap: var(--p-s2); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; background: none; border: 0; padding: 0; }
html.is-phone #menu-predictions .pred-filters .seg-btn { flex: none; min-height: 44px; padding: 0 var(--p-s4); background: var(--p-bg-2); border: 1px solid var(--p-line-ui); color: var(--p-text-2); border-radius: 0; font: var(--p-t-label); letter-spacing: var(--p-tr-label); }
html.is-phone #menu-predictions .pred-filters .seg-btn.active { background: var(--p-sel); border-color: var(--p-holo); color: var(--p-ice); }
html.is-phone #menu-predictions #pred-sort { min-height: 44px; background: var(--p-bg-2); border: 1px solid var(--p-line-ui); color: var(--p-ice); border-radius: 0; }
html.is-phone #menu-predictions #pred-list { width: 100%; }
html.is-phone #menu-predictions .pred-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--p-s3); }
html.is-phone #menu-predictions .lobby-foot { display: flex; flex-wrap: wrap; gap: var(--p-s2); width: 100%; }
html.is-phone #menu-predictions .lobby-foot .btn { flex: 1 1 140px; min-height: 44px; }
html.is-phone #menu-predictions .lobby-foot .dim { flex: 1 0 100%; font: var(--p-t-caption); color: var(--p-text-3); }

/* ------------------------------------------------------------------------------------------------ THE FRONT DOOR (S1)
   main.js's own signed-out page, laid out for a phone from its first paint: SWAP TOKENS and the gear on the top row, the
   logo, CONTRACT COMING SOON, then PLAY at about 65% of the height, HOW TO PLAY, the one-row hardware notice, the
   socials and the credit. (Replaces lane 0's interim section 12.) */
html.is-phone #menu:not(.halo) .menu-grid { display: none; }
html.is-phone #menu:not(.halo) .menu-bg { background: linear-gradient(180deg, var(--p-fd-wash-1) 0%, var(--p-fd-wash-2) 100%); }
html.is-phone #menu:not(.halo) .menu-content {
  width: 100%; max-width: none; height: var(--p-app-h); min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; gap: 0; justify-content: flex-start; align-items: center;
  padding: calc(var(--p-inset-t) + var(--p-top-h) + var(--p-s6)) var(--p-gutter-r) max(var(--p-s2), var(--p-inset-b)) var(--p-gutter-l);
  font-family: var(--p-f-ui); color: var(--p-ice);
}
html.is-phone #menu:not(.halo) #menu-logo { width: 260px; max-width: 70%; height: auto; animation: none; filter: none; }
html.is-phone #menu:not(.halo) #contract-banner {
  margin-top: var(--p-s4); padding: var(--p-s2) var(--p-s4); border-radius: 0; box-shadow: none; background: var(--p-bg-2); border: 1px solid var(--p-line-ui); color: var(--p-holo);
  font: var(--p-t-label); letter-spacing: 0.16em; clip-path: polygon(var(--p-cut-s) 0, 100% 0, 100% calc(100% - var(--p-cut-s)), calc(100% - var(--p-cut-s)) 100%, 0 100%, 0 var(--p-cut-s));
}
html.is-phone #menu:not(.halo) #menu-landing {
  margin-top: auto; width: 100%; max-width: var(--p-col-max); padding: var(--p-s6) 0 0; gap: var(--p-s3);
  background: none; border: 0; clip-path: none; align-items: stretch;
}
html.is-phone #menu:not(.halo) #landing-gate { display: flex; flex-direction: column; align-items: stretch; gap: var(--p-s3); }
html.is-phone #menu:not(.halo) #landing-gate.hidden { display: none; }
/* the front door held sideways (html.p-wide: a box under 480 px tall, set by shell.js; lane 7, 2026-10-16): the logo shrinks
   to a third of the height and the landing card follows the banner, so PLAY is on screen without scrolling */
html.is-phone.p-wide #menu:not(.halo) .menu-content { padding-top: calc(var(--p-inset-t) + var(--p-s3)); }
html.is-phone.p-wide #menu:not(.halo) #menu-logo { width: auto; height: calc(var(--p-app-h) * 0.3); max-width: 40%; }
html.is-phone.p-wide #menu:not(.halo) #contract-banner { margin-top: var(--p-s2); }
html.is-phone.p-wide #menu:not(.halo) #menu-landing { margin-top: var(--p-s3); padding-top: 0; }
html.is-phone #menu:not(.halo) #play-btn {
  position: relative; isolation: isolate; width: 100% !important; max-width: none !important; min-height: 64px; margin: 0 !important; padding: 0 !important;
  border: 0; border-radius: 0; color: var(--p-amber-ink); background: linear-gradient(180deg, var(--p-amber-1), var(--p-amber-2)); box-shadow: inset 0 1px 0 var(--p-amber-hi), inset 0 -3px 0 var(--p-amber-lo);
  font: var(--p-t-title) !important; letter-spacing: 0.16em !important;
  clip-path: polygon(var(--p-cut-m) 0, 100% 0, 100% calc(100% - var(--p-cut-m)), calc(100% - var(--p-cut-m)) 100%, 0 100%, 0 var(--p-cut-m));
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--p-dur-press) var(--p-ease-std);
}
html.is-phone #menu:not(.halo) #play-btn:active { transform: scale(0.97); transition: none; }
html.is-phone #menu:not(.halo) #howto-btn {
  display: flex !important; align-items: center; justify-content: center; width: auto !important; max-width: none !important; min-height: 44px; margin: 0 auto !important; padding: 0 var(--p-s3);
  background: none; border: 0; box-shadow: none; color: var(--p-holo); font: 600 calc(16px * var(--p-ts)) / 1 var(--p-f-ui); letter-spacing: 0.04em !important; text-transform: none;
}
/* the hardware notice: ONE row, 52 tall, both messages in its one grid cell (PLAY never moves), the details in a sheet */
html.is-phone #menu:not(.halo) #gpu-tip-landing {
  position: relative; min-height: 52px; max-height: 52px; margin: 0; padding: var(--p-s1) var(--p-s8) var(--p-s1) var(--p-s4); overflow: hidden; cursor: pointer;
  background: var(--p-bg-2); border: 1px solid var(--p-line-ui); border-radius: 0; color: var(--p-ice); text-align: left;
  font: 500 calc(13px * var(--p-ts)) / calc(16px * var(--p-ts)) var(--p-f-ui);
  clip-path: polygon(var(--p-cut-m) 0, 100% 0, 100% calc(100% - var(--p-cut-m)), calc(100% - var(--p-cut-m)) 100%, 0 100%, 0 var(--p-cut-m));
}
html.is-phone #menu:not(.halo) #gpu-tip-landing::after { content: ""; position: absolute; right: var(--p-s4); top: 50%; width: 8px; height: 8px; margin-top: calc(-1 * var(--p-s1)); border-top: 2px solid var(--p-text-2); border-right: 2px solid var(--p-text-2); transform: rotate(45deg); }
html.is-phone #menu:not(.halo) #gpu-tip-landing .gpu-tip-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.is-phone #menu:not(.halo) #gpu-tip-landing.gpu-tip-warn { border-color: var(--p-warn); }
html.is-phone #menu:not(.halo) #gpu-tip-landing.gpu-tip-warn b { color: var(--p-warn); }
html.is-phone #menu:not(.halo) .menu-footer { display: flex; flex-direction: column-reverse; align-items: center; gap: var(--p-s2); width: 100%; margin-top: var(--p-s4); padding: 0; position: static; }
html.is-phone #menu:not(.halo) .menu-footer #social-links { position: static; display: flex; justify-content: center; gap: var(--p-s3); translate: none; }
html.is-phone #menu:not(.halo) .menu-footer .social-btn { width: 44px; height: 44px; border-radius: 0; }
html.is-phone #menu:not(.halo) .menu-footer #powered-by { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--p-s3); font: var(--p-t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-text-2); position: static; translate: none; }
/* the top row: SWAP TOKENS left, the gear right, under the status-bar inset */
html.is-phone #menu:not(.halo) #menu-swap {
  position: fixed; z-index: 70; left: var(--p-gutter-l); right: auto; top: calc(var(--p-inset-t) + var(--p-bar-pad)); bottom: auto; translate: none;
  min-height: 44px; min-width: 88px; padding: 0 var(--p-s4); border-radius: 0; background: var(--p-bg-2); border: 1.5px solid var(--p-line-ui); color: var(--p-ice); box-shadow: none;
  font: var(--p-t-label); letter-spacing: var(--p-tr-label);
}
html.is-phone #menu:not(.halo) #menu-gear { position: fixed; z-index: 70; right: var(--p-gutter-r); left: auto; top: calc(var(--p-inset-t) + var(--p-bar-pad)); bottom: auto; translate: none; width: 44px; height: 44px; }
html.is-phone #menu:not(.halo) #menu-user { display: none; }
/* THE SIGN-IN SHEET (S2): main.js's own card, moved into the sheet (frontdoor.js); two labelled groups */
html.is-phone .p-sheet #landing-signin.p-in-sheet, html.is-phone .p-sheet #landing-access.p-in-sheet { display: flex; flex-direction: column; gap: var(--p-s3); width: 100%; color: var(--p-ice); font-family: var(--p-f-ui); }
html.is-phone .p-in-sheet .card-title { display: none; }
html.is-phone .p-in-sheet #wallet-list { display: flex; flex-direction: column; gap: 0; margin: 0 !important; background: var(--p-bg-2); border: 1px solid var(--p-line); }
html.is-phone .p-in-sheet #wallet-list :is(.wallet-btn, button, a) {
  display: flex; align-items: center; gap: var(--p-s3); width: 100%; min-height: 56px; margin: 0; padding: 0 var(--p-s4); border: 0; border-top: 1px solid var(--p-line-soft); border-radius: 0;
  background: none; color: var(--p-ice); box-shadow: none; text-align: left; text-decoration: none; font: 700 calc(16px * var(--p-ts)) / 1 var(--p-f-ui); letter-spacing: 0.06em; text-transform: uppercase;
}
html.is-phone .p-in-sheet #wallet-list :is(.wallet-btn, button, a):active { background: var(--p-raise); }
html.is-phone .p-in-sheet #wallet-list .wallet-btn-primary { color: var(--p-amber-ink); background: linear-gradient(180deg, var(--p-amber-1), var(--p-amber-2)); min-height: 64px; }
html.is-phone .p-in-sheet #wallet-list img { width: 28px; height: 28px; }
html.is-phone .p-in-sheet #social-signin { margin: 0 !important; display: flex; flex-direction: column; gap: var(--p-s2); }
html.is-phone .p-in-sheet #social-signin.hidden { display: none; }
html.is-phone .p-in-sheet .social-or { display: none; }
html.is-phone .p-si-lbl { display: none; }
html.is-phone .p-in-sheet .p-si-lbl { display: flex; flex-direction: column; margin: var(--p-s2) 0 0; }
html.is-phone .p-in-sheet .p-si-lbl small { font: var(--p-t-caption); letter-spacing: 0; text-transform: none; color: var(--p-text-3); }
html.is-phone .p-in-sheet .p-si-promise { margin: 0; font: var(--p-t-caption); color: var(--p-text-2); text-align: center; }
html.is-phone .p-in-sheet #social-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--p-s3); margin: 0 !important; }
html.is-phone .p-in-sheet #social-list .social-btn { min-height: 52px; width: 100%; margin: 0; border-radius: 0; background: var(--p-bg-2); border: 1.5px solid var(--p-line-ui); color: var(--p-ice); font: var(--p-t-button); letter-spacing: var(--p-tr-button); }
html.is-phone .p-in-sheet .fine-print { margin: 0 !important; font: var(--p-t-caption); color: var(--p-text-2); text-align: left; }
html.is-phone .p-in-sheet .fine-print a { display: inline-flex; align-items: center; min-height: 44px; color: var(--p-holo); }
html.is-phone .p-in-sheet .no-wallet { font: var(--p-t-caption); color: var(--p-text-2); }
html.is-phone .p-in-sheet .no-wallet .wallet-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--p-s3); color: var(--p-holo); }
html.is-phone .p-in-sheet #rescan-wallets { min-height: 44px; }
html.is-phone .p-in-sheet .access-sub { margin: 0; font: var(--p-t-body); color: var(--p-text-2); text-align: left; }
html.is-phone .p-in-sheet #invite-code { width: 100%; height: 52px; padding: 0 var(--p-s3); background: var(--p-field-bg); border: 1.5px solid var(--p-line-ui); border-radius: 0; color: var(--p-ice); font: var(--p-t-body); font-size: max(16px, calc(16px * var(--p-ts))); letter-spacing: 0.12em; text-transform: uppercase; }
html.is-phone .p-in-sheet #access-btn { min-height: 64px; width: 100%; border: 0; border-radius: 0; color: var(--p-amber-ink); background: linear-gradient(180deg, var(--p-amber-1), var(--p-amber-2)); font: var(--p-t-title); letter-spacing: 0.12em;
  clip-path: polygon(var(--p-cut-m) 0, 100% 0, 100% calc(100% - var(--p-cut-m)), calc(100% - var(--p-cut-m)) 100%, 0 100%, 0 var(--p-cut-m)); }
html.is-phone .p-in-sheet #access-help { align-self: center; min-height: 44px; background: none; border: 0; color: var(--p-holo); font: 600 calc(16px * var(--p-ts)) / 1 var(--p-f-ui); }
html.is-phone .p-in-sheet .access-error { font: var(--p-t-caption); color: var(--p-danger); }
html.is-phone .p-gpu-sheet p { margin: 0; color: var(--p-ice); }
html.is-phone .p-gpu-sheet b { color: var(--p-holo); }
html.is-phone .p-in-sheet > .fine-print:not(.dim), html.is-phone .p-in-sheet #social-signin > .fine-print { display: none; }
html.is-phone .p-in-sheet .p-si-lbl, html.is-phone .p-in-sheet #wallet-list :is(.wallet-btn, button, a) { text-align: left; justify-content: flex-start; }
html.is-phone .p-in-sheet .p-si-lbl { align-items: flex-start; }
/* the front door's own motion on a phone: none at rest (the logo's float and the base hover transitions are desktop's), the
   press state is PLAY's own (T23 / T36: transform and opacity on tokens only) */
html.is-phone #menu:not(.halo) :is(#menu-logo, #howto-btn, #powered-by, .social-btn, #menu-gear, #menu-swap, #contract-banner, #gpu-tip-landing) { transition: none; animation: none; }
html.is-phone #tour-root .tour-pick { display: flex; flex-direction: column; align-items: stretch; gap: var(--p-s1); }
html.is-phone .p-pg-row .p-row-lbl { display: flex; flex-direction: row; align-items: center; gap: var(--p-s2); min-width: 0; }
html.is-phone .p-pg-row .p-row-lbl small { font: var(--p-t-micro); letter-spacing: var(--p-tr-micro); }
/* desktop motion and thin weights on the hosted controls a phone page reuses (T8 / T23 / T36: tokens only, weight >= 500) */
html.is-phone :is(#tour-root .tour-chip, #tour-root .tour-btn, #menu-predictions .halo-card, #menu-predictions .seg-btn, #menu-predictions .btn, .p-in-sheet .wallet-btn, .p-in-sheet .social-btn, .p-in-sheet #access-btn, .p-in-sheet #access-help) { transition: none; animation: none; scrollbar-color: auto; }
html.is-phone #menu-predictions :is(.match-empty, .lobby-foot .btn, .lobby-foot .dim, .halo-card p) { font-weight: 600; }
/* the sign-in options: separate 56 px rows 8 apart (T7), each its own plate */
html.is-phone .p-in-sheet #wallet-list { gap: var(--p-s2); background: none; border: 0; }
html.is-phone .p-in-sheet #wallet-list :is(.wallet-btn, button, a) { border: 1px solid var(--p-line-ui); background: var(--p-bg-2); }
/* this lane's lists: rows 8 apart, each its own plate (T7: neighbouring hit boxes >= 8 px apart; lane 0 note filed for
   .p-list itself) */
html.is-phone .p-list.p-gap { gap: var(--p-s2); background: none; border: 0; }
html.is-phone .p-list.p-gap > .p-row { border: 1px solid var(--p-line); background: var(--p-bg-2); }
html.is-phone .p-list.p-gap > .p-row:first-child { border-top: 1px solid var(--p-line); }
html.is-phone .p-row--static { cursor: default; }
html.is-phone .p-row--static:active { background: var(--p-bg-2); }
/* lane 7 (2026-10-17) TOURNAMENTS SIDEWAYS: a lane is two columns (what it is | its pickers, each label beside its chips)
   over a full-width ENTER, so the screen's one primary is on screen in a 320 px tall box (T1) and the lane's last row is
   full (T28); the long pool line is left to the confirm sheet, which says the same (Paid, House fee) */
html.is-phone.p-wide #tour-root .tour-lane { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--p-s2) var(--p-s4); align-items: center; }
html.is-phone.p-wide #tour-root .tour-lane > .tour-lane-copy { display: none; }
html.is-phone.p-wide #tour-root .tour-lane.open > .tour-lane-badge { grid-column: 1; grid-row: 1; justify-self: start; }
html.is-phone.p-wide #tour-root .tour-lane.open > .tour-lane-top { grid-column: 1; grid-row: 2; }
html.is-phone.p-wide #tour-root .tour-lane.open > .tour-pick { grid-column: 2; min-width: 0; flex-direction: row; align-items: center; gap: var(--p-s2); }
html.is-phone.p-wide #tour-root .tour-lane.open > .tour-pick .tour-pick-lab { flex: none; width: var(--p-s12); }
html.is-phone.p-wide #tour-root .tour-lane.open > .tour-pick .tour-pick-row { min-width: 0; }
html.is-phone.p-wide #tour-root .tour-lane > :is(.tour-btn, .tour-lane-gate) { grid-column: 1 / -1; }
html.is-phone.p-wide #tour-root .tour-lane.live > .tour-lane-l { grid-column: 1; }
html.is-phone.p-wide #tour-root .tour-lane.live > .tour-lane-m { grid-column: 2; min-width: 0; }
html.is-phone.p-wide #tour-root .tour-lane.live > .tour-lane-r { grid-column: 1 / -1; }
/* lane 7 (2026-10-17) the front door has ONE scroller, its page (.menu-content), held upright or sideways (T31: sideways with a safe area
   the inner column scrolled inside the scrolling #menu) */
html.is-phone #menu:not(.halo) { overflow: hidden; }   /* .menu-content is the scroller; #menu only spilled the safe-area translates */
html.is-phone #menu:not(.halo) .menu-content { height: calc(var(--p-app-h) - var(--p-inset-t) - var(--p-inset-b)); }   /* it ends at the safe bottom: nothing scrolls to under the home bar (T24) */

/* ------------------------------------------------------------------------------------------------ MOBILEMENU polish (2026-10-22) */
/* the lobby's CHANGE MAP sits on its map banner (the host of a lobby with nothing at stake); the name keeps clear of it */
html.is-phone .p-pg-mapbtn { position: absolute; z-index: 2; right: var(--p-s3); bottom: var(--p-s3); }
html.is-phone .p-pg-mapbtn[hidden] { display: none; }
html.is-phone .p-pg-banner:has(.p-pg-mapbtn:not([hidden])) .p-pg-over { padding-right: calc(var(--p-s4) + 136px); min-height: 72px; justify-content: center; }
html.is-phone .p-pg-lock { margin: 0; text-align: left; }
/* a row whose every choice is fixed for this match (GAME SETUP's SERVER): it says why, calmly, and is not a button */
html.is-phone .p-row--static.is-locked .p-row-lbl small { color: var(--p-text-2); }
/* the map sheet's fix strip: docked at the bottom of the sheet while a darkened map is asked about */
html.is-phone .p-ms-fix { position: sticky; z-index: 3; bottom: 0; display: flex; flex-direction: column; gap: var(--p-s2); margin: 0 calc(-1 * var(--p-s1)); padding: var(--p-s3);
  --p-fill: var(--p-raise); --p-bc: var(--p-holo); }
html.is-phone .p-ms-fix[hidden] { display: none; }
html.is-phone .p-ms-fix-txt { margin: 0; font: var(--p-t-caption); color: var(--p-text-2); text-align: center; }
html.is-phone .p-ms-fix-go { min-height: 56px; padding: var(--p-s2) var(--p-s3); font-size: calc(15px * var(--p-ts)); line-height: 1.25; letter-spacing: 0.08em; white-space: normal; text-align: center; text-wrap: balance; }
html.is-phone .p-maptile.is-asked { --p-bc: var(--p-holo); --p-bw: 2px; }
/* the map's whole name beside CHANGE MAP (GALLOWS RIDGE read "GALLOWS RID..." at 375 px): two lines before any ellipsis */
html.is-phone :is(.p-cm-map, .p-pg-map) { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }