/* ============================================================
   PieSMP — mobile / Android layer
   Loaded last so it can correct anything above without !important
   wars. Three jobs:
     1. every tap target is at least 44x44 CSS px
     2. nothing scrolls sideways on a phone
     3. a bottom action bar (Copy IP / Board / Store) so the two
        things a player actually wants are one thumb away
   Safe-area insets are respected for notched devices and for
   Android gesture navigation.
   ============================================================ */

:root {
  --mbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ---------- no sideways scroll, ever ---------- */
/* `clip` instead of `hidden`: overflow-x:hidden on html/body turns the body
   into a scroll container, which silently breaks every position:sticky
   descendant — the homepage's 3D stage stops pinning and the whole scroll
   tour dies. clip paints identically and creates no scroll container.
   The hidden line stays first as the fallback for old engines. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body { overscroll-behavior-y: contain; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
pre, code, .mono { overflow-wrap: anywhere; }
.v3-lead, .v3-head p, .v3-rules-body, .v3-econ-card p { overflow-wrap: break-word; }

/* tables are the one thing that legitimately needs a scroller */
.lb-allwrap, .v3-card > table, .pl-modes { max-width: 100%; }
@media (max-width: 720px) {
  .lb-allwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lb-allwrap table { min-width: 560px; }
}

/* ---------- touch targets ---------- */
@media (hover: none), (pointer: coarse) {
  .nav-link,
  .v3-btn,
  .v3-bt-row button,
  .v3-bt-stats button,
  .v3-rail button,
  .v3-mbar-btn,
  .v3-switch button,
  .v3-ip,
  .js-copy-ip,
  .dropdown-item,
  .footer a,
  .v3-link,
  .pl-link {
    min-height: 44px;
  }
  .nav-link, .v3-btn, .v3-mbar-btn, .dropdown-item { display: inline-flex; align-items: center; }
  /* the rail's chapter buttons are decorative dots on desktop; on touch they
     must still be pressable without being able to miss them */
  .v3-rail button { min-width: 44px; }
  /* hover styles are a lie on touch: kill the lift, keep the colour */
  .v3-econ-card:hover { transform: none; }
}

/* ---------- bottom action bar ---------- */
.v3-mbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 8px calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l));
  gap: 8px;
  background: color-mix(in srgb, var(--bg, #0a1117) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, .1);
  transform: translateZ(0);
}
.v3-mbar-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  font: 700 13px/1 var(--font-display, system-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #EAF2F8;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease;
}
.v3-mbar-btn:active { background: rgba(255, 255, 255, .16); }
.v3-mbar-btn.is-primary {
  background: var(--c-diamond, #22D3EE);
  border-color: transparent;
  color: #08131a;
  font-weight: 800;
}
.v3-mbar-btn.copied { background: #86D94E; border-color: transparent; color: #08130a; }
.v3-mbar-btn svg { flex: 0 0 auto; }

@media (max-width: 860px) {
  .v3-mbar { display: flex; }
  /* reserve the bar's height so it never covers the last block of content */
  body { padding-bottom: calc(var(--mbar-h) + var(--safe-b)); }
  .v3-foot-spacer { height: calc(var(--foot-h, 380px) + var(--mbar-h) + var(--safe-b)); }
  /* toast sits above the bar */
  .toast, .v3-toast { bottom: calc(var(--mbar-h) + var(--safe-b) + 12px) !important; }
}

/* ---------- phone layout corrections ---------- */
@media (max-width: 860px) {
  .v3-section { padding: clamp(52px, 11vw, 84px) 0; }
  .container { padding-left: calc(16px + var(--safe-l)); padding-right: calc(16px + var(--safe-r)); }
  .v3-head { margin-bottom: 28px; }
  .v3-pagehead h1 { font-size: clamp(30px, 9.5vw, 54px); }
  .v3-lead { font-size: 16px; line-height: 1.6; }
  .v3-rfacts { grid-template-columns: 1fr; }
  .v3-rfacts > div { padding: 14px 0; }
  .v3-econ-grid { grid-template-columns: 1fr; gap: 12px; }
  .v3-econ-card { padding: 20px 18px; }
  .v3-econ-card h3 { font-size: 18px; }
  .v3-hero-cta { flex-wrap: wrap; gap: 10px; }
  .v3-hero-cta > * { flex: 1 1 auto; }
  .v3-ip { width: 100%; justify-content: space-between; }
  .v3-rule-group summary { min-height: 52px; }
  .v3-rule-group ol li { padding: 12px 0; }
  .v3-meter { padding: 18px 8px 6px; }
  .v3-meter figcaption { font-size: 14px; line-height: 1.55; }
  .pl-layout { grid-template-columns: 1fr; }
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-grid-hero { grid-template-columns: 1fr; }
  .pl-search-row { flex-direction: column; gap: 8px; }
  .pl-search-row .v3-btn { width: 100%; }
  .pl-search input { min-height: 48px; font-size: 16px; }  /* 16px stops iOS zoom-on-focus */
  .v3-bt-row { gap: 8px; }
  .v3-bt-row button { flex: 1 1 auto; justify-content: center; }
  .v3-board-split { grid-template-columns: 1fr; gap: 24px; }
  .footer { padding-bottom: calc(28px + var(--mbar-h) + var(--safe-b)); }
}

@media (max-width: 420px) {
  .v3-mbar-btn { font-size: 11.5px; padding: 0 6px; gap: 5px; }
  .v3-mbar-btn .mbar-txt { display: none; }
  .v3-mbar-btn.is-primary .mbar-txt { display: inline; }
  .pl-grid { grid-template-columns: 1fr; }
  .v3-claim { grid-template-columns: repeat(3, 34px); grid-auto-rows: 34px; }
  .v3-claim-block { background-size: 34px 34px; }
}

/* ---------- standalone (installed to home screen) ---------- */
@media (display-mode: standalone) {
  .nav { padding-top: env(safe-area-inset-top, 0px); }
  /* no browser chrome to scroll back with, so keep the cue honest */
  .v3-cue { display: none; }
}

/* ---------- respect reduced motion & data saver ---------- */
@media (prefers-reduced-motion: reduce) {
  .v3-econ-card, .v3-mbar-btn { transition: none; }
}
html.lowfx .v3-mbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 17, 23, .97); }

/* ============================================================
   Phone tour — the same presentation the desktop tour gets, laid
   out for a thumb. The 3D stage stops pinning and becomes a fixed
   height header behind the hero card, the beats stack as ordinary
   sections, and the rail/cue (desktop-only navigation affordances)
   are hidden because the card carries both actions.
   ============================================================ */

/* the hero card exists in the DOM on every width; only phones show it */
.v3-phone-start { display: none; }

@media (max-width: 900px) {
  /* --- header --- */
  .nav { background: #0c1822; box-shadow: 0 1px 0 #304755; }
  .nav .nav-inner { height: 64px; gap: 10px; padding-inline: 16px; }
  .nav .nav-brand { gap: 6px; min-width: 0; }
  .nav .nav-brand img, .nav .nav-brand svg { min-width: 28px; min-height: 28px; }
  /* the wordmark stays — a bare logo reads as a broken image on a phone */
  .nav .nav-brand > span:not(.nav-mark) {
    display: inline !important;
    font: 800 16px/1.2 var(--font-text, system-ui) !important;
    white-space: nowrap;
  }
  .nav .nav-brand .accent { display: inline !important; font: inherit !important; }
  .nav .nav-actions { margin-left: auto; gap: 8px; }
  /* one account action on a phone: Log in. Register lives in the menu. */
  .nav .nav-actions > a[href*="register"] { display: none !important; }
  .nav .nav-actions > a[href*="login"] {
    display: inline-flex !important;
    min-height: 44px;
    padding-inline: 12px;
    font: 700 14px var(--font-text, system-ui) !important;
    box-shadow: none;
  }
  .nav .nav-toggle { width: 44px; height: 44px; flex-shrink: 0; }
  .nav .nav-links {
    background: #0c1822 !important;
    padding: 12px 16px 20px;
    max-height: calc(100dvh - 64px);
    border-bottom: 1px solid #395468;
    gap: 4px;
  }
  .nav .nav-link { font: 700 16px/1.4 var(--font-text, system-ui); min-height: 48px; padding: 12px 16px; }

  /* --- tour --- */
  .v3-tour { position: relative; background: #0a141c; margin-top: 0 !important; }
  .v3-tour .v3-stage {
    position: absolute;
    inset: 64px 0 auto;
    height: 44svh;
    min-height: 220px;
    max-height: 400px;
    margin: 0;
    z-index: 0;
    pointer-events: none;
  }
  .v3-tour .v3-stage::after,
  .v3-tour .v3-stage.mc-sky::after { background: linear-gradient(0deg, #0a141c 0%, #0a141c00 46%); }
  .v3-tour .v3-hero {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding: calc(43svh + 32px) 0 24px;
    display: block;
    pointer-events: none;
  }
  .v3-phone-start {
    display: block;
    position: relative;
    pointer-events: auto;
    width: calc(100% - 32px);
    margin-inline: 16px;
    padding: 20px;
    background: #10212df5;
    border: 1px solid #2f4859;
    border-top: 2px solid #2ee6f0;
    box-shadow: 4px 4px #030a10;
  }
  .v3-phone-kicker {
    font: 700 11px/1.4 var(--font-text, system-ui);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6eeaf1;
    margin-bottom: 10px;
  }
  .v3-phone-title {
    font: 850 clamp(30px, 9vw, 40px)/1.05 var(--font-text, system-ui);
    letter-spacing: -.035em;
    color: #f3f9fc;
    margin: 0 0 12px;
  }
  .v3-phone-lead {
    font: 400 15px/1.55 var(--font-text, system-ui);
    color: #b9ccd9;
    margin-bottom: 18px;
    max-width: 35ch;
  }
  .v3-phone-ip {
    width: 100%;
    min-height: 48px;
    background: #2ee6f0;
    color: #07131b;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    font: 750 14px var(--font-text, system-ui);
    cursor: pointer;
  }
  .v3-phone-ip span:first-child { font-family: var(--font-mc, monospace); font-size: 13px; }
  .v3-phone-ip span:last-child { white-space: nowrap; }
  .v3-phone-explore {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    color: #d5e6ef;
    font: 650 14px var(--font-text, system-ui);
  }
  .v3-tour .v3-cue, .v3-tour .v3-rail { display: none; }

  /* beats stack instead of stacking screens */
  .v3-tour .v3-stop:not(.v3-finale) {
    padding-block: 24px;
    scroll-margin-top: 0;
    position: relative;
    background: #0a141c;
    min-height: 0;
  }
  .v3-tour .v3-beat-head { margin-bottom: 12px; }
  .v3-tour .v3-beat-eyebrow { font-size: 10px; letter-spacing: .09em; }
  .v3-tour .v3-beat-copy > h2, .v3-tour .v3-beat-head h2 { font-size: clamp(38px, 12vw, 54px); line-height: 1; }
  .v3-tour .v3-pr .v3-beat-copy > h2 { font-size: clamp(36px, 10vw, 48px); }
  .v3-tour .v3-stop-card { padding: 20px !important; margin-top: 12px; max-width: none; }
  .v3-tour .v3-stop-card .v3-btn { width: 100%; justify-content: center; }
  .v3-tour .v3-finale {
    min-height: 0;
    padding-block: 48px;
    position: relative;
    background: linear-gradient(160deg, #15333e, #0a141c);
  }
  .v3-tour .v3-legend-title { font-size: clamp(48px, 14vw, 72px); }
  .v3-tour .v3-social { flex-wrap: wrap; gap: 10px; }
  .v3-tour .v3-social .v3-btn { font-size: 14px; min-height: 44px; }
  .v3-foot-spacer { display: none; }
}

/* The scroll tour drives --o/--d from scroll progress on desktop. On a phone
   the beats are ordinary stacked sections, so nothing may stay faded: the
   variables are pinned and the transforms/clip-paths they feed are dropped.
   !important is required — JS writes them as inline styles. */
@media (max-width: 900px) {
  .v3-tour .v3-stop, .v3-tour .v3-finale { --o: 1 !important; --d: 0 !important; }
  .v3-tour :is(.v3-beat-copy, .v3-beat-num, .v3-legend, .v3-legend-title, .v3-join-ip, .v3-stop h2, .v3-beat-copy h2) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}