/* pinull.com on phones and tablets: loaded only up to 900px wide, after app.css, so the phone has a
   design of its own rather than a squeezed desktop. Tokens and components come from app.css. */

/* ---------- the bar along the top: the mark, the way in, and a menu ---------- */
.links { display: none; }
.top { gap: 10px; }
.top .tools > .world { display: none; }              /* the world switch moves into the menu */
.cta { height: 32px; padding: 0 15px; margin-right: 2px; font-size: 13px; }
.menu-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-right: -9px; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.menu-btn i { grid-area: 1 / 1; display: block; width: 18px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .5s var(--ease); }
.menu-btn i:first-child { transform: translateY(-3.5px); }
.menu-btn i:last-child { transform: translateY(3.5px); }
.menu-open .menu-btn i:first-child { transform: rotate(45deg); }
.menu-open .menu-btn i:last-child { transform: rotate(-45deg); }
.menu-open body { overflow: hidden; }
.top .cta { transition: opacity .35s var(--ease), transform .55s cubic-bezier(.2, 1.5, .4, 1); }
.menu-open .top .cta { opacity: 0; pointer-events: none; }

/* the menu: the sections, large and calm, then the way in and the world switch */
.menu { position: fixed; z-index: 39; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
        padding: calc(88px + env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) calc(30px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px));
        background: color-mix(in srgb, var(--ground) 84%, transparent); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
        opacity: 0; transition: opacity .45s var(--ease); }
.menu[hidden] { display: none; }
.menu.open { opacity: 1; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { font: 600 34px/1.15 var(--sans); letter-spacing: -.035em; color: var(--text); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line);
                opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .55s var(--ease), transform .65s var(--ease), filter .65s var(--ease); }
.menu.open .menu-links a { opacity: 1; transform: none; filter: none; }
.menu.open .menu-links a:nth-child(2) { transition-delay: .05s; }
.menu.open .menu-links a:nth-child(3) { transition-delay: .1s; }
.menu.open .menu-links a:nth-child(4) { transition-delay: .15s; }
.menu-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .5s .2s var(--ease), transform .6s .2s var(--ease); }
.menu.open .menu-foot { opacity: 1; transform: none; }
.cta.big { height: 52px; padding: 0 28px; margin: 0; font-size: 16px; }
.menu-foot .world { display: grid; width: 52px; height: 52px; border: 1px solid var(--line-strong); opacity: 1; color: var(--text); }

/* ---------- layout ---------- */
.how-grid, .proof-grid-wrap { grid-template-columns: 1fr; }
.how-grid { gap: 18px; }
.how-steps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px 1px 2px;
             -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.how-steps::-webkit-scrollbar { display: none; }
.how-steps li { flex: none; }
.how-steps button { grid-template-columns: auto auto; column-gap: 8px; padding: 9px 13px 13px; white-space: nowrap; border: 1px solid var(--line); }
.how-steps button::before { grid-row: auto; }
.how-steps b { font-size: 14px; }
.how-steps .bar { left: 13px; right: 13px; bottom: 5px; }
.how-steps span { display: none; }
.reports { grid-template-columns: 1fr 1fr; }

/* the perks: a calm list, not a stack of boxes */
.perks { display: block; margin-top: 36px; border-top: 1px solid var(--line); }
.perks li { display: grid; gap: 3px; padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.perks li.spot::before, .perks li.spot::after { display: none; }
.perks b { margin: 0; font-size: 17px; }
.perks span { font-size: 15px; }
.beta-form { margin-top: 34px; }
.ref-steps { grid-template-columns: 1fr; gap: 0; margin-top: 24px; border-top: 1px solid var(--line); }
.ref-steps li { display: grid; gap: 4px; padding: 18px 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.ref-steps b { margin: 0; font-size: 24px; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .scene { padding-top: 104px; }
  .display { font-size: clamp(36px, 10.5vw, 46px); margin-bottom: 16px; }
  .lede { font-size: 17px; }

  /* the stream behind the first screen */
  .code { font-size: 12.5px; padding: 0 18px; }
  .far .code { padding-left: 30vw; font-size: 10.5px; }
  .pop { font-size: 11.5px; padding: 8px 11px; }
  .truthnote { font-size: 10.5px; bottom: 18px; }
  .sub { font-size: 18px; }

  /* the form: a field and a button, each a whole pill, no box around them */
  .joinform { margin-top: 30px; }
  .join { flex-direction: column; gap: 10px; padding: 0; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .join:focus-within { box-shadow: none; }
  .join input { flex: none; height: 54px; padding: 0 22px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-strong);
                backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); transition: border-color .3s, box-shadow .3s; }
  .join input:focus { border-color: color-mix(in srgb, var(--text) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 6%, transparent); }
  .join button { height: 54px; padding: 0; font-size: 16px; }
  .form-privacy { text-align: center; }

  /* the confident lie: the code on its line, the comment under it, the replay under the caption */
  .lie-stage { padding: 22px 18px 18px; border-radius: 22px; }
  .lie-line { font-size: 13.5px; gap: 0; }
  .lie-mark { display: none; }
  .lie-code .cm { display: block; }
  .lie-verdict { font-size: 12.5px; }
  .lie-stage figcaption { font-size: 13px; }
  .lie-stage .again { position: static; margin-top: 14px; }

  /* the demo: the same terminal, smaller type; what Pinull found spans its width */
  .term { border-radius: 18px; }
  .term-screen { height: 470px; padding: 14px 14px 24px; font-size: 11.5px; }
  .tl { padding-left: 2ch; text-indent: -2ch; }  /* a wrapped line hangs under its own start */
  .term-found { left: 10px; right: 10px; top: 50px; width: auto; padding: 13px 14px 12px; }
  .tf-code { font-size: 11px; }
  .tf-ver, .tf-more { font-size: 11px; }
  .term-wrap figcaption { flex-direction: column; align-items: flex-start; font-size: 13px; }

  /* the member's page */
  .you-steps li { grid-template-columns: 1fr auto; row-gap: 2px; }
  .you-steps span { grid-column: 1 / -1; grid-row: 2; }
  .you-link { font-size: 13px; padding: 10px; }

  /* the replay */
  .how-screen { height: auto; min-height: 430px; padding: 16px; }
  .hs-code { font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .hs-code.fade { max-height: 360px; }
  .gate { grid-template-columns: 18px 1fr; row-gap: 2px; }
  .gate span { grid-column: 2; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { padding: 14px; border-radius: 14px; }
  .metric .v { font-size: 24px; }
  .metric .k { font-size: 12px; }
  .how-bar { font-size: 11px; }

  /* proof */
  .proof-grid { gap: 3px; grid-template-columns: repeat(auto-fill, minmax(13px, 1fr)); }
  .proof-legend .big { font-size: 84px; }
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .stats div { padding: 22px; }
  .reports { grid-template-columns: 1fr; }

  /* the game: long lines wrap under themselves instead of running off the card */
  .game-card { padding: 18px; border-radius: 22px; }
  .g-q { font-size: 19px; }
  .g-code { font-size: 12px; padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .g-code .gl { padding-left: 2ch; text-indent: -2ch; }
  .game-end .score { font-size: 44px; }

  /* footer: one column, left-aligned - Pinull from Krydia first, then how to reach us */
  .foot-in { grid-template-columns: 1fr; grid-template-areas: "brand" "from" "links" "made"; gap: 8px; }
  .foot-in .foot-links { justify-content: flex-start; margin-top: 22px; }
  .foot-in .made { justify-content: flex-start; }
}