/* ============================================================
   Wrist Power — page-specific styles
   The watch is the controller and the phone is the screen, so
   the page pairs the two devices wherever it shows the game.
   Card/panel styling is inherited from app.css + app-retro.css
   (.feature, .stat-pill, .shots-grid .shot) so this page stays
   inside the same arcade-cabinet look as the rest of the site.
   ============================================================ */

/* ---------- platform chips ---------- */
.platform-chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.platform-chip {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  color:var(--accent2);
}
.platform-chip svg { flex:none; }

/* ---------- hero pairing: phone screen + watch controller ---------- */
.pair-hero { width:min(560px,84vw); margin:0 auto; }
.pair-stage { position:relative; }
.phone-frame {
  position:relative; overflow:hidden; background:#000; aspect-ratio:41/18;
  border:var(--px) solid var(--shadow);
  box-shadow:inset 0 0 0 2px var(--accent),
             0 22px 60px rgba(0,0,0,.6),
             0 0 44px color-mix(in srgb,var(--accent) 22%,transparent);
}
.phone-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.pair-watch {
  position:absolute; left:-4%; bottom:-18%; width:38%; aspect-ratio:1/1;
  border-radius:50%; overflow:hidden; background:#000;
  box-shadow:0 0 0 5px var(--accent2), 0 0 0 8px var(--shadow),
             0 18px 44px rgba(0,0,0,.7),
             0 0 34px color-mix(in srgb,var(--accent2) 30%,transparent);
}
.pair-watch img { width:100%; height:100%; object-fit:cover; display:block; }
.pair-caption {
  margin:64px 0 0; text-align:center;
  font-family:'VT323',monospace; font-size:17px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.pair-caption b { color:var(--accent); }
@media(max-width:768px){
  .pair-watch { left:-2%; bottom:-16%; width:34%; }
  .pair-caption { margin-top:56px; }
}

/* ---------- stat pills (skinned by app-retro.css) ---------- */
.stats-row { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin:40px 0; }
.stat-pill { padding:22px 30px; text-align:center; min-width:130px; }

/* ---------- mode chips inside a feature card ---------- */
.mode-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.mode-list span {
  font-family:'VT323',monospace; font-size:15px; letter-spacing:.05em;
  padding:2px 9px; color:var(--muted);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}

/* ---------- arena cloud ---------- */
.arena-cloud { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:860px; margin:0 auto; }
.arena-tag {
  font-family:'VT323',monospace; font-size:17px; letter-spacing:.05em;
  padding:5px 14px; color:var(--muted);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:2px solid var(--line); transition:color .12s, border-color .12s;
}
.arena-tag:hover { color:var(--text); border-color:var(--accent); }
.arena-note { text-align:center; color:var(--muted); font-family:'VT323',monospace;
  font-size:17px; letter-spacing:.05em; margin-top:22px; }

/* ---------- landscape phone screenshots ---------- */
.shots-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:1040px; margin:0 auto; }
.shots-grid .shot {
  position:relative; margin:0; width:auto; height:auto; flex:initial;
  aspect-ratio:41/18; overflow:hidden; background:#000;
}
.shots-grid .shot img { width:100%; height:100%; object-fit:cover; display:block; }
.shots-grid .shot figcaption {
  position:absolute; inset:auto 0 0 0; padding:30px 14px 10px; z-index:2;
  font-family:'VT323',monospace; font-size:16px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text); text-shadow:0 1px 3px #000;
  background:linear-gradient(transparent,rgba(0,0,0,.6) 45%,rgba(0,0,0,.94));
}

/* ---------- round watch screenshots ---------- */
.wear-shot { display:flex; flex-direction:column; align-items:center; }
.wear-shot .lbl {
  margin-top:16px; font-family:'VT323',monospace; font-size:17px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}