/* mobile.css — THE PHONE VIEW (W-11 r1, 2026-09-06). Loaded only when the screen is at most
   640 px wide (the template links it with a media query); style.css carries the shared skin
   and the wide view. Everything here overrides the shared rules for a phone. */

.hero h1{font-size:26px}.hero .tag{font-size:17px}nav a{margin-left:12px;font-size:13px}

.langs-list{width:min(300px,86vw)}details.langs summary span{display:none}

  .wrap{padding:0 14px}
  header.top .wrap{height:58px}
  .hero-x{margin:12px 0 0;min-height:0;border-radius:14px}
  .hero-bg img{object-position:75% center}
  .hero-bg::after{background:linear-gradient(0deg,rgba(13,18,48,.97) 0%,rgba(13,18,48,.85) 55%,rgba(13,18,48,.3) 100%)}
  .hero-copy{padding:180px 18px 22px;max-width:none}
  .hero-copy h1{font-size:30px}.hero-copy .tag{font-size:17px}.hero-copy .lede{font-size:15px}
  .badges{gap:8px}.badge{flex:1;align-items:center;text-align:center;padding:10px 8px;font-size:14px}
  section{margin:40px 0}h2{font-size:22px}
  .two,.two.domains-x{gap:18px}
  .two .two-art{order:-1}
  .glow img{width:150px}
  .domains{grid-template-columns:1fr}.domain img{width:40px;height:40px}
  .turn .steps{grid-template-columns:1fr;gap:34px}.step{padding:46px 14px 14px}.step-icon{width:72px;height:72px;top:-8px}.step-icon img{width:72px;height:72px}
  .orbit{width:300px;height:300px;transform:none}
  .orbit img{width:76px;height:76px}
  .orbit .orbit-0{width:104px;height:104px;left:98px;top:98px}
  .orbit .orbit-1{left:112px;top:0}.orbit .orbit-2{left:208px;top:56px}.orbit .orbit-3{left:208px;top:168px}
  .orbit .orbit-4{left:112px;top:222px}.orbit .orbit-5{left:16px;top:168px}.orbit .orbit-6{left:16px;top:56px}
  .band,.band.flip{grid-template-columns:1fr;padding:14px;gap:12px}
  .band-art{width:100%;max-width:300px;height:280px;margin:0 auto}.band-art .corner{width:280px;height:280px}.band-art .tile{width:72px;height:72px}
  .band-copy h3{font-size:20px}.band-copy p{font-size:15px}
  .tiles{grid-template-columns:1fr;gap:10px}
  .company .devicon{width:120px}

.glow.spinner{width:150px;height:150px}

.orbit .orbit-hub{left:98px;top:98px;width:104px;height:104px}

  .orbit{width:min(300px,86vw);height:min(300px,86vw)}
  .orbit img{width:calc(min(300px,86vw)*.253);height:calc(min(300px,86vw)*.253)}
  .orbit .orbit-1{left:37.3%;top:0}.orbit .orbit-2{left:69.3%;top:18.7%}.orbit .orbit-3{left:69.3%;top:56%}
  .orbit .orbit-4{left:37.3%;top:74%}.orbit .orbit-5{left:5.3%;top:56%}.orbit .orbit-6{left:5.3%;top:18.7%}
  .orbit .orbit-hub{left:32.7%;top:32.7%;width:34.6%;height:34.6%}
  .board-stack{max-width:none}


  main{padding-top:10px}
  .hero-copy{padding-top:200px}
  .langs-list{right:0;left:auto;width:min(300px,88vw);max-height:70vh}
  [dir=rtl] .langs-list{right:auto;left:0}

/* the phone's hero: the banner as a picture ABOVE the copy -- no overlay, nothing can cover a word */
.hero-x{display:block;min-height:0;margin:10px 0 0;border-radius:14px;overflow:hidden}
.hero-bg{position:static;height:auto;width:100%}
.hero-bg img{width:100%;height:auto;display:block;opacity:1;object-fit:contain;object-position:center}
.hero-bg::after{display:none}
.hero-copy{position:static;padding:16px 16px 18px;max-width:none}
.hero-copy h1{font-size:28px}
main{padding-top:6px}

/* the page's bounds (r2): on a phone the BODY is the scroller -- the root's rubber band ignores
   overscroll-behavior on iOS; a body scroller honours it. The sticky header stays sticky inside it. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
main{flex:1 0 auto}
footer{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

/* the phone's reduced-data setting stills the heaviest layer */
@media (prefers-reduced-data:reduce){.board-stack .layer.spin-whole{animation:none}}

/* the phone's header in two rows (the owner, 2026-09-06): the icon and the name; then Home … and the flag */
header.top .wrap{height:auto;flex-wrap:wrap;padding:8px 0 6px;row-gap:6px}
.brand{width:100%;font-size:16px;gap:10px;white-space:nowrap}
.brand img{width:36px;height:36px}
.brand small{display:none}
nav{width:100%;justify-content:space-between}
nav a{margin-left:0;font-size:14px}
nav a:first-child{margin-left:0}
details.langs{margin-left:0}
details.langs summary{padding:4px 8px}
details.langs summary span{display:none}

/* D-W3 r3 (the owner's ruling): the motion runs on every phone; a tap pauses it (the person's own control) */
.spin-disc,.spin-whole,.ring,.ring img{animation-play-state:paused}
.spinner.in-view .spin-disc,.spinner.in-view .spin-whole,.spinner.in-view .ring,.spinner.in-view .ring img{animation-play-state:running}

/* ── W-15 (2026-09-17, Phase 1.7.e.1): CALL AND MEET IN THE LOBBY on a phone ── */
/* the art above the copy, as every .two section puts it here (.two-art{order:-1}); the ring in the orbit's own
   measure — min(300px,86vw), the seats and the hub in percentages so no width can break it */
.call .lede{font-size:15px;line-height:1.5}
.call .steps{grid-template-columns:1fr;gap:26px;margin-top:4px}
.call .step{padding:34px 14px 14px}
.call .step-icon{width:44px;height:44px;top:-14px}.call .step-icon i{width:44px;height:44px;line-height:44px;font-size:18px}
.private{margin-top:14px;padding:12px 14px;font-size:14px;line-height:1.5}
.lobby{width:min(300px,86vw);height:min(300px,86vw);margin:0 auto}
.lobby-hub{left:32.7%;top:32.7%;width:34.6%;height:34.6%}
.lobby-hub svg,.lobby-hub img{width:100%;height:100%}
.seat{width:21.3%;height:21.3%;font-size:11px}
.seat-1{left:39.3%;top:0}.seat-2{left:72.3%;top:19.5%}.seat-3{left:72.3%;top:59%}.seat-4{left:39.3%;top:78.7%}.seat-5{left:6.3%;top:59%}.seat-6{left:6.3%;top:19.5%}
.lobby-video{left:56%;top:8%;width:24px;height:24px;line-height:24px}
/* the phone's reduced-data setting stills the lobby's disc too, as it stills the board's heaviest layer */
@media (prefers-reduced-data:reduce){.lobby .spin-disc{animation:none}}